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/overview/overviewWindow.test.tsx

@@ -6,8 +6,8 @@
  * completion. One request cannot disagree with itself, so those behaviours have
  * no subject left and are gone rather than ported. What survived the collapse is
  * pinned below: the three states, and the one rule a single request still does
- * not settle — that a `keepPreviousData` body from the period the reader left
- * must never render under the new period's label.
+ * not settle — that the body of the scope the reader just left, period or
+ * device, must never render under the new scope's label.
  */
 
 import { render, screen, waitFor } from "@testing-library/react";
@@ -63,8 +63,8 @@ afterEach(() => vi.unstubAllGlobals());
 /** The last retry the hook handed out, so a test can spend it. */
 let lastRetry: () => void;
 
-function Probe({ period }: { period: Period }) {
-	const panel = useOverviewWindow(period);
+function Probe({ period, client }: { period: Period; client?: string }) {
+	const panel = useOverviewWindow(period, client);
 	if (panel.status === "error") lastRetry = panel.retry;
 	const detail =
 		panel.status === "ready"
@@ -75,18 +75,18 @@ function Probe({ period }: { period: Period }) {
 	return <p>{`${panel.status}:${detail}`}</p>;
 }
 
-function renderProbe(period: Period = "24h") {
+function renderProbe(period: Period = "24h", scope?: string) {
 	const client = createQueryClient();
 	const view = render(
 		<QueryClientProvider client={client}>
-			<Probe period={period} />
+			<Probe period={period} client={scope} />
 		</QueryClientProvider>,
 	);
 	return {
-		rerenderWith: (next: Period) =>
+		rerenderWith: (next: Period, nextScope?: string) =>
 			view.rerender(
 				<QueryClientProvider client={client}>
-					<Probe period={next} />
+					<Probe period={next} client={nextScope} />
 				</QueryClientProvider>,
 			),
 	};
@@ -115,13 +115,24 @@ test("a failed request is one error for the whole page, with a retry that refetc
 	expect(calls).toBeGreaterThan(spent);
 });
 
-test("a retained previous-period body never renders under the new period's label", async () => {
+test("a previous period's body never renders under the new period's label", async () => {
 	const { rerenderWith } = renderProbe("24h");
 	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
 
 	rerenderWith("1h");
-	// `keepPreviousData` is holding the 24h body. It is a complete answer and
-	// still the wrong one to draw under "1h", so the page waits.
+	// The 24h body is a complete answer and still the wrong one to draw under
+	// "1h", so the page waits for its own.
 	expect(line()).toBe("loading:");
 	await waitFor(() => expect(line()).toBe(`ready:1h@${UNTIL}`));
 });
+
+test("rescoping to a device under the same period waits for that device's body", async () => {
+	const { rerenderWith } = renderProbe("24h");
+	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
+
+	rerenderWith("24h", "192.0.2.30");
+	// Same period, so the household body would pass a period check; it is
+	// still the wrong scope to draw under the device's name.
+	expect(line()).toBe("loading:");
+	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
+});