@fonderie/vue-admin-screens 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -31,6 +31,7 @@ __export(index_exports, {
   ModulesScreen: () => ModulesScreen,
   OperatorsScreen: () => OperatorsScreen,
   RoutesScreen: () => RoutesScreen,
+  SubscriberBilling: () => SubscriberBilling,
   SubscriberScreen: () => SubscriberScreen,
   TokensScreen: () => TokensScreen,
   UsersScreen: () => UsersScreen
@@ -40,7 +41,7 @@ module.exports = __toCommonJS(index_exports);
 // src/screens/AdminShell.ts
 var import_vue_config_admin_screens = require("@fonderie/vue-config-admin-screens");
 var import_vue_courier_admin_screens = require("@fonderie/vue-courier-admin-screens");
-var import_vue16 = require("vue");
+var import_vue18 = require("vue");
 
 // src/styles.ts
 var t = {
@@ -596,6 +597,12 @@ function empty(title, body, iconName = "check") {
     body ? (0, import_vue.h)("div", body) : null
   ]);
 }
+function refreshButton(onClick, busy, label = "Refresh") {
+  return (0, import_vue.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];
@@ -647,7 +654,7 @@ function table(headers, rows) {
   ]);
 }
 var td = (children, extra = {}) => (0, import_vue2.h)("td", { style: { ...styles.td, ...extra } }, children);
-var refreshButton = (label, disabled, onClick) => (0, import_vue2.h)("button", { type: "button", style: styles.button, disabled, onClick }, [
+var refreshButton2 = (label, disabled, onClick) => (0, import_vue2.h)("button", { type: "button", style: styles.button, disabled, onClick }, [
   icon("refresh", 14),
   disabled ? "Working\u2026" : label
 ]);
@@ -673,7 +680,7 @@ var AdminLogScreen = (0, import_vue3.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 ? (0, import_vue3.h)(
         "p",
@@ -814,7 +821,7 @@ var AttentionScreen = (0, import_vue4.defineComponent)({
             )
           ];
         },
-        [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"
         }
@@ -994,7 +1001,7 @@ var DoctorScreen = (0, import_vue6.defineComponent)({
           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",
@@ -1197,7 +1204,7 @@ var MigrationsScreen = (0, import_vue9.defineComponent)({
           ...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
@@ -1706,29 +1713,234 @@ var TokensScreen = (0, import_vue11.defineComponent)({
 
 // src/screens/UsersScreen.ts
 var import_client = require("@fonderie/client");
-var import_vue_admin10 = require("@fonderie/vue-admin");
+var import_vue_admin11 = require("@fonderie/vue-admin");
+var import_vue14 = require("vue");
+
+// src/billing.ts
 var import_vue12 = require("vue");
-var UsersScreen = (0, import_vue12.defineComponent)({
+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 = (0, import_vue12.ref)(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
+var import_vue_admin10 = require("@fonderie/vue-admin");
+var import_vue13 = require("vue");
+var SubscriberBilling = (0, import_vue13.defineComponent)({
+  name: "FonderieSubscriberBilling",
+  props: {
+    client: { type: Object, required: true },
+    subscriberType: { type: String, required: true },
+    subscriberId: { type: String, required: true }
+  },
+  setup(props) {
+    const subscriber = (0, import_vue13.computed)(() => ({ type: props.subscriberType, id: props.subscriberId }));
+    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin10.useAdminSubscriber)(props.client, subscriber, { limit: 20 });
+    const amount = (0, import_vue13.ref)("");
+    const note = (0, import_vue13.ref)("");
+    const granted = (0, import_vue13.ref)(null);
+    return () => {
+      const s = subscription.value;
+      const w = wallet.value;
+      if (isLoading.value && !w && !s) return (0, import_vue13.h)("p", { style: styles.status }, "Loading billing\u2026");
+      const end = s ? periodEnd(s) : null;
+      return (0, import_vue13.h)("div", [
+        error.value ? (0, import_vue13.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        (0, import_vue13.h)("div", { style: { ...styles.grid, marginBottom: "16px" } }, [
+          (0, import_vue13.h)("div", { style: styles.card }, [
+            (0, import_vue13.h)("div", { style: styles.statLabel }, "Plan"),
+            (0, import_vue13.h)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  marginTop: "6px",
+                  flexWrap: "wrap"
+                }
+              },
+              [
+                (0, import_vue13.h)("strong", { style: { fontSize: "18px" } }, s ? s.plan : "Free"),
+                ...s ? [
+                  (0, import_vue13.h)("span", { style: styles.muted }, `\xB7 ${s.interval}`),
+                  pill(statusTone(s.status), s.status)
+                ] : [(0, import_vue13.h)("span", { style: styles.muted }, "no subscription")]
+              ]
+            ),
+            end ? (0, import_vue13.h)("div", { style: styles.statHint }, `${end.label} ${end.date}`) : null,
+            s?.providerSubscriptionId ? (0, import_vue13.h)(
+              "div",
+              { style: { ...styles.statHint, fontFamily: "var(--fonderie-mono,monospace)" } },
+              s.providerSubscriptionId
+            ) : null
+          ]),
+          (0, import_vue13.h)("div", { style: styles.card }, [
+            (0, import_vue13.h)("div", { style: styles.statLabel }, "Credits"),
+            ...w ? [
+              (0, import_vue13.h)("div", { style: styles.statValue }, [
+                `${w.balance} `,
+                (0, import_vue13.h)("span", { style: { fontSize: "14px", fontWeight: 500 } }, w.currency)
+              ]),
+              (0, import_vue13.h)(
+                "div",
+                { style: styles.statHint },
+                `${w.purchased ?? "0"} permanent \xB7 ${w.granted ?? "0"} plan allowance${w.grantedExpiresAt ? ` (expires ${new Date(w.grantedExpiresAt).toLocaleDateString()})` : ""}`
+              )
+            ] : [
+              (0, import_vue13.h)(
+                "div",
+                { style: styles.statHint },
+                "No wallet \u2014 billing has no wallet configuration."
+              )
+            ]
+          ])
+        ]),
+        w ? (0, import_vue13.h)(
+          "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(() => {
+              });
+            }
+          },
+          [
+            (0, import_vue13.h)("strong", { style: { fontSize: "13.5px", marginRight: "4px" } }, "Grant credits"),
+            (0, import_vue13.h)("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"
+            }),
+            (0, import_vue13.h)("input", {
+              value: note.value,
+              onInput: (e) => note.value = e.target.value,
+              placeholder: "reason (optional)",
+              style: { ...styles.input, flex: 1, minWidth: "180px" },
+              "aria-label": "Reason"
+            }),
+            (0, import_vue13.h)(
+              "button",
+              {
+                type: "submit",
+                style: styles.buttonPrimary,
+                disabled: !/^\d+$/.test(amount.value.trim())
+              },
+              [icon("plus", 14), "Grant"]
+            ),
+            granted.value ? (0, import_vue13.h)("span", { style: styles.ok }, granted.value) : null
+          ]
+        ) : null,
+        w ? ledger.value.length === 0 ? empty("No credit movements yet", void 0, "subscriber") : (0, import_vue13.h)("div", [
+          table(
+            ["When", "Kind", "Amount", "Note"],
+            ledger.value.map(
+              (t2) => (0, import_vue13.h)("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 = (0, import_vue14.defineComponent)({
   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 = (0, import_vue12.ref)("");
-    const email = (0, import_vue12.ref)("");
-    const selectedId = (0, import_vue12.ref)("");
-    const list = (0, import_vue_admin10.useAdminUsers)(props.client, { limit: props.pageSize });
-    const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_vue_admin10.useAdminUser)(
+    const input = (0, import_vue14.ref)("");
+    const email = (0, import_vue14.ref)("");
+    const selectedId = (0, import_vue14.ref)(props.openUserId ?? "");
+    const plans = useSubscriptionIndex(props.billingClient);
+    const list = (0, import_vue_admin11.useAdminUsers)(props.client, { limit: props.pageSize });
+    const { user, isLoading, error, suspend, unsuspend, revokeSessions } = (0, import_vue_admin11.useAdminUser)(
       props.client,
       { email, id: selectedId }
     );
-    const userId = (0, import_vue12.computed)(() => user.value?.id ?? null);
-    const sessions = (0, import_vue_admin10.useAdminUserSessions)(props.client, userId);
-    const history = (0, import_vue_admin10.useAdminLoginHistory)(props.client, userId, { limit: 20 });
-    const showList = (0, import_vue12.computed)(() => !email.value && !selectedId.value);
+    const userId = (0, import_vue14.computed)(() => user.value?.id ?? null);
+    const sessions = (0, import_vue_admin11.useAdminUserSessions)(props.client, userId);
+    const history = (0, import_vue_admin11.useAdminLoginHistory)(props.client, userId, { limit: 20 });
+    const showList = (0, import_vue14.computed)(() => !email.value && !selectedId.value);
     const yesNo = (v) => v ? pill("ok", "yes") : pill("neutral", "no");
-    const row = (k, v) => (0, import_vue12.h)("tr", [td(k), td(v)]);
+    const row = (k, v) => (0, import_vue14.h)("tr", [td(k), td(v)]);
+    const planCell = (id) => {
+      if (!plans.value) return (0, import_vue14.h)("span", { style: styles.muted }, "\u2026");
+      const sub = plans.value.get(`user/${id}`);
+      if (!sub || sub.status === "canceled") return (0, import_vue14.h)("span", { style: styles.muted }, "free");
+      return [
+        (0, import_vue14.h)("strong", sub.plan),
+        " ",
+        sub.status !== "active" ? pill(statusTone(sub.status), sub.status) : null
+      ];
+    };
     const clear = () => {
       email.value = "";
       selectedId.value = "";
@@ -1736,12 +1948,12 @@ var UsersScreen = (0, import_vue12.defineComponent)({
     };
     return () => {
       const u = user.value;
-      return (0, import_vue12.h)("div", { style: styles.container }, [
+      return (0, import_vue14.h)("div", { style: styles.container }, [
         pageHeader(
           "Users",
           "Everyone signed up. Open an account for its sessions, sign-ins and the suspend and sign-out controls."
         ),
-        (0, import_vue12.h)(
+        (0, import_vue14.h)(
           "form",
           {
             style: styles.toolbar,
@@ -1752,7 +1964,7 @@ var UsersScreen = (0, import_vue12.defineComponent)({
             }
           },
           [
-            (0, import_vue12.h)("input", {
+            (0, import_vue14.h)("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
@@ -1760,22 +1972,22 @@ var UsersScreen = (0, import_vue12.defineComponent)({
               style: { ...styles.input, minWidth: "280px" },
               "aria-label": "Email"
             }),
-            (0, import_vue12.h)(
+            (0, import_vue14.h)(
               "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 ? (0, import_vue12.h)("div", [
-          list.error.value ? (0, import_vue12.h)("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+        showList.value ? (0, import_vue14.h)("div", [
+          list.error.value ? (0, import_vue14.h)("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) => (0, import_vue12.h)("tr", { key: u2.id }, [
+              (u2) => (0, import_vue14.h)("tr", { key: u2.id }, [
                 td(
-                  (0, import_vue12.h)(
+                  (0, import_vue14.h)(
                     "button",
                     {
                       type: "button",
@@ -1786,8 +1998,9 @@ var UsersScreen = (0, import_vue12.defineComponent)({
                   )
                 ),
                 td(
-                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || (0, import_vue12.h)("span", { style: styles.muted }, "\u2014")
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || (0, import_vue14.h)("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")
@@ -1795,24 +2008,24 @@ var UsersScreen = (0, import_vue12.defineComponent)({
               ])
             )
           ),
-          list.isLoading.value ? (0, import_vue12.h)("p", { style: styles.status }, "Loading\u2026") : null,
+          list.isLoading.value ? (0, import_vue14.h)("p", { style: styles.status }, "Loading\u2026") : null,
           list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
         ]) : null,
-        error.value ? (0, import_vue12.h)(
+        error.value ? (0, import_vue14.h)(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
         u ? [
-          (0, import_vue12.h)("h2", { style: styles.subtitle }, [
+          (0, import_vue14.h)("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
           ]),
-          (0, import_vue12.h)("table", { style: styles.table }, [
-            (0, import_vue12.h)("tbody", [
-              row("id", (0, import_vue12.h)("span", { style: styles.mono }, u.id)),
+          (0, import_vue14.h)("table", { style: styles.table }, [
+            (0, import_vue14.h)("tbody", [
+              row("id", (0, import_vue14.h)("span", { style: styles.mono }, u.id)),
               row("email", [u.email, " \xB7 verified ", yesNo(u.isEmailVerified)]),
               row("MFA", yesNo(u.mfaEnabled)),
               row(
@@ -1821,12 +2034,12 @@ var UsersScreen = (0, import_vue12.defineComponent)({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : (0, import_vue12.h)("span", { style: styles.muted }, "never")
+                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : (0, import_vue14.h)("span", { style: styles.muted }, "never")
               ),
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          (0, import_vue12.h)("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          (0, import_vue14.h)("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? actionButton("Unsuspend", isLoading.value, () => void unsuspend()) : actionButton(
               "Suspend",
               isLoading.value,
@@ -1839,19 +2052,26 @@ var UsersScreen = (0, import_vue12.defineComponent)({
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          (0, import_vue12.h)("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? (0, import_vue12.h)("p", { style: styles.muted }, "None.") : (0, import_vue12.h)(
+          props.billingClient ? (0, import_vue14.h)("h2", { style: styles.subtitle }, "Plan & credits") : null,
+          props.billingClient ? (0, import_vue14.h)(SubscriberBilling, {
+            key: u.id,
+            client: props.billingClient,
+            subscriberType: "user",
+            subscriberId: u.id
+          }) : null,
+          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Live sessions"),
+          sessions.sessions.value.length === 0 ? (0, import_vue14.h)("p", { style: styles.muted }, "None.") : (0, import_vue14.h)(
             "ul",
             { style: styles.list },
             sessions.sessions.value.map(
-              (s) => (0, import_vue12.h)("li", { key: s.id, style: styles.row }, [
-                (0, import_vue12.h)("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => (0, import_vue14.h)("li", { key: s.id, style: styles.row }, [
+                (0, import_vue14.h)("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                (0, import_vue12.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(s.location) ?? ""),
+                (0, import_vue14.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(s.location) ?? ""),
                 " ",
-                (0, import_vue12.h)("span", { style: styles.muted }, s.userAgent ?? ""),
+                (0, import_vue14.h)("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                (0, import_vue12.h)(
+                (0, import_vue14.h)(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -1859,22 +2079,22 @@ var UsersScreen = (0, import_vue12.defineComponent)({
               ])
             )
           ),
-          (0, import_vue12.h)("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? (0, import_vue12.h)("p", { style: styles.muted }, "None recorded.") : (0, import_vue12.h)(
+          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Recent sign-ins"),
+          history.events.value.length === 0 && !history.isLoading.value ? (0, import_vue14.h)("p", { style: styles.muted }, "None recorded.") : (0, import_vue14.h)(
             "ul",
             { style: styles.list },
             history.events.value.map(
-              (e) => (0, import_vue12.h)("li", { key: e.id, style: styles.row }, [
+              (e) => (0, import_vue14.h)("li", { key: e.id, style: styles.row }, [
                 pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
                 " ",
-                (0, import_vue12.h)("span", { style: styles.muted }, e.method),
+                (0, import_vue14.h)("span", { style: styles.muted }, e.method),
                 " ",
-                (0, import_vue12.h)("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                (0, import_vue14.h)("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
                 " ",
-                (0, import_vue12.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(e.location) ?? ""),
+                (0, import_vue14.h)("span", { style: styles.muted }, (0, import_client.describeLocation)(e.location) ?? ""),
                 e.location?.proxy || e.location?.hosting ? [" ", pill("warn", e.location.proxy ? "proxy/VPN" : "hosting")] : "",
                 " ",
-                (0, import_vue12.h)("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                (0, import_vue14.h)("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
@@ -1886,27 +2106,27 @@ var UsersScreen = (0, import_vue12.defineComponent)({
 });
 
 // src/screens/CatalogScreen.ts
-var import_vue_admin11 = require("@fonderie/vue-admin");
-var import_vue13 = require("vue");
-var CatalogScreen = (0, import_vue13.defineComponent)({
+var import_vue_admin12 = require("@fonderie/vue-admin");
+var import_vue15 = require("vue");
+var CatalogScreen = (0, import_vue15.defineComponent)({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
-    const { catalog, isLoading, error, refresh, deletePlan } = (0, import_vue_admin11.useAdminCatalog)(props.client);
+    const { catalog, isLoading, error, refresh, deletePlan } = (0, import_vue_admin12.useAdminCatalog)(props.client);
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return (0, import_vue13.h)("div", { style: styles.container }, [
+      return (0, import_vue15.h)("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 ? (0, import_vue13.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? (0, import_vue13.h)("p", { style: styles.status }, "Loading\u2026") : null,
+        error.value ? (0, import_vue15.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? (0, import_vue15.h)("p", { style: styles.status }, "Loading\u2026") : null,
         c ? [
-          (0, import_vue13.h)("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
-          (0, import_vue13.h)(
+          (0, import_vue15.h)("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
+          (0, import_vue15.h)(
             "pre",
             {
               style: {
@@ -1920,7 +2140,7 @@ var CatalogScreen = (0, import_vue13.defineComponent)({
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          (0, import_vue13.h)("h2", { style: styles.subtitle }, "Stored (database)"),
+          (0, import_vue15.h)("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.",
@@ -1928,10 +2148,10 @@ var CatalogScreen = (0, import_vue13.defineComponent)({
           ) : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => (0, import_vue13.h)("tr", { key: p.id }, [
+              (p) => (0, import_vue15.h)("tr", { key: p.id }, [
                 td([
-                  (0, import_vue13.h)("strong", p.name),
-                  p.description ? (0, import_vue13.h)("div", { style: styles.muted }, p.description) : ""
+                  (0, import_vue15.h)("strong", p.name),
+                  p.description ? (0, import_vue15.h)("div", { style: styles.muted }, p.description) : ""
                 ]),
                 td(String(p.tier)),
                 td(p.seats == null ? "\u221E" : String(p.seats)),
@@ -1939,7 +2159,7 @@ var CatalogScreen = (0, import_vue13.defineComponent)({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  (0, import_vue13.h)(
+                  (0, import_vue15.h)(
                     "button",
                     {
                       type: "button",
@@ -1963,293 +2183,205 @@ var CatalogScreen = (0, import_vue13.defineComponent)({
 });
 
 // src/screens/SubscriberScreen.ts
-var import_vue_admin12 = require("@fonderie/vue-admin");
-var import_vue14 = require("vue");
-var SubscriberScreen = (0, import_vue14.defineComponent)({
+var import_vue_admin13 = require("@fonderie/vue-admin");
+var import_vue16 = require("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 = (0, import_vue16.defineComponent)({
   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 = (0, import_vue14.ref)("user");
-    const idInput = (0, import_vue14.ref)("");
-    const subscriber = (0, import_vue14.ref)(null);
-    const list = (0, import_vue_admin12.useAdminSubscribers)(props.client, { limit: props.pageSize });
-    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin12.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 list = (0, import_vue_admin13.useAdminSubscribers)(props.client, { limit: props.pageSize });
+    const filter = (0, import_vue16.ref)("All");
+    const open = (0, import_vue16.ref)(null);
+    const type = (0, import_vue16.ref)("workspace");
+    const idInput = (0, import_vue16.ref)("");
+    const openRow = (t2, id) => {
+      if (t2 === "user" && props.onOpenUser) props.onOpenUser(id);
+      else open.value = { type: t2, id };
     };
-    const amount = (0, import_vue14.ref)("");
-    const note = (0, import_vue14.ref)("");
-    const granted = (0, import_vue14.ref)(null);
-    const input = (model, placeholder, extra = {}) => (0, import_vue14.h)("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 (0, import_vue14.h)("div", { style: styles.container }, [
-        pageHeader(
-          "Subscribers",
-          "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
-        ),
-        (0, import_vue14.h)(
-          "form",
-          {
-            style: styles.toolbar,
-            onSubmit: (e) => {
-              e.preventDefault();
-              granted.value = null;
-              subscriber.value = idInput.value.trim() ? { type: type.value, id: idInput.value.trim() } : null;
-            }
-          },
-          [
-            (0, import_vue14.h)(
-              "select",
-              {
-                value: type.value,
-                onChange: (e) => type.value = e.target.value,
-                style: styles.input,
-                "aria-label": "Type"
-              },
-              [
-                (0, import_vue14.h)("option", { value: "user" }, "user"),
-                (0, import_vue14.h)("option", { value: "workspace" }, "workspace")
-              ]
-            ),
-            input(idInput, "subscriber id", { minWidth: "280px" }),
-            (0, import_vue14.h)(
-              "button",
-              { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
-              [icon("search", 14), "Look up"]
-            ),
-            subscriber.value ? (0, import_vue14.h)(
-              "button",
-              {
-                type: "button",
-                style: styles.button,
-                onClick: () => {
-                  subscriber.value = null;
-                  idInput.value = "";
-                  granted.value = null;
-                }
-              },
-              [icon("back", 14), "All subscribers"]
-            ) : (0, import_vue14.h)(
+      const o = open.value;
+      if (o) {
+        return (0, import_vue16.h)("div", { style: styles.container }, [
+          pageHeader(`${o.type}/${o.id}`, "Plan, credits and what moved.", [
+            (0, import_vue16.h)(
               "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"]
             )
-          ]
+          ]),
+          (0, import_vue16.h)(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 (0, import_vue16.h)("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 ? (0, import_vue14.h)("div", [
-          list.error.value ? (0, import_vue14.h)("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) => (0, import_vue14.h)("tr", { key: sub.id }, [
-                td(
-                  (0, import_vue14.h)(
-                    "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() : (0, import_vue14.h)("span", { style: styles.muted }, "\u2014")
-                )
-              ])
-            )
+        (0, import_vue16.h)("div", { style: { ...styles.toolbar, justifyContent: "space-between" } }, [
+          (0, import_vue16.h)(
+            "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 (0, import_vue16.h)(
+                "button",
+                {
+                  key: f.label,
+                  type: "button",
+                  "aria-pressed": on,
+                  onClick: () => filter.value = f.label,
+                  style: { ...on ? styles.buttonPrimary : styles.button, height: "28px" }
+                },
+                [f.label, (0, import_vue16.h)("span", { style: { opacity: 0.7 } }, String(n))]
+              );
+            })
           ),
-          list.isLoading.value ? (0, import_vue14.h)("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? (0, import_vue14.h)(
-            "button",
+          (0, import_vue16.h)(
+            "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 ? (0, import_vue14.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        subscriber.value && !isLoading.value ? [
-          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Subscription"),
-          s ? (0, import_vue14.h)("table", { style: styles.table }, [
-            (0, import_vue14.h)("tbody", [
-              (0, import_vue14.h)("tr", [td("plan"), td([(0, import_vue14.h)("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              (0, import_vue14.h)("tr", [
-                td("status"),
-                td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
-              ]),
-              (0, import_vue14.h)("tr", [
-                td("period"),
-                td(
-                  `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
-                )
-              ]),
-              (0, import_vue14.h)("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
-            ])
-          ]) : (0, import_vue14.h)("p", { style: styles.muted }, "No subscription."),
-          (0, import_vue14.h)("h2", { style: styles.subtitle }, "Wallet"),
-          w ? [
-            (0, import_vue14.h)(
-              "p",
-              {
-                style: {
-                  ...styles.card,
-                  display: "flex",
-                  alignItems: "baseline",
-                  gap: "8px",
-                  flexWrap: "wrap"
-                }
-              },
-              [
-                (0, import_vue14.h)(
-                  "strong",
-                  {
-                    style: {
-                      fontSize: "22px",
-                      letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
-                    }
-                  },
-                  w.balance
-                ),
-                ` ${w.currency} `,
-                (0, import_vue14.h)(
-                  "span",
-                  { style: styles.muted },
-                  `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
-                )
-              ]
-            ),
-            (0, import_vue14.h)(
-              "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" }),
-                (0, import_vue14.h)(
+            [
+              (0, import_vue16.h)(
+                "select",
+                {
+                  value: type.value,
+                  onChange: (e) => type.value = e.target.value,
+                  style: styles.input,
+                  "aria-label": "Type"
+                },
+                [
+                  (0, import_vue16.h)("option", { value: "workspace" }, "workspace"),
+                  (0, import_vue16.h)("option", { value: "user" }, "user")
+                ]
+              ),
+              (0, import_vue16.h)("input", {
+                value: idInput.value,
+                onInput: (e) => idInput.value = e.target.value,
+                placeholder: "subscriber id",
+                style: { ...styles.input, width: "220px" },
+                "aria-label": "Subscriber id"
+              }),
+              (0, import_vue16.h)(
+                "button",
+                { type: "submit", style: styles.button, disabled: !idInput.value.trim() },
+                [icon("search", 14), "Open"]
+              )
+            ]
+          )
+        ]),
+        list.error.value ? (0, import_vue16.h)("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 (0, import_vue16.h)("tr", { key: s.id }, [
+              td(
+                (0, import_vue16.h)(
                   "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 ? (0, import_vue14.h)("span", { style: styles.ok }, granted.value) : null
-              ]
-            ),
-            (0, import_vue14.h)("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) => (0, import_vue14.h)("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([
+                (0, import_vue16.h)("strong", s.plan),
+                " ",
+                (0, import_vue16.h)("span", { style: styles.muted }, `\xB7 ${s.interval}`)
+              ]),
+              td([
+                pill(statusTone(s.status), s.status),
+                s.cancelAtPeriodEnd && s.status !== "canceled" ? (0, import_vue16.h)("span", [" ", pill("warn", "cancels", false)]) : null
+              ]),
+              td(
+                end ? [(0, import_vue16.h)("span", { style: styles.muted }, end.label), ` ${end.date}`] : (0, import_vue16.h)("span", { style: styles.muted }, "\u2014"),
+                { whiteSpace: "nowrap" }
               )
-            ),
-            hasMoreLedger.value ? (0, import_vue14.h)(
-              "button",
-              {
-                type: "button",
-                style: { ...styles.button, marginTop: "8px" },
-                onClick: () => void loadMoreLedger()
-              },
-              "Load more"
-            ) : null
-          ] : (0, import_vue14.h)(
-            "p",
-            { style: styles.muted },
-            "No wallet \u2014 billing has no wallet configuration."
-          )
-        ] : null
+            ]);
+          })
+        ),
+        list.isLoading.value ? (0, import_vue16.h)("p", { style: styles.status }, "Loading\u2026") : null,
+        list.hasMore.value && !list.isLoading.value ? loadMoreButton(() => void list.loadMore()) : null
       ]);
     };
   }
 });
 
 // src/screens/AuditScreen.ts
-var import_vue_admin13 = require("@fonderie/vue-admin");
-var import_vue15 = require("vue");
-var AuditScreen = (0, import_vue15.defineComponent)({
+var import_vue_admin14 = require("@fonderie/vue-admin");
+var import_vue17 = require("vue");
+var AuditScreen = (0, import_vue17.defineComponent)({
   name: "FonderieAuditScreen",
   props: {
     client: { type: Object, required: true },
     pageSize: { type: Number, default: 50 }
   },
   setup(props) {
-    const draft = (0, import_vue15.ref)({ workspaceId: "", type: "", actorId: "" });
-    const query = (0, import_vue15.ref)({ limit: props.pageSize });
-    const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_vue_admin13.useAdminAudit)(
+    const draft = (0, import_vue17.ref)({ workspaceId: "", type: "", actorId: "" });
+    const query = (0, import_vue17.ref)({ limit: props.pageSize });
+    const { events, hasMore, isLoading, error, refresh, loadMore } = (0, import_vue_admin14.useAdminAudit)(
       props.client,
       query
     );
-    const field = (key, placeholder) => (0, import_vue15.h)("input", {
+    const field = (key, placeholder) => (0, import_vue17.h)("input", {
       value: draft.value[key],
       onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
       placeholder,
       style: styles.input,
       "aria-label": placeholder
     });
-    return () => (0, import_vue15.h)("div", { style: styles.container }, [
+    return () => (0, import_vue17.h)("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."
       ),
-      (0, import_vue15.h)(
+      (0, import_vue17.h)(
         "form",
         {
           style: styles.toolbar,
@@ -2268,19 +2400,19 @@ var AuditScreen = (0, import_vue15.defineComponent)({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          (0, import_vue15.h)(
+          (0, import_vue17.h)(
             "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 ? (0, import_vue15.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      error.value ? (0, import_vue17.h)("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) => (0, import_vue15.h)("tr", { key: e.id }, [
+          (e) => (0, import_vue17.h)("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),
@@ -2289,7 +2421,7 @@ var AuditScreen = (0, import_vue15.defineComponent)({
           ])
         )
       ),
-      isLoading.value ? (0, import_vue15.h)("p", { style: styles.status }, "Loading\u2026") : null,
+      isLoading.value ? (0, import_vue17.h)("p", { style: styles.status }, "Loading\u2026") : null,
       hasMore.value && !isLoading.value ? loadMoreButton(() => void loadMore()) : null
     ]);
   }
@@ -2312,7 +2444,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" }] },
@@ -2346,7 +2478,7 @@ var ICON = {
   migrations: "migrations"
 };
 var NARROW = "(max-width: 820px)";
-var AdminShell = (0, import_vue16.defineComponent)({
+var AdminShell = (0, import_vue18.defineComponent)({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -2380,60 +2512,74 @@ var AdminShell = (0, import_vue16.defineComponent)({
   emits: { navigate: (_page) => true },
   setup(props, { emit, slots }) {
     const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-    const narrow = (0, import_vue16.ref)(query?.matches ?? false);
-    const drawer = (0, import_vue16.ref)(false);
+    const narrow = (0, import_vue18.ref)(query?.matches ?? false);
+    const drawer = (0, import_vue18.ref)(false);
     const onMedia = (e) => narrow.value = e.matches;
-    (0, import_vue16.onMounted)(() => query?.addEventListener("change", onMedia));
-    (0, import_vue16.onBeforeUnmount)(() => query?.removeEventListener("change", onMedia));
-    const own = (0, import_vue16.ref)("attention");
-    const current = (0, import_vue16.computed)(() => props.page ?? own.value);
-    const editing = (0, import_vue16.ref)(null);
+    (0, import_vue18.onMounted)(() => query?.addEventListener("change", onMedia));
+    (0, import_vue18.onBeforeUnmount)(() => query?.removeEventListener("change", onMedia));
+    const own = (0, import_vue18.ref)("attention");
+    const current = (0, import_vue18.computed)(() => props.page ?? own.value);
+    const editing = (0, import_vue18.ref)(null);
+    const openUser = (0, import_vue18.ref)(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) => (0, import_vue16.h)("div", { style: { padding: "24px 40px 0" } }, [
-      (0, import_vue16.h)(
+    const back = (label) => (0, import_vue18.h)("div", { style: { padding: "24px 40px 0" } }, [
+      (0, import_vue18.h)(
         "button",
         { type: "button", style: styles.buttonGhost, onClick: () => editing.value = null },
         [icon("back", 14), label]
       )
     ]);
-    const missing = (text) => (0, import_vue16.h)("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
+    const missing = (text) => (0, import_vue18.h)("p", { style: { ...styles.status, padding: "32px 40px" } }, text);
     const body = () => {
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return (0, import_vue16.h)(AttentionScreen, { client: c });
+          return (0, import_vue18.h)(AttentionScreen, { client: c });
         case "modules":
-          return (0, import_vue16.h)(ModulesScreen, { client: c });
+          return (0, import_vue18.h)(ModulesScreen, { client: c });
         case "doctor":
-          return (0, import_vue16.h)(DoctorScreen, { client: c });
+          return (0, import_vue18.h)(DoctorScreen, { client: c });
         case "environment":
-          return (0, import_vue16.h)(EnvironmentScreen, { client: c });
+          return (0, import_vue18.h)(EnvironmentScreen, { client: c });
         case "routes":
-          return (0, import_vue16.h)(RoutesScreen, { client: c });
+          return (0, import_vue18.h)(RoutesScreen, { client: c });
         case "tokens":
-          return (0, import_vue16.h)(TokensScreen, { client: c });
+          return (0, import_vue18.h)(TokensScreen, { client: c });
         case "operators":
-          return (0, import_vue16.h)(OperatorsScreen, {
+          return (0, import_vue18.h)(OperatorsScreen, {
             client: c,
             ...props.currentOperator ? { me: props.currentOperator } : {}
           });
         case "migrations":
-          return (0, import_vue16.h)(MigrationsScreen, { client: c });
+          return (0, import_vue18.h)(MigrationsScreen, { client: c });
         case "log":
-          return (0, import_vue16.h)(AdminLogScreen, { client: c });
+          return (0, import_vue18.h)(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? (0, import_vue16.h)(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
+          return props.billingClient ? (0, import_vue18.h)(CatalogScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to see the catalog here.");
         case "subscriber":
-          return props.billingClient ? (0, import_vue16.h)(SubscriberScreen, { client: props.billingClient }) : missing("Pass a BillingAdminClient to look up subscribers here.");
+          return props.billingClient ? (0, import_vue18.h)(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 ? (0, import_vue16.h)(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
+          return props.auditClient ? (0, import_vue18.h)(AuditScreen, { client: props.auditClient }) : missing("Pass an AuditAdminClient to see the audit trail here.");
         case "users":
-          return props.authClient ? (0, import_vue16.h)(UsersScreen, { client: props.authClient }) : missing("Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? (0, import_vue18.h)(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.");
@@ -2441,7 +2587,7 @@ var AdminShell = (0, import_vue16.defineComponent)({
           if (e && e.kind !== "template")
             return [
               back("Config & secrets"),
-              (0, import_vue16.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
+              (0, import_vue18.h)(import_vue_config_admin_screens.ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -2449,7 +2595,7 @@ var AdminShell = (0, import_vue16.defineComponent)({
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue16.h)(import_vue_config_admin_screens.ConfigListScreen, {
+          return (0, import_vue18.h)(import_vue_config_admin_screens.ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -2466,13 +2612,13 @@ var AdminShell = (0, import_vue16.defineComponent)({
           if (e?.kind === "template")
             return [
               back("Templates"),
-              (0, import_vue16.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
+              (0, import_vue18.h)(import_vue_courier_admin_screens.TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return (0, import_vue16.h)(import_vue_courier_admin_screens.TemplateListScreen, {
+          return (0, import_vue18.h)(import_vue_courier_admin_screens.TemplateListScreen, {
             client: kc,
             "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
@@ -2482,11 +2628,11 @@ var AdminShell = (0, import_vue16.defineComponent)({
     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 (0, import_vue16.h)("div", { style: styles.navBrand }, [
-        (0, import_vue16.h)("div", { style: styles.navMark }, [icon("mark", 15)]),
-        (0, import_vue16.h)("div", { style: { minWidth: 0, flex: 1 } }, [
-          (0, import_vue16.h)("div", { style: styles.navBrandTitle }, props.appName),
-          props.envLabel ? (0, import_vue16.h)(
+      return (0, import_vue18.h)("div", { style: styles.navBrand }, [
+        (0, import_vue18.h)("div", { style: styles.navMark }, [icon("mark", 15)]),
+        (0, import_vue18.h)("div", { style: { minWidth: 0, flex: 1 } }, [
+          (0, import_vue18.h)("div", { style: styles.navBrandTitle }, props.appName),
+          props.envLabel ? (0, import_vue18.h)(
             "span",
             {
               style: {
@@ -2503,7 +2649,7 @@ var AdminShell = (0, import_vue16.defineComponent)({
             props.envLabel
           ) : null
         ]),
-        narrow.value ? (0, import_vue16.h)(
+        narrow.value ? (0, import_vue18.h)(
           "button",
           {
             type: "button",
@@ -2515,7 +2661,7 @@ var AdminShell = (0, import_vue16.defineComponent)({
         ) : null
       ]);
     };
-    const nav = () => (0, import_vue16.h)(
+    const nav = () => (0, import_vue18.h)(
       "nav",
       {
         style: {
@@ -2526,17 +2672,17 @@ var AdminShell = (0, import_vue16.defineComponent)({
       },
       [
         brand(),
-        (0, import_vue16.h)(
+        (0, import_vue18.h)(
           "div",
           { style: styles.navScroll },
           NAV.map((g) => {
             const items = g.items.filter(visible);
             if (items.length === 0) return null;
-            return (0, import_vue16.h)("div", { key: g.group }, [
-              (0, import_vue16.h)("div", { style: styles.navGroup }, g.group),
+            return (0, import_vue18.h)("div", { key: g.group }, [
+              (0, import_vue18.h)("div", { style: styles.navGroup }, g.group),
               ...items.map((i) => {
                 const active = current.value === i.page;
-                return (0, import_vue16.h)(
+                return (0, import_vue18.h)(
                   "button",
                   {
                     key: i.page,
@@ -2544,7 +2690,10 @@ var AdminShell = (0, import_vue16.defineComponent)({
                     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]
                 );
@@ -2552,18 +2701,18 @@ var AdminShell = (0, import_vue16.defineComponent)({
             ]);
           })
         ),
-        slots["footer"] ? (0, import_vue16.h)("div", { style: styles.navFooter }, slots["footer"]()) : null
+        slots["footer"] ? (0, import_vue18.h)("div", { style: styles.navFooter }, slots["footer"]()) : null
       ]
     );
     return () => {
       const title = NAV.flatMap((g) => g.items).find((i) => i.page === current.value)?.label ?? "";
-      return (0, import_vue16.h)(
+      return (0, import_vue18.h)(
         "div",
         { style: { ...styles.shell, ...narrow.value ? { flexDirection: "column" } : {} } },
         [
           ...narrow.value ? [
-            (0, import_vue16.h)("div", { style: styles.topbar }, [
-              (0, import_vue16.h)(
+            (0, import_vue18.h)("div", { style: styles.topbar }, [
+              (0, import_vue18.h)(
                 "button",
                 {
                   type: "button",
@@ -2574,19 +2723,19 @@ var AdminShell = (0, import_vue16.defineComponent)({
                 },
                 [icon("menu")]
               ),
-              (0, import_vue16.h)("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
-              props.envLabel ? (0, import_vue16.h)("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
+              (0, import_vue18.h)("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
+              props.envLabel ? (0, import_vue18.h)("span", { style: { ...styles.badge, marginLeft: "auto" } }, props.envLabel) : null
             ]),
-            drawer.value ? (0, import_vue16.h)("div", { style: styles.drawer }, [
+            drawer.value ? (0, import_vue18.h)("div", { style: styles.drawer }, [
               nav(),
-              (0, import_vue16.h)("div", {
+              (0, import_vue18.h)("div", {
                 style: styles.scrim,
                 "aria-hidden": "true",
                 onClick: () => drawer.value = false
               })
             ]) : null
           ] : [nav()],
-          (0, import_vue16.h)("main", { class: "fonderie-admin-main", style: styles.main }, body())
+          (0, import_vue18.h)("main", { class: "fonderie-admin-main", style: styles.main }, body())
         ]
       );
     };
@@ -2605,6 +2754,7 @@ var AdminShell = (0, import_vue16.defineComponent)({
   ModulesScreen,
   OperatorsScreen,
   RoutesScreen,
+  SubscriberBilling,
   SubscriberScreen,
   TokensScreen,
   UsersScreen