changelog: 0.0.5 releases today

admin: drop the learned tag from the query tables
changelog: 0.0.4 releases today
2026-08-16 23:55:19 +02:00 · 2026-08-16 23:55:10 +02:00 · 2026-08-16 23:00:41 +02:00 · 2026-08-16 23:00:31 +02:00 · 2026-08-16 00:17:58 +02:00 · 2026-08-16 00:17:58 +02:00
258 changed files with 24713 additions and 14420 deletions
@@ -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:
@@ -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
@@ -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
@@ -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/
@@ -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.
@@ -1,62 +1,89 @@
 # 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.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

 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.
@@ -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

@@ -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.
 - 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.
+- 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

@@ -341,7 +346,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 +366,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 +385,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 +398,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 +414,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
 );
@@ -471,52 +485,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 },
 }
 ```

@@ -576,54 +555,43 @@ 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.
@@ -652,9 +620,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 +663,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 |
@@ -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.
@@ -1,3 +1,4 @@
 dist/
 dist-placeholder/
 package-lock.json
+dist-sourcemap/
@@ -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/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"
 	}
@@ -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`);
@@ -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`,
+);
@@ -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
@@ -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([]);
 	});
 });

@@ -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.
@@ -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>
 				)}
@@ -10,7 +10,9 @@ test("swallowMutationError drops an ApiError and rethrows anything else", () =>

 test("a rejected submit leaves the typed values in place; a resolved one clears them", async () => {
 	const rejecting = vi.fn(() => Promise.reject(new ApiError(400, "bad url")));
-	const { rerender } = render(<BlocklistForm busy={false} error={null} onSubmit={rejecting} onCancel={undefined} />);
+	const { rerender } = render(
+		<BlocklistForm busy={false} readOnly={false} error={null} onSubmit={rejecting} onCancel={undefined} />,
+	);
 	const url = screen.getByLabelText("URL") as HTMLInputElement;
 	const name = screen.getByLabelText("Name") as HTMLInputElement;
 	fireEvent.change(url, { target: { value: "https://example.com/list.txt" } });
@@ -22,7 +24,7 @@ test("a rejected submit leaves the typed values in place; a resolved one clears
 	expect(name.value).toBe("Example");

 	const resolving = vi.fn(() => Promise.resolve());
-	rerender(<BlocklistForm busy={false} error={null} onSubmit={resolving} onCancel={undefined} />);
+	rerender(<BlocklistForm busy={false} readOnly={false} error={null} onSubmit={resolving} onCancel={undefined} />);
 	fireEvent.click(screen.getByRole("button", { name: "Add source" }));
 	await waitFor(() => expect(url.value).toBe(""));
 	expect(name.value).toBe("");
@@ -1,8 +1,47 @@
 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";
+import { READ_ONLY_HINT } from "@/features/settings/authority";
+
+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
@@ -17,12 +56,14 @@ export function swallowMutationError(error: unknown): void {
 interface BlocklistFormProps {
 	initial?: Blocklist;
 	busy: boolean;
+	/** File authority: the server answers 403, so the submit stays down. */
+	readOnly: boolean;
 	error: Error | null;
 	onSubmit: (input: BlocklistInput) => Promise<void>;
 	onCancel?: () => void;
 }

-export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel }: BlocklistFormProps) {
+export default function BlocklistForm({ initial, busy, readOnly, error, onSubmit, onCancel }: BlocklistFormProps) {
 	const [url, setUrl] = useState(initial?.url ?? "");
 	const [name, setName] = useState(initial?.name ?? "");
 	const [enabled, setEnabled] = useState(initial?.enabled ?? true);
@@ -43,10 +84,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 +96,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 +109,33 @@ 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 || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...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>
 				)}
@@ -17,7 +17,9 @@ const BLOCKLISTS = {
 			last_updated: 1700000000,
 			domain_count: 1000,
 			wildcard_count: 10,
+			exception_count: 7,
 			skipped_regex_count: 3,
+			skipped_unsupported_count: 21,
 			checksum: "abc",
 		},
 		{
@@ -29,7 +31,9 @@ const BLOCKLISTS = {
 			last_updated: null,
 			domain_count: 0,
 			wildcard_count: 0,
+			exception_count: 0,
 			skipped_regex_count: 0,
+			skipped_unsupported_count: 0,
 			checksum: null,
 		},
 	],
@@ -41,14 +45,20 @@ const RESPONSES: Record<string, unknown> = {
 };

 let resolveUpdate: ((response: Response) => void) | null;
+let deleted: string[];

 beforeEach(() => {
 	clearRefreshStatus();
 	resolveUpdate = null;
+	deleted = [];
 	vi.stubGlobal(
 		"fetch",
 		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
 			const url = String(input);
+			if (init?.method === "DELETE") {
+				deleted.push(url);
+				return new Response(null, { status: 204 });
+			}
 			if (url === "/api/blocklists/update" && init?.method === "POST") {
 				return new Promise<Response>((resolve) => {
 					resolveUpdate = resolve;
@@ -92,7 +102,9 @@ const SNAPSHOT = {
 			last_error: "",
 			domains: 1200,
 			wildcards: 12,
+			exceptions: 9,
 			skipped_regex: 4,
+			skipped_unsupported: 17,
 		},
 	],
 };
@@ -106,8 +118,15 @@ test("renders the source table and the status empty state", async () => {
 	expect(screen.getByText("Suggested")).toBeTruthy();
 	expect(screen.getByText("1000")).toBeTruthy();
 	expect(screen.getByText("10")).toBeTruthy();
+	expect(screen.getByText("7")).toBeTruthy();
 	expect(screen.getByText("3")).toBeTruthy();
+	expect(screen.getByText("21")).toBeTruthy();
 	expect(screen.getByText("never")).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();

 	const enabledToggle = screen.getByLabelText("StevenBlack enabled") as HTMLInputElement;
 	expect(enabledToggle.checked).toBe(true);
@@ -141,7 +160,9 @@ test("update now disables the button, then replaces the status section from the
 				last_error: "",
 				domains: 1200,
 				wildcards: 12,
+				exceptions: 9,
 				skipped_regex: 4,
+				skipped_unsupported: 17,
 			},
 			{
 				id: 2,
@@ -153,7 +174,9 @@ test("update now disables the button, then replaces the status section from the
 				last_error: "connect timed out",
 				domains: 0,
 				wildcards: 0,
+				exceptions: 0,
 				skipped_regex: 0,
+				skipped_unsupported: 0,
 			},
 		],
 	};
@@ -166,7 +189,10 @@ test("update now disables the button, then replaces the status section from the
 	expect(screen.getByText("connect timed out")).toBeTruthy();
 	expect(screen.getByText("1200")).toBeTruthy();
 	expect(screen.getByText("12")).toBeTruthy();
+	expect(screen.getByText("9")).toBeTruthy();
 	expect(screen.getByText("4")).toBeTruthy();
+	expect(screen.getByText("17")).toBeTruthy();
+	expect(screen.getAllByRole("columnheader", { name: "Skipped unsupported" })).toHaveLength(2);
 	expect(screen.queryByText(/run .Update now. to fetch status/)).toBeNull();
 	// The store notifies one flush before the mutation's success state lands.
 	await screen.findByText(/Update completed/);
@@ -227,3 +253,27 @@ test("the refresh snapshot outlives the query cache's gcTime", async () => {
 		vi.useRealTimers();
 	}
 });
+
+test("delete asks for confirmation, and cancelling sends no request", async () => {
+	renderBlocklistsRoute();
+	await screen.findByRole("heading", { name: "Blocklists" });
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete blocklist "StevenBlack"? Its domains stop being blocked.');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(deleted).toEqual([]);
+});
+
+test("confirming the delete dialog issues the DELETE for that source", async () => {
+	renderBlocklistsRoute();
+	await screen.findByRole("heading", { name: "Blocklists" });
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[1]!);
+	await screen.findByRole("alertdialog");
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+	await waitFor(() => expect(deleted).toEqual(["/api/blocklists/2"]));
+});
@@ -0,0 +1,269 @@
+import { useState } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } 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 BlocklistForm from "./BlocklistForm";
+import { useRefreshStatus } from "./refreshStore";
+import SourceStatusSection from "./SourceStatusSection";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+const styles = stylex.create({
+	header: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "0.75rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	done: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.primaryOnSurface,
+	},
+	empty: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	note: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	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 },
+	},
+});
+
+export default function BlocklistsPage() {
+	const queryClient = useQueryClient();
+	const { data: blocklists } = useSuspenseQuery(blocklistsQuery());
+	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));
+	const updateNow = useMutation(blocklistsUpdateNowMutation(queryClient));
+
+	const sources = useRefreshStatus();
+	const namesById = new Map(blocklists.map((b) => [b.id, b.name]));
+	// The refresh below re-fetches the sources the config already declares, so
+	// it stays live in file mode; every other control here writes config.
+	const readOnly = useReadOnlyConfig();
+
+	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 (
+		<section>
+			<div {...stylex.props(styles.header)}>
+				<h1 {...stylex.props(styles.heading)}>Blocklists</h1>
+				<button
+					type="button"
+					onClick={() => updateNow.mutate()}
+					disabled={updateNow.isPending}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					{updateNow.isPending ? "Updating…" : "Update now"}
+				</button>
+			</div>
+			{updateNow.isSuccess && !updateNow.isPending && (
+				<p {...stylex.props(styles.done)} role="status">
+					Update completed; source status refreshed below.
+				</p>
+			)}
+			<InlineError error={updateNow.error} />
+
+			{blocklists.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No blocklist sources yet. Add one below.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(styles.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 || readOnly}
+											title={readOnly ? READ_ONLY_HINT : undefined}
+											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)}
+												disabled={readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.linkButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => setPendingDelete(b)}
+												disabled={remove.isPending || readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
+											>
+												Delete
+											</button>
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+					<p {...stylex.props(styles.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.
+					</p>
+				</div>
+			)}
+			<InlineError error={tableError} />
+
+			<BlocklistForm
+				key={editing?.id ?? "add"}
+				initial={editing ?? undefined}
+				busy={editing === null ? create.isPending : save.isPending}
+				readOnly={readOnly}
+				error={formError}
+				onSubmit={submitForm}
+				onCancel={editing === null ? undefined : () => setEditing(null)}
+			/>
+
+			<SourceStatusSection sources={sources} namesById={namesById} />
+
+			<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)}
+			/>
+		</section>
+	);
+}
@@ -0,0 +1,134 @@
+import * as stylex from "@stylexjs/stylex";
+import { formatTime } from "@/lib/format";
+import type { SourceStatus } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+function formatAttempt(unixSeconds: number): string {
+	return unixSeconds === 0 ? "never" : formatTime(unixSeconds);
+}
+
+interface SourceStatusSectionProps {
+	sources: SourceStatus[] | null;
+	namesById: ReadonlyMap<number, string>;
+}
+
+const styles = stylex.create({
+	section: {
+		marginTop: "2rem",
+	},
+	heading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	note: {
+		marginTop: "0.5rem",
+		color: colors.textMuted,
+	},
+	tableWrap: {
+		marginTop: "0.5rem",
+		overflowX: "auto",
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	name: {
+		fontWeight: 500,
+	},
+	url: {
+		marginTop: "0.125rem",
+		display: "block",
+		maxWidth: "16rem",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	/** Green has no token: a loaded source is the only success state in the app. */
+	loaded: {
+		color: {
+			default: "oklch(52.7% 0.154 150.069)",
+			"@media (prefers-color-scheme: dark)": "oklch(79.2% 0.209 151.711)",
+		},
+	},
+	failed: {
+		color: colors.danger,
+	},
+	absent: {
+		color: colors.textMuted,
+	},
+});
+
+export default function SourceStatusSection({ sources, namesById }: SourceStatusSectionProps) {
+	return (
+		<section {...stylex.props(styles.section)}>
+			<h2 {...stylex.props(styles.heading)}>Source status</h2>
+			{sources === null ? (
+				<p {...stylex.props(styles.note)}>
+					No status snapshot yet — run “Update now” to fetch status for every enabled source.
+				</p>
+			) : sources.length === 0 ? (
+				<p {...stylex.props(styles.note)}>The last update ran against no enabled sources.</p>
+			) : (
+				<div {...stylex.props(styles.tableWrap)}>
+					<table {...stylex.props(styles.table)}>
+						<thead>
+							<tr>
+								<th {...stylex.props(shared.th)}>Source</th>
+								<th {...stylex.props(shared.th)}>State</th>
+								<th {...stylex.props(shared.th)}>Last attempt</th>
+								<th {...stylex.props(shared.th)}>Last success</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 error</th>
+							</tr>
+						</thead>
+						<tbody>
+							{sources.map((source) => (
+								<tr key={source.id}>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(styles.name)}>
+											{namesById.get(source.id) ?? source.url}
+										</span>
+										<span {...stylex.props(styles.url)}>{source.url}</span>
+									</td>
+									<td {...stylex.props(shared.td)}>
+										<span {...stylex.props(source.loaded ? styles.loaded : styles.failed)}>
+											{source.state}
+										</span>
+									</td>
+									<td {...stylex.props(shared.td)}>{formatAttempt(source.last_attempt)}</td>
+									<td {...stylex.props(shared.td)}>{formatAttempt(source.last_success)}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.domains}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.wildcards}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.exceptions}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>{source.skipped_regex}</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{source.skipped_unsupported}
+									</td>
+									<td {...stylex.props(shared.td)}>
+										{source.last_error === "" ? (
+											<span {...stylex.props(styles.absent)}>—</span>
+										) : (
+											<span {...stylex.props(styles.failed)}>{source.last_error}</span>
+										)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}
@@ -0,0 +1,104 @@
+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 Dialog from "@/ui/Dialog";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+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",
+		justifyContent: "flex-end",
+		gap: "0.5rem",
+	},
+});
+
+export default function ClientEditDialog({ client, groups, onClose }: Props) {
+	const queryClient = useQueryClient();
+	const mutation = useMutation(clientUpdateMutation(queryClient));
+	const readOnly = useReadOnlyConfig();
+	// Adopting the learned name as a typed one is the natural gesture, but only
+	// where the save can land: under file authority the PUT answers 403, and the
+	// file's declared name is the one that wins.
+	const [name, setName] = useState(client.name === "" && !readOnly ? client.learned_name : client.name);
+	const [groupId, setGroupId] = useState(client.group_id);
+
+	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();
+					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)}>
+					<button type="button" onClick={onClose} {...stylex.props(shared.button, shared.focusRing)}>
+						Cancel
+					</button>
+					<button
+						type="submit"
+						disabled={mutation.isPending || readOnly}
+						title={readOnly ? READ_ONLY_HINT : undefined}
+						{...stylex.props(shared.primaryButton, shared.focusRing)}
+					>
+						Save
+					</button>
+				</div>
+			</form>
+		</Dialog>
+	);
+}
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
 import { AuthProvider } from "@/auth/store";
@@ -18,6 +18,7 @@ const CLIENTS = {
 			id: 1,
 			ip: "192.168.1.10",
 			name: "laptop",
+			learned_name: "laptop-1.lan",
 			group_id: 1,
 			group: "default",
 			hand_edited: true,
@@ -28,6 +29,7 @@ const CLIENTS = {
 			id: 2,
 			ip: "192.168.1.11",
 			name: "",
+			learned_name: "kids-tablet.lan",
 			group_id: 2,
 			group: "kids",
 			hand_edited: false,
@@ -95,6 +97,25 @@ test("renders the client table with group names and one hand-edited badge", asyn
 	expect(screen.getAllByRole("cell", { name: "kids" })).toHaveLength(1);
 });

+test("a named row shows the typed name and hides the learned one", async () => {
+	await renderClientsPage(BASE);
+
+	expect(screen.getByText("laptop")).toBeTruthy();
+	expect(screen.queryByText("laptop-1.lan")).toBeNull();
+});
+
+test("an unnamed row shows the learned name with the learned affordance", async () => {
+	await renderClientsPage(BASE);
+
+	// The cell holds the learned name followed by the tag, 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 affordance is text, not colour, so a screen reader announces it too.
+	expect(within(learned).getByText("learned")).toBeTruthy();
+});
+
 test("shows the DNS-activity empty state when there are no clients", async () => {
 	await renderClientsPage({ ...BASE, "GET /api/clients": { clients: [] } });

@@ -106,10 +127,25 @@ test("edit opens a dialog seeded with the client's name and group", async () =>
 	await renderClientsPage(BASE);

 	fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[0]!);
-	const dialog = screen.getByRole("dialog", { name: "Edit client 192.168.1.10" });
-	expect(dialog).toBeTruthy();
-	expect((screen.getByLabelText("Name") as HTMLInputElement).value).toBe("laptop");
-	expect((screen.getByLabelText("Group") as HTMLSelectElement).value).toBe("1");
+	// 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(BASE);
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Edit" })[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("prefix editor starts clean and dirties on add", async () => {
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { clientDeleteMutation, clientPrefixesQuery, clientsQuery, groupsQuery } from "@/lib/queries";
+import { formatTime } from "@/lib/format";
+import type { Client } from "@/lib/types";
+import ClientEditDialog from "./ClientEditDialog";
+import PrefixesEditor from "./PrefixesEditor";
+import InlineError from "@/lib/InlineError";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+/**
+ * Deleting an observed row discards runtime state the file never declared, so
+ * it stays live under file authority; deleting a hand-edited row contradicts
+ * the file and is the one client DELETE the server answers 403 (ruling 7).
+ */
+const DECLARED_CLIENT_NOTE = "This client is declared in the configuration file; remove it there and restart.";
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	empty: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	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",
+	},
+	dash: {
+		color: colors.textMuted,
+	},
+	badge: {
+		marginLeft: "0.5rem",
+		borderRadius: "0.25rem",
+		backgroundColor: colors.primary,
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+		color: colors.primaryText,
+	},
+	confirmGroup: {
+		display: "inline-flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		gap: "0.5rem",
+	},
+	actionGroup: {
+		display: "inline-flex",
+		gap: "0.5rem",
+	},
+	note: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	dangerText: {
+		color: colors.danger,
+	},
+	dimWhenDisabled: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+	/**
+	 * The accessible name of the actions column, kept out of the visual table
+	 * without leaving the accessibility tree.
+	 */
+});
+
+export default function ClientsPage() {
+	const { data: clients } = useSuspenseQuery(clientsQuery());
+	const { data: prefixes } = useSuspenseQuery(clientPrefixesQuery());
+	const { data: groups } = useSuspenseQuery(groupsQuery());
+	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();
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Clients</h1>
+			{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>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(styles.table)}>
+						<thead>
+							<tr {...stylex.props(styles.headRow)}>
+								<th {...stylex.props(styles.cell)}>IP</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>
+							{clients.map((client) => (
+								<tr key={client.id} {...stylex.props(styles.bodyRow)}>
+									<td {...stylex.props(styles.cell, shared.mono)}>{client.ip}</td>
+									<td {...stylex.props(styles.cell)}>
+										{client.name !== "" ? (
+											client.name
+										) : client.learned_name !== "" ? (
+											<span {...stylex.props(shared.learnedName)}>
+												{client.learned_name}
+												<span {...stylex.props(shared.learnedTag)}>learned</span>
+											</span>
+										) : (
+											<span {...stylex.props(styles.dash)}>—</span>
+										)}
+										{client.hand_edited && <span {...stylex.props(styles.badge)}>edited</span>}
+									</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)}>
+												<span {...stylex.props(styles.note)}>
+													Deleted clients re-materialize on their next DNS query.
+												</span>
+												<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)}>
+												<button
+													type="button"
+													onClick={() => setEditing(client)}
+													disabled={readOnly}
+													title={readOnly ? READ_ONLY_HINT : undefined}
+													{...stylex.props(
+														shared.smallButton,
+														styles.dimWhenDisabled,
+														shared.focusRing,
+													)}
+												>
+													Edit
+												</button>
+												<button
+													type="button"
+													onClick={() => setConfirmingId(client.id)}
+													disabled={readOnly && client.hand_edited}
+													title={
+														readOnly && client.hand_edited
+															? DECLARED_CLIENT_NOTE
+															: 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)} />}
+			<PrefixesEditor prefixes={prefixes} groups={groups} />
+		</section>
+	);
+}
@@ -1,17 +1,87 @@
 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 { buttonClass, focusRing, primaryButtonClass, smallInputClass } from "@/ui/classes";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";

 interface Props {
 	prefixes: ClientPrefix[];
 	groups: Group[];
 }

+const styles = stylex.create({
+	section: {
+		marginTop: "2.5rem",
+	},
+	heading: {
+		fontSize: "1.25rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	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",
+	},
+});
+
 export default function PrefixesEditor({ prefixes, groups }: Props) {
 	const queryClient = useQueryClient();
 	const mutation = useMutation(clientPrefixesPutMutation(queryClient));
@@ -19,6 +89,8 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 	const [validation, setValidation] = useState<string | null>(null);
 	const dirty = isDirty(state);
 	const fallbackGroupId = defaultGroupId(groups);
+	const readOnly = useReadOnlyConfig();
+	const groupOptions = groups.map((group) => ({ value: String(group.id), label: group.name }));

 	const save = () => {
 		const problem = firstProblem(state.rows);
@@ -30,18 +102,18 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 	};

 	return (
-		<section className="mt-10">
-			<h2 className="text-xl font-semibold">Client prefixes</h2>
-			<p className="mt-1 text-sm text-zinc-500">
+		<section {...stylex.props(styles.section)}>
+			<h2 {...stylex.props(styles.heading)}>Client prefixes</h2>
+			<p {...stylex.props(styles.intro)}>
 				Prefixes assign a group to whole address ranges. The list is saved as a whole; the highest priority
 				match wins.
 			</p>
 			{state.rows.length === 0 ? (
-				<p className="mt-4 text-sm text-zinc-500">No prefixes configured.</p>
+				<p {...stylex.props(styles.empty)}>No prefixes configured.</p>
 			) : (
-				<ul className="mt-4 space-y-2">
+				<ul {...stylex.props(styles.rows)}>
 					{state.rows.map((row, index) => (
-						<li key={index} className="flex flex-wrap items-center gap-2">
+						<li key={index} {...stylex.props(styles.row)}>
 							<input
 								type="text"
 								aria-label={`Prefix ${index + 1}`}
@@ -50,22 +122,17 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 								onChange={(event) =>
 									dispatch({ type: "edit", index, patch: { prefix: event.target.value } })
 								}
-								className={`${smallInputClass} w-52`}
+								{...stylex.props(shared.smallInput, styles.prefixInput, shared.focusRing)}
 							/>
-							<select
+							<Select
 								aria-label={`Group for prefix ${index + 1}`}
+								variant="inline"
 								value={String(row.group_id)}
-								onChange={(event) =>
-									dispatch({ type: "edit", index, patch: { group_id: Number(event.target.value) } })
+								onChange={(value) =>
+									dispatch({ type: "edit", index, patch: { group_id: Number(value) } })
 								}
-								className={smallInputClass}
-							>
-								{groups.map((group) => (
-									<option key={group.id} value={String(group.id)}>
-										{group.name}
-									</option>
-								))}
-							</select>
+								options={groupOptions}
+							/>
 							<input
 								type="text"
 								inputMode="numeric"
@@ -75,12 +142,12 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 								onChange={(event) =>
 									dispatch({ type: "edit", index, patch: { priority: event.target.value } })
 								}
-								className={`${smallInputClass} w-20`}
+								{...stylex.props(shared.smallInput, styles.priorityInput, shared.focusRing)}
 							/>
 							<button
 								type="button"
 								onClick={() => dispatch({ type: "remove", index })}
-								className={`rounded border border-zinc-300 px-2 py-1.5 text-sm text-red-700 ${focusRing} dark:border-zinc-700 dark:text-red-400`}
+								{...stylex.props(styles.removeButton, shared.focusRing)}
 							>
 								Remove
 							</button>
@@ -89,24 +156,25 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 				</ul>
 			)}
 			{validation !== null && (
-				<p role="alert" className="mt-2 text-sm text-red-700 dark:text-red-400">
+				<p role="alert" {...stylex.props(styles.validation)}>
 					{validation}
 				</p>
 			)}
 			<InlineError error={mutation.error} />
-			<div className="mt-4 flex gap-2">
+			<div {...stylex.props(styles.actions)}>
 				<button
 					type="button"
 					onClick={() => dispatch({ type: "add", groupId: fallbackGroupId })}
-					className={buttonClass}
+					{...stylex.props(shared.button, shared.focusRing)}
 				>
 					Add prefix
 				</button>
 				<button
 					type="button"
 					onClick={save}
-					disabled={!dirty || mutation.isPending}
-					className={primaryButtonClass}
+					disabled={!dirty || mutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
 				>
 					Save prefixes
 				</button>
@@ -117,7 +185,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 							setValidation(null);
 							dispatch({ type: "reset", prefixes });
 						}}
-						className={buttonClass}
+						{...stylex.props(shared.button, shared.focusRing)}
 					>
 						Discard changes
 					</button>
@@ -0,0 +1,53 @@
+/**
+ * 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],
+	);
+}
+
+export function ClientName({ ip, names }: { ip: string; names: ClientNames }) {
+	const client = names.get(ip);
+	if (client === undefined || (client.name === "" && client.learned_name === "")) {
+		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.
+	if (client.name !== "") return <span title={ip}>{client.name}</span>;
+	return (
+		<span title={ip} {...stylex.props(shared.learnedName)}>
+			{client.learned_name}
+		</span>
+	);
+}
@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { healthQuery, statsQuery, timeseriesQuery, upstreamHealthQuery } from "@/lib/queries";
+import type { Period } from "@/lib/types";
+import InlineError from "@/lib/InlineError";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import DiskCard from "./DiskCard";
+import HealthBanners from "./HealthBanners";
+import StatCards from "./StatCards";
+import TimeseriesChart from "./TimeseriesChart";
+import UpstreamHealthTable from "./UpstreamHealthTable";
+
+const PERIODS: Period[] = ["1h", "24h", "7d", "30d"];
+
+const styles = stylex.create({
+	page: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+	},
+	titleRow: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "0.75rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	periodGroup: {
+		display: "flex",
+		gap: "0.25rem",
+	},
+	period: {
+		borderStyle: "none",
+		borderRadius: "0.25rem",
+		paddingInline: "0.625rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	/** The pressed fill is heavier than `surfaceHover`, so a hover cannot mimic it. */
+	periodSelected: {
+		backgroundColor: {
+			default: "oklch(92% 0.004 286.32)",
+			"@media (prefers-color-scheme: dark)": "oklch(37% 0.013 285.805)",
+		},
+		color: colors.text,
+		fontWeight: 500,
+	},
+	periodIdle: {
+		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
+		color: colors.textSecondary,
+	},
+	/** Dynamic: the caller sizes the placeholder to the widget it stands in for. */
+	skeletonHeight: (height: number) => ({ height }),
+	skeleton: {
+		borderRadius: "0.25rem",
+		backgroundColor: {
+			default: "oklch(92% 0.004 286.32)",
+			"@media (prefers-color-scheme: dark)": "oklch(27.4% 0.006 286.033)",
+		},
+	},
+	/** The chart takes two thirds beside the disk card from `lg`, one column below. */
+	panelGrid: {
+		display: "grid",
+		gap: "1rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 1024px)": "2fr 1fr",
+		},
+	},
+	panel: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	panelHeading: {
+		marginBottom: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+});
+
+function PeriodPicker({ period, onChange }: { period: Period; onChange: (period: Period) => void }) {
+	return (
+		<div role="group" aria-label="Period" {...stylex.props(styles.periodGroup)}>
+			{PERIODS.map((option) => (
+				<button
+					key={option}
+					type="button"
+					aria-pressed={option === period}
+					onClick={() => onChange(option)}
+					{...stylex.props(
+						styles.period,
+						option === period ? styles.periodSelected : styles.periodIdle,
+						shared.focusRing,
+					)}
+				>
+					{option}
+				</button>
+			))}
+		</div>
+	);
+}
+
+function Skeleton({ height }: { height: number }) {
+	return <div aria-hidden="true" {...stylex.props(styles.skeleton, styles.skeletonHeight(height), shared.pulse)} />;
+}
+
+export default function DashboardPage() {
+	const [period, setPeriod] = useState<Period>("24h");
+	const stats = useQuery({ ...statsQuery(period), placeholderData: keepPreviousData });
+	const timeseries = useQuery({ ...timeseriesQuery(period), placeholderData: keepPreviousData });
+	const health = useQuery(healthQuery());
+	const upstreamHealth = useQuery(upstreamHealthQuery());
+
+	return (
+		<section {...stylex.props(styles.page)}>
+			<div {...stylex.props(styles.titleRow)}>
+				<h1 {...stylex.props(styles.heading)}>Dashboard</h1>
+				<PeriodPicker period={period} onChange={setPeriod} />
+			</div>
+
+			{health.data !== undefined && <HealthBanners health={health.data} />}
+
+			{stats.isError ? (
+				<InlineError error={stats.error} onRetry={() => void stats.refetch()} />
+			) : stats.data === undefined ? (
+				<Skeleton height={76} />
+			) : (
+				<StatCards stats={stats.data} />
+			)}
+
+			<div {...stylex.props(styles.panelGrid)}>
+				<section {...stylex.props(styles.panel)}>
+					<h2 {...stylex.props(styles.panelHeading)}>Queries over time</h2>
+					{timeseries.isError ? (
+						<InlineError error={timeseries.error} onRetry={() => void timeseries.refetch()} />
+					) : timeseries.data === undefined ? (
+						<Skeleton height={240} />
+					) : (
+						<TimeseriesChart data={timeseries.data} />
+					)}
+				</section>
+				{health.data === undefined ? <Skeleton height={160} /> : <DiskCard disk={health.data.disk} />}
+			</div>
+
+			{upstreamHealth.isError ? (
+				<InlineError error={upstreamHealth.error} onRetry={() => void upstreamHealth.refetch()} />
+			) : upstreamHealth.data === undefined ? (
+				<Skeleton height={120} />
+			) : (
+				<UpstreamHealthTable health={upstreamHealth.data} />
+			)}
+		</section>
+	);
+}
@@ -0,0 +1,97 @@
+import * as stylex from "@stylexjs/stylex";
+import { formatBytes } from "@/lib/format";
+import type { Health } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	card: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	heading: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+	badge: {
+		borderRadius: "0.25rem",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+	},
+	/**
+	 * The badge fills are their own three-step scale, not the `danger`/`warn`
+	 * banner tokens: they read as a tinted chip against a raised card, where a
+	 * banner fill would be too heavy.
+	 */
+	ok: {
+		backgroundColor: { default: "oklch(95% 0.052 163.051)", [DARK]: "oklch(26.2% 0.051 172.552)" },
+		color: { default: "oklch(43.2% 0.095 166.913)", [DARK]: "oklch(84.5% 0.143 164.978)" },
+	},
+	warn: {
+		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)" },
+	},
+	critical: {
+		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)" },
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	row: {
+		display: "flex",
+		justifyContent: "space-between",
+	},
+	term: {
+		color: colors.textMuted,
+	},
+});
+
+function stateStyle(state: Health["disk"]["state"]) {
+	if (state === "critical") return styles.critical;
+	return state === "warn" ? styles.warn : styles.ok;
+}
+
+export default function DiskCard({ disk }: { disk: Health["disk"] }) {
+	return (
+		<section {...stylex.props(styles.card)}>
+			<h2 {...stylex.props(styles.heading)}>
+				Disk
+				<span {...stylex.props(styles.badge, stateStyle(disk.state))}>{disk.state}</span>
+			</h2>
+			<dl {...stylex.props(styles.list)}>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Free</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.free_bytes)}</dd>
+				</div>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Database</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.db_bytes)}</dd>
+				</div>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Logs</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.log_bytes)}</dd>
+				</div>
+			</dl>
+		</section>
+	);
+}
@@ -1,13 +1,38 @@
+import * as stylex from "@stylexjs/stylex";
 import { formatBytes } from "@/lib/format";
 import type { Health } from "@/lib/types";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	stack: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+	},
+	banner: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	warn: {
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+	},
+	critical: {
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		color: colors.dangerText,
+	},
+});

 function Banner({ tone, children }: { tone: "warn" | "critical"; children: React.ReactNode }) {
-	const classes =
-		tone === "critical"
-			? "border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200"
-			: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200";
 	return (
-		<p role="alert" className={`rounded border px-4 py-2 text-sm ${classes}`}>
+		<p role="alert" {...stylex.props(styles.banner, tone === "critical" ? styles.critical : styles.warn)}>
 			{children}
 		</p>
 	);
@@ -39,5 +64,5 @@ export default function HealthBanners({ health }: { health: Health }) {
 		);
 	}
 	if (banners.length === 0) return null;
-	return <div className="space-y-2">{banners}</div>;
+	return <div {...stylex.props(styles.stack)}>{banners}</div>;
 }
@@ -0,0 +1,85 @@
+import * as stylex from "@stylexjs/stylex";
+import { formatMicros } from "@/lib/format";
+import type { StatsTotals } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const numberFormat = new Intl.NumberFormat();
+
+const styles = stylex.create({
+	/** Two columns on a phone, three from `md`, five from `xl`, as before. */
+	grid: {
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(2, minmax(0, 1fr))",
+			"@media (min-width: 768px)": "repeat(3, minmax(0, 1fr))",
+			"@media (min-width: 1280px)": "repeat(5, minmax(0, 1fr))",
+		},
+	},
+	card: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	label: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	value: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	detail: {
+		marginLeft: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+});
+
+function percentOf(part: number, total: number): string | null {
+	if (total === 0) return null;
+	return `${((part / total) * 100).toFixed(1)}%`;
+}
+
+function Card({ label, value, detail }: { label: string; value: string; detail?: string | null }) {
+	return (
+		<div {...stylex.props(styles.card)}>
+			<dt {...stylex.props(styles.label)}>{label}</dt>
+			<dd>
+				<span {...stylex.props(styles.value, shared.tabularNums)}>{value}</span>
+				{detail != null && <span {...stylex.props(styles.detail, shared.tabularNums)}>{detail}</span>}
+			</dd>
+		</div>
+	);
+}
+
+export default function StatCards({ stats }: { stats: StatsTotals }) {
+	return (
+		<dl {...stylex.props(styles.grid)}>
+			<Card label="Queries" value={numberFormat.format(stats.queries)} />
+			<Card
+				label="Blocked"
+				value={numberFormat.format(stats.blocked)}
+				detail={percentOf(stats.blocked, stats.queries)}
+			/>
+			<Card
+				label="Cached"
+				value={numberFormat.format(stats.cached)}
+				detail={percentOf(stats.cached, stats.queries)}
+			/>
+			<Card label="Clients" value={numberFormat.format(stats.clients)} />
+			<Card
+				label="Avg response"
+				value={stats.avg_response_time_us === null ? "—" : formatMicros(stats.avg_response_time_us)}
+			/>
+		</dl>
+	);
+}
@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { formatTime } from "@/lib/format";
 import type { StatsTimeseries } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 import { isEmptyTimeseries, layoutTimeseries, type BarLayout } from "./chartLayout";

 // Series colors validated for CVD separation and 3:1 surface contrast in both
@@ -14,6 +17,108 @@ const SERIES = [
 const CHART_HEIGHT = 240;
 const FALLBACK_WIDTH = 640;

+const styles = stylex.create({
+	empty: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: CHART_HEIGHT,
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "dashed",
+		borderColor: colors.borderStrong,
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	chartRoot: {
+		position: "relative",
+	},
+	tooltip: {
+		pointerEvents: "none",
+		position: "absolute",
+		top: "0.5rem",
+		zIndex: 10,
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.borderStrong,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+	},
+	/** Dynamic: the tooltip flips to whichever side of the bar has room. */
+	tooltipLeft: (left: number) => ({ left, right: null }),
+	tooltipRight: (right: number) => ({ left: null, right }),
+	tooltipTitle: {
+		fontWeight: 500,
+	},
+	tooltipList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.125rem",
+		marginTop: "0.25rem",
+	},
+	tooltipRow: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "1rem",
+	},
+	tooltipTerm: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.375rem",
+		color: colors.textMuted,
+	},
+	swatch: {
+		display: "inline-block",
+		borderRadius: "0.125rem",
+	},
+	/** Dynamic: the swatch takes the series colour the SVG bars are drawn in. */
+	swatchColor: (color: string) => ({ backgroundColor: color }),
+	swatchSmall: {
+		width: "0.5rem",
+		height: "0.5rem",
+	},
+	swatchLarge: {
+		width: "0.625rem",
+		height: "0.625rem",
+	},
+	gridLine: {
+		stroke: colors.border,
+	},
+	axisLine: {
+		stroke: colors.borderStrong,
+	},
+	axisLabel: {
+		fill: colors.textMuted,
+		fontSize: "10px",
+	},
+	/** The hairline separating touching segments is the page ground, not a colour. */
+	segment: {
+		stroke: colors.surface,
+	},
+	legend: {
+		marginTop: "0.5rem",
+		display: "flex",
+		flexWrap: "wrap",
+		columnGap: "1rem",
+		rowGap: "0.25rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textSecondary,
+	},
+	legendItem: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.375rem",
+	},
+});
+
 function useContainerWidth(): [React.RefObject<HTMLDivElement | null>, number] {
 	const ref = useRef<HTMLDivElement>(null);
 	const [width, setWidth] = useState(0);
@@ -46,28 +151,29 @@ function barSummary(bar: BarLayout): string {
 function Tooltip({ bar, chartWidth }: { bar: BarLayout; chartWidth: number }) {
 	const centerX = bar.slot.x + bar.slot.width / 2;
 	const leftHalf = centerX < chartWidth / 2;
+	const side = leftHalf
+		? styles.tooltipLeft(Math.min(centerX + 8, chartWidth - 160))
+		: styles.tooltipRight(chartWidth - centerX + 8);
 	return (
-		<div
-			className="pointer-events-none absolute top-2 z-10 rounded border border-zinc-200 bg-white px-3 py-2 text-xs shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
-			style={leftHalf ? { left: Math.min(centerX + 8, chartWidth - 160) } : { right: chartWidth - centerX + 8 }}
-		>
-			<div className="font-medium">{formatTime(bar.bucket.ts)}</div>
-			<dl className="mt-1 space-y-0.5">
-				<div className="flex justify-between gap-4">
-					<dt className="text-zinc-500">Queries</dt>
-					<dd className="tabular-nums">{bar.bucket.queries}</dd>
+		<div {...stylex.props(styles.tooltip, side)}>
+			<div {...stylex.props(styles.tooltipTitle)}>{formatTime(bar.bucket.ts)}</div>
+			<dl {...stylex.props(styles.tooltipList)}>
+				<div {...stylex.props(styles.tooltipRow)}>
+					<dt {...stylex.props(styles.tooltipTerm)}>Queries</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{bar.bucket.queries}</dd>
 				</div>
 				{SERIES.map((series) => (
-					<div key={series.key} className="flex items-center justify-between gap-4">
-						<dt className="flex items-center gap-1.5 text-zinc-500">
+					<div key={series.key} {...stylex.props(styles.tooltipRow)}>
+						<dt {...stylex.props(styles.tooltipTerm)}>
 							<span
 								aria-hidden="true"
-								className="inline-block size-2 rounded-xs"
-								style={{ backgroundColor: series.color }}
+								{...stylex.props(styles.swatch, styles.swatchSmall, styles.swatchColor(series.color))}
 							/>
 							{series.label}
 						</dt>
-						<dd className="tabular-nums">{series.key === "other" ? bar.other : bar.bucket[series.key]}</dd>
+						<dd {...stylex.props(shared.tabularNums)}>
+							{series.key === "other" ? bar.other : bar.bucket[series.key]}
+						</dd>
 					</div>
 				))}
 			</dl>
@@ -82,11 +188,7 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {

 	if (data.buckets.length === 0 || isEmptyTimeseries(data.buckets)) {
 		return (
-			<div
-				ref={containerRef}
-				className="flex items-center justify-center rounded border border-dashed border-zinc-300 text-sm text-zinc-500 dark:border-zinc-700"
-				style={{ height: CHART_HEIGHT }}
-			>
+			<div ref={containerRef} {...stylex.props(styles.empty)}>
 				No queries in this period.
 			</div>
 		);
@@ -97,7 +199,7 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 	const hoveredBar = hovered !== null ? layout.bars[hovered] : undefined;

 	return (
-		<div ref={containerRef} className="relative">
+		<div ref={containerRef} {...stylex.props(styles.chartRoot)}>
 			<svg
 				role="img"
 				aria-label={`Queries over time, ${data.buckets.length} buckets: blocked, cached and other queries per bucket`}
@@ -113,14 +215,14 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 							x2={layout.plot.x + layout.plot.width}
 							y1={tick.y}
 							y2={tick.y}
-							className="stroke-zinc-200 dark:stroke-zinc-800"
+							{...stylex.props(styles.gridLine)}
 						/>
 						<text
 							x={layout.plot.x - 6}
 							y={tick.y}
 							textAnchor="end"
 							dominantBaseline="middle"
-							className="fill-zinc-500 text-[10px] tabular-nums"
+							{...stylex.props(styles.axisLabel, shared.tabularNums)}
 						>
 							{compact.format(tick.value)}
 						</text>
@@ -131,7 +233,7 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 					x2={layout.plot.x + layout.plot.width}
 					y1={baseline}
 					y2={baseline}
-					className="stroke-zinc-300 dark:stroke-zinc-700"
+					{...stylex.props(styles.axisLine)}
 				/>
 				{layout.xTicks.map((tick) => (
 					<text
@@ -139,7 +241,7 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 						x={tick.x}
 						y={baseline + 14}
 						textAnchor="middle"
-						className="fill-zinc-500 text-[10px]"
+						{...stylex.props(styles.axisLabel)}
 					>
 						{formatTick(tick.ts, data.bucket_seconds)}
 					</text>
@@ -157,8 +259,8 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 									width={rect.width}
 									height={rect.height}
 									fill={series.color}
-									className="stroke-zinc-50 dark:stroke-zinc-950"
 									strokeWidth={rect.width > 3 ? 1 : 0}
+									{...stylex.props(styles.segment)}
 								/>
 							);
 						})}
@@ -179,19 +281,18 @@ export default function TimeseriesChart({ data }: { data: StatsTimeseries }) {
 				))}
 			</svg>
 			{hoveredBar !== undefined && <Tooltip bar={hoveredBar} chartWidth={width} />}
-			<ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-zinc-600 dark:text-zinc-400">
+			<ul {...stylex.props(styles.legend)}>
 				{SERIES.map((series) => (
-					<li key={series.key} className="flex items-center gap-1.5">
+					<li key={series.key} {...stylex.props(styles.legendItem)}>
 						<span
 							aria-hidden="true"
-							className="inline-block size-2.5 rounded-xs"
-							style={{ backgroundColor: series.color }}
+							{...stylex.props(styles.swatch, styles.swatchLarge, styles.swatchColor(series.color))}
 						/>
 						{series.label}
 					</li>
 				))}
 			</ul>
-			<table className="sr-only">
+			<table {...stylex.props(shared.srOnly)}>
 				<caption>Queries per time bucket</caption>
 				<thead>
 					<tr>
@@ -0,0 +1,156 @@
+import * as stylex from "@stylexjs/stylex";
+import type { UpstreamHealth } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	card: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+	},
+	heading: {
+		display: "flex",
+		alignItems: "baseline",
+		justifyContent: "space-between",
+		paddingInline: "1rem",
+		paddingTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+	count: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 400,
+		color: colors.textMuted,
+	},
+	empty: {
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	tableWrap: {
+		overflowX: "auto",
+	},
+	table: {
+		marginTop: "0.5rem",
+		width: "100%",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	headRow: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+		textAlign: "left",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+	th: {
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontWeight: 500,
+	},
+	thRight: {
+		textAlign: "right",
+	},
+	/** No hairline under the last row: the card border already closes the table. */
+	row: {
+		borderBottomWidth: { default: 1, ":last-child": 0 },
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.border,
+	},
+	cell: {
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+	},
+	cellRight: {
+		textAlign: "right",
+	},
+	small: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+	muted: {
+		color: colors.textMuted,
+	},
+	bad: {
+		color: colors.danger,
+	},
+});
+
+function YesNo({ value, badValue }: { value: boolean; badValue: boolean }) {
+	const bad = value === badValue;
+	return <span {...stylex.props(bad && styles.bad)}>{value ? "yes" : "no"}</span>;
+}
+
+export default function UpstreamHealthTable({ health }: { health: UpstreamHealth }) {
+	return (
+		<section {...stylex.props(styles.card)}>
+			<h2 {...stylex.props(styles.heading)}>
+				Upstreams
+				<span {...stylex.props(styles.count, shared.tabularNums)}>
+					{health.available}/{health.total} available
+				</span>
+			</h2>
+			{health.upstreams.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No upstreams configured.</p>
+			) : (
+				<div {...stylex.props(styles.tableWrap)}>
+					<table {...stylex.props(styles.table)}>
+						<thead>
+							<tr {...stylex.props(styles.headRow)}>
+								<th scope="col" {...stylex.props(styles.th)}>
+									URL
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Enabled
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Available
+								</th>
+								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
+									Failures
+								</th>
+								<th scope="col" {...stylex.props(styles.th, styles.thRight)}>
+									Success rate
+								</th>
+								<th scope="col" {...stylex.props(styles.th)}>
+									Last error
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							{health.upstreams.map((upstream) => (
+								<tr key={upstream.url} {...stylex.props(styles.row)}>
+									<td {...stylex.props(styles.cell, styles.small, shared.mono)}>{upstream.url}</td>
+									<td {...stylex.props(styles.cell)}>
+										<YesNo value={upstream.enabled} badValue={false} />
+									</td>
+									<td {...stylex.props(styles.cell)}>
+										<YesNo value={upstream.available} badValue={false} />
+									</td>
+									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
+										{upstream.total_failures}
+									</td>
+									<td {...stylex.props(styles.cell, styles.cellRight, shared.tabularNums)}>
+										{(upstream.success_rate * 100).toFixed(1)}%
+									</td>
+									<td {...stylex.props(styles.cell, styles.small, styles.muted)}>
+										{upstream.last_error || "—"}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}
@@ -1,25 +1,58 @@
 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";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";

 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));
 	const mutation = useMutation(groupSourcesPutMutation(queryClient));
 	const [selected, setSelected] = useState<number[] | null>(null);
+	const readOnly = useReadOnlyConfig();

 	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 +60,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 Blocklists page.</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 +84,24 @@ 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}
+					disabled={!dirty || mutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
 					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>
 				)}
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import {
 	blocklistsQuery,
 	groupCreateMutation,
@@ -10,12 +11,85 @@ import {
 import type { Blocklist, Group } from "@/lib/types";
 import GroupSourcesEditor from "./GroupSourcesEditor";
 import InlineError from "@/lib/InlineError";
-import { focusRing, primaryButtonClass, smallButtonClass, smallInputClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";

 const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";

-const groupButtonClass = `${smallButtonClass} disabled:opacity-50`;
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	createForm: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	fieldLabel: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+		marginTop: "1.5rem",
+	},
+	row: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+	rowControls: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	renameForm: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	name: {
+		fontWeight: 500,
+	},
+	checkboxLabel: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	actions: {
+		marginLeft: "auto",
+		display: "inline-flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	groupButton: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+	destructive: {
+		color: colors.danger,
+	},
+	lockNote: {
+		marginTop: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});

 export default function GroupsPage() {
 	const { data: groups } = useSuspenseQuery(groupsQuery());
@@ -23,12 +97,13 @@ export default function GroupsPage() {
 	const queryClient = useQueryClient();
 	const createMutation = useMutation(groupCreateMutation(queryClient));
 	const [newName, setNewName] = useState("");
+	const readOnly = useReadOnlyConfig();

 	return (
 		<section>
-			<h1 className="text-2xl font-semibold">Groups</h1>
+			<h1 {...stylex.props(styles.heading)}>Groups</h1>
 			<form
-				className="mt-4 flex flex-wrap items-center gap-2"
+				{...stylex.props(styles.createForm)}
 				onSubmit={(event) => {
 					event.preventDefault();
 					const name = newName.trim();
@@ -36,7 +111,7 @@ export default function GroupsPage() {
 					createMutation.mutate({ name }, { onSuccess: () => setNewName("") });
 				}}
 			>
-				<label className="text-sm font-medium" htmlFor="new-group-name">
+				<label {...stylex.props(styles.fieldLabel)} htmlFor="new-group-name">
 					New group
 				</label>
 				<input
@@ -44,14 +119,20 @@ export default function GroupsPage() {
 					type="text"
 					value={newName}
 					onChange={(event) => setNewName(event.target.value)}
-					className={smallInputClass}
+					disabled={readOnly}
+					{...stylex.props(shared.smallInput, shared.focusRing)}
 				/>
-				<button type="submit" disabled={createMutation.isPending} className={primaryButtonClass}>
+				<button
+					type="submit"
+					disabled={createMutation.isPending || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
 					Create
 				</button>
 			</form>
 			<InlineError error={createMutation.error} />
-			<ul className="mt-6 space-y-4">
+			<ul {...stylex.props(styles.list)}>
 				{groups.map((group) => (
 					<GroupRow key={group.id} group={group} blocklists={blocklists} />
 				))}
@@ -69,13 +150,15 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 	const [confirming, setConfirming] = useState(false);
 	const [expanded, setExpanded] = useState(false);
 	const isDefault = group.id === DEFAULT_GROUP_ID;
+	const readOnly = useReadOnlyConfig();
+	const lockNote = isDefault ? DEFAULT_GROUP_NOTE : readOnly ? READ_ONLY_HINT : undefined;

 	return (
-		<li className="rounded border border-zinc-200 p-4 dark:border-zinc-700">
-			<div className="flex flex-wrap items-center gap-3">
+		<li {...stylex.props(styles.row)}>
+			<div {...stylex.props(styles.rowControls)}>
 				{renaming ? (
 					<form
-						className="flex items-center gap-2"
+						{...stylex.props(styles.renameForm)}
 						onSubmit={(event) => {
 							event.preventDefault();
 							const trimmed = name.trim();
@@ -91,10 +174,15 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 							aria-label={`New name for ${group.name}`}
 							value={name}
 							onChange={(event) => setName(event.target.value)}
-							className={smallInputClass}
+							{...stylex.props(shared.smallInput, shared.focusRing)}
 							autoFocus
 						/>
-						<button type="submit" disabled={updateMutation.isPending} className={groupButtonClass}>
+						<button
+							type="submit"
+							disabled={updateMutation.isPending || readOnly}
+							title={readOnly ? READ_ONLY_HINT : undefined}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
+						>
 							Save
 						</button>
 						<button
@@ -103,20 +191,21 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 								setName(group.name);
 								setRenaming(false);
 							}}
-							className={groupButtonClass}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 						>
 							Cancel
 						</button>
 					</form>
 				) : (
-					<span className="font-medium">{group.name}</span>
+					<span {...stylex.props(styles.name)}>{group.name}</span>
 				)}
-				<label className="inline-flex items-center gap-2 text-sm">
+				<label {...stylex.props(styles.checkboxLabel)}>
 					<input
 						type="checkbox"
 						checked={group.safe_search}
-						disabled={updateMutation.isPending}
-						className={focusRing}
+						disabled={updateMutation.isPending || readOnly}
+						title={readOnly ? READ_ONLY_HINT : undefined}
+						{...stylex.props(shared.focusRing)}
 						onChange={(event) =>
 							updateMutation.mutate({
 								id: group.id,
@@ -126,25 +215,25 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 					/>
 					Safe search
 				</label>
-				<span className="ml-auto inline-flex flex-wrap items-center gap-2">
+				<span {...stylex.props(styles.actions)}>
 					<button
 						type="button"
 						aria-expanded={expanded}
 						onClick={() => setExpanded((open) => !open)}
-						className={groupButtonClass}
+						{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 					>
 						Sources
 					</button>
 					{!renaming && (
 						<button
 							type="button"
-							disabled={isDefault}
-							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+							disabled={isDefault || readOnly}
+							title={lockNote}
 							onClick={() => {
 								setName(group.name);
 								setRenaming(true);
 							}}
-							className={groupButtonClass}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 						>
 							Rename
 						</button>
@@ -157,28 +246,42 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 									setConfirming(false);
 									deleteMutation.mutate(group.id);
 								}}
-								className={`${groupButtonClass} text-red-700 dark:text-red-400`}
+								{...stylex.props(
+									shared.smallButton,
+									styles.groupButton,
+									styles.destructive,
+									shared.focusRing,
+								)}
 							>
 								Confirm delete
 							</button>
-							<button type="button" onClick={() => setConfirming(false)} className={groupButtonClass}>
+							<button
+								type="button"
+								onClick={() => setConfirming(false)}
+								{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
+							>
 								Cancel
 							</button>
 						</>
 					) : (
 						<button
 							type="button"
-							disabled={isDefault}
-							title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
+							disabled={isDefault || readOnly}
+							title={lockNote}
 							onClick={() => setConfirming(true)}
-							className={`${groupButtonClass} text-red-700 dark:text-red-400`}
+							{...stylex.props(
+								shared.smallButton,
+								styles.groupButton,
+								styles.destructive,
+								shared.focusRing,
+							)}
 						>
 							Delete
 						</button>
 					)}
 				</span>
 			</div>
-			{isDefault && <p className="mt-2 text-xs text-zinc-500">{DEFAULT_GROUP_NOTE}</p>}
+			{isDefault && <p {...stylex.props(styles.lockNote)}>{DEFAULT_GROUP_NOTE}</p>}
 			<InlineError error={updateMutation.error ?? deleteMutation.error} />
 			{expanded && <GroupSourcesEditor groupId={group.id} blocklists={blocklists} />}
 		</li>
@@ -0,0 +1,194 @@
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createQueryClient } from "@/lib/queryClient";
+import type { Client, LiveQueryEvent } from "@/lib/types";
+import { FakeEventSource } from "./fakeEventSource";
+import LiveLogPage from "./LiveLogPage";
+
+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", "", ""),
+];
+
+beforeEach(() => {
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL) => {
+			if (String(input) !== "/api/clients") {
+				return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+			}
+			return new Response(JSON.stringify({ clients: CLIENTS }), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+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: true,
+		upstream: "",
+		...overrides,
+	};
+	return { data: JSON.stringify(payload) };
+}
+
+function renderPage() {
+	const sources: FakeEventSource[] = [];
+	const createEventSource = (url: string) => {
+		const es = new FakeEventSource(url);
+		sources.push(es);
+		return es;
+	};
+	render(
+		<QueryClientProvider client={createQueryClient()}>
+			<LiveLogPage createEventSource={createEventSource} />
+		</QueryClientProvider>,
+	);
+	return sources;
+}
+
+test("streams rows, flags blocked ones, and freezes the display", () => {
+	const sources = renderPage();
+	expect(screen.getByText("Connecting…")).toBeTruthy();
+
+	act(() => sources[0]!.emit("open"));
+	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", { blocked: true, block_reason: "blocklist:stevenblack", qtype: 28 }),
+		);
+	});
+
+	expect(screen.getByText("ok.example")).toBeTruthy();
+	expect(screen.getByText("Blocked")).toBeTruthy();
+	expect(screen.getByText("blocklist:stevenblack")).toBeTruthy();
+	expect(screen.getByText("AAAA")).toBeTruthy();
+	// 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 blockedRow = screen.getByText("ads.example").closest("tr");
+	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 () => {
+	const sources = renderPage();
+	act(() => sources[0]!.emit("open"));
+	act(() => {
+		sources[0]!.emit("query", frame(1000, "named.example", { client_ip: "192.0.2.10" }));
+		sources[0]!.emit("query", frame(1001, "learned.example", { client_ip: "192.0.2.11" }));
+		sources[0]!.emit("query", frame(1002, "nameless.example", { client_ip: "192.0.2.12" }));
+		sources[0]!.emit("query", frame(1003, "stranger.example", { client_ip: "192.0.2.99" }));
+	});
+
+	// 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.
+	const nameless = screen.getByText("192.0.2.12");
+	expect(nameless.getAttribute("title")).toBeNull();
+	const stranger = screen.getByText("192.0.2.99");
+	expect(stranger.getAttribute("title")).toBeNull();
+	expect(screen.getByText("stranger.example").closest("tr")?.textContent).toContain("192.0.2.99");
+});
+
+test("rows stream in as bare IPs while the client list is still loading", async () => {
+	let releaseClients: () => void = () => {};
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(
+			(input: RequestInfo | URL) =>
+				new Promise<Response>((resolve) => {
+					if (String(input) !== "/api/clients") {
+						resolve(new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 }));
+						return;
+					}
+					releaseClients = () =>
+						resolve(
+							new Response(JSON.stringify({ clients: CLIENTS }), {
+								status: 200,
+								headers: { "content-type": "application/json" },
+							}),
+						);
+				}),
+		),
+	);
+
+	const sources = renderPage();
+	act(() => sources[0]!.emit("open"));
+	act(() => sources[0]!.emit("query", frame(1000, "named.example", { client_ip: "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", () => {
+	const sources = renderPage();
+	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();
+});
@@ -0,0 +1,259 @@
+import * as stylex from "@stylexjs/stylex";
+import { useClientNames } from "@/features/clients/clientNames";
+import { QueryCells, QueryTableHead } from "@/features/queries/QueryLogPage";
+import { RING_CAPACITY } from "./ringBuffer";
+import { useLiveQueries, type EventSourceFactory, type StreamStatus } from "./useLiveQueries";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	toolbar: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	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)",
+		},
+	},
+	footnote: {
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+});
+
+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>
+	);
+}
+
+/** Freeze is display-only: the stream stays open and the 500-row ring buffer keeps
+ * filling; Resume shows the current buffer (anything pushed out meanwhile is gone). */
+export default function LiveLogPage({ createEventSource }: { createEventSource?: EventSourceFactory } = {}) {
+	const live = useLiveQueries({ createEventSource });
+	const clientNames = useClientNames();
+
+	return (
+		<section>
+			<div {...stylex.props(styles.toolbar)}>
+				<h1 {...stylex.props(styles.heading)}>Live</h1>
+				<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 {RING_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>
+			)}
+
+			{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)}>
+							<QueryTableHead />
+							<tbody>
+								{live.rows.map((row) => (
+									<tr key={row.key} {...stylex.props(styles.row, row.blocked && styles.rowBlocked)}>
+										<QueryCells row={row} clientNames={clientNames} />
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+					<p {...stylex.props(styles.footnote)}>
+						Showing {live.rows.length} {live.rows.length === 1 ? "query" : "queries"} (newest first, last{" "}
+						{RING_CAPACITY} kept).
+					</p>
+				</>
+			)}
+		</section>
+	);
+}
@@ -0,0 +1,170 @@
+import { fireEvent, render, screen, waitFor } 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 { LocalRecord, LocalRecordInput } from "@/lib/types";
+
+let records: LocalRecord[];
+let fetchMock: ReturnType<typeof createFetchMock>;
+
+function json(payload: unknown, status = 200): Response {
+	return new Response(JSON.stringify(payload), { status, headers: { "content-type": "application/json" } });
+}
+
+function createFetchMock() {
+	return vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+		const url = String(input);
+		const method = init?.method ?? "GET";
+		if (url === "/api/local-records" && method === "GET") return json({ local_records: records });
+		if (url === "/api/local-records" && method === "POST") {
+			const body = JSON.parse(String(init?.body)) as LocalRecordInput;
+			const created: LocalRecord = { id: 99, ttl: body.ttl ?? 300, ...body };
+			records = [...records, created];
+			return json(created, 201);
+		}
+		if (url.startsWith("/api/local-records/") && method === "DELETE") {
+			const id = Number(url.slice("/api/local-records/".length));
+			records = records.filter((record) => record.id !== id);
+			return new Response(null, { status: 204 });
+		}
+		if (url.startsWith("/api/forward-zones/") && method === "DELETE") return new Response(null, { status: 204 });
+		if (url === "/api/forward-zones" && method === "GET") {
+			return json({ forward_zones: [{ id: 7, zone: "lan.home", resolver: "udp://192.168.1.1:53" }] });
+		}
+		return json({ error: "not stubbed" }, 404);
+	});
+}
+
+beforeEach(() => {
+	records = [{ id: 1, name: "nas.lan.home", rtype: "A", value: "192.168.1.10", ttl: 300 }];
+	fetchMock = createFetchMock();
+	vi.stubGlobal("fetch", fetchMock);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderPage() {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/local-dns"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+test("renders the records table and switches to the forward zones tab", async () => {
+	renderPage();
+
+	await screen.findByRole("heading", { name: "Local DNS" });
+	await screen.findByText("nas.lan.home");
+	expect(screen.getByText("192.168.1.10")).toBeTruthy();
+
+	fireEvent.click(screen.getByRole("tab", { name: "Forward zones" }));
+	await screen.findByText("lan.home");
+	expect(screen.getByText("udp://192.168.1.1:53")).toBeTruthy();
+});
+
+test("the arrow keys move between tabs", async () => {
+	renderPage();
+	await screen.findByText("nas.lan.home");
+
+	const tablist = screen.getByRole("tablist", { name: "Local DNS" });
+	const records = screen.getByRole("tab", { name: "Records" });
+	expect(records.getAttribute("aria-selected")).toBe("true");
+
+	fireEvent.keyDown(tablist, { key: "ArrowRight" });
+	const zones = screen.getByRole("tab", { name: "Forward zones" });
+	expect(zones.getAttribute("aria-selected")).toBe("true");
+	expect(screen.getByRole("tab", { name: "Records" }).getAttribute("aria-selected")).toBe("false");
+	await screen.findByText("lan.home");
+
+	fireEvent.keyDown(tablist, { key: "ArrowLeft" });
+	expect(screen.getByRole("tab", { name: "Records" }).getAttribute("aria-selected")).toBe("true");
+	await screen.findByText("nas.lan.home");
+});
+
+test("creates a record: POST body per LocalRecordInput, list refreshes", async () => {
+	renderPage();
+	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 now: 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 screen.findByText("printer.lan.home");
+
+	const post = fetchMock.mock.calls.find(
+		([input, init]) => init?.method === "POST" && String(input) === "/api/local-records",
+	);
+	expect(post).toBeTruthy();
+	expect(JSON.parse(String(post?.[1]?.body))).toEqual({ name: "printer.lan.home", rtype: "AAAA", value: "fd00::11" });
+});
+
+test("cancelling the record delete dialog sends no request", async () => {
+	renderPage();
+	await screen.findByText("nas.lan.home");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete record "nas.lan.home"?');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(fetchMock.mock.calls.some(([, init]) => init?.method === "DELETE")).toBe(false);
+	expect(screen.getByText("nas.lan.home")).toBeTruthy();
+});
+
+test("confirming the record delete dialog issues the DELETE", async () => {
+	renderPage();
+	await screen.findByText("nas.lan.home");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	await screen.findByRole("alertdialog");
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+	await waitFor(() =>
+		expect(
+			fetchMock.mock.calls.some(
+				([input, init]) => init?.method === "DELETE" && String(input) === "/api/local-records/1",
+			),
+		).toBe(true),
+	);
+	await waitFor(() => expect(screen.queryByText("nas.lan.home")).toBeNull());
+});
+
+test("the forward zone delete dialog names the zone and confirms", async () => {
+	renderPage();
+	await screen.findByText("nas.lan.home");
+	fireEvent.click(screen.getByRole("tab", { name: "Forward zones" }));
+	await screen.findByText("lan.home");
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete forward zone "lan.home"?');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(fetchMock.mock.calls.some(([, init]) => init?.method === "DELETE")).toBe(false);
+
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	await screen.findByRole("alertdialog");
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+	await waitFor(() =>
+		expect(
+			fetchMock.mock.calls.some(
+				([input, init]) => init?.method === "DELETE" && String(input) === "/api/forward-zones/7",
+			),
+		).toBe(true),
+	);
+});
@@ -0,0 +1,27 @@
+import * as stylex from "@stylexjs/stylex";
+import RecordsTab from "@/features/local/RecordsTab";
+import ZonesTab from "@/features/local/ZonesTab";
+import Tabs from "@/ui/Tabs";
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+});
+
+export default function LocalDnsPage() {
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Local DNS</h1>
+			<Tabs
+				label="Local DNS"
+				tabs={[
+					{ id: "records", label: "Records", content: <RecordsTab /> },
+					{ id: "zones", label: "Forward zones", content: <ZonesTab /> },
+				]}
+			/>
+		</section>
+	);
+}
@@ -0,0 +1,334 @@
+import { useId, useState, type FormEvent } from "react";
+import { useSuspenseQuery } 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 { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+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,
+	readOnly,
+	error,
+	onSubmit,
+	onCancel,
+}: {
+	initial?: LocalRecord;
+	busy: boolean;
+	readOnly: 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 || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...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 records = useSuspenseQuery(localRecordsQuery()).data;
+	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}"?`,
+	});
+	const readOnly = useReadOnlyConfig();
+
+	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" })}
+					disabled={readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...stylex.props(shared.largePrimaryButton, shared.focusRing)}
+				>
+					Add record
+				</button>
+			</div>
+			<InlineError error={remove.error} />
+			{form?.mode === "create" && (
+				<RecordForm
+					busy={create.isPending}
+					readOnly={readOnly}
+					error={create.error}
+					onSubmit={onSubmit}
+					onCancel={closeForm}
+				/>
+			)}
+			<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}
+											readOnly={readOnly}
+											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 })}
+												disabled={readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.rowButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => onDelete(record)}
+												disabled={remove.isPending || readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.rowButton,
+													styles.dangerText,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Delete
+											</button>
+										</td>
+									</>
+								)}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete record"
+				message={pendingDelete?.message ?? ""}
+				confirmLabel="Delete"
+				onConfirm={confirmPendingDelete}
+				onCancel={cancelPendingDelete}
+			/>
+		</div>
+	);
+}
@@ -0,0 +1,296 @@
+import { useId, useState, type FormEvent } from "react";
+import { useSuspenseQuery } 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 { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+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,
+	readOnly,
+	error,
+	onSubmit,
+	onCancel,
+}: {
+	initial?: ForwardZone;
+	busy: boolean;
+	readOnly: 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 || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...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 zones = useSuspenseQuery(forwardZonesQuery()).data;
+	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}"?`,
+	});
+	const readOnly = useReadOnlyConfig();
+
+	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" })}
+					disabled={readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...stylex.props(shared.largePrimaryButton, shared.focusRing)}
+				>
+					Add zone
+				</button>
+			</div>
+			<InlineError error={remove.error} />
+			{form?.mode === "create" && (
+				<ZoneForm
+					busy={create.isPending}
+					readOnly={readOnly}
+					error={create.error}
+					onSubmit={onSubmit}
+					onCancel={closeForm}
+				/>
+			)}
+			<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}
+											readOnly={readOnly}
+											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 })}
+												disabled={readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.rowButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => onDelete(zone)}
+												disabled={remove.isPending || readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.rowButton,
+													styles.dangerText,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Delete
+											</button>
+										</td>
+									</>
+								)}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete forward zone"
+				message={pendingDelete?.message ?? ""}
+				confirmLabel="Delete"
+				onConfirm={confirmPendingDelete}
+				onCancel={cancelPendingDelete}
+			/>
+		</div>
+	);
+}
@@ -88,6 +88,8 @@ test("fetches nothing until submit, then renders the blocked verdict", async ()

 test("defaults the group select to the default group (id 1)", async () => {
 	renderPage();
-	const select = (await screen.findByLabelText("Group")) as HTMLSelectElement;
-	expect(select.value).toBe("1");
+	// 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");
 });
@@ -0,0 +1,323 @@
+import { useState, type FormEvent, type ReactNode } from "react";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+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 LookupPage() {
+	const groups = useSuspenseQuery(groupsQuery()).data;
+	const preselectedGroupId = defaultGroupId(groups);
+
+	const [domain, setDomain] = useState("");
+	const [groupId, setGroupId] = useState(preselectedGroupId);
+	const [submitted, setSubmitted] = useState<Submitted | null>(null);
+
+	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)}>Lookup</h1>
+			<p {...stylex.props(styles.intro)}>
+				What the pipeline would do with a domain: local records, forward zones, block decision, safe search.
+			</p>
+			<form onSubmit={onSubmit} {...stylex.props(styles.form)}>
+				<div {...stylex.props(styles.domainField)}>
+					<label htmlFor="lookup-domain" {...stylex.props(styles.fieldLabel)}>
+						Domain
+					</label>
+					<input
+						id="lookup-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)}
+				>
+					Look up
+				</button>
+			</form>
+			{lookup.isFetching && <p {...stylex.props(styles.note)}>Looking up…</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>
+	);
+}
@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import { pauseMutation, pauseQuery } from "@/lib/queries";
 import InlineError from "@/lib/InlineError";
-import { buttonClass, insetFocusRing } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";

 const DURATIONS = [
 	{ label: "60 seconds", seconds: 60 },
@@ -11,6 +13,72 @@ const DURATIONS = [
 	{ label: "Indefinitely", seconds: null },
 ] as const;

+const styles = stylex.create({
+	/**
+	 * Disabled text darkens in light scheme and lightens in dark, the opposite
+	 * direction from `textMuted`, so the token cannot express it.
+	 */
+	trigger: {
+		color: {
+			default: null,
+			":disabled": "oklch(70.5% 0.015 286.067)",
+			"@media (prefers-color-scheme: dark)": { default: null, ":disabled": "oklch(44.2% 0.017 285.786)" },
+		},
+	},
+	pausedRow: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-end",
+	},
+	pausedControls: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	/**
+	 * Amber as standalone text on the app ground, not inside a warning banner, so
+	 * the `warn*` tokens — tuned against `warnSurface` — do not apply here.
+	 */
+	pausedLabel: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: {
+			default: "oklch(55.5% 0.163 48.998)",
+			"@media (prefers-color-scheme: dark)": "oklch(82.8% 0.189 84.429)",
+		},
+	},
+	anchor: {
+		position: "relative",
+	},
+	menu: {
+		position: "absolute",
+		right: 0,
+		top: "100%",
+		zIndex: 10,
+		marginTop: "0.25rem",
+		display: "flex",
+		width: "9rem",
+		flexDirection: "column",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingBlock: "0.25rem",
+		boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+	},
+	menuItem: {
+		borderStyle: "none",
+		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
+		color: "inherit",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		textAlign: "left",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+});
+
 export function formatRemaining(totalSeconds: number): string {
 	const clamped = Math.max(0, totalSeconds);
 	const hours = Math.floor(clamped / 3600);
@@ -35,8 +103,6 @@ function useNowSeconds(active: boolean): number {
 	return now;
 }

-const triggerButtonClass = `${buttonClass} disabled:text-zinc-400 dark:disabled:text-zinc-600`;
-
 export default function PauseWidget() {
 	const queryClient = useQueryClient();
 	const { data } = useQuery({
@@ -52,7 +118,7 @@ export default function PauseWidget() {

 	if (data === undefined) {
 		return (
-			<button type="button" disabled className={triggerButtonClass}>
+			<button type="button" disabled {...stylex.props(shared.button, styles.trigger, shared.focusRing)}>
 				Pause
 			</button>
 		);
@@ -60,16 +126,16 @@ export default function PauseWidget() {

 	if (data.paused) {
 		return (
-			<div className="flex flex-col items-end">
-				<div className="flex items-center gap-2">
-					<span className="text-sm text-amber-700 dark:text-amber-400">
+			<div {...stylex.props(styles.pausedRow)}>
+				<div {...stylex.props(styles.pausedControls)}>
+					<span {...stylex.props(styles.pausedLabel)}>
 						{data.until === null ? "Paused" : `Paused ${formatRemaining(data.until - now)}`}
 					</span>
 					<button
 						type="button"
 						onClick={() => mutation.mutate({ paused: false })}
 						disabled={mutation.isPending}
-						className={triggerButtonClass}
+						{...stylex.props(shared.button, styles.trigger, shared.focusRing)}
 					>
 						Resume
 					</button>
@@ -81,7 +147,7 @@ export default function PauseWidget() {

 	return (
 		<div
-			className="relative"
+			{...stylex.props(styles.anchor)}
 			onKeyDown={(e) => {
 				if (e.key === "Escape") setMenuOpen(false);
 			}}
@@ -92,15 +158,12 @@ export default function PauseWidget() {
 				aria-controls="pause-menu"
 				onClick={() => setMenuOpen((open) => !open)}
 				disabled={mutation.isPending}
-				className={triggerButtonClass}
+				{...stylex.props(shared.button, styles.trigger, shared.focusRing)}
 			>
 				Pause
 			</button>
 			{menuOpen && (
-				<div
-					id="pause-menu"
-					className="absolute right-0 top-full z-10 mt-1 flex w-36 flex-col rounded border border-zinc-200 bg-white py-1 shadow dark:border-zinc-800 dark:bg-zinc-900"
-				>
+				<div id="pause-menu" {...stylex.props(styles.menu)}>
 					{DURATIONS.map(({ label, seconds }) => (
 						<button
 							key={label}
@@ -111,7 +174,7 @@ export default function PauseWidget() {
 									seconds === null ? { paused: true } : { paused: true, duration_seconds: seconds },
 								);
 							}}
-							className={`px-3 py-1.5 text-left text-sm hover:bg-zinc-100 ${insetFocusRing} dark:hover:bg-zinc-800`}
+							{...stylex.props(styles.menuItem, shared.insetFocusRing)}
 						>
 							{label}
 						</button>
@@ -1,9 +1,29 @@
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createQueryClient } from "@/lib/queryClient";
-import type { QueriesPage, QueryRow } from "@/lib/types";
+import type { Client, QueriesPage, QueryRow } from "@/lib/types";
 import QueryLogPage from "./QueryLogPage";

+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 {
 		id,
@@ -48,6 +68,7 @@ beforeEach(() => {
 		"fetch",
 		vi.fn(async (input: RequestInfo | URL) => {
 			const url = String(input);
+			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 new Response(JSON.stringify(payload), {
@@ -90,6 +111,44 @@ test("renders the first page with type names, blocked badge, and formatted cells
 	expect(screen.getByText(/Showing 2 queries/)).toBeTruthy();
 });

+test("resolves each row's client to its display name, keeping the IP as the tooltip", async () => {
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL) => {
+			const url = String(input);
+			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,
+			} 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");
@@ -0,0 +1,374 @@
+import { useState, type FormEvent } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import * as api from "@/lib/api";
+import { formatMicros, formatTime } from "@/lib/format";
+import { queriesInfiniteQuery } from "@/lib/queries";
+import type { QueriesFilter, QueryRow } from "@/lib/types";
+import { ClientName, useClientNames, type ClientNames } from "@/features/clients/clientNames";
+import { qtypeName } from "./qtype";
+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)";
+
+const STATUS_OPTIONS = [
+	{ value: "any", label: "All" },
+	{ value: "blocked", label: "Blocked only" },
+	{ value: "allowed", label: "Allowed only" },
+];
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	/** One column on a phone, two from `sm`, five from `lg`, as before. */
+	filterGrid: {
+		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))",
+		},
+	},
+	filterLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	filterInput: {
+		marginTop: "0.25rem",
+		width: "100%",
+	},
+	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,
+	},
+	note: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	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",
+	},
+	/** The header tint is a shade off the ground in each scheme, not a token role. */
+	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,
+	},
+	/** `divide-y`: a hairline between rows, so the first row carries none. */
+	row: {
+		borderTopWidth: { default: 1, ":first-child": 0 },
+		borderTopStyle: "solid",
+		borderTopColor: colors.border,
+	},
+	cell: {
+		paddingInline: "0.75rem",
+		paddingBlock: "0.5rem",
+	},
+	nowrap: {
+		whiteSpace: "nowrap",
+	},
+	breakAll: {
+		wordBreak: "break-all",
+	},
+	small: {
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+	muted: {
+		color: colors.textMuted,
+	},
+	blockedWrap: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.375rem",
+	},
+	blockedBadge: {
+		borderRadius: "0.25rem",
+		paddingInline: "0.375rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+		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)" },
+	},
+	footer: {
+		marginTop: "0.75rem",
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	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);
+}
+
+function datetimeLocalToUnix(value: string): number | undefined {
+	if (value === "") return undefined;
+	const ms = new Date(value).getTime();
+	return Number.isFinite(ms) ? Math.floor(ms / 1000) : undefined;
+}
+
+export function BlockedCell({ row }: { row: Pick<QueryRow, "blocked" | "block_reason"> }) {
+	if (!row.blocked) return <span {...stylex.props(styles.muted)}>—</span>;
+	return (
+		<span {...stylex.props(styles.blockedWrap)}>
+			<span {...stylex.props(styles.blockedBadge)}>Blocked</span>
+			{row.block_reason !== "" && <span {...stylex.props(styles.small, styles.muted)}>{row.block_reason}</span>}
+		</span>
+	);
+}
+
+export function QueryCells({ row, clientNames }: { row: Omit<QueryRow, "id">; clientNames: ClientNames }) {
+	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)}>{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)}>
+				<BlockedCell row={row} />
+			</td>
+			<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>
+				{row.response_time_us === null ? "—" : formatMicros(row.response_time_us)}
+			</td>
+			<td {...stylex.props(styles.cell, styles.nowrap)}>
+				{row.cache_hit === null ? "—" : row.cache_hit ? "hit" : "miss"}
+			</td>
+			<td {...stylex.props(styles.cell, styles.small, styles.breakAll, shared.mono)}>
+				{row.upstream === "" ? "—" : row.upstream}
+			</td>
+		</>
+	);
+}
+
+export function QueryTableHead() {
+	return (
+		<thead {...stylex.props(styles.head)}>
+			<tr>
+				<th {...stylex.props(styles.th)}>Time</th>
+				<th {...stylex.props(styles.th)}>Domain</th>
+				<th {...stylex.props(styles.th)}>Client</th>
+				<th {...stylex.props(styles.th)}>Type</th>
+				<th {...stylex.props(styles.th)}>Status</th>
+				<th {...stylex.props(styles.th)}>Response</th>
+				<th {...stylex.props(styles.th)}>Cache</th>
+				<th {...stylex.props(styles.th)}>Upstream</th>
+			</tr>
+		</thead>
+	);
+}
+
+export default function QueryLogPage() {
+	const [domain, setDomain] = useState("");
+	const [client, setClient] = useState("");
+	const [blocked, setBlocked] = useState("any");
+	const [since, setSince] = useState("");
+	const [until, setUntil] = useState("");
+
+	const [applied, setApplied] = useState<QueriesFilter>({});
+
+	const base = useInfiniteQuery(queriesInfiniteQuery(applied));
+	const clientNames = useClientNames();
+
+	const pages = base.data?.pages ?? [];
+	const rows: QueryRow[] = pages.flatMap((page) => page.queries);
+	const filterActive = Object.keys(applied).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 applyFilters(event: FormEvent) {
+		event.preventDefault();
+		const filter: QueriesFilter = {};
+		if (domain.trim() !== "") filter.domain = domain.trim();
+		if (client.trim() !== "") filter.client = client.trim();
+		if (blocked === "blocked") filter.blocked = true;
+		if (blocked === "allowed") filter.blocked = false;
+		const sinceTs = datetimeLocalToUnix(since);
+		if (sinceTs !== undefined) filter.since = sinceTs;
+		const untilTs = datetimeLocalToUnix(until);
+		if (untilTs !== undefined) filter.until = untilTs;
+		setApplied(filter);
+	}
+
+	function clearFilters() {
+		setDomain("");
+		setClient("");
+		setBlocked("any");
+		setSince("");
+		setUntil("");
+		setApplied({});
+	}
+
+	function loadMore() {
+		if (!hasMore || base.isFetchingNextPage || base.isPlaceholderData) return;
+		void base.fetchNextPage();
+	}
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Query Log</h1>
+
+			<form onSubmit={applyFilters} {...stylex.props(styles.filterGrid)}>
+				<label {...stylex.props(styles.filterLabel)}>
+					Domain contains
+					<input
+						type="text"
+						value={domain}
+						onChange={(event) => setDomain(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
+					/>
+				</label>
+				<label {...stylex.props(styles.filterLabel)}>
+					Client (exact)
+					<input
+						type="text"
+						value={client}
+						onChange={(event) => setClient(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
+					/>
+				</label>
+				<Select
+					variant="compactField"
+					label="Status"
+					value={blocked}
+					onChange={setBlocked}
+					options={STATUS_OPTIONS}
+				/>
+				<label {...stylex.props(styles.filterLabel)}>
+					Since
+					<input
+						type="datetime-local"
+						value={since}
+						onChange={(event) => setSince(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
+					/>
+				</label>
+				<label {...stylex.props(styles.filterLabel)}>
+					Until
+					<input
+						type="datetime-local"
+						value={until}
+						onChange={(event) => setUntil(event.target.value)}
+						{...stylex.props(shared.smallInput, styles.filterInput, shared.focusRing)}
+					/>
+				</label>
+				<div {...stylex.props(styles.buttonRow)}>
+					<button type="submit" {...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}>
+						Apply filters
+					</button>
+					<button
+						type="button"
+						onClick={clearFilters}
+						{...stylex.props(shared.button, styles.toolbarButton, shared.focusRing)}
+					>
+						Clear
+					</button>
+					{base.isFetching && (
+						<span {...stylex.props(styles.note)} role="status">
+							Loading…
+						</span>
+					)}
+				</div>
+			</form>
+
+			{base.data === undefined ? (
+				<p {...stylex.props(styles.empty, shared.pulse)} role="status">
+					Loading query log…
+				</p>
+			) : 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)}>
+							<QueryTableHead />
+							<tbody>
+								{rows.map((row) => (
+									<tr key={row.id} {...stylex.props(styles.row)}>
+										<QueryCells row={row} clientNames={clientNames} />
+									</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.toolbarButton, shared.focusRing)}
+							>
+								{base.isFetchingNextPage ? "Loading…" : "Load more"}
+							</button>
+						)}
+					</div>
+					{moreError !== null && (
+						<p role="alert" {...stylex.props(styles.moreError)}>
+							Failed to load more: {moreError}
+						</p>
+					)}
+				</>
+			)}
+		</section>
+	);
+}
@@ -0,0 +1,233 @@
+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";
+
+const RESPONSES: Record<string, unknown> = {
+	"/api/rules": {
+		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: "*.cdn.example.com",
+				kind: "wildcard",
+				action: "allow",
+				created_at: 1700000100,
+			},
+		],
+	},
+	"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+};
+
+// The API orders groups by name, so the id-1 default is not always first.
+let groups: { id: number; name: string; safe_search: boolean }[];
+let deleted: string[];
+let posted: { pattern: string; kind: string }[];
+
+function deleteCalls(): string[] {
+	return deleted;
+}
+
+beforeEach(() => {
+	groups = [
+		{ id: 1, name: "Default", safe_search: false },
+		{ id: 2, name: "Kids", safe_search: true },
+	];
+	deleted = [];
+	posted = [];
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+			const url = String(input);
+			if (init?.method === "DELETE") {
+				deleted.push(url);
+				return new Response(null, { status: 204 });
+			}
+			if (url === "/api/rules" && init?.method === "POST") {
+				posted.push(JSON.parse(String(init.body)) as { pattern: string; kind: string });
+				return new Response(JSON.stringify({ error: "rate limited" }), {
+					status: 429,
+					headers: { "content-type": "application/json", "Retry-After": "5" },
+				});
+			}
+			const payload = url === "/api/groups" ? { groups } : RESPONSES[url];
+			if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+			return new Response(JSON.stringify(payload), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderRulesRoute() {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/rules"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+/**
+ * A RAC Select names its trigger with the current value and then the label, so
+ * the label alone is a suffix match. Opening it is the only way to read the
+ * options: there is no `<select>` carrying them any more.
+ */
+function trigger(label: string): HTMLElement {
+	return screen.getByRole("button", { name: new RegExp(`${label}$`) });
+}
+
+async function optionsOf(label: string): Promise<(string | null)[]> {
+	fireEvent.click(trigger(label));
+	const options = await screen.findAllByRole("option");
+	const labels = options.map((option) => option.textContent);
+	// Re-picking the current value closes the listbox and changes nothing.
+	fireEvent.click(options.find((option) => option.getAttribute("aria-selected") === "true") ?? options[0]!);
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+	return labels;
+}
+
+test("renders the rule table and the create form with contract enums", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	const table = within(screen.getByRole("table"));
+	expect(table.getByText("ads.example.com")).toBeTruthy();
+	expect(table.getByText("*.cdn.example.com")).toBeTruthy();
+	expect(table.getByText("block")).toBeTruthy();
+	expect(table.getByText("allow")).toBeTruthy();
+	expect(table.getByText("Kids")).toBeTruthy();
+	expect(screen.getAllByRole("button", { name: "Delete" })).toHaveLength(2);
+
+	expect(await optionsOf("Kind")).toEqual(["exact", "wildcard", "regex"]);
+	expect(await optionsOf("Action")).toEqual(["allow", "block"]);
+	expect(await optionsOf("Group")).toEqual(["Default", "Kids"]);
+});
+
+test("the kind selector can select the regex option, not only list it", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.click(trigger("Kind"));
+	const options = await screen.findAllByRole("option");
+	const regex = options.find((option) => option.textContent === "regex");
+	expect(regex).toBeTruthy();
+	fireEvent.click(regex!);
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+
+	expect(trigger("Kind").textContent).toContain("regex");
+});
+
+async function selectKind(label: string): Promise<void> {
+	fireEvent.click(trigger("Kind"));
+	const options = await screen.findAllByRole("option");
+	fireEvent.click(options.find((option) => option.textContent === label)!);
+	await waitFor(() => expect(screen.queryByRole("listbox")).toBeNull());
+}
+
+// A regex is stored and matched byte for byte, so whitespace inside it is data,
+// not slop the UI may drop. Exact and wildcard are normalized server-side.
+test("a regex pattern is posted untrimmed, an exact pattern is trimmed", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	await selectKind("regex");
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: " foo|bar " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(posted).toHaveLength(1));
+	expect(posted[0]).toMatchObject({ pattern: " foo|bar ", kind: "regex" });
+
+	await selectKind("exact");
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "  ads.example.net  " } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+	await waitFor(() => expect(posted).toHaveLength(2));
+	expect(posted[1]).toMatchObject({ pattern: "ads.example.net", kind: "exact" });
+});
+
+test("the pattern field opts out of mobile autocapitalize and autocorrect", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	const input = screen.getByLabelText("Pattern");
+	expect(input.getAttribute("autocapitalize")).toBe("none");
+	expect(input.getAttribute("autocorrect")).toBe("off");
+	expect(input.getAttribute("spellcheck")).toBe("false");
+});
+
+test("rule create shows a countdown when rate limited with Retry-After", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "ads.example.net" } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("Rate limited. Try again in 5s.");
+});
+
+test("the group select preselects the id-1 default, not the alphabetically first group", async () => {
+	groups = [
+		{ id: 5, name: "Attic", safe_search: false },
+		{ id: 1, name: "Default", safe_search: false },
+	];
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	expect(await optionsOf("Group")).toEqual(["Attic", "Default"]);
+	expect(trigger("Group").textContent).toContain("Default");
+});
+
+test("the group select falls back to the first group when the default is absent", async () => {
+	groups = [
+		{ id: 5, name: "Attic", safe_search: false },
+		{ id: 7, name: "Basement", safe_search: false },
+	];
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	expect(trigger("Group").textContent).toContain("Attic");
+});
+
+test("delete asks for confirmation, and cancelling sends no request", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+	const dialog = await screen.findByRole("alertdialog");
+	expect(dialog.textContent).toContain('Delete the block rule for "ads.example.com"?');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+	expect(deleteCalls()).toEqual([]);
+});
+
+test("confirming the delete dialog issues the DELETE for that rule", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[1]!);
+	await screen.findByRole("alertdialog");
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+	await waitFor(() => expect(deleteCalls()).toEqual(["/api/rules/2"]));
+});
@@ -0,0 +1,236 @@
+import { useState, type FormEvent } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { formatTime } from "@/lib/format";
+import InlineError from "@/lib/InlineError";
+import { groupsQuery, ruleCreateMutation, ruleDeleteMutation, rulesQuery } from "@/lib/queries";
+import type { Rule, RuleAction, RuleKind } from "@/lib/types";
+import { defaultGroupId } from "@/lib/defaultGroup";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+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({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	empty: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	pattern: {
+		fontWeight: 500,
+	},
+	allow: {
+		color: colors.primaryOnSurface,
+	},
+	block: {
+		color: colors.danger,
+	},
+	form: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.75rem",
+		marginTop: "1.5rem",
+		maxWidth: "36rem",
+	},
+	formHeading: {
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 500,
+	},
+	fieldLabel: {
+		display: "block",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	/** One column on a phone, three from the `sm` breakpoint, as before. */
+	fieldGrid: {
+		display: "grid",
+		gap: "0.75rem",
+		gridTemplateColumns: {
+			default: "repeat(1, minmax(0, 1fr))",
+			"@media (min-width: 640px)": "repeat(3, minmax(0, 1fr))",
+		},
+	},
+	submitRow: {
+		display: "flex",
+	},
+});
+
+export default function RulesPage() {
+	const queryClient = useQueryClient();
+	const { data: rules } = useSuspenseQuery(rulesQuery());
+	const { data: groups } = useSuspenseQuery(groupsQuery());
+
+	const create = useMutation(ruleCreateMutation(queryClient));
+	const remove = useMutation(ruleDeleteMutation(queryClient));
+
+	const [pattern, setPattern] = useState("");
+	const [kind, setKind] = useState<RuleKind>("exact");
+	const [action, setAction] = useState<RuleAction>("block");
+	const [groupId, setGroupId] = useState(() => defaultGroupId(groups));
+	const [pendingDelete, setPendingDelete] = useState<Rule | null>(null);
+	const readOnly = useReadOnlyConfig();
+
+	function onSubmit(event: FormEvent<HTMLFormElement>) {
+		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: groupId, pattern: sent, kind, action }, { onSuccess: () => setPattern("") });
+	}
+
+	function confirmDelete() {
+		if (pendingDelete === null) return;
+		remove.mutate(pendingDelete.id);
+		setPendingDelete(null);
+	}
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Rules</h1>
+
+			{rules.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No allow or block rules yet. Create one below.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(styles.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)}>Group</th>
+								<th {...stylex.props(shared.th)}>Created</th>
+								<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)}>{rule.group}</td>
+									<td {...stylex.props(shared.td)}>{formatTime(rule.created_at)}</td>
+									<td {...stylex.props(shared.td)}>
+										<button
+											type="button"
+											onClick={() => setPendingDelete(rule)}
+											disabled={remove.isPending || readOnly}
+											title={readOnly ? READ_ONLY_HINT : undefined}
+											{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
+										>
+											Delete
+										</button>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+			<InlineError error={remove.error} />
+
+			<form onSubmit={onSubmit} {...stylex.props(styles.form)}>
+				<h2 {...stylex.props(styles.formHeading)}>Create rule</h2>
+				<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}
+					/>
+					<Select
+						label="Group"
+						value={String(groupId)}
+						onChange={(value) => setGroupId(Number(value))}
+						options={groups.map((group) => ({ value: String(group.id), label: group.name }))}
+					/>
+				</div>
+				<div {...stylex.props(styles.submitRow)}>
+					<button
+						type="submit"
+						disabled={create.isPending || readOnly}
+						title={readOnly ? READ_ONLY_HINT : undefined}
+						{...stylex.props(shared.primaryButton, shared.focusRing)}
+					>
+						{create.isPending ? "Creating…" : "Create rule"}
+					</button>
+				</div>
+				<InlineError error={create.error} />
+			</form>
+
+			<ConfirmDialog
+				isOpen={pendingDelete !== null}
+				title="Delete rule"
+				message={
+					pendingDelete === null
+						? ""
+						: `Delete the ${pendingDelete.action} rule for "${pendingDelete.pattern}"?`
+				}
+				confirmLabel="Delete"
+				onConfirm={confirmDelete}
+				onCancel={() => setPendingDelete(null)}
+			/>
+		</section>
+	);
+}
@@ -0,0 +1,33 @@
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { useAuthority } from "./authority";
+
+const styles = stylex.create({
+	banner: {
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+});
+
+/**
+ * File authority is a standing condition, not an event, so this banner has no
+ * dismiss button: it stays up for as long as the process runs from a file.
+ */
+export default function ReadOnlyConfigBanner() {
+	const authority = useAuthority();
+	if (authority?.mode !== "managed_file") return null;
+	return (
+		<div role="status" {...stylex.props(styles.banner)}>
+			Configuration is managed by <code {...stylex.props(shared.mono)}>{authority.path}</code>. Edit the file and
+			restart nxdns to change it; the server rejects edits made here.
+		</div>
+	);
+}
@@ -0,0 +1,49 @@
+import * as stylex from "@stylexjs/stylex";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { dismissRestartBanner, useRestartBanner } from "./restartBanner";
+
+const styles = stylex.create({
+	banner: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+		borderBottomWidth: 1,
+		borderBottomStyle: "solid",
+		borderBottomColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	message: {
+		flex: 1,
+	},
+	dismiss: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.warnBorderStrong,
+		backgroundColor: "transparent",
+		color: "inherit",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.25rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+	},
+});
+
+export default function RestartBanner() {
+	const raised = useRestartBanner();
+	if (!raised) return null;
+	return (
+		<div role="status" {...stylex.props(styles.banner)}>
+			<span {...stylex.props(styles.message)}>Changes saved. Restart nxdns to apply.</span>
+			<button type="button" onClick={dismissRestartBanner} {...stylex.props(styles.dismiss, shared.focusRing)}>
+				Dismiss
+			</button>
+		</div>
+	);
+}
@@ -130,7 +130,11 @@ test("a changed field enables Save and the PUT body is exactly the diff", async
 test("enum and boolean fields diff as their own types", async () => {
 	await renderPage();
 	const logging = screen.getByRole("group", { name: "Logging" });
-	fireEvent.change(within(logging).getByLabelText("level"), { target: { value: "debug" } });
+	// 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));
@@ -1,11 +1,15 @@
 import { useState, type FormEvent } from "react";
 import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import InlineError from "@/lib/InlineError";
 import { settingsPutMutation, settingsQuery } from "@/lib/queries";
 import { buildSettingsPatch } from "@/lib/settingsDiff";
 import type { Settings, SettingsPatch } from "@/lib/types";
 import { raiseRestartBanner } from "./restartBanner";
-import { focusRing } from "@/ui/classes";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "./authority";
+import Select from "@/ui/Select";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";

 /** True when the patch touches anything besides the write-only `web.password` (ruling 11). */
 export function patchRequiresRestart(patch: SettingsPatch): boolean {
@@ -138,8 +142,121 @@ const SECTIONS: readonly AnySectionDef[] = [
 	}),
 ];

-const LABEL_CLASS = "text-sm text-zinc-700 dark:text-zinc-300";
-const fieldInputClass = `rounded border border-zinc-300 bg-white px-2 py-1 text-sm ${focusRing} dark:border-zinc-700 dark:bg-zinc-900`;
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	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`, as before. */
+	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 FieldRow({
 	section,
@@ -155,15 +272,15 @@ function FieldRow({
 	const id = `${section}.${def.key}`;
 	if (def.kind === "boolean") {
 		return (
-			<div className="flex items-center gap-2">
+			<div {...stylex.props(styles.checkboxRow)}>
 				<input
 					id={id}
 					type="checkbox"
 					checked={value as boolean}
 					onChange={(e) => onChange(e.target.checked)}
-					className={focusRing}
+					{...stylex.props(shared.focusRing)}
 				/>
-				<label htmlFor={id} className={LABEL_CLASS}>
+				<label htmlFor={id} {...stylex.props(styles.label)}>
 					{def.key}
 				</label>
 			</div>
@@ -171,30 +288,20 @@ function FieldRow({
 	}
 	if (Array.isArray(def.kind)) {
 		return (
-			<div className="flex flex-col gap-1">
-				<label htmlFor={id} className={LABEL_CLASS}>
-					{def.key}
-				</label>
-				<select
-					id={id}
-					value={value as string}
-					onChange={(e) => onChange(e.target.value)}
-					className={fieldInputClass}
-				>
-					{def.kind.map((option) => (
-						<option key={option} value={option}>
-							{option}
-						</option>
-					))}
-				</select>
-			</div>
+			<Select
+				variant="inline"
+				label={def.key}
+				value={value as string}
+				onChange={onChange}
+				options={def.kind.map((option) => ({ value: option, label: option }))}
+			/>
 		);
 	}
 	if (def.kind === "number") {
 		const numeric = value as number;
 		return (
-			<div className="flex flex-col gap-1">
-				<label htmlFor={id} className={LABEL_CLASS}>
+			<div {...stylex.props(styles.field)}>
+				<label htmlFor={id} {...stylex.props(styles.label)}>
 					{def.key}
 				</label>
 				<input
@@ -202,14 +309,14 @@ function FieldRow({
 					type="number"
 					value={Number.isNaN(numeric) ? "" : numeric}
 					onChange={(e) => onChange(e.target.valueAsNumber)}
-					className={fieldInputClass}
+					{...stylex.props(styles.fieldInput, shared.focusRing)}
 				/>
 			</div>
 		);
 	}
 	return (
-		<div className="flex flex-col gap-1">
-			<label htmlFor={id} className={LABEL_CLASS}>
+		<div {...stylex.props(styles.field)}>
+			<label htmlFor={id} {...stylex.props(styles.label)}>
 				{def.key}
 			</label>
 			<input
@@ -217,7 +324,7 @@ function FieldRow({
 				type="text"
 				value={value as string}
 				onChange={(e) => onChange(e.target.value)}
-				className={fieldInputClass}
+				{...stylex.props(styles.fieldInput, shared.focusRing)}
 			/>
 		</div>
 	);
@@ -242,7 +349,8 @@ export default function SettingsPage() {
 		);
 	});
 	const patch = buildSettingsPatch(baseline, edited, password === "" ? undefined : password);
-	const saveDisabled = patch === null || passwordsMismatch || hasInvalidNumber || mutation.isPending;
+	const readOnly = useReadOnlyConfig();
+	const saveDisabled = patch === null || passwordsMismatch || hasInvalidNumber || mutation.isPending || readOnly;

 	function setField(section: keyof Settings, key: string, value: unknown): void {
 		setEdited((prev) => ({
@@ -268,16 +376,16 @@ export default function SettingsPage() {

 	return (
 		<section>
-			<h1 className="text-2xl font-semibold">Settings</h1>
-			<p className="mt-1 text-sm text-zinc-500">
+			<h1 {...stylex.props(styles.heading)}>Settings</h1>
+			<p {...stylex.props(styles.intro)}>
 				Changes are validated as a whole; every setting requires a restart to take effect.
 			</p>
-			<form onSubmit={handleSubmit} className="mt-4 max-w-3xl">
-				<fieldset disabled={mutation.isPending} className="space-y-6">
+			<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
+				<fieldset disabled={mutation.isPending || readOnly} {...stylex.props(styles.sections)}>
 					{SECTIONS.map(({ section, title, fields }) => (
-						<fieldset key={section} className="rounded border border-zinc-200 p-4 dark:border-zinc-800">
-							<legend className="px-1 text-sm font-semibold">{title}</legend>
-							<div className="grid gap-3 sm:grid-cols-2">
+						<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}
@@ -289,12 +397,12 @@ export default function SettingsPage() {
 								))}
 								{section === "web" && (
 									<>
-										<p className={LABEL_CLASS}>
+										<p {...stylex.props(styles.label)}>
 											auth_enabled: {data.settings.web.auth_enabled ? "true" : "false"}{" "}
-											<span className="text-zinc-500">(derived, read-only)</span>
+											<span {...stylex.props(styles.derived)}>(derived, read-only)</span>
 										</p>
-										<div className="flex flex-col gap-1">
-											<label htmlFor="web.password" className={LABEL_CLASS}>
+										<div {...stylex.props(styles.field)}>
+											<label htmlFor="web.password" {...stylex.props(styles.label)}>
 												password
 											</label>
 											<input
@@ -303,11 +411,11 @@ export default function SettingsPage() {
 												autoComplete="new-password"
 												value={password}
 												onChange={(e) => setPassword(e.target.value)}
-												className={fieldInputClass}
+												{...stylex.props(styles.fieldInput, shared.focusRing)}
 											/>
 										</div>
-										<div className="flex flex-col gap-1">
-											<label htmlFor="web.password_confirm" className={LABEL_CLASS}>
+										<div {...stylex.props(styles.field)}>
+											<label htmlFor="web.password_confirm" {...stylex.props(styles.label)}>
 												confirm password
 											</label>
 											<input
@@ -316,17 +424,17 @@ export default function SettingsPage() {
 												autoComplete="new-password"
 												value={confirm}
 												onChange={(e) => setConfirm(e.target.value)}
-												className={fieldInputClass}
+												{...stylex.props(styles.fieldInput, shared.focusRing)}
 											/>
 										</div>
 										{password !== "" && (
-											<p className="text-sm text-amber-700 sm:col-span-2 dark:text-amber-400">
+											<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 className="text-sm text-red-700 sm:col-span-2 dark:text-red-400">
+											<p {...stylex.props(styles.spanRow, styles.mismatchNotice)}>
 												Passwords do not match.
 											</p>
 										)}
@@ -335,11 +443,12 @@ export default function SettingsPage() {
 							</div>
 						</fieldset>
 					))}
-					<div className="flex items-center gap-3">
+					<div {...stylex.props(styles.submitRow)}>
 						<button
 							type="submit"
 							disabled={saveDisabled}
-							className={`rounded bg-blue-600 px-4 py-1.5 text-sm font-medium text-white ${focusRing} disabled:bg-zinc-300 disabled:text-zinc-500 dark:disabled:bg-zinc-800`}
+							title={readOnly ? READ_ONLY_HINT : undefined}
+							{...stylex.props(styles.save, shared.focusRing)}
 						>
 							{mutation.isPending ? "Saving…" : "Save"}
 						</button>
@@ -0,0 +1,254 @@
+import { render, screen, 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 { Authority, Settings, SettingsEnvelope } from "@/lib/types";
+
+// One file for the whole file-mode sweep: the settings envelope is the only
+// discovery mechanism, so every page test needs the same stubbed envelope.
+
+const CONFIG_PATH = "/etc/nxdns/config.zon";
+
+const DATABASE: Authority = { mode: "database", path: null, reconciled_at: null };
+const MANAGED_FILE: Authority = { mode: "managed_file", path: CONFIG_PATH, reconciled_at: 1754899200 };
+
+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,
+			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 },
+	};
+}
+
+function envelope(authority: Authority): SettingsEnvelope {
+	return { settings: baseSettings(), restart_required: [], authority };
+}
+
+const GROUPS = {
+	groups: [
+		{ id: 1, name: "default", safe_search: false },
+		{ id: 2, name: "kids", safe_search: true },
+	],
+};
+
+const BLOCKLISTS = {
+	blocklists: [
+		{
+			id: 1,
+			url: "https://example.com/ads.txt",
+			name: "Ads",
+			enabled: true,
+			is_suggested: false,
+			last_updated: null,
+			domain_count: 100,
+			wildcard_count: 0,
+			skipped_regex_count: 0,
+			checksum: null,
+		},
+	],
+};
+
+const RULES = {
+	rules: [
+		{
+			id: 1,
+			group_id: 1,
+			group: "default",
+			pattern: "ads.example.com",
+			kind: "exact",
+			action: "block",
+			created_at: 1700000000,
+		},
+	],
+};
+
+const CLIENTS = {
+	clients: [
+		{
+			id: 1,
+			ip: "192.168.1.10",
+			name: "laptop",
+			group_id: 1,
+			group: "default",
+			hand_edited: true,
+			first_seen: 1700000000,
+			last_seen: 1700003600,
+		},
+		{
+			id: 2,
+			ip: "192.168.1.11",
+			name: "",
+			group_id: 2,
+			group: "kids",
+			hand_edited: false,
+			first_seen: 1700000000,
+			last_seen: 1700007200,
+		},
+	],
+};
+
+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 };
+
+const BASE: Record<string, unknown> = {
+	"GET /api/version": VERSION,
+	"GET /api/groups": GROUPS,
+	"GET /api/blocklists": BLOCKLISTS,
+	"GET /api/rules": RULES,
+	"GET /api/clients": CLIENTS,
+	"GET /api/client-prefixes": PREFIXES,
+};
+
+function stubFetch(map: Record<string, unknown>) {
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+			const key = `${init?.method ?? "GET"} ${String(input)}`;
+			const payload = map[key];
+			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" },
+			});
+		}),
+	);
+}
+
+async function renderAt(route: string, heading: string, authority: Authority) {
+	stubFetch({ ...BASE, "GET /api/settings": envelope(authority) });
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: [route] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+	await screen.findByRole("heading", { name: heading });
+}
+
+function button(name: string): HTMLButtonElement {
+	return screen.getByRole("button", { name }) as HTMLButtonElement;
+}
+
+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;
+}
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+test("the banner names the managed file in file mode", async () => {
+	await renderAt("/rules", "Rules", MANAGED_FILE);
+
+	const banner = await screen.findByText(/configuration is managed by/i);
+	expect(banner.textContent).toContain(CONFIG_PATH);
+	expect(banner.textContent).toMatch(/restart/i);
+	expect(banner.closest('[role="status"]')).toBeTruthy();
+});
+
+test("the banner is absent in database mode", async () => {
+	await renderAt("/rules", "Rules", DATABASE);
+
+	await screen.findByRole("button", { name: "Create rule" });
+	expect(screen.queryByText(/configuration is managed by/i)).toBeNull();
+});
+
+function kidsRow(): HTMLElement {
+	const row = screen.getByText("kids").closest("li");
+	if (row === null) throw new Error("no row for group kids");
+	return row;
+}
+
+test("file mode disables the Groups create and delete controls", async () => {
+	await renderAt("/groups", "Groups", MANAGED_FILE);
+	await screen.findByText(/configuration is managed by/i);
+
+	expect(button("Create").disabled).toBe(true);
+	expect((within(kidsRow()).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(true);
+	expect((within(kidsRow()).getByRole("checkbox", { name: "Safe search" }) as HTMLInputElement).disabled).toBe(true);
+});
+
+test("database mode leaves the Groups create and delete controls enabled", async () => {
+	await renderAt("/groups", "Groups", DATABASE);
+	await screen.findByRole("button", { name: "Create" });
+
+	expect(button("Create").disabled).toBe(false);
+	expect((within(kidsRow()).getByRole("button", { name: "Delete" }) as HTMLButtonElement).disabled).toBe(false);
+	expect((within(kidsRow()).getByRole("checkbox", { name: "Safe search" }) as HTMLInputElement).disabled).toBe(false);
+});
+
+test("file mode disables the Rules create and delete controls", async () => {
+	await renderAt("/rules", "Rules", MANAGED_FILE);
+	await screen.findByText(/configuration is managed by/i);
+
+	expect(button("Create rule").disabled).toBe(true);
+	expect(button("Delete").disabled).toBe(true);
+});
+
+test("database mode leaves the Rules create and delete controls enabled", async () => {
+	await renderAt("/rules", "Rules", DATABASE);
+	await screen.findByRole("button", { name: "Create rule" });
+
+	expect(button("Create rule").disabled).toBe(false);
+	expect(button("Delete").disabled).toBe(false);
+});
+
+test("file mode keeps delete live for an observed client and blocks it for a declared one", async () => {
+	await renderAt("/clients", "Clients", MANAGED_FILE);
+	await screen.findByText(/configuration is managed by/i);
+
+	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);
+	expect((within(observed).getByRole("button", { name: "Edit" }) as HTMLButtonElement).disabled).toBe(true);
+});
+
+test("file mode leaves the blocklist refresh button enabled", async () => {
+	await renderAt("/blocklists", "Blocklists", MANAGED_FILE);
+	await screen.findByText(/configuration is managed by/i);
+
+	expect(button("Update now").disabled).toBe(false);
+	expect(button("Add source").disabled).toBe(true);
+	expect((screen.getByRole("checkbox", { name: "Ads enabled" }) as HTMLInputElement).disabled).toBe(true);
+});
@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { settingsQuery } from "@/lib/queries";
+import type { Authority } from "@/lib/types";
+
+/** The one-line explanation on every control file authority takes away. */
+export const READ_ONLY_HINT = "Configuration is managed by a file; edit the file and restart nxdns.";
+
+/**
+ * The running server's configuration authority, read from the settings
+ * envelope — the only route that carries it. `undefined` until that query
+ * resolves. Every page may call this: it is the shared `["settings"]` key, so
+ * the shell's own subscription serves them all from cache.
+ */
+export function useAuthority(): Authority | undefined {
+	return useQuery(settingsQuery()).data?.authority;
+}
+
+/**
+ * True only once the server has said a file owns the configuration. While the
+ * mode is unknown nothing is disabled — the 403 is the enforcement, this is
+ * the courtesy.
+ */
+export function useReadOnlyConfig(): boolean {
+	return useAuthority()?.mode === "managed_file";
+}
@@ -1,19 +1,67 @@
 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";
+import { READ_ONLY_HINT } from "@/features/settings/authority";

 const DEFAULT_PRIORITY = "100";

 interface UpstreamFormProps {
 	initial?: Upstream;
 	busy: boolean;
+	/** File authority: the server answers 403, so the submit stays down. */
+	readOnly: boolean;
 	error: Error | null;
 	onSubmit: (input: UpstreamInput) => Promise<void>;
 	onCancel?: () => void;
 }

-export default function UpstreamForm({ initial, busy, error, onSubmit, onCancel }: UpstreamFormProps) {
+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, readOnly, error, onSubmit, onCancel }: UpstreamFormProps) {
 	const [url, setUrl] = useState(initial?.url ?? "");
 	const [priority, setPriority] = useState(initial === undefined ? DEFAULT_PRIORITY : String(initial.priority));
 	const [enabled, setEnabled] = useState(initial?.enabled ?? true);
@@ -42,10 +90,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 +103,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 +116,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 +129,36 @@ 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 || readOnly}
+					title={readOnly ? READ_ONLY_HINT : undefined}
+					{...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>
 				)}
@@ -134,15 +134,29 @@ test("toggling enabled resends the whole row", async () => {
 	await screen.findByRole("status");
 });

-test("delete asks for confirmation and skips the request when refused", async () => {
+/** The row Delete opens the dialog; the dialog's own Delete is the confirm. */
+async function openDeleteDialog() {
+	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+	return await screen.findByRole("alertdialog");
+}
+
+test("delete asks for confirmation and skips the request when cancelled", async () => {
 	await renderUpstreamsRoute();

-	vi.spyOn(window, "confirm").mockReturnValue(false);
-	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+	const dialog = await openDeleteDialog();
+	expect(dialog.textContent).toContain('Delete upstream "udp://1.1.1.1:53"?');
+
+	fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+	await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
 	expect(calls).toHaveLength(0);
+});
+
+test("confirming the delete dialog issues the DELETE and raises the restart banner", async () => {
+	await renderUpstreamsRoute();
+
+	await openDeleteDialog();
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));

-	vi.spyOn(window, "confirm").mockReturnValue(true);
-	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
 	await waitFor(() => expect(calls).toHaveLength(1));
 	expect(calls[0]!.method).toBe("DELETE");
 	expect(calls[0]!.url).toBe("/api/upstreams/1");
@@ -185,14 +199,14 @@ test("a 409 on toggle renders the last-enabled conflict above the form", async (
 test("a 409 on delete renders the last-enabled conflict", async () => {
 	await renderUpstreamsRoute();

-	vi.spyOn(window, "confirm").mockReturnValue(true);
 	writeResponse = () =>
 		new Response(JSON.stringify({ error: "the last enabled upstream cannot be removed" }), {
 			status: 409,
 			headers: { "content-type": "application/json" },
 		});

-	fireEvent.click(screen.getAllByRole("button", { name: "Delete" })[0]!);
+	await openDeleteDialog();
+	fireEvent.click(screen.getByRole("button", { name: "Delete" }));

 	const alert = await screen.findByRole("alert");
 	expect(alert.textContent).toBe("the last enabled upstream cannot be removed");
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useMutation, useQueryClient, useSuspenseQuery } 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 { raiseRestartBanner } from "../settings/restartBanner";
+import UpstreamForm from "./UpstreamForm";
+import ConfirmDialog from "@/ui/ConfirmDialog";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
+
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	intro: {
+		marginTop: "0.5rem",
+		maxWidth: "42rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	empty: {
+		marginTop: "1rem",
+		color: colors.textMuted,
+	},
+	table: {
+		width: "100%",
+		minWidth: "max-content",
+		borderCollapse: "collapse",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	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 },
+	},
+});
+
+export default function UpstreamsPage() {
+	const queryClient = useQueryClient();
+	const { data: upstreams } = useSuspenseQuery(upstreamsQuery());
+	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));
+	const readOnly = useReadOnlyConfig();
+
+	async function submitForm(input: UpstreamInput) {
+		if (editing === null) {
+			await create.mutateAsync(input);
+		} else {
+			await save.mutateAsync({ id: editing.id, input });
+			setEditing(null);
+		}
+		raiseRestartBanner();
+	}
+
+	function toggleEnabled(u: Upstream) {
+		toggle.mutate(
+			{
+				id: u.id,
+				input: { url: u.url, priority: u.priority, enabled: !u.enabled, tls_name: u.tls_name },
+			},
+			{ onSuccess: () => raiseRestartBanner() },
+		);
+	}
+
+	function confirmDelete() {
+		if (pendingDelete === null) return;
+		remove.mutate(pendingDelete.id, { onSuccess: () => raiseRestartBanner() });
+		setPendingDelete(null);
+	}
+
+	const formError = editing === null ? create.error : save.error;
+	const tableError = remove.error ?? toggle.error;
+
+	return (
+		<section>
+			<h1 {...stylex.props(styles.heading)}>Upstreams</h1>
+			<p {...stylex.props(styles.intro)}>
+				The pool builds its clients at startup, so an edit here takes effect at the next restart. The upstream
+				health table on the Dashboard reflects the running pool, not this list.
+			</p>
+
+			{upstreams.length === 0 ? (
+				<p {...stylex.props(styles.empty)}>No upstreams yet. Add one below.</p>
+			) : (
+				<div {...stylex.props(shared.tableWrap)}>
+					<table {...stylex.props(styles.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 || readOnly}
+											title={readOnly ? READ_ONLY_HINT : undefined}
+											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)}
+												disabled={readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(
+													shared.linkButton,
+													styles.dimWhenDisabled,
+													shared.focusRing,
+												)}
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onClick={() => setPendingDelete(u)}
+												disabled={remove.isPending || readOnly}
+												title={readOnly ? READ_ONLY_HINT : undefined}
+												{...stylex.props(shared.dangerLinkButton, 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}
+				readOnly={readOnly}
+				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)}
+			/>
+		</section>
+	);
+}
@@ -1,5 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
+import { styles as shared } from "@/ui/styles";
 import InlineError from "./InlineError";

 test("no retry button without onRetry", () => {
@@ -13,7 +15,10 @@ test("onRetry renders a focusable retry button that calls back", () => {
 	render(<InlineError error={new ApiError(500, "internal")} onRetry={onRetry} />);

 	const button = screen.getByRole("button", { name: "Retry" });
-	expect(button.className).toContain("focus-visible:outline-2");
+	// The accessibility floor: StyleX compiles the ring to opaque class names, so
+	// the check is that every class `focusRing` produces landed on the button.
+	const ring = (stylex.props(shared.focusRing).className ?? "").split(" ");
+	expect(button.className.split(" ")).toEqual(expect.arrayContaining(ring));
 	fireEvent.click(button);
 	expect(onRetry).toHaveBeenCalledTimes(1);
 });
@@ -1,6 +1,26 @@
 import { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
 import { ApiError } from "@/lib/api";
-import { focusRing } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	message: {
+		marginTop: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.danger,
+	},
+	retry: {
+		borderStyle: "none",
+		backgroundColor: "transparent",
+		padding: 0,
+		color: "inherit",
+		fontSize: "inherit",
+		fontWeight: 500,
+		textDecorationLine: "underline",
+	},
+});

 /**
 * Inline mutation error per ruling 17: 400/409 messages verbatim, 429 with
@@ -36,12 +56,12 @@ export default function InlineError({ error, onRetry }: { error: unknown; onRetr
 	}

 	return (
-		<p role="alert" className="mt-2 text-sm text-red-600 dark:text-red-400">
+		<p role="alert" {...stylex.props(styles.message)}>
 			{message}
 			{onRetry !== undefined && (
 				<>
 					{" "}
-					<button type="button" onClick={onRetry} className={`font-medium underline ${focusRing}`}>
+					<button type="button" onClick={onRetry} {...stylex.props(styles.retry, shared.focusRing)}>
 						Retry
 					</button>
 				</>
@@ -9,7 +9,7 @@
 // declare, and a string outside a literal union.
 //
 // Regenerate 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"

 import type {
 	Blocklist,
@@ -87,11 +87,13 @@ export const sample_list_blocklists: { blocklists: Blocklist[] } = {
 			checksum: null,
 			domain_count: 0,
 			enabled: false,
+			exception_count: 0,
 			id: 0,
 			is_suggested: false,
 			last_updated: null,
 			name: "ads",
 			skipped_regex_count: 0,
+			skipped_unsupported_count: 0,
 			url: "https://lists.example/ads.txt",
 			wildcard_count: 0,
 		},
@@ -110,12 +112,14 @@ export const sample_update_blocklists_now: { sources: SourceStatus[] } = {
 	sources: [
 		{
 			domains: 0,
+			exceptions: 0,
 			id: 0,
 			last_attempt: 0,
 			last_error: "",
 			last_success: 0,
 			loaded: false,
 			skipped_regex: 0,
+			skipped_unsupported: 0,
 			state: "never_fetched",
 			url: "https://lists.example/ads.txt",
 			wildcards: 0,
@@ -255,6 +259,7 @@ export const sample_list_clients: { clients: Client[] } = {
 			id: 0,
 			ip: "192.168.1.50",
 			last_seen: 0,
+			learned_name: "",
 			name: "laptop",
 		},
 	],
@@ -268,6 +273,7 @@ export const sample_update_client: Client = {
 	id: 0,
 	ip: "192.168.1.50",
 	last_seen: 0,
+	learned_name: "",
 	name: "laptop-renamed",
 };

@@ -445,6 +451,11 @@ export const sample_post_pause: PauseState = {
 };

 export const sample_get_settings: SettingsEnvelope = {
+	authority: {
+		mode: "database",
+		path: null,
+		reconciled_at: null,
+	},
 	restart_required: [
 		"upstream.attempt_timeout_ms",
 		"upstream.read_timeout_ms",
@@ -563,6 +574,11 @@ export const sample_get_settings: SettingsEnvelope = {
 };

 export const sample_put_settings: SettingsEnvelope = {
+	authority: {
+		mode: "database",
+		path: null,
+		reconciled_at: null,
+	},
 	restart_required: [
 		"upstream.attempt_timeout_ms",
 		"upstream.read_timeout_ms",
@@ -6,4 +6,4 @@
 pub const bytes = @embedFile("contractSamples.gen.ts");

 /// Repo-relative path, so a failing assertion names the file to regenerate.
-pub const path = "web/src/lib/contractSamples.gen.ts";
+pub const path = "admin/src/lib/contractSamples.gen.ts";
@@ -160,7 +160,9 @@ export interface Blocklist {
 	last_updated: number | null;
 	domain_count: number;
 	wildcard_count: number;
+	exception_count: number;
 	skipped_regex_count: number;
+	skipped_unsupported_count: number;
 	checksum: string | null;
 }

@@ -189,10 +191,12 @@ export interface SourceStatus {
 	last_error: string;
 	domains: number;
 	wildcards: number;
+	exceptions: number;
 	skipped_regex: number;
+	skipped_unsupported: number;
 }

-export type RuleKind = "exact" | "wildcard";
+export type RuleKind = "exact" | "wildcard" | "regex";
 export type RuleAction = "allow" | "block";

 export interface Rule {
@@ -252,6 +256,8 @@ export interface Client {
 	id: number;
 	ip: string;
 	name: string;
+	/** Learned over reverse DNS. `name` wins whenever it is non-empty. */
+	learned_name: string;
 	group_id: number;
 	group: string;
 	hand_edited: boolean;
@@ -380,9 +386,23 @@ export interface Settings {
 	};
 }

+/**
+ * Which configuration source the running process obeys. `path` and
+ * `reconciled_at` are non-null only under `managed_file`: the file the process
+ * loaded, and the epoch second at which it loaded it. Authority lives in the
+ * invocation, never in the database, so this is the only place the UI can read
+ * it — and it rides an authenticated route, never the open ones.
+ */
+export interface Authority {
+	mode: "database" | "managed_file";
+	path: string | null;
+	reconciled_at: number | null;
+}
+
 export interface SettingsEnvelope {
 	settings: Settings;
 	restart_required: string[];
+	authority: Authority;
 }

 export interface TlsListenerPatch {
@@ -1,4 +1,5 @@
 import type { QueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import {
 	createRootRouteWithContext,
 	createRoute,
@@ -27,16 +28,44 @@ import {
 	upstreamHealthQuery,
 	upstreamsQuery,
 } from "@/lib/queries";
-import { retryButtonClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";

 export interface RouterContext {
 	queryClient: QueryClient;
 }

+const styles = stylex.create({
+	pending: {
+		padding: "2rem",
+		textAlign: "center",
+		color: colors.textMuted,
+	},
+	errorBox: {
+		margin: "1rem",
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		padding: "1rem",
+	},
+	errorTitle: {
+		fontWeight: 600,
+		color: colors.dangerText,
+	},
+	errorDetail: {
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.dangerText,
+	},
+});
+
 function RoutePending() {
 	return (
-		<div className="p-8 text-center text-zinc-500" role="status">
-			<span className="animate-pulse">Loading…</span>
+		<div {...stylex.props(styles.pending)} role="status">
+			<span {...stylex.props(shared.pulse)}>Loading…</span>
 		</div>
 	);
 }
@@ -59,13 +88,14 @@ function RouteError({ error }: ErrorComponentProps) {
 		}
 	}
 	return (
-		<div
-			role="alert"
-			className="m-4 rounded border border-red-300 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950"
-		>
-			<h2 className="font-semibold text-red-800 dark:text-red-200">{title}</h2>
-			<p className="mt-1 text-sm text-red-700 dark:text-red-300">{detail}</p>
-			<button type="button" onClick={() => void router.invalidate()} className={retryButtonClass}>
+		<div role="alert" {...stylex.props(styles.errorBox)}>
+			<h2 {...stylex.props(styles.errorTitle)}>{title}</h2>
+			<p {...stylex.props(styles.errorDetail)}>{detail}</p>
+			<button
+				type="button"
+				onClick={() => void router.invalidate()}
+				{...stylex.props(shared.retryButton, shared.focusRing)}
+			>
 				Retry
 			</button>
 		</div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
mokhtar	3ed9a57822	changelog: 0.0.5 releases today Gates / test (push) Successful in 1m44s Details Gates / frontend (push) Successful in 1m2s Details Gates / test-aarch64 (push) Successful in 5m55s Details Gates / package (push) Successful in 28s Details Gates / container (push) Successful in 16s Details CI / gates (push) Successful in 20m25s Details Release / guard (push) Successful in 18s Details Gates / frontend (push) Successful in 1m5s Details Gates / test-aarch64 (push) Successful in 6m33s Details Gates / test (push) Successful in 1m31s Details Gates / package (push) Successful in 3m41s Details Gates / container (push) Successful in 9s Details Release / gates (push) Successful in 19m27s Details Release / publish (push) Successful in 5m43s Details	2026-08-16 23:55:19 +02:00
mokhtar	0601098ab0	admin: drop the learned tag from the query tables	2026-08-16 23:55:10 +02:00
mokhtar	49c7da2381	changelog: 0.0.4 releases today Release / guard (push) Successful in 26s Details Gates / frontend (push) Successful in 1m26s Details Gates / test (push) Successful in 1m44s Details Gates / frontend (push) Successful in 1m6s Details Gates / test-aarch64 (push) Successful in 6m36s Details Gates / test (push) Successful in 1m33s Details Gates / test-aarch64 (push) Successful in 5m50s Details Gates / package (push) Successful in 5m5s Details Gates / package (push) Successful in 30s Details Gates / container (push) Successful in 15s Details CI / gates (push) Successful in 21m58s Details Gates / container (push) Successful in 10s Details Release / gates (push) Successful in 20m42s Details Release / publish (push) Successful in 4m41s Details	2026-08-16 23:00:41 +02:00
mokhtar	794ea6541f	admin: live and query log pages show client names	2026-08-16 23:00:31 +02:00
mokhtar	ba037c5958	website: plan for the nxdns.sh marketing and docs site Gates / frontend (push) Successful in 1m8s Details Gates / test (push) Successful in 2m5s Details Gates / test-aarch64 (push) Successful in 7m1s Details Gates / package (push) Successful in 4m3s Details Gates / container (push) Successful in 15s Details CI / gates (push) Successful in 13m28s Details	2026-08-16 00:17:58 +02:00
mokhtar	1e97c80f6b	rename web/ to admin/, along with the web-named build and cli identifiers	2026-08-16 00:17:58 +02:00
mokhtar	5b3d1cd65c	docs: unwrap hand-wrapped prose repo-wide Gates / frontend (push) Successful in 1m2s Details Gates / test (push) Successful in 1m38s Details Gates / package (push) Successful in 5m5s Details Gates / test-aarch64 (push) Successful in 6m30s Details Gates / container (push) Successful in 15s Details CI / gates (push) Successful in 13m30s Details	2026-08-15 16:27:36 +02:00
mokhtar	50b8fd5c61	changelog: unwrap hand-wrapped lines, release bodies render newlines as breaks Gates / frontend (push) Successful in 1m2s Details Gates / test (push) Successful in 1m31s Details Gates / package (push) Successful in 3m36s Details Gates / container (push) Successful in 15s Details CI / gates (push) Successful in 11m21s Details Gates / test-aarch64 (push) Successful in 5m54s Details	2026-08-15 13:06:44 +02:00
mokhtar	efbe355070	changelog: 0.0.3 releases today Gates / frontend (push) Successful in 1m3s Details Gates / test (push) Successful in 1m39s Details Gates / test-aarch64 (push) Successful in 6m28s Details Gates / container (push) Successful in 18s Details Release / guard (push) Successful in 1m30s Details Gates / test-aarch64 (push) Successful in 5m45s Details Gates / package (push) Successful in 24s Details Release / gates (push) Successful in 7m54s Details Gates / package (push) Successful in 5m34s Details CI / gates (push) Successful in 14m5s Details Gates / frontend (push) Successful in 58s Details Gates / test (push) Successful in 1m29s Details Gates / container (push) Successful in 10s Details Release / publish (push) Successful in 9m12s Details	2026-08-15 12:24:05 +02:00
mokhtar	fc60214b3e	ci: the container gate and the version parse move into a compiled tool	2026-08-15 12:24:05 +02:00
mokhtar	3c794b645b	milestone 25: client names learned over reverse dns Gates / test (push) Successful in 2m58s Details Gates / frontend (push) Successful in 3m57s Details Gates / test-aarch64 (push) Successful in 8m20s Details Gates / package (push) Successful in 7m27s Details Gates / container (push) Successful in 17s Details CI / gates (push) Successful in 19m9s Details	2026-08-15 11:18:44 +02:00
mokhtar	c428bc2398	ci: allow dispatching the gate set, a replaced runner pod kills the job it holds Gates / frontend (push) Successful in 1m18s Details Gates / test (push) Successful in 2m27s Details Gates / test-aarch64 (push) Successful in 5m39s Details Gates / package (push) Successful in 3m34s Details Gates / container (push) Successful in 13s Details CI / gates (push) Successful in 11m57s Details Release / guard (push) Successful in 1m30s Details Gates / frontend (push) Successful in 1m6s Details Gates / test (push) Successful in 1m28s Details Gates / test-aarch64 (push) Successful in 5m41s Details Gates / package (push) Successful in 28s Details Gates / container (push) Successful in 16s Details Release / gates (push) Successful in 7m55s Details Release / publish (push) Successful in 10m37s Details	2026-08-14 02:34:06 +02:00
mokhtar	c7c1e21267	changelog: 0.0.2 releases today Gates / frontend (push) Successful in 1m9s Details Gates / test (push) Failing after 12m32s Details Gates / test-aarch64 (push) Successful in 9m14s Details Gates / package (push) Successful in 7m27s Details Gates / container (push) Successful in 18s Details CI / gates (push) Failing after 22m41s Details	2026-08-14 02:10:45 +02:00
mokhtar	21c5ce1f36	filter: separate the compiled bodies in the checksum, a name moving between them was invisible	2026-08-14 02:09:25 +02:00
mokhtar	1bce81eea0	milestone 24: persist and surface the unsupported-line count	2026-08-13 20:44:27 +02:00
mokhtar	21571e448e	schema: collapse config.db to a single baseline, ddl_v1 stays editable until v0.1	2026-08-13 19:14:54 +02:00
mokhtar	2ab7c1f1de	milestone 21: abp list exceptions and a regex rule kind	2026-08-13 19:14:47 +02:00
mokhtar	b340521716	web tests: raise the async query budget, ci contention timed out a suspended page Gates / test (push) Successful in 1m35s Details Gates / test-aarch64 (push) Successful in 6m0s Details Gates / frontend (push) Successful in 1m12s Details Gates / package (push) Successful in 5m17s Details Gates / container (push) Successful in 16s Details CI / gates (push) Successful in 13m10s Details	2026-08-13 00:20:08 +02:00
mokhtar	13458a980e	ci: run the frontend gate on the light runner Gates / test (push) Successful in 1m37s Details Gates / frontend (push) Failing after 3m23s Details Gates / package (push) Skipped Details Gates / container (push) Skipped Details Gates / test-aarch64 (push) Successful in 6m2s Details CI / gates (push) Failing after 7m41s Details	2026-08-12 23:46:07 +02:00
mokhtar	e576704fad	spec milestone 23: record the readme and conversion-order findings as closed by decision	2026-08-12 23:45:34 +02:00
mokhtar	4aaf6d3815	milestone 23: close the remaining codex findings the vitest "something prevents Vite server from exiting" warning was @stylexjs/unplugin, not our code: configureServer starts a 150ms polling interval for HMR and clears it from server.httpServer's close event, which vitest resolves to null in middleware mode. drop that one hook under VITEST and keep the transform. textMuted was swept rather than judged. measured against their grounds, the 39 flat text-zinc-500 sites went 4.12:1 -> 7.56:1 in dark mode, repairing a WCAG AA failure, so that stands; the 4 already-adaptive sites went 7.40:1 -> 4.62:1 in light mode for nothing, so a textSecondary token restores their original zinc-600/zinc-400 pair. append the symbol families to the reset's font stack: Select renders U+25BE and Segoe UI does not carry it. correct two acceptance criteria that were literally false: both greps match only comments.	2026-08-12 23:43:22 +02:00
mokhtar	0ea2e2905a	milestone 23: restore the focus ring on select options, check layer order, close preflight gaps	2026-08-12 23:27:28 +02:00
mokhtar	9d5120cbad	milestone 23: put the reset in a cascade layer, guard that it stays there	2026-08-12 23:06:26 +02:00
mokhtar	65f76d4427	milestone 23 s3: plan names stylex and react aria	2026-08-12 22:50:34 +02:00
mokhtar	be12587b87	milestone 23 s3: remove tailwind, replace its preflight with an explicit reset	2026-08-12 22:50:25 +02:00
mokhtar	122044e6af	milestone 23 s3: delete ui/classes.ts, its last importer is gone	2026-08-12 22:46:29 +02:00
mokhtar	0e9433d53b	milestone 23 s3: convert features/queries/QueryLogPage.tsx to stylex	2026-08-12 22:45:53 +02:00
mokhtar	ae9f7fb9f3	milestone 23 s3: convert features/lookup/LookupPage.tsx to stylex	2026-08-12 22:44:23 +02:00
mokhtar	1cd8f71a9b	milestone 23 s3: convert features/dashboard/TimeseriesChart.tsx to stylex	2026-08-12 22:42:11 +02:00
mokhtar	15c895e180	milestone 23 s3: convert features/settings/SettingsPage.tsx to stylex	2026-08-12 22:40:50 +02:00
mokhtar	3b33d7afee	milestone 23 s3: convert features/dashboard/UpstreamHealthTable.tsx to stylex	2026-08-12 22:38:15 +02:00
mokhtar	f2b4582c0a	milestone 23 s3: convert shell/AppShell.tsx to stylex	2026-08-12 22:37:16 +02:00
mokhtar	02bf1ca310	milestone 23 s3: convert features/live/LiveLogPage.tsx to stylex	2026-08-12 22:36:09 +02:00
mokhtar	4379d7599b	milestone 23 s3: convert features/groups/GroupsPage.tsx to stylex	2026-08-12 22:33:58 +02:00
mokhtar	1246791fe1	milestone 23 s3: convert features/dashboard/DiskCard.tsx to stylex	2026-08-12 22:32:56 +02:00
mokhtar	2f3115117f	milestone 23 s3: convert features/blocklists/SourceStatusSection.tsx to stylex	2026-08-12 22:31:14 +02:00
mokhtar	e98896fc0a	milestone 23 s3: convert features/dashboard/DashboardPage.tsx to stylex	2026-08-12 22:30:25 +02:00
mokhtar	1de608f9bc	milestone 23 s3: convert auth/LoginPage.tsx to stylex	2026-08-12 22:28:56 +02:00
mokhtar	38d34453bb	milestone 23 s3: convert features/groups/GroupSourcesEditor.tsx to stylex	2026-08-12 22:28:01 +02:00
mokhtar	368149a358	milestone 23 s3: convert features/blocklists/BlocklistForm.tsx to stylex	2026-08-12 22:27:00 +02:00
mokhtar	ac0699faa1	milestone 23: amend two rulings the s2 review found the code in breach of	2026-08-12 22:26:42 +02:00
mokhtar	d5b351d7fe	milestone 23 s3: convert routes.tsx to stylex	2026-08-12 22:25:56 +02:00
mokhtar	cddefa87e4	milestone 23 s3: convert features/pause/PauseWidget.tsx to stylex	2026-08-12 22:25:08 +02:00
mokhtar	9e12683acf	milestone 23 s3: convert features/dashboard/StatCards.tsx to stylex	2026-08-12 22:23:16 +02:00
mokhtar	0fdbe25f7a	milestone 23 s3: convert features/settings/RestartBanner.tsx to stylex	2026-08-12 22:21:53 +02:00
mokhtar	7e7358b3c2	milestone 23 s3: convert features/settings/ReadOnlyConfigBanner.tsx to stylex	2026-08-12 22:21:13 +02:00
mokhtar	d5c4a8d978	milestone 23 s3: convert lib/InlineError.tsx to stylex	2026-08-12 22:19:59 +02:00
mokhtar	73bc180c67	milestone 23 s3: convert features/dashboard/HealthBanners.tsx to stylex	2026-08-12 22:18:23 +02:00
mokhtar	0f58966b31	milestone 23 s3: move srOnly into the shared style vocabulary	2026-08-12 22:16:58 +02:00
mokhtar	bb39539fdf	milestone 23: correct three comments the s1 review found inaccurate	2026-08-12 22:13:49 +02:00
mokhtar	01e455c8af	milestone 23 s2: react aria primitives and their cluster	2026-08-12 22:12:18 +02:00
mokhtar	994bbf922c	milestone 23 s1: stylex build integration, tokens and shared styles	2026-08-12 21:41:32 +02:00
mokhtar	7b0527d271	milestone 22: typescript 7	2026-08-12 21:30:40 +02:00
mokhtar	c5e6ab9180	spec milestones 22 and 23: typescript 7, stylex and react aria	2026-08-12 21:30:35 +02:00
mokhtar	e3529e4e61	ci: gates build the web bundle and the dist payload once, pass them between jobs Gates / test (push) Successful in 1m37s Details Gates / test-aarch64 (push) Successful in 6m46s Details Gates / frontend (push) Successful in 1m6s Details Gates / package (push) Successful in 4m4s Details Gates / container (push) Successful in 15s Details CI / gates (push) Successful in 13m54s Details	2026-08-12 20:20:30 +02:00
mokhtar	91a0aa92c6	ci: smoke test runs the container in file mode, surface its logs on failure Gates / test-aarch64 (push) Successful in 5m55s Details Gates / test (push) Successful in 1m27s Details Gates / frontend (push) Successful in 50s Details Gates / package (push) Successful in 3m52s Details Gates / container (push) Successful in 2m28s Details CI / gates (push) Successful in 14m34s Details	2026-08-12 00:15:22 +02:00
mokhtar	79a161e73a	spec milestone 21: re-verify anchors against m20, record authority-mode interaction Gates / test (push) Successful in 1m27s Details Gates / test-aarch64 (push) Successful in 5m56s Details Gates / frontend (push) Successful in 49s Details Gates / package (push) Successful in 3m54s Details Gates / container (push) Failing after 2m20s Details CI / gates (push) Failing after 14m27s Details	2026-08-11 23:37:20 +02:00
mokhtar	d76afc147a	milestone 20: declarative configuration for iac	2026-08-11 23:31:40 +02:00
mokhtar	2f29121e27	spec milestone 21: abp list exceptions and operator regex rules	2026-08-11 19:03:58 +02:00
mokhtar	9aa396a65a	spec milestone 20: declarative configuration for iac	2026-08-11 18:49:03 +02:00
mokhtar	929626b1dc	milestone 14: verify-a-release walkthrough run against v0.0.1, acceptance closed	2026-08-09 01:35:43 +02:00