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

@@ -5,9 +5,10 @@ import InlineError from "@/lib/InlineError";
 import { settingsPutMutation } from "@/lib/queries";
 import { buildSettingsPatch } from "@/lib/settingsDiff";
 import type { Settings, SettingsEnvelope } from "@/lib/types";
+import { cardStyles } from "@/ui/Card";
 import Select from "@/ui/Select";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 import { SECTIONS, sectionValues, type AnyFieldDef } from "./settingsSections";
 import { styles as config } from "./styles";
 
@@ -30,18 +31,25 @@ const styles = stylex.create({
 		margin: 0,
 		padding: 0,
 	},
+	/** A `fieldset` shrinks to its content by default, which would undo the card's own `minWidth: 0`. */
 	section: {
-		borderRadius: "0.25rem",
-		borderWidth: 1,
-		borderStyle: "solid",
-		borderColor: colors.border,
-		padding: "1rem",
+		minInlineSize: 0,
 	},
+	/**
+	 * A `legend` is otherwise drawn through the fieldset's top border, which cuts
+	 * the hairline and lifts the title away from its description. A floated
+	 * legend is not the fieldset's rendered legend (HTML rendering, "The fieldset
+	 * and legend elements"), so it lays out as ordinary content inside the
+	 * padding; the full width, and the `clear` on the description, keep the two
+	 * stacked.
+	 */
 	legend: {
-		paddingInline: "0.25rem",
-		fontSize: "0.875rem",
-		lineHeight: "1.25rem",
-		fontWeight: 600,
+		float: "left",
+		width: "100%",
+		padding: 0,
+	},
+	description: {
+		clear: "both",
 	},
 	/** One column on a phone, two from `sm`. */
 	fieldGrid: {
@@ -71,7 +79,7 @@ const styles = stylex.create({
 		gap: "0.25rem",
 	},
 	fieldInput: {
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.borderStrong,
@@ -105,7 +113,7 @@ const styles = stylex.create({
 	save: {
 		cursor: { default: "pointer", ":disabled": "not-allowed" },
 		borderStyle: "none",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		paddingInline: "1rem",
 		paddingBlock: "0.375rem",
 		fontSize: "0.875rem",
@@ -261,9 +269,10 @@ export default function SettingsForm({ envelope }: { envelope: SettingsEnvelope
 	return (
 		<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
 			<fieldset disabled={mutation.isPending} {...stylex.props(styles.sections)}>
-				{SECTIONS.map(({ section, title, fields }) => (
-					<fieldset key={section} {...stylex.props(styles.section)}>
-						<legend {...stylex.props(styles.legend)}>{title}</legend>
+				{SECTIONS.map(({ section, title, description, fields }) => (
+					<fieldset key={section} {...stylex.props(cardStyles.card, styles.section)}>
+						<legend {...stylex.props(cardStyles.title, styles.legend)}>{title}</legend>
+						<p {...stylex.props(config.panelDescription, styles.description)}>{description}</p>
 						<div {...stylex.props(styles.fieldGrid)}>
 							{(fields as readonly AnyFieldDef[]).map((def) => (
 								<FieldRow