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/ui/Select.tsx

@@ -22,7 +22,7 @@ import {
 	SelectValue,
 	Text,
 } from "react-aria-components";
-import { colors } from "./tokens.stylex";
+import { colors, metrics } from "./tokens.stylex";
 import { styles as shared } from "./styles";
 
 export interface SelectOption {
@@ -45,9 +45,10 @@ interface Props {
 	description?: string;
 	/**
 	 * `field` matches a full-width form input, `compactField` the smaller one a
-	 * dialog uses, `inline` a control sitting in a row of other controls.
+	 * dialog uses, `inline` a control sitting in a row of other controls, and
+	 * `toolbar` the 44px hairline dropdown a page's scope picker is.
 	 */
-	variant?: "field" | "compactField" | "inline";
+	variant?: "field" | "compactField" | "inline" | "toolbar";
 	/** Visible but inert, keeping its value on screen; RAC also drops it from the tab order. */
 	isDisabled?: boolean;
 }
@@ -77,6 +78,22 @@ const styles = stylex.create({
 		marginTop: "0.25rem",
 		width: "100%",
 	},
+	/** Rectangular, hairline, full hit height: the decision record's toolbar selector. */
+	toolbar: {
+		minHeight: metrics.hitTarget,
+		borderRadius: metrics.radius,
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: { default: colors.border, ":hover": colors.borderStrong },
+		backgroundColor: colors.surfaceRaised,
+		color: colors.text,
+		paddingInline: "0.9375rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		transitionProperty: "border-color",
+		transitionDuration: { default: metrics.transitionDuration, "@media (prefers-reduced-motion: reduce)": "0s" },
+	},
 	/** Explicit, so RAC's default `react-aria-SelectValue` class does not land. */
 	value: {
 		overflow: "hidden",
@@ -97,7 +114,7 @@ const styles = stylex.create({
 		width: "var(--trigger-width)",
 		maxHeight: "16rem",
 		overflowY: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -143,7 +160,7 @@ export default function Select({
 	variant = "field",
 	isDisabled = false,
 }: Props) {
-	const base = variant === "field" ? shared.input : shared.smallInput;
+	const base = variant === "field" ? shared.input : variant === "toolbar" ? styles.toolbar : shared.smallInput;
 	const block = variant === "compactField" ? styles.compact : null;
 	return (
 		<AriaSelect