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/tokens.stylex.ts

@@ -41,11 +41,21 @@ export const colors = stylex.defineVars({
 	 * chart legend — where that loss shows.
 	 */
 	textSecondary: { default: "oklch(44.2% 0.017 285.786)", [DARK]: "oklch(70.5% 0.015 286.067)" },
-	/** Primary actions. Identical in both schemes, as before the conversion. */
-	primary: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
+	/**
+	 * The accent (ui-visual-redesign.md): blue at hue 258 for nav, links, primary
+	 * actions and the total-queries series. Identical in both schemes.
+	 */
+	primary: { default: "oklch(55% 0.16 258)", [DARK]: "oklch(55% 0.16 258)" },
 	primaryText: { default: "#fff", [DARK]: "#fff" },
-	/** Primary as foreground: lightened in dark so it clears the ground. */
-	primaryOnSurface: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(70.7% 0.165 254.624)" },
+	/**
+	 * Primary as foreground text. Darker than `primary` in light because the
+	 * active nav label sits on `primarySurface`, where the accent itself
+	 * measures 4.39:1; this value measures 5.43:1 there. Lightened in dark so it
+	 * clears the ground (5.87:1 on its wash).
+	 */
+	primaryOnSurface: { default: "oklch(50% 0.16 258)", [DARK]: "oklch(72% 0.13 258)" },
+	/** The accent as a wash: the active nav item's fill. */
+	primarySurface: { default: "oklch(96% 0.02 258)", [DARK]: "oklch(28% 0.05 258)" },
 	/**
 	 * Warnings: a degraded condition the operator can still act on, as against
 	 * `danger`, which is a failure or a destructive action. The amber ramp.
@@ -59,8 +69,44 @@ export const colors = stylex.defineVars({
 	dangerSurface: { default: "oklch(97.1% 0.013 17.38)", [DARK]: "oklch(25.8% 0.092 26.042)" },
 	dangerBorder: { default: "oklch(80.8% 0.114 19.571)", [DARK]: "oklch(44.4% 0.177 26.899)" },
 	dangerText: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
+	/**
+	 * The softer red the charts and the blocked stat numeral wear: 3.54:1 on
+	 * white, which clears the 3:1 floor for non-text and large text and nothing
+	 * else. Small text keeps `dangerText`.
+	 */
+	chartRed: { default: "oklch(65% 0.19 25)", [DARK]: "oklch(65% 0.19 25)" },
+	/** Cache and success: fixed semantics, never derived from the accent. */
+	chartGreen: { default: "oklch(62% 0.14 150)", [DARK]: "oklch(62% 0.14 150)" },
+	chartGreenSurface: { default: "oklch(93% 0.05 150)", [DARK]: "oklch(30% 0.06 150)" },
+	/**
+	 * The categorical series palette (ui-visual-redesign.md): eight hues spread
+	 * round the wheel, clear of the reserved red at hue 25, the same in both
+	 * schemes. `seriesOther` is the aggregated tail, a flat gray that never
+	 * competes with a named client. SVG attributes take these vars directly.
+	 */
+	seriesBlue: { default: "oklch(60% 0.14 258)", [DARK]: "oklch(60% 0.14 258)" },
+	seriesTeal: { default: "oklch(68% 0.12 190)", [DARK]: "oklch(68% 0.12 190)" },
+	seriesViolet: { default: "oklch(62% 0.15 300)", [DARK]: "oklch(62% 0.15 300)" },
+	seriesAmber: { default: "oklch(75% 0.13 80)", [DARK]: "oklch(75% 0.13 80)" },
+	seriesGreen: { default: "oklch(65% 0.13 150)", [DARK]: "oklch(65% 0.13 150)" },
+	seriesMagenta: { default: "oklch(66% 0.14 340)", [DARK]: "oklch(66% 0.14 340)" },
+	seriesOrange: { default: "oklch(70% 0.14 55)", [DARK]: "oklch(70% 0.14 55)" },
+	seriesOlive: { default: "oklch(72% 0.11 120)", [DARK]: "oklch(72% 0.11 120)" },
+	seriesOther: { default: "oklch(80% 0.01 260)", [DARK]: "oklch(80% 0.01 260)" },
+	/**
+	 * The query-types ring: the accent's hue stepped in lightness and chroma from
+	 * the busiest type outward. Six steps cover every ring the API answers with
+	 * in practice; in dark the ramp runs the other way so the busiest stays the
+	 * most saturated against the ground.
+	 */
+	ramp1: { default: "oklch(55% 0.15 258)", [DARK]: "oklch(72% 0.14 258)" },
+	ramp2: { default: "oklch(63% 0.13 258)", [DARK]: "oklch(64% 0.12 258)" },
+	ramp3: { default: "oklch(71% 0.10 258)", [DARK]: "oklch(56% 0.10 258)" },
+	ramp4: { default: "oklch(78% 0.075 258)", [DARK]: "oklch(48% 0.08 258)" },
+	ramp5: { default: "oklch(85% 0.05 258)", [DARK]: "oklch(41% 0.06 258)" },
+	ramp6: { default: "oklch(91% 0.035 258)", [DARK]: "oklch(35% 0.04 258)" },
 	/** The focus ring colour. The ring itself is a floor, not a variant. */
-	focus: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
+	focus: { default: "oklch(55% 0.16 258)", [DARK]: "oklch(55% 0.16 258)" },
 });
 
 /**
@@ -90,6 +136,10 @@ export const layers = stylex.defineVars({
 export const metrics = stylex.defineConsts({
 	/** WCAG 2.5.5's enhanced 44px target, applied where layout permits; some inline controls stop at 40px or above 2.5.8's 24px minimum. */
 	hitTarget: "44px",
+	/** One corner radius for every surface: cards, controls, tooltips, nav items. */
+	radius: "4px",
+	/** The inset of a card's content from its border. */
+	cardPadding: "1.75rem",
 	/** The press and hover settle shared by every control that styles its own states. */
 	transitionProperty: "background-color, color, border-color, transform",
 	transitionDuration: "120ms",