@dxos/shell 0.6.13 → 0.6.14-main.1366248

package/src/panels/IdentityPanel/useKubeAgentHandlers.ts

@@ -0,0 +1,128 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { useClient, useAgentHostingClient } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+
+import { type AgentFormProps } from '../../components';
+
+export const useKubeAgentHandlers = ({
+  invitations,
+  identity,
+}: {
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}): AgentFormProps => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [agentStatus, setAgentStatus] = useState<AgentFormProps['agentStatus']>('getting');
+  const agentHostingProviderClient = useAgentHostingClient();
+  const client = useClient();
+
+  const updateAgentStatus = async () => {
+    // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
+    if (agentHostingProviderClient) {
+      setAgentStatus('getting');
+      try {
+        const agentId = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'never');
+        if (agentId) {
+          setAgentStatus('created');
+        } else {
+          setAgentStatus('creatable');
+        }
+      } catch (err: any) {
+        setAgentStatus('error');
+        setValidationMessage(`Couldn’t check agent status: ${err.message}`);
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  const createAgent = async (invitationCode: string) => {
+    invariant(identity, 'Identity not found');
+    if (agentHostingProviderClient) {
+      setAgentStatus('creating');
+      setValidationMessage('');
+      try {
+        const agentId = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+        if (agentId) {
+          setAgentStatus('created');
+        } else {
+          setAgentStatus('creatable');
+          setValidationMessage('Error creating agent.');
+        }
+      } catch (err: any) {
+        setValidationMessage(`Error creating agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  const destroyAgent = async () => {
+    invariant(identity, 'Identity not found');
+    if (agentHostingProviderClient) {
+      setAgentStatus('destroying');
+      setValidationMessage('');
+      try {
+        await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+        setAgentStatus('creatable');
+      } catch (err: any) {
+        setValidationMessage(`Error destroying agent: ${err.message}`);
+        return updateAgentStatus();
+      }
+    } else {
+      setAgentStatus('error');
+      setValidationMessage('No agent provider configured.');
+    }
+  };
+
+  useEffect(() => {
+    void updateAgentStatus();
+  }, []);
+
+  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      return createAgent(invitationCode);
+    }
+  }, []);
+
+  const onAgentCreate = async () => {
+    invitations.forEach((invitation) => invitation.cancel());
+
+    // TODO(nf): do this work in the hosting provider client?
+    const invitation = client.halo.share({
+      type: Invitation.Type.INTERACTIVE,
+      authMethod: Invitation.AuthMethod.NONE,
+      multiUse: true,
+    });
+
+    invitation.subscribe(handleAgentCreate);
+  };
+
+  const onAgentRefresh = async () => {
+    setValidationMessage('');
+    await updateAgentStatus();
+  };
+
+  return {
+    onAgentCreate,
+    onAgentDestroy: destroyAgent,
+    onAgentRefresh,
+    validationMessage,
+    agentStatus,
+    agentHostingEnabled: !!agentHostingProviderClient,
+  };
+};

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

@@ -13,6 +13,7 @@ import { type JoinPanelImplProps } from './JoinPanelProps';
 import { IdentityInputImpl } from './steps';
 import { StorybookDialog } from '../../components/StorybookDialog';
 import { ConfirmResetImpl } from '../../steps';
+import { osTranslations as translations } from '../../translations';
 
 const noOpProps: JoinPanelImplProps = {
   titleId: 'storybookJoinPanel__title',
@@ -29,10 +30,10 @@ const JoinDialog = (args: Partial<JoinPanelImplProps>) => (
 );
 
 export default {
-  title: 'react-shell/JoinPanel',
+  title: 'sdk/shell/JoinPanel',
   component: JoinDialog,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  parameters: { translations, chromatic: { disableSnapshot: false } },
 };
 
 export const AdditionMethodChooser = () => <JoinDialog mode='halo-only' activeView='addition method chooser' />;

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { useIdentity } from '@dxos/react-client/halo';
-import { DensityProvider, useId, useThemeContext } from '@dxos/react-ui';
+import { useId, useThemeContext } from '@dxos/react-ui';
 
 import { JoinHeading } from './JoinHeading';
 import { type JoinPanelImplProps, type JoinPanelProps } from './JoinPanelProps';
@@ -16,7 +16,6 @@ import {
   AdditionMethodChooser,
   IdentityAdded,
   IdentityInput,
-  InvitationAccepted,
   InvitationAuthenticator,
   InvitationInput,
   InvitationRescuer,
@@ -35,11 +34,12 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
     unredeemedCodes,
     invitationIds,
     invitationStates,
+    invitationAuthMethods,
     succeededKeys,
     failReasons,
     onExit,
     onHaloDone,
-    onSpaceDone,
+    // onSpaceDone,
     exitActionParent,
     doneActionParent,
     onHaloInvitationCancel,
@@ -52,7 +52,7 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
     ConfirmReset: ConfirmResetComponent = ConfirmReset,
   } = props;
   return (
-    <DensityProvider density='fine'>
+    <>
       {mode !== 'halo-only' && <JoinHeading {...{ titleId, mode, onExit, exitActionParent }} />}
       <Viewport.Root focusManaged activeView={activeView}>
         <Viewport.Views>
@@ -105,13 +105,14 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
               send={send}
               Kind='Halo'
               invitationId={invitationIds?.Halo}
+              authMethod={invitationAuthMethods?.Halo}
               active={activeView === 'halo invitation authenticator'}
               onInvitationCancel={onHaloInvitationCancel}
               onInvitationAuthenticate={onHaloInvitationAuthenticate}
               {...(failed.has('Halo') && { failed: true })}
             />
           </Viewport.View>
-          <Viewport.View classNames={stepStyles} id='halo invitation accepted'>
+          {/* <Viewport.View classNames={stepStyles} id='halo invitation accepted'>
             <InvitationAccepted
               {...{
                 send,
@@ -121,7 +122,7 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
                 onDone: onHaloDone,
               }}
             />
-          </Viewport.View>
+          </Viewport.View> */}
           <Viewport.View classNames={stepStyles} id='identity added'>
             <IdentityAdded
               {...{ send, mode, active: activeView === 'identity added', doneActionParent, onDone: onHaloDone }}
@@ -153,13 +154,14 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
               send={send}
               Kind='Space'
               invitationId={invitationIds?.Space}
+              authMethod={invitationAuthMethods?.Space}
               active={activeView === 'space invitation authenticator'}
               onInvitationCancel={onSpaceInvitationCancel}
               onInvitationAuthenticate={onSpaceInvitationAuthenticate}
               {...(failed.has('Space') && { failed: true })}
             />
           </Viewport.View>
-          <Viewport.View classNames={stepStyles} id='space invitation accepted'>
+          {/* <Viewport.View classNames={stepStyles} id='space invitation accepted'>
             <InvitationAccepted
               {...{
                 send,
@@ -169,10 +171,10 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
                 onDone: onSpaceDone,
               }}
             />
-          </Viewport.View>
+          </Viewport.View> */}
         </Viewport.Views>
       </Viewport.Root>
-    </DensityProvider>
+    </>
   );
 };
 
@@ -315,6 +317,17 @@ export const JoinPanel = ({
     }
   }, [joinState]);
 
+  useEffect(() => {
+    switch (activeView) {
+      case 'halo invitation accepted':
+        onHaloDone();
+        break;
+      case 'space invitation accepted':
+        onSpaceDone();
+        break;
+    }
+  }, [activeView]);
+
   const failed = useMemo(() => {
     const result: JoinPanelImplProps['failed'] = new Set();
     switch (true) {
@@ -363,6 +376,14 @@ export const JoinPanel = ({
     [joinState],
   );
 
+  const invitationAuthMethods = useMemo(
+    () => ({
+      Halo: joinState.context.halo.invitationObservable?.get().authMethod,
+      Space: joinState.context.space.invitationObservable?.get().authMethod,
+    }),
+    [joinState],
+  );
+
   const invitationIds = useMemo(
     () => ({
       Halo: joinState.context.halo.invitationObservable?.get().invitationId,
@@ -418,6 +439,7 @@ export const JoinPanel = ({
         unredeemedCodes,
         invitationIds,
         invitationStates,
+        invitationAuthMethods,
         succeededKeys,
         identity,
         onExit,

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type cloneElement } from 'react';
+import { type FC, type cloneElement } from 'react';
 
 import type { Identity } from '@dxos/react-client/halo';
 import type { Invitation, AuthenticatingInvitationObservable, InvitationResult } from '@dxos/react-client/invitations';
@@ -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;
@@ -55,6 +55,10 @@ export type JoinPanelImplProps = Pick<
     Halo: Invitation.State;
     Space: Invitation.State;
   }>;
+  invitationAuthMethods?: Partial<{
+    Halo: Invitation.AuthMethod;
+    Space: Invitation.AuthMethod;
+  }>;
   succeededKeys?: Partial<{
     Halo: Set<string>;
     Space: Set<string>;
@@ -71,8 +75,8 @@ export type JoinPanelImplProps = Pick<
   onSpaceInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
   onConfirmResetStorage?: () => Promise<void>;
   onCancelResetStorage?: () => void;
-  IdentityInput?: React.FC<IdentityInputProps>;
-  ConfirmReset?: React.FC<ConfirmResetProps>;
+  IdentityInput?: FC<IdentityInputProps>;
+  ConfirmReset?: FC<ConfirmResetProps>;
 };
 
 export interface IdentityAction {

package/src/panels/JoinPanel/joinMachine.ts

@@ -312,10 +312,16 @@ 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' },
         ],
       },
+      // TODO(wittjosiah): Remove.
       choosingIdentity: {
         initial: 'unknownAuthMethod',
         states: {
@@ -343,6 +349,7 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
           deselectAuthMethod: { target: '.choosingAuthMethod', actions: 'log' },
         },
       },
+      // TODO(wittjosiah): Factor out to a machine handling recovery and device invitations.
       resettingIdentity: {},
       acceptingSpaceInvitation: acceptingInvitationTemplate('Space', '#join.finishingJoiningSpace'),
       finishingJoiningSpace: {
@@ -362,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/JoinPanel/steps/InvitationAuthenticator.tsx

@@ -4,7 +4,9 @@
 
 import React, { type ChangeEvent, useState } from 'react';
 
+import { Invitation } from '@dxos/react-client/invitations';
 import { Input, useTranslation } from '@dxos/react-ui';
+import { descriptionText } from '@dxos/react-ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
 import { Actions, Action, Emoji, StepHeading, Label } from '../../../components';
@@ -14,6 +16,7 @@ const pinLength = 6;
 
 export interface InvitationAuthenticatorProps extends JoinStepProps {
   Kind: 'Space' | 'Halo';
+  authMethod?: Invitation.AuthMethod;
   failed?: boolean;
   pending?: boolean;
   invitationId?: string;
@@ -24,6 +27,7 @@ export interface InvitationAuthenticatorProps extends JoinStepProps {
 export const InvitationAuthenticator = ({
   failed,
   Kind,
+  authMethod,
   active,
   pending,
   invitationId,
@@ -51,22 +55,31 @@ export const InvitationAuthenticator = ({
           })}
         >
           <Input.Label asChild>
-            <StepHeading>{t('auth code input label')}</StepHeading>
+            {authMethod === Invitation.AuthMethod.SHARED_SECRET ? (
+              <StepHeading>{t('auth code input label')}</StepHeading>
+            ) : (
+              <>
+                <StepHeading className={descriptionText}>{t('authenticating label')}</StepHeading>
+                <div role='none' className='grow' />
+              </>
+            )}
           </Input.Label>
-          <Input.PinInput
-            {...{
-              disabled,
-              length: pinLength,
-              onChange,
-              inputMode: 'numeric',
-              autoComplete: 'off',
-              pattern: '\\d*',
-              'data-autofocus': `connecting${Kind}Invitation inputting${Kind}VerificationCode authenticationFailing${Kind}VerificationCode authenticating${Kind}VerificationCode`,
-              'data-prevent-ios-autofocus': true,
-              'data-testid': `${invitationType}-auth-code-input`,
-              'data-1p-ignore': true,
-            }}
-          />
+          {authMethod === Invitation.AuthMethod.SHARED_SECRET && (
+            <Input.PinInput
+              {...{
+                disabled,
+                length: pinLength,
+                onChange,
+                inputMode: 'numeric',
+                autoComplete: 'off',
+                pattern: '\\d*',
+                'data-autofocus': `connecting${Kind}Invitation inputting${Kind}VerificationCode authenticationFailing${Kind}VerificationCode authenticating${Kind}VerificationCode`,
+                'data-prevent-ios-autofocus': true,
+                'data-testid': `${invitationType}-auth-code-input`,
+                'data-1p-ignore': true,
+              }}
+            />
+          )}
           {failed && (
             <Input.DescriptionAndValidation classNames='text-center'>
               <Input.Validation>{t('failed to authenticate message')}</Input.Validation>
@@ -74,7 +87,7 @@ export const InvitationAuthenticator = ({
           )}
         </Input.Root>
 
-        {invitationId && (
+        {invitationId && authMethod === Invitation.AuthMethod.SHARED_SECRET && (
           <>
             <Label>{t('auth other device emoji message')}</Label>
             <div className='flex justify-center'>

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

@@ -78,25 +78,17 @@ export const InvitationInput = (props: InvitationInputProps) => {
         />
       </div>
       <Actions>
-        {Kind === 'Halo' ? (
-          <Action
-            variant='ghost'
-            disabled={disabled}
-            onClick={() => send({ type: 'deselectAuthMethod' })}
-            data-testid={`${Kind.toLowerCase()}-invitation-input-back`}
-          >
-            {t('back label')}
-          </Action>
-        ) : exitActionParent ? (
-          cloneElement(exitActionParent, {}, exitAction)
-        ) : doneActionParent ? (
-          cloneElement(doneActionParent, {}, exitAction)
-        ) : (
-          exitAction
-        )}
+        {/* TODO(wittjosiah): This disables returning to deprecated identity creation flow. */}
+        {Kind === 'Halo'
+          ? null
+          : exitActionParent
+            ? cloneElement(exitActionParent, {}, exitAction)
+            : doneActionParent
+              ? cloneElement(doneActionParent, {}, exitAction)
+              : exitAction}
         <Action
           variant='primary'
-          disabled={disabled}
+          disabled={disabled || inputValue.trim().length === 0}
           onClick={handleNext}
           data-testid={`${Kind.toLowerCase()}-invitation-input-continue`}
         >

package/src/panels/Panels.stories.tsx

@@ -53,7 +53,7 @@ export const Default = (props: any) => {
 Default.parameters = { layout: 'fullscreen' };
 
 export default {
-  title: '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: 'react-shell/SpacePanel',
+  title: 'sdk/shell/SpacePanel',
   component: SpacePanelImpl,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo } from 'react';
 import { log } from '@dxos/log';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
-import { DensityProvider, useId, useTranslation } from '@dxos/react-ui';
+import { useId, useTranslation } from '@dxos/react-ui';
 
 import { type SpacePanelHeadingProps, type SpacePanelImplProps, type SpacePanelProps } from './SpacePanelProps';
 import { useSpaceMachine } from './spaceMachine';
@@ -46,7 +46,7 @@ export const SpacePanelImpl = (props: SpacePanelImplProps) => {
   } = props;
 
   return (
-    <DensityProvider density='fine'>
+    <>
       <SpacePanelHeading {...rest} {...{ titleId, space }} />
       <Viewport.Root activeView={activeView}>
         <Viewport.Views>
@@ -62,7 +62,7 @@ export const SpacePanelImpl = (props: SpacePanelImplProps) => {
           </Viewport.View>
         </Viewport.Views>
       </Viewport.Root>
-    </DensityProvider>
+    </>
   );
 };
 

package/src/panels/SpacePanel/SpacePanelProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type cloneElement } from 'react';
+import { type FC, type cloneElement } from 'react';
 import { type SingleOrArray, type Event } from 'xstate';
 
 import { type Space } from '@dxos/react-client/echo';
@@ -23,9 +23,9 @@ export type SpacePanelImplProps = {
   authCode?: string;
   onDone?: () => void;
   doneActionParent?: Parameters<typeof cloneElement>[0];
-  DoneAction?: React.FC;
-  SpaceManager?: React.FC<SpaceManagerProps>;
-  InvitationManager?: React.FC<InvitationManagerProps>;
+  DoneAction?: FC;
+  SpaceManager?: FC<SpaceManagerProps>;
+  InvitationManager?: FC<InvitationManagerProps>;
 };
 
 export type SpacePanelProps = Pick<SpacePanelImplProps, 'space'> &

package/src/playwright/invitations-manager.ts

@@ -2,14 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { Browser, ConsoleMessage } from '@playwright/test';
-import { expect } from 'chai';
-import waitForExpect from 'wait-for-expect';
+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/playwright';
+import { setupPage } from '@dxos/test-utils/playwright';
 
 import { ScopedShellManager } from '../testing';
 
@@ -34,12 +31,12 @@ export class InvitationsManager extends ScopedShellManager {
     }
 
     const { page } = await setupPage(this._browser, {
-      url: storybookUrl('invitations--default'),
-      waitFor: (page) => page.getByTestId('invitations.identity-header').first().isVisible(),
+      url: storybookUrl('sdk-shell-invitations--default'),
     });
 
     this.page = page;
     this.page.on('console', (message) => this._onConsoleMessage(message));
+    await this.page.getByTestId('invitations.identity-header').first().waitFor({ state: 'visible' });
     this._initialized = true;
   }
 
@@ -58,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;
     }
   }
 
@@ -119,9 +116,7 @@ export class InvitationsManager extends ScopedShellManager {
     const createIdentity = this.peer(id).getByTestId('invitations.create-identity');
     // TODO(wittjosiah): Clicking on buttons wrapped in tooltips is flaky in webkit playwright.
     await createIdentity.click();
-    await waitForExpect(async () => {
-      expect(await createIdentity.isDisabled()).to.be.true;
-    });
+    await expect(createIdentity).toBeDisabled();
   }
 
   async createSpace(id: number) {
@@ -148,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) {