@dxos/react-ui 0.1.35 → 0.1.36-next.ef27157

package/src/panels/JoinPanel/joinMachine.ts

@@ -15,7 +15,7 @@ import { JoinPanelMode } from './JoinPanelProps';
 
 type FailReason = 'error' | 'timeout' | 'cancelled' | 'badVerificationCode';
 
-type InvitationDomainContext = Partial<{
+type InvitationKindContext = Partial<{
   failReason: FailReason | null;
   unredeemedCode: string;
   invitationObservable: AuthenticatingInvitationObservable;
@@ -26,8 +26,8 @@ type InvitationDomainContext = Partial<{
 type JoinMachineContext = {
   mode: JoinPanelMode;
   identity: Identity | null;
-  halo: InvitationDomainContext;
-  space: InvitationDomainContext;
+  halo: InvitationKindContext;
+  space: InvitationKindContext;
 };
 
 type SelectIdentityEvent = {
@@ -42,12 +42,16 @@ type SetInvitationCodeEvent = {
 
 type SetInvitationEvent = {
   type:
-    | 'authenticateHaloInvitation'
-    | 'authenticateSpaceInvitation'
-    | 'connectHaloInvitation'
-    | 'connectSpaceInvitation'
-    | 'connectionSuccessHaloInvitation'
-    | 'connectionSuccessSpaceInvitation';
+    | 'authenticatingHaloInvitation'
+    | 'authenticatingSpaceInvitation'
+    | 'readyForAuthenticationHaloInvitation'
+    | 'readyForAuthenticationSpaceInvitation'
+    | 'connectingHaloInvitation'
+    | 'connectingSpaceInvitation'
+    | 'connectedHaloInvitation'
+    | 'connectedSpaceInvitation'
+    | 'successHaloInvitation'
+    | 'successSpaceInvitation';
   invitation: Invitation;
 };
 
@@ -61,15 +65,13 @@ type EmptyInvitationEvent = {
     | 'authenticateHaloVerificationCode'
     | 'authenticateSpaceVerificationCode'
     | 'resetHaloInvitation'
-    | 'resetSpaceInvitation'
-    | 'succeedHaloInvitation'
-    | 'succeedSpaceInvitation';
+    | 'resetSpaceInvitation';
 };
 
 type InvitationEvent = FailInvitationEvent | SetInvitationCodeEvent | SetInvitationEvent | EmptyInvitationEvent;
 
 const getInvitationSubscribable = (
-  Domain: 'Space' | 'Halo',
+  Kind: 'Space' | 'Halo',
   invitation: AuthenticatingInvitationObservable
 ): Subscribable<InvitationEvent> => {
   log('[subscribing to invitation]', invitation);
@@ -78,135 +80,146 @@ const getInvitationSubscribable = (
       next: (value: InvitationEvent) => void,
       onError?: (error: any) => void,
       complete?: () => void
-    ): Subscription => {
-      const unsubscribe = invitation.subscribe({
-        onAuthenticating: (invitation: Invitation) => {
-          log('[invitation authenticating]', { Domain, invitation });
-          return next({ type: `authenticate${Domain}Invitation`, invitation });
-        },
-        onCancelled: () => {
-          log.warn('[invitation cancelled]', { Domain });
-          return next({ type: `fail${Domain}Invitation`, reason: 'cancelled' } as FailInvitationEvent);
-        },
-        onTimeout: () => {
-          log.error('[invitation timeout]', { Domain });
-          return next({ type: `fail${Domain}Invitation`, reason: 'timeout' } as FailInvitationEvent);
-        },
-        onConnecting: (invitation: Invitation) => {
-          log('[invitation connecting]', { Domain, invitation });
-          return next({ type: `connect${Domain}Invitation`, invitation });
-        },
-        onConnected: (invitation: Invitation) => {
-          log('[invitation connected]', { Domain, invitation });
-          return next({ type: `connectionSuccess${Domain}Invitation`, invitation });
-        },
-        onSuccess: () => {
-          log('[invitation success]', { Domain });
-          next({ type: `succeed${Domain}Invitation` });
-          return complete?.();
+    ): Subscription =>
+      invitation.subscribe(
+        (invitation: Invitation) => {
+          switch (invitation.state) {
+            case Invitation.State.CONNECTING: {
+              log('[invitation connecting]', { Kind, invitation });
+              return next({ type: `connecting${Kind}Invitation`, invitation });
+            }
+
+            case Invitation.State.CONNECTED: {
+              log('[invitation connected]', { Kind, invitation });
+              return next({ type: `connected${Kind}Invitation`, invitation });
+            }
+
+            case Invitation.State.READY_FOR_AUTHENTICATION: {
+              log('[invitation ready for authentication]', { Kind, invitation });
+              return next({ type: `readyForAuthentication${Kind}Invitation`, invitation });
+            }
+
+            case Invitation.State.AUTHENTICATING: {
+              log('[invitation authenticating]', { Kind, invitation });
+              return next({ type: `authenticating${Kind}Invitation`, invitation });
+            }
+
+            case Invitation.State.SUCCESS: {
+              log('[invitation success]', { Kind, invitation });
+              next({ type: `success${Kind}Invitation`, invitation });
+              return complete?.();
+            }
+
+            case Invitation.State.CANCELLED: {
+              log.warn('[invitation cancelled]', { Kind });
+              return next({ type: `fail${Kind}Invitation`, reason: 'cancelled' } as FailInvitationEvent);
+            }
+
+            case Invitation.State.TIMEOUT: {
+              log.error('[invitation timeout]', { Kind });
+              return next({ type: `fail${Kind}Invitation`, reason: 'timeout' } as FailInvitationEvent);
+            }
+          }
         },
-        onError: (error: any) => {
-          log.error('[invitation errored]', { Domain, error });
-          next({ type: `fail${Domain}Invitation`, reason: 'error' });
+        (error: any) => {
+          log.error('[invitation errored]', { Kind, error });
+          next({ type: `fail${Kind}Invitation`, reason: 'error' });
           return onError?.(error);
         }
-      });
-      return { unsubscribe };
-    }
+      )
   } as Subscribable<InvitationEvent>;
 };
 
-const acceptingInvitationTemplate = (Domain: 'Space' | 'Halo', successTarget: string) => {
+const acceptingInvitationTemplate = (Kind: 'Space' | 'Halo', successTarget: string) => {
   const config: StateNodeConfig<JoinMachineContext, any, InvitationEvent> = {
-    initial: `unknown${Domain}`,
+    initial: `unknown${Kind}`,
     states: {
-      [`unknown${Domain}`]: {
+      [`unknown${Kind}`]: {
         always: [
           {
-            cond: ({ mode }) => mode === 'halo-only' && Domain === 'Space',
+            cond: ({ mode }) => mode === 'halo-only' && Kind === 'Space',
             target: '#join.finishingJoiningHalo'
           },
           {
-            // cond: `no${Domain}Invitation`,
-            target: `inputting${Domain}InvitationCode`,
+            // cond: `no${Kind}Invitation`,
+            target: `inputting${Kind}InvitationCode`,
             actions: 'log'
           }
           // todo(thure): Restore this transition that redeems the invitation code on init.
           // {
-          //   target: `acceptingRedeemed${Domain}Invitation`,
-          //   actions: [`redeem${Domain}InvitationCode`, 'log']
+          //   target: `acceptingRedeemed${Kind}Invitation`,
+          //   actions: [`redeem${Kind}InvitationCode`, 'log']
           // }
         ]
       },
-      [`inputting${Domain}InvitationCode`]: {},
-      [`acceptingRedeemed${Domain}Invitation`]: {
+      [`inputting${Kind}InvitationCode`]: {},
+      [`acceptingRedeemed${Kind}Invitation`]: {
         invoke: {
-          src: (context) => context[Domain.toLowerCase() as 'space' | 'halo'].invitationSubscribable!
+          src: (context) => context[Kind.toLowerCase() as 'space' | 'halo'].invitationSubscribable!
         },
-        initial: `unknown${Domain}Invitation`,
+        initial: `unknown${Kind}Invitation`,
         states: {
-          [`unknown${Domain}Invitation`]: {
+          [`unknown${Kind}Invitation`]: {
             always: [
               {
                 cond: (context) => {
-                  const invitation = context[Domain.toLowerCase() as 'space' | 'halo'].invitation;
+                  const invitation = context[Kind.toLowerCase() as 'space' | 'halo'].invitation;
                   return !invitation || invitation?.state === Invitation.State.CONNECTING;
                 },
-                target: `connecting${Domain}Invitation`,
+                target: `connecting${Kind}Invitation`,
                 actions: 'log'
               },
               {
-                target: `inputting${Domain}VerificationCode`,
+                target: `inputting${Kind}VerificationCode`,
                 actions: 'log'
               }
             ]
           },
-          [`connecting${Domain}Invitation`]: {},
-          [`inputting${Domain}VerificationCode`]: {
+          [`connecting${Kind}Invitation`]: {},
+          [`inputting${Kind}VerificationCode`]: {},
+          [`authenticating${Kind}VerificationCode`]: {
             on: {
-              [`authenticate${Domain}VerificationCode`]: {
-                target: `authenticating${Domain}VerificationCode`,
-                actions: 'log'
+              [`readyForAuthentication${Kind}Invitation`]: {
+                target: `authenticationFailing${Kind}VerificationCode`,
+                actions: ['setInvitation', 'log']
               }
             }
           },
-          [`authenticating${Domain}VerificationCode`]: {
-            on: {
-              [`authenticate${Domain}Invitation`]: {
-                target: `authenticationFailing${Domain}VerificationCode`,
-                actions: 'log'
-              }
-            }
-          },
-          [`authenticationFailing${Domain}VerificationCode`]: {},
-          [`failing${Domain}Invitation`]: {},
-          [`success${Domain}Invitation`]: {}
+          [`authenticationFailing${Kind}VerificationCode`]: {},
+          [`failing${Kind}Invitation`]: {},
+          [`success${Kind}Invitation`]: {}
         },
         on: {
-          [`reset${Domain}Invitation`]: {
-            target: `#join${
-              Domain === 'Halo' ? '.choosingIdentity' : ''
-            }.accepting${Domain}Invitation.unknown${Domain}`,
+          [`reset${Kind}Invitation`]: {
+            target: `#join${Kind === 'Halo' ? '.choosingIdentity' : ''}.accepting${Kind}Invitation.unknown${Kind}`,
             actions: ['resetInvitation', 'log']
           },
-          [`connect${Domain}Invitation`]: {
-            target: `.connecting${Domain}Invitation`,
+          [`connecting${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: ['setInvitation', 'log']
+          },
+          [`connected${Kind}Invitation`]: {
+            target: `.connecting${Kind}Invitation`,
+            actions: ['setInvitation', 'log']
+          },
+          [`readyForAuthentication${Kind}Invitation`]: {
+            target: `.inputting${Kind}VerificationCode`,
             actions: ['setInvitation', 'log']
           },
-          [`connectionSuccess${Domain}Invitation`]: {
-            target: `.inputting${Domain}VerificationCode`,
+          [`authenticating${Kind}Invitation`]: {
+            target: `.authenticating${Kind}VerificationCode`,
             actions: ['setInvitation', 'log']
           },
-          [`succeed${Domain}Invitation`]: { target: successTarget, actions: 'log' },
-          [`fail${Domain}Invitation`]: {
-            target: `.failing${Domain}Invitation`,
+          [`success${Kind}Invitation`]: { target: successTarget, actions: ['setInvitation', 'log'] },
+          [`fail${Kind}Invitation`]: {
+            target: `.failing${Kind}Invitation`,
             actions: [
               assign({
-                [Domain.toLowerCase() as 'space' | 'halo']: (
+                [Kind.toLowerCase() as 'space' | 'halo']: (
                   context: JoinMachineContext,
                   event: FailInvitationEvent
                 ) => ({
-                  ...context[Domain.toLowerCase() as 'space' | 'halo'],
+                  ...context[Kind.toLowerCase() as 'space' | 'halo'],
                   failReason: event.reason
                 })
               }),
@@ -217,19 +230,16 @@ const acceptingInvitationTemplate = (Domain: 'Space' | 'Halo', successTarget: st
       }
     },
     on: {
-      [`set${Domain}InvitationCode`]: {
-        target: `.acceptingRedeemed${Domain}Invitation`,
+      [`set${Kind}InvitationCode`]: {
+        target: `.acceptingRedeemed${Kind}Invitation`,
         actions: [
           assign({
-            [Domain.toLowerCase() as 'space' | 'halo']: (
-              context: JoinMachineContext,
-              event: SetInvitationCodeEvent
-            ) => ({
-              ...context[Domain.toLowerCase() as 'space' | 'halo'],
+            [Kind.toLowerCase() as 'space' | 'halo']: (context: JoinMachineContext, event: SetInvitationCodeEvent) => ({
+              ...context[Kind.toLowerCase() as 'space' | 'halo'],
               unredeemedCode: event.code
             })
           }),
-          `redeem${Domain}InvitationCode`,
+          `redeem${Kind}InvitationCode`,
           'log'
         ]
       }

package/src/panels/JoinPanel/view-states/InvitationAccepted.tsx

@@ -12,7 +12,7 @@ import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
 import { ViewState, ViewStateProps } from './ViewState';
 
 export interface InvitationAcceptedProps extends ViewStateProps {
-  Domain: 'Space' | 'Halo';
+  Kind: 'Space' | 'Halo';
   doneActionParent?: Parameters<typeof cloneElement>[0];
   onDone?: (result: InvitationResult | null) => void;
 }
@@ -20,7 +20,7 @@ export interface InvitationAcceptedProps extends ViewStateProps {
 const PureInvitationAcceptedContent = ({
   onDone,
   result,
-  Domain,
+  Kind,
   doneActionParent,
   active
 }: InvitationAcceptedProps & { result: InvitationResult | null }) => {
@@ -32,8 +32,8 @@ const PureInvitationAcceptedContent = ({
       {...(onDone && { onClick: () => onDone(result) })}
       disabled={disabled}
       className='flex items-center gap-2 pli-2'
-      data-autofocus={`success${Domain}Invitation finishingJoining${Domain}`}
-      data-testid={`${Domain.toLowerCase()}-invitation-accepted-done`}
+      data-autofocus={`success${Kind}Invitation finishingJoining${Kind}`}
+      data-testid={`${Kind.toLowerCase()}-invitation-accepted-done`}
     >
       <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
       <span className='grow'>{t('done label')}</span>
@@ -58,9 +58,9 @@ const InvitationAcceptedContent = (
 };
 
 export const InvitationAccepted = (props: InvitationAcceptedProps) => {
-  const { Domain, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
+  const { Kind, doneActionParent: _doneActionParent, onDone: _onDone, ...viewStateProps } = props;
   const activeInvitation =
-    viewStateProps.joinState?.context[Domain.toLowerCase() as 'halo' | 'space'].invitationObservable;
+    viewStateProps.joinState?.context[Kind.toLowerCase() as 'halo' | 'space'].invitationObservable;
 
   return (
     <ViewState {...viewStateProps}>

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -15,7 +15,7 @@ import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 const pinLength = 6;
 
 export interface InvitationAuthenticatorProps extends ViewStateProps {
-  Domain: 'Space' | 'Halo';
+  Kind: 'Space' | 'Halo';
   failed?: boolean;
 }
 
@@ -24,20 +24,20 @@ const PureInvitationAuthenticatorContent = ({
   failed,
   joinSend,
   joinState,
-  Domain,
+  Kind,
   onChange,
   onAuthenticate
 }: {
   disabled?: boolean;
   joinSend: JoinSend;
   joinState?: JoinState;
-  Domain: InvitationAuthenticatorProps['Domain'];
+  Kind: InvitationAuthenticatorProps['Kind'];
   failed: InvitationAuthenticatorProps['failed'];
   onChange: ComponentProps<typeof Input>['onChange'];
   onAuthenticate: ComponentProps<typeof Button>['onClick'];
 }) => {
   const { t } = useTranslation('os');
-  const invitationType = Domain.toLowerCase() as 'space' | 'halo';
+  const invitationType = Kind.toLowerCase() as 'space' | 'halo';
   return (
     <>
       <Input
@@ -54,7 +54,7 @@ const PureInvitationAuthenticatorContent = ({
             inputMode: 'numeric',
             autoComplete: 'off',
             pattern: '\\d*',
-            'data-autofocus': `connecting${Domain}Invitation inputting${Domain}VerificationCode authenticationFailing${Domain}VerificationCode authenticating${Domain}VerificationCode`,
+            '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
@@ -97,21 +97,21 @@ const InvitationAuthenticatorContent = ({
   joinState,
   disabled,
   invitation,
-  Domain,
+  Kind,
   failed
 }: {
   joinSend: JoinSend;
   joinState?: JoinState;
   disabled?: boolean;
   invitation: AuthenticatingInvitationObservable;
-  Domain: InvitationAuthenticatorProps['Domain'];
+  Kind: InvitationAuthenticatorProps['Kind'];
   failed: InvitationAuthenticatorProps['failed'];
 }) => {
-  const invitationType = Domain.toLowerCase();
+  const invitationType = Kind.toLowerCase();
   const [pinValue, setPinValue] = useState('');
   const { authenticate } = useInvitationStatus(invitation);
   const onAuthenticate = useCallback(() => {
-    joinSend({ type: `authenticate${Domain}VerificationCode` });
+    joinSend({ type: `authenticate${Kind}VerificationCode` });
     void authenticate(pinValue);
   }, [joinSend, authenticate, pinValue]);
   const onChange = useCallback(
@@ -125,26 +125,26 @@ const InvitationAuthenticatorContent = ({
   );
   return (
     <PureInvitationAuthenticatorContent
-      {...{ disabled, failed, joinSend, joinState, Domain, onChange, onAuthenticate }}
+      {...{ disabled, failed, joinSend, joinState, Kind, onChange, onAuthenticate }}
     />
   );
 };
 
-export const InvitationAuthenticator = ({ failed, Domain, ...viewStateProps }: InvitationAuthenticatorProps) => {
+export const InvitationAuthenticator = ({ failed, Kind, ...viewStateProps }: InvitationAuthenticatorProps) => {
   const { joinSend, joinState } = viewStateProps;
   const disabled =
     !viewStateProps.active ||
     ['connecting', 'authenticating'].some((str) => joinState?.configuration[0].id.includes(str));
-  const activeInvitation = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].invitationObservable;
+  const activeInvitation = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].invitationObservable;
   return (
     <ViewState {...viewStateProps}>
       {!activeInvitation ? (
         <PureInvitationAuthenticatorContent
-          {...{ disabled, failed, joinSend, joinState, Domain, onChange: () => {}, onAuthenticate: () => {} }}
+          {...{ disabled, failed, joinSend, joinState, Kind, onChange: () => {}, onAuthenticate: () => {} }}
         />
       ) : (
         <InvitationAuthenticatorContent
-          {...{ disabled, failed, invitation: activeInvitation, joinSend, joinState, Domain }}
+          {...{ disabled, failed, invitation: activeInvitation, joinSend, joinState, Kind }}
         />
       )}
     </ViewState>

package/src/panels/JoinPanel/view-states/InvitationInput.tsx

@@ -10,15 +10,15 @@ import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-componen
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface InvitationInputProps extends ViewStateProps {
-  Domain: 'Space' | 'Halo';
+  Kind: 'Space' | 'Halo';
 }
 
-export const InvitationInput = ({ Domain, ...viewStateProps }: InvitationInputProps) => {
+export const InvitationInput = ({ Kind, ...viewStateProps }: InvitationInputProps) => {
   const disabled = !viewStateProps.active;
   const { joinSend, joinState } = viewStateProps;
   const { t } = useTranslation('os');
 
-  const contextUnredeemedCode = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].unredeemedCode;
+  const contextUnredeemedCode = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].unredeemedCode;
 
   const [inputValue, setInputValue] = useState(contextUnredeemedCode ?? '');
 
@@ -28,7 +28,7 @@ export const InvitationInput = ({ Domain, ...viewStateProps }: InvitationInputPr
 
   const handleNext = () =>
     joinSend({
-      type: `set${Domain}InvitationCode`,
+      type: `set${Kind}InvitationCode`,
       code: inputValue
     });
 
@@ -42,8 +42,8 @@ export const InvitationInput = ({ Domain, ...viewStateProps }: InvitationInputPr
         slots={{
           root: { className: 'm-0' },
           input: {
-            'data-autofocus': `inputting${Domain}InvitationCode`,
-            'data-testid': `${Domain.toLowerCase()}-invitation-input`,
+            'data-autofocus': `inputting${Kind}InvitationCode`,
+            'data-testid': `${Kind.toLowerCase()}-invitation-input`,
             onKeyUp: ({ key }) => key === 'Enter' && handleNext()
           } as ComponentPropsWithoutRef<'input'>
         }}
@@ -54,17 +54,17 @@ export const InvitationInput = ({ Domain, ...viewStateProps }: InvitationInputPr
           disabled={disabled}
           className='grow flex items-center gap-2 pli-2 order-2'
           onClick={handleNext}
-          data-testid={`${Domain.toLowerCase()}-invitation-input-continue`}
+          data-testid={`${Kind.toLowerCase()}-invitation-input-continue`}
         >
           <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
           <span className='grow'>{t('continue label')}</span>
           <CaretRight weight='bold' className={getSize(4)} />
         </Button>
         <Button
-          disabled={Domain === 'Space'}
+          disabled={disabled || Kind === 'Space'}
           onClick={() => joinSend({ type: 'deselectAuthMethod' })}
           className='flex items-center gap-2 pis-2 pie-4'
-          data-testid={`${Domain.toLowerCase()}-invitation-input-back`}
+          data-testid={`${Kind.toLowerCase()}-invitation-input-back`}
         >
           <CaretLeft weight='bold' className={getSize(4)} />
           <span>{t('back label')}</span>

package/src/panels/JoinPanel/view-states/InvitationRescuer.tsx

@@ -12,7 +12,7 @@ import { JoinSend, JoinState } from '../joinMachine';
 import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
 
 export interface InvitationConnectorProps extends ViewStateProps {
-  Domain: 'Space' | 'Halo';
+  Kind: 'Space' | 'Halo';
 }
 
 const InvitationActions = ({
@@ -20,16 +20,16 @@ const InvitationActions = ({
   disabled,
   joinSend,
   joinState,
-  Domain
+  Kind
 }: {
   invitationState?: Invitation.State;
   disabled?: boolean;
   joinSend: JoinSend;
   joinState?: JoinState;
-  Domain: InvitationConnectorProps['Domain'];
+  Kind: InvitationConnectorProps['Kind'];
 }) => {
   const { t } = useTranslation('os');
-  const invitationType = Domain.toLowerCase() as 'space' | 'halo';
+  const invitationType = Kind.toLowerCase() as 'space' | 'halo';
   switch (invitationState) {
     case Invitation.State.CONNECTING:
       return (
@@ -73,7 +73,7 @@ const InvitationActions = ({
           <Button
             disabled={disabled}
             className='flex items-center gap-2 pli-2'
-            onClick={() => joinSend({ type: `reset${Domain}Invitation` })}
+            onClick={() => joinSend({ type: `reset${Kind}Invitation` })}
             data-testid='invitation-rescuer-reset'
           >
             <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
@@ -85,10 +85,10 @@ const InvitationActions = ({
   }
 };
 
-export const InvitationRescuer = ({ Domain, ...viewStateProps }: InvitationConnectorProps) => {
+export const InvitationRescuer = ({ Kind, ...viewStateProps }: InvitationConnectorProps) => {
   const disabled = !viewStateProps.active;
   const { joinSend, joinState } = viewStateProps;
-  const invitationState = joinState?.context[Domain.toLowerCase() as 'space' | 'halo'].invitation?.state;
+  const invitationState = joinState?.context[Kind.toLowerCase() as 'space' | 'halo'].invitation?.state;
   const { t } = useTranslation('os');
   return (
     <ViewState {...viewStateProps}>
@@ -98,9 +98,9 @@ export const InvitationRescuer = ({ Domain, ...viewStateProps }: InvitationConne
           <Button
             disabled={disabled}
             className='flex items-center gap-2 pli-2'
-            data-autofocus={`inputting${Domain}InvitationCode`}
+            data-autofocus={`inputting${Kind}InvitationCode`}
             data-testid='invitation-rescuer-blank-reset'
-            onClick={() => joinSend({ type: `reset${Domain}Invitation` })}
+            onClick={() => joinSend({ type: `reset${Kind}Invitation` })}
           >
             <CaretLeft weight='bold' className={mx(getSize(5), 'invisible')} />
             <span className='grow'>{t('reset label')}</span>
@@ -108,7 +108,7 @@ export const InvitationRescuer = ({ Domain, ...viewStateProps }: InvitationConne
           </Button>
         </>
       ) : (
-        <InvitationActions {...{ invitationState, disabled, joinSend, joinState, Domain }} />
+        <InvitationActions {...{ invitationState, disabled, joinSend, joinState, Kind }} />
       )}
     </ViewState>
   );

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -3,9 +3,9 @@
 //
 
 import { UserPlus } from '@phosphor-icons/react';
-import React, { cloneElement, useReducer } from 'react';
+import React, { cloneElement, useCallback, useReducer } from 'react';
 
-import { Space } from '@dxos/client';
+import { Invitation, InvitationEncoder, Space } from '@dxos/client';
 import { useSpaceInvitations, observer } from '@dxos/react-client';
 import { Button, DensityProvider, getSize, mx, useTranslation } from '@dxos/react-components';
 
@@ -27,10 +27,20 @@ const CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }: Spac
   const invitations = useSpaceInvitations(space?.key);
   const name = space?.properties.name;
 
+  console.log('[space panel]', process.env.NODE_ENV);
+
   if (!space) {
     return null;
   }
 
+  const onInvitationEvent = useCallback((invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    console.log(JSON.stringify({ invitationCode }));
+    if (invitation.authCode) {
+      console.log(JSON.stringify({ authCode: invitation.authCode }));
+    }
+  }, []);
+
   return (
     <div role='none' className='flex flex-col'>
       <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
@@ -42,12 +52,17 @@ const CurrentSpaceView = observer(({ space, createInvitationUrl, titleId }: Spac
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList
           invitations={invitations}
-          onClickRemove={({ invitation }) => invitation && space?.removeInvitation(invitation.invitationId!)}
+          onClickRemove={(invitation) => invitation.get() && space?.removeInvitation(invitation.get().invitationId)}
           createInvitationUrl={createInvitationUrl}
         />
         <Button
           className='is-full flex gap-2 mbs-2'
-          onClick={() => space?.createInvitation()}
+          onClick={() => {
+            const invitation = space?.createInvitation();
+            if (process.env.NODE_ENV !== 'production') {
+              invitation.subscribe(onInvitationEvent);
+            }
+          }}
           data-testid='spaces-panel.create-invitation'
         >
           <span>{t('create space invitation label')}</span>