@dxos/shell 0.4.10-main.eedd150 → 0.4.10-main.f15a546

package/src/panels/IdentityPanel/IdentityPanel.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { Device, DeviceKind } from '@dxos/react-client/halo';
 import { Invitation } from '@dxos/react-client/invitations';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -53,58 +52,6 @@ export const IdentityActionChooser = () => {
   );
 };
 
-export const UpdateProfileForm = () => {
-  return (
-    <StorybookDialog inOverlayLayout>
-      <IdentityPanelImpl
-        {...noOpProps}
-        activeView='update profile form'
-        IdentityActionChooser={IdentityActionChooserImpl}
-      />
-    </StorybookDialog>
-  );
-};
-
-export const DeviceManager = () => {
-  return (
-    <StorybookDialog inOverlayLayout>
-      <IdentityPanelImpl
-        {...{
-          ...noOpProps,
-          // TODO(nf): update
-          devices: [
-            {
-              deviceKey: PublicKey.random(),
-              kind: DeviceKind.CURRENT,
-              presence: Device.PresenceState.ONLINE,
-            },
-            {
-              deviceKey: PublicKey.random(),
-              kind: DeviceKind.TRUSTED,
-              presence: Device.PresenceState.ONLINE,
-            },
-            {
-              deviceKey: PublicKey.random(),
-              kind: DeviceKind.TRUSTED,
-              presence: Device.PresenceState.OFFLINE,
-            },
-          ],
-        }}
-        activeView='device manager'
-        IdentityActionChooser={IdentityActionChooserImpl}
-      />
-    </StorybookDialog>
-  );
-};
-
-export const DeviceManagerEmpty = () => {
-  return (
-    <StorybookDialog inOverlayLayout>
-      <IdentityPanelImpl {...noOpProps} activeView='device manager' IdentityActionChooser={IdentityActionChooserImpl} />
-    </StorybookDialog>
-  );
-};
-
 const DeviceInvitationManagerWithState = (extraProps: InvitationManagerProps) => (
   <StorybookDialog inOverlayLayout>
     <IdentityPanelImpl
@@ -156,13 +103,3 @@ export const DeviceInvitationManagerCancelled = () =>
   DeviceInvitationManagerWithState({
     status: Invitation.State.CANCELLED,
   });
-
-// export const IdentityActionChooser = {
-//   decorators: [ClientDecorator()],
-//   args: { activeView: 'identity action chooser' },
-// };
-
-// export const DeviceManager = {
-//   decorators: [ClientDecorator()],
-//   args: { activeView: 'device manager' },
-// };

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -1,7 +1,8 @@
 //
 // Copyright 2023 DXOS.org
 //
-import React, { useEffect, useMemo } from 'react';
+import { CopySimple, Plugs, PlugsConnected } from '@phosphor-icons/react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
@@ -9,8 +10,10 @@ import { useClient } from '@dxos/react-client';
 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, useTranslation } from '@dxos/react-ui';
-import { keyToFallback } from '@dxos/util';
+import { useNetworkStatus, ConnectionState } from '@dxos/react-client/mesh';
+import { Avatar, DensityProvider, Input, Toolbar, Tooltip, useId, useTranslation } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+import { hexToEmoji, hexToHue, keyToFallback } from '@dxos/util';
 
 import {
   type IdentityPanelHeadingProps,
@@ -18,24 +21,128 @@ import {
   type IdentityPanelProps,
 } from './IdentityPanelProps';
 import { useIdentityMachine } from './identityMachine';
-import { AgentForm, DeviceManager, IdentityActionChooser, ProfileForm } from './steps';
+import { IdentityActionChooser } from './steps';
 import { useAgentHandlers } from './useAgentHandlers';
-import { Viewport, Heading, CloseButton } from '../../components';
+import {
+  Viewport,
+  Heading,
+  CloseButton,
+  EmojiPickerToolbarButton,
+  useClipboardContext,
+  HuePickerToolbarButton,
+} from '../../components';
 import { ConfirmReset, InvitationManager } from '../../steps';
 
 const viewStyles = 'pbs-1 pbe-3 pli-3';
 
-const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
+// TODO(thure): Factor out?
+const getHueValue = (identity?: Identity) =>
+  identity?.profile?.data?.hue || hexToHue(identity?.identityKey.toHex() ?? '0');
+const getEmojiValue = (identity?: Identity) =>
+  identity?.profile?.data?.emoji || hexToEmoji(identity?.identityKey.toHex() ?? '0');
+
+const IdentityHeading = ({
+  titleId,
+  title,
+  identity,
+  onDone,
+  onUpdateProfile,
+  connectionState,
+  onChangeConnectionState,
+}: IdentityPanelHeadingProps) => {
   const fallbackValue = keyToFallback(identity.identityKey);
+  const { t } = useTranslation('os');
+  const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
+  const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
+  const { textValue, setTextValue } = useClipboardContext();
+  const identityHex = identity.identityKey.toHex();
+  const copied = textValue === identityHex;
+
+  const handleUpdateProfile = async () => {
+    const nextProfile = {
+      ...(displayName && { displayName }),
+      ...((emoji || hue) && { data: { ...(emoji && { emoji }), ...(hue && { hue }) } }),
+    };
+    return onUpdateProfile?.(nextProfile);
+  };
+
+  const setEmoji = (nextEmoji: string) => {
+    setEmojiDirectly(nextEmoji);
+    void handleUpdateProfile();
+  };
+
+  const setHue = (nextHue: string) => {
+    setHueDirectly(nextHue);
+    void handleUpdateProfile();
+  };
+
+  const isConnected = connectionState === ConnectionState.ONLINE;
+
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <Avatar.Root size={12} variant='circle' status='active' hue={identity.profile?.data?.hue || fallbackValue.hue}>
-        <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
-          <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
-        </Avatar.Frame>
-        <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
+      <Avatar.Root size={16} variant='circle' status={isConnected ? 'active' : 'error'} hue={hue || fallbackValue.hue}>
+        <Toolbar.Root classNames='grid grid-cols-[1fr_var(--rail-action)_min-content_var(--rail-action)_1fr] items-center gap-2'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames='bs-[--rail-action] is-[--rail-action] justify-self-end'
+                onClick={() =>
+                  onChangeConnectionState?.(isConnected ? ConnectionState.OFFLINE : ConnectionState.ONLINE)
+                }
+              >
+                <span className='sr-only'>{t(isConnected ? 'disconnect label' : 'connect label')}</span>
+                {isConnected ? <PlugsConnected className={getSize(5)} /> : <Plugs className={getSize(5)} />}
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(isConnected ? 'disconnect label' : 'connect label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+          <EmojiPickerToolbarButton emoji={emoji} onChangeEmoji={setEmoji} classNames='bs-[--rail-action]' />
+          <Avatar.Frame classNames='relative z-[2] -mli-4 chromatic-ignore'>
+            <Avatar.Fallback text={emoji || fallbackValue.emoji} />
+          </Avatar.Frame>
+          <HuePickerToolbarButton hue={hue} onChangeHue={setHue} classNames='bs-[--rail-action]' />
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Toolbar.Button
+                classNames='bs-[--rail-action] justify-self-start'
+                data-testid='update-profile-form-copy-key'
+                onClick={() => setTextValue(identityHex)}
+              >
+                <span className='sr-only'>{t(copied ? 'copy success label' : 'copy self public key label')}</span>
+                <CopySimple className={getSize(5)} />
+              </Toolbar.Button>
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content side='bottom' classNames='z-50'>
+                {t(copied ? 'copy success label' : 'copy self public key label')}
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        </Toolbar.Root>
+        <Avatar.Label classNames='sr-only' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}
         </Avatar.Label>
+        <Input.Root>
+          <Input.Label srOnly>{t('display name input label')}</Input.Label>
+          <Input.TextInput
+            variant='subdued'
+            data-testid='display-name-input'
+            placeholder={t('display name input placeholder')}
+            classNames='mbs-2 text-center font-light text-xl'
+            value={displayName}
+            onChange={({ target: { value } }) => {
+              setDisplayName(value);
+            }}
+            onBlur={handleUpdateProfile}
+          />
+        </Input.Root>
       </Avatar.Root>
     </Heading>
   );
@@ -51,14 +158,14 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     onJoinNewIdentity,
     IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser,
     InvitationManager: InvitationManagerComponent = InvitationManager,
+    connectionState,
+    onChangeConnectionState,
     onDone,
     ...rest
   } = props;
   const { t } = useTranslation('os');
   const title = useMemo(() => {
     switch (activeView) {
-      case 'agent manager':
-        return 'Manage Agent';
       case 'device invitation manager':
         return t('choose add device label');
       default:
@@ -70,7 +177,9 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
 
   return (
     <DensityProvider density='fine'>
-      <IdentityHeading {...{ identity, titleId, title, onDone }} />
+      <IdentityHeading
+        {...{ identity, titleId, title, onDone, onUpdateProfile, connectionState, onChangeConnectionState }}
+      />
       <Viewport.Root activeView={activeView}>
         <Viewport.Views>
           <Viewport.View id='identity action chooser' classNames={viewStyles}>
@@ -83,20 +192,6 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
               invitationUrl={rest.createInvitationUrl(rest.invitationCode!)}
             />
           </Viewport.View>
-          <Viewport.View id='device manager' classNames={viewStyles}>
-            <DeviceManager active={activeView === 'device manager'} {...rest} />
-          </Viewport.View>
-          <Viewport.View classNames={viewStyles} id='update profile form'>
-            <ProfileForm
-              send={rest.send}
-              active={activeView === 'update profile form'}
-              identity={identity}
-              onUpdateProfile={onUpdateProfile}
-            />
-          </Viewport.View>
-          <Viewport.View classNames={viewStyles} id='agent manager'>
-            <AgentForm send={rest.send} active={activeView === 'agent manager'} {...rest} />
-          </Viewport.View>
           <Viewport.View classNames={viewStyles} id='confirm join new identity'>
             <ConfirmReset
               active={activeView === 'confirm join new identity'}
@@ -149,6 +244,10 @@ export const IdentityPanel = ({
     context: { initialDisposition },
   });
 
+  const { swarm: connectionState } = useNetworkStatus();
+
+  const handleChangeConnectionState = async (nextState: ConnectionState) => client?.mesh.updateConfig(nextState);
+
   useEffect(() => {
     const subscription = identityService.subscribe((state) => {
       log('[state]', state);
@@ -163,16 +262,10 @@ export const IdentityPanel = ({
         return 'identity action chooser';
       case identityState.matches('managingDeviceInvitation'):
         return 'device invitation manager';
-      case identityState.matches('managingDevices'):
-        return 'device manager';
-      case [{ managingProfile: 'idle' }, { managingProfile: 'pending' }].some(identityState.matches):
-        return 'update profile form';
       case identityState.matches('confirmingResetStorage'):
         return 'confirm reset storage';
       case identityState.matches('confirmingJoinNewIdentity'):
         return 'confirm join new identity';
-      case [{ managingAgent: 'idle' }, { managingAgent: 'pending' }].some(identityState.matches):
-        return 'agent manager';
       default:
         return 'identity action chooser';
     }
@@ -192,6 +285,8 @@ export const IdentityPanel = ({
     titleId,
     createInvitationUrl,
     onUpdateProfile,
+    connectionState,
+    onChangeConnectionState: handleChangeConnectionState,
     ...agentProps,
   } satisfies IdentityPanelImplProps;
 

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -7,27 +7,17 @@ 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 IdentityPanelInitialDisposition = 'default' | 'manage-device-invitation' | 'manage-profile';
-
-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'
     | 'confirm join new identity'
@@ -35,6 +25,8 @@ export type IdentityPanelImplProps = {
   initialDisposition?: IdentityPanelInitialDisposition;
   identity: Identity;
   devices: Device[];
+  connectionState?: ConnectionState;
+  onChangeConnectionState?: (nextState: ConnectionState) => Promise<void>;
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
   onResetStorage?: () => Promise<void>;
   onJoinNewIdentity?: () => Promise<void>;
@@ -50,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

@@ -21,13 +21,7 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type:
-    | 'chooseDevices'
-    | 'chooseAgent'
-    | 'chooseProfile'
-    | 'chooseResetStorage'
-    | 'chooseJoinNewIdentity'
-    | 'unchooseAction';
+  type: 'chooseResetStorage' | 'chooseJoinNewIdentity' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -67,31 +61,11 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       unknown: {
         always: [
           { cond: 'initiallyManagingDeviceInvitation', target: 'managingDeviceInvitation', actions: 'log' },
-          { cond: 'initiallyManagingProfile', target: 'managingProfile', 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' },
-        },
-      },
       confirmingResetStorage: {},
       confirmingJoinNewIdentity: {},
     },
@@ -99,18 +73,14 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       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' },
       chooseJoinNewIdentity: { target: '.confirmingJoinNewIdentity', actions: 'log' },
       chooseResetStorage: { target: '.confirmingResetStorage', actions: 'log' },
-      chooseAgent: { target: '.managingAgent', actions: 'log' },
     },
   },
   {
     guards: {
       initiallyManagingDeviceInvitation: ({ initialDisposition }, _event) =>
         initialDisposition === 'manage-device-invitation',
-      initiallyManagingProfile: ({ initialDisposition }, _event) => initialDisposition === 'manage-profile',
     },
     actions: {
       setIdentity: assign<IdentityMachineContext, IdentityEvent>({

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

@@ -2,17 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretRight, Devices, Plus, Power, UserGear, HardDrive, Intersect } 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,83 +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'>
-          <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>
-          {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='devices-panel.join-new-identity'
-            onClick={() => send?.({ type: 'chooseJoinNewIdentity' })}
-            classNames='plb-4'
-          >
-            <Intersect className={getSize(6)} />
-            <span className='grow mli-3'>{t('choose join new identity 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='devices-panel.sign-out'
-            onClick={() => send?.({ type: 'chooseResetStorage' })}
-            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}

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

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

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/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') {