@dxos/shell 0.6.14-main.2b6a0f3 → 0.6.14-main.69511f5

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -21,6 +21,7 @@ export type IdentityPanelImplProps = {
     | 'device invitation manager'
     | 'identity action chooser'
     | 'confirm join new identity'
+    | 'confirm recover'
     | 'confirm reset storage';
   initialDisposition?: IdentityPanelInitialDisposition;
   identity: Identity;
@@ -29,6 +30,7 @@ export type IdentityPanelImplProps = {
   onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
   onResetStorage?: () => Promise<void>;
+  onRecover?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
   createInvitationUrl: (invitationCode: string) => string;
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;

package/src/panels/IdentityPanel/identityMachine.ts

@@ -21,7 +21,7 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseResetStorage' | 'chooseJoinNewIdentity' | 'unchooseAction';
+  type: 'chooseResetStorage' | 'chooseRecoverIdentity' | 'chooseJoinNewIdentity' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -67,6 +67,7 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       choosingAction: {},
       managingDeviceInvitation: {},
       confirmingResetStorage: {},
+      confirmingRecover: {},
       confirmingJoinNewIdentity: {},
     },
     on: {
@@ -74,6 +75,7 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       deselectInvitation: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
       selectInvitation: { target: '.managingDeviceInvitation', actions: ['setInvitation', 'log'] },
       chooseJoinNewIdentity: { target: '.confirmingJoinNewIdentity', actions: 'log' },
+      chooseRecoverIdentity: { target: '.confirmingRecover', actions: 'log' },
       chooseResetStorage: { target: '.confirmingResetStorage', actions: 'log' },
     },
   },

package/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx

@@ -9,7 +9,7 @@ import { useClient } from '@dxos/react-client';
 import { useHaloInvitations, DeviceType } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
-import { AgentConfig, type AgentFormProps, DeviceList } from '../../../components';
+import { AgentConfig, type AgentFormProps, DeviceList, type DeviceListProps } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 
 export type IdentityActionChooserProps = IdentityPanelStepProps;
@@ -33,20 +33,30 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
     }
     send?.({ type: 'selectInvitation', invitation });
   };
-  return <IdentityActionChooserImpl {...props} onCreateInvitationClick={createInvitation} />;
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production';
+  return (
+    <IdentityActionChooserImpl
+      {...props}
+      onClickAdd={createInvitation}
+      onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
+      onClickRecover={isProduction ? undefined : () => send?.({ type: 'chooseRecoverIdentity' })}
+      onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+    />
+  );
 };
 
 export type IdentityActionChooserImplProps = IdentityActionChooserProps &
-  Partial<AgentFormProps> & {
-    onCreateInvitationClick?: () => void;
-  };
+  Partial<AgentFormProps> &
+  Pick<DeviceListProps, 'onClickAdd' | 'onClickJoinExisting' | 'onClickRecover' | 'onClickReset'>;
 
 export const IdentityActionChooserImpl = ({
-  send,
-  onCreateInvitationClick,
   devices,
   connectionState,
   agentHostingEnabled,
+  onClickAdd,
+  onClickJoinExisting,
+  onClickRecover,
+  onClickReset,
   ...agentProps
 }: IdentityActionChooserImplProps) => {
   const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
@@ -55,9 +65,10 @@ export const IdentityActionChooserImpl = ({
       <DeviceList
         devices={devices}
         connectionState={connectionState}
-        onClickAdd={onCreateInvitationClick}
-        onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
-        onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+        onClickAdd={onClickAdd}
+        onClickJoinExisting={onClickJoinExisting}
+        onClickRecover={onClickRecover}
+        onClickReset={onClickReset}
         onAgentDestroy={agentProps.onAgentDestroy!}
       />
       {!managedDeviceAvailable && agentHostingEnabled && <AgentConfig {...(agentProps as AgentFormProps)} />}

package/src/panels/JoinPanel/JoinPanel.stories.tsx

@@ -30,7 +30,7 @@ const JoinDialog = (args: Partial<JoinPanelImplProps>) => (
 );
 
 export default {
-  title: 'sdk/react-shell/JoinPanel',
+  title: 'sdk/shell/JoinPanel',
   component: JoinDialog,
   decorators: [withTheme],
   parameters: { translations, chromatic: { disableSnapshot: false } },

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -14,7 +14,7 @@ import { type FailReason } from '../../types';
 
 export type JoinPanelMode = 'default' | 'halo-only';
 
-export type JoinPanelInitialDisposition = 'default' | 'accept-halo-invitation';
+export type JoinPanelInitialDisposition = 'default' | 'accept-halo-invitation' | 'recover-identity';
 
 export type JoinStepProps = Omit<StepProps, 'send' | 'onDone'> & {
   send: JoinSend;

package/src/panels/JoinPanel/joinMachine.ts

@@ -312,6 +312,11 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
             target: '#join.choosingIdentity.acceptingHaloInvitation',
             actions: 'log',
           },
+          {
+            cond: 'initiallyRecoveringIdentity',
+            target: '#join.choosingIdentity.recoveringIdentity',
+            actions: 'log',
+          },
           { cond: 'noSelectedIdentity', target: 'choosingIdentity', actions: 'log' },
           { target: 'acceptingSpaceInvitation', actions: 'log' },
         ],
@@ -364,6 +369,8 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
       noSelectedIdentity: ({ identity }, _event) => !identity,
       initiallyAcceptingHaloInvitation: ({ identity, initialDisposition }, _event) =>
         !identity && initialDisposition === 'accept-halo-invitation',
+      initiallyRecoveringIdentity: ({ identity, initialDisposition }, _event) =>
+        !identity && initialDisposition === 'recover-identity',
       hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
       noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode,
     },

package/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx

@@ -50,8 +50,6 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
         </CompoundButton>
         <CompoundButton
           {...sharedButtonProps}
-          // TODO(mykola): Implement recover.
-          disabled={true}
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => send({ type: 'recoverIdentity' })}

package/src/panels/JoinPanel/steps/IdentityInput.tsx

@@ -28,16 +28,28 @@ export const IdentityInput = (props: IdentityInputProps) => {
   const client = useClient();
   const { t } = useTranslation('os');
   const [validationMessage, setValidationMessage] = useState('');
-  const createIdentity = (displayName: string) => {
-    void client.halo.createIdentity({ [isRecover ? 'seedphrase' : 'displayName']: displayName }).then(
-      (identity) => {
-        send?.({ type: 'selectIdentity' as const, identity });
-      },
-      (error) => {
-        log.catch(error);
-        setValidationMessage(t(isRecover ? 'failed to recover identity message' : 'failed to create identity message'));
-      },
-    );
+  const createIdentity = (value: string) => {
+    if (isRecover) {
+      void client.halo.recoverIdentity({ seedphrase: value }).then(
+        (identity) => {
+          send?.({ type: 'selectIdentity' as const, identity });
+        },
+        (error) => {
+          log.catch(error);
+          setValidationMessage(t('failed to recover identity message'));
+        },
+      );
+    } else {
+      void client.halo.createIdentity({ displayName: value }).then(
+        (identity) => {
+          send?.({ type: 'selectIdentity' as const, identity });
+        },
+        (error) => {
+          log.catch(error);
+          setValidationMessage(t('failed to create identity message'));
+        },
+      );
+    }
   };
   return <IdentityInputImpl {...props} onDisplayNameConfirm={createIdentity} validationMessage={validationMessage} />;
 };

package/src/panels/Panels.stories.tsx

@@ -53,7 +53,7 @@ export const Default = (props: any) => {
 Default.parameters = { layout: 'fullscreen' };
 
 export default {
-  title: 'sdk/react-shell/All',
+  title: 'sdk/shell/All',
   decorators: [withTheme],
   component: StoryRow,
   parameters: { chromatic: { disableSnapshot: false }, translations: [osTranslations] },

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -17,7 +17,7 @@ import { SpaceManagerImpl } from './steps';
 import { InvitationListItemImpl, SpaceMemberListImpl, InvitationList } from '../../components';
 import { StorybookDialog } from '../../components/StorybookDialog';
 import { InvitationManager, type InvitationManagerProps } from '../../steps';
-import { inviteWithState } from '../../testing';
+import { inviteWithState } from '../../testing/fixtures';
 
 const noOpProps: SpacePanelImplProps = {
   titleId: 'storybookSpacePanel__title',
@@ -28,7 +28,7 @@ const noOpProps: SpacePanelImplProps = {
 };
 
 export default {
-  title: 'sdk/react-shell/SpacePanel',
+  title: 'sdk/shell/SpacePanel',
   component: SpacePanelImpl,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/playwright/invitations-manager.ts

@@ -6,7 +6,6 @@ import { expect, type Browser, type ConsoleMessage } from '@playwright/test';
 
 import { Trigger } from '@dxos/async';
 import { type Invitation } from '@dxos/react-client/invitations';
-import { ConnectionState } from '@dxos/react-client/mesh';
 import { setupPage } from '@dxos/test-utils/playwright';
 
 import { ScopedShellManager } from '../testing';
@@ -32,7 +31,7 @@ export class InvitationsManager extends ScopedShellManager {
     }
 
     const { page } = await setupPage(this._browser, {
-      url: storybookUrl('invitations--default'),
+      url: storybookUrl('sdk-shell-invitations--default'),
     });
 
     this.page = page;
@@ -56,9 +55,9 @@ export class InvitationsManager extends ScopedShellManager {
 
     try {
       await selector.waitFor({ timeout: 500 });
-      return ConnectionState.OFFLINE;
+      return 0;
     } catch {
-      return ConnectionState.ONLINE;
+      return 1;
     }
   }
 
@@ -144,7 +143,8 @@ export class InvitationsManager extends ScopedShellManager {
       },
       { id, type, options },
     );
-    return this._invitationCode.wait();
+
+    return this._invitationCode.wait({ timeout: 1_000 });
   }
 
   async acceptInvitation(id: number, type: 'device' | 'space', invitation: string) {

package/src/playwright/invitations.spec.ts

@@ -5,11 +5,16 @@
 import { expect, test } from '@playwright/test';
 
 import { sleep } from '@dxos/async';
-import { Invitation } from '@dxos/react-client/invitations';
-import { ConnectionState } from '@dxos/react-client/mesh';
 
 import { InvitationsManager } from './invitations-manager';
 
+// TODO(wittjosiah): Can't import these because of ESM/CJS issues.
+// import { Invitation } from '@dxos/react-client/invitations';
+// import { ConnectionState } from '@dxos/react-client/mesh';
+const InvitationAuthMethodNone = 0;
+const ConnectionStateOffline = 0;
+const ConnectionStateOnline = 1;
+
 test.describe('Invitations', () => {
   let manager: InvitationsManager;
 
@@ -44,7 +49,6 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'device', invitation);
       await manager.readyToAuthenticate('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -52,11 +56,10 @@ test.describe('Invitations', () => {
     test('no auth method', async () => {
       await manager.createIdentity(0);
       await manager.openPanel(0, 'devices');
-      const invitation = await manager.createInvitation(0, 'device', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation = await manager.createInvitation(0, 'device', { authMethod: InvitationAuthMethodNone });
 
       await manager.openPanel(1, 'identity');
       await manager.acceptInvitation(1, 'device', invitation);
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -72,7 +75,6 @@ test.describe('Invitations', () => {
       await manager.authenticateInvitation('device', '000000', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -99,7 +101,6 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -144,7 +145,6 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -160,14 +160,13 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'device', invitation);
       expect(await manager.readyToAuthenticate('device', manager.peer(1))).toBe(true);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionState.OFFLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOffline);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionState.ONLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOnline);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('device', manager.peer(1));
       await manager.clearAuthCode('device', manager.peer(1));
       await manager.authenticateInvitation('device', authCode, manager.peer(1));
-      await manager.doneInvitation('device', manager.peer(1));
 
       expect(await manager.getDisplayName(0)).toEqual(await manager.getDisplayName(1));
     });
@@ -186,7 +185,6 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'space', invitation);
       await manager.readyToAuthenticate('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -196,17 +194,15 @@ test.describe('Invitations', () => {
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 1);
-      const invitation1 = await manager.createInvitation(0, 'space', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation1 = await manager.createInvitation(0, 'space', { authMethod: InvitationAuthMethodNone });
       const invitation2 = await manager.createInvitation(0, 'space');
 
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation1);
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation2);
-      await manager.doneInvitation('space', manager.peer(1));
 
       expect(await manager.getSpaceMembersCount(0)).toEqual(2);
     });
@@ -215,12 +211,11 @@ test.describe('Invitations', () => {
       await manager.createIdentity(0);
       await manager.createSpace(0);
       await manager.openPanel(0, 1);
-      const invitation = await manager.createInvitation(0, 'space', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation = await manager.createInvitation(0, 'space', { authMethod: InvitationAuthMethodNone });
 
       await manager.createIdentity(1);
       await manager.openPanel(1, 'join');
       await manager.acceptInvitation(1, 'space', invitation);
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -242,7 +237,6 @@ test.describe('Invitations', () => {
 
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -272,7 +266,6 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -323,7 +316,6 @@ test.describe('Invitations', () => {
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -342,14 +334,13 @@ test.describe('Invitations', () => {
       await manager.acceptInvitation(1, 'space', invitation);
       expect(await manager.readyToAuthenticate('space', manager.peer(1))).toBe(true);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionState.OFFLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOffline);
       await manager.toggleNetworkStatus(0);
-      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionState.ONLINE);
+      expect(await manager.getNetworkStatus(0)).toEqual(ConnectionStateOnline);
       await manager.resetInvitation(manager.peer(1));
       await manager.invitationInputContinue('space', manager.peer(1));
       await manager.clearAuthCode('space', manager.peer(1));
       await manager.authenticateInvitation('space', authCode, manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(1));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));
@@ -380,8 +371,6 @@ test.describe('Invitations', () => {
       // Helps to ensure both auth codes are fully input (especially in webkit).
       await sleep(100);
       await manager.authenticateInvitation('space', authCode2, manager.peer(2));
-      await manager.doneInvitation('space', manager.peer(1));
-      await manager.doneInvitation('space', manager.peer(2));
 
       await manager.openPanel(0, 'spaces');
       expect(await manager.getSpaceName(0, 1)).toEqual(await manager.getSpaceName(1, 1));

package/src/steps/ConfirmReset.tsx

@@ -15,7 +15,7 @@ import { Action, Actions, StepHeading, Input } from '../components';
 type ConfirmResetOptions = Partial<{
   onCancel: () => void;
   onConfirm: () => Promise<void>;
-  mode: 'join new identity' | 'reset storage';
+  mode: 'join new identity' | 'recover' | 'reset storage';
 }>;
 
 export type ConfirmResetProps = StepProps & ConfirmResetOptions;
@@ -64,7 +64,8 @@ export const ConfirmResetImpl = ({
   const { t } = useTranslation('os');
   const confirmationValue = t('confirmation value');
   const [inputValue, setInputValue] = useState('');
-  const testIdAffix = mode === 'join new identity' ? 'join-new-identity' : 'reset-storage';
+  const testIdAffix =
+    mode === 'join new identity' ? 'join-new-identity' : mode === 'recover' ? 'recover' : 'reset-storage';
   return (
     <>
       <div role='none' className='grow flex flex-col gap-2 justify-center'>
@@ -79,9 +80,16 @@ export const ConfirmResetImpl = ({
           {...{ validationMessage }}
           label={
             <StepHeading className='text-start mlb-2'>
-              {t(mode === 'join new identity' ? 'join new identity input label' : 'reset storage input label', {
-                confirmationValue,
-              })}
+              {t(
+                mode === 'join new identity'
+                  ? 'join new identity input label'
+                  : mode === 'recover'
+                    ? 'recover reset input label'
+                    : 'reset storage input label',
+                {
+                  confirmationValue,
+                },
+              )}
             </StepHeading>
           }
           disabled={disabled}

package/src/stories/Invitations.e2e-stories.tsx

@@ -14,7 +14,7 @@ import { type Space, type SpaceMember, useSpaces } from '@dxos/react-client/echo
 import { useIdentity } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { ConnectionState, useNetworkStatus } from '@dxos/react-client/mesh';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { useMultiClient, withMultiClientProvider } from '@dxos/react-client/testing';
 import { Button, ButtonGroup, List } from '@dxos/react-ui';
 import { getSize, groupSurface } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -24,7 +24,7 @@ import { IdentityPanel, JoinPanel, SpacePanel } from '../panels';
 import { osTranslations } from '../translations';
 
 export default {
-  title: 'Invitations',
+  title: 'sdk/shell/Invitations',
 };
 
 export type PanelType = Space | 'identity' | 'devices' | 'join';
@@ -113,8 +113,8 @@ const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPane
   }
 };
 
-const Invitations = (args: { id: number; count: number }) => {
-  const { id }: { id: number } = args;
+const Invitations = () => {
+  const { id } = useMultiClient();
   const client = useClient();
   const networkStatus = useNetworkStatus().swarm;
   const identity = useIdentity();
@@ -220,12 +220,19 @@ const Invitations = (args: { id: number; count: number }) => {
 //   The issue appears to be related to dynamic imports during client initialization.
 //   This does not seem to be a problem in other browsers nor in Safari in the app.
 export const Default = {
-  render: (args: { id: number }) => (
-    <ClipboardProvider>
-      <ClientRepeater component={Invitations} count={3} />
-    </ClipboardProvider>
-  ),
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  render: () => {
+    return (
+      // TODO(wittjosiah): Factor out ClipboardProvider to react-ui and include in layout decorator.
+      <ClipboardProvider>
+        <Invitations />
+      </ClipboardProvider>
+    );
+  },
+  decorators: [
+    withMultiClientProvider({ numClients: 3 }),
+    withLayout({ tooltips: true, classNames: 'grid grid-cols-3' }),
+    withTheme,
+  ],
   parameters: {
     chromatic: { disableSnapshot: true },
     translations: [osTranslations],

package/src/testing/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './fixtures';
+// NOTE: Not exporting fixtures as they depend on esm-only packages.
+
 export * from './scoped-shell-manager';
 export * from './shell-manager';

package/src/translations/locales/en-US.ts

@@ -153,4 +153,6 @@ export const os = {
   'agent requested description':
     'The agent service is creating an agent for you. Once the agent connects, it will display in the devices list.',
   'authenticating label': 'Authenticating…',
+  'create recovery code label': 'Create recovery code',
+  'choose recover identity label': 'Recover identity',
 };