@oxyhq/services 13.2.0 → 14.0.0

package/src/ui/components/ProfileMenu.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     View,
     Pressable,
@@ -7,6 +7,7 @@ import {
     ScrollView,
     ActivityIndicator,
     Platform,
+    StyleSheet,
     type ViewStyle,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -18,7 +19,7 @@ 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';
+import { useSwitchableAccounts, type SwitchableAccount } from '../hooks/useSwitchableAccounts';
 
 const isWeb = Platform.OS === 'web';
 
@@ -57,57 +58,67 @@ export interface ProfileMenuProps {
     onBeforeSessionChange?: () => void | Promise<void>;
 }
 
-/** Everything `ProfileMenuContent` needs, minus the `open` flag (always open). */
-type ProfileMenuContentProps = Omit<ProfileMenuProps, 'open'>;
-
 /**
- * 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.
+ * Clean account switcher, written with react-native `StyleSheet` + Bloom
+ * theme colors (the package convention — no NativeWind, which is only an
+ * optional peer and absent in the primary `accounts` consumer). Lists EVERY
+ * switchable account from {@link useSwitchableAccounts}
+ * — device sign-ins AND linked graph accounts (owned orgs + shared-with-you) —
+ * and routes EVERY switch through the context's single
+ * `switchToAccount(accountId)` dispatcher (there is no separate device-only
+ * path). Each on-device inactive row carries a per-account sign-out icon;
+ * graph-only rows carry a role badge and indent under their parent. Below the
+ * list: Add account, Manage account, optional View profile, and Sign out of all.
  *
- * Heavy hooks (device accounts / refresh-all, Bloom dialog/toast controls, the
- * escape-key listener) live here so they run ONLY while the menu is open — the
- * outer {@link ProfileMenu} mounts this only when `open`. This component may
- * therefore assume it is always open.
+ * Renders as an upward-opening popover anchored to the trigger on web, and a
+ * bottom-sheet style modal on native.
  */
-const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
+const ProfileMenu: React.FC<ProfileMenuProps> = ({
+    open,
     onClose,
+    anchor,
     onNavigateManage,
     onAddAccount,
     onNavigateProfile,
     onBeforeSessionChange,
 }) => {
     const {
-        activeSessionId,
-        switchSession,
+        switchToAccount,
         logoutAll,
         removeSession,
     } = useOxy();
     const { t } = useI18n();
     const { colors } = useTheme();
 
-    const { accounts } = useDeviceAccounts();
+    const { accounts } = useSwitchableAccounts();
 
-    const [busySessionId, setBusySessionId] = useState<string | null>(null);
+    const [busyAccountId, setBusyAccountId] = useState<string | null>(null);
     const [removingSessionId, setRemovingSessionId] = useState<string | null>(null);
     const [signingOutAll, setSigningOutAll] = useState(false);
 
     const signOutAllDialog = useDialogControl();
 
-    const isSwitching = busySessionId !== null;
+    const isSwitching = busyAccountId !== 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) {
+    // Account ids currently in the list — used to decide whether a graph-only
+    // row is a CHILD (its parent is also shown) so it can be indented.
+    const listedAccountIds = useMemo(
+        () => new Set(accounts.map((account) => account.accountId)),
+        [accounts],
+    );
+
+    // The ONE uniform switch path: every row (device or linked) routes through
+    // `switchToAccount(accountId)`. It reuses the device session when the account
+    // is already signed in here, and mints one only on first entry.
+    const handleSwitch = useCallback(async (account: SwitchableAccount) => {
+        if (account.isCurrent || busyAccountId) {
             return;
         }
-        setBusySessionId(sessionId);
+        setBusyAccountId(account.accountId);
         try {
             await onBeforeSessionChange?.();
-            await switchSession(sessionId);
+            await switchToAccount(account.accountId);
             toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
             onClose();
         } catch (error) {
@@ -116,14 +127,14 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
             }
             toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
         } finally {
-            setBusySessionId(null);
+            setBusyAccountId(null);
         }
-    }, [activeSessionId, busySessionId, switchSession, t, onClose, onBeforeSessionChange]);
+    }, [busyAccountId, switchToAccount, 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) {
+        if (removingSessionId) {
             return;
         }
         setRemovingSessionId(sessionId);
@@ -136,7 +147,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
         } finally {
             setRemovingSessionId(null);
         }
-    }, [activeSessionId, removingSessionId, removeSession, t]);
+    }, [removingSessionId, removeSession, t]);
 
     const performSignOutAll = useCallback(async () => {
         if (signingOutAll) {
@@ -156,10 +167,9 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
         }
     }, [signingOutAll, logoutAll, t, onClose, onBeforeSessionChange]);
 
-    // Escape-to-close (web only). This component only mounts while open, so the
-    // listener is attached exactly for the menu's lifetime.
+    // Escape-to-close (web only).
     useEffect(() => {
-        if (!isWeb || typeof document === 'undefined') {
+        if (!open || !isWeb || typeof document === 'undefined') {
             return undefined;
         }
         const onKey = (event: KeyboardEvent) => {
@@ -170,49 +180,108 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
         };
         document.addEventListener('keydown', onKey, true);
         return () => document.removeEventListener('keydown', onKey, true);
-    }, [onClose]);
+    }, [open, onClose]);
 
-    return (
-        <>
+    if (!open) {
+        return null;
+    }
+
+    // Web: anchor the panel to the measured trigger. When the anchor pins `top`
+    // the panel opens DOWNWARD from the trigger; otherwise it pins `bottom` and
+    // opens UPWARD (the default footer behavior). With no anchor captured, fall
+    // back to a bottom-left placement. 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,
+            ...(typeof anchor?.top === 'number'
+                ? { top: anchor.top }
+                : { 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}
+            style={[
+                isWeb ? styles.panelWeb : styles.panelNative,
+                { backgroundColor: colors.background },
+                isWeb ? { borderColor: colors.border } : null,
+                panelAnchorStyle,
+                styles.panelBounds,
+                styles.shadow,
+            ]}
+            accessibilityRole="menu"
+            accessibilityLabel={t('accountMenu.label') || 'Account menu'}
+        >
             <ScrollView
-                className="grow-0"
-                contentContainerClassName="py-1"
+                style={styles.scroll}
+                contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
             >
-                {/* 1) Device accounts — active first (checkmark), others switchable. */}
+                {/* 1) Every switchable account — device sign-ins AND linked graph
+                    accounts. Active first (checkmark); on-device rows carry a
+                    per-account sign-out icon; graph-only rows show a role badge
+                    and indent under their parent. Every row switches through the
+                    SAME `switchToAccount(accountId)` path. */}
                 {accounts.map((account) => {
                     const isActive = account.isCurrent;
-                    const isBusy = busySessionId === account.sessionId;
-                    const isRemoving = removingSessionId === account.sessionId;
+                    const isBusy = busyAccountId === account.accountId;
+                    const sessionId = account.sessionId;
+                    const isRemoving = sessionId ? removingSessionId === sessionId : false;
+                    const isChild = Boolean(
+                        account.parentAccountId && listedAccountIds.has(account.parentAccountId),
+                    );
+                    const role = account.callerMembership?.role;
                     return (
                         <Pressable
-                            key={`account-${account.sessionId}`}
+                            key={`account-${account.accountId}`}
                             accessibilityRole="menuitem"
                             accessibilityLabel={account.displayName}
                             accessibilityState={{ selected: isActive }}
-                            onPress={() => handleSwitch(account.sessionId)}
+                            onPress={() => handleSwitch(account)}
                             disabled={isActive || isBusy || isSwitching}
-                            className={`flex-row items-center gap-3 px-4 py-2.5 ${
-                                isActive ? 'bg-secondary' : ''
-                            } ${isSwitching && !isActive ? 'opacity-40' : ''}`}
+                            style={[
+                                styles.accountRow,
+                                isChild && styles.childRow,
+                                isActive && { backgroundColor: colors.backgroundSecondary },
+                                isSwitching && !isActive && styles.rowDimmed,
+                            ]}
                         >
                             <Avatar
                                 source={account.user.avatar ?? undefined}
                                 uri={account.avatarUrl}
                                 variant="thumb"
                                 name={account.displayName}
-                                size={isActive ? 40 : 32}
+                                size={isActive ? 40 : isChild ? 28 : 32}
                             />
-                            <View className="min-w-0 flex-1">
-                                <Text
-                                    className={`text-foreground ${isActive ? 'font-semibold' : 'font-medium'}`}
-                                    numberOfLines={1}
-                                >
-                                    {account.displayName}
-                                </Text>
+                            <View style={styles.accountInfo}>
+                                <View style={styles.nameRow}>
+                                    <Text
+                                        style={[
+                                            styles.accountName,
+                                            { color: colors.text },
+                                            isActive && styles.accountNameActive,
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {account.displayName}
+                                    </Text>
+                                    {role ? (
+                                        <View style={[styles.roleBadge, { backgroundColor: colors.card }]}>
+                                            <Text style={[styles.roleBadgeText, { color: colors.textSecondary }]}>
+                                                {t(`accounts.roles.${role}.label`) || role}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                </View>
                                 {account.email ? (
                                     <Text
-                                        className="text-xs text-muted-foreground"
+                                        style={[styles.accountEmail, { color: colors.textSecondary }]}
                                         numberOfLines={1}
                                     >
                                         {account.email}
@@ -225,17 +294,17 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                 <MaterialCommunityIcons name="check" size={20} color={colors.primary} />
                             ) : isRemoving ? (
                                 <ActivityIndicator color={colors.textSecondary} size="small" />
-                            ) : (
+                            ) : sessionId ? (
                                 <Pressable
                                     accessibilityRole="button"
                                     accessibilityLabel={
                                         t('accountMenu.signOutAccount', { name: account.displayName })
                                         || `Sign out ${account.displayName}`
                                     }
-                                    onPress={() => handleRemove(account.sessionId)}
+                                    onPress={() => handleRemove(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"
+                                    style={styles.rowSignOutButton}
                                 >
                                     <MaterialCommunityIcons
                                         name="logout"
@@ -243,16 +312,16 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                         color={colors.textSecondary}
                                     />
                                 </Pressable>
-                            )}
+                            ) : null}
                         </Pressable>
                     );
                 })}
 
                 {/* 2) Switching indicator. */}
                 {isSwitching ? (
-                    <View className="flex-row items-center justify-center gap-2 py-2">
+                    <View style={styles.switchingRow}>
                         <ActivityIndicator color={colors.textSecondary} size="small" />
-                        <Text className="text-xs font-medium text-muted-foreground">
+                        <Text style={[styles.switchingText, { color: colors.textSecondary }]}>
                             {t('accountMenu.switching') || 'Switching account…'}
                         </Text>
                     </View>
@@ -264,6 +333,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                 <ActionRow
                     icon="account-plus-outline"
                     iconColor={colors.icon}
+                    textColor={colors.text}
                     label={t('accountMenu.addAnother') || 'Add another account'}
                     disabled={actionDisabled}
                     onPress={() => {
@@ -276,6 +346,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                 <ActionRow
                     icon="cog-outline"
                     iconColor={colors.icon}
+                    textColor={colors.text}
                     label={t('accountMenu.manage') || 'Manage your Oxy Account'}
                     disabled={actionDisabled}
                     onPress={() => {
@@ -289,6 +360,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     <ActionRow
                         icon="account-outline"
                         iconColor={colors.icon}
+                        textColor={colors.text}
                         label={t('accountMenu.viewProfile') || 'View profile'}
                         disabled={actionDisabled}
                         onPress={() => {
@@ -305,74 +377,20 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     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' : ''}`}
+                    style={[styles.actionRow, actionDisabled && styles.rowDimmed]}
                 >
                     {signingOutAll ? (
                         <ActivityIndicator color={colors.error} size="small" />
                     ) : (
                         <MaterialCommunityIcons name="logout" size={18} color={colors.error} />
                     )}
-                    <Text className="font-medium" style={{ color: colors.error }}>
+                    <Text style={[styles.actionText, { color: colors.error }]}>
                         {t('accountMenu.signOutAll') || 'Sign out of all accounts'}
                     </Text>
                 </Pressable>
             </ScrollView>
-
-            <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' },
-                ]}
-            />
-        </>
+        </Pressable>
     );
-};
-
-/**
- * Public wrapper. The RN `Modal` shell is ALWAYS mounted (only `visible` toggles)
- * so the react-native-web portal is created up front — mounting a web `Modal`
- * already-`visible` is fragile (the first interaction can be eaten / the button
- * "does nothing"). Only the heavy {@link ProfileMenuContent} mounts when open,
- * keeping the account hooks off the render path when the menu is closed. On
- * native that closed render is `<Modal visible={false}>{null}</Modal>` → no heavy
- * hooks run (preserving the native-drawer crash fix).
- *
- * This outer component calls ONLY light, always-safe hooks (`useTheme`,
- * `useI18n` for the overlay a11y label) and computes the panel/overlay layout.
- */
-const ProfileMenu: React.FC<ProfileMenuProps> = ({
-    open,
-    onClose,
-    anchor,
-    onNavigateManage,
-    onAddAccount,
-    onNavigateProfile,
-    onBeforeSessionChange,
-}) => {
-    const { t } = useI18n();
-
-    // Web: anchor the panel to the measured trigger. When the anchor pins `top`
-    // the panel opens DOWNWARD from the trigger; otherwise it pins `bottom` and
-    // opens UPWARD (the default footer behavior). With no anchor captured, fall
-    // back to a bottom-left placement. 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,
-            ...(typeof anchor?.top === 'number'
-                ? { top: anchor.top }
-                : { bottom: anchor?.bottom ?? 8 }),
-        }
-        : undefined;
 
     return (
         <Modal
@@ -385,34 +403,24 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
                 accessibilityRole="button"
                 accessibilityLabel={t('common.actions.close') || 'Close'}
                 onPress={onClose}
-                className={isWeb ? 'flex-1 relative' : 'flex-1 justify-end'}
-                style={!isWeb ? styles.nativeScrim : undefined}
+                style={isWeb ? styles.webOverlay : styles.nativeOverlay}
             >
-                <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, { maxHeight: '85%' }, styles.shadow]}
-                    accessibilityRole="menu"
-                    accessibilityLabel={t('accountMenu.label') || 'Account menu'}
-                >
-                    {open ? (
-                        <ProfileMenuContent
-                            onClose={onClose}
-                            anchor={anchor}
-                            onNavigateManage={onNavigateManage}
-                            onAddAccount={onAddAccount}
-                            onNavigateProfile={onNavigateProfile}
-                            onBeforeSessionChange={onBeforeSessionChange}
-                        />
-                    ) : null}
-                </Pressable>
+                {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>
     );
 };
@@ -421,36 +429,136 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
 const ActionRow: React.FC<{
     icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
     iconColor: string;
+    textColor: string;
     label: string;
     disabled: boolean;
     onPress: () => void;
-}> = ({ icon, iconColor, label, disabled, onPress }) => (
+}> = ({ icon, iconColor, textColor, 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' : ''}`}
+        style={[styles.actionRow, disabled && styles.rowDimmed]}
     >
         <MaterialCommunityIcons name={icon} size={20} color={iconColor} />
-        <Text className="font-medium text-foreground">{label}</Text>
+        <Text style={[styles.actionText, { color: textColor }]}>{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 = {
+const styles = StyleSheet.create({
+    // Overlay: web is a positioning context for the anchored panel; native dims
+    // the backdrop and docks the sheet to the bottom.
+    webOverlay: {
+        flex: 1,
+        position: 'relative',
+    },
+    nativeOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.32)',
+    },
+    // Panel shell — web popover / native bottom sheet.
+    panelWeb: {
+        overflow: 'hidden',
+        borderRadius: 16,
+        borderWidth: 1,
+    },
+    panelNative: {
+        overflow: 'hidden',
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+        paddingBottom: 12,
+    },
+    // Shared height cap applied to both panel variants.
+    panelBounds: {
+        maxHeight: '85%',
+    },
+    // The panel's drop shadow (dynamic elevation).
     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,
-};
+    },
+    scroll: {
+        flexGrow: 0,
+    },
+    scrollContent: {
+        paddingVertical: 4,
+    },
+    accountRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+    },
+    childRow: {
+        paddingLeft: 40,
+    },
+    rowDimmed: {
+        opacity: 0.4,
+    },
+    accountInfo: {
+        flex: 1,
+        minWidth: 0,
+    },
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    accountName: {
+        fontWeight: '500',
+        flexShrink: 1,
+    },
+    accountNameActive: {
+        fontWeight: '600',
+    },
+    accountEmail: {
+        fontSize: 12,
+    },
+    roleBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1,
+        borderRadius: 8,
+    },
+    roleBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
+    rowSignOutButton: {
+        width: 28,
+        height: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999,
+        opacity: 0.6,
+    },
+    switchingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        paddingVertical: 8,
+    },
+    switchingText: {
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    actionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    actionText: {
+        fontWeight: '500',
+    },
+});
 
 export default ProfileMenu;

package/src/ui/components/SignInModal.tsx

@@ -62,7 +62,7 @@ const SignInModal: React.FC = () => {
 
     const insets = useSafeAreaInsets();
     const theme = useTheme();
-    const { oxyServices, switchSession, clientId } = useOxy();
+    const { oxyServices, handleWebSession, clientId } = useOxy();
 
     // Register the imperative visibility callback.
     useEffect(() => {
@@ -83,7 +83,7 @@ const SignInModal: React.FC = () => {
             theme={theme}
             insets={insets}
             oxyServices={oxyServices}
-            switchSession={switchSession}
+            handleWebSession={handleWebSession}
             clientId={clientId}
         />
     );
@@ -93,7 +93,7 @@ interface SignInModalContentProps {
     theme: ReturnType<typeof useTheme>;
     insets: ReturnType<typeof useSafeAreaInsets>;
     oxyServices: ReturnType<typeof useOxy>['oxyServices'];
-    switchSession: ReturnType<typeof useOxy>['switchSession'];
+    handleWebSession: ReturnType<typeof useOxy>['handleWebSession'];
     clientId: ReturnType<typeof useOxy>['clientId'];
 }
 
@@ -101,13 +101,13 @@ const SignInModalContent: React.FC<SignInModalContentProps> = ({
     theme,
     insets,
     oxyServices,
-    switchSession,
+    handleWebSession,
     clientId,
 }) => {
     const { qrData, qrPayload, isLoading, error, isWaiting, openAuthApproval, openSameDeviceApproval, retry } = useOxyAuthSession(
         oxyServices,
         clientId,
-        switchSession,
+        handleWebSession,
         { onSignedIn: hideSignInModal },
     );