admin: overview redesign, device scope, one formatting contract (milestone 39)

The Overview page takes the decided visual language (specs/ui-visual-redesign.md): four centred totals with their Activity links, a smoothed area chart of total and blocked queries with point hover and a tooltip centred beside the point, a stacked client chart in eight distinct hues plus one Other band that is always a series, and a card row with the cache hit rate, the query types as a single-hue ramp ring, and the upstream breakdown. The count axis grows its margin with the widest grouped tick and draws whole-number ticks only.

GET /api/overview takes a client parameter; the scoped read uses idx_query_log_ts and the cache keeps scoped slots. The device selector beside the period selector is URL state, so a scoped view is a link, and the tile links carry the scope into Activity. The route reduces a pasted IPv6 scope to the RFC 5952 spelling the logger stores, mapped addresses included, and drops anything that is not an address. A failed device list says so under the selector with a retry.

All measured quantities go through admin/src/lib/format.ts: grouped counts, two-decimal percentages, one-decimal rates, durations as the two largest nonzero units. Identifiers, configured values and preset labels render as written; the module header states that scope. A sweep test refuses toFixed, toLocaleString, Intl.NumberFormat and padStart anywhere else.

Chrome: one 4px radius from the metrics constants, shared Card with a prominent title and a one-line description on every panel, the settings form sections on the same card with a floated legend, the sidebar grouped into Monitoring and System with a status block (protection, queries per minute on Overview, uptime), keyboard-focusable table scroll wrappers, and the accent darkened to 5.43:1 on its wash.

Not built: the spec's ranked-list primitive, which has no consumer and no API rows. Codex reviewed sessions B to D over five rounds (thirty-three findings fixed, thirteen rejected as non-quantities); the owner skipped a sixth round.

Claude-Session: https://claude.ai/code/session_01VTgx3a1zz1R78o4K55kkwR

admin/src/features/configuration/ProtectionSources.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as stylex from "@stylexjs/stylex";
-import { formatTime } from "@/lib/format";
+import { formatCount, formatTime } from "@/lib/format";
 import InlineError from "@/lib/InlineError";
 import {
 	blocklistCreateMutation,
@@ -13,7 +13,7 @@ import {
 import type { Blocklist, BlocklistInput } from "@/lib/types";
 import ConfirmDialog from "@/ui/ConfirmDialog";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 import Switch from "@/ui/Switch";
 import AuthorityGate from "./AuthorityGate";
 import BlocklistForm from "./BlocklistForm";
@@ -34,7 +34,7 @@ const styles = stylex.create({
 	},
 	badge: {
 		marginLeft: "0.5rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		backgroundColor: colors.border,
 		paddingInline: "0.375rem",
 		paddingBlock: "0.125rem",
@@ -131,10 +131,13 @@ function SourcesReadOnly({ blocklists }: { blocklists: Blocklist[] }) {
 				Blocklist sources
 				<code {...stylex.props(shared.mono, config.panelKey)}>blocklist_sources</code>
 			</h2>
+			<p {...stylex.props(config.panelDescription)}>
+				The lists nxdns downloads, and what each one contributed at its last refresh.
+			</p>
 			{blocklists.length === 0 ? (
 				<p {...stylex.props(config.empty)}>The file declares no blocklist sources.</p>
 			) : (
-				<div {...stylex.props(shared.tableWrap)}>
+				<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
 					<table {...stylex.props(config.table)}>
 						<thead>
 							<tr>
@@ -158,12 +161,20 @@ function SourcesReadOnly({ blocklists }: { blocklists: Blocklist[] }) {
 									</td>
 									<td {...stylex.props(shared.td, shared.mono)}>{b.url}</td>
 									<td {...stylex.props(shared.td)}>{String(b.enabled)}</td>
-									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.domain_count}</td>
-									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.wildcard_count}</td>
-									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.exception_count}</td>
-									<td {...stylex.props(shared.td, shared.tabularNums)}>{b.skipped_regex_count}</td>
 									<td {...stylex.props(shared.td, shared.tabularNums)}>
-										{b.skipped_unsupported_count}
+										{formatCount(b.domain_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.wildcard_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.exception_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.skipped_regex_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.skipped_unsupported_count)}
 									</td>
 									<td {...stylex.props(shared.td)}>
 										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
@@ -219,7 +230,7 @@ function SourcesEditor({ blocklists }: { blocklists: Blocklist[] }) {
 			{blocklists.length === 0 ? (
 				<p {...stylex.props(config.empty)}>No blocklist sources yet. Add one below.</p>
 			) : (
-				<div {...stylex.props(shared.tableWrap)}>
+				<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
 					<table {...stylex.props(config.table)}>
 						<thead>
 							<tr>
@@ -257,12 +268,20 @@ function SourcesEditor({ blocklists }: { blocklists: Blocklist[] }) {
 											onChange={() => toggleEnabled(b)}
 										/>
 									</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}
+										{formatCount(b.domain_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.wildcard_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.exception_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.skipped_regex_count)}
+									</td>
+									<td {...stylex.props(shared.td, shared.tabularNums)}>
+										{formatCount(b.skipped_unsupported_count)}
 									</td>
 									<td {...stylex.props(shared.td)}>
 										{b.last_updated === null ? "never" : formatTime(b.last_updated)}