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 beside the point, a stacked client chart in eight distinct hues plus one Other band, and a card row with the cache hit rate, the query types as a single-hue ramp ring, and the upstream breakdown.

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.

All numbers go through admin/src/lib/format.ts: grouped counts, two-decimal percentages, one-decimal rates, durations as the two largest nonzero units. 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 description, the sidebar grouped into Monitoring and System with a status block (protection, queries per minute on Overview, uptime), 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 could not review sessions B to D, its endpoint returned 404 for every call on 2026-09-03; the owner accepted the smoke-server screenshots.

admin/src/features/activity/ActivityFilters.tsx

@@ -106,7 +106,7 @@ const styles = stylex.create({
 	segment: {
 		cursor: "pointer",
 		borderStyle: "none",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		paddingInline: "0.625rem",
 		fontSize: "0.875rem",
 		lineHeight: "1.25rem",
@@ -139,7 +139,7 @@ const styles = stylex.create({
 		color: colors.textSecondary,
 	},
 	popover: {
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/ActivityPage.tsx

@@ -13,7 +13,7 @@ import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
 import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 import ActivityFilters, { NO_FILTERS, type AppliedFilters } from "./ActivityFilters";
 import HistoryActivity from "./HistoryActivity";
 import LiveActivity from "./LiveActivity";
@@ -40,7 +40,7 @@ const styles = stylex.create({
 	switch: {
 		display: "flex",
 		gap: "0.25rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/ClientFilter.tsx

@@ -79,7 +79,7 @@ const styles = stylex.create({
 	popover: {
 		maxHeight: "16rem",
 		overflowY: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/HistoryActivity.tsx

@@ -17,7 +17,7 @@ import type { QueryRow } from "@/lib/types";
 import { useClientNames } from "@/features/clients/clientNames";
 import { summarizeRow } from "@/features/provenance/querySummary";
 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 { queriesFilterOf, type ActivitySearch } from "./search";
 
@@ -38,7 +38,7 @@ const styles = stylex.create({
 	tableWrap: {
 		marginTop: "1rem",
 		overflowX: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/LiveActivity.tsx

@@ -19,7 +19,7 @@ import { useClientNames } from "@/features/clients/clientNames";
 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 +77,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 +106,7 @@ const styles = stylex.create({
 	},
 	cappedBox: {
 		marginTop: "1rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.dangerBorder,
@@ -130,7 +130,7 @@ const styles = stylex.create({
 	tableWrap: {
 		marginTop: "1rem",
 		overflowX: "auto",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/PolicyTestPage.tsx

@@ -8,7 +8,7 @@ import type { Group, LookupResult } from "@/lib/types";
 import { defaultGroupId } from "@/lib/defaultGroup";
 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";
 
 const DARK = "@media (prefers-color-scheme: dark)";
 
@@ -64,7 +64,7 @@ const styles = stylex.create({
 	},
 	card: {
 		marginTop: "1.5rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/ProvenanceDetail.tsx

@@ -22,7 +22,7 @@ import {
 } from "@/features/provenance/provenanceCopy";
 import { qtypeName } from "@/features/provenance/qtype";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 
 const styles = stylex.create({
 	heading: {
@@ -40,7 +40,7 @@ const styles = stylex.create({
 	record: {
 		marginTop: "1rem",
 		maxWidth: "48rem",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		borderWidth: 1,
 		borderStyle: "solid",
 		borderColor: colors.border,

admin/src/features/activity/cells.tsx

@@ -21,7 +21,7 @@ import { rcodeShortName } from "@/features/provenance/provenanceCopy";
 import { qtypeName } from "@/features/provenance/qtype";
 import type { QuerySummary } from "@/features/provenance/querySummary";
 import { styles as shared } from "@/ui/styles";
-import { colors } from "@/ui/tokens.stylex";
+import { colors, metrics } from "@/ui/tokens.stylex";
 
 const DARK = "@media (prefers-color-scheme: dark)";
 
@@ -93,7 +93,7 @@ const styles = stylex.create({
 	 */
 	badge: {
 		display: "inline-block",
-		borderRadius: "0.25rem",
+		borderRadius: metrics.radius,
 		paddingInline: "0.375rem",
 		paddingBlock: "0.125rem",
 		fontSize: "0.75rem",