@dxos/shell 0.4.10-main.fa5a270 → 0.4.10-main.fe71b4c

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -7,33 +7,29 @@ import type { Event, SingleOrArray } from 'xstate';
 
 import type { Device, Identity } from '@dxos/react-client/halo';
 import type { InvitationStatus } from '@dxos/react-client/invitations';
+import type { ConnectionState } from '@dxos/react-client/mesh';
 
 import type { IdentityEvent } from './identityMachine';
+import { type AgentFormProps } from '../../components';
 import type { InvitationManagerProps } from '../../steps';
 
-export type AgentFormProps = {
-  onAgentCreate?: () => Promise<void>;
-  onAgentDestroy?: () => Promise<void>;
-  agentStatus?: string;
-  agentActive?: boolean;
-  agentProviderDisabled?: boolean;
-  validationMessage?: string;
-};
+export type IdentityPanelInitialDisposition = 'default' | 'manage-device-invitation';
 
 export type IdentityPanelImplProps = {
   titleId: string;
   activeView:
-    | 'device manager'
-    | 'agent manager'
-    | 'update profile form'
     | 'device invitation manager'
     | 'identity action chooser'
-    | 'signing out';
+    | 'confirm join new identity'
+    | 'confirm reset storage';
+  initialDisposition?: IdentityPanelInitialDisposition;
   identity: Identity;
   devices: Device[];
+  connectionState?: ConnectionState;
+  onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
-  onResetDevice?: () => Promise<void>;
-  onJoinNewIdentity?: () => void;
+  onResetStorage?: () => Promise<void>;
+  onJoinNewIdentity?: () => Promise<void>;
   createInvitationUrl: (invitationCode: string) => string;
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
   onDone?: () => void;
@@ -46,11 +42,15 @@ export type IdentityPanelImplProps = {
 
 export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | 'activeView' | 'identity'>>;
 
-export type IdentityPanelHeadingProps = Pick<IdentityPanelImplProps, 'titleId' | 'identity' | 'onDone'> & {
+export type IdentityPanelHeadingProps = Pick<
+  IdentityPanelImplProps,
+  'titleId' | 'identity' | 'onDone' | 'onUpdateProfile' | 'connectionState' | 'onChangeConnectionState'
+> & {
   title: string;
 };
 
 export type IdentityPanelStepProps = Pick<IdentityPanelImplProps, 'send' | 'onDone' | 'doneActionParent'> & {
   active?: boolean;
   agentHostingEnabled?: boolean;
+  devices: Device[];
 };

package/src/panels/IdentityPanel/identityMachine.ts

@@ -10,16 +10,18 @@ import { type Client } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
 
+import { type IdentityPanelInitialDisposition } from './IdentityPanelProps';
 import { type StepEvent } from '../../steps';
 
 type IdentityMachineContext = {
+  initialDisposition?: IdentityPanelInitialDisposition;
   invitation?: CancellableInvitationObservable;
   identity: Identity | null;
   identitySubscribable: Subscribable<SetIdentityEvent> | null;
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseDevices' | 'chooseAgent' | 'chooseProfile' | 'chooseSignOut' | 'sigingOut' | 'unchooseAction';
+  type: 'chooseResetStorage' | 'chooseJoinNewIdentity' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -56,40 +58,30 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       src: (context) => context.identitySubscribable!,
     },
     states: {
+      unknown: {
+        always: [
+          { cond: 'initiallyManagingDeviceInvitation', target: 'managingDeviceInvitation', actions: 'log' },
+          { target: 'choosingAction', actions: 'log' },
+        ],
+      },
       choosingAction: {},
       managingDeviceInvitation: {},
-      managingAgent: {
-        initial: 'idle',
-        states: {
-          idle: {},
-          pending: {},
-        },
-      },
-      managingDevices: {},
-      managingProfile: {
-        initial: 'idle',
-        states: {
-          idle: {},
-          pending: {},
-        },
-        on: {
-          setIdentity: { target: 'choosingAction', actions: ['setIdentity', 'log'] },
-          updateProfile: { target: '.pending', actions: 'log' },
-        },
-      },
-      signingOut: {},
+      confirmingResetStorage: {},
+      confirmingJoinNewIdentity: {},
     },
     on: {
       unchooseAction: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
       deselectInvitation: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
       selectInvitation: { target: '.managingDeviceInvitation', actions: ['setInvitation', 'log'] },
-      chooseDevices: { target: '.managingDevices', actions: 'log' },
-      chooseProfile: { target: '.managingProfile', actions: 'log' },
-      chooseSignOut: { target: '.signingOut', actions: 'log' },
-      chooseAgent: { target: '.managingAgent', actions: 'log' },
+      chooseJoinNewIdentity: { target: '.confirmingJoinNewIdentity', actions: 'log' },
+      chooseResetStorage: { target: '.confirmingResetStorage', actions: 'log' },
     },
   },
   {
+    guards: {
+      initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) =>
+        initialDisposition === 'manage-device-invitation',
+    },
     actions: {
       setIdentity: assign<IdentityMachineContext, IdentityEvent>({
         identity: (context, event) => (event as SetIdentityEvent)?.identity ?? null,

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

@@ -2,17 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretRight, Devices, Plus, Power, UserGear, HardDrive } from '@phosphor-icons/react';
 import React, { useCallback } from 'react';
 
 import { log } from '@dxos/log';
 import { useAgentHostingProviderClient, useClient } from '@dxos/react-client';
 import { useHaloInvitations } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
-import { DensityProvider, useTranslation } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
 
-import { Action } from '../../../components';
+import { AgentConfig, type AgentFormProps, DeviceList } from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 
 export type IdentityActionChooserProps = IdentityPanelStepProps;
@@ -28,13 +25,10 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
       log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
     }
   }, []);
-  const createInvitation = (e: React.MouseEvent) => {
-    const testing = e.altKey && e.shiftKey;
+  const createInvitation = () => {
     invitations.forEach((invitation) => invitation.cancel());
     // TODO(nf): allow user to make invitations non-persistent?
-    const invitation = client.halo.share(
-      testing ? { type: Invitation.Type.MULTIUSE, authMethod: Invitation.AuthMethod.NONE } : undefined,
-    );
+    const invitation = client.halo.share();
     // TODO(wittjosiah): Don't depend on NODE_ENV.
     if (process.env.NODE_ENV !== 'production') {
       invitation.subscribe(onInvitationEvent);
@@ -44,74 +38,36 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
   return (
     <IdentityActionChooserImpl
       {...props}
-      onCreateInvitationClick={(e) => createInvitation(e)}
+      onCreateInvitationClick={createInvitation}
       agentHostingEnabled={!!agentHostingProviderClient}
     />
   );
 };
 
-export type IdentityActionChooserImplProps = IdentityActionChooserProps & {
-  onCreateInvitationClick?: (e: React.MouseEvent) => void;
-};
+export type IdentityActionChooserImplProps = IdentityActionChooserProps &
+  Partial<AgentFormProps> & {
+    onCreateInvitationClick?: () => void;
+  };
 
 export const IdentityActionChooserImpl = ({
-  onCreateInvitationClick,
-  active,
   send,
-  onDone,
-  doneActionParent,
+  onCreateInvitationClick,
+  devices,
+  onAgentDestroy,
+  onAgentCreate,
+  agentStatus,
+  agentActive,
   agentHostingEnabled,
 }: IdentityActionChooserImplProps) => {
-  const { t } = useTranslation('os');
-
-  // const doneAction = (
-  //   <PanelAction aria-label={t('done label')} onClick={onDone} disabled={!active} data-testid='identity-panel-done'>
-  //     <Check weight='light' className={getSize(6)} />
-  //   </PanelAction>
-  // );
   return (
-    <div role='none' className='grow flex flex-col gap-1'>
-      <DensityProvider density='coarse'>
-        <div className='grow justify-center flex flex-col gap-1'>
-          {agentHostingEnabled && (
-            <Action data-testid='manage-agent' onClick={() => send?.({ type: 'chooseAgent' })} classNames='plb-4'>
-              <HardDrive className={getSize(6)} />
-              <span className='grow mli-3'>Manage Agent</span>
-              <CaretRight weight='bold' className={getSize(4)} />
-            </Action>
-          )}
-          <Action
-            disabled={!active}
-            data-testid='devices-panel.create-invitation'
-            onClick={onCreateInvitationClick}
-            classNames='plb-4'
-          >
-            <Plus className={getSize(6)} />
-            <span className='grow mli-3'>{t('choose add device label')}</span>
-            <CaretRight weight='bold' className={getSize(4)} />
-          </Action>
-          <Action data-testid='manage-devices' onClick={() => send?.({ type: 'chooseDevices' })} classNames='plb-4'>
-            <Devices className={getSize(6)} />
-            <span className='grow mli-3'>{t('choose devices label')}</span>
-            <CaretRight weight='bold' className={getSize(4)} />
-          </Action>
-          <Action data-testid='manage-profile' onClick={() => send?.({ type: 'chooseProfile' })} classNames='plb-4'>
-            <UserGear className={getSize(6)} />
-            <span className='grow mli-3'>{t('choose profile label')}</span>
-            <CaretRight weight='bold' className={getSize(4)} />
-          </Action>
-          <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)} />
-          </Action>
-        </div>
-      </DensityProvider>
-      {/* <PanelActions>{doneActionParent ? cloneElement(doneActionParent, {}, doneAction) : doneAction}</PanelActions> */}
-    </div>
+    <>
+      <DeviceList
+        devices={devices}
+        onClickAdd={onCreateInvitationClick}
+        onClickJoinExisting={() => send?.({ type: 'chooseJoinNewIdentity' })}
+        onClickReset={() => send?.({ type: 'chooseResetStorage' })}
+      />
+      {agentHostingEnabled && <AgentConfig {...{ agentActive, agentStatus, onAgentDestroy, onAgentCreate }} />}
+    </>
   );
 };

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

@@ -10,11 +10,19 @@ import { type Identity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { Action, Actions, StepHeading, Input, useClipboardContext, EmojiPicker, HuePicker } from '../../../components';
+import {
+  Action,
+  Actions,
+  StepHeading,
+  Input,
+  useClipboardContext,
+  EmojiPickerBlock,
+  HuePickerBlock,
+} from '../../../components';
 import { type IdentityPanelStepProps } from '../IdentityPanelProps';
 import { type IdentityEvent } from '../identityMachine';
 
-export interface ProfileFormProps extends Omit<IdentityPanelStepProps, 'send'> {
+export interface ProfileFormProps extends Omit<IdentityPanelStepProps, 'send' | 'devices'> {
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
   identity?: Identity;
@@ -68,13 +76,13 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         />
         <StepHeading className='mbe-2'>{t('emoji and color label')}</StepHeading>
         <div role='none' className='grid grid-cols-[1fr_min-content] gap-y-2'>
-          <EmojiPicker
+          <EmojiPickerBlock
             emoji={emoji}
             onChangeEmoji={setEmoji}
             disabled={disabled}
             onClickClear={() => setEmoji(getEmojiValue(identity))}
           />
-          <HuePicker
+          <HuePickerBlock
             hue={hue}
             onChangeHue={setHue}
             disabled={disabled}
@@ -106,7 +114,12 @@ const ProfileFormImpl = (props: ProfileFormImplProps) => {
         <Action
           variant='primary'
           disabled={disabled}
-          onClick={() => onUpdateProfile?.({ displayName, data: { emoji, hue } })}
+          onClick={() =>
+            onUpdateProfile?.({
+              ...(displayName && { displayName }),
+              ...((emoji || hue) && { data: { ...(emoji && { emoji }), ...(hue && { hue }) } }),
+            })
+          }
           data-testid='update-profile-form-continue'
         >
           {t('done label')}

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

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

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -67,7 +67,11 @@ export const useAgentHandlers = ({
     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 });
+    const invitation = client.halo.share({
+      type: Invitation.Type.INTERACTIVE,
+      authMethod: Invitation.AuthMethod.NONE,
+      multiUse: true,
+    });
 
     invitation.subscribe(handleAgentCreate);
   };

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

@@ -10,8 +10,9 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { JoinPanelImpl } from './JoinPanel';
 import { type JoinPanelImplProps } from './JoinPanelProps';
-import { IdentityInputImpl, ResetIdentityImpl } from './steps';
+import { IdentityInputImpl } from './steps';
 import { StorybookDialog } from '../../components/StorybookDialog';
+import { ConfirmResetImpl } from '../../steps';
 
 const noOpProps: JoinPanelImplProps = {
   titleId: 'storybookJoinPanel__title',
@@ -34,7 +35,7 @@ export default {
   parameters: { chromatic: { disableSnapshot: false } },
   args: {
     IdentityInput: IdentityInputImpl,
-    ResetIdentity: ResetIdentityImpl,
+    ResetIdentity: ConfirmResetImpl,
   },
 };
 

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -19,9 +19,9 @@ import {
   InvitationRescuer,
   InvitationInput,
   InvitationAccepted,
-  ResetIdentity,
 } from './steps';
 import { Viewport } from '../../components';
+import { ConfirmReset } from '../../steps';
 import { stepStyles } from '../../styles';
 
 export const JoinPanelImpl = (props: JoinPanelImplProps) => {
@@ -44,8 +44,10 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
     onSpaceInvitationCancel,
     onHaloInvitationAuthenticate,
     onSpaceInvitationAuthenticate,
+    onCancelResetStorage,
+    onConfirmResetStorage,
     IdentityInput: IdentityInputComponent = IdentityInput,
-    ResetIdentity: ResetIdentityComponent = ResetIdentity,
+    ConfirmReset: ConfirmResetComponent = ConfirmReset,
   } = props;
   return (
     <DensityProvider density='fine'>
@@ -55,11 +57,12 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
           <Viewport.View classNames={stepStyles} id='addition method chooser'>
             <AdditionMethodChooser send={send} active={activeView === 'addition method chooser'} />
           </Viewport.View>
-          <Viewport.View classNames={stepStyles} id='reset identity confirmation'>
-            <ResetIdentityComponent
+          <Viewport.View classNames={stepStyles} id='reset storage confirmation'>
+            <ConfirmResetComponent
               send={send}
-              method='reset identity'
               active={activeView === 'reset identity confirmation'}
+              onCancel={onCancelResetStorage}
+              onConfirm={onConfirmResetStorage}
             />
           </Viewport.View>
           <Viewport.View classNames={stepStyles} id='create identity input'>
@@ -172,11 +175,13 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
 export const JoinPanel = ({
   titleId: propsTitleId,
   mode = 'default',
+  initialDisposition = 'default',
   initialInvitationCode,
   exitActionParent,
   onExit,
   doneActionParent,
   onDone: propsOnDone,
+  onCancelResetStorage,
 }: JoinPanelProps) => {
   const client = useClient();
   const identity = useIdentity();
@@ -186,6 +191,7 @@ export const JoinPanel = ({
   const [joinState, joinSend, joinService] = useJoinMachine(client, {
     context: {
       mode,
+      initialDisposition,
       identity,
       ...(initialInvitationCode && {
         [mode === 'halo-only' ? 'halo' : 'space']: { unredeemedCode: initialInvitationCode },
@@ -379,6 +385,14 @@ export const JoinPanel = ({
     });
   }, [joinState, propsOnDone]);
 
+  const onConfirmResetStorage = useCallback(
+    () =>
+      client.reset().then(() => {
+        joinSend({ type: 'resetIdentity' });
+      }),
+    [client, joinSend],
+  );
+
   return (
     <JoinPanelImpl
       {...{
@@ -409,6 +423,8 @@ export const JoinPanel = ({
           joinSend({ type: 'authenticateSpaceVerificationCode' });
           return joinState.context.space.invitationObservable?.authenticate(authCode);
         },
+        onConfirmResetStorage,
+        onCancelResetStorage,
       }}
     />
   );

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -8,12 +8,14 @@ import type { Identity } from '@dxos/react-client/halo';
 import type { Invitation, AuthenticatingInvitationObservable, InvitationResult } from '@dxos/react-client/invitations';
 
 import { type JoinSend } from './joinMachine';
-import { type ResetIdentityProps, type IdentityInputProps } from './steps';
-import { type StepProps } from '../../steps';
+import { type IdentityInputProps } from './steps';
+import { type ConfirmResetProps, type StepProps } from '../../steps';
 import { type FailReason } from '../../types';
 
 export type JoinPanelMode = 'default' | 'halo-only';
 
+export type JoinPanelInitialDisposition = 'default' | 'accept-halo-invitation';
+
 export type JoinStepProps = Omit<StepProps, 'send' | 'onDone'> & {
   send: JoinSend;
   onDone?: (result: InvitationResult | null) => void;
@@ -21,6 +23,7 @@ export type JoinStepProps = Omit<StepProps, 'send' | 'onDone'> & {
 
 export interface JoinPanelProps {
   mode?: JoinPanelMode;
+  initialDisposition?: JoinPanelInitialDisposition;
   initialInvitationCode?: string;
   titleId?: string;
   exitActionParent?: Parameters<typeof cloneElement>[0];
@@ -28,6 +31,7 @@ export interface JoinPanelProps {
   onExit?: () => void;
   onDone?: (result: InvitationResult | null) => void;
   parseInvitationCodeInput?: (invitationCodeInput: string) => string;
+  onCancelResetStorage?: () => void;
 }
 
 export type JoinPanelImplProps = Pick<
@@ -61,8 +65,10 @@ export type JoinPanelImplProps = Pick<
   onSpaceInvitationCancel?: () => Promise<void> | undefined;
   onHaloInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
   onSpaceInvitationAuthenticate?: (authCode: string) => Promise<void> | undefined;
+  onConfirmResetStorage?: () => Promise<void>;
+  onCancelResetStorage?: () => void;
   IdentityInput?: React.FC<IdentityInputProps>;
-  ResetIdentity?: React.FC<ResetIdentityProps>;
+  ConfirmReset?: React.FC<ConfirmResetProps>;
 };
 
 export interface IdentityAction {

package/src/panels/JoinPanel/joinMachine.ts

@@ -19,7 +19,7 @@ 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';
 
-import { type JoinPanelMode } from './JoinPanelProps';
+import { type JoinPanelInitialDisposition, type JoinPanelMode } from './JoinPanelProps';
 import { type FailReason } from '../../types';
 
 type InvitationKindContext = Partial<{
@@ -33,6 +33,7 @@ type InvitationKindContext = Partial<{
 
 type JoinMachineContext = {
   mode: JoinPanelMode;
+  initialDisposition: JoinPanelInitialDisposition;
   identity: Identity | null;
   halo: InvitationKindContext;
   space: InvitationKindContext;
@@ -74,7 +75,8 @@ type EmptyInvitationEvent = {
     | 'authenticateHaloVerificationCode'
     | 'authenticateSpaceVerificationCode'
     | 'resetHaloInvitation'
-    | 'resetSpaceInvitation';
+    | 'resetSpaceInvitation'
+    | 'deselectInvitation';
 };
 
 type InvitationEvent = FailInvitationEvent | SetInvitationCodeEvent | SetInvitationEvent | EmptyInvitationEvent;
@@ -294,6 +296,7 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
     id: 'join',
     predictableActionArguments: true,
     context: {
+      initialDisposition: 'default',
       mode: 'default',
       identity: null,
       halo: {},
@@ -304,6 +307,11 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
       unknown: {
         always: [
           { cond: 'existingIdentity', target: 'resettingIdentity', actions: 'log' },
+          {
+            cond: 'initiallyAcceptingHaloInvitation',
+            target: '#join.choosingIdentity.acceptingHaloInvitation',
+            actions: 'log',
+          },
           { cond: 'noSelectedIdentity', target: 'choosingIdentity', actions: 'log' },
           { target: 'acceptingSpaceInvitation', actions: 'log' },
         ],
@@ -352,6 +360,8 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
     guards: {
       existingIdentity: ({ identity, mode }, _event) => mode === 'halo-only' && !!identity,
       noSelectedIdentity: ({ identity }, _event) => !identity,
+      initiallyAcceptingHaloInvitation: ({ identity, initialDisposition }, _event) =>
+        !identity && initialDisposition === 'accept-halo-invitation',
       hasHaloUnredeemedCode: ({ halo }, _event) => !!halo.unredeemedCode,
       noSpaceInvitation: ({ space }, _event) => !space.invitation && !space.unredeemedCode,
     },

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

@@ -9,4 +9,3 @@ export * from './InvitationAccepted';
 export * from './InvitationInput';
 export * from './InvitationRescuer';
 export * from './InvitationAuthenticator';
-export * from './ResetIdentity';

package/src/panels/SpacePanel/steps/SpaceManager.tsx

@@ -59,6 +59,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
         const invitation = space.share?.({
           type: Invitation.Type.INTERACTIVE,
           authMethod: Invitation.AuthMethod.SHARED_SECRET,
+          multiUse: false,
           target,
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
@@ -72,8 +73,9 @@ export const SpaceManager = (props: SpaceManagerProps) => {
       icon: UsersThree,
       onClick: useCallback(() => {
         const invitation = space.share?.({
-          type: Invitation.Type.MULTIUSE,
+          type: Invitation.Type.INTERACTIVE,
           authMethod: Invitation.AuthMethod.NONE,
+          multiUse: true,
           target,
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {

package/src/panels/StatusPanel/StatusPanel.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Status, useTranslation } from '@dxos/react-ui';
+
+export const StatusPanel = ({ titleId }: { titleId?: string }) => {
+  const { t } = useTranslation('os');
+  return (
+    <div className='grid place-items-center p-2 gap-2'>
+      <p id={titleId} className='font-medium text-center'>
+        {t('resetting message')}
+      </p>
+      <Status indeterminate>{t('resetting message')}</Status>
+    </div>
+  );
+};

package/src/panels/StatusPanel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './StatusPanel';

package/src/panels/index.ts

@@ -5,3 +5,4 @@
 export * from './IdentityPanel';
 export * from './JoinPanel';
 export * from './SpacePanel';
+export * from './StatusPanel';