portal-mojo 0.2.2 → 0.2.4

package/src/admin/credentials/webhook-subscriptions.tsx

@@ -1,15 +1,30 @@
-import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 import { useCan, type PermSpec } from '../../client/runtime';
 import {
-    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, ModelTable,
-    SchemaForm, fmt, modal, toast,
-    type Column, type Field, type FilterDef,
+    Badge,
+    DetailView,
+    Eyebrow,
+    FlatRow,
+    ModelTable,
+    SchemaForm,
+    confirmGuardrail,
+    fmt,
+    modal,
+    toast,
+    type Column,
+    type Field,
+    type FilterDef,
 } from '../../ui';
 import {
-    GLOBAL_CREDENTIAL_PERMS, GROUP_CREDENTIAL_PERMS,
-    WebhookSubscriptionModel, fetchWebhookSecret, normalizeWebhookEvents,
-    type CredentialGroup, type WebhookSecretInfo, type WebhookSubscriptionRow,
+    GLOBAL_CREDENTIAL_PERMS,
+    GROUP_CREDENTIAL_PERMS,
+    WebhookSubscriptionModel,
+    fetchWebhookSecret,
+    normalizeWebhookEvents,
+    type CredentialGroup,
+    type WebhookSecretInfo,
+    type WebhookSubscriptionRow,
 } from './models';
 import { showSecretDialog } from './secret-dialog';
 
@@ -121,9 +136,26 @@ const WEBHOOK_FIELDS: Field[] = [
     { name: 'is_active', type: 'switch', label: 'Active', help: 'Inactive subscriptions are skipped.' },
 ];
 
+/** The stop in front of `is_active: false` — copy states what the backend does. */
+function confirmDisableSubscription(row: WebhookSubscriptionRow): Promise<boolean> {
+    let host = row.url;
+    try { host = new URL(row.url).host || row.url; } catch { /* keep the raw url */ }
+    const events = row.events.length ? row.events.join(', ') : 'all events';
+    return confirmGuardrail({
+        title: `Disable webhook to ${host}?`,
+        effect: <>Deliveries of <b>{events}</b> to <b>{row.url}</b> stop the moment this saves.</>,
+        why: [
+            <>Deliveries stop for these events and nothing re-registers them — the subscription stays off until someone switches it back on here.</>,
+            <>Consumers see <b>silence, not an error</b>: the receiver gets no failed delivery and no notice, so anything downstream that depends on these events degrades quietly.</>,
+        ],
+        undo: 'Re-enable it here to resume deliveries for new events.',
+        confirmText: 'Disable webhook',
+    });
+}
+
 function useWebhookActions(permission: PermSpec) {
     const save = WebhookSubscriptionModel.useSave();
-    const destroy = WebhookSubscriptionModel.useDelete();
+
     const { can } = useCan(permission);
 
     const createSubscription = async (fixedGroup?: CredentialGroup) => {
@@ -192,6 +224,7 @@ function useWebhookActions(permission: PermSpec) {
         if (events.join('\u0000') !== row.events.join('\u0000')) changes.events = events;
         if (isActive !== row.is_active) changes.is_active = isActive;
         if (!Object.keys(changes).length) return;
+        if (changes.is_active === false && !(await confirmDisableSubscription(row))) return;
         try {
             await save.mutateAsync({ id: row.id, changes });
             toast.success('Webhook subscription updated');
@@ -202,6 +235,8 @@ function useWebhookActions(permission: PermSpec) {
 
     const toggleSubscription = async (row: WebhookSubscriptionRow, next: boolean) => {
         if (!can) return;
+        // Only the OFF direction is guarded — re-enabling restores deliveries.
+        if (!next && !(await confirmDisableSubscription(row))) return;
         try {
             await save.mutateAsync({ id: row.id, changes: { is_active: next } });
         } catch (error) {
@@ -209,19 +244,9 @@ function useWebhookActions(permission: PermSpec) {
         }
     };
 
-    const deleteSubscription = async (row: WebhookSubscriptionRow) => {
-        if (!can) return false;
-        try {
-            await destroy.mutateAsync({ id: row.id });
-            toast.success('Webhook subscription deleted');
-            return true;
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Failed to delete subscription');
-            return false;
-        }
-    };
 
-    return { canManage: can, createSubscription, editSubscription, toggleSubscription, deleteSubscription };
+
+    return { canManage: can, createSubscription, editSubscription, toggleSubscription, pending: save.isPending };
 }
 
 function WebhookCard({ row, actions }: {
@@ -271,13 +296,7 @@ function WebhookCard({ row, actions }: {
                             }}
                         />
                     </label>
-                    <ArmedButton
-                        className="btn-compact"
-                        label={<i className="bi bi-trash" aria-label="Delete this subscription" />}
-                        armedLabel="Click again — deliveries stop"
-                        title="Delete this subscription"
-                        onConfirm={async () => { await actions.deleteSubscription(row); }}
-                    />
+
                 </div>
             )}
         </div>
@@ -333,6 +352,8 @@ export function WebhookSubscriptionDetail({ id, onClose }: { id: number; onClose
             title={row.url}
             subtitle={`${groupLabel(row.group)} · webhook subscription`}
             chips={[{ text: row.is_active ? 'Active' : 'Inactive', tone: row.is_active ? 'success' : 'muted' }]}
+            active={actions.canManage ? { value: row.is_active, disabled: actions.pending, onChange: next => void actions.toggleSubscription(row, next) } : undefined}
+            contextMenu={actions.canManage ? [{ label: 'Edit subscription', onSelect: () => void actions.editSubscription(row) }, { label: row.is_active ? 'Deactivate' : 'Reactivate', disabled: actions.pending, onSelect: () => void actions.toggleSubscription(row, !row.is_active) }] : []}
             sections={[
                 {
                     key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
@@ -342,19 +363,7 @@ export function WebhookSubscriptionDetail({ id, onClose }: { id: number; onClose
                             <FlatRow label="URL"><code>{row.url}</code></FlatRow>
                             <FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
                             <FlatRow label="Modified">{fmt.datetime(row.modified)}</FlatRow>
-                            <div className="ga-toolbar" style={{ marginTop: 16 }}>
-                                <button className="btn btn-compact" onClick={() => void actions.editSubscription(row)}>
-                                    <i className="bi bi-pencil" /> Edit URL, events, and status
-                                </button>
-                                <ArmedButton
-                                    className="btn-compact"
-                                    label="Delete"
-                                    armedLabel="Click again — delete now"
-                                    onConfirm={async () => {
-                                        if (await actions.deleteSubscription(row)) onClose();
-                                    }}
-                                />
-                            </div>
+
                         </>
                     ),
                 },

package/src/admin/dashboard/AdminDashboardPage.tsx

@@ -84,7 +84,7 @@ function LoginOverview() {
 
 export function AdminDashboardPage() {
     return <div className="admin-dashboard">
-        <header className="admin-dashboard-header"><div className="eyebrow">Overview</div><h1>Admin dashboard</h1><p className="dim">Authoritative operational signals for this django-mojo deployment.</p></header>
+        <header className="admin-dashboard-header"><h1>Dashboard</h1><p className="dim">Authoritative operational signals for this django-mojo deployment.</p></header>
         <MetricOverview />
         <AttentionOverview />
         <LoginOverview />

package/src/admin/dns/CertificateLifecyclePoller.tsx

@@ -49,9 +49,21 @@ export function CertificateLifecyclePoller({ domain, intervalMs = CERTIFICATE_PO
     const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [version, setVersion] = useState(0);
 
-    useEffect(() => queryClient.getQueryCache().subscribe((event) => {
-        if (event.query.queryKey[0] === CertificateModel.endpoint) setVersion((value) => value + 1);
-    }), [queryClient]);
+    useEffect(() => {
+        let mounted = true;
+        let queued = false;
+        const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+            if (event.query.queryKey[0] !== CertificateModel.endpoint || queued) return;
+            // Observer registration can notify while a detail is rendering.
+            // Coalesce cache notifications after that render, including StrictMode replay.
+            queued = true;
+            queueMicrotask(() => {
+                queued = false;
+                if (mounted) setVersion((value) => value + 1);
+            });
+        });
+        return () => { mounted = false; unsubscribe(); };
+    }, [queryClient]);
 
     useEffect(() => {
         const rowsById = new Map<number, CertificateRow>();

package/src/admin/dns/ProviderCredentialsPage.tsx

@@ -1,18 +1,34 @@
-import { useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
 import { useCan } from '../../client/runtime';
 import {
-    ArmedButton, Badge, CollectionSelect, FlatRow, ModelTable, fmt, modal, toast,
-    type Column, type FilterDef, type Tone,
+    Badge,
+    CollectionSelect,
+    DetailView,
+    FlatRow,
+    ModelTable,
+    fmt,
+    modal,
+    toast,
+    type Column,
+    type FilterDef,
+    type Tone,
 } from '../../ui';
 import {
-    DNS_GROUP_CHOICE_ENDPOINT, invalidateDnsCredentials, linkDnsCredential,
-    rotateDnsCredential, useDnsCapabilities,
+    DNS_GROUP_CHOICE_ENDPOINT,
+    invalidateDnsCredentials,
+    linkDnsCredential,
+    rotateDnsCredential,
+    useDnsCapabilities,
 } from './api';
 import { linkableProviders, providerLabel } from './data';
 import {
-    DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS, DnsCredentialModel,
-    type DnsCapabilities, type DnsCredentialRow, type DnsGroupChoice,
+    DNS_MANAGE_PERMISSIONS,
+    DNS_VIEW_PERMISSIONS,
+    DnsCredentialModel,
+    type DnsCapabilities,
+    type DnsCredentialRow,
+    type DnsGroupChoice,
 } from './models';
 
 function groupId(group: DnsCredentialRow['group']): number | null {
@@ -154,7 +170,7 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
     const { data: row, isPending, error } = DnsCredentialModel.useOne(id);
     const { can: canManage } = useCan(DNS_MANAGE_PERMISSIONS);
     const save = DnsCredentialModel.useSave();
-    const destroy = DnsCredentialModel.useDelete();
+
     if (isPending) return <div className="modal-pad dim">Loading credential…</div>;
     if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'Credential not found'}</div>;
 
@@ -167,26 +183,13 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
         }
     };
 
-    const remove = async () => {
-        try {
-            await destroy.mutateAsync({ id: row.id });
-            toast.success('Credential deleted');
-            close();
-        } catch (reason) {
-            toast.error(reason instanceof Error ? reason.message : 'Credential could not be deleted');
-        }
-    };
 
-    return (
-        <div className="modal-pad">
-            <div className="eyebrow">Provider credential</div>
-            <h2 className="modal-title">{row.name || `Credential #${row.id}`}</h2>
-            <div className="chip-row" style={{ marginBottom: 14 }}>
-                <Badge tone={verificationTone(row)}>{row.verified ? 'Verified' : 'Unverified'}</Badge>
-                <Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge>
-                <Badge tone="warning">{providerLabel(row.provider)}</Badge>
-            </div>
-            <FlatRow label="Group">{groupLabel(row.group)}</FlatRow>
+
+    return <DetailView title={row.name || `Credential #${row.id}`} subtitle={providerLabel(row.provider)} icon="bi-key" onClose={close}
+        chips={[{ text: row.verified ? 'Verified' : 'Unverified', tone: verificationTone(row) }, { text: row.is_active ? 'Active' : 'Retired', tone: row.is_active ? 'success' : 'muted' }]}
+        active={canManage ? { value: row.is_active, disabled: save.isPending, onChange: () => void toggle() } : undefined}
+        contextMenu={canManage ? [{ label: 'Rotate credentials…', onSelect: () => void showCredentialEditor(caps, row) }, { label: row.is_active ? 'Retire' : 'Reactivate', disabled: save.isPending, onSelect: () => void toggle() }] : []}
+        sections={[{ key: 'overview', label: 'Overview', icon: 'bi-info-circle', render: () => <div className="detail-section">            <FlatRow label="Group">{groupLabel(row.group)}</FlatRow>
             <FlatRow label="API key"><code>{row.api_key_masked || '—'}</code></FlatRow>
             <FlatRow label="API secret"><code>{row.api_secret_masked || '—'}</code></FlatRow>
             <FlatRow label="Domains at verification">{row.domain_count}</FlatRow>
@@ -196,26 +199,7 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
             <p className="dim">
                 The linked-domain count is a health signal only. Provider account domains are never enumerated here.
             </p>
-            {canManage && (
-                <div className="modal-actions">
-                    <button type="button" className="btn" onClick={() => void showCredentialEditor(caps, row)}>
-                        <i className="bi bi-arrow-repeat" /> Rotate
-                    </button>
-                    <button type="button" className="btn" disabled={save.isPending} onClick={() => void toggle()}>
-                        <i className={`bi ${row.is_active ? 'bi-pause-circle' : 'bi-play-circle'}`} /> {row.is_active ? 'Retire' : 'Activate'}
-                    </button>
-                    <ArmedButton
-                        label="Delete"
-                        armedLabel="Click again — linked domains lose provider-backed DNS"
-                        disabled={destroy.isPending}
-                        onConfirm={remove}
-                    />
-                    <button type="button" className="btn" onClick={close}>Close</button>
-                </div>
-            )}
-            {!canManage && <div className="modal-actions"><button type="button" className="btn" onClick={close}>Close</button></div>}
-        </div>
-    );
+</div> }]} />;
 }
 
 const COLUMNS: Column<DnsCredentialRow>[] = [
@@ -248,9 +232,9 @@ function CredentialsTable({ caps }: { caps: DnsCapabilities }) {
     ];
     const openDetail = (row: DnsCredentialRow) => {
         void DnsCredentialModel.fetchOne(queryClient, row.id).catch(() => undefined);
-        void modal.open((done) => (
+        void modal.detail((done) => (
             <CredentialDetail id={row.id} caps={caps} close={() => done(null)} />
-        ), { size: 'md' });
+        ));
     };
     const canLink = canManage && linkableProviders(caps).length > 0;
     return (

package/src/admin/dns/setup.ts

@@ -10,7 +10,7 @@ registerDnsAdminIntegration({
         return resolveDnsDomainByName(normalizedName);
     },
     recordsHref: (domainId) => `dns/records?domain=${encodeURIComponent(domainId)}`,
-    ...(usingMockTransport() ? {
+    ...(import.meta.env.VITE_MOJO_PACKAGED_ADMIN !== '1' && usingMockTransport() ? {
         applyManagedDnsRecords: async (domainId: number, records: readonly ManagedDnsRecordInput[]) => {
             const { applyMockManagedDnsRecords } = await import('../../client/mock');
             applyMockManagedDnsRecords(domainId, records);

package/src/admin/domains/observability.ts

@@ -9,7 +9,7 @@ import { SECURITY_VIEW_PERMS } from '../security-permissions';
 
 export const ADMIN_DASHBOARD_PERMISSIONS = [...new Set([...DASHBOARD_METRIC_PERMISSIONS, ...SECURITY_VIEW_PERMS, ...JOBS_VIEW_PERMS, ...EMAIL_ADMIN_PERMISSIONS, ...LOGIN_SUMMARY_PERMS])];
 export const DASHBOARD_ADMIN_SECTION: AdminSection = {
-    id: 'dashboard', basePath: '', title: 'Overview', icon: 'bi-grid-1x2', navigationGroup: 'overview', permissions: ADMIN_DASHBOARD_PERMISSIONS,
+    id: 'dashboard', basePath: '', title: 'Dashboard', icon: 'bi-grid-1x2', navigationGroup: null, permissions: ADMIN_DASHBOARD_PERMISSIONS,
     routes: [{ path: '', label: 'Dashboard', loadComponent: () => import('../dashboard/AdminDashboardPage').then(({ AdminDashboardPage }) => ({ default: AdminDashboardPage })), permissions: ADMIN_DASHBOARD_PERMISSIONS, fallbackToFirstVisible: true }],
 };
 export const MONITORING_ADMIN_SECTION: AdminSection = {

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

@@ -1,9 +1,9 @@
-import { useSyncExternalStore } from 'react';
+import { useSyncExternalStore, type ReactNode } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCan, type PermSpec } from '../../../client/runtime';
 import {
     Badge, DetailView, Eyebrow, FlatRow, FormView, JsonBlock, MetricCard,
-    ModelTable, fmt, formModal, toast, type Column, type DetailMenuEntry,
+    ModelTable, confirmGuardrail, fmt, formModal, toast, type Column, type DetailMenuEntry,
 } from '../../../ui';
 import { LOGS_ADMIN_PERMISSIONS, LogModel, type LogRow } from '../../monitoring';
 import {
@@ -51,6 +51,43 @@ function AuditTable({ memberId }: { memberId: number }) {
     );
 }
 
+/**
+ * The two grants that let a member reach past its own row. A switch flip
+ * autosaves with no save button, so the stop lives in FormView's
+ * `beforeSave`: only these keys, only the ON direction — everything else
+ * stays one click. (`admin` is not an editable member grant here —
+ * `isEditableMemberPermission` excludes it — so it cannot be flipped from
+ * this form and needs no guard.)
+ */
+const ESCALATING_GRANTS: Record<string, { label: string; why: ReactNode }> = {
+    manage_group: {
+        label: 'Manage Group',
+        why: <><code>manage_group</code> unlocks the group record itself — its settings and policy metadata, its API keys, webhook subscriptions and integrations — every write the group's credential and identity panels gate on.</>,
+    },
+    manage_members: {
+        label: 'Manage Members',
+        why: <><code>manage_members</code> lets the holder change any member's grants, including its own, and admit or remove members — a grant that can reproduce itself.</>,
+    },
+};
+
+/** beforeSave gate: stops only when an escalating grant flips ON. */
+function confirmGrantEscalation(member: MemberRow, changes: Record<string, unknown>): 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);
+    if (granting.length === 0) return true;
+    const who = member.user?.display_name || member.user?.email || member.user?.username || `User #${member.user?.id ?? member.id}`;
+    const group = member.group?.name || 'this group';
+    const labels = granting.map((key) => ESCALATING_GRANTS[key]!.label).join(' + ');
+    return confirmGuardrail({
+        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),
+        undo: 'Switch it off here to revoke. Anything done while the grant was held stays done.',
+        confirmText: `Grant ${labels}`,
+    });
+}
+
 function GrantSummary({ member }: { member: MemberRow }) {
     const raw = rawMemberGrants(member.permissions);
     const effective = effectiveMemberGrants(member.permissions);
@@ -201,7 +238,15 @@ export function MemberDetail({
                             <Eyebrow>Per-group authorization</Eyebrow>
                             <p className="dim">Role labels are not authorization. Protected changes may be rejected by <code>MEMBER_PERMS_PROTECTION</code>; failed autosaves revert and show the server error.</p>
                             {canSave
-                                ? <FormView model={MemberModel} row={member} fields={memberPermissionFields()} onSaved={() => { void MemberModel.invalidate(qc); }} />
+                                ? (
+                                    <FormView
+                                        model={MemberModel}
+                                        row={member}
+                                        fields={memberPermissionFields()}
+                                        beforeSave={({ changes }) => confirmGrantEscalation(member, changes)}
+                                        onSaved={() => { void MemberModel.invalidate(qc); }}
+                                    />
+                                )
                                 : <GrantSummary member={member} />}
                             {deploymentOnly.length > 0 && (
                                 <p className="dim">Deployment-specific stored grants without registered editors remain read-only: <code>{deploymentOnly.join(', ')}</code>.</p>

package/src/admin/identity/users/UserDetail.tsx

@@ -23,34 +23,49 @@
 import { useSyncExternalStore } from 'react';
 import { useCan, useMe } from '../../../client/runtime';
 import {
-    DetailView, getFormTabs, subscribeFormTabs, fmt, modal,
-    type Chip, type DetailMenuEntry,
+    DetailView,
+    fmt,
+    getFormTabs,
+    modal,
+    subscribeFormTabs,
+    type Chip,
+    type DetailMenuEntry,
 } from '../../../ui';
+import { MEMBER_READ_PERMISSIONS } from '../members';
 import {
-    USER_DEVICE_PERMISSIONS, USER_EVENT_PERMISSIONS, USER_LOGIN_PERMISSIONS,
-    USER_LOG_PERMISSIONS, USER_MANAGE_PERMISSIONS, USER_PUSH_DEVICE_PERMISSIONS,
-    UserModel, type UserRow,
+    USER_DEVICE_PERMISSIONS,
+    USER_EVENT_PERMISSIONS,
+    USER_LOGIN_PERMISSIONS,
+    USER_LOG_PERMISSIONS,
+    USER_MANAGE_PERMISSIONS,
+    USER_PUSH_DEVICE_PERMISSIONS,
+    UserModel,
+    type UserRow,
 } from './models';
-import { MEMBER_READ_PERMISSIONS } from '../members';
 import { useUserAdminActions } from './sections/actions';
-import { useSharedUserQueries } from './sections/queries';
-import {
-    accountType, inactivityWarning, isAnonymized, isOnline, statusBadge, useAdminCaller,
-} from './sections/shared';
-import { USER_APP_PERMS_TABSET } from './sections/permission-catalog';
-import { OverviewSection } from './sections/OverviewSection';
-import { ProfileSection } from './sections/ProfileSection';
-import { PersonalSection } from './sections/PersonalSection';
-import { SecuritySection } from './sections/SecuritySection';
-import { OAuthSection } from './sections/OAuthSection';
-import { GroupsSection } from './sections/GroupsSection';
-import { AppPermsSection, SysPermsSection } from './sections/PermissionsSection';
 import { ApiKeysSection } from './sections/ApiKeysSection';
+import { AuditSection } from './sections/AuditSection';
 import { DevicesSection } from './sections/DevicesSection';
+import { GroupsSection } from './sections/GroupsSection';
 import { LoginsSection } from './sections/LoginsSection';
-import { AuditSection } from './sections/AuditSection';
-import { NotificationsSection } from './sections/NotificationsSection';
 import { UserMetadataSection } from './sections/MetadataPanel';
+import { NotificationsSection } from './sections/NotificationsSection';
+import { OAuthSection } from './sections/OAuthSection';
+import { OverviewSection } from './sections/OverviewSection';
+import { USER_APP_PERMS_TABSET } from './sections/permission-catalog';
+import { AppPermsSection, SysPermsSection } from './sections/PermissionsSection';
+import { PersonalSection } from './sections/PersonalSection';
+import { ProfileSection } from './sections/ProfileSection';
+import { useSharedUserQueries } from './sections/queries';
+import { SecuritySection } from './sections/SecuritySection';
+import {
+    accountType,
+    inactivityWarning,
+    isAnonymized,
+    isOnline,
+    statusBadge,
+    useAdminCaller,
+} from './sections/shared';
 
 export interface UserDetailProps {
     id: number;
@@ -144,6 +159,7 @@ function UserDetailLoaded({ user, isAdmin, hasAppPerms, onClose, onOpenGroup }:
     // ── Kebab (UserView contextItems at full scope) ───────────────────
     const ADMIN = USER_MANAGE_PERMISSIONS;
     const MENU: DetailMenuEntry<UserRow>[] = [
+        { label: user.is_active ? 'Deactivate' : 'Reactivate', icon: 'bi-power', permissions: ADMIN, when: u => Boolean(u && !isAnonymized(u)), onSelect: () => void (user.is_active ? actions.disableUser() : actions.reactivateUser()) },
         { label: 'Edit user', icon: 'bi-pencil', permissions: ADMIN, onSelect: () => void actions.editUser() },
         {
             label: 'Manage avatar…', icon: 'bi-image', permissions: ADMIN,

package/src/admin/identity/users/sections/OAuthSection.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+import { useCan, useMe } from '../../../../client/runtime';
 // OAuth section — AdminConnectedSection port (read in full 2026-08-05):
 // the user's linked OAuth providers with admin unlink. The same list powers
 // the Profile card's "manage linked accounts" modal (source Phase 3 shared
@@ -6,23 +8,28 @@
 // Wire: GET /api/account/oauth_connection?user=<id> → rows
 // {id, provider, email, is_active, created} (default graph, measured in
 // django-mojo oauth.py); DELETE /api/account/oauth_connection/<id> unlinks.
-import { modal, toast, fmt, Eyebrow } from '../../../../ui';
-import { OAuthConnectionModel, type UserRow } from '../models';
+import { Eyebrow, fmt, modal, toast } from '../../../../ui';
+import { OAuthConnectionModel, USER_MANAGE_PERMISSIONS, type UserRow } from '../models';
 import { providerIcon } from './shared';
 
 export function OAuthConnectionList({ userId, canManage = true }: { userId: number; canManage?: boolean }) {
     const { data, isPending } = OAuthConnectionModel.useList({ user: userId, size: 25, sort: '-created' });
     const del = OAuthConnectionModel.useDelete();
+    const admin = useCan(USER_MANAGE_PERMISSIONS).can;
+    const me = useMe().data;
+    const allowed = (me?.id === userId || admin) && canManage;
+    const permission = useRef(allowed); permission.current = allowed;
+    useEffect(() => { permission.current = allowed; return () => { permission.current = false; }; }, [allowed]);
     const rows = data?.rows ?? [];
 
     const unlink = async (id: number, provider: string) => {
         const ok = await modal.confirm({
             title: 'Unlink account',
-            message: <>Unlink <b>{provider}</b> for this user?</>,
+            message: <>Unlink <b>{provider}</b> from user #{userId}? This removes the association only; reconnect through provider authorization. The provider account is retained.</>,
             confirmText: 'Unlink',
             danger: true,
         });
-        if (!ok) return;
+        if (!ok || !permission.current) return;
         try {
             await del.mutateAsync({ id });
             toast.success(`${provider} account unlinked`);
@@ -51,8 +58,8 @@ export function OAuthConnectionList({ userId, canManage = true }: { userId: numb
                             {c.email ?? <span className="dim-italic">no email</span>} · Connected {fmt.relative(c.created)}
                         </div>
                     </div>
-                    {canManage && <div className="us-row-actions">
-                        <button className="btn btn-compact us-danger" onClick={() => void unlink(c.id, c.provider)}>
+                    {allowed && <div className="us-row-actions">
+                        <button className="btn btn-compact us-danger" disabled={del.isPending} onClick={() => void unlink(c.id, c.provider)}>
                             <i className="bi bi-x-lg" /> Unlink
                         </button>
                     </div>}

package/src/admin/identity/users/sections/actions.tsx

@@ -9,16 +9,22 @@
 // surfaces via the error toast like any failure. auth/email/verify/send is
 // the public, admin-targetable verification sender (NOT the JWT-scoped
 // auth/verify/email/send).
-import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { mojoCall, withFreshAuth, type Field } from '../../../../client/runtime';
+import { useEffect, useRef, useState } from 'react';
+import { mojoCall, useCan, useMe, withFreshAuth, type Field } from '../../../../client/runtime';
 import {
-    Badge, ImageField, PasswordStrengthMeter, fmt, formModal, modal, toast,
+    Badge,
+    ImageField,
+    PasswordStrengthMeter,
+    fmt,
+    formModal,
+    modal,
+    toast,
     type FileFieldOwnerResult,
 } from '../../../../ui';
-import { PasskeyModel, UserModel, type UserRow } from '../models';
-import { openGroupDetail, useAdminCaller } from './shared';
+import { PasskeyModel, USER_MANAGE_PERMISSIONS, UserModel, type UserRow } from '../models';
 import { OAuthConnectionList } from './OAuthSection';
+import { openGroupDetail, useAdminCaller } from './shared';
 
 /** One-field prompt modal (the source's Modal.prompt pencils). */
 async function promptField(title: string, field: Field, initial: string): Promise<string | null> {
@@ -663,6 +669,10 @@ function AvatarModal({ user, onClose, onPendingChange }: { user: UserRow; onClos
  * friendly_name and is_enabled; delete is real (CAN_DELETE).
  */
 function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => void }) {
+    const admin = useCan(USER_MANAGE_PERMISSIONS).can;
+    const allowed = useMe().data?.id === userId || admin;
+    const permission = useRef(allowed); permission.current = allowed;
+    useEffect(() => { permission.current = allowed; return () => { permission.current = false; }; }, [allowed]);
     const { data, isPending } = PasskeyModel.useList({ user: userId, size: 25, sort: '-created' });
     const save = PasskeyModel.useSave();
     const del = PasskeyModel.useDelete();
@@ -679,7 +689,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
             initial: { friendly_name: current ?? '' },
         });
         const name = data?.friendly_name;
-        if (typeof name !== 'string' || !name.trim()) return;
+        if (!permission.current || typeof name !== 'string' || !name.trim()) return;
         try {
             await save.mutateAsync({ id, changes: { friendly_name: name.trim() } });
             toast.success('Passkey updated');
@@ -689,6 +699,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
     };
 
     const toggleEnabled = async (id: number, next: boolean) => {
+        if (!permission.current) return;
         try {
             await save.mutateAsync({ id, changes: { is_enabled: next } });
             toast.success(next ? 'Passkey enabled' : 'Passkey disabled');
@@ -700,11 +711,11 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
     const remove = async (id: number) => {
         const ok = await modal.confirm({
             title: 'Delete passkey',
-            message: 'Delete this passkey?',
+            message: `Remove ${rows.find(row => row.id === id)?.friendly_name || 'Unnamed passkey'} for ${rows.find(row => row.id === id)?.rp_id || 'unknown relying party'}, user #${userId}? Reenrollment is required to restore it. The physical device is not erased.`,
             confirmText: 'Delete',
             danger: true,
         });
-        if (!ok) return;
+        if (!ok || !permission.current) return;
         try {
             await del.mutateAsync({ id });
             toast.success('Passkey deleted');
@@ -735,7 +746,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
                             Created {fmt.date(p.created)} · Last used {fmt.relative(p.last_used, 'never')} · {p.sign_count} uses
                         </div>
                     </div>
-                    <div className="us-row-actions">
+                    <div className="us-row-actions" inert={!allowed || save.isPending || del.isPending}>
                         <button className="btn-icon btn-icon-sm" title="Rename" aria-label={`Rename ${p.friendly_name ?? 'passkey'}`} onClick={() => void rename(p.id, p.friendly_name)}>
                             <i className="bi bi-pencil" />
                         </button>