@osqd/bothandlerjs 0.6.0 → 0.7.0

package/dist/element/index.js

@@ -113,12 +113,23 @@ var init_dom = __esm({
 });
 
 // src/dashboard/client/boot.ts
-var raw, BOOT, API, SECTIONS;
+var boot_exports = {};
+__export(boot_exports, {
+  API: () => API,
+  BOOT: () => BOOT,
+  SECTIONS: () => SECTIONS,
+  applyBoot: () => applyBoot
+});
+function applyBoot(next) {
+  BOOT = next;
+  API = next.base;
+  SECTIONS = next.sections;
+}
+var FALLBACK, BOOT, API, SECTIONS;
 var init_boot = __esm({
   "src/dashboard/client/boot.ts"() {
     "use strict";
-    raw = globalThis.__BOOTSTRAP__;
-    BOOT = raw ?? {
+    FALLBACK = {
       base: "",
       title: "bothandlerjs",
       allowReset: false,
@@ -129,6 +140,7 @@ var init_boot = __esm({
       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: []
     };
+    BOOT = globalThis.__BOOTSTRAP__ ?? FALLBACK;
     API = BOOT.base;
     SECTIONS = BOOT.sections;
   }
@@ -203,48 +215,172 @@ var init_outcome = __esm({
 });
 
 // src/dashboard/client/query.ts
+function suggestFor(input, caret) {
+  const before = input.slice(0, caret);
+  const start2 = Math.max(before.lastIndexOf(" ") + 1, 0);
+  const token = before.slice(start2);
+  const to = caret;
+  const negated = token.startsWith("-") || token.startsWith("!");
+  const body = negated ? token.slice(1) : token;
+  const colon = body.indexOf(":");
+  if (colon === -1) {
+    const partial2 = body.toLowerCase();
+    if (partial2.startsWith("$")) {
+      return { options: OPERATORS.filter((name) => name.startsWith(partial2)), from: start2, to };
+    }
+    const options2 = FIELD_NAMES.filter((name) => name.startsWith(partial2)).map((name) => `${negated ? token[0] : ""}${name}:`);
+    return { options: options2, from: start2, to };
+  }
+  const field2 = body.slice(0, colon).toLowerCase();
+  const values = FIELD_VALUES[field2];
+  if (values === void 0) return { options: [], from: start2, to };
+  const partial = body.slice(colon + 1).toLowerCase();
+  const prefix = `${negated ? token[0] : ""}${field2}:`;
+  const forms = partial.startsWith("$") ? ["$in(", "$notin("].filter((form) => form.startsWith(partial)).map((form) => `${prefix}${form}`) : [];
+  const options = [...forms, ...values.filter((value) => value.toLowerCase().startsWith(partial)).map((value) => `${prefix}${value}`)];
+  return { options, from: start2, to };
+}
 function tokenize(input) {
   const tokens = [];
   let current = "";
   let quoted = false;
-  for (const character of input) {
+  let depth = 0;
+  const flush = () => {
+    if (current === "") return;
+    const lower = current.toLowerCase();
+    if (lower === "$and" || lower === "$or" || lower === "$not") tokens.push({ kind: "op", op: lower.slice(1) });
+    else tokens.push({ kind: "word", text: current });
+    current = "";
+  };
+  for (let i = 0; i < input.length; i++) {
+    const character = input[i];
     if (character === '"') {
       quoted = !quoted;
       continue;
     }
-    if (!quoted && /\s/.test(character)) {
-      if (current !== "") tokens.push(current);
-      current = "";
+    if (quoted) {
+      current += character;
+      continue;
+    }
+    if (depth > 0) {
+      current += character;
+      if (character === "(") depth++;
+      else if (character === ")") {
+        depth--;
+        if (depth === 0) flush();
+      }
+      continue;
+    }
+    if (character === "(") {
+      if (/\$(in|notin)$/i.test(current)) {
+        current += character;
+        depth = 1;
+        continue;
+      }
+      flush();
+      tokens.push({ kind: "open" });
+      continue;
+    }
+    if (character === ")") {
+      flush();
+      tokens.push({ kind: "close" });
+      continue;
+    }
+    if (/\s/.test(character)) {
+      flush();
       continue;
     }
     current += character;
   }
-  if (current !== "") tokens.push(current);
+  flush();
   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;
+function toTerm(word) {
+  const negated = word.startsWith("-") || word.startsWith("!");
+  const body = negated ? word.slice(1) : word;
+  if (body === "") return void 0;
+  const colon = body.indexOf(":");
+  const name = colon === -1 ? "" : body.slice(0, colon).toLowerCase();
+  const field2 = FIELDS[name];
+  if (colon === -1 || field2 === void 0) return { field: void 0, value: body.toLowerCase(), negated };
+  const rest = body.slice(colon + 1);
+  const set = /^\$(in|notin)\(([\s\S]*)$/i.exec(rest);
+  if (set !== null) {
+    const inside = set[2].endsWith(")") ? set[2].slice(0, -1) : set[2];
+    const values = inside.split(",").map((entry) => entry.trim().toLowerCase()).filter((entry) => entry !== "");
+    const inverted = set[1].toLowerCase() === "notin";
+    return { field: field2, value: values[0] ?? "", negated: negated !== inverted, values };
+  }
+  let value = rest.toLowerCase();
+  let compare;
+  if (NUMERIC.has(field2)) {
+    compare = value.startsWith(">") ? ">" : value.startsWith("<") ? "<" : "=";
+    if (compare !== "=") value = value.slice(1);
+  }
+  if (value === "") return void 0;
+  return { field: field2, value, negated, compare };
+}
+function parseTokens(tokens) {
+  let at = 0;
+  let depth = 0;
+  const parseUnary = () => {
+    const token = tokens[at];
+    if (token === void 0) return void 0;
+    if (token.kind === "op" && token.op === "not") {
+      at++;
+      const of = parseUnary();
+      return of === void 0 ? void 0 : { kind: "not", of };
     }
-    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 (token.kind === "open") {
+      at++;
+      if (depth >= MAX_GROUP_DEPTH) return void 0;
+      depth++;
+      const inner = parseOr();
+      depth--;
+      if (tokens[at]?.kind === "close") at++;
+      return inner.kind === "all" ? void 0 : inner;
     }
-    if (value === "") continue;
-    terms.push({ field: field2, value, negated, compare });
-  }
-  return terms;
+    if (token.kind === "close") return void 0;
+    if (token.kind === "op") {
+      at++;
+      return parseUnary();
+    }
+    at++;
+    const term = toTerm(token.text);
+    return term === void 0 ? void 0 : { kind: "term", term };
+  };
+  const parseAnd = () => {
+    const parts = [];
+    while (at < tokens.length) {
+      const token = tokens[at];
+      if (token === void 0 || token.kind === "close") break;
+      if (token.kind === "op" && token.op === "or") break;
+      if (token.kind === "op" && token.op === "and") {
+        at++;
+        continue;
+      }
+      const before = at;
+      const part = parseUnary();
+      if (part !== void 0) parts.push(part);
+      if (at === before) at++;
+    }
+    return parts.length === 0 ? { kind: "all" } : parts.length === 1 ? parts[0] : { kind: "and", parts };
+  };
+  const parseOr = () => {
+    const parts = [parseAnd()];
+    while (tokens[at]?.kind === "op" && tokens[at].op === "or") {
+      at++;
+      parts.push(parseAnd());
+    }
+    const real = parts.filter((part) => part.kind !== "all");
+    if (real.length === 0) return { kind: "all" };
+    return real.length === 1 ? real[0] : { kind: "or", parts: real };
+  };
+  return parseOr();
+}
+function parseFilter(input) {
+  const trimmed = input.trim();
+  return parseTokens(tokenize(trimmed.length > MAX_QUERY_CHARS ? trimmed.slice(0, MAX_QUERY_CHARS) : trimmed));
 }
 function searchableText(entry) {
   const parts = [
@@ -298,6 +434,11 @@ function fieldValue(entry, field2) {
 }
 function matchesTerm(term, entry, haystack) {
   if (term.field === void 0) return haystack.includes(term.value);
+  if (term.values !== void 0) {
+    if (term.values.length === 0) return false;
+    const actual = fieldValue(entry, term.field).toLowerCase();
+    return term.values.some((value) => actual.includes(value));
+  }
   if (term.field === "score") {
     const wanted = Number(term.value);
     if (Number.isNaN(wanted)) return false;
@@ -307,11 +448,19 @@ function matchesTerm(term, entry, haystack) {
   }
   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;
+function matches(filter, entry, haystack) {
+  switch (filter.kind) {
+    case "all":
+      return true;
+    case "term":
+      return matchesTerm(filter.term, entry, haystack) !== filter.term.negated;
+    case "not":
+      return !matches(filter.of, entry, haystack);
+    case "and":
+      return filter.parts.every((part) => matches(part, entry, haystack));
+    case "or":
+      return filter.parts.some((part) => matches(part, entry, haystack));
   }
-  return true;
 }
 function matchesFilter(filter, entry) {
   switch (filter) {
@@ -333,7 +482,7 @@ function matchesFilter(filter, entry) {
       return true;
   }
 }
-var FIELDS, NUMERIC;
+var FIELDS, NUMERIC, FIELD_NAMES, FIELD_VALUES, OPERATORS, MAX_GROUP_DEPTH, MAX_QUERY_CHARS;
 var init_query = __esm({
   "src/dashboard/client/query.ts"() {
     "use strict";
@@ -362,6 +511,19 @@ var init_query = __esm({
       certain: "certain"
     };
     NUMERIC = /* @__PURE__ */ new Set(["score"]);
+    FIELD_NAMES = Object.keys(FIELDS).sort();
+    FIELD_VALUES = {
+      verdict: ["confirmed-bot", "verified-bot", "suspected-bot", "human", "unknown"],
+      class: ["scanner", "scraper", "impersonator", "automation", "http-client", "declared-bot", "verified-bot", "human", "unknown"],
+      botclass: ["scanner", "scraper", "impersonator", "automation", "http-client", "declared-bot", "verified-bot", "human", "unknown"],
+      action: ["allow", "tag", "log", "challenge", "rate-limit", "delay", "block", "drop", "redirect"],
+      outcome: ["allow", "mitigate", "deny", "pending"],
+      certain: ["true", "false"],
+      method: ["GET", "POST", "HEAD", "PUT", "PATCH", "DELETE", "OPTIONS"]
+    };
+    OPERATORS = ["$and", "$or", "$not", "$in", "$notin"];
+    MAX_GROUP_DEPTH = 32;
+    MAX_QUERY_CHARS = 8192;
   }
 });
 
@@ -395,7 +557,12 @@ function clearFeed() {
 }
 function setSearch(value) {
   state.search = value;
-  state.terms = parseQuery(value);
+  state.query = parseFilter(value);
+  resetPaging();
+}
+function setTimeframe(from, to) {
+  state.fromMs = from;
+  state.toMs = to;
   resetPaging();
 }
 function resetPaging() {
@@ -409,14 +576,16 @@ function textOf(row) {
 function sortRows() {
   state.rows.sort((a, b) => a.entry.at - b.entry.at);
 }
-function matches(row) {
-  return matchesFilter(state.filter, row.entry) && matchesQuery(state.terms, row.entry, textOf(row));
+function matches2(row) {
+  if (state.fromMs !== void 0 && row.entry.at < state.fromMs) return false;
+  if (state.toMs !== void 0 && row.entry.at > state.toMs) return false;
+  return matchesFilter(state.filter, row.entry) && matches(state.query, row.entry, textOf(row));
 }
 function matchingRows(limit = Number.POSITIVE_INFINITY) {
   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);
+    if (row !== void 0 && matches2(row)) shown.push(row);
   }
   return shown;
 }
@@ -438,7 +607,7 @@ function goToFeedPage(page) {
 }
 function matchingCount() {
   let count = 0;
-  for (const row of state.rows) if (matches(row)) count++;
+  for (const row of state.rows) if (matches2(row)) count++;
   return count;
 }
 function oldestAt() {
@@ -489,10 +658,11 @@ var init_store = __esm({
       policy: void 0,
       actors: [],
       actorsTracked: 0,
+      actorScope: "tracked",
       paused: false,
       filter: "all",
       search: "",
-      terms: [],
+      query: { kind: "all" },
       tab: "live",
       open: /* @__PURE__ */ new Set(),
       actor: void 0,
@@ -509,6 +679,8 @@ var init_store = __esm({
       actorsPage: 0,
       feedPageSize: 50,
       actorsPageSize: 25,
+      fromMs: void 0,
+      toMs: void 0,
       caughtUp: 0
     };
   }
@@ -540,6 +712,49 @@ var init_api = __esm({
   }
 });
 
+// src/dashboard/client/saved.ts
+function read(key, fallback) {
+  if (isEmbedded()) return fallback;
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return fallback;
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : fallback;
+  } catch {
+    return fallback;
+  }
+}
+function write(key, value) {
+  if (isEmbedded()) return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function savedFilters() {
+  return read(FILTERS_KEY, []).filter((entry) => typeof entry?.name === "string");
+}
+function saveFilter(entry) {
+  const kept = savedFilters().filter((existing) => existing.name !== entry.name);
+  const next = [entry, ...kept].slice(0, MAX_SAVED);
+  write(FILTERS_KEY, next);
+  return next;
+}
+function deleteFilter(name) {
+  const next = savedFilters().filter((entry) => entry.name !== name);
+  write(FILTERS_KEY, next);
+  return next;
+}
+var FILTERS_KEY, MAX_SAVED;
+var init_saved = __esm({
+  "src/dashboard/client/saved.ts"() {
+    "use strict";
+    init_dom();
+    FILTERS_KEY = "bothandler.filters";
+    MAX_SAVED = 50;
+  }
+});
+
 // src/dashboard/client/format.ts
 function n(value) {
   return numbers.format(value ?? 0);
@@ -703,7 +918,7 @@ var init_replay = __esm({
 function isConfirming() {
   return armed > 0;
 }
-function actorActions(key, after) {
+function actorActions(key, after, current) {
   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";
@@ -715,7 +930,76 @@ function actorActions(key, after) {
   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];
+  const label2 = labelControl(key, current, after);
+  return [confirmingButton("Allowlist", `Allowlist ${key} \u2014 it stops being assessed at all`, () => allowlist(key, after)), forget, clear2, label2];
+}
+function labelControl(key, current, after) {
+  const host = el("span", "label-edit");
+  const button = el("button", null, current === void 0 ? "Label" : "Relabel");
+  button.title = "Give this actor a name, for whoever reads this next. It never changes a verdict.";
+  const commit = (value) => {
+    const trimmed = value.trim().slice(0, 120);
+    void act(
+      { key, action: "label", ...trimmed === "" ? {} : { label: trimmed } },
+      trimmed === "" ? `Cleared the label on ${key}` : `Labelled ${key}`,
+      trimmed === "" ? "It shows as its address again." : `Shown as "${trimmed}" wherever it appears.`,
+      after
+    );
+  };
+  button.addEventListener("click", () => {
+    const container2 = host.parentElement;
+    clear(host);
+    const input = el("input", "label-input");
+    input.type = "text";
+    input.value = current ?? "";
+    input.placeholder = "A name for this client";
+    input.setAttribute("aria-label", `Name for ${key}`);
+    input.maxLength = 120;
+    const save = el("button", "label-save", "Save");
+    save.title = "Save this name";
+    const cancel = el("button", null, "Cancel");
+    cancel.title = "Leave the name as it was";
+    input.title = "Enter to save, Escape to cancel";
+    armed++;
+    container2?.classList.add("editing");
+    let settled = false;
+    const finish = (accept) => {
+      if (settled) return;
+      settled = true;
+      armed--;
+      container2?.classList.remove("editing");
+      if (accept) commit(input.value);
+      else {
+        clear(host);
+        host.appendChild(button);
+      }
+    };
+    for (const control of [input, save, cancel]) {
+      control.addEventListener("keydown", (event) => {
+        const pressed = event.key;
+        if (pressed === "Escape") {
+          event.preventDefault();
+          finish(false);
+        } else if (pressed === "Enter" && control === input) {
+          event.preventDefault();
+          finish(true);
+        }
+      });
+    }
+    for (const control of [save, cancel]) control.addEventListener("mousedown", (event) => event.preventDefault());
+    save.addEventListener("click", () => finish(true));
+    cancel.addEventListener("click", () => finish(false));
+    host.addEventListener("focusout", (event) => {
+      const next = event.relatedTarget;
+      if (next !== null && host.contains(next)) return;
+      finish(false);
+    });
+    host.append(input, save, cancel);
+    input.focus();
+    input.select();
+  });
+  host.appendChild(button);
+  return host;
 }
 function confirmingButton(label2, confirmation, run2) {
   const button = el("button", "danger", label2);
@@ -1013,8 +1297,8 @@ function drawGuard() {
   preview.addEventListener("click", () => {
     void previewGuard();
   });
-  const apply = el("button", "primary", "Apply");
-  apply.addEventListener("click", () => {
+  const apply2 = el("button", "primary", "Apply");
+  apply2.addEventListener("click", () => {
     void applyGuard();
   });
   const revert = el("button", null, "Revert");
@@ -1024,7 +1308,7 @@ function drawGuard() {
     drawGuard();
   });
   bar.appendChild(preview);
-  bar.appendChild(apply);
+  bar.appendChild(apply2);
   bar.appendChild(revert);
   panel.appendChild(bar);
 }
@@ -1948,7 +2232,11 @@ function initFeed() {
     setSearch(search.value.trim());
     app.syncUrl();
     app.drawNow();
+    showSuggestions(search);
   });
+  initSuggestions(search);
+  initTimeframe();
+  initSavedFilters(search);
   const exportShown = byId("feed-export");
   exportShown.hidden = !SECTIONS.evidence;
   exportShown.addEventListener("click", () => {
@@ -1972,15 +2260,17 @@ function reflectFilterButtons() {
 }
 async function loadSkipped() {
   const before = state.rows.length;
+  let served;
   try {
     const body = await getJson("/api/feed");
     for (const entry of body.entries) ingest(entry);
+    served = body.skipped;
     sortRows();
   } catch {
     toast("bad", "Could not load them", "The dashboard did not answer. The entries are still in the window; try again.");
     return;
   }
-  state.caughtUp = (state.snapshot?.skipped ?? 0) + state.laggedDrops;
+  state.caughtUp = (served ?? state.snapshot?.skipped ?? 0) + state.laggedDrops;
   const added = state.rows.length - before;
   resetPaging();
   app.drawNow();
@@ -1990,6 +2280,160 @@ async function loadSkipped() {
     added > 0 ? "They are in the feed now, in the order they happened." : "The window no longer holds them; the ring had already rotated past."
   );
 }
+function suggestionList() {
+  return $("search-suggest");
+}
+function closeSuggestions(input) {
+  const list = suggestionList();
+  list.hidden = true;
+  clear(list);
+  highlighted = -1;
+  input.setAttribute("aria-expanded", "false");
+}
+function showSuggestions(input) {
+  const caret = input.selectionStart ?? input.value.length;
+  const { options, from, to } = suggestFor(input.value, caret);
+  const list = suggestionList();
+  if (options.length === 0 || input.value.slice(from, to) === options[0]) {
+    closeSuggestions(input);
+    return;
+  }
+  clear(list);
+  highlighted = -1;
+  options.slice(0, 12).forEach((option, index) => {
+    const item = el("li", null, option);
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", "false");
+    item.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      apply(input, option, from, to);
+    });
+    item.dataset["index"] = String(index);
+    list.appendChild(item);
+  });
+  list.hidden = false;
+  input.setAttribute("aria-expanded", "true");
+}
+function apply(input, option, from, to) {
+  const before = input.value.slice(0, from);
+  const after = input.value.slice(to);
+  input.value = `${before}${option}${after}`;
+  const caret = before.length + option.length;
+  input.setSelectionRange(caret, caret);
+  setSearch(input.value.trim());
+  app.syncUrl();
+  app.drawNow();
+  closeSuggestions(input);
+  showSuggestions(input);
+  input.focus();
+}
+function initSuggestions(input) {
+  input.addEventListener("keydown", (event) => {
+    const list = suggestionList();
+    const items = Array.from(list.querySelectorAll("li"));
+    if (list.hidden || items.length === 0) return;
+    if (event.key === "Escape") {
+      closeSuggestions(input);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      highlighted = (highlighted + (event.key === "ArrowDown" ? 1 : items.length - 1) + (highlighted === -1 && event.key === "ArrowUp" ? 1 : 0)) % items.length;
+      items.forEach((item, index) => item.setAttribute("aria-selected", String(index === highlighted)));
+      return;
+    }
+    if ((event.key === "Enter" || event.key === "Tab") && highlighted >= 0) {
+      const chosen = items[highlighted]?.textContent ?? "";
+      const caret = input.selectionStart ?? input.value.length;
+      const { from, to } = suggestFor(input.value, caret);
+      event.preventDefault();
+      apply(input, chosen, from, to);
+    }
+  });
+  input.addEventListener("blur", () => {
+    setTimeout(() => closeSuggestions(input), 120);
+  });
+  input.addEventListener("focus", () => showSuggestions(input));
+}
+function initSavedFilters(input) {
+  const host = $("saved-filters");
+  const redraw = () => {
+    clear(host);
+    const entries = savedFilters();
+    const select2 = document.createElement("select");
+    select2.setAttribute("aria-label", "Saved filters");
+    const first = document.createElement("option");
+    first.value = "";
+    first.textContent = entries.length === 0 ? "No saved filters" : "Saved filters\u2026";
+    select2.appendChild(first);
+    for (const entry of entries) {
+      const option = document.createElement("option");
+      option.value = entry.name;
+      option.textContent = entry.name;
+      select2.appendChild(option);
+    }
+    select2.addEventListener("change", () => {
+      const chosen = entries.find((entry) => entry.name === select2.value);
+      if (chosen === void 0) return;
+      input.value = chosen.query;
+      setSearch(chosen.query);
+      state.filter = chosen.filter;
+      reflectFilterButtons();
+      resetPaging();
+      app.syncUrl();
+      app.drawNow();
+    });
+    host.appendChild(select2);
+    const save = el("button", null, "Save");
+    save.type = "button";
+    save.title = "Save this filter, in this browser, under a name";
+    save.addEventListener("click", () => {
+      const name = prompt("Save this filter as:")?.trim();
+      if (name === void 0 || name === "") return;
+      saveFilter({ name, query: input.value.trim(), filter: state.filter });
+      redraw();
+      toast("ok", "Filter saved", `"${name}" is in this browser. It is not shared with anybody else.`);
+    });
+    host.appendChild(save);
+    if (select2.value !== "") {
+      const remove = el("button", null, "Delete");
+      remove.type = "button";
+      remove.addEventListener("click", () => {
+        deleteFilter(select2.value);
+        redraw();
+      });
+      host.appendChild(remove);
+    }
+  };
+  redraw();
+}
+function initTimeframe() {
+  const from = byId("from-at");
+  const to = byId("to-at");
+  const clearButton = byId("timeframe-clear");
+  const read2 = (input) => {
+    if (input.value === "") return void 0;
+    const parsed = new Date(input.value).getTime();
+    return Number.isFinite(parsed) ? parsed : void 0;
+  };
+  const apply2 = () => {
+    const start2 = read2(from);
+    const end = read2(to);
+    if (start2 !== void 0 && end !== void 0 && end < start2) {
+      toast("warn", "That window runs backwards", "The end is before the start, so nothing can fall inside it.");
+    }
+    setTimeframe(start2, end);
+    clearButton.hidden = start2 === void 0 && end === void 0;
+    app.drawNow();
+  };
+  from.addEventListener("change", apply2);
+  to.addEventListener("change", apply2);
+  clearButton.addEventListener("click", () => {
+    from.value = "";
+    to.value = "";
+    apply2();
+  });
+}
 function drawPager(paged) {
   const size = state.feedPageSize;
   const hidden = paged.pages <= 1;
@@ -2158,12 +2602,13 @@ function buildDetail(entry) {
   } else {
     const list = el("div", "ev");
     for (const item of entry.evidence) {
-      const row = el("div", `ev-item${item.direction === "human" ? " human" : ""}`);
+      const row = el("div", `ev-item${item.direction === "human" ? " human" : ""}${item.shadow === true ? " shadow" : ""}`);
       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`;
+      if (item.shadow === true) meta += " \xB7 shadowed: counted, and part of no decision";
       body.appendChild(el("div", "ev-meta", meta));
       if (item.deterministicBasis !== void 0) body.appendChild(el("div", "basis", item.deterministicBasis));
       row.appendChild(body);
@@ -2171,6 +2616,17 @@ function buildDetail(entry) {
     }
     cell.appendChild(list);
   }
+  if (entry.shadowVerdict !== void 0) {
+    const would = entry.shadowVerdict;
+    const changed = would.verdict !== entry.verdict;
+    cell.appendChild(
+      el(
+        "div",
+        `ev-meta shadow-verdict${changed ? " changed" : ""}`,
+        changed ? `With the shadowed detectors counted, this request would have been ${would.verdict} at ${would.score} instead of ${entry.verdict} at ${entry.score}.` : `With the shadowed detectors counted, this request would still have been ${would.verdict}${would.score === entry.score ? "" : `, at ${would.score} rather than ${entry.score}`}.`
+      )
+    );
+  }
   for (const failure of entry.failures) {
     cell.appendChild(el("div", "ev-meta", `Detector ${failure.detector} ${failure.reason}: ${failure.message}`));
   }
@@ -2272,12 +2728,14 @@ function showText(text) {
     selection.addRange(range);
   }
 }
-var FILTERS, rendered, FEED_PAGE_SIZES;
+var FILTERS, rendered, highlighted, FEED_PAGE_SIZES;
 var init_feed = __esm({
   "src/dashboard/client/feed.ts"() {
     "use strict";
     init_dom();
     init_store();
+    init_saved();
+    init_query();
     init_api();
     init_pager();
     init_boot();
@@ -2298,6 +2756,7 @@ var init_feed = __esm({
       ["allow", "Served"]
     ];
     rendered = /* @__PURE__ */ new Map();
+    highlighted = -1;
     FEED_PAGE_SIZES = [25, 50, 100, 200];
   }
 });
@@ -2500,6 +2959,13 @@ function drawStatsPanels() {
       ["Actors tracked", n(metrics.actorsTracked)],
       ["Guard stops", n(metrics.downgrades)]
     ];
+    const shadowed = pairs(metrics.shadowFirings);
+    if (shadowed.length > 0) {
+      const moved = Object.entries(metrics.shadowChanges).filter(([, count]) => count > 0);
+      rows.push(["Shadowed findings", n(shadowed.reduce((total, [, count]) => total + count, 0))]);
+      for (const [verdict, count] of moved) rows.push([`Would have become ${verdict}`, n(count)]);
+      if (moved.length === 0) rows.push(["Verdicts they would have changed", "none"]);
+    }
     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));
@@ -2516,14 +2982,14 @@ function drawStatsPanels() {
   clear(list);
   $("detector-count").textContent = `${snapshot.detectors.length} installed`;
   for (const detector of snapshot.detectors) {
-    const row = el("div", "det");
+    const row = el("div", `det${detector.shadow === true ? " shadow" : ""}`);
     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 fires = (detector.shadow === true ? metrics?.shadowFirings[detector.id] : metrics?.detectorFirings[detector.id]) ?? 0;
     const timing = metrics?.detectorTimings[detector.id];
-    let right = `${n(fires)} \xB7 ${detector.cost} \xB7 ${detector.stage}`;
+    let right = `${n(fires)}${detector.shadow === true ? " shadowed" : ""} \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);
@@ -3047,6 +3513,7 @@ function trackActors() {
   void loadActors();
   timer = setInterval(() => {
     if (state.tab !== "actors" || state.paused || isConfirming()) return;
+    if (state.actorScope === "feed") return;
     void loadActors();
   }, 4e3);
 }
@@ -3085,26 +3552,95 @@ function drawActorsPager(full) {
     else renderPager(host, model, { withSize });
   }
 }
+function feedActors() {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const row of matchingRows()) {
+    const entry = row.entry;
+    let seen = byKey.get(entry.actor);
+    if (seen === void 0) {
+      seen = { rows: 0, paths: /* @__PURE__ */ new Set(), agents: /* @__PURE__ */ new Set(), first: entry.at, last: entry.at };
+      byKey.set(entry.actor, seen);
+    }
+    seen.rows++;
+    seen.paths.add(entry.path);
+    seen.agents.add(entry.userAgent);
+    if (entry.at < seen.first) seen.first = entry.at;
+    if (entry.at > seen.last) seen.last = entry.at;
+    seen.stats = entry.actorStats ?? seen.stats;
+  }
+  const labels = new Map(state.actors.filter((actor) => actor.label !== void 0).map((actor) => [actor.key, actor.label]));
+  const out = [];
+  for (const [key, seen] of byKey) {
+    const label2 = labels.get(key);
+    out.push({
+      key,
+      ...label2 === void 0 ? {} : { label: label2 },
+      requests: seen.rows,
+      recentRate: Number.NaN,
+      distinctPaths: seen.paths.size,
+      distinctUserAgents: seen.agents.size,
+      cadenceCv: void 0,
+      // A dash where the feed cannot know, like the three columns below it. A confident
+      // zero under a heading that means "how many times has this client been proven a bot"
+      // is worse than an admission, and it was the only column here still guessing.
+      priorConfirmations: seen.stats?.priorConfirmations ?? Number.NaN,
+      unsolvedChallenges: Number.NaN,
+      cleared: seen.stats?.cleared ?? false,
+      firstSeen: seen.stats?.firstSeen ?? seen.first,
+      lastSeen: seen.last
+    });
+  }
+  return out.sort((a, b) => b.requests - a.requests);
+}
+function applyActorScope(scope) {
+  if (!SECTIONS.registry) return;
+  state.actorScope = scope;
+  for (const [id, on] of [
+    ["actors-scope-tracked", scope === "tracked"],
+    ["actors-scope-feed", scope === "feed"]
+  ]) {
+    byId(id).className = on ? "on" : "";
+    byId(id).setAttribute("aria-pressed", String(on));
+  }
+  drawActors();
+}
+function initActorScope() {
+  if (!SECTIONS.registry) return;
+  const choose = (scope) => {
+    applyActorScope(scope);
+    app.syncUrl({ replace: false });
+  };
+  $("actors-scope-tracked").addEventListener("click", () => choose("tracked"));
+  $("actors-scope-feed").addEventListener("click", () => choose("feed"));
+}
 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`;
-  drawActorsPager(actors.length === state.actorsPageSize);
+  const fromFeed = state.actorScope === "feed";
+  const actors = fromFeed ? feedActors() : state.actors;
+  $("actors-count").textContent = fromFeed ? `${n(actors.length)} in the feed you are looking at \xB7 ${n(state.actorsTracked)} tracked` : `${n(actors.length)} shown \xB7 ${n(state.actorsTracked)} tracked`;
+  drawActorsPager(!fromFeed && actors.length === state.actorsPageSize);
+  if (fromFeed) for (const id of ["actors-pager-top", "actors-pager"]) byId(id).hidden = true;
   byId("actors-empty").hidden = actors.length > 0;
   for (const actor of actors) {
     const row = el("tr");
-    row.appendChild(el("td", "who", actor.key));
+    const who = el("td", "who");
+    if (actor.label === void 0) who.textContent = actor.key;
+    else {
+      who.appendChild(el("div", "label", actor.label));
+      who.appendChild(el("div", "sub", actor.key));
+    }
+    row.appendChild(who);
     row.appendChild(el("td", "num tnum", n(actor.requests)));
-    row.appendChild(el("td", "num tnum", n(actor.recentRate)));
+    row.appendChild(el("td", "num tnum", Number.isNaN(actor.recentRate) ? "\u2014" : 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));
+    row.appendChild(el("td", "num tnum", Number.isNaN(actor.priorConfirmations) ? "\u2014" : n(actor.priorConfirmations)));
+    const unsolved = el("td", "num tnum", Number.isNaN(actor.unsolvedChallenges) ? "\u2014" : n(actor.unsolvedChallenges));
     if (actor.unsolvedChallenges >= 3) unsolved.className += " warn-text";
     row.appendChild(unsolved);
     const stateCell = el("td");
@@ -3125,7 +3661,7 @@ function drawActors() {
       app.syncUrl();
     });
     actions.appendChild(inFeed);
-    for (const button of actorActions(actor.key, () => void loadActors())) actions.appendChild(button);
+    for (const button of actorActions(actor.key, () => void loadActors(), actor.label)) actions.appendChild(button);
     row.appendChild(actions);
     body.appendChild(row);
   }
@@ -3158,13 +3694,13 @@ function initTester() {
   });
 }
 async function run() {
-  const raw2 = byId("test-input").value;
-  if (raw2.trim() === "") {
+  const raw = byId("test-input").value;
+  if (raw.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,
+    raw,
     ip: byId("test-ip").value.trim(),
     url: byId("test-url").value.trim()
   });
@@ -3304,12 +3840,12 @@ function initHeader() {
   }
   const header = rootNode().querySelector("header");
   if (header !== null) {
-    const apply = () => {
+    const apply2 = () => {
       themeElement().style.setProperty("--header-h", `${header.getBoundingClientRect().height}px`);
     };
-    apply();
-    if (typeof ResizeObserver === "function") new ResizeObserver(apply).observe(header);
-    else addEventListener("resize", apply);
+    apply2();
+    if (typeof ResizeObserver === "function") new ResizeObserver(apply2).observe(header);
+    else addEventListener("resize", apply2);
   }
 }
 function syncUrl(replace = true) {
@@ -3317,21 +3853,25 @@ function syncUrl(replace = true) {
   const params = new URLSearchParams();
   if (state.filter !== "all") params.set("f", state.filter);
   if (state.search !== "") params.set("q", state.search);
+  if (state.actorScope !== "tracked") params.set("a", state.actorScope);
   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 raw = isEmbedded() ? "" : location.hash.slice(1);
+  const split = raw.indexOf("?");
+  const name = split === -1 ? raw : raw.slice(0, split);
+  const params = new URLSearchParams(split === -1 ? "" : raw.slice(split + 1));
   const filter = params.get("f") ?? "all";
   return {
     tab: isTab(name) ? name : FIRST,
     filter,
-    search: params.get("q") ?? ""
+    search: params.get("q") ?? "",
+    // Anything but the one alternative reads as the default rather than as an error:
+    // a hand-edited URL should land somewhere, and this is the somewhere it lands.
+    actorScope: params.get("a") === "feed" ? "feed" : "tracked"
   };
 }
 function showTab(name, options = {}) {
@@ -3375,6 +3915,7 @@ function initTabs() {
     state.filter = url.filter;
     setSearch(url.search);
     reflectFilterButtons();
+    applyActorScope(url.actorScope);
     showTab(url.tab, { push: false });
   });
 }
@@ -3516,7 +4057,7 @@ function start() {
   app.draw = schedule;
   app.drawNow = drawNow;
   app.showTab = showTab;
-  app.syncUrl = () => syncUrl();
+  app.syncUrl = (options) => syncUrl(options?.replace !== false);
   applySections();
   initHeader();
   drawPeers();
@@ -3526,6 +4067,7 @@ function start() {
   initRanges();
   if (SECTIONS.feed) initFeed();
   initActor();
+  initActorScope();
   initTester();
   initPolicy();
   let resizeTimer;
@@ -3543,6 +4085,7 @@ function start() {
   state.filter = url.filter;
   setSearch(url.search);
   if (SECTIONS.feed) reflectFilterButtons();
+  applyActorScope(url.actorScope);
   showTab(url.tab, { replace: true });
   suspendScrollAnchoring();
   void loadInitialSnapshot().finally(settleScrollAnchoring);
@@ -3640,12 +4183,12 @@ function resolveSections(fromServer, config) {
   }
   return { sections, warnings };
 }
-function parseMount(raw2) {
-  const cut = raw2.search(/[?#]/);
-  if (cut === -1) return { base: raw2.replace(/\/$/, "") };
+function parseMount(raw) {
+  const cut = raw.search(/[?#]/);
+  if (cut === -1) return { base: raw.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.`
+    base: raw.slice(0, cut).replace(/\/$/, ""),
+    warning: `src "${raw}" has a ${raw[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) {
@@ -3894,6 +4437,33 @@ button.tile {
   cursor: pointer; appearance: none; transition: border-color .12s, box-shadow .12s;
 }
 button.tile:hover { border-color: var(--focus); }
+/* The suggestion list under the search box, positioned against the search wrapper. */
+.search { position: relative; }
+.suggest {
+  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; margin: 0; padding: 4px;
+  list-style: none; min-width: 220px; max-height: 260px; overflow-y: auto;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
+}
+.suggest li { padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; }
+.suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--focus) 18%, transparent); }
+
+/* Saved filters: a list of small removable things. Quiet, because it is not what
+   somebody came to the page to look at. */
+.saved { display: flex; align-items: center; gap: 6px; }
+/* Two open-ended bounds rather than a list of durations: "from the incident until now",
+   "everything up to when it stopped" and "between these two moments" are the same control
+   with one end left empty. */
+.timeframe { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
+.timeframe label { display: inline-flex; align-items: center; gap: 4px; }
+.timeframe input {
+  font: inherit; font-size: 11.5px; padding: 2px 5px; border-radius: 6px;
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
+}
+.timeframe button { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
+.saved select { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 170px; }
+.saved button { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
+.saved button:hover { border-color: var(--focus); }
+
 /* The badge's companion: fetches the entries the stream skipped. Sits inline with the
    heading, so it is styled to read as part of the sentence rather than as a form control. */
 .load-skipped {
@@ -3915,6 +4485,10 @@ button.tile:hover { border-color: var(--focus); }
 .pager button:hover:not(:disabled) { border-color: var(--focus); }
 .pager button:disabled { opacity: .45; cursor: default; }
 .pager .where { font-variant-numeric: tabular-nums; }
+/* A labelled actor leads with its name and keeps the key underneath: whoever named it did
+   so because the key was not the useful part, and the key is still what you search for. */
+td.who .label { font-weight: 560; }
+td.who .sub { color: var(--muted); font-size: 11px; }
 .pager.pager-top { padding: 2px 2px 9px; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
 /* The feed's upper pager rides in the toolbar rather than owning a row of its own, which
    was thirty-six pixels of mostly empty rule above every screenful of requests. */
@@ -4035,7 +4609,29 @@ input[type="search"] {
 }
 input[type="search"]::placeholder { color: var(--muted); }
 
-table { width: 100%; border-collapse: collapse; }
+/* separate with zero spacing rather than collapse, and the difference is the whole
+   reason the column headers work in Safari.
+
+   Collapsed borders and sticky table cells are a long-standing sore point in WebKit: the
+   CSSWG has an open issue on collapsed borders not following a cell when it sticks
+   (csswg-drafts#3136), and Safari is widely reported to drop the stickiness of a th
+   altogether under a collapsed table. Separating the borders is the standard remedy.
+
+   What was actually measured: the header sticks correctly in Chromium and in Firefox,
+   both before and after this change, and it was reported adrift in Safari — which is what
+   a sticky element that has stopped sticking looks like. WebKit could not be run on the
+   machine this was written on, so the Safari half of it rests on that report and on the
+   documented behaviour rather than on a measurement taken here.
+
+   The rendering is all but unchanged. Every border in these tables is a bottom border on
+   the cell itself, plus the per-cell left accent on td.edge; no border is shared between
+   two cells, so there is nothing for collapsing to merge and nothing for separating to
+   double, and zero spacing keeps the cells touching. The one measurable difference is the
+   accent column, which moves two pixels: collapsing centres that 3px border on the cell
+   edge and leaves half of it outside the box, while separating puts all of it inside.
+   Measured rather than assumed, and the leftmost column starting two pixels earlier is
+   both imperceptible and the more correct of the two. */
+table { width: 100%; border-collapse: separate; border-spacing: 0; }
 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. */
@@ -4327,9 +4923,44 @@ input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
 #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; }
+/* The tracked/shown toggle above the actors table. A segmented pair rather than a
+   dropdown: there are two answers and both are worth reading at a glance. */
+.scope { display: flex; gap: 6px; padding: 0 14px 10px; }
+.scope button { font-size: 11.5px; padding: 4px 10px; }
+.scope button.on { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
+
 #actor-rows td.acts button { font-size: 11px; padding: 3px 8px; margin-left: 4px; }
+/* The Label control, which becomes a text box with a Save and a Cancel in place.
+
+   The cell does not wrap, so an editor that sat beside the row's other four buttons put
+   Save off the right edge of the panel, where it could be seen and not clicked. While
+   the editor is open it stands in for those buttons instead — which is also the right
+   thing on its own, since Allowlist and Forget are not what somebody naming a client is
+   reaching for. */
+.acts.editing > :not(.label-edit), .bar-actions.editing > :not(.label-edit) { display: none; }
+/* inline-flex rather than inline-block: the row is three fixed-size controls and a flex
+   line is the layout that cannot spill them past its own edge. */
+.label-edit { display: inline-flex; align-items: center; gap: 4px; }
+.label-edit button { flex: 0 0 auto; }
+#actor-rows td.acts .label-save, #actor-actions .label-save { border-color: var(--accent); color: var(--accent); }
+/* Qualified with the element name on purpose: input[type="text"] { width: 100% } above
+   outranks a bare class, so the width here was quietly ignored and the box grew to fill
+   whatever it was in — which is what put Save and Cancel outside the panel. */
+input.label-input {
+  font: inherit; font-size: 11px; padding: 3px 8px; width: 15ch; flex: 0 0 auto; box-sizing: border-box;
+  color: var(--ink); background: var(--surface); border: 1px solid var(--accent); border-radius: 6px;
+}
+input.label-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+
 /* 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. */
+/* A shadowed finding: shown at full detail, and visibly not part of the decision. Dimmed
+   and set behind a rule rather than coloured, because every colour on this page already
+   means something about a verdict and this one took no part in a verdict. */
+.det.shadow { opacity: 0.72; }
+.ev-item.shadow { opacity: 0.72; border-left: 2px dashed var(--line); padding-left: 8px; }
+.shadow-verdict { margin-top: 8px; font-style: italic; }
+.shadow-verdict.changed { color: var(--ink-2); font-style: normal; }
 .tagline { font-size: 11px; color: var(--muted); }
 .tagline b { color: var(--ink-2); font-weight: 600; }
 
@@ -4427,8 +5058,16 @@ var DASHBOARD_MARKUP = String.raw`
         <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">
+            <input type="search" id="search" placeholder="path:/api  actor:203.0.113.4  -rule:allow-crawlers" spellcheck="false" autocomplete="off"
+                   role="combobox" aria-expanded="false" aria-controls="search-suggest" aria-autocomplete="list">
             <kbd aria-hidden="true">/</kbd>
+            <ul class="suggest" id="search-suggest" role="listbox" aria-label="Filter suggestions" hidden></ul>
+          </div>
+          <div class="saved" id="saved-filters"></div>
+          <div class="timeframe" id="timeframe">
+            <label>From <input type="datetime-local" id="from-at" step="1"></label>
+            <label>To <input type="datetime-local" id="to-at" step="1"></label>
+            <button type="button" id="timeframe-clear" hidden>Clear</button>
           </div>
           <button id="feed-export" title="Download every request matching this filter as replay JSONL">Export</button>
           <div class="pager pager-inline" id="feed-pager-top" hidden></div>
@@ -4492,6 +5131,12 @@ var DASHBOARD_MARKUP = String.raw`
       <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="scope" role="group" aria-label="Which actors to list">
+        <button id="actors-scope-tracked" class="on" aria-pressed="true"
+          title="Every client the engine is remembering, busiest first">Tracked</button>
+        <button id="actors-scope-feed" aria-pressed="false"
+          title="Only the clients that appear in the feed you are looking at, after its filter">Shown in the feed</button>
+      </div>
       <div class="pager pager-top" id="actors-pager-top" hidden></div>
       <div class="feed-scroll">
         <table>
@@ -4936,6 +5581,8 @@ var BotDashboardElement = class extends ElementBase {
     const dom = await Promise.resolve().then(() => (init_dom(), dom_exports));
     dom.setRoot(frame, this);
     globalThis.__BOOTSTRAP__ = boot;
+    const bootModule = await Promise.resolve().then(() => (init_boot(), boot_exports));
+    bootModule.applyBoot(boot);
     await Promise.resolve().then(() => (init_client(), client_exports));
     this.relabelTabs(shadow);
     this.renderPanels(frame);