@osqd/bothandlerjs 0.3.0 → 0.4.0

package/dist/element/index.js

@@ -0,0 +1,4825 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/dashboard/client/css.ts
+function cssEscape(value) {
+  return typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : String(value).replace(/[^\w-]/g, "\\$&");
+}
+var init_css = __esm({
+  "src/dashboard/client/css.ts"() {
+    "use strict";
+  }
+});
+
+// src/dashboard/client/dom.ts
+var dom_exports = {};
+__export(dom_exports, {
+  $: () => $,
+  byId: () => byId,
+  clear: () => clear,
+  css: () => css,
+  cssEscape: () => cssEscape,
+  el: () => el,
+  eventTarget: () => eventTarget,
+  isEmbedded: () => isEmbedded,
+  label: () => label,
+  rootNode: () => rootNode,
+  setRoot: () => setRoot,
+  setThemeHost: () => setThemeHost,
+  svgEl: () => svgEl,
+  svgText: () => svgText,
+  themeElement: () => themeElement
+});
+function el(tag, className, value) {
+  const node = document.createElement(tag);
+  if (className !== void 0 && className !== null && className !== "") node.className = className;
+  if (value !== void 0 && value !== null) node.textContent = String(value);
+  return node;
+}
+function svgEl(name, attributes = {}) {
+  const node = document.createElementNS("http://www.w3.org/2000/svg", name);
+  for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, String(value));
+  return node;
+}
+function svgText(attributes, text) {
+  const node = svgEl("text", attributes);
+  node.textContent = String(text);
+  return node;
+}
+function clear(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+function setRoot(node, host) {
+  root = node;
+  embedded = node !== globalThis.document;
+  if (host !== void 0) themeHost = host;
+}
+function setThemeHost(host) {
+  themeHost = host;
+}
+function isEmbedded() {
+  return embedded;
+}
+function eventTarget() {
+  return embedded ? root : globalThis;
+}
+function rootNode() {
+  return root;
+}
+function themeElement() {
+  return themeHost;
+}
+function $(id) {
+  const node = root.querySelector(`#${cssEscape(id)}`);
+  if (node === null || node === void 0) throw new Error(`dashboard: no element #${id}`);
+  return node;
+}
+function byId(id) {
+  return $(id);
+}
+function css(name) {
+  return getComputedStyle(themeHost).getPropertyValue(name).trim();
+}
+function label(text, control) {
+  const node = document.createElement("label");
+  node.textContent = text;
+  const single = Array.isArray(control) ? control.length === 1 ? control[0] : void 0 : control;
+  if (single !== void 0 && /^(input|select|textarea)$/i.test(single.tagName)) {
+    if (single.id === "") single.id = `field-${++sequence}`;
+    node.htmlFor = single.id;
+  } else {
+    const group = Array.isArray(control) ? control : [control];
+    for (const node_ of group) if (!node_.hasAttribute("aria-label")) node_.setAttribute("aria-label", text);
+  }
+  return node;
+}
+var root, themeHost, embedded, sequence;
+var init_dom = __esm({
+  "src/dashboard/client/dom.ts"() {
+    "use strict";
+    init_css();
+    root = typeof document === "undefined" ? void 0 : document;
+    themeHost = typeof document === "undefined" ? void 0 : document.documentElement;
+    embedded = false;
+    sequence = 0;
+  }
+});
+
+// src/dashboard/client/boot.ts
+var raw, BOOT, API, SECTIONS;
+var init_boot = __esm({
+  "src/dashboard/client/boot.ts"() {
+    "use strict";
+    raw = globalThis.__BOOTSTRAP__;
+    BOOT = raw ?? {
+      base: "",
+      title: "bothandlerjs",
+      allowReset: false,
+      allowEdit: false,
+      allowGuardEdit: false,
+      allowActing: false,
+      peers: [],
+      sections: { feed: true, evidence: true, actors: true, registry: true, tester: true, statistics: true, audit: true, notices: true, changes: true, policy: true, guard: true, robots: true, ranges: true },
+      links: []
+    };
+    API = BOOT.base;
+    SECTIONS = BOOT.sections;
+  }
+});
+
+// src/dashboard/client/app.ts
+function toast(kind, title, detail = "") {
+  const node = el("div", `toast ${kind}`);
+  node.appendChild(el("b", null, title));
+  if (detail !== "") node.appendChild(el("span", null, detail));
+  const host = rootNode().querySelector("#toasts");
+  if (host === null) return;
+  host.appendChild(node);
+  setTimeout(() => node.remove(), 6e3);
+}
+function download(text, filename, type) {
+  const blob = new Blob([text], { type });
+  const url = URL.createObjectURL(blob);
+  const anchor = el("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function today() {
+  return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+var app;
+var init_app = __esm({
+  "src/dashboard/client/app.ts"() {
+    "use strict";
+    init_dom();
+    app = {
+      draw: () => {
+      },
+      drawNow: () => {
+      },
+      showTab: () => {
+      },
+      syncUrl: () => {
+      }
+    };
+  }
+});
+
+// src/dashboard/client/outcome.ts
+function outcome(entry) {
+  return actionKind(entry.action);
+}
+function actionKind(action) {
+  if (action === void 0) return "pending";
+  if (DENY.has(action)) return "deny";
+  if (MITIGATE.has(action)) return "mitigate";
+  return "allow";
+}
+function verdictBadge(entry) {
+  if (entry.verdict === "verified-bot" || entry.verdict === "confirmed-bot") return ["b-proven", entry.verdict];
+  if (entry.verdict === "suspected-bot") return ["b-suspected", "suspected-bot"];
+  if (entry.verdict === "human") return ["b-human", "human"];
+  return ["b-unknown", entry.bypass !== void 0 ? `skipped \xB7 ${entry.bypass}` : "unknown"];
+}
+function provenBots(verdicts) {
+  return (verdicts["confirmed-bot"] ?? 0) + (verdicts["verified-bot"] ?? 0);
+}
+var DENY, MITIGATE;
+var init_outcome = __esm({
+  "src/dashboard/client/outcome.ts"() {
+    "use strict";
+    DENY = /* @__PURE__ */ new Set(["block", "drop", "redirect"]);
+    MITIGATE = /* @__PURE__ */ new Set(["challenge", "rate-limit", "delay"]);
+  }
+});
+
+// src/dashboard/client/query.ts
+function tokenize(input) {
+  const tokens = [];
+  let current = "";
+  let quoted = false;
+  for (const character of input) {
+    if (character === '"') {
+      quoted = !quoted;
+      continue;
+    }
+    if (!quoted && /\s/.test(character)) {
+      if (current !== "") tokens.push(current);
+      current = "";
+      continue;
+    }
+    current += character;
+  }
+  if (current !== "") tokens.push(current);
+  return tokens;
+}
+function parseQuery(input) {
+  const terms = [];
+  for (const token of tokenize(input.trim())) {
+    const negated = token.startsWith("-") || token.startsWith("!");
+    const body = negated ? token.slice(1) : token;
+    if (body === "") continue;
+    const colon = body.indexOf(":");
+    const name = colon === -1 ? "" : body.slice(0, colon).toLowerCase();
+    const field2 = FIELDS[name];
+    if (colon === -1 || field2 === void 0) {
+      terms.push({ field: void 0, value: body.toLowerCase(), negated });
+      continue;
+    }
+    let value = body.slice(colon + 1).toLowerCase();
+    let compare;
+    if (NUMERIC.has(field2)) {
+      compare = value.startsWith(">") ? ">" : value.startsWith("<") ? "<" : "=";
+      if (compare !== "=") value = value.slice(1);
+    }
+    if (value === "") continue;
+    terms.push({ field: field2, value, negated, compare });
+  }
+  return terms;
+}
+function searchableText(entry) {
+  const parts = [
+    entry.method,
+    entry.path,
+    entry.actor,
+    entry.userAgent,
+    entry.verdict,
+    entry.botClass,
+    entry.identity ?? "",
+    entry.action ?? "",
+    entry.rule ?? "",
+    entry.requestId
+  ];
+  for (const item of entry.evidence) parts.push(item.detector, item.summary);
+  return parts.join(" ").toLowerCase();
+}
+function fieldValue(entry, field2) {
+  switch (field2) {
+    case "path":
+      return entry.path;
+    case "actor":
+      return entry.actor;
+    case "userAgent":
+      return entry.userAgent;
+    case "verdict":
+      return entry.verdict;
+    case "action":
+      return entry.action ?? "";
+    case "rule":
+      return entry.rule ?? "";
+    case "identity":
+      return entry.identity ?? "";
+    case "method":
+      return entry.method;
+    case "botClass":
+      return entry.botClass;
+    case "requestId":
+      return entry.requestId;
+    case "bypass":
+      return entry.bypass ?? "";
+    case "outcome":
+      return outcome(entry);
+    case "certain":
+      return String(entry.certain);
+    case "detector":
+      return entry.evidence.map((item) => item.detector).join(" ");
+    default:
+      return "";
+  }
+}
+function matchesTerm(term, entry, haystack) {
+  if (term.field === void 0) return haystack.includes(term.value);
+  if (term.field === "score") {
+    const wanted = Number(term.value);
+    if (Number.isNaN(wanted)) return false;
+    if (term.compare === ">") return entry.score > wanted;
+    if (term.compare === "<") return entry.score < wanted;
+    return entry.score === wanted;
+  }
+  return fieldValue(entry, term.field).toLowerCase().includes(term.value);
+}
+function matchesQuery(terms, entry, haystack) {
+  for (const term of terms) {
+    if (matchesTerm(term, entry, haystack) === term.negated) return false;
+  }
+  return true;
+}
+function matchesFilter(filter, entry) {
+  switch (filter) {
+    case "proven":
+      return entry.certain;
+    case "suspected":
+      return entry.verdict === "suspected-bot";
+    case "human":
+      return entry.verdict === "human";
+    case "guard":
+      return entry.downgradedFrom !== void 0;
+    case "deny":
+      return outcome(entry) === "deny";
+    case "mitigate":
+      return outcome(entry) === "mitigate";
+    case "allow":
+      return outcome(entry) === "allow";
+    default:
+      return true;
+  }
+}
+var FIELDS, NUMERIC;
+var init_query = __esm({
+  "src/dashboard/client/query.ts"() {
+    "use strict";
+    init_outcome();
+    FIELDS = {
+      path: "path",
+      url: "path",
+      actor: "actor",
+      ip: "actor",
+      ua: "userAgent",
+      useragent: "userAgent",
+      agent: "userAgent",
+      verdict: "verdict",
+      action: "action",
+      rule: "rule",
+      detector: "detector",
+      identity: "identity",
+      method: "method",
+      class: "botClass",
+      botclass: "botClass",
+      id: "requestId",
+      request: "requestId",
+      bypass: "bypass",
+      score: "score",
+      outcome: "outcome",
+      certain: "certain"
+    };
+    NUMERIC = /* @__PURE__ */ new Set(["score"]);
+  }
+});
+
+// src/dashboard/client/store.ts
+function ingest(entry) {
+  const existing = state.byId.get(entry.requestId);
+  if (existing !== void 0) {
+    existing.entry = entry;
+    existing.rev++;
+    existing.text = void 0;
+    return;
+  }
+  const row = { entry, rev: 0 };
+  state.byId.set(entry.requestId, row);
+  state.rows.push(row);
+  if (state.rows.length > MAX_ROWS) {
+    for (const dropped of state.rows.splice(0, state.rows.length - MAX_ROWS)) {
+      state.byId.delete(dropped.entry.requestId);
+      state.open.delete(dropped.entry.requestId);
+    }
+  }
+}
+function clearFeed() {
+  state.rows = [];
+  state.byId = /* @__PURE__ */ new Map();
+  state.open.clear();
+  state.actor = void 0;
+  state.bufferedWhilePaused = 0;
+  state.laggedDrops = 0;
+}
+function setSearch(value) {
+  state.search = value;
+  state.terms = parseQuery(value);
+}
+function textOf(row) {
+  if (row.text === void 0) row.text = searchableText(row.entry);
+  return row.text;
+}
+function matches(row) {
+  return matchesFilter(state.filter, row.entry) && matchesQuery(state.terms, row.entry, textOf(row));
+}
+function visibleRows(limit = FEED_LIMIT) {
+  const shown = [];
+  for (let i = state.rows.length - 1; i >= 0 && shown.length < limit; i--) {
+    const row = state.rows[i];
+    if (row !== void 0 && matches(row)) shown.push(row);
+  }
+  return shown;
+}
+function matchingCount() {
+  let count = 0;
+  for (const row of state.rows) if (matches(row)) count++;
+  return count;
+}
+function oldestAt() {
+  return state.rows[0]?.entry.at;
+}
+function bump(counter, key) {
+  counter.set(key, (counter.get(key) ?? 0) + 1);
+}
+function aggregate(rows) {
+  const totals = {
+    detectors: /* @__PURE__ */ new Map(),
+    actors: /* @__PURE__ */ new Map(),
+    identities: /* @__PURE__ */ new Map(),
+    paths: /* @__PURE__ */ new Map(),
+    deniedPaths: /* @__PURE__ */ new Map(),
+    guardStops: /* @__PURE__ */ new Map(),
+    ruleHits: /* @__PURE__ */ new Map(),
+    bypassed: /* @__PURE__ */ new Map()
+  };
+  for (const { entry } of rows) {
+    for (const item of entry.evidence) bump(totals.detectors, item.detector);
+    bump(totals.actors, entry.actor);
+    if (entry.bypass !== void 0) {
+      bump(totals.bypassed, `${entry.path}  (${entry.bypass})`);
+      continue;
+    }
+    bump(totals.paths, entry.path);
+    if (entry.identity !== void 0 && entry.identity !== "") {
+      bump(totals.identities, `${entry.identity} \xB7 ${entry.verdict === "verified-bot" ? "verified" : "claimed"}`);
+    }
+    if (outcome(entry) === "deny") bump(totals.deniedPaths, entry.path);
+    if (entry.downgradedFrom !== void 0 && entry.rule !== void 0) bump(totals.guardStops, `${entry.rule} \u2192 ${entry.downgradedFrom}`);
+    if (entry.rule !== void 0) bump(totals.ruleHits, entry.rule);
+  }
+  return totals;
+}
+var MAX_ROWS, FEED_LIMIT, state;
+var init_store = __esm({
+  "src/dashboard/client/store.ts"() {
+    "use strict";
+    init_query();
+    init_outcome();
+    MAX_ROWS = 1e3;
+    FEED_LIMIT = 300;
+    state = {
+      rows: [],
+      byId: /* @__PURE__ */ new Map(),
+      snapshot: void 0,
+      policy: void 0,
+      actors: [],
+      actorsTracked: 0,
+      paused: false,
+      filter: "all",
+      search: "",
+      terms: [],
+      tab: "live",
+      open: /* @__PURE__ */ new Set(),
+      actor: void 0,
+      rangeMs: 3e5,
+      scoreScope: "run",
+      editorRules: [],
+      editorDirty: false,
+      editorMode: "gui",
+      guardDirty: false,
+      bufferedWhilePaused: 0,
+      laggedDrops: 0
+    };
+  }
+});
+
+// src/dashboard/client/api.ts
+async function getJson(path) {
+  const response = await fetch(API + path);
+  if (!response.ok) throw new Error(await errorFrom(response));
+  return await response.json();
+}
+async function postJson(path, body) {
+  const response = await fetch(API + path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  const data = await response.json().catch(() => ({}));
+  return response.ok ? { ok: true, data } : { ok: false, data, error: String(data.error ?? "The server refused this.") };
+}
+async function errorFrom(response) {
+  const body = await response.json().catch(() => ({}));
+  return body.error ?? `${response.status} ${response.statusText}`;
+}
+var init_api = __esm({
+  "src/dashboard/client/api.ts"() {
+    "use strict";
+    init_boot();
+  }
+});
+
+// src/dashboard/client/format.ts
+function n(value) {
+  return numbers.format(value ?? 0);
+}
+function pct(part, whole) {
+  return whole > 0 ? `${Math.round(part / whole * 100)}%` : "\u2014";
+}
+function ms(value) {
+  return value >= 10 ? `${value.toFixed(1)}ms` : `${value.toFixed(2)}ms`;
+}
+function uptime(milliseconds) {
+  const seconds = Math.max(0, Math.round(milliseconds / 1e3));
+  if (seconds < 90) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 90) return `${minutes}m`;
+  return `${Math.round(minutes / 60)}h`;
+}
+function rangeLabel(milliseconds) {
+  const seconds = Math.round(milliseconds / 1e3);
+  if (seconds < 90) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  return minutes < 90 ? `${minutes} min` : `${Math.round(minutes / 60)}h`;
+}
+function clockTime(at) {
+  return new Date(at).toLocaleTimeString();
+}
+function windowLabel(count, oldestAt2, now) {
+  if (count === 0) return "this window \xB7 empty";
+  const span = oldestAt2 === void 0 ? 0 : Math.max(0, now - oldestAt2);
+  return `last ${n(count)} requests \xB7 ${rangeLabel(span)}`;
+}
+var numbers;
+var init_format = __esm({
+  "src/dashboard/client/format.ts"() {
+    "use strict";
+    numbers = new Intl.NumberFormat();
+  }
+});
+
+// src/dashboard/client/replay.ts
+function replayLine(entry) {
+  const headers = {};
+  for (const [name, value] of entry.headers ?? []) headers[name] = value;
+  const query = Object.keys(entry.query).map((name) => `${encodeURIComponent(name)}=${encodeURIComponent(entry.query[name] ?? "")}`).join("&");
+  return JSON.stringify({
+    method: entry.method,
+    url: entry.path + (query === "" ? "" : `?${query}`),
+    headers,
+    ip: entry.actor,
+    timestamp: new Date(entry.at).toISOString(),
+    protocol: entry.protocol ?? "https",
+    httpVersion: entry.httpVersion ?? "1.1"
+  });
+}
+function replayFile(entries) {
+  return entries.map(replayLine).join("\n");
+}
+function corpusCase(entry) {
+  const headers = (entry.headers ?? []).map((pair) => `        [${JSON.stringify(pair[0])}, ${JSON.stringify(pair[1])}]`).join(",\n");
+  return [
+    "bot({",
+    `  id: ${JSON.stringify(`case-${entry.requestId.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`)},`,
+    `  title: ${JSON.stringify(`${entry.method} ${entry.path} from ${entry.userAgent.slice(0, 60)}`)},`,
+    '  audience: "unwanted-bot",   // human | benign-bot | declared-bot | unwanted-bot | hostile | infrastructure',
+    '  category: "observed",',
+    `  provenance: "Captured from the live dashboard on ${new Date(entry.at).toISOString().slice(0, 10)}",`,
+    "  requests: [",
+    "    {",
+    "      headers: [",
+    headers,
+    "      ],",
+    `      protocol: ${JSON.stringify(entry.protocol ?? "https")},`,
+    `      httpVersion: ${JSON.stringify(entry.httpVersion ?? "1.1")},`,
+    `      path: ${JSON.stringify(entry.path)},`,
+    "    },",
+    "  ],",
+    `  expect: { verdict: ${JSON.stringify(entry.verdict)}, certain: ${String(entry.certain)} },`,
+    "}),"
+  ].join("\n");
+}
+var init_replay = __esm({
+  "src/dashboard/client/replay.ts"() {
+    "use strict";
+  }
+});
+
+// src/dashboard/client/actions.ts
+function isConfirming() {
+  return armed > 0;
+}
+function actorActions(key, after) {
+  if (!BOOT.allowActing) return [];
+  const forget = el("button", null, "Forget");
+  forget.title = "Discard this actor's history \u2014 the cure for a false positive that has stuck";
+  forget.addEventListener("click", () => {
+    void act({ key, action: "forget" }, `Forgot ${key}`, "Its next request is assessed as a first request.", after);
+  });
+  const clear2 = el("button", null, "Clear as human");
+  clear2.title = "Grant this actor human clearance for an hour, as though it had solved a challenge";
+  clear2.addEventListener("click", () => {
+    void act({ key, action: "clear", forMs: 60 * 6e4 }, `Cleared ${key}`, "Held as human for an hour, then reassessed.", after);
+  });
+  return [confirmingButton("Allowlist", `Allowlist ${key} \u2014 it stops being assessed at all`, () => allowlist(key, after)), forget, clear2];
+}
+function confirmingButton(label2, confirmation, run2) {
+  const button = el("button", "danger", label2);
+  let pending2 = false;
+  let timer2;
+  const disarm = () => {
+    if (!pending2) return;
+    pending2 = false;
+    armed--;
+    button.textContent = label2;
+    button.className = "danger";
+  };
+  button.addEventListener("click", () => {
+    if (pending2) {
+      if (timer2 !== void 0) clearTimeout(timer2);
+      disarm();
+      run2();
+      return;
+    }
+    pending2 = true;
+    armed++;
+    button.textContent = confirmation;
+    button.className = "danger primary";
+    timer2 = setTimeout(disarm, 5e3);
+  });
+  return button;
+}
+async function allowlist(key, after) {
+  const result = await postJson("/api/ranges", { name: "allowlist", add: [key] });
+  if (!result.ok) {
+    toast("bad", "Not allowlisted", result.error ?? "");
+    return;
+  }
+  toast("warn", `Allowlisted ${key}`, "Requests from it are no longer assessed at all.");
+  after();
+}
+async function act(body, title, detail, after) {
+  const result = await postJson("/api/actor", body);
+  if (!result.ok) {
+    toast("bad", "Refused", result.error ?? "");
+    return;
+  }
+  toast("ok", title, detail);
+  after();
+}
+var armed;
+var init_actions = __esm({
+  "src/dashboard/client/actions.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_api();
+    init_app();
+    armed = 0;
+  }
+});
+
+// src/dashboard/client/bars.ts
+function drawBars(target, rows, emptyText) {
+  clear(target);
+  const filtered = [...rows].filter(([, value]) => value > 0);
+  if (filtered.length === 0) {
+    target.appendChild(el("div", "note", emptyText));
+    return;
+  }
+  filtered.sort((a, b) => b[1] - a[1]);
+  const max = filtered[0]?.[1] ?? 1;
+  for (const [label2, value] of filtered.slice(0, 14)) {
+    const bar = el("div", "bar");
+    const track = el("div", "track");
+    const fill = el("div", "fill");
+    fill.style.width = `${Math.max(2, Math.round(value / max * 100))}%`;
+    track.appendChild(fill);
+    track.appendChild(el("div", "lbl", label2));
+    bar.appendChild(track);
+    bar.appendChild(el("div", "v tnum", n(value)));
+    target.appendChild(bar);
+  }
+}
+function pairs(record) {
+  return Object.entries(record ?? {});
+}
+var init_bars = __esm({
+  "src/dashboard/client/bars.ts"() {
+    "use strict";
+    init_dom();
+    init_format();
+  }
+});
+
+// src/dashboard/client/actor.ts
+function initActor() {
+  if (!SECTIONS.actors) return;
+  $("actor-close").addEventListener("click", closeActor);
+}
+function openActor(key) {
+  state.actor = key;
+  app.drawNow();
+  $("actor-panel").scrollIntoView({ block: "nearest" });
+}
+function closeActor() {
+  state.actor = void 0;
+  app.drawNow();
+}
+function drawActor() {
+  if (!SECTIONS.actors) return;
+  const panel = $("actor-panel");
+  if (state.actor === void 0) {
+    panel.hidden = true;
+    return;
+  }
+  panel.hidden = false;
+  $("actor-key").textContent = state.actor;
+  const mine = state.rows.filter((row) => row.entry.actor === state.actor).map((row) => row.entry);
+  const latest = mine[mine.length - 1];
+  const stats = latest?.actorStats;
+  const gaps = [];
+  for (let i = 1; i < mine.length; i++) gaps.push(mine[i].at - mine[i - 1].at);
+  const meanGap = gaps.length > 0 ? gaps.reduce((a, b) => a + b, 0) / gaps.length : 0;
+  const box = $("actor-stats");
+  clear(box);
+  const rows = [
+    ["In this window", `${n(mine.length)} requests`],
+    ["Engine sees", stats !== void 0 ? `${n(stats.requests)} requests, ${n(stats.distinctPaths)} distinct paths` : "\u2014"],
+    ["Prior confirmations", stats !== void 0 ? n(stats.priorConfirmations) : "\u2014"],
+    ["Holds clearance", stats !== void 0 ? stats.cleared ? "yes" : "no" : "\u2014"],
+    ["First seen", stats !== void 0 ? clockTime(stats.firstSeen) : "\u2014"],
+    ["Mean gap", gaps.length > 0 ? `${Math.round(meanGap)}ms over ${n(gaps.length)} gaps` : "one request only"]
+  ];
+  for (const [key, value] of rows) {
+    box.appendChild(el("dt", null, key));
+    box.appendChild(el("dd", null, value));
+  }
+  const verdicts = /* @__PURE__ */ new Map();
+  const actions = /* @__PURE__ */ new Map();
+  for (const entry of mine) {
+    verdicts.set(entry.verdict, (verdicts.get(entry.verdict) ?? 0) + 1);
+    if (entry.action !== void 0) actions.set(entry.action, (actions.get(entry.action) ?? 0) + 1);
+  }
+  drawBars($("actor-mix"), [...verdicts, ...actions], "Nothing yet.");
+  const bar = $("actor-actions");
+  clear(bar);
+  const buttons = actorActions(state.actor, () => app.drawNow());
+  bar.hidden = buttons.length === 0;
+  for (const button of buttons) bar.appendChild(button);
+}
+var init_actor = __esm({
+  "src/dashboard/client/actor.ts"() {
+    "use strict";
+    init_dom();
+    init_actions();
+    init_boot();
+    init_app();
+    init_format();
+    init_bars();
+    init_store();
+  }
+});
+
+// src/dashboard/client/result.ts
+function showResult(kind, build) {
+  const box = $("policy-result");
+  box.hidden = false;
+  box.className = `result ${kind}`;
+  clear(box);
+  build(box);
+}
+function renderPreview(preview, notes = []) {
+  showResult(preview.newDenials > 0 ? "warn" : "ok", (box) => {
+    const head = el("div");
+    head.appendChild(el("b", null, `${n(preview.changed)} of ${n(preview.evaluated)} requests would be treated differently.`));
+    box.appendChild(head);
+    for (const note of notes) box.appendChild(el("div", "ev-meta", note));
+    if (preview.newDenials > 0) {
+      box.appendChild(el("div", null, `${n(preview.newDenials)} request(s) that are served today would be denied. Read the samples before applying this.`));
+    }
+    for (const warning of preview.warnings) box.appendChild(el("div", "ev-meta", warning));
+    const dead = preview.ruleHits.filter((row) => row.hits === 0 && row.rule !== "default");
+    if (dead.length > 0) box.appendChild(el("div", "ev-meta", `Never matched in this window: ${dead.map((row) => row.rule).join(", ")}`));
+    if (preview.samples.length > 0) {
+      const table = el("table", "diff");
+      const head2 = el("tr");
+      for (const label2 of ["Request", "Now", "Would be"]) head2.appendChild(el("th", null, label2));
+      table.appendChild(head2);
+      for (const sample of preview.samples) {
+        const row = el("tr");
+        const what = el("td");
+        what.appendChild(el("div", "mono", sample.path));
+        what.appendChild(el("div", "ev-meta", `${sample.verdict} \xB7 ${sample.userAgent.slice(0, 48)}`));
+        row.appendChild(what);
+        const from = el("td", "from");
+        from.appendChild(el("div", null, sample.from));
+        from.appendChild(el("div", "ev-meta", sample.fromRule));
+        row.appendChild(from);
+        const kind = sample.to === "block" || sample.to === "drop" || sample.to === "redirect" ? "deny" : sample.to === "allow" ? "allow" : "";
+        const to = el("td", `to ${kind}`);
+        to.appendChild(el("div", null, sample.to));
+        to.appendChild(el("div", "ev-meta", sample.toRule));
+        row.appendChild(to);
+        table.appendChild(row);
+      }
+      box.appendChild(table);
+    } else if (preview.evaluated === 0) {
+      box.appendChild(el("div", "ev-meta", "No traffic in the window to preview against \u2014 send some requests first."));
+    }
+  });
+}
+var init_result = __esm({
+  "src/dashboard/client/result.ts"() {
+    "use strict";
+    init_dom();
+    init_format();
+  }
+});
+
+// src/dashboard/client/guard.ts
+function drawGuard() {
+  if (!SECTIONS.guard) return;
+  const document_ = state.policy;
+  const snapshot = state.snapshot;
+  if (snapshot === void 0) return;
+  const editable = document_?.guardEditable === true;
+  const panel = $("stat-policy");
+  clear(panel);
+  if (!editable || document_ === void 0) {
+    const rows = [
+      ["False-positive policy", snapshot.policy.falsePositivePolicy],
+      ["Fallback when the guard stops a rule", snapshot.policy.fallbackAction],
+      ["Terminal score threshold", String(snapshot.policy.terminalScoreThreshold)],
+      ["Suspect threshold", String(snapshot.policy.suspectThreshold)],
+      ["Action when no rule matches", snapshot.policy.defaultAction],
+      ["Challenge configured", snapshot.policy.challengeEnabled ? "yes" : "no"],
+      ["Range sets", snapshot.ranges.length === 0 ? "none" : snapshot.ranges.map((range) => `${range.name} (${range.size})`).join(", ")]
+    ];
+    for (const [key, value] of rows) {
+      const line = el("div", "stat-row");
+      line.appendChild(el("span", "k", key));
+      line.appendChild(el("span", "v", value));
+      panel.appendChild(line);
+    }
+    $("guard-mode").textContent = "not editable here";
+    $("guard-note").textContent = "These are fixed at construction on this dashboard. It can change which rules exist; it cannot change how far a rule is allowed to go, because relaxing that is the one edit that can start denying people. Enable it deliberately with controls: { editGuard: true }.";
+    return;
+  }
+  if (draft === void 0) draft = { ...document_.guard };
+  const vocabulary = document_.vocabulary;
+  $("guard-mode").textContent = state.guardDirty ? "unsaved changes" : "editable";
+  $("guard-note").textContent = "Changing these changes what every rule is allowed to do, on the next request. Preview it against the traffic in the window first \u2014 that is the only view you get of who it would start turning away.";
+  panel.appendChild(
+    guardField(
+      // "Mode" rather than "Guard": the panel is already called that, and a field
+      // repeating its own panel's name reads as a heading rather than as a control.
+      "Mode",
+      segmented(
+        vocabulary.falsePositivePolicies.map((mode) => [mode, mode]),
+        draft.falsePositivePolicy,
+        (value) => {
+          setDraft({ falsePositivePolicy: value });
+          drawGuard();
+        }
+      )
+    )
+  );
+  panel.appendChild(el("div", "note guard-explains", MODE_NOTES[draft.falsePositivePolicy] ?? ""));
+  panel.appendChild(
+    guardField(
+      "Fallback",
+      select(vocabulary.fallbackActions, draft.fallbackAction, (value) => setDraft({ fallbackAction: value })),
+      "what a stopped rule becomes \u2014 the terminal actions are absent because a terminal fallback would deny the request the guard just protected"
+    )
+  );
+  panel.appendChild(
+    guardField(
+      "Default action",
+      select(vocabulary.actions, draft.defaultAction, (value) => setDraft({ defaultAction: value })),
+      "when no rule matches"
+    )
+  );
+  panel.appendChild(
+    guardField(
+      "Terminal score",
+      number(draft.terminalScoreThreshold, (value) => setDraft({ terminalScoreThreshold: value })),
+      "balanced mode only: the score a probabilistic verdict must clear"
+    )
+  );
+  panel.appendChild(
+    guardField(
+      "Suspect at",
+      number(draft.suspectThreshold, (value) => setDraft({ suspectThreshold: value })),
+      "the score at which a request becomes suspected-bot"
+    )
+  );
+  const bar = el("div", "bar-actions");
+  const preview = el("button", null, "Preview");
+  preview.addEventListener("click", () => {
+    void previewGuard();
+  });
+  const apply = el("button", "primary", "Apply");
+  apply.addEventListener("click", () => {
+    void applyGuard();
+  });
+  const revert = el("button", null, "Revert");
+  revert.addEventListener("click", () => {
+    draft = { ...document_.guard };
+    state.guardDirty = false;
+    drawGuard();
+  });
+  bar.appendChild(preview);
+  bar.appendChild(apply);
+  bar.appendChild(revert);
+  panel.appendChild(bar);
+}
+function setDraft(change) {
+  if (draft === void 0) return;
+  draft = { ...draft, ...change };
+  state.guardDirty = true;
+  $("guard-mode").textContent = "unsaved changes";
+}
+function resetGuardDraft() {
+  draft = void 0;
+  state.guardDirty = false;
+}
+function liveRules() {
+  return (state.policy?.rules ?? []).filter((row) => row.editable && row.rule !== void 0).map((row) => row.rule);
+}
+async function previewGuard() {
+  if (draft === void 0) return;
+  const result = await postJson("/api/policy/preview", { rules: liveRules(), guard: draft });
+  if (!result.ok) {
+    showResult("bad", (box) => box.appendChild(el("div", null, result.error ?? "")));
+    toast("bad", "Refused", result.error ?? "");
+    return;
+  }
+  renderPreview(result.data, state.editorDirty ? ["Previewed against the rules currently in force, not the unsaved edits in the editor."] : []);
+  app.showTab("policy");
+}
+async function applyGuard() {
+  if (draft === void 0) return;
+  const result = await postJson("/api/guard", draft);
+  if (!result.ok) {
+    showResult("bad", (box) => box.appendChild(el("div", null, result.error ?? "")));
+    toast("bad", "Guard unchanged", result.error ?? "");
+    return;
+  }
+  state.guardDirty = false;
+  draft = { ...result.data.guard };
+  if (state.policy !== void 0) state.policy.guard = { ...result.data.guard };
+  toast("ok", "Guard changed", `${result.data.guard.falsePositivePolicy}, falling back to ${result.data.guard.fallbackAction}.`);
+  showResult("warn", (box) => {
+    box.appendChild(el("div", null, "The guard changed. It applies from the next request, and it is in the notices panel and in your logs."));
+    if (result.data.guard.falsePositivePolicy !== "strict") {
+      box.appendChild(
+        el(
+          "div",
+          "ev-meta",
+          "Requests can now be denied without proof. The guard-stop count is the series to watch: every stop that no longer happens is a request that used to be recoverable and is not any more."
+        )
+      );
+    }
+  });
+  app.draw();
+}
+function guardField(name, control, hint) {
+  const row = el("div", "field");
+  row.appendChild(label(name, control));
+  const right = el("div", "field-row");
+  right.appendChild(control);
+  if (hint !== void 0) right.appendChild(el("span", "hint", hint));
+  row.appendChild(right);
+  return row;
+}
+function segmented(options, value, onChange) {
+  const box = el("div", "seg");
+  for (const [label2, option] of options) {
+    const button = el("button", null, label2);
+    button.type = "button";
+    button.setAttribute("aria-pressed", String(option === value));
+    button.addEventListener("click", () => onChange(option));
+    box.appendChild(button);
+  }
+  return box;
+}
+function select(options, value, onChange) {
+  const node = el("select");
+  for (const option of options) {
+    const item = el("option", null, option);
+    item.value = option;
+    if (option === value) item.selected = true;
+    node.appendChild(item);
+  }
+  node.addEventListener("change", () => onChange(node.value));
+  return node;
+}
+function number(value, onChange) {
+  const input = el("input");
+  input.type = "number";
+  input.min = "1";
+  input.max = "100";
+  input.value = String(value);
+  input.addEventListener("input", () => {
+    if (input.value !== "") onChange(Number(input.value));
+  });
+  return input;
+}
+var draft, MODE_NOTES;
+var init_guard = __esm({
+  "src/dashboard/client/guard.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_app();
+    init_api();
+    init_result();
+    init_store();
+    MODE_NOTES = {
+      strict: "A terminal action survives only on proven evidence. Nothing is ever denied on a guess. This is the default, and it is the claim this library makes about itself.",
+      balanced: "A terminal action also survives on a probabilistic verdict that clears the score threshold with at least two independent strong signals. Real people do trip two signals \u2014 a hardened browser behind a corporate proxy is the usual pair \u2014 so this setting will eventually deny somebody who should have been served.",
+      aggressive: "The guard is off. Every rule does exactly what it says, on proof or on suspicion alike, and the people it turns away first are the ones with the most unusual and most legitimate setups."
+    };
+  }
+});
+
+// src/dashboard/client/ranges.ts
+async function loadRanges() {
+  if (!SECTIONS.ranges) return;
+  try {
+    const body = await getJson("/api/ranges");
+    sets = body.ranges;
+    drawRanges();
+  } catch {
+  }
+}
+function drawRanges() {
+  if (!SECTIONS.ranges) return;
+  const body = $("ranges-body");
+  clear(body);
+  $("ranges-mode").textContent = BOOT.allowActing ? "editable" : "read-only";
+  $("ranges-note").textContent = BOOT.allowActing ? "An address on the allowlist is not judged leniently \u2014 it is not judged at all. Detection does not run on it, no evidence is produced, and no rule sees it." : "These come from the code that constructed the handler. Enable controls.editRanges to add an address from here.";
+  if (sets.length === 0) {
+    body.appendChild(el("div", "note", "No range sets are configured. Add an address to the allowlist and one appears."));
+  }
+  for (const set of sets) {
+    const block = el("div", "rangeset");
+    const heading = el("h3");
+    heading.appendChild(document.createTextNode(set.name));
+    heading.appendChild(el("span", null, `${n(set.size)} entr${set.size === 1 ? "y" : "ies"}`));
+    block.appendChild(heading);
+    const list = el("div", "cidrs");
+    for (const entry of set.entries) {
+      const chip = el("span", BOOT.allowActing ? "cidr" : "cidr readonly");
+      chip.appendChild(document.createTextNode(entry));
+      if (BOOT.allowActing) {
+        const remove = el("button", null, "\xD7");
+        remove.title = `Remove ${entry} from ${set.name}`;
+        remove.setAttribute("aria-label", `Remove ${entry} from ${set.name}`);
+        remove.addEventListener("click", () => void update(set.name, { remove: [entry] }));
+        chip.appendChild(remove);
+      }
+      list.appendChild(chip);
+    }
+    if (set.entries.length === 0) list.appendChild(el("span", "hint", "empty"));
+    block.appendChild(list);
+    body.appendChild(block);
+  }
+  if (!BOOT.allowActing) return;
+  const form = el("div", "rangeset");
+  const row = el("div", "field-row");
+  const name = el("input", "mono-input");
+  name.type = "text";
+  name.value = "allowlist";
+  name.setAttribute("aria-label", "Range set");
+  name.style.maxWidth = "150px";
+  const value = el("input", "mono-input");
+  value.type = "text";
+  value.placeholder = "203.0.113.0/24";
+  value.setAttribute("aria-label", "Address or CIDR to add");
+  const add = el("button", null, "Add");
+  const submit = () => {
+    const entry = value.value.trim();
+    if (entry === "") return;
+    value.value = "";
+    void update(name.value.trim(), { add: [entry] });
+  };
+  add.addEventListener("click", submit);
+  value.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") submit();
+  });
+  row.appendChild(name);
+  row.appendChild(value);
+  row.appendChild(add);
+  form.appendChild(row);
+  body.appendChild(form);
+}
+async function update(name, change) {
+  const result = await postJson("/api/ranges", { name, ...change });
+  if (!result.ok) {
+    toast("bad", "Ranges unchanged", result.error ?? "");
+    return;
+  }
+  toast(name === "allowlist" && change.add !== void 0 ? "warn" : "ok", `\u201C${name}\u201D updated`, `${n(result.data.entries?.length ?? 0)} entr${result.data.entries?.length === 1 ? "y" : "ies"} now.`);
+  await loadRanges();
+}
+var sets;
+var init_ranges = __esm({
+  "src/dashboard/client/ranges.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_api();
+    init_format();
+    init_app();
+    sets = [];
+  }
+});
+
+// src/dashboard/client/draft.ts
+function draftRule(entry, existingIds = []) {
+  const match = {};
+  let because;
+  let stem;
+  const proven = entry.evidence.filter((item) => item.certainty === "certain" && item.direction !== "human");
+  const detectors = [...new Set((proven.length > 0 ? proven : entry.evidence.filter((item) => item.direction !== "human")).map((item) => item.detector))];
+  if (entry.identity !== void 0 && entry.identity !== "") {
+    match["identity"] = [entry.identity];
+    if (entry.certain) match["certain"] = true;
+    stem = entry.identity;
+    because = entry.certain ? `Matched on the identity \u201C${entry.identity}\u201D, and on proof \u2014 so a client merely claiming that name does not match.` : `Matched on the claimed identity \u201C${entry.identity}\u201D. Nothing has verified it, so this matches anything that says so.`;
+  } else if (proven.length > 0) {
+    match["detector"] = detectors;
+    match["certain"] = true;
+    stem = detectors[0] ?? "proven";
+    because = `Matched on proof from ${detectors.join(", ")}. Only requests that carry the same proof match.`;
+  } else if (detectors.length > 0) {
+    match["verdict"] = [entry.verdict];
+    match["detector"] = detectors;
+    match["minScore"] = Math.max(0, Math.floor(entry.score / 10) * 10);
+    stem = detectors[0] ?? entry.verdict;
+    because = `Matched on ${entry.verdict} at score ${String(match["minScore"])} or more, from ${detectors.join(", ")}. Every one of those is probabilistic, so the guard will not let this rule deny anybody.`;
+  } else {
+    match["verdict"] = [entry.verdict];
+    stem = entry.verdict;
+    because = `Nothing fired on this request, so there is nothing sharper to match on than the verdict itself. Narrow it before you use it.`;
+  }
+  return {
+    rule: {
+      id: uniqueId(`from-${slug(stem)}`, existingIds),
+      match,
+      action: "tag",
+      reason: "Drafted from a request on the dashboard.",
+      _open: true
+    },
+    because
+  };
+}
+function slug(value) {
+  const cleaned = value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return cleaned === "" ? "request" : cleaned.slice(0, 40);
+}
+function uniqueId(wanted, taken) {
+  if (!taken.includes(wanted)) return wanted;
+  for (let suffix = 2; suffix < 1e3; suffix++) {
+    const candidate = `${wanted}-${suffix}`;
+    if (!taken.includes(candidate)) return candidate;
+  }
+  return `${wanted}-${Date.now()}`;
+}
+var init_draft = __esm({
+  "src/dashboard/client/draft.ts"() {
+    "use strict";
+  }
+});
+
+// src/dashboard/client/policy.ts
+async function loadPolicy() {
+  if (!SECTIONS.policy) return;
+  try {
+    const document_ = await getJson("/api/policy");
+    state.policy = document_;
+    if (!state.editorDirty) {
+      setEditorRules(document_.rules.filter((row) => row.editable).map((row) => row.rule));
+    }
+    if (!state.guardDirty) resetGuardDraft();
+    drawPolicyTab();
+  } catch {
+  }
+}
+function setEditorRules(rules) {
+  state.editorRules = JSON.parse(JSON.stringify(rules ?? []));
+  renderEditor();
+}
+function markDirty() {
+  state.editorDirty = true;
+  $("policy-dirty").hidden = false;
+}
+function editorRules() {
+  if (state.editorMode === "json") {
+    try {
+      const parsed = JSON.parse(byId("policy-json").value);
+      if (!Array.isArray(parsed)) return { error: "The JSON must be an array of rules." };
+      return { rules: parsed };
+    } catch (error) {
+      return { error: `The editor does not contain valid JSON: ${String(error)}` };
+    }
+  }
+  return { rules: state.editorRules };
+}
+function cleanRule(rule) {
+  const match = {};
+  for (const [key, value] of Object.entries(rule.match ?? {})) {
+    if (value === void 0 || value === null || value === "") continue;
+    if (Array.isArray(value) && value.length === 0) continue;
+    match[key] = value;
+  }
+  const params = {};
+  for (const [key, value] of Object.entries(rule.params ?? {})) {
+    if (value === void 0 || value === null || value === "") continue;
+    if (key === "limit") {
+      const limit = value;
+      if (limit.max === void 0 || limit.windowMs === void 0) continue;
+    }
+    params[key] = value;
+  }
+  const out = { id: rule.id, match, action: rule.action };
+  if (Object.keys(params).length > 0) out["params"] = params;
+  if (rule.reason !== void 0 && rule.reason !== "") out["reason"] = rule.reason;
+  return out;
+}
+function cleanRules(rules) {
+  return rules.map(cleanRule);
+}
+function field(name, control, hint) {
+  const row = el("div", "field");
+  row.appendChild(label(name, control));
+  const right = el("div", "field-row");
+  for (const node of Array.isArray(control) ? control : [control]) right.appendChild(node);
+  if (hint !== void 0) right.appendChild(el("span", "hint", hint));
+  row.appendChild(right);
+  return row;
+}
+function chipSelect(options, selected, onChange) {
+  const box = el("div", "chips-select");
+  const chosen = Array.isArray(selected) ? [...selected] : selected === void 0 ? [] : [String(selected)];
+  for (const option of options) {
+    const button = el("button", null, option);
+    button.type = "button";
+    button.setAttribute("aria-pressed", String(chosen.includes(option)));
+    button.addEventListener("click", () => {
+      const at = chosen.indexOf(option);
+      if (at === -1) chosen.push(option);
+      else chosen.splice(at, 1);
+      button.setAttribute("aria-pressed", String(at === -1));
+      onChange(chosen.length === 0 ? void 0 : [...chosen]);
+    });
+    box.appendChild(button);
+  }
+  return box;
+}
+function segmented2(options, value, onChange) {
+  const box = el("div", "seg");
+  for (const [label2, option] of options) {
+    const button = el("button", null, label2);
+    button.type = "button";
+    button.setAttribute("aria-pressed", String(option === value));
+    button.addEventListener("click", () => {
+      for (const other of Array.from(box.children)) other.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-pressed", "true");
+      onChange(option);
+    });
+    box.appendChild(button);
+  }
+  return box;
+}
+function textInput(value, placeholder, onChange, mono = false) {
+  const input = el("input", mono ? "mono-input" : null);
+  input.type = "text";
+  input.value = value === void 0 || value === null ? "" : String(value);
+  input.placeholder = placeholder;
+  input.addEventListener("input", () => onChange(input.value.trim() === "" ? void 0 : input.value));
+  return input;
+}
+function listInput(value, placeholder, onChange) {
+  const current = value === void 0 ? "" : Array.isArray(value) ? value.join(", ") : String(value);
+  const input = textInput(current, placeholder, () => {
+  }, true);
+  input.addEventListener("input", () => {
+    const parts = input.value.split(",").map((part) => part.trim()).filter(Boolean);
+    onChange(parts.length === 0 ? void 0 : parts.length === 1 ? parts[0] : parts);
+  });
+  return input;
+}
+function numberInput(value, placeholder, onChange) {
+  const input = el("input");
+  input.type = "number";
+  input.value = value === void 0 || value === null ? "" : String(value);
+  input.placeholder = placeholder;
+  input.addEventListener("input", () => onChange(input.value === "" ? void 0 : Number(input.value)));
+  return input;
+}
+function matchSummary(rule) {
+  const box = el("div", "rule-summary");
+  const match = rule.match ?? {};
+  const parts = [];
+  for (const key of ["verdict", "botClass", "category", "identity", "detector", "method", "path"]) {
+    const value = match[key];
+    if (value === void 0) continue;
+    parts.push([key, Array.isArray(value) ? value.join(", ") : String(value)]);
+  }
+  if (match["certain"] !== void 0) parts.push(["certain", String(match["certain"])]);
+  if (match["minScore"] !== void 0 || match["maxScore"] !== void 0) {
+    parts.push(["score", `${String(match["minScore"] ?? 0)}\u2013${String(match["maxScore"] ?? 99)}`]);
+  }
+  if (match["minPriorConfirmations"] !== void 0) parts.push(["prior", String(match["minPriorConfirmations"])]);
+  if (match["minUnsolvedChallenges"] !== void 0) parts.push(["unsolved", String(match["minUnsolvedChallenges"])]);
+  if (parts.length === 0) {
+    box.appendChild(el("span", "none", "matches everything"));
+    return box;
+  }
+  for (const [key, value] of parts.slice(0, 4)) box.appendChild(el("span", "t", `${key}: ${value}`));
+  if (parts.length > 4) box.appendChild(el("span", "k", `+${parts.length - 4} more`));
+  return box;
+}
+function ruleCard(rule, index) {
+  const vocabulary = state.policy?.vocabulary;
+  const open = rule._open === true;
+  const card = el("div", `rule${open ? "" : " collapsed"}`);
+  const head = el("div", "rule-head");
+  const chevron = el("button", "chev", open ? "\u25BE" : "\u25B8");
+  chevron.title = open ? "Collapse" : "Expand";
+  chevron.setAttribute("aria-expanded", String(open));
+  chevron.addEventListener("click", () => {
+    rule._open = !open;
+    renderEditor();
+  });
+  head.appendChild(chevron);
+  head.appendChild(el("span", "ord", index + 1));
+  const id = textInput(rule.id, "rule-id", (value) => {
+    rule.id = value ?? "";
+    markDirty();
+  }, true);
+  id.setAttribute("aria-label", "Rule id");
+  head.appendChild(id);
+  if (open) {
+    const action = el("select");
+    action.setAttribute("aria-label", "Action");
+    for (const name of vocabulary?.actions ?? []) {
+      const option = el("option", null, name);
+      option.value = name;
+      if (name === rule.action) option.selected = true;
+      action.appendChild(option);
+    }
+    action.addEventListener("change", () => {
+      rule.action = action.value;
+      rule.params = {};
+      markDirty();
+      renderEditor();
+    });
+    head.appendChild(action);
+  } else {
+    head.appendChild(matchSummary(rule));
+    head.appendChild(el("span", `act-pill ${actionKind(rule.action)}`, rule.action));
+  }
+  const up = el("button", "icon", "\u2191");
+  up.title = "Move earlier \u2014 the first matching rule wins";
+  up.addEventListener("click", () => moveRule(index, -1));
+  const down = el("button", "icon", "\u2193");
+  down.title = "Move later";
+  down.addEventListener("click", () => moveRule(index, 1));
+  const remove = el("button", "icon danger", "Remove");
+  remove.addEventListener("click", () => {
+    state.editorRules.splice(index, 1);
+    markDirty();
+    renderEditor();
+  });
+  head.appendChild(up);
+  head.appendChild(down);
+  head.appendChild(remove);
+  card.appendChild(head);
+  if (!open) return card;
+  const body = el("div", "rule-body");
+  rule.match = rule.match ?? {};
+  const match = rule.match;
+  body.appendChild(field("Verdict", chipSelect(vocabulary?.verdicts ?? [], match["verdict"], (value) => {
+    match["verdict"] = value;
+    markDirty();
+  })));
+  body.appendChild(field("Bot class", chipSelect(vocabulary?.botClasses ?? [], match["botClass"], (value) => {
+    match["botClass"] = value;
+    markDirty();
+  })));
+  body.appendChild(field("Category", chipSelect(vocabulary?.categories ?? [], match["category"], (value) => {
+    match["category"] = value;
+    markDirty();
+  })));
+  body.appendChild(field("Detector", chipSelect(vocabulary?.detectors ?? [], match["detector"], (value) => {
+    match["detector"] = value;
+    markDirty();
+  })));
+  body.appendChild(field("Method", chipSelect(vocabulary?.methods ?? [], match["method"], (value) => {
+    match["method"] = value;
+    markDirty();
+  })));
+  body.appendChild(
+    field(
+      "Evidence",
+      segmented2(
+        [
+          ["any", void 0],
+          ["proven", true],
+          ["unproven", false]
+        ],
+        match["certain"],
+        (value) => {
+          match["certain"] = value;
+          markDirty();
+        }
+      ),
+      "proven means at least one piece of certain evidence \u2014 including a proven human"
+    )
+  );
+  body.appendChild(
+    field("Score", [
+      numberInput(match["minScore"], "min", (value) => {
+        match["minScore"] = value;
+        markDirty();
+      }),
+      el("span", "hint", "to"),
+      numberInput(match["maxScore"], "max", (value) => {
+        match["maxScore"] = value;
+        markDirty();
+      })
+    ])
+  );
+  body.appendChild(field("Identity", listInput(match["identity"], "googlebot, gptbot", (value) => {
+    match["identity"] = value;
+    markDirty();
+  })));
+  body.appendChild(field("Path", listInput(match["path"], "/api/, /search", (value) => {
+    match["path"] = value;
+    markDirty();
+  }), "a string matches as a prefix"));
+  body.appendChild(
+    field(
+      "Prior bots",
+      numberInput(match["minPriorConfirmations"], "0", (value) => {
+        match["minPriorConfirmations"] = value;
+        markDirty();
+      }),
+      "times this actor was already proven a bot"
+    )
+  );
+  body.appendChild(
+    field(
+      "Unsolved",
+      numberInput(match["minUnsolvedChallenges"], "0", (value) => {
+        match["minUnsolvedChallenges"] = value;
+        markDirty();
+      }),
+      "challenges issued to this actor that were never answered \u2014 solving one clears the count"
+    )
+  );
+  rule.params = rule.params ?? {};
+  const params = rule.params;
+  for (const node of paramFields(rule.action, params)) body.appendChild(node);
+  body.appendChild(field("Reason", textInput(rule.reason, "shown in the decision and in your logs", (value) => {
+    rule.reason = value ?? "";
+    markDirty();
+  })));
+  card.appendChild(body);
+  return card;
+}
+function paramFields(action, params) {
+  switch (action) {
+    case "block":
+      return [
+        field("Status", numberInput(params["status"], "403", (value) => {
+          params["status"] = value;
+          markDirty();
+        })),
+        field("Body", textInput(params["body"], "Automated traffic is not served here.", (value) => {
+          params["body"] = value;
+          markDirty();
+        }))
+      ];
+    case "redirect":
+      return [field("Location", textInput(params["location"], "/too-fast", (value) => {
+        params["location"] = value;
+        markDirty();
+      }, true))];
+    case "delay":
+      return [field("Delay", numberInput(params["delayMs"], "250", (value) => {
+        params["delayMs"] = value;
+        markDirty();
+      }), "milliseconds")];
+    case "rate-limit": {
+      const limit = params["limit"] ?? {};
+      params["limit"] = limit;
+      return [
+        field("Limit", [
+          numberInput(limit["max"], "60", (value) => {
+            limit["max"] = value;
+            markDirty();
+          }),
+          el("span", "hint", "requests per"),
+          numberInput(limit["windowMs"], "60000", (value) => {
+            limit["windowMs"] = value;
+            markDirty();
+          }),
+          el("span", "hint", "ms")
+        ])
+      ];
+    }
+    case "custom":
+      return [field("Handler", textInput(params["handler"], "handler-id", (value) => {
+        params["handler"] = value;
+        markDirty();
+      }, true), "id of a handler you registered")];
+    default:
+      return [];
+  }
+}
+function lockedCard(row) {
+  const card = el("div", "rule locked");
+  const head = el("div", "rule-head");
+  head.appendChild(el("span", "ord", `#${row.index + 1}`));
+  head.appendChild(el("span", "mono", row.id));
+  head.appendChild(el("span", "grow"));
+  head.appendChild(el("span", "pill", "predicate \u2014 locked"));
+  card.appendChild(head);
+  card.appendChild(
+    el("div", "rule-body", "This rule matches with a function, which cannot be represented here or sent over HTTP. It stays exactly as it is, at this position, whatever else you change.")
+  );
+  return card;
+}
+function moveRule(index, delta) {
+  const target = index + delta;
+  if (target < 0 || target >= state.editorRules.length) return;
+  const moved = state.editorRules.splice(index, 1)[0];
+  if (moved === void 0) return;
+  state.editorRules.splice(target, 0, moved);
+  markDirty();
+  renderEditor();
+}
+function renderEditor() {
+  if (!SECTIONS.policy) return;
+  const list = $("rulelist");
+  clear(list);
+  const locked = (state.policy?.rules ?? []).filter((row) => !row.editable);
+  if (state.editorRules.length === 0 && locked.length === 0) {
+    list.appendChild(el("div", "note", "No rules. Every request takes the default action \u2014 add one, or import a set."));
+  }
+  const rendered2 = state.editorRules.map((rule, index) => ruleCard(rule, index));
+  for (const row of locked) rendered2.splice(Math.min(row.index, rendered2.length), 0, lockedCard(row));
+  for (const node of rendered2) list.appendChild(node);
+  if (state.editorMode === "json") byId("policy-json").value = JSON.stringify(cleanRules(state.editorRules), null, 2);
+}
+function drawPolicyTab() {
+  const document_ = state.policy;
+  if (document_ === void 0) return;
+  const editable = document_.editable;
+  $("policy-apply").hidden = !editable;
+  byId("policy-json").readOnly = !editable;
+  $("policy-mode").textContent = editable ? "editable" : "read-only";
+  $("rule-add").hidden = !editable;
+  $("policy-import").hidden = !editable;
+  const preserved = document_.rules.filter((row) => !row.editable);
+  let note = editable ? "First match wins \u2014 order matters." : "Read-only. Enable controls.editPolicy to change these.";
+  if (preserved.length > 0) note += ` ${preserved.length} rule(s) use a predicate function and are locked.`;
+  $("policy-note").textContent = note;
+  renderPresetButtons();
+  drawGuard();
+  drawRanges();
+  if (SECTIONS.robots) {
+    $("robots-preview").textContent = document_.robots === "" ? "(this policy declines no crawler by name)" : document_.robots;
+    const notes = $("robots-notes");
+    clear(notes);
+    for (const note_ of document_.robotsNotes) notes.appendChild(el("div", "ev-meta", `${note_.rule}: ${note_.reason}`));
+  }
+  const rules = $("stat-rules");
+  clear(rules);
+  const installed = state.snapshot?.rules ?? [];
+  if (installed.length === 0) rules.appendChild(el("div", "note", "No rules configured \u2014 every request takes the default action."));
+  else installed.forEach((rule, index) => rules.appendChild(el("span", "chip", `${index + 1}. ${rule}`)));
+}
+async function draftIntoEditor(entry) {
+  if (state.policy === void 0) await loadPolicy();
+  const drafted = draftRule(entry, state.editorRules.map((rule) => rule.id));
+  state.editorRules.push(drafted.rule);
+  markDirty();
+  if (state.editorMode === "json") byId("policy-json").value = JSON.stringify(cleanRules(state.editorRules), null, 2);
+  renderEditor();
+  app.showTab("policy");
+  const notes = [
+    `Drafted \u201C${drafted.rule.id}\u201D, tagging only. Nothing is applied \u2014 read it, choose the action, then apply.`,
+    drafted.because,
+    "It was added last, which is the only position that cannot change what an existing rule does. Move it up with \u2191 if it needs to win."
+  ];
+  showResult("warn", (box) => {
+    for (const note of notes) box.appendChild(el("div", note === notes[0] ? null : "ev-meta", note));
+  });
+  toast("ok", "Rule drafted", "In the editor, tagging only, not applied.");
+  await runPreview(notes);
+}
+function switchToGui() {
+  if (state.editorMode === "gui") return;
+  const parsed = editorRules();
+  if (parsed.error !== void 0) {
+    toast("bad", "That JSON will not parse", parsed.error);
+    return;
+  }
+  state.editorRules = parsed.rules ?? [];
+  state.editorMode = "gui";
+  $("mode-gui").setAttribute("aria-pressed", "true");
+  $("mode-json").setAttribute("aria-pressed", "false");
+  $("editor-gui").hidden = false;
+  $("editor-json").hidden = true;
+  renderEditor();
+}
+function switchToJson() {
+  state.editorMode = "json";
+  $("mode-gui").setAttribute("aria-pressed", "false");
+  $("mode-json").setAttribute("aria-pressed", "true");
+  $("editor-gui").hidden = true;
+  $("editor-json").hidden = false;
+  byId("policy-json").value = JSON.stringify(cleanRules(state.editorRules), null, 2);
+}
+async function exportSettings() {
+  try {
+    const response = await fetch(`${API}/api/settings`);
+    const text = await response.text();
+    if (!response.ok) throw new Error(text);
+    download(text, `bothandler-settings-${today()}.json`, "application/json");
+    toast("ok", "Settings exported", "Rules, plus a record of the configuration around them.");
+  } catch (error) {
+    toast("bad", "Export failed", String(error));
+  }
+}
+function readSettingsFile(file) {
+  const reader = new FileReader();
+  reader.onload = () => {
+    try {
+      applyImported(JSON.parse(String(reader.result)), file.name);
+    } catch (error) {
+      toast("bad", "That file is not JSON", String(error));
+    }
+  };
+  reader.onerror = () => toast("bad", "Could not read that file", "");
+  reader.readAsText(file);
+}
+function applyImported(document_, name) {
+  const rules = Array.isArray(document_) ? document_ : Array.isArray(document_.rules) ? document_.rules : void 0;
+  if (rules === void 0) {
+    toast("bad", "Nothing to import", "Expected an array of rules, or a settings file with a rules array.");
+    return;
+  }
+  setEditorRules(rules);
+  markDirty();
+  switchToGui();
+  const ignored = [];
+  const readOnly = document_.readOnly;
+  if (readOnly !== void 0) {
+    ignored.push("the guard, the detectors, the ranges and the audit \u2014 those come from the code that built the handler, not from a file");
+    if (Array.isArray(readOnly.lockedRules) && readOnly.lockedRules.length > 0) {
+      ignored.push(`${readOnly.lockedRules.length} predicate rule(s), which stay as they are`);
+    }
+  }
+  showResult("warn", (box) => {
+    box.appendChild(el("div", null, `Loaded ${rules.length} rule(s) from ${name}. Nothing has been applied yet \u2014 preview it first.`));
+    for (const line of ignored) box.appendChild(el("div", "ev-meta", `Ignored: ${line}`));
+  });
+  toast("ok", `Imported ${rules.length} rule(s)`, "Review, preview, then apply.");
+}
+function collectForSubmit() {
+  const parsed = editorRules();
+  if (parsed.error !== void 0) {
+    showResult("bad", (box) => box.appendChild(el("div", null, parsed.error ?? "")));
+    toast("bad", "That JSON will not parse", parsed.error);
+    return void 0;
+  }
+  const cleaned = cleanRules(parsed.rules ?? []);
+  const blank = cleaned.filter((rule) => rule["id"] === void 0 || rule["id"] === "").length;
+  if (blank > 0) {
+    toast("bad", "Every rule needs an id", "It is what every decision and log line names.");
+    return void 0;
+  }
+  return cleaned;
+}
+async function runPreview(notes = []) {
+  const rules = collectForSubmit();
+  if (rules === void 0) return;
+  const result = await postJson("/api/policy/preview", { rules });
+  if (!result.ok) {
+    showResult("bad", (box) => box.appendChild(el("div", null, result.error ?? "")));
+    toast("bad", "Refused", result.error ?? "");
+    return;
+  }
+  renderPreview(result.data, notes);
+}
+async function applyPolicy() {
+  const rules = collectForSubmit();
+  if (rules === void 0) return;
+  const result = await postJson("/api/policy/apply", { rules });
+  if (!result.ok) {
+    showResult("bad", (box) => box.appendChild(el("div", null, result.error ?? "")));
+    toast("bad", "Refused", result.error ?? "");
+    return;
+  }
+  state.editorDirty = false;
+  $("policy-dirty").hidden = true;
+  await loadPolicy();
+  toast("ok", "Applied", `${n(result.data.rules)} rule(s) now in force.`);
+  showResult("ok", (box) => {
+    box.appendChild(el("div", null, `Applied. ${n(result.data.rules)} rule(s) are now in force.`));
+    for (const warning of result.data.warnings ?? []) box.appendChild(el("div", "ev-meta", warning));
+  });
+}
+function renderPresetButtons() {
+  const box = $("preset-buttons");
+  const presets = state.policy?.vocabulary.presets ?? [];
+  if (box.childElementCount === presets.length) return;
+  clear(box);
+  for (const preset of presets) {
+    const button = el("button", null, preset);
+    button.addEventListener("click", () => {
+      void (async () => {
+        const result = await postJson("/api/policy/preview", { preset });
+        if (!result.ok) {
+          toast("bad", "Refused", result.error ?? "");
+          return;
+        }
+        renderPreview(result.data);
+      })();
+    });
+    box.appendChild(button);
+  }
+}
+function initPolicy() {
+  if (!SECTIONS.policy) return;
+  $("mode-gui").addEventListener("click", switchToGui);
+  $("mode-json").addEventListener("click", switchToJson);
+  $("rule-add").addEventListener("click", () => {
+    state.editorRules.push({ id: `new-rule-${state.editorRules.length + 1}`, match: {}, action: "tag", params: {}, _open: true });
+    markDirty();
+    renderEditor();
+  });
+  $("rule-expand").addEventListener("click", () => {
+    const anyClosed = state.editorRules.some((rule) => rule._open !== true);
+    for (const rule of state.editorRules) rule._open = anyClosed;
+    $("rule-expand").textContent = anyClosed ? "Collapse all" : "Expand all";
+    renderEditor();
+  });
+  byId("policy-json").addEventListener("input", markDirty);
+  $("policy-preview").addEventListener("click", () => void runPreview());
+  $("policy-apply").addEventListener("click", () => void applyPolicy());
+  $("policy-revert").addEventListener("click", () => {
+    state.editorDirty = false;
+    $("policy-dirty").hidden = true;
+    $("policy-result").hidden = true;
+    resetGuardDraft();
+    void loadPolicy();
+  });
+  $("policy-export").addEventListener("click", () => void exportSettings());
+  $("policy-import").addEventListener("click", () => byId("policy-file").click());
+  byId("policy-file").addEventListener("change", () => {
+    const input = byId("policy-file");
+    const file = input.files?.[0];
+    if (file !== void 0) readSettingsFile(file);
+    input.value = "";
+  });
+  const panel = $("editor-panel");
+  for (const name of ["dragenter", "dragover"]) {
+    panel.addEventListener(name, (event) => {
+      if (state.policy?.editable !== true) return;
+      event.preventDefault();
+      panel.classList.add("drop");
+    });
+  }
+  for (const name of ["dragleave", "drop"]) {
+    panel.addEventListener(name, (event) => {
+      panel.classList.remove("drop");
+      if (name !== "drop") return;
+      event.preventDefault();
+      const file = event.dataTransfer?.files?.[0];
+      if (file !== void 0) readSettingsFile(file);
+    });
+  }
+}
+var init_policy = __esm({
+  "src/dashboard/client/policy.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_app();
+    init_api();
+    init_outcome();
+    init_guard();
+    init_ranges();
+    init_format();
+    init_result();
+    init_store();
+    init_draft();
+  }
+});
+
+// src/dashboard/client/feed.ts
+function initFeed() {
+  const filters = $("filters");
+  for (const [name, label2] of FILTERS) {
+    const button = el("button", null, label2);
+    button.setAttribute("aria-pressed", String(name === state.filter));
+    button.dataset["filter"] = name;
+    button.addEventListener("click", () => {
+      state.filter = name;
+      for (const other of Array.from(filters.children)) other.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-pressed", "true");
+      app.syncUrl();
+      app.drawNow();
+    });
+    filters.appendChild(button);
+  }
+  const search = byId("search");
+  search.addEventListener("input", () => {
+    setSearch(search.value.trim());
+    app.syncUrl();
+    app.drawNow();
+  });
+  const exportShown = byId("feed-export");
+  exportShown.hidden = !SECTIONS.evidence;
+  exportShown.addEventListener("click", () => {
+    const rows = visibleRows(Number.POSITIVE_INFINITY);
+    if (rows.length === 0) {
+      toast("warn", "Nothing to export", "No request in the window matches this filter.");
+      return;
+    }
+    const entries = rows.map((row) => row.entry).reverse();
+    download(`${replayFile(entries)}
+`, `bothandler-feed-${today()}.jsonl`, "application/x-ndjson");
+    toast("ok", `Exported ${n(entries.length)} request(s)`, "Replay them with `bothandlerjs replay`.");
+  });
+}
+function reflectFilterButtons() {
+  for (const button of Array.from($("filters").children)) {
+    button.setAttribute("aria-pressed", String(button instanceof HTMLElement && button.dataset["filter"] === state.filter));
+  }
+  const search = byId("search");
+  if (search.value !== state.search) search.value = state.search;
+}
+function drawFeed() {
+  const body = byId("rows");
+  const shown = visibleRows();
+  let index = 0;
+  const place = (node) => {
+    const current = body.childNodes[index] ?? null;
+    if (current !== node) body.insertBefore(node, current);
+    index++;
+  };
+  for (const row of shown) {
+    const id = row.entry.requestId;
+    const open = state.open.has(id);
+    let cached = rendered.get(id);
+    if (cached === void 0 || cached.rev !== row.rev || cached.open !== open) {
+      cached = {
+        row: buildRow(row.entry, open),
+        detail: open ? buildDetail(row.entry) : void 0,
+        rev: row.rev,
+        open
+      };
+      rendered.set(id, cached);
+    }
+    place(cached.row);
+    if (cached.detail !== void 0) place(cached.detail);
+  }
+  while (body.childNodes.length > index) body.removeChild(body.childNodes[index]);
+  if (rendered.size > shown.length * 2 + 100) {
+    const live = new Set(shown.map((row) => row.entry.requestId));
+    for (const id of Array.from(rendered.keys())) if (!live.has(id)) rendered.delete(id);
+  }
+  const total = state.rows.length;
+  const matching = matchingCount();
+  $("empty").hidden = total > 0;
+  $("feed-count").textContent = matching === total ? `${n(total)} in this window` : `${n(matching)} of ${n(total)}${matching > FEED_LIMIT ? ` \xB7 showing ${n(FEED_LIMIT)}` : ""}`;
+  const skipped = (state.snapshot?.skipped ?? 0) + state.laggedDrops;
+  const note = $("feed-skipped");
+  note.hidden = skipped === 0;
+  note.textContent = `${n(skipped)} not streamed`;
+  note.title = state.laggedDrops > 0 ? `${n(state.laggedDrops)} were skipped because this connection could not keep up, and the rest by the rate cap. All of them are still in the window, the preview and the export.` : "Entries the rate cap kept off this stream. They are still in the window, the preview and the export \u2014 raise maxEventsPerSecond to see them live.";
+}
+function resetFeedCache() {
+  rendered.clear();
+}
+function buildRow(entry, open) {
+  const out = outcome(entry);
+  const tr = el("tr", `row a-${entry.downgradedFrom !== void 0 ? "guard" : out}${open ? " open" : ""}`);
+  tr.appendChild(el("td", "num mono tnum when", clockTime(entry.at)));
+  const request = el("td", "edge req");
+  const toggle = el("button", "row-toggle", `${entry.method} ${entry.path}`);
+  toggle.type = "button";
+  toggle.setAttribute("aria-expanded", String(open));
+  toggle.setAttribute("aria-label", `${entry.method} ${entry.path}, ${entry.verdict}. Evidence.`);
+  toggle.dataset["request"] = entry.requestId;
+  request.appendChild(toggle);
+  const ua = el("span", "ua");
+  if (SECTIONS.actors) {
+    const actorLink = el("a", null, entry.actor);
+    actorLink.href = "#actor";
+    actorLink.title = "Show everything from this actor";
+    actorLink.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      openActor(entry.actor);
+    });
+    ua.appendChild(actorLink);
+    ua.appendChild(document.createTextNode(` \xB7 ${entry.userAgent}`));
+  } else {
+    ua.appendChild(document.createTextNode(`${entry.actor} \xB7 ${entry.userAgent}`));
+  }
+  ua.title = `${entry.actor} \xB7 ${entry.userAgent}`;
+  request.appendChild(ua);
+  tr.appendChild(request);
+  const verdictCell = el("td");
+  const [badgeClass, badgeLabel] = verdictBadge(entry);
+  verdictCell.appendChild(el("span", `badge ${badgeClass}`, badgeLabel));
+  if (entry.identity !== void 0) verdictCell.appendChild(el("span", "sub", entry.identity));
+  tr.appendChild(verdictCell);
+  tr.appendChild(el("td", "num mono tnum", entry.certain ? "proven" : String(entry.score)));
+  const actionCell = el("td");
+  if (entry.action !== void 0) {
+    const kind = out === "deny" ? "act-deny" : out === "mitigate" ? "act-mitigate" : out === "allow" ? "act-allow" : "act-tag";
+    actionCell.appendChild(el("span", `act ${kind}`, entry.action));
+    if (entry.rule !== void 0) {
+      const ruleLabel = el("span", "sub", entry.rule);
+      ruleLabel.title = entry.rule;
+      actionCell.appendChild(ruleLabel);
+    }
+    if (entry.downgradedFrom !== void 0) actionCell.appendChild(el("span", "guard", `guard stopped ${entry.downgradedFrom}`));
+  } else {
+    actionCell.appendChild(el("span", "sub", "assessed only"));
+  }
+  tr.appendChild(actionCell);
+  tr.appendChild(el("td", "num mono tnum", entry.durationMs.toFixed(2)));
+  tr.dataset["request"] = entry.requestId;
+  const flip = () => {
+    if (state.open.has(entry.requestId)) state.open.delete(entry.requestId);
+    else state.open.add(entry.requestId);
+    app.drawNow();
+    rootNode().querySelector(`button.row-toggle[data-request="${cssEscape(entry.requestId)}"]`)?.focus();
+  };
+  toggle.addEventListener("click", (event) => {
+    event.stopPropagation();
+    flip();
+  });
+  tr.addEventListener("click", flip);
+  return tr;
+}
+function buildDetail(entry) {
+  const tr = el("tr", "detail");
+  const cell = el("td");
+  cell.colSpan = 6;
+  if (!SECTIONS.evidence) {
+    cell.appendChild(
+      el(
+        "div",
+        "ev-meta",
+        "The evidence section is switched off on this dashboard, so the reasons behind this verdict are not sent to it. What fired, and why, is on a dashboard that has `sections: { evidence: true }`."
+      )
+    );
+  } else if (entry.evidence.length === 0) {
+    cell.appendChild(
+      el(
+        "div",
+        "ev-meta",
+        entry.bypass !== void 0 ? `Detection was skipped for this request: ${entry.bypass}.` : "No detector produced any evidence. This is what ordinary traffic looks like."
+      )
+    );
+  } else {
+    const list = el("div", "ev");
+    for (const item of entry.evidence) {
+      const row = el("div", `ev-item${item.direction === "human" ? " human" : ""}`);
+      row.appendChild(el("div", `tier t-${item.certainty}`, item.certainty));
+      const body = el("div");
+      body.appendChild(el("div", null, item.summary));
+      let meta = `${item.detector} \xB7 points to ${item.direction}`;
+      if (item.family !== void 0) meta += ` \xB7 family \u201C${item.family}\u201D, counted once with its siblings`;
+      body.appendChild(el("div", "ev-meta", meta));
+      if (item.deterministicBasis !== void 0) body.appendChild(el("div", "basis", item.deterministicBasis));
+      row.appendChild(body);
+      list.appendChild(row);
+    }
+    cell.appendChild(list);
+  }
+  for (const failure of entry.failures) {
+    cell.appendChild(el("div", "ev-meta", `Detector ${failure.detector} ${failure.reason}: ${failure.message}`));
+  }
+  if (entry.downgradeReason !== void 0) cell.appendChild(el("div", "basis", `Guard: ${entry.downgradeReason}`));
+  const queryNames = Object.keys(entry.query);
+  if (queryNames.length > 0) {
+    const queryTable = el("table", "hdr");
+    for (const name of queryNames) {
+      const value = entry.query[name] ?? "";
+      const row = el("tr");
+      row.appendChild(el("td", "n", `?${name}`));
+      row.appendChild(el("td", `v${value === "[redacted]" ? " red" : ""}`, value));
+      queryTable.appendChild(row);
+    }
+    cell.appendChild(queryTable);
+  }
+  if (entry.headers !== void 0 && entry.headers.length > 0) {
+    const table = el("table", "hdr");
+    for (const [name, value] of entry.headers) {
+      const row = el("tr");
+      row.appendChild(el("td", "n", `${name}:`));
+      row.appendChild(el("td", `v${value === "[redacted]" ? " red" : ""}`, value));
+      table.appendChild(row);
+    }
+    cell.appendChild(table);
+  }
+  const tools = el("div", "tools");
+  if (SECTIONS.evidence) {
+    tools.appendChild(copyButton("Copy replay line", () => replayLine(entry)));
+    tools.appendChild(downloadButton("Download replay line", () => replayLine(entry), `request-${entry.requestId}.jsonl`));
+    tools.appendChild(copyButton("Copy corpus case", () => corpusCase(entry)));
+  }
+  if (SECTIONS.policy) {
+    const draft2 = el("button", null, "Draft a rule");
+    draft2.title = "Start a rule from this request, in the policy editor";
+    draft2.addEventListener("click", (event) => {
+      event.stopPropagation();
+      void draftIntoEditor(entry);
+    });
+    tools.appendChild(draft2);
+  }
+  if (SECTIONS.actors) {
+    const actorButton = el("button", null, "Show this actor");
+    actorButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      openActor(entry.actor);
+    });
+    tools.appendChild(actorButton);
+  }
+  cell.appendChild(tools);
+  const foot = el("div", "detail-foot");
+  foot.appendChild(el("span", null, clockTime(entry.at)));
+  foot.appendChild(el("span", null, `actor ${entry.actor}`));
+  if (entry.rule !== void 0) foot.appendChild(el("span", null, `rule \u201C${entry.rule}\u201D`));
+  foot.appendChild(el("span", null, `assessed in ${entry.durationMs.toFixed(3)}ms`));
+  foot.appendChild(el("span", "mono", entry.requestId));
+  cell.appendChild(foot);
+  tr.appendChild(cell);
+  return tr;
+}
+function copyButton(label2, produce) {
+  const button = el("button", null, label2);
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    const text = produce();
+    const done = () => {
+      button.textContent = "Copied";
+      setTimeout(() => {
+        button.textContent = label2;
+      }, 1200);
+    };
+    if (navigator.clipboard?.writeText !== void 0) navigator.clipboard.writeText(text).then(done, () => showText(text));
+    else showText(text);
+  });
+  return button;
+}
+function downloadButton(label2, produce, filename) {
+  const button = el("button", null, label2);
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    download(`${produce()}
+`, filename, "application/x-ndjson");
+  });
+  return button;
+}
+function showText(text) {
+  const box = el("pre", "code", text);
+  const host = $("policy-result");
+  host.hidden = false;
+  host.className = "result";
+  clear(host);
+  host.appendChild(el("div", "ev-meta", "Copying needs a secure context; here is the text."));
+  host.appendChild(box);
+  const selection = getSelection();
+  if (selection !== null) {
+    const range = document.createRange();
+    range.selectNodeContents(box);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+var FILTERS, rendered;
+var init_feed = __esm({
+  "src/dashboard/client/feed.ts"() {
+    "use strict";
+    init_dom();
+    init_store();
+    init_boot();
+    init_app();
+    init_format();
+    init_replay();
+    init_actor();
+    init_outcome();
+    init_policy();
+    FILTERS = [
+      ["all", "All"],
+      ["proven", "Proven"],
+      ["suspected", "Suspected"],
+      ["human", "Human"],
+      ["guard", "Guard stops"],
+      ["deny", "Denied"],
+      ["mitigate", "Mitigated"],
+      ["allow", "Served"]
+    ];
+    rendered = /* @__PURE__ */ new Map();
+  }
+});
+
+// src/dashboard/client/stream.ts
+var stream_exports = {};
+__export(stream_exports, {
+  connectStream: () => connectStream,
+  loadInitialSnapshot: () => loadInitialSnapshot,
+  suspendStream: () => suspendStream
+});
+function suspendStream() {
+  source?.close();
+  source = void 0;
+}
+function connectStream() {
+  if (!SECTIONS.feed) {
+    $("dot").className = "dot";
+    $("conn").textContent = "feed off";
+    return;
+  }
+  if (source !== void 0) return;
+  source = new EventSource(`${API}/api/stream`);
+  source.addEventListener("open", () => {
+    $("dot").className = "dot on";
+    $("conn").textContent = "live";
+  });
+  source.addEventListener("sync", (event) => {
+    const detail = JSON.parse(event.data);
+    if (!detail.replace) return;
+    clearFeed();
+    resetFeedCache();
+  });
+  source.addEventListener("entry", (event) => {
+    ingest(JSON.parse(event.data));
+    if (state.paused) {
+      state.bufferedWhilePaused++;
+      $("pause").textContent = `Resume (${state.bufferedWhilePaused})`;
+    }
+    app.draw();
+  });
+  source.addEventListener("update", (event) => {
+    ingest(JSON.parse(event.data));
+    app.draw();
+  });
+  source.addEventListener("reset", () => {
+    clearFeed();
+    resetFeedCache();
+    app.draw();
+  });
+  source.addEventListener("lagged", (event) => {
+    const detail = JSON.parse(event.data);
+    state.laggedDrops += detail.dropped;
+    app.draw();
+  });
+  source.addEventListener("stats", (event) => {
+    state.snapshot = JSON.parse(event.data);
+    app.draw();
+  });
+  source.addEventListener("error", () => {
+    $("dot").className = "dot off";
+    $("conn").textContent = "reconnecting\u2026";
+  });
+}
+async function loadInitialSnapshot() {
+  try {
+    state.snapshot = await getJson("/api/stats");
+    app.drawNow();
+  } catch {
+  }
+}
+var source;
+var init_stream = __esm({
+  "src/dashboard/client/stream.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_app();
+    init_store();
+    init_api();
+    init_feed();
+  }
+});
+
+// src/dashboard/client/panels.ts
+function drawTiles(force = false) {
+  if (!SECTIONS.statistics) return;
+  const box = $("tiles");
+  const snapshot = state.snapshot;
+  if (snapshot === void 0) return;
+  if (!force && paintedSnapshot === snapshot) return;
+  paintedSnapshot = snapshot;
+  const metrics = snapshot.metrics;
+  clear(box);
+  if (metrics === void 0) {
+    box.appendChild(el("div", "note", "Counters are switched off on this handler (metrics: false). The live feed still works."));
+    return;
+  }
+  const actions = metrics.actions;
+  const denied = actions.block + actions.drop + actions.redirect;
+  const mitigated = actions.challenge + actions["rate-limit"] + actions.delay;
+  const served = actions.allow + actions.tag + actions.log;
+  const total = metrics.requests;
+  const unremarkable = metrics.verdicts.unknown + metrics.verdicts.human;
+  const provenBotCount = provenBots(metrics.verdicts);
+  const tiles = [
+    ["", n(total), "Requests", "since start"],
+    ["proven", n(provenBotCount), "Proven bots", `${pct(provenBotCount, total)} of traffic`],
+    ["warn", n(metrics.verdicts["suspected-bot"]), "Suspected", "never denied on this alone"],
+    ["", n(unremarkable), "Unremarkable", `${pct(unremarkable, total)} of traffic`],
+    ["warn", n(metrics.downgrades), "Guard stops", metrics.downgrades > 0 ? "rules asking for more than the evidence" : "no rule overreached"],
+    ["crit", n(denied), "Denied", `${pct(denied, total)} of traffic`],
+    [
+      "",
+      n(mitigated),
+      "Mitigated",
+      metrics.challenges.issued > 0 ? `${n(metrics.challenges.solved)} of ${n(metrics.challenges.issued)} challenges solved` : "challenged, limited or delayed"
+    ],
+    ["good", n(served), "Served", `${pct(served, total)} of traffic`],
+    ["", n(metrics.actorsTracked), "Actors tracked", "in the registry now"]
+  ];
+  for (const [kind, value, key, sub] of tiles) {
+    const tile = el("div", `tile ${kind}`);
+    tile.appendChild(el("div", "v tnum", value));
+    tile.appendChild(el("div", "k", key));
+    tile.appendChild(el("div", "s", sub));
+    box.appendChild(tile);
+  }
+}
+function drawChips() {
+  const snapshot = state.snapshot;
+  if (snapshot === void 0) return;
+  const box = $("chips");
+  clear(box);
+  const facts = [
+    // Which process this is, first, because everything after it is a fact about this
+    // process and nothing else. Behind a load balancer there are as many of these
+    // dashboards as there are pods, each showing its own share of the traffic.
+    ["instance", snapshot.instance],
+    ["guard", snapshot.policy.falsePositivePolicy],
+    ["suspect at", String(snapshot.policy.suspectThreshold)]
+  ];
+  if (SECTIONS.statistics) facts.push(["detectors", String(snapshot.detectors.length)]);
+  if (SECTIONS.policy) facts.push(["rules", String(snapshot.rules.length)]);
+  facts.push(["uptime", uptime(snapshot.now - snapshot.startedAt)]);
+  for (const [label2, value] of facts) {
+    const fact = el("span");
+    fact.appendChild(document.createTextNode(`${label2} `));
+    fact.appendChild(el("b", null, value));
+    box.appendChild(fact);
+  }
+}
+function updateWindowLabels() {
+  const label2 = windowLabel(state.rows.length, oldestAt(), Date.now());
+  for (const node of Array.from(rootNode().querySelectorAll(".win"))) node.textContent = label2;
+}
+function drawLivePanels() {
+  if (!SECTIONS.statistics) return;
+  const totals = aggregate(state.rows);
+  drawBars($("live-detectors"), totals.detectors, "Nothing has fired in this window.");
+  if (SECTIONS.actors) drawBars($("live-actors"), totals.actors, "No traffic in this window.");
+}
+function drawStatsPanels() {
+  const snapshot = state.snapshot;
+  if (snapshot === void 0) return;
+  const metrics = snapshot.metrics;
+  if (metrics !== void 0) {
+    drawBars($("stat-verdicts"), pairs(metrics.verdicts), "Nothing assessed yet.");
+    drawBars($("stat-actions"), pairs(metrics.actions), "No decisions yet.");
+    drawBars($("stat-classes"), pairs(metrics.botClasses), "Nothing classified yet.");
+    drawBars($("stat-detectors"), pairs(metrics.detectorFirings), "No detector has produced evidence yet.");
+    const challenges = $("stat-challenges");
+    clear(challenges);
+    if (!snapshot.policy.challengeEnabled) {
+      challenges.appendChild(el("div", "note", "No challenge is configured, so a rule asking for one degrades to a tag. Set challenge.secrets to enable it."));
+    } else {
+      const funnel = [
+        ["Issued", n(metrics.challenges.issued)],
+        ["Solved", n(metrics.challenges.solved)],
+        ["Rejected", n(metrics.challenges.rejected)],
+        ["Solve rate", metrics.challenges.issued > 0 ? pct(metrics.challenges.solved, metrics.challenges.issued) : "\u2014"]
+      ];
+      for (const [key, value] of funnel) challenges.appendChild(statRow(key, value));
+    }
+    const health = $("stat-health");
+    clear(health);
+    const bypassed = metrics.bypassed.allowlist + metrics.bypassed["ignored-path"];
+    const rows = [
+      ["Requests assessed", n(metrics.requests)],
+      ["Bypassed \u2014 allowlist", n(metrics.bypassed.allowlist)],
+      ["Bypassed \u2014 ignored path", n(metrics.bypassed["ignored-path"])],
+      ["Detection ran on", pct(metrics.requests - bypassed, metrics.requests)],
+      ["Actors tracked", n(metrics.actorsTracked)],
+      ["Guard stops", n(metrics.downgrades)]
+    ];
+    const failures = pairs(metrics.detectorFailures);
+    for (const [detector, count] of failures) rows.push([`Detector failures \u2014 ${detector}`, n(count)]);
+    for (const [key, value] of rows) health.appendChild(statRow(key, value));
+    if (failures.length === 0) health.appendChild(el("div", "note", "No detector has thrown or timed out."));
+  }
+  const totals = aggregate(state.rows);
+  if (SECTIONS.actors) drawBars($("stat-identities"), totals.identities, "No client has named itself in this window.");
+  drawBars($("stat-paths"), totals.paths, "No traffic in this window.");
+  drawBars($("stat-denied-paths"), totals.deniedPaths, "Nothing has been denied in this window.");
+  drawBars($("stat-guard"), totals.guardStops, "No rule has asked for more than its evidence supports.");
+  drawBars($("stat-bypassed"), totals.bypassed, "Nothing bypassed detection.");
+  drawRuleHits(totals);
+  const list = $("stat-detector-list");
+  clear(list);
+  $("detector-count").textContent = `${snapshot.detectors.length} installed`;
+  for (const detector of snapshot.detectors) {
+    const row = el("div", "det");
+    const left = el("div");
+    left.appendChild(el("div", "mono", detector.id));
+    left.appendChild(el("div", "d", detector.description));
+    row.appendChild(left);
+    const fires = metrics?.detectorFirings[detector.id] ?? 0;
+    const timing = metrics?.detectorTimings[detector.id];
+    let right = `${n(fires)} \xB7 ${detector.cost} \xB7 ${detector.stage}`;
+    if (timing !== void 0 && timing.count > 0) right += ` \xB7 ${ms(timing.totalMs / timing.count)} avg`;
+    row.appendChild(el("div", "n", right));
+    list.appendChild(row);
+  }
+}
+function statRow(key, value) {
+  const line = el("div", "stat-row");
+  line.appendChild(el("span", "k", key));
+  line.appendChild(el("span", "v", value));
+  return line;
+}
+function drawRuleHits(totals) {
+  const target = $("stat-rule-hits");
+  clear(target);
+  const rules = state.snapshot?.rules ?? [];
+  if (rules.length === 0) {
+    target.appendChild(el("div", "note", "No rules configured."));
+    return;
+  }
+  let max = 1;
+  for (const rule of rules) max = Math.max(max, totals.ruleHits.get(rule) ?? 0);
+  for (const rule of rules) {
+    const value = totals.ruleHits.get(rule) ?? 0;
+    const bar = el("div", `bar${value === 0 ? " dead" : ""}`);
+    const track = el("div", "track");
+    if (value > 0) {
+      const fill = el("div", "fill");
+      fill.style.width = `${Math.max(2, Math.round(value / max * 100))}%`;
+      track.appendChild(fill);
+    }
+    track.appendChild(el("div", "lbl", rule));
+    bar.appendChild(track);
+    bar.appendChild(el("div", "v tnum", value === 0 ? "never" : n(value)));
+    target.appendChild(bar);
+  }
+}
+function drawAudit() {
+  const snapshot = state.snapshot;
+  if (snapshot === void 0) return;
+  const body = $("audit-body");
+  const checks = $("audit-checks");
+  clear(body);
+  clear(checks);
+  const audit = snapshot.audit;
+  if (audit === void 0) {
+    $("audit-spans").textContent = "";
+    body.appendChild(
+      el(
+        "div",
+        "note",
+        "The traffic audit is switched off on this handler (audit: false). It watches the shape of your traffic rather than any one request \u2014 a spike in automation, a collapse in human traffic, a policy suddenly denying far more than usual."
+      )
+    );
+    return;
+  }
+  const current = audit.window;
+  const baseline = audit.baseline;
+  $("audit-spans").textContent = `last ${rangeLabel(current.spanMs)} against the ${rangeLabel(baseline.spanMs)} before`;
+  const rows = [
+    ["Requests", n(current.requests), n(baseline.requests)],
+    ["Rate", `${current.rate.toFixed(1)}/min`, `${baseline.rate.toFixed(1)}/min`],
+    ["Bot share", `${Math.round(current.botShare * 100)}%`, `${Math.round(baseline.botShare * 100)}%`],
+    ["Bots", n(current.bots), n(baseline.bots)],
+    ["Humans", n(current.humans), n(baseline.humans)],
+    ["Denials", n(current.denials), n(baseline.denials)],
+    ["Challenges", n(current.challenges), n(baseline.challenges)],
+    ["Guard stops", n(current.downgrades), n(baseline.downgrades)],
+    ["Detector failures", n(current.failures), n(baseline.failures)],
+    ["Bypassed", n(current.bypassed), n(baseline.bypassed)]
+  ];
+  for (const [key, now, was] of rows) {
+    const line = el("div", "stat-row");
+    line.appendChild(el("span", "k", key));
+    const values = el("span", "v");
+    values.appendChild(el("b", null, now));
+    values.appendChild(el("span", "was", ` was ${was}`));
+    line.appendChild(values);
+    body.appendChild(line);
+  }
+  if (audit.checks.length === 0) {
+    checks.appendChild(el("div", "note", "No checks are installed, so nothing here will ever raise an anomaly."));
+    return;
+  }
+  for (const check of audit.checks) {
+    const row = el("div", "det");
+    const left = el("div");
+    left.appendChild(el("div", "mono", check.id));
+    left.appendChild(el("div", "d", check.description));
+    row.appendChild(left);
+    checks.appendChild(row);
+  }
+}
+function drawNoticeBadge() {
+  const notices = state.snapshot?.notices ?? [];
+  const badge = $("notice-badge");
+  badge.hidden = notices.length === 0 || !SECTIONS.notices;
+  badge.textContent = String(notices.length);
+}
+function drawNotices() {
+  const box = $("stat-notices");
+  const notices = state.snapshot?.notices ?? [];
+  clear(box);
+  $("notice-count").textContent = notices.length > 0 ? `${notices.length} total` : "";
+  if (notices.length === 0) {
+    box.appendChild(el("div", "note", "Nothing to report: no startup warnings, no detector errors."));
+    return;
+  }
+  for (const notice2 of notices.slice().reverse().slice(0, 40)) {
+    const row = el("div", `notice ${notice2.kind}`);
+    const when = el("div", "when");
+    when.appendChild(el("div", "tag", notice2.kind));
+    when.appendChild(el("div", null, clockTime(notice2.at)));
+    row.appendChild(when);
+    const body = el("div");
+    body.appendChild(el("div", null, notice2.message));
+    if (notice2.source !== void 0) body.appendChild(el("div", "ev-meta", notice2.source));
+    row.appendChild(body);
+    box.appendChild(row);
+  }
+}
+function drawChanges() {
+  if (!SECTIONS.changes) return;
+  const box = $("stat-changes");
+  const changes = state.snapshot?.changes ?? [];
+  clear(box);
+  $("change-count").textContent = changes.length > 0 ? `${changes.length} this run` : "";
+  if (changes.length === 0) {
+    box.appendChild(el("div", "note", "Nothing has been changed at runtime. Rules, guard and ranges are as the code that built this handler left them."));
+    return;
+  }
+  for (const change of changes.slice().reverse()) {
+    const row = el("div", "notice");
+    const when = el("div", "when");
+    when.appendChild(el("div", "tag", change.kind));
+    when.appendChild(el("div", null, clockTime(change.at)));
+    row.appendChild(when);
+    const body = el("div");
+    body.appendChild(el("div", null, change.summary));
+    body.appendChild(el("div", "ev-meta", change.by === void 0 || change.by === "" ? "by an unnamed viewer \u2014 this listener's auth carries no identity" : `by ${change.by}`));
+    row.appendChild(body);
+    box.appendChild(row);
+  }
+}
+function drawPeers() {
+  const box = $("peers");
+  if (BOOT.peers.length === 0) {
+    box.hidden = true;
+    return;
+  }
+  if (box.childElementCount > 0) return;
+  box.appendChild(el("span", "hint", "also:"));
+  for (const peer of BOOT.peers) {
+    const link = el("a", "linkbtn", peer.label);
+    link.href = peer.href;
+    link.rel = "noreferrer noopener";
+    box.appendChild(link);
+  }
+}
+var paintedSnapshot;
+var init_panels = __esm({
+  "src/dashboard/client/panels.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_store();
+    init_bars();
+    init_format();
+    init_outcome();
+  }
+});
+
+// src/dashboard/client/charts.ts
+function positionTip(tip, host, clientX, boxLeft) {
+  tip.style.opacity = "1";
+  tip.style.left = `${Math.min(host.clientWidth - 150, Math.max(4, clientX - boxLeft - 60))}px`;
+  tip.style.top = "14px";
+}
+function tipRow(label2, value, colour) {
+  const line = el("div", "r");
+  const left = el("em");
+  if (colour !== void 0) {
+    const swatch = el("span", "swatch");
+    swatch.style.background = colour;
+    left.appendChild(swatch);
+  }
+  left.appendChild(document.createTextNode(label2));
+  line.appendChild(left);
+  line.appendChild(el("b", null, value));
+  return line;
+}
+function timeline() {
+  const bucketMs = state.rangeMs / BUCKETS;
+  const now = Date.now();
+  const start2 = now - state.rangeMs;
+  const buckets = [];
+  for (let i = 0; i < BUCKETS; i++) buckets.push({ at: start2 + i * bucketMs, served: 0, mitigated: 0, denied: 0, total: 0 });
+  for (const { entry } of state.rows) {
+    const index = Math.floor((entry.at - start2) / bucketMs);
+    if (index < 0 || index >= BUCKETS) continue;
+    const bucket = buckets[index];
+    if (bucket === void 0) continue;
+    bucket.total++;
+    const out = outcome(entry);
+    if (out === "deny") bucket.denied++;
+    else if (out === "mitigate") bucket.mitigated++;
+    else bucket.served++;
+  }
+  return buckets;
+}
+function drawTraffic() {
+  const host = $("traffic-chart");
+  const svg = $("traffic");
+  const width = Math.max(320, host.clientWidth - 30);
+  const height = 190;
+  const padBottom = 26;
+  const markerRow = 8;
+  const plot = height - padBottom - markerRow;
+  const buckets = timeline();
+  const now = Date.now();
+  const start2 = now - state.rangeMs;
+  let peak = 1;
+  for (const bucket of buckets) if (bucket.total > peak) peak = bucket.total;
+  const max = Math.max(2, Math.ceil(peak / 2) * 2);
+  clear(svg);
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("height", String(height));
+  const s1 = css("--s1");
+  const s2 = css("--s2");
+  const crit = css("--crit");
+  const grid = css("--grid");
+  const muted = css("--muted");
+  const step = width / BUCKETS;
+  const barWidth = Math.max(2, step - 2);
+  for (const fraction of [0, 0.5, 1]) {
+    const y = markerRow + plot - fraction * plot;
+    svg.appendChild(svgEl("line", { class: "gridline", x1: 0, x2: width, y1: y, y2: y, stroke: grid, "stroke-width": 1 }));
+    if (fraction > 0) svg.appendChild(svgText({ x: 2, y: y - 3, fill: muted, "font-size": 10 }, Math.round(max * fraction)));
+  }
+  buckets.forEach((bucket, index) => {
+    const x = index * step + 1;
+    const servedHeight = bucket.served / max * plot;
+    const mitigatedHeight = bucket.mitigated / max * plot;
+    let y = markerRow + plot;
+    if (servedHeight > 0) {
+      y -= servedHeight;
+      svg.appendChild(svgEl("rect", { x, y, width: barWidth, height: servedHeight, fill: s1, rx: 2 }));
+    }
+    if (mitigatedHeight > 0) {
+      y -= mitigatedHeight + (servedHeight > 0 ? 2 : 0);
+      svg.appendChild(svgEl("rect", { x, y: Math.max(markerRow, y), width: barWidth, height: mitigatedHeight, fill: s2, rx: 2 }));
+    }
+    if (bucket.denied > 0) svg.appendChild(svgEl("rect", { x, y: 0, width: barWidth, height: 5, fill: crit, rx: 2 }));
+  });
+  svg.appendChild(svgEl("line", { x1: 0, x2: width, y1: markerRow + plot, y2: markerRow + plot, stroke: css("--line"), "stroke-width": 1 }));
+  const span = rangeLabel(state.rangeMs);
+  const labels = [
+    [0, `${span} ago`],
+    [BUCKETS / 2, rangeLabel(state.rangeMs / 2)],
+    [BUCKETS - 1, "now"]
+  ];
+  for (const [position, text] of labels) {
+    svg.appendChild(svgText({ x: Math.min(width - 26, Math.max(0, position * step)), y: height - 8, fill: muted, "font-size": 10 }, text));
+  }
+  const changes = (state.snapshot?.changes ?? []).filter((change) => change.at >= start2 && change.at <= now);
+  const markColour = css("--proven-text");
+  for (const change of changes) {
+    const x = (change.at - start2) / state.rangeMs * width;
+    svg.appendChild(svgEl("line", { x1: x, x2: x, y1: 0, y2: markerRow + plot, stroke: markColour, "stroke-width": 1.5, "stroke-dasharray": "3 2", opacity: 0.85 }));
+    const dot = svgEl("circle", { cx: x, cy: 3, r: 3, fill: markColour });
+    const title = svgEl("title");
+    title.textContent = `${new Date(change.at).toLocaleTimeString()} \xB7 ${change.kind}: ${change.summary}${change.by === void 0 ? "" : ` (by ${change.by})`}`;
+    dot.appendChild(title);
+    svg.appendChild(dot);
+  }
+  const hover = svgEl("rect", { x: 0, y: 0, width: 0, height: markerRow + plot, fill: css("--ink"), opacity: 0.06 });
+  svg.appendChild(hover);
+  const tip = $("traffic-tip");
+  host.onmousemove = (event) => {
+    const box = svg.getBoundingClientRect();
+    const index = Math.floor((event.clientX - box.left) / box.width * BUCKETS);
+    const bucket = buckets[index];
+    if (bucket === void 0) {
+      tip.style.opacity = "0";
+      hover.setAttribute("width", "0");
+      return;
+    }
+    hover.setAttribute("x", String(index * step));
+    hover.setAttribute("width", String(step));
+    clear(tip);
+    tip.appendChild(el("div", "t", `${new Date(bucket.at).toLocaleTimeString()} \xB7 ${Math.round(state.rangeMs / BUCKETS / 1e3)}s`));
+    tip.appendChild(tipRow("Served", n(bucket.served), s1));
+    tip.appendChild(tipRow("Mitigated", n(bucket.mitigated), s2));
+    tip.appendChild(tipRow("Denied", n(bucket.denied), crit));
+    positionTip(tip, host, event.clientX, box.left);
+  };
+  host.onmouseleave = () => {
+    tip.style.opacity = "0";
+    hover.setAttribute("width", "0");
+  };
+  const total = buckets.reduce((sum, bucket) => sum + bucket.total, 0);
+  $("traffic-window").textContent = `last ${rangeLabel(state.rangeMs)}`;
+  const served = buckets.reduce((sum, bucket) => sum + bucket.served, 0);
+  const mitigated = buckets.reduce((sum, bucket) => sum + bucket.mitigated, 0);
+  const denied = buckets.reduce((sum, bucket) => sum + bucket.denied, 0);
+  const busiest = buckets.reduce((best, bucket) => bucket.total > best.total ? bucket : best, buckets[0] ?? { at: now, total: 0, served: 0, mitigated: 0, denied: 0 });
+  $("traffic-alt").textContent = `Traffic over the last ${rangeLabel(state.rangeMs)}: ${n(total)} requests \u2014 ${n(served)} served, ${n(mitigated)} mitigated, ${n(denied)} denied. ` + (total === 0 ? "No traffic in this range." : `Busiest ${Math.round(state.rangeMs / BUCKETS / 1e3)}-second interval: ${n(busiest.total)} requests at ${new Date(busiest.at).toLocaleTimeString()}.`) + (changes.length === 0 ? "" : ` ${n(changes.length)} runtime change${changes.length === 1 ? "" : "s"} in this range: ${changes.map((change) => `${change.kind}, ${change.summary}`).join("; ")}.`);
+  const legend = $("traffic-legend");
+  clear(legend);
+  legend.appendChild(el("span", null, `${n(total)} requests in the last ${rangeLabel(state.rangeMs)} \xB7`));
+  const oldest = oldestAt();
+  if (oldest !== void 0 && Date.now() - oldest < state.rangeMs * 0.9) {
+    legend.appendChild(el("span", null, `window holds ${rangeLabel(Date.now() - oldest)} \xB7`));
+  }
+  for (const [label2, colour] of [
+    ["Served", s1],
+    ["Mitigated \u2014 challenged, limited or delayed", s2],
+    ["Denied", crit]
+  ]) {
+    const item = el("span");
+    const swatch = el("span", "swatch");
+    swatch.style.background = colour;
+    item.appendChild(swatch);
+    item.appendChild(document.createTextNode(label2));
+    legend.appendChild(item);
+  }
+  if (changes.length > 0) {
+    const item = el("span");
+    item.appendChild(el("span", "mark"));
+    item.appendChild(document.createTextNode(`${n(changes.length)} runtime change${changes.length === 1 ? "" : "s"} \u2014 hover a marker`));
+    legend.appendChild(item);
+  }
+}
+function differences(cumulative) {
+  const counts = [];
+  for (let i = 0; i < cumulative.length; i++) counts.push((cumulative[i] ?? 0) - (i > 0 ? cumulative[i - 1] ?? 0 : 0));
+  return counts;
+}
+function drawScores() {
+  const host = $("score-chart");
+  const svg = $("scores");
+  clear(svg);
+  const metrics = state.snapshot?.metrics;
+  const fromRun = state.scoreScope === "run" && metrics !== void 0;
+  let buckets;
+  let scored;
+  let proven;
+  if (fromRun && metrics !== void 0) {
+    buckets = differences(metrics.scores.buckets);
+    scored = metrics.scores.count;
+    proven = metrics.proven;
+  } else {
+    buckets = new Array(SCORE_BOUNDS).fill(0);
+    scored = 0;
+    proven = 0;
+    for (const { entry } of state.rows) {
+      if (entry.bypass !== void 0) continue;
+      if (entry.certain) {
+        proven++;
+        continue;
+      }
+      const index = Math.min(SCORE_BOUNDS - 1, Math.floor(entry.score / 10));
+      buckets[index] = (buckets[index] ?? 0) + 1;
+      scored++;
+    }
+  }
+  const width = Math.max(280, host.clientWidth - 30);
+  const height = 190;
+  const padBottom = 30;
+  const plot = height - padBottom;
+  let max = 1;
+  for (const value of buckets) if (value > max) max = value;
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("height", String(height));
+  const fill = css("--s1");
+  const muted = css("--muted");
+  const grid = css("--grid");
+  const crit = css("--crit");
+  svg.appendChild(svgEl("line", { class: "gridline", x1: 0, x2: width, y1: plot, y2: plot, stroke: grid, "stroke-width": 1 }));
+  const step = width / SCORE_BOUNDS;
+  buckets.forEach((value, index) => {
+    const barHeight = value / max * (plot - 8);
+    const barWidth = Math.max(2, Math.min(step - 6, 56));
+    if (barHeight > 0) {
+      svg.appendChild(svgEl("rect", { x: index * step + (step - barWidth) / 2, y: plot - barHeight, width: barWidth, height: barHeight, fill, rx: 3 }));
+    }
+    svg.appendChild(svgText({ x: index * step + 1, y: height - 14, fill: muted, "font-size": 9.5 }, index * 10));
+  });
+  const threshold = state.snapshot?.policy.suspectThreshold ?? 60;
+  const x = threshold / 100 * width;
+  svg.appendChild(svgEl("line", { x1: x, x2: x, y1: 0, y2: plot, stroke: crit, "stroke-width": 2, "stroke-dasharray": "4 3" }));
+  svg.appendChild(svgText({ x: Math.min(width - 92, x + 5), y: 11, fill: crit, "font-size": 10 }, `suspect at ${threshold}`));
+  svg.appendChild(svgText({ x: 0, y: height - 2, fill: muted, "font-size": 10 }, "score (probabilistic requests only)"));
+  const tip = $("score-tip");
+  host.onmousemove = (event) => {
+    const box = svg.getBoundingClientRect();
+    const index = Math.floor((event.clientX - box.left) / box.width * SCORE_BOUNDS);
+    const value = buckets[index];
+    if (value === void 0) {
+      tip.style.opacity = "0";
+      return;
+    }
+    clear(tip);
+    tip.appendChild(el("div", "t", `score ${index * 10}\u2013${index * 10 + 9}`));
+    tip.appendChild(tipRow("requests", n(value)));
+    tip.appendChild(tipRow("share", pct(value, scored)));
+    positionTip(tip, host, event.clientX, box.left);
+  };
+  host.onmouseleave = () => {
+    tip.style.opacity = "0";
+  };
+  let over = 0;
+  for (let bucket = 0; bucket < SCORE_BOUNDS; bucket++) if (bucket * 10 >= threshold) over += buckets[bucket] ?? 0;
+  const legend = $("score-legend");
+  clear(legend);
+  legend.appendChild(el("span", null, `${n(scored)} scored \xB7 ${n(over)} at or over the threshold \xB7 ${n(proven)} proven, which carry no score`));
+  $("score-alt").textContent = `Distribution of probabilistic scores ${fromRun ? "since start" : "in the retained window"}, with the suspect threshold at ${threshold}. ${n(scored)} scored requests, ${n(over)} at or over the threshold, ${n(proven)} proven and therefore unscored. ` + (scored === 0 ? "Nothing scored yet." : `By ten-point band: ${buckets.map((value, index) => `${index * 10}\u2013${index * 10 + 9}: ${n(value)}`).join(", ")}.`);
+  $("score-window").textContent = fromRun ? "since start" : windowLabel(state.rows.length, oldestAt(), Date.now());
+  if (state.scoreScope === "run" && metrics === void 0) {
+    legend.appendChild(el("span", null, "\xB7 counters are off on this handler, so this is the retained window"));
+  }
+}
+function drawLatency() {
+  const host = $("latency-chart");
+  const svg = $("latency");
+  clear(svg);
+  const metrics = state.snapshot?.metrics;
+  if (metrics === void 0 || metrics.duration.count === 0) {
+    $("latency-summary").textContent = "No assessments yet.";
+    $("latency-alt").textContent = "Assessment latency: no assessments yet.";
+    svg.setAttribute("viewBox", "0 0 100 40");
+    svg.setAttribute("height", "40");
+    svg.appendChild(svgText({ x: 0, y: 20, fill: css("--muted"), "font-size": 11 }, "No assessments yet."));
+    return;
+  }
+  const cumulative = metrics.duration.buckets;
+  const counts = differences(cumulative);
+  const width = Math.max(280, host.clientWidth - 30);
+  const height = 190;
+  const padBottom = 30;
+  const plot = height - padBottom;
+  let max = 1;
+  for (const value of counts) if (value > max) max = value;
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("height", String(height));
+  const fill = css("--s1");
+  const muted = css("--muted");
+  const grid = css("--grid");
+  svg.appendChild(svgEl("line", { class: "gridline", x1: 0, x2: width, y1: plot, y2: plot, stroke: grid, "stroke-width": 1 }));
+  const step = width / counts.length;
+  counts.forEach((value, index) => {
+    const barHeight = value / max * (plot - 6);
+    if (barHeight > 0) {
+      svg.appendChild(svgEl("rect", { x: index * step + 1, y: plot - barHeight, width: Math.max(2, step - 3), height: barHeight, fill, rx: 3 }));
+    }
+    if (index % 2 === 0) {
+      svg.appendChild(svgText({ x: index * step + 1, y: height - 14, fill: muted, "font-size": 9.5 }, index < LATENCY_BOUNDS.length ? String(LATENCY_BOUNDS[index]) : "more"));
+    }
+  });
+  svg.appendChild(svgText({ x: 0, y: height - 2, fill: muted, "font-size": 10 }, "milliseconds (upper bound of each bucket)"));
+  const tip = $("latency-tip");
+  host.onmousemove = (event) => {
+    const box = svg.getBoundingClientRect();
+    const index = Math.floor((event.clientX - box.left) / box.width * counts.length);
+    const value = counts[index];
+    if (value === void 0) {
+      tip.style.opacity = "0";
+      return;
+    }
+    clear(tip);
+    tip.appendChild(el("div", "t", index < LATENCY_BOUNDS.length ? `\u2264 ${LATENCY_BOUNDS[index]}ms` : "over 100ms"));
+    tip.appendChild(tipRow("requests", n(value)));
+    tip.appendChild(tipRow("share", pct(value, metrics.duration.count)));
+    positionTip(tip, host, event.clientX, box.left);
+  };
+  host.onmouseleave = () => {
+    tip.style.opacity = "0";
+  };
+  const mean = metrics.duration.totalMs / metrics.duration.count;
+  const p95 = percentile(cumulative, metrics.duration.count, 0.95);
+  $("latency-summary").textContent = `Time spent in detection, per request \xB7 mean ${ms(mean)} \xB7 p95 ${ms(p95)} \xB7 max ${ms(metrics.duration.maxMs)}`;
+  $("latency-alt").textContent = `Assessment latency since start over ${n(metrics.duration.count)} requests: mean ${ms(mean)}, 95th percentile ${ms(p95)}, maximum ${ms(metrics.duration.maxMs)}. By bucket: ${counts.map((value, index) => `${index < LATENCY_BOUNDS.length ? `up to ${LATENCY_BOUNDS[index]}ms` : "over 100ms"}: ${n(value)}`).join(", ")}.`;
+}
+function percentile(cumulative, count, fraction) {
+  const target = count * fraction;
+  const last = LATENCY_BOUNDS[LATENCY_BOUNDS.length - 1] ?? 100;
+  for (let i = 0; i < cumulative.length; i++) {
+    if ((cumulative[i] ?? 0) >= target) return i < LATENCY_BOUNDS.length ? LATENCY_BOUNDS[i] ?? last : last;
+  }
+  return last;
+}
+var BUCKETS, LATENCY_BOUNDS, SCORE_BOUNDS;
+var init_charts = __esm({
+  "src/dashboard/client/charts.ts"() {
+    "use strict";
+    init_dom();
+    init_format();
+    init_store();
+    init_outcome();
+    BUCKETS = 60;
+    LATENCY_BOUNDS = [0.05, 0.1, 0.25, 0.5, 1, 2.5, 5, 10, 25, 50, 100];
+    SCORE_BOUNDS = 10;
+  }
+});
+
+// src/dashboard/client/registry.ts
+async function loadActors() {
+  if (!SECTIONS.registry) return;
+  try {
+    const body = await getJson("/api/actors?limit=100");
+    state.actors = body.actors;
+    state.actorsTracked = body.tracked;
+    drawActors();
+  } catch {
+  }
+}
+function trackActors() {
+  if (timer !== void 0) clearInterval(timer);
+  timer = void 0;
+  if (state.tab !== "actors") return;
+  void loadActors();
+  timer = setInterval(() => {
+    if (state.tab !== "actors" || state.paused || isConfirming()) return;
+    void loadActors();
+  }, 4e3);
+}
+function drawActors() {
+  if (!SECTIONS.registry) return;
+  if (isConfirming()) return;
+  const body = byId("actor-rows");
+  clear(body);
+  const actors = state.actors;
+  $("actors-count").textContent = `${n(actors.length)} shown \xB7 ${n(state.actorsTracked)} tracked`;
+  byId("actors-empty").hidden = actors.length > 0;
+  for (const actor of actors) {
+    const row = el("tr");
+    row.appendChild(el("td", "who", actor.key));
+    row.appendChild(el("td", "num tnum", n(actor.requests)));
+    row.appendChild(el("td", "num tnum", n(actor.recentRate)));
+    row.appendChild(el("td", "num tnum", n(actor.distinctPaths)));
+    const cadence = el("td", "num tnum", actor.cadenceCv === void 0 ? "\u2014" : actor.cadenceCv.toFixed(2));
+    if (actor.cadenceCv !== void 0 && actor.cadenceCv < 0.15) cadence.className += " warn-text";
+    row.appendChild(cadence);
+    row.appendChild(el("td", "num tnum", n(actor.priorConfirmations)));
+    const unsolved = el("td", "num tnum", n(actor.unsolvedChallenges));
+    if (actor.unsolvedChallenges >= 3) unsolved.className += " warn-text";
+    row.appendChild(unsolved);
+    const stateCell = el("td");
+    const tags = [];
+    if (actor.cleared) tags.push("cleared as human");
+    if (actor.distinctUserAgents > 1) tags.push(`${actor.distinctUserAgents} User-Agents`);
+    tags.push(`first seen ${clockTime(actor.firstSeen)}`);
+    stateCell.appendChild(el("div", "tagline", tags.join(" \xB7 ")));
+    row.appendChild(stateCell);
+    const actions = el("td", "acts");
+    const inFeed = el("button", null, "In feed");
+    inFeed.title = "Show this actor's requests in the live feed";
+    inFeed.addEventListener("click", () => {
+      setSearch(`actor:${actor.key}`);
+      const search = byId("search");
+      search.value = state.search;
+      app.showTab("live");
+      app.syncUrl();
+    });
+    actions.appendChild(inFeed);
+    for (const button of actorActions(actor.key, () => void loadActors())) actions.appendChild(button);
+    row.appendChild(actions);
+    body.appendChild(row);
+  }
+}
+var timer;
+var init_registry = __esm({
+  "src/dashboard/client/registry.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_actions();
+    init_app();
+    init_format();
+    init_api();
+    init_store();
+  }
+});
+
+// src/dashboard/client/tester.ts
+function initTester() {
+  if (!SECTIONS.tester) return;
+  $("test-run").addEventListener("click", () => void run());
+  byId("test-input").addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      void run();
+    }
+  });
+}
+async function run() {
+  const raw2 = byId("test-input").value;
+  if (raw2.trim() === "") {
+    toast("warn", "Nothing to assess", "Paste a User-Agent, a curl command, or a header block.");
+    return;
+  }
+  const result = await postJson("/api/test", {
+    raw: raw2,
+    ip: byId("test-ip").value.trim(),
+    url: byId("test-url").value.trim()
+  });
+  const box = $("test-result");
+  box.hidden = false;
+  clear(box);
+  if (!result.ok) {
+    box.className = "result bad";
+    box.appendChild(el("div", null, result.error ?? "The server could not read that."));
+    return;
+  }
+  const { entry, reason, assumed } = result.data;
+  const out = outcome(entry);
+  box.className = `result ${out === "deny" ? "bad" : out === "mitigate" ? "warn" : "ok"}`;
+  const head = el("div");
+  const [badgeClass, badgeLabel] = verdictBadge(entry);
+  head.appendChild(el("span", `badge ${badgeClass}`, badgeLabel));
+  head.appendChild(document.createTextNode(" "));
+  head.appendChild(el("b", null, entry.action ?? "no decision"));
+  if (entry.rule !== void 0) head.appendChild(el("span", "ev-meta", ` via ${entry.rule}`));
+  box.appendChild(head);
+  box.appendChild(el("div", "ev-meta", `${entry.certain ? "proven" : `score ${entry.score}`} \xB7 assessed in ${ms(entry.durationMs)}`));
+  if (entry.downgradedFrom !== void 0) {
+    box.appendChild(el("div", "guard", `The guard stopped ${entry.downgradedFrom} here.`));
+    if (entry.downgradeReason !== void 0) box.appendChild(el("div", "basis", entry.downgradeReason));
+  }
+  if (entry.evidence.length === 0) {
+    box.appendChild(el("div", "ev-meta", entry.bypass !== void 0 ? `Detection was skipped: ${entry.bypass}.` : "No detector produced any evidence."));
+  } else {
+    const list = el("div", "ev");
+    for (const item of entry.evidence) {
+      const row = el("div", `ev-item${item.direction === "human" ? " human" : ""}`);
+      row.appendChild(el("div", `tier t-${item.certainty}`, item.certainty));
+      const detail = el("div");
+      detail.appendChild(el("div", null, item.summary));
+      detail.appendChild(el("div", "ev-meta", `${item.detector} \xB7 points to ${item.direction}`));
+      if (item.deterministicBasis !== void 0) detail.appendChild(el("div", "basis", item.deterministicBasis));
+      row.appendChild(detail);
+      list.appendChild(row);
+    }
+    box.appendChild(list);
+  }
+  box.appendChild(el("div", "ev-meta", reason));
+  const notes = [...assumed, "no history: this is assessed as a first request, so cadence and crawl breadth have nothing to read"];
+  box.appendChild(el("div", "assumed", `Assumed \u2014 ${notes.join("; ")}.`));
+}
+var init_tester = __esm({
+  "src/dashboard/client/tester.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_format();
+    init_outcome();
+    init_api();
+    init_app();
+  }
+});
+
+// src/dashboard/client/index.ts
+var client_exports = {};
+function tabIndexOf(name) {
+  const at = available.findIndex(([, tab]) => tab === name);
+  return at === -1 ? 0 : at;
+}
+function isTab(value) {
+  return available.some(([, name]) => name === value);
+}
+function initSkipLink() {
+  if (!isEmbedded()) return;
+  const skip = rootNode().querySelector("a.skip");
+  if (skip === null) return;
+  skip.addEventListener("click", (event) => {
+    event.preventDefault();
+    const target = rootNode().querySelector(`#view-${state.tab}`) ?? rootNode().querySelector("#view-live");
+    if (target === null) return;
+    target.tabIndex = -1;
+    target.focus();
+    target.scrollIntoView({ block: "start" });
+  });
+}
+function initHeader() {
+  const box = $("links");
+  for (const link of BOOT.links) {
+    const anchor = el("a", "linkbtn", link.label);
+    anchor.href = link.href;
+    anchor.rel = "noreferrer noopener";
+    box.appendChild(anchor);
+  }
+  let stored = null;
+  try {
+    stored = localStorage.getItem("bothandler-dashboard-theme");
+  } catch {
+    stored = null;
+  }
+  if (stored === "dark" || stored === "light") themeElement().setAttribute("data-theme", stored);
+  $("theme").addEventListener("click", () => {
+    let current = themeElement().getAttribute("data-theme");
+    if (current === null) current = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const next = current === "dark" ? "light" : "dark";
+    themeElement().setAttribute("data-theme", next);
+    try {
+      localStorage.setItem("bothandler-dashboard-theme", next);
+    } catch {
+    }
+    drawNow();
+  });
+  const pause = byId("pause");
+  pause.hidden = !SECTIONS.feed;
+  pause.addEventListener("click", () => {
+    state.paused = !state.paused;
+    pause.setAttribute("aria-pressed", String(state.paused));
+    pause.textContent = state.paused ? `Resume${state.bufferedWhilePaused > 0 ? ` (${state.bufferedWhilePaused})` : ""}` : "Pause";
+    if (!state.paused) {
+      state.bufferedWhilePaused = 0;
+      drawNow();
+    }
+  });
+  if (BOOT.allowReset) {
+    const reset = byId("reset");
+    reset.hidden = false;
+    reset.addEventListener("click", () => {
+      reset.disabled = true;
+      void fetch(`${API}/api/reset`, { method: "POST", headers: { "content-type": "application/json" }, body: "{}" }).then(async (response) => {
+        if (!response.ok) {
+          const body = await response.json().catch(() => ({}));
+          toast("bad", "Reset refused", body.error ?? String(response.status));
+          return;
+        }
+        clearFeed();
+        resetFeedCache();
+        drawNow();
+      }).catch(() => {
+      }).finally(() => {
+        reset.disabled = false;
+      });
+    });
+  }
+  const header = rootNode().querySelector("header");
+  if (header !== null) {
+    const apply = () => {
+      themeElement().style.setProperty("--header-h", `${header.getBoundingClientRect().height}px`);
+    };
+    apply();
+    if (typeof ResizeObserver === "function") new ResizeObserver(apply).observe(header);
+    else addEventListener("resize", apply);
+  }
+}
+function syncUrl(replace = true) {
+  if (isEmbedded()) return;
+  const params = new URLSearchParams();
+  if (state.filter !== "all") params.set("f", state.filter);
+  if (state.search !== "") params.set("q", state.search);
+  const query = params.toString();
+  const hash = `#${state.tab}${query === "" ? "" : `?${query}`}`;
+  if (location.hash === hash) return;
+  history[replace ? "replaceState" : "pushState"]({ tab: state.tab }, "", hash);
+}
+function readUrl() {
+  const raw2 = isEmbedded() ? "" : location.hash.slice(1);
+  const split = raw2.indexOf("?");
+  const name = split === -1 ? raw2 : raw2.slice(0, split);
+  const params = new URLSearchParams(split === -1 ? "" : raw2.slice(split + 1));
+  const filter = params.get("f") ?? "all";
+  return {
+    tab: isTab(name) ? name : FIRST,
+    filter,
+    search: params.get("q") ?? ""
+  };
+}
+function showTab(name, options = {}) {
+  const target = isTab(name) ? name : FIRST;
+  state.tab = target;
+  for (const [id, tab, enabled] of TABS) {
+    const selected = tab === target;
+    const node = $(id);
+    node.hidden = !enabled;
+    node.setAttribute("aria-selected", String(selected));
+    node.tabIndex = selected ? 0 : -1;
+    $(`view-${tab}`).hidden = !selected || !enabled;
+  }
+  if (options.focus === true) $(available[tabIndexOf(target)]?.[0] ?? "tab-live").focus();
+  if (target === "policy" && state.policy === void 0) {
+    void loadPolicy();
+    void loadRanges();
+  }
+  trackActors();
+  if (options.push !== false) syncUrl(options.replace !== false);
+  drawNow();
+}
+function initTabs() {
+  available.forEach(([id, name], index) => {
+    const tab = $(id);
+    tab.addEventListener("click", () => showTab(name, { replace: false }));
+    tab.addEventListener("keydown", (event) => {
+      let next = -1;
+      if (event.key === "ArrowRight") next = (index + 1) % available.length;
+      else if (event.key === "ArrowLeft") next = (index - 1 + available.length) % available.length;
+      else if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = available.length - 1;
+      if (next === -1) return;
+      event.preventDefault();
+      showTab(available[next]?.[1] ?? FIRST, { focus: true, replace: false });
+    });
+  });
+  if (isEmbedded()) return;
+  addEventListener("popstate", () => {
+    const url = readUrl();
+    state.filter = url.filter;
+    setSearch(url.search);
+    reflectFilterButtons();
+    showTab(url.tab, { push: false });
+  });
+}
+function initKeyboard() {
+  eventTarget().addEventListener("keydown", ((event) => {
+    const target = event.target;
+    const typing = target !== null && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT");
+    if (event.key === "Escape") {
+      if (typing && target?.id === "search" && target.value !== "") {
+        target.value = "";
+        setSearch("");
+        syncUrl();
+        drawNow();
+        return;
+      }
+      if (typing) {
+        target?.blur();
+        return;
+      }
+      if (state.actor !== void 0) {
+        state.actor = void 0;
+        drawNow();
+        return;
+      }
+      if (state.open.size > 0) {
+        state.open.clear();
+        drawNow();
+      }
+      return;
+    }
+    if (typing || event.metaKey || event.ctrlKey || event.altKey) return;
+    if (event.key === "/" && SECTIONS.feed) {
+      event.preventDefault();
+      showTab("live");
+      const search = byId("search");
+      search.focus();
+      search.select();
+      return;
+    }
+    const digit = ["1", "2", "3", "4"].indexOf(event.key);
+    if (digit !== -1 && digit < available.length) {
+      event.preventDefault();
+      showTab(available[digit]?.[1] ?? FIRST, { focus: true, replace: false });
+    }
+  }));
+}
+function initRanges() {
+  const ranges = [
+    ["1m", 6e4],
+    ["5m", 3e5],
+    ["15m", 9e5],
+    ["1h", 36e5]
+  ];
+  const host = $("traffic-range");
+  for (const [label2, value] of ranges) {
+    const button = el("button", null, label2);
+    button.setAttribute("aria-pressed", String(value === state.rangeMs));
+    button.addEventListener("click", () => {
+      state.rangeMs = value;
+      for (const other of Array.from(host.children)) other.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-pressed", "true");
+      drawTraffic();
+    });
+    host.appendChild(button);
+  }
+  const scopes = [
+    ["since start", "run"],
+    ["this window", "window"]
+  ];
+  const scopeHost = $("score-scope");
+  for (const [label2, value] of scopes) {
+    const button = el("button", null, label2);
+    button.setAttribute("aria-pressed", String(value === state.scoreScope));
+    button.addEventListener("click", () => {
+      state.scoreScope = value;
+      for (const other of Array.from(scopeHost.children)) other.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-pressed", "true");
+      drawScores();
+    });
+    scopeHost.appendChild(button);
+  }
+}
+function schedule() {
+  if (state.paused || pending) return;
+  pending = true;
+  requestAnimationFrame(() => {
+    pending = false;
+    draw();
+  });
+}
+function draw() {
+  drawChips();
+  drawTiles();
+  drawNoticeBadge();
+  updateWindowLabels();
+  if (state.tab === "live") {
+    drawActor();
+    drawFeed();
+    drawLivePanels();
+  } else if (state.tab === "actors") {
+    drawActors();
+  } else if (state.tab === "stats") {
+    drawTraffic();
+    drawLatency();
+    drawScores();
+    drawStatsPanels();
+    if (SECTIONS.audit) drawAudit();
+  } else {
+    drawPolicyTab();
+    if (SECTIONS.notices) drawNotices();
+    if (SECTIONS.changes) drawChanges();
+  }
+}
+function drawNow() {
+  draw();
+}
+function applySections() {
+  const gated = [
+    ["tiles", SECTIONS.statistics],
+    ["tester-panel", SECTIONS.tester],
+    ["ranges-panel", SECTIONS.ranges],
+    ["changes-panel", SECTIONS.changes],
+    ["actor-panel", SECTIONS.actors],
+    ["live-actors-panel", SECTIONS.actors],
+    ["audit-panel", SECTIONS.audit],
+    ["audit-checks-panel", SECTIONS.audit],
+    ["notices-panel", SECTIONS.notices],
+    ["guard-panel", SECTIONS.guard],
+    ["robots-panel", SECTIONS.robots],
+    ["identities-panel", SECTIONS.actors],
+    ["evidence-legend", SECTIONS.evidence]
+  ];
+  for (const [id, enabled] of gated) {
+    const node = rootNode().querySelector(`#${id}`);
+    if (node !== null && !enabled) node.remove();
+  }
+}
+function start() {
+  app.draw = schedule;
+  app.drawNow = drawNow;
+  app.showTab = showTab;
+  app.syncUrl = () => syncUrl();
+  applySections();
+  initHeader();
+  drawPeers();
+  initTabs();
+  initSkipLink();
+  initKeyboard();
+  initRanges();
+  if (SECTIONS.feed) initFeed();
+  initActor();
+  initTester();
+  initPolicy();
+  let resizeTimer;
+  addEventListener("resize", () => {
+    if (resizeTimer !== void 0) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      if (state.tab === "stats") {
+        drawTraffic();
+        drawLatency();
+        drawScores();
+      }
+    }, 120);
+  });
+  const url = readUrl();
+  state.filter = url.filter;
+  setSearch(url.search);
+  if (SECTIONS.feed) reflectFilterButtons();
+  showTab(url.tab, { replace: true });
+  void loadInitialSnapshot();
+  connectStream();
+}
+var TABS, available, FIRST, pending;
+var init_client = __esm({
+  "src/dashboard/client/index.ts"() {
+    "use strict";
+    init_dom();
+    init_boot();
+    init_app();
+    init_store();
+    init_actor();
+    init_stream();
+    init_panels();
+    init_feed();
+    init_charts();
+    init_registry();
+    init_policy();
+    init_ranges();
+    init_tester();
+    TABS = [
+      ["tab-live", "live", SECTIONS.feed],
+      ["tab-actors", "actors", SECTIONS.registry],
+      ["tab-stats", "stats", SECTIONS.statistics],
+      ["tab-policy", "policy", SECTIONS.policy]
+    ];
+    available = TABS.filter(([, , enabled]) => enabled);
+    FIRST = available[0]?.[1] ?? "live";
+    pending = false;
+    start();
+  }
+});
+
+// src/element/index.ts
+init_css();
+
+// src/element/config.ts
+var TAB_SECTION = {
+  live: "feed",
+  actors: "registry",
+  stats: "statistics",
+  policy: "policy"
+};
+function invert(hide) {
+  const out = {};
+  for (const [key, value] of Object.entries(hide)) if (value === true) out[key] = false;
+  return out;
+}
+function resolveSections(fromServer, config) {
+  const sections = { ...fromServer };
+  const warnings = [];
+  for (const key of Object.keys(config.hide ?? {})) {
+    if (Object.hasOwn(sections, key)) continue;
+    const suggestion = TAB_SECTION[key];
+    warnings.push(
+      suggestion === void 0 ? `hide.${key} is not a section this dashboard has, so it did nothing. It has: ${Object.keys(sections).sort().join(", ")}.` : `hide.${key} did nothing \u2014 "${key}" is a tab name, and \`hide\` takes section names. You want hide.${suggestion}, or leave "${key}" out of \`tabs\`.`
+    );
+  }
+  for (const [key, value] of Object.entries(invert(config.hide ?? {}))) sections[key] = value;
+  const wanted = config.tabs;
+  if (wanted !== void 0 && wanted.length > 0) {
+    const keep = new Set(wanted.map((tab) => tab.id));
+    for (const id of keep) {
+      if (TAB_SECTION[id] === void 0) {
+        warnings.push(`tabs lists "${id}", which is not a screen. The screens are: ${Object.keys(TAB_SECTION).join(", ")}.`);
+        continue;
+      }
+      if (fromServer[TAB_SECTION[id]] === false && config.hide?.[TAB_SECTION[id]] !== true) {
+        warnings.push(
+          `tabs lists "${id}", but this dashboard's server has the "${TAB_SECTION[id]}" section switched off, so that screen does not exist. That is the \`sections\` option on createDashboardHandler, and it is enforced there rather than here.`
+        );
+      }
+    }
+    for (const id of Object.keys(TAB_SECTION)) {
+      if (!keep.has(id)) sections[TAB_SECTION[id]] = false;
+    }
+  }
+  return { sections, warnings };
+}
+function parseMount(raw2) {
+  const cut = raw2.search(/[?#]/);
+  if (cut === -1) return { base: raw2.replace(/\/$/, "") };
+  return {
+    base: raw2.slice(0, cut).replace(/\/$/, ""),
+    warning: `src "${raw2}" has a ${raw2[cut] === "?" ? "query string" : "fragment"} on it. The element asks for \`<src>/api/bootstrap\`, so only the path can mean anything here; the rest was ignored.`
+  };
+}
+function explainStatus(status, base) {
+  if (status === 401) {
+    return `it answered 401 Unauthorized. The dashboard has \`auth\` set, and the element fetches in the background, where a browser cannot offer the sign-in prompt it would show for a normal navigation. Open ${base || "the dashboard"} directly and sign in once \u2014 the browser then sends those credentials with the element's requests too \u2014 or put this page behind the same authentication.`;
+  }
+  if (status === 403) {
+    return `it answered 403 Forbidden, which is this dashboard refusing the caller rather than the password: check \`allowedHosts\` and \`allowedClients\`, and that this page is on the same origin as \`src\`.`;
+  }
+  return `it answered ${status}`;
+}
+function shapeOf(config) {
+  const tabs = (config.tabs ?? []).map((tab) => tab.id).join(",");
+  const panels = (config.panels ?? []).map((panel) => `${panel.id}@${panel.screen}:${panel.title}`).join(",");
+  return `${tabs}|${panels}`;
+}
+function cellText(value) {
+  if (typeof value === "string") return value.slice(0, 200);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (value === null || value === void 0) return "";
+  try {
+    return JSON.stringify(value)?.slice(0, 200) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+// src/dashboard/page.ts
+var DASHBOARD_CSS = String.raw`/* ---------------------------------------------------------------------------
+   Tokens.
+
+   The two series colours and the critical status step are the validated data
+   palette: blue and orange clear every colour-vision gate against both surfaces as
+   an adjacent pair, and every chart that uses them also carries a legend and a
+   label, so hue is never the only thing distinguishing anything. Text never wears a
+   series colour — the ink tokens below are all at least 4.5:1 on their surface.
+--------------------------------------------------------------------------- */
+:root, :host {
+  color-scheme: light;
+  --page: #f4f5f7;
+  --surface: #ffffff;
+  --surface-2: #fafafa;
+  --raised: #ffffff;
+  --line: #e4e6ea;
+  --line-soft: #eef0f3;
+  --ink: #0b0d12;
+  --ink-2: #3c414b;
+  --muted: #5f646e;
+  --s1: #2a78d6;
+  --s2: #eb6834;
+  --crit: #d03b3b;
+  /* The series blue carries white text at about 3.9:1, which is under the 4.5 floor —
+     fine for a bar, not for a label. Solid buttons get a darker blue of their own
+     rather than a lighter series colour, because the series colour is validated for
+     charts and moving it would move every chart with it. */
+  --accent-solid: #1b5fb0;
+  --good-text: #006300;
+  /* Darker than it looks like it needs to be, and measured rather than judged. This ink
+     appears on a 16%-amber chip, and that chip can sit on the open row's blue tint —
+     three layers, each lightening the background under the same text. At #8a5a00 the
+     suspected badge measured 3.52:1 there, under the 4.5 floor for 11px bold. */
+  --warn-text: #6d4700;
+  --crit-text: #b02525;
+  --info-text: #1c5cab;
+  --proven-text: #5b34a8;
+  --grid: #eceef1;
+  --shadow: 0 1px 2px rgba(11,13,18,.06), 0 1px 8px rgba(11,13,18,.04);
+  --focus: #2a78d6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]), :host(:not([data-theme="light"])) {
+    color-scheme: dark;
+    --page: #0d0f12;
+    --surface: #16181d;
+    --surface-2: #1b1e24;
+    --raised: #1f232a;
+    --line: #272b33;
+    --line-soft: #202329;
+    --ink: #f2f4f7;
+    --ink-2: #c4cad3;
+    --muted: #8b929c;
+    --s1: #3987e5;
+    --s2: #d95926;
+    --crit: #d03b3b;
+    --accent-solid: #2364b4;
+    --good-text: #4ec97a;
+    --warn-text: #fab219;
+    --crit-text: #ff8078;
+    --info-text: #86b6ef;
+    --proven-text: #b3a4f5;
+    --grid: #23272e;
+    --shadow: none;
+    --focus: #86b6ef;
+  }
+}
+:root[data-theme="dark"], :host([data-theme="dark"]) {
+  color-scheme: dark;
+  --page: #0d0f12;
+  --surface: #16181d;
+  --surface-2: #1b1e24;
+  --raised: #1f232a;
+  --line: #272b33;
+  --line-soft: #202329;
+  --ink: #f2f4f7;
+  --ink-2: #c4cad3;
+  --muted: #8b929c;
+  --s1: #3987e5;
+  --s2: #d95926;
+  --crit: #d03b3b;
+  --accent-solid: #2364b4;
+  --good-text: #4ec97a;
+  --warn-text: #fab219;
+  --crit-text: #ff8078;
+  --info-text: #86b6ef;
+  --proven-text: #b3a4f5;
+  --grid: #23272e;
+  --shadow: none;
+  --focus: #86b6ef;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0; background: var(--page); color: var(--ink);
+  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.tnum { font-variant-numeric: tabular-nums; }
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
+
+/* --- header -------------------------------------------------------------
+   Two rows, and the split is the whole idea.
+
+   The first carries identity, connection state and the controls — everything you
+   can *press*. The second carries the tab strip and, at the far end, the handful of
+   configuration facts that used to sit up top wearing the same bordered pill as the
+   buttons beside them. Ten identical rounded rectangles in a row, five of which did
+   nothing when clicked, is not a toolbar; it is a guessing game. The facts are now
+   plain text — the one treatment nothing else on the page uses for a control — and
+   they fill the tab strip's empty right-hand side rather than needing room of their
+   own.
+
+   Nothing here has a fixed height. The old row was pinned to 54px with children that
+   refused to shrink, so on a narrow window the title and the live indicator drew on
+   top of each other rather than wrapping.
+------------------------------------------------------------------------- */
+header {
+  position: sticky; top: 0; z-index: 20;
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  backdrop-filter: saturate(180%) blur(8px);
+  border-bottom: 1px solid var(--line);
+  padding: 0 20px;
+}
+.head-row { display: flex; align-items: center; gap: 10px 14px; min-height: 54px; flex-wrap: wrap; padding: 7px 0; }
+.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+/* A real top-level heading, because the page had none: a screen reader's "jump to the
+   heading" found nothing to jump to. Styled back down to the size it always was — it is
+   a name in a toolbar, not a title on a poster. */
+.brand h1 { font-size: 15px; font-weight: 640; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
+.brand span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
+
+/* Status, not a control: a filled pill with no border, so it never reads as pressable. */
+.live {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2);
+  white-space: nowrap; background: color-mix(in srgb, var(--ink) 5%, transparent);
+  border-radius: 999px; padding: 3px 10px 3px 8px; font-weight: 520;
+}
+.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
+.dot.on { background: var(--good-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good-text) 22%, transparent); }
+.dot.off { background: var(--crit-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit-text) 20%, transparent); }
+.grow { flex: 1 1 auto; min-width: 8px; }
+
+.head-links { display: flex; gap: 6px; flex-wrap: wrap; }
+/* A hairline between "somewhere else" and "do something here". */
+.head-actions { display: flex; gap: 6px; align-items: center; }
+.head-links:not(:empty) + .head-actions { padding-left: 12px; border-left: 1px solid var(--line); }
+
+.nav-row { display: flex; align-items: flex-end; gap: 20px; }
+.facts {
+  display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto;
+  font-size: 11.5px; color: var(--muted); padding-bottom: 9px; min-width: 0;
+}
+.facts span { white-space: nowrap; }
+/* Sibling instances. A dashboard reports on one process, and this is the honest amount
+   of help the page can give with that: a way to reach the others. */
+.peers { display: flex; gap: 6px; align-items: center; padding-bottom: 7px; flex-wrap: wrap; }
+.peers a { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
+@media (max-width: 900px) { .peers { display: none; } }
+.facts b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
+
+/* Secondary by definition, so it is the first thing to go when room runs out. */
+@media (max-width: 900px) { .facts { display: none; } }
+@media (max-width: 560px) { .brand span { display: none; } }
+button, .linkbtn {
+  font: inherit; font-size: 12.5px; line-height: 1.4; padding: 6px 11px; border-radius: 8px;
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
+  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
+}
+button:hover, .linkbtn:hover { background: var(--surface-2); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
+button[aria-pressed="true"] { background: color-mix(in srgb, var(--s1) 12%, var(--surface)); border-color: color-mix(in srgb, var(--s1) 45%, var(--line)); color: var(--ink); }
+button[disabled] { opacity: .5; cursor: default; }
+
+.tabs { display: flex; gap: 2px; margin-bottom: -1px; flex: none; }
+.tab {
+  border: 0; background: none; border-bottom: 2px solid transparent; border-radius: 0;
+  padding: 9px 12px; font-size: 13px; color: var(--muted); font-weight: 500;
+}
+.tab:hover { background: none; color: var(--ink); }
+.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--s1); }
+
+/* --- layout ------------------------------------------------------------- */
+main { padding: 18px 20px 64px; max-width: 1680px; margin: 0 auto; }
+.stack { display: grid; gap: 16px; }
+.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
+.tile {
+  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
+  padding: 12px 14px 13px; box-shadow: var(--shadow);
+}
+.tile .v { font-size: 26px; font-weight: 620; letter-spacing: -.025em; line-height: 1.1; }
+.tile .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .055em; margin-top: 4px; font-weight: 560; }
+.tile .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
+.tile.good .v { color: var(--good-text); }
+.tile.warn .v { color: var(--warn-text); }
+.tile.crit .v { color: var(--crit-text); }
+.tile.proven .v { color: var(--proven-text); }
+
+/* "clip" rather than "hidden", and the difference is load-bearing. Both round off the
+   corners, but "hidden" makes the panel a scroll container — which becomes the
+   containing block for anything sticky inside it, so the feed's column headers were
+   anchored to a box that never scrolls and simply never stuck. They have not worked
+   since they were written; the hard-coded offset above them was dead code. "clip"
+   clips without creating a scrollport, so the headers stick to the viewport, under
+   the page header, where they were always meant to. */
+.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: clip; }
+.panel > h2 {
+  margin: 0; padding: 12px 15px; font-size: 12px; font-weight: 620; color: var(--muted);
+  text-transform: uppercase; letter-spacing: .055em; border-bottom: 1px solid var(--line);
+  display: flex; align-items: center; gap: 10px;
+}
+.panel > h2 .sub { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11.5px; margin-left: auto; }
+/* A container, so the two-column grid below can ask how much room it actually has.
+
+   It used to ask the viewport, which is the same mistake the feed table's breakpoints
+   made one level down: the constraint is the width of this column, not of the window.
+   Embedded in a 320px sidebar on a 1280px screen the media query never fired, the second
+   column held its 280px minimum, and the feed was squeezed to twenty-two pixels. */
+.stack { container: dash / inline-size; }
+.two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); align-items: start; }
+.grid3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+@container dash (max-width: 1080px) { .two { grid-template-columns: minmax(0, 1fr); } }
+
+/* The feed table has a floor — six columns of request text will not go below about
+   940px — and under it the panel was simply amputating the right-hand columns.
+
+   These are **container** queries, not media queries, and the difference is the whole
+   fix. What the table has to fit inside is the panel, and the panel is one column of a
+   two-column grid: at a 1400px viewport it is about 880px wide, so a viewport-based
+   breakpoint at 980px never fires and the right-hand columns are clipped on a perfectly
+   ordinary desktop. That is exactly the bug a media query was written to fix, and the
+   media query was measuring the wrong box the whole time. It only appeared to work
+   because five columns happened to fit.
+
+   Four things happen on the way down, in the order that costs least. First the
+   duration goes: it is the column people narrow a window least to read and it is still
+   in the row detail. Then the timestamp, which is also still in the row detail and is
+   implied by the order while the stream is live. Then the User-Agent line stops
+   ellipsing and wraps, which is what actually buys the room — it takes the table's floor
+   from about 100ch to about 56ch, because the cap on that one line is most of what the
+   table cannot go below. Only under *that* does the table get a scrollbar of its own.
+
+   The scrollbar is deliberately last and deliberately rare, and it is worth being
+   precise about why, because it is the rung that gets set too high. A scroll container
+   is the containing block for anything sticky inside it, so the moment it turns on the
+   column headers stop tracking the viewport — and a row becomes wider than the box it
+   sits in, which is enough to make it hard to click and, for a keyboard or a pointer
+   being driven by a test, hard to reach at all. It cost both when it fired at 1440px on
+   a wider face: the headers scrolled away with the rows and a click on a row never
+   landed. Wrapping costs a line of height and nothing else, so it goes first and this
+   goes last.
+
+   The thresholds are in **ch**, and that is the second half of the same lesson. They
+   used to be pixels, which quietly assumed a font: what six columns of request text
+   actually need is set by the width of a glyph — the User-Agent below is capped in ch —
+   and a hard pixel breakpoint is only correct for the font it was measured on. On this
+   machine the six columns needed 951px and the breakpoint sat at 960px, so it passed by
+   nine pixels; on a CI runner with a wider default face the same six columns needed more
+   than the panel had, the query did not fire, and the right-hand columns were clipped on
+   an ordinary 1600px desktop. The five-column rung was already over its own floor by
+   8px and nobody had noticed, because nothing measures a layout that merely looks fine.
+
+   In ch, both sides move together: a wider face makes the content wider and makes the
+   threshold wider by the same proportion. The floors, measured, are 119ch / 111ch /
+   100ch ellipsing and 56ch wrapped, and each rung sits above its own floor with room to
+   spare so that the arithmetic does not have to be exact. */
+.feed-panel { container: feed / inline-size; }
+
+/* The rungs themselves are further down, immediately after the table's own rules, and
+   they have to be: a container query adds no specificity, so an override written above
+   the declaration it overrides simply loses on source order and does nothing. The wrap
+   rung sat here for exactly that reason and was dead the whole time — the table never
+   wrapped, its floor never dropped, and nothing said so. See "the column ladder" below. */
+
+/* The header's own subtitle, which is a viewport thing rather than a panel thing: it
+   sits in the page header and has no container to be measured against. */
+@media (max-width: 700px) {
+  .sub { white-space: normal; max-width: none; }
+}
+
+/* --- feed table --------------------------------------------------------- */
+.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 15px; border-bottom: 1px solid var(--line); }
+.filters { display: flex; gap: 5px; flex-wrap: wrap; }
+.filters button { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
+input[type="search"] {
+  font: inherit; font-size: 12.5px; padding: 5px 10px; min-width: 180px; flex: 1 1 180px;
+  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink);
+}
+input[type="search"]::placeholder { color: var(--muted); }
+
+table { width: 100%; border-collapse: collapse; }
+thead th {
+  /* Measured at runtime — see trackHeaderHeight(). The literal is the fallback for
+     the instant before the first measurement, and for the tab strip wrapping. */
+  position: sticky; top: var(--header-h, 91px); z-index: 2; background: var(--surface);
+  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
+  text-transform: uppercase; letter-spacing: .05em; padding: 9px 15px; border-bottom: 1px solid var(--line);
+}
+tbody td { padding: 9px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
+/* Narrow, quiet, and never the reason a row wraps: the time is for scanning down, not
+   for reading across. */
+tbody td.when { color: var(--muted); font-size: 11.5px; white-space: nowrap; width: 1%; padding-right: 4px; }
+tbody tr.row { cursor: pointer; }
+tbody tr.row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
+tbody tr.row.open { background: color-mix(in srgb, var(--s1) 7%, transparent); }
+td.edge { border-left: 3px solid transparent; padding-left: 12px; }
+tr.a-allow td.edge { border-left-color: var(--good-text); }
+tr.a-mitigate td.edge { border-left-color: var(--s2); }
+tr.a-deny td.edge { border-left-color: var(--crit); }
+tr.a-guard td.edge { border-left-color: var(--warn-text); }
+.req { font-size: 12.5px; overflow-wrap: anywhere; }
+/* The disclosure for a row.
+   The whole row used to be role="button", with the actor link inside it — a control
+   nested in a control, which leaves a screen reader with two things to announce and no
+   way to say which one Enter belongs to. The row still opens on click, because that is
+   a convenience rather than a role; the keyboard gets this, which is one control with
+   one name and one job. */
+.row-toggle {
+  border: 0; background: none; padding: 0; margin: 0; border-radius: 4px;
+  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px; color: inherit; text-align: left; cursor: pointer; display: block; width: 100%;
+}
+.row-toggle:hover { background: none; color: inherit; border-color: transparent; }
+.req .ua { color: var(--muted); font-size: 11.5px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64ch; }
+.req .ua a { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 60%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.req .ua a:hover { color: var(--ink); border-bottom-color: var(--ink); }
+.num { text-align: right; }
+
+/* The column ladder. Read the note beside .feed-panel above for what it is for and why
+   the thresholds are in ch; this is where it has to live, below every declaration it
+   overrides. */
+@container feed (max-width: 128ch) {
+  thead th:nth-child(6), tbody td:nth-child(6) { display: none; }
+}
+@container feed (max-width: 119ch) {
+  thead th:nth-child(1), tbody td.when { display: none; }
+}
+@container feed (max-width: 107ch) {
+  .req .ua { white-space: normal; max-width: none; }
+}
+@container feed (max-width: 62ch) {
+  .feed-scroll { overflow-x: auto; }
+}
+
+.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
+.b-proven { background: color-mix(in srgb, var(--proven-text) 14%, transparent); color: var(--proven-text); }
+.b-suspected { background: color-mix(in srgb, var(--warn-text) 16%, transparent); color: var(--warn-text); }
+.b-human { background: color-mix(in srgb, var(--good-text) 14%, transparent); color: var(--good-text); }
+/* The secondary ink rather than the muted one, for the same reason as the weak tier:
+   muted ink on its own muted chip is 4.31:1 on a plain row and 3.70:1 on an open one. */
+.b-unknown { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink-2); }
+.act { font-weight: 600; font-size: 12.5px; }
+.act-allow { color: var(--good-text); }
+.act-mitigate { color: var(--warn-text); }
+.act-deny { color: var(--crit-text); }
+.act-tag { color: var(--ink-2); }
+.sub { color: var(--muted); font-size: 11.5px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
+.guard { color: var(--warn-text); font-size: 11.5px; display: block; margin-top: 3px; font-weight: 500; }
+
+tr.detail > td { background: var(--surface-2); padding: 14px 15px 16px; border-bottom: 1px solid var(--line); }
+.ev { display: grid; gap: 9px; }
+.ev-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 12.5px; }
+.tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 6px; border-radius: 6px; text-align: center; }
+.t-certain { background: color-mix(in srgb, var(--proven-text) 15%, transparent); color: var(--proven-text); }
+.t-strong { background: color-mix(in srgb, var(--crit-text) 14%, transparent); color: var(--crit-text); }
+.t-moderate { background: color-mix(in srgb, var(--warn-text) 16%, transparent); color: var(--warn-text); }
+/* The secondary ink rather than the muted one: muted ink on its own muted chip clears
+   4.5:1 on the light surface and does not on the dark one, and this is 10px bold text
+   saying how much a piece of evidence is worth. It still reads as the quiet tier — the
+   only one with no hue — without being the one nobody can read at night. */
+.t-weak { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink-2); }
+.ev-item.human .tier { background: color-mix(in srgb, var(--good-text) 14%, transparent); color: var(--good-text); }
+.ev-meta { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
+.basis { margin-top: 5px; color: var(--ink-2); font-size: 12px; border-left: 2px solid color-mix(in srgb, var(--proven-text) 40%, transparent); padding: 2px 0 2px 9px; }
+.detail-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; display: flex; gap: 14px; flex-wrap: wrap; }
+
+/* --- bars --------------------------------------------------------------- */
+.bars { padding: 12px 15px 14px; display: grid; gap: 8px; }
+.bar { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 12.5px; }
+.bar .track { position: relative; height: 20px; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 6px; overflow: hidden; }
+.bar .fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--s1) 26%, transparent); border-radius: 0 5px 5px 0; }
+.bar .lbl { position: relative; padding: 0 8px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bar .v { text-align: right; color: var(--ink-2); font-size: 12px; }
+
+/* --- charts ------------------------------------------------------------- */
+.chart { padding: 12px 15px 14px; position: relative; }
+.chart svg { display: block; width: 100%; overflow: visible; }
+.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 15px 12px; font-size: 12px; color: var(--ink-2); }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+/* The marker for a runtime change. A line rather than a swatch, because it is an
+   instant rather than a quantity. */
+.legend .mark { width: 2px; height: 11px; background: var(--proven-text); border-radius: 1px; flex: none; }
+.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.tip {
+  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
+  background: var(--raised); border: 1px solid var(--line); border-radius: 8px;
+  padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.16); z-index: 10; min-width: 128px;
+}
+.tip .t { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
+.tip .r { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
+.tip .r em { font-style: normal; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
+.tip .r b { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 15px; font-size: 12.5px; border-bottom: 1px solid var(--line-soft); }
+.stat-row:last-child { border-bottom: 0; }
+.stat-row .k { color: var(--muted); }
+.stat-row .v { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 560; }
+/* The baseline a window is being read against. Quieter than the current value, and
+   beside it rather than under it, because the comparison is the whole point. */
+.stat-row .v .was { color: var(--muted); font-weight: 400; font-size: 11.5px; }
+.note { padding: 13px 15px; font-size: 12.5px; color: var(--ink-2); }
+.note p { margin: 0 0 9px; }
+.note p:last-child { margin: 0; }
+.note b { color: var(--ink); }
+.empty { padding: 40px 15px; text-align: center; color: var(--muted); font-size: 13px; }
+.empty code { background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .15em .4em; border-radius: 5px; }
+.detectors { padding: 4px 0; }
+.det { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 8px 15px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
+.det:last-child { border-bottom: 0; }
+.det .d { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
+.det .n { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.rules { padding: 10px 15px; display: flex; gap: 6px; flex-wrap: wrap; }
+.rules .chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+[hidden] { display: none !important; }
+/* Present to a screen reader, absent to everyone else. Clipped rather than moved
+   off-screen or hidden with display:none, both of which take an element out of the
+   accessibility tree along with the viewport. */
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0; }
+
+/* --- navigation --------------------------------------------------------- */
+/* Present for a keyboard, out of the way of everything else. */
+.skip {
+  position: absolute; left: 10px; top: 10px; z-index: 40;
+  background: var(--raised); color: var(--ink); border: 1px solid var(--line);
+  border-radius: 8px; padding: 8px 13px; font-size: 12.5px; text-decoration: none;
+  /* Hidden by clipping rather than by being moved off-screen. An element parked
+     above the viewport has its whole border box outside it, and Chrome's sequential
+     focus navigation skips those — so a skip link done that way is invisible to the
+     one input device it exists for. Clipped to a pixel it stays in the tab order. */
+  width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
+}
+.skip:focus { width: auto; height: auto; padding: 8px 13px; overflow: visible; clip-path: none; }
+
+/* A row is a control now, so it has to look like one when focused. outline-offset
+   is negative because an outline drawn outside a table row is clipped by the cell. */
+tbody tr.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+tbody tr.row:focus-visible td.edge { border-left-color: var(--focus); }
+
+.search { position: relative; display: flex; flex: 1 1 180px; min-width: 180px; }
+.search input[type="search"] { flex: 1 1 auto; padding-right: 26px; }
+.search kbd {
+  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
+  font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent);
+  border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; pointer-events: none;
+}
+/* The hint is an affordance for a mouse user who has not found the key yet. Once the
+   box is in use it is noise, and it sits where the clear button wants to be. */
+.search input[type="search"]:focus + kbd, .search input[type="search"]:not(:placeholder-shown) + kbd { display: none; }
+/* --- added panels ------------------------------------------------------- */
+.range { display: flex; gap: 4px; }
+.range button { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
+
+.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 15px; font-size: 12.5px; }
+.kv dt { color: var(--muted); }
+.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
+
+.hdr { width: 100%; border-collapse: collapse; margin-top: 10px; }
+.hdr td { padding: 3px 8px 3px 0; vertical-align: top; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; border: 0; }
+.hdr td.n { color: var(--muted); white-space: nowrap; width: 1%; }
+.hdr td.v { overflow-wrap: anywhere; }
+.hdr td.v.red { color: var(--muted); font-style: italic; }
+
+.tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
+.tools button { font-size: 11.5px; padding: 4px 9px; }
+
+.editor { padding: 12px 15px 14px; display: grid; gap: 10px; }
+textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
+  width: 100%; min-height: 320px; resize: vertical; padding: 11px 12px; tab-size: 2;
+  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink);
+}
+textarea[readonly] { opacity: .8; }
+.editor-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.result { font-size: 12.5px; border-radius: 9px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); }
+.result.ok { border-color: color-mix(in srgb, var(--good-text) 45%, var(--line)); }
+.result.bad { border-color: color-mix(in srgb, var(--crit-text) 45%, var(--line)); color: var(--crit-text); }
+.result.warn { border-color: color-mix(in srgb, var(--warn-text) 45%, var(--line)); }
+.result b { font-weight: 620; }
+.diff { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
+.diff th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
+.diff td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
+.diff .from { color: var(--muted); }
+.diff .to { font-weight: 600; }
+.diff .to.deny { color: var(--crit-text); }
+.diff .to.allow { color: var(--good-text); }
+pre.code {
+  margin: 0; padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line);
+  background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11.5px; line-height: 1.5; overflow-x: auto; white-space: pre; color: var(--ink-2);
+}
+.notice { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 8px 15px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
+.notice:last-child { border-bottom: 0; }
+.notice .when { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
+.notice.warning .tag { color: var(--warn-text); font-weight: 600; }
+.notice.error .tag { color: var(--crit-text); font-weight: 600; }
+.dead { color: var(--muted); }
+.dead .lbl { text-decoration: line-through; }
+.pill { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: 6px; }
+.actor-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
+.actor-head .who { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; }
+/* --- the rule editor ----------------------------------------------------- */
+.bar-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 15px; border-bottom: 1px solid var(--line); background: var(--surface); }
+.bar-actions + .bar-actions, .rulelist + .bar-actions { border-bottom: 0; border-top: 1px solid var(--line); }
+.bar-actions .grow { flex: 1 1 auto; }
+button.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; font-weight: 560; }
+button.primary:hover { background: color-mix(in srgb, var(--accent-solid) 86%, #000); border-color: transparent; color: #fff; }
+button.danger { color: var(--crit-text); }
+button.danger:hover { border-color: color-mix(in srgb, var(--crit-text) 50%, var(--line)); }
+button.icon { padding: 3px 8px; font-size: 12px; line-height: 1.2; }
+.dirty { font-size: 11.5px; color: var(--warn-text); font-weight: 560; display: inline-flex; align-items: center; gap: 6px; }
+.dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-text); }
+
+.rulelist { display: grid; gap: 12px; padding: 14px 15px 16px; }
+.rule {
+  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
+  transition: border-color .12s, box-shadow .12s;
+}
+.rule:focus-within { border-color: color-mix(in srgb, var(--s1) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 12%, transparent); }
+.rule.locked { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
+.rule-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: nowrap; }
+.rule:not(.collapsed) .rule-head { border-bottom: 1px solid var(--line); }
+.rule-head .ord { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
+.rule-head input[type="text"] { flex: 0 1 240px; width: auto; min-width: 130px; }
+.rule-head select { flex: 0 0 auto; }
+.chev { border: 0; background: none; padding: 2px 4px; color: var(--muted); font-size: 11px; line-height: 1; }
+.chev:hover { background: none; color: var(--ink); }
+.rule-summary { flex: 1 1 auto; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; overflow: hidden; }
+.rule-summary .k { font-size: 10.5px; color: var(--muted); }
+.rule-summary .t { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); white-space: nowrap; }
+.rule-summary .none { font-size: 11px; color: var(--muted); font-style: italic; }
+.act-pill { font-size: 11px; font-weight: 620; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
+.act-pill.deny { background: color-mix(in srgb, var(--crit-text) 14%, transparent); color: var(--crit-text); }
+.act-pill.mitigate { background: color-mix(in srgb, var(--warn-text) 16%, transparent); color: var(--warn-text); }
+.act-pill.allow { background: color-mix(in srgb, var(--good-text) 14%, transparent); color: var(--good-text); }
+.act-pill.tag { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
+.rule-body { padding: 11px 12px 13px; display: grid; gap: 11px; }
+.rule.collapsed .rule-body { display: none; }
+.field { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; }
+.field > label { color: var(--muted); padding-top: 5px; }
+.field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.hint { color: var(--muted); font-size: 11px; }
+
+input[type="text"], input[type="number"], select {
+  font: inherit; font-size: 12.5px; padding: 5px 9px; border-radius: 7px;
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0;
+}
+input[type="text"] { width: 100%; }
+input[type="number"] { width: 92px; }
+select { cursor: pointer; }
+input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
+.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+.chips-select { display: flex; gap: 4px; flex-wrap: wrap; }
+.chips-select button {
+  font-size: 11px; padding: 2px 8px; border-radius: 999px; color: var(--muted);
+  background: var(--surface); border: 1px solid var(--line);
+}
+.chips-select button[aria-pressed="true"] { background: color-mix(in srgb, var(--s1) 14%, var(--surface)); border-color: color-mix(in srgb, var(--s1) 50%, var(--line)); color: var(--ink); font-weight: 560; }
+
+.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
+.seg button { border: 0; border-radius: 0; padding: 4px 10px; font-size: 11.5px; background: var(--surface); }
+.seg button + button { border-left: 1px solid var(--line); }
+.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--s1) 14%, var(--surface)); color: var(--ink); font-weight: 560; }
+
+.drop { outline: 2px dashed color-mix(in srgb, var(--s1) 60%, transparent); outline-offset: -6px; }
+
+/* --- the actors table, the tester and the range sets --------------------- */
+.warn-text { color: var(--warn-text); }
+#actor-rows td { font-size: 12.5px; }
+#actor-rows td.who { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
+#actor-rows td.acts { text-align: right; white-space: nowrap; }
+#actor-rows td.acts button { font-size: 11px; padding: 3px 8px; margin-left: 4px; }
+/* A tag, not a warning: a cleared actor is a decision somebody made, and a metronomic
+   one is a measurement. Neither is a verdict, so neither gets a verdict's colour. */
+.tagline { font-size: 11px; color: var(--muted); }
+.tagline b { color: var(--ink-2); font-weight: 600; }
+
+#test-input { min-height: 82px; }
+#tester-panel .editor { gap: 8px; }
+#tester-panel .field-row { gap: 6px; }
+#tester-panel input[type="text"] { flex: 1 1 120px; min-width: 90px; }
+.assumed { color: var(--muted); font-size: 11px; margin-top: 6px; }
+
+.rangeset { border-bottom: 1px solid var(--line-soft); padding: 10px 15px; }
+.rangeset:last-child { border-bottom: 0; }
+.rangeset h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 620; display: flex; align-items: baseline; gap: 8px; }
+.rangeset h3 span { font-weight: 400; color: var(--muted); font-size: 11.5px; }
+.cidrs { display: flex; gap: 5px; flex-wrap: wrap; }
+.cidr {
+  display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; padding: 2px 4px 2px 9px;
+}
+.cidr button { border: 0; background: none; padding: 0 4px; font-size: 12px; line-height: 1; color: var(--muted); border-radius: 999px; }
+.cidr button:hover { background: none; color: var(--crit-text); }
+.cidr.readonly { padding-right: 9px; }
+.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; max-width: 380px; }
+.toast {
+  background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--s1);
+  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 6px 22px rgba(0,0,0,.18);
+  animation: toast-in .16s ease-out;
+}
+.toast.ok { border-left-color: var(--good-text); }
+.toast.bad { border-left-color: var(--crit-text); }
+.toast.warn { border-left-color: var(--warn-text); }
+.toast b { display: block; margin-bottom: 2px; }
+.toast span { color: var(--muted); }
+@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .toast { animation: none; } * { transition: none !important; } }
+
+/* Forced colours — Windows High Contrast and the like.
+   The browser repaints text, backgrounds and borders from the user's palette but leaves
+   SVG fill and stroke alone, which is the right outcome for the two series: they stay
+   tellable apart instead of collapsing into one system colour. The gridlines are the
+   casualty. They are drawn in --grid, a colour picked to recede against *this* dashboard's
+   background, and against a forced black one they recede to 1.4:1 — measured, on the
+   statistics charts — which is not recessive, it is gone. GrayText is the palette's own
+   answer to "present but secondary", so the grid follows the user's colours while the data
+   keeps the ones that carry meaning. */
+@media (forced-colors: active) {
+  .gridline { stroke: GrayText; }
+}`;
+var DASHBOARD_MARKUP = String.raw`
+<a class="skip" href="#view-live">Skip to the feed</a>
+
+<header>
+  <div class="head-row">
+    <div class="brand"><h1 id="title">__TITLE__</h1> <span>bot dashboard</span></div>
+    <output class="live" id="live" aria-live="polite"><span class="dot" id="dot"></span><span id="conn">connecting…</span></output>
+    <div class="grow"></div>
+    <nav class="head-links" id="links" aria-label="Related"></nav>
+    <div class="head-actions">
+      <button id="theme" aria-label="Switch between light and dark">Theme</button>
+      <button id="pause" aria-pressed="false">Pause</button>
+      <button id="reset" class="danger" hidden>Reset</button>
+    </div>
+  </div>
+  <div class="nav-row">
+    <div class="tabs" role="tablist" aria-label="Dashboard views">
+      <button class="tab" id="tab-live" role="tab" aria-selected="true" aria-controls="view-live">Live feed</button>
+      <button class="tab" id="tab-actors" role="tab" aria-selected="false" aria-controls="view-actors">Actors</button>
+      <button class="tab" id="tab-stats" role="tab" aria-selected="false" aria-controls="view-stats">Statistics</button>
+      <button class="tab" id="tab-policy" role="tab" aria-selected="false" aria-controls="view-policy">Policy<span id="notice-badge" class="pill" hidden></span></button>
+    </div>
+    <div class="facts" id="chips"></div>
+    <div class="peers" id="peers"></div>
+  </div>
+</header>
+
+<main class="stack">
+  <section class="tiles" id="tiles"></section>
+
+  <div id="view-live" role="tabpanel" aria-labelledby="tab-live" class="stack">
+    <section class="panel" id="actor-panel" hidden>
+      <div class="actor-head">
+        <span class="who" id="actor-key"></span>
+        <span class="grow"></span>
+        <button id="actor-close">Close</button>
+      </div>
+      <div class="two">
+        <dl class="kv" id="actor-stats"></dl>
+        <div class="bars" id="actor-mix"></div>
+      </div>
+      <div class="bar-actions" id="actor-actions"></div>
+    </section>
+
+    <div class="two">
+      <section class="panel feed-panel">
+        <h2>Requests <span class="sub" id="feed-count"></span><span class="sub win" id="feed-window"></span><span class="sub warn-text" id="feed-skipped" hidden></span></h2>
+        <div class="toolbar">
+          <div class="filters" id="filters"></div>
+          <div class="search">
+            <input type="search" id="search" placeholder="path:/api  actor:203.0.113.4  -rule:allow-crawlers" spellcheck="false" autocomplete="off">
+            <kbd aria-hidden="true">/</kbd>
+          </div>
+          <button id="feed-export" title="Download every request matching this filter as replay JSONL">Export</button>
+        </div>
+        <div class="feed-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th class="num">Time</th><th>Request</th><th>Verdict</th><th class="num">Score</th><th>Action</th><th class="num">ms</th>
+            </tr>
+          </thead>
+          <tbody id="rows"></tbody>
+        </table>
+        </div>
+        <div class="empty" id="empty">Nothing assessed yet. Send some traffic through the handler and it appears here within a moment.</div>
+      </section>
+
+      <div class="stack">
+        <section class="panel">
+          <h2>Detectors firing <span class="sub win"></span></h2>
+          <div class="bars" id="live-detectors"></div>
+        </section>
+        <section class="panel" id="live-actors-panel">
+          <h2>Busiest actors <span class="sub win"></span></h2>
+          <div class="bars" id="live-actors"></div>
+        </section>
+        <section class="panel" id="tester-panel">
+          <h2>Test a request <span class="sub">nothing is recorded</span></h2>
+          <div class="editor">
+            <textarea id="test-input" rows="4" spellcheck="false" autocomplete="off" aria-label="A User-Agent, a curl command, or a block of request headers"
+              placeholder="Paste a User-Agent, a curl command, or a block of request headers"></textarea>
+            <div class="field-row">
+              <input type="text" id="test-ip" class="mono-input" placeholder="client address (optional)" aria-label="Client address">
+              <input type="text" id="test-url" class="mono-input" placeholder="/path (optional)" aria-label="Path">
+              <button id="test-run" class="primary">Assess</button>
+            </div>
+            <div class="result" id="test-result" hidden></div>
+          </div>
+        </section>
+
+        <section class="panel" id="evidence-legend">
+          <h2>Reading this</h2>
+          <div class="note">
+            <p><b>Purple</b> evidence is <em>proven</em>: a self-declaration, a refuted
+               identity, a trap, a protocol violation. Only proven evidence may deny anybody.</p>
+            <p><b>Red, amber and grey</b> are probabilistic. They accumulate into a score
+               and may tag, delay, rate-limit or challenge — never block.</p>
+            <p>An <b>amber left edge</b> is the safety guard stopping a rule: the policy
+               asked for a terminal action the evidence could not support, and got the
+               fallback instead. Those rows are the library working, not failing.</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div id="view-actors" role="tabpanel" aria-labelledby="tab-actors" class="stack" hidden>
+    <section class="panel">
+      <h2>Actors in the registry <span class="sub" id="actors-count"></span></h2>
+      <div class="note" id="actors-note">Everyone the engine is currently remembering, busiest first — a far larger
+         population than the feed's ring, which holds requests rather than clients. This is
+         what <code>cadence</code>, <code>crawl-breadth</code> and <code>rate-anomaly</code> are reading.</div>
+      <div class="feed-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>Actor</th><th class="num">Requests</th><th class="num">Per min</th><th class="num">Paths</th>
+              <th class="num">Cadence</th><th class="num">Proven</th><th class="num">Unsolved</th><th>State</th><th><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody id="actor-rows"></tbody>
+        </table>
+      </div>
+      <div class="empty" id="actors-empty" hidden>Nothing in the registry yet.</div>
+    </section>
+  </div>
+
+  <div id="view-stats" role="tabpanel" aria-labelledby="tab-stats" class="stack" hidden>
+    <div class="two">
+      <section class="panel">
+        <h2>Traffic <span class="range" id="traffic-range"></span><span class="sub" id="traffic-window"></span></h2>
+        <div class="chart" id="traffic-chart"><svg id="traffic" role="img" aria-labelledby="traffic-alt"></svg><div class="tip" id="traffic-tip"></div></div>
+        <p class="sr-only" id="traffic-alt"></p>
+        <div class="legend" id="traffic-legend"></div>
+      </section>
+      <section class="panel">
+        <h2>Assessment latency <span class="sub">since start</span></h2>
+        <div class="chart" id="latency-chart"><svg id="latency" role="img" aria-labelledby="latency-alt"></svg><div class="tip" id="latency-tip"></div></div>
+        <p class="sr-only" id="latency-alt"></p>
+        <div class="legend"><span id="latency-summary"></span></div>
+      </section>
+    </div>
+
+    <div class="two">
+      <section class="panel">
+        <h2>Score distribution <span class="range" id="score-scope"></span><span class="sub" id="score-window"></span></h2>
+        <div class="chart" id="score-chart"><svg id="scores" role="img" aria-labelledby="score-alt"></svg><div class="tip" id="score-tip"></div></div>
+        <p class="sr-only" id="score-alt"></p>
+        <div class="legend" id="score-legend"></div>
+      </section>
+      <section class="panel">
+        <h2>Guard stops by rule <span class="sub win"></span></h2>
+        <div class="bars" id="stat-guard"></div>
+      </section>
+    </div>
+
+    <div class="grid3">
+      <section class="panel"><h2>Verdicts <span class="sub">since start</span></h2><div class="bars" id="stat-verdicts"></div></section>
+      <section class="panel"><h2>Actions taken <span class="sub">since start</span></h2><div class="bars" id="stat-actions"></div></section>
+      <section class="panel"><h2>Bot classes <span class="sub">since start</span></h2><div class="bars" id="stat-classes"></div></section>
+    </div>
+
+    <div class="grid3">
+      <section class="panel"><h2>Detector firings <span class="sub">since start</span></h2><div class="bars" id="stat-detectors"></div></section>
+      <section class="panel">
+        <h2>Challenges</h2>
+        <div id="stat-challenges"></div>
+      </section>
+      <section class="panel">
+        <h2>Health</h2>
+        <div id="stat-health"></div>
+      </section>
+    </div>
+
+    <div class="two">
+      <section class="panel" id="audit-panel">
+        <h2>Audit <span class="sub" id="audit-spans"></span></h2>
+        <div id="audit-body"></div>
+      </section>
+      <section class="panel" id="audit-checks-panel">
+        <h2>Checks installed</h2>
+        <div class="detectors" id="audit-checks"></div>
+      </section>
+    </div>
+
+    <div class="grid3">
+      <section class="panel" id="identities-panel"><h2>Identities seen <span class="sub win"></span></h2><div class="bars" id="stat-identities"></div></section>
+      <section class="panel"><h2>Busiest paths <span class="sub win"></span></h2><div class="bars" id="stat-paths"></div></section>
+      <section class="panel"><h2>Denied paths <span class="sub win"></span></h2><div class="bars" id="stat-denied-paths"></div></section>
+    </div>
+
+    <div class="two">
+      <section class="panel">
+        <h2>Installed detectors <span class="sub" id="detector-count"></span></h2>
+        <div class="detectors" id="stat-detector-list"></div>
+      </section>
+      <div class="stack">
+        <section class="panel">
+          <h2>Rules that fired <span class="sub win"></span></h2>
+          <div class="bars" id="stat-rule-hits"></div>
+        </section>
+        <section class="panel">
+          <h2>Bypassed <span class="sub">detection never ran</span></h2>
+          <div class="bars" id="stat-bypassed"></div>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div id="view-policy" role="tabpanel" aria-labelledby="tab-policy" class="stack" hidden>
+    <div class="two">
+      <section class="panel" id="editor-panel">
+        <h2>Rules <span class="sub" id="policy-mode"></span></h2>
+        <div class="bar-actions">
+          <div class="seg" id="editor-mode">
+            <button id="mode-gui" aria-pressed="true">Editor</button>
+            <button id="mode-json" aria-pressed="false">JSON</button>
+          </div>
+          <button id="policy-preview">Preview</button>
+          <button id="policy-apply" class="primary" hidden>Apply</button>
+          <button id="policy-revert">Revert</button>
+          <span class="grow"></span>
+          <button id="policy-import">Import…</button>
+          <button id="policy-export">Export</button>
+          <span class="dirty" id="policy-dirty" hidden>unsaved</span>
+        </div>
+        <div id="editor-gui">
+          <div class="rulelist" id="rulelist"></div>
+          <div class="bar-actions">
+            <button id="rule-add">+ Add rule</button>
+            <button id="rule-expand">Expand all</button>
+            <span class="hint" id="policy-note"></span>
+          </div>
+        </div>
+        <div class="editor" id="editor-json" hidden>
+          <textarea id="policy-json" spellcheck="false" autocomplete="off" aria-label="Policy rules as JSON"></textarea>
+        </div>
+        <div class="editor"><div class="result" id="policy-result" hidden></div></div>
+        <input type="file" id="policy-file" accept="application/json,.json" hidden>
+      </section>
+
+      <div class="stack">
+        <section class="panel" id="guard-panel">
+          <h2>Guard <span class="sub" id="guard-mode"></span></h2>
+          <div id="stat-policy"></div>
+          <div class="note" id="guard-note"></div>
+        </section>
+        <section class="panel" id="ranges-panel">
+          <h2>Range sets <span class="sub" id="ranges-mode"></span></h2>
+          <div id="ranges-body"></div>
+          <div class="note" id="ranges-note"></div>
+        </section>
+        <section class="panel">
+          <h2>Preview a shipped preset</h2>
+          <div class="rules" id="preset-buttons"></div>
+          <div class="note">Runs the preset against the requests still in the window and shows what would change. Nothing is applied.</div>
+        </section>
+        <section class="panel" id="changes-panel">
+          <h2>Changes <span class="sub" id="change-count"></span></h2>
+          <div id="stat-changes"></div>
+          <div class="note">What was applied to this process at runtime, and by whom when the dashboard's
+             <code>auth</code> could say. Bounded and in memory: the durable copy is the
+             <code>policy-change</code>, <code>guard-change</code>, <code>range-change</code> and
+             <code>actor-change</code> events.</div>
+        </section>
+        <section class="panel" id="notices-panel">
+          <h2>Notices <span class="sub" id="notice-count"></span></h2>
+          <div id="stat-notices"></div>
+        </section>
+      </div>
+    </div>
+
+    <div class="two">
+      <section class="panel">
+        <h2>Rules, in evaluation order</h2>
+        <div class="rules" id="stat-rules"></div>
+      </section>
+      <section class="panel" id="robots-panel">
+        <h2>robots.txt this policy implies</h2>
+        <div class="editor"><pre class="code" id="robots-preview"></pre><div id="robots-notes"></div></div>
+      </section>
+    </div>
+  </div>
+</main>
+
+<div class="toasts" id="toasts" aria-live="polite"></div>
+`;
+var PAGE = String.raw`<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>__TITLE__ · bot dashboard</title>
+<style nonce="__NONCE__">
+${DASHBOARD_CSS}
+</style>
+</head>
+<body>
+${DASHBOARD_MARKUP}
+<script nonce="__NONCE__">
+window.__BOOTSTRAP__ = JSON.parse(__BOOT_JSON__);
+__SCRIPT__
+</script>
+</body>
+</html>
+`;
+
+// src/element/index.ts
+var MAX_PANEL_ROWS = 200;
+var TAB_ELEMENT = {
+  live: "tab-live",
+  actors: "tab-actors",
+  stats: "tab-stats",
+  policy: "tab-policy"
+};
+var EXTRA_CSS = `
+/* What the body element carries on the standalone page.
+   A shadow root has no body, so without this nothing sets the base colour, background or
+   type: every element inherited the *host page's* colour instead. On a white page that
+   passed for correct; in dark mode it was near-black text on a near-black surface, which
+   axe reported as a serious contrast failure and which is exactly the kind of thing this
+   library is not supposed to ship. */
+:host {
+  display: block;
+  background: var(--page);
+  color: var(--ink);
+  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+:host([hidden]) { display: none; }
+/* The page's own chrome assumes it owns the viewport. Inside somebody else's layout the
+   element is the viewport, so the sticky header sticks to the element and the body
+   metrics come from the host box. */
+:host { position: relative; }
+:host header { position: sticky; top: 0; }
+.bd-extra { display: grid; gap: 10px; padding: 14px 15px; }
+.bd-notice { font: 14px/1.5 system-ui, sans-serif; padding: 14px; margin: 0; color: var(--crit-text, #8a1c1c); }
+.bd-extra .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
+.bd-extra .row b { font-weight: 600; font-variant-numeric: tabular-nums; }
+.bd-extra .row span { color: var(--muted); font-size: 12px; }
+:host([data-density="compact"]) tbody td,
+:host([data-density="compact"]) thead th { padding-top: 5px; padding-bottom: 5px; }
+:host([data-density="compact"]) .panel > h2 { padding-top: 8px; padding-bottom: 8px; }
+`;
+var container;
+var owner;
+var lastTheme;
+function defineBotDashboard(name = "bot-dashboard") {
+  if (typeof customElements === "undefined") return;
+  const taken = customElements.get(name);
+  if (taken !== void 0) {
+    if (taken !== BotDashboardElement && !(taken.prototype instanceof BotDashboardElement) && !clashed.has(name)) {
+      clashed.add(name);
+      console.warn(`bot-dashboard: <${name}> is already registered on this page by something else, so this did nothing and your <${name}> elements are not this dashboard. Register it under a name of your own instead: defineBotDashboard("ops-dashboard").`);
+    }
+    return;
+  }
+  customElements.define(name, registered ? class extends BotDashboardElement {
+  } : BotDashboardElement);
+  registered = true;
+}
+var registered = false;
+var clashed = /* @__PURE__ */ new Set();
+var ElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var BotDashboardElement = class extends ElementBase {
+  settings = {};
+  booted = false;
+  /**
+   * Booted *and* finished drawing. Distinct from `booted`, which is set on the way in:
+   * `connectedCallback` replays a config assigned before the upgrade through the setter,
+   * and at that moment `booted` is already true — so a warning keyed on it fired on a
+   * perfectly ordinary mount, complaining that the config had changed when what had
+   * happened was that it had arrived.
+   */
+  rendered = false;
+  /**
+   * Set before the element is attached, or pass the same things as attributes.
+   *
+   * An accessor rather than a field, and the difference is load-bearing. A page that
+   * writes `el.config = {...}` before the element is defined puts an *own property* on
+   * the instance, and a class field initialiser then runs at upgrade and overwrites it —
+   * so the configuration silently disappears and the dashboard renders its defaults. The
+   * accessor plus the upgrade dance in `connectedCallback` is the documented way round
+   * it, and the order it protects (write the config, then define the element) is the
+   * natural one to write.
+   */
+  get config() {
+    return this.settings;
+  }
+  set config(value) {
+    const before = this.rendered && this.isConnected ? shapeOf(this.settings) : void 0;
+    this.settings = value ?? {};
+    if (this.booted && this.isConnected) {
+      this.applyTheme();
+      if (before !== void 0 && shapeOf(this.settings) !== before) {
+        console.warn("bot-dashboard: `tabs` and `panels` are read once, when the element first mounts. Changing them afterwards has no effect \u2014 remount the element instead. (`theme` does update live.)");
+      }
+    }
+  }
+  timers = [];
+  /** Custom properties this element put on itself, so it can take them off again. */
+  appliedTokens = /* @__PURE__ */ new Set();
+  warned = /* @__PURE__ */ new Set();
+  static get observedAttributes() {
+    return ["src", "scheme", "density"];
+  }
+  connectedCallback() {
+    if (this.booted) return;
+    this.booted = true;
+    if (Object.prototype.hasOwnProperty.call(this, "config")) {
+      const preset = this.config;
+      Reflect.deleteProperty(this, "config");
+      this.config = preset;
+    }
+    void this.boot();
+  }
+  disconnectedCallback() {
+    for (const timer2 of this.timers) clearInterval(timer2);
+    this.timers = [];
+    if (owner === this) owner = void 0;
+    void Promise.resolve().then(() => (init_stream(), stream_exports)).then((stream) => {
+      if (!this.isConnected) stream.suspendStream();
+    });
+  }
+  attributeChangedCallback(attribute, previous, value) {
+    if (attribute === "scheme") this.applyScheme(value);
+    if (attribute === "density") this.applyDensity(value);
+    if (attribute === "src" && previous !== null && previous !== value && this.booted) {
+      console.warn("bot-dashboard: `src` is read once, when the element first mounts. Changing it afterwards has no effect \u2014 replace the element instead.");
+    }
+  }
+  /**
+   * Give up on this attempt without giving up on the element.
+   *
+   * Every way a boot can end early — it lost the one-at-a-time race, its `src` is
+   * cross-origin, its handler did not answer, it was unmounted mid-flight — is about this
+   * moment rather than about this element, and all four are things a remount can fix: the
+   * other dashboard has gone, the attribute was corrected, the server finished starting.
+   * Releasing ownership without clearing `booted` was the bug: `connectedCallback` returns
+   * early on a latched `booted`, so the element stayed dead for the life of the instance
+   * and a router that remounts it drew a stale error over a handler that now works.
+   */
+  standDown() {
+    if (owner === this) owner = void 0;
+    this.booted = false;
+    this.rendered = false;
+  }
+  /**
+   * Where the handler is mounted, from `config.src` or the attribute.
+   *
+   * A trailing slash is dropped, and so are a query string and a fragment — the element
+   * appends `/api/bootstrap` to this, so anything after the path cannot survive that
+   * concatenation and never could. Left in, `src="/_bots?token=x"` failed with "it
+   * answered text/html — is createDashboardHandler mounted at /_bots?token=x?", which
+   * sends somebody to check the one thing that was right.
+   */
+  mountPath() {
+    const { base, warning } = parseMount(this.config.src ?? this.getAttribute("src") ?? "");
+    if (warning !== void 0) this.warnOnce(`bot-dashboard: ${warning}`);
+    return base;
+  }
+  async boot() {
+    const base = this.mountPath();
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    for (const child of Array.from(shadow.children)) {
+      if (child.classList.contains("bd-notice")) child.remove();
+    }
+    if (owner !== void 0 && owner !== this && owner.isConnected) {
+      shadow.append(notice("A bot dashboard is already running on this page. Only one can be."));
+      this.standDown();
+      return;
+    }
+    owner = this;
+    if (container !== void 0) {
+      const dom2 = await Promise.resolve().then(() => (init_dom(), dom_exports));
+      dom2.setThemeHost(this);
+      this.applyTheme();
+      adoptStyles(shadow);
+      shadow.append(container);
+      this.renderPanels(container);
+      const stream = await Promise.resolve().then(() => (init_stream(), stream_exports));
+      stream.connectStream();
+      this.rendered = true;
+      this.dispatchEvent(new CustomEvent("bot-dashboard-ready", { bubbles: true }));
+      return;
+    }
+    if (base !== "" && /^https?:\/\//i.test(base)) {
+      try {
+        if (new URL(base).origin !== location.origin) {
+          const why = `src points at ${new URL(base).origin}, which is not this page's origin. The dashboard is same-origin only: it sends no CORS headers, which is what stops another site reading your traffic. Mount it under this origin and use a path, e.g. src="/_bots".`;
+          shadow.append(notice(`The bot dashboard could not start: ${why}`));
+          console.error("bot-dashboard:", why);
+          this.standDown();
+          return;
+        }
+      } catch {
+      }
+    }
+    let boot;
+    try {
+      const response = await fetch(`${base}/api/bootstrap`, { credentials: "same-origin", headers: { accept: "application/json" } });
+      if (!response.ok) throw new Error(explainStatus(response.status, base));
+      const type = response.headers.get("content-type") ?? "";
+      if (!type.includes("json")) {
+        throw new Error(
+          base === "" ? 'no `src` was given, so it asked this page\'s own origin and got HTML back. Point `src` at where createDashboardHandler is mounted, e.g. src="/_bots"' : `it answered ${type || "no content type"} rather than JSON. Is createDashboardHandler mounted at ${base}?`
+        );
+      }
+      boot = await response.json();
+      if (!this.isConnected) {
+        this.standDown();
+        return;
+      }
+    } catch (error) {
+      const why = String(error instanceof Error ? error.message : error);
+      shadow.append(notice(`The bot dashboard could not start: ${why}`));
+      console.error("bot-dashboard:", why);
+      this.standDown();
+      return;
+    }
+    boot["base"] = base;
+    const { sections, warnings } = resolveSections(boot["sections"], this.config);
+    for (const warning of warnings) this.warnOnce(`bot-dashboard: ${warning}`);
+    boot["sections"] = sections;
+    adoptStyles(shadow);
+    const frame = document.createElement("div");
+    frame.className = "bd-root";
+    frame.innerHTML = DASHBOARD_MARKUP;
+    shadow.append(frame);
+    const title = typeof boot["title"] === "string" ? boot["title"] : "bothandlerjs";
+    const main = frame.querySelector("main");
+    if (main !== null) {
+      const region = document.createElement("div");
+      region.className = main.className;
+      region.setAttribute("role", "region");
+      region.setAttribute("aria-label", `${title} bot dashboard`);
+      while (main.firstChild !== null) region.append(main.firstChild);
+      main.replaceWith(region);
+    }
+    frame.querySelector("header")?.setAttribute("role", "none");
+    for (const node of Array.from(frame.querySelectorAll("*"))) {
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === 3 && child.nodeValue?.includes("__TITLE__") === true) {
+          child.nodeValue = child.nodeValue.replace(/__TITLE__/g, title);
+        }
+      }
+    }
+    this.applyTheme();
+    container = frame;
+    const dom = await Promise.resolve().then(() => (init_dom(), dom_exports));
+    dom.setRoot(frame, this);
+    globalThis.__BOOTSTRAP__ = boot;
+    await Promise.resolve().then(() => (init_client(), client_exports));
+    this.relabelTabs(shadow);
+    this.renderPanels(frame);
+    warnIfFramed();
+    this.rendered = true;
+    this.dispatchEvent(new CustomEvent("bot-dashboard-ready", { bubbles: true }));
+  }
+  applyTheme() {
+    const theme = this.config.theme ?? lastTheme ?? {};
+    if (this.config.theme !== void 0) lastTheme = this.config.theme;
+    this.applyScheme(theme.scheme ?? this.getAttribute("scheme"));
+    this.applyDensity(theme.density ?? this.getAttribute("density"));
+    const next = /* @__PURE__ */ new Set();
+    for (const [token, value] of Object.entries(theme.tokens ?? {})) {
+      const name = token.startsWith("--") ? token : `--${token}`;
+      next.add(name);
+      this.style.setProperty(name, value);
+    }
+    for (const name of this.appliedTokens) {
+      if (!next.has(name)) this.style.removeProperty(name);
+    }
+    this.appliedTokens = next;
+  }
+  /**
+   * `scheme` and `density` take two values each, and until now anything else was accepted
+   * in silence — a mis-typed `scheme` did nothing, and a mis-typed `density` was written
+   * onto the element as `data-density="cozy"`, matching no rule and looking, from the
+   * outside, exactly like a dashboard that ignores its configuration.
+   *
+   * Warned once per bad value per element, because `applyTheme` runs on every re-render
+   * and a typo that repeats a hundred times is a typo the console has stopped conveying.
+   */
+  applyScheme(value) {
+    if (value === null || value === void 0) return;
+    if (value === "light" || value === "dark") {
+      this.setAttribute("data-theme", value);
+      return;
+    }
+    this.warnOnce(`bot-dashboard: scheme "${value}" is not "light" or "dark", so it was ignored. Leave it unset to follow the viewer's own setting.`);
+  }
+  applyDensity(value) {
+    if (value === null || value === void 0) return;
+    if (value === "comfortable" || value === "compact") {
+      this.setAttribute("data-density", value);
+      return;
+    }
+    this.warnOnce(`bot-dashboard: density "${value}" is not "comfortable" or "compact", so it was ignored.`);
+  }
+  warnOnce(message) {
+    if (this.warned.has(message)) return;
+    this.warned.add(message);
+    console.warn(message);
+  }
+  /**
+   * Reorders and relabels the strip the client has just drawn.
+   *
+   * Only the tabs that survived: which screens *exist* was settled in the boot object
+   * before the client ran, because the client builds its list from there and looks each
+   * one up by id — deleting an element here instead crashed it with "no element
+   * #tab-actors", which is what this comment is standing in for.
+   */
+  relabelTabs(shadow) {
+    const wanted = this.config.tabs;
+    if (wanted === void 0 || wanted.length === 0) return;
+    const strip = shadow.querySelector(".tabs");
+    if (strip === null) return;
+    for (const tab of wanted) {
+      const node = shadow.querySelector(`#${TAB_ELEMENT[tab.id]}`);
+      if (node === null) continue;
+      if (tab.label !== void 0) node.textContent = tab.label;
+      strip.append(node);
+    }
+  }
+  renderPanels(within) {
+    const panels = this.config.panels ?? [];
+    const wanted = new Set(panels.map((panel) => `${panel.id}@${panel.screen}`));
+    for (const section of Array.from(within.querySelectorAll("[data-bd-panel]"))) {
+      const key = `${section.getAttribute("data-bd-panel")}@${section.getAttribute("data-bd-screen")}`;
+      if (!wanted.has(key)) section.remove();
+    }
+    const drawn = /* @__PURE__ */ new Set();
+    for (const panel of panels) {
+      const key = `${panel.id}@${panel.screen}`;
+      if (drawn.has(key)) {
+        this.warnOnce(`bot-dashboard: two panels share the id "${panel.id}" on screen "${panel.screen}". Ids identify a panel, so the second was ignored \u2014 give them different ids.`);
+        continue;
+      }
+      drawn.add(key);
+      const host = within.querySelector(`#view-${cssEscape(panel.screen)}`);
+      if (host === null) {
+        const known = Array.from(within.querySelectorAll("[id^='view-']")).map((node) => node.id.slice("view-".length)).join(", ");
+        console.warn(`bot-dashboard: panel "${panel.id}" asks for screen "${panel.screen}", which this dashboard does not have. It has: ${known}.`);
+        continue;
+      }
+      const existing = host.querySelector(`[data-bd-panel="${cssEscape(panel.id)}"]`);
+      let body;
+      if (existing !== null) {
+        body = existing.querySelector(".bd-extra");
+      } else {
+        const section = document.createElement("section");
+        section.className = "panel";
+        section.setAttribute("data-bd-panel", panel.id);
+        section.setAttribute("data-bd-screen", panel.screen);
+        const heading = document.createElement("h2");
+        heading.textContent = panel.title;
+        body = document.createElement("div");
+        body.className = "bd-extra";
+        section.append(heading, body);
+        host.append(section);
+      }
+      const paint = async () => {
+        try {
+          const data = typeof panel.source === "string" ? await (await fetch(panel.source, { credentials: "same-origin" })).json() : await panel.source();
+          while (body.firstChild) body.removeChild(body.firstChild);
+          if (!Array.isArray(data?.rows)) {
+            body.append(notice(`${panel.title} returned no rows.`));
+            return;
+          }
+          const all = data.rows;
+          for (const row of all.slice(0, MAX_PANEL_ROWS)) {
+            if (typeof row !== "object" || row === null || row.label === void 0 || row.value === void 0) continue;
+            const line = document.createElement("div");
+            line.className = "row";
+            const label2 = document.createElement("span");
+            label2.textContent = cellText(row.label);
+            const value = document.createElement("b");
+            value.textContent = cellText(row.value);
+            line.append(label2, value);
+            if (row.note !== void 0) {
+              const note = document.createElement("span");
+              note.textContent = cellText(row.note);
+              line.append(note);
+            }
+            body.append(line);
+          }
+          if (all.length > MAX_PANEL_ROWS) {
+            const more = document.createElement("div");
+            more.className = "row";
+            const label2 = document.createElement("span");
+            label2.textContent = `${all.length - MAX_PANEL_ROWS} more not shown`;
+            more.append(label2);
+            body.append(more);
+          }
+        } catch {
+          while (body.firstChild) body.removeChild(body.firstChild);
+          body.append(notice(`Could not load ${panel.title}.`));
+        }
+      };
+      void paint();
+      if (panel.refreshMs !== void 0 && panel.refreshMs > 0) {
+        this.timers.push(setInterval(paint, Math.max(1e3, panel.refreshMs)));
+      }
+    }
+  }
+};
+var sheet;
+function adoptStyles(shadow) {
+  if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in shadow) {
+    if (sheet === void 0) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(`${DASHBOARD_CSS}
+${EXTRA_CSS}`);
+    }
+    shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+    return;
+  }
+  const style = document.createElement("style");
+  style.textContent = `${DASHBOARD_CSS}
+${EXTRA_CSS}`;
+  shadow.append(style);
+}
+var framingWarned = false;
+function warnIfFramed() {
+  if (framingWarned) return;
+  if (globalThis.top === globalThis.self) return;
+  try {
+    void globalThis.top.location.origin;
+    return;
+  } catch {
+    framingWarned = true;
+    console.warn(
+      "bot-dashboard: this page is framed by another origin, and a framed dashboard can be clickjacked \u2014 an operator clicks a control they cannot see. The standalone page refuses framing with `frame-ancestors 'none'`; a page you serve yourself has to send that header itself, or `X-Frame-Options: DENY`."
+    );
+  }
+}
+function notice(text) {
+  const node = document.createElement("p");
+  node.className = "bd-notice";
+  node.textContent = text;
+  return node;
+}
+export {
+  BotDashboardElement,
+  defineBotDashboard
+};
+//# sourceMappingURL=index.js.map