@dxos/shell 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -2,10 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
+import { FirstAidKit, Key, Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
+import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
@@ -51,6 +52,7 @@ const IdentityHeading = ({
   connectionState,
   onChangeConnectionState,
 }: IdentityPanelHeadingProps) => {
+  const client = useClient();
   const fallbackValue = keyToFallback(identity.identityKey);
   const { t } = useTranslation('os');
   const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
@@ -58,7 +60,7 @@ const IdentityHeading = ({
   const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
   const { textValue, setTextValue } = useClipboardContext();
   const identityHex = identity.identityKey.toHex();
-  const copied = textValue === identityHex;
+  const publicKeyCopied = textValue === identityHex;
 
   const setEmoji = (nextEmoji: string) => {
     setEmojiDirectly(nextEmoji);
@@ -70,9 +72,15 @@ const IdentityHeading = ({
     void onUpdateProfile?.({ ...identity.profile, data: { ...identity.profile?.data, hue: nextHue } });
   };
 
-  const isConnected = connectionState === ConnectionState.ONLINE;
+  const handleRecoveryCode = async () => {
+    invariant(client.services.services.IdentityService, 'IdentityService not available');
+    // TODO(wittjosiah): This needs a proper api.
+    const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+    void setTextValue(seedphrase);
+  };
 
-  const debug = true;
+  const isConnected = connectionState === ConnectionState.ONLINE;
+  const isProduction = client.config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production';
 
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
@@ -103,47 +111,61 @@ const IdentityHeading = ({
         <Toolbar.Root classNames='flex justify-center items-center gap-1 pt-3'>
           <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
           <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
-          {debug && (
-            <>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Toolbar.Button
-                    classNames='bs-[--rail-action]'
-                    data-testid='update-profile-form-copy-key'
-                    onClick={() => setTextValue(identityHex)}
-                  >
-                    <span className='sr-only'>{t(copied ? 'copy success label' : 'copy self public key label')}</span>
-                    <Key className={getSize(5)} />
-                  </Toolbar.Button>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content side='bottom' classNames='z-50'>
-                    {t(copied ? 'copy success label' : 'copy self public key label')}
-                    <Tooltip.Arrow />
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Toolbar.Button
-                      classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
-                      onClick={() =>
-                        onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
-                      }
-                    >
-                      <span className='sr-only'>{t(isConnected ? 'disconnect label' : 'connect label')}</span>
-                      {isConnected ? <PlugsConnected className={getSize(5)} /> : <Plugs className={getSize(5)} />}
-                    </Toolbar.Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Portal>
-                    <Tooltip.Content side='bottom' classNames='z-50'>
-                      {t(isConnected ? 'disconnect label' : 'connect label')}
-                      <Tooltip.Arrow />
-                    </Tooltip.Content>
-                  </Tooltip.Portal>
-                </Tooltip.Root>
-              </Tooltip.Root>
-            </>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames='bs-[--rail-action]'
+                data-testid='update-profile-form-copy-key'
+                onClick={() => setTextValue(identityHex)}
+              >
+                <span className='sr-only'>
+                  {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
+                </span>
+                <Key className={getSize(5)} />
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(publicKeyCopied ? 'copy success label' : 'copy self public key label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          {/* TODO(wittjosiah): Remove. This should have its own flow. */}
+          {!isProduction && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Toolbar.Button classNames='bs-[--rail-action]' onClick={handleRecoveryCode}>
+                  <FirstAidKit className={getSize(5)} />
+                </Toolbar.Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side='bottom' classNames='z-50'>
+                  {t('create recovery code label')}
+                  <Tooltip.Arrow />
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
           )}
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames={['bs-[--rail-action]', !isConnected && 'text-error-500']}
+                onClick={() =>
+                  onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
+                }
+              >
+                <span className='sr-only'>{t(isConnected ? 'disconnect label' : 'connect label')}</span>
+                {isConnected ? <PlugsConnected className={getSize(5)} /> : <Plugs className={getSize(5)} />}
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(isConnected ? 'disconnect label' : 'connect label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
         </Toolbar.Root>
       </Avatar.Root>
     </Heading>
@@ -157,6 +179,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     activeView,
     onUpdateProfile,
     onResetStorage,
+    onRecover,
     onJoinNewIdentity,
     IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser,
     InvitationManager: InvitationManagerComponent = InvitationManager,
@@ -207,6 +230,15 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
               onCancel={onCancelReset}
             />
           </Viewport.View>
+          <Viewport.View classNames={viewStyles} id='confirm recover'>
+            <ConfirmReset
+              active={activeView === 'confirm recover'}
+              {...rest}
+              mode='recover'
+              onConfirm={onRecover}
+              onCancel={onCancelReset}
+            />
+          </Viewport.View>
           <Viewport.View classNames={viewStyles} id='confirm reset storage'>
             <ConfirmReset
               active={activeView === 'confirm reset storage'}
@@ -270,6 +302,8 @@ export const IdentityPanel = ({
         return 'device invitation manager';
       case identityState.matches('confirmingResetStorage'):
         return 'confirm reset storage';
+      case identityState.matches('confirmingRecover'):
+        return 'confirm recover';
       case identityState.matches('confirmingJoinNewIdentity'):
         return 'confirm join new identity';
       default:

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

@@ -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

@@ -32,7 +32,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;
@@ -144,7 +144,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

@@ -44,7 +44,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));
     });
@@ -56,7 +55,6 @@ test.describe('Invitations', () => {
 
       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 +70,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 +96,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 +140,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));
     });
@@ -167,7 +162,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));
     });
@@ -186,7 +180,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));
@@ -202,11 +195,9 @@ test.describe('Invitations', () => {
       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);
     });
@@ -220,7 +211,6 @@ test.describe('Invitations', () => {
       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 +232,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 +261,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 +311,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));
@@ -349,7 +336,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));
@@ -380,8 +366,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/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',
 };