@oxyhq/services 27.1.3 → 29.0.0

package/src/ui/components/OxyAuthChooser.tsx

@@ -37,11 +37,12 @@ import type React from 'react';
 import { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
 import { Linking, Platform } from 'react-native';
 import { toast } from '@oxyhq/bloom/toast';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
-import type { AccountDialogSnapshot } from '@oxyhq/core';
-import { isOxyRpOrigin } from '@oxyhq/core';
+import { getNormalizedUserHandle, isOxyRpOrigin, type User } from '@oxyhq/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../context/OxyContext';
+import { useDeviceSwitcher } from '../hooks/useDeviceSwitcher';
 import { useI18n } from '../hooks/useI18n';
 import {
   getAccountDialogConsumerHooks,
@@ -54,13 +55,16 @@ import AccountsMenuView from './authChooser/AccountsMenuView';
 import SignInEntryView from './authChooser/SignInEntryView';
 import SignInRequestView from './authChooser/SignInRequestView';
 import SignUpView from './authChooser/SignUpView';
-import type {
-  AccountStorageModel,
-  AccountsMenuActions,
-  OxyAuthChooserHandlers,
-  PasskeyMode,
-  SignInAlternatives,
+import {
+  resolveAccentHex,
+  type AccountHeroModel,
+  type AccountStorageModel,
+  type AccountsMenuActions,
+  type OxyAuthChooserHandlers,
+  type PasskeyMode,
+  type SignInAlternatives,
 } from './authChooser/types';
+import { EMPTY_ACCOUNT_DIALOG_SNAPSHOT } from '../hooks/accountDialogSnapshot';
 
 /** Commons' own identity-creation deep link (mirrors the `approve`/`attest`/`card` intents). */
 const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
@@ -96,16 +100,20 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
   const {
     accountDialogController: controller,
     showBottomSheet,
-    refreshAccounts,
     signInWithPasskey,
     registerWithPasskey,
     oxyServices,
     logout,
     openAvatarPicker,
+    user,
   } = useOxy();
   const theme = useTheme();
   const { t } = useI18n();
   const queryClient = useQueryClient();
+  // The device's people and what each may act as, resolved for rendering — the
+  // SAME hook (and the same one builder) the auth.oxy.so chooser renders from,
+  // so the two switchers cannot drift.
+  const { principals } = useDeviceSwitcher();
 
   // A credential minted for `oxy.so` can only be ASSERTED there (or a loopback
   // dev host) — a hard WebAuthn RP-ID boundary the browser enforces, not
@@ -217,7 +225,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
     [controller, autoStartSignIn],
   );
   const getSnapshot = useCallback(
-    () => (controller ? controller.getSnapshot() : EMPTY_SNAPSHOT),
+    () => (controller ? controller.getSnapshot() : EMPTY_ACCOUNT_DIALOG_SNAPSHOT),
     [controller],
   );
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
@@ -228,31 +236,97 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
     () => null,
   );
 
-  const handleSwitch = useCallback(
-    async (accountId: string) => {
+  const handleActivate = useCallback(
+    async (contextId: string) => {
       if (!controller) return;
-      if (controller.getSnapshot().switchingAccountId) return;
-      if (accountId === controller.getSnapshot().activeAccountId) {
+      if (controller.getSnapshot().activatingContextId) return;
+      // Already live: activating it again bumps nothing server-side, so treat
+      // the press as "yes, this one" and close.
+      if (contextId === controller.getSnapshot().activeContext?.contextId) {
         onComplete?.();
         return;
       }
       try {
-        await controller.switchTo(accountId);
-        // `switchTo` records failures on the controller snapshot. Read that
-        // state after the operation so the same path works with both the real
-        // controller and framework test doubles that return void.
+        await controller.activateContext(contextId);
+        // Failures are recorded on the controller snapshot rather than thrown,
+        // so the same path works with the real controller and with test doubles
+        // that resolve void.
         if (controller.getSnapshot().error) {
-          toast.error(t('accountSwitcher.toasts.switchFailed'));
+          toast.error(t('accountSwitcher.toasts.activateFailed'));
           return;
         }
-        void refreshAccounts();
+        // The subject changed, so every account-scoped query is now about
+        // somebody else. The runtime resets its own caches between the bearer
+        // commit and the notify; this drops the Query cache the same way the
+        // account switch did.
         queryClient.invalidateQueries();
         onComplete?.();
       } catch {
-        toast.error(t('accountSwitcher.toasts.switchFailed'));
+        toast.error(t('accountSwitcher.toasts.activateFailed'));
+      }
+    },
+    [controller, onComplete, queryClient, t],
+  );
+
+  /**
+   * Remove ONE `principal → account` pair.
+   *
+   * Confirmed, and the confirmation says whose route is going: on a shared
+   * device the same organization is reachable through somebody else, and their
+   * access is untouched. That is the fact a single "remove account" control
+   * would get wrong.
+   */
+  const handleRemoveContext = useCallback(
+    async (contextId: string) => {
+      if (!controller) return;
+      const group = principals.find((principal) =>
+        principal.contexts.some((context) => context.contextId === contextId),
+      );
+      const context = group?.contexts.find((row) => row.contextId === contextId);
+      if (!group || !context) return;
+      const confirmed = await surfaces.confirm({
+        title: t('accountSwitcher.confirms.removeContextTitle'),
+        message: t('accountSwitcher.confirms.removeContext', {
+          person: group.displayName,
+          account: context.displayName,
+        }),
+        confirmLabel: t('common.remove'),
+        cancelLabel: t('common.cancel'),
+        destructive: true,
+      });
+      if (!confirmed) return;
+      const removed = await controller.signOutContext(contextId);
+      if (!removed) {
+        toast.error(t('accountSwitcher.toasts.contextRemoveFailed'));
+        return;
+      }
+      toast.success(t('accountSwitcher.toasts.contextRemoved', { account: context.displayName }));
+    },
+    [controller, principals, t],
+  );
+
+  /** Remove ONE PERSON and every account they reach here, and nobody else's. */
+  const handleRemovePrincipal = useCallback(
+    async (principalId: string) => {
+      if (!controller) return;
+      const group = principals.find((principal) => principal.principalId === principalId);
+      if (!group) return;
+      const confirmed = await surfaces.confirm({
+        title: t('accountSwitcher.confirms.removePrincipalTitle'),
+        message: t('accountSwitcher.confirms.removePrincipal', { name: group.displayName }),
+        confirmLabel: t('common.actions.signOut'),
+        cancelLabel: t('common.cancel'),
+        destructive: true,
+      });
+      if (!confirmed) return;
+      const removed = await controller.signOutPrincipal(principalId);
+      if (!removed) {
+        toast.error(t('accountSwitcher.toasts.principalRemoveFailed'));
+        return;
       }
+      toast.success(t('accountSwitcher.toasts.principalRemoved', { name: group.displayName }));
     },
-    [controller, onComplete, refreshAccounts, queryClient, t],
+    [controller, principals, t],
   );
 
   const handleManage = useCallback(() => {
@@ -278,8 +352,14 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
 
   const handlers = useMemo<OxyAuthChooserHandlers>(
     () => ({
-      onSwitch: (accountId) => {
-        void handleSwitch(accountId);
+      onActivate: (contextId) => {
+        void handleActivate(contextId);
+      },
+      onRemoveContext: (contextId) => {
+        void handleRemoveContext(contextId);
+      },
+      onRemovePrincipal: (principalId) => {
+        void handleRemovePrincipal(principalId);
       },
       onAdd: handleAdd,
       onManage: handleManage,
@@ -287,7 +367,21 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
       // uploads / clears the picked photo — the single shared avatar write path.
       onEditAvatar: () => openAvatarPicker(),
     }),
-    [handleSwitch, handleAdd, handleManage, openAvatarPicker],
+    [handleActivate, handleRemoveContext, handleRemovePrincipal, handleAdd, handleManage, openAvatarPicker],
+  );
+
+  /**
+   * The hero block — the account this client is signed in as, from its FULL
+   * profile rather than from a directory row.
+   *
+   * The directory carries the minimum that renders a row for every person on
+   * the device; this is the one account we legitimately hold everything for, so
+   * the hero keeps its real EMAIL, which the rows below do not pretend to have.
+   * The accent is not in that category — every row is drawn in its own account's
+   * (issue #961), this one included, from the same field.
+   */
+  const hero = useMemo<AccountHeroModel | null>(() => (user ? buildHero(user, theme.colors.primary, oxyServices) : null),
+    [user, theme.colors.primary, oxyServices],
   );
 
   // Everything that is NOT the surface's one primary action. Wired once here;
@@ -373,6 +467,8 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
     return (
       <AccountsMenuView
         snapshot={snapshot}
+        principals={principals}
+        hero={hero}
         theme={theme}
         t={t}
         handlers={handlers}
@@ -417,6 +513,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
   return (
     <SignInEntryView
       snapshot={snapshot}
+      principals={principals}
       theme={theme}
       t={t}
       handlers={handlers}
@@ -426,30 +523,32 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({
   );
 };
 
-// ---------------------------------------------------------------------------
-// Empty snapshot (no-provider loading state)
-// ---------------------------------------------------------------------------
-
-const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
-  view: 'accounts',
-  accounts: [],
-  activeAccountId: null,
-  loading: false,
-  error: null,
-  switchingAccountId: null,
-  signIn: {
-    phase: 'idle',
-    authorizeCode: null,
-    qrPayload: null,
-    expiresAt: null,
-    error: null,
-    route: null,
-    routeFailed: false,
-    pushSentAt: null,
-    openedAt: null,
-    progress: 'idle',
-  },
-  commonsAvailability: 'unknown',
-};
+/**
+ * The hero model for the signed-in account.
+ *
+ * The address line is the account's canonical `@oxy.so` email when it has one,
+ * else its normalized `@handle`. It never synthesizes a `username@oxy.so`
+ * address — the identity contract forbids it, and a non-Oxy or missing email
+ * falls through to the handle.
+ */
+function buildHero(
+  user: User,
+  fallbackAccent: string,
+  oxyServices: ReturnType<typeof useOxy>['oxyServices'],
+): AccountHeroModel {
+  const handle = getNormalizedUserHandle(user);
+  const displayName = user.name?.displayName?.trim() || handle || '';
+  const addressLine = user.email?.toLowerCase().endsWith('@oxy.so')
+    ? user.email
+    : handle
+      ? `@${handle}`
+      : null;
+  return {
+    displayName,
+    addressLine,
+    avatarUrl: user.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined,
+    accentHex: resolveAccentHex(user.color ?? null, fallbackAccent),
+  };
+}
 
 export default OxyAuthChooser;

package/src/ui/components/OxyProvider.tsx

@@ -3,7 +3,7 @@ import { AppState, Platform, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { OxyProviderProps } from '../types/navigation';
-import { OxyContextProvider, type OxyContextProviderProps } from '../context/OxyContext';
+import { OxyRuntimeProvider, type OxyRuntimeProviderProps } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import { BloomDialogProvider } from '@oxyhq/bloom/dialog';
 import { SurfaceProvider } from '@oxyhq/bloom/surfaces';
@@ -97,6 +97,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     queryClient: providedQueryClient,
     requireAuth = 'off',
     backgroundSession = false,
+    deviceCredentialStorage = 'persistent',
 }) => {
 
     // Dynamic KeyboardProvider for native. Uses variable indirection
@@ -284,8 +285,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
     const coreContent = (
         <QueryClientProvider client={queryClient}>
             <BloomDialogProvider>
-                <OxyContextProvider
-                    oxyServices={oxyServices as OxyContextProviderProps['oxyServices']}
+                <OxyRuntimeProvider
+                    oxyServices={oxyServices as OxyRuntimeProviderProps['oxyServices']}
                     baseURL={baseURL}
                     authWebUrl={authWebUrl}
                     authRedirectUri={authRedirectUri}
@@ -295,7 +296,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
                     sessionMode={sessionMode}
                     webAuthMode={webAuthMode}
                     backgroundSession={backgroundSession}
-                    onAuthStateChange={onAuthStateChange as OxyContextProviderProps['onAuthStateChange']}
+                    deviceCredentialStorage={deviceCredentialStorage}
+                    onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
                 >
                     <SurfaceProvider>
                         {requireAuth === 'off' ? (
@@ -305,7 +307,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
                         )}
                     </SurfaceProvider>
                     <ToastOutlet />
-                </OxyContextProvider>
+                </OxyRuntimeProvider>
             </BloomDialogProvider>
         </QueryClientProvider>
     );

package/src/ui/components/SurfaceScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
-import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import React, { Suspense, useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxyhq/bloom/theme';
 import {
@@ -25,7 +25,7 @@ import {
 } from '../hooks/useSurfaceHeader';
 import type { BaseScreenProps } from '../types/navigation';
 
-/** Error boundary catching screen render failures (e.g. a lazy `require()` throw). */
+/** Error boundary catching screen render failures, so one bad screen cannot blank the surface. */
 interface ScreenErrorBoundaryState {
   error: Error | null;
 }
@@ -69,12 +69,34 @@ class ScreenErrorBoundary extends React.Component<
   }
 }
 
+/** The body fill shared by the two states that replace a screen: crashed, and not loaded yet. */
 const errorStyles = StyleSheet.create({
   container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
   title: { fontSize: 16, fontWeight: '600', marginBottom: 8 },
   message: { fontSize: 13, textAlign: 'center' },
 });
 
+/**
+ * Shown while a route's screen module is still loading. Screens are registered
+ * as `lazy(() => import(...))` (see `../navigation/routes`), so the very first
+ * presentation of a surface can land here for a frame; the surface chrome is
+ * already on screen by then, so this fills only the body.
+ *
+ * Deliberately RN's `ActivityIndicator` rather than `@oxyhq/bloom/loading`,
+ * matching `authChooser/requestSurfaces`: Bloom still declares
+ * `sideEffects: false`, so its `Loading` can still tree-shake to `undefined` in
+ * a rolldown-vite production bundle. Removing that risk from the first frame of
+ * every route is not worth a themed spinner.
+ */
+function ScreenPending() {
+  const theme = useTheme();
+  return (
+    <View style={errorStyles.container}>
+      <ActivityIndicator size="large" color={theme.colors.primary} />
+    </View>
+  );
+}
+
 export interface SurfaceScreenProps {
   /** This surface's route history (the NAV-WITHIN axis). */
   navStack: SurfaceNavStack;
@@ -251,7 +273,9 @@ function SurfaceScreen({
   return (
     <SurfaceHeaderContext.Provider value={headerContext}>
       <ScreenErrorBoundary screenName={top.route}>
-        <ScreenComponent {...screenProps} />
+        <Suspense fallback={<ScreenPending />}>
+          <ScreenComponent {...screenProps} />
+        </Suspense>
       </ScreenErrorBoundary>
     </SurfaceHeaderContext.Provider>
   );

package/src/ui/components/__tests__/followTargetButton.test.ts

@@ -19,6 +19,8 @@ import {
 } from '../FollowTargetButton';
 import {
   isCompleteFollowStatus,
+  followRecordToStatus,
+  followRecordsToStatusMap,
   isFollowedGlobally,
   UNKNOWN_FOLLOW_STATUS,
   withApplicationMode,
@@ -165,6 +167,43 @@ describe('withApplicationMode', () => {
     ).toBe(false);
     expect(isCompleteFollowStatus(UNKNOWN_FOLLOW_STATUS)).toBe(true);
   });
+
+  it('converts a list row into a complete follow status', () => {
+    const status = followRecordToStatus({
+      relationshipId: 'rel-1',
+      target: { id: 'tgt-1', uri: 'https://example.test/t/1', kind: 'oxy.topic' },
+      globalState: 'active',
+      applicationMode: 'inherit',
+      effectiveState: 'following',
+      originApplicationId: 'app-a',
+      createdAt: '2026-01-01T00:00:00.000Z',
+    });
+    expect(status).toEqual({
+      relationshipId: 'rel-1',
+      globalState: 'active',
+      applicationMode: 'inherit',
+      effectiveState: 'following',
+    });
+    expect(isCompleteFollowStatus(status)).toBe(true);
+    expect(followRecordsToStatusMap([
+      {
+        relationshipId: 'rel-1',
+        target: { id: 'tgt-1', uri: 'https://example.test/t/1', kind: 'oxy.topic' },
+        globalState: 'active',
+        applicationMode: 'disabled',
+        effectiveState: 'not_following',
+        originApplicationId: null,
+        createdAt: '2026-01-01T00:00:00.000Z',
+      },
+    ])).toEqual({
+      'tgt-1': {
+        relationshipId: 'rel-1',
+        globalState: 'active',
+        applicationMode: 'disabled',
+        effectiveState: 'not_following',
+      },
+    });
+  });
 });
 
 describe('what onChange reports', () => {