@fonderie/vue-admin-screens 1.2.0 → 1.3.1

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 defineComponent14, h as h16, onBeforeUnmount, onMounted, ref as ref7 } 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
@@ -1673,28 +1679,233 @@ import {
   useAdminUserSessions,
   useAdminUsers
 } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent10, h as h12, ref as ref4 } from "vue";
-var UsersScreen = defineComponent10({
+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 = ref4("");
-    const email = ref4("");
-    const selectedId = ref4("");
+    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) => h12("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 = "";
@@ -1702,12 +1913,12 @@ var UsersScreen = defineComponent10({
     };
     return () => {
       const u = user.value;
-      return h12("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."
         ),
-        h12(
+        h13(
           "form",
           {
             style: styles.toolbar,
@@ -1718,7 +1929,7 @@ var UsersScreen = defineComponent10({
             }
           },
           [
-            h12("input", {
+            h13("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
@@ -1726,22 +1937,22 @@ var UsersScreen = defineComponent10({
               style: { ...styles.input, minWidth: "280px" },
               "aria-label": "Email"
             }),
-            h12(
+            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 ? h12("div", [
-          list.error.value ? h12("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) => h12("tr", { key: u2.id }, [
+              (u2) => h13("tr", { key: u2.id }, [
                 td(
-                  h12(
+                  h13(
                     "button",
                     {
                       type: "button",
@@ -1752,8 +1963,9 @@ var UsersScreen = defineComponent10({
                   )
                 ),
                 td(
-                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h12("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")
@@ -1761,24 +1973,42 @@ var UsersScreen = defineComponent10({
               ])
             )
           ),
-          list.isLoading.value ? h12("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 ? h12(
+        error.value && !(error.value.status === 404 && selectedId.value) ? h13(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
+        // Opened by id (e.g. from Subscriptions) and the account is gone —
+        // deleted or purged — while its billing rows remain. Say so, and
+        // still show the money.
+        error.value?.status === 404 && selectedId.value ? [
+          h13("div", { style: styles.notice, role: "status" }, [
+            h13("strong", "No account with id "),
+            h13("code", { style: styles.code }, selectedId.value),
+            h13("strong", "."),
+            " It was deleted, or never existed here. Its billing records remain."
+          ]),
+          props.billingClient ? h13("h2", { style: styles.subtitle }, "Plan & credits") : null,
+          props.billingClient ? h13(SubscriberBilling, {
+            key: `missing-${selectedId.value}`,
+            client: props.billingClient,
+            subscriberType: "user",
+            subscriberId: selectedId.value
+          }) : null
+        ] : null,
         u ? [
-          h12("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
           ]),
-          h12("table", { style: styles.table }, [
-            h12("tbody", [
-              row("id", h12("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(
@@ -1787,12 +2017,12 @@ var UsersScreen = defineComponent10({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h12("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())
             ])
           ]),
-          h12("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,
@@ -1805,19 +2035,26 @@ var UsersScreen = defineComponent10({
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          h12("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h12("p", { style: styles.muted }, "None.") : h12(
+          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) => h12("li", { key: s.id, style: styles.row }, [
-                h12("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => h13("li", { key: s.id, style: styles.row }, [
+                h13("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                h12("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
+                h13("span", { style: styles.muted }, describeLocation(s.location) ?? ""),
                 " ",
-                h12("span", { style: styles.muted }, s.userAgent ?? ""),
+                h13("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                h12(
+                h13(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -1825,22 +2062,22 @@ var UsersScreen = defineComponent10({
               ])
             )
           ),
-          h12("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h12("p", { style: styles.muted }, "None recorded.") : h12(
+          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) => h12("li", { key: e.id, style: styles.row }, [
+              (e) => h13("li", { key: e.id, style: styles.row }, [
                 pill(e.outcome === "success" ? "ok" : "bad", e.outcome),
                 " ",
-                h12("span", { style: styles.muted }, e.method),
+                h13("span", { style: styles.muted }, e.method),
                 " ",
-                h12("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
+                h13("span", { style: styles.mono }, e.ipAddress ?? "\u2014"),
                 " ",
-                h12("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")] : "",
                 " ",
-                h12("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                h13("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
@@ -1853,8 +2090,8 @@ var UsersScreen = defineComponent10({
 
 // src/screens/CatalogScreen.ts
 import { useAdminCatalog } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h13 } from "vue";
-var CatalogScreen = defineComponent11({
+import { defineComponent as defineComponent12, h as h14 } from "vue";
+var CatalogScreen = defineComponent12({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
@@ -1862,17 +2099,17 @@ var CatalogScreen = defineComponent11({
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return h13("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 ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? h13("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 ? [
-          h13("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
-          h13(
+          h14("h2", { style: { ...styles.subtitle, marginTop: 0 } }, "Configured (code)"),
+          h14(
             "pre",
             {
               style: {
@@ -1886,7 +2123,7 @@ var CatalogScreen = defineComponent11({
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          h13("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.",
@@ -1894,10 +2131,10 @@ var CatalogScreen = defineComponent11({
           ) : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => h13("tr", { key: p.id }, [
+              (p) => h14("tr", { key: p.id }, [
                 td([
-                  h13("strong", p.name),
-                  p.description ? h13("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)),
@@ -1905,7 +2142,7 @@ var CatalogScreen = defineComponent11({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  h13(
+                  h14(
                     "button",
                     {
                       type: "button",
@@ -1929,259 +2166,171 @@ var CatalogScreen = defineComponent11({
 });
 
 // src/screens/SubscriberScreen.ts
-import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent12, h as h14, ref as ref5 } from "vue";
-var SubscriberScreen = defineComponent12({
+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 = ref5("user");
-    const idInput = ref5("");
-    const subscriber = ref5(null);
     const list = useAdminSubscribers(props.client, { limit: props.pageSize });
-    const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
-    const open = (t2, id) => {
-      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 = ref5("");
-    const note = ref5("");
-    const granted = ref5(null);
-    const input = (model, placeholder, extra = {}) => h14("input", {
-      value: model.value,
-      onInput: (e) => model.value = e.target.value,
-      placeholder,
-      style: { ...styles.input, ...extra },
-      "aria-label": placeholder
-    });
     return () => {
-      const s = subscription.value;
-      const w = wallet.value;
-      return h14("div", { style: styles.container }, [
-        pageHeader(
-          "Subscribers",
-          "Who is subscribed. Open one for their plan, wallet and ledger, and to grant credit."
-        ),
-        h14(
-          "form",
-          {
-            style: styles.toolbar,
-            onSubmit: (e) => {
-              e.preventDefault();
-              granted.value = null;
-              subscriber.value = idInput.value.trim() ? { type: type.value, id: idInput.value.trim() } : null;
-            }
-          },
-          [
-            h14(
-              "select",
-              {
-                value: type.value,
-                onChange: (e) => type.value = e.target.value,
-                style: styles.input,
-                "aria-label": "Type"
-              },
-              [
-                h14("option", { value: "user" }, "user"),
-                h14("option", { value: "workspace" }, "workspace")
-              ]
-            ),
-            input(idInput, "subscriber id", { minWidth: "280px" }),
-            h14(
-              "button",
-              { type: "submit", style: styles.buttonPrimary, disabled: isLoading.value },
-              [icon("search", 14), "Look up"]
-            ),
-            subscriber.value ? h14(
-              "button",
-              {
-                type: "button",
-                style: styles.button,
-                onClick: () => {
-                  subscriber.value = null;
-                  idInput.value = "";
-                  granted.value = null;
-                }
-              },
-              [icon("back", 14), "All subscribers"]
-            ) : h14(
+      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: "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 ? h14("div", [
-          list.error.value ? h14("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
-          list.subscriptions.value.length === 0 && !list.isLoading.value ? empty(
-            "No subscribers yet",
-            "Subscriptions appear here once someone checks out.",
-            "subscriber"
-          ) : table(
-            ["Subscriber", "Plan", "Status", "Renews"],
-            list.subscriptions.value.map(
-              (sub) => h14("tr", { key: sub.id }, [
-                td(
-                  h14(
-                    "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() : h14("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 ? h14("p", { style: styles.status }, "Loading\u2026") : null,
-          list.hasMore.value && !list.isLoading.value ? h14(
-            "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 ? h14("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        subscriber.value && !isLoading.value ? [
-          h14("h2", { style: styles.subtitle }, "Subscription"),
-          s ? h14("table", { style: styles.table }, [
-            h14("tbody", [
-              h14("tr", [td("plan"), td([h14("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              h14("tr", [
-                td("status"),
-                td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
-              ]),
-              h14("tr", [
-                td("period"),
-                td(
-                  `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
-                )
-              ]),
-              h14("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
-            ])
-          ]) : h14("p", { style: styles.muted }, "No subscription."),
-          h14("h2", { style: styles.subtitle }, "Wallet"),
-          w ? [
-            h14(
-              "p",
-              {
-                style: {
-                  ...styles.card,
-                  display: "flex",
-                  alignItems: "baseline",
-                  gap: "8px",
-                  flexWrap: "wrap"
-                }
-              },
-              [
-                h14(
-                  "strong",
-                  {
-                    style: {
-                      fontSize: "22px",
-                      letterSpacing: "var(--fonderie-tracking-display,-0.05em)"
-                    }
-                  },
-                  w.balance
-                ),
-                ` ${w.currency} `,
-                h14(
-                  "span",
-                  { style: styles.muted },
-                  `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
-                )
-              ]
-            ),
-            h14(
-              "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" }),
-                h14(
+            [
+              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 ? h14("span", { style: styles.ok }, granted.value) : null
-              ]
-            ),
-            h14("h2", { style: styles.subtitle }, "Ledger"),
-            ledger.value.length === 0 ? empty("Nothing moved yet", void 0, "subscriber") : table(
-              ["When", "Kind", "Amount", "Note"],
-              ledger.value.map(
-                (t2) => h14("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 ? h14(
-              "button",
-              {
-                type: "button",
-                style: { ...styles.button, marginTop: "8px" },
-                onClick: () => void loadMoreLedger()
-              },
-              "Load more"
-            ) : null
-          ] : h14(
-            "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
       ]);
     };
   }
@@ -2189,33 +2338,33 @@ var SubscriberScreen = defineComponent12({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent13, h as h15, ref as ref6 } from "vue";
-var AuditScreen = defineComponent13({
+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 = ref6({ workspaceId: "", type: "", actorId: "" });
-    const query = ref6({ 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) => h15("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 () => h15("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."
       ),
-      h15(
+      h16(
         "form",
         {
           style: styles.toolbar,
@@ -2234,19 +2383,19 @@ var AuditScreen = defineComponent13({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          h15(
+          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 ? h15("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) => h15("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),
@@ -2255,7 +2404,7 @@ var AuditScreen = defineComponent13({
           ])
         )
       ),
-      isLoading.value ? h15("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
     ]);
   }
@@ -2278,7 +2427,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" }] },
@@ -2312,7 +2461,7 @@ var ICON = {
   migrations: "migrations"
 };
 var NARROW = "(max-width: 820px)";
-var AdminShell = defineComponent14({
+var AdminShell = defineComponent15({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -2346,60 +2495,74 @@ var AdminShell = defineComponent14({
   emits: { navigate: (_page) => true },
   setup(props, { emit, slots }) {
     const query = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(NARROW) : null;
-    const narrow = ref7(query?.matches ?? false);
-    const drawer = ref7(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 = ref7("attention");
-    const current = computed2(() => props.page ?? own.value);
-    const editing = ref7(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) => h16("div", { style: { padding: "24px 40px 0" } }, [
-      h16(
+    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) => h16("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 h16(AttentionScreen, { client: c });
+          return h17(AttentionScreen, { client: c });
         case "modules":
-          return h16(ModulesScreen, { client: c });
+          return h17(ModulesScreen, { client: c });
         case "doctor":
-          return h16(DoctorScreen, { client: c });
+          return h17(DoctorScreen, { client: c });
         case "environment":
-          return h16(EnvironmentScreen, { client: c });
+          return h17(EnvironmentScreen, { client: c });
         case "routes":
-          return h16(RoutesScreen, { client: c });
+          return h17(RoutesScreen, { client: c });
         case "tokens":
-          return h16(TokensScreen, { client: c });
+          return h17(TokensScreen, { client: c });
         case "operators":
-          return h16(OperatorsScreen, {
+          return h17(OperatorsScreen, {
             client: c,
             ...props.currentOperator ? { me: props.currentOperator } : {}
           });
         case "migrations":
-          return h16(MigrationsScreen, { client: c });
+          return h17(MigrationsScreen, { client: c });
         case "log":
-          return h16(AdminLogScreen, { client: c });
+          return h17(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h16(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 ? h16(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 ? h16(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 ? h16(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.");
@@ -2407,7 +2570,7 @@ var AdminShell = defineComponent14({
           if (e && e.kind !== "template")
             return [
               back("Config & secrets"),
-              h16(ConfigEditorScreen, {
+              h17(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -2415,7 +2578,7 @@ var AdminShell = defineComponent14({
                 onSaved: () => editing.value = null
               })
             ];
-          return h16(ConfigListScreen, {
+          return h17(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -2432,13 +2595,13 @@ var AdminShell = defineComponent14({
           if (e?.kind === "template")
             return [
               back("Templates"),
-              h16(TemplateEditorScreen, {
+              h17(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h16(TemplateListScreen, {
+          return h17(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
@@ -2448,11 +2611,11 @@ var AdminShell = defineComponent14({
     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 h16("div", { style: styles.navBrand }, [
-        h16("div", { style: styles.navMark }, [icon("mark", 15)]),
-        h16("div", { style: { minWidth: 0, flex: 1 } }, [
-          h16("div", { style: styles.navBrandTitle }, props.appName),
-          props.envLabel ? h16(
+      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: {
@@ -2469,7 +2632,7 @@ var AdminShell = defineComponent14({
             props.envLabel
           ) : null
         ]),
-        narrow.value ? h16(
+        narrow.value ? h17(
           "button",
           {
             type: "button",
@@ -2481,7 +2644,7 @@ var AdminShell = defineComponent14({
         ) : null
       ]);
     };
-    const nav = () => h16(
+    const nav = () => h17(
       "nav",
       {
         style: {
@@ -2492,17 +2655,17 @@ var AdminShell = defineComponent14({
       },
       [
         brand(),
-        h16(
+        h17(
           "div",
           { style: styles.navScroll },
           NAV.map((g) => {
             const items = g.items.filter(visible);
             if (items.length === 0) return null;
-            return h16("div", { key: g.group }, [
-              h16("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 h16(
+                return h17(
                   "button",
                   {
                     key: i.page,
@@ -2510,7 +2673,10 @@ var AdminShell = defineComponent14({
                     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]
                 );
@@ -2518,18 +2684,18 @@ var AdminShell = defineComponent14({
             ]);
           })
         ),
-        slots["footer"] ? h16("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 h16(
+      return h17(
         "div",
         { style: { ...styles.shell, ...narrow.value ? { flexDirection: "column" } : {} } },
         [
           ...narrow.value ? [
-            h16("div", { style: styles.topbar }, [
-              h16(
+            h17("div", { style: styles.topbar }, [
+              h17(
                 "button",
                 {
                   type: "button",
@@ -2540,19 +2706,19 @@ var AdminShell = defineComponent14({
                 },
                 [icon("menu")]
               ),
-              h16("span", { style: { fontWeight: 600, fontSize: "14px" } }, title),
-              props.envLabel ? h16("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 ? h16("div", { style: styles.drawer }, [
+            drawer.value ? h17("div", { style: styles.drawer }, [
               nav(),
-              h16("div", {
+              h17("div", {
                 style: styles.scrim,
                 "aria-hidden": "true",
                 onClick: () => drawer.value = false
               })
             ]) : null
           ] : [nav()],
-          h16("main", { class: "fonderie-admin-main", style: styles.main }, body())
+          h17("main", { class: "fonderie-admin-main", style: styles.main }, body())
         ]
       );
     };
@@ -2570,6 +2736,7 @@ export {
   ModulesScreen,
   OperatorsScreen,
   RoutesScreen,
+  SubscriberBilling,
   SubscriberScreen,
   TokensScreen,
   UsersScreen