@dxos/shell 0.3.11-main.ec7a2b3 → 0.3.11-main.ee2b64c

package/dist/types/src/testing/shell-manager.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShellManager = void 0;
 const async_1 = require("@dxos/async");
 const scoped_shell_manager_1 = require("./scoped-shell-manager");
+// TODO(wittjosiah): Normalize data-testids between snake and camel case.
 class ShellManager extends scoped_shell_manager_1.ScopedShellManager {
     // prettier-ignore
     constructor(page, inIFrame = true) {
@@ -20,6 +21,9 @@ class ShellManager extends scoped_shell_manager_1.ScopedShellManager {
         return this.inIFrame ? this.page.frameLocator('data-testid=dxos-shell') : this.page;
     }
     // Getters
+    async getDisplayName() {
+        return this.shell.getByTestId('identityHeading.displayName').textContent();
+    }
     async isCurrentSpaceViewVisible() {
         return await this.shell.getByTestId('current-space-view').isVisible();
     }
@@ -33,24 +37,44 @@ class ShellManager extends scoped_shell_manager_1.ScopedShellManager {
         await this.shell.getByTestId('create-identity-input-continue').click();
         await this.shell.getByTestId('halo-invitation-accepted-done').click();
     }
-    async closeShell() {
-        await this.page.keyboard.press('Escape');
+    async createDeviceInvitation() {
+        this._invitationCode = new async_1.Trigger();
+        this._authCode = new async_1.Trigger();
+        await this.shell.getByTestId('devices-panel.create-invitation').click();
+        return await this._invitationCode.wait();
     }
-    // TODO(wittjosiah): These shortcuts are no longer within the SDK so these commands should live elsewhere.
-    async openCurrentSpace() {
-        await this.page.keyboard.press('Meta+.');
+    async resetDevice() {
+        const handleDialog = async (dialog) => {
+            if (dialog.type() === 'confirm') {
+                await dialog.accept();
+            }
+        };
+        this.page.on('dialog', handleDialog);
+        await this.shell.getByTestId('devices-panel.sign-out').click();
+        await this.shell.getByTestId('sign-out.reset-device').click();
+        this.page.off('dialog', handleDialog);
     }
-    async openSpaceList() {
-        await this.page.keyboard.press('Meta+Shift+>');
+    async joinNewIdentity(invitationCode) {
+        await this.shell.getByTestId('devices-panel.sign-out').click();
+        await this.shell.getByTestId('sign-out.join-new-identity').click();
+        await this.shell.getByTestId('reset-identity-input').fill('CONFIRM');
+        await this.shell.getByTestId('reset-identity-input-confirm').click();
+        await this.shell.getByTestId('identity-chooser.join-identity').click();
+        await this.inputInvitation('device', invitationCode, this.shell);
     }
-    async showAllSpaces() {
-        await this.shell.getByTestId('show-all-spaces').click();
+    async authenticateDevice(authCode, skipDone = true) {
+        // Wait for focus to shift before typing.
+        await (0, async_1.sleep)(1500);
+        await this.authenticateInvitation('device', authCode, this.shell);
+        // TODO(wittjosiah): When "signing out" and joinging a new identity, the done step seems to be skipped.
+        if (!skipDone) {
+            await this.doneInvitation('device', this.shell);
+        }
     }
-    async showCurrentSpace() {
-        await this.shell.getByTestId('show-current-space').click();
+    async closeShell() {
+        await this.page.keyboard.press('Escape');
     }
     async createSpaceInvitation() {
-        await this.openCurrentSpace();
         this._invitationCode = new async_1.Trigger();
         this._authCode = new async_1.Trigger();
         await this.shell.getByTestId('spaces-panel.create-invitation').click();

package/dist/types/src/testing/shell-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell-manager.js","sourceRoot":"","sources":["../../../../src/testing/shell-manager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"shell-manager.js","sourceRoot":"","sources":["../../../../src/testing/shell-manager.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/shell",
-  "version": "0.3.11-main.ec7a2b3",
+  "version": "0.3.11-main.ee2b64c",
   "description": "DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,7 +28,7 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.16.1",
+    "@fluentui/react-tabster": "^9.18.0",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-radio-group": "^1.1.2",
@@ -39,35 +39,35 @@
     "react-qr-rounded": "^1.0.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/async": "0.3.11-main.ec7a2b3",
-    "@dxos/client-protocol": "0.3.11-main.ec7a2b3",
-    "@dxos/client-services": "0.3.11-main.ec7a2b3",
-    "@dxos/debug": "0.3.11-main.ec7a2b3",
-    "@dxos/display-name": "0.3.11-main.ec7a2b3",
-    "@dxos/invariant": "0.3.11-main.ec7a2b3",
-    "@dxos/log": "0.3.11-main.ec7a2b3",
-    "@dxos/react-client": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui-theme": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui-types": "0.3.11-main.ec7a2b3",
-    "@dxos/util": "0.3.11-main.ec7a2b3",
-    "@dxos/rpc-tunnel": "0.3.11-main.ec7a2b3"
+    "@dxos/async": "0.3.11-main.ee2b64c",
+    "@dxos/client-protocol": "0.3.11-main.ee2b64c",
+    "@dxos/client-services": "0.3.11-main.ee2b64c",
+    "@dxos/debug": "0.3.11-main.ee2b64c",
+    "@dxos/display-name": "0.3.11-main.ee2b64c",
+    "@dxos/invariant": "0.3.11-main.ee2b64c",
+    "@dxos/log": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui": "0.3.11-main.ee2b64c",
+    "@dxos/react-client": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui-theme": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui-types": "0.3.11-main.ee2b64c",
+    "@dxos/rpc-tunnel": "0.3.11-main.ee2b64c",
+    "@dxos/util": "0.3.11-main.ee2b64c"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@types/lodash.toarray": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.3.9",
+    "vite": "^5.0.12",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/config": "0.3.11-main.ec7a2b3",
-    "@dxos/react-async": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui-theme": "0.3.11-main.ec7a2b3",
-    "@dxos/storybook-utils": "0.3.11-main.ec7a2b3"
+    "@dxos/config": "0.3.11-main.ee2b64c",
+    "@dxos/react-async": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui-theme": "0.3.11-main.ee2b64c",
+    "@dxos/storybook-utils": "0.3.11-main.ee2b64c"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/IdentityList/SpaceMemberList.tsx

@@ -45,7 +45,7 @@ export const SpaceMemberListImpl = ({ members, onSelect }: SpaceMemberListImplPr
   const { t } = useTranslation('os');
   const visibleMembers = members.filter((member) => member.identity);
   return visibleMembers.length > 0 ? (
-    <List classNames='flex flex-col gap-2'>
+    <List classNames='flex flex-col gap-2' data-testid='space-members-list'>
       {visibleMembers.map((member) => {
         return (
           <IdentityListItem

package/src/components/Panel/Action.tsx

@@ -6,7 +6,7 @@ import { CaretDown, Check, type IconProps, Placeholder } from '@phosphor-icons/r
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { type Dispatch, type FC, forwardRef, type SetStateAction } from 'react';
 
-import { type ButtonProps, Button, type ComponentFragment, DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { type ButtonProps, Button, DropdownMenu, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
 
 export type LargeButtonProps = ButtonProps & {
@@ -26,21 +26,6 @@ export type BifurcatedActionProps = {
   defaultActiveAction?: string;
 } & Omit<LargeButtonProps, 'children' | 'onClick'>;
 
-const buttonColorFragment: ComponentFragment<LargeButtonProps> = (props: LargeButtonProps) => {
-  const resolvedVariant = props.variant ?? 'default';
-  return [
-    !props.disabled
-      ? resolvedVariant === 'default'
-        ? 'bg-neutral-25 hover:bg-white hover:text-primary-500 active:bg-neutral-25 dark:active:bg-neutral-800'
-        : resolvedVariant === 'ghost'
-        ? 'active:bg-neutral-125 dark:active:bg-neutral-800'
-        : resolvedVariant === 'primary'
-        ? 'active:bg-primary-700 dark:active:bg-primary-500'
-        : ''
-      : '',
-  ];
-};
-
 const defaultActions = {
   noopAction: {
     label: 'No-op',
@@ -76,7 +61,7 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
     <div role='none' className={mx('mbs-2 flex gap-px items-center', isFull && 'is-full')}>
       <Button
         {...rest}
-        classNames={['bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none', classNames, ...buttonColorFragment(props)]}
+        classNames={['bs-11 flex-1 min-is-0 flex gap-2 rounded-ie-none', classNames]}
         ref={forwardedRef}
         variant={variant}
         onClick={activeAction.onClick}
@@ -86,7 +71,7 @@ export const BifurcatedAction = forwardRef<HTMLButtonElement, BifurcatedActionPr
       </Button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Button classNames={['bs-11 flex-none rounded-is-none', classNames, ...buttonColorFragment(props)]}>
+          <Button classNames={['bs-11 flex-none rounded-is-none', classNames]}>
             <span className='sr-only'>{t('invite options label')}</span>
             <CaretDown />
           </Button>
@@ -132,7 +117,7 @@ export const Action = forwardRef<HTMLButtonElement, LargeButtonProps>((props, fo
   return (
     <Button
       {...rest}
-      classNames={[isFull && 'is-full', 'bs-11 flex gap-2 mbs-2', ...buttonColorFragment(props), classNames]}
+      classNames={[isFull && 'is-full', 'bs-11 flex gap-2 mbs-2', classNames]}
       ref={forwardedRef}
       variant={variant}
     >

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useMemo } from 'react';
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { type Identity, useIdentity, useDevices } from '@dxos/react-client/halo';
+import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
@@ -18,6 +18,7 @@ import {
 } from './IdentityPanelProps';
 import { useIdentityMachine } from './identityMachine';
 import { AgentForm, DeviceManager, IdentityActionChooser, ProfileForm, SignOutChooser } from './steps';
+import { useAgentHandlers } from './useAgentHandlers';
 import { Viewport, Heading, CloseButton } from '../../components';
 import { InvitationManager } from '../../steps';
 
@@ -31,7 +32,7 @@ const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHead
         <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
           <Avatar.Fallback href={fallbackHref} />
         </Avatar.Frame>
-        <Avatar.Label classNames='block text-center font-light text-xl'>
+        <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}
         </Avatar.Label>
       </Avatar.Root>
@@ -99,7 +100,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
             />
           </Viewport.View>
           <Viewport.View classNames={viewStyles} id='agent manager'>
-            <AgentForm send={rest.send} active={activeView === 'agent manager'} identity={identity} />
+            <AgentForm send={rest.send} active={activeView === 'agent manager'} {...rest} />
           </Viewport.View>
         </Viewport.Views>
       </Viewport.Root>
@@ -124,6 +125,8 @@ export const IdentityPanel = ({
   const client = useClient();
   const devices = useDevices();
   const identity = useIdentity();
+  const invitations = useHaloInvitations();
+  const agentProps = useAgentHandlers({ client, identity, invitations });
   if (!identity) {
     console.error('IdentityPanel rendered with no active identity.');
     return null;
@@ -171,6 +174,7 @@ export const IdentityPanel = ({
     titleId,
     createInvitationUrl,
     onUpdateProfile,
+    ...agentProps,
   } satisfies IdentityPanelImplProps;
 
   return identityState.context.invitation ? (

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -11,6 +11,15 @@ import type { InvitationStatus } from '@dxos/react-client/invitations';
 import type { IdentityEvent } from './identityMachine';
 import type { InvitationManagerProps } from '../../steps';
 
+export type AgentFormProps = {
+  onAgentCreate?: () => Promise<void>;
+  onAgentDestroy?: () => Promise<void>;
+  agentStatus?: string;
+  agentActive?: boolean;
+  agentProviderDisabled?: boolean;
+  validationMessage?: string;
+};
+
 export type IdentityPanelImplProps = {
   titleId: string;
   activeView:
@@ -32,7 +41,8 @@ export type IdentityPanelImplProps = {
   invitationUrl?: string;
   IdentityActionChooser?: React.FC<IdentityPanelStepProps>;
   InvitationManager?: React.FC<InvitationManagerProps>;
-} & Partial<InvitationStatus>;
+} & Partial<InvitationStatus> &
+  Partial<AgentFormProps>;
 
 export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | 'activeView' | 'identity'>>;
 

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

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+
+import { Action, Actions, StepHeading, Input } from '../../../components';
+import { type AgentFormProps, type IdentityPanelStepProps } from '../IdentityPanelProps';
+
+export const AgentForm = (props: IdentityPanelStepProps & AgentFormProps) => {
+  const {
+    active,
+    onAgentCreate,
+    onAgentDestroy,
+    send,
+    validationMessage,
+    agentStatus,
+    agentActive,
+    agentProviderDisabled,
+  } = props;
+  const disabled = !active;
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Input
+          {...{ validationMessage }}
+          label={<StepHeading>Agent Status</StepHeading>}
+          disabled={disabled}
+          data-testid='agent-status'
+          value={agentStatus}
+        />
+      </div>
+      <Actions>
+        <Action
+          disabled={agentActive || agentProviderDisabled}
+          onClick={() => onAgentCreate?.()}
+          data-testid={'create-agent'}
+        >
+          Create Agent
+        </Action>
+        <Action
+          disabled={!agentActive || agentProviderDisabled}
+          onClick={() => onAgentDestroy?.()}
+          data-testid={'destroy-agent'}
+        >
+          Destroy Agent
+        </Action>
+        <Action
+          disabled={disabled}
+          onClick={() => send?.({ type: 'unchooseAction' })}
+          data-testid={'update-profile-form-back'}
+        >
+          {t('back label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

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

@@ -88,7 +88,11 @@ export const IdentityActionChooserImpl = ({
             <span className='grow mli-3'>{t('choose profile label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />
           </Action>
-          <Action data-testid='sign-out' onClick={() => send?.({ type: 'chooseSignOut' })} classNames='plb-4'>
+          <Action
+            data-testid='devices-panel.sign-out'
+            onClick={() => send?.({ type: 'chooseSignOut' })}
+            classNames='plb-4'
+          >
             <Power className={getSize(6)} />
             <span className='grow mli-3'>{t('choose sign out label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />

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

@@ -62,6 +62,7 @@ const SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack
         </Action>
         <Action
           variant='primary'
+          data-testid='sign-out.join-new-identity'
           classNames='!bg-error-500 hover:!bg-error-550'
           disabled={disabled}
           onClick={onJoinNewIdentity}
@@ -70,6 +71,7 @@ const SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack
         </Action>
         <Action
           variant='primary'
+          data-testid='sign-out.reset-device'
           classNames='!bg-error-500 hover:!bg-error-550'
           disabled={disabled}
           onClick={onResetDevice}

package/src/panels/IdentityPanel/steps/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './AgentPanel';
+export * from './AgentForm';
 export * from './DeviceManager';
 export * from './IdentityActionChooser';
 export * from './ProfileForm';

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { useAgentHostingProviderClient, type Client } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+
+export const useAgentHandlers = ({
+  client,
+  invitations,
+  identity,
+}: {
+  client: Client;
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}) => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [agentStatus, setAgentStatus] = useState('');
+  const [agentActive, setAgentActive] = useState(false);
+  const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
+
+  useEffect(() => {
+    const fetchAgentStatus = async () => {
+      // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
+      if (agentHostingProviderClient) {
+        const agentStatus = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'foo');
+        if (agentStatus) {
+          setAgentActive(true);
+          setAgentStatus(agentStatus);
+        } else {
+          setAgentActive(false);
+          setValidationMessage('No agent deployed via provider.');
+        }
+      } else {
+        setValidationMessage('No agent provider configured.');
+      }
+    };
+    void fetchAgentStatus();
+  }, []);
+
+  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      invariant(identity, 'Identity not found');
+      if (agentHostingProviderClient) {
+        try {
+          const res = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+          // TODO(nf): human-consumable response from API
+          setAgentStatus(res);
+          setAgentActive(true);
+          setValidationMessage('');
+        } catch (err: any) {
+          setValidationMessage(`error creating agent: ${err.message}`);
+        }
+      }
+    }
+  }, []);
+
+  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.MULTIUSE, authMethod: Invitation.AuthMethod.NONE });
+
+    invitation.subscribe(handleAgentCreate);
+  };
+
+  const onAgentDestroy = async () => {
+    const identity = client.halo.identity.get();
+    invariant(identity, 'Identity not found');
+    try {
+      await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+      setValidationMessage('No agent deployed via provider.');
+      setAgentStatus('');
+      setAgentActive(false);
+    } catch (err: any) {
+      setValidationMessage(`error destroying agent: ${err.message}`);
+    }
+  };
+
+  return { onAgentCreate, onAgentDestroy, validationMessage, agentStatus, agentActive };
+};

package/src/panels/JoinPanel/joinMachine.ts

@@ -15,7 +15,7 @@ import {
 } from 'xstate';
 
 import { log } from '@dxos/log';
-import type { Client } from '@dxos/react-client';
+import { type Client, AlreadyJoinedError } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
 import { type AuthenticatingInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
@@ -133,6 +133,12 @@ const getInvitationSubscribable = (
           }
         },
         (error: any) => {
+          if (error instanceof AlreadyJoinedError) {
+            log('[already joined]', { Kind, error });
+            next({ type: `success${Kind}Invitation`, invitation: invitation.get() });
+            return complete?.();
+          }
+
           log.error('[invitation errored]', { Kind, error });
           next({ type: `fail${Kind}Invitation`, reason: 'error' });
           return onError?.(error);
@@ -437,9 +443,8 @@ const useJoinMachine = (
     ({ halo }: JoinMachineContext) => {
       if (halo.unredeemedCode) {
         try {
-          const invitationObservable = client.halo.join(
-            InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode)),
-          );
+          const invitation = InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode));
+          const invitationObservable = client.halo.join(invitation);
           return {
             ...halo,
             invitationObservable,
@@ -461,20 +466,12 @@ const useJoinMachine = (
       if (space.unredeemedCode) {
         try {
           const invitation = InvitationEncoder.decode(defaultCodeFromUrl('space', space.unredeemedCode));
-          // Don’t join with the invitation if it has already succeeded.
-          if (space.succeededKeys?.has(invitation.spaceKey?.toHex() ?? 'never')) {
-            return {
-              ...space,
-              invitation,
-            };
-          } else {
-            const invitationObservable = client.spaces.join(invitation);
-            return {
-              ...space,
-              invitationObservable,
-              invitationSubscribable: getInvitationSubscribable('Space', invitationObservable),
-            };
-          }
+          const invitationObservable = client.spaces.join(invitation);
+          return {
+            ...space,
+            invitationObservable,
+            invitationSubscribable: getInvitationSubscribable('Space', invitationObservable),
+          };
         } catch (err) {
           log.error('Could not redeem space invitation code', err);
           return space;

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

@@ -35,7 +35,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           before={<Plus className={getSize(6)} />}
           onClick={() => send({ type: 'createIdentity' })}
           data-autofocus='choosingAuthMethod'
-          data-testid='create-identity'
+          data-testid='identity-chooser.create-identity'
         >
           {t('create identity label')}
         </CompoundButton>
@@ -44,7 +44,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
           onClick={() => send({ type: 'acceptHaloInvitation' })}
-          data-testid='join-identity'
+          data-testid='identity-chooser.join-identity'
         >
           {t('join identity label')}
         </CompoundButton>
@@ -55,7 +55,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => send({ type: 'recoverIdentity' })}
-          data-testid='recover-identity'
+          data-testid='identity-chooser.recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>

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

@@ -39,12 +39,17 @@ export const InvitationInput = (props: InvitationInputProps) => {
     unredeemedCode && setInputValue(unredeemedCode ?? '');
   }, [unredeemedCode]);
 
-  const handleNext = () =>
+  const handleNext = () => {
+    if (inputValue.trim().length === 0) {
+      return;
+    }
+
     send({
       type: `set${Kind}InvitationCode`,
       code: invitationCodeFromUrl(inputValue),
       ...(Kind === 'Space' && { succeededKeys }),
     });
+  };
 
   const exitAction = (
     <Action
@@ -62,6 +67,7 @@ export const InvitationInput = (props: InvitationInputProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           label={<StepHeading>{t('invitation input label')}</StepHeading>}
+          // TODO(burdon): Translation.
           placeholder='Type an invitation code'
           disabled={disabled}
           value={inputValue}

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

@@ -39,8 +39,8 @@ const InvitationActions = ({
             failReason === 'timeout'
               ? 'timeout status label'
               : failReason === 'cancelled'
-              ? 'cancelled status label'
-              : 'error status label',
+                ? 'cancelled status label'
+                : 'error status label',
           )}
         </StepHeading>
         <div role='none' className='grow' />

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

@@ -50,7 +50,7 @@ export const ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }: Re
           {...{ validationMessage }}
           label={<StepHeading>{t('reset identity input label', { confirmationValue })}</StepHeading>}
           disabled={disabled}
-          data-testid='identity-input'
+          data-testid='reset-identity-input'
           placeholder={confirmationValue}
           onChange={({ target: { value } }) => setInputValue(value)}
         />