@crvouga/mockingbird-service-plane 1.3.0 → 1.4.0

package/dist/{chunk-Z2PXMJXO.js → chunk-CCLSLHDJ.js}

@@ -38,30 +38,30 @@ var createClock = (source = Date.now) => {
 var Collection = class {
   sqlite;
   namespace;
-  name;
-  constructor(sqlite, namespace, name) {
+  collectionName;
+  constructor(sqlite, namespace, collectionName) {
     this.sqlite = sqlite;
     this.namespace = namespace;
-    this.name = name;
+    this.collectionName = collectionName;
   }
   bumpCollectionSeq() {
-    const row = this.sqlite.prepare("SELECT value FROM mockingbird_sequences WHERE namespace = ? AND name = ? AND kind = 'collection'").get(this.namespace, this.name);
+    const row = this.sqlite.prepare("SELECT value FROM mockingbird_sequences WHERE namespace = ? AND name = ? AND kind = 'collection'").get(this.namespace, this.collectionName);
     const next = (row?.value ?? 0) + 1;
     this.sqlite.prepare(`INSERT INTO mockingbird_sequences (namespace, name, kind, value) VALUES (?, ?, 'collection', ?)
-         ON CONFLICT(namespace, name, kind) DO UPDATE SET value = excluded.value`).run(this.namespace, this.name, next);
+         ON CONFLICT(namespace, name, kind) DO UPDATE SET value = excluded.value`).run(this.namespace, this.collectionName, next);
     return next;
   }
   nextSequence() {
     return this.sqlite.transaction(() => this.bumpCollectionSeq());
   }
   get(id) {
-    const row = this.sqlite.prepare("SELECT value FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.name, id);
+    const row = this.sqlite.prepare("SELECT value FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.collectionName, id);
     if (!row)
       return void 0;
     return JSON.parse(row.value).value;
   }
   has(id) {
-    const row = this.sqlite.prepare("SELECT 1 AS ok FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.name, id);
+    const row = this.sqlite.prepare("SELECT 1 AS ok FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.collectionName, id);
     return row !== void 0;
   }
   /** Insert a new record, assigning it the next sequence number. */
@@ -71,32 +71,32 @@ var Collection = class {
       const stored = { seq, value };
       this.sqlite.prepare(`INSERT INTO mockingbird_records (namespace, collection, id, seq, value)
            VALUES (?, ?, ?, ?, ?)
-           ON CONFLICT(namespace, collection, id) DO UPDATE SET seq = excluded.seq, value = excluded.value`).run(this.namespace, this.name, id, seq, JSON.stringify(stored));
+           ON CONFLICT(namespace, collection, id) DO UPDATE SET seq = excluded.seq, value = excluded.value`).run(this.namespace, this.collectionName, id, seq, JSON.stringify(stored));
       return stored;
     });
   }
   /** Replace an existing record's value, keeping its position. */
   update(id, value) {
     return this.sqlite.transaction(() => {
-      const row = this.sqlite.prepare("SELECT seq, value FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.name, id);
+      const row = this.sqlite.prepare("SELECT seq, value FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").get(this.namespace, this.collectionName, id);
       if (!row)
         return void 0;
       const stored = { seq: row.seq, value };
-      this.sqlite.prepare("UPDATE mockingbird_records SET value = ? WHERE namespace = ? AND collection = ? AND id = ?").run(JSON.stringify(stored), this.namespace, this.name, id);
+      this.sqlite.prepare("UPDATE mockingbird_records SET value = ? WHERE namespace = ? AND collection = ? AND id = ?").run(JSON.stringify(stored), this.namespace, this.collectionName, id);
       return stored;
     });
   }
   delete(id) {
-    const result = this.sqlite.prepare("DELETE FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").run(this.namespace, this.name, id);
+    const result = this.sqlite.prepare("DELETE FROM mockingbird_records WHERE namespace = ? AND collection = ? AND id = ?").run(this.namespace, this.collectionName, id);
     return result.changes > 0;
   }
   /** How many records the collection holds, without reading them. */
   count() {
-    const row = this.sqlite.prepare("SELECT COUNT(*) AS n FROM mockingbird_records WHERE namespace = ? AND collection = ?").get(this.namespace, this.name);
+    const row = this.sqlite.prepare("SELECT COUNT(*) AS n FROM mockingbird_records WHERE namespace = ? AND collection = ?").get(this.namespace, this.collectionName);
     return Number(row?.n ?? 0);
   }
   list(options = {}) {
-    const rows = this.sqlite.prepare("SELECT id, seq, value FROM mockingbird_records WHERE namespace = ? AND collection = ?").all(this.namespace, this.name);
+    const rows = this.sqlite.prepare("SELECT id, seq, value FROM mockingbird_records WHERE namespace = ? AND collection = ?").all(this.namespace, this.collectionName);
     const out = [];
     for (const row of rows) {
       const stored = JSON.parse(row.value);
@@ -353,16 +353,18 @@ var createControlPlane = (context) => {
           uptimeMs: context.wallNow() - context.startedAt,
           clock: context.clock.state(),
           namespaces: context.namespaces().length,
+          adminUi: `${ADMIN_PREFIX}/ui`,
           ...context.describe()
         });
       }
       if (url.pathname !== ADMIN_PREFIX && !url.pathname.startsWith(`${ADMIN_PREFIX}/`)) {
         return void 0;
       }
-      if (context.adminKey !== void 0 && request.headers.get(ADMIN_KEY_HEADER) !== context.adminKey) {
+      const path = url.pathname.slice(ADMIN_PREFIX.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}`);
       }
-      const path = url.pathname.slice(ADMIN_PREFIX.length) || "/";
       for (const route of routes) {
         if (route.method !== request.method)
           continue;
@@ -692,64 +694,64 @@ var graphemeLength = (value) => [...value].length;
 var validateValue = (document2, schema, value, path = []) => {
   const errors = [];
   const s = resolveSchema(document2, schema);
-  const fail2 = (message) => errors.push({ path, message });
+  const fail3 = (message) => errors.push({ path, message });
   const actual = jsonTypeOf(value);
   if (actual === "undefined") {
-    fail2("value is undefined");
+    fail3("value is undefined");
     return errors;
   }
   const types = schemaTypes(s);
   if (types.length > 0) {
     const ok2 = types.some((t) => t === actual || t === "number" && actual === "integer");
     if (!ok2) {
-      fail2(`expected type ${types.join("|")}, got ${actual}`);
+      fail3(`expected type ${types.join("|")}, got ${actual}`);
       return errors;
     }
   }
   if (s.enum && !(value === null && types.includes("null")) && !s.enum.some((candidate) => deepEqual(candidate, value))) {
-    fail2("value not in enum");
+    fail3("value not in enum");
   }
   if (s.const !== void 0 && !deepEqual(s.const, value))
-    fail2("value does not equal const");
+    fail3("value does not equal const");
   if (typeof value === "string") {
     const length = graphemeLength(value);
     if (s.minLength !== void 0 && length < s.minLength)
-      fail2(`length ${length} < minLength ${s.minLength}`);
+      fail3(`length ${length} < minLength ${s.minLength}`);
     if (s.maxLength !== void 0 && length > s.maxLength)
-      fail2(`length ${length} > maxLength ${s.maxLength}`);
+      fail3(`length ${length} > maxLength ${s.maxLength}`);
     if (s.pattern !== void 0) {
       try {
         if (!new RegExp(s.pattern, "u").test(value))
-          fail2(`does not match pattern ${s.pattern}`);
+          fail3(`does not match pattern ${s.pattern}`);
       } catch {
       }
     }
     if (s.format !== void 0) {
       const pattern = FORMAT_PATTERNS[s.format];
       if (pattern && !pattern.test(value))
-        fail2(`does not match format ${s.format}`);
+        fail3(`does not match format ${s.format}`);
     }
   }
   if (typeof value === "number") {
     if (s.minimum !== void 0 && value < s.minimum)
-      fail2(`${value} < minimum ${s.minimum}`);
+      fail3(`${value} < minimum ${s.minimum}`);
     if (s.maximum !== void 0 && value > s.maximum)
-      fail2(`${value} > maximum ${s.maximum}`);
+      fail3(`${value} > maximum ${s.maximum}`);
     if (s.exclusiveMinimum !== void 0 && value <= s.exclusiveMinimum)
-      fail2(`${value} <= exclusiveMinimum ${s.exclusiveMinimum}`);
+      fail3(`${value} <= exclusiveMinimum ${s.exclusiveMinimum}`);
     if (s.exclusiveMaximum !== void 0 && value >= s.exclusiveMaximum)
-      fail2(`${value} >= exclusiveMaximum ${s.exclusiveMaximum}`);
+      fail3(`${value} >= exclusiveMaximum ${s.exclusiveMaximum}`);
     if (s.multipleOf !== void 0 && Math.abs(value / s.multipleOf - Math.round(value / s.multipleOf)) > 1e-9) {
-      fail2(`${value} is not a multiple of ${s.multipleOf}`);
+      fail3(`${value} is not a multiple of ${s.multipleOf}`);
     }
   }
   if (Array.isArray(value)) {
     if (s.minItems !== void 0 && value.length < s.minItems)
-      fail2(`${value.length} items < minItems ${s.minItems}`);
+      fail3(`${value.length} items < minItems ${s.minItems}`);
     if (s.maxItems !== void 0 && value.length > s.maxItems)
-      fail2(`${value.length} items > maxItems ${s.maxItems}`);
+      fail3(`${value.length} items > maxItems ${s.maxItems}`);
     if (s.uniqueItems && value.some((item, i) => value.slice(0, i).some((prev) => deepEqual(prev, item))))
-      fail2("items are not unique");
+      fail3("items are not unique");
     value.forEach((item, i) => {
       const itemSchema = s.prefixItems?.[i] ?? s.items;
       if (itemSchema)
@@ -761,11 +763,11 @@ var validateValue = (document2, schema, value, path = []) => {
     const keys = Object.keys(record);
     for (const name of s.required ?? [])
       if (!(name in record))
-        fail2(`missing required property ${name}`);
+        fail3(`missing required property ${name}`);
     if (s.minProperties !== void 0 && keys.length < s.minProperties)
-      fail2(`${keys.length} properties < minProperties ${s.minProperties}`);
+      fail3(`${keys.length} properties < minProperties ${s.minProperties}`);
     if (s.maxProperties !== void 0 && keys.length > s.maxProperties)
-      fail2(`${keys.length} properties > maxProperties ${s.maxProperties}`);
+      fail3(`${keys.length} properties > maxProperties ${s.maxProperties}`);
     for (const key of keys) {
       const property = s.properties?.[key];
       if (property) {
@@ -773,14 +775,14 @@ var validateValue = (document2, schema, value, path = []) => {
         continue;
       }
       if (s.additionalProperties === false)
-        fail2(`unexpected property ${key}`);
+        fail3(`unexpected property ${key}`);
       else if (typeof s.additionalProperties === "object") {
         errors.push(...validateValue(document2, s.additionalProperties, record[key], [...path, key]));
       }
       if (s.propertyNames) {
         const nameErrors = validateValue(document2, s.propertyNames, key, [...path, key]);
         if (nameErrors.length > 0)
-          fail2(`property name ${key} is invalid: ${nameErrors[0]?.message}`);
+          fail3(`property name ${key} is invalid: ${nameErrors[0]?.message}`);
       }
     }
   }
@@ -788,14 +790,14 @@ var validateValue = (document2, schema, value, path = []) => {
     for (const branch of s.allOf)
       errors.push(...validateValue(document2, branch, value, path));
   if (s.anyOf && !s.anyOf.some((branch) => validateValue(document2, branch, value).length === 0))
-    fail2("matches no anyOf branch");
+    fail3("matches no anyOf branch");
   if (s.oneOf) {
     const matches2 = s.oneOf.filter((branch) => validateValue(document2, branch, value).length === 0).length;
     if (matches2 !== 1)
-      fail2(`matches ${matches2} oneOf branches, expected exactly 1`);
+      fail3(`matches ${matches2} oneOf branches, expected exactly 1`);
   }
   if (s.not && validateValue(document2, s.not, value).length === 0)
-    fail2("matches forbidden `not` schema");
+    fail3("matches forbidden `not` schema");
   return errors;
 };
 
@@ -1368,6 +1370,936 @@ var clearNamespace = (sqlite, namespace) => {
   });
 };
 
+// ../core/dist/surface.js
+var defineMock = (runtime) => runtime;
+var STANDARD_ADMIN_ROUTES = [
+  "GET /",
+  "POST /reset",
+  "GET /namespaces",
+  "GET /clock",
+  "POST /clock",
+  "GET /faults",
+  "POST /faults",
+  "DELETE /faults",
+  "POST /snapshots",
+  "POST /snapshots/:id/restore",
+  "DELETE /snapshots/:id",
+  "GET /timeline",
+  "POST /checkpoints",
+  "POST /branches/:name",
+  "POST /branches/:name/checkout",
+  "GET /requests",
+  "DELETE /requests",
+  "GET /metrics",
+  "DELETE /metrics",
+  "GET /credentials",
+  "PUT /credentials",
+  "DELETE /credentials",
+  "GET /state",
+  "GET /state/:collection",
+  "GET /state/:collection/:id",
+  "POST /state/:collection",
+  "PUT /state/:collection/:id",
+  "PATCH /state/:collection/:id",
+  "DELETE /state/:collection/:id",
+  "GET /ui",
+  "GET /ui/",
+  "GET /ui/manifest"
+];
+var PANEL_ID = /^[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?$/;
+var assertAdminUi = (ui) => {
+  if (!ui?.panels)
+    return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const panel of ui.panels) {
+    if (!PANEL_ID.test(panel.id)) {
+      throw new RangeError(`admin panel id must match ${PANEL_ID}: ${JSON.stringify(panel.id)}`);
+    }
+    if (seen.has(panel.id))
+      throw new RangeError(`duplicate admin panel id ${panel.id}`);
+    seen.add(panel.id);
+    if (panel.title.trim() === "")
+      throw new RangeError(`admin panel ${panel.id} needs a title`);
+  }
+};
+
+// ../core/dist/admin-ui.js
+var escapeHtml = (value) => value.replace(/[&<>"']/g, (char) => {
+  switch (char) {
+    case "&":
+      return "&amp;";
+    case "<":
+      return "&lt;";
+    case ">":
+      return "&gt;";
+    case '"':
+      return "&quot;";
+    default:
+      return "&#39;";
+  }
+});
+var renderAdminDocument = (service) => {
+  const name = escapeHtml(service);
+  const standard = JSON.stringify(STANDARD_ADMIN_ROUTES);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%233d4f3a'/%3E%3C/svg%3E">
+<title>${name} admin</title>
+<style>
+  :root {
+    color-scheme: light;
+    --bg: #f6f5f2;
+    --bg-elev: #ffffff;
+    --bg-muted: #eeece6;
+    --bg-inset: #f3f1eb;
+    --line: #e2dfd6;
+    --line-strong: #d0ccc1;
+    --ink: #1c1915;
+    --muted: #5e584f;
+    --faint: #8a8378;
+    --accent: #3d4f3a;
+    --accent-ink: #f7f6f2;
+    --accent-soft: #e5ece2;
+    --ok: #1f7a45;
+    --ok-soft: #e5f4eb;
+    --warn: #9a6700;
+    --warn-soft: #fbf3df;
+    --err: #a33b32;
+    --err-soft: #fdecea;
+    --shadow: 0 1px 2px rgb(28 25 21 / 0.05), 0 12px 32px rgb(28 25 21 / 0.06);
+    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+    --radius: 14px;
+    --header: 60px;
+    --nav: 220px;
+  }
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --bg: #141311;
+    --bg-elev: #1e1c19;
+    --bg-muted: #26231f;
+    --bg-inset: #181715;
+    --line: #34302b;
+    --line-strong: #4a453d;
+    --ink: #f4f1ea;
+    --muted: #c4bdb1;
+    --faint: #8f877c;
+    --accent: #c5d5b8;
+    --accent-ink: #1a2118;
+    --accent-soft: #2a3328;
+    --ok: #8fd6a8;
+    --ok-soft: #1a2e22;
+    --warn: #f0cc78;
+    --warn-soft: #332911;
+    --err: #f0a8a2;
+    --err-soft: #3a201e;
+    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.28);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      color-scheme: dark;
+      --bg: #141311;
+      --bg-elev: #1e1c19;
+      --bg-muted: #26231f;
+      --bg-inset: #181715;
+      --line: #34302b;
+      --line-strong: #4a453d;
+      --ink: #f4f1ea;
+      --muted: #c4bdb1;
+      --faint: #8f877c;
+      --accent: #c5d5b8;
+      --accent-ink: #1a2118;
+      --accent-soft: #2a3328;
+      --ok: #8fd6a8;
+      --ok-soft: #1a2e22;
+      --warn: #f0cc78;
+      --warn-soft: #332911;
+      --err: #f0a8a2;
+      --err-soft: #3a201e;
+      --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.28);
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body {
+    font-family: var(--sans);
+    background: var(--bg);
+    color: var(--ink);
+    line-height: 1.45;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    -webkit-text-size-adjust: 100%;
+  }
+  button, input, select, textarea { font: inherit; color: inherit; }
+  button { cursor: pointer; }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) {
+    * { scroll-behavior: auto !important; transition: none !important; }
+  }
+  .app { min-height: 100%; display: flex; flex-direction: column; }
+  header.top {
+    position: sticky; top: 0; z-index: 5;
+    display: flex; align-items: center; gap: 12px;
+    min-height: var(--header); padding: 10px 16px;
+    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
+    border-bottom: 1px solid var(--line);
+    backdrop-filter: blur(10px);
+  }
+  .brand { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
+  .brand strong { font-size: 15px; letter-spacing: -0.01em; }
+  .brand span { color: var(--faint); font-size: 12px; }
+  .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+  label.field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--faint); }
+  label.field input, label.field select, .controls input[type="password"] {
+    background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px;
+    padding: 7px 8px; min-height: 36px;
+  }
+  .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); }
+  /* minmax(0, 1fr): a 1fr column will not shrink below its content, so a long
+     record or the full nav row would widen the page past the viewport. */
+  .layout {
+    display: grid; grid-template-columns: var(--nav) minmax(0, 1fr);
+    flex: 1; min-height: 0; min-width: 0;
+  }
+  nav.side {
+    border-right: 1px solid var(--line); padding: 12px;
+    display: flex; flex-direction: column; gap: 4px;
+    background: var(--bg-elev);
+  }
+  nav.side button {
+    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(180px, 1fr)); gap: 12px; }
+  .card {
+    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
+    padding: 14px 16px; box-shadow: var(--shadow);
+  }
+  .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; }
+  .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; }
+  .collection {
+    width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
+    border-radius: 10px; padding: 8px 10px; min-height: 44px;
+  }
+  .collection[aria-current="true"] { background: var(--bg-elev); border-color: var(--line); }
+  .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 i { color: var(--faint); font-style: normal; }
+  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; }
+  tr.clickable { cursor: pointer; }
+  tr.clickable:hover { background: var(--bg-muted); }
+  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; }
+  .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; }
+  dialog {
+    border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--bg-elev);
+    color: var(--ink); width: min(640px, calc(100vw - 24px)); box-shadow: var(--shadow);
+  }
+  dialog::backdrop { background: rgb(20 19 17 / 0.45); }
+  dialog form, .dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+  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); }
+  .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; }
+  .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; }
+  @media (max-width: 800px) {
+    header.top {
+      align-items: stretch; flex-direction: column;
+      padding-top: max(10px, env(safe-area-inset-top));
+    }
+    input, select, textarea { font-size: 16px; }
+    .controls { width: 100%; }
+    label.field, label.field select, label.field input { flex: 1; min-width: 0; }
+    .layout { grid-template-columns: minmax(0, 1fr); }
+    nav.side {
+      flex-direction: row; align-items: center; overflow-x: auto; min-width: 0;
+      border-right: 0; border-bottom: 1px solid var(--line);
+      padding: 8px;
+    }
+    nav.side button { white-space: nowrap; flex: none; }
+    .split { grid-template-columns: minmax(0, 1fr); }
+    main { padding: 14px; }
+    table, thead, tbody, tr, th, td { display: block; }
+    thead { display: none; }
+    tr {
+      border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; padding: 6px;
+      background: var(--bg-elev); min-width: 0;
+    }
+    td {
+      border: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
+      min-width: 0; overflow-wrap: anywhere;
+    }
+    td::before { content: attr(data-label); color: var(--faint); font-size: 12px; flex: none; }
+    .route { grid-template-columns: 72px 1fr; }
+    .route button { grid-column: 1 / -1; }
+  }
+</style>
+</head>
+<body>
+<div class="app" data-service="${name}" data-mockingbird-admin>
+  <header class="top">
+    <div class="brand">
+      <strong>${name}</strong>
+      <span>Mockingbird admin</span>
+    </div>
+    <div class="controls">
+      <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>
+    </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>
+    </nav>
+    <main id="views">
+      <p class="banner" id="banner" role="alert"></p>
+      <section class="view" id="view-overview">
+        <h2>Overview</h2>
+        <p class="lede">Health, clock, and the collections this namespace is holding.</p>
+        <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="split">
+          <div id="collections"></div>
+          <div>
+            <div id="schema"></div>
+            <div class="row-actions">
+              <button class="btn-primary" id="new-record" type="button">New record</button>
+            </div>
+            <div id="records"></div>
+          </div>
+        </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="card" id="clock-readout"></div>
+        <div class="row-actions">
+          <button class="btn" type="button" data-advance="60000">+1m</button>
+          <button class="btn" type="button" data-advance="900000">+15m</button>
+          <button class="btn" type="button" data-advance="3600000">+1h</button>
+          <button class="btn" type="button" data-advance="86400000">+1d</button>
+          <button class="btn" type="button" data-advance="-3600000">\u22121h</button>
+          <button class="btn" id="freeze" type="button">Freeze</button>
+          <button class="btn-quiet" id="clock-reset" type="button">Reset</button>
+        </div>
+        <form id="clock-set" class="row-actions">
+          <label class="field">Set instant
+            <input id="clock-instant" type="text" placeholder="2026-01-01T00:00:00Z or epoch ms" size="32">
+          </label>
+          <button class="btn-primary" type="submit">Set</button>
+        </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>
+        <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="dialog-actions">
+            <button class="btn-primary" type="submit">Add fault</button>
+            <button class="btn-danger" id="fault-clear" type="button">Clear all</button>
+          </div>
+        </form>
+        <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 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 id="route-list"></div>
+        <form id="route-form" class="card stack">
+          <strong id="route-title">Select a route</strong>
+          <label class="field">JSON body
+            <textarea id="route-body" placeholder="{ }"></textarea>
+          </label>
+          <div class="dialog-actions">
+            <button class="btn-primary" type="submit">Send</button>
+          </div>
+          <pre id="route-result">Response will show here.</pre>
+        </form>
+      </section>
+    </main>
+  </div>
+</div>
+<dialog id="editor">
+  <form method="dialog" id="editor-form">
+    <strong id="editor-title">Record</strong>
+    <label class="field">Id
+      <input id="editor-id" required>
+    </label>
+    <label class="field">JSON value
+      <textarea id="editor-value"></textarea>
+    </label>
+    <div class="dialog-actions">
+      <button class="btn-danger" id="editor-delete" type="button" value="delete">Delete</button>
+      <button class="btn-quiet" type="submit" value="cancel">Cancel</button>
+      <button class="btn-primary" type="submit" value="save">Save</button>
+    </div>
+  </form>
+</dialog>
+<script>
+(() => {
+  const STANDARD = new Set(${standard})
+  const state = {
+    namespace: "default",
+    key: sessionStorage.getItem("mockingbird-admin-key") || "",
+    view: "overview",
+    collection: "",
+    shape: null,
+    route: null,
+    editing: null
+  }
+  const $ = (id) => document.getElementById(id)
+  const banner = $("banner")
+  const keyInput = $("admin-key")
+  keyInput.value = state.key
+  const params = new URLSearchParams(location.search)
+  if (params.get("key")) {
+    state.key = params.get("key")
+    keyInput.value = state.key
+    sessionStorage.setItem("mockingbird-admin-key", state.key)
+    params.delete("key")
+    const next = params.toString()
+    history.replaceState(null, "", location.pathname + (next ? "?" + next : ""))
+  }
+  if (params.get("namespace")) state.namespace = params.get("namespace")
+
+  const showError = (error) => {
+    banner.textContent = error instanceof Error ? error.message : String(error)
+    banner.classList.add("show")
+  }
+  const clearError = () => banner.classList.remove("show")
+
+  async function originGet(path) {
+    const response = await fetch(path, { headers: { accept: "application/json" } })
+    if (!response.ok) throw new Error(response.status + " " + path)
+    return response.json()
+  }
+  async function api(method, path, body) {
+    const headers = { accept: "application/json" }
+    if (state.key) headers["${ADMIN_KEY_HEADER}"] = state.key
+    if (state.namespace) headers["x-mockingbird-namespace"] = state.namespace
+    if (body !== undefined) headers["content-type"] = "application/json"
+    const response = await fetch("${ADMIN_PREFIX}" + path, {
+      method,
+      headers,
+      body: body === undefined ? undefined : JSON.stringify(body)
+    })
+    const text = await response.text()
+    let data = null
+    if (text) {
+      try { data = JSON.parse(text) } catch { data = { raw: text } }
+    }
+    if (response.status === 401) {
+      keyInput.focus()
+      throw new Error((data && data.error && data.error.message) || "Admin key required")
+    }
+    if (!response.ok) {
+      throw new Error((data && data.error && data.error.message) || (response.status + " " + method + " " + path))
+    }
+    return data
+  }
+  const panelApi = {
+    get: (path) => api("GET", path),
+    send: (method, path, body) => api(method, path, body),
+    namespace: () => state.namespace
+  }
+
+  function setTheme(theme) {
+    if (theme) document.documentElement.dataset.theme = theme
+    else delete document.documentElement.dataset.theme
+  }
+  const storedTheme = localStorage.getItem("mockingbird-admin-theme")
+  if (storedTheme) setTheme(storedTheme)
+  $("theme").addEventListener("click", () => {
+    const current = document.documentElement.dataset.theme
+    const dark = current ? current === "dark" : matchMedia("(prefers-color-scheme: dark)").matches
+    const next = dark ? "light" : "dark"
+    localStorage.setItem("mockingbird-admin-theme", next)
+    setTheme(next)
+  })
+
+  function show(view) {
+    state.view = view
+    for (const button of document.querySelectorAll("#nav button")) {
+      button.setAttribute("aria-current", button.dataset.view === view ? "true" : "false")
+    }
+    for (const section of document.querySelectorAll("main .view")) {
+      section.hidden = section.id !== "view-" + view
+    }
+  }
+  document.getElementById("nav").addEventListener("click", (event) => {
+    const button = event.target.closest("button[data-view]")
+    if (!button) return
+    show(button.dataset.view)
+    refresh().catch(showError)
+  })
+
+  function cards(items) {
+    return '<div class="grid">' + items.map((item) =>
+      '<article class="card"><div class="k">' + item.k + '</div><div class="v">' + item.v + '</div></article>'
+    ).join("") + "</div>"
+  }
+  function table(columns, rows) {
+    if (rows.length === 0) return '<p class="empty">Nothing here yet.</p>'
+    const head = "<tr>" + columns.map((column) => "<th>" + column.label + "</th>").join("") + "</tr>"
+    const body = rows.map((row) => "<tr" + (row.attrs || "") + ">" + columns.map((column) =>
+      '<td data-label="' + column.label + '">' + column.cell(row) + "</td>"
+    ).join("") + "</tr>").join("")
+    return "<table><thead>" + head + "</thead><tbody>" + body + "</tbody></table>"
+  }
+  const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (char) => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
+  }[char]))
+  const preview = (value) => {
+    const text = JSON.stringify(value)
+    return esc(text.length > 180 ? text.slice(0, 180) + "\u2026" : text)
+  }
+  const when = (epoch) => {
+    const date = new Date(epoch)
+    return Number.isNaN(date.getTime()) ? String(epoch) : date.toISOString()
+  }
+  const clockCard = (epoch) => {
+    const date = new Date(epoch)
+    if (Number.isNaN(date.getTime())) return esc(String(epoch))
+    const iso = date.toISOString()
+    return esc(iso.slice(0, 10)) + '<span class="clock-time">' + esc(iso.slice(11, 19)) + " UTC</span>"
+  }
+
+  async function loadNamespaces() {
+    const data = await api("GET", "/namespaces")
+    const select = $("namespace")
+    const names = data.namespaces && data.namespaces.length ? data.namespaces : [data.default || "default"]
+    if (!names.includes(state.namespace)) names.unshift(state.namespace)
+    select.innerHTML = names.map((name) =>
+      '<option value="' + esc(name) + '">' + esc(name) + "</option>"
+    ).join("")
+    select.value = state.namespace
+  }
+
+  async function renderOverview() {
+    const [health, shape, clock, journal] = await Promise.all([
+      originGet("/health"),
+      api("GET", "/state"),
+      api("GET", "/clock"),
+      api("GET", "/requests?limit=8")
+    ])
+    state.shape = shape
+    $("overview-cards").innerHTML = cards([
+      { k: "Service", v: esc(health.service || "${name}") },
+      { k: "Status", v: esc(health.status || "ok") },
+      { k: "Namespace", v: esc(state.namespace) },
+      { k: "Collections", v: String(shape.collections.length) },
+      { k: "Records", v: String(shape.collections.reduce((sum, item) => sum + item.count, 0)) },
+      { k: "Clock", v: clockCard(clock.now) }
+    ])
+    const requests = (journal && journal.requests) || []
+    $("overview-requests").innerHTML = table(
+      [
+        { label: "Method", cell: (row) => esc(row.method) },
+        { label: "Path", cell: (row) => esc(row.path) },
+        { label: "Status", cell: (row) => '<span class="status-' + String(row.status).charAt(0) + '">' + esc(row.status) + "</span>" },
+        { label: "Operation", cell: (row) => esc(row.operationId || "") }
+      ],
+      requests
+    )
+  }
+
+  function schemaChips(collection) {
+    if (!collection || collection.fields.length === 0) {
+      return '<p class="empty">No fields yet. Add a record or declare the collection on the service.</p>'
+    }
+    return '<div class="chips">' + collection.fields.map((field) =>
+      '<span class="chip">' + esc(field.name) + ' <i>' + esc(field.kind) + (field.optional ? "?" : "") + "</i></span>"
+    ).join("") + "</div>"
+  }
+
+  async function renderState() {
+    const shape = await api("GET", "/state")
+    state.shape = shape
+    const host = $("collections")
+    if (shape.collections.length === 0) {
+      host.innerHTML = '<p class="empty">This namespace has no collections yet.</p>'
+      $("schema").innerHTML = ""
+      $("records").innerHTML = ""
+      return
+    }
+    if (!shape.collections.some((item) => item.name === state.collection)) {
+      state.collection = shape.collections[0].name
+    }
+    host.innerHTML = shape.collections.map((item) =>
+      '<button type="button" class="collection" data-collection="' + esc(item.name) + '" aria-current="' +
+      (item.name === state.collection ? "true" : "false") + '"><strong>' + esc(item.label) +
+      '</strong><small>' + esc(item.count) + " \xB7 " + esc(item.source) + "</small></button>"
+    ).join("")
+    const selected = shape.collections.find((item) => item.name === state.collection)
+    $("schema").innerHTML = "<h3>" + esc(selected.label) + "</h3>" +
+      (selected.description ? "<p class=" + '"lede">' + esc(selected.description) + "</p>" : "") +
+      schemaChips(selected)
+    const page = await api("GET", "/state/" + encodeURIComponent(state.collection) + "?limit=50")
+    const rows = page.records.map((record) => ({
+      ...record,
+      attrs: ' class="clickable" data-id="' + esc(record.id) + '"'
+    }))
+    $("records").innerHTML = table(
+      [
+        { label: "Id", cell: (row) => "<code>" + esc(row.id) + "</code>" },
+        { label: "Seq", cell: (row) => esc(row.seq) },
+        { label: "Value", cell: (row) => preview(row.value) }
+      ],
+      rows
+    )
+  }
+
+  async function renderClock() {
+    const clock = await api("GET", "/clock")
+    $("clock-readout").innerHTML = "<div class='k'>Now</div><div class='v'>" + esc(when(clock.now)) +
+      "</div><p>" + esc(clock.now) + " ms \xB7 offset " + esc(clock.offsetMs) + " ms " +
+      (clock.frozen ? "<span class='badge warn'>frozen</span>" : "<span class='badge ok'>live</span>") + "</p>"
+    $("freeze").textContent = clock.frozen ? "Unfreeze" : "Freeze"
+    $("freeze").dataset.frozen = clock.frozen ? "1" : "0"
+  }
+
+  async function renderFaults() {
+    const [faults, presets] = await Promise.all([
+      api("GET", "/faults"),
+      api("GET", "/faults/presets").catch(() => ({ presets: [] }))
+    ])
+    const select = $("fault-preset")
+    const current = select.value
+    const list = presets.presets || []
+    select.innerHTML = '<option value="">Custom rule</option>' + list.map((preset) =>
+      '<option value="' + esc(preset.name) + '">' + esc(preset.name) + "</option>"
+    ).join("")
+    select.value = current
+    const rules = faults.faults || []
+    $("fault-list").innerHTML = table(
+      [
+        { label: "Id", cell: (row) => esc(row.id) },
+        { label: "Match", cell: (row) => esc([row.method, row.pathPrefix, row.operationId].filter(Boolean).join(" ") || "all") },
+        { label: "Effect", cell: (row) => esc(row.status ?? row.effect ?? (row.drop ? "drop" : row.latencyMs || "")) }
+      ],
+      rules
+    )
+  }
+
+  async function renderJournal() {
+    const journal = await api("GET", "/requests?limit=100")
+    $("journal").innerHTML = table(
+      [
+        { label: "When", cell: (row) => esc(row.at || "") },
+        { label: "Method", cell: (row) => esc(row.method) },
+        { label: "Path", cell: (row) => esc(row.path) },
+        { label: "Status", cell: (row) => esc(row.status) },
+        { label: "ms", cell: (row) => esc(row.durationMs) }
+      ],
+      journal.requests || []
+    )
+  }
+
+  async function renderRoutes() {
+    const data = await api("GET", "/")
+    const routes = data.routes || []
+    $("route-list").innerHTML = routes.map((route) => {
+      const extra = STANDARD.has(route) ? "" : " <span class='badge'>extension</span>"
+      return '<div class="route"><span class="method">' + esc(route.split(" ")[0]) +
+        '</span><span>' + esc(route.split(" ").slice(1).join(" ")) + extra +
+        '</span><button class="btn" type="button" data-route="' + esc(route) + '">Use</button></div>'
+    }).join("")
+  }
+
+  const renderers = {
+    overview: renderOverview,
+    state: renderState,
+    clock: renderClock,
+    faults: renderFaults,
+    journal: renderJournal,
+    routes: renderRoutes
+  }
+
+  async function refresh() {
+    clearError()
+    if (state.view in renderers) await renderers[state.view]()
+  }
+
+  $("namespace").addEventListener("change", () => {
+    state.namespace = $("namespace").value
+    refresh().catch(showError)
+  })
+  keyInput.addEventListener("change", () => {
+    state.key = keyInput.value.trim()
+    sessionStorage.setItem("mockingbird-admin-key", state.key)
+    refresh().catch(showError)
+  })
+  $("refresh").addEventListener("click", () => refresh().catch(showError))
+
+  $("collections").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-collection]")
+    if (!button) return
+    state.collection = button.dataset.collection
+    renderState().catch(showError)
+  })
+  $("records").addEventListener("click", (event) => {
+    const row = event.target.closest("[data-id]")
+    if (!row) return
+    openEditor(row.dataset.id).catch(showError)
+  })
+
+  const editor = $("editor")
+  async function openEditor(id) {
+    state.editing = id || null
+    $("editor-title").textContent = id ? "Edit record" : "New record"
+    $("editor-id").value = id || ""
+    $("editor-id").readOnly = Boolean(id)
+    $("editor-delete").hidden = !id
+    if (id) {
+      const record = await api("GET", "/state/" + encodeURIComponent(state.collection) + "/" + encodeURIComponent(id))
+      $("editor-value").value = JSON.stringify(record.value, null, 2)
+    } else {
+      $("editor-value").value = "{\\n  \\n}"
+    }
+    editor.showModal()
+  }
+  $("new-record").addEventListener("click", () => openEditor(null).catch(showError))
+  $("editor-form").addEventListener("submit", (event) => {
+    const submitter = event.submitter
+    if (!submitter || submitter.value !== "save") return
+    event.preventDefault()
+    let value
+    try { value = JSON.parse($("editor-value").value) }
+    catch { showError(new Error("Value is not JSON")); return }
+    const id = $("editor-id").value.trim()
+    const path = "/state/" + encodeURIComponent(state.collection)
+    const request = state.editing
+      ? api("PUT", path + "/" + encodeURIComponent(id), { value })
+      : api("POST", path, { id: id || undefined, value })
+    request.then(() => { editor.close(); return renderState() }).catch(showError)
+  })
+  $("editor-delete").addEventListener("click", () => {
+    const id = state.editing
+    if (!id) return
+    api("DELETE", "/state/" + encodeURIComponent(state.collection) + "/" + encodeURIComponent(id))
+      .then(() => { editor.close(); return renderState() })
+      .catch(showError)
+  })
+
+  document.querySelectorAll("[data-advance]").forEach((button) => {
+    button.addEventListener("click", () => {
+      api("POST", "/clock", { advance: Number(button.dataset.advance) }).then(renderClock).catch(showError)
+    })
+  })
+  $("freeze").addEventListener("click", () => {
+    const frozen = $("freeze").dataset.frozen === "1"
+    api("POST", "/clock", { freeze: !frozen }).then(renderClock).catch(showError)
+  })
+  $("clock-reset").addEventListener("click", () => {
+    api("POST", "/clock", { reset: true }).then(renderClock).catch(showError)
+  })
+  $("clock-set").addEventListener("submit", (event) => {
+    event.preventDefault()
+    const raw = $("clock-instant").value.trim()
+    const set = /^-?\\d+$/.test(raw) ? Number(raw) : raw
+    api("POST", "/clock", { set }).then(renderClock).catch(showError)
+  })
+
+  $("fault-form").addEventListener("submit", (event) => {
+    event.preventDefault()
+    const preset = $("fault-preset").value
+    const body = preset
+      ? { preset }
+      : {
+          status: Number($("fault-status").value),
+          ...($("fault-path").value ? { pathPrefix: $("fault-path").value } : {}),
+          ...($("fault-method").value ? { method: $("fault-method").value } : {})
+        }
+    if (!preset && !Number.isFinite(body.status)) {
+      showError(new Error("Status must be a number, or choose a preset"))
+      return
+    }
+    api("POST", "/faults", body).then(renderFaults).catch(showError)
+  })
+  $("fault-clear").addEventListener("click", () => api("DELETE", "/faults").then(renderFaults).catch(showError))
+  $("journal-clear").addEventListener("click", () => api("DELETE", "/requests").then(renderJournal).catch(showError))
+
+  $("route-list").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-route]")
+    if (!button) return
+    state.route = button.dataset.route
+    $("route-title").textContent = state.route
+    const method = state.route.split(" ")[0]
+    $("route-body").disabled = method === "GET" || method === "DELETE"
+  })
+  $("route-form").addEventListener("submit", async (event) => {
+    event.preventDefault()
+    if (!state.route) return showError(new Error("Choose a route first"))
+    const [method, path] = [state.route.split(" ")[0], state.route.split(" ").slice(1).join(" ")]
+    const concrete = path.replace(/:([A-Za-z0-9_]+)/g, (_, key) => prompt("Value for " + key) || "")
+    let body
+    if (method !== "GET" && method !== "DELETE" && $("route-body").value.trim()) {
+      try { body = JSON.parse($("route-body").value) }
+      catch { return showError(new Error("Body is not JSON")) }
+    }
+    try {
+      const data = await api(method, concrete, body)
+      $("route-result").textContent = JSON.stringify(data, null, 2)
+    } catch (error) {
+      showError(error)
+    }
+  })
+
+  function mountPanels(panels) {
+    const nav = $("nav")
+    const views = $("views")
+    for (const panel of panels) {
+      const button = document.createElement("button")
+      button.type = "button"
+      button.dataset.view = panel.id
+      button.textContent = panel.title
+      nav.append(button)
+      const section = document.createElement("section")
+      section.className = "view"
+      section.id = "view-" + panel.id
+      section.hidden = true
+      const title = document.createElement("h2")
+      title.textContent = panel.title
+      const lede = document.createElement("p")
+      lede.className = "lede"
+      lede.textContent = panel.description || ""
+      const body = document.createElement("div")
+      body.className = "panel-body"
+      body.id = "panel-" + panel.id
+      body.innerHTML = panel.html || ""
+      section.append(title, lede, body)
+      views.append(section)
+      if (panel.script) {
+        try {
+          const run = new Function("root", "api", panel.script)
+          run(body, panelApi)
+        } catch (error) {
+          const note = document.createElement("p")
+          note.className = "banner show"
+          note.textContent = error instanceof Error ? error.message : String(error)
+          body.append(note)
+        }
+      }
+    }
+  }
+
+  loadNamespaces()
+    .then(() => api("GET", "/ui/manifest"))
+    .then((manifest) => { mountPanels((manifest && manifest.panels) || []); return refresh() })
+    .catch(showError)
+})()
+</script>
+</body>
+</html>`;
+};
+var htmlResponse = (body) => new Response(body, {
+  status: 200,
+  headers: {
+    "content-type": "text/html; charset=utf-8",
+    "cache-control": "no-store"
+  }
+});
+var json2 = (body) => new Response(JSON.stringify(body), {
+  status: 200,
+  headers: { "content-type": "application/json; charset=utf-8" }
+});
+var adminUiRoutes = (service, ui) => {
+  const shell = () => renderAdminDocument(service);
+  const document2 = () => ui?.render ? ui.render({ service, defaultHtml: shell }) : shell();
+  return {
+    "GET /ui": () => htmlResponse(document2()),
+    "GET /ui/": () => htmlResponse(document2()),
+    "GET /ui/manifest": () => json2({
+      service,
+      panels: (ui?.panels ?? []).map((panel) => ({
+        id: panel.id,
+        title: panel.title,
+        ...panel.description !== void 0 ? { description: panel.description } : {},
+        html: panel.html,
+        ...panel.script !== void 0 ? { script: panel.script } : {}
+      }))
+    })
+  };
+};
+
 // ../../openapi/metadata/dist/types.js
 var EXTENSION_KEYS = {
   operation: "x-mockingbird",
@@ -1605,15 +2537,449 @@ var restoreNamespace = (sqlite, namespace, snapshot) => {
   });
 };
 
+// ../core/dist/state-view.js
+var COLLECTION_NAME = /^[A-Za-z0-9_.@:-]{1,200}$/;
+var RECORD_ID = /^[^\s/]{1,256}$/;
+var SAMPLE = 25;
+var WALK_LIMIT = 1e4;
+var SKIP_CTORS = /* @__PURE__ */ new Set(["Hono", "HonoRequest", "Router"]);
+var fail2 = (status, message) => ({ ok: false, status, message });
+var isRecord3 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var kindOf = (value) => {
+  if (value === null)
+    return "null";
+  if (Array.isArray(value))
+    return "array";
+  switch (typeof value) {
+    case "string":
+      return "string";
+    case "number":
+      return Number.isFinite(value) ? "number" : "unknown";
+    case "boolean":
+      return "boolean";
+    case "object":
+      return "object";
+    default:
+      return "unknown";
+  }
+};
+var humanize = (name) => {
+  const words = name.replace(/[@:_-]+/g, " ").trim();
+  if (words === "")
+    return name;
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
+var jsonValue = (value) => {
+  if (value === void 0)
+    return fail2(400, "value is required");
+  try {
+    return { ok: true, value: JSON.parse(JSON.stringify(value)) };
+  } catch {
+    return fail2(400, "value must be JSON");
+  }
+};
+var ctorName = (value) => {
+  const ctor = value.constructor;
+  return typeof ctor?.name === "string" ? ctor.name : "";
+};
+var isSqlite = (value) => "prepare" in value && typeof value.prepare === "function" && "transaction" in value;
+var discoverCollections = (root) => {
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (value, depth) => {
+    if (found.length + seen.size > WALK_LIMIT)
+      return;
+    if (value === null || typeof value !== "object")
+      return;
+    if (seen.has(value))
+      return;
+    seen.add(value);
+    if (value instanceof Collection) {
+      found.push(value);
+      return;
+    }
+    if (value instanceof Map) {
+      for (const child of value.values())
+        visit(child, depth + 1);
+      return;
+    }
+    if (value instanceof Set) {
+      for (const child of value.values())
+        visit(child, depth + 1);
+      return;
+    }
+    if (depth > 6 || isSqlite(value) || SKIP_CTORS.has(ctorName(value)))
+      return;
+    if (Array.isArray(value)) {
+      const cap = Math.min(value.length, 32);
+      for (let i = 0; i < cap; i++)
+        visit(value[i], depth + 1);
+      return;
+    }
+    let children;
+    try {
+      children = Object.values(value);
+    } catch {
+      return;
+    }
+    for (const child of children)
+      visit(child, depth + 1);
+  };
+  visit(root, 0);
+  return found;
+};
+var storedNames = (sqlite, namespace) => {
+  const records = sqlite.prepare("SELECT DISTINCT collection AS name FROM mockingbird_records WHERE namespace = ?").all(namespace);
+  const sequences = sqlite.prepare("SELECT DISTINCT name FROM mockingbird_sequences WHERE namespace = ? AND kind = 'collection'").all(namespace);
+  return [...records, ...sequences].map((row) => row.name);
+};
+var blankAccum = (name) => ({
+  name,
+  kinds: /* @__PURE__ */ new Set(),
+  present: 0,
+  nested: /* @__PURE__ */ new Map()
+});
+var absorb = (accum, value) => {
+  const kind = kindOf(value);
+  accum.kinds.add(kind);
+  accum.present++;
+  if (!isRecord3(value))
+    return;
+  for (const [key, child] of Object.entries(value)) {
+    const nested = accum.nested.get(key) ?? blankAccum(key);
+    absorb(nested, child);
+    accum.nested.set(key, nested);
+  }
+};
+var finishField = (accum, samples) => {
+  const kinds = [...accum.kinds];
+  const kind = kinds.length === 1 ? kinds[0] : "unknown";
+  const field = {
+    name: accum.name,
+    kind,
+    optional: accum.present < samples || kinds.includes("null")
+  };
+  if (accum.nested.size > 0) {
+    field.fields = [...accum.nested.values()].sort((a, b) => a.name.localeCompare(b.name)).map((child) => finishField(child, accum.present));
+  }
+  return field;
+};
+var inferFields = (records) => {
+  if (records.length === 0)
+    return [];
+  const sample = records.slice(0, SAMPLE);
+  const objects = sample.filter((record) => isRecord3(record.value));
+  if (objects.length === 0) {
+    const kinds = new Set(sample.map((record) => kindOf(record.value)));
+    const list = [...kinds];
+    return [
+      {
+        name: "(value)",
+        kind: list.length === 1 ? list[0] : "unknown",
+        optional: false
+      }
+    ];
+  }
+  const root = /* @__PURE__ */ new Map();
+  for (const record of objects) {
+    for (const [key, value] of Object.entries(record.value)) {
+      const accum = root.get(key) ?? blankAccum(key);
+      absorb(accum, value);
+      root.set(key, accum);
+    }
+  }
+  return [...root.values()].sort((a, b) => a.name.localeCompare(b.name)).map((accum) => finishField(accum, objects.length));
+};
+var mergeFields = (declared, inferred) => {
+  const byName = /* @__PURE__ */ new Map();
+  for (const field of inferred)
+    byName.set(field.name, field);
+  const ordered = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const field of declared ?? []) {
+    const found = byName.get(field.name);
+    seen.add(field.name);
+    if (!found) {
+      ordered.push({ ...field, optional: field.optional });
+      continue;
+    }
+    ordered.push({
+      ...found,
+      kind: field.kind === "unknown" ? found.kind : field.kind,
+      optional: field.optional || found.optional,
+      ...field.description !== void 0 ? { description: field.description } : {},
+      ...field.meta !== void 0 ? { meta: field.meta } : {},
+      ...field.fields !== void 0 ? { fields: mergeFields(field.fields, found.fields ?? []) } : {}
+    });
+  }
+  for (const field of inferred) {
+    if (!seen.has(field.name))
+      ordered.push(field);
+  }
+  return ordered;
+};
+var collectionOf = (sqlite, namespace, name) => new Collection(sqlite, namespace, name);
+var readRecord = (collection, id) => {
+  const rows = collection.list({ where: (_value, _seq) => true, order: "oldest" });
+  const row = rows.find((entry) => entry.id === id);
+  return row ? { id: row.id, seq: row.seq, value: row.value } : void 0;
+};
+var inspectState = (scope) => {
+  const declared = /* @__PURE__ */ new Map();
+  for (const declaration of scope.declarations ?? []) {
+    if (COLLECTION_NAME.test(declaration.name))
+      declared.set(declaration.name, declaration);
+  }
+  const names = new Set(declared.keys());
+  for (const name of storedNames(scope.sqlite, scope.storageNamespace))
+    names.add(name);
+  for (const collection of discoverCollections(scope.root)) {
+    if (collection.namespace === scope.storageNamespace)
+      names.add(collection.collectionName);
+  }
+  const collections = [];
+  for (const name of names) {
+    if (!COLLECTION_NAME.test(name))
+      continue;
+    const declaration = declared.get(name);
+    const collection = collectionOf(scope.sqlite, scope.storageNamespace, name);
+    const records = collection.list({ order: "newest" }).slice(0, SAMPLE).map((row) => ({ id: row.id, seq: row.seq, value: row.value }));
+    const inferred = inferFields(records);
+    const fields = mergeFields(declaration?.fields, inferred);
+    const source = declaration && records.length > 0 ? "mixed" : declaration ? "declared" : "inferred";
+    collections.push({
+      name,
+      label: declaration?.label ?? humanize(name),
+      ...declaration?.description !== void 0 ? { description: declaration.description } : {},
+      count: collection.count(),
+      source,
+      fields,
+      ...declaration?.meta !== void 0 ? { meta: declaration.meta } : {}
+    });
+  }
+  const order = /* @__PURE__ */ new Map();
+  for (const [index, item] of (scope.declarations ?? []).entries())
+    order.set(item.name, index);
+  collections.sort((a, b) => {
+    const left = order.get(a.name);
+    const right = order.get(b.name);
+    if (left !== void 0 && right !== void 0)
+      return left - right;
+    if (left !== void 0)
+      return -1;
+    if (right !== void 0)
+      return 1;
+    return a.name.localeCompare(b.name);
+  });
+  return {
+    namespace: scope.namespace,
+    storageNamespace: scope.storageNamespace,
+    collections
+  };
+};
+var pageOf = (sqlite, storageNamespace, name, query) => {
+  if (!COLLECTION_NAME.test(name))
+    return fail2(400, "collection name is not allowed");
+  const limit = query.limit ?? 50;
+  if (!Number.isInteger(limit) || limit < 1 || limit > 200) {
+    return fail2(400, "limit must be an integer from 1 to 200");
+  }
+  const order = query.order ?? "newest";
+  if (order !== "newest" && order !== "oldest")
+    return fail2(400, 'order must be "newest" or "oldest"');
+  const collection = collectionOf(sqlite, storageNamespace, name);
+  const rows = collection.list({ order }).filter((row) => {
+    if (query.after === void 0)
+      return true;
+    return order === "newest" ? row.seq < query.after : row.seq > query.after;
+  });
+  const slice = rows.slice(0, limit);
+  const last = slice.at(-1);
+  return {
+    ok: true,
+    value: {
+      collection: name,
+      count: collection.count(),
+      records: slice.map((row) => ({ id: row.id, seq: row.seq, value: row.value })),
+      next: rows.length > limit && last ? last.seq : null
+    }
+  };
+};
+var readStatePage = (scope, name, query = {}) => pageOf(scope.sqlite, scope.storageNamespace, name, query);
+var readStateRecord = (scope, name, id) => {
+  if (!COLLECTION_NAME.test(name))
+    return fail2(400, "collection name is not allowed");
+  if (!RECORD_ID.test(id))
+    return fail2(400, "record id is not allowed");
+  const record = readRecord(collectionOf(scope.sqlite, scope.storageNamespace, name), id);
+  return record ? { ok: true, value: record } : fail2(404, `no record ${id} in ${name}`);
+};
+var requireId = (id) => RECORD_ID.test(id) ? { ok: true, value: id } : fail2(400, "id must be a single path segment");
+var createStateRecord = (scope, name, input) => {
+  if (!COLLECTION_NAME.test(name))
+    return fail2(400, "collection name is not allowed");
+  const parsed = jsonValue(input.value);
+  if (!parsed.ok)
+    return parsed;
+  const collection = collectionOf(scope.sqlite, scope.storageNamespace, name);
+  const id = input.id ?? `${name}_${collection.nextSequence()}`;
+  const checked = requireId(id);
+  if (!checked.ok)
+    return checked;
+  if (collection.has(checked.value))
+    return fail2(409, `record ${checked.value} already exists`);
+  const stored = collection.insert(checked.value, parsed.value);
+  return { ok: true, value: { id: checked.value, seq: stored.seq, value: stored.value } };
+};
+var replaceStateRecord = (scope, name, id, value) => {
+  if (!COLLECTION_NAME.test(name))
+    return fail2(400, "collection name is not allowed");
+  const checked = requireId(id);
+  if (!checked.ok)
+    return checked;
+  const parsed = jsonValue(value);
+  if (!parsed.ok)
+    return parsed;
+  const collection = collectionOf(scope.sqlite, scope.storageNamespace, name);
+  if (!collection.has(checked.value))
+    return fail2(404, `no record ${checked.value} in ${name}`);
+  const stored = collection.update(checked.value, parsed.value);
+  if (!stored)
+    return fail2(404, `no record ${checked.value} in ${name}`);
+  return { ok: true, value: { id: checked.value, seq: stored.seq, value: stored.value } };
+};
+var patchStateRecord = (scope, name, id, value) => {
+  const current = readStateRecord(scope, name, id);
+  if (!current.ok)
+    return current;
+  const parsed = jsonValue(value);
+  if (!parsed.ok)
+    return parsed;
+  const next = isRecord3(current.value.value) && isRecord3(parsed.value) ? { ...current.value.value, ...parsed.value } : parsed.value;
+  return replaceStateRecord(scope, name, id, next);
+};
+var deleteStateRecord = (scope, name, id) => {
+  if (!COLLECTION_NAME.test(name))
+    return fail2(400, "collection name is not allowed");
+  const checked = requireId(id);
+  if (!checked.ok)
+    return checked;
+  const collection = collectionOf(scope.sqlite, scope.storageNamespace, name);
+  return collection.delete(checked.value) ? { ok: true, value: { id: checked.value } } : fail2(404, `no record ${checked.value} in ${name}`);
+};
+var json3 = (status, body) => new Response(JSON.stringify(body), {
+  status,
+  headers: { "content-type": "application/json; charset=utf-8" }
+});
+var adminError2 = (status, message) => json3(status, { error: { type: "mockingbird_admin", message } });
+var fromResult = (result, status) => result.ok ? json3(status, result.value) : adminError2(result.status, result.message);
+var integerParam = (value) => {
+  if (value === null)
+    return void 0;
+  if (!/^-?\d+$/.test(value))
+    return "bad";
+  return Number(value);
+};
+var stateAdminRoutes = (routes) => {
+  const open = (namespace) => {
+    try {
+      return { ok: true, value: routes.open(namespace) };
+    } catch (error) {
+      return fail2(400, error instanceof Error ? error.message : String(error));
+    }
+  };
+  const wrote = (namespace) => {
+    routes.afterWrite?.(namespace);
+  };
+  return {
+    "GET /state": ({ namespace }) => {
+      const scope = open(namespace);
+      return fromResult(scope.ok ? { ok: true, value: inspectState(scope.value) } : scope, 200);
+    },
+    "GET /state/:collection": ({ namespace, params, url }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 200);
+      const limit = integerParam(url.searchParams.get("limit"));
+      const after = integerParam(url.searchParams.get("after"));
+      if (limit === "bad")
+        return adminError2(400, "limit: expected an integer");
+      if (after === "bad")
+        return adminError2(400, "after: expected a sequence number");
+      const order = url.searchParams.get("order");
+      return fromResult(readStatePage(scope.value, params.collection ?? "", {
+        ...limit !== void 0 ? { limit } : {},
+        ...after !== void 0 ? { after } : {},
+        ...order === "newest" || order === "oldest" ? { order } : {}
+      }), 200);
+    },
+    "GET /state/:collection/:id": ({ namespace, params }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 200);
+      return fromResult(readStateRecord(scope.value, params.collection ?? "", params.id ?? ""), 200);
+    },
+    "POST /state/:collection": ({ namespace, params, body }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 201);
+      if (!isRecord3(body) || !("value" in body)) {
+        return adminError2(400, 'expected {"id?": "<id>", "value": <json>}');
+      }
+      const id = body.id;
+      if (id !== void 0 && typeof id !== "string")
+        return adminError2(400, "id must be a string");
+      const created = createStateRecord(scope.value, params.collection ?? "", {
+        ...typeof id === "string" ? { id } : {},
+        value: body.value
+      });
+      if (created.ok)
+        wrote(namespace);
+      return fromResult(created, 201);
+    },
+    "PUT /state/:collection/:id": ({ namespace, params, body }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 200);
+      if (!isRecord3(body) || !("value" in body))
+        return adminError2(400, 'expected {"value": <json>}');
+      const replaced = replaceStateRecord(scope.value, params.collection ?? "", params.id ?? "", body.value);
+      if (replaced.ok)
+        wrote(namespace);
+      return fromResult(replaced, 200);
+    },
+    "PATCH /state/:collection/:id": ({ namespace, params, body }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 200);
+      if (!isRecord3(body) || !("value" in body))
+        return adminError2(400, 'expected {"value": <json>}');
+      const patched = patchStateRecord(scope.value, params.collection ?? "", params.id ?? "", body.value);
+      if (patched.ok)
+        wrote(namespace);
+      return fromResult(patched, 200);
+    },
+    "DELETE /state/:collection/:id": ({ namespace, params }) => {
+      const scope = open(namespace);
+      if (!scope.ok)
+        return fromResult(scope, 200);
+      const removed = deleteStateRecord(scope.value, params.collection ?? "", params.id ?? "");
+      if (removed.ok)
+        wrote(namespace);
+      return fromResult(removed, 200);
+    }
+  };
+};
+
 // ../core/dist/version.js
-var PACKAGE_VERSION = true ? "1.3.0" : UNRELEASED_VERSION;
+var PACKAGE_VERSION = true ? "1.4.0" : UNRELEASED_VERSION;
 
 // ../core/dist/webhooks.js
-var json2 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
-var adminError2 = (status, message) => json2(status, { error: { type: "mockingbird_admin", message } });
-var isRecord3 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var json4 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+var adminError3 = (status, message) => json4(status, { error: { type: "mockingbird_admin", message } });
+var isRecord4 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var parseEndpoint = (value) => {
-  if (!isRecord3(value) || typeof value.url !== "string")
+  if (!isRecord4(value) || typeof value.url !== "string")
     return "each endpoint needs a url";
   try {
     new URL(value.url);
@@ -1630,18 +2996,18 @@ var parseEndpoint = (value) => {
   const events = value.events ?? value.enabledEvents;
   if (Array.isArray(events))
     endpoint.events = events.map(String);
-  if (isRecord3(value.tags)) {
+  if (isRecord4(value.tags)) {
     endpoint.tags = Object.fromEntries(Object.entries(value.tags).map(([k, v]) => [k, String(v)]));
   }
   if (typeof value.account === "string")
     endpoint.tags = { ...endpoint.tags, account: value.account };
-  if (isRecord3(value.headers)) {
+  if (isRecord4(value.headers)) {
     endpoint.headers = Object.fromEntries(Object.entries(value.headers).map(([k, v]) => [k, String(v)]));
   }
   return endpoint;
 };
 var webhookAdminRoutes = (hub) => ({
-  "GET /webhooks": ({ url, namespace }) => json2(200, {
+  "GET /webhooks": ({ url, namespace }) => json4(200, {
     deliveries: hub.deliveries(url.searchParams.get("all") === "1" ? void 0 : namespace).filter((d) => {
       const type = url.searchParams.get("type");
       return type === null || d.type === type;
@@ -1649,51 +3015,51 @@ var webhookAdminRoutes = (hub) => ({
   }),
   "GET /webhooks/events": ({ url, namespace }) => {
     const type = url.searchParams.get("type");
-    return json2(200, {
+    return json4(200, {
       events: hub.messages(url.searchParams.get("all") === "1" ? void 0 : namespace).filter((m) => type === null || m.type === type).map((m) => ({ ...m, payload: parsePayload(m) }))
     });
   },
   "POST /webhooks/:id/replay": async ({ params }) => {
     const replayed = await hub.replay(params.id);
-    return replayed ? json2(200, replayed) : adminError2(404, `no delivery ${params.id}`);
+    return replayed ? json4(200, replayed) : adminError3(404, `no delivery ${params.id}`);
   },
   "POST /webhooks/flush": async () => {
     await hub.flush();
-    return json2(200, { status: "ok" });
+    return json4(200, { status: "ok" });
   },
   "POST /webhooks/faults": ({ body, namespace }) => {
-    if (!isRecord3(body) || !["duplicate", "reorder", "drop"].includes(String(body.mode))) {
-      return adminError2(400, "mode must be duplicate, reorder or drop");
+    if (!isRecord4(body) || !["duplicate", "reorder", "drop"].includes(String(body.mode))) {
+      return adminError3(400, "mode must be duplicate, reorder or drop");
     }
     const fault = { mode: body.mode };
     if (typeof body.count === "number")
       fault.count = body.count;
     hub.fault(namespace, fault);
-    return json2(201, { namespace, ...fault });
+    return json4(201, { namespace, ...fault });
   },
-  "GET /webhook-endpoints": ({ namespace }) => json2(200, {
+  "GET /webhook-endpoints": ({ namespace }) => json4(200, {
     endpoints: hub.endpoints(namespace).map(({ secret, ...rest }) => ({
       ...rest,
       secret: secret ? "(set)" : null
     }))
   }),
   "PUT /webhook-endpoints": ({ body, namespace }) => {
-    const list = Array.isArray(body) ? body : isRecord3(body) ? body.endpoints : void 0;
+    const list = Array.isArray(body) ? body : isRecord4(body) ? body.endpoints : void 0;
     if (!Array.isArray(list))
-      return adminError2(400, "expected [{url, secret?, events?}]");
+      return adminError3(400, "expected [{url, secret?, events?}]");
     const parsed = [];
     for (const each of list) {
       const endpoint = parseEndpoint(each);
       if (typeof endpoint === "string")
-        return adminError2(400, endpoint);
+        return adminError3(400, endpoint);
       parsed.push(endpoint);
     }
     const set = hub.setEndpoints(namespace, parsed);
-    return json2(200, { endpoints: set.map((e) => ({ ...e, secret: e.secret ? "(set)" : null })) });
+    return json4(200, { endpoints: set.map((e) => ({ ...e, secret: e.secret ? "(set)" : null })) });
   },
   "DELETE /webhook-endpoints": ({ namespace }) => {
     hub.setEndpoints(namespace, []);
-    return json2(200, { status: "ok" });
+    return json4(200, { status: "ok" });
   }
 });
 var parsePayload = (message) => {
@@ -1758,6 +3124,7 @@ var operationMatcher = (document2) => {
   return (request, path) => matchers.find((m) => m.method === request.method && m.pattern.test(path))?.operationId;
 };
 var createRuntime = (options) => {
+  assertAdminUi(options.adminUi);
   const sqlite = bootSqlite(options.sqlite);
   const clock = options.clock ?? createClock();
   const rng = createRng(options.seed ?? 0);
@@ -1964,6 +3331,19 @@ var createRuntime = (options) => {
     else
       timeline(name);
   };
+  const declarationsFor = (namespace) => {
+    const declared = options.state;
+    if (!declared)
+      return [];
+    return typeof declared === "function" ? declared(instance(namespace), namespace) : declared;
+  };
+  const stateScope = (namespace) => ({
+    sqlite,
+    namespace,
+    storageNamespace: storageNamespace(namespace),
+    root: instance(namespace),
+    declarations: declarationsFor(namespace)
+  });
   const runtime = {
     name: options.name,
     sqlite,
@@ -2002,6 +3382,7 @@ var createRuntime = (options) => {
     branch,
     checkout,
     timeline,
+    state: (namespace = DEFAULT_NAMESPACE) => inspectState(stateScope(namespace)),
     fetch: async (incoming) => {
       let request = incoming;
       const prefixed = PATH_PREFIX.exec(new URL(request.url).pathname);
@@ -2195,11 +3576,20 @@ var createRuntime = (options) => {
       ...credentialRoutes(credentials),
       ...options.presets ? presetRoutes(options.presets, runtime) : {},
       ...options.webhooks ? webhookAdminRoutes(options.webhooks) : {},
-      ...options.admin?.(runtime) ?? {}
+      ...options.admin?.(runtime) ?? {},
+      // Standard state and UI routes win a colliding key. A service adds its own keys
+      // beside these; it does not replace `/state` or `/ui`.
+      ...stateAdminRoutes({
+        open: stateScope,
+        afterWrite: (namespace) => {
+          checkpoint(namespace, "main");
+        }
+      }),
+      ...adminUiRoutes(options.name, options.adminUi)
     },
     adminKey: options.adminKey
   });
-  return runtime;
+  return defineMock(runtime);
 };
 var mutableResponse = (response) => {
   try {
@@ -2413,45 +3803,102 @@ var PLANE_PRESETS = {
     rules: [{ pathPrefix: API, method: "GET", effect: "pagination_repeated_cursor" }]
   }
 };
-var json3 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
-var adminError3 = (status, message) => json3(status, { error: { type: "mockingbird_admin", message } });
-var isRecord4 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var PLANE_STATE = [
+  {
+    name: "projects",
+    label: "Projects",
+    description: "Projects pinned in settings or created through the API."
+  },
+  {
+    name: "states",
+    label: "States",
+    description: "Workflow states, grouped the way Plane groups them."
+  },
+  { name: "labels", label: "Labels" },
+  {
+    name: "work_items",
+    label: "Work items",
+    description: "Issues. The Move panel changes a state by id or by name."
+  },
+  { name: "comments", label: "Comments" },
+  { name: "links", label: "Links" },
+  {
+    name: "settings",
+    label: "Settings",
+    description: "API keys, the rate limit, and pinned projects."
+  },
+  { name: "rate_limits", label: "Rate limits" }
+];
+var MOVE_PANEL_HTML = `<form class="stack">
+  <label class="field">Work item id
+    <input name="id" required autocomplete="off" spellcheck="false">
+  </label>
+  <label class="field">State name or id
+    <input name="state" required placeholder="Done" autocomplete="off">
+  </label>
+  <div class="row-actions">
+    <button class="btn-primary" type="submit">Move</button>
+  </div>
+  <pre data-result hidden></pre>
+</form>`;
+var MOVE_PANEL_SCRIPT = `
+const form = root.querySelector("form")
+const out = root.querySelector("[data-result]")
+form.addEventListener("submit", (event) => {
+  event.preventDefault()
+  const data = new FormData(form)
+  const id = String(data.get("id") || "").trim()
+  const stateName = String(data.get("state") || "").trim()
+  api.send("POST", "/work-items/" + encodeURIComponent(id) + "/state", { state: stateName })
+    .then((item) => {
+      out.hidden = false
+      out.textContent = JSON.stringify(item, null, 2)
+    })
+    .catch((error) => {
+      out.hidden = false
+      out.textContent = error instanceof Error ? error.message : String(error)
+    })
+})
+`.trim();
+var json5 = (status, body) => new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+var adminError4 = (status, message) => json5(status, { error: { type: "mockingbird_admin", message } });
+var isRecord5 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var adminRoutes = (runtime) => ({
-  "GET /work-items": ({ namespace }) => json3(200, { work_items: runtime.instance(namespace).workItems() }),
+  "GET /work-items": ({ namespace }) => json5(200, { work_items: runtime.instance(namespace).workItems() }),
   "POST /work-items/:id/state": ({ params, body, namespace }) => {
-    if (!isRecord4(body) || typeof body.state !== "string") {
-      return adminError3(400, 'expected {"state": "<state id or name, e.g. Done>"}');
+    if (!isRecord5(body) || typeof body.state !== "string") {
+      return adminError4(400, 'expected {"state": "<state id or name, e.g. Done>"}');
     }
     const item = runtime.instance(namespace).moveToState(params.id, body.state);
-    return item ? json3(200, item) : adminError3(404, `no work item ${params.id} or state ${body.state}`);
+    return item ? json5(200, item) : adminError4(404, `no work item ${params.id} or state ${body.state}`);
   },
   "POST /projects": ({ body, namespace }) => {
-    if (!isRecord4(body) || typeof body.workspace !== "string" || typeof body.project !== "string") {
-      return adminError3(400, 'expected {"workspace": "<slug>", "project": "<uuid>"}');
+    if (!isRecord5(body) || typeof body.workspace !== "string" || typeof body.project !== "string") {
+      return adminError4(400, 'expected {"workspace": "<slug>", "project": "<uuid>"}');
     }
     const api = runtime.instance(namespace);
     const project = api.ensureProject(body.workspace, body.project);
-    return project ? json3(200, { project, states: api.statesOf(project.id), labels: api.labelsOf(project.id) }) : adminError3(409, "project is not in settings.projects");
+    return project ? json5(200, { project, states: api.statesOf(project.id), labels: api.labelsOf(project.id) }) : adminError4(409, "project is not in settings.projects");
   },
-  "GET /settings": ({ namespace }) => json3(200, runtime.instance(namespace).state.current()),
+  "GET /settings": ({ namespace }) => json5(200, runtime.instance(namespace).state.current()),
   "PUT /settings": ({ body, namespace }) => {
-    if (!isRecord4(body)) return adminError3(400, "expected a JSON object");
+    if (!isRecord5(body)) return adminError4(400, "expected a JSON object");
     const patch = {};
     if (body.apiKeys !== void 0) {
-      if (!Array.isArray(body.apiKeys)) return adminError3(400, "apiKeys: string[]");
+      if (!Array.isArray(body.apiKeys)) return adminError4(400, "apiKeys: string[]");
       patch.apiKeys = body.apiKeys.map(String);
     }
     if (body.rateLimitPerMinute !== void 0) {
       if (body.rateLimitPerMinute !== null && typeof body.rateLimitPerMinute !== "number") {
-        return adminError3(400, "rateLimitPerMinute: number | null");
+        return adminError4(400, "rateLimitPerMinute: number | null");
       }
       patch.rateLimitPerMinute = body.rateLimitPerMinute;
     }
     if (body.projects !== void 0) {
-      if (!Array.isArray(body.projects)) return adminError3(400, 'projects: ["<slug>/<uuid>"]');
+      if (!Array.isArray(body.projects)) return adminError4(400, 'projects: ["<slug>/<uuid>"]');
       patch.projects = body.projects.map(String);
     }
-    return json3(200, runtime.instance(namespace).state.update(patch));
+    return json5(200, runtime.instance(namespace).state.update(patch));
   }
 });
 var createRuntime2 = (options = {}) => createRuntime({
@@ -2464,6 +3911,18 @@ var createRuntime2 = (options = {}) => createRuntime({
   ...options.onLog ? { onLog: options.onLog } : {},
   credential: apiKeyCredential,
   presets: PLANE_PRESETS,
+  state: PLANE_STATE,
+  adminUi: {
+    panels: [
+      {
+        id: "move-work-item",
+        title: "Move a work item",
+        description: "Uses Plane's admin route, which resolves a state by id or by name.",
+        html: MOVE_PANEL_HTML,
+        script: MOVE_PANEL_SCRIPT
+      }
+    ]
+  },
   create: ({ sqlite, namespace, clock }) => new PlaneAPI({
     sqlite,
     namespace,
@@ -2880,4 +4339,4 @@ export {
   apiKeyCredential,
   PlaneAPI
 };
-//# sourceMappingURL=chunk-Z2PXMJXO.js.map
+//# sourceMappingURL=chunk-CCLSLHDJ.js.map