@osqd/bothandlerjs 0.4.0 → 0.5.0

package/dist/element/index.js

@@ -391,19 +391,28 @@ function clearFeed() {
   state.actor = void 0;
   state.bufferedWhilePaused = 0;
   state.laggedDrops = 0;
+  resetPaging();
 }
 function setSearch(value) {
   state.search = value;
   state.terms = parseQuery(value);
+  resetPaging();
+}
+function resetPaging() {
+  state.feedPage = 0;
+  state.feedFrozen = void 0;
 }
 function textOf(row) {
   if (row.text === void 0) row.text = searchableText(row.entry);
   return row.text;
 }
+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 visibleRows(limit = FEED_LIMIT) {
+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];
@@ -411,6 +420,22 @@ function visibleRows(limit = FEED_LIMIT) {
   }
   return shown;
 }
+function feedPage(size) {
+  const all = state.feedPage === 0 || state.feedFrozen === void 0 ? matchingRows() : state.feedFrozen;
+  const pages = Math.max(1, Math.ceil(all.length / size));
+  const page = Math.min(Math.max(0, state.feedPage), pages - 1);
+  if (page !== state.feedPage) state.feedPage = page;
+  return { rows: all.slice(page * size, page * size + size), page, pages, total: all.length };
+}
+function goToFeedPage(page) {
+  const next = Math.max(0, page);
+  if (next === 0) {
+    state.feedFrozen = void 0;
+  } else if (state.feedFrozen === void 0) {
+    state.feedFrozen = matchingRows();
+  }
+  state.feedPage = next;
+}
 function matchingCount() {
   let count = 0;
   for (const row of state.rows) if (matches(row)) count++;
@@ -450,14 +475,13 @@ function aggregate(rows) {
   }
   return totals;
 }
-var MAX_ROWS, FEED_LIMIT, state;
+var MAX_ROWS, 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(),
@@ -479,7 +503,13 @@ var init_store = __esm({
       editorMode: "gui",
       guardDirty: false,
       bufferedWhilePaused: 0,
-      laggedDrops: 0
+      laggedDrops: 0,
+      feedPage: 0,
+      feedFrozen: void 0,
+      actorsPage: 0,
+      feedPageSize: 50,
+      actorsPageSize: 25,
+      caughtUp: 0
     };
   }
 });
@@ -534,7 +564,18 @@ function rangeLabel(milliseconds) {
   return minutes < 90 ? `${minutes} min` : `${Math.round(minutes / 60)}h`;
 }
 function clockTime(at) {
-  return new Date(at).toLocaleTimeString();
+  const when = new Date(at);
+  return `${pad(when.getHours())}:${pad(when.getMinutes())}:${pad(when.getSeconds())}`;
+}
+function clockDate(at) {
+  const when = new Date(at);
+  return `${pad(when.getDate())}-${pad(when.getMonth() + 1)}-${when.getFullYear()}`;
+}
+function clockStamp(at) {
+  return `${clockDate(at)} ${clockTime(at)}`;
+}
+function pad(value) {
+  return String(value).padStart(2, "0");
 }
 function windowLabel(count, oldestAt2, now) {
   if (count === 0) return "this window \xB7 empty";
@@ -549,6 +590,68 @@ var init_format = __esm({
   }
 });
 
+// src/dashboard/client/pager.ts
+function renderPager(host, model, options) {
+  const signature = JSON.stringify([model.page, model.from, model.to, model.total, model.atStart, model.atEnd, model.held ?? "", options.withSize, model.size?.current]);
+  if (painted.get(host) === signature && host.childElementCount > 0) return;
+  painted.set(host, signature);
+  clear(host);
+  const steps = [
+    { to: model.page - 1, glyph: "\u2039", label: "Previous page", disabled: model.atStart },
+    { to: model.page + 1, glyph: "\u203A", label: "Next page", disabled: model.atEnd }
+  ];
+  const [previous, next] = steps;
+  host.appendChild(stepButton(previous, model));
+  const range = model.total === void 0 ? `${n(model.from)}\u2013${n(model.to)}` : `${n(model.from)}\u2013${n(model.to)} of ${n(model.total)}`;
+  const where = el("span", "where", range);
+  where.setAttribute("aria-live", "polite");
+  host.appendChild(where);
+  host.appendChild(stepButton(next, model));
+  if (model.held !== void 0) {
+    const held = el("span", "held", model.held);
+    held.title = "New requests are still arriving and are still counted. They appear when you return to the first page.";
+    host.appendChild(held);
+  }
+  if (options.withSize && model.size !== void 0) {
+    const size = model.size;
+    const label2 = el("label", "size");
+    label2.appendChild(document.createTextNode("Per page"));
+    const select2 = document.createElement("select");
+    for (const choice of size.choices) {
+      const option = document.createElement("option");
+      option.value = String(choice);
+      option.textContent = String(choice);
+      option.selected = choice === size.current;
+      select2.appendChild(option);
+    }
+    select2.addEventListener("change", () => {
+      const chosen = Number(select2.value);
+      if (Number.isFinite(chosen) && chosen > 0) size.set(chosen);
+    });
+    label2.appendChild(select2);
+    host.appendChild(label2);
+  }
+}
+function stepButton(step, model) {
+  const button = el("button", "step", step.glyph);
+  const element = button;
+  element.type = "button";
+  element.disabled = step.disabled;
+  button.setAttribute("aria-label", step.label);
+  button.title = step.label;
+  button.addEventListener("click", () => model.go(Math.max(0, step.to)));
+  return button;
+}
+var painted;
+var init_pager = __esm({
+  "src/dashboard/client/pager.ts"() {
+    "use strict";
+    init_dom();
+    init_format();
+    painted = /* @__PURE__ */ new WeakMap();
+  }
+});
+
 // src/dashboard/client/replay.ts
 function replayLine(entry) {
   const headers = {};
@@ -739,7 +842,7 @@ function drawActor() {
     ["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"],
+    ["First seen", stats !== void 0 ? clockStamp(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) {
@@ -1818,6 +1921,13 @@ var init_policy = __esm({
 
 // src/dashboard/client/feed.ts
 function initFeed() {
+  const loadThem = byId("feed-load-skipped");
+  loadThem.addEventListener("click", () => {
+    loadThem.disabled = true;
+    void loadSkipped().finally(() => {
+      loadThem.disabled = false;
+    });
+  });
   const filters = $("filters");
   for (const [name, label2] of FILTERS) {
     const button = el("button", null, label2);
@@ -1825,6 +1935,7 @@ function initFeed() {
     button.dataset["filter"] = name;
     button.addEventListener("click", () => {
       state.filter = name;
+      resetPaging();
       for (const other of Array.from(filters.children)) other.setAttribute("aria-pressed", "false");
       button.setAttribute("aria-pressed", "true");
       app.syncUrl();
@@ -1841,7 +1952,7 @@ function initFeed() {
   const exportShown = byId("feed-export");
   exportShown.hidden = !SECTIONS.evidence;
   exportShown.addEventListener("click", () => {
-    const rows = visibleRows(Number.POSITIVE_INFINITY);
+    const rows = matchingRows();
     if (rows.length === 0) {
       toast("warn", "Nothing to export", "No request in the window matches this filter.");
       return;
@@ -1859,9 +1970,65 @@ function reflectFilterButtons() {
   const search = byId("search");
   if (search.value !== state.search) search.value = state.search;
 }
+async function loadSkipped() {
+  const before = state.rows.length;
+  try {
+    const body = await getJson("/api/feed");
+    for (const entry of body.entries) ingest(entry);
+    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;
+  const added = state.rows.length - before;
+  resetPaging();
+  app.drawNow();
+  toast(
+    added > 0 ? "ok" : "warn",
+    added > 0 ? `Loaded ${n(added)}` : "Nothing left to load",
+    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 drawPager(paged) {
+  const size = state.feedPageSize;
+  const hidden = paged.pages <= 1;
+  const model = {
+    page: paged.page,
+    from: paged.page * size + 1,
+    to: Math.min(paged.total, (paged.page + 1) * size),
+    total: paged.total,
+    atStart: paged.page === 0,
+    atEnd: paged.page >= paged.pages - 1,
+    ...paged.page > 0 ? { held: "held while you read" } : {},
+    go: (page) => {
+      goToFeedPage(page);
+      app.drawNow();
+    },
+    size: {
+      current: size,
+      choices: FEED_PAGE_SIZES,
+      set: (next) => {
+        state.feedPageSize = next;
+        resetPaging();
+        app.drawNow();
+      }
+    }
+  };
+  for (const [id, withSize] of [
+    ["feed-pager-top", true],
+    ["feed-pager", false]
+  ]) {
+    const host = $(id);
+    host.hidden = hidden;
+    if (hidden) clear(host);
+    else renderPager(host, model, { withSize });
+  }
+}
 function drawFeed() {
   const body = byId("rows");
-  const shown = visibleRows();
+  const paged = feedPage(state.feedPageSize);
+  const shown = paged.rows;
   let index = 0;
   const place = (node) => {
     const current = body.childNodes[index] ?? null;
@@ -1892,11 +2059,13 @@ function drawFeed() {
   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;
+  $("feed-count").textContent = matching === total ? `${n(total)} in this window` : `${n(matching)} of ${n(total)}`;
+  drawPager(paged);
+  const skipped = Math.max(0, (state.snapshot?.skipped ?? 0) + state.laggedDrops - state.caughtUp);
   const note = $("feed-skipped");
   note.hidden = skipped === 0;
   note.textContent = `${n(skipped)} not streamed`;
+  byId("feed-load-skipped").hidden = skipped === 0;
   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() {
@@ -2103,12 +2272,14 @@ function showText(text) {
     selection.addRange(range);
   }
 }
-var FILTERS, rendered;
+var FILTERS, rendered, FEED_PAGE_SIZES;
 var init_feed = __esm({
   "src/dashboard/client/feed.ts"() {
     "use strict";
     init_dom();
     init_store();
+    init_api();
+    init_pager();
     init_boot();
     init_app();
     init_format();
@@ -2127,6 +2298,7 @@ var init_feed = __esm({
       ["allow", "Served"]
     ];
     rendered = /* @__PURE__ */ new Map();
+    FEED_PAGE_SIZES = [25, 50, 100, 200];
   }
 });
 
@@ -2231,27 +2403,34 @@ function drawTiles(force = false) {
   const total = metrics.requests;
   const unremarkable = metrics.verdicts.unknown + metrics.verdicts.human;
   const provenBotCount = provenBots(metrics.verdicts);
+  const actors = SECTIONS.registry ? { tab: "actors", label: "Actors" } : void 0;
   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(total), "Requests", "since start", void 0],
+    ["proven", n(provenBotCount), "Proven bots", `${pct(provenBotCount, total)} of traffic`, void 0],
+    ["warn", n(metrics.verdicts["suspected-bot"]), "Suspected", "never denied alone", void 0],
+    ["", n(unremarkable), "Unremarkable", `${pct(unremarkable, total)} of traffic`, void 0],
+    ["warn", n(metrics.downgrades), "Guard stops", metrics.downgrades > 0 ? "a rule over-reached" : "no rule overreached", void 0],
+    ["crit", n(denied), "Denied", `${pct(denied, total)} of traffic`, void 0],
     [
       "",
       n(mitigated),
       "Mitigated",
-      metrics.challenges.issued > 0 ? `${n(metrics.challenges.solved)} of ${n(metrics.challenges.issued)} challenges solved` : "challenged, limited or delayed"
+      metrics.challenges.issued > 0 ? `${n(metrics.challenges.solved)} of ${n(metrics.challenges.issued)} challenges solved` : "challenged or limited",
+      void 0
     ],
-    ["good", n(served), "Served", `${pct(served, total)} of traffic`],
-    ["", n(metrics.actorsTracked), "Actors tracked", "in the registry now"]
+    ["good", n(served), "Served", `${pct(served, total)} of traffic`, void 0],
+    ["", n(metrics.actorsTracked), "Actors tracked", "in the registry now", actors]
   ];
-  for (const [kind, value, key, sub] of tiles) {
-    const tile = el("div", `tile ${kind}`);
+  for (const [kind, value, key, sub, goes] of tiles) {
+    const tile = goes === void 0 ? el("div", `tile ${kind}`) : el("button", `tile ${kind} go`);
     tile.appendChild(el("div", "v tnum", value));
     tile.appendChild(el("div", "k", key));
     tile.appendChild(el("div", "s", sub));
+    if (goes !== void 0) {
+      tile.type = "button";
+      tile.appendChild(el("span", "sr-only", `. Show the ${goes.label} screen`));
+      tile.addEventListener("click", () => app.showTab(goes.tab, { replace: false }));
+    }
     box.appendChild(tile);
   }
 }
@@ -2513,6 +2692,7 @@ var init_panels = __esm({
     init_bars();
     init_format();
     init_outcome();
+    init_app();
   }
 });
 
@@ -2615,7 +2795,7 @@ function drawTraffic() {
     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})`}`;
+    title.textContent = `${clockTime(change.at)} \xB7 ${change.kind}: ${change.summary}${change.by === void 0 ? "" : ` (by ${change.by})`}`;
     dot.appendChild(title);
     svg.appendChild(dot);
   }
@@ -2634,7 +2814,7 @@ function drawTraffic() {
     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(el("div", "t", `${clockTime(bucket.at)} \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));
@@ -2650,7 +2830,7 @@ function drawTraffic() {
   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("; ")}.`);
+  $("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 ${clockTime(busiest.at)}.`) + (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`));
@@ -2853,7 +3033,7 @@ var init_charts = __esm({
 async function loadActors() {
   if (!SECTIONS.registry) return;
   try {
-    const body = await getJson("/api/actors?limit=100");
+    const body = await getJson(`/api/actors?limit=${state.actorsPageSize}&offset=${state.actorsPage * state.actorsPageSize}`);
     state.actors = body.actors;
     state.actorsTracked = body.tracked;
     drawActors();
@@ -2870,6 +3050,41 @@ function trackActors() {
     void loadActors();
   }, 4e3);
 }
+function drawActorsPager(full) {
+  const page = state.actorsPage;
+  const hidden = page === 0 && !full;
+  const from = page * state.actorsPageSize + 1;
+  const model = {
+    page,
+    from,
+    to: from + state.actors.length - 1,
+    total: state.actorsTracked,
+    atStart: page === 0,
+    atEnd: !full,
+    go: (next) => {
+      state.actorsPage = Math.max(0, next);
+      void loadActors();
+    },
+    size: {
+      current: state.actorsPageSize,
+      choices: ACTORS_PAGE_SIZES,
+      set: (next) => {
+        state.actorsPageSize = next;
+        state.actorsPage = 0;
+        void loadActors();
+      }
+    }
+  };
+  for (const [id, withSize] of [
+    ["actors-pager-top", true],
+    ["actors-pager", false]
+  ]) {
+    const host = $(id);
+    host.hidden = hidden;
+    if (hidden) clear(host);
+    else renderPager(host, model, { withSize });
+  }
+}
 function drawActors() {
   if (!SECTIONS.registry) return;
   if (isConfirming()) return;
@@ -2877,6 +3092,7 @@ function drawActors() {
   clear(body);
   const actors = state.actors;
   $("actors-count").textContent = `${n(actors.length)} shown \xB7 ${n(state.actorsTracked)} tracked`;
+  drawActorsPager(actors.length === state.actorsPageSize);
   byId("actors-empty").hidden = actors.length > 0;
   for (const actor of actors) {
     const row = el("tr");
@@ -2895,7 +3111,7 @@ function drawActors() {
     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)}`);
+    tags.push(`first seen ${clockStamp(actor.firstSeen)}`);
     stateCell.appendChild(el("div", "tagline", tags.join(" \xB7 ")));
     row.appendChild(stateCell);
     const actions = el("td", "acts");
@@ -2914,7 +3130,7 @@ function drawActors() {
     body.appendChild(row);
   }
 }
-var timer;
+var timer, ACTORS_PAGE_SIZES;
 var init_registry = __esm({
   "src/dashboard/client/registry.ts"() {
     "use strict";
@@ -2925,6 +3141,8 @@ var init_registry = __esm({
     init_format();
     init_api();
     init_store();
+    init_pager();
+    ACTORS_PAGE_SIZES = [25, 50, 100, 200];
   }
 });
 
@@ -3326,9 +3544,26 @@ function start() {
   setSearch(url.search);
   if (SECTIONS.feed) reflectFilterButtons();
   showTab(url.tab, { replace: true });
-  void loadInitialSnapshot();
+  suspendScrollAnchoring();
+  void loadInitialSnapshot().finally(settleScrollAnchoring);
   connectStream();
 }
+function htmlElement() {
+  const root2 = rootNode();
+  return root2 instanceof Document ? root2.documentElement : void 0;
+}
+function suspendScrollAnchoring() {
+  htmlElement()?.classList.add("settling");
+}
+function settleScrollAnchoring() {
+  const html = htmlElement();
+  if (html === void 0) return;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      html.classList.remove("settling");
+    });
+  });
+}
 var TABS, available, FIRST, pending;
 var init_client = __esm({
   "src/dashboard/client/index.ts"() {
@@ -3533,6 +3768,8 @@ var DASHBOARD_CSS = String.raw`/* ----------------------------------------------
 
 * { box-sizing: border-box; }
 html, body { height: 100%; }
+/* Restored by the client once the first render has settled. See the note on .tiles. */
+html.settling { overflow-anchor: none; }
 body {
   margin: 0; background: var(--page); color: var(--ink);
   font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
@@ -3625,14 +3862,68 @@ button[disabled] { opacity: .5; cursor: default; }
 /* --- 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)); }
+/* Everything above the feed is drawn by script once the first snapshot arrives, which
+   inserts a block of content above what is already laid out. The browser's scroll
+   anchoring compensates for that by scrolling down by its height — so on any window narrow
+   enough for the counter row to wrap, the dashboard opened with its own counters already
+   off the top of the screen, every time.
+
+   Anchoring is switched off for the first render and switched back on once it has settled
+   (see settleScrollAnchoring in the client). It is not simply left off: the feed puts new requests at
+   the top, and anchoring is exactly what keeps somebody's place while they read a screen
+   that grows above them. */
+.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(136px, 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; }
+  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+  padding: 8px 12px 9px; box-shadow: var(--shadow);
+}
+.tile .v { font-size: 21px; font-weight: 620; letter-spacing: -.025em; line-height: 1.15; }
+.tile .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .055em; margin-top: 2px; font-weight: 560; }
+/* One line, always. These are grid items, so the tallest sets the height of all nine —
+   two captions wrapping to a second line was costing every tile forty pixels of nothing.
+   The full text stays available on hover rather than being cut from the page. */
+.tile .s { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* A tile that navigates is a real button, so it arrives carrying the browser's own
+   font, centring and chrome. Reset to match its inert neighbours exactly, then given
+   back the one thing a div must not have: something that says it can be pressed. */
+button.tile {
+  font: inherit; color: inherit; text-align: left; width: 100%; display: block;
+  cursor: pointer; appearance: none; transition: border-color .12s, box-shadow .12s;
+}
+button.tile: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 {
+  font: inherit; margin-left: 6px; padding: 1px 8px; border-radius: 6px; cursor: pointer;
+  border: 1px solid var(--warn-text); background: transparent; color: var(--warn-text);
+}
+.load-skipped:hover { background: color-mix(in srgb, var(--warn-text) 12%, transparent); }
+.load-skipped:disabled { opacity: .5; cursor: default; }
+
+/* Prev/next under a table. Quiet: it is navigation for a list, not an action on it. */
+.pager {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 9px 2px 2px; font-size: 12px; color: var(--muted);
+}
+.pager button {
+  font: inherit; padding: 4px 11px; border-radius: 7px;
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
+}
+.pager button:hover:not(:disabled) { border-color: var(--focus); }
+.pager button:disabled { opacity: .45; cursor: default; }
+.pager .where { font-variant-numeric: tabular-nums; }
+.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. */
+.pager.pager-inline { padding: 0; margin-left: auto; gap: 8px; }
+.pager.pager-inline .size { margin-left: 0; }
+.pager .step { min-width: 30px; font-size: 15px; line-height: 1; padding: 3px 8px 5px; }
+.pager .size { display: flex; align-items: center; gap: 6px; margin-left: auto; }
+.pager .size select {
+  font: inherit; padding: 3px 6px; border-radius: 6px;
+  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
+}
+.pager .held { color: var(--warn-text); }
 .tile.good .v { color: var(--good-text); }
 .tile.warn .v { color: var(--warn-text); }
 .tile.crit .v { color: var(--crit-text); }
@@ -3647,7 +3938,7 @@ main { padding: 18px 20px 64px; max-width: 1680px; margin: 0 auto; }
    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);
+  margin: 0; padding: 9px 14px; font-size: 11.5px; 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;
 }
@@ -3659,6 +3950,17 @@ main { padding: 18px 20px 64px; max-width: 1680px; margin: 0 auto; }
    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; }
+/* A grid item's min-width is auto, so a panel wrapping a wide table refuses to shrink and
+   pushes the whole document sideways instead — which is what the Actors screen did under
+   about 600px, where the table is widest and the viewport narrowest. The .two grid already
+   says minmax(0, ...) for this reason; .stack needs the same permission. With it the panel
+   shrinks and the scroller inside it does its job. */
+.stack > * { min-width: 0; }
+/* Numeric columns shrink to their contents, so the width goes to the two columns that
+   carry text — the actor and what is known about it. Six counters of one or two digits
+   were each taking about a hundred pixels while the State column was squeezed against the
+   buttons. Same trick the feed's time column already uses. */
+#view-actors th.num, #view-actors td.num { width: 1%; white-space: nowrap; }
 .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); } }
@@ -3738,7 +4040,7 @@ thead th {
   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; }
+tbody td { padding: 7px 14px; 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; }
@@ -4118,7 +4420,7 @@ var DASHBOARD_MARKUP = String.raw`
 
     <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>
+        <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><button class="sub load-skipped" id="feed-load-skipped" type="button" hidden>Load them</button></h2>
         <div class="toolbar">
           <div class="filters" id="filters"></div>
           <div class="search">
@@ -4126,6 +4428,7 @@ var DASHBOARD_MARKUP = String.raw`
             <kbd aria-hidden="true">/</kbd>
           </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>
         </div>
         <div class="feed-scroll">
         <table>
@@ -4137,6 +4440,7 @@ var DASHBOARD_MARKUP = String.raw`
           <tbody id="rows"></tbody>
         </table>
         </div>
+        <div class="pager" id="feed-pager" hidden></div>
         <div class="empty" id="empty">Nothing assessed yet. Send some traffic through the handler and it appears here within a moment.</div>
       </section>
 
@@ -4185,6 +4489,7 @@ 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="pager pager-top" id="actors-pager-top" hidden></div>
       <div class="feed-scroll">
         <table>
           <thead>
@@ -4196,6 +4501,7 @@ var DASHBOARD_MARKUP = String.raw`
           <tbody id="actor-rows"></tbody>
         </table>
       </div>
+      <div class="pager" id="actors-pager" hidden></div>
       <div class="empty" id="actors-empty" hidden>Nothing in the registry yet.</div>
     </section>
   </div>