@zerotal/devtools 1.0.0

package/src/config.ts

@@ -0,0 +1,60 @@
+import { deepMerge } from "@zerotal/core";
+import type { RedactionOptions } from "./redaction.ts";
+
+export interface DevtoolsConfigShape {
+  /**
+   * How many request traces to keep in memory and reload on start.
+   * Default: `100`.
+   */
+  capacity: number;
+  /**
+   * SQLite file backing the trace history, so it survives a restart. Set to
+   * `null` to keep traces in memory only — nothing is written to disk.
+   * Default: `.zerotal/devtools.sqlite`, or `ZT_DEVTOOLS_DB`.
+   */
+  dbPath: string | null;
+  /**
+   * How long a persisted trace survives, in hours.
+   * Default: `24`, or `ZT_DEVTOOLS_PRUNE_HOURS`.
+   */
+  pruneHours: number;
+  /**
+   * Whether query bindings are masked before a trace leaves the process.
+   *
+   * On by default: a trace is streamed to the browser *and* written to disk for
+   * a day, and bindings are the request's real values — the password on a
+   * registration, a reset token, every customer email a listing selects by.
+   * Turn it off only when you are debugging the values themselves.
+   */
+  redact: RedactionOptions;
+}
+
+const defaults: DevtoolsConfigShape = {
+  capacity: 100,
+  dbPath: Bun.env["ZT_DEVTOOLS_DB"] ?? ".zerotal/devtools.sqlite",
+  pruneHours: Number(Bun.env["ZT_DEVTOOLS_PRUNE_HOURS"] ?? 24),
+  redact: { enabled: true, allow: [], deny: [] },
+};
+
+/**
+ * Create a typed devtools configuration object with defaults.
+ *
+ * @example
+ * // config/devtools.ts
+ * import { DevtoolsConfig } from '@zerotal/devtools';
+ *
+ * export default DevtoolsConfig({
+ *   capacity: 250,
+ *   redact: { allow: ['email', 'slug'] },
+ * });
+ */
+export function DevtoolsConfig(options: Partial<DevtoolsConfigShape> = {}): DevtoolsConfigShape {
+  return deepMerge(defaults, options);
+}
+
+// Register this package's config namespace for typed config() dot-paths.
+declare module "@zerotal/core" {
+  interface ConfigRegistry {
+    devtools: DevtoolsConfigShape;
+  }
+}

package/src/dashboard-auto.ts

@@ -0,0 +1,13 @@
+/**
+ * Auto-start entry for the standalone inspector dashboard, bundled on demand and
+ * served at `GET /__zerotal/devtools/dashboard.js`.
+ *
+ * The dashboard is the same panel as the injected one, mounted full-window. It
+ * used to be a second implementation living in `panel.html` — a thousand lines
+ * of duplicated markup, CSS, and formatters that drifted from the panel it
+ * shadowed and never gained the plugin tabs the panel had. Sharing the renderer
+ * means a tab added anywhere shows up in both.
+ */
+import { DevTools } from "./client.ts";
+
+DevTools.start({ mode: "standalone" });

package/src/index.ts

@@ -0,0 +1,27 @@
+// @zerotal/devtools — public API barrel
+
+export { DevtoolsProvider } from "./provider/DevtoolsProvider.ts";
+export type { DevtoolsPanelPlugin } from "./client.ts";
+export { DevtoolsInjectionMiddleware, startDevtoolsStream } from "./DevtoolsInjectionMiddleware.ts";
+export type { DevtoolsInjectionOptions } from "./DevtoolsInjectionMiddleware.ts";
+export { TraceStore, traceStore, _setTraceStore } from "./TraceStore.ts";
+export type { TraceStoreOptions } from "./TraceStore.ts";
+export { DevtoolsConfig } from "./config.ts";
+export type { DevtoolsConfigShape } from "./config.ts";
+export { redactBindings, attributeBindings } from "./redaction.ts";
+export type { RedactionOptions } from "./redaction.ts";
+export { traceSink, traceChannels } from "./tracing.ts";
+export type { TraceSink } from "./tracing.ts";
+export type {
+  RequestTrace,
+  QuerySpan,
+  NPlusOneWarning,
+  MailEntry,
+  CacheEntry,
+  JobEntry,
+  LogEntry,
+  RouteInfo,
+  AuthInfo,
+  TraceChannelDescriptor,
+  TraceChannelEntry,
+} from "./RequestTrace.ts";

package/src/panel-app.js

@@ -0,0 +1,519 @@
+/* @zerotal/devtools — browser panel injected by DevtoolsInjectionMiddleware */
+(function () {
+  "use strict";
+
+  const T = window.__ZT_DT__;
+  if (!T) return;
+
+  // ── Styles (shadow DOM — fully isolated from host page) ──────────────────
+  const STYLES = `<style>
+    :host {
+      --bg:     #1a1b26;
+      --surf:   #24283b;
+      --card:   #2f3452;
+      --border: #3b4261;
+      --text:   #c0caf5;
+      --muted:  #565f89;
+      --purple: #7aa2f7;
+      --green:  #9ece6a;
+      --yellow: #e0af68;
+      --red:    #f7768e;
+      --orange: #ff9e64;
+      --cyan:   #7dcfff;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    #wrap {
+      display: flex; flex-direction: column;
+      font: 12px/1.5 'JetBrains Mono','Fira Code','SF Mono',ui-monospace,monospace;
+      color: var(--text);
+    }
+    #bar {
+      display: flex; align-items: center; gap: 8px;
+      height: 32px; padding: 0 12px;
+      background: var(--bg); border-top: 1px solid var(--border);
+      cursor: pointer; user-select: none; flex-shrink: 0;
+    }
+    #bar:hover { background: var(--surf); }
+    .logo { color: var(--purple); font-weight: 700; }
+    .divider { color: var(--border); }
+    .flex1 { flex: 1; }
+    .dim  { color: var(--muted); }
+    .path { color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .icon-btn {
+      background: none; border: none; color: var(--muted);
+      cursor: pointer; font: inherit; font-size: 14px; padding: 0 4px; line-height: 1;
+    }
+    .icon-btn:hover { color: var(--text); }
+    .tog { font-size: 10px; }
+    .meth {
+      font-size: 10px; font-weight: 700; padding: 2px 6px;
+      border-radius: 3px; letter-spacing: 0.3px;
+    }
+    .get             { background: #1d2d50; color: var(--purple); }
+    .post            { background: #1e3328; color: var(--green); }
+    .put, .patch     { background: #362b18; color: var(--yellow); }
+    .delete          { background: #361e22; color: var(--red); }
+    .head, .options  { background: var(--card); color: var(--muted); }
+    .sc { font-weight: 700; font-size: 12px; }
+    .green  { color: var(--green); }
+    .yellow { color: var(--yellow); }
+    .red    { color: var(--red); }
+    .orange { color: var(--orange); }
+    .cyan   { color: var(--cyan); }
+    .chip-n1 {
+      background: #362314; color: var(--orange);
+      font-size: 10px; font-weight: 700;
+      padding: 1px 6px; border-radius: 10px;
+    }
+    .chip-user {
+      background: var(--card); color: var(--cyan);
+      font-size: 10px; padding: 1px 7px; border-radius: 10px;
+      max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    #panel {
+      flex-direction: column; height: 380px;
+      background: var(--bg); border-top: 1px solid var(--border);
+    }
+    #tabs {
+      display: flex; flex-shrink: 0;
+      background: var(--surf); border-bottom: 1px solid var(--border);
+    }
+    .tab {
+      background: none; border: none; border-bottom: 2px solid transparent;
+      color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
+      padding: 7px 14px;
+    }
+    .tab:hover { color: var(--text); }
+    .tab.active { color: var(--text); border-bottom-color: var(--purple); }
+    .tab-badge {
+      display: inline-block; background: var(--card); color: var(--muted);
+      font-size: 10px; padding: 0 5px; border-radius: 8px; margin-left: 4px;
+    }
+    .tab-badge.warn { background: #362314; color: var(--orange); }
+    #content {
+      flex: 1; overflow-y: auto; padding: 12px 16px;
+      display: flex; flex-direction: column; gap: 12px;
+    }
+    .stats { display: flex; flex-wrap: wrap; gap: 16px; }
+    .stat  { display: flex; flex-direction: column; gap: 2px; }
+    .slbl  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
+    .sval  { font-size: 15px; font-weight: 700; }
+    .section { display: flex; flex-direction: column; gap: 6px; }
+    .sec-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
+    .route-card {
+      background: var(--surf); border: 1px solid var(--border);
+      border-radius: 5px; padding: 8px 10px;
+      display: flex; flex-direction: column; gap: 3px;
+    }
+    .route-pattern { color: var(--cyan); font-size: 12px; }
+    .route-action  { color: var(--muted); font-size: 11px; }
+    .qrow {
+      background: var(--surf); border: 1px solid var(--border);
+      border-radius: 5px; padding: 8px 10px;
+    }
+    .qmeta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
+    .qdur  { font-size: 11px; font-weight: 700; min-width: 44px; }
+    .qbar  { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
+    .qfill { height: 100%; background: var(--purple); border-radius: 2px; }
+    .qrc   { font-size: 11px; color: var(--muted); flex-shrink: 0; }
+    .qsql  { font-size: 11px; color: var(--text); word-break: break-all; line-height: 1.6; }
+    .qbind { font-size: 11px; margin-top: 4px; }
+    .bind  { color: var(--orange); }
+    .warn-row {
+      background: #261b10; border: 1px solid var(--orange);
+      border-radius: 5px; padding: 8px 10px;
+    }
+    .warn-head { font-size: 11px; font-weight: 700; color: var(--orange); margin-bottom: 5px; }
+    .warn-fix  { font-size: 11px; color: var(--muted); margin-top: 5px; }
+    .warn-fix code { color: var(--cyan); }
+    .log-row {
+      display: flex; gap: 8px; padding: 4px 0;
+      border-bottom: 1px solid var(--border); align-items: flex-start;
+    }
+    .log-row:last-child { border-bottom: none; }
+    .log-time { color: var(--muted); font-size: 11px; flex-shrink: 0; min-width: 42px; }
+    .log-lvl  { font-size: 10px; font-weight: 700; flex-shrink: 0; min-width: 36px; text-transform: uppercase; }
+    .log-msg  { font-size: 11px; word-break: break-all; flex: 1; line-height: 1.5; }
+    .lvl-log   { color: var(--muted); }
+    .lvl-debug { color: var(--muted); }
+    .lvl-info  { color: var(--cyan); }
+    .lvl-warn  { color: var(--yellow); }
+    .lvl-error { color: var(--red); }
+    .kv-table { width: 100%; border-collapse: collapse; }
+    .kv-table tr:nth-child(odd) td { background: var(--surf); }
+    .kv-table td { padding: 3px 8px; vertical-align: top; word-break: break-all; }
+    .kv-key { color: var(--purple); white-space: nowrap; padding-right: 12px; min-width: 140px; }
+    .kv-val { color: var(--text); }
+    .hrow {
+      display: flex; align-items: center; gap: 8px;
+      padding: 5px 8px; border-radius: 4px;
+    }
+    .hrow:nth-child(odd) { background: var(--surf); }
+    .hrow.cur { background: #1d2d50; }
+    .hpath { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .empty { color: var(--muted); font-size: 12px; padding: 16px 0; }
+    ::-webkit-scrollbar { width: 5px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+  </style>`;
+
+  // ── Mount ────────────────────────────────────────────────────────────────
+  const host = document.createElement("div");
+  host.id = "__zerotal_dt__";
+  host.style.cssText =
+    "position:fixed;bottom:0;left:0;right:0;z-index:2147483647;pointer-events:none";
+  document.body.appendChild(host);
+
+  const shadow = host.attachShadow({ mode: "open" });
+  shadow.innerHTML =
+    STYLES +
+    `
+    <div id="wrap" style="pointer-events:auto">
+      <div id="panel" style="display:none">
+        <div id="tabs">
+          <button id="tab-cur"  class="tab active">Queries<span id="badge-q" class="tab-badge"></span></button>
+          <button id="tab-logs" class="tab">Logs<span id="badge-l" class="tab-badge"></span></button>
+          <button id="tab-req"  class="tab">Request</button>
+          <button id="tab-hist" class="tab">History</button>
+        </div>
+        <div id="content"></div>
+      </div>
+      <div id="bar"></div>
+    </div>`;
+
+  // ── State ────────────────────────────────────────────────────────────────
+  let open = false;
+  let tab = "cur";
+  let hist = null;
+  let histErr = false;
+
+  // Populate tab badges once
+  q("#badge-q").textContent = T.queries.length;
+  if (T.warnings.length) q("#badge-q").classList.add("warn");
+  if ((T.logs || []).length) {
+    q("#badge-l").textContent = T.logs.length;
+    const hasErr = T.logs.some(function (l) {
+      return l.level === "error" || l.level === "warn";
+    });
+    if (hasErr) q("#badge-l").classList.add("warn");
+  }
+
+  // ── Wire events ──────────────────────────────────────────────────────────
+  q("#bar").addEventListener("click", function (e) {
+    if (e.target.closest && e.target.closest("#btn-close")) return;
+    toggle();
+  });
+  q("#tab-cur").addEventListener("click", function () {
+    setTab("cur");
+  });
+  q("#tab-logs").addEventListener("click", function () {
+    setTab("logs");
+  });
+  q("#tab-req").addEventListener("click", function () {
+    setTab("req");
+  });
+  q("#tab-hist").addEventListener("click", function () {
+    setTab("hist");
+  });
+  document.addEventListener("keydown", function (e) {
+    if ((e.altKey || e.metaKey) && e.key === "d") {
+      e.preventDefault();
+      toggle();
+    }
+  });
+
+  // ── Boot ─────────────────────────────────────────────────────────────────
+  renderBar();
+
+  // ── Core ─────────────────────────────────────────────────────────────────
+  function toggle() {
+    open = !open;
+    q("#panel").style.display = open ? "flex" : "none";
+    if (open) renderPanel();
+    renderBar();
+  }
+
+  function setTab(t) {
+    tab = t;
+    q("#tab-cur").classList.toggle("active", t === "cur");
+    q("#tab-logs").classList.toggle("active", t === "logs");
+    q("#tab-req").classList.toggle("active", t === "req");
+    q("#tab-hist").classList.toggle("active", t === "hist");
+    if (t === "hist" && hist === null && !histErr) fetchHistory();
+    renderPanel();
+  }
+
+  // ── Toolbar ───────────────────────────────────────────────────────────────
+  function renderBar() {
+    const sc = scls(T.statusCode);
+    const dc = dcls(T.durationMs);
+    const n1 = T.warnings.length ? `<span class="chip-n1">⚠ N+1 ×${T.warnings.length}</span>` : "";
+    const mem = T.memory
+      ? `<span class="divider">·</span><span class="dim">${fmtMem(T.memory)}</span>`
+      : "";
+    const user = T.auth
+      ? `<span class="chip-user">👤 ${esc(String(T.auth.name || T.auth.email || T.auth.id))}</span>`
+      : `<span class="dim" style="font-size:11px">guest</span>`;
+    const arr = open ? "▼" : "▲";
+    q("#bar").innerHTML = `<span class="logo">⬡ <b>Zerotal</b></span>
+       <span class="divider">|</span>
+       <span class="meth ${T.method.toLowerCase()}">${esc(T.method)}</span>
+       <span class="path">${esc(T.path)}</span>
+       <span class="divider">|</span>
+       <span class="sc ${sc}">${T.statusCode || "—"}</span>
+       <span class="divider">·</span>
+       <span class="${dc}">${fmt(T.durationMs)}</span>
+       <span class="divider">·</span>
+       <span class="dim">${T.queries.length}&thinsp;quer${T.queries.length === 1 ? "y" : "ies"}</span>
+       ${mem}
+       <span class="divider">·</span>
+       ${user}
+       ${n1}
+       <span class="flex1"></span>
+       <button id="btn-close" class="icon-btn" title="Hide (Alt+D)">×</button>
+       <button class="icon-btn tog" title="Toggle panel">${arr}</button>`;
+
+    q("#btn-close").addEventListener("click", function (e) {
+      e.stopPropagation();
+      host.remove();
+    });
+  }
+
+  // ── Panel ─────────────────────────────────────────────────────────────────
+  function renderPanel() {
+    if (tab === "cur") renderQueries();
+    else if (tab === "logs") renderLogs();
+    else if (tab === "req") renderRequest();
+    else renderHistory();
+  }
+
+  function renderQueries() {
+    const total = T.queries.reduce(function (s, q) {
+      return s + q.durationMs;
+    }, 0);
+    const peak = T.queries.reduce(function (m, q) {
+      return Math.max(m, q.durationMs);
+    }, 1);
+
+    const routeCard = T.route
+      ? `<div class="route-card">
+           <div class="route-pattern">${esc(T.method)} <strong>${esc(T.route.pattern)}</strong></div>
+           <div class="route-action dim">${esc(T.route.controller)}@${esc(T.route.action)}</div>
+         </div>`
+      : "";
+
+    const authCard = T.auth
+      ? `<div class="stat">
+           <div class="slbl">User</div>
+           <div class="sval cyan" style="font-size:13px">${esc(String(T.auth.name || T.auth.email || T.auth.id))}</div>
+           ${T.auth.email ? `<div class="dim" style="font-size:10px">${esc(String(T.auth.email))}</div>` : ""}
+         </div>`
+      : `<div class="stat"><div class="slbl">User</div><div class="sval dim" style="font-size:13px">Guest</div></div>`;
+
+    const qRows =
+      T.queries.length === 0
+        ? '<p class="empty">No queries recorded</p>'
+        : T.queries
+            .map(function (qr) {
+              const pct = Math.round((qr.durationMs / peak) * 100);
+              const dc = qr.durationMs < 10 ? "green" : qr.durationMs < 100 ? "yellow" : "red";
+              const bindings =
+                qr.bindings && qr.bindings.length
+                  ? `<div class="qbind"><span class="dim">bindings:</span> ${qr.bindings
+                      .map(function (v) {
+                        return v === null || v === undefined
+                          ? '<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(qr.durationMs)}</span>
+              <div class="qbar"><div class="qfill" style="width:${pct}%"></div></div>
+              <span class="qrc">${qr.rowCount}&thinsp;row${qr.rowCount !== 1 ? "s" : ""}</span>
+            </div>
+            <div class="qsql">${esc(qr.sql)}</div>
+            ${bindings}
+          </div>`;
+            })
+            .join("");
+
+    const wRows = T.warnings
+      .map(function (w) {
+        return `<div class="warn-row">
+        <div class="warn-head">⚠ Executed <strong>${w.count}×</strong> in this request — N+1 detected</div>
+        <div class="qsql">${esc(w.sql)}</div>
+        <div class="warn-fix">Fix: use <code>.with('relation')</code>
+          &nbsp;·&nbsp; suppress: <code>DB.allowNPlusOne('${esc(tableFrom(w.sql))}')</code></div>
+      </div>`;
+      })
+      .join("");
+
+    q("#content").innerHTML = `${routeCard ? `<div class="section">${routeCard}</div>` : ""}
+       <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">Query time</div>
+           <div class="sval">${fmt(total)}</div></div>
+         ${
+           T.memory
+             ? `<div class="stat"><div class="slbl">Memory</div>
+           <div class="sval">${fmtMem(T.memory)}</div></div>`
+             : ""
+         }
+         ${
+           T.warnings.length
+             ? `<div class="stat"><div class="slbl">N+1</div>
+              <div class="sval orange">${T.warnings.length}</div></div>`
+             : ""
+         }
+         ${authCard}
+       </div>
+       <div class="section">
+         <div class="sec-title">Queries (${T.queries.length})</div>${qRows}
+       </div>
+       ${
+         T.warnings.length
+           ? `<div class="section"><div class="sec-title">⚠ N+1 Warnings</div>${wRows}</div>`
+           : ""
+       }`;
+  }
+
+  function renderLogs() {
+    const logs = T.logs || [];
+    if (logs.length === 0) {
+      q("#content").innerHTML = '<p class="empty">No console output captured for this request</p>';
+      return;
+    }
+    q("#content").innerHTML = `<div class="section">
+         <div class="sec-title">Console (${logs.length})</div>
+         <div>${logs
+           .map(function (l) {
+             return `<div class="log-row">
+             <span class="log-time dim">+${l.offsetMs}ms</span>
+             <span class="log-lvl lvl-${esc(l.level)}">${esc(l.level)}</span>
+             <span class="log-msg">${l.args
+               .map(function (a) {
+                 return esc(a);
+               })
+               .join(" ")}</span>
+           </div>`;
+           })
+           .join("")}</div>
+       </div>`;
+  }
+
+  function renderRequest() {
+    const qp = T.queryParams || {};
+    const hdrs = T.headers || {};
+    const qpKeys = Object.keys(qp);
+    const hdrKeys = Object.keys(hdrs);
+
+    const qpRows =
+      qpKeys.length === 0
+        ? '<tr><td colspan="2" class="dim" style="padding:6px 8px">No query parameters</td></tr>'
+        : qpKeys
+            .map(function (k) {
+              return `<tr><td class="kv-key">${esc(k)}</td><td class="kv-val">${esc(qp[k])}</td></tr>`;
+            })
+            .join("");
+
+    const hdrRows =
+      hdrKeys.length === 0
+        ? '<tr><td colspan="2" class="dim" style="padding:6px 8px">—</td></tr>'
+        : hdrKeys
+            .map(function (k) {
+              return `<tr><td class="kv-key">${esc(k)}</td><td class="kv-val">${esc(hdrs[k])}</td></tr>`;
+            })
+            .join("");
+
+    q("#content").innerHTML = `<div class="section">
+         <div class="sec-title">Query Parameters (${qpKeys.length})</div>
+         <table class="kv-table">${qpRows}</table>
+       </div>
+       <div class="section">
+         <div class="sec-title">Request Headers</div>
+         <table class="kv-table">${hdrRows}</table>
+       </div>`;
+  }
+
+  function renderHistory() {
+    if (hist === null) {
+      q("#content").innerHTML = '<p class="empty">Loading…</p>';
+      return;
+    }
+    const rows =
+      histErr || !hist.length
+        ? `<p class="empty">${histErr ? "Failed to load history" : "No requests recorded yet"}</p>`
+        : hist
+            .map(function (t) {
+              const cur = t.id === T.id ? " cur" : "";
+              return `<div class="hrow${cur}">
+            <span class="meth ${t.method.toLowerCase()}">${esc(t.method)}</span>
+            <span class="hpath">${esc(t.path)}</span>
+            <span class="sc ${scls(t.statusCode)}">${t.statusCode || "—"}</span>
+            <span class="${dcls(t.durationMs)}">${fmt(t.durationMs)}</span>
+            <span class="dim">${t.queries.length}q</span>
+            ${t.logs && t.logs.length ? `<span class="dim">${t.logs.length}log</span>` : ""}
+            ${t.warnings.length ? '<span class="chip-n1">N+1</span>' : ""}
+          </div>`;
+            })
+            .join("");
+    q("#content").innerHTML = rows;
+  }
+
+  function fetchHistory() {
+    fetch("/__zerotal/devtools/api/traces")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (data) {
+        hist = data;
+        if (tab === "hist") renderPanel();
+      })
+      .catch(function () {
+        histErr = true;
+        if (tab === "hist") renderPanel();
+      });
+  }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  function q(sel) {
+    return shadow.querySelector(sel);
+  }
+  function esc(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+      }[c];
+    });
+  }
+  function fmt(ms) {
+    return ms >= 1000 ? (ms / 1000).toFixed(1) + "s" : ms + "ms";
+  }
+  function fmtMem(bytes) {
+    return bytes >= 1048576
+      ? (bytes / 1048576).toFixed(1) + " MB"
+      : (bytes / 1024).toFixed(0) + " KB";
+  }
+  function scls(s) {
+    return s >= 500 ? "red" : s >= 400 ? "yellow" : s >= 300 ? "cyan" : s ? "green" : "dim";
+  }
+  function dcls(ms) {
+    return ms > 1000 ? "red" : ms > 300 ? "yellow" : "";
+  }
+  function tableFrom(sql) {
+    const m = /from\s+[`'"]?(\w+)[`'"]?/i.exec(sql);
+    return m ? m[1] : "table_name";
+  }
+})();

package/src/panel.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>Zerotal Inspector</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background: #1a1b26;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      A shell, not a second panel. The dashboard is the injected panel mounted
+      full-window, so both surfaces share one set of tabs, renderers, and styles
+      and a package that contributes a tab gets it in both.
+    -->
+    <script type="module" src="/__zerotal/devtools/dashboard.js"></script>
+  </body>
+</html>