@oxyhq/services 26.0.1 → 26.0.3

package/src/ui/hooks/useSurfaceHeader.ts

@@ -10,8 +10,13 @@ import type { DialogHeaderConfig } from '@oxyhq/bloom/dialog';
  * design-system fields Bloom's nav header supports: the single trailing
  * `primaryAction` CTA (Upload / Save), a trailing icon `actions` row, a header
  * `search` / `segments` in the large-title zone, an `onImage` `tone` over media,
- * and a wizard `progress` bar. Object/slot fields MUST be referentially stable
- * (memoize them with `useMemo`) so the header does not thrash.
+ * and a wizard `progress` bar.
+ *
+ * Only the NODE fields (`left`/`right`/`titleContent`, and an action's `icon`)
+ * must be referentially stable — a node can only be compared by identity, so an
+ * inline one thrashes the header. The rich OBJECT fields are compared by value
+ * (see {@link surfaceHeaderContentEqual}), so an inline `primaryAction` /
+ * `actions` / `search` / `segments` / `progress` is safe to pass.
  */
 export type SurfaceHeaderContent = Pick<
   DialogHeaderConfig,
@@ -42,16 +47,86 @@ interface SurfaceHeaderContextValue {
  */
 export const SurfaceHeaderContext = createContext<SurfaceHeaderContextValue | null>(null);
 
+type HeaderPrimaryAction = NonNullable<SurfaceHeaderContent['primaryAction']>;
+type HeaderAction = NonNullable<SurfaceHeaderContent['actions']>[number];
+type HeaderSearch = NonNullable<SurfaceHeaderContent['search']>;
+type HeaderSegments = NonNullable<SurfaceHeaderContent['segments']>;
+type HeaderProgress = NonNullable<SurfaceHeaderContent['progress']>;
+
+function primaryActionEqual(
+  a: HeaderPrimaryAction | undefined,
+  b: HeaderPrimaryAction | undefined,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  // `onPress` is a fresh closure each render — its identity never changes what
+  // the button renders, so compare only the render-affecting scalars.
+  return a.label === b.label && !!a.disabled === !!b.disabled && !!a.loading === !!b.loading;
+}
+
+function actionsEqual(a: HeaderAction[] | undefined, b: HeaderAction[] | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    const x = a[i];
+    const y = b[i];
+    if (!x || !y) return false;
+    // `icon` is a node (identity); `onPress` is ignored, like `primaryAction`'s.
+    if (
+      x.accessibilityLabel !== y.accessibilityLabel ||
+      !!x.disabled !== !!y.disabled ||
+      x.icon !== y.icon
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function searchEqual(a: HeaderSearch | undefined, b: HeaderSearch | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.value === b.value && a.placeholder === b.placeholder;
+}
+
+function segmentsEqual(a: HeaderSegments | undefined, b: HeaderSegments | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.value !== b.value || a.items.length !== b.items.length) return false;
+  for (let i = 0; i < a.items.length; i += 1) {
+    const x = a.items[i];
+    const y = b.items[i];
+    if (!x || !y || x.key !== y.key || x.label !== y.label) return false;
+  }
+  return true;
+}
+
+function progressEqual(a: HeaderProgress | undefined, b: HeaderProgress | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.step === b.step && a.total === b.total;
+}
+
 /**
- * Shallow value-equality for a surface's header contribution.
+ * Value-equality for a surface's header contribution.
+ *
+ * This MIRRORS Bloom's own `configsEqual` (`@oxyhq/bloom/dialog`), which guards
+ * the header store one layer down — deliberately field for field. The two must
+ * not diverge: this comparator is the gate that decides whether the host's
+ * `setContent` fires, so a comparator STRICTER than Bloom's re-introduces the
+ * update loop Bloom's own guard was written to prevent.
+ *
+ * Scalars (`title`/`subtitle`/`largeTitle`/`tone`) compare by value. The rich
+ * object fields (`primaryAction`/`actions`/`search`/`segments`/`progress`)
+ * compare by their render-affecting scalars, so a screen may build them inline:
+ * a fresh object with unchanged contents is NOT a change. Only the node fields
+ * (`titleContent`/`left`/`right`, and an action's `icon`) compare by identity —
+ * there is nothing else to compare a `ReactNode` by — so those, and only those,
+ * carry the memoize-me contract.
  *
- * Scalars (`title`/`subtitle`/`largeTitle`/`tone`) compare by value; the object
- * and node fields (`titleContent`/`left`/`right`/`primaryAction`/`actions`/
- * `search`/`segments`/`progress`) compare by identity — callers memoize them, per
- * this hook's contract. Function-typed affordances compare by PRESENCE, never
- * identity: `onBack` legitimately gets a fresh closure each render, and its
- * identity never changes what the header renders, so it must not count as a
- * change (that is exactly what would drive the update loop).
+ * Function-typed affordances compare by PRESENCE, never identity: `onBack`
+ * legitimately gets a fresh closure each render and its identity never changes
+ * what the header renders, so it must not count as a change (that is exactly
+ * what would drive the update loop).
  */
 function surfaceHeaderContentEqual(
   a: SurfaceHeaderContent | null,
@@ -67,12 +142,12 @@ function surfaceHeaderContentEqual(
     a.left === b.left &&
     a.right === b.right &&
     !!a.onBack === !!b.onBack &&
-    a.primaryAction === b.primaryAction &&
-    a.actions === b.actions &&
-    a.search === b.search &&
-    a.segments === b.segments &&
     a.tone === b.tone &&
-    a.progress === b.progress
+    primaryActionEqual(a.primaryAction, b.primaryAction) &&
+    actionsEqual(a.actions, b.actions) &&
+    searchEqual(a.search, b.search) &&
+    segmentsEqual(a.segments, b.segments) &&
+    progressEqual(a.progress, b.progress)
   );
 }
 

package/src/ui/navigation/accountDialogManager.ts

@@ -12,6 +12,14 @@
 
 import type { AccountDialogView } from '@oxyhq/core';
 
+/** An app-owned action rendered inside the shared account menu. */
+export interface AccountDialogMenuItem {
+  key: string;
+  label: string;
+  icon?: string;
+  onPress: () => void;
+}
+
 /**
  * Live open/close handles registered by the mounted provider. `open` presents
  * the `AccountDialog` surface (and points its view); `close` dismisses it. Both
@@ -31,6 +39,7 @@ export interface AccountDialogConsumerHooks {
   onNavigateManage?: () => void;
   onAddAccount?: () => void;
   onNavigateProfile?: () => void;
+  menuItems?: readonly AccountDialogMenuItem[];
 }
 
 let controls: AccountDialogControls | null = null;

package/src/ui/oauth/__tests__/oauthPopup.test.ts

@@ -9,6 +9,7 @@ import { OXY_OAUTH_CODE_MESSAGE_TYPE, OXY_OAUTH_ERROR_MESSAGE_TYPE } from '../oa
 import type { OAuthPopupHandle, OAuthPopupOutcome } from '../types';
 
 const IDP_ORIGIN = 'https://auth.oxy.so';
+const REDIRECT_URI = 'https://mention.earth';
 const STATE = 'state-abc';
 
 interface ControllablePopup extends OAuthPopupHandle {
@@ -161,6 +162,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     dispatchMessage(codeMessage(popup));
@@ -175,6 +177,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     dispatchMessage({
@@ -202,6 +205,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     dispatchMessage(codeMessage(popup, 'a-different-state'));
@@ -219,6 +223,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
       timeoutMs: 60_000,
     });
 
@@ -237,6 +242,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
       timeoutMs: 60_000,
     });
 
@@ -254,6 +260,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     dispatchMessage(codeMessage(popup));
@@ -277,6 +284,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     popup.setClosed();
@@ -295,6 +303,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
     });
 
     // The IdP posts its result and immediately closes itself.
@@ -313,6 +322,7 @@ describe('awaitOAuthPopupResult', () => {
       popup,
       expectedOrigin: IDP_ORIGIN,
       expectedState: STATE,
+      redirectUri: REDIRECT_URI,
       timeoutMs: 30_000,
     });
 
@@ -323,4 +333,20 @@ describe('awaitOAuthPopupResult', () => {
     await expect(promise).resolves.toEqual({ kind: 'timed-out' });
     expectFullCleanup();
   });
+
+  it('reads a same-origin redirect fallback from the popup URL when postMessage is unavailable', async () => {
+    const popup = fakePopup();
+    popup.location.href = `${REDIRECT_URI}?code=auth-code&state=${STATE}`;
+    const promise = awaitOAuthPopupResult({
+      popup,
+      expectedOrigin: IDP_ORIGIN,
+      expectedState: STATE,
+      redirectUri: REDIRECT_URI,
+    });
+
+    jest.advanceTimersByTime(1000);
+
+    await expect(promise).resolves.toEqual({ kind: 'code', code: 'auth-code', state: STATE });
+    expectFullCleanup();
+  });
 });

package/src/ui/oauth/browserAuthTransport.ts

@@ -102,58 +102,60 @@ export async function startWebOAuthSignIn(
     return startRedirectSignIn(context, options, 'popup-blocked');
   }
 
-  const prepared = await prepareAuthorizeRequest({
-    clientId: context.clientId,
-    redirectUri: options.redirectUri,
-    authorizeBaseUrl: context.authorizeBaseUrl,
-    scope: options.scope,
-    responseMode: 'web_message',
-  });
+  try {
+    const prepared = await prepareAuthorizeRequest({
+      clientId: context.clientId,
+      redirectUri: options.redirectUri,
+      authorizeBaseUrl: context.authorizeBaseUrl,
+      scope: options.scope,
+      responseMode: 'web_message',
+    });
 
-  if (!navigateOAuthPopup(popup, prepared.authorizeUrl)) {
-    closeOAuthPopup(popup);
-    return startRedirectSignIn(context, options, 'popup-navigation-failed');
-  }
+    if (!navigateOAuthPopup(popup, prepared.authorizeUrl)) {
+      return startRedirectSignIn(context, options, 'popup-navigation-failed');
+    }
 
-  const outcome = await awaitOAuthPopupResult({
-    popup,
-    expectedOrigin: prepared.authorizeOrigin,
-    expectedState: prepared.handshake.state,
-    ...(options.timeoutMs !== undefined ? { timeoutMs: options.timeoutMs } : {}),
-  });
-  // The IdP closes itself after delivering; this covers every other outcome
-  // (timeout, mismatch, an error the IdP reported before closing).
-  closeOAuthPopup(popup);
+    const outcome = await awaitOAuthPopupResult({
+      popup,
+      expectedOrigin: prepared.authorizeOrigin,
+      expectedState: prepared.handshake.state,
+      redirectUri: options.redirectUri,
+      ...(options.timeoutMs !== undefined ? { timeoutMs: options.timeoutMs } : {}),
+    });
 
-  switch (outcome.kind) {
-    case 'code': {
-      const completion = await completeOAuthCode({
-        oxyServices: context.oxyServices,
-        clientId: context.clientId,
-        code: outcome.code,
-        returnedState: outcome.state,
-        handshake: prepared.handshake,
-        redirectUri: options.redirectUri,
-        commitSession: context.commitSession,
-      });
-      return completion.ok
-        ? { status: 'signed-in' }
-        : { status: 'failed', reason: completion.reason };
+    switch (outcome.kind) {
+      case 'code': {
+        const completion = await completeOAuthCode({
+          oxyServices: context.oxyServices,
+          clientId: context.clientId,
+          code: outcome.code,
+          returnedState: outcome.state,
+          handshake: prepared.handshake,
+          redirectUri: options.redirectUri,
+          commitSession: context.commitSession,
+        });
+        return completion.ok
+          ? { status: 'signed-in' }
+          : { status: 'failed', reason: completion.reason };
+      }
+      case 'oauth-error':
+        return {
+          status: 'failed',
+          reason: 'idp-error',
+          description: outcome.errorDescription ?? outcome.error,
+        };
+      case 'state-mismatch':
+        return { status: 'failed', reason: 'state-mismatch' };
+      case 'closed':
+        return { status: 'cancelled' };
+      case 'timed-out':
+        return { status: 'timed-out' };
+      case 'unsupported':
+        return { status: 'unsupported', reason: 'no-browser' };
     }
-    case 'oauth-error':
-      return {
-        status: 'failed',
-        reason: 'idp-error',
-        description: outcome.errorDescription ?? outcome.error,
-      };
-    case 'state-mismatch':
-      return { status: 'failed', reason: 'state-mismatch' };
-    case 'closed':
-      return { status: 'cancelled' };
-    case 'timed-out':
-      return { status: 'timed-out' };
-    case 'unsupported':
-      return { status: 'unsupported', reason: 'no-browser' };
+  } finally {
+    // Covers throws after open (prepare/exchange/commit) and every settled outcome.
+    closeOAuthPopup(popup);
   }
 }
 
@@ -178,7 +180,11 @@ async function startRedirectSignIn(
     scope: options.scope,
   });
 
-  if (!persistOAuthHandshake(prepared.handshake.state, prepared.handshake.codeVerifier)) {
+  if (!persistOAuthHandshake(
+    prepared.handshake.state,
+    prepared.handshake.codeVerifier,
+    options.redirectUri,
+  )) {
     return { status: 'failed', reason: 'handshake-storage' };
   }
 

package/src/ui/oauth/oauthPopup.ts

@@ -19,7 +19,7 @@
  *   opaque. The authorization result arrives ONLY as a `postMessage`.
  */
 
-import { logger } from '@oxyhq/core';
+import { canonicalizeOAuthRedirectUri, logger } from '@oxyhq/core';
 import { readOAuthPopupMessage } from './oauthPopupMessages';
 import type { OAuthPopupHandle, OAuthPopupOutcome } from './types';
 
@@ -119,6 +119,47 @@ export function closeOAuthPopup(popup: OAuthPopupHandle | null): void {
   }
 }
 
+/**
+ * When the IdP falls back to a top-level redirect inside the popup (no usable
+ * `window.opener`), a same-origin `redirect_uri` is readable from the opener.
+ * Cross-origin redirects remain opaque and are not handled here.
+ */
+function readSameOriginRedirectOutcome(
+  popup: OAuthPopupHandle,
+  redirectUri: string,
+  expectedState: string,
+): OAuthPopupOutcome | null {
+  try {
+    const href = popup.location.href;
+    if (!href) return null;
+
+    const popupUrl = new URL(href);
+    const expected = new URL(canonicalizeOAuthRedirectUri(redirectUri));
+    if (popupUrl.origin !== expected.origin) return null;
+    if (popupUrl.pathname !== expected.pathname) return null;
+
+    const oauthError = popupUrl.searchParams.get('error');
+    if (oauthError) {
+      const errorDescription = popupUrl.searchParams.get('error_description') ?? undefined;
+      return {
+        kind: 'oauth-error',
+        error: oauthError,
+        ...(errorDescription ? { errorDescription } : {}),
+      };
+    }
+
+    const code = popupUrl.searchParams.get('code');
+    if (!code) return null;
+
+    const state = popupUrl.searchParams.get('state');
+    if (!state || state !== expectedState) return { kind: 'state-mismatch' };
+    return { kind: 'code', code, state };
+  } catch {
+    // Cross-origin navigation — the popup URL is opaque to the opener.
+    return null;
+  }
+}
+
 /** Inputs for {@link awaitOAuthPopupResult}. */
 export interface AwaitOAuthPopupOptions {
   /** The exact window reference returned by {@link openOAuthPopup}. */
@@ -127,6 +168,12 @@ export interface AwaitOAuthPopupOptions {
   expectedOrigin: string;
   /** The CSRF `state` sent on the authorize request. */
   expectedState: string;
+  /**
+   * EXACT registered redirect URI for this attempt. When the IdP cannot
+   * `postMessage` (no usable opener) it falls back to redirecting the popup;
+   * if that lands on the same origin, the result is read from the popup URL.
+   */
+  redirectUri: string;
   /** @default DEFAULT_OAUTH_POPUP_TIMEOUT_MS */
   timeoutMs?: number;
 }
@@ -145,8 +192,13 @@ export interface AwaitOAuthPopupOptions {
 export function awaitOAuthPopupResult(
   options: AwaitOAuthPopupOptions,
 ): Promise<OAuthPopupOutcome> {
-  const { popup, expectedOrigin, expectedState, timeoutMs = DEFAULT_OAUTH_POPUP_TIMEOUT_MS } =
-    options;
+  const {
+    popup,
+    expectedOrigin,
+    expectedState,
+    redirectUri,
+    timeoutMs = DEFAULT_OAUTH_POPUP_TIMEOUT_MS,
+  } = options;
 
   const host = messageEventHost();
   if (!host) return Promise.resolve({ kind: 'unsupported' });
@@ -206,6 +258,12 @@ export function awaitOAuthPopupResult(
     timeoutTimer = setTimeout(() => settle({ kind: 'timed-out' }), timeoutMs);
 
     closePoll = setInterval(() => {
+      const redirectOutcome = readSameOriginRedirectOutcome(popup, redirectUri, expectedState);
+      if (redirectOutcome) {
+        settle(redirectOutcome);
+        return;
+      }
+
       if (!popup.closed) return;
       // Stop sampling immediately: the window is gone and only the in-flight
       // message (if any) can still change the outcome.

package/src/ui/screens/AccountMembersScreen.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -5,21 +5,21 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
-import type { UpdateAccountInput } from '@oxyhq/core';
+import { DISPLAY_NAME_INVALID_MESSAGE, getNormalizedUserHandle, isValidDisplayName, MAX_DISPLAY_NAME_LENGTH, type UpdateAccountInput } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
-const DISPLAY_NAME_MAX = 50;
+const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 const errorMessage = (error: unknown, fallback: string): string =>
@@ -62,14 +62,15 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
   // Editable fields, seeded lazily from the loaded account once.
   const [seeded, setSeeded] = useState(false);
   const [displayName, setDisplayName] = useState('');
+  const [displayNameError, setDisplayNameError] = useState('');
   const [bio, setBio] = useState('');
 
   // Seed the form from the account during render (no useEffect): the first time
   // the query resolves we capture its values into local edit state.
   if (node && !seeded) {
-    const first = node.account?.name?.first ?? '';
-    const last = node.account?.name?.last ?? '';
-    setDisplayName([first, last].filter(Boolean).join(' '));
+    setDisplayName(
+      node.account?.name?.displayName ?? getNormalizedUserHandle(node.account) ?? '',
+    );
     setBio(node.account?.bio ?? '');
     setSeeded(true);
   }
@@ -121,8 +122,27 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
     if (confirmed) archiveMutation.mutate();
   }, [archiveMutation, t]);
 
+  const handleDisplayNameChange = useCallback((value: string) => {
+    setDisplayName(value);
+    const trimmed = value.trim();
+    if (!trimmed) {
+      setDisplayNameError('');
+      return;
+    }
+    const nameParts = trimmed.split(/\s+/).filter(Boolean);
+    const first = nameParts[0] || '';
+    const last = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
+    const invalidPart = [first, last].find((part) => part && !isValidDisplayName(part));
+    setDisplayNameError(
+      invalidPart
+        ? (t('accounts.settings.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE)
+        : '',
+    );
+  }, [t]);
+
   const handleSave = useCallback(() => {
     const trimmed = displayName.trim();
+    if (!trimmed || displayNameError) return;
     const nameParts = trimmed.split(/\s+/).filter(Boolean);
     const first = nameParts[0] || '';
     const last = nameParts.length > 1 ? nameParts.slice(1).join(' ') : undefined;
@@ -130,7 +150,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
       name: { first, last },
       bio: bio.trim() ? bio.trim() : null,
     });
-  }, [displayName, bio, updateMutation]);
+  }, [displayName, displayNameError, bio, updateMutation]);
 
   const title = t('accounts.settings.title') || 'Account settings';
 
@@ -171,15 +191,23 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
               {/* Profile edit */}
               {canUpdate ? (
                 <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
-                  <TextField>
-                    <TextFieldInput
-                      floatingLabel
-                      label={t('accounts.settings.displayName.label') || 'Display name'}
-                      value={displayName}
-                      onChangeText={setDisplayName}
-                      maxLength={DISPLAY_NAME_MAX}
-                    />
-                  </TextField>
+                  <View className="gap-space-4">
+                    <TextField isInvalid={Boolean(displayNameError)}>
+                      <TextFieldInput
+                        floatingLabel
+                        label={t('accounts.settings.displayName.label') || 'Display name'}
+                        value={displayName}
+                        onChangeText={handleDisplayNameChange}
+                        isInvalid={Boolean(displayNameError)}
+                        maxLength={DISPLAY_NAME_MAX}
+                      />
+                    </TextField>
+                    {displayNameError ? (
+                      <Text className="text-caption font-caption text-negative px-space-4">
+                        {displayNameError}
+                      </Text>
+                    ) : null}
+                  </View>
                   <View className="gap-space-4">
                     <TextField>
                       <TextFieldInput
@@ -200,7 +228,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
                   <Button
                     variant="primary"
                     onPress={handleSave}
-                    disabled={updateMutation.isPending || !displayName.trim()}
+                    disabled={updateMutation.isPending || !displayName.trim() || Boolean(displayNameError)}
                     loading={updateMutation.isPending}
                     accessibilityLabel={t('accounts.settings.save') || 'Save changes'}
                     className="w-full"

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -4,7 +4,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H4, Text } from '@oxyhq/bloom/typography';

package/src/ui/screens/AppInfoScreen.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxyhq/core';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';

package/src/ui/screens/AvatarCropScreen.tsx

@@ -55,7 +55,7 @@ import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useReduceMotion } from '../hooks/useReduceMotion';
 import { useSurfaceHeader, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import type { BaseScreenProps } from '../types/navigation';
 
 /** Component name used in `logger` context for filtered diagnostics. */

package/src/ui/screens/ChangeAvatarScreen.tsx

@@ -39,8 +39,8 @@ import {
 } from '@oxyhq/bloom/admonition';
 import { surfaces as bloomSurfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { toast } from '@oxyhq/bloom';
-import { getAccountDisplayName, logger } from '@oxyhq/core';
+import { toast } from '@oxyhq/bloom/toast';
+import { getNormalizedUserHandle, logger } from '@oxyhq/core';
 import type { FileMetadata } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -133,7 +133,7 @@ async function loadImagePicker(): Promise<ImagePickerModule | null> {
 
 const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) => {
     const bloomTheme = useTheme();
-    const { t, locale } = useI18n();
+    const { t } = useI18n();
     const { user, oxyServices } = useOxy();
 
     /** Set when a permission was refused — drives the inline denied notice. */
@@ -143,7 +143,10 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
 
     useSurfaceHeader(useMemo(() => ({ title: t('changeAvatar.title') }), [t]));
 
-    const displayName = useMemo(() => getAccountDisplayName(user, locale), [user, locale]);
+    const displayName = useMemo(
+        () => user?.name?.displayName ?? getNormalizedUserHandle(user) ?? '',
+        [user],
+    );
     const avatarUri = useMemo(
         // `thumb` is 256x256 — exactly a 2x source for the 132dp hero.
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),