@fonderie/vue-admin-screens 1.1.0 → 1.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent13, h as h15, onBeforeUnmount, onMounted, ref as ref6 } from "vue";
+import { computed as computed3, defineComponent as defineComponent15, h as h17, onBeforeUnmount, onMounted, ref as ref9 } from "vue";
 
 // src/styles.ts
 var t = {
@@ -557,6 +557,12 @@ function empty(title, body, iconName = "check") {
     body ? h("div", body) : null
   ]);
 }
+function refreshButton(onClick, busy, label = "Refresh") {
+  return h("button", { type: "button", style: styles.button, onClick, disabled: busy }, [
+    icon("refresh", 14),
+    busy ? "Working\u2026" : label
+  ]);
+}
 function methodChip(method) {
   const tone = method === "GET" ? "ok" : method === "DELETE" ? "bad" : method === "POST" ? "info" : "warn";
   const color = toneColor[tone];
@@ -608,7 +614,7 @@ function table(headers, rows) {
   ]);
 }
 var td = (children, extra = {}) => h2("td", { style: { ...styles.td, ...extra } }, children);
-var refreshButton = (label, disabled, onClick) => h2("button", { type: "button", style: styles.button, disabled, onClick }, [
+var refreshButton2 = (label, disabled, onClick) => h2("button", { type: "button", style: styles.button, disabled, onClick }, [
   icon("refresh", 14),
   disabled ? "Working\u2026" : label
 ]);
@@ -634,7 +640,7 @@ var AdminLogScreen = defineComponent({
       pageHeader(
         "Admin log",
         "Every request made through this surface, newest first \u2014 refused ones included.",
-        [refreshButton("Refresh", isLoading.value, () => void refresh())]
+        [refreshButton2("Refresh", isLoading.value, () => void refresh())]
       ),
       error.value ? h3(
         "p",
@@ -775,7 +781,7 @@ var AttentionScreen = defineComponent2({
             )
           ];
         },
-        [refreshButton("Refresh", isLoading.value, () => void refresh())],
+        [refreshButton2("Refresh", isLoading.value, () => void refresh())],
         {
           lead: a ? `What needs you on this deployment \xB7 checked ${new Date(a.generatedAt).toLocaleTimeString()}` : "What needs you on this deployment"
         }
@@ -955,7 +961,7 @@ var DoctorScreen = defineComponent4({
           report.value.ok ? "ok" : "bad",
           report.value.ok ? "all checks pass" : "a check failed"
         ) : null,
-        refreshButton("Run again", isLoading.value, () => void refresh())
+        refreshButton2("Run again", isLoading.value, () => void refresh())
       ],
       {
         loadingText: "Running the checks\u2026",
@@ -1158,7 +1164,7 @@ var MigrationsScreen = defineComponent7({
           ...behind.map((m) => section(m, r.everApplied))
         ].filter(Boolean);
       },
-      [refreshButton("Refresh", isLoading.value, () => void refresh())],
+      [refreshButton2("Refresh", isLoading.value, () => void refresh())],
       {
         lead: "Schema changes each module ships, and whether this database has them.",
         errorText: (e) => e.status === 403 ? "Applying migrations needs a token with the write scope." : e.explanation
@@ -1167,42 +1173,319 @@ var MigrationsScreen = defineComponent7({
   }
 });
 
+// src/screens/OperatorsScreen.ts
+import { useAdminOperators } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent8, h as h10, ref as ref2 } from "vue";
+var LEVELS = [
+  { label: "Read only", scopes: ["read"], hint: "look around, change nothing" },
+  { label: "Editor", scopes: ["read", "write"], hint: "change config, templates, users" },
+  {
+    label: "Owner",
+    scopes: ["read", "write", "secrets"],
+    hint: "secrets, tokens and operators too"
+  }
+];
+var levelOf = (scopes) => scopes.includes("secrets") ? "Owner" : scopes.includes("write") ? "Editor" : "Read only";
+var scopesFor = (label) => LEVELS.find((l) => l.label === label)?.scopes ?? ["read"];
+var small = { height: "28px" };
+var OperatorsScreen = defineComponent8({
+  name: "FonderieOperatorsScreen",
+  props: {
+    client: { type: Object, required: true },
+    // The signed-in operator's email: their own row offers no disable or
+    // recovery (the server refuses both for yourself anyway).
+    me: { type: String, default: void 0 }
+  },
+  setup(props) {
+    const { report, isLoading, error, invite, recover, update, revokeLink } = useAdminOperators(
+      props.client
+    );
+    const email = ref2("");
+    const level = ref2("Editor");
+    const minted = ref2(null);
+    const copied = ref2(false);
+    const status = (o) => o.disabledAt ? pill("neutral", "disabled") : o.locked ? pill("warn", "locked") : !o.enrolled ? pill("warn", "setting up") : pill("ok", "active");
+    const mintedNotice = (link) => {
+      const url = `${window.location.origin}${link.url}`;
+      return h10(
+        "div",
+        {
+          style: {
+            ...styles.notice,
+            background: "color-mix(in srgb, var(--fonderie-accent,#00d294) 10%, transparent)",
+            borderColor: "color-mix(in srgb, var(--fonderie-accent,#00d294) 35%, transparent)"
+          }
+        },
+        [
+          h10("strong", `Send this link to ${link.email}. It is shown once.`),
+          ` It works once and expires ${new Date(link.expiresAt).toLocaleString()}.`,
+          h10(
+            "div",
+            { style: { display: "flex", gap: "8px", marginTop: "8px", alignItems: "center" } },
+            [
+              h10(
+                "code",
+                { style: { ...styles.code, flex: 1, padding: "7px 10px", wordBreak: "break-all" } },
+                url
+              ),
+              h10(
+                "button",
+                {
+                  type: "button",
+                  style: styles.button,
+                  onClick: () => {
+                    void navigator.clipboard?.writeText(url);
+                    copied.value = true;
+                  }
+                },
+                copied.value ? "Copied" : "Copy"
+              ),
+              h10(
+                "button",
+                {
+                  type: "button",
+                  style: styles.buttonGhost,
+                  "aria-label": "Dismiss",
+                  onClick: () => {
+                    minted.value = null;
+                    copied.value = false;
+                  }
+                },
+                [icon("close", 14)]
+              )
+            ]
+          )
+        ]
+      );
+    };
+    const setMinted = (l) => {
+      copied.value = false;
+      minted.value = l;
+    };
+    return () => {
+      const r = report.value;
+      const e = error.value;
+      return h10("div", { style: styles.container }, [
+        pageHeader(
+          "Operators",
+          "The people who can sign in to this console. Each one uses a password and an authenticator app; there is no sign-up."
+        ),
+        e ? h10(
+          "p",
+          { style: styles.error, role: "alert" },
+          e.status === 403 && e.reason === "FORBIDDEN" ? "Managing operators needs the Owner level." : e.explanation
+        ) : null,
+        minted.value ? mintedNotice(minted.value) : null,
+        h10(
+          "form",
+          {
+            style: {
+              ...styles.card,
+              display: "flex",
+              gap: "8px",
+              alignItems: "center",
+              flexWrap: "wrap",
+              marginBottom: "20px"
+            },
+            onSubmit: (ev) => {
+              ev.preventDefault();
+              void invite({ email: email.value.trim(), scopes: scopesFor(level.value) }).then((l) => {
+                setMinted(l);
+                email.value = "";
+              }).catch(() => {
+              });
+            }
+          },
+          [
+            icon("users", 16),
+            h10("strong", { style: { fontSize: "13.5px", marginRight: "4px" } }, "Invite"),
+            h10("input", {
+              type: "email",
+              required: true,
+              value: email.value,
+              onInput: (ev) => email.value = ev.target.value,
+              placeholder: "teammate@company.com",
+              style: { ...styles.input, flex: 1, minWidth: "220px" },
+              "aria-label": "Email to invite"
+            }),
+            h10(
+              "select",
+              {
+                value: level.value,
+                onChange: (ev) => level.value = ev.target.value,
+                style: styles.input,
+                "aria-label": "Access level"
+              },
+              LEVELS.map(
+                (l) => h10("option", { key: l.label, value: l.label }, `${l.label} \u2014 ${l.hint}`)
+              )
+            ),
+            h10(
+              "button",
+              { type: "submit", style: styles.buttonPrimary, disabled: !email.value.trim() },
+              [icon("plus", 14), "Create invite link"]
+            )
+          ]
+        ),
+        isLoading.value && !r ? h10("p", { style: styles.status }, "Loading\u2026") : r && r.operators.length === 0 ? empty("No operators yet", void 0, "users") : r ? table(
+          ["Operator", "Access", "Status", "Last sign-in", ""],
+          r.operators.map((o) => {
+            const mine = o.email === props.me;
+            return h10("tr", { key: o.id }, [
+              td([
+                h10("div", { style: { fontWeight: 600 } }, o.name || o.email),
+                o.name ? h10("div", { style: styles.muted }, o.email) : null
+              ]),
+              td(
+                h10(
+                  "select",
+                  {
+                    value: levelOf(o.scopes),
+                    disabled: mine,
+                    onChange: (ev) => void update(o.id, {
+                      scopes: scopesFor(ev.target.value)
+                    }).catch(() => {
+                    }),
+                    style: { ...styles.input, ...small, fontSize: "12.5px" },
+                    "aria-label": `Access level for ${o.email}`
+                  },
+                  LEVELS.map((l) => h10("option", { key: l.label, value: l.label }, l.label))
+                )
+              ),
+              td([
+                status(o),
+                o.enrolled && o.backupCodesLeft <= 2 && !o.disabledAt ? h10(
+                  "div",
+                  { style: { ...styles.muted, marginTop: "4px" } },
+                  `${o.backupCodesLeft} backup code(s) left`
+                ) : null
+              ]),
+              td(o.lastLoginAt ? new Date(o.lastLoginAt).toLocaleString() : "never", {
+                ...styles.muted,
+                whiteSpace: "nowrap"
+              }),
+              td(
+                mine ? h10("span", { style: styles.muted }, "you") : [
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.button, ...small, marginRight: "6px" },
+                      onClick: () => {
+                        if (window.confirm(
+                          `Create a recovery link for ${o.email}? It signs them out everywhere; the link sets a new password and a new authenticator.`
+                        ))
+                          void recover(o.id).then(setMinted).catch(() => {
+                          });
+                      }
+                    },
+                    "Recovery link"
+                  ),
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: {
+                        ...o.disabledAt ? styles.button : styles.buttonDanger,
+                        ...small
+                      },
+                      onClick: () => {
+                        if (o.disabledAt || window.confirm(
+                          `Disable ${o.email}? They are signed out immediately.`
+                        ))
+                          void update(o.id, { disabled: !o.disabledAt }).catch(
+                            () => {
+                            }
+                          );
+                      }
+                    },
+                    o.disabledAt ? "Enable" : "Disable"
+                  )
+                ],
+                { textAlign: "right", whiteSpace: "nowrap" }
+              )
+            ]);
+          })
+        ) : null,
+        r && r.links.length > 0 ? [
+          h10("h2", { style: styles.subtitle }, "Pending links"),
+          h10(
+            "ul",
+            { style: styles.list },
+            r.links.map(
+              (l) => h10(
+                "li",
+                {
+                  key: l.id,
+                  style: { ...styles.row, display: "flex", gap: "12px", alignItems: "center" }
+                },
+                [
+                  pill(l.kind === "invite" ? "info" : "warn", l.kind, false),
+                  h10("span", { style: { flex: 1 } }, [
+                    l.email,
+                    l.kind === "invite" ? h10("span", { style: styles.muted }, ` \xB7 ${levelOf(l.scopes)}`) : null
+                  ]),
+                  h10(
+                    "span",
+                    { style: styles.muted },
+                    `expires ${new Date(l.expiresAt).toLocaleString()}`
+                  ),
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.buttonDanger, ...small },
+                      onClick: () => void revokeLink(l.id).catch(() => {
+                      })
+                    },
+                    "Revoke"
+                  )
+                ]
+              )
+            )
+          )
+        ] : null
+      ]);
+    };
+  }
+});
+
 // src/screens/TokensScreen.ts
 import { useAdminTokens } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent8, h as h10, ref as ref2 } from "vue";
+import { defineComponent as defineComponent9, h as h11, ref as ref3 } from "vue";
 var ALL = ["read", "write", "secrets"];
-var TokensScreen = defineComponent8({
+var TokensScreen = defineComponent9({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
     const { report, isLoading, error, issue, revoke } = useAdminTokens(props.client);
-    const name = ref2("");
-    const scopes = ref2(["read"]);
-    const days = ref2("");
-    const minted = ref2(null);
+    const name = ref3("");
+    const scopes = ref3(["read"]);
+    const days = ref3("");
+    const minted = ref3(null);
     const toggle = (s) => scopes.value = scopes.value.includes(s) ? scopes.value.filter((x) => x !== s) : [...scopes.value, s];
     return () => {
       const r = report.value;
-      return h10("div", { style: styles.container }, [
+      return h11("div", { style: styles.container }, [
         pageHeader(
-          "Access",
-          "Who can open this surface: the root token's strength, scoped tokens you have issued, and any legacy per-module tokens."
+          "Tokens",
+          "Credentials for machines: the root token's strength, scoped tokens for the CLI and CI, and any legacy per-module tokens. People sign in as operators."
         ),
-        error.value ? h10(
+        error.value ? h11(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.value.explanation
         ) : null,
-        h10("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Root token"),
-        r ? h10(
+        h11("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Root token"),
+        r ? h11(
           "div",
           { style: { ...styles.card, display: "flex", gap: "12px", alignItems: "flex-start" } },
           [
             icon("lock", 18, { marginTop: "2px" }),
-            h10("div", [
+            h11("div", [
               pill(r.admin.ok ? "ok" : "bad", r.admin.ok ? "strong" : "weak"),
               ...r.admin.problems.map(
-                (p) => h10(
+                (p) => h11(
                   "div",
                   {
                     key: p.message,
@@ -1218,13 +1501,13 @@ var TokensScreen = defineComponent8({
             ])
           ]
         ) : null,
-        h10("h2", { style: styles.subtitle }, "Issued tokens"),
-        r?.issued === null ? h10(
+        h11("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? h11(
           "p",
           { style: styles.muted },
           "Issuing is off \u2014 give AdminModule a store and run its migrations."
         ) : [
-          minted.value ? h10(
+          minted.value ? h11(
             "div",
             {
               style: {
@@ -1234,9 +1517,9 @@ var TokensScreen = defineComponent8({
               }
             },
             [
-              h10("strong", "Copy this now \u2014 it is never shown again."),
+              h11("strong", "Copy this now \u2014 it is never shown again."),
               ` (${minted.value.name})`,
-              h10(
+              h11(
                 "div",
                 {
                   style: {
@@ -1251,7 +1534,7 @@ var TokensScreen = defineComponent8({
               )
             ]
           ) : null,
-          h10(
+          h11(
             "form",
             {
               style: styles.toolbar,
@@ -1271,7 +1554,7 @@ var TokensScreen = defineComponent8({
               }
             },
             [
-              h10("input", {
+              h11("input", {
                 value: name.value,
                 onInput: (e) => name.value = e.target.value,
                 placeholder: "name",
@@ -1279,7 +1562,7 @@ var TokensScreen = defineComponent8({
                 "aria-label": "Name"
               }),
               ...ALL.map(
-                (s) => h10(
+                (s) => h11(
                   "label",
                   {
                     key: s,
@@ -1293,7 +1576,7 @@ var TokensScreen = defineComponent8({
                     }
                   },
                   [
-                    h10("input", {
+                    h11("input", {
                       type: "checkbox",
                       checked: scopes.value.includes(s),
                       onChange: () => toggle(s)
@@ -1302,14 +1585,14 @@ var TokensScreen = defineComponent8({
                   ]
                 )
               ),
-              h10("input", {
+              h11("input", {
                 value: days.value,
                 onInput: (e) => days.value = e.target.value,
                 placeholder: "days (optional)",
                 style: { ...styles.input, width: "140px" },
                 "aria-label": "Days"
               }),
-              h10(
+              h11(
                 "button",
                 {
                   type: "submit",
@@ -1323,7 +1606,7 @@ var TokensScreen = defineComponent8({
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t2) => h10("tr", { key: t2.id }, [
+              (t2) => h11("tr", { key: t2.id }, [
                 td([t2.name, t2.revokedAt ? [" ", pill("neutral", "revoked")] : ""]),
                 td(t2.scopes.join(", "), styles.mono),
                 td(
@@ -1339,7 +1622,7 @@ var TokensScreen = defineComponent8({
                   styles.muted
                 ),
                 td(
-                  t2.revokedAt ? "" : h10(
+                  t2.revokedAt ? "" : h11(
                     "button",
                     {
                       type: "button",
@@ -1363,19 +1646,19 @@ var TokensScreen = defineComponent8({
             "tokens"
           )
         ],
-        h10("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r && r.legacy.length === 0 ? h10(
+        h11("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r && r.legacy.length === 0 ? h11(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
-        ) : h10(
+        ) : h11(
           "ul",
           { style: styles.list },
           (r?.legacy ?? []).map(
-            (l) => h10("li", { key: l.module, style: styles.row }, [
-              h10("span", { style: styles.mono }, l.module),
+            (l) => h11("li", { key: l.module, style: styles.row }, [
+              h11("span", { style: styles.mono }, l.module),
               " ",
-              h10(
+              h11(
                 "span",
                 { style: styles.muted },
                 "still registers its standalone routes with its own token (deprecated)"
@@ -1396,28 +1679,233 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent9, h as h11, ref as ref3 } from "vue";
-var UsersScreen = defineComponent9({
+import { computed as computed2, defineComponent as defineComponent11, h as h13, ref as ref6 } from "vue";
+
+// src/billing.ts
+import { ref as ref4 } from "vue";
+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 = ref4(null);
+  if (!client) return index;
+  void (async () => {
+    const map = /* @__PURE__ */ new Map();
+    let cursor;
+    for (let page2 = 0; page2 < 20; page2++) {
+      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;
+    }
+    index.value = map;
+  })().catch(() => {
+    index.value = /* @__PURE__ */ new Map();
+  });
+  return index;
+}
+
+// src/screens/SubscriberBilling.ts
+import { useAdminSubscriber } from "@fonderie/vue-admin";
+import { computed, defineComponent as defineComponent10, h as h12, ref as ref5 } from "vue";
+var SubscriberBilling = defineComponent10({
+  name: "FonderieSubscriberBilling",
+  props: {
+    client: { type: Object, required: true },
+    subscriberType: { type: String, required: true },
+    subscriberId: { type: String, required: true }
+  },
+  setup(props) {
+    const subscriber = computed(() => ({ type: props.subscriberType, id: props.subscriberId }));
+    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
+    const amount = ref5("");
+    const note = ref5("");
+    const granted = ref5(null);
+    return () => {
+      const s = subscription.value;
+      const w = wallet.value;
+      if (isLoading.value && !w && !s) return h12("p", { style: styles.status }, "Loading billing\u2026");
+      const end = s ? periodEnd(s) : null;
+      return h12("div", [
+        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        h12("div", { style: { ...styles.grid, marginBottom: "16px" } }, [
+          h12("div", { style: styles.card }, [
+            h12("div", { style: styles.statLabel }, "Plan"),
+            h12(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  marginTop: "6px",
+                  flexWrap: "wrap"
+                }
+              },
+              [
+                h12("strong", { style: { fontSize: "18px" } }, s ? s.plan : "Free"),
+                ...s ? [
+                  h12("span", { style: styles.muted }, `\xB7 ${s.interval}`),
+                  pill(statusTone(s.status), s.status)
+                ] : [h12("span", { style: styles.muted }, "no subscription")]
+              ]
+            ),
+            end ? h12("div", { style: styles.statHint }, `${end.label} ${end.date}`) : null,
+            s?.providerSubscriptionId ? h12(
+              "div",
+              { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" } },
+              s.providerSubscriptionId
+            ) : null
+          ]),
+          h12("div", { style: styles.card }, [
+            h12("div", { style: styles.statLabel }, "Credits"),
+            ...w ? [
+              h12("div", { style: styles.statValue }, [
+                `${w.balance} `,
+                h12("span", { style: { fontSize: "14px", fontWeight: 500 } }, w.currency)
+              ]),
+              h12(
+                "div",
+                { style: styles.statHint },
+                `${w.purchased ?? "0"} permanent \xB7 ${w.granted ?? "0"} plan allowance${w.grantedExpiresAt ? ` (expires ${new Date(w.grantedExpiresAt).toLocaleDateString()})` : ""}`
+              )
+            ] : [
+              h12(
+                "div",
+                { style: styles.statHint },
+                "No wallet \u2014 billing has no wallet configuration."
+              )
+            ]
+          ])
+        ]),
+        w ? h12(
+          "form",
+          {
+            style: {
+              ...styles.card,
+              display: "flex",
+              gap: "8px",
+              alignItems: "center",
+              flexWrap: "wrap",
+              marginBottom: "16px"
+            },
+            onSubmit: (e) => {
+              e.preventDefault();
+              const key = `admin-grant-${props.subscriberType}-${props.subscriberId}-${Date.now()}`;
+              const a = amount.value.trim();
+              void grant({
+                amount: a,
+                ...note.value ? { description: note.value } : {},
+                idempotencyKey: key
+              }).then(() => {
+                granted.value = `Granted ${a} ${w.currency}.`;
+                amount.value = "";
+                note.value = "";
+              }).catch(() => {
+              });
+            }
+          },
+          [
+            h12("strong", { style: { fontSize: "13.5px", marginRight: "4px" } }, "Grant credits"),
+            h12("input", {
+              value: amount.value,
+              onInput: (e) => amount.value = e.target.value,
+              placeholder: `amount (${w.currency})`,
+              inputmode: "numeric",
+              style: { ...styles.input, width: "150px" },
+              "aria-label": "Amount"
+            }),
+            h12("input", {
+              value: note.value,
+              onInput: (e) => note.value = e.target.value,
+              placeholder: "reason (optional)",
+              style: { ...styles.input, flex: 1, minWidth: "180px" },
+              "aria-label": "Reason"
+            }),
+            h12(
+              "button",
+              {
+                type: "submit",
+                style: styles.buttonPrimary,
+                disabled: !/^\d+$/.test(amount.value.trim())
+              },
+              [icon("plus", 14), "Grant"]
+            ),
+            granted.value ? h12("span", { style: styles.ok }, granted.value) : null
+          ]
+        ) : null,
+        w ? ledger.value.length === 0 ? empty("No credit movements yet", void 0, "subscriber") : h12("div", [
+          table(
+            ["When", "Kind", "Amount", "Note"],
+            ledger.value.map(
+              (t2) => h12("tr", { key: t2.id }, [
+                td(new Date(t2.createdAt).toLocaleString(), {
+                  ...styles.muted,
+                  whiteSpace: "nowrap"
+                }),
+                td(t2.type),
+                td(t2.amount, styles.mono),
+                td(t2.description ?? "", styles.muted)
+              ])
+            )
+          ),
+          hasMoreLedger.value ? loadMoreButton(() => void loadMoreLedger()) : null
+        ]) : null
+      ]);
+    };
+  }
+});
+
+// src/screens/UsersScreen.ts
+var UsersScreen = defineComponent11({
   name: "FonderieUsersScreen",
   props: {
     client: { type: Object, required: true },
-    pageSize: { type: Number, default: 50 }
+    pageSize: { type: Number, default: 50 },
+    // Given ⇒ a Plan column, and each user's plan, credits and grant form on
+    // their page. Everyone has a wallet; no subscription means the free tier.
+    billingClient: { type: Object, default: void 0 },
+    // Open this user on arrival (e.g. from the Subscriptions list).
+    openUserId: { type: String, default: void 0 }
   },
   setup(props) {
-    const input = ref3("");
-    const email = ref3("");
-    const selectedId = ref3("");
+    const input = ref6("");
+    const email = ref6("");
+    const selectedId = ref6(props.openUserId ?? "");
+    const plans = useSubscriptionIndex(props.billingClient);
     const list = useAdminUsers(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
       { email, id: selectedId }
     );
-    const userId = computed(() => user.value?.id ?? null);
+    const userId = computed2(() => user.value?.id ?? null);
     const sessions = useAdminUserSessions(props.client, userId);
     const history = useAdminLoginHistory(props.client, userId, { limit: 20 });
-    const showList = computed(() => !email.value && !selectedId.value);
+    const showList = computed2(() => !email.value && !selectedId.value);
     const yesNo = (v) => v ? pill("ok", "yes") : pill("neutral", "no");
-    const row = (k, v) => h11("tr", [td(k), td(v)]);
+    const row = (k, v) => h13("tr", [td(k), td(v)]);
+    const planCell = (id) => {
+      if (!plans.value) return h13("span", { style: styles.muted }, "\u2026");
+      const sub = plans.value.get(`user/${id}`);
+      if (!sub || sub.status === "canceled") return h13("span", { style: styles.muted }, "free");
+      return [
+        h13("strong", sub.plan),
+        " ",
+        sub.status !== "active" ? pill(statusTone(sub.status), sub.status) : null
+      ];
+    };
     const clear = () => {
       email.value = "";
       selectedId.value = "";
@@ -1425,12 +1913,12 @@ var UsersScreen = defineComponent9({
     };
     return () => {
       const u = user.value;
-      return h11("div", { style: styles.container }, [
+      return h13("div", { style: styles.container }, [
         pageHeader(
           "Users",
           "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
         ),
-        h11(
+        h13(
           "form",
           {
             style: styles.toolbar,
@@ -1441,7 +1929,7 @@ var UsersScreen = defineComponent9({
             }
           },
           [
-            h11("input", {
+            h13("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
@@ -1449,22 +1937,22 @@ var UsersScreen = defineComponent9({
               style: { ...styles.input, minWidth: "280px" },
               "aria-label": "Email"
             }),
-            h11(
+            h13(
               "button",
               { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
               [icon("search", 14), "Look up"]
             ),
-            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost)
+            showList.value ? refreshButton2("Refresh", list.isLoading.value, () => void list.refresh()) : actionButton([icon("back", 14), "All users"], false, clear, styles.buttonGhost)
           ]
         ),
-        showList.value ? h11("div", [
-          list.error.value ? h11("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+        showList.value ? h13("div", [
+          list.error.value ? h13("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
           list.users.value.length === 0 && !list.isLoading.value ? empty("No users yet", "Sign-ups appear here as they happen.", "users") : table(
-            ["Email", "Name", "Created", "Status"],
+            props.billingClient ? ["Email", "Name", "Plan", "Created", "Status"] : ["Email", "Name", "Created", "Status"],
             list.users.value.map(
-              (u2) => h11("tr", { key: u2.id }, [
+              (u2) => h13("tr", { key: u2.id }, [
                 td(
-                  h11(
+                  h13(
                     "button",
                     {
                       type: "button",
@@ -1475,8 +1963,9 @@ var UsersScreen = defineComponent9({
                   )
                 ),
                 td(
-                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h11("span", { style: styles.muted }, "\u2014")
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h13("span", { style: styles.muted }, "\u2014")
                 ),
+                props.billingClient ? td(planCell(u2.id)) : null,
                 td(new Date(u2.createdAt).toLocaleDateString()),
                 td(
                   u2.suspended ? pill("warn", "suspended") : u2.deletedAt ? pill("neutral", "deleted") : pill("ok", "active")
@@ -1484,24 +1973,24 @@ var UsersScreen = defineComponent9({
               ])
             )
           ),
-          list.isLoading.value ? h11("p", { style: styles.status }, "Loading\u2026") : null,
+          list.isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
           list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
         ]) : null,
-        error.value ? h11(
+        error.value ? h13(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
         u ? [
-          h11("h2", { style: styles.subtitle }, [
+          h13("h2", { style: styles.subtitle }, [
             u.firstName || u.lastName ? `${u.firstName} ${u.lastName}`.trim() : u.email,
             " ",
             u.suspended ? pill("warn", "suspended") : null,
             u.deletedAt ? pill("neutral", "deleted") : null
           ]),
-          h11("table", { style: styles.table }, [
-            h11("tbody", [
-              row("id", h11("span", { style: styles.mono }, u.id)),
+          h13("table", { style: styles.table }, [
+            h13("tbody", [
+              row("id", h13("span", { style: styles.mono }, u.id)),
               row("email", [u.email, " \xB7 verified ", yesNo(u.isEmailVerified)]),
               row("MFA", yesNo(u.mfaEnabled)),
               row(
@@ -1510,12 +1999,12 @@ var UsersScreen = defineComponent9({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h11("span", { style: styles.muted }, "never")
+                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h13("span", { style: styles.muted }, "never")
               ),
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          h11("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          h13("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
               "Suspend",
               isLoading.value,
@@ -1528,19 +2017,26 @@ var UsersScreen = defineComponent9({
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          h11("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h11("p", { style: styles.muted }, "None.") : h11(
+          props.billingClient ? h13("h2", { style: styles.subtitle }, "Plan & credits") : null,
+          props.billingClient ? h13(SubscriberBilling, {
+            key: u.id,
+            client: props.billingClient,
+            subscriberType: "user",
+            subscriberId: u.id
+          }) : null,
+          h13("h2", { style: styles.subtitle }, "Live sessions"),
+          sessions.sessions.value.length === 0 ? h13("p", { style: styles.muted }, "None.") : h13(
             "ul",
             { style: styles.list },
             sessions.sessions.value.map(
-              (s) => h11("li", { key: s.id, style: styles.row }, [
-                h11("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => h13("li", { key: s.id, style: styles.row }, [
+                h13("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                h11("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
+                h13("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
                 " ",
-                h11("span", { style: styles.muted }, s.userAgent ?? ""),
+                h13("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                h11(
+                h13(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -1548,22 +2044,22 @@ var UsersScreen = defineComponent9({
               ])
             )
           ),
-          h11("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h11("p", { style: styles.muted }, "None recorded.") : h11(
+          h13("h2", { style: styles.subtitle }, "Recent sign-ins"),
+          history.events.value.length === 0 && !history.isLoading.value ? h13("p", { style: styles.muted }, "None recorded.") : h13(
             "ul",
             { style: styles.list },
             history.events.value.map(
-              (e) => h11("li", { key: e.id, style: styles.row }, [
+              (e) => h13("li", { key: e.id, style: styles.row }, [
                 pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
                 " ",
-                h11("span", { style: styles.muted }, e.method),
+                h13("span", { style: styles.muted }, e.method),
                 " ",
-                h11("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                h13("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
                 " ",
-                h11("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
+                h13("span", { style: styles.muted }, describeLocation(e.location) ?? ""),
                 e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
                 " ",
-                h11("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                h13("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
@@ -1576,8 +2072,8 @@ var UsersScreen = defineComponent9({
 
 // src/screens/CatalogScreen.ts
 import { useAdminCatalog } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent10, h as h12 } from "vue";
-var CatalogScreen = defineComponent10({
+import { defineComponent as defineComponent12, h as h14 } from "vue";
+var CatalogScreen = defineComponent12({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
@@ -1585,17 +2081,17 @@ var CatalogScreen = defineComponent10({
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return h12("div", { style: styles.container }, [
+      return h14("div", { style: styles.container }, [
         pageHeader(
           "Catalog",
           "What you sell: plans as configured in code, and as stored in the database, side by side.",
-          [refreshButton("Refresh", isLoading.value, () => void refresh())]
+          [refreshButton2("Refresh", isLoading.value, () => void refresh())]
         ),
-        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? h12("p", { style: styles.status }, "Loading\u2026") : null,
+        error.value ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? h14("p", { style: styles.status }, "Loading\u2026") : null,
         c ? [
-          h12("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
-          h12(
+          h14("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
+          h14(
             "pre",
             {
               style: {
@@ -1609,7 +2105,7 @@ var CatalogScreen = defineComponent10({
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          h12("h2", { style: styles.subtitle }, "Stored (database)"),
+          h14("h2", { style: styles.subtitle }, "Stored (database)"),
           c.stored.length === 0 ? empty(
             "No stored plans",
             "Plans are configured in code; nothing has been written to the database.",
@@ -1617,10 +2113,10 @@ var CatalogScreen = defineComponent10({
           ) : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => h12("tr", { key: p.id }, [
+              (p) => h14("tr", { key: p.id }, [
                 td([
-                  h12("strong", p.name),
-                  p.description ? h12("div", { style: styles.muted }, p.description) : ""
+                  h14("strong", p.name),
+                  p.description ? h14("div", { style: styles.muted }, p.description) : ""
                 ]),
                 td(String(p.tier)),
                 td(p.seats == null ? "\u221E" : String(p.seats)),
@@ -1628,7 +2124,7 @@ var CatalogScreen = defineComponent10({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  h12(
+                  h14(
                     "button",
                     {
                       type: "button",
@@ -1652,259 +2148,171 @@ var CatalogScreen = defineComponent10({
 });
 
 // src/screens/SubscriberScreen.ts
-import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h13, ref as ref4 } from "vue";
-var SubscriberScreen = defineComponent11({
+import { useAdminSubscribers } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent13, h as h15, ref as ref7 } from "vue";
+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" }
+];
+var SubscriberScreen = defineComponent13({
   name: "FonderieSubscriberScreen",
   props: {
     client: { type: Object, required: true },
-    pageSize: { type: Number, default: 50 }
+    pageSize: { type: Number, default: 50 },
+    /**
+     * A user subscriber opens on the Users page, where their plan and credits
+     * live beside their account. Omit to open everything here.
+     */
+    onOpenUser: { type: Function, default: void 0 }
   },
   setup(props) {
-    const type = ref4("user");
-    const idInput = ref4("");
-    const subscriber = ref4(null);
     const list = useAdminSubscribers(props.client, { limit: props.pageSize });
-    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
-    const open = (t2, id) => {
-      granted.value = null;
-      type.value = t2;
-      idInput.value = id;
-      subscriber.value = { type: t2, id };
+    const filter = ref7("All");
+    const open = ref7(null);
+    const type = ref7("workspace");
+    const idInput = ref7("");
+    const openRow = (t2, id) => {
+      if (t2 === "user" && props.onOpenUser) props.onOpenUser(id);
+      else open.value = { type: t2, id };
     };
-    const amount = ref4("");
-    const note = ref4("");
-    const granted = ref4(null);
-    const input = (model, placeholder, extra = {}) => h13("input", {
-      value: model.value,
-      onInput: (e) => model.value = e.target.value,
-      placeholder,
-      style: { ...styles.input, ...extra },
-      "aria-label": placeholder
-    });
     return () => {
-      const s = subscription.value;
-      const w = wallet.value;
-      return h13("div", { style: styles.container }, [
-        pageHeader(
-          "Subscribers",
-          "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
-        ),
-        h13(
-          "form",
-          {
-            style: styles.toolbar,
-            onSubmit: (e) => {
-              e.preventDefault();
-              granted.value = null;
-              subscriber.value = idInput.value.trim() ? { type: type.value, id: idInput.value.trim() } : null;
-            }
-          },
-          [
-            h13(
-              "select",
-              {
-                value: type.value,
-                onChange: (e) => type.value = e.target.value,
-                style: styles.input,
-                "aria-label": "Type"
-              },
-              [
-                h13("option", { value: "user" }, "user"),
-                h13("option", { value: "workspace" }, "workspace")
-              ]
-            ),
-            input(idInput, "subscriber id", { minWidth: "280px" }),
-            h13(
+      const o = open.value;
+      if (o) {
+        return h15("div", { style: styles.container }, [
+          pageHeader(`${o.type}/${o.id}`, "Plan, credits and what moved.", [
+            h15(
               "button",
-              { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
-              [icon("search", 14), "Look up"]
-            ),
-            subscriber.value ? h13(
-              "button",
-              {
-                type: "button",
-                style: styles.button,
-                onClick: () => {
-                  subscriber.value = null;
-                  idInput.value = "";
-                  granted.value = null;
-                }
-              },
-              [icon("back", 14), "All subscribers"]
-            ) : h13(
-              "button",
-              {
-                type: "button",
-                style: styles.button,
-                disabled: list.isLoading.value,
-                onClick: () => void list.refresh()
-              },
-              "Refresh"
+              { type: "button", style: styles.buttonGhost, onClick: () => open.value = null },
+              [icon("back", 14), "All subscriptions"]
             )
-          ]
+          ]),
+          h15(SubscriberBilling, {
+            key: `${o.type}/${o.id}`,
+            client: props.client,
+            subscriberType: o.type,
+            subscriberId: o.id
+          })
+        ]);
+      }
+      const match = FILTERS.find((f) => f.label === filter.value)?.match ?? (() => true);
+      const rows = list.subscriptions.value.filter((s) => match(s.status));
+      return h15("div", { style: styles.container }, [
+        pageHeader(
+          "Subscriptions",
+          "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.",
+          [refreshButton(() => void list.refresh(), list.isLoading.value)]
         ),
-        !subscriber.value ? h13("div", [
-          list.error.value ? h13("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
-          list.subscriptions.value.length === 0 && !list.isLoading.value ? empty(
-            "No subscribers yet",
-            "Subscriptions appear here once someone checks out.",
-            "subscriber"
-          ) : table(
-            ["Subscriber", "Plan", "Status", "Renews"],
-            list.subscriptions.value.map(
-              (sub) => h13("tr", { key: sub.id }, [
-                td(
-                  h13(
-                    "button",
-                    {
-                      type: "button",
-                      style: { ...styles.link, ...styles.mono },
-                      onClick: () => open(sub.subscriberType, sub.subscriberId)
-                    },
-                    `${sub.subscriberType}/${sub.subscriberId}`
-                  )
-                ),
-                td(`${sub.plan} \xB7 ${sub.interval}`),
-                td([
-                  pill(
-                    sub.status === "active" ? "ok" : sub.status === "trialing" ? "info" : sub.status === "past_due" ? "warn" : "neutral",
-                    sub.status
-                  ),
-                  sub.cancelAtPeriodEnd ? [" ", pill("warn", "cancels", false)] : null
-                ]),
-                td(
-                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h13("span", { style: styles.muted }, "\u2014")
-                )
-              ])
-            )
+        h15("div", { style: { ...styles.toolbar, justifyContent: "space-between" } }, [
+          h15(
+            "fieldset",
+            {
+              style: {
+                display: "flex",
+                gap: "6px",
+                flexWrap: "wrap",
+                border: "none",
+                margin: 0,
+                padding: 0,
+                minWidth: 0
+              },
+              "aria-label": "Filter by status"
+            },
+            FILTERS.map((f) => {
+              const n = list.subscriptions.value.filter((s) => f.match(s.status)).length;
+              const on = filter.value === f.label;
+              return h15(
+                "button",
+                {
+                  key: f.label,
+                  type: "button",
+                  "aria-pressed": on,
+                  onClick: () => filter.value = f.label,
+                  style: { ...on ? styles.buttonPrimary : styles.button, height: "28px" }
+                },
+                [f.label, h15("span", { style: { opacity: 0.7 } }, String(n))]
+              );
+            })
           ),
-          list.isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? h13(
-            "button",
+          h15(
+            "form",
             {
-              type: "button",
-              style: { ...styles.button, marginTop: "8px" },
-              onClick: () => void list.loadMore()
+              style: { display: "flex", gap: "6px" },
+              onSubmit: (e) => {
+                e.preventDefault();
+                if (idInput.value.trim()) openRow(type.value, idInput.value.trim());
+              }
             },
-            "Load more"
-          ) : null
-        ]) : null,
-        error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        subscriber.value && !isLoading.value ? [
-          h13("h2", { style: styles.subtitle }, "Subscription"),
-          s ? h13("table", { style: styles.table }, [
-            h13("tbody", [
-              h13("tr", [td("plan"), td([h13("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              h13("tr", [
-                td("status"),
-                td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
-              ]),
-              h13("tr", [
-                td("period"),
-                td(
-                  `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
-                )
-              ]),
-              h13("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
-            ])
-          ]) : h13("p", { style: styles.muted }, "No subscription."),
-          h13("h2", { style: styles.subtitle }, "Wallet"),
-          w ? [
-            h13(
-              "p",
-              {
-                style: {
-                  ...styles.card,
-                  display: "flex",
-                  alignItems: "baseline",
-                  gap: "8px",
-                  flexWrap: "wrap"
-                }
-              },
-              [
-                h13(
-                  "strong",
-                  {
-                    style: {
-                      fontSize: "22px",
-                      letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
-                    }
-                  },
-                  w.balance
-                ),
-                ` ${w.currency} `,
-                h13(
-                  "span",
-                  { style: styles.muted },
-                  `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
-                )
-              ]
-            ),
-            h13(
-              "form",
-              {
-                style: styles.toolbar,
-                onSubmit: (e) => {
-                  e.preventDefault();
-                  const sub = subscriber.value;
-                  if (!sub) return;
-                  const key = `admin-grant-${sub.type}-${sub.id}-${Date.now()}`;
-                  const amt = amount.value.trim();
-                  void grant({
-                    amount: amt,
-                    ...note.value ? { description: note.value } : {},
-                    idempotencyKey: key
-                  }).then(() => {
-                    granted.value = `Granted ${amt} ${w.currency}.`;
-                    amount.value = "";
-                    note.value = "";
-                  }).catch(() => {
-                  });
-                }
-              },
-              [
-                input(amount, "amount (minor units)"),
-                input(note, "reason (optional)", { minWidth: "220px" }),
-                h13(
+            [
+              h15(
+                "select",
+                {
+                  value: type.value,
+                  onChange: (e) => type.value = e.target.value,
+                  style: styles.input,
+                  "aria-label": "Type"
+                },
+                [
+                  h15("option", { value: "workspace" }, "workspace"),
+                  h15("option", { value: "user" }, "user")
+                ]
+              ),
+              h15("input", {
+                value: idInput.value,
+                onInput: (e) => idInput.value = e.target.value,
+                placeholder: "subscriber id",
+                style: { ...styles.input, width: "220px" },
+                "aria-label": "Subscriber id"
+              }),
+              h15(
+                "button",
+                { type: "submit", style: styles.button, disabled: !idInput.value.trim() },
+                [icon("search", 14), "Open"]
+              )
+            ]
+          )
+        ]),
+        list.error.value ? h15("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+        rows.length === 0 && !list.isLoading.value ? empty(
+          filter.value === "All" ? "No subscriptions yet" : `No ${filter.value.toLowerCase()} subscriptions`,
+          "Subscriptions appear here once someone checks out.",
+          "subscriber"
+        ) : table(
+          ["Subscriber", "Plan", "Status", "Renews / ends"],
+          rows.map((s) => {
+            const end = periodEnd(s);
+            return h15("tr", { key: s.id }, [
+              td(
+                h15(
                   "button",
                   {
-                    type: "submit",
-                    style: styles.buttonPrimary,
-                    disabled: !/^\d+$/.test(amount.value.trim())
+                    type: "button",
+                    style: { ...styles.link, ...styles.mono },
+                    onClick: () => openRow(s.subscriberType, s.subscriberId)
                   },
-                  [icon("plus", 14), "Grant"]
-                ),
-                granted.value ? h13("span", { style: styles.ok }, granted.value) : null
-              ]
-            ),
-            h13("h2", { style: styles.subtitle }, "Ledger"),
-            ledger.value.length === 0 ? empty("Nothing moved yet", void 0, "subscriber") : table(
-              ["When", "Kind", "Amount", "Note"],
-              ledger.value.map(
-                (t2) => h13("tr", { key: t2.id }, [
-                  td(new Date(t2.createdAt).toLocaleString(), styles.muted),
-                  td(t2.type),
-                  td(t2.amount, styles.mono),
-                  td(t2.description ?? "", styles.muted)
-                ])
+                  `${s.subscriberType}/${s.subscriberId}`
+                )
+              ),
+              td([
+                h15("strong", s.plan),
+                " ",
+                h15("span", { style: styles.muted }, `\xB7 ${s.interval}`)
+              ]),
+              td([
+                pill(statusTone(s.status), s.status),
+                s.cancelAtPeriodEnd && s.status !== "canceled" ? h15("span", [" ", pill("warn", "cancels", false)]) : null
+              ]),
+              td(
+                end ? [h15("span", { style: styles.muted }, end.label), ` ${end.date}`] : h15("span", { style: styles.muted }, "\u2014"),
+                { whiteSpace: "nowrap" }
               )
-            ),
-            hasMoreLedger.value ? h13(
-              "button",
-              {
-                type: "button",
-                style: { ...styles.button, marginTop: "8px" },
-                onClick: () => void loadMoreLedger()
-              },
-              "Load more"
-            ) : null
-          ] : h13(
-            "p",
-            { style: styles.muted },
-            "No wallet \u2014 billing has no wallet configuration."
-          )
-        ] : null
+            ]);
+          })
+        ),
+        list.isLoading.value ? h15("p", { style: styles.status }, "Loading\u2026") : null,
+        list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
       ]);
     };
   }
@@ -1912,33 +2320,33 @@ var SubscriberScreen = defineComponent11({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent12, h as h14, ref as ref5 } from "vue";
-var AuditScreen = defineComponent12({
+import { defineComponent as defineComponent14, h as h16, ref as ref8 } from "vue";
+var AuditScreen = defineComponent14({
   name: "FonderieAuditScreen",
   props: {
     client: { type: Object, required: true },
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = ref5({ workspaceId: "", type: "", actorId: "" });
-    const query = ref5({ limit: props.pageSize });
+    const draft = ref8({ workspaceId: "", type: "", actorId: "" });
+    const query = ref8({ limit: props.pageSize });
     const { events, hasMore, isLoading, error, refresh, loadMore } = useAdminAudit(
       props.client,
       query
     );
-    const field = (key, placeholder) => h14("input", {
+    const field = (key, placeholder) => h16("input", {
       value: draft.value[key],
       onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
       placeholder,
       style: styles.input,
       "aria-label": placeholder
     });
-    return () => h14("div", { style: styles.container }, [
+    return () => h16("div", { style: styles.container }, [
       pageHeader(
         "Audit",
         "What happened, across every workspace unless you name one. The chain's integrity verdict is on the Doctor page."
       ),
-      h14(
+      h16(
         "form",
         {
           style: styles.toolbar,
@@ -1957,19 +2365,19 @@ var AuditScreen = defineComponent12({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          h14(
+          h16(
             "button",
             { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
             [icon("search", 14), "Filter"]
           ),
-          refreshButton("Refresh", isLoading.value, () => void refresh())
+          refreshButton2("Refresh", isLoading.value, () => void refresh())
         ]
       ),
-      error.value ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      error.value ? h16("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
       events.value.length === 0 && !isLoading.value ? empty("Nothing recorded for this filter", void 0, "audit") : table(
         ["When", "Type", "Workspace", "Actor", "Request"],
         events.value.map(
-          (e) => h14("tr", { key: e.id }, [
+          (e) => h16("tr", { key: e.id }, [
             td(new Date(e.createdAt).toLocaleString(), styles.muted),
             td(e.type, styles.mono),
             td(String(e.payload["workspaceId"] ?? "\u2014"), styles.mono),
@@ -1978,7 +2386,7 @@ var AuditScreen = defineComponent12({
           ])
         )
       ),
-      isLoading.value ? h14("p", { style: styles.status }, "Loading\u2026") : null,
+      isLoading.value ? h16("p", { style: styles.status }, "Loading\u2026") : null,
       hasMore.value && !isLoading.value ? loadMoreButton(() => void loadMore()) : null
     ]);
   }
@@ -2001,7 +2409,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" }] },
@@ -2011,7 +2419,8 @@ var NAV = [
     items: [
       { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
-      { page: "tokens", label: "Access" },
+      { page: "operators", label: "Operators", needs: "operators" },
+      { page: "tokens", label: "Tokens" },
       { page: "migrations", label: "Migrations" }
     ]
   }
@@ -2030,10 +2439,11 @@ var ICON = {
   audit: "audit",
   log: "log",
   tokens: "tokens",
+  operators: "users",
   migrations: "migrations"
 };
 var NARROW = "(max-width: 820px)";
-var AdminShell = defineComponent13({
+var AdminShell = defineComponent15({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -2055,62 +2465,86 @@ var AdminShell = defineComponent13({
     appName: { type: String, default: "Admin" },
     // A badge beside the name — the deployment's environment ("production").
     // Production is tinted so an operator always knows where their clicks land.
-    envLabel: { type: String, default: void 0 }
+    envLabel: { type: String, default: void 0 },
+    // The deployment has operator accounts (@fonderie/admin with a store):
+    // shows the Operators page.
+    operators: { type: Boolean, default: false },
+    // The signed-in operator's email, when a person (not a token) is signed in.
+    currentOperator: { type: String, default: void 0 }
   },
   // `footer` slot: pinned to the bottom of the sidebar — session controls
   // (theme, sign out). The React shell takes the same thing as a `footer` prop.
   emits: { navigate: (_page) => true },
   setup(props, { emit, slots }) {
     const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-    const narrow = ref6(query?.matches ?? false);
-    const drawer = ref6(false);
+    const narrow = ref9(query?.matches ?? false);
+    const drawer = ref9(false);
     const onMedia = (e) => narrow.value = e.matches;
     onMounted(() => query?.addEventListener("change", onMedia));
     onBeforeUnmount(() => query?.removeEventListener("change", onMedia));
-    const own = ref6("attention");
-    const current = computed2(() => props.page ?? own.value);
-    const editing = ref6(null);
+    const own = ref9("attention");
+    const current = computed3(() => props.page ?? own.value);
+    const editing = ref9(null);
+    const openUser = ref9(void 0);
     const go = (p) => {
       editing.value = null;
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
       drawer.value = false;
     };
-    const back = (label) => h15("div", { style: { padding: "24px 40px 0" } }, [
-      h15(
+    const back = (label) => h17("div", { style: { padding: "24px 40px 0" } }, [
+      h17(
         "button",
         { type: "button", style: styles.buttonGhost, onClick: () => editing.value = null },
         [icon("back", 14), label]
       )
     ]);
-    const missing = (text) => h15("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
+    const missing = (text) => h17("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
     const body = () => {
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return h15(AttentionScreen, { client: c });
+          return h17(AttentionScreen, { client: c });
         case "modules":
-          return h15(ModulesScreen, { client: c });
+          return h17(ModulesScreen, { client: c });
         case "doctor":
-          return h15(DoctorScreen, { client: c });
+          return h17(DoctorScreen, { client: c });
         case "environment":
-          return h15(EnvironmentScreen, { client: c });
+          return h17(EnvironmentScreen, { client: c });
         case "routes":
-          return h15(RoutesScreen, { client: c });
+          return h17(RoutesScreen, { client: c });
         case "tokens":
-          return h15(TokensScreen, { client: c });
+          return h17(TokensScreen, { client: c });
+        case "operators":
+          return h17(OperatorsScreen, {
+            client: c,
+            ...props.currentOperator ? { me: props.currentOperator } : {}
+          });
         case "migrations":
-          return h15(MigrationsScreen, { client: c });
+          return h17(MigrationsScreen, { client: c });
         case "log":
-          return h15(AdminLogScreen, { client: c });
+          return h17(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h15(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
+          return props.billingClient ? h17(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
         case "subscriber":
-          return props.billingClient ? h15(SubscriberScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to look up subscribers here.");
+          return props.billingClient ? h17(SubscriberScreen, {
+            client: props.billingClient,
+            ...props.authClient ? {
+              onOpenUser: (id) => {
+                openUser.value = id;
+                go("users");
+              }
+            } : {}
+          }) : missing("Pass a BillingAdminClient to look up subscribers here.");
         case "audit":
-          return props.auditClient ? h15(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
+          return props.auditClient ? h17(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
         case "users":
-          return props.authClient ? h15(UsersScreen, { client: props.authClient }) : missing("Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? h17(UsersScreen, {
+            key: openUser.value ?? "list",
+            client: props.authClient,
+            ...props.billingClient ? { billingClient: props.billingClient } : {},
+            ...openUser.value ? { openUserId: openUser.value } : {}
+          }) : missing("Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc) return missing("Pass a ConfigAdminClient to manage config and secrets here.");
@@ -2118,7 +2552,7 @@ var AdminShell = defineComponent13({
           if (e && e.kind !== "template")
             return [
               back("Config & secrets"),
-              h15(ConfigEditorScreen, {
+              h17(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -2126,7 +2560,7 @@ var AdminShell = defineComponent13({
                 onSaved: () => editing.value = null
               })
             ];
-          return h15(ConfigListScreen, {
+          return h17(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -2143,27 +2577,27 @@ var AdminShell = defineComponent13({
           if (e?.kind === "template")
             return [
               back("Templates"),
-              h15(TemplateEditorScreen, {
+              h17(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h15(TemplateListScreen, {
+          return h17(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
         }
       }
     };
-    const visible = (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient);
+    const visible = (i) => !i.needs || (i.needs === "operators" ? props.operators : i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient);
     const brand = () => {
       const production = props.envLabel ? /^prod/i.test(props.envLabel) : false;
-      return h15("div", { style: styles.navBrand }, [
-        h15("div", { style: styles.navMark }, [icon("mark", 15)]),
-        h15("div", { style: { minWidth: 0, flex: 1 } }, [
-          h15("div", { style: styles.navBrandTitle }, props.appName),
-          props.envLabel ? h15(
+      return h17("div", { style: styles.navBrand }, [
+        h17("div", { style: styles.navMark }, [icon("mark", 15)]),
+        h17("div", { style: { minWidth: 0, flex: 1 } }, [
+          h17("div", { style: styles.navBrandTitle }, props.appName),
+          props.envLabel ? h17(
             "span",
             {
               style: {
@@ -2180,7 +2614,7 @@ var AdminShell = defineComponent13({
             props.envLabel
           ) : null
         ]),
-        narrow.value ? h15(
+        narrow.value ? h17(
           "button",
           {
             type: "button",
@@ -2192,7 +2626,7 @@ var AdminShell = defineComponent13({
         ) : null
       ]);
     };
-    const nav = () => h15(
+    const nav = () => h17(
       "nav",
       {
         style: {
@@ -2203,17 +2637,17 @@ var AdminShell = defineComponent13({
       },
       [
         brand(),
-        h15(
+        h17(
           "div",
           { style: styles.navScroll },
           NAV.map((g) => {
             const items = g.items.filter(visible);
             if (items.length === 0) return null;
-            return h15("div", { key: g.group }, [
-              h15("div", { style: styles.navGroup }, g.group),
+            return h17("div", { key: g.group }, [
+              h17("div", { style: styles.navGroup }, g.group),
               ...items.map((i) => {
                 const active = current.value === i.page;
-                return h15(
+                return h17(
                   "button",
                   {
                     key: i.page,
@@ -2221,7 +2655,10 @@ var AdminShell = defineComponent13({
                     class: "fonderie-admin-nav-item",
                     style: { ...styles.navItem, ...active ? styles.navItemActive : {} },
                     "aria-current": active ? "page" : void 0,
-                    onClick: () => go(i.page)
+                    onClick: () => {
+                      openUser.value = void 0;
+                      go(i.page);
+                    }
                   },
                   [icon(ICON[i.page], 16, active ? styles.navIconActive : void 0), i.label]
                 );
@@ -2229,18 +2666,18 @@ var AdminShell = defineComponent13({
             ]);
           })
         ),
-        slots["footer"] ? h15("div", { style: styles.navFooter }, slots["footer"]()) : null
+        slots["footer"] ? h17("div", { style: styles.navFooter }, slots["footer"]()) : null
       ]
     );
     return () => {
       const title = NAV.flatMap((g) => g.items).find((i) => i.page === current.value)?.label ?? "";
-      return h15(
+      return h17(
         "div",
         { style: { ...styles.shell, ...narrow.value ? { flexDirection: "column" } : {} } },
         [
           ...narrow.value ? [
-            h15("div", { style: styles.topbar }, [
-              h15(
+            h17("div", { style: styles.topbar }, [
+              h17(
                 "button",
                 {
                   type: "button",
@@ -2251,19 +2688,19 @@ var AdminShell = defineComponent13({
                 },
                 [icon("menu")]
               ),
-              h15("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
-              props.envLabel ? h15("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
+              h17("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
+              props.envLabel ? h17("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
             ]),
-            drawer.value ? h15("div", { style: styles.drawer }, [
+            drawer.value ? h17("div", { style: styles.drawer }, [
               nav(),
-              h15("div", {
+              h17("div", {
                 style: styles.scrim,
                 "aria-hidden": "true",
                 onClick: () => drawer.value = false
               })
             ]) : null
           ] : [nav()],
-          h15("main", { class: "fonderie-admin-main", style: styles.main }, body())
+          h17("main", { class: "fonderie-admin-main", style: styles.main }, body())
         ]
       );
     };
@@ -2279,7 +2716,9 @@ export {
   EnvironmentScreen,
   MigrationsScreen,
   ModulesScreen,
+  OperatorsScreen,
   RoutesScreen,
+  SubscriberBilling,
   SubscriberScreen,
   TokensScreen,
   UsersScreen