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

src/web/server.zig

@@ -199,38 +199,65 @@ pub const OverviewCache = struct {
         body: []u8 = &.{},
         until: i64 = 0,
         data_version: i64 = 0,
+        /// The client the body is scoped to; empty for the whole household.
+        client: []u8 = &.{},
     };
 
     slots: [slot_count]Slot = @splat(.{}),
+    /// One scoped body per period, beside the household one: a device pick
+    /// must not evict the household body the next unscoped request wants.
+    /// Only the latest client per period is kept — the picker moves one
+    /// device at a time.
+    scoped: [slot_count]Slot = @splat(.{}),
 
     /// The stored bytes for this key, or null. The caller copies them into its
     /// request arena before releasing the lock: a later rebuild frees this
     /// allocation.
-    pub fn get(self: *const OverviewCache, period_index: usize, until: i64, data_version: i64) ?[]const u8 {
-        const slot = &self.slots[period_index];
+    pub fn get(
+        self: *const OverviewCache,
+        period_index: usize,
+        until: i64,
+        data_version: i64,
+        client: ?[]const u8,
+    ) ?[]const u8 {
+        const slot = if (client == null) &self.slots[period_index] else &self.scoped[period_index];
         if (slot.body.len == 0) return null;
         if (slot.until != until or slot.data_version != data_version) return null;
+        if (!std.mem.eql(u8, slot.client, client orelse "")) return null;
         return slot.body;
     }
 
     /// Takes ownership of `body`, which must be a `gpa` allocation, and frees
-    /// whatever the slot held.
+    /// whatever the slot held. On allocation failure the body is freed and the
+    /// slot keeps its previous entry.
     pub fn put(
         self: *OverviewCache,
         gpa: Allocator,
         period_index: usize,
         until: i64,
         data_version: i64,
+        client: ?[]const u8,
         body: []u8,
-    ) void {
-        const slot = &self.slots[period_index];
+    ) Allocator.Error!void {
+        const owned_client = gpa.dupe(u8, client orelse "") catch |err| {
+            gpa.free(body);
+            return err;
+        };
+        const slot = if (client == null) &self.slots[period_index] else &self.scoped[period_index];
         gpa.free(slot.body);
-        slot.* = .{ .body = body, .until = until, .data_version = data_version };
+        gpa.free(slot.client);
+        slot.* = .{ .body = body, .until = until, .data_version = data_version, .client = owned_client };
     }
 
     pub fn deinit(self: *OverviewCache, gpa: Allocator) void {
         for (&self.slots) |*slot| {
             gpa.free(slot.body);
+            gpa.free(slot.client);
+            slot.* = .{};
+        }
+        for (&self.scoped) |*slot| {
+            gpa.free(slot.body);
+            gpa.free(slot.client);
             slot.* = .{};
         }
     }