apiblaze 0.18.3 → 0.18.7

package/dist/react/index.mjs

@@ -39,14 +39,79 @@ function relTime(iso) {
   if (d < 30) return `${d}d ago`;
   return new Date(iso).toLocaleDateString();
 }
+function Typeahead(props) {
+  const [q, setQ] = React.useState("");
+  const [results, setResults] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const seq = React.useRef(0);
+  React.useEffect(() => {
+    const term = q.trim();
+    if (term.length < 2) {
+      setResults(null);
+      setLoading(false);
+      return;
+    }
+    const my = ++seq.current;
+    setLoading(true);
+    const h = setTimeout(async () => {
+      try {
+        const r = await props.search(term);
+        if (my === seq.current) {
+          setResults(r);
+          setLoading(false);
+        }
+      } catch {
+        if (my === seq.current) {
+          setResults([]);
+          setLoading(false);
+        }
+      }
+    }, 250);
+    return () => clearTimeout(h);
+  }, [q]);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, minWidth: 180 }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        style: { ...props.s.input, width: "100%" },
+        placeholder: props.placeholder,
+        value: q,
+        onChange: (e) => setQ(e.target.value),
+        disabled: props.disabled,
+        "aria-label": props.placeholder
+      }
+    ),
+    q.trim().length >= 2 && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", zIndex: 5, left: 0, right: 0, top: "100%", marginTop: 4, background: props.s.surface, border: `1px solid ${props.s.border}`, borderRadius: 8, maxHeight: 220, overflowY: "auto", boxShadow: "0 6px 18px rgba(0,0,0,0.12)" }, children: [
+      loading && /* @__PURE__ */ jsx("div", { style: { padding: "8px 10px", fontSize: 12, color: props.s.muted }, children: "Searching\u2026" }),
+      !loading && results && results.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "8px 10px", fontSize: 12, color: props.s.muted }, children: "No matches" }),
+      !loading && results && results.map((it) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            props.onPick(it);
+            setQ("");
+            setResults(null);
+          },
+          style: { display: "block", width: "100%", textAlign: "left", padding: "8px 10px", border: "none", borderBottom: `1px solid ${props.s.border}`, background: "transparent", cursor: "pointer", color: props.s.text, fontFamily: "inherit", fontSize: 13 },
+          children: props.itemLabel(it)
+        },
+        props.itemKey(it)
+      ))
+    ] })
+  ] });
+}
 var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint = "/api/apiblaze/groups", theme, title = "Users & groups", className }, ref) {
   const t = { ...DEFAULTS, ...theme ?? {} };
   const headerBg = t.headerBackground || t.surface;
   const [access, setAccess] = React.useState("ok");
   const [myEmail, setMyEmail] = React.useState(null);
   const [groups, setGroups] = React.useState(null);
-  const [users, setUsers] = React.useState([]);
+  const [groupTotal, setGroupTotal] = React.useState(0);
+  const [groupQuery, setGroupQuery] = React.useState("");
   const [observed, setObserved] = React.useState([]);
+  const [observedNew, setObservedNew] = React.useState(0);
+  const [observedLoaded, setObservedLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState(null);
   const [open, setOpen] = React.useState(null);
   const [detail, setDetail] = React.useState(null);
@@ -54,15 +119,13 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
   const [creating, setCreating] = React.useState(false);
   const [newName, setNewName] = React.useState("");
   const [showCreate, setShowCreate] = React.useState(false);
+  const [showNewUser, setShowNewUser] = React.useState(false);
+  const [newUserRef, setNewUserRef] = React.useState("");
   const [pending, setPending] = React.useState(null);
   const [err, setErr] = React.useState(null);
   const [confirmDelete, setConfirmDelete] = React.useState(null);
-  const [showTraffic, setShowTraffic] = React.useState(false);
-  const [addSel, setAddSel] = React.useState("");
   const [addRole, setAddRole] = React.useState("member");
-  const [nestSel, setNestSel] = React.useState("");
   const [admins, setAdmins] = React.useState([]);
-  const [showAdmins, setShowAdmins] = React.useState(false);
   const [newAdmin, setNewAdmin] = React.useState("");
   const call = React.useCallback(async (body) => {
     const res = await fetch(endpoint, body ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) } : { cache: "no-store" });
@@ -76,9 +139,11 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
       const d = await call();
       setAccess(d.access === "pending" ? "pending" : "ok");
       setMyEmail(d.email ?? null);
-      setGroups((d.groups ?? []).slice().sort((a, b) => a.name.localeCompare(b.name)));
-      setUsers(d.users ?? []);
-      setObserved(d.observed ?? []);
+      setGroups(d.groups ?? []);
+      setGroupTotal(d.groupTotal ?? (d.groups?.length ?? 0));
+      setObservedNew(d.observedNew ?? 0);
+      setObservedLoaded(false);
+      setGroupQuery("");
       if (d.access !== "pending") {
         const a = await call({ action: "list-admins" });
         setAdmins(a.admin_emails ?? []);
@@ -92,12 +157,26 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
     load();
   }, [load]);
   React.useImperativeHandle(ref, () => ({ refresh: load }), [load]);
+  const searchGroups = React.useCallback(async (q) => {
+    setGroupQuery(q);
+    const d = await call({ action: "list-groups", q, offset: 0 });
+    setGroups(d.groups ?? []);
+    setGroupTotal(d.total ?? (d.groups?.length ?? 0));
+  }, [call]);
+  const loadMoreGroups = React.useCallback(async () => {
+    const d = await call({ action: "list-groups", q: groupQuery, offset: groups?.length ?? 0 });
+    setGroups((prev) => [...prev ?? [], ...d.groups ?? []]);
+    if (typeof d.total === "number") setGroupTotal(d.total);
+  }, [call, groupQuery, groups]);
+  const loadObserved = React.useCallback(async () => {
+    const d = await call({ action: "list-observed", offset: 0 });
+    setObserved(d.identities ?? []);
+    setObservedLoaded(true);
+  }, [call]);
   const loadDetail = React.useCallback(async (groupId) => {
     setDetailLoading(true);
     setDetail(null);
     setErr(null);
-    setAddSel("");
-    setNestSel("");
     try {
       setDetail(await call({ action: "group-detail", groupId }));
     } catch (e) {
@@ -106,6 +185,14 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
       setDetailLoading(false);
     }
   }, [call]);
+  const reloadAdmins = React.useCallback(async () => {
+    const a = await call({ action: "list-admins" });
+    setAdmins(a.admin_emails ?? []);
+  }, [call]);
+  const loadMoreMembers = React.useCallback(async (groupId, offset) => {
+    const d = await call({ action: "group-members", groupId, offset });
+    setDetail((prev) => prev && prev.id === groupId ? { ...prev, members: [...prev.members, ...d.members ?? []] } : prev);
+  }, [call]);
   function toggle(g) {
     if (open === g.id) {
       setOpen(null);
@@ -120,7 +207,6 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
     setErr(null);
     try {
       await call(body);
-      await load();
       if (after) await after();
     } catch (e) {
       setErr(e instanceof Error ? e.message : "The action failed.");
@@ -137,7 +223,7 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
       await call({ action: "create-group", name });
       setNewName("");
       setShowCreate(false);
-      await load();
+      await searchGroups(groupQuery);
     } catch (e) {
       setErr(e instanceof Error ? e.message : "Could not create the group.");
     } finally {
@@ -147,7 +233,18 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
   async function addAdmin() {
     const email = newAdmin.trim().toLowerCase();
     if (!email) return;
-    await act("add-admin", { action: "add-admin", email }, () => setNewAdmin(""));
+    await act("add-admin", { action: "add-admin", email }, async () => {
+      setNewAdmin("");
+      await reloadAdmins();
+    });
+  }
+  async function createUser() {
+    const ref2 = newUserRef.trim();
+    if (!ref2) return;
+    await act("create-user", { action: "create-user", ref: ref2 }, async () => {
+      setNewUserRef("");
+      await loadObserved();
+    });
   }
   const vars = {
     // @ts-expect-error CSS custom properties
@@ -188,7 +285,18 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
     /* @__PURE__ */ jsxs("div", { style: card, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, padding: "14px 16px", borderBottom: `1px solid ${t.border}`, background: headerBg }, children: [
         /* @__PURE__ */ jsx("strong", { style: { fontSize: 15 }, children: title }),
-        access === "ok" && /* @__PURE__ */ jsx("button", { style: btn("primary", true), disabled: busy, onClick: () => setShowCreate((v) => !v), "aria-label": "Create a new group", children: "+ New group" })
+        access === "ok" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx("button", { style: btn("ghost", true), disabled: busy, onClick: () => {
+            const nv = !showNewUser;
+            setShowNewUser(nv);
+            setShowCreate(false);
+            if (nv && !observedLoaded) loadObserved();
+          }, "aria-label": "Add a new user", children: "+ New user" }),
+          /* @__PURE__ */ jsx("button", { style: btn("primary", true), disabled: busy, onClick: () => {
+            setShowCreate((v) => !v);
+            setShowNewUser(false);
+          }, "aria-label": "Create a new group", children: "+ New group" })
+        ] })
       ] }),
       access === "pending" && /* @__PURE__ */ jsxs("div", { style: { padding: "28px 20px", textAlign: "center", color: t.muted, lineHeight: 1.5 }, children: [
         /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, color: t.text, marginBottom: 6, fontSize: 15 }, children: "Admin access required" }),
@@ -237,13 +345,88 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
           setNewName("");
         }, children: "Cancel" })
       ] }),
+      access === "ok" && showNewUser && /* @__PURE__ */ jsxs("div", { style: { padding: "12px 16px", borderBottom: `1px solid ${t.border}` }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: { ...inputStyle, flex: 1 },
+              placeholder: "Email (or a user id)",
+              value: newUserRef,
+              onChange: (e) => setNewUserRef(e.target.value),
+              onKeyDown: (e) => e.key === "Enter" && createUser(),
+              "aria-label": "New user email or id"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { style: btn("primary", true), disabled: busy || !newUserRef.trim(), onClick: createUser, children: "Add" }),
+          /* @__PURE__ */ jsx("button", { style: btn("ghost", true), onClick: () => {
+            setShowNewUser(false);
+            setNewUserRef("");
+          }, children: "Cancel" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: t.muted, marginTop: 6 }, children: [
+          "An ",
+          /* @__PURE__ */ jsx("strong", { children: "email" }),
+          " is pre-approved \u2014 they join with their real identity the first time they sign in. A ",
+          /* @__PURE__ */ jsx("strong", { children: "user id" }),
+          " is provisioned now."
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: t.muted, marginBottom: 6 }, children: [
+            "\u2026or add someone already seen in your API traffic",
+            observedNew ? ` (${observedNew} new)` : "",
+            ":"
+          ] }),
+          !observedLoaded && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: t.muted }, children: "Loading\u2026" }),
+          observedLoaded && observed.filter((o) => !o.provisioned).length === 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: t.muted }, children: "No new identities in traffic \u2014 they appear here after their first API call." }),
+          /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: observed.filter((o) => !o.provisioned).map((o) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: 8, alignItems: "center", padding: "5px 0", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 140, fontFamily: t.monoFontFamily, fontSize: 13 }, children: o.email || o.abz_sub }),
+            o.source_label && /* @__PURE__ */ jsx("span", { style: chip, children: o.source_label }),
+            o.last_seen && /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: t.muted }, children: [
+              "seen ",
+              relTime(o.last_seen),
+              o.seen_count ? ` \xB7 ${o.seen_count}\xD7` : ""
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: btn("ghost", true),
+                disabled: busy,
+                "aria-label": `Add ${o.email || o.abz_sub} as a user`,
+                onClick: () => act(`provision:${o.abz_sub}`, { action: "provision-observed", consumerUserId: o.abz_sub, email: o.email ?? void 0 }, loadObserved),
+                children: "Add"
+              }
+            )
+          ] }, o.abz_sub)) })
+        ] })
+      ] }),
       access === "ok" && groups === null && !loadError && /* @__PURE__ */ jsx("div", { "aria-busy": "true", style: { padding: 24, color: t.muted }, children: "Loading groups\u2026" }),
       access === "ok" && loadError && /* @__PURE__ */ jsxs("div", { role: "alert", style: { padding: 20, color: t.danger, fontSize: 13 }, children: [
         loadError,
         " ",
         /* @__PURE__ */ jsx("button", { style: { ...btn("ghost", true), marginLeft: 6 }, onClick: load, children: "Retry" })
       ] }),
-      access === "ok" && groups !== null && groups.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "28px 20px", textAlign: "center", color: t.muted }, children: "No groups yet. Create one to start organizing your users." }),
+      access === "ok" && groups !== null && (groupTotal > groups.length || groupQuery) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", padding: "10px 16px", borderBottom: `1px solid ${t.border}` }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: { ...inputStyle, flex: 1 },
+            placeholder: "Search groups\u2026",
+            defaultValue: groupQuery,
+            onChange: (e) => {
+              const v = e.target.value;
+              searchGroups(v);
+            },
+            "aria-label": "Search groups"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: t.muted, whiteSpace: "nowrap" }, children: [
+          groups.length,
+          " of ",
+          groupTotal
+        ] })
+      ] }),
+      access === "ok" && groups !== null && groups.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "28px 20px", textAlign: "center", color: t.muted }, children: groupQuery ? `No groups match \u201C${groupQuery}\u201D.` : "No groups yet. Create one to start organizing your users." }),
       access === "ok" && groups !== null && groups.length > 0 && /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: groups.map((g) => {
         const sealed = g.name === SEALED;
         const isOpen = open === g.id;
@@ -256,9 +439,12 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
               style: { display: "flex", width: "100%", gap: 10, alignItems: "center", padding: "12px 16px", background: "transparent", border: "none", cursor: "pointer", color: t.text, fontFamily: "inherit", fontSize: 14, textAlign: "left" },
               children: [
                 /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: t.muted, fontSize: 11 }, children: isOpen ? "\u25BE" : "\u25B8" }),
-                /* @__PURE__ */ jsx("strong", { style: { flex: 1 }, children: g.name }),
-                sealed && /* @__PURE__ */ jsx("span", { style: chip, children: "admins \xB7 managed by allowlist" }),
-                /* @__PURE__ */ jsxs("span", { style: { ...chip }, children: [
+                /* @__PURE__ */ jsx("strong", { style: { flex: 1 }, children: sealed ? "Admins" : g.name }),
+                sealed ? /* @__PURE__ */ jsxs("span", { style: chip, children: [
+                  admins.length,
+                  " admin",
+                  admins.length === 1 ? "" : "s"
+                ] }) : /* @__PURE__ */ jsxs("span", { style: chip, children: [
                   g.member_count ?? 0,
                   " member",
                   (g.member_count ?? 0) === 1 ? "" : "s"
@@ -268,64 +454,66 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
           ),
           isOpen && /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px 14px 34px" }, children: [
             detailLoading && /* @__PURE__ */ jsx("div", { style: { color: t.muted, fontSize: 13 }, children: "Loading\u2026" }),
-            detail && detail.id === g.id && /* @__PURE__ */ jsxs(Fragment, { children: [
+            detail && detail.id === g.id && /* @__PURE__ */ jsx(Fragment, { children: sealed ? (
+              /* apiblaze_admins is managed HERE, by email — the seal means
+                 nobody is added by group membership; adding an admin adds
+                 their email (they activate on first sign-in). */
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: t.muted, marginBottom: 10 }, children: [
+                  "Admins are granted by ",
+                  /* @__PURE__ */ jsx("strong", { children: "email" }),
+                  " \u2014 never by adding someone to a group. A new admin gets access the first time they sign in."
+                ] }),
+                /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: [
+                  admins.map((a) => {
+                    const removable = !a.pinned && admins.length > 1;
+                    return /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: 8, alignItems: "center", padding: "6px 0", flexWrap: "wrap" }, children: [
+                      /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 160 }, children: a.email }),
+                      a.pinned && /* @__PURE__ */ jsx("span", { style: chip, title: "Set by the API provider \u2014 you can\u2019t remove this one", children: "provider" }),
+                      /* @__PURE__ */ jsx("span", { style: { ...chip, ...a.active ? { color: t.success, borderColor: t.success } : {} }, children: a.active ? "active" : "pending sign-in" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: { ...btn("danger", true), ...removable ? {} : { opacity: 0.4, cursor: "not-allowed" } },
+                          disabled: busy || !removable,
+                          title: a.pinned ? "Provider-set admins can only be removed by the API provider" : admins.length <= 1 ? "A tenant must keep at least one admin" : `Remove ${a.email}`,
+                          onClick: () => act(`rm-admin:${a.email}`, { action: "remove-admin", email: a.email }, reloadAdmins),
+                          children: "Remove"
+                        }
+                      )
+                    ] }, a.email);
+                  }),
+                  admins.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: t.muted, fontSize: 13, padding: "6px 0" }, children: "No admins yet." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      style: { ...inputStyle, flex: 1 },
+                      type: "email",
+                      placeholder: "Add an admin by email",
+                      value: newAdmin,
+                      onChange: (e) => setNewAdmin(e.target.value),
+                      onKeyDown: (e) => e.key === "Enter" && addAdmin(),
+                      "aria-label": "New admin email"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("button", { style: btn("primary", true), disabled: busy || !newAdmin.trim(), onClick: addAdmin, children: "Add admin" })
+                ] })
+              ] })
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: [
                 detail.members.map((m) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: 8, alignItems: "center", padding: "6px 0", flexWrap: "wrap" }, children: [
                   /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 140 }, children: userLabel(m) }),
                   m.source_label && /* @__PURE__ */ jsx("span", { style: chip, children: m.source_label }),
-                  sealed ? /* @__PURE__ */ jsx("span", { style: { ...chip, fontWeight: 600 }, children: "admin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxs(
-                      "select",
-                      {
-                        style: selectStyle,
-                        value: m.role,
-                        disabled: busy,
-                        "aria-label": `Role of ${userLabel(m)}`,
-                        onChange: (e) => act(`role:${m.abz_sub}`, { action: "change-role", groupId: g.id, abzSub: m.abz_sub, role: e.target.value }, () => loadDetail(g.id)),
-                        children: [
-                          /* @__PURE__ */ jsx("option", { value: "member", children: "member" }),
-                          /* @__PURE__ */ jsx("option", { value: "admin", children: "group admin" })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        style: btn("danger", true),
-                        disabled: busy,
-                        "aria-label": `Remove ${userLabel(m)} from ${g.name}`,
-                        onClick: () => act(`rm:${m.abz_sub}`, { action: "remove-member", groupId: g.id, abzSub: m.abz_sub }, () => loadDetail(g.id)),
-                        children: "Remove"
-                      }
-                    )
-                  ] })
-                ] }, m.abz_sub)),
-                detail.members.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: t.muted, fontSize: 13, padding: "6px 0" }, children: "No members yet." })
-              ] }),
-              sealed ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: t.muted, marginTop: 8 }, children: "Workspace admins are granted by email on the provider\u2019s admin list \u2014 membership can\u2019t be edited here." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ jsxs(
-                    "select",
-                    {
-                      style: { ...selectStyle, flex: 1, minWidth: 160 },
-                      value: addSel,
-                      disabled: busy,
-                      "aria-label": "User to add",
-                      onChange: (e) => setAddSel(e.target.value),
-                      children: [
-                        /* @__PURE__ */ jsx("option", { value: "", children: "Add a user\u2026" }),
-                        users.filter((u) => !detail.members.some((m) => m.abz_sub === u.abz_sub)).map((u) => /* @__PURE__ */ jsx("option", { value: u.abz_sub, children: userLabel(u) }, u.abz_sub))
-                      ]
-                    }
-                  ),
                   /* @__PURE__ */ jsxs(
                     "select",
                     {
                       style: selectStyle,
-                      value: addRole,
+                      value: m.role,
                       disabled: busy,
-                      "aria-label": "Role for the new member",
-                      onChange: (e) => setAddRole(e.target.value),
+                      "aria-label": `Role of ${userLabel(m)}`,
+                      onChange: (e) => act(`role:${m.abz_sub}`, { action: "change-role", groupId: g.id, abzSub: m.abz_sub, role: e.target.value }, () => loadDetail(g.id)),
                       children: [
                         /* @__PURE__ */ jsx("option", { value: "member", children: "member" }),
                         /* @__PURE__ */ jsx("option", { value: "admin", children: "group admin" })
@@ -335,184 +523,129 @@ var UsersGroupsWidget = React.forwardRef(function UsersGroupsWidget2({ endpoint
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: btn("primary", true),
-                      disabled: busy || !addSel,
-                      onClick: () => act("add-member", { action: "add-member", groupId: g.id, abzSub: addSel, role: addRole }, () => {
-                        setAddSel("");
-                        return loadDetail(g.id);
-                      }),
-                      children: "Add"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 12, flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: t.muted }, children: "Subgroups:" }),
-                  detail.subgroups.map((s) => /* @__PURE__ */ jsxs("span", { style: { ...chip, display: "inline-flex", gap: 6, alignItems: "center" }, children: [
-                    s.name,
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        style: { background: "none", border: "none", cursor: "pointer", color: t.danger, fontSize: 12, padding: 0 },
-                        disabled: busy,
-                        "aria-label": `Un-nest ${s.name} from ${g.name}`,
-                        onClick: () => act("unnest", { action: "remove-subgroup", groupId: g.id, childGroupId: s.id }, () => loadDetail(g.id)),
-                        children: "\u2715"
-                      }
-                    )
-                  ] }, s.id)),
-                  detail.subgroups.length === 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: t.muted }, children: "none" }),
-                  /* @__PURE__ */ jsxs(
-                    "select",
-                    {
-                      style: selectStyle,
-                      value: nestSel,
+                      style: btn("danger", true),
                       disabled: busy,
-                      "aria-label": "Group to nest",
-                      onChange: (e) => setNestSel(e.target.value),
-                      children: [
-                        /* @__PURE__ */ jsx("option", { value: "", children: "Nest a group\u2026" }),
-                        groups.filter((x) => x.id !== g.id && x.name !== SEALED && !detail.subgroups.some((s) => s.id === x.id)).map((x) => /* @__PURE__ */ jsx("option", { value: x.id, children: x.name }, x.id))
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: btn("ghost", true),
-                      disabled: busy || !nestSel,
-                      onClick: () => act("nest", { action: "add-subgroup", groupId: g.id, childGroupId: nestSel }, () => {
-                        setNestSel("");
-                        return loadDetail(g.id);
-                      }),
-                      children: "Nest"
+                      "aria-label": `Remove ${userLabel(m)} from ${g.name}`,
+                      onClick: () => act(`rm:${m.abz_sub}`, { action: "remove-member", groupId: g.id, abzSub: m.abz_sub }, () => loadDetail(g.id)),
+                      children: "Remove"
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsx("div", { style: { marginTop: 12, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: confirmDelete === g.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: t.text }, children: [
-                    "Delete \u201C",
-                    g.name,
-                    "\u201D? Members lose this group everywhere it\u2019s used. This can\u2019t be undone."
-                  ] }),
+                ] }, m.abz_sub)),
+                detail.members.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: t.muted, fontSize: 13, padding: "6px 0" }, children: "No members yet." })
+              ] }),
+              typeof detail.member_count === "number" && detail.members.length < detail.member_count && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  style: { ...btn("ghost", true), marginTop: 6 },
+                  disabled: busy,
+                  onClick: () => loadMoreMembers(g.id, detail.members.length),
+                  children: [
+                    "Load more (",
+                    detail.members.length,
+                    " of ",
+                    detail.member_count,
+                    ")"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap", alignItems: "flex-start" }, children: [
+                /* @__PURE__ */ jsx(
+                  Typeahead,
+                  {
+                    placeholder: "Search users to add\u2026",
+                    disabled: busy,
+                    s: { input: inputStyle, surface: t.surface, border: t.border, muted: t.muted, text: t.text },
+                    search: async (q) => {
+                      const d = await call({ action: "search-users", q, limit: 20 });
+                      return (d.users ?? []).filter((u) => !detail.members.some((m) => m.abz_sub === u.abz_sub));
+                    },
+                    itemKey: (u) => u.abz_sub,
+                    itemLabel: (u) => userLabel(u),
+                    onPick: (u) => act(`add-member:${u.abz_sub}`, { action: "add-member", groupId: g.id, abzSub: u.abz_sub, role: addRole }, () => loadDetail(g.id))
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    style: selectStyle,
+                    value: addRole,
+                    disabled: busy,
+                    "aria-label": "Role for the new member",
+                    onChange: (e) => setAddRole(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "member", children: "member" }),
+                      /* @__PURE__ */ jsx("option", { value: "admin", children: "group admin" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 12, flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: t.muted }, children: "Subgroups:" }),
+                detail.subgroups.map((s) => /* @__PURE__ */ jsxs("span", { style: { ...chip, display: "inline-flex", gap: 6, alignItems: "center" }, children: [
+                  s.name,
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: btn("danger", true),
+                      style: { background: "none", border: "none", cursor: "pointer", color: t.danger, fontSize: 12, padding: 0 },
                       disabled: busy,
-                      onClick: () => {
-                        setConfirmDelete(null);
-                        act("del", { action: "delete-group", groupId: g.id }, () => {
-                          setOpen(null);
-                          setDetail(null);
-                        });
-                      },
-                      children: "Delete group"
+                      "aria-label": `Un-nest ${s.name} from ${g.name}`,
+                      onClick: () => act("unnest", { action: "remove-subgroup", groupId: g.id, childGroupId: s.id }, () => loadDetail(g.id)),
+                      children: "\u2715"
                     }
-                  ),
-                  /* @__PURE__ */ jsx("button", { style: btn("ghost", true), onClick: () => setConfirmDelete(null), children: "Cancel" })
-                ] }) : /* @__PURE__ */ jsx("button", { style: { ...btn("ghost", true), color: t.danger }, disabled: busy, onClick: () => setConfirmDelete(g.id), children: "Delete group" }) })
-              ] })
-            ] })
-          ] })
-        ] }, g.id);
-      }) }),
-      access === "ok" && groups !== null && /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${t.border}` }, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setShowAdmins((v) => !v),
-            "aria-expanded": showAdmins,
-            style: { display: "flex", width: "100%", gap: 10, alignItems: "center", padding: "12px 16px", background: "transparent", border: "none", cursor: "pointer", color: t.text, fontFamily: "inherit", fontSize: 13, textAlign: "left" },
-            children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: t.muted, fontSize: 11 }, children: showAdmins ? "\u25BE" : "\u25B8" }),
-              /* @__PURE__ */ jsx("strong", { style: { flex: 1 }, children: "Admins" }),
-              /* @__PURE__ */ jsx("span", { style: chip, children: admins.length })
-            ]
-          }
-        ),
-        showAdmins && /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px 14px 34px" }, children: [
-          /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: [
-            admins.map((a) => {
-              const removable = !a.pinned && admins.length > 1;
-              return /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: 8, alignItems: "center", padding: "6px 0", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 160 }, children: a.email }),
-                a.pinned && /* @__PURE__ */ jsx("span", { style: chip, title: "Set by the API provider \u2014 you can\u2019t remove this one", children: "provider" }),
-                /* @__PURE__ */ jsx("span", { style: { ...chip, ...a.active ? { color: t.success, borderColor: t.success } : {} }, children: a.active ? "active" : "pending sign-in" }),
+                  )
+                ] }, s.id)),
+                detail.subgroups.length === 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: t.muted }, children: "none" }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Typeahead,
                   {
-                    style: { ...btn("danger", true), ...removable ? {} : { opacity: 0.4, cursor: "not-allowed" } },
-                    disabled: busy || !removable,
-                    title: a.pinned ? "Provider-set admins can only be removed by the API provider" : admins.length <= 1 ? "A tenant must keep at least one admin" : `Remove ${a.email} as an admin`,
-                    onClick: () => act(`rm-admin:${a.email}`, { action: "remove-admin", email: a.email }),
-                    children: "Remove"
+                    placeholder: "Nest a group\u2026",
+                    disabled: busy,
+                    s: { input: inputStyle, surface: t.surface, border: t.border, muted: t.muted, text: t.text },
+                    search: async (q) => {
+                      const d = await call({ action: "list-groups", q, offset: 0 });
+                      return (d.groups ?? []).filter((x) => x.id !== g.id && x.name !== SEALED && !detail.subgroups.some((s) => s.id === x.id));
+                    },
+                    itemKey: (x) => x.id,
+                    itemLabel: (x) => x.name,
+                    onPick: (x) => act(`nest:${x.id}`, { action: "add-subgroup", groupId: g.id, childGroupId: x.id }, () => loadDetail(g.id))
                   }
                 )
-              ] }, a.email);
-            }),
-            admins.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: t.muted, fontSize: 13, padding: "6px 0" }, children: "No admins yet." })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                style: { ...inputStyle, flex: 1 },
-                type: "email",
-                placeholder: "Add an admin by email",
-                value: newAdmin,
-                onChange: (e) => setNewAdmin(e.target.value),
-                onKeyDown: (e) => e.key === "Enter" && addAdmin(),
-                "aria-label": "New admin email"
-              }
-            ),
-            /* @__PURE__ */ jsx("button", { style: btn("primary", true), disabled: busy || !newAdmin.trim(), onClick: addAdmin, children: "Add admin" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: t.muted, marginTop: 8 }, children: "A new admin gets access the first time they sign in. Admins are granted by email \u2014 never by adding someone to a group." })
-        ] })
-      ] }),
-      access === "ok" && groups !== null && /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${t.border}` }, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setShowTraffic((v) => !v),
-            "aria-expanded": showTraffic,
-            style: { display: "flex", width: "100%", gap: 10, alignItems: "center", padding: "12px 16px", background: "transparent", border: "none", cursor: "pointer", color: t.text, fontFamily: "inherit", fontSize: 13, textAlign: "left" },
-            children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: t.muted, fontSize: 11 }, children: showTraffic ? "\u25BE" : "\u25B8" }),
-              /* @__PURE__ */ jsx("strong", { style: { flex: 1 }, children: "Seen in traffic" }),
-              /* @__PURE__ */ jsxs("span", { style: chip, children: [
-                observed.filter((o) => !o.provisioned).length,
-                " new"
-              ] })
-            ]
-          }
-        ),
-        showTraffic && /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: "0 16px 14px 34px" }, children: [
-          observed.length === 0 && /* @__PURE__ */ jsx("li", { style: { color: t.muted, fontSize: 13 }, children: "No identities observed yet \u2014 they appear here after their first API call." }),
-          observed.map((o) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: 8, alignItems: "center", padding: "6px 0", flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 140, fontFamily: t.monoFontFamily, fontSize: 13 }, children: o.email || o.abz_sub }),
-            o.source_label && /* @__PURE__ */ jsx("span", { style: chip, children: o.source_label }),
-            o.last_seen && /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: t.muted }, children: [
-              "seen ",
-              relTime(o.last_seen),
-              o.seen_count ? ` \xB7 ${o.seen_count}\xD7` : ""
-            ] }),
-            o.provisioned ? /* @__PURE__ */ jsxs("span", { style: { ...chip, color: t.success, borderColor: t.success }, children: [
-              "user",
-              o.groups?.length ? ` \xB7 ${o.groups.join(", ")}` : ""
-            ] }) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                style: btn("primary", true),
-                disabled: busy,
-                "aria-label": `Add ${o.email || o.abz_sub} as a user`,
-                onClick: () => act("provision", { action: "provision-observed", consumerUserId: o.abz_sub, email: o.email ?? void 0 }),
-                children: "Add as user"
-              }
-            )
-          ] }, o.abz_sub))
-        ] })
-      ] }),
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { marginTop: 12, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: confirmDelete === g.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: t.text }, children: [
+                  "Delete \u201C",
+                  g.name,
+                  "\u201D? Members lose this group everywhere it\u2019s used. This can\u2019t be undone."
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: btn("danger", true),
+                    disabled: busy,
+                    onClick: () => {
+                      setConfirmDelete(null);
+                      act("del", { action: "delete-group", groupId: g.id }, () => {
+                        setOpen(null);
+                        setDetail(null);
+                        return searchGroups(groupQuery);
+                      });
+                    },
+                    children: "Delete group"
+                  }
+                ),
+                /* @__PURE__ */ jsx("button", { style: btn("ghost", true), onClick: () => setConfirmDelete(null), children: "Cancel" })
+              ] }) : /* @__PURE__ */ jsx("button", { style: { ...btn("ghost", true), color: t.danger }, disabled: busy, onClick: () => setConfirmDelete(g.id), children: "Delete group" }) })
+            ] }) })
+          ] })
+        ] }, g.id);
+      }) }),
+      access === "ok" && groups !== null && groups.length > 0 && groups.length < groupTotal && /* @__PURE__ */ jsx("div", { style: { padding: "10px 16px", borderTop: `1px solid ${t.border}` }, children: /* @__PURE__ */ jsxs("button", { style: btn("ghost", true), disabled: busy, onClick: loadMoreGroups, children: [
+        "Load more groups (",
+        groups.length,
+        " of ",
+        groupTotal,
+        ")"
+      ] }) }),
       err && /* @__PURE__ */ jsx("div", { role: "alert", style: { padding: "0 16px 14px", fontSize: 12, color: t.danger }, children: err })
     ] })
   ] });