@crvouga/mockingbird-service-postgres 1.7.0 → 2.0.0

package/dist/admin.js

@@ -375,6 +375,34 @@ dialog:not([open]) {
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+function highlightJsonText(text) {
+  const escapeToken = (value) => value.replace(/[&<>"']/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+  const token = /("(?:\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"\s*:|"(?:\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"|\b(?:true|false)\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+  let cursor = 0;
+  let html = "";
+  for (const match of text.matchAll(token)) {
+    const index = match.index ?? 0;
+    const value = match[0];
+    html += escapeToken(text.slice(cursor, index));
+    const kind = value.startsWith('"') ? value.trimEnd().endsWith(":") ? "key" : "string" : value === "true" || value === "false" ? "boolean" : value === "null" ? "null" : "number";
+    html += `<span class="json-${kind}">${escapeToken(value)}</span>`;
+    cursor = index + value.length;
+  }
+  return html + escapeToken(text.slice(cursor));
+}
 function mountAdminBrand(doc, host, service, catalog) {
   const clip = (value, max) => {
     if (typeof value !== "string")
@@ -736,14 +764,16 @@ function bootAdmin(config) {
   const state = {
     namespace: "default",
     key: sessionStorage.getItem("mockingbird-admin-key") || "",
-    view: "overview",
+    view: ["overview", "state", "clock", "faults", "journal", "routes"].includes(location.hash.slice(1)) ? location.hash.slice(1) : "overview",
     collection: "",
     shape: null,
     route: null,
+    routes: [],
     editing: null
   };
   const standard = new Set(config.standardRoutes);
   const banner = el("banner", HTMLElement);
+  const bannerMessage = el("banner-message", HTMLElement);
   const keyInput = el("admin-key", HTMLInputElement);
   keyInput.value = state.key;
   const params = new URLSearchParams(location.search);
@@ -754,18 +784,21 @@ function bootAdmin(config) {
     sessionStorage.setItem("mockingbird-admin-key", state.key);
     params.delete("key");
     const next = params.toString();
-    history.replaceState(null, "", location.pathname + (next ? `?${next}` : ""));
+    history.replaceState(null, "", location.pathname + (next ? `?${next}` : "") + location.hash);
   }
   const queryNamespace = params.get("namespace");
   if (queryNamespace)
     state.namespace = queryNamespace;
   const showError = (error) => {
-    banner.textContent = error instanceof Error ? error.message : String(error);
+    bannerMessage.textContent = error instanceof Error ? error.message : String(error);
     banner.classList.add("show");
+    banner.scrollIntoView({ behavior: "smooth", block: "nearest" });
   };
   const clearError = () => {
     banner.classList.remove("show");
+    bannerMessage.textContent = "";
   };
+  el("banner-dismiss", HTMLButtonElement).addEventListener("click", clearError);
   const api = async (method, path, body) => {
     const headers = { accept: "application/json" };
     if (state.key !== "")
@@ -809,16 +842,21 @@ function bootAdmin(config) {
     namespace: () => state.namespace
   };
   const isPanelScript = (value) => typeof value === "function";
+  const themeButton = el("theme", HTMLButtonElement);
   const setTheme = (theme) => {
     if (theme)
       document.documentElement.dataset.theme = theme;
     else
       delete document.documentElement.dataset.theme;
+    const dark = theme ? theme === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+    themeButton.innerHTML = dark ? '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="3.2" stroke="currentColor" stroke-width="1.5"/><path d="M10 2v1.5M10 16.5V18M18 10h-1.5M3.5 10H2M15.7 4.3l-1 1M5.3 14.7l-1 1M15.7 15.7l-1-1M5.3 5.3l-1-1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>' : '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M16.8 12.2A7 7 0 0 1 7.8 3.2a7 7 0 1 0 9 9Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>';
+    const label = dark ? "Use light theme" : "Use dark theme";
+    themeButton.setAttribute("aria-label", label);
+    themeButton.title = label;
   };
   const storedTheme = localStorage.getItem("mockingbird-admin-theme");
-  if (storedTheme)
-    setTheme(storedTheme);
-  el("theme", HTMLButtonElement).addEventListener("click", () => {
+  setTheme(storedTheme === "dark" || storedTheme === "light" ? storedTheme : null);
+  themeButton.addEventListener("click", () => {
     const current = document.documentElement.dataset.theme;
     const dark = current ? current === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
     const next = dark ? "light" : "dark";
@@ -837,6 +875,7 @@ function bootAdmin(config) {
         continue;
       section.hidden = section.id !== `view-${view}`;
     }
+    history.replaceState(null, "", `${location.pathname}${location.search}#${encodeURIComponent(view)}`);
   };
   el("nav", HTMLElement).addEventListener("click", (event) => {
     const target = event.target;
@@ -851,7 +890,7 @@ function bootAdmin(config) {
     show(view);
     refresh().catch(showError);
   });
-  const cards = (items) => `<div class="grid">${items.map((item) => `<article class="card"><div class="k">${item.k}</div><div class="v">${item.v}</div></article>`).join("")}</div>`;
+  const cards = (items) => `<div class="grid">${items.map((item) => `<article class="card stat-card"><div class="k">${item.k}</div><div class="v">${item.v}</div></article>`).join("")}</div>`;
   const table = (columns, rows) => {
     if (rows.length === 0)
       return '<p class="empty">Nothing here yet.</p>';
@@ -861,16 +900,22 @@ function bootAdmin(config) {
       const attrs = "attrs" in row && typeof row.attrs === "string" ? row.attrs : "";
       return `<tr${attrs}>${cells}</tr>`;
     }).join("");
-    return `<table><thead>${head}</thead><tbody>${body}</tbody></table>`;
+    return `<div class="table-shell"><table><thead>${head}</thead><tbody>${body}</tbody></table></div>`;
   };
   const preview = (value) => {
     const text = JSON.stringify(value) ?? "null";
-    return esc(text.length > 180 ? `${text.slice(0, 180)}\u2026` : text);
+    const clipped = text.length > 180 ? `${text.slice(0, 180)}\u2026` : text;
+    return `<code class="json-inline">${highlightJsonText(clipped)}</code>`;
   };
   const when = (epoch) => {
     const date = new Date(epoch);
     return Number.isNaN(date.getTime()) ? String(epoch) : date.toISOString();
   };
+  const journalWhen = (value) => {
+    const numeric = value.trim() === "" ? Number.NaN : Number(value);
+    const epoch = Number.isFinite(numeric) ? numeric : Date.parse(value);
+    return Number.isFinite(epoch) ? when(epoch) : value;
+  };
   const clockCard = (epoch) => {
     const date = new Date(epoch);
     if (Number.isNaN(date.getTime()))
@@ -990,7 +1035,7 @@ function bootAdmin(config) {
   };
   const renderOverview = async () => {
     const [health, shape, clock, journal] = await Promise.all([
-      originGet("/health"),
+      originGet(`${config.adminPrefix}/health`),
       api("GET", "/state"),
       api("GET", "/clock"),
       api("GET", "/requests?limit=8")
@@ -1007,7 +1052,7 @@ function bootAdmin(config) {
       },
       {
         k: "Status",
-        v: esc(typeof health.status === "string" && health.status !== "" ? health.status : "ok")
+        v: `<span class="badge ok">${esc(typeof health.status === "string" && health.status !== "" ? health.status : "ok")}</span>`
       },
       { k: "Namespace", v: esc(state.namespace) },
       { k: "Collections", v: String(decoded.collections.length) },
@@ -1094,26 +1139,46 @@ function bootAdmin(config) {
   const renderJournal = async () => {
     const journal = await api("GET", "/requests?limit=100");
     el("journal", HTMLElement).innerHTML = table([
-      { label: "When", cell: (row) => esc(row.at) },
-      { label: "Method", cell: (row) => esc(row.method) },
+      { label: "When", cell: (row) => esc(journalWhen(row.at)) },
+      {
+        label: "Method",
+        cell: (row) => `<span class="method">${esc(row.method)}</span>`
+      },
       { label: "Path", cell: (row) => esc(row.path) },
-      { label: "Status", cell: (row) => esc(row.status) },
+      {
+        label: "Status",
+        cell: (row) => `<span class="badge ${row.status.startsWith("2") ? "ok" : row.status.startsWith("4") || row.status.startsWith("5") ? "warn" : ""}">${esc(row.status)}</span>`
+      },
       { label: "ms", cell: (row) => esc(row.durationMs) }
     ], decodeJournal(journal));
   };
-  const renderRoutes = async () => {
-    const data = await api("GET", "/");
-    if (!isRecord(data))
-      throw new Error("Route list was not an object");
-    const routes = requireList(data.routes, "Routes").map((route) => String(route));
+  const paintRoutes = () => {
+    const query = el("route-search", HTMLInputElement).value.trim().toLocaleLowerCase();
+    const routes = state.routes.filter((route) => route.toLocaleLowerCase().includes(query));
+    el("route-count", HTMLElement).textContent = `${routes.length} of ${state.routes.length}`;
+    if (state.routes.length === 0) {
+      el("route-list", HTMLElement).innerHTML = '<p class="empty">No admin routes are available.</p>';
+      return;
+    }
+    if (routes.length === 0) {
+      el("route-list", HTMLElement).innerHTML = '<p class="empty">No routes match this filter.</p>';
+      return;
+    }
     el("route-list", HTMLElement).innerHTML = routes.map((route) => {
       const extra = standard.has(route) ? "" : " <span class='badge'>extension</span>";
       const parts = route.split(" ");
       const method = parts[0] ?? "";
       const path = parts.slice(1).join(" ");
-      return `<div class="route"><span class="method">${esc(method)}</span><span>${esc(path)}${extra}</span><button class="btn" type="button" data-route="${esc(route)}">Use</button></div>`;
+      return `<div class="route"><span class="method">${esc(method)}</span><span>${esc(path)}${extra}</span><button class="btn" type="button" data-route="${esc(route)}" aria-label="Use ${esc(route)}">Use</button></div>`;
     }).join("");
   };
+  const renderRoutes = async () => {
+    const data = await api("GET", "/");
+    if (!isRecord(data))
+      throw new Error("Route list was not an object");
+    state.routes = requireList(data.routes, "Routes").map((route) => String(route));
+    paintRoutes();
+  };
   const renderers = {
     overview: renderOverview,
     state: renderState,
@@ -1122,19 +1187,50 @@ function bootAdmin(config) {
     journal: renderJournal,
     routes: renderRoutes
   };
+  let refreshToken = 0;
   async function refresh() {
+    const token = ++refreshToken;
     clearError();
+    const main = el("views", HTMLElement);
+    const sync = el("sync-status", HTMLElement);
+    main.setAttribute("aria-busy", "true");
+    sync.classList.add("busy");
+    sync.textContent = "Updating";
     const render = renderers[state.view];
-    if (render)
-      await render();
+    try {
+      if (render)
+        await render();
+      if (token === refreshToken)
+        sync.textContent = "Up to date";
+    } finally {
+      if (token === refreshToken) {
+        main.removeAttribute("aria-busy");
+        sync.classList.remove("busy");
+      }
+    }
   }
   const delay = (ms) => new Promise((resolve) => {
     window.setTimeout(resolve, ms);
   });
-  const confirmAction = async (button, pending, done, work) => {
+  const confirmAction = async (button, pending, done, work, confirmLabel) => {
     if (button.dataset.pending === "1")
       return;
     const label = button.textContent ?? "";
+    if (confirmLabel !== void 0 && button.dataset.confirming !== "1") {
+      button.dataset.confirming = "1";
+      button.classList.add("confirming");
+      button.textContent = confirmLabel;
+      window.setTimeout(() => {
+        if (button.dataset.confirming !== "1")
+          return;
+        button.textContent = label;
+        button.classList.remove("confirming");
+        delete button.dataset.confirming;
+      }, 3e3);
+      return;
+    }
+    button.classList.remove("confirming");
+    delete button.dataset.confirming;
     const width = button.offsetWidth;
     button.dataset.pending = "1";
     button.classList.add("pressed");
@@ -1155,6 +1251,65 @@ function bootAdmin(config) {
       delete button.dataset.pending;
     }
   };
+  const wireJsonEditor = (textareaId, highlightId, statusId, shellId, allowEmpty) => {
+    const textarea = el(textareaId, HTMLTextAreaElement);
+    const highlight = el(highlightId, HTMLElement);
+    const status = el(statusId, HTMLElement);
+    const shell = el(shellId, HTMLElement);
+    const sync = () => {
+      const text = textarea.value;
+      highlight.innerHTML = `${highlightJsonText(text)}
+`;
+      let valid = true;
+      let message = "Valid JSON";
+      if (allowEmpty && text.trim() === "")
+        message = "No body";
+      else {
+        try {
+          readJson2(text);
+        } catch {
+          valid = false;
+          message = "Invalid JSON";
+        }
+      }
+      shell.classList.toggle("invalid", !valid);
+      status.classList.toggle("invalid", !valid);
+      status.textContent = message;
+      textarea.setAttribute("aria-invalid", valid ? "false" : "true");
+    };
+    const syncScroll = () => {
+      const preview2 = highlight.parentElement;
+      if (!(preview2 instanceof HTMLElement))
+        return;
+      preview2.scrollTop = textarea.scrollTop;
+      preview2.scrollLeft = textarea.scrollLeft;
+    };
+    textarea.addEventListener("input", sync);
+    textarea.addEventListener("scroll", syncScroll);
+    sync();
+    return sync;
+  };
+  const syncRouteEditor = wireJsonEditor("route-body", "route-highlight", "route-json-status", "route-editor", true);
+  const syncRecordEditor = wireJsonEditor("editor-value", "editor-highlight", "editor-json-status", "record-editor", false);
+  for (const button of document.querySelectorAll("[data-format]")) {
+    if (!(button instanceof HTMLButtonElement))
+      continue;
+    button.addEventListener("click", () => {
+      const target = button.dataset.format;
+      if (target === void 0)
+        return;
+      const textarea = document.getElementById(target);
+      if (!(textarea instanceof HTMLTextAreaElement) || textarea.value.trim() === "")
+        return;
+      try {
+        textarea.value = JSON.stringify(readJson2(textarea.value), null, 2) ?? "";
+        textarea.dispatchEvent(new Event("input"));
+        textarea.focus();
+      } catch {
+        showError(new Error("Fix the JSON before formatting it"));
+      }
+    });
+  }
   document.addEventListener("click", (event) => {
     const target = event.target;
     if (!(target instanceof Element))
@@ -1227,6 +1382,7 @@ function bootAdmin(config) {
     } else {
       editorValue.value = "{\n  \n}";
     }
+    syncRecordEditor();
     editor.showModal();
   }
   el("new-record", HTMLButtonElement).addEventListener("click", () => {
@@ -1256,10 +1412,10 @@ function bootAdmin(config) {
     const id = state.editing;
     if (!id)
       return;
-    api("DELETE", `/state/${encodeURIComponent(state.collection)}/${encodeURIComponent(id)}`).then(() => {
+    confirmAction(editorDelete, "Deleting...", "Deleted", () => api("DELETE", `/state/${encodeURIComponent(state.collection)}/${encodeURIComponent(id)}`).then(() => {
       editor.close();
       return renderState();
-    }).catch(showError);
+    }), "Confirm delete").catch(showError);
   });
   for (const button of document.querySelectorAll("[data-advance]")) {
     if (!(button instanceof HTMLButtonElement))
@@ -1305,10 +1461,10 @@ function bootAdmin(config) {
     }).then(() => renderFaults()).catch(showError);
   });
   el("fault-clear", HTMLButtonElement).addEventListener("click", () => {
-    confirmAction(el("fault-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/faults").then(() => renderFaults())).catch(showError);
+    confirmAction(el("fault-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/faults").then(() => renderFaults()), "Confirm clear").catch(showError);
   });
   el("journal-clear", HTMLButtonElement).addEventListener("click", () => {
-    confirmAction(el("journal-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/requests").then(() => renderJournal())).catch(showError);
+    confirmAction(el("journal-clear", HTMLButtonElement), "Clearing...", "Cleared", () => api("DELETE", "/requests").then(() => renderJournal()), "Confirm clear").catch(showError);
   });
   el("route-list", HTMLElement).addEventListener("click", (event) => {
     const target = event.target;
@@ -1322,9 +1478,15 @@ function bootAdmin(config) {
       return;
     state.route = route;
     el("route-title", HTMLElement).textContent = route;
+    el("route-send", HTMLButtonElement).disabled = false;
     const method = route.split(" ")[0] ?? "";
-    el("route-body", HTMLTextAreaElement).disabled = method === "GET" || method === "DELETE";
+    const routeBody = el("route-body", HTMLTextAreaElement);
+    routeBody.disabled = method === "GET" || method === "DELETE";
+    el("route-editor", HTMLElement).hidden = routeBody.disabled;
+    el("route-json-status", HTMLElement).parentElement?.toggleAttribute("hidden", routeBody.disabled);
+    syncRouteEditor();
   });
+  el("route-search", HTMLInputElement).addEventListener("input", paintRoutes);
   el("route-form", HTMLFormElement).addEventListener("submit", (event) => {
     event.preventDefault();
     const send = async () => {
@@ -1346,7 +1508,8 @@ function bootAdmin(config) {
         }
       }
       const data = await api(method, concrete, body);
-      el("route-result", HTMLElement).textContent = JSON.stringify(data, null, 2);
+      const text = JSON.stringify(data, null, 2) ?? "null";
+      el("route-result", HTMLElement).innerHTML = `<code>${highlightJsonText(text)}</code>`;
     };
     send().catch(showError);
   });
@@ -1464,11 +1627,13 @@ function bootAdmin(config) {
       views.append(section);
       mountSqlExplorer(body, panelApi);
     }
+    show(document.getElementById(`view-${state.view}`) === null ? "overview" : state.view);
     return refresh();
   }).catch(showError);
 }
 var clientPrelude = [
   isRecord,
+  highlightJsonText,
   mountAdminBrand,
   startAdminBrand,
   faultPresetList,
@@ -1488,13 +1653,19 @@ ${entry}(${payload});
 };
 
 // ../core/dist/control.js
-var HEALTH_PATH = "/health";
 var ADMIN_PREFIX = "/__admin";
+var resolveAdminPrefix = (prefix = ADMIN_PREFIX) => {
+  if (!/^\/[A-Za-z0-9_-]+(?:\/[A-Za-z0-9_-]+)*$/.test(prefix)) {
+    throw new Error("adminPrefix must be an absolute non-root path of literal segments, without a trailing slash");
+  }
+  return prefix;
+};
+var isAdminPath = (path, prefix) => path === prefix || path.startsWith(`${prefix}/`);
 var ADMIN_KEY_HEADER = "x-mockingbird-admin-key";
 var NAMESPACE_HEADER = "x-mockingbird-namespace";
 var json = (status, body) => new Response(JSON.stringify(body), {
   status,
-  headers: { "content-type": "application/json" }
+  headers: { "content-type": "application/json; charset=utf-8" }
 });
 var adminError = (status, message) => json(status, { error: { type: "mockingbird_admin", message } });
 var UNITS = {
@@ -1546,11 +1717,25 @@ var readJson = async (request) => {
 };
 var isRecord2 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var createControlPlane = (context) => {
+  const adminPrefix = resolveAdminPrefix(context.adminPrefix);
   const snapshots = /* @__PURE__ */ new Map();
   let snapshotCounter = 0;
   const headerNamespace = (request) => request.headers.get(NAMESPACE_HEADER) ?? context.defaultNamespace;
   const adminNamespace = (request, url) => url.searchParams.get("namespace") ?? headerNamespace(request);
+  const health = () => {
+    return json(200, {
+      ...context.describe(),
+      status: "ok",
+      service: context.name,
+      uptimeMs: context.wallNow() - context.startedAt,
+      clock: context.clock.state(),
+      namespaces: context.namespaces().length,
+      adminPrefix,
+      adminUi: `${adminPrefix}/ui`
+    });
+  };
   const builtin = {
+    "GET /health": health,
     "GET /": () => json(200, {
       service: context.name,
       routes: [...Object.keys(builtin), ...Object.keys(context.routes)].sort()
@@ -1717,7 +1902,14 @@ var createControlPlane = (context) => {
       return json(200, { status: "ok" });
     }
   };
-  const routes = [...Object.entries(context.routes), ...Object.entries(builtin)].map(([key, handler]) => {
+  for (const key of Object.keys(context.routes)) {
+    if (Object.hasOwn(builtin, key))
+      throw new Error(`admin route ${key} overrides a shared route`);
+    const path = key.slice(key.indexOf(" ") + 1);
+    if (isAdminPath(path, "/ns") || isAdminPath(path, "/blobs"))
+      throw new Error(`admin route ${key} overlaps an internal transport`);
+  }
+  const routes = [...Object.entries(builtin), ...Object.entries(context.routes)].map(([key, handler]) => {
     const space = key.indexOf(" ");
     return { method: key.slice(0, space), pattern: key.slice(space + 1), handler };
   });
@@ -1725,21 +1917,13 @@ var createControlPlane = (context) => {
     namespaceOf: headerNamespace,
     async handle(request) {
       const url = new URL(request.url);
-      if (url.pathname === HEALTH_PATH && request.method === "GET") {
-        return json(200, {
-          status: "ok",
-          service: context.name,
-          uptimeMs: context.wallNow() - context.startedAt,
-          clock: context.clock.state(),
-          namespaces: context.namespaces().length,
-          adminUi: `${ADMIN_PREFIX}/ui`,
-          ...context.describe()
-        });
+      if (url.pathname === `${adminPrefix}/health` && request.method === "GET") {
+        return health();
       }
-      if (url.pathname !== ADMIN_PREFIX && !url.pathname.startsWith(`${ADMIN_PREFIX}/`)) {
+      if (!isAdminPath(url.pathname, adminPrefix)) {
         return void 0;
       }
-      const path = url.pathname.slice(ADMIN_PREFIX.length) || "/";
+      const path = url.pathname.slice(adminPrefix.length) || "/";
       const shell = request.method === "GET" && (path === "/ui" || path === "/ui/");
       if (!shell && context.adminKey !== void 0 && request.headers.get(ADMIN_KEY_HEADER) !== context.adminKey) {
         return adminError(401, `missing or wrong ${ADMIN_KEY_HEADER}`);
@@ -1747,7 +1931,12 @@ var createControlPlane = (context) => {
       for (const route of routes) {
         if (route.method !== request.method)
           continue;
-        const params = matchRoute(route.pattern, path);
+        let params;
+        try {
+          params = matchRoute(route.pattern, path);
+        } catch {
+          return adminError(400, "invalid path encoding");
+        }
         if (!params)
           continue;
         let body;
@@ -1756,15 +1945,18 @@ var createControlPlane = (context) => {
         } catch {
           return adminError(400, "request body is not valid JSON");
         }
+        const namespace = adminNamespace(request, url);
+        if (!/^[A-Za-z0-9_.-]{1,64}$/.test(namespace))
+          return adminError(400, "invalid namespace");
         return route.handler({
           request,
           url,
           params,
-          namespace: adminNamespace(request, url),
+          namespace,
           body
         });
       }
-      return adminError(404, `no admin route ${request.method} ${path}; GET ${ADMIN_PREFIX} lists them`);
+      return adminError(404, `no admin route ${request.method} ${path}; GET ${adminPrefix} lists them`);
     }
   };
 };
@@ -1772,6 +1964,7 @@ var createControlPlane = (context) => {
 // ../core/dist/surface.js
 var STANDARD_ADMIN_ROUTES = [
   "GET /",
+  "GET /health",
   "POST /reset",
   "GET /namespaces",
   "GET /clock",
@@ -1821,11 +2014,11 @@ var escapeHtml = (value) => value.replace(/[&<>"']/g, (char) => {
   }
 });
 var ADMIN_BRANDS_URL = "https://mockingbird.chrisvouga.dev/brands.json";
-var renderAdminDocument = (service) => {
+var renderAdminDocument = (service, adminPrefix = ADMIN_PREFIX) => {
   const name = escapeHtml(service);
   const script = adminClientSource({
     standardRoutes: STANDARD_ADMIN_ROUTES,
-    adminPrefix: ADMIN_PREFIX,
+    adminPrefix,
     adminKeyHeader: ADMIN_KEY_HEADER,
     brandsUrl: ADMIN_BRANDS_URL,
     service
@@ -1842,75 +2035,99 @@ var renderAdminDocument = (service) => {
   ${CSS_RESET}
   :root {
     color-scheme: light;
-    --bg: #fafafa;
+    --bg: #f7f8fb;
     --bg-elev: #ffffff;
-    --bg-muted: #f4f4f5;
-    --bg-inset: #f4f4f5;
-    --line: #dedee3;
-    --line-strong: #c4c4cc;
-    --ink: #18181b;
-    --muted: #62626b;
-    --faint: #71717a;
-    --accent: #27272a;
+    --bg-muted: #f1f3f7;
+    --bg-inset: #f8f9fc;
+    --line: #e4e7ec;
+    --line-strong: #cfd4dc;
+    --ink: #101828;
+    --muted: #475467;
+    --faint: #667085;
+    --accent: #6941c6;
+    --accent-hover: #5933b4;
     --accent-ink: #ffffff;
-    --accent-soft: #f4f4f5;
-    --ok: #166534;
-    --ok-soft: #f0fdf4;
-    --warn: #a16207;
-    --warn-soft: #fefce8;
-    --err: #a82d32;
-    --err-soft: #fef2f2;
-    --shadow: none;
+    --accent-soft: #f4f0ff;
+    --ok: #067647;
+    --ok-soft: #ecfdf3;
+    --warn: #b54708;
+    --warn-soft: #fffaeb;
+    --err: #b42318;
+    --err-soft: #fef3f2;
+    --code-key: #6941c6;
+    --code-string: #067647;
+    --code-number: #175cd3;
+    --code-boolean: #c11574;
+    --code-null: #667085;
+    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
+    --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
+    --shadow-lg: 0 18px 48px rgb(16 24 40 / 0.16), 0 4px 12px rgb(16 24 40 / 0.08);
     --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
-    --radius: 10px;
-    --header: 56px;
-    --nav: 200px;
+    --radius: 12px;
+    --header: 72px;
+    --nav: 224px;
   }
   :root[data-theme="dark"] {
     color-scheme: dark;
-    --bg: #111113;
-    --bg-elev: #19191c;
-    --bg-muted: #242428;
-    --bg-inset: #111113;
-    --line: #36363c;
-    --line-strong: #52525b;
-    --ink: #f4f4f5;
-    --muted: #a9a9b2;
-    --faint: #71717a;
-    --accent: #e4e4e7;
-    --accent-ink: #18181b;
-    --accent-soft: #242428;
-    --ok: #86efac;
-    --ok-soft: #14241b;
-    --warn: #fde68a;
-    --warn-soft: #2a2410;
-    --err: #ffaaaa;
-    --err-soft: #2c1516;
-    --shadow: none;
+    --bg: #0c0e14;
+    --bg-elev: #151821;
+    --bg-muted: #20232e;
+    --bg-inset: #11141c;
+    --line: #2b303d;
+    --line-strong: #414858;
+    --ink: #f5f7fa;
+    --muted: #b6bdc9;
+    --faint: #8d96a7;
+    --accent: #9e77ed;
+    --accent-hover: #b692f6;
+    --accent-ink: #ffffff;
+    --accent-soft: #2b2142;
+    --ok: #75e0a7;
+    --ok-soft: #102a20;
+    --warn: #fec84b;
+    --warn-soft: #302611;
+    --err: #fda29b;
+    --err-soft: #321817;
+    --code-key: #c3a6ff;
+    --code-string: #75e0a7;
+    --code-number: #84adff;
+    --code-boolean: #f9a8d4;
+    --code-null: #98a2b3;
+    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.24);
+    --shadow-sm: 0 4px 12px rgb(0 0 0 / 0.2);
+    --shadow-lg: 0 20px 56px rgb(0 0 0 / 0.45);
   }
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
       color-scheme: dark;
-      --bg: #111113;
-      --bg-elev: #19191c;
-      --bg-muted: #242428;
-      --bg-inset: #111113;
-      --line: #36363c;
-      --line-strong: #52525b;
-      --ink: #f4f4f5;
-      --muted: #a9a9b2;
-      --faint: #71717a;
-      --accent: #e4e4e7;
-      --accent-ink: #18181b;
-      --accent-soft: #242428;
-      --ok: #86efac;
-      --ok-soft: #14241b;
-      --warn: #fde68a;
-      --warn-soft: #2a2410;
-      --err: #ffaaaa;
-      --err-soft: #2c1516;
-      --shadow: none;
+      --bg: #0c0e14;
+      --bg-elev: #151821;
+      --bg-muted: #20232e;
+      --bg-inset: #11141c;
+      --line: #2b303d;
+      --line-strong: #414858;
+      --ink: #f5f7fa;
+      --muted: #b6bdc9;
+      --faint: #8d96a7;
+      --accent: #9e77ed;
+      --accent-hover: #b692f6;
+      --accent-ink: #ffffff;
+      --accent-soft: #2b2142;
+      --ok: #75e0a7;
+      --ok-soft: #102a20;
+      --warn: #fec84b;
+      --warn-soft: #302611;
+      --err: #fda29b;
+      --err-soft: #321817;
+      --code-key: #c3a6ff;
+      --code-string: #75e0a7;
+      --code-number: #84adff;
+      --code-boolean: #f9a8d4;
+      --code-null: #98a2b3;
+      --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.24);
+      --shadow-sm: 0 4px 12px rgb(0 0 0 / 0.2);
+      --shadow-lg: 0 20px 56px rgb(0 0 0 / 0.45);
     }
   }
   /* Fill the viewport, then grow with the content so the background covers the scroll. */
@@ -1928,13 +2145,17 @@ var renderAdminDocument = (service) => {
     padding-right: env(safe-area-inset-right);
     -webkit-text-size-adjust: 100%;
   }
-  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
+  :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
+  button, input, select, textarea { transition: border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease; }
+  button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.55; }
   .app { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; width: 100%; }
   header.top {
-    position: sticky; top: 0; z-index: 5;
+    position: sticky; top: 0; z-index: 20;
     display: flex; align-items: center; gap: 12px;
-    min-height: var(--header); padding: 10px 16px;
-    background: var(--bg-elev);
+    min-height: var(--header); padding: 12px 20px;
+    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
+    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
     border-bottom: 1px solid var(--line);
     min-width: 0; max-width: 100%;
   }
@@ -1942,12 +2163,21 @@ var renderAdminDocument = (service) => {
     display: flex; flex-flow: row wrap; align-items: center; gap: 14px;
     min-width: 0; max-width: 100%; margin-right: auto;
   }
-  .brand-id { display: flex; flex-direction: column; min-width: 0; flex: none; }
-  .brand-id strong { font-size: 15px; letter-spacing: -0.01em; }
+  .brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  .brand-mark {
+    width: 38px; height: 38px; display: grid; place-items: center; flex: none;
+    border-radius: 11px; color: #fff;
+    background: linear-gradient(145deg, #7f56d9 0%, #53389e 100%);
+    box-shadow: 0 6px 16px rgb(105 65 198 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.25);
+  }
+  .brand-mark svg { width: 22px; height: 22px; }
+  .brand-id { display: flex; flex-direction: column; min-width: 0; flex: none; line-height: 1.25; }
+  .brand-id strong { font-size: 15px; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .brand-id span { color: var(--faint); font-size: 12px; }
   .vendor {
     display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
     min-width: 0; max-width: 100%; font-size: 12px; color: var(--muted);
+    padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-inset);
   }
   .vendor[hidden] { display: none; }
   /* Logos are drawn for a light tile, same as the docs site, so the plate stays white. */
@@ -1959,12 +2189,17 @@ var renderAdminDocument = (service) => {
   .vendor-sep { color: var(--faint); }
   .vendor-link { color: inherit; text-decoration: none; }
   .vendor-link:hover { color: var(--ink); text-decoration: underline; }
-  .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); }
+  .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
+  .sync-status { align-self: center; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 12px; white-space: nowrap; }
+  .sync-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
+  .sync-status.busy::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.2s ease-in-out infinite; }
+  label.field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--faint); }
   label.field input, label.field select, .controls input[type="password"] {
-    background-color: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px;
-    padding: 7px 8px; min-height: 36px; line-height: 1.2;
+    background-color: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 9px;
+    padding: 8px 10px; min-height: 38px; line-height: 1.2; box-shadow: var(--shadow-xs);
   }
+  label.field input:hover, label.field select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong)); }
+  label.field input:focus, label.field select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }
   /* 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 {
@@ -1981,12 +2216,20 @@ var renderAdminDocument = (service) => {
   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);
-  }
-  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
-  .btn-quiet { background: transparent; }
-  .btn-danger { color: var(--err); }
+    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+    border-radius: 9px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong);
+    background: var(--bg-elev); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1;
+    box-shadow: var(--shadow-xs);
+  }
+  .icon-btn { width: 38px; padding: 0; }
+  .icon-btn svg, .btn svg, .btn-primary svg { width: 16px; height: 16px; }
+  .icon-btn:hover, .btn:hover { background: var(--bg-muted); border-color: var(--line-strong); }
+  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 1px 2px rgb(16 24 40 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.08) inset; }
+  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+  .btn-quiet { background: transparent; border-color: transparent; box-shadow: none; }
+  .btn-quiet:hover { background: var(--bg-muted); }
+  .btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, var(--line)); }
+  .btn-danger:hover, .btn-danger.confirming { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
   /* 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,
@@ -2002,93 +2245,159 @@ var renderAdminDocument = (service) => {
     flex: 1 0 auto; min-width: 0;
   }
   nav.side {
-    border-right: 1px solid var(--line); padding: 12px;
+    position: sticky; top: var(--header); align-self: start; height: calc(100vh - var(--header));
+    border-right: 1px solid var(--line); padding: 18px 12px;
     display: flex; flex-direction: column; gap: 4px;
-    background: var(--bg-elev);
+    background: var(--bg-elev); overflow-y: auto;
   }
+  .nav-label { padding: 0 10px 8px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
   nav.side button {
+    position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
     text-align: left; border: 0; background: transparent; border-radius: 9px;
-    padding: 9px 10px; min-height: 40px; color: var(--muted);
-  }
-  nav.side button[aria-current="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
-  main { padding: 20px; max-width: 1100px; width: 100%; min-width: 0; }
-  .view h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
-  .lede { margin: 0 0 16px; color: var(--muted); }
-  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
+    padding: 9px 10px; min-height: 42px; color: var(--muted); font-size: 13px; font-weight: 550;
+  }
+  nav.side button:hover { background: var(--bg-muted); color: var(--ink); }
+  nav.side button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
+  nav.side button[aria-current="true"]::before { content: ""; position: absolute; left: -12px; width: 3px; height: 22px; border-radius: 0 4px 4px 0; background: var(--accent); }
+  .nav-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
+  .nav-icon svg { width: 18px; height: 18px; }
+  main { padding: 32px clamp(20px, 4vw, 48px) 64px; max-width: 1320px; width: 100%; min-width: 0; }
+  main[aria-busy="true"] .view { opacity: 0.62; }
+  .view { animation: view-in 180ms ease-out; }
+  .view[hidden] { display: none; }
+  .view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
+  .view h2 { margin: 0 0 5px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.035em; }
+  .view h3 { margin: 24px 0 10px; font-size: 15px; letter-spacing: -0.01em; }
+  .lede { margin: 0; color: var(--muted); max-width: 72ch; font-size: 14px; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 14px; }
   .card {
     background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
-    padding: 14px 16px; box-shadow: var(--shadow);
+    padding: 18px; box-shadow: var(--shadow-sm);
   }
-  .card .k { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
-  .card .v { display: flex; flex-direction: column; gap: 2px; font-size: 22px; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+  .stat-card { position: relative; overflow: hidden; }
+  .stat-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 78%); opacity: 0.7; }
+  .card .k { color: var(--faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
+  .card .v { display: flex; flex-direction: column; gap: 2px; font-size: 24px; font-weight: 650; margin-top: 7px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: -0.025em; }
   .card .v .clock-time { font-size: 14px; color: var(--muted); }
-  .split { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
+  .section-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; }
+  .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
+  .section-title h3 { margin: 0; }
+  .split { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 18px; align-items: start; }
+  #collections { padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-xs); }
   .collection {
     width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
-    border-radius: 10px; padding: 8px 10px; min-height: 44px;
+    border-radius: 9px; padding: 10px 11px; min-height: 48px; color: var(--ink); cursor: pointer;
   }
-  .collection[aria-current="true"] { background: var(--bg-elev); border-color: var(--line); }
+  .collection:hover { background: var(--bg-muted); }
+  .collection[aria-current="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); color: var(--accent); }
   .collection small { display: block; color: var(--faint); }
   .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
-  .chip {
-    font-family: var(--mono); font-size: 12px; background: var(--bg-muted);
-    border-radius: 999px; padding: 4px 8px;
-  }
+  .chip { font-family: var(--mono); font-size: 11px; background: var(--bg-muted); border: 1px solid var(--line); 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-tables { display: flex; flex-direction: column; gap: 4px; max-height: 28rem; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
+  .sql-tables button { text-align: left; border: 0; border-radius: 8px; padding: 9px 10px; background: transparent; color: var(--muted); cursor: pointer; }
+  .sql-tables button:hover, .sql-tables button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
   .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; }
+  .table-shell { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-xs); }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
+  th { color: var(--faint); background: var(--bg-inset); font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: 0.045em; }
+  tbody tr:last-child td { border-bottom: 0; }
   tr.clickable { cursor: pointer; }
-  tr.clickable:hover { background: var(--bg-muted); }
+  tr.clickable:hover { background: var(--accent-soft); }
   pre, code, .mono { font-family: var(--mono); overflow-wrap: anywhere; }
   pre {
     margin: 0; white-space: pre-wrap; word-break: break-word;
-    background: var(--bg-inset); border-radius: 10px; padding: 12px; font-size: 12px;
-  }
-  .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
+    background: var(--bg-inset); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-size: 12px; line-height: 1.65;
+  }
+  .json-key { color: var(--code-key); }
+  .json-string { color: var(--code-string); }
+  .json-number { color: var(--code-number); }
+  .json-boolean { color: var(--code-boolean); }
+  .json-null { color: var(--code-null); font-style: italic; }
+  .json-inline { display: block; max-width: 44rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .json-view { position: relative; max-height: 26rem; overflow: auto; }
+  .json-editor { position: relative; min-height: 190px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-inset); overflow: hidden; }
+  .json-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+  .json-editor.invalid { border-color: var(--err); }
+  .json-editor pre, .json-editor textarea { margin: 0; padding: 12px; border: 0; border-radius: 0; min-height: 190px; width: 100%; font: 12px/1.65 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
+  .json-editor pre { position: absolute; inset: 0; pointer-events: none; background: transparent; }
+  .json-editor textarea { position: relative; z-index: 1; resize: vertical; background: transparent; color: transparent; caret-color: var(--ink); -webkit-text-fill-color: transparent; }
+  .json-editor textarea::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
+  .editor-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
+  .json-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 11px; }
+  .json-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+  .json-status.invalid { color: var(--err); }
+  .format-json { border: 0; padding: 3px 5px; background: transparent; color: var(--accent); font-size: 11px; font-weight: 650; cursor: pointer; }
+  .row-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 14px 0; }
   .banner {
-    display: none; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px;
-    background: var(--err-soft); color: var(--err);
-  }
-  .banner.show { display: block; }
-  .empty { color: var(--muted); padding: 24px 8px; }
+    display: none; position: sticky; top: calc(var(--header) + 12px); z-index: 15;
+    align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 12px 11px 14px;
+    border: 1px solid color-mix(in srgb, var(--err) 30%, var(--line)); border-radius: 10px;
+    background: var(--err-soft); color: var(--err); box-shadow: var(--shadow-sm); font-size: 13px;
+  }
+  .banner.show { display: flex; }
+  .banner span { flex: 1; }
+  .banner button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: currentColor; cursor: pointer; }
+  .banner button:hover { background: color-mix(in srgb, var(--err) 10%, transparent); }
+  .empty { color: var(--muted); padding: 34px 18px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-elev) 55%, transparent); }
   dialog {
-    border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--bg-elev);
-    color: var(--ink); width: min(640px, calc(100% - 24px)); max-width: calc(100vw - 24px); box-shadow: none;
-  }
-  dialog::backdrop { background: rgb(20 19 17 / 0.45); }
-  dialog form, .dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+    border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--bg-elev);
+    color: var(--ink); width: min(720px, calc(100% - 24px)); max-width: calc(100vw - 24px); box-shadow: var(--shadow-lg);
+  }
+  dialog[open] { animation: dialog-in 160ms ease-out; }
+  dialog::backdrop { background: rgb(12 14 20 / 0.58); backdrop-filter: blur(3px); }
+  dialog form, .dialog-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
+  .dialog-heading { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
+  .dialog-heading strong { font-size: 18px; letter-spacing: -0.02em; }
+  .dialog-heading span { color: var(--muted); font-size: 12px; }
   textarea {
     width: 100%; min-height: 180px; resize: vertical; border-radius: 10px;
     border: 1px solid var(--line); background: var(--bg-inset); padding: 10px;
     font-family: var(--mono); font-size: 12px;
   }
-  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
-  .badge { font-size: 11px; border-radius: 999px; padding: 2px 7px; background: var(--bg-muted); color: var(--muted); }
+  .dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; }
+  .dialog-actions .btn-danger { margin-right: auto; }
+  .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; background: var(--bg-muted); color: var(--muted); }
   .badge.ok { background: var(--ok-soft); color: var(--ok); }
   .badge.warn { background: var(--warn-soft); color: var(--warn); }
   .status-2 { color: var(--ok); }
   .status-4, .status-5, .status-0 { color: var(--err); }
   .stack { display: flex; flex-direction: column; gap: 12px; }
+  .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+  .form-grid .wide { grid-column: span 2; }
   .route {
-    display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center;
-    padding: 8px 0; border-bottom: 1px solid var(--line);
-  }
-  .method { font-family: var(--mono); font-size: 12px; font-weight: 700; }
+    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center;
+    padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elev);
+  }
+  .route:first-child { border-radius: var(--radius) var(--radius) 0 0; }
+  .route:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
+  .route-tools { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
+  .route-tools .field { flex: 1; }
+  .route-tools input { width: 100%; }
+  .route-count { padding-bottom: 10px; color: var(--faint); font-size: 12px; white-space: nowrap; }
+  #route-list { max-height: 34rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow-xs); }
+  .method { width: fit-content; font-family: var(--mono); font-size: 11px; font-weight: 750; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 4px 6px; }
+  @keyframes view-in { from { transform: translateY(3px); } to { transform: translateY(0); } }
+  @keyframes dialog-in { from { transform: translateY(8px) scale(0.99); } to { transform: translateY(0) scale(1); } }
+  @keyframes pulse { 50% { opacity: 0.45; } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
+  @media (forced-colors: active) { .json-editor pre { display: none; } .json-editor textarea { color: CanvasText; -webkit-text-fill-color: CanvasText; } }
   @media (max-width: 800px) {
+    :root { --header: 0px; }
     header.top {
-      align-items: stretch; flex-direction: column;
-      padding-top: max(10px, env(safe-area-inset-top));
+      position: relative; align-items: stretch; flex-direction: column;
+      padding: max(12px, env(safe-area-inset-top)) 14px 12px;
     }
     input, select, textarea { font-size: 16px; }
     .brand, .vendor, .controls { width: 100%; }
+    .brand { gap: 10px; }
+    .vendor { order: 2; border-radius: 9px; }
     label.field, label.field select, label.field input { flex: 1; min-width: 0; }
+    .sync-status { display: none; }
     /* 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. */
@@ -2098,14 +2407,23 @@ var renderAdminDocument = (service) => {
       align-content: start;
     }
     nav.side {
-      align-self: start; height: auto;
+      position: sticky; top: 0; z-index: 12; 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;
+      padding: 8px; box-shadow: var(--shadow-xs);
     }
-    nav.side button { white-space: nowrap; flex: none; }
+    .nav-label { display: none; }
+    nav.side button { width: auto; white-space: nowrap; flex: none; }
+    nav.side button[aria-current="true"]::before { inset: auto 9px -8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
     .split, .sql-layout { grid-template-columns: minmax(0, 1fr); }
-    main { padding: 14px; }
+    .form-grid { grid-template-columns: minmax(0, 1fr); }
+    .form-grid .wide { grid-column: auto; }
+    main { padding: 22px 14px 48px; }
+    .view-head { margin-bottom: 18px; }
+    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+    .card { padding: 14px; }
+    .card .v { font-size: 20px; }
+    .table-shell { border: 0; background: transparent; box-shadow: none; overflow: visible; }
     table, thead, tbody, tr, th, td { display: block; }
     thead { display: none; }
     tr {
@@ -2120,50 +2438,63 @@ var renderAdminDocument = (service) => {
     .route { grid-template-columns: 72px 1fr; }
     .route button { grid-column: 1 / -1; }
   }
+  @media (max-width: 460px) {
+    .controls label.field { min-width: calc(50% - 4px); }
+    .controls .icon-btn, .controls .btn { flex: 1; }
+    .grid { grid-template-columns: minmax(0, 1fr); }
+    .dialog-actions { flex-wrap: wrap; }
+    .dialog-actions button { flex: 1; }
+    .dialog-actions .btn-danger { flex-basis: 100%; margin-right: 0; }
+  }
 </style>
 </head>
 <body>
 <div class="app" data-service="${name}" data-mockingbird-admin>
   <header class="top">
     <div class="brand">
-      <div class="brand-id">
-        <strong>${name}</strong>
-        <span>Admin</span>
+      <div class="brand-lockup">
+        <div class="brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none"><path d="M5 17.5V7l7 5 7-5v10.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 15.5 12 18l4-2.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
+        <div class="brand-id">
+          <strong>${name}</strong>
+          <span>Mock admin</span>
+        </div>
       </div>
       <div class="vendor" id="vendor" hidden></div>
     </div>
     <div class="controls">
+      <span class="sync-status" id="sync-status" role="status" aria-live="polite">Ready</span>
       <label class="field">Namespace
         <select id="namespace" aria-label="Namespace"></select>
       </label>
       <label class="field">Admin key
         <input id="admin-key" type="password" autocomplete="off" spellcheck="false" aria-label="Admin key">
       </label>
-      <button class="icon-btn" id="theme" type="button" aria-label="Toggle color theme">Theme</button>
-      <button class="btn" id="refresh" type="button">Refresh</button>
+      <button class="icon-btn" id="theme" type="button" aria-label="Use dark theme" title="Use dark theme"></button>
+      <button class="btn" id="refresh" type="button"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M15.8 7.2A6.2 6.2 0 1 0 16 12" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M12.8 7.2h3v-3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>Refresh</button>
     </div>
   </header>
   <div class="layout">
     <nav class="side" id="nav" aria-label="Admin sections">
-      <button type="button" data-view="overview" aria-current="true">Overview</button>
-      <button type="button" data-view="state">State</button>
-      <button type="button" data-view="clock">Clock</button>
-      <button type="button" data-view="faults">Faults</button>
-      <button type="button" data-view="journal">Journal</button>
-      <button type="button" data-view="routes">Routes</button>
+      <span class="nav-label">Workspace</span>
+      <button type="button" data-view="overview" aria-current="true"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><rect x="2.5" y="2.5" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="11.5" y="2.5" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2.5" y="11.5" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="11.5" y="11.5" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg></span>Overview</button>
+      <button type="button" data-view="state"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><ellipse cx="10" cy="5" rx="6.5" ry="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 5v5c0 1.4 2.9 2.5 6.5 2.5s6.5-1.1 6.5-2.5V5M3.5 10v5c0 1.4 2.9 2.5 6.5 2.5s6.5-1.1 6.5-2.5v-5" stroke="currentColor" stroke-width="1.5"/></svg></span>State</button>
+      <button type="button" data-view="clock"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.5"/><path d="M10 5.8v4.6l3 1.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>Clock</button>
+      <button type="button" data-view="faults"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m11.2 2.8-6.5 9h5.1l-1 5.4 6.5-9h-5.1l1-5.4Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>Faults</button>
+      <button type="button" data-view="journal"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="M5 3.5h10a1.5 1.5 0 0 1 1.5 1.5v12l-2.2-1.4-2.2 1.4-2.1-1.4L7.8 17l-2.2-1.4L3.5 17V5A1.5 1.5 0 0 1 5 3.5Z" stroke="currentColor" stroke-width="1.5"/><path d="M6.7 7h6.6M6.7 10h6.6M6.7 13h3.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>Journal</button>
+      <button type="button" data-view="routes"><span class="nav-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="M6.5 4.5h7a2 2 0 0 1 2 2v7M13 11l2.5 2.5L18 11M13.5 15.5h-7a2 2 0 0 1-2-2v-7M7 9 4.5 6.5 2 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Routes</button>
     </nav>
     <main id="views">
-      <p class="banner" id="banner" role="alert"></p>
+      <div class="banner" id="banner" role="alert"><span id="banner-message"></span><button id="banner-dismiss" type="button" aria-label="Dismiss error">\xD7</button></div>
       <section class="view" id="view-overview">
-        <h2>Overview</h2>
-        <p class="lede">Health, clock, and the collections this namespace is holding.</p>
+        <div class="view-head"><div><h2>Overview</h2><p class="lede">Health, clock, and the collections this namespace is holding.</p></div></div>
         <div class="grid" id="overview-cards"></div>
         <h3>Recent requests</h3>
         <div id="overview-requests"></div>
       </section>
       <section class="view" id="view-state" hidden>
-        <h2>State</h2>
-        <p class="lede">Every collection in this namespace. Declared fields stay visible before any row exists; stored rows add whatever else they contain.</p>
+        <div class="view-head"><div><h2>State</h2><p class="lede">Inspect and edit every collection in this namespace.</p></div></div>
         <div class="split">
           <div id="collections"></div>
           <div>
@@ -2176,8 +2507,7 @@ var renderAdminDocument = (service) => {
         </div>
       </section>
       <section class="view" id="view-clock" hidden>
-        <h2>Clock</h2>
-        <p class="lede">The clock every timestamp in this mock reads.</p>
+        <div class="view-head"><div><h2>Clock</h2><p class="lede">Control the source of time used by every timestamp in this mock.</p></div></div>
         <div class="card" id="clock-readout"></div>
         <div class="row-actions">
           <button class="btn" type="button" data-advance="60000">+1m</button>
@@ -2196,21 +2526,22 @@ var renderAdminDocument = (service) => {
         </form>
       </section>
       <section class="view" id="view-faults" hidden>
-        <h2>Faults</h2>
-        <p class="lede">Inject a response, a delay, or a named preset. Rules apply to this namespace.</p>
+        <div class="view-head"><div><h2>Faults</h2><p class="lede">Test unhappy paths with a response, delay, or named preset scoped to this namespace.</p></div></div>
         <form id="fault-form" class="card stack">
-          <label class="field">Preset
-            <select id="fault-preset"><option value="">Custom rule</option></select>
-          </label>
-          <label class="field">Status
-            <input id="fault-status" inputmode="numeric" placeholder="503">
-          </label>
-          <label class="field">Path prefix
-            <input id="fault-path" placeholder="/v1">
-          </label>
-          <label class="field">Method
-            <input id="fault-method" placeholder="GET">
-          </label>
+          <div class="form-grid">
+            <label class="field wide">Preset
+              <select id="fault-preset"><option value="">Custom rule</option></select>
+            </label>
+            <label class="field">Status
+              <input id="fault-status" inputmode="numeric" placeholder="503">
+            </label>
+            <label class="field wide">Path prefix
+              <input id="fault-path" placeholder="/v1">
+            </label>
+            <label class="field">Method
+              <input id="fault-method" placeholder="GET">
+            </label>
+          </div>
           <div class="dialog-actions">
             <button class="btn-primary" type="submit">Add fault</button>
             <button class="btn-danger" id="fault-clear" type="button">Clear all</button>
@@ -2219,26 +2550,31 @@ var renderAdminDocument = (service) => {
         <div id="fault-list"></div>
       </section>
       <section class="view" id="view-journal" hidden>
-        <h2>Journal</h2>
-        <p class="lede">Requests this namespace has seen. Bodies are not stored.</p>
-        <div class="row-actions">
-          <button class="btn-danger" id="journal-clear" type="button">Clear journal</button>
-        </div>
+        <div class="view-head"><div><h2>Journal</h2><p class="lede">Requests this namespace has seen. Bodies are never stored.</p></div><button class="btn-danger" id="journal-clear" type="button">Clear journal</button></div>
         <div id="journal"></div>
       </section>
       <section class="view" id="view-routes" hidden>
-        <h2>Routes</h2>
-        <p class="lede">Shared controls, plus any routes this mock adds. Extra routes are how a bespoke workflow shows up beside the default UI.</p>
+        <div class="view-head"><div><h2>Routes</h2><p class="lede">Explore shared controls and service-specific admin endpoints.</p></div></div>
+        <div class="route-tools">
+          <label class="field">Filter routes
+            <input id="route-search" type="search" placeholder="Method, path, or extension" autocomplete="off">
+          </label>
+          <span class="route-count" id="route-count"></span>
+        </div>
         <div id="route-list"></div>
-        <form id="route-form" class="card stack">
+        <form id="route-form" class="card stack" style="margin-top: 18px">
           <strong id="route-title">Select a route</strong>
           <label class="field">JSON body
-            <textarea id="route-body" placeholder="{ }"></textarea>
+            <div class="json-editor" id="route-editor" hidden>
+              <pre aria-hidden="true"><code id="route-highlight"></code></pre>
+              <textarea id="route-body" placeholder="{ }" spellcheck="false" aria-describedby="route-json-status" disabled></textarea>
+            </div>
+            <span class="editor-meta" hidden><span class="json-status" id="route-json-status">Valid JSON</span><button class="format-json" type="button" data-format="route-body">Format JSON</button></span>
           </label>
           <div class="dialog-actions">
-            <button class="btn-primary" type="submit">Send</button>
+            <button class="btn-primary" id="route-send" type="submit" disabled>Send request</button>
           </div>
-          <pre id="route-result">Response will show here.</pre>
+          <pre class="json-view" id="route-result"><code>Response will show here.</code></pre>
         </form>
       </section>
     </main>
@@ -2246,12 +2582,16 @@ var renderAdminDocument = (service) => {
 </div>
 <dialog id="editor">
   <form method="dialog" id="editor-form">
-    <strong id="editor-title">Record</strong>
+    <div class="dialog-heading"><div><strong id="editor-title">Record</strong><br><span>Edit the ID and JSON value stored in this collection.</span></div></div>
     <label class="field">Id
       <input id="editor-id" required>
     </label>
     <label class="field">JSON value
-      <textarea id="editor-value"></textarea>
+      <div class="json-editor" id="record-editor">
+        <pre aria-hidden="true"><code id="editor-highlight"></code></pre>
+        <textarea id="editor-value" spellcheck="false" aria-describedby="editor-json-status"></textarea>
+      </div>
+      <span class="editor-meta"><span class="json-status" id="editor-json-status">Valid JSON</span><button class="format-json" type="button" data-format="editor-value">Format JSON</button></span>
     </label>
     <div class="dialog-actions">
       <button class="btn-danger" id="editor-delete" type="button" value="delete">Delete</button>
@@ -2293,8 +2633,8 @@ var describeExtension = (extension) => {
     ...extension.script !== void 0 ? { script: extension.script } : {}
   };
 };
-var adminUiRoutes = (service, ui) => {
-  const shell = () => renderAdminDocument(service);
+var adminUiRoutes = (service, ui, adminPrefix = ADMIN_PREFIX) => {
+  const shell = () => renderAdminDocument(service, adminPrefix);
   const document2 = () => ui?.render ? ui.render({ service, defaultHtml: shell }) : shell();
   return {
     "GET /ui": () => htmlResponse(document2()),
@@ -2625,7 +2965,7 @@ var PAGE_DEFAULT = 50;
 var PAGE_MAX = 200;
 var json3 = (status, body) => new Response(JSON.stringify(body), {
   status,
-  headers: { "content-type": "application/json" }
+  headers: { "content-type": "application/json; charset=utf-8" }
 });
 var adminError2 = (status, message) => json3(status, { error: { type: "mockingbird_admin", message } });
 var isRecord3 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -2878,6 +3218,7 @@ var sqlRoutes = (engine) => ({
   }
 });
 var createEngineAdmin = (options) => {
+  const adminPrefix = resolveAdminPrefix(options.adminPrefix);
   const engines = /* @__PURE__ */ new Map();
   const engine = (namespace) => {
     const existing = engines.get(namespace);
@@ -2892,7 +3233,7 @@ var createEngineAdmin = (options) => {
     ...credentialRoutes(createCredentialRegistry()),
     ...stateRoutes(engine),
     ...sqlRoutes(engine),
-    ...adminUiRoutes(options.name, { extensions: [SQL_ADMIN_EXTENSION] })
+    ...adminUiRoutes(options.name, { extensions: [SQL_ADMIN_EXTENSION] }, adminPrefix)
   };
   const startedAt = Date.now();
   const plane = createControlPlane({
@@ -2923,6 +3264,7 @@ var createEngineAdmin = (options) => {
     },
     describe: () => options.dialect === void 0 ? {} : { dialect: options.dialect },
     routes,
+    adminPrefix,
     adminKey: options.adminKey
   });
   return {
@@ -26762,6 +27104,7 @@ function createAdmin(options = {}) {
   return createEngineAdmin({
     name: "postgres",
     dialect: "postgres",
+    ...options.adminPrefix !== void 0 ? { adminPrefix: options.adminPrefix } : {},
     ...options.adminKey !== void 0 ? { adminKey: options.adminKey } : {},
     open(namespace) {
       if (namespace === "default" && seeded) return adapt(seeded);