portal-mojo 0.1.0

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

@@ -0,0 +1,72 @@
+// 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
+// exactly this list between the section and the modal).
+//
+// 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 { 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 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?</>,
+            confirmText: 'Unlink',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await del.mutateAsync({ id });
+            toast.success(`${provider} account unlinked`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to unlink account');
+        }
+    };
+
+    if (isPending) return <p className="dim">Loading…</p>;
+    if (rows.length === 0) {
+        return (
+            <div className="us-empty">
+                <i className="bi bi-plug" />
+                <div>No connected accounts</div>
+            </div>
+        );
+    }
+    return (
+        <>
+            {rows.map((c) => (
+                <div key={c.id} className="us-oauth-row">
+                    <div className="us-row-icon"><i className={`bi ${providerIcon(c.provider)}`} /></div>
+                    <div className="us-row-info">
+                        <div className="us-row-title us-cap">{c.provider}</div>
+                        <div className="us-row-meta">
+                            {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)}>
+                            <i className="bi bi-x-lg" /> Unlink
+                        </button>
+                    </div>}
+                </div>
+            ))}
+        </>
+    );
+}
+
+export function OAuthSection({ user, canManage }: { user: UserRow; canManage: boolean }) {
+    return (
+        <>
+            <Eyebrow>Linked accounts</Eyebrow>
+            <OAuthConnectionList userId={user.id} canManage={canManage} />
+        </>
+    );
+}

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

@@ -0,0 +1,109 @@
+// Overview — UserOverviewSection port (read in full 2026-08-05): KPI cards
+// (Devices · Last login · Active sessions · Groups) fed by the SHARED
+// queries UserDetail owns, the identity flat rows, and the recent-activity
+// merge feed (logins + incidents + object logs + activity → top 5 by ts).
+//
+// KPI values are TOTAL row counts from the API envelopes (`count`), never
+// the fetched-page length — the source read collection.meta.count for
+// exactly this reason.
+import { Eyebrow, FlatRow, MetricCard, Timeline, fmt, type TimelineItem } from '../../../../ui';
+import type { UserRow } from '../models';
+import { accountType, LOG_LEVEL_TONE, toMs } from './shared';
+import type { SharedUserQueries } from './queries';
+
+export function OverviewSection({ user, shared, onOpenGroup }: {
+    user: UserRow;
+    shared: SharedUserQueries;
+    onOpenGroup?: (groupId: number) => void;
+}) {
+    const deviceTotal = (shared.devices.data?.count ?? 0) + (shared.pushDevices.data?.count ?? 0);
+    const sessionCount = shared.devices.data?.count ?? 0;
+    const groupCount = shared.members.data?.count ?? 0;
+    const lastLogin = shared.logins.data?.rows[0]?.created ?? user.last_login;
+
+    // ── Merge feed: 2 logins + 2 incidents + 2 object logs + 1 activity,
+    //    newest 5 win (UserOverviewSection._buildActivityItems).
+    const items: (TimelineItem & { _ts: number | null })[] = [];
+    for (const l of shared.logins.data?.rows.slice(0, 2) ?? []) {
+        const where = [l.city, l.country_code].filter(Boolean).join(', ');
+        items.push({
+            _ts: toMs(l.created),
+            tone: 'info',
+            title: 'Logged in',
+            body: (
+                <span className="dim">
+                    {l.ip_address && <code>{l.ip_address}</code>}
+                    {l.ip_address && where ? ' · ' : ''}
+                    {where}
+                </span>
+            ),
+            meta: fmt.relative(l.created),
+        });
+    }
+    for (const e of shared.events.data?.rows.slice(0, 2) ?? []) {
+        items.push({
+            _ts: toMs(e.created),
+            tone: 'danger',
+            title: e.title || e.category || 'Incident event',
+            body: e.category ? <span className="dim">{e.category}</span> : undefined,
+            meta: fmt.relative(e.created),
+        });
+    }
+    for (const log of shared.objectLogs.data?.rows.slice(0, 2) ?? []) {
+        items.push({
+            _ts: toMs(log.created),
+            tone: LOG_LEVEL_TONE[(log.level ?? '').toLowerCase()] ?? 'muted',
+            title: log.kind || 'Change',
+            body: log.log ? <span className="dim">{fmt.truncate(log.log, 80)}</span> : undefined,
+            meta: fmt.relative(log.created),
+        });
+    }
+    for (const a of shared.activity.data?.rows.slice(0, 1) ?? []) {
+        items.push({
+            _ts: toMs(a.created),
+            tone: LOG_LEVEL_TONE[(a.level ?? '').toLowerCase()] ?? 'muted',
+            title: a.kind || 'Activity',
+            body: a.path ? <code className="us-mono-sm">{a.path}</code> : undefined,
+            meta: fmt.relative(a.created),
+        });
+    }
+    const feed = items
+        .filter((i) => i._ts != null)
+        .sort((a, b) => (b._ts ?? 0) - (a._ts ?? 0))
+        .slice(0, 5);
+
+    const org = typeof user.org === 'object' && user.org ? user.org : null;
+
+    return (
+        <>
+            <Eyebrow>Account snapshot</Eyebrow>
+            <div className="grid gap-3 grid-cols-2 xl:grid-cols-4" style={{ marginBottom: 14 }}>
+                <MetricCard label="Devices" value={String(deviceTotal)} />
+                <MetricCard label="Last login" value={fmt.relative(lastLogin, '—')} />
+                <MetricCard label="Active sessions" value={String(sessionCount)} />
+                <MetricCard label="Groups" value={String(groupCount)} />
+            </div>
+
+            <Eyebrow>Identity</Eyebrow>
+            <FlatRow label="Display name">{user.display_name ?? <span className="dim">—</span>}</FlatRow>
+            <FlatRow label="Email">
+                {user.email ? user.email : <span className="dim">—</span>}
+            </FlatRow>
+            <FlatRow label="Phone">
+                {user.phone_number ? <code>{user.phone_number}</code> : <span className="dim">—</span>}
+            </FlatRow>
+            <FlatRow label="Account type">{accountType(user)}</FlatRow>
+            {org && onOpenGroup && (
+                <FlatRow label="Organization">
+                    <a href="#" onClick={(e) => { e.preventDefault(); onOpenGroup(org.id); }}>
+                        <i className="bi bi-buildings" /> {org.name}
+                    </a>
+                </FlatRow>
+            )}
+            {org && !onOpenGroup && <FlatRow label="Organization"><i className="bi bi-buildings" /> {org.name}</FlatRow>}
+
+            <Eyebrow>Recent activity</Eyebrow>
+            <Timeline items={feed} emptyText="No recent activity yet." />
+        </>
+    );
+}

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

@@ -0,0 +1,35 @@
+// Sys Perms / App Perms — UserPermissionsSection port (read in full
+// 2026-08-05): one autosaving FormView wrapping a single tabset. Flip a
+// switch → FormView batches `{"permissions.<name>": true}` into ONE save →
+// django-mojo dict-MERGES it into the permissions JSONField, so absent keys
+// keep their grants.
+//
+// "Sys Perms" always renders (SYSTEM_PERMISSION_TABS — the framework
+// catalog); "App Perms" renders only when the app registered tabs under
+// USER_APP_PERMS_TABSET via registerFormTabs — the portal's
+// User.registerPermissions equivalent (UserDetail gates the section on the
+// registry being non-empty).
+import { Eyebrow, FormView } from '../../../../ui';
+import { UserModel, type UserRow } from '../models';
+import { SYSTEM_PERMISSION_TABS, USER_APP_PERMS_TABSET } from './permission-catalog';
+
+export function SysPermsSection({ user }: { user: UserRow }) {
+    return (
+        <>
+            <Eyebrow>System permissions</Eyebrow>
+            <p className="dim" style={{ margin: '0 0 12px' }}>Toggles autosave as soon as you flip them.</p>
+            <FormView model={UserModel} row={user} tabs={SYSTEM_PERMISSION_TABS} />
+        </>
+    );
+}
+
+export function AppPermsSection({ user }: { user: UserRow }) {
+    return (
+        <>
+            <Eyebrow>App permissions</Eyebrow>
+            <p className="dim" style={{ margin: '0 0 12px' }}>Toggles autosave as soon as you flip them.</p>
+            {/* Registry NAME (not a snapshot) so late registrations re-render. */}
+            <FormView model={UserModel} row={user} tabs={USER_APP_PERMS_TABSET} />
+        </>
+    );
+}

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

@@ -0,0 +1,73 @@
+// Personal — AdminPersonalSection port (read in full 2026-08-05): name
+// fields, DOB, timezone, address. The source's pencil-prompt-per-row grid
+// becomes ONE FormView autosave surface (the C4 house rule: inline autosave,
+// no save buttons); dotted metadata.* names merge server-side so editing the
+// address never clobbers the rest of the blob.
+//
+// Deliberate deviation, backend-grounded: the source's force-verify /
+// unverify DOB buttons are NOT ported — `is_dob_verified` sits in
+// django-mojo's NO_SAVE_FIELDS (user.py RestMeta, read 2026-08-05), so the
+// server silently DROPS the write and the source UI toasts a success that
+// never happened. The verified badge still renders from the row.
+import { Badge, Eyebrow, FlatRow, FormView } from '../../../../ui';
+import type { Field } from '../../../../client';
+import { UserModel, type UserRow } from '../models';
+
+const NAME_FIELDS: Field[] = [
+    { name: 'display_name', type: 'text', label: 'Display name', columns: 6 },
+    { name: 'first_name', type: 'text', label: 'First name', columns: 6 },
+    { name: 'last_name', type: 'text', label: 'Last name', columns: 6 },
+];
+
+const DETAIL_FIELDS: Field[] = [
+    {
+        name: 'dob', type: 'datepicker', label: 'Date of birth', columns: 6,
+        outputFormat: 'date', // DateField on the wire: canonical YYYY-MM-DD
+    },
+    { name: 'metadata.timezone', type: 'timezone', label: 'Timezone', columns: 6 },
+];
+
+const ADDRESS_FIELDS: Field[] = [
+    { name: 'metadata.street', type: 'text', label: 'Street', columns: 12, placeholder: '123 Main St' },
+    { name: 'metadata.city', type: 'text', label: 'City', columns: 6 },
+    { name: 'metadata.state', type: 'text', label: 'State / Province', columns: 6 },
+    { name: 'metadata.zip', type: 'text', label: 'Zip / Postal code', columns: 6 },
+    { name: 'metadata.country', type: 'text', label: 'Country', columns: 6 },
+];
+
+export function PersonalSection({ user }: { user: UserRow }) {
+    return (
+        <>
+            <Eyebrow>Name</Eyebrow>
+            <FormView model={UserModel} row={user} fields={NAME_FIELDS} />
+
+            <Eyebrow>Details</Eyebrow>
+            <FlatRow label="DOB status">
+                {user.dob
+                    ? (
+                        <>
+                            <code>{user.dob}</code>{' '}
+                            <Badge tone={user.is_dob_verified ? 'success' : 'warning'}>
+                                {user.is_dob_verified ? 'Verified' : 'Unverified'}
+                            </Badge>
+                        </>
+                    )
+                    : <span className="dim-italic">Not set</span>}
+            </FlatRow>
+            <FormView model={UserModel} row={user} fields={DETAIL_FIELDS} />
+
+            <Eyebrow>Address</Eyebrow>
+            <FlatRow label="On file">
+                {addressSummary(user) || <span className="dim-italic">Not set</span>}
+            </FlatRow>
+            <FormView model={UserModel} row={user} fields={ADDRESS_FIELDS} />
+        </>
+    );
+}
+
+function addressSummary(user: UserRow): string {
+    const meta = (user.metadata ?? {}) as Record<string, unknown>;
+    return [meta.street, meta.city, meta.state, meta.zip, meta.country]
+        .filter((v): v is string => typeof v === 'string' && v !== '')
+        .join(', ');
+}

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

@@ -0,0 +1,175 @@
+// Profile — UserProfileSection port (read in full 2026-08-05): identity
+// cards with the admin credential actions, the Account summary rows (edit
+// pencil → Edit Account modal), and Linked accounts (SSO providers + manage
+// passkeys). Non-admin viewers see read-only cards + the send flows —
+// contact-keyed actions stay ungated (the backend trusts the email/SMS
+// recipient, not the JWT).
+import { Badge, Eyebrow, FlatRow, SecurityItem, fmt } from '../../../../ui';
+import { OAuthConnectionModel, type UserRow } from '../models';
+import type { UserAdminActions } from './actions';
+import { accountType, providerIcon } from './shared';
+
+export function ProfileSection({ user, actions, canManage, canCredentials }: {
+    user: UserRow;
+    actions: UserAdminActions;
+    canManage: boolean;
+    canCredentials: boolean;
+}) {
+    const { data: connections } = OAuthConnectionModel.useList(
+        { user: user.id, size: 25, sort: '-created' },
+        { enabled: canCredentials },
+    );
+    const meta = (user.metadata ?? {}) as Record<string, unknown>;
+    const timezone = typeof meta.timezone === 'string' ? meta.timezone : null;
+    const hasEmail = Boolean(user.email);
+    const hasPhone = Boolean(user.phone_number);
+    const resetContact = user.email || user.phone_number || null;
+
+    return (
+        <>
+            <Eyebrow>Personal</Eyebrow>
+            <FlatRow
+                label="Display name"
+                action={canManage ? () => void actions.editDisplayName() : undefined}
+            >
+                {user.display_name ?? <span className="dim">—</span>}
+            </FlatRow>
+
+            <Eyebrow>Identity</Eyebrow>
+
+            {/* Username card */}
+            <SecurityItem icon="bi-at" title="Username" desc="">
+                <code className="us-id-value">{user.username || '—'}</code>
+                {canManage && (
+                    <button className="btn-icon btn-icon-sm" title="Edit username" aria-label="Edit username" onClick={() => void actions.editUsername()}>
+                        <i className="bi bi-pencil" />
+                    </button>
+                )}
+            </SecurityItem>
+
+            {/* Email card — verify state + admin verification overrides */}
+            <SecurityItem
+                icon="bi-envelope"
+                title="Email"
+                desc={user.email ?? ''}
+            >
+                {hasEmail
+                    ? <Badge tone={user.is_email_verified ? 'success' : 'warning'}>{user.is_email_verified ? 'Verified' : 'Unverified'}</Badge>
+                    : <span className="dim-italic">Not set</span>}
+                {canManage && hasEmail && user.is_email_verified && (
+                    <button className="btn-icon btn-icon-sm" title="Mark as unverified" aria-label="Mark email as unverified" onClick={() => void actions.setVerification('is_email_verified', false, 'Email')}>
+                        <i className="bi bi-x-circle" />
+                    </button>
+                )}
+                {canManage && hasEmail && !user.is_email_verified && (
+                    <>
+                        <button className="btn-icon btn-icon-sm" title="Send verification email" aria-label="Send verification email" onClick={() => void actions.sendVerificationEmail()}>
+                            <i className="bi bi-envelope-arrow-up" />
+                        </button>
+                        <button className="btn-icon btn-icon-sm" title="Force verify" aria-label="Force verify email" onClick={() => void actions.setVerification('is_email_verified', true, 'Email')}>
+                            <i className="bi bi-patch-check" />
+                        </button>
+                    </>
+                )}
+                {canManage && (
+                    <button className="btn-icon btn-icon-sm" title="Edit email" aria-label="Edit email" onClick={() => void actions.editEmail()}>
+                        <i className="bi bi-pencil" />
+                    </button>
+                )}
+            </SecurityItem>
+
+            {/* Phone card — set / clear / verify overrides */}
+            <SecurityItem
+                icon="bi-telephone"
+                title="Phone"
+                desc={user.phone_number ?? ''}
+            >
+                {hasPhone
+                    ? <Badge tone={user.is_phone_verified ? 'success' : 'warning'}>{user.is_phone_verified ? 'Verified' : 'Unverified'}</Badge>
+                    : <span className="dim-italic">Not set</span>}
+                {canManage && hasPhone && (
+                    <>
+                        {user.is_phone_verified ? (
+                            <button className="btn-icon btn-icon-sm" title="Mark as unverified" aria-label="Mark phone as unverified" onClick={() => void actions.setVerification('is_phone_verified', false, 'Phone')}>
+                                <i className="bi bi-x-circle" />
+                            </button>
+                        ) : (
+                            <button className="btn-icon btn-icon-sm" title="Force verify" aria-label="Force verify phone" onClick={() => void actions.setVerification('is_phone_verified', true, 'Phone')}>
+                                <i className="bi bi-patch-check" />
+                            </button>
+                        )}
+                        <button className="btn-icon btn-icon-sm" title="Clear phone" aria-label="Clear phone" onClick={() => void actions.clearPhone()}>
+                            <i className="bi bi-x-lg" />
+                        </button>
+                        <button className="btn-icon btn-icon-sm" title="Edit phone" aria-label="Edit phone" onClick={() => void actions.editPhone()}>
+                            <i className="bi bi-pencil" />
+                        </button>
+                    </>
+                )}
+                {canManage && !hasPhone && (
+                    <button className="btn-icon btn-icon-sm" title="Set phone" aria-label="Set phone" onClick={() => void actions.setPhone()}>
+                        <i className="bi bi-plus-lg" />
+                    </button>
+                )}
+            </SecurityItem>
+
+            {/* Password card — send-reset flow (email OR SMS code) */}
+            <SecurityItem
+                icon="bi-key"
+                title="Password"
+                desc={resetContact ? `Send a password reset link or code to ${resetContact}` : 'No email or phone on file'}
+            >
+                {canManage && resetContact && (
+                    <button className="btn btn-compact" onClick={() => void actions.sendPasswordReset()}>
+                        <i className="bi bi-envelope" /> Send reset…
+                    </button>
+                )}
+            </SecurityItem>
+
+            <Eyebrow>
+                Account
+                {canManage && (
+                    <button className="btn-icon btn-icon-sm us-eyebrow-action" title="Edit account" aria-label="Edit account" onClick={() => void actions.editAccount()}>
+                        <i className="bi bi-pencil" />
+                    </button>
+                )}
+            </Eyebrow>
+            <FlatRow label="Account type">{accountType(user)}</FlatRow>
+            <FlatRow label="Status">
+                <Badge tone={user.is_active ? 'success' : 'muted'}>{user.is_active ? 'Active' : 'Inactive'}</Badge>
+            </FlatRow>
+            <FlatRow label="MFA">
+                <Badge tone={user.requires_mfa ? 'success' : 'muted'}>{user.requires_mfa ? 'Required' : 'Not required'}</Badge>
+            </FlatRow>
+            <FlatRow label="Last login">{fmt.relative(user.last_login, '—')}</FlatRow>
+            <FlatRow label="Last seen">{fmt.relative(user.last_activity, '—')}</FlatRow>
+            <FlatRow label="Timezone">
+                {timezone ?? <span className="dim">—</span>}
+            </FlatRow>
+
+            <Eyebrow>
+                Linked accounts
+                {canCredentials && <button className="btn-icon btn-icon-sm us-eyebrow-action" title="Manage linked accounts" aria-label="Manage linked accounts" onClick={() => actions.openLinkedAccountsModal()}>
+                    <i className="bi bi-pencil" />
+                </button>}
+            </Eyebrow>
+            <FlatRow label="SSO providers">
+                {(connections?.rows.length ?? 0) === 0
+                    ? <span className="dim-italic">No linked accounts</span>
+                    : (
+                        <span className="chip-row">
+                            {connections!.rows.map((c) => (
+                                <span key={c.id} className="chip chip-muted">
+                                    <i className={`bi ${providerIcon(c.provider)}`} /> {c.provider}{c.email ? ` · ${c.email}` : ''}
+                                </span>
+                            ))}
+                        </span>
+                    )}
+            </FlatRow>
+            <FlatRow label="2-factor">
+                <Badge tone={user.requires_mfa ? 'success' : 'muted'}>{user.requires_mfa ? 'Required' : 'Not required'}</Badge>
+                {canCredentials && <a href="#" className="us-inline-link" onClick={(e) => { e.preventDefault(); actions.openPasskeysModal(); }}>Manage passkeys</a>}
+            </FlatRow>
+        </>
+    );
+}

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

@@ -0,0 +1,123 @@
+// Security — AdminSecuritySection port (read in full 2026-08-05):
+// Authentication rows (send reset / magic link / admin set-password), MFA
+// rows (requirement toggle, authenticator state, SMS eligibility, passkeys),
+// Sessions (revoke all — the ArmedButton treatment kept from the earlier
+// port). Every action routes through the canonical handlers in actions.tsx
+// (the source's Phase 4 dedup: one handler per action across kebab + cards +
+// this section).
+//
+// Deviations, backend-grounded (django-mojo read 2026-08-05):
+//   · TOTP enrollment state: NO user graph serializes has_totp — the source
+//     getter fell back to "Not enrolled" against this backend and we keep
+//     that exact degrade (fields stay optional; a future graph extra lights
+//     it up). The disable affordance appears only when the state IS known.
+//   · Recovery codes: the source's GET /api/user/<id>/totp/recovery-codes
+//     route does not exist (codes are self-only at /api/account/totp/…) —
+//     row omitted rather than shipped against a phantom endpoint.
+import { Badge, Eyebrow, SecurityItem, ArmedButton, fmt } from '../../../../ui';
+import { PasskeyModel, type UserRow } from '../models';
+import type { UserAdminActions } from './actions';
+
+/** has_totp / totp_enabled ride no current graph — optional by design. */
+type UserSecurityRow = UserRow & { has_totp?: boolean; totp_enabled?: boolean };
+
+export function SecuritySection({ user, actions, canManage, canPasskeys }: {
+    user: UserRow;
+    actions: UserAdminActions;
+    canManage: boolean;
+    canPasskeys: boolean;
+}) {
+    const su = user as UserSecurityRow;
+    const totpEnabled = Boolean(su.has_totp || su.totp_enabled);
+    const smsEligible = Boolean(user.phone_number && user.is_phone_verified);
+    const { data: passkeys } = PasskeyModel.useList(
+        { user: user.id, size: 25, sort: '-created' },
+        { enabled: canPasskeys },
+    );
+    const passkeyCount = passkeys?.count ?? 0;
+    const hasPasskey = user.has_passkey === true || passkeyCount > 0;
+
+    return (
+        <>
+            <Eyebrow>Authentication</Eyebrow>
+
+            {canManage && <SecurityItem icon="bi-envelope" title="Send password reset" desc={`Send a reset link or code to ${user.email || user.phone_number || 'this user'}`}>
+                <button className="btn btn-compact" onClick={() => void actions.sendPasswordReset()}>Send…</button>
+            </SecurityItem>}
+
+            {canManage && <SecurityItem icon="bi-link-45deg" title="Send magic login link" desc={`Send a one-click login link to ${user.email || user.phone_number || 'this user'}`}>
+                <button className="btn btn-compact" onClick={() => void actions.sendMagicLink()}>Send…</button>
+            </SecurityItem>}
+
+            {canManage && (
+                <SecurityItem icon="bi-key" title="Set password" desc="Set a new password directly for this user">
+                    <button className="btn btn-compact" onClick={() => void actions.changePassword()}>Set…</button>
+                </SecurityItem>
+            )}
+
+            <Eyebrow>Multi-factor authentication</Eyebrow>
+
+            {canManage && (
+                <SecurityItem
+                    icon="bi-shield-lock"
+                    title="MFA requirement"
+                    desc={user.requires_mfa ? 'User is required to use MFA' : 'MFA is not required for this user'}
+                >
+                    <Badge tone={user.requires_mfa ? 'success' : 'muted'}>{user.requires_mfa ? 'Required' : 'Not required'}</Badge>
+                    <button className="btn btn-compact" onClick={() => void actions.toggleMfaRequirement()}>
+                        {user.requires_mfa ? 'Disable' : 'Enable'}
+                    </button>
+                </SecurityItem>
+            )}
+
+            <SecurityItem
+                icon="bi-key"
+                title="Authenticator (TOTP)"
+                desc={totpEnabled
+                    ? 'User has an authenticator app enrolled'
+                    : 'No enrolled authenticator on record'}
+            >
+                <Badge tone={totpEnabled ? 'success' : 'muted'}>{totpEnabled ? 'Enrolled' : 'Not enrolled'}</Badge>
+                {canManage && totpEnabled && (
+                    <button className="btn btn-compact" onClick={() => void actions.disableTotp()}>Disable</button>
+                )}
+            </SecurityItem>
+
+            <SecurityItem
+                icon="bi-phone"
+                title="SMS verification"
+                desc={smsEligible
+                    ? 'Verified phone available — SMS-based MFA can be used'
+                    : 'No verified phone on file — SMS-based MFA unavailable'}
+            >
+                <Badge tone={smsEligible ? 'success' : 'muted'}>{smsEligible ? 'Eligible' : 'Unavailable'}</Badge>
+            </SecurityItem>
+
+            {canPasskeys && <SecurityItem icon="bi-fingerprint" title="Passkeys" desc="View and manage registered passkeys">
+                {hasPasskey && <Badge tone="success">{passkeyCount > 0 ? `${passkeyCount} registered` : 'Registered'}</Badge>}
+                <button className="btn btn-compact" onClick={() => actions.openPasskeysModal()}>
+                    Manage <i className="bi bi-chevron-right" />
+                </button>
+            </SecurityItem>}
+
+            {canManage && (
+                <>
+                    <Eyebrow>Sessions</Eyebrow>
+                    <SecurityItem
+                        icon="bi-box-arrow-right"
+                        title="Revoke all sessions"
+                        desc={`Force sign-out from all devices · last seen ${fmt.relative(user.last_activity, 'never')}`}
+                    >
+                        {/* Irreversible + no input → the armed-button idiom. */}
+                        <ArmedButton
+                            label="Revoke all sessions"
+                            armedLabel="Click again — signs out every device"
+                            icon="bi-x-octagon"
+                            onConfirm={actions.revokeAllSessions}
+                        />
+                    </SecurityItem>
+                </>
+            )}
+        </>
+    );
+}