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

@@ -0,0 +1,79 @@
+/**
+ * The one panel chrome (milestone 39): a white hairline-bordered card with a
+ * prominent title and a one-line description under it. Every panel on every
+ * page is one of these, so the pages agree by construction rather than by
+ * copying a `panel` style object around.
+ *
+ * The title is an `h2` because a card is a section of the page's outline; a
+ * page that needs a different level passes `as`.
+ */
+
+import { useId } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, metrics } from "./tokens.stylex";
+
+export const cardStyles = stylex.create({
+	card: {
+		minWidth: 0,
+		borderRadius: metrics.radius,
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		padding: metrics.cardPadding,
+	},
+	head: {
+		marginBottom: "1.25rem",
+	},
+	/**
+	 * The card's title is the loudest text on the page after the stat numerals:
+	 * the references (Pi-hole, NextDNS) both lead each panel with a heading the
+	 * eye lands on first. Kept in one place so no heading reset outranks it.
+	 */
+	title: {
+		margin: 0,
+		fontSize: "1.4rem",
+		lineHeight: 1.2,
+		fontWeight: 650,
+		letterSpacing: "-0.015em",
+		color: colors.text,
+		textWrap: "balance",
+	},
+	description: {
+		margin: 0,
+		marginTop: "0.25rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+		textWrap: "pretty",
+	},
+});
+
+export default function Card({
+	title,
+	description,
+	as: Heading = "h2",
+	style,
+	children,
+}: {
+	title: string;
+	/** One sentence saying what the panel shows; every card carries one (the decision record's card head). */
+	description: string;
+	as?: "h2" | "h3";
+	/** Extra styles for the card box itself: a grid placement, a clipped list variant. */
+	style?: stylex.StyleXStyles;
+	children: React.ReactNode;
+}) {
+	const titleId = useId();
+	return (
+		<section aria-labelledby={titleId} {...stylex.props(cardStyles.card, style)}>
+			<div {...stylex.props(cardStyles.head)}>
+				<Heading id={titleId} {...stylex.props(cardStyles.title)}>
+					{title}
+				</Heading>
+				<p {...stylex.props(cardStyles.description)}>{description}</p>
+			</div>
+			{children}
+		</section>
+	);
+}

admin/src/ui/ConfirmDialog.tsx

@@ -11,7 +11,7 @@
 import type { ReactNode } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { Dialog as AriaDialog, Heading, Modal, ModalOverlay } from "react-aria-components";
-import { colors, layers } from "./tokens.stylex";
+import { colors, layers, metrics } from "./tokens.stylex";
 import { styles as shared } from "./styles";
 
 interface Props {
@@ -77,7 +77,7 @@ const styles = stylex.create({
 	},
 	dangerButton: {
 		cursor: { default: "pointer", ":disabled": "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderStyle: "none",
 		backgroundColor: colors.danger,
 		color: colors.primaryText,

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

admin/src/ui/styles.ts

@@ -47,7 +47,7 @@ export const styles = stylex.create({
 	input: {
 		marginTop: "0.25rem",
 		width: "100%",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -57,7 +57,7 @@ export const styles = stylex.create({
 		paddingBlock: "0.5rem",
 	},
 	smallInput: {
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -73,7 +73,7 @@ export const styles = stylex.create({
 		minHeight: 40,
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -90,7 +90,7 @@ export const styles = stylex.create({
 	smallButton: {
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -102,7 +102,7 @@ export const styles = stylex.create({
 	largeButton: {
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -114,7 +114,7 @@ export const styles = stylex.create({
 	primaryButton: {
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderStyle: "none",
 		backgroundColor: colors.primary,
 		color: colors.primaryText,
@@ -128,7 +128,7 @@ export const styles = stylex.create({
 	largePrimaryButton: {
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderStyle: "none",
 		backgroundColor: colors.primary,
 		color: colors.primaryText,
@@ -141,7 +141,7 @@ export const styles = stylex.create({
 	rowButton: {
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderStyle: "none",
 		backgroundColor: "transparent",
 		paddingInline: "0.5rem",
@@ -177,7 +177,7 @@ export const styles = stylex.create({
 		...press,
 		cursor: { default: "pointer", [DISABLED]: "not-allowed" },
 		marginTop: "0.75rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.dangerBorder,
@@ -216,7 +216,7 @@ export const styles = stylex.create({
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		paddingInline: "0.375rem",
 		paddingBlock: "0.125rem",
 		fontSize: "0.75rem",
@@ -264,6 +264,7 @@ export const styles = stylex.create({
 		paddingInline: "0.75rem",
 		paddingBlock: "0.5rem",
 	},
+	/** Focusable: a table wider than a phone scrolls sideways, and a keyboard must be able to reach the scroll. */
 	tableWrap: {
 		marginTop: "1rem",
 		overflowX: "auto",
@@ -281,7 +282,7 @@ export const styles = stylex.create({
 		gap: "0.75rem",
 		marginTop: "1rem",
 		maxWidth: "32rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

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",