fix(journey): sort the stay dates by a compare, make the hint pills real buttons and keep the walk's no-boats default a constant

Every journey map (the desktop aside, the phone screens and the shared page)
now carries four switches: Plan, Recorded, Entries and Photos, each with its
count, a spinner while it loads, the warning tone when it could not be read
and the reason when it has nothing to show. A switch only hides, in place:
the map is not rebuilt and keeps its view, and the choice is kept in this
browser per journey (per link on a shared page, by a hash of its token).

The plan draws the places the linked trips put on their days as hollow dashed
pins and the trips' GPX routes dashed; a place an entry was written about is
not drawn twice, the entry's pin carries a check instead. The stays a day
report was taken over from show as dots in the colour of their day. Marks on
one spot join into a disc with their number and open as a list; a picked
place or stay opens a card with its trip, days and times and leads to its
entry. A key beside the switches explains every pin and line and says that
a plan is no proof of a visit. The phone timelines now show the photos too.

The GPX routes come with the map's layers through the linked trips, read
only while the journey's track switch is on; the frozen /tracks answer stays
Studio's. The share settings on desktop and phone get Trip plan and Recorded
routes under Map, off by default and only switchable while the map is shared.

.gitattributes

@@ -26,5 +26,8 @@
 *.eot  binary
 *.pdf  binary
 *.zip  binary
+# Ski area graphs (SGR1) as the Places host writes them, byte for byte
+*.sgr  binary
+*.gz   binary
 # A GPX fixture whose byte-order mark and CRLF line endings are what it tests
 server/tests/fixtures/gpx/bom-crlf.gpx -text

.github/workflows/test.yml

@@ -9,23 +9,73 @@ permissions:
 # analysis; pull requests get PR analysis with decoration on the PR itself
 # (the scanner picks the context up from the Actions environment).
 #
-# Job layout — three tiers:
+# Job names read "<package>: <what>", so the checks list on a PR sorts by
-#   - Preflight: plugin-facts, i18n-parity and the quality jobs
+# package. What each job holds:
-#     (server-quality, client-quality, plugin-sdk-quality) hold the cheap
+#
-#     generated-code/typecheck/lint/smoke gates. Every test job `needs:` all
+#   Repo: Changed Areas      decides what the change needs to run (below)
-#     of them, so a gate failure stops the run before the expensive coverage
+#   Shared: i18n Parity      every locale has en's files and keys
-#     fan-out spends ~15 runner-minutes on a result the gates already sank.
+#   Shared: Coverage         shared's tests with coverage
-#   - Tests: the *-coverage jobs run the suites and upload lcov; s3-contract
+#   Server: Types            builds shared and the server, typechecks shared,
-#     runs the MinIO contract suite. Coverage jobs run tests only — with the
+#                            the server's src, tests and scripts, smokes the
-#     gates cleared in preflight, they can only fail because tests failed.
+#                            production require chain, the strict ratchet,
-#     client-e2e drives the real app in Chromium and WebKit, client-bundle
+#                            the generated entities and Kysely types
-#     builds the client and checks each map engine keeps a chunk of its own,
+#   Server: Lint & Checks    ESLint (typed), errors and warning counts; then
-#     and postgres-probe runs the dialect helpers and the repository
+#                            Prettier, the plugin facts, the DB call graph,
-#     statements it reaches against a Postgres service. None of them feeds the scan.
+#                            the shared ratchet code, the source ratchets
-#   - Scan `needs:` exactly the four coverage jobs. A coverage job failing
+#                            (size, boundaries, dialect, tx, test SQL, test
-#     must stop the scan — a missing lcov file would make every line of that
+#                            mocks, hand-built services, query API, MCP zod,
-#     package report as uncovered, and the dashboard would show a collapse
+#                            error envelopes, response contracts), open
-#     that did not happen. (The preflight gates stop it transitively.)
+#                            request schemas, knip
+#   Server: Tests n/7        one slice of the server suite, with coverage
+#   Server: Coverage         merges the slices, checks the per-domain
+#                            thresholds, uploads lcov
+#   Server: S3 Contract (MinIO)
+#                            the storage driver against MinIO
+#   Server: Postgres Probe   the repository SQL against Postgres
+#   Client: Types & Checks   typecheck and the strict ratchet; then the page
+#                            pattern and the source ratchets (RTL, size,
+#                            Prettier, layers, offline path, duplication,
+#                            desktop/phone pairs, skips, i18n keys, theme
+#                            tokens)
+#   Client: Lint             ESLint (typed), errors and warning counts
+#   Client: Tests n/7        one slice of the client suite, with coverage
+#   Client: Coverage         merges the slices, checks the thresholds,
+#                            uploads lcov
+#   Client: Bundle           the production build, one chunk per map engine
+#   Client: End-to-End       the app in Chromium and WebKit
+#   Plugin SDK: Types & Coverage
+#   Repo: Docker Image       builds the image and boots it until ready
+#   Repo: Helm Chart & Compose
+#   Repo: Sonar Scan         SonarCloud analysis, not required
+#   ci-ok                    the one required check (below)
+#
+# Job layout:
+#   - Everything starts right after changes: the gates and the tests run side
+#     by side, so a run takes as long as its slowest job and not the gates
+#     plus the tests. The tests used to wait for the gates, which put ~9
+#     minutes in front of every test result. The gates were one job per
+#     package (~8-9 minutes each); each is now two jobs of ~4-5 minutes,
+#     split where the time is (the server's typechecks, the client's lint),
+#     so neither outlasts a test shard.
+#   - The client and server suites run in shards (client-tests,
+#     server-tests), each running a slice with coverage and uploading a blob
+#     report; client-coverage and server-coverage merge the blobs, check the
+#     thresholds against the whole and upload lcov. A red shard is usually a
+#     failing test, a red merge job usually a threshold. None of the other
+#     test jobs feeds the scan.
+#   - Job count: GitHub runs at most 20 jobs of the organisation at once and
+#     does not say in which order it starts queued ones. A code change starts
+#     the 14 shards and about a dozen other jobs; seven of those (parity, the
+#     SDK, the bundle, S3, Postgres, shared coverage, the chart) are done in
+#     a minute or two, so what queues at the start waits about that long. The
+#     jobs that run for minutes (shards, gates, e2e, the image) must not
+#     outnumber the 20 slots, or one of them waits for another to finish and
+#     the run grows by a whole job: a layout with six gate jobs did exactly
+#     that. Check the count before adding a long job or a shard.
+#   - Scan `needs:` the gates and the four coverage jobs. A coverage job
+#     failing must stop the scan — a missing lcov file would make every line
+#     of that package report as uncovered, and the dashboard would show a
+#     collapse that did not happen.
 #   - Fork PRs and runs Dependabot triggers don't receive the repo's Actions
 #     secrets, so the two jobs that need them skip themselves: s3-contract
 #     (MINIO_LICENSE_KEY) and scan (SONAR_TOKEN). ci-ok counts a skip as
@@ -38,7 +88,7 @@ permissions:
 #     required check that never reports blocks the PR for good.
 #   - docker-image builds the Dockerfile and boots the result, and
 #     deploy-manifests lints and renders the Helm chart and checks the
-#     compose files. Both run beside the preflight rather than after it.
+#     compose files. Both run beside the gates rather than after them.
 #   - ci-ok `needs:` every gate, test, image and chart job, and is the one
 #     check the branch ruleset requires. It fails when any of them failed or
 #     was cancelled and passes when they passed or were skipped (by changes,
@@ -69,7 +119,7 @@ concurrency:
 
 jobs:
   changes:
-    name: Changed Areas
+    name: 'Repo: Changed Areas'
     runs-on: ubuntu-24.04
     timeout-minutes: 10
     outputs:
@@ -144,36 +194,8 @@ jobs:
             node scripts/ci/changed-areas.mjs --all
           fi
 
-  plugin-facts:
-    name: Plugin Permission Facts
-    needs: changes
-    if: needs.changes.outputs.code == 'true'
-    runs-on: ubuntu-24.04
-    timeout-minutes: 45
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-          cache: npm
-          cache-dependency-path: package-lock.json
-
-      - name: Install dependencies
-        run: npm ci --workspace server
-
-      # The plugin permission facts live once, in
-      # server/src/nest/plugins/protocol/envelope.ts. Every other copy — the
-      # SDK's generated/host-facts.ts and shared's plugin-permissions.ts — is
-      # generated from it and checked in, because publish-plugin-sdk builds
-      # from a standalone checkout with no server present. This fails the run
-      # if a copy drifts, if a new permission has no admin.plugins.perm.*
-      # translation, or if the CLI has no hint for it.
-      - name: Check the generated plugin facts are in sync
-        run: cd server && npm run check:plugin-facts
-
   i18n-parity:
-    name: i18n Key Parity
+    name: 'Shared: i18n Parity'
     needs: changes
     if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
@@ -189,8 +211,8 @@ jobs:
       - name: Check i18n key parity
         run: node shared/scripts/i18n-parity.mjs --strict
 
-  server-quality:
+  server-types:
-    name: Server Types & Lint
+    name: 'Server: Types'
     needs: changes
     if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
@@ -239,8 +261,11 @@ jobs:
         # constructor parameter does not break its hand-wired call sites at
         # compile time: the argument arrives as undefined and throws at
         # runtime, if anything reads it at all. This is the step that
-        # catches it.
+        # catches it. src and tests together are past 570,000 lines and need
+        # about 4.3 GB, over Node's default heap.
         run: cd server && npm run typecheck:tests
+        env:
+          NODE_OPTIONS: --max-old-space-size=8192
 
       - name: Typecheck entity generator
         # tsconfig.scripts.json covers generate-entities.ts and migrate-encryption.ts;
@@ -257,6 +282,36 @@ jobs:
         # migration that changes a column regenerates it in the same change.
         run: cd server && npm run check:db-types
 
+  server-lint-checks:
+    name: 'Server: Lint & Checks'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
+    runs-on: ubuntu-24.04
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build shared
+        run: npm run build --workspace=shared
+
+      - name: Fetch the base the warnings are compared with
+        # lint:warnings names the file behind a grown count by linting it as
+        # it is on the base: the pushed-over commit on a push, the target
+        # branch on a pull request. A miss only drops that hint.
+        run: >-
+          git fetch --no-tags --depth=1 origin
+          "+${{ github.event_name == 'push' && github.event.before || format('refs/heads/{0}', github.base_ref || 'dev') }}:refs/remotes/lint-base"
+          || true
+
       - name: Lint
         # Errors fail, and the warnings per rule may not pass
         # scripts/eslint-baseline.json (src, tests and eslint-disable'd
@@ -264,8 +319,19 @@ jobs:
         # program, which outgrows Node's default ~4 GB heap on the runner.
         env:
           NODE_OPTIONS: --max-old-space-size=8192
+          TREK_LINT_BASE: refs/remotes/lint-base
         run: cd server && npm run lint:warnings
 
+      # The plugin permission facts live once, in
+      # server/src/nest/plugins/protocol/envelope.ts. Every other copy — the
+      # SDK's generated/host-facts.ts and shared's plugin-permissions.ts — is
+      # generated from it and checked in, because publish-plugin-sdk builds
+      # from a standalone checkout with no server present. This fails the run
+      # if a copy drifts, if a new permission has no admin.plugins.perm.*
+      # translation, or if the CLI has no hint for it.
+      - name: Check the generated plugin facts are in sync
+        run: cd server && npm run check:plugin-facts
+
       - name: Formatting check
         # Prettier over src/ and tests/: a file outside
         # scripts/format-baseline.json must be formatted, and the list only
@@ -359,12 +425,12 @@ jobs:
         # knip (knip.jsonc) over client, server and shared: unused files,
         # exports, types and dependencies per file may not rise above
         # scripts/ci/knip-baseline.json (scripts/ci/knip-ratchet.mjs). Here
-        # rather than in client-quality because it needs every workspace's
+        # rather than in client-types-checks because it needs every workspace's
-        # dependencies, which only this job installs.
+        # dependencies, which the client jobs do not install.
         run: npm run lint:knip
 
-  client-quality:
+  client-types-checks:
-    name: Client Types & Lint
+    name: 'Client: Types & Checks'
     needs: changes
     if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
@@ -380,7 +446,7 @@ jobs:
           cache-dependency-path: package-lock.json
 
       - name: Install dependencies
-        run: npm ci --workspace shared && npm ci --workspace client
+        run: npm ci --workspace shared --workspace client
 
       - name: Build shared
         run: npm run build --workspace=shared
@@ -395,15 +461,6 @@ jobs:
         # one included, has to be clean (scripts/strict-lint.mjs).
         run: cd client && npm run lint:strict
 
-      - name: Lint
-        # Fails on any ESLint error, like lint:check did, and on any rule
-        # whose warning count rises above scripts/eslint-baseline.json.
-        # Typed linting (no-floating-promises, no-misused-promises) loads the
-        # whole TypeScript program, so it gets the heap the server lint gets.
-        env:
-          NODE_OPTIONS: --max-old-space-size=8192
-        run: cd client && npm run lint:warnings
-
       - name: Page pattern check
         run: cd client && npm run lint:pages
 
@@ -467,36 +524,13 @@ jobs:
         # follow the user's scheme, accent and text size (scripts/theme-lint.mjs).
         run: cd client && npm run theme:lint
 
-  plugin-sdk-quality:
+  client-lint:
-    name: Plugin SDK Types
+    name: 'Client: Lint'
     needs: changes
     if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
-    defaults:
-      run:
-        working-directory: plugin-sdk
 
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version-file: .nvmrc
-
-      # plugin-sdk is standalone (own lockfile, not a root workspace), so it
-      # installs from its own directory.
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Typecheck
-        run: npm run typecheck
-
-  client-bundle:
-    name: Client Bundle
-    runs-on: ubuntu-24.04
-    timeout-minutes: 45
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
     steps:
       - uses: actions/checkout@v6
 
@@ -507,7 +541,47 @@ jobs:
           cache-dependency-path: package-lock.json
 
       - name: Install dependencies
-        run: npm ci --workspace shared && npm ci --workspace client
+        run: npm ci --workspace shared --workspace client
+
+      - name: Build shared
+        run: npm run build --workspace=shared
+
+      - name: Fetch the base the warnings are compared with
+        # lint:warnings names the file behind a grown count by linting it as
+        # it is on the base: the pushed-over commit on a push, the target
+        # branch on a pull request. A miss only drops that hint.
+        run: >-
+          git fetch --no-tags --depth=1 origin
+          "+${{ github.event_name == 'push' && github.event.before || format('refs/heads/{0}', github.base_ref || 'dev') }}:refs/remotes/lint-base"
+          || true
+
+      - name: Lint
+        # Fails on any ESLint error, like lint:check did, and on any rule
+        # whose warning count rises above scripts/eslint-baseline.json.
+        # Typed linting (no-floating-promises, no-misused-promises) loads the
+        # whole TypeScript program, so it gets the heap the server lint gets.
+        env:
+          NODE_OPTIONS: --max-old-space-size=8192
+          TREK_LINT_BASE: refs/remotes/lint-base
+        run: cd client && npm run lint:warnings
+
+  client-bundle:
+    name: 'Client: Bundle'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
+    runs-on: ubuntu-24.04
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci --workspace shared --workspace client
 
       - name: Build shared
         run: npm run build --workspace=shared
@@ -523,10 +597,11 @@ jobs:
         run: cd client && npm run check:gl-split
 
   client-e2e:
-    name: Client End-to-End
+    name: 'Client: End-to-End'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
     steps:
       - uses: actions/checkout@v6
 
@@ -580,17 +655,17 @@ jobs:
           retention-days: 7
 
   s3-contract:
-    name: S3 Driver Contract (MinIO)
+    name: 'Server: S3 Contract (MinIO)'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
+    needs: changes
     # Fork PRs don't get repo secrets, so MINIO_LICENSE_KEY would be empty and
     # the AIStor container would fail to boot. A run Dependabot triggers gets
     # only Dependabot secrets, so its PRs (same repo, not a fork) hit the same
     # wall. Pushes and manual dispatches by anyone else do have secrets, so
-    # only those two are filtered out. (The implicit success() on this
+    # only those two are filtered out.
-    # expression also keeps the job skipped when a preflight fails.)
     if: >-
+      needs.changes.outputs.code == 'true' &&
       github.actor != 'dependabot[bot]' &&
       (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository)
 
@@ -606,14 +681,14 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Ensure @swc/core's Linux binary for unplugin-swc
+      - name: Check @swc/core's native binding loads
-        # The lockfile was generated on Windows and omits @swc/core's Linux
+        # The server's SWC transform (server/vitest.config.ts) needs it. The
-        # optional native binary, so npm ci/install skips it on the runner.
+        # lockfile carries the Linux binary, so npm ci installs it; this only
-        # Install the matching version explicitly so the server's SWC transform
+        # names the cause if a lockfile regenerated without it ever lands. (It
-        # (server/vitest.config.ts) can load.
+        # used to be installed here with --legacy-peer-deps, which pruned
-        run: |
+        # eight peer packages and left the tests on a tree the lockfile does
-          SWC_VERSION=$(node -p "require('@swc/core/package.json').version")
+        # not describe.)
-          npm install --no-save --legacy-peer-deps "@swc/core-linux-x64-gnu@$SWC_VERSION"
+        run: node -e "require('@swc/core').transformSync('let a = 1')"
 
       - name: Build shared
         run: npm run build --workspace=shared
@@ -671,10 +746,10 @@ jobs:
   # artifact seeds the file and a change that fixes a statement can lower it
   # without a local Postgres.
   postgres-probe:
-    name: Postgres Probe
+    name: 'Server: Postgres Probe'
     runs-on: ubuntu-24.04
     timeout-minutes: 10
-    needs: [changes, plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
+    needs: changes
     if: needs.changes.outputs.code == 'true'
     services:
       postgres:
@@ -727,11 +802,20 @@ jobs:
           if-no-files-found: ignore
           retention-days: 14
 
-  server-coverage:
+  # The server suite in seven slices. vitest.shard.config.ts is vitest.config.ts
-    name: Server Coverage
+  # without the thresholds and the coverage reports: a slice's blob carries
+  # its coverage to server-coverage, which checks the whole. fail-fast is off,
+  # so one red run shows every failing slice and not just the first.
+  server-tests:
+    name: 'Server: Tests ${{ matrix.shard }}/7'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
-    timeout-minutes: 45
+    timeout-minutes: 30
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4, 5, 6, 7]
     steps:
       - uses: actions/checkout@v6
 
@@ -744,20 +828,63 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Ensure @swc/core's Linux binary for unplugin-swc
+      - name: Check @swc/core's native binding loads
-        # The lockfile was generated on Windows and omits @swc/core's Linux
+        # The server's SWC transform (server/vitest.config.ts) needs it. The
-        # optional native binary, so npm ci/install skips it on the runner.
+        # lockfile carries the Linux binary, so npm ci installs it; this only
-        # Install the matching version explicitly so the server's SWC transform
+        # names the cause if a lockfile regenerated without it ever lands. (It
-        # (server/vitest.config.ts) can load.
+        # used to be installed here with --legacy-peer-deps, which pruned
-        run: |
+        # eight peer packages and left the tests on a tree the lockfile does
-          SWC_VERSION=$(node -p "require('@swc/core/package.json').version")
+        # not describe.)
-          npm install --no-save --legacy-peer-deps "@swc/core-linux-x64-gnu@$SWC_VERSION"
+        run: node -e "require('@swc/core').transformSync('let a = 1')"
 
       - name: Build shared
         run: npm run build --workspace=shared
 
-      - name: Run tests with coverage
+      - name: Run a slice of the tests with coverage
-        run: cd server && npm run test:coverage
+        run: >-
+          cd server && npx vitest run --config vitest.shard.config.ts --coverage
+          --shard=${{ matrix.shard }}/7
+          --reporter=default --reporter=github-actions --reporter=blob
+
+      - name: Upload the blob report
+        uses: actions/upload-artifact@v6
+        with:
+          name: server-blob-${{ matrix.shard }}
+          path: server/.vitest-reports/
+          include-hidden-files: true
+          if-no-files-found: error
+          retention-days: 1
+
+  server-coverage:
+    name: 'Server: Coverage'
+    needs: server-tests
+    runs-on: ubuntu-24.04
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download the blob reports
+        uses: actions/download-artifact@v7
+        with:
+          pattern: server-blob-*
+          path: server/.vitest-reports/
+          merge-multiple: true
+
+      - name: Merge the slices and check the thresholds
+        # Every blob holds a whole coverage map, and the merge reads them all
+        # into one process.
+        env:
+          NODE_OPTIONS: --max-old-space-size=6144
+        run: cd server && npx vitest run --merge-reports --coverage
 
       - name: Upload coverage
         uses: actions/upload-artifact@v6
@@ -766,11 +893,18 @@ jobs:
           path: server/coverage/
           retention-days: 1
 
-  client-coverage:
+  # The client suite in seven slices, the same way as server-tests. The two
-    name: Client Coverage
+  # suites cost about the same per slice at seven each (~4-6 minutes).
+  client-tests:
+    name: 'Client: Tests ${{ matrix.shard }}/7'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
-    timeout-minutes: 45
+    timeout-minutes: 30
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4, 5, 6, 7]
     steps:
       - uses: actions/checkout@v6
 
@@ -785,13 +919,56 @@ jobs:
       # @testing-library/react) in the tree without the re-resolution dance
       # the folded coverage job used to need.
       - name: Install dependencies
-        run: npm ci --workspace shared && npm ci --workspace client
+        run: npm ci --workspace shared --workspace client
 
       - name: Build shared
         run: npm run build --workspace=shared
 
-      - name: Run tests with coverage
+      - name: Run a slice of the tests with coverage
-        run: cd client && npm run test:coverage
+        run: >-
+          cd client && npx vitest run --config vitest.shard.config.ts --coverage
+          --shard=${{ matrix.shard }}/7
+          --reporter=default --reporter=github-actions --reporter=blob
+
+      - name: Upload the blob report
+        uses: actions/upload-artifact@v6
+        with:
+          name: client-blob-${{ matrix.shard }}
+          path: client/.vitest-reports/
+          include-hidden-files: true
+          if-no-files-found: error
+          retention-days: 1
+
+  client-coverage:
+    name: 'Client: Coverage'
+    needs: client-tests
+    runs-on: ubuntu-24.04
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci --workspace shared --workspace client
+
+      - name: Download the blob reports
+        uses: actions/download-artifact@v7
+        with:
+          pattern: client-blob-*
+          path: client/.vitest-reports/
+          merge-multiple: true
+
+      - name: Merge the slices and check the thresholds
+        # Every blob holds a whole coverage map, and the merge reads them all
+        # into one process.
+        env:
+          NODE_OPTIONS: --max-old-space-size=6144
+        run: cd client && npx vitest run --merge-reports --coverage
 
       - name: Upload coverage
         uses: actions/upload-artifact@v6
@@ -801,10 +978,11 @@ jobs:
           retention-days: 1
 
   shared-coverage:
-    name: Shared Coverage
+    name: 'Shared: Coverage'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
     steps:
       - uses: actions/checkout@v6
 
@@ -827,11 +1005,14 @@ jobs:
           path: shared/coverage/
           retention-days: 1
 
-  plugin-sdk-coverage:
+  # Typecheck and tests in one job: each takes seconds, and a runner of its
-    name: Plugin SDK Coverage
+  # own would cost more in setup than it saves.
+  plugin-sdk:
+    name: 'Plugin SDK: Types & Coverage'
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
-    needs: [plugin-facts, i18n-parity, server-quality, client-quality, plugin-sdk-quality]
     defaults:
       run:
         working-directory: plugin-sdk
@@ -850,6 +1031,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Typecheck
+        run: npm run typecheck
+
       - name: Run tests with coverage
         run: npm run test:coverage
 
@@ -861,7 +1045,7 @@ jobs:
           retention-days: 1
 
   scan:
-    name: Scan
+    name: 'Repo: Sonar Scan'
     runs-on: ubuntu-24.04
     timeout-minutes: 45
     # Fork PRs and Dependabot runs don't receive SONAR_TOKEN, so skip the scan
@@ -871,9 +1055,18 @@ jobs:
       (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository)
     # Coverage jobs failing must stop the scan: a missing lcov file would make
     # every line of that package report as uncovered, and the dashboard would
-    # show a collapse that did not happen. The preflight gates already stop it
+    # show a collapse that did not happen. The gates run beside the tests now,
-    # transitively through these four, so they aren't repeated here.
+    # so they are listed here too, and a failed gate still stops the scan.
-    needs: [server-coverage, client-coverage, shared-coverage, plugin-sdk-coverage]
+    needs:
+      - i18n-parity
+      - server-types
+      - server-lint-checks
+      - client-types-checks
+      - client-lint
+      - server-coverage
+      - client-coverage
+      - shared-coverage
+      - plugin-sdk
 
     steps:
       - uses: actions/checkout@v6
@@ -934,7 +1127,7 @@ jobs:
   # reached dev unseen. It is separate from the vulnerability scan on purpose,
   # so a newly published CVE cannot hide a broken build or the other way round.
   docker-image:
-    name: Docker Image
+    name: 'Repo: Docker Image'
     needs: changes
     if: needs.changes.outputs.image == 'true'
     runs-on: ubuntu-24.04
@@ -1011,7 +1204,7 @@ jobs:
   # the output checked against the Kubernetes API schemas. Both tools come
   # from their release pages, pinned by version and checksum.
   deploy-manifests:
-    name: Helm Chart & Compose
+    name: 'Repo: Helm Chart & Compose'
     needs: changes
     if: needs.changes.outputs.deploy == 'true'
     runs-on: ubuntu-24.04
@@ -1082,19 +1275,21 @@ jobs:
   ci-ok:
     needs:
       - changes
-      - plugin-facts
       - i18n-parity
-      - server-quality
+      - server-types
-      - client-quality
+      - server-lint-checks
-      - plugin-sdk-quality
+      - client-types-checks
+      - client-lint
       - client-bundle
       - client-e2e
       - s3-contract
       - postgres-probe
+      - server-tests
       - server-coverage
+      - client-tests
       - client-coverage
       - shared-coverage
-      - plugin-sdk-coverage
+      - plugin-sdk
       - docker-image
       - deploy-manifests
     # always(): without it a failed dependency would skip this job, and the

.gitignore

@@ -55,6 +55,8 @@ coverage
 coverage-*/
 *.lcov
 .nyc_output
+# Blob reports of a sharded vitest run (test.yml)
+.vitest-reports
 
 # Cache
 .npm

CLAUDE.md

@@ -134,8 +134,10 @@ These principles come out of a full-repo audit and shape all new code:
 
 ## Quality gates in CI
 
-`.github/workflows/test.yml` runs, per package: typecheck (server also `typecheck:tests`, client also the strict-mode ratchet `lint:strict`), lint (client and server through `lint:warnings`, which also holds the warning count per rule), `lint:pages`, `lint:rtl`, `lint:size` (client and server), the server's `lint:strict`, `lint:boundaries`, `lint:tx`, `lint:dialect`, `lint:test-sql`, `lint:test-mocks`, `lint:test-new-service`, `lint:query-api`, `lint:mcp-zod`, `lint:service-http` and `lint:response-contracts`, the client's and server's `lint:format`, `lint:layers`, `lint:offline`, `lint:dup`, `lint:pairs`, `lint:skips`, `lint:i18n-keys` and `theme:lint`, shared's `contracts:open`, the repo-wide `lint:knip` (in server-quality), `check:plugin-facts`, `i18n:parity:strict` (with the untranslated-strings ratchet), the S3 contract suite, the Postgres probe (`postgres-probe`: every dialect helper on SQLite and Postgres, and the statements every repository method reaches with sample arguments against a Postgres service; the SQL errors per method and the list of methods it cannot measure are held to a baseline that only shrinks and fails while it is still unmeasured; see `server/CLAUDE.md`), the browser end-to-end flows (Chromium and WebKit), a client build with `check:gl-split`, coverage for all four packages, then a SonarCloud scan. It also builds the Docker image and boots it until `/api/health/ready` answers (`docker-image`), and lints and renders the Helm chart against the Kubernetes schemas and runs `docker compose config` on every compose file (`deploy-manifests`). `lint-prettier.yml` additionally runs `lint` + `lint:format` on `shared/`, both check-only. `plugin-sdk` has no lint script and is outside the eslint gates. **Not in CI**: the screenshot and help-media Playwright projects; run them locally. There are no git hooks; nothing runs before a commit except you. Other workflows build Docker images, scan them, and publish `trek-plugin-sdk` on `plugin-sdk-v*` tags.
+`.github/workflows/test.yml` runs, per package: typecheck (server also `typecheck:tests`, client also the strict-mode ratchet `lint:strict`), lint (client and server through `lint:warnings`, which also holds the warning count per rule), `lint:pages`, `lint:rtl`, `lint:size` (client and server), the server's `lint:strict`, `lint:boundaries`, `lint:tx`, `lint:dialect`, `lint:test-sql`, `lint:test-mocks`, `lint:test-new-service`, `lint:query-api`, `lint:mcp-zod`, `lint:service-http` and `lint:response-contracts`, the client's and server's `lint:format`, `lint:layers`, `lint:offline`, `lint:dup`, `lint:pairs`, `lint:skips`, `lint:i18n-keys` and `theme:lint`, shared's `contracts:open`, the repo-wide `lint:knip` (in server-lint-checks), `check:plugin-facts`, `i18n:parity:strict` (with the untranslated-strings ratchet), the S3 contract suite, the Postgres probe (`postgres-probe`: every dialect helper on SQLite and Postgres, and the statements every repository method reaches with sample arguments against a Postgres service; the SQL errors per method and the list of methods it cannot measure are held to a baseline that only shrinks and fails while it is still unmeasured; see `server/CLAUDE.md`), the browser end-to-end flows (Chromium and WebKit), a client build with `check:gl-split`, coverage for all four packages, then a SonarCloud scan. It also builds the Docker image and boots it until `/api/health/ready` answers (`docker-image`), and lints and renders the Helm chart against the Kubernetes schemas and runs `docker compose config` on every compose file (`deploy-manifests`). `lint-prettier.yml` additionally runs `lint` + `lint:format` on `shared/`, both check-only. `plugin-sdk` has no lint script and is outside the eslint gates. **Not in CI**: the screenshot and help-media Playwright projects; run them locally. There are no git hooks; nothing runs before a commit except you. Other workflows build Docker images, scan them, and publish `trek-plugin-sdk` on `plugin-sdk-v*` tags.
 
+- **Job names read "package: what"** (`Server: Types`, `Client: Tests 3/7`), and the list at the top of `test.yml` says what each job holds. A new job follows the scheme and joins that list, and the job-count note there says when a long job needs a slot freed first.
+- **Tests run beside the gates, in shards.** The client and server suites run in slices on parallel runners (`client-tests`, `server-tests`, through each package's `vitest.shard.config.ts`), and `client-coverage`/`server-coverage` merge their blob reports and check the thresholds against the whole. A red slice is usually a failing test, a red merge job usually a threshold.
 - **`ci-ok` is the required check.** The branch ruleset requires `ci-ok` (plus `lint` and `check-target` from their own workflows), and `ci-ok` needs every job above except the scan. It fails if any of them failed or was cancelled and passes if they passed or were skipped. A new gate job counts only once it is listed in `ci-ok`'s `needs:`.
 - **Guides name paths that exist**: the `changes` job runs `scripts/ci/doc-paths.mjs`, which resolves every backtick path in the CLAUDE.md files, `README.md`, `server/src/nest/README.md` and the wiki against the tracked files; the missing ones are listed in `scripts/ci/doc-paths-baseline.json`, which only shrinks (`--update` after a fix).
 - **What runs is decided by `changes`, not by `on.paths`**: `scripts/ci/changed-areas.mjs` maps the changed files to the `code`, `image` and `deploy` areas (tests: `npm run test:ci-scripts`). A path filter on the workflow would leave `ci-ok` unreported on a docs-only PR and block it. Add a new top-level file the build reads to the right area there.

charts/trek/values.yaml

@@ -102,8 +102,8 @@ env:
   # lower value hangs up on answers that were still coming. Raise it for a slow self-hosted Overpass instance.
   # Defaults to 25000.
   # TREK_PLACES_ENABLED: "false"
-  # Place search (suggestions, full search, category buttons, Road trip search, import geocoding, offline downloads)
+  # Place search (suggestions, full search, category buttons, Road trip search, import geocoding, offline downloads,
-  # asks the TREK Places API at https://places.liketrek.com by default, so the pod makes outbound requests to that
+  # and the OpenStreetMap ways and horse routes Tours reads) asks the TREK Places API at https://places.liketrek.com by default, so the pod makes outbound requests to that
   # host. Set "false" to search the way it did before 4.3.0 (OpenStreetMap, or your Google/Amap key) and send
   # nothing there. There is no switch in the admin panel on purpose: whether searches leave the instance is decided
   # here. Defaults to on.

client/scripts/eslint-baseline.json

@@ -1,22 +1,22 @@
 {
   "src": {
     "@typescript-eslint/no-non-null-assertion": 404,
-    "@typescript-eslint/no-misused-promises": 875,
+    "@typescript-eslint/no-misused-promises": 874,
     "no-console": 88,
     "complexity": 230,
     "@typescript-eslint/no-explicit-any": 147,
     "trek/no-swallowed-catch": 133,
     "max-params": 35,
     "trek/store-without-selector": 69,
-    "react-hooks/refs": 560,
+    "react-hooks/refs": 557,
-    "react-hooks/set-state-in-effect": 197,
+    "react-hooks/set-state-in-effect": 196,
     "@typescript-eslint/no-floating-promises": 167,
     "react-hooks/exhaustive-deps": 121,
-    "@typescript-eslint/no-unused-vars": 130,
+    "@typescript-eslint/no-unused-vars": 127,
     "react-hooks/immutability": 28,
     "max-lines-per-function": 133,
     "react-hooks/static-components": 78,
-    "react-hooks/preserve-manual-memoization": 15,
+    "react-hooks/preserve-manual-memoization": 12,
     "no-useless-assignment": 7,
     "no-empty": 19,
     "trek/no-window-globals": 41,

client/scripts/feature-pairs.json

@@ -223,6 +223,15 @@
       "desktop": ["src/pages/CollectionsPage.tsx"],
       "mobile": ["src/mobile/screens/collections/MCollections.tsx"]
     },
+    {
+      "feature": "Collection tours (LIB-03): useCollectionTours, useCollectionTourTakeOver",
+      "hooks": [
+        "src/components/Tours/collection/useCollectionTours.ts",
+        "src/components/Tours/collection/useCollectionTourTakeOver.ts"
+      ],
+      "desktop": ["src/components/Tours/collection/CollectionToursSection.tsx"],
+      "mobile": ["src/mobile/screens/collections/MCollTours.tsx"]
+    },
     {
       "feature": "Copy collection places to a trip",
       "hooks": ["src/components/Collections/useTripCopyPicker.ts"],
@@ -390,6 +399,18 @@
         "src/mobile/screens/journey/mobileJourneyMeta.ts"
       ]
     },
+    {
+      "feature": "Journey day take-over: useJourneyDayImport",
+      "hooks": ["src/components/Journey/useJourneyDayImport.ts"],
+      "desktop": ["src/components/Journey/JourneyDayImportDialog.tsx"],
+      "mobile": ["src/mobile/screens/journey/MJourneyDayImportSheet.tsx"]
+    },
+    {
+      "feature": "Journey day recording: useJourneyRecordingDay",
+      "hooks": ["src/components/Journey/useJourneyRecordingDay.ts"],
+      "desktop": ["src/components/Journey/JourneyRecordingDialog.tsx"],
+      "mobile": ["src/mobile/screens/journey/MJourneyRecordingSheet.tsx"]
+    },
     {
       "feature": "Journey detail page: useJourneyDetail",
       "hooks": ["src/pages/journeyDetail/useJourneyDetail.ts"],
@@ -571,6 +592,24 @@
       "desktop": ["src/components/Admin/AdminPluginsPanel.tsx"],
       "mobile": ["src/mobile/screens/admin/MAdminPluginsPanel.tsx"]
     },
+    {
+      "feature": "Public transit for one leg, between two city walks from the first one's end, and a journey late for the next walk",
+      "hooks": ["src/components/Planner/useTransitLegPlanner.ts"],
+      "desktop": ["src/components/Planner/DayPlanSidebar.tsx"],
+      "mobile": ["src/mobile/screens/trip/plan/useMPlanTimeline.ts"]
+    },
+    {
+      "feature": "A tour's start and end in the day plan, its end worked out from its time, and an end that runs into the next timed item",
+      "hooks": ["src/components/Tours/tourDayTime.ts"],
+      "desktop": ["src/components/Planner/DayPlanSidebar.tsx"],
+      "mobile": ["src/mobile/screens/trip/plan/useMPlanTimeline.ts"]
+    },
+    {
+      "feature": "A multi-day tour put on a day: the whole tour there, or a stage a day from that day on",
+      "hooks": ["src/components/Tours/stages/stageSpread.ts"],
+      "desktop": ["src/components/Tours/stages/TourDayChoiceDialog.tsx", "src/components/Tours/stages/TourDayAddButton.tsx"],
+      "mobile": ["src/mobile/screens/trip/sheets/MTourDayChoiceSheet.tsx"]
+    },
     {
       "feature": "Reservation form incl. hotel accommodation creation",
       "hooks": ["src/components/Planner/reservationFormModel.ts", "src/components/Planner/useReservationForm.ts"],
@@ -874,6 +913,7 @@
     "src/mobile/screens/collections/MCollSheetKit.tsx": "Phone only sheet UI primitives for the collections screens (header, footer, pill, eyebrow).",
     "src/mobile/screens/collections/collectionsMobileModel.ts": "Visual constants only the phone collections screens use (category and status specs, swatches, cover gradient).",
     "src/mobile/screens/dashboard/MUserMenu.tsx": "Phone avatar menu with a three state theme cycle the desktop navbar does not have.",
+    "src/mobile/screens/journey/MDawarichDaySheet.tsx": "Markup only; the phone frame the Dawarich day sheets (route and stays) render their shared review in.",
     "src/mobile/screens/settings/MConfirmSheet.tsx": "Phone only bottom sheet confirm dialog used across the mobile screens.",
     "src/mobile/screens/settings/MDawarichConnectionSection.tsx": "Already shares hooks/useDawarichConnection with components/Settings/DawarichConnectionSection.tsx.",
     "src/mobile/screens/settings/MMobileDashOrder.tsx": "Phone only setting that orders the mobile dashboard blocks; the desktop has no such setting.",

client/scripts/lib/eslint-warnings.mjs

@@ -2,6 +2,7 @@
  * The tally and the comparison behind lint:warnings (scripts/eslint-ratchet.mjs).
  */
 import { ESLint } from 'eslint';
+import { execFileSync } from 'node:child_process';
 import { join } from 'node:path';
 import ts from 'typescript';
 import {
@@ -137,6 +138,90 @@ export async function lintClient(root) {
   }));
 }
 
+/** The ref new warnings are measured against: TREK_LINT_BASE (the CI sets it), else origin/dev. */
+const baseRef = () => process.env.TREK_LINT_BASE || 'origin/dev';
+
+/** Git in the workspace: its output, or null when it fails (no repository, no such ref). */
+function gitIn(root, args) {
+  try {
+    return execFileSync('git', args, {
+      cwd: root,
+      encoding: 'utf8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+      maxBuffer: 1 << 28,
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** The messages of one rule in one area of a single file's lint result. */
+function ofRule(results, rule, area) {
+  const result = results[0];
+  if (!result) return [];
+  const pool =
+    area === 'suppressed' ? (result.suppressedMessages ?? []) : result.messages.filter((m) => m.severity === 1);
+  return pool.filter((m) => ruleOf(m) === rule);
+}
+
+/**
+ * Where a grown rule's new warnings sit: every file among `keys` (the files
+ * holding the rule now) that differs from `ref` and holds more of the rule
+ * than it did there, each of its warnings of the rule as `file:line  message`.
+ * The count alone names no file, and the files holding the most are old ones;
+ * this names the file that tipped it. Null when `ref` is not at hand (a clone
+ * without it), and the report then keeps to the files holding the most.
+ */
+export async function newWarningsOf({ root, rule, area, keys, lintText, ref = baseRef(), git = gitIn }) {
+  const changed = git(root, ['diff', '--name-only', '--relative', ref, '--', '.']);
+  if (changed === null) return null;
+  const differs = new Set(changed.split('\n').filter(Boolean));
+  const found = await Promise.all(
+    keys
+      .filter((key) => differs.has(key))
+      .map(async (key) => {
+        const path = join(root, key);
+        // A typed rule can trip over a text that is not the file on disk (the
+        // base version); then the file's own warnings are told, marked so.
+        const lint = async (text) => {
+          try {
+            return { messages: ofRule(await lintText(text, path), rule, area) };
+          } catch {
+            return null;
+          }
+        };
+        const now = await lint(readText(path));
+        if (!now) return [];
+        const before = git(root, ['show', `${ref}:./${key}`]);
+        const was = before === null ? { messages: [] } : await lint(before);
+        if (was && now.messages.length <= was.messages.length) return [];
+        const note = was ? '' : '  (the base version could not be linted)';
+        return now.messages.map((m) => `${key}:${m.line ?? 0}  ${m.message}${note}`);
+      })
+  );
+  return found.flat();
+}
+
+/** Prints, under the grown counts, the files and lines behind each one (see newWarningsOf). */
+async function reportNew(grown, { root, files, lintText, error }) {
+  if (!grown.length || !lintText) return;
+  const found = await Promise.all(
+    grown.map(({ area, rule }) => newWarningsOf({ root, rule, area, keys: Object.keys(files[area][rule]), lintText }))
+  );
+  grown.forEach(({ area, rule }, i) => {
+    const lines = found[i];
+    if (!lines?.length) return;
+    error(`New ${rule} warning(s) in ${area}, against ${baseRef()}:`);
+    for (const line of lines) error(`  ${line}`);
+  });
+}
+
+/** Lints one file's text with the client's own config, for newWarningsOf. */
+function lintTextClient(root) {
+  const eslint = new ESLint({ cwd: root });
+  return (text, filePath) => eslint.lintText(text, { filePath });
+}
+
 const sum = (map) => Object.values(map).reduce((a, b) => a + b, 0);
 
 /**
@@ -148,6 +233,7 @@ export async function check({
   baselinePath = join(root, 'scripts/eslint-baseline.json'),
   update = false,
   lint = lintClient,
+  lintText = lint === lintClient ? lintTextClient : null,
   log = console.log,
   error = console.error,
 }) {
@@ -160,13 +246,13 @@ export async function check({
   }
 
   for (const line of errors) error(`FAIL  ${line}`);
-  let grown = 0;
+  const grown = [];
   let stale = 0;
   for (const area of AREAS) {
     for (const [rule, n] of Object.entries(counts[area])) {
       const allowed = baseline[area][rule] ?? 0;
       if (n <= allowed) continue;
-      grown++;
+      grown.push({ area, rule });
       const top = Object.entries(files[area][rule])
         .sort(([, a], [, b]) => b - a)
         .slice(0, 5)
@@ -182,7 +268,8 @@ export async function check({
     });
     stale += fallen.length;
   }
-  if (grown) {
+  await reportNew(grown, { root, files, lintText: lintText && lintText(root), error });
+  if (grown.length) {
     error(
       'Fix the new warning rather than silencing it: an eslint-disable comment is counted under "suppressed". ' +
         'Run npx eslint <file> to see each one.'
@@ -191,5 +278,5 @@ export async function check({
   log(
     `eslint: ${errors.length} error(s); warnings ${AREAS.map((area) => `${area} ${sum(counts[area])}/${sum(baseline[area])}`).join(', ')} (now/baseline)`
   );
-  return errors.length || grown || stale ? 1 : 0;
+  return errors.length || grown.length || stale ? 1 : 0;
 }

client/scripts/size-baseline.json

@@ -1,20 +1,20 @@
 {
   "e2e/help/fixtures.ts": 2291,
-  "src/api/client.ts": 1916,
+  "src/api/client.ts": 1910,
   "src/components/Admin/AdminPluginsPanel.test.tsx": 2704,
   "src/components/Admin/AdminPluginsPanel.tsx": 1667,
   "src/components/Budget/CostsPanel.test.tsx": 2764,
   "src/components/Budget/CostsPanel.tsx": 1816,
-  "src/components/Map/MapView.tsx": 1409,
+  "src/components/Map/MapView.tsx": 1401,
   "src/components/Map/MapViewGL.test.tsx": 2920,
-  "src/components/Map/MapViewGL.tsx": 2371,
+  "src/components/Map/MapViewGL.tsx": 2293,
   "src/components/Map/RouteCalculator.ts": 1195,
   "src/components/PDF/TripPDF.tsx": 1082,
   "src/components/Planner/DayDetailPanel.test.tsx": 2333,
   "src/components/Planner/DayPlanSidebar.test.tsx": 5378,
-  "src/components/Planner/DayPlanSidebar.tsx": 2971,
+  "src/components/Planner/DayPlanSidebar.tsx": 2963,
-  "src/components/Planner/PlaceFormModal.test.tsx": 2864,
+  "src/components/Planner/PlaceFormModal.test.tsx": 2836,
-  "src/components/Planner/PlaceFormModal.tsx": 1250,
+  "src/components/Planner/PlaceFormModal.tsx": 1193,
   "src/components/Planner/PlaceInspector.tsx": 1304,
   "src/components/Studio/TravelElements.tsx": 1738,
   "src/components/Studio/autoLayout.ts": 1691,
@@ -24,7 +24,7 @@
   "src/mobile/screens/admin/MAdminPluginsPanel.tsx": 1507,
   "src/pages/JourneyDetailPage.test.tsx": 4030,
   "src/pages/LoginPage.tsx": 1348,
-  "src/pages/TripPlannerPage.tsx": 1147,
+  "src/pages/TripPlannerPage.tsx": 1140,
   "src/pages/atlas/useAtlas.ts": 1287,
   "src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx": 3518,
   "src/pages/tripPlanner/useTripPlanner.test.tsx": 3309,

client/scripts/theme-baseline.json

@@ -55,7 +55,7 @@
   "components/Layout/DemoBanner.tsx": 25,
   "components/Layout/InAppNotificationBell.tsx": 10,
   "components/Layout/MobileTopBar.tsx": 51,
-  "components/Layout/Navbar.tsx": 22,
+  "components/Layout/Navbar.tsx": 21,
   "components/Layout/NewVersionNotice.tsx": 3,
   "components/Layout/OfflineBanner.tsx": 2,
   "components/Layout/PageSidebar.tsx": 3,
@@ -269,7 +269,7 @@
   "mobile/screens/trip/sheets/PlSheetChrome.tsx": 7,
   "mobile/screens/trip/sheets/PlTimeFields.tsx": 3,
   "mobile/screens/trip/tabs/MBagsSheet.tsx": 13,
-  "mobile/screens/trip/tabs/MBookingsTab.tsx": 3,
+  "mobile/screens/trip/tabs/MBookingsTab.tsx": 2,
   "mobile/screens/trip/tabs/MCollabChat.tsx": 22,
   "mobile/screens/trip/tabs/MCollabNotes.tsx": 19,
   "mobile/screens/trip/tabs/MCollabPolls.tsx": 18,

client/src/api/client.ts

@@ -2,7 +2,7 @@ import { isEffectivelyOffline } from '../sync/networkMode'
 import axios, { AxiosInstance } from 'axios'
 import type { z } from 'zod'
 import type { Day, Place, Trip } from '../types'
-import type { MapsNearbyRequest, JourneyReorderEntryPhotosRequest, TransitProvider, GoogleQuotaUpdateRequest, NotificationDefaultsUpdateRequest, TourListItem, TourImportGpxResponse, TourCreateRequest, TourCreateResponse, TourDetailResponse } from '@trek/shared'
+import type { MapsNearbyRequest, JourneyReorderEntryPhotosRequest, TransitProvider, GoogleQuotaUpdateRequest, NotificationDefaultsUpdateRequest, TourListItem, TourCreateRequest, TourCreateResponse, TourDetailResponse } from '@trek/shared'
 import { randomId } from '../utils/randomId'
 import { postProviderPhotosInBatches } from './providerPhotoBatches'
 import {
@@ -525,11 +525,6 @@ export const toursApi = {
     apiClient.post(`/trips/${tripId}/tours`, body).then(r => r.data),
   update: (tripId: number | string, placeId: number | string, body: TourCreateRequest): Promise<TourDetailResponse> =>
     apiClient.put(`/trips/${tripId}/tours/${placeId}`, body).then(r => r.data),
-  importGpx: (tripId: number | string, file: File): Promise<TourImportGpxResponse> => {
-    const fd = new FormData()
-    fd.append('file', file)
-    return postMultipart(`/trips/${tripId}/tours/import/gpx`, fd)
-  },
 }
 
 export const assignmentsApi = {

client/src/api/collectionTours.test.ts

@@ -0,0 +1,54 @@
+// FE-API-COLLECTION-TOURS-001 to FE-API-COLLECTION-TOURS-002
+//
+// LIB-03: every method pins its verb, its path and its body, and hands back what
+// the server answered.
+import { http, HttpResponse, type JsonBodyType } from 'msw';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { server } from '../../tests/helpers/msw/server';
+import { collectionToursApi } from './collectionTours';
+
+const BASE = '/api/addons/collections/3/tours';
+
+let calls: Array<{ method: string; path: string; body: unknown }> = [];
+
+beforeEach(() => {
+  calls = [];
+});
+
+function record(data: JsonBodyType | null) {
+  return async ({ request }: { request: Request }) => {
+    const text = await request.text();
+    calls.push({ method: request.method, path: new URL(request.url).pathname, body: text ? JSON.parse(text) : null });
+    return data === null ? new HttpResponse(null, { status: 200 }) : HttpResponse.json(data);
+  };
+}
+
+describe('collectionToursApi', () => {
+  it('FE-API-COLLECTION-TOURS-001: lists, reads, keeps and removes the tours of a collection', async () => {
+    server.use(
+      http.get(BASE, record({ tours: [] })),
+      http.get(`${BASE}/4`, record({ tour: { id: 4 }, line: [], points: [], trips: [] })),
+      http.post(BASE, record({ tour: { id: 5 } })),
+      http.delete(`${BASE}/4`, record({ success: true }))
+    );
+    expect(await collectionToursApi.list(3)).toEqual({ tours: [] });
+    expect((await collectionToursApi.detail(3, 4)).tour).toEqual({ id: 4 });
+    expect(await collectionToursApi.save(3, { source_trip_id: 2, source_place_id: 7, name: 'Kept' })).toEqual({
+      tour: { id: 5 },
+    });
+    expect(await collectionToursApi.remove(3, 4)).toBeUndefined();
+    expect(calls).toEqual([
+      { method: 'GET', path: BASE, body: null },
+      { method: 'GET', path: `${BASE}/4`, body: null },
+      { method: 'POST', path: BASE, body: { source_trip_id: 2, source_place_id: 7, name: 'Kept' } },
+      { method: 'DELETE', path: `${BASE}/4`, body: null },
+    ]);
+  });
+
+  it('FE-API-COLLECTION-TOURS-002: takes a kept tour into a trip with the choice about its points', async () => {
+    server.use(http.post('/api/trips/6/tours/from-collection', record({ tour: { place_id: 9 }, waypoints: [] })));
+    const body = { collection_id: 3, collection_tour_id: 4, include_waypoints: false };
+    expect((await collectionToursApi.takeOver(6, body)).tour).toEqual({ place_id: 9 });
+    expect(calls).toEqual([{ method: 'POST', path: '/api/trips/6/tours/from-collection', body }]);
+  });
+});

client/src/api/collectionTours.ts

@@ -0,0 +1,25 @@
+import type {
+  CollectionTourDetailResponse,
+  CollectionTourListResponse,
+  CollectionTourSaveRequest,
+  CollectionTourSaveResponse,
+  CollectionTourTakeOverRequest,
+  TourCreateResponse,
+} from '@trek/shared';
+import apiClient from './client';
+
+const base = (collectionId: number) => `/addons/collections/${collectionId}/tours`;
+
+/** LIB-03: the whole tours a collection keeps, keeping one, removing one and taking one into a trip. */
+export const collectionToursApi = {
+  list: (collectionId: number, signal?: AbortSignal): Promise<CollectionTourListResponse> =>
+    apiClient.get(base(collectionId), { signal }).then((r) => r.data),
+  detail: (collectionId: number, tourId: number, signal?: AbortSignal): Promise<CollectionTourDetailResponse> =>
+    apiClient.get(`${base(collectionId)}/${tourId}`, { signal }).then((r) => r.data),
+  save: (collectionId: number, body: CollectionTourSaveRequest): Promise<CollectionTourSaveResponse> =>
+    apiClient.post(base(collectionId), body).then((r) => r.data),
+  remove: (collectionId: number, tourId: number): Promise<void> =>
+    apiClient.delete(`${base(collectionId)}/${tourId}`).then(() => undefined),
+  takeOver: (tripId: number, body: CollectionTourTakeOverRequest): Promise<TourCreateResponse> =>
+    apiClient.post(`/trips/${tripId}/tours/from-collection`, body).then((r) => r.data),
+};

client/src/api/horseRoutes.test.ts

@@ -0,0 +1,34 @@
+// FE-API-HORSE-001 to FE-API-HORSE-002
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it } from 'vitest';
+
+import { server } from '../../tests/helpers/msw/server';
+import { horseRoutesApi } from './horseRoutes';
+
+const reply = { routes: [], truncated: false, source: 'openstreetmap', attribution: '© OpenStreetMap contributors' };
+const BBOX = '47.10000,11.20000,47.30000,11.50000';
+
+describe('horseRoutesApi.list', () => {
+  it('FE-API-HORSE-001: asks GET /api/trips/:tripId/tours/horse-routes with the view and returns the body', async () => {
+    let url = '';
+    server.use(
+      http.get('/api/trips/7/tours/horse-routes', ({ request }) => {
+        url = request.url;
+        return HttpResponse.json(reply);
+      })
+    );
+
+    await expect(horseRoutesApi.list(7, BBOX)).resolves.toEqual(reply);
+    expect(new URL(url).searchParams.get('bbox')).toBe(BBOX);
+  });
+
+  it('FE-API-HORSE-002: no Overpass mirror answering (502) rejects', async () => {
+    server.use(
+      http.get('/api/trips/7/tours/horse-routes', () =>
+        HttpResponse.json({ error: 'Horse route data is unavailable right now' }, { status: 502 })
+      )
+    );
+
+    await expect(horseRoutesApi.list(7, BBOX)).rejects.toBeTruthy();
+  });
+});

client/src/api/horseRoutes.ts

@@ -0,0 +1,21 @@
+import apiClient from './client';
+
+/**
+ * How long the browser waits for GET /api/trips/:tripId/tours/horse-routes.
+ * The server races the Overpass mirrors under its own deadline (25 s by
+ * default) and answers 502 when none made it, so this sits just above it, as
+ * the via ferrata layer's wait does.
+ */
+const HORSE_ROUTES_TIMEOUT_MS = 30_000;
+
+/**
+ * HOR-01 GET /api/trips/:tripId/tours/horse-routes: the signposted horse
+ * routes OpenStreetMap knows inside one map view. The answer comes back
+ * unparsed; repo/horseRouteRepo.ts checks it against the shared contract.
+ */
+export const horseRoutesApi = {
+  list: (tripId: number | string, bbox: string, signal?: AbortSignal): Promise<unknown> =>
+    apiClient
+      .get(`/trips/${tripId}/tours/horse-routes`, { params: { bbox }, signal, timeout: HORSE_ROUTES_TIMEOUT_MS })
+      .then((response) => response.data as unknown),
+};

client/src/api/journeyMap.test.ts

@@ -0,0 +1,27 @@
+// FE-API-JOURNEY-MAP-001
+//
+// JRN-04: both reads pin their path and hand back what the server answered.
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it } from 'vitest';
+import { server } from '../../tests/helpers/msw/server';
+import { journeyMapApi } from './journeyMap';
+
+describe('journeyMapApi', () => {
+  it('FE-API-JOURNEY-MAP-001: reads the layers of a journey and those of a share link', async () => {
+    const layers = { places: { status: 'withheld' } };
+    const paths: string[] = [];
+    server.use(
+      http.get('/api/journeys/7/map-layers', ({ request }) => {
+        paths.push(new URL(request.url).pathname);
+        return HttpResponse.json(layers);
+      }),
+      http.get('/api/public/journey/:token/map-layers', ({ request }) => {
+        paths.push(new URL(request.url).pathname);
+        return HttpResponse.json(layers);
+      })
+    );
+    expect(await journeyMapApi.layers(7)).toEqual(layers);
+    expect(await journeyMapApi.publicLayers('a/b')).toEqual(layers);
+    expect(paths).toEqual(['/api/journeys/7/map-layers', '/api/public/journey/a%2Fb/map-layers']);
+  });
+});

client/src/api/journeyMap.ts

@@ -0,0 +1,10 @@
+import type { JourneyMapLayersResponse, JourneyPublicMapLayersResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** JRN-04: what a journey map shows beside its entries and photos, for its people and through a share link. */
+export const journeyMapApi = {
+  layers: (journeyId: number, signal?: AbortSignal): Promise<JourneyMapLayersResponse> =>
+    apiClient.get(`/journeys/${journeyId}/map-layers`, { signal }).then((r) => r.data),
+  publicLayers: (token: string, signal?: AbortSignal): Promise<JourneyPublicMapLayersResponse> =>
+    apiClient.get(`/public/journey/${encodeURIComponent(token)}/map-layers`, { signal }).then((r) => r.data),
+};

client/src/api/journeyRecordings.test.ts

@@ -0,0 +1,85 @@
+// FE-API-JOURNEY-RECORDINGS-001
+//
+// JRN-01: every method pins its verb, its path and its body, and hands back what
+// the server answered.
+import { http, HttpResponse, type JsonBodyType } from 'msw';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { server } from '../../tests/helpers/msw/server';
+import { journeyRecordingsApi } from './journeyRecordings';
+
+const BASE = '/api/journeys/7/recordings';
+const HASH = 'a'.repeat(64);
+
+let calls: Array<{ method: string; path: string; body: unknown }> = [];
+
+beforeEach(() => {
+  calls = [];
+});
+
+function record(data: JsonBodyType) {
+  return async ({ request }: { request: Request }) => {
+    const text = await request.text();
+    calls.push({ method: request.method, path: new URL(request.url).pathname, body: text ? JSON.parse(text) : null });
+    return HttpResponse.json(data);
+  };
+}
+
+describe('journeyRecordingsApi', () => {
+  it('FE-API-JOURNEY-RECORDINGS-001: lists, previews, keeps and removes the recorded days of a journey', async () => {
+    server.use(
+      http.get(BASE, record({ days: [] })),
+      http.post(`${BASE}/preview`, record({ date: '2026-05-14' })),
+      http.put(`${BASE}/2026-05-14`, record({ outcome: 'created' })),
+      http.delete(`${BASE}/2026-05-14`, record({ success: true }))
+    );
+    expect(await journeyRecordingsApi.list(7)).toEqual({ days: [] });
+    expect(
+      await journeyRecordingsApi.preview(7, { date: '2026-05-14', utcOffsetMinutes: 120, useSourceOffset: true })
+    ).toEqual({ date: '2026-05-14' });
+    expect(await journeyRecordingsApi.save(7, '2026-05-14', { utcOffsetMinutes: 120, expectedHash: HASH })).toEqual({
+      outcome: 'created',
+    });
+    expect(await journeyRecordingsApi.remove(7, '2026-05-14')).toBeUndefined();
+    expect(calls).toEqual([
+      { method: 'GET', path: BASE, body: null },
+      {
+        method: 'POST',
+        path: `${BASE}/preview`,
+        body: { date: '2026-05-14', utcOffsetMinutes: 120, useSourceOffset: true },
+      },
+      { method: 'PUT', path: `${BASE}/2026-05-14`, body: { utcOffsetMinutes: 120, expectedHash: HASH } },
+      { method: 'DELETE', path: `${BASE}/2026-05-14`, body: null },
+    ]);
+  });
+
+  it('FE-API-JOURNEY-RECORDINGS-002: reviews the stays of a day and takes them over (JRN-02)', async () => {
+    const body = { groups: [{ kind: 'single' as const, stays: [{ suggestionId: 3 }] }], skipSuggestionIds: [4] };
+    server.use(
+      http.post(`${BASE}/2026-05-14/stays/review`, record({ date: '2026-05-14', stays: [] })),
+      http.post(`${BASE}/2026-05-14/stays/import`, record({ entries: [], alreadyTaken: [3], skipped: [] }))
+    );
+    expect(await journeyRecordingsApi.reviewDay(7, '2026-05-14')).toEqual({ date: '2026-05-14', stays: [] });
+    expect(await journeyRecordingsApi.takeOverDay(7, '2026-05-14', body)).toEqual({
+      entries: [],
+      alreadyTaken: [3],
+      skipped: [],
+    });
+    expect(calls).toEqual([
+      { method: 'POST', path: `${BASE}/2026-05-14/stays/review`, body: {} },
+      { method: 'POST', path: `${BASE}/2026-05-14/stays/import`, body },
+    ]);
+  });
+
+  it('FE-API-JOURNEY-RECORDINGS-003: reads how the journey prepares its days (JRN-03)', async () => {
+    const answer = {
+      enabled: false,
+      connection: 'not_connected',
+      lastAttemptAt: null,
+      lastSuccessAt: null,
+      lastError: null,
+    };
+    server.use(http.get(`${BASE}/prep`, record(answer)));
+    expect(await journeyRecordingsApi.prep(7)).toEqual(answer);
+    expect(calls).toEqual([{ method: 'GET', path: `${BASE}/prep`, body: null }]);
+  });
+});

client/src/api/journeyRecordings.ts

@@ -0,0 +1,44 @@
+import type {
+  JourneyDayImportRequest,
+  JourneyDayImportResult,
+  JourneyDayStays,
+  JourneyRecordedDaysResponse,
+  JourneyRecordingPrep,
+  JourneyRecordingPreview,
+  JourneyRecordingPreviewRequest,
+  JourneyRecordingSaveRequest,
+  JourneyRecordingSaveResult,
+} from '@trek/shared';
+import apiClient from './client';
+import { DAWARICH_UPSTREAM_TIMEOUT_MS } from './dawarich';
+
+const base = (journeyId: number) => `/journeys/${journeyId}/recordings`;
+
+/** The preview and the save ask Dawarich first, so they get its longer wait. */
+const upstream = { timeout: DAWARICH_UPSTREAM_TIMEOUT_MS };
+
+/**
+ * JRN-01: the recorded days a journey keeps, previewing one, keeping it and dropping it.
+ * JRN-02: the stays of a day reviewed and taken over as drafts.
+ * JRN-03: how the journey prepares its days for the caller.
+ */
+export const journeyRecordingsApi = {
+  list: (journeyId: number, signal?: AbortSignal): Promise<JourneyRecordedDaysResponse> =>
+    apiClient.get(base(journeyId), { signal }).then((r) => r.data),
+  prep: (journeyId: number, signal?: AbortSignal): Promise<JourneyRecordingPrep> =>
+    apiClient.get(`${base(journeyId)}/prep`, { signal }).then((r) => r.data),
+  preview: (
+    journeyId: number,
+    body: JourneyRecordingPreviewRequest,
+    signal?: AbortSignal
+  ): Promise<JourneyRecordingPreview> =>
+    apiClient.post(`${base(journeyId)}/preview`, body, { ...upstream, signal }).then((r) => r.data),
+  save: (journeyId: number, date: string, body: JourneyRecordingSaveRequest): Promise<JourneyRecordingSaveResult> =>
+    apiClient.put(`${base(journeyId)}/${date}`, body, upstream).then((r) => r.data),
+  remove: (journeyId: number, date: string): Promise<void> =>
+    apiClient.delete(`${base(journeyId)}/${date}`).then(() => undefined),
+  reviewDay: (journeyId: number, date: string, signal?: AbortSignal): Promise<JourneyDayStays> =>
+    apiClient.post(`${base(journeyId)}/${date}/stays/review`, {}, { ...upstream, signal }).then((r) => r.data),
+  takeOverDay: (journeyId: number, date: string, body: JourneyDayImportRequest): Promise<JourneyDayImportResult> =>
+    apiClient.post(`${base(journeyId)}/${date}/stays/import`, body).then((r) => r.data),
+};

client/src/api/paddleObstacles.ts

@@ -0,0 +1,16 @@
+import { paddleObstaclesResponseSchema, type PaddleObstaclesResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** PAD-05A: the paddle objects of a map area and how far TREK's data covers it. */
+export const paddleObstaclesApi = {
+  inBox: (
+    box: { south: number; west: number; north: number; east: number },
+    signal?: AbortSignal
+  ): Promise<PaddleObstaclesResponse> =>
+    apiClient
+      .get('/paddle/obstacles', {
+        params: { bbox: [box.south, box.west, box.north, box.east].map((v) => v.toFixed(5)).join(',') },
+        signal,
+      })
+      .then((r) => paddleObstaclesResponseSchema.parse(r.data)),
+};

client/src/api/paddleRegionLoad.ts

@@ -0,0 +1,13 @@
+import { paddleRegionLoadResponseSchema, type PaddleRegionLoadRequest, type PaddleRegionLoadState } from '@trek/shared';
+import apiClient from './client';
+
+/** A first look into Geofabrik's list can take the server a while (it fetches the list itself, within 20 s). */
+const GEOFABRIK = { timeout: 30_000 };
+
+/** PAD-11C: the water data around places no paddle region covers yet, loaded or asked for by the server. */
+export const paddleRegionLoadApi = {
+  load: (request: PaddleRegionLoadRequest, signal?: AbortSignal): Promise<PaddleRegionLoadState[]> =>
+    apiClient
+      .post('/paddle/regions/load', request, { signal, ...GEOFABRIK })
+      .then((r) => paddleRegionLoadResponseSchema.parse(r.data).points),
+};

client/src/api/paddleRegions.ts

@@ -0,0 +1,41 @@
+import {
+  paddleRegionCatalogResponseSchema,
+  paddleRegionListResponseSchema,
+  paddleRegionSchema,
+  paddleRegionSettingsSchema,
+  successResponseSchema,
+  type PaddleRegionRequest,
+  type PaddleRegionSettings,
+} from '@trek/shared';
+import apiClient from './client';
+
+/** A first look into Geofabrik's list can take the server a while (it fetches the list itself, within 20 s). */
+const GEOFABRIK = { timeout: 30_000 };
+
+/** PAD-05A, the admin side: the regions TREK reads paddle data for, and those paddlers asked for (PAD-11C). */
+export const paddleRegionsApi = {
+  list: () => apiClient.get('/admin/paddle-regions').then((r) => paddleRegionListResponseSchema.parse(r.data)),
+  catalog: (q: string, signal?: AbortSignal) =>
+    apiClient
+      .get('/admin/paddle-regions/catalog', { params: { q }, signal, ...GEOFABRIK })
+      .then((r) => paddleRegionCatalogResponseSchema.parse(r.data).regions),
+  add: (id: string) =>
+    apiClient
+      .post('/admin/paddle-regions', { id } satisfies PaddleRegionRequest, GEOFABRIK)
+      .then((r) => paddleRegionSchema.parse(r.data)),
+  refresh: (id: string) =>
+    apiClient
+      .post('/admin/paddle-regions/refresh', { id } satisfies PaddleRegionRequest)
+      .then((r) => paddleRegionSchema.parse(r.data)),
+  remove: (id: string) =>
+    apiClient
+      .post('/admin/paddle-regions/remove', { id } satisfies PaddleRegionRequest)
+      .then((r) => successResponseSchema.parse(r.data)),
+  decline: (id: string) =>
+    apiClient
+      .post('/admin/paddle-regions/decline', { id } satisfies PaddleRegionRequest)
+      .then((r) => successResponseSchema.parse(r.data)),
+  settings: () => apiClient.get('/admin/paddle-regions/settings').then((r) => paddleRegionSettingsSchema.parse(r.data)),
+  saveSettings: (settings: PaddleRegionSettings) =>
+    apiClient.put('/admin/paddle-regions/settings', settings).then((r) => paddleRegionSettingsSchema.parse(r.data)),
+};

client/src/api/paddleRoute.ts

@@ -0,0 +1,10 @@
+import { paddleRouteResponseSchema, type PaddleRouteInput, type PaddleRouteResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** PAD-11: legs of a paddle tour planned on the water by the server's router. */
+export const paddleRouteApi = {
+  plan: (tripId: number | string, request: PaddleRouteInput, signal?: AbortSignal): Promise<PaddleRouteResponse> =>
+    apiClient
+      .post(`/trips/${tripId}/paddle/route`, request, { signal })
+      .then((r) => paddleRouteResponseSchema.parse(r.data)),
+};

client/src/api/skiRoute.ts

@@ -0,0 +1,8 @@
+import { skiRouteResponseSchema, type SkiRouteInput, type SkiRouteResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** The piste router: a ski tour's legs planned on the piste data the server keeps, held to the contract. */
+export const skiRouteApi = {
+  plan: (tripId: number | string, request: SkiRouteInput, signal?: AbortSignal): Promise<SkiRouteResponse> =>
+    apiClient.post(`/trips/${tripId}/ski/route`, request, { signal }).then((r) => skiRouteResponseSchema.parse(r.data)),
+};

client/src/api/tourActivities.ts

@@ -0,0 +1,14 @@
+import type { TourActivityAssignRequest, TourDetailResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** ACT-01: the recorded tracks of a tour, assigned and taken off; both answer the tour's detail. */
+export const tourActivitiesApi = {
+  assign: (
+    tripId: number | string,
+    placeId: number | string,
+    body: TourActivityAssignRequest
+  ): Promise<TourDetailResponse> =>
+    apiClient.put(`/trips/${tripId}/tours/${placeId}/activities`, body).then((r) => r.data),
+  unassign: (tripId: number | string, placeId: number | string, activityId: number): Promise<TourDetailResponse> =>
+    apiClient.delete(`/trips/${tripId}/tours/${placeId}/activities/${activityId}`).then((r) => r.data),
+};

client/src/api/tourActivityStats.ts

@@ -0,0 +1,10 @@
+import type { TourActivityExclusionRequest, TourActivityStatsResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** STA-02: the user's own tour activities across their trips, and leaving one out of them; both answer the sums. */
+export const tourActivityStatsApi = {
+  get: (signal?: AbortSignal): Promise<TourActivityStatsResponse> =>
+    apiClient.get('/tours/activity-stats', { signal }).then((r) => r.data),
+  setExcluded: (body: TourActivityExclusionRequest): Promise<TourActivityStatsResponse> =>
+    apiClient.put('/tours/activity-stats/exclusions', body).then((r) => r.data),
+};

client/src/api/tourBaseMaps.ts

@@ -0,0 +1,18 @@
+import type { AdminFeatureToggleResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** An admin's switch for a map or a service the Tours planner offers on its operator's terms. */
+function tourBaseMapAdminApi(path: string) {
+  return {
+    get: (): Promise<AdminFeatureToggleResponse> => apiClient.get(path).then((r) => r.data),
+    update: (enabled: boolean): Promise<AdminFeatureToggleResponse> =>
+      apiClient.put(path, { enabled }).then((r) => r.data),
+  };
+}
+
+/** MAP-01: OpenHikingMap for a hike. */
+export const hikingMapAdminApi = tourBaseMapAdminApi('/admin/tours-hiking-map');
+/** BIK-06: CyclOSM for a bike tour. */
+export const cycleMapAdminApi = tourBaseMapAdminApi('/admin/tours-cycle-map');
+/** SKI-02: the piste router, which plans ski tours on the Places host's piste data. */
+export const skiRoutingAdminApi = tourBaseMapAdminApi('/admin/tours-ski-routing');

client/src/api/tourGpx.ts

@@ -0,0 +1,22 @@
+import type { TourGpxImportFields, TourGpxPreviewResponse, TourImportGpxResponse } from '@trek/shared';
+import { postMultipart } from './client';
+
+/** A GPX, KML or KMZ file and the fields beside it, as the Tours import routes read a multipart body. */
+function gpxForm(file: File, fields?: TourGpxImportFields): FormData {
+  const fd = new FormData();
+  fd.append('file', file);
+  for (const [key, value] of Object.entries(fields ?? {})) if (value !== undefined) fd.append(key, value);
+  return fd;
+}
+
+/**
+ * The Tours file import: a GPX, KML or KMZ file (IO-02) read for its preview
+ * first (PAD-02), then imported as the type chosen.
+ */
+export const tourGpxApi = {
+  /** What the file holds, read by the import's own parser; nothing is stored. */
+  preview: (tripId: number | string, file: File): Promise<TourGpxPreviewResponse> =>
+    postMultipart(`/trips/${tripId}/tours/import/gpx/preview`, gpxForm(file)),
+  import: (tripId: number | string, file: File, fields?: TourGpxImportFields): Promise<TourImportGpxResponse> =>
+    postMultipart(`/trips/${tripId}/tours/import/gpx`, gpxForm(file, fields)),
+};

client/src/api/tourGpxExport.ts

@@ -0,0 +1,33 @@
+import apiClient from './client';
+
+/**
+ * The file name a download's Content-Disposition gives: the UTF-8 `filename*`
+ * first, since it keeps the tour's own script, the plain `filename` after.
+ */
+export function attachmentFilename(header: unknown): string | null {
+  if (typeof header !== 'string') return null;
+  const encoded = /filename\*=UTF-8''([^;]+)/i.exec(header)?.[1];
+  if (encoded) {
+    try {
+      return decodeURIComponent(encoded.trim());
+    } catch {
+      // A malformed escape falls through to the plain name.
+    }
+  }
+  return /filename="([^"]+)"/i.exec(header)?.[1] ?? null;
+}
+
+/** PR1-06A: one saved tour as the GPX file the server writes. */
+export const tourGpxExportApi = {
+  download: async (
+    tripId: number | string,
+    placeId: number,
+    signal?: AbortSignal
+  ): Promise<{ blob: Blob; filename: string | null }> => {
+    const response = await apiClient.get<Blob>(`/trips/${tripId}/tours/${placeId}/export.gpx`, {
+      responseType: 'blob',
+      signal,
+    });
+    return { blob: response.data, filename: attachmentFilename(response.headers['content-disposition']) };
+  },
+};

client/src/api/tourLibrary.ts

@@ -0,0 +1,18 @@
+import type {
+  TourCreateResponse,
+  TourLibraryDetailResponse,
+  TourLibraryQuery,
+  TourLibraryResponse,
+  TourTakeOverRequest,
+} from '@trek/shared';
+import apiClient from './client';
+
+/** LIB-02: the tours of the user's other trips, one's preview, and taking one over into a trip. */
+export const tourLibraryApi = {
+  list: (query: TourLibraryQuery, signal?: AbortSignal): Promise<TourLibraryResponse> =>
+    apiClient.get('/tours/library', { params: query, signal }).then((r) => r.data),
+  detail: (placeId: number, signal?: AbortSignal): Promise<TourLibraryDetailResponse> =>
+    apiClient.get(`/tours/library/${placeId}`, { signal }).then((r) => r.data),
+  takeOver: (tripId: number | string, body: TourTakeOverRequest): Promise<TourCreateResponse> =>
+    apiClient.post(`/trips/${tripId}/tours/take-over`, body).then((r) => r.data),
+};

client/src/api/tourObstacleReviews.ts

@@ -0,0 +1,14 @@
+import { tourDetailResponseSchema, type TourDetailResponse, type TourObstacleReviewsRequest } from '@trek/shared';
+import apiClient from './client';
+
+/** PAD-06: what the paddlers decided about the obstacles of a paddle tour; answers the detail with its checklist. */
+export const tourObstacleReviewsApi = {
+  save: (
+    tripId: number | string,
+    placeId: number | string,
+    body: TourObstacleReviewsRequest
+  ): Promise<TourDetailResponse> =>
+    apiClient
+      .put(`/trips/${tripId}/tours/${placeId}/obstacle-reviews`, body)
+      .then((r) => tourDetailResponseSchema.parse(r.data)),
+};

client/src/api/tourPackingLink.ts

@@ -0,0 +1,20 @@
+import type { TourDetailResponse, TourPackingLinkRequest, TourPackingLinkResponse } from '@trek/shared';
+import apiClient from './client';
+
+/**
+ * Where a tour's packing link lives; a write queued offline replays to the
+ * same path, `{id}` standing for a tour that has not synced yet.
+ */
+export function tourPackingLinkPath(tripId: number | string, placeId: number | string): string {
+  return `/trips/${tripId}/tours/${placeId}/packing-link`;
+}
+
+/** P2D-XD-01: the packing list, or the category of it, a tour points at. */
+export const tourPackingLinkApi = {
+  read: (tripId: number | string, placeId: number, signal?: AbortSignal): Promise<TourPackingLinkResponse> =>
+    apiClient.get(tourPackingLinkPath(tripId, placeId), { signal }).then((r) => r.data),
+  link: (tripId: number | string, placeId: number, body: TourPackingLinkRequest): Promise<TourDetailResponse> =>
+    apiClient.put(tourPackingLinkPath(tripId, placeId), body).then((r) => r.data),
+  unlink: (tripId: number | string, placeId: number): Promise<TourDetailResponse> =>
+    apiClient.delete(tourPackingLinkPath(tripId, placeId)).then((r) => r.data),
+};

client/src/api/tourPaddlePlan.ts

@@ -0,0 +1,12 @@
+import type { TourDetailResponse, TourPaddlePlanRequest } from '@trek/shared';
+import apiClient from './client';
+
+/** PAD-03/PAD-07: the portages, locks and speeds laid onto a recorded paddle track. */
+export const tourPaddlePlanApi = {
+  update: (
+    tripId: number | string,
+    placeId: number | string,
+    body: TourPaddlePlanRequest
+  ): Promise<TourDetailResponse> =>
+    apiClient.put(`/trips/${tripId}/tours/${placeId}/paddle-plan`, body).then((r) => r.data),
+};

client/src/api/tourPoiSearch.ts

@@ -0,0 +1,17 @@
+import type { TourPoiSearchRequest, TourPoiSearchResponse } from '@trek/shared';
+import apiClient from './client';
+
+/**
+ * PLN-02: places along a tour. A search runs several stretches against the map
+ * search on the server, each allowed its own timeout there, so it may take
+ * longer than the shared default: up to three rounds of stretches, each asking
+ * the Overpass mirrors one after another for about twenty seconds at most.
+ */
+const POI_SEARCH_TIMEOUT_MS = 75_000;
+
+export const tourPoiSearchApi = {
+  search: (tripId: number | string, body: TourPoiSearchRequest, signal?: AbortSignal): Promise<TourPoiSearchResponse> =>
+    apiClient
+      .post(`/trips/${tripId}/tours/poi-search`, body, { signal, timeout: POI_SEARCH_TIMEOUT_MS })
+      .then((r) => r.data),
+};

client/src/api/tourSki.ts

@@ -0,0 +1,11 @@
+import type { TourDetailResponse, TourSkiClassificationRequest } from '@trek/shared';
+import apiClient from './client';
+
+/** SKI-02: a ski track classified again, its discipline and cross-country technique. */
+export const tourSkiApi = {
+  classify: (
+    tripId: number | string,
+    placeId: number | string,
+    body: TourSkiClassificationRequest
+  ): Promise<TourDetailResponse> => apiClient.put(`/trips/${tripId}/tours/${placeId}/ski`, body).then((r) => r.data),
+};

client/src/api/tourTrailGrade.ts

@@ -0,0 +1,20 @@
+import type { TourTrailGradeRequest, TourTrailGradeResponse } from '@trek/shared';
+import apiClient from './client';
+
+/**
+ * BIK-05: the trail grades of the ways a mountain bike tour runs on. The
+ * server asks Overpass in parts, one after another, so a long tour may take
+ * longer than the shared default.
+ */
+const TRAIL_GRADE_TIMEOUT_MS = 60_000;
+
+export const tourTrailGradeApi = {
+  grades: (
+    tripId: number | string,
+    body: TourTrailGradeRequest,
+    signal?: AbortSignal
+  ): Promise<TourTrailGradeResponse> =>
+    apiClient
+      .post(`/trips/${tripId}/tours/trail-grades`, body, { signal, timeout: TRAIL_GRADE_TIMEOUT_MS })
+      .then((r) => r.data),
+};

client/src/api/tourVisits.ts

@@ -0,0 +1,20 @@
+import type { TourVisitListResponse, TourVisitUpdateRequest } from '@trek/shared';
+import apiClient from './client';
+
+/** Where one station of a walk is marked for one day; a write queued offline replays to the same path. */
+export function tourVisitPath(tripId: number | string, assignmentId: number, stationKey: string): string {
+  return `/trips/${tripId}/tour-visits/${assignmentId}/${encodeURIComponent(stationKey)}`;
+}
+
+/** CW-03: the stations of a trip's city walks visited or skipped on their days. */
+export const tourVisitsApi = {
+  list: (tripId: number | string): Promise<TourVisitListResponse> =>
+    apiClient.get(`/trips/${tripId}/tour-visits`).then((r) => r.data),
+  update: (
+    tripId: number | string,
+    assignmentId: number,
+    stationKey: string,
+    body: TourVisitUpdateRequest
+  ): Promise<TourVisitListResponse> =>
+    apiClient.put(tourVisitPath(tripId, assignmentId, stationKey), body).then((r) => r.data),
+};

client/src/api/tourWalkImport.ts

@@ -0,0 +1,20 @@
+import type { WalkImportPreviewRequest, WalkImportPreviewResponse } from '@trek/shared';
+import apiClient from './client';
+
+/**
+ * CW-07: a Google Maps walking route read into its stops. The server may
+ * follow a short link a few hops within its own deadline, so the call waits
+ * a little longer than that before it gives up.
+ */
+const WALK_IMPORT_TIMEOUT_MS = 20_000;
+
+export const tourWalkImportApi = {
+  preview: (
+    tripId: number | string,
+    body: WalkImportPreviewRequest,
+    signal?: AbortSignal
+  ): Promise<WalkImportPreviewResponse> =>
+    apiClient
+      .post(`/trips/${tripId}/tours/import/google-maps/preview`, body, { signal, timeout: WALK_IMPORT_TIMEOUT_MS })
+      .then((r) => r.data),
+};

client/src/api/tripJournal.ts

@@ -0,0 +1,31 @@
+import type {
+  TripJournalCandidatesResponse,
+  TripJournalLinkMemberRequest,
+  TripJournalLinkResponse,
+} from '@trek/shared';
+import apiClient from './client';
+
+/**
+ * `/api/trips/:tripId/journal`: the journal from the Journey addon a trip shows,
+ * and who it is open to. In its own file rather than in the `client.ts` god
+ * module; repo/tripJournalLinkRepo.ts is the one caller.
+ */
+export const tripJournalApi = {
+  get: (tripId: number): Promise<TripJournalLinkResponse> =>
+    apiClient.get(`/trips/${tripId}/journal`).then((r) => r.data),
+  candidates: (tripId: number, journeyId: number): Promise<TripJournalCandidatesResponse> =>
+    apiClient.get(`/trips/${tripId}/journal/candidates`, { params: { journey_id: journeyId } }).then((r) => r.data),
+  link: (
+    tripId: number,
+    journeyId: number,
+    members: TripJournalLinkMemberRequest[]
+  ): Promise<TripJournalLinkResponse> =>
+    apiClient.put(`/trips/${tripId}/journal`, { journey_id: journeyId, members }).then((r) => r.data),
+  setMembers: (tripId: number, members: TripJournalLinkMemberRequest[]): Promise<TripJournalLinkResponse> =>
+    apiClient.patch(`/trips/${tripId}/journal/members`, { members }).then((r) => r.data),
+  unlink: (tripId: number): Promise<TripJournalLinkResponse> =>
+    apiClient.delete(`/trips/${tripId}/journal`).then((r) => r.data),
+  /** The journals this person can open; the dialog offers the ones they own. */
+  journals: (): Promise<{ journeys: { id: number; user_id: number; title: string; subtitle?: string | null }[] }> =>
+    apiClient.get('/journeys').then((r) => r.data),
+};

client/src/api/wanderer.ts

@@ -1,6 +1,7 @@
 import type {
   AdminFeatureToggleResponse,
   TourSourceCheckResponse,
+  TourSourceHintResponse,
   WandererConnection,
   WandererImportPreview,
   WandererImportRequest,
@@ -11,6 +12,7 @@ import type {
   WandererSettingsRequest,
   WandererTestRequest,
   WandererTestResponse,
+  WandererWatch,
 } from '@trek/shared';
 import apiClient from './client';
 
@@ -31,6 +33,10 @@ export const wandererApi = {
   disconnect: (): Promise<{ success: true }> => apiClient.delete('/integrations/wanderer/settings').then((r) => r.data),
   test: (data: WandererTestRequest): Promise<WandererTestResponse> =>
     apiClient.post('/integrations/wanderer/test', data, upstream).then((r) => r.data),
+  /** WAN-02: the optional background watch of the connection, with the open hints. */
+  getWatch: (): Promise<WandererWatch> => apiClient.get('/integrations/wanderer/watch').then((r) => r.data),
+  setWatch: (enabled: boolean): Promise<WandererWatch> =>
+    apiClient.put('/integrations/wanderer/watch', { enabled }).then((r) => r.data),
 
   search: (tripId: number, body: WandererSearchRequest, signal?: AbortSignal): Promise<WandererSearchResponse> =>
     apiClient.post(`/trips/${tripId}/tours/wanderer/search`, body, { ...upstream, signal }).then((r) => r.data),
@@ -43,6 +49,9 @@ export const wandererApi = {
   /** MF-03: whether the trail a snapshot came from changed since; the server reads, it writes nothing. */
   checkSource: (tripId: number, placeId: number): Promise<TourSourceCheckResponse> =>
     apiClient.post(`/trips/${tripId}/tours/wanderer/sources/${placeId}/check`, {}, upstream).then((r) => r.data),
+  /** WAN-02: the caller's own background hint on a snapshot; the server only reads its own rows. */
+  sourceHint: (tripId: number, placeId: number, signal?: AbortSignal): Promise<TourSourceHintResponse> =>
+    apiClient.get(`/trips/${tripId}/tours/wanderer/sources/${placeId}/hint`, { signal }).then((r) => r.data),
 };
 
 /** The admin's switch for wanderer under the Tours addon. */

client/src/api/wind.ts

@@ -0,0 +1,10 @@
+import { windForecastResponseSchema, type WindForecastResponse } from '@trek/shared';
+import apiClient from './client';
+
+/** PAD-08: the wind forecast for one place and one day. */
+export const windApi = {
+  forecast: (lat: number, lng: number, date: string, signal?: AbortSignal): Promise<WindForecastResponse> =>
+    apiClient
+      .get('/weather/wind', { params: { lat, lng, date }, signal })
+      .then((r) => windForecastResponseSchema.parse(r.data)),
+};

client/src/api/wsEventPolicy.ts

@@ -19,6 +19,8 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   // Tours facet invalidation — hooks/useTripWebSocket forwards tours:changed to
   // useTourPlaceIds so the active trip refreshes its Tours/Places read model.
   'tours:changed',
+  // CW-03: store/tourVisitStore (watchTourVisits) keeps the visits store current.
+  'tours:visits',
   // Collab — Collab/MCollab components + useTripWebSocket's collabFileSync
   'collab:note:created',
   'collab:note:updated',
@@ -79,6 +81,9 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   // Capture times landed after a photo import (#1587); the same listener reloads
   // the journey so the gallery re-sorts.
   'journey:photos:updated',
+  // A day's recorded route was taken over or removed (JRN-01):
+  // components/Journey/useJourneyRecordings reads the kept days again.
+  'journey:recording:updated',
   // Studio book — components/Studio/useBookStore (its own listener: a client
   // with nothing outstanding takes the new version, one with unsaved edits
   // deliberately does not and conflicts on its next save instead)
@@ -93,6 +98,10 @@ export const HANDLED_OUTSIDE_TRIP_STORE = [
   // the bag ping: what a run changed is per-binding server state, and the
   // files it moved arrive as file:* events.
   'docsync:changed',
+  // Linked journal: components/Trips/useTripJournalLink asks again which journal
+  // the trip shows and who it is open to. Content-free, because that answer is
+  // per person (a member left off the link must not learn its title).
+  'trip:journal:changed',
   // Booking import — BackgroundTasks/BackgroundTasksWidget ('import:' prefix listener)
   'import:progress',
   'import:done',

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

@@ -78,7 +78,11 @@ beforeEach(() => {
   vi.spyOn(useAddonStore.getState(), 'loadAddons').mockResolvedValue(undefined);
   server.use(
     http.get('/api/admin/addons', () => HttpResponse.json({ addons: [] })),
-    http.get('/api/admin/tours-wanderer', () => HttpResponse.json({ enabled: false }))
+    http.get('/api/admin/tours-wanderer', () => HttpResponse.json({ enabled: false })),
+    // The Tours switches load beside the list; unanswered, each would toast the same error as a failed list.
+    http.get('/api/admin/tours-hiking-map', () => HttpResponse.json({ enabled: false })),
+    http.get('/api/admin/tours-cycle-map', () => HttpResponse.json({ enabled: false })),
+    http.get('/api/admin/tours-ski-routing', () => HttpResponse.json({ enabled: false }))
   );
 });
 

client/src/components/Admin/AddonManager.tsx

@@ -77,6 +77,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     addons, loading, handleToggle, tripAddons, globalAddons, integrationAddons, providerOptions, documentProviderOptions,
     toursWanderer,
     toggleToursWanderer,
+    mapSwitches,
   } = useAddonManager()
 
   if (loading) {
@@ -155,13 +156,25 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
     }
     if (addon.id === 'tours' && addon.enabled) {
       return (
-        <AddonSubRow
+        <>
-          icon={<WandererMark size={14} />}
+          <AddonSubRow
-          title={t('admin.toursWanderer.title')}
+            icon={<WandererMark size={14} />}
-          description={t('admin.toursWanderer.subtitle')}
+            title={t('admin.toursWanderer.title')}
-          enabled={toursWanderer}
+            description={t('admin.toursWanderer.subtitle')}
-          onToggle={() => void toggleToursWanderer()}
+            enabled={toursWanderer}
-        />
+            onToggle={() => void toggleToursWanderer()}
+          />
+          {mapSwitches.map(({ key, Icon, titleKey, subtitleKey, enabled, toggle }) => (
+            <AddonSubRow
+              key={key}
+              icon={<Icon size={14} />}
+              title={t(titleKey)}
+              description={t(subtitleKey)}
+              enabled={enabled}
+              onToggle={() => void toggle()}
+            />
+          ))}
+        </>
       )
     }
     // The AI-parsing settings hang off their tile like every other sub-feature,

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

@@ -2,11 +2,13 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { adminApi } from '../../../api/client';
+import { cycleMapAdminApi, hikingMapAdminApi, skiRoutingAdminApi } from '../../../api/tourBaseMaps';
+import { wandererAdminApi } from '../../../api/wanderer';
 import { useAddonStore } from '../../../store/addonStore';
 import type { Addon } from './addonModel';
 import { useAddonManager } from './useAddonManager';
 
-// FE-HOOK-ADDONMGR-001 to FE-HOOK-ADDONMGR-006
+// FE-HOOK-ADDONMGR-001 to FE-HOOK-ADDONMGR-008
 
 const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
 vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
@@ -35,6 +37,10 @@ beforeEach(() => {
   useAddonStore.setState({ loadAddons });
   vi.spyOn(adminApi, 'addons').mockResolvedValue({ addons: ADDONS });
   vi.spyOn(adminApi, 'updateAddon').mockResolvedValue({});
+  vi.spyOn(wandererAdminApi, 'get').mockResolvedValue({ enabled: false });
+  vi.spyOn(hikingMapAdminApi, 'get').mockResolvedValue({ enabled: true });
+  vi.spyOn(cycleMapAdminApi, 'get').mockResolvedValue({ enabled: true });
+  vi.spyOn(skiRoutingAdminApi, 'get').mockResolvedValue({ enabled: true });
 });
 afterEach(() => vi.restoreAllMocks());
 
@@ -46,6 +52,13 @@ async function loaded() {
 
 const enabledOf = (addons: Addon[], id: string) => addons.find((a) => a.id === id)?.enabled;
 
+/** One of the map switches under Tours, by its key. */
+function mapSwitch(manager: ReturnType<typeof useAddonManager>, key: 'hiking' | 'cycle' | 'ski') {
+  const found = manager.mapSwitches.find((entry) => entry.key === key);
+  if (!found) throw new Error(`no ${key} map switch`);
+  return found;
+}
+
 describe('useAddonManager', () => {
   it('FE-HOOK-ADDONMGR-001: loads once and sorts addons into trip, global, integration and the two shelves', async () => {
     const { result, rerender } = await loaded();
@@ -115,4 +128,43 @@ describe('useAddonManager', () => {
     await act(() => result.current.documentProviderOptions[0].toggle());
     expect(adminApi.updateAddon).toHaveBeenLastCalledWith('gdrive', { enabled: false });
   });
+
+  it('FE-HOOK-ADDONMGR-007: the hiking map switch under Tours loads, flips, saves and refreshes the store (MAP-01)', async () => {
+    const update = vi.spyOn(hikingMapAdminApi, 'update').mockResolvedValue({ enabled: false });
+    const { result } = await loaded();
+    await waitFor(() => expect(mapSwitch(result.current, 'hiking').enabled).toBe(true));
+    await act(() => mapSwitch(result.current, 'hiking').toggle());
+    expect(update).toHaveBeenCalledWith(false);
+    expect(mapSwitch(result.current, 'hiking').enabled).toBe(false);
+    expect(loadAddons).toHaveBeenCalled();
+    expect(toast.success).toHaveBeenCalledWith('admin.addons.toast.updated');
+  });
+
+  it('FE-HOOK-ADDONMGR-009: the cycling map switch under Tours loads, flips and saves on its own (BIK-06)', async () => {
+    const update = vi.spyOn(cycleMapAdminApi, 'update').mockResolvedValue({ enabled: false });
+    const { result } = await loaded();
+    await waitFor(() => expect(mapSwitch(result.current, 'cycle').enabled).toBe(true));
+    await act(() => mapSwitch(result.current, 'cycle').toggle());
+    expect(update).toHaveBeenCalledWith(false);
+    expect(mapSwitch(result.current, 'cycle').enabled).toBe(false);
+    expect(mapSwitch(result.current, 'hiking').enabled).toBe(true);
+  });
+
+  it('FE-HOOK-ADDONMGR-010: the piste router switch under Tours loads on, flips and saves on its own (SKI-02)', async () => {
+    const update = vi.spyOn(skiRoutingAdminApi, 'update').mockResolvedValue({ enabled: false });
+    const { result } = await loaded();
+    await waitFor(() => expect(mapSwitch(result.current, 'ski').enabled).toBe(true));
+    await act(() => mapSwitch(result.current, 'ski').toggle());
+    expect(update).toHaveBeenCalledWith(false);
+    expect(mapSwitch(result.current, 'ski').enabled).toBe(false);
+    expect(mapSwitch(result.current, 'cycle').enabled).toBe(true);
+  });
+
+  it('FE-HOOK-ADDONMGR-008: a failed save puts the switch under Tours back and says so', async () => {
+    vi.spyOn(wandererAdminApi, 'update').mockRejectedValue(new Error('500'));
+    const { result } = await loaded();
+    await act(() => result.current.toggleToursWanderer());
+    expect(result.current.toursWanderer).toBe(false);
+    expect(toast.error).toHaveBeenCalledWith('admin.addons.toast.error');
+  });
 });

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

@@ -1,12 +1,27 @@
+import type { AdminFeatureToggleResponse } from '@trek/shared';
+import { Bike, Footprints, MountainSnow } from 'lucide-react';
 import { useEffect, useEffectEvent, useState } from 'react';
 
 import { adminApi } from '../../../api/client';
+import { cycleMapAdminApi, hikingMapAdminApi, skiRoutingAdminApi } from '../../../api/tourBaseMaps';
 import { wandererAdminApi } from '../../../api/wanderer';
 import { useTranslation } from '../../../i18n';
 import { useAddonStore } from '../../../store/addonStore';
 import { useToast } from '../../shared/Toast';
 import { type Addon, type ProviderOption, isPhotosAddon } from './addonModel';
 
+/** A switch under Tours as the server keeps it, read into `set`; `onError` tells the admin it could not be read. */
+function loadToursFlag(
+  api: { get: () => Promise<AdminFeatureToggleResponse> },
+  set: (enabled: boolean) => void,
+  onError: () => void
+) {
+  api
+    .get()
+    .then((flag) => set(flag.enabled))
+    .catch(onError);
+}
+
 /**
  * The addon switches behind both admin shells: the addon list loaded on mount, an
  * optimistic toggle with a per row rollback, and the lists each shell groups its tiles
@@ -20,6 +35,9 @@ export function useAddonManager() {
   const [addons, setAddons] = useState<Addon[]>([]);
   const [loading, setLoading] = useState(true);
   const [toursWanderer, setToursWanderer] = useState(false);
+  const [toursHikingMap, setToursHikingMap] = useState(false);
+  const [toursCycleMap, setToursCycleMap] = useState(false);
+  const [toursSkiRouting, setToursSkiRouting] = useState(false);
 
   const loadAddons = async () => {
     try {
@@ -32,10 +50,11 @@ export function useAddonManager() {
 
   const loadOnMount = useEffectEvent(() => {
     void loadAddons().finally(() => setLoading(false));
-    wandererAdminApi
+    const unreadable = () => toast.error(t('admin.addons.toast.error'));
-      .get()
+    loadToursFlag(wandererAdminApi, setToursWanderer, unreadable);
-      .then((flag) => setToursWanderer(flag.enabled))
+    loadToursFlag(hikingMapAdminApi, setToursHikingMap, unreadable);
-      .catch(() => toast.error(t('admin.addons.toast.error')));
+    loadToursFlag(cycleMapAdminApi, setToursCycleMap, unreadable);
+    loadToursFlag(skiRoutingAdminApi, setToursSkiRouting, unreadable);
   });
   useEffect(() => {
     loadOnMount();
@@ -63,20 +82,52 @@ export function useAddonManager() {
     toast.success(t('admin.addons.toast.updated'));
   };
 
-  /** wanderer under Tours: flipped at once, put back when the save fails. */
+  /** A switch under Tours (wanderer, OpenHikingMap, CyclOSM): flipped at once, put back when the save fails. */
-  const toggleToursWanderer = async () => {
+  const flipToursSwitch = async (
-    const next = !toursWanderer;
+    current: boolean,
-    setToursWanderer(next);
+    set: (enabled: boolean) => void,
+    save: (enabled: boolean) => Promise<unknown>
+  ) => {
+    const next = !current;
+    set(next);
     try {
-      await wandererAdminApi.update(next);
+      await save(next);
     } catch {
-      setToursWanderer(!next);
+      set(!next);
       toast.error(t('admin.addons.toast.error'));
       return;
     }
     void refreshGlobalAddons();
     toast.success(t('admin.addons.toast.updated'));
   };
+  const toggleToursWanderer = () => flipToursSwitch(toursWanderer, setToursWanderer, wandererAdminApi.update);
+  /** The maps and the piste router Tours offers on their operators' terms, one switch each (MAP-01, BIK-06, SKI-02). */
+  const mapSwitches = [
+    {
+      key: 'hiking',
+      Icon: Footprints,
+      titleKey: 'admin.toursHikingMap.title',
+      subtitleKey: 'admin.toursHikingMap.subtitle',
+      enabled: toursHikingMap,
+      toggle: () => flipToursSwitch(toursHikingMap, setToursHikingMap, hikingMapAdminApi.update),
+    },
+    {
+      key: 'cycle',
+      Icon: Bike,
+      titleKey: 'admin.toursCycleMap.title',
+      subtitleKey: 'admin.toursCycleMap.subtitle',
+      enabled: toursCycleMap,
+      toggle: () => flipToursSwitch(toursCycleMap, setToursCycleMap, cycleMapAdminApi.update),
+    },
+    {
+      key: 'ski',
+      Icon: MountainSnow,
+      titleKey: 'admin.toursSkiRouting.title',
+      subtitleKey: 'admin.toursSkiRouting.subtitle',
+      enabled: toursSkiRouting,
+      toggle: () => flipToursSwitch(toursSkiRouting, setToursSkiRouting, skiRoutingAdminApi.update),
+    },
+  ] as const;
 
   const asOption = (provider: Addon): ProviderOption => ({
     key: provider.id,
@@ -106,5 +157,6 @@ export function useAddonManager() {
     documentProviderOptions,
     toursWanderer,
     toggleToursWanderer,
+    mapSwitches,
   };
 }

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

@@ -0,0 +1,167 @@
+import type { PaddleRegionAutoMode, PaddleRegionPending } from '@trek/shared';
+import { Ban, CloudDownload, Hand, Loader2, Power, Sparkles } from 'lucide-react';
+import { useTranslation } from '../../../i18n';
+import { ChoiceChips, SettingRows, SETTINGS_BUTTON, SettingsHint, StatusPill } from '../../Settings/settingsKit';
+import { LABEL, Segmented } from '../../shared/dialogParts';
+import { fs } from '../../shared/DialogShell';
+import { Tooltip } from '../../shared/Tooltip';
+import type { usePaddleRegionsAdmin } from './usePaddleRegionsAdmin';
+
+type Admin = ReturnType<typeof usePaddleRegionsAdmin>;
+
+const MODES: readonly PaddleRegionAutoMode[] = ['auto', 'ask', 'off'];
+const MODE_ICONS = { auto: CloudDownload, ask: Hand, off: Power } as const;
+/** The largest region TREK loads by itself, in megabytes: a district, a state, a small country. */
+const SIZES = [100, 250, 500, 1000, 2000] as const;
+
+/** A size in megabytes as the reader's language writes it, from 1000 on in gigabytes. */
+function useMegabytes() {
+  const { language } = useTranslation();
+  return (mb: number) =>
+    new Intl.NumberFormat(language, {
+      style: 'unit',
+      unit: mb >= 1000 ? 'gigabyte' : 'megabyte',
+      maximumFractionDigits: mb >= 1000 ? 1 : 0,
+    }).format(mb >= 1000 ? mb / 1000 : mb);
+}
+
+const MB = 1024 * 1024;
+
+/**
+ * PAD-11C: how TREK gets the water data of a place a paddler plans in. The
+ * mode, and in the automatic one the largest region it loads without asking.
+ */
+export function AutoLoadSettings({ admin }: { admin: Admin }) {
+  const { t } = useTranslation();
+  const megabytes = useMegabytes();
+  const { settings, saving, save } = admin.autoLoad;
+  if (!settings) return null;
+  const sizes = SIZES.includes(settings.max_mb as (typeof SIZES)[number])
+    ? SIZES
+    : [...SIZES, settings.max_mb].sort((a, b) => a - b);
+  return (
+    <div data-testid="paddle-auto-load" className="flex min-w-0 flex-col gap-2.5">
+      <div className="min-w-0">
+        <span className={LABEL}>{t('admin.paddleRegions.auto.title')}</span>
+        <fieldset disabled={saving} className="m-0 min-w-0 border-0 p-0">
+          <Segmented<PaddleRegionAutoMode>
+            value={settings.mode}
+            onChange={(mode) => void save({ mode })}
+            label={t('admin.paddleRegions.auto.title')}
+            fill
+            options={MODES.map((mode) => {
+              const Icon = MODE_ICONS[mode];
+              return {
+                value: mode,
+                label: t(`admin.paddleRegions.auto.mode.${mode}`),
+                icon: <Icon size={13} strokeWidth={2} aria-hidden="true" />,
+              };
+            })}
+          />
+        </fieldset>
+        <SettingsHint className="mt-1.5">{t(`admin.paddleRegions.auto.modeHint.${settings.mode}`)}</SettingsHint>
+      </div>
+      {settings.mode === 'auto' && (
+        <fieldset disabled={saving} className="m-0 min-w-0 border-0 p-0">
+          <span className={LABEL}>{t('admin.paddleRegions.auto.maxSize')}</span>
+          <ChoiceChips<string>
+            value={String(settings.max_mb)}
+            label={t('admin.paddleRegions.auto.maxSize')}
+            onChange={(value) => void save({ max_mb: Number(value) })}
+            options={sizes.map((mb) => ({ value: String(mb), label: megabytes(mb) }))}
+          />
+          <SettingsHint className="mt-1.5">{t('admin.paddleRegions.auto.maxSizeHint')}</SettingsHint>
+        </fieldset>
+      )}
+    </div>
+  );
+}
+
+function RequestRow({ request, admin }: { request: PaddleRegionPending; admin: Admin }) {
+  const { t, language } = useTranslation();
+  const megabytes = useMegabytes();
+  const busy = admin.busyId === request.id;
+  const date = new Date(request.requested_at).toLocaleDateString(language, { dateStyle: 'medium' });
+  return (
+    <div
+      className={`flex flex-wrap items-center gap-x-3 gap-y-2 py-2.5 pe-2 ps-3 ${busy ? 'opacity-60' : ''}`}
+      data-testid="paddle-region-request"
+    >
+      <div className="flex min-w-0 flex-1 basis-48 flex-col gap-1">
+        <span className="truncate font-medium text-content" style={fs(13, 'body')}>
+          {request.name}
+        </span>
+        <span className="flex flex-wrap items-center gap-1.5">
+          {request.declined ? (
+            <StatusPill tone="danger" icon={<Ban size={10} strokeWidth={2.4} />}>
+              {t('admin.paddleRegions.requests.declined')}
+            </StatusPill>
+          ) : (
+            <StatusPill tone="warning">{t(`admin.paddleRegions.requests.reason.${request.reason}`)}</StatusPill>
+          )}
+          {request.bytes !== null && <StatusPill>{megabytes(Math.max(1, Math.round(request.bytes / MB)))}</StatusPill>}
+          {request.requested_by && (
+            <StatusPill>{t('admin.paddleRegions.requests.by', { user: request.requested_by })}</StatusPill>
+          )}
+          <StatusPill>{date}</StatusPill>
+        </span>
+      </div>
+      <span className="flex flex-none items-center gap-1.5">
+        {!request.declined && (
+          <button
+            type="button"
+            disabled={admin.busyId !== null}
+            onClick={() => void admin.decline(request.id)}
+            className={SETTINGS_BUTTON}
+            style={fs(12.5, 'body')}
+          >
+            {t('admin.paddleRegions.requests.decline')}
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={admin.busyId !== null}
+          onClick={() => void admin.approve(request.id)}
+          className={SETTINGS_BUTTON}
+          style={fs(12.5, 'body')}
+        >
+          {busy ? <Loader2 size={13} className="animate-spin" /> : <CloudDownload size={13} strokeWidth={2.2} />}
+          {t('admin.paddleRegions.requests.approve')}
+        </button>
+      </span>
+    </div>
+  );
+}
+
+/** The regions paddlers asked for that wait for an admin, the open ones first. */
+export function RequestList({ admin }: { admin: Admin }) {
+  const { t } = useTranslation();
+  if (admin.requests.length === 0) return null;
+  const ordered = [...admin.requests].sort((a, b) => Number(a.declined) - Number(b.declined));
+  const open = admin.requests.filter((request) => !request.declined).length;
+  return (
+    <div className="flex min-w-0 flex-col gap-2" data-testid="paddle-region-requests">
+      <span className={`${LABEL} mb-0 flex items-center gap-1.5`}>
+        {t('admin.paddleRegions.requests.title')}
+        {open > 0 && <StatusPill tone="warning">{open}</StatusPill>}
+      </span>
+      <SettingRows>
+        {ordered.map((request) => (
+          <RequestRow key={request.id} request={request} admin={admin} />
+        ))}
+      </SettingRows>
+    </div>
+  );
+}
+
+/** A region TREK loaded by itself for a paddler, told apart from those an admin added. */
+export function AutoOriginPill() {
+  const { t } = useTranslation();
+  return (
+    <Tooltip label={t('admin.paddleRegions.origin.autoHint')}>
+      <span className="inline-flex" data-testid="paddle-region-auto">
+        <StatusPill icon={<Sparkles size={10} strokeWidth={2.2} />}>{t('admin.paddleRegions.origin.auto')}</StatusPill>
+      </span>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,411 @@
+// FE-ADMIN-PADDLEREG-001 to FE-ADMIN-PADDLEREG-027: the paddle regions card in the admin area, drawn from a
+// controlled usePaddleRegionsAdmin (the hook has its own test).
+// FE-ADMIN-PADDLEREG-MODEL-001 to FE-ADMIN-PADDLEREG-MODEL-003: the helpers in paddleRegionsModel.
+import type { PaddleRegion, PaddleRegionCatalogEntry } from '@trek/shared';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, within } from '../../../../tests/helpers/render';
+import { isReading, progressPercent, regionStatusTone } from './paddleRegionsModel';
+import PaddleRegionsPanel from './PaddleRegionsPanel';
+import type { usePaddleRegionsAdmin } from './usePaddleRegionsAdmin';
+
+type Admin = ReturnType<typeof usePaddleRegionsAdmin>;
+
+const hook = vi.hoisted(() => ({ usePaddleRegionsAdmin: vi.fn<() => Admin>() }));
+vi.mock('./usePaddleRegionsAdmin', () => ({ usePaddleRegionsAdmin: hook.usePaddleRegionsAdmin }));
+
+const HINT = 'Weirs, locks and paddling rules from OpenStreetMap, read per region and again every month.';
+const ATTRIBUTION =
+  'Data © OpenStreetMap contributors (ODbL), regional extracts by Geofabrik. Read again on the 3rd of every month.';
+const EMPTY = 'No region yet. Paddle tours then show that no obstacle data is known.';
+const CATALOG_DOWN = 'Geofabrik cannot be reached right now. Try again later.';
+
+/** A region read once, its data current to the 3rd of October (midday, so every time zone keeps the day). */
+function region(overrides: Partial<PaddleRegion> = {}): PaddleRegion {
+  return {
+    id: 'oberpfalz',
+    name: 'Oberpfalz',
+    status: 'ready',
+    origin: 'admin',
+    source_timestamp: '2026-10-03T12:00:00Z',
+    imported_at: '2026-10-04T08:00:00Z',
+    feature_count: 1234,
+    error: null,
+    progress: null,
+    network: null,
+    ...overrides,
+  };
+}
+
+/** A region before its first read: no data and no date yet. */
+const unread = (overrides: Partial<PaddleRegion>): PaddleRegion =>
+  region({ source_timestamp: null, imported_at: null, feature_count: 0, ...overrides });
+
+const READY = region();
+const WAITING = unread({ id: 'donau', name: 'Donau', status: 'queued' });
+const FAILED_AGAIN = region({ id: 'saale', name: 'Saale', status: 'failed', error: 'Download broke off.' });
+const FAILED_FIRST = unread({ id: 'mosel', name: 'Mosel', status: 'failed', error: 'Not a PBF file.' });
+
+/** Geofabrik's answers for "Limburg": the plain names told apart by the regions they lie in. */
+const HITS: PaddleRegionCatalogEntry[] = [
+  { id: 'germany/hessen/limburg-weilburg', name: 'Limburg-Weilburg', path: ['Europe', 'Germany', 'Hessen'] },
+  { id: 'netherlands/limburg', name: 'Limburg', path: ['Europe', 'Netherlands'] },
+  { id: 'belgium/limburg', name: 'Limburg', path: ['Europe', 'Belgium'] },
+  { id: 'limburg', name: 'Limburg', path: [] },
+];
+
+function adminState(overrides: Partial<Admin> = {}, search: Partial<Admin['search']> = {}): Admin {
+  return {
+    toursOn: true,
+    offline: false,
+    regions: [],
+    requests: [],
+    autoLoad: { settings: null, saving: false, save: vi.fn(async () => {}) },
+    loading: false,
+    error: null,
+    retry: vi.fn(),
+    added: new Set<string>(),
+    busyId: null,
+    add: vi.fn(async () => {}),
+    refresh: vi.fn(async () => {}),
+    approve: vi.fn(async () => {}),
+    decline: vi.fn(async () => {}),
+    removing: null,
+    askRemove: vi.fn(),
+    cancelRemove: vi.fn(),
+    confirmRemove: vi.fn(),
+    ...overrides,
+    search: { query: '', setQuery: vi.fn(), hits: null, searching: false, error: null, ...search },
+  };
+}
+
+function show(overrides: Partial<Admin> = {}, search: Partial<Admin['search']> = {}) {
+  const state = adminState(overrides, search);
+  hook.usePaddleRegionsAdmin.mockReturnValue(state);
+  return { state, ...render(<PaddleRegionsPanel />) };
+}
+
+/** The card's title row, where the number of regions sits beside the title. */
+function titleRow(): HTMLElement {
+  const row = screen.getByRole('heading', { name: 'Paddle water data' }).parentElement;
+  if (!row) throw new Error('no title row');
+  return row;
+}
+
+function rowOf(name: string): HTMLElement {
+  const row = screen.getByText(name).closest<HTMLElement>('[data-testid="paddle-region-row"]');
+  if (!row) throw new Error(`no row for ${name}`);
+  return row;
+}
+
+describe('PaddleRegionsPanel', () => {
+  it('FE-ADMIN-PADDLEREG-001: renders nothing while the Tours addon is off', () => {
+    const { container } = show({ toursOn: false, regions: [READY] });
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('FE-ADMIN-PADDLEREG-002: shows the card with its hint, the attribution and the empty state', () => {
+    show();
+    expect(screen.getByRole('heading', { name: 'Paddle water data' })).toBeInTheDocument();
+    expect(screen.getByText(HINT)).toBeInTheDocument();
+    expect(screen.getByText(EMPTY)).toBeInTheDocument();
+    expect(screen.getByText(ATTRIBUTION)).toBeInTheDocument();
+    // No count beside the title while there is no region.
+    expect(titleRow()).toHaveTextContent(/^Paddle water data$/);
+    const search = screen.getByRole('searchbox', { name: 'Add a region' });
+    expect(search).toBeEnabled();
+    expect(search).toHaveAttribute('placeholder', 'Search Geofabrik, for example Oberpfalz');
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('paddle-region-row')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-003: says the list is loading instead of calling it empty', () => {
+    show({ loading: true });
+    expect(screen.getByRole('status')).toHaveTextContent('Loading...');
+    expect(screen.queryByText(EMPTY)).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-004: offline it says why and locks the search and every row, without the list error', () => {
+    show({ offline: true, error: 'Network Error', regions: [READY] });
+    expect(screen.getByRole('status')).toHaveTextContent('Regions can only be managed with a connection.');
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(screen.queryByText('Network Error')).not.toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'Add a region' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Read again Oberpfalz' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove region Oberpfalz' })).toBeDisabled();
+  });
+
+  it('FE-ADMIN-PADDLEREG-005: a failed list read shows its error with a retry that asks the hook again', () => {
+    const { state } = show({ error: 'Server unreachable' });
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveTextContent('Server unreachable');
+    fireEvent.click(within(alert).getByRole('button', { name: 'Try again' }));
+    expect(state.retry).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-ADMIN-PADDLEREG-006: the search shows the query and hands every change to the hook', () => {
+    const { state } = show({}, { query: 'Lim' });
+    const search = screen.getByRole('searchbox', { name: 'Add a region' });
+    expect(search).toHaveValue('Lim');
+    fireEvent.change(search, { target: { value: 'Limb' } });
+    expect(state.search.setQuery).toHaveBeenCalledWith('Limb');
+  });
+
+  it('FE-ADMIN-PADDLEREG-007: while Geofabrik is searched it says so and shows no verdict yet', () => {
+    show({}, { query: 'Limburg', searching: true });
+    expect(screen.getByRole('status')).toHaveTextContent('Loading...');
+    expect(screen.queryByText('No region by that name')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('paddle-region-hit')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-008: a failed search shows its error under the field, without the list retry', () => {
+    show({}, { query: 'Limburg', error: CATALOG_DOWN });
+    expect(screen.getByRole('alert')).toHaveTextContent(CATALOG_DOWN);
+    expect(screen.queryByRole('button', { name: 'Try again' })).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-009: a search without hits says no region has that name', () => {
+    show({}, { query: 'Atlantis', hits: [] });
+    expect(screen.getByText('No region by that name')).toBeInTheDocument();
+    expect(screen.queryByTestId('paddle-region-hit')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-010: hits name the regions they lie in, outermost first, and mark the ones added', () => {
+    show({ added: new Set(['germany/hessen/limburg-weilburg']) }, { query: 'Limburg', hits: HITS });
+    const [weilburg, dutch, belgian, bare] = screen.getAllByTestId('paddle-region-hit');
+    const path = within(weilburg).getAllByText(/^(Europe|Germany|Hessen)$/);
+    expect(path.map((part) => part.textContent)).toEqual(['Europe', 'Germany', 'Hessen']);
+    expect(within(weilburg).getByText('Added')).toBeInTheDocument();
+    expect(within(weilburg).queryByRole('button', { name: 'Add' })).not.toBeInTheDocument();
+    expect(within(dutch).getByText('Netherlands')).toBeInTheDocument();
+    expect(within(dutch).getByRole('button', { name: 'Add' })).toBeEnabled();
+    expect(within(belgian).getByText('Belgium')).toBeInTheDocument();
+    // A region at the top of Geofabrik's tree has nothing above it to name.
+    expect(within(bare).getByText('Limburg').nextElementSibling).toBeNull();
+  });
+
+  it('FE-ADMIN-PADDLEREG-011: adding a hit hands its Geofabrik id to the hook', () => {
+    const { state } = show({}, { query: 'Limburg', hits: HITS });
+    const dutch = screen.getAllByTestId('paddle-region-hit')[1];
+    fireEvent.click(within(dutch).getByRole('button', { name: 'Add' }));
+    expect(state.add).toHaveBeenCalledWith('netherlands/limburg');
+  });
+
+  it('FE-ADMIN-PADDLEREG-012: while one region is added every add waits, and the one under way spins', () => {
+    show({ busyId: 'netherlands/limburg' }, { query: 'Limburg', hits: HITS });
+    const [, dutch, belgian] = screen.getAllByTestId('paddle-region-hit');
+    const adding = within(dutch).getByRole('button', { name: 'Add' });
+    const waiting = within(belgian).getByRole('button', { name: 'Add' });
+    expect(adding).toBeDisabled();
+    expect(waiting).toBeDisabled();
+    expect(adding.querySelector('.animate-spin')).not.toBeNull();
+    expect(waiting.querySelector('.animate-spin')).toBeNull();
+  });
+
+  it('FE-ADMIN-PADDLEREG-013: a waiting region reads Waiting, has no data yet and cannot be read again', () => {
+    show({ regions: [WAITING] });
+    const row = rowOf('Donau');
+    expect(within(row).getByText('Waiting')).toHaveClass('border-edge-faint');
+    expect(within(row).queryByText(/objects?$/)).not.toBeInTheDocument();
+    expect(within(row).queryByText(/^As of/)).not.toBeInTheDocument();
+    expect(within(row).getByRole('button', { name: 'Read again Donau' })).toBeDisabled();
+    expect(within(row).getByRole('button', { name: 'Remove region Donau' })).toBeEnabled();
+  });
+
+  it('FE-ADMIN-PADDLEREG-014: a region being read shows its phase and share, the phase alone while the size is unknown', () => {
+    show({
+      regions: [
+        unread({ id: 'elbe', name: 'Elbe', status: 'importing', progress: { phase: 'download', fraction: 0.416 } }),
+        unread({ id: 'main', name: 'Main', status: 'importing', progress: { phase: 'read', fraction: 0 } }),
+        unread({ id: 'isar', name: 'Isar', status: 'importing', progress: { phase: 'download', fraction: null } }),
+        unread({ id: 'naab', name: 'Naab', status: 'importing' }),
+      ],
+    });
+    const elbe = rowOf('Elbe');
+    expect(within(elbe).getByText('Downloading 42%')).toHaveClass('bg-accent');
+    expect(within(elbe).getByRole('button', { name: 'Read again Elbe' })).toBeDisabled();
+    expect(within(elbe).getByRole('button', { name: 'Remove region Elbe' })).toBeEnabled();
+    // A read just begun says 0 %, not nothing.
+    expect(within(rowOf('Main')).getByText('Reading 0%')).toBeInTheDocument();
+    expect(within(rowOf('Isar')).getByText('Downloading')).toBeInTheDocument();
+    expect(within(rowOf('Naab')).getByText('Reading')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-015: a ready region shows its object count and the date its data is current to', () => {
+    show({ regions: [READY, region({ id: 'regen', name: 'Regen', feature_count: 1, source_timestamp: null })] });
+    const row = rowOf('Oberpfalz');
+    expect(within(row).getByText('Ready')).toHaveClass('bg-success-soft');
+    expect(within(row).getByText('1234 objects')).toBeInTheDocument();
+    expect(within(row).getByText('As of Oct 3, 2026')).toBeInTheDocument();
+    expect(within(row).getByRole('button', { name: 'Read again Oberpfalz' })).toBeEnabled();
+    // One object reads singular; without a source date there is no date to show.
+    const regen = rowOf('Regen');
+    expect(within(regen).getByText('1 object')).toBeInTheDocument();
+    expect(within(regen).queryByText(/^As of/)).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-016: a failed read shows its error, and that the earlier data stays in use when there is some', () => {
+    show({ regions: [FAILED_AGAIN, FAILED_FIRST] });
+    const again = rowOf('Saale');
+    expect(within(again).getByText('Failed')).toHaveClass('bg-danger-soft');
+    const error = within(again).getByText('Download broke off. The data read before stays in use.');
+    expect(error).toHaveAttribute('title', 'Download broke off.');
+    const first = rowOf('Mosel');
+    expect(within(first).getByText('Not a PBF file.')).toBeInTheDocument();
+    expect(within(first).queryByText(/stays in use/)).not.toBeInTheDocument();
+    expect(within(first).queryByText(/objects?$/)).not.toBeInTheDocument();
+    expect(within(first).getByRole('button', { name: 'Read again Mosel' })).toBeEnabled();
+  });
+
+  it('FE-ADMIN-PADDLEREG-017: Read again and Remove hand the region to the hook', () => {
+    const { state } = show({ regions: [READY] });
+    fireEvent.click(screen.getByRole('button', { name: 'Read again Oberpfalz' }));
+    expect(state.refresh).toHaveBeenCalledWith('oberpfalz');
+    fireEvent.click(screen.getByRole('button', { name: 'Remove region Oberpfalz' }));
+    expect(state.askRemove).toHaveBeenCalledWith(READY);
+    // The question opens only once the hook holds the region to remove.
+    expect(screen.queryByRole('heading', { name: 'Remove region' })).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-018: while one region is busy its row dims and no row can be read again or removed', () => {
+    show({ regions: [READY, FAILED_AGAIN], busyId: 'oberpfalz' });
+    expect(rowOf('Oberpfalz')).toHaveClass('opacity-60');
+    expect(rowOf('Saale')).not.toHaveClass('opacity-60');
+    for (const name of ['Oberpfalz', 'Saale']) {
+      expect(screen.getByRole('button', { name: `Read again ${name}` })).toBeDisabled();
+      expect(screen.getByRole('button', { name: `Remove region ${name}` })).toBeDisabled();
+    }
+  });
+
+  it('FE-ADMIN-PADDLEREG-019: the title carries the number of regions', () => {
+    show({ regions: [READY, WAITING, FAILED_FIRST] });
+    expect(within(titleRow()).getByText('3')).toBeInTheDocument();
+    expect(screen.getAllByTestId('paddle-region-row')).toHaveLength(3);
+  });
+
+  it('FE-ADMIN-PADDLEREG-020: removing asks first, naming the region, and confirming hands it to the hook', () => {
+    const { state } = show({ regions: [READY], removing: READY });
+    const message = 'Oberpfalz and its obstacle data are removed. Paddle tours there then show no data.';
+    expect(screen.getByRole('heading', { name: 'Remove region' })).toBeInTheDocument();
+    expect(screen.getByText(message)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Remove' }));
+    expect(state.confirmRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-ADMIN-PADDLEREG-021: Cancel and Escape take the question back without removing', () => {
+    const { state } = show({ regions: [READY], removing: READY });
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(state.cancelRemove).toHaveBeenCalledTimes(2);
+    expect(state.confirmRemove).not.toHaveBeenCalled();
+  });
+});
+
+describe('PaddleRegionsPanel water network (PAD-11)', () => {
+  it('FE-ADMIN-PADDLEREG-022: a region with its network shows the water it holds, the rest in the tooltip', async () => {
+    const network = {
+      water_km: 1364.5,
+      lakes: 266,
+      portages: 14,
+      inferred_portages: 232,
+      gaps: 63,
+      locks: 17,
+      built_at: '2026-10-17T15:30:20Z',
+      bytes: 1496816,
+    };
+    show({ regions: [region({ network })] });
+    const pill = within(rowOf('Oberpfalz')).getByTestId('paddle-region-network');
+    expect(pill).toHaveTextContent('1,365 km of water');
+    fireEvent.mouseEnter(pill);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(
+      '266 lakes, 14 mapped portages, 232 assumed carries, 17 locks, 63 bridged gaps'
+    );
+  });
+
+  it('FE-ADMIN-PADDLEREG-023: a region read before routing existed asks to be read again; one never read or being read says nothing', () => {
+    show({
+      regions: [
+        region({ id: 'old', name: 'Old read', network: null }),
+        region({ id: 'new', name: 'Never read', imported_at: null, status: 'queued', network: null }),
+      ],
+    });
+    expect(within(rowOf('Old read')).getByText('No water network')).toBeInTheDocument();
+    expect(within(rowOf('Never read')).queryByText('No water network')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-024: offers automatic, on request and off, with the size limit only for automatic', () => {
+    const save = vi.fn(async () => {});
+    show({ autoLoad: { settings: { mode: 'auto', max_mb: 500 }, saving: false, save } });
+    const auto = screen.getByTestId('paddle-auto-load');
+    expect(within(auto).getByRole('button', { name: /Automatic/ })).toHaveAttribute('aria-pressed', 'true');
+    expect(within(auto).getByText('Largest region loaded automatically')).toBeInTheDocument();
+    fireEvent.click(within(auto).getByRole('button', { name: /On request/ }));
+    expect(save).toHaveBeenCalledWith({ mode: 'ask' });
+    fireEvent.click(within(auto).getByRole('button', { name: '1 GB' }));
+    expect(save).toHaveBeenCalledWith({ max_mb: 1000 });
+  });
+
+  it('FE-ADMIN-PADDLEREG-025: hides the size limit unless loading is automatic, and shows nothing before the setting is read', () => {
+    show({ autoLoad: { settings: { mode: 'off', max_mb: 500 }, saving: false, save: vi.fn() } });
+    expect(screen.queryByText('Largest region loaded automatically')).not.toBeInTheDocument();
+    expect(screen.getByText(/TREK loads nothing by itself/)).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PADDLEREG-026: lists the requests, the open ones first, to load or decline', () => {
+    const approve = vi.fn(async () => {});
+    const decline = vi.fn(async () => {});
+    const base = {
+      bytes: 734_003_200,
+      requested_by: 'elmo',
+      requested_at: '2026-10-18T09:00:00Z',
+    };
+    show({
+      approve,
+      decline,
+      requests: [
+        { ...base, id: 'norway', name: 'Norway', reason: 'too_large', declined: true },
+        { ...base, id: 'brandenburg', name: 'Brandenburg', reason: 'limit', declined: false },
+      ],
+    });
+    const rows = screen.getAllByTestId('paddle-region-request');
+    expect(rows[0]).toHaveTextContent('Brandenburg');
+    expect(rows[0]).toHaveTextContent('Daily limit');
+    expect(rows[0]).toHaveTextContent('by elmo');
+    expect(rows[1]).toHaveTextContent('Declined');
+    fireEvent.click(within(rows[0]).getByRole('button', { name: 'Decline' }));
+    expect(decline).toHaveBeenCalledWith('brandenburg');
+    fireEvent.click(within(rows[1]).getByRole('button', { name: /Load/ }));
+    expect(approve).toHaveBeenCalledWith('norway');
+    expect(within(rows[1]).queryByRole('button', { name: 'Decline' })).toBeNull();
+  });
+
+  it('FE-ADMIN-PADDLEREG-027: marks a region TREK loaded by itself', () => {
+    show({ regions: [region({ id: 'mv', name: 'Mecklenburg', origin: 'auto' }), READY] });
+    expect(within(rowOf('Mecklenburg')).getByTestId('paddle-region-auto')).toHaveTextContent('Automatic');
+    expect(within(rowOf('Oberpfalz')).queryByTestId('paddle-region-auto')).toBeNull();
+  });
+});
+
+describe('paddleRegionsModel', () => {
+  it('FE-ADMIN-PADDLEREG-MODEL-001: a region waiting for its read or being read counts as reading', () => {
+    expect(isReading({ status: 'queued' })).toBe(true);
+    expect(isReading({ status: 'importing' })).toBe(true);
+    expect(isReading({ status: 'ready' })).toBe(false);
+    expect(isReading({ status: 'failed' })).toBe(false);
+  });
+
+  it('FE-ADMIN-PADDLEREG-MODEL-002: the share of a read is a whole percent, null while its size is unknown', () => {
+    expect(progressPercent({ progress: null })).toBeNull();
+    expect(progressPercent({ progress: { phase: 'download', fraction: null } })).toBeNull();
+    expect(progressPercent({ progress: { phase: 'download', fraction: 0 } })).toBe(0);
+    expect(progressPercent({ progress: { phase: 'read', fraction: 0.416 } })).toBe(42);
+    expect(progressPercent({ progress: { phase: 'read', fraction: 1 } })).toBe(100);
+  });
+
+  it('FE-ADMIN-PADDLEREG-MODEL-003: the badge tone follows the state of the read, never the water', () => {
+    expect(regionStatusTone('queued')).toBe('neutral');
+    expect(regionStatusTone('importing')).toBe('accent');
+    expect(regionStatusTone('ready')).toBe('success');
+    expect(regionStatusTone('failed')).toBe('danger');
+  });
+});

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

@@ -0,0 +1,320 @@
+import type { PaddleRegion, PaddleRegionCatalogEntry } from '@trek/shared';
+import { Check, ChevronRight, Loader2, Plus, RefreshCw, Search, Trash2, Waves, WifiOff } from 'lucide-react';
+import { useId } from 'react';
+import { useTranslation } from '../../../i18n';
+import {
+  SettingRows,
+  SETTINGS_BUTTON,
+  SETTINGS_ICON_BUTTON,
+  SettingsCard,
+  SettingsHint,
+  StatusPill,
+} from '../../Settings/settingsKit';
+import ConfirmDialog from '../../shared/ConfirmDialog';
+import { EditorField, INPUT } from '../../shared/dialogParts';
+import { fs } from '../../shared/DialogShell';
+import ErrorBoundary from '../../shared/ErrorBoundary';
+import { Tooltip } from '../../shared/Tooltip';
+import { AutoLoadSettings, AutoOriginPill, RequestList } from './PaddleAutoLoadParts';
+import { progressPercent, regionStatusTone } from './paddleRegionsModel';
+import { usePaddleRegionsAdmin } from './usePaddleRegionsAdmin';
+
+type Admin = ReturnType<typeof usePaddleRegionsAdmin>;
+
+/**
+ * PAD-05A in the admin area: the regions TREK reads paddle obstacles for,
+ * picked from Geofabrik's list, and (PAD-11C) how TREK loads the region of a
+ * place a paddler plans in by itself, with the regions that wait for an admin.
+ * Both the desktop and the phone admin show this one card under the addons,
+ * while the Tours addon is on.
+ */
+export default function PaddleRegionsPanel() {
+  return (
+    <ErrorBoundary boundaryId="paddle-regions">
+      <Panel />
+    </ErrorBoundary>
+  );
+}
+
+function Panel() {
+  const { t } = useTranslation();
+  const admin = usePaddleRegionsAdmin();
+  if (!admin.toursOn) return null;
+  return (
+    <SettingsCard
+      icon={Waves}
+      title={t('admin.paddleRegions.title')}
+      hint={t('admin.paddleRegions.hint')}
+      badge={admin.regions.length > 0 ? <StatusPill>{admin.regions.length}</StatusPill> : undefined}
+    >
+      {admin.offline && (
+        <p
+          role="status"
+          className="m-0 flex items-center gap-2 rounded-[12px] bg-warning-soft px-3.5 py-2.5 text-warning"
+          style={fs(12.5, 'body')}
+        >
+          <WifiOff size={14} className="flex-none" />
+          {t('admin.paddleRegions.offline')}
+        </p>
+      )}
+      {admin.error && !admin.offline && (
+        <div
+          role="alert"
+          className="flex flex-wrap items-center gap-3 rounded-[12px] bg-danger-soft px-3.5 py-2.5 text-danger"
+          style={fs(12.5, 'body')}
+        >
+          <span className="min-w-0 flex-1 basis-48">{admin.error}</span>
+          <button type="button" onClick={admin.retry} className={SETTINGS_BUTTON} style={fs(12.5, 'body')}>
+            {t('admin.paddleRegions.retry')}
+          </button>
+        </div>
+      )}
+      <fieldset disabled={admin.offline} className="m-0 flex min-w-0 flex-col gap-4 border-0 p-0">
+        <AutoLoadSettings admin={admin} />
+        <RequestList admin={admin} />
+        <CatalogSearch admin={admin} />
+        <RegionList admin={admin} />
+      </fieldset>
+      <SettingsHint>{t('admin.paddleRegions.attribution')}</SettingsHint>
+      <ConfirmDialog
+        isOpen={admin.removing !== null}
+        onClose={admin.cancelRemove}
+        onConfirm={admin.confirmRemove}
+        title={t('admin.paddleRegions.remove')}
+        message={t('admin.paddleRegions.removeMessage', { name: admin.removing?.name ?? '' })}
+        confirmLabel={t('common.remove')}
+      />
+    </SettingsCard>
+  );
+}
+
+/** A Geofabrik region with the regions it lies in, outermost first, so two of one name tell apart. */
+function RegionPath({ hit }: { hit: PaddleRegionCatalogEntry }) {
+  if (hit.path.length === 0) return null;
+  return (
+    <span className="flex min-w-0 flex-wrap items-center gap-0.5 text-content-faint" style={fs(11.5)}>
+      {hit.path.map((part, index) => (
+        <span key={`${part}-${index}`} className="inline-flex items-center gap-0.5">
+          {index > 0 && <ChevronRight size={11} className="flex-none rtl:rotate-180" aria-hidden="true" />}
+          {part}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+function CatalogSearch({ admin }: { admin: Admin }) {
+  const { t } = useTranslation();
+  const id = useId();
+  const { search } = admin;
+  return (
+    <div className="flex flex-col gap-2">
+      <EditorField label={t('admin.paddleRegions.search')} htmlFor={id}>
+        <div className="relative">
+          <Search
+            size={14}
+            className="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-content-faint"
+            aria-hidden="true"
+          />
+          <input
+            id={id}
+            type="search"
+            className={`${INPUT} ps-9`}
+            value={search.query}
+            onChange={(event) => search.setQuery(event.target.value)}
+            placeholder={t('admin.paddleRegions.searchPlaceholder')}
+            autoComplete="off"
+          />
+        </div>
+      </EditorField>
+      {search.searching && (
+        <p role="status" className="m-0 flex items-center gap-2 text-content-muted" style={fs(12.5, 'body')}>
+          <Loader2 size={14} className="flex-none animate-spin" />
+          {t('common.loading')}
+        </p>
+      )}
+      {search.error && (
+        <p role="alert" className="m-0 text-danger" style={fs(12.5, 'body')}>
+          {search.error}
+        </p>
+      )}
+      {search.hits && search.hits.length === 0 && <SettingsHint>{t('admin.paddleRegions.noHits')}</SettingsHint>}
+      {search.hits && search.hits.length > 0 && (
+        <SettingRows>
+          {search.hits.map((hit) => (
+            <div key={hit.id} className="flex items-center gap-3 py-2 pe-2 ps-3.5" data-testid="paddle-region-hit">
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <span className="truncate font-medium text-content" style={fs(13, 'body')}>
+                  {hit.name}
+                </span>
+                <RegionPath hit={hit} />
+              </div>
+              {admin.added.has(hit.id) ? (
+                <StatusPill icon={<Check size={11} strokeWidth={2.4} />}>{t('admin.paddleRegions.added')}</StatusPill>
+              ) : (
+                <button
+                  type="button"
+                  disabled={admin.busyId !== null}
+                  onClick={() => void admin.add(hit.id)}
+                  className={SETTINGS_BUTTON}
+                  style={fs(12.5, 'body')}
+                >
+                  {admin.busyId === hit.id ? (
+                    <Loader2 size={13} className="animate-spin" />
+                  ) : (
+                    <Plus size={13} strokeWidth={2.2} />
+                  )}
+                  {t('common.add')}
+                </button>
+              )}
+            </div>
+          ))}
+        </SettingRows>
+      )}
+    </div>
+  );
+}
+
+function RegionList({ admin }: { admin: Admin }) {
+  const { t } = useTranslation();
+  if (admin.loading) {
+    return (
+      <p role="status" className="m-0 flex items-center gap-2 text-content-muted" style={fs(12.5, 'body')}>
+        <Loader2 size={14} className="flex-none animate-spin" />
+        {t('common.loading')}
+      </p>
+    );
+  }
+  if (admin.regions.length === 0) {
+    return (
+      <div className="rounded-[12px] border border-dashed border-edge px-4 py-5 text-center">
+        <SettingsHint>{t('admin.paddleRegions.empty')}</SettingsHint>
+      </div>
+    );
+  }
+  return (
+    <SettingRows>
+      {admin.regions.map((region) => (
+        <RegionRow key={region.id} region={region} admin={admin} />
+      ))}
+    </SettingRows>
+  );
+}
+
+function RegionStatus({ region }: { region: PaddleRegion }) {
+  const { t, language } = useTranslation();
+  const percent = progressPercent(region);
+  const label =
+    region.status === 'importing' && region.progress
+      ? t(`admin.paddleRegions.phase.${region.progress.phase}`)
+      : t(`admin.paddleRegions.status.${region.status}`);
+  const share =
+    percent === null ? '' : ` ${new Intl.NumberFormat(language, { style: 'percent' }).format(percent / 100)}`;
+  return (
+    <StatusPill
+      tone={regionStatusTone(region.status)}
+      icon={region.status === 'importing' ? <Loader2 size={11} className="animate-spin" /> : undefined}
+    >
+      {label}
+      {share}
+    </StatusPill>
+  );
+}
+
+/**
+ * PAD-11: the water network the router follows in a region, as one figure
+ * with the rest in its tooltip. A region read before routing existed says it
+ * needs reading again; a network is never claimed where none was built.
+ */
+function RegionNetwork({ region }: { region: PaddleRegion }) {
+  const { t, language } = useTranslation();
+  const { network } = region;
+  if (!network) {
+    if (!region.imported_at || region.status === 'importing') return null;
+    return (
+      <Tooltip label={t('admin.paddleRegions.network.missingHint')}>
+        <span className="inline-flex">
+          <StatusPill tone="warning">{t('admin.paddleRegions.network.missing')}</StatusPill>
+        </span>
+      </Tooltip>
+    );
+  }
+  const km = new Intl.NumberFormat(language, { maximumFractionDigits: 0 }).format(network.water_km);
+  const details = [
+    t('admin.paddleRegions.network.lakes', { count: network.lakes }),
+    t('admin.paddleRegions.network.portages', { count: network.portages }),
+    t('admin.paddleRegions.network.inferred', { count: network.inferred_portages }),
+    t('admin.paddleRegions.network.locks', { count: network.locks }),
+    t('admin.paddleRegions.network.gaps', { count: network.gaps }),
+  ].join(', ');
+  return (
+    <Tooltip label={details}>
+      <span className="inline-flex" data-testid="paddle-region-network">
+        <StatusPill>{t('admin.paddleRegions.network.km', { km })}</StatusPill>
+      </span>
+    </Tooltip>
+  );
+}
+
+function RegionRow({ region, admin }: { region: PaddleRegion; admin: Admin }) {
+  const { t, language } = useTranslation();
+  const busy = admin.busyId === region.id;
+  const date = region.source_timestamp
+    ? new Date(region.source_timestamp).toLocaleDateString(language, { dateStyle: 'medium' })
+    : null;
+  return (
+    <div
+      className={`flex items-center gap-3 py-2.5 pe-2 ps-3 ${busy ? 'opacity-60' : ''}`}
+      data-testid="paddle-region-row"
+    >
+      <span
+        aria-hidden
+        className="grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-surface-tertiary text-content-secondary"
+      >
+        <Waves size={15} strokeWidth={1.9} />
+      </span>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <span className="truncate font-medium text-content" style={fs(13, 'body')}>
+          {region.name}
+        </span>
+        <span className="flex flex-wrap items-center gap-1.5">
+          <RegionStatus region={region} />
+          {region.origin === 'auto' && <AutoOriginPill />}
+          {region.imported_at && (
+            <StatusPill>{t('admin.paddleRegions.objects', { count: region.feature_count })}</StatusPill>
+          )}
+          {region.imported_at && date && <StatusPill>{t('admin.paddleRegions.asOf', { date })}</StatusPill>}
+          <RegionNetwork region={region} />
+        </span>
+        {region.status === 'failed' && region.error && (
+          <p className="m-0 line-clamp-2 break-words text-danger" style={fs(11.5)} title={region.error}>
+            {region.error}
+            {region.imported_at ? ` ${t('admin.paddleRegions.keptData')}` : ''}
+          </p>
+        )}
+      </div>
+      <Tooltip label={t('admin.paddleRegions.refresh')}>
+        <button
+          type="button"
+          aria-label={`${t('admin.paddleRegions.refresh')} ${region.name}`}
+          disabled={admin.busyId !== null || region.status === 'queued' || region.status === 'importing'}
+          onClick={() => void admin.refresh(region.id)}
+          className={SETTINGS_ICON_BUTTON}
+        >
+          <RefreshCw size={14} strokeWidth={2} />
+        </button>
+      </Tooltip>
+      <Tooltip label={t('admin.paddleRegions.remove')}>
+        <button
+          type="button"
+          aria-label={`${t('admin.paddleRegions.remove')} ${region.name}`}
+          disabled={admin.busyId !== null}
+          onClick={() => admin.askRemove(region)}
+          className={`${SETTINGS_ICON_BUTTON} hover:!text-danger`}
+        >
+          <Trash2 size={14} strokeWidth={2} />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}

client/src/components/Admin/paddle/paddleRegionsModel.ts

@@ -0,0 +1,20 @@
+import type { PaddleRegion } from '@trek/shared';
+
+/** A region waiting for its read or being read: the list asks again until none is. */
+export function isReading(region: Pick<PaddleRegion, 'status'>): boolean {
+  return region.status === 'queued' || region.status === 'importing';
+}
+
+/** The share of a read under way as a whole percent, or null while its size is unknown. */
+export function progressPercent(region: Pick<PaddleRegion, 'progress'>): number | null {
+  const fraction = region.progress?.fraction;
+  return fraction === null || fraction === undefined ? null : Math.round(fraction * 100);
+}
+
+/** The status badge's tone: what state the read is in, never whether the water is safe. */
+export function regionStatusTone(status: PaddleRegion['status']): 'neutral' | 'accent' | 'success' | 'danger' {
+  if (status === 'importing') return 'accent';
+  if (status === 'ready') return 'success';
+  if (status === 'failed') return 'danger';
+  return 'neutral';
+}

client/src/components/Admin/paddle/usePaddleAutoLoad.test.ts

@@ -0,0 +1,50 @@
+// FE-HOOK-PADDLE-AUTOLOAD-001 to 003: how TREK loads regions by itself, read and saved in the admin area (PAD-11C).
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createElement, type ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TranslationProvider } from '../../../i18n/TranslationContext';
+
+const repo = vi.hoisted(() => ({ settings: vi.fn(), saveSettings: vi.fn() }));
+const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
+vi.mock('../../../repo/paddleRegionRepo', () => ({ paddleRegionRepo: repo }));
+vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
+
+const { usePaddleAutoLoad } = await import('./usePaddleAutoLoad');
+
+const wrapper = ({ children }: { children: ReactNode }) => createElement(TranslationProvider, null, children);
+
+describe('usePaddleAutoLoad', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    repo.settings.mockResolvedValue({ mode: 'auto', max_mb: 500 });
+    repo.saveSettings.mockImplementation(async (settings: unknown) => settings);
+  });
+
+  it('FE-HOOK-PADDLE-AUTOLOAD-001: reads the setting once the card shows, and not offline', async () => {
+    const { result } = renderHook(() => usePaddleAutoLoad(true, false), { wrapper });
+    await waitFor(() => expect(result.current.settings).toEqual({ mode: 'auto', max_mb: 500 }));
+    renderHook(() => usePaddleAutoLoad(true, true), { wrapper });
+    expect(repo.settings).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-HOOK-PADDLE-AUTOLOAD-002: shows a change at once and keeps what the server saved', async () => {
+    const { result } = renderHook(() => usePaddleAutoLoad(true, false), { wrapper });
+    await waitFor(() => expect(result.current.settings).not.toBeNull());
+    await act(async () => {
+      await result.current.save({ mode: 'ask' });
+    });
+    expect(repo.saveSettings).toHaveBeenCalledWith({ mode: 'ask', max_mb: 500 });
+    expect(result.current.settings).toEqual({ mode: 'ask', max_mb: 500 });
+  });
+
+  it('FE-HOOK-PADDLE-AUTOLOAD-003: takes a refused change back and says so', async () => {
+    repo.saveSettings.mockRejectedValueOnce(new Error('nope'));
+    const { result } = renderHook(() => usePaddleAutoLoad(true, false), { wrapper });
+    await waitFor(() => expect(result.current.settings).not.toBeNull());
+    await act(async () => {
+      await result.current.save({ max_mb: 2000 });
+    });
+    expect(result.current.settings).toEqual({ mode: 'auto', max_mb: 500 });
+    expect(toast.error).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/Admin/paddle/usePaddleAutoLoad.ts

@@ -0,0 +1,59 @@
+import type { PaddleRegionSettings } from '@trek/shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from '../../../i18n';
+import { paddleRegionRepo } from '../../../repo/paddleRegionRepo';
+import { getApiErrorMessage } from '../../../types';
+import { useToast } from '../../shared/Toast';
+
+/**
+ * PAD-11C in the admin area: how TREK loads the water data of a place a
+ * paddler plans in, read once the card shows and saved on every change. A
+ * change shows at once and goes back, with a toast, when the server refuses
+ * it. While one is saved the controls rest, so two saves never cross.
+ */
+export function usePaddleAutoLoad(active: boolean, offline: boolean) {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [settings, setSettings] = useState<PaddleRegionSettings | null>(null);
+  const [saving, setSaving] = useState(false);
+  const pending = useRef(false);
+
+  useEffect(() => {
+    if (!active || offline) return;
+    let cancelled = false;
+    paddleRegionRepo.settings().then(
+      (loaded) => {
+        if (!cancelled) setSettings(loaded);
+      },
+      (err: unknown) => {
+        if (!cancelled) toast.error(getApiErrorMessage(err, t('common.error')));
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [active, offline, t, toast]);
+
+  const save = useCallback(
+    async (change: Partial<PaddleRegionSettings>) => {
+      if (!settings || pending.current) return;
+      const before = settings;
+      const next = { ...settings, ...change };
+      pending.current = true;
+      setSaving(true);
+      setSettings(next);
+      try {
+        setSettings(await paddleRegionRepo.saveSettings(next));
+      } catch (err) {
+        setSettings(before);
+        toast.error(getApiErrorMessage(err, t('common.error')));
+      } finally {
+        pending.current = false;
+        setSaving(false);
+      }
+    },
+    [settings, t, toast]
+  );
+
+  return { settings, saving, save };
+}

client/src/components/Admin/paddle/usePaddleRegionsAdmin.test.ts

@@ -0,0 +1,385 @@
+/**
+ * FE-HOOK-PADDLEREGIONS-001 to FE-HOOK-PADDLEREGIONS-014: the paddle regions in
+ * the admin area (PAD-05A), the one hook the desktop and the phone admin render
+ * through PaddleRegionsPanel. The repo is mocked; its error codes and its
+ * offline error stay the real ones, and the strings are the English ones.
+ * FE-PADDLEREGIONSMODEL-001: the model's helpers for the list and its badges.
+ */
+import { act, renderHook } from '@testing-library/react';
+import type { PaddleRegion, PaddleRegionCatalogEntry } from '@trek/shared';
+import { createElement, type ReactNode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { TranslationProvider } from '../../../i18n/TranslationContext';
+import { PaddleRegionsOfflineError } from '../../../repo/paddleRegionRepo';
+import { useAddonStore } from '../../../store/addonStore';
+import { setForcedOffline } from '../../../sync/networkMode';
+import { isReading, progressPercent, regionStatusTone } from './paddleRegionsModel';
+import { CATALOG_SEARCH_DEBOUNCE_MS, PADDLE_REGIONS_POLL_MS, usePaddleRegionsAdmin } from './usePaddleRegionsAdmin';
+
+const repo = vi.hoisted(() => ({
+  list: vi.fn<() => Promise<PaddleRegion[]>>(),
+  catalog: vi.fn<(q: string, signal?: AbortSignal) => Promise<PaddleRegionCatalogEntry[]>>(),
+  add: vi.fn<(id: string) => Promise<PaddleRegion>>(),
+  refresh: vi.fn<(id: string) => Promise<PaddleRegion>>(),
+  remove: vi.fn<(id: string) => Promise<{ success: true }>>(),
+  decline: vi.fn<(id: string) => Promise<{ success: true }>>(),
+  settings: vi.fn(async () => ({ mode: 'auto' as const, max_mb: 500 })),
+  saveSettings: vi.fn(async (settings: { mode: 'auto' | 'ask' | 'off'; max_mb: number }) => settings),
+}));
+const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn() }));
+vi.mock('../../../repo/paddleRegionRepo', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../../repo/paddleRegionRepo')>()),
+  // The list answers its regions and no requests unless a test says otherwise (PAD-11C).
+  paddleRegionRepo: { ...repo, list: () => repo.list().then((regions) => ({ regions, requests: [] })) },
+}));
+vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
+
+const OFFLINE = 'Regions can only be managed with a connection.';
+
+/** A region as the server lists it. */
+function region(id: string, status: PaddleRegion['status'], over: Partial<PaddleRegion> = {}): PaddleRegion {
+  return {
+    id,
+    name: id,
+    status,
+    origin: 'admin',
+    source_timestamp: null,
+    imported_at: null,
+    feature_count: 0,
+    error: null,
+    progress: null,
+    network: null,
+    ...over,
+  };
+}
+
+/** A region in Geofabrik's list. */
+function hit(id: string, name: string, ...path: string[]): PaddleRegionCatalogEntry {
+  return { id, name, path };
+}
+
+const READY = region('oberbayern', 'ready', { source_timestamp: '2026-10-01T20:21:00Z', feature_count: 412 });
+const FAILED = region('niederbayern', 'failed', { error: 'Download failed' });
+const QUEUED = region('oberpfalz', 'queued');
+const IMPORTING = region('oberpfalz', 'importing', { progress: { phase: 'read', fraction: 0.4 } });
+const DONE = region('oberpfalz', 'ready', { source_timestamp: '2026-10-15T20:21:00Z', feature_count: 87 });
+const HIT = hit('oberpfalz', 'Oberpfalz', 'Europe', 'Germany', 'Bayern');
+const OBERBAYERN_HIT = hit('oberbayern', 'Oberbayern', 'Europe', 'Germany', 'Bayern');
+
+/** An axios error as the server answers it: its message and, for some, a code. */
+function apiError(error: string, code?: string) {
+  return { response: { data: { error, code } } };
+}
+
+/** A promise the test settles itself, to look at the hook while a call is out. */
+function deferred<T>() {
+  let resolve: (value: T) => void = () => undefined;
+  const promise = new Promise<T>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+/** Lets the clock run on and every answer due by then arrive. */
+async function settle(ms = 0) {
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(ms);
+  });
+}
+
+const wrapper = ({ children }: { children: ReactNode }) => createElement(TranslationProvider, null, children);
+
+async function mount() {
+  const hook = renderHook(() => usePaddleRegionsAdmin(), { wrapper });
+  await settle();
+  return hook;
+}
+
+function seedTours() {
+  seedStore(useAddonStore, { addons: [{ id: 'tours', enabled: true }] });
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  resetAllStores();
+  seedTours();
+  toast.success.mockReset();
+  toast.error.mockReset();
+  repo.list.mockReset().mockResolvedValue([READY]);
+  repo.catalog.mockReset().mockResolvedValue([HIT]);
+  repo.add.mockReset().mockResolvedValue(QUEUED);
+  repo.refresh.mockReset().mockResolvedValue(READY);
+  repo.remove.mockReset().mockResolvedValue({ success: true });
+});
+afterEach(() => {
+  act(() => setForcedOffline(false));
+  vi.useRealTimers();
+});
+
+describe('usePaddleRegionsAdmin', () => {
+  it('FE-HOOK-PADDLEREGIONS-001: asks nothing while the Tours addon is off, and loads once it is switched on', async () => {
+    seedStore(useAddonStore, { addons: [] });
+    const { result } = await mount();
+    await settle(PADDLE_REGIONS_POLL_MS * 2);
+    expect(result.current.toursOn).toBe(false);
+    expect(repo.list).not.toHaveBeenCalled();
+
+    act(() => seedTours());
+    await settle();
+    expect(result.current.toursOn).toBe(true);
+    expect(repo.list).toHaveBeenCalledTimes(1);
+    expect(result.current.regions).toEqual([READY]);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-002: loads the list, knows which regions are added and asks no more while none is read', async () => {
+    repo.list.mockResolvedValue([READY, FAILED]);
+    const { result } = renderHook(() => usePaddleRegionsAdmin(), { wrapper });
+    expect(result.current).toMatchObject({ toursOn: true, offline: false, loading: true, regions: [], error: null });
+
+    await settle();
+    expect(result.current).toMatchObject({ loading: false, regions: [READY, FAILED], error: null, busyId: null });
+    expect([...result.current.added]).toEqual(['oberbayern', 'niederbayern']);
+    expect(result.current.removing).toBeNull();
+    await settle(PADDLE_REGIONS_POLL_MS * 3);
+    expect(repo.list).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-003: asks again on every poll while a region waits or is read, and stops once all are ready', async () => {
+    repo.list
+      .mockResolvedValueOnce([READY, QUEUED])
+      .mockResolvedValueOnce([READY, IMPORTING])
+      .mockResolvedValue([READY, DONE]);
+    const { result } = await mount();
+    expect(repo.list).toHaveBeenCalledTimes(1);
+
+    await settle(PADDLE_REGIONS_POLL_MS - 1);
+    expect(repo.list).toHaveBeenCalledTimes(1);
+    await settle(1);
+    expect(repo.list).toHaveBeenCalledTimes(2);
+    expect(result.current.regions).toEqual([READY, IMPORTING]);
+
+    await settle(PADDLE_REGIONS_POLL_MS);
+    expect(repo.list).toHaveBeenCalledTimes(3);
+    expect(result.current.regions).toEqual([READY, DONE]);
+    await settle(PADDLE_REGIONS_POLL_MS * 5);
+    expect(repo.list).toHaveBeenCalledTimes(3);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-004: a failed poll shows the error and keeps the regions; the next answer clears it', async () => {
+    repo.list
+      .mockResolvedValueOnce([QUEUED])
+      .mockRejectedValueOnce(apiError('Database is locked'))
+      .mockResolvedValue([DONE]);
+    const { result } = await mount();
+    await settle(PADDLE_REGIONS_POLL_MS);
+    expect(result.current).toMatchObject({ error: 'Database is locked', regions: [QUEUED], loading: false });
+
+    await settle(PADDLE_REGIONS_POLL_MS);
+    expect(result.current).toMatchObject({ error: null, regions: [DONE] });
+    await settle(PADDLE_REGIONS_POLL_MS * 3);
+    expect(repo.list).toHaveBeenCalledTimes(3);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-005: names why the list failed, offline or unknown, and a retry clears it', async () => {
+    repo.list
+      .mockRejectedValueOnce(new PaddleRegionsOfflineError())
+      .mockRejectedValueOnce('socket hang up')
+      .mockResolvedValue([READY]);
+    const { result } = await mount();
+    expect(result.current).toMatchObject({ error: OFFLINE, loading: false, regions: [] });
+
+    await act(() => result.current.retry());
+    expect(result.current.error).toBe('Error');
+
+    await act(() => result.current.retry());
+    expect(result.current).toMatchObject({ error: null, regions: [READY] });
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-006: searches Geofabrik only from two characters and once the typing rests', async () => {
+    const { result } = await mount();
+    act(() => result.current.search.setQuery(' o '));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS * 3);
+    expect(repo.catalog).not.toHaveBeenCalled();
+    expect(result.current.search).toMatchObject({ query: ' o ', hits: null, searching: false, error: null });
+
+    act(() => result.current.search.setQuery(' ob'));
+    expect(result.current.search.searching).toBe(true);
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS - 1);
+    act(() => result.current.search.setQuery(' obe'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS - 1);
+    expect(repo.catalog).not.toHaveBeenCalled();
+
+    await settle(1);
+    expect(repo.catalog).toHaveBeenCalledTimes(1);
+    expect(repo.catalog).toHaveBeenCalledWith('obe', expect.any(AbortSignal));
+    expect(result.current.search).toMatchObject({ query: ' obe', hits: [HIT], searching: false, error: null });
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-007: the answer for the words typed last wins, an older one arriving late is dropped', async () => {
+    const first = deferred<PaddleRegionCatalogEntry[]>();
+    const second = deferred<PaddleRegionCatalogEntry[]>();
+    repo.catalog.mockReturnValueOnce(first.promise).mockReturnValueOnce(second.promise);
+    const { result } = await mount();
+    act(() => result.current.search.setQuery('ober'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS);
+    act(() => result.current.search.setQuery('oberpf'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS);
+    expect(repo.catalog.mock.calls.map(([q]) => q)).toEqual(['ober', 'oberpf']);
+    expect(repo.catalog.mock.calls[0][1]?.aborted).toBe(true);
+
+    first.resolve([OBERBAYERN_HIT, HIT]);
+    await settle();
+    expect(result.current.search).toMatchObject({ hits: null, searching: true });
+
+    second.resolve([HIT]);
+    await settle();
+    expect(result.current.search).toMatchObject({ query: 'oberpf', hits: [HIT], searching: false });
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-008: says when Geofabrik cannot be reached, until the words are too short to search', async () => {
+    repo.catalog.mockRejectedValueOnce(apiError('Geofabrik did not answer', 'catalog_unavailable'));
+    const { result } = await mount();
+    act(() => result.current.search.setQuery('oberpfalz'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS);
+    expect(result.current.search).toMatchObject({
+      hits: null,
+      searching: false,
+      error: 'Geofabrik cannot be reached right now. Try again later.',
+    });
+
+    act(() => result.current.search.setQuery('o'));
+    expect(result.current.search.error).toBeNull();
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-009: adding a region clears the search, says so and lists it', async () => {
+    repo.list.mockResolvedValueOnce([READY]).mockResolvedValue([READY, QUEUED]);
+    const { result } = await mount();
+    act(() => result.current.search.setQuery('oberpfalz'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS);
+    expect(result.current.added.has('oberpfalz')).toBe(false);
+
+    await act(() => result.current.add('oberpfalz'));
+    expect(repo.add).toHaveBeenCalledWith('oberpfalz');
+    expect(toast.success).toHaveBeenCalledWith('Region added. TREK reads it in the background.');
+    expect(toast.error).not.toHaveBeenCalled();
+    expect(result.current.search).toMatchObject({ query: '', hits: null, searching: false });
+    expect(repo.list).toHaveBeenCalledTimes(2);
+    expect(result.current.regions).toEqual([READY, QUEUED]);
+    expect(result.current.added.has('oberpfalz')).toBe(true);
+    expect(result.current.busyId).toBeNull();
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-010: a refused add shows the server message and keeps the words typed', async () => {
+    repo.add.mockRejectedValueOnce(apiError('Geofabrik has no region oberpfalz-nord', 'unknown_region'));
+    const { result } = await mount();
+    act(() => result.current.search.setQuery('oberpfalz-nord'));
+    await act(() => result.current.add('oberpfalz-nord'));
+    expect(toast.error).toHaveBeenCalledWith('Geofabrik has no region oberpfalz-nord');
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(result.current.search.query).toBe('oberpfalz-nord');
+    expect(repo.list).toHaveBeenCalledTimes(2);
+    expect(result.current.busyId).toBeNull();
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-011: reading a region again asks quietly and reloads the list; a failure says why', async () => {
+    const { result } = await mount();
+    await act(() => result.current.refresh('oberbayern'));
+    expect(repo.refresh).toHaveBeenCalledWith('oberbayern');
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(repo.list).toHaveBeenCalledTimes(2);
+
+    repo.refresh.mockRejectedValueOnce(new PaddleRegionsOfflineError());
+    await act(() => result.current.refresh('oberbayern'));
+    expect(toast.error).toHaveBeenCalledWith(OFFLINE);
+    expect(repo.list).toHaveBeenCalledTimes(3);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-012: removes a region only once the removal is confirmed', async () => {
+    const { result } = await mount();
+    act(() => result.current.askRemove(READY));
+    expect(result.current.removing).toEqual(READY);
+    act(() => result.current.cancelRemove());
+    expect(result.current.removing).toBeNull();
+    act(() => result.current.confirmRemove());
+    expect(repo.remove).not.toHaveBeenCalled();
+    expect(repo.list).toHaveBeenCalledTimes(1);
+
+    repo.list.mockResolvedValue([]);
+    act(() => result.current.askRemove(READY));
+    act(() => result.current.confirmRemove());
+    expect(repo.remove).toHaveBeenCalledWith('oberbayern');
+    expect(result.current).toMatchObject({ removing: null, busyId: 'oberbayern' });
+
+    await settle();
+    expect(toast.success).toHaveBeenCalledWith('Region removed');
+    expect(result.current).toMatchObject({ busyId: null, regions: [] });
+    expect(result.current.added.size).toBe(0);
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-013: while one action runs, a second one is ignored', async () => {
+    const reading = deferred<PaddleRegion>();
+    repo.refresh.mockReturnValueOnce(reading.promise);
+    const { result } = await mount();
+    act(() => {
+      void result.current.refresh('oberbayern');
+    });
+    expect(result.current.busyId).toBe('oberbayern');
+
+    await act(() => result.current.add('oberpfalz'));
+    act(() => result.current.askRemove(READY));
+    act(() => result.current.confirmRemove());
+    expect(repo.add).not.toHaveBeenCalled();
+    expect(repo.remove).not.toHaveBeenCalled();
+    expect(repo.refresh).toHaveBeenCalledTimes(1);
+    expect(result.current.busyId).toBe('oberbayern');
+
+    reading.resolve(READY);
+    await settle();
+    expect(result.current.busyId).toBeNull();
+    expect(repo.list).toHaveBeenCalledTimes(2);
+
+    await act(() => result.current.add('oberpfalz'));
+    expect(repo.add).toHaveBeenCalledWith('oberpfalz');
+  });
+
+  it('FE-HOOK-PADDLEREGIONS-014: offline it asks nothing and shows no spinner, and picks up again with the connection', async () => {
+    repo.list.mockResolvedValue([QUEUED]);
+    setForcedOffline(true);
+    const { result } = await mount();
+    expect(result.current).toMatchObject({ offline: true, loading: false, regions: [], error: null });
+    act(() => result.current.search.setQuery('oberpfalz'));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS * 3);
+    expect(repo.list).not.toHaveBeenCalled();
+    expect(repo.catalog).not.toHaveBeenCalled();
+    expect(result.current.search).toMatchObject({ hits: null, searching: false, error: null });
+
+    act(() => setForcedOffline(false));
+    await settle(CATALOG_SEARCH_DEBOUNCE_MS);
+    expect(result.current.offline).toBe(false);
+    expect(repo.list).toHaveBeenCalledTimes(1);
+    expect(repo.catalog).toHaveBeenCalledWith('oberpfalz', expect.any(AbortSignal));
+    expect(result.current.search.hits).toEqual([HIT]);
+
+    act(() => setForcedOffline(true));
+    await settle(PADDLE_REGIONS_POLL_MS * 4);
+    expect(repo.list).toHaveBeenCalledTimes(1);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.search.hits).toBeNull();
+
+    act(() => setForcedOffline(false));
+    await settle();
+    expect(repo.list).toHaveBeenCalledTimes(2);
+  });
+});
+
+describe('paddleRegionsModel', () => {
+  it('FE-PADDLEREGIONSMODEL-001: waits on queued and importing reads, tones the badge by status and rounds the progress', () => {
+    const statuses: PaddleRegion['status'][] = ['queued', 'importing', 'ready', 'failed'];
+    expect(statuses.map((status) => isReading({ status }))).toEqual([true, true, false, false]);
+    expect(statuses.map((status) => regionStatusTone(status))).toEqual(['neutral', 'accent', 'success', 'danger']);
+    expect(progressPercent({ progress: null })).toBeNull();
+    expect(progressPercent({ progress: { phase: 'download', fraction: null } })).toBeNull();
+    expect(progressPercent({ progress: { phase: 'read', fraction: 0.456 } })).toBe(46);
+    expect(progressPercent({ progress: { phase: 'read', fraction: 1 } })).toBe(100);
+  });
+});

client/src/components/Admin/paddle/usePaddleRegionsAdmin.ts

@@ -0,0 +1,189 @@
+import type { PaddleRegion, PaddleRegionCatalogEntry, PaddleRegionPending } from '@trek/shared';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNetworkMode } from '../../../hooks/useNetworkMode';
+import { useTranslation } from '../../../i18n';
+import { paddleRegionErrorCode, paddleRegionRepo } from '../../../repo/paddleRegionRepo';
+import { useAddonStore } from '../../../store/addonStore';
+import { getApiErrorMessage } from '../../../types';
+import { useToast } from '../../shared/Toast';
+import { isReading } from './paddleRegionsModel';
+import { usePaddleAutoLoad } from './usePaddleAutoLoad';
+
+/** How often the list is asked again while a region waits or is read. */
+export const PADDLE_REGIONS_POLL_MS = import.meta.env.MODE === 'test' ? 50 : 3000;
+/** How long typing rests before Geofabrik's list is searched. */
+export const CATALOG_SEARCH_DEBOUNCE_MS = import.meta.env.MODE === 'test' ? 10 : 350;
+
+type Translate = ReturnType<typeof useTranslation>['t'];
+
+function errorText(t: Translate, err: unknown): string {
+  const code = paddleRegionErrorCode(err);
+  if (code === 'offline') return t('admin.paddleRegions.offline');
+  if (code === 'catalog_unavailable') return t('admin.paddleRegions.catalogUnavailable');
+  return getApiErrorMessage(err, t('common.error'));
+}
+
+/**
+ * The regions as the server holds them, with those paddlers asked for, asked
+ * again every few seconds while any of them is read, and on `reload` after a
+ * change. Every answer is set
+ * from the request's own callback, so a slow one never overwrites a newer.
+ */
+function useRegionList(active: boolean, offline: boolean, t: Translate) {
+  const [regions, setRegions] = useState<PaddleRegion[]>([]);
+  const [requests, setRequests] = useState<PaddleRegionPending[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [asked, setAsked] = useState(0);
+  useEffect(() => {
+    if (!active || offline) return;
+    let cancelled = false;
+    paddleRegionRepo.list().then(
+      (list) => {
+        if (cancelled) return;
+        setRegions(list.regions);
+        setRequests(list.requests);
+        setError(null);
+        setLoaded(true);
+      },
+      (err: unknown) => {
+        if (cancelled) return;
+        setError(errorText(t, err));
+        setLoaded(true);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [active, offline, t, asked]);
+  const reading = regions.some(isReading);
+  useEffect(() => {
+    if (!active || offline || !reading) return;
+    const timer = window.setInterval(() => setAsked((n) => n + 1), PADDLE_REGIONS_POLL_MS);
+    return () => window.clearInterval(timer);
+  }, [active, offline, reading]);
+  const reload = useCallback(() => setAsked((n) => n + 1), []);
+  return { regions, requests, loading: !loaded && !offline, error, reload };
+}
+
+/** Geofabrik's list searched as the admin types, the last search winning. */
+function useCatalogSearch(offline: boolean, t: Translate) {
+  const [query, setQuery] = useState('');
+  const [result, setResult] = useState<{
+    needle: string;
+    hits: PaddleRegionCatalogEntry[] | null;
+    error: string | null;
+  } | null>(null);
+  const needle = query.trim();
+  const wanted = !offline && needle.length >= 2;
+  useEffect(() => {
+    if (!wanted) return;
+    const controller = new AbortController();
+    const timer = window.setTimeout(() => {
+      paddleRegionRepo
+        .catalog(needle, controller.signal)
+        .then((hits) => {
+          if (!controller.signal.aborted) setResult({ needle, hits, error: null });
+        })
+        .catch((err: unknown) => {
+          if (!controller.signal.aborted) setResult({ needle, hits: null, error: errorText(t, err) });
+        });
+    }, CATALOG_SEARCH_DEBOUNCE_MS);
+    return () => {
+      controller.abort();
+      window.clearTimeout(timer);
+    };
+  }, [needle, wanted, t]);
+  // An answer counts only for the words it was asked for.
+  const current = wanted && result?.needle === needle ? result : null;
+  return { query, setQuery, hits: current?.hits ?? null, searching: wanted && !current, error: current?.error ?? null };
+}
+
+/**
+ * PAD-05A in the admin area: the regions TREK reads paddle data for, a search
+ * in Geofabrik's list to add one, reading a region again and removing it
+ * after a confirmation. Shown only while the Tours addon is on; the status of
+ * a read follows without reloading the page. PAD-11C: how TREK loads regions
+ * for paddlers by itself, and the regions they asked for, to load or decline.
+ */
+export function usePaddleRegionsAdmin() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const { offline } = useNetworkMode();
+  const toursOn = useAddonStore((state) => state.isEnabled('tours'));
+  const list = useRegionList(toursOn, offline, t);
+  const autoLoad = usePaddleAutoLoad(toursOn, offline);
+  const search = useCatalogSearch(offline, t);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [removing, setRemoving] = useState<PaddleRegion | null>(null);
+  const pending = useRef(false);
+  const { reload } = list;
+
+  const run = useCallback(
+    async (id: string, action: () => Promise<unknown>, done?: string) => {
+      if (pending.current) return;
+      pending.current = true;
+      setBusyId(id);
+      try {
+        await action();
+        if (done) toast.success(done);
+      } catch (err) {
+        toast.error(errorText(t, err));
+      } finally {
+        pending.current = false;
+        setBusyId(null);
+        reload();
+      }
+    },
+    [reload, t, toast]
+  );
+
+  const { setQuery } = search;
+  const add = useCallback(
+    (id: string) =>
+      run(
+        id,
+        async () => {
+          await paddleRegionRepo.add(id);
+          setQuery('');
+        },
+        t('admin.paddleRegions.toast.added')
+      ),
+    [run, setQuery, t]
+  );
+  const refresh = useCallback((id: string) => run(id, () => paddleRegionRepo.refresh(id)), [run]);
+  /** A paddler's request let through: the region is added like any other. */
+  const approve = useCallback(
+    (id: string) => run(id, () => paddleRegionRepo.add(id), t('admin.paddleRegions.toast.added')),
+    [run, t]
+  );
+  const decline = useCallback((id: string) => run(id, () => paddleRegionRepo.decline(id)), [run]);
+  const confirmRemove = useCallback(() => {
+    const region = removing;
+    setRemoving(null);
+    if (region) void run(region.id, () => paddleRegionRepo.remove(region.id), t('admin.paddleRegions.toast.removed'));
+  }, [removing, run, t]);
+  const added = useMemo(() => new Set(list.regions.map((region) => region.id)), [list.regions]);
+
+  return {
+    toursOn,
+    offline,
+    regions: list.regions,
+    requests: list.requests,
+    autoLoad,
+    loading: list.loading,
+    error: list.error,
+    retry: reload,
+    search,
+    added,
+    busyId,
+    add,
+    refresh,
+    approve,
+    decline,
+    removing,
+    askRemove: setRemoving,
+    cancelRemove: () => setRemoving(null),
+    confirmRemove,
+  };
+}

client/src/components/Admin/usePermissionsAdmin.ts

@@ -24,7 +24,7 @@ export const CATEGORIES = [
   { id: 'members', keys: ['member_manage'] },
   { id: 'files', keys: ['file_upload', 'file_edit', 'file_delete'] },
   { id: 'content', keys: ['place_edit', 'day_edit', 'reservation_edit'] },
-  { id: 'extras', keys: ['budget_edit', 'packing_edit', 'collab_edit', 'share_manage'] },
+  { id: 'extras', keys: ['budget_edit', 'packing_edit', 'collab_edit', 'share_manage', 'journal_link'] },
 ];
 
 /**

client/src/components/Atlas/tourActivity/AtlasTourActivityPane.test.tsx

@@ -0,0 +1,150 @@
+// FE-STA2-PANE-001 to FE-STA2-PANE-006
+// STA-02: the Atlas tab of the user's own tour activities: the distance large
+// with how many tours at its corner, the climb, the types, what the numbers
+// rest on, and the full list in a dialog.
+import userEvent from '@testing-library/user-event';
+import { summarizeTourActivities, type TourActivityStatsEntry, type TourActivityStatsResponse } from '@trek/shared';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildSettings } from '../../../../tests/helpers/factories';
+import { render, screen } from '../../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { useSettingsStore } from '../../../store/settingsStore';
+import { AtlasTourActivityPane } from './AtlasTourActivityPane';
+import type { TourActivityStats } from './useTourActivityStats';
+
+const hook = vi.hoisted(() => ({ current: null as unknown, active: [] as boolean[] }));
+vi.mock('./useTourActivityStats', () => ({
+  useTourActivityStats: (active: boolean) => {
+    hook.active.push(active);
+    return hook.current;
+  },
+}));
+
+const TODAY = '2026-10-20';
+
+function entry(overrides: Partial<TourActivityStatsEntry> = {}): TourActivityStatsEntry {
+  return {
+    place_id: 1,
+    name: 'Ridge',
+    tour_type: 'hike',
+    trip: { id: 5, title: 'Alps' },
+    derived_from_place_id: null,
+    date: '2026-07-02',
+    basis: 'plan',
+    track: null,
+    day_count: 1,
+    distance_km: 12,
+    ascent_m: 800,
+    descent_m: 790,
+    excluded: false,
+    ...overrides,
+  };
+}
+
+function statsOf(data: TourActivityStatsResponse | null, overrides: Partial<TourActivityStats> = {}) {
+  const stats: TourActivityStats = {
+    status: data ? 'ready' : 'loading',
+    data,
+    summary: data ? summarizeTourActivities(data.entries, { today: TODAY }) : null,
+    period: 'all',
+    setPeriod: vi.fn(),
+    periods: ['all', 'thisYear', 'last12'],
+    type: 'all',
+    setType: vi.fn(),
+    types: ['all', 'hike', 'kayak'],
+    pending: new Set(),
+    setExcluded: vi.fn().mockResolvedValue(undefined),
+    retry: vi.fn(),
+    ...overrides,
+  };
+  hook.current = stats;
+  return stats;
+}
+
+const data: TourActivityStatsResponse = {
+  entries: [
+    entry(),
+    entry({ place_id: 2, name: 'Summit', date: '2026-08-01', distance_km: 20.5, ascent_m: 1200, descent_m: 1200 }),
+    entry({
+      place_id: 3,
+      name: 'Lake',
+      tour_type: 'kayak',
+      basis: 'track',
+      track: { place_id: 9, name: 'Watch' },
+      distance_km: 8,
+      ascent_m: null,
+      descent_m: null,
+    }),
+  ],
+  uncounted: { unassigned: 0, undated: 1 },
+};
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  hook.active = [];
+  seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'metric' }) });
+});
+
+describe('AtlasTourActivityPane', () => {
+  it('FE-STA2-PANE-001: follows whether the tab is shown, silent before, loading until the read is there', () => {
+    statsOf(null, { status: 'idle' });
+    const { rerender } = render(<AtlasTourActivityPane active={false} />);
+    expect(hook.active).toEqual([false]);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    statsOf(null);
+    rerender(<AtlasTourActivityPane active />);
+    expect(hook.active).toEqual([false, true]);
+    expect(screen.getByRole('status')).toHaveTextContent('Loading');
+  });
+
+  it('FE-STA2-PANE-002: shows the distance large with the tour count at its corner, and the climb', () => {
+    statsOf(data);
+    render(<AtlasTourActivityPane active />);
+    expect(screen.getByTestId('atlas-tour-activity-distance')).toHaveTextContent('40.5km');
+    expect(screen.getByTestId('atlas-tour-activity-count')).toHaveTextContent('3');
+    expect(screen.getByTestId('atlas-tour-activity-ascent')).toHaveTextContent('2000m');
+    expect(screen.getByTestId('atlas-tour-activity-type-hike')).toHaveTextContent('2');
+    expect(screen.getByTestId('atlas-tour-activity-type-kayak')).toHaveTextContent('8 km');
+  });
+
+  it('FE-STA2-PANE-003: says what the numbers rest on and what does not count', () => {
+    statsOf(data);
+    render(<AtlasTourActivityPane active />);
+    expect(screen.getByTestId('tour-activity-basis-plan')).toHaveTextContent('Planned2');
+    expect(screen.getByTestId('tour-activity-basis-track')).toHaveTextContent('Recorded1');
+    expect(screen.getByTestId('tour-activity-undated')).toHaveTextContent('1');
+  });
+
+  it('FE-STA2-PANE-004: one type chosen leaves the type columns out; nothing done says so', () => {
+    statsOf(data, { type: 'hike', summary: summarizeTourActivities(data.entries, { today: TODAY, type: 'hike' }) });
+    const { rerender } = render(<AtlasTourActivityPane active />);
+    expect(screen.queryByTestId('atlas-tour-activity-type-hike')).not.toBeInTheDocument();
+
+    statsOf(data, { summary: summarizeTourActivities(data.entries, { today: TODAY, from: '2027-01-01' }) });
+    rerender(<AtlasTourActivityPane active />);
+    expect(screen.getByText('No completed tours in this period')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Show tours' })).not.toBeInTheDocument();
+  });
+
+  it('FE-STA2-PANE-005: the full list opens in the dialog', async () => {
+    statsOf(data);
+    const user = userEvent.setup();
+    render(<AtlasTourActivityPane active />);
+    await user.click(screen.getByRole('button', { name: 'Show tours' }));
+    expect(screen.getByRole('heading', { name: 'My tour activities' })).toBeInTheDocument();
+    expect(screen.getByTestId('tour-activity-list')).toBeInTheDocument();
+  });
+
+  it('FE-STA2-PANE-006: offline and failed reads say so, a failed one with a retry', async () => {
+    statsOf(null, { status: 'offline' });
+    const { rerender } = render(<AtlasTourActivityPane active />);
+    expect(screen.getByText(/needs a connection/i)).toBeInTheDocument();
+
+    const failed = statsOf(null, { status: 'error' });
+    rerender(<AtlasTourActivityPane active />);
+    expect(screen.getByRole('alert')).toHaveTextContent('Tour activities could not be loaded');
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Try again' }));
+    expect(failed.retry).toHaveBeenCalled();
+  });
+});

client/src/components/Atlas/tourActivity/AtlasTourActivityPane.tsx

@@ -0,0 +1,223 @@
+import type { TourActivitySummary } from '@trek/shared';
+import { Footprints, ListOrdered } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from '../../../i18n';
+import type { DistanceUnit } from '../../../types';
+import { fs } from '../../shared/DialogShell';
+import { Tooltip } from '../../shared/Tooltip';
+import { CardAction, InfoDot } from '../../Tours/tourParts';
+import { ActivityFilters, ActivityStatusLine, BasisBadges, UncountedBadges } from './tourActivityParts';
+import { distanceReading, heightReading, typeIcon, typeLabel, useDistanceUnit } from './tourActivityReading';
+import { TourActivityStatsDialog } from './TourActivityStatsDialog';
+import { splitMeasure } from './tourActivityStatsModel';
+import { useTourActivityStats, type TourActivityStats } from './useTourActivityStats';
+
+/** The wash the hero tile sits on, as the Atlas numbers do: the text colour, faintly, over the glass. */
+const HERO_TINT = 'color-mix(in srgb, var(--text-primary) 7%, transparent)';
+/** How many types the strip names before the dialog takes over. */
+const STRIP_TYPES = 3;
+const EYEBROW = 'mt-1.5 whitespace-nowrap font-semibold uppercase tracking-wide text-content-faint';
+
+function Divider() {
+  return <span aria-hidden="true" className="mx-3 my-3 w-0.5 flex-none rounded-full bg-edge-faint" />;
+}
+
+/**
+ * The distance of the period, large, with how many tours at its corner; the
+ * tour count stands in when no tour knows its distance.
+ */
+function Hero({ summary, unit }: { summary: TourActivitySummary; unit: DistanceUnit }) {
+  const { t } = useTranslation();
+  const reading = distanceReading(summary.totals, unit);
+  const shown = reading ? splitMeasure(reading.text) : { value: String(summary.totals.count), unit: '' };
+  const countLabel = `${t('tours.mode.tours')}: ${summary.totals.count}`;
+  return (
+    <div
+      className="relative mx-2 my-2 flex flex-col justify-center rounded-xl px-5 py-4"
+      style={{ background: HERO_TINT }}
+    >
+      <div className="flex items-baseline gap-1.5" data-testid="atlas-tour-activity-distance">
+        <span className="font-black tabular-nums leading-none text-content" style={fs(40, 'title')}>
+          {shown.value}
+        </span>
+        {shown.unit && (
+          <span className="font-medium text-content-muted" style={fs(14, 'body')}>
+            {shown.unit}
+          </span>
+        )}
+      </div>
+      <span className={EYEBROW} style={fs(9)}>
+        {reading ? t('tours.detail.distance') : t('tours.mode.tours')}
+      </span>
+      {reading && (
+        <Tooltip label={countLabel}>
+          <span
+            aria-label={countLabel}
+            data-testid="atlas-tour-activity-count"
+            className="absolute -end-2 -top-2 inline-flex h-[22px] items-center gap-1 rounded-full bg-surface-card px-2 font-geist font-semibold tabular-nums text-content shadow-sm ring-1 ring-inset ring-edge-faint"
+            style={fs(11)}
+          >
+            <Footprints size={11} strokeWidth={2.2} className="flex-none text-content-muted" />
+            {summary.totals.count}
+          </span>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+/** A height sum as the Atlas numbers stand: the value, its unit, and what it is below. */
+function Figure({ label, text, testId }: { label: string; text: string; testId: string }) {
+  const { value, unit } = splitMeasure(text);
+  return (
+    <div className="flex flex-none flex-col items-center justify-center px-3 py-4" data-testid={testId}>
+      <span className="flex items-baseline gap-1">
+        <span className="font-black tabular-nums leading-none text-content" style={fs(24, 'subtitle')}>
+          {value}
+        </span>
+        <span className="font-medium text-content-muted" style={fs(11, 'body')}>
+          {unit}
+        </span>
+      </span>
+      <span className={EYEBROW} style={fs(9)}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
+/** The types of the period, the most tours first: each an icon with its count at the corner, its distance below. */
+function TypeColumns({ summary, unit }: { summary: TourActivitySummary; unit: DistanceUnit }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-none items-center gap-4 px-2 py-3">
+      {summary.types.slice(0, STRIP_TYPES).map((scope) => {
+        const Icon = typeIcon(scope.type);
+        const distance = distanceReading(scope, unit);
+        const label = `${typeLabel(scope.type, t)}: ${scope.count}${distance ? `, ${distance.text}` : ''}`;
+        return (
+          <Tooltip key={scope.type} label={label}>
+            <span
+              aria-label={label}
+              className="flex flex-col items-center gap-1.5"
+              data-testid={`atlas-tour-activity-type-${scope.type}`}
+            >
+              <span className="relative">
+                <span className="grid h-8 w-8 place-items-center rounded-full bg-surface-card text-content-secondary shadow-sm ring-1 ring-inset ring-edge-faint">
+                  <Icon size={15} strokeWidth={1.9} />
+                </span>
+                <span
+                  className="absolute -end-1.5 -top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-accent px-1 font-geist font-semibold tabular-nums text-accent-text ring-2 ring-surface-card"
+                  style={fs(9)}
+                >
+                  {scope.count}
+                </span>
+              </span>
+              {distance && (
+                <span
+                  className="whitespace-nowrap font-semibold tabular-nums text-content-secondary"
+                  style={fs(11, 'body')}
+                >
+                  {distance.text}
+                </span>
+              )}
+            </span>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
+
+/** What the sums rest on, what does not count, and the way into the full list. */
+interface StripProps {
+  stats: TourActivityStats;
+  summary: TourActivitySummary;
+  onOpen: () => void;
+}
+
+function SideColumn({ stats, summary, onOpen }: StripProps) {
+  const { t } = useTranslation();
+  const uncounted = stats.data?.uncounted ?? { unassigned: 0, undated: 0 };
+  return (
+    <div className="flex flex-none flex-col items-start justify-center gap-1.5 px-3 py-3">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <BasisBadges byBasis={summary.totals.byBasis} />
+        <InfoDot label={t('tours.stats.title')} description={t('tours.stats.basisInfo')} />
+      </div>
+      <div className="flex flex-wrap items-center gap-1.5">
+        <UncountedBadges upcoming={summary.upcoming} {...uncounted} />
+      </div>
+      {summary.done.length > 0 && (
+        <CardAction icon={<ListOrdered size={13} strokeWidth={2.2} />} onClick={onOpen}>
+          {t('tours.stats.showTours')}
+        </CardAction>
+      )}
+    </div>
+  );
+}
+
+/** The numbers of the period, or why there are none, with the filters before them. */
+function Strip({ stats, summary, onOpen }: StripProps) {
+  const { t } = useTranslation();
+  const unit = useDistanceUnit();
+  const ascent = heightReading(summary.totals.ascentM, unit);
+  const descent = heightReading(summary.totals.descentM, unit);
+  const counted = summary.totals.count > 0;
+  return (
+    <>
+      <div className="flex flex-none flex-col items-start justify-center gap-1.5 px-3 py-3">
+        <ActivityFilters stats={stats} quiet />
+      </div>
+      {counted ? (
+        <>
+          <Hero summary={summary} unit={unit} />
+          {ascent && <Figure label={t('tours.detail.ascent')} text={ascent.text} testId="atlas-tour-activity-ascent" />}
+          {descent && (
+            <Figure label={t('tours.detail.descent')} text={descent.text} testId="atlas-tour-activity-descent" />
+          )}
+          {stats.type === 'all' && summary.types.length > 1 && (
+            <>
+              <Divider />
+              <TypeColumns summary={summary} unit={unit} />
+            </>
+          )}
+        </>
+      ) : (
+        <p className="m-0 flex max-w-[260px] items-center px-4 py-5 text-content-muted" style={fs(12, 'body')}>
+          {t(stats.data?.entries.length ? 'tours.stats.none' : 'tours.stats.empty')}
+        </p>
+      )}
+      <Divider />
+      <SideColumn stats={stats} summary={summary} onOpen={onOpen} />
+    </>
+  );
+}
+
+/**
+ * STA-02: the Atlas tab of the user's own tour activities: the period and type,
+ * the distance done with how many tours at its corner, the climb, the types,
+ * and what the numbers rest on (the trip planning, or recorded tracks where
+ * linked). The full list, where a tour can be left out, opens in a dialog. The
+ * read waits until the tab is first shown.
+ */
+export function AtlasTourActivityPane({ active, maxWidth }: { active: boolean; maxWidth?: number }) {
+  const stats = useTourActivityStats(active);
+  const [open, setOpen] = useState(false);
+  return (
+    <div
+      className="flex w-full items-stretch justify-center overflow-x-auto px-2"
+      style={{ maxWidth }}
+      data-testid="atlas-tour-activity"
+    >
+      {stats.summary ? (
+        <Strip stats={stats} summary={stats.summary} onOpen={() => setOpen(true)} />
+      ) : (
+        <div className="flex items-center px-6 py-5">
+          <ActivityStatusLine stats={stats} />
+        </div>
+      )}
+      <TourActivityStatsDialog stats={stats} open={open} onClose={() => setOpen(false)} />
+    </div>
+  );
+}

client/src/components/Atlas/tourActivity/TourActivityEntryRow.tsx

@@ -0,0 +1,159 @@
+import type { TourActivityStatsEntry } from '@trek/shared';
+import { Ban, Briefcase, CalendarDays, Footprints, Loader2, Repeat, RotateCcw } from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { useTranslation } from '../../../i18n';
+import { formatDate } from '../../../utils/formatters';
+import { formatDistance, formatElevation } from '../../../utils/units';
+import { SoftPill, WhiteBadge } from '../../Planner/planParts';
+import { fs } from '../../shared/DialogShell';
+import { Tooltip } from '../../shared/Tooltip';
+import { EntryTile, MeasurePills } from './tourActivityParts';
+import { useDistanceUnit } from './tourActivityReading';
+
+const ROW_BADGE_ICON = 'flex-none text-content-faint';
+
+/** What the entry's values rest on, as a pill: the plan, or the track that replaced it, named in the tooltip. */
+function BasisPill({ entry }: { entry: TourActivityStatsEntry }) {
+  const { t } = useTranslation();
+  const track = entry.basis === 'track';
+  const hint = track
+    ? t('tours.stats.basisTrackHint', { name: entry.track?.name ?? '' })
+    : t('tours.stats.basisPlanHint');
+  return (
+    <Tooltip label={hint}>
+      <span
+        className="inline-flex"
+        aria-label={hint}
+        data-testid={`tour-activity-basis-${entry.basis}-${entry.place_id}`}
+      >
+        <SoftPill
+          tone={track ? 'success' : 'neutral'}
+          icon={
+            track ? (
+              <Footprints size={10} strokeWidth={2.2} className="flex-none" />
+            ) : (
+              <CalendarDays size={10} strokeWidth={2.2} className={ROW_BADGE_ICON} />
+            )
+          }
+        >
+          {t(track ? 'tours.stats.basisTrack' : 'tours.stats.basisPlan')}
+        </SoftPill>
+      </span>
+    </Tooltip>
+  );
+}
+
+/** The day it counts on, the trip it is in (a way into that trip), and how many days the plan has it on. */
+function EntryFacts({ entry }: { entry: TourActivityStatsEntry }) {
+  const { t, locale } = useTranslation();
+  const navigate = useNavigate();
+  return (
+    <span className="mt-1 flex min-w-0 flex-wrap items-center gap-1">
+      <WhiteBadge icon={<CalendarDays size={10} strokeWidth={2.2} className={ROW_BADGE_ICON} />}>
+        {formatDate(entry.date, locale) ?? entry.date}
+      </WhiteBadge>
+      <Tooltip label={t('tours.stats.openTrip')}>
+        <button
+          type="button"
+          onClick={() => void navigate(`/trips/${entry.trip.id}`)}
+          className="inline-flex min-w-0 max-w-[220px] rounded-full transition-opacity hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+        >
+          <WhiteBadge
+            className="min-w-0 max-w-full"
+            icon={<Briefcase size={10} strokeWidth={2.2} className={ROW_BADGE_ICON} />}
+          >
+            <span className="truncate">{entry.trip.title}</span>
+          </WhiteBadge>
+        </button>
+      </Tooltip>
+      {entry.day_count > 1 && (
+        <Tooltip label={t('tours.stats.multiDayHint')}>
+          <span className="inline-flex" aria-label={t('tours.stats.multiDayHint')}>
+            <WhiteBadge icon={<Repeat size={10} strokeWidth={2.2} className={ROW_BADGE_ICON} />}>
+              {entry.day_count}
+            </WhiteBadge>
+          </span>
+        </Tooltip>
+      )}
+      <BasisPill entry={entry} />
+      {entry.excluded && <SoftPill caps>{t('tours.stats.excluded')}</SoftPill>}
+    </span>
+  );
+}
+
+/** The round button that leaves the tour out, or counts it again; named by its tooltip. */
+function ExcludeToggle({
+  entry,
+  busy,
+  onToggle,
+}: {
+  entry: TourActivityStatsEntry;
+  busy: boolean;
+  onToggle: () => void;
+}) {
+  const { t } = useTranslation();
+  const label = entry.excluded ? t('tours.stats.include') : t('tours.stats.exclude');
+  const hint = entry.excluded ? label : `${label}: ${t('tours.stats.excludeHint')}`;
+  let icon = <Ban size={14} strokeWidth={2} />;
+  if (busy) icon = <Loader2 size={14} strokeWidth={2} className="animate-spin" />;
+  else if (entry.excluded) icon = <RotateCcw size={14} strokeWidth={2} />;
+  return (
+    <Tooltip label={hint}>
+      <button
+        type="button"
+        onClick={onToggle}
+        disabled={busy}
+        aria-label={label}
+        aria-pressed={entry.excluded}
+        data-testid={`tour-activity-toggle-${entry.place_id}`}
+        className="grid h-8 w-8 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm ring-1 ring-inset ring-edge-faint transition-colors hover:text-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent disabled:cursor-default disabled:opacity-50"
+      >
+        {icon}
+      </button>
+    </Tooltip>
+  );
+}
+
+/**
+ * STA-02: one tour of the user's activities: its type, name and where it
+ * counts, its distance and climb, and the switch to leave it out. A tour left
+ * out stays in the list, dimmed, so it can be counted again in place.
+ */
+export function TourActivityEntryRow({
+  entry,
+  busy,
+  onToggleExcluded,
+}: {
+  entry: TourActivityStatsEntry;
+  busy: boolean;
+  onToggleExcluded: (entry: TourActivityStatsEntry) => void;
+}) {
+  const unit = useDistanceUnit();
+  const key = entry.track ? `${entry.place_id}-${entry.track.place_id}` : String(entry.place_id);
+  return (
+    <li
+      data-testid={`tour-activity-row-${key}`}
+      className="flex min-w-0 items-center gap-3 rounded-[12px] px-2.5 py-2 transition-colors hover:bg-surface-hover"
+    >
+      <span
+        className={`flex min-w-0 flex-1 items-center gap-3 transition-opacity ${entry.excluded ? 'opacity-50' : ''}`}
+      >
+        <EntryTile entry={entry} />
+        <span className="min-w-0 flex-1">
+          <span className="block truncate font-semibold text-content" style={fs(13, 'body')}>
+            {entry.name}
+          </span>
+          <EntryFacts entry={entry} />
+        </span>
+        <span className="flex flex-none flex-col items-end gap-1">
+          <MeasurePills
+            distance={entry.distance_km === null ? null : formatDistance(entry.distance_km, unit)}
+            ascent={entry.ascent_m === null ? null : formatElevation(entry.ascent_m, unit)}
+            testId={`tour-activity-${key}`}
+          />
+        </span>
+      </span>
+      <ExcludeToggle entry={entry} busy={busy} onToggle={() => onToggleExcluded(entry)} />
+    </li>
+  );
+}

client/src/components/Atlas/tourActivity/TourActivityStatsDialog.test.tsx

@@ -0,0 +1,177 @@
+// FE-STA2-DIALOG-001 to FE-STA2-DIALOG-008
+// STA-02: the full list of the user's tour activities: the sums with what they
+// rest on, the split by type, each tour with its basis and a switch to leave it
+// out (dimmed, never hidden), and the way into its trip.
+import userEvent from '@testing-library/user-event';
+import { summarizeTourActivities, type TourActivityStatsEntry, type TourActivityStatsResponse } from '@trek/shared';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildSettings } from '../../../../tests/helpers/factories';
+import { render, screen, within } from '../../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { useSettingsStore } from '../../../store/settingsStore';
+import { TourActivityStatsDialog } from './TourActivityStatsDialog';
+import type { TourActivityStats } from './useTourActivityStats';
+
+const navigate = vi.hoisted(() => vi.fn());
+vi.mock('react-router', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('react-router')>()),
+  useNavigate: () => navigate,
+}));
+
+const TODAY = '2026-10-20';
+
+function entry(overrides: Partial<TourActivityStatsEntry> = {}): TourActivityStatsEntry {
+  return {
+    place_id: 1,
+    name: 'Ridge',
+    tour_type: 'hike',
+    trip: { id: 5, title: 'Alps' },
+    derived_from_place_id: null,
+    date: '2026-07-02',
+    basis: 'plan',
+    track: null,
+    day_count: 1,
+    distance_km: 12,
+    ascent_m: 800,
+    descent_m: 790,
+    excluded: false,
+    ...overrides,
+  };
+}
+
+function statsOf(
+  data: TourActivityStatsResponse | null,
+  overrides: Partial<TourActivityStats> = {}
+): TourActivityStats {
+  return {
+    status: data ? 'ready' : 'loading',
+    data,
+    summary: data ? summarizeTourActivities(data.entries, { today: TODAY }) : null,
+    period: 'all',
+    setPeriod: vi.fn(),
+    periods: ['all', 'thisYear', 'last12'],
+    type: 'all',
+    setType: vi.fn(),
+    types: ['all', 'hike', 'kayak'],
+    pending: new Set(),
+    setExcluded: vi.fn().mockResolvedValue(undefined),
+    retry: vi.fn(),
+    ...overrides,
+  };
+}
+
+const data: TourActivityStatsResponse = {
+  entries: [
+    entry(),
+    entry({
+      place_id: 2,
+      name: 'Lake',
+      tour_type: 'kayak',
+      date: '2026-08-01',
+      basis: 'track',
+      track: { place_id: 9, name: 'Watch export' },
+      distance_km: 8.5,
+      ascent_m: null,
+      descent_m: null,
+    }),
+    entry({ place_id: 3, name: 'Long trail', date: '2026-06-01', day_count: 3, distance_km: null }),
+    entry({ place_id: 4, name: 'Rained off', date: '2026-05-01', excluded: true }),
+    entry({ place_id: 5, name: 'Next week', date: '2026-10-27' }),
+  ],
+  uncounted: { unassigned: 2, undated: 0 },
+};
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'metric' }) });
+});
+
+describe('TourActivityStatsDialog', () => {
+  it('FE-STA2-DIALOG-001: shows the sums, at least where a tour lacks the distance, and what they rest on', () => {
+    render(<TourActivityStatsDialog stats={statsOf(data)} open onClose={vi.fn()} />);
+    expect(screen.getByRole('heading', { name: 'My tour activities' })).toBeInTheDocument();
+    expect(screen.getByText('≥ 20.5 km')).toBeInTheDocument();
+    expect(screen.getByTestId('tour-activity-basis-plan')).toHaveTextContent('2');
+    expect(screen.getByTestId('tour-activity-basis-track')).toHaveTextContent('1');
+    expect(screen.getByTestId('tour-activity-upcoming')).toHaveTextContent('1');
+    expect(screen.getByTestId('tour-activity-unassigned')).toHaveTextContent('2');
+    expect(screen.queryByTestId('tour-activity-undated')).not.toBeInTheDocument();
+  });
+
+  it('FE-STA2-DIALOG-002: splits by type, the count at the corner of each type', () => {
+    render(<TourActivityStatsDialog stats={statsOf(data)} open onClose={vi.fn()} />);
+    expect(within(screen.getByTestId('tour-activity-type-hike')).getByText('2')).toBeInTheDocument();
+    expect(screen.getByTestId('tour-activity-type-kayak-distance')).toHaveTextContent('8.5 km');
+    expect(screen.queryByTestId('tour-activity-type-kayak-ascent')).not.toBeInTheDocument();
+  });
+
+  it('FE-STA2-DIALOG-003: lists every done tour, newest first, with its basis; the one ahead is not there', () => {
+    render(<TourActivityStatsDialog stats={statsOf(data)} open onClose={vi.fn()} />);
+    const list = screen.getByTestId('tour-activity-list');
+    expect(within(list).getAllByRole('listitem')).toHaveLength(4);
+    expect(screen.queryByText('Next week')).not.toBeInTheDocument();
+    expect(screen.getByTestId('tour-activity-row-2-9')).toHaveTextContent('Recorded');
+    expect(screen.getByTestId('tour-activity-track-corner')).toBeInTheDocument();
+    expect(screen.getByTestId('tour-activity-row-1')).toHaveTextContent('Planned');
+    expect(
+      within(screen.getByTestId('tour-activity-row-3')).getByLabelText('Planned on several days, counted once')
+    ).toHaveTextContent('3');
+    expect(screen.queryByTestId('tour-activity-3-distance')).not.toBeInTheDocument();
+  });
+
+  it('FE-STA2-DIALOG-004: a tour left out stays listed and can be counted again, a counted one left out', async () => {
+    const stats = statsOf(data);
+    const user = userEvent.setup();
+    render(<TourActivityStatsDialog stats={stats} open onClose={vi.fn()} />);
+    expect(screen.getByTestId('tour-activity-row-4')).toHaveTextContent('Left out');
+    await user.click(screen.getByRole('button', { name: 'Count again' }));
+    expect(stats.setExcluded).toHaveBeenCalledWith(expect.objectContaining({ place_id: 4 }), false);
+    await user.click(within(screen.getByTestId('tour-activity-row-1')).getByRole('button', { name: 'Leave out' }));
+    expect(stats.setExcluded).toHaveBeenCalledWith(expect.objectContaining({ place_id: 1 }), true);
+  });
+
+  it('FE-STA2-DIALOG-005: a tour on its way to the server cannot be switched twice', () => {
+    render(<TourActivityStatsDialog stats={statsOf(data, { pending: new Set([1]) })} open onClose={vi.fn()} />);
+    expect(screen.getByTestId('tour-activity-toggle-1')).toBeDisabled();
+  });
+
+  it('FE-STA2-DIALOG-006: the trip of a tour opens from its badge', async () => {
+    const user = userEvent.setup();
+    render(<TourActivityStatsDialog stats={statsOf(data)} open onClose={vi.fn()} />);
+    await user.click(within(screen.getByTestId('tour-activity-row-1')).getByText('Alps'));
+    expect(navigate).toHaveBeenCalledWith('/trips/5');
+  });
+
+  it('FE-STA2-DIALOG-007: the filters sit on the head band and change period and type', async () => {
+    const stats = statsOf(data);
+    const user = userEvent.setup();
+    render(<TourActivityStatsDialog stats={stats} open onClose={vi.fn()} />);
+    await user.click(screen.getByRole('button', { name: /Period/ }));
+    await user.click(screen.getByRole('button', { name: 'This year' }));
+    expect(stats.setPeriod).toHaveBeenCalledWith('thisYear');
+    await user.click(screen.getByRole('button', { name: /Type/ }));
+    await user.click(screen.getByRole('button', { name: 'Paddle tour' }));
+    expect(stats.setType).toHaveBeenCalledWith('kayak');
+  });
+
+  it('FE-STA2-DIALOG-008: before the read, while empty, and closed', async () => {
+    const onClose = vi.fn();
+    const user = userEvent.setup();
+    const { rerender } = render(<TourActivityStatsDialog stats={statsOf(null)} open onClose={onClose} />);
+    expect(screen.getByRole('status')).toHaveTextContent('Loading');
+    rerender(
+      <TourActivityStatsDialog
+        stats={statsOf({ entries: [], uncounted: { unassigned: 0, undated: 0 } })}
+        open
+        onClose={onClose}
+      />
+    );
+    expect(screen.getByText('No completed tours yet')).toBeInTheDocument();
+    const [closeButton] = screen.getAllByRole('button', { name: 'Close' });
+    await user.click(closeButton as HTMLElement);
+    expect(onClose).toHaveBeenCalled();
+    rerender(<TourActivityStatsDialog stats={statsOf(null)} open={false} onClose={onClose} />);
+    expect(screen.queryByText('My tour activities')).not.toBeInTheDocument();
+  });
+});

client/src/components/Atlas/tourActivity/TourActivityStatsDialog.tsx

@@ -0,0 +1,180 @@
+import type { TourActivityTotals, TourTypeKey } from '@trek/shared';
+import { Footprints } from 'lucide-react';
+import { createElement, useId } from 'react';
+import { useTranslation } from '../../../i18n';
+import type { DistanceUnit } from '../../../types';
+import {
+  DialogButton,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogShell,
+  DialogTile,
+  FooterSpacer,
+  fs,
+  NEUTRAL_TINT,
+} from '../../shared/DialogShell';
+import { InfoDot, TourFactFields, type TourMetricField } from '../../Tours/tourParts';
+import { TourActivityEntryRow } from './TourActivityEntryRow';
+import { ActivityFilters, ActivityStatusLine, BasisBadges, MeasurePills, UncountedBadges } from './tourActivityParts';
+import { distanceReading, heightReading, partialHint, typeIcon, useDistanceUnit } from './tourActivityReading';
+import type { TourActivityStats } from './useTourActivityStats';
+
+type Translate = (key: string, params?: Record<string, unknown>) => string;
+
+/** The sums as labelled fields; a sum nobody knows is left out, a short one says at least and why. */
+function totalFields(totals: TourActivityTotals, unit: DistanceUnit, t: Translate): TourMetricField[] {
+  const fields: TourMetricField[] = [{ label: t('tours.mode.tours'), value: String(totals.count) }];
+  const sums = [
+    { label: t('tours.detail.distance'), sum: totals.distanceKm, reading: distanceReading(totals, unit) },
+    { label: t('tours.detail.ascent'), sum: totals.ascentM, reading: heightReading(totals.ascentM, unit) },
+    { label: t('tours.detail.descent'), sum: totals.descentM, reading: heightReading(totals.descentM, unit) },
+  ];
+  for (const { label, sum, reading } of sums) {
+    if (!reading) continue;
+    const info = reading.partial ? { label, description: partialHint(sum, t) } : undefined;
+    fields.push({ label, value: reading.text, info });
+  }
+  return fields;
+}
+
+/** One type of the period: its icon with how many tours at the corner, its name, its distance and climb. */
+function TypeLine({ type, totals }: { type: TourTypeKey; totals: TourActivityTotals }) {
+  const { t } = useTranslation();
+  const unit = useDistanceUnit();
+  const distance = distanceReading(totals, unit);
+  const ascent = heightReading(totals.ascentM, unit);
+  return (
+    <li className="flex min-w-0 items-center gap-3 py-1" data-testid={`tour-activity-type-${type}`}>
+      <span className="relative flex-none">
+        <span className="grid h-[30px] w-[30px] place-items-center rounded-full bg-edge text-content-secondary">
+          {createElement(typeIcon(type), { size: 14, strokeWidth: 1.9 })}
+        </span>
+        <span
+          aria-hidden="true"
+          className="absolute -end-1.5 -top-1.5 grid h-4 min-w-4 place-items-center rounded-full bg-surface-card px-1 font-geist font-semibold tabular-nums text-content shadow-sm ring-1 ring-edge-faint"
+          style={fs(9)}
+        >
+          {totals.count}
+        </span>
+      </span>
+      <span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(12.5, 'body')}>
+        {t(`tourTypes.${type}`)}
+        <span className="sr-only">{`: ${t('tours.mode.tours')} ${totals.count}`}</span>
+      </span>
+      <span className="flex flex-none items-center gap-1.5">
+        <MeasurePills
+          distance={distance?.text ?? null}
+          ascent={ascent?.text ?? null}
+          testId={`tour-activity-type-${type}`}
+        />
+      </span>
+    </li>
+  );
+}
+
+/** The sums, what they rest on, the split by type, and every tour of the period with its switch. */
+function StatsBody({ stats }: { stats: TourActivityStats }) {
+  const { t } = useTranslation();
+  const unit = useDistanceUnit();
+  const { summary, data } = stats;
+  if (!summary || !data) return <ActivityStatusLine stats={stats} />;
+  const showTypes = stats.type === 'all' && summary.types.length > 1;
+  return (
+    <>
+      <div className="flex flex-col gap-2.5">
+        <TourFactFields fields={totalFields(summary.totals, unit, t)} />
+        <div className="flex flex-wrap items-center gap-1.5">
+          <BasisBadges byBasis={summary.totals.byBasis} />
+          <UncountedBadges upcoming={summary.upcoming} {...data.uncounted} />
+          <InfoDot label={t('tours.stats.title')} description={t('tours.stats.basisInfo')} />
+        </div>
+      </div>
+      {showTypes && (
+        <DialogSection label={t('tours.stats.byType')}>
+          <ul className="m-0 flex list-none flex-col gap-1 p-0">
+            {summary.types.map(({ type, ...totals }) => (
+              <TypeLine key={type} type={type} totals={totals} />
+            ))}
+          </ul>
+        </DialogSection>
+      )}
+      <DialogSection
+        label={t('tours.mode.tours')}
+        action={
+          <span className="font-geist tabular-nums text-content-faint" style={fs(11)}>
+            {summary.done.length}
+          </span>
+        }
+      >
+        {summary.done.length === 0 ? (
+          <p className="m-0 py-4 text-center text-content-muted" style={fs(12.5, 'body')}>
+            {t(data.entries.length === 0 ? 'tours.stats.empty' : 'tours.stats.none')}
+          </p>
+        ) : (
+          <ul className="-mx-2.5 my-0 flex list-none flex-col gap-0.5 p-0" data-testid="tour-activity-list">
+            {summary.done.map((entry) => (
+              <TourActivityEntryRow
+                key={entry.track ? `${entry.place_id}-${entry.track.place_id}` : entry.place_id}
+                entry={entry}
+                busy={stats.pending.has(entry.place_id)}
+                onToggleExcluded={(target) => void stats.setExcluded(target, !target.excluded)}
+              />
+            ))}
+          </ul>
+        )}
+      </DialogSection>
+    </>
+  );
+}
+
+/**
+ * STA-02: the user's tour activities in full, opened from the Atlas: the
+ * period and type on the head band, the sums with what they rest on, the
+ * split by type, and every tour done in the period, each one able to be left
+ * out (a tour that fell through) and counted again without touching its plan.
+ */
+export function TourActivityStatsDialog({
+  stats,
+  open,
+  onClose,
+}: {
+  stats: TourActivityStats;
+  open: boolean;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const labelId = useId();
+  return (
+    <DialogShell
+      open={open}
+      onClose={onClose}
+      labelledBy={labelId}
+      width="editor"
+      header={
+        <DialogHeader
+          tile={
+            <DialogTile>
+              <Footprints size={20} strokeWidth={2} className="text-content" />
+            </DialogTile>
+          }
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={t('tours.stats.title')}
+          sub={t('tours.stats.sub')}
+          subWraps
+          pills={<ActivityFilters stats={stats} />}
+        />
+      }
+      footer={
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.close')}</DialogButton>
+        </DialogFooter>
+      }
+    >
+      <StatsBody stats={stats} />
+    </DialogShell>
+  );
+}

client/src/components/Atlas/tourActivity/tourActivityParts.tsx

@@ -0,0 +1,232 @@
+import type { TourActivityBasis, TourActivityStatsEntry } from '@trek/shared';
+import {
+  AlertTriangle,
+  ArrowUp,
+  CalendarClock,
+  CalendarDays,
+  CalendarRange,
+  Footprints,
+  Loader2,
+  Ruler,
+  WifiOff,
+} from 'lucide-react';
+import { createElement } from 'react';
+import { useTranslation } from '../../../i18n';
+import { PillSelect } from '../../shared/dialogParts';
+import { fs } from '../../shared/DialogShell';
+import { Tooltip } from '../../shared/Tooltip';
+import { FigureBadge } from '../../Tours/paddle/FigureBadge';
+import { TourDayRowPill } from '../../Tours/TourDayRowFacts';
+import { tourDayRowIcon } from '../../Tours/tourDayRowIcon';
+import { typeIcon, typeLabel, type Translate } from './tourActivityReading';
+import { periodYear, type ActivityPeriod, type ActivityType } from './tourActivityStatsModel';
+import type { TourActivityStats } from './useTourActivityStats';
+
+/** What a period is called in the filter. */
+function periodLabel(period: ActivityPeriod, t: Translate): string {
+  if (period === 'all') return t('tours.stats.period.all');
+  if (period === 'thisYear') return t('tours.stats.period.thisYear');
+  if (period === 'last12') return t('tours.stats.period.last12');
+  return String(periodYear(period));
+}
+
+/** The period and type filters, as head band pills or quiet ones in a panel. */
+export function ActivityFilters({ stats, quiet = false }: { stats: TourActivityStats; quiet?: boolean }) {
+  const { t } = useTranslation();
+  const typeOption = (type: ActivityType) => ({
+    value: type,
+    label: typeLabel(type, t),
+    icon: createElement(typeIcon(type), { size: 12, strokeWidth: 2.2, className: 'flex-none text-content-muted' }),
+  });
+  return (
+    <>
+      <PillSelect
+        quiet={quiet}
+        label={t('tours.stats.period')}
+        value={stats.period}
+        options={stats.periods.map((period) => ({
+          value: period,
+          label: periodLabel(period, t),
+          icon: <CalendarRange size={12} strokeWidth={2.2} className="flex-none text-content-muted" />,
+        }))}
+        fallback={{ label: periodLabel(stats.period, t) }}
+        onChange={stats.setPeriod}
+      />
+      <PillSelect
+        quiet={quiet}
+        label={t('tours.filter.type')}
+        value={stats.type}
+        options={stats.types.map(typeOption)}
+        fallback={typeOption(stats.type)}
+        onChange={stats.setType}
+      />
+    </>
+  );
+}
+
+/** A distance and a climb as white badges, each named in full by its tooltip; one not known is left out. */
+export function MeasurePills({
+  distance,
+  ascent,
+  testId,
+}: {
+  distance: string | null;
+  ascent: string | null;
+  /** Prefix of the badges' test ids: `<testId>-distance`, `<testId>-ascent`. */
+  testId: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {distance !== null && (
+        <TourDayRowPill
+          icon={Ruler}
+          value={distance}
+          label={`${t('tours.detail.distance')}: ${distance}`}
+          testId={`${testId}-distance`}
+        />
+      )}
+      {ascent !== null && (
+        <TourDayRowPill
+          icon={ArrowUp}
+          value={ascent}
+          label={`${t('tours.detail.ascent')}: ${ascent}`}
+          testId={`${testId}-ascent`}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * What the sums rest on, each as a figure badge: how many tours count with
+ * their planned values and how many with a recorded track. The planned values
+ * are never passed off as measured, so they always say so.
+ */
+export function BasisBadges({ byBasis }: { byBasis: Record<TourActivityBasis, number> }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {byBasis.plan > 0 && (
+        <FigureBadge
+          testId="tour-activity-basis-plan"
+          label={t('tours.stats.basisPlan')}
+          value={String(byBasis.plan)}
+          icon={<CalendarDays size={10} strokeWidth={2.2} className="flex-none text-content-faint" />}
+          info={t('tours.stats.basisPlanHint')}
+        />
+      )}
+      {byBasis.track > 0 && (
+        <FigureBadge
+          testId="tour-activity-basis-track"
+          label={t('tours.stats.basisTrack')}
+          value={String(byBasis.track)}
+          icon={<Footprints size={10} strokeWidth={2.2} className="flex-none text-success" />}
+          info={t('tours.stats.basisTrackCountHint')}
+        />
+      )}
+    </>
+  );
+}
+
+/** What does not count, said as quiet figure badges: tours still ahead, on no day, on days without a date. */
+export function UncountedBadges({
+  upcoming,
+  unassigned,
+  undated,
+}: {
+  upcoming: number;
+  unassigned: number;
+  undated: number;
+}) {
+  const { t } = useTranslation();
+  const badges = [
+    { key: 'upcoming', value: upcoming, labelKey: 'tours.stats.upcoming', infoKey: 'tours.stats.upcomingHint' },
+    {
+      key: 'unassigned',
+      value: unassigned,
+      labelKey: 'tours.stats.unassigned',
+      infoKey: 'tours.stats.unassignedHint',
+    },
+    { key: 'undated', value: undated, labelKey: 'tours.stats.undated', infoKey: 'tours.stats.undatedHint' },
+  ];
+  return (
+    <>
+      {badges
+        .filter((badge) => badge.value > 0)
+        .map((badge) => (
+          <FigureBadge
+            key={badge.key}
+            testId={`tour-activity-${badge.key}`}
+            label={t(badge.labelKey)}
+            value={String(badge.value)}
+            icon={<CalendarClock size={10} strokeWidth={2.2} className="flex-none text-content-faint" />}
+            info={t(badge.infoKey)}
+          />
+        ))}
+    </>
+  );
+}
+
+/**
+ * A tour's type as a round tile; a tour done with a recorded track carries
+ * the footprints at its corner, the way a waypoint's number carries its kind.
+ */
+export function EntryTile({ entry }: { entry: Pick<TourActivityStatsEntry, 'tour_type' | 'basis'> }) {
+  const { t } = useTranslation();
+  return (
+    <Tooltip label={t(`tourTypes.${entry.tour_type}`)}>
+      <span className="relative flex-none" aria-label={t(`tourTypes.${entry.tour_type}`)}>
+        <span className="grid h-[34px] w-[34px] place-items-center rounded-full bg-edge text-content-secondary">
+          {createElement(tourDayRowIcon(entry.tour_type), { size: 15, strokeWidth: 1.9 })}
+        </span>
+        {entry.basis === 'track' && (
+          <span
+            aria-hidden="true"
+            data-testid="tour-activity-track-corner"
+            className="absolute -bottom-1 -end-1 grid h-4 w-4 place-items-center rounded-full bg-success-soft text-success ring-2 ring-surface-card"
+          >
+            <Footprints size={9} strokeWidth={2.6} />
+          </span>
+        )}
+      </span>
+    </Tooltip>
+  );
+}
+
+/**
+ * Where the read stands while there is nothing to show yet: on its way, refused
+ * offline, or failed with a way to try again.
+ */
+export function ActivityStatusLine({ stats }: { stats: Pick<TourActivityStats, 'status' | 'retry'> }) {
+  const { t } = useTranslation();
+  // Not asked yet: the tab has not been shown, so there is nothing to say.
+  if (stats.status === 'idle') return null;
+  if (stats.status === 'offline')
+    return (
+      <p className="m-0 flex items-center gap-2 text-content-muted" style={fs(12, 'body')}>
+        <WifiOff size={13} strokeWidth={2} className="flex-none" />
+        {t('common.needsConnection')}
+      </p>
+    );
+  if (stats.status === 'error')
+    return (
+      <p role="alert" className="m-0 flex flex-wrap items-center gap-2 text-content-muted" style={fs(12, 'body')}>
+        <AlertTriangle size={13} strokeWidth={2} className="flex-none text-warning" />
+        {t('tours.stats.unavailable')}
+        <button
+          type="button"
+          onClick={stats.retry}
+          className="font-semibold text-content underline underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+        >
+          {t('common.errorRetry')}
+        </button>
+      </p>
+    );
+  return (
+    <p role="status" className="m-0 flex items-center gap-2 text-content-faint" style={fs(12, 'body')}>
+      <Loader2 size={13} strokeWidth={2.2} className="flex-none animate-spin" />
+      {t('common.loading')}
+    </p>
+  );
+}

client/src/components/Atlas/tourActivity/tourActivityReading.ts

@@ -0,0 +1,39 @@
+import type { TourActivityTotals } from '@trek/shared';
+import { Layers, type LucideIcon } from 'lucide-react';
+import { useSettingsStore } from '../../../store/settingsStore';
+import type { DistanceUnit } from '../../../types';
+import { formatDistance, formatElevation } from '../../../utils/units';
+import { tourDayRowIcon } from '../../Tours/tourDayRowIcon';
+import { sumReading, type ActivityType } from './tourActivityStatsModel';
+
+export type Translate = (key: string, params?: Record<string, unknown>) => string;
+
+/** The distance unit the user reads in. */
+export function useDistanceUnit(): DistanceUnit {
+  return useSettingsStore((state) => state.settings.distance_unit) ?? 'metric';
+}
+
+/** What a type is called in the filter. */
+export function typeLabel(type: ActivityType, t: Translate): string {
+  return type === 'all' ? t('tours.stats.allTypes') : t(`tourTypes.${type}`);
+}
+
+/** The icon a type is drawn with; every type at once is a stack. */
+export function typeIcon(type: ActivityType): LucideIcon {
+  return type === 'all' ? Layers : tourDayRowIcon(type);
+}
+
+/** A distance as said, at least that much when some tours do not know theirs; null when none does. */
+export function distanceReading(totals: Pick<TourActivityTotals, 'distanceKm'>, unit: DistanceUnit) {
+  return sumReading(totals.distanceKm, (km) => formatDistance(km, unit));
+}
+
+/** A height sum as said, the same way. */
+export function heightReading(sum: TourActivityTotals['ascentM'], unit: DistanceUnit) {
+  return sumReading(sum, (metres) => formatElevation(metres, unit));
+}
+
+/** How a short sum explains itself: known for some of the tours only. */
+export function partialHint(sum: TourActivityTotals['distanceKm'], t: Translate): string {
+  return t('tours.scope.partialBody', { known: sum.known, of: sum.of });
+}

client/src/components/Atlas/tourActivity/tourActivityStatsModel.test.ts

@@ -0,0 +1,97 @@
+// FE-STA2-MODEL-001 to FE-STA2-MODEL-007
+// STA-02: the periods and types the Atlas offers for the user's tour
+// activities, and how a sum reads when some tours do not know the value.
+import type { TourActivityStatsEntry } from '@trek/shared';
+import { describe, expect, it } from 'vitest';
+import {
+  periodOptions,
+  periodRange,
+  periodYear,
+  splitMeasure,
+  sumReading,
+  typeOptions,
+} from './tourActivityStatsModel';
+
+const TODAY = '2026-10-20';
+
+function entry(overrides: Partial<TourActivityStatsEntry> = {}): TourActivityStatsEntry {
+  return {
+    place_id: 1,
+    name: 'Ridge',
+    tour_type: 'hike',
+    trip: { id: 5, title: 'Alps' },
+    derived_from_place_id: null,
+    date: '2026-07-02',
+    basis: 'plan',
+    track: null,
+    day_count: 1,
+    distance_km: 10,
+    ascent_m: 500,
+    descent_m: 400,
+    excluded: false,
+    ...overrides,
+  };
+}
+
+describe('tourActivityStatsModel', () => {
+  it('FE-STA2-MODEL-001: each period covers its days, both ends included', () => {
+    expect(periodRange('all', TODAY)).toEqual({ from: null, to: null });
+    expect(periodRange('thisYear', TODAY)).toEqual({ from: '2026-01-01', to: '2026-12-31' });
+    expect(periodRange('last12', TODAY)).toEqual({ from: '2025-10-20', to: TODAY });
+    expect(periodRange('year:2024', TODAY)).toEqual({ from: '2024-01-01', to: '2024-12-31' });
+  });
+
+  it('FE-STA2-MODEL-002: offers the earlier years a done tour is in, the newest first, and no empty one', () => {
+    const entries = [
+      entry({ date: '2023-05-01' }),
+      entry({ date: '2025-08-01' }),
+      entry({ date: '2025-09-01' }),
+      entry({ date: '2026-03-01' }),
+    ];
+    expect(periodOptions(entries, TODAY)).toEqual(['all', 'thisYear', 'last12', 'year:2025', 'year:2023']);
+    expect(periodOptions([], TODAY)).toEqual(['all', 'thisYear', 'last12']);
+  });
+
+  it('FE-STA2-MODEL-003: offers the types of done tours only, in planning order, older types after them', () => {
+    const entries = [
+      entry({ tour_type: 'kayak' }),
+      entry({ tour_type: 'run' }),
+      entry({ tour_type: 'hike' }),
+      entry({ tour_type: 'bike', date: '2026-12-01' }),
+    ];
+    expect(typeOptions(entries, TODAY)).toEqual(['all', 'hike', 'run', 'kayak']);
+  });
+
+  it('FE-STA2-MODEL-004: reads the year of a year period only', () => {
+    expect(periodYear('year:2024')).toBe(2024);
+    expect(periodYear('thisYear')).toBeNull();
+  });
+
+  it('FE-STA2-MODEL-005: a sum nobody knows says nothing, a short one says at least', () => {
+    const km = (value: number) => `${value} km`;
+    expect(sumReading({ value: null, known: 0, of: 2 }, km)).toBeNull();
+    expect(sumReading({ value: 12, known: 2, of: 2 }, km)).toEqual({ text: '12 km', partial: false });
+    expect(sumReading({ value: 12, known: 1, of: 2 }, km)).toEqual({ text: '≥ 12 km', partial: true });
+  });
+
+  it('FE-STA2-MODEL-006: splits a measure into its number and unit', () => {
+    expect(splitMeasure('128.4 km')).toEqual({ value: '128.4', unit: 'km' });
+    expect(splitMeasure('≥ 12 km')).toEqual({ value: '≥ 12', unit: 'km' });
+    expect(splitMeasure('12')).toEqual({ value: '12', unit: '' });
+  });
+
+  it('FE-STA2-MODEL-007: a tour still ahead offers neither its year nor its type', () => {
+    expect(periodOptions([entry({ date: '2025-01-01' }), entry({ date: '2027-01-01' })], TODAY)).toEqual([
+      'all',
+      'thisYear',
+      'last12',
+      'year:2025',
+    ]);
+    expect(typeOptions([entry({ tour_type: 'walk', date: TODAY })], TODAY)).toEqual(['all']);
+  });
+
+  it('FE-STA2-MODEL-008: a planned ski tour is a type of its own, after the types planned before it', () => {
+    const entries = [entry({ tour_type: 'ski' }), entry({ tour_type: 'horse' }), entry({ tour_type: 'hike' })];
+    expect(typeOptions(entries, TODAY)).toEqual(['all', 'hike', 'horse', 'ski']);
+  });
+});

client/src/components/Atlas/tourActivity/tourActivityStatsModel.ts

@@ -0,0 +1,90 @@
+import {
+  isTourActivityDone,
+  plannableTourTypeSchema,
+  type TourActivityStatsEntry,
+  type TourActivitySum,
+  type TourTypeKey,
+} from '@trek/shared';
+
+/**
+ * STA-02: the periods and types the Atlas narrows the user's tour activities
+ * by, and how a sum reads. Pure, so the hook and its views share one answer.
+ */
+
+/** All time, the calendar year, the last twelve months, or one earlier year. */
+export type ActivityPeriod = 'all' | 'thisYear' | 'last12' | `year:${number}`;
+
+/** One type, or every type at once. */
+export type ActivityType = TourTypeKey | 'all';
+
+interface PeriodRange {
+  from: string | null;
+  to: string | null;
+}
+
+/** The days a period covers, both included, for `today` (YYYY-MM-DD in the user's own calendar). */
+export function periodRange(period: ActivityPeriod, today: string): PeriodRange {
+  const year = Number(today.slice(0, 4));
+  if (period === 'thisYear') return { from: `${year}-01-01`, to: `${year}-12-31` };
+  // A year back to the day, today included: the same day a year ago is the first one.
+  if (period === 'last12') return { from: `${year - 1}${today.slice(4)}`, to: today };
+  if (period.startsWith('year:')) {
+    const chosen = period.slice(5);
+    return { from: `${chosen}-01-01`, to: `${chosen}-12-31` };
+  }
+  return { from: null, to: null };
+}
+
+/**
+ * The periods worth offering: all time, this year and the last twelve months,
+ * then each earlier year a done tour is in, the newest first. A year without
+ * a tour would only ever show nothing.
+ */
+export function periodOptions(entries: readonly TourActivityStatsEntry[], today: string): ActivityPeriod[] {
+  const thisYear = today.slice(0, 4);
+  const years = new Set(
+    entries
+      .filter((entry) => isTourActivityDone(entry, today))
+      .map((entry) => entry.date.slice(0, 4))
+      .filter((year) => year < thisYear)
+  );
+  const earlier = [...years].sort((a, b) => b.localeCompare(a)).map((year): ActivityPeriod => `year:${Number(year)}`);
+  return ['all', 'thisYear', 'last12', ...earlier];
+}
+
+/** The types a done tour has, in the order tours are planned in, the older types after them. */
+export function typeOptions(entries: readonly TourActivityStatsEntry[], today: string): ActivityType[] {
+  const present = new Set(entries.filter((entry) => isTourActivityDone(entry, today)).map((entry) => entry.tour_type));
+  const planned: readonly string[] = plannableTourTypeSchema.options;
+  const ordered = [...present].sort((a, b) => rank(planned, a) - rank(planned, b) || a.localeCompare(b));
+  return ['all', ...ordered];
+}
+
+function rank(order: readonly string[], value: string): number {
+  const index = order.indexOf(value);
+  return index === -1 ? order.length : index;
+}
+
+/** The year of a `year:` period, or null for the others. */
+export function periodYear(period: ActivityPeriod): number | null {
+  return period.startsWith('year:') ? Number(period.slice(5)) : null;
+}
+
+/**
+ * A sum as it is said: nothing when nobody knows the value, else the value,
+ * marked as at least that much when some of the tours lack it.
+ */
+export function sumReading(
+  sum: TourActivitySum,
+  format: (value: number) => string
+): { text: string; partial: boolean } | null {
+  if (sum.value === null) return null;
+  const partial = sum.known < sum.of;
+  return { text: partial ? `≥ ${format(sum.value)}` : format(sum.value), partial };
+}
+
+/** A formatted measure split into its number and its unit, so the number can stand large ("128.4", "km"). */
+export function splitMeasure(text: string): { value: string; unit: string } {
+  const at = text.lastIndexOf(' ');
+  return at === -1 ? { value: text, unit: '' } : { value: text.slice(0, at), unit: text.slice(at + 1) };
+}

client/src/components/Atlas/tourActivity/useTourActivityStats.test.ts

@@ -0,0 +1,226 @@
+// FE-STA2-HOOK-001 to FE-STA2-HOOK-009
+// STA-02: the user's own tour activities are read when the tab is first shown,
+// narrowed by period and type, and a tour left out shows at once and comes back
+// with a message when the server refuses.
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { TourActivityStatsEntry, TourActivityStatsResponse } from '@trek/shared';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useTourActivityStats } from './useTourActivityStats';
+
+const repo = vi.hoisted(() => ({ get: vi.fn(), setExcluded: vi.fn() }));
+const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() }));
+vi.mock('../../../repo/tourActivityStatsRepo', () => ({
+  tourActivityStatsRepo: repo,
+  TourActivityStatsOfflineError: class TourActivityStatsOfflineError extends Error {},
+}));
+vi.mock('../../shared/Toast', () => ({ useToast: () => toast }));
+
+function entry(overrides: Partial<TourActivityStatsEntry> = {}): TourActivityStatsEntry {
+  return {
+    place_id: 1,
+    name: 'Ridge',
+    tour_type: 'hike',
+    trip: { id: 5, title: 'Alps' },
+    derived_from_place_id: null,
+    date: '2026-07-02',
+    basis: 'plan',
+    track: null,
+    day_count: 1,
+    distance_km: 10,
+    ascent_m: 500,
+    descent_m: 400,
+    excluded: false,
+    ...overrides,
+  };
+}
+
+const stats: TourActivityStatsResponse = {
+  entries: [
+    entry(),
+    entry({ place_id: 2, name: 'Lake', tour_type: 'kayak', date: '2025-08-01', distance_km: 8 }),
+    entry({ place_id: 3, name: 'Summit', date: '2026-11-01' }),
+  ],
+  uncounted: { unassigned: 0, undated: 0 },
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.useFakeTimers({ toFake: ['Date'] });
+  vi.setSystemTime(new Date(2026, 9, 20, 12));
+  repo.get.mockResolvedValue(stats);
+});
+afterEach(() => vi.useRealTimers());
+
+describe('useTourActivityStats', () => {
+  it('FE-STA2-HOOK-001: reads nothing until the tab is shown, then sums what is done', async () => {
+    const { result, rerender } = renderHook(({ active }) => useTourActivityStats(active), {
+      initialProps: { active: false },
+    });
+    expect(result.current.status).toBe('idle');
+    expect(repo.get).not.toHaveBeenCalled();
+
+    rerender({ active: true });
+    expect(result.current.status).toBe('loading');
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    expect(result.current.summary?.totals.count).toBe(2);
+    expect(result.current.summary?.totals.distanceKm.value).toBe(18);
+    expect(result.current.summary?.upcoming).toBe(1);
+    expect(result.current.periods).toEqual(['all', 'thisYear', 'last12', 'year:2025']);
+    expect(result.current.types).toEqual(['all', 'hike', 'kayak']);
+  });
+
+  it('FE-STA2-HOOK-002: narrows by period and by type', async () => {
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    act(() => result.current.setPeriod('thisYear'));
+    expect(result.current.summary?.done.map((item) => item.place_id)).toEqual([1]);
+    act(() => {
+      result.current.setPeriod('all');
+      result.current.setType('kayak');
+    });
+    expect(result.current.summary?.done.map((item) => item.place_id)).toEqual([2]);
+  });
+
+  it('FE-STA2-HOOK-003: offline and failed reads are told apart, and a retry reads again', async () => {
+    const { TourActivityStatsOfflineError } = await import('../../../repo/tourActivityStatsRepo');
+    repo.get.mockRejectedValueOnce(new TourActivityStatsOfflineError());
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('offline'));
+
+    repo.get.mockRejectedValueOnce(new Error('boom'));
+    act(() => result.current.retry());
+    expect(result.current.status).toBe('loading');
+    await waitFor(() => expect(result.current.status).toBe('error'));
+
+    act(() => result.current.retry());
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    expect(repo.get).toHaveBeenCalledTimes(3);
+  });
+
+  it('FE-STA2-HOOK-004: leaving a tour out shows at once and takes the server answer', async () => {
+    let answer: (value: TourActivityStatsResponse) => void = () => undefined;
+    repo.setExcluded.mockReturnValue(new Promise((resolve) => (answer = resolve)));
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+
+    let write: Promise<void> = Promise.resolve();
+    act(() => {
+      write = result.current.setExcluded(entry(), true);
+    });
+    expect(result.current.pending.has(1)).toBe(true);
+    expect(result.current.summary?.totals.count).toBe(1);
+    expect(repo.setExcluded).toHaveBeenCalledWith({ place_id: 1, excluded: true });
+
+    await act(async () => {
+      const entries = stats.entries.map((item) => (item.place_id === 1 ? { ...item, excluded: true } : item));
+      answer({ ...stats, entries });
+      await write;
+    });
+    expect(result.current.pending.size).toBe(0);
+    expect(result.current.summary?.done.find((item) => item.place_id === 1)?.excluded).toBe(true);
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
+  it('FE-STA2-HOOK-005: a refused exclusion counts the tour again and says so', async () => {
+    repo.setExcluded.mockRejectedValue(new Error('nope'));
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    await act(async () => {
+      await result.current.setExcluded(entry(), true);
+    });
+    expect(result.current.summary?.totals.count).toBe(2);
+    expect(result.current.pending.size).toBe(0);
+    expect(toast.error).toHaveBeenCalledWith('tours.stats.excludeFailed');
+  });
+
+  it('FE-STA2-HOOK-006: a read answered after the tab went away is dropped', async () => {
+    let answer: (value: TourActivityStatsResponse) => void = () => undefined;
+    repo.get.mockReturnValue(new Promise((resolve) => (answer = resolve)));
+    const { result, unmount } = renderHook(() => useTourActivityStats(true));
+    expect(result.current.status).toBe('loading');
+    unmount();
+    await act(async () => answer(stats));
+    expect(result.current.data).toBeNull();
+  });
+
+  it('FE-STA2-HOOK-007: a write before the first read leaves the empty state empty', async () => {
+    repo.get.mockReturnValue(new Promise(() => undefined));
+    repo.setExcluded.mockRejectedValue(new Error('offline'));
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await act(async () => {
+      await result.current.setExcluded(entry(), true);
+    });
+    expect(result.current.data).toBeNull();
+    expect(toast.error).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-STA2-HOOK-008: an older exclusion answered last never puts a newer one back', async () => {
+    const answers: Array<(value: TourActivityStatsResponse) => void> = [];
+    repo.setExcluded.mockImplementation(() => new Promise((resolve) => answers.push(resolve)));
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    const excludedOf = (placeId: number) =>
+      result.current.data?.entries.find((item) => item.place_id === placeId)?.excluded;
+    const withExcluded = (...ids: number[]) => ({
+      ...stats,
+      entries: stats.entries.map((item) => ({ ...item, excluded: ids.includes(item.place_id) })),
+    });
+
+    let first: Promise<void> = Promise.resolve();
+    let second: Promise<void> = Promise.resolve();
+    act(() => {
+      first = result.current.setExcluded(entry(), true);
+    });
+    act(() => {
+      second = result.current.setExcluded(stats.entries[1] as TourActivityStatsEntry, true);
+    });
+    // The second answer comes first and carries both; the first, from before the second, only its own.
+    await act(async () => {
+      answers[1]?.(withExcluded(1, 2));
+      await second;
+    });
+    await act(async () => {
+      answers[0]?.(withExcluded(1));
+      await first;
+    });
+    expect(excludedOf(1)).toBe(true);
+    expect(excludedOf(2)).toBe(true);
+
+    // The other way round: the first comes first, without the second still on its way, which stays left out.
+    act(() => {
+      first = result.current.setExcluded(entry(), false);
+    });
+    act(() => {
+      second = result.current.setExcluded(stats.entries[1] as TourActivityStatsEntry, false);
+    });
+    await act(async () => {
+      answers[2]?.(withExcluded(2));
+      await first;
+    });
+    expect(excludedOf(1)).toBe(false);
+    expect(excludedOf(2)).toBe(false);
+    await act(async () => {
+      answers[3]?.(withExcluded());
+      await second;
+    });
+    expect(excludedOf(2)).toBe(false);
+  });
+
+  it('FE-STA2-HOOK-009: a read asked before an exclusion and answered after it does not undo it', async () => {
+    const { result } = renderHook(() => useTourActivityStats(true));
+    await waitFor(() => expect(result.current.status).toBe('ready'));
+    let read: (value: TourActivityStatsResponse) => void = () => undefined;
+    repo.get.mockReturnValue(new Promise((resolve) => (read = resolve)));
+    act(() => result.current.retry());
+    repo.setExcluded.mockResolvedValue({
+      ...stats,
+      entries: stats.entries.map((item) => (item.place_id === 1 ? { ...item, excluded: true } : item)),
+    });
+    await act(async () => {
+      await result.current.setExcluded(entry(), true);
+    });
+    await act(async () => read(stats));
+    expect(result.current.status).toBe('ready');
+    expect(result.current.data?.entries.find((item) => item.place_id === 1)?.excluded).toBe(true);
+  });
+});

client/src/components/Atlas/tourActivity/useTourActivityStats.ts

@@ -0,0 +1,165 @@
+import {
+  summarizeTourActivities,
+  type TourActivityStatsEntry,
+  type TourActivityStatsResponse,
+  type TourActivitySummary,
+} from '@trek/shared';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from '../../../i18n';
+import { TourActivityStatsOfflineError, tourActivityStatsRepo } from '../../../repo/tourActivityStatsRepo';
+import { localIsoDate } from '../../../utils/localDate';
+import { useToast } from '../../shared/Toast';
+import {
+  periodOptions,
+  periodRange,
+  typeOptions,
+  type ActivityPeriod,
+  type ActivityType,
+} from './tourActivityStatsModel';
+
+/** Where the read stands: not asked yet, on its way, there, refused offline, or failed. */
+type ActivityStatsStatus = 'idle' | 'loading' | 'ready' | 'offline' | 'error';
+
+export interface TourActivityStats {
+  status: ActivityStatsStatus;
+  data: TourActivityStatsResponse | null;
+  /** The sums of the chosen period and type; null until the first read is there. */
+  summary: TourActivitySummary | null;
+  period: ActivityPeriod;
+  setPeriod: (period: ActivityPeriod) => void;
+  periods: ActivityPeriod[];
+  type: ActivityType;
+  setType: (type: ActivityType) => void;
+  types: ActivityType[];
+  /** The tours whose exclusion is on its way to the server. */
+  pending: ReadonlySet<number>;
+  setExcluded: (entry: TourActivityStatsEntry, excluded: boolean) => Promise<void>;
+  retry: () => void;
+}
+
+/** What the latest read came back with, and the attempt it answered. */
+interface Answered {
+  attempt: number;
+  status: Exclude<ActivityStatsStatus, 'idle' | 'loading'>;
+}
+
+/** Every entry of the tour with the flag as asked, the rest as they were. */
+function flagged(data: TourActivityStatsResponse, placeId: number, excluded: boolean): TourActivityStatsResponse {
+  return {
+    ...data,
+    entries: data.entries.map((entry) => (entry.place_id === placeId ? { ...entry, excluded } : entry)),
+  };
+}
+
+/** Every entry with the flags of the exclusions still on their way laid over it, the way they show already. */
+function withFlags(data: TourActivityStatsResponse, flags: ReadonlyMap<number, boolean>): TourActivityStatsResponse {
+  if (flags.size === 0) return data;
+  return {
+    ...data,
+    entries: data.entries.map((entry) =>
+      flags.has(entry.place_id) ? { ...entry, excluded: flags.get(entry.place_id) === true } : entry
+    ),
+  };
+}
+
+/**
+ * STA-02: the user's own tour activities in the Atlas. Read live when the tab
+ * is first shown (and again on retry), never cached on the device; narrowed by
+ * period and type here, summed by the shared summary the assistant uses too.
+ * Leaving a tour out shows at once and is undone with a message when the
+ * server refuses it; the plan of the tour never changes. Answers can come
+ * back in any order: only the answer to the latest read or write is taken
+ * whole, with the exclusions still on their way laid over it; an older one
+ * only confirms its own tour's flag, so it never puts back a state from
+ * before a newer change.
+ */
+export function useTourActivityStats(active: boolean): TourActivityStats {
+  const { t } = useTranslation();
+  const toast = useToast();
+  // The answer to the latest read and which attempt it answered: a retry is loading until its own answer is there.
+  const [answered, setAnswered] = useState<Answered | null>(null);
+  const [data, setData] = useState<TourActivityStatsResponse | null>(null);
+  const [period, setPeriod] = useState<ActivityPeriod>('all');
+  const [type, setType] = useState<ActivityType>('all');
+  const [pending, setPending] = useState<ReadonlySet<number>>(() => new Set());
+  const [attempt, setAttempt] = useState(0);
+  const today = localIsoDate();
+  // Raised by every read and every write, so an answer knows whether a newer request went out after it.
+  const latest = useRef(0);
+  // The exclusions on their way to the server, by tour: the flag the user asked for.
+  const inFlight = useRef(new Map<number, boolean>());
+
+  useEffect(() => {
+    if (!active) return;
+    const controller = new AbortController();
+    const asked = ++latest.current;
+    tourActivityStatsRepo.get(controller.signal).then(
+      (answer) => {
+        if (controller.signal.aborted) return;
+        if (asked === latest.current) setData(withFlags(answer, inFlight.current));
+        setAnswered({ attempt, status: 'ready' });
+      },
+      (err: unknown) => {
+        if (controller.signal.aborted) return;
+        setAnswered({ attempt, status: err instanceof TourActivityStatsOfflineError ? 'offline' : 'error' });
+      }
+    );
+    return () => controller.abort();
+  }, [active, attempt]);
+
+  let status: ActivityStatsStatus = 'loading';
+  if (answered?.attempt === attempt) status = answered.status;
+  else if (!active && !answered) status = 'idle';
+
+  const summary = useMemo(() => {
+    if (!data) return null;
+    const range = periodRange(period, today);
+    return summarizeTourActivities(data.entries, { today, ...range, type: type === 'all' ? null : type });
+  }, [data, period, type, today]);
+  const periods = useMemo(() => periodOptions(data?.entries ?? [], today), [data, today]);
+  const types = useMemo(() => typeOptions(data?.entries ?? [], today), [data, today]);
+
+  const setExcluded = useCallback(
+    async (entry: TourActivityStatsEntry, excluded: boolean) => {
+      const placeId = entry.place_id;
+      const asked = ++latest.current;
+      inFlight.current.set(placeId, excluded);
+      setPending((current) => new Set(current).add(placeId));
+      setData((current) => (current ? flagged(current, placeId, excluded) : current));
+      try {
+        const answer = await tourActivityStatsRepo.setExcluded({ place_id: placeId, excluded });
+        inFlight.current.delete(placeId);
+        if (asked === latest.current) setData(withFlags(answer, inFlight.current));
+        else setData((current) => (current ? flagged(current, placeId, excluded) : current));
+      } catch {
+        inFlight.current.delete(placeId);
+        setData((current) => (current ? flagged(current, placeId, !excluded) : current));
+        toast.error(t('tours.stats.excludeFailed'));
+      } finally {
+        setPending((current) => {
+          const next = new Set(current);
+          next.delete(placeId);
+          return next;
+        });
+      }
+    },
+    [t, toast]
+  );
+
+  const retry = useCallback(() => setAttempt((count) => count + 1), []);
+
+  return {
+    status,
+    data,
+    summary,
+    period,
+    setPeriod,
+    periods,
+    type,
+    setType,
+    types,
+    pending,
+    setExcluded,
+    retry,
+  };
+}

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

@@ -1,4 +1,4 @@
-// FE-DAWARICH-SUGMODEL-001 to FE-DAWARICH-SUGMODEL-014
+// FE-DAWARICH-SUGMODEL-001 to FE-DAWARICH-SUGMODEL-019
 import { describe, it, expect } from 'vitest'
 import type { DawarichSuggestion } from '@trek/shared'
 import {
@@ -7,6 +7,7 @@ import {
   formatDayOption,
   formatDuration,
   groupByDay,
+  openStayDatesWithin,
   openStaysByDate,
   timeRange,
 } from './dawarichSuggestionModel'
@@ -110,6 +111,11 @@ describe('clockOf / timeRange', () => {
     expect(timeRange('2026-09-10T10:15:00+02:00', 'nonsense', false)).toBe('10:15')
   })
 
+  it('FE-DAWARICH-SUGMODEL-020: a stay into the next day carries the days it ran over', () => {
+    expect(timeRange('2026-10-24T18:30:00+02:00', '2026-10-25T08:30:00+02:00', false)).toBe('18:30 – 08:30 +1')
+    expect(timeRange('2026-10-24T18:30:00+02:00', '2026-10-26T08:30:00+02:00', false)).toBe('18:30 – 08:30 +2')
+  })
+
   it('FE-DAWARICH-SUGMODEL-007: no arrival, no range', () => {
     expect(timeRange('nonsense', '2026-09-10T12:40:00+02:00', false)).toBe('')
   })
@@ -212,4 +218,20 @@ describe('openStaysByDate', () => {
 
     expect(byDate.size).toBe(0)
   })
+
+  it('FE-DAWARICH-SUGMODEL-019: the waiting days inside a journal span, oldest first, and none without a span', () => {
+    // The stays are the whole account's; a day outside the journal's entries and trips is
+    // not one it can take over.
+    const byDate = openStaysByDate([
+      stay({ id: 1, localDate: '2026-09-12' }),
+      stay({ id: 2, localDate: '2026-09-10' }),
+      stay({ id: 3, localDate: '2026-12-24' }),
+    ])
+
+    expect(openStayDatesWithin(byDate, ['2026-09-11', null, '2026-09-09', undefined, '2026-09-14'])).toEqual([
+      '2026-09-10',
+      '2026-09-12',
+    ])
+    expect(openStayDatesWithin(byDate, [null, undefined])).toEqual([])
+  })
 })

client/src/components/Dawarich/dawarichSuggestionModel.ts

@@ -71,6 +71,22 @@ export function openStaysByDate(suggestions: DawarichSuggestion[]): Map<string,
   return byDate;
 }
 
+/**
+ * The days with waiting stays that fall inside a journal's span, oldest first. The span
+ * is whatever dates bound it (its entries, its trips' first and last days); without any
+ * there is nothing to place a stay against, because the stays are the whole account's.
+ */
+export function openStayDatesWithin(
+  byDate: Map<string, DawarichSuggestion[]>,
+  span: Array<string | null | undefined>
+): string[] {
+  const bounds = span.filter((date): date is string => !!date).sort((a, b) => a.localeCompare(b));
+  const first = bounds[0];
+  const last = bounds[bounds.length - 1];
+  if (!first || !last) return [];
+  return [...byDate.keys()].filter((date) => date >= first && date <= last).sort((a, b) => a.localeCompare(b));
+}
+
 /** `HH:MM` out of an ISO timestamp, in the offset the timestamp carries. */
 export function clockOf(iso: string): string {
   return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(iso) ? iso.slice(11, 16) : ''
@@ -86,12 +102,17 @@ export function clockOf(iso: string): string {
  * timestamp and printed, so a traveller on a 12-hour clock read every Dawarich time in
  * 24-hour while the rest of the app obeyed the setting. A required argument makes the
  * next caller answer the question rather than inherit the bug.
+ *
+ * A stay that ends on a later day says so, `08:30 +1` after an evening arrival, as a timetable
+ * does, or a night at the hotel reads as fourteen hours that never happened.
  */
 export function timeRange(startedAt: string, endedAt: string, is12h: boolean): string {
   const from = formatClockTime(clockOf(startedAt), is12h)
   const to = formatClockTime(clockOf(endedAt), is12h)
   if (!from) return ''
-  return to ? `${from} – ${to}` : from
+  if (!to) return from
+  const days = Math.round((Date.parse(endedAt.slice(0, 10)) - Date.parse(startedAt.slice(0, 10))) / 86_400_000)
+  return days > 0 ? `${from} – ${to} +${days}` : `${from} – ${to}`
 }
 
 /**

client/src/components/Ferratas/FerrataDetailCard.tsx

@@ -5,20 +5,12 @@ import type { Ferrata } from '@trek/shared';
 import { useTranslation } from '../../i18n';
 import { useSettingsStore } from '../../store/settingsStore';
 import { formatDistance } from '../../utils/units';
-import { MAP_CONTROL_SHADOW } from '../Map/mapControlShadow';
+import { MAP_CARD_GLASS } from '../Map/mapControlShadow';
 import { SoftPill } from '../Planner/planParts';
 import { fs } from '../shared/DialogShell';
 import { type FerrataGroup, ferrataLabel } from './ferrataGroups';
 import { ferrataOsmUrl } from './ferrataModel';
 
-/** The map controls' frosted glass, so the card reads as one of them. */
-const MAP_GLASS = {
-  background: 'var(--sidebar-bg)',
-  backdropFilter: 'blur(20px) saturate(180%)',
-  WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-  boxShadow: MAP_CONTROL_SHADOW,
-};
-
 /**
  * One via ferrata, picked on the map: its name, the route it belongs to, its
  * grade range and total length as badges, and the way back to the source.
@@ -57,7 +49,7 @@ export default function FerrataDetailCard({
   return (
     <article
       className={`rounded-2xl p-3 text-content ${width ? '' : 'w-max min-w-[min(18rem,calc(100vw_-_2rem))] max-w-[22.5rem]'}`}
-      style={{ ...MAP_GLASS, width }}
+      style={{ ...MAP_CARD_GLASS, width }}
       data-testid="ferrata-detail-card"
     >
       <div className="flex items-start gap-2">

client/src/components/Ferratas/FerrataDetailOverlay.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
+import { useMapCardDismiss } from '../Map/useMapCardDismiss';
 import FerrataDetailCard from './FerrataDetailCard';
 import type { FerrataGroup } from './ferrataGroups';
 import type { FerrataSelection } from './useFerrataMapLayer';
@@ -39,26 +40,7 @@ export default function FerrataDetailOverlay({
   onTourIds?: ReadonlySet<string>;
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  const open = !!selection;
+  useMapCardDismiss(ref, !!selection, onClose, onOutsidePress);
-
-  useEffect(() => {
-    if (!open) return;
-    const onDown = (event: PointerEvent) => {
-      const card = ref.current;
-      if (card && event.target instanceof Node && card.contains(event.target)) return;
-      onOutsidePress?.();
-      onClose();
-    };
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !event.defaultPrevented) onClose();
-    };
-    document.addEventListener('pointerdown', onDown, true);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('pointerdown', onDown, true);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open, onClose, onOutsidePress]);
 
   if (!selection) return null;
   return (

client/src/components/Ferratas/ferrataPaint.ts

@@ -1,3 +1,5 @@
+import { readMapPaint, sameMapPaint } from '../Map/mapPaint';
+
 /**
  * The colours the via ferrata lines are drawn in.
  *
@@ -10,9 +12,9 @@
  *
  * Map paint cannot take a `var(--token)`: Leaflet writes the colour into an
  * SVG `stroke` attribute and GL paint wants a resolved colour string. So the
- * `--map-ferrata*` tokens are read off the document when the layer draws (the
+ * `--map-ferrata*` tokens are read off the document when the layer draws
- * precedent is the hazard overlay in useHazardLayerGL), which keeps light and
+ * (`mapPaint.ts`; the precedent is the hazard overlay in useHazardLayerGL),
- * dark mode apart without a colour literal in the layer.
+ * which keeps light and dark mode apart without a colour literal in the layer.
  */
 export interface FerrataPaint {
   /** The dashed line itself. */
@@ -23,27 +25,16 @@ export interface FerrataPaint {
   highlight: string;
 }
 
-const TOKENS = {
+export const FERRATA_TOKENS = {
   line: '--map-ferrata',
   casing: '--map-ferrata-casing',
   highlight: '--map-ferrata-lit',
 } as const;
 
-/** What a token resolves to on the root, or `currentColor` where nothing defines it (a test DOM). */
-function token(name: string, style: CSSStyleDeclaration | null): string {
-  const value = style?.getPropertyValue(name).trim();
-  return value || 'currentColor';
-}
-
 export function ferrataPaint(): FerrataPaint {
-  const style = typeof document === 'undefined' ? null : getComputedStyle(document.documentElement);
+  return readMapPaint(FERRATA_TOKENS);
-  return {
-    line: token(TOKENS.line, style),
-    casing: token(TOKENS.casing, style),
-    highlight: token(TOKENS.highlight, style),
-  };
 }
 
 export function sameFerrataPaint(a: FerrataPaint, b: FerrataPaint): boolean {
-  return a.line === b.line && a.casing === b.casing && a.highlight === b.highlight;
+  return sameMapPaint(a, b);
 }

client/src/components/Ferratas/useFerrataPaint.ts

@@ -1,30 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useMapPaint } from '../Map/mapPaint';
+import { FERRATA_TOKENS, type FerrataPaint } from './ferrataPaint';
 
-import { type FerrataPaint, ferrataPaint, sameFerrataPaint } from './ferrataPaint';
+/** The line colours, resolved again whenever the theme on `<html>` changes (see `useMapPaint`). */
-
-/** The attributes `applyAppearance()` writes on `<html>` that change what the tokens resolve to. */
-const THEME_ATTRIBUTES = ['class', 'style', 'data-scheme'];
-
-/**
- * The line colours, resolved again whenever the light/dark class, the colour
- * scheme or a custom accent on `<html>` changes. Map paint holds resolved
- * strings rather than `var(--token)`, so without this a theme toggle would leave
- * the lines in the old scheme's colours. Same observer approach as `useIsDark`,
- * which only watches the class. The reference only changes when a colour does,
- * so a memo keyed on it does not churn.
- */
 export function useFerrataPaint(): FerrataPaint {
-  const [paint, setPaint] = useState(ferrataPaint);
+  return useMapPaint(FERRATA_TOKENS);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    const observer = new MutationObserver(() => {
-      const next = ferrataPaint();
-      setPaint((current) => (sameFerrataPaint(current, next) ? current : next));
-    });
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
-    return () => observer.disconnect();
-  }, []);
-
-  return paint;
 }

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

@@ -1,12 +1,13 @@
 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 { Tooltip } from '../../shared/Tooltip'
 import ToggleSwitch from '../../Settings/ToggleSwitch'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { useConnectForm } from './useConnectForm'
 import { Badge } from './DocSyncBits'
 import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
-import type { DocSyncProvider, useDocSync } from './useDocSync'
+import type { DocSyncProvider, DocSyncVerdict, useDocSync } from './useDocSync'
 
 /**
  * Connecting a store, as a dialog rather than a panel that unfolds in place.
@@ -32,7 +33,7 @@ export default function DocSyncConnectModal({
   const Icon = DOCUMENT_PROVIDER_ICONS[provider.id]
 
   const form = useConnectForm(provider, existing, sync)
-  const [verdict, setVerdict] = useState<{ connected: boolean; account?: string; error?: string } | null>(null)
+  const [verdict, setVerdict] = useState<DocSyncVerdict | null>(null)
 
   const test = async () => setVerdict(await form.probe())
   const labelId = useId()
@@ -134,7 +135,7 @@ function Verdict({
   busy,
   failure,
 }: {
-  verdict: { connected: boolean; account?: string; error?: string } | null
+  verdict: DocSyncVerdict | null
   busy: boolean
   /** A call that failed outside the connection test (saving, most of all). */
   failure: string | null
@@ -172,10 +173,16 @@ function Verdict({
     )
   }
   const blocked = verdict.error === 'ssrf_blocked' || verdict.error === 'tls_untrusted'
+  const message = t(`docsync.error.${verdict.error || 'unknown'}`)
+  // The footer shares its row with the buttons, and a refusal cut to "The
+  // credentials were re..." with no way to read the rest left nothing to go on
+  // (#2666). Two lines, and the whole of it with the store's reason on hover.
   return (
-    <span className="flex min-w-0 items-center gap-2 text-caption text-danger">
+    <Tooltip label={verdict.detail ? `${message} ${verdict.detail}` : message} placement="top">
-      {blocked ? <ShieldAlert size={14} /> : <AlertTriangle size={14} />}
+      <span className="flex min-w-0 items-center gap-2 text-caption text-danger">
-      <span className="truncate">{t(`docsync.error.${verdict.error || 'unknown'}`)}</span>
+        {blocked ? <ShieldAlert size={14} className="flex-none" /> : <AlertTriangle size={14} className="flex-none" />}
-    </span>
+        <span className="line-clamp-2 [overflow-wrap:anywhere]">{message}</span>
+      </span>
+    </Tooltip>
   )
 }

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { DocSyncConnection, DocSyncProvider, useDocSync } from './useDocSync'
+import type { DocSyncConnection, DocSyncProvider, DocSyncVerdict, useDocSync } from './useDocSync'
 
 /**
  * The credential form's rules, for both shells.
@@ -39,7 +39,7 @@ export interface ConnectForm {
   setInsecureTls: (on: boolean) => void
   /** Every required field is either filled in or already stored. */
   complete: boolean
-  probe: () => Promise<{ connected: boolean; account?: string; error?: string }>
+  probe: () => Promise<DocSyncVerdict>
   save: () => Promise<boolean>
 }
 

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

@@ -12,6 +12,14 @@ import { useServerPing } from '../../../sync/useServerPing'
  * reason for the same problem.
  */
 
+/** What a connection test answers; `detail` is the store's own reason, for the person fixing it. */
+export interface DocSyncVerdict {
+  connected: boolean
+  account?: string
+  error?: string
+  detail?: string
+}
+
 export interface DocSyncField {
   field_key: string
   label: string
@@ -264,11 +272,9 @@ export function useDocSync(tripId: number | string, enabled: boolean) {
   const testConnection = useCallback(async (providerId: string, baseUrl: string, credentials: Record<string, string>, allowInsecureTls: boolean) => {
     setBusy('test')
     try {
-      return await docsyncApi.testConnection(tripId, { providerId, baseUrl, credentials, allowInsecureTls }) as {
+      return await docsyncApi.testConnection(tripId, { providerId, baseUrl, credentials, allowInsecureTls }) as DocSyncVerdict
-        connected: boolean; account?: string; error?: string; detail?: string
-      }
     } catch (e: unknown) {
-      return { connected: false, error: readError(e) }
+      return { connected: false, error: readError(e) } satisfies DocSyncVerdict
     } finally {
       setBusy(null)
     }

client/src/components/Journey/DawarichDayDialog.tsx

@@ -0,0 +1,62 @@
+import { useId, type ReactNode } from 'react';
+import { useTranslation } from '../../i18n';
+import DawarichIcon from '../shared/DawarichIcon';
+import { DialogFooter, DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../shared/DialogShell';
+
+/**
+ * The desktop frame of a journey day read from Dawarich (JRN-01, JRN-02): the
+ * Dawarich mark, the journey and the day in the head band, what the dialog
+ * does under them, the body and the buttons.
+ */
+export default function DawarichDayDialog({
+  journeyTitle,
+  date,
+  sub,
+  onClose,
+  footer,
+  children,
+}: {
+  journeyTitle: string;
+  date: string;
+  sub: string;
+  onClose: () => void;
+  footer: ReactNode;
+  children: ReactNode;
+}) {
+  const { locale } = useTranslation();
+  const labelId = useId();
+  const title = new Date(`${date}T00:00:00`).toLocaleDateString(locale, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="detail"
+      align="top"
+      header={
+        <DialogHeader
+          tile={
+            <DialogTile>
+              <DawarichIcon size={26} />
+            </DialogTile>
+          }
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          eyebrow={journeyTitle}
+          title={title}
+          sub={sub}
+          subWraps
+        />
+      }
+      footer={<DialogFooter>{footer}</DialogFooter>}
+    >
+      {children}
+    </DialogShell>
+  );
+}

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

@@ -1,4 +1,4 @@
-// FE-JRN-DAYDAW-001 to FE-JRN-DAYDAW-008
+// FE-JRN-DAYDAW-001 to FE-JRN-DAYDAW-010
 /**
  * The fold a journal day carries for the stays Dawarich recorded on it.
  *
@@ -144,4 +144,27 @@ describe('JourneyDayDawarich', () => {
     expect(screen.getByText('8:00 AM – 5:08 PM')).toBeInTheDocument()
     useSettingsStore.setState(s => ({ settings: { ...s.settings, time_format: '24h' } }))
   })
+
+  it('FE-JRN-DAYDAW-009: beside the shut row, the whole day can be taken over at once (JRN-02)', () => {
+    const onTakeOverDay = vi.fn()
+    render(
+      <JourneyDayDawarich
+        suggestions={[stay({ id: 1 })]}
+        busyId={null}
+        onAccept={vi.fn()}
+        onDismiss={vi.fn()}
+        onTakeOverDay={onTakeOverDay}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Take over day' }))
+
+    expect(onTakeOverDay).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole('button', { expanded: false })).toBeInTheDocument()
+  })
+
+  it('FE-JRN-DAYDAW-010: without the right to take a day over there is no such button', () => {
+    fold([stay({ id: 1 })])
+    expect(screen.queryByRole('button', { name: 'Take over day' })).not.toBeInTheDocument()
+  })
 })

client/src/components/Journey/JourneyDayDawarich.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { ChevronDown, ChevronRight } from 'lucide-react'
+import { ChevronDown, ChevronRight, ListChecks } from 'lucide-react'
 import type { DawarichSuggestion, DawarichSuggestionTarget } from '@trek/shared'
 import { useTranslation } from '../../i18n'
 import DawarichIcon from '../shared/DawarichIcon'
+import { fs } from '../shared/DialogShell'
 import { SuggestionRow } from '../Dawarich/DawarichSuggestionsPanel'
 import { timeRange } from '../Dawarich/dawarichSuggestionModel'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -28,6 +29,7 @@ export default function JourneyDayDawarich({
   busyId,
   onAccept,
   onDismiss,
+  onTakeOverDay,
 }: {
   /** The open stays of this day, in the order they were lived. */
   suggestions: DawarichSuggestion[]
@@ -35,6 +37,8 @@ export default function JourneyDayDawarich({
   busyId: number | null
   onAccept: (suggestion: DawarichSuggestion, target: DawarichSuggestionTarget) => void
   onDismiss: (suggestion: DawarichSuggestion) => void
+  /** Review the whole day with its stays and route instead of one stay at a time (JRN-02). */
+  onTakeOverDay?: () => void
 }): React.ReactElement | null {
   const { t } = useTranslation()
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
@@ -49,11 +53,12 @@ export default function JourneyDayDawarich({
 
   return (
     <div className="rounded-2xl border border-edge bg-surface-secondary overflow-hidden">
+      <div className="flex items-center">
       <button
         type="button"
         onClick={() => setOpen(v => !v)}
         aria-expanded={open}
-        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-start transition-colors hover:bg-surface-hover"
+        className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2.5 text-start transition-colors hover:bg-surface-hover"
       >
         {/* The brand mark in its own colours, which is what tells this row from an entry
             at a glance. No second label saying "Dawarich": the mark is the label. */}
@@ -68,6 +73,20 @@ export default function JourneyDayDawarich({
           ? <ChevronDown size={16} className="shrink-0 text-content-faint" aria-hidden />
           : <ChevronRight size={16} className="shrink-0 text-content-faint" aria-hidden />}
       </button>
+      {/* The whole day at once, beside the row: choosing, joining and naming
+          its stays together beats accepting them one by one. */}
+      {onTakeOverDay && (
+        <button
+          type="button"
+          onClick={onTakeOverDay}
+          className="me-2 inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-accent px-2.5 py-1.5 font-semibold text-accent-text transition-opacity hover:opacity-90"
+          style={fs(12, 'body')}
+        >
+          <ListChecks size={14} aria-hidden />
+          {t('journey.dayImport.open')}
+        </button>
+      )}
+      </div>
 
       {open && (
         <div className="flex flex-col gap-1 pb-2">

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

@@ -0,0 +1,68 @@
+// FE-JRN-DAY-IMPORT-BTN-001 to FE-JRN-DAY-IMPORT-BTN-005
+//
+// JRN-02: the day header's way into taking a day over with its stays.
+// JRN-03: the mark of a prepared day that is not final yet.
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import JourneyDayImportButton from './JourneyDayImportButton';
+
+function renderButton(props: Partial<Parameters<typeof JourneyDayImportButton>[0]> = {}) {
+  const onOpen = vi.fn();
+  const view = render(
+    <JourneyDayImportButton pending={0} canTakeOver needsConnection={false} onOpen={onOpen} {...props} />
+  );
+  return { onOpen, ...view };
+}
+
+describe('JourneyDayImportButton', () => {
+  it('FE-JRN-DAY-IMPORT-BTN-001: counts the stays still waiting on the day and opens the take-over', async () => {
+    const { onOpen } = renderButton({ pending: 6 });
+    const button = screen.getByTestId('journey-day-import');
+    expect(button).toHaveTextContent('6');
+    expect(button).toHaveAccessibleName('6 stays to review');
+    await userEvent.click(button);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-JRN-DAY-IMPORT-BTN-002: a day with nothing waiting still offers the take-over, without a number', () => {
+    renderButton();
+    const button = screen.getByTestId('journey-day-import');
+    expect(button).toHaveAccessibleName('Take over this day with its stays');
+    expect(button.textContent).toBe('');
+  });
+
+  it('FE-JRN-DAY-IMPORT-BTN-003: offline it stays dimmed and says why; without Dawarich or the right to edit it is not there', async () => {
+    const { onOpen, unmount } = renderButton({ canTakeOver: false, needsConnection: true, pending: 2 });
+    const button = screen.getByTestId('journey-day-import');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    await userEvent.click(button);
+    expect(onOpen).not.toHaveBeenCalled();
+    unmount();
+
+    renderButton({ canTakeOver: false, needsConnection: false });
+    expect(screen.queryByTestId('journey-day-import')).not.toBeInTheDocument();
+  });
+
+  it('FE-JRN-DAY-IMPORT-BTN-004: a prepared day still running carries a dot and says so after the count', () => {
+    renderButton({ pending: 6, prep: { state: 'running', failed: false, lastSuccessAt: null } });
+    expect(screen.getByTestId('journey-day-prep-unsettled')).toBeInTheDocument();
+    expect(screen.getByTestId('journey-day-import')).toHaveAccessibleName(
+      /^6 stays to review\s+The day is still running, more stays may follow\.$/
+    );
+  });
+
+  it('FE-JRN-DAY-IMPORT-BTN-005: a day fetched whole carries no dot, one whose refresh failed does', () => {
+    const { unmount } = renderButton({
+      prep: { state: 'complete', failed: false, lastSuccessAt: '2026-05-15T08:00:00Z' },
+    });
+    expect(screen.queryByTestId('journey-day-prep-unsettled')).not.toBeInTheDocument();
+    unmount();
+
+    renderButton({ prep: { state: 'complete', failed: true, lastSuccessAt: '2026-05-15T08:00:00Z' } });
+    expect(screen.getByTestId('journey-day-prep-unsettled')).toBeInTheDocument();
+    expect(screen.getByTestId('journey-day-import')).toHaveAccessibleName(
+      /The last refresh failed, this is the older state\./
+    );
+  });
+});

client/src/components/Journey/JourneyDayImportButton.tsx

@@ -0,0 +1,68 @@
+import { ListChecks } from 'lucide-react';
+import type React from 'react';
+import { useTranslation } from '../../i18n';
+import { fs } from '../shared/DialogShell';
+import { Tooltip } from '../shared/Tooltip';
+import { dayPrepText, dayPrepUnsettled, type JourneyDayPrep } from './journeyRecordingPrepModel';
+
+/**
+ * Taking a day over with its stays (JRN-02), in the day header beside the
+ * route: for an editor whose Dawarich answers, with the number of stays still
+ * waiting on the day; offline it stays, dimmed, and says why. While the
+ * journey prepares its days (JRN-03), a dot marks a day that is not final yet
+ * (still running, fetched before it ended, not fetched, or stale after a
+ * failed refresh) and the tooltip says which.
+ */
+export default function JourneyDayImportButton({
+  pending,
+  canTakeOver,
+  needsConnection,
+  prep,
+  onOpen,
+}: {
+  /** Stays of the day nobody decided on yet. */
+  pending: number;
+  canTakeOver: boolean;
+  needsConnection: boolean;
+  /** Where preparing the day stands; absent while the journey does not prepare it. */
+  prep?: JourneyDayPrep | null;
+  onOpen: () => void;
+}): React.ReactElement | null {
+  const { t, locale } = useTranslation();
+  if (!canTakeOver && !needsConnection) return null;
+  const base = !canTakeOver
+    ? t('dawarich.error.offline')
+    : pending > 0
+      ? t('journey.dayImport.pending', { count: pending })
+      : t('journey.dayImport.openHint');
+  const unsettled = canTakeOver && dayPrepUnsettled(prep);
+  // The tooltip breaks before the second line; a screen reader reads both as one.
+  const label = unsettled && prep ? `${base}\n${dayPrepText(prep, t, locale)}` : base;
+  return (
+    <Tooltip label={label} placement="top">
+      <button
+        type="button"
+        onClick={canTakeOver ? onOpen : undefined}
+        aria-disabled={!canTakeOver}
+        aria-label={label}
+        data-testid="journey-day-import"
+        className="inline-flex h-7 items-center gap-1 rounded-full px-2 text-content-secondary transition-colors aria-disabled:cursor-default aria-disabled:opacity-40 [&:not([aria-disabled=true])]:hover:bg-surface-hover"
+        style={{ background: 'var(--vg-surf2)' }}
+      >
+        <ListChecks size={14} strokeWidth={2.2} aria-hidden="true" />
+        {pending > 0 && (
+          <span className="font-bold tabular-nums" style={fs(10.5)}>
+            {pending}
+          </span>
+        )}
+        {unsettled && (
+          <span
+            data-testid="journey-day-prep-unsettled"
+            className="h-1.5 w-1.5 rounded-full bg-warning"
+            aria-hidden="true"
+          />
+        )}
+      </button>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,200 @@
+// FE-JRN-DAYIMPORT-DIALOG-001 to FE-JRN-DAYIMPORT-DIALOG-008
+//
+// JRN-02: the desktop dialog that takes a recorded day over with its stays. It
+// names the journey and the day, shows the stays on the map and in a list to
+// choose, rename and join, what the journal holds on the day already and who
+// sees the drafts, and writes only on its button.
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildDayStay, buildDayStays, buildRecordingPreview } from '../../../tests/helpers/journeyRecording';
+import { render, screen, waitFor, within } from '../../../tests/helpers/render';
+import JourneyDayImportDialog from './JourneyDayImportDialog';
+import type { JourneyRecordingPrepState } from './useJourneyRecordingPrep';
+
+const repo = vi.hoisted(() => ({
+  reviewDay: vi.fn(),
+  takeOverDay: vi.fn(),
+  preview: vi.fn(),
+  save: vi.fn(),
+  remove: vi.fn(),
+}));
+vi.mock('../../repo/journeyRecordingsRepo', () => ({ journeyRecordingsRepo: repo }));
+
+const toast = { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() };
+vi.mock('../shared/Toast', () => ({ useToast: () => toast }));
+
+const map = vi.hoisted(() => ({ props: {} as Record<string, unknown> }));
+vi.mock('./JourneyMapAuto', () => ({
+  default: (props: Record<string, unknown>) => {
+    map.props = props;
+    return <div data-testid="day-map" />;
+  },
+}));
+
+function renderDialog(prep?: JourneyRecordingPrepState) {
+  const props = { onTakenOver: vi.fn(), onKept: vi.fn(), onClose: vi.fn() };
+  render(
+    <JourneyDayImportDialog
+      journeyId={7}
+      journeyTitle="Venice"
+      date="2026-05-14"
+      dayColor="#ff0055"
+      storedRoute={undefined}
+      prep={prep}
+      {...props}
+    />
+  );
+  return props;
+}
+
+function prepState(over: Partial<JourneyRecordingPrepState> = {}): JourneyRecordingPrepState {
+  return {
+    prep: {
+      enabled: true,
+      connection: 'ready',
+      lastAttemptAt: '2026-05-16T08:00:00.000Z',
+      lastSuccessAt: '2026-05-14T18:00:00.000Z',
+      lastError: 'unreachable',
+    },
+    saving: false,
+    fetching: false,
+    statusLine: { text: 'The last refresh failed: Dawarich did not answer.', tone: 'warning' },
+    canFetch: true,
+    setEnabled: vi.fn(),
+    fetchNow: vi.fn(async () => {}),
+    dayPrep: () => ({ state: 'provisional', failed: true, lastSuccessAt: '2026-05-14T18:00:00.000Z' }),
+    ...over,
+  };
+}
+
+const rowOf = (name: string) =>
+  screen.getByRole('checkbox', { name: `Take over ${name}` }).closest('[data-stay-id]') as HTMLElement;
+
+beforeEach(() => {
+  for (const fn of [...Object.values(repo), ...Object.values(toast)]) fn.mockReset();
+  repo.reviewDay.mockResolvedValue(
+    buildDayStays({
+      entries: [{ id: 3, title: 'Breakfast at the hotel', locationName: null, entryTime: '08:00', isDraft: false }],
+      audience: 2,
+    })
+  );
+  repo.preview.mockResolvedValue(buildRecordingPreview());
+  repo.takeOverDay.mockResolvedValue({
+    entries: [{ id: 5, title: 'Piazza San Marco', stayCount: 2 }],
+    alreadyTaken: [],
+    skipped: [],
+  });
+});
+
+describe('JourneyDayImportDialog', () => {
+  it('FE-JRN-DAYIMPORT-DIALOG-001: names the journey and the day, and shows the stays, the route and the day so far', async () => {
+    renderDialog();
+
+    expect(await screen.findByRole('checkbox', { name: 'Take over Parcheggio' })).toBeChecked();
+    expect(screen.getByText('Venice')).toBeInTheDocument();
+    expect(screen.getByText(/May 14, 2026/)).toBeInTheDocument();
+    expect(screen.getByTestId('day-map')).toBeInTheDocument();
+    expect(map.props.entries).toHaveLength(4);
+    expect(screen.getByText('Breakfast at the hotel')).toBeInTheDocument();
+    expect(screen.getByText(/2 other people on this journey see them/)).toBeInTheDocument();
+    expect(within(rowOf('Parcheggio')).getByText('Unconfirmed')).toBeInTheDocument();
+    expect(await screen.findByText("Keep the day's route too")).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Take over 3 drafts' })).toBeEnabled();
+    expect(repo.takeOverDay).not.toHaveBeenCalled();
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-002: the same place twice starts joined under one title, and can be kept apart', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+    await screen.findByRole('checkbox', { name: 'Take over Parcheggio' });
+
+    expect(screen.getByRole('textbox', { name: 'Title of the entry' })).toHaveValue('Piazza San Marco');
+    await user.click(screen.getByRole('button', { name: 'Keep apart' }));
+
+    expect(screen.queryByRole('textbox', { name: 'Title of the entry' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Take over 4 drafts' })).toBeInTheDocument();
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-003: a stay left out is dimmed and counted, and the drafts are written on the button', async () => {
+    const user = userEvent.setup();
+    const props = renderDialog();
+    await screen.findByRole('checkbox', { name: 'Take over Parcheggio' });
+
+    await user.click(screen.getByRole('checkbox', { name: 'Take over Parcheggio' }));
+    expect(rowOf('Parcheggio').className).toContain('opacity-60');
+    expect(screen.getByText('1 left out')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Take over 2 drafts' }));
+
+    await waitFor(() => expect(props.onClose).toHaveBeenCalled());
+    expect(repo.takeOverDay).toHaveBeenCalledWith(
+      7,
+      '2026-05-14',
+      expect.objectContaining({ skipSuggestionIds: [10] })
+    );
+    expect(props.onTakenOver).toHaveBeenCalled();
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-004: a day report gathers every chosen stay under one title', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+    await screen.findByRole('checkbox', { name: 'Take over Parcheggio' });
+
+    await user.click(screen.getByRole('button', { name: 'Day report' }));
+
+    expect(screen.getByRole('textbox', { name: 'Title of the entry' })).toHaveValue('Day of May 14');
+    expect(screen.queryByRole('button', { name: 'Keep apart' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Take over 1 draft' }));
+    await waitFor(() => expect(repo.takeOverDay).toHaveBeenCalled());
+    expect(repo.takeOverDay.mock.calls[0]?.[2]).toMatchObject({
+      groups: [{ kind: 'report', title: 'Day of May 14', anchorSuggestionId: 12 }],
+    });
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-005: a stay the journal holds is shown with its entry and cannot be chosen again', async () => {
+    repo.reviewDay.mockResolvedValue(
+      buildDayStays({
+        stays: [buildDayStay({ suggestionId: 11, status: 'here', entry: { id: 4, title: 'Morning in San Marco' } })],
+      })
+    );
+    renderDialog();
+
+    const box = await screen.findByRole('checkbox', { name: 'Take over Piazza San Marco' });
+    expect(box).toBeDisabled();
+    expect(box).not.toBeChecked();
+    expect(screen.getByText('In Morning in San Marco')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Take over 0 drafts' })).toBeDisabled();
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-006: when Dawarich does not answer, the stays of the last sync are shown with the reason', async () => {
+    repo.reviewDay.mockResolvedValue(
+      buildDayStays({ fresh: false, error: 'unreachable', syncedAt: '2026-05-14T20:00:00Z', truncated: true })
+    );
+    renderDialog();
+
+    expect(await screen.findByText(/Dawarich did not answer/)).toBeInTheDocument();
+    expect(screen.getByText(/Some stays may be missing/)).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Take over Rialto' })).toBeChecked();
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-007: an unsettled prepared day says why, with the caller status and a fetch by hand', async () => {
+    const user = userEvent.setup();
+    const prep = prepState();
+    renderDialog(prep);
+
+    expect(await screen.findByText(/before the day ended, so stays may be missing/)).toBeInTheDocument();
+    expect(screen.getByText(/this is the older state/)).toBeInTheDocument();
+    expect(screen.getByTestId('journey-prep-status')).toHaveTextContent(
+      'The last refresh failed: Dawarich did not answer.'
+    );
+    await user.click(screen.getByRole('button', { name: 'Fetch now' }));
+    expect(prep.fetchNow).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-JRN-DAYIMPORT-DIALOG-008: without the journey preparing its days, no status and no day notice', async () => {
+    renderDialog(prepState({ statusLine: null, canFetch: false, dayPrep: () => null }));
+
+    expect(await screen.findByRole('checkbox', { name: 'Take over Parcheggio' })).toBeChecked();
+    expect(screen.queryByTestId('journey-prep-status')).not.toBeInTheDocument();
+    expect(screen.queryByText(/this is the older state/)).not.toBeInTheDocument();
+  });
+});

client/src/components/Journey/JourneyDayImportDialog.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from '../../i18n';
+import DawarichDayDialog from './DawarichDayDialog';
+import { JourneyDayImportActions, JourneyDayImportReview } from './JourneyDayImportReview';
+import { useJourneyDayImport, type JourneyDayImportViewProps } from './useJourneyDayImport';
+
+/**
+ * Taking a recorded day with its stays into the journal (JRN-02), on the
+ * desktop: the route, the stays and the day's entries in the body, the drafts
+ * written only on the button that says how many.
+ */
+export default function JourneyDayImportDialog({
+  journeyTitle,
+  date,
+  dayColor,
+  onClose,
+  prep,
+  ...rest
+}: JourneyDayImportViewProps) {
+  const { t } = useTranslation();
+  const state = useJourneyDayImport({ date, dayColor, onClose, ...rest });
+
+  return (
+    <DawarichDayDialog
+      journeyTitle={state.review?.journey.title ?? journeyTitle}
+      date={date}
+      sub={t('journey.dayImport.sub')}
+      onClose={onClose}
+      footer={<JourneyDayImportActions state={state} onCancel={onClose} />}
+    >
+      <JourneyDayImportReview state={state} dayColor={dayColor} prep={prep} />
+    </DawarichDayDialog>
+  );
+}

client/src/components/Journey/JourneyDayImportReview.tsx

@@ -0,0 +1,280 @@
+import { Clock, FilePen, Loader2, RefreshCw, Route, Users } from 'lucide-react';
+import { useTranslation } from '../../i18n';
+import { useSettingsStore } from '../../store/settingsStore';
+import { formatClockTime } from '../../utils/formatters';
+import { formatDistance } from '../../utils/units';
+import { SoftPill } from '../Planner/planParts';
+import ToggleSwitch from '../Settings/ToggleSwitch';
+import { Segmented } from '../shared/dialogParts';
+import { DialogButton, DialogSection, FooterSpacer, fs } from '../shared/DialogShell';
+import { Tooltip } from '../shared/Tooltip';
+import { JourneyDayImportStays } from './JourneyDayImportStays';
+import JourneyMap from './JourneyMapAuto';
+import { reasonText } from './journeyRecordingModel';
+import { dayPrepNotice } from './journeyRecordingPrepModel';
+import { JourneyRecordingPrepStatus } from './JourneyRecordingPrepSetting';
+import { Notice } from './JourneyRecordingReview';
+import { stayMarkerId, type JourneyDayImportState } from './useJourneyDayImport';
+import type { JourneyRecordingPrepState } from './useJourneyRecordingPrep';
+
+type Props = { state: JourneyDayImportState; dayColor: string; prep?: JourneyRecordingPrepState };
+
+/**
+ * Why the list may not be the whole day, and what went wrong on the way. With
+ * the journey preparing its days, why this day is not final yet and how the
+ * caller's own preparation stands, so an editor sees it without the settings.
+ */
+function DayNotices({ state, prep }: { state: JourneyDayImportState; prep?: JourneyRecordingPrepState }) {
+  const { t, locale } = useTranslation();
+  const { review, outcome } = state;
+  const reason = review ? reasonText(review.error, t) : '';
+  const day = prep?.dayPrep(state.date);
+  const dayNotice = day ? dayPrepNotice(day, t, locale) : '';
+  return (
+    <>
+      {outcome?.kind === 'failed' && (
+        <Notice tone="danger">{t('journey.dayImport.failed', { reason: outcome.reason })}</Notice>
+      )}
+      {outcome?.kind === 'route' && (
+        <Notice tone="warning">{t('journey.dayImport.routeFailed', { reason: outcome.reason })}</Notice>
+      )}
+      {review && !review.fresh && (
+        <Notice tone="warning">
+          {review.syncedAt
+            ? t('journey.dayImport.stale', {
+                reason,
+                date: new Date(review.syncedAt).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' }),
+              })
+            : t('journey.dayImport.staleNever', { reason })}
+        </Notice>
+      )}
+      {review?.truncated && <Notice tone="warning">{t('journey.dayImport.truncated')}</Notice>}
+      {state.running && <Notice tone="info">{t('journey.dayImport.running')}</Notice>}
+      {dayNotice && <Notice tone="warning">{dayNotice}</Notice>}
+      {prep && <JourneyRecordingPrepStatus prep={prep} />}
+    </>
+  );
+}
+
+/** The day's route under the pins: kept already, to keep along, kept in another version, or none recorded. */
+function RouteLine({ state }: { state: JourneyDayImportState }) {
+  const { t } = useTranslation();
+  const unit = useSettingsStore((s) => s.settings.distance_unit) ?? 'metric';
+  const { route } = state;
+  const distance = route.distanceMeters === null ? null : formatDistance(route.distanceMeters / 1000, unit);
+  if (route.offer === 'loading') {
+    return (
+      <p className="m-0 flex items-center gap-1.5 text-content-faint" style={fs(11.5)}>
+        <Loader2 size={12} className="animate-spin" aria-hidden="true" />
+        {t('journey.recording.loading')}
+      </p>
+    );
+  }
+  if (route.offer === 'keep') {
+    return (
+      <div className="flex items-center justify-between gap-3">
+        <span className="min-w-0">
+          <span className="block text-content" style={fs(12.5, 'body')}>
+            {t('journey.dayImport.keepRoute')}
+          </span>
+          <span className="block text-content-faint" style={fs(11.5)}>
+            {t('journey.dayImport.keepRouteHint', { distance: distance ?? '' })}
+          </span>
+        </span>
+        <ToggleSwitch on={route.keep} onToggle={route.toggle} label={t('journey.dayImport.keepRoute')} />
+      </div>
+    );
+  }
+  if (route.offer === 'none') {
+    return (
+      <p className="m-0 text-content-faint" style={fs(11.5)}>
+        {t('journey.dayImport.routeNone')}
+      </p>
+    );
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {distance && <SoftPill icon={<Route size={11} aria-hidden="true" />}>{distance}</SoftPill>}
+      <SoftPill tone="success">{t('journey.dayImport.routeKept')}</SoftPill>
+      {route.offer === 'differs' && (
+        <span className="text-content-faint" style={fs(11.5)}>
+          {t('journey.dayImport.routeDiffers')}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** What the journal has on the day already, so nothing is taken over twice by hand. */
+function DayEntries({ state }: { state: JourneyDayImportState }) {
+  const { t } = useTranslation();
+  const is12h = useSettingsStore((s) => s.settings.time_format) === '12h';
+  const entries = state.review?.entries ?? [];
+  if (entries.length === 0) return null;
+  return (
+    <DialogSection label={t('journey.dayImport.existing')}>
+      <ul className="m-0 flex list-none flex-col gap-1 p-0">
+        {entries.map((entry) => (
+          <li
+            key={entry.id}
+            className="flex min-w-0 items-center gap-1.5 text-content-secondary"
+            style={fs(12.5, 'body')}
+          >
+            <span className="truncate">{entry.title || entry.locationName || t('journey.dayImport.untitled')}</span>
+            {entry.entryTime && (
+              <SoftPill icon={<Clock size={11} aria-hidden="true" />}>
+                {formatClockTime(entry.entryTime, is12h)}
+              </SoftPill>
+            )}
+            {entry.isDraft && (
+              <SoftPill icon={<FilePen size={11} aria-hidden="true" />}>{t('journey.dayImport.draft')}</SoftPill>
+            )}
+          </li>
+        ))}
+      </ul>
+    </DialogSection>
+  );
+}
+
+function scrollToStay(id: string): void {
+  document
+    .querySelector(`[data-stay-id="${id.replace('stay-', '')}"]`)
+    ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
+/**
+ * Reviewing a recorded day with its stays (JRN-02): the route and the stays on
+ * one map, the stays as a list to choose, rename and join, what the journal
+ * holds on the day already, and who will see the drafts. The body of the
+ * desktop dialog and of the phone sheet alike.
+ */
+export function JourneyDayImportReview({ state, dayColor, prep }: Props) {
+  const { t } = useTranslation();
+  const { review, choice } = state;
+  if (!review) {
+    if (state.error) {
+      return (
+        <div className="flex flex-col gap-2">
+          <Notice tone="danger">{state.error}</Notice>
+          <span>
+            <DialogButton onClick={state.retry} icon={<RefreshCw size={14} aria-hidden="true" />}>
+              {t('journey.recording.retry')}
+            </DialogButton>
+          </span>
+        </div>
+      );
+    }
+    return (
+      <p className="m-0 flex items-center gap-2 py-6 text-content-muted" role="status" style={fs(12.5, 'body')}>
+        <Loader2 size={15} className="animate-spin" aria-hidden="true" />
+        {t('journey.dayImport.loading')}
+      </p>
+    );
+  }
+  return (
+    <>
+      <DayNotices state={state} prep={prep} />
+      <DialogSection label={t('journey.dayImport.map')}>
+        <div className="flex flex-col gap-2.5">
+          <div className="overflow-hidden rounded-[12px] border border-edge-faint">
+            <JourneyMap
+              checkins={[]}
+              entries={state.mapEntries}
+              tracks={state.mapTracks}
+              height={200}
+              activeMarkerId={state.activeStay === null ? null : stayMarkerId(state.activeStay)}
+              onMarkerClick={scrollToStay}
+            />
+          </div>
+          <RouteLine state={state} />
+        </div>
+      </DialogSection>
+      <DialogSection
+        label={t('journey.dayImport.stays')}
+        action={
+          choice && review.stays.length > 1 ? (
+            <Segmented
+              label={t('journey.dayImport.stays')}
+              value={choice.mode}
+              onChange={state.setMode}
+              options={[
+                { value: 'entries', label: t('journey.dayImport.modeEntries') },
+                { value: 'report', label: t('journey.dayImport.modeReport') },
+              ]}
+            />
+          ) : undefined
+        }
+      >
+        {review.stays.length === 0 ? (
+          <Notice tone="info">{t('journey.dayImport.empty')}</Notice>
+        ) : (
+          <JourneyDayImportStays state={state} dayColor={dayColor} />
+        )}
+      </DialogSection>
+      <DayEntries state={state} />
+      <p className="m-0 flex items-start gap-2 text-content-muted" style={fs(12, 'body')}>
+        <Users size={14} className="mt-px flex-none" aria-hidden="true" />
+        {review.audience > 0
+          ? t('journey.dayImport.audience', { count: review.audience })
+          : t('journey.dayImport.draftsNote')}
+      </p>
+    </>
+  );
+}
+
+/**
+ * The buttons under the review: how many stays are left out, close, and the
+ * one that takes the chosen stays over as drafts, saying why when it cannot
+ * yet. After a route that was not kept, it offers the route alone again.
+ */
+export function JourneyDayImportActions({ state, onCancel }: { state: JourneyDayImportState; onCancel: () => void }) {
+  const { t } = useTranslation();
+  const { problem, busy } = state;
+  const working = busy !== null;
+  if (state.outcome?.kind === 'route') {
+    return (
+      <>
+        <FooterSpacer />
+        <DialogButton onClick={onCancel}>{t('common.close')}</DialogButton>
+        <DialogButton
+          variant="primary"
+          onClick={state.retryRoute}
+          disabled={working}
+          icon={busy === 'route' ? <Loader2 size={14} className="animate-spin" aria-hidden="true" /> : undefined}
+        >
+          {t('journey.dayImport.routeRetry')}
+        </DialogButton>
+      </>
+    );
+  }
+  const submit = (
+    <DialogButton
+      variant="primary"
+      onClick={state.submit}
+      disabled={problem !== null || working || state.loading}
+      icon={busy === 'submit' ? <Loader2 size={14} className="animate-spin" aria-hidden="true" /> : undefined}
+    >
+      {t('journey.dayImport.submit', { count: state.groups.length })}
+    </DialogButton>
+  );
+  return (
+    <>
+      {state.skipCount > 0 && (
+        <Tooltip label={t('journey.dayImport.skipHint')} placement="top">
+          <button type="button" className="inline-flex cursor-default">
+            <SoftPill>{t('journey.dayImport.skipped', { count: state.skipCount })}</SoftPill>
+          </button>
+        </Tooltip>
+      )}
+      <FooterSpacer />
+      <DialogButton onClick={onCancel}>{t('common.cancel')}</DialogButton>
+      {problem !== null && state.review && state.review.stays.length > 0 ? (
+        <Tooltip label={t(`journey.dayImport.problem.${problem}`)} placement="top">
+          <span className="inline-flex">{submit}</span>
+        </Tooltip>
+      ) : (
+        submit
+      )}
+    </>
+  );
+}

client/src/components/Journey/JourneyDayImportStays.tsx

@@ -0,0 +1,270 @@
+import type { JourneyDayStay } from '@trek/shared';
+import { Check, Clock, Gauge, HelpCircle, Hourglass, Link2, MapPinOff, Unlink2 } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { useTranslation } from '../../i18n';
+import { useSettingsStore } from '../../store/settingsStore';
+import { formatDuration, timeRange } from '../Dawarich/dawarichSuggestionModel';
+import { SoftPill } from '../Planner/planParts';
+import { INPUT, PANEL, PillSelect } from '../shared/dialogParts';
+import { fs } from '../shared/DialogShell';
+import { Tooltip } from '../shared/Tooltip';
+import { canJoin, isTakeable, nameOf, REPORT_KEY, type DayImportGroup } from './journeyDayImportModel';
+import type { JourneyDayImportState } from './useJourneyDayImport';
+
+type Props = { state: JourneyDayImportState; dayColor: string };
+
+/** A fact about a stay with what it means on hover. */
+function Hinted({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Tooltip label={label} placement="top">
+      <button type="button" className="inline-flex cursor-default">
+        {children}
+      </button>
+    </Tooltip>
+  );
+}
+
+/** Where a stay stands, when it is not simply open: in this journal already, taken elsewhere, or left out before. */
+function StatusPill({ stay }: { stay: JourneyDayStay }) {
+  const { t } = useTranslation();
+  if (stay.status === 'here') {
+    return (
+      <SoftPill tone="success" icon={<Check size={11} aria-hidden="true" />}>
+        {stay.entry?.title
+          ? t('journey.dayImport.statusHere', { title: stay.entry.title })
+          : t('journey.dayImport.statusHereUntitled')}
+      </SoftPill>
+    );
+  }
+  if (stay.status === 'elsewhere') {
+    return (
+      <Hinted label={t('journey.dayImport.statusElsewhereHint')}>
+        <SoftPill icon={<Check size={11} aria-hidden="true" />}>{t('journey.dayImport.statusElsewhere')}</SoftPill>
+      </Hinted>
+    );
+  }
+  if (stay.status === 'skipped') return <SoftPill>{t('journey.dayImport.statusSkipped')}</SoftPill>;
+  return null;
+}
+
+/** When, how long, how sure Dawarich is and whether it has a place: every fact the recording gives, no more. */
+function StayFacts({ stay }: { stay: JourneyDayStay }) {
+  const { t } = useTranslation();
+  const is12h = useSettingsStore((s) => s.settings.time_format) === '12h';
+  return (
+    <div className="mt-1.5 flex flex-wrap items-center gap-1">
+      <SoftPill icon={<Clock size={11} aria-hidden="true" />}>
+        {timeRange(stay.startedAt, stay.endedAt, is12h)}
+      </SoftPill>
+      <SoftPill icon={<Hourglass size={11} aria-hidden="true" />}>{formatDuration(stay.durationMinutes, t)}</SoftPill>
+      {stay.sourceStatus === 'suggested' && (
+        <Hinted label={t('dawarich.sourceStatus.suggested')}>
+          <SoftPill tone="warning" icon={<HelpCircle size={11} aria-hidden="true" />}>
+            {t('journey.dayImport.unconfirmed')}
+          </SoftPill>
+        </Hinted>
+      )}
+      {stay.confidenceBand === 'low' && (
+        <Hinted label={t('dawarich.confidence.low')}>
+          <SoftPill tone="warning" icon={<Gauge size={11} aria-hidden="true" />}>
+            {t('dawarich.badge.lowConfidence')}
+          </SoftPill>
+        </Hinted>
+      )}
+      {stay.lat === null && (
+        <Hinted label={t('journey.dayImport.noPlaceHint')}>
+          <SoftPill icon={<MapPinOff size={11} aria-hidden="true" />}>{t('journey.dayImport.noPlace')}</SoftPill>
+        </Hinted>
+      )}
+      <StatusPill stay={stay} />
+    </div>
+  );
+}
+
+/** One stay: chosen or not, its number on the map, its name to correct, and its facts. */
+function StayRow({ state, dayColor, stay, index }: Props & { stay: JourneyDayStay; index: number }) {
+  const { t } = useTranslation();
+  const { choice } = state;
+  const takeable = isTakeable(stay);
+  const chosen = takeable && !!choice?.selected.has(stay.suggestionId);
+  const name = choice ? nameOf(choice, stay) : stay.name;
+  const active = state.activeStay === stay.suggestionId;
+  return (
+    <div
+      data-stay-id={stay.suggestionId}
+      onMouseEnter={() => state.setActiveStay(stay.suggestionId)}
+      onMouseLeave={() => state.setActiveStay(null)}
+      className={`flex items-start gap-2.5 rounded-[12px] border px-2.5 py-2 transition-opacity ${
+        active ? 'border-edge' : 'border-edge-faint'
+      } ${chosen ? 'bg-surface-card' : 'bg-surface-secondary opacity-60'}`}
+    >
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={chosen}
+        aria-label={t('journey.dayImport.choose', { name })}
+        disabled={!takeable || state.busy !== null}
+        onClick={() => state.toggle(stay.suggestionId)}
+        className={`mt-1.5 grid h-[18px] w-[18px] flex-none place-items-center rounded-[5px] border ${
+          chosen ? 'border-transparent bg-accent text-accent-text' : 'border-edge bg-surface-card'
+        } disabled:cursor-default`}
+      >
+        {chosen && <Check size={12} strokeWidth={3} aria-hidden="true" />}
+      </button>
+      <span
+        aria-hidden="true"
+        className={`mt-1 grid h-[22px] min-w-[22px] flex-none place-items-center rounded-full border-2 bg-surface-card px-1 font-bold tabular-nums ${
+          chosen ? 'text-content' : 'border-edge text-content-faint'
+        }`}
+        style={{ ...fs(10.5), ...(chosen ? { borderColor: dayColor } : {}) }}
+      >
+        {index + 1}
+      </span>
+      <div className="min-w-0 flex-1">
+        <input
+          value={name}
+          onChange={(e) => state.rename(stay, e.target.value)}
+          disabled={!chosen || state.busy !== null}
+          aria-label={t('journey.dayImport.name', { name: stay.name })}
+          placeholder={stay.name}
+          className={INPUT}
+        />
+        <StayFacts stay={stay} />
+      </div>
+    </div>
+  );
+}
+
+/** Between two chosen stays: join them into one entry, or separate them again. */
+function JoinToggle({ state, stay }: { state: JourneyDayImportState; stay: JourneyDayStay }) {
+  const { t } = useTranslation();
+  const joined = !!state.choice?.joined.has(stay.suggestionId);
+  const label = joined ? t('journey.dayImport.split') : t('journey.dayImport.join');
+  return (
+    <div className="flex justify-center">
+      <button
+        type="button"
+        onClick={() => state.join(stay.suggestionId)}
+        disabled={state.busy !== null}
+        aria-pressed={joined}
+        className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 font-medium text-content-muted transition-colors hover:bg-surface-hover hover:text-content"
+        style={fs(11)}
+      >
+        {joined ? <Unlink2 size={12} aria-hidden="true" /> : <Link2 size={12} aria-hidden="true" />}
+        {label}
+      </button>
+    </div>
+  );
+}
+
+/** The title and the map position of an entry made of several stays: both chosen on purpose, both shown. */
+function GroupHead({ state, group }: { state: JourneyDayImportState; group: DayImportGroup }) {
+  const { t } = useTranslation();
+  const isReport = group.key === REPORT_KEY;
+  const typed = state.choice?.titles[group.key];
+  const anchor = state.anchorOf(group.key);
+  const options = [
+    ...group.stays
+      .filter((stay) => stay.lat !== null)
+      .map((stay) => ({
+        value: String(stay.suggestionId),
+        label: state.choice ? nameOf(state.choice, stay) : stay.name,
+      })),
+    ...(isReport ? [{ value: 'none', label: t('journey.dayImport.noPin') }] : []),
+  ];
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <input
+        value={typed ?? (isReport ? state.reportDefault : nameOfAnchor(state, group, anchor))}
+        onChange={(e) => state.setTitle(group.key, e.target.value)}
+        aria-label={t('journey.dayImport.groupTitle')}
+        disabled={state.busy !== null}
+        className={`${INPUT} min-w-[160px] flex-1`}
+      />
+      {options.length > 0 && (
+        <PillSelect
+          quiet
+          label={t('journey.dayImport.groupPin')}
+          value={anchor === null ? 'none' : String(anchor)}
+          options={options}
+          onChange={(value) => state.setAnchor(group.key, value === 'none' ? null : Number(value))}
+        />
+      )}
+    </div>
+  );
+}
+
+function nameOfAnchor(state: JourneyDayImportState, group: DayImportGroup, anchor: number | null): string {
+  const stay = group.stays.find((s) => s.suggestionId === anchor) ?? group.stays[0];
+  return stay && state.choice ? nameOf(state.choice, stay) : '';
+}
+
+/** The day report: one entry for all chosen stays, its title and its one map position. */
+function ReportBox({ state }: { state: JourneyDayImportState }) {
+  const { t } = useTranslation();
+  const report = state.groups.find((group) => group.kind === 'report');
+  return (
+    <div className={PANEL}>
+      {report ? (
+        <GroupHead state={state} group={report} />
+      ) : (
+        <p className="m-0 text-content-muted" style={fs(12, 'body')}>
+          {t('journey.dayImport.reportNeedsTwo')}
+        </p>
+      )}
+      <p className="m-0 text-content-faint" style={fs(11.5)}>
+        {t('journey.dayImport.reportHint')}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The stays of the day in the order they were lived, numbered like their pins:
+ * chosen ones in front, the rest dimmed, joined ones framed under the title and
+ * position of the entry they become. In report mode all chosen stays become
+ * one report, so there is nothing to join.
+ */
+export function JourneyDayImportStays({ state, dayColor }: Props) {
+  const { stays, choice } = state;
+  if (!choice) return null;
+  const merged = new Map(
+    state.groups.filter((group) => group.kind === 'merged').map((group) => [group.key, group] as const)
+  );
+  const inGroup = new Set([...merged.values()].flatMap((group) => group.stays.slice(1).map((s) => s.suggestionId)));
+  return (
+    <div className="flex flex-col gap-1.5">
+      {choice.mode === 'report' && <ReportBox state={state} />}
+      {stays.map((stay, index) => {
+        if (inGroup.has(stay.suggestionId)) return null;
+        const group = merged.get(stay.suggestionId);
+        const toggle = canJoin(choice, stays, index) ? <JoinToggle state={state} stay={stay} /> : null;
+        if (!group) {
+          return (
+            <div key={stay.suggestionId} className="flex flex-col gap-1.5">
+              {toggle}
+              <StayRow state={state} dayColor={dayColor} stay={stay} index={index} />
+            </div>
+          );
+        }
+        return (
+          <div key={stay.suggestionId} className="flex flex-col gap-1.5">
+            {toggle}
+            <div className={PANEL}>
+              <GroupHead state={state} group={group} />
+              {group.stays.map((member, offset) => {
+                const at = index + offset;
+                return (
+                  <div key={member.suggestionId} className="flex flex-col gap-1.5">
+                    {offset > 0 && <JoinToggle state={state} stay={member} />}
+                    <StayRow state={state} dayColor={dayColor} stay={member} index={at} />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+// FE-JRN-DAY-RECORDING-BTN-001 to FE-JRN-DAY-RECORDING-BTN-005
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { buildRecordedDay } from '../../../tests/helpers/journeyRecording';
+import { render, screen } from '../../../tests/helpers/render';
+import JourneyDayRecordingButton from './JourneyDayRecordingButton';
+
+function renderButton(props: Partial<Parameters<typeof JourneyDayRecordingButton>[0]> = {}) {
+  const onOpen = vi.fn();
+  render(
+    <JourneyDayRecordingButton
+      day={undefined}
+      canEdit
+      canTakeOver={false}
+      needsConnection={false}
+      onOpen={onOpen}
+      {...props}
+    />
+  );
+  return onOpen;
+}
+
+describe('JourneyDayRecordingButton', () => {
+  it('FE-JRN-DAY-RECORDING-BTN-001: a kept day shows how far it went and whose recording it is, and opens for an editor', async () => {
+    const onOpen = renderButton({ day: buildRecordedDay() });
+    const button = screen.getByTestId('journey-day-recording');
+    expect(button).toHaveTextContent('1.5 km');
+    expect(button.getAttribute('aria-label')).toMatch(/1\.5 km, taken over by marta/);
+    await userEvent.click(button);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-JRN-DAY-RECORDING-BTN-002: a viewer sees the kept day but cannot open it, and a running day says so', async () => {
+    const onOpen = renderButton({ day: buildRecordedDay({ provisional: true, importedBy: null }), canEdit: false });
+    const button = screen.getByTestId('journey-day-recording');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button.getAttribute('aria-label')).toMatch(/taken over on .*The day was still running then\./);
+    await userEvent.click(button);
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  it('FE-JRN-DAY-RECORDING-BTN-003: without a kept day an editor whose Dawarich answers may take it over', async () => {
+    const onOpen = renderButton({ canTakeOver: true });
+    await userEvent.click(screen.getByRole('button', { name: 'Take over recording' }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-JRN-DAY-RECORDING-BTN-004: offline the offer stays, dimmed, and says why', async () => {
+    const onOpen = renderButton({ needsConnection: true });
+    const button = screen.getByTestId('journey-day-recording');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button.getAttribute('aria-label')).toMatch(/connection/);
+    await userEvent.click(button);
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  it('FE-JRN-DAY-RECORDING-BTN-005: nothing kept and nothing to offer draws nothing', () => {
+    renderButton();
+    expect(screen.queryByTestId('journey-day-recording')).toBeNull();
+  });
+});

client/src/components/Journey/JourneyDayRecordingButton.tsx

@@ -0,0 +1,86 @@
+import type { JourneyRecordedDay } from '@trek/shared';
+import { Route } from 'lucide-react';
+import type React from 'react';
+import { useTranslation } from '../../i18n';
+import { useSettingsStore } from '../../store/settingsStore';
+import { formatDistance } from '../../utils/units';
+import DawarichIcon from '../shared/DawarichIcon';
+import { fs } from '../shared/DialogShell';
+import { Tooltip } from '../shared/Tooltip';
+
+// aria-disabled rather than disabled: a disabled button gets no pointer events, and
+// the tooltip is what tells a viewer or an offline editor what they are looking at.
+const ROUND =
+  'grid h-7 w-7 place-items-center rounded-full transition-colors hover:bg-surface-hover aria-disabled:cursor-default aria-disabled:opacity-40';
+const PILL =
+  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-bold tabular-nums transition-colors aria-disabled:cursor-default [&:not([aria-disabled=true])]:hover:bg-surface-hover';
+
+/**
+ * The recorded route of one journey day in its header (JRN-01).
+ *
+ * A day that keeps its route shows how far it went, for everyone who can open
+ * the journey, with whose recording it is and since when in the tooltip; an
+ * editor opens it to check it against Dawarich again, replace it or drop it.
+ * A day without one offers an editor whose Dawarich answers to take it over;
+ * offline the offer stays, dimmed, and says why.
+ */
+export default function JourneyDayRecordingButton({
+  day,
+  canEdit,
+  canTakeOver,
+  needsConnection,
+  onOpen,
+}: {
+  day: JourneyRecordedDay | undefined;
+  canEdit: boolean;
+  canTakeOver: boolean;
+  needsConnection: boolean;
+  onOpen: () => void;
+}): React.ReactElement | null {
+  const { t, locale } = useTranslation();
+  const unit = useSettingsStore((s) => s.settings.distance_unit) ?? 'metric';
+
+  if (day) {
+    const distance = formatDistance(day.stats.distanceMeters / 1000, unit);
+    const date = new Date(day.savedAt).toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+    const kept = day.importedBy
+      ? t('journey.recording.keptBy', { distance, name: day.importedBy.username, date })
+      : t('journey.recording.keptOn', { distance, date });
+    const label = day.provisional ? `${kept} ${t('journey.recording.keptRunning')}` : kept;
+    return (
+      <Tooltip label={label} placement="top">
+        <button
+          type="button"
+          onClick={canEdit ? onOpen : undefined}
+          aria-disabled={!canEdit}
+          aria-label={label}
+          data-testid="journey-day-recording"
+          className={PILL}
+          style={{ ...fs(10.5), background: 'var(--vg-surf2)', color: 'var(--vg-ink)' }}
+        >
+          <Route size={12} strokeWidth={2.4} aria-hidden="true" />
+          {distance}
+          {day.provisional && <span className="h-1.5 w-1.5 rounded-full bg-warning" aria-hidden="true" />}
+        </button>
+      </Tooltip>
+    );
+  }
+
+  if (!canTakeOver && !needsConnection) return null;
+  const label = canTakeOver ? t('journey.recording.takeOver') : t('dawarich.error.offline');
+  return (
+    <Tooltip label={label} placement="top">
+      <button
+        type="button"
+        onClick={canTakeOver ? onOpen : undefined}
+        aria-disabled={!canTakeOver}
+        aria-label={label}
+        data-testid="journey-day-recording"
+        className={ROUND}
+        style={{ background: 'var(--vg-surf2)' }}
+      >
+        <DawarichIcon size={15} />
+      </button>
+    </Tooltip>
+  );
+}

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

@@ -1,4 +1,4 @@
-// FE-JRN-SETTINGS-001 to FE-JRN-SETTINGS-027
+// FE-JRN-SETTINGS-001 to FE-JRN-SETTINGS-029
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { http, HttpResponse } from 'msw'
@@ -7,6 +7,7 @@ import { render, screen, waitFor, within, fireEvent, act } from '../../../tests/
 import { server } from '../../../tests/helpers/msw/server'
 import { useJourneyStore, type JourneyDetail } from '../../store/journeyStore'
 import { JourneySettingsDialog } from './JourneyDetailPageSettingsDialog'
+import type { JourneyRecordingPrepState } from './useJourneyRecordingPrep'
 
 type ToastKind = 'success' | 'error' | 'warning' | 'info'
 
@@ -43,7 +44,7 @@ function buildJourney(overrides: Partial<JourneyDetail> = {}): JourneyDetail {
   }
 }
 
-function mountDialog(journey: JourneyDetail = buildJourney()) {
+function mountDialog(journey: JourneyDetail = buildJourney(), recordingPrep?: JourneyRecordingPrepState) {
   const onClose = vi.fn()
   const onSaved = vi.fn()
   const onOpenInvite = vi.fn()
@@ -55,6 +56,7 @@ function mountDialog(journey: JourneyDetail = buildJourney()) {
       onSaved={onSaved}
       onOpenInvite={onOpenInvite}
       onRefresh={onRefresh}
+      recordingPrep={recordingPrep}
     />,
   )
   return { ...utils, onClose, onSaved, onOpenInvite, onRefresh }
@@ -98,6 +100,19 @@ describe('JourneySettingsDialog', () => {
     await screen.findByRole('button', { name: /create share link/i })
   })
 
+  it('FE-JRN-SETTINGS-2683: lists the people a linked trip lets in under their own heading, and nothing without', () => {
+    const { unmount } = mountDialog()
+    expect(screen.queryByText('Through trips')).not.toBeInTheDocument()
+    unmount()
+
+    mountDialog(buildJourney({
+      trip_access: [{ user_id: 7, role: 'viewer', username: 'lena', avatar: null, trip_id: 5, trip_title: 'Italy Trip' }],
+    }))
+    expect(screen.getByText('Through trips')).toBeInTheDocument()
+    expect(screen.getByText('lena')).toBeInTheDocument()
+    expect(screen.getByText('via Italy Trip')).toBeInTheDocument()
+  })
+
   it('FE-JRN-SETTINGS-002: saves the edited title and subtitle', async () => {
     const user = userEvent.setup()
     const { onSaved } = mountDialog()
@@ -462,4 +477,40 @@ describe('JourneySettingsDialog', () => {
     await userEvent.click(screen.getByRole('button', { name: /Bring back dismissed suggestions/ }))
     expect(onRestoreSuggestions).toHaveBeenCalledTimes(1)
   })
+
+  function prepState(over: Partial<JourneyRecordingPrepState> = {}): JourneyRecordingPrepState {
+    return {
+      prep: { enabled: true, connection: 'ready', lastAttemptAt: null, lastSuccessAt: null, lastError: 'unreachable' },
+      saving: false,
+      fetching: false,
+      statusLine: { text: 'The first fetch failed: TREK could not reach that address.', tone: 'warning' },
+      canFetch: true,
+      setEnabled: vi.fn(async () => {}),
+      fetchNow: vi.fn(async () => {}),
+      dayPrep: () => null,
+      ...over,
+    }
+  }
+
+  it('FE-JRN-SETTINGS-028: the owner switches the preparation of recorded days and fetches by hand after a failure (JRN-03)', async () => {
+    const prep = prepState()
+    mountDialog(buildJourney({ auto_prepare_recordings: 1 }), prep)
+
+    expect(screen.getByTestId('journey-prep-status')).toHaveTextContent('The first fetch failed: TREK could not reach that address.')
+    await userEvent.click(screen.getByRole('button', { name: /Fetch now/ }))
+    expect(prep.fetchNow).toHaveBeenCalledTimes(1)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Prepare recorded days automatically' }))
+    expect(prep.setEnabled).toHaveBeenCalledWith(false)
+  })
+
+  it('FE-JRN-SETTINGS-029: without the Dawarich addon there is no switch, and no fetch where nothing can be reached', () => {
+    const { unmount } = mountDialog()
+    expect(screen.queryByText('Prepare recorded days automatically')).not.toBeInTheDocument()
+    unmount()
+
+    mountDialog(buildJourney(), prepState({ canFetch: false, statusLine: { text: 'Link a trip with dates: only its days are prepared.', tone: 'warning' } }))
+    expect(screen.getByText('Prepare recorded days automatically')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Fetch now/ })).not.toBeInTheDocument()
+  })
 })

client/src/components/Journey/JourneyDetailPageSettingsDialog.tsx

@@ -7,7 +7,9 @@ import { DeleteButton, DialogButton, DialogFooter, DialogHeader, DialogSection,
 import { AddRowButton, EditorField, INPUT, Segmented } from '../shared/dialogParts'
 import JourneyShareSection from './JourneyShareSection'
 import { useJourneySettings } from './useJourneySettings'
-import type { JourneyContributor, JourneyDetail } from '../../store/journeyStore'
+import type { JourneyRecordingPrepState } from './useJourneyRecordingPrep'
+import { JourneyRecordingPrepRow, JourneyRecordingPrepStatus } from './JourneyRecordingPrepSetting'
+import type { JourneyContributor, JourneyDetail, JourneyTripAccess } from '../../store/journeyStore'
 import { pickGradient } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
 import { AddTripDialog } from './JourneyDetailPageAddTripDialog'
 import ToggleSwitch from '../Settings/ToggleSwitch'
@@ -31,7 +33,7 @@ function RowAction({ label, onClick, children }: { label: string; onClick: () =>
   )
 }
 
-export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh, onRestoreSuggestions }: {
+export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite, onRefresh, onRestoreSuggestions, recordingPrep }: {
   journey: JourneyDetail
   onClose: () => void
   onSaved: () => void
@@ -39,6 +41,8 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
   onRefresh: () => void
   /** Bring back every suggestion waved away card by card. Absent for a viewer. */
   onRestoreSuggestions?: () => Promise<void> | void
+  /** Preparing the recorded days (JRN-03); absent without the Dawarich addon. */
+  recordingPrep?: JourneyRecordingPrepState
 }) {
   const { t } = useTranslation()
   const labelId = useId()
@@ -173,6 +177,16 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
               </div>
             </DialogSection>
 
+            {/* Days recorded in Dawarich, prepared for review while a trip runs (JRN-03) */}
+            {recordingPrep && (
+              <DialogSection label={t('journey.settings.recordings')}>
+                <div className={ROWS}>
+                  <JourneyRecordingPrepRow on={!!journey.auto_prepare_recordings} prep={recordingPrep} rowClass={ROW} />
+                </div>
+                <JourneyRecordingPrepStatus prep={recordingPrep} />
+              </DialogSection>
+            )}
+
             {/* Places from photos (#1003): the GPS a picture carries puts its entry on the map */}
             <DialogSection label={t('journey.settings.photosSection')}>
               <div className={ROWS}>
@@ -277,6 +291,8 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
               </div>
               <AddRowButton onClick={onOpenInvite}>{t('journey.contributors.invite')}</AddRowButton>
             </DialogSection>
+
+            <TripAccessSection access={journey.trip_access} roleLabel={roleLabel} />
           </div>
         </div>
 
@@ -324,3 +340,32 @@ export function JourneySettingsDialog({ journey, onClose, onSaved, onOpenInvite,
     </>
   )
 }
+
+/**
+ * Who a trip's linked journal lets in (#2683), under its own heading below the
+ * contributors: shown here, but managed in that trip's settings, so read only.
+ */
+function TripAccessSection({ access, roleLabel }: {
+  access: JourneyTripAccess[] | undefined
+  roleLabel: (role: JourneyContributor['role']) => string
+}) {
+  const { t } = useTranslation()
+  if (!access?.length) return null
+  return (
+    <DialogSection label={t('journey.contributors.viaTrips')}>
+      <p className="m-0 mb-2.5 leading-normal text-content-faint" style={fs(11.5)}>{t('journey.contributors.viaTripsHint')}</p>
+      <div className={ROWS}>
+        {access.map(a => (
+          <div key={`${a.user_id}-${a.trip_id}`} className={ROW}>
+            <TripMemberAvatar username={a.username} avatarUrl={avatarSrc(a.avatar)} size={28} />
+            <div className="min-w-0 flex-1">
+              <div className="truncate font-semibold text-content" style={fs(13, 'body')}>{a.username}</div>
+              <div className="truncate text-content-faint" style={fs(11)}>{t('journey.contributors.viaTrip', { trip: a.trip_title })}</div>
+            </div>
+            <span className={`${BADGE} bg-surface-tertiary text-content-muted`} style={fs(10.5)}>{roleLabel(a.role)}</span>
+          </div>
+        ))}
+      </div>
+    </DialogSection>
+  )
+}

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

@@ -0,0 +1,107 @@
+// FE-JOURNEY-LAYEREDMAP-001 to FE-JOURNEY-LAYEREDMAP-003
+//
+// JRN-04: the journey map with its layers: what the renderer is handed, and a
+// picked mark's card.
+import type { JourneyMapPlace } from '@trek/shared';
+import { act } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import JourneyLayeredMap from './JourneyLayeredMap';
+import { ALL_VISIBLE } from './journeyMapLayers';
+import type { JourneyMapMark } from './journeyMapMarks';
+import type { JourneyMapLayersView } from './useJourneyMapLayers';
+
+const seen = vi.hoisted(() => ({ props: [] as Record<string, unknown>[], engine: [] as string[] }));
+
+vi.mock('./JourneyMap', () => ({
+  default: (props: Record<string, unknown>) => {
+    seen.props.push(props);
+    seen.engine.push('leaflet');
+    return null;
+  },
+}));
+vi.mock('./JourneyMapAuto', () => ({
+  default: (props: Record<string, unknown>) => {
+    seen.props.push(props);
+    seen.engine.push('auto');
+    return null;
+  },
+}));
+
+const MARK: JourneyMapMark = {
+  kind: 'plan',
+  key: 'plan:4',
+  lat: 45.434,
+  lng: 12.3388,
+  color: '#64748b',
+  place: {
+    name: 'Piazza San Marco',
+    trip_title: 'Venice',
+    days: [],
+    time: null,
+    entry_id: null,
+  } as unknown as JourneyMapPlace,
+};
+
+function layers(over: Partial<JourneyMapLayersView> = {}): JourneyMapLayersView {
+  return {
+    visibility: ALL_VISIBLE,
+    toggle: vi.fn(),
+    controls: [{ layer: 'entries', count: 1, state: 'ready' }],
+    tracks: [],
+    marks: [MARK],
+    plannedEntryIds: new Set(['3']),
+    ...over,
+  };
+}
+
+const last = () => seen.props[seen.props.length - 1];
+const PHOTOS = [{ id: 'p', lat: 1, lng: 2, thumbUrl: '/t.jpg' }];
+
+describe('JourneyLayeredMap', () => {
+  it('FE-JOURNEY-LAYEREDMAP-001: without layers the map draws as it always did, on the renderer asked for', () => {
+    render(<JourneyLayeredMap engine="leaflet" checkins={[]} entries={[]} photos={PHOTOS} tracks={[]} />);
+    expect(seen.engine[seen.engine.length - 1]).toBe('leaflet');
+    expect(last()).toMatchObject({ photos: PHOTOS, marks: undefined, layerVisibility: undefined });
+    expect(screen.queryByRole('group', { name: 'Map layers' })).toBeNull();
+  });
+
+  it('FE-JOURNEY-LAYEREDMAP-002: hands the renderer the layers, the photos only while their switch is on', () => {
+    const view = layers();
+    const { rerender } = render(<JourneyLayeredMap layers={view} checkins={[]} entries={[]} photos={PHOTOS} />);
+    expect(seen.engine[seen.engine.length - 1]).toBe('auto');
+    expect(last()).toMatchObject({
+      photos: PHOTOS,
+      marks: [MARK],
+      layerVisibility: ALL_VISIBLE,
+      plannedEntryIds: view.plannedEntryIds,
+    });
+    expect(screen.getByRole('group', { name: 'Map layers' })).toBeInTheDocument();
+
+    rerender(
+      <JourneyLayeredMap
+        layers={layers({ visibility: { ...ALL_VISIBLE, photos: false } })}
+        checkins={[]}
+        entries={[]}
+        photos={PHOTOS}
+      />
+    );
+    expect(last().photos).toBeUndefined();
+  });
+
+  it('FE-JOURNEY-LAYEREDMAP-003: a picked mark opens its card, which goes when its layer is switched off', () => {
+    const onOpenEntry = vi.fn();
+    const { rerender } = render(
+      <JourneyLayeredMap layers={layers()} onOpenEntry={onOpenEntry} checkins={[]} entries={[]} />
+    );
+    act(() => (last().onMarksPick as (marks: JourneyMapMark[]) => void)([MARK]));
+    expect(screen.getByRole('dialog', { name: 'Piazza San Marco' })).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.queryByRole('dialog')).toBeNull();
+
+    act(() => (last().onMarksPick as (marks: JourneyMapMark[]) => void)([MARK]));
+    rerender(<JourneyLayeredMap layers={layers({ marks: [] })} onOpenEntry={onOpenEntry} checkins={[]} entries={[]} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+});

client/src/components/Journey/JourneyLayeredMap.tsx

@@ -0,0 +1,107 @@
+import { useCallback, useState, type ComponentProps, type Ref } from 'react';
+import JourneyMap, { type JourneyMapHandle } from './JourneyMap';
+import JourneyMapAuto from './JourneyMapAuto';
+import JourneyMapLayerControl from './JourneyMapLayerControl';
+import JourneyMapPickCard from './JourneyMapPickCard';
+import type { JourneyMapMark } from './journeyMapMarks';
+import type { JourneyMapLayersView } from './useJourneyMapLayers';
+
+type MapProps = Omit<
+  ComponentProps<typeof JourneyMapAuto>,
+  'ref' | 'layerVisibility' | 'marks' | 'onMarksPick' | 'plannedEntryIds'
+> & {
+  /** CARTO key of a shared page, which the Leaflet renderer reads; see JourneyMap. */
+  cartoApiKey?: string;
+};
+
+interface Props extends MapProps {
+  ref?: Ref<JourneyMapHandle>;
+  /** The layers of this map; without them it draws as it always did. */
+  layers?: JourneyMapLayersView | null;
+  /** A shared page and the phone timeline draw with Leaflet whatever a setting says. */
+  engine?: 'auto' | 'leaflet';
+  /** Icon-only switches, for a phone. */
+  compactControls?: boolean;
+  /** How far from the map's top the switches sit, clear of a bar laid over the map. */
+  controlsTop?: number | string;
+  /** Leads from a picked place or stay to its entry. */
+  onOpenEntry?: (entryId: string) => void;
+  entryTitleOf?: (entryId: number) => string | null;
+}
+
+/**
+ * A journey map with its layers (JRN-04): the renderer, the reader's layer
+ * switches and the card of a picked plan place or stay. Every journey map
+ * surface draws through here, the desktop aside, the phone screens and the
+ * shared page, so the layers mean the same everywhere. A switched-off layer
+ * is hidden in place: the map is not rebuilt and keeps its view.
+ */
+export default function JourneyLayeredMap({
+  ref,
+  layers,
+  engine = 'auto',
+  compactControls = false,
+  controlsTop = 12,
+  onOpenEntry,
+  entryTitleOf,
+  photos,
+  tracks,
+  height = 220,
+  ...rest
+}: Props) {
+  const [picked, setPicked] = useState<{ marks: JourneyMapMark[]; key: string } | null>(null);
+  const visibility = layers?.visibility;
+  const onMarksPick = useCallback((marks: JourneyMapMark[]) => {
+    setPicked({ marks, key: marks.map((m) => m.key).join(',') });
+  }, []);
+  const close = useCallback(() => setPicked(null), []);
+  const openEntry = useCallback(
+    (entryId: string) => {
+      setPicked(null);
+      onOpenEntry?.(entryId);
+    },
+    [onOpenEntry]
+  );
+
+  // A pick whose marks a switch took off the map closes with them.
+  const shownKeys = new Set(layers?.marks.map((m) => m.key));
+  const card = picked && picked.marks.every((m) => shownKeys.has(m.key)) ? picked : null;
+
+  const mapProps = {
+    ...rest,
+    height,
+    photos: !visibility || visibility.photos ? photos : undefined,
+    tracks: layers ? layers.tracks : tracks,
+    layerVisibility: visibility,
+    marks: layers?.marks,
+    onMarksPick,
+    plannedEntryIds: layers?.plannedEntryIds,
+  };
+
+  return (
+    <div className="relative w-full" style={{ height: height === 9999 ? '100%' : height }}>
+      <div className="isolate h-full w-full">
+        {engine === 'leaflet' ? <JourneyMap ref={ref} {...mapProps} /> : <JourneyMapAuto ref={ref} {...mapProps} />}
+      </div>
+      {layers && (
+        <div
+          className="pointer-events-none absolute inset-x-3 z-10 flex flex-col items-start gap-2"
+          style={{ top: controlsTop }}
+        >
+          <div className="pointer-events-auto max-w-full">
+            <JourneyMapLayerControl layers={layers} compact={compactControls} />
+          </div>
+          {card && (
+            <JourneyMapPickCard
+              key={card.key}
+              marks={card.marks}
+              onClose={close}
+              onOpenEntry={onOpenEntry ? openEntry : undefined}
+              entryTitleOf={entryTitleOf}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-050
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-054
 
 vi.mock('../../api/websocket', () => ({
   connect: vi.fn(),
@@ -623,8 +623,31 @@ describe('JourneyMap', () => {
     expect(line).toBeDefined();
     // Leaflet wants [lat, lng], which is the order the geometry is stored in.
     expect(line![0]).toEqual([[47.1, 11.2], [47.2, 11.3]]);
-    // Solid, unlike the dashed line that merely connects entries in time order.
+    // A trip's GPX track is the plan: dashed, and wider apart than the faint
-    expect((line![1] as any).dashArray).toBeUndefined();
+    // line that merely connects entries in time order.
+    expect((line![1] as any).dashArray).toBe('8 7');
+  });
+
+  it('FE-COMP-JOURNEYMAP-051: a recorded route is drawn solid, apart from the planned one (JRN-01)', () => {
+    vi.mocked(L.polyline).mockClear();
+    render(
+      <JourneyMap
+        checkins={[]}
+        entries={entriesWithCoords}
+        tracks={[
+          { ...track({ color: '#00aa00' }), kind: 'day_recording' as const },
+          { ...track({ color: '#0000aa' }), kind: 'dawarich_live' as const },
+          { ...track({ color: '#aa0000' }), kind: 'trip_gpx' as const },
+        ]}
+      />
+    );
+
+    const style = (color: string) =>
+      vi.mocked(L.polyline).mock.calls.map(c => c[1] as L.PolylineOptions | undefined).find(o => o?.color === color);
+    expect(style('#00aa00')).toBeDefined();
+    expect(style('#00aa00')?.dashArray).toBeUndefined();
+    expect(style('#0000aa')?.dashArray).toBeUndefined();
+    expect(style('#aa0000')?.dashArray).toBe('8 7');
   });
 
   it('FE-COMP-JOURNEYMAP-043: labels a track with the map tooltip the markers use', () => {
@@ -800,4 +823,59 @@ describe('JourneyMap', () => {
       map.latLngToContainerPoint.mockImplementation(() => ({ x: 0, y: 0 }));
     }
   });
+
+  // JRN-04: the layer switches hide in place, and the plan's places and stays draw beside the entries.
+
+  it('FE-COMP-JOURNEYMAP-052: switching the entries off takes their pin off the map and back, without a rebuild', () => {
+    const marker = mockedMarkerWithRemove();
+    const entry = [entriesWithCoords[0]];
+    const shown = { plan: true, recorded: true, entries: true };
+    const { rerender } = render(<JourneyMap checkins={[]} entries={entry} layerVisibility={shown} />);
+    expect(marker.addTo).toHaveBeenCalledTimes(1);
+
+    rerender(<JourneyMap checkins={[]} entries={entry} layerVisibility={{ ...shown, entries: false }} />);
+    expect(marker.remove).toHaveBeenCalledTimes(1);
+    rerender(<JourneyMap checkins={[]} entries={entry} layerVisibility={shown} />);
+    expect(marker.addTo).toHaveBeenCalledTimes(2);
+    expect(L.map).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-JOURNEYMAP-053: a planned place is drawn as its hollow pin, and a click hands it up', () => {
+    const onMarksPick = vi.fn();
+    const mark = {
+      kind: 'plan' as const,
+      key: 'plan:4',
+      lat: 45.43,
+      lng: 12.33,
+      color: '#e11d48',
+      place: {
+        place_id: 4, trip_id: 2, trip_title: 'Venice', name: 'San Marco', lat: 45.43, lng: 12.33,
+        days: [], time: null, category_color: '#e11d48', category_icon: null, entry_id: null,
+      },
+    };
+    render(<JourneyMap checkins={[]} entries={[]} marks={[mark]} onMarksPick={onMarksPick} />);
+
+    const pins = vi.mocked(L.divIcon).mock.calls.map(c => String(c[0]?.html)).filter(h => h.includes('stroke-dasharray'));
+    expect(pins).toHaveLength(1);
+    expect(pins[0]).toContain('#e11d48');
+    const click = mockedMarker().on.mock.calls.filter((c: unknown[]) => c[0] === 'click').pop()?.[1] as () => void;
+    click();
+    expect(onMarksPick).toHaveBeenCalledWith([mark]);
+  });
+
+  it('FE-COMP-JOURNEYMAP-054: an entry pin whose place the plan had too carries the check', () => {
+    render(<JourneyMap checkins={[]} entries={entriesWithCoords} plannedEntryIds={new Set(['e2'])} />);
+    expect(divIconHtml(0)).not.toContain('#16a34a');
+    expect(divIconHtml(1)).toContain('#16a34a');
+  });
 });
+
+/** The shared marker spy with the `remove` a hidden layer is taken off by. */
+function mockedMarkerWithRemove(): { addTo: Mock; remove: Mock } {
+  L.marker([0, 0]);
+  const marker = mockedMarker() as unknown as { addTo: Mock; remove: Mock };
+  marker.remove = vi.fn();
+  vi.mocked(L.marker).mockClear();
+  marker.addTo.mockClear();
+  return marker;
+}

client/src/components/Journey/JourneyMap.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useImperativeHandle, useCallback, type Ref } from 'react'
+import { useEffect, useRef, useImperativeHandle, useCallback, type CSSProperties, type Ref } from 'react'
 import { clusterPhotos, photoMarkerHtml, type MapPhoto } from './journeyPhotoLayer'
 import L from 'leaflet'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -9,6 +9,9 @@ import { attachVectorBasemap, detachBasemapLayer, restyleBasemap, type BasemapLa
 import { crsForBasemap } from '../Map/gcj02Crs'
 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'
 
 export interface MapMarkerItem {
   id: string
@@ -74,8 +77,32 @@ interface Props {
   paddingBottom?: number
   /** CARTO key from the share payload: the public journey has no settings store to read. */
   cartoApiKey?: string
+  /**
+   * Which drawn layers the reader shows (JRN-04). A hidden one is taken off the
+   * map and put back as it was, never rebuilt, so the view stays where it is.
+   */
+  layerVisibility?: JourneyMapLayerVisibility
+  /** The plan's places and the stays of day reports, clustered where they meet. */
+  marks?: JourneyMapMark[]
+  onMarksPick?: (marks: JourneyMapMark[]) => void
+  /** Entry pins whose place the plan had too, marked with a check. */
+  plannedEntryIds?: ReadonlySet<string>
 }
 
+/** The map's own zoom buttons, frosted so they hold on any tile. */
+const zoomButtonStyle = (dark?: boolean): CSSProperties => ({
+  width: 32, height: 32, borderRadius: 8,
+  background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.9)',
+  backdropFilter: 'blur(8px)',
+  border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
+  color: dark ? '#fff' : '#18181B',
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  cursor: 'pointer', fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, lineHeight: 1,
+})
+
+const EVERY_LAYER: JourneyMapLayerVisibility = { plan: true, recorded: true, entries: true }
+const NO_PLANNED: ReadonlySet<string> = new Set()
+
 function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
   const items: MapMarkerItem[] = []
   for (const e of entries) {
@@ -101,7 +128,7 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): string {
+function markerSvg(dayColor: string, dayLabel: number, 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))'
@@ -114,10 +141,28 @@ function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): st
       <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
       <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
       <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      ${planned ? PLANNED_BADGE_SVG : ''}
     </svg>
   </div>`
 }
 
+function entryIcon(item: MapMarkerItem, highlighted: boolean, planned: boolean): L.DivIcon {
+  return L.divIcon({
+    className: '',
+    iconSize: [MARKER_W, MARKER_H],
+    iconAnchor: [MARKER_W / 2, MARKER_H],
+    html: markerSvg(item.dayColor, item.dayLabel, highlighted, planned),
+  })
+}
+
+function paintEntryMarker(
+  marker: L.Marker | undefined, item: MapMarkerItem | undefined, highlighted: boolean, planned: ReadonlySet<string>,
+): void {
+  if (!marker || !item) return
+  marker.setIcon(entryIcon(item, highlighted, planned.has(item.id)))
+  marker.setZIndexOffset(highlighted ? 1000 : 0)
+}
+
 /**
  * Pan, don't zoom: the initial fitBounds decides how far out the reader starts,
  * and a focus keeps that (discussion #2299).
@@ -143,9 +188,19 @@ 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. */
 const TRACK_FALLBACK_COLOR = '#4f46e5'
+/** The dash of a planned track; wide enough not to pass for the faint line between entries. */
+const PLANNED_DASH = '8 7'
+
+function markCoords(marks: JourneyMapMark[] | undefined): L.LatLngTuple[] {
+  return (marks ?? []).map(mark => [mark.lat, mark.lng] as L.LatLngTuple)
+}
+
+function fitOptions(paddingBottom: number | undefined): L.FitBoundsOptions {
+  return { paddingTopLeft: [50, 50], paddingBottomRight: [50, paddingBottom || 50], maxZoom: 16 }
+}
 
 function JourneyMap(
-  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, hideMarkerTooltip, ref }: Props,
+  { entries, photos, onPhotoClick, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, cartoApiKey, hideMarkerTooltip, 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
   // marker effect's deps would rebuild every marker for nothing.
@@ -169,8 +224,6 @@ function JourneyMap(
   const tileLayerRef = useRef<L.TileLayer | null>(null)
   // GL layer or the raster stand-in a browser without WebGL gets instead (#2288).
   const glLayerRef = useRef<BasemapLayer | null>(null)
-  // The vector basemap loads async; a map torn down before it lands must not get one.
-  const cancelledRef = useRef(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const mapRef = useRef<L.Map | null>(null)
   const markersRef = useRef<Map<string, L.Marker>>(new Map())
@@ -181,42 +234,36 @@ function JourneyMap(
   const photoLayerRef = useRef<L.LayerGroup | null>(null)
   const onPhotoClickRef = useRef(onPhotoClick)
   onPhotoClickRef.current = onPhotoClick
-
+  const markLayerRef = useRef<L.LayerGroup | null>(null)
-  const darkRef = useRef(dark)
+  const onMarksPickRef = useRef(onMarksPick)
-  darkRef.current = dark
+  const marksRef = useRef(marks)
+  // The plan and the stays load after the entries, so the first view is framed
+  // again once they arrive, around both, unless the reader has moved it by then.
+  const entryCoordsRef = useRef<L.LatLngTuple[]>([])
+  const marksFramedRef = useRef(false)
+  const readerMovedRef = useRef(false)
+  // What each switchable layer drew, and which of them are on the map right now.
+  const drawnRef = useRef<DrawnLayers>(NOTHING_DRAWN())
+  const shownRef = useRef<JourneyMapLayerVisibility>(layerVisibility)
+  const visibilityRef = useRef(layerVisibility)
+  const plannedRef = useRef(plannedEntryIds)
+  const iconPlannedRef = useRef<ReadonlySet<string>>(plannedEntryIds)
+  // Before the map effects below, so a rebuild draws with what the reader shows now.
+  useEffect(() => {
+    onMarksPickRef.current = onMarksPick
+    marksRef.current = marks
+    visibilityRef.current = layerVisibility
+    plannedRef.current = plannedEntryIds
+  })
 
   const highlightMarker = useCallback((id: string | null) => {
     const prev = highlightedRef.current
     highlightedRef.current = id
-    const isDark = !!darkRef.current
+    const paint = (target: string, highlighted: boolean) => paintEntryMarker(
-
+      markersRef.current.get(target), itemsRef.current.find(i => i.id === target), highlighted, plannedRef.current,
-    if (prev && prev !== id) {
+    )
-      const marker = markersRef.current.get(prev)
+    if (prev && prev !== id) paint(prev, false)
-      const item = itemsRef.current.find(i => i.id === prev)
+    if (id) paint(id, true)
-      if (marker && item) {
-        marker.setIcon(L.divIcon({
-          className: '',
-          iconSize: [MARKER_W, MARKER_H],
-          iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(item.dayColor, item.dayLabel, false),
-        }))
-        marker.setZIndexOffset(0)
-      }
-    }
-
-    if (id) {
-      const marker = markersRef.current.get(id)
-      const item = itemsRef.current.find(i => i.id === id)
-      if (marker && item) {
-        marker.setIcon(L.divIcon({
-          className: '',
-          iconSize: [MARKER_W, MARKER_H],
-          iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(item.dayColor, item.dayLabel, true),
-        }))
-        marker.setZIndexOffset(1000)
-      }
-    }
   }, [])
 
   /**
@@ -259,12 +306,20 @@ function JourneyMap(
     })
     L.control.attribution({ position: 'bottomright', prefix: false }).addTo(map)
     mapRef.current = map
-    cancelledRef.current = false
+    // The vector basemap loads async; a map torn down before it lands must not get
+    // one. Per build, not a shared ref: the next build would reset a shared flag and
+    // hand the old map, already removed, the layer it was still waiting for.
+    let cancelled = false
+    marksFramedRef.current = false
+    readerMovedRef.current = false
+    const readerMoved = () => { readerMovedRef.current = true }
+    map.on('dragstart', readerMoved)
+    containerRef.current.addEventListener('wheel', readerMoved, { passive: true })
 
     // The basemap is a vector style unless the user brought their own raster
     // template, so which layer draws it is decided per template rather than once.
     if (isVectorStyle(tileUrlRef.current)) {
-      void attachVectorBasemap(map, tileUrlRef.current, glLayerRef, () => cancelledRef.current)
+      void attachVectorBasemap(map, tileUrlRef.current, glLayerRef, () => cancelled)
     } else {
       const tiles = L.tileLayer(tileUrlRef.current, {
         maxZoom: 18,
@@ -284,6 +339,18 @@ function JourneyMap(
     const items = buildMarkerItems(entries)
     itemsRef.current = items
 
+    // Each switchable layer is drawn whatever its switch says and only put on
+    // the map while it is shown, so switching it later needs no rebuild.
+    const drawn = NOTHING_DRAWN()
+    drawnRef.current = drawn
+    shownRef.current = visibilityRef.current
+    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)
+      return layer
+    }
+
     const allCoords: L.LatLngTuple[] = []
     /**
      * Track geometry is kept OUT of the fit set (#2194) and used only when there
@@ -305,41 +372,47 @@ function JourneyMap(
 
     if (stableTrail.length > 1) {
       const coords = stableTrail.map(p => [p.lat, p.lng] as L.LatLngTuple)
-      L.polyline(coords, {
+      place('recorded', L.polyline(coords, {
         color: '#6366f1', weight: 3, opacity: 0.4,
         dashArray: '6 4', lineCap: 'round',
-      }).addTo(map)
+      }))
       coords.forEach(c => allCoords.push(c))
     }
 
-    // GPX tracks — drawn solid and in their own colour, so they read as a recorded
+    // Tracks, in their own colour over a white casing that keeps them legible on
-    // route rather than as the dashed line that merely connects entries in time order.
+    // satellite tiles, same as the planner map. What was recorded (a day the journey
-    // A white casing keeps them legible on satellite tiles, same as the planner map.
+    // keeps, the live Dawarich trail) is drawn solid; a trip's GPX track is the plan
+    // and drawn dashed, so the two never read as the same thing (JRN-01).
     for (const track of stableTracks) {
       if (track.points.length < 2) continue
       const coords = track.points.map(([lat, lng]) => [lat, lng] as L.LatLngTuple)
       const color = track.color || TRACK_FALLBACK_COLOR
-      L.polyline(coords, { color: '#ffffff', weight: 6, opacity: 0.75, lineCap: 'round', lineJoin: 'round' }).addTo(map)
+      const planned = isPlannedTrack(track)
-      const line = L.polyline(coords, { color, weight: 3.5, opacity: 0.95, lineCap: 'round', lineJoin: 'round' })
+      const kind: LeafletLayerKind = planned ? 'plan' : 'recorded'
+      place(kind, L.polyline(coords, { color: '#ffffff', weight: 6, opacity: 0.75, lineCap: 'round', lineJoin: 'round' }))
+      const line = L.polyline(coords, {
+        color, weight: 3.5, opacity: 0.95, lineCap: 'round', lineJoin: 'round',
+        ...(planned ? { dashArray: PLANNED_DASH } : {}),
+      })
       // Same tooltip the markers on this map use, rather than Leaflet's default box:
       // it follows the appearance tokens, so it lands right in dark mode and with
       // transparency switched off. Escaped because a string handed to bindTooltip
       // becomes innerHTML, and a track name is a place name off a shared trip.
       if (track.name) line.bindTooltip(escapeHtml(track.name), { sticky: true, direction: 'top', className: 'map-tooltip' })
-      line.addTo(map)
+      place(kind, line)
       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)
-      L.polyline(routeCoords, {
+      place('entries', L.polyline(routeCoords, {
         color: dark ? '#71717A' : '#A1A1AA',
         weight: 1.5,
         opacity: 0.5,
         dashArray: '4 6',
         lineCap: 'round', lineJoin: 'round',
-      }).addTo(map)
+      }))
     }
 
     // place markers
@@ -347,14 +420,7 @@ function JourneyMap(
       const pos: L.LatLngTuple = [item.lat, item.lng]
       allCoords.push(pos)
 
-      const icon = L.divIcon({
+      const marker = place('entries', L.marker(pos, { icon: entryIcon(item, false, plannedRef.current.has(item.id)) }))
-        className: '',
-        iconSize: [MARKER_W, MARKER_H],
-        iconAnchor: [MARKER_W / 2, MARKER_H],
-        html: markerSvg(item.dayColor, item.dayLabel, false),
-      })
-
-      const marker = L.marker(pos, { icon }).addTo(map)
       // 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
@@ -391,13 +457,12 @@ function JourneyMap(
         map.invalidateSize()
         // Tracks only get a say when the journey has nothing located of its own —
         // a world view would be worse than framing the one thing on the map.
-        const fitCoords = allCoords.length > 0 ? allCoords : trackCoords
+        entryCoordsRef.current = allCoords
-        if (fitCoords.length > 0) {
+        const pointCoords = [...allCoords, ...markCoords(marksRef.current)]
-          const pb = paddingBottom || 50
+        const fitCoords = pointCoords.length > 0 ? pointCoords : trackCoords
-          map.fitBounds(L.latLngBounds(fitCoords), { paddingTopLeft: [50, 50], paddingBottomRight: [50, pb], maxZoom: 16 })
+        marksFramedRef.current = (marksRef.current?.length ?? 0) > 0
-        } else {
+        if (fitCoords.length > 0) map.fitBounds(L.latLngBounds(fitCoords), fitOptions(paddingBottom))
-          map.setView([30, 0], 2)
+        else map.setView([30, 0], 2)
-        }
       } catch {}
     })
 
@@ -405,17 +470,36 @@ function JourneyMap(
       if (mapRef.current) map.invalidateSize()
     }, 200)
 
+    const container = containerRef.current
     return () => {
-      cancelledRef.current = true
+      cancelled = true
+      container.removeEventListener('wheel', readerMoved)
       map.remove()
       mapRef.current = null
       tileLayerRef.current = null
       detachBasemapLayer(glLayerRef.current)
       glLayerRef.current = null
       markersRef.current.clear()
+      drawnRef.current = NOTHING_DRAWN()
     }
   }, [entries, stableTrail, stableTracks, dark, fullScreen, paddingBottom, isGcjBasemap])
 
+  // 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])
+
+  // The plan's check on an entry pin follows the plan layer without redrawing the map.
+  useEffect(() => {
+    const before = iconPlannedRef.current
+    if (before === plannedEntryIds) return
+    for (const item of itemsRef.current) {
+      if (before.has(item.id) === plannedEntryIds.has(item.id)) continue
+      markersRef.current.get(item.id)?.setIcon(entryIcon(item, highlightedRef.current === item.id, plannedEntryIds.has(item.id)))
+    }
+    iconPlannedRef.current = plannedEntryIds
+  }, [plannedEntryIds])
+
   // Retile in place rather than through the effect above, which would drop every
   // marker and track it just drew. A vector basemap restyles instead, which also
   // avoids spending a WebGL context on every theme toggle.
@@ -477,6 +561,35 @@ function JourneyMap(
     }
   }, [photos, entries, stableTrail, stableTracks, dark, fullScreen, paddingBottom])
 
+  // 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.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+
+    const draw = () => {
+      markLayerRef.current?.remove()
+      markLayerRef.current = drawLeafletMarks(map, marks, members => onMarksPickRef.current?.(members))
+    }
+
+    const coords = markCoords(marks)
+    if (!marksFramedRef.current && coords.length > 0) {
+      marksFramedRef.current = true
+      if (!readerMovedRef.current) map.fitBounds(L.latLngBounds([...entryCoordsRef.current, ...coords]), fitOptions(paddingBottom))
+    }
+
+    draw()
+    map.on('zoomend', draw)
+    map.on('moveend', draw)
+    return () => {
+      map.off('zoomend', draw)
+      map.off('moveend', draw)
+      markLayerRef.current?.remove()
+      markLayerRef.current = null
+    }
+  }, [marks, entries, stableTrail, stableTracks, dark, fullScreen, paddingBottom])
+
   // react to activeMarkerId prop changes — runs after map is built
   useEffect(() => {
     if (!activeMarkerId || !mapRef.current) return
@@ -490,8 +603,11 @@ function JourneyMap(
     return () => clearTimeout(timer)
   }, [activeMarkerId])
 
-  const zoomIn = () => mapRef.current?.zoomIn()
+  const zoom = (closer: boolean) => {
-  const zoomOut = () => mapRef.current?.zoomOut()
+    readerMovedRef.current = true
+    if (closer) mapRef.current?.zoomIn()
+    else mapRef.current?.zoomOut()
+  }
 
   return (
     <div style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}>
@@ -500,30 +616,8 @@ function JourneyMap(
         style={{ width: '100%', height: '100%' }}
       />
       <div style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 400, display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <button type="button"
+        <button type="button" onClick={() => zoom(true)} style={zoomButtonStyle(dark)}>+</button>
-          onClick={zoomIn}
+        <button type="button" onClick={() => zoom(false)} style={zoomButtonStyle(dark)}>−</button>
-          style={{
-            width: 32, height: 32, borderRadius: 8,
-            background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.9)',
-            backdropFilter: 'blur(8px)',
-            border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
-            color: dark ? '#fff' : '#18181B',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, lineHeight: 1,
-          }}
-        >+</button>
-        <button type="button"
-          onClick={zoomOut}
-          style={{
-            width: 32, height: 32, borderRadius: 8,
-            background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.9)',
-            backdropFilter: 'blur(8px)',
-            border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
-            color: dark ? '#fff' : '#18181B',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, lineHeight: 1,
-          }}
-        >−</button>
       </div>
     </div>
   )

client/src/components/Journey/JourneyMapAuto.tsx

@@ -7,6 +7,8 @@ import type { JourneyMapGLHandle } from './JourneyMapGL'
 import { JourneyMapGLMapbox, JourneyMapGLMaplibre } from '../Map/glLazy'
 import type { JourneyTrack } from '@trek/shared'
 import type { MapPhoto } from './journeyPhotoLayer'
+import type { JourneyMapLayerVisibility } from './journeyMapLayers'
+import type { JourneyMapMark } from './journeyMapMarks'
 
 // Unified handle — both providers expose the same three methods.
 export type JourneyMapAutoHandle = JourneyMapHandle
@@ -41,6 +43,11 @@ interface Props {
   /** Geotagged photos as thumbnails on the map, both renderers (#2453). */
   photos?: MapPhoto[]
   onPhotoClick?: (photoIds: string[]) => void
+  /** JRN-04: the layers the reader shows, and the plan and stay marks, both renderers. */
+  layerVisibility?: JourneyMapLayerVisibility
+  marks?: JourneyMapMark[]
+  onMarksPick?: (marks: JourneyMapMark[]) => void
+  plannedEntryIds?: ReadonlySet<string>
 }
 
 function JourneyMapAuto({ ref, ...props }: Props) {

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

@@ -1,4 +1,4 @@
-// FE-COMP-JMAPGL-001 to FE-COMP-JMAPGL-026, FE-COMP-JMAPGL-2453
+// FE-COMP-JMAPGL-001 to FE-COMP-JMAPGL-040, FE-COMP-JMAPGL-2453
 
 type Spy = ReturnType<typeof vi.fn>
 
@@ -48,6 +48,7 @@ const gl = vi.hoisted(() => {
     getSource: vi.fn((): unknown => null),
     setTerrain: vi.fn(),
     setConfigProperty: vi.fn(),
+    setLayoutProperty: vi.fn(),
   }
   const markers: MarkerStub[] = []
   const popups: PopupStub[] = []
@@ -270,6 +271,34 @@ describe('JourneyMapGL', () => {
     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(
+      <JourneyMapGL
+        checkins={[]}
+        entries={singleEntry}
+        tracks={[
+          { place_id: 1, trip_id: 1, name: 'Ridge', color: '#aa0000', points: [[47, 11], [47.1, 11.1]] },
+          { place_id: -100001, trip_id: 0, name: 'Recorded on 14 May', color: '#00aa00', points: [[47, 11], [47.2, 11.2]], kind: 'day_recording' },
+        ]}
+      />,
+    )
+
+    const source = vi.mocked(gl.map.addSource).mock.calls.find(c => c[0] === 'journey-tracks')?.[1] as
+      | { data: { features: Array<{ properties: { planned: boolean } }> } }
+      | undefined
+    expect(source?.data.features.map(f => f.properties.planned)).toEqual([true, false])
+    expect(gl.map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'journey-tracks-planned',
+      filter: ['==', ['get', 'planned'], true],
+      paint: expect.objectContaining({ 'line-dasharray': [2.2, 2] }),
+    }))
+    expect(gl.map.addLayer).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'journey-tracks-line',
+      filter: ['!=', ['get', 'planned'], true],
+    }))
+  })
+
   it('FE-COMP-JMAPGL-009: a single entry draws no route line', () => {
     withToken()
     render(<JourneyMapGL checkins={[]} entries={singleEntry} />)
@@ -658,4 +687,38 @@ describe('JourneyMapGL', () => {
     const { container } = render(<JourneyMapGL checkins={[]} entries={entries} height={9999} />)
     expect((container.firstChild as HTMLElement).style.height).toBe('100%')
   })
+
+  it('FE-COMP-JMAPGL-039: the plan has its own casing, and a layer switched off is added hidden (JRN-04)', () => {
+    withToken()
+    render(
+      <JourneyMapGL
+        checkins={[]}
+        entries={entries}
+        tracks={[{ place_id: 1, trip_id: 1, name: 'Ridge', color: '#aa0000', points: [[47, 11], [47.1, 11.1]] }]}
+        layerVisibility={{ plan: false, recorded: true, entries: false }}
+      />,
+    )
+
+    const layer = (id: string) => vi.mocked(gl.map.addLayer).mock.calls.map(c => c[0] as { id: string; layout: Record<string, unknown>; filter?: unknown }).find(l => l.id === id)
+    expect(layer('journey-tracks-planned-casing')?.filter).toEqual(['==', ['get', 'planned'], true])
+    expect(layer('journey-tracks-planned-casing')?.layout.visibility).toBe('none')
+    expect(layer('journey-tracks-planned')?.layout.visibility).toBe('none')
+    expect(layer('journey-tracks-line')?.layout.visibility).toBeUndefined()
+    expect(layer('journey-route-line')?.layout.visibility).toBe('none')
+    expect(gl.markers.every(m => m.element.style.display === 'none')).toBe(true)
+  })
+
+  it('FE-COMP-JMAPGL-040: a switch shows and hides its layers in place, and the check follows the plan', () => {
+    withToken()
+    const shown = { plan: true, recorded: true, entries: true }
+    const { rerender } = render(<JourneyMapGL checkins={[]} entries={entries} layerVisibility={shown} />)
+    expect(gl.markers[0].element.innerHTML).not.toContain('#16a34a')
+
+    rerender(<JourneyMapGL checkins={[]} entries={entries} layerVisibility={{ ...shown, recorded: false }} plannedEntryIds={new Set(['e1'])} />)
+    expect(gl.map.setLayoutProperty).toHaveBeenCalledWith('journey-tracks-line', 'visibility', 'none')
+    expect(gl.map.setLayoutProperty).toHaveBeenCalledWith('journey-tracks-casing', 'visibility', 'none')
+    expect(gl.map.setLayoutProperty).not.toHaveBeenCalledWith('journey-tracks-planned', 'visibility', expect.anything())
+    expect(gl.markers[0].element.innerHTML).toContain('#16a34a')
+    expect(mapboxgl.Map).toHaveBeenCalledTimes(1)
+  })
 })

client/src/components/Journey/JourneyMapGL.tsx

@@ -6,6 +6,8 @@ import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlM
 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 { isPlannedTrack, type JourneyMapLayerVisibility } from './journeyMapLayers'
 
 export interface JourneyMapGLHandle {
   highlightMarker: (id: string | null) => void
@@ -52,6 +54,11 @@ interface Props {
   photos?: MapPhoto[]
   onPhotoClick?: (photoIds: string[]) => void
   paddingBottom?: number
+  /** See the Leaflet twin (JRN-04): hidden layers go off the map in place. */
+  layerVisibility?: JourneyMapLayerVisibility
+  marks?: JourneyMapMark[]
+  onMarksPick?: (marks: JourneyMapMark[]) => void
+  plannedEntryIds?: ReadonlySet<string>
   glProvider?: GlMapProvider
   /**
    * The GL engine, injected instead of imported. Both SDKs used to be pulled in
@@ -98,7 +105,16 @@ function buildItems(entries: MapEntry[]): Item[] {
   return items
 }
 
-function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
+/** The map's own layers each switch takes off and puts back. */
+const LAYER_IDS: Record<keyof JourneyMapLayerVisibility, string[]> = {
+  plan: ['journey-tracks-planned-casing', 'journey-tracks-planned'],
+  recorded: ['journey-tracks-casing', 'journey-tracks-line'],
+  entries: ['journey-route-line'],
+}
+const EVERY_LAYER: JourneyMapLayerVisibility = { plan: true, recorded: true, entries: true }
+const NO_PLANNED: ReadonlySet<string> = new Set()
+
+function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean, planned = false): HTMLDivElement {
   const fill = dayColor
   const textColor = '#fff'
   const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
@@ -121,6 +137,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
     <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
     <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+    ${planned ? PLANNED_BADGE_SVG : ''}
   </svg>`
   wrap.appendChild(inner)
   return wrap
@@ -131,8 +148,24 @@ const EMPTY_TRACKS: JourneyTrack[] = []
 /** Fallback when a track carries no colour of its own, matching the planner's default. */
 const TRACK_FALLBACK_COLOR = '#4f46e5'
 
+function markBounds(gl: Props['gl'], marks: JourneyMapMark[], points: [number, number][] = []) {
+  const bounds = new gl.LngLatBounds()
+  points.forEach(point => bounds.extend(point))
+  marks.forEach(mark => bounds.extend([mark.lng, mark.lat]))
+  return bounds
+}
+
+function fitOptions(paddingBottom: number | undefined, tilted: boolean | undefined) {
+  return {
+    padding: { top: 50, bottom: paddingBottom || 50, left: 50, right: 50 },
+    maxZoom: 16,
+    pitch: tilted ? 45 : 0,
+    duration: 0,
+  }
+}
+
 function JourneyMapGL(
-  { entries, trail, tracks, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl', gl, hideMarkerTooltip, onMarkerPhotoClick, photos, onPhotoClick, ref }: Props,
+  { 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,
 ) {
   const hideMarkerTooltipRef = useRef(hideMarkerTooltip)
   hideMarkerTooltipRef.current = hideMarkerTooltip
@@ -165,6 +198,25 @@ function JourneyMapGL(
   const onPhotoClickRef = useRef(onPhotoClick)
   onPhotoClickRef.current = onPhotoClick
   const photoMarkersRef = useRef<{ remove: () => void }[]>([])
+  const markMarkersRef = useRef<{ remove: () => void }[]>([])
+  const onMarksPickRef = useRef(onMarksPick)
+  const marksRef = useRef(marks)
+  // As on the Leaflet map: the plan and the stays arrive after the entries, so
+  // the first view is framed again around both, unless the reader moved it.
+  const entryPointsRef = useRef<[number, number][]>([])
+  const marksFramedRef = useRef(false)
+  const readerMovedRef = useRef(false)
+  const visibilityRef = useRef(layerVisibility)
+  const shownRef = useRef<JourneyMapLayerVisibility>(layerVisibility)
+  const plannedRef = useRef(plannedEntryIds)
+  const iconPlannedRef = useRef<ReadonlySet<string>>(plannedEntryIds)
+  // Before the map effects below, so a rebuild draws with what the reader shows now.
+  useEffect(() => {
+    onMarksPickRef.current = onMarksPick
+    marksRef.current = marks
+    visibilityRef.current = layerVisibility
+    plannedRef.current = plannedEntryIds
+  })
   const darkRef = useRef(dark)
   darkRef.current = dark
   const mapLangRef = useRef(mapLang)
@@ -242,7 +294,7 @@ function JourneyMapGL(
     if (!currentInner) return
     // Only swap the inner element's styles/HTML. Touching `el.style.cssText`
     // would wipe mapbox's positional transform and make the marker flicker.
-    const next = markerHtml(item.dayColor, item.dayLabel, highlighted)
+    const next = markerHtml(item.dayColor, item.dayLabel, highlighted, plannedRef.current.has(id))
     const nextInner = next.querySelector('.trek-journey-marker-inner') as HTMLDivElement
     currentInner.style.cssText = nextInner.style.cssText
     currentInner.innerHTML = nextInner.innerHTML
@@ -314,6 +366,17 @@ function JourneyMapGL(
 
     const map = new gl.Map(mapOptions as any)
     mapRef.current = map
+    marksFramedRef.current = false
+    entryPointsRef.current = [...items.map(i => [i.lng, i.lat] as [number, number]), ...stableTrail.map(p => [p.lng, p.lat] as [number, number])]
+    readerMovedRef.current = false
+    map.on('movestart', (ev: { originalEvent?: unknown }) => {
+      if (ev.originalEvent) readerMovedRef.current = true
+    })
+    shownRef.current = visibilityRef.current
+    iconPlannedRef.current = plannedRef.current
+    // A layer whose switch is off is added hidden, so switching it on later needs no rebuild.
+    const layout = (kind: keyof JourneyMapLayerVisibility, base: Record<string, unknown>) =>
+      visibilityRef.current[kind] ? base : { ...base, visibility: 'none' }
 
     map.on('load', () => {
       if (enableMapbox3d) {
@@ -352,14 +415,16 @@ function JourneyMapGL(
               'line-opacity': 0.5,
               'line-dasharray': [2, 3],
             },
-            layout: { 'line-cap': 'round', 'line-join': 'round' },
+            layout: layout('entries', { 'line-cap': 'round', 'line-join': 'round' }),
           })
         }
       }
 
-      // GPX tracks — one source for all of them, coloured per feature so a journey
+      // Tracks, one source for all of them, coloured per feature so a journey
-      // with several recorded routes keeps them apart. Casing underneath, same as the
+      // with several routes keeps them apart. Casing underneath, same as the
-      // planner map, so a track stays readable on satellite tiles.
+      // planner map, so a track stays readable on satellite tiles. A trip's GPX
+      // track is the plan and goes on a dashed layer, what was recorded on a solid
+      // one (JRN-01): a dash pattern cannot follow a feature property.
       if (stableTracks.length > 0) {
         const featureCollection: GeoJSON.FeatureCollection = {
           type: 'FeatureCollection',
@@ -367,7 +432,11 @@ function JourneyMapGL(
             .filter(track => track.points.length > 1)
             .map(track => ({
               type: 'Feature' as const,
-              properties: { color: track.color || TRACK_FALLBACK_COLOR, name: track.name },
+              properties: {
+                color: track.color || TRACK_FALLBACK_COLOR,
+                name: track.name,
+                planned: isPlannedTrack(track),
+              },
               geometry: { type: 'LineString' as const, coordinates: track.points.map(([lat, lng]) => [lng, lat]) },
             })),
         }
@@ -376,19 +445,38 @@ function JourneyMapGL(
             (map.getSource('journey-tracks') as mapboxgl.GeoJSONSource).setData(featureCollection)
           } else {
             map.addSource('journey-tracks', { type: 'geojson', data: featureCollection })
+            // Casing apart for the plan and what was recorded, so each goes with its switch.
             map.addLayer({
               id: 'journey-tracks-casing',
               type: 'line',
               source: 'journey-tracks',
+              filter: ['!=', ['get', 'planned'], true],
               paint: { 'line-color': '#ffffff', 'line-width': 6, 'line-opacity': 0.75 },
-              layout: { 'line-cap': 'round', 'line-join': 'round' },
+              layout: layout('recorded', { 'line-cap': 'round', 'line-join': 'round' }),
+            })
+            map.addLayer({
+              id: 'journey-tracks-planned-casing',
+              type: 'line',
+              source: 'journey-tracks',
+              filter: ['==', ['get', 'planned'], true],
+              paint: { 'line-color': '#ffffff', 'line-width': 6, 'line-opacity': 0.75 },
+              layout: layout('plan', { 'line-cap': 'round', 'line-join': 'round' }),
             })
             map.addLayer({
               id: 'journey-tracks-line',
               type: 'line',
               source: 'journey-tracks',
+              filter: ['!=', ['get', 'planned'], true],
               paint: { 'line-color': ['get', 'color'], 'line-width': 3.5, 'line-opacity': 0.95 },
-              layout: { 'line-cap': 'round', 'line-join': 'round' },
+              layout: layout('recorded', { 'line-cap': 'round', 'line-join': 'round' }),
+            })
+            map.addLayer({
+              id: 'journey-tracks-planned',
+              type: 'line',
+              source: 'journey-tracks',
+              filter: ['==', ['get', 'planned'], true],
+              paint: { 'line-color': ['get', 'color'], 'line-width': 3.5, 'line-opacity': 0.95, 'line-dasharray': [2.2, 2] },
+              layout: layout('plan', { 'line-cap': 'butt', 'line-join': 'round' }),
             })
           }
         }
@@ -396,9 +484,10 @@ function JourneyMapGL(
 
       // markers
       items.forEach((item) => {
-        const el = markerHtml(item.dayColor, item.dayLabel, false)
+        const el = markerHtml(item.dayColor, item.dayLabel, false, plannedRef.current.has(item.id))
         // Above the photo thumbnails, which stay at auto: the itinerary is the point of the map (#2453).
         el.style.zIndex = '1'
+        if (!visibilityRef.current.entries) el.style.display = 'none'
         const marker = new gl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)
@@ -410,15 +499,12 @@ function JourneyMapGL(
       })
 
       // fit bounds to all points
-      if (hasPoints) {
+      const known = marksRef.current ?? []
-        const pb = paddingBottom || 50
+      marksFramedRef.current = known.length > 0
+      known.forEach(mark => bounds.extend([mark.lng, mark.lat]))
+      if (hasPoints || known.length > 0) {
         try {
-          map.fitBounds(bounds, {
+          map.fitBounds(bounds, fitOptions(paddingBottom, enableMapbox3d && fullScreen))
-            padding: { top: 50, bottom: pb, left: 50, right: 50 },
-            maxZoom: 16,
-            pitch: enableMapbox3d && fullScreen ? 45 : 0,
-            duration: 0,
-          })
         } catch { /* empty bounds */ }
       }
     })
@@ -472,6 +558,76 @@ function JourneyMapGL(
     // gl is the injected engine and does not change for the life of a map.
   }, [photos, gl, entries, stableTrail, stableTracks, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])
 
+  // A switch shows or hides its layers where they are (JRN-04): the GL layers by
+  // their visibility, the entry pins by their element.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    for (const kind of Object.keys(LAYER_IDS) as (keyof JourneyMapLayerVisibility)[]) {
+      if (shownRef.current[kind] === layerVisibility[kind]) continue
+      for (const id of LAYER_IDS[kind]) {
+        try { map.setLayoutProperty(id, 'visibility', layerVisibility[kind] ? 'visible' : 'none') } catch { /* not drawn on this map */ }
+      }
+      if (kind === 'entries') {
+        markersRef.current.forEach(m => { m.getElement().style.display = layerVisibility.entries ? '' : 'none' })
+      }
+    }
+    shownRef.current = layerVisibility
+  }, [layerVisibility])
+
+  // The plan's check on an entry pin follows the plan layer in place.
+  useEffect(() => {
+    const before = iconPlannedRef.current
+    if (before === plannedEntryIds) return
+    for (const item of itemsRef.current) {
+      if (before.has(item.id) !== plannedEntryIds.has(item.id)) setMarkerStyle(item.id, highlightedRef.current === item.id)
+    }
+    iconPlannedRef.current = plannedEntryIds
+  }, [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.
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) return
+    const clear = () => {
+      markMarkersRef.current.forEach(m => m.remove())
+      markMarkersRef.current = []
+    }
+    const draw = () => {
+      clear()
+      if (!marks?.length) return
+      if (!marksFramedRef.current) {
+        marksFramedRef.current = true
+        if (!readerMovedRef.current) {
+          try {
+            map.fitBounds(markBounds(gl, marks, entryPointsRef.current), fitOptions(paddingBottom, enableMapbox3d && fullScreen))
+          } catch { /* empty bounds */ }
+        }
+      }
+      for (const hit of clusterPoints(marks, (lat, lng) => map.project([lng, lat]), 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`
+        el.innerHTML = look.html
+        el.addEventListener('click', (ev) => {
+          ev.stopPropagation()
+          onMarksPickRef.current?.(hit.members)
+        })
+        markMarkersRef.current.push(new gl.Marker({ element: el, anchor: look.anchor }).setLngLat([hit.lng, hit.lat]).addTo(map))
+      }
+    }
+    if (map.loaded()) draw()
+    else map.once('load', draw)
+    map.on('moveend', draw)
+    return () => {
+      map.off('moveend', draw)
+      map.off('load', draw)
+      clear()
+    }
+    // gl is the injected engine and does not change for the life of a map.
+  }, [marks, gl, entries, stableTrail, stableTracks, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])
+
   // Switching the UI language has to repin the basemap labels without tearing
   // the map down. The load handler covers the initial run.
   useEffect(() => {

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

@@ -0,0 +1,68 @@
+// FE-JOURNEY-MAPLAYERCTL-001 to FE-JOURNEY-MAPLAYERCTL-003
+//
+// JRN-04: the journey map's layer switches and its key.
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import JourneyMapLayerControl from './JourneyMapLayerControl';
+import { ALL_VISIBLE, type JourneyMapLayerControl as Control } from './journeyMapLayers';
+import type { JourneyMapLayersView } from './useJourneyMapLayers';
+
+function view(controls: Control[], over: Partial<JourneyMapLayersView> = {}): JourneyMapLayersView {
+  return {
+    visibility: ALL_VISIBLE,
+    toggle: vi.fn(),
+    controls,
+    tracks: [],
+    marks: [],
+    plannedEntryIds: new Set(),
+    ...over,
+  };
+}
+
+describe('JourneyMapLayerControl', () => {
+  it('FE-JOURNEY-MAPLAYERCTL-001: one pressed switch per offered layer with its count, a withheld one not at all', () => {
+    const layers = view(
+      [
+        { layer: 'recorded', count: 2, state: 'ready' },
+        { layer: 'entries', count: 5, state: 'ready' },
+        { layer: 'photos', count: 0, state: 'empty' },
+      ],
+      { visibility: { ...ALL_VISIBLE, photos: false } }
+    );
+    render(<JourneyMapLayerControl layers={layers} />);
+
+    expect(screen.queryByTestId('journey-map-layer-plan')).toBeNull();
+    expect(screen.getByTestId('journey-map-layer-recorded')).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByTestId('journey-map-layer-entries-badge')).toHaveTextContent('5');
+    const photos = screen.getByTestId('journey-map-layer-photos');
+    expect(photos).toHaveAttribute('aria-pressed', 'false');
+    expect(photos.className).toContain('opacity-55');
+    expect(screen.queryByTestId('journey-map-layer-photos-badge')).toBeNull();
+
+    fireEvent.click(photos);
+    expect(layers.toggle).toHaveBeenCalledWith('photos');
+  });
+
+  it('FE-JOURNEY-MAPLAYERCTL-002: a layer that could not be read carries the warning tone, a loading one the spinner', () => {
+    render(
+      <JourneyMapLayerControl
+        layers={view([
+          { layer: 'plan', count: 0, state: 'unavailable' },
+          { layer: 'entries', count: 0, state: 'loading' },
+        ])}
+      />
+    );
+
+    expect(screen.getByTestId('journey-map-layer-plan-badge')).toHaveAttribute('data-tone', 'warning');
+    expect(screen.getByTestId('journey-map-layer-entries')).toHaveAttribute('data-state', 'loading');
+    expect(screen.getByRole('status')).toHaveTextContent('Plan');
+  });
+
+  it('FE-JOURNEY-MAPLAYERCTL-003: the key opens beside the switches and says a plan is no visit', () => {
+    render(<JourneyMapLayerControl layers={view([{ layer: 'entries', count: 1, state: 'ready' }])} compact />);
+
+    expect(screen.queryByText('Entries')).toBeNull();
+    fireEvent.click(screen.getByTestId('journey-map-key-button'));
+    expect(screen.getByTestId('journey-map-key')).toHaveTextContent('A planned place is no proof of a visit');
+  });
+});

client/src/components/Journey/JourneyMapLayerControl.tsx

@@ -0,0 +1,299 @@
+import { CalendarRange, Images, Info, Loader2, NotebookPen, Route } from 'lucide-react';
+import type { ComponentType, ReactNode } from 'react';
+import { useTranslation } from '../../i18n';
+import { FROSTED_SHELL, segmentStyle } from '../Map/mapControlShadow';
+import { LABEL, PopoverListPanel } from '../shared/dialogParts';
+import { fs } from '../shared/DialogShell';
+import { Tooltip } from '../shared/Tooltip';
+import { usePopoverList } from '../shared/usePopoverList';
+import { LAYER_TEXT, type JourneyMapLayerControl as Control, type JourneyMapLayer } from './journeyMapLayers';
+import { PLAN_FALLBACK_COLOR } from './journeyMapMarks';
+import type { JourneyMapLayersView } from './useJourneyMapLayers';
+
+const ICONS: Record<JourneyMapLayer, ComponentType<{ size?: number; strokeWidth?: number }>> = {
+  plan: CalendarRange,
+  recorded: Route,
+  entries: NotebookPen,
+  photos: Images,
+};
+
+/** The sample colours of the key: an entry pin of the first day and a recorded line, as the map draws them. */
+const SAMPLE_DAY = '#6366f1';
+const SAMPLE_ROUTE = '#2563eb';
+
+/** What a switch says about its layer: its name, and why it shows nothing when it does not. */
+function hintOf(control: Control, t: (key: string, params?: Record<string, string | number>) => string): string {
+  const text = LAYER_TEXT[control.layer];
+  const name = t(text.labelKey);
+  if (control.state === 'unavailable') return `${name}: ${t(text.unavailableKey)}`;
+  if (control.state === 'empty') return `${name}: ${t(text.emptyKey)}`;
+  if (control.state === 'loading') return `${name}: ${t('journey.map.layer.loading')}`;
+  return name;
+}
+
+function LayerToggle({
+  control,
+  on,
+  onToggle,
+  compact,
+}: {
+  control: Control;
+  on: boolean;
+  onToggle: () => void;
+  compact: boolean;
+}) {
+  const { t } = useTranslation();
+  const Icon = ICONS[control.layer];
+  const name = t(LAYER_TEXT[control.layer].labelKey);
+  const problem = control.state === 'unavailable';
+  // Nothing to draw: dimmed rather than gone, and the tooltip says why.
+  const quiet = control.state === 'empty' || control.state === 'idle';
+  const showBadge = control.state === 'loading' || problem || (control.state === 'ready' && on);
+  return (
+    <Tooltip label={hintOf(control, t)} placement="bottom">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={name}
+        aria-pressed={on}
+        data-testid={`journey-map-layer-${control.layer}`}
+        data-state={control.state}
+        className={`${on ? 'bg-accent text-accent-text' : 'text-content-muted hover:bg-surface-hover'} ${quiet ? 'opacity-55' : ''} transition-colors`}
+        style={segmentStyle(on)}
+      >
+        <Icon size={14} strokeWidth={2} />
+        {!compact && <span>{name}</span>}
+        {showBadge && (
+          <span
+            aria-hidden
+            data-testid={`journey-map-layer-${control.layer}-badge`}
+            data-tone={problem ? 'warning' : 'default'}
+            className={`inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 font-semibold tabular-nums leading-none ${
+              problem
+                ? 'bg-warning-soft text-warning'
+                : on
+                  ? 'bg-accent-text text-accent'
+                  : 'bg-surface-hover text-content-secondary'
+            }`}
+            style={fs(10)}
+          >
+            {control.state === 'loading' ? (
+              <Loader2 size={10} strokeWidth={2.5} className="motion-safe:animate-spin" />
+            ) : problem ? (
+              '!'
+            ) : (
+              control.count
+            )}
+          </span>
+        )}
+      </button>
+    </Tooltip>
+  );
+}
+
+/** A hollow plan pin, as the map draws it. */
+function PlanPinSample() {
+  return (
+    <svg width="16" height="20" viewBox="0 0 22 28" aria-hidden className="flex-none">
+      <path
+        d="M11 26.5C11 26.5 20.5 17.4 20.5 10.2C20.5 5 16.25 1.5 11 1.5C5.75 1.5 1.5 5 1.5 10.2C1.5 17.4 11 26.5 11 26.5Z"
+        fill="#ffffff"
+        stroke={PLAN_FALLBACK_COLOR}
+        strokeWidth="2"
+        strokeDasharray="3 2"
+      />
+      <circle cx="11" cy="10.5" r="3" fill={PLAN_FALLBACK_COLOR} />
+    </svg>
+  );
+}
+
+/** A journal entry's pin, with the plan's check when the plan had that place too. */
+function EntryPinSample({ planned = false }: { planned?: boolean }) {
+  return (
+    <svg width="16" height="20" viewBox="0 0 28 36" aria-hidden className="flex-none">
+      <path
+        d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z"
+        fill={SAMPLE_DAY}
+      />
+      {planned && (
+        <>
+          <circle cx="22.5" cy="5.5" r="5" fill="#ffffff" stroke="#16a34a" strokeWidth="1.2" />
+          <path
+            d="M20.4 5.6l1.5 1.5 2.8-2.9"
+            fill="none"
+            stroke="#16a34a"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </>
+      )}
+    </svg>
+  );
+}
+
+function StaySample() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 14 14" aria-hidden className="flex-none">
+      <circle cx="7" cy="7" r="5" fill={SAMPLE_DAY} stroke="#ffffff" strokeWidth="2" />
+    </svg>
+  );
+}
+
+function SeveralSample() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 28 28" aria-hidden className="flex-none">
+      <circle cx="16" cy="12" r="10" fill="#ffffff" stroke={SAMPLE_DAY} strokeWidth="2" />
+      <circle cx="12" cy="16" r="10" fill="#ffffff" stroke={PLAN_FALLBACK_COLOR} strokeWidth="2.5" />
+      <text x="12" y="16" textAnchor="middle" dominantBaseline="central" fontSize="11" fontWeight="700" fill="#111827">
+        3
+      </text>
+    </svg>
+  );
+}
+
+function LineSample({ dashed }: { dashed: boolean }) {
+  return (
+    <svg width="24" height="8" viewBox="0 0 24 8" aria-hidden className="flex-none">
+      <line x1="1" y1="4" x2="23" y2="4" stroke="#ffffff" strokeWidth="5" strokeLinecap="round" />
+      <line
+        x1="1"
+        y1="4"
+        x2="23"
+        y2="4"
+        stroke={SAMPLE_ROUTE}
+        strokeWidth="2.5"
+        strokeLinecap={dashed ? 'butt' : 'round'}
+        strokeDasharray={dashed ? '4 3' : undefined}
+      />
+    </svg>
+  );
+}
+
+const ROW = 'flex min-w-0 items-center gap-2.5 text-content-secondary';
+
+/**
+ * The key of the journey map: what each pin, dot and line stands for, with the
+ * one rule that matters most: a planned place is no proof of a visit.
+ */
+function JourneyMapKey() {
+  const { t } = useTranslation();
+  const rows: { sample: ReactNode; labelKey: string }[] = [
+    { sample: <PlanPinSample />, labelKey: 'journey.map.legend.planned' },
+    { sample: <EntryPinSample />, labelKey: 'journey.map.legend.entry' },
+    { sample: <EntryPinSample planned />, labelKey: 'journey.map.legend.plannedWritten' },
+    { sample: <StaySample />, labelKey: 'journey.map.legend.stay' },
+    { sample: <SeveralSample />, labelKey: 'journey.map.legend.several' },
+  ];
+  return (
+    <div className="flex flex-col gap-3 p-1.5" data-testid="journey-map-key">
+      <span className="font-semibold text-content" style={fs(12.5, 'body')}>
+        {t('journey.map.legend')}
+      </span>
+      <ul className="flex flex-col gap-1.5">
+        {rows.map((row) => (
+          <li key={row.labelKey} className={ROW} style={fs(11.5, 'body')}>
+            <span className="flex w-6 flex-none justify-center">{row.sample}</span>
+            <span className="min-w-0">{t(row.labelKey)}</span>
+          </li>
+        ))}
+      </ul>
+      <div className="border-t border-edge-faint pt-3">
+        <span className={LABEL}>{t('journey.map.legend.lines')}</span>
+        <ul className="flex flex-col gap-1.5">
+          <li className={ROW} style={fs(11.5, 'body')}>
+            <span className="flex w-6 flex-none justify-center">
+              <LineSample dashed />
+            </span>
+            <span className="min-w-0">{t('journey.map.legend.plannedRoute')}</span>
+          </li>
+          <li className={ROW} style={fs(11.5, 'body')}>
+            <span className="flex w-6 flex-none justify-center">
+              <LineSample dashed={false} />
+            </span>
+            <span className="min-w-0">{t('journey.map.legend.recordedRoute')}</span>
+          </li>
+        </ul>
+      </div>
+      <p
+        className="flex items-start gap-1.5 rounded-lg bg-surface-hover px-2 py-1.5 text-content-secondary"
+        style={fs(11)}
+      >
+        <Info size={12} strokeWidth={2} aria-hidden className="mt-px flex-none" />
+        {t('journey.map.legend.planIsNoVisit')}
+      </p>
+    </div>
+  );
+}
+
+function KeyButton() {
+  const { t } = useTranslation();
+  const list = usePopoverList(-1, { estimatedHeight: 360 });
+  const { open, toggle, triggerRef, listId } = list;
+  const label = t('journey.map.legend');
+  return (
+    <>
+      <Tooltip label={label} placement="bottom" disabled={open}>
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={toggle}
+          aria-label={label}
+          aria-expanded={open}
+          aria-controls={open ? listId : undefined}
+          data-testid="journey-map-key-button"
+          className={`grid h-[34px] w-[34px] flex-none place-items-center rounded-full text-content-muted transition-colors hover:bg-surface-hover ${open ? 'bg-surface-hover' : ''}`}
+        >
+          <Info size={15} strokeWidth={2} />
+        </button>
+      </Tooltip>
+      <PopoverListPanel list={list} label={label} className="w-[268px]">
+        <JourneyMapKey />
+      </PopoverListPanel>
+    </>
+  );
+}
+
+/**
+ * The layer switches of a journey map (JRN-04), in the frosted pill the
+ * planner's map controls wear: one per layer the reader is offered, each with
+ * its count, a spinner while it loads and the warning tone when it could not
+ * be read, and the key beside them. On a phone the switches drop their words;
+ * the tooltip and the accessible name still say what each is.
+ */
+export default function JourneyMapLayerControl({
+  layers,
+  compact = false,
+}: {
+  layers: JourneyMapLayersView;
+  compact?: boolean;
+}) {
+  const { t } = useTranslation();
+  const live = layers.controls
+    .filter((control) => control.state === 'loading' || control.state === 'unavailable')
+    .map((control) => hintOf(control, t))
+    .join('. ');
+  return (
+    <div
+      style={FROSTED_SHELL}
+      role="group"
+      aria-label={t('journey.map.layers')}
+      className="max-w-full gap-0.5 overflow-x-auto"
+    >
+      {layers.controls.map((control) => (
+        <LayerToggle
+          key={control.layer}
+          control={control}
+          on={layers.visibility[control.layer]}
+          onToggle={() => layers.toggle(control.layer)}
+          compact={compact}
+        />
+      ))}
+      <span aria-hidden className="mx-0.5 h-5 w-px flex-none bg-edge" />
+      <KeyButton />
+      <span role="status" aria-live="polite" className="sr-only">
+        {live}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+// FE-JOURNEY-MAPPICK-001 to FE-JOURNEY-MAPPICK-003
+//
+// JRN-04: what a picked plan place or stay is, and several on one spot as a list.
+import type { JourneyMapPlace, JourneyMapStay } from '@trek/shared';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../../tests/helpers/render';
+import JourneyMapPickCard from './JourneyMapPickCard';
+import type { JourneyMapMark } from './journeyMapMarks';
+
+const PLACE: JourneyMapPlace = {
+  place_id: 4,
+  trip_id: 2,
+  trip_title: 'Venice',
+  name: 'Piazza San Marco',
+  lat: 45.434,
+  lng: 12.3388,
+  days: ['2026-05-14', '2026-05-15'],
+  time: '10:00',
+  category_color: null,
+  category_icon: null,
+  entry_id: null,
+};
+const STAY: JourneyMapStay = {
+  id: 9,
+  entry_id: 7,
+  name: 'Rialto market',
+  lat: 45.438,
+  lng: 12.336,
+  started_at: '2026-05-14T09:00:00+02:00',
+  ended_at: '2026-05-14T10:00:00+02:00',
+};
+const plan = (over: Partial<JourneyMapPlace> = {}): JourneyMapMark => ({
+  kind: 'plan',
+  key: 'plan:4',
+  lat: 45.434,
+  lng: 12.3388,
+  color: '#64748b',
+  place: { ...PLACE, ...over },
+});
+const stay: JourneyMapMark = { kind: 'stay', key: 'stay:9', lat: 45.438, lng: 12.336, color: '#14b8a6', stay: STAY };
+
+describe('JourneyMapPickCard', () => {
+  it('FE-JOURNEY-MAPPICK-001: a planned place names its trip and days and says when nothing was written about it', () => {
+    render(<JourneyMapPickCard marks={[plan()]} onClose={vi.fn()} onOpenEntry={vi.fn()} />);
+
+    expect(screen.getByRole('dialog', { name: 'Piazza San Marco' })).toBeInTheDocument();
+    expect(screen.getByText('Planned')).toBeInTheDocument();
+    expect(screen.getByText('Venice')).toBeInTheDocument();
+    expect(screen.getByText('10:00')).toBeInTheDocument();
+    expect(screen.getByText('Nothing written about it yet.')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Open entry' })).toBeNull();
+  });
+
+  it('FE-JOURNEY-MAPPICK-002: a place written about and a stay lead to their entry', () => {
+    const onOpenEntry = vi.fn();
+    const { unmount } = render(
+      <JourneyMapPickCard marks={[plan({ entry_id: 12 })]} onClose={vi.fn()} onOpenEntry={onOpenEntry} />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Open entry' }));
+    expect(onOpenEntry).toHaveBeenCalledWith('12');
+    unmount();
+
+    render(
+      <JourneyMapPickCard
+        marks={[stay]}
+        onClose={vi.fn()}
+        onOpenEntry={onOpenEntry}
+        entryTitleOf={() => 'A day in Venice'}
+      />
+    );
+    expect(screen.getByText('Part of “A day in Venice”')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Open entry' }));
+    expect(onOpenEntry).toHaveBeenLastCalledWith('7');
+  });
+
+  it('FE-JOURNEY-MAPPICK-003: several on one spot come as a list, each reachable, and Escape closes', () => {
+    const onClose = vi.fn();
+    render(<JourneyMapPickCard marks={[plan(), stay]} onClose={onClose} />);
+
+    expect(screen.getByRole('dialog', { name: 'At this spot' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Rialto market/ }));
+    expect(screen.getByRole('dialog', { name: 'Rialto market' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Back to the list' }));
+    expect(screen.getByRole('button', { name: /Piazza San Marco/ })).toBeInTheDocument();
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+});

client/src/components/Journey/JourneyMapPickCard.tsx

@@ -0,0 +1,184 @@
+import type { JourneyMapPlace, JourneyMapStay } from '@trek/shared';
+import { CalendarRange, ChevronLeft, ChevronRight, Clock, MapPin, NotebookPen, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from '../../i18n';
+import { SoftPill, WhiteBadge } from '../Planner/planParts';
+import { fs } from '../shared/DialogShell';
+import type { JourneyMapMark } from './journeyMapMarks';
+
+interface Props {
+  /** What was picked on the map: one mark, or several that lie on one spot. */
+  marks: JourneyMapMark[];
+  onClose: () => void;
+  /** Leads to an entry; absent where the reader cannot open one. */
+  onOpenEntry?: (entryId: string) => void;
+  /** The title of an entry the reader can see, for the stay that belongs to it. */
+  entryTitleOf?: (entryId: number) => string | null;
+}
+
+function dayLabel(date: string, locale: string): string {
+  return new Date(`${date}T00:00:00`).toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+}
+
+function timeLabel(iso: string, locale: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? '' : d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
+}
+
+function OpenEntry({ entryId, onOpenEntry }: { entryId: number; onOpenEntry?: (entryId: string) => void }) {
+  const { t } = useTranslation();
+  if (!onOpenEntry) return null;
+  return (
+    <button
+      type="button"
+      onClick={() => onOpenEntry(String(entryId))}
+      className="inline-flex items-center gap-1 self-start rounded-lg bg-accent px-2.5 py-1.5 font-semibold text-accent-text hover:opacity-90"
+      style={fs(11.5, 'body')}
+    >
+      <NotebookPen size={12} strokeWidth={2.2} aria-hidden />
+      {t('journey.map.pick.openEntry')}
+    </button>
+  );
+}
+
+function PlaceDetail({ place, onOpenEntry }: { place: JourneyMapPlace; onOpenEntry?: (entryId: string) => void }) {
+  const { t, locale } = useTranslation();
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap items-center gap-1">
+        <SoftPill icon={<CalendarRange size={11} strokeWidth={2} />}>{t('journey.map.pick.planned')}</SoftPill>
+        <WhiteBadge>{place.trip_title}</WhiteBadge>
+        {place.days.map((day) => (
+          <WhiteBadge key={day}>{dayLabel(day, locale)}</WhiteBadge>
+        ))}
+        {place.time && <WhiteBadge icon={<Clock size={10} strokeWidth={2} />}>{place.time}</WhiteBadge>}
+      </div>
+      {place.entry_id !== null ? (
+        <OpenEntry entryId={place.entry_id} onOpenEntry={onOpenEntry} />
+      ) : (
+        <p className="text-content-muted" style={fs(11.5, 'body')}>
+          {t('journey.map.pick.notWritten')}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function StayDetail({
+  stay,
+  onOpenEntry,
+  entryTitleOf,
+}: { stay: JourneyMapStay } & Pick<Props, 'onOpenEntry' | 'entryTitleOf'>) {
+  const { t, locale } = useTranslation();
+  const entryTitle = entryTitleOf?.(stay.entry_id);
+  const from = timeLabel(stay.started_at, locale);
+  const to = timeLabel(stay.ended_at, locale);
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap items-center gap-1">
+        <SoftPill tone="info" icon={<MapPin size={11} strokeWidth={2} />}>
+          {t('journey.map.pick.stay')}
+        </SoftPill>
+        {from && (
+          <WhiteBadge icon={<Clock size={10} strokeWidth={2} />}>
+            {to ? t('journey.map.pick.timeRange', { from, to }) : from}
+          </WhiteBadge>
+        )}
+      </div>
+      {entryTitle && (
+        <p className="truncate text-content-secondary" style={fs(11.5, 'body')}>
+          {t('journey.map.pick.partOf', { title: entryTitle })}
+        </p>
+      )}
+      <OpenEntry entryId={stay.entry_id} onOpenEntry={onOpenEntry} />
+    </div>
+  );
+}
+
+function markName(mark: JourneyMapMark): string {
+  return mark.kind === 'plan' ? mark.place.name : mark.stay.name;
+}
+
+/**
+ * What a mark picked on the journey map is (JRN-04), docked over the map's
+ * corner: a planned place with its trip, its days and the entry written about
+ * it, or a stay with its times and the report it belongs to. Several marks on
+ * one spot come as a list first, each with what kind it is, so overlapping
+ * hits stay reachable one by one.
+ */
+export default function JourneyMapPickCard({ marks, onClose, onOpenEntry, entryTitleOf }: Props) {
+  const { t, locale } = useTranslation();
+  const [picked, setPicked] = useState<JourneyMapMark | null>(marks.length === 1 ? marks[0] : null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const title = picked ? markName(picked) : t('journey.map.pick.here');
+  return (
+    <div
+      role="dialog"
+      aria-label={title}
+      data-testid="journey-map-pick"
+      className="pointer-events-auto flex w-[280px] max-w-[calc(100%-24px)] flex-col gap-2 rounded-xl border border-edge bg-surface-card p-3 shadow-lg"
+    >
+      <div className="flex items-start gap-1.5">
+        {picked && marks.length > 1 && (
+          <button
+            type="button"
+            onClick={() => setPicked(null)}
+            aria-label={t('journey.map.pick.back')}
+            className="-ms-1 grid h-6 w-6 flex-none place-items-center rounded-md text-content-muted hover:bg-surface-hover"
+          >
+            <ChevronLeft size={14} strokeWidth={2.2} className="rtl:rotate-180" />
+          </button>
+        )}
+        <span className="min-w-0 flex-1 font-semibold text-content" style={fs(13, 'body')}>
+          {title}
+        </span>
+        {!picked && <WhiteBadge>{marks.length}</WhiteBadge>}
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('common.close')}
+          className="grid h-6 w-6 flex-none place-items-center rounded-md text-content-muted hover:bg-surface-hover"
+        >
+          <X size={14} strokeWidth={2.2} />
+        </button>
+      </div>
+      {picked?.kind === 'plan' && <PlaceDetail place={picked.place} onOpenEntry={onOpenEntry} />}
+      {picked?.kind === 'stay' && (
+        <StayDetail stay={picked.stay} onOpenEntry={onOpenEntry} entryTitleOf={entryTitleOf} />
+      )}
+      {!picked && (
+        <ul className="-mx-1 flex max-h-[220px] flex-col overflow-y-auto">
+          {marks.map((mark) => (
+            <li key={mark.key}>
+              <button
+                type="button"
+                onClick={() => setPicked(mark)}
+                className="flex w-full items-center gap-2 rounded-lg px-1.5 py-1.5 text-start hover:bg-surface-hover"
+              >
+                <span aria-hidden className="h-2.5 w-2.5 flex-none rounded-full" style={{ background: mark.color }} />
+                <span className="min-w-0 flex-1 truncate text-content" style={fs(12, 'body')}>
+                  {markName(mark)}
+                </span>
+                <SoftPill tone={mark.kind === 'plan' ? 'neutral' : 'info'}>
+                  {mark.kind === 'plan' ? t('journey.map.pick.planned') : t('journey.map.pick.stay')}
+                </SoftPill>
+                {mark.kind === 'plan' && mark.place.days[0] && (
+                  <WhiteBadge>{dayLabel(mark.place.days[0], locale)}</WhiteBadge>
+                )}
+                <ChevronRight size={13} strokeWidth={2} className="flex-none text-content-faint rtl:rotate-180" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+// FE-JRN-RECORDING-DIALOG-001 to FE-JRN-RECORDING-DIALOG-005
+//
+// JRN-01: the desktop dialog that takes one day's recorded route over. It names
+// the journey and the day, shows what would be kept, and keeps it only on its
+// button.
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildRecordedDay, buildRecordingPreview } from '../../../tests/helpers/journeyRecording';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import JourneyRecordingDialog from './JourneyRecordingDialog';
+
+const repo = vi.hoisted(() => ({ preview: vi.fn(), save: vi.fn(), remove: vi.fn() }));
+vi.mock('../../repo/journeyRecordingsRepo', () => ({ journeyRecordingsRepo: repo }));
+
+const toast = { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() };
+vi.mock('../shared/Toast', () => ({ useToast: () => toast }));
+
+const httpError = (code: string) => Object.assign(new Error(code), { response: { data: { error: code, code } } });
+
+function renderDialog(stored?: ReturnType<typeof buildRecordedDay>) {
+  const props = { onKept: vi.fn(), onRemoved: vi.fn(), onClose: vi.fn() };
+  render(<JourneyRecordingDialog journeyId={7} journeyTitle="Venice" date="2026-05-14" stored={stored} {...props} />);
+  return props;
+}
+
+beforeEach(() => {
+  for (const fn of [...Object.values(repo), ...Object.values(toast)]) fn.mockReset();
+});
+
+describe('JourneyRecordingDialog', () => {
+  it('FE-JRN-RECORDING-DIALOG-001: names the journey and the day and shows what the day covers before anything is kept', async () => {
+    repo.preview.mockResolvedValue(buildRecordingPreview({ audience: 2 }));
+    renderDialog();
+
+    expect(await screen.findByTestId('recording-sketch')).toBeInTheDocument();
+    expect(screen.getByText('Venice')).toBeInTheDocument();
+    expect(screen.getByText(/May 14, 2026/)).toBeInTheDocument();
+    expect(screen.getByText('1.5 km')).toBeInTheDocument();
+    expect(screen.getByText('1 piece')).toBeInTheDocument();
+    expect(screen.getByText('Walking')).toBeInTheDocument();
+    expect(screen.getByText(/2 other people on this journey will see the route/)).toBeInTheDocument();
+    expect(repo.save).not.toHaveBeenCalled();
+  });
+
+  it('FE-JRN-RECORDING-DIALOG-002: keeps the day on its button and closes', async () => {
+    repo.preview.mockResolvedValue(buildRecordingPreview());
+    const day = buildRecordedDay();
+    repo.save.mockResolvedValue({ day, outcome: 'created' });
+    const props = renderDialog();
+
+    await userEvent.click(await screen.findByRole('button', { name: 'Keep route' }));
+
+    await waitFor(() => expect(props.onKept).toHaveBeenCalledWith(day));
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('FE-JRN-RECORDING-DIALOG-003: gaps and an unfinished day are said out loud, a kept twin cannot be kept again', async () => {
+    const preview = buildRecordingPreview();
+    repo.preview.mockResolvedValue({
+      ...preview,
+      provisional: true,
+      stats: { ...preview.stats, gapCount: 2 },
+      stored: buildRecordedDay(),
+      sameAsStored: true,
+    });
+    renderDialog(buildRecordedDay());
+
+    expect(await screen.findByText('2 gaps')).toBeInTheDocument();
+    expect(screen.getByText(/not over yet in this time zone/)).toBeInTheDocument();
+    expect(screen.getByText('This journey keeps exactly this recording already.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Already kept' })).toBeDisabled();
+  });
+
+  it('FE-JRN-RECORDING-DIALOG-004: when Dawarich cannot be read it says why, that the kept route stays, and offers to try again', async () => {
+    repo.preview.mockRejectedValueOnce(httpError('unauthorized'));
+    renderDialog(buildRecordedDay());
+
+    expect(await screen.findByText(/Dawarich rejected the API key\./)).toBeInTheDocument();
+    expect(screen.getByText(/The route this journey keeps stays as it is\./)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Keep route' })).toBeDisabled();
+
+    repo.preview.mockResolvedValue(buildRecordingPreview());
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    expect(await screen.findByTestId('recording-sketch')).toBeInTheDocument();
+  });
+
+  it('FE-JRN-RECORDING-DIALOG-005: removing the kept route asks first, also when Dawarich does not answer', async () => {
+    repo.preview.mockRejectedValue(httpError('not_connected'));
+    repo.remove.mockResolvedValue(undefined);
+    const props = renderDialog(buildRecordedDay());
+    await screen.findByText(/No Dawarich instance is connected yet\./);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Remove route' }));
+    expect(repo.remove).not.toHaveBeenCalled();
+    expect(await screen.findByText('Remove the kept route?')).toBeInTheDocument();
+    const buttons = screen.getAllByRole('button', { name: 'Remove route' });
+    const confirm = buttons[buttons.length - 1];
+    if (!confirm) throw new Error('no confirm button');
+    await userEvent.click(confirm);
+
+    await waitFor(() => expect(props.onRemoved).toHaveBeenCalledWith('2026-05-14'));
+  });
+});