Statistics: traffic, drops, devices and connections over time

internal/stats samples every minute what the kernel already counts: the
interfaces' counters (per zone too), Housecarl's table (hits per rule,
built-in and policy; drops by chain; quotas; per-device sets), the
connection tracking table, and housecarld's and the host's memory, CPU
and load. Logged drops feed top lists of sources and what they tried.
Aggregates go to a database of their own (stats.db; per minute 7 days,
per hour 90 days, per day 2 years), with the store and queries from
Jarl's.

Traffic per inside device is a setting (stats_per_device): counting sets
stats_up/down_v4/v6 and rules at the top of the forward chain, IPv6 per
/64, carried across reloads. Set names starting with meter_, conn_,
quota_ or stats_ are reserved (set_name_reserved).

GET /stats/{status,summary,timeline,top,hits,heatmap}, hc stats, a
Statistics page with Jarl's charts, two charts on the dashboard, and a
conntrack_full warning. e2e: 188 checks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/app.js

@@ -6,6 +6,7 @@ import * as changes from "./pages/changes.js";
 import * as connections from "./pages/connections.js";
 import * as tracePage from "./pages/trace.js";
 import * as matrixPage from "./pages/matrix.js";
+import * as statsPage from "./pages/stats.js";
 import * as dashboard from "./pages/dashboard.js";
 import * as rules from "./pages/rules.js";
 import * as nat from "./pages/nat.js";
@@ -32,6 +33,7 @@ const routes = [
   { pattern: /^log$/, page: log, nav: "log" },
   { pattern: /^connections$/, page: connections, nav: "connections" },
   { pattern: /^trace$/, page: tracePage, nav: "trace" },
+  { pattern: /^stats$/, page: statsPage, nav: "stats" },
   { pattern: /^settings$/, page: settings, nav: "settings" },
   { pattern: /^import$/, page: importPage, nav: "import" },
   { pattern: /^changes$/, page: changes, nav: "changes" },
@@ -55,6 +57,7 @@ const navItems = [
     ["services", "#/services", "Services", "config"],
   ] },
   { menu: "Traffic", items: [
+    ["stats", "#/stats", "Statistics", "log"],
     ["log", "#/log", "Log", "log"],
     ["connections", "#/connections", "Connections", "log"],
     ["trace", "#/trace", "Trace", "log"],

internal/web/static/assets/charts.js

@@ -0,0 +1,351 @@
+// Small SVG charts for the statistics page: a line/area chart with a
+// crosshair tooltip, a weekday x hour heatmap, and bar lists. No library;
+// colors come from CSS custom properties (--series-N, --heat-N) so light
+// and dark themes are handled in style.css. All text is inserted as text,
+// never as markup.
+import { h } from "./ui.js";
+
+const NS = "http://www.w3.org/2000/svg";
+
+function svg(tag, attrs, ...children) {
+  const el = document.createElementNS(NS, tag);
+  for (const [k, v] of Object.entries(attrs || {})) {
+    if (v !== undefined && v !== null && v !== false) el.setAttribute(k, v);
+  }
+  for (const c of children.flat(Infinity)) {
+    if (c === null || c === undefined || c === false) continue;
+    el.append(c instanceof Node ? c : document.createTextNode(String(c)));
+  }
+  return el;
+}
+
+// compact formats a count: 1,234 / 12.9K / 4.2M.
+export function compact(n) {
+  const a = Math.abs(n);
+  if (a >= 1e9) return (n / 1e9).toFixed(a >= 1e10 ? 0 : 1).replace(/\.0$/, "") + "B";
+  if (a >= 1e6) return (n / 1e6).toFixed(a >= 1e7 ? 0 : 1).replace(/\.0$/, "") + "M";
+  if (a >= 1e4) return (n / 1e3).toFixed(a >= 1e5 ? 0 : 1).replace(/\.0$/, "") + "K";
+  return Math.round(n).toLocaleString();
+}
+
+// niceTicks returns 0..max in clean steps (1, 2 or 5 x 10^k), at most n+1 ticks.
+export function niceTicks(max, n = 4) {
+  if (max <= 0) return [0, 1];
+  const raw = max / n;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const step = [1, 2, 5, 10].map((m) => m * mag).find((s) => s >= raw);
+  const ticks = [];
+  for (let v = 0; v < max + step * 0.999; v += step) ticks.push(Math.round(v * 1e6) / 1e6);
+  return ticks;
+}
+
+const MIN = 60, HOUR = 3600, DAY = 86400;
+const tickSteps = [5 * MIN, 10 * MIN, 15 * MIN, 30 * MIN, HOUR, 2 * HOUR, 3 * HOUR, 6 * HOUR, 12 * HOUR, DAY, 2 * DAY, 7 * DAY, 14 * DAY, 30 * DAY];
+
+// timeTicks picks local-time-aligned ticks between t0 and t1 (Unix seconds).
+function timeTicks(t0, t1, maxTicks) {
+  const span = t1 - t0;
+  const step = tickSteps.find((s) => span / s <= maxTicks) || 30 * DAY;
+  const out = [];
+  const d = new Date(t0 * 1000);
+  if (step >= DAY) {
+    d.setHours(0, 0, 0, 0);
+  } else {
+    d.setSeconds(0, 0);
+    const mins = d.getHours() * 60 + d.getMinutes();
+    const stepMin = step / 60;
+    d.setHours(0, Math.floor(mins / stepMin) * stepMin, 0, 0);
+  }
+  for (let t = d.getTime() / 1000; t <= t1; ) {
+    if (t >= t0) out.push(t);
+    if (step >= DAY) {
+      const nd = new Date(t * 1000);
+      nd.setDate(nd.getDate() + step / DAY);
+      t = nd.getTime() / 1000;
+    } else t += step;
+  }
+  return { ticks: out, step };
+}
+
+const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const pad = (n) => String(n).padStart(2, "0");
+
+function tickLabel(t, step) {
+  const d = new Date(t * 1000);
+  if (step >= DAY) return step >= 7 * DAY ? months[d.getMonth()] + " " + d.getDate() : weekdays[d.getDay()] + " " + d.getDate();
+  const hm = pad(d.getHours()) + ":" + pad(d.getMinutes());
+  return d.getHours() === 0 && d.getMinutes() === 0 ? weekdays[d.getDay()] + " " + d.getDate() : hm;
+}
+
+// longTime describes a bucket for tooltips and tables.
+export function bucketLabel(t, stepSecs) {
+  const d = new Date(t * 1000);
+  const day = weekdays[d.getDay()] + " " + d.getDate() + " " + months[d.getMonth()];
+  if (stepSecs >= DAY) return day;
+  const end = new Date((t + stepSecs) * 1000);
+  const hm = (x) => pad(x.getHours()) + ":" + pad(x.getMinutes());
+  return day + ", " + hm(d) + (stepSecs > MIN ? "–" + hm(end) : "");
+}
+
+export const stepSeconds = { "1m": MIN, "5m": 5 * MIN, "15m": 15 * MIN, "1h": HOUR, "6h": 6 * HOUR, "1d": DAY };
+
+// tooltip is one floating readout per chart.
+function tooltip() {
+  const el = h("div", { class: "chart-tip", role: "status" });
+  el.hidden = true;
+  return el;
+}
+
+// chartCard wraps a chart with its title and a table-view toggle (the
+// accessible twin of every chart).
+export function chartCard(title, subtitle, chart, tableView, opts = {}) {
+  const body = h("div", { class: "chart-body" }, chart);
+  const tableBox = h("div", { class: "chart-table" }, tableView);
+  tableBox.hidden = true;
+  const toggle = h("button", { class: "small link", type: "button", "aria-pressed": "false" }, "Table");
+  toggle.addEventListener("click", () => {
+    const showTable = tableBox.hidden;
+    tableBox.hidden = !showTable;
+    body.hidden = showTable;
+    toggle.textContent = showTable ? "Chart" : "Table";
+    toggle.setAttribute("aria-pressed", String(showTable));
+  });
+  return h("figure", { class: "panel chart-card" + (opts.wide ? " wide" : "") },
+    h("figcaption", { class: "chart-head" },
+      h("div", { class: "grow" }, h("h2", null, title), subtitle ? h("div", { class: "muted small" }, subtitle) : null),
+      opts.legend || null,
+      tableView ? toggle : null),
+    body, tableBox);
+}
+
+// legend lists series with a short line key (the mark the series uses).
+export function legend(series) {
+  return h("ul", { class: "chart-legend" }, series.map((s) =>
+    h("li", null, h("span", { class: "key line s" + s.slot }), s.label)));
+}
+
+// endLabelWidth is the room lineChart needs for the end labels of series.
+export function endLabelWidth(series) {
+  return series.length > 1 && series.length <= 4 ? Math.max(...series.map((s) => s.label.length)) * 7 + 12 : 8;
+}
+
+// lineChart draws series over time. series: [{label, values, slot}] (slot
+// = categorical color 1..3); times: bucket starts (Unix seconds); step in
+// seconds. With area, the first series gets a 10% wash under its line.
+// gutter {left, right} sets the least room for the axis labels and the end
+// labels: charts shown one above the other pass the same gutter, so their
+// time axes line up. format formats values (axis and readout); a null
+// value is a gap in the line (no data for that time).
+export function lineChart({ series, times, step, area = false, height = 220, endLabels = true, gutter = {}, format = compact }) {
+  const root = h("div", { class: "chart", tabindex: "0", "aria-label": series.map((s) => s.label).join(", ") + " over time" });
+  const tip = tooltip();
+  root.append(tip);
+  let width = 0, focusIdx = -1, geom = null;
+
+  function draw() {
+    const w = root.clientWidth;
+    if (!w || w === width) return;
+    width = w;
+    root.querySelector("svg")?.remove();
+    const max = Math.max(1, ...series.flatMap((s) => s.values).filter((v) => v != null));
+    const yTicks = niceTicks(max, 4);
+    const yMax = yTicks[yTicks.length - 1];
+    const labelW = Math.max(...yTicks.map((t) => format(t).length)) * 7 + 10;
+    const endW = endLabels ? endLabelWidth(series) : 8;
+    const m = { top: 10, right: Math.max(endW, gutter.right || 0), bottom: 24, left: Math.max(labelW, gutter.left || 0) };
+    const pw = Math.max(40, w - m.left - m.right), ph = height - m.top - m.bottom;
+    const t0 = times[0], t1 = times[times.length - 1] + step;
+    const x = (t) => m.left + ((t - t0) / Math.max(1, t1 - t0)) * pw;
+    const cx = (i) => x(times[i] + step / 2); // the middle of a bucket
+    const y = (v) => m.top + ph - (v / yMax) * ph;
+    const s = svg("svg", { width: w, height, viewBox: `0 0 ${w} ${height}`, role: "img", "aria-hidden": "true" });
+    // Grid and axes.
+    for (const t of yTicks) {
+      s.append(svg("line", { class: t === 0 ? "axis" : "grid", x1: m.left, x2: m.left + pw, y1: y(t), y2: y(t) }));
+      s.append(svg("text", { class: "tick", x: m.left - 6, y: y(t) + 4, "text-anchor": "end" }, format(t)));
+    }
+    const { ticks, step: tstep } = timeTicks(t0, t1, Math.max(2, Math.floor(pw / 90)));
+    for (const t of ticks) {
+      s.append(svg("text", { class: "tick", x: x(t), y: height - 6, "text-anchor": "middle" }, tickLabel(t, tstep)));
+    }
+    // Series.
+    series.forEach((sr, k) => {
+      // A gap (null) starts a new piece of line.
+      const pts = sr.values.map((v, i) => (v == null ? null : [cx(i), y(v)]));
+      const d = pts.map((p, i) => (p ? (i && pts[i - 1] ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1) : "")).join("");
+      if (area && k === 0 && pts.length && pts.every(Boolean)) {
+        s.append(svg("path", { class: "area s" + sr.slot, d: d + `L${pts[pts.length - 1][0].toFixed(1)} ${y(0)}L${pts[0][0].toFixed(1)} ${y(0)}Z` }));
+      }
+      s.append(svg("path", { class: "line s" + sr.slot, d }));
+      // A point without neighbours has no line: show it as a dot.
+      pts.forEach((p, i) => {
+        if (p && !pts[i - 1] && !pts[i + 1]) s.append(svg("circle", { class: "dot s" + sr.slot, cx: p[0], cy: p[1], r: 3 }));
+      });
+    });
+    // Direct end labels when there is room and they don't collide.
+    if (m.right > 8) {
+      const ends = series.map((sr) => ({ label: sr.label, y: y(sr.values.findLast((v) => v != null) || 0) })).sort((a, b) => a.y - b.y);
+      if (ends.every((e, i) => i === 0 || e.y - ends[i - 1].y >= 13)) {
+        for (const e of ends) s.append(svg("text", { class: "end-label", x: m.left + pw + 6, y: e.y + 4 }, e.label));
+      }
+    }
+    // Crosshair (drawn on hover/focus).
+    const cross = svg("line", { class: "crosshair", y1: m.top, y2: m.top + ph, visibility: "hidden" });
+    const dots = series.map((sr) => svg("circle", { class: "dot s" + sr.slot, r: 4, visibility: "hidden" }));
+    s.append(cross, ...dots);
+    // The hit area is the whole plot: readers aim at a time, not a line.
+    const hit = svg("rect", { class: "hit", x: m.left, y: m.top, width: pw, height: ph });
+    s.append(hit);
+    root.prepend(s);
+    geom = { cx, y, m, pw, ph, cross, dots, hit };
+    hit.addEventListener("pointermove", (e) => {
+      const r = s.getBoundingClientRect();
+      const px = e.clientX - r.left;
+      const i = Math.round(((px - m.left) / pw) * (times.length) - 0.5);
+      show(Math.max(0, Math.min(times.length - 1, i)));
+    });
+    hit.addEventListener("pointerleave", hide);
+    if (focusIdx >= 0) show(focusIdx);
+  }
+
+  function show(i) {
+    if (!geom) return;
+    focusIdx = i;
+    const xpos = geom.cx(i);
+    geom.cross.setAttribute("x1", xpos);
+    geom.cross.setAttribute("x2", xpos);
+    geom.cross.setAttribute("visibility", "visible");
+    series.forEach((sr, k) => {
+      geom.dots[k].setAttribute("cx", xpos);
+      geom.dots[k].setAttribute("cy", geom.y(sr.values[i] ?? 0));
+      geom.dots[k].setAttribute("visibility", sr.values[i] == null ? "hidden" : "visible");
+    });
+    tip.replaceChildren(
+      h("div", { class: "tip-head" }, bucketLabel(times[i], step)),
+      ...series.map((sr) => h("div", { class: "tip-row" },
+        h("span", { class: "key line s" + sr.slot }), h("strong", null, sr.values[i] == null ? "–" : format === compact ? sr.values[i].toLocaleString() : format(sr.values[i])), " ", h("span", { class: "muted" }, sr.label))));
+    tip.hidden = false;
+    // Keep the readout inside the chart, on the far side of the pointer.
+    const left = xpos > root.clientWidth / 2 ? xpos - tip.offsetWidth - 12 : xpos + 12;
+    tip.style.left = Math.max(0, left) + "px";
+    tip.style.top = geom.m.top + "px";
+  }
+
+  function hide() {
+    if (!geom) return;
+    geom.cross.setAttribute("visibility", "hidden");
+    geom.dots.forEach((d) => d.setAttribute("visibility", "hidden"));
+    tip.hidden = true;
+    focusIdx = -1;
+  }
+
+  // Keyboard: arrows move the crosshair, as hover does.
+  root.addEventListener("focus", () => show(focusIdx >= 0 ? focusIdx : times.length - 1));
+  root.addEventListener("blur", hide);
+  root.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      show(Math.max(0, Math.min(times.length - 1, (focusIdx < 0 ? times.length - 1 : focusIdx) + (e.key === "ArrowLeft" ? -1 : 1))));
+    }
+  });
+  new ResizeObserver(draw).observe(root);
+  return root;
+}
+
+// timeTable is the table view of a line chart (busiest buckets first is
+// not useful here: keep time order, newest first).
+export function timeTable(series, times, step, format) {
+  const cell = (v) => (v == null ? "–" : format ? format(v) : v.toLocaleString());
+  const rows = times.map((t, i) => ({ t, i })).reverse();
+  return h("div", { class: "table-wrap scroll" }, h("table", null,
+    h("thead", null, h("tr", null, h("th", null, "Time"), series.map((s) => h("th", { class: "num" }, s.label)))),
+    h("tbody", null, rows.map((r) => h("tr", null, h("td", null, bucketLabel(r.t, step)),
+      series.map((s) => h("td", { class: "num" }, cell(s.values[r.i]))))))));
+}
+
+// heatmap draws average activity by weekday (rows, Monday first) and hour
+// (columns) with a sequential one-hue ramp; cells without data stay empty.
+export function heatmap(hm, unit) {
+  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  let peak = 0;
+  hm.avg.forEach((row) => row.forEach((v) => { peak = Math.max(peak, v); }));
+  const steps = 7;
+  const level = (v) => (peak <= 0 ? 0 : Math.min(steps - 1, Math.floor((v / peak) * steps)));
+  const tip = tooltip();
+  const grid = h("div", { class: "heatmap", role: "grid", "aria-label": "Average " + unit + " per hour by weekday and hour of day" });
+  grid.append(h("div", { class: "hm-corner" }));
+  for (let hr = 0; hr < 24; hr++) grid.append(h("div", { class: "hm-col" }, hr % 3 === 0 ? pad(hr) : ""));
+  days.forEach((day, d) => {
+    grid.append(h("div", { class: "hm-row" }, day));
+    for (let hr = 0; hr < 24; hr++) {
+      const v = hm.avg[d][hr];
+      const n = hm.samples[d][hr];
+      const text = v < 0 ? day + " " + pad(hr) + ":00 – no data" :
+        day + " " + pad(hr) + ":00 – " + Math.round(v).toLocaleString() + " " + unit + " per hour (average of " + n + (n === 1 ? " hour)" : " hours)");
+      const cell = h("div", { class: "hm-cell " + (v < 0 ? "hm-empty" : "heat-" + level(v)), tabindex: "-1", "aria-label": text });
+      const showTip = () => {
+        tip.textContent = text;
+        tip.hidden = false;
+        const r = cell.getBoundingClientRect(), pr = grid.getBoundingClientRect();
+        tip.style.left = Math.max(0, Math.min(pr.width - tip.offsetWidth, r.left - pr.left - tip.offsetWidth / 2 + r.width / 2)) + "px";
+        tip.style.top = (r.bottom - pr.top + 6) + "px";
+      };
+      cell.addEventListener("pointerenter", showTip);
+      cell.addEventListener("focus", showTip);
+      cell.addEventListener("pointerleave", () => { tip.hidden = true; });
+      cell.addEventListener("blur", () => { tip.hidden = true; });
+      grid.append(cell);
+    }
+  });
+  // Arrow keys move between cells.
+  grid.tabIndex = 0;
+  let cur = -1;
+  const cells = () => [...grid.querySelectorAll(".hm-cell")];
+  grid.addEventListener("keydown", (e) => {
+    const delta = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -24, ArrowDown: 24 }[e.key];
+    if (delta === undefined) return;
+    e.preventDefault();
+    cur = Math.max(0, Math.min(7 * 24 - 1, (cur < 0 ? 0 : cur) + delta));
+    cells()[cur].focus();
+  });
+  const scale = h("div", { class: "hm-scale" },
+    h("span", { class: "muted small" }, "0"),
+    Array.from({ length: steps }, (_, i) => h("span", { class: "hm-swatch heat-" + i })),
+    h("span", { class: "muted small" }, compact(peak) + " " + unit + "/hour"),
+    h("span", { class: "hm-swatch hm-empty" }), h("span", { class: "muted small" }, "no data"));
+  return h("div", { class: "heatmap-wrap" }, grid, tip, scale);
+}
+
+export function heatmapTable(hm, unit) {
+  const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+  return h("div", { class: "table-wrap scroll" }, h("table", null,
+    h("thead", null, h("tr", null, h("th", null, "Hour"), days.map((d) => h("th", { class: "num" }, d)))),
+    h("tbody", null, Array.from({ length: 24 }, (_, hr) => h("tr", null, h("td", null, pad(hr) + ":00"),
+      days.map((_, d) => h("td", { class: "num" }, hm.avg[d][hr] < 0 ? "–" : Math.round(hm.avg[d][hr]).toLocaleString())))))),
+    h("div", { class: "muted small" }, "Average " + unit + " per hour."));
+}
+
+// barList shows ranked entries as labelled horizontal bars in one hue
+// (one series: no legend, the title names it). Values are always printed,
+// so the list is its own table view.
+// extra(key), when given, adds something after an entry's label (e.g. a
+// link that excludes it).
+export function barList(entries, { total, label = (k) => k, empty = "No data yet.", href, extra, format = compact } = {}) {
+  if (!entries.length) return h("div", { class: "empty" }, empty);
+  // Entries may be in a natural order (e.g. latency buckets), not by size.
+  const peak = Math.max(1, ...entries.map((e) => e.count));
+  const sum = total || entries.reduce((a, e) => a + e.count, 0);
+  return h("ol", { class: "bar-list" }, entries.map((e) => {
+    const share = sum ? (e.count / sum) * 100 : 0;
+    const name = label(e.key);
+    const link = href ? href(e.key) : null;
+    // Entries with a name (a rule's label): the name, then the key.
+    const shown = e.name ? [e.name, h("span", { class: "muted" }, " " + name)] : name;
+    return h("li", { title: (e.name ? e.name + " (" + name + ")" : name) + ": " + format(e.count) + " (" + share.toFixed(1) + "%)" },
+      h("div", { class: "bar-text" },
+        link ? h("a", { href: link, class: "bar-label" }, shown) : h("span", { class: "bar-label" }, shown),
+        h("span", { class: "bar-value" }, extra ? [extra(e.key), " "] : null, format(e.count), h("span", { class: "muted" }, " · " + share.toFixed(share < 10 ? 1 : 0) + "%"))),
+      h("div", { class: "bar-track" }, h("div", { class: "bar-fill", style: { width: Math.max(0.5, (e.count / peak) * 100) + "%" } })));
+  }));
+}

internal/web/static/assets/pages/dashboard.js

@@ -4,15 +4,19 @@ import { h, mount, table, badge, problemsList, time } from "../ui.js";
 import { get, can } from "../api.js";
 import { onLeave } from "../app.js";
 import { describe, hits, humanCount } from "../widgets.js";
+import { lineChart, chartCard, legend, timeTable, stepSeconds } from "../charts.js";
+import { bytes } from "./stats.js";
 
 export async function render(el) {
   const draw = async () => {
     const st = await get("/status");
     const config = can("config", false), logs = can("log", false);
-    const [rules, cs, log] = await Promise.all([
+    const [rules, cs, log, tl, zones] = await Promise.all([
       config ? get("/rules") : [],
       logs ? get("/counters").then((c) => c.counters).catch(() => ({})) : {},
       logs ? get("/log", { limit: 8 }).catch(() => []) : [],
+      logs ? get("/stats/timeline", { since: "24h", step: "1h", keys: "zrx:*,ztx:*,drops" }).catch(() => null) : null,
+      config ? get("/zones").catch(() => []) : [],
     ]);
     const busiest = rules.filter((r) => cs["r" + r.id] && cs["r" + r.id].packets > 0)
       .sort((a, b) => cs["r" + b.id].packets - cs["r" + a.id].packets).slice(0, 8);
@@ -35,6 +39,7 @@ export async function render(el) {
         card("Dropped by policy", policyDrops("input") + " / " + policyDrops("forward"), "input / forward", logs ? "#/log" : null),
         card("Problems", st.problems.length, st.problems.length ? "see below" : "none", null)),
       st.problems.length ? h("div", { class: "panel" }, h("h2", null, "Problems"), problemsList(st.problems)) : null,
+      tl ? statsCharts(tl, zones) : null,
       h("div", { class: "panel" }, h("h2", null, "Interfaces"), table([
         { label: "Interface", render: (i) => [h("span", { class: "dot " + (i.up ? "ok" : "err") }), h("span", { class: "mono" }, h("strong", null, i.name))] },
         { label: "Zone", render: (i) => i.zone || h("span", { class: "muted" }, "none") },
@@ -63,3 +68,20 @@ export async function render(el) {
   const t = setInterval(() => { if (!document.hidden) draw().catch(() => {}); }, 15000);
   onLeave(() => clearInterval(t));
 }
+
+// statsCharts: the last 24 hours' traffic with the internet and drops,
+// per hour (the Statistics page has the rest).
+function statsCharts(tl, zones) {
+  const ext = new Set(zones.filter((z) => z.external).map((z) => z.name));
+  const step = stepSeconds[tl.step];
+  const total = (prefix) => tl.times.map((_, i) => tl.series.filter((x) => x.key.startsWith(prefix) && ext.has(x.key.slice(prefix.length))).reduce((a, x) => a + x.values[i], 0));
+  const traffic = [{ label: "Downloaded", values: total("zrx:"), slot: 1 }, { label: "Uploaded", values: total("ztx:"), slot: 2 }];
+  const drops = [{ label: "Dropped", values: (tl.series.find((x) => x.key === "drops") || { values: tl.times.map(() => 0) }).values, slot: 2 }];
+  const gutter = { left: 64, right: 8 };
+  return h("div", { class: "chart-grid" },
+    ext.size ? chartCard("Internet traffic", "bytes per hour from and to external zones, last 24 hours",
+      lineChart({ series: traffic, times: tl.times, step, area: true, height: 150, endLabels: false, gutter, format: bytes }),
+      timeTable(traffic, tl.times, step, bytes), { legend: legend(traffic) }) : null,
+    chartCard("Dropped packets", h("span", null, "per hour, last 24 hours · ", h("a", { href: "#/stats" }, "Statistics")),
+      lineChart({ series: drops, times: tl.times, step, area: true, height: 150, endLabels: false, gutter }), timeTable(drops, tl.times, step)));
+}

internal/web/static/assets/pages/settings.js

@@ -27,6 +27,7 @@ export async function render(el) {
   const v6 = listEditor(s.antispoof_v6, { addLabel: "Add" });
   const flow = listEditor(s.flowtable_devices, { suggestions: ifs.map((i) => i.name), placeholder: "wan", addLabel: "Add device" });
   const probation = input({ value: fmtSeconds(s.probation_seconds || 120), class: "short" });
+  const perDevice = checkbox("count traffic per inside device (IPv6 per /64), for the Statistics page's top devices: a counter for each address talking to an external zone", s.stats_per_device);
   const manual = checkbox("a person confirms each change (otherwise the browser or hc that made it confirms it by itself, once it reaches Housecarl again over a new connection)", s.manual_confirm);
   const err = h("div");
   const save = async (dry) => {
@@ -38,7 +39,7 @@ export async function render(el) {
     try {
       const r = await change("PATCH", "/settings", { input_policy: input_.value, forward_policy: forward.value, output_policy: output.value,
         log_policy_drops: logDrops.input.checked, builtins, own_prefixes: own.value(), antispoof_v4: v4.value(), antispoof_v6: v6.value(),
-        flowtable_devices: flow.value(), probation_seconds: p === 120 ? 0 : p, manual_confirm: manual.input.checked }, { query: dry ? { dry_run: 1 } : undefined });
+        flowtable_devices: flow.value(), probation_seconds: p === 120 ? 0 : p, manual_confirm: manual.input.checked, stats_per_device: perDevice.input.checked }, { query: dry ? { dry_run: 1 } : undefined });
       if (!dry && (r.applied || r.staged)) rerender();
     } catch (e) { mount(err, errorBox(e)); }
   };
@@ -56,7 +57,8 @@ export async function render(el) {
       field("Antispoof IPv6", v6),
       field("Flowtable", flow, "Forwarded TCP and UDP between these devices skip the rules once established (fast path). Exact names; none: off."),
       field("Probation", probation, "How long a change made over the network has to be confirmed before it is rolled back."),
-      h("label"), manual),
+      h("label"), manual,
+      field("Statistics", perDevice)),
     err,
     write ? h("div", { class: "actions form-actions" },
       h("button", { class: "primary", onclick: () => save(false) }, "Save"),

internal/web/static/assets/pages/stats.js

@@ -0,0 +1,214 @@
+// Statistics: traffic per zone, drops, blocked sources, devices,
+// connections, quotas and the machine over time (docs/stats.md).
+import { h, mount, fmtTime, errorBox } from "../ui.js";
+import { get } from "../api.js";
+import { lineChart, chartCard, legend, timeTable, heatmap, heatmapTable, barList, compact, stepSeconds, endLabelWidth } from "../charts.js";
+
+const ranges = [["1h", "1 hour"], ["6h", "6 hours"], ["24h", "24 hours"], ["7d", "7 days"], ["30d", "30 days"], ["90d", "90 days"], ["365d", "a year"]];
+const rangeSecs = { "1h": 3600, "6h": 6 * 3600, "24h": 86400, "7d": 7 * 86400, "30d": 30 * 86400, "90d": 90 * 86400, "365d": 365 * 86400 };
+
+let generation = 0;
+// The zone the traffic chart shows, kept while the page refreshes.
+let shownZone = null;
+
+export async function render(el, params, query) {
+  const gen = ++generation;
+  const want = query && query.get ? query.get("since") : null;
+  const since = rangeSecs[want] ? want : "24h";
+  const status = await get("/stats/status");
+  const head = h("div", { class: "page-head" },
+    h("div", { class: "grow" }, h("h1", null, "Statistics"),
+      h("div", { class: "muted" }, status.enabled
+        ? "Sampled every minute · data since " + (status.first_data ? fmtTime(status.first_data) : "–") +
+          " · kept: minutes " + status.retention.minute + ", hours " + status.retention.hour + ", days " + status.retention.day
+        : "Statistics are off")));
+  if (!status.enabled) {
+    mount(el, head, h("div", { class: "panel" },
+      h("p", null, "Housecarl keeps traffic per zone, drops, blocked sources, connections and quotas over time, in a database of its own. Turn it on in /etc/housecarl/housecarl.yaml and restart housecarl:"),
+      h("pre", { class: "code" }, "stats:\n  enabled: true"),
+      h("p", { class: "muted" }, "See docs/stats.md.")));
+    return;
+  }
+  const heatSince = rangeSecs[since] < 7 * 86400 ? "7d" : rangeSecs[since] > 90 * 86400 ? "90d" : since;
+  let d;
+  try {
+    d = await loadAll(since, heatSince);
+  } catch (e) {
+    mount(el, head, rangeRow(since), errorBox(e));
+    return;
+  }
+  if (gen !== generation) return; // the user moved on
+  const s = d.summary;
+  const rangeLabel = "in the last " + ranges.find((r) => r[0] === since)[1];
+  const parts = [head, rangeRow(since)];
+  if (status.sample_error) parts.push(h("div", { class: "msg warn" }, "The last sample failed: " + status.sample_error));
+
+  // Headline numbers: what came from and went to the external zones.
+  const ext = new Set(d.zones.filter((z) => z.external).map((z) => z.name));
+  const sum = (f) => s.zones.filter((z) => ext.has(z.name)).reduce((a, z) => a + f(z), 0);
+  const l = status.latest || {};
+  parts.push(h("div", { class: "cards" },
+    ext.size ? tile("Downloaded", bytes(sum((z) => z.received)), "from external zones, " + rangeLabel) : null,
+    ext.size ? tile("Uploaded", bytes(sum((z) => z.sent)), "to external zones") : null,
+    tile("Dropped", compact(s.drops), "packets: rules, built-ins and policies"),
+    s.conntrack_max ? tile("Connections", compact(s.peak_connections), "most at once (of " + compact(s.conntrack_max) + " allowed)" + (l.conntrack != null ? " · now " + compact(l.conntrack) : "")) : null));
+
+  // Traffic per zone: one zone at a time, received and sent.
+  const traffic = complete(d.traffic);
+  const step = stepSeconds[traffic.step];
+  const zoneNames = s.zones.map((z) => z.name);
+  if (!zoneNames.includes(shownZone)) shownZone = zoneNames.find((z) => ext.has(z)) || zoneNames[0] || null;
+  const trafficBox = h("div");
+  const drawTraffic = () => {
+    const pick = h("div", { class: "segmented" }, zoneNames.map((z) =>
+      h("button", { type: "button", class: z === shownZone ? "active" : "", onclick: () => { shownZone = z; drawTraffic(); } }, z)));
+    const series = [
+      { label: "Received", values: values(traffic, "zrx:" + shownZone), slot: 1 },
+      { label: "Sent", values: values(traffic, "ztx:" + shownZone), slot: 2 },
+    ];
+    mount(trafficBox, chartCard("Traffic" + (shownZone ? ": " + shownZone : ""),
+      "bytes per " + stepName(traffic.step) + " received from and sent to the zone's interfaces, " + rangeLabel,
+      shownZone ? h("div", null, zoneNames.length > 1 ? h("div", { class: "filter-row" }, pick) : null,
+        lineChart({ series, times: traffic.times, step, area: true, gutter: { left: 64, right: endLabelWidth(series) }, format: bytes }))
+        : h("div", { class: "empty" }, "No traffic recorded yet: interfaces count once they are in a zone."),
+      shownZone ? timeTable(series, traffic.times, step, bytes) : null, { wide: true, legend: shownZone ? legend(series) : null }));
+  };
+  drawTraffic();
+  parts.push(trafficBox);
+  if (s.zones.length) {
+    parts.push(h("div", { class: "chart-grid" },
+      listCard("Received per zone", rangeLabel, barList(s.zones.map((z) => ({ key: z.name, count: z.received })), { format: bytes })),
+      listCard("Sent per zone", rangeLabel, barList(s.zones.map((z) => ({ key: z.name, count: z.sent })), { format: bytes }))));
+  }
+
+  // Drops over time, by chain, and when they happen.
+  const drops = complete(d.drops);
+  const dSeries = [{ label: "Dropped", values: values(drops, "drops"), slot: 2 }];
+  const anyDrops = dSeries[0].values.some((v) => v > 0);
+  parts.push(chartCard("Dropped packets", "per " + stepName(drops.step) + ", by rules, built-ins and policies that drop, " + rangeLabel,
+    anyDrops ? lineChart({ series: dSeries, times: drops.times, step: stepSeconds[drops.step], area: true, gutter: { left: 64, right: 8 } }) : h("div", { class: "empty" }, "Nothing dropped " + rangeLabel + "."),
+    anyDrops ? timeTable(dSeries, drops.times, stepSeconds[drops.step]) : null, { wide: true }));
+  parts.push(chartCard("When drops happen", "average dropped packets per hour by weekday and hour of day (local time), last " + ranges.find((r) => r[0] === heatSince)[1],
+    heatmap(d.heat, "packets"), heatmapTable(d.heat, "packets"), { wide: true }));
+
+  // Who and what.
+  const unused = d.hits.filter((e) => e.count === 0 && e.key.startsWith("r"));
+  const devHint = h("div", { class: "empty" }, status.per_device
+    ? "No traffic per device " + rangeLabel + "."
+    : ["Traffic per device is off. Turn it on under ", h("a", { href: "#/settings" }, "Settings"), " (it adds a counter for each inside address)."]);
+  parts.push(h("div", { class: "chart-grid" },
+    listCard("Busiest rules", "packets each counted, " + rangeLabel, barList(s.rules, { label: (k) => k, href: (k) => ruleHref(k) })),
+    listCard("Dropped, by chain", "early: antispoofing · invalid: packets conntrack can't place", barList(s.drops_by_chain, { empty: "Nothing dropped " + rangeLabel + "." })),
+    listCard("Blocked most", "sources of logged drops (the policies' with 'log drops' on, and rules that log)", barList(s.blocked_sources, { empty: "No logged drops " + rangeLabel + ".", href: (k) => "#/trace?address=" + encodeURIComponent(k) })),
+    listCard("What they tried", "the logged drops' protocol and port", barList(s.blocked_ports, { empty: "No logged drops " + rangeLabel + "." })),
+    listCard("Devices, received", "bytes from external zones, by inside address (IPv6 per /64)", s.devices_down.length ? barList(s.devices_down, { format: bytes, href: connHref }) : devHint),
+    listCard("Devices, sent", "bytes to external zones", s.devices_up.length ? barList(s.devices_up, { format: bytes, href: connHref }) : devHint.cloneNode(true)),
+    d.quotas.length ? listCard("Quotas", "bytes counted against each rule's quota, " + rangeLabel, barList(d.quotas, { format: bytes, label: (k) => "rule #" + k.slice(1), href: () => "#/rules" })) : null,
+    listCard("Rules that matched nothing", "in the last 30 days (or since statistics started): candidates to remove",
+      unused.length ? h("div", null, h("ul", { class: "plain-list" }, unused.slice(0, 12).map((e) => h("li", null, h("a", { href: ruleHref(e.key) }, e.name || e.key)))),
+        unused.length > 12 ? h("div", { class: "muted small" }, "and " + (unused.length - 12) + " more: hc stats rules --unused") : null) : h("div", { class: "empty" }, "Every rule matched something."))));
+
+  // Connections and the machine.
+  const g = complete(d.gauges);
+  const gStep = stepSeconds[g.step];
+  const gauge = (k, f = (v) => v) => values(g, k).map((v) => (v == null || v < 0 ? null : f(v)));
+  const any = (ss) => ss.some((x) => x.values.some((v) => v != null));
+  const cSeries = [{ label: "Tracked", values: gauge("g:conntrack"), slot: 1 }];
+  const mSeries = [{ label: "Host in use", values: gauge("g:mem"), slot: 1 }, { label: "housecarld", values: gauge("g:rss"), slot: 2 }];
+  const lSeries = [{ label: "Load", values: gauge("g:load", (v) => v / 100), slot: 1 }, { label: "housecarld CPU %", values: gauge("g:cpu", (v) => v / 10), slot: 2 }];
+  const gutter = { left: 64, right: Math.max(endLabelWidth(cSeries), endLabelWidth(mSeries), endLabelWidth(lSeries)) };
+  const empty = h("div", { class: "empty" }, "No samples yet: they are taken once a minute.");
+  parts.push(h("h2", { class: "section" }, "Connections and the machine"));
+  parts.push(chartCard("Tracked connections", "average per " + stepName(g.step) + (l.conntrack_max ? "; the kernel allows " + compact(l.conntrack_max) + " (nf_conntrack_max), and drops new connections beyond" : ""),
+    any(cSeries) ? lineChart({ series: cSeries, times: g.times, step: gStep, area: true, gutter }) : empty, any(cSeries) ? timeTable(cSeries, g.times, gStep) : null, { wide: true }));
+  parts.push(chartCard("Memory", "average per " + stepName(g.step) + (l.rss ? " · housecarld now " + bytes(l.rss) : ""),
+    any(mSeries) ? lineChart({ series: mSeries, times: g.times, step: gStep, gutter, format: bytes }) : empty.cloneNode(true), any(mSeries) ? timeTable(mSeries, g.times, gStep, bytes) : null, { wide: true, legend: legend(mSeries) }));
+  parts.push(chartCard("Load", "the host's 1-minute load average, and housecarld's CPU (percent of one CPU)",
+    any(lSeries) ? lineChart({ series: lSeries, times: g.times, step: gStep, gutter, format: (v) => (Math.round(v * 100) / 100).toString() }) : empty.cloneNode(true),
+    any(lSeries) ? timeTable(lSeries, g.times, gStep, (v) => v.toFixed(2)) : null, { wide: true, legend: legend(lSeries) }));
+  el.classList.remove("refreshing");
+  mount(el, parts);
+  scheduleRefresh(el, params, query, gen);
+}
+
+async function loadAll(since, heatSince) {
+  const [summary, zones, traffic, drops, heat, hits, gauges, quotas] = await Promise.all([
+    get("/stats/summary", { since, limit: 10 }),
+    get("/zones"),
+    get("/stats/timeline", { since, keys: "zrx:*,ztx:*" }),
+    get("/stats/timeline", { since, keys: "drops" }),
+    get("/stats/heatmap", { since: heatSince }),
+    get("/stats/hits", { since: "30d" }),
+    get("/stats/timeline", { since, keys: "g:conntrack,g:conntrack_max,g:mem,g:rss,g:load,g:cpu" }),
+    get("/stats/timeline", { since, keys: "quota:*" }),
+  ]);
+  return { summary, zones, traffic, drops, heat, hits, gauges,
+    quotas: quotas.series.map((x) => ({ key: x.key.slice(6), count: x.values.reduce((a, v) => a + Math.max(v, 0), 0) })).filter((e) => e.count > 0).sort((a, b) => b.count - a.count) };
+}
+
+function scheduleRefresh(el, params, query, gen) {
+  setTimeout(() => {
+    const hh = location.hash;
+    if (gen !== generation || !(hh === "#/stats" || hh.startsWith("#/stats?")) || !el.isConnected) return;
+    el.classList.add("refreshing");
+    render(el, params, query).catch(() => el.classList.remove("refreshing"));
+  }, 60_000);
+}
+
+// complete drops the last bucket of a timeline if it hasn't ended yet:
+// drawn, it would look like a sudden fall.
+function complete(tl) {
+  const step = stepSeconds[tl.step];
+  const n = tl.times.length;
+  if (n > 1 && tl.times[n - 1] + step > Date.now() / 1000) {
+    return { ...tl, times: tl.times.slice(0, -1), series: tl.series.map((x) => ({ ...x, values: x.values.slice(0, -1) })) };
+  }
+  return tl;
+}
+
+function values(tl, key) {
+  return (tl.series.find((x) => x.key === key) || { values: tl.times.map(() => 0) }).values;
+}
+
+function rangeRow(since) {
+  return h("div", { class: "filter-row", role: "group", "aria-label": "Time range" },
+    h("span", { class: "muted" }, "Range"),
+    h("div", { class: "segmented" }, ranges.map(([k, label]) =>
+      h("a", { href: "#/stats?since=" + k, class: k === since ? "active" : "", "aria-current": k === since ? "true" : null, title: "last " + label }, k === "365d" ? "1y" : k))));
+}
+
+// ruleHref: a counter's mark to its page ("r12" → the rules, "b-…" → the
+// built-ins under Settings).
+function ruleHref(mark) {
+  if (/^r\d/.test(mark)) return "#/rules";
+  if (mark.startsWith("b-") || mark.startsWith("p-")) return "#/settings";
+  if (mark.startsWith("f")) return "#/nat";
+  return null;
+}
+
+function connHref(addr) {
+  return "#/connections?q=" + encodeURIComponent(addr.replace(/::\/64$/, ":"));
+}
+
+// bytes formats a size in binary units.
+export function bytes(n) {
+  const units = ["B", "KiB", "MiB", "GiB", "TiB"];
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return (i === 0 || n >= 100 ? Math.round(n) : n.toFixed(1).replace(/\.0$/, "")) + " " + units[i];
+}
+
+function tile(label, value, sub) {
+  return h("div", { class: "card stat" }, h("div", { class: "label" }, label), h("div", { class: "value big" }, value), h("div", { class: "sub" }, sub));
+}
+
+function listCard(title, subtitle, body) {
+  return h("section", { class: "panel" }, h("h2", null, title), subtitle ? h("div", { class: "muted small list-sub" }, subtitle) : null, body);
+}
+
+function stepName(step) {
+  return { "1m": "minute", "5m": "5 minutes", "15m": "15 minutes", "1h": "hour", "6h": "6 hours", "1d": "day" }[step] || step;
+}

internal/web/static/assets/pages/trace.js

@@ -4,8 +4,8 @@ import { h, mount, input, select, field, errorBox, badge } from "../ui.js";
 import { get, api, can } from "../api.js";
 import { onLeave } from "../app.js";
 
-export async function render(el) {
-  const address = input({ placeholder: "192.168.1.50, or 2001:db8:1::/64", class: "mono" });
+export async function render(el, params, query) {
+  const address = input({ placeholder: "192.168.1.50, or 2001:db8:1::/64", class: "mono", value: (query && query.get && query.get("address")) || "" });
   const port = input({ placeholder: "443", class: "short", type: "number", min: 1, max: 65535 });
   const protocol = select([["", "any"], "tcp", "udp", "sctp", "icmp", "icmpv6"], "", { class: "inline" });
   const seconds = input({ value: "60", class: "short", type: "number", min: 5, max: 600 });

internal/web/static/assets/style.css

@@ -430,3 +430,136 @@ td.matrix-blocked { background: var(--del); color: var(--del-text); }
 .matrix-n { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--warn); }
 td.matrix-none { color: var(--muted); }
 tr.matrix-rest td { border-top: 2px solid var(--border); }
+
+/* ---- Statistics charts. Colors from the validated reference palette
+   (categorical slots 1-3, sequential blue), checked against this UI's
+   panel surfaces in both themes. */
+:root {
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --chart-grid: #eceef2;
+  --chart-axis: #c9cfd8;
+  /* Sequential ramp, low to high (blue 100 -> 700). */
+  --heat-0: #cde2fb; --heat-1: #9ec5f4; --heat-2: #6da7ec; --heat-3: #3987e5;
+  --heat-4: #256abf; --heat-5: #184f95; --heat-6: #0d366b;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --series-1: #3987e5;
+    --series-2: #d95926;
+    --series-3: #199e70;
+    --chart-grid: #272c34;
+    --chart-axis: #3a414d;
+    /* In dark, low values recede into the surface: the ramp runs dark -> light. */
+    --heat-0: #0d366b; --heat-1: #184f95; --heat-2: #256abf; --heat-3: #3987e5;
+    --heat-4: #6da7ec; --heat-5: #9ec5f4; --heat-6: #cde2fb;
+  }
+}
+:root[data-theme="dark"] {
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --chart-grid: #272c34;
+  --chart-axis: #3a414d;
+  --heat-0: #0d366b; --heat-1: #184f95; --heat-2: #256abf; --heat-3: #3987e5;
+  --heat-4: #6da7ec; --heat-5: #9ec5f4; --heat-6: #cde2fb;
+}
+
+.refreshing { opacity: 0.6; transition: opacity 0.2s; }
+/* Secondary row actions show when the row is hovered or focused; touch
+   screens, which can't hover, always show them. Opacity keeps them in the
+   layout (no shifting) and reachable with Tab. */
+tr .reveal { opacity: 0; transition: opacity 0.1s; }
+tr:hover .reveal, tr:focus-within .reveal { opacity: 1; }
+@media (hover: none) { tr .reveal { opacity: 1; } }
+/* Blocking steps, in order, on the Blocking page. */
+.steps-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 10px; }
+.step-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--mono); font-size: 13px; background: var(--panel); }
+.step-chip.accent { border-color: var(--accent); }
+.step-tools { display: inline-flex; gap: 2px; margin-left: 2px; }
+.step-tools button { padding: 0 5px; min-width: 0; }
+h2.section { margin: 24px 0 10px; font-size: 18px; }
+.segmented button { border: none; border-right: 1px solid var(--border); border-radius: 0; background: transparent; padding: 4px 12px; color: var(--text); }
+.segmented button:last-child { border-right: none; }
+.segmented button:hover { background: var(--info-soft); }
+.segmented button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
+.card.stat .value.big { font-size: 26px; font-weight: 600; line-height: 1.2; }
+
+.chart-card { margin: 0 0 14px; }
+.chart-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
+.chart-head .grow { flex: 1; min-width: 200px; }
+.chart-head h2 { margin: 0; font-size: 16px; }
+/* Two or three columns; the last cards stretch to fill their row, so no
+   card is left alone beside an empty space. */
+.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
+.chart-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+@media (min-width: 1100px) {
+  .chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .chart-grid > :last-child:nth-child(odd) { grid-column: auto; }
+  .chart-grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
+  .chart-grid > :last-child:nth-child(3n+2) { grid-column: span 2; }
+}
+.chart-grid > .panel h2 { margin: 0; font-size: 16px; }
+.list-sub { margin: 2px 0 8px; }
+
+.chart { position: relative; outline: none; }
+.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
+.chart svg { display: block; overflow: visible; }
+.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
+.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
+.chart .tick, .chart .end-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.chart .end-label { fill: var(--text); }
+.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.chart .area { stroke: none; fill-opacity: 0.1; }
+.chart .dot { stroke: var(--panel); stroke-width: 2; }
+.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
+.chart .hit { fill: transparent; cursor: crosshair; }
+.chart .s1, .key.s1 { stroke: var(--series-1); }
+.chart .s2, .key.s2 { stroke: var(--series-2); }
+.chart .s3, .key.s3 { stroke: var(--series-3); }
+.chart .area.s1, .chart .dot.s1 { fill: var(--series-1); }
+.chart .area.s2, .chart .dot.s2 { fill: var(--series-2); }
+.chart .area.s3, .chart .dot.s3 { fill: var(--series-3); }
+.key.line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
+.key.line.s1 { border-color: var(--series-1); }
+.key.line.s2 { border-color: var(--series-2); }
+.key.line.s3 { border-color: var(--series-3); }
+.chart-legend { list-style: none; display: flex; gap: 14px; margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--text); flex-wrap: wrap; }
+
+.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); padding: 6px 10px; font-size: 13px; white-space: nowrap; }
+.chart-tip .tip-head { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
+.chart-tip .tip-row strong { font-variant-numeric: tabular-nums; }
+.chart-table .scroll, .chart-table .table-wrap { max-height: 360px; overflow: auto; }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+.heatmap-wrap { position: relative; }
+.heatmap { display: grid; grid-template-columns: 36px repeat(24, minmax(10px, 1fr)); gap: 2px; outline: none; }
+.heatmap:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+.hm-corner, .hm-col, .hm-row { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.hm-row { display: flex; align-items: center; }
+.hm-cell { height: 22px; border-radius: 3px; }
+.hm-cell:hover, .hm-cell:focus { outline: 2px solid var(--text); outline-offset: -1px; }
+.hm-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--chart-grid); }
+.heat-0 { background: var(--heat-0); } .heat-1 { background: var(--heat-1); } .heat-2 { background: var(--heat-2); }
+.heat-3 { background: var(--heat-3); } .heat-4 { background: var(--heat-4); } .heat-5 { background: var(--heat-5); }
+.heat-6 { background: var(--heat-6); }
+.hm-scale { display: flex; align-items: center; gap: 2px; margin-top: 10px; flex-wrap: wrap; }
+.hm-scale .muted { margin: 0 6px; }
+.hm-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
+
+.bar-list { list-style: none; margin: 0; padding: 0; }
+.bar-list li { padding: 4px 0; }
+.bar-text { display: flex; gap: 8px; justify-content: space-between; font-size: 13px; }
+.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; min-width: 0; }
+.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.bar-track { height: 6px; margin-top: 3px; }
+.bar-fill { height: 6px; background: var(--series-1); border-radius: 0 3px 3px 0; min-width: 2px; }
+@media (max-width: 700px) {
+  .heatmap { grid-template-columns: 30px repeat(24, minmax(6px, 1fr)); gap: 1px; }
+  .hm-cell { height: 16px; }
+  .chart-grid { grid-template-columns: 1fr; }
+}
+.plain-list { margin: 0; padding-left: 18px; }
+.plain-list li { padding: 2px 0; }