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/settingsSections.ts

@@ -14,6 +14,8 @@ export interface FieldDef<S extends keyof Settings> {
 export interface SectionDef<S extends keyof Settings> {
 	section: S;
 	title: string;
+	/** The card head's one line: what the section governs, in the reader's words. */
+	description: string;
 	fields: readonly FieldDef<S>[];
 }
 
@@ -47,6 +49,8 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "upstream",
 		title: "Upstream",
+		description:
+			"How long nxdns waits on the upstream pool, per attempt and in total, and on a forward zone's resolver per read.",
 		fields: [
 			{ key: "attempt_timeout_ms", kind: "number" },
 			{ key: "read_timeout_ms", kind: "number" },
@@ -56,6 +60,8 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "dns",
 		title: "DNS",
+		description:
+			"The addresses and port the resolver listens on, and how many queries one client may send within the rate window.",
 		fields: [
 			{ key: "bind_ipv4", kind: "text" },
 			{ key: "bind_ipv6", kind: "text" },
@@ -67,6 +73,7 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "blocking",
 		title: "Blocking",
+		description: "What a blocked query is answered with, and for how long clients may keep that answer.",
 		fields: [
 			{ key: "response", kind: ["zero", "nxdomain"] },
 			{ key: "ttl", kind: "number" },
@@ -75,6 +82,7 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "cache",
 		title: "Cache",
+		description: "How many answers are kept, and how long a negative answer stays valid.",
 		fields: [
 			{ key: "size", kind: "number" },
 			{ key: "negative_ttl_max", kind: "number" },
@@ -83,6 +91,7 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "web",
 		title: "Web",
+		description: "Where this admin interface listens, how long a login lasts, and its request limits.",
 		fields: [
 			{ key: "enabled", kind: "boolean" },
 			{ key: "bind", kind: "text" },
@@ -94,12 +103,29 @@ export const SECTIONS: readonly AnySectionDef[] = [
 			{ key: "trusted_proxies", kind: "text" },
 		],
 	}),
-	defineSection({ section: "doh_server", title: "DoH Server", fields: TLS_FIELDS }),
-	defineSection({ section: "dot_server", title: "DoT Server", fields: TLS_FIELDS }),
-	defineSection({ section: "edns", title: "EDNS", fields: [{ key: "ecs_mode", kind: ["strip", "forward"] }] }),
+	defineSection({
+		section: "doh_server",
+		title: "DoH Server",
+		description: "DNS over HTTPS for clients that speak it: the listener and its certificate.",
+		fields: TLS_FIELDS,
+	}),
+	defineSection({
+		section: "dot_server",
+		title: "DoT Server",
+		description: "DNS over TLS for clients that speak it: the listener and its certificate.",
+		fields: TLS_FIELDS,
+	}),
+	defineSection({
+		section: "edns",
+		title: "EDNS",
+		description: "Whether the client's subnet is passed on to upstreams or stripped from the query.",
+		fields: [{ key: "ecs_mode", kind: ["strip", "forward"] }],
+	}),
 	defineSection({
 		section: "logging",
 		title: "Logging",
+		description:
+			"What the process log records and where it goes; how query history is buffered, flushed and kept, and which of its fields are hidden.",
 		fields: [
 			{ key: "level", kind: ["error", "warn", "info", "debug"] },
 			{ key: "retention_days", kind: "number" },
@@ -116,6 +142,7 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "disk",
 		title: "Disk",
+		description: "The free space below which nxdns warns, and below which it stops writing history.",
 		fields: [
 			{ key: "min_free_mb", kind: "number" },
 			{ key: "warn_free_mb", kind: "number" },
@@ -124,6 +151,7 @@ export const SECTIONS: readonly AnySectionDef[] = [
 	defineSection({
 		section: "blocklist_update",
 		title: "Blocklist Update",
+		description: "Whether the blocklists are fetched again on their own, and how often.",
 		fields: [
 			{ key: "enabled", kind: "boolean" },
 			{ key: "interval_hours", kind: "number" },