@oxy.so/services 4.0.0 → 4.0.2

package/lib/typescript/module/ui/icons/decorativeIconSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorativeIconSet.d.ts","sourceRoot":"","sources":["../../../../../src/ui/icons/decorativeIconSet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC,CAWlG"}

package/lib/typescript/module/ui/screens/ManageAccountScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageAccountScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/ManageAccountScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AAsD3D;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAy1BlD,CAAC;AAYF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ManageAccountScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/ManageAccountScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AA+C3D;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA01BlD,CAAC;AAYF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/module/ui/utils/deviceSessionTitle.d.ts

@@ -0,0 +1,18 @@
+import { type DeviceLinkedSession } from '@oxy.so/core';
+type Translate = (key: string, vars?: Record<string, string | number>) => string;
+/**
+ * The title of one row in "Sessions & devices".
+ *
+ * `GET /session/device/sessions/:sessionId` lists the sessions that share THIS
+ * physical device — one per account signed in here — and sends no
+ * `deviceName` at all, although the model declared one. The row interpolated
+ * it unconditionally and Android QA read "undefined (This device)"
+ * (OxyHQ/oxy#1375 item 11).
+ *
+ * A name the server does send is used; otherwise the current session is "This
+ * device" and any other is named by the account it belongs to, which the
+ * response does carry. Never the string "undefined".
+ */
+export declare function deviceSessionTitle(session: Pick<DeviceLinkedSession, 'deviceName' | 'isCurrent' | 'user'>, t: Translate): string;
+export {};
+//# sourceMappingURL=deviceSessionTitle.d.ts.map

package/lib/typescript/module/ui/utils/deviceSessionTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deviceSessionTitle.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/deviceSessionTitle.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEjF,KAAK,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;AAEjF;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,WAAW,GAAG,MAAM,CAAC,EACvE,CAAC,EAAE,SAAS,GACX,MAAM,CAQR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -155,7 +155,7 @@
   },
   "dependencies": {
     "@expo/config-plugins": "57.0.9",
-    "@oxy.so/contracts": "1.3.0",
+    "@oxy.so/contracts": "1.4.0",
     "@simplewebauthn/browser": "^13.3.0",
     "color": "^4.2.3"
   },
@@ -164,7 +164,7 @@
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/core": "1.7.2",
+    "@oxy.so/core": "1.9.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^12.0.1",
     "@react-native/babel-preset": "^0.86.2",
@@ -179,7 +179,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.43",
     "@types/react": "*",
-    "@oxy.so/bloom": "^3.2.1",
+    "@oxy.so/bloom": "^4.21.1",
     "copyfiles": "^2.4.1",
     "expo-constants": "~57.0.5",
     "expo-file-system": "~57.0.1",
@@ -215,8 +215,8 @@
   "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer.",
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/bloom": "^4.2.0",
-    "@oxy.so/core": "^1.7.3",
+    "@oxy.so/bloom": "^4.21.1",
+    "@oxy.so/core": "^1.9.0",
     "@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/ui/components/OxyAccountDialogScreen.tsx

@@ -74,22 +74,16 @@ const OxyAccountDialogScreen: React.FC<BaseScreenProps> = ({ canGoBack }) => {
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
   const { view } = snapshot;
-  // "Add another account" only makes sense as a back destination when there IS
-  // another — i.e. somebody is already signed in on this device.
+  // Names the entry view "Add another account" rather than "Sign in" when
+  // somebody is already signed in on this device.
   const hasSignedInAccounts = (snapshot.directory?.principals.length ?? 0) > 0;
-  const showBack = view === 'qr' || view === 'signup' || (view === 'add' && hasSignedInAccounts);
-  const goToAccounts = useCallback(() => {
-    if (!controller) return;
-    const { view: currentView, signIn } = controller.getSnapshot();
-    // Backing out of an active request must withdraw it — otherwise the
-    // authorizeCode stays approvable until expiry (issue #691 phase 5).
-    if (
-      (currentView === 'qr' || currentView === 'add') &&
-      (signIn.phase === 'starting' || signIn.phase === 'waiting')
-    ) {
-      controller.cancelSignIn();
-    }
-    controller.setView('accounts');
+  // Where back leads is the CONTROLLER's answer (`snapshot.backView`), never a
+  // table here: a host-side "back = accounts" assumed a signed-in origin and
+  // opened the account menu for nobody on a signed-out Back from sign-up.
+  const showBack = snapshot.backView !== null;
+  const goBack = useCallback(() => {
+    // Withdraws an active request itself before leaving it.
+    controller?.back();
   }, [controller]);
   // An ENTRY view (accounts / signin — no in-dialog back of its own) that is
   // MORPHED into a host surface (ManageAccount → switcher) has a frame beneath it,
@@ -109,7 +103,7 @@ const OxyAccountDialogScreen: React.FC<BaseScreenProps> = ({ canGoBack }) => {
     titleContent: copy ? undefined : NAV_LOGO,
     title: copy?.title,
     subtitle: copy?.subtitle ?? undefined,
-    onBack: showBack ? goToAccounts : backsToHost ? closeAccountDialog : undefined,
+    onBack: showBack ? goBack : backsToHost ? closeAccountDialog : undefined,
   });
 
   if (!controller) {

package/src/ui/components/OxyAuthChooser.tsx

@@ -370,7 +370,13 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
   // Real storage usage for the account menu's "Oxy storage" block. Disabled
   // (no fetch) until a private-API session exists, so it is inert on the
   // sign-in/request/sign-up views; when present the block shows live used/total.
-  const storageQuery = useAccountStorageUsage({ enabled: view === 'accounts' });
+  // The account MENU describes the signed-in account — its hero, its storage,
+  // its sign-out. The controller already refuses `accounts` without a session;
+  // this is the render-side half of the same rule, so no controller state (or
+  // an older core) can ever put "Sign out" in front of someone who is not
+  // signed in. Without an account the sign-in entry renders in its place.
+  const showsAccountMenu = view === 'accounts' && user !== null && user !== undefined;
+  const storageQuery = useAccountStorageUsage({ enabled: showsAccountMenu });
   const storage = useMemo<AccountStorageModel | null>(
     () =>
       storageQuery.data
@@ -419,7 +425,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
     return null;
   }
 
-  if (view === 'accounts') {
+  if (showsAccountMenu) {
     return (
       <AccountsMenuView
         snapshot={snapshot}

package/src/ui/components/OxyConsentScreen.tsx

@@ -86,6 +86,15 @@ export interface OxyConsentScreenProps {
   onDeny: () => void;
   /** True while a decision is in flight; disables both actions and spins Allow. */
   busy?: boolean;
+  /**
+   * Disables Allow WITHOUT a spinner, leaving Deny live. For a host that owns an
+   * extra gate the person must clear first — e.g. the device approval page's
+   * mandatory "I started this sign-in myself" acknowledgement, which is the
+   * login-CSRF control for a request that arrived as a bare code and cannot be
+   * skipped. `busy` would be wrong there: nothing is in flight, and a spinning
+   * button reads as "working" rather than "not yet".
+   */
+  allowDisabled?: boolean;
   /** A blocking error message for the request, when present. */
   error?: string | null;
 }
@@ -213,6 +222,7 @@ export function OxyConsentScreen({
   onAllow,
   onDeny,
   busy = false,
+  allowDisabled = false,
   error = null,
 }: OxyConsentScreenProps) {
   const theme = useTheme();
@@ -431,7 +441,7 @@ export function OxyConsentScreen({
           testID="consent-allow"
           appearance="solid" tone="accent"
           onPress={handleAllow}
-          disabled={busy}
+          disabled={busy || allowDisabled}
           loading={busy}
           style={styles.actionButton}
         >

package/src/ui/components/OxySignInRequestSurface.tsx

@@ -150,7 +150,7 @@ export const OxySignInRequestSurface: React.FC<OxySignInRequestSurfaceProps> = (
     return (
       <View style={styles.centeredBlock}>
         {onRetry ? (
-          <Button appearance="solid" tone="accent" onPress={onRetry} style={styles.primaryButton}>
+          <Button appearance="solid" tone="accent" size="lg" onPress={onRetry} style={styles.primaryButton}>
             {t('common.actions.tryAgain')}
           </Button>
         ) : null}

package/src/ui/components/ProfileButton.tsx

@@ -5,7 +5,8 @@ import {
     type ViewStyle,
 } from 'react-native';
 import { View } from 'react-native-css/components';
-import * as Icons from '@oxy.so/bloom/icons';
+import { RiLoginBoxLine } from '@oxy.so/bloom/icons/RiLoginBoxLine';
+import { RiMoreLine } from '@oxy.so/bloom/icons/RiMoreLine';
 import { Button } from '@oxy.so/bloom/button';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import * as Skeleton from '@oxy.so/bloom/skeleton';
@@ -128,13 +129,13 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
             trailing={
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, ...(expanded ? { flex: 1 } : {}) }}>
                     {signedIn ? <Avatar source={avatarUrl} variant="thumb" name={displayName} size={resolvedAvatarSize} />
-                        : <Icons.RiLoginBoxLine width={resolvedAvatarSize / 2} height={resolvedAvatarSize / 2} color={colors.icon} />}
+                        : <RiLoginBoxLine width={resolvedAvatarSize / 2} height={resolvedAvatarSize / 2} color={colors.icon} />}
                     {expanded ? <>
                         <View style={{ flex: 1, minWidth: 0 }}>
                             <Text variant="body-semibold" numberOfLines={1}>{displayName}</Text>
                             {handle ? <Text variant="caption-1-regular" numberOfLines={1} style={{ color: colors.textSecondary }}>@{handle}</Text> : null}
                         </View>
-                        {signedIn ? <Icons.RiMoreLine width={18} height={18} color={colors.textSecondary} /> : null}
+                        {signedIn ? <RiMoreLine width={18} height={18} color={colors.textSecondary} /> : null}
                     </> : null}
                 </View>
             }

package/src/ui/components/__tests__/OxyConsentScreen.test.tsx

@@ -28,6 +28,7 @@ function renderScreen(props: Partial<OxyConsentScreenProps> = {}) {
       onAllow={props.onAllow ?? onAllow}
       onDeny={props.onDeny ?? onDeny}
       busy={props.busy}
+      allowDisabled={props.allowDisabled}
       error={props.error}
     />,
   );
@@ -132,6 +133,21 @@ describe('OxyConsentScreen', () => {
     expect(onDeny).not.toHaveBeenCalled();
   });
 
+  it('allowDisabled blocks only Allow and leaves Deny usable', () => {
+    const { getByTestId, onAllow, onDeny } = renderScreen({ allowDisabled: true });
+
+    const allow = getByTestId('consent-allow') as HTMLButtonElement;
+    const deny = getByTestId('consent-deny') as HTMLButtonElement;
+    expect(allow.disabled).toBe(true);
+    expect(deny.disabled).toBe(false);
+
+    fireEvent.click(allow);
+    expect(onAllow).not.toHaveBeenCalled();
+    // Declining must stay possible while the host's own gate is uncleared.
+    fireEvent.click(deny);
+    expect(onDeny).toHaveBeenCalledTimes(1);
+  });
+
   it('renders the authorizing account using the display name when present', () => {
     const { getByTestId } = renderScreen({
       user: { displayName: '  Alice A  ', handle: 'alice', avatarUri: 'file-1' },

package/src/ui/components/authChooser/SignInEntryView.tsx

@@ -108,6 +108,9 @@ const SignInEntryView: React.FC<SignInEntryViewProps> = ({
 
       <Button
         appearance="solid" tone="accent"
+        // `lg` (44dp): the surface's ONE primary action is a full-width CTA, and
+        // the default `md` (36dp) is under the touch-target minimum on Android.
+        size="lg"
         onPress={web ? alternatives.onSignInWithPasskey : onContinueWithOxy}
         style={styles.primaryButton}
         testID="continue-with-oxy"

package/src/ui/components/authChooser/SignUpView.tsx

@@ -49,7 +49,7 @@ const SignUpView: React.FC<SignUpViewProps> = ({
     return (
       <View style={styles.centeredBlock}>
         <Button
-          appearance="solid" tone="accent"
+          appearance="solid" tone="accent" size="lg"
           onPress={commonsInstalled ? onCreateIdentityInCommons : onGetCommons}
           style={styles.primaryButton}
         >
@@ -65,7 +65,7 @@ const SignUpView: React.FC<SignUpViewProps> = ({
       <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
         {t('accountSwitcher.passkeyHint')}
       </Text>
-      <Button appearance="solid" tone="accent" onPress={onOpenHub} style={styles.primaryButton} testID="signup-open-identity">
+      <Button appearance="solid" tone="accent" size="lg" onPress={onOpenHub} style={styles.primaryButton} testID="signup-open-identity">
         {t('signup.createAccount')}
       </Button>
       <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onBackToSignIn} />

package/src/ui/components/authChooser/TroubleDisclosure.tsx

@@ -72,11 +72,14 @@ const TroubleDisclosure: React.FC<TroubleDisclosureProps> = ({ actions, revealed
       type="single"
       value={openItem}
       onValueChange={setOpenItem}
-      style={styles.troubleTrigger}
+      style={styles.troubleDisclosure}
       testID="trouble-disclosure"
     >
       <AccordionItem value={TROUBLE_ITEM}>
-        <AccordionTrigger textStyle={[styles.linkText, { color: theme.colors.textSecondary }]}>
+        <AccordionTrigger
+          style={styles.troubleTrigger}
+          textStyle={[styles.linkText, { color: theme.colors.textSecondary }]}
+        >
           {t('accountSwitcher.havingTrouble')}
         </AccordionTrigger>
         <AccordionContent>{links}</AccordionContent>

package/src/ui/components/authChooser/requestSurfaces.tsx

@@ -81,7 +81,7 @@ export const GetCommonsPrompt: React.FC<{
       {t('accountSwitcher.commonsNotInstalled')}
     </Text>
     <Button
-      appearance="solid" tone="accent"
+      appearance="solid" tone="accent" size="lg"
       onPress={onGetCommons}
       style={styles.primaryButton}
       testID="get-commons-button"

package/src/ui/components/authChooser/styles.ts

@@ -205,9 +205,19 @@ export const authChooserStyles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
   },
-  /** The disclosure trigger, aligned with the subordinate links it reveals. */
+  /**
+   * The disclosure spans the content width, so the alternatives it reveals are
+   * centred across the sheet rather than inside the trigger's own width. It
+   * used to be `alignSelf: 'center'` — shrink-wrapped — and on Android that
+   * both wrapped the trigger to "Having / trouble?" and squeezed the revealed
+   * links into the same narrow column (OxyHQ/oxy#1375).
+   */
+  troubleDisclosure: {
+    width: '100%',
+    marginTop: 12,
+  },
+  /** The trigger itself stays a compact, centred affordance like the links. */
   troubleTrigger: {
     alignSelf: 'center',
-    marginTop: 12,
   },
 });

package/src/ui/hooks/accountDialogSnapshot.ts

@@ -14,6 +14,7 @@ import type { AccountDialogSnapshot } from '@oxy.so/core';
  */
 export const EMPTY_ACCOUNT_DIALOG_SNAPSHOT: AccountDialogSnapshot = {
   view: 'accounts',
+  backView: null,
   directory: null,
   activeContext: null,
   activatingContextId: null,

package/src/ui/icons/Ionicons.ts

@@ -1,11 +1,16 @@
 import createIconSet from '@expo/vector-icons/createIconSet';
+import { decorativeIconSet } from './decorativeIconSet';
 import font from '../../assets/fonts/icons/OxyServicesIonicons.ttf';
 import { ioniconsGlyphMap } from './subsetGlyphMaps';
 
-const Ionicons = createIconSet(
-  ioniconsGlyphMap,
-  'OxyServicesIonicons',
-  font,
+/** Glyphs are decorative: hidden from assistive technology (see `decorativeIconSet`). */
+const Ionicons = decorativeIconSet(
+  createIconSet(
+    ioniconsGlyphMap,
+    'OxyServicesIonicons',
+    font,
+  ),
+  'Ionicons',
 );
 
 export default Ionicons;

package/src/ui/icons/MaterialCommunityIcons.ts

@@ -1,11 +1,16 @@
 import createIconSet from '@expo/vector-icons/createIconSet';
+import { decorativeIconSet } from './decorativeIconSet';
 import font from '../../assets/fonts/icons/OxyServicesMaterialCommunityIcons.ttf';
 import { materialCommunityIconsGlyphMap } from './subsetGlyphMaps';
 
-const MaterialCommunityIcons = createIconSet(
-  materialCommunityIconsGlyphMap,
-  'OxyServicesMaterialCommunityIcons',
-  font,
+/** Glyphs are decorative: hidden from assistive technology (see `decorativeIconSet`). */
+const MaterialCommunityIcons = decorativeIconSet(
+  createIconSet(
+    materialCommunityIconsGlyphMap,
+    'OxyServicesMaterialCommunityIcons',
+    font,
+  ),
+  'MaterialCommunityIcons',
 );
 
 export default MaterialCommunityIcons;

package/src/ui/icons/__tests__/decorativeIconSet.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * Icon-font glyphs are private-use code points in a `Text` node; unhidden, a
+ * screen reader announces them (`"\u{F0140}"` beside "Switch account" in the
+ * Android account menu, OxyHQ/oxy#1375). Both SDK icon families hide every
+ * glyph, and a caller cannot switch that back on.
+ */
+
+import { render } from '@testing-library/react';
+import Ionicons from '../Ionicons';
+import MaterialCommunityIcons from '../MaterialCommunityIcons';
+import { decorativeIconSet } from '../decorativeIconSet';
+
+describe('the SDK icon families are decorative', () => {
+  it.each([
+    ['MaterialCommunityIcons', MaterialCommunityIcons, 'chevron-down'],
+    ['Ionicons', Ionicons, 'add'],
+  ] as const)('%s hides its glyph from assistive technology', (_family, Icon, name) => {
+    const { container } = render(<Icon name={name as never} size={20} />);
+
+    expect(container.querySelector(`[data-icon="${name}"]`)?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('keeps the glyph hidden even when a caller asks otherwise', () => {
+    const { container } = render(
+      <MaterialCommunityIcons name="chevron-down" aria-hidden={false} />,
+    );
+
+    expect(container.querySelector('[data-icon]')?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('carries the family statics, so it stays a drop-in for the family', () => {
+    expect(MaterialCommunityIcons.glyphMap['chevron-down']).toEqual(expect.any(Number));
+    expect(Ionicons.glyphMap.add).toEqual(expect.any(Number));
+
+    const Family = Object.assign(() => null, { glyphMap: { a: 1 }, getFontFamily: () => 'F' });
+    const Wrapped = decorativeIconSet(Family, 'Wrapped');
+    expect(Wrapped.glyphMap).toBe(Family.glyphMap);
+    expect(Wrapped.getFontFamily()).toBe('F');
+  });
+});

package/src/ui/icons/decorativeIconSet.ts

@@ -0,0 +1,41 @@
+import { createElement, type ComponentProps, type ComponentType } from 'react';
+
+/** Function built-ins and statics a function component must not inherit. */
+const NOT_COPIED = new Set(['length', 'name', 'prototype', 'caller', 'arguments', 'defaultProps', 'displayName']);
+
+/**
+ * Wrap an icon-font family so every glyph it renders is hidden from assistive
+ * technology.
+ *
+ * A vector-icons glyph is a `Text` node whose content is a private-use code
+ * point. A screen reader reads it like any other text: Android QA of the account
+ * menu found `"\u{F0140}"` announced next to "Switch account" (OxyHQ/oxy#1375),
+ * and on Android the code point is folded into the label of the pressable around
+ * it, because RN builds an unlabelled accessible view's description from its
+ * children's text.
+ *
+ * Every glyph in this SDK is decorative — the control or row around it carries
+ * the words — so it is hidden here, once, rather than at each call site where
+ * the next icon would forget it. `aria-hidden` is
+ * `importantForAccessibility="no-hide-descendants"` on Android,
+ * `accessibilityElementsHidden` on iOS and `aria-hidden` on web. It is applied
+ * AFTER the caller's props so it cannot be switched back on; a glyph that needs
+ * a name belongs inside a control that has one. (Mention's own wrapper,
+ * `components/common/Ionicons.tsx`, is the same rule.)
+ *
+ * The family's statics (`glyphMap`, `getImageSource`, `loadFont`, …) are carried
+ * over, so the wrapper is a drop-in for the family itself.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: an icon family's own props are whatever `createIconSet` typed them as; the wrapper returns the SAME type.
+export function decorativeIconSet<T extends ComponentType<any>>(IconSet: T, displayName: string): T {
+  function DecorativeIcon(props: ComponentProps<T>) {
+    return createElement(IconSet, { ...props, 'aria-hidden': true });
+  }
+  for (const key of Object.getOwnPropertyNames(IconSet)) {
+    if (NOT_COPIED.has(key)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(IconSet, key);
+    if (descriptor) Object.defineProperty(DecorativeIcon, key, descriptor);
+  }
+  DecorativeIcon.displayName = displayName;
+  return DecorativeIcon as unknown as T;
+}

package/src/ui/screens/ManageAccountScreen.tsx

@@ -20,6 +20,7 @@ import {
     getNormalizedUserHandle,
     logger as loggerUtil,
     packageInfo,
+    type DeviceLinkedSession,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
@@ -33,16 +34,9 @@ import { isWebBrowser } from '../utils/isWebBrowser';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
 import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
+import { deviceSessionTitle } from '../utils/deviceSessionTitle';
 
-interface DeviceSessionRow {
-    sessionId: string;
-    deviceId: string;
-    deviceName: string;
-    isActive: boolean;
-    lastActive: string;
-    expiresAt: string;
-    isCurrent: boolean;
-}
+type DeviceSessionRow = DeviceLinkedSession;
 
 const AVATAR_SIZE = 88;
 
@@ -172,8 +166,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         const confirmed = await surfaces.confirm({
             title: t('manageAccount.confirms.removeDeviceTitle') || 'Remove device',
             description:
-                t('manageAccount.confirms.removeDevice', { name: device.deviceName })
-                || `Sign out from "${device.deviceName}"?`,
+                t('manageAccount.confirms.removeDevice', { name: deviceSessionTitle(device, t) }),
             confirmLabel: t('common.remove') || 'Remove',
             cancelLabel: t('common.cancel') || 'Cancel',
             destructive: true,
@@ -186,8 +179,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
             await oxyServices.logoutSession(activeSessionId, device.sessionId);
             await refetchDeviceSessions();
             toast.success(
-                t('manageAccount.toasts.deviceRemoved', { name: device.deviceName })
-                || `Signed out from ${device.deviceName}`,
+                t('manageAccount.toasts.deviceRemoved', { name: deviceSessionTitle(device, t) }),
             );
         } catch (error) {
             loggerUtil.warn('Remove device failed', { component: 'ManageAccountScreen' }, error as unknown);
@@ -503,7 +495,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                                         }
                                     />
                                 }
-                                title={`${device.deviceName}${device.isCurrent ? ` (${t('manageAccount.sessions.thisDevice') || 'This device'})` : ''}`}
+                                title={deviceSessionTitle(device, t)}
                                 description={
                                     t('manageAccount.sessions.lastActive', {
                                         relative: formatRelative(device.lastActive),
@@ -711,10 +703,13 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                             description={
                                 accounts.length > 0
                                     ? (
-                                        t('accounts.manage.switch.count', {
-                                            count: accounts.length,
-                                        })
-                                        || `${accounts.length} ${accounts.length === 1 ? 'account' : 'accounts'}`
+                                        // One account is "1 account", not "1 accounts".
+                                        t(
+                                            accounts.length === 1
+                                                ? 'accounts.manage.switch.countOne'
+                                                : 'accounts.manage.switch.count',
+                                            { count: accounts.length },
+                                        )
                                     )
                                     : (
                                         t('accounts.manage.switch.empty')

package/src/ui/utils/__tests__/deviceSessionTitle.test.ts

@@ -0,0 +1,31 @@
+import type { User } from '@oxy.so/core';
+import { deviceSessionTitle } from '../deviceSessionTitle';
+
+const t = (key: string) =>
+  ({
+    'manageAccount.sessions.thisDevice': 'This device',
+    'manageAccount.sessions.otherSession': 'Another session',
+  })[key] ?? key;
+
+describe('deviceSessionTitle', () => {
+  it('never reads "undefined" when the server sends no device name (OxyHQ/oxy#1375 item 11)', () => {
+    // The live response shape: no `deviceName` key at all.
+    const title = deviceSessionTitle({ isCurrent: true } as never, t);
+    expect(title).toBe('This device');
+    expect(title).not.toContain('undefined');
+  });
+
+  it("names another session by its account, which the response does carry", () => {
+    const user = { id: 'u2', username: 'bob', name: { displayName: 'Bob' } } as unknown as User;
+    expect(deviceSessionTitle({ isCurrent: false, user } as never, t)).toBe('Bob');
+  });
+
+  it('falls back to a generic label when nothing names the session', () => {
+    expect(deviceSessionTitle({ isCurrent: false } as never, t)).toBe('Another session');
+  });
+
+  it('keeps a real device name, marking the current one', () => {
+    expect(deviceSessionTitle({ deviceName: 'Pixel 8a', isCurrent: true }, t)).toBe('Pixel 8a (This device)');
+    expect(deviceSessionTitle({ deviceName: 'Pixel 8a', isCurrent: false }, t)).toBe('Pixel 8a');
+  });
+});

package/src/ui/utils/deviceSessionTitle.ts

@@ -0,0 +1,29 @@
+import { getNormalizedUserHandle, type DeviceLinkedSession } from '@oxy.so/core';
+
+type Translate = (key: string, vars?: Record<string, string | number>) => string;
+
+/**
+ * The title of one row in "Sessions & devices".
+ *
+ * `GET /session/device/sessions/:sessionId` lists the sessions that share THIS
+ * physical device — one per account signed in here — and sends no
+ * `deviceName` at all, although the model declared one. The row interpolated
+ * it unconditionally and Android QA read "undefined (This device)"
+ * (OxyHQ/oxy#1375 item 11).
+ *
+ * A name the server does send is used; otherwise the current session is "This
+ * device" and any other is named by the account it belongs to, which the
+ * response does carry. Never the string "undefined".
+ */
+export function deviceSessionTitle(
+  session: Pick<DeviceLinkedSession, 'deviceName' | 'isCurrent' | 'user'>,
+  t: Translate,
+): string {
+  const thisDevice = t('manageAccount.sessions.thisDevice');
+  const deviceName = typeof session.deviceName === 'string' ? session.deviceName.trim() : '';
+  if (deviceName) return session.isCurrent ? `${deviceName} (${thisDevice})` : deviceName;
+  if (session.isCurrent) return thisDevice;
+  const user = session.user;
+  const name = user?.name?.displayName?.trim() || (user ? getNormalizedUserHandle(user) : null);
+  return name || t('manageAccount.sessions.otherSession');
+}