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/diagnostics/healthFacts.ts

@@ -9,7 +9,7 @@
  * condition that is not healthy is the thing the eye lands on.
  */
 
-import { formatBytes, formatClock } from "@/lib/format";
+import { formatBytes, formatClock, formatCount } from "@/lib/format";
 import type { Health } from "@/lib/types";
 
 export type FactTone = "ok" | "notice" | "warn" | "danger";
@@ -33,12 +33,10 @@ export interface HealthFact {
 	link?: FactLink;
 }
 
-const numberFormat = new Intl.NumberFormat();
-
 /** Kept out of the state rule: rows are lost whether or not the box is losing them now. */
 function dropText(dropped: number, lastDrop: number | null, locale?: string, timeZone?: string): string | undefined {
 	if (dropped <= 0) return undefined;
-	const count = `${numberFormat.format(dropped)} ${dropped === 1 ? "query" : "queries"} dropped`;
+	const count = `${formatCount(dropped)} ${dropped === 1 ? "query" : "queries"} dropped`;
 	return lastDrop === null ? count : `${count}, last at ${formatClock(lastDrop, locale, timeZone)}`;
 }
 
@@ -103,7 +101,7 @@ export function healthFacts(health: Health, locale?: string, timeZone?: string):
 			label: "Upstreams",
 			tone: upstreams.state === "unavailable" ? "danger" : "ok",
 			value: upstreams.state === "unavailable" ? "None reachable" : "Available",
-			detail: `${upstreams.available} of ${upstreams.total} enabled`,
+			detail: `${formatCount(upstreams.available)} of ${formatCount(upstreams.total)} enabled`,
 			...(upstreams.state === "unavailable"
 				? { link: { kind: "route", to: "/configuration/resolution", label: "Upstreams" } as FactLink }
 				: {}),