Phase 7: telemetry and usage (daily rollup + week dashboard)

Build on Phases 1–6. Telemetry already arrived on
restrict/<device>/telemetry; this phase stores it in a daily rollup and
shows it.

- store: migration 003 adds telemetry_daily (device, day, app seconds,
  site seconds). InsertTelemetry maintains the affected days in the same
  transaction; RebuildRollups backfills and repairs it. UsageRange and
  TopUsage serve the week grid and top lists. CapAudit enforces the
  size-capped append-only audit log from AGENTS.md §7.
- web: GET /devices/{id}/usage — Monday-to-Sunday totals plus the top 10
  apps and top 10 sites, using CSP-safe native <progress> bars.
- theme.js: light/dark from the OS preference, with a nav toggle, loaded
  as an external script so the strict CSP still holds.
- cmd/control: `rollup` subcommand; rollup rebuild and audit cap at
  start-up and every 15 minutes.
- Version 0.5.0-phase7 (compose, Makefile, docs).

Tests: go test ./... and go vet ./... pass in golang:1.25-alpine.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

internal/web/static/app.css

@@ -546,6 +546,65 @@ a.button-utility { text-decoration: none; }
 .list-entry__value { flex: 1 1 auto; word-break: break-all; }
 .list-entry__remove { margin: 0; }
 
+/* ---------- Usage (Phase 7) ---------- */
+
+.usage-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 520px;
+}
+.usage-table th,
+.usage-table td {
+  text-align: left;
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 1px solid var(--hairline);
+  vertical-align: middle;
+}
+.usage-table thead th {
+  font: var(--type-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+.usage-table tbody th { font: var(--type-body-md); color: var(--ink); white-space: nowrap; }
+.usage-table__date { font: var(--type-caption); color: var(--ink-muted); }
+.usage-table__num { font: var(--type-body-md); color: var(--ink-secondary); white-space: nowrap; }
+.usage-table__bar { width: 40%; min-width: 120px; }
+.usage-table__today th { color: var(--primary); }
+
+/* Native <progress> bars: no inline styles, so the strict
+   Content-Security-Policy (style-src 'self') keeps holding. */
+.usage-bar {
+  display: block;
+  width: 100%;
+  height: 10px;
+  border: 0;
+  border-radius: var(--rounded-full);
+  overflow: hidden;
+  background: var(--surface-2);
+  appearance: none;
+  -webkit-appearance: none;
+}
+.usage-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--rounded-full); }
+.usage-bar::-webkit-progress-value { background: var(--primary); border-radius: var(--rounded-full); }
+.usage-bar::-moz-progress-bar { background: var(--primary); border-radius: var(--rounded-full); }
+.usage-bar--full { margin-top: var(--space-xxs); }
+
+.usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
+.usage-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-xxs) var(--space-sm);
+  align-items: center;
+  padding: var(--space-xs) 0;
+  border-top: 1px solid var(--hairline);
+}
+.usage-item:first-child { border-top: 0; }
+.usage-item--empty { color: var(--ink-muted); font-style: italic; }
+.usage-item__name { font: var(--type-body-md); color: var(--ink); overflow-wrap: anywhere; }
+.usage-item__time { font: var(--type-body-sm); color: var(--ink-muted); white-space: nowrap; }
+.usage-item .usage-bar { grid-column: 1 / -1; }
+
 /* ---------- Responsive ---------- */
 
 @media (max-width: 760px) {

internal/web/static/theme.js

@@ -0,0 +1,55 @@
+// Theme controller. The design tokens ship both palettes; nothing switches
+// between them unless this runs. It follows the OS preference by default and
+// remembers an explicit choice. Loaded with defer from /static/, so it is
+// allowed by the page's `script-src 'self'` policy (no inline script).
+(function () {
+  "use strict";
+  var KEY = "webrestrict.theme";
+  var root = document.documentElement;
+  var media = window.matchMedia("(prefers-color-scheme: dark)");
+  var stored = null;
+  try {
+    stored = window.localStorage.getItem(KEY);
+  } catch (e) {
+    stored = null;
+  }
+
+  function apply() {
+    var theme = stored || (media.matches ? "dark" : "light");
+    root.setAttribute("data-theme", theme);
+    var buttons = document.querySelectorAll("[data-theme-toggle]");
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].textContent = theme === "dark" ? "Light" : "Dark";
+      buttons[i].setAttribute(
+        "aria-label",
+        "Switch to " + (theme === "dark" ? "light" : "dark") + " theme"
+      );
+    }
+  }
+
+  document.addEventListener("click", function (event) {
+    var target = event.target && event.target.closest
+      ? event.target.closest("[data-theme-toggle]")
+      : null;
+    if (!target) {
+      return;
+    }
+    stored = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
+    try {
+      window.localStorage.setItem(KEY, stored);
+    } catch (e) {
+      /* private mode: the choice just does not persist */
+    }
+    apply();
+  });
+
+  if (media.addEventListener) {
+    media.addEventListener("change", function () {
+      if (!stored) {
+        apply();
+      }
+    });
+  }
+
+  apply();
+})();