@oxyhq/services 13.3.0 → 14.0.0

package/lib/typescript/module/utils/deviceFlowSignIn.d.ts

@@ -2,31 +2,52 @@
  * Shared, pure orchestration for completing the cross-app device-flow sign-in
  * (the QR-code / "Open Oxy Auth" path used on native and web).
  *
- * THE BUG THIS FIXES (native): once another authenticated device approves the
- * pending AuthSession, the originating client is notified (socket / poll /
- * deep-link) with the authorized `sessionId`. Before any session-management
- * code can use it, the client MUST exchange the secret 128-bit `sessionToken`
- * (held only by this client, generated for THIS flow) for the first access
- * token via `claimSessionByToken` — the device-flow equivalent of OAuth's
- * code-for-token exchange (RFC 8628 §3.4).
+ * THE FIRST BUG THIS FIXES (native): once another authenticated device
+ * approves the pending AuthSession, the originating client is notified
+ * (socket / poll / deep-link) with the authorized `sessionId`. Before any
+ * session-management code can use it, the client MUST exchange the secret
+ * 128-bit `sessionToken` (held only by this client, generated for THIS flow)
+ * for the first access token via `claimSessionByToken` — the device-flow
+ * equivalent of OAuth's code-for-token exchange (RFC 8628 §3.4).
+ *
+ * THE SECOND BUG THIS FIXES (session-sync cutover regression): the
+ * freshly-claimed session is NOT yet registered in the device's
+ * server-authoritative session set — nothing has run
+ * `sessionClient.addCurrentAccount()` for it — so it must NOT be committed
+ * through `switchSession`. That path is now an account-SWITCH between
+ * accounts already registered on this device (`OxyContext`'s
+ * `switchSessionForContext`), and throws `No device account found for
+ * session "..."` for anything else, surfacing as "Authorization successful
+ * but failed to complete sign in." Instead the claimed session must be
+ * committed through the SAME path a fresh password sign-in uses —
+ * `useOxy().handleWebSession` (`OxyContext`'s `handleWebSSOSession`) — which
+ * registers the account into the device set, persists it durably, and
+ * hydrates the full user profile.
  *
  * Skipping the claim leaves the SDK with NO bearer token: the session is
  * authorized server-side but the app never becomes authenticated and the UI
- * sits "Waiting for authorization..." forever. Consolidating the claim→switch
- * sequence here keeps native and web identical and unit-testable.
+ * sits "Waiting for authorization..." forever. Consolidating the
+ * claim->commit sequence here keeps native and web identical and
+ * unit-testable.
  */
-import { type User } from '@oxyhq/core';
+import { type EstablishAfterClaimDeps, type SessionLoginResponse, type SsoEstablishClient, type User } from '@oxyhq/core';
 interface DeviceFlowClaimResult {
     accessToken?: string;
     sessionId?: string;
+    deviceId?: string;
+    expiresAt?: string;
+    user?: User;
 }
 /**
  * The minimal `OxyServices` surface this orchestration needs. Kept as a
  * structural type (rather than importing the full client) so the helper is
  * trivially unit-testable with a stub and never pulls the RN/Expo runtime into
  * a test bundle.
+ *
+ * Extends {@link SsoEstablishClient} (`requestSsoEstablishUrl`) so the WEB
+ * post-claim durable-session hop can be driven off the same client.
  */
-export interface DeviceFlowClient {
+export interface DeviceFlowClient extends SsoEstablishClient {
     /**
      * Exchange the device-flow `sessionToken` for the first access + refresh
      * token, planting them on the client. Single-use; replay is rejected by the
@@ -45,19 +66,30 @@ export interface CompleteDeviceFlowSignInOptions {
      */
     sessionToken: string;
     /**
-     * The session-management `switchSession` from `useOxy()`. Hydrates the
-     * activated session (validates, fetches the user, persists, updates state).
-     * Runs AFTER the bearer is planted so its bearer-protected calls succeed.
+     * `useOxy().handleWebSession` — commits the freshly-claimed session into
+     * context state through the SAME path a password sign-in uses:
+     * registers the account into the device's server-authoritative session set,
+     * persists it durably, and hydrates the full user profile. Runs AFTER the
+     * bearer is planted so its bearer-protected calls succeed.
+     */
+    commitSession: (session: SessionLoginResponse) => Promise<void>;
+    /**
+     * Injectable web seams for the post-claim durable-session establish hop
+     * ({@link establishIdpSessionAfterClaim}). Omit in production — the defaults
+     * resolve to `window.*` (and no-op off-web / on native). Tests inject fakes to
+     * drive the web path deterministically.
      */
-    switchSession: (sessionId: string) => Promise<User>;
+    establishDeps?: EstablishAfterClaimDeps;
 }
 /**
  * Complete a device-flow sign-in: claim the first access token with the secret
- * `sessionToken` (planting the bearer), then hydrate the session via
- * `switchSession`. Returns the authenticated user.
+ * `sessionToken` (planting the bearer), then commit the resulting session via
+ * `commitSession` (registers it into the device's server-authoritative session
+ * set and hydrates the full user). Returns the authenticated user.
  *
- * Throws if either the claim or the switch fails; callers surface a retry UI.
+ * Throws if the claim did not return a usable session, or if either the claim
+ * or the commit fails; callers surface a retry UI.
  */
-export declare function completeDeviceFlowSignIn({ oxyServices, sessionId, sessionToken, switchSession, }: CompleteDeviceFlowSignInOptions): Promise<User>;
+export declare function completeDeviceFlowSignIn({ oxyServices, sessionId, sessionToken, commitSession, establishDeps, }: CompleteDeviceFlowSignInOptions): Promise<User>;
 export {};
 //# sourceMappingURL=deviceFlowSignIn.d.ts.map

package/lib/typescript/module/utils/deviceFlowSignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deviceFlowSignIn.d.ts","sourceRoot":"","sources":["../../../../src/utils/deviceFlowSignIn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,aAAa,CAAC;AAEpD,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,qBAAqB,GAAG,SAAS,CAAC,CAAC;CAC3F;AAED,MAAM,WAAW,+BAA+B;IAC9C,6EAA6E;IAC7E,WAAW,EAAE,gBAAgB,CAAC;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAED;;;;;;GAMG;AACH,wBAAsB,wBAAwB,CAAC,EAC7C,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,GACd,EAAE,+BAA+B,GAAG,OAAO,CAAC,IAAI,CAAC,CAWjD"}
+{"version":3,"file":"deviceFlowSignIn.d.ts","sourceRoot":"","sources":["../../../../src/utils/deviceFlowSignIn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,uBAAuB,EAE5B,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,IAAI,EACV,MAAM,aAAa,CAAC;AAErB,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,qBAAqB,GAAG,SAAS,CAAC,CAAC;CAC3F;AAED,MAAM,WAAW,+BAA+B;IAC9C,6EAA6E;IAC7E,WAAW,EAAE,gBAAgB,CAAC;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC;AAED;;;;;;;;GAQG;AACH,wBAAsB,wBAAwB,CAAC,EAC7C,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,EACb,aAAa,GACd,EAAE,+BAA+B,GAAG,OAAO,CAAC,IAAI,CAAC,CA+CjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "13.3.0",
+  "version": "14.0.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -106,10 +106,10 @@
     }
   },
   "dependencies": {
-    "@oxyhq/contracts": "0.7.0"
+    "@oxyhq/contracts": "0.8.0"
   },
   "devDependencies": {
-    "@oxyhq/core": "^5.2.0",
+    "@oxyhq/core": "^5.4.2",
     "nativewind": "5.0.0-preview.3",
     "react-native-css": "^3.0.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
@@ -153,7 +153,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxyhq/bloom": ">=0.16.0",
-    "@oxyhq/core": "^5.2.0",
+    "@oxyhq/core": "^5.4.2",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",

package/src/index.ts

@@ -22,7 +22,6 @@
  */
 
 /// <reference path="./types/react-native-classname.d.ts" />
-/// <reference path="./types/react-native-web-style.d.ts" />
 
 import { setPlatformOS, type PlatformOS } from '@oxyhq/core';
 import { Platform } from 'react-native';
@@ -62,7 +61,6 @@ export {
 // ---------------------------------------------------------------------------
 // Session / asset hooks
 // ---------------------------------------------------------------------------
-export { useSessionSocket } from './ui/hooks/useSessionSocket';
 export { useAssets, setOxyAssetInstance } from './ui/hooks/useAssets';
 export { useFileDownloadUrl } from './ui/hooks/useFileDownloadUrl';
 export { useFollow, useFollowerCounts } from './ui/hooks/useFollow';
@@ -226,14 +224,16 @@ export type { ProfileMenuProps, ProfileMenuAnchor } from './ui/components/Profil
 export { default as AccountSwitcher, AccountSwitcherView } from './ui/components/AccountSwitcher';
 export type { AccountSwitcherProps, AccountSwitcherActions } from './ui/components/AccountSwitcher';
 
-// Unified device-account hook (hydrates every signed-in account on the device
-// with real name/email/avatar/color for the account switcher).
-export { useDeviceAccounts } from './ui/hooks/useDeviceAccounts';
+// Unified switchable-accounts hook — the single source of everything the user
+// can switch into: device sign-ins AND linked graph accounts (owned orgs +
+// shared-with-you), deduped by account id and hydrated with real
+// name/email/avatar/color. Every switch routes through `switchToAccount`.
+export { useSwitchableAccounts } from './ui/hooks/useSwitchableAccounts';
 export type {
-    DeviceAccount,
-    DeviceAccountUser,
-    UseDeviceAccountsResult,
-} from './ui/hooks/useDeviceAccounts';
+    SwitchableAccount,
+    SwitchableAccountUser,
+    UseSwitchableAccountsResult,
+} from './ui/hooks/useSwitchableAccounts';
 
 // Unified "Manage your Oxy Account" screen (the caller's own personal account)
 export { default as ManageAccountScreen } from './ui/screens/ManageAccountScreen';

package/src/ui/components/AccountMenu.tsx

@@ -20,8 +20,7 @@ import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { isDev, logger as loggerUtil } from '@oxyhq/core';
-import { buildAccountRows, type AccountRow } from './accountMenuRows';
-import { useDeviceAccounts } from '../hooks/useDeviceAccounts';
+import { useSwitchableAccounts, type SwitchableAccount } from '../hooks/useSwitchableAccounts';
 
 /**
  * Web-only anchor for the popover panel. Each field anchors the panel against
@@ -66,9 +65,11 @@ const PANEL_WIDTH = 360;
 /**
  * Unified, canonical account switcher for the Oxy ecosystem. Gmail-style: the
  * accounts list sits at the top (current account first, with a checkmark), then
- * "Add another account", "Manage account", and the sign-out actions.
+ * "Add another account", "Manage account", and the sign-out actions. Lists EVERY
+ * switchable account (device sign-ins AND linked graph accounts) and routes every
+ * switch through the single `switchToAccount(accountId)` path.
  *
- * Reads everything it needs from `useOxy()` / `useDeviceAccounts()` — never
+ * Reads everything it needs from `useOxy()` / `useSwitchableAccounts()` — never
  * receives a session via props. Renders as a popover anchored to the trigger on
  * web, and as a full-width bottom-sheet style modal on native.
  */
@@ -81,8 +82,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     onBeforeSessionChange,
 }) => {
     const {
-        activeSessionId,
-        switchSession,
+        switchToAccount,
         logout,
         logoutAll,
         removeSession,
@@ -91,14 +91,15 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     const bloomTheme = useTheme();
     const colors = bloomTheme.colors;
 
-    // Source EVERY account's real name/email/avatar/color from the unified
-    // device-account hook (shared apex `refresh-all` path on `*.oxy.so`, local
-    // `useOxy()` fallback on cross-domain web / native). This also synthesises a
-    // live-user row when the probe is empty, so the signed-in user is always
-    // represented (no "Not signed in" false negative).
-    const { accounts: deviceAccounts } = useDeviceAccounts();
+    // Source EVERY switchable account — device sign-ins AND linked graph
+    // accounts (owned orgs + shared-with-you) — from the single
+    // `useSwitchableAccounts` hook, each hydrated with real
+    // name/email/avatar/color. It also synthesises a live-user row when the
+    // device set has not synced yet, so the signed-in user is always represented
+    // (no "Not signed in" false negative).
+    const { accounts } = useSwitchableAccounts();
 
-    const [busySessionId, setBusySessionId] = useState<string | null>(null);
+    const [switchingAccountId, setSwitchingAccountId] = useState<string | null>(null);
     const [removingSessionId, setRemovingSessionId] = useState<string | null>(null);
     const [signingOut, setSigningOut] = useState(false);
     const [signingOutAll, setSigningOutAll] = useState(false);
@@ -108,34 +109,44 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
 
     const containerRef = useRef<View | null>(null);
 
-    // Current account first, then the rest in their existing order — matching
-    // the Gmail-style chooser the inbox design ports from.
-    const rows = useMemo<AccountRow[]>(() => {
-        const built = buildAccountRows({ accounts: deviceAccounts });
-        const current = built.filter((row) => row.isActive);
-        const others = built.filter((row) => !row.isActive);
-        return [...current, ...others];
-    }, [deviceAccounts]);
-
-    const isSwitching = busySessionId !== null;
-
-    // Switch to a non-active account. We route ALL rows through
-    // `useOxy().switchSession(sessionId)` — the SDK's canonical switch path. On
-    // WEB it already performs the same silent activation the auth chooser uses:
-    // when the target `ClientSession` carries an `authuser` slot, it rotates that
-    // slot via `oxyServices.refreshTokenViaCookie({ authuser })` and plants the
-    // fresh access token before validating (see `useSessionManagement.switchSession`).
-    // On NATIVE it validates the session id directly. There is no separate
-    // "activate by authuser" SDK entry point, so reusing `switchSession`
-    // (rather than inventing a parallel mechanism) keeps a single source of truth.
-    const handleSwitch = useCallback(async (sessionId: string) => {
-        if (sessionId === activeSessionId || busySessionId) {
+    // Current account first, then the remaining device sign-ins, then the linked
+    // graph accounts — matching the Gmail-style chooser the inbox design ports.
+    const rows = useMemo<SwitchableAccount[]>(() => {
+        const device = accounts.filter((account) => account.onDevice);
+        const graph = accounts.filter((account) => !account.onDevice);
+        const current = device.filter((account) => account.isCurrent);
+        const others = device.filter((account) => !account.isCurrent);
+        return [...current, ...others, ...graph];
+    }, [accounts]);
+
+    // "Sign out of all accounts" only applies to real device sessions.
+    const deviceCount = useMemo(
+        () => accounts.filter((account) => account.onDevice).length,
+        [accounts],
+    );
+
+    // Account ids currently listed — used to indent a graph-only row whose parent
+    // account is also shown.
+    const listedAccountIds = useMemo(
+        () => new Set(rows.map((row) => row.accountId)),
+        [rows],
+    );
+
+    const isSwitching = switchingAccountId !== null;
+
+    // The ONE uniform switch path: every row (device sign-in or linked graph
+    // account) routes through `useOxy().switchToAccount(accountId)`. It reuses
+    // the device session when the account is already signed in here, and mints a
+    // real session only on the first switch into a graph account — a single
+    // source of truth for every switch.
+    const handleSwitch = useCallback(async (account: SwitchableAccount) => {
+        if (account.isCurrent || switchingAccountId) {
             return;
         }
-        setBusySessionId(sessionId);
+        setSwitchingAccountId(account.accountId);
         try {
             await onBeforeSessionChange?.();
-            await switchSession(sessionId);
+            await switchToAccount(account.accountId);
             toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched account');
             onClose();
         } catch (error) {
@@ -144,9 +155,9 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
             }
             toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
         } finally {
-            setBusySessionId(null);
+            setSwitchingAccountId(null);
         }
-    }, [activeSessionId, busySessionId, switchSession, t, onClose, onBeforeSessionChange]);
+    }, [switchingAccountId, switchToAccount, t, onClose, onBeforeSessionChange]);
 
     // Sign out a SPECIFIC inactive account from its per-row icon. `removeSession`
     // is the SDK's canonical per-session sign-out: it targets the given session
@@ -154,7 +165,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     // otherwise) and removes ONLY that account without switching/clearing the
     // active session. 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);
@@ -167,7 +178,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         } finally {
             setRemovingSessionId(null);
         }
-    }, [activeSessionId, removingSessionId, removeSession, t]);
+    }, [removingSessionId, removeSession, t]);
 
     const performSignOut = useCallback(async () => {
         if (signingOut) {
@@ -272,64 +283,81 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
                 contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
             >
-                {/* 1) Accounts list — current first (checkmark), then others. */}
+                {/* 1) Accounts list — current first (checkmark), then the other
+                    device sign-ins, then linked graph accounts (role badge,
+                    indented under their parent). Every row switches the same way. */}
                 {rows.map((row) => {
-                    const isBusy = busySessionId === row.sessionId;
-                    const isRemoving = removingSessionId === row.sessionId;
+                    const sessionId = row.sessionId;
+                    const isBusy = switchingAccountId === row.accountId;
+                    const isRemoving = sessionId ? removingSessionId === sessionId : false;
+                    const isChild = Boolean(
+                        row.parentAccountId && listedAccountIds.has(row.parentAccountId),
+                    );
+                    const role = row.callerMembership?.role;
                     return (
                         <TouchableOpacity
-                            key={`account-${row.sessionId}`}
+                            key={`account-${row.accountId}`}
                             accessibilityRole="menuitem"
                             accessibilityLabel={row.displayName}
-                            accessibilityState={{ selected: row.isActive }}
-                            onPress={() => handleSwitch(row.sessionId)}
-                            disabled={row.isActive || isBusy || isSwitching}
+                            accessibilityState={{ selected: row.isCurrent }}
+                            onPress={() => handleSwitch(row)}
+                            disabled={row.isCurrent || isBusy || isSwitching}
                             activeOpacity={0.6}
                             style={[
                                 styles.accountRow,
-                                row.isActive && { backgroundColor: colors.primarySubtle },
-                                isSwitching && !row.isActive && styles.rowDisabled,
+                                isChild && styles.childRow,
+                                row.isCurrent && { backgroundColor: colors.primarySubtle },
+                                isSwitching && !row.isCurrent && styles.rowDisabled,
                             ]}
                         >
                             <Avatar
-                                uri={row.avatarUri}
+                                uri={row.avatarUrl}
                                 name={row.displayName}
-                                size={row.isActive ? 40 : 32}
+                                size={row.isCurrent ? 40 : isChild ? 28 : 32}
                             />
                             <View style={styles.accountInfo}>
-                                <Text
-                                    style={[
-                                        styles.accountName,
-                                        { color: colors.text },
-                                        row.isActive && styles.accountNameActive,
-                                    ]}
-                                    numberOfLines={1}
-                                >
-                                    {row.displayName}
-                                </Text>
-                                {row.secondary ? (
+                                <View style={styles.nameRow}>
+                                    <Text
+                                        style={[
+                                            styles.accountName,
+                                            { color: colors.text },
+                                            row.isCurrent && styles.accountNameActive,
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {row.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>
+                                {row.email ? (
                                     <Text
                                         style={[styles.accountEmail, { color: colors.textSecondary }]}
                                         numberOfLines={1}
                                     >
-                                        {row.secondary}
+                                        {row.email}
                                     </Text>
                                 ) : null}
                             </View>
                             {isBusy ? (
                                 <ActivityIndicator color={colors.primary} size="small" />
-                            ) : row.isActive ? (
+                            ) : row.isCurrent ? (
                                 <Ionicons name="checkmark" size={20} color={colors.primary} />
                             ) : isRemoving ? (
                                 <ActivityIndicator color={colors.textSecondary} size="small" />
-                            ) : (
+                            ) : sessionId ? (
                                 <TouchableOpacity
                                     accessibilityRole="button"
                                     accessibilityLabel={
                                         t('accountMenu.signOutAccount', { name: row.displayName })
                                         || `Sign out ${row.displayName}`
                                     }
-                                    onPress={() => handleRemove(row.sessionId)}
+                                    onPress={() => handleRemove(sessionId)}
                                     disabled={isSwitching || removingSessionId !== null}
                                     activeOpacity={0.6}
                                     hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
@@ -341,7 +369,7 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
                                         color={colors.textSecondary}
                                     />
                                 </TouchableOpacity>
-                            )}
+                            ) : null}
                         </TouchableOpacity>
                     );
                 })}
@@ -415,8 +443,8 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
                     </Text>
                 </TouchableOpacity>
 
-                {/* 6) Sign out of all accounts (only when >1 account). */}
-                {rows.length > 1 ? (
+                {/* 6) Sign out of all accounts (only when >1 device sign-in). */}
+                {deviceCount > 1 ? (
                     <TouchableOpacity
                         accessibilityRole="menuitem"
                         accessibilityLabel={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
@@ -545,6 +573,9 @@ const styles = StyleSheet.create({
         paddingVertical: 10,
         gap: 10,
     },
+    childRow: {
+        paddingLeft: 34,
+    },
     rowDisabled: {
         opacity: 0.4,
     },
@@ -552,13 +583,29 @@ const styles = StyleSheet.create({
         flex: 1,
         minWidth: 0,
     },
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
     accountName: {
         fontSize: 13,
         fontWeight: '500',
+        flexShrink: 1,
     },
     accountNameActive: {
         fontWeight: '600',
     },
+    roleBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1,
+        borderRadius: 8,
+    },
+    roleBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        textTransform: 'capitalize',
+    },
     accountEmail: {
         fontSize: 11,
         marginTop: 1,