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

@@ -40,6 +40,7 @@ import {
 	upstreamsQuery,
 } from "@/lib/queries";
 import { DEFAULT_PERIOD, parsePeriod } from "@/features/overview/period";
+import { parseClient } from "@/features/overview/clientScope";
 import { OverviewPending } from "@/features/overview/OverviewFrame";
 import {
 	validateGroupId,
@@ -51,6 +52,7 @@ import {
 import type { Period } from "@/lib/types";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
+import { formatDuration } from "@/lib/format";
 
 export interface RouterContext {
 	queryClient: QueryClient;
@@ -104,7 +106,10 @@ function RouteError({ error }: ErrorComponentProps) {
 			detail = error.message;
 		} else if (error.status === 429) {
 			title = "Rate limited";
-			detail = error.retryAfter !== undefined ? `Try again in ${error.retryAfter}s.` : "Try again shortly.";
+			detail =
+				error.retryAfter !== undefined
+					? `Try again in ${formatDuration(error.retryAfter)}.`
+					: "Try again shortly.";
 		} else if (error.status >= 500) {
 			title = "Internal error";
 		} else {
@@ -156,17 +161,21 @@ const indexRoute = createRoute({
 });
 
 /**
- * Overview. The period is the whole of its applied state, so a view of the page
- * is a link: a hand-typed or stale value falls back to the default rather than
- * reaching the API as a parameter it answers 400 to.
+ * Overview. The period and the device scope are the whole of its applied state,
+ * so a view of the page is a link: a hand-typed or stale value falls back to
+ * the default rather than reaching the API as a parameter it answers 400 to.
  */
 const overviewRoute = createRoute({
 	getParentRoute: () => shellRoute,
 	path: "/overview",
-	validateSearch: (search: Record<string, unknown>): { period?: Period } => ({
+	validateSearch: (search: Record<string, unknown>): { period?: Period; client?: string } => ({
 		period: parsePeriod(search["period"]),
+		client: parseClient(search["client"]),
+	}),
+	loaderDeps: ({ search }): { period: Period; client: string | undefined } => ({
+		period: search.period ?? DEFAULT_PERIOD,
+		client: search.client,
 	}),
-	loaderDeps: ({ search }): { period: Period } => ({ period: search.period ?? DEFAULT_PERIOD }),
 	/**
 	 * Started here, awaited nowhere. The page reads these with `useQuery` and owns
 	 * its own loading and error surface, so awaiting would trade that contract for
@@ -177,7 +186,7 @@ const overviewRoute = createRoute({
 	loader: ({ context, deps }) => {
 		const start = (promise: Promise<unknown>) => void promise.catch(() => {});
 		start(context.queryClient.ensureQueryData(healthQuery()));
-		start(context.queryClient.ensureQueryData(overviewQuery(deps.period)));
+		start(context.queryClient.ensureQueryData(overviewQuery(deps.period, deps.client)));
 		// The registered names the client chart labels its series with. Started here
 		// so the lookup is not a second round trip after the page chunk lands.
 		start(context.queryClient.ensureQueryData(clientsQuery()));
@@ -402,28 +411,7 @@ const systemRoute = createRoute({
 	component: lazyRouteComponent(() => import("@/features/configuration/SystemPage")),
 });
 
-// PROTO-OVERVIEW fence start (throwaway — delete with admin/src/proto/)
-// A dev-only design-exploration route: four full-page Overview variants behind a
-// floating picker. It hangs off the root rather than the shell, so a variant is
-// judged as a page and not as the nav around it. `import.meta.env.DEV` is a
-// literal `false` in a production build, so the array folds to empty and the
-// dynamic import below is dead code Rollup drops — the proto bytes never reach
-// dist.
-const protoRoutes = import.meta.env.DEV
-	? [
-			createRoute({
-				getParentRoute: () => rootRoute,
-				path: "/proto/overview",
-				// No `validateSearch`: the picker owns `?v=` with history.replaceState,
-				// and this route never navigates, so the parameter survives untouched.
-				component: lazyRouteComponent(() => import("@/proto/ProtoOverview")),
-			}),
-		]
-	: [];
-// PROTO-OVERVIEW fence end
-
 const routeTree = rootRoute.addChildren([
-	...protoRoutes,
 	loginRoute,
 	shellRoute.addChildren([
 		indexRoute,