@fonderie/react-admin-screens 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.tsx
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/react-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/react-courier-admin-screens";
-import { useEffect, useState as useState6 } from "react";
+import { useEffect as useEffect2, useState as useState9 } from "react";
 
 // src/styles.ts
 var t = {
@@ -1073,33 +1073,265 @@ function MigrationsScreen({ client }) {
   ] });
 }
 
-// src/screens/TokensScreen.tsx
-import { useAdminTokens } from "@fonderie/react-admin";
+// src/screens/OperatorsScreen.tsx
+import { useAdminOperators } from "@fonderie/react-admin";
 import { useState as useState2 } from "react";
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+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";
+function Minted({ link, onClose }) {
+  const [copied, setCopied] = useState2(false);
+  const url = `${window.location.origin}${link.url}`;
+  return /* @__PURE__ */ jsxs9(
+    "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)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs9("strong", { children: [
+          "Send this link to ",
+          link.email,
+          ". It is shown once."
+        ] }),
+        " It works once and expires",
+        " ",
+        new Date(link.expiresAt).toLocaleString(),
+        ".",
+        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 8, marginTop: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx9("code", { style: { ...styles.code, flex: 1, padding: "7px 10px", wordBreak: "break-all" }, children: url }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              onClick: () => {
+                void navigator.clipboard?.writeText(url);
+                setCopied(true);
+              },
+              children: copied ? "Copied" : "Copy"
+            }
+          ),
+          /* @__PURE__ */ jsx9("button", { type: "button", style: styles.buttonGhost, onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx9(Icon, { name: "close", size: 14 }) })
+        ] })
+      ]
+    }
+  );
+}
+function OperatorsScreen({ client, me }) {
+  const { report, isLoading, error, invite, recover, update, revokeLink } = useAdminOperators(client);
+  const [email, setEmail] = useState2("");
+  const [level, setLevel] = useState2("Editor");
+  const [minted, setMinted] = useState2(null);
+  const scopesFor = (label) => LEVELS.find((l) => l.label === label)?.scopes ?? ["read"];
+  const status = (o) => o.disabledAt ? /* @__PURE__ */ jsx9(Pill, { tone: "neutral", children: "disabled" }) : o.locked ? /* @__PURE__ */ jsx9(Pill, { tone: "warn", children: "locked" }) : !o.enrolled ? /* @__PURE__ */ jsx9(Pill, { tone: "warn", children: "setting up" }) : /* @__PURE__ */ jsx9(Pill, { tone: "ok", children: "active" });
+  return /* @__PURE__ */ jsxs9("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx9(
+      PageHeader,
+      {
+        title: "Operators",
+        lead: "The people who can sign in to this console. Each one uses a password and an authenticator app; there is no sign-up."
+      }
+    ),
+    error ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: error.status === 403 && error.reason === "FORBIDDEN" ? "Managing operators needs the Owner level." : error.explanation }) : null,
+    minted ? /* @__PURE__ */ jsx9(Minted, { link: minted, onClose: () => setMinted(null) }) : null,
+    /* @__PURE__ */ jsxs9(
+      "form",
+      {
+        style: {
+          ...styles.card,
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap",
+          marginBottom: 20
+        },
+        onSubmit: (e) => {
+          e.preventDefault();
+          void invite({ email: email.trim(), scopes: scopesFor(level) }).then((l) => {
+            setMinted(l);
+            setEmail("");
+          }).catch(() => {
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx9(Icon, { name: "users", size: 16 }),
+          /* @__PURE__ */ jsx9("strong", { style: { fontSize: 13.5, marginRight: 4 }, children: "Invite" }),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              type: "email",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              placeholder: "teammate@company.com",
+              style: { ...styles.input, flex: 1, minWidth: 220 },
+              "aria-label": "Email to invite"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "select",
+            {
+              value: level,
+              onChange: (e) => setLevel(e.target.value),
+              style: styles.input,
+              "aria-label": "Access level",
+              children: LEVELS.map((l) => /* @__PURE__ */ jsxs9("option", { value: l.label, children: [
+                l.label,
+                " \u2014 ",
+                l.hint
+              ] }, l.label))
+            }
+          ),
+          /* @__PURE__ */ jsxs9("button", { type: "submit", style: styles.buttonPrimary, disabled: !email.trim(), children: [
+            /* @__PURE__ */ jsx9(Icon, { name: "plus", size: 14 }),
+            "Create invite link"
+          ] })
+        ]
+      }
+    ),
+    isLoading && !report ? /* @__PURE__ */ jsx9("p", { style: styles.status, children: "Loading\u2026" }) : report && report.operators.length === 0 ? /* @__PURE__ */ jsx9(Empty, { icon: "users", title: "No operators yet" }) : report ? /* @__PURE__ */ jsxs9("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Operator" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Access" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Status" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Last sign-in" }),
+        /* @__PURE__ */ jsx9("th", { style: styles.th })
+      ] }) }),
+      /* @__PURE__ */ jsx9("tbody", { children: report.operators.map((o) => /* @__PURE__ */ jsxs9("tr", { children: [
+        /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontWeight: 600 }, children: o.name || o.email }),
+          o.name ? /* @__PURE__ */ jsx9("div", { style: styles.muted, children: o.email }) : null
+        ] }),
+        /* @__PURE__ */ jsx9("td", { style: styles.td, children: /* @__PURE__ */ jsx9(
+          "select",
+          {
+            value: levelOf(o.scopes),
+            onChange: (e) => void update(o.id, { scopes: scopesFor(e.target.value) }).catch(() => {
+            }),
+            style: { ...styles.input, height: 28, fontSize: 12.5 },
+            disabled: o.email === me,
+            "aria-label": `Access level for ${o.email}`,
+            children: LEVELS.map((l) => /* @__PURE__ */ jsx9("option", { value: l.label, children: l.label }, l.label))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+          status(o),
+          o.enrolled && o.backupCodesLeft <= 2 && !o.disabledAt ? /* @__PURE__ */ jsxs9("div", { style: { ...styles.muted, marginTop: 4 }, children: [
+            o.backupCodesLeft,
+            " backup code(s) left"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.muted, whiteSpace: "nowrap" }, children: o.lastLoginAt ? new Date(o.lastLoginAt).toLocaleString() : "never" }),
+        /* @__PURE__ */ jsx9("td", { style: { ...styles.td, textAlign: "right", whiteSpace: "nowrap" }, children: o.email === me ? /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "you" }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, height: 28, marginRight: 6 },
+              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(() => {
+                  });
+              },
+              children: "Recovery link"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...o.disabledAt ? styles.button : styles.buttonDanger,
+                height: 28
+              },
+              onClick: () => {
+                if (o.disabledAt || window.confirm(`Disable ${o.email}? They are signed out immediately.`))
+                  void update(o.id, { disabled: !o.disabledAt }).catch(() => {
+                  });
+              },
+              children: o.disabledAt ? "Enable" : "Disable"
+            }
+          )
+        ] }) })
+      ] }, o.id)) })
+    ] }) : null,
+    report && report.links.length > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Pending links" }),
+      /* @__PURE__ */ jsx9("ul", { style: styles.list, children: report.links.map((l) => /* @__PURE__ */ jsxs9(
+        "li",
+        {
+          style: { ...styles.row, display: "flex", gap: 12, alignItems: "center" },
+          children: [
+            /* @__PURE__ */ jsx9(Pill, { tone: l.kind === "invite" ? "info" : "warn", dot: false, children: l.kind }),
+            /* @__PURE__ */ jsxs9("span", { style: { flex: 1 }, children: [
+              l.email,
+              l.kind === "invite" ? /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+                " \xB7 ",
+                levelOf(l.scopes)
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs9("span", { style: styles.muted, children: [
+              "expires ",
+              new Date(l.expiresAt).toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                style: { ...styles.buttonDanger, height: 28 },
+                onClick: () => void revokeLink(l.id).catch(() => {
+                }),
+                children: "Revoke"
+              }
+            )
+          ]
+        },
+        l.id
+      )) })
+    ] }) : null
+  ] });
+}
+
+// src/screens/TokensScreen.tsx
+import { useAdminTokens } from "@fonderie/react-admin";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var ALL = ["read", "write", "secrets"];
 function TokensScreen({ client }) {
   const { report, isLoading, error, issue, revoke } = useAdminTokens(client);
-  const [name, setName] = useState2("");
-  const [scopes, setScopes] = useState2(["read"]);
-  const [days, setDays] = useState2("");
-  const [minted, setMinted] = useState2(null);
+  const [name, setName] = useState3("");
+  const [scopes, setScopes] = useState3(["read"]);
+  const [days, setDays] = useState3("");
+  const [minted, setMinted] = useState3(null);
   const toggle = (s) => setScopes((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
-  return /* @__PURE__ */ jsxs9("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx10(
       PageHeader,
       {
-        title: "Access",
-        lead: "Who can open this surface: the root token's strength, scoped tokens you have issued, and any legacy per-module tokens."
+        title: "Tokens",
+        lead: "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 ? /* @__PURE__ */ jsx9("p", { style: styles.error, role: "alert", children: error.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.explanation }) : null,
-    /* @__PURE__ */ jsx9("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Root token" }),
-    report ? /* @__PURE__ */ jsxs9("div", { style: { ...styles.card, display: "flex", gap: 12, alignItems: "flex-start" }, children: [
-      /* @__PURE__ */ jsx9(Icon, { name: "lock", size: 18, style: { marginTop: 2 } }),
-      /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx9(Pill, { tone: report.admin.ok ? "ok" : "bad", children: report.admin.ok ? "strong" : "weak" }),
-        report.admin.problems.map((p) => /* @__PURE__ */ jsx9(
+    error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.explanation }) : null,
+    /* @__PURE__ */ jsx10("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Root token" }),
+    report ? /* @__PURE__ */ jsxs10("div", { style: { ...styles.card, display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx10(Icon, { name: "lock", size: 18, style: { marginTop: 2 } }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx10(Pill, { tone: report.admin.ok ? "ok" : "bad", children: report.admin.ok ? "strong" : "weak" }),
+        report.admin.problems.map((p) => /* @__PURE__ */ jsx10(
           "div",
           {
             style: { marginTop: 6, color: "var(--fonderie-danger,#e00)", fontSize: 13 },
@@ -1109,9 +1341,9 @@ function TokensScreen({ client }) {
         ))
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Issued tokens" }),
-    report?.issued === null ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
-      minted ? /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Issued tokens" }),
+    report?.issued === null ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "Issuing is off \u2014 give AdminModule a store and run its migrations." }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+      minted ? /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -1120,11 +1352,11 @@ function TokensScreen({ client }) {
             borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
           },
           children: [
-            /* @__PURE__ */ jsx9("strong", { children: "Copy this now \u2014 it is never shown again." }),
+            /* @__PURE__ */ jsx10("strong", { children: "Copy this now \u2014 it is never shown again." }),
             " (",
             minted.name,
             ")",
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "div",
               {
                 style: {
@@ -1140,7 +1372,7 @@ function TokensScreen({ client }) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs10(
         "form",
         {
           style: styles.toolbar,
@@ -1159,7 +1391,7 @@ function TokensScreen({ client }) {
             });
           },
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 value: name,
@@ -1169,7 +1401,7 @@ function TokensScreen({ client }) {
                 "aria-label": "Name"
               }
             ),
-            ALL.map((s) => /* @__PURE__ */ jsxs9(
+            ALL.map((s) => /* @__PURE__ */ jsxs10(
               "label",
               {
                 style: {
@@ -1181,14 +1413,14 @@ function TokensScreen({ client }) {
                   fontSize: 13
                 },
                 children: [
-                  /* @__PURE__ */ jsx9("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
+                  /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: scopes.includes(s), onChange: () => toggle(s) }),
                   " ",
                   s
                 ]
               },
               s
             )),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 value: days,
@@ -1198,14 +1430,14 @@ function TokensScreen({ client }) {
                 "aria-label": "Days"
               }
             ),
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "submit",
                 style: styles.buttonPrimary,
                 disabled: !name.trim() || scopes.length === 0 || isLoading,
                 children: [
-                  /* @__PURE__ */ jsx9(Icon, { name: "plus", size: 14 }),
+                  /* @__PURE__ */ jsx10(Icon, { name: "plus", size: 14 }),
                   "Issue token"
                 ]
               }
@@ -1213,32 +1445,32 @@ function TokensScreen({ client }) {
           ]
         }
       ),
-      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ jsxs9("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Name" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Scopes" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Created" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Expires" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th, children: "Last used" }),
-          /* @__PURE__ */ jsx9("th", { style: styles.th })
+      report?.issued && report.issued.length > 0 ? /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Name" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Scopes" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Expires" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Last used" }),
+          /* @__PURE__ */ jsx10("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx9("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ jsxs9("tr", { children: [
-          /* @__PURE__ */ jsxs9("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsx10("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
             t2.name,
-            t2.revokedAt ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            t2.revokedAt ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
               " ",
-              /* @__PURE__ */ jsx9(Pill, { tone: "neutral", children: "revoked" })
+              /* @__PURE__ */ jsx10(Pill, { tone: "neutral", children: "revoked" })
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
-          /* @__PURE__ */ jsxs9("td", { style: { ...styles.td, ...styles.muted }, children: [
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
+          /* @__PURE__ */ jsxs10("td", { style: { ...styles.td, ...styles.muted }, children: [
             new Date(t2.createdAt).toLocaleDateString(),
             " \xB7 ",
             t2.createdBy
           ] }),
-          /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
-          /* @__PURE__ */ jsx9("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
-          /* @__PURE__ */ jsx9("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx10("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1254,13 +1486,13 @@ function TokensScreen({ client }) {
             }
           ) })
         ] }, t2.id)) })
-      ] }) : /* @__PURE__ */ jsx9(Empty, { icon: "tokens", title: "No scoped tokens yet", children: "Issue a read-only token for a dashboard or a teammate instead of sharing the root." })
+      ] }) : /* @__PURE__ */ jsx10(Empty, { icon: "tokens", title: "No scoped tokens yet", children: "Issue a read-only token for a dashboard or a teammate instead of sharing the root." })
     ] }),
-    /* @__PURE__ */ jsx9("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
-    report && report.legacy.length === 0 ? /* @__PURE__ */ jsx9("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx9("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ jsxs9("li", { style: styles.row, children: [
-      /* @__PURE__ */ jsx9("span", { style: styles.mono, children: l.module }),
+    /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
+    report && report.legacy.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "None \u2014 every brick's admin surface goes through this token." }) : /* @__PURE__ */ jsx10("ul", { style: styles.list, children: report?.legacy.map((l) => /* @__PURE__ */ jsxs10("li", { style: styles.row, children: [
+      /* @__PURE__ */ jsx10("span", { style: styles.mono, children: l.module }),
       " ",
-      /* @__PURE__ */ jsx9("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
+      /* @__PURE__ */ jsx10("span", { style: styles.muted, children: "still registers its standalone routes with its own token (deprecated)" })
     ] }, l.module)) })
   ] });
 }
@@ -1273,11 +1505,218 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/react-admin";
-import { useState as useState3 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-function UsersScreen({ client, pageSize = 50 }) {
-  const [input, setInput] = useState3("");
-  const [selected, setSelected] = useState3(null);
+import { useState as useState6 } from "react";
+
+// src/billing.ts
+import { useEffect, useState as useState4 } from "react";
+function periodEnd(s) {
+  if (!s.currentPeriodEnd) return null;
+  const date = new Date(s.currentPeriodEnd).toLocaleDateString();
+  if (s.status === "canceled")
+    return { label: new Date(s.currentPeriodEnd) < /* @__PURE__ */ new Date() ? "Ended" : "Ends", date };
+  if (s.cancelAtPeriodEnd) return { label: "Ends", date };
+  return { label: "Renews", date };
+}
+var statusTone = (status) => status === "active" ? "ok" : status === "trialing" ? "info" : status === "past_due" || status === "unpaid" ? "warn" : "neutral";
+function useSubscriptionIndex(client) {
+  const [index, setIndex] = useState4(null);
+  useEffect(() => {
+    if (!client) return;
+    let live = true;
+    (async () => {
+      const map = /* @__PURE__ */ new Map();
+      let cursor;
+      for (let page = 0; page < 20; page++) {
+        const { result } = await client.listSubscriptions({
+          limit: 100,
+          ...cursor ? { cursor } : {}
+        });
+        for (const s of result.subscriptions) {
+          const key = `${s.subscriberType}/${s.subscriberId}`;
+          if (!map.has(key)) map.set(key, s);
+        }
+        if (!result.nextCursor) break;
+        cursor = result.nextCursor;
+      }
+      if (live) setIndex(map);
+    })().catch(() => {
+      if (live) setIndex(/* @__PURE__ */ new Map());
+    });
+    return () => {
+      live = false;
+    };
+  }, [client]);
+  return index;
+}
+
+// src/screens/SubscriberBilling.tsx
+import { useAdminSubscriber } from "@fonderie/react-admin";
+import { useState as useState5 } from "react";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function SubscriberBilling({ client, subscriber }) {
+  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
+  const [amount, setAmount] = useState5("");
+  const [note, setNote] = useState5("");
+  const [granted, setGranted] = useState5(null);
+  if (isLoading && !wallet && !subscription) return /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading billing\u2026" });
+  const end = subscription ? periodEnd(subscription) : null;
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    /* @__PURE__ */ jsxs11("div", { style: { ...styles.grid, marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxs11("div", { style: styles.card, children: [
+        /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Plan" }),
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginTop: 6,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx11("strong", { style: { fontSize: 18 }, children: subscription ? subscription.plan : "Free" }),
+              subscription ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+                /* @__PURE__ */ jsxs11("span", { style: styles.muted, children: [
+                  "\xB7 ",
+                  subscription.interval
+                ] }),
+                /* @__PURE__ */ jsx11(Pill, { tone: statusTone(subscription.status), children: subscription.status })
+              ] }) : /* @__PURE__ */ jsx11("span", { style: styles.muted, children: "no subscription" })
+            ]
+          }
+        ),
+        end ? /* @__PURE__ */ jsxs11("div", { style: styles.statHint, children: [
+          end.label,
+          " ",
+          end.date
+        ] }) : null,
+        subscription?.providerSubscriptionId ? /* @__PURE__ */ jsx11("div", { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" }, children: subscription.providerSubscriptionId }) : null
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { style: styles.card, children: [
+        /* @__PURE__ */ jsx11("div", { style: styles.statLabel, children: "Credits" }),
+        wallet ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+          /* @__PURE__ */ jsxs11("div", { style: styles.statValue, children: [
+            wallet.balance,
+            " ",
+            /* @__PURE__ */ jsx11("span", { style: { fontSize: 14, fontWeight: 500 }, children: wallet.currency })
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { style: styles.statHint, children: [
+            wallet.purchased ?? "0",
+            " permanent \xB7 ",
+            wallet.granted ?? "0",
+            " plan allowance",
+            wallet.grantedExpiresAt ? ` (expires ${new Date(wallet.grantedExpiresAt).toLocaleDateString()})` : ""
+          ] })
+        ] }) : /* @__PURE__ */ jsx11("div", { style: styles.statHint, children: "No wallet \u2014 billing has no wallet configuration." })
+      ] })
+    ] }),
+    wallet ? /* @__PURE__ */ jsxs11(
+      "form",
+      {
+        style: {
+          ...styles.card,
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "wrap",
+          marginBottom: 16
+        },
+        onSubmit: (e) => {
+          e.preventDefault();
+          const key = `admin-grant-${subscriber.type}-${subscriber.id}-${Date.now()}`;
+          void grant({
+            amount: amount.trim(),
+            ...note ? { description: note } : {},
+            idempotencyKey: key
+          }).then(() => {
+            setGranted(`Granted ${amount.trim()} ${wallet.currency}.`);
+            setAmount("");
+            setNote("");
+          }).catch(() => {
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx11("strong", { style: { fontSize: 13.5, marginRight: 4 }, children: "Grant credits" }),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: amount,
+              onChange: (e) => setAmount(e.target.value),
+              placeholder: `amount (${wallet.currency})`,
+              inputMode: "numeric",
+              style: { ...styles.input, width: 150 },
+              "aria-label": "Amount"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: note,
+              onChange: (e) => setNote(e.target.value),
+              placeholder: "reason (optional)",
+              style: { ...styles.input, flex: 1, minWidth: 180 },
+              "aria-label": "Reason"
+            }
+          ),
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "submit",
+              style: styles.buttonPrimary,
+              disabled: !/^\d+$/.test(amount.trim()),
+              children: [
+                /* @__PURE__ */ jsx11(Icon, { name: "plus", size: 14 }),
+                "Grant"
+              ]
+            }
+          ),
+          granted ? /* @__PURE__ */ jsx11("span", { style: styles.ok, children: granted }) : null
+        ]
+      }
+    ) : null,
+    wallet ? ledger.length === 0 ? /* @__PURE__ */ jsx11(Empty, { icon: "subscriber", title: "No credit movements yet" }) : /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "When" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Kind" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Amount" }),
+          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Note" })
+        ] }) }),
+        /* @__PURE__ */ jsx11("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs11("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted, whiteSpace: "nowrap" }, children: new Date(t2.createdAt).toLocaleString() }),
+          /* @__PURE__ */ jsx11("td", { style: styles.td, children: t2.type }),
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
+          /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
+        ] }, t2.id)) })
+      ] }),
+      hasMoreLedger ? /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          style: { ...styles.button, marginTop: 8 },
+          onClick: () => void loadMoreLedger(),
+          children: "Load more"
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+
+// src/screens/UsersScreen.tsx
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function UsersScreen({
+  client,
+  pageSize = 50,
+  billingClient,
+  openUserId
+}) {
+  const [input, setInput] = useState6("");
+  const [selected, setSelected] = useState6(
+    openUserId ? { id: openUserId } : null
+  );
+  const plans = useSubscriptionIndex(billingClient);
   const list = useAdminUsers(client, { limit: pageSize });
   const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
     client,
@@ -1286,20 +1725,20 @@ function UsersScreen({ client, pageSize = 50 }) {
   const userId = user?.id ?? null;
   const sessions = useAdminUserSessions(client, userId);
   const history = useAdminLoginHistory(client, userId, { limit: 20 });
-  const yesNo = (v) => v ? /* @__PURE__ */ jsx10(Pill, { tone: "ok", children: "yes" }) : /* @__PURE__ */ jsx10(Pill, { tone: "neutral", children: "no" });
+  const yesNo = (v) => v ? /* @__PURE__ */ jsx12(Pill, { tone: "ok", children: "yes" }) : /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "no" });
   const clear = () => {
     setSelected(null);
     setInput("");
   };
-  return /* @__PURE__ */ jsxs10("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx12(
       PageHeader,
       {
         title: "Users",
         lead: "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
       }
     ),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs12(
       "form",
       {
         style: styles.toolbar,
@@ -1309,7 +1748,7 @@ function UsersScreen({ client, pageSize = 50 }) {
           setSelected(email ? { email } : null);
         },
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx12(
             "input",
             {
               type: "email",
@@ -1320,14 +1759,14 @@ function UsersScreen({ client, pageSize = 50 }) {
               "aria-label": "Email"
             }
           ),
-          /* @__PURE__ */ jsxs10("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx10(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ jsxs12("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx12(Icon, { name: "search", size: 14 }),
             "Look up"
           ] }),
-          selected ? /* @__PURE__ */ jsxs10("button", { type: "button", style: styles.buttonGhost, onClick: clear, children: [
-            /* @__PURE__ */ jsx10(Icon, { name: "back", size: 14 }),
+          selected ? /* @__PURE__ */ jsxs12("button", { type: "button", style: styles.buttonGhost, onClick: clear, children: [
+            /* @__PURE__ */ jsx12(Icon, { name: "back", size: 14 }),
             "All users"
-          ] }) : /* @__PURE__ */ jsx10(
+          ] }) : /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -1340,18 +1779,19 @@ function UsersScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
-    !selected ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
-      list.error ? /* @__PURE__ */ jsx10("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx10(Empty, { icon: "users", title: "No users yet", children: "Sign-ups appear here as they happen." }) : /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Email" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Name" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Created" }),
-          /* @__PURE__ */ jsx10("th", { style: styles.th, children: "Status" })
+    error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.status === 404 ? "No user with that email." : error.explanation }) : null,
+    !selected ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      list.error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+      list.users.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx12(Empty, { icon: "users", title: "No users yet", children: "Sign-ups appear here as they happen." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Email" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Name" }),
+          billingClient ? /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Plan" }) : null,
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Created" }),
+          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Status" })
         ] }) }),
-        /* @__PURE__ */ jsx10("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx12("tbody", { children: list.users.map((u) => /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -1360,17 +1800,28 @@ function UsersScreen({ client, pageSize = 50 }) {
               children: u.email
             }
           ) }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx10("span", { style: styles.muted, children: "\u2014" }) }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
-          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
-            u.suspended ? /* @__PURE__ */ jsx10(Pill, { tone: "warn", children: "suspended" }) : null,
-            u.deletedAt ? /* @__PURE__ */ jsx10(Pill, { tone: "neutral", children: "deleted" }) : null,
-            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx10(Pill, { tone: "ok", children: "active" }) : null
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim() || /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "\u2014" }) }),
+          billingClient ? /* @__PURE__ */ jsx12("td", { style: styles.td, children: (() => {
+            const sub = plans?.get(`user/${u.id}`);
+            if (!plans) return /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "\u2026" });
+            if (!sub || sub.status === "canceled")
+              return /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "free" });
+            return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+              /* @__PURE__ */ jsx12("strong", { children: sub.plan }),
+              " ",
+              sub.status !== "active" ? /* @__PURE__ */ jsx12(Pill, { tone: statusTone(sub.status), children: sub.status }) : null
+            ] });
+          })() }) : null,
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: new Date(u.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
+            u.suspended ? /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: "suspended" }) : null,
+            u.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "deleted" }) : null,
+            !u.suspended && !u.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "ok", children: "active" }) : null
           ] })
         ] }, u.id)) })
       ] }),
-      list.isLoading ? /* @__PURE__ */ jsx10("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx10(
+      list.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
+      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1380,48 +1831,48 @@ function UsersScreen({ client, pageSize = 50 }) {
         }
       ) : null
     ] }) : null,
-    user ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
-      /* @__PURE__ */ jsxs10("h2", { style: styles.subtitle, children: [
+    user ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      /* @__PURE__ */ jsxs12("h2", { style: styles.subtitle, children: [
         user.firstName || user.lastName ? `${user.firstName} ${user.lastName}`.trim() : user.email,
         " ",
-        user.suspended ? /* @__PURE__ */ jsx10(Pill, { tone: "warn", children: "suspended" }) : null,
-        user.deletedAt ? /* @__PURE__ */ jsx10(Pill, { tone: "neutral", children: "deleted" }) : null
+        user.suspended ? /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: "suspended" }) : null,
+        user.deletedAt ? /* @__PURE__ */ jsx12(Pill, { tone: "neutral", children: "deleted" }) : null
       ] }),
-      /* @__PURE__ */ jsx10("table", { style: styles.table, children: /* @__PURE__ */ jsxs10("tbody", { children: [
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "id" }),
-          /* @__PURE__ */ jsx10("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
+      /* @__PURE__ */ jsx12("table", { style: styles.table, children: /* @__PURE__ */ jsxs12("tbody", { children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "id" }),
+          /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: user.id })
         ] }),
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "email" }),
-          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "email" }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
             user.email,
             " \xB7 verified ",
             yesNo(user.isEmailVerified)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "MFA" }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "MFA" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: yesNo(user.mfaEnabled) })
         ] }),
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsxs10("td", { style: styles.td, children: [
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "provider" }),
+          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
             user.provider || "password",
             user.hasPassword ? "" : " \xB7 no password set"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "last login" }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx10("span", { style: styles.muted, children: "never" }) })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "last login" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: user.lastLogin ? new Date(user.lastLogin).toLocaleString() : /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "never" }) })
         ] }),
-        /* @__PURE__ */ jsxs10("tr", { children: [
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: "created" }),
-          /* @__PURE__ */ jsx10("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsxs12("tr", { children: [
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "created" }),
+          /* @__PURE__ */ jsx12("td", { style: styles.td, children: new Date(user.createdAt).toLocaleString() })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs10("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
-        user.suspended ? /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsxs12("div", { style: { ...styles.toolbar, marginTop: 12 }, children: [
+        user.suspended ? /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1430,7 +1881,7 @@ function UsersScreen({ client, pageSize = 50 }) {
             disabled: isLoading,
             children: "Unsuspend"
           }
-        ) : /* @__PURE__ */ jsx10(
+        ) : /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1440,7 +1891,7 @@ function UsersScreen({ client, pageSize = 50 }) {
             children: "Suspend"
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1451,38 +1902,48 @@ function UsersScreen({ client, pageSize = 50 }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Live sessions" }),
-      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx10("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs10("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx10("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
+      billingClient ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Plan & credits" }),
+        /* @__PURE__ */ jsx12(
+          SubscriberBilling,
+          {
+            client: billingClient,
+            subscriber: { type: "user", id: user.id }
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Live sessions" }),
+      sessions.sessions.length === 0 ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: sessions.sessions.map((s) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: s.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(s.location) ? /* @__PURE__ */ jsxs10("span", { style: styles.muted, children: [
+        describeLocation(s.location) ? /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
           describeLocation(s.location),
           " "
         ] }) : null,
-        /* @__PURE__ */ jsx10("span", { style: styles.muted, children: s.userAgent ?? "" }),
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: s.userAgent ?? "" }),
         " ",
-        /* @__PURE__ */ jsxs10("span", { style: styles.muted, children: [
+        /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
           "since ",
           new Date(s.createdAt).toLocaleString()
         ] })
       ] }, s.id)) }),
-      /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
-      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx10("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs10("li", { style: styles.row, children: [
-        /* @__PURE__ */ jsx10(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
+      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Recent sign-ins" }),
+      history.events.length === 0 && !history.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "None recorded." }) : /* @__PURE__ */ jsx12("ul", { style: styles.list, children: history.events.map((e) => /* @__PURE__ */ jsxs12("li", { style: styles.row, children: [
+        /* @__PURE__ */ jsx12(Pill, { tone: e.outcome === "success" ? "ok" : "bad", children: e.outcome }),
         " ",
-        /* @__PURE__ */ jsx10("span", { style: styles.muted, children: e.method }),
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: e.method }),
         " ",
-        /* @__PURE__ */ jsx10("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
+        /* @__PURE__ */ jsx12("span", { style: styles.mono, children: e.ipAddress ?? "\u2014" }),
         " ",
-        describeLocation(e.location) ? /* @__PURE__ */ jsx10("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
-        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+        describeLocation(e.location) ? /* @__PURE__ */ jsx12("span", { style: styles.muted, children: describeLocation(e.location) }) : null,
+        e.location?.proxy || e.location?.hosting ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
           " ",
-          /* @__PURE__ */ jsx10(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
+          /* @__PURE__ */ jsx12(Pill, { tone: "warn", children: e.location.proxy ? "proxy/VPN" : "hosting" })
         ] }) : null,
         " ",
-        /* @__PURE__ */ jsx10("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
+        /* @__PURE__ */ jsx12("span", { style: styles.muted, children: new Date(e.createdAt).toLocaleString() })
       ] }, e.id)) }),
-      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx10(
+      history.hasMore && !history.isLoading ? /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -1497,24 +1958,24 @@ function UsersScreen({ client, pageSize = 50 }) {
 
 // src/screens/CatalogScreen.tsx
 import { useAdminCatalog } from "@fonderie/react-admin";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function CatalogScreen({ client }) {
   const { catalog, isLoading, error, refresh, deletePlan } = useAdminCatalog(client);
   const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
-  return /* @__PURE__ */ jsxs11("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs13("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx13(
       PageHeader,
       {
         title: "Catalog",
         lead: "What you sell: plans as configured in code, and as stored in the database, side by side.",
-        actions: /* @__PURE__ */ jsx11(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
+        actions: /* @__PURE__ */ jsx13(RefreshButton, { onClick: () => void refresh(), busy: isLoading })
       }
     ),
-    error ? /* @__PURE__ */ jsx11("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    isLoading && !catalog ? /* @__PURE__ */ jsx11("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    catalog ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsx11("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Configured (code)" }),
-      /* @__PURE__ */ jsx11(
+    error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    isLoading && !catalog ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    catalog ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
+      /* @__PURE__ */ jsx13("h2", { style: { ...styles.subtitle, marginTop: 0 }, children: "Configured (code)" }),
+      /* @__PURE__ */ jsx13(
         "pre",
         {
           style: {
@@ -1528,32 +1989,32 @@ function CatalogScreen({ client }) {
           children: JSON.stringify(catalog.configured, null, 2)
         }
       ),
-      /* @__PURE__ */ jsx11("h2", { style: styles.subtitle, children: "Stored (database)" }),
-      catalog.stored.length === 0 ? /* @__PURE__ */ jsx11(Empty, { icon: "catalog", title: "No stored plans", children: "Plans are configured in code; nothing has been written to the database." }) : /* @__PURE__ */ jsxs11("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Tier" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Seats" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Monthly" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Yearly" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Trial" }),
-          /* @__PURE__ */ jsx11("th", { style: styles.th })
+      /* @__PURE__ */ jsx13("h2", { style: styles.subtitle, children: "Stored (database)" }),
+      catalog.stored.length === 0 ? /* @__PURE__ */ jsx13(Empty, { icon: "catalog", title: "No stored plans", children: "Plans are configured in code; nothing has been written to the database." }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
+        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Plan" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Tier" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Seats" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Monthly" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Yearly" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Trial" }),
+          /* @__PURE__ */ jsx13("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx11("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs11("tr", { children: [
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx11("strong", { children: p.name }),
-            p.description ? /* @__PURE__ */ jsx11("div", { style: styles.muted, children: p.description }) : null
+        /* @__PURE__ */ jsx13("tbody", { children: catalog.stored.map((p) => /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx13("strong", { children: p.name }),
+            p.description ? /* @__PURE__ */ jsx13("div", { style: styles.muted, children: p.description }) : null
           ] }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: p.tier }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: p.seats ?? "\u221E" }),
-          /* @__PURE__ */ jsxs11("td", { style: styles.td, children: [
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.tier }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.seats ?? "\u221E" }),
+          /* @__PURE__ */ jsxs13("td", { style: styles.td, children: [
             money(p.pricing?.monthly),
             " ",
             p.pricing?.currency ?? ""
           ] }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: money(p.pricing?.yearly) }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
-          /* @__PURE__ */ jsx11("td", { style: styles.td, children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: money(p.pricing?.yearly) }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: p.trialDays ? `${p.trialDays} d` : "\u2014" }),
+          /* @__PURE__ */ jsx13("td", { style: styles.td, children: /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1573,114 +2034,148 @@ function CatalogScreen({ client }) {
 }
 
 // src/screens/SubscriberScreen.tsx
-import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/react-admin";
-import { useState as useState4 } from "react";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-function SubscriberScreen({ client, pageSize = 50 }) {
-  const [type, setType] = useState4("user");
-  const [idInput, setIdInput] = useState4("");
-  const [subscriber, setSubscriber] = useState4(null);
+import { useAdminSubscribers } from "@fonderie/react-admin";
+import { useState as useState7 } from "react";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var FILTERS = [
+  { label: "All", match: () => true },
+  { label: "Active", match: (s) => s === "active" },
+  { label: "Trialing", match: (s) => s === "trialing" },
+  { label: "Past due", match: (s) => s === "past_due" || s === "unpaid" },
+  { label: "Canceled", match: (s) => s === "canceled" }
+];
+function SubscriberScreen({ client, pageSize = 50, onOpenUser }) {
   const list = useAdminSubscribers(client, { limit: pageSize });
-  const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(client, subscriber, { limit: 20 });
-  const [amount, setAmount] = useState4("");
-  const [note, setNote] = useState4("");
-  const [granted, setGranted] = useState4(null);
-  const open = (t2, id) => {
-    setGranted(null);
-    setType(t2);
-    setIdInput(id);
-    setSubscriber({ type: t2, id });
-  };
-  return /* @__PURE__ */ jsxs12("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx12(
+  const [filter, setFilter] = useState7("All");
+  const [open, setOpen] = useState7(null);
+  const [type, setType] = useState7("workspace");
+  const [idInput, setIdInput] = useState7("");
+  if (open) {
+    return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
+      /* @__PURE__ */ jsx14(
+        PageHeader,
+        {
+          title: `${open.type}/${open.id}`,
+          lead: "Plan, credits and what moved.",
+          actions: /* @__PURE__ */ jsxs14("button", { type: "button", style: styles.buttonGhost, onClick: () => setOpen(null), children: [
+            /* @__PURE__ */ jsx14(Icon, { name: "back", size: 14 }),
+            "All subscriptions"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx14(SubscriberBilling, { client, subscriber: open })
+    ] });
+  }
+  const match = FILTERS.find((f) => f.label === filter)?.match ?? (() => true);
+  const rows = list.subscriptions.filter((s) => match(s.status));
+  const openRow = (t2, id) => t2 === "user" && onOpenUser ? onOpenUser(id) : setOpen({ type: t2, id });
+  return /* @__PURE__ */ jsxs14("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx14(
       PageHeader,
       {
-        title: "Subscribers",
-        lead: "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
+        title: "Subscriptions",
+        lead: "Who pays, and who is behind. A user's plan and credits are also on their page under Users \u2014 free users appear only there.",
+        actions: /* @__PURE__ */ jsx14(RefreshButton, { onClick: () => void list.refresh(), busy: list.isLoading })
       }
     ),
-    /* @__PURE__ */ jsxs12(
-      "form",
-      {
-        style: styles.toolbar,
-        onSubmit: (e) => {
-          e.preventDefault();
-          setGranted(null);
-          setSubscriber(idInput.trim() ? { type, id: idInput.trim() } : null);
-        },
-        children: [
-          /* @__PURE__ */ jsxs12(
-            "select",
-            {
-              value: type,
-              onChange: (e) => setType(e.target.value),
-              style: styles.input,
-              "aria-label": "Type",
-              children: [
-                /* @__PURE__ */ jsx12("option", { value: "user", children: "user" }),
-                /* @__PURE__ */ jsx12("option", { value: "workspace", children: "workspace" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx12(
-            "input",
-            {
-              value: idInput,
-              onChange: (e) => setIdInput(e.target.value),
-              placeholder: "subscriber id",
-              style: { ...styles.input, minWidth: 280 },
-              "aria-label": "Subscriber id"
-            }
-          ),
-          /* @__PURE__ */ jsxs12("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx12(Icon, { name: "search", size: 14 }),
-            "Look up"
-          ] }),
-          subscriber ? /* @__PURE__ */ jsxs12(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => {
-                setSubscriber(null);
-                setIdInput("");
-                setGranted(null);
+    /* @__PURE__ */ jsxs14("div", { style: { ...styles.toolbar, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx14(
+        "fieldset",
+        {
+          style: {
+            display: "flex",
+            gap: 6,
+            flexWrap: "wrap",
+            border: "none",
+            margin: 0,
+            padding: 0,
+            minWidth: 0
+          },
+          "aria-label": "Filter by status",
+          children: FILTERS.map((f) => {
+            const n = list.subscriptions.filter((s) => f.match(s.status)).length;
+            const on = filter === f.label;
+            return /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": on,
+                onClick: () => setFilter(f.label),
+                style: { ...on ? styles.buttonPrimary : styles.button, height: 28 },
+                children: [
+                  f.label,
+                  /* @__PURE__ */ jsx14("span", { style: { opacity: 0.7 }, children: n })
+                ]
               },
-              children: [
-                /* @__PURE__ */ jsx12(Icon, { name: "back", size: 14 }),
-                "All subscribers"
-              ]
-            }
-          ) : /* @__PURE__ */ jsx12(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => void list.refresh(),
-              disabled: list.isLoading,
-              children: "Refresh"
-            }
-          )
-        ]
+              f.label
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs14(
+        "form",
+        {
+          style: { display: "flex", gap: 6 },
+          onSubmit: (e) => {
+            e.preventDefault();
+            if (idInput.trim()) openRow(type, idInput.trim());
+          },
+          children: [
+            /* @__PURE__ */ jsxs14(
+              "select",
+              {
+                value: type,
+                onChange: (e) => setType(e.target.value),
+                style: styles.input,
+                "aria-label": "Type",
+                children: [
+                  /* @__PURE__ */ jsx14("option", { value: "workspace", children: "workspace" }),
+                  /* @__PURE__ */ jsx14("option", { value: "user", children: "user" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "input",
+              {
+                value: idInput,
+                onChange: (e) => setIdInput(e.target.value),
+                placeholder: "subscriber id",
+                style: { ...styles.input, width: 220 },
+                "aria-label": "Subscriber id"
+              }
+            ),
+            /* @__PURE__ */ jsxs14("button", { type: "submit", style: styles.button, disabled: !idInput.trim(), children: [
+              /* @__PURE__ */ jsx14(Icon, { name: "search", size: 14 }),
+              "Open"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    list.error ? /* @__PURE__ */ jsx14("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
+    rows.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx14(
+      Empty,
+      {
+        icon: "subscriber",
+        title: filter === "All" ? "No subscriptions yet" : `No ${filter.toLowerCase()} subscriptions`,
+        children: "Subscriptions appear here once someone checks out."
       }
-    ),
-    error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    !subscriber ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-      list.error ? /* @__PURE__ */ jsx12("p", { style: styles.error, role: "alert", children: list.error.explanation }) : null,
-      list.subscriptions.length === 0 && !list.isLoading ? /* @__PURE__ */ jsx12(Empty, { icon: "subscriber", title: "No subscribers yet", children: "Subscriptions appear here once someone checks out." }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
-        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Subscriber" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Plan" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Status" }),
-          /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Renews" })
-        ] }) }),
-        /* @__PURE__ */ jsx12("tbody", { children: list.subscriptions.map((s) => /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: /* @__PURE__ */ jsxs12(
+    ) : /* @__PURE__ */ jsxs14("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Subscriber" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Plan" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Status" }),
+        /* @__PURE__ */ jsx14("th", { style: styles.th, children: "Renews / ends" })
+      ] }) }),
+      /* @__PURE__ */ jsx14("tbody", { children: rows.map((s) => {
+        const end = periodEnd(s);
+        return /* @__PURE__ */ jsxs14("tr", { children: [
+          /* @__PURE__ */ jsx14("td", { style: styles.td, children: /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
               style: { ...styles.link, ...styles.mono },
-              onClick: () => open(s.subscriberType, s.subscriberId),
+              onClick: () => openRow(s.subscriberType, s.subscriberId),
               children: [
                 s.subscriberType,
                 "/",
@@ -1688,206 +2183,56 @@ function SubscriberScreen({ client, pageSize = 50 }) {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx12("strong", { children: s.plan }),
-            " \xB7 ",
-            s.interval
+          /* @__PURE__ */ jsxs14("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx14("strong", { children: s.plan }),
+            " ",
+            /* @__PURE__ */ jsxs14("span", { style: styles.muted, children: [
+              "\xB7 ",
+              s.interval
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx12(
-              Pill,
-              {
-                tone: s.status === "active" ? "ok" : s.status === "trialing" ? "info" : s.status === "past_due" ? "warn" : "neutral",
-                children: s.status
-              }
-            ),
-            s.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
+          /* @__PURE__ */ jsxs14("td", { style: styles.td, children: [
+            /* @__PURE__ */ jsx14(Pill, { tone: statusTone(s.status), children: s.status }),
+            s.cancelAtPeriodEnd && s.status !== "canceled" ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
               " ",
-              /* @__PURE__ */ jsx12(Pill, { tone: "warn", dot: false, children: "cancels" })
+              /* @__PURE__ */ jsx14(Pill, { tone: "warn", dot: false, children: "cancels" })
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : /* @__PURE__ */ jsx12("span", { style: styles.muted, children: "\u2014" }) })
-        ] }, s.id)) })
-      ] }),
-      list.isLoading ? /* @__PURE__ */ jsx12("p", { style: styles.status, children: "Loading\u2026" }) : null,
-      list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx12(
-        "button",
-        {
-          type: "button",
-          style: { ...styles.button, marginTop: 8 },
-          onClick: () => void list.loadMore(),
-          children: "Load more"
-        }
-      ) : null
-    ] }) : null,
-    subscriber && !isLoading ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Subscription" }),
-      subscription ? /* @__PURE__ */ jsx12("table", { style: styles.table, children: /* @__PURE__ */ jsxs12("tbody", { children: [
-        /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "plan" }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            /* @__PURE__ */ jsx12("strong", { children: subscription.plan }),
-            " \xB7 ",
-            subscription.interval
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "status" }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            subscription.status,
-            subscription.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "period" }),
-          /* @__PURE__ */ jsxs12("td", { style: styles.td, children: [
-            subscription.currentPeriodStart ? new Date(subscription.currentPeriodStart).toLocaleDateString() : "\u2014",
-            " ",
-            "\u2192",
+          /* @__PURE__ */ jsx14("td", { style: { ...styles.td, whiteSpace: "nowrap" }, children: end ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
+            /* @__PURE__ */ jsx14("span", { style: styles.muted, children: end.label }),
             " ",
-            subscription.currentPeriodEnd ? new Date(subscription.currentPeriodEnd).toLocaleDateString() : "\u2014"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs12("tr", { children: [
-          /* @__PURE__ */ jsx12("td", { style: styles.td, children: "provider" }),
-          /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: subscription.providerSubscriptionId ?? "\u2014" })
-        ] })
-      ] }) }) : /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "No subscription." }),
-      /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Wallet" }),
-      wallet ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
-        /* @__PURE__ */ jsxs12(
-          "p",
-          {
-            style: {
-              ...styles.card,
-              display: "flex",
-              alignItems: "baseline",
-              gap: 8,
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx12(
-                "strong",
-                {
-                  style: {
-                    fontSize: 22,
-                    letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
-                  },
-                  children: wallet.balance
-                }
-              ),
-              " ",
-              wallet.currency,
-              " ",
-              /* @__PURE__ */ jsxs12("span", { style: styles.muted, children: [
-                "(granted ",
-                wallet.granted ?? "0",
-                " \xB7 purchased ",
-                wallet.purchased ?? "0",
-                ") \xB7 minor units, precision ",
-                wallet.precision
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs12(
-          "form",
-          {
-            style: styles.toolbar,
-            onSubmit: (e) => {
-              e.preventDefault();
-              const key = `admin-grant-${subscriber.type}-${subscriber.id}-${Date.now()}`;
-              void grant({
-                amount: amount.trim(),
-                ...note ? { description: note } : {},
-                idempotencyKey: key
-              }).then(() => {
-                setGranted(`Granted ${amount.trim()} ${wallet.currency}.`);
-                setAmount("");
-                setNote("");
-              }).catch(() => {
-              });
-            },
-            children: [
-              /* @__PURE__ */ jsx12(
-                "input",
-                {
-                  value: amount,
-                  onChange: (e) => setAmount(e.target.value),
-                  placeholder: "amount (minor units)",
-                  style: styles.input,
-                  "aria-label": "Amount"
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "input",
-                {
-                  value: note,
-                  onChange: (e) => setNote(e.target.value),
-                  placeholder: "reason (optional)",
-                  style: { ...styles.input, minWidth: 220 },
-                  "aria-label": "Reason"
-                }
-              ),
-              /* @__PURE__ */ jsxs12(
-                "button",
-                {
-                  type: "submit",
-                  style: styles.buttonPrimary,
-                  disabled: !/^\d+$/.test(amount.trim()),
-                  children: [
-                    /* @__PURE__ */ jsx12(Icon, { name: "plus", size: 14 }),
-                    "Grant"
-                  ]
-                }
-              ),
-              granted ? /* @__PURE__ */ jsx12("span", { style: styles.ok, children: granted }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx12("h2", { style: styles.subtitle, children: "Ledger" }),
-        ledger.length === 0 ? /* @__PURE__ */ jsx12(Empty, { icon: "subscriber", title: "Nothing moved yet" }) : /* @__PURE__ */ jsxs12("table", { style: styles.table, children: [
-          /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
-            /* @__PURE__ */ jsx12("th", { style: styles.th, children: "When" }),
-            /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Kind" }),
-            /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Amount" }),
-            /* @__PURE__ */ jsx12("th", { style: styles.th, children: "Note" })
-          ] }) }),
-          /* @__PURE__ */ jsx12("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs12("tr", { children: [
-            /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
-            /* @__PURE__ */ jsx12("td", { style: styles.td, children: t2.type }),
-            /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
-            /* @__PURE__ */ jsx12("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
-          ] }, t2.id)) })
-        ] }),
-        hasMoreLedger ? /* @__PURE__ */ jsx12(
-          "button",
-          {
-            type: "button",
-            style: { ...styles.button, marginTop: 8 },
-            onClick: () => void loadMoreLedger(),
-            children: "Load more"
-          }
-        ) : null
-      ] }) : /* @__PURE__ */ jsx12("p", { style: styles.muted, children: "No wallet \u2014 billing has no wallet configuration." })
-    ] }) : null
+            end.date
+          ] }) : /* @__PURE__ */ jsx14("span", { style: styles.muted, children: "\u2014" }) })
+        ] }, s.id);
+      }) })
+    ] }),
+    list.isLoading ? /* @__PURE__ */ jsx14("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    list.hasMore && !list.isLoading ? /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        style: { ...styles.button, marginTop: 8 },
+        onClick: () => void list.loadMore(),
+        children: "Load more"
+      }
+    ) : null
   ] });
 }
 
 // src/screens/AuditScreen.tsx
 import { useAdminAudit } from "@fonderie/react-admin";
-import { useState as useState5 } from "react";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function AuditScreen({ client, pageSize = 50 }) {
-  const [draft, setDraft] = useState5({ workspaceId: "", type: "", actorId: "" });
-  const [filter, setFilter] = useState5(
+  const [draft, setDraft] = useState8({ workspaceId: "", type: "", actorId: "" });
+  const [filter, setFilter] = useState8(
     {}
   );
   const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(client, {
     ...filter,
     limit: pageSize
   });
-  const field = (key, placeholder) => /* @__PURE__ */ jsx13(
+  const field = (key, placeholder) => /* @__PURE__ */ jsx15(
     "input",
     {
       value: draft[key],
@@ -1897,15 +2242,15 @@ function AuditScreen({ client, pageSize = 50 }) {
       "aria-label": placeholder
     }
   );
-  return /* @__PURE__ */ jsxs13("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs15("div", { style: styles.container, children: [
+    /* @__PURE__ */ jsx15(
       PageHeader,
       {
         title: "Audit",
         lead: "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs15(
       "form",
       {
         style: styles.toolbar,
@@ -1921,11 +2266,11 @@ function AuditScreen({ client, pageSize = 50 }) {
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          /* @__PURE__ */ jsxs13("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
-            /* @__PURE__ */ jsx13(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ jsxs15("button", { type: "submit", style: styles.buttonPrimary, disabled: isLoading, children: [
+            /* @__PURE__ */ jsx15(Icon, { name: "search", size: 14 }),
             "Filter"
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -1938,25 +2283,25 @@ function AuditScreen({ client, pageSize = 50 }) {
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsx13("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
-    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx13(Empty, { icon: "audit", title: "Nothing recorded for this filter" }) : /* @__PURE__ */ jsxs13("table", { style: styles.table, children: [
-      /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
-        /* @__PURE__ */ jsx13("th", { style: styles.th, children: "When" }),
-        /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Type" }),
-        /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Workspace" }),
-        /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Actor" }),
-        /* @__PURE__ */ jsx13("th", { style: styles.th, children: "Request" })
+    error ? /* @__PURE__ */ jsx15("p", { style: styles.error, role: "alert", children: error.explanation }) : null,
+    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx15(Empty, { icon: "audit", title: "Nothing recorded for this filter" }) : /* @__PURE__ */ jsxs15("table", { style: styles.table, children: [
+      /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "When" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Type" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Workspace" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Actor" }),
+        /* @__PURE__ */ jsx15("th", { style: styles.th, children: "Request" })
       ] }) }),
-      /* @__PURE__ */ jsx13("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs13("tr", { children: [
-        /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
-        /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
-        /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
-        /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
-        /* @__PURE__ */ jsx13("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
+      /* @__PURE__ */ jsx15("tbody", { children: events.map((e) => /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.muted }, children: new Date(e.createdAt).toLocaleString() }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: e.type }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: String(e.payload["workspaceId"] ?? "\u2014") }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.mono }, children: e.actorId ?? "\u2014" }),
+        /* @__PURE__ */ jsx15("td", { style: { ...styles.td, ...styles.muted }, children: e.requestId ?? "" })
       ] }, e.id)) })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx13("p", { style: styles.status, children: "Loading\u2026" }) : null,
-    hasMore && !isLoading ? /* @__PURE__ */ jsx13(
+    isLoading ? /* @__PURE__ */ jsx15("p", { style: styles.status, children: "Loading\u2026" }) : null,
+    hasMore && !isLoading ? /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -1969,7 +2314,7 @@ function AuditScreen({ client, pageSize = 50 }) {
 }
 
 // src/screens/AdminShell.tsx
-import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var ICON = {
   attention: "attention",
   modules: "modules",
@@ -1984,13 +2329,14 @@ var ICON = {
   audit: "audit",
   log: "log",
   tokens: "tokens",
+  operators: "users",
   migrations: "migrations"
 };
 var NARROW = "(max-width: 820px)";
 function useNarrow() {
   const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-  const [narrow, setNarrow] = useState6(() => query?.matches ?? false);
-  useEffect(() => {
+  const [narrow, setNarrow] = useState9(() => query?.matches ?? false);
+  useEffect2(() => {
     if (!query) return;
     const on = (e) => setNarrow(e.matches);
     query.addEventListener("change", on);
@@ -2014,7 +2360,7 @@ var NAV = [
     group: "Money",
     items: [
       { page: "catalog", label: "Catalog", needs: "billing" },
-      { page: "subscriber", label: "Subscriber", needs: "billing" }
+      { page: "subscriber", label: "Subscriptions", needs: "billing" }
     ]
   },
   { group: "Settings", items: [{ page: "settings", label: "Config & secrets", needs: "config" }] },
@@ -2024,7 +2370,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" }
     ]
   }
@@ -2041,70 +2388,96 @@ function AdminShell({
   onNavigate,
   appName = "Admin",
   envLabel,
-  footer
+  footer,
+  operators = false,
+  currentOperator
 }) {
   const narrow = useNarrow();
-  const [drawer, setDrawer] = useState6(false);
-  const [own, setOwn] = useState6("attention");
+  const [drawer, setDrawer] = useState9(false);
+  const [own, setOwn] = useState9("attention");
+  const [openUser, setOpenUser] = useState9(void 0);
   const current = page ?? own;
   const go = (p) => {
     if (onNavigate) onNavigate(p);
     if (page === void 0) setOwn(p);
     setDrawer(false);
   };
-  const [editing, setEditing] = useState6(null);
+  const [editing, setEditing] = useState9(null);
   const has = {
     config: Boolean(configClient),
     courier: Boolean(courierClient),
     auth: Boolean(authClient),
     billing: Boolean(billingClient),
-    audit: Boolean(auditClient)
+    audit: Boolean(auditClient),
+    operators
   };
   let body;
   switch (current) {
     case "attention":
-      body = /* @__PURE__ */ jsx14(AttentionScreen, { client });
+      body = /* @__PURE__ */ jsx16(AttentionScreen, { client });
       break;
     case "modules":
-      body = /* @__PURE__ */ jsx14(ModulesScreen, { client });
+      body = /* @__PURE__ */ jsx16(ModulesScreen, { client });
       break;
     case "doctor":
-      body = /* @__PURE__ */ jsx14(DoctorScreen, { client });
+      body = /* @__PURE__ */ jsx16(DoctorScreen, { client });
       break;
     case "environment":
-      body = /* @__PURE__ */ jsx14(EnvironmentScreen, { client });
+      body = /* @__PURE__ */ jsx16(EnvironmentScreen, { client });
       break;
     case "routes":
-      body = /* @__PURE__ */ jsx14(RoutesScreen, { client });
+      body = /* @__PURE__ */ jsx16(RoutesScreen, { client });
       break;
     case "tokens":
-      body = /* @__PURE__ */ jsx14(TokensScreen, { client });
+      body = /* @__PURE__ */ jsx16(TokensScreen, { client });
+      break;
+    case "operators":
+      body = /* @__PURE__ */ jsx16(OperatorsScreen, { client, me: currentOperator });
       break;
     case "migrations":
-      body = /* @__PURE__ */ jsx14(MigrationsScreen, { client });
+      body = /* @__PURE__ */ jsx16(MigrationsScreen, { client });
       break;
     case "log":
-      body = /* @__PURE__ */ jsx14(AdminLogScreen, { client });
+      body = /* @__PURE__ */ jsx16(AdminLogScreen, { client });
       break;
     case "catalog":
-      body = billingClient ? /* @__PURE__ */ jsx14(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to see the catalog here." });
+      body = billingClient ? /* @__PURE__ */ jsx16(CatalogScreen, { client: billingClient }) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to see the catalog here." });
       break;
     case "subscriber":
-      body = billingClient ? /* @__PURE__ */ jsx14(SubscriberScreen, { client: billingClient }) : /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to look up subscribers here." });
+      body = billingClient ? /* @__PURE__ */ jsx16(
+        SubscriberScreen,
+        {
+          client: billingClient,
+          ...authClient ? {
+            onOpenUser: (id) => {
+              setOpenUser(id);
+              go("users");
+            }
+          } : {}
+        }
+      ) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a BillingAdminClient to look up subscribers here." });
       break;
     case "audit":
-      body = auditClient ? /* @__PURE__ */ jsx14(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuditAdminClient to see the audit trail here." });
+      body = auditClient ? /* @__PURE__ */ jsx16(AuditScreen, { client: auditClient }) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuditAdminClient to see the audit trail here." });
       break;
     case "users":
-      body = authClient ? /* @__PURE__ */ jsx14(UsersScreen, { client: authClient }) : /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
+      body = authClient ? /* @__PURE__ */ jsx16(
+        UsersScreen,
+        {
+          client: authClient,
+          billingClient,
+          openUserId: openUser
+        },
+        openUser ?? "list"
+      ) : /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass an AuthAdminClient to look up users here." });
       break;
     case "settings":
-      body = !configClient ? /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
-        /* @__PURE__ */ jsx14("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs14("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
-          /* @__PURE__ */ jsx14(Icon, { name: "back", size: 14 }),
+      body = !configClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a ConfigAdminClient to manage config and secrets here." }) : editing && editing.kind !== "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Config & secrets"
         ] }) }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           ConfigEditorScreen,
           {
             client: configClient,
@@ -2114,7 +2487,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx14(
+      ] }) : /* @__PURE__ */ jsx16(
         ConfigListScreen,
         {
           client: configClient,
@@ -2127,12 +2500,12 @@ function AdminShell({
       );
       break;
     case "templates":
-      body = !courierClient ? /* @__PURE__ */ jsx14("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
-        /* @__PURE__ */ jsx14("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs14("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
-          /* @__PURE__ */ jsx14(Icon, { name: "back", size: 14 }),
+      body = !courierClient ? /* @__PURE__ */ jsx16("p", { style: { ...styles.status, padding: "32px 40px" }, children: "Pass a CourierAdminClient to manage templates here." }) : editing?.kind === "template" ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+        /* @__PURE__ */ jsx16("div", { style: { padding: "24px 40px 0" }, children: /* @__PURE__ */ jsxs16("button", { type: "button", style: styles.buttonGhost, onClick: () => setEditing(null), children: [
+          /* @__PURE__ */ jsx16(Icon, { name: "back", size: 14 }),
           "Templates"
         ] }) }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           TemplateEditorScreen,
           {
             client: courierClient,
@@ -2140,7 +2513,7 @@ function AdminShell({
             onSaved: () => setEditing(null)
           }
         )
-      ] }) : /* @__PURE__ */ jsx14(
+      ] }) : /* @__PURE__ */ jsx16(
         TemplateListScreen,
         {
           client: courierClient,
@@ -2150,11 +2523,11 @@ function AdminShell({
       break;
   }
   const production = envLabel ? /^prod/i.test(envLabel) : false;
-  const brand = /* @__PURE__ */ jsxs14("div", { style: styles.navBrand, children: [
-    /* @__PURE__ */ jsx14("div", { style: styles.navMark, children: /* @__PURE__ */ jsx14(Icon, { name: "mark", size: 15 }) }),
-    /* @__PURE__ */ jsxs14("div", { style: { minWidth: 0, flex: 1 }, children: [
-      /* @__PURE__ */ jsx14("div", { style: styles.navBrandTitle, children: appName }),
-      envLabel ? /* @__PURE__ */ jsx14(
+  const brand = /* @__PURE__ */ jsxs16("div", { style: styles.navBrand, children: [
+    /* @__PURE__ */ jsx16("div", { style: styles.navMark, children: /* @__PURE__ */ jsx16(Icon, { name: "mark", size: 15 }) }),
+    /* @__PURE__ */ jsxs16("div", { style: { minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx16("div", { style: styles.navBrandTitle, children: appName }),
+      envLabel ? /* @__PURE__ */ jsx16(
         "span",
         {
           style: {
@@ -2171,18 +2544,18 @@ function AdminShell({
         }
       ) : null
     ] }),
-    narrow ? /* @__PURE__ */ jsx14(
+    narrow ? /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
         style: styles.buttonGhost,
         "aria-label": "Close menu",
         onClick: () => setDrawer(false),
-        children: /* @__PURE__ */ jsx14(Icon, { name: "close" })
+        children: /* @__PURE__ */ jsx16(Icon, { name: "close" })
       }
     ) : null
   ] });
-  const nav = /* @__PURE__ */ jsxs14(
+  const nav = /* @__PURE__ */ jsxs16(
     "nav",
     {
       style: {
@@ -2192,14 +2565,14 @@ function AdminShell({
       "aria-label": "Admin",
       children: [
         brand,
-        /* @__PURE__ */ jsx14("div", { style: styles.navScroll, children: NAV.map((g) => {
+        /* @__PURE__ */ jsx16("div", { style: styles.navScroll, children: NAV.map((g) => {
           const items = g.items.filter((i) => !i.needs || has[i.needs]);
           if (items.length === 0) return null;
-          return /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14("div", { style: styles.navGroup, children: g.group }),
+          return /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx16("div", { style: styles.navGroup, children: g.group }),
             items.map((i) => {
               const active = current === i.page;
-              return /* @__PURE__ */ jsxs14(
+              return /* @__PURE__ */ jsxs16(
                 "button",
                 {
                   type: "button",
@@ -2208,10 +2581,11 @@ function AdminShell({
                   "aria-current": active ? "page" : void 0,
                   onClick: () => {
                     setEditing(null);
+                    setOpenUser(void 0);
                     go(i.page);
                   },
                   children: [
-                    /* @__PURE__ */ jsx14(Icon, { name: ICON[i.page], style: active ? styles.navIconActive : void 0 }),
+                    /* @__PURE__ */ jsx16(Icon, { name: ICON[i.page], style: active ? styles.navIconActive : void 0 }),
                     i.label
                   ]
                 },
@@ -2220,15 +2594,15 @@ function AdminShell({
             })
           ] }, g.group);
         }) }),
-        footer ? /* @__PURE__ */ jsx14("div", { style: styles.navFooter, children: footer }) : null
+        footer ? /* @__PURE__ */ jsx16("div", { style: styles.navFooter, children: footer }) : null
       ]
     }
   );
   const title = NAV.flatMap((g) => g.items).find((i) => i.page === current)?.label ?? "";
-  return /* @__PURE__ */ jsxs14("div", { style: { ...styles.shell, ...narrow ? { flexDirection: "column" } : {} }, children: [
-    narrow ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
-      /* @__PURE__ */ jsxs14("div", { style: styles.topbar, children: [
-        /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs16("div", { style: { ...styles.shell, ...narrow ? { flexDirection: "column" } : {} }, children: [
+    narrow ? /* @__PURE__ */ jsxs16(Fragment10, { children: [
+      /* @__PURE__ */ jsxs16("div", { style: styles.topbar, children: [
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2236,18 +2610,18 @@ function AdminShell({
             "aria-label": "Open menu",
             "aria-expanded": drawer,
             onClick: () => setDrawer(true),
-            children: /* @__PURE__ */ jsx14(Icon, { name: "menu" })
+            children: /* @__PURE__ */ jsx16(Icon, { name: "menu" })
           }
         ),
-        /* @__PURE__ */ jsx14("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
-        envLabel ? /* @__PURE__ */ jsx14("span", { style: { ...styles.badge, marginLeft: "auto" }, children: envLabel }) : null
+        /* @__PURE__ */ jsx16("span", { style: { fontWeight: 600, fontSize: 14 }, children: title }),
+        envLabel ? /* @__PURE__ */ jsx16("span", { style: { ...styles.badge, marginLeft: "auto" }, children: envLabel }) : null
       ] }),
-      drawer ? /* @__PURE__ */ jsxs14("div", { style: styles.drawer, children: [
+      drawer ? /* @__PURE__ */ jsxs16("div", { style: styles.drawer, children: [
         nav,
-        /* @__PURE__ */ jsx14("div", { style: styles.scrim, onClick: () => setDrawer(false), "aria-hidden": "true" })
+        /* @__PURE__ */ jsx16("div", { style: styles.scrim, onClick: () => setDrawer(false), "aria-hidden": "true" })
       ] }) : null
     ] }) : nav,
-    /* @__PURE__ */ jsx14("main", { className: "fonderie-admin-main", style: styles.main, children: body })
+    /* @__PURE__ */ jsx16("main", { className: "fonderie-admin-main", style: styles.main, children: body })
   ] });
 }
 export {
@@ -2260,7 +2634,9 @@ export {
   EnvironmentScreen,
   MigrationsScreen,
   ModulesScreen,
+  OperatorsScreen,
   RoutesScreen,
+  SubscriberBilling,
   SubscriberScreen,
   TokensScreen,
   UsersScreen