@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.4

package/src/ui/components/SettingsIcon.tsx

@@ -5,14 +5,14 @@ import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
 import { darkenColor } from '../utils/colorUtils';
 
 interface SettingsIconProps {
-    /** MaterialCommunityIcons icon name */
-    name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
-    /** Background color for the circle */
-    color: string;
-    /** Icon size (default 14, fits bloom's 20x20 container) */
-    iconSize?: number;
-    /** Container size (default 20, matches bloom SettingsListItem icon slot) */
-    size?: number;
+  /** MaterialCommunityIcons icon name */
+  name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
+  /** Background color for the circle */
+  color: string;
+  /** Icon size (default 14, fits bloom's 20x20 container) */
+  iconSize?: number;
+  /** Container size (default 20, matches bloom SettingsListItem icon slot) */
+  size?: number;
 }
 
 /**
@@ -21,14 +21,19 @@ interface SettingsIconProps {
  * sized to fit bloom's 20x20 icon container.
  */
 const SettingsIconComponent: React.FC<SettingsIconProps> = ({
-    name,
-    color,
-    iconSize = 14,
-    size = 20,
+  name,
+  color,
+  iconSize = 14,
+  size = 20,
 }) => (
-    <View style={[styles.circle, { width: size, height: size, borderRadius: size / 2, backgroundColor: color }]}>
-        <MaterialCommunityIcons name={name} size={iconSize} color={darkenColor(color)} />
-    </View>
+  <View
+    style={[
+      styles.circle,
+      { width: size, height: size, borderRadius: size / 2, backgroundColor: color },
+    ]}
+  >
+    <MaterialCommunityIcons name={name} size={iconSize} color={darkenColor(color)} />
+  </View>
 );
 
 SettingsIconComponent.displayName = 'SettingsIcon';
@@ -37,8 +42,8 @@ export const SettingsIcon = memo(SettingsIconComponent);
 export default SettingsIcon;
 
 const styles = StyleSheet.create({
-    circle: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
+  circle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -11,7 +11,12 @@ export interface SurfaceHeaderActionProps {
 }
 
 /** Header actions share Bloom's sizing, surface, disabled and loading behavior. */
-export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({ label, onPress, loading, disabled }) => (
+export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({
+  label,
+  onPress,
+  loading,
+  disabled,
+}) => (
   <Button size="md" onPress={onPress} loading={loading} disabled={disabled}>
     {label}
   </Button>

package/src/ui/components/SurfaceScreen.tsx

@@ -4,11 +4,7 @@ import { Loading } from '@oxy.so/bloom/loading';
 import { Text } from '@oxy.so/bloom/typography';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxy.so/bloom/theme';
-import {
-  useDialogFrame,
-  useDialogHeader,
-  type DialogHeaderConfig,
-} from '@oxy.so/bloom/dialog';
+import { useDialogFrame, useDialogHeader, type DialogHeaderConfig } from '@oxy.so/bloom/dialog';
 import type { SurfaceControls } from '@oxy.so/bloom/surfaces';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent } from '../navigation/routes';
@@ -21,10 +17,7 @@ import {
   presentRoute,
   replaceWithinOrPresent,
 } from '../navigation/surfaces';
-import {
-  SurfaceHeaderContext,
-  type SurfaceHeaderContent,
-} from '../hooks/useSurfaceHeader';
+import { SurfaceHeaderContext, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
 import { SurfaceFrameWidthContext } from '../hooks/useSurfaceFrameWidth';
 import type { BaseScreenProps } from '../types/navigation';
 
@@ -111,11 +104,7 @@ export interface SurfaceScreenProps {
  * effect) rather than a captured-controls call, so a dismiss requested before
  * this surface mounted still resolves the Bloom surface exactly once.
  */
-function SurfaceScreen({
-  navStack,
-  surface,
-  dismissOnBackdrop = true,
-}: SurfaceScreenProps) {
+function SurfaceScreen({ navStack, surface, dismissOnBackdrop = true }: SurfaceScreenProps) {
   const theme = useTheme();
   const state = useStore(navStack.store);
   const top = state.frames[state.frames.length - 1];
@@ -222,7 +211,11 @@ function SurfaceScreen({
   }, [config.frameSize, viewportHeight, screenWidth]);
   useDialogFrame(
     useMemo(
-      () => ({ key: `${top.route}#${top.step}#${screenWidth ?? ''}`, morph: config.morph, size: frameSize }),
+      () => ({
+        key: `${top.route}#${top.step}#${screenWidth ?? ''}`,
+        morph: config.morph,
+        size: frameSize,
+      }),
       [top.route, top.step, screenWidth, config.morph, frameSize],
     ),
   );
@@ -267,7 +260,19 @@ function SurfaceScreen({
       theme: theme.mode,
       ...rest,
     };
-  }, [navigate, goBack, replace, canGoBack, setStep, present, dismiss, theme.mode, top.route, top.step, top.props]);
+  }, [
+    navigate,
+    goBack,
+    replace,
+    canGoBack,
+    setStep,
+    present,
+    dismiss,
+    theme.mode,
+    top.route,
+    top.step,
+    top.props,
+  ]);
 
   if (!ScreenComponent) return null;
 

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

@@ -45,7 +45,7 @@ it('follows a language change', () => {
   expect(getByTestId('locale').textContent).toBe('fr-FR');
 });
 
-it("keeps a locale the app set above OxyProvider", () => {
+it('keeps a locale the app set above OxyProvider', () => {
   const { getByTestId } = render(
     <LocaleProvider locale="de-DE">
       <BloomLocaleBridge>

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

@@ -24,7 +24,9 @@ beforeEach(() => {
 it('resolves and reports the account language on mount', () => {
   mockCurrentLanguage = 'es-ES';
   const onChange = jest.fn();
-  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+  render(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />,
+  );
 
   expect(onChange).toHaveBeenCalledWith('es-ES');
 });
@@ -32,7 +34,9 @@ it('resolves and reports the account language on mount', () => {
 it('coerces a locale the host never shipped a catalog for, by base language', () => {
   mockCurrentLanguage = 'es-MX';
   const onChange = jest.fn();
-  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+  render(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />,
+  );
 
   expect(onChange).toHaveBeenCalledWith('es-ES');
 });
@@ -40,7 +44,9 @@ it('coerces a locale the host never shipped a catalog for, by base language', ()
 it('falls back to the caller default when nothing matches, even by base', () => {
   mockCurrentLanguage = 'ja-JP';
   const onChange = jest.fn();
-  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+  render(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />,
+  );
 
   expect(onChange).toHaveBeenCalledWith('en-US');
 });
@@ -54,11 +60,15 @@ it('calls back again only when the RESOLVED locale changes', () => {
 
   // Same resolved locale, brand-new callback identity (the common case for an
   // inline arrow function) — must not re-fire.
-  rerender(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={() => {}} />);
+  rerender(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={() => {}} />,
+  );
   expect(onChange).toHaveBeenCalledTimes(1);
 
   mockCurrentLanguage = 'fr-FR';
-  rerender(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+  rerender(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />,
+  );
   expect(onChange).toHaveBeenCalledTimes(2);
   expect(onChange).toHaveBeenLastCalledWith('fr-FR');
 });

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

@@ -40,7 +40,9 @@ describe('OxyConsentScreen', () => {
     const { getByTestId } = renderScreen({ scopes: ['openid', 'files:write', 'custom:thing'] });
 
     expect(getByTestId('consent-scope-openid').textContent).toContain('Confirm your identity');
-    expect(getByTestId('consent-scope-files:write').textContent).toContain('Upload and modify your files');
+    expect(getByTestId('consent-scope-files:write').textContent).toContain(
+      'Upload and modify your files',
+    );
     // Unknown scope → the raw scope string is shown, never an empty row.
     expect(getByTestId('consent-scope-custom:thing').textContent).toContain('custom:thing');
   });
@@ -68,18 +70,24 @@ describe('OxyConsentScreen', () => {
   it('keeps an unknown scope alongside known ones instead of dropping the permission', () => {
     const { getByTestId } = renderScreen({ scopes: ['profile:read', 'acme:teleport'] });
 
-    expect(getByTestId('consent-scope-profile:read').textContent).toContain('Read your basic profile');
+    expect(getByTestId('consent-scope-profile:read').textContent).toContain(
+      'Read your basic profile',
+    );
     expect(getByTestId('consent-scope-acme:teleport').textContent).toContain('acme:teleport');
   });
 
   it('shows the basic-permissions fallback when no scopes are requested', () => {
     const { getByTestId, queryByTestId } = renderScreen({ scopes: [] });
-    expect(getByTestId('consent-scope-basic').textContent).toContain('Sign you in and read your basic profile');
+    expect(getByTestId('consent-scope-basic').textContent).toContain(
+      'Sign you in and read your basic profile',
+    );
     expect(queryByTestId('consent-scope-openid')).toBeNull();
   });
 
   it('renders the provenance line for an official application', () => {
-    const { getByTestId } = renderScreen({ application: { name: 'Oxy Console', isOfficial: true } });
+    const { getByTestId } = renderScreen({
+      application: { name: 'Oxy Console', isOfficial: true },
+    });
     expect(getByTestId('consent-provenance').textContent).toContain('Official Oxy application');
   });
 
@@ -166,13 +174,15 @@ describe('OxyConsentScreen', () => {
       resource: {
         application: { name: 'Inbox', iconUrl: 'inbox-icon' },
         uri: 'https://mcp.inbox.oxy.so',
-        writeActions: [{
-          name: 'sendEmail',
-          version: '1.0.0',
-          description: 'Send an email from the selected mailbox.',
-          requiredCapabilities: ['email.send'],
-          effect: 'external',
-        }],
+        writeActions: [
+          {
+            name: 'sendEmail',
+            version: '1.0.0',
+            description: 'Send an email from the selected mailbox.',
+            requiredCapabilities: ['email.send'],
+            effect: 'external',
+          },
+        ],
       },
     });
 

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

@@ -81,10 +81,18 @@ describe('describeFollowButton', () => {
     [{ ...known, isFollowing: false }, 'Follow @nate', undefined],
     [{ ...known, isFollowing: true, isPending: true }, 'Following @nate', undefined],
     [{ ...known, isFollowing: false, isPending: true }, 'Follow @nate', undefined],
-    [{ ...known, isKnown: false, isFollowing: false }, 'Checking whether you follow @nate', undefined],
+    [
+      { ...known, isKnown: false, isFollowing: false },
+      'Checking whether you follow @nate',
+      undefined,
+    ],
     [{ ...known, username: undefined, isFollowing: true }, 'Following', 'Unfollows this account'],
     [{ ...known, username: undefined, isFollowing: false }, 'Follow', undefined],
-    [{ ...known, username: undefined, isKnown: false, isFollowing: false }, 'Checking follow status', undefined],
+    [
+      { ...known, username: undefined, isKnown: false, isFollowing: false },
+      'Checking follow status',
+      undefined,
+    ],
   ])('%o reads "%s"', (input, label, hint) => {
     expect(describeFollowButton(input)).toEqual(
       hint ? { accessibilityLabel: label, accessibilityHint: hint } : { accessibilityLabel: label },
@@ -103,18 +111,24 @@ describe('describeFollowAllButton', () => {
   const labels = { followAllLabel: 'Follow all', followedAllLabel: 'Following' };
 
   it('names the state and counts the accounts in the hint', () => {
-    expect(describeFollowAllButton({ ...labels, allFollowing: false, isPending: false, count: 3 })).toEqual({
+    expect(
+      describeFollowAllButton({ ...labels, allFollowing: false, isPending: false, count: 3 }),
+    ).toEqual({
       accessibilityLabel: 'Follow all',
       accessibilityHint: 'Follows all 3 accounts',
     });
-    expect(describeFollowAllButton({ ...labels, allFollowing: true, isPending: false, count: 1 })).toEqual({
+    expect(
+      describeFollowAllButton({ ...labels, allFollowing: true, isPending: false, count: 1 }),
+    ).toEqual({
       accessibilityLabel: 'Following',
       accessibilityHint: 'Unfollows all 1 account',
     });
   });
 
   it('drops the hint while the bulk write is in flight', () => {
-    expect(describeFollowAllButton({ ...labels, allFollowing: true, isPending: true, count: 3 })).toEqual({
+    expect(
+      describeFollowAllButton({ ...labels, allFollowing: true, isPending: true, count: 3 }),
+    ).toEqual({
       accessibilityLabel: 'Following',
     });
   });
@@ -138,14 +152,20 @@ describe('FollowButton hands Bloom a name that follows the state', () => {
   it('reads "Follow @nate" while it shows Follow', () => {
     mockFollowState = { isFollowing: false, isKnown: true, isLoading: false };
     render(<FollowButton userId="nate-id" username="nate" />);
-    expect(lastBloomProps()).toMatchObject({ following: false, accessibilityLabel: 'Follow @nate' });
+    expect(lastBloomProps()).toMatchObject({
+      following: false,
+      accessibilityLabel: 'Follow @nate',
+    });
     expect(lastBloomProps()?.accessibilityHint).toBeUndefined();
   });
 
   it('keeps the shown state while a write is pending', () => {
     mockFollowState = { isFollowing: true, isKnown: true, isLoading: true };
     render(<FollowButton userId="nate-id" username="nate" />);
-    expect(lastBloomProps()).toMatchObject({ loading: true, accessibilityLabel: 'Following @nate' });
+    expect(lastBloomProps()).toMatchObject({
+      loading: true,
+      accessibilityLabel: 'Following @nate',
+    });
     expect(lastBloomProps()?.accessibilityHint).toBeUndefined();
   });
 
@@ -178,7 +198,12 @@ describe('FollowTargetButton names the state it shows', () => {
     ['following', { globalState: 'following', applicationMode: 'inherit' }, true, 'Following'],
     ['requested', { globalState: 'requested', applicationMode: 'inherit' }, true, 'Requested'],
     ['off here', { globalState: 'following', applicationMode: 'disabled' }, true, 'Off here'],
-    ['not following', { globalState: 'not_following', applicationMode: 'inherit' }, false, 'Follow'],
+    [
+      'not following',
+      { globalState: 'not_following', applicationMode: 'inherit' },
+      false,
+      'Follow',
+    ],
   ])('%s', (_name, status, isFollowing, label) => {
     mockTarget = {
       status: { ...status, relationshipId: null },
@@ -191,10 +216,12 @@ describe('FollowTargetButton names the state it shows', () => {
   });
 });
 
-
-it.each(['sm', 'md', 'lg'] as const)('forwards canonical %s geometry in both follow modes', size => {
-  render(<FollowButton userId="nate-id" size={size} />);
-  expect(lastBloomProps()?.size).toBe(size);
-  render(<FollowButton userIds={['a', 'b']} size={size} />);
-  expect(lastBloomProps()?.size).toBe(size);
-});
+it.each(['sm', 'md', 'lg'] as const)(
+  'forwards canonical %s geometry in both follow modes',
+  (size) => {
+    render(<FollowButton userId="nate-id" size={size} />);
+    expect(lastBloomProps()?.size).toBe(size);
+    render(<FollowButton userIds={['a', 'b']} size={size} />);
+    expect(lastBloomProps()?.size).toBe(size);
+  },
+);

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

@@ -46,19 +46,19 @@ const keys = (items: ReturnType<typeof buildFollowMenuItems>) => items.map((i) =
 describe('resolveFollowPrimaryAction', () => {
   it('follows when not following globally', () => {
     expect(resolveFollowPrimaryAction({ isFollowing: false, applicationMode: 'inherit' })).toBe(
-      'follow'
+      'follow',
     );
   });
 
   it('unfollows when following and active here', () => {
     expect(resolveFollowPrimaryAction({ isFollowing: true, applicationMode: 'inherit' })).toBe(
-      'unfollow'
+      'unfollow',
     );
   });
 
   it('re-enables here instead of unfollowing everywhere when switched off in this app', () => {
     expect(resolveFollowPrimaryAction({ isFollowing: true, applicationMode: 'disabled' })).toBe(
-      'enable-here'
+      'enable-here',
     );
   });
 });
@@ -74,7 +74,7 @@ describe('buildFollowMenuItems', () => {
 
     it('phrases the option with the application’s own verb', () => {
       expect(buildFollowMenuItems({ ...base, idleVerb: 'Subscribe' })[0].label).toBe(
-        'Subscribe for 24 hours'
+        'Subscribe for 24 hours',
       );
     });
 
@@ -152,7 +152,7 @@ describe('withApplicationMode', () => {
 
   it('stays not-following when there is no global relationship to act on', () => {
     expect(withApplicationMode(UNKNOWN_FOLLOW_STATUS, 'enabled').effectiveState).toBe(
-      'not_following'
+      'not_following',
     );
     expect(isFollowedGlobally(UNKNOWN_FOLLOW_STATUS)).toBe(false);
   });
@@ -163,7 +163,7 @@ describe('withApplicationMode', () => {
         globalState: 'active',
         applicationMode: 'inherit',
         effectiveState: 'following',
-      })
+      }),
     ).toBe(false);
     expect(isCompleteFollowStatus(UNKNOWN_FOLLOW_STATUS)).toBe(true);
   });
@@ -185,17 +185,19 @@ describe('withApplicationMode', () => {
       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({
+    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',
@@ -246,12 +248,13 @@ describe('what onChange reports', () => {
           hasRelationship: true,
           applicationMode: 'disabled',
         }),
-      ].map((item) => item.action.type)
+      ].map((item) => item.action.type),
     );
     // Plus the two the primary button can produce that the menu cannot.
     for (const action of [...fromMenu, 'follow', 'unfollow']) {
-      expect(typeof FOLLOW_ACTION_LEAVES_ACTIVE[action as keyof typeof FOLLOW_ACTION_LEAVES_ACTIVE])
-        .toBe('boolean');
+      expect(
+        typeof FOLLOW_ACTION_LEAVES_ACTIVE[action as keyof typeof FOLLOW_ACTION_LEAVES_ACTIVE],
+      ).toBe('boolean');
     }
     expect(fromMenu.size).toBeGreaterThanOrEqual(3);
   });

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

@@ -44,7 +44,12 @@ import { PressableScale } from '@oxy.so/bloom/pressable-scale';
 import { CompositionBar, type CompositionCategory } from '@oxy.so/bloom/composition-bar';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Text } from '@oxy.so/bloom/typography';
-import { showsPrincipalHeaders, type AccountDialogSnapshot, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core/session';
+import {
+  showsPrincipalHeaders,
+  type AccountDialogSnapshot,
+  type SwitcherContextRow,
+  type SwitcherPrincipalRow,
+} from '@oxy.so/core/session';
 import AvatarCameraBadge from '../AvatarCameraBadge';
 import { authChooserStyles as styles } from './styles';
 import {
@@ -384,7 +389,8 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             variant, `small` the compact height; it hugs its label instead of
             spanning the surface. */}
         <Button
-          appearance="subtle" tone="neutral"
+          appearance="subtle"
+          tone="neutral"
           size="sm"
           onPress={handlers.onManage}
           accessibilityLabel={manageLabel}
@@ -399,60 +405,60 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
       <View className="mb-space-16">
         <Animated.View style={[{ overflow: 'hidden' }, switchCardStyle]}>
           <View className="bg-fill">
-          <HoverPressable
-            baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
-              busy ? ' opacity-60' : ''
-            }`}
-            hoverClassName="bg-fill-secondary"
-            onPress={toggleExpanded}
-            disabled={busy}
-            accessibilityRole="button"
-            // The ARIA prop, not `accessibilityState`: react-native-web 0.21
-            // forwards only this one, and RN maps it to
-            // `accessibilityState.expanded` natively — so the disclosure state
-            // reaches assistive tech on BOTH platforms.
-            aria-expanded={expanded}
-            accessibilityLabel={switchLabel}
-          >
-            <Text className="flex-1 text-body text-text" numberOfLines={1}>
-              {switchLabel}
-            </Text>
-            {/* The facepile previews who you can switch to; once the list is open
+            <HoverPressable
+              baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
+                busy ? ' opacity-60' : ''
+              }`}
+              hoverClassName="bg-fill-secondary"
+              onPress={toggleExpanded}
+              disabled={busy}
+              accessibilityRole="button"
+              // The ARIA prop, not `accessibilityState`: react-native-web 0.21
+              // forwards only this one, and RN maps it to
+              // `accessibilityState.expanded` natively — so the disclosure state
+              // reaches assistive tech on BOTH platforms.
+              aria-expanded={expanded}
+              accessibilityLabel={switchLabel}
+            >
+              <Text className="flex-1 text-body text-text" numberOfLines={1}>
+                {switchLabel}
+              </Text>
+              {/* The facepile previews who you can switch to; once the list is open
                 it would just restate the rows below it. */}
-            {expanded ? null : (
-              <AvatarGroup
-                items={facepile}
-                layout="stack"
-                size={FACEPILE_AVATAR_SIZE}
-                max={FACEPILE_MAX}
-                overlap={FACEPILE_OVERLAP}
-                variant="thumb"
-                showInitials
-                ringColor={theme.colors.card}
-              />
-            )}
-            <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
-              <Animated.View style={chevronStyle}>
-                <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
-              </Animated.View>
-            </View>
-          </HoverPressable>
+              {expanded ? null : (
+                <AvatarGroup
+                  items={facepile}
+                  layout="stack"
+                  size={FACEPILE_AVATAR_SIZE}
+                  max={FACEPILE_MAX}
+                  overlap={FACEPILE_OVERLAP}
+                  variant="thumb"
+                  showInitials
+                  ringColor={theme.colors.card}
+                />
+              )}
+              <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
+                <Animated.View style={chevronStyle}>
+                  <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
+                </Animated.View>
+              </View>
+            </HoverPressable>
 
-          {/* Animated reveal: an overflow-clipped container whose height + opacity
+            {/* Animated reveal: an overflow-clipped container whose height + opacity
               are driven by `listProgress`; the inner style-based wrapper measures
               the natural content height via `onLayout`. */}
-          <Animated.View
-            style={[styles.collapse, listStyle]}
-            pointerEvents={expanded ? 'auto' : 'none'}
-          >
-            <View
-              key={switchListKey}
-              style={styles.collapseMeasure}
-              onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
+            <Animated.View
+              style={[styles.collapse, listStyle]}
+              pointerEvents={expanded ? 'auto' : 'none'}
             >
-              <View>{listItems}</View>
-            </View>
-          </Animated.View>
+              <View
+                key={switchListKey}
+                style={styles.collapseMeasure}
+                onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
+              >
+                <View>{listItems}</View>
+              </View>
+            </Animated.View>
           </View>
         </Animated.View>
       </View>
@@ -507,7 +513,14 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
         {menu.customItems.map((item) => (
           <SettingsListItem
             key={item.key}
-            icon={<MenuIcon name={(item.icon ?? 'dots-horizontal') as keyof typeof MaterialCommunityIcons.glyphMap} theme={theme} />}
+            icon={
+              <MenuIcon
+                name={
+                  (item.icon ?? 'dots-horizontal') as keyof typeof MaterialCommunityIcons.glyphMap
+                }
+                theme={theme}
+              />
+            }
             title={item.label}
             onPress={item.onPress}
           />
@@ -655,7 +668,10 @@ const ContextRow: React.FC<{
           {/* The accent ring is an OVERLAY: it costs the row no width, so every
               avatar in the list starts on the same content line. */}
           {context.isActive ? (
-            <View style={[styles.currentAvatarRing, { borderColor: accent }]} pointerEvents="none" />
+            <View
+              style={[styles.currentAvatarRing, { borderColor: accent }]}
+              pointerEvents="none"
+            />
           ) : null}
         </View>
         <View className="flex-1 min-w-0">
@@ -670,9 +686,7 @@ const ContextRow: React.FC<{
                 : ''}
           </Text>
         </View>
-        {activating ? (
-          <MaterialCommunityIcons name="loading" size={20} color={accent} />
-        ) : null}
+        {activating ? <MaterialCommunityIcons name="loading" size={20} color={accent} /> : null}
       </HoverPressable>
       <HoverPressable
         baseClassName={`px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`}