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/activity/LiveActivity.tsx

@@ -16,10 +16,11 @@ import { useEffect, useRef, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
 import { useClientNames } from "@/features/clients/clientNames";
+import { formatCount } from "@/lib/format";
 import { summarizeEvent } from "@/features/provenance/querySummary";
 import Dialog from "@/ui/Dialog";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 import { ActivityCells, ActivityTableHead, activityDomainLink } from "./cells";
 import ProvenanceDetail from "./ProvenanceDetail";
 import RelatedActions from "./RelatedActions";
@@ -77,7 +78,7 @@ const styles = stylex.create({
 		display: "flex",
 		alignItems: "center",
 		gap: "0.75rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: { default: "oklch(80.9% 0.105 251.813)", [DARK]: "oklch(37.9% 0.146 265.522)" },
@@ -106,7 +107,7 @@ const styles = stylex.create({
 	},
 	cappedBox: {
 		marginTop: "1rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.dangerBorder,
@@ -130,7 +131,7 @@ const styles = stylex.create({
 	tableWrap: {
 		marginTop: "1rem",
 		overflowX: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,
@@ -287,7 +288,8 @@ export default function LiveActivity({
 
 			{live.frozen && (
 				<p {...stylex.props(styles.note)} role="status">
-					Display frozen — new queries keep buffering ({live.liveCount} in buffer, newest {capacity} kept).
+					Display frozen — new queries keep buffering ({formatCount(live.liveCount)} in buffer, newest{" "}
+					{formatCount(capacity)} kept).
 				</p>
 			)}
 
@@ -295,7 +297,10 @@ export default function LiveActivity({
 				<div role="status" {...stylex.props(styles.resumed)}>
 					<span>
 						Stream resumed —{" "}
-						{live.missed === 0 ? "no queries missed" : `${live.missed} missed queries recovered`}.
+						{live.missed === 0
+							? "no queries missed"
+							: `${formatCount(live.missed)} missed queries recovered`}
+						.
 					</span>
 					<button
 						type="button"
@@ -346,7 +351,7 @@ export default function LiveActivity({
 					)
 				) : (
 					<>
-						<div {...stylex.props(styles.tableWrap)}>
+						<div tabIndex={0} {...stylex.props(styles.tableWrap, shared.focusRing)}>
 							<table {...stylex.props(styles.table)}>
 								<ActivityTableHead />
 								<tbody>
@@ -393,8 +398,8 @@ export default function LiveActivity({
 							</table>
 						</div>
 						<p {...stylex.props(styles.footnote)}>
-							Showing {live.rows.length} {live.rows.length === 1 ? "query" : "queries"} (newest first,
-							last {capacity} kept).
+							Showing {formatCount(live.rows.length)} {live.rows.length === 1 ? "query" : "queries"}{" "}
+							(newest first, last {formatCount(capacity)} kept).
 						</p>
 					</>
 				)}