@crvouga/mockingbird-service-flex 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @crvouga/mockingbird-service-flex
 
+## 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

package/dist/{chunk-TA2IWDFT.js → chunk-56LAVEQL.js}

@@ -1925,6 +1925,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 layout2 = document.createElement("div");
+  layout2.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);
+  layout2.append(tables, stack);
+  root.append(layout2);
+  const showError = (error2) => {
+    banner.textContent = error2 instanceof Error ? error2.message : String(error2);
+    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"];
@@ -2601,6 +2762,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);
@@ -2654,10 +2831,48 @@ 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;
@@ -2707,19 +2922,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 id = extension.id ?? "sql";
+    checkPanel({ id, title: extension.title ?? "SQL" }, seen, "admin extension");
   }
 };
 
@@ -2953,6 +3182,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; }
@@ -3016,7 +3251,7 @@ var renderAdminDocument = (service) => {
       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; }
@@ -3187,6 +3422,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();
@@ -3201,7 +3454,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)
     })
   };
 };
@@ -3878,7 +4132,7 @@ var stateAdminRoutes = (routes) => {
 };
 
 // ../core/dist/version.js
-var PACKAGE_VERSION = true ? "1.6.1" : UNRELEASED_VERSION;
+var PACKAGE_VERSION = true ? "1.7.0" : UNRELEASED_VERSION;
 
 // ../core/dist/signing.js
 var encoder = new TextEncoder();
@@ -7010,4 +7264,4 @@ export {
   FlexAPI,
   isNextActionType
 };
-//# sourceMappingURL=chunk-TA2IWDFT.js.map
+//# sourceMappingURL=chunk-56LAVEQL.js.map