@crvouga/mockingbird-service-plane 1.7.1 → 2.0.0

package/dist/{chunk-NVLTLMDI.js → chunk-C6XLQ2US.js}

@@ -110,13 +110,31 @@ var Collection = class {
 };
 
 // ../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 matchNamespacePath = (path, prefix) => /^\/ns\/([^/]+)(\/.*)?$/.exec(isAdminPath(path, prefix) ? path.slice(prefix.length) : "");
+var assertAdminPrefixAvailable = (prefix, paths) => {
+  const reserved = prefix.split("/").slice(1);
+  for (const path of paths) {
+    const segments = path.split("/").slice(1);
+    if (segments.length < reserved.length || /^\{[^}]+\}$/.test(segments[0] ?? ""))
+      continue;
+    if (reserved.every((part, i) => segments[i] === part || /^\{[^}]+\}$/.test(segments[i] ?? ""))) {
+      throw new Error(`vendor route ${path} collides with adminPrefix ${prefix}; choose a different adminPrefix`);
+    }
+  }
+};
 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 = {
@@ -168,11 +186,25 @@ var readJson = async (request) => {
 };
 var isRecord = (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()
@@ -183,29 +215,30 @@ var createControlPlane = (context) => {
       return json(200, { status: "ok", reset: target === "*" ? context.namespaces() : [target] });
     },
     "GET /namespaces": () => json(200, { default: context.defaultNamespace, namespaces: context.namespaces() }),
-    "GET /clock": () => json(200, context.clock.state()),
-    "POST /clock": ({ body }) => {
+    "GET /clock": ({ namespace }) => json(200, (context.namespaceClock?.(namespace) ?? context.clock).state()),
+    "POST /clock": ({ body, namespace }) => {
+      const clock = context.namespaceClock?.(namespace) ?? context.clock;
       if (!isRecord(body))
         return adminError(400, "expected a JSON object");
       if (body.reset === true)
-        context.clock.reset();
+        clock.reset();
       if (body.freeze === true)
-        context.clock.freeze();
+        clock.freeze();
       if (body.set !== void 0) {
         const instant = parseInstant(body.set);
         if (instant === void 0)
           return adminError(400, "set: expected epoch ms or ISO-8601");
-        context.clock.set(instant);
+        clock.set(instant);
       }
       if (body.advance !== void 0) {
         const delta = parseDuration(body.advance);
         if (delta === void 0)
           return adminError(400, 'advance: expected ms or "15m"-style');
-        context.clock.advance(delta);
+        clock.advance(delta);
       }
       if (body.freeze === false)
-        context.clock.unfreeze();
-      return json(200, context.clock.state());
+        clock.unfreeze();
+      return json(200, clock.state());
     },
     "GET /faults": () => json(200, { faults: context.faults.list() }),
     "POST /faults": ({ body, namespace }) => {
@@ -338,7 +371,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 };
   });
@@ -346,21 +386,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}`);
@@ -368,7 +400,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;
@@ -377,15 +414,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`);
     }
   };
 };
@@ -467,7 +507,33 @@ var faultResponse = (rule) => {
 };
 var createFaultRegistry = (rng = createRng(0), sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))) => {
   const entries = [];
+  let isolated = false;
+  const scopedRngs = /* @__PURE__ */ new Map();
+  const random = (namespace) => {
+    if (!isolated || namespace === "default")
+      return rng;
+    let scoped = scopedRngs.get(namespace);
+    if (!scoped) {
+      scoped = createRng(rng.seed);
+      scopedRngs.set(namespace, scoped);
+    }
+    return scoped;
+  };
   return {
+    isolateNamespaces() {
+      isolated = true;
+    },
+    snapshot(namespace) {
+      return {
+        rules: structuredClone(entries.map((entry, position) => ({
+          ...entry.rule,
+          remaining: entry.remaining,
+          hits: entry.hits,
+          position
+        })).filter((entry) => entry.namespace === namespace)),
+        rngState: random(namespace).state()
+      };
+    },
     add(rule) {
       const existing = entries.findIndex((e) => e.rule.id === rule.id);
       const entry = { rule, remaining: rule.count ?? null, hits: 0 };
@@ -487,6 +553,16 @@ var createFaultRegistry = (rng = createRng(0), sleep = (ms) => new Promise((reso
     },
     clear() {
       entries.length = 0;
+      rng.reset();
+      scopedRngs.clear();
+    },
+    restore(namespace, state) {
+      for (let i = entries.length - 1; i >= 0; i--)
+        if (entries[i]?.rule.namespace === namespace)
+          entries.splice(i, 1);
+      for (const { remaining, hits, position, ...rule } of state.rules)
+        entries.splice(Math.min(position, entries.length), 0, { rule, remaining, hits });
+      random(namespace).setState(state.rngState);
     },
     async take(candidate) {
       const hits = [];
@@ -496,7 +572,7 @@ var createFaultRegistry = (rng = createRng(0), sleep = (ms) => new Promise((reso
         if (!matches(entry.rule, candidate))
           continue;
         const rate = entry.rule.rate ?? 1;
-        if (rng.next() >= rate)
+        if (random(candidate.namespace).next() >= rate)
           continue;
         entry.hits++;
         if (entry.remaining !== null)
@@ -1105,7 +1181,8 @@ var annotateResponse = (response, extra) => {
 var responseNotes = (response) => notes.get(response);
 
 // ../core/dist/metrics.js
-var createMetrics = () => {
+var createMetrics = (partition = true) => {
+  const namespaces = /* @__PURE__ */ new Map();
   let requests = 0;
   let faults = 0;
   let totalDurationMs = 0;
@@ -1113,6 +1190,14 @@ var createMetrics = () => {
   const unmatched = /* @__PURE__ */ new Map();
   return {
     record(entry) {
+      if (partition) {
+        let scoped = namespaces.get(entry.namespace);
+        if (!scoped) {
+          scoped = createMetrics(false);
+          namespaces.set(entry.namespace, scoped);
+        }
+        scoped.record(entry);
+      }
       requests++;
       totalDurationMs += entry.durationMs;
       if (entry.faultId !== void 0)
@@ -1124,7 +1209,7 @@ var createMetrics = () => {
         unmatched.set(route, (unmatched.get(route) ?? 0) + 1);
       }
     },
-    report: () => ({
+    report: (namespace) => namespace !== void 0 ? (namespaces.get(namespace) ?? createMetrics(false)).report() : {
       requests,
       byOperation: Object.fromEntries([...byOperation].sort(([a], [b]) => a.localeCompare(b))),
       unmatched: [...unmatched].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([route, count]) => {
@@ -1133,8 +1218,13 @@ var createMetrics = () => {
       }),
       faults,
       totalDurationMs
-    }),
-    reset() {
+    },
+    reset(namespace) {
+      if (namespace !== void 0) {
+        namespaces.delete(namespace);
+        return;
+      }
+      namespaces.clear();
       requests = 0;
       faults = 0;
       totalDurationMs = 0;
@@ -1747,6 +1837,34 @@ dialog:not([open]) {
 function isRecord2(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")
@@ -2108,14 +2226,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);
@@ -2126,18 +2246,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 !== "")
@@ -2181,16 +2304,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";
@@ -2209,6 +2337,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;
@@ -2223,7 +2352,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>';
@@ -2233,16 +2362,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()))
@@ -2362,7 +2497,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")
@@ -2379,7 +2514,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) },
@@ -2466,26 +2601,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 (!isRecord2(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 (!isRecord2(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,
@@ -2494,19 +2649,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");
@@ -2527,6 +2713,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))
@@ -2599,6 +2844,7 @@ function bootAdmin(config) {
     } else {
       editorValue.value = "{\n  \n}";
     }
+    syncRecordEditor();
     editor.showModal();
   }
   el("new-record", HTMLButtonElement).addEventListener("click", () => {
@@ -2628,10 +2874,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))
@@ -2677,10 +2923,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;
@@ -2694,9 +2940,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 () => {
@@ -2718,7 +2970,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);
   });
@@ -2836,11 +3089,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 = [
   isRecord2,
+  highlightJsonText,
   mountAdminBrand,
   startAdminBrand,
   faultPresetList,
@@ -2863,6 +3118,7 @@ ${entry}(${payload});
 var defineMock = (runtime) => runtime;
 var STANDARD_ADMIN_ROUTES = [
   "GET /",
+  "GET /health",
   "POST /reset",
   "GET /namespaces",
   "GET /clock",
@@ -2942,11 +3198,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
@@ -2963,75 +3219,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. */
@@ -3049,13 +3329,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%;
   }
@@ -3063,12 +3347,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. */
@@ -3080,12 +3373,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 {
@@ -3102,12 +3400,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,
@@ -3123,93 +3429,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. */
@@ -3219,14 +3591,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 {
@@ -3241,50 +3622,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>
@@ -3297,8 +3691,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>
@@ -3317,21 +3710,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>
@@ -3340,26 +3734,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>
@@ -3367,12 +3766,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>
@@ -3414,8 +3817,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 document3 = () => ui?.render ? ui.render({ service, defaultHtml: shell }) : shell();
   return {
     "GET /ui": () => htmlResponse(document3()),
@@ -4106,10 +4509,13 @@ var stateAdminRoutes = (routes) => {
 };
 
 // ../core/dist/version.js
-var PACKAGE_VERSION = true ? "1.7.1" : UNRELEASED_VERSION;
+var PACKAGE_VERSION = true ? "2.0.0" : UNRELEASED_VERSION;
 
 // ../core/dist/webhooks.js
-var json4 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+var json4 = (status, body) => new Response(JSON.stringify(body), {
+  status,
+  headers: { "content-type": "application/json; charset=utf-8" }
+});
 var adminError3 = (status, message) => json4(status, { error: { type: "mockingbird_admin", message } });
 var isRecord5 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var parseEndpoint = (value) => {
@@ -4217,7 +4623,6 @@ var AT_HEADER = "x-mockingbird-at";
 var CHECKPOINT_HEADER = "x-mockingbird-checkpoint";
 var DEFAULT_NAMESPACE = "default";
 var NAMESPACE_PATTERN = /^[A-Za-z0-9_.-]{1,64}$/;
-var PATH_PREFIX = /^\/ns\/([^/]+)(\/.*)?$/;
 var BRANCH_PATTERN2 = /^[A-Za-z0-9_.-]{1,64}$/;
 var MUTATING_METHODS = /* @__PURE__ */ new Set(["POST", "PUT", "PATCH", "DELETE"]);
 var effects = /* @__PURE__ */ new WeakMap();
@@ -4258,6 +4663,22 @@ var operationMatcher = (document3) => {
   return (request, path) => matchers.find((m) => m.method === request.method && m.pattern.test(path))?.operationId;
 };
 var createRuntime = (options) => {
+  const adminPrefix = resolveAdminPrefix(options.adminPrefix);
+  const internalPaths = Object.entries(options.document?.paths ?? {}).filter(([, item]) => item["x-mockingbird-internal"] === true).map(([path]) => path);
+  for (const path of internalPaths) {
+    if (!path.startsWith(`${ADMIN_PREFIX}/blobs/`))
+      throw new Error(`internal transport ${path} must live under ${ADMIN_PREFIX}/blobs/`);
+  }
+  assertAdminPrefixAvailable(adminPrefix, Object.keys(options.document?.paths ?? {}).filter((path) => !internalPaths.includes(path)));
+  const internalMatch = (path) => {
+    for (const pattern of internalPaths) {
+      const actual = path.split("/");
+      const expected = pattern.split("/");
+      if (actual.length === expected.length && expected.every((part, i) => part.startsWith("{") || part === actual[i]))
+        return pattern;
+    }
+    return void 0;
+  };
   assertAdminUi(options.adminUi);
   const sqlite = bootSqlite(options.sqlite);
   const clock = options.clock ?? createClock();
@@ -4272,6 +4693,20 @@ var createRuntime = (options) => {
   const instances = /* @__PURE__ */ new Map();
   const publicNamespaces = /* @__PURE__ */ new Set();
   const branchRngs = /* @__PURE__ */ new Map();
+  const namespaceClocks = /* @__PURE__ */ new Map();
+  const namespaceForStorage = /* @__PURE__ */ new Map();
+  let isolatedNamespaces = false;
+  const namespaceClock = (name = DEFAULT_NAMESPACE) => {
+    if (!isolatedNamespaces || name === DEFAULT_NAMESPACE)
+      return clock;
+    let found = namespaceClocks.get(name);
+    if (!found) {
+      found = createClock();
+      namespaceClocks.set(name, found);
+    }
+    return found;
+  };
+  const fleetPoints = /* @__PURE__ */ new WeakMap();
   const timelines = /* @__PURE__ */ new Map();
   const branchStorage = /* @__PURE__ */ new Map();
   const captured = /* @__PURE__ */ new Map();
@@ -4285,17 +4720,22 @@ var createRuntime = (options) => {
     if (!NAMESPACE_PATTERN.test(key) || !NAMESPACE_PATTERN.test(publicNamespace)) {
       throw new RangeError(`namespace must match ${NAMESPACE_PATTERN}: ${JSON.stringify(publicNamespace)}`);
     }
+    const createdContextRng = isolatedRng ?? (isolatedNamespaces && key !== DEFAULT_NAMESPACE ? createRng(options.seed ?? 0) : rng);
     const created = options.create({
       namespace: storageNamespace(key),
       publicNamespace,
+      adminPrefix,
       sqlite,
-      clock,
-      rng: isolatedRng ?? rng
+      clock: namespaceClock(publicNamespace),
+      rng: createdContextRng
     });
     instances.set(key, created);
+    namespaceForStorage.set(key, publicNamespace);
     publicNamespaces.add(publicNamespace);
     if (isolatedRng)
       branchRngs.set(key, isolatedRng);
+    else if (isolatedNamespaces && key !== DEFAULT_NAMESPACE)
+      branchRngs.set(key, createdContextRng);
     return created;
   };
   const instance = (name = DEFAULT_NAMESPACE) => instanceFor(name);
@@ -4313,7 +4753,7 @@ var createRuntime = (options) => {
     captured.set(storage, snapshot2);
     return Object.freeze({
       snapshot: snapshot2,
-      clock: Object.freeze(clock.state()),
+      clock: Object.freeze(namespaceClock(namespaceForStorage.get(storage) ?? storage).state()),
       rngState: (branchRngs.get(storage) ?? rng).state()
     });
   };
@@ -4323,7 +4763,7 @@ var createRuntime = (options) => {
       return found;
     instance(name);
     found = new Timeline({
-      now: clock.now,
+      now: namespaceClock(name).now,
       ...options.maxCheckpoints !== void 0 ? { maxCheckpoints: options.maxCheckpoints } : {}
     });
     found.commit(capture(name));
@@ -4350,12 +4790,13 @@ var createRuntime = (options) => {
         const point = history2.checkout("main", at);
         restoreNamespace(sqlite, storageNamespace(namespace), point.value.snapshot);
         captured.set(namespace, point.value.snapshot);
-        rng.setState(point.value.rngState);
-        clock.set(point.value.clock.now);
+        (branchRngs.get(namespace) ?? rng).setState(point.value.rngState);
+        const selectedClock = namespaceClock(namespace);
+        selectedClock.set(point.value.clock.now);
         if (point.value.clock.frozen)
-          clock.freeze();
+          selectedClock.freeze();
         else
-          clock.unfreeze();
+          selectedClock.unfreeze();
       }
       return namespace;
     }
@@ -4413,11 +4854,12 @@ var createRuntime = (options) => {
     const storage = ensureBranch(namespace, branchName);
     restoreNamespace(sqlite, storageNamespace(storage), point.value.snapshot);
     captured.set(storage, point.value.snapshot);
-    clock.set(point.value.clock.now);
+    const selectedClock = namespaceClock(namespace);
+    selectedClock.set(point.value.clock.now);
     if (point.value.clock.frozen)
-      clock.freeze();
+      selectedClock.freeze();
     else
-      clock.unfreeze();
+      selectedClock.unfreeze();
     (branchRngs.get(storage) ?? rng).setState(point.value.rngState);
   };
   const reset = async (name = DEFAULT_NAMESPACE) => {
@@ -4425,10 +4867,21 @@ var createRuntime = (options) => {
       options.webhooks?.clear();
       for (const each of instances.values())
         await each.reset();
+      for (const each of branchRngs.values())
+        each.reset();
       timelines.clear();
+      for (const storage of branchStorage.values()) {
+        instances.delete(storage);
+        branchRngs.delete(storage);
+        namespaceForStorage.delete(storage);
+      }
       branchStorage.clear();
-      branchRngs.clear();
       captured.clear();
+      faults.clear();
+      clock.reset();
+      rng.reset();
+      for (const each of namespaceClocks.values())
+        each.reset();
       return;
     }
     options.webhooks?.clear(name);
@@ -4446,11 +4899,18 @@ var createRuntime = (options) => {
       else
         clearNamespace(sqlite, storageNamespace(storage));
       branchStorage.delete(mapping);
+      instances.delete(storage);
+      namespaceForStorage.delete(storage);
       branchRngs.delete(storage);
       captured.delete(storage);
     }
     timelines.delete(name);
     captured.delete(name);
+    faults.restore(name, { rules: [], rngState: createRng(options.seed ?? 0).state() });
+    namespaceClock(name).reset();
+    (branchRngs.get(name) ?? rng).reset();
+    journal.clear(name);
+    metrics.reset(name);
   };
   const snapshot = (name = DEFAULT_NAMESPACE) => {
     return checkpoint(name, "main").value.snapshot;
@@ -4488,6 +4948,53 @@ var createRuntime = (options) => {
     rng,
     credentials,
     webhooks: options.webhooks,
+    isolateNamespaces() {
+      if (publicNamespaces.size > 1)
+        throw new Error("enable namespace isolation before creating named namespaces");
+      isolatedNamespaces = true;
+      faults.isolateNamespaces();
+    },
+    namespaceClock,
+    namespaceOf(request) {
+      const url = new URL(request.url);
+      const prefixed = matchNamespacePath(url.pathname, adminPrefix);
+      const selected = request.headers.get(NAMESPACE_HEADER) ?? (prefixed ? decodeURIComponent(prefixed[1]) : void 0);
+      const path = prefixed ? prefixed[2] ?? "/" : url.pathname;
+      if (isAdminPath(path, adminPrefix))
+        return url.searchParams.get("namespace") ?? selected ?? DEFAULT_NAMESPACE;
+      if (selected !== void 0)
+        return selected;
+      const credential = options.credential?.(request);
+      return (credential !== void 0 ? credentials.get(credential) : void 0) ?? DEFAULT_NAMESPACE;
+    },
+    fleetSnapshot(namespace) {
+      instance(namespace);
+      const handle = {};
+      fleetPoints.set(handle, {
+        namespace,
+        state: capture(namespace),
+        faults: faults.snapshot(namespace),
+        webhooks: options.webhooks?.snapshot(namespace)
+      });
+      return handle;
+    },
+    fleetRestore(handle, namespace) {
+      const point = typeof handle === "object" && handle !== null ? fleetPoints.get(handle) : void 0;
+      if (!point || point.namespace !== namespace)
+        throw new Error("invalid fleet checkpoint");
+      restoreNamespace(sqlite, storageNamespace(namespace), point.state.snapshot);
+      captured.set(namespace, point.state.snapshot);
+      const selectedClock = namespaceClock(namespace);
+      selectedClock.freeze();
+      selectedClock.set(point.state.clock.now);
+      if (!point.state.clock.frozen)
+        selectedClock.unfreeze();
+      (branchRngs.get(namespace) ?? rng).setState(point.state.rngState);
+      faults.restore(namespace, point.faults);
+      if (point.webhooks !== void 0)
+        options.webhooks?.restore(namespace, point.webhooks);
+      timelines.delete(namespace);
+    },
     applyPreset: (name, namespace = DEFAULT_NAMESPACE, overrides = {}) => {
       const preset = options.presets?.[name];
       if (!preset)
@@ -4519,7 +5026,7 @@ var createRuntime = (options) => {
     state: (namespace = DEFAULT_NAMESPACE) => inspectState(stateScope(namespace)),
     fetch: async (incoming) => {
       let request = incoming;
-      const prefixed = PATH_PREFIX.exec(new URL(request.url).pathname);
+      const prefixed = matchNamespacePath(new URL(request.url).pathname, adminPrefix);
       if (prefixed) {
         const url2 = new URL(request.url);
         url2.pathname = prefixed[2] ?? "/";
@@ -4535,7 +5042,15 @@ var createRuntime = (options) => {
           signal: request.signal
         });
       }
-      let namespace = control.namespaceOf(request);
+      const internalUrl = new URL(request.url);
+      const internalPath = isAdminPath(internalUrl.pathname, adminPrefix) ? `${ADMIN_PREFIX}${internalUrl.pathname.slice(adminPrefix.length)}` : "";
+      const internal = internalMatch(internalPath);
+      const obsoleteInternalPath = adminPrefix !== ADMIN_PREFIX && internalMatch(internalUrl.pathname) && !internal;
+      if (internal) {
+        internalUrl.pathname = internalPath;
+        request = new Request(internalUrl, request);
+      }
+      let namespace = internal ? internalUrl.searchParams.get("namespace") ?? control.namespaceOf(request) : control.namespaceOf(request);
       if (!request.headers.has(NAMESPACE_HEADER) && options.credential) {
         const credential = options.credential(request);
         const mapped = credential !== void 0 ? credentials.get(credential) : void 0;
@@ -4555,7 +5070,9 @@ var createRuntime = (options) => {
           return copy;
         }
       };
-      const handled = await control.handle(request);
+      if (obsoleteInternalPath)
+        return stamp(adminFail(404, "internal transport is only available under adminPrefix"));
+      const handled = internal ? void 0 : await control.handle(request);
       if (handled)
         return stamp(handled);
       const started = monotonicNow();
@@ -4596,7 +5113,7 @@ var createRuntime = (options) => {
             type: "mockingbird_admin",
             message: `${NAMESPACE_HEADER} must match ${NAMESPACE_PATTERN}`
           }
-        }), { status: 400, headers: { "content-type": "application/json" } }));
+        }), { status: 400, headers: { "content-type": "application/json; charset=utf-8" } }));
       }
       if (!BRANCH_PATTERN2.test(selectedBranch)) {
         log(400);
@@ -4663,6 +5180,7 @@ var createRuntime = (options) => {
     startedAt: wallNow(),
     wallNow,
     clock,
+    namespaceClock,
     faults,
     metrics,
     journal,
@@ -4712,15 +5230,16 @@ var createRuntime = (options) => {
       ...options.admin?.(runtime) ?? {},
       // Shell routes win a colliding key. Fault presets are one of them: the admin page
       // maps `presets`, and a service route must not replace that list with a record.
-      ...options.presets ? presetRoutes(options.presets, runtime) : {},
+      ...options.presets ? presetRoutes(options.presets, runtime, adminPrefix) : {},
       ...stateAdminRoutes({
         open: stateScope,
         afterWrite: (namespace) => {
           checkpoint(namespace, "main");
         }
       }),
-      ...adminUiRoutes(options.name, options.adminUi)
+      ...adminUiRoutes(options.name, options.adminUi, adminPrefix)
     },
+    adminPrefix,
     adminKey: options.adminKey
   });
   return defineMock(runtime);
@@ -4734,7 +5253,10 @@ var mutableResponse = (response) => {
     return new Response(response.body, response);
   }
 };
-var adminJson = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+var adminJson = (status, body) => new Response(JSON.stringify(body), {
+  status,
+  headers: { "content-type": "application/json; charset=utf-8" }
+});
 var adminFail = (status, message) => adminJson(status, { error: { type: "mockingbird_admin", message } });
 var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var credentialRoutes = (registry) => ({
@@ -4786,7 +5308,7 @@ var credentialRoutes = (registry) => ({
     return adminJson(200, { status: "ok" });
   }
 });
-var presetRoutes = (presets, runtime) => ({
+var presetRoutes = (presets, runtime, adminPrefix) => ({
   "GET /faults/presets": () => {
     const body = {
       presets: Object.entries(presets).map(([name, preset]) => ({ name, ...preset }))
@@ -4796,7 +5318,7 @@ var presetRoutes = (presets, runtime) => ({
   "POST /faults/presets/:name": ({ params, body, namespace }) => {
     const name = params.name;
     if (!presets[name])
-      return adminFail(404, `no fault preset ${name}; GET /__admin/faults/presets`);
+      return adminFail(404, `no fault preset ${name}; GET ${adminPrefix}/faults/presets`);
     const overrides = isObject(body) ? body : {};
     return adminJson(201, { preset: name, rules: runtime.applyPreset(name, namespace, overrides) });
   }
@@ -5044,6 +5566,7 @@ var createRuntime2 = (options = {}) => createRuntime({
   ...options.sqlite ? { sqlite: options.sqlite } : {},
   ...options.clock ? { clock: options.clock } : {},
   ...options.seed !== void 0 ? { seed: options.seed } : {},
+  ...options.adminPrefix !== void 0 ? { adminPrefix: options.adminPrefix } : {},
   ...options.adminKey !== void 0 ? { adminKey: options.adminKey } : {},
   ...options.onLog ? { onLog: options.onLog } : {},
   credential: apiKeyCredential,
@@ -5465,6 +5988,9 @@ var PlaneAPI = class {
 };
 
 export {
+  createClock,
+  resolveAdminPrefix,
+  parseDuration,
   document2 as document,
   operationIds,
   supportedOperationIds,
@@ -5476,4 +6002,4 @@ export {
   apiKeyCredential,
   PlaneAPI
 };
-//# sourceMappingURL=chunk-NVLTLMDI.js.map
+//# sourceMappingURL=chunk-C6XLQ2US.js.map