@fonderie/vue-admin-screens 1.1.0 → 1.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent13, h as h15, onBeforeUnmount, onMounted, ref as ref6 } from "vue";
+import { computed as computed2, defineComponent as defineComponent14, h as h16, onBeforeUnmount, onMounted, ref as ref7 } from "vue";
 
 // src/styles.ts
 var t = {
@@ -1167,42 +1167,319 @@ var MigrationsScreen = defineComponent7({
   }
 });
 
+// src/screens/OperatorsScreen.ts
+import { useAdminOperators } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent8, h as h10, ref as ref2 } from "vue";
+var LEVELS = [
+  { label: "Read only", scopes: ["read"], hint: "look around, change nothing" },
+  { label: "Editor", scopes: ["read", "write"], hint: "change config, templates, users" },
+  {
+    label: "Owner",
+    scopes: ["read", "write", "secrets"],
+    hint: "secrets, tokens and operators too"
+  }
+];
+var levelOf = (scopes) => scopes.includes("secrets") ? "Owner" : scopes.includes("write") ? "Editor" : "Read only";
+var scopesFor = (label) => LEVELS.find((l) => l.label === label)?.scopes ?? ["read"];
+var small = { height: "28px" };
+var OperatorsScreen = defineComponent8({
+  name: "FonderieOperatorsScreen",
+  props: {
+    client: { type: Object, required: true },
+    // The signed-in operator's email: their own row offers no disable or
+    // recovery (the server refuses both for yourself anyway).
+    me: { type: String, default: void 0 }
+  },
+  setup(props) {
+    const { report, isLoading, error, invite, recover, update, revokeLink } = useAdminOperators(
+      props.client
+    );
+    const email = ref2("");
+    const level = ref2("Editor");
+    const minted = ref2(null);
+    const copied = ref2(false);
+    const status = (o) => o.disabledAt ? pill("neutral", "disabled") : o.locked ? pill("warn", "locked") : !o.enrolled ? pill("warn", "setting up") : pill("ok", "active");
+    const mintedNotice = (link) => {
+      const url = `${window.location.origin}${link.url}`;
+      return h10(
+        "div",
+        {
+          style: {
+            ...styles.notice,
+            background: "color-mix(in srgb, var(--fonderie-accent,#00d294) 10%, transparent)",
+            borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
+          }
+        },
+        [
+          h10("strong", `Send this link to ${link.email}. It is shown once.`),
+          ` It works once and expires ${new Date(link.expiresAt).toLocaleString()}.`,
+          h10(
+            "div",
+            { style: { display: "flex", gap: "8px", marginTop: "8px", alignItems: "center" } },
+            [
+              h10(
+                "code",
+                { style: { ...styles.code, flex: 1, padding: "7px 10px", wordBreak: "break-all" } },
+                url
+              ),
+              h10(
+                "button",
+                {
+                  type: "button",
+                  style: styles.button,
+                  onClick: () => {
+                    void navigator.clipboard?.writeText(url);
+                    copied.value = true;
+                  }
+                },
+                copied.value ? "Copied" : "Copy"
+              ),
+              h10(
+                "button",
+                {
+                  type: "button",
+                  style: styles.buttonGhost,
+                  "aria-label": "Dismiss",
+                  onClick: () => {
+                    minted.value = null;
+                    copied.value = false;
+                  }
+                },
+                [icon("close", 14)]
+              )
+            ]
+          )
+        ]
+      );
+    };
+    const setMinted = (l) => {
+      copied.value = false;
+      minted.value = l;
+    };
+    return () => {
+      const r = report.value;
+      const e = error.value;
+      return h10("div", { style: styles.container }, [
+        pageHeader(
+          "Operators",
+          "The people who can sign in to this console. Each one uses a password and an authenticator app; there is no sign-up."
+        ),
+        e ? h10(
+          "p",
+          { style: styles.error, role: "alert" },
+          e.status === 403 && e.reason === "FORBIDDEN" ? "Managing operators needs the Owner level." : e.explanation
+        ) : null,
+        minted.value ? mintedNotice(minted.value) : null,
+        h10(
+          "form",
+          {
+            style: {
+              ...styles.card,
+              display: "flex",
+              gap: "8px",
+              alignItems: "center",
+              flexWrap: "wrap",
+              marginBottom: "20px"
+            },
+            onSubmit: (ev) => {
+              ev.preventDefault();
+              void invite({ email: email.value.trim(), scopes: scopesFor(level.value) }).then((l) => {
+                setMinted(l);
+                email.value = "";
+              }).catch(() => {
+              });
+            }
+          },
+          [
+            icon("users", 16),
+            h10("strong", { style: { fontSize: "13.5px", marginRight: "4px" } }, "Invite"),
+            h10("input", {
+              type: "email",
+              required: true,
+              value: email.value,
+              onInput: (ev) => email.value = ev.target.value,
+              placeholder: "teammate@company.com",
+              style: { ...styles.input, flex: 1, minWidth: "220px" },
+              "aria-label": "Email to invite"
+            }),
+            h10(
+              "select",
+              {
+                value: level.value,
+                onChange: (ev) => level.value = ev.target.value,
+                style: styles.input,
+                "aria-label": "Access level"
+              },
+              LEVELS.map(
+                (l) => h10("option", { key: l.label, value: l.label }, `${l.label} \u2014 ${l.hint}`)
+              )
+            ),
+            h10(
+              "button",
+              { type: "submit", style: styles.buttonPrimary, disabled: !email.value.trim() },
+              [icon("plus", 14), "Create invite link"]
+            )
+          ]
+        ),
+        isLoading.value && !r ? h10("p", { style: styles.status }, "Loading\u2026") : r && r.operators.length === 0 ? empty("No operators yet", void 0, "users") : r ? table(
+          ["Operator", "Access", "Status", "Last sign-in", ""],
+          r.operators.map((o) => {
+            const mine = o.email === props.me;
+            return h10("tr", { key: o.id }, [
+              td([
+                h10("div", { style: { fontWeight: 600 } }, o.name || o.email),
+                o.name ? h10("div", { style: styles.muted }, o.email) : null
+              ]),
+              td(
+                h10(
+                  "select",
+                  {
+                    value: levelOf(o.scopes),
+                    disabled: mine,
+                    onChange: (ev) => void update(o.id, {
+                      scopes: scopesFor(ev.target.value)
+                    }).catch(() => {
+                    }),
+                    style: { ...styles.input, ...small, fontSize: "12.5px" },
+                    "aria-label": `Access level for ${o.email}`
+                  },
+                  LEVELS.map((l) => h10("option", { key: l.label, value: l.label }, l.label))
+                )
+              ),
+              td([
+                status(o),
+                o.enrolled && o.backupCodesLeft <= 2 && !o.disabledAt ? h10(
+                  "div",
+                  { style: { ...styles.muted, marginTop: "4px" } },
+                  `${o.backupCodesLeft} backup code(s) left`
+                ) : null
+              ]),
+              td(o.lastLoginAt ? new Date(o.lastLoginAt).toLocaleString() : "never", {
+                ...styles.muted,
+                whiteSpace: "nowrap"
+              }),
+              td(
+                mine ? h10("span", { style: styles.muted }, "you") : [
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.button, ...small, marginRight: "6px" },
+                      onClick: () => {
+                        if (window.confirm(
+                          `Create a recovery link for ${o.email}? It signs them out everywhere; the link sets a new password and a new authenticator.`
+                        ))
+                          void recover(o.id).then(setMinted).catch(() => {
+                          });
+                      }
+                    },
+                    "Recovery link"
+                  ),
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: {
+                        ...o.disabledAt ? styles.button : styles.buttonDanger,
+                        ...small
+                      },
+                      onClick: () => {
+                        if (o.disabledAt || window.confirm(
+                          `Disable ${o.email}? They are signed out immediately.`
+                        ))
+                          void update(o.id, { disabled: !o.disabledAt }).catch(
+                            () => {
+                            }
+                          );
+                      }
+                    },
+                    o.disabledAt ? "Enable" : "Disable"
+                  )
+                ],
+                { textAlign: "right", whiteSpace: "nowrap" }
+              )
+            ]);
+          })
+        ) : null,
+        r && r.links.length > 0 ? [
+          h10("h2", { style: styles.subtitle }, "Pending links"),
+          h10(
+            "ul",
+            { style: styles.list },
+            r.links.map(
+              (l) => h10(
+                "li",
+                {
+                  key: l.id,
+                  style: { ...styles.row, display: "flex", gap: "12px", alignItems: "center" }
+                },
+                [
+                  pill(l.kind === "invite" ? "info" : "warn", l.kind, false),
+                  h10("span", { style: { flex: 1 } }, [
+                    l.email,
+                    l.kind === "invite" ? h10("span", { style: styles.muted }, ` \xB7 ${levelOf(l.scopes)}`) : null
+                  ]),
+                  h10(
+                    "span",
+                    { style: styles.muted },
+                    `expires ${new Date(l.expiresAt).toLocaleString()}`
+                  ),
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.buttonDanger, ...small },
+                      onClick: () => void revokeLink(l.id).catch(() => {
+                      })
+                    },
+                    "Revoke"
+                  )
+                ]
+              )
+            )
+          )
+        ] : null
+      ]);
+    };
+  }
+});
+
 // src/screens/TokensScreen.ts
 import { useAdminTokens } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent8, h as h10, ref as ref2 } from "vue";
+import { defineComponent as defineComponent9, h as h11, ref as ref3 } from "vue";
 var ALL = ["read", "write", "secrets"];
-var TokensScreen = defineComponent8({
+var TokensScreen = defineComponent9({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { report, isLoading, error, issue, revoke } = useAdminTokens(props.client);
-    const name = ref2("");
-    const scopes = ref2(["read"]);
-    const days = ref2("");
-    const minted = ref2(null);
+    const name = ref3("");
+    const scopes = ref3(["read"]);
+    const days = ref3("");
+    const minted = ref3(null);
     const toggle = (s) => scopes.value = scopes.value.includes(s) ? scopes.value.filter((x) => x !== s) : [...scopes.value, s];
     return () => {
       const r = report.value;
-      return h10("div", { style: styles.container }, [
+      return h11("div", { style: styles.container }, [
         pageHeader(
-          "Access",
-          "Who can open this surface: the root token's strength, scoped tokens you have issued, and any legacy per-module tokens."
+          "Tokens",
+          "Credentials for machines: the root token's strength, scoped tokens for the CLI and CI, and any legacy per-module tokens. People sign in as operators."
         ),
-        error.value ? h10(
+        error.value ? h11(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.value.explanation
         ) : null,
-        h10("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Root token"),
-        r ? h10(
+        h11("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Root token"),
+        r ? h11(
           "div",
           { style: { ...styles.card, display: "flex", gap: "12px", alignItems: "flex-start" } },
           [
             icon("lock", 18, { marginTop: "2px" }),
-            h10("div", [
+            h11("div", [
               pill(r.admin.ok ? "ok" : "bad", r.admin.ok ? "strong" : "weak"),
               ...r.admin.problems.map(
-                (p) => h10(
+                (p) => h11(
                   "div",
                   {
                     key: p.message,
@@ -1218,13 +1495,13 @@ var TokensScreen = defineComponent8({
             ])
           ]
         ) : null,
-        h10("h2", { style: styles.subtitle }, "Issued tokens"),
-        r?.issued === null ? h10(
+        h11("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? h11(
           "p",
           { style: styles.muted },
           "Issuing is off \u2014 give AdminModule a store and run its migrations."
         ) : [
-          minted.value ? h10(
+          minted.value ? h11(
             "div",
             {
               style: {
@@ -1234,9 +1511,9 @@ var TokensScreen = defineComponent8({
               }
             },
             [
-              h10("strong", "Copy this now \u2014 it is never shown again."),
+              h11("strong", "Copy this now \u2014 it is never shown again."),
               ` (${minted.value.name})`,
-              h10(
+              h11(
                 "div",
                 {
                   style: {
@@ -1251,7 +1528,7 @@ var TokensScreen = defineComponent8({
               )
             ]
           ) : null,
-          h10(
+          h11(
             "form",
             {
               style: styles.toolbar,
@@ -1271,7 +1548,7 @@ var TokensScreen = defineComponent8({
               }
             },
             [
-              h10("input", {
+              h11("input", {
                 value: name.value,
                 onInput: (e) => name.value = e.target.value,
                 placeholder: "name",
@@ -1279,7 +1556,7 @@ var TokensScreen = defineComponent8({
                 "aria-label": "Name"
               }),
               ...ALL.map(
-                (s) => h10(
+                (s) => h11(
                   "label",
                   {
                     key: s,
@@ -1293,7 +1570,7 @@ var TokensScreen = defineComponent8({
                     }
                   },
                   [
-                    h10("input", {
+                    h11("input", {
                       type: "checkbox",
                       checked: scopes.value.includes(s),
                       onChange: () => toggle(s)
@@ -1302,14 +1579,14 @@ var TokensScreen = defineComponent8({
                   ]
                 )
               ),
-              h10("input", {
+              h11("input", {
                 value: days.value,
                 onInput: (e) => days.value = e.target.value,
                 placeholder: "days (optional)",
                 style: { ...styles.input, width: "140px" },
                 "aria-label": "Days"
               }),
-              h10(
+              h11(
                 "button",
                 {
                   type: "submit",
@@ -1323,7 +1600,7 @@ var TokensScreen = defineComponent8({
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t2) => h10("tr", { key: t2.id }, [
+              (t2) => h11("tr", { key: t2.id }, [
                 td([t2.name, t2.revokedAt ? [" ", pill("neutral", "revoked")] : ""]),
                 td(t2.scopes.join(", "), styles.mono),
                 td(
@@ -1339,7 +1616,7 @@ var TokensScreen = defineComponent8({
                   styles.muted
                 ),
                 td(
-                  t2.revokedAt ? "" : h10(
+                  t2.revokedAt ? "" : h11(
                     "button",
                     {
                       type: "button",
@@ -1363,19 +1640,19 @@ var TokensScreen = defineComponent8({
             "tokens"
           )
         ],
-        h10("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r && r.legacy.length === 0 ? h10(
+        h11("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r && r.legacy.length === 0 ? h11(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
-        ) : h10(
+        ) : h11(
           "ul",
           { style: styles.list },
           (r?.legacy ?? []).map(
-            (l) => h10("li", { key: l.module, style: styles.row }, [
-              h10("span", { style: styles.mono }, l.module),
+            (l) => h11("li", { key: l.module, style: styles.row }, [
+              h11("span", { style: styles.mono }, l.module),
               " ",
-              h10(
+              h11(
                 "span",
                 { style: styles.muted },
                 "still registers its standalone routes with its own token (deprecated)"
@@ -1396,17 +1673,17 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent9, h as h11, ref as ref3 } from "vue";
-var UsersScreen = defineComponent9({
+import { computed, defineComponent as defineComponent10, h as h12, ref as ref4 } from "vue";
+var UsersScreen = defineComponent10({
   name: "FonderieUsersScreen",
   props: {
     client: { type: Object, required: true },
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const input = ref3("");
-    const email = ref3("");
-    const selectedId = ref3("");
+    const input = ref4("");
+    const email = ref4("");
+    const selectedId = ref4("");
     const list = useAdminUsers(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
@@ -1417,7 +1694,7 @@ var UsersScreen = defineComponent9({
     const history = useAdminLoginHistory(props.client, userId, { limit: 20 });
     const showList = computed(() => !email.value && !selectedId.value);
     const yesNo = (v) => v ? pill("ok", "yes") : pill("neutral", "no");
-    const row = (k, v) => h11("tr", [td(k), td(v)]);
+    const row = (k, v) => h12("tr", [td(k), td(v)]);
     const clear = () => {
       email.value = "";
       selectedId.value = "";
@@ -1425,12 +1702,12 @@ var UsersScreen = defineComponent9({
     };
     return () => {
       const u = user.value;
-      return h11("div", { style: styles.container }, [
+      return h12("div", { style: styles.container }, [
         pageHeader(
           "Users",
           "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
         ),
-        h11(
+        h12(
           "form",
           {
             style: styles.toolbar,
@@ -1441,7 +1718,7 @@ var UsersScreen = defineComponent9({
             }
           },
           [
-            h11("input", {
+            h12("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
@@ -1449,7 +1726,7 @@ var UsersScreen = defineComponent9({
               style: { ...styles.input, minWidth: "280px" },
               "aria-label": "Email"
             }),
-            h11(
+            h12(
               "button",
               { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
               [icon("search", 14), "Look up"]
@@ -1457,14 +1734,14 @@ var UsersScreen = defineComponent9({
             showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost)
           ]
         ),
-        showList.value ? h11("div", [
-          list.error.value ? h11("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+        showList.value ? h12("div", [
+          list.error.value ? h12("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
           list.users.value.length === 0 && !list.isLoading.value ? empty("No users yet", "Sign-ups appear here as they happen.", "users") : table(
             ["Email", "Name", "Created", "Status"],
             list.users.value.map(
-              (u2) => h11("tr", { key: u2.id }, [
+              (u2) => h12("tr", { key: u2.id }, [
                 td(
-                  h11(
+                  h12(
                     "button",
                     {
                       type: "button",
@@ -1475,7 +1752,7 @@ var UsersScreen = defineComponent9({
                   )
                 ),
                 td(
-                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h11("span", { style: styles.muted }, "\u2014")
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h12("span", { style: styles.muted }, "\u2014")
                 ),
                 td(new Date(u2.createdAt).toLocaleDateString()),
                 td(
@@ -1484,24 +1761,24 @@ var UsersScreen = defineComponent9({
               ])
             )
           ),
-          list.isLoading.value ? h11("p", { style: styles.status }, "Loading\u2026") : null,
+          list.isLoading.value ? h12("p", { style: styles.status }, "Loading\u2026") : null,
           list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
         ]) : null,
-        error.value ? h11(
+        error.value ? h12(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
         u ? [
-          h11("h2", { style: styles.subtitle }, [
+          h12("h2", { style: styles.subtitle }, [
             u.firstName || u.lastName ? `${u.firstName} ${u.lastName}`.trim() : u.email,
             " ",
             u.suspended ? pill("warn", "suspended") : null,
             u.deletedAt ? pill("neutral", "deleted") : null
           ]),
-          h11("table", { style: styles.table }, [
-            h11("tbody", [
-              row("id", h11("span", { style: styles.mono }, u.id)),
+          h12("table", { style: styles.table }, [
+            h12("tbody", [
+              row("id", h12("span", { style: styles.mono }, u.id)),
               row("email", [u.email, " \xB7 verified ", yesNo(u.isEmailVerified)]),
               row("MFA", yesNo(u.mfaEnabled)),
               row(
@@ -1510,12 +1787,12 @@ var UsersScreen = defineComponent9({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h11("span", { style: styles.muted }, "never")
+                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h12("span", { style: styles.muted }, "never")
               ),
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          h11("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          h12("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
               "Suspend",
               isLoading.value,
@@ -1528,19 +1805,19 @@ var UsersScreen = defineComponent9({
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          h11("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h11("p", { style: styles.muted }, "None.") : h11(
+          h12("h2", { style: styles.subtitle }, "Live sessions"),
+          sessions.sessions.value.length === 0 ? h12("p", { style: styles.muted }, "None.") : h12(
             "ul",
             { style: styles.list },
             sessions.sessions.value.map(
-              (s) => h11("li", { key: s.id, style: styles.row }, [
-                h11("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => h12("li", { key: s.id, style: styles.row }, [
+                h12("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                h11("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
+                h12("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
                 " ",
-                h11("span", { style: styles.muted }, s.userAgent ?? ""),
+                h12("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                h11(
+                h12(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -1548,22 +1825,22 @@ var UsersScreen = defineComponent9({
               ])
             )
           ),
-          h11("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h11("p", { style: styles.muted }, "None recorded.") : h11(
+          h12("h2", { style: styles.subtitle }, "Recent sign-ins"),
+          history.events.value.length === 0 && !history.isLoading.value ? h12("p", { style: styles.muted }, "None recorded.") : h12(
             "ul",
             { style: styles.list },
             history.events.value.map(
-              (e) => h11("li", { key: e.id, style: styles.row }, [
+              (e) => h12("li", { key: e.id, style: styles.row }, [
                 pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
                 " ",
-                h11("span", { style: styles.muted }, e.method),
+                h12("span", { style: styles.muted }, e.method),
                 " ",
-                h11("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                h12("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
                 " ",
-                h11("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
+                h12("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
                 e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
                 " ",
-                h11("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                h12("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
@@ -1576,8 +1853,8 @@ var UsersScreen = defineComponent9({
 
 // src/screens/CatalogScreen.ts
 import { useAdminCatalog } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent10, h as h12 } from "vue";
-var CatalogScreen = defineComponent10({
+import { defineComponent as defineComponent11, h as h13 } from "vue";
+var CatalogScreen = defineComponent11({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
@@ -1585,17 +1862,17 @@ var CatalogScreen = defineComponent10({
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return h12("div", { style: styles.container }, [
+      return h13("div", { style: styles.container }, [
         pageHeader(
           "Catalog",
           "What you sell: plans as configured in code, and as stored in the database, side by side.",
           [refreshButton("Refresh", isLoading.value, () => void refresh())]
         ),
-        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? h12("p", { style: styles.status }, "Loading\u2026") : null,
+        error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? h13("p", { style: styles.status }, "Loading\u2026") : null,
         c ? [
-          h12("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
-          h12(
+          h13("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
+          h13(
             "pre",
             {
               style: {
@@ -1609,7 +1886,7 @@ var CatalogScreen = defineComponent10({
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          h12("h2", { style: styles.subtitle }, "Stored (database)"),
+          h13("h2", { style: styles.subtitle }, "Stored (database)"),
           c.stored.length === 0 ? empty(
             "No stored plans",
             "Plans are configured in code; nothing has been written to the database.",
@@ -1617,10 +1894,10 @@ var CatalogScreen = defineComponent10({
           ) : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => h12("tr", { key: p.id }, [
+              (p) => h13("tr", { key: p.id }, [
                 td([
-                  h12("strong", p.name),
-                  p.description ? h12("div", { style: styles.muted }, p.description) : ""
+                  h13("strong", p.name),
+                  p.description ? h13("div", { style: styles.muted }, p.description) : ""
                 ]),
                 td(String(p.tier)),
                 td(p.seats == null ? "\u221E" : String(p.seats)),
@@ -1628,7 +1905,7 @@ var CatalogScreen = defineComponent10({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  h12(
+                  h13(
                     "button",
                     {
                       type: "button",
@@ -1653,17 +1930,17 @@ var CatalogScreen = defineComponent10({
 
 // src/screens/SubscriberScreen.ts
 import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h13, ref as ref4 } from "vue";
-var SubscriberScreen = defineComponent11({
+import { defineComponent as defineComponent12, h as h14, ref as ref5 } from "vue";
+var SubscriberScreen = defineComponent12({
   name: "FonderieSubscriberScreen",
   props: {
     client: { type: Object, required: true },
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const type = ref4("user");
-    const idInput = ref4("");
-    const subscriber = ref4(null);
+    const type = ref5("user");
+    const idInput = ref5("");
+    const subscriber = ref5(null);
     const list = useAdminSubscribers(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
     const open = (t2, id) => {
@@ -1672,10 +1949,10 @@ var SubscriberScreen = defineComponent11({
       idInput.value = id;
       subscriber.value = { type: t2, id };
     };
-    const amount = ref4("");
-    const note = ref4("");
-    const granted = ref4(null);
-    const input = (model, placeholder, extra = {}) => h13("input", {
+    const amount = ref5("");
+    const note = ref5("");
+    const granted = ref5(null);
+    const input = (model, placeholder, extra = {}) => h14("input", {
       value: model.value,
       onInput: (e) => model.value = e.target.value,
       placeholder,
@@ -1685,12 +1962,12 @@ var SubscriberScreen = defineComponent11({
     return () => {
       const s = subscription.value;
       const w = wallet.value;
-      return h13("div", { style: styles.container }, [
+      return h14("div", { style: styles.container }, [
         pageHeader(
           "Subscribers",
           "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
         ),
-        h13(
+        h14(
           "form",
           {
             style: styles.toolbar,
@@ -1701,7 +1978,7 @@ var SubscriberScreen = defineComponent11({
             }
           },
           [
-            h13(
+            h14(
               "select",
               {
                 value: type.value,
@@ -1710,17 +1987,17 @@ var SubscriberScreen = defineComponent11({
                 "aria-label": "Type"
               },
               [
-                h13("option", { value: "user" }, "user"),
-                h13("option", { value: "workspace" }, "workspace")
+                h14("option", { value: "user" }, "user"),
+                h14("option", { value: "workspace" }, "workspace")
               ]
             ),
             input(idInput, "subscriber id", { minWidth: "280px" }),
-            h13(
+            h14(
               "button",
               { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
               [icon("search", 14), "Look up"]
             ),
-            subscriber.value ? h13(
+            subscriber.value ? h14(
               "button",
               {
                 type: "button",
@@ -1732,7 +2009,7 @@ var SubscriberScreen = defineComponent11({
                 }
               },
               [icon("back", 14), "All subscribers"]
-            ) : h13(
+            ) : h14(
               "button",
               {
                 type: "button",
@@ -1744,8 +2021,8 @@ var SubscriberScreen = defineComponent11({
             )
           ]
         ),
-        !subscriber.value ? h13("div", [
-          list.error.value ? h13("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+        !subscriber.value ? h14("div", [
+          list.error.value ? h14("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
           list.subscriptions.value.length === 0 && !list.isLoading.value ? empty(
             "No subscribers yet",
             "Subscriptions appear here once someone checks out.",
@@ -1753,9 +2030,9 @@ var SubscriberScreen = defineComponent11({
           ) : table(
             ["Subscriber", "Plan", "Status", "Renews"],
             list.subscriptions.value.map(
-              (sub) => h13("tr", { key: sub.id }, [
+              (sub) => h14("tr", { key: sub.id }, [
                 td(
-                  h13(
+                  h14(
                     "button",
                     {
                       type: "button",
@@ -1774,13 +2051,13 @@ var SubscriberScreen = defineComponent11({
                   sub.cancelAtPeriodEnd ? [" ", pill("warn", "cancels", false)] : null
                 ]),
                 td(
-                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h13("span", { style: styles.muted }, "\u2014")
+                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h14("span", { style: styles.muted }, "\u2014")
                 )
               ])
             )
           ),
-          list.isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? h13(
+          list.isLoading.value ? h14("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h14(
             "button",
             {
               type: "button",
@@ -1790,28 +2067,28 @@ var SubscriberScreen = defineComponent11({
             "Load more"
           ) : null
         ]) : null,
-        error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        error.value ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
         subscriber.value && !isLoading.value ? [
-          h13("h2", { style: styles.subtitle }, "Subscription"),
-          s ? h13("table", { style: styles.table }, [
-            h13("tbody", [
-              h13("tr", [td("plan"), td([h13("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              h13("tr", [
+          h14("h2", { style: styles.subtitle }, "Subscription"),
+          s ? h14("table", { style: styles.table }, [
+            h14("tbody", [
+              h14("tr", [td("plan"), td([h14("strong", s.plan), ` \xB7 ${s.interval}`])]),
+              h14("tr", [
                 td("status"),
                 td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
               ]),
-              h13("tr", [
+              h14("tr", [
                 td("period"),
                 td(
                   `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
                 )
               ]),
-              h13("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
+              h14("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
             ])
-          ]) : h13("p", { style: styles.muted }, "No subscription."),
-          h13("h2", { style: styles.subtitle }, "Wallet"),
+          ]) : h14("p", { style: styles.muted }, "No subscription."),
+          h14("h2", { style: styles.subtitle }, "Wallet"),
           w ? [
-            h13(
+            h14(
               "p",
               {
                 style: {
@@ -1823,7 +2100,7 @@ var SubscriberScreen = defineComponent11({
                 }
               },
               [
-                h13(
+                h14(
                   "strong",
                   {
                     style: {
@@ -1834,14 +2111,14 @@ var SubscriberScreen = defineComponent11({
                   w.balance
                 ),
                 ` ${w.currency} `,
-                h13(
+                h14(
                   "span",
                   { style: styles.muted },
                   `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
                 )
               ]
             ),
-            h13(
+            h14(
               "form",
               {
                 style: styles.toolbar,
@@ -1866,7 +2143,7 @@ var SubscriberScreen = defineComponent11({
               [
                 input(amount, "amount (minor units)"),
                 input(note, "reason (optional)", { minWidth: "220px" }),
-                h13(
+                h14(
                   "button",
                   {
                     type: "submit",
@@ -1875,14 +2152,14 @@ var SubscriberScreen = defineComponent11({
                   },
                   [icon("plus", 14), "Grant"]
                 ),
-                granted.value ? h13("span", { style: styles.ok }, granted.value) : null
+                granted.value ? h14("span", { style: styles.ok }, granted.value) : null
               ]
             ),
-            h13("h2", { style: styles.subtitle }, "Ledger"),
+            h14("h2", { style: styles.subtitle }, "Ledger"),
             ledger.value.length === 0 ? empty("Nothing moved yet", void 0, "subscriber") : table(
               ["When", "Kind", "Amount", "Note"],
               ledger.value.map(
-                (t2) => h13("tr", { key: t2.id }, [
+                (t2) => h14("tr", { key: t2.id }, [
                   td(new Date(t2.createdAt).toLocaleString(), styles.muted),
                   td(t2.type),
                   td(t2.amount, styles.mono),
@@ -1890,7 +2167,7 @@ var SubscriberScreen = defineComponent11({
                 ])
               )
             ),
-            hasMoreLedger.value ? h13(
+            hasMoreLedger.value ? h14(
               "button",
               {
                 type: "button",
@@ -1899,7 +2176,7 @@ var SubscriberScreen = defineComponent11({
               },
               "Load more"
             ) : null
-          ] : h13(
+          ] : h14(
             "p",
             { style: styles.muted },
             "No wallet \u2014 billing has no wallet configuration."
@@ -1912,33 +2189,33 @@ var SubscriberScreen = defineComponent11({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent12, h as h14, ref as ref5 } from "vue";
-var AuditScreen = defineComponent12({
+import { defineComponent as defineComponent13, h as h15, ref as ref6 } from "vue";
+var AuditScreen = defineComponent13({
   name: "FonderieAuditScreen",
   props: {
     client: { type: Object, required: true },
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = ref5({ workspaceId: "", type: "", actorId: "" });
-    const query = ref5({ limit: props.pageSize });
+    const draft = ref6({ workspaceId: "", type: "", actorId: "" });
+    const query = ref6({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
       props.client,
       query
     );
-    const field = (key, placeholder) => h14("input", {
+    const field = (key, placeholder) => h15("input", {
       value: draft.value[key],
       onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
       placeholder,
       style: styles.input,
       "aria-label": placeholder
     });
-    return () => h14("div", { style: styles.container }, [
+    return () => h15("div", { style: styles.container }, [
       pageHeader(
         "Audit",
         "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
       ),
-      h14(
+      h15(
         "form",
         {
           style: styles.toolbar,
@@ -1957,7 +2234,7 @@ var AuditScreen = defineComponent12({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          h14(
+          h15(
             "button",
             { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
             [icon("search", 14), "Filter"]
@@ -1965,11 +2242,11 @@ var AuditScreen = defineComponent12({
           refreshButton("Refresh", isLoading.value, () => void refresh())
         ]
       ),
-      error.value ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      error.value ? h15("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
       events.value.length === 0 && !isLoading.value ? empty("Nothing recorded for this filter", void 0, "audit") : table(
         ["When", "Type", "Workspace", "Actor", "Request"],
         events.value.map(
-          (e) => h14("tr", { key: e.id }, [
+          (e) => h15("tr", { key: e.id }, [
             td(new Date(e.createdAt).toLocaleString(), styles.muted),
             td(e.type, styles.mono),
             td(String(e.payload["workspaceId"] ?? "\u2014"), styles.mono),
@@ -1978,7 +2255,7 @@ var AuditScreen = defineComponent12({
           ])
         )
       ),
-      isLoading.value ? h14("p", { style: styles.status }, "Loading\u2026") : null,
+      isLoading.value ? h15("p", { style: styles.status }, "Loading\u2026") : null,
       hasMore.value && !isLoading.value ? loadMoreButton(() => void loadMore()) : null
     ]);
   }
@@ -2011,7 +2288,8 @@ var NAV = [
     items: [
       { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
-      { page: "tokens", label: "Access" },
+      { page: "operators", label: "Operators", needs: "operators" },
+      { page: "tokens", label: "Tokens" },
       { page: "migrations", label: "Migrations" }
     ]
   }
@@ -2030,10 +2308,11 @@ var ICON = {
   audit: "audit",
   log: "log",
   tokens: "tokens",
+  operators: "users",
   migrations: "migrations"
 };
 var NARROW = "(max-width: 820px)";
-var AdminShell = defineComponent13({
+var AdminShell = defineComponent14({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -2055,62 +2334,72 @@ var AdminShell = defineComponent13({
     appName: { type: String, default: "Admin" },
     // A badge beside the name — the deployment's environment ("production").
     // Production is tinted so an operator always knows where their clicks land.
-    envLabel: { type: String, default: void 0 }
+    envLabel: { type: String, default: void 0 },
+    // The deployment has operator accounts (@fonderie/admin with a store):
+    // shows the Operators page.
+    operators: { type: Boolean, default: false },
+    // The signed-in operator's email, when a person (not a token) is signed in.
+    currentOperator: { type: String, default: void 0 }
   },
   // `footer` slot: pinned to the bottom of the sidebar — session controls
   // (theme, sign out). The React shell takes the same thing as a `footer` prop.
   emits: { navigate: (_page) => true },
   setup(props, { emit, slots }) {
     const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-    const narrow = ref6(query?.matches ?? false);
-    const drawer = ref6(false);
+    const narrow = ref7(query?.matches ?? false);
+    const drawer = ref7(false);
     const onMedia = (e) => narrow.value = e.matches;
     onMounted(() => query?.addEventListener("change", onMedia));
     onBeforeUnmount(() => query?.removeEventListener("change", onMedia));
-    const own = ref6("attention");
+    const own = ref7("attention");
     const current = computed2(() => props.page ?? own.value);
-    const editing = ref6(null);
+    const editing = ref7(null);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
       drawer.value = false;
     };
-    const back = (label) => h15("div", { style: { padding: "24px 40px 0" } }, [
-      h15(
+    const back = (label) => h16("div", { style: { padding: "24px 40px 0" } }, [
+      h16(
         "button",
         { type: "button", style: styles.buttonGhost, onClick: () => editing.value = null },
         [icon("back", 14), label]
       )
     ]);
-    const missing = (text) => h15("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
+    const missing = (text) => h16("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
     const body = () => {
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return h15(AttentionScreen, { client: c });
+          return h16(AttentionScreen, { client: c });
         case "modules":
-          return h15(ModulesScreen, { client: c });
+          return h16(ModulesScreen, { client: c });
         case "doctor":
-          return h15(DoctorScreen, { client: c });
+          return h16(DoctorScreen, { client: c });
         case "environment":
-          return h15(EnvironmentScreen, { client: c });
+          return h16(EnvironmentScreen, { client: c });
         case "routes":
-          return h15(RoutesScreen, { client: c });
+          return h16(RoutesScreen, { client: c });
         case "tokens":
-          return h15(TokensScreen, { client: c });
+          return h16(TokensScreen, { client: c });
+        case "operators":
+          return h16(OperatorsScreen, {
+            client: c,
+            ...props.currentOperator ? { me: props.currentOperator } : {}
+          });
         case "migrations":
-          return h15(MigrationsScreen, { client: c });
+          return h16(MigrationsScreen, { client: c });
         case "log":
-          return h15(AdminLogScreen, { client: c });
+          return h16(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h15(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
+          return props.billingClient ? h16(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
         case "subscriber":
-          return props.billingClient ? h15(SubscriberScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to look up subscribers here.");
+          return props.billingClient ? h16(SubscriberScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to look up subscribers here.");
         case "audit":
-          return props.auditClient ? h15(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
+          return props.auditClient ? h16(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
         case "users":
-          return props.authClient ? h15(UsersScreen, { client: props.authClient }) : missing("Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? h16(UsersScreen, { client: props.authClient }) : missing("Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc) return missing("Pass a ConfigAdminClient to manage config and secrets here.");
@@ -2118,7 +2407,7 @@ var AdminShell = defineComponent13({
           if (e && e.kind !== "template")
             return [
               back("Config & secrets"),
-              h15(ConfigEditorScreen, {
+              h16(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -2126,7 +2415,7 @@ var AdminShell = defineComponent13({
                 onSaved: () => editing.value = null
               })
             ];
-          return h15(ConfigListScreen, {
+          return h16(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -2143,27 +2432,27 @@ var AdminShell = defineComponent13({
           if (e?.kind === "template")
             return [
               back("Templates"),
-              h15(TemplateEditorScreen, {
+              h16(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h15(TemplateListScreen, {
+          return h16(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
         }
       }
     };
-    const visible = (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient);
+    const visible = (i) => !i.needs || (i.needs === "operators" ? props.operators : i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient);
     const brand = () => {
       const production = props.envLabel ? /^prod/i.test(props.envLabel) : false;
-      return h15("div", { style: styles.navBrand }, [
-        h15("div", { style: styles.navMark }, [icon("mark", 15)]),
-        h15("div", { style: { minWidth: 0, flex: 1 } }, [
-          h15("div", { style: styles.navBrandTitle }, props.appName),
-          props.envLabel ? h15(
+      return h16("div", { style: styles.navBrand }, [
+        h16("div", { style: styles.navMark }, [icon("mark", 15)]),
+        h16("div", { style: { minWidth: 0, flex: 1 } }, [
+          h16("div", { style: styles.navBrandTitle }, props.appName),
+          props.envLabel ? h16(
             "span",
             {
               style: {
@@ -2180,7 +2469,7 @@ var AdminShell = defineComponent13({
             props.envLabel
           ) : null
         ]),
-        narrow.value ? h15(
+        narrow.value ? h16(
           "button",
           {
             type: "button",
@@ -2192,7 +2481,7 @@ var AdminShell = defineComponent13({
         ) : null
       ]);
     };
-    const nav = () => h15(
+    const nav = () => h16(
       "nav",
       {
         style: {
@@ -2203,17 +2492,17 @@ var AdminShell = defineComponent13({
       },
       [
         brand(),
-        h15(
+        h16(
           "div",
           { style: styles.navScroll },
           NAV.map((g) => {
             const items = g.items.filter(visible);
             if (items.length === 0) return null;
-            return h15("div", { key: g.group }, [
-              h15("div", { style: styles.navGroup }, g.group),
+            return h16("div", { key: g.group }, [
+              h16("div", { style: styles.navGroup }, g.group),
               ...items.map((i) => {
                 const active = current.value === i.page;
-                return h15(
+                return h16(
                   "button",
                   {
                     key: i.page,
@@ -2229,18 +2518,18 @@ var AdminShell = defineComponent13({
             ]);
           })
         ),
-        slots["footer"] ? h15("div", { style: styles.navFooter }, slots["footer"]()) : null
+        slots["footer"] ? h16("div", { style: styles.navFooter }, slots["footer"]()) : null
       ]
     );
     return () => {
       const title = NAV.flatMap((g) => g.items).find((i) => i.page === current.value)?.label ?? "";
-      return h15(
+      return h16(
         "div",
         { style: { ...styles.shell, ...narrow.value ? { flexDirection: "column" } : {} } },
         [
           ...narrow.value ? [
-            h15("div", { style: styles.topbar }, [
-              h15(
+            h16("div", { style: styles.topbar }, [
+              h16(
                 "button",
                 {
                   type: "button",
@@ -2251,19 +2540,19 @@ var AdminShell = defineComponent13({
                 },
                 [icon("menu")]
               ),
-              h15("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
-              props.envLabel ? h15("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
+              h16("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
+              props.envLabel ? h16("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
             ]),
-            drawer.value ? h15("div", { style: styles.drawer }, [
+            drawer.value ? h16("div", { style: styles.drawer }, [
               nav(),
-              h15("div", {
+              h16("div", {
                 style: styles.scrim,
                 "aria-hidden": "true",
                 onClick: () => drawer.value = false
               })
             ]) : null
           ] : [nav()],
-          h15("main", { class: "fonderie-admin-main", style: styles.main }, body())
+          h16("main", { class: "fonderie-admin-main", style: styles.main }, body())
         ]
       );
     };
@@ -2279,6 +2568,7 @@ export {
   EnvironmentScreen,
   MigrationsScreen,
   ModulesScreen,
+  OperatorsScreen,
   RoutesScreen,
   SubscriberScreen,
   TokensScreen,