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/DiagnosticsPage.tsx

@@ -10,13 +10,13 @@ import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
 import * as api from "@/lib/api";
 import InlineError from "@/lib/InlineError";
-import { formatDuration, formatTime } from "@/lib/format";
+import { formatCount, formatDuration, formatTime } from "@/lib/format";
 import { diagnosticPurgeMutation, diagnosticsInfiniteQuery, diagnosticsPurgeResolvedMutation } from "@/lib/queries";
 import type { DiagnosticEvent, DiagnosticSeverity, DiagnosticState, DiagnosticsPage as Page } from "@/lib/types";
 import ConfirmDialog from "@/ui/ConfirmDialog";
 import Select from "@/ui/Select";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 import HealthStrip from "./HealthStrip";
 import SeverityBadge from "./SeverityBadge";
 import { diagnosticsFilterOf } from "./filter";
@@ -67,9 +67,10 @@ const styles = stylex.create({
 	},
 	sectionHeading: {
 		marginTop: "1.5rem",
-		fontSize: "1.125rem",
-		lineHeight: "1.75rem",
-		fontWeight: 600,
+		fontSize: "1.4rem",
+		lineHeight: 1.2,
+		fontWeight: 650,
+		letterSpacing: "-0.015em",
 	},
 	sectionHeadingRow: {
 		display: "flex",
@@ -116,7 +117,7 @@ const styles = stylex.create({
 		padding: 0,
 	},
 	card: {
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
@@ -149,7 +150,7 @@ const styles = stylex.create({
 	},
 	rangeNotice: {
 		marginTop: "0.75rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
@@ -163,7 +164,7 @@ const styles = stylex.create({
 	tableWrap: {
 		marginTop: "0.75rem",
 		overflowX: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
@@ -235,7 +236,7 @@ function errorMessage(error: unknown): string {
 }
 
 function occurrenceText(count: number): string {
-	return `${count} ${count === 1 ? "occurrence" : "occurrences"}`;
+	return `${formatCount(count)} ${count === 1 ? "occurrence" : "occurrences"}`;
 }
 
 function rowsOf(section: Section): DiagnosticEvent[] {
@@ -356,7 +357,7 @@ function HistoryRow({ event, onPurge, busy }: { event: DiagnosticEvent; onPurge:
 			<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>
 				{event.resolved_at === null ? "—" : formatTime(event.resolved_at)}
 			</td>
-			<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>{event.occurrences}</td>
+			<td {...stylex.props(styles.cell, styles.nowrap, shared.tabularNums)}>{formatCount(event.occurrences)}</td>
 			<td {...stylex.props(styles.cell, styles.nowrap)}>
 				<button
 					type="button"
@@ -494,7 +495,7 @@ export default function DiagnosticsPage() {
 						<p {...stylex.props(styles.empty)}>Nothing has failed and recovered in the retained window.</p>
 					) : (
 						<>
-							<div {...stylex.props(styles.tableWrap)}>
+							<div tabIndex={0} {...stylex.props(styles.tableWrap, shared.focusRing)}>
 								<table {...stylex.props(styles.table)}>
 									<thead {...stylex.props(styles.head)}>
 										<tr>
@@ -522,8 +523,9 @@ export default function DiagnosticsPage() {
 								</table>
 							</div>
 							<p {...stylex.props(styles.footer, styles.note)}>
-								Showing <span {...stylex.props(shared.tabularNums)}>{historyRows.length}</span> resolved{" "}
-								{historyRows.length === 1 ? "entry" : "entries"}
+								Showing{" "}
+								<span {...stylex.props(shared.tabularNums)}>{formatCount(historyRows.length)}</span>{" "}
+								resolved {historyRows.length === 1 ? "entry" : "entries"}
 								{hasMore(history) ? "" : " — end of history"}
 							</p>
 							<MoreButton section={history} />