sql-dev-inspector 0.0.0-stage → 1.0.0

package/dist/ui/client.js

@@ -0,0 +1,472 @@
+// The inspector page's script, as a string: it runs in the browser, not in Node, and must stay
+// dependency-free. `String.raw` keeps regex backslashes intact; keep backticks and dollar-braces out of it.
+export const CLIENT_SCRIPT = String.raw `
+(function () {
+  "use strict";
+  var CFG = __SQLI__;
+  var MESSAGES = CFG.messages, LOCALES = CFG.locales;
+  var KEY_LANG = "sqlDevInspector.lang", KEY_THEME = "sqlDevInspector.theme", KEY_FOLLOW = "sqlDevInspector.follow";
+
+  // ── tiny helpers ───────────────────────────────────────────────────
+  function $(id) { return document.getElementById(id); }
+  var storage = {
+    get: function (k) { try { return localStorage.getItem(k); } catch (e) { return null; } },
+    set: function (k, v) { try { localStorage.setItem(k, v); } catch (e) { /* storage may be blocked */ } }
+  };
+  function h(tag, props, kids) {
+    var el = document.createElement(tag);
+    if (props) {
+      Object.keys(props).forEach(function (k) {
+        var v = props[k];
+        if (v === null || v === undefined || v === false) { return; }
+        if (k === "class") { el.className = v; }
+        else if (k === "text") { el.textContent = v; }
+        else if (k.slice(0, 2) === "on") { el.addEventListener(k.slice(2), v); }
+        else { el.setAttribute(k, v === true ? "" : String(v)); }
+      });
+    }
+    (kids || []).forEach(function (c) {
+      if (c === null || c === undefined || c === false) { return; }
+      el.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
+    });
+    return el;
+  }
+  var ICONS = {
+    db: "<svg viewBox='0 0 24 24'><ellipse cx='12' cy='5' rx='8' ry='3'/><path d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/></svg>",
+    search: "<svg viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>",
+    chev: "<svg viewBox='0 0 24 24'><path d='m9 6 6 6-6 6'/></svg>",
+    down: "<svg viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>",
+    back: "<svg viewBox='0 0 24 24'><path d='m15 6-6 6 6 6'/></svg>",
+    trash: "<svg viewBox='0 0 24 24'><path d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/></svg>",
+    copy: "<svg viewBox='0 0 24 24'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V6a2 2 0 0 1 2-2h9'/></svg>",
+    ok: "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='m8 12.5 2.8 2.8L16 9.5'/></svg>",
+    warn: "<svg viewBox='0 0 24 24'><path d='M12 3 2.5 20h19L12 3Z'/><path d='M12 10v4M12 17.2v.1'/></svg>",
+    error: "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='m9 9 6 6M15 9l-6 6'/></svg>",
+    info: "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 7.8v.1'/></svg>",
+    layers: "<svg viewBox='0 0 24 24'><path d='m12 3 9 5-9 5-9-5 9-5Z'/><path d='m3 13 9 5 9-5'/></svg>",
+    flag: "<svg viewBox='0 0 24 24'><path d='M5 21V4M5 4h11l-2 4 2 4H5'/></svg>",
+    sun: "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>",
+    moon: "<svg viewBox='0 0 24 24'><path d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/></svg>",
+    monitor: "<svg viewBox='0 0 24 24'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M8 20h8M12 16v4'/></svg>",
+    globe: "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3Z'/></svg>",
+    check: "<svg viewBox='0 0 24 24'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>",
+    inbox: "<svg viewBox='0 0 24 24'><path d='M3 13h5l1.5 3h5L16 13h5'/><path d='M5 5h14l2 8v6H3v-6l2-8Z'/></svg>"
+  };
+  function icon(name) { var s = document.createElement("span"); s.innerHTML = ICONS[name] || ""; return s.firstChild; }
+
+  // ── i18n ──────────────────────────────────────────────────────────
+  function matchLocale(tag) {
+    var m = /^([a-z]{2,3})/i.exec(tag || "");
+    var code = m && m[1].toLowerCase();
+    for (var i = 0; i < LOCALES.length; i++) { if (LOCALES[i].code === code) { return code; } }
+    return null;
+  }
+  function initialLocale() {
+    var fromQuery = matchLocale(new URLSearchParams(location.search).get("lang"));
+    var langs = (navigator.languages && navigator.languages.length) ? navigator.languages : [navigator.language];
+    var fromBrowser = null;
+    for (var i = 0; i < langs.length && !fromBrowser; i++) { fromBrowser = matchLocale(langs[i]); }
+    return fromQuery || matchLocale(storage.get(KEY_LANG)) || CFG.hint || fromBrowser || "en";
+  }
+  var locale = initialLocale();
+  function t(key, params) {
+    var dict = MESSAGES[locale] || {};
+    var one = params && String(params.count) === "1" ? (dict[key + ".one"] || MESSAGES.en[key + ".one"]) : null;
+    var s = one || dict[key] || MESSAGES.en[key] || key;
+    return s.replace(/\{(\w+)\}/g, function (whole, name) { return params && name in params ? String(params[name]) : whole; });
+  }
+  function num(n, digits) { try { return new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(n); } catch (e) { return String(n); } }
+  function fmtMs(v) {
+    if (v === null || v === undefined) { return "…"; }
+    if (v < 1) { return num(v, 2) + " ms"; }
+    if (v < 10) { return num(v, 2) + " ms"; }
+    if (v < 1000) { return num(v, 1) + " ms"; }
+    return num(v / 1000, 2) + " s";
+  }
+  function fmtTime(ts) { try { return new Date(ts).toLocaleTimeString(locale); } catch (e) { return ""; } }
+
+  // ── state ─────────────────────────────────────────────────────────
+  var state = {
+    requests: [], selectedId: null, report: null, term: "", mode: "all",
+    follow: location.hash === "#latest" || storage.get(KEY_FOLLOW) === "1",
+    open: {}, collapsed: {}, highlight: [], expandAll: false, rawSql: {},
+    theme: storage.get(KEY_THEME) || "auto", live: false, loadToken: 0
+  };
+  var appEl = $("app"), listBody = $("list-body"), detailEl = $("detail");
+
+  // ── theme / language ──────────────────────────────────────────────
+  function applyTheme() {
+    if (state.theme === "light" || state.theme === "dark") { document.documentElement.setAttribute("data-theme", state.theme); }
+    else { document.documentElement.removeAttribute("data-theme"); }
+    var btn = $("theme"); btn.textContent = "";
+    btn.appendChild(icon(state.theme === "dark" ? "moon" : state.theme === "light" ? "sun" : "monitor"));
+    var label = t("theme.label") + ": " + t("theme." + state.theme);
+    btn.setAttribute("title", label); btn.setAttribute("aria-label", label);
+  }
+  function applyI18n() {
+    document.documentElement.lang = locale;
+    document.title = t("app.title");
+    Array.prototype.forEach.call(document.querySelectorAll("[data-i18n]"), function (el) { el.textContent = t(el.getAttribute("data-i18n")); });
+    Array.prototype.forEach.call(document.querySelectorAll("[data-i18n-title]"), function (el) { el.setAttribute("title", t(el.getAttribute("data-i18n-title"))); });
+    Array.prototype.forEach.call(document.querySelectorAll("[data-i18n-placeholder]"), function (el) { el.setAttribute("placeholder", t(el.getAttribute("data-i18n-placeholder"))); });
+    Array.prototype.forEach.call(document.querySelectorAll("[data-i18n-aria]"), function (el) { el.setAttribute("aria-label", t(el.getAttribute("data-i18n-aria"))); });
+    updateLangMenu();
+    applyTheme(); renderLive();
+  }
+
+  // ── SQL highlighting (DOM nodes only: SQL text is never parsed as HTML) ──
+  var KEYWORDS = {};
+  ("select from where and or not in is null like between join left right inner outer cross on group by order having limit offset union all distinct as insert into values update set delete exists case when then else end asc desc with begin commit rollback savepoint release start transaction for true false default duplicate key lateral using interval to").split(" ").forEach(function (w) { KEYWORDS[w] = true; });
+  var TOKEN = /('(?:[^'\\]|\\.|'')*'|"(?:[^"\\]|\\.|"")*")|(` + "`" + String.raw `[^` + "`" + String.raw `]*` + "`" + String.raw `)|(\/\*[\s\S]*?\*\/|--[^\n]*)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_][A-Za-z0-9_]*)|(\s+|[\s\S])/g;
+  function highlight(sql) {
+    var frag = document.createDocumentFragment(), m;
+    TOKEN.lastIndex = 0;
+    while ((m = TOKEN.exec(sql)) !== null) {
+      var text = m[0], cls = null;
+      if (m[1]) { cls = "str"; } else if (m[2]) { cls = "id"; } else if (m[3]) { cls = "com"; } else if (m[4]) { cls = "num"; }
+      else if (m[5]) {
+        if (KEYWORDS[text.toLowerCase()]) { cls = "kw"; }
+        else if (sql.charAt(m.index + text.length) === "(") { cls = "fn"; }
+      }
+      frag.appendChild(cls ? h("span", { class: cls, text: text }) : document.createTextNode(text));
+    }
+    return frag;
+  }
+
+  // ── derived data ──────────────────────────────────────────────────
+  function isControl(kind) { return /^(tx-|savepoint)/.test(kind); }
+  function countNodes(nodes, type) {
+    var n = 0;
+    nodes.forEach(function (node) { if (node.type === type) { n++; } if (node.children) { n += countNodes(node.children, type); } });
+    return n;
+  }
+  function visibleRequests() {
+    var term = state.term.trim().toLowerCase();
+    return state.requests.filter(function (r) {
+      if (state.mode === "issues" && !(r.warnings || r.errors)) { return false; }
+      if (state.mode === "errors" && !r.errors) { return false; }
+      return !term || (r.method + " " + r.url + " " + (r.status === null ? "" : r.status)).toLowerCase().indexOf(term) >= 0;
+    });
+  }
+  function urlLabel(r) { return r.id === "background" ? t("requests.background") : r.url; }
+
+  // ── request list ──────────────────────────────────────────────────
+  function statusEl(status) {
+    return h("span", { class: "status" + (status ? " s" + String(status).charAt(0) : ""), text: status === null ? "…" : String(status) });
+  }
+  function renderList() {
+    var rows = visibleRequests();
+    $("count").textContent = String(state.requests.length);
+    listBody.textContent = "";
+    if (!state.requests.length) {
+      listBody.appendChild(h("div", { class: "empty" }, [icon("inbox"), h("h3", { text: t("requests.empty.title") }), h("p", { text: t("requests.empty.body") })]));
+      listBody.firstChild.querySelector("svg").setAttribute("class", "big");
+      return;
+    }
+    if (!rows.length) { listBody.appendChild(h("div", { class: "empty" }, [h("p", { text: t("requests.noMatch") })])); return; }
+    rows.forEach(function (r) {
+      var meta = [
+        h("span", { text: t("term.queries", { count: r.queryCount }) }),
+        h("i", { class: "dot" }),
+        h("span", { text: fmtMs(r.sqlTimeMs) }),
+        h("i", { class: "dot" }),
+        h("span", { text: fmtTime(r.startedAt) })
+      ];
+      if (r.errors) { meta.push(h("span", { class: "chip err", text: String(r.errors) }, [])); }
+      if (r.warnings) { meta.push(h("span", { class: "chip warn", text: String(r.warnings) }, [])); }
+      var row = h("button", {
+        class: "req" + (r.warnings ? " has-warn" : "") + (r.errors ? " has-err" : ""),
+        role: "option", "aria-selected": r.id === state.selectedId ? "true" : "false", "data-id": r.id,
+        onclick: function () { select(r.id); }
+      }, [
+        h("div", { class: "req-top" }, [h("span", { class: "method " + r.method, text: r.method }), statusEl(r.status), h("span", { class: "req-url", title: urlLabel(r), text: urlLabel(r) })]),
+        h("div", { class: "req-meta" }, meta)
+      ]);
+      listBody.appendChild(row);
+    });
+  }
+
+  // ── detail ────────────────────────────────────────────────────────
+  function kpi(label, value, sub) {
+    return h("div", { class: "kpi" }, [h("div", { class: "kpi-label", text: label }), h("div", { class: "kpi-value", text: value }), sub ? h("div", { class: "kpi-sub", text: sub }) : null]);
+  }
+  function renderDetail() {
+    var keep = detailEl.scrollTop;
+    detailEl.textContent = "";
+    var rep = state.report;
+    if (!rep) {
+      detailEl.appendChild(h("div", { class: "empty" }, [icon("layers"), h("h3", { text: t("detail.empty.title") }), h("p", { text: t("detail.empty.body") })]));
+      detailEl.firstChild.querySelector("svg").setAttribute("class", "big");
+      return;
+    }
+    var tr = rep.trace, tot = rep.totals;
+    var share = tr.durationMs ? Math.min(100, Math.round(tot.sqlTimeMs / tr.durationMs * 100)) : null;
+    var inner = h("div", { class: "detail-inner" });
+    inner.appendChild(h("div", { class: "detail-head" }, [
+      h("button", { class: "btn sm back", onclick: function () { appEl.setAttribute("data-view", "list"); } }, [icon("back"), h("span", { text: t("detail.back") })]),
+      h("span", { class: "method " + tr.method, text: tr.method }),
+      h("h1", { text: tr.id === "background" ? t("requests.background") : tr.url }),
+      statusEl(tr.status)
+    ]));
+    inner.appendChild(h("div", { class: "kpis" }, [
+      kpi(t("kpi.total"), fmtMs(tr.durationMs)),
+      kpi(t("kpi.queries"), String(tot.queryCount)),
+      kpi(t("kpi.sqlTime"), fmtMs(tot.sqlTimeMs), share === null ? "" : t("kpi.share", { percent: share })),
+      kpi(t("kpi.transactions"), String(countNodes(rep.tree, "transaction"))),
+      kpi(t("kpi.depth"), String(tot.maxSubqueryDepth))
+    ]));
+
+    // insights
+    var slowSeqs = {};
+    rep.insights.forEach(function (i) { if (i.type === "slow") { i.seqs.forEach(function (s) { slowSeqs[s] = true; }); } });
+    var insightsCard = h("div", { class: "card" });
+    if (!rep.insights.length) { insightsCard.appendChild(h("div", { class: "empty-ok" }, [icon("ok"), h("span", { text: t("insights.none") })])); }
+    rep.insights.forEach(function (i) {
+      var ico = i.severity === "error" ? "error" : i.severity === "warn" ? "warn" : "info";
+      insightsCard.appendChild(h("button", { class: "insight " + i.severity, onclick: function () { focusSeqs(i.seqs); } }, [
+        h("span", { class: "ico" }, [icon(ico)]),
+        h("div", {}, [h("div", { class: "insight-title", text: t("insight.title." + i.type) }), h("div", { class: "insight-msg", text: t("insight.msg." + i.type, i.params) })])
+      ]));
+    });
+    inner.appendChild(h("section", { class: "section" }, [
+      h("div", { class: "section-head" }, [h("h2", { text: t("insights.title") }), h("span", { class: "count", text: String(rep.insights.length) })]),
+      insightsCard
+    ]));
+
+    // tree
+    var span = Math.max(tr.durationMs || 0, 1);
+    tr.queries.forEach(function (q) { span = Math.max(span, q.startedAt - tr.startedAt + (q.durationMs || 0)); });
+    var ctx = { t0: tr.startedAt, span: span, slow: slowSeqs, rep: rep };
+    inner.appendChild(h("section", { class: "section" }, [
+      h("div", { class: "section-head" }, [
+        h("h2", { text: t("tree.title") }), h("span", { class: "spacer" }),
+        h("button", { class: "btn sm", onclick: function () { setExpandAll(true); }, text: t("tree.expandAll") }),
+        h("button", { class: "btn sm", onclick: function () { setExpandAll(false); }, text: t("tree.collapseAll") })
+      ]),
+      tr.droppedQueries ? h("div", { class: "dim", style: "margin-bottom:8px", text: t("tree.dropped", { count: tr.droppedQueries }) }) : null,
+      h("div", { class: "axis" }, [h("span", { text: "0" }), h("span", { text: fmtMs(span) })]),
+      treeNodes(rep.tree, ctx)
+    ]));
+    detailEl.appendChild(inner);
+    detailEl.scrollTop = keep;
+  }
+
+  function treeNodes(nodes, ctx) {
+    var frag = document.createDocumentFragment();
+    nodes.forEach(function (n) { frag.appendChild(n.type === "query" ? queryNode(n.query, ctx) : txNode(n, ctx)); });
+    return frag;
+  }
+  function txNode(n, ctx) {
+    var key = "tx:" + n.connectionId + ":" + n.startedAt + ":" + (n.name || "");
+    var collapsed = !!state.collapsed[key];
+    var statements = countNodes(n.children, "query");
+    var box = h("div", { class: "tx " + n.status + (collapsed ? "" : " expanded") });
+    var statusCls = n.status === "committed" ? "ok" : n.status === "rolled-back" ? "err" : "warn";
+    box.appendChild(h("button", { class: "tx-head", "aria-expanded": collapsed ? "false" : "true", onclick: function () { state.collapsed[key] = !collapsed; renderDetail(); } }, [
+      h("span", { class: "chev" }, [icon("chev")]),
+      icon(n.type === "transaction" ? "layers" : "flag"),
+      h("span", { text: n.type === "transaction" ? t("tx.transaction") : t("tx.savepoint", { name: n.name || "" }) }),
+      h("span", { class: "chip " + statusCls, text: t("status." + n.status) }),
+      h("span", { class: "dim", text: t("sql.connection", { id: n.connectionId }) + " · " + t("tx.statements", { count: statements }) }),
+      h("span", { class: "spacer" }),
+      h("span", { class: "num", text: fmtMs(n.durationMs) })
+    ]));
+    if (!collapsed) { box.appendChild(h("div", { class: "tx-children" }, [treeNodes(n.children, ctx)])); }
+    return box;
+  }
+  function queryNode(q, ctx) {
+    var a = q.analysis;
+    var isOpen = state.expandAll ? state.open[q.seq] !== false : !!state.open[q.seq];
+    var box = h("div", { class: "q" + (isOpen ? " open" : "") + (q.error ? " err" : "") + (state.highlight.indexOf(q.seq) >= 0 ? " hl" : ""), "data-seq": q.seq });
+    var rows = q.rowCount !== null ? t("sql.rows", { count: num(q.rowCount) }) : q.affectedRows !== null ? t("sql.affected", { count: num(q.affectedRows) }) : "";
+    var wf = h("span", { class: "wf" }, [h("i", {
+      class: q.error ? "err" : ctx.slow[q.seq] ? "slow" : "",
+      style: "left:" + Math.min(99.5, Math.max(0, (q.startedAt - ctx.t0) / ctx.span * 100)) + "%;width:" + Math.max(0.6, (q.durationMs || 0) / ctx.span * 100) + "%"
+    })]);
+    var line = [
+      h("span", { class: "chev" }, [icon("chev")]),
+      h("span", { class: "kind " + a.kind, text: a.kind.toUpperCase() }),
+      h("span", { class: "tables", text: a.tables.join(", ") || "—" })
+    ];
+    if (a.subqueryCount) { line.push(h("span", { class: "chip warn", text: t("sql.subquery", { count: a.subqueryCount, depth: a.subqueryDepth }) })); }
+    if (q.error) { line.push(h("span", { class: "chip err", text: t("insight.title.error") })); }
+    line.push(h("span", { class: "spacer" }), rows ? h("span", { class: "num", text: rows }) : null, h("span", { class: "num", text: fmtMs(q.durationMs) }));
+    box.appendChild(h("button", { class: "q-head", "aria-expanded": isOpen ? "true" : "false", onclick: function () {
+      var next = !isOpen; state.open[q.seq] = next; isOpen = next;
+      box.classList.toggle("open", next); box.firstChild.setAttribute("aria-expanded", next ? "true" : "false");
+      if (next && !body.firstChild) { fillBody(); }
+    } }, [
+      h("div", { class: "q-main" }, [h("div", { class: "q-line" }, line), h("div", { class: "preview", text: q.sql.replace(/\s+/g, " ").slice(0, 220) })]),
+      wf
+    ]));
+    var body = h("div", { class: "q-body" });
+    function fillBody() {
+      body.textContent = "";
+      var raw = !!state.rawSql[q.seq];
+      var pre = h("pre", { class: "sql" });
+      pre.appendChild(highlight(raw ? q.sql : (ctx.rep.formattedSql[q.seq] || q.sql)));
+      var fmtBtn = h("button", { class: "seg-btn", "aria-pressed": raw ? "false" : "true", text: t("sql.formatted") });
+      var rawBtn = h("button", { class: "seg-btn", "aria-pressed": raw ? "true" : "false", text: t("sql.raw") });
+      function setRaw(v) { state.rawSql[q.seq] = v; fillBody(); }
+      fmtBtn.addEventListener("click", function () { setRaw(false); });
+      rawBtn.addEventListener("click", function () { setRaw(true); });
+      body.appendChild(h("div", { class: "q-tools" }, [
+        h("span", { class: "seg" }, [fmtBtn, rawBtn]),
+        h("span", { text: t("sql.connection", { id: q.connectionId }) + " · " + q.api + " · " + t("sql.startedAt", { ms: fmtMs(Math.max(0, q.startedAt - ctx.t0)) }) }),
+        h("span", { class: "spacer" }),
+        h("button", { class: "btn sm", onclick: function () { copy(q.sql); } }, [icon("copy"), h("span", { text: t("sql.copy") })])
+      ]));
+      body.appendChild(pre);
+      if (q.params && q.params.length) { body.appendChild(h("div", { class: "params", text: t("sql.params") + ": " + JSON.stringify(q.params) })); }
+      if (q.error) { body.appendChild(h("div", { class: "error-box", text: q.error })); }
+    }
+    if (isOpen) { fillBody(); }
+    box.appendChild(body);
+    return box;
+  }
+  function setExpandAll(open) {
+    state.expandAll = open; state.open = {};
+    if (!open) { state.expandAll = false; }
+    renderDetail();
+  }
+  function focusSeqs(seqs) {
+    state.highlight = seqs; renderDetail();
+    var first = detailEl.querySelector(".q.hl");
+    if (first && first.scrollIntoView) { first.scrollIntoView({ block: "center" }); }
+  }
+
+  // ── language menu: a custom listbox, because the OS draws a native <select>'s popup ──
+  function langItems() { return Array.prototype.slice.call($("lang-menu").children); }
+  function updateLangMenu() {
+    var current = LOCALES.filter(function (l) { return l.code === locale; })[0];
+    $("lang-label").textContent = current ? current.name : locale;
+    langItems().forEach(function (li) { li.setAttribute("aria-selected", li.getAttribute("data-code") === locale ? "true" : "false"); });
+  }
+  function setLangMenu(open, restoreFocus) {
+    var menu = $("lang-menu"), btn = $("lang");
+    menu.hidden = !open; btn.setAttribute("aria-expanded", open ? "true" : "false");
+    if (open) { var items = langItems(); var sel = items.filter(function (li) { return li.getAttribute("aria-selected") === "true"; })[0] || items[0]; sel.focus(); }
+    else if (restoreFocus) { btn.focus(); }
+  }
+  function chooseLocale(code) {
+    locale = code; storage.set(KEY_LANG, locale); applyI18n(); renderList(); renderDetail(); setLangMenu(false, true);
+  }
+  function setupLangMenu() {
+    var menu = $("lang-menu"), btn = $("lang");
+    LOCALES.forEach(function (l) {
+      var li = h("li", { class: "dd-item", role: "option", tabindex: "-1", "data-code": l.code }, [icon("check"), h("span", { text: l.name }), h("span", { class: "code", text: l.code })]);
+      li.firstChild.setAttribute("class", "check");
+      li.addEventListener("click", function () { chooseLocale(l.code); });
+      menu.appendChild(li);
+    });
+    btn.addEventListener("click", function () { setLangMenu(menu.hidden, false); });
+    btn.addEventListener("keydown", function (e) { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); setLangMenu(true, false); } });
+    menu.addEventListener("keydown", function (e) {
+      var items = langItems(), i = items.indexOf(document.activeElement);
+      if (e.key === "ArrowDown") { e.preventDefault(); items[Math.min(items.length - 1, i + 1)].focus(); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); items[Math.max(0, i - 1)].focus(); }
+      else if (e.key === "Home") { e.preventDefault(); items[0].focus(); }
+      else if (e.key === "End") { e.preventDefault(); items[items.length - 1].focus(); }
+      else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (i >= 0) { chooseLocale(items[i].getAttribute("data-code")); } }
+      else if (e.key === "Escape") { e.preventDefault(); setLangMenu(false, true); }
+      else if (e.key === "Tab") { setLangMenu(false, false); }
+    });
+    document.addEventListener("click", function (e) { if (!menu.hidden && !$("lang-dd").contains(e.target)) { setLangMenu(false, false); } });
+  }
+
+  // ── actions ───────────────────────────────────────────────────────
+  var toastTimer = null;
+  function toast(text) {
+    var el = $("toast"); el.textContent = text; el.classList.add("show");
+    clearTimeout(toastTimer); toastTimer = setTimeout(function () { el.classList.remove("show"); }, 1600);
+  }
+  function copy(text) {
+    function fallback() {
+      var ta = h("textarea", { style: "position:fixed;opacity:0" }); ta.value = text; document.body.appendChild(ta); ta.select();
+      var ok = false; try { ok = document.execCommand("copy"); } catch (e) { ok = false; }
+      document.body.removeChild(ta); toast(t(ok ? "toast.copied" : "toast.copyFailed"));
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(function () { toast(t("toast.copied")); }, fallback);
+    } else { fallback(); }
+  }
+  function api(path, init) { return fetch("./api/" + path, init).then(function (r) { return r.json(); }); }
+  function loadDetail(id) {
+    var token = ++state.loadToken;
+    return api("requests/" + id).then(function (d) {
+      if (token !== state.loadToken || id !== state.selectedId) { return; }
+      state.report = d && d.trace ? d : null; renderDetail();
+    }).catch(function () { /* server restarting; the next change event retries */ });
+  }
+  function select(id) {
+    state.selectedId = id; state.highlight = []; state.open = {}; state.expandAll = false;
+    appEl.setAttribute("data-view", "detail");
+    renderList(); return loadDetail(id);
+  }
+  function refresh() {
+    return api("requests").then(function (list) {
+      state.requests = list; renderList();
+      if (state.follow && list.length && list[0].id !== state.selectedId) { return select(list[0].id); }
+      if (state.selectedId && list.some(function (r) { return r.id === state.selectedId; })) { return loadDetail(state.selectedId); }
+      if (state.selectedId) { state.selectedId = null; state.report = null; renderDetail(); }
+    }).catch(function () { /* server restarting */ });
+  }
+  function renderLive() {
+    var el = $("live"); el.classList.toggle("on", state.live);
+    $("live-text").textContent = t(state.live ? "live.on" : "live.off");
+  }
+  function connect() {
+    if (typeof EventSource === "undefined") { return; }
+    var es = new EventSource("./api/stream");
+    es.onopen = function () { state.live = true; renderLive(); refresh(); };
+    es.onmessage = function () { refresh(); };
+    es.onerror = function () { state.live = false; renderLive(); };
+  }
+  function move(delta) {
+    var rows = visibleRequests(); if (!rows.length) { return; }
+    var i = rows.findIndex(function (r) { return r.id === state.selectedId; });
+    var next = rows[Math.min(rows.length - 1, Math.max(0, i < 0 ? 0 : i + delta))];
+    select(next.id);
+    var el = listBody.querySelector("[data-id='" + next.id + "']"); if (el && el.scrollIntoView) { el.scrollIntoView({ block: "nearest" }); }
+  }
+  function setFollow(v) {
+    state.follow = v; storage.set(KEY_FOLLOW, v ? "1" : "0");
+    $("follow").setAttribute("aria-checked", v ? "true" : "false");
+    if (v) { refresh(); }
+  }
+  function setMode(mode) {
+    state.mode = mode;
+    Array.prototype.forEach.call(document.querySelectorAll("[data-mode]"), function (b) { b.setAttribute("aria-pressed", b.getAttribute("data-mode") === mode ? "true" : "false"); });
+    renderList();
+  }
+  function fitLayout() { appEl.classList.toggle("narrow", window.innerWidth < 760); document.documentElement.style.setProperty("--wf", window.innerWidth < 1100 ? "140px" : "220px"); }
+
+  // ── wiring ────────────────────────────────────────────────────────
+  Array.prototype.forEach.call(document.querySelectorAll("[data-icon]"), function (el) { el.replaceWith(icon(el.getAttribute("data-icon"))); });
+  setupLangMenu();
+  $("theme").addEventListener("click", function () {
+    state.theme = state.theme === "auto" ? "light" : state.theme === "light" ? "dark" : "auto";
+    storage.set(KEY_THEME, state.theme); applyTheme();
+  });
+  $("clear").addEventListener("click", function () {
+    api("clear", { method: "POST" }).then(function () { state.selectedId = null; state.report = null; renderDetail(); refresh(); });
+  });
+  $("follow").addEventListener("click", function () { setFollow(!state.follow); });
+  var search = $("search");
+  search.addEventListener("input", function () { state.term = search.value; renderList(); });
+  Array.prototype.forEach.call(document.querySelectorAll("[data-mode]"), function (b) { b.addEventListener("click", function () { setMode(b.getAttribute("data-mode")); }); });
+  document.addEventListener("keydown", function (e) {
+    var tag = (e.target && e.target.tagName) || "";
+    if (e.target && e.target.closest && e.target.closest(".dd")) { return; }
+    if (e.key === "Escape" && e.target === search) { search.value = ""; state.term = ""; renderList(); search.blur(); return; }
+    if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA" || e.metaKey || e.ctrlKey || e.altKey) { return; }
+    if (e.key === "/") { e.preventDefault(); search.focus(); }
+    else if (e.key === "ArrowDown" || e.key === "j") { e.preventDefault(); move(1); }
+    else if (e.key === "ArrowUp" || e.key === "k") { e.preventDefault(); move(-1); }
+    else if (e.key === "e") { setExpandAll(!state.expandAll); }
+  });
+  window.addEventListener("resize", fitLayout);
+
+  fitLayout(); applyI18n(); setFollow(state.follow); setMode("all"); renderList(); renderDetail(); refresh(); connect();
+})();
+`;

package/dist/ui/page.d.ts

@@ -0,0 +1,6 @@
+import { type Locale } from "../i18n/index.js";
+/**
+ * The whole inspector page as one document: no build step, no external requests (no CDN, no web
+ * fonts). `localeHint` is the language the server was explicitly configured with, if any.
+ */
+export declare function renderPage(localeHint?: Locale | null): string;

package/dist/ui/page.js

@@ -0,0 +1,73 @@
+import { LOCALES, MESSAGES } from "../i18n/index.js";
+import { CLIENT_SCRIPT } from "./client.js";
+import { STYLES } from "./styles.js";
+/** Keeps a JSON blob inert inside an inline <script>: no `</script>`, no `<!--`. */
+// Built from a string: a literal U+2028 / U+2029 inside a regex literal is itself a line terminator in older engines.
+// eslint-disable-next-line prefer-regex-literals
+const LINE_SEPARATORS = new RegExp("[\\u2028\\u2029]", "g");
+const LESS_THAN = /</g;
+const toInlineJson = (value) => JSON.stringify(value).replace(LESS_THAN, "\\u003c").replace(LINE_SEPARATORS, " ");
+/**
+ * The whole inspector page as one document: no build step, no external requests (no CDN, no web
+ * fonts). `localeHint` is the language the server was explicitly configured with, if any.
+ */
+export function renderPage(localeHint = null) {
+    const config = toInlineJson({ messages: MESSAGES, locales: LOCALES, hint: localeHint });
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<meta name="referrer" content="no-referrer">
+<title>SQL Inspector</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<div class="app" id="app" data-view="list">
+  <header class="topbar">
+    <div class="brand"><span class="brand-mark"><span data-icon="db"></span></span><span class="name" data-i18n="app.title"></span></div>
+    <span class="live" id="live"><i></i><span id="live-text"></span></span>
+    <span class="spacer"></span>
+    <label class="field">
+      <span data-icon="search"></span>
+      <input id="search" class="input" type="text" autocomplete="off" spellcheck="false" data-i18n-placeholder="search.placeholder" data-i18n-aria="search.aria">
+      <span class="kbd" aria-hidden="true">/</span>
+    </label>
+    <span class="seg" role="group">
+      <button type="button" data-mode="all" aria-pressed="true" data-i18n="filter.all"></button>
+      <button type="button" data-mode="issues" aria-pressed="false" data-i18n="filter.issues"></button>
+      <button type="button" data-mode="errors" aria-pressed="false" data-i18n="filter.errors"></button>
+    </span>
+    <span class="dd" id="lang-dd">
+      <button type="button" class="dd-btn" id="lang" aria-haspopup="listbox" aria-expanded="false" data-i18n-aria="lang.label" data-i18n-title="lang.label"><span data-icon="globe"></span><span id="lang-label"></span><span data-icon="down"></span></button>
+      <ul class="dd-menu" id="lang-menu" role="listbox" tabindex="-1" hidden></ul>
+    </span>
+    <button type="button" class="btn icon ghost" id="theme"></button>
+    <button type="button" class="btn" id="clear" data-i18n-title="action.clear.title"><span data-icon="trash"></span><span class="label" data-i18n="action.clear"></span></button>
+  </header>
+  <div class="layout">
+    <aside class="list">
+      <div class="list-head">
+        <h2 data-i18n="requests.title"></h2><span class="count" id="count">0</span><span class="spacer"></span>
+        <button type="button" class="switch" id="follow" role="switch" aria-checked="false"><span class="track"></span><span data-i18n="follow.label"></span></button>
+      </div>
+      <div class="list-body" id="list-body" role="listbox"></div>
+    </aside>
+    <main class="detail" id="detail"></main>
+  </div>
+  <footer class="footer">
+    <span class="kbd">/</span><span data-i18n="shortcuts.search"></span>
+    <span class="kbd">↑</span><span class="kbd">↓</span><span data-i18n="shortcuts.navigate"></span>
+    <span class="kbd">e</span><span data-i18n="shortcuts.expand"></span>
+  </footer>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+</div>
+<script>
+var __SQLI__ = ${config};
+${CLIENT_SCRIPT}
+</script>
+</body>
+</html>
+`;
+}

package/dist/ui/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Styles of the inspector page. The page runs on its own document (served by the inspector,
+ * shown standalone or inside the floating panel's iframe), so nothing here can reach the host
+ * application. Everything is still scoped to our own elements and every native control is
+ * restyled, so no browser-default widget shows through.
+ */
+export declare const STYLES = "\n:root {\n  --font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Hiragino Sans\", \"Yu Gothic UI\", \"Apple SD Gothic Neo\", sans-serif;\n  --mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --radius: 8px; --radius-sm: 6px;\n  --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f1f4f8; --surface-3: #e6ebf1;\n  --border: #e2e7ee; --border-strong: #cdd5df;\n  --text: #121821; --text-2: #4a5666; --text-3: #6e7a8a;\n  --accent: #1f6feb; --accent-weak: #e7f0ff; --accent-text: #ffffff;\n  --ok: #1a7f37; --ok-weak: #e6f5ea;\n  --warn: #9a6700; --warn-weak: #fff4d6;\n  --err: #cf222e; --err-weak: #ffebe9;\n  --shadow: 0 8px 24px rgba(20, 30, 50, .14);\n  --syn-kw: #8250df; --syn-str: #0a7a3d; --syn-num: #b35900; --syn-id: #0550ae; --syn-fn: #8a5a00; --syn-com: #6e7a8a;\n  color-scheme: light;\n}\n@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) { \n  --bg: #0d1117; --surface: #151b23; --surface-2: #1b232d; --surface-3: #242e3a;\n  --border: #283241; --border-strong: #3a4757;\n  --text: #e6edf3; --text-2: #aab5c3; --text-3: #7d8896;\n  --accent: #5aa2ff; --accent-weak: rgba(90, 162, 255, .14); --accent-text: #0d1117;\n  --ok: #4ac26b; --ok-weak: rgba(74, 194, 107, .14);\n  --warn: #e3a008; --warn-weak: rgba(227, 160, 8, .14);\n  --err: #ff6b6b; --err-weak: rgba(255, 107, 107, .15);\n  --shadow: 0 8px 24px rgba(0, 0, 0, .45);\n  --syn-kw: #c792ea; --syn-str: #8bd49c; --syn-num: #f2a65e; --syn-id: #7cb7ff; --syn-fn: #e6c07b; --syn-com: #7d8896;\n color-scheme: dark; } }\n:root[data-theme=\"dark\"] { \n  --bg: #0d1117; --surface: #151b23; --surface-2: #1b232d; --surface-3: #242e3a;\n  --border: #283241; --border-strong: #3a4757;\n  --text: #e6edf3; --text-2: #aab5c3; --text-3: #7d8896;\n  --accent: #5aa2ff; --accent-weak: rgba(90, 162, 255, .14); --accent-text: #0d1117;\n  --ok: #4ac26b; --ok-weak: rgba(74, 194, 107, .14);\n  --warn: #e3a008; --warn-weak: rgba(227, 160, 8, .14);\n  --err: #ff6b6b; --err-weak: rgba(255, 107, 107, .15);\n  --shadow: 0 8px 24px rgba(0, 0, 0, .45);\n  --syn-kw: #c792ea; --syn-str: #8bd49c; --syn-num: #f2a65e; --syn-id: #7cb7ff; --syn-fn: #e6c07b; --syn-com: #7d8896;\n color-scheme: dark; }\n\n*, *::before, *::after { box-sizing: border-box; }\nhtml, body { height: 100%; }\nbody { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; }\n[hidden] { display: none !important; }\nbutton, input, select { font: inherit; color: inherit; }\nbutton { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; }\nsvg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n:focus { outline: none; }\n:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }\n.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }\n::-webkit-scrollbar { width: 10px; height: 10px; }\n::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }\n::-webkit-scrollbar-track { background: transparent; }\n\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.app { display: flex; flex-direction: column; height: 100%; }\n.topbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }\n.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }\n.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #1f6feb, #7a5af8); color: #fff; }\n.brand-mark svg { width: 16px; height: 16px; stroke: #fff; }\n.live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }\n.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--err); }\n.live.on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-weak); }\n.spacer { flex: 1; }\n.field { position: relative; display: flex; align-items: center; }\n.field > svg { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }\n.input { height: 32px; width: 260px; padding: 0 34px 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); transition: border-color .15s, background .15s, box-shadow .15s; }\n.input::placeholder { color: var(--text-3); }\n.input:hover { border-color: var(--border-strong); }\n.input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-weak); outline: none; }\n.kbd { font: 600 11px/1 var(--mono); min-width: 18px; padding: 3px 5px; text-align: center; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-2); }\n.field .kbd { position: absolute; right: 8px; }\n.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 550; white-space: nowrap; transition: background .15s, border-color .15s; }\n.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }\n.btn:active { background: var(--surface-3); }\n.btn.icon { width: 32px; padding: 0; justify-content: center; }\n.btn.ghost { border-color: transparent; background: transparent; }\n.btn.ghost:hover { background: var(--surface-2); }\n.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }\n.dd { position: relative; display: inline-flex; }\n.dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 550; white-space: nowrap; transition: background .15s, border-color .15s; }\n.dd-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }\n.dd-btn[aria-expanded=\"true\"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }\n.dd-btn svg { color: var(--text-3); } .dd-btn svg:last-child { width: 12px; height: 12px; }\n.dd-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); min-width: 188px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }\n.dd-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 6px; color: var(--text); cursor: pointer; user-select: none; }\n.dd-item:hover, .dd-item:focus-visible { background: var(--surface-2); outline: none; }\n.dd-item .check { width: 14px; height: 14px; color: var(--accent); visibility: hidden; }\n.dd-item[aria-selected=\"true\"] { font-weight: 650; }\n.dd-item[aria-selected=\"true\"] .check { visibility: visible; }\n.dd-item .code { margin-left: auto; color: var(--text-3); font: 600 11px var(--mono); text-transform: uppercase; }\n.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }\n.seg button { height: 26px; padding: 0 10px; border-radius: 4px; color: var(--text-2); font-weight: 550; font-size: 12px; }\n.seg button:hover { color: var(--text); }\n.seg button[aria-pressed=\"true\"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }\n.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 550; font-size: 12px; cursor: pointer; }\n.switch .track { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--border-strong); transition: background .15s; }\n.switch .track::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }\n.switch[aria-checked=\"true\"] .track { background: var(--accent); }\n.switch[aria-checked=\"true\"] .track::after { transform: translateX(12px); }\n\n.layout { flex: 1; display: grid; grid-template-columns: minmax(280px, 360px) 1fr; min-height: 0; }\n.list { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }\n.list-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }\n.list-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; }\n.count { padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 650; line-height: 18px; }\n.list-body { flex: 1; overflow: auto; }\n.req { position: relative; display: block; width: 100%; text-align: left; padding: 10px 12px 10px 15px; border-bottom: 1px solid var(--border); }\n.req::before { content: \"\"; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }\n.req.has-warn::before { background: var(--warn); } .req.has-err::before { background: var(--err); }\n.req:hover { background: var(--surface-2); }\n.req[aria-selected=\"true\"] { background: var(--accent-weak); }\n.req-top { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.req-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }\n.req-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; color: var(--text-3); font-size: 11.5px; }\n.req-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }\n\n.method { font: 700 10.5px/1 var(--mono); letter-spacing: .02em; padding: 3px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); }\n.method.GET { background: var(--ok-weak); color: var(--ok); } .method.POST { background: var(--accent-weak); color: var(--accent); }\n.method.PUT, .method.PATCH { background: var(--warn-weak); color: var(--warn); } .method.DELETE { background: var(--err-weak); color: var(--err); }\n.status { font: 650 11.5px/1 var(--mono); color: var(--text-2); }\n.status.s2 { color: var(--ok); } .status.s3 { color: var(--accent); } .status.s4 { color: var(--warn); } .status.s5 { color: var(--err); }\n.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }\n.chip.ok { background: var(--ok-weak); color: var(--ok); } .chip.warn { background: var(--warn-weak); color: var(--warn); } .chip.err { background: var(--err-weak); color: var(--err); } .chip.accent { background: var(--accent-weak); color: var(--accent); }\n.chip svg { width: 12px; height: 12px; }\n\n.detail { overflow: auto; min-width: 0; }\n.detail-inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; }\n.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }\n.detail-head h1 { margin: 0; font: 600 15px/1.4 var(--mono); word-break: break-all; flex: 1; min-width: 200px; }\n.back { display: none; }\n.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }\n.kpi { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }\n.kpi-label { color: var(--text-3); font-size: 11.5px; font-weight: 600; }\n.kpi-value { margin-top: 2px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }\n.kpi-sub { color: var(--text-3); font-size: 11.5px; }\n.section { margin-bottom: 22px; }\n.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }\n.section-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; }\n.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }\n.insight { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }\n.insight:last-child { border-bottom: 0; }\n.insight:hover { background: var(--surface-2); }\n.insight .ico { margin-top: 1px; }\n.insight.warn .ico { color: var(--warn); } .insight.error .ico { color: var(--err); } .insight.info .ico { color: var(--text-3); }\n.insight-title { font-weight: 650; }\n.insight-msg { color: var(--text-2); font-size: 12.5px; word-break: break-word; }\n.insight-msg code { font: 12px var(--mono); }\n.empty-ok { padding: 14px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }\n.empty-ok svg { color: var(--ok); }\n.empty { display: grid; place-items: center; align-content: center; gap: 6px; height: 100%; min-height: 240px; padding: 32px; text-align: center; color: var(--text-2); }\n.empty svg.big { width: 44px; height: 44px; stroke-width: 1.3; color: var(--text-3); }\n.empty h3 { margin: 6px 0 0; font-size: 14px; color: var(--text); }\n.empty p { margin: 0; max-width: 340px; color: var(--text-3); }\n\n/* \u2500\u2500 Query tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.tree-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }\n.axis { display: flex; justify-content: space-between; margin: 0 12px 4px auto; width: var(--wf, 220px); color: var(--text-3); font: 11px var(--mono); }\n.tx { margin: 6px 0; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent-weak) 35%, var(--surface)); }\n.tx.rolled-back { border-left-color: var(--err); } .tx.committed { border-left-color: var(--ok); } .tx.open { border-left-color: var(--warn); }\n.tx > .tx-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; text-align: left; font-weight: 650; }\n.tx-head .dim { font-weight: 500; }\n.tx-children { padding: 0 8px 8px; }\n.q { margin: 4px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }\n.q.hl { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }\n.q.err { border-color: var(--err); }\n.q-head { display: grid; grid-template-columns: 1fr var(--wf, 220px); align-items: center; gap: 12px; width: 100%; padding: 7px 12px; text-align: left; }\n.q-main { min-width: 0; }\n.q-line { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.chev { transition: transform .15s; color: var(--text-3); }\n.q.open .chev, .tx.expanded > .tx-head .chev { transform: rotate(90deg); }\n.kind { font: 700 10.5px/1 var(--mono); padding: 3px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); min-width: 54px; text-align: center; }\n.kind.select { background: var(--accent-weak); color: var(--accent); } .kind.insert { background: var(--ok-weak); color: var(--ok); }\n.kind.update { background: var(--warn-weak); color: var(--warn); } .kind.delete { background: var(--err-weak); color: var(--err); }\n.tables { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.dim { color: var(--text-3); }\n.num { font: 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }\n.preview { margin-top: 3px; font: 11.5px/1.4 var(--mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.wf { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); }\n.wf i { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 4px; background: var(--accent); }\n.wf i.slow { background: var(--warn); } .wf i.err { background: var(--err); }\n.q-body { display: none; padding: 10px 12px 12px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }\n.q.open .q-body { display: block; }\n.q-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; color: var(--text-3); font-size: 12px; }\n.q-tools .spacer { flex: 1; }\n.sql { margin: 0; padding: 12px 14px; max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: 12px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; tab-size: 2; }\n.sql .kw { color: var(--syn-kw); font-weight: 600; } .sql .str { color: var(--syn-str); } .sql .num { color: var(--syn-num); font: inherit; }\n.sql .id { color: var(--syn-id); } .sql .fn { color: var(--syn-fn); } .sql .com { color: var(--syn-com); font-style: italic; }\n.params { margin-top: 8px; font: 12px var(--mono); color: var(--text-2); word-break: break-all; }\n.error-box { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--err-weak); color: var(--err); font: 12px var(--mono); }\n\n.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 12px); padding: 8px 14px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 12.5px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }\n.toast.show { opacity: 1; transform: translate(-50%, 0); }\n.footer { display: flex; align-items: center; gap: 14px; height: 28px; padding: 0 16px; border-top: 1px solid var(--border); background: var(--surface); color: var(--text-3); font-size: 11.5px; flex: none; overflow: hidden; white-space: nowrap; }\n.footer span { display: inline-flex; align-items: center; gap: 5px; }\n\n/* Narrow (the docked panel can be ~400px wide): one pane at a time */\n.narrow .topbar { gap: 8px; padding: 0 10px; }\n.narrow .brand span.name, .narrow .footer, .narrow .live span, .narrow .btn .label { display: none; }\n.narrow .input { width: 150px; }\n.narrow .layout { display: block; }\n.narrow .list, .narrow .detail { height: 100%; border: 0; }\n.narrow[data-view=\"detail\"] .list { display: none; } .narrow[data-view=\"list\"] .detail { display: none; }\n.narrow .back { display: inline-flex; }\n.narrow .detail-inner { padding: 14px 12px 28px; }\n.narrow .kpis { grid-template-columns: repeat(2, 1fr); }\n.narrow .q-head { grid-template-columns: 1fr; } .narrow .wf, .narrow .axis { display: none; }\n\n@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }\n";