@oxyhq/services 12.2.0 → 13.0.1

package/src/ui/components/ActiveAccountBanner.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  Image,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { useOxy } from '../context/OxyContext';
+import { getAccountDisplayName } from '@oxyhq/core';
+import { useI18n } from '../hooks/useI18n';
+
+/**
+ * ActiveAccountBanner — a subtle context cue shown when the active account is an
+ * account the user switched INTO (an org / project / bot / shared account)
+ * rather than their own personal account.
+ *
+ * Framing: this reads as the CURRENT account, NOT as delegation. There is no
+ * "acting as" / "on behalf of" copy and no "switch back" affordance — switching
+ * into an account makes the whole app become that account, and the banner simply
+ * confirms which account is active. To change accounts (including returning to
+ * the personal account) the user opens the unified account switcher and picks
+ * one; tapping the banner opens it.
+ *
+ * Renders nothing on the personal account. Place it in your app's layout where a
+ * persistent "you're in <Account>" cue is useful (typically below the header).
+ * The "account" here is the relational Account, NOT the cryptographic
+ * Commons/DID identity.
+ */
+const ActiveAccountBanner: React.FC = () => {
+  const bloomTheme = useTheme();
+  const { actingAsAccount, showBottomSheet, oxyServices } = useOxy();
+  const { t, locale } = useI18n();
+
+  const account = actingAsAccount?.account ?? null;
+
+  // Only a switched-into account warrants the cue; the personal account is the
+  // default and needs no banner.
+  if (!account) {
+    return null;
+  }
+
+  const displayName = getAccountDisplayName(account, locale);
+
+  const handlePress = () => {
+    showBottomSheet?.('AccountSwitcher');
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, { backgroundColor: `${bloomTheme.colors.primary}14` }]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={
+        t('accounts.activeAccount.a11y', { name: displayName })
+        || `Active account: ${displayName}. Tap to switch accounts.`
+      }
+    >
+      <View style={styles.content}>
+        {account.avatar ? (
+          <Image
+            source={{ uri: oxyServices.getFileDownloadUrl(account.avatar, 'thumb') }}
+            style={styles.avatar}
+          />
+        ) : (
+          <View style={[styles.avatarFallback, { backgroundColor: `${bloomTheme.colors.primary}30` }]}>
+            <Text style={[styles.avatarText, { color: bloomTheme.colors.primary }]}>
+              {displayName.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        )}
+        <View style={styles.textContainer}>
+          <Text style={[styles.name, { color: bloomTheme.colors.primary }]} numberOfLines={1}>
+            {displayName}
+          </Text>
+          <Text style={[styles.caption, { color: bloomTheme.colors.primary }]} numberOfLines={1}>
+            {t('accounts.activeAccount.label') || 'Active account'}
+          </Text>
+        </View>
+        <Ionicons name="chevron-down" size={18} color={bloomTheme.colors.primary} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+  avatarFallback: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    fontSize: 12,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 10,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+  },
+  caption: {
+    fontSize: 11,
+    opacity: 0.8,
+    marginTop: 1,
+  },
+});
+
+export default React.memo(ActiveAccountBanner);

package/src/ui/context/OxyContext.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react';
 import { OxyServices, oxyClient } from '@oxyhq/core';
 import type { User, ApiError, SessionLoginResponse } from '@oxyhq/core';
-import type { ManagedAccount, CreateManagedAccountInput } from '@oxyhq/core';
+import type { AccountNode, CreateAccountInput } from '@oxyhq/core';
 import { KeyManager } from '@oxyhq/core';
 import type { ClientSession } from '@oxyhq/core';
 import {
@@ -157,12 +157,48 @@ export interface OxyContextState {
   showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
   openAvatarPicker: () => void;
 
-  // Managed accounts (sub-accounts / managed identities)
+  // Unified account graph (self, owned orgs/projects/bots, accounts shared with
+  // the caller). The cryptographic Commons/DID "identity" is a SEPARATE concept.
+  //
+  // UX concept: the user picks an account and the WHOLE app becomes that account
+  // — a genuine switch, NOT an "acting on behalf of" delegation. `actingAs` +
+  // `X-Acting-As` remain the underlying transport (the only one that works for
+  // passwordless org/project/bot accounts), but the framing everywhere is simply
+  // "this is the active account". Read {@link activeAccount} for "who am I"
+  // surfaces; `actingAs` is the low-level mechanism state.
+  /**
+   * The id of the account switched INTO (`X-Acting-As`), or `null` when the
+   * active account is the sign-in's own personal account. This is the underlying
+   * mechanism state — UI should present the result through {@link activeAccount}
+   * rather than framing it as delegation.
+   */
   actingAs: string | null;
-  managedAccounts: ManagedAccount[];
-  setActingAs: (userId: string | null) => void;
-  refreshManagedAccounts: () => Promise<void>;
-  createManagedAccount: (data: CreateManagedAccountInput) => Promise<ManagedAccount>;
+  /** Every account the caller can access — own personal root, owned, and shared — from `listAccounts()`. */
+  accounts: AccountNode[];
+  /**
+   * The {@link AccountNode} switched into, resolved from `accounts` by
+   * `actingAs`. `null` when the active account is the sign-in's own personal
+   * account, or while the switched-into id has not yet appeared in the loaded
+   * `accounts` list.
+   */
+  actingAsAccount: AccountNode | null;
+  /**
+   * The effective ACTIVE account presented across the whole app — the account
+   * the user switched into when one is set and resolved, otherwise the signed-in
+   * user's own personal account. This is the single "who am I" source every
+   * identity surface (header avatar/name, profile chrome, context cues) should
+   * read, so a switch is reflected everywhere as a real account change.
+   *
+   * It is a {@link User} (the personal user, or the switched-into account's
+   * embedded user) so every identity surface renders it identically. Falls back
+   * to the personal `user` during the brief window after a switch before
+   * `accounts` has loaded the switched-into node, so the header never flashes
+   * empty. `null` only when signed out.
+   */
+  activeAccount: User | null;
+  setActingAs: (accountId: string | null) => void;
+  refreshAccounts: () => Promise<void>;
+  createAccount: (data: CreateAccountInput) => Promise<AccountNode>;
 }
 
 const OxyContext = createContext<OxyContextState | null>(null);
@@ -1981,9 +2017,18 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     showBottomSheet: showBottomSheetForContext,
   });
 
-  // --- Managed accounts state ---
+  // --- Account graph state ---
   const [actingAs, setActingAsState] = useState<string | null>(null);
-  const [managedAccounts, setManagedAccounts] = useState<ManagedAccount[]>([]);
+  const [accounts, setAccounts] = useState<AccountNode[]>([]);
+
+  // Latest `actingAs`, mirrored into a ref so `refreshAccounts` can reconcile a
+  // stale switch without taking `actingAs` as a dependency (which would re-run
+  // the account load on every switch). See the reconciliation block below.
+  const actingAsRef = useRef(actingAs);
+  actingAsRef.current = actingAs;
+  // `setActingAs` is declared after `refreshAccounts`; route the reconciliation
+  // clear through a ref so the load callback can call the latest implementation.
+  const setActingAsRef = useRef<((accountId: string | null) => void) | null>(null);
 
   // Restore actingAs from storage on startup
   useEffect(() => {
@@ -2005,41 +2050,57 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     return () => { mounted = false; };
   }, [storage, initialized, storageKeyPrefix, oxyServices]);
 
-  // Load managed accounts when authenticated
-  const refreshManagedAccounts = useCallback(async (): Promise<void> => {
+  // Load the unified account graph when authenticated
+  const refreshAccounts = useCallback(async (): Promise<void> => {
     if (!isAuthenticated || !tokenReady || !oxyServices.getAccessToken()) {
-      setManagedAccounts([]);
+      setAccounts([]);
       return;
     }
 
     try {
-      const accounts = await oxyServices.getManagedAccounts();
-      setManagedAccounts(accounts);
+      const list = await oxyServices.listAccounts();
+      setAccounts(list);
+      // Reconcile a stale switch: if the active account was switched INTO an id
+      // that is no longer accessible (account removed/archived, or it belonged
+      // to a now-inactive sign-in), drop back to the personal account so the
+      // app never keeps sending a dead `X-Acting-As` header. `list` is the
+      // authoritative accessible set on a successful fetch.
+      const current = actingAsRef.current;
+      if (current && !list.some((node) => node.accountId === current)) {
+        setActingAsRef.current?.(null);
+      }
     } catch (err) {
       if (isUnauthorizedStatus(err)) {
-        setManagedAccounts([]);
+        setAccounts([]);
         await clearSessionStateRef.current();
         return;
       }
       if (__DEV__) {
-        loggerUtil.debug('Failed to load managed accounts', { component: 'OxyContext' }, err as unknown);
+        loggerUtil.debug('Failed to load accounts', { component: 'OxyContext' }, err as unknown);
       }
     }
   }, [isAuthenticated, oxyServices, tokenReady]);
 
   useEffect(() => {
     if (isAuthenticated && initialized && tokenReady) {
-      refreshManagedAccounts();
+      refreshAccounts();
     }
-  }, [isAuthenticated, initialized, tokenReady, refreshManagedAccounts]);
-
-  const setActingAs = useCallback((userId: string | null) => {
-    oxyServices.setActingAs(userId);
-    setActingAsState(userId);
+  }, [isAuthenticated, initialized, tokenReady, refreshAccounts]);
+
+  const setActingAs = useCallback((accountId: string | null) => {
+    oxyServices.setActingAs(accountId);
+    setActingAsState(accountId);
+    // Switching the acting-as identity changes every server response, but React
+    // Query keys are not namespaced by the acting-as target, so the cache would
+    // otherwise keep serving the previous account's data. Invalidate everything
+    // so each query refetches under the new identity (the next request carries
+    // the updated `X-Acting-As` header). `invalidateQueries` (not `clear`) keeps
+    // the account list/switcher populated mid-switch instead of blanking out.
+    queryClient.invalidateQueries();
     // Persist to storage
     if (storage) {
-      if (userId) {
-        storage.setItem(`${storageKeyPrefix}_acting_as`, userId).catch((persistError) => {
+      if (accountId) {
+        storage.setItem(`${storageKeyPrefix}_acting_as`, accountId).catch((persistError) => {
           loggerUtil.debug('Failed to persist acting-as account', { component: 'OxyContext' }, persistError as unknown);
         });
       } else {
@@ -2048,13 +2109,31 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         });
       }
     }
-  }, [oxyServices, storage, storageKeyPrefix]);
+  }, [oxyServices, storage, storageKeyPrefix, queryClient]);
+  setActingAsRef.current = setActingAs;
+
+  // The account switched into, resolved from the loaded graph.
+  const actingAsAccount = useMemo<AccountNode | null>(() => {
+    if (!actingAs) return null;
+    return accounts.find((node) => node.accountId === actingAs) ?? null;
+  }, [actingAs, accounts]);
+
+  // The effective ACTIVE account presented across the app: the switched-into
+  // account's user when a switch is set and resolved, otherwise the signed-in
+  // user's own personal account. Derived (no effect) so identity surfaces always
+  // render the current account without separate syncing. Falls back to `user`
+  // while a just-set switch has not yet resolved in `accounts`, so the header
+  // never flashes empty mid-switch.
+  const activeAccount = useMemo<User | null>(
+    () => (actingAs && actingAsAccount ? actingAsAccount.account : user),
+    [actingAs, actingAsAccount, user],
+  );
 
-  const createManagedAccountFn = useCallback(async (data: CreateManagedAccountInput): Promise<ManagedAccount> => {
-    const account = await oxyServices.createManagedAccount(data);
-    await refreshManagedAccounts();
+  const createAccountFn = useCallback(async (data: CreateAccountInput): Promise<AccountNode> => {
+    const account = await oxyServices.createAccount(data);
+    await refreshAccounts();
     return account;
-  }, [oxyServices, refreshManagedAccounts]);
+  }, [oxyServices, refreshAccounts]);
 
   const canUsePrivateApi = authResolved && isAuthenticated && tokenReady && hasAccessToken;
   const isPrivateApiPending = !authResolved || (isAuthenticated && (!tokenReady || !hasAccessToken));
@@ -2099,10 +2178,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     showBottomSheet: showBottomSheetForContext,
     openAvatarPicker,
     actingAs,
-    managedAccounts,
+    accounts,
+    actingAsAccount,
+    activeAccount,
     setActingAs,
-    refreshManagedAccounts,
-    createManagedAccount: createManagedAccountFn,
+    refreshAccounts,
+    createAccount: createAccountFn,
   }), [
     activeSessionId,
     signIn,
@@ -2144,10 +2225,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     showBottomSheetForContext,
     openAvatarPicker,
     actingAs,
-    managedAccounts,
+    accounts,
+    actingAsAccount,
+    activeAccount,
     setActingAs,
-    refreshManagedAccounts,
-    createManagedAccountFn,
+    refreshAccounts,
+    createAccountFn,
   ]);
 
   return (
@@ -2215,10 +2298,12 @@ const LOADING_STATE: OxyContextState = {
   oxyServices: LOADING_STATE_OXY_SERVICES,
   openAvatarPicker: () => {},
   actingAs: null,
-  managedAccounts: [],
+  accounts: [],
+  actingAsAccount: null,
+  activeAccount: null,
   setActingAs: () => {},
-  refreshManagedAccounts: () => rejectMissingProvider<void>(),
-  createManagedAccount: () => rejectMissingProvider<ManagedAccount>(),
+  refreshAccounts: () => rejectMissingProvider<void>(),
+  createAccount: () => rejectMissingProvider<AccountNode>(),
 };
 
 export const useOxy = (): OxyContextState => {

package/src/ui/index.ts

@@ -27,6 +27,7 @@ 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 AccountSwitcher, AccountSwitcherView } from './components/AccountSwitcher';
 
 // Context + hooks
 export { useOxy } from './context/OxyContext';
@@ -38,6 +39,10 @@ export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';
 // Screens
 export { default as ProfileScreen } from './screens/ProfileScreen';
 export { default as ManageAccountScreen } from './screens/ManageAccountScreen';
+export { default as AccountSwitcherScreen } from './screens/AccountSwitcherScreen';
+export { default as CreateAccountScreen } from './screens/CreateAccountScreen';
+export { default as AccountMembersScreen } from './screens/AccountMembersScreen';
+export { default as AccountSettingsScreen } from './screens/AccountSettingsScreen';
 
 // Stores
 export { useAuthStore } from './stores/authStore';

package/src/ui/navigation/routes.ts

@@ -36,7 +36,10 @@ export type RouteName =
     | 'TrustFAQ'
     | 'FollowersList'  // List of user's followers
     | 'FollowingList' // List of users being followed
-    | 'CreateManagedAccount' // Create a new managed sub-account
+    | 'AccountSwitcher' // Unified account switcher (device sign-ins + account graph)
+    | 'CreateAccount' // Create a new account (organization / project / bot)
+    | 'AccountMembers' // Manage an account's members (invite / roles / transfer)
+    | 'AccountSettings' // Per-account profile edit + members + danger zone
     | 'AvatarCrop' // Square-crop editor presented before avatar upload
     | 'Notifications' // Per-channel notification preferences
     | 'ConnectedApps' // FedCM-authorized RP apps the user can revoke
@@ -77,7 +80,10 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     // User list screens (followers/following)
     FollowersList: () => require('../screens/FollowersListScreen').default,
     FollowingList: () => require('../screens/FollowingListScreen').default,
-    CreateManagedAccount: () => require('../screens/CreateManagedAccountScreen').default,
+    AccountSwitcher: () => require('../screens/AccountSwitcherScreen').default,
+    CreateAccount: () => require('../screens/CreateAccountScreen').default,
+    AccountMembers: () => require('../screens/AccountMembersScreen').default,
+    AccountSettings: () => require('../screens/AccountSettingsScreen').default,
     AvatarCrop: () => require('../screens/AvatarCropScreen').default,
     Notifications: () => require('../screens/NotificationsScreen').default,
     ConnectedApps: () => require('../screens/ConnectedAppsScreen').default,