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>
+	);
+}