@oxy.so/services 4.0.7 → 6.0.0

package/src/ui/components/OxyAuthChooser.tsx

@@ -15,17 +15,16 @@
  * responsibility each:
  *
  *  - `accounts` → `AccountsMenuView` — the signed-in Oxy account menu.
- *  - `add` / `signin` → `SignInEntryView` — ONE primary action, "Continue with
- *    Oxy" (issue #691, Phase 5). On WEB this view is transient: the flow
- *    auto-starts the instant the view is reached, because the request surface
- *    (a QR on an unknown desktop, "Check Commons on your phone" where Oxy could
- *    deliver) IS the primary route there, never something behind a second tap.
+ *  - `add` / `signin` → `OxySignInPanel` — THE sign-in screen, the one
+ *    auth.oxy.so renders too: the device's accounts, then "Continue with
+ *    Oxy" (on the web, auth.oxy.so's window over the app).
  *  - `qr` → `SignInRequestView` — the ACTIVE REQUEST: the controller-bound
  *    wiring over the shared, presentational `OxySignInRequestSurface` (the same
  *    component the auth.oxy.so IdP mounts from its OAuth-bound request). It maps
  *    `snapshot.signIn` onto that surface's props; alternatives stay behind
  *    "Having trouble?" until the chosen route reports `routeFailed`.
- *  - `signup` → `SignUpView` — account creation, Commons-first.
+ *  - `signup` → `OxySignUpPanel` — account creation: auth.oxy.so's window on
+ *    the web, Commons on native.
  *
  * Per-account color re-theming uses Bloom's `APP_COLOR_PRESETS` + `BloomColorScope`
  * (same visual language auth.oxy.so uses). Base theming is `useTheme()` + a
@@ -39,7 +38,7 @@ import { Linking, Platform } from 'react-native';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { IDENTITY_WEB_ORIGIN, getNormalizedUserHandle, type User } from '@oxy.so/core';
+import { AUTH_WEB_ORIGIN, getNormalizedUserHandle, type OxyAuthScreen, type User } from '@oxy.so/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../context/OxyContext';
 import { useDeviceSwitcher } from '../hooks/useDeviceSwitcher';
@@ -52,9 +51,7 @@ import { isWebBrowser } from '../utils/isWebBrowser';
 import { getCommonsAcquisitionUrl } from '../utils/commonsStoreLinks';
 import { useAccountStorageUsage } from '../hooks/queries/useServicesQueries';
 import AccountsMenuView from './authChooser/AccountsMenuView';
-import SignInEntryView from './authChooser/SignInEntryView';
 import SignInRequestView from './authChooser/SignInRequestView';
-import SignUpView from './authChooser/SignUpView';
 import { signInFailureMessage } from './authChooser/signInFailureMessage';
 import {
   resolveAccentHex,
@@ -66,9 +63,9 @@ import {
   type SignInAlternatives,
 } from './authChooser/types';
 import { EMPTY_ACCOUNT_DIALOG_SNAPSHOT } from '../hooks/accountDialogSnapshot';
+import { OxySignInPanel } from './signIn/OxySignInPanel';
+import { OxySignUpPanel } from './signIn/OxySignUpPanel';
 
-/** Commons' own identity-creation deep link (mirrors the `approve`/`attest`/`card` intents). */
-const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
 /**
  * "Accounts by Oxy" management app — the canonical home for account settings,
  * data export, and storage management. The account-menu rows deep-link into it
@@ -90,12 +87,6 @@ const toastedFailureAttempt = new WeakMap<object, number>();
 export interface OxyAuthChooserProps {
   /** Called after a completed switch, sign-in, or sign-up. */
   onComplete?: () => void;
-  /**
-   * @deprecated No effect. The web sign-in entry no longer auto-starts a
-   * device-flow request: its primary action opens the identity origin
-   * (`id.oxy.so`) in a popup, which a browser only allows from a user gesture.
-   */
-  autoStartSignIn?: boolean;
 }
 
 /**
@@ -111,6 +102,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
     logout,
     openAvatarPicker,
     user,
+    continueOnAuth,
   } = useOxy();
   const theme = useTheme();
   const { t } = useI18n();
@@ -120,13 +112,23 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
   // so the two switchers cannot drift.
   const { principals } = useDeviceSwitcher();
 
-  // Web sign-in and sign-up run at the identity origin (`id.oxy.so`), never
-  // on this page, whatever this page's origin: that is where the passkey
-  // ceremony can run for any app AND where the account's identity is created
-  // and kept sealed under the passkey (one identity, two carriers). Native has
-  // no passkey path: Commons owns identity there ('none').
+  // On the web every sign-in and sign-up runs in auth.oxy.so's window over the
+  // app (`continueOnAuth`): the passkey belongs to that origin, and the
+  // browser's session lives there, shared by every Oxy app. Native has no
+  // passkey path: Commons owns identity there ('none').
   const passkeyMode = useMemo<PasskeyMode>(() => (isWebBrowser() ? 'hub' : 'none'), []);
 
+  /** auth.oxy.so's window; this surface closes once it signs the app in. */
+  const openOnOxy = useCallback(
+    (screen: OxyAuthScreen) => {
+      void continueOnAuth(screen).then((result) => {
+        if (result.status === 'signed-in') onComplete?.();
+        else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
+      });
+    },
+    [continueOnAuth, onComplete, t],
+  );
+
   // Bind the headless controller. `getSnapshot` returns a stable reference
   // between changes, so it is `useSyncExternalStore`-safe. Guard the no-provider
   // loading state (`controller` is `null`) with an inert store.
@@ -140,7 +142,8 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
       if (!controller) return () => undefined;
       const maybeToastSignInError = () => {
         const { signIn } = controller.getSnapshot();
-        if (signIn.phase !== 'error') return;
+        // The embedded QR's failures are its own to handle (it renews itself).
+        if (signIn.phase !== 'error' || signIn.inline) return;
         if (toastedFailureAttempt.get(controller) === signIn.attempt) return;
         toastedFailureAttempt.set(controller, signIn.attempt);
         const message = signInFailureMessage(signIn.failure, t);
@@ -363,18 +366,14 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
   const alternatives = useMemo<SignInAlternatives>(
     () => ({
       passkeyAvailable: passkeyMode !== 'none',
-      // Called straight from the press: the popup opens before any await.
-      onSignInWithPasskey: () => void controller?.startPasskeyHubSignIn(),
+      // auth.oxy.so asserts the passkey, in its window.
+      onSignInWithPasskey: () => openOnOxy('signin'),
       onShowQr: () => void controller?.showQr(),
       onGetCommons: () => openExternal(getCommonsAcquisitionUrl(Platform.OS)),
-      // Web: the identity origin creates the account and its identity in the
-      // same window a sign-in uses. Native: Commons creates the identity.
-      onCreateAccount: () => {
-        if (passkeyMode === 'hub') void controller?.startPasskeyHubSignIn();
-        else controller?.startSignup();
-      },
+      // Web: the account is made on auth.oxy.so. Native: Commons makes it.
+      onCreateAccount: () => (passkeyMode === 'hub' ? openOnOxy('signup') : controller?.startSignup()),
     }),
-    [passkeyMode, controller, openExternal],
+    [passkeyMode, controller, openExternal, openOnOxy],
   );
 
   // Real storage usage for the account menu's "Oxy storage" block. Disabled
@@ -420,7 +419,7 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
       onSignOut: () => {
         void handleSignOut();
       },
-      onOpenIdentity: passkeyMode === 'hub' ? () => openUrl(`${IDENTITY_WEB_ORIGIN}/`) : undefined,
+      onOpenIdentity: passkeyMode === 'hub' ? () => openUrl(`${AUTH_WEB_ORIGIN}/identity`) : undefined,
       customItems: (consumerHooks?.menuItems ?? []).map((item) => ({
         ...item,
         onPress: () => {
@@ -462,29 +461,14 @@ const OxyAuthChooser: React.FC<OxyAuthChooserProps> = ({ onComplete }) => {
   }
 
   if (view === 'signup') {
-    return (
-      <SignUpView
-        snapshot={snapshot}
-        theme={theme}
-        t={t}
-        passkeyMode={passkeyMode}
-        onOpenHub={() => void controller.startPasskeyHubSignIn()}
-        onCreateIdentityInCommons={() => openExternal(COMMONS_CREATE_IDENTITY_URL)}
-        onGetCommons={alternatives.onGetCommons}
-        onBackToSignIn={() => controller.setView('signin')}
-      />
-    );
+    return <OxySignUpPanel onSignIn={() => controller.setView('signin')} onCreateOnWeb={() => openOnOxy('signup')} />;
   }
 
   return (
-    <SignInEntryView
-      snapshot={snapshot}
-      principals={principals}
-      theme={theme}
-      t={t}
-      handlers={handlers}
-      onContinueWithOxy={() => void controller.signInWithOxy()}
-      alternatives={alternatives}
+    <OxySignInPanel
+      host="dialog"
+      onSignedIn={() => onComplete?.()}
+      onCreateAccount={alternatives.onCreateAccount}
     />
   );
 };

package/src/ui/components/OxyProvider.tsx

@@ -90,7 +90,6 @@ const OxyProvider: FC<OxyProviderProps> = ({
     queryClient: providedQueryClient,
     requireAuth = 'off',
     backgroundSession = false,
-    deviceCredentialStorage = 'persistent',
     language,
 }) => {
 
@@ -240,7 +239,6 @@ const OxyProvider: FC<OxyProviderProps> = ({
                 sessionMode={sessionMode}
                 webAuthMode={webAuthMode}
                 backgroundSession={backgroundSession}
-                deviceCredentialStorage={deviceCredentialStorage}
                 platformStorage={platformStorage}
                 onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
             >

package/src/ui/components/ProfileButton.tsx

@@ -1,9 +1,6 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
-import {
-    type StyleProp,
-    type ViewStyle,
-} from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native-css/components';
 import { RiLoginBoxLine } from '@oxy.so/bloom/icons/RiLoginBoxLine';
 import { RiMoreLine } from '@oxy.so/bloom/icons/RiMoreLine';

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

@@ -51,7 +51,6 @@ import {
   type SwitcherPrincipalRow,
 } from '@oxy.so/core';
 import AvatarCameraBadge from '../AvatarCameraBadge';
-import { HoverPressable } from './primitives';
 import { authChooserStyles as styles } from './styles';
 import {
   resolveAccentHex,
@@ -63,6 +62,34 @@ import {
   type Translate,
 } from './types';
 
+type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
+  baseClassName: string;
+  hoverClassName: string;
+};
+
+/**
+ * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
+ * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
+ * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
+ * via react-native-web; a no-op on native) toggling a plain background token —
+ * the tint stays a NativeWind class, only the trigger is JS.
+ */
+const HoverPressable: React.FC<HoverPressableProps> = ({
+  baseClassName,
+  hoverClassName,
+  ...rest
+}) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Pressable
+      {...rest}
+      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    />
+  );
+};
+
 /**
  * Leading glyph for the rows that live in a Bloom grouped section (the MENU
  * block) and for the storage card's cloud, which lines its title up with them.

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

@@ -5,8 +5,7 @@
  */
 
 import type React from 'react';
-import { useState } from 'react';
-import { Pressable, View } from 'react-native-css/components';
+import { Pressable, View } from 'react-native';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import { BloomColorScope } from '@oxy.so/bloom/theme';
@@ -18,34 +17,6 @@ import { resolveAccentHex, toPreset, type Theme } from './types';
 /** Diameter of a row avatar (the sign-in view's account rows). */
 const ROW_AVATAR_SIZE = 40;
 
-type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
-  baseClassName: string;
-  hoverClassName: string;
-};
-
-/**
- * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
- * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
- * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
- * via react-native-web; a no-op on native) toggling a plain background token —
- * the tint stays a NativeWind class, only the trigger is JS.
- */
-export const HoverPressable: React.FC<HoverPressableProps> = ({
-  baseClassName,
-  hoverClassName,
-  ...rest
-}) => {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable
-      {...rest}
-      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-    />
-  );
-};
-
 /**
  * A SUBORDINATE action: a small centred text link, never a button.
  *
@@ -73,15 +44,6 @@ export const SubtleLink: React.FC<{
   </Pressable>
 );
 
-/** A labelled hairline separating two blocks ("or"). */
-export const Dividerish: React.FC<{ theme: Theme; label: string }> = ({ theme, label }) => (
-  <View style={styles.dividerRow}>
-    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
-    <Text style={[styles.dividerText, { color: theme.colors.textSecondary }]}>{label}</Text>
-    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
-  </View>
-);
-
 /**
  * A `principal acting as account` row on the sign-in entry — "continue as one of
  * these" rather than a choice of authentication METHOD, which is why it stays

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

@@ -9,18 +9,12 @@
 import type { SignInFailureReason } from '@oxy.so/core';
 import type { Translate } from './types';
 
-/**
- * The toast for `failure`, or `null` when there is nothing to report: a
- * `'cancelled'` attempt is the user's own choice (they closed the window), and
- * the surface already offers "Try again" without scolding them for it.
- */
+/** The toast for `failure`, or `null` when there is nothing to report. */
 export function signInFailureMessage(
   failure: SignInFailureReason | null,
   t: Translate,
 ): string | null {
   switch (failure) {
-    case 'cancelled':
-      return null;
     case 'denied':
       return t('accountSwitcher.signInFailures.denied');
     case 'expired':

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

@@ -140,42 +140,11 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '600',
   },
-  signInBlock: {
-    width: '100%',
-  },
   primaryButton: {
     width: '100%',
     borderRadius: 14,
     marginTop: 8,
   },
-  secondaryButton: {
-    width: '100%',
-    borderRadius: 14,
-    marginTop: 10,
-  },
-  usernameInput: {
-    width: '100%',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 14,
-    paddingVertical: 12,
-    paddingHorizontal: 14,
-    fontSize: 16,
-    marginTop: 8,
-  },
-  dividerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    marginVertical: 14,
-  },
-  dividerLine: {
-    flex: 1,
-    height: StyleSheet.hairlineWidth,
-  },
-  dividerText: {
-    marginHorizontal: 12,
-    fontSize: 13,
-  },
   centeredBlock: {
     alignItems: 'center',
     justifyContent: 'center',

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

@@ -96,7 +96,7 @@ export interface AccountsMenuActions {
   onTerms: () => void;
   onSignOut: () => void;
   /**
-   * Open the person's identity at the identity origin (recovery phrase,
+   * Open the person's identity at auth.oxy.so/identity (recovery phrase,
    * recovery, account deletion). Web only — `undefined` hides the row.
    */
   onOpenIdentity?: () => void;
@@ -111,8 +111,8 @@ export interface AccountsMenuActions {
 /**
  * Where a passkey sign-in or sign-up can run from the current surface.
  *
- * `'hub'`  = web: it runs at the identity origin (`id.oxy.so`) in a popup, on
- *            every web origin, first-party or not.
+ * `'hub'`  = web: it runs in auth.oxy.so's window over the app
+ *            (`continueOnAuth`), on every web origin.
  * `'none'` = native, where Commons owns identity.
  */
 export type PasskeyMode = 'hub' | 'none';

package/src/ui/components/oauthNavigation.ts

@@ -52,7 +52,7 @@ export interface OpenAuthorizeOptions {
  * (see `normalizeOAuthRedirectUri`), so the IdP always returns the tab to `/`,
  * and the return handlers restore this path. Doing it here rather than at each
  * call site is deliberate: every web authorize redirect — silent restore,
- * interactive sign-in, the passkey hub — funnels through this function, so a
+ * interactive sign-in, `continueOnAuth` — funnels through this function, so a
  * new flow cannot forget to preserve the page the visitor came from.
  */
 export function redirectToAuthorize(url: string): void {

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -0,0 +1,135 @@
+/**
+ * The sign-in entry's embedded QR, over the split card's photo carousel: scan
+ * it with Commons on a phone and this screen is signed in.
+ *
+ * It owns one QR-only request (`controller.startInlineQr()`): started the
+ * first time the block is actually laid out on screen — never while its column
+ * is hidden below `md` — renewed when it expires, and withdrawn when the block
+ * goes away while it is still approvable. It never pushes to a phone or opens Commons —
+ * the person did not ask for either by opening the screen. Any other sign-in
+ * they choose supersedes it like any new attempt.
+ *
+ * Anti-phishing: the plate encodes `signIn.qrPayload` and renders nothing
+ * derived from it; the approver resolves the app server-side.
+ */
+
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import type { AccountDialogController } from '@oxy.so/core';
+import { useI18n } from '../../hooks/useI18n';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 112;
+const PLATE_PADDING = 8;
+const PLATE_SIZE = QR_SIZE + PLATE_PADDING * 2;
+
+export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | null }> = ({ controller }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { signIn } = useAccountDialogSnapshot(controller);
+  const live = signIn.inline && (signIn.phase === 'starting' || signIn.phase === 'waiting');
+  const expired = signIn.inline && signIn.phase === 'error' && signIn.failure === 'expired';
+
+  // Laid out with a size only where its column shows (`display: none` below
+  // `md` lays out empty), so that is when a request is worth having.
+  const [shown, setShown] = useState(false);
+
+  // One request for as long as the block is on screen. Withdrawn on the way
+  // out only while it is still ours and still approvable: an attempt the
+  // person started meanwhile (a passkey window, "Continue with Oxy") is theirs.
+  useEffect(() => {
+    if (!controller || !shown) return;
+    const { signIn: current } = controller.getSnapshot();
+    if (!(current.inline && (current.phase === 'starting' || current.phase === 'waiting'))) {
+      void controller.startInlineQr();
+    }
+    return () => {
+      const { signIn: last } = controller.getSnapshot();
+      if (last.inline && (last.phase === 'starting' || last.phase === 'waiting')) controller.cancelSignIn();
+    };
+  }, [controller, shown]);
+
+  // A code only lives a few minutes; an expired one is replaced, not reported.
+  useEffect(() => {
+    if (controller && expired) void controller.startInlineQr();
+  }, [controller, expired]);
+
+  let plate: React.ReactNode;
+  if (signIn.inline && signIn.progress === 'identity-confirmed') {
+    plate = <RiCheckboxCircleLine size="3xl" fill={theme.colors.success} />;
+  } else if (live && signIn.qrPayload && signIn.progress !== 'confirming-identity') {
+    plate = <QRCode value={signIn.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />;
+  } else if (live || expired || (signIn.inline && signIn.phase === 'completed')) {
+    plate = <ActivityIndicator size="large" color={QR_FOREGROUND} />;
+  } else {
+    // Failed for a reason renewing will not fix by itself, or superseded and
+    // then withdrawn: one press for a new code.
+    plate = (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        size="sm"
+        iconOnly
+        leadingIcon={RiRefreshLine}
+        accessibilityLabel={t('signin.qr.renew')}
+        onPress={() => void controller?.startInlineQr()}
+        testID="inline-qr-renew"
+      />
+    );
+  }
+
+  return (
+    <View
+      style={styles.block}
+      testID="inline-commons-qr"
+      onLayout={(event) => {
+        if (event.nativeEvent.layout.width > 0) setShown(true);
+      }}
+    >
+      <View style={[styles.plate, { borderColor: theme.colors.border }]}>{plate}</View>
+      <Text style={[styles.caption, styles.captionOnMedia]}>
+        {t('signin.qr.caption')}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    width: PLATE_SIZE,
+    alignItems: 'center',
+    gap: 6,
+  },
+  plate: {
+    width: PLATE_SIZE,
+    height: PLATE_SIZE,
+    padding: PLATE_PADDING,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    textAlign: 'center',
+  },
+  captionOnMedia: {
+    color: '#FFFFFF',
+    fontWeight: '500',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 4,
+  },
+});

package/src/ui/components/signIn/OxyAccountPicker.tsx

@@ -0,0 +1,129 @@
+/**
+ * "Choose an account" — every `principal acting as account` pair on this
+ * device, then "Use another account".
+ *
+ * The front screen of sign-in on a returning device, in the account dialog and
+ * on every auth.oxy.so page that asks WHO (sign-in, OAuth authorize, device
+ * approval, MCP linking). Presentational: the host decides what choosing a row
+ * means — a switch, a "Continue as" sign-in, or activating the pair before an
+ * OAuth consent — and passes the pair back, never an account id, which cannot
+ * say whose route was chosen.
+ */
+
+import type React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
+import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core';
+import { useI18n } from '../../hooks/useI18n';
+import { AccountRow } from '../authChooser/primitives';
+import { authChooserStyles } from '../authChooser/styles';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+
+export interface OxyAccountPickerProps {
+  /** The device's people, each with the accounts they may act as (`useDeviceSwitcher`). */
+  principals: SwitcherPrincipalRow[];
+  /** The app being continued to, when there is one. */
+  appName?: string | null;
+  onSelectContext: (context: SwitcherContextRow) => void;
+  /** "Use another account" — the host reveals its sign-in. */
+  onUseAnother: () => void;
+  /** The pair being activated, whose row shows it is busy. */
+  pendingContextId?: string | null;
+  /** Disables every row while a choice is in flight. */
+  isLoading?: boolean;
+  /**
+   * This origin holds no session. A row then reads "Continue as @handle" and
+   * never as the current account: the device can list an identity as active
+   * while nobody is signed in HERE.
+   */
+  signedOut?: boolean;
+}
+
+export const OxyAccountPicker: React.FC<OxyAccountPickerProps> = ({
+  principals,
+  appName,
+  onSelectContext,
+  onUseAnother,
+  pendingContextId = null,
+  isLoading = false,
+  signedOut = false,
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  // Whose route a row is only needs naming once someone holds more than one
+  // account here — the same rule the account menu's group headers follow.
+  const namesTheOperator = showsPrincipalHeaders(principals);
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader
+        title={t('signin.chooser.title')}
+        description={appName ? t('signin.chooser.subtitleToApp', { app: appName }) : t('signin.chooser.subtitle')}
+      />
+      <View style={authChooserStyles.rows}>
+        {principals.flatMap((principal) =>
+          principal.contexts.map((context) => (
+            <AccountRow
+              key={context.contextId}
+              context={context}
+              operatedBy={
+                namesTheOperator && context.isDelegated
+                  ? t('accountSwitcher.context.operatedBy', { name: principal.displayName })
+                  : null
+              }
+              continueAsLabel={
+                signedOut
+                  ? t('signin.chooser.continueAs', {
+                      name: context.handle ? `@${context.handle}` : context.displayName,
+                    })
+                  : null
+              }
+              theme={theme}
+              activating={pendingContextId === context.contextId}
+              disabled={isLoading}
+              onPress={() => onSelectContext(context)}
+            />
+          )),
+        )}
+        <Pressable
+          onPress={onUseAnother}
+          disabled={isLoading}
+          accessibilityRole="button"
+          accessibilityLabel={t('signin.chooser.useAnother')}
+          style={[
+            authChooserStyles.accountRow,
+            { borderColor: theme.colors.border, backgroundColor: theme.colors.card },
+            isLoading ? authChooserStyles.rowDisabled : null,
+          ]}
+          testID="use-another-account"
+        >
+          <View style={[styles.addGlyph, { backgroundColor: theme.colors.backgroundSecondary }]}>
+            <RiUserAddLine size="md" fill={theme.colors.textSecondary} />
+          </View>
+          <Text style={[authChooserStyles.rowName, styles.addLabel, { color: theme.colors.text }]}>
+            {t('signin.chooser.useAnother')}
+          </Text>
+          <RiArrowRightSLine size="md" fill={theme.colors.textSecondary} />
+        </Pressable>
+      </View>
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Matches `AccountRow`'s 40px avatar plus its 2px ring and 1px gap.
+  addGlyph: {
+    width: 46,
+    height: 46,
+    borderRadius: 23,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  addLabel: {
+    flex: 1,
+  },
+});