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

@@ -1,81 +1,69 @@
+/**
+ * Query volume over the window as a smoothed area: every query in blue, the
+ * blocked share in red along the bottom (ui-visual-redesign.md). Pointing at
+ * the plot selects the nearest bucket and marks it with a guide line and a dot
+ * on each curve; the tooltip sits beside the point so it never covers the slot
+ * the reader is looking at.
+ */
+
 import * as stylex from "@stylexjs/stylex";
-import { Group } from "@visx/group";
-import { BarStack } from "@visx/shape";
-import { formatTime } from "@/lib/format";
+import { formatCount, formatTime } from "@/lib/format";
 import type { Bucket } from "@/lib/types";
 import { styles as shared } from "@/ui/styles";
 import { colors } from "@/ui/tokens.stylex";
 import {
-	BucketOverlay,
 	CHART_HEIGHT,
 	ChartFrame,
+	ChartLegend,
 	ChartRoot,
 	ChartTooltip,
 	EmptyChart,
-	StackSegment,
-	bandScale,
+	HitBands,
+	areaPath,
 	labelTickValues,
 	plotArea,
-	slotCenter,
+	pointScale,
+	smoothPath,
 	useActiveIndex,
 	useMeasuredWidth,
 	valueScale,
 	valueTicks,
 	type TooltipContent,
 } from "./chartKit";
+import { CHART_BLUE, CHART_RED } from "./seriesColors";
 
-// Series colors validated for CVD separation and 3:1 surface contrast in both
-// modes (Tailwind red-500 / blue-500 / emerald-600; same hex light and dark).
-// The third key stays `other` — it is the colour key and the response field, and
-// renaming it would repaint the series. Only what the reader sees is "Allowed".
+/**
+ * Drawn bottom-up in this order: the total's fill is faint so the blocked
+ * curve, painted over it, stays a solid band along the baseline.
+ */
 const SERIES = [
-	{ key: "blocked", label: "Blocked", color: "#ef4444" },
-	{ key: "cached", label: "Cached", color: "#059669" },
-	{ key: "other", label: "Allowed", color: "#3b82f6" },
+	{ key: "queries", label: "Total queries", color: CHART_BLUE, fillOpacity: 0.13 },
+	{ key: "blocked", label: "Blocked", color: CHART_RED, fillOpacity: 0.35 },
 ] as const;
 
-type Series = (typeof SERIES)[number];
-type SeriesKey = Series["key"];
+type SeriesKey = (typeof SERIES)[number]["key"];
 
-const SERIES_COLOR: Record<SeriesKey, string> = {
-	blocked: SERIES[0].color,
-	cached: SERIES[1].color,
-	other: SERIES[2].color,
-};
+const LINE_WIDTH = 2;
+const DOT_RADIUS = 4;
 
 const styles = stylex.create({
-	legend: {
-		marginTop: "0.5rem",
-		display: "flex",
-		flexWrap: "wrap",
-		columnGap: "1rem",
-		rowGap: "0.25rem",
-		fontSize: "0.75rem",
-		lineHeight: "1rem",
-		color: colors.textSecondary,
+	guide: {
+		stroke: colors.borderStrong,
+		strokeWidth: 1,
 	},
-	legendItem: {
-		display: "flex",
-		alignItems: "center",
-		gap: "0.375rem",
+	/** The dot's ring is the panel's own surface, so it stays legible over either fill. */
+	dot: {
+		stroke: colors.surfaceRaised,
+		strokeWidth: 2,
 	},
-	swatch: {
-		display: "inline-block",
-		width: "0.625rem",
-		height: "0.625rem",
-		borderRadius: "0.125rem",
-	},
-	/** Dynamic: the swatch takes the series colour the SVG bars are drawn in. */
-	swatchColor: (color: string) => ({ backgroundColor: color }),
 });
 
 interface Column {
 	ts: number;
 	queries: number;
 	blocked: number;
-	cached: number;
-	/** queries - blocked - cached, clamped at 0. */
-	other: number;
+	/** queries - blocked, clamped at 0. */
+	allowed: number;
 }
 
 function columnsOf(buckets: Bucket[]): Column[] {
@@ -83,8 +71,7 @@ function columnsOf(buckets: Bucket[]): Column[] {
 		ts: bucket.ts,
 		queries: bucket.queries,
 		blocked: bucket.blocked,
-		cached: bucket.cached,
-		other: Math.max(0, bucket.queries - bucket.blocked - bucket.cached),
+		allowed: Math.max(0, bucket.queries - bucket.blocked),
 	}));
 }
 
@@ -92,13 +79,13 @@ function tooltipOf(column: Column): TooltipContent {
 	return {
 		title: formatTime(column.ts),
 		rows: [
-			{ key: "queries", label: "Queries", value: String(column.queries) },
 			...SERIES.map((series) => ({
 				key: series.key,
 				label: series.label,
 				color: series.color,
-				value: String(column[series.key]),
+				value: formatCount(column[series.key]),
 			})),
+			{ key: "allowed", label: "Allowed", value: formatCount(column.allowed) },
 		],
 	};
 }
@@ -125,18 +112,20 @@ export default function TimeseriesChart({ data }: { data: TimeseriesData }) {
 
 	const columns = columnsOf(data.buckets);
 	const timestamps = columns.map((column) => column.ts);
-	const plot = plotArea(width);
-	const xScale = bandScale(timestamps, plot);
-	// The scale is the reported total rather than the stack's own sum: blocked
-	// and cached are parts of `queries`, which a clamped `other` can undercount.
-	const yScale = valueScale(Math.max(...columns.map((column) => column.queries)), [plot.bottom, plot.y]);
+	const peak = Math.max(...columns.map((column) => column.queries));
+	const plot = plotArea(width, peak);
+	const xScale = pointScale(timestamps, plot);
+	const yScale = valueScale(peak, [plot.bottom, plot.y]);
 	const yTicks = valueTicks(yScale);
+	const centers = timestamps.map((ts) => xScale(ts) ?? plot.x);
+	const pointsOf = (key: SeriesKey): [number, number][] =>
+		columns.map((column, i) => [centers[i], yScale(column[key])]);
 
 	return (
 		<ChartRoot containerRef={containerRef}>
 			<svg
 				role="img"
-				aria-label={`Queries over time, ${data.buckets.length} buckets: ${SERIES.map((series) => series.label.toLowerCase()).join(", ")} queries per bucket`}
+				aria-label={`Queries over time, ${formatCount(data.buckets.length)} buckets: total and blocked queries per bucket`}
 				width="100%"
 				height={CHART_HEIGHT}
 				viewBox={`0 0 ${width} ${CHART_HEIGHT}`}
@@ -150,54 +139,61 @@ export default function TimeseriesChart({ data }: { data: TimeseriesData }) {
 					xTickValues={labelTickValues(timestamps, plot.width)}
 					bucketSeconds={data.bucket_seconds}
 				/>
-				<BarStack<Column, SeriesKey>
-					data={columns}
-					keys={SERIES.map((series) => series.key)}
-					x={(column) => column.ts}
-					xScale={xScale}
-					yScale={yScale}
-					color={(key) => SERIES_COLOR[key]}
-				>
-					{(stacks) =>
-						columns.map((column, index) => (
-							<Group
-								key={column.ts}
-								opacity={hovered.index === null || hovered.index === index ? 1 : 0.55}
-							>
-								{stacks.map((stack) => {
-									const bar = stack.bars[index];
-									return (
-										<StackSegment
-											key={stack.key}
-											x={bar.x}
-											y={bar.y}
-											width={bar.width}
-											height={bar.height}
-											fill={bar.color}
-										/>
-									);
-								})}
-							</Group>
-						))
-					}
-				</BarStack>
-				<BucketOverlay plot={plot} values={timestamps} xScale={xScale} onEnter={hovered.show} />
+				{SERIES.map((series) => {
+					const points = pointsOf(series.key);
+					const line = smoothPath(points, plot.y, plot.bottom);
+					return (
+						<g key={series.key} data-series={series.key}>
+							<path
+								d={areaPath(line, points, plot)}
+								fill={series.color}
+								fillOpacity={series.fillOpacity}
+							/>
+							<path
+								d={line}
+								fill="none"
+								stroke={series.color}
+								strokeWidth={LINE_WIDTH}
+								strokeLinejoin="round"
+							/>
+						</g>
+					);
+				})}
+				{hovered.index !== null && (
+					<g data-hover="">
+						<line
+							x1={centers[hovered.index]}
+							x2={centers[hovered.index]}
+							y1={plot.y}
+							y2={plot.bottom}
+							{...stylex.props(styles.guide)}
+						/>
+						{SERIES.map((series) => (
+							<circle
+								key={series.key}
+								cx={centers[hovered.index as number]}
+								cy={yScale(columns[hovered.index as number][series.key])}
+								r={DOT_RADIUS}
+								fill={series.color}
+								{...stylex.props(styles.dot)}
+							/>
+						))}
+					</g>
+				)}
+				<HitBands plot={plot} centers={centers} onEnter={hovered.show} />
 			</svg>
 			{hovered.index !== null && (
 				<ChartTooltip
 					index={hovered.index}
 					content={tooltipOf(columns[hovered.index])}
-					left={slotCenter(xScale, timestamps[hovered.index], plot)}
+					left={centers[hovered.index]}
+					top={yScale(columns[hovered.index].queries)}
+					beside
 				/>
 			)}
-			<ul {...stylex.props(styles.legend)}>
-				{SERIES.map((series) => (
-					<li key={series.key} {...stylex.props(styles.legendItem)}>
-						<span aria-hidden="true" {...stylex.props(styles.swatch, styles.swatchColor(series.color))} />
-						{series.label}
-					</li>
-				))}
-			</ul>
+			<ChartLegend
+				entries={SERIES.map((series) => ({ key: series.key, label: series.label, color: series.color }))}
+			/>
 			<div {...stylex.props(shared.srOnly)}>
 				<table>
 					<caption>Queries per time bucket</caption>
@@ -205,21 +201,17 @@ export default function TimeseriesChart({ data }: { data: TimeseriesData }) {
 						<tr>
 							<th scope="col">Time</th>
 							<th scope="col">Queries</th>
-							{SERIES.map((series) => (
-								<th key={series.key} scope="col">
-									{series.label}
-								</th>
-							))}
+							<th scope="col">Blocked</th>
+							<th scope="col">Allowed</th>
 						</tr>
 					</thead>
 					<tbody>
 						{columns.map((column) => (
 							<tr key={column.ts}>
 								<th scope="row">{formatTime(column.ts)}</th>
-								<td>{column.queries}</td>
-								{SERIES.map((series) => (
-									<td key={series.key}>{column[series.key]}</td>
-								))}
+								<td>{formatCount(column.queries)}</td>
+								<td>{formatCount(column.blocked)}</td>
+								<td>{formatCount(column.allowed)}</td>
 							</tr>
 						))}
 					</tbody>