portal-mojo 0.2.15 → 0.2.17

package/docs/DetailView.md

@@ -53,6 +53,11 @@ of the toolkit it must render inside the app's `QueryClientProvider`
 - `sections` mixes `{key, label, icon, render, permissions?}` entries with
   `{divider: 'Label'}` side-labels.
 - `initialSection` picks the starting rail entry.
+- `avatarUrl` shows an image in the header avatar (falls back to
+  `avatarName` initials / `icon` when absent or the image fails to load);
+  pass a pre-vetted URL (`safePreviewUrl`) kept in component state, never a
+  Query cache. `onAvatarClick` turns the avatar into a button with a camera
+  hover overlay (`avatarLabel` sets its label/tooltip).
 
 ## Page embedding — `onClose` is optional
 
@@ -172,6 +177,7 @@ permission behavior, not misconfig.
 | `Eyebrow` | small uppercase section heading inside a panel |
 | `FlatRow` | label + value row; `action` adds the edit pencil (`actionIcon` to override, e.g. `bi-plus-lg` for empty values) |
 | `SecurityItem` | icon + title + description row with a trailing slot (badge/button) |
+| `MetricCard compact` | dense one-line KPI card for detail-view snapshot rows (value never wraps; `title` for a tooltip such as the full timestamp) |
 
 Pencil actions open `formModal` with current values as `initial`. Current-record
 operations live in the header menu or focused dialogs; content rails never

package/docs/admin-identity-users.md

@@ -25,8 +25,13 @@ reason per batch; rows already in the target state are ineligible.
 
 The detail preserves all 14 sections: Overview, Profile, Personal, Security,
 OAuth, Groups, Sys Perms, conditional App Perms, API Keys, Devices, Logins,
-Audit, Notifications, and Metadata. Permission sections are labeled **System
-permissions** and **Product permissions** in the UI. Consuming apps install
+Audit, Notifications, and Metadata. Permission sections are labeled **Sys
+Perms** and **Product permissions** in the rail. Sys Perms opens with every
+granted key (catalog keys neutral, app-registered accent, out-of-catalog
+amber), then **Custom permissions**: out-of-catalog keys with remove (armed)
+and a grant input, then the catalog tabs. Remove sends
+`{permissions: {key: false}}` — django-mojo `User.set_permissions` deletes a
+key on a falsy value (the mock matches). Consuming apps install
 their product tabs with `registerFormTabs(USER_APP_PERMS_TABSET, tabs)`; the
 section stays absent when none are registered. User grants can cover multiple
 groups; use a Member product permission for a single group.
@@ -77,6 +82,10 @@ per endpoint, so `UserDetail` and the fleet-wide tables share one cache.
 
 ## Avatar uploads
 
+The header avatar shows the attached image (thumbnail fetched from
+`/api/fileman/file/<id>` into component state) and, for admins, is a button
+that opens the same manager as the kebab's "Manage avatar…".
+
 Manage avatar uses the shared `ImageField`: it uploads into the acting admin's
 personal File scope, then saves that completed positive numeric File id (or
 null to clear) on the target User. This matches django-mojo #1488's

package/docs/admin-members.md

@@ -116,6 +116,15 @@ new grant semantics: the backend still decides what each key authorizes.
 
 ## Composition
 
+`GroupMembersPanel` and `MemberDetail` gate writes on the system-pinned
+constants by default. A tenant composition that renders them for the active
+group passes the group-local gates instead (`MEMBER_GROUP_SAVE_PERMISSIONS`,
+`MEMBER_GROUP_INVITE_PERMISSIONS`) through `savePermissions`,
+`invitePermissions` and `directoryPermissions`; the server still decides. A
+product may also pass `roles` (`AdmissionRole[]`): the invite form then shows a
+role select, posts that role's grants with the invitation, and records the role
+label as `metadata.role`.
+
 `MEMBERS_ADMIN_SECTION` is root-relative and dual-mounts as `/members` in the
 standalone Admin and `/system/members` when embedded. It never consumes active
 group context. `GroupMembersPanel` is the reusable Group-detail composition;
@@ -126,3 +135,31 @@ Member product tabs only render `permissions.<grant>` fields whose grant is
 registered through `registerMemberPermissions()` and editable. System/derived
 grants, unregistered names and unrelated fields (such as `group` or `user`)
 are ignored; tabs with no valid fields do not appear.
+
+## Operation lifetime
+
+Member admission captures the initiating authentication session and active group.
+The selected group remains fixed throughout its form and the optional role-label
+write. An account/group change, even switching away and back, permanently ends
+the operation's client continuations. Ordinary JWT renewal keeps the session.
+The no-oracle success message is still shown for an accepted invitation with no
+member row, and a refused display-label write does not undo its accepted grants.
+
+`openMemberAdmissionDialog({ signal })` accepts the initiating panel's lifetime.
+`GroupMembersPanel`, global `MembersPage` and the Group detail admission action
+supply it automatically. Custom hosts should abort their controller when they
+unmount or change the record/authority used to open the dialog. Forms remain open
+through the request and disable repeated submission and Escape/backdrop dismissal
+while pending. Owner disposal always closes them. A request already received by
+the server is not cancelled or rolled back by closing its view.
+
+`MemberDetail` also accepts `ownerSignal` for a fixed-group host. Its activation,
+role, resend and permission changes bind the final pre-send check, returned row,
+cache invalidation and notices to the initiating detail scope. Disposed outcomes
+cannot populate a later account's cache. Live successful saves still update the
+shared member row immediately and invalidate the member lists. Errors keep the
+saved row and surface the server refusal; autosaved fields revert normally.
+
+The browser fixture sends no real invitations: start
+`node scripts/member-lifecycle-server.mjs`, then run
+`uv run --with playwright python scripts/verify-member-lifecycle.py`.

package/docs/admin-modals.md

@@ -31,7 +31,9 @@ fails; successful DetailView bodies supply the normal header close.
 Already-aborted signals resolve null without adding an entry. Later abort removes
 only that entry immediately and resolves null, even before `ModalHost` mounts;
 normal close removes the listener. Owner disposal bypasses `canDismiss` because
-it ends the data scope. An owner must also abort its controller on unmount.
+it ends the data scope. An owner must also abort its controller on unmount. `confirmGuardrail({ signal })`
+passes the same lifetime to its underlying modal, so an awaiting confirmation
+closes with its record or authority.
 
 ## Executable inventory
 

package/docs/admin-storage.md

@@ -60,9 +60,26 @@ closure, refetches authoritatively, and compares requested owner FKs.
 Creation supports runtime backends `file` and `s3`, explicitly starts private,
 and requires an authorized group/user owner unless the caller is superuser and
 chooses System. Supported payload actions are `test_connection`, `check_cors`,
-`fix_cors`, and `clone`; inner `{status:false}` rejects. CORS is S3-only.
+`fix_cors`, `clone`, and the CDN trio `enable_cdn`, `check_cdn`, `disable_cdn`
+(django-mojo #8250); inner `{status:false}` rejects. CORS and CDN are S3-only.
 FileManager DELETE and `check_public_access` are absent.
 
+**CDN delivery.** The manager graph carries a read-only `cdn` object
+(`projectCdn` keeps only its named keys; `{enabled: false}` otherwise), shown
+as the Overview's CDN row: not enabled, or the CDN address with "public
+links" or "signed links" and whether the distribution is still deploying.
+The detail menu offers **Check CDN**, **Enable CDN…** and **Disable CDN…**
+to every storage manager (`manage_files` / `files`; django-mojo enforces the
+same global grant on the actions), the two mutating ones behind a confirm
+that says what changes in AWS (enable provisions CloudFront for the whole
+bucket under the deployment's identity and creates nothing twice; disable
+reverts every manager on the bucket to S3 links and leaves AWS alone).
+Results render as a findings list — status badge, code, message, remedy —
+through `cdnFindings`, never raw JSON. The mock serves the field (the
+"Public media" backend starts enabled) and the three actions, with a
+MANUAL KMS finding on the private uploads backend so the remedy rendering
+is exercised.
+
 ## Files and capability URLs
 
 `FileModel` forces the list graph and normal saves to `filename`, `is_public`,

package/docs/forms.md

@@ -106,6 +106,7 @@ if (!data) return;   // cancelled → null
     onSaved={({ changes, fields, row }) => …}
     onSaveError={({ changes, fields, error }) => …}
     beforeSave={({ changes, names, row }) => …}   // once per batch, BEFORE the POST (below)
+    isCurrent={() => ownerScope.current()}      // optional owner lifetime fence
     onPendingChange={(uploading) => setDetailDismissLocked(uploading)}
 />
 ```
@@ -176,6 +177,21 @@ contract is pinned by `npm run verify:form-autosave`.
    Server normalization is visible: save `555 010 0142`, the field comes back
    `+15550100142`.
 
+### Owner lifetime
+
+`isCurrent?: () => boolean` is an optional, synchronous lifetime predicate for
+forms whose account, group or owning dialog can end while a save is pending.
+Returning `false` prevents the batch before and after its asynchronous
+`beforeSave` gate, and suppresses late success/error callbacks and autosave
+feedback. Capture a one-way scope: leaving and returning must not revive the
+old operation. Omitting it preserves the existing autosave behavior.
+
+This guard covers the form's continuations, not a model's own mutation effects.
+An owner-scoped model must also check its scope at the transport's final
+`beforeSend` boundary and before writing response data to a shared cache.
+MemberDetail provides that guarded mutation boundary. Already-sent server writes
+are not rolled back when the view closes.
+
 ### `file` / `image` relations
 
 Both registry bindings use the exported controlled `FileField`/`ImageField`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.15",
+    "version": "0.2.17",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/admin/identity/groups/GroupDetail.tsx

@@ -37,6 +37,7 @@ import {
     MemberModel, openMemberAdmissionDialog,
 } from '../members';
 import { LogModel } from '../../monitoring';
+import { useMemberScope } from '../members/member-scope';
 import {
     GROUP_DESTRUCTIVE_PERMS, GROUP_MANAGE_PERMS,
     GroupModel, type GroupRow,
@@ -93,6 +94,8 @@ export function GroupDetail({ id, onClose }: { id: number; onClose: () => void }
     const { can: canCreateMember } = useCan(MEMBER_SAVE_PERMISSIONS);
     const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
 
+    const admissionScope = useMemberScope(`${id}:${canInviteMember}:${canCreateMember}:${canReadUsers}`);
+
     // Rail count badges (source setBadge wiring, as controlled props). The
     // member/apikey peeks share Overview's keys and dedupe; the gated ones
     // hold off until the caller could actually open the section.
@@ -148,6 +151,7 @@ export function GroupDetail({ id, onClose }: { id: number; onClose: () => void }
                     canCreate: canCreateMember,
                     canReadUsers,
                     queryClient: qc,
+                    signal: admissionScope.current?.signal,
                 });
             },
         },

package/src/admin/identity/groups/group-sections/OverviewSection.tsx

@@ -52,11 +52,11 @@ export function OverviewSection({ group, openGroup, canViewCredentials, canViewA
 
     return (
         <>
-            <div className="grid gap-3 grid-cols-2 xl:grid-cols-4" style={{ marginBottom: 14 }}>
-                <MetricCard label="Members" value={memberCount} />
-                <MetricCard label="Sub-groups" value={subs ? subCount : '—'} />
-                <MetricCard label="API keys" value={canViewCredentials ? (keyPeek?.count ?? '—') : 'Unavailable'} />
-                <MetricCard label="Last activity" value={fmt.relative(group.last_activity, '—')} />
+            <div className="grid gap-2 mb-4 grid-cols-[repeat(auto-fit,minmax(7.5rem,1fr))]">
+                <MetricCard compact label="Members" value={memberCount} />
+                <MetricCard compact label="Sub-groups" value={subs ? subCount : '—'} />
+                <MetricCard compact label="API keys" value={canViewCredentials ? (keyPeek?.count ?? '—') : 'Unavailable'} />
+                <MetricCard compact label="Last activity" value={fmt.relative(group.last_activity, '—')} title={group.last_activity ? fmt.datetime(group.last_activity) : undefined} />
             </div>
 
             <Eyebrow>This group</Eyebrow>

package/src/admin/identity/members/GroupMembersPanel.tsx

@@ -3,7 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useCan, type Params } from '../../../client/runtime';
 import { Badge, Eyebrow, SecurityItem, fmt, modal } from '../../../ui';
 import { MemberDetail, type MemberNavigationCallbacks } from './MemberDetail';
-import { openMemberAdmissionDialog, type AdmissionGroup, type AdmissionMode } from './member-flows';
+import { openMemberAdmissionDialog, type AdmissionGroup, type AdmissionMode, type AdmissionRole } from './member-flows';
+import { useMemberScope } from './member-scope';
+import type { PermSpec } from '../../../client/runtime';
 import {
     MEMBER_GROUP_READ_PERMISSIONS,
     MEMBER_INVITE_PERMISSIONS,
@@ -59,28 +61,42 @@ function MemberItem({ member, onOpen }: { member: MemberRow; onOpen: () => void
 
 export interface GroupMembersPanelProps extends MemberNavigationCallbacks {
     group: AdmissionGroup;
+    /** Global Admin gates are system-pinned; a tenant composition passes its group-local gates. */
+    invitePermissions?: PermSpec;
+    savePermissions?: PermSpec;
+    directoryPermissions?: PermSpec;
+    /** Optional fixed roles offered on invite; each sets grants and the role label. */
+    roles?: AdmissionRole[];
 }
 
-export function GroupMembersPanel({ group, onNavigateUser, onNavigateGroup }: GroupMembersPanelProps) {
+export function GroupMembersPanel({
+    group, onNavigateUser, onNavigateGroup, roles,
+    invitePermissions = MEMBER_INVITE_PERMISSIONS,
+    savePermissions = MEMBER_SAVE_PERMISSIONS,
+    directoryPermissions = MEMBER_USER_DIRECTORY_PERMISSIONS,
+}: GroupMembersPanelProps) {
     const qc = useQueryClient();
     const [search, setSearch] = useState('');
     const [status, setStatus] = useState<StatusFilter>('active');
     const [start, setStart] = useState(0);
     useEffect(() => setStart(0), [search, status, group.id]);
     const query = MemberModel.useList(paramsFor(group.id, search, status, start));
-    const { can: canInvite } = useCan(MEMBER_INVITE_PERMISSIONS);
-    const { can: canCreate } = useCan(MEMBER_SAVE_PERMISSIONS);
-    const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
+    const { can: canInvite } = useCan(invitePermissions);
+    const { can: canCreate } = useCan(savePermissions);
+    const { can: canReadUsers } = useCan(directoryPermissions);
+    const scope = useMemberScope(`${group.id}:${canInvite}:${canCreate}:${canReadUsers}`);
     const members = query.data?.rows ?? [];
     const count = query.data?.count ?? 0;
 
     const admit = (initialMode: AdmissionMode) => openMemberAdmissionDialog({
         group,
         initialMode,
+        roles,
         canInvite,
         canCreate,
         canReadUsers,
         queryClient: qc,
+        signal: scope.current?.signal,
     });
     const openMember = (member: MemberRow) => {
         void MemberModel.fetchOne(qc, member.id).catch(() => {});
@@ -89,6 +105,8 @@ export function GroupMembersPanel({ group, onNavigateUser, onNavigateGroup }: Gr
                 id={member.id}
                 onClose={() => close(null)}
                 readPermissions={MEMBER_GROUP_READ_PERMISSIONS}
+                savePermissions={savePermissions}
+                ownerSignal={scope.current?.signal}
                 onNavigateUser={onNavigateUser}
                 onNavigateGroup={onNavigateGroup}
             />

package/src/admin/identity/members/MemberDetail.tsx

@@ -1,9 +1,12 @@
-import { useSyncExternalStore, type ReactNode } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useSyncExternalStore, type ReactNode } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCan, type PermSpec } from '../../../client/runtime';
+import { mojoCall, withFreshAuth, type SaveVars } from '../../../client/runtime';
+import { saveMemberInScope, useMemberScope } from './member-scope';
+import { memberForm } from './member-dialog';
 import {
     Badge, DetailView, Eyebrow, FlatRow, FormView, JsonBlock, MetricCard,
-    ModelTable, confirmGuardrail, fmt, formModal, toast, getFormTabs, formTabsVersion, subscribeFormTabs,
+    ModelTable, confirmGuardrail, fmt, toast, getFormTabs, formTabsVersion, subscribeFormTabs,
     type Column, type DetailMenuEntry,
 } from '../../../ui';
 import { LOGS_ADMIN_PERMISSIONS, LogModel, type LogRow } from '../../monitoring';
@@ -33,6 +36,10 @@ export interface MemberDetailProps extends MemberNavigationCallbacks {
     onClose: () => void;
     /** Global Admin is system-pinned; fixed-group compositions pass their read gate. */
     readPermissions?: PermSpec;
+    /** Same for writes: a fixed-group composition passes the group-local save gate. */
+    savePermissions?: PermSpec;
+    /** Fixed-group owner lifetime; closing/changing its panel disposes this detail. */
+    ownerSignal?: AbortSignal;
 }
 
 function AuditTable({ memberId }: { memberId: number }) {
@@ -74,7 +81,7 @@ const ESCALATING_GRANTS: Record<string, { label: string; why: ReactNode }> = {
 };
 
 /** beforeSave gate: stops only when an escalating grant flips ON. */
-function confirmGrantEscalation(member: MemberRow, changes: Record<string, unknown>): Promise<boolean> | true {
+function confirmGrantEscalation(member: MemberRow, changes: Record<string, unknown>, signal?: AbortSignal): Promise<boolean> | true {
     const perms = changes.permissions;
     if (!perms || typeof perms !== 'object') return true;
     const granting = Object.keys(ESCALATING_GRANTS).filter((key) => (perms as Record<string, unknown>)[key] === true);
@@ -83,6 +90,7 @@ function confirmGrantEscalation(member: MemberRow, changes: Record<string, unkno
     const group = member.group?.name || 'this group';
     const labels = granting.map((key) => ESCALATING_GRANTS[key]!.label).join(' + ');
     return confirmGuardrail({
+        signal,
         title: `Grant ${labels} to ${who}?`,
         effect: <><b>{who}</b> holds <b>{granting.join(' and ')}</b> in <b>{group}</b> the moment this saves — there is no save button and no second step.</>,
         why: granting.map((key) => ESCALATING_GRANTS[key]!.why),
@@ -118,13 +126,46 @@ function GrantSummary({ member }: { member: MemberRow }) {
 export function MemberDetail({
     id, onClose, onNavigateUser, onNavigateGroup,
     readPermissions = MEMBER_READ_PERMISSIONS,
+    savePermissions = MEMBER_SAVE_PERMISSIONS, ownerSignal,
 }: MemberDetailProps) {
     const qc = useQueryClient();
     const { can: canRead, isLoading: readLoading } = useCan(readPermissions);
     const query = MemberModel.useOne(canRead ? id : null);
-    const save = MemberModel.useSave();
-    const resend = MemberModel.useAction('resend_invite');
-    const { can: canSave } = useCan(MEMBER_SAVE_PERMISSIONS);
+    const { can: canSave } = useCan(savePermissions);
+    const owner = `${id}:${canRead}:${canSave}`;
+    const scope = useMemberScope(owner, onClose);
+    useEffect(() => {
+        if (ownerSignal?.aborted) onClose();
+        ownerSignal?.addEventListener('abort', onClose, { once: true });
+        return () => ownerSignal?.removeEventListener('abort', onClose);
+    }, [ownerSignal, onClose]);
+    const isCurrent = () => scope.current?.owner === owner && scope.current.current() && !ownerSignal?.aborted;
+    // Local mutation boundary: generic model hooks publish unconditionally. A late
+    // member response must never write through into the next account's cache.
+    const guardedModel = useMemo(() => ({
+        useSave() {
+            return useMutation({
+                gcTime: 0,
+                mutationFn: async ({ id: target, changes }: SaveVars) => {
+                    const started = scope.current;
+                    const check = () => {
+                        started?.assert();
+                        if (!started || scope.current !== started || ownerSignal?.aborted)
+                            throw new DOMException('Membership context ended', 'AbortError');
+                    };
+                    const row = await withFreshAuth(() => {
+                        check();
+                        return saveMemberInScope(target, changes, check);
+                    });
+                    check();
+                    qc.setQueryData(MemberModel.keys.one(row.id), row);
+                    void MemberModel.invalidate(qc);
+                    return row;
+                },
+            });
+        },
+    }), [qc, scope, ownerSignal]);
+    const save = guardedModel.useSave();
     useSyncExternalStore(subscribeMemberPermissions, memberPermissionsVersion, memberPermissionsVersion);
     useSyncExternalStore(subscribeFormTabs, formTabsVersion, formTabsVersion);
 
@@ -160,39 +201,50 @@ export function MemberDetail({
     const deploymentOnly = raw.filter((name) => !catalogNames.has(name) && !ignoredMemberGrants(member.permissions).includes(name));
 
     const editRole = async () => {
-        const values = await formModal({
-            title: 'Edit role label',
-            submitText: 'Update label',
-            fields: [{
-                name: 'role', type: 'text', label: 'Role label',
-                help: 'Presentation only. This label does not grant authorization.',
-            }],
+        const started = scope.current;
+        if (!canSave || !isCurrent() || !started) return;
+        await memberForm(started, {
+            title: 'Edit role label', submitText: 'Update label',
+            fields: [{ name: 'role', type: 'text', label: 'Role label',
+                help: 'Presentation only. This label does not grant authorization.' }],
             initial: { role },
+        }, async (values, current) => {
+            if (!current() || scope.current !== started) return null;
+            const result = await save.mutateAsync({ id: member.id, changes: { metadata: { role: String(values.role ?? '').trim() } } });
+            if (current()) toast.success('Role label updated');
+            return result;
         });
-        if (!values) return;
-        try {
-            await save.mutateAsync({ id: member.id, changes: { metadata: { role: String(values.role ?? '').trim() } } });
-            toast.success('Role label updated');
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Role update failed');
-        }
     };
 
     const setActive = async (next: boolean) => {
+        const started = scope.current;
+        if (!canSave || !isCurrent()) return;
         try {
             await save.mutateAsync({ id: member.id, changes: { is_active: next } });
-            toast.success(next ? 'Membership activated' : 'Membership deactivated');
+            if (started?.current() && scope.current === started)
+                toast.success(next ? 'Membership activated' : 'Membership deactivated');
         } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Membership update failed');
+            if (started?.current() && scope.current === started)
+                toast.error(error instanceof Error ? error.message : 'Membership update failed');
         }
     };
 
     const resendInvite = async () => {
+        const started = scope.current;
+        if (!canSave || !isCurrent() || !started) return;
         try {
-            await resend.mutateAsync({ id: member.id });
+            await withFreshAuth(() => mojoCall(`${MemberModel.endpoint}/${member.id}`, {
+                method: 'POST', body: { resend_invite: {} }, unscoped: true, beforeSend: () => {
+                    started.assert();
+                    if (ownerSignal?.aborted) throw new DOMException('Membership context ended', 'AbortError');
+                },
+            }));
+            if (!started.current() || scope.current !== started) return;
             toast.success('Invitation resent');
+            void MemberModel.invalidate(qc);
         } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Invitation resend failed');
+            if (started.current() && scope.current === started)
+                toast.error(error instanceof Error ? error.message : 'Invitation resend failed');
         }
     };
 
@@ -200,13 +252,13 @@ export function MemberDetail({
         ...(onNavigateUser && member.user ? [{ label: 'View user', icon: 'bi-person', onSelect: () => onNavigateUser(member.user!.id) }] : []),
         ...(onNavigateGroup && member.group ? [{ label: 'View group', icon: 'bi-people', onSelect: () => onNavigateGroup(member.group!.id) }] : []),
         { divider: true as const },
-        { label: 'Edit role label', icon: 'bi-person-badge', permissions: MEMBER_SAVE_PERMISSIONS, onSelect: () => { void editRole(); } },
-        { label: 'Resend invitation', icon: 'bi-envelope-arrow-up', permissions: MEMBER_SAVE_PERMISSIONS, onSelect: () => { void resendInvite(); } },
+        { label: 'Edit role label', icon: 'bi-person-badge', permissions: savePermissions, onSelect: () => { void editRole(); } },
+        { label: 'Resend invitation', icon: 'bi-envelope-arrow-up', permissions: savePermissions, onSelect: () => { void resendInvite(); } },
         {
             label: member.is_active ? 'Deactivate membership' : 'Activate membership',
             icon: member.is_active ? 'bi-toggle-off' : 'bi-toggle-on',
             danger: member.is_active,
-            permissions: MEMBER_SAVE_PERMISSIONS,
+            permissions: savePermissions,
             onSelect: () => { void setActive(!member.is_active); },
         },
     ];
@@ -222,7 +274,7 @@ export function MemberDetail({
                 { icon: 'bi-person-badge', text: role, tone: 'primary' as const },
                 { text: `${effectiveMemberGrants(member.permissions).length} effective grants`, tone: 'muted' as const },
             ]}
-            active={canSave ? { value: member.is_active, onChange: (next) => { void setActive(next); } } : undefined}
+            active={canSave ? { value: member.is_active, disabled: save.isPending, onChange: (next) => { void setActive(next); } } : undefined}
             contextMenu={menu}
             menuContext={member}
             onClose={onClose}
@@ -231,10 +283,10 @@ export function MemberDetail({
                     key: 'Overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
                         <>
                             <div className="detail-kpi-grid">
-                                <MetricCard label="Role label" value={role} />
-                                <MetricCard label="Status" value={member.is_active ? 'Active' : 'Inactive'} />
-                                <MetricCard label="Joined" value={fmt.relative(member.created)} />
-                                <MetricCard label="Effective grants" value={effectiveMemberGrants(member.permissions).length} />
+                                <MetricCard compact label="Role label" value={role} />
+                                <MetricCard compact label="Status" value={member.is_active ? 'Active' : 'Inactive'} />
+                                <MetricCard compact label="Joined" value={fmt.relative(member.created)} />
+                                <MetricCard compact label="Effective grants" value={effectiveMemberGrants(member.permissions).length} />
                             </div>
                             <Eyebrow>This membership</Eyebrow>
                             <FlatRow label="User" action={member.user && onNavigateUser ? () => onNavigateUser(member.user!.id) : undefined} actionTitle="View user">{userLabel}</FlatRow>
@@ -256,11 +308,10 @@ export function MemberDetail({
                             {canSave
                                 ? (
                                     <FormView
-                                        model={MemberModel}
+                                        model={guardedModel} isCurrent={isCurrent}
                                         row={member}
                                         fields={groupFields}
-                                        beforeSave={({ changes }) => confirmGrantEscalation(member, changes)}
-                                        onSaved={() => { void MemberModel.invalidate(qc); }}
+                                        beforeSave={({ changes }) => confirmGrantEscalation(member, changes, scope.current?.signal)}
                                     />
                                 )
                                 : <GrantSummary member={member} />}
@@ -276,9 +327,9 @@ export function MemberDetail({
                             <Eyebrow>Product permissions</Eyebrow>
                             <p className="dim">These grants apply only to this membership’s group. Changes save automatically.</p>
                             {canSave ? (
-                                <FormView model={MemberModel} row={member} tabs={productTabs}
-                                    beforeSave={({ changes }) => confirmGrantEscalation(member, changes)}
-                                    onSaved={() => { void MemberModel.invalidate(qc); }} />
+                                <FormView model={guardedModel} isCurrent={isCurrent} row={member} tabs={productTabs}
+                                    beforeSave={({ changes }) => confirmGrantEscalation(member, changes, scope.current?.signal)}
+                                />
                             ) : <GrantSummary member={member} />}
                         </>
                     ),

package/src/admin/identity/members/MembersPage.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../../ui';
 import { MemberDetail, type MemberNavigationCallbacks } from './MemberDetail';
 import { openMemberAdmissionDialog } from './member-flows';
+import { useMemberScope } from './member-scope';
 import {
     MEMBER_INVITE_PERMISSIONS,
     MEMBER_SAVE_PERMISSIONS,
@@ -67,6 +68,8 @@ export function MembersPage({ onNavigateUser, onNavigateGroup }: MemberNavigatio
     const { can: canInvite } = useCan(MEMBER_INVITE_PERMISSIONS);
     const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
 
+    const admissionScope = useMemberScope(`${canSave}:${canInvite}:${canReadUsers}`);
+
     const batchActions: BatchAction<MemberRow>[] = canSave ? [
         {
             key: 'activate', label: 'Activate', icon: 'bi-check-circle',
@@ -101,6 +104,7 @@ export function MembersPage({ onNavigateUser, onNavigateGroup }: MemberNavigatio
         void modal.detail((close) => (
             <MemberDetail
                 id={member.id}
+                ownerSignal={admissionScope.current?.signal}
                 onClose={() => close(null)}
                 onNavigateUser={onNavigateUser}
                 onNavigateGroup={onNavigateGroup}
@@ -113,6 +117,7 @@ export function MembersPage({ onNavigateUser, onNavigateGroup }: MemberNavigatio
         canCreate: canSave,
         canReadUsers,
         queryClient: qc,
+        signal: admissionScope.current?.signal,
     });
 
     return (

package/src/admin/identity/members/member-dialog.tsx

@@ -0,0 +1,31 @@
+import { SchemaForm, modal, type Field, type FormData } from '../../../ui';
+import type { MemberScope } from './member-scope';
+
+/** Focused form stays mounted through the write; abort/dismiss fences its continuations. */
+export async function memberForm<T = FormData>(scope: MemberScope, opts: {
+    title: string; fields: Field[]; initial?: FormData; submitText?: string;
+}, submit?: (data: FormData, current: () => boolean) => Promise<T>): Promise<T | null> {
+    let open = true;
+    let pending = false;
+    const current = () => open && scope.current();
+    try {
+        return await modal.open<T>((close) => (
+            <div className="modal-pad">
+                <h2 className="modal-title">{opts.title}</h2>
+                <SchemaForm {...opts}
+                    onCancel={() => { open = false; close(null as T); }}
+                    onBusyChange={(busy) => { pending = busy; }}
+                    onSubmit={async (data) => {
+                        if (!current() || pending) return;
+                        pending = true;
+                        try {
+                            const result = submit ? await submit(data, current) : data as T;
+                            if (current()) close(result);
+                        } catch (error) {
+                            if (current()) throw error;
+                        } finally { pending = false; }
+                    }} />
+            </div>
+        ), { signal: scope.signal, canDismiss: () => !pending });
+    } finally { open = false; }
+}