portal-mojo 0.2.7 → 0.2.8

package/src/account/AccountModal.tsx

@@ -0,0 +1,275 @@
+// AccountModal — the self-service "My account" modal (portal-mojo #7184,
+// approved shape 2026-10-07). ONE modal: a short rail is the whole
+// navigation, each entry one flat section (no drill-ins, no cross-links),
+// Sign out at the rail's foot, the section title + Close in the header.
+// ≈760×520 on desktop; under 720px a full-screen sheet whose rail becomes a
+// row of tabs across the top.
+//
+// Opened imperatively on the toolkit modal stack:
+//
+//     <UserMenu items={[{ label: 'My account', icon: 'bi-person-circle', onSelect: () => openAccountModal() }]} />
+//
+// Every focused flow (add passkey, authenticator, recovery codes, password,
+// email/phone change, verify, photo) stacks its own dialog over this one;
+// fresh-auth step-ups come from the app's FreshAuthHost. Styles: the app's
+// theme/account.css (tokens only, both themes).
+import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { hostedAuthUrl, logout, onAuth, redirectToHostedAuth, useAuthSnapshot, useMe, type Me } from '../client/runtime';
+import { fmt, modal, toast, useAvatarUrl, type UserMenuAuthMode } from '../ui';
+import type { NotificationKind } from './api';
+import {
+    AccountApiKeysSection, AccountNotificationsSection, AccountPasskeysSection, AccountProfileSection,
+    AccountSecuritySection, AccountSessionsSection,
+} from './AccountSections';
+
+export type AccountSectionKey = 'profile' | 'passkeys' | 'security' | 'sessions' | 'notifications' | 'api-keys';
+
+export const ACCOUNT_SECTIONS: readonly AccountSectionKey[] = ['profile', 'passkeys', 'security', 'sessions', 'notifications', 'api-keys'];
+
+export interface AccountSectionContext {
+    me: Me;
+    /** Close the whole modal. */
+    close: () => void;
+}
+
+/** An app-supplied rail entry, appended after the built-ins. */
+export interface AccountSectionDef {
+    key: string;
+    label: string;
+    /** Bootstrap-icons class, e.g. 'bi-building'. */
+    icon: string;
+    render: (ctx: AccountSectionContext) => ReactNode;
+}
+
+export interface AccountModalProps {
+    /** Built-in sections to show, in order (default all six). Unknown keys warn and drop. */
+    sections?: AccountSectionKey[];
+    /** App sections appended to the rail. */
+    extraSections?: AccountSectionDef[];
+    /** Section open on mount (built-in or extra key). Unknown keys warn and fall back to the first. */
+    initialSection?: string;
+    /** Replaces the default `logout()` on Sign out. A rejection toasts and keeps the modal open. */
+    onSignOut?: () => void | Promise<void>;
+    /**
+     * With the default sign out: 'hosted' sends the user to the hosted
+     * auth page after logout (when the deployment has one); 'inapp' goes to
+     * `#/auth/login`; omitted leaves routing to the app's auth gate.
+     */
+    authMode?: UserMenuAuthMode;
+    /** The notification kinds this app sends (labels/descriptions/channels). */
+    notificationKinds?: NotificationKind[];
+    /** Called when the modal should close (Close, Escape via the host, sign out). */
+    onClose: () => void;
+}
+
+const BUILT_INS: Record<AccountSectionKey, { label: string; icon: string }> = {
+    profile: { label: 'Profile', icon: 'bi-person' },
+    passkeys: { label: 'Passkeys', icon: 'bi-fingerprint' },
+    security: { label: 'Security', icon: 'bi-shield-lock' },
+    sessions: { label: 'Sessions', icon: 'bi-display' },
+    notifications: { label: 'Notifications', icon: 'bi-bell' },
+    'api-keys': { label: 'API keys', icon: 'bi-key' },
+};
+
+interface ResolvedSection {
+    key: string;
+    label: string;
+    icon: string;
+    render: (ctx: AccountSectionContext) => ReactNode;
+}
+
+const warned = new Set<string>();
+function warnOnce(message: string) {
+    if (warned.has(message)) return;
+    warned.add(message);
+    console.warn(message);
+}
+
+export function AccountModal({
+    sections = [...ACCOUNT_SECTIONS],
+    extraSections,
+    initialSection,
+    onSignOut,
+    authMode,
+    notificationKinds,
+    onClose,
+}: AccountModalProps) {
+    const auth = useAuthSnapshot();
+    const { data: me, isPending, isError, error } = useMe();
+    const uid = useId();
+    const tabRefs = useRef(new Map<string, HTMLButtonElement>());
+    const [signingOut, setSigningOut] = useState(false);
+
+    const resolved = useMemo<ResolvedSection[]>(() => {
+        const out: ResolvedSection[] = [];
+        for (const key of sections) {
+            if (!(key in BUILT_INS)) { warnOnce(`AccountModal: unknown section "${String(key)}" — dropped`); continue; }
+            const meta = BUILT_INS[key];
+            out.push({
+                key,
+                ...meta,
+                render: ({ me: row }) => {
+                    switch (key) {
+                        case 'profile': return <AccountProfileSection me={row} />;
+                        case 'passkeys': return <AccountPasskeysSection me={row} />;
+                        case 'security': return <AccountSecuritySection me={row} />;
+                        case 'sessions': return <AccountSessionsSection me={row} />;
+                        case 'notifications': return <AccountNotificationsSection me={row} kinds={notificationKinds} />;
+                        case 'api-keys': return <AccountApiKeysSection me={row} />;
+                    }
+                },
+            });
+        }
+        for (const extra of extraSections ?? []) {
+            if (out.some((s) => s.key === extra.key)) { warnOnce(`AccountModal: duplicate section key "${extra.key}" — dropped`); continue; }
+            out.push(extra);
+        }
+        return out;
+    }, [sections, extraSections, notificationKinds]);
+
+    const [active, setActive] = useState<string>(() => {
+        if (initialSection && resolved.some((s) => s.key === initialSection)) return initialSection;
+        if (initialSection) warnOnce(`AccountModal: unknown initialSection "${initialSection}" — opening "${resolved[0]?.key ?? ''}"`);
+        return resolved[0]?.key ?? '';
+    });
+    const current = resolved.find((s) => s.key === active) ?? resolved[0];
+
+    // On phones the rail is a scrolling tab strip: keep the active tab visible.
+    useEffect(() => {
+        tabRefs.current.get(active)?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }, [active]);
+
+    // The session ended underneath us (sign out elsewhere, refresh failure):
+    // there is no account to show. The auth events cover an app that drops
+    // this host on sign-out before the snapshot effect can run; the toolkit
+    // modal stack closes the child dialogs on the same events.
+    useEffect(() => {
+        if (!auth.authenticated) onClose();
+    }, [auth.authenticated, onClose]);
+    useEffect(() => {
+        const offs = [onAuth('logout', onClose), onAuth('unauthorized', onClose)];
+        return () => { for (const off of offs) off(); };
+    }, [onClose]);
+
+    const [avatarSrc, onAvatarError] = useAvatarUrl(me?.avatar?.id ?? null);
+    const name = (typeof me?.display_name === 'string' && me.display_name) || (typeof me?.email === 'string' && me.email) || auth.email || 'My account';
+
+    const signOut = async () => {
+        if (signingOut) return;
+        setSigningOut(true);
+        try {
+            if (onSignOut) {
+                await onSignOut();
+            } else {
+                logout();
+                if (authMode === 'hosted' && hostedAuthUrl()) redirectToHostedAuth();
+                else if (authMode === 'inapp' && typeof window !== 'undefined') window.location.hash = '#/auth/login';
+            }
+            onClose();
+        } catch (err) {
+            toast.error(`Sign out failed: ${err instanceof Error && err.message ? err.message : 'unknown error'}`);
+            setSigningOut(false);
+        }
+    };
+
+    // Roving tabs: arrows move between rail entries (vertical rail on
+    // desktop, horizontal strip on phones), Home/End jump to the ends.
+    const onTabKey = (event: KeyboardEvent<HTMLButtonElement>) => {
+        const keys = resolved.map((s) => s.key);
+        const at = keys.indexOf(active);
+        let next = -1;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') next = (at + 1) % keys.length;
+        else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') next = (at - 1 + keys.length) % keys.length;
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = keys.length - 1;
+        if (next < 0) return;
+        event.preventDefault();
+        setActive(keys[next]!);
+        tabRefs.current.get(keys[next]!)?.focus();
+    };
+
+    const tabId = (key: string) => `${uid}-tab-${key}`;
+    const panelId = `${uid}-panel`;
+    const titleId = `${uid}-title`;
+
+    const signOutButton = (className: string) => (
+        <button
+            type="button"
+            className={`acct-rail-item is-danger ${className}`}
+            aria-busy={signingOut || undefined}
+            disabled={signingOut}
+            onClick={() => void signOut()}
+        >
+            <i className={signingOut ? 'bi bi-arrow-repeat spin' : 'bi bi-box-arrow-right'} aria-hidden="true" />
+            <span>{signingOut ? 'Signing out…' : 'Sign out'}</span>
+        </button>
+    );
+
+    return (
+        <div className="acct" aria-labelledby={titleId}>
+            <nav className="acct-rail" aria-label="Account sections">
+                <div className="acct-who">
+                    <span className="acct-avatar acct-avatar-sm" aria-hidden="true">
+                        {avatarSrc ? <img src={avatarSrc} alt="" referrerPolicy="no-referrer" onError={onAvatarError} /> : fmt.initials(name)}
+                    </span>
+                    <span className="acct-who-text">
+                        <span className="acct-who-name">{name}</span>
+                        <span className="acct-who-sub">My account</span>
+                    </span>
+                </div>
+                <div className="acct-tabs" role="tablist" aria-label="Account sections" aria-orientation="vertical">
+                    {resolved.map((section) => (
+                        <button
+                            key={section.key}
+                            ref={(node) => { if (node) tabRefs.current.set(section.key, node); else tabRefs.current.delete(section.key); }}
+                            id={tabId(section.key)}
+                            type="button"
+                            role="tab"
+                            aria-selected={section.key === current?.key}
+                            aria-controls={panelId}
+                            tabIndex={section.key === current?.key ? 0 : -1}
+                            className={`acct-rail-item${section.key === current?.key ? ' is-active' : ''}`}
+                            onClick={() => setActive(section.key)}
+                            onKeyDown={onTabKey}
+                        >
+                            <i className={`bi ${section.icon}`} aria-hidden="true" />
+                            <span>{section.label}</span>
+                        </button>
+                    ))}
+                </div>
+                {signOutButton('acct-signout-rail')}
+            </nav>
+            <div className="acct-panel">
+                <header className="acct-head">
+                    <h2 id={titleId} className="acct-title">
+                        <span className="acct-title-section">{current?.label ?? 'My account'}</span>
+                        <span className="acct-title-sheet">My account</span>
+                    </h2>
+                    <button type="button" className="btn-icon" aria-label="Close" title="Close" onClick={onClose}>
+                        <i className="bi bi-x-lg" aria-hidden="true" />
+                    </button>
+                </header>
+                <div
+                    id={panelId}
+                    className="acct-body"
+                    role="tabpanel"
+                    aria-labelledby={current ? tabId(current.key) : undefined}
+                    data-section={current?.key}
+                >
+                    {isPending && <div className="acct-skel" aria-busy="true"><span className="skel skel-block" /><span className="skel skel-block" /></div>}
+                    {isError && <div className="form-alert" role="alert">{error instanceof Error ? error.message : 'Could not load your account.'}</div>}
+                    {me && current && <div key={current.key} className="acct-section">{current.render({ me, close: onClose })}</div>}
+                    {signOutButton('acct-signout-sheet')}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Open the AccountModal on the toolkit modal stack. Resolves when it closes.
+ * Pass any AccountModalProps except `onClose`.
+ */
+export function openAccountModal(props: Omit<AccountModalProps, 'onClose'> = {}): Promise<unknown> {
+    return modal.open((close) => <AccountModal {...props} onClose={() => close(null)} />, { size: 'lg' });
+}

package/src/account/AccountSections.tsx

@@ -0,0 +1,370 @@
+// The AccountModal's six flat sections (brief #7184, approved shape):
+// Profile · Passkeys · Security · Sessions · Notifications · API keys.
+// Each takes the signed-in `me` row and renders on its own — an app can
+// mount any of them outside the modal (e.g. a settings page).
+import { useQueryClient } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { forgotPassword, getDuid, isPasskeyRegistrationSupported, revokeOtherSessions, type Me } from '../client/runtime';
+import { Badge, FormView, fmt, modal, toast, useAvatarUrl } from '../ui';
+import type { Field } from '../client/runtime';
+import { disableTotp, type NotificationKind } from './api';
+import {
+    LoginEventModel, UserDeviceModel, browserLabel, deviceIcon,
+    type LoginEventRow, type UserDeviceRow,
+} from '../admin/security/devices/models';
+import {
+    accountErrorMessage, openAddPasskeyDialog, openAvatarDialog, openChangePasswordDialog,
+    openEmailChangeDialog, openPhoneChangeDialog, openRecoveryCodesView, openRegenerateRecoveryCodes,
+    openTotpEnrolDialog, openVerifyDialog,
+} from './dialogs';
+import { MeSaveModel, OAuthConnectionModel, accountKeys, invalidateMe, useRecoveryCodeStatus } from './models';
+import { NotificationPreferences } from './NotificationPreferences';
+import { PasskeyList } from './PasskeyList';
+import { ApiKeysSection } from './sections/ApiKeysSection';
+
+export interface AccountSectionProps {
+    me: Me;
+}
+
+const str = (value: unknown): string | null => (typeof value === 'string' && value ? value : null);
+
+function Row({ label, value, children }: { label: string; value: ReactNode; children?: ReactNode }) {
+    return (
+        <div className="acct-row">
+            <div className="acct-row-text">
+                <span className="acct-row-label">{label}</span>
+                <span className="acct-row-value">{value}</span>
+            </div>
+            {children && <div className="acct-row-actions">{children}</div>}
+        </div>
+    );
+}
+
+function Card({ icon, title, meta, metaTone, chip, children }: {
+    icon: string;
+    title: string;
+    meta: ReactNode;
+    metaTone?: 'warn';
+    chip?: ReactNode;
+    children?: ReactNode;
+}) {
+    return (
+        <div className="acct-card">
+            <span className="acct-card-icon" aria-hidden="true"><i className={`bi ${icon}`} /></span>
+            <div className="acct-card-info">
+                <span className="acct-card-title">{title}{chip}</span>
+                <span className={`acct-card-meta${metaTone === 'warn' ? ' is-warn' : ''}`}>{meta}</span>
+            </div>
+            {children && <div className="acct-card-actions">{children}</div>}
+        </div>
+    );
+}
+
+// ── Profile ───────────────────────────────────────────────────────────
+
+const PERSONAL_FIELDS: Field[] = [
+    { name: 'display_name', type: 'text', label: 'Display name', columns: 6 },
+    { name: 'metadata.timezone', type: 'timezone', label: 'Timezone', columns: 6 },
+];
+
+export function AccountProfileSection({ me }: AccountSectionProps) {
+    const [avatarSrc, onAvatarError] = useAvatarUrl(me.avatar?.id ?? null);
+    const name = str(me.display_name) ?? str(me.email) ?? 'You';
+    const email = str(me.email);
+    const phone = str(me.phone_number);
+    const emailVerified = me.is_email_verified === true;
+    const phoneVerified = me.is_phone_verified === true;
+    return (
+        <div className="acct-stack">
+            <div className="acct-identity">
+                <div className="acct-avatar-wrap">
+                    <span className="acct-avatar acct-avatar-lg" aria-hidden="true">
+                        {avatarSrc ? <img src={avatarSrc} alt="" referrerPolicy="no-referrer" onError={onAvatarError} /> : fmt.initials(name)}
+                    </span>
+                    <button type="button" className="acct-avatar-edit" aria-label="Change photo" title="Change photo" onClick={() => void openAvatarDialog()}>
+                        <i className="bi bi-camera" aria-hidden="true" />
+                    </button>
+                </div>
+                <div className="acct-identity-text">
+                    <span className="acct-identity-name">{name}</span>
+                    <span className="acct-identity-sub">{[email, me.is_superuser ? 'System admin' : null].filter(Boolean).join(' · ')}</span>
+                </div>
+            </div>
+
+            <section className="acct-block" aria-label="Contact">
+                <div className="acct-label">Contact</div>
+                <Row
+                    label="Email"
+                    value={email
+                        ? <>{email} <Badge tone={emailVerified ? 'success' : 'warning'}>{emailVerified ? 'Verified' : 'Unverified'}</Badge></>
+                        : <span className="dim-italic">Not set</span>}
+                >
+                    {email && !emailVerified && <button type="button" className="btn btn-compact" onClick={() => void openVerifyDialog('email')}>Verify</button>}
+                    <button type="button" className="btn btn-compact" onClick={() => void openEmailChangeDialog()}>Change</button>
+                </Row>
+                <Row
+                    label="Phone"
+                    value={phone
+                        ? <>{phone} <Badge tone={phoneVerified ? 'success' : 'warning'}>{phoneVerified ? 'Verified' : 'Unverified'}</Badge></>
+                        : <span className="dim-italic">Not set</span>}
+                >
+                    {phone && !phoneVerified && <button type="button" className="btn btn-compact" onClick={() => void openVerifyDialog('phone')}>Verify</button>}
+                    <button type="button" className="btn btn-compact" onClick={() => void openPhoneChangeDialog()}>{phone ? 'Change' : 'Add'}</button>
+                </Row>
+            </section>
+
+            <section className="acct-block" aria-label="Personal">
+                <div className="acct-label-row">
+                    <span className="acct-label">Personal</span>
+                    <span className="acct-hint">Saves as you type</span>
+                </div>
+                <FormView model={MeSaveModel} row={me} fields={PERSONAL_FIELDS} className="acct-form" />
+            </section>
+
+            <LinkedSignIns userId={me.id} />
+        </div>
+    );
+}
+
+const PROVIDERS: Record<string, { label: string; icon: string }> = {
+    google: { label: 'Google', icon: 'bi-google' },
+    apple: { label: 'Apple', icon: 'bi-apple' },
+    github: { label: 'GitHub', icon: 'bi-github' },
+    microsoft: { label: 'Microsoft', icon: 'bi-microsoft' },
+    facebook: { label: 'Facebook', icon: 'bi-facebook' },
+};
+const provider = (name: string) => PROVIDERS[name.toLowerCase()] ?? { label: name.charAt(0).toUpperCase() + name.slice(1), icon: 'bi-link-45deg' };
+
+/** The linked Google/Apple/… sign-ins, one row each, with Unlink. */
+export function LinkedSignIns({ userId }: { userId: number }) {
+    const { data } = OAuthConnectionModel.useList({ user: userId, size: 10, sort: '-created' });
+    const del = OAuthConnectionModel.useDelete();
+    const rows = data?.rows ?? [];
+    if (rows.length === 0) return null;
+
+    const unlink = async (id: number, label: string) => {
+        const ok = await modal.confirm({
+            title: `Unlink ${label}?`,
+            message: <>You won&rsquo;t be able to sign in with <b>{label}</b> until you sign in with it again from the sign-in page. Your {label} account itself is untouched.</>,
+            confirmText: 'Unlink',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await del.mutateAsync({ id });
+            toast.success(`${label} unlinked`);
+        } catch (err) {
+            // e.g. 400 "Cannot unlink your only login method. Set a password first." — as written.
+            toast.error(accountErrorMessage(err));
+        }
+    };
+
+    return (
+        <section className="acct-block acct-linked" aria-label="Linked sign-ins">
+            {rows.map((row) => {
+                const p = provider(row.provider);
+                return (
+                    <div key={row.id} className="acct-row">
+                        <div className="acct-linked-text">
+                            <span className="acct-linked-icon" aria-hidden="true"><i className={`bi ${p.icon}`} /></span>
+                            <span>Signed in with {p.label}{row.email && <> · <span className="dim">{row.email}</span></>}</span>
+                        </div>
+                        <div className="acct-row-actions">
+                            <button type="button" className="btn btn-compact" disabled={del.isPending} onClick={() => void unlink(row.id, p.label)}>Unlink</button>
+                        </div>
+                    </div>
+                );
+            })}
+        </section>
+    );
+}
+
+// ── Passkeys ──────────────────────────────────────────────────────────
+
+export function AccountPasskeysSection({ me }: AccountSectionProps) {
+    const supported = isPasskeyRegistrationSupported();
+    return (
+        <div className="acct-stack acct-fill">
+            <p className="acct-intro">Sign in with Touch ID, Face ID, Windows Hello or a security key instead of a password. A passkey works on the site it was made on.</p>
+            <PasskeyList userId={me.id} showDisable={false} emptyText="No passkeys yet." />
+            {supported
+                ? (
+                    <button type="button" className="acct-add" onClick={() => void openAddPasskeyDialog()}>
+                        <i className="bi bi-plus-lg" aria-hidden="true" /> Add a passkey on this device
+                    </button>
+                )
+                : <p className="acct-note">This browser can&rsquo;t create passkeys. Try a current Chrome, Safari, Edge or Firefox.</p>}
+            <p className="acct-foot">Removing a passkey signs out nothing. Keep at least one other way to sign in.</p>
+        </div>
+    );
+}
+
+// ── Security ──────────────────────────────────────────────────────────
+
+export function AccountSecuritySection({ me }: AccountSectionProps) {
+    const qc = useQueryClient();
+    const status = useRecoveryCodeStatus(me.id);
+    const enrolled = status.data?.enrolled === true;
+    const remaining = status.data?.remaining ?? 0;
+    const required = me.requires_mfa === true;
+    const hasPassword = me.has_password !== false;
+    const email = str(me.email);
+
+    const turnOff = async () => {
+        const ok = await modal.confirm({
+            title: 'Turn off the authenticator app?',
+            message: required
+                ? <>Codes from the app stop working right away. <b>Two-step sign-in stays required on this account</b> — finish signing in with a passkey or a verified phone, or set up a new app. Only an administrator can remove the requirement.</>
+                : <>Codes from the app stop working right away and sign-in no longer asks for them.</>,
+            confirmText: 'Turn off',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await disableTotp();
+            toast.success('Authenticator app turned off');
+        } catch (err) {
+            toast.error(accountErrorMessage(err));
+        } finally {
+            void qc.invalidateQueries({ queryKey: accountKeys.recoveryStatus(me.id) });
+            void invalidateMe(qc);
+        }
+    };
+
+    const setPassword = async () => {
+        if (!email) return;
+        try {
+            await forgotPassword(email, 'link');
+            toast.success(`We sent a link to ${email} to set your password.`);
+        } catch (err) {
+            toast.error(accountErrorMessage(err));
+        }
+    };
+
+    return (
+        <div className="acct-stack">
+            <p className="acct-intro">
+                {required ? 'Two-step sign-in is required on this account.' : 'Add an authenticator app for two-step sign-in.'} Passkeys have their own section.
+            </p>
+            <Card
+                icon="bi-shield-lock"
+                title="Authenticator app"
+                chip={status.data && <Badge tone={enrolled ? 'success' : 'muted'}>{enrolled ? 'On' : 'Off'}</Badge>}
+                meta={status.isPending ? 'Checking…' : enrolled ? 'Sign-in asks for a code from your app' : 'Use 1Password, Google Authenticator or a similar app'}
+            >
+                <button type="button" className="btn btn-compact" disabled={status.isPending} onClick={() => void openTotpEnrolDialog({ replacing: enrolled })}>
+                    {enrolled ? 'Set up a new app' : 'Set up'}
+                </button>
+                {enrolled && <button type="button" className="btn btn-compact acct-danger" onClick={() => void turnOff()}>Turn off</button>}
+            </Card>
+            <Card
+                icon="bi-key"
+                title="Recovery codes"
+                meta={enrolled ? `${remaining} of 8 left · regenerate a fresh set any time` : 'Available once an authenticator app is on'}
+                metaTone={enrolled && remaining <= 2 ? 'warn' : undefined}
+            >
+                {enrolled && <button type="button" className="btn btn-compact" onClick={() => void openRecoveryCodesView()}>View</button>}
+                {enrolled && <button type="button" className="btn btn-compact" onClick={() => void openRegenerateRecoveryCodes()}>Regenerate</button>}
+            </Card>
+            <Card
+                icon="bi-asterisk"
+                title="Password"
+                meta={hasPassword ? 'Change it any time with your current password' : 'Not set — you sign in with a passkey or a linked account'}
+            >
+                {hasPassword
+                    ? <button type="button" className="btn btn-compact" onClick={() => void openChangePasswordDialog()}>Change</button>
+                    : <button type="button" className="btn btn-compact" disabled={!email} onClick={() => void setPassword()}>Email me a link</button>}
+            </Card>
+        </div>
+    );
+}
+
+// ── Sessions ──────────────────────────────────────────────────────────
+
+const ACTIVE_WINDOW_SECONDS = 5 * 60;
+
+function osFamily(row: UserDeviceRow): string {
+    const family = row.device_info?.os?.family;
+    if (!family || family === 'Other') return 'unknown OS';
+    return family === 'Mac OS X' ? 'macOS' : family;
+}
+
+function place(login: LoginEventRow | undefined): string | null {
+    if (!login) return null;
+    const parts = [login.city, login.region_code || login.region, login.city || login.region ? null : login.country_code].filter(Boolean);
+    return parts.length ? parts.join(', ') : login.country_code ?? null;
+}
+
+export function AccountSessionsSection({ me }: AccountSectionProps) {
+    const devices = UserDeviceModel.useList({ user: me.id, sort: '-last_seen', size: 4 });
+    const logins = LoginEventModel.useList({ user: me.id, sort: '-created', size: 50, graph: 'default' });
+    const thisDuid = getDuid();
+    const rows = devices.data?.rows ?? [];
+    const more = Math.max(0, (devices.data?.count ?? 0) - rows.length);
+    const latestLogin = (duid: string) => (logins.data?.rows ?? []).find((row) => row.device?.duid === duid);
+    const now = Date.now() / 1000;
+
+    const revoke = async () => {
+        const ok = await modal.confirm({
+            title: 'Sign out everywhere else?',
+            message: 'Every other browser and app signed in to your account is signed out now. This device stays signed in.',
+            confirmText: 'Sign out others',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await revokeOtherSessions();
+            toast.success('Signed out of every other session');
+        } catch (err) {
+            toast.error(accountErrorMessage(err));
+        }
+    };
+
+    return (
+        <div className="acct-stack acct-fill">
+            <p className="acct-intro">Devices that have used your account recently.</p>
+            {devices.isPending && <div className="acct-skel" aria-busy="true"><span className="skel skel-block" /></div>}
+            {devices.isError && <p className="dim" role="alert">{accountErrorMessage(devices.error)}</p>}
+            {!devices.isPending && !devices.isError && rows.length === 0 && <p className="dim">No devices recorded yet.</p>}
+            <ul className="acct-cards" aria-label="Devices">
+                {rows.map((row) => {
+                    const login = latestLogin(row.duid);
+                    const isThis = row.duid === thisDuid;
+                    const active = isThis || now - row.last_seen < ACTIVE_WINDOW_SECONDS;
+                    const where = place(login);
+                    const browser = browserLabel(row.device_info).replace(/ \d.*$/, '');
+                    return (
+                        <li key={row.id} className="acct-card">
+                            <span className="acct-card-icon" aria-hidden="true"><i className={`bi ${deviceIcon(row.device_info)}`} /></span>
+                            <div className="acct-card-info">
+                                <span className="acct-card-title">{browser} on {osFamily(row)}</span>
+                                <span className="acct-card-meta">{[where, active ? 'active now' : fmt.relative(row.last_seen)].filter(Boolean).join(' · ')}</span>
+                            </div>
+                            <div className="acct-card-actions">
+                                {isThis && <Badge tone="success">This device</Badge>}
+                                {login && (login.is_new_country || login.is_new_region) && <Badge tone="warning">New location</Badge>}
+                            </div>
+                        </li>
+                    );
+                })}
+            </ul>
+            {more > 0 && <p className="acct-note">And {more} more device{more === 1 ? '' : 's'}.</p>}
+            <div className="acct-signout-others">
+                <span>Don&rsquo;t recognise one? Sign the others out. This device stays signed in.</span>
+                <button type="button" className="btn btn-compact acct-danger" onClick={() => void revoke()}>Sign out everywhere else</button>
+            </div>
+        </div>
+    );
+}
+
+// ── Notifications ─────────────────────────────────────────────────────
+
+export function AccountNotificationsSection({ kinds }: AccountSectionProps & { kinds?: NotificationKind[] }) {
+    return <NotificationPreferences kinds={kinds} />;
+}
+
+// ── API keys ──────────────────────────────────────────────────────────
+
+export function AccountApiKeysSection({ me }: AccountSectionProps) {
+    return <ApiKeysSection user={{ id: me.id, display_name: str(me.display_name), email: str(me.email) }} canManage isSelf />;
+}