admin: live ring capacity is injectable, eviction test no longer timing-bound

The routing rule is global, so the agent it names lives next to it now
(~/.claude/agents/opus-coder.md), at medium effort and without the
milestone-spec wording that only fit this repository.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.claude/agents/opus-coder.md

@@ -1,8 +0,0 @@
----
-name: opus-coder
-description: Coding sessions routed per ~/.claude/rules/model-routing.md — all substantial and mechanical implementation work runs on Opus 5 at high effort; Fable stays for decomposition and review.
-model: opus
-effort: high
----
-
-You implement one milestone session from a spec in this repository. The spec you are pointed at is the binding contract. Own only the files your session is assigned; do not commit; verify your work with the repo's build and test commands; report what you changed, what you ran, and every result faithfully, including failures.

.gitea/workflows/ci.yml

@@ -9,6 +9,12 @@ on:
     branches: [master]
   pull_request:
     branches: [master]
+  # A runner pod replaced mid-job kills the job it is running: the step's log
+  # stops dead, no epilogue is written, and Gitea marks the orphan failed.
+  # Nothing in the tree is wrong when that happens and nothing in the tree can
+  # fix it, so the gate set must be re-runnable without an empty commit. This
+  # adds a trigger, not a check — the job list below stays the gate set alone.
+  workflow_dispatch:
 
 jobs:
   gates:

.gitea/workflows/gates.yml

@@ -14,9 +14,28 @@ name: Gates
 # token. A moved tag upstream would execute there. ci.yml itself still uses no
 # third-party action; its only `uses:` is this workflow.
 #
-# Resolved with `git ls-remote <repo> refs/tags/vN 'refs/tags/vN^{}'` on
-# 2026-08-07. All three are lightweight tags — no `^{}` peel row — so the
-# listed SHA is the commit.
+# Resolved with `git ls-remote <repo> refs/tags/vN 'refs/tags/vN^{}'` — the
+# three originals on 2026-08-07, the two artifact actions on 2026-08-12. Every
+# tag pinned here is lightweight — no `^{}` peel row — so the listed SHA is the
+# commit. download-artifact's `v3-node20` is the exception that proves the
+# rule: it is annotated, and its peel row names a different commit than the tag
+# object. This file pins `v3.1.0-node20`, which is lightweight.
+#
+# The artifact actions are pinned to v3, and to the node20 rebuilds of v3, for
+# two separate reasons.
+#
+# v4 and v5 abort in the *client*, not the server. @actions/artifact asks
+# isGhes(), Gitea answers the way GitHub Enterprise Server does, and the action
+# refuses before it uploads anything. The server side is present: Gitea 1.27.1
+# routes the whole v4 twirp service — CreateArtifact, FinalizeArtifact,
+# ListArtifacts, GetSignedArtifactURL and DeleteArtifact all answer 401, where
+# an unrouted path answers 404. The forks that patch isGhes() out are
+# third-party code, which is what the pinning rule above exists to keep away
+# from the job that holds the signing subkey.
+#
+# The stock v3 tags — upload ff15f030 (v3.2.1), download 9bc31d5c (v3.0.2) —
+# declare `using: node16`, and a runner is not required to still ship a node16.
+# The `-node20` rebuilds are that same action code on a runtime that exists.
 on:
   workflow_call:
 
@@ -29,8 +48,9 @@ env:
   # version to exist in the tag and in build.zig.zon and nowhere else, and
   # ruling 5 makes verify-dist fail when the version under build disagrees with
   # build.zig.zon. An invented CI string such as "0.0.0-ci" therefore cannot
-  # pass this file's own packaging gate. The package and container jobs read
-  # the version out of build.zig.zon instead.
+  # pass this file's own packaging gate. The package job reads the version out
+  # of build.zig.zon instead, and the container job takes it from that job's
+  # output.
 
 jobs:
   test:
@@ -85,7 +105,11 @@ jobs:
         run: zig build test-aarch64 -fqemu
 
   frontend:
-    runs-on: ubuntu-24.04
+    # The light runner, a second act_runner at capacity 1 that advertises only
+    # this label. This job peaks around 355 MB (tsc), well inside that runner's
+    # 1536Mi dind limit, and it runs no docker command — so it overlaps the
+    # heavy runner's zig and image work instead of queueing behind it.
+    runs-on: ubuntu-24.04-light
 
     steps:
       - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
@@ -95,44 +119,72 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: npm
-          cache-dependency-path: web/package-lock.json
+          cache-dependency-path: admin/package-lock.json
 
       - name: Install dependencies
-        working-directory: web
+        working-directory: admin
         run: npm ci
 
       - name: Check formatting
-        working-directory: web
+        working-directory: admin
         run: npm run format:check
 
       - name: Lint
-        working-directory: web
+        working-directory: admin
         run: npm run lint
 
       - name: Typecheck
-        working-directory: web
+        working-directory: admin
         run: npm run typecheck
 
       - name: Run tests
-        working-directory: web
+        working-directory: admin
         run: npm test
 
       - name: Build
-        working-directory: web
+        working-directory: admin
         run: npm run build
 
       # The licence inventory has to cover every package whose bytes ship, and
       # the lockfile does not answer that question: it lists what could be
       # reached, not what rollup kept. The bundle is what this reads. The logic
-      # lives in web/scripts/, unit-tested by `npm test`, so it runs on a laptop
+      # lives in admin/scripts/, unit-tested by `npm test`, so it runs on a laptop
       # exactly as it runs here (milestone-14 deviation 24).
-      - name: Assert the packages bundled into web/dist are the recorded ones
-        working-directory: web
+      - name: Assert the packages bundled into admin/dist are the recorded ones
+        working-directory: admin
         run: npm run assert-bundled
 
+      # The package and container jobs consume this bundle instead of building
+      # their own. The upload is last on purpose: a bundle that failed the
+      # licence inventory or any check above must not reach the jobs that
+      # package it into a tarball and an image.
+      #
+      # Artifact names are scoped to the run, so the ci.yml and release.yml
+      # runs that share this runner cannot read each other's.
+      #
+      # A later move to v4 has to add `include-hidden-files: true` here.
+      # `npm run build` writes the freshness stamp to the hidden file
+      # admin/dist/.src-hash (milestone-15 ruling 5), and v4.4.0 and later drop
+      # dotfiles by default. It is inactive today — v3 keeps them, and the
+      # package job's target path skips the stamp check regardless — but a move
+      # to v4 that also pointed the download back at admin/dist would fail with
+      # "admin/dist is stale".
+      - name: Upload the built web UI
+        uses: actions/upload-artifact@c24449f33cd45d4826c6702db7e49f7cdb9b551d # v3.2.1-node20
+        with:
+          name: admin-dist
+          path: admin/dist
+          if-no-files-found: error
+
   package:
+    needs: [frontend]
     runs-on: ubuntu-24.04
 
+    # The container job needs the version and installs no Zig, so it cannot read
+    # build.zig.zon the way this job does.
+    outputs:
+      version: ${{ steps.zon-version.outputs.version }}
+
     steps:
       - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
 
@@ -149,30 +201,37 @@ jobs:
       - name: Create the fetch temp dir zig assumes
         run: mkdir -p "${ZIG_GLOBAL_CACHE_DIR:?}/tmp"
 
-      - name: Set up Node
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+      # `dist` refuses admin/dist-placeholder (ruling 4), so a real bundle has to
+      # exist before the packaging gate runs. It arrives from the frontend job,
+      # already formatted, linted, typechecked, tested and licence-checked.
+      #
+      # The target is deliberately not `admin/dist`: build.zig runs the freshness
+      # stamp check for that exact path and no other (milestone-15 ruling 5),
+      # and the check shells out to `node`. Here it would buy nothing — the
+      # stamp hashes the admin/ sources, not the bundle, so against a checkout of
+      # the same commit that built the bundle it can only agree. An explicit
+      # path is the case build.zig documents for a bundle built elsewhere, and
+      # taking it keeps node out of this job entirely.
+      - name: Download the web UI built by the frontend job
+        uses: actions/download-artifact@ad191675b41f6a5b46da9a048cb6893812da158b # v3.1.0-node20
         with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-          cache-dependency-path: web/package-lock.json
-
-      # `dist` refuses web/dist-placeholder (ruling 4), so the real bundle has
-      # to exist before the packaging gate runs.
-      - name: Build the web UI
-        working-directory: web
-        run: |
-          npm ci
-          npm run build
+          name: admin-dist
+          path: admin-dist-ci
 
       # Ruling 2: build.zig.zon is the only place besides the tag that carries
       # the version, and ruling 5 makes verify-dist assert the two agree. The
       # gate builds the version the repository declares.
+      #
+      # This is the only job that reads it. The container job used to run its own
+      # `sed` over the same file; it now receives this step's output, so the two
+      # jobs cannot disagree about what the repository declares. The parse itself
+      # matches verify-dist's, through the zon grammar rather than a regex.
+      - name: Build the container gate tool
+        run: zig build container-check-tool
+
       - name: Read the version from build.zig.zon
-        run: |
-          set -euo pipefail
-          version=$(sed -n 's/^[[:space:]]*\.version[[:space:]]*=[[:space:]]*"\([^"]*\)".*/\1/p' build.zig.zon | head -1)
-          test -n "$version"
-          echo "CI_VERSION=$version" >> "$GITHUB_ENV"
+        id: zon-version
+        run: ./zig-out/bin/container_check version
 
       - name: Build the release artifacts
         run: |
@@ -180,7 +239,7 @@ jobs:
           zig build dist \
             -Dversion-string="$CI_VERSION" \
             -Dgit-commit="$GITHUB_SHA" \
-            -Dweb-dist=web/dist \
+            -Dadmin-dist=admin-dist-ci \
             -Doptimize=ReleaseSafe
 
       # verify-dist owns every assert the CI shell used to make: ELF static
@@ -196,204 +255,96 @@ jobs:
           zig build verify-dist \
             -Dversion-string="$CI_VERSION" \
             -Dgit-commit="$GITHUB_SHA" \
-            -Dweb-dist=web/dist \
+            -Dadmin-dist=admin-dist-ci \
             -Doptimize=ReleaseSafe
 
+      # deploy/docker/Dockerfile copies both of these trees and nothing else
+      # out of zig-out/dist: the binary comes from dist/bin/<triple>/, and
+      # /LICENSE and /THIRD-PARTY-NOTICES come from the matching dist/stage/
+      # directory, which the container job then hashes against the image. The
+      # tarballs and SHA256SUMS stay behind — no later job reads them, and
+      # verify-dist has already checked them here.
+      #
+      # The zip round-trip drops the executable bit. That is survivable only
+      # because the Dockerfile chmods the binary itself and the contents
+      # assertion compares sha256 of file contents, never modes. The archive
+      # modes are asserted by verify-dist, above, on the originals. The gate tool
+      # rides along in the same artifact and the container job chmods it back.
+      #
+      # Adding zig-out/bin/container_check moves the artifact's common root from
+      # zig-out/dist up to zig-out, which is why the container job restores into
+      # zig-out rather than zig-out/dist. The Dockerfile's COPY paths still
+      # resolve; they are relative to the repository root either way.
+      - name: Upload the staged payload for the container job
+        uses: actions/upload-artifact@c24449f33cd45d4826c6702db7e49f7cdb9b551d # v3.2.1-node20
+        with:
+          name: dist-payload
+          path: |
+            zig-out/dist/bin
+            zig-out/dist/stage
+            zig-out/bin/container_check
+          if-no-files-found: error
+
   container:
+    needs: [package]
     runs-on: ubuntu-24.04
 
+    env:
+      # Ruling 2 and ruling 5: one parse of build.zig.zon per run, done in the
+      # package job. This job installs no Zig and cannot repeat it.
+      CI_VERSION: ${{ needs.package.outputs.version }}
+
     steps:
       - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
 
-      - name: Set up Zig
-        uses: mlugg/setup-zig@d1434d08867e3ee9daa34448df10607b98908d29 # v2.2.1
+      # Restored under zig-out because that is where the Dockerfile's COPY lines
+      # look for dist/, with the repository root as the build context, and
+      # because the payload also carries bin/container_check. This job compiles
+      # nothing and bundles nothing: the payload is the one the package job
+      # already built and verify-dist already checked, which is also the point —
+      # an image built from a second, independent `dist` run would prove nothing
+      # about the artifacts the release publishes.
+      - name: Download the staged payload built by the package job
+        uses: actions/download-artifact@ad191675b41f6a5b46da9a048cb6893812da158b # v3.1.0-node20
         with:
-          version: ${{ env.ZIG_VERSION }}
+          name: dist-payload
+          path: zig-out
 
-      # zig 0.16.0's package fetcher creates tmp/<hex>.zip inside the global
-      # cache without creating tmp/ first (src/Package/Fetch.zig:1499), and
-      # setup-zig's restored cache never contains tmp/. Without this, every
-      # dependency fetch dies with "failed to create temporary zip file:
-      # FileNotFound" before any network I/O.
-      - name: Create the fetch temp dir zig assumes
-        run: mkdir -p "${ZIG_GLOBAL_CACHE_DIR:?}/tmp"
+      # The artifact zip carries no modes.
+      - name: Restore the gate tool's executable bit
+        run: chmod +x zig-out/bin/container_check
 
-      - name: Set up Node
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-          cache-dependency-path: web/package-lock.json
+      # Everything this gate decides — this run's docker object names, the
+      # ownership label, the image build, the contents assertion against the
+      # staged payload, and the smoke test with its topology detection and its
+      # absolute probe deadline — lives in tools/container_check.zig, along with
+      # the rationale comments that used to sit in this file. That is the same
+      # move release.yml made (milestone-14 deviation 24): logic in a `run:`
+      # block cannot be type-checked, run on a laptop, or covered by a test.
+      - name: Run the container acceptance gate
+        run: ./zig-out/bin/container_check gate
 
-      - name: Build the web UI
-        working-directory: web
-        run: |
-          npm ci
-          npm run build
-
-      # Same single source of truth as the package job (rulings 2 and 5).
-      - name: Read the version from build.zig.zon
-        run: |
-          set -euo pipefail
-          version=$(sed -n 's/^[[:space:]]*\.version[[:space:]]*=[[:space:]]*"\([^"]*\)".*/\1/p' build.zig.zon | head -1)
-          test -n "$version"
-          echo "CI_VERSION=$version" >> "$GITHUB_ENV"
-
-      - name: Build the release artifacts
-        run: |
-          set -euo pipefail
-          zig build dist \
-            -Dversion-string="$CI_VERSION" \
-            -Dgit-commit="$GITHUB_SHA" \
-            -Dweb-dist=web/dist \
-            -Doptimize=ReleaseSafe
-
-      # Image tags, container names and published host ports are all
-      # daemon-global. This workflow is called by both ci.yml and release.yml
-      # and the self-hosted runners share one docker daemon, so the fixed
-      # `nxdns:ci` and `nxdns-smoke` made two concurrent runs collide: the
-      # second `docker create --name` fails outright, and worse, whichever run
-      # finishes first deletes the other's container mid-test. The names below
-      # carry the run identity plus four random bytes — the run id alone is not
-      # enough, because two *repositories* on the same daemon can issue the
-      # same one. The published port becomes ephemeral for the same reason.
-      - name: Name this run's docker objects
-        run: |
-          set -euo pipefail
-          rand=$(head -c 4 /dev/urandom | od -An -tx1 | tr -d ' \n')
-          suffix="${GITHUB_RUN_ID:-0}-${GITHUB_RUN_ATTEMPT:-1}-$rand"
-          {
-            echo "CI_IMAGE=nxdns:ci-$suffix"
-            echo "SMOKE_NAME=nxdns-smoke-$suffix"
-          } >> "$GITHUB_ENV"
-          echo "image nxdns:ci-$suffix, container nxdns-smoke-$suffix"
-
-      # The build args carry the OCI label values (ruling 6); release.yml
-      # passes the same three and then asserts the resulting
-      # org.opencontainers.image.version label. BuildKit is not optional here:
-      # the builder stage is pinned to $BUILDPLATFORM, which the classic
-      # builder does not define, so DOCKER_BUILDKIT=0 fails at the first FROM.
-      - name: Build the image
-        env:
-          DOCKER_BUILDKIT: "1"
-        run: |
-          set -euo pipefail
-          docker build -t "$CI_IMAGE" -f deploy/docker/Dockerfile \
-            --build-arg VERSION="$CI_VERSION" \
-            --build-arg REVISION="$GITHUB_SHA" \
-            --build-arg CREATED="1970-01-01T00:00:00Z" \
-            .
-
-      # Ruling 6: the binary in the image must be the binary in the tarball.
-      # Ruling 3: distributing the image is distribution, so /LICENSE and
-      # /THIRD-PARTY-NOTICES must be in it and must be the same files the
-      # tarball carries — that is an acceptance criterion and nothing checked
-      # it. Comparing against the staged payload rather than merely asserting
-      # the paths exist costs nothing and catches a stale or empty copy.
+      # The gate removes its own container and image on every exit path it
+      # survives. This step is the exit path for a cancelled job and for a step
+      # that died before the gate's own defers ran — on a long-lived self-hosted
+      # daemon those accumulate one layer set per run. The name pair only exists
+      # if the gate got as far as writing $GITHUB_ENV, so the label sweep covers
+      # the rest of this run.
       #
-      # Native triple only: this job builds a single-architecture image.
-      # release.yml covers both platforms against the pushed multi-arch index.
-      - name: Assert the image contents match the packaged artifacts
-        run: |
-          set -euo pipefail
-          stage="zig-out/dist/stage/nxdns-$CI_VERSION-x86_64-linux-musl"
-          test -d "$stage"
-
-          out=$(mktemp -d)
-          cid=$(docker create "$CI_IMAGE")
-          trap 'docker rm -f "$cid" >/dev/null 2>&1 || true; rm -rf "$out"' EXIT
-
-          rc=0
-          for member in nxdns LICENSE THIRD-PARTY-NOTICES; do
-            docker cp "$cid:/$member" "$out/$member"
-            want=$(sha256sum "$stage/$member" | cut -d' ' -f1)
-            got=$(sha256sum "$out/$member" | cut -d' ' -f1)
-            if [ "$want" = "$got" ]; then
-              echo "/$member matches ($got)"
-            else
-              echo "/$member DIFFERS: image $got, packaged $want"
-              rc=1
-            fi
-          done
-          test "$rc" -eq 0
-
-      - name: Smoke test the container
-        run: |
-          set -euo pipefail
-
-          docker run --rm "$CI_IMAGE" version
-
-          mkdir -p etc-nxdns
-          cat > etc-nxdns/config.zon <<'EOF'
-          .{
-              .groups = .{ .{ .name = "default" } },
-              .upstreams = .{ .{ .url = "https://cloudflare-dns.com/dns-query" } },
-          }
-          EOF
-
-          # No bind mount: the runner talks to the daemon over a mounted
-          # socket, so a -v path would resolve on the docker host (where the
-          # workspace does not exist) and mount an empty directory over
-          # /etc/nxdns. docker cp streams the file through the socket instead.
-          #
-          # Networking: this job itself runs in a container on the runner's
-          # per-job network. A published port binds on the daemon's host, not
-          # here, and docker does not route between the default bridge and
-          # that network — a bridge-IP curl hangs to its connect timeout. So
-          # the smoke container joins the job's own network, where its name
-          # resolves and its port is reachable. On a host runner the inspect
-          # finds no container and the published-port path covers it.
-          #
-          # `-p 127.0.0.1::8080` takes an ephemeral host port instead of a
-          # fixed 18080, which two concurrent runs on this daemon cannot both
-          # bind. The actual port is read back with `docker port`.
-          net=$(docker inspect "$(hostname)" \
-            -f '{{range $k, $v := .NetworkSettings.Networks}}{{$k}}{{end}}' \
-            2>/dev/null || true)
-          cid=$(docker create --name "$SMOKE_NAME" \
-            ${net:+--network "$net"} \
-            -p 127.0.0.1::8080 \
-            "$CI_IMAGE")
-          trap 'docker rm -f "$SMOKE_NAME" >/dev/null 2>&1 || true' EXIT
-          docker cp etc-nxdns/config.zon "$SMOKE_NAME:/etc/nxdns/config.zon"
-          docker start "$SMOKE_NAME"
-
-          hostport=$(docker port "$SMOKE_NAME" 8080/tcp 2>/dev/null | head -1 | awk -F: '{ print $NF }')
-          ip=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' "$cid")
-          echo "published host port: ${hostport:-none}, container ip: ${ip:-none}"
-          healthy=""
-          for _ in $(seq 1 30); do
-            if [ "$(docker inspect -f '{{.State.Running}}' "$cid")" != "true" ]; then
-              echo "container exited during startup"
-              docker logs "$cid" || true
-              exit 1
-            fi
-            if curl -fsS --connect-timeout 2 "http://$SMOKE_NAME:8080/api/health" \
-              || { [ -n "$hostport" ] && curl -fsS --connect-timeout 2 "http://127.0.0.1:$hostport/api/health"; } \
-              || { [ -n "$ip" ] && curl -fsS --connect-timeout 2 "http://$ip:8080/api/health"; }; then
-              healthy=1
-              break
-            fi
-            sleep 1
-          done
-          if [ -z "$healthy" ]; then
-            echo "no /api/health response within 30 seconds"
-            docker logs "$cid" || true
-            exit 1
-          fi
-
-          docker stop -t 30 "$SMOKE_NAME"
-          exit_code=$(docker inspect -f '{{.State.ExitCode}}' "$SMOKE_NAME")
-          echo "exit code after SIGTERM: $exit_code"
-          docker logs "$SMOKE_NAME" || true
-          test "$exit_code" -eq 0
-
-      # The per-step traps only cover the step that set them. This is the exit
-      # path for a cancelled job, a step that died before its trap was
-      # installed, and the image itself, which no trap ever removed — on a
-      # long-lived self-hosted daemon those accumulate one layer set per run.
+      # It covers no more than that. `always()` does not run when the runner or
+      # the pod itself dies, and the filter below names THIS attempt's label
+      # value exactly — deliberately, since a concurrent run of another
+      # repository must not be swept, but that also means a later attempt cannot
+      # collect an earlier one's leak. What the label buys for those cases is
+      # discovery, not recovery: `docker ps -a --filter
+      # label=net.mial.nxdns.ci` and the matching `docker images` list every
+      # object this workflow has ever left behind, with the repository, run and
+      # attempt that owns each one. Reclaiming them is a manual sweep today, and
+      # the hook a janitor job would use later.
       - name: Remove this run's docker objects
         if: always()
+        env:
+          CI_LABEL: net.mial.nxdns.ci=${{ github.repository }}/${{ github.run_id }}/${{ github.run_attempt }}
         run: |
           set -uo pipefail
           if [ -n "${SMOKE_NAME:-}" ]; then
@@ -402,4 +353,10 @@ jobs:
           if [ -n "${CI_IMAGE:-}" ]; then
             docker image rm -f "$CI_IMAGE" >/dev/null 2>&1 || true
           fi
+          for cid in $(docker ps -aq --filter "label=$CI_LABEL"); do
+            docker rm -f "$cid" >/dev/null 2>&1 || true
+          done
+          for iid in $(docker images -q --filter "label=$CI_LABEL"); do
+            docker image rm -f "$iid" >/dev/null 2>&1 || true
+          done
           exit 0

.gitea/workflows/release.yml

@@ -269,10 +269,10 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: npm
-          cache-dependency-path: web/package-lock.json
+          cache-dependency-path: admin/package-lock.json
 
       - name: Build the web UI
-        working-directory: web
+        working-directory: admin
         run: |
           npm ci
           npm run build
@@ -283,7 +283,7 @@ jobs:
           zig build dist
           -Dversion-string="$VERSION"
           -Dgit-commit="$TAG_COMMIT"
-          -Dweb-dist=web/dist
+          -Dadmin-dist=admin/dist
           -Doptimize=ReleaseSafe
 
       - name: Verify the release artifacts
@@ -291,7 +291,7 @@ jobs:
           zig build verify-dist
           -Dversion-string="$VERSION"
           -Dgit-commit="$TAG_COMMIT"
-          -Dweb-dist=web/dist
+          -Dadmin-dist=admin/dist
           -Doptimize=ReleaseSafe
 
       # Step 9. Extracted and validated before anything is pushed anywhere, so

.gitignore

@@ -1,6 +1,7 @@
 .zig-cache/
 zig-out/
 zig-pkg/
-web/node_modules/
-web/dist/
-web/dist-sourcemap/
+admin/node_modules/
+admin/dist/
+admin/dist-sourcemap/
+admin-dist-ci/

AGENTS.md

@@ -2,79 +2,42 @@
 
 ## Aim
 
-nxdns: a self-hosted DNS sinkhole for a household LAN, written in Zig 0.16.0.
-Portfolio-grade public repo. PLAN.md is the source of truth for scope and design;
-specs/ holds per-milestone contracts; specs/research/ holds verified stdlib facts.
+nxdns: a self-hosted DNS sinkhole for a household LAN, written in Zig 0.16.0. Portfolio-grade public repo. PLAN.md is the source of truth for scope and design; specs/ holds per-milestone contracts; specs/research/ holds verified stdlib facts.
 
 ## Values
 
-We intentionally architect this code to be robust, maintainable, pragmatic —
-good craftsmanship and good engineering. We explicitly avoid tech debt, code
-smells, bad architecture decisions, and brittle implementations.
+We intentionally architect this code to be robust, maintainable, pragmatic — good craftsmanship and good engineering. We explicitly avoid tech debt, code smells, bad architecture decisions, and brittle implementations.
 
 What that means in practice:
 
-- This is a greenfield project. Breaking changes are allowed. Never keep a bad
-  interface for compatibility; fix it at the root.
-- No versioning of scope. A feature is in scope (build it completely) or out of
-  scope (do not build it). No "v2 later", no stubs left behind.
+- This is a greenfield project. Breaking changes are allowed. Never keep a bad interface for compatibility; fix it at the root.
+- No versioning of scope. A feature is in scope (build it completely) or out of scope (do not build it). No "v2 later", no stubs left behind.
 - Fix root causes, not symptoms. Do not iterate on workarounds.
-- Scope is small on purpose: household scale, two targets, few dependencies.
-  Do not add generality nobody asked for.
-- Dependencies are liabilities: stdlib first; vendored + pinned C deps
-  (sqlite3, mbedTLS) only where the stdlib has nothing.
-- Verify stdlib claims against ../zig at tag 0.16.0 — pre-0.16 knowledge is
-  stale (std.Io migration). See specs/research/zig-0.16-api-notes.md.
-- Pure core: dns/, filter/, local/, cache/ take bytes and return bytes — no Io,
-  no sockets, no clocks hidden inside.
-- Every failure mode must be visible: no silent drops, no unbounded logs, no
-  swallowed errors. Counters + health surfaces over log spam.
-- Tests are runnable acceptance criteria, not decoration. Required CI stays
-  deterministic — no network-dependent tests in blocking jobs.
-- Comments state constraints the code cannot show. No narration, no
-  commented-out code.
-- Git: GPG-signed commits (`git commit -S`), simple lowercase messages, no
-  generated-by footers.
+- Scope is small on purpose: household scale, two targets, few dependencies. Do not add generality nobody asked for.
+- Dependencies are liabilities: stdlib first; vendored + pinned C deps (sqlite3, mbedTLS) only where the stdlib has nothing.
+- Verify stdlib claims against ../zig at tag 0.16.0 — pre-0.16 knowledge is stale (std.Io migration). See specs/research/zig-0.16-api-notes.md.
+- Pure core: dns/, filter/, local/, cache/ take bytes and return bytes — no Io, no sockets, no clocks hidden inside.
+- Every failure mode must be visible: no silent drops, no unbounded logs, no swallowed errors. Counters + health surfaces over log spam.
+- Tests are runnable acceptance criteria, not decoration. Required CI stays deterministic — no network-dependent tests in blocking jobs.
+- Comments state constraints the code cannot show. No narration, no commented-out code.
+- Git: GPG-signed commits (`git commit -S`), simple lowercase messages, no generated-by footers.
 
 ## Reading `zig build test` output
 
-A fully passing `zig build test` still prints a line like `failed command:
-.../test --cache-dir=... --seed=... --listen=-`, and still exits 0. That line
-is a known upstream zig 0.16.0 labelling defect. It does not mean a test
-failed, and no test binary crashed.
+A fully passing `zig build test` still prints a line like `failed command: .../test --cache-dir=... --seed=... --listen=-`, and still exits 0. That line is a known upstream zig 0.16.0 labelling defect. It does not mean a test failed, and no test binary crashed.
 
-The build runner sets a step's `result_failed_command` on every spawn
-(`std/Build/Step/Run.zig:1540`) and never clears it on success. It then prints
-a step's diagnostics whenever the step wrote anything to stderr, explicitly "no
-matter the result" (`compiler/build_runner.zig:1381`), and that printer emits
-the `failed command: ` label unconditionally when the field is set
-(`compiler/build_runner.zig:1515`). Our suite writes to stderr on every run,
-because the tests that cover the warning paths log through the real sink. A
-minimal reproducer with no mbedTLS and no C — one passing test whose body is a
-`std.debug.print` — prints the same label and reports "3/3 steps succeeded;
-1/1 tests passed"; deleting the print removes the label. No upstream issue
-matched a search, so the reference is the 0.16.0 source lines above.
+The build runner sets a step's `result_failed_command` on every spawn (`std/Build/Step/Run.zig:1540`) and never clears it on success. It then prints a step's diagnostics whenever the step wrote anything to stderr, explicitly "no matter the result" (`compiler/build_runner.zig:1381`), and that printer emits the `failed command: ` label unconditionally when the field is set (`compiler/build_runner.zig:1515`). Our suite writes to stderr on every run, because the tests that cover the warning paths log through the real sink. A minimal reproducer with no mbedTLS and no C — one passing test whose body is a `std.debug.print` — prints the same label and reports "3/3 steps succeeded; 1/1 tests passed"; deleting the print removes the label. No upstream issue matched a search, so the reference is the 0.16.0 source lines above.
 
-Any *other* failure text is real. Trust the summary line: `zig build test`
-exiting non-zero, a `N failed` count, or a panic backtrace all mean a genuine
-failure. Do not filter, wrap, or suppress the runner's output to hide the
-label — that would hide real failures with it.
+Any *other* failure text is real. Trust the summary line: `zig build test` exiting non-zero, a `N failed` count, or a panic backtrace all mean a genuine failure. Do not filter, wrap, or suppress the runner's output to hide the label — that would hide real failures with it.
 
-One trap: running a cached test binary by hand with `--listen=-` aborts with
-`internal test runner failure: EndOfStream`. That is not a teardown bug; the
-IPC runner is talking to a closed stdin because no build runner is on the other
-end. Run the binary with no arguments to get the plain stdio report.
+One trap: running a cached test binary by hand with `--listen=-` aborts with `internal test runner failure: EndOfStream`. That is not a teardown bug; the IPC runner is talking to a closed stdin because no build runner is on the other end. Run the binary with no arguments to get the plain stdio report.
 
 ## Regenerating the contract samples
 
-`web/src/lib/contractSamples.gen.ts` is a committed golden of canonicalized
-API responses, byte-compared against the live server by a `-Dintegration`
-test and type-checked by `tsc`. After a deliberate API contract change,
-regenerate it with:
+`admin/src/lib/contractSamples.gen.ts` is a committed golden of canonicalized API responses, byte-compared against the live server by a `-Dintegration` test and type-checked by `tsc`. After a deliberate API contract change, regenerate it with:
 
 ```
-zig build test -Dintegration -Dcontract-samples-out="$PWD/web/src/lib/contractSamples.gen.ts"
+zig build test -Dintegration -Dcontract-samples-out="$PWD/admin/src/lib/contractSamples.gen.ts"
 ```
 
-then update `web/src/lib/types.ts` to match and commit both. Never edit the
-generated file by hand.
+then update `admin/src/lib/types.ts` to match and commit both. Never edit the generated file by hand.

CHANGELOG.md

@@ -1,14 +1,149 @@
 # Changelog
 
-All notable changes to nxdns are recorded here. The format follows
-[Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project uses
-[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+All notable changes to nxdns are recorded here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-Sections are written by hand. Nothing here is generated from commit messages:
-the point of the file is to say what changed for an operator, which a commit
-subject rarely does.
+Sections are written by hand. Nothing here is generated from commit messages: the point of the file is to say what changed for an operator, which a commit subject rarely does.
 
-## [Unreleased]
+## [0.0.9] - 2026-08-22
+
+Query provenance: every logged query becomes exactly explainable — what the policy decided, what matched, where the answer came from and what the client saw. The handler records all of it as the reply goes out, `query_log` stores it, and a detail page reads one query back in the order the pipeline decided it. Read the upgrade note below first: it resets your query history.
+
+### Added
+
+- **Every logged query has a detail page.** A row in Activity now links to `/activity/queries/{id}`, which explains that one query in the order it was decided: the request, the group it was matched under, the policy verdict with the rule that produced it and the blocklist source that rule came from, any CNAME uncloaking or safe-search rewrite, the route the answer took — blocked, local, forward zone, upstream or cache — and what the client got back, RCODE and duration included. `GET /api/queries/{id}` serves the same object; an id that retention has already deleted is a 404. The live view carries the same provenance for the queries it streams, so a query is explainable as it happens as well as afterwards.
+- **Query Log, Live and Lookup are one Activity page.** `/activity` is the single surface for what nxdns answered: History reads the stored log, Live reads the stream, and both show the same seven columns — Time, Domain, Client, Type, Result, Route, Duration. The mode and every filter live in the URL, so an investigation is one link that shows the recipient exactly what you were looking at, and an absolute time range stays that range instead of drifting as the day goes on. A new **Result** column says what the client actually got — `Blocked`, `NOERROR`, `SERVFAIL` and the rest — with the **Route** column beside it saying how the answer was produced, which is the pair the old Status column could not show: a blocked name is answered with NOERROR, and reading only the code made a block look like a success. Both unhappy cases are marked by weight and shape as well as colour. Switching between History and Live keeps your filters, and leaving Live closes the stream instead of holding a viewer slot open. A live row that the log has not written yet opens its own provenance in place — no invented row id — and the open detail stays put while the 500-row buffer scrolls past underneath it. Domain testing moves to `/activity/test` as **Current policy simulation**, worded so it can never be misread as an account of a query that already happened.
+- **Diagnostics can be scoped to an absolute window.** `/diagnostics?since=…&until=…` now validates and applies both bounds to the active and resolved lists, and the page states the window it is showing with a way to clear it. A query's detail page links here with the five minutes either side of that query, which is where the underlying failure text for a SERVFAIL lives.
+- **The query log and the stats endpoints say how far back the history goes.** `GET /api/queries` and all five `/api/stats*` endpoints each carry a `coverage` object: `available_since`, the first second the file can answer for, and `complete`, whether the window you asked for begins inside it. A period that starts before the query log does now says so instead of charting the missing part as zero — which is what a recreate, a retention pass or a fresh install would otherwise look like.
+- **Three new period breakdowns: `GET /api/stats/types`, `/api/stats/routes` and `/api/stats/clients`.** They take the same `period` parameter as `/api/stats` and report over the same UTC-aligned window, so every panel of one page describes the same span. `types` counts queries per DNS type, with the queries that recorded no type kept as their own row instead of dropped — the numeric type only, since naming types is the admin's job and a second table in the server would drift out of agreement with it. `routes` counts queries by how they were answered, grouping upstream rows by the answering resolver and forward-zone rows by the zone, with blocked, cache, local and rejected answers carrying no source. `clients` returns one bucketed series per client, aligned exactly like `/api/stats/timeseries` so the two charts share an x-axis: the eight busiest clients in the window are named and everything else sums into an `other` series, which is always present and always the same length as the named ones.
+- **`/metrics` says whether an upstream is queueing.** Five new per-upstream series, labelled by index and redacted url like the existing ones: `nxdns_upstream_in_flight` and `nxdns_upstream_slots` are the exchanges in flight against an upstream and the ceiling they cannot cross, `nxdns_upstream_queued_total` and `nxdns_upstream_queued_seconds_total` count the exchanges that had to wait for a slot and the time they spent waiting — including the ones that were cancelled while waiting, which is exactly the query that ends in SERVFAIL — and `nxdns_upstream_reuse_recoveries_total` counts the stale DoT connections that were redialled, so connection churn is a number instead of log noise. The two queue counters are approximate: they are sampled when a query is admitted, not measured as a queue length. `/api/health` is unchanged.
+- **Each of those responses is read atomically.** Every window-bounded read — the five stats endpoints and `GET /api/queries` — now takes its rows and its coverage watermark inside one SQLite read transaction. A retention pass that runs mid-response can no longer hand back rows from before the prune tagged with an `available_since` from after it, and the clients breakdown ranks and buckets from one database state rather than two. The transaction is a deferred read, so it never blocks the query logger or retention.
+
+### Removed
+
+- **The upstream-history subsystem and `GET /api/upstream/health` are gone.** nxdns recorded every upstream exchange into per-minute aggregates in `querylog.db` so the dashboard could show each upstream's counts, success rate and last failure over the selected period. The Overview replacement drops that table, which left a writer whose only reader was its own failure signal, so the whole subsystem goes: the accumulator and its flush task, the `upstream_targets` and `upstream_minute` tables, the `/api/upstream/health` endpoint, the retention pass over the minute rows, and the four `nxdns_upstream_history_*` and one `nxdns_retention_upstream_rows_pruned_total` Prometheus metrics. What replaces it: `/api/health` says how many upstreams are available of how many enabled, `/metrics` keeps the live per-upstream `nxdns_upstream_up` and `nxdns_upstream_success_rate` series, and a failing upstream is a Diagnostics episode (`upstream.exchange`) with its own error text and duration. Ranged per-upstream counts are not replaced. Existing `upstream_history.write` diagnostics entries stay readable; nothing writes new ones, and any that were still open when you upgrade are closed at the first start.
+- **`/queries`, `/queries/{id}`, `/live` and `/lookup` are gone, and bookmarks to them break.** There is no redirect and no alias: the paths simply stop resolving, and the app shows its not-found page. Everything those pages did is on `/activity`, `/activity/queries/{id}` and `/activity/test`. Three navigation entries collapse into one, "Activity". The API is untouched — `/api/queries`, `/api/queries/{id}`, `/api/queries/live` and `/api/lookup` all answer exactly as before.
+- **The Status column, and the block reason on every row.** The reason a query was blocked was repeated on each of a hundred rows and pushed the answer the client saw off the table. Result and Route replace it; the exact rule, the blocklist source and the historical group stay one click away on the query's detail page, which is the only place they were ever readable.
+
+### Changed
+
+- **Configuration is three task-shaped pages, and a file-managed server says so once.** Groups, Blocklists, Rules, Local DNS, Upstreams and Settings — six navigation entries and six routes — become `/configuration/protection`, `/configuration/resolution` and `/configuration/system` under one labelled "Configuration" group. Protection is group-centred: pick a group and read its safe search, its blocklist sources, its rules and how many clients it filters, with the shared blocklist catalogue and "Update now" on a second tab. Resolution holds the upstream pool, local records and forward zones; System holds the settings sections, the restart-required annotations and "Reload certificates". The tab and the selected group are URL state, so the view you are reading is a link, and the six old paths stop resolving — no redirect, no alias. When a configuration file owns the server, these pages are no longer forms with everything greyed out: they render as definition lists and tables with the exact ZON key beside each value, a note saying which file to edit, and no input, checkbox, Add, Edit, Delete or Save anywhere — while runtime actions that do not touch the file (update blocklists now, reload certificates, pause and resume, deleting an observed client) stay ordinary working buttons. A new `GET /api/config/status` is the one place that answers who owns the configuration and whether a restart is pending; the admin never guesses from a 403, and until the endpoint answers nothing is editable. `restart_pending` is now the server's own state rather than a banner one browser tab remembered: it is set by the upstream and settings changes that need a restart, it survives a page reload, another tab sees it within a minute, and only restarting the process clears it. `GET /api/settings` loses its `authority` object, which said the same thing twice. Clients keeps its own top-level page, because naming an unknown device is operations, not configuration: the list is address, name, group and first/last seen, `?group=` filters it to one group, and each row opens `/clients/{id}` — the client's identity and where its name came from, the group whose policy it follows with a link to that group, and a link into Activity for its last 24 hours.
+- **The Dashboard is now Overview, and it takes Pi-hole's layout.** `/` redirects to `/overview`, and the page answers one question — what the resolver did over a period you choose — instead of laying out six widgets. The 1h/24h/7d/30d period is URL state (`/overview?period=1h`), so the view you are reading is a link you can send. Top to bottom: four neutral stat tiles — queries, blocked with its share, distinct clients, average response time — each linking into the rows behind its number; the query-volume timeline split blocked, cached and other; a new per-client chart on the same axis, the busiest clients named — by their registered or reverse-DNS name where they have one, exactly as the query tables name them — and the rest summed as "other"; and two donuts, query types and how queries were answered, with each upstream and forward zone named separately. Colours follow the identity of a client, a type or a route rather than its rank, so one client overtaking another between refreshes does not repaint the page. Each donut is drawn as decoration with a visible legend beside it and a table a screen reader reads instead of the graphic. All five panels describe one window — matched on the period, both bounds and the coverage watermark together — so a refresh that straddles a bucket boundary, or a retention pass mid-page, can never put a headline count above a chart of a different span. Panels load, fail and retry on their own: a failing donut leaves the charts standing. A period with nothing in it says "No queries in this period." rather than drawing an empty frame.
+- **The five health conditions moved to Diagnostics, and the nav item says when to look.** Protection, Upstreams, Query history, Diagnostics and Storage are now a compact strip at the top of `/diagnostics`, above the episodes that explain them, instead of a status list on the landing page. Each states its state in words and an icon as well as colour. A healthy condition is quiet; a degraded one is highlighted and links to what can fix it: protection to Blocklists, no reachable upstream to Upstreams, and a losing or failed query log or a low or critical disk to this same page filtered to the component that failed, with any time window cleared so the filter cannot hide the episodes it points at. Dropped rows are reported with the time of the newest drop, so a loss stays visible after the box recovers. When a health poll fails, the conditions on screen are labelled as the last reading that arrived rather than passing for the current state, and a Retry sits beside them. The Diagnostics navigation item carries a badge with the number of open episodes; it shows a plain "!" when the rollup is degraded with nothing open, and also when the last health poll failed, because an unknown must not look like good news. The badge is absent only when health answered and there was nothing to report.
+- **Pause moved to the sidebar, and the header indicator is gone.** The header carries nothing but the menu button and Log out. Pause and Resume sit at the foot of the navigation sidebar, above the version label, in both the desktop rail and the phone drawer — one global runtime action in the one place that belongs to the resolver rather than to whichever page you are on. The control still appears beside the detail of a query that was blocked, which is the other place the action answers what you are looking at. The control says what it is doing as well as what it offers: Pause while filtering is on, and while it is off, "Paused until 14:05" — or plain "Paused" when the pause has no end — above the Resume button, on every page. "Resume" on its own would name an action without naming the state it ends, and with the header indicator gone no other page could tell you filtering was off. Both controls read the same `protection` condition, so they cannot disagree, and a pause or resume is reflected immediately rather than at the next poll. Nothing offers to pause while protection is unavailable, since pausing a resolver with no filter snapshot changes nothing.
+- **`GET /api/health` changed shape completely.** The body is now `status` plus five condition objects — `protection`, `upstreams`, `query_history`, `diagnostics` and `disk` — and `status` is `degraded` when, and only when, one of them is in a degrading state: protection `unavailable`, upstreams `unavailable`, query history `losing` or `failed`, diagnostics `unavailable`, or disk `low` or `critical`. Nothing can degrade the rollup without appearing in the response any more; the old hidden upstream-history contribution was the reason for the rewrite. A paused protection is reported and does not degrade, because it is a choice you made rather than a fault. `queries_dropped` and `writer_failed` fold into `query_history`, which also carries `last_drop_s`, the time of the newest dropped row; `refreshes_gated` and `snapshot_generation` leave the body and stay in `/metrics`, as do the disk `db_bytes`, `log_bytes` and `sample_failures` fields. The disk monitor's `warn` state is reported as `low`, because `warn` reads as a log level rather than as a quantity of disk. This is a breaking change to a documented endpoint, taken pre-v0.1 rather than carried.
+- **Upgrading resets your query history a second time.** Dropping the `upstream_targets` and `upstream_minute` tables changes the `querylog.db` schema fingerprint, and that file is never migrated, so the first start after this release sets the old one aside as `querylog.db.schema-changed-<unix seconds>` and creates a fresh one — exactly as the provenance change above does, and in the same start. `config.db` is untouched.
+- **`GET /api/stats` no longer reports `cached`.** The standalone cache card is gone from Overview, so the totals field behind it has no consumer. Cache hits stay visible in the query-volume timeline's blocked/cached/other split, in `GET /api/stats/timeseries`, and in `nxdns_cache_hits_total`.
+- **`GET /api/queries` rows changed shape.** Each row gains `qclass`, `rcode`, `policy_action`, `policy_reason` and `route_kind`, and `block_reason` is gone: the reason a query was blocked is now one of a closed set of values rather than a formatted string. No table column shows it — the reason is read on the query's detail page, and by an API client from `policy_reason` on the row. `blocked`, `cache_hit`, `upstream` and every other existing field are unchanged.
+- **Upgrading resets your query history.** The `query_log` table gains the provenance columns below, and `querylog.db` is never migrated (it holds expendable log rows, so a schema change replaces the file instead of upgrading it). On the first start after the upgrade the old file is set aside as `querylog.db.schema-changed-<unix seconds>` and a fresh one is created. Nothing else is touched: `config.db` keeps your configuration and your diagnostics history. The recreate files a resolved `query_log.recreated` diagnostics entry naming the file that was kept and the timestamp the new history begins at, and a new `querylog_meta` table records that coverage start, so the dashboard can say "history is available from ..." instead of charting an empty range as zero. The set-aside file is a working SQLite database and can be deleted once you have decided you do not want it.
+- **`logging.query_log_buffer_max` now accepts 1 to 37449, down from 1 to 1000000.** The queued entry carries every new provenance field by value and is about four times as wide as before — 1792 bytes against 432 — so the meaningful bound is bytes rather than entries. The ceiling is computed at compile time from the width of the entry so that the queue's worst case stays within 64 MiB, and it moves whenever that width does. The default of 10000 is unchanged and costs about 17 MiB. A configuration above the new ceiling is rejected at startup with the ceiling in the message.
+- **Group and blocklist source names are now capped at 64 bytes.** Both are copied into every query-log row that mentions them, so an unbounded name was an unbounded cost per row. A longer name is rejected as `GroupNameTooLong` or `SourceNameTooLong`.
+- **The query log returns to SQLite's default checkpoint cadence.** 0.0.8 stretched `wal_autocheckpoint` on every read-write `querylog.db` connection from the 1000-page default to 8192 pages, on the expectation that it would cut about 130 MiB a day of checkpoint writeback on the deployed Pi. Field measurement on that Pi showed no measurable effect on daily disk writes, so all it bought was a roughly five-hour power-loss durability window in place of the default's ~40 minutes. No pragma is issued any more: the cadence is SQLite's 1000 pages, about 4 MiB, and the ~40-minute boundary is back.
+- **The admin bundle now has a ceiling the build enforces.** `npm run build` fails if `admin/dist/assets` totals more than 800,000 bytes — it is 708,352 today — and prints the largest chunks when it does. The bundle is embedded in the server binary and served to your LAN, so an accidental dependency arriving in it is a regression every other check would have passed. Alongside it the redesign's closure sweep removed the last code the new pages left behind: an unused API client call and type, and the `features/queries` directory renamed to `features/provenance` now that no page lives there. The investigation links that carry a time window out of a query detail are pinned by their own tests, including one that a link's emitted bounds survive the Activity page's validation unchanged. Nothing an operator uses changed.
+
+### Fixed
+
+- **A burst of concurrent queries no longer resolves one at a time, and no longer ends in SERVFAIL.** The pool held an upstream for the whole of an exchange, so every query against one upstream waited for the one before it, and the DoT client dialled a fresh TCP connection and ran a full TLS handshake for each query on top of that. Thirty concurrent names against one DoT upstream resolved as a staircase at about 92 ms per query on a Pi, and the queries at the back of the queue burned the five-second total budget waiting and were answered SERVFAIL — with nothing on any surface saying a queue existed. Two changes fix it: each upstream now runs up to eight exchanges at once, each on its own leaf client behind a semaphore, so a query waits for a free slot rather than for the whole upstream; and a DoT client keeps its TLS session open across exchanges instead of handshaking per query. A reused connection that the resolver closed while it was idle is detected at use — never by a keepalive timer — and redialled once, and that redial is invisible to health and to Diagnostics because an idle close is normal, not a fault. The slot count is compiled, not configured: there is no new knob.
+- **A UDP reply that has to be truncated keeps the answer's RCODE.** When an answer does not fit the client's UDP buffer, nxdns replaces it with an empty reply carrying the TC bit, which tells the client to retry over TCP. That replacement was always built as NOERROR, whatever the answer said — so an oversized NXDOMAIN reached the client as a success, and an EDNS extended RCODE above 15 lost the eight upper bits it needs an OPT record to carry. The truncated reply now carries the full twelve-bit code the answer had, split across the header and the reply's OPT record where the code needs it, and the query-log row records the code the client actually saw. The retry over TCP always returned the right RCODE; this was the UDP answer that preceded it.
+
+## [0.0.8] - 2026-08-21
+
+One constant, chosen from the 0.0.7 field numbers: the checkpoint cadence was the last first-order write cost on the Pi's SD card.
+
+### Changed
+
+- **The query log checkpoints its write-ahead log every 32 MiB instead of every 4 MiB.** Batching the writer in 0.0.7 took the deployed Pi from about 0.5 to 0.281 GiB of writes a day, and about 130 MiB of what is left is checkpoint writeback: SQLite's 1000-page default trips roughly every 40 minutes and rewrites the same hot index and interior pages into `querylog.db` each time. Every read-write connection to `querylog.db` now sets `wal_autocheckpoint` to 8192 pages, which stretches that to roughly five hours and cuts those in-place rewrites about eightfold, for an expected total near 190 MiB a day. The price is durability under power loss or a kernel panic. At `synchronous = NORMAL` a commit does not fsync, so the checkpoint is the only guaranteed durability boundary, and it now sits about five hours of query rows and upstream-history minutes back rather than 40 minutes. Kernel writeback normally makes the real loss far smaller than that, but nothing guarantees it. A process crash or a clean stop still loses nothing that was committed, and the database is never left inconsistent: recovery replays the longest valid prefix of the log. The `querylog.db-wal` file is expected to sit near 32 MiB rather than capped there, since a long-running reader can hold a checkpoint off and let it overshoot, and the daily retention pass still truncates it. `config.db` is unchanged.
+
+## [0.0.7] - 2026-08-20
+
+Operational failures get a page of their own, and the query log stops wearing out the disk it lives on: the deployed Pi was writing half a gigabyte a day to store two megabytes of query rows, one transaction per query. Both came out of running 0.0.6 on real hardware.
+
+### Added
+
+- **A diagnostics page.** Operational failures now land in one curated log instead of only journald: blocklist download failures, certificate reload failures, disk pressure, query-log writer and maintenance failures, upstream exchange and history failures, client tracking failures, listener and configuration problems at boot, and the query-log recreation an upgrade causes. One entry per failing subject — an entry opens on the first failure, counts repeats, and closes itself when the subject recovers; nothing needs dismissing. Each entry says what it means for the service and what to do about it. `GET /api/diagnostics` serves the log, `GET /api/health` reports the active counts and degrades while the diagnostics store itself cannot write, and `/metrics` gains `nxdns_diagnostics_active_warnings`, `nxdns_diagnostics_active_errors` and `nxdns_diagnostics_write_failures_total`. Resolved entries can be purged when you decide the history has served its purpose — one entry from its row or its detail page, or the whole resolved history at once with "Purge all resolved" (`DELETE /api/diagnostics/{id}` and `DELETE /api/diagnostics`). An entry that is still failing is the current state of the box, not history, so it has no purge action and the API answers 409.
+
+### Changed
+
+- **The query log commits once a minute instead of once a query.** The writer batched for 100 milliseconds, which at a household's query rate means almost every query got a transaction of its own — and a transaction costs the disk far more than the row it carries. On the deployed Pi that came to roughly 0.5 GiB of writes a day to store 2.3 MB of query rows, the kind of write volume that kills an SD card. The batch window is now `logging.query_log_flush_interval_s`: 60 seconds by default (the same minute Pi-hole's `DBinterval` defaults to, for the same reason), anything from 0 to 3600, editable on the settings page. Batches are still capped at 100 rows, so a burst is committed as soon as it fills one rather than waiting out the window, and the in-memory queue, its drop-oldest backpressure and retention are untouched. The price is two kinds of lag: a crash costs about one interval of query history — more if the writer was held back by a full disk or a slow write — and every query-log-backed view — the query-log page, the dashboard totals, the timeseries — is about one interval behind. The live page is not affected; it is fed before the queue. Set the key to `0` for the old write-immediately behavior.
+
+### Fixed
+
+- **Shutdown no longer races the last query rows to the disk.** The query-log writer was stopped by the same cancellation that stopped the DNS listeners, so whether the batch it was holding reached the database depended on which happened to land first, the cancellation or the queue closing. Shutdown now stops and joins the listeners and every other query producer first, then closes the queue, then waits for the writer to finish emptying it — the held batch and everything still queued get written. If free space is below the critical threshold and the disk monitor will not let that final write through, the rows are counted as dropped instead of holding the exit open indefinitely.
+- **An upstream success rate no longer rounds up to 100.0% while failures stand.** One decimal place cannot hold 12,696 successes out of 12,698 attempts: it rounded to `100.0%`, so the row claimed perfect reliability next to a failure count of 2. Neither end of the scale is reachable by rounding any more — `100.0%` needs an actual absence of failures and `0.0%` an actual absence of successes, and a rate a hair off either end shows `99.9%` or `0.1%` instead.
+- **A query log set aside by a schema change is no longer named `corrupt`.** Every recreate wrote the old file to `querylog.db.corrupt-<unix seconds>`, whatever sent it there — including the fingerprint mismatch an upgrade causes, where the file is a healthy database this build simply cannot read. The name is the only account of the reason that outlives the log line, so it read as an accusation and invited operators to delete an intact file. The name now says which of the four cases it hit: `querylog.db.corrupt-…`, `.not-a-database-…`, `.quick-check-failed-…` or `.schema-changed-…`. The 0.0.6 upgrade produces `schema-changed`. Nothing else about the recreate changed, and no existing aside file is renamed.
+
+## [0.0.6] - 2026-08-17
+
+The period picker now scopes the whole dashboard. The upstream table was the last widget that ignored it, and fixing that meant recording upstream outcomes over time instead of counting them since boot. Read the query-log note below before you upgrade.
+
+### Added
+
+- Four metrics for the new upstream-history recorder: `nxdns_upstream_history_flushes_total`, `nxdns_upstream_history_flush_failures_total`, `nxdns_upstream_history_rows_dropped_total` and the `nxdns_upstream_history_pending` gauge. While a flush to the database keeps failing, `GET /api/health` reports `degraded`; it recovers on the next flush that succeeds.
+
+### Changed
+
+- **Upstream health answers for the selected period.** The dashboard's upstream table used to print counters accumulated since process start beside a success rate taken over the last 32 exchanges, which is how "63 failures" and "100.0% success rate" ended up in the same row under a period picker that scoped nothing there. Every upstream outcome is now aggregated into its wall-clock minute and written to `querylog.db`, and `GET /api/upstream/health?period=…` serves the selected window: attempts, failures, success rate, and the last failure with its error name, all inside the period, from 31 days of history. A window with no attempts reports no success rate at all instead of a perfect one, and the table shows an em-dash. The in-memory health state that drives failover and backoff is unchanged, as are its `/metrics` series.
+- **`GET /api/upstream/health` changed shape.** Gone from each upstream: `consecutive_failures`, `total_successes`, `total_failures`, the last-32 `success_rate`, `last_error` and `last_error_age_s`. Each upstream keeps `url`, `enabled` and `available` and gains a `period` object with the ranged numbers; the body gains `period`, `since`, `until` and a `complete` flag that says whether any outcome was known to be dropped inside the window. The removed counters are still exported by `/metrics` under their existing names. On the dashboard the "Right now" section is gone with them: the upstream table rejoined the ranged part of the page, and the disk card, the one live widget left, is titled "Storage now".
+- **The query log is recreated on upgrade.** Recording upstream history added two tables to the `querylog.db` schema, and its fingerprint check refuses a database that does not match the shipped definition. On first start this version renames the existing `querylog.db` aside as `querylog.db.corrupt-<unix seconds>` in the data directory and creates a fresh one, so query history and stats restart empty. The renamed file is left in place rather than deleted, so removing it is your call. `config.db` is untouched: no configuration is lost.
+
+## [0.0.5] - 2026-08-16
+
+One rendering fix on the 0.0.4 feature, caught the day it shipped.
+
+### Changed
+
+- The query tables no longer repeat the *learned* tag on every row: in the live page and the query log a learned name is just muted, with the address still in the row's tooltip. The clients page keeps the tag, where it appears once per client and says something.
+
+## [0.0.4] - 2026-08-16
+
+The names learned in 0.0.3 now show up where queries do: the live page and the query log name each client instead of printing its address.
+
+### Added
+
+- **Client names in the query tables.** The live page and the query log show each query's client by name, with the same precedence as the clients page: a hand-typed name wins, else the learned name (muted, tagged *learned*), else the bare address. When a name replaces the address, the address stays readable as the row's tooltip. Devices that appear mid-stream show their address first and pick up their name within half a minute.
+
+## [0.0.3] - 2026-08-15
+
+Devices name themselves: the clients table asks the router over reverse DNS instead of waiting for the operator to type every name. The CI container gate also moved from workflow shell into a compiled, tested tool, which fixed a latent temp-directory bug shared with the release tool.
+
+### Added
+
+- **Client names learned over reverse DNS.** A client row that carries no hand-typed name gets one from the network: each tracker flush pass takes up to 16 unnamed rows, builds each address's reverse name, matches it against the declared `forward_zones`, and on a match sends one PTR query to that zone's resolver, storing the answer as a *learned* name. This requires a conditional forward zone covering the LAN's reverse space — for example `168.192.in-addr.arpa` pointed at the router; without one, nothing is sent anywhere. A hand-typed name always wins, learned names never appear in `nxdns export` and are never set by `nxdns import`, and each row refreshes once a day (an hour after a failure), so a rename can show stale for up to 24 hours. The API's `Client` object gains a `learned_name` field and the clients page shows it.
+
+### Changed
+
+- The container CI gate — image build, image-contents assertion against the packaged artifacts, and the startup/shutdown smoke test — moved from workflow shell into `tools/container_check.zig`, compiled and unit-tested by `zig build test` and runnable on a laptop against a local docker daemon. The health probe now runs under a real 60-second deadline (the shell loop's "30 seconds" could stretch past three minutes), and the gate's docker objects carry an ownership label so anything a dead runner leaks is discoverable. The version in CI is parsed from `build.zig.zon` through the zon grammar, once, instead of by two copies of a `sed` regex.
+
+### Fixed
+
+- The release tool's temporary-directory claim was not exclusive: the "create" it relied on succeeds on a directory that already exists, so a stale or concurrent directory could be silently adopted, written into, and deleted on exit. Both the release tool and the new container gate now claim their directories exclusively and retry on collision.
+
+## [0.0.2] - 2026-08-14
+
+Configuration can now be a file that every boot converges to, filtering gains regex rules and honors blocklist exception lines, and two refresh bugs that silently kept stale state are fixed. Note the three breaking changes below if you script against `nxdns import` or run with `--config`.
+
+### Added
+
+- **Declarative configuration for IaC.** `nxdns run --config=<file>` makes the file the sole source of configuration: every boot converges the database to it in one transaction, preserving blocklist downloads, compiled lists and client history, so an unchanged file costs zero downloads and zero writes. Bare `nxdns run` keeps the database (and the web UI) in charge, exactly as before. In file mode the web UI is read-only for configuration and says so; runtime actions (pause, blocklist refresh, certificate reload) stay live. `GET /api/settings` reports which authority governs the process.
+- `nxdns import` now refuses a file whose application would delete configuration rows, names the tables and counts, and applies it only with the new `--allow-delete` flag. Additive and edit-in-place imports need no flag.
+- **Regex rules.** Rules gain a third kind, `regex`, beside `exact` and `wildcard`, for per-group allow and block patterns such as `^ad[0-9]+-`. The engine is homegrown and linear-time by construction, so no pattern can make matching blow up; backreferences and lookaround do not exist, and a bad pattern is refused at insert time with the limit it hit. Matches appear in `/api/lookup` and the query log as `rule_allow_regex` / `rule_block_regex`. Regex still comes only from you: regex lines in downloaded lists stay counted and skipped.
+- **Blocklist exception lines are honored.** An Adblock-Plus `@@||name^` line in a downloaded list now lifts that name — and its subdomains — out of what the attached lists block. Exceptions sit below every rule you wrote: a downloaded list can reopen only a hole another downloaded list dug, never override an operator decision. Each source reports how many it carried.
+- **Browser-only lines are counted where you can see them.** Every source now reports how many of its lines nxdns skipped as syntax with no DNS meaning — cosmetic filters, `$`-modifier rules — beside the existing skipped-regex count. Both blocklist tables show the number and the UI explains the difference: a list whose skipped-unsupported count dwarfs its domain count is written for browser extensions, and its DNS or hosts variant will block more. Previously such a list compiled to almost nothing and looked clean.
+
+### Changed
+
+- **Breaking: `nxdns run --config <file>` changed meaning.** It used to seed the database once and then ignore the file; it now makes the file the authority on every boot, which deletes any configuration the file does not declare — including edits made through the web UI since the seed. Before upgrading a unit that carries `--config`: either drop the flag to keep the database in charge, or adopt file mode with the sequence in the upgrade guide. Order matters there: export the file with the NEW binary (stopped).
+- **Breaking: 0.0.1 exports are refused by this version.** A 0.0.1 `nxdns export` writes both `.password = ""` and the stored `.password_hash`, and this version refuses a file that carries both. This bites any old export — an adoption file or a configuration backup fed to `nxdns import` alike. Fix an existing export by deleting its `.password = ""` line (keep the `.password_hash` line). Take fresh backups with the new binary.
+- **Breaking: the offline password-change recipe changed.** Setting `.password = "new"` together with `.password_hash = ""` is now refused (empty `password_hash` is an explicit "disable authentication", and the two fields cannot both be present). To change the password in the file: set `.password` and delete the `.password_hash` line entirely.
+- `nxdns import --force` is renamed `--allow-delete`.
+- A fresh install no longer seeds from `/etc/nxdns/config.zon` by presence. Use `nxdns import` once, or run in file mode with `--config`.
+- The admin UI's internals moved to TypeScript 7 and replaced Tailwind with StyleX and React Aria. The visible change is small: selects are real widgets with working keyboard focus; everything else renders as before.
+- The `config.db` schema is a single baseline definition again; numbered migration steps start accumulating at v0.1.
+
+### Fixed
+
+- **A list switching a name between its exact and wildcard forms never took effect.** The compiled-list checksum hashed the exact and wildcard bodies as one unseparated byte stream, so a list carrying `a.example` and the same list carrying `*.a.example` produced the same digest, and the refresh kept the old compiled files. The checksum now separates the bodies. Every source recompiles once on its first refresh after the upgrade; no re-download of unchanged content is forced beyond the refresh's normal fetch.
+- **A refresh could store stale skip counts.** When a refresh found the list content unchanged, it wrote the previously stored skip counters back to the database while showing the fresh ones in the UI, and the next restart reverted the numbers to the stale copy. All counters now persist from the fresh compile.
+- An Adblock-Plus entry with embedded whitespace (`||good.example bad.example^`) compiled into an entry no query could ever match. Such lines are now counted as unsupported instead.
 
 ## [0.0.1] - 2026-08-09
 
@@ -16,47 +151,18 @@ First release. Everything below is new.
 
 ### Added
 
-- **Forwarding DNS server.** UDP and TCP listeners with a wire-format parser and
-  encoder written against RFC 1035 and EDNS(0), a bounded worker model, per-client
-  rate limiting and a `pause` control that stops filtering without stopping
-  resolution.
-- **Encrypted upstreams.** DNS-over-HTTPS and DNS-over-TLS clients over a pool
-  that tracks per-upstream health and fails over, with SNI and certificate
-  verification driven by a per-upstream TLS name.
-- **DoH and DoT endpoints.** nxdns also answers as an encrypted resolver, with a
-  certificate store that reloads on disk changes and through the API, so renewals
-  do not need a restart.
-- **Blocklist filtering.** Subscriptions in hosts, plain-domain and
-  Adblock-Plus-style formats, compiled into a compact matcher; per-group allow
-  and block rules with wildcards; safe-search enforcement.
-- **Per-client policy groups.** Clients are identified by address and assigned to
-  groups, so the filtering a device gets depends on which device it is.
-- **Local DNS.** Local A/AAAA/CNAME/PTR records and conditional forwarding of
-  internal zones to another resolver.
-- **Cache.** A bounded in-memory cache that respects upstream TTLs and expires
-  entries rather than serving them stale.
-- **Query log.** Queries land in SQLite under a retention policy in both rows and
-  days, with disk-full self-protection that degrades instead of corrupting, and a
-  live SSE stream of the same events.
-- **Web UI and REST API.** A React single-page admin UI embedded in the binary,
-  a REST API with a served OpenAPI document, session authentication, API rate
-  limiting and Prometheus-style `/metrics`.
-- **Configuration.** A ZON configuration file seeds the database on first boot;
-  after that the database is the truth, and `nxdns export` / `nxdns import` move
-  configuration in and out. `nxdns check` validates a file without starting.
+- **Forwarding DNS server.** UDP and TCP listeners with a wire-format parser and encoder written against RFC 1035 and EDNS(0), a bounded worker model, per-client rate limiting and a `pause` control that stops filtering without stopping resolution.
+- **Encrypted upstreams.** DNS-over-HTTPS and DNS-over-TLS clients over a pool that tracks per-upstream health and fails over, with SNI and certificate verification driven by a per-upstream TLS name.
+- **DoH and DoT endpoints.** nxdns also answers as an encrypted resolver, with a certificate store that reloads on disk changes and through the API, so renewals do not need a restart.
+- **Blocklist filtering.** Subscriptions in hosts, plain-domain and Adblock-Plus-style formats, compiled into a compact matcher; per-group allow and block rules with wildcards; safe-search enforcement.
+- **Per-client policy groups.** Clients are identified by address and assigned to groups, so the filtering a device gets depends on which device it is.
+- **Local DNS.** Local A/AAAA/CNAME/PTR records and conditional forwarding of internal zones to another resolver.
+- **Cache.** A bounded in-memory cache that respects upstream TTLs and expires entries rather than serving them stale.
+- **Query log.** Queries land in SQLite under a retention policy in both rows and days, with disk-full self-protection that degrades instead of corrupting, and a live SSE stream of the same events.
+- **Web UI and REST API.** A React single-page admin UI embedded in the binary, a REST API with a served OpenAPI document, session authentication, API rate limiting and Prometheus-style `/metrics`.
+- **Configuration.** A ZON configuration file seeds the database on first boot; after that the database is the truth, and `nxdns export` / `nxdns import` move configuration in and out. `nxdns check` validates a file without starting.
 - **CLI.** `run`, `check`, `export`, `import`, `version` and `help`.
-- **Packaging.** A hardened systemd unit with a sysusers fragment, and a
-  `FROM scratch` container image holding the binary, a CA bundle and the licence
-  files, assembled by a builder stage pinned to `alpine:3.22` by digest. Nothing
-  from Alpine ships in the published image except that CA bundle.
-- **Releases.** Tags publish five assets — static musl tarballs for
-  `x86_64-linux-musl` and `aarch64-linux-musl`, `IMAGE-DIGEST.txt` naming the
-  multi-architecture container image by digest, `SHA256SUMS.txt` over those
-  three, and `SHA256SUMS.txt.asc`, a detached signature over the checksum file.
-  `zig build dist` and `zig build verify-dist` produce and check the same
-  artifacts on a laptop.
-- **Licensing.** EUPL-1.2, with a `THIRD-PARTY-NOTICES` file in every tarball and
-  image assembled from a reviewed inventory of what the artifacts contain.
-- **Documentation.** A Diátaxis split — tutorial, how-to, reference, explanation —
-  with drift guards that fail the build when the reference pages fall behind the
-  code.
+- **Packaging.** A hardened systemd unit with a sysusers fragment, and a `FROM scratch` container image holding the binary, a CA bundle and the licence files, assembled by a builder stage pinned to `alpine:3.22` by digest. Nothing from Alpine ships in the published image except that CA bundle.
+- **Releases.** Tags publish five assets — static musl tarballs for `x86_64-linux-musl` and `aarch64-linux-musl`, `IMAGE-DIGEST.txt` naming the multi-architecture container image by digest, `SHA256SUMS.txt` over those three, and `SHA256SUMS.txt.asc`, a detached signature over the checksum file. `zig build dist` and `zig build verify-dist` produce and check the same artifacts on a laptop.
+- **Licensing.** EUPL-1.2, with a `THIRD-PARTY-NOTICES` file in every tarball and image assembled from a reviewed inventory of what the artifacts contain.
+- **Documentation.** A Diátaxis split — tutorial, how-to, reference, explanation — with drift guards that fail the build when the reference pages fall behind the code.

INSTALL.md

@@ -11,12 +11,9 @@ This directory is an nxdns release for one architecture. It holds:
 | `THIRD-PARTY-NOTICES` | Licences of everything compiled or bundled in |
 | `INSTALL.md` | This file |
 
-The binary is statically linked against musl and needs nothing installed on the
-target host.
+The binary is statically linked against musl and needs nothing installed on the target host.
 
-Verify the download before you trust it. `docs/how-to/verify-a-release.md` in
-the repository covers where the public key comes from, what fingerprint to
-expect, and what the signature does and does not prove.
+Verify the download before you trust it. `docs/how-to/verify-a-release.md` in the repository covers where the public key comes from, what fingerprint to expect, and what the signature does and does not prove.
 
 ## 1. Install the binary, the user and the unit
 
@@ -34,17 +31,13 @@ systemctl daemon-reload
 mkdir -p -m 0755 /etc/nxdns
 ```
 
-`nxdns.conf` ships under the name it is installed as, so there is no rename to
-get wrong.
+`nxdns.conf` ships under the name it is installed as, so there is no rename to get wrong.
 
-Do not create `/var/lib/nxdns` or `/var/log/nxdns` by hand. The unit's
-`StateDirectory` and `LogsDirectory` settings make systemd create them on first
-start, `/var/lib/nxdns` at mode 0700 owned by `nxdns`.
+Do not create `/var/lib/nxdns` or `/var/log/nxdns` by hand. The unit's `StateDirectory` and `LogsDirectory` settings make systemd create them on first start, `/var/lib/nxdns` at mode 0700 owned by `nxdns`.
 
-## 2. Write the seed configuration
+## 2. Write the configuration
 
-nxdns starts from an empty database only if a configuration file tells it what
-to forward to. Write `/etc/nxdns/config.zon`:
+nxdns will not start with nothing to forward to. Write `/etc/nxdns/config.zon`:
 
 ```zon
 .{
@@ -54,17 +47,14 @@ to forward to. Write `/etc/nxdns/config.zon`:
 }
 ```
 
-That file holds a password in plain text. Root's umask is 022 on most
-distributions, so restrict it as soon as you have written it:
+That file holds a password in plain text. Root's umask is 022 on most distributions, so restrict it as soon as you have written it:
 
 ```sh
 chown root:nxdns /etc/nxdns/config.zon
 chmod 0640 /etc/nxdns/config.zon
 ```
 
-0640 with group `nxdns` rather than 0600: the service runs as `nxdns` and has to
-read this file on the first start, and systemd leaves `/etc/nxdns` owned by
-root.
+0640 with group `nxdns` rather than 0600: the service runs as `nxdns`, and systemd leaves `/etc/nxdns` owned by root. Keep that group read bit for good. Under `run --config` the service reads this file on **every** start, not once, so tightening the mode after the first boot breaks the next restart. Under database authority it is `nxdns import` that reads the file, as whoever runs that command, and a bare `nxdns run` never reads it at all.
 
 Check it before starting the service:
 
@@ -72,20 +62,23 @@ Check it before starting the service:
 nxdns check --config /etc/nxdns/config.zon
 ```
 
-A good file ends with `OK: no problems found`. Exit 2 means `check` found
-something to fix and printed every problem it found. The upstream probe sends a
-real query, so this needs working DNS on the host.
+A good file ends with `OK: no problems found`. Exit 2 means `check` found something to fix and printed every problem it found. The upstream probe sends a real query, so this needs working DNS on the host.
 
-The file seeds the database once. From the second start onwards it is ignored
-and the database is the configuration. The seed's `web.password` is hashed at
-import time and the plaintext is never stored, so once you have logged in you
-can delete the file:
+Load it into the database:
+
+```sh
+nxdns import /etc/nxdns/config.zon
+```
+
+The packaged unit runs `nxdns run` with no `--config`, so from here the database is the configuration and nothing reads the file again. `web.password` is hashed and the plaintext is never stored, so once you have logged in you can delete the file:
 
 ```sh
 rm /etc/nxdns/config.zon
 ```
 
-A kept seed is not a backup. `nxdns export` is.
+A kept file is not a backup. `nxdns export` is.
+
+To keep the file as the configuration instead — converged at every start, with the UI refusing configuration edits — do not delete it, and add a drop-in that appends `--config=/etc/nxdns/config.zon` to `ExecStart`. See `docs/how-to/install-with-systemd.md`.
 
 ## 3. Start it
 
@@ -94,9 +87,7 @@ systemctl enable --now nxdns
 journalctl -u nxdns -f
 ```
 
-A healthy start logs a line naming every socket it bound. Port 53 is
-privileged, and the unit grants `CAP_NET_BIND_SERVICE` through
-`AmbientCapabilities`.
+A healthy start logs a line naming every socket it bound. Port 53 is privileged, and the unit grants `CAP_NET_BIND_SERVICE` through `AmbientCapabilities`.
 
 ## 4. Confirm it answers
 
@@ -106,9 +97,7 @@ From another machine on the LAN:
 dig @<server-ip> example.com A +short
 ```
 
-The admin interface is on port 8080 by default; log in with the password from
-the seed file. `http://<server-ip>:8080/api/health` reports upstream
-availability and disk state without a login.
+The admin interface is on port 8080 by default; log in with the password from the configuration file. `http://<server-ip>:8080/api/health` reports upstream availability and disk state without a login.
 
 ## More
 

PLAN.md

@@ -1,7 +1,6 @@
 # nxdns — Implementation Plan v3.0 (Zig 0.16.0 Stable)
 
-Source of truth for **nxdns**, a self-hosted DNS sinkhole written in Zig 0.16.0 stable.
-All stdlib claims in this document are verified against the `0.16.0` tag of the Zig repo (`../zig`).
+Source of truth for **nxdns**, a self-hosted DNS sinkhole written in Zig 0.16.0 stable. All stdlib claims in this document are verified against the `0.16.0` tag of the Zig repo (`../zig`).
 
 There is no v1/v2 versioning. Scope is binary: a feature is in scope (and gets built) or out of scope (and does not). "Done" = everything in scope implemented, tested, documented.
 
@@ -23,17 +22,19 @@ Serves a household LAN (≈2–20 devices). Portfolio-grade public repo with ext
 - DNS server for LAN clients: UDP/53, TCP/53, DoH server, DoT server.
 - Upstream resolution: DoH (HTTP/1.1), DoT.
 - Local DNS records (A/AAAA/CNAME) + conditional forwarding (zone → designated resolver, plain UDP/TCP allowed).
-- Domain filtering: blocklists (hosts/domains/ABP), custom rules (allow/block; exact, parent-walk, wildcard), CNAME uncloaking (depth 8), per-group safe-search rewrite.
+- Domain filtering: blocklists (hosts/domains/ABP, including `@@||name^` exception lines), custom rules (allow/block; exact, parent-walk, wildcard, regex), CNAME uncloaking (depth 8), per-group safe-search rewrite.
 - DNS caching: positive + negative, in-memory only.
 - Client/group model: IPv4 + IPv6 parity, per-client group assignment, per-group source assignments.
-- Query logging + analytics: async batched writes to SQLite (WAL), retention cleanup, dashboard + time buckets, live SSE stream.
+- Query logging + analytics: async batched writes to SQLite (WAL), retention cleanup, Overview + time buckets, live SSE stream.
 - Web app + REST API: LAN/Tailscale admin UI, optional password auth, OpenAPI schema + CI contract tests.
-- Observability: upstream health API + UI, disk monitor with UI banner, bounded log rotation, Prometheus `/metrics`.
-- Ops: DB-as-truth config, `nxdns export`/`import` (ZON), scheduled + manual blocklist updates, TLS cert watcher + reload, auto-migration on upgrade, systemd service + Dockerfile + compose.
+- Observability: `/api/health` conditions surfaced as a Diagnostics badge and health strip, live upstream availability in `/metrics`, a failing upstream as a Diagnostics episode, disk monitor with UI banner, bounded log rotation, Prometheus `/metrics`.
+- Ops: config authority chosen by the invocation (database, or a file named by `--config`), `nxdns export`/`import` (ZON), scheduled + manual blocklist updates, TLS cert watcher + reload, auto-migration on upgrade, systemd service + Dockerfile + compose.
 
 ### 2.2 Out of Scope (permanent scope decisions, not deferrals)
 
-- Regex rules. Wildcards + parent-walk cover the real use cases; regex on the DNS hot path means ReDoS exposure plus an immature dependency or a homegrown engine. Regex lines in blocklists are counted, skipped, and the skip count is surfaced in the UI.
+- Regex from downloaded blocklists. A list is other people's code running on the household's DNS, and the engine exists for rules the operator wrote. Regex lines in blocklists stay counted and skipped, and the skip count stays surfaced in the UI. (Operator regex rules themselves are **in** scope as of milestone 21: the ReDoS objection that once ruled them out is answered by `filter/regex.zig`, a homegrown Pike VM whose running time is bounded by program length × name length by construction, with no dependency and no backtracking. It is reached only after every hash and wildcard level has missed, and only on a cache miss.)
+- ABP syntax beyond domain anchors and `@@||name^` exceptions. `$dnstype`, `$dnsrewrite`, `$client`, `$denyallow` and every browser modifier stay unsupported and counted; the one tolerated modifier is a `$important` suffix on an exception line, which changes nothing about where that exception lands.
+- Partial-segment wildcards (`ads*.example.com`) as a rule kind. The regex kind covers the need without a second globbing dialect.
 - DHCP server.
 - DNSSEC validation (DO bit passthrough only).
 - DoQ (QUIC), HTTP/2 upstream transport.
@@ -74,8 +75,8 @@ Verified: 0.16.0 ships `std.crypto.tls.Client` only. There is no server-side TLS
 
 ### 3.5 Config Format + Truth Model (Decision F)
 
-- **DB is truth. Config file format is ZON** (`std.zon` parse + stringify — typed parsing into config structs, exact round-trip, stdlib-maintained, comments supported). No TOML: a third-party parser plus a hand-written serializer is two failure surfaces in the correctness-critical bootstrap/round-trip path, bought for syntax familiarity.
-- First start: if DB empty and `/etc/nxdns/config.zon` exists, validate → seed DB. Subsequent starts ignore the file.
+- **The invocation picks truth (see the next point). Config file format is ZON** (`std.zon` parse + stringify — typed parsing into config structs, exact round-trip, stdlib-maintained, comments supported). No TOML: a third-party parser plus a hand-written serializer is two failure surfaces in the correctness-critical round-trip path, bought for syntax familiarity.
+- The invocation picks the authority, and nothing else does (m20): `nxdns run` makes the database the configuration, `nxdns run --config FILE` makes the file the sole source and refuses the API routes that would edit configuration. There is no seeding and no first-start special case.
 - `nxdns export [--out file.zon]` dumps DB state as canonical ZON. `nxdns import <file.zon>` validates + replaces DB contents (`--force` if the DB holds configuration; client rows materialised from traffic do not count, and survive the replacement. First-seen/last-seen are runtime state, not configuration: they follow the address, so an import never restamps a device the DB already knew). Export/import = backup + host migration, **not** upgrades (§3.7).
 - No file watcher, no auto-regeneration.
 
@@ -89,21 +90,21 @@ Two SQLite files with opposite write profiles, isolated from each other:
 
 ### 3.7 Upgrades: Auto-Migration (Decision J)
 
-- `config.db`: numbered, sequential SQL migration steps compiled into the binary. At startup: read schema version row, apply newer steps inside a transaction, continue. Operator upgrade = install binary, restart.
+- `config.db`: numbered, sequential SQL migration steps compiled into the binary. At startup: read schema version row, apply newer steps inside a transaction, continue. Operator upgrade = install binary, restart. Before v0.1 the list holds one step — the baseline of §11.2, edited in place — because nxdns has no installs and a step exists only to reconcile a database somebody already has.
 - `querylog.db`: **no migrations.** On schema mismatch: rename aside, recreate fresh.
 
 ### 3.8 Blocklist Storage (Decision A)
 
 Blocklist domains are **not** stored in SQLite — they are a cache of re-downloadable remote artifacts, not config or state:
 
-- Each source compiles to `/var/lib/nxdns/blocklists/<source_id>.list`: normalized, one domain per line, small header (source URL, fetch time, count, checksum). Wildcard/regex-flavored lines: wildcards go to `<source_id>.wild`; regex lines are counted + skipped (count in metadata → UI).
+- Each source compiles to `/var/lib/nxdns/blocklists/<source_id>.list`: normalized, one domain per line, small header (source URL, fetch time, counts, checksum). Wildcard/regex/exception-flavored lines: wildcards go to `<source_id>.wild`, ABP exceptions (`@@||name^`) to `<source_id>.allow`; regex lines and browser-syntax lines nxdns cannot translate into a DNS decision are counted + skipped, both counts in metadata → UI. The checksum covers the three bodies in that order, each followed by a separator byte so that moving a name between bodies — an upstream switching `a.example` to `*.a.example` — changes the digest and forces a republish.
 - `config.db` keeps source **metadata only** (`blocklist_sources`).
 - Startup + post-update: parse files into the immutable in-memory matcher (RCU swap, §9.5).
 - Corruption recovery is per-file: checksum mismatch → re-download one list.
 
 ### 3.9 Rule Model (Decision B)
 
-Rule kinds: `exact`, parent-walk (implicit via candidate chain), `wildcard` (`*` segment patterns, e.g. `*.doubleclick.net`, `ads.*.example.com`). Actions: `allow` | `block`. Kind is an explicit column — the model is extensible without breakage, but regex stays out of scope (§2.2).
+Rule kinds: `exact`, parent-walk (implicit via candidate chain), `wildcard` (`*` segment patterns, e.g. `*.doubleclick.net`, `ads.*.example.com`), `regex` (the linear-time engine of `filter/regex.zig`, matched unanchored against the whole normalized name). Actions: `allow` | `block`. Kind is an explicit column, so a fourth kind widens one `CHECK` and touches no other table. A regex pattern is stored exactly as written — it is not a name, so it is never lowercased or dot-stripped — and is compiled at both edges: `config/validate.zig` refuses a bad one with the limit it hit, and `filter/rules.zig` compiles it once per snapshot.
 
 ### 3.10 Filtering Precedence
 
@@ -111,11 +112,18 @@ Rule kinds: `exact`, parent-walk (implicit via candidate chain), `wildcard` (`*`
 2. Exact/parent **block** rules
 3. Wildcard allow rules
 4. Wildcard block rules
-5. Blocklist domains
-6. Blocklist wildcards
+5. Regex allow rules
+6. Regex block rules
+7. Blocklist exceptions (`@@||name^`)
+8. Blocklist domains
+9. Blocklist wildcards
 
 Tie-break at same specificity: **allow wins**.
 
+Each level is checked against the whole candidate chain before the next level is checked against any, which is what makes an allow rule on a parent beat a block rule on the child.
+
+Two positions carry an argument rather than a preference. The regex levels come last among the operator rules because they are the only ones that are not a set lookup or a label walk: a regex runs only once every cheaper level has missed. Blocklist exceptions come below **every** operator level because a downloaded list may cancel what another list blocked and must never cancel what the operator decided — no list can open an allow hole the operator did not open.
+
 ### 3.11 Network Posture
 
 - Default web bind: LAN/Tailscale-friendly (non-loopback allowed).
@@ -128,14 +136,14 @@ IPv4 + IPv6 full parity for: client identity, rate limiting, logging, group assi
 
 ### 3.13 Filesystem Layout (FHS)
 
-- `/etc/nxdns/config.zon` — bootstrap (first start only).
+- `/etc/nxdns/config.zon` — the declarative source, read only when `run --config` names it. A file no flag names changes nothing.
 - `/var/lib/nxdns/config.db`, `/var/lib/nxdns/querylog.db`
-- `/var/lib/nxdns/blocklists/*.list|*.wild` (plus `*.raw.tmp|*.list.tmp|*.wild.tmp` during a refresh)
+- `/var/lib/nxdns/blocklists/*.list|*.wild|*.allow` (plus `*.raw.tmp|*.list.tmp|*.wild.tmp|*.allow.tmp` during a refresh)
 - `/var/log/nxdns/nxdns.log` — only in file output mode; default is stderr → journald.
 
 ### 3.14 Frontend Stack (Decision I)
 
-- Vite + React + TypeScript + Tailwind; TanStack Router + TanStack Query. SPA, no SSR.
+- Vite + React + TypeScript + StyleX + React Aria; TanStack Router + TanStack Query. SPA, no SSR.
 - **Built assets embedded in the binary** at compile time: single self-contained artifact, no asset-path config, no binary/UI skew. `zig build` accepts the dist path; the release pipeline runs `npm run build` first (CI always does).
 - Dev-mode flag serves assets from disk so UI iteration needs no Zig rebuild.
 
@@ -173,7 +181,7 @@ Client DNS Query
 Response to client
 ```
 
-Cross-cutting: `ConfigManager` (bootstrap/import/export/settings), `BlocklistManager` (fetch/compile/swap), `Storage` (two SQLite DBs), `Cache`, `UpstreamHealth`, `DiskMonitor`, `Auth`, `Web API` (REST + SSE + metrics).
+Cross-cutting: `ConfigManager` (load/reconcile/import/export/settings), `BlocklistManager` (fetch/compile/swap), `Storage` (two SQLite DBs), `Cache`, `UpstreamHealth`, `DiskMonitor`, `Auth`, `Web API` (REST + SSE + metrics).
 
 ---
 
@@ -203,7 +211,8 @@ src/
   filter/                # pure
     matcher.zig  rules.zig  wildcard.zig
     parser_hosts.zig  parser_domains.zig  parser_abp.zig
-    fetcher.zig  compiler.zig            # list download -> compiled .list/.wild files
+    fetcher.zig  compiler.zig            # list download -> compiled .list/.wild/.allow files
+    regex.zig                            # linear-time Pike VM for operator regex rules
     safesearch.zig
 
   local/                 # pure
@@ -223,7 +232,8 @@ src/
     logger.zig  retention.zig  disk_monitor.zig
 
   config/
-    model.zig  bootstrap.zig  import.zig  export.zig  validate.zig   # all ZON via std.zon
+    model.zig  loader.zig  reconcile.zig  import.zig  export.zig    # all ZON via std.zon
+    validate.zig  faults.zig
 
   web/
     server.zig  router.zig  auth.zig  sse.zig  static.zig  metrics.zig  openapi.zig
@@ -232,7 +242,7 @@ src/
       rules.zig  local.zig  lookup.zig  pause.zig  settings.zig
       upstream_health.zig  certs.zig  health.zig  version.zig
 
-web/                     # Vite + React + TS + Tailwind + TanStack
+admin/                   # Vite + React + TS + StyleX + React Aria + TanStack
 vendor/                  # sqlite3 amalgamation, mbedtls (pinned)
 docs/                    # tutorial/ how-to/ reference/ explanation/ (Diátaxis)
 tests/                   # dns/ integration/ fuzz/
@@ -272,32 +282,27 @@ Walk chain to depth 8; any target hitting block logic → synthesize blocked res
 
 ### 7.1 Evaluation
 
-For `{domain, group_id}` (the qtype travels with the query for logging and response synthesis, not
-for matching):
+For `{domain, group_id}` (the qtype travels with the query for logging and response synthesis, not for matching):
 1. Normalize: lowercase, trim trailing dot.
 2. Build candidate chain (full, parent1, parent2, …).
-3. Explicit rules per §3.10 precedence, evaluated against every candidate in the chain.
-4. Group's blocklist domains (hash set over compiled lists), matched against the query name only.
-5. Group's blocklist wildcards, matched against every proper parent of the query name.
-6. No match → allow.
+3. Explicit rules per §3.10 precedence, allow before block at each level: exact rules against every candidate in the chain, then wildcard patterns and then regex patterns against the whole name (both kinds express their own reach, so neither walks the chain).
+4. Group's blocklist exceptions (`@@` entries), against every candidate in the chain. They cancel a block a list made and never one a rule made.
+5. Group's blocklist domains (hash set over compiled lists), matched against the query name only.
+6. Group's blocklist wildcards, matched against every proper parent of the query name.
+7. No match → allow.
 
-Blocklist entries do not parent-walk; only rules do (§3.9). ABP `||x.y^` emits both a domain entry
-`x.y` and a wildcard entry `x.y`, which together give domain-and-subdomains semantics.
+Blocklist *domain* entries do not parent-walk: they are matched against the query name alone. Wildcard entries match every proper parent, and exception entries walk the candidate chain the way rules do (§3.9), so `@@||good.ads.example^` also lifts `y.good.ads.example`. ABP `||x.y^` emits both a domain entry `x.y` and a wildcard entry `x.y`, which together give domain-and-subdomains semantics.
 
 ### 7.2 Group Assignment
 
 - Per source IP: (1) exact match in `clients`, (2) longest-prefix match in `client_prefixes` (ties: longer prefix, then priority), (3) `default` group.
 - Auto-materialization: first query from an unseen IP inserts a `clients` row (`hand_edited=0`, `first_seen=now`) for UI visibility and stable group assignment. The query log does **not** FK to it (§3.6).
+- Materialized clients name themselves: the tracker's flush pass sends one PTR query per unnamed row through the declared forward zones (§6.5), and the answer is runtime state in `learned_name`, never configuration.
 - Retention drops `hand_edited=0` clients with no queries in `retention_days`.
 
 ### 7.3 Reload
 
-New immutable matcher built from DB + compiled list files → swap under an `std.Io.RwLock` with a
-generation counter. Readers take the shared lock for the microseconds of one evaluate; the writer
-takes the exclusive lock only for the swap, and the source status table is installed in the same
-critical section, so a failed reload publishes neither. (Deliberate deviation from "readers
-lock-free": freeing the old snapshot without a lock needs epoch-based reclamation, unjustifiable at
-household scale — see specs/milestone-5.md S8.3.)
+New immutable matcher built from DB + compiled list files → swap under an `std.Io.RwLock` with a generation counter. Readers take the shared lock for the microseconds of one evaluate; the writer takes the exclusive lock only for the swap, and the source status table is installed in the same critical section, so a failed reload publishes neither. (Deliberate deviation from "readers lock-free": freeing the old snapshot without a lock needs epoch-based reclamation, unjustifiable at household scale — see specs/milestone-5.md S8.3.)
 
 ### 7.4 Safe-Search
 
@@ -319,8 +324,10 @@ Per-group boolean. Rewrites known engine domains to their safe-search CNAME targ
 ## 9. Upstream Resolution
 
 - Schemes: `https://…` → DoH, `tls://host:853` → DoT.
-- Ordered by priority; sequential attempt; per-upstream failure counters; exponential backoff with jitter; success resets.
-- `UpstreamHealth` per upstream: last_success_at, last_error_at, last_error_message, rolling success rate, consecutive failures, backoff-until. Exposed via `GET /api/upstream/health`, dashboard, `/metrics`, and `nxdns check`.
+- Ordered by priority; one query tries upstreams sequentially; per-upstream failure counters; exponential backoff with jitter; success resets.
+- Concurrency is per upstream, not per pool: each entry owns `slots_per_entry = 8` leaf clients behind a semaphore, so at most 8 exchanges are in flight against one upstream at a time and the rest wait for a slot rather than for the whole entry. The slot count is compiled, not configured. A task that finds every slot taken counts itself in `queued_total`/`queued_seconds_total` on both exits — acquisition and cancellation — so a query that burned its total budget waiting is visible on `/metrics` (`nxdns_upstream_queued_total`, `nxdns_upstream_in_flight`, `nxdns_upstream_slots`) instead of being an unexplained SERVFAIL. The counters are admission samples, not an exact queue length.
+- DoT keeps its connection: a `DotClient` holds one TLS session open across exchanges rather than dialing and handshaking per query. Staleness is detected at use, never by a keepalive timer — a reused session that fails before the first response byte with a connection-lifecycle error is redialed once and retried, and that recovery counts in `nxdns_upstream_reuse_recoveries_total` without touching health or emitting a diagnostics episode. Every other failure closes the session and classifies as before.
+- `UpstreamHealth` per upstream: last_success_at, last_error_at, last_error_message, rolling success rate, consecutive failures, backoff-until. This is routing state: it drives failover and backoff, and is exposed through `/metrics` and `nxdns check`. There is no per-upstream API surface: `/api/health` reports the pool as available-of-enabled, and a failing upstream is a Diagnostics episode (`upstream.exchange`).
 - DoH client: `std.http.Client` with `content-type/accept: application/dns-message`; strict status + payload checks.
 - `platform/tls_client.zig` enforces per-connection read/write deadlines, classifies TLS errors explicitly, retries with backoff. Integration tests cover timeout/hang scenarios so compiler upgrades can't silently regress them.
 - Connect, read, and total-budget timeouts each configurable.
@@ -341,7 +348,11 @@ Per-group boolean. Rewrites known engine domains to their safe-search CNAME targ
 
 `journal_mode=WAL`, `synchronous=NORMAL`, `foreign_keys=ON`, `busy_timeout` set.
 
-### 11.2 config.db Schema
+### 11.2 config.db Schema (v1 baseline)
+
+The DDL below is the live schema, kept byte-identical to `src/storage/config_schema.zig`. `src/storage/migrations.zig` carries it as its one and only step, so a database is at **version 1** or it does not exist.
+
+Until nxdns reaches v0.1 this baseline is **editable**: a schema change edits this section and `config_schema.zig` together and adds no migration step. nxdns has no installs, so there is no database for a step to reconcile. At v0.1 the baseline freezes and every later change becomes an append-only step.
 
 ```sql
 CREATE TABLE schema_version (version INTEGER NOT NULL);
@@ -357,6 +368,8 @@ CREATE TABLE clients (
     id INTEGER PRIMARY KEY,
     ip TEXT NOT NULL UNIQUE,            -- canonical text form (v4 dotted / v6 RFC 5952)
     name TEXT,
+    learned_name TEXT,
+    name_attempt_after INTEGER NOT NULL DEFAULT 0,
     group_id INTEGER NOT NULL REFERENCES groups(id),
     hand_edited INTEGER NOT NULL DEFAULT 0,
     first_seen INTEGER NOT NULL,
@@ -374,7 +387,8 @@ CREATE TABLE upstreams (
     id INTEGER PRIMARY KEY,
     url TEXT NOT NULL UNIQUE,
     priority INTEGER NOT NULL DEFAULT 100,
-    enabled INTEGER NOT NULL DEFAULT 1
+    enabled INTEGER NOT NULL DEFAULT 1,
+    tls_name TEXT NOT NULL DEFAULT ''  -- DoT verification name; empty verifies against the url host
 );
 
 CREATE TABLE blocklist_sources (
@@ -386,7 +400,9 @@ CREATE TABLE blocklist_sources (
     last_updated INTEGER,
     domain_count INTEGER NOT NULL DEFAULT 0,
     wildcard_count INTEGER NOT NULL DEFAULT 0,
+    exception_count INTEGER NOT NULL DEFAULT 0,
     skipped_regex_count INTEGER NOT NULL DEFAULT 0,
+    skipped_unsupported_count INTEGER NOT NULL DEFAULT 0,
     checksum TEXT
 );
 
@@ -400,7 +416,7 @@ CREATE TABLE rules (
     id INTEGER PRIMARY KEY,
     group_id INTEGER NOT NULL REFERENCES groups(id) ON DELETE CASCADE,
     pattern TEXT NOT NULL,
-    kind TEXT NOT NULL CHECK(kind IN ('exact','wildcard')),
+    kind TEXT NOT NULL CHECK(kind IN ('exact','wildcard','regex')),
     action TEXT NOT NULL CHECK(action IN ('allow','block')),
     created_at INTEGER NOT NULL
 );
@@ -421,8 +437,28 @@ CREATE TABLE forward_zones (
 );
 
 CREATE TABLE settings (key TEXT PRIMARY KEY, value TEXT NOT NULL);
+
+CREATE TABLE operational_events (
+    id INTEGER PRIMARY KEY,
+    code TEXT NOT NULL,
+    subject_key TEXT NOT NULL,
+    subject_label TEXT NOT NULL,
+    severity TEXT NOT NULL CHECK (severity IN ('warning', 'error')),
+    first_seen INTEGER NOT NULL,
+    last_seen INTEGER NOT NULL,
+    occurrences INTEGER NOT NULL CHECK (occurrences > 0),
+    resolved_at INTEGER,
+    detail TEXT NOT NULL DEFAULT '',
+    CHECK (resolved_at IS NULL OR resolved_at >= first_seen)
+);
+CREATE UNIQUE INDEX idx_operational_events_active
+    ON operational_events(code, subject_key) WHERE resolved_at IS NULL;
+CREATE INDEX idx_operational_events_last_seen
+    ON operational_events(last_seen DESC);
 ```
 
+`operational_events` is the one table here that is **not** configuration. It is the diagnostics log of `src/storage/events.zig`: one row per failure episode, opened on the first failure and resolved when the same subject succeeds again. It is deliberately absent from `config_schema.table_names` and `config_schema.delete_order`, so `nxdns export` never emits it and `nxdns import` never wipes it.
+
 ### 11.3 querylog.db Schema
 
 ```sql
@@ -451,7 +487,7 @@ CREATE INDEX idx_query_log_domain ON query_log(domain_id);
 ### 11.4 Query Logger
 
 - In-memory buffer, mutex guarded, hard cap `query_log_buffer_max` (default 10000).
-- Flush: batch size (default 100) or max interval (default 100ms).
+- Flush: batch size (100, comptime) or max interval `query_log_flush_interval_s` (default 60s, 0–3600, 0 = do not wait). One transaction per interval: at household query rates a per-query commit costs orders of magnitude more disk writes than the rows are worth. The interval is also roughly what a crash costs, while the writer is healthy and the disk gate is open — a gated or lock-delayed batch is older, so it is a normal case, not a bound.
 - Privacy transforms (hide_domains / hide_client_ips) applied before persist + SSE fanout.
 - Backpressure: buffer full → drop oldest unflushed entry, increment monotonic `queries_dropped` (exposed in `/api/health` + `/metrics`). SSE fanout precedes buffer insert, so live viewers still see dropped-from-persistence entries.
 
@@ -471,52 +507,17 @@ Periodic delete of rows older than `retention_days`; scheduled checkpoint/VACUUM
 
 ## 12. Configuration
 
-### 12.1 Bootstrap ZON Shape
+### 12.1 Config ZON Shape
+
+The canonical shape is not duplicated here. It lives in [docs/reference/configuration.md](docs/reference/configuration.md), which is handwritten against `config/model.zig` and only partly guarded (the drift test covers settings-key rows, not the whole shape, so a new collection can go undocumented while the guard stays green), and `nxdns export` emits it. A copy in this document is how §12.1 came to describe an `.upstream.servers` field that never existed and to omit the required `.groups` and `.upstreams` — a sample nobody could load. The skeleton, for orientation only:
 
 ```zon
 .{
-    .upstream = .{
-        .servers = .{ "https://cloudflare-dns.com/dns-query", "tls://dns.google:853" },
-        .read_timeout_ms = 3000,
+    .groups = .{ .{ .name = "default" } },
+    .upstreams = .{ .{ .url = "https://dns.example/dns-query" } },
+    .rules = .{
+        .{ .group = "default", .pattern = "^ad[0-9]+-", .kind = .regex, .action = .block },
     },
-    .dns = .{
-        .bind_ipv4 = "0.0.0.0",
-        .bind_ipv6 = "::",
-        .port = 53,
-        .rate_limit = 1000,
-        .rate_window_seconds = 60,
-    },
-    .blocking = .{ .response = .zero, .ttl = 5 },       // .zero | .nxdomain
-    .cache = .{ .size = 10000, .negative_ttl_max = 3600 },
-    .web = .{
-        .enabled = true,
-        .bind = "0.0.0.0",
-        .port = 8080,
-        .password = "",                                  // empty => auth disabled
-        .session_ttl_hours = 24,
-        .api_rate_limit_per_min = 300,
-        .sse_max_connections_per_ip = 3,
-    },
-    .doh_server = .{ .enabled = false, .bind = "0.0.0.0", .port = 443,
-                     .cert_path = "/etc/nxdns/cert.pem", .key_path = "/etc/nxdns/key.pem" },
-    .dot_server = .{ .enabled = false, .bind = "0.0.0.0", .port = 853,
-                     .cert_path = "/etc/nxdns/cert.pem", .key_path = "/etc/nxdns/key.pem" },
-    .edns = .{ .ecs_mode = .strip },                     // .strip | .forward
-    .local_records = .{ .{ .name = "nas.lan", .rtype = .A, .value = "192.168.1.10" } },
-    .forward_zones = .{ .{ .zone = "lan.home", .resolver = "udp://192.168.1.1:53" } },
-    .logging = .{
-        .level = .info,
-        .retention_days = 30,
-        .query_log_buffer_max = 10000,
-        .hide_domains = false,
-        .hide_client_ips = false,
-        .output = .stderr,                               // .stderr | .syslog | .file
-        .file_path = "/var/log/nxdns/nxdns.log",
-        .max_size_mb = 50,
-        .max_files = 5,
-    },
-    .disk = .{ .min_free_mb = 200, .warn_free_mb = 500 },
-    .blocklist_update = .{ .enabled = true, .interval_hours = 24 },
 }
 ```
 
@@ -535,7 +536,7 @@ Scalars in `settings(key, value)`; ordered/structured items in dedicated tables.
 ### 13.1 Endpoints
 
 - `POST /api/auth/login`, `POST /api/auth/logout`
-- `GET /api/stats?period=…`, `GET /api/stats/timeseries?period=…`
+- `GET /api/stats?period=…`, `GET /api/stats/timeseries?period=…`, `GET /api/stats/types?period=…`, `GET /api/stats/routes?period=…`, `GET /api/stats/clients?period=…`
 - `GET /api/queries` (filter + paginate), `GET /api/queries/live` (SSE, per-IP cap)
 - `GET/PUT /api/clients/{id}`
 - `GET/POST/PUT/DELETE /api/groups…`, `/api/blocklists…`, `/api/rules…`, `/api/local-records…`, `/api/forward-zones…`
@@ -543,9 +544,8 @@ Scalars in `settings(key, value)`; ordered/structured items in dedicated tables.
 - `GET /api/lookup?domain=…&group_id=…`
 - `GET/POST /api/pause`
 - `GET/PUT /api/settings`
-- `GET /api/upstream/health`
 - `POST /api/certs/reload`
-- `GET /api/health` — overall + disk + upstream + queries_dropped rollup
+- `GET /api/health` — five condition objects (protection, upstreams, query history, diagnostics, disk) and the status computed from exactly their states
 - `GET /metrics` — Prometheus text exposition: query counters (total/blocked/cached), per-upstream health, cache stats, queries_dropped, disk gauges
 - `GET /api/version`, `GET /api/openapi.yaml`
 
@@ -557,7 +557,7 @@ Hand-maintained `openapi.yaml`, served at `GET /api/openapi.yaml` and mirrored b
 
 ## 14. Frontend
 
-Pages: Dashboard (stats + upstream health + disk), Query log, Live log, Clients, Groups, Blocklists, Rules, Local DNS (records + forward zones), Domain lookup, Settings.
+Pages: Overview (stat tiles, queries over time, client activity over time, and query-type and upstream breakdowns, all over one period), Query log, Live log, Clients, Groups, Blocklists, Rules, Local DNS (records + forward zones), Domain lookup, Settings.
 
 Requirements: responsive desktop/mobile; route loaders for initial fetch; TanStack Query for cache/retries; error/loading states on every data view; works with auth enabled or disabled; restart-required banner.
 
@@ -576,57 +576,46 @@ Requirements: responsive desktop/mobile; route loaders for initial fetch; TanSta
 ## 16. Implementation Order
 
 ### Phase 0 — Build Baseline
-Scaffold tree; `build.zig` with 0.16 assertion, musl targets, vendored sqlite3 + mbedtls compiling; version plumbing; Gitea Actions workflows (test, integration, fuzz smoke, OpenAPI lint, frontend build).
-Exit: cross-compiled hello-world linking both C deps on both targets; CI green.
+Scaffold tree; `build.zig` with 0.16 assertion, musl targets, vendored sqlite3 + mbedtls compiling; version plumbing; Gitea Actions workflows (test, integration, fuzz smoke, OpenAPI lint, frontend build). Exit: cross-compiled hello-world linking both C deps on both targets; CI green.
 
 ### Phase 1 — Platform Layer
-`platform/address.zig` (v4/v6 parity + canonical keys); `platform/tls_client.zig` (deadlines, error classes); `platform/tls_server.zig` (mbedTLS handshake → `std.Io.Reader`/`Writer`).
-Exit: UDP echo over `std.Io`; TLS client handshake against a real host; mbedTLS server terminating a loopback TLS connection.
+`platform/address.zig` (v4/v6 parity + canonical keys); `platform/tls_client.zig` (deadlines, error classes); `platform/tls_server.zig` (mbedTLS handshake → `std.Io.Reader`/`Writer`). Exit: UDP echo over `std.Io`; TLS client handshake against a real host; mbedTLS server terminating a loopback TLS connection.
 
 ### Phase 2 — DNS Core
-Types/header/name/question/record/packet; parser + encoder tests + fuzz target; EDNS + DO passthrough.
-Exit: unit + fuzz smoke pass.
+Types/header/name/question/record/packet; parser + encoder tests + fuzz target; EDNS + DO passthrough. Exit: unit + fuzz smoke pass.
 
 ### Phase 3 — Resolver Transport
-UDP server, TCP server, DoH + DoT upstream clients, pool + failover/backoff + health.
-Exit: A/AAAA forwarding over UDP + TCP; health populated.
+UDP server, TCP server, DoH + DoT upstream clients, pool + failover/backoff + health. Exit: A/AAAA forwarding over UDP + TCP; health populated.
 
 ### Phase 4 — Storage + Config
-SQLite wrapper; config.db schema + migration runner; querylog.db schema + recreate-on-mismatch; repositories; ZON bootstrap + import/export; `nxdns check`.
-Exit: first start seeds DB from ZON; export → import round-trips byte-stable.
+SQLite wrapper; config.db schema + migration runner; querylog.db schema + recreate-on-mismatch; repositories; ZON loading + import/export; `nxdns check`. Exit: export → import round-trips byte-stable. (The ZON bootstrap this phase shipped was replaced in m20 by the two authority modes above.)
 
 ### Phase 5 — Filtering + Local DNS
-Rule matcher (exact/parent/wildcard); blocklist parsers → compiled file format; fetcher + scheduled update; RCU swap; per-group safe-search; local records; forward zones.
-Exit: precedence table validated by tests; local zone answers + conditional forwards work.
+Rule matcher (exact/parent/wildcard; `regex` added in m21); blocklist parsers → compiled file format; fetcher + scheduled update; RCU swap; per-group safe-search; local records; forward zones. Exit: precedence table validated by tests; local zone answers + conditional forwards work.
 
 ### Phase 6 — Cache + Rate Limit + Logging + Disk Monitor
-TTL cache + reconstruction; v4/v6 rate limiter; async query logger + backpressure + retention; DiskMonitor + rotation + error-log dedup.
-Exit: disk thresholds trigger degradation + drop counters in integration test.
+TTL cache + reconstruction; v4/v6 rate limiter; async query logger + backpressure + retention; DiskMonitor + rotation + error-log dedup. Exit: disk thresholds trigger degradation + drop counters in integration test.
 
 ### Phase 7 — Handler Integration
-Full pipeline composition; CNAME uncloaking; pause/resume.
-Exit: end-to-end DNS flow with blocking, local records, cache, failover.
+Full pipeline composition; CNAME uncloaking; pause/resume. Exit: end-to-end DNS flow with blocking, local records, cache, failover.
 
 ### Phase 8 — Web / API / SSE / Auth / Metrics
-HTTP server + router; handlers; SSE; optional auth; API rate limiting; `/metrics`; OpenAPI served + contract tests; embedded frontend + dev-mode disk serving.
-Exit: frontend fully drives config and operations; contract tests green.
+HTTP server + router; handlers; SSE; optional auth; API rate limiting; `/metrics`; OpenAPI served + contract tests; embedded frontend + dev-mode disk serving. Exit: frontend fully drives config and operations; contract tests green.
 
 ### Phase 9 — Local DoH/DoT Endpoints
-DoH server + DoT server on `platform/tls_server.zig`; cert watcher + reload.
-Exit: LAN client resolves via DoH and DoT against local certs.
+DoH server + DoT server on `platform/tls_server.zig`; cert watcher + reload. Exit: LAN client resolves via DoH and DoT against local certs.
 
 ### Phase 10 — Packaging + Ops + Docs
-systemd unit (`AmbientCapabilities=CAP_NET_BIND_SERVICE`, hardened, writable `/var/lib/nxdns` + optional `/var/log/nxdns`); Dockerfile + compose (53/udp+tcp, 8080; mounts `/etc/nxdns`, `/var/lib/nxdns`); operator/architecture/config-reference/API docs.
-Exit: documented deployment works end-to-end on the Pi 5.
+systemd unit (`AmbientCapabilities=CAP_NET_BIND_SERVICE`, hardened, writable `/var/lib/nxdns` + optional `/var/log/nxdns`); Dockerfile + compose (53/udp+tcp, 8080; mounts `/etc/nxdns`, `/var/lib/nxdns`); operator/architecture/config-reference/API docs. Exit: documented deployment works end-to-end on the Pi 5.
 
 ---
 
 ## 17. Testing Strategy
 
-- **Unit**: DNS encode/decode; rule precedence + wildcard matcher; cache put/get/TTL rewrite; ZON bootstrap + export round-trip; rate limiter; migration runner (fresh + stepwise upgrade).
+- **Unit**: DNS encode/decode; rule precedence + wildcard matcher; cache put/get/TTL rewrite; ZON loading + export round-trip; rate limiter; migration runner (fresh + stepwise upgrade).
 - **Fuzz**: DNS parser malformed-packet fuzzing; blocklist parser fuzzing.
 - **Integration**: UDP/TCP query path; blocked path; allow-over-block; wildcard precedence; CNAME uncloaking block; local records + forward zones; upstream failover/backoff/health; disk-full degradation; querylog.db corruption recovery; API CRUD; auth on/off; SSE; contract tests.
-- **Manual**: `dig @pi example.com` / blocked domain / local record; DoH/DoT client checks; dashboard + live log.
+- **Manual**: `dig @pi example.com` / blocked domain / local record; DoH/DoT client checks; Overview + live log.
 
 ---
 
@@ -652,9 +641,7 @@ Exit: documented deployment works end-to-end on the Pi 5.
 
 ## 20. Publication
 
-The project publishes released binaries and container images from its own Gitea
-instance. Building from source stays fully supported and documented; it is no
-longer the only path.
+The project publishes released binaries and container images from its own Gitea instance. Building from source stays fully supported and documented; it is no longer the only path.
 
 - **Trigger.** Pushing an annotated, GPG-signed tag `vX.Y.Z` to `git.mial.net/mokhtar/nxdns`. Nothing else publishes. Pre-release tags are rejected.
 - **Version.** The tag is authoritative. `build.zig.zon`'s `.version` must equal the tag, and the packaging gate asserts it. Nowhere else stores a version.
@@ -697,7 +684,7 @@ longer the only path.
 | # | Decision |
 |---|----------|
 | A | Blocklists compile to flat files under `/var/lib/nxdns/blocklists/`; DB stores source metadata only |
-| B | Rule kinds: exact, parent-walk, wildcard. Regex permanently out of scope |
+| B | Rule kinds: exact, parent-walk, wildcard, regex (m21, own linear-time engine). Regex *from downloaded lists* stays out of scope |
 | C | In scope: local DoH/DoT server, local records, conditional forwarding. Out: HTTP/2, DoQ, DHCP, DNSSEC, clustering |
 | D | mbedTLS (vendored) terminates server TLS; stdlib TLS for upstream client |
 | E | `std.Io` injected everywhere; `Threaded` backend (io_uring flag dropped in m11 — Evented networking is stubbed at 0.16.0); no custom thread pool |

README.md

@@ -1,47 +1,40 @@
 # nxdns
 
-A self-hosted DNS sinkhole for a household LAN, written in Zig 0.16. One
-static musl binary, SQLite for state, a Raspberry Pi 5 as the reference
-target. It answers your network's DNS, blocks what you tell it to, and shows
-you what asked for what.
+nxdns is a DNS sinkhole for your LAN. It blocks the names you do not want, and forwards the rest over an encrypted connection.
+
+```mermaid
+flowchart LR
+    devices["Your devices"] -- "DNS query" --> nxdns["nxdns"]
+    nxdns -- "answer" --> devices
+    nxdns -- "allowed" --> upstream["Upstream resolvers<br/>DoH / DoT"]
+    upstream -- "answer" --> nxdns
+    nxdns -- "blocked" --> sink["0.0.0.0 / NXDOMAIN"]
+```
+
+One static Zig binary. SQLite holds the state and the query log, which the web UI, the REST API and `/metrics` read.
 
 ## Features
 
-- Blocklist filtering: subscribe to hosts/domain lists, plus your own allow
-  and block rules with wildcard support (`*.example.com`)
-- Per-client policy groups: different filtering for the kids' tablet and
-  your workstation
+- Blocklist filtering: subscribe to hosts, domain and Adblock Plus lists — whose `@@` exception lines are honoured — plus your own allow and block rules, exact, wildcard (`*.example.com`) or regular expression
+- Two configuration modes: a database the web UI edits, or a ZON file you keep in git and converge onto at every start
+- Per-client policy groups: different filtering for the kids' tablet and your workstation
 - Local DNS records and conditional forwarding for internal zones
 - Encrypted upstreams: DNS-over-HTTPS and DNS-over-TLS with failover
 - Built-in DoH and DoT server endpoints, with certificate hot-reload
 - Bounded in-memory DNS cache with TTL-respecting expiry
 - Query log with retention limits, live-streamed over SSE
 - Web UI (embedded in the binary) and a REST API with a served OpenAPI spec
-- Prometheus-style `/metrics`, per-client rate limiting, disk-full
-  self-protection
+- Prometheus-style `/metrics`, per-client rate limiting, disk-full self-protection
 
 ## Install
 
-**No release exists yet.** This repository has no tags, nothing has been
-published to <https://git.mial.net/mokhtar/nxdns/releases>, and no container
-image has been pushed. Every release URL on this page and in the how-to guides
-is a 404 today, and `docker pull` finds nothing. Until the first tag ships,
-building from source is the only way to get nxdns.
+**No release exists yet.** This repository has no tags, nothing has been published to <https://git.mial.net/mokhtar/nxdns/releases>, and no container image has been pushed. Every release URL on this page and in the how-to guides is a 404 today, and `docker pull` finds nothing. Until the first tag ships, building from source is the only way to get nxdns.
 
-What a tag will publish, once one exists: five assets — two static musl
-tarballs (`nxdns-<version>-x86_64-linux-musl.tar.gz`,
-`nxdns-<version>-aarch64-linux-musl.tar.gz`), `IMAGE-DIGEST.txt` naming the
-multi-architecture container image by digest, `SHA256SUMS.txt` covering those
-three files, and `SHA256SUMS.txt.asc`, a detached OpenPGP signature over the
-checksum file. Verify what you downloaded before you run it:
-[docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md), which also
-says what that signature does and does not prove.
+What a tag will publish, once one exists: five assets — two static musl tarballs (`nxdns-<version>-x86_64-linux-musl.tar.gz`, `nxdns-<version>-aarch64-linux-musl.tar.gz`), `IMAGE-DIGEST.txt` naming the multi-architecture container image by digest, `SHA256SUMS.txt` covering those three files, and `SHA256SUMS.txt.asc`, a detached OpenPGP signature over the checksum file. Verify what you downloaded before you run it: [docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md), which also says what that signature does and does not prove.
 
 ## Quickstart (docker compose)
 
-Seed a minimal configuration and start the published image. This is what the
-first release will make possible; it does not work today, because there is no
-image in the registry to pull:
+Write a minimal configuration and start the published image. This is what the first release will make possible; it does not work today, because there is no image in the registry to pull:
 
 ```sh
 cd deploy/docker
@@ -56,81 +49,52 @@ EOF
 NXDNS_VERSION=<version> docker compose up -d
 ```
 
-The compose file defaults to `:latest`; pin a version for anything you intend
-to keep running. To run it before a release exists, build the image yourself and
-name it — `NXDNS_IMAGE=nxdns docker compose up -d` — as
-[docs/how-to/install-with-docker.md](docs/how-to/install-with-docker.md)
-describes. DNS is on port 53, the web UI on <http://localhost:8080>. The config
-file seeds the database on first boot only; from then on the database is the
-truth and changes go through the UI, the API, or `nxdns export` /
-`nxdns import`. Full install instructions, including the systemd path and
-the Pi 5 recipe, are in
-[docs/how-to/install-with-systemd.md](docs/how-to/install-with-systemd.md) and
-[docs/how-to/install-with-docker.md](docs/how-to/install-with-docker.md).
+The compose file defaults to `:latest`; pin a version for anything you intend to keep running. To run it before a release exists, build the image yourself and name it — `NXDNS_IMAGE=nxdns docker compose up -d` — as [docs/how-to/install-with-docker.md](docs/how-to/install-with-docker.md) describes. DNS is on port 53, the web UI on <http://localhost:8080>.
+
+The compose file runs `nxdns run --config=/etc/nxdns/config.zon`, which makes that file the configuration: every start reconciles the database onto it, and the UI refuses configuration edits. Edit the file and restart to change anything. Drop the `command:` line to run bare `nxdns run` instead, where the database is the configuration and changes go through the UI, the API, or `nxdns export` / `nxdns import` — the packaged systemd unit does that. Which mode is live is printed at every start (`authority: database` / `authority: file (<path>)`); see [docs/explanation/configuration-model.md](docs/explanation/configuration-model.md).
+
+Full install instructions, including the systemd path and the Pi 5 recipe, are in [docs/how-to/install-with-systemd.md](docs/how-to/install-with-systemd.md) and [docs/how-to/install-with-docker.md](docs/how-to/install-with-docker.md).
 
 ## Building from source
 
-Requires [Zig 0.16.0](https://ziglang.org/download/) and Node.js 24 (for
-the web UI). C dependencies (SQLite, mbedTLS) are vendored and built by
-`zig build`.
+Requires [Zig 0.16.0](https://ziglang.org/download/) and Node.js 24 (for the web UI). C dependencies (SQLite, mbedTLS) are vendored and built by `zig build`.
 
 ```sh
-(cd web && npm ci && npm run build)          # web UI -> web/dist
-zig build -Dweb-dist=web/dist                # native binary -> zig-out/bin/nxdns
+(cd admin && npm ci && npm run build)          # web UI -> admin/dist
+zig build -Dadmin-dist=admin/dist                # native binary -> zig-out/bin/nxdns
 zig build test --summary all                 # unit tests
 ```
 
-The release artifacts come out of the same build graph, so the whole release
-build runs on a laptop exactly as it runs on the CI runner:
+The release artifacts come out of the same build graph, so the whole release build runs on a laptop exactly as it runs on the CI runner:
 
 ```sh
-(cd web && npm ci && npm run build)                # required: dist refuses the placeholder
+(cd admin && npm ci && npm run build)                # required: dist refuses the placeholder
 VERSION=$(sed -n 's/^[[:space:]]*\.version[[:space:]]*=[[:space:]]*"\([^"]*\)".*/\1/p' build.zig.zon)
 zig build dist -Dversion-string="$VERSION" -Dgit-commit=$(git rev-parse HEAD) \
-    -Dweb-dist=web/dist -Doptimize=ReleaseSafe     # tarballs -> zig-out/dist/
+    -Dadmin-dist=admin/dist -Doptimize=ReleaseSafe     # tarballs -> zig-out/dist/
 zig build verify-dist -Dversion-string="$VERSION" -Dgit-commit=$(git rev-parse HEAD) \
-    -Dweb-dist=web/dist -Doptimize=ReleaseSafe     # the release checks
+    -Dadmin-dist=admin/dist -Doptimize=ReleaseSafe     # the release checks
 ```
 
-The version comes from `build.zig.zon` because `verify-dist` asserts the two
-agree; a tag sets both.
+The version comes from `build.zig.zon` because `verify-dist` asserts the two agree; a tag sets both.
 
-That is not a claim that your tarball will hash the same as a published one.
-Nothing in this project measures whether two builds of the same commit on two
-different machines land on the same bytes, so no document here describes the
-build as reproducible. The gate that would settle it is a recorded deferral —
-`specs/milestone-14.md` ruling 12 — and
-[docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md) explains what
-a matching or differing hash is worth in the meantime.
+That is not a claim that your tarball will hash the same as a published one. Nothing in this project measures whether two builds of the same commit on two different machines land on the same bytes, so no document here describes the build as reproducible. The gate that would settle it is a recorded deferral — `specs/milestone-14.md` ruling 12 — and [docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md) explains what a matching or differing hash is worth in the meantime.
 
 ## Documentation
 
-Start at [docs/README.md](docs/README.md), which splits the documentation
-into a tutorial, how-to guides, reference and explanation.
+Start at [docs/README.md](docs/README.md), which splits the documentation into a tutorial, how-to guides, reference and explanation.
 
-- [docs/tutorial/first-run.md](docs/tutorial/first-run.md) — build it, resolve
-  a name, block a domain, on a scratch directory
-- [docs/how-to/install-with-systemd.md](docs/how-to/install-with-systemd.md) —
-  a real install, including the Raspberry Pi 5
-- [docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md) — checking
-  the hashes and the signature before you install
-- [docs/reference/configuration.md](docs/reference/configuration.md) — every
-  configuration field
+- [docs/tutorial/first-run.md](docs/tutorial/first-run.md) — build it, resolve a name, block a domain, on a scratch directory
+- [docs/how-to/install-with-systemd.md](docs/how-to/install-with-systemd.md) — a real install, including the Raspberry Pi 5
+- [docs/how-to/verify-a-release.md](docs/how-to/verify-a-release.md) — checking the hashes and the signature before you install
+- [docs/reference/configuration.md](docs/reference/configuration.md) — every configuration field
 - [docs/reference/api.md](docs/reference/api.md) — REST API, auth and SSE
-- [docs/reference/cli.md](docs/reference/cli.md) — subcommands, flags and exit
-  codes
-- [docs/explanation/architecture.md](docs/explanation/architecture.md) — module
-  map and design
-- [PLAN.md](PLAN.md) and [specs/](specs/) — scope, design decisions and
-  per-milestone contracts
+- [docs/reference/cli.md](docs/reference/cli.md) — subcommands, flags and exit codes
+- [docs/explanation/architecture.md](docs/explanation/architecture.md) — module map and design
+- [PLAN.md](PLAN.md) and [specs/](specs/) — scope, design decisions and per-milestone contracts
 
 ## Licence
 
-Copyright (c) 2026 Mokhtar Mial. nxdns is licensed under the European Union
-Public Licence v. 1.2 (`EUPL-1.2`); the full text is in [LICENSE](LICENSE).
+Copyright (c) 2026 Mokhtar Mial. nxdns is licensed under the European Union Public Licence v. 1.2 (`EUPL-1.2`); the full text is in [LICENSE](LICENSE).
 
-Every released tarball and image carries a `THIRD-PARTY-NOTICES` file assembled
-from the reviewed inventory in [licenses/](licenses/), which covers what the
-artifacts actually contain: musl, the Zig runtime, SQLite, Mbed TLS and its
-vendored Everest and p256-m code, and the JavaScript and CSS bundled into the
-admin UI.
+Every released tarball and image carries a `THIRD-PARTY-NOTICES` file assembled from the reviewed inventory in [licenses/](licenses/), which covers what the artifacts actually contain: musl, the Zig runtime, SQLite, Mbed TLS and its vendored Everest and p256-m code, and the JavaScript and CSS bundled into the admin UI.

admin/.prettierignore

@@ -1,3 +1,4 @@
 dist/
 dist-placeholder/
 package-lock.json
+dist-sourcemap/

admin/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "nxdns-web",
+	"name": "nxdns-admin",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
@@ -8,7 +8,7 @@
 	},
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build && node scripts/stamp-dist.mjs",
+		"build": "vite build && node scripts/assert-css-layers.mjs && node scripts/assert-bundle-size.mjs && node scripts/stamp-dist.mjs",
 		"typecheck": "tsc -b",
 		"lint": "oxlint src vite.config.ts",
 		"format": "prettier --write .",
@@ -25,13 +25,15 @@
 		"trailingComma": "all"
 	},
 	"dependencies": {
+		"@stylexjs/stylex": "0.19.0",
 		"@tanstack/react-query": "5.101.4",
 		"@tanstack/react-router": "1.170.18",
 		"react": "19.2.8",
+		"react-aria-components": "1.20.0",
 		"react-dom": "19.2.8"
 	},
 	"devDependencies": {
-		"@tailwindcss/vite": "4.3.3",
+		"@stylexjs/unplugin": "0.19.0",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.2",
 		"@types/node": "26.1.1",
@@ -41,8 +43,7 @@
 		"jsdom": "29.1.1",
 		"oxlint": "1.75.0",
 		"prettier": "3.9.6",
-		"tailwindcss": "4.3.3",
-		"typescript": "6.0.3",
+		"typescript": "7.0.2",
 		"vite": "8.1.5",
 		"vitest": "4.1.10"
 	}

admin/scripts/assert-bundle-size.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+// The admin bundle is embedded in the server binary and served to a household
+// LAN, so an accidental dependency or a stray asset landing in dist is a
+// regression nobody would otherwise notice: every other gate passes with a
+// bundle twice this size. One number, total bytes of dist/assets — not per
+// chunk, not gzipped — because the failure being caught is "something big
+// arrived", not chunk shape.
+//
+// This runs from admin/ as part of `npm run build`, before stamp-dist: a failed
+// size check must not leave a fresh .src-hash beside an oversized bundle that a
+// later Zig build would accept as current.
+
+import { readdirSync, statSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const BUDGET_BYTES = 800_000;
+
+const distDir = join(dirname(dirname(fileURLToPath(import.meta.url))), "dist", "assets");
+
+let entries;
+try {
+	entries = readdirSync(distDir, { withFileTypes: true });
+} catch (err) {
+	console.error(`assert-bundle-size: cannot read admin/dist/assets: ${err.message}`);
+	process.exit(1);
+}
+
+const files = entries
+	.filter((entry) => entry.isFile())
+	.map((entry) => ({ name: entry.name, bytes: statSync(join(distDir, entry.name)).size }))
+	.sort((a, b) => b.bytes - a.bytes);
+
+if (files.length === 0) {
+	console.error("assert-bundle-size: no files in admin/dist/assets — did the build emit anything?");
+	process.exit(1);
+}
+
+const total = files.reduce((sum, file) => sum + file.bytes, 0);
+const format = (bytes) => bytes.toLocaleString("en-US");
+
+if (total > BUDGET_BYTES) {
+	console.error(
+		`assert-bundle-size: admin/dist/assets is ${format(total)} bytes, over the ${format(BUDGET_BYTES)} byte budget.`,
+	);
+	console.error("Largest chunks:");
+	for (const file of files.slice(0, 5)) console.error(`  ${format(file.bytes).padStart(9)}  ${file.name}`);
+	console.error("Drop what arrived, or raise the budget in this script with the reason in the changelog.");
+	process.exit(1);
+}
+
+console.log(
+	`admin/dist/assets is ${format(total)} bytes across ${files.length} files, ` +
+		`${format(BUDGET_BYTES - total)} under the ${format(BUDGET_BYTES)} byte budget`,
+);

admin/scripts/assert-bundled-packages.mjs

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
-// The set of npm packages whose bytes reach web/dist must be exactly the set
+// The set of npm packages whose bytes reach admin/dist must be exactly the set
 // recorded in licenses/dependency-identity.txt (milestone-14 ruling 3).
 //
 // The shipped build carries no sourcemaps, so this makes a second build with
 // them into its own directory: the `sources` list of each chunk names the
 // modules that went into it, and the artifact `npm run build` produced stays
-// untouched. Runs from web/ as `npm run assert-bundled`, on a laptop exactly as
+// untouched. Runs from admin/ as `npm run assert-bundled`, on a laptop exactly as
 // on the runner.
 
 import { execFileSync } from "node:child_process";
@@ -85,10 +85,10 @@ try {
 
 const recorded = recordedPackages(identity);
 if (recorded === null) {
-	fail("assert-bundled: licenses/dependency-identity.txt has no '[npm packages bundled into web/dist]' section");
+	fail("assert-bundled: licenses/dependency-identity.txt has no '[npm packages bundled into admin/dist]' section");
 }
 if (recorded.length === 0) {
-	fail("assert-bundled: the '[npm packages bundled into web/dist]' section is empty");
+	fail("assert-bundled: the '[npm packages bundled into admin/dist]' section is empty");
 }
 
 const { added, removed } = comparePackages(recorded, bundled);
@@ -96,12 +96,12 @@ if (added.length !== 0 || removed.length !== 0) {
 	process.stderr.write(`${formatDiff(recorded, bundled)}\n\n`);
 	fail(
 		[
-			"the set of npm packages in web/dist has changed (-recorded +current).",
+			"the set of npm packages in admin/dist has changed (-recorded +current).",
 			"Work out what the change means for licenses/inventory.zon first, then record",
 			"the new list in that section of licenses/dependency-identity.txt.",
 		].join("\n"),
 	);
 }
 
-process.stdout.write(`web/dist bundles exactly the ${bundled.length} recorded packages:\n`);
+process.stdout.write(`admin/dist bundles exactly the ${bundled.length} recorded packages:\n`);
 for (const name of bundled) process.stdout.write(`${name}\n`);

admin/scripts/assert-css-layers.mjs

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+// Every rule in the built stylesheet must sit inside a cascade layer
+// (milestone 23). Unlayered author CSS outranks every layer whatever its
+// selector says, so a single unlayered rule silently beats the StyleX atomic
+// rules it was written to sit under. That failure renders wrong and passes
+// every other gate: no test asserts computed style, and the bundler is happy.
+// It also checks the layer ORDER, which is the invariant that actually matters:
+// a later layer beats an earlier one, so `reset` has to be declared first.
+//
+// What it does not catch, so nobody reads more into a pass than is there: an
+// unlayered rule that sets only custom properties is allowed, because StyleX
+// emits its token `:root` block exactly that way and this cannot tell that
+// block from an override of it; a declaration value containing `@layer` or a
+// brace inside a string blinds the stripper; and with several stylesheets it
+// judges each alone, not their load order in the document.
+//
+// This check runs from admin/ as part of `npm run build`.
+
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const distDir = join(dirname(dirname(fileURLToPath(import.meta.url))), "dist", "assets");
+
+const sheets = readdirSync(distDir).filter((name) => name.endsWith(".css"));
+if (sheets.length === 0) {
+	console.error("assert-css-layers: no stylesheet in dist/assets — did the build emit one?");
+	process.exit(1);
+}
+
+// At-rules that describe a resource or a name rather than styling an element.
+// They carry no cascade priority against a layer, so being outside one is
+// correct, and StyleX emits `@property` for its custom properties.
+const unlayerable = String.raw`@(?:layer|property|keyframes|font-face|counter-style|charset|import)`;
+
+/** Strip comments, then every balanced block and statement the rule above allows. */
+function outsideLayers(css) {
+	let rest = css.replace(/\/\*[\s\S]*?\*\//g, "");
+	for (;;) {
+		const at = rest.search(new RegExp(`${unlayerable}[^{;]*\\{`));
+		if (at === -1) break;
+		let depth = 0;
+		let end = rest.indexOf("{", at);
+		for (let i = end; i < rest.length; i += 1) {
+			if (rest[i] === "{") depth += 1;
+			else if (rest[i] === "}") {
+				depth -= 1;
+				if (depth === 0) {
+					end = i;
+					break;
+				}
+			}
+		}
+		rest = rest.slice(0, at) + rest.slice(end + 1);
+	}
+	return rest.replace(new RegExp(`${unlayerable}[^;{}]*;`, "g"), "");
+}
+
+/**
+ * A rule that only sets custom properties styles nothing on its own — StyleX
+ * emits its token `:root` block that way, ahead of its layers, and a variable
+ * is consumed through `var()` rather than competing with a layered rule.
+ */
+function stylesSomething(body) {
+	return body
+		.split(";")
+		.map((declaration) => declaration.trim())
+		.some((declaration) => declaration.length > 0 && !declaration.startsWith("--"));
+}
+
+/**
+ * Layer names in the order their position is fixed, which is where each name is
+ * first mentioned — a later block under an already-named layer does not move it.
+ */
+function layerOrder(css) {
+	const seen = [];
+	for (const [, names] of css.replace(/\/\*[\s\S]*?\*\//g, "").matchAll(/@layer\s+([^{;]+)[{;]/g)) {
+		for (const name of names.split(",")) {
+			const trimmed = name.trim();
+			if (trimmed.length > 0 && !seen.includes(trimmed)) seen.push(trimmed);
+		}
+	}
+	return seen;
+}
+
+let failed = false;
+for (const sheet of sheets) {
+	const css = readFileSync(join(distDir, sheet), "utf8");
+
+	// Order is the whole point: a later layer wins, so the reset has to be first.
+	const order = layerOrder(css);
+	if (order.length > 0 && order[0] !== "reset") {
+		console.error(
+			`assert-css-layers: ${sheet} declares layers in the order ${order.join(", ")} — ` +
+				`'reset' must come first or it outranks the StyleX rules written against it.`,
+		);
+		failed = true;
+	}
+
+	const leftover = outsideLayers(css);
+	for (const [, selector, body] of leftover.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+		if (!stylesSomething(body)) continue;
+		console.error(
+			`assert-css-layers: ${sheet} styles elements outside every @layer:\n` +
+				`  ${selector.trim().slice(0, 80)} { ${body.trim().slice(0, 60)} … }`,
+		);
+		failed = true;
+		break;
+	}
+}
+
+if (failed) {
+	console.error("Wrap it in a layer declared before StyleX's, as admin/src/styles.css does.");
+	process.exit(1);
+}
+console.log(
+	`every rule in ${sheets.length === 1 ? "the stylesheet" : `${sheets.length} stylesheets`} sits inside a cascade layer`,
+);

admin/scripts/bundledPackages.mjs

@@ -8,7 +8,7 @@
 // lockfile, no version and no dependency set changes — only the bundle does. So
 // the bundle is what this reads.
 
-const sectionHeading = "[npm packages bundled into web/dist]";
+const sectionHeading = "[npm packages bundled into admin/dist]";
 
 // A sourcemap `sources` entry for a dependency ends in
 // `node_modules/<name>/<file>` or `node_modules/@<scope>/<name>/<file>`. Only

admin/scripts/bundledPackages.test.mjs

@@ -48,7 +48,7 @@ describe("recordedPackages", () => {
 		"[some earlier section]",
 		"ignored",
 		"",
-		"[npm packages bundled into web/dist]",
+		"[npm packages bundled into admin/dist]",
 		"react",
 		"@tanstack/react-query",
 		"",
@@ -64,7 +64,7 @@ describe("recordedPackages", () => {
 
 	it("distinguishes a missing section from an empty one", () => {
 		expect(recordedPackages("[other]\nx\n")).toBeNull();
-		expect(recordedPackages("[npm packages bundled into web/dist]\n\n[next]\n")).toEqual([]);
+		expect(recordedPackages("[npm packages bundled into admin/dist]\n\n[next]\n")).toEqual([]);
 	});
 });
 

admin/scripts/stamp-dist.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-// Freshness stamp for web/dist (milestone-15 ruling 5). A stale dist has
-// already shipped a crashing settings page once. Write mode runs from web/ as
+// Freshness stamp for admin/dist (milestone-15 ruling 5). A stale dist has
+// already shipped a crashing settings page once. Write mode runs from admin/ as
 // part of `npm run build`; check mode runs from the repository root as a
 // build.zig system command. Every path resolves from this file's own location
 // so both working directories hash the same set.
@@ -13,7 +13,7 @@ import { fileURLToPath } from "node:url";
 const webRoot = dirname(dirname(fileURLToPath(import.meta.url)));
 const distDir = join(webRoot, "dist");
 const stampFile = join(distDir, ".src-hash");
-const stampRelative = "web/dist/.src-hash";
+const stampRelative = "admin/dist/.src-hash";
 
 const inputDirs = ["src", "public"];
 const inputFiles = [
@@ -26,7 +26,7 @@ const inputFiles = [
 	"tsconfig.node.json",
 ];
 
-const staleMessage = "web/dist is stale: rebuild the frontend (npm run build)";
+const staleMessage = "admin/dist is stale: rebuild the frontend (npm run build)";
 
 function fail(message) {
 	process.stderr.write(`${message}\n`);
@@ -39,7 +39,7 @@ function walk(relativeDir) {
 	try {
 		entries = readdirSync(absolute, { withFileTypes: true });
 	} catch (err) {
-		fail(`stamp-dist: cannot read web/${relativeDir}: ${err.message}`);
+		fail(`stamp-dist: cannot read admin/${relativeDir}: ${err.message}`);
 	}
 	const found = [];
 	for (const entry of entries) {
@@ -57,9 +57,9 @@ function inputSet() {
 	const paths = [...inputFiles, ...inputDirs.flatMap(walk)];
 	for (const path of inputFiles) {
 		try {
-			if (!statSync(join(webRoot, path)).isFile()) fail(`stamp-dist: web/${path} is not a file`);
+			if (!statSync(join(webRoot, path)).isFile()) fail(`stamp-dist: admin/${path} is not a file`);
 		} catch (err) {
-			fail(`stamp-dist: cannot stat web/${path}: ${err.message}`);
+			fail(`stamp-dist: cannot stat admin/${path}: ${err.message}`);
 		}
 	}
 	// Sorted by path so the digest does not depend on directory order.

admin/src/auth/LoginPage.test.tsx

@@ -87,8 +87,8 @@ test("429 login shows a ticking countdown and keeps submit disabled until it end
 
 test("safeRedirect only allows same-origin absolute paths", () => {
 	expect(safeRedirect(undefined)).toBe("/");
-	expect(safeRedirect("/queries")).toBe("/queries");
-	expect(safeRedirect("/queries?x=1")).toBe("/queries?x=1");
+	expect(safeRedirect("/activity")).toBe("/activity");
+	expect(safeRedirect("/activity?x=1")).toBe("/activity?x=1");
 	expect(safeRedirect("//evil.example")).toBe("/");
 	expect(safeRedirect("https://evil.example")).toBe("/");
 	expect(safeRedirect("/\\evil.example")).toBe("/");

admin/src/auth/LoginPage.tsx

@@ -1,8 +1,57 @@
 import { useEffect, useState, type FormEvent } from "react";
 import { useRouter, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
 import { useAuth } from "@/auth/store";
-import { inputClass, largePrimaryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	/** Login renders outside AppShell, so it paints the page ground itself. */
+	page: {
+		display: "flex",
+		minHeight: "100dvh",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: colors.surface,
+		color: colors.text,
+		padding: "1rem",
+	},
+	card: {
+		width: "100%",
+		maxWidth: "24rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	probing: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+		marginTop: "1.5rem",
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	submit: {
+		width: "100%",
+	},
+	error: {
+		marginTop: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+});
 
 export function safeRedirect(raw: string | undefined): string {
 	if (raw === undefined) return "/";
@@ -76,15 +125,15 @@ export default function LoginPage() {
 	}
 
 	return (
-		<main className="flex min-h-dvh items-center justify-center bg-zinc-50 p-4 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
-			<section className="w-full max-w-sm">
-				<h1 className="text-2xl font-semibold">nxdns</h1>
+		<main {...stylex.props(styles.page)}>
+			<section {...stylex.props(styles.card)}>
+				<h1 {...stylex.props(styles.heading)}>nxdns</h1>
 				{authRequired !== true ? (
-					<p className="mt-4 text-zinc-500">Checking whether a password is required…</p>
+					<p {...stylex.props(styles.probing)}>Checking whether a password is required…</p>
 				) : (
-					<form onSubmit={onSubmit} className="mt-6 space-y-4">
+					<form onSubmit={onSubmit} {...stylex.props(styles.form)}>
 						<div>
-							<label htmlFor="password" className="block text-sm font-medium">
+							<label htmlFor="password" {...stylex.props(styles.fieldLabel)}>
 								Password
 							</label>
 							<input
@@ -95,20 +144,20 @@ export default function LoginPage() {
 								required
 								value={password}
 								onChange={(event) => setPassword(event.target.value)}
-								className={inputClass}
+								{...stylex.props(shared.input, shared.focusRing)}
 							/>
 						</div>
 						<button
 							type="submit"
 							disabled={busy || lockedOut}
-							className={`w-full ${largePrimaryButtonClass}`}
+							{...stylex.props(shared.largePrimaryButton, styles.submit, shared.focusRing)}
 						>
 							{busy ? "Logging in…" : "Log in"}
 						</button>
 					</form>
 				)}
 				{error !== null && (
-					<p role="alert" className="mt-4 text-sm text-red-600 dark:text-red-400">
+					<p role="alert" {...stylex.props(styles.error)}>
 						{errorMessage(error, remaining)}
 					</p>
 				)}

admin/src/features/activity/ActivityDetailPage.test.tsx

@@ -0,0 +1,354 @@
+import { cleanup, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import type { QueryDetail } from "@/lib/types";
+import { provenance } from "@/features/provenance/provenanceFixture";
+import { health } from "@/lib/healthFixture";
+
+function detail(id: number, sections: Parameters<typeof provenance>[0] = {}): QueryDetail {
+	return { id, ...provenance(sections) };
+}
+
+let responses: Record<string, unknown>;
+
+beforeEach(() => {
+	responses = {
+		"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+		"/api/health": health(),
+	};
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL) => {
+			const payload = responses[String(input)];
+			if (payload === undefined) {
+				return new Response(JSON.stringify({ error: "no such query" }), {
+					status: 404,
+					headers: { "content-type": "application/json" },
+				});
+			}
+			return new Response(JSON.stringify(payload), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+function renderDetail(id: number, search = "") {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(
+		createMemoryHistory({ initialEntries: [`/activity/queries/${id}${search}`] }),
+		queryClient,
+	);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return router;
+}
+
+/** The search parameters a link carries, so an assertion states them by name. */
+function hrefSearch(link: HTMLElement): Record<string, string> {
+	const query = link.getAttribute("href")?.split("?")[1] ?? "";
+	return Object.fromEntries(new URLSearchParams(query));
+}
+
+/** The value beside a term, so a section's facts are read as pairs. */
+function factValue(label: string): string {
+	const term = screen.getByText(label);
+	const value = term.nextElementSibling;
+	return value?.textContent ?? "";
+}
+
+/** The line under the domain, which is what a page is read as at a glance. */
+function subtitle(domain: string): string {
+	const heading = screen.getByRole("heading", { name: domain });
+	return heading.nextElementSibling?.textContent ?? "";
+}
+
+test("a blocked query explains itself in the six sections, in pipeline order", async () => {
+	responses["/api/queries/42"] = detail(42, {
+		request: { time: 1_700_000_000, domain: "ads.example", client: "192.0.2.11", qtype: 28, qclass: 1 },
+		group: { id: 3, name: "kids" },
+		policy: {
+			action: "block",
+			reason: "blocklist_wildcard",
+			matched: "||tracker.example^",
+			source_id: 5,
+			source_name: "StevenBlack",
+		},
+		rewrites: { cname_target: "cdn.tracker.example" },
+		route: { kind: "blocked", upstream: "" },
+		response: { rcode: 0, duration_us: 1234 },
+	});
+	renderDetail(42);
+
+	await screen.findByRole("heading", { name: "ads.example" });
+
+	const headings = screen.getAllByRole("heading", { level: 2 }).map((node) => node.textContent);
+	expect(headings).toEqual(["Request", "Group", "Policy", "Rewrites", "Route", "Response", "Related"]);
+
+	expect(factValue("Client")).toBe("192.0.2.11");
+	expect(factValue("Type")).toBe("AAAA");
+	expect(factValue("Class")).toBe("IN (1)");
+	expect(factValue("Name")).toBe("kids");
+	expect(factValue("Id")).toBe("3");
+	expect(factValue("Decision")).toBe("Blocked");
+	expect(factValue("Reason")).toBe("Blocklist (wildcard)");
+	expect(factValue("Matched")).toBe("||tracker.example^");
+	expect(factValue("Blocklist")).toBe("StevenBlack (#5)");
+	expect(factValue("CNAME target")).toBe("cdn.tracker.example");
+	expect(factValue("Answered by")).toBe("Blocked locally");
+	expect(factValue("Upstream")).toBe("No upstream exchange");
+	expect(factValue("Result")).toBe("NOERROR (0)");
+	expect(factValue("Took")).toBe("1.2 ms");
+	// NOERROR is the ordinary case and adds nothing to the verdict.
+	expect(subtitle("ads.example")).toMatch(/ — Blocked$/);
+});
+
+test("an upstream SERVFAIL names the resolver that failed and the code the client saw", async () => {
+	responses["/api/queries/7"] = detail(7, {
+		request: { domain: "news.example" },
+		route: { kind: "upstream", upstream: "https://dns.example/dns-query" },
+		response: { rcode: 2, duration_us: null },
+	});
+	renderDetail(7);
+
+	await screen.findByRole("heading", { name: "news.example" });
+	expect(factValue("Answered by")).toBe("Upstream resolver");
+	expect(factValue("Upstream")).toBe("https://dns.example/dns-query");
+	expect(factValue("Result")).toBe("SERVFAIL (2)");
+	expect(factValue("Took")).toBe("Not measured");
+	// The policy allowed the query; the client still got nothing, and the
+	// headline has to say so rather than reading as a success.
+	expect(subtitle("news.example")).toMatch(/ — Allowed — SERVFAIL \(2\)$/);
+});
+
+test("a forward-zone answer says the matcher never ran, not that nothing matched", async () => {
+	responses["/api/queries/14"] = detail(14, {
+		request: { domain: "nas.lan.home" },
+		policy: { action: "allow", reason: "forward_zone", matched: "" },
+		route: { kind: "forward_zone", forward_zone: "lan.home", upstream: "udp://192.168.1.1:53" },
+	});
+	renderDetail(14);
+
+	await screen.findByRole("heading", { name: "nas.lan.home" });
+	expect(factValue("Reason")).toBe("Forward zone");
+	expect(factValue("Matched")).toBe("The matcher never ran");
+});
+
+test("a query the matcher did evaluate keeps the honest empty verdict", async () => {
+	responses["/api/queries/15"] = detail(15, {
+		policy: { action: "allow", reason: "no_match", matched: "" },
+	});
+	renderDetail(15);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	expect(factValue("Reason")).toBe("No match");
+	expect(factValue("Matched")).toBe("Nothing matched");
+});
+
+test("empty text fields read as absent facts, never as blank values", async () => {
+	responses["/api/queries/8"] = detail(8, {
+		group: { id: null, name: "" },
+		policy: { action: "not_evaluated", reason: "paused", matched: "", source_id: null, source_name: "" },
+		route: { kind: "upstream", forward_zone: "", upstream: "udp://9.9.9.9:53" },
+	});
+	renderDetail(8);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	expect(factValue("Name")).toBe("No group recorded");
+	expect(factValue("Matched")).toBe("The matcher never ran");
+	expect(factValue("Blocklist")).toBe("Not a blocklist decision");
+	expect(factValue("Safe search")).toBe("No rewrite");
+	expect(factValue("Reason")).toBe("Filtering paused");
+});
+
+test("a log with hidden domains renders the server's marker, with nothing invented around it", async () => {
+	responses["/api/queries/9"] = detail(9, {
+		request: { domain: "hidden" },
+		policy: { action: "block", reason: "blocklist_domain", matched: "hidden", source_name: "StevenBlack" },
+		rewrites: { cname_target: "hidden", safe_search_target: "hidden" },
+		route: { kind: "blocked", upstream: "" },
+	});
+	renderDetail(9);
+
+	await screen.findByRole("heading", { name: "hidden" });
+	expect(factValue("Domain")).toBe("hidden");
+	expect(factValue("Matched")).toBe("hidden");
+	expect(factValue("CNAME target")).toBe("hidden");
+	expect(factValue("Safe search")).toBe("hidden");
+	// The client is governed by its own flag and stays visible here.
+	expect(factValue("Client")).toBe("192.0.2.10");
+});
+
+test("the related actions carry absolute bounds around the query, and the domain into the simulation", async () => {
+	responses["/api/queries/11"] = detail(11, {
+		request: { time: 1_700_000_000, domain: "shop.example", client: "192.0.2.12" },
+	});
+	renderDetail(11);
+
+	await screen.findByRole("heading", { name: "shop.example" });
+	const related = screen.getByRole("heading", { name: "Related" }).parentElement!;
+	expect(
+		within(related)
+			.getByRole("link", { name: /Test this domain/ })
+			.getAttribute("href"),
+	).toBe("/activity/test?domain=shop.example");
+	// No origin bound at all: five minutes either side of the query itself.
+	expect(hrefSearch(within(related).getByRole("link", { name: "All activity for this domain" }))).toEqual({
+		mode: "history",
+		domain: "shop.example",
+		since: "1699999700",
+		until: "1700000300",
+	});
+	expect(hrefSearch(within(related).getByRole("link", { name: "All activity from this client" }))).toEqual({
+		mode: "history",
+		client: "192.0.2.12",
+		since: "1699999700",
+		until: "1700000300",
+	});
+	// The diagnostics window is the query's own moment, never the origin's.
+	expect(hrefSearch(within(related).getByRole("link", { name: /Diagnostics around/ }))).toEqual({
+		since: "1699999700",
+		until: "1700000300",
+	});
+});
+
+test("an origin bound wins over the default window, one bound at a time", async () => {
+	responses["/api/queries/17"] = detail(17, {
+		request: { time: 1_700_000_000, domain: "shop.example", client: "192.0.2.12" },
+	});
+	renderDetail(17, "?mode=history&since=1600000000");
+
+	await screen.findByRole("heading", { name: "shop.example" });
+	const related = screen.getByRole("heading", { name: "Related" }).parentElement!;
+	const link = hrefSearch(within(related).getByRole("link", { name: "All activity for this domain" }));
+	expect(link["since"]).toBe("1600000000");
+	expect(link["until"]).toBe("1700000300");
+});
+
+test("both origin bounds carry through untouched", async () => {
+	responses["/api/queries/18"] = detail(18, { request: { time: 1_700_000_000, domain: "shop.example" } });
+	renderDetail(18, "?mode=history&since=1600000000&until=1600000060");
+
+	await screen.findByRole("heading", { name: "shop.example" });
+	const related = screen.getByRole("heading", { name: "Related" }).parentElement!;
+	const link = hrefSearch(within(related).getByRole("link", { name: "All activity for this domain" }));
+	expect(link["since"]).toBe("1600000000");
+	expect(link["until"]).toBe("1600000060");
+});
+
+test("the back link restores the investigation the reader came from", async () => {
+	responses["/api/queries/19"] = detail(19, { request: { domain: "shop.example" } });
+	renderDetail(19, "?mode=history&domain=shop&since=1600000000&blocked=true");
+
+	await screen.findByRole("heading", { name: "shop.example" });
+	expect(hrefSearch(screen.getByRole("link", { name: "← Activity" }))).toEqual({
+		mode: "history",
+		domain: "shop",
+		since: "1600000000",
+		blocked: "true",
+	});
+});
+
+function clientList(client: { ip: string; name: string; learned_name: string }) {
+	return {
+		clients: [
+			{
+				id: 1,
+				group_id: 1,
+				group: "default",
+				hand_edited: client.name !== "",
+				first_seen: 1_700_000_000,
+				last_seen: 1_700_000_100,
+				...client,
+			},
+		],
+	};
+}
+
+/** The related section, whose text is read whole because it is prose, not facts. */
+async function relatedText(expected: string) {
+	const related = screen.getByRole("heading", { name: "Related" }).parentElement!;
+	await waitFor(() => expect(related.textContent?.replace(/\s+/g, " ")).toContain(expected));
+}
+
+test("the record keeps the address the query came from, and Related carries the name it has now", async () => {
+	responses["/api/queries/12"] = detail(12, { request: { domain: "shop.example", client: "192.0.2.12" } });
+	responses["/api/clients"] = clientList({ ip: "192.0.2.12", name: "Kids iPad", learned_name: "ipad.lan" });
+	renderDetail(12);
+
+	await screen.findByRole("heading", { name: "shop.example" });
+	await relatedText("The client list currently names 192.0.2.12 “Kids iPad”.");
+	expect(factValue("Client")).toBe("192.0.2.12");
+});
+
+test("a learned name is told as the reverse-DNS lookup it is, never as a recorded fact", async () => {
+	responses["/api/queries/13"] = detail(13, { request: { client: "192.0.2.13" } });
+	responses["/api/clients"] = clientList({ ip: "192.0.2.13", name: "", learned_name: "printer.lan" });
+	renderDetail(13);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	await relatedText("Reverse DNS currently resolves 192.0.2.13 to printer.lan.");
+	expect(factValue("Client")).toBe("192.0.2.13");
+});
+
+test("a row retention has pruned explains the 404 and keeps the way back to the log", async () => {
+	renderDetail(404, "?mode=history&domain=gone");
+
+	await screen.findByRole("alert");
+	expect(screen.getByText(/no such query/)).toBeTruthy();
+	expect(hrefSearch(screen.getByRole("link", { name: "← Activity" }))).toEqual({
+		mode: "history",
+		domain: "gone",
+	});
+});
+
+/**
+ * The related-actions region of a query detail. Scoped on purpose: the sidebar
+ * carries a Pause of its own, and this is the one that answers "this query was
+ * blocked and should not have been".
+ */
+function related(): HTMLElement {
+	return screen.getByRole("region", { name: "Related" });
+}
+
+test("a blocked query's Related offers Pause; an allowed one has nothing to pause about", async () => {
+	responses["/api/queries/50"] = detail(50, {
+		policy: { action: "block", reason: "blocklist_domain", matched: "ads.example" },
+		route: { kind: "blocked", upstream: "" },
+	});
+	renderDetail(50);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	await waitFor(() => expect(within(related()).getByRole("button", { name: "Pause" })).toBeTruthy());
+
+	cleanup();
+	responses["/api/queries/51"] = detail(51, { policy: { action: "allow", reason: "no_match", matched: "" } });
+	renderDetail(51);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	expect(within(related()).queryByRole("button", { name: "Pause" })).toBeNull();
+});
+
+test("the Pause action stays away while protection is unavailable", async () => {
+	responses["/api/health"] = health({ protection: { state: "unavailable", until: null } });
+	responses["/api/queries/52"] = detail(52, {
+		policy: { action: "block", reason: "blocklist_domain", matched: "ads.example" },
+		route: { kind: "blocked", upstream: "" },
+	});
+	renderDetail(52);
+
+	await screen.findByRole("heading", { name: "example.com" });
+	await waitFor(() => expect(screen.getByText("Diagnostics around this query")).toBeTruthy());
+	expect(within(related()).queryByRole("button", { name: "Pause" })).toBeNull();
+});

admin/src/features/activity/ActivityDetailPage.tsx

@@ -0,0 +1,83 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link, useParams, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { queryDetailQuery } from "@/lib/queries";
+import type { QueryDetail } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import ProvenanceDetail from "./ProvenanceDetail";
+import RelatedActions from "./RelatedActions";
+import type { ActivitySearch } from "./search";
+
+const styles = stylex.create({
+	back: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	loading: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+});
+
+/**
+ * The way back to the investigation, not to a bare list. The originating
+ * Activity search rides in this route's own search, so the reader returns to
+ * the mode, the filters and the absolute window they left — a plain `/activity`
+ * would silently widen the range they had chosen.
+ */
+function BackLink({ origin }: { origin: ActivitySearch }) {
+	return (
+		<Link to="/activity" search={origin} {...stylex.props(styles.back, shared.focusRing)}>
+			← Activity
+		</Link>
+	);
+}
+
+export default function ActivityDetailPage() {
+	const { id } = useParams({ from: "/shell/activity/queries/$id" });
+	const origin = useSearch({ from: "/shell/activity/queries/$id" });
+	const rowId = Number(id);
+	const { data, error, isPending, refetch } = useQuery(queryDetailQuery(rowId));
+
+	if (isPending) {
+		return (
+			<p {...stylex.props(styles.loading, shared.pulse)} role="status">
+				Loading query…
+			</p>
+		);
+	}
+	if (data === undefined) {
+		return (
+			<section>
+				<BackLink origin={origin} />
+				<InlineError error={error} onRetry={() => void refetch()} />
+			</section>
+		);
+	}
+
+	const detail: QueryDetail = data;
+	const { domain, client, time } = detail.request;
+
+	return (
+		<section>
+			<BackLink origin={origin} />
+			<ProvenanceDetail
+				provenance={detail}
+				persistedId={detail.id}
+				relatedActions={
+					<RelatedActions
+						domain={domain}
+						client={client}
+						ts={time}
+						origin={origin}
+						blocked={detail.policy.action === "block"}
+					/>
+				}
+			/>
+		</section>
+	);
+}

admin/src/features/activity/ActivityFilters.tsx

@@ -0,0 +1,230 @@
+/**
+ * The filter row over the Activity table.
+ *
+ * The applied state is the URL, never this form: what the reader sees is what
+ * the link they can paste to a housemate will show. So this holds a draft only,
+ * and the page remounts it whenever the applied search changes — a back button
+ * or a pasted URL has to move the form with it, and a form that seeded itself
+ * once would keep showing the previous investigation's filters.
+ *
+ * In live mode the row stays visible and disabled rather than disappearing: the
+ * filters are retained in the URL and apply again the moment history comes
+ * back, and hiding them would read as having lost them. The stream itself is
+ * unfiltered — the server sends every query — so a row that looked usable here
+ * would promise filtering that is not happening.
+ */
+
+import { useState, type FormEvent } from "react";
+import * as stylex from "@stylexjs/stylex";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { datetimeField, editDatetimeField, resolveDatetimeField, type DatetimeField } from "./datetime";
+import type { ActivitySearch } from "./search";
+
+const STATUS_OPTIONS = [
+	{ value: "any", label: "All" },
+	{ value: "blocked", label: "Blocked only" },
+	{ value: "allowed", label: "Allowed only" },
+];
+
+const styles = stylex.create({
+	/** One column on a phone, two from `sm`, five from `lg`. */
+	grid: {
+		marginTop: "1rem",
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
+			"@media (min-width: 1024px)": "repeat(5, minmax(0, 1fr))",
+		},
+	},
+	label: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	input: {
+		marginTop: "0.25rem",
+		width: "100%",
+		// A disabled native input keeps its value legible but reads as inert,
+		// matching what RAC does to the Select trigger beside it.
+		cursor: { default: null, ":disabled": "not-allowed" },
+		opacity: { default: null, ":disabled": 0.55 },
+	},
+	buttonRow: {
+		display: "flex",
+		alignItems: "flex-end",
+		gap: "0.5rem",
+		gridColumn: {
+			default: null,
+			"@media (min-width: 640px)": "span 2 / span 2",
+			"@media (min-width: 1024px)": "span 5 / span 5",
+		},
+	},
+	toolbarButton: {
+		fontWeight: 500,
+	},
+	error: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+});
+
+/** The applied filters, with `mode` left to the page that owns the switch. */
+export type AppliedFilters = Omit<ActivitySearch, "mode">;
+
+/** Every filter off — what Clear applies, and the loader's empty-filter case. */
+export const NO_FILTERS: AppliedFilters = {
+	domain: undefined,
+	client: undefined,
+	blocked: undefined,
+	since: undefined,
+	until: undefined,
+};
+
+function blockedOption(blocked: boolean | undefined): string {
+	if (blocked === undefined) return "any";
+	return blocked ? "blocked" : "allowed";
+}
+
+function optionBlocked(value: string): boolean | undefined {
+	if (value === "blocked") return true;
+	return value === "allowed" ? false : undefined;
+}
+
+function boundError(label: string, reason: "unparseable" | "nonexistent"): string {
+	return reason === "unparseable"
+		? `${label} is not a complete date and time.`
+		: `${label} names a local time that does not exist — the clock jumps over it for daylight saving.`;
+}
+
+interface Props {
+	applied: AppliedFilters;
+	isDisabled: boolean;
+	onApply: (filters: AppliedFilters) => void;
+	onClear: () => void;
+}
+
+export default function ActivityFilters({ applied, isDisabled, onApply, onClear }: Props) {
+	const [domain, setDomain] = useState(applied.domain ?? "");
+	const [client, setClient] = useState(applied.client ?? "");
+	const [blocked, setBlocked] = useState(blockedOption(applied.blocked));
+	const [since, setSince] = useState<DatetimeField>(() => datetimeField(applied.since));
+	const [until, setUntil] = useState<DatetimeField>(() => datetimeField(applied.until));
+	const [error, setError] = useState<string | null>(null);
+
+	function submit(event: FormEvent) {
+		event.preventDefault();
+		const sinceValue = resolveDatetimeField(since);
+		if (!sinceValue.ok) {
+			setError(boundError("Since", sinceValue.reason));
+			return;
+		}
+		const untilValue = resolveDatetimeField(until);
+		if (!untilValue.ok) {
+			setError(boundError("Until", untilValue.reason));
+			return;
+		}
+		setError(null);
+		onApply({
+			domain: domain.trim() === "" ? undefined : domain.trim(),
+			client: client.trim() === "" ? undefined : client.trim(),
+			blocked: optionBlocked(blocked),
+			since: sinceValue.value,
+			until: untilValue.value,
+		});
+	}
+
+	function clear() {
+		setDomain("");
+		setClient("");
+		setBlocked("any");
+		setSince(datetimeField(undefined));
+		setUntil(datetimeField(undefined));
+		setError(null);
+		onClear();
+	}
+
+	return (
+		<>
+			<form onSubmit={submit} {...stylex.props(styles.grid)}>
+				<label {...stylex.props(styles.label)}>
+					Domain contains
+					<input
+						type="text"
+						value={domain}
+						disabled={isDisabled}
+						onChange={(event) => setDomain(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.input, shared.focusRing)}
+					/>
+				</label>
+				<label {...stylex.props(styles.label)}>
+					Client (exact)
+					<input
+						type="text"
+						value={client}
+						disabled={isDisabled}
+						onChange={(event) => setClient(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.input, shared.focusRing)}
+					/>
+				</label>
+				<Select
+					variant="compactField"
+					label="Result"
+					value={blocked}
+					isDisabled={isDisabled}
+					onChange={setBlocked}
+					options={STATUS_OPTIONS}
+				/>
+				<label {...stylex.props(styles.label)}>
+					Since
+					<input
+						type="datetime-local"
+						step={1}
+						value={since.text}
+						disabled={isDisabled}
+						onChange={(event) => setSince(editDatetimeField(since, event.target.value))}
+						{...stylex.props(shared.smallInput, styles.input, shared.focusRing)}
+					/>
+				</label>
+				<label {...stylex.props(styles.label)}>
+					Until
+					<input
+						type="datetime-local"
+						step={1}
+						value={until.text}
+						disabled={isDisabled}
+						onChange={(event) => setUntil(editDatetimeField(until, event.target.value))}
+						{...stylex.props(shared.smallInput, styles.input, shared.focusRing)}
+					/>
+				</label>
+				<div {...stylex.props(styles.buttonRow)}>
+					<button
+						type="submit"
+						disabled={isDisabled}
+						{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
+					>
+						Apply filters
+					</button>
+					<button
+						type="button"
+						onClick={clear}
+						disabled={isDisabled}
+						{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
+					>
+						Clear
+					</button>
+				</div>
+			</form>
+			{error !== null && (
+				<p role="alert" {...stylex.props(styles.error)}>
+					{error}
+				</p>
+			)}
+		</>
+	);
+}

admin/src/features/activity/ActivityPage.test.tsx

@@ -0,0 +1,557 @@
+/**
+ * Activity in history mode, through the real router: the URL is the applied
+ * state, so nothing here can be checked by rendering the page on its own.
+ */
+
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import { health } from "@/lib/healthFixture";
+import type { Client, Coverage, QueriesPage, QueryRow } from "@/lib/types";
+import { queryRow } from "@/features/provenance/provenanceFixture";
+
+function client(id: number, ip: string, name: string, learnedName: string): Client {
+	return {
+		id,
+		ip,
+		name,
+		learned_name: learnedName,
+		group_id: 1,
+		group: "default",
+		hand_edited: name !== "",
+		first_seen: 1_700_000_000,
+		last_seen: 1_700_000_100,
+	};
+}
+
+const CLIENTS: Client[] = [
+	client(1, "192.0.2.10", "Kitchen Pi", "pi.lan"),
+	client(2, "192.0.2.11", "", "laptop.lan"),
+	client(3, "192.0.2.12", "", ""),
+];
+
+function row(id: number, domain: string, overrides: Partial<QueryRow> = {}): QueryRow {
+	return queryRow(id, { ts: 1_700_000_000 + id, domain, upstream: "udp://9.9.9.9:53", ...overrides });
+}
+
+const COMPLETE: Coverage = { complete: true, available_since: 1_600_000_000 };
+
+/** The blocked row every page fixture reuses. */
+const BLOCKED = {
+	blocked: true,
+	policy_action: "block",
+	policy_reason: "blocklist_wildcard",
+	route_kind: "blocked",
+	upstream: "",
+} as const satisfies Partial<QueryRow>;
+
+const PAGES: Record<string, QueriesPage> = {
+	"/api/queries": {
+		queries: [
+			row(20, "first.example", { qtype: 65, cache_hit: true, route_kind: "cache" }),
+			row(19, "ads.example", { ...BLOCKED, response_time_us: null, cache_hit: null }),
+		],
+		next_before: 19,
+		coverage: COMPLETE,
+	},
+	"/api/queries?before=19": {
+		queries: [row(5, "older.example")],
+		next_before: null,
+		coverage: COMPLETE,
+	},
+	"/api/queries?domain=ads": {
+		queries: [row(19, "ads.example", BLOCKED)],
+		next_before: null,
+		coverage: COMPLETE,
+	},
+	"/api/queries?domain=ads&blocked=true": {
+		queries: [row(19, "ads.example", BLOCKED)],
+		next_before: null,
+		coverage: COMPLETE,
+	},
+	"/api/queries?since=1700000000": {
+		queries: [row(20, "first.example")],
+		next_before: null,
+		coverage: COMPLETE,
+	},
+};
+
+let fetchMock: ReturnType<typeof vi.fn>;
+
+function json(payload: unknown): Response {
+	return new Response(JSON.stringify(payload), { status: 200, headers: { "content-type": "application/json" } });
+}
+
+const VERSION = { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 };
+
+/** The shell's own requests, which every test serves the same way. */
+function stubFetch(handler: (url: string) => Response | Promise<Response>) {
+	fetchMock = vi.fn((input: RequestInfo | URL) => {
+		const url = String(input);
+		if (url === "/api/version") return Promise.resolve(json(VERSION));
+		// The shell reads health on every route for the Diagnostics nav badge.
+		if (url === "/api/health") return Promise.resolve(json(health()));
+		return Promise.resolve(handler(url));
+	});
+	vi.stubGlobal("fetch", fetchMock);
+}
+
+function fromPages(url: string): Response {
+	if (url === "/api/clients") return json({ clients: CLIENTS });
+	const payload = PAGES[url];
+	if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+	return json(payload);
+}
+
+beforeEach(() => {
+	stubFetch(fromPages);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderPage(path = "/activity") {
+	const queryClient = createQueryClient();
+	const history = createMemoryHistory({ initialEntries: [path] });
+	const router = createAppRouter(history, queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return { queryClient, history };
+}
+
+/** Every `/api/queries` URL the run asked for, list pages only. */
+function queryCalls(): string[] {
+	return fetchMock.mock.calls
+		.map((call) => String(call[0]))
+		.filter((url) => url === "/api/queries" || url.startsWith("/api/queries?"));
+}
+
+test("renders the first page with the seven columns filled in", async () => {
+	renderPage();
+	await screen.findByText("first.example");
+
+	expect(screen.getAllByRole("columnheader").map((header) => header.textContent)).toEqual([
+		"Time",
+		"Domain",
+		"Client",
+		"Type",
+		"Result",
+		"Route",
+		"Duration",
+	]);
+	const first = screen.getByText("first.example").closest("tr")!;
+	expect(within(first).getByText("HTTPS")).toBeTruthy();
+	expect(within(first).getByText("NOERROR")).toBeTruthy();
+	expect(within(first).getByText("Cache")).toBeTruthy();
+	expect(within(first).getByText("1.2 ms")).toBeTruthy();
+
+	const blocked = screen.getByText("ads.example").closest("tr")!;
+	// The Result cell says Blocked even though the client saw NOERROR, and the
+	// Route cell says how: this is the pair the old Status column could not show.
+	expect(within(blocked).getAllByText("Blocked")).toHaveLength(2);
+	expect(within(blocked).getByText("—")).toBeTruthy();
+	expect(screen.getByText(/Showing 2 queries/)).toBeTruthy();
+});
+
+test("resolves each row's client to its display name, keeping the IP as the tooltip", async () => {
+	stubFetch((url) => {
+		if (url === "/api/clients") return json({ clients: CLIENTS });
+		if (url !== "/api/queries") return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+		return json({
+			queries: [
+				row(20, "named.example", { client_ip: "192.0.2.10" }),
+				row(19, "learned.example", { client_ip: "192.0.2.11" }),
+				row(18, "nameless.example", { client_ip: "192.0.2.12" }),
+				row(17, "stranger.example", { client_ip: "192.0.2.99" }),
+			],
+			next_before: null,
+			coverage: COMPLETE,
+		} satisfies QueriesPage);
+	});
+
+	renderPage();
+
+	// A hand-typed name wins outright; the learned name never surfaces for it.
+	const named = await screen.findByText("Kitchen Pi");
+	expect(named.getAttribute("title")).toBe("192.0.2.10");
+	expect(screen.queryByText("pi.lan")).toBeNull();
+
+	// A learned name reads muted and nothing more here: the "learned" tag would
+	// repeat on every row of the table, so the Clients page carries it instead.
+	const learned = screen.getByText("laptop.lan");
+	expect(learned.getAttribute("title")).toBe("192.0.2.11");
+	expect(within(learned.closest("tr")!).queryByText("learned")).toBeNull();
+
+	// A known client with neither name, and a client the loaded list has never
+	// seen, both fall back to the bare address with no tooltip standing in.
+	expect(screen.getByText("192.0.2.12").getAttribute("title")).toBeNull();
+	expect(screen.getByText("192.0.2.99").getAttribute("title")).toBeNull();
+});
+
+test("load more appends the next page and stops at the end of the log", async () => {
+	renderPage();
+	await screen.findByText("first.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+	await screen.findByText("older.example");
+
+	expect(screen.getByText("first.example")).toBeTruthy();
+	expect(screen.getByText(/Showing 3 queries — end of log/)).toBeTruthy();
+	expect(screen.queryByRole("button", { name: "Load more" })).toBeNull();
+});
+
+test("applying a filter puts it in the url, refetches, and resets the accumulated list", async () => {
+	const { history } = renderPage();
+	await screen.findByText("first.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+	await screen.findByText("older.example");
+
+	fireEvent.change(screen.getByLabelText("Domain contains"), { target: { value: "ads" } });
+	fireEvent.click(screen.getByRole("button", { name: "Apply filters" }));
+
+	await screen.findByText(/Showing 1 query /);
+	expect(history.location.search).toContain("domain=ads");
+	expect(screen.getByText("ads.example")).toBeTruthy();
+	expect(screen.queryByText("first.example")).toBeNull();
+	expect(screen.queryByText("older.example")).toBeNull();
+});
+
+test("a load-more that resolves after a filter change is discarded", async () => {
+	let releaseLoadMore: () => void = () => {};
+	stubFetch((url) => {
+		if (url === "/api/queries?before=19") {
+			return new Promise<Response>((resolve) => {
+				releaseLoadMore = () => resolve(json(PAGES["/api/queries?before=19"]));
+			});
+		}
+		return fromPages(url);
+	});
+
+	renderPage();
+	await screen.findByText("first.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+
+	fireEvent.change(screen.getByLabelText("Domain contains"), { target: { value: "ads" } });
+	fireEvent.click(screen.getByRole("button", { name: "Apply filters" }));
+	await screen.findByText(/Showing 1 query /);
+
+	releaseLoadMore();
+	await act(async () => {
+		await new Promise((resolve) => setTimeout(resolve, 0));
+	});
+
+	expect(screen.queryByText("older.example")).toBeNull();
+	expect(screen.getByText(/Showing 1 query /)).toBeTruthy();
+	expect(screen.queryByRole("alert")).toBeNull();
+});
+
+test("load more is disabled while a filter change shows placeholder data, then uses the fresh cursor", async () => {
+	let releaseFiltered: () => void = () => {};
+	const filteredPage: QueriesPage = {
+		queries: [row(19, "ads.example", BLOCKED)],
+		next_before: 7,
+		coverage: COMPLETE,
+	};
+	const filteredOlderPage: QueriesPage = {
+		queries: [row(3, "ads.older.example")],
+		next_before: null,
+		coverage: COMPLETE,
+	};
+	stubFetch((url) => {
+		if (url === "/api/queries?domain=ads") {
+			return new Promise<Response>((resolve) => {
+				releaseFiltered = () => resolve(json(filteredPage));
+			});
+		}
+		if (url === "/api/queries?domain=ads&before=7") return json(filteredOlderPage);
+		return fromPages(url);
+	});
+
+	renderPage();
+	await screen.findByText("first.example");
+
+	fireEvent.change(screen.getByLabelText("Domain contains"), { target: { value: "ads" } });
+	fireEvent.click(screen.getByRole("button", { name: "Apply filters" }));
+
+	const staleButton = await screen.findByRole("button", { name: "Load more" });
+	expect(staleButton).toHaveProperty("disabled", true);
+	fireEvent.click(staleButton);
+	expect(queryCalls()).not.toContain("/api/queries?domain=ads&before=19");
+
+	releaseFiltered();
+	await waitFor(() => {
+		expect(screen.queryByText("first.example")).toBeNull();
+	});
+
+	const freshButton = screen.getByRole("button", { name: "Load more" });
+	expect(freshButton).toHaveProperty("disabled", false);
+	fireEvent.click(freshButton);
+	await screen.findByText("ads.older.example");
+
+	expect(queryCalls()).toContain("/api/queries?domain=ads&before=7");
+	expect(screen.getByText(/Showing 2 queries — end of log/)).toBeTruthy();
+});
+
+test("a background refetch after new rows arrive leaves no gap between the loaded pages", async () => {
+	// The newest-100 window moves up while the reader has a second page open.
+	// Refetching only the first page would drop n20 and n19 out of the middle
+	// of the table; the second page must be replayed from the fresh cursor.
+	const before: Record<string, QueriesPage> = {
+		"/api/queries": {
+			queries: [row(20, "n20.example"), row(19, "n19.example")],
+			next_before: 19,
+			coverage: COMPLETE,
+		},
+		"/api/queries?before=19": {
+			queries: [row(18, "n18.example"), row(17, "n17.example")],
+			next_before: null,
+			coverage: COMPLETE,
+		},
+	};
+	const after: Record<string, QueriesPage> = {
+		"/api/queries": {
+			queries: [row(22, "n22.example"), row(21, "n21.example")],
+			next_before: 21,
+			coverage: COMPLETE,
+		},
+		"/api/queries?before=21": {
+			queries: [row(20, "n20.example"), row(19, "n19.example"), row(18, "n18.example"), row(17, "n17.example")],
+			next_before: null,
+			coverage: COMPLETE,
+		},
+	};
+	let live = before;
+	stubFetch((url) => {
+		const payload = live[url];
+		if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+		return json(payload);
+	});
+
+	const { queryClient } = renderPage();
+	await screen.findByText("n20.example");
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+	await screen.findByText("n17.example");
+
+	live = after;
+	await act(async () => {
+		await queryClient.invalidateQueries({ queryKey: ["queries"] });
+	});
+
+	await screen.findByText("n22.example");
+	const shown = screen.getAllByText(/^n\d+\.example$/).map((cell) => cell.textContent);
+	expect(shown).toEqual(["n22.example", "n21.example", "n20.example", "n19.example", "n18.example", "n17.example"]);
+	expect(screen.getByText(/Showing 6 queries — end of log/)).toBeTruthy();
+});
+
+test("a 401 on load more routes through handleUnauthorized instead of the inline error", async () => {
+	const assign = vi.fn();
+	vi.stubGlobal("location", { pathname: "/activity", search: "", assign });
+	stubFetch((url) => {
+		if (url === "/api/queries?before=19") {
+			return new Response(JSON.stringify({ error: "unauthorized" }), {
+				status: 401,
+				headers: { "content-type": "application/json" },
+			});
+		}
+		return fromPages(url);
+	});
+
+	renderPage();
+	await screen.findByText("first.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+	await waitFor(() => {
+		expect(assign).toHaveBeenCalledWith(`/login?redirect=${encodeURIComponent("/activity")}`);
+	});
+
+	expect(screen.queryByRole("alert")).toBeNull();
+	expect(screen.queryByText(/Failed to load more/)).toBeNull();
+});
+
+test("each row links into its own detail page, carrying the investigation with it", async () => {
+	renderPage("/activity?mode=history&since=1700000000");
+	await screen.findByText("first.example");
+
+	const link = screen.getByRole("link", { name: "first.example" });
+	expect(link.getAttribute("href")).toContain("/activity/queries/20");
+	expect(link.getAttribute("href")).toContain("since=1700000000");
+	// An <a href> is in the tab order by default; nothing here may opt it out.
+	expect(link.getAttribute("tabindex")).toBeNull();
+});
+
+test("a pruned window tells the reader when history starts", async () => {
+	stubFetch((url) => {
+		if (url === "/api/clients") return json({ clients: CLIENTS });
+		if (url !== "/api/queries") return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+		return json({
+			queries: [row(20, "kept.example")],
+			next_before: null,
+			coverage: { complete: false, available_since: 1_700_000_000 },
+		} satisfies QueriesPage);
+	});
+	renderPage();
+
+	await screen.findByText("kept.example");
+	expect(screen.getByText(/Query history is available from/)).toBeTruthy();
+});
+
+test("a complete window shows no coverage notice", async () => {
+	renderPage();
+	await screen.findByText("first.example");
+	expect(screen.queryByText(/Query history is available from/)).toBeNull();
+});
+
+test("a ?domain= link seeds the filter form and fetches that domain on arrival", async () => {
+	renderPage("/activity?domain=ads");
+
+	await screen.findByText("ads.example");
+	expect(screen.getByLabelText("Domain contains")).toHaveProperty("value", "ads");
+	expect(screen.queryByText("first.example")).toBeNull();
+});
+
+test("history forwards exactly the six normalized filter fields and nothing else", async () => {
+	stubFetch((url) => {
+		if (url === "/api/clients") return json({ clients: CLIENTS });
+		return json({ queries: [], next_before: null, coverage: COMPLETE } satisfies QueriesPage);
+	});
+	renderPage(
+		"/activity?mode=history&domain=%20ads%20&client=192.0.2.5&blocked=true&since=1700000000&until=1700000600&bogus=1&limit=9999",
+	);
+
+	await screen.findByText("No queries match the current filters.");
+	expect(queryCalls()).toEqual([
+		"/api/queries?domain=ads&client=192.0.2.5&blocked=true&since=1700000000&until=1700000600",
+	]);
+});
+
+test("a rejected search parameter is dropped rather than guessed at", async () => {
+	renderPage("/activity?since=1.5&blocked=%22true%22&domain=%20%20");
+
+	await screen.findByText("first.example");
+	// Nothing survived validation, so the request is the unfiltered one.
+	expect(queryCalls()).toEqual(["/api/queries"]);
+	expect(screen.getByLabelText("Domain contains")).toHaveProperty("value", "");
+});
+
+test("the form draft follows the url back and forward, seconds included", async () => {
+	stubFetch((url) => {
+		if (url === "/api/clients") return json({ clients: CLIENTS });
+		return json({ queries: [], next_before: null, coverage: COMPLETE } satisfies QueriesPage);
+	});
+	// A bound with non-zero seconds: the round trip has to keep them, and the
+	// untouched field has to carry the original number rather than re-parse.
+	const seeded = 1_700_000_017;
+	const { history } = renderPage(`/activity?mode=history&domain=first&since=${seeded}`);
+
+	const domainInput = await screen.findByLabelText("Domain contains");
+	expect(domainInput).toHaveProperty("value", "first");
+	const sinceInput = screen.getByLabelText("Since") as HTMLInputElement;
+	expect(sinceInput.value).toContain(":37");
+
+	fireEvent.change(domainInput, { target: { value: "second" } });
+	fireEvent.click(screen.getByRole("button", { name: "Apply filters" }));
+	await waitFor(() => expect(history.location.search).toContain("domain=second"));
+	// The untouched Since bound applied as the exact second it was seeded with.
+	expect(queryCalls()).toContain(`/api/queries?domain=second&since=${seeded}`);
+
+	act(() => history.back());
+	await waitFor(() => {
+		expect(screen.getByLabelText("Domain contains")).toHaveProperty("value", "first");
+	});
+
+	act(() => history.forward());
+	await waitFor(() => {
+		expect(screen.getByLabelText("Domain contains")).toHaveProperty("value", "second");
+	});
+});
+
+/** 2 a.m. on the EU spring-forward date: an hour that exists in some zones and not others. */
+const DST_WALL_TIME = "2026-03-29T02:30:00";
+
+/**
+ * Whether that wall time names an instant in the timezone the suite runs in.
+ * `new Date` slides a spring-forward gap silently forward, so an hour or minute
+ * that comes back different from the one written *is* the gap.
+ */
+function wallTimeExists(text: string): boolean {
+	const written = /T(\d{2}):(\d{2})/.exec(text)!;
+	const parsed = new Date(text);
+	return parsed.getHours() === Number(written[1]) && parsed.getMinutes() === Number(written[2]);
+}
+
+test("a wall-clock time the daylight-saving jump skips is refused, not silently moved", async () => {
+	// One expected outcome per timezone, decided here rather than accepted from
+	// the page: in a zone with the jump the bound must be refused outright, and
+	// in a zone without it the same text is an ordinary instant that applies.
+	const inGap = !wallTimeExists(DST_WALL_TIME);
+	const unix = Math.floor(new Date(DST_WALL_TIME).getTime() / 1000);
+	stubFetch((url) => {
+		if (url === `/api/queries?since=${unix}`) {
+			return json({ queries: [], next_before: null, coverage: COMPLETE } satisfies QueriesPage);
+		}
+		return fromPages(url);
+	});
+
+	const { history } = renderPage();
+	await screen.findByText("first.example");
+	const callsBefore = queryCalls().length;
+	const searchBefore = history.location.search;
+
+	fireEvent.change(screen.getByLabelText("Since"), { target: { value: DST_WALL_TIME } });
+	fireEvent.click(screen.getByRole("button", { name: "Apply filters" }));
+
+	if (inGap) {
+		expect(screen.getByRole("alert").textContent).toContain("daylight saving");
+		// Refused means refused: no navigation, and no request for the hour the
+		// operator did not ask for.
+		expect(history.location.search).toBe(searchBefore);
+		expect(queryCalls()).toHaveLength(callsBefore);
+		return;
+	}
+
+	await waitFor(() => expect(history.location.search).toContain(`since=${unix}`));
+	expect(queryCalls()).toContain(`/api/queries?since=${unix}`);
+	expect(screen.queryByRole("alert")).toBeNull();
+});
+
+test("the policy simulation is reachable from the header, with no rows to click through", async () => {
+	stubFetch((url) => {
+		if (url === "/api/clients") return json({ clients: CLIENTS });
+		if (url === "/api/groups") return json({ groups: [{ id: 1, name: "default", safe_search: false }] });
+		return json({ queries: [], next_before: null, coverage: COMPLETE } satisfies QueriesPage);
+	});
+
+	const { history } = renderPage();
+	// An empty log is exactly the case a row-borne link cannot serve.
+	await screen.findByText("No queries logged yet.");
+
+	const link = screen.getByRole("link", { name: "Current policy simulation" });
+	expect(link.getAttribute("href")).toBe("/activity/test");
+
+	fireEvent.click(link);
+	await screen.findByRole("heading", { level: 1, name: "Current policy simulation" });
+	expect(history.location.pathname).toBe("/activity/test");
+});
+
+test("Clear empties the url as well as the form", async () => {
+	const { history } = renderPage("/activity?mode=history&domain=ads&blocked=true");
+	await screen.findByText("ads.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+	await waitFor(() => {
+		expect(history.location.search).not.toContain("domain");
+	});
+	expect(history.location.search).not.toContain("blocked");
+	expect(screen.getByLabelText("Domain contains")).toHaveProperty("value", "");
+});

admin/src/features/activity/ActivityPage.tsx

@@ -0,0 +1,152 @@
+/**
+ * Activity: one surface over the queries nxdns answered, in two modes.
+ *
+ * History reads the persisted log and Live reads the stream, but they are the
+ * same seven columns over the same filters, and the reader moves between them
+ * without losing the question they were asking. The mode lives in the URL with
+ * the filters, so an investigation is one link — including which half of it the
+ * recipient should be looking at.
+ */
+
+import { Link, useNavigate, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import ActivityFilters, { NO_FILTERS, type AppliedFilters } from "./ActivityFilters";
+import HistoryActivity from "./HistoryActivity";
+import LiveActivity from "./LiveActivity";
+import type { ActivityMode } from "./search";
+
+const MODES: ReadonlyArray<{ mode: ActivityMode; label: string }> = [
+	{ mode: "history", label: "History" },
+	{ mode: "live", label: "Live" },
+];
+
+const styles = stylex.create({
+	header: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	switch: {
+		display: "flex",
+		gap: "0.25rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "0.125rem",
+	},
+	modeButton: {
+		borderStyle: "none",
+		borderRadius: "0.1875rem",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		cursor: "pointer",
+	},
+	modeIdle: {
+		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
+		color: { default: colors.textSecondary, ":hover": colors.text },
+	},
+	/** The selected mode reads as a filled chip, the same weight the nav uses. */
+	modeSelected: {
+		backgroundColor: colors.primary,
+		color: colors.primaryText,
+	},
+	/** The one way into the simulation from here, so it cannot sit behind a row. */
+	simulationLink: {
+		marginInlineStart: "auto",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	liveNote: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+});
+
+export default function ActivityPage() {
+	const search = useSearch({ from: "/shell/activity" });
+	const navigate = useNavigate({ from: "/activity" });
+	const live = search.mode === "live";
+
+	// The functional form, not a replacement object: the filters are retained
+	// across a mode switch on purpose, and spelling out a new search here would
+	// drop every one of them on the way to Live and back.
+	function selectMode(mode: ActivityMode) {
+		if (mode === search.mode) return;
+		void navigate({ search: (prev) => ({ ...prev, mode }) });
+	}
+
+	function apply(filters: AppliedFilters) {
+		void navigate({ search: { mode: search.mode, ...filters } });
+	}
+
+	return (
+		<section>
+			<div {...stylex.props(styles.header)}>
+				<h1 {...stylex.props(styles.heading)}>Activity</h1>
+				<div role="group" aria-label="Activity mode" {...stylex.props(styles.switch)}>
+					{MODES.map((option) => {
+						const selected = option.mode === search.mode;
+						return (
+							<button
+								key={option.mode}
+								type="button"
+								aria-pressed={selected}
+								onClick={() => selectMode(option.mode)}
+								{...stylex.props(
+									styles.modeButton,
+									selected ? styles.modeSelected : styles.modeIdle,
+									shared.focusRing,
+								)}
+							>
+								{option.label}
+							</button>
+						);
+					})}
+				</div>
+				<Link to="/activity/test" {...stylex.props(styles.simulationLink, shared.focusRing)}>
+					Current policy simulation
+				</Link>
+			</div>
+
+			{/*
+			 * Remounted whenever the applied search changes, which is what makes
+			 * the back button work: the draft is derived state, and the browser
+			 * moving the URL under it has to move the form with it.
+			 */}
+			<ActivityFilters
+				key={`${search.domain ?? ""}|${search.client ?? ""}|${String(search.blocked)}|${String(search.since)}|${String(search.until)}`}
+				applied={search}
+				isDisabled={live}
+				onApply={apply}
+				onClear={() => apply(NO_FILTERS)}
+			/>
+
+			{live ? (
+				<>
+					<p {...stylex.props(styles.liveNote)}>
+						The stream carries every query the server answers; these filters apply to history only.
+					</p>
+					<LiveActivity origin={search} />
+				</>
+			) : (
+				<HistoryActivity search={search} />
+			)}
+		</section>
+	);
+}

admin/src/features/activity/HistoryActivity.tsx

@@ -0,0 +1,181 @@
+/**
+ * Activity in history mode: the persisted queries the URL's filters select,
+ * paged by keyset cursor.
+ *
+ * The filters arrive already applied — the URL is the applied state — so this
+ * only reads them. Everything about how the reader got here lives one level up.
+ */
+
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import * as api from "@/lib/api";
+import CoverageNotice from "@/lib/CoverageNotice";
+import InlineError from "@/lib/InlineError";
+import { queriesInfiniteQuery } from "@/lib/queries";
+import type { QueryRow } from "@/lib/types";
+import { useClientNames } from "@/features/clients/clientNames";
+import { summarizeRow } from "@/features/provenance/querySummary";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { ActivityCells, ActivityTableHead, activityDomainLink } from "./cells";
+import { queriesFilterOf, type ActivitySearch } from "./search";
+
+const styles = stylex.create({
+	empty: {
+		marginTop: "1.5rem",
+		color: colors.textMuted,
+	},
+	tableWrap: {
+		marginTop: "1rem",
+		overflowX: "auto",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+	},
+	table: {
+		width: "100%",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	/** `divide-y`: a hairline between rows, so the first row carries none. */
+	row: {
+		borderTopWidth: { default: 1, ":first-child": 0 },
+		borderTopStyle: "solid",
+		borderTopColor: colors.border,
+	},
+	footer: {
+		marginTop: "0.75rem",
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	note: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	refetching: {
+		marginTop: "0.75rem",
+	},
+	moreButton: {
+		fontWeight: 500,
+	},
+	moreError: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+});
+
+function errorMessage(error: unknown): string {
+	return error instanceof Error ? error.message : String(error);
+}
+
+export default function HistoryActivity({ search }: { search: ActivitySearch }) {
+	const filter = queriesFilterOf(search);
+	const base = useInfiniteQuery(queriesInfiniteQuery(filter));
+	const clientNames = useClientNames();
+
+	const pages = base.data?.pages ?? [];
+	const rows: QueryRow[] = pages.flatMap((page) => page.queries);
+	const coverage = pages[0]?.coverage;
+	const filterActive = Object.keys(filter).length > 0;
+	// `base.hasNextPage` reads the query state, which is empty while placeholder
+	// data stands in for a filter change; derive the cursor from what is on
+	// screen so the button keeps its place instead of flashing "end of log".
+	const lastPage = pages[pages.length - 1];
+	const hasMore = lastPage !== undefined && lastPage.next_before !== null;
+	// A 401 is already redirecting via the cache-level handleUnauthorized.
+	const isUnauthorized = base.error instanceof api.ApiError && base.error.status === 401;
+	const moreError = base.isFetchNextPageError && !isUnauthorized ? errorMessage(base.error) : null;
+
+	function loadMore() {
+		if (!hasMore || base.isFetchingNextPage || base.isPlaceholderData) return;
+		void base.fetchNextPage();
+	}
+
+	// The loader starts this fetch but does not wait for it, so both the first
+	// paint and a failed first page are this component's to render.
+	if (base.status === "error" && base.data === undefined) {
+		return <InlineError error={base.error} onRetry={() => void base.refetch()} />;
+	}
+	if (base.data === undefined) {
+		return (
+			<p {...stylex.props(styles.empty, shared.pulse)} role="status">
+				Loading activity…
+			</p>
+		);
+	}
+
+	return (
+		<>
+			{base.isFetching && (
+				<p {...stylex.props(styles.note, styles.refetching)} role="status">
+					Loading…
+				</p>
+			)}
+			{coverage !== undefined && <CoverageNotice coverage={coverage} />}
+			{rows.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>
+					{filterActive ? "No queries match the current filters." : "No queries logged yet."}
+				</p>
+			) : (
+				<>
+					<div {...stylex.props(styles.tableWrap)}>
+						<table {...stylex.props(styles.table)}>
+							<ActivityTableHead />
+							<tbody>
+								{rows.map((row) => (
+									<tr key={row.id} {...stylex.props(styles.row)}>
+										<ActivityCells
+											row={summarizeRow(row)}
+											clientNames={clientNames}
+											renderDomain={(id, children) =>
+												id === null ? (
+													children
+												) : (
+													<Link
+														to="/activity/queries/$id"
+														params={{ id: String(id) }}
+														search={search}
+														{...stylex.props(activityDomainLink, shared.focusRing)}
+													>
+														{children}
+													</Link>
+												)
+											}
+										/>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+					<div {...stylex.props(styles.footer)}>
+						<p {...stylex.props(styles.note)}>
+							Showing {rows.length} {rows.length === 1 ? "query" : "queries"}
+							{hasMore ? "" : " — end of log"}
+						</p>
+						{hasMore && (
+							<button
+								type="button"
+								onClick={loadMore}
+								disabled={base.isFetchingNextPage || base.isPlaceholderData}
+								{...stylex.props(shared.button, styles.moreButton, shared.focusRing)}
+							>
+								{base.isFetchingNextPage ? "Loading…" : "Load more"}
+							</button>
+						)}
+					</div>
+					{moreError !== null && (
+						<p role="alert" {...stylex.props(styles.moreError)}>
+							Failed to load more: {moreError}
+						</p>
+					)}
+				</>
+			)}
+		</>
+	);
+}

admin/src/features/activity/LiveActivity.test.tsx

@@ -0,0 +1,481 @@
+/**
+ * Activity in live mode, through the real router.
+ *
+ * The EventSource is a global here rather than an injected factory: whether the
+ * connection exists at all is the thing under test, and that is decided by
+ * which subtree the URL mounts, not by a prop a caller could pass.
+ */
+
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterContextProvider, RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import type { Client } from "@/lib/types";
+import { provenance, queryRow } from "@/features/provenance/provenanceFixture";
+import { health } from "@/lib/healthFixture";
+import { FakeEventSource } from "./fakeEventSource";
+import LiveActivity from "./LiveActivity";
+import type { ActivitySearch } from "./search";
+
+const LIVE_ORIGIN: ActivitySearch = {
+	mode: "live",
+	since: undefined,
+	until: undefined,
+	domain: undefined,
+	client: undefined,
+	blocked: undefined,
+};
+
+function client(ip: string, name: string, learnedName: string): Client {
+	return {
+		id: Number(ip.split(".").pop()),
+		ip,
+		name,
+		learned_name: learnedName,
+		group_id: 1,
+		group: "default",
+		hand_edited: name !== "",
+		first_seen: 1_700_000_000,
+		last_seen: 1_700_000_100,
+	};
+}
+
+const CLIENTS: Client[] = [
+	client("192.0.2.10", "Kitchen Pi", "pi.lan"),
+	client("192.0.2.11", "", "laptop.lan"),
+	client("192.0.2.12", "", ""),
+];
+
+const VERSION = { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 };
+
+let sources: FakeEventSource[];
+let fetchMock: ReturnType<typeof vi.fn>;
+
+function json(payload: unknown): Response {
+	return new Response(JSON.stringify(payload), { status: 200, headers: { "content-type": "application/json" } });
+}
+
+function stubFetch(handler: (url: string) => Response | Promise<Response> = () => json({})) {
+	fetchMock = vi.fn((input: RequestInfo | URL) => {
+		const url = String(input);
+		if (url === "/api/version") return Promise.resolve(json(VERSION));
+		if (url === "/api/clients") return Promise.resolve(json({ clients: CLIENTS }));
+		// The shell reads health on every route for the Diagnostics nav badge.
+		if (url === "/api/health") return Promise.resolve(json(health()));
+		return Promise.resolve(handler(url));
+	});
+	vi.stubGlobal("fetch", fetchMock);
+}
+
+beforeEach(() => {
+	sources = [];
+	vi.stubGlobal(
+		"EventSource",
+		class {
+			constructor(url: string) {
+				const source = new FakeEventSource(url);
+				sources.push(source);
+				return source as unknown as EventSource;
+			}
+		},
+	);
+	stubFetch();
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function frame(ts: number, domain: string, sections: Parameters<typeof provenance>[0] = {}): { data: string } {
+	return {
+		data: JSON.stringify(
+			provenance({
+				...sections,
+				request: { time: ts, domain, ...sections.request },
+				route: { kind: "cache", upstream: "", ...sections.route },
+			}),
+		),
+	};
+}
+
+function renderPage(path = "/activity?mode=live") {
+	const queryClient = createQueryClient();
+	const history = createMemoryHistory({ initialEntries: [path] });
+	const router = createAppRouter(history, queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return { history };
+}
+
+async function openLive(path?: string) {
+	const rendered = renderPage(path);
+	await screen.findByRole("button", { name: "Freeze" });
+	act(() => sources[0]!.emit("open"));
+	return rendered;
+}
+
+function queryCalls(): string[] {
+	return fetchMock.mock.calls
+		.map((call) => String(call[0]))
+		.filter((url) => url === "/api/queries" || url.startsWith("/api/queries?"));
+}
+
+test("streams rows, flags blocked ones, and freezes the display", async () => {
+	await openLive();
+	expect(screen.getByRole("status", { name: "Live" })).toBeTruthy();
+	expect(screen.getByText("Waiting for queries…")).toBeTruthy();
+
+	act(() => {
+		sources[0]!.emit("query", frame(1000, "ok.example"));
+		sources[0]!.emit(
+			"query",
+			frame(1001, "ads.example", {
+				request: { qtype: 28 },
+				policy: { action: "block", reason: "blocklist_wildcard" },
+				route: { kind: "blocked" },
+			}),
+		);
+	});
+
+	expect(screen.getByText("ok.example")).toBeTruthy();
+	expect(screen.getByText("AAAA")).toBeTruthy();
+	const blockedRow = screen.getByText("ads.example").closest("tr")!;
+	expect(within(blockedRow).getAllByText("Blocked")).toHaveLength(2);
+	// StyleX compiles to opaque class names, so the check is structural: a blocked
+	// row carries every class a plain row does, plus the ones the flag adds.
+	const plainRow = screen.getByText("ok.example").closest("tr")!;
+	const blockedClasses = new Set(blockedRow.className.split(" "));
+	const plainClasses = plainRow.className.split(" ");
+	expect(plainClasses.every((name) => blockedClasses.has(name))).toBe(true);
+	expect(blockedClasses.size).toBeGreaterThan(plainClasses.length);
+
+	const freeze = screen.getByRole("button", { name: "Freeze" });
+	fireEvent.click(freeze);
+	expect(freeze.getAttribute("aria-pressed")).toBe("true");
+
+	act(() => sources[0]!.emit("query", frame(1002, "later.example")));
+	expect(screen.queryByText("later.example")).toBeNull();
+	expect(screen.getByText(/3 in buffer/)).toBeTruthy();
+
+	fireEvent.click(screen.getByRole("button", { name: "Resume" }));
+	expect(screen.getByText("later.example")).toBeTruthy();
+});
+
+test("resolves each row's client to its display name, keeping the IP as the tooltip", async () => {
+	await openLive();
+	act(() => {
+		sources[0]!.emit("query", frame(1000, "named.example", { request: { client: "192.0.2.10" } }));
+		sources[0]!.emit("query", frame(1001, "learned.example", { request: { client: "192.0.2.11" } }));
+		sources[0]!.emit("query", frame(1002, "nameless.example", { request: { client: "192.0.2.12" } }));
+		sources[0]!.emit("query", frame(1003, "stranger.example", { request: { client: "192.0.2.99" } }));
+	});
+
+	const named = await screen.findByText("Kitchen Pi");
+	expect(named.getAttribute("title")).toBe("192.0.2.10");
+	expect(screen.queryByText("pi.lan")).toBeNull();
+
+	const learned = screen.getByText("laptop.lan");
+	expect(learned.getAttribute("title")).toBe("192.0.2.11");
+	expect(within(learned.closest("tr")!).queryByText("learned")).toBeNull();
+
+	expect(screen.getByText("192.0.2.12").getAttribute("title")).toBeNull();
+	expect(screen.getByText("192.0.2.99").getAttribute("title")).toBeNull();
+});
+
+test("rows stream in as bare IPs while the client list is still loading", async () => {
+	let releaseClients: () => void = () => {};
+	fetchMock = vi.fn((input: RequestInfo | URL) => {
+		const url = String(input);
+		if (url === "/api/version") return Promise.resolve(json(VERSION));
+		// The shell reads health on every route for the Diagnostics nav badge.
+		if (url === "/api/health") return Promise.resolve(json(health()));
+		return new Promise<Response>((resolve) => {
+			if (url !== "/api/clients") {
+				resolve(json({}));
+				return;
+			}
+			releaseClients = () => resolve(json({ clients: CLIENTS }));
+		});
+	});
+	vi.stubGlobal("fetch", fetchMock);
+
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "named.example", { request: { client: "192.0.2.10" } })));
+
+	expect(screen.getByText("192.0.2.10")).toBeTruthy();
+	expect(screen.queryByText("Kitchen Pi")).toBeNull();
+
+	releaseClients();
+	expect(await screen.findByText("Kitchen Pi")).toBeTruthy();
+});
+
+test("repeated connection failures show the viewer-cap state with a retry button", async () => {
+	renderPage();
+	await screen.findByRole("button", { name: "Freeze" });
+	act(() => {
+		sources[0]!.emit("error");
+		sources[0]!.emit("error");
+		sources[0]!.emit("error");
+	});
+	expect(screen.getByRole("alert").textContent).toContain("too many live viewers");
+
+	fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+	expect(sources).toHaveLength(2);
+	expect(screen.getByText("Connecting…")).toBeTruthy();
+});
+
+test("a recovered row links to its stored detail; a streamed one opens in place instead", async () => {
+	stubFetch((url) => {
+		if (url.startsWith("/api/queries?")) {
+			return json({
+				queries: [queryRow(88, { ts: 1001, domain: "recovered.example" })],
+				next_before: null,
+				coverage: { complete: true, available_since: 0 },
+			});
+		}
+		return json({});
+	});
+
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+	act(() => sources[0]!.emit("error"));
+	act(() => sources[0]!.emit("open"));
+
+	const recovered = await screen.findByRole("link", { name: "recovered.example" });
+	expect(recovered.getAttribute("href")).toContain("/activity/queries/88");
+	// The streamed frame precedes its own insert, so it has no row to link to —
+	// but it does carry its own provenance, so it still has a detail.
+	expect(screen.queryByRole("link", { name: "streamed.example" })).toBeNull();
+	expect(screen.getByRole("button", { name: "streamed.example" })).toBeTruthy();
+});
+
+test("a streamed row opens its own provenance, from the keyboard as well as the pointer", async () => {
+	await openLive();
+	act(() =>
+		sources[0]!.emit(
+			"query",
+			frame(1000, "streamed.example", {
+				policy: { action: "block", reason: "blocklist_domain", matched: "streamed.example" },
+				route: { kind: "blocked", upstream: "" },
+			}),
+		),
+	);
+
+	const trigger = screen.getByRole("button", { name: "streamed.example" });
+	// A real <button> is in the tab order and activates on Enter and Space; the
+	// only way to lose that is to opt out of it, which nothing here may do.
+	expect(trigger.tagName).toBe("BUTTON");
+	expect(trigger.getAttribute("tabindex")).toBeNull();
+	act(() => trigger.focus());
+	expect(document.activeElement).toBe(trigger);
+
+	fireEvent.click(trigger);
+	const heading = screen.getByRole("heading", { level: 1, name: "streamed.example" });
+	expect(heading).toBeTruthy();
+	const panel = heading.closest("div")!.parentElement!;
+	expect(within(panel).getByText("Blocked locally")).toBeTruthy();
+	expect(panel.textContent).toContain("the query log may not have written it yet");
+
+	fireEvent.click(screen.getByRole("button", { name: "Close" }));
+	expect(screen.queryByRole("heading", { level: 1, name: "streamed.example" })).toBeNull();
+});
+
+test("the detail takes focus when a row opens it and hands it back when it closes", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+
+	const trigger = screen.getByRole("button", { name: "streamed.example" });
+	expect(trigger.getAttribute("aria-expanded")).toBe("false");
+	expect(trigger.getAttribute("aria-controls")).toBeNull();
+
+	// A native button activates on Enter and Space; jsdom does not synthesize
+	// the click those keys fire, so the click is the activation.
+	act(() => trigger.focus());
+	fireEvent.click(trigger);
+
+	const panel = screen.getByRole("group", { name: "Streamed query" });
+	expect(trigger.getAttribute("aria-expanded")).toBe("true");
+	expect(trigger.getAttribute("aria-controls")).toBe(panel.id);
+	// The panel is inserted above the table, behind the trigger in tab order, so
+	// the only thing that keeps a forward tab inside it is focus moving in.
+	expect(panel.compareDocumentPosition(trigger) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+	expect(document.activeElement).toBe(panel);
+	expect(panel.contains(screen.getByRole("button", { name: "Close" }))).toBe(true);
+
+	fireEvent.click(screen.getByRole("button", { name: "Close" }));
+	expect(screen.queryByRole("group", { name: "Streamed query" })).toBeNull();
+	expect(document.activeElement).toBe(trigger);
+	expect(trigger.getAttribute("aria-expanded")).toBe("false");
+	expect(trigger.getAttribute("aria-controls")).toBeNull();
+});
+
+test("opening a second row moves the expanded state and the focus with it", async () => {
+	await openLive();
+	act(() => {
+		sources[0]!.emit("query", frame(1000, "first.example"));
+		sources[0]!.emit("query", frame(1001, "second.example"));
+	});
+
+	const first = screen.getByRole("button", { name: "first.example" });
+	const second = screen.getByRole("button", { name: "second.example" });
+	fireEvent.click(first);
+	fireEvent.click(second);
+
+	const panel = screen.getByRole("group", { name: "Streamed query" });
+	expect(within(panel).getByRole("heading", { level: 1, name: "second.example" })).toBeTruthy();
+	expect(document.activeElement).toBe(panel);
+	expect(first.getAttribute("aria-expanded")).toBe("false");
+	expect(second.getAttribute("aria-expanded")).toBe("true");
+
+	fireEvent.click(screen.getByRole("button", { name: "Close" }));
+	expect(document.activeElement).toBe(second);
+});
+
+/**
+ * The one render that bypasses the route, because the ring capacity is a
+ * parameter of the component and the route deliberately never passes it:
+ * evicting a row at the real 500 means pushing 500 frames through React state,
+ * which proves nothing the fifth frame does not. The real route tree still
+ * backs the links inside the detail.
+ */
+function renderLiveWithCapacity(capacity: number) {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/activity?mode=live"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterContextProvider router={router}>
+					<LiveActivity origin={LIVE_ORIGIN} capacity={capacity} />
+				</RouterContextProvider>
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+test("an open streamed detail survives the row being evicted from the ring buffer", () => {
+	renderLiveWithCapacity(5);
+	act(() => sources[0]!.emit("open"));
+	act(() => sources[0]!.emit("query", frame(1000, "evicted.example")));
+	fireEvent.click(screen.getByRole("button", { name: "evicted.example" }));
+	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
+
+	// One ringful more: the ring keeps the newest 5, so the selected row is gone
+	// from the table. The detail is a snapshot, not a lookup into the ring.
+	act(() => {
+		for (let index = 0; index < 5; index += 1) {
+			sources[0]!.emit("query", frame(2000 + index, `filler${index}.example`));
+		}
+	});
+	expect(screen.getAllByRole("row")).toHaveLength(6);
+	expect(screen.queryByRole("button", { name: "evicted.example" })).toBeNull();
+	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
+});
+
+test("the route renders the live ring at its production capacity", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "pinned.example")));
+
+	expect(screen.getByText(/last 500 kept/)).toBeTruthy();
+	fireEvent.click(screen.getByRole("button", { name: "Freeze" }));
+	expect(screen.getByText(/newest 500 kept/)).toBeTruthy();
+});
+
+test("an open streamed detail survives Freeze and Resume", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1000, "held.example")));
+	fireEvent.click(screen.getByRole("button", { name: "held.example" }));
+
+	fireEvent.click(screen.getByRole("button", { name: "Freeze" }));
+	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
+	fireEvent.click(screen.getByRole("button", { name: "Resume" }));
+	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
+});
+
+test("the filter row stays visible, keeps its values, and is out of the tab order", async () => {
+	await openLive("/activity?mode=live&domain=ads&client=192.0.2.10&blocked=true");
+
+	const domain = screen.getByLabelText("Domain contains") as HTMLInputElement;
+	expect(domain.value).toBe("ads");
+	expect(domain.disabled).toBe(true);
+	expect((screen.getByLabelText("Client (exact)") as HTMLInputElement).disabled).toBe(true);
+	expect((screen.getByLabelText("Since") as HTMLInputElement).disabled).toBe(true);
+	expect((screen.getByLabelText("Until") as HTMLInputElement).disabled).toBe(true);
+
+	const form = domain.closest("form")!;
+	const controls = [...form.querySelectorAll("input, button, select, textarea, a[href], [tabindex]")];
+	expect(controls.length).toBeGreaterThan(0);
+	for (const control of controls) {
+		// A disabled form control is skipped by the browser's tab order, and RAC
+		// pins its own trigger out of it as well. Nothing in the row may
+		// reintroduce itself with a reachable tabindex.
+		expect(control.hasAttribute("disabled")).toBe(true);
+		const tabindex = control.getAttribute("tabindex");
+		expect(tabindex === null || tabindex === "-1").toBe(true);
+	}
+});
+
+test("live mode asks for no query pages, whatever filters the url retained", async () => {
+	await openLive("/activity?mode=live&domain=ads&client=192.0.2.10&blocked=true&since=1700000000&bogus=1");
+	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
+
+	expect(queryCalls()).toEqual([]);
+});
+
+test("leaving live closes the stream, and coming back opens exactly one fresh one", async () => {
+	await openLive("/activity?mode=live&domain=ads");
+
+	fireEvent.click(screen.getByRole("button", { name: "History" }));
+	await screen.findByRole("button", { name: "Apply filters" });
+	expect(sources).toHaveLength(1);
+	expect(sources[0]!.closed).toBe(true);
+	// The filters came along, which is the point of switching rather than
+	// navigating: the reader keeps the question they were asking.
+	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).value).toBe("ads");
+	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).disabled).toBe(false);
+
+	fireEvent.click(screen.getByRole("button", { name: "Live" }));
+	await screen.findByRole("button", { name: "Freeze" });
+	expect(sources).toHaveLength(2);
+	expect(sources[1]!.closed).toBe(false);
+});
+
+/**
+ * The related-actions region of a query detail. Scoped on purpose: the sidebar
+ * carries a Pause of its own, and this is the one that answers "this query was
+ * blocked and should not have been".
+ */
+function related(): HTMLElement {
+	return screen.getByRole("region", { name: "Related" });
+}
+
+test("a streamed blocked row carries the same Pause action as the persisted detail", async () => {
+	await openLive();
+	act(() =>
+		sources[0]!.emit(
+			"query",
+			frame(1000, "streamed.example", {
+				policy: { action: "block", reason: "blocklist_domain", matched: "streamed.example" },
+				route: { kind: "blocked", upstream: "" },
+			}),
+		),
+	);
+	fireEvent.click(screen.getByRole("button", { name: "streamed.example" }));
+
+	await waitFor(() => expect(within(related()).getByRole("button", { name: "Pause" })).toBeTruthy());
+});
+
+test("a streamed row that was allowed offers nothing to pause", async () => {
+	await openLive();
+	act(() => sources[0]!.emit("query", frame(1001, "allowed.example", { policy: { action: "allow" } })));
+	fireEvent.click(screen.getByRole("button", { name: "allowed.example" }));
+
+	await screen.findByRole("heading", { level: 1, name: "allowed.example" });
+	expect(within(related()).queryByRole("button", { name: "Pause" })).toBeNull();
+});

admin/src/features/activity/LiveActivity.tsx

@@ -0,0 +1,432 @@
+/**
+ * Activity in live mode: the SSE stream, its bounded ring buffer, and the
+ * in-place detail a streamed row opens.
+ *
+ * This subtree is mounted only while the URL says `mode=live`, which is what
+ * closes the EventSource on the way back to history: the connection is a
+ * server-side resource capped per address, so a page that kept it open while
+ * showing something else would spend a viewer slot on nothing.
+ *
+ * Freeze and Follow are display state and stay out of the URL. They describe
+ * what the screen is doing right now, not what it is showing, so a shared link
+ * would carry a frozen moment the recipient never saw fill.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { useClientNames } from "@/features/clients/clientNames";
+import { summarizeEvent } from "@/features/provenance/querySummary";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { ActivityCells, ActivityTableHead, activityDomainLink } from "./cells";
+import ProvenanceDetail from "./ProvenanceDetail";
+import RelatedActions from "./RelatedActions";
+import { RING_CAPACITY, summaryOf, type StreamedRow } from "./ringBuffer";
+import type { ActivitySearch } from "./search";
+import { useLiveQueries, type StreamStatus } from "./useLiveQueries";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	toolbar: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	toolbarButton: {
+		fontWeight: 500,
+	},
+	pill: {
+		borderRadius: "9999px",
+		paddingInline: "0.625rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+	},
+	/** Four stream states need four tints; only two of them map onto a token role. */
+	pillConnecting: {
+		backgroundColor: { default: "oklch(96.7% 0.001 286.375)", [DARK]: "oklch(27.4% 0.006 286.033)" },
+		color: { default: "oklch(37% 0.013 285.805)", [DARK]: "oklch(87.1% 0.006 286.286)" },
+	},
+	pillOpen: {
+		backgroundColor: { default: "oklch(96.2% 0.044 156.743)", [DARK]: "oklch(39.3% 0.095 152.535)" },
+		color: { default: "oklch(44.8% 0.119 151.328)", [DARK]: "oklch(92.5% 0.084 155.995)" },
+	},
+	pillRetrying: {
+		backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(41.4% 0.112 45.904)" },
+		color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(92.4% 0.12 95.746)" },
+	},
+	pillCapped: {
+		backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(39.6% 0.141 25.723)" },
+		color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
+	},
+	note: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	/** Informational, neither a warning nor a failure, so the blue ramp stands alone. */
+	resumed: {
+		marginTop: "0.75rem",
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: { default: "oklch(80.9% 0.105 251.813)", [DARK]: "oklch(37.9% 0.146 265.522)" },
+		backgroundColor: { default: "oklch(97% 0.014 254.604)", [DARK]: "oklch(28.2% 0.091 267.935)" },
+		color: { default: "oklch(42.4% 0.199 265.638)", [DARK]: "oklch(88.2% 0.059 254.128)" },
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	dismiss: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		color: "inherit",
+		fontSize: "inherit",
+		fontWeight: 500,
+		textDecorationLine: "underline",
+	},
+	failureNote: {
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+	cappedBox: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		padding: "1rem",
+	},
+	cappedHeading: {
+		fontWeight: 600,
+		color: colors.dangerText,
+	},
+	cappedDetail: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+	empty: {
+		marginTop: "1.5rem",
+		color: colors.textMuted,
+	},
+	tableWrap: {
+		marginTop: "1rem",
+		overflowX: "auto",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+	},
+	table: {
+		width: "100%",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	/** `divide-y`: a hairline between rows, so the first row carries none. */
+	row: {
+		borderTopWidth: { default: 1, ":first-child": 0 },
+		borderTopStyle: "solid",
+		borderTopColor: colors.border,
+	},
+	rowBlocked: {
+		backgroundColor: {
+			default: "oklch(97.1% 0.013 17.38)",
+			[DARK]: "oklch(25.8% 0.092 26.042 / 0.4)",
+		},
+	},
+	/** A streamed row opens its detail here rather than at a route, so it is a button that looks like the link beside it. */
+	domainButton: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		font: "inherit",
+		textAlign: "left",
+		cursor: "pointer",
+		textDecorationLine: "underline",
+		textDecorationStyle: "dotted",
+	},
+	detailPanel: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: colors.surface,
+		padding: "1rem",
+	},
+	detailBar: {
+		display: "flex",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		gap: "0.75rem",
+	},
+	detailLabel: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 600,
+		letterSpacing: "0.05em",
+		textTransform: "uppercase",
+		color: colors.textMuted,
+	},
+	footnote: {
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+});
+
+/** One panel at a time, so the trigger that opened it can name it in `aria-controls`. */
+const DETAIL_PANEL_ID = "live-query-detail";
+const DETAIL_LABEL_ID = "live-query-detail-label";
+
+const PILL_LABELS: Record<StreamStatus, string> = {
+	connecting: "Connecting…",
+	open: "Live",
+	retrying: "Reconnecting…",
+	capped: "Disconnected",
+};
+
+function pillStyle(status: StreamStatus) {
+	if (status === "open") return styles.pillOpen;
+	if (status === "retrying") return styles.pillRetrying;
+	if (status === "capped") return styles.pillCapped;
+	return styles.pillConnecting;
+}
+
+function StatusPill({ status }: { status: StreamStatus }) {
+	const label = PILL_LABELS[status];
+	return (
+		<span role="status" aria-label={label} {...stylex.props(styles.pill, pillStyle(status))}>
+			{label}
+		</span>
+	);
+}
+
+/**
+ * The open detail, held as the selected row itself rather than as a key into
+ * the buffer.
+ *
+ * The buffer is a 500-row ring that a gap merge also rewrites: a reference by
+ * key would go stale under the reader while they were still reading it, and the
+ * panel would blank out for no reason they could see. The snapshot is the whole
+ * fact — a streamed frame carries its own provenance — so it survives eviction,
+ * a merge and a Freeze/Resume, and closes only when the reader closes it or
+ * leaves live mode.
+ */
+function LiveDetail({ row, origin, onClose }: { row: StreamedRow; origin: ActivitySearch; onClose: () => void }) {
+	const summary = summarizeEvent(row.event);
+	const panel = useRef<HTMLDivElement>(null);
+
+	// The panel opens above the table, behind the trigger in tab order, so a
+	// forward tab from the row would walk past it. Focus moves in on open —
+	// keyed on the row, so choosing a second row moves it again — and the
+	// closer puts it back on the trigger.
+	useEffect(() => {
+		panel.current?.focus();
+	}, [row.key]);
+
+	return (
+		<div
+			ref={panel}
+			id={DETAIL_PANEL_ID}
+			tabIndex={-1}
+			role="group"
+			aria-labelledby={DETAIL_LABEL_ID}
+			{...stylex.props(styles.detailPanel)}
+		>
+			<div {...stylex.props(styles.detailBar)}>
+				<span id={DETAIL_LABEL_ID} {...stylex.props(styles.detailLabel)}>
+					Streamed query
+				</span>
+				<button type="button" onClick={onClose} {...stylex.props(shared.button, shared.focusRing)}>
+					Close
+				</button>
+			</div>
+			<ProvenanceDetail
+				provenance={row.event}
+				persistedId={null}
+				relatedActions={
+					<RelatedActions
+						domain={summary.domain}
+						client={summary.client_ip}
+						ts={summary.ts}
+						origin={origin}
+						blocked={row.event.policy.action === "block"}
+					/>
+				}
+			/>
+		</div>
+	);
+}
+
+/**
+ * `capacity` is the ring size, a parameter only so a test can provoke an
+ * eviction with a handful of rows rather than 500 frames through React state.
+ * The route renders this without it, so the app is always the 500-row ring.
+ */
+export default function LiveActivity({
+	origin,
+	capacity = RING_CAPACITY,
+}: {
+	origin: ActivitySearch;
+	capacity?: number;
+}) {
+	const live = useLiveQueries({ capacity });
+	const clientNames = useClientNames();
+	const [selected, setSelected] = useState<StreamedRow | null>(null);
+	const trigger = useRef<HTMLButtonElement | null>(null);
+
+	function open(row: StreamedRow, from: HTMLButtonElement) {
+		trigger.current = from;
+		setSelected(row);
+	}
+
+	// The row that opened the panel takes focus back, unless the ring has
+	// already evicted it: a detached button cannot be focused, and the browser
+	// falls back to the document, which is the best available answer.
+	function close() {
+		setSelected(null);
+		trigger.current?.focus();
+		trigger.current = null;
+	}
+
+	return (
+		<>
+			<div {...stylex.props(styles.toolbar)}>
+				<StatusPill status={live.status} />
+				<button
+					type="button"
+					onClick={live.toggleFreeze}
+					aria-pressed={live.frozen}
+					{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
+				>
+					{live.frozen ? "Resume" : "Freeze"}
+				</button>
+			</div>
+
+			{live.frozen && (
+				<p {...stylex.props(styles.note)} role="status">
+					Display frozen — new queries keep buffering ({live.liveCount} in buffer, newest {capacity} kept).
+				</p>
+			)}
+
+			{live.missed !== null && (
+				<div role="status" {...stylex.props(styles.resumed)}>
+					<span>
+						Stream resumed —{" "}
+						{live.missed === 0 ? "no queries missed" : `${live.missed} missed queries recovered`}.
+					</span>
+					<button
+						type="button"
+						onClick={live.dismissMissed}
+						{...stylex.props(styles.dismiss, shared.focusRing)}
+					>
+						Dismiss
+					</button>
+				</div>
+			)}
+
+			{live.resyncFailed && (
+				<p role="alert" {...stylex.props(styles.failureNote)}>
+					Stream resumed, but re-syncing the gap failed — some queries may be missing here.
+				</p>
+			)}
+
+			{live.status === "capped" && (
+				<div role="alert" {...stylex.props(styles.cappedBox)}>
+					<h2 {...stylex.props(styles.cappedHeading)}>Live stream unavailable</h2>
+					<p {...stylex.props(styles.cappedDetail)}>
+						The connection failed repeatedly — possibly too many live viewers (the server caps streams per
+						address), or the server is unreachable.
+					</p>
+					<button type="button" onClick={live.retry} {...stylex.props(shared.retryButton, shared.focusRing)}>
+						Retry
+					</button>
+				</div>
+			)}
+
+			{selected !== null && <LiveDetail row={selected} origin={origin} onClose={close} />}
+
+			{live.rows.length === 0 ? (
+				live.status !== "capped" && (
+					<p {...stylex.props(styles.empty)}>
+						{live.status === "open" ? "Waiting for queries…" : "No queries received yet."}
+					</p>
+				)
+			) : (
+				<>
+					<div {...stylex.props(styles.tableWrap)}>
+						<table {...stylex.props(styles.table)}>
+							<ActivityTableHead />
+							<tbody>
+								{live.rows.map((row) => {
+									const summary = summaryOf(row);
+									return (
+										<tr
+											key={row.key}
+											{...stylex.props(styles.row, summary.blocked && styles.rowBlocked)}
+										>
+											<ActivityCells
+												row={summary}
+												clientNames={clientNames}
+												renderDomain={(_id, children) =>
+													row.kind === "streamed" ? (
+														<button
+															type="button"
+															aria-expanded={selected?.key === row.key}
+															aria-controls={
+																selected?.key === row.key ? DETAIL_PANEL_ID : undefined
+															}
+															onClick={(event) => open(row, event.currentTarget)}
+															{...stylex.props(
+																styles.domainButton,
+																activityDomainLink,
+																shared.focusRing,
+															)}
+														>
+															{children}
+														</button>
+													) : (
+														<Link
+															to="/activity/queries/$id"
+															params={{ id: String(row.row.id) }}
+															search={origin}
+															{...stylex.props(activityDomainLink, shared.focusRing)}
+														>
+															{children}
+														</Link>
+													)
+												}
+											/>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+					<p {...stylex.props(styles.footnote)}>
+						Showing {live.rows.length} {live.rows.length === 1 ? "query" : "queries"} (newest first, last{" "}
+						{capacity} kept).
+					</p>
+				</>
+			)}
+		</>
+	);
+}

admin/src/features/activity/PolicyTestPage.test.tsx

@@ -0,0 +1,178 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import type { LookupResult } from "@/lib/types";
+
+const BLOCKED: LookupResult = {
+	domain: "ads.example",
+	group_id: 1,
+	local_records: false,
+	forward_zone: null,
+	blocked: true,
+	reason: "blocklist_domain",
+	matched: "ads.example",
+	source_url: "https://lists.test/a",
+	safe_search_rewrite: null,
+};
+
+let fetchMock: ReturnType<typeof createFetchMock>;
+/** What `/api/lookup` answers, so a test can make it fail without rebuilding the mock. */
+let lookup: (url: string) => Response;
+
+function json(payload: unknown, status = 200, headers: Record<string, string> = {}): Response {
+	return new Response(JSON.stringify(payload), {
+		status,
+		headers: { "content-type": "application/json", ...headers },
+	});
+}
+
+function createFetchMock() {
+	return vi.fn(async (input: RequestInfo | URL) => {
+		const url = String(input);
+		if (url === "/api/groups") {
+			return json({
+				groups: [
+					{ id: 1, name: "default", safe_search: false },
+					{ id: 2, name: "kids", safe_search: true },
+				],
+			});
+		}
+		if (url.startsWith("/api/lookup")) return lookup(url);
+		return json({ error: "not stubbed" }, 404);
+	});
+}
+
+beforeEach(() => {
+	lookup = (url) =>
+		url === "/api/lookup?domain=ads.example&group_id=1" ? json(BLOCKED) : json({ error: "not stubbed" }, 404);
+	fetchMock = createFetchMock();
+	vi.stubGlobal("fetch", fetchMock);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+/**
+ * `retry: false` for the failure tests: the shared client retries a 5xx twice
+ * and a 429 after its Retry-After, so the surfaced error is what the page does
+ * once the client has given up, not something a test should sit out in real
+ * time.
+ */
+function renderPage(path = "/activity/test", { retry = true } = {}) {
+	const queryClient = createQueryClient();
+	if (!retry) {
+		const defaults = queryClient.getDefaultOptions();
+		queryClient.setDefaultOptions({ ...defaults, queries: { ...defaults.queries, retry: false } });
+	}
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [path] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+function lookupCalls(): string[] {
+	return fetchMock.mock.calls.map(([input]) => String(input)).filter((url) => url.startsWith("/api/lookup"));
+}
+
+test("fetches nothing until submit, then renders the blocked verdict", async () => {
+	renderPage();
+
+	await screen.findByRole("heading", { name: "Current policy simulation" });
+	await screen.findByLabelText("Group");
+	expect(lookupCalls()).toEqual([]);
+
+	fireEvent.change(screen.getByLabelText("Domain"), { target: { value: "ads.example" } });
+	expect(lookupCalls()).toEqual([]);
+
+	fireEvent.click(screen.getByRole("button", { name: "Simulate" }));
+
+	await screen.findByRole("heading", { name: "Blocked" });
+	expect(lookupCalls()).toEqual(["/api/lookup?domain=ads.example&group_id=1"]);
+
+	expect(screen.getByText("blocklist_domain")).toBeTruthy();
+	const link = screen.getByRole("link", { name: "https://lists.test/a" }) as HTMLAnchorElement;
+	expect(link.href).toBe("https://lists.test/a");
+	expect(screen.getByText("Queries for this name get a blocked response.")).toBeTruthy();
+});
+
+test("a ?domain= link asks the question on arrival instead of leaving a filled-in form", async () => {
+	renderPage("/activity/test?domain=ads.example");
+
+	// No submit here: the link is the question, so the verdict is what arrives.
+	await screen.findByRole("heading", { name: "Blocked" });
+	expect(lookupCalls()).toEqual(["/api/lookup?domain=ads.example&group_id=1"]);
+	expect(screen.getByLabelText("Domain")).toHaveProperty("value", "ads.example");
+});
+
+test("no filter snapshot reads as a server that is starting, not as a verdict", async () => {
+	lookup = () => json({ error: "no snapshot" }, 503);
+	renderPage("/activity/test", { retry: false });
+
+	fireEvent.change(await screen.findByLabelText("Domain"), { target: { value: "ads.example" } });
+	fireEvent.click(screen.getByRole("button", { name: "Simulate" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("No filter snapshot is loaded yet");
+	expect(lookupCalls()).toEqual(["/api/lookup?domain=ads.example&group_id=1"]);
+	// Nothing may read as an answer while the lookup has none.
+	expect(screen.queryByRole("heading", { name: "Blocked" })).toBeNull();
+	expect(screen.queryByText("Simulating…")).toBeNull();
+});
+
+test("a rate limit says how long to wait, from the server's own Retry-After", async () => {
+	lookup = () => json({ error: "rate limited" }, 429, { "retry-after": "12" });
+	renderPage("/activity/test", { retry: false });
+
+	fireEvent.change(await screen.findByLabelText("Domain"), { target: { value: "ads.example" } });
+	fireEvent.click(screen.getByRole("button", { name: "Simulate" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("Rate limited. Try again in 12s.");
+});
+
+test("resubmitting the same domain and group refetches rather than showing a stale verdict", async () => {
+	renderPage();
+
+	fireEvent.change(await screen.findByLabelText("Domain"), { target: { value: "ads.example" } });
+	fireEvent.click(screen.getByRole("button", { name: "Simulate" }));
+	await screen.findByRole("heading", { name: "Blocked" });
+	expect(lookupCalls()).toHaveLength(1);
+
+	// The policy can change between two identical questions, so the second one
+	// has to reach the server even though the query key has not moved.
+	lookup = () => json({ ...BLOCKED, blocked: false, reason: "no_match", matched: "", source_url: null });
+	fireEvent.click(screen.getByRole("button", { name: "Simulate" }));
+
+	await screen.findByRole("heading", { name: "Allowed" });
+	expect(lookupCalls()).toEqual([
+		"/api/lookup?domain=ads.example&group_id=1",
+		"/api/lookup?domain=ads.example&group_id=1",
+	]);
+});
+
+test("defaults the group select to the default group (id 1)", async () => {
+	renderPage();
+	// A RAC Select names its trigger with the current value and then the label, so
+	// the selected group's name is the only thing the trigger shows.
+	const trigger = await screen.findByRole("button", { name: /Group$/ });
+	expect(trigger.textContent).toContain("default");
+});
+
+test("the framing is forward-tense, so it cannot be read as an account of a past query", async () => {
+	renderPage();
+	await screen.findByRole("heading", { name: "Current policy simulation" });
+
+	const intro = screen.getByRole("heading", { name: "Current policy simulation" }).nextElementSibling;
+	expect(intro?.textContent).toContain("would");
+	expect(intro?.textContent).toContain("right now");
+	// Nothing on the page may claim to explain a query that already happened.
+	expect(document.body.textContent).not.toContain("Look up");
+});

admin/src/features/activity/PolicyTestPage.tsx

@@ -0,0 +1,331 @@
+import { useState, type FormEvent, type ReactNode } from "react";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { ApiError } from "@/lib/api";
+import { groupsQuery, lookupQuery } from "@/lib/queries";
+import type { Group, LookupResult } from "@/lib/types";
+import { defaultGroupId } from "@/lib/defaultGroup";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+interface Submitted {
+	domain: string;
+	groupId: number;
+}
+
+interface Verdict {
+	label: string;
+	tone: "local" | "blocked" | "forwarded" | "allowed";
+	description: string;
+}
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
+	form: {
+		marginTop: "1.5rem",
+		display: "flex",
+		maxWidth: "42rem",
+		flexWrap: "wrap",
+		alignItems: "flex-end",
+		gap: "0.75rem",
+	},
+	domainField: {
+		minWidth: "14rem",
+		flexGrow: 1,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	note: {
+		marginTop: "1.5rem",
+		color: colors.textMuted,
+	},
+	error: {
+		marginTop: "1.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	card: {
+		marginTop: "1.5rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+	},
+	banner: {
+		borderStartStartRadius: "0.25rem",
+		borderStartEndRadius: "0.25rem",
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	/** Four verdicts need four tints; only "blocked" maps onto a token role. */
+	local: {
+		backgroundColor: { default: "oklch(93.2% 0.032 255.585)", [DARK]: "oklch(28.2% 0.091 267.935)" },
+		color: { default: "oklch(42.4% 0.199 265.638)", [DARK]: "oklch(80.9% 0.105 251.813)" },
+	},
+	blocked: {
+		backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(25.8% 0.092 26.042)" },
+		color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(80.8% 0.114 19.571)" },
+	},
+	forwarded: {
+		backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(27.9% 0.077 45.635)" },
+		color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(87.9% 0.169 91.605)" },
+	},
+	allowed: {
+		backgroundColor: { default: "oklch(96.2% 0.044 156.743)", [DARK]: "oklch(26.6% 0.065 152.934)" },
+		color: { default: "oklch(44.8% 0.119 151.328)", [DARK]: "oklch(87.1% 0.15 154.449)" },
+	},
+	verdictLabel: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	verdictDescription: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	details: {
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	/** `divide-y`: a hairline between rows, so the first row carries none. */
+	detailRow: {
+		display: "flex",
+		gap: "1rem",
+		paddingBlock: "0.5rem",
+		borderTopWidth: { default: 1, ":first-child": 0 },
+		borderTopStyle: "solid",
+		borderTopColor: colors.border,
+	},
+	detailTerm: {
+		width: "10rem",
+		flexShrink: 0,
+		color: colors.textMuted,
+	},
+	detailValue: {
+		minWidth: 0,
+		overflowWrap: "break-word",
+	},
+	sourceLink: {
+		color: colors.primaryOnSurface,
+		textDecorationLine: "underline",
+	},
+});
+
+function toneStyle(tone: Verdict["tone"]) {
+	if (tone === "local") return styles.local;
+	if (tone === "blocked") return styles.blocked;
+	return tone === "forwarded" ? styles.forwarded : styles.allowed;
+}
+
+/**
+ * Header priority follows the pipeline order the lookup handler documents
+ * (PLAN §6): local records answer first, then the block decision, then
+ * forward zones, then plain forwarding to the upstream pool.
+ */
+export function verdictOf(result: LookupResult): Verdict {
+	if (result.local_records) {
+		return {
+			label: "Local answer",
+			tone: "local",
+			description: "A local record answers this name directly.",
+		};
+	}
+	if (result.blocked) {
+		return {
+			label: "Blocked",
+			tone: "blocked",
+			description: "Queries for this name get a blocked response.",
+		};
+	}
+	if (result.forward_zone !== null) {
+		return {
+			label: "Forwarded",
+			tone: "forwarded",
+			description: `Queries go to the resolver for zone ${result.forward_zone}.`,
+		};
+	}
+	return {
+		label: "Allowed",
+		tone: "allowed",
+		description: "Queries resolve through the upstream pool.",
+	};
+}
+
+function errorMessage(error: unknown): string {
+	if (error instanceof ApiError) {
+		if (error.status === 503) {
+			return "No filter snapshot is loaded yet — the server is starting or degraded. Try again shortly.";
+		}
+		if (error.status === 429) {
+			return error.retryAfter !== undefined
+				? `Rate limited. Try again in ${error.retryAfter}s.`
+				: "Rate limited. Try again shortly.";
+		}
+		return error.message;
+	}
+	return "Could not reach the server.";
+}
+
+function DetailRow({ label, children }: { label: string; children: ReactNode }) {
+	return (
+		<div {...stylex.props(styles.detailRow)}>
+			<dt {...stylex.props(styles.detailTerm)}>{label}</dt>
+			<dd {...stylex.props(styles.detailValue)}>{children}</dd>
+		</div>
+	);
+}
+
+function VerdictCard({ result, groups }: { result: LookupResult; groups: Group[] }) {
+	const verdict = verdictOf(result);
+	const groupName = groups.find((group) => group.id === result.group_id)?.name ?? `#${result.group_id}`;
+
+	return (
+		<div {...stylex.props(styles.card)}>
+			<div {...stylex.props(styles.banner, toneStyle(verdict.tone))}>
+				<h2 {...stylex.props(styles.verdictLabel)}>{verdict.label}</h2>
+				<p {...stylex.props(styles.verdictDescription)}>{verdict.description}</p>
+			</div>
+			<dl {...stylex.props(styles.details)}>
+				<DetailRow label="Domain">
+					<span {...stylex.props(shared.mono)}>{result.domain}</span>
+				</DetailRow>
+				<DetailRow label="Group">{groupName}</DetailRow>
+				<DetailRow label="Local record">{result.local_records ? "Yes" : "No"}</DetailRow>
+				<DetailRow label="Forward zone">
+					{result.forward_zone !== null ? (
+						<span {...stylex.props(shared.mono)}>{result.forward_zone}</span>
+					) : (
+						"—"
+					)}
+				</DetailRow>
+				<DetailRow label="Blocked">{result.blocked ? "Yes" : "No"}</DetailRow>
+				<DetailRow label="Reason">
+					<span {...stylex.props(shared.mono)}>{result.reason}</span>
+				</DetailRow>
+				<DetailRow label="Matched pattern">
+					{result.matched !== "" ? <span {...stylex.props(shared.mono)}>{result.matched}</span> : "—"}
+				</DetailRow>
+				<DetailRow label="Blocklist source">
+					{result.source_url !== null ? (
+						<a
+							href={result.source_url}
+							target="_blank"
+							rel="noreferrer"
+							{...stylex.props(styles.sourceLink, shared.focusRing)}
+						>
+							{result.source_url}
+						</a>
+					) : (
+						"—"
+					)}
+				</DetailRow>
+				<DetailRow label="Safe search rewrite">
+					{result.safe_search_rewrite !== null ? (
+						<span {...stylex.props(shared.mono)}>{result.safe_search_rewrite}</span>
+					) : (
+						"—"
+					)}
+				</DetailRow>
+			</dl>
+		</div>
+	);
+}
+
+export default function PolicyTestPage() {
+	const groups = useSuspenseQuery(groupsQuery()).data;
+	const preselectedGroupId = defaultGroupId(groups);
+
+	// A `?domain=` link (from a query's detail page) arrives already asking the
+	// question, so it runs the simulation rather than leaving a filled-in form.
+	const search = useSearch({ from: "/shell/activity/test" });
+	const [domain, setDomain] = useState(search.domain ?? "");
+	const [groupId, setGroupId] = useState(preselectedGroupId);
+	const [submitted, setSubmitted] = useState<Submitted | null>(
+		search.domain === undefined ? null : { domain: search.domain, groupId: preselectedGroupId },
+	);
+
+	const lookup = useQuery({
+		...lookupQuery(submitted?.domain ?? "", submitted?.groupId),
+		enabled: submitted !== null,
+	});
+
+	function onSubmit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		const trimmed = domain.trim();
+		if (trimmed === "") return;
+		if (submitted !== null && submitted.domain === trimmed && submitted.groupId === groupId) {
+			void lookup.refetch();
+			return;
+		}
+		setSubmitted({ domain: trimmed, groupId });
+	}
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Current policy simulation</h1>
+			<p {...stylex.props(styles.intro)}>
+				What the pipeline <em>would</em> do with a domain right now: local records, forward zones, block
+				decision, safe search. This reads the configuration in force at this moment, so it explains nothing
+				about a query already answered — a detail page does that.
+			</p>
+			<form onSubmit={onSubmit} {...stylex.props(styles.form)}>
+				<div {...stylex.props(styles.domainField)}>
+					<label htmlFor="policy-test-domain" {...stylex.props(styles.fieldLabel)}>
+						Domain
+					</label>
+					<input
+						id="policy-test-domain"
+						required
+						value={domain}
+						onChange={(event) => setDomain(event.target.value)}
+						placeholder="ads.example.com"
+						{...stylex.props(shared.input, shared.focusRing)}
+					/>
+				</div>
+				<div>
+					<Select
+						label="Group"
+						value={String(groupId)}
+						onChange={(value) => setGroupId(Number(value))}
+						options={groups.map((group) => ({ value: String(group.id), label: group.name }))}
+					/>
+				</div>
+				<button
+					type="submit"
+					disabled={lookup.isFetching}
+					{...stylex.props(shared.largePrimaryButton, shared.focusRing)}
+				>
+					Simulate
+				</button>
+			</form>
+			{lookup.isFetching && <p {...stylex.props(styles.note)}>Simulating…</p>}
+			{!lookup.isFetching && lookup.isError && (
+				<p role="alert" {...stylex.props(styles.error)}>
+					{errorMessage(lookup.error)}
+				</p>
+			)}
+			{!lookup.isFetching && lookup.data !== undefined && !lookup.isError && (
+				<VerdictCard result={lookup.data} groups={groups} />
+			)}
+		</section>
+	);
+}

admin/src/features/activity/ProvenanceDetail.tsx

@@ -0,0 +1,305 @@
+/**
+ * One query, explained in the order it met the pipeline.
+ *
+ * This is the body of the detail surface, with no route in it, because two
+ * surfaces show it: the persisted detail page, which fetched the row by id, and
+ * a live row, whose provenance arrived in the stream frame and which SQLite may
+ * not have written yet. The related actions are links into routes, so the
+ * caller passes them in already built.
+ */
+
+import type { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { formatMicros, formatTime } from "@/lib/format";
+import type { PolicyReason, Provenance } from "@/lib/types";
+import { clientLabel, useClientNames } from "@/features/clients/clientNames";
+import {
+	policyActionLabel,
+	policyReasonLabel,
+	qclassName,
+	rcodeName,
+	routeKindLabel,
+} from "@/features/provenance/provenanceCopy";
+import { qtypeName } from "@/features/provenance/qtype";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	heading: {
+		marginTop: "0.5rem",
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+		wordBreak: "break-all",
+	},
+	subtitle: {
+		marginTop: "0.25rem",
+		color: colors.textSecondary,
+	},
+	/** The recorded facts, fenced off from the live links below them. */
+	record: {
+		marginTop: "1rem",
+		maxWidth: "48rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		padding: "1rem",
+	},
+	recordNote: {
+		fontSize: "0.8125rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	section: {
+		marginTop: "1rem",
+		borderTopWidth: { default: 1, ":first-of-type": 0 },
+		borderTopStyle: "solid",
+		borderTopColor: colors.border,
+		paddingTop: { default: "1rem", ":first-of-type": 0 },
+	},
+	sectionHeading: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 600,
+		letterSpacing: "0.05em",
+		textTransform: "uppercase",
+		color: colors.textMuted,
+	},
+	facts: {
+		marginTop: "0.5rem",
+		marginBottom: 0,
+		display: "grid",
+		gap: "0.375rem 1rem",
+		gridTemplateColumns: {
+			default: "auto",
+			"@media (min-width: 640px)": "max-content 1fr",
+		},
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	term: {
+		color: colors.textMuted,
+	},
+	value: {
+		margin: 0,
+		wordBreak: "break-all",
+	},
+	muted: {
+		color: colors.textMuted,
+	},
+	related: {
+		marginTop: "1.5rem",
+		maxWidth: "48rem",
+	},
+	relatedHeading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	relatedNote: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	relatedList: {
+		marginTop: "0.5rem",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	link: {
+		color: colors.primaryOnSurface,
+	},
+});
+
+/** The look of one related action, so every caller's links match. */
+export const provenanceRelatedLink = styles.link;
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+	return (
+		<div {...stylex.props(styles.section)}>
+			<h2 {...stylex.props(styles.sectionHeading)}>{title}</h2>
+			<dl {...stylex.props(styles.facts)}>{children}</dl>
+		</div>
+	);
+}
+
+function Fact({ label, children }: { label: string; children: ReactNode }) {
+	return (
+		<>
+			<dt {...stylex.props(styles.term)}>{label}</dt>
+			<dd {...stylex.props(styles.value)}>{children}</dd>
+		</>
+	);
+}
+
+/**
+ * A recorded name, in the face the rest of the interface gives to names. It
+ * wraps the value rather than the row, so the prose that stands in for a
+ * missing one is not set in the same typewriter face.
+ */
+function Mono({ children }: { children: string }) {
+	return <span {...stylex.props(shared.mono)}>{children}</span>;
+}
+
+/** An empty text field means the server recorded nothing there, never an empty value. */
+function Absent({ children }: { children: string }) {
+	return <span {...stylex.props(styles.muted)}>{children}</span>;
+}
+
+/**
+ * What an empty `matched` means. `no_match` is the only reason the matcher
+ * itself records with nothing to show; every other empty one names a pipeline
+ * step that answered before filtering — a local record, a forward zone, a pause
+ * (see `PolicyReason` in src/storage/provenance.zig) — where "nothing matched"
+ * would claim an evaluation that never happened.
+ */
+function unmatchedLabel(reason: PolicyReason): string {
+	return reason === "no_match" ? "Nothing matched" : "The matcher never ran";
+}
+
+interface Props {
+	provenance: Provenance;
+	/**
+	 * The log row this explains, or null for a frame read straight off the
+	 * stream. Null is the same fact `QuerySummary.id` carries: the event
+	 * precedes its own insert, so there is no row to name and none is invented.
+	 */
+	persistedId: number | null;
+	/** The related-action links, built by whichever surface owns the routes. */
+	relatedActions: ReactNode;
+}
+
+export default function ProvenanceDetail({ provenance, persistedId, relatedActions }: Props) {
+	const { request, group, policy, rewrites, route, response } = provenance;
+	const clientNames = useClientNames();
+	const currentClient = clientLabel(request.client, clientNames);
+
+	return (
+		<>
+			<h1 {...stylex.props(styles.heading, shared.mono)}>{request.domain}</h1>
+			<p {...stylex.props(styles.subtitle)}>
+				{formatTime(request.time)} — {policyActionLabel(policy.action)}
+				{/* The verdict alone reads as a success; a non-NOERROR answer says otherwise. */}
+				{response.rcode !== 0 && ` — ${rcodeName(response.rcode)}`}
+			</p>
+
+			<div {...stylex.props(styles.record)}>
+				<p {...stylex.props(styles.recordNote)}>
+					What was recorded when this query was answered. Group and blocklist names are the ones in force at
+					that moment; they may have been renamed or deleted since.
+					{persistedId === null &&
+						" This is the event as it was streamed; the query log may not have written it yet."}
+				</p>
+
+				<Section title="Request">
+					<Fact label="Time">{formatTime(request.time)}</Fact>
+					<Fact label="Domain">
+						<Mono>{request.domain}</Mono>
+					</Fact>
+					<Fact label="Client">
+						<Mono>{request.client}</Mono>
+					</Fact>
+					<Fact label="Type">{qtypeName(request.qtype)}</Fact>
+					<Fact label="Class">{qclassName(request.qclass)}</Fact>
+				</Section>
+
+				<Section title="Group">
+					<Fact label="Name">{group.name === "" ? <Absent>No group recorded</Absent> : group.name}</Fact>
+					<Fact label="Id">{group.id === null ? <Absent>—</Absent> : group.id}</Fact>
+				</Section>
+
+				<Section title="Policy">
+					<Fact label="Decision">{policyActionLabel(policy.action)}</Fact>
+					<Fact label="Reason">{policyReasonLabel(policy.reason)}</Fact>
+					<Fact label="Matched">
+						{policy.matched === "" ? (
+							<Absent>{unmatchedLabel(policy.reason)}</Absent>
+						) : (
+							<Mono>{policy.matched}</Mono>
+						)}
+					</Fact>
+					<Fact label="Blocklist">
+						{policy.source_name === "" ? (
+							<Absent>Not a blocklist decision</Absent>
+						) : policy.source_id === null ? (
+							policy.source_name
+						) : (
+							`${policy.source_name} (#${policy.source_id})`
+						)}
+					</Fact>
+				</Section>
+
+				<Section title="Rewrites">
+					<Fact label="CNAME target">
+						{rewrites.cname_target === "" ? (
+							<Absent>The queried name was decided directly</Absent>
+						) : (
+							<Mono>{rewrites.cname_target}</Mono>
+						)}
+					</Fact>
+					<Fact label="Safe search">
+						{rewrites.safe_search_target === "" ? (
+							<Absent>No rewrite</Absent>
+						) : (
+							<Mono>{rewrites.safe_search_target}</Mono>
+						)}
+					</Fact>
+				</Section>
+
+				<Section title="Route">
+					<Fact label="Answered by">{routeKindLabel(route.kind)}</Fact>
+					<Fact label="Forward zone">
+						{route.forward_zone === "" ? <Absent>—</Absent> : <Mono>{route.forward_zone}</Mono>}
+					</Fact>
+					<Fact label="Upstream">
+						{route.upstream === "" ? <Absent>No upstream exchange</Absent> : <Mono>{route.upstream}</Mono>}
+					</Fact>
+				</Section>
+
+				<Section title="Response">
+					<Fact label="Result">{rcodeName(response.rcode)}</Fact>
+					<Fact label="Took">
+						{response.duration_us === null ? (
+							<Absent>Not measured</Absent>
+						) : (
+							formatMicros(response.duration_us)
+						)}
+					</Fact>
+				</Section>
+			</div>
+
+			{/* A named region, because the Pause it may offer is not the only Pause
+			    on screen: the sidebar carries one too, and the two answer different
+			    questions. */}
+			<section aria-labelledby="related-actions" {...stylex.props(styles.related)}>
+				<h2 id="related-actions" {...stylex.props(styles.relatedHeading)}>
+					Related
+				</h2>
+				<p {...stylex.props(styles.relatedNote)}>
+					These read the current configuration, which may no longer be the one that decided this query.
+				</p>
+				{currentClient !== null && (
+					<p {...stylex.props(styles.relatedNote)}>
+						{currentClient.learned ? (
+							<>
+								Reverse DNS currently resolves <Mono>{request.client}</Mono> to{" "}
+								<Mono>{currentClient.text}</Mono>.
+							</>
+						) : (
+							<>
+								The client list currently names <Mono>{request.client}</Mono> “{currentClient.text}”.
+							</>
+						)}
+					</p>
+				)}
+				<div {...stylex.props(styles.relatedList)}>{relatedActions}</div>
+			</section>
+		</>
+	);
+}

admin/src/features/activity/RelatedActions.tsx

@@ -0,0 +1,67 @@
+/**
+ * The links out of one query's detail, shared by the persisted detail page and
+ * the in-place detail a streamed row opens.
+ *
+ * Both surfaces answer the same four follow-up questions, and both are read
+ * from an investigation that has a time range. Every link therefore carries
+ * absolute bounds: a link that said "recently" would show a different set of
+ * queries every time it was opened, which is the opposite of what linking to an
+ * incident is for.
+ */
+
+import { Link } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import PauseControl from "@/features/pause/PauseControl";
+import { styles as shared } from "@/ui/styles";
+import { provenanceRelatedLink } from "./ProvenanceDetail";
+import { diagnosticsBounds, relatedBounds } from "./relatedLinks";
+import type { ActivitySearch } from "./search";
+
+interface Props {
+	domain: string;
+	client: string;
+	/** The second this query was answered, which every window is centred on. */
+	ts: number;
+	/** The Activity search the reader came from; its bounds win over the defaults. */
+	origin: Pick<ActivitySearch, "since" | "until">;
+	/**
+	 * This query was blocked. Pausing is a valid answer to a block the reader
+	 * disagrees with, and to nothing else here — so the control appears for a
+	 * block and not beside an allowed query it could not have caused.
+	 */
+	blocked: boolean;
+}
+
+export default function RelatedActions({ domain, client, ts, origin, blocked }: Props) {
+	const bounds = relatedBounds(ts, origin);
+	const window = diagnosticsBounds(ts);
+	return (
+		<>
+			<Link to="/activity/test" search={{ domain }} {...stylex.props(provenanceRelatedLink, shared.focusRing)}>
+				Test this domain against current policy
+			</Link>
+			<Link
+				to="/activity"
+				search={{ mode: "history", domain, client: undefined, blocked: undefined, ...bounds }}
+				{...stylex.props(provenanceRelatedLink, shared.focusRing)}
+			>
+				All activity for this domain
+			</Link>
+			<Link
+				to="/activity"
+				search={{ mode: "history", client, domain: undefined, blocked: undefined, ...bounds }}
+				{...stylex.props(provenanceRelatedLink, shared.focusRing)}
+			>
+				All activity from this client
+			</Link>
+			<Link
+				to="/diagnostics"
+				search={{ since: window.since, until: window.until }}
+				{...stylex.props(provenanceRelatedLink, shared.focusRing)}
+			>
+				Diagnostics around this query
+			</Link>
+			{blocked && <PauseControl />}
+		</>
+	);
+}

admin/src/features/activity/cells.test.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/react";
+import type { QueryRow } from "@/lib/types";
+import type { ClientNames } from "@/features/clients/clientNames";
+import { queryRow } from "@/features/provenance/provenanceFixture";
+import { summarizeRow, type QuerySummary } from "@/features/provenance/querySummary";
+import { ACTIVITY_COLUMNS, ActivityCells, ActivityTableHead, resultLabel, routeLabel } from "./cells";
+
+const noNames: ClientNames = new Map();
+
+function renderRow(overrides: Partial<QueryRow> = {}): HTMLTableRowElement {
+	const row: QuerySummary = summarizeRow(queryRow(1, overrides));
+	render(
+		<table>
+			<ActivityTableHead />
+			<tbody>
+				<tr data-testid="row">
+					<ActivityCells
+						row={row}
+						clientNames={noNames}
+						renderDomain={(id, children) => <a href={`/activity/queries/${id}`}>{children}</a>}
+					/>
+				</tr>
+			</tbody>
+		</table>,
+	);
+	return screen.getByTestId("row") as HTMLTableRowElement;
+}
+
+/** The cell under a header, read by its column name rather than its index. */
+function cell(row: HTMLTableRowElement, column: (typeof ACTIVITY_COLUMNS)[number]): string {
+	const index = ACTIVITY_COLUMNS.indexOf(column);
+	return row.cells[index]?.textContent ?? "";
+}
+
+test("the head names the seven columns in order", () => {
+	render(
+		<table>
+			<ActivityTableHead />
+		</table>,
+	);
+	const headers = screen.getAllByRole("columnheader").map((header) => header.textContent);
+	expect(headers).toEqual(["Time", "Domain", "Client", "Type", "Result", "Route", "Duration"]);
+});
+
+test("an allowed NOERROR row reads as the answer it got, with no badge", () => {
+	const row = renderRow({ blocked: false, rcode: 0, route_kind: "upstream", response_time_us: 1234 });
+	expect(cell(row, "Result")).toBe("NOERROR");
+	expect(cell(row, "Route")).toBe("Upstream");
+	expect(cell(row, "Duration")).toBe("1.2 ms");
+	expect(cell(row, "Type")).toBe("A");
+});
+
+test("a blocked row reads Blocked even though the client got NOERROR", () => {
+	const row = renderRow({ blocked: true, rcode: 0, route_kind: "blocked", policy_reason: "blocklist_domain" });
+	expect(cell(row, "Result")).toBe("Blocked");
+	expect(cell(row, "Route")).toBe("Blocked");
+});
+
+test("a SERVFAIL row names the code", () => {
+	const row = renderRow({ blocked: false, rcode: 2, route_kind: "upstream", response_time_us: null });
+	expect(cell(row, "Result")).toBe("SERVFAIL");
+	expect(cell(row, "Duration")).toBe("—");
+});
+
+test("a cache hit names the cache as the route", () => {
+	const row = renderRow({ blocked: false, rcode: 0, route_kind: "cache", cache_hit: true, upstream: "" });
+	expect(cell(row, "Route")).toBe("Cache");
+	expect(cell(row, "Result")).toBe("NOERROR");
+});
+
+test("an unassigned extended rcode keeps the numeric fallback, without the long form's parentheses", () => {
+	const row = renderRow({ blocked: false, rcode: 3841 });
+	expect(cell(row, "Result")).toBe("RCODE 3841");
+});
+
+test("a persisted row links its domain to the detail the caller chose", () => {
+	renderRow({ domain: "ads.example" });
+	expect(screen.getByRole("link", { name: "ads.example" }).getAttribute("href")).toBe("/activity/queries/1");
+});
+
+test("a streamed row reaches the renderer with a null id, and can render as plain text", () => {
+	render(
+		<table>
+			<tbody>
+				<tr data-testid="row">
+					<ActivityCells
+						row={{ ...summarizeRow(queryRow(1)), id: null }}
+						clientNames={noNames}
+						renderDomain={(id, children) => {
+							expect(id).toBeNull();
+							return children;
+						}}
+					/>
+				</tr>
+			</tbody>
+		</table>,
+	);
+	expect(screen.queryByRole("link")).toBeNull();
+	expect(screen.getByTestId("row").textContent).toContain("example.com");
+});
+
+test("every route kind has a compact label", () => {
+	expect(routeLabel("blocked")).toBe("Blocked");
+	expect(routeLabel("local")).toBe("Local");
+	expect(routeLabel("forward_zone")).toBe("Forward zone");
+	expect(routeLabel("upstream")).toBe("Upstream");
+	expect(routeLabel("cache")).toBe("Cache");
+	expect(routeLabel("rejected")).toBe("Rejected");
+});
+
+test("resultLabel is the pure form of the Result cell", () => {
+	expect(resultLabel({ blocked: true, rcode: 2 })).toBe("Blocked");
+	expect(resultLabel({ blocked: false, rcode: 5 })).toBe("REFUSED");
+});

admin/src/features/activity/cells.tsx

@@ -0,0 +1,171 @@
+/**
+ * The seven columns of the Activity table: Time, Domain, Client, Type, Result,
+ * Route and Duration.
+ *
+ * The labels here are the compact forms a scanned table needs. The detail page
+ * keeps `provenanceCopy`'s long forms, which spell out the same facts with room
+ * for the rcode number and the "answered by" phrasing.
+ *
+ * The cells render both a stored row and a streamed event, so they know nothing
+ * about routes: the caller renders the Domain cell's contents and decides what,
+ * if anything, a row opens. A streamed row has no id — the frame precedes its
+ * own insert — and only the caller knows whether it has a surface for one.
+ */
+
+import type { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { formatMicros, formatTime } from "@/lib/format";
+import type { RouteKind } from "@/lib/types";
+import { ClientName, type ClientNames } from "@/features/clients/clientNames";
+import { rcodeShortName } from "@/features/provenance/provenanceCopy";
+import { qtypeName } from "@/features/provenance/qtype";
+import type { QuerySummary } from "@/features/provenance/querySummary";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	head: {
+		backgroundColor: { default: "oklch(98.5% 0 none)", [DARK]: "oklch(21% 0.006 285.885)" },
+		textAlign: "left",
+	},
+	th: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontWeight: 500,
+		color: colors.textSecondary,
+	},
+	cell: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+	},
+	nowrap: {
+		whiteSpace: "nowrap",
+	},
+	breakAll: {
+		wordBreak: "break-all",
+	},
+	small: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+	muted: {
+		color: colors.textMuted,
+	},
+	domainLink: {
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	/**
+	 * The badge shape and its weight are the signal; the tint only says which
+	 * kind of unhappy answer this was. A monochrome or colour-blind reading of
+	 * the table still separates a blocked or failed row from a plain NOERROR
+	 * one, which a hue alone would not.
+	 */
+	badge: {
+		display: "inline-block",
+		borderRadius: "0.25rem",
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 600,
+	},
+	blockedBadge: {
+		backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(39.6% 0.141 25.723)" },
+		color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
+	},
+	faultBadge: {
+		backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(41.4% 0.112 45.904)" },
+		color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(90.1% 0.076 70.697)" },
+	},
+});
+
+const ROUTE_LABELS: Record<RouteKind, string> = {
+	blocked: "Blocked",
+	local: "Local",
+	forward_zone: "Forward zone",
+	upstream: "Upstream",
+	cache: "Cache",
+	rejected: "Rejected",
+};
+
+/** The compact Route label. `Record` over the union, so a new kind fails `tsc`. */
+export function routeLabel(kind: RouteKind): string {
+	return ROUTE_LABELS[kind];
+}
+
+/**
+ * The compact Result label. A block is the answer the operator asked nxdns for,
+ * so it wins over the rcode it was delivered as — a blocked name answered with
+ * NOERROR and a zero address is still "Blocked". Everything else reads as the
+ * code the client saw.
+ */
+export function resultLabel(row: Pick<QuerySummary, "blocked" | "rcode">): string {
+	return row.blocked ? "Blocked" : rcodeShortName(row.rcode);
+}
+
+/**
+ * What a row's domain is wrapped in. The caller owns the routes, so it builds
+ * the element; the look stays here, as `activityDomainLink`, which the caller
+ * spreads onto the control itself — a link's own colour beats one inherited
+ * from a wrapper. `id` is null for a streamed row, which history has no surface
+ * for and live opens from memory.
+ */
+export type DomainRenderer = (id: number | null, children: ReactNode) => ReactNode;
+
+export const activityDomainLink = styles.domainLink;
+
+export function ResultCellContent({ row }: { row: Pick<QuerySummary, "blocked" | "rcode"> }) {
+	const label = resultLabel(row);
+	if (row.blocked) return <span {...stylex.props(styles.badge, styles.blockedBadge)}>{label}</span>;
+	if (row.rcode !== 0) return <span {...stylex.props(styles.badge, styles.faultBadge)}>{label}</span>;
+	return <span {...stylex.props(styles.small, styles.muted)}>{label}</span>;
+}
+
+export function ActivityCells({
+	row,
+	clientNames,
+	renderDomain,
+}: {
+	row: QuerySummary;
+	clientNames: ClientNames;
+	renderDomain: DomainRenderer;
+}) {
+	return (
+		<>
+			<td {...stylex.props(styles.cell, styles.nowrap, styles.muted)}>{formatTime(row.ts)}</td>
+			<td {...stylex.props(styles.cell, styles.small, styles.breakAll, shared.mono)}>
+				{renderDomain(row.id, row.domain)}
+			</td>
+			<td {...stylex.props(styles.cell, styles.small, styles.nowrap)}>
+				<ClientName ip={row.client_ip} names={clientNames} />
+			</td>
+			<td {...stylex.props(styles.cell, styles.nowrap)}>{qtypeName(row.qtype)}</td>
+			<td {...stylex.props(styles.cell, styles.nowrap)}>
+				<ResultCellContent row={row} />
+			</td>
+			<td {...stylex.props(styles.cell, styles.nowrap)}>{routeLabel(row.route_kind)}</td>
+			<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>
+				{row.response_time_us === null ? "—" : formatMicros(row.response_time_us)}
+			</td>
+		</>
+	);
+}
+
+export const ACTIVITY_COLUMNS = ["Time", "Domain", "Client", "Type", "Result", "Route", "Duration"] as const;
+
+export function ActivityTableHead() {
+	return (
+		<thead {...stylex.props(styles.head)}>
+			<tr>
+				{ACTIVITY_COLUMNS.map((column) => (
+					<th key={column} {...stylex.props(styles.th)}>
+						{column}
+					</th>
+				))}
+			</tr>
+		</thead>
+	);
+}

admin/src/features/activity/datetime.test.ts

@@ -0,0 +1,100 @@
+import {
+	datetimeField,
+	datetimeLocalToUnix,
+	editDatetimeField,
+	resolveDatetimeField,
+	unixToDatetimeLocal,
+} from "./datetime";
+
+/**
+ * Every assertion here is about local time, so the zone has to be pinned. New
+ * York is the zone the DST cases are written for: the fold is 2024-11-03 01:30
+ * and the gap is 2024-03-10 02:30.
+ */
+// The app never reads `process`, so `src` is typed without node's globals; the
+// test host is node, where assigning `TZ` re-reads the zone for `Date`.
+declare const process: { env: Record<string, string | undefined> };
+
+const originalTz = process.env["TZ"];
+beforeAll(() => {
+	process.env["TZ"] = "America/New_York";
+});
+afterAll(() => {
+	process.env["TZ"] = originalTz;
+});
+
+/** 2024-06-01T12:34:56 EDT. */
+const SUMMER = 1_717_259_696;
+
+test("a non-zero-second instant round trips", () => {
+	expect(unixToDatetimeLocal(SUMMER)).toBe("2024-06-01T12:34:56");
+	expect(datetimeLocalToUnix("2024-06-01T12:34:56")).toBe(SUMMER);
+});
+
+test("text without seconds parses as :00", () => {
+	expect(datetimeLocalToUnix("2024-06-01T12:34")).toBe(datetimeLocalToUnix("2024-06-01T12:34:00"));
+});
+
+test("text that is not a datetime-local value names no instant", () => {
+	expect(datetimeLocalToUnix("")).toBeUndefined();
+	expect(datetimeLocalToUnix("yesterday")).toBeUndefined();
+	expect(datetimeLocalToUnix("2024-06-01")).toBeUndefined();
+	expect(datetimeLocalToUnix("2024-13-01T00:00:00")).toBeUndefined();
+});
+
+/** 2024-11-03 01:30 EDT and 01:30 EST: two instants, one wall clock. */
+const FOLD_FIRST = 1_730_611_800;
+const FOLD_SECOND = 1_730_615_400;
+
+test("the fall-back fold gives two instants the same text", () => {
+	expect(unixToDatetimeLocal(FOLD_FIRST)).toBe("2024-11-03T01:30:00");
+	expect(unixToDatetimeLocal(FOLD_SECOND)).toBe("2024-11-03T01:30:00");
+	expect(datetimeLocalToUnix("2024-11-03T01:30:00")).toBe(FOLD_FIRST);
+});
+
+test("an untouched fold bound applies the instant it was seeded with, not a re-parse of its text", () => {
+	const field = datetimeField(FOLD_SECOND);
+	expect(field.text).toBe("2024-11-03T01:30:00");
+	expect(resolveDatetimeField(field)).toEqual({ ok: true, value: FOLD_SECOND });
+});
+
+test("an edited fold bound resolves to the first of the two instants, which is what its text says", () => {
+	const field = editDatetimeField(datetimeField(FOLD_SECOND), "2024-11-03T01:30:00");
+	expect(resolveDatetimeField(field)).toEqual({ ok: true, value: FOLD_FIRST });
+});
+
+test("a spring-forward time that exists on no clock is rejected rather than slid forward an hour", () => {
+	const field = editDatetimeField(datetimeField(undefined), "2024-03-10T02:30:00");
+	expect(datetimeLocalToUnix("2024-03-10T02:30:00")).toBe(1_710_055_800);
+	expect(unixToDatetimeLocal(1_710_055_800)).toBe("2024-03-10T03:30:00");
+	expect(resolveDatetimeField(field)).toEqual({ ok: false, reason: "nonexistent" });
+});
+
+test("an edited bound round trips with non-zero seconds", () => {
+	const field = editDatetimeField(datetimeField(undefined), "2024-06-01T12:34:56");
+	expect(resolveDatetimeField(field)).toEqual({ ok: true, value: SUMMER });
+});
+
+test("clearing an edited bound drops the filter", () => {
+	const field = editDatetimeField(datetimeField(SUMMER), "");
+	expect(resolveDatetimeField(field)).toEqual({ ok: true, value: undefined });
+});
+
+test("an unparseable edit is reported, never silently dropped", () => {
+	const field = editDatetimeField(datetimeField(undefined), "2024-06-32T99:99");
+	expect(resolveDatetimeField(field)).toEqual({ ok: false, reason: "unparseable" });
+});
+
+test("an unset bound seeds an empty field that stays unset", () => {
+	const field = datetimeField(undefined);
+	expect(field.text).toBe("");
+	expect(resolveDatetimeField(field)).toEqual({ ok: true, value: undefined });
+});
+
+test("a fractional part on the seconds is parsed and dropped, not rejected", () => {
+	// jsdom, and any engine that sanitizes to the full grammar, hands the input
+	// back with milliseconds attached; a bound is a whole second either way.
+	const field = editDatetimeField(datetimeField(undefined), "2023-11-14T23:13:37.000");
+	const resolved = resolveDatetimeField(field);
+	expect(resolved).toEqual({ ok: true, value: datetimeLocalToUnix("2023-11-14T23:13:37") });
+});

admin/src/features/activity/datetime.ts

@@ -0,0 +1,95 @@
+/**
+ * The bridge between a `datetime-local` input and the unix seconds the URL and
+ * the API speak.
+ *
+ * Local wall-clock text is lossy in a way unix seconds are not. Twice a year a
+ * fall-back fold gives two instants the same text, and a spring-forward gap
+ * gives an hour of text no instant at all. So the text is never the authority:
+ * a bound the operator did not touch is carried through as the number it
+ * already was, and a bound they did edit is accepted only when it survives a
+ * round trip unchanged.
+ */
+
+/** Zero-padded to the width the `datetime-local` grammar requires. */
+function pad(value: number, width: number): string {
+	return String(value).padStart(width, "0");
+}
+
+/**
+ * Unix seconds → the local wall-clock text a `datetime-local` input holds,
+ * always with seconds, because the inputs run at `step={1}`.
+ */
+export function unixToDatetimeLocal(unix: number): string {
+	const date = new Date(unix * 1000);
+	const day = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1, 2)}-${pad(date.getDate(), 2)}`;
+	const time = `${pad(date.getHours(), 2)}:${pad(date.getMinutes(), 2)}:${pad(date.getSeconds(), 2)}`;
+	return `${day}T${time}`;
+}
+
+const DATETIME_LOCAL = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,3})?)?$/;
+
+/**
+ * The text with its seconds spelled out, or undefined when it is not a
+ * `datetime-local` value at all. A browser omits `:00` seconds even at
+ * `step={1}`, so the canonical form is what a round trip compares against.
+ *
+ * The grammar allows a fractional part after the seconds and some engines emit
+ * one; a bound is a whole second here and on the wire, so it is parsed and then
+ * dropped rather than treated as text we do not recognise.
+ */
+function canonicalize(value: string): string | undefined {
+	const match = DATETIME_LOCAL.exec(value);
+	if (match === null) return undefined;
+	return `${match[1]}-${match[2]}-${match[3]}T${match[4]}:${match[5]}:${match[6] ?? "00"}`;
+}
+
+/** Local wall-clock text → unix seconds, or undefined when it names no instant. */
+export function datetimeLocalToUnix(value: string): number | undefined {
+	const canonical = canonicalize(value);
+	if (canonical === undefined) return undefined;
+	const ms = new Date(canonical).getTime();
+	return Number.isFinite(ms) ? Math.floor(ms / 1000) : undefined;
+}
+
+/**
+ * One bound of the filter form: what the input shows, what the applied search
+ * carried, and whether the operator has touched it since.
+ */
+export interface DatetimeField {
+	text: string;
+	/** The applied value this field was seeded from, reused while `dirty` is false. */
+	original: number | undefined;
+	dirty: boolean;
+}
+
+export type DatetimeResolution =
+	{ ok: true; value: number | undefined } | { ok: false; reason: "unparseable" | "nonexistent" };
+
+export function datetimeField(original: number | undefined): DatetimeField {
+	return { text: original === undefined ? "" : unixToDatetimeLocal(original), original, dirty: false };
+}
+
+export function editDatetimeField(field: DatetimeField, text: string): DatetimeField {
+	return { ...field, text, dirty: true };
+}
+
+/**
+ * The unix value this bound applies.
+ *
+ * An untouched field resolves to the number it was seeded with, never to a
+ * re-parse of its own text: the text of a fall-back instant names two of them,
+ * and re-parsing would silently move a bound the operator never edited.
+ *
+ * An edited field is parsed, then formatted back. A wall-clock time inside the
+ * spring-forward gap exists on no clock, and `Date` quietly slides it forward
+ * an hour; the round trip catches that and the caller reports it instead of
+ * filtering on an hour nobody asked for.
+ */
+export function resolveDatetimeField(field: DatetimeField): DatetimeResolution {
+	if (!field.dirty) return { ok: true, value: field.original };
+	if (field.text.trim() === "") return { ok: true, value: undefined };
+	const unix = datetimeLocalToUnix(field.text);
+	if (unix === undefined) return { ok: false, reason: "unparseable" };
+	if (unixToDatetimeLocal(unix) !== canonicalize(field.text)) return { ok: false, reason: "nonexistent" };
+	return { ok: true, value: unix };
+}

admin/src/features/activity/relatedLinks.test.ts

@@ -0,0 +1,58 @@
+import { diagnosticsBounds, relatedBounds, RELATED_WINDOW_SECONDS } from "./relatedLinks";
+import { queriesFilterOf, validateActivitySearch } from "./search";
+
+const TS = 1_700_000_000;
+
+test("an unbounded origin falls back to the window either side of the query", () => {
+	expect(relatedBounds(TS, { since: undefined, until: undefined })).toEqual({
+		since: TS - RELATED_WINDOW_SECONDS,
+		until: TS + RELATED_WINDOW_SECONDS,
+	});
+});
+
+test("a bounded origin carries both of its bounds through unchanged", () => {
+	expect(relatedBounds(TS, { since: 1, until: 2 })).toEqual({ since: 1, until: 2 });
+});
+
+test("a half-bounded origin keeps its half and falls back on the other", () => {
+	expect(relatedBounds(TS, { since: 1, until: undefined })).toEqual({
+		since: 1,
+		until: TS + RELATED_WINDOW_SECONDS,
+	});
+	expect(relatedBounds(TS, { since: undefined, until: 2 })).toEqual({
+		since: TS - RELATED_WINDOW_SECONDS,
+		until: 2,
+	});
+});
+
+test("an origin bound of zero is a bound, not a missing one", () => {
+	expect(relatedBounds(TS, { since: 0, until: 0 })).toEqual({ since: 0, until: 0 });
+});
+
+test("the diagnostics window is the fixed window either side of the query, never inherited", () => {
+	expect(diagnosticsBounds(TS)).toEqual({ since: TS - RELATED_WINDOW_SECONDS, until: TS + RELATED_WINDOW_SECONDS });
+	expect(diagnosticsBounds(0)).toEqual({ since: -RELATED_WINDOW_SECONDS, until: RELATED_WINDOW_SECONDS });
+});
+
+/**
+ * The admin half of the server's `since <= ts < until` window contract
+ * (queries_repo.zig): what a related link emits has to survive the validation
+ * the Activity route puts every search through, or the link would silently open
+ * a wider window than it named. Inclusion at the edges is the server's property
+ * and is tested there; this pins that the bounds arrive intact.
+ */
+test("bounds emitted by a related link round-trip through the Activity search to the same filter", () => {
+	const origin = { since: undefined, until: TS + 3_600 };
+	const emitted = { mode: "history", domain: "ads.example.com", ...relatedBounds(TS, origin) };
+
+	const applied = validateActivitySearch(emitted);
+
+	expect(applied.mode).toBe("history");
+	expect(applied.since).toBe(emitted.since);
+	expect(applied.until).toBe(emitted.until);
+	expect(queriesFilterOf(applied)).toEqual({
+		domain: "ads.example.com",
+		since: TS - RELATED_WINDOW_SECONDS,
+		until: TS + 3_600,
+	});
+});

admin/src/features/activity/relatedLinks.ts

@@ -0,0 +1,42 @@
+/**
+ * The absolute bounds an investigation link carries.
+ *
+ * Every link out of a query detail is time-scoped on purpose: a relative window
+ * would answer a different question tomorrow than it does today, and the whole
+ * point of linking to an episode is that the link keeps showing that episode.
+ */
+
+import type { ActivitySearch } from "./search";
+
+/** The five-minute window the redesign puts around one query. */
+export const RELATED_WINDOW_SECONDS = 300;
+
+export interface Bounds {
+	since: number;
+	until: number;
+}
+
+/**
+ * The bounds for "all activity for this domain/client", decided per bound.
+ *
+ * When the reader arrived from a bounded investigation, that bound is the one
+ * they are working in and it carries over. A bound they never set falls back to
+ * the five-minute window around this query — never to no bound at all, which
+ * would answer with the whole retained history and lose the episode in it. The
+ * two bounds are decided separately, so a half-bounded origin keeps its half.
+ */
+export function relatedBounds(ts: number, origin: Pick<ActivitySearch, "since" | "until">): Bounds {
+	return {
+		since: origin.since ?? ts - RELATED_WINDOW_SECONDS,
+		until: origin.until ?? ts + RELATED_WINDOW_SECONDS,
+	};
+}
+
+/**
+ * The Diagnostics window around one query. Fixed at five minutes either side of
+ * the query, not inherited: the reader is asking what else was failing while
+ * this query was answered, which is a question about the query's own moment.
+ */
+export function diagnosticsBounds(ts: number): Bounds {
+	return { since: ts - RELATED_WINDOW_SECONDS, until: ts + RELATED_WINDOW_SECONDS };
+}

admin/src/features/activity/ringBuffer.test.ts

@@ -0,0 +1,248 @@
+import type { Provenance, QueryRow } from "@/lib/types";
+import { provenance, queryRow } from "@/features/provenance/provenanceFixture";
+import { RING_CAPACITY, mergeGap, pushRow, summaryOf, type LiveRow } from "./ringBuffer";
+
+function streamed(key: number, ts: number, domain: string, sections: Parameters<typeof provenance>[0] = {}): LiveRow {
+	return {
+		kind: "streamed",
+		key,
+		event: provenance({
+			...sections,
+			request: { time: ts, domain, ...sections.request },
+			route: { upstream: "udp://9.9.9.9:53", ...sections.route },
+		}),
+	};
+}
+
+function fetchedRow(id: number, ts: number, domain: string, overrides: Partial<QueryRow> = {}): QueryRow {
+	return queryRow(id, { ts, domain, upstream: "udp://9.9.9.9:53", ...overrides });
+}
+
+function counter(start = 100): () => number {
+	let n = start;
+	return () => ++n;
+}
+
+function domains(rows: LiveRow[]): string[] {
+	return rows.map((row) => summaryOf(row).domain);
+}
+
+describe("summaryOf", () => {
+	test("a streamed frame projects every summary field from the provenance it carries", () => {
+		const event: Provenance = provenance({
+			request: { time: 1700, domain: "ads.example", client: "192.0.2.11", qtype: 28 },
+			policy: { action: "block", reason: "blocklist_wildcard" },
+			route: { kind: "blocked", upstream: "" },
+			response: { duration_us: 42 },
+		});
+		expect(summaryOf({ kind: "streamed", key: 1, event })).toEqual({
+			id: null,
+			ts: 1700,
+			domain: "ads.example",
+			client_ip: "192.0.2.11",
+			qtype: 28,
+			blocked: true,
+			policy_reason: "blocklist_wildcard",
+			rcode: 0,
+			route_kind: "blocked",
+			response_time_us: 42,
+			cache_hit: null,
+			upstream: "",
+		});
+	});
+
+	test("a recovered row projects its stored fields and keeps its id", () => {
+		const row = queryRow(77, { domain: "news.example", cache_hit: true, policy_reason: "rule_allow_exact" });
+		expect(summaryOf({ kind: "recovered", key: 2, row })).toMatchObject({
+			id: 77,
+			domain: "news.example",
+			cache_hit: true,
+			policy_reason: "rule_allow_exact",
+		});
+	});
+
+	/**
+	 * The guard the discriminated union exists for: a field added to the wire
+	 * DTO must be either projected into the summary or consciously left to the
+	 * detail page. A silent addition fails here rather than going unrendered.
+	 */
+	test("every provenance field is either projected or knowingly detail-only", () => {
+		const projected = [
+			"request.time",
+			"request.domain",
+			"request.client",
+			"request.qtype",
+			"policy.action",
+			"policy.reason",
+			"route.kind",
+			"route.upstream",
+			"response.duration_us",
+		];
+		const detailOnly = [
+			"request.qclass",
+			"group.id",
+			"group.name",
+			"policy.matched",
+			"policy.source_id",
+			"policy.source_name",
+			"rewrites.cname_target",
+			"rewrites.safe_search_target",
+			"route.forward_zone",
+			"response.rcode",
+		];
+		const leaves = Object.entries(provenance()).flatMap(([section, fields]) =>
+			Object.keys(fields as Record<string, unknown>).map((field) => `${section}.${field}`),
+		);
+		expect(leaves.sort()).toEqual([...projected, ...detailOnly].sort());
+	});
+});
+
+describe("pushRow", () => {
+	test("prepends newest-first", () => {
+		let rows: LiveRow[] = [];
+		rows = pushRow(rows, streamed(1, 10, "a.example"));
+		rows = pushRow(rows, streamed(2, 11, "b.example"));
+		expect(domains(rows)).toEqual(["b.example", "a.example"]);
+	});
+
+	test("drops the oldest beyond capacity", () => {
+		let rows: LiveRow[] = [];
+		for (let i = 0; i < 5; i++) rows = pushRow(rows, streamed(i, i, `d${i}.example`), 3);
+		expect(rows).toHaveLength(3);
+		expect(rows.map((r) => r.key)).toEqual([4, 3, 2]);
+	});
+
+	test("default capacity is 500", () => {
+		let rows: LiveRow[] = [];
+		for (let i = 0; i < RING_CAPACITY + 10; i++) rows = pushRow(rows, streamed(i, i, "x.example"));
+		expect(rows).toHaveLength(RING_CAPACITY);
+	});
+});
+
+describe("mergeGap", () => {
+	test("skips rows already in the buffer and counts only new ones", () => {
+		const buffer = [streamed(2, 100, "seen.example"), streamed(1, 99, "old.example")];
+		const fetched = [
+			fetchedRow(30, 102, "gap2.example"),
+			fetchedRow(29, 101, "gap1.example"),
+			fetchedRow(28, 100, "seen.example"),
+		];
+		const { rows, missed } = mergeGap(buffer, fetched, counter());
+		expect(missed).toBe(2);
+		expect(domains(rows)).toEqual(["gap2.example", "gap1.example", "seen.example", "old.example"]);
+	});
+
+	test("no additions returns the buffer unchanged with missed 0", () => {
+		const buffer = [streamed(1, 100, "seen.example")];
+		const { rows, missed } = mergeGap(buffer, [fetchedRow(5, 100, "seen.example")], counter());
+		expect(missed).toBe(0);
+		expect(rows).toBe(buffer);
+	});
+
+	/**
+	 * A household repeats itself: one client, one name, three lookups inside the
+	 * same second. The stream delivered one of them before the connection broke,
+	 * so the gap fetch must recover the other two rather than let the one row in
+	 * the buffer stand for all three.
+	 */
+	test("repeated identical queries drop only as many rows as the buffer already holds", () => {
+		const buffer = [streamed(1, 100, "dup.example")];
+		const fetched = [
+			fetchedRow(12, 100, "dup.example"),
+			fetchedRow(11, 100, "dup.example"),
+			fetchedRow(10, 100, "dup.example"),
+		];
+		const { rows, missed } = mergeGap(buffer, fetched, counter());
+		expect(missed).toBe(2);
+		expect(domains(rows)).toEqual(["dup.example", "dup.example", "dup.example"]);
+		const recoveredIds = rows.flatMap((row) => (row.kind === "recovered" ? [row.row.id] : []));
+		expect(new Set(recoveredIds).size).toBe(2);
+	});
+
+	test("a gap fetch that repeats the whole buffer adds nothing", () => {
+		const buffer = [streamed(2, 100, "dup.example"), streamed(1, 100, "dup.example")];
+		const fetched = [fetchedRow(12, 100, "dup.example"), fetchedRow(11, 100, "dup.example")];
+		const { rows, missed } = mergeGap(buffer, fetched, counter());
+		expect(missed).toBe(0);
+		expect(rows).toBe(buffer);
+	});
+
+	/**
+	 * Two queries of the same name from the same client in the same second are
+	 * still separate facts when any stored column differs — the record type or
+	 * class, the response code, the policy that decided them, how long they took,
+	 * the route taken. The gap fetch here returns the differing row *first* and
+	 * the one the buffer already holds second, so an identity blind to the column
+	 * would let the differing row consume the buffered occurrence: the buffered
+	 * query would come back duplicated and the other would vanish, at an
+	 * unchanged `missed`. Order is what exposes that — the count alone is 1
+	 * either way.
+	 *
+	 * `blocked` and `cache_hit` have no case of their own: the server derives
+	 * them from `policy_action` and `route_kind`, so they cannot differ while
+	 * everything else holds, and the two columns they follow are covered here.
+	 */
+	test.each([
+		{ column: "qtype", sections: { request: { qtype: 1 } }, held: { qtype: 1 }, differing: { qtype: 28 } },
+		{ column: "qclass", sections: { request: { qclass: 1 } }, held: { qclass: 1 }, differing: { qclass: 3 } },
+		{ column: "rcode", sections: { response: { rcode: 0 } }, held: { rcode: 0 }, differing: { rcode: 2 } },
+		{
+			column: "response_time_us",
+			sections: { response: { duration_us: 1234 } },
+			held: { response_time_us: 1234 },
+			differing: { response_time_us: 9999 },
+		},
+		{
+			column: "route_kind",
+			sections: { route: { kind: "upstream" } },
+			held: { route_kind: "upstream" },
+			differing: { route_kind: "forward_zone" },
+		},
+		{
+			column: "policy_action",
+			sections: { policy: { action: "allow" } },
+			held: { policy_action: "allow" },
+			differing: { policy_action: "not_evaluated" },
+		},
+		{
+			column: "policy_reason",
+			sections: { policy: { reason: "no_match" } },
+			held: { policy_reason: "no_match" },
+			differing: { policy_reason: "rule_allow_exact" },
+		},
+	] satisfies readonly {
+		column: string;
+		sections: Parameters<typeof provenance>[0];
+		held: Partial<QueryRow>;
+		differing: Partial<QueryRow>;
+	}[])("rows differing only in $column survive the gap merge", ({ sections, held, differing }) => {
+		const buffer = [streamed(1, 100, "dual.example", sections)];
+		const fetched = [fetchedRow(6, 100, "dual.example", differing), fetchedRow(5, 100, "dual.example", held)];
+		const { rows, missed } = mergeGap(buffer, fetched, counter());
+		expect(missed).toBe(1);
+		expect(rows).toEqual([{ kind: "recovered", key: expect.any(Number), row: fetched[0] }, buffer[0]]);
+	});
+
+	test("recovered rows keep their id and take a fresh key", () => {
+		const { rows } = mergeGap([], [fetchedRow(77, 100, "gap.example")], counter(200));
+		const recovered = rows[0];
+		expect(recovered?.key).toBe(201);
+		expect(recovered?.kind).toBe("recovered");
+		expect(recovered !== undefined && recovered.kind === "recovered" ? recovered.row.id : null).toBe(77);
+	});
+
+	test("result is capped at capacity, keeping the newest", () => {
+		const buffer = [streamed(3, 300, "live.example")];
+		const fetched = [fetchedRow(2, 302, "g2.example"), fetchedRow(1, 301, "g1.example")];
+		const { rows, missed } = mergeGap(buffer, fetched, counter(), 2);
+		expect(missed).toBe(2);
+		expect(domains(rows)).toEqual(["g2.example", "g1.example"]);
+	});
+
+	test("merged rows stay sorted newest-first by ts", () => {
+		const buffer = [streamed(4, 105, "after-reopen.example"), streamed(3, 100, "before.example")];
+		const fetched = [fetchedRow(9, 103, "gap.example")];
+		const { rows } = mergeGap(buffer, fetched, counter());
+		expect(rows.map((row) => summaryOf(row).ts)).toEqual([105, 103, 100]);
+	});
+});

admin/src/features/activity/ringBuffer.ts

@@ -0,0 +1,147 @@
+import type { LiveQueryEvent, QueryRow } from "@/lib/types";
+import { summarizeEvent, summarizeRow, type QuerySummary } from "@/features/provenance/querySummary";
+
+/**
+ * A row in the live buffer. `key` is a client-side monotonic counter, because
+ * neither arm has a stable identity of its own on arrival.
+ *
+ * The two arms are genuinely different facts, not two encodings of one. A
+ * streamed frame carries the full provenance of a query the server has not
+ * written yet; a row recovered by the reconnect gap-fetch is the stored summary
+ * of a query that *was* written, and cannot fabricate the provenance it never
+ * received. Only the recovered arm has a row id to link to.
+ */
+export type LiveRow = { key: number } & (
+	{ kind: "streamed"; event: LiveQueryEvent } | { kind: "recovered"; row: QueryRow }
+);
+
+/** The arm that carries its own provenance, and so its own detail surface. */
+export type StreamedRow = Extract<LiveRow, { kind: "streamed" }>;
+
+/** The flat cells both arms render, and the shared identity for gap dedupe. */
+export function summaryOf(row: LiveRow): QuerySummary {
+	return row.kind === "streamed" ? summarizeEvent(row.event) : summarizeRow(row.row);
+}
+
+export const RING_CAPACITY = 500;
+
+/** Prepend `row` (rows are newest-first) and drop the oldest beyond `capacity`. */
+export function pushRow(rows: LiveRow[], row: LiveRow, capacity: number = RING_CAPACITY): LiveRow[] {
+	const next = [row, ...rows];
+	return next.length > capacity ? next.slice(0, capacity) : next;
+}
+
+/**
+ * What the gap merge compares two queries by: the whole stored row bar its id.
+ *
+ * `since` on GET /api/queries is inclusive, so the re-sync fetch returns the
+ * last-seen row(s) again and the merge has to recognise them. The id cannot
+ * serve as the identity — a streamed frame precedes its own insert and has none
+ * — so the comparison is by value, and every stored column has to take part.
+ * Two queries alike in name, client and second but differing in class, rcode,
+ * the policy that decided them or the route taken are separate facts; if they
+ * hashed alike, the fetched row that does *not* match the buffered one would
+ * consume its occurrence, duplicating one query and losing the other.
+ *
+ * `QuerySummary` is the wrong basis for that: it is what the table renders, and
+ * it drops qclass and policy_action. `Omit<QueryRow, "id">`
+ * instead makes the compiler demand a derivation for every stored column, so a
+ * column added to the row cannot quietly fall out of the identity.
+ */
+type GapIdentity = Omit<QueryRow, "id">;
+
+function identityOfRow(row: QueryRow): GapIdentity {
+	return {
+		ts: row.ts,
+		domain: row.domain,
+		client_ip: row.client_ip,
+		qtype: row.qtype,
+		qclass: row.qclass,
+		rcode: row.rcode,
+		blocked: row.blocked,
+		response_time_us: row.response_time_us,
+		cache_hit: row.cache_hit,
+		upstream: row.upstream,
+		policy_action: row.policy_action,
+		policy_reason: row.policy_reason,
+		route_kind: row.route_kind,
+	};
+}
+
+/**
+ * The same identity out of a live frame, which carries every stored column in
+ * its provenance. The columns the server derives rather than sends — `blocked`
+ * and `cache_hit` — come through `summarizeEvent` so that derivation keeps
+ * living in exactly one place.
+ */
+function identityOfEvent(event: LiveQueryEvent): GapIdentity {
+	const summary = summarizeEvent(event);
+	return {
+		ts: summary.ts,
+		domain: summary.domain,
+		client_ip: summary.client_ip,
+		qtype: summary.qtype,
+		qclass: event.request.qclass,
+		rcode: event.response.rcode,
+		blocked: summary.blocked,
+		response_time_us: summary.response_time_us,
+		cache_hit: summary.cache_hit,
+		upstream: summary.upstream,
+		policy_action: event.policy.action,
+		policy_reason: summary.policy_reason,
+		route_kind: event.route.kind,
+	};
+}
+
+function identityOf(row: LiveRow): GapIdentity {
+	return row.kind === "streamed" ? identityOfEvent(row.event) : identityOfRow(row.row);
+}
+
+/** Sorted keys so the hash cannot depend on the order the two arms happen to build their literals in. */
+function signature(identity: GapIdentity): string {
+	return JSON.stringify(identity, Object.keys(identity).sort());
+}
+
+/**
+ * How many times each signature is already in the buffer. A signature is not
+ * unique: one client asking for one name twice within the same second is an
+ * ordinary household pattern, and the two queries are separate facts. Counting
+ * the occurrences lets the merge drop exactly as many fetched rows as the
+ * buffer already holds, instead of letting one buffered row hide all of them.
+ */
+function occurrences(rows: LiveRow[]): Map<string, number> {
+	const counts = new Map<string, number>();
+	for (const row of rows) {
+		const key = signature(identityOf(row));
+		counts.set(key, (counts.get(key) ?? 0) + 1);
+	}
+	return counts;
+}
+
+/**
+ * Merge rows fetched for a reconnect gap (newest-first, from GET /api/queries)
+ * into the buffer. Each fetched row consumes one buffered occurrence of its
+ * signature and is skipped; the rest are genuinely missed and `missed` counts
+ * them. The result stays newest-first (stable sort by ts) and capped.
+ */
+export function mergeGap(
+	rows: LiveRow[],
+	fetched: QueryRow[],
+	nextKey: () => number,
+	capacity: number = RING_CAPACITY,
+): { rows: LiveRow[]; missed: number } {
+	const buffered = occurrences(rows);
+	const added: LiveRow[] = [];
+	for (const row of fetched) {
+		const key = signature(identityOfRow(row));
+		const count = buffered.get(key) ?? 0;
+		if (count > 0) {
+			buffered.set(key, count - 1);
+			continue;
+		}
+		added.push({ kind: "recovered", row, key: nextKey() });
+	}
+	if (added.length === 0) return { rows, missed: 0 };
+	const merged = [...added, ...rows].sort((a, b) => summaryOf(b).ts - summaryOf(a).ts).slice(0, capacity);
+	return { rows: merged, missed: added.length };
+}

admin/src/features/activity/search.test.ts

@@ -0,0 +1,113 @@
+import { validateActivitySearch, validateBlocked, validateMode, validateText, validateTimestamp } from "./search";
+
+test("mode is the two-value union, defaulting to history", () => {
+	expect(validateMode("live")).toBe("live");
+	expect(validateMode("history")).toBe("history");
+	expect(validateMode(undefined)).toBe("history");
+	expect(validateMode("Live")).toBe("history");
+	expect(validateMode("")).toBe("history");
+	expect(validateMode(0)).toBe("history");
+	expect(validateMode(["live"])).toBe("history");
+});
+
+test("a bound is a safe integer or nothing at all", () => {
+	expect(validateTimestamp(1_700_000_000)).toBe(1_700_000_000);
+	expect(validateTimestamp(0)).toBe(0);
+	expect(validateTimestamp(-1)).toBe(-1);
+});
+
+test.each([
+	["a fraction", 1_700_000_000.5],
+	["Infinity", Number.POSITIVE_INFINITY],
+	["-Infinity", Number.NEGATIVE_INFINITY],
+	["NaN", Number.NaN],
+	["past the safe range", Number.MAX_SAFE_INTEGER + 1],
+	["1e21", 1e21],
+	["a numeric string", "1700000000"],
+	["an empty string", ""],
+	["null", null],
+	["undefined", undefined],
+	["a boolean", true],
+	["an array", [1_700_000_000]],
+	["a bigint", 1_700_000_000n],
+])("a bound rejects %s", (_name, value) => {
+	expect(validateTimestamp(value)).toBeUndefined();
+});
+
+test("blocked keeps false, which is the allowed-only filter", () => {
+	expect(validateBlocked(true)).toBe(true);
+	expect(validateBlocked(false)).toBe(false);
+});
+
+test.each([
+	["the string true", "true"],
+	["the string false", "false"],
+	["1", 1],
+	["0", 0],
+	["null", null],
+	["undefined", undefined],
+])("blocked rejects %s", (_name, value) => {
+	expect(validateBlocked(value)).toBeUndefined();
+});
+
+test("a text filter is trimmed, and an empty one is no filter", () => {
+	expect(validateText("ads.example")).toBe("ads.example");
+	expect(validateText("  ads.example  ")).toBe("ads.example");
+	expect(validateText("")).toBeUndefined();
+	expect(validateText("   ")).toBeUndefined();
+	expect(validateText("\t\n")).toBeUndefined();
+	expect(validateText(42)).toBeUndefined();
+	expect(validateText(undefined)).toBeUndefined();
+});
+
+test("a whole search normalizes every field and drops nothing else in", () => {
+	expect(
+		validateActivitySearch({
+			mode: "live",
+			since: 1_700_000_000,
+			until: 1_700_000_600,
+			domain: " ads.example ",
+			client: "192.0.2.10",
+			blocked: false,
+			unknown: "kept out",
+		}),
+	).toEqual({
+		mode: "live",
+		since: 1_700_000_000,
+		until: 1_700_000_600,
+		domain: "ads.example",
+		client: "192.0.2.10",
+		blocked: false,
+	});
+});
+
+test("an empty search is history with no filters", () => {
+	expect(validateActivitySearch({})).toEqual({
+		mode: "history",
+		since: undefined,
+		until: undefined,
+		domain: undefined,
+		client: undefined,
+		blocked: undefined,
+	});
+});
+
+test("a search of junk applies nothing", () => {
+	expect(
+		validateActivitySearch({
+			mode: "HISTORY ",
+			since: "1700000000",
+			until: Number.POSITIVE_INFINITY,
+			domain: "   ",
+			client: null,
+			blocked: "true",
+		}),
+	).toEqual({
+		mode: "history",
+		since: undefined,
+		until: undefined,
+		domain: undefined,
+		client: undefined,
+		blocked: undefined,
+	});
+});

admin/src/features/activity/search.ts

@@ -0,0 +1,88 @@
+/**
+ * The Activity search parameters, validated as pure functions so the route's
+ * `validateSearch` stays a one-liner and every rejection is testable without a
+ * router.
+ *
+ * A search value arrives from a URL, from history state, or from a hand-typed
+ * link, so nothing about its type is given. Anything that is not exactly the
+ * value the API can filter on becomes `undefined`: an unbounded page is honest,
+ * a page filtered on a coerced guess is not.
+ */
+
+import type { QueriesFilter } from "@/lib/types";
+
+export const ACTIVITY_MODES = ["history", "live"] as const;
+export type ActivityMode = (typeof ACTIVITY_MODES)[number];
+
+export interface ActivitySearch {
+	mode: ActivityMode;
+	since: number | undefined;
+	until: number | undefined;
+	domain: string | undefined;
+	client: string | undefined;
+	blocked: boolean | undefined;
+}
+
+/** History is the surface a bare `/activity` should open on: it answers questions. */
+export function validateMode(value: unknown): ActivityMode {
+	return value === "live" ? "live" : "history";
+}
+
+/**
+ * A unix-second bound. `Number.isSafeInteger` is the whole test: it rejects a
+ * fraction, an infinity, a NaN and a magnitude past 2^53 in one step, and a
+ * string never passes, so `?since=now` cannot reach the API as garbage.
+ */
+export function validateTimestamp(value: unknown): number | undefined {
+	return Number.isSafeInteger(value) ? (value as number) : undefined;
+}
+
+/**
+ * The blocked filter. `false` is a real filter — "allowed only" — so it must
+ * survive; only a genuine boolean does, because `"false"` out of a URL parser
+ * that did not decode JSON would otherwise read as true.
+ */
+export function validateBlocked(value: unknown): boolean | undefined {
+	return typeof value === "boolean" ? value : undefined;
+}
+
+/**
+ * A text filter, trimmed. An empty result becomes `undefined` rather than `""`:
+ * the server treats an empty filter as no filter, and a URL that showed
+ * `domain=` as applied state would claim a filter that is not filtering.
+ */
+export function validateText(value: unknown): string | undefined {
+	if (typeof value !== "string") return undefined;
+	const trimmed = value.trim();
+	return trimmed === "" ? undefined : trimmed;
+}
+
+/**
+ * The API filter for a validated search, built field by field.
+ *
+ * Only the fields that are actually set are written, so an unfiltered request
+ * carries no keys at all: `GET /api/queries` rejects a parameter it does not
+ * know, and the infinite query's cache key is the filter object, so a key
+ * present-but-undefined and a key absent must not be two different windows onto
+ * the same rows. `mode` never appears — it selects the surface, not the rows.
+ */
+export function queriesFilterOf(search: Omit<ActivitySearch, "mode">): QueriesFilter {
+	const filter: QueriesFilter = {};
+	if (search.domain !== undefined) filter.domain = search.domain;
+	if (search.client !== undefined) filter.client = search.client;
+	if (search.blocked !== undefined) filter.blocked = search.blocked;
+	if (search.since !== undefined) filter.since = search.since;
+	if (search.until !== undefined) filter.until = search.until;
+	return filter;
+}
+
+export function validateActivitySearch(search: Record<string, unknown>): ActivitySearch {
+	return {
+		mode: validateMode(search["mode"]),
+		since: validateTimestamp(search["since"]),
+		until: validateTimestamp(search["until"]),
+		domain: validateText(search["domain"]),
+		client: validateText(search["client"]),
+		blocked: validateBlocked(search["blocked"]),
+	};
+}

admin/src/features/activity/useLiveQueries.test.tsx

@@ -1,6 +1,8 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { ApiError } from "@/lib/api";
-import type { LiveQueryEvent, QueriesPage, QueryRow } from "@/lib/types";
+import type { QueriesPage, QueryRow } from "@/lib/types";
+import { provenance, queryRow } from "@/features/provenance/provenanceFixture";
+import { summaryOf, type LiveRow } from "./ringBuffer";
 import { FakeEventSource } from "./fakeEventSource";
 import { CAP_ERROR_THRESHOLD, useLiveQueries } from "./useLiveQueries";
 
@@ -8,41 +10,28 @@ afterEach(() => vi.unstubAllGlobals());
 
 function stubLocationAssign() {
 	const assign = vi.fn();
-	vi.stubGlobal("location", { pathname: "/live", search: "", assign });
+	vi.stubGlobal("location", { pathname: "/activity", search: "?mode=live", assign });
 	return assign;
 }
 
-function frame(ts: number, domain: string, overrides: Partial<LiveQueryEvent> = {}): { data: string } {
-	const payload: LiveQueryEvent = {
-		ts,
-		domain,
-		client_ip: "192.0.2.10",
-		qtype: 1,
-		blocked: false,
-		block_reason: "",
-		response_time_us: 500,
-		cache_hit: false,
-		upstream: "udp://9.9.9.9:53",
-		...overrides,
-	};
+function frame(ts: number, domain: string): { data: string } {
+	const payload = provenance({
+		request: { time: ts, domain },
+		route: { upstream: "udp://9.9.9.9:53" },
+	});
 	return { data: JSON.stringify(payload) };
 }
 
 function fetchedRow(id: number, ts: number, domain: string): QueryRow {
-	return {
-		id,
-		ts,
-		domain,
-		client_ip: "192.0.2.10",
-		qtype: 1,
-		blocked: false,
-		block_reason: "",
-		response_time_us: 500,
-		cache_hit: false,
-		upstream: "udp://9.9.9.9:53",
-	};
+	return queryRow(id, { ts, domain, upstream: "udp://9.9.9.9:53" });
 }
 
+function domains(rows: LiveRow[]): string[] {
+	return rows.map((row) => summaryOf(row).domain);
+}
+
+const FULL_COVERAGE = { complete: true, available_since: 0 };
+
 function setup(fetchSince?: (since: number) => Promise<QueriesPage>, probeSession?: () => Promise<unknown>) {
 	const sources: FakeEventSource[] = [];
 	const createEventSource = (url: string) => {
@@ -68,7 +57,7 @@ test("open then frames: rows newest-first with increasing keys", () => {
 		sources[0]!.emit("query", frame(1001, "b.example"));
 	});
 	const rows = hook.result.current.rows;
-	expect(rows.map((r) => r.domain)).toEqual(["b.example", "a.example"]);
+	expect(domains(rows)).toEqual(["b.example", "a.example"]);
 	expect(rows[0]!.key).toBeGreaterThan(rows[1]!.key);
 });
 
@@ -87,6 +76,7 @@ test("error then reopen re-syncs the gap since the last seen ts", async () => {
 		return Promise.resolve({
 			queries: [fetchedRow(9, 1002, "gap.example"), fetchedRow(8, since, "a.example")],
 			next_before: null,
+			coverage: FULL_COVERAGE,
 		});
 	});
 	const { sources, hook } = setup(fetchSince);
@@ -103,7 +93,7 @@ test("error then reopen re-syncs the gap since the last seen ts", async () => {
 	expect(fetchSince).toHaveBeenCalledWith(1000);
 
 	await waitFor(() => expect(hook.result.current.missed).toBe(1));
-	expect(hook.result.current.rows.map((r) => r.domain)).toEqual(["gap.example", "a.example"]);
+	expect(domains(hook.result.current.rows)).toEqual(["gap.example", "a.example"]);
 
 	act(() => hook.result.current.dismissMissed());
 	expect(hook.result.current.missed).toBeNull();
@@ -127,7 +117,7 @@ test("a 401 gap re-sync redirects to login instead of setting resyncFailed", asy
 	act(() => sources[0]!.emit("query", frame(1000, "a.example")));
 	act(() => sources[0]!.emit("error"));
 	act(() => sources[0]!.emit("open"));
-	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Flive"));
+	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Factivity%3Fmode%3Dlive"));
 	expect(hook.result.current.resyncFailed).toBe(false);
 });
 
@@ -152,7 +142,7 @@ test("cap trip with an expired session redirects to login", async () => {
 	act(() => {
 		for (let i = 0; i < CAP_ERROR_THRESHOLD; i++) sources[0]!.emit("error");
 	});
-	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Flive"));
+	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Factivity%3Fmode%3Dlive"));
 	expect(probeSession).toHaveBeenCalledTimes(1);
 });
 
@@ -193,7 +183,7 @@ test("a fatal rejection with an expired session redirects to login", async () =>
 
 	act(() => sources[0]!.failFatal());
 
-	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Flive"));
+	await waitFor(() => expect(assign).toHaveBeenCalledWith("/login?redirect=%2Factivity%3Fmode%3Dlive"));
 	expect(probeSession).toHaveBeenCalledTimes(1);
 });
 
@@ -235,12 +225,12 @@ test("freeze keeps the display fixed while the buffer keeps filling", () => {
 		sources[0]!.emit("query", frame(1001, "b.example"));
 		sources[0]!.emit("query", frame(1002, "c.example"));
 	});
-	expect(hook.result.current.rows.map((r) => r.domain)).toEqual(["a.example"]);
+	expect(domains(hook.result.current.rows)).toEqual(["a.example"]);
 	expect(hook.result.current.liveCount).toBe(3);
 
 	act(() => hook.result.current.toggleFreeze());
 	expect(hook.result.current.frozen).toBe(false);
-	expect(hook.result.current.rows.map((r) => r.domain)).toEqual(["c.example", "b.example", "a.example"]);
+	expect(domains(hook.result.current.rows)).toEqual(["c.example", "b.example", "a.example"]);
 });
 
 test("stale sources are ignored after retry and closed on unmount", () => {

admin/src/features/activity/useLiveQueries.ts

@@ -24,6 +24,12 @@ export interface LiveQueriesOptions {
 	fetchSince?: (since: number) => Promise<QueriesPage>;
 	/** Cheap session-gated GET fired once on entering capped, to distinguish an expired session from a real cap. */
 	probeSession?: () => Promise<unknown>;
+	/**
+	 * Ring size. Injectable so a test can provoke an eviction with a handful of
+	 * rows instead of pushing 500 frames through React state; the app never
+	 * passes it, and the operator never sees it.
+	 */
+	capacity?: number;
 }
 
 // A transient drop is invisible to EventSource beyond a bare `error` event;
@@ -34,7 +40,10 @@ export interface LiveQueriesOptions {
 export const CAP_ERROR_THRESHOLD = 3;
 
 const defaultEventSource: EventSourceFactory = (url) => new EventSource(url);
-const defaultFetchSince = (since: number): Promise<QueriesPage> => api.getQueries({ since, limit: RING_CAPACITY });
+const defaultFetchSince =
+	(capacity: number) =>
+	(since: number): Promise<QueriesPage> =>
+		api.getQueries({ since, limit: capacity });
 const defaultProbeSession = (): Promise<unknown> => api.getPause();
 
 function isUnauthorized(error: unknown): boolean {
@@ -79,7 +88,8 @@ export function useLiveQueries(options?: LiveQueriesOptions): LiveQueries {
 		errorsRef.current = 0;
 		setStatus("connecting");
 		const opts = optionsRef.current;
-		const fetchSince = opts?.fetchSince ?? defaultFetchSince;
+		const capacity = opts?.capacity ?? RING_CAPACITY;
+		const fetchSince = opts?.fetchSince ?? defaultFetchSince(capacity);
 		const probeSession = opts?.probeSession ?? defaultProbeSession;
 		const es = (opts?.createEventSource ?? defaultEventSource)(opts?.url ?? api.liveQueriesUrl);
 		esRef.current = es;
@@ -94,7 +104,7 @@ export function useLiveQueries(options?: LiveQueriesOptions): LiveQueries {
 				fetchSince(since).then(
 					(page) => {
 						if (esRef.current !== es) return;
-						const merged = mergeGap(bufferRef.current, page.queries, () => ++keyRef.current);
+						const merged = mergeGap(bufferRef.current, page.queries, () => ++keyRef.current, capacity);
 						bufferRef.current = merged.rows;
 						setRows(merged.rows);
 						setMissed(merged.missed);
@@ -121,8 +131,12 @@ export function useLiveQueries(options?: LiveQueriesOptions): LiveQueries {
 			} catch {
 				return;
 			}
-			lastSeenTsRef.current = payload.ts;
-			bufferRef.current = pushRow(bufferRef.current, { ...payload, key: ++keyRef.current });
+			lastSeenTsRef.current = payload.request.time;
+			bufferRef.current = pushRow(
+				bufferRef.current,
+				{ kind: "streamed", event: payload, key: ++keyRef.current },
+				capacity,
+			);
 			setRows(bufferRef.current);
 		});
 

admin/src/features/clients/ClientDetailPage.test.tsx

@@ -0,0 +1,107 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { BASE, MANAGED_FILE, NEVER, renderAt } from "./testFixtures";
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+test("a cold deep link fetches the list once and renders the client (D9)", async () => {
+	const { fetchMock } = renderAt("/clients/1", BASE);
+
+	await screen.findByRole("heading", { name: "laptop" });
+	expect(screen.getByText("192.168.1.10")).toBeTruthy();
+	const listCalls = fetchMock.mock.calls.filter(([input]) => String(input) === "/api/clients");
+	expect(listCalls).toHaveLength(1);
+});
+
+test("identity carries the name, its provenance and both timestamps", async () => {
+	renderAt("/clients/2", BASE);
+
+	// The unnamed row is the learned one, and Clients is where the marker shows.
+	const heading = await screen.findByRole("heading", { name: /kids-tablet\.lan/ });
+	expect(within(heading).getByText("learned")).toBeTruthy();
+	expect(screen.getByText(/This client appeared from DNS traffic/)).toBeTruthy();
+	expect(screen.getByText("First seen")).toBeTruthy();
+	expect(screen.getByText("Last seen")).toBeTruthy();
+});
+
+test("a hand-set row reads as edited under database authority", async () => {
+	renderAt("/clients/1", BASE);
+
+	await waitFor(() => expect(screen.getByText(/The name and group were set here/)).toBeTruthy());
+});
+
+test("the same row reads as declared under file authority", async () => {
+	renderAt("/clients/1", { ...BASE, "GET /api/config/status": MANAGED_FILE });
+
+	await screen.findByText(/Declared in \/etc\/nxdns\/config\.zon/);
+});
+
+test("an unresolved authority names the doubt instead of picking a provenance", async () => {
+	renderAt("/clients/1", { ...BASE, "GET /api/config/status": NEVER });
+
+	await screen.findByText(/Either declared in the configuration file or edited here/);
+});
+
+test("an id the list does not contain renders the missing-client state (D9)", async () => {
+	renderAt("/clients/99", BASE);
+
+	await screen.findByRole("heading", { name: "No such client" });
+	expect(screen.getByText(/no client with id 99/i)).toBeTruthy();
+	expect(screen.getByRole("link", { name: "← All clients" })).toBeTruthy();
+});
+
+test("policy links to the group that filters this client", async () => {
+	renderAt("/clients/2", BASE);
+
+	const link = await screen.findByRole("link", { name: "Group settings" });
+	expect(link.getAttribute("href")).toBe("/configuration/protection?tab=groups&group=2");
+});
+
+test("the Activity affordance is a real link, with bounds minted at interaction time", async () => {
+	const { router } = renderAt("/clients/1", BASE);
+	const link = await screen.findByRole("link", { name: /last 24 hours/i });
+
+	// A real <a href> is what makes middle-click, copy-link and open-in-new-tab
+	// work; the bounds must be in that href before the click, not minted by a
+	// handler the browser never runs on those gestures.
+	expect(link.tagName).toBe("A");
+	expect(link.getAttribute("href")).toMatch(/^\/activity\?/);
+
+	const before = Math.floor(Date.now() / 1000);
+	fireEvent.pointerDown(link);
+	fireEvent.click(link);
+	const after = Math.floor(Date.now() / 1000);
+
+	await waitFor(() => expect(router.state.location.pathname).toBe("/activity"));
+	const search = router.state.location.search as { mode: string; client: string; since: number; until: number };
+	expect(search.mode).toBe("history");
+	expect(search.client).toBe("192.168.1.10");
+	expect(search.until).toBeGreaterThanOrEqual(before - 1);
+	expect(search.until).toBeLessThanOrEqual(after + 1);
+	expect(search.until - search.since).toBe(24 * 60 * 60);
+});
+
+test("keyboard activation re-mints the bounds, not the focus that preceded it by hours", async () => {
+	const { router } = renderAt("/clients/1", BASE);
+	const link = await screen.findByRole("link", { name: /last 24 hours/i });
+
+	// Focus can be hours old by the time Enter lands, so the window it minted is
+	// stale; the keypress itself is what must be bracketed.
+	fireEvent.focus(link);
+	const pressedAt = Date.now() + 3 * 60 * 60 * 1000;
+	const clock = vi.spyOn(Date, "now").mockReturnValue(pressedAt);
+	try {
+		fireEvent.keyDown(link, { key: "Enter" });
+		// jsdom does not synthesize the click Enter produces on a real anchor.
+		fireEvent.click(link);
+	} finally {
+		clock.mockRestore();
+	}
+
+	await waitFor(() => expect(router.state.location.pathname).toBe("/activity"));
+	const search = router.state.location.search as { client: string; since: number; until: number };
+	expect(search.client).toBe("192.168.1.10");
+	expect(search.until).toBe(Math.floor(pressedAt / 1000));
+	expect(search.until - search.since).toBe(24 * 60 * 60);
+});

admin/src/features/clients/ClientDetailPage.tsx

@@ -0,0 +1,225 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link, useParams } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { formatTime } from "@/lib/format";
+import { clientsQuery } from "@/lib/queries";
+import { useAuthority } from "@/features/configuration/authority";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { ClientDisplayName, provenanceOf } from "./clientIdentity";
+
+/** The Activity window this page offers: the last day, in seconds. */
+const ACTIVITY_WINDOW_SECONDS = 24 * 60 * 60;
+
+const nowInSeconds = () => Math.floor(Date.now() / 1000);
+
+const styles = stylex.create({
+	back: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	heading: {
+		marginTop: "0.5rem",
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	address: {
+		marginTop: "0.25rem",
+		color: colors.textSecondary,
+	},
+	panel: {
+		marginTop: "1rem",
+		maxWidth: "48rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		padding: "1rem",
+	},
+	facts: {
+		display: "grid",
+		gap: "0.5rem 1rem",
+		gridTemplateColumns: {
+			default: "auto",
+			"@media (min-width: 640px)": "max-content 1fr",
+		},
+		margin: 0,
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	term: {
+		color: colors.textMuted,
+	},
+	value: {
+		margin: 0,
+	},
+	provenanceDetail: {
+		marginTop: "0.125rem",
+		color: colors.textMuted,
+	},
+	sectionHeading: {
+		marginTop: "1.5rem",
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	prose: {
+		marginTop: "0.5rem",
+		maxWidth: "48rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.5rem",
+	},
+	links: {
+		marginTop: "0.75rem",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	link: {
+		color: colors.primaryOnSurface,
+	},
+	loading: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+});
+
+function BackLink() {
+	return (
+		<Link to="/clients" search={{}} {...stylex.props(styles.back, shared.focusRing)}>
+			← All clients
+		</Link>
+	);
+}
+
+/**
+ * One client, addressed by the row id `PUT /api/clients/{id}` already uses.
+ *
+ * No endpoint answers for a single client, so the list is the source: the route
+ * loader ensures it, which makes a cold deep link one fetch rather than a
+ * miss. An id the loaded list does not contain is a row that was deleted or
+ * never existed — a state this page explains once, with no refetch behind it.
+ */
+export default function ClientDetailPage() {
+	const { id } = useParams({ from: "/shell/clients/$id" });
+	const clientId = Number(id);
+	const { data, error, isPending, refetch } = useQuery(clientsQuery());
+	const authority = useAuthority();
+	// The Activity window is relative to now, and a real link must carry its
+	// bounds in the href before the click — that is what makes middle-click,
+	// copy-link and open-in-new-tab work. A page left open would otherwise link
+	// to yesterday's day, so the window is re-minted when the link is about to be
+	// used: pointerdown precedes the click, and keydown precedes the click Enter
+	// synthesizes. Focus re-mints too, but it cannot be the last word — a link can
+	// hold focus for hours before the keypress. All three are discrete events, so
+	// the href is fresh by the time navigation reads it.
+	const [activityUntil, setActivityUntil] = useState(nowInSeconds);
+	const freshenActivityWindow = () => setActivityUntil(nowInSeconds());
+
+	if (isPending) {
+		return (
+			<p {...stylex.props(styles.loading, shared.pulse)} role="status">
+				Loading client…
+			</p>
+		);
+	}
+
+	if (data === undefined) {
+		return (
+			<section>
+				<BackLink />
+				<InlineError error={error} onRetry={() => void refetch()} />
+			</section>
+		);
+	}
+
+	const client = data.find((row) => row.id === clientId);
+	if (client === undefined) {
+		return (
+			<section>
+				<BackLink />
+				<h1 {...stylex.props(styles.heading)}>No such client</h1>
+				<p {...stylex.props(styles.prose)}>
+					nxdns has no client with id {id}. It was deleted, or the link was to a row that never existed. A
+					device that is still on the network reappears in the list on its next DNS query.
+				</p>
+			</section>
+		);
+	}
+
+	const provenance = provenanceOf(client, authority);
+
+	return (
+		<section>
+			<BackLink />
+			<h1 {...stylex.props(styles.heading)}>
+				<ClientDisplayName client={client} />
+			</h1>
+			<p {...stylex.props(styles.address, shared.mono)}>{client.ip}</p>
+
+			<div {...stylex.props(styles.panel)}>
+				<dl {...stylex.props(styles.facts)}>
+					<dt {...stylex.props(styles.term)}>Name</dt>
+					<dd {...stylex.props(styles.value)}>
+						<ClientDisplayName client={client} />
+					</dd>
+					<dt {...stylex.props(styles.term)}>Provenance</dt>
+					<dd {...stylex.props(styles.value)}>
+						{provenance.label}
+						<span {...stylex.props(styles.provenanceDetail)}> — {provenance.detail}</span>
+					</dd>
+					<dt {...stylex.props(styles.term)}>First seen</dt>
+					<dd {...stylex.props(styles.value)}>{formatTime(client.first_seen)}</dd>
+					<dt {...stylex.props(styles.term)}>Last seen</dt>
+					<dd {...stylex.props(styles.value)}>{formatTime(client.last_seen)}</dd>
+				</dl>
+			</div>
+
+			<h2 {...stylex.props(styles.sectionHeading)}>Policy</h2>
+			<p {...stylex.props(styles.prose)}>
+				Filtering for this client follows the <strong>{client.group}</strong> group: its safe search setting,
+				its blocklist sources and its rules.
+			</p>
+			<p {...stylex.props(styles.links)}>
+				<Link
+					to="/configuration/protection"
+					search={{ tab: "groups", group: client.group_id }}
+					{...stylex.props(styles.link, shared.focusRing)}
+				>
+					Group settings
+				</Link>
+			</p>
+
+			<h2 {...stylex.props(styles.sectionHeading)}>Activity</h2>
+			<p {...stylex.props(styles.links)}>
+				<Link
+					to="/activity"
+					search={{
+						mode: "history",
+						client: client.ip,
+						since: activityUntil - ACTIVITY_WINDOW_SECONDS,
+						until: activityUntil,
+						domain: undefined,
+						blocked: undefined,
+					}}
+					onPointerDown={freshenActivityWindow}
+					onFocus={freshenActivityWindow}
+					onKeyDown={(event) => {
+						if (event.key === "Enter") freshenActivityWindow();
+					}}
+					{...stylex.props(styles.link, shared.focusRing)}
+				>
+					Queries from this client, last 24 hours
+				</Link>
+			</p>
+		</section>
+	);
+}

admin/src/features/clients/ClientEditDialog.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { clientUpdateMutation } from "@/lib/queries";
+import type { Client, Group } from "@/lib/types";
+import InlineError from "@/lib/InlineError";
+import ConfigLockIndicator from "@/features/configuration/ConfigLockIndicator";
+import { useReadOnlyConfig } from "@/features/configuration/authority";
+import Dialog from "@/ui/Dialog";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+interface Props {
+	client: Client;
+	groups: Group[];
+	onClose: () => void;
+}
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+		marginTop: "1rem",
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	dialogInput: {
+		marginTop: "0.25rem",
+		width: "100%",
+	},
+	actions: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		gap: "0.5rem",
+	},
+	lockNote: {
+		marginRight: "auto",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});
+
+export default function ClientEditDialog({ client, groups, onClose }: Props) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(clientUpdateMutation(queryClient));
+	// Adopting the learned name as a typed one is the natural gesture.
+	const [name, setName] = useState(client.name === "" ? client.learned_name : client.name);
+	const [groupId, setGroupId] = useState(client.group_id);
+	// The dialog opens only where the save can land, but authority is polled and
+	// can turn under an open dialog. So the save path consults it on every render
+	// rather than trusting the state that was true when the dialog opened; the
+	// draft stays on screen, locked, instead of vanishing mid-edit.
+	const readOnly = useReadOnlyConfig();
+
+	return (
+		<Dialog label={`Edit client ${client.ip}`} isOpen onClose={onClose}>
+			<h2 {...stylex.props(styles.heading)}>Edit {client.ip}</h2>
+			<form
+				{...stylex.props(styles.form)}
+				onSubmit={(event) => {
+					event.preventDefault();
+					// Enter in the name field submits without the Save button, so
+					// the lock lives here too, not only in what is rendered.
+					if (readOnly) return;
+					mutation.mutate(
+						{ id: client.id, edit: { name: name.trim(), group_id: groupId } },
+						{ onSuccess: onClose },
+					);
+				}}
+			>
+				<label {...stylex.props(styles.fieldLabel)}>
+					Name
+					<input
+						type="text"
+						value={name}
+						onChange={(event) => setName(event.target.value)}
+						autoFocus
+						{...stylex.props(shared.smallInput, styles.dialogInput, shared.focusRing)}
+					/>
+				</label>
+				<Select
+					label="Group"
+					variant="compactField"
+					value={String(groupId)}
+					onChange={(value) => setGroupId(Number(value))}
+					options={groups.map((group) => ({ value: String(group.id), label: group.name }))}
+				/>
+				<InlineError error={mutation.error} />
+				<div {...stylex.props(styles.actions)}>
+					{readOnly && (
+						<span {...stylex.props(styles.lockNote)}>
+							This edit can no longer be saved.
+							<ConfigLockIndicator />
+						</span>
+					)}
+					<button type="button" onClick={onClose} {...stylex.props(shared.button, shared.focusRing)}>
+						Cancel
+					</button>
+					{!readOnly && (
+						<button
+							type="submit"
+							disabled={mutation.isPending}
+							{...stylex.props(shared.primaryButton, shared.focusRing)}
+						>
+							Save
+						</button>
+					)}
+				</div>
+			</form>
+		</Dialog>
+	);
+}

admin/src/features/clients/ClientsPage.test.tsx

@@ -0,0 +1,282 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { ClientName, type ClientNames } from "./clientNames";
+import { BASE, MANAGED_FILE, NEVER, renderClientsPage, setConfigStatus } from "./testFixtures";
+
+function clientRow(ip: string): HTMLElement {
+	const row = screen.getByText(ip).closest("tr");
+	if (row === null) throw new Error(`no client row for ${ip}`);
+	return row;
+}
+
+function assignmentsSection(): HTMLElement {
+	const heading = screen.getByRole("heading", { name: /Network assignments/ });
+	const section = heading.closest("section");
+	if (section === null) throw new Error("no network assignments section");
+	return section;
+}
+
+/**
+ * Editing a client writes configuration, so the affordance is absent until the
+ * status query says the database owns it — never disabled, never assumed.
+ */
+async function unlockedEdit(index: number): Promise<HTMLButtonElement> {
+	const buttons = await screen.findAllByRole("button", { name: "Edit" });
+	return buttons[index] as HTMLButtonElement;
+}
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+test("renders the identity-first table: address, name, group, first and last seen", async () => {
+	await renderClientsPage();
+
+	const headers = screen.getAllByRole("columnheader").map((cell) => cell.textContent);
+	expect(headers).toEqual(["Address", "Name", "Group", "First seen", "Last seen", "Actions"]);
+	expect(screen.getByText("192.168.1.10")).toBeTruthy();
+	expect(screen.getByText("192.168.1.11")).toBeTruthy();
+	expect(screen.getByText("laptop")).toBeTruthy();
+	expect(screen.getAllByRole("cell", { name: "kids" })).toHaveLength(1);
+});
+
+test("a named row shows the typed name and hides the learned one", async () => {
+	await renderClientsPage();
+
+	expect(screen.getByText("laptop")).toBeTruthy();
+	expect(screen.queryByText("laptop-1.lan")).toBeNull();
+});
+
+test("an unnamed row shows the learned name with the learned marker", async () => {
+	await renderClientsPage();
+
+	// The cell holds the learned name followed by the marker, so the match is on
+	// the containing span rather than on a bare text node.
+	const learned = screen.getByText(
+		(content, element) => element?.tagName === "SPAN" && content.startsWith("kids-tablet.lan"),
+	);
+	// The marker is text, not colour, so a screen reader announces it too.
+	expect(within(learned).getByText("learned")).toBeTruthy();
+});
+
+test("the learned marker is a Clients-page affordance: query tables render the same name without it", () => {
+	const names: ClientNames = new Map([["192.168.1.11", { name: "", learned_name: "kids-tablet.lan" }]]);
+	render(<ClientName ip="192.168.1.11" names={names} />);
+
+	expect(screen.getByText("kids-tablet.lan")).toBeTruthy();
+	expect(screen.queryByText("learned")).toBeNull();
+});
+
+test("the address links to the client's detail page", async () => {
+	await renderClientsPage();
+
+	const link = within(clientRow("192.168.1.10")).getByRole("link", { name: "192.168.1.10" });
+	expect(link.getAttribute("href")).toBe("/clients/1");
+});
+
+test("shows the DNS-activity empty state when there are no clients", async () => {
+	await renderClientsPage({ ...BASE, "GET /api/clients": { clients: [] } });
+
+	expect(screen.getByText(/rows appear automatically as devices on the network make dns queries/i)).toBeTruthy();
+	expect(screen.queryByRole("table")).toBeNull();
+});
+
+test("edit opens a dialog seeded with the client's name and group", async () => {
+	await renderClientsPage();
+
+	fireEvent.click(await unlockedEdit(0));
+	// The dialog portals out of the table, so every field query is scoped to it.
+	const dialog = within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" }));
+	expect((dialog.getByLabelText("Name") as HTMLInputElement).value).toBe("laptop");
+	// The RAC Select names its trigger with the value and then the label.
+	expect(dialog.getByRole("button", { name: /Group$/ }).textContent).toContain("default");
+});
+
+test("the group picker offers every group and reports the choice", async () => {
+	await renderClientsPage();
+
+	fireEvent.click(await unlockedEdit(0));
+	const dialog = within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" }));
+	fireEvent.click(dialog.getByRole("button", { name: /Group$/ }));
+
+	const options = await screen.findAllByRole("option");
+	expect(options.map((option) => option.textContent)).toEqual(["default", "kids"]);
+
+	fireEvent.click(screen.getByRole("option", { name: "kids" }));
+	expect(screen.getByRole("button", { name: /Group$/ }).textContent).toContain("kids");
+});
+
+test("network assignments start clean and dirty on add", async () => {
+	await renderClientsPage();
+
+	const range = (await screen.findByLabelText("Range 1")) as HTMLInputElement;
+	expect(range.value).toBe("192.168.1.0/24");
+	const save = screen.getByRole("button", { name: "Save assignments" }) as HTMLButtonElement;
+	expect(save.disabled).toBe(true);
+
+	fireEvent.click(screen.getByRole("button", { name: "Add range" }));
+	expect(save.disabled).toBe(false);
+	expect((screen.getByLabelText("Range 2") as HTMLInputElement).value).toBe("");
+});
+
+test("?group= filters the list to that group", async () => {
+	const { router } = await renderClientsPage();
+	await router.navigate({ to: "/clients", search: { group: 2 } });
+
+	await waitFor(() => expect(screen.queryByText("192.168.1.10")).toBeNull());
+	expect(screen.getByText("192.168.1.11")).toBeTruthy();
+	expect(screen.getByText("Showing clients in kids.")).toBeTruthy();
+});
+
+test("an unknown group id filters to nothing and offers a way out", async () => {
+	const { router } = await renderClientsPage();
+	await router.navigate({ to: "/clients", search: { group: 999 } });
+
+	await screen.findByText("No group with id 999 exists.");
+	expect(screen.getByText("No clients match this filter.")).toBeTruthy();
+	expect(screen.queryByRole("table")).toBeNull();
+
+	fireEvent.click(screen.getByRole("link", { name: "Clear filter" }));
+	await waitFor(() => expect(screen.getByText("192.168.1.10")).toBeTruthy());
+	expect(router.state.location.search).toEqual({});
+});
+
+test("file mode drops every edit affordance and keeps the observed delete live (R2-4)", async () => {
+	await renderClientsPage({ ...BASE, "GET /api/config/status": MANAGED_FILE });
+	await screen.findAllByLabelText(/Managed by \/etc\/nxdns\/config\.zon/);
+
+	expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
+
+	const declared = clientRow("192.168.1.10");
+	const observed = clientRow("192.168.1.11");
+	expect((within(declared).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(true);
+	expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
+});
+
+test("file mode renders network assignments with no mutation control at all (R2-4)", async () => {
+	await renderClientsPage({ ...BASE, "GET /api/config/status": MANAGED_FILE });
+	const section = await waitFor(() => {
+		const found = assignmentsSection();
+		if (found.querySelector("table") === null) throw new Error("still editing");
+		return found;
+	});
+
+	expect(within(section).getByText("192.168.1.0/24")).toBeTruthy();
+	expect(
+		section.querySelectorAll(
+			"input, textarea, select, [role='combobox'], [role='checkbox'], [contenteditable], button",
+		),
+	).toHaveLength(0);
+});
+
+test("a failed config status exposes no configuration mutation, and still deletes an observed client (R3-4)", async () => {
+	await renderClientsPage({ ...BASE, "GET /api/config/status": undefined });
+	await screen.findAllByLabelText(/Configuration status unavailable/);
+
+	expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
+	expect(screen.queryByRole("button", { name: "Save assignments" })).toBeNull();
+	expect(within(assignmentsSection()).getByText(/Configuration status unavailable/)).toBeTruthy();
+
+	const observed = clientRow("192.168.1.11");
+	expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
+	const declared = clientRow("192.168.1.10");
+	expect((within(declared).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(true);
+});
+
+// The status query polls, so authority can turn while a dialog or a delete
+// confirmation is already open. `undefined` is the failed status: the fetch stub
+// answers 404 for a key it does not hold.
+//
+// Both statuses lock the declared delete, but only file authority proves the
+// file declares the row; the anchors keep the two sentences apart.
+const DECLARED_NOTE = /^This client is declared in the configuration file/;
+const UNKNOWN_NOTE = /^nxdns cannot say whether this client is declared/;
+describe.each([
+	["file authority", MANAGED_FILE, DECLARED_NOTE, UNKNOWN_NOTE],
+	["a failed status", undefined, UNKNOWN_NOTE, DECLARED_NOTE],
+])("authority turning to %s under an open affordance", (_label, status, lockNote, otherNote) => {
+	test("locks the open edit dialog's save path and leaves cancel working", async () => {
+		const map = { ...BASE };
+		const { queryClient } = await renderClientsPage(map);
+
+		fireEvent.click(await unlockedEdit(0));
+		expect(
+			within(await screen.findByRole("dialog", { name: "Edit client 192.168.1.10" })).getByRole("button", {
+				name: "Save",
+			}),
+		).toBeTruthy();
+
+		await setConfigStatus(map, queryClient, status);
+
+		// The draft survives; only the save path goes, and it says why.
+		const dialog = screen.getByRole("dialog", { name: "Edit client 192.168.1.10" });
+		expect(within(dialog).queryByRole("button", { name: "Save" })).toBeNull();
+		expect((within(dialog).getByLabelText("Name") as HTMLInputElement).value).toBe("laptop");
+		expect(within(dialog).getByText(/can no longer be saved/)).toBeTruthy();
+		expect(within(dialog).getByLabelText(/^Locked\./)).toBeTruthy();
+
+		fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+		await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+	});
+
+	test("locks an open declared-client delete confirmation and leaves cancel working", async () => {
+		const map = { ...BASE };
+		const { queryClient, fetchMock } = await renderClientsPage(map);
+		// The Edit affordance appearing is the proof authority resolved to
+		// database; the transition under test starts from there.
+		await unlockedEdit(0);
+
+		const declared = clientRow("192.168.1.10");
+		fireEvent.click(within(declared).getByRole("button", { name: "Delete" }));
+		expect(within(clientRow("192.168.1.10")).getByRole("button", { name: "Confirm delete" })).toBeTruthy();
+
+		await setConfigStatus(map, queryClient, status);
+
+		const confirming = clientRow("192.168.1.10");
+		expect(within(confirming).queryByRole("button", { name: "Confirm delete" })).toBeNull();
+		expect(within(confirming).getByText(lockNote)).toBeTruthy();
+		expect(within(confirming).queryByText(otherNote)).toBeNull();
+		expect(within(confirming).getByLabelText(/^Locked\./)).toBeTruthy();
+
+		fireEvent.click(within(confirming).getByRole("button", { name: "Cancel" }));
+		await waitFor(() =>
+			expect(within(clientRow("192.168.1.10")).getByRole("button", { name: "Delete" })).toBeTruthy(),
+		);
+		expect(fetchMock.mock.calls.filter(([, init]) => init?.method === "DELETE")).toEqual([]);
+	});
+
+	test("keeps an open observed-client delete confirmation live (R3-4)", async () => {
+		const map = { ...BASE, "DELETE /api/clients/2": {} };
+		const { queryClient, fetchMock } = await renderClientsPage(map);
+		// The Edit affordance appearing is the proof authority resolved to
+		// database; the transition under test starts from there.
+		await unlockedEdit(0);
+
+		const observed = clientRow("192.168.1.11");
+		fireEvent.click(within(observed).getByRole("button", { name: "Delete" }));
+
+		await setConfigStatus(map, queryClient, status);
+
+		fireEvent.click(within(clientRow("192.168.1.11")).getByRole("button", { name: "Confirm delete" }));
+		await waitFor(() =>
+			expect(
+				fetchMock.mock.calls.filter(
+					([input, init]) => init?.method === "DELETE" && String(input).endsWith("/2"),
+				),
+			).toHaveLength(1),
+		);
+	});
+});
+
+test("a pending config status holds the same line as a failed one (R3-4)", async () => {
+	// The status request never settles, so authority stays pending for the whole
+	// test: nothing configuration owns may be offered on that guess.
+	await renderClientsPage({ ...BASE, "GET /api/config/status": NEVER });
+	await screen.findAllByLabelText(/Checking which configuration source/);
+
+	expect(screen.queryAllByRole("button", { name: "Edit" })).toEqual([]);
+	expect(screen.queryByRole("button", { name: "Save assignments" })).toBeNull();
+	expect(within(assignmentsSection()).getByText(/Checking which configuration source/)).toBeTruthy();
+
+	const observed = clientRow("192.168.1.11");
+	expect((within(observed).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
+});

admin/src/features/clients/ClientsPage.tsx

@@ -0,0 +1,264 @@
+import { useState } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { Link, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { clientDeleteMutation, clientPrefixesQuery, clientsQuery, groupsQuery } from "@/lib/queries";
+import { formatTime } from "@/lib/format";
+import type { Client, Group } from "@/lib/types";
+import ClientEditDialog from "./ClientEditDialog";
+import NetworkAssignments from "./NetworkAssignments";
+import { ClientDisplayName } from "./clientIdentity";
+import InlineError from "@/lib/InlineError";
+import ConfigLockIndicator from "@/features/configuration/ConfigLockIndicator";
+import { useAuthority, useReadOnlyConfig, type Authority } from "@/features/configuration/authority";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+/**
+ * Deleting an observed row discards runtime state the file never declared, so
+ * it stays live under every authority; deleting a declared row contradicts the
+ * file and is the one client DELETE the server answers 403 (ruling 7).
+ *
+ * The lock fails closed, so it also holds while authority is pending or
+ * unreachable. There the file is a possibility and not a fact — `hand_edited`
+ * alone cannot say which operator surface set the row — so the sentence names
+ * the doubt rather than asserting a declaration, the way `provenanceOf` does.
+ */
+function declaredDeleteNote(authority: Authority): string {
+	if (authority.state === "resolved") {
+		return "This client is declared in the configuration file; remove it there and restart.";
+	}
+	return "nxdns cannot say whether this client is declared in the configuration file until it reports its configuration status, so deleting it stays locked.";
+}
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	empty: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	filterBar: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	table: {
+		width: "100%",
+		minWidth: "48rem",
+		textAlign: "left",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	headRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		color: colors.textMuted,
+	},
+	bodyRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+	},
+	cell: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+	},
+	right: {
+		textAlign: "right",
+	},
+	addressLink: {
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	confirmGroup: {
+		display: "inline-flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		gap: "0.5rem",
+	},
+	actionGroup: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	note: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	dangerText: {
+		color: colors.danger,
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+});
+
+export default function ClientsPage() {
+	const { data: clients } = useSuspenseQuery(clientsQuery());
+	const { data: prefixes } = useSuspenseQuery(clientPrefixesQuery());
+	const { data: groups } = useSuspenseQuery(groupsQuery());
+	const { group } = useSearch({ from: "/shell/clients" });
+	const queryClient = useQueryClient();
+	const deleteMutation = useMutation(clientDeleteMutation(queryClient));
+	const [editing, setEditing] = useState<Client | null>(null);
+	const [confirmingId, setConfirmingId] = useState<number | null>(null);
+	const readOnly = useReadOnlyConfig();
+	const authority = useAuthority();
+
+	// A well-formed id the group list does not contain is a link to a group that
+	// has since been deleted. It filters to nothing, which is the truth, and the
+	// notice says so rather than quietly showing every client.
+	const filterGroup: Group | undefined = group === undefined ? undefined : groups.find((row) => row.id === group);
+	const rows = group === undefined ? clients : clients.filter((client) => client.group_id === group);
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Clients</h1>
+			{group !== undefined && (
+				<div {...stylex.props(styles.filterBar)}>
+					<span>
+						{filterGroup !== undefined
+							? `Showing clients in ${filterGroup.name}.`
+							: `No group with id ${group} exists.`}
+					</span>
+					<Link to="/clients" search={{}} {...stylex.props(shared.linkButton, shared.focusRing)}>
+						Clear filter
+					</Link>
+				</div>
+			)}
+			{clients.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>
+					No clients yet. Rows appear automatically as devices on the network make DNS queries — there is
+					nothing to create by hand.
+				</p>
+			) : rows.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No clients match this filter.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(styles.table)}>
+						<thead>
+							<tr {...stylex.props(styles.headRow)}>
+								<th {...stylex.props(styles.cell)}>Address</th>
+								<th {...stylex.props(styles.cell)}>Name</th>
+								<th {...stylex.props(styles.cell)}>Group</th>
+								<th {...stylex.props(styles.cell)}>First seen</th>
+								<th {...stylex.props(styles.cell)}>Last seen</th>
+								<th {...stylex.props(styles.cell)}>
+									<span {...stylex.props(shared.srOnly)}>Actions</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{rows.map((client) => (
+								<tr key={client.id} {...stylex.props(styles.bodyRow)}>
+									<td {...stylex.props(styles.cell, shared.mono)}>
+										<Link
+											to="/clients/$id"
+											params={{ id: String(client.id) }}
+											{...stylex.props(styles.addressLink, shared.focusRing)}
+										>
+											{client.ip}
+										</Link>
+									</td>
+									<td {...stylex.props(styles.cell)}>
+										<ClientDisplayName client={client} />
+									</td>
+									<td {...stylex.props(styles.cell)}>{client.group}</td>
+									<td {...stylex.props(styles.cell)}>{formatTime(client.first_seen)}</td>
+									<td {...stylex.props(styles.cell)}>{formatTime(client.last_seen)}</td>
+									<td {...stylex.props(styles.cell, styles.right)}>
+										{confirmingId === client.id ? (
+											<span {...stylex.props(styles.confirmGroup)}>
+												{/* Authority is polled, so it can turn while a confirmation
+												    sits open. The confirm path reads it on every render
+												    rather than trusting the state that opened it. */}
+												<span {...stylex.props(styles.note)}>
+													{readOnly && client.hand_edited
+														? declaredDeleteNote(authority)
+														: "Deleted clients re-materialize on their next DNS query."}
+												</span>
+												{readOnly && client.hand_edited ? (
+													<ConfigLockIndicator />
+												) : (
+													<button
+														type="button"
+														onClick={() => {
+															setConfirmingId(null);
+															deleteMutation.mutate(client.id);
+														}}
+														{...stylex.props(
+															shared.smallButton,
+															styles.dangerText,
+															shared.focusRing,
+														)}
+													>
+														Confirm delete
+													</button>
+												)}
+												<button
+													type="button"
+													onClick={() => setConfirmingId(null)}
+													{...stylex.props(shared.smallButton, shared.focusRing)}
+												>
+													Cancel
+												</button>
+											</span>
+										) : (
+											<span {...stylex.props(styles.actionGroup)}>
+												{/* Naming a client writes configuration, so the affordance is
+												    absent — not disabled — wherever the write cannot land. */}
+												{readOnly ? (
+													<ConfigLockIndicator />
+												) : (
+													<button
+														type="button"
+														onClick={() => setEditing(client)}
+														{...stylex.props(shared.smallButton, shared.focusRing)}
+													>
+														Edit
+													</button>
+												)}
+												<button
+													type="button"
+													onClick={() => setConfirmingId(client.id)}
+													disabled={readOnly && client.hand_edited}
+													title={
+														readOnly && client.hand_edited
+															? declaredDeleteNote(authority)
+															: undefined
+													}
+													{...stylex.props(
+														shared.smallButton,
+														styles.dangerText,
+														styles.dimWhenDisabled,
+														shared.focusRing,
+													)}
+												>
+													Delete
+												</button>
+											</span>
+										)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+			<InlineError error={deleteMutation.error} />
+			{editing !== null && <ClientEditDialog client={editing} groups={groups} onClose={() => setEditing(null)} />}
+			<NetworkAssignments prefixes={prefixes} groups={groups} />
+		</section>
+	);
+}

admin/src/features/clients/NetworkAssignments.tsx

@@ -0,0 +1,265 @@
+import { useReducer, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { clientPrefixesPutMutation } from "@/lib/queries";
+import type { ClientPrefix, Group } from "@/lib/types";
+import { defaultGroupId } from "@/lib/defaultGroup";
+import { firstProblem, initPrefixEditor, isDirty, prefixEditorReducer, toInputs } from "./prefixEditor";
+import InlineError from "@/lib/InlineError";
+import AuthorityGate from "@/features/configuration/AuthorityGate";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+interface Props {
+	prefixes: ClientPrefix[];
+	groups: Group[];
+}
+
+const styles = stylex.create({
+	section: {
+		marginTop: "2.5rem",
+	},
+	heading: {
+		fontSize: "1.25rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	headingKey: {
+		marginLeft: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 400,
+		color: colors.textMuted,
+	},
+	intro: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	empty: {
+		marginTop: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	rows: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+		marginTop: "1rem",
+		listStyleType: "none",
+		padding: 0,
+	},
+	row: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	prefixInput: {
+		width: "13rem",
+	},
+	priorityInput: {
+		width: "5rem",
+	},
+	removeButton: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: "transparent",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	validation: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	actions: {
+		display: "flex",
+		gap: "0.5rem",
+		marginTop: "1rem",
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+});
+
+/**
+ * Address ranges that assign a group to every device inside them.
+ *
+ * The section is a configuration rendering, so it goes through the authority
+ * gate: the editor exists only where a save can land, and file authority gets
+ * the assignments as a table rather than a form nobody may submit.
+ */
+export default function NetworkAssignments({ prefixes, groups }: Props) {
+	return (
+		<section {...stylex.props(styles.section)}>
+			<h2 {...stylex.props(styles.heading)}>
+				Network assignments
+				<code {...stylex.props(shared.mono, styles.headingKey)}>client_prefixes</code>
+			</h2>
+			<p {...stylex.props(styles.intro)}>
+				An address range assigns its group to every device inside it, for devices with no row of their own. The
+				highest priority match wins.
+			</p>
+			<AuthorityGate>
+				{(status) =>
+					status.authority === "database" ? (
+						<AssignmentsEditor prefixes={prefixes} groups={groups} />
+					) : (
+						<AssignmentsTable prefixes={prefixes} />
+					)
+				}
+			</AuthorityGate>
+		</section>
+	);
+}
+
+function AssignmentsTable({ prefixes }: { prefixes: ClientPrefix[] }) {
+	if (prefixes.length === 0) return <p {...stylex.props(styles.empty)}>The file declares no network assignments.</p>;
+	return (
+		<div {...stylex.props(shared.tableWrap)}>
+			<table {...stylex.props(styles.table)}>
+				<thead>
+					<tr>
+						<th {...stylex.props(shared.th)}>Range</th>
+						<th {...stylex.props(shared.th)}>Group</th>
+						<th {...stylex.props(shared.th)}>Priority</th>
+					</tr>
+				</thead>
+				<tbody>
+					{prefixes.map((prefix) => (
+						<tr key={prefix.id}>
+							<td {...stylex.props(shared.td, shared.mono)}>{prefix.prefix}</td>
+							<td {...stylex.props(shared.td)}>{prefix.group}</td>
+							<td {...stylex.props(shared.td, shared.tabularNums)}>{prefix.priority}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+/**
+ * The list is saved as a whole, so the editor holds every row and the PUT
+ * replaces the set. Reached only under resolved database authority: the gate
+ * above owns that decision, and no control here consults it a second time.
+ */
+function AssignmentsEditor({ prefixes, groups }: Props) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(clientPrefixesPutMutation(queryClient));
+	const [state, dispatch] = useReducer(prefixEditorReducer, prefixes, initPrefixEditor);
+	const [validation, setValidation] = useState<string | null>(null);
+	const dirty = isDirty(state);
+	const fallbackGroupId = defaultGroupId(groups);
+	const groupOptions = groups.map((group) => ({ value: String(group.id), label: group.name }));
+
+	const save = () => {
+		const problem = firstProblem(state.rows);
+		setValidation(problem);
+		if (problem !== null) return;
+		mutation.mutate(toInputs(state.rows), {
+			onSuccess: (stored) => dispatch({ type: "reset", prefixes: stored }),
+		});
+	};
+
+	return (
+		<>
+			{state.rows.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No network assignments configured.</p>
+			) : (
+				<ul {...stylex.props(styles.rows)}>
+					{state.rows.map((row, index) => (
+						<li key={index} {...stylex.props(styles.row)}>
+							<input
+								type="text"
+								aria-label={`Range ${index + 1}`}
+								placeholder="192.168.1.0/24"
+								value={row.prefix}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { prefix: event.target.value } })
+								}
+								{...stylex.props(shared.smallInput, styles.prefixInput, shared.focusRing)}
+							/>
+							<Select
+								aria-label={`Group for range ${index + 1}`}
+								variant="inline"
+								value={String(row.group_id)}
+								onChange={(value) =>
+									dispatch({ type: "edit", index, patch: { group_id: Number(value) } })
+								}
+								options={groupOptions}
+							/>
+							<input
+								type="text"
+								inputMode="numeric"
+								aria-label={`Priority for range ${index + 1}`}
+								placeholder="100"
+								value={row.priority}
+								onChange={(event) =>
+									dispatch({ type: "edit", index, patch: { priority: event.target.value } })
+								}
+								{...stylex.props(shared.smallInput, styles.priorityInput, shared.focusRing)}
+							/>
+							<button
+								type="button"
+								onClick={() => dispatch({ type: "remove", index })}
+								{...stylex.props(styles.removeButton, shared.focusRing)}
+							>
+								Remove
+							</button>
+						</li>
+					))}
+				</ul>
+			)}
+			{validation !== null && (
+				<p role="alert" {...stylex.props(styles.validation)}>
+					{validation}
+				</p>
+			)}
+			<InlineError error={mutation.error} />
+			<div {...stylex.props(styles.actions)}>
+				<button
+					type="button"
+					onClick={() => dispatch({ type: "add", groupId: fallbackGroupId })}
+					{...stylex.props(shared.button, shared.focusRing)}
+				>
+					Add range
+				</button>
+				<button
+					type="button"
+					onClick={save}
+					disabled={!dirty || mutation.isPending}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					Save assignments
+				</button>
+				{dirty && (
+					<button
+						type="button"
+						onClick={() => {
+							setValidation(null);
+							dispatch({ type: "reset", prefixes });
+						}}
+						{...stylex.props(shared.button, shared.focusRing)}
+					>
+						Discard changes
+					</button>
+				)}
+			</div>
+		</>
+	);
+}

admin/src/features/clients/clientIdentity.tsx

@@ -0,0 +1,72 @@
+/**
+ * How a client says who it is, shared by the list and the detail page.
+ *
+ * The learned marker lives here and nowhere else. A client is named once on
+ * each of these two pages, so the tag is information; the query tables render
+ * the same muted name through `ClientName` without it, because repeating the
+ * tag down every row of a log is noise.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import type { Client } from "@/lib/types";
+import type { Authority } from "@/features/configuration/authority";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	unnamed: {
+		color: colors.textMuted,
+	},
+});
+
+export function ClientDisplayName({ client }: { client: Client }) {
+	if (client.name !== "") return <>{client.name}</>;
+	if (client.learned_name !== "") {
+		return (
+			<span {...stylex.props(shared.learnedName)}>
+				{client.learned_name}
+				<span {...stylex.props(shared.learnedTag)}>learned</span>
+			</span>
+		);
+	}
+	return <span {...stylex.props(styles.unnamed)}>—</span>;
+}
+
+export interface Provenance {
+	label: string;
+	detail: string;
+}
+
+/**
+ * Where this row's name and group came from.
+ *
+ * `hand_edited` records that an operator settled this client, but not which
+ * operator surface did: under file authority the reconciler sets it from the
+ * declaration, and in database mode the admin's own edit does. Authority is the
+ * only way to tell them apart, so while it is pending or unreachable the page
+ * says what it knows and names the doubt rather than picking one.
+ */
+export function provenanceOf(client: Client, authority: Authority): Provenance {
+	if (!client.hand_edited) {
+		return {
+			label: "Learned",
+			detail: "This client appeared from DNS traffic. Its name, if any, comes from reverse DNS.",
+		};
+	}
+	if (authority.state === "resolved" && authority.status.authority === "managed_file") {
+		return {
+			label: "Declared",
+			detail: `Declared in ${authority.status.path ?? "the configuration file"}. Reverse DNS does not overwrite it.`,
+		};
+	}
+	if (authority.state === "resolved") {
+		return {
+			label: "Edited",
+			detail: "The name and group were set here. Reverse DNS does not overwrite them.",
+		};
+	}
+	return {
+		label: "Set by hand",
+		detail: "Either declared in the configuration file or edited here — nxdns cannot say which until it reports its configuration status.",
+	};
+}

admin/src/features/clients/clientNames.tsx

@@ -0,0 +1,63 @@
+/**
+ * The client column of the query tables reads as a name wherever one is known,
+ * with the same precedence the Clients page applies: a hand-typed `name` wins,
+ * the reverse-DNS `learned_name` stands in muted behind it, and an address with
+ * neither — including one the loaded list has never seen — stays bare.
+ *
+ * The muted colour is the whole of the affordance here. The Clients page pairs
+ * it with an outlined "learned" tag, and keeps it: one mention per client is
+ * information. Repeating that tag down every row of a query table is noise, so
+ * the tables carry the name alone.
+ */
+
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { clientsQuery } from "@/lib/queries";
+import type { Client } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+
+export type ClientNames = ReadonlyMap<string, Pick<Client, "name" | "learned_name">>;
+
+/**
+ * The live stream names clients the loaded list has never seen. Polling folds
+ * them in on the next tick, which keeps the lookup a single cached query
+ * instead of a fetch fired per unknown address.
+ */
+const CLIENTS_POLL_MS = 30_000;
+
+export function useClientNames(): ClientNames {
+	const { data } = useQuery({ ...clientsQuery(), refetchInterval: CLIENTS_POLL_MS });
+	return useMemo(
+		() =>
+			new Map(
+				(data ?? []).map((client) => [client.ip, { name: client.name, learned_name: client.learned_name }]),
+			),
+		[data],
+	);
+}
+
+/**
+ * The name the loaded list gives this address right now, or null when it gives
+ * none. Callers that must distinguish "named" from "bare address" — rather than
+ * just render whichever applies — read this instead of re-deriving precedence.
+ */
+export function clientLabel(ip: string, names: ClientNames): { text: string; learned: boolean } | null {
+	const client = names.get(ip);
+	if (client === undefined) return null;
+	if (client.name !== "") return { text: client.name, learned: false };
+	if (client.learned_name !== "") return { text: client.learned_name, learned: true };
+	return null;
+}
+
+export function ClientName({ ip, names }: { ip: string; names: ClientNames }) {
+	const label = clientLabel(ip, names);
+	if (label === null) return <span {...stylex.props(shared.mono)}>{ip}</span>;
+	// The name replaces the address on screen, so the address stays reachable
+	// as the tooltip rather than disappearing from the row entirely.
+	return (
+		<span title={ip} {...stylex.props(label.learned && shared.learnedName)}>
+			{label.text}
+		</span>
+	);
+}

admin/src/features/clients/testFixtures.tsx

@@ -0,0 +1,129 @@
+/**
+ * The Clients pages under a real router: both of them read the same list, and
+ * the detail route is reached by deep link as often as by click, so the tests
+ * drive the router rather than the components.
+ */
+
+import { act, render, screen } from "@testing-library/react";
+import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { queryKeys } from "@/lib/queries";
+import { createAppRouter } from "@/routes";
+
+export const GROUPS = {
+	groups: [
+		{ id: 1, name: "default", safe_search: false },
+		{ id: 2, name: "kids", safe_search: true },
+	],
+};
+
+export const CLIENTS = {
+	clients: [
+		{
+			id: 1,
+			ip: "192.168.1.10",
+			name: "laptop",
+			learned_name: "laptop-1.lan",
+			group_id: 1,
+			group: "default",
+			hand_edited: true,
+			first_seen: 1700000000,
+			last_seen: 1700003600,
+		},
+		{
+			id: 2,
+			ip: "192.168.1.11",
+			name: "",
+			learned_name: "kids-tablet.lan",
+			group_id: 2,
+			group: "kids",
+			hand_edited: false,
+			first_seen: 1700000000,
+			last_seen: 1700007200,
+		},
+	],
+};
+
+export const PREFIXES = {
+	client_prefixes: [{ id: 1, prefix: "192.168.1.0/24", group_id: 2, group: "kids", priority: 100 }],
+};
+
+const VERSION = { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 };
+
+export const DATABASE = { authority: "database", path: null, reconciled_at: null, restart_pending: false };
+export const MANAGED_FILE = {
+	authority: "managed_file",
+	path: "/etc/nxdns/config.zon",
+	reconciled_at: 1754899200,
+	restart_pending: false,
+};
+
+export const BASE: Record<string, unknown> = {
+	"GET /api/clients": CLIENTS,
+	"GET /api/client-prefixes": PREFIXES,
+	"GET /api/groups": GROUPS,
+	"GET /api/version": VERSION,
+	"GET /api/config/status": DATABASE,
+};
+
+/** A request that never settles, so its query stays pending for the whole test. */
+export const NEVER = Symbol("never");
+
+export function stubFetch(map: Record<string, unknown>): ReturnType<typeof vi.fn> {
+	const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+		const key = `${init?.method ?? "GET"} ${String(input)}`;
+		const payload = map[key];
+		if (payload === NEVER) return new Promise<Response>(() => {});
+		if (payload === undefined) {
+			return new Response(JSON.stringify({ error: `not stubbed: ${key}` }), { status: 404 });
+		}
+		return new Response(JSON.stringify(payload), {
+			status: 200,
+			headers: { "content-type": "application/json" },
+		});
+	});
+	vi.stubGlobal("fetch", fetchMock);
+	return fetchMock;
+}
+
+export function renderAt(path: string, map: Record<string, unknown>) {
+	const fetchMock = stubFetch(map);
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [path] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return { router, fetchMock, queryClient };
+}
+
+export async function renderClientsPage(map: Record<string, unknown> = BASE) {
+	const handles = renderAt("/clients", map);
+	await screen.findByRole("heading", { name: "Clients" });
+	return handles;
+}
+
+/**
+ * Turns configuration authority under a mounted page, the way the status
+ * query's own poll would: the stub reads the map on each call, so replacing the
+ * entry and refetching is the whole transition. `undefined` stands for a failed
+ * status — the stub answers 404 for a key it does not hold.
+ */
+export async function setConfigStatus(
+	map: Record<string, unknown>,
+	queryClient: QueryClient,
+	status: unknown,
+): Promise<void> {
+	map["GET /api/config/status"] = status;
+	await act(async () => {
+		await queryClient.refetchQueries({ queryKey: queryKeys.configStatus });
+		// The cache lands before its observers are notified — react-query defers
+		// that notification — so the render pass needs one more turn inside act.
+		await new Promise((resolve) => setTimeout(resolve, 0));
+	});
+}

admin/src/features/configuration/AuthorityGate.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import type { ConfigStatus } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { useAuthority } from "./authority";
+import { styles } from "./styles";
+
+/**
+ * Guards a configuration rendering on resolved authority (D6).
+ *
+ * The two renderings — editable forms and file-mode definition lists — are
+ * mutually exclusive answers to a question only the server can settle, so
+ * neither is drawn until it has. Pending is a skeleton; a failed status query
+ * is an error with a Retry, never a form drawn on a guess.
+ *
+ * Runtime actions do not pass through here. Pause, update now and reload
+ * certificates work under every authority, so their pages render them beside
+ * the gate rather than inside it.
+ */
+export default function AuthorityGate({ children }: { children: (status: ConfigStatus) => ReactNode }) {
+	const authority = useAuthority();
+
+	if (authority.state === "pending") {
+		return (
+			<p role="status" {...stylex.props(styles.pending, shared.pulse)}>
+				Checking which configuration source this server obeys…
+			</p>
+		);
+	}
+
+	if (authority.state === "failed") {
+		return (
+			<div {...stylex.props(styles.blocked)}>
+				<p>
+					Configuration status unavailable. nxdns cannot say whether a file or the database owns this
+					configuration, so nothing here can be edited until it answers.
+				</p>
+				<InlineError error={authority.error} onRetry={authority.retry} />
+			</div>
+		);
+	}
+
+	return <>{children(authority.status)}</>;
+}

admin/src/features/configuration/AuthorityLine.tsx

@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex";
+import { formatTime } from "@/lib/format";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { useAuthority } from "./authority";
+
+const styles = stylex.create({
+	line: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	path: {
+		overflowWrap: "anywhere",
+	},
+});
+
+/**
+ * File authority, stated once, in the configuration sub-navigation (§File
+ * mode). Not a banner on every route: the fact belongs to configuration, and
+ * repeating it above Overview and Activity buys nothing.
+ *
+ * "loaded" is deliberate. `reconciled_at` is when this process read the file;
+ * the server cannot prove the file still says what it said then, so the line
+ * never claims to describe the file's current contents.
+ */
+export default function AuthorityLine() {
+	const authority = useAuthority();
+	if (authority.state !== "resolved" || authority.status.authority !== "managed_file") return null;
+	const { path, reconciled_at } = authority.status;
+	return (
+		<p {...stylex.props(styles.line)}>
+			{"File-managed · "}
+			<code {...stylex.props(shared.mono, styles.path)}>{path}</code>
+			{reconciled_at === null ? null : ` · loaded ${formatTime(reconciled_at)}`}
+		</p>
+	);
+}

admin/src/features/configuration/BlocklistForm.tsx

@@ -1,8 +1,46 @@
 import { useState, type FormEvent } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
 import InlineError from "@/lib/InlineError";
 import type { Blocklist, BlocklistInput } from "@/lib/types";
-import { buttonClass, focusRing, inputClass, primaryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+
+const styles = stylex.create({
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1rem",
+		maxWidth: "36rem",
+	},
+	heading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	checkboxLabel: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	buttonRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	cancel: {
+		fontWeight: 500,
+	},
+});
 
 /**
  * Drops the rejection the page already renders inline below the form. Anything
@@ -43,10 +81,10 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
 	}
 
 	return (
-		<form onSubmit={handleSubmit} className="mt-4 max-w-xl space-y-3">
-			<h2 className="text-lg font-medium">{initial === undefined ? "Add source" : `Edit ${initial.name}`}</h2>
+		<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
+			<h2 {...stylex.props(styles.heading)}>{initial === undefined ? "Add source" : `Edit ${initial.name}`}</h2>
 			<div>
-				<label htmlFor="blocklist-url" className="block text-sm font-medium">
+				<label htmlFor="blocklist-url" {...stylex.props(styles.fieldLabel)}>
 					URL
 				</label>
 				<input
@@ -55,11 +93,11 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
 					required
 					value={url}
 					onChange={(event) => setUrl(event.target.value)}
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
 			<div>
-				<label htmlFor="blocklist-name" className="block text-sm font-medium">
+				<label htmlFor="blocklist-name" {...stylex.props(styles.fieldLabel)}>
 					Name
 				</label>
 				<input
@@ -68,24 +106,28 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
 					required
 					value={name}
 					onChange={(event) => setName(event.target.value)}
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
-			<label className="flex items-center gap-2 text-sm font-medium">
+			<label {...stylex.props(styles.checkboxLabel)}>
 				<input
 					type="checkbox"
 					checked={enabled}
 					onChange={(event) => setEnabled(event.target.checked)}
-					className={focusRing}
+					{...stylex.props(shared.focusRing)}
 				/>
 				Enabled
 			</label>
-			<div className="flex items-center gap-2">
-				<button type="submit" disabled={busy} className={primaryButtonClass}>
+			<div {...stylex.props(styles.buttonRow)}>
+				<button type="submit" disabled={busy} {...stylex.props(shared.primaryButton, shared.focusRing)}>
 					{initial === undefined ? "Add source" : "Save changes"}
 				</button>
 				{onCancel !== undefined && (
-					<button type="button" onClick={onCancel} className={`${buttonClass} font-medium`}>
+					<button
+						type="button"
+						onClick={onCancel}
+						{...stylex.props(shared.button, styles.cancel, shared.focusRing)}
+					>
 						Cancel
 					</button>
 				)}

admin/src/features/configuration/ConfigLockIndicator.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createQueryClient } from "@/lib/queryClient";
+import DefinitionList from "@/ui/DefinitionList";
+import ConfigLockIndicator from "./ConfigLockIndicator";
+import { CONFIG_PATH, DATABASE, MANAGED_FILE, stubApi } from "./testFixtures";
+import type { ConfigStatus } from "@/lib/types";
+
+/**
+ * The two shared pieces the redesign adds: the file-mode rendering of a scalar
+ * and the compact lock a configuration control outside a configuration page
+ * carries.
+ */
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderIndicator(status: ConfigStatus | "failed") {
+	if (status === "failed") {
+		stubApi(DATABASE, {
+			responses: {
+				"GET /api/config/status": new Response(JSON.stringify({ error: "unavailable" }), { status: 503 }),
+			},
+		});
+	} else {
+		stubApi(status);
+	}
+	render(
+		<QueryClientProvider client={createQueryClient()}>
+			<ConfigLockIndicator />
+		</QueryClientProvider>,
+	);
+}
+
+test("a definition names the value in words and the file key beside it", () => {
+	render(
+		<DefinitionList
+			items={[
+				{ label: "Port", zonKey: "dns.port", value: "53" },
+				{ label: "Authentication", value: "required" },
+			]}
+		/>,
+	);
+
+	const port = screen.getByText("Port");
+	expect(port.tagName).toBe("DT");
+	expect(port.textContent).toBe("Portdns.port");
+	// A derived value has no key: inventing one would send the reader looking
+	// for a line that is not in the file.
+	expect(screen.getByText("Authentication").textContent).toBe("Authentication");
+	expect(screen.getByText("required").tagName).toBe("DD");
+});
+
+test("the lock is silent when the database owns the configuration", async () => {
+	renderIndicator(DATABASE);
+
+	await waitFor(() => expect(screen.queryByText("Locked")).toBeNull());
+});
+
+test("under file authority the lock names the file, in words a reader hears", async () => {
+	renderIndicator(MANAGED_FILE);
+
+	const lock = await screen.findByText("Locked");
+	await waitFor(() =>
+		expect(lock.getAttribute("aria-label")).toBe(
+			`Locked. Managed by ${CONFIG_PATH}; edit the file and restart nxdns.`,
+		),
+	);
+});
+
+test("an unanswered status still locks, and says that is why", async () => {
+	renderIndicator("failed");
+
+	const lock = await screen.findByText("Locked");
+	await waitFor(() => expect(lock.getAttribute("aria-label")).toContain("Configuration status unavailable"));
+});

admin/src/features/configuration/ConfigLockIndicator.tsx

@@ -0,0 +1,45 @@
+import * as stylex from "@stylexjs/stylex";
+import { colors } from "@/ui/tokens.stylex";
+import { useAuthority } from "./authority";
+
+const styles = stylex.create({
+	tag: {
+		marginLeft: "0.5rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: "0.25rem",
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});
+
+/**
+ * The compact lock, for a configuration control that survives outside a
+ * configuration page — the Clients page edits a group assignment the file may
+ * own. The configuration pages themselves do not use it: they change rendering
+ * rather than annotate a control they left up.
+ *
+ * The word is real text, not colour or an icon, so a screen reader announces
+ * the reason the control will not answer.
+ */
+export default function ConfigLockIndicator() {
+	const authority = useAuthority();
+	if (authority.state === "resolved" && authority.status.authority === "database") return null;
+
+	const reason =
+		authority.state === "pending"
+			? "Checking which configuration source this server obeys"
+			: authority.state === "failed"
+				? "Configuration status unavailable, so edits are held back"
+				: `Managed by ${authority.status.path ?? "the configuration file"}; edit the file and restart nxdns`;
+
+	return (
+		<span title={reason} aria-label={`Locked. ${reason}.`} {...stylex.props(styles.tag)}>
+			Locked
+		</span>
+	);
+}

admin/src/features/configuration/FileModeNote.tsx

@@ -0,0 +1,17 @@
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { styles } from "./styles";
+
+/**
+ * The short note every file-managed page carries: where the values come from,
+ * and what applies a change to them. It replaces the disabled Save button —
+ * the reader needs the path, not a control that cannot work.
+ */
+export default function FileModeNote({ path }: { path: string | null }) {
+	return (
+		<p {...stylex.props(styles.fileNote)}>
+			These values are loaded from <code {...stylex.props(shared.mono)}>{path ?? "the configuration file"}</code>.
+			Edit that file to change them; most changes need an nxdns restart to take effect.
+		</p>
+	);
+}

admin/src/features/configuration/GroupSourcesEditor.tsx

@@ -1,16 +1,47 @@
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import { groupSourcesPutMutation, groupSourcesQuery } from "@/lib/queries";
 import type { Blocklist } from "@/lib/types";
 import { sameSet, toggleSource } from "./sourceSet";
 import InlineError from "@/lib/InlineError";
-import { buttonClass, focusRing, primaryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 
 interface Props {
 	groupId: number;
 	blocklists: Blocklist[];
 }
 
+const styles = stylex.create({
+	note: {
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	root: {
+		marginTop: "0.75rem",
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	checkboxLabel: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	buttonRow: {
+		marginTop: "0.75rem",
+		display: "flex",
+		gap: "0.5rem",
+	},
+});
+
 export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 	const queryClient = useQueryClient();
 	const sources = useQuery(groupSourcesQuery(groupId));
@@ -19,7 +50,7 @@ export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 
 	if (sources.isPending) {
 		return (
-			<p role="status" className="mt-3 text-sm text-zinc-500">
+			<p role="status" {...stylex.props(styles.note)}>
 				Loading sources…
 			</p>
 		);
@@ -27,27 +58,23 @@ export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 	if (sources.isError) return <InlineError error={sources.error} />;
 
 	if (blocklists.length === 0) {
-		return (
-			<p className="mt-3 text-sm text-zinc-500">
-				No blocklist sources exist yet — add them on the Blocklists page.
-			</p>
-		);
+		return <p {...stylex.props(styles.note)}>No blocklist sources exist yet — add them on the Sources tab.</p>;
 	}
 
 	const current = selected ?? sources.data;
 	const dirty = !sameSet(current, sources.data);
 
 	return (
-		<div className="mt-3">
-			<ul className="space-y-1">
+		<div {...stylex.props(styles.root)}>
+			<ul {...stylex.props(styles.list)}>
 				{blocklists.map((blocklist) => (
 					<li key={blocklist.id}>
-						<label className="inline-flex items-center gap-2 text-sm">
+						<label {...stylex.props(styles.checkboxLabel)}>
 							<input
 								type="checkbox"
 								checked={current.includes(blocklist.id)}
 								onChange={() => setSelected(toggleSource(current, blocklist.id))}
-								className={focusRing}
+								{...stylex.props(shared.focusRing)}
 							/>
 							{blocklist.name}
 						</label>
@@ -55,19 +82,23 @@ export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
 				))}
 			</ul>
 			<InlineError error={mutation.error} />
-			<div className="mt-3 flex gap-2">
+			<div {...stylex.props(styles.buttonRow)}>
 				<button
 					type="button"
 					disabled={!dirty || mutation.isPending}
 					onClick={() =>
 						mutation.mutate({ id: groupId, sourceIds: current }, { onSuccess: () => setSelected(null) })
 					}
-					className={primaryButtonClass}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
 				>
 					Save sources
 				</button>
 				{dirty && (
-					<button type="button" onClick={() => setSelected(null)} className={buttonClass}>
+					<button
+						type="button"
+						onClick={() => setSelected(null)}
+						{...stylex.props(shared.button, shared.focusRing)}
+					>
 						Discard
 					</button>
 				)}

admin/src/features/configuration/LocalReadOnly.tsx

@@ -0,0 +1,79 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ForwardZone, LocalRecord } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { styles as config } from "./styles";
+
+/**
+ * Local records and forward zones under file authority. Collections are
+ * tables, not definition lists, and each names the ZON key it comes from once
+ * rather than repeating it on every row.
+ */
+export function RecordsReadOnly({ records }: { records: LocalRecord[] }) {
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h2 {...stylex.props(config.panelHeading)}>
+				Local records
+				<code {...stylex.props(shared.mono, config.panelKey)}>local_records</code>
+			</h2>
+			{records.length === 0 ? (
+				<p {...stylex.props(config.empty)}>The file declares no local records.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>Name</th>
+								<th {...stylex.props(shared.th)}>Type</th>
+								<th {...stylex.props(shared.th)}>Value</th>
+								<th {...stylex.props(shared.th)}>TTL</th>
+							</tr>
+						</thead>
+						<tbody>
+							{records.map((record) => (
+								<tr key={record.id}>
+									<td {...stylex.props(shared.td, shared.mono)}>{record.name}</td>
+									<td {...stylex.props(shared.td)}>{record.rtype}</td>
+									<td {...stylex.props(shared.td, shared.mono)}>{record.value}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{record.ttl}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}
+
+export function ZonesReadOnly({ zones }: { zones: ForwardZone[] }) {
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h2 {...stylex.props(config.panelHeading)}>
+				Forward zones
+				<code {...stylex.props(shared.mono, config.panelKey)}>forward_zones</code>
+			</h2>
+			{zones.length === 0 ? (
+				<p {...stylex.props(config.empty)}>The file declares no forward zones.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>Zone</th>
+								<th {...stylex.props(shared.th)}>Resolver</th>
+							</tr>
+						</thead>
+						<tbody>
+							{zones.map((zone) => (
+								<tr key={zone.id}>
+									<td {...stylex.props(shared.td, shared.mono)}>{zone.zone}</td>
+									<td {...stylex.props(shared.td, shared.mono)}>{zone.resolver}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}

admin/src/features/configuration/ProtectionGroups.tsx

@@ -0,0 +1,596 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useNavigate, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
+import { formatTime } from "@/lib/format";
+import InlineError from "@/lib/InlineError";
+import {
+	blocklistsQuery,
+	clientsQuery,
+	groupCreateMutation,
+	groupDeleteMutation,
+	groupSourcesQuery,
+	groupUpdateMutation,
+	groupsQuery,
+	ruleCreateMutation,
+	ruleDeleteMutation,
+	rulesQuery,
+} from "@/lib/queries";
+import type { Blocklist, ConfigStatus, Group, Rule, RuleAction, RuleKind } from "@/lib/types";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import DefinitionList from "@/ui/DefinitionList";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import AuthorityGate from "./AuthorityGate";
+import FileModeNote from "./FileModeNote";
+import GroupSourcesEditor from "./GroupSourcesEditor";
+import QueryPanel from "./QueryPanel";
+import { styles as config } from "./styles";
+
+const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";
+
+const KIND_OPTIONS = [
+	{ value: "exact", label: "exact" },
+	{ value: "wildcard", label: "wildcard" },
+	{ value: "regex", label: "regex" },
+];
+
+const ACTION_OPTIONS = [
+	{ value: "allow", label: "allow" },
+	{ value: "block", label: "block" },
+];
+
+const styles = stylex.create({
+	createForm: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+		marginBottom: "0.75rem",
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	detailHeading: {
+		fontSize: "1.25rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	controlRow: {
+		marginTop: "0.75rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	checkboxLabel: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	spacer: {
+		marginLeft: "auto",
+	},
+	destructive: {
+		color: colors.danger,
+	},
+	ruleForm: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1rem",
+		maxWidth: "36rem",
+	},
+	fieldGrid: {
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
+		},
+	},
+	allow: {
+		color: colors.primaryOnSurface,
+	},
+	block: {
+		color: colors.danger,
+	},
+	pattern: {
+		fontWeight: 500,
+	},
+});
+
+export default function ProtectionGroups() {
+	const groups = useQuery(groupsQuery());
+	return (
+		<AuthorityGate>
+			{(status) => (
+				<div>
+					{status.authority === "managed_file" && <FileModeNote path={status.path} />}
+					<QueryPanel query={groups}>
+						{(rows) => <GroupsMasterDetail groups={rows} status={status} />}
+					</QueryPanel>
+				</div>
+			)}
+		</AuthorityGate>
+	);
+}
+
+/**
+ * Master/detail on one group at a time. The selection is `?group=`, so a view
+ * of a group is a link and the browser's back button walks the groups the
+ * reader looked at.
+ */
+function GroupsMasterDetail({ groups, status }: { groups: Group[]; status: ConfigStatus }) {
+	const search = useSearch({ from: "/shell/configuration/protection" });
+	const navigate = useNavigate({ from: "/configuration/protection" });
+
+	const known = groups.some((group) => group.id === search.group);
+	const selectedId = known ? search.group : groups[0]?.id;
+	const selected = groups.find((group) => group.id === selectedId);
+
+	// An id the URL named that no group has — deleted, or hand-typed — falls
+	// back to the first group, and the URL is rewritten to say so. `replace`,
+	// because a corrected address is not a place the reader chose to be and a
+	// back button that returns to it would trap them.
+	useEffect(() => {
+		if (selectedId === undefined || selectedId === search.group) return;
+		void navigate({ search: { tab: search.tab, group: selectedId }, replace: true });
+	}, [navigate, search.group, search.tab, selectedId]);
+
+	const fileMode = status.authority === "managed_file";
+
+	return (
+		<div {...stylex.props(config.split)}>
+			<div>
+				{!fileMode && <CreateGroupForm />}
+				<nav aria-label="Groups" {...stylex.props(styles.controlRow)}>
+					<ul {...stylex.props(config.masterList)}>
+						{groups.map((group) => (
+							<li key={group.id}>
+								<Link
+									to="/configuration/protection"
+									search={{ tab: search.tab, group: group.id }}
+									activeOptions={{ includeSearch: true }}
+									{...stylex.props(
+										config.masterLink,
+										group.id === selectedId && config.masterLinkActive,
+										shared.focusRing,
+									)}
+								>
+									{group.name}
+								</Link>
+							</li>
+						))}
+					</ul>
+				</nav>
+			</div>
+			{selected === undefined ? (
+				<p {...stylex.props(config.empty)}>No groups exist.</p>
+			) : fileMode ? (
+				<GroupDetailReadOnly group={selected} />
+			) : (
+				<GroupDetailEditable group={selected} />
+			)}
+		</div>
+	);
+}
+
+function CreateGroupForm() {
+	const queryClient = useQueryClient();
+	const create = useMutation(groupCreateMutation(queryClient));
+	const [newName, setNewName] = useState("");
+	return (
+		<>
+			<form
+				{...stylex.props(styles.createForm)}
+				onSubmit={(event: FormEvent) => {
+					event.preventDefault();
+					const name = newName.trim();
+					if (name === "") return;
+					create.mutate({ name }, { onSuccess: () => setNewName("") });
+				}}
+			>
+				<label {...stylex.props(styles.fieldLabel)} htmlFor="new-group-name">
+					New group
+				</label>
+				<input
+					id="new-group-name"
+					type="text"
+					value={newName}
+					onChange={(event) => setNewName(event.target.value)}
+					{...stylex.props(shared.smallInput, shared.focusRing)}
+				/>
+				<button
+					type="submit"
+					disabled={create.isPending}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					Create
+				</button>
+			</form>
+			<InlineError error={create.error} />
+		</>
+	);
+}
+
+function ClientCountLink({ group }: { group: Group }) {
+	const clients = useQuery(clientsQuery());
+	const count = clients.data?.filter((client) => client.group_id === group.id).length;
+	return (
+		<p {...stylex.props(config.note)}>
+			<Link to="/clients" search={{ group: group.id }} {...stylex.props(shared.focusRing)}>
+				{count === undefined
+					? "Clients in this group"
+					: `${count} client${count === 1 ? "" : "s"} in this group`}
+			</Link>
+		</p>
+	);
+}
+
+function GroupDetailReadOnly({ group }: { group: Group }) {
+	return (
+		<div>
+			<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
+			<section {...stylex.props(config.panel)}>
+				<DefinitionList
+					items={[
+						{ label: "Name", zonKey: "groups[].name", value: group.name },
+						{ label: "Safe search", zonKey: "groups[].safe_search", value: String(group.safe_search) },
+					]}
+				/>
+			</section>
+			<GroupSourcesReadOnly group={group} />
+			<GroupRules group={group} editable={false} />
+			<ClientCountLink group={group} />
+		</div>
+	);
+}
+
+function GroupSourcesReadOnly({ group }: { group: Group }) {
+	const blocklists = useQuery(blocklistsQuery());
+	const assigned = useQuery(groupSourcesQuery(group.id));
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h3 {...stylex.props(config.panelHeading)}>
+				Assigned sources
+				<code {...stylex.props(shared.mono, config.panelKey)}>group_sources</code>
+			</h3>
+			<QueryPanel query={assigned}>
+				{(sourceIds) => (
+					<QueryPanel query={blocklists}>
+						{(catalogue) => <AssignedSources sourceIds={sourceIds} catalogue={catalogue} />}
+					</QueryPanel>
+				)}
+			</QueryPanel>
+		</section>
+	);
+}
+
+function AssignedSources({ sourceIds, catalogue }: { sourceIds: number[]; catalogue: Blocklist[] }) {
+	const assigned = catalogue.filter((source) => sourceIds.includes(source.id));
+	if (assigned.length === 0) return <p {...stylex.props(config.empty)}>This group is assigned no sources.</p>;
+	return (
+		<div {...stylex.props(shared.tableWrap)}>
+			<table {...stylex.props(config.table)}>
+				<thead>
+					<tr>
+						<th {...stylex.props(shared.th)}>Source</th>
+						<th {...stylex.props(shared.th)}>URL</th>
+					</tr>
+				</thead>
+				<tbody>
+					{assigned.map((source) => (
+						<tr key={source.id}>
+							<td {...stylex.props(shared.td)}>{source.name}</td>
+							<td {...stylex.props(shared.td, shared.mono)}>{source.url}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function GroupDetailEditable({ group }: { group: Group }) {
+	const queryClient = useQueryClient();
+	const blocklists = useQuery(blocklistsQuery());
+	const update = useMutation(groupUpdateMutation(queryClient));
+	const remove = useMutation(groupDeleteMutation(queryClient));
+	const [renaming, setRenaming] = useState(false);
+	const [name, setName] = useState(group.name);
+	const [confirming, setConfirming] = useState(false);
+	const isDefault = group.id === DEFAULT_GROUP_ID;
+
+	return (
+		<div>
+			{renaming ? (
+				<form
+					{...stylex.props(styles.controlRow)}
+					onSubmit={(event: FormEvent) => {
+						event.preventDefault();
+						const trimmed = name.trim();
+						if (trimmed === "") return;
+						update.mutate(
+							{ id: group.id, input: { name: trimmed, safe_search: group.safe_search } },
+							{ onSuccess: () => setRenaming(false) },
+						);
+					}}
+				>
+					<input
+						type="text"
+						aria-label={`New name for ${group.name}`}
+						value={name}
+						onChange={(event) => setName(event.target.value)}
+						{...stylex.props(shared.smallInput, shared.focusRing)}
+						autoFocus
+					/>
+					<button
+						type="submit"
+						disabled={update.isPending}
+						{...stylex.props(shared.smallButton, shared.focusRing)}
+					>
+						Save
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							setName(group.name);
+							setRenaming(false);
+						}}
+						{...stylex.props(shared.smallButton, shared.focusRing)}
+					>
+						Cancel
+					</button>
+				</form>
+			) : (
+				<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
+			)}
+
+			<div {...stylex.props(styles.controlRow)}>
+				<label {...stylex.props(styles.checkboxLabel)}>
+					<input
+						type="checkbox"
+						checked={group.safe_search}
+						disabled={update.isPending}
+						{...stylex.props(shared.focusRing)}
+						onChange={(event) =>
+							update.mutate({
+								id: group.id,
+								input: { name: group.name, safe_search: event.target.checked },
+							})
+						}
+					/>
+					Safe search
+				</label>
+				<span {...stylex.props(styles.spacer)}>
+					{!renaming && (
+						<button
+							type="button"
+							disabled={isDefault}
+							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+							onClick={() => {
+								setName(group.name);
+								setRenaming(true);
+							}}
+							{...stylex.props(shared.smallButton, shared.focusRing)}
+						>
+							Rename group
+						</button>
+					)}{" "}
+					<button
+						type="button"
+						disabled={isDefault || remove.isPending}
+						title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+						onClick={() => setConfirming(true)}
+						{...stylex.props(shared.smallButton, styles.destructive, shared.focusRing)}
+					>
+						Delete group
+					</button>
+				</span>
+			</div>
+			{isDefault && <p {...stylex.props(config.note)}>{DEFAULT_GROUP_NOTE}</p>}
+			<InlineError error={update.error ?? remove.error} />
+
+			<section {...stylex.props(config.panel)}>
+				<h3 {...stylex.props(config.panelHeading)}>Assigned sources</h3>
+				<QueryPanel query={blocklists}>
+					{(catalogue) => <GroupSourcesEditor groupId={group.id} blocklists={catalogue} />}
+				</QueryPanel>
+			</section>
+
+			<GroupRules group={group} editable />
+			<ClientCountLink group={group} />
+
+			<ConfirmDialog
+				isOpen={confirming}
+				title="Delete group"
+				message={`Delete group "${group.name}"? Its clients fall back to the default group.`}
+				confirmLabel="Delete"
+				onConfirm={() => {
+					setConfirming(false);
+					remove.mutate(group.id);
+				}}
+				onCancel={() => setConfirming(false)}
+			/>
+		</div>
+	);
+}
+
+/**
+ * The rules that apply to the selected group, and nothing else. Rules are
+ * always scoped to a group, so the group-centred page is the only place they
+ * need to be read: a flat list of every rule in the household was a list of
+ * facts about no particular policy.
+ */
+function GroupRules({ group, editable }: { group: Group; editable: boolean }) {
+	const rules = useQuery(rulesQuery());
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h3 {...stylex.props(config.panelHeading)}>
+				Rules
+				{!editable && <code {...stylex.props(shared.mono, config.panelKey)}>rules</code>}
+			</h3>
+			<QueryPanel query={rules}>
+				{(all) => {
+					const scoped = all.filter((rule) => rule.group_id === group.id);
+					return (
+						<>
+							{scoped.length === 0 ? (
+								<p {...stylex.props(config.empty)}>No allow or block rules for this group.</p>
+							) : (
+								<RulesTable rules={scoped} editable={editable} />
+							)}
+							{editable && <CreateRuleForm group={group} />}
+						</>
+					);
+				}}
+			</QueryPanel>
+		</section>
+	);
+}
+
+function RulesTable({ rules, editable }: { rules: Rule[]; editable: boolean }) {
+	const queryClient = useQueryClient();
+	const remove = useMutation(ruleDeleteMutation(queryClient));
+	const [pendingDelete, setPendingDelete] = useState<Rule | null>(null);
+
+	return (
+		<>
+			<div {...stylex.props(shared.tableWrap)}>
+				<table {...stylex.props(config.table)}>
+					<thead>
+						<tr>
+							<th {...stylex.props(shared.th)}>Pattern</th>
+							<th {...stylex.props(shared.th)}>Kind</th>
+							<th {...stylex.props(shared.th)}>Action</th>
+							<th {...stylex.props(shared.th)}>Created</th>
+							{editable && (
+								<th {...stylex.props(shared.th)}>
+									<span {...stylex.props(shared.srOnly)}>Actions</span>
+								</th>
+							)}
+						</tr>
+					</thead>
+					<tbody>
+						{rules.map((rule) => (
+							<tr key={rule.id}>
+								<td {...stylex.props(shared.td, styles.pattern)}>{rule.pattern}</td>
+								<td {...stylex.props(shared.td)}>{rule.kind}</td>
+								<td {...stylex.props(shared.td)}>
+									<span {...stylex.props(rule.action === "allow" ? styles.allow : styles.block)}>
+										{rule.action}
+									</span>
+								</td>
+								<td {...stylex.props(shared.td)}>{formatTime(rule.created_at)}</td>
+								{editable && (
+									<td {...stylex.props(shared.td)}>
+										<button
+											type="button"
+											onClick={() => setPendingDelete(rule)}
+											disabled={remove.isPending}
+											{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
+										>
+											Delete
+										</button>
+									</td>
+								)}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+			<InlineError error={remove.error} />
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete rule"
+				message={
+					pendingDelete === null
+						? ""
+						: `Delete the ${pendingDelete.action} rule for "${pendingDelete.pattern}"?`
+				}
+				confirmLabel="Delete"
+				onConfirm={() => {
+					if (pendingDelete !== null) remove.mutate(pendingDelete.id);
+					setPendingDelete(null);
+				}}
+				onCancel={() => setPendingDelete(null)}
+			/>
+		</>
+	);
+}
+
+function CreateRuleForm({ group }: { group: Group }) {
+	const queryClient = useQueryClient();
+	const create = useMutation(ruleCreateMutation(queryClient));
+	const [pattern, setPattern] = useState("");
+	const [kind, setKind] = useState<RuleKind>("exact");
+	const [action, setAction] = useState<RuleAction>("block");
+
+	function onSubmit(event: FormEvent) {
+		event.preventDefault();
+		// A regex pattern is stored and matched byte for byte, so the UI must not
+		// edit it: trimming here would make a UI-created rule differ from the same
+		// bytes posted to /api/rules. Name-shaped kinds are normalized server-side,
+		// so trimming them only spares a pasted space a 400.
+		const sent = kind === "regex" ? pattern : pattern.trim();
+		create.mutate({ group_id: group.id, pattern: sent, kind, action }, { onSuccess: () => setPattern("") });
+	}
+
+	return (
+		<form onSubmit={onSubmit} {...stylex.props(styles.ruleForm)}>
+			<h4 {...stylex.props(styles.fieldLabel)}>Create rule in {group.name}</h4>
+			<div>
+				<label htmlFor="rule-pattern" {...stylex.props(styles.fieldLabel)}>
+					Pattern
+				</label>
+				<input
+					id="rule-pattern"
+					type="text"
+					required
+					value={pattern}
+					onChange={(event) => setPattern(event.target.value)}
+					placeholder="ads.example.com, *.example.com or ^ad[0-9]+-"
+					// A phone keyboard capitalizing the first letter is silent for
+					// exact and wildcard (normalized server-side) but fatal for a
+					// regex, which matches the lowercase query name byte for byte.
+					autoCapitalize="none"
+					autoCorrect="off"
+					spellCheck={false}
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div {...stylex.props(styles.fieldGrid)}>
+				<Select
+					label="Kind"
+					value={kind}
+					onChange={(value) => setKind(value as RuleKind)}
+					options={KIND_OPTIONS}
+				/>
+				<Select
+					label="Action"
+					value={action}
+					onChange={(value) => setAction(value as RuleAction)}
+					options={ACTION_OPTIONS}
+				/>
+			</div>
+			<div>
+				<button
+					type="submit"
+					disabled={create.isPending}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					{create.isPending ? "Creating…" : "Create rule"}
+				</button>
+			</div>
+			<InlineError error={create.error} />
+		</form>
+	);
+}

admin/src/features/configuration/ProtectionPage.test.tsx

@@ -0,0 +1,295 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { DATABASE, renderPage, stubApi, type Call } from "./testFixtures";
+
+/**
+ * Protection in database mode: the group-centred master/detail, the rules
+ * scoped to the selected group, and the shared source catalogue with its one
+ * runtime action.
+ */
+
+let calls: Call[];
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+async function openProtection(group?: number) {
+	calls = stubApi(DATABASE);
+	const suffix = group === undefined ? "" : `?group=${group}`;
+	return renderPage(`/configuration/protection${suffix}`, "Protection");
+}
+
+function writes(method: string): Call[] {
+	return calls.filter((call) => call.method === method);
+}
+
+test("the group list is the master, and the selected group is the detail", async () => {
+	await openProtection();
+
+	const list = within(screen.getByRole("navigation", { name: "Groups" }));
+	expect(list.getByRole("link", { name: "default" })).toBeTruthy();
+	expect(list.getByRole("link", { name: "kids" })).toBeTruthy();
+	await screen.findByRole("heading", { name: "default", level: 2 });
+});
+
+test("the default group cannot be renamed or deleted, and says why", async () => {
+	await openProtection(1);
+	await screen.findByRole("heading", { name: "default", level: 2 });
+
+	expect((screen.getByRole("button", { name: "Rename group" }) as HTMLButtonElement).disabled).toBe(true);
+	expect((screen.getByRole("button", { name: "Delete group" }) as HTMLButtonElement).disabled).toBe(true);
+	expect(screen.getByText("The default group cannot be renamed or deleted.")).toBeTruthy();
+});
+
+test("another group can be renamed and deleted, and carries its safe-search state", async () => {
+	await openProtection(2);
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	expect((screen.getByRole("button", { name: "Rename group" }) as HTMLButtonElement).disabled).toBe(false);
+	expect((screen.getByRole("checkbox", { name: "Safe search" }) as HTMLInputElement).checked).toBe(true);
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete group" }));
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete group "kids"?');
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes("DELETE")).toEqual([]);
+});
+
+test("toggling safe search resends the whole group row", async () => {
+	await openProtection(2);
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	fireEvent.click(screen.getByRole("checkbox", { name: "Safe search" }));
+
+	await waitFor(() => expect(writes("PUT")).toHaveLength(1));
+	expect(writes("PUT")[0]).toMatchObject({
+		url: "/api/groups/2",
+		body: { name: "kids", safe_search: false },
+	});
+});
+
+test("the source assignment saves the full set via PUT", async () => {
+	await openProtection(2);
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	const ads = (await screen.findByRole("checkbox", { name: "Ads" })) as HTMLInputElement;
+	expect(ads.checked).toBe(false);
+	const save = screen.getByRole("button", { name: "Save sources" }) as HTMLButtonElement;
+	expect(save.disabled).toBe(true);
+
+	fireEvent.click(ads);
+	expect(save.disabled).toBe(false);
+	fireEvent.click(save);
+
+	await waitFor(() => expect(writes("PUT")).toHaveLength(1));
+	expect(writes("PUT")[0]).toMatchObject({
+		url: "/api/groups/2/sources",
+		body: { source_ids: [1] },
+	});
+});
+
+test("only the selected group's rules are listed", async () => {
+	await openProtection(2);
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	expect(await screen.findByText("*.social.example")).toBeTruthy();
+	expect(screen.queryByText("ads.example.com")).toBeNull();
+});
+
+test("a new rule is created in the selected group, with the pattern posted verbatim for a regex", async () => {
+	await openProtection(2);
+	await screen.findByRole("heading", { name: "Create rule in kids", level: 4 });
+
+	// An exact pattern is trimmed; a regex is stored and matched byte for byte.
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "  ads.example.net  " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(writes("POST")).toHaveLength(1));
+	expect(writes("POST")[0]?.body).toEqual({
+		group_id: 2,
+		pattern: "ads.example.net",
+		kind: "exact",
+		action: "block",
+	});
+});
+
+test("a rate-limited rule create shows the countdown from Retry-After", async () => {
+	calls = stubApi(DATABASE, {
+		onWrite: (call) =>
+			call.url === "/api/rules"
+				? new Response(JSON.stringify({ error: "rate limited" }), {
+						status: 429,
+						headers: { "content-type": "application/json", "Retry-After": "12" },
+					})
+				: null,
+	});
+	await renderPage("/configuration/protection?group=2", "Protection");
+	await screen.findByRole("heading", { name: "Create rule in kids", level: 4 });
+
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "ads.example.net" } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+
+	expect((await screen.findByRole("alert")).textContent).toBe("Rate limited. Try again in 12s.");
+});
+
+test("cancelling the rule delete confirmation leaves the rule alone", async () => {
+	await openProtection(2);
+	await screen.findByText("*.social.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	const dialog = await screen.findByRole("alertdialog");
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes("DELETE")).toEqual([]);
+	expect(screen.getByText("*.social.example")).toBeTruthy();
+});
+
+test("the pattern field opts out of mobile autocapitalize and autocorrect", async () => {
+	await openProtection(2);
+	const pattern = await screen.findByLabelText("Pattern");
+
+	expect(pattern.getAttribute("autocapitalize")).toBe("none");
+	expect(pattern.getAttribute("autocorrect")).toBe("off");
+	expect(pattern.getAttribute("spellcheck")).toBe("false");
+});
+
+test("the kind selector offers the three contract kinds and can pick regex", async () => {
+	await openProtection(2);
+	await screen.findByLabelText("Pattern");
+
+	fireEvent.click(screen.getByRole("button", { name: /Kind$/ }));
+	const options = await screen.findAllByRole("option");
+	expect(options.map((option) => option.textContent)).toEqual(["exact", "wildcard", "regex"]);
+
+	fireEvent.click(screen.getByRole("option", { name: "regex" }));
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: " ^ad[0-9]+- " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(writes("POST")).toHaveLength(1));
+	expect(writes("POST")[0]?.body).toMatchObject({ pattern: " ^ad[0-9]+- ", kind: "regex" });
+});
+
+test("deleting a rule asks first, then issues the DELETE", async () => {
+	await openProtection(2);
+	await screen.findByText("*.social.example");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete the block rule for "*.social.example"?');
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+	await waitFor(() => expect(writes("DELETE")).toHaveLength(1));
+	expect(writes("DELETE")[0]?.url).toBe("/api/rules/2");
+});
+
+test("the client count links into Clients filtered by the group (D3)", async () => {
+	await openProtection(2);
+
+	const link = await screen.findByRole("link", { name: "1 client in this group" });
+	expect(link.getAttribute("href")).toBe("/clients?group=2");
+});
+
+test("a group can be created from the master column", async () => {
+	await openProtection();
+	fireEvent.change(await screen.findByLabelText("New group"), { target: { value: " guests " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create" }));
+
+	await waitFor(() => expect(writes("POST")).toHaveLength(1));
+	expect(writes("POST")[0]).toMatchObject({ url: "/api/groups", body: { name: "guests" } });
+});
+
+test("the Sources tab lists the catalogue with both skipped columns and their note", async () => {
+	calls = stubApi(DATABASE);
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+
+	expect(await screen.findByText("Ads")).toBeTruthy();
+	expect(screen.getByText("Trackers")).toBeTruthy();
+	expect(screen.getByText("Suggested")).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped regex" })).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped unsupported" })).toBeTruthy();
+	expect(
+		screen.getByText(/Skipped unsupported lines are syntax nxdns cannot translate into a DNS decision/),
+	).toBeTruthy();
+	expect((screen.getByLabelText("Ads enabled") as HTMLInputElement).checked).toBe(true);
+	expect((screen.getByLabelText("Trackers enabled") as HTMLInputElement).checked).toBe(false);
+	expect(screen.getByRole("heading", { name: "Add source" })).toBeTruthy();
+});
+
+test("Update now says it started, and says nothing once it succeeds", async () => {
+	let release: ((response: Response) => void) | null = null;
+	calls = stubApi(DATABASE, {
+		onWrite: (call) =>
+			// Held open so the started state is observable, not a frame that resolves
+			// before the assertion.
+			call.url === "/api/blocklists/update"
+				? new Promise<Response>((resolve) => {
+						release = resolve;
+					})
+				: null,
+	});
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+
+	fireEvent.click(await screen.findByRole("button", { name: "Update now" }));
+	const pending = (await screen.findByRole("button", { name: "Updating…" })) as HTMLButtonElement;
+	expect(pending.disabled).toBe(true);
+	expect(screen.getByRole("status").textContent).toBe("Update started…");
+
+	release!(
+		new Response(JSON.stringify({ sources: [] }), {
+			status: 202,
+			headers: { "content-type": "application/json" },
+		}),
+	);
+	await waitFor(() => expect(screen.getByRole("button", { name: "Update now" })).toBeTruthy());
+	// Success leaves no standing claim behind: the refreshed counters are the
+	// signal, and a "counters refreshed" line would outlive a failed refetch.
+	expect(screen.queryByRole("status")).toBeNull();
+});
+
+test("a rate-limited Update now shows the countdown from Retry-After", async () => {
+	calls = stubApi(DATABASE, {
+		onWrite: (call) =>
+			call.url === "/api/blocklists/update"
+				? new Response(JSON.stringify({ error: "rate limited" }), {
+						status: 429,
+						headers: { "content-type": "application/json", "Retry-After": "7" },
+					})
+				: null,
+	});
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+
+	fireEvent.click(await screen.findByRole("button", { name: "Update now" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("Rate limited. Try again in 7s.");
+});
+
+test("deleting a source asks first, then issues the DELETE for that source", async () => {
+	calls = stubApi(DATABASE);
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+	await screen.findByText("Ads");
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[1]!);
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete blocklist "Trackers"? Its domains stop being blocked.');
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+	await waitFor(() => expect(writes("DELETE")).toHaveLength(1));
+	expect(writes("DELETE")[0]?.url).toBe("/api/blocklists/2");
+});
+
+test("cancelling the source delete confirmation leaves the source alone", async () => {
+	calls = stubApi(DATABASE);
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+	await screen.findByText("Ads");
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[1]!);
+	const dialog = await screen.findByRole("alertdialog");
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes("DELETE")).toEqual([]);
+	expect(screen.getByText("Trackers")).toBeTruthy();
+});

admin/src/features/configuration/ProtectionPage.tsx

@@ -0,0 +1,38 @@
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import Tabs from "@/ui/Tabs";
+import ProtectionGroups from "./ProtectionGroups";
+import ProtectionSources from "./ProtectionSources";
+import { styles } from "./styles";
+import type { ProtectionTab } from "./search";
+
+/**
+ * Protection: what policy governs each group, and which rules and lists
+ * produce it. Group-centred, because a rule or a source only means something
+ * once you know whose queries it applies to.
+ */
+export default function ProtectionPage() {
+	const search = useSearch({ from: "/shell/configuration/protection" });
+	const tab = search.tab ?? "groups";
+	const navigate = useNavigate({ from: "/configuration/protection" });
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Protection</h1>
+			<p {...stylex.props(styles.intro)}>What each group of clients is allowed to resolve, and why.</p>
+			<Tabs
+				label="Protection"
+				selectedKey={tab}
+				// The group rides along, so switching tabs and coming back returns to
+				// the group the reader was looking at rather than the first one.
+				onSelectionChange={(key) =>
+					void navigate({ search: { tab: key as ProtectionTab, group: search.group } })
+				}
+				tabs={[
+					{ id: "groups", label: "Groups", content: <ProtectionGroups /> },
+					{ id: "sources", label: "Sources", content: <ProtectionSources /> },
+				]}
+			/>
+		</section>
+	);
+}

admin/src/features/configuration/ProtectionSources.tsx

@@ -0,0 +1,326 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { formatTime } from "@/lib/format";
+import InlineError from "@/lib/InlineError";
+import {
+	blocklistCreateMutation,
+	blocklistDeleteMutation,
+	blocklistUpdateMutation,
+	blocklistsQuery,
+	blocklistsUpdateNowMutation,
+} from "@/lib/queries";
+import type { Blocklist, BlocklistInput } from "@/lib/types";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import AuthorityGate from "./AuthorityGate";
+import BlocklistForm from "./BlocklistForm";
+import FileModeNote from "./FileModeNote";
+import QueryPanel from "./QueryPanel";
+import { styles as config } from "./styles";
+
+const SKIPPED_NOTE =
+	"Both “Skipped” columns count lines nxdns read and did not take. Skipped regex lines are patterns nxdns accepts " +
+	"only from you — adopt one you trust as a regex rule. Skipped unsupported lines are syntax nxdns cannot translate " +
+	"into a DNS decision: cosmetic element hiding, browser-only modifiers. A skipped unsupported count that dwarfs the " +
+	"domain count usually means the list is written for a browser extension, and its DNS or hosts variant will block " +
+	"more here.";
+
+const styles = stylex.create({
+	name: {
+		fontWeight: 500,
+	},
+	badge: {
+		marginLeft: "0.5rem",
+		borderRadius: "0.25rem",
+		backgroundColor: colors.border,
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.text,
+	},
+	url: {
+		display: "block",
+		maxWidth: "18rem",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	actions: {
+		display: "flex",
+		gap: "0.75rem",
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+});
+
+/**
+ * A runtime action: it re-downloads the sources the running process already
+ * knows about, so it stays enabled under file authority and while
+ * `/api/config/status` is still answering.
+ *
+ * The feedback is the action's own, and it is transient: started while the
+ * request is in flight, the failure verbatim if it fails, and nothing on
+ * success — the refreshed counters are the success signal, and a standing
+ * "counters refreshed" line would claim a refetch that may itself have failed.
+ * Durable per-source outcomes live in Diagnostics.
+ */
+function UpdateNowAction() {
+	const queryClient = useQueryClient();
+	const updateNow = useMutation(blocklistsUpdateNowMutation(queryClient));
+	return (
+		<div {...stylex.props(config.actionRow)}>
+			<button
+				type="button"
+				onClick={() => updateNow.mutate()}
+				disabled={updateNow.isPending}
+				{...stylex.props(shared.primaryButton, shared.focusRing)}
+			>
+				{updateNow.isPending ? "Updating…" : "Update now"}
+			</button>
+			{updateNow.isPending && (
+				<p role="status" {...stylex.props(config.note)}>
+					Update started…
+				</p>
+			)}
+			<InlineError error={updateNow.error} />
+		</div>
+	);
+}
+
+export default function ProtectionSources() {
+	const blocklists = useQuery(blocklistsQuery());
+	return (
+		<div>
+			<p {...stylex.props(config.intro)}>
+				The shared catalogue every group draws from. A group subscribes to sources on the Groups tab.
+			</p>
+			<UpdateNowAction />
+			<AuthorityGate>
+				{(status) =>
+					status.authority === "managed_file" ? (
+						<>
+							<FileModeNote path={status.path} />
+							<QueryPanel query={blocklists}>
+								{(rows) => <SourcesReadOnly blocklists={rows} />}
+							</QueryPanel>
+						</>
+					) : (
+						<QueryPanel query={blocklists}>{(rows) => <SourcesEditor blocklists={rows} />}</QueryPanel>
+					)
+				}
+			</AuthorityGate>
+		</div>
+	);
+}
+
+/**
+ * File mode is a different rendering of the same facts, not a smaller set of
+ * them: the Suggested provenance and both skipped-line counters belong here
+ * too. A list whose lines nxdns could not take is a failure the reader must
+ * see under either authority.
+ */
+function SourcesReadOnly({ blocklists }: { blocklists: Blocklist[] }) {
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h2 {...stylex.props(config.panelHeading)}>
+				Blocklist sources
+				<code {...stylex.props(shared.mono, config.panelKey)}>blocklist_sources</code>
+			</h2>
+			{blocklists.length === 0 ? (
+				<p {...stylex.props(config.empty)}>The file declares no blocklist sources.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>Name</th>
+								<th {...stylex.props(shared.th)}>URL</th>
+								<th {...stylex.props(shared.th)}>Enabled</th>
+								<th {...stylex.props(shared.th)}>Domains</th>
+								<th {...stylex.props(shared.th)}>Wildcards</th>
+								<th {...stylex.props(shared.th)}>Exceptions</th>
+								<th {...stylex.props(shared.th)}>Skipped regex</th>
+								<th {...stylex.props(shared.th)}>Skipped unsupported</th>
+								<th {...stylex.props(shared.th)}>Last updated</th>
+							</tr>
+						</thead>
+						<tbody>
+							{blocklists.map((b) => (
+								<tr key={b.id}>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(styles.name)}>{b.name}</span>
+										{b.is_suggested && <span {...stylex.props(styles.badge)}>Suggested</span>}
+									</td>
+									<td {...stylex.props(shared.td, shared.mono)}>{b.url}</td>
+									<td {...stylex.props(shared.td)}>{String(b.enabled)}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.domain_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{b.skipped_unsupported_count}
+									</td>
+									<td {...stylex.props(shared.td)}>
+										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+					<p {...stylex.props(config.note)}>{SKIPPED_NOTE}</p>
+				</div>
+			)}
+		</section>
+	);
+}
+
+function SourcesEditor({ blocklists }: { blocklists: Blocklist[] }) {
+	const queryClient = useQueryClient();
+	const [editing, setEditing] = useState<Blocklist | null>(null);
+	const [pendingDelete, setPendingDelete] = useState<Blocklist | null>(null);
+
+	const create = useMutation(blocklistCreateMutation(queryClient));
+	const save = useMutation(blocklistUpdateMutation(queryClient));
+	const toggle = useMutation(blocklistUpdateMutation(queryClient));
+	const remove = useMutation(blocklistDeleteMutation(queryClient));
+
+	async function submitForm(input: BlocklistInput) {
+		if (editing === null) {
+			await create.mutateAsync(input);
+		} else {
+			await save.mutateAsync({ id: editing.id, input: { ...input, is_suggested: editing.is_suggested } });
+			setEditing(null);
+		}
+	}
+
+	function toggleEnabled(b: Blocklist) {
+		toggle.mutate({
+			id: b.id,
+			input: { url: b.url, name: b.name, enabled: !b.enabled, is_suggested: b.is_suggested },
+		});
+	}
+
+	function confirmDelete() {
+		if (pendingDelete === null) return;
+		remove.mutate(pendingDelete.id);
+		setPendingDelete(null);
+	}
+
+	const formError = editing === null ? create.error : save.error;
+	const tableError = remove.error ?? toggle.error;
+
+	return (
+		<div>
+			{blocklists.length === 0 ? (
+				<p {...stylex.props(config.empty)}>No blocklist sources yet. Add one below.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>Name</th>
+								<th {...stylex.props(shared.th)}>URL</th>
+								<th {...stylex.props(shared.th)}>Enabled</th>
+								<th {...stylex.props(shared.th)}>Domains</th>
+								<th {...stylex.props(shared.th)}>Wildcards</th>
+								<th {...stylex.props(shared.th)}>Exceptions</th>
+								<th {...stylex.props(shared.th)}>Skipped regex</th>
+								<th {...stylex.props(shared.th)}>Skipped unsupported</th>
+								<th {...stylex.props(shared.th)}>Last updated</th>
+								<th {...stylex.props(shared.th)}>
+									<span {...stylex.props(shared.srOnly)}>Actions</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{blocklists.map((b) => (
+								<tr key={b.id}>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(styles.name)}>{b.name}</span>
+										{b.is_suggested && <span {...stylex.props(styles.badge)}>Suggested</span>}
+									</td>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(styles.url)} title={b.url}>
+											{b.url}
+										</span>
+									</td>
+									<td {...stylex.props(shared.td)}>
+										<input
+											type="checkbox"
+											aria-label={`${b.name} enabled`}
+											checked={b.enabled}
+											disabled={toggle.isPending}
+											onChange={() => toggleEnabled(b)}
+											{...stylex.props(shared.focusRing)}
+										/>
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.domain_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{b.skipped_unsupported_count}
+									</td>
+									<td {...stylex.props(shared.td)}>
+										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
+									</td>
+									<td {...stylex.props(shared.td)}>
+										<div {...stylex.props(styles.actions)}>
+											<button
+												type="button"
+												onClick={() => setEditing(b)}
+												{...stylex.props(shared.linkButton, shared.focusRing)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => setPendingDelete(b)}
+												disabled={remove.isPending}
+												{...stylex.props(
+													shared.dangerLinkButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Delete
+											</button>
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+					<p {...stylex.props(config.note)}>{SKIPPED_NOTE}</p>
+				</div>
+			)}
+			<InlineError error={tableError} />
+
+			<BlocklistForm
+				key={editing?.id ?? "add"}
+				initial={editing ?? undefined}
+				busy={editing === null ? create.isPending : save.isPending}
+				error={formError}
+				onSubmit={submitForm}
+				onCancel={editing === null ? undefined : () => setEditing(null)}
+			/>
+
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete blocklist"
+				message={
+					pendingDelete === null
+						? ""
+						: `Delete blocklist "${pendingDelete.name}"? Its domains stop being blocked.`
+				}
+				confirmLabel="Delete"
+				onConfirm={confirmDelete}
+				onCancel={() => setPendingDelete(null)}
+			/>
+		</div>
+	);
+}

admin/src/features/configuration/QueryPanel.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { UseQueryResult } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { styles as shared } from "@/ui/styles";
+import { styles } from "./styles";
+
+/**
+ * One panel's data, with the loading and error surfaces the fire-and-forget
+ * route loaders leave to the page. A configuration page holds several
+ * independent collections; each states its own condition instead of the whole
+ * page waiting on the slowest request.
+ */
+export default function QueryPanel<T>({
+	query,
+	children,
+}: {
+	query: UseQueryResult<T, Error>;
+	children: (data: T) => ReactNode;
+}) {
+	if (query.isPending) {
+		return (
+			<p role="status" {...stylex.props(styles.pending, shared.pulse)}>
+				Loading…
+			</p>
+		);
+	}
+	if (query.isError) return <InlineError error={query.error} onRetry={() => void query.refetch()} />;
+	return <>{children(query.data)}</>;
+}

admin/src/features/configuration/RecordsTab.tsx

@@ -0,0 +1,318 @@
+import { useId, useState, type FormEvent } from "react";
+import { useQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import {
+	localRecordCreateMutation,
+	localRecordDeleteMutation,
+	localRecordUpdateMutation,
+	localRecordsQuery,
+} from "@/lib/queries";
+import type { LocalRecord, LocalRecordInput, LocalRecordType } from "@/lib/types";
+import InlineError from "@/lib/InlineError";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import Select from "@/ui/Select";
+import { useCrudForm } from "@/ui/useCrudForm";
+import QueryPanel from "./QueryPanel";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const RTYPES: readonly LocalRecordType[] = ["A", "AAAA", "CNAME"];
+const RTYPE_OPTIONS = RTYPES.map((rtype) => ({ value: rtype, label: rtype }));
+
+const styles = stylex.create({
+	formHeading: {
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	buttonRow: {
+		display: "flex",
+		gap: "0.5rem",
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginTop: "1rem",
+	},
+	intro: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	table: {
+		width: "100%",
+		textAlign: "left",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	headRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		color: colors.textMuted,
+	},
+	headCell: {
+		paddingBlock: "0.5rem",
+		paddingRight: "1rem",
+		fontWeight: 500,
+	},
+	headCellLast: {
+		paddingBlock: "0.5rem",
+	},
+	bodyRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+	},
+	cell: {
+		paddingBlock: "0.5rem",
+		paddingRight: "1rem",
+	},
+	emptyCell: {
+		paddingBlock: "1rem",
+		color: colors.textMuted,
+	},
+	actionCell: {
+		paddingBlock: "0.5rem",
+		textAlign: "right",
+		whiteSpace: "nowrap",
+	},
+	dangerText: {
+		color: colors.danger,
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+});
+
+function RecordForm({
+	initial,
+	busy,
+	error,
+	onSubmit,
+	onCancel,
+}: {
+	initial?: LocalRecord;
+	busy: boolean;
+	error: unknown;
+	onSubmit: (input: LocalRecordInput) => void;
+	onCancel: () => void;
+}) {
+	const id = useId();
+	const [name, setName] = useState(initial?.name ?? "");
+	const [rtype, setRtype] = useState<LocalRecordType>(initial?.rtype ?? "A");
+	const [value, setValue] = useState(initial?.value ?? "");
+	const [ttl, setTtl] = useState(initial === undefined ? "" : String(initial.ttl));
+
+	function submit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		const input: LocalRecordInput = { name: name.trim(), rtype, value: value.trim() };
+		if (ttl.trim() !== "") input.ttl = Number(ttl);
+		onSubmit(input);
+	}
+
+	return (
+		<form onSubmit={submit} {...stylex.props(shared.formCard)}>
+			<h3 {...stylex.props(styles.formHeading)}>
+				{initial === undefined ? "New record" : `Edit ${initial.name}`}
+			</h3>
+			<div>
+				<label htmlFor={`${id}-name`} {...stylex.props(styles.fieldLabel)}>
+					Name
+				</label>
+				<input
+					id={`${id}-name`}
+					required
+					value={name}
+					onChange={(event) => setName(event.target.value)}
+					placeholder="nas.lan.home"
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div>
+				<Select
+					label="Type"
+					value={rtype}
+					onChange={(next) => setRtype(next as LocalRecordType)}
+					options={RTYPE_OPTIONS}
+				/>
+			</div>
+			<div>
+				<label htmlFor={`${id}-value`} {...stylex.props(styles.fieldLabel)}>
+					Value
+				</label>
+				<input
+					id={`${id}-value`}
+					required
+					value={value}
+					onChange={(event) => setValue(event.target.value)}
+					placeholder={
+						rtype === "CNAME" ? "target.example.com" : rtype === "AAAA" ? "fd00::10" : "192.168.1.10"
+					}
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div>
+				<label htmlFor={`${id}-ttl`} {...stylex.props(styles.fieldLabel)}>
+					TTL (seconds)
+				</label>
+				<input
+					id={`${id}-ttl`}
+					type="number"
+					min={0}
+					value={ttl}
+					onChange={(event) => setTtl(event.target.value)}
+					placeholder="300"
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div {...stylex.props(styles.buttonRow)}>
+				<button type="submit" disabled={busy} {...stylex.props(shared.largePrimaryButton, shared.focusRing)}>
+					{busy ? "Saving…" : "Save"}
+				</button>
+				<button type="button" onClick={onCancel} {...stylex.props(shared.largeButton, shared.focusRing)}>
+					Cancel
+				</button>
+			</div>
+			<InlineError error={error} />
+		</form>
+	);
+}
+
+export default function RecordsTab() {
+	const query = useQuery(localRecordsQuery());
+	const {
+		create,
+		update,
+		remove,
+		form,
+		openForm,
+		closeForm,
+		onSubmit,
+		onDelete,
+		pendingDelete,
+		confirmPendingDelete,
+		cancelPendingDelete,
+	} = useCrudForm<LocalRecord, LocalRecordInput>({
+		create: localRecordCreateMutation,
+		update: localRecordUpdateMutation,
+		remove: localRecordDeleteMutation,
+		confirmDelete: (record) => `Delete record "${record.name}"?`,
+	});
+
+	return (
+		<div>
+			<div {...stylex.props(styles.toolbar)}>
+				<p {...stylex.props(styles.intro)}>Answers served directly for LAN names. Changes apply live.</p>
+				<button
+					type="button"
+					onClick={() => openForm({ mode: "create" })}
+					{...stylex.props(shared.largePrimaryButton, shared.focusRing)}
+				>
+					Add record
+				</button>
+			</div>
+			<InlineError error={remove.error} />
+			{form?.mode === "create" && (
+				<RecordForm busy={create.isPending} error={create.error} onSubmit={onSubmit} onCancel={closeForm} />
+			)}
+			<QueryPanel query={query}>
+				{(records) => (
+					<div {...stylex.props(shared.tableWrap)}>
+						<table {...stylex.props(styles.table)}>
+							<thead>
+								<tr {...stylex.props(styles.headRow)}>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										Name
+									</th>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										Type
+									</th>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										Value
+									</th>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										TTL
+									</th>
+									<th scope="col" {...stylex.props(styles.headCellLast)}>
+										<span {...stylex.props(shared.srOnly)}>Actions</span>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{records.length === 0 && (
+									<tr>
+										<td colSpan={5} {...stylex.props(styles.emptyCell)}>
+											No local records yet.
+										</td>
+									</tr>
+								)}
+								{records.map((record) => (
+									<tr key={record.id} {...stylex.props(styles.bodyRow)}>
+										{form?.mode === "edit" && form.entity.id === record.id ? (
+											<td colSpan={5}>
+												<RecordForm
+													initial={record}
+													busy={update.isPending}
+													error={update.error}
+													onSubmit={onSubmit}
+													onCancel={closeForm}
+												/>
+											</td>
+										) : (
+											<>
+												<td {...stylex.props(styles.cell, shared.mono)}>{record.name}</td>
+												<td {...stylex.props(styles.cell)}>{record.rtype}</td>
+												<td {...stylex.props(styles.cell, shared.mono)}>{record.value}</td>
+												<td {...stylex.props(styles.cell)}>{record.ttl}</td>
+												<td {...stylex.props(styles.actionCell)}>
+													<button
+														type="button"
+														onClick={() => openForm({ mode: "edit", entity: record })}
+														{...stylex.props(
+															shared.rowButton,
+															styles.dimWhenDisabled,
+															shared.focusRing,
+														)}
+													>
+														Edit
+													</button>
+													<button
+														type="button"
+														onClick={() => onDelete(record)}
+														disabled={remove.isPending}
+														{...stylex.props(
+															shared.rowButton,
+															styles.dangerText,
+															styles.dimWhenDisabled,
+															shared.focusRing,
+														)}
+													>
+														Delete
+													</button>
+												</td>
+											</>
+										)}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				)}
+			</QueryPanel>
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete record"
+				message={pendingDelete?.message ?? ""}
+				confirmLabel="Delete"
+				onConfirm={confirmPendingDelete}
+				onCancel={cancelPendingDelete}
+			/>
+		</div>
+	);
+}

admin/src/features/configuration/ReloadCertsAction.tsx

@@ -0,0 +1,47 @@
+import { useMutation } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { reloadCerts } from "@/lib/api";
+import type { CertReloadOutcome, CertsReload } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { styles } from "./styles";
+
+function describe(name: string, outcome: CertReloadOutcome): string {
+	if (!outcome.enabled) return `${name}: not enabled`;
+	if (outcome.reloaded) return `${name}: reloaded`;
+	return `${name}: failed — ${outcome.error ?? "no reason given"}`;
+}
+
+/**
+ * A runtime action, not a configuration write: it re-reads the certificate
+ * files the running listeners already point at, so it stays enabled under
+ * every authority — including a file-managed process, where renewing a
+ * certificate is exactly the job that must not need a restart.
+ *
+ * The endpoint answers 200 even when a reload fails, per endpoint, because a
+ * failed reload leaves the previous certificate serving. So the outcome is
+ * rendered as a result, and only a transport or auth failure is an error.
+ */
+export default function ReloadCertsAction() {
+	const mutation = useMutation<CertsReload>({ mutationFn: reloadCerts });
+	const result = mutation.data;
+
+	return (
+		<div {...stylex.props(styles.actionRow)}>
+			<button
+				type="button"
+				onClick={() => mutation.mutate()}
+				disabled={mutation.isPending}
+				{...stylex.props(shared.button, shared.focusRing)}
+			>
+				{mutation.isPending ? "Reloading certificates…" : "Reload certificates"}
+			</button>
+			{result !== undefined && (
+				<p role="status" {...stylex.props(styles.success)}>
+					{describe("DoH", result.doh)}. {describe("DoT", result.dot)}.
+				</p>
+			)}
+			<InlineError error={mutation.error} />
+		</div>
+	);
+}

admin/src/features/configuration/ResolutionPage.test.tsx

@@ -0,0 +1,259 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { DATABASE, renderPage, stubApi, type Call } from "./testFixtures";
+
+/**
+ * Resolution in database mode: the upstream pool, the local records and the
+ * forward zones, each rehomed from its own page onto a tab of one.
+ */
+
+let calls: Call[];
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function writes(): Call[] {
+	return calls;
+}
+
+async function openResolution(tab?: string, options: Parameters<typeof stubApi>[1] = {}) {
+	calls = stubApi(DATABASE, options);
+	const suffix = tab === undefined ? "" : `?tab=${tab}`;
+	return renderPage(`/configuration/resolution${suffix}`, "Resolution");
+}
+
+/** The row Delete opens the dialog; the dialog's own Delete is the confirm. */
+async function openDeleteDialog(index = 0) {
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[index]!);
+	return await screen.findByRole("alertdialog");
+}
+
+test("the upstream pool is the default tab and lists every field", async () => {
+	await openResolution();
+
+	expect(await screen.findByText("udp://1.1.1.1:53")).toBeTruthy();
+	expect(screen.getByText("tls://9.9.9.9:853")).toBeTruthy();
+	expect(screen.getByText("dns.quad9.net")).toBeTruthy();
+	expect((screen.getByLabelText("udp://1.1.1.1:53 enabled") as HTMLInputElement).checked).toBe(true);
+	expect((screen.getByLabelText("tls://9.9.9.9:853 enabled") as HTMLInputElement).checked).toBe(false);
+	expect(screen.getByRole("heading", { name: "Add upstream" })).toBeTruthy();
+	expect(screen.getByText(/takes effect at the next restart/)).toBeTruthy();
+});
+
+test("adding an upstream posts every field", async () => {
+	await openResolution();
+	await screen.findByRole("heading", { name: "Add upstream" });
+
+	fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://8.8.8.8:53" } });
+	fireEvent.change(screen.getByLabelText("Priority"), { target: { value: "150" } });
+	fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
+
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toEqual({
+		url: "/api/upstreams",
+		method: "POST",
+		body: { url: "udp://8.8.8.8:53", priority: 150, enabled: true, tls_name: "" },
+	});
+});
+
+test("an upstream write re-reads the config status, and the shell states the pending restart", async () => {
+	// The client never decides a restart is owed: the server sets the flag, and
+	// the mutation's invalidation is only what makes the page ask again.
+	let restartPending = false;
+	await openResolution(undefined, {
+		responses: { "GET /api/config/status": () => ({ ...DATABASE, restart_pending: restartPending }) },
+		onWrite: () => {
+			restartPending = true;
+			return null;
+		},
+	});
+	await screen.findByRole("heading", { name: "Add upstream" });
+	expect(screen.queryByText(/Restart nxdns to apply them/)).toBeNull();
+
+	fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://8.8.8.8:53" } });
+	fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
+
+	await screen.findByText(/Saved changes are not running yet\. Restart nxdns to apply them\./);
+});
+
+test("toggling enabled resends the whole row", async () => {
+	await openResolution();
+	await screen.findByLabelText("tls://9.9.9.9:853 enabled");
+
+	fireEvent.click(screen.getByLabelText("tls://9.9.9.9:853 enabled"));
+
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toEqual({
+		url: "/api/upstreams/2",
+		method: "PUT",
+		body: { url: "tls://9.9.9.9:853", priority: 200, enabled: true, tls_name: "dns.quad9.net" },
+	});
+});
+
+test("upstream delete asks for confirmation and skips the request when cancelled", async () => {
+	await openResolution();
+	await screen.findByText("udp://1.1.1.1:53");
+
+	const dialog = await openDeleteDialog();
+	expect(dialog.textContent).toContain('Delete upstream "udp://1.1.1.1:53"?');
+
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes()).toHaveLength(0);
+});
+
+test("confirming the upstream delete dialog issues the DELETE", async () => {
+	await openResolution();
+	await screen.findByText("udp://1.1.1.1:53");
+
+	const dialog = await openDeleteDialog();
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/upstreams/1" });
+});
+
+test("a 409 on create renders the conflict text inline", async () => {
+	await openResolution(undefined, {
+		onWrite: () =>
+			new Response(JSON.stringify({ error: "an upstream with that url already exists" }), {
+				status: 409,
+				headers: { "content-type": "application/json" },
+			}),
+	});
+	await screen.findByRole("heading", { name: "Add upstream" });
+
+	fireEvent.change(screen.getByLabelText("URL"), { target: { value: "udp://1.1.1.1:53" } });
+	fireEvent.click(screen.getByRole("button", { name: "Add upstream" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("an upstream with that url already exists");
+});
+
+test("a 409 on toggle renders the last-enabled conflict", async () => {
+	await openResolution(undefined, {
+		onWrite: () =>
+			new Response(JSON.stringify({ error: "the last enabled upstream cannot be disabled" }), {
+				status: 409,
+				headers: { "content-type": "application/json" },
+			}),
+	});
+	await screen.findByLabelText("udp://1.1.1.1:53 enabled");
+
+	fireEvent.click(screen.getByLabelText("udp://1.1.1.1:53 enabled"));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("the last enabled upstream cannot be disabled");
+});
+
+test("a 409 on delete renders the last-enabled conflict", async () => {
+	await openResolution(undefined, {
+		onWrite: () =>
+			new Response(JSON.stringify({ error: "the last enabled upstream cannot be removed" }), {
+				status: 409,
+				headers: { "content-type": "application/json" },
+			}),
+	});
+	await screen.findByText("udp://1.1.1.1:53");
+
+	const dialog = await openDeleteDialog();
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("the last enabled upstream cannot be removed");
+});
+
+test("editing a row seeds the form and PUTs the replaced row", async () => {
+	await openResolution();
+	await screen.findByText("tls://9.9.9.9:853");
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[1]!);
+	await screen.findByRole("heading", { name: "Edit tls://9.9.9.9:853" });
+
+	expect((screen.getByLabelText("URL") as HTMLInputElement).value).toBe("tls://9.9.9.9:853");
+	expect((screen.getByLabelText("Priority") as HTMLInputElement).value).toBe("200");
+	expect((screen.getByLabelText("TLS name") as HTMLInputElement).value).toBe("dns.quad9.net");
+
+	fireEvent.change(screen.getByLabelText("Priority"), { target: { value: "10" } });
+	fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toEqual({
+		url: "/api/upstreams/2",
+		method: "PUT",
+		body: { url: "tls://9.9.9.9:853", priority: 10, enabled: false, tls_name: "dns.quad9.net" },
+	});
+	await screen.findByRole("heading", { name: "Add upstream" });
+});
+
+test("the arrow keys move between tabs, and the panel follows", async () => {
+	await openResolution();
+	await screen.findByText("udp://1.1.1.1:53");
+
+	const tablist = screen.getByRole("tablist", { name: "Resolution" });
+	expect(screen.getByRole("tab", { name: "Upstreams" }).getAttribute("aria-selected")).toBe("true");
+
+	fireEvent.keyDown(tablist, { key: "ArrowRight" });
+	await waitFor(() =>
+		expect(screen.getByRole("tab", { name: "Records" }).getAttribute("aria-selected")).toBe("true"),
+	);
+	await screen.findByText("nas.lan.home");
+
+	fireEvent.keyDown(tablist, { key: "ArrowLeft" });
+	await waitFor(() =>
+		expect(screen.getByRole("tab", { name: "Upstreams" }).getAttribute("aria-selected")).toBe("true"),
+	);
+	await screen.findByText("udp://1.1.1.1:53");
+});
+
+test("creating a local record posts exactly the LocalRecordInput", async () => {
+	await openResolution("records");
+	await screen.findByText("nas.lan.home");
+
+	fireEvent.click(screen.getByRole("button", { name: "Add record" }));
+	fireEvent.change(screen.getByLabelText("Name"), { target: { value: "printer.lan.home" } });
+	// The record type is a RAC Select: open the listbox, then pick.
+	fireEvent.click(screen.getByRole("button", { name: /Type$/ }));
+	fireEvent.click(await screen.findByRole("option", { name: "AAAA" }));
+	fireEvent.change(screen.getByLabelText("Value"), { target: { value: "fd00::11" } });
+	fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toMatchObject({
+		url: "/api/local-records",
+		method: "POST",
+		body: { name: "printer.lan.home", rtype: "AAAA", value: "fd00::11" },
+	});
+});
+
+test("the record delete dialog names the record and only deletes on confirm", async () => {
+	await openResolution("records");
+	await screen.findByText("nas.lan.home");
+
+	let dialog = await openDeleteDialog();
+	expect(dialog.textContent).toContain('Delete record "nas.lan.home"?');
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes()).toHaveLength(0);
+
+	dialog = await openDeleteDialog();
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/local-records/1" });
+});
+
+test("the forward zone delete dialog names the zone and only deletes on confirm", async () => {
+	await openResolution("zones");
+	await screen.findByText("lan.home");
+
+	let dialog = await openDeleteDialog();
+	expect(dialog.textContent).toContain('Delete forward zone "lan.home"?');
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(writes()).toHaveLength(0);
+
+	dialog = await openDeleteDialog();
+	fireEvent.click(within(dialog).getByRole("button", { name: "Delete" }));
+	await waitFor(() => expect(writes()).toHaveLength(1));
+	expect(writes()[0]).toMatchObject({ method: "DELETE", url: "/api/forward-zones/1" });
+});

admin/src/features/configuration/ResolutionPage.tsx

@@ -0,0 +1,77 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import { forwardZonesQuery, localRecordsQuery } from "@/lib/queries";
+import Tabs from "@/ui/Tabs";
+import AuthorityGate from "./AuthorityGate";
+import FileModeNote from "./FileModeNote";
+import { RecordsReadOnly, ZonesReadOnly } from "./LocalReadOnly";
+import QueryPanel from "./QueryPanel";
+import RecordsTab from "./RecordsTab";
+import UpstreamsTab from "./UpstreamsTab";
+import ZonesTab from "./ZonesTab";
+import { styles } from "./styles";
+import type { ResolutionTab } from "./search";
+
+function RecordsPanel() {
+	const records = useQuery(localRecordsQuery());
+	return (
+		<AuthorityGate>
+			{(status) =>
+				status.authority === "managed_file" ? (
+					<>
+						<FileModeNote path={status.path} />
+						<QueryPanel query={records}>{(rows) => <RecordsReadOnly records={rows} />}</QueryPanel>
+					</>
+				) : (
+					<RecordsTab />
+				)
+			}
+		</AuthorityGate>
+	);
+}
+
+function ZonesPanel() {
+	const zones = useQuery(forwardZonesQuery());
+	return (
+		<AuthorityGate>
+			{(status) =>
+				status.authority === "managed_file" ? (
+					<>
+						<FileModeNote path={status.path} />
+						<QueryPanel query={zones}>{(rows) => <ZonesReadOnly zones={rows} />}</QueryPanel>
+					</>
+				) : (
+					<ZonesTab />
+				)
+			}
+		</AuthorityGate>
+	);
+}
+
+/**
+ * Resolution: where a permitted name gets its answer. Three tabs in the order
+ * a query meets them — the pool that answers most of them, the records nxdns
+ * answers itself, and the zones it hands to another resolver.
+ */
+export default function ResolutionPage() {
+	const tab = useSearch({ from: "/shell/configuration/resolution" }).tab ?? "upstreams";
+	const navigate = useNavigate({ from: "/configuration/resolution" });
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Resolution</h1>
+			<p {...stylex.props(styles.intro)}>Where nxdns answers or forwards the names it permits.</p>
+			<Tabs
+				label="Resolution"
+				selectedKey={tab}
+				onSelectionChange={(key) => void navigate({ search: { tab: key as ResolutionTab } })}
+				tabs={[
+					{ id: "upstreams", label: "Upstreams", content: <UpstreamsTab /> },
+					{ id: "records", label: "Records", content: <RecordsPanel /> },
+					{ id: "zones", label: "Forward zones", content: <ZonesPanel /> },
+				]}
+			/>
+		</section>
+	);
+}

admin/src/features/configuration/SettingsDefinitions.tsx

@@ -0,0 +1,67 @@
+import * as stylex from "@stylexjs/stylex";
+import type { Settings } from "@/lib/types";
+import DefinitionList, { type Definition } from "@/ui/DefinitionList";
+import { colors } from "@/ui/tokens.stylex";
+import { SECTIONS, sectionValues, type AnyFieldDef } from "./settingsSections";
+import { styles as config } from "./styles";
+
+const styles = stylex.create({
+	absent: {
+		color: colors.textMuted,
+	},
+});
+
+/** The field key as a sentence. The exact key travels beside it, so this is free to read well. */
+export function humanize(key: string): string {
+	const spaced = key.replace(/_/g, " ");
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * Values are shown as the file spells them: `true`, not "Yes". The reader's
+ * next step is editing that file, and a value they cannot type back is a
+ * translation they have to undo.
+ */
+function renderValue(value: unknown) {
+	if (typeof value === "boolean") return String(value);
+	if (typeof value === "number") return String(value);
+	if (value === "") return <span {...stylex.props(styles.absent)}>empty</span>;
+	return String(value);
+}
+
+/**
+ * The settings under file authority: definition lists, one per section, each
+ * scalar carrying its exact ZON key. No inputs, no Save — the file is the
+ * form.
+ */
+export default function SettingsDefinitions({ settings }: { settings: Settings }) {
+	return (
+		<>
+			{SECTIONS.map(({ section, title, fields }) => {
+				const values = sectionValues(settings, section);
+				const items: Definition[] = (fields as readonly AnyFieldDef[]).map((def) => ({
+					label: humanize(def.key),
+					zonKey: `${section}.${def.key}`,
+					value: renderValue(values[def.key]),
+				}));
+				if (section === "web") {
+					// Derived from whether a password hash is stored, so it has no key of
+					// its own (D13). Naming one would send the reader to a line that is
+					// not in the file.
+					items.push({
+						label: "Authentication",
+						value: settings.web.auth_enabled ? "required" : "not configured",
+					});
+				}
+				return (
+					<section key={section} {...stylex.props(config.panel)}>
+						<h2 {...stylex.props(config.panelHeading)}>{title}</h2>
+						<div {...stylex.props(config.note)}>
+							<DefinitionList items={items} />
+						</div>
+					</section>
+				);
+			})}
+		</>
+	);
+}

admin/src/features/configuration/SettingsForm.tsx

@@ -0,0 +1,331 @@
+import { useState, type FormEvent } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { settingsPutMutation } from "@/lib/queries";
+import { buildSettingsPatch } from "@/lib/settingsDiff";
+import type { Settings, SettingsEnvelope } from "@/lib/types";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { SECTIONS, sectionValues, type AnyFieldDef } from "./settingsSections";
+import { styles as config } from "./styles";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	form: {
+		marginTop: "1rem",
+		maxWidth: "48rem",
+	},
+	/** A `fieldset` has a browser default border and padding; the layout wants neither. */
+	sections: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1.5rem",
+		borderStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	section: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+	legend: {
+		paddingInline: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+	/** One column on a phone, two from `sm`. */
+	fieldGrid: {
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
+		},
+	},
+	label: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: {
+			default: "oklch(37% 0.013 285.805)",
+			[DARK]: "oklch(87.1% 0.006 286.286)",
+		},
+	},
+	checkboxRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	field: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	fieldInput: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: colors.surfaceRaised,
+		color: colors.text,
+		paddingInline: "0.5rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	derived: {
+		color: colors.textMuted,
+	},
+	/** Both notices span the whole grid so the wrapped sentence stays readable. */
+	spanRow: {
+		gridColumn: { default: null, "@media (min-width: 640px)": "span 2 / span 2" },
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	passwordNotice: {
+		color: { default: "oklch(55.5% 0.163 48.998)", [DARK]: "oklch(82.8% 0.189 84.429)" },
+	},
+	mismatchNotice: {
+		color: colors.danger,
+	},
+	submitRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	save: {
+		borderStyle: "none",
+		borderRadius: "0.25rem",
+		paddingInline: "1rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+		backgroundColor: {
+			default: colors.primary,
+			":disabled": "oklch(87.1% 0.006 286.286)",
+			[DARK]: { default: colors.primary, ":disabled": "oklch(27.4% 0.006 286.033)" },
+		},
+		color: { default: colors.primaryText, ":disabled": "oklch(55.2% 0.016 285.938)" },
+	},
+});
+
+function FieldLabel({ id, text, restart }: { id: string; text: string; restart: boolean }) {
+	return (
+		<label htmlFor={id} {...stylex.props(styles.label)}>
+			{text}
+			{restart && <span {...stylex.props(config.restartTag)}>needs restart</span>}
+		</label>
+	);
+}
+
+function FieldRow({
+	section,
+	def,
+	value,
+	restart,
+	onChange,
+}: {
+	section: string;
+	def: AnyFieldDef;
+	value: unknown;
+	restart: boolean;
+	onChange: (value: unknown) => void;
+}) {
+	const id = `${section}.${def.key}`;
+	if (def.kind === "boolean") {
+		return (
+			<div {...stylex.props(styles.checkboxRow)}>
+				<input
+					id={id}
+					type="checkbox"
+					checked={value as boolean}
+					onChange={(e) => onChange(e.target.checked)}
+					{...stylex.props(shared.focusRing)}
+				/>
+				<FieldLabel id={id} text={def.key} restart={restart} />
+			</div>
+		);
+	}
+	if (Array.isArray(def.kind)) {
+		// `Select` renders its own `<label>` from a string, so the marker cannot be
+		// placed inside that label the way `FieldLabel` does it; it goes through the
+		// description slot instead, which puts it under the control and on the
+		// trigger's `aria-describedby`. An enum key that owes a restart owes it just
+		// as much as a number one, so it must be marked either way.
+		return (
+			<div {...stylex.props(styles.field)}>
+				<Select
+					variant="inline"
+					label={def.key}
+					value={value as string}
+					onChange={onChange}
+					options={def.kind.map((option) => ({ value: option, label: option }))}
+					description={restart ? "needs restart" : undefined}
+				/>
+			</div>
+		);
+	}
+	if (def.kind === "number") {
+		const numeric = value as number;
+		return (
+			<div {...stylex.props(styles.field)}>
+				<FieldLabel id={id} text={def.key} restart={restart} />
+				<input
+					id={id}
+					type="number"
+					value={Number.isNaN(numeric) ? "" : numeric}
+					onChange={(e) => onChange(e.target.valueAsNumber)}
+					{...stylex.props(styles.fieldInput, shared.focusRing)}
+				/>
+			</div>
+		);
+	}
+	return (
+		<div {...stylex.props(styles.field)}>
+			<FieldLabel id={id} text={def.key} restart={restart} />
+			<input
+				id={id}
+				type="text"
+				value={value as string}
+				onChange={(e) => onChange(e.target.value)}
+				{...stylex.props(styles.fieldInput, shared.focusRing)}
+			/>
+		</div>
+	);
+}
+
+/**
+ * The editable settings, in database mode only. Nothing here is ever disabled
+ * for authority: under file authority the page renders definitions instead, so
+ * this form is never drawn as a shell the reader cannot use.
+ *
+ * Which keys owe a restart is the server's answer, carried on the envelope's
+ * `restart_required` list; whether one is owed *now* is `restart_pending` on
+ * `/api/config/status`, which the shell notice reads.
+ */
+export default function SettingsForm({ envelope }: { envelope: SettingsEnvelope }) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(settingsPutMutation(queryClient));
+	// Frozen at mount and re-frozen on save: diffing against live query data would
+	// turn a background refetch's out-of-band changes into phantom user edits.
+	const [baseline, setBaseline] = useState<Settings>(() => structuredClone(envelope.settings));
+	const [edited, setEdited] = useState<Settings>(() => structuredClone(envelope.settings));
+	const [password, setPassword] = useState("");
+	const [confirm, setConfirm] = useState("");
+
+	const restartKeys = new Set(envelope.restart_required);
+	const passwordsMismatch = (password !== "" || confirm !== "") && password !== confirm;
+	const hasInvalidNumber = SECTIONS.some(({ section, fields }) => {
+		const values = sectionValues(edited, section);
+		return (fields as readonly AnyFieldDef[]).some(
+			(field) => field.kind === "number" && Number.isNaN(values[field.key]),
+		);
+	});
+	const patch = buildSettingsPatch(baseline, edited, password === "" ? undefined : password);
+	const saveDisabled = patch === null || passwordsMismatch || hasInvalidNumber || mutation.isPending;
+
+	function setField(section: keyof Settings, key: string, value: unknown): void {
+		setEdited((prev) => ({
+			...prev,
+			[section]: { ...sectionValues(prev, section), [key]: value },
+		}));
+	}
+
+	function handleSubmit(event: FormEvent): void {
+		event.preventDefault();
+		if (patch === null || passwordsMismatch || hasInvalidNumber) return;
+		mutation.mutate(patch, {
+			onSuccess: (saved) => {
+				setBaseline(structuredClone(saved.settings));
+				setEdited(structuredClone(saved.settings));
+				setPassword("");
+				setConfirm("");
+			},
+		});
+	}
+
+	return (
+		<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
+			<fieldset disabled={mutation.isPending} {...stylex.props(styles.sections)}>
+				{SECTIONS.map(({ section, title, fields }) => (
+					<fieldset key={section} {...stylex.props(styles.section)}>
+						<legend {...stylex.props(styles.legend)}>{title}</legend>
+						<div {...stylex.props(styles.fieldGrid)}>
+							{(fields as readonly AnyFieldDef[]).map((def) => (
+								<FieldRow
+									key={def.key}
+									section={section}
+									def={def}
+									value={sectionValues(edited, section)[def.key]}
+									restart={restartKeys.has(`${section}.${def.key}`)}
+									onChange={(value) => setField(section, def.key, value)}
+								/>
+							))}
+							{section === "web" && (
+								<>
+									<p {...stylex.props(styles.label)}>
+										Authentication:{" "}
+										{envelope.settings.web.auth_enabled ? "required" : "not configured"}{" "}
+										<span {...stylex.props(styles.derived)}>
+											(derived from whether a password is stored)
+										</span>
+									</p>
+									<div {...stylex.props(styles.field)}>
+										<label htmlFor="web.password" {...stylex.props(styles.label)}>
+											password
+										</label>
+										<input
+											id="web.password"
+											type="password"
+											autoComplete="new-password"
+											value={password}
+											onChange={(e) => setPassword(e.target.value)}
+											{...stylex.props(styles.fieldInput, shared.focusRing)}
+										/>
+									</div>
+									<div {...stylex.props(styles.field)}>
+										<label htmlFor="web.password_confirm" {...stylex.props(styles.label)}>
+											confirm password
+										</label>
+										<input
+											id="web.password_confirm"
+											type="password"
+											autoComplete="new-password"
+											value={confirm}
+											onChange={(e) => setConfirm(e.target.value)}
+											{...stylex.props(styles.fieldInput, shared.focusRing)}
+										/>
+									</div>
+									{password !== "" && (
+										<p {...stylex.props(styles.spanRow, styles.passwordNotice)}>
+											Changing the password signs out every session; you will be asked to log in
+											again.
+										</p>
+									)}
+									{passwordsMismatch && (
+										<p {...stylex.props(styles.spanRow, styles.mismatchNotice)}>
+											Passwords do not match.
+										</p>
+									)}
+								</>
+							)}
+						</div>
+					</fieldset>
+				))}
+				<div {...stylex.props(styles.submitRow)}>
+					<button type="submit" disabled={saveDisabled} {...stylex.props(styles.save, shared.focusRing)}>
+						{mutation.isPending ? "Saving…" : "Save"}
+					</button>
+					{mutation.isError && <InlineError error={mutation.error} />}
+				</div>
+			</fieldset>
+		</form>
+	);
+}

admin/src/features/configuration/SystemPage.test.tsx

@@ -0,0 +1,327 @@
+import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { queryKeys } from "@/lib/queries";
+import type { Settings, SettingsPatch } from "@/lib/types";
+import { DATABASE, MANAGED_FILE, baseSettings, renderPage, stubApi } from "./testFixtures";
+
+/**
+ * System in database mode: the settings form, its diff contract, and the
+ * certificate reload that is a runtime action under both authorities.
+ */
+
+// `logging.level` is enum-backed, so the list covers both field renderings: an
+// input whose label carries the mark, and a `Select` that cannot.
+const RESTART_KEYS = ["dns.port", "web.port", "logging.level"];
+
+let stored: Settings;
+let putBodies: SettingsPatch[];
+let putResponse: (() => Response | Promise<Response>) | null;
+let restartPending: boolean;
+
+function json(payload: unknown, status = 200): Response {
+	return new Response(JSON.stringify(payload), { status, headers: { "content-type": "application/json" } });
+}
+
+/** The server's echo: the patch merged into the stored settings, password excepted. */
+function applyPatch(patch: SettingsPatch): void {
+	const target = stored as unknown as Record<string, Record<string, unknown>>;
+	for (const [section, fields] of Object.entries(patch)) {
+		for (const [key, value] of Object.entries(fields as Record<string, unknown>)) {
+			if (section === "web" && key === "password") continue;
+			target[section]![key] = value;
+		}
+	}
+}
+
+/** Mirrors settings.zig: a patch touching only `web.password` applies live. */
+function needsRestart(patch: SettingsPatch): boolean {
+	return Object.entries(patch).some(([section, fields]) =>
+		Object.keys(fields as Record<string, unknown>).some((key) => !(section === "web" && key === "password")),
+	);
+}
+
+beforeEach(() => {
+	stored = baseSettings();
+	putBodies = [];
+	putResponse = null;
+	restartPending = false;
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+async function openSystem() {
+	stubApi(DATABASE, {
+		responses: {
+			"GET /api/config/status": () => ({ ...DATABASE, restart_pending: restartPending }),
+			"GET /api/settings": () => ({ settings: stored, restart_required: RESTART_KEYS }),
+		},
+		onWrite: (call) => {
+			if (call.url !== "/api/settings") return null;
+			const patch = call.body as SettingsPatch;
+			putBodies.push(patch);
+			if (putResponse !== null) return putResponse();
+			applyPatch(patch);
+			if (needsRestart(patch)) restartPending = true;
+			return json({ settings: stored, restart_required: RESTART_KEYS });
+		},
+	});
+	const router = await renderPage("/configuration/system", "System");
+	await screen.findByRole("button", { name: "Save" });
+	return router;
+}
+
+function saveButton(): HTMLButtonElement {
+	return screen.getByRole("button", { name: "Save" }) as HTMLButtonElement;
+}
+
+function restartNotice(): HTMLElement | null {
+	return screen.queryByText(/Saved changes are not running yet/);
+}
+
+test("no changes means Save is disabled, and authentication reads as derived", async () => {
+	await openSystem();
+
+	expect(saveButton().disabled).toBe(true);
+	const auth = screen.getByText(/^Authentication: required/);
+	expect(auth.textContent).toContain("derived from whether a password is stored");
+});
+
+test("a changed field enables Save and the PUT body is exactly the diff", async () => {
+	await openSystem();
+
+	const dns = screen.getByRole("group", { name: "DNS" });
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "5353" } });
+	expect(saveButton().disabled).toBe(false);
+
+	fireEvent.click(saveButton());
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	expect(putBodies[0]).toEqual({ dns: { port: 5353 } });
+	await waitFor(() => expect(saveButton().disabled).toBe(true));
+});
+
+test("a restart-required key is marked as one, from the envelope's list", async () => {
+	await openSystem();
+
+	expect(within(screen.getByRole("group", { name: "DNS" })).getByText("needs restart")).toBeTruthy();
+	// `rate_limit` is not on the list, so it carries no mark.
+	const cache = screen.getByRole("group", { name: "Cache" });
+	expect(within(cache).queryByText("needs restart")).toBeNull();
+});
+
+test("an enum-backed key on the list is marked too, not only text and number fields", async () => {
+	await openSystem();
+
+	const logging = screen.getByRole("group", { name: "Logging" });
+	// `logging.level` is a Select and `logging.output` is not on the list, so
+	// exactly one mark belongs to this section.
+	expect(within(logging).getAllByText("needs restart")).toHaveLength(1);
+	const marker = within(logging).getByText("needs restart");
+	const marked = marker.parentElement!;
+	const trigger = within(marked).getByRole("button", { name: /level$/ });
+	// Visible next to the control is not enough: the marker sits outside the
+	// label, so only `aria-describedby` carries it to a screen reader.
+	expect(marker.id).not.toBe("");
+	expect(trigger.getAttribute("aria-describedby")?.split(" ")).toContain(marker.id);
+});
+
+test("enum and boolean fields diff as their own types", async () => {
+	await openSystem();
+
+	const logging = screen.getByRole("group", { name: "Logging" });
+	// A RAC Select names its trigger with the current value and then the label,
+	// and carries the options only while the listbox is open.
+	fireEvent.click(within(logging).getByRole("button", { name: /level$/ }));
+	fireEvent.click(await screen.findByRole("option", { name: "debug" }));
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+	fireEvent.click(within(logging).getByLabelText("hide_domains"));
+	fireEvent.click(saveButton());
+
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	expect(putBodies[0]).toEqual({ logging: { level: "debug", hide_domains: true } });
+});
+
+test("clearing a number field disables Save instead of sending NaN", async () => {
+	await openSystem();
+
+	const cache = screen.getByRole("group", { name: "Cache" });
+	fireEvent.change(within(cache).getByLabelText("size"), { target: { value: "" } });
+	expect(saveButton().disabled).toBe(true);
+});
+
+test("password flow: note shown, confirm required, PUT sends web.password, no restart notice", async () => {
+	await openSystem();
+
+	const web = screen.getByRole("group", { name: "Web" });
+	const passwordInput = within(web).getByLabelText("password") as HTMLInputElement;
+	const confirmInput = within(web).getByLabelText("confirm password") as HTMLInputElement;
+	expect(passwordInput.value).toBe("");
+
+	fireEvent.change(passwordInput, { target: { value: "hunter2" } });
+	expect(screen.getByText(/signs out every session/)).toBeTruthy();
+	expect(screen.getByText("Passwords do not match.")).toBeTruthy();
+	expect(saveButton().disabled).toBe(true);
+
+	fireEvent.change(confirmInput, { target: { value: "hunter2" } });
+	expect(screen.queryByText("Passwords do not match.")).toBeNull();
+	expect(saveButton().disabled).toBe(false);
+
+	fireEvent.click(saveButton());
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	expect(putBodies[0]).toEqual({ web: { password: "hunter2" } });
+
+	await waitFor(() => expect(passwordInput.value).toBe(""));
+	expect(confirmInput.value).toBe("");
+	// The password applies live, so the server never raises the flag.
+	expect(restartNotice()).toBeNull();
+});
+
+test("a mixed patch makes the server owe a restart, and the shell says so", async () => {
+	await openSystem();
+
+	const web = screen.getByRole("group", { name: "Web" });
+	fireEvent.change(within(web).getByLabelText("session_ttl_hours"), { target: { value: "48" } });
+	fireEvent.change(within(web).getByLabelText("password"), { target: { value: "hunter2" } });
+	fireEvent.change(within(web).getByLabelText("confirm password"), { target: { value: "hunter2" } });
+	fireEvent.click(saveButton());
+
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	expect(putBodies[0]).toEqual({ web: { session_ttl_hours: 48, password: "hunter2" } });
+	await screen.findByText(/Saved changes are not running yet/);
+});
+
+test("the form is disabled while the PUT is pending and re-enabled after success", async () => {
+	await openSystem();
+	let resolvePut!: (response: Response) => void;
+	putResponse = () => new Promise<Response>((resolve) => (resolvePut = resolve));
+
+	const dns = screen.getByRole("group", { name: "DNS" });
+	const port = within(dns).getByLabelText(/^port/) as HTMLInputElement;
+	fireEvent.change(port, { target: { value: "5353" } });
+	fireEvent.click(saveButton());
+
+	await screen.findByRole("button", { name: "Saving…" });
+	expect(port.matches(":disabled")).toBe(true);
+	expect(screen.getByRole("group", { name: "Web" }).querySelector("#web\\.password")?.matches(":disabled")).toBe(
+		true,
+	);
+
+	applyPatch(putBodies[putBodies.length - 1]!);
+	resolvePut(json({ settings: stored, restart_required: RESTART_KEYS }));
+	await waitFor(() => expect(port.matches(":disabled")).toBe(false));
+	expect(saveButton().textContent).toBe("Save");
+});
+
+test("a 429 shows the rate-limit countdown from Retry-After", async () => {
+	await openSystem();
+	putResponse = () =>
+		new Response(JSON.stringify({ error: "too many requests" }), {
+			status: 429,
+			headers: { "content-type": "application/json", "Retry-After": "30" },
+		});
+
+	const dns = screen.getByRole("group", { name: "DNS" });
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "5353" } });
+	fireEvent.click(saveButton());
+
+	expect((await screen.findByRole("alert")).textContent).toBe("Rate limited. Try again in 30s.");
+	expect(restartNotice()).toBeNull();
+});
+
+test("a 400 validation error surfaces inline and owes no restart", async () => {
+	await openSystem();
+	putResponse = () => json({ error: "dns.port out of range" }, 400);
+
+	const dns = screen.getByRole("group", { name: "DNS" });
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "70000" } });
+	fireEvent.click(saveButton());
+
+	expect((await screen.findByRole("alert")).textContent).toBe("dns.port out of range");
+	expect(restartNotice()).toBeNull();
+	expect(saveButton().disabled).toBe(false);
+});
+
+test("a background refetch does not turn out-of-band changes into phantom patch entries", async () => {
+	const router = await openSystem();
+	const queryClient = router.options.context.queryClient;
+
+	const dns = screen.getByRole("group", { name: "DNS" });
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "5353" } });
+
+	// Someone else changes cache.size; a background refetch brings it in. The
+	// derived authentication line is read straight from the query data, so it
+	// witnesses that the refetch reached the component.
+	stored.cache.size = 99999;
+	stored.web.auth_enabled = false;
+	await act(async () => {
+		await queryClient.invalidateQueries({ queryKey: queryKeys.settings });
+	});
+	await waitFor(() => expect(screen.getByText(/^Authentication: not configured/)).toBeTruthy());
+	const cache = screen.getByRole("group", { name: "Cache" });
+	expect((within(cache).getByLabelText("size") as HTMLInputElement).value).toBe("10000");
+
+	fireEvent.click(saveButton());
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	expect(putBodies[0]).toEqual({ dns: { port: 5353 } });
+});
+
+test("saving re-freezes the baseline, so the next diff starts from the server echo", async () => {
+	await openSystem();
+	const dns = screen.getByRole("group", { name: "DNS" });
+
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "5353" } });
+	fireEvent.click(saveButton());
+	await waitFor(() => expect(putBodies).toHaveLength(1));
+	await waitFor(() => expect(saveButton().disabled).toBe(true));
+
+	fireEvent.change(within(dns).getByLabelText(/^port/), { target: { value: "5454" } });
+	fireEvent.click(saveButton());
+	await waitFor(() => expect(putBodies).toHaveLength(2));
+	expect(putBodies[1]).toEqual({ dns: { port: 5454 } });
+});
+
+test("Reload certificates reports each endpoint's outcome in database mode (D8)", async () => {
+	stubApi(DATABASE, {
+		responses: {
+			"POST /api/certs/reload": {
+				doh: { enabled: true, reloaded: true, error: null },
+				dot: { enabled: false, reloaded: false, error: null },
+			},
+		},
+	});
+	await renderPage("/configuration/system", "System");
+
+	fireEvent.click(screen.getByRole("button", { name: "Reload certificates" }));
+	const result = await screen.findByText(/DoH: reloaded/);
+	expect(result.textContent).toContain("DoT: not enabled");
+});
+
+test("Reload certificates works under file authority too, and states a failure (D8)", async () => {
+	stubApi(MANAGED_FILE, {
+		responses: {
+			"POST /api/certs/reload": {
+				doh: { enabled: true, reloaded: false, error: "cert.pem: no such file" },
+				dot: { enabled: true, reloaded: true, error: null },
+			},
+		},
+	});
+	await renderPage("/configuration/system", "System");
+
+	const button = screen.getByRole("button", { name: "Reload certificates" }) as HTMLButtonElement;
+	expect(button.disabled).toBe(false);
+	fireEvent.click(button);
+
+	const result = await screen.findByText(/DoH: failed/);
+	expect(result.textContent).toContain("cert.pem: no such file");
+	expect(result.textContent).toContain("DoT: reloaded");
+});
+
+test("a failed certificate reload request is an error, not an outcome", async () => {
+	stubApi(DATABASE, {
+		onWrite: (call) => (call.url === "/api/certs/reload" ? json({ error: "reload is busy" }, 409) : null),
+	});
+	await renderPage("/configuration/system", "System");
+
+	fireEvent.click(screen.getByRole("button", { name: "Reload certificates" }));
+	expect((await screen.findByRole("alert")).textContent).toBe("reload is busy");
+});

admin/src/features/configuration/SystemPage.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { settingsQuery } from "@/lib/queries";
+import AuthorityGate from "./AuthorityGate";
+import FileModeNote from "./FileModeNote";
+import QueryPanel from "./QueryPanel";
+import ReloadCertsAction from "./ReloadCertsAction";
+import SettingsDefinitions from "./SettingsDefinitions";
+import SettingsForm from "./SettingsForm";
+import { styles } from "./styles";
+
+/**
+ * System: what this process is running with. No tabs — the settings registry
+ * is already sectioned, and splitting it further would hide the section the
+ * reader came for behind a guess about which tab holds it.
+ *
+ * "Reload certificates" sits above the gate: it is a runtime action on the
+ * running listeners, so it works whatever owns the configuration and whether
+ * or not `/api/config/status` has answered.
+ */
+export default function SystemPage() {
+	const settings = useQuery(settingsQuery());
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>System</h1>
+			<p {...stylex.props(styles.intro)}>
+				The service, storage, logging, TLS and web settings this nxdns process is running with.
+			</p>
+			<ReloadCertsAction />
+			<AuthorityGate>
+				{(status) =>
+					status.authority === "managed_file" ? (
+						<>
+							<FileModeNote path={status.path} />
+							<QueryPanel query={settings}>
+								{(envelope) => <SettingsDefinitions settings={envelope.settings} />}
+							</QueryPanel>
+						</>
+					) : (
+						<QueryPanel query={settings}>{(envelope) => <SettingsForm envelope={envelope} />}</QueryPanel>
+					)
+				}
+			</AuthorityGate>
+		</section>
+	);
+}

admin/src/features/configuration/UpstreamForm.tsx

@@ -1,7 +1,9 @@
 import { useState, type FormEvent } from "react";
+import * as stylex from "@stylexjs/stylex";
 import InlineError from "@/lib/InlineError";
 import type { Upstream, UpstreamInput } from "@/lib/types";
-import { buttonClass, focusRing, inputClass, primaryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 
 const DEFAULT_PRIORITY = "100";
 
@@ -13,6 +15,49 @@ interface UpstreamFormProps {
 	onCancel?: () => void;
 }
 
+const styles = stylex.create({
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1rem",
+		maxWidth: "36rem",
+	},
+	heading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	hint: {
+		marginTop: "0.25rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	checkboxLabel: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	cancelButton: {
+		fontWeight: 500,
+	},
+});
+
 export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel }: UpstreamFormProps) {
 	const [url, setUrl] = useState(initial?.url ?? "");
 	const [priority, setPriority] = useState(initial === undefined ? DEFAULT_PRIORITY : String(initial.priority));
@@ -42,10 +87,10 @@ export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel
 	}
 
 	return (
-		<form onSubmit={handleSubmit} className="mt-4 max-w-xl space-y-3">
-			<h2 className="text-lg font-medium">{initial === undefined ? "Add upstream" : `Edit ${initial.url}`}</h2>
+		<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
+			<h2 {...stylex.props(styles.heading)}>{initial === undefined ? "Add upstream" : `Edit ${initial.url}`}</h2>
 			<div>
-				<label htmlFor="upstream-url" className="block text-sm font-medium">
+				<label htmlFor="upstream-url" {...stylex.props(styles.fieldLabel)}>
 					URL
 				</label>
 				<input
@@ -55,11 +100,11 @@ export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel
 					value={url}
 					onChange={(event) => setUrl(event.target.value)}
 					placeholder="udp://1.1.1.1:53"
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
 			<div>
-				<label htmlFor="upstream-priority" className="block text-sm font-medium">
+				<label htmlFor="upstream-priority" {...stylex.props(styles.fieldLabel)}>
 					Priority
 				</label>
 				<input
@@ -68,11 +113,11 @@ export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel
 					min={0}
 					value={priority}
 					onChange={(event) => setPriority(event.target.value)}
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
 			</div>
 			<div>
-				<label htmlFor="upstream-tls-name" className="block text-sm font-medium">
+				<label htmlFor="upstream-tls-name" {...stylex.props(styles.fieldLabel)}>
 					TLS name
 				</label>
 				<input
@@ -81,27 +126,31 @@ export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel
 					value={tlsName}
 					onChange={(event) => setTlsName(event.target.value)}
 					placeholder="one.one.one.one"
-					className={inputClass}
+					{...stylex.props(shared.input, shared.focusRing)}
 				/>
-				<p className="mt-1 text-xs text-zinc-500">
+				<p {...stylex.props(styles.hint)}>
 					The SNI and certificate name for a <code>tls://</code> upstream. Leave empty for every other scheme.
 				</p>
 			</div>
-			<label className="flex items-center gap-2 text-sm font-medium">
+			<label {...stylex.props(styles.checkboxLabel)}>
 				<input
 					type="checkbox"
 					checked={enabled}
 					onChange={(event) => setEnabled(event.target.checked)}
-					className={focusRing}
+					{...stylex.props(shared.focusRing)}
 				/>
 				Enabled
 			</label>
-			<div className="flex items-center gap-2">
-				<button type="submit" disabled={busy} className={primaryButtonClass}>
+			<div {...stylex.props(styles.actions)}>
+				<button type="submit" disabled={busy} {...stylex.props(shared.primaryButton, shared.focusRing)}>
 					{initial === undefined ? "Add upstream" : "Save changes"}
 				</button>
 				{onCancel !== undefined && (
-					<button type="button" onClick={onCancel} className={`${buttonClass} font-medium`}>
+					<button
+						type="button"
+						onClick={onCancel}
+						{...stylex.props(shared.button, styles.cancelButton, shared.focusRing)}
+					>
 						Cancel
 					</button>
 				)}

admin/src/features/configuration/UpstreamsTab.tsx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { upstreamCreateMutation, upstreamDeleteMutation, upstreamUpdateMutation, upstreamsQuery } from "@/lib/queries";
+import type { Upstream, UpstreamInput } from "@/lib/types";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import AuthorityGate from "./AuthorityGate";
+import FileModeNote from "./FileModeNote";
+import QueryPanel from "./QueryPanel";
+import UpstreamForm from "./UpstreamForm";
+import { styles as config } from "./styles";
+
+const INTRO = "The pool builds its clients at startup, so an edit here takes effect at the next restart.";
+
+const styles = stylex.create({
+	url: {
+		display: "block",
+		maxWidth: "18rem",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		fontWeight: 500,
+	},
+	actions: {
+		display: "flex",
+		gap: "0.75rem",
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+	absent: {
+		color: colors.textMuted,
+	},
+});
+
+export default function UpstreamsTab() {
+	const upstreams = useQuery(upstreamsQuery());
+	return (
+		<AuthorityGate>
+			{(status) => (
+				<div>
+					<p {...stylex.props(config.intro)}>{INTRO}</p>
+					{status.authority === "managed_file" && <FileModeNote path={status.path} />}
+					<QueryPanel query={upstreams}>
+						{(rows) =>
+							status.authority === "managed_file" ? (
+								<UpstreamsReadOnly upstreams={rows} />
+							) : (
+								<UpstreamsEditor upstreams={rows} />
+							)
+						}
+					</QueryPanel>
+				</div>
+			)}
+		</AuthorityGate>
+	);
+}
+
+function UpstreamsReadOnly({ upstreams }: { upstreams: Upstream[] }) {
+	return (
+		<section {...stylex.props(config.panel)}>
+			<h2 {...stylex.props(config.panelHeading)}>
+				Upstream pool
+				<code {...stylex.props(shared.mono, config.panelKey)}>upstreams</code>
+			</h2>
+			{upstreams.length === 0 ? (
+				<p {...stylex.props(config.empty)}>The file declares no upstreams.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>URL</th>
+								<th {...stylex.props(shared.th)}>Priority</th>
+								<th {...stylex.props(shared.th)}>Enabled</th>
+								<th {...stylex.props(shared.th)}>TLS name</th>
+							</tr>
+						</thead>
+						<tbody>
+							{upstreams.map((u) => (
+								<tr key={u.id}>
+									<td {...stylex.props(shared.td, shared.mono)}>{u.url}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{u.priority}</td>
+									<td {...stylex.props(shared.td)}>{String(u.enabled)}</td>
+									<td {...stylex.props(shared.td)}>
+										{u.tls_name === "" ? (
+											<span {...stylex.props(styles.absent)}>empty</span>
+										) : (
+											u.tls_name
+										)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}
+
+function UpstreamsEditor({ upstreams }: { upstreams: Upstream[] }) {
+	const queryClient = useQueryClient();
+	const [editing, setEditing] = useState<Upstream | null>(null);
+	const [pendingDelete, setPendingDelete] = useState<Upstream | null>(null);
+
+	const create = useMutation(upstreamCreateMutation(queryClient));
+	const save = useMutation(upstreamUpdateMutation(queryClient));
+	const toggle = useMutation(upstreamUpdateMutation(queryClient));
+	const remove = useMutation(upstreamDeleteMutation(queryClient));
+
+	async function submitForm(input: UpstreamInput) {
+		if (editing === null) {
+			await create.mutateAsync(input);
+		} else {
+			await save.mutateAsync({ id: editing.id, input });
+			setEditing(null);
+		}
+	}
+
+	function toggleEnabled(u: Upstream) {
+		toggle.mutate({
+			id: u.id,
+			input: { url: u.url, priority: u.priority, enabled: !u.enabled, tls_name: u.tls_name },
+		});
+	}
+
+	function confirmDelete() {
+		if (pendingDelete === null) return;
+		remove.mutate(pendingDelete.id);
+		setPendingDelete(null);
+	}
+
+	const formError = editing === null ? create.error : save.error;
+	const tableError = remove.error ?? toggle.error;
+
+	return (
+		<div>
+			{upstreams.length === 0 ? (
+				<p {...stylex.props(config.empty)}>No upstreams yet. Add one below.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(config.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>URL</th>
+								<th {...stylex.props(shared.th)}>Priority</th>
+								<th {...stylex.props(shared.th)}>Enabled</th>
+								<th {...stylex.props(shared.th)}>TLS name</th>
+								<th {...stylex.props(shared.th)}>
+									<span {...stylex.props(shared.srOnly)}>Actions</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{upstreams.map((u) => (
+								<tr key={u.id}>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(styles.url)} title={u.url}>
+											{u.url}
+										</span>
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{u.priority}</td>
+									<td {...stylex.props(shared.td)}>
+										<input
+											type="checkbox"
+											aria-label={`${u.url} enabled`}
+											checked={u.enabled}
+											disabled={toggle.isPending}
+											onChange={() => toggleEnabled(u)}
+											{...stylex.props(shared.focusRing)}
+										/>
+									</td>
+									<td {...stylex.props(shared.td)}>{u.tls_name === "" ? "—" : u.tls_name}</td>
+									<td {...stylex.props(shared.td)}>
+										<div {...stylex.props(styles.actions)}>
+											<button
+												type="button"
+												onClick={() => setEditing(u)}
+												{...stylex.props(shared.linkButton, shared.focusRing)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => setPendingDelete(u)}
+												disabled={remove.isPending}
+												{...stylex.props(
+													shared.dangerLinkButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Delete
+											</button>
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+			<InlineError error={tableError} />
+
+			<UpstreamForm
+				key={editing?.id ?? "add"}
+				initial={editing ?? undefined}
+				busy={editing === null ? create.isPending : save.isPending}
+				error={formError}
+				onSubmit={submitForm}
+				onCancel={editing === null ? undefined : () => setEditing(null)}
+			/>
+
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete upstream"
+				message={
+					pendingDelete === null
+						? ""
+						: `Delete upstream "${pendingDelete.url}"? Queries stop being forwarded to it.`
+				}
+				confirmLabel="Delete"
+				onConfirm={confirmDelete}
+				onCancel={() => setPendingDelete(null)}
+			/>
+		</div>
+	);
+}

admin/src/features/configuration/ZonesTab.tsx

@@ -0,0 +1,280 @@
+import { useId, useState, type FormEvent } from "react";
+import { useQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import {
+	forwardZoneCreateMutation,
+	forwardZoneDeleteMutation,
+	forwardZoneUpdateMutation,
+	forwardZonesQuery,
+} from "@/lib/queries";
+import type { ForwardZone, ForwardZoneInput } from "@/lib/types";
+import InlineError from "@/lib/InlineError";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { useCrudForm } from "@/ui/useCrudForm";
+import QueryPanel from "./QueryPanel";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	formHeading: {
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	buttonRow: {
+		display: "flex",
+		gap: "0.5rem",
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginTop: "1rem",
+	},
+	intro: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	table: {
+		width: "100%",
+		textAlign: "left",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	headRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		color: colors.textMuted,
+	},
+	headCell: {
+		paddingBlock: "0.5rem",
+		paddingRight: "1rem",
+		fontWeight: 500,
+	},
+	headCellLast: {
+		paddingBlock: "0.5rem",
+	},
+	bodyRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+	},
+	cell: {
+		paddingBlock: "0.5rem",
+		paddingRight: "1rem",
+	},
+	emptyCell: {
+		paddingBlock: "1rem",
+		color: colors.textMuted,
+	},
+	actionCell: {
+		paddingBlock: "0.5rem",
+		textAlign: "right",
+		whiteSpace: "nowrap",
+	},
+	dangerText: {
+		color: colors.danger,
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+});
+
+function ZoneForm({
+	initial,
+	busy,
+	error,
+	onSubmit,
+	onCancel,
+}: {
+	initial?: ForwardZone;
+	busy: boolean;
+	error: unknown;
+	onSubmit: (input: ForwardZoneInput) => void;
+	onCancel: () => void;
+}) {
+	const id = useId();
+	const [zone, setZone] = useState(initial?.zone ?? "");
+	const [resolver, setResolver] = useState(initial?.resolver ?? "");
+
+	function submit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		onSubmit({ zone: zone.trim(), resolver: resolver.trim() });
+	}
+
+	return (
+		<form onSubmit={submit} {...stylex.props(shared.formCard)}>
+			<h3 {...stylex.props(styles.formHeading)}>
+				{initial === undefined ? "New forward zone" : `Edit ${initial.zone}`}
+			</h3>
+			<div>
+				<label htmlFor={`${id}-zone`} {...stylex.props(styles.fieldLabel)}>
+					Zone
+				</label>
+				<input
+					id={`${id}-zone`}
+					required
+					value={zone}
+					onChange={(event) => setZone(event.target.value)}
+					placeholder="lan.home"
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div>
+				<label htmlFor={`${id}-resolver`} {...stylex.props(styles.fieldLabel)}>
+					Resolver
+				</label>
+				<input
+					id={`${id}-resolver`}
+					required
+					value={resolver}
+					onChange={(event) => setResolver(event.target.value)}
+					placeholder="udp://192.168.1.1:53"
+					{...stylex.props(shared.input, shared.focusRing)}
+				/>
+			</div>
+			<div {...stylex.props(styles.buttonRow)}>
+				<button type="submit" disabled={busy} {...stylex.props(shared.largePrimaryButton, shared.focusRing)}>
+					{busy ? "Saving…" : "Save"}
+				</button>
+				<button type="button" onClick={onCancel} {...stylex.props(shared.largeButton, shared.focusRing)}>
+					Cancel
+				</button>
+			</div>
+			<InlineError error={error} />
+		</form>
+	);
+}
+
+export default function ZonesTab() {
+	const query = useQuery(forwardZonesQuery());
+	const {
+		create,
+		update,
+		remove,
+		form,
+		openForm,
+		closeForm,
+		onSubmit,
+		onDelete,
+		pendingDelete,
+		confirmPendingDelete,
+		cancelPendingDelete,
+	} = useCrudForm<ForwardZone, ForwardZoneInput>({
+		create: forwardZoneCreateMutation,
+		update: forwardZoneUpdateMutation,
+		remove: forwardZoneDeleteMutation,
+		confirmDelete: (zone) => `Delete forward zone "${zone.zone}"?`,
+	});
+
+	return (
+		<div>
+			<div {...stylex.props(styles.toolbar)}>
+				<p {...stylex.props(styles.intro)}>
+					Names under these zones go to their own resolver. Changes apply live.
+				</p>
+				<button
+					type="button"
+					onClick={() => openForm({ mode: "create" })}
+					{...stylex.props(shared.largePrimaryButton, shared.focusRing)}
+				>
+					Add zone
+				</button>
+			</div>
+			<InlineError error={remove.error} />
+			{form?.mode === "create" && (
+				<ZoneForm busy={create.isPending} error={create.error} onSubmit={onSubmit} onCancel={closeForm} />
+			)}
+			<QueryPanel query={query}>
+				{(zones) => (
+					<div {...stylex.props(shared.tableWrap)}>
+						<table {...stylex.props(styles.table)}>
+							<thead>
+								<tr {...stylex.props(styles.headRow)}>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										Zone
+									</th>
+									<th scope="col" {...stylex.props(styles.headCell)}>
+										Resolver
+									</th>
+									<th scope="col" {...stylex.props(styles.headCellLast)}>
+										<span {...stylex.props(shared.srOnly)}>Actions</span>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{zones.length === 0 && (
+									<tr>
+										<td colSpan={3} {...stylex.props(styles.emptyCell)}>
+											No forward zones yet.
+										</td>
+									</tr>
+								)}
+								{zones.map((zone) => (
+									<tr key={zone.id} {...stylex.props(styles.bodyRow)}>
+										{form?.mode === "edit" && form.entity.id === zone.id ? (
+											<td colSpan={3}>
+												<ZoneForm
+													initial={zone}
+													busy={update.isPending}
+													error={update.error}
+													onSubmit={onSubmit}
+													onCancel={closeForm}
+												/>
+											</td>
+										) : (
+											<>
+												<td {...stylex.props(styles.cell, shared.mono)}>{zone.zone}</td>
+												<td {...stylex.props(styles.cell, shared.mono)}>{zone.resolver}</td>
+												<td {...stylex.props(styles.actionCell)}>
+													<button
+														type="button"
+														onClick={() => openForm({ mode: "edit", entity: zone })}
+														{...stylex.props(
+															shared.rowButton,
+															styles.dimWhenDisabled,
+															shared.focusRing,
+														)}
+													>
+														Edit
+													</button>
+													<button
+														type="button"
+														onClick={() => onDelete(zone)}
+														disabled={remove.isPending}
+														{...stylex.props(
+															shared.rowButton,
+															styles.dangerText,
+															styles.dimWhenDisabled,
+															shared.focusRing,
+														)}
+													>
+														Delete
+													</button>
+												</td>
+											</>
+										)}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				)}
+			</QueryPanel>
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete forward zone"
+				message={pendingDelete?.message ?? ""}
+				confirmLabel="Delete"
+				onConfirm={confirmPendingDelete}
+				onCancel={cancelPendingDelete}
+			/>
+		</div>
+	);
+}

admin/src/features/configuration/authority.test.tsx

@@ -0,0 +1,222 @@
+import { screen, waitFor, within } from "@testing-library/react";
+import { CONFIG_PATH, DATABASE, MANAGED_FILE, contentArea, renderPage, renderRoute, stubApi } from "./testFixtures";
+
+/**
+ * Authority is three-state, and the difference between the states is the whole
+ * point: an unresolved status is never treated as database mode, and file mode
+ * is a different rendering rather than the same forms with their controls
+ * turned off.
+ */
+
+const NEVER = new Promise<Response>(() => {});
+
+/**
+ * Every button the file-mode configuration content is allowed to contain: the
+ * runtime actions, and the Retry an error surface offers. Anything else is a
+ * mutation control that should not have been rendered at all.
+ */
+const RUNTIME_BUTTONS = ["Update now", "Reload certificates", "Retry"];
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function mutationControls(): Element[] {
+	return [
+		...contentArea().querySelectorAll(
+			'input, textarea, select, [role="combobox"], [role="checkbox"], [contenteditable]',
+		),
+	];
+}
+
+function buttonLabels(): string[] {
+	return [...contentArea().querySelectorAll("button")].map((button) => (button.textContent ?? "").trim());
+}
+
+test("a pending status renders neither form nor definition list on Protection", async () => {
+	stubApi(DATABASE, { responses: { "GET /api/config/status": NEVER } });
+	await renderPage("/configuration/protection", "Protection");
+
+	expect(await screen.findByText(/which configuration source this server obeys/i)).toBeTruthy();
+	expect(mutationControls()).toHaveLength(0);
+	expect(screen.queryByRole("button", { name: "Create" })).toBeNull();
+});
+
+test("a pending status still leaves the runtime actions live (R3-4)", async () => {
+	stubApi(DATABASE, { responses: { "GET /api/config/status": NEVER } });
+	await renderPage("/configuration/system", "System");
+
+	const reload = (await screen.findByRole("button", { name: "Reload certificates" })) as HTMLButtonElement;
+	expect(reload.disabled).toBe(false);
+	// The settings form is not drawn behind it.
+	expect(screen.queryByRole("button", { name: "Save" })).toBeNull();
+});
+
+test("a pending status renders neither form nor definition list on Resolution", async () => {
+	stubApi(DATABASE, { responses: { "GET /api/config/status": NEVER } });
+	await renderPage("/configuration/resolution", "Resolution");
+
+	expect(await screen.findByText(/which configuration source this server obeys/i)).toBeTruthy();
+	expect(mutationControls()).toHaveLength(0);
+	expect(screen.queryByRole("button", { name: "Add upstream" })).toBeNull();
+});
+
+test("a failed status renders the error and a Retry, never editable forms", async () => {
+	stubApi(DATABASE, {
+		responses: { "GET /api/config/status": new Response(JSON.stringify({ error: "gone" }), { status: 404 }) },
+	});
+	await renderPage("/configuration/protection", "Protection");
+
+	await screen.findByText(/cannot say whether a file or the database owns/i);
+	expect(screen.getByRole("button", { name: "Retry" })).toBeTruthy();
+	expect(mutationControls()).toHaveLength(0);
+});
+
+test("a failed status renders the error and a Retry on Resolution too", async () => {
+	stubApi(DATABASE, {
+		responses: { "GET /api/config/status": new Response(JSON.stringify({ error: "gone" }), { status: 404 }) },
+	});
+	await renderPage("/configuration/resolution", "Resolution");
+
+	await screen.findByText(/cannot say whether a file or the database owns/i);
+	expect(screen.getByRole("button", { name: "Retry" })).toBeTruthy();
+	expect(mutationControls()).toHaveLength(0);
+	expect(screen.queryByRole("button", { name: "Add upstream" })).toBeNull();
+});
+
+test("a failed status keeps Update now enabled on the Sources tab", async () => {
+	stubApi(DATABASE, {
+		responses: { "GET /api/config/status": new Response(JSON.stringify({ error: "gone" }), { status: 404 }) },
+	});
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+
+	await screen.findByText(/cannot say whether a file or the database owns/i);
+	const update = screen.getByRole("button", { name: "Update now" }) as HTMLButtonElement;
+	expect(update.disabled).toBe(false);
+});
+
+test("a failed status is announced by the shell on a page that is not configuration", async () => {
+	stubApi(DATABASE, {
+		responses: {
+			"GET /api/config/status": new Response(JSON.stringify({ error: "gone" }), { status: 404 }),
+			"GET /api/stats?period=24h": {
+				period: "24h",
+				since: 0,
+				until: 86400,
+				queries: 0,
+				blocked: 0,
+				clients: 0,
+				avg_response_time_us: null,
+				coverage: { complete: true, available_since: 0 },
+			},
+		},
+	});
+	renderRoute("/overview");
+
+	await waitFor(() => expect(screen.getByText(/file authority and pending restarts cannot be shown/i)).toBeTruthy());
+});
+
+test("database authority renders the editable groups form", async () => {
+	stubApi(DATABASE);
+	await renderPage("/configuration/protection", "Protection");
+
+	expect(await screen.findByRole("button", { name: "Create" })).toBeTruthy();
+	expect(screen.getByLabelText("New group")).toBeTruthy();
+	expect(screen.queryByText(/loaded from/i)).toBeNull();
+});
+
+test("file authority renders definitions with their exact ZON keys, not a form", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/protection", "Protection");
+
+	const note = await screen.findByText(/are loaded from/i);
+	expect(note.textContent).toContain(CONFIG_PATH);
+
+	const detail = await screen.findByText("Safe search");
+	expect(within(detail).getByText("groups[].safe_search")).toBeTruthy();
+	expect(screen.queryByRole("button", { name: "Create" })).toBeNull();
+});
+
+test("file mode: Protection renders zero mutation controls (D12)", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/protection", "Protection");
+	await screen.findByText("groups[].safe_search");
+
+	expect(mutationControls()).toHaveLength(0);
+	for (const label of buttonLabels()) expect(RUNTIME_BUTTONS).toContain(label);
+});
+
+test("file mode: the Sources tab shows the catalogue with its key and only Update now", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+	await screen.findByText("blocklist_sources");
+
+	expect(mutationControls()).toHaveLength(0);
+	expect(buttonLabels()).toEqual(["Update now"]);
+});
+
+test("file mode: the catalogue keeps provenance and both skipped counters", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/protection?tab=sources", "Protection");
+	await screen.findByText("blocklist_sources");
+
+	// Trackers is the suggested source, and the one with skipped lines: hiding
+	// either fact under file authority would hide a parse failure.
+	const row = screen.getByText("Trackers").closest("tr")!;
+	expect(within(row).getByText("Suggested")).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped regex" })).toBeTruthy();
+	expect(screen.getByRole("columnheader", { name: "Skipped unsupported" })).toBeTruthy();
+	const cells = [...row.querySelectorAll("td")].map((cell) => cell.textContent);
+	expect(cells).toContain("3");
+	expect(cells).toContain("4");
+	expect(
+		screen.getByText(/Skipped unsupported lines are syntax nxdns cannot translate into a DNS decision/),
+	).toBeTruthy();
+});
+
+test("file mode: the Resolution upstream pool is a table with no controls", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/resolution", "Resolution");
+	await screen.findByText("upstreams");
+
+	expect(mutationControls()).toHaveLength(0);
+	expect(buttonLabels()).toEqual([]);
+});
+
+test("file mode: the Records tab is a table with no controls", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/resolution?tab=records", "Resolution");
+	await screen.findByText("local_records");
+
+	expect(mutationControls()).toHaveLength(0);
+	expect(buttonLabels()).toEqual([]);
+});
+
+test("file mode: the Forward zones tab is a table with no controls", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/resolution?tab=zones", "Resolution");
+	await screen.findByText("forward_zones");
+
+	expect(mutationControls()).toHaveLength(0);
+	expect(buttonLabels()).toEqual([]);
+});
+
+test("file mode: System renders scalars as definitions and keeps Reload certificates", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/system", "System");
+
+	const retention = await screen.findByText("Retention days");
+	expect(within(retention).getByText("logging.retention_days")).toBeTruthy();
+	expect(mutationControls()).toHaveLength(0);
+	expect(buttonLabels()).toEqual(["Reload certificates"]);
+});
+
+test("file mode: authentication is a derived status with no invented key (D13)", async () => {
+	stubApi(MANAGED_FILE);
+	await renderPage("/configuration/system", "System");
+
+	const auth = await screen.findByText("Authentication");
+	expect(auth.textContent).toBe("Authentication");
+	expect(within(auth).queryByText(/web\.auth_enabled/)).toBeNull();
+	expect(screen.queryByText("web.auth_enabled")).toBeNull();
+});

admin/src/features/configuration/authority.ts

@@ -0,0 +1,49 @@
+import { useQuery } from "@tanstack/react-query";
+import { configStatusQuery } from "@/lib/queries";
+import type { ConfigStatus } from "@/lib/types";
+
+/**
+ * Configuration authority as the UI must treat it: three states, never two.
+ *
+ * `undefined` is not database mode. Until `/api/config/status` answers, the
+ * running process may be file-managed, and a form rendered on that guess
+ * invites edits the server will reject. So a page shows neither an editable
+ * form nor a definition list until the query resolves, and a failed query is
+ * an explicit error with a way to retry.
+ */
+export type Authority =
+	| { state: "pending" }
+	| { state: "failed"; error: unknown; retry: () => void }
+	| { state: "resolved"; status: ConfigStatus };
+
+/**
+ * The running server's configuration status. Every page may call this — it is
+ * the shared `["configStatus"]` key, so one subscription serves them all from
+ * cache.
+ */
+export function useAuthority(): Authority {
+	const query = useQuery(configStatusQuery());
+	if (query.isPending) return { state: "pending" };
+	if (query.isError) {
+		return {
+			state: "failed",
+			error: query.error,
+			retry: () => void query.refetch(),
+		};
+	}
+	return { state: "resolved", status: query.data };
+}
+
+/**
+ * True unless the server has said the database owns the configuration.
+ *
+ * The lock is global and it fails closed: pending, failed and `managed_file`
+ * all read as locked, because only a resolved database authority proves a
+ * configuration mutation can succeed. Runtime actions — pause, update now,
+ * reload certificates, deleting an observed client, login and logout — do not
+ * consult it; they work under every authority.
+ */
+export function useReadOnlyConfig(): boolean {
+	const authority = useAuthority();
+	return !(authority.state === "resolved" && authority.status.authority === "database");
+}

admin/src/features/configuration/routing.test.tsx

@@ -0,0 +1,98 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { createAppRouter } from "@/routes";
+import { validateGroupId, validateProtectionSearch, validateResolutionSearch } from "@/features/configuration/search";
+import { DATABASE, renderPage, stubApi } from "./testFixtures";
+
+/**
+ * The configuration URL is the applied state: which page, which tab, which
+ * group. A view of a page is a link, and the back button walks what the reader
+ * chose rather than what the page corrected on their behalf.
+ */
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+test("the six resource routes are gone, with no alias left behind", () => {
+	const paths = new Set(Object.keys(createAppRouter().routesByPath));
+	for (const gone of ["/groups", "/blocklists", "/rules", "/local-dns", "/upstreams", "/settings"]) {
+		expect(paths.has(gone)).toBe(false);
+	}
+	for (const kept of ["/configuration/protection", "/configuration/resolution", "/configuration/system"]) {
+		expect(paths.has(kept)).toBe(true);
+	}
+	// No landing route either: `/configuration` is not a page.
+	expect(paths.has("/configuration")).toBe(false);
+});
+
+test("an unknown tab falls back to the page default rather than an empty panel", () => {
+	expect(validateProtectionSearch({ tab: "upstreams" }).tab).toBe("groups");
+	expect(validateProtectionSearch({}).tab).toBe("groups");
+	expect(validateResolutionSearch({ tab: "sources" }).tab).toBe("upstreams");
+	expect(validateResolutionSearch({ tab: "zones" }).tab).toBe("zones");
+});
+
+test("a group id is a positive integer or nothing", () => {
+	expect(validateGroupId(3)).toBe(3);
+	expect(validateGroupId(0)).toBeUndefined();
+	expect(validateGroupId(-1)).toBeUndefined();
+	expect(validateGroupId(1.5)).toBeUndefined();
+	expect(validateGroupId("2")).toBeUndefined();
+});
+
+test("an unknown group falls back to the first one and rewrites the URL in place", async () => {
+	stubApi(DATABASE);
+	const router = await renderPage("/configuration/protection?group=99", "Protection");
+
+	await waitFor(() => expect(router.state.location.search.group).toBe(1));
+	await screen.findByRole("heading", { name: "default", level: 2 });
+	// `replace`: the corrected address did not become a place to go back to.
+	expect(router.history.length).toBe(1);
+});
+
+test("selecting a group pushes a history entry the back button walks", async () => {
+	stubApi(DATABASE);
+	const router = await renderPage("/configuration/protection", "Protection");
+	await waitFor(() => expect(router.state.location.search.group).toBe(1));
+
+	fireEvent.click(screen.getByRole("link", { name: "kids" }));
+	await waitFor(() => expect(router.state.location.search.group).toBe(2));
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	act(() => router.history.back());
+	await waitFor(() => expect(router.state.location.search.group).toBe(1));
+});
+
+test("the selected group survives a tab change, and the change is a history entry", async () => {
+	stubApi(DATABASE);
+	const router = await renderPage("/configuration/protection?group=2", "Protection");
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+
+	fireEvent.click(screen.getByRole("tab", { name: "Sources" }));
+	await screen.findByRole("button", { name: "Update now" });
+	expect(router.state.location.search).toEqual({ tab: "sources", group: 2 });
+
+	act(() => router.history.back());
+	await waitFor(() => expect(router.state.location.search.tab).toBe("groups"));
+	expect(router.state.location.search.group).toBe(2);
+	await screen.findByRole("heading", { name: "kids", level: 2 });
+});
+
+test("the Resolution tab is URL state too", async () => {
+	stubApi(DATABASE);
+	const router = await renderPage("/configuration/resolution", "Resolution");
+
+	fireEvent.click(screen.getByRole("tab", { name: "Forward zones" }));
+	await waitFor(() => expect(router.state.location.search.tab).toBe("zones"));
+	await screen.findByRole("button", { name: "Add zone" });
+});
+
+test("the loaders are started, not awaited: the page renders while a collection is in flight", async () => {
+	// Groups never answers. If the loader were awaited the navigation would hang
+	// and neither the heading nor the tabs would ever paint.
+	stubApi(DATABASE, { responses: { "GET /api/groups": new Promise<Response>(() => {}) } });
+	await renderPage("/configuration/protection", "Protection");
+
+	expect(screen.getByRole("tab", { name: "Sources" })).toBeTruthy();
+	expect(await screen.findByText("Loading…")).toBeTruthy();
+});

admin/src/features/configuration/search.ts

@@ -0,0 +1,59 @@
+/**
+ * The configuration pages' URL state, validated as pure functions so each
+ * route's `validateSearch` stays a one-liner and every rejection is testable
+ * without a router.
+ *
+ * A tab that is not one of the page's tabs falls back to that page's default:
+ * a hand-typed `?tab=upstreams` on Protection opens Protection's first tab
+ * rather than an empty panel.
+ */
+
+export const PROTECTION_TABS = ["groups", "sources"] as const;
+export type ProtectionTab = (typeof PROTECTION_TABS)[number];
+
+export const RESOLUTION_TABS = ["upstreams", "records", "zones"] as const;
+export type ResolutionTab = (typeof RESOLUTION_TABS)[number];
+
+/**
+ * Both fields are optional so a link to the page need not spell out a tab it
+ * does not care about — the same shape Overview's `period` uses. Validation
+ * still resolves an unknown tab to the page default, so a *rendered* page
+ * always has one.
+ */
+export interface ProtectionSearch {
+	tab?: ProtectionTab;
+	/**
+	 * The selected group. Absent until the page resolves one, which it then
+	 * writes back so a view of the page is a link.
+	 */
+	group?: number;
+}
+
+export interface ResolutionSearch {
+	tab?: ResolutionTab;
+}
+
+function validateTab<T extends string>(options: readonly T[], value: unknown, fallback: T): T {
+	return options.includes(value as T) ? (value as T) : fallback;
+}
+
+/**
+ * A group row id. Ids are positive integers, so anything else — a fraction, a
+ * string, a zero — is not an id that could ever exist and becomes `undefined`.
+ * An id that is well-formed but unknown is a different case: the page has to
+ * load the groups before it can tell, so it falls back there, not here.
+ */
+export function validateGroupId(value: unknown): number | undefined {
+	return Number.isSafeInteger(value) && (value as number) > 0 ? (value as number) : undefined;
+}
+
+export function validateProtectionSearch(search: Record<string, unknown>): ProtectionSearch {
+	return {
+		tab: validateTab(PROTECTION_TABS, search["tab"], "groups"),
+		group: validateGroupId(search["group"]),
+	};
+}
+
+export function validateResolutionSearch(search: Record<string, unknown>): ResolutionSearch {
+	return { tab: validateTab(RESOLUTION_TABS, search["tab"], "upstreams") };
+}

admin/src/features/configuration/settingsSections.ts

@@ -0,0 +1,132 @@
+import type { Settings } from "@/lib/types";
+
+/**
+ * The settings registry. One list drives both renderings: the editable form
+ * builds a control per field, the file-mode page builds a definition per
+ * field, and neither can drift from the other or from `Settings`.
+ */
+
+export interface FieldDef<S extends keyof Settings> {
+	key: keyof Settings[S] & string;
+	kind: "number" | "text" | "boolean" | readonly string[];
+}
+
+export interface SectionDef<S extends keyof Settings> {
+	section: S;
+	title: string;
+	fields: readonly FieldDef<S>[];
+}
+
+/** Binds each section's field keys to that section's Settings type at definition. */
+function defineSection<S extends keyof Settings>(def: SectionDef<S>): SectionDef<S> {
+	return def;
+}
+
+/** The registry read back as a heterogeneous list, once the per-section binding has been proven. */
+export type AnyFieldDef = { [S in keyof Settings]: FieldDef<S> }[keyof Settings];
+export type AnySectionDef = { [S in keyof Settings]: SectionDef<S> }[keyof Settings];
+
+/**
+ * A section's values as a string-keyed view. The keys are proven against
+ * `Settings[S]` where each section is defined; iterating the heterogeneous
+ * registry loses that correlation, so consumption widens here in one place.
+ */
+export function sectionValues(settings: Settings, section: keyof Settings): Record<string, unknown> {
+	return settings[section] as Record<string, unknown>;
+}
+
+const TLS_FIELDS: readonly FieldDef<"doh_server" | "dot_server">[] = [
+	{ key: "enabled", kind: "boolean" },
+	{ key: "bind", kind: "text" },
+	{ key: "port", kind: "number" },
+	{ key: "cert_path", kind: "text" },
+	{ key: "key_path", kind: "text" },
+];
+
+export const SECTIONS: readonly AnySectionDef[] = [
+	defineSection({
+		section: "upstream",
+		title: "Upstream",
+		fields: [
+			{ key: "attempt_timeout_ms", kind: "number" },
+			{ key: "read_timeout_ms", kind: "number" },
+			{ key: "total_timeout_ms", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "dns",
+		title: "DNS",
+		fields: [
+			{ key: "bind_ipv4", kind: "text" },
+			{ key: "bind_ipv6", kind: "text" },
+			{ key: "port", kind: "number" },
+			{ key: "rate_limit", kind: "number" },
+			{ key: "rate_window_seconds", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "blocking",
+		title: "Blocking",
+		fields: [
+			{ key: "response", kind: ["zero", "nxdomain"] },
+			{ key: "ttl", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "cache",
+		title: "Cache",
+		fields: [
+			{ key: "size", kind: "number" },
+			{ key: "negative_ttl_max", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "web",
+		title: "Web",
+		fields: [
+			{ key: "enabled", kind: "boolean" },
+			{ key: "bind", kind: "text" },
+			{ key: "port", kind: "number" },
+			{ key: "session_ttl_hours", kind: "number" },
+			{ key: "api_rate_limit_per_min", kind: "number" },
+			{ key: "api_localhost_exempt", kind: "boolean" },
+			{ key: "sse_max_connections_per_ip", kind: "number" },
+			{ key: "trusted_proxies", kind: "text" },
+		],
+	}),
+	defineSection({ section: "doh_server", title: "DoH Server", fields: TLS_FIELDS }),
+	defineSection({ section: "dot_server", title: "DoT Server", fields: TLS_FIELDS }),
+	defineSection({ section: "edns", title: "EDNS", fields: [{ key: "ecs_mode", kind: ["strip", "forward"] }] }),
+	defineSection({
+		section: "logging",
+		title: "Logging",
+		fields: [
+			{ key: "level", kind: ["error", "warn", "info", "debug"] },
+			{ key: "retention_days", kind: "number" },
+			{ key: "query_log_buffer_max", kind: "number" },
+			{ key: "query_log_flush_interval_s", kind: "number" },
+			{ key: "hide_domains", kind: "boolean" },
+			{ key: "hide_client_ips", kind: "boolean" },
+			{ key: "output", kind: ["stderr", "syslog", "file"] },
+			{ key: "file_path", kind: "text" },
+			{ key: "max_size_mb", kind: "number" },
+			{ key: "max_files", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "disk",
+		title: "Disk",
+		fields: [
+			{ key: "min_free_mb", kind: "number" },
+			{ key: "warn_free_mb", kind: "number" },
+		],
+	}),
+	defineSection({
+		section: "blocklist_update",
+		title: "Blocklist Update",
+		fields: [
+			{ key: "enabled", kind: "boolean" },
+			{ key: "interval_hours", kind: "number" },
+		],
+	}),
+];

admin/src/features/configuration/styles.ts

@@ -0,0 +1,142 @@
+/**
+ * The vocabulary the three configuration pages share. Both renderings — the
+ * editable forms and the file-mode definition lists — sit on the same panels
+ * and headings, so the page keeps its shape when authority changes.
+ */
+
+import * as stylex from "@stylexjs/stylex";
+import { colors } from "@/ui/tokens.stylex";
+
+export const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.25rem",
+		maxWidth: "48rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	panel: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+	panelHeading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	/** The collection's own key in the configuration file, beside its heading. */
+	panelKey: {
+		marginLeft: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 400,
+		color: colors.textMuted,
+	},
+	note: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	/** The file-mode page note: where edits happen, and what applies them. */
+	fileNote: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceHover,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textSecondary,
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	empty: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
+	/** Master/detail: the group list beside the selected group. */
+	split: {
+		marginTop: "1rem",
+		display: "grid",
+		gap: "1rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 900px)": "16rem 1fr",
+		},
+		alignItems: "start",
+	},
+	masterList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	masterLink: {
+		display: "block",
+		borderRadius: "0.25rem",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		textDecorationLine: "none",
+		color: colors.textSecondary,
+		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
+	},
+	masterLinkActive: {
+		backgroundColor: colors.surfaceHover,
+		color: colors.text,
+		fontWeight: 500,
+	},
+	actionRow: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	success: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+	},
+	/** The authority error state: no forms, no definition list, one way forward. */
+	blocked: {
+		marginTop: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		padding: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	pending: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	restartTag: {
+		marginLeft: "0.375rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});

admin/src/features/configuration/testFixtures.tsx

@@ -0,0 +1,264 @@
+/**
+ * The fixtures and the stubbed API the configuration tests share.
+ *
+ * All three pages read the same handful of collections plus
+ * `/api/config/status`, so a per-file copy of the stub would be five copies of
+ * one contract drifting apart. Test-only: nothing in `src` imports it, so it
+ * never reaches the bundle.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { health } from "@/lib/healthFixture";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import type { ConfigStatus, Settings } from "@/lib/types";
+
+export const CONFIG_PATH = "/etc/nxdns/config.zon";
+export const RECONCILED_AT = 1754899200;
+
+export const DATABASE: ConfigStatus = {
+	authority: "database",
+	path: null,
+	reconciled_at: null,
+	restart_pending: false,
+};
+
+export const MANAGED_FILE: ConfigStatus = {
+	authority: "managed_file",
+	path: CONFIG_PATH,
+	reconciled_at: RECONCILED_AT,
+	restart_pending: false,
+};
+
+export function baseSettings(): Settings {
+	return {
+		upstream: { attempt_timeout_ms: 2500, read_timeout_ms: 3000, total_timeout_ms: 5000 },
+		dns: { bind_ipv4: "0.0.0.0", bind_ipv6: "::", port: 53, rate_limit: 100, rate_window_seconds: 60 },
+		blocking: { response: "zero", ttl: 300 },
+		cache: { size: 10000, negative_ttl_max: 300 },
+		web: {
+			enabled: true,
+			bind: "127.0.0.1",
+			port: 8080,
+			session_ttl_hours: 24,
+			api_rate_limit_per_min: 60,
+			api_localhost_exempt: true,
+			sse_max_connections_per_ip: 2,
+			trusted_proxies: "",
+			auth_enabled: true,
+		},
+		doh_server: { enabled: false, bind: "0.0.0.0", port: 443, cert_path: "", key_path: "" },
+		dot_server: { enabled: false, bind: "0.0.0.0", port: 853, cert_path: "", key_path: "" },
+		edns: { ecs_mode: "strip" },
+		logging: {
+			level: "info",
+			retention_days: 30,
+			query_log_buffer_max: 10000,
+			query_log_flush_interval_s: 60,
+			hide_domains: false,
+			hide_client_ips: false,
+			output: "stderr",
+			file_path: "",
+			max_size_mb: 50,
+			max_files: 3,
+		},
+		disk: { min_free_mb: 100, warn_free_mb: 500 },
+		blocklist_update: { enabled: true, interval_hours: 24 },
+	};
+}
+
+export const GROUPS = [
+	{ id: 1, name: "default", safe_search: false },
+	{ id: 2, name: "kids", safe_search: true },
+];
+
+export const BLOCKLISTS = [
+	{
+		id: 1,
+		url: "https://example.com/ads.txt",
+		name: "Ads",
+		enabled: true,
+		is_suggested: false,
+		last_updated: null,
+		domain_count: 100,
+		wildcard_count: 2,
+		exception_count: 1,
+		skipped_regex_count: 0,
+		skipped_unsupported_count: 0,
+		checksum: null,
+	},
+	{
+		id: 2,
+		url: "https://example.com/trackers.txt",
+		name: "Trackers",
+		enabled: false,
+		is_suggested: true,
+		last_updated: 1700000000,
+		domain_count: 50,
+		wildcard_count: 0,
+		exception_count: 0,
+		skipped_regex_count: 3,
+		skipped_unsupported_count: 4,
+		checksum: null,
+	},
+];
+
+export const RULES = [
+	{
+		id: 1,
+		group_id: 1,
+		group: "default",
+		pattern: "ads.example.com",
+		kind: "exact",
+		action: "block",
+		created_at: 1700000000,
+	},
+	{
+		id: 2,
+		group_id: 2,
+		group: "kids",
+		pattern: "*.social.example",
+		kind: "wildcard",
+		action: "block",
+		created_at: 1700000100,
+	},
+];
+
+export const CLIENTS = [
+	{
+		id: 1,
+		ip: "192.168.1.10",
+		name: "laptop",
+		learned_name: "",
+		group_id: 1,
+		group: "default",
+		hand_edited: true,
+		first_seen: 1700000000,
+		last_seen: 1700003600,
+	},
+	{
+		id: 2,
+		ip: "192.168.1.11",
+		name: "",
+		learned_name: "tablet.lan",
+		group_id: 2,
+		group: "kids",
+		hand_edited: false,
+		first_seen: 1700000000,
+		last_seen: 1700007200,
+	},
+];
+
+export const UPSTREAMS = [
+	{ id: 1, url: "udp://1.1.1.1:53", priority: 100, enabled: true, tls_name: "" },
+	{ id: 2, url: "tls://9.9.9.9:853", priority: 200, enabled: false, tls_name: "dns.quad9.net" },
+];
+
+export const LOCAL_RECORDS = [{ id: 1, name: "nas.lan.home", rtype: "A", value: "192.168.1.5", ttl: 300 }];
+
+export const FORWARD_ZONES = [{ id: 1, zone: "lan.home", resolver: "udp://192.168.1.1:53" }];
+
+export interface Call {
+	url: string;
+	method: string;
+	body: unknown;
+}
+
+export interface StubOptions {
+	/**
+	 * Overrides and additions, keyed `"GET /api/x"`. A `Response` is used
+	 * verbatim; a function is called per request, so a test can change what the
+	 * server says between two reads of the same endpoint.
+	 */
+	responses?: Record<string, unknown>;
+	/**
+	 * First refusal on every non-GET; return null to fall through to the default
+	 * echo. An unsettled promise holds the mutation in flight, which is how a
+	 * test observes a pending control.
+	 */
+	onWrite?: (call: Call) => Response | Promise<Response> | null;
+}
+
+function defaultResponses(status: ConfigStatus): Record<string, unknown> {
+	return {
+		"GET /api/config/status": status,
+		"GET /api/health": health(),
+		"GET /api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+		"GET /api/groups": { groups: GROUPS },
+		"GET /api/groups/1/sources": { source_ids: [1] },
+		"GET /api/groups/2/sources": { source_ids: [] },
+		"GET /api/blocklists": { blocklists: BLOCKLISTS },
+		"GET /api/rules": { rules: RULES },
+		"GET /api/clients": { clients: CLIENTS },
+		"GET /api/client-prefixes": { client_prefixes: [] },
+		"GET /api/upstreams": { upstreams: UPSTREAMS },
+		"GET /api/local-records": { local_records: LOCAL_RECORDS },
+		"GET /api/forward-zones": { forward_zones: FORWARD_ZONES },
+		"GET /api/settings": { settings: baseSettings(), restart_required: ["dns.port", "web.port"] },
+	};
+}
+
+function json(payload: unknown, status = 200): Response {
+	return new Response(JSON.stringify(payload), { status, headers: { "content-type": "application/json" } });
+}
+
+/** Installs the stub and returns the list every non-GET request is appended to. */
+export function stubApi(status: ConfigStatus = DATABASE, options: StubOptions = {}): Call[] {
+	const map = { ...defaultResponses(status), ...options.responses };
+	const calls: Call[] = [];
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+			const url = String(input);
+			const method = init?.method ?? "GET";
+			const body = typeof init?.body === "string" ? JSON.parse(init.body) : undefined;
+			const key = `${method} ${url}`;
+			const configured = map[key];
+			// A promise is handed back unsettled on purpose: it is how a test holds a
+			// query in its pending state for as long as it needs to.
+			if (configured instanceof Promise) return configured;
+			if (configured instanceof Response) return configured.clone();
+			if (typeof configured === "function") return json((configured as () => unknown)());
+			if (method !== "GET") {
+				calls.push({ url, method, body });
+				const override = options.onWrite?.({ url, method, body });
+				if (override !== null && override !== undefined) return override;
+				if (configured !== undefined) return json(configured);
+				if (method === "DELETE") return new Response(null, { status: 204 });
+				return json(body ?? {});
+			}
+			if (configured === undefined) return json({ error: `not stubbed: ${key}` }, 404);
+			return json(configured);
+		}),
+	);
+	return calls;
+}
+
+export function renderRoute(route: string) {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [route] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return router;
+}
+
+export async function renderPage(route: string, heading: string) {
+	const router = renderRoute(route);
+	await screen.findByRole("heading", { name: heading, level: 1 });
+	return router;
+}
+
+/** The configuration page's own content, excluding the shell chrome around it. */
+export function contentArea(): HTMLElement {
+	const main = document.querySelector("main");
+	if (main === null) throw new Error("no main element");
+	return main;
+}

admin/src/features/diagnostics/DiagnosticDetailPage.test.tsx

@@ -0,0 +1,223 @@
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import { DIAGNOSTIC_CODES, type DiagnosticEvent } from "@/lib/types";
+import { health } from "@/lib/healthFixture";
+import { EVENT_COPY } from "./eventCopy";
+
+const NOW_S = Math.floor(Date.now() / 1000);
+
+function event(overrides: Partial<DiagnosticEvent> = {}): DiagnosticEvent {
+	return {
+		id: 42,
+		code: "blocklist.refresh",
+		component: "blocklist",
+		subject: "StevenBlack",
+		severity: "warning",
+		first_seen: NOW_S - 7200,
+		last_seen: NOW_S - 600,
+		occurrences: 4,
+		resolved_at: null,
+		detail: "download failed: ConnectionTimedOut",
+		...overrides,
+	};
+}
+
+/** A 204: what `DELETE /api/diagnostics/{id}` answers on a purge. */
+const NO_CONTENT = Symbol("204");
+
+let responses: Record<string, unknown>;
+let requested: string[];
+
+beforeEach(() => {
+	requested = [];
+	responses = {
+		"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+		// The shell reads health for the Diagnostics nav badge on every route.
+		"/api/health": health(),
+	};
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: { method?: string }) => {
+			const url = String(input);
+			const method = init?.method ?? "GET";
+			const key = method === "GET" ? url : `${method} ${url}`;
+			requested.push(key);
+			const payload = responses[key];
+			if (payload === undefined)
+				return new Response(JSON.stringify({ error: "no such event" }), {
+					status: 404,
+					headers: { "content-type": "application/json" },
+				});
+			if (payload === NO_CONTENT) return new Response(null, { status: 204 });
+			return new Response(JSON.stringify(payload), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+/**
+ * `retry` is off in the failure test: the shared client backs 5xx off for
+ * seconds, which the render assertions would sit through for nothing.
+ */
+function renderDetail(id: number, { retry = true } = {}) {
+	const queryClient = createQueryClient();
+	if (!retry) {
+		const defaults = queryClient.getDefaultOptions();
+		queryClient.setDefaultOptions({ ...defaults, queries: { ...defaults.queries, retry: false } });
+	}
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [`/diagnostics/${id}`] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return router;
+}
+
+test("an open episode shows its facts, its copy and the error the server sent", async () => {
+	responses["/api/diagnostics/42"] = event();
+	renderDetail(42);
+
+	await screen.findByRole("heading", { name: "Blocklist source failed to update" });
+	expect(screen.getByText("Warning")).toBeTruthy();
+	expect(screen.getByText("StevenBlack")).toBeTruthy();
+	expect(screen.getByText("Active for 2h")).toBeTruthy();
+	expect(screen.getByText("Not yet — still failing")).toBeTruthy();
+	expect(screen.getByText("4")).toBeTruthy();
+	expect(screen.getByText("blocklist.refresh")).toBeTruthy();
+	expect(screen.getByText(EVENT_COPY["blocklist.refresh"].impact)).toBeTruthy();
+	expect(screen.getByText(EVENT_COPY["blocklist.refresh"].remediation)).toBeTruthy();
+	expect(screen.getByText("download failed: ConnectionTimedOut")).toBeTruthy();
+	expect(screen.getByRole("link", { name: "Go to Blocklist sources" }).getAttribute("href")).toBe(
+		"/configuration/protection?tab=sources",
+	);
+});
+
+test("a resolved episode states how long it lasted, not how long it has run", async () => {
+	responses["/api/diagnostics/7"] = event({ id: 7, resolved_at: NOW_S - 3600 });
+	renderDetail(7);
+
+	await screen.findByRole("heading", { name: "Blocklist source failed to update" });
+	expect(screen.getByText("Resolved after 1h")).toBeTruthy();
+	expect(screen.queryByText("Not yet — still failing")).toBeNull();
+});
+
+test("an open episode offers no purge", async () => {
+	responses["/api/diagnostics/42"] = event();
+	renderDetail(42);
+
+	await screen.findByRole("heading", { name: "Blocklist source failed to update" });
+	expect(screen.queryByRole("button", { name: "Purge" })).toBeNull();
+});
+
+test("purging a resolved episode asks first, then returns to the list", async () => {
+	responses["/api/diagnostics/7"] = event({ id: 7, resolved_at: NOW_S - 3600 });
+	responses["DELETE /api/diagnostics/7"] = NO_CONTENT;
+	responses["/api/diagnostics?state=active"] = { events: [], next_before: null, active: { warnings: 0, errors: 0 } };
+	responses["/api/diagnostics?state=resolved"] = {
+		events: [],
+		next_before: null,
+		active: { warnings: 0, errors: 0 },
+	};
+	const router = renderDetail(7);
+
+	await screen.findByRole("heading", { name: "Blocklist source failed to update" });
+	fireEvent.click(screen.getByRole("button", { name: "Purge" }));
+
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain("Purge this resolved event? Its history is gone for good.");
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	expect(requested).not.toContain("DELETE /api/diagnostics/7");
+
+	fireEvent.click(screen.getByRole("button", { name: "Purge" }));
+	fireEvent.click(within(await screen.findByRole("alertdialog")).getByRole("button", { name: "Purge" }));
+
+	await waitFor(() => expect(requested).toContain("DELETE /api/diagnostics/7"));
+	// The row it was showing no longer exists, so the page it navigates to is
+	// the list rather than a 404 of its own.
+	await waitFor(() => expect(router.state.location.pathname).toBe("/diagnostics"));
+});
+
+test("a refused purge stays on the event and shows why", async () => {
+	responses["/api/diagnostics/7"] = event({ id: 7, resolved_at: NOW_S - 3600 });
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: { method?: string }) => {
+			if (init?.method === "DELETE")
+				return new Response(JSON.stringify({ error: "the event is still active" }), {
+					status: 409,
+					headers: { "content-type": "application/json" },
+				});
+			return new Response(JSON.stringify(responses[String(input)] ?? {}), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+	const router = renderDetail(7, { retry: false });
+
+	await screen.findByRole("heading", { name: "Blocklist source failed to update" });
+	fireEvent.click(screen.getByRole("button", { name: "Purge" }));
+	fireEvent.click(within(await screen.findByRole("alertdialog")).getByRole("button", { name: "Purge" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("the event is still active");
+	expect(router.state.location.pathname).toBe("/diagnostics/7");
+});
+
+test("every code renders its own title, impact and remediation", async () => {
+	for (const [index, code] of DIAGNOSTIC_CODES.entries()) {
+		const id = 100 + index;
+		responses[`/api/diagnostics/${id}`] = event({ id, code, component: code.slice(0, code.indexOf(".")) });
+		renderDetail(id);
+
+		const copy = EVENT_COPY[code];
+		await screen.findByRole("heading", { name: copy.title });
+		expect(screen.getByText(copy.impact), code).toBeTruthy();
+		expect(screen.getByText(copy.remediation), code).toBeTruthy();
+		screen.getByText(code);
+		cleanup();
+	}
+});
+
+test("an event retention has removed shows the server's message, not an empty page", async () => {
+	renderDetail(999);
+	await screen.findByText("no such event");
+	expect(screen.getByRole("link", { name: "← All diagnostics" })).toBeTruthy();
+});
+
+test("an unavailable store reports the failure instead of loading forever", async () => {
+	responses["/api/diagnostics/42"] = event();
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL) =>
+			String(input).startsWith("/api/diagnostics/")
+				? new Response(JSON.stringify({ error: "store unavailable" }), {
+						status: 503,
+						headers: { "content-type": "application/json" },
+					})
+				: new Response(JSON.stringify(responses[String(input)] ?? {}), {
+						status: 200,
+						headers: { "content-type": "application/json" },
+					}),
+		),
+	);
+	renderDetail(42, { retry: false });
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("The server is starting or degraded.");
+	expect(screen.queryByText("Loading event…")).toBeNull();
+	expect(screen.getByRole("link", { name: "← All diagnostics" })).toBeTruthy();
+});

admin/src/features/diagnostics/DiagnosticDetailPage.tsx

@@ -0,0 +1,244 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import * as stylex from "@stylexjs/stylex";
+import InlineError from "@/lib/InlineError";
+import { formatDuration, formatTime } from "@/lib/format";
+import { diagnosticPurgeMutation, diagnosticQuery } from "@/lib/queries";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import SeverityBadge from "./SeverityBadge";
+import { componentLabel, copyFor } from "./eventCopy";
+
+const styles = stylex.create({
+	back: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+		textDecorationLine: "none",
+	},
+	headingRow: {
+		marginTop: "0.5rem",
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: "0.5rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	purgeAction: {
+		marginInlineStart: "auto",
+	},
+	subject: {
+		marginTop: "0.25rem",
+		color: colors.textSecondary,
+		wordBreak: "break-all",
+	},
+	panel: {
+		marginTop: "1rem",
+		maxWidth: "48rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		padding: "1rem",
+	},
+	facts: {
+		display: "grid",
+		gap: "0.5rem 1rem",
+		gridTemplateColumns: {
+			default: "auto",
+			"@media (min-width: 640px)": "max-content 1fr",
+		},
+		margin: 0,
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	term: {
+		color: colors.textMuted,
+	},
+	value: {
+		margin: 0,
+	},
+	sectionHeading: {
+		marginTop: "1.5rem",
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	prose: {
+		marginTop: "0.5rem",
+		maxWidth: "48rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.5rem",
+	},
+	detail: {
+		marginTop: "0.5rem",
+		maxWidth: "48rem",
+		overflowX: "auto",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "0.75rem",
+		fontSize: "0.8125rem",
+		lineHeight: "1.25rem",
+		whiteSpace: "pre-wrap",
+		wordBreak: "break-all",
+	},
+	links: {
+		marginTop: "1rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	link: {
+		color: colors.primaryOnSurface,
+	},
+	loading: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+});
+
+export default function DiagnosticDetailPage() {
+	const { id } = useParams({ from: "/shell/diagnostics/$id" });
+	const eventId = Number(id);
+	const { data, error, isPending, refetch } = useQuery(diagnosticQuery(eventId));
+
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const purge = useMutation(diagnosticPurgeMutation(queryClient));
+	const [confirming, setConfirming] = useState(false);
+
+	function confirmPurge() {
+		setConfirming(false);
+		// The row this page is about is gone, so staying here would show the
+		// 404 the purge itself caused.
+		purge.mutate(eventId, { onSuccess: () => void navigate({ to: "/diagnostics" }) });
+	}
+
+	if (isPending) {
+		return (
+			<p {...stylex.props(styles.loading, shared.pulse)} role="status">
+				Loading event…
+			</p>
+		);
+	}
+	if (data === undefined) {
+		return (
+			<section>
+				<Link to="/diagnostics" {...stylex.props(styles.back, shared.focusRing)}>
+					← All diagnostics
+				</Link>
+				<InlineError error={error} onRetry={() => void refetch()} />
+			</section>
+		);
+	}
+
+	const copy = copyFor(data.code);
+	const resolvedAt = data.resolved_at;
+	const span = (resolvedAt ?? Math.floor(Date.now() / 1000)) - data.first_seen;
+
+	return (
+		<section>
+			<Link to="/diagnostics" {...stylex.props(styles.back, shared.focusRing)}>
+				← All diagnostics
+			</Link>
+			<div {...stylex.props(styles.headingRow)}>
+				<h1 {...stylex.props(styles.heading)}>{copy.title}</h1>
+				<SeverityBadge severity={data.severity} />
+				{/* Only history can be purged: an open episode is the current state of the box. */}
+				{resolvedAt !== null && (
+					<button
+						type="button"
+						onClick={() => setConfirming(true)}
+						disabled={purge.isPending}
+						{...stylex.props(styles.purgeAction, shared.dangerLinkButton, shared.focusRing)}
+					>
+						Purge
+					</button>
+				)}
+			</div>
+			<p {...stylex.props(styles.subject)}>{data.subject}</p>
+			<InlineError error={purge.error} />
+
+			<div {...stylex.props(styles.panel)}>
+				<dl {...stylex.props(styles.facts)}>
+					<dt {...stylex.props(styles.term)}>State</dt>
+					<dd {...stylex.props(styles.value)}>
+						{resolvedAt === null
+							? `Active for ${formatDuration(span)}`
+							: `Resolved after ${formatDuration(span)}`}
+					</dd>
+					<dt {...stylex.props(styles.term)}>First seen</dt>
+					<dd {...stylex.props(styles.value)}>{formatTime(data.first_seen)}</dd>
+					<dt {...stylex.props(styles.term)}>Last seen</dt>
+					<dd {...stylex.props(styles.value)}>{formatTime(data.last_seen)}</dd>
+					<dt {...stylex.props(styles.term)}>Occurrences</dt>
+					<dd {...stylex.props(styles.value, shared.tabularNums)}>{data.occurrences}</dd>
+					<dt {...stylex.props(styles.term)}>Resolved</dt>
+					<dd {...stylex.props(styles.value)}>
+						{data.resolved_at === null ? "Not yet — still failing" : formatTime(data.resolved_at)}
+					</dd>
+					<dt {...stylex.props(styles.term)}>Component</dt>
+					<dd {...stylex.props(styles.value)}>{componentLabel(data.component)}</dd>
+					<dt {...stylex.props(styles.term)}>Code</dt>
+					<dd {...stylex.props(styles.value, shared.mono)}>{data.code}</dd>
+				</dl>
+			</div>
+
+			<h2 {...stylex.props(styles.sectionHeading)}>Impact</h2>
+			<p {...stylex.props(styles.prose)}>{copy.impact}</p>
+
+			<h2 {...stylex.props(styles.sectionHeading)}>What to do</h2>
+			<p {...stylex.props(styles.prose)}>{copy.remediation}</p>
+
+			<h2 {...stylex.props(styles.sectionHeading)}>Last error</h2>
+			{data.detail === "" ? (
+				<p {...stylex.props(styles.prose)}>The server recorded no error text for this event.</p>
+			) : (
+				<pre {...stylex.props(styles.detail, shared.mono)}>{data.detail}</pre>
+			)}
+
+			{copy.link !== undefined && (
+				<p {...stylex.props(styles.links)}>
+					{copy.link.to === "/configuration/protection" ? (
+						<Link
+							to="/configuration/protection"
+							search={{ tab: "sources" }}
+							{...stylex.props(styles.link, shared.focusRing)}
+						>
+							Go to {copy.link.label}
+						</Link>
+					) : copy.link.to === "/configuration/resolution" ? (
+						<Link
+							to="/configuration/resolution"
+							search={{ tab: "upstreams" }}
+							{...stylex.props(styles.link, shared.focusRing)}
+						>
+							Go to {copy.link.label}
+						</Link>
+					) : (
+						<Link to={copy.link.to} {...stylex.props(styles.link, shared.focusRing)}>
+							Go to {copy.link.label}
+						</Link>
+					)}
+				</p>
+			)}
+
+			<ConfirmDialog
+				isOpen={confirming}
+				title="Purge event"
+				message="Purge this resolved event? Its history is gone for good."
+				confirmLabel="Purge"
+				onConfirm={confirmPurge}
+				onCancel={() => setConfirming(false)}
+			/>
+		</section>
+	);
+}

admin/src/features/diagnostics/DiagnosticsPage.test.tsx

@@ -0,0 +1,378 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+import { health } from "@/lib/healthFixture";
+import type { DiagnosticEvent, DiagnosticsPage } from "@/lib/types";
+
+// Ages are rendered against the wall clock, so the fixtures are anchored to it
+// rather than to a frozen instant: faking time here would fight the query
+// client's own timers for no gain.
+const NOW_S = Math.floor(Date.now() / 1000);
+
+function event(id: number, overrides: Partial<DiagnosticEvent> = {}): DiagnosticEvent {
+	return {
+		id,
+		code: "blocklist.refresh",
+		component: "blocklist",
+		subject: "StevenBlack",
+		severity: "warning",
+		first_seen: NOW_S - 3600,
+		last_seen: NOW_S - 300,
+		occurrences: 3,
+		resolved_at: null,
+		detail: "download failed: ConnectionTimedOut",
+		...overrides,
+	};
+}
+
+function page(events: DiagnosticEvent[], nextBefore: number | null = null): DiagnosticsPage {
+	return { events, next_before: nextBefore, active: { warnings: 1, errors: 1 } };
+}
+
+const ACTIVE = page([
+	event(42),
+	event(41, {
+		code: "upstream.exchange",
+		component: "upstream",
+		subject: "tls://dns.example:853",
+		severity: "error",
+		occurrences: 1,
+	}),
+]);
+
+const RESOLVED = page([
+	event(30, { code: "disk.space", component: "disk", subject: "data", resolved_at: NOW_S - 7200 }),
+]);
+
+/** A stubbed response that carries a non-200 status instead of a payload. */
+class Failure {
+	constructor(
+		readonly status: number,
+		readonly body: unknown,
+	) {}
+}
+
+function fail(status: number, message: string): Failure {
+	return new Failure(status, { error: message });
+}
+
+/** A 204: what `DELETE /api/diagnostics/{id}` answers on a purge. */
+const NO_CONTENT = Symbol("204");
+
+let responses: Record<string, unknown>;
+let requested: string[];
+
+beforeEach(() => {
+	requested = [];
+	responses = {
+		"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+		// The health strip at the top of the page; quiet on a healthy box, which is
+		// what every test below wants it to be.
+		"/api/health": health(),
+		"/api/diagnostics?state=active": ACTIVE,
+		"/api/diagnostics?state=resolved": RESOLVED,
+	};
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: { method?: string }) => {
+			const url = String(input);
+			const method = init?.method ?? "GET";
+			// Reads stay keyed by url alone, so the assertions below read as the
+			// request line they are; writes carry their method.
+			const key = method === "GET" ? url : `${method} ${url}`;
+			requested.push(key);
+			const payload = responses[key];
+			if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+			if (payload === NO_CONTENT) return new Response(null, { status: 204 });
+			if (payload instanceof Failure) {
+				return new Response(JSON.stringify(payload.body), {
+					status: payload.status,
+					headers: { "content-type": "application/json" },
+				});
+			}
+			return new Response(JSON.stringify(payload), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+/**
+ * `retry` is off in the failure tests: the shared client backs 5xx off for
+ * seconds, which the render assertions would sit through for nothing.
+ */
+function renderRoute(path = "/diagnostics", { retry = true } = {}) {
+	const queryClient = createQueryClient();
+	if (!retry) {
+		const defaults = queryClient.getDefaultOptions();
+		queryClient.setDefaultOptions({ ...defaults, queries: { ...defaults.queries, retry: false } });
+	}
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [path] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	return router;
+}
+
+/** A RAC Select names its trigger with the current value and then the label. */
+function trigger(label: string): HTMLElement {
+	return screen.getByRole("button", { name: new RegExp(`${label}$`) });
+}
+
+async function pick(label: string, option: string) {
+	fireEvent.click(trigger(label));
+	fireEvent.click(await screen.findByRole("option", { name: option }));
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+}
+
+test("active episodes come first, each with its title, subject, age and count", async () => {
+	renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	const active = screen.getByText("Blocklist source failed to update").closest("li")!;
+	expect(within(active).getByText("Warning")).toBeTruthy();
+	expect(within(active).getByText("StevenBlack")).toBeTruthy();
+	expect(within(active).getByText(/Active for 1h · 3 occurrences/)).toBeTruthy();
+
+	const failing = screen.getByText("Upstream failing").closest("li")!;
+	expect(within(failing).getByText("Error")).toBeTruthy();
+	expect(within(failing).getByText(/1 occurrence(?!s)/)).toBeTruthy();
+
+	// The resolved history is a separate section, below the active list.
+	const table = within(screen.getByRole("table"));
+	expect(table.getByText("Disk space low")).toBeTruthy();
+	expect(screen.getByText(/Showing 1 resolved entry — end of history/)).toBeTruthy();
+});
+
+test("nothing open reads as good news, not as a broken page", async () => {
+	responses["/api/diagnostics?state=active"] = page([]);
+	renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	const healthy = await screen.findByText("No active operational issues.");
+	expect(healthy.getAttribute("role")).toBe("status");
+	// Quiet: no alert anywhere on the page, and no empty table standing in.
+	expect(screen.queryByRole("alert")).toBeNull();
+});
+
+test("a filter lands in the url and refetches both sections through it", async () => {
+	responses["/api/diagnostics?severity=error&state=active"] = page([
+		event(41, { code: "upstream.exchange", component: "upstream", severity: "error" }),
+	]);
+	responses["/api/diagnostics?severity=error&state=resolved"] = page([]);
+	const router = renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	await pick("Severity", "Errors");
+
+	await waitFor(() => expect(router.state.location.search).toEqual({ severity: "error" }));
+	await waitFor(() => expect(screen.queryByText("Blocklist source failed to update")).toBeNull());
+	expect(requested).toContain("/api/diagnostics?severity=error&state=active");
+	expect(requested).toContain("/api/diagnostics?severity=error&state=resolved");
+});
+
+test("the state filter hides the section it excludes", async () => {
+	const router = renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	await pick("Show", "Active only");
+
+	await waitFor(() => expect(router.state.location.search).toEqual({ state: "active" }));
+	expect(screen.queryByRole("heading", { name: "Resolved" })).toBeNull();
+	expect(screen.getByRole("heading", { name: "Active" })).toBeTruthy();
+});
+
+test("a url written by hand starts on the filters it names", async () => {
+	responses["/api/diagnostics?component=disk&state=resolved"] = RESOLVED;
+	renderRoute("/diagnostics?state=resolved&component=disk");
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	await screen.findByText("Disk space low");
+	expect(screen.queryByRole("heading", { name: "Active" })).toBeNull();
+	expect(requested).toContain("/api/diagnostics?component=disk&state=resolved");
+});
+
+test("load more appends the next page of resolved history", async () => {
+	responses["/api/diagnostics?state=resolved"] = page(
+		[event(30, { code: "disk.space", component: "disk", subject: "data", resolved_at: NOW_S - 7200 })],
+		30,
+	);
+	responses["/api/diagnostics?state=resolved&before=30"] = page([
+		event(12, {
+			code: "certificate.reload",
+			component: "certificate",
+			subject: "doh",
+			resolved_at: NOW_S - 90_000,
+		}),
+	]);
+	renderRoute();
+	await screen.findByText("Disk space low");
+
+	fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+
+	await screen.findByText("TLS certificate reload failed");
+	expect(screen.getByText(/Showing 2 resolved entries — end of history/)).toBeTruthy();
+});
+
+test("an unavailable store reports the failure instead of loading forever", async () => {
+	responses["/api/diagnostics?state=active"] = fail(503, "store unavailable");
+	renderRoute("/diagnostics", { retry: false });
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("The server is starting or degraded.");
+	expect(screen.queryByText("Loading diagnostics…")).toBeNull();
+	// The resolved section answered, so it still renders its own history.
+	expect(screen.getByText("Disk space low")).toBeTruthy();
+});
+
+test("a failed history query reports the failure and retries on demand", async () => {
+	responses["/api/diagnostics?state=resolved"] = fail(500, "diagnostics store read failed");
+	renderRoute("/diagnostics", { retry: false });
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("diagnostics store read failed");
+	expect(screen.queryByText("Loading history…")).toBeNull();
+
+	responses["/api/diagnostics?state=resolved"] = RESOLVED;
+	fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+
+	await screen.findByText("Disk space low");
+	expect(screen.queryByRole("alert")).toBeNull();
+});
+
+test("only the resolved history offers a purge", async () => {
+	renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	// An episode still failing is the state of the box, not history: no purge
+	// affordance anywhere on its card.
+	const active = (await screen.findByText("Blocklist source failed to update")).closest("li")!;
+	expect(within(active).queryByRole("button", { name: "Purge" })).toBeNull();
+
+	const row = screen.getByText("Disk space low").closest("tr")!;
+	expect(within(row).getByRole("button", { name: "Purge" })).toBeTruthy();
+	expect(screen.getByRole("button", { name: "Purge all resolved" })).toBeTruthy();
+});
+
+test("with no resolved history there is nothing to purge in bulk", async () => {
+	responses["/api/diagnostics?state=resolved"] = page([]);
+	renderRoute();
+	await screen.findByRole("heading", { name: "Diagnostics" });
+
+	await screen.findByText("Nothing has failed and recovered in the retained window.");
+	expect(screen.queryByRole("button", { name: "Purge all resolved" })).toBeNull();
+});
+
+test("purging one row asks first, then sends the DELETE and refetches the lists", async () => {
+	responses["DELETE /api/diagnostics/30"] = NO_CONTENT;
+	renderRoute();
+	await screen.findByText("Disk space low");
+
+	fireEvent.click(within(screen.getByText("Disk space low").closest("tr")!).getByRole("button", { name: "Purge" }));
+
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain("Purge this resolved event? Its history is gone for good.");
+	fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+	expect(requested).not.toContain("DELETE /api/diagnostics/30");
+
+	fireEvent.click(within(screen.getByText("Disk space low").closest("tr")!).getByRole("button", { name: "Purge" }));
+	fireEvent.click(within(await screen.findByRole("alertdialog")).getByRole("button", { name: "Purge" }));
+
+	await waitFor(() => expect(requested).toContain("DELETE /api/diagnostics/30"));
+	// The invalidation covers both sections: the page the row left and the
+	// active list, whose `active` counts come from the same table.
+	await waitFor(() =>
+		expect(requested.filter((url) => url === "/api/diagnostics?state=resolved").length).toBeGreaterThan(1),
+	);
+	await waitFor(() =>
+		expect(requested.filter((url) => url === "/api/diagnostics?state=active").length).toBeGreaterThan(1),
+	);
+});
+
+test("purging the whole history asks first and sends one DELETE", async () => {
+	responses["DELETE /api/diagnostics"] = { purged: 1 };
+	renderRoute();
+	await screen.findByText("Disk space low");
+
+	fireEvent.click(screen.getByRole("button", { name: "Purge all resolved" }));
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain("Purge all resolved events? Active events are kept.");
+
+	// What the server will answer once the purge has landed; the refetch the
+	// mutation triggers is what has to pick it up.
+	responses["/api/diagnostics?state=resolved"] = page([]);
+	fireEvent.click(within(dialog).getByRole("button", { name: "Purge all" }));
+
+	await waitFor(() => expect(requested).toContain("DELETE /api/diagnostics"));
+	await waitFor(() => expect(screen.queryByText("Disk space low")).toBeNull());
+	expect(screen.getByText("Blocklist source failed to update")).toBeTruthy();
+});
+
+test("a refused purge reports the server's reason and keeps the row", async () => {
+	responses["DELETE /api/diagnostics/30"] = fail(409, "the event is still active; it can be purged once it resolves");
+	renderRoute("/diagnostics", { retry: false });
+	await screen.findByText("Disk space low");
+
+	fireEvent.click(within(screen.getByText("Disk space low").closest("tr")!).getByRole("button", { name: "Purge" }));
+	fireEvent.click(within(await screen.findByRole("alertdialog")).getByRole("button", { name: "Purge" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toContain("the event is still active");
+	expect(screen.getByText("Disk space low")).toBeTruthy();
+});
+
+test("an episode links to its own detail page", async () => {
+	responses["/api/diagnostics/42"] = event(42);
+	renderRoute();
+	const link = await screen.findByRole("link", { name: "Blocklist source failed to update" });
+	expect(link.getAttribute("href")).toBe("/diagnostics/42");
+});
+
+test("an absolute window reaches both requests and is stated on the page", async () => {
+	const bounded = "since=1699999700&until=1700000300";
+	responses[`/api/diagnostics?${bounded}&state=active`] = ACTIVE;
+	responses[`/api/diagnostics?${bounded}&state=resolved`] = RESOLVED;
+	renderRoute(`/diagnostics?${bounded}`);
+
+	await screen.findByRole("heading", { name: "Active" });
+	expect(requested).toContain(`/api/diagnostics?${bounded}&state=active`);
+	expect(requested).toContain(`/api/diagnostics?${bounded}&state=resolved`);
+	// An empty section inside a five-minute window means something different
+	// from an empty section over the whole history, so the page has to say so.
+	expect(screen.getByText(/Showing events that overlap/)).toBeTruthy();
+});
+
+test("clearing the range drops both bounds from the url", async () => {
+	const bounded = "since=1699999700&until=1700000300";
+	responses[`/api/diagnostics?${bounded}&state=active`] = ACTIVE;
+	responses[`/api/diagnostics?${bounded}&state=resolved`] = RESOLVED;
+	const router = renderRoute(`/diagnostics?${bounded}`);
+
+	fireEvent.click(await screen.findByRole("button", { name: "Clear the time range" }));
+	await waitFor(() => {
+		expect(router.state.location.search).not.toContain("since");
+	});
+	expect(router.state.location.search).not.toContain("until");
+});
+
+test("a bound that is not a whole second is dropped, leaving the page unbounded", async () => {
+	renderRoute("/diagnostics?since=1.5&until=Infinity");
+
+	await screen.findByRole("heading", { name: "Active" });
+	expect(requested).toContain("/api/diagnostics?state=active");
+	expect(screen.queryByText(/Showing events that overlap/)).toBeNull();
+});