@crvouga/mockingbird-service-otel 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog — @crvouga/mockingbird-service-otel
 
-## 1.6.0 (2026-09-30)
+## 1.7.0 (2026-10-01)
+
+### Features
+
+- record SQL timelines and serve the admin explorer ([8ced17a](https://github.com/crvouga/mockingbird/commit/8ced17ac398e386ef4e9d7e01fc7744c34b95d07))
+
+### Dependencies
+
+- `@crvouga/mockingbird-service-sqlite`
+
+## 1.6.1 (2026-09-30)
+
+### Fixes and improvements
+
+- keep admin buttons pressed until the action finishes ([0aabfcb](https://github.com/crvouga/mockingbird/commit/0aabfcb5f392aa51e193f9c3f817d5877d92bc6a))
+- size admin select fields like the text inputs beside them ([0fb3ef2](https://github.com/crvouga/mockingbird/commit/0fb3ef2ddbf43376c93a2ae6d87c6c9bf890dafc))
+- keep admin section tabs wired when boot is renamed ([4eda25e](https://github.com/crvouga/mockingbird/commit/4eda25eacd59da048d196f7cc8369d7a02b47bfc))
+
+## 1.6.0 (2026-09-29)
 
 ### Features
 

package/dist/{chunk-RBLBWTGH.js → chunk-FOS7KNLE.js}

@@ -1647,6 +1647,167 @@ function faultPresetList(value) {
     })
   };
 }
+function mountSqlExplorer(root, api) {
+  const cell = (value) => {
+    if (value === null || value === void 0)
+      return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    return JSON.stringify(value) ?? "";
+  };
+  root.replaceChildren();
+  const layout = document.createElement("div");
+  layout.className = "sql-layout";
+  const tables = document.createElement("div");
+  tables.className = "sql-tables";
+  const stack = document.createElement("div");
+  stack.className = "stack";
+  const banner = document.createElement("p");
+  banner.className = "banner";
+  const grid = document.createElement("div");
+  const input = document.createElement("textarea");
+  input.className = "sql-input";
+  input.spellcheck = false;
+  input.placeholder = "SELECT * FROM ...";
+  const actions = document.createElement("div");
+  actions.className = "row-actions";
+  const run = document.createElement("button");
+  run.type = "button";
+  run.textContent = "Run";
+  actions.append(run);
+  const result = document.createElement("pre");
+  stack.append(banner, grid, input, actions, result);
+  layout.append(tables, stack);
+  root.append(layout);
+  const showError = (error) => {
+    banner.textContent = error instanceof Error ? error.message : String(error);
+    banner.classList.add("show");
+  };
+  const clearError = () => {
+    banner.textContent = "";
+    banner.classList.remove("show");
+  };
+  const renderGrid = (columns, rows) => {
+    grid.replaceChildren();
+    if (columns.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "empty";
+      empty.textContent = "No rows.";
+      grid.append(empty);
+      return;
+    }
+    const table = document.createElement("table");
+    const head = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    for (const column of columns) {
+      const th = document.createElement("th");
+      th.textContent = column;
+      headRow.append(th);
+    }
+    head.append(headRow);
+    const body = document.createElement("tbody");
+    for (const row of rows) {
+      const tr = document.createElement("tr");
+      for (const column of columns) {
+        const td = document.createElement("td");
+        td.dataset.label = column;
+        td.textContent = cell(row[column]);
+        tr.append(td);
+      }
+      body.append(tr);
+    }
+    table.append(head, body);
+    grid.append(table);
+  };
+  const rowsOf = (value) => {
+    if (!isRecord2(value) || !Array.isArray(value.rows))
+      return [];
+    return value.rows.flatMap((row) => isRecord2(row) ? [row] : []);
+  };
+  const columnsOf = (value, rows) => {
+    if (isRecord2(value) && Array.isArray(value.columns)) {
+      const named = value.columns.flatMap((column) => typeof column === "string" ? [column] : []);
+      if (named.length > 0)
+        return named;
+    }
+    const first = rows[0];
+    return first === void 0 ? [] : Object.keys(first);
+  };
+  let selected = "";
+  const loadPage = async (schema, name) => {
+    selected = `${schema}.${name}`;
+    const page = await api.get(`/sql/tables/${encodeURIComponent(schema)}/${encodeURIComponent(name)}?limit=50`);
+    const rows = rowsOf(page);
+    renderGrid(columnsOf(page, rows), rows);
+    const total = isRecord2(page) && typeof page.total === "number" ? page.total : rows.length;
+    result.textContent = `${selected} \xB7 ${total} rows`;
+    for (const button of tables.querySelectorAll("button")) {
+      if (!(button instanceof HTMLButtonElement))
+        continue;
+      button.setAttribute("aria-current", button.dataset.schema === schema && button.dataset.table === name ? "true" : "false");
+    }
+  };
+  const loadTables = async () => {
+    const payload = await api.get("/sql/tables");
+    const listed = isRecord2(payload) && Array.isArray(payload.tables) ? payload.tables : [];
+    tables.replaceChildren();
+    if (listed.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "empty";
+      empty.textContent = "No tables.";
+      tables.append(empty);
+      return;
+    }
+    for (const item of listed) {
+      if (!isRecord2(item) || typeof item.schema !== "string" || typeof item.name !== "string")
+        continue;
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.schema = item.schema;
+      button.dataset.table = item.name;
+      button.textContent = `${item.schema}.${item.name}`;
+      tables.append(button);
+    }
+  };
+  tables.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element))
+      return;
+    const button = target.closest("button");
+    if (!(button instanceof HTMLButtonElement))
+      return;
+    const schema = button.dataset.schema;
+    const name = button.dataset.table;
+    if (schema === void 0 || name === void 0)
+      return;
+    clearError();
+    loadPage(schema, name).catch(showError);
+  });
+  run.addEventListener("click", () => {
+    const sql = input.value.trim();
+    if (sql === "") {
+      showError(new Error("Enter a statement"));
+      return;
+    }
+    clearError();
+    api.send("POST", "/sql/query", { sql }).then((payload) => {
+      const rows = rowsOf(payload);
+      renderGrid(columnsOf(payload, rows), rows);
+      const count = isRecord2(payload) && typeof payload.rowCount === "number" ? payload.rowCount : rows.length;
+      const truncated = isRecord2(payload) && payload.truncated === true ? " (truncated)" : "";
+      result.textContent = `${count} rows${truncated}`;
+    }).catch(showError);
+  });
+  const namespace = document.getElementById("namespace");
+  if (namespace) {
+    namespace.addEventListener("change", () => {
+      clearError();
+      loadTables().catch(showError);
+    });
+  }
+  loadTables().catch(showError);
+}
 function bootAdmin(config) {
   const fieldKinds = ["string", "number", "boolean", "null", "object", "array", "unknown"];
   const sources = ["declared", "inferred", "mixed"];
@@ -2087,6 +2248,50 @@ function bootAdmin(config) {
     if (render)
       await render();
   }
+  const delay = (ms) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+  const confirmAction = async (button, pending, done, work) => {
+    if (button.dataset.pending === "1")
+      return;
+    const label = button.textContent ?? "";
+    const width = button.offsetWidth;
+    button.dataset.pending = "1";
+    button.classList.add("pressed");
+    button.setAttribute("aria-busy", "true");
+    button.style.minWidth = `${width}px`;
+    button.textContent = pending;
+    try {
+      await work();
+      button.textContent = done;
+      await delay(1e3);
+    } catch (error) {
+      showError(error);
+    } finally {
+      button.textContent = label;
+      button.style.minWidth = "";
+      button.classList.remove("pressed");
+      button.removeAttribute("aria-busy");
+      delete button.dataset.pending;
+    }
+  };
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element))
+      return;
+    const button = target.closest("button");
+    if (!(button instanceof HTMLButtonElement) || button.dataset.pending === "1")
+      return;
+    button.classList.add("pressed");
+    const token = String(Date.now());
+    button.dataset.press = token;
+    window.setTimeout(() => {
+      if (button.dataset.press !== token || button.dataset.pending === "1")
+        return;
+      button.classList.remove("pressed");
+      delete button.dataset.press;
+    }, 450);
+  });
   el("namespace", HTMLSelectElement).addEventListener("change", () => {
     state.namespace = el("namespace", HTMLSelectElement).value;
     refresh().catch(showError);
@@ -2097,7 +2302,7 @@ function bootAdmin(config) {
     refresh().catch(showError);
   });
   el("refresh", HTMLButtonElement).addEventListener("click", () => {
-    refresh().catch(showError);
+    confirmAction(el("refresh", HTMLButtonElement), "Refreshing...", "Updated", () => refresh()).catch(showError);
   });
   el("collections", HTMLElement).addEventListener("click", (event) => {
     const target = event.target;
@@ -2220,10 +2425,10 @@ function bootAdmin(config) {
     }).then(() => renderFaults()).catch(showError);
   });
   el("fault-clear", HTMLButtonElement).addEventListener("click", () => {
-    api("DELETE", "/faults").then(() => renderFaults()).catch(showError);
+    confirmAction(el("fault-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/faults").then(() => renderFaults())).catch(showError);
   });
   el("journal-clear", HTMLButtonElement).addEventListener("click", () => {
-    api("DELETE", "/requests").then(() => renderJournal()).catch(showError);
+    confirmAction(el("journal-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/requests").then(() => renderJournal())).catch(showError);
   });
   el("route-list", HTMLElement).addEventListener("click", (event) => {
     const target = event.target;
@@ -2279,6 +2484,22 @@ function bootAdmin(config) {
       panel.script = value.script;
     return panel;
   };
+  const decodeExtension = (value) => {
+    if (!isRecord2(value))
+      return void 0;
+    if (value.kind === "sql") {
+      return {
+        kind: "sql",
+        id: typeof value.id === "string" && value.id !== "" ? value.id : "sql",
+        title: typeof value.title === "string" && value.title !== "" ? value.title : "SQL",
+        description: typeof value.description === "string" ? value.description : "Browse tables and run queries."
+      };
+    }
+    if (value.kind !== "panel")
+      return void 0;
+    const panel = decodePanel(value);
+    return panel === void 0 ? void 0 : { kind: "panel", ...panel };
+  };
   const mountPanels = (panels) => {
     const nav = el("nav", HTMLElement);
     const views = el("views", HTMLElement);
@@ -2332,15 +2553,57 @@ function bootAdmin(config) {
       return decoded === void 0 ? [] : [decoded];
     });
     mountPanels(panels);
+    const extensions = requireList(isRecord2(manifest) ? manifest.extensions : void 0, "Extensions").flatMap((extension) => {
+      const decoded = decodeExtension(extension);
+      return decoded === void 0 ? [] : [decoded];
+    });
+    const extensionPanels = extensions.flatMap((extension) => extension.kind === "panel" ? [extension] : []);
+    mountPanels(extensionPanels);
+    for (const extension of extensions) {
+      if (extension.kind !== "sql")
+        continue;
+      const nav = el("nav", HTMLElement);
+      const views = el("views", HTMLElement);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.view = extension.id;
+      button.textContent = extension.title;
+      nav.append(button);
+      const section = document.createElement("section");
+      section.className = "view";
+      section.id = `view-${extension.id}`;
+      section.hidden = true;
+      const title = document.createElement("h2");
+      title.textContent = extension.title;
+      const lede = document.createElement("p");
+      lede.className = "lede";
+      lede.textContent = extension.description;
+      const body = document.createElement("div");
+      body.className = "panel-body";
+      section.append(title, lede, body);
+      views.append(section);
+      mountSqlExplorer(body, panelApi);
+    }
     return refresh();
   }).catch(showError);
 }
-var clientPrelude = [isRecord2, mountAdminBrand, startAdminBrand, faultPresetList, bootAdmin].map((fn) => fn.toString()).join("\n");
+var clientPrelude = [
+  isRecord2,
+  mountAdminBrand,
+  startAdminBrand,
+  faultPresetList,
+  mountSqlExplorer,
+  bootAdmin
+].map((fn) => fn.toString()).join("\n");
 var adminClientSource = (config) => {
   const payload = JSON.stringify(config).replace(/</g, "\\u003c");
+  const entry = bootAdmin.name;
+  if (!/^[A-Za-z_$][\w$]*$/.test(entry)) {
+    throw new Error("admin client cannot call its boot function");
+  }
   return `<script>
 ${clientPrelude}
-bootAdmin(${payload});
+${entry}(${payload});
 </script>`;
 };
 
@@ -2381,19 +2644,33 @@ var STANDARD_ADMIN_ROUTES = [
   "GET /ui/manifest"
 ];
 var PANEL_ID = /^[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?$/;
+var RESERVED_VIEWS = /* @__PURE__ */ new Set(["overview", "state", "clock", "faults", "journal", "routes"]);
+var checkPanel = (panel, seen, label) => {
+  if (!PANEL_ID.test(panel.id)) {
+    throw new RangeError(`${label} id must match ${PANEL_ID}: ${JSON.stringify(panel.id)}`);
+  }
+  if (RESERVED_VIEWS.has(panel.id)) {
+    throw new RangeError(`${label} id ${panel.id} is reserved by the admin shell`);
+  }
+  if (seen.has(panel.id))
+    throw new RangeError(`duplicate admin view id ${panel.id}`);
+  seen.add(panel.id);
+  if (panel.title.trim() === "")
+    throw new RangeError(`${label} ${panel.id} needs a title`);
+};
 var assertAdminUi = (ui) => {
-  if (!ui?.panels)
+  if (!ui)
     return;
   const seen = /* @__PURE__ */ new Set();
-  for (const panel of ui.panels) {
-    if (!PANEL_ID.test(panel.id)) {
-      throw new RangeError(`admin panel id must match ${PANEL_ID}: ${JSON.stringify(panel.id)}`);
+  for (const panel of ui.panels ?? [])
+    checkPanel(panel, seen, "admin panel");
+  for (const extension of ui.extensions ?? []) {
+    if (extension.kind === "panel") {
+      checkPanel(extension, seen, "admin extension");
+      continue;
     }
-    if (seen.has(panel.id))
-      throw new RangeError(`duplicate admin panel id ${panel.id}`);
-    seen.add(panel.id);
-    if (panel.title.trim() === "")
-      throw new RangeError(`admin panel ${panel.id} needs a title`);
+    const id2 = extension.id ?? "sql";
+    checkPanel({ id: id2, title: extension.title ?? "SQL" }, seen, "admin extension");
   }
 };
 
@@ -2554,9 +2831,24 @@ var renderAdminDocument = (service) => {
   .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
   label.field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--faint); }
   label.field input, label.field select, .controls input[type="password"] {
-    background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px;
-    padding: 7px 8px; min-height: 36px;
-  }
+    background-color: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px;
+    padding: 7px 8px; min-height: 36px; line-height: 1.2;
+  }
+  /* A native menu ignores min-height, so Preset rendered about half as tall as
+     the text fields in the same form. Paint it like those fields. */
+  label.field select {
+    -webkit-appearance: none; appearance: none;
+    padding-right: 28px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
+  }
+  .stack > .field > input,
+  .stack > .field > select,
+  .stack > .field > textarea,
+  dialog .field > input,
+  dialog .field > select,
+  dialog .field > textarea { width: 100%; }
+  .icon-btn, .btn, .btn-primary, .btn-quiet, .btn-danger, nav.side button { cursor: pointer; }
   .icon-btn, .btn, .btn-primary, .btn-quiet, .btn-danger {
     border-radius: 9px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line);
     background: var(--bg-elev);
@@ -2564,6 +2856,14 @@ var renderAdminDocument = (service) => {
   .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
   .btn-quiet { background: transparent; }
   .btn-danger { color: var(--err); }
+  /* Held after mouseup. Clearing an empty journal changes nothing on screen,
+     so the press itself has to stay visible. */
+  .icon-btn:active, .btn:active, .btn-quiet:active, .btn-danger:active, nav.side button:active,
+  .icon-btn.pressed, .btn.pressed, .btn-quiet.pressed, .btn-danger.pressed, nav.side button.pressed {
+    background: var(--bg-inset); border-color: var(--line-strong); color: var(--ink);
+  }
+  .btn-danger:active, .btn-danger.pressed { background: var(--err-soft); color: var(--err); }
+  .btn-primary:active, .btn-primary.pressed { filter: brightness(0.88); color: var(--accent-ink); }
   /* minmax(0, 1fr): a 1fr column will not shrink below its content, so a long
      record or the full nav row would widen the page past the viewport. */
   .layout {
@@ -2604,6 +2904,12 @@ var renderAdminDocument = (service) => {
     border-radius: 999px; padding: 4px 8px;
   }
   .chip i { color: var(--faint); font-style: normal; }
+  .sql-layout {
+    display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 16px;
+  }
+  .sql-tables { display: flex; flex-direction: column; gap: 4px; max-height: 28rem; overflow: auto; }
+  .sql-tables button { text-align: left; }
+  .sql-input { font-family: var(--mono); min-height: 7rem; width: 100%; }
   table { width: 100%; border-collapse: collapse; font-size: 14px; }
   th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
   th { color: var(--faint); font-weight: 600; font-size: 12px; }
@@ -2652,14 +2958,22 @@ var renderAdminDocument = (service) => {
     input, select, textarea { font-size: 16px; }
     .brand, .vendor, .controls { width: 100%; }
     label.field, label.field select, label.field input { flex: 1; min-width: 0; }
-    .layout { grid-template-columns: minmax(0, 1fr); }
+    /* The layout fills the screen. A single-column grid stretches every auto
+       row, so the tab bar grew with the leftover height and the buttons floated
+       in the middle of it. The bar stays one row; the page below takes the rest. */
+    .layout {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto minmax(0, 1fr);
+      align-content: start;
+    }
     nav.side {
+      align-self: start; height: auto;
       flex-direction: row; align-items: center; overflow-x: auto; min-width: 0;
       border-right: 0; border-bottom: 1px solid var(--line);
       padding: 8px;
     }
     nav.side button { white-space: nowrap; flex: none; }
-    .split { grid-template-columns: minmax(0, 1fr); }
+    .split, .sql-layout { grid-template-columns: minmax(0, 1fr); }
     main { padding: 14px; }
     table, thead, tbody, tr, th, td { display: block; }
     thead { display: none; }
@@ -2830,6 +3144,24 @@ var json2 = (body) => new Response(JSON.stringify(body), {
   status: 200,
   headers: { "content-type": "application/json; charset=utf-8" }
 });
+var describeExtension = (extension) => {
+  if (extension.kind === "sql") {
+    return {
+      kind: "sql",
+      id: extension.id ?? "sql",
+      title: extension.title ?? "SQL",
+      ...extension.description !== void 0 ? { description: extension.description } : {}
+    };
+  }
+  return {
+    kind: "panel",
+    id: extension.id,
+    title: extension.title,
+    ...extension.description !== void 0 ? { description: extension.description } : {},
+    html: extension.html,
+    ...extension.script !== void 0 ? { script: extension.script } : {}
+  };
+};
 var adminUiRoutes = (service, ui) => {
   const shell = () => renderAdminDocument(service);
   const document3 = () => ui?.render ? ui.render({ service, defaultHtml: shell }) : shell();
@@ -2844,7 +3176,8 @@ var adminUiRoutes = (service, ui) => {
         ...panel.description !== void 0 ? { description: panel.description } : {},
         html: panel.html,
         ...panel.script !== void 0 ? { script: panel.script } : {}
-      }))
+      })),
+      extensions: (ui?.extensions ?? []).map(describeExtension)
     })
   };
 };
@@ -3447,7 +3780,7 @@ var stateAdminRoutes = (routes) => {
 };
 
 // ../core/dist/version.js
-var PACKAGE_VERSION = true ? "1.6.0" : UNRELEASED_VERSION;
+var PACKAGE_VERSION = true ? "1.7.0" : UNRELEASED_VERSION;
 
 // ../core/dist/webhooks.js
 var json4 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
@@ -5790,4 +6123,4 @@ export {
   OtelAPI,
   adminRow
 };
-//# sourceMappingURL=chunk-RBLBWTGH.js.map
+//# sourceMappingURL=chunk-FOS7KNLE.js.map