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

@@ -3,7 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import * as stylex from "@stylexjs/stylex";
 import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
-import { formatTime } from "@/lib/format";
+import { formatCount, formatTime } from "@/lib/format";
 import InlineError from "@/lib/InlineError";
 import {
 	blocklistsQuery,
@@ -225,7 +225,7 @@ function ClientCountLink({ group }: { group: Group }) {
 			<Link to="/clients" search={{ group: group.id }} {...stylex.props(shared.focusRing)}>
 				{count === undefined
 					? "Clients in this group"
-					: `${count} client${count === 1 ? "" : "s"} in this group`}
+					: `${formatCount(count)} client${count === 1 ? "" : "s"} in this group`}
 			</Link>
 		</p>
 	);
@@ -236,6 +236,10 @@ function GroupDetailReadOnly({ group }: { group: Group }) {
 		<div>
 			<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
 			<section {...stylex.props(config.panel)}>
+				<h3 {...stylex.props(config.panelHeading)}>Settings</h3>
+				<p {...stylex.props(config.panelDescription)}>
+					The group's name and whether its clients get safe search.
+				</p>
 				<DefinitionList
 					items={[
 						{ label: "Name", zonKey: "groups[].name", value: group.name },
@@ -259,6 +263,7 @@ function GroupSourcesReadOnly({ group }: { group: Group }) {
 				Assigned sources
 				<code {...stylex.props(shared.mono, config.panelKey)}>group_sources</code>
 			</h3>
+			<p {...stylex.props(config.panelDescription)}>The blocklists that apply to clients in this group.</p>
 			<QueryPanel query={assigned}>
 				{(sourceIds) => (
 					<QueryPanel query={blocklists}>
@@ -274,7 +279,7 @@ function AssignedSources({ sourceIds, catalogue }: { sourceIds: number[]; catalo
 	const assigned = catalogue.filter((source) => sourceIds.includes(source.id));
 	if (assigned.length === 0) return <p {...stylex.props(config.empty)}>This group is assigned no sources.</p>;
 	return (
-		<div {...stylex.props(shared.tableWrap)}>
+		<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
 			<table {...stylex.props(config.table)}>
 				<thead>
 					<tr>
@@ -391,6 +396,7 @@ function GroupDetailEditable({ group }: { group: Group }) {
 
 			<section {...stylex.props(config.panel)}>
 				<h3 {...stylex.props(config.panelHeading)}>Assigned sources</h3>
+				<p {...stylex.props(config.panelDescription)}>The blocklists that apply to clients in this group.</p>
 				<QueryPanel query={blocklists}>
 					{(catalogue) => <GroupSourcesEditor groupId={group.id} blocklists={catalogue} />}
 				</QueryPanel>
@@ -428,6 +434,9 @@ function GroupRules({ group, editable }: { group: Group; editable: boolean }) {
 				Rules
 				{!editable && <code {...stylex.props(shared.mono, config.panelKey)}>rules</code>}
 			</h3>
+			<p {...stylex.props(config.panelDescription)}>
+				This group's own block and allow patterns, applied before any list.
+			</p>
 			<QueryPanel query={rules}>
 				{(all) => {
 					const scoped = all.filter((rule) => rule.group_id === group.id);
@@ -457,7 +466,7 @@ function RulesTable({ rules, editable }: { rules: Rule[]; editable: boolean }) {
 
 	return (
 		<>
-			<div {...stylex.props(shared.tableWrap)}>
+			<div tabIndex={0} {...stylex.props(shared.tableWrap, shared.focusRing)}>
 				<table {...stylex.props(config.table)}>
 					<thead>
 						<tr>