@zerotal/devtools 1.6.3 → 1.7.2

package/src/client/tabs/all.ts

@@ -0,0 +1,323 @@
+/**
+ * The request history: filter, facets, correlated groups, and a windowed list.
+ *
+ * The tab that redraws most, because every request changes it — which is why it
+ * is the one that reconciles rather than rebuilding. Three things depend on that:
+ * the caret in the filter box, the scroll position, and the open state of every
+ * expanded group all used to be thrown away by each arriving request.
+ */
+import { facetsActive, methodsPresent, noFacets, type Facets } from "../filter.ts";
+import { foldTraceRows, type TraceRow } from "../tree.ts";
+import { dCls, esc, fmt, scCls } from "../ui/format.ts";
+import { el, reconcile } from "../ui/render.ts";
+import type { TabContext, TabView } from "./types.ts";
+import type { RequestTrace } from "../../RequestTrace.ts";
+import { renderSections } from "./sections.ts";
+
+/**
+ * Row height in pixels, which the stylesheet pins.
+ *
+ * The windowing below positions rows arithmetically rather than measuring them,
+ * so a row that could grow would put every offset out. `.hrow` is fixed at this
+ * height for exactly that reason.
+ */
+const ROW_H = 26;
+
+/** Above this many rows the list is windowed; below it, drawn whole. */
+const VIRTUAL_THRESHOLD = 200;
+
+/** Rows drawn beyond each edge of the viewport, so a fast scroll finds them there. */
+const OVERSCAN = 8;
+
+const STATUS_CLASSES: Array<[string, string]> = [
+  ["2", "2xx"],
+  ["3", "3xx"],
+  ["4", "4xx"],
+  ["5", "5xx"],
+];
+
+// ── Skeleton ──────────────────────────────────────────────────────────────────
+//
+// Built once per visit to the tab and then only updated. The filter input in
+// particular must never be re-created: an input rebuilt under a typing user is an
+// input that loses the caret on every keystroke, which the old panel worked
+// around by re-focusing and re-selecting after each render.
+
+function skeleton(): string {
+  return (
+    `<div class="fbar">` +
+    `<input id="filter" class="finput" type="search" ` +
+    `placeholder="Filter by path, method, status, or controller…">` +
+    `<span class="dim" id="fcount"></span>` +
+    // Labelled rather than the bar's icon: this is where you are when you decide
+    // the history is in your way, and the icon at the far end of the status bar
+    // is not where you look for it.
+    `<button class="tbtn" data-action="clear" title="Discard every recorded request">Clear</button>` +
+    `</div>` +
+    `<div class="facets" id="facets"></div>` +
+    `<div id="rowswrap">` +
+    `<div class="vpad" id="padtop"></div>` +
+    `<div id="rows"></div>` +
+    `<div class="vpad" id="padbot"></div>` +
+    `</div>`
+  );
+}
+
+/**
+ * The facet chips.
+ *
+ * Method chips come from the traces actually recorded — listing every HTTP verb
+ * would put five dead chips on screen for an app that only ever GETs.
+ */
+function facetChips(store: TabContext["store"]): string {
+  const f = store.facets;
+  const chip = (kind: string, value: string, label: string, on: boolean, warn = false): string =>
+    `<button class="fchip${on ? " on" : ""}${warn ? " warn" : ""}" ` +
+    `data-facet="${esc(kind)}" data-value="${esc(value)}">${esc(label)}</button>`;
+
+  const methods = methodsPresent(store.traces)
+    .map((m) => chip("method", m, m, f.methods.includes(m)))
+    .join("");
+  const statuses = STATUS_CLASSES.map(([digit, label]) =>
+    chip("status", digit, label, f.statusClasses.includes(digit)),
+  ).join("");
+
+  return (
+    methods +
+    (methods ? `<span class="fsep"></span>` : "") +
+    statuses +
+    `<span class="fsep"></span>` +
+    chip("errors", "", "errors", f.errors, true) +
+    chip("slow", "", "slow", f.slow, true) +
+    chip("nplus", "", "n+1", f.nPlusOne, true) +
+    (facetsActive(f) ? `<span class="fsep"></span>` + chip("clear", "", "✕ clear", false) : "")
+  );
+}
+
+/** Apply one chip click to the facet set, returning a new one. */
+export function toggleFacet(f: Facets, kind: string, value: string): Facets {
+  const drop = <T>(list: T[], item: T): T[] =>
+    list.includes(item) ? list.filter((x) => x !== item) : [...list, item];
+  switch (kind) {
+    case "method":
+      return { ...f, methods: drop(f.methods, value) };
+    case "status":
+      return { ...f, statusClasses: drop(f.statusClasses, value) };
+    case "errors":
+      return { ...f, errors: !f.errors };
+    case "slow":
+      return { ...f, slow: !f.slow };
+    case "nplus":
+      return { ...f, nPlusOne: !f.nPlusOne };
+    case "clear":
+      return noFacets();
+    default:
+      return f;
+  }
+}
+
+// ── Rows ──────────────────────────────────────────────────────────────────────
+
+/** A row's identity across redraws — the trace, plus where it sits in its group. */
+function rowKey(r: TraceRow): string {
+  return `${r.trace.id}:${r.child ? "c" : "h"}`;
+}
+
+/** What the list draws: request rows, and the detail of whichever one is open. */
+type DrawItem = { kind: "row"; row: TraceRow } | { kind: "detail"; trace: RequestTrace };
+
+function itemKey(item: DrawItem): string {
+  return item.kind === "detail" ? `${item.trace.id}:d` : rowKey(item.row);
+}
+
+function rowHtml(r: TraceRow, selectedId: string | undefined, openId: string | null): string {
+  const t = r.trace;
+  const toggle = r.groupKey
+    ? `<button class="gtog" data-group="${esc(r.groupKey)}" title="Requests in this batch">` +
+      `+${r.groupSize}</button>`
+    : "";
+  return (
+    `<div class="hrow${t.id === selectedId ? " cur" : ""}${t.exception ? " err" : ""}` +
+    `${r.child ? " child" : ""}" data-idx="${r.index}">` +
+    `<span class="hchev">${t.id === openId ? "▾" : "▸"}</span>` +
+    `<span class="meth ${t.method.toLowerCase()}">${esc(t.method)}</span>` +
+    `<span class="hpath">${esc(t.path)}</span>` +
+    // The message, not just the status: scanning a list for the request that
+    // broke is the reason to open this tab.
+    (t.exception
+      ? `<span class="hexc" title="${esc(t.exception.message)}">${esc(t.exception.message)}</span>`
+      : "") +
+    toggle +
+    `<span class="sc ${scCls(t.statusCode)}">${t.statusCode || "—"}</span>` +
+    `<span class="${dCls(t.durationMs) || "dim"}">${fmt(t.durationMs)}</span>` +
+    `<span class="dim">${t.queries.length}q</span>` +
+    (t.warnings.length ? '<span class="chip warn">N+1</span>' : "") +
+    `</div>`
+  );
+}
+
+/**
+ * Which slice of the list to actually draw.
+ *
+ * Below the threshold, all of it — windowing a short list costs more than it
+ * saves and makes `Ctrl+F` in the browser useless for no reason. Above it, only
+ * what the viewport can show plus an overscan, with two spacers standing in for
+ * the height of everything else.
+ */
+export function windowRange(
+  total: number,
+  scrollTop: number,
+  viewportH: number,
+  headerH: number,
+): { first: number; count: number } {
+  if (total <= VIRTUAL_THRESHOLD) return { first: 0, count: total };
+  const above = Math.max(0, scrollTop - headerH);
+  const visible = Math.ceil(viewportH / ROW_H) + OVERSCAN * 2;
+  // Clamped at both ends. Without the upper clamp a scroll offset past the list —
+  // which happens for one frame whenever the list shrinks under a scrolled
+  // viewport, as it does on every clear — asks for a window starting beyond the
+  // end, and the count comes back negative.
+  const first = Math.max(0, Math.min(Math.floor(above / ROW_H) - OVERSCAN, total - visible));
+  return { first, count: Math.min(visible, total - first) };
+}
+
+function draw(host: HTMLElement, ctx: TabContext): void {
+  const { store } = ctx;
+  const rowsHost = host.querySelector<HTMLElement>("#rows");
+  const wrap = host.querySelector<HTMLElement>("#rowswrap");
+  const padTop = host.querySelector<HTMLElement>("#padtop");
+  const padBot = host.querySelector<HTMLElement>("#padbot");
+  if (!rowsHost || !wrap || !padTop || !padBot) return;
+
+  const matches = store.visible();
+  const rows = foldTraceRows(matches, store.channels, store.expanded);
+
+  const count = host.querySelector<HTMLElement>("#fcount");
+  if (count) count.textContent = `${matches.length}/${store.traces.length}`;
+
+  if (!rows.length) {
+    padTop.style.height = "0px";
+    padBot.style.height = "0px";
+    rowsHost.innerHTML = `<p class="empty">No requests match this filter</p>`;
+    return;
+  }
+
+  // `host` *is* the scroller — the tab renders straight into the content pane,
+  // which is what scrolls. The rows start below the sticky filter bar and the
+  // facet strip, so the window is offset by the wrapper's position rather than
+  // measured from zero.
+  //
+  // Windowing is suspended while a request is open, because an open detail is a
+  // row of unknown height and every offset here is arithmetic on a fixed one.
+  // The store keeps 100 traces and the threshold is 200, so in practice this
+  // draws the same whole list it would have drawn anyway; the guard is for the
+  // correlated-group case that can fold more rows than traces.
+  const openId = store.openTraceId;
+  const { first, count: take } = openId
+    ? { first: 0, count: rows.length }
+    : windowRange(rows.length, host.scrollTop, host.clientHeight || 0, wrap.offsetTop);
+  const slice = rows.slice(first, first + take);
+
+  padTop.style.height = `${first * ROW_H}px`;
+  padBot.style.height = `${Math.max(0, rows.length - first - take) * ROW_H}px`;
+
+  // The open request's detail rides in the list as its own item, so the
+  // reconciler keeps it across redraws — rebuilding it on every arriving request
+  // would collapse whatever the reader had scrolled to inside it.
+  const items: DrawItem[] = [];
+  for (const row of slice) {
+    items.push({ kind: "row", row });
+    if (openId && row.trace.id === openId && !row.child) {
+      items.push({ kind: "detail", trace: row.trace });
+    }
+  }
+
+  const selectedId = store.selected?.id;
+  reconcile(
+    rowsHost,
+    items,
+    itemKey,
+    (item) => {
+      if (item.kind === "detail") {
+        const node = document.createElement("div");
+        node.className = "hdetail";
+        renderSections(node, item.trace, ctx);
+        node.setAttribute("data-detail-rev", String(store.revision));
+        return node;
+      }
+      const html = rowHtml(item.row, selectedId, openId);
+      const node = el(html);
+      // Stamped on creation as well, so the very next update compares equal and
+      // a row that has not changed is never rewritten.
+      node.setAttribute("data-html", html);
+      return node;
+    },
+    // Refilled in place rather than patched field by field: a row is six spans,
+    // and the reconciler's job — keeping the *node* so scroll position and text
+    // selection survive — is already done by the time this runs. The markup is
+    // compared first, so a steady list generates no DOM writes at all.
+    (node, item) => {
+      if (item.kind === "detail") {
+        // Redrawn only when the store actually moved. The sections below are
+        // whole tab renderers; running them on every keystroke in the filter box
+        // would be the most expensive thing in the panel.
+        const rev = String(store.revision);
+        if (node.getAttribute("data-detail-rev") === rev) return;
+        renderSections(node, item.trace, ctx);
+        node.setAttribute("data-detail-rev", rev);
+        return;
+      }
+      const next = rowHtml(item.row, selectedId, openId);
+      if (node.getAttribute("data-html") === next) return;
+      const fresh = el(next);
+      node.className = fresh.className;
+      node.replaceChildren(...Array.from(fresh.childNodes));
+      node.setAttribute("data-idx", String(item.row.index));
+      node.setAttribute("data-html", next);
+    },
+  );
+}
+
+export const allTab: TabView = {
+  id: "all",
+  label: "All",
+  scope: "session",
+  live: true,
+  volatile: true,
+  standsAlone: true,
+
+  badge: ({ store }) => ({ count: store.traces.length }),
+
+  render(host, ctx) {
+    if (!ctx.store.traces.length) {
+      host.innerHTML =
+        '<p class="empty">No requests recorded yet — make a request to see it here</p>';
+      return;
+    }
+    // Rebuild the frame only when it is not already there — switching tabs away
+    // and back replaces the content host's children, arriving traces do not.
+    if (!host.querySelector("#rowswrap")) {
+      host.innerHTML = skeleton();
+      const input = host.querySelector<HTMLInputElement>("#filter");
+      if (input) input.value = ctx.store.filter;
+    }
+    // Rewritten only when it actually differs. Otherwise every arriving request
+    // replaces the strip, which throws away keyboard focus on a chip the user is
+    // tabbing through for a set of buttons that did not change.
+    const facets = host.querySelector<HTMLElement>("#facets");
+    if (facets) {
+      const next = facetChips(ctx.store);
+      if (facets.dataset["sig"] !== next) {
+        facets.innerHTML = next;
+        facets.dataset["sig"] = next;
+      }
+    }
+    draw(host, ctx);
+  },
+
+  // Windowing means the visible slice is a function of the scroll offset, so the
+  // list has to be redrawn as it moves — but only the list.
+  onScroll(host, ctx) {
+    if (host.querySelector("#rowswrap")) draw(host, ctx);
+  },
+};

package/src/client/tabs/app.ts

@@ -0,0 +1,293 @@
+/**
+ * The App section: the framework as it *is*, rather than as it just behaved.
+ *
+ * Every other tab reads the trace stream — what one request did. These six read
+ * the framework's own registries, which existed all along and were CLI-only or
+ * invisible. All six share one fetch, because they are one read of one map and
+ * six requests for it would be six answers that can disagree.
+ */
+import { esc, fmt } from "../ui/format.ts";
+import type { Store } from "../state.ts";
+import type { TabContext, TabView } from "./types.ts";
+
+/** One route, as the map serves it. */
+interface RouteRow {
+  method: string;
+  path: string;
+  name: string;
+  handler: string;
+  middleware: string;
+}
+interface BindingRow {
+  token: string;
+  kind: string;
+  provider: string;
+}
+interface ProviderRow {
+  name: string;
+  durationMs: number;
+  bindings: number;
+}
+interface EventRow {
+  event: string;
+  listeners: string;
+  source: string;
+}
+interface ActivityRow {
+  kind: string;
+  name: string;
+  outcome: string;
+  durationMs: number;
+  at: number;
+  failed: boolean;
+  detail?: string;
+}
+
+export interface FrameworkMap {
+  routes: RouteRow[];
+  config: Record<string, unknown>;
+  bindings: BindingRow[];
+  providers: ProviderRow[];
+  events: EventRow[];
+  activity: ActivityRow[];
+  bootMs: number | null;
+}
+
+// ── Shared fetch ──────────────────────────────────────────────────────────────
+//
+// One read, shared by six tabs. Kept out of the store because it is not part of
+// what the panel *is* — it is a thing the App section goes and gets, and a store
+// field for it would make every request-tab render depend on it.
+
+let _map: FrameworkMap | null = null;
+let _loading = false;
+let _error: string | null = null;
+
+/** Drop the cached map so the next render re-reads it. */
+export function invalidateMap(): void {
+  _map = null;
+  _error = null;
+}
+
+/**
+ * Fetch the map once, then serve it from memory.
+ *
+ * Cached because the registries are static for the life of the process and six
+ * tabs share one answer; refreshed on demand by the button each tab carries,
+ * for the case where a provider registered a route late.
+ */
+function loadMap(store: Store, redraw: () => void): void {
+  if (_map || _loading) return;
+  _loading = true;
+  void fetch(`${store.base}/api/map`)
+    .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+    .then((data: FrameworkMap) => {
+      _map = data;
+      _error = null;
+    })
+    .catch((e: unknown) => {
+      _error = e instanceof Error ? e.message : String(e);
+    })
+    .finally(() => {
+      _loading = false;
+      redraw();
+    });
+}
+
+// ── Rendering ─────────────────────────────────────────────────────────────────
+
+function table(headers: string[], rows: string[][]): string {
+  if (!rows.length) return '<p class="empty">Nothing registered</p>';
+  return (
+    `<table class="ctbl"><thead><tr>` +
+    headers.map((h) => `<th>${esc(h)}</th>`).join("") +
+    `</tr></thead><tbody>` +
+    rows.map((r) => `<tr>${r.map((c) => `<td>${c}</td>`).join("")}</tr>`).join("") +
+    `</tbody></table>`
+  );
+}
+
+/** The refresh affordance every App tab carries, since the map is cached. */
+function header(title: string, count: number, extra = ""): string {
+  return (
+    `<div class="fbar">` +
+    `<b>${esc(title)}</b><span class="dim">${count}</span>` +
+    (extra ? `<span class="dim">${extra}</span>` : "") +
+    `<span class="sp" style="flex:1"></span>` +
+    `<button class="ibtn" data-map-refresh="1" title="Re-read the registries">↻</button>` +
+    `</div>`
+  );
+}
+
+/**
+ * Build one App tab.
+ *
+ * All six share the fetch, the loading state, and the refresh button; only the
+ * body differs. Written as a factory rather than six near-identical files
+ * because the difference between them really is one function.
+ */
+function appTab(
+  id: string,
+  label: string,
+  body: (map: FrameworkMap, ctx: TabContext) => string,
+  count: (map: FrameworkMap) => number,
+): TabView {
+  return {
+    id: `app:${id}`,
+    scope: "session",
+    label,
+    standsAlone: true,
+    volatile: true,
+    render(host, ctx) {
+      if (_error) {
+        host.innerHTML =
+          header(label, 0) + `<p class="empty">Could not read the map — ${esc(_error)}</p>`;
+        return;
+      }
+      if (!_map) {
+        loadMap(ctx.store, () => ctx.store.changed());
+        host.innerHTML = '<p class="empty">Reading the application…</p>';
+        return;
+      }
+      host.innerHTML = header(label, count(_map)) + body(_map, ctx);
+    },
+  };
+}
+
+/** Flatten the config tree to dotted paths, which is how you look a value up. */
+function flattenConfig(value: unknown, prefix = "", out: Array<[string, unknown]> = []) {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+      flattenConfig(v, prefix ? `${prefix}.${k}` : k, out);
+    }
+    return out;
+  }
+  out.push([prefix, value]);
+  return out;
+}
+
+export const routesTab = appTab(
+  "routes",
+  "Routes",
+  (map) =>
+    table(
+      ["", "path", "name", "handler", "middleware"],
+      map.routes.map((r) => [
+        `<span class="meth ${r.method.toLowerCase()}">${esc(r.method)}</span>`,
+        // Click to navigate: a route list you cannot go to is a list you copy
+        // out of. Only GETs — nothing here should POST on a click.
+        r.method === "GET"
+          ? `<a class="link" href="${esc(r.path)}" target="_blank">${esc(r.path)}</a>`
+          : esc(r.path),
+        r.name ? `<span class="chip">${esc(r.name)}</span>` : '<span class="dim">—</span>',
+        esc(r.handler),
+        `<span class="dim">${esc(r.middleware || "—")}</span>`,
+      ]),
+    ),
+  (map) => map.routes.length,
+);
+
+export const configTab = appTab(
+  "config",
+  "Config",
+  (map) =>
+    table(
+      ["path", "value"],
+      flattenConfig(map.config).map(([path, value]) => [
+        `<b>${esc(path)}</b>`,
+        `<span class="dim">${esc(
+          value === null || value === undefined
+            ? String(value)
+            : typeof value === "object"
+              ? JSON.stringify(value)
+              : String(value),
+        )}</span>`,
+      ]),
+    ) +
+    `<p class="dim" style="font-size:10px;padding:6px 12px">` +
+    `Anything whose key reads as a secret is masked by the same rule the Queries tab uses.</p>`,
+  (map) => flattenConfig(map.config).length,
+);
+
+export const containerTab = appTab(
+  "container",
+  "Container",
+  (map) =>
+    table(
+      ["token", "kind", "bound by"],
+      map.bindings.map((b) => [
+        `<b>${esc(b.token)}</b>`,
+        `<span class="chip">${esc(b.kind)}</span>`,
+        `<span class="dim">${esc(b.provider)}</span>`,
+      ]),
+    ),
+  (map) => map.bindings.length,
+);
+
+export const providersTab = appTab(
+  "providers",
+  "Providers",
+  (map) =>
+    table(
+      ["#", "provider", "boot", "bindings"],
+      map.providers.map((p, i) => [
+        `<span class="dim">${i + 1}</span>`,
+        `<b>${esc(p.name)}</b>`,
+        `<span class="${p.durationMs > 50 ? "yellow" : "dim"}">${fmt(p.durationMs)}</span>`,
+        `<span class="dim">${p.bindings || "—"}</span>`,
+      ]),
+    ) +
+    `<p class="dim" style="font-size:10px;padding:6px 12px">` +
+    `In boot order — which decides who wins a contested binding. ` +
+    (map.bootMs === null ? "" : `Total boot ${fmt(Math.round(map.bootMs))}. `) +
+    `The <code>onBooted</code> phase runs concurrently, so these overlap rather than summing.</p>`,
+  (map) => map.providers.length,
+);
+
+export const eventsTab = appTab(
+  "events",
+  "Events",
+  (map) =>
+    table(
+      ["event", "reacts", "bus"],
+      map.events.map((e) => [
+        `<b>${esc(e.event)}</b>`,
+        esc(e.listeners),
+        `<span class="dim">${esc(e.source)}</span>`,
+      ]),
+    ),
+  (map) => map.events.length,
+);
+
+export const activityTab = appTab(
+  "activity",
+  "Commands",
+  (map) =>
+    map.activity.length
+      ? table(
+          ["", "name", "outcome", "took", "when"],
+          map.activity.map((a) => [
+            `<span class="chip">${esc(a.kind)}</span>`,
+            `<b>${esc(a.name)}</b>` +
+              (a.detail ? `<div class="dim" style="font-size:10px">${esc(a.detail)}</div>` : ""),
+            `<span class="${a.failed ? "red" : "dim"}">${esc(a.outcome)}</span>`,
+            `<span class="dim">${a.durationMs ? fmt(a.durationMs) : "—"}</span>`,
+            `<span class="dim">${esc(new Date(a.at).toLocaleTimeString())}</span>`,
+          ]),
+        )
+      : // A scheduled task that fails at 03:00 used to leave no trace anywhere;
+        // an empty feed here means nothing has run yet, not that nothing is
+        // recorded.
+        '<p class="empty">No commands or scheduled tasks have run in this process yet</p>',
+  (map) => map.activity.length,
+);
+
+/** The App section's tabs, in strip order. */
+export const APP_TABS: TabView[] = [
+  routesTab,
+  configTab,
+  containerTab,
+  providersTab,
+  eventsTab,
+  activityTab,
+];

package/src/client/tabs/cache.ts

@@ -0,0 +1,50 @@
+/** Cache operations performed during the request. */
+import type { CacheEntry } from "../../RequestTrace.ts";
+import { esc, fmt } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+function opClass(op: CacheEntry["op"]): string {
+  if (op === "hit") return "green";
+  if (op === "miss") return "yellow";
+  if (op === "write") return "cyan";
+  return "dim";
+}
+
+export const cacheTab: TabView = {
+  id: "cache",
+  label: "Cache",
+  scope: "request",
+
+  badge: ({ trace }) => (trace ? { count: trace.cache?.length ?? 0 } : undefined),
+
+  render(host, { trace }) {
+    const cache = trace!.cache ?? [];
+    if (!cache.length) {
+      host.innerHTML = '<p class="empty">No cache operations during this request</p>';
+      return;
+    }
+    const hits = cache.filter((c) => c.op === "hit").length;
+    const misses = cache.filter((c) => c.op === "miss").length;
+
+    host.innerHTML =
+      `<div class="stats">` +
+      `<div class="stat"><div class="slbl">Operations</div><div class="sval">${cache.length}</div></div>` +
+      `<div class="stat"><div class="slbl">Hits</div><div class="sval green">${hits}</div></div>` +
+      `<div class="stat"><div class="slbl">Misses</div><div class="sval yellow">${misses}</div></div>` +
+      `</div><div>` +
+      cache
+        .map(
+          (c) =>
+            `<div class="qrow">` +
+            `<div class="qmeta">` +
+            `<span class="qdur ${opClass(c.op)}">${c.op.toUpperCase()}</span>` +
+            `<span class="dim" style="flex:1;font-size:11px">${esc(c.key)}</span>` +
+            `<span class="dim" style="font-size:10px">${fmt(c.durationMs)}</span>` +
+            `</div>` +
+            `<div class="dim" style="font-size:10px">${c.ttl != null ? `TTL: ${c.ttl}s · ` : ""}+${c.offsetMs}ms</div>` +
+            `</div>`,
+        )
+        .join("") +
+      `</div>`;
+  },
+};