@fonderie/vue-admin-screens 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/screens/AdminShell.ts
 import { ConfigEditorScreen, ConfigListScreen } from "@fonderie/vue-config-admin-screens";
 import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-admin-screens";
-import { computed as computed2, defineComponent as defineComponent12, h as h13, ref as ref5 } from "vue";
+import { computed as computed2, defineComponent as defineComponent13, h as h14, ref as ref5 } from "vue";
 
 // src/styles.ts
 var styles = {
@@ -379,11 +379,92 @@ var RoutesScreen = defineComponent6({
   }
 });
 
+// src/screens/MigrationsScreen.ts
+import { useAdminMigrations } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent7, h as h8 } from "vue";
+function why(m, everApplied) {
+  if (m.pending.length === 0) return null;
+  if (m.blockedBy) return `Apply "${m.blockedBy}" first \u2014 it runs before this one and is behind.`;
+  if (everApplied && m.pending.some((p) => p.impact === "destructive"))
+    return "Contains a migration that deletes data. No down-migration brings it back \u2014 apply this one through CI or `npm run migrate`.";
+  return null;
+}
+var MigrationsScreen = defineComponent7({
+  name: "FonderieMigrationsScreen",
+  props: { client: { type: Object, required: true } },
+  setup(props) {
+    const { report, isLoading, error, refresh, apply } = useAdminMigrations(props.client);
+    const section = (m, everApplied) => {
+      const blocked = why(m, everApplied);
+      const files = m.pending.map((p) => p.file);
+      return h8("section", { style: { marginBottom: "24px" } }, [
+        h8("h2", { style: styles.subtitle }, `${m.name} \u2014 ${m.pending.length} pending`),
+        h8(
+          "ul",
+          m.pending.map(
+            (p) => h8("li", [
+              h8("code", p.file),
+              " ",
+              h8(
+                "span",
+                { style: p.impact === "destructive" ? styles.bad : styles.advice },
+                p.impact
+              ),
+              p.destructive.length > 0 ? h8(
+                "ul",
+                p.destructive.map((s) => h8("li", [h8("code", s.slice(0, 120))]))
+              ) : null
+            ])
+          )
+        ),
+        blocked ? h8("p", { style: styles.advice }, blocked) : h8(
+          "button",
+          {
+            type: "button",
+            style: styles.button,
+            disabled: isLoading.value || !m.appliable,
+            onClick: () => {
+              if (window.confirm(
+                `Apply ${m.pending.length} migration(s) to "${m.name}"? This changes the database schema.`
+              ))
+                void apply(m.name, files).catch(() => {
+                });
+            }
+          },
+          `Apply ${m.pending.length} migration${m.pending.length === 1 ? "" : "s"}`
+        )
+      ]);
+    };
+    return () => page(
+      "Migrations",
+      { isLoading, error },
+      () => {
+        const r = report.value;
+        if (!r) return null;
+        const behind = r.modules.filter((m) => m.pending.length > 0);
+        if (behind.length === 0) return h8("p", { style: styles.ok }, "Every module is up to date.");
+        return [
+          r.everApplied ? null : h8(
+            "p",
+            { style: styles.advice },
+            "This database has never been migrated \u2014 treating it as a first install, so nothing is held back."
+          ),
+          ...behind.map((m) => section(m, r.everApplied))
+        ].filter(Boolean);
+      },
+      [refreshButton("Refresh", isLoading.value, () => void refresh())],
+      {
+        errorText: (e) => e.status === 403 ? "Applying migrations needs a token with the write scope." : e.explanation
+      }
+    );
+  }
+});
+
 // src/screens/TokensScreen.ts
 import { useAdminTokens } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent7, h as h8, ref } from "vue";
+import { defineComponent as defineComponent8, h as h9, ref } from "vue";
 var ALL = ["read", "write", "secrets"];
-var TokensScreen = defineComponent7({
+var TokensScreen = defineComponent8({
   name: "FonderieTokensScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
@@ -395,36 +476,36 @@ var TokensScreen = defineComponent7({
     const toggle = (s) => scopes.value = scopes.value.includes(s) ? scopes.value.filter((x) => x !== s) : [...scopes.value, s];
     return () => {
       const r = report.value;
-      return h8("div", { style: styles.container }, [
-        h8("h1", { style: styles.title }, "Access"),
-        error.value ? h8(
+      return h9("div", { style: styles.container }, [
+        h9("h1", { style: styles.title }, "Access"),
+        error.value ? h9(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 401 ? "Issuing and revoking need the root token (the one in your deployment config)." : error.value.explanation
         ) : null,
-        h8("h2", { style: styles.subtitle }, "Root token"),
-        r ? h8("p", [
-          h8(
+        h9("h2", { style: styles.subtitle }, "Root token"),
+        r ? h9("p", [
+          h9(
             "span",
             { style: r.admin.ok ? styles.ok : styles.bad },
             r.admin.ok ? "strong" : "weak"
           ),
           ...r.admin.problems.map(
-            (p) => h8("div", { key: p.message, style: styles.bad }, p.message)
+            (p) => h9("div", { key: p.message, style: styles.bad }, p.message)
           )
         ]) : null,
-        h8("h2", { style: styles.subtitle }, "Issued tokens"),
-        r?.issued === null ? h8(
+        h9("h2", { style: styles.subtitle }, "Issued tokens"),
+        r?.issued === null ? h9(
           "p",
           { style: styles.muted },
           "Issuing is off \u2014 give AdminModule a store and run its migrations."
         ) : [
-          minted.value ? h8("p", { style: styles.ok }, [
+          minted.value ? h9("p", { style: styles.ok }, [
             "Copy this now \u2014 it is never shown again. ",
-            h8("span", { style: styles.mono }, minted.value.token),
+            h9("span", { style: styles.mono }, minted.value.token),
             ` (${minted.value.name})`
           ]) : null,
-          h8(
+          h9(
             "form",
             {
               style: styles.toolbar,
@@ -444,7 +525,7 @@ var TokensScreen = defineComponent7({
               }
             },
             [
-              h8("input", {
+              h9("input", {
                 value: name.value,
                 onInput: (e) => name.value = e.target.value,
                 placeholder: "name",
@@ -452,8 +533,8 @@ var TokensScreen = defineComponent7({
                 "aria-label": "Name"
               }),
               ...ALL.map(
-                (s) => h8("label", { key: s, style: { ...styles.badge, cursor: "pointer" } }, [
-                  h8("input", {
+                (s) => h9("label", { key: s, style: { ...styles.badge, cursor: "pointer" } }, [
+                  h9("input", {
                     type: "checkbox",
                     checked: scopes.value.includes(s),
                     onChange: () => toggle(s)
@@ -461,14 +542,14 @@ var TokensScreen = defineComponent7({
                   ` ${s}`
                 ])
               ),
-              h8("input", {
+              h9("input", {
                 value: days.value,
                 onInput: (e) => days.value = e.target.value,
                 placeholder: "days (optional)",
                 style: { ...styles.button, cursor: "text", width: "140px" },
                 "aria-label": "Days"
               }),
-              h8(
+              h9(
                 "button",
                 {
                   type: "submit",
@@ -482,10 +563,10 @@ var TokensScreen = defineComponent7({
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t) => h8("tr", { key: t.id }, [
+              (t) => h9("tr", { key: t.id }, [
                 td([
                   t.name,
-                  t.revokedAt ? h8("span", { style: styles.badge }, " revoked") : ""
+                  t.revokedAt ? h9("span", { style: styles.badge }, " revoked") : ""
                 ]),
                 td(t.scopes.join(", "), styles.mono),
                 td(
@@ -501,7 +582,7 @@ var TokensScreen = defineComponent7({
                   styles.muted
                 ),
                 td(
-                  t.revokedAt ? "" : h8(
+                  t.revokedAt ? "" : h9(
                     "button",
                     {
                       type: "button",
@@ -519,21 +600,21 @@ var TokensScreen = defineComponent7({
                 )
               ])
             )
-          ) : h8("p", { style: styles.muted }, "None issued.")
+          ) : h9("p", { style: styles.muted }, "None issued.")
         ],
-        h8("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
-        r && r.legacy.length === 0 ? h8(
+        h9("h2", { style: styles.subtitle }, "Legacy per-brick tokens"),
+        r && r.legacy.length === 0 ? h9(
           "p",
           { style: styles.muted },
           "None \u2014 every brick's admin surface goes through this token."
-        ) : h8(
+        ) : h9(
           "ul",
           { style: styles.list },
           (r?.legacy ?? []).map(
-            (l) => h8("li", { key: l.module, style: styles.row }, [
-              h8("span", { style: styles.mono }, l.module),
+            (l) => h9("li", { key: l.module, style: styles.row }, [
+              h9("span", { style: styles.mono }, l.module),
               " ",
-              h8(
+              h9(
                 "span",
                 { style: styles.muted },
                 "still registers its standalone routes with its own token (deprecated)"
@@ -547,38 +628,55 @@ var TokensScreen = defineComponent7({
 });
 
 // src/screens/UsersScreen.ts
-import { useAdminLoginHistory, useAdminUser, useAdminUserSessions } from "@fonderie/vue-admin";
-import { computed, defineComponent as defineComponent8, h as h9, ref as ref2 } from "vue";
-var UsersScreen = defineComponent8({
+import {
+  useAdminLoginHistory,
+  useAdminUser,
+  useAdminUserSessions,
+  useAdminUsers
+} from "@fonderie/vue-admin";
+import { computed, defineComponent as defineComponent9, h as h10, ref as ref2 } from "vue";
+var UsersScreen = defineComponent9({
   name: "FonderieUsersScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const input = ref2("");
     const email = ref2("");
+    const selectedId = ref2("");
+    const list = useAdminUsers(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
-      { email }
+      { email, id: selectedId }
     );
     const userId = computed(() => user.value?.id ?? null);
     const sessions = useAdminUserSessions(props.client, userId);
     const history = useAdminLoginHistory(props.client, userId, { limit: 20 });
-    const yesNo = (v) => h9("span", { style: v ? styles.ok : styles.muted }, v ? "yes" : "no");
-    const row = (k, v) => h9("tr", [td(k), td(v)]);
+    const showList = computed(() => !email.value && !selectedId.value);
+    const yesNo = (v) => h10("span", { style: v ? styles.ok : styles.muted }, v ? "yes" : "no");
+    const row = (k, v) => h10("tr", [td(k), td(v)]);
+    const clear = () => {
+      email.value = "";
+      selectedId.value = "";
+      input.value = "";
+    };
     return () => {
       const u = user.value;
-      return h9("div", { style: styles.container }, [
-        h9("h1", { style: styles.title }, "Users"),
-        h9(
+      return h10("div", { style: styles.container }, [
+        h10("h1", { style: styles.title }, "Users"),
+        h10(
           "form",
           {
             style: styles.toolbar,
             onSubmit: (e) => {
               e.preventDefault();
+              selectedId.value = "";
               email.value = input.value.trim();
             }
           },
           [
-            h9("input", {
+            h10("input", {
               type: "email",
               value: input.value,
               onInput: (e) => input.value = e.target.value,
@@ -586,28 +684,67 @@ var UsersScreen = defineComponent8({
               style: { ...styles.button, cursor: "text", minWidth: "280px" },
               "aria-label": "Email"
             }),
-            h9(
+            h10(
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
-            )
+            ),
+            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : refreshButton("\u2190 All users", false, clear)
           ]
         ),
-        error.value ? h9(
+        showList.value ? h10("div", [
+          list.error.value ? h10("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.users.value.length === 0 && !list.isLoading.value ? h10("p", { style: styles.muted }, "No users yet.") : table(
+            ["Email", "Name", "Created", "Status"],
+            list.users.value.map(
+              (u2) => h10("tr", { key: u2.id }, [
+                td(
+                  h10(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0 },
+                      onClick: () => selectedId.value = u2.id
+                    },
+                    u2.email
+                  )
+                ),
+                td(
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h10("span", { style: styles.muted }, "\u2014")
+                ),
+                td(new Date(u2.createdAt).toLocaleDateString()),
+                td(
+                  u2.suspended ? h10("span", { style: styles.badge }, "suspended") : u2.deletedAt ? h10("span", { style: styles.badge }, "deleted") : h10("span", { style: styles.muted }, "active")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? h10("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h10(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
+        error.value ? h10(
           "p",
           { style: styles.error, role: "alert" },
           error.value.status === 404 ? "No user with that email." : error.value.explanation
         ) : null,
         u ? [
-          h9("h2", { style: styles.subtitle }, [
+          h10("h2", { style: styles.subtitle }, [
             u.firstName || u.lastName ? `${u.firstName} ${u.lastName}`.trim() : u.email,
             " ",
-            u.suspended ? h9("span", { style: styles.badge }, "suspended") : null,
-            u.deletedAt ? h9("span", { style: styles.badge }, "deleted") : null
+            u.suspended ? h10("span", { style: styles.badge }, "suspended") : null,
+            u.deletedAt ? h10("span", { style: styles.badge }, "deleted") : null
           ]),
-          h9("table", { style: styles.table }, [
-            h9("tbody", [
-              row("id", h9("span", { style: styles.mono }, u.id)),
+          h10("table", { style: styles.table }, [
+            h10("tbody", [
+              row("id", h10("span", { style: styles.mono }, u.id)),
               row("email", [u.email, " \xB7 verified ", yesNo(u.isEmailVerified)]),
               row("MFA", yesNo(u.mfaEnabled)),
               row(
@@ -616,12 +753,12 @@ var UsersScreen = defineComponent8({
               ),
               row(
                 "last login",
-                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h9("span", { style: styles.muted }, "never")
+                u.lastLogin ? new Date(u.lastLogin).toLocaleString() : h10("span", { style: styles.muted }, "never")
               ),
               row("created", new Date(u.createdAt).toLocaleString())
             ])
           ]),
-          h9("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
+          h10("div", { style: { ...styles.toolbar, marginTop: "12px" } }, [
             u.suspended ? refreshButton("Unsuspend", isLoading.value, () => void unsuspend()) : refreshButton("Suspend", isLoading.value, () => void suspend()),
             refreshButton(
               "Sign out everywhere",
@@ -629,17 +766,17 @@ var UsersScreen = defineComponent8({
               () => void revokeSessions().then(() => sessions.refresh())
             )
           ]),
-          h9("h2", { style: styles.subtitle }, "Live sessions"),
-          sessions.sessions.value.length === 0 ? h9("p", { style: styles.muted }, "None.") : h9(
+          h10("h2", { style: styles.subtitle }, "Live sessions"),
+          sessions.sessions.value.length === 0 ? h10("p", { style: styles.muted }, "None.") : h10(
             "ul",
             { style: styles.list },
             sessions.sessions.value.map(
-              (s) => h9("li", { key: s.id, style: styles.row }, [
-                h9("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
+              (s) => h10("li", { key: s.id, style: styles.row }, [
+                h10("span", { style: styles.mono }, s.ipAddress ?? "\u2014"),
                 " ",
-                h9("span", { style: styles.muted }, s.userAgent ?? ""),
+                h10("span", { style: styles.muted }, s.userAgent ?? ""),
                 " ",
-                h9(
+                h10(
                   "span",
                   { style: styles.muted },
                   `since ${new Date(s.createdAt).toLocaleString()}`
@@ -647,25 +784,25 @@ var UsersScreen = defineComponent8({
               ])
             )
           ),
-          h9("h2", { style: styles.subtitle }, "Recent sign-ins"),
-          history.events.value.length === 0 && !history.isLoading.value ? h9("p", { style: styles.muted }, "None recorded.") : h9(
+          h10("h2", { style: styles.subtitle }, "Recent sign-ins"),
+          history.events.value.length === 0 && !history.isLoading.value ? h10("p", { style: styles.muted }, "None recorded.") : h10(
             "ul",
             { style: styles.list },
             history.events.value.map(
-              (e) => h9("li", { key: e.id, style: styles.row }, [
-                h9(
+              (e) => h10("li", { key: e.id, style: styles.row }, [
+                h10(
                   "span",
                   { style: e.outcome === "success" ? styles.ok : styles.bad },
                   e.outcome
                 ),
                 " ",
-                h9("span", { style: styles.muted }, e.method),
+                h10("span", { style: styles.muted }, e.method),
                 " ",
-                h9("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
+                h10("span", { style: styles.muted }, new Date(e.createdAt).toLocaleString())
               ])
             )
           ),
-          history.hasMore.value && !history.isLoading.value ? h9(
+          history.hasMore.value && !history.isLoading.value ? h10(
             "button",
             {
               type: "button",
@@ -682,8 +819,8 @@ var UsersScreen = defineComponent8({
 
 // src/screens/CatalogScreen.ts
 import { useAdminCatalog } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent9, h as h10 } from "vue";
-var CatalogScreen = defineComponent9({
+import { defineComponent as defineComponent10, h as h11 } from "vue";
+var CatalogScreen = defineComponent10({
   name: "FonderieCatalogScreen",
   props: { client: { type: Object, required: true } },
   setup(props) {
@@ -691,16 +828,16 @@ var CatalogScreen = defineComponent9({
     const money = (v) => v == null ? "\u2014" : (v / 100).toFixed(2);
     return () => {
       const c = catalog.value;
-      return h10("div", { style: styles.container }, [
-        h10("div", { style: styles.toolbar }, [
-          h10("h1", { style: { ...styles.title, marginBottom: 0 } }, "Catalog"),
+      return h11("div", { style: styles.container }, [
+        h11("div", { style: styles.toolbar }, [
+          h11("h1", { style: { ...styles.title, marginBottom: 0 } }, "Catalog"),
           refreshButton("Refresh", isLoading.value, () => void refresh())
         ]),
-        error.value ? h10("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-        isLoading.value && !c ? h10("p", { style: styles.status }, "Loading\u2026") : null,
+        error.value ? h11("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        isLoading.value && !c ? h11("p", { style: styles.status }, "Loading\u2026") : null,
         c ? [
-          h10("h2", { style: styles.subtitle }, "Configured (code)"),
-          h10(
+          h11("h2", { style: styles.subtitle }, "Configured (code)"),
+          h11(
             "pre",
             {
               style: {
@@ -712,14 +849,14 @@ var CatalogScreen = defineComponent9({
             },
             JSON.stringify(c.configured, null, 2)
           ),
-          h10("h2", { style: styles.subtitle }, "Stored (database)"),
-          c.stored.length === 0 ? h10("p", { style: styles.muted }, "No stored plans.") : table(
+          h11("h2", { style: styles.subtitle }, "Stored (database)"),
+          c.stored.length === 0 ? h11("p", { style: styles.muted }, "No stored plans.") : table(
             ["Plan", "Tier", "Seats", "Monthly", "Yearly", "Trial", ""],
             c.stored.map(
-              (p) => h10("tr", { key: p.id }, [
+              (p) => h11("tr", { key: p.id }, [
                 td([
-                  h10("strong", p.name),
-                  p.description ? h10("div", { style: styles.muted }, p.description) : ""
+                  h11("strong", p.name),
+                  p.description ? h11("div", { style: styles.muted }, p.description) : ""
                 ]),
                 td(String(p.tier)),
                 td(p.seats == null ? "\u221E" : String(p.seats)),
@@ -727,7 +864,7 @@ var CatalogScreen = defineComponent9({
                 td(money(p.pricing?.yearly)),
                 td(p.trialDays ? `${p.trialDays} d` : "\u2014"),
                 td(
-                  h10(
+                  h11(
                     "button",
                     {
                       type: "button",
@@ -751,20 +888,30 @@ var CatalogScreen = defineComponent9({
 });
 
 // src/screens/SubscriberScreen.ts
-import { useAdminSubscriber } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent10, h as h11, ref as ref3 } from "vue";
-var SubscriberScreen = defineComponent10({
+import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
+import { defineComponent as defineComponent11, h as h12, ref as ref3 } from "vue";
+var SubscriberScreen = defineComponent11({
   name: "FonderieSubscriberScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const type = ref3("user");
     const idInput = ref3("");
     const subscriber = ref3(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 = (t, id) => {
+      granted.value = null;
+      type.value = t;
+      idInput.value = id;
+      subscriber.value = { type: t, id };
+    };
     const amount = ref3("");
     const note = ref3("");
     const granted = ref3(null);
-    const input = (model, placeholder, extra = {}) => h11("input", {
+    const input = (model, placeholder, extra = {}) => h12("input", {
       value: model.value,
       onInput: (e) => model.value = e.target.value,
       placeholder,
@@ -774,9 +921,9 @@ var SubscriberScreen = defineComponent10({
     return () => {
       const s = subscription.value;
       const w = wallet.value;
-      return h11("div", { style: styles.container }, [
-        h11("h1", { style: styles.title }, "Subscriber"),
-        h11(
+      return h12("div", { style: styles.container }, [
+        h12("h1", { style: styles.title }, "Subscriber"),
+        h12(
           "form",
           {
             style: styles.toolbar,
@@ -787,7 +934,7 @@ var SubscriberScreen = defineComponent10({
             }
           },
           [
-            h11(
+            h12(
               "select",
               {
                 value: type.value,
@@ -796,49 +943,109 @@ var SubscriberScreen = defineComponent10({
                 "aria-label": "Type"
               },
               [
-                h11("option", { value: "user" }, "user"),
-                h11("option", { value: "workspace" }, "workspace")
+                h12("option", { value: "user" }, "user"),
+                h12("option", { value: "workspace" }, "workspace")
               ]
             ),
             input(idInput, "subscriber id", { minWidth: "280px" }),
-            h11(
+            h12(
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
+            ),
+            subscriber.value ? h12(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                onClick: () => {
+                  subscriber.value = null;
+                  idInput.value = "";
+                  granted.value = null;
+                }
+              },
+              "\u2190 All subscribers"
+            ) : h12(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: list.isLoading.value,
+                onClick: () => void list.refresh()
+              },
+              "Refresh"
             )
           ]
         ),
-        error.value ? h11("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+        !subscriber.value ? h12("div", [
+          list.error.value ? h12("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.subscriptions.value.length === 0 && !list.isLoading.value ? h12("p", { style: styles.muted }, "No subscribers yet.") : table(
+            ["Subscriber", "Plan", "Status", "Renews"],
+            list.subscriptions.value.map(
+              (sub) => h12("tr", { key: sub.id }, [
+                td(
+                  h12(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0, ...styles.mono },
+                      onClick: () => open(sub.subscriberType, sub.subscriberId)
+                    },
+                    `${sub.subscriberType}/${sub.subscriberId}`
+                  )
+                ),
+                td(`${sub.plan} \xB7 ${sub.interval}`),
+                td(
+                  sub.cancelAtPeriodEnd ? [sub.status, " ", h12("span", { style: styles.badge }, "cancels")] : sub.status
+                ),
+                td(
+                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h12("span", { style: styles.muted }, "\u2014")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? h12("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h12(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
+        error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
         subscriber.value && !isLoading.value ? [
-          h11("h2", { style: styles.subtitle }, "Subscription"),
-          s ? h11("table", { style: styles.table }, [
-            h11("tbody", [
-              h11("tr", [td("plan"), td([h11("strong", s.plan), ` \xB7 ${s.interval}`])]),
-              h11("tr", [
+          h12("h2", { style: styles.subtitle }, "Subscription"),
+          s ? h12("table", { style: styles.table }, [
+            h12("tbody", [
+              h12("tr", [td("plan"), td([h12("strong", s.plan), ` \xB7 ${s.interval}`])]),
+              h12("tr", [
                 td("status"),
                 td(`${s.status}${s.cancelAtPeriodEnd ? " \xB7 cancels at period end" : ""}`)
               ]),
-              h11("tr", [
+              h12("tr", [
                 td("period"),
                 td(
                   `${s.currentPeriodStart ? new Date(s.currentPeriodStart).toLocaleDateString() : "\u2014"} \u2192 ${s.currentPeriodEnd ? new Date(s.currentPeriodEnd).toLocaleDateString() : "\u2014"}`
                 )
               ]),
-              h11("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
+              h12("tr", [td("provider"), td(s.providerSubscriptionId ?? "\u2014", styles.mono)])
             ])
-          ]) : h11("p", { style: styles.muted }, "No subscription."),
-          h11("h2", { style: styles.subtitle }, "Wallet"),
+          ]) : h12("p", { style: styles.muted }, "No subscription."),
+          h12("h2", { style: styles.subtitle }, "Wallet"),
           w ? [
-            h11("p", [
-              h11("strong", w.balance),
+            h12("p", [
+              h12("strong", w.balance),
               ` ${w.currency} `,
-              h11(
+              h12(
                 "span",
                 { style: styles.muted },
                 `(granted ${w.granted ?? "0"} \xB7 purchased ${w.purchased ?? "0"}) \xB7 minor units, precision ${w.precision}`
               )
             ]),
-            h11(
+            h12(
               "form",
               {
                 style: styles.toolbar,
@@ -863,7 +1070,7 @@ var SubscriberScreen = defineComponent10({
               [
                 input(amount, "amount (minor units)"),
                 input(note, "reason (optional)", { minWidth: "220px" }),
-                h11(
+                h12(
                   "button",
                   {
                     type: "submit",
@@ -872,14 +1079,14 @@ var SubscriberScreen = defineComponent10({
                   },
                   "Grant"
                 ),
-                granted.value ? h11("span", { style: styles.ok }, granted.value) : null
+                granted.value ? h12("span", { style: styles.ok }, granted.value) : null
               ]
             ),
-            h11("h2", { style: styles.subtitle }, "Ledger"),
-            ledger.value.length === 0 ? h11("p", { style: styles.muted }, "Nothing moved yet.") : table(
+            h12("h2", { style: styles.subtitle }, "Ledger"),
+            ledger.value.length === 0 ? h12("p", { style: styles.muted }, "Nothing moved yet.") : table(
               ["When", "Kind", "Amount", "Note"],
               ledger.value.map(
-                (t) => h11("tr", { key: t.id }, [
+                (t) => h12("tr", { key: t.id }, [
                   td(new Date(t.createdAt).toLocaleString(), styles.muted),
                   td(t.type),
                   td(t.amount, styles.mono),
@@ -887,7 +1094,7 @@ var SubscriberScreen = defineComponent10({
                 ])
               )
             ),
-            hasMoreLedger.value ? h11(
+            hasMoreLedger.value ? h12(
               "button",
               {
                 type: "button",
@@ -896,7 +1103,7 @@ var SubscriberScreen = defineComponent10({
               },
               "Load more"
             ) : null
-          ] : h11(
+          ] : h12(
             "p",
             { style: styles.muted },
             "No wallet \u2014 billing has no wallet configuration."
@@ -909,8 +1116,8 @@ var SubscriberScreen = defineComponent10({
 
 // src/screens/AuditScreen.ts
 import { useAdminAudit } from "@fonderie/vue-admin";
-import { defineComponent as defineComponent11, h as h12, ref as ref4 } from "vue";
-var AuditScreen = defineComponent11({
+import { defineComponent as defineComponent12, h as h13, ref as ref4 } from "vue";
+var AuditScreen = defineComponent12({
   name: "FonderieAuditScreen",
   props: {
     client: { type: Object, required: true },
@@ -923,16 +1130,16 @@ var AuditScreen = defineComponent11({
       props.client,
       query
     );
-    const field = (key, placeholder) => h12("input", {
+    const field = (key, placeholder) => h13("input", {
       value: draft.value[key],
       onInput: (e) => draft.value = { ...draft.value, [key]: e.target.value },
       placeholder,
       style: { ...styles.button, cursor: "text" },
       "aria-label": placeholder
     });
-    return () => h12("div", { style: styles.container }, [
-      h12("h1", { style: styles.title }, "Audit"),
-      h12(
+    return () => h13("div", { style: styles.container }, [
+      h13("h1", { style: styles.title }, "Audit"),
+      h13(
         "form",
         {
           style: styles.toolbar,
@@ -951,7 +1158,7 @@ var AuditScreen = defineComponent11({
           field("workspaceId", "workspace id (all if empty)"),
           field("type", "event type"),
           field("actorId", "actor id"),
-          h12(
+          h13(
             "button",
             { type: "submit", style: styles.button, disabled: isLoading.value },
             "Filter"
@@ -959,11 +1166,11 @@ var AuditScreen = defineComponent11({
           refreshButton("Refresh", isLoading.value, () => void refresh())
         ]
       ),
-      error.value ? h12("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
-      events.value.length === 0 && !isLoading.value ? h12("p", { style: styles.muted }, "Nothing recorded for this filter.") : table(
+      error.value ? h13("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
+      events.value.length === 0 && !isLoading.value ? h13("p", { style: styles.muted }, "Nothing recorded for this filter.") : table(
         ["When", "Type", "Workspace", "Actor", "Request"],
         events.value.map(
-          (e) => h12("tr", { key: e.id }, [
+          (e) => h13("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),
@@ -972,8 +1179,8 @@ var AuditScreen = defineComponent11({
           ])
         )
       ),
-      isLoading.value ? h12("p", { style: styles.status }, "Loading\u2026") : null,
-      hasMore.value && !isLoading.value ? h12(
+      isLoading.value ? h13("p", { style: styles.status }, "Loading\u2026") : null,
+      hasMore.value && !isLoading.value ? h13(
         "button",
         {
           type: "button",
@@ -1013,11 +1220,12 @@ var NAV = [
     items: [
       { page: "audit", label: "Audit", needs: "audit" },
       { page: "log", label: "Admin log" },
-      { page: "tokens", label: "Access" }
+      { page: "tokens", label: "Access" },
+      { page: "migrations", label: "Migrations" }
     ]
   }
 ];
-var AdminShell = defineComponent12({
+var AdminShell = defineComponent13({
   name: "FonderieAdminShell",
   props: {
     client: { type: Object, required: true },
@@ -1046,7 +1254,7 @@ var AdminShell = defineComponent12({
       emit("navigate", p);
       if (props.page === void 0) own.value = p;
     };
-    const back = () => h13(
+    const back = () => h14(
       "button",
       { type: "button", style: styles.button, onClick: () => editing.value = null },
       "\u2190 Back"
@@ -1055,43 +1263,45 @@ var AdminShell = defineComponent12({
       const c = props.client;
       switch (current.value) {
         case "attention":
-          return h13(AttentionScreen, { client: c });
+          return h14(AttentionScreen, { client: c });
         case "modules":
-          return h13(ModulesScreen, { client: c });
+          return h14(ModulesScreen, { client: c });
         case "doctor":
-          return h13(DoctorScreen, { client: c });
+          return h14(DoctorScreen, { client: c });
         case "config":
-          return h13(ConfigScreen, { client: c });
+          return h14(ConfigScreen, { client: c });
         case "routes":
-          return h13(RoutesScreen, { client: c });
+          return h14(RoutesScreen, { client: c });
         case "tokens":
-          return h13(TokensScreen, { client: c });
+          return h14(TokensScreen, { client: c });
+        case "migrations":
+          return h14(MigrationsScreen, { client: c });
         case "log":
-          return h13(AdminLogScreen, { client: c });
+          return h14(AdminLogScreen, { client: c });
         case "catalog":
-          return props.billingClient ? h13(CatalogScreen, { client: props.billingClient }) : h13(
+          return props.billingClient ? h14(CatalogScreen, { client: props.billingClient }) : h14(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to see the catalog here."
           );
         case "subscriber":
-          return props.billingClient ? h13(SubscriberScreen, { client: props.billingClient }) : h13(
+          return props.billingClient ? h14(SubscriberScreen, { client: props.billingClient }) : h14(
             "p",
             { style: styles.status },
             "Pass a BillingAdminClient to look up subscribers here."
           );
         case "audit":
-          return props.auditClient ? h13(AuditScreen, { client: props.auditClient }) : h13(
+          return props.auditClient ? h14(AuditScreen, { client: props.auditClient }) : h14(
             "p",
             { style: styles.status },
             "Pass an AuditAdminClient to see the audit trail here."
           );
         case "users":
-          return props.authClient ? h13(UsersScreen, { client: props.authClient }) : h13("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
+          return props.authClient ? h14(UsersScreen, { client: props.authClient }) : h14("p", { style: styles.status }, "Pass an AuthAdminClient to look up users here.");
         case "settings": {
           const cc = props.configClient;
           if (!cc)
-            return h13(
+            return h14(
               "p",
               { style: styles.status },
               "Pass a ConfigAdminClient to manage config and secrets here."
@@ -1100,7 +1310,7 @@ var AdminShell = defineComponent12({
           if (e && e.kind !== "template")
             return [
               back(),
-              h13(ConfigEditorScreen, {
+              h14(ConfigEditorScreen, {
                 client: cc,
                 kind: e.kind,
                 configKey: e.key,
@@ -1108,7 +1318,7 @@ var AdminShell = defineComponent12({
                 onSaved: () => editing.value = null
               })
             ];
-          return h13(ConfigListScreen, {
+          return h14(ConfigListScreen, {
             client: cc,
             ...props.environment !== void 0 ? { environment: props.environment } : {},
             "onSelect-config": (key) => editing.value = { kind: "config", key },
@@ -1118,7 +1328,7 @@ var AdminShell = defineComponent12({
         case "templates": {
           const kc = props.courierClient;
           if (!kc)
-            return h13(
+            return h14(
               "p",
               { style: styles.status },
               "Pass a CourierAdminClient to manage templates here."
@@ -1127,21 +1337,21 @@ var AdminShell = defineComponent12({
           if (e?.kind === "template")
             return [
               back(),
-              h13(TemplateEditorScreen, {
+              h14(TemplateEditorScreen, {
                 client: kc,
                 type: e.type,
                 onSaved: () => editing.value = null
               })
             ];
-          return h13(TemplateListScreen, {
+          return h14(TemplateListScreen, {
             client: kc,
             "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
           });
         }
       }
     };
-    return () => h13("div", { style: styles.shell }, [
-      h13(
+    return () => h14("div", { style: styles.shell }, [
+      h14(
         "nav",
         { style: styles.nav, "aria-label": "Admin" },
         NAV.map((g) => {
@@ -1149,10 +1359,10 @@ var AdminShell = defineComponent12({
             (i) => !i.needs || (i.needs === "config" ? props.configClient : i.needs === "courier" ? props.courierClient : i.needs === "auth" ? props.authClient : i.needs === "billing" ? props.billingClient : props.auditClient)
           );
           if (items.length === 0) return null;
-          return h13("div", { key: g.group }, [
-            h13("div", { style: styles.navGroup }, g.group),
+          return h14("div", { key: g.group }, [
+            h14("div", { style: styles.navGroup }, g.group),
             ...items.map(
-              (i) => h13(
+              (i) => h14(
                 "button",
                 {
                   key: i.page,
@@ -1170,7 +1380,7 @@ var AdminShell = defineComponent12({
           ]);
         })
       ),
-      h13("main", { style: styles.main }, body())
+      h14("main", { style: styles.main }, body())
     ]);
   }
 });
@@ -1182,6 +1392,7 @@ export {
   CatalogScreen,
   ConfigScreen,
   DoctorScreen,
+  MigrationsScreen,
   ModulesScreen,
   RoutesScreen,
   SubscriberScreen,