@oxyhq/services 13.0.3 → 13.1.1

package/src/ui/components/ProfileMenu.tsx

@@ -0,0 +1,416 @@
+import type React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import {
+    View,
+    Pressable,
+    Modal,
+    ScrollView,
+    ActivityIndicator,
+    Platform,
+    type ViewStyle,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Text } from '@oxyhq/bloom/typography';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { toast, useDialogControl, Dialog } from '@oxyhq/bloom';
+import { Divider } from '@oxyhq/bloom/divider';
+import { isDev, logger as loggerUtil } from '@oxyhq/core';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+import { useDeviceAccounts } from '../hooks/useDeviceAccounts';
+
+const isWeb = Platform.OS === 'web';
+
+/** Fixed popover width on web. `ProfileButton` mirrors this when anchoring. */
+const MENU_WIDTH = 300;
+
+/**
+ * Web-only anchor. `ProfileButton` measures its trigger and anchors the panel's
+ * BOTTOM-LEFT corner so the menu opens UPWARD from the sidebar footer. Native
+ * ignores the anchor and docks the panel to the bottom as a sheet.
+ */
+export interface ProfileMenuAnchor {
+    /** Distance from the viewport left, for the panel's LEFT edge. */
+    left: number;
+    /** Distance from the viewport bottom, for the panel's BOTTOM edge (opens upward). */
+    bottom: number;
+}
+
+export interface ProfileMenuProps {
+    open: boolean;
+    onClose: () => void;
+    /** Web-only trigger anchor. Native ignores this (bottom-sheet style). */
+    anchor?: ProfileMenuAnchor | null;
+    /** Navigate to the "Manage account" surface (settings). */
+    onNavigateManage: () => void;
+    /** Start the add-account / sign-in flow for an additional account. */
+    onAddAccount: () => void;
+    /** Optional: navigate to the signed-in user's own profile. */
+    onNavigateProfile?: () => void;
+    /** Called before the active identity changes so apps can clear scoped state. */
+    onBeforeSessionChange?: () => void | Promise<void>;
+}
+
+/**
+ * Clean device-account switcher, modeled on the inbox `AccountMenu` but written
+ * fresh with NativeWind classNames + Bloom primitives. Lists every account
+ * signed in on this device (from {@link useDeviceAccounts}); tapping a row
+ * switches, and each inactive row carries a sign-out icon. Below the list:
+ * Add account, Manage account, optional View profile, and Sign out of all.
+ *
+ * Renders as an upward-opening popover anchored to the trigger on web, and a
+ * bottom-sheet style modal on native.
+ */
+const ProfileMenu: React.FC<ProfileMenuProps> = ({
+    open,
+    onClose,
+    anchor,
+    onNavigateManage,
+    onAddAccount,
+    onNavigateProfile,
+    onBeforeSessionChange,
+}) => {
+    const {
+        activeSessionId,
+        switchSession,
+        logoutAll,
+        removeSession,
+    } = useOxy();
+    const { t } = useI18n();
+    const { colors } = useTheme();
+
+    const { accounts } = useDeviceAccounts();
+
+    const [busySessionId, setBusySessionId] = useState<string | null>(null);
+    const [removingSessionId, setRemovingSessionId] = useState<string | null>(null);
+    const [signingOutAll, setSigningOutAll] = useState(false);
+
+    const signOutAllDialog = useDialogControl();
+
+    const isSwitching = busySessionId !== null;
+    const actionDisabled = isSwitching || removingSessionId !== null || signingOutAll;
+
+    // Switch to a non-active account through the SDK's canonical switch path.
+    const handleSwitch = useCallback(async (sessionId: string) => {
+        if (sessionId === activeSessionId || busySessionId) {
+            return;
+        }
+        setBusySessionId(sessionId);
+        try {
+            await onBeforeSessionChange?.();
+            await switchSession(sessionId);
+            toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
+            onClose();
+        } catch (error) {
+            if (!isDev()) {
+                loggerUtil.warn('Switch account failed', { component: 'ProfileMenu' }, error as unknown);
+            }
+            toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
+        } finally {
+            setBusySessionId(null);
+        }
+    }, [activeSessionId, busySessionId, switchSession, t, onClose, onBeforeSessionChange]);
+
+    // Sign out a specific inactive account without switching/clearing the active
+    // one. The menu stays open so the user can keep managing accounts.
+    const handleRemove = useCallback(async (sessionId: string) => {
+        if (sessionId === activeSessionId || removingSessionId) {
+            return;
+        }
+        setRemovingSessionId(sessionId);
+        try {
+            await removeSession(sessionId);
+            toast.success(t('common.actions.signedOut') || 'Signed out');
+        } catch (error) {
+            loggerUtil.warn('Remove account failed', { component: 'ProfileMenu' }, error as unknown);
+            toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+        } finally {
+            setRemovingSessionId(null);
+        }
+    }, [activeSessionId, removingSessionId, removeSession, t]);
+
+    const performSignOutAll = useCallback(async () => {
+        if (signingOutAll) {
+            return;
+        }
+        setSigningOutAll(true);
+        try {
+            await onBeforeSessionChange?.();
+            await logoutAll();
+            toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'Signed out of all accounts');
+            onClose();
+        } catch (error) {
+            loggerUtil.warn('Sign out all failed', { component: 'ProfileMenu' }, error as unknown);
+            toast.error(t('common.errors.signOutAllFailed') || 'Failed to sign out of all accounts');
+        } finally {
+            setSigningOutAll(false);
+        }
+    }, [signingOutAll, logoutAll, t, onClose, onBeforeSessionChange]);
+
+    // Escape-to-close (web only).
+    useEffect(() => {
+        if (!open || !isWeb || typeof document === 'undefined') {
+            return undefined;
+        }
+        const onKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', onKey, true);
+        return () => document.removeEventListener('keydown', onKey, true);
+    }, [open, onClose]);
+
+    if (!open) {
+        return null;
+    }
+
+    // Web: anchor the panel's bottom-left corner to the measured trigger, falling
+    // back to a bottom-left placement when no anchor was captured. Native ignores
+    // this (the panel docks to the bottom via the overlay's flex-end).
+    const panelAnchorStyle: ViewStyle | undefined = isWeb
+        ? {
+            position: 'absolute',
+            width: MENU_WIDTH,
+            left: anchor?.left ?? 8,
+            bottom: anchor?.bottom ?? 8,
+        }
+        : undefined;
+
+    const content = (
+        <Pressable
+            // Swallow taps inside the panel so they never reach the overlay's
+            // outside-tap-to-close handler.
+            onPress={() => undefined}
+            className={
+                isWeb
+                    ? 'overflow-hidden rounded-2xl border border-border bg-background'
+                    : 'overflow-hidden rounded-t-3xl bg-background pb-3'
+            }
+            style={[
+                panelAnchorStyle,
+                !isWeb ? { maxHeight: '85%' } : { maxHeight: '85%' },
+                styles.shadow,
+            ]}
+            accessibilityRole="menu"
+            accessibilityLabel={t('accountMenu.label') || 'Account menu'}
+        >
+            <ScrollView
+                className="grow-0"
+                contentContainerClassName="py-1"
+                showsVerticalScrollIndicator={false}
+            >
+                {/* 1) Device accounts — active first (checkmark), others switchable. */}
+                {accounts.map((account) => {
+                    const isActive = account.isCurrent;
+                    const isBusy = busySessionId === account.sessionId;
+                    const isRemoving = removingSessionId === account.sessionId;
+                    return (
+                        <Pressable
+                            key={`account-${account.sessionId}`}
+                            accessibilityRole="menuitem"
+                            accessibilityLabel={account.displayName}
+                            accessibilityState={{ selected: isActive }}
+                            onPress={() => handleSwitch(account.sessionId)}
+                            disabled={isActive || isBusy || isSwitching}
+                            className={`flex-row items-center gap-3 px-4 py-2.5 ${
+                                isActive ? 'bg-secondary' : ''
+                            } ${isSwitching && !isActive ? 'opacity-40' : ''}`}
+                        >
+                            <Avatar
+                                source={account.user.avatar ?? undefined}
+                                uri={account.avatarUrl}
+                                variant="thumb"
+                                name={account.displayName}
+                                size={isActive ? 40 : 32}
+                            />
+                            <View className="min-w-0 flex-1">
+                                <Text
+                                    className={`text-foreground ${isActive ? 'font-semibold' : 'font-medium'}`}
+                                    numberOfLines={1}
+                                >
+                                    {account.displayName}
+                                </Text>
+                                {account.email ? (
+                                    <Text
+                                        className="text-xs text-muted-foreground"
+                                        numberOfLines={1}
+                                    >
+                                        {account.email}
+                                    </Text>
+                                ) : null}
+                            </View>
+                            {isBusy ? (
+                                <ActivityIndicator color={colors.primary} size="small" />
+                            ) : isActive ? (
+                                <MaterialCommunityIcons name="check" size={20} color={colors.primary} />
+                            ) : isRemoving ? (
+                                <ActivityIndicator color={colors.textSecondary} size="small" />
+                            ) : (
+                                <Pressable
+                                    accessibilityRole="button"
+                                    accessibilityLabel={
+                                        t('accountMenu.signOutAccount', { name: account.displayName })
+                                        || `Sign out ${account.displayName}`
+                                    }
+                                    onPress={() => handleRemove(account.sessionId)}
+                                    disabled={actionDisabled}
+                                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                                    className="h-7 w-7 items-center justify-center rounded-full opacity-60"
+                                >
+                                    <MaterialCommunityIcons
+                                        name="logout"
+                                        size={18}
+                                        color={colors.textSecondary}
+                                    />
+                                </Pressable>
+                            )}
+                        </Pressable>
+                    );
+                })}
+
+                {/* 2) Switching indicator. */}
+                {isSwitching ? (
+                    <View className="flex-row items-center justify-center gap-2 py-2">
+                        <ActivityIndicator color={colors.textSecondary} size="small" />
+                        <Text className="text-xs font-medium text-muted-foreground">
+                            {t('accountMenu.switching') || 'Switching account…'}
+                        </Text>
+                    </View>
+                ) : null}
+
+                <Divider color={colors.border} spacing={4} />
+
+                {/* 3) Add another account. */}
+                <ActionRow
+                    icon="account-plus-outline"
+                    iconColor={colors.icon}
+                    label={t('accountMenu.addAnother') || 'Add another account'}
+                    disabled={actionDisabled}
+                    onPress={() => {
+                        onClose();
+                        onAddAccount();
+                    }}
+                />
+
+                {/* 4) Manage account. */}
+                <ActionRow
+                    icon="cog-outline"
+                    iconColor={colors.icon}
+                    label={t('accountMenu.manage') || 'Manage your Oxy Account'}
+                    disabled={actionDisabled}
+                    onPress={() => {
+                        onClose();
+                        onNavigateManage();
+                    }}
+                />
+
+                {/* 5) View profile (optional). */}
+                {onNavigateProfile ? (
+                    <ActionRow
+                        icon="account-outline"
+                        iconColor={colors.icon}
+                        label={t('accountMenu.viewProfile') || 'View profile'}
+                        disabled={actionDisabled}
+                        onPress={() => {
+                            onClose();
+                            onNavigateProfile();
+                        }}
+                    />
+                ) : null}
+
+                {/* 6) Sign out of all accounts. */}
+                <Divider color={colors.border} spacing={4} />
+                <Pressable
+                    accessibilityRole="menuitem"
+                    accessibilityLabel={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
+                    onPress={() => signOutAllDialog.open()}
+                    disabled={actionDisabled}
+                    className={`flex-row items-center gap-3 px-4 py-3 ${actionDisabled ? 'opacity-40' : ''}`}
+                >
+                    {signingOutAll ? (
+                        <ActivityIndicator color={colors.error} size="small" />
+                    ) : (
+                        <MaterialCommunityIcons name="logout" size={18} color={colors.error} />
+                    )}
+                    <Text className="font-medium" style={{ color: colors.error }}>
+                        {t('accountMenu.signOutAll') || 'Sign out of all accounts'}
+                    </Text>
+                </Pressable>
+            </ScrollView>
+        </Pressable>
+    );
+
+    return (
+        <Modal
+            visible={open}
+            transparent
+            animationType={isWeb ? 'fade' : 'slide'}
+            onRequestClose={onClose}
+        >
+            <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={t('common.actions.close') || 'Close'}
+                onPress={onClose}
+                className={isWeb ? 'flex-1 relative' : 'flex-1 justify-end'}
+                style={!isWeb ? styles.nativeScrim : undefined}
+            >
+                {content}
+            </Pressable>
+
+            <Dialog
+                control={signOutAllDialog}
+                title={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
+                description={t('common.confirms.signOutAll') || 'Are you sure you want to sign out of all accounts?'}
+                actions={[
+                    {
+                        label: t('accountMenu.signOutAll') || 'Sign out of all accounts',
+                        color: 'destructive',
+                        onPress: performSignOutAll,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+        </Modal>
+    );
+};
+
+/** Bottom-section action row (Add account / Manage / View profile). */
+const ActionRow: React.FC<{
+    icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
+    iconColor: string;
+    label: string;
+    disabled: boolean;
+    onPress: () => void;
+}> = ({ icon, iconColor, label, disabled, onPress }) => (
+    <Pressable
+        accessibilityRole="menuitem"
+        accessibilityLabel={label}
+        onPress={onPress}
+        disabled={disabled}
+        className={`flex-row items-center gap-3 px-4 py-3 ${disabled ? 'opacity-40' : ''}`}
+    >
+        <MaterialCommunityIcons name={icon} size={20} color={iconColor} />
+        <Text className="font-medium text-foreground">{label}</Text>
+    </Pressable>
+);
+
+// The panel's drop shadow and the native scrim are the only values with no
+// NativeWind class equivalent in this package (dynamic elevation + rgba scrim),
+// so they stay as small inline objects rather than raw class-replaceable styles.
+const styles = {
+    shadow: {
+        shadowColor: '#000',
+        shadowOpacity: 0.18,
+        shadowRadius: 24,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 12,
+    } satisfies ViewStyle,
+    nativeScrim: {
+        backgroundColor: 'rgba(0,0,0,0.32)',
+    } satisfies ViewStyle,
+};
+
+export default ProfileMenu;

package/src/ui/components/SettingsIcon.tsx

@@ -5,7 +5,7 @@ import { darkenColor } from '../utils/colorUtils';
 
 interface SettingsIconProps {
     /** MaterialCommunityIcons icon name */
-    name: string;
+    name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
     /** Background color for the circle */
     color: string;
     /** Icon size (default 14, fits bloom's 20x20 container) */
@@ -26,7 +26,7 @@ const SettingsIconComponent: React.FC<SettingsIconProps> = ({
     size = 20,
 }) => (
     <View style={[styles.circle, { width: size, height: size, borderRadius: size / 2, backgroundColor: color }]}>
-        <MaterialCommunityIcons name={name as any} size={iconSize} color={darkenColor(color)} />
+        <MaterialCommunityIcons name={name} size={iconSize} color={darkenColor(color)} />
     </View>
 );
 

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -102,7 +102,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     }, [imageDimensions, containerWidth]);
 
     const fileDetailItems = useMemo(() => {
-        const items: Array<{ id: string; iconName: string; iconColor: string; title: string; description: string }> = [
+        const items: Array<{ id: string; iconName: React.ComponentProps<typeof MaterialCommunityIcons>['name']; iconColor: string; title: string; description: string }> = [
             {
                 id: 'filename',
                 iconName: 'file-document',

package/src/ui/components/payment/types.ts

@@ -1,4 +1,6 @@
+import type React from 'react';
 import type { Animated } from 'react-native';
+import type { Ionicons } from '@expo/vector-icons';
 
 export type PaymentItem = {
     type: 'product' | 'subscription' | 'service' | 'fee' | string;
@@ -25,7 +27,7 @@ export interface CardDetails {
 export interface PaymentMethod {
     key: string;
     label: string;
-    icon: string;
+    icon: React.ComponentProps<typeof Ionicons>['name'];
     description: string;
 }
 

package/src/ui/context/OxyContext.tsx

@@ -43,7 +43,7 @@ import { useAuthOperations } from './hooks/useAuthOperations';
 import { useDeviceManagement } from '../hooks/useDeviceManagement';
 import { getStorageKeys, createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
 import { isInvalidSessionError, isTimeoutOrNetworkError } from '../utils/errorHandlers';
-import { readActiveAuthuser, writeActiveAuthuser } from '../utils/activeAuthuser';
+import { readActiveAuthuser, writeActiveAuthuser, clearSignedOut, isSilentRestoreSuppressed } from '../utils/activeAuthuser';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
 import { useQueryClient } from '@tanstack/react-query';
@@ -1322,16 +1322,30 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     // run cookie-restore BEFORE those probes (and disable the later duplicate).
     //
     // Read ONCE here (synchronously usable by the step `enabled` gates below).
-    // It is non-null ONLY on first-party `*.oxy.so` web apps that persist the
-    // slot — a cross-apex RP never writes it (its restore funnels through
-    // `handleWebSSOSession`, which does not touch the authuser), and native has
-    // no localStorage, so both keep their existing order untouched. The
-    // earlier `stored-session` step still runs first (FIX-A latency), and when
-    // a slot exists but its cookies have all lapsed, cookie-restore simply
-    // returns no accounts and the chain falls through to the cross-domain
-    // fallbacks exactly as before.
+    // It is non-null ONLY on first-party web apps that persist the slot. Both the
+    // device sign-in/switch paths AND `handleWebSSOSession` (FedCM/SSO/credentials
+    // commit funnel) now persist it — but only when the session genuinely joined
+    // the device set: `establishDeviceRefreshSlot` returns an `authuser` ONLY on
+    // first-party web (same registrable apex as the API), so a cross-apex RP never
+    // writes a phantom slot and native has no localStorage. Both therefore keep
+    // their existing order untouched. The earlier `stored-session` step still runs
+    // first (FIX-A latency), and when a slot exists but its cookies have all
+    // lapsed, cookie-restore simply returns no accounts and the chain falls through
+    // to the cross-domain fallbacks exactly as before.
     const prioritizeMultiAccount = isWebBrowser() && readActiveAuthuser() !== null;
 
+    // DELIBERATELY-SIGNED-OUT gate (web): when the user pressed "Sign out", the
+    // central IdP session (FedCM credential association / per-apex `fedcm_session`
+    // cookie) can still be live, so the AUTOMATIC silent steps below
+    // (`fedcm-silent`, `silent-iframe`) would re-mint a session on the very next
+    // cold boot and sign the user back in without intent. Read the durable flag
+    // ONCE here (synchronously usable by the step `enabled` gates) and skip those
+    // two steps while it is set. Any deliberate sign-in clears it. The `sso-bounce`
+    // step is already self-suppressed after sign-out (its `hasPriorSession` hint is
+    // cleared), and the local restore steps (`stored-session`, cookie-restore) are
+    // unaffected — a deliberate sign-out clears those credentials anyway.
+    const silentRestoreBlocked = isSilentRestoreSuppressed();
+
     try {
       const outcome = await runColdBoot<true>({
         steps: [
@@ -1461,7 +1475,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
             // valid local bearer, and skipping it avoids the silent round-trip.
             id: 'fedcm-silent',
             enabled: () =>
-              !storedSessionRestored && fedcmSupported && !servicesSilentAttempted.has(silentKey),
+              !storedSessionRestored &&
+              !silentRestoreBlocked &&
+              fedcmSupported &&
+              !servicesSilentAttempted.has(silentKey),
             run: async () => {
               servicesSilentAttempted.add(silentKey);
               const session = await oxyServices.silentSignInWithFedCM?.();
@@ -1496,7 +1513,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
             // FIX-D: bounded by `SILENT_IFRAME_TIMEOUT` (plus `iframe.onerror`
             // fail-fast in core) so a no-message iframe cannot stall cold boot.
             id: 'silent-iframe',
-            enabled: () => !storedSessionRestored && isWebBrowser(),
+            enabled: () => !storedSessionRestored && !silentRestoreBlocked && isWebBrowser(),
             run: async () => {
               if (!commitWebSession) {
                 return { kind: 'skip' };
@@ -1779,6 +1796,38 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     }
     oxyServices.httpService.setTokens(session.accessToken);
 
+    // A committed web session re-enables automatic silent restore: clear the
+    // durable "deliberately signed out" flag. This funnel is reached by deliberate
+    // sign-ins (password, interactive FedCM, `/sso` return) AND by the silent
+    // cold-boot steps — but those are GATED on the flag, so when it is set they
+    // never run and never reach here; clearing is therefore only hit on a genuine
+    // (re-)sign-in or when restore was already permitted, both correct.
+    clearSignedOut();
+
+    // Register this primary session in the device's first-party multi-account
+    // refresh-cookie set (web only). Every web primary-session restore funnels
+    // through here — FedCM silent (`/fedcm/exchange`), per-apex `/auth/silent`
+    // iframe, central `/sso` return, and keyless password sign-in. Of those, only
+    // a same-apex `/fedcm/exchange` plants an `oxy_rt_<authuser>` slot as a side
+    // effect; the cross-origin/credential-less restores (`/sso/exchange`,
+    // `/auth/silent` postMessage) cannot set an `api.oxy.so` cookie at all. So
+    // WITHOUT this call a web primary never joins the device set: `refresh-all`
+    // returns zero accounts, and account-switch persistence + the
+    // `cookie-restore-active` cold-boot step have no foundation. Calling the shared
+    // `POST /auth/session` primitive here makes EVERY primary participate in the
+    // set, re-plants the rotated token, and records the active `authuser` so the
+    // next cold boot's `cookie-restore-active` reconciles the persisted active
+    // (possibly switched) account instead of `fedcm-silent` clobbering it back to
+    // the primary. Best-effort: a `null` result (native / transient failure)
+    // leaves the in-session token untouched.
+    const primaryAuthuser = await oxyServices.establishDeviceRefreshSlot();
+    // A non-null slot is returned ONLY on first-party web (the helper gates on
+    // platform + same registrable apex), so recording the active slot here is safe
+    // and never writes a phantom authuser for a cross-apex RP or native.
+    if (typeof primaryAuthuser === 'number') {
+      writeActiveAuthuser(primaryAuthuser);
+    }
+
     const clientSession = {
       sessionId: session.sessionId,
       deviceId: session.deviceId || '',
@@ -1786,6 +1835,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       lastActive: new Date().toISOString(),
       userId: session.user.id?.toString() ?? '',
       isCurrent: true,
+      ...(typeof primaryAuthuser === 'number' ? { authuser: primaryAuthuser } : null),
     };
 
     updateSessions([clientSession], { merge: true });
@@ -2099,6 +2149,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       throw new Error('Account switch did not return a valid session');
     }
 
+    // A switch is a deliberate sign-in into an account: re-enable automatic silent
+    // restore by clearing any prior "deliberately signed out" flag.
+    clearSignedOut();
+
     // `oxyServices.switchToAccount` already planted `result.accessToken` as the
     // active token; mirror the minted session into the multi-account store and
     // mark it current, recording the device `authuser` slot so web silent-switch

package/src/ui/context/hooks/useAuthOperations.ts

@@ -9,7 +9,13 @@ import type { StorageInterface } from '../../utils/storageHelpers';
 import type { OxyServices } from '@oxyhq/core';
 import { SignatureService } from '@oxyhq/core';
 import { isWebBrowser } from '../../hooks/useWebSSO';
-import { clearActiveAuthuser, clearSsoBounceState } from '../../utils/activeAuthuser';
+import {
+  clearActiveAuthuser,
+  clearSsoBounceState,
+  writeActiveAuthuser,
+  markSignedOut,
+  clearSignedOut,
+} from '../../utils/activeAuthuser';
 import { isCrossApexWeb, CrossApexDirectSignInError } from '../../../utils/crossApex';
 
 export interface UseAuthOperationsOptions {
@@ -133,6 +139,23 @@ export const useAuthOperations = ({
         deviceFingerprint,
       );
 
+      // Deliberate sign-in re-enables automatic silent restore: clear the durable
+      // "deliberately signed out" flag so a prior sign-out no longer suppresses
+      // the `fedcm-silent` / per-apex iframe cold-boot steps.
+      clearSignedOut();
+
+      // Register this primary session in the device's first-party multi-account
+      // refresh-cookie set so a web key-based sign-in survives reload via
+      // `refresh-all` and coexists with switched accounts. `/auth/verify` mints the
+      // session but (unlike `/auth/login` / `/fedcm/exchange`) does NOT plant an
+      // `oxy_rt_<authuser>` slot, so we establish it here through the shared
+      // `POST /auth/session` primitive. No-op on native and cross-apex (returns
+      // `null`); records the active slot when one is genuinely allocated.
+      const verifyAuthuser = await oxyServices.establishDeviceRefreshSlot();
+      if (typeof verifyAuthuser === 'number') {
+        writeActiveAuthuser(verifyAuthuser);
+      }
+
       // Get full user data
       fullUser = await oxyServices.getUserBySession(sessionResponse.sessionId);
 
@@ -260,7 +283,14 @@ export const useAuthOperations = ({
             await switchSession(filteredSessions[0].sessionId);
           } else {
             // Genuine FULL sign-out (no sessions remain): clear the per-origin
-            // SSO bounce state so a fresh deliberate sign-in can re-probe.
+            // SSO bounce state so a fresh deliberate sign-in can re-probe, drop
+            // the persisted active device slot so the next cold boot does not
+            // prioritize a now-signed-out `oxy_active_authuser`, and SET the
+            // deliberately-signed-out flag so the silent cold-boot steps
+            // (`fedcm-silent` / per-apex iframe) do not re-mint a session from a
+            // still-live IdP session on the next reload (mirrors `logoutAll`).
+            markSignedOut();
+            clearActiveAuthuser();
             clearSsoBounceState();
             clearPriorSessionHintSafe(clearPriorSessionHint, logger);
             await clearSessionState();
@@ -322,6 +352,9 @@ export const useAuthOperations = ({
       if (isWebBrowser()) {
         await oxyServices.logoutAllSessionsViaCookie();
         clearActiveAuthuser();
+        // Deliberate full sign-out: suppress automatic silent restore on the next
+        // cold boot so a still-live IdP session does not re-mint a session.
+        markSignedOut();
       }
       // logoutAll is ALWAYS a full sign-out: clear the per-origin SSO bounce
       // state (web-guarded internally) so a fresh sign-in can re-probe, and drop

package/src/ui/index.ts

@@ -27,6 +27,8 @@ export { FontLoader, setupFonts } from './components/FontLoader';
 export { default as OxyIcon } from './components/icon/OxyIcon';
 export { default as AccountMenu } from './components/AccountMenu';
 export { default as AccountMenuButton } from './components/AccountMenuButton';
+export { default as ProfileButton } from './components/ProfileButton';
+export { default as ProfileMenu } from './components/ProfileMenu';
 export { default as AccountSwitcher, AccountSwitcherView } from './components/AccountSwitcher';
 
 // Context + hooks