@oxyhq/services 13.3.0 → 14.0.0

package/src/ui/components/ProfileMenu.tsx

@@ -1,13 +1,13 @@
 import type React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     View,
     Pressable,
     Modal,
     ScrollView,
     ActivityIndicator,
-    StyleSheet,
     Platform,
+    StyleSheet,
     type ViewStyle,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -19,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';
 
@@ -58,58 +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` and styled
- * with react-native `StyleSheet` + the Bloom theme (via `useTheme`) so it
- * renders in EVERY consumer regardless of NativeWind. 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) {
@@ -118,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);
@@ -138,7 +147,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
         } finally {
             setRemovingSessionId(null);
         }
-    }, [activeSessionId, removingSessionId, removeSession, t]);
+    }, [removingSessionId, removeSession, t]);
 
     const performSignOutAll = useCallback(async () => {
         if (signingOutAll) {
@@ -158,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) => {
@@ -172,30 +180,74 @@ 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
                 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}
                             style={[
                                 styles.accountRow,
+                                isChild && styles.childRow,
                                 isActive && { backgroundColor: colors.backgroundSecondary },
                                 isSwitching && !isActive && styles.rowDimmed,
                             ]}
@@ -205,18 +257,28 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                 uri={account.avatarUrl}
                                 variant="thumb"
                                 name={account.displayName}
-                                size={isActive ? 40 : 32}
+                                size={isActive ? 40 : isChild ? 28 : 32}
                             />
                             <View style={styles.accountInfo}>
-                                <Text
-                                    style={[
-                                        isActive ? styles.accountNameActive : styles.accountName,
-                                        { color: colors.text },
-                                    ]}
-                                    numberOfLines={1}
-                                >
-                                    {account.displayName}
-                                </Text>
+                                <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
                                         style={[styles.accountEmail, { color: colors.textSecondary }]}
@@ -232,14 +294,14 @@ 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 }}
                                     style={styles.rowSignOutButton}
@@ -250,7 +312,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                                         color={colors.textSecondary}
                                     />
                                 </Pressable>
-                            )}
+                            ) : null}
                         </Pressable>
                     );
                 })}
@@ -315,7 +377,7 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     accessibilityLabel={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
                     onPress={() => signOutAllDialog.open()}
                     disabled={actionDisabled}
-                    style={[styles.signOutAllRow, actionDisabled && styles.rowDimmed]}
+                    style={[styles.actionRow, actionDisabled && styles.rowDimmed]}
                 >
                     {signingOutAll ? (
                         <ActivityIndicator color={colors.error} size="small" />
@@ -327,63 +389,8 @@ const ProfileMenuContent: React.FC<ProfileMenuContentProps> = ({
                     </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();
-    const { colors } = useTheme();
-
-    // 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
@@ -398,33 +405,22 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({
                 onPress={onClose}
                 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}
-                    style={[
-                        isWeb ? styles.panelWeb : styles.panelNative,
-                        { backgroundColor: colors.background },
-                        isWeb && { borderColor: colors.border },
-                        panelAnchorStyle,
-                        styles.panelBounds,
-                        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>
     );
 };
@@ -451,7 +447,8 @@ const ActionRow: React.FC<{
 );
 
 const styles = StyleSheet.create({
-    // Overlay (`flex-1 relative` web / `flex-1 justify-end` + scrim native).
+    // 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',
@@ -461,24 +458,23 @@ const styles = StyleSheet.create({
         justifyContent: 'flex-end',
         backgroundColor: 'rgba(0,0,0,0.32)',
     },
-    // Panel shell — web popover (`overflow-hidden rounded-2xl border`).
+    // Panel shell — web popover / native bottom sheet.
     panelWeb: {
         overflow: 'hidden',
         borderRadius: 16,
         borderWidth: 1,
     },
-    // Panel shell — native bottom sheet (`overflow-hidden rounded-t-3xl pb-3`).
     panelNative: {
         overflow: 'hidden',
         borderTopLeftRadius: 24,
         borderTopRightRadius: 24,
         paddingBottom: 12,
     },
-    // Shared `maxHeight: '85%'` cap applied to both panel variants.
+    // Shared height cap applied to both panel variants.
     panelBounds: {
         maxHeight: '85%',
     },
-    // The panel's drop shadow — dynamic elevation with no class equivalent.
+    // The panel's drop shadow (dynamic elevation).
     shadow: {
         shadowColor: '#000',
         shadowOpacity: 0.18,
@@ -486,14 +482,12 @@ const styles = StyleSheet.create({
         shadowOffset: { width: 0, height: 8 },
         elevation: 12,
     },
-    // Scroll region (`grow-0` + `py-1` content).
     scroll: {
         flexGrow: 0,
     },
     scrollContent: {
         paddingVertical: 4,
     },
-    // Account row (`flex-row items-center gap-3 px-4 py-2.5`).
     accountRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -501,28 +495,41 @@ const styles = StyleSheet.create({
         paddingHorizontal: 16,
         paddingVertical: 10,
     },
-    // `opacity-40` dim applied to disabled / non-active-while-switching rows.
+    childRow: {
+        paddingLeft: 40,
+    },
     rowDimmed: {
         opacity: 0.4,
     },
-    // Identity block (`min-w-0 flex-1`).
     accountInfo: {
         flex: 1,
         minWidth: 0,
     },
-    // Inactive account name (`font-medium`).
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
     accountName: {
         fontWeight: '500',
+        flexShrink: 1,
     },
-    // Active account name (`font-semibold`).
     accountNameActive: {
         fontWeight: '600',
     },
-    // Secondary email line (`text-xs`).
     accountEmail: {
         fontSize: 12,
     },
-    // Per-row sign-out button (`h-7 w-7 items-center justify-center rounded-full opacity-60`).
+    roleBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1,
+        borderRadius: 8,
+    },
+    roleBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
     rowSignOutButton: {
         width: 28,
         height: 28,
@@ -531,7 +538,6 @@ const styles = StyleSheet.create({
         borderRadius: 9999,
         opacity: 0.6,
     },
-    // Switching indicator (`flex-row items-center justify-center gap-2 py-2`).
     switchingRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -543,7 +549,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontWeight: '500',
     },
-    // Bottom action rows (`flex-row items-center gap-3 px-4 py-3`).
     actionRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -551,15 +556,6 @@ const styles = StyleSheet.create({
         paddingHorizontal: 16,
         paddingVertical: 12,
     },
-    // Sign-out-of-all row shares the action-row geometry.
-    signOutAllRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-    },
-    // Action / sign-out label (`font-medium`).
     actionText: {
         fontWeight: '500',
     },

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 },
     );