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

@@ -5,7 +5,7 @@
  */
 
 import * as stylex from "@stylexjs/stylex";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 
 export const styles = stylex.create({
 	heading: {
@@ -20,18 +20,32 @@ export const styles = stylex.create({
 		lineHeight: "1.25rem",
 		color: colors.textMuted,
 	},
+	/** The card chrome (`ui/Card.tsx`), on panels whose heading carries a key or a control the Card head cannot. */
 	panel: {
 		marginTop: "1rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
-		padding: "1rem",
+		backgroundColor: colors.surfaceRaised,
+		padding: metrics.cardPadding,
 	},
 	panelHeading: {
-		fontSize: "1.125rem",
-		lineHeight: "1.75rem",
-		fontWeight: 500,
+		margin: 0,
+		fontSize: "1.4rem",
+		lineHeight: 1.2,
+		fontWeight: 650,
+		letterSpacing: "-0.015em",
+	},
+	/** The card head's one-line description (`ui/Card.tsx`), under a panel heading. */
+	panelDescription: {
+		margin: 0,
+		marginTop: "0.25rem",
+		marginBottom: "1.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+		textWrap: "pretty",
 	},
 	/** The collection's own key in the configuration file, beside its heading. */
 	panelKey: {
@@ -50,7 +64,7 @@ export const styles = stylex.create({
 	/** The file-mode page note: where edits happen, and what applies them. */
 	fileNote: {
 		marginTop: "1rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
@@ -90,7 +104,7 @@ export const styles = stylex.create({
 	},
 	masterLink: {
 		display: "block",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		paddingInline: "0.75rem",
 		paddingBlock: "0.375rem",
 		fontSize: "0.875rem",
@@ -119,7 +133,7 @@ export const styles = stylex.create({
 	/** The authority error state: no forms, no definition list, one way forward. */
 	blocked: {
 		marginTop: "1rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.warnBorder,