@zerotal/devtools 1.6.3 → 1.7.0

package/src/client/tabs/channel.ts

@@ -0,0 +1,263 @@
+/**
+ * A channel tab, drawn from its descriptor alone.
+ *
+ * Five presentations rather than one, because a flat badge-title-meta list is
+ * right for an audit feed and wrong for a prop map or a route table — and a
+ * package that needs a tree should not have to ship a renderer into devtools to
+ * get one. Which presentation to use is declared as data like everything else on
+ * the descriptor, so this file stays the only channel-rendering code in the panel
+ * however many packages contribute.
+ */
+import type { TraceChannelDescriptor, TraceChannelEntry } from "../../RequestTrace.ts";
+import { buildPathTree, type PathTreeNode } from "../tree.ts";
+import { chipFor, copyBtn, esc, fmtCell } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+/** `key: value` spans for every field the descriptor named as meta. */
+function metaLine(r: TraceChannelEntry, keys: string[]): string {
+  return keys
+    .filter((k) => r[k] != null && r[k] !== "")
+    .map((k) => `<span>${esc(k)}: ${esc(fmtCell(r[k]))}</span>`)
+    .join("");
+}
+
+/**
+ * Chips for the descriptor's `flags` that are truthy here.
+ *
+ * A flag is named by its *field*, so `{ shared: true }` reads as **shared**
+ * rather than `shared: true` — which is how a row ends up saying nothing at a
+ * glance.
+ */
+function flagChips(r: Record<string, unknown>, flags: string[] | undefined): string {
+  return (flags ?? [])
+    .filter((f) => !!r[f])
+    .map((f) => `<span class="chip flag">${esc(f)}</span>`)
+    .join("");
+}
+
+/** The default: one block per entry — badge, title, flags, meta. */
+function asRows(rows: TraceChannelEntry[], c: TraceChannelDescriptor): string {
+  return (
+    `<div>` +
+    rows
+      .map((r) => {
+        const isWarn = !!c.warn && !!r[c.warn];
+        const badge = c.badge && r[c.badge] != null ? String(r[c.badge]) : "";
+        const titleKey = c.title ?? c.badge;
+        const title = titleKey && r[titleKey] != null ? String(r[titleKey]) : "";
+        const meta = metaLine(r, c.meta ?? []);
+        return (
+          `<div class="crow${isWarn ? " warn" : ""}">` +
+          `<div class="chead">` +
+          (badge ? chipFor(badge, isWarn) : "") +
+          flagChips(r, c.flags) +
+          `<span class="dim" style="font-size:10px">+${r.offsetMs}ms</span>` +
+          copyBtn(JSON.stringify(r, null, 2), "Copy entry") +
+          `</div>` +
+          (title && title !== badge ? `<div class="cttl">${esc(title)}</div>` : "") +
+          (meta ? `<div class="cmeta">${meta}</div>` : "") +
+          `</div>`
+        );
+      })
+      .join("") +
+    `</div>`
+  );
+}
+
+/** One row per entry, the descriptor's fields as columns. */
+function asTable(rows: TraceChannelEntry[], c: TraceChannelDescriptor): string {
+  const titleKey = c.title ?? c.badge;
+  const cols = [
+    ...(c.badge ? [c.badge] : []),
+    ...(titleKey && titleKey !== c.badge ? [titleKey] : []),
+    ...(c.meta ?? []),
+  ];
+  if (!cols.length) return asRows(rows, c);
+  return (
+    `<table class="ctbl"><thead><tr>` +
+    cols.map((k) => `<th>${esc(k)}</th>`).join("") +
+    `<th>at</th></tr></thead><tbody>` +
+    rows
+      .map((r) => {
+        const isWarn = !!c.warn && !!r[c.warn];
+        return (
+          `<tr${isWarn ? ' class="warn"' : ""}>` +
+          cols
+            .map(
+              (k, i) =>
+                `<td>${i === 0 && c.badge === k && r[k] != null ? chipFor(String(r[k]), isWarn) : esc(fmtCell(r[k]))}` +
+                (i === 0 ? flagChips(r, c.flags) : "") +
+                `</td>`,
+            )
+            .join("") +
+          `<td class="dim">+${r.offsetMs}ms</td></tr>`
+        );
+      })
+      .join("") +
+    `</tbody></table>`
+  );
+}
+
+/** Every field of every entry, as a key/value table per entry. */
+function asKv(rows: TraceChannelEntry[], c: TraceChannelDescriptor): string {
+  const titleKey = c.title ?? c.badge;
+  return rows
+    .map((r) => {
+      const heading = titleKey && r[titleKey] != null ? String(r[titleKey]) : "";
+      const cells = Object.entries(r)
+        .filter(([k, v]) => k !== "offsetMs" && v != null && v !== "")
+        .map(([k, v]) => `<tr><td>${esc(k)}</td><td>${esc(fmtCell(v))}</td></tr>`)
+        .join("");
+      return (
+        `<div class="sec"><div class="stitle">` +
+        `${esc(heading || "Entry")} · +${r.offsetMs}ms` +
+        copyBtn(JSON.stringify(r, null, 2), "Copy entry") +
+        `</div><table class="kv">${cells}</table></div>`
+      );
+    })
+    .join("");
+}
+
+/** Entries collected under the value of the descriptor's `groupBy` field. */
+function asGrouped(rows: TraceChannelEntry[], c: TraceChannelDescriptor): string {
+  const key = c.groupBy;
+  if (!key) return asRows(rows, c);
+  const groups = new Map<string, TraceChannelEntry[]>();
+  for (const r of rows) {
+    const g = r[key] == null || r[key] === "" ? "—" : String(r[key]);
+    let bucket = groups.get(g);
+    if (!bucket) groups.set(g, (bucket = []));
+    bucket.push(r);
+  }
+  return [...groups.entries()]
+    .map(
+      ([g, entries]) =>
+        `<details class="cgrp" open><summary>` +
+        `<b>${esc(g)}</b><span class="chip">${entries.length}</span>` +
+        (c.warn && entries.some((r) => !!r[c.warn!]) ? '<span class="chip warn">⚠</span>' : "") +
+        `</summary>${asRows(entries, c)}</details>`,
+    )
+    .join("");
+}
+
+/** A node's badge, its truthy flags, and whatever else it carries. */
+function nodeAttrs(attrs: Record<string, unknown>, c: TraceChannelDescriptor): string {
+  const badge = c.treeBadge && attrs[c.treeBadge] != null ? String(attrs[c.treeBadge]) : "";
+  const flags = new Set(c.flags ?? []);
+  const rest = Object.entries(attrs)
+    .filter(([k, v]) => k !== c.treeBadge && !flags.has(k) && v != null && v !== "")
+    .map(([k, v]) => `<span class="tattr">${esc(k)}: ${esc(fmtCell(v))}</span>`)
+    .join("");
+  return (badge ? chipFor(badge, false) : "") + flagChips(attrs, c.flags) + rest;
+}
+
+function treeNodes(
+  level: Map<string, PathTreeNode>,
+  c: TraceChannelDescriptor,
+  prefix: string,
+): string {
+  return [...level.entries()]
+    .map(([name, node]) => {
+      const path = prefix ? `${prefix}.${name}` : name;
+      if (node.children.size === 0) {
+        return (
+          `<div class="tnode tleaf">` +
+          `<span class="tname">${esc(name)}</span>` +
+          nodeAttrs(node.attrs ?? {}, c) +
+          copyBtn(path, "Copy path") +
+          `</div>`
+        );
+      }
+      return (
+        `<details class="tnode tbranch" open><summary>` +
+        `<span class="tname">${esc(name)}</span>` +
+        (node.attrs ? nodeAttrs(node.attrs, c) : "") +
+        `<span class="dim tattr">${node.children.size}</span>` +
+        copyBtn(path, "Copy path") +
+        `</summary><div class="tkids">${treeNodes(node.children, c, path)}</div></details>`
+      );
+    })
+    .join("");
+}
+
+/** The entry's own badge/title/meta, above its tree. */
+function treeHead(r: TraceChannelEntry, c: TraceChannelDescriptor): string {
+  const isWarn = !!c.warn && !!r[c.warn];
+  const badge = c.badge && r[c.badge] != null ? String(r[c.badge]) : "";
+  const titleKey = c.title ?? c.badge;
+  const title = titleKey && r[titleKey] != null ? String(r[titleKey]) : "";
+  const meta = metaLine(r, c.meta ?? []);
+  if (!badge && !title && !meta) return "";
+  return (
+    `<div class="rcard">` +
+    `<div class="chead">` +
+    (badge ? chipFor(badge, isWarn) : "") +
+    flagChips(r, c.flags) +
+    (title ? `<b>${esc(title)}</b>` : "") +
+    `</div>` +
+    (meta ? `<div class="cmeta">${meta}</div>` : "") +
+    `</div>`
+  );
+}
+
+/**
+ * A map of dotted paths, drawn as the tree the dots already describe.
+ *
+ * Each node's own fields become its badge, its flags, and a dim attribute line,
+ * so a package describes what a node *is* without devtools knowing what any of it
+ * means.
+ */
+function asTree(rows: TraceChannelEntry[], c: TraceChannelDescriptor): string {
+  const field = c.treeField;
+  if (!field) return asRows(rows, c);
+
+  return rows
+    .map((r) => {
+      const raw = r[field];
+      const head = treeHead(r, c);
+      if (!raw || typeof raw !== "object") {
+        return head + `<p class="empty">Nothing recorded under ${esc(field)}</p>`;
+      }
+      const paths = Object.entries(raw as Record<string, unknown>);
+      if (!paths.length) return head + `<p class="empty">No ${esc(field)} on this entry</p>`;
+      return head + treeNodes(buildPathTree(paths), c, "");
+    })
+    .join("");
+}
+
+/** Build the tab for one declared channel. */
+export function channelTab(c: TraceChannelDescriptor): TabView {
+  return {
+    id: `channel:${c.id}`,
+    label: c.label,
+
+    badge: ({ trace }) => {
+      const rows = trace?.channels?.[c.id] ?? [];
+      return { count: rows.length, warn: !!c.warn && rows.some((r) => !!r[c.warn!]) };
+    },
+
+    render(host, { trace }) {
+      const rows = trace?.channels?.[c.id] ?? [];
+      if (!rows.length) {
+        host.innerHTML = `<p class="empty">No ${esc(c.label.toLowerCase())} activity during this request</p>`;
+        return;
+      }
+      switch (c.render) {
+        case "tree":
+          host.innerHTML = asTree(rows, c);
+          break;
+        case "table":
+          host.innerHTML = asTable(rows, c);
+          break;
+        case "kv":
+          host.innerHTML = asKv(rows, c);
+          break;
+        case "grouped":
+          host.innerHTML = asGrouped(rows, c);
+          break;
+        default:
+          host.innerHTML = asRows(rows, c);
+      }
+    },
+  };
+}

package/src/client/tabs/exceptions.ts

@@ -0,0 +1,68 @@
+/**
+ * The error that ended the request, and how it got there.
+ *
+ * The Queries tab leads with the message because on a failed request that is the
+ * answer. This is the rest of the answer: the class name, and the stack with
+ * every frame a link into your editor.
+ *
+ * Deliberately *not* filtered to application code, unlike a query's call site.
+ * You read a stack trace to find out how you got somewhere, and a trace with the
+ * middle removed does not tell you that — so the framework frames stay, marked
+ * dim so the ones you wrote stand out of them.
+ */
+import { copyBtn, esc, sourceLink } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+/**
+ * Frames from inside the framework, which are context rather than the answer.
+ *
+ * The same judgement the call-site capture makes, but used to *style* rather than
+ * to drop: your own code is what you can act on, and in a forty-frame trace it is
+ * six of them.
+ */
+function isVendorFrame(file: string): boolean {
+  const path = file.replace(/\\/g, "/");
+  return path.includes("node_modules/") || path.includes("/packages/") || path.startsWith("bun:");
+}
+
+export const exceptionsTab: TabView = {
+  id: "exceptions",
+  label: "Exception",
+
+  badge: ({ trace }) => (trace?.exception ? { count: "!", warn: true } : undefined),
+
+  render(host, { trace, store }) {
+    const e = trace!.exception;
+    if (!e) {
+      host.innerHTML = '<p class="empty">This request completed without throwing</p>';
+      return;
+    }
+
+    const frames = e.frames ?? [];
+    const asText =
+      `${e.type ?? "Error"}: ${e.message}\n` +
+      frames.map((f) => `    at ${f.function ?? "<anonymous>"} (${f.file}:${f.line})`).join("\n");
+
+    const body = frames.length
+      ? frames
+          .map(
+            (f) =>
+              `<div class="frame${isVendorFrame(f.file) ? " vendor" : ""}">` +
+              `<span class="fnname">${esc(f.function ?? "‹anonymous›")}</span>` +
+              sourceLink(f, store.editor) +
+              `</div>`,
+          )
+          .join("")
+      : // A failure with no stack is not a bug in the panel: a thrown string, or
+        // an error crossing a boundary that dropped it, both arrive this way.
+        '<p class="empty">No stack was captured for this failure</p>';
+
+    host.innerHTML =
+      `<div class="exc">` +
+      `<div class="exhead">✗ ${esc(e.type ?? "Error")} · ${e.status}${copyBtn(asText, "Copy the whole trace")}</div>` +
+      `<div class="exmsg">${esc(e.message)}</div>` +
+      `</div>` +
+      `<div class="sec"><div class="stitle">Stack (${frames.length})</div></div>` +
+      `<div>${body}</div>`;
+  },
+};

package/src/client/tabs/jobs.ts

@@ -0,0 +1,50 @@
+/** Jobs dispatched (or processed synchronously) during the request. */
+import type { JobEntry } from "../../RequestTrace.ts";
+import { esc, fmt } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+function icon(status: JobEntry["status"]): string {
+  return status === "dispatched" ? "⚙" : status === "completed" ? "✓" : "✗";
+}
+
+export const jobsTab: TabView = {
+  id: "jobs",
+  label: "Jobs",
+
+  badge: ({ trace }) =>
+    trace
+      ? {
+          count: trace.jobs?.length ?? 0,
+          warn: trace.jobs?.some((j) => j.status === "failed") ?? false,
+        }
+      : undefined,
+
+  render(host, { trace }) {
+    const jobs = trace!.jobs ?? [];
+    if (!jobs.length) {
+      host.innerHTML = '<p class="empty">No jobs dispatched during this request</p>';
+      return;
+    }
+    host.innerHTML =
+      `<div>` +
+      jobs
+        .map((j) => {
+          const chip = j.status === "completed" ? "ok" : j.status === "failed" ? "warn" : "";
+          return (
+            `<div class="card">` +
+            `<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">` +
+            `<span class="chip ${chip}">${icon(j.status)} ${j.status}</span>` +
+            `<span class="dim" style="font-size:10px">+${j.offsetMs}ms · ${fmt(j.durationMs)}</span>` +
+            `</div>` +
+            `<div style="font-weight:600;margin-bottom:2px">${esc(j.className)}</div>` +
+            `<div class="dim" style="font-size:11px">Queue: ${esc(j.queue)}</div>` +
+            (j.error
+              ? `<div style="color:var(--red);font-size:11px;margin-top:4px">${esc(j.error)}</div>`
+              : "") +
+            `</div>`
+          );
+        })
+        .join("") +
+      `</div>`;
+  },
+};

package/src/client/tabs/logs.ts

@@ -0,0 +1,44 @@
+/** Console output captured during the request. */
+import { copyBtn, esc, sourceLink } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+export const logsTab: TabView = {
+  id: "logs",
+  label: "Logs",
+
+  badge: ({ trace }) => {
+    const logs = trace?.logs ?? [];
+    if (!trace) return undefined;
+    return {
+      count: logs.length,
+      warn: logs.some((l) => l.level === "error" || l.level === "warn"),
+    };
+  },
+
+  render(host, { trace, store }) {
+    const logs = trace!.logs ?? [];
+    if (!logs.length) {
+      host.innerHTML = '<p class="empty">No console output captured</p>';
+      return;
+    }
+    host.innerHTML =
+      `<div>` +
+      logs
+        .map((l) => {
+          const message = l.args.join(" ");
+          return (
+            `<div class="lrow">` +
+            `<span class="ltime dim">+${l.offsetMs}ms</span>` +
+            `<span class="llvl ${l.level}">${l.level.toUpperCase()}</span>` +
+            `<span class="lmsg">${esc(message)}</span>` +
+            // Where it was logged from. A stray `console.log` in a codebase you
+            // did not write all of is otherwise a search.
+            sourceLink(l.source, store.editor) +
+            copyBtn(message, "Copy line") +
+            `</div>`
+          );
+        })
+        .join("") +
+      `</div>`;
+  },
+};

package/src/client/tabs/mail.ts

@@ -0,0 +1,59 @@
+/** Emails sent or queued during the request, each with a sandboxed preview. */
+import type { MailEntry } from "../../RequestTrace.ts";
+import { esc, fmt } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+/**
+ * The rendered email, in a frame that can do nothing.
+ *
+ * The HTML has crossed the wire on every request since mail capture landed and
+ * had never been shown. It cannot simply be inserted: the panel lives in a shadow
+ * root on the app's own origin, so injecting a template's markup inline is a
+ * self-XSS on every dev machine that renders a mail containing user input. An
+ * empty `sandbox` allows nothing — no scripts, no same-origin, no forms, no
+ * navigation — which is the whole of what a preview needs.
+ *
+ * Collapsed by default: the point of the tab is which mails were sent, and three
+ * open previews push that off the screen. Keyed rendering means an open preview
+ * now survives the next request arriving, rather than reloading its iframe.
+ */
+function preview(m: MailEntry): string {
+  if (!m.html) return "";
+  return (
+    `<details class="mprev"><summary>Preview</summary>` +
+    `<iframe class="mframe" sandbox="" srcdoc="${esc(m.html)}" title="${esc(m.subject)}"></iframe>` +
+    `</details>`
+  );
+}
+
+export const mailTab: TabView = {
+  id: "mail",
+  label: "Mail",
+
+  badge: ({ trace }) => (trace ? { count: trace.mail?.length ?? 0 } : undefined),
+
+  render(host, { trace }) {
+    const mail = trace!.mail ?? [];
+    if (!mail.length) {
+      host.innerHTML = '<p class="empty">No emails sent during this request</p>';
+      return;
+    }
+    host.innerHTML =
+      `<div>` +
+      mail
+        .map(
+          (m) =>
+            `<div class="card">` +
+            `<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">` +
+            `<span class="chip${m.queued ? "" : " ok"}">${m.queued ? "⏳ Queued" : "✓ Sent"}</span>` +
+            `<span class="dim" style="font-size:10px">${esc(m.className)} · ${fmt(m.durationMs)}</span>` +
+            `</div>` +
+            `<div style="font-weight:700;margin-bottom:2px">${esc(m.subject)}</div>` +
+            `<div class="dim" style="font-size:11px">To: ${esc(m.to.join(", "))}</div>` +
+            preview(m) +
+            `</div>`,
+        )
+        .join("") +
+      `</div>`;
+  },
+};

package/src/client/tabs/queries.ts

@@ -0,0 +1,124 @@
+/**
+ * The default tab: what the request cost, what went wrong, and every statement
+ * it ran.
+ */
+import type { QuerySpan, RequestTrace } from "../../RequestTrace.ts";
+import type { EditorSettings } from "../state.ts";
+import { copyBtn, dCls, esc, fmt, fmtMem, sourceLink, tableFrom } from "../ui/format.ts";
+import type { TabView } from "./types.ts";
+
+/**
+ * The error that ended the request, above everything else about it.
+ *
+ * `RequestFailed` has always carried the message; the trace used to drop it, so a
+ * failed request showed as a red status code with nothing to read. It heads this
+ * tab rather than getting a tab of its own because on a request that threw, it is
+ * the answer — and a tab you have to find first is not.
+ */
+function exceptionBanner(t: RequestTrace): string {
+  if (!t.exception) return "";
+  return (
+    `<div class="exc">` +
+    `<div class="exhead">✗ Request failed · ${t.exception.status}${copyBtn(t.exception.message, "Copy message")}</div>` +
+    `<div class="exmsg">${esc(t.exception.message)}</div>` +
+    `</div>`
+  );
+}
+
+function queryRow(q: QuerySpan, peak: number, editor: EditorSettings): string {
+  const pct = Math.round((q.durationMs / peak) * 100);
+  const dc = q.durationMs < 10 ? "green" : q.durationMs < 100 ? "yellow" : "red";
+  const bindings = q.bindings as unknown[] | undefined;
+  const binds = bindings?.length
+    ? `<div class="qbind"><span class="dim">bindings: </span>` +
+      bindings
+        .map((v) =>
+          v == null
+            ? '<span class="bind">null</span>'
+            : typeof v === "string"
+              ? `<span class="bind">'${esc(v)}'</span>`
+              : `<span class="bind">${esc(String(v))}</span>`,
+        )
+        .join('<span class="dim">, </span>') +
+      `</div>`
+    : "";
+  return (
+    `<div class="qrow">` +
+    `<div class="qmeta">` +
+    `<span class="qdur ${dc}">${fmt(q.durationMs)}</span>` +
+    `<div class="qbar"><div class="qfill" style="width:${pct}%"></div></div>` +
+    `<span class="dim" style="font-size:10px">${q.rowCount}&thinsp;row${q.rowCount !== 1 ? "s" : ""}</span>` +
+    // The line that ran it. "Which of my forty queries is slow" was answerable;
+    // this is the other half — where to go and change it.
+    sourceLink(q.source, editor) +
+    copyBtn(q.sql, "Copy SQL") +
+    `</div><div class="qsql">${esc(q.sql)}</div>${binds}</div>`
+  );
+}
+
+export const queriesTab: TabView = {
+  id: "queries",
+  label: "Queries",
+
+  badge: ({ trace }) =>
+    trace
+      ? {
+          count: trace.queries.length,
+          warn: !!trace.warnings.length || !!trace.exception,
+        }
+      : undefined,
+
+  render(host, { trace, store }) {
+    const t = trace!;
+    const dbMs = t.queries.reduce((s, q) => s + q.durationMs, 0);
+    const peak = Math.max(1, ...t.queries.map((q) => q.durationMs));
+
+    const route = t.route
+      ? `<div class="rcard">` +
+        `<span class="meth ${t.method.toLowerCase()}">${esc(t.method)}</span> ` +
+        `<b>${esc(t.route.pattern)}</b>` +
+        `<span class="dim" style="font-size:10px;margin-left:8px">${esc(t.route.controller)}@${esc(t.route.action)}</span>` +
+        `</div>`
+      : "";
+
+    const mem = t.memory
+      ? `<div class="stat"><div class="slbl">Memory</div><div class="sval">${fmtMem(t.memory)}</div></div>`
+      : "";
+    const auth = t.auth
+      ? `<div class="stat"><div class="slbl">User</div><div class="sval cyan">${esc(String(t.auth.name ?? t.auth.email ?? t.auth.id ?? "?"))}</div></div>`
+      : `<div class="stat"><div class="slbl">User</div><div class="sval dim">Guest</div></div>`;
+
+    // A warning that does not say what to do about it is half a feature, so each
+    // one carries the eager-load that removes it and the call that suppresses it
+    // when the repetition is intended.
+    const warns = t.warnings
+      .map(
+        (w) =>
+          `<div class="wrow"><div class="whead">⚠ N+1 · executed <b>${w.count}×</b></div>` +
+          `<div class="qsql dim">${esc(w.sql)}</div>` +
+          `<div class="wfix">Fix: eager-load with <code>.with('relation')</code>` +
+          ` &nbsp;·&nbsp; suppress: <code>DB.allowNPlusOne('${esc(tableFrom(w.sql))}')</code></div>` +
+          `</div>`,
+      )
+      .join("");
+
+    const queries = t.queries.length
+      ? t.queries.map((q) => queryRow(q, peak, store.editor)).join("")
+      : '<p class="empty">No queries for this request</p>';
+
+    const allSql = t.queries.map((q) => q.sql).join(";\n\n");
+
+    host.innerHTML =
+      `${route}${exceptionBanner(t)}<div class="stats">` +
+      `<div class="stat"><div class="slbl">Duration</div><div class="sval ${dCls(t.durationMs)}">${fmt(t.durationMs)}</div></div>` +
+      `<div class="stat"><div class="slbl">Queries</div><div class="sval">${t.queries.length}</div></div>` +
+      `<div class="stat"><div class="slbl">DB time</div><div class="sval">${fmt(dbMs)}</div></div>` +
+      `${mem}${auth}</div>` +
+      (t.warnings.length
+        ? `<div class="sec"><div class="stitle">N+1 Warnings</div>${warns}</div>`
+        : "") +
+      `<div class="sec"><div class="stitle">Queries (${t.queries.length})` +
+      copyBtn(allSql, "Copy every statement") +
+      `</div>${queries}</div>`;
+  },
+};