@dxos/shell 0.4.10-main.b9b4602 → 0.4.10-main.c2d5db5

package/src/components/HuePicker.tsx

@@ -1,21 +1,12 @@
 //
 // Copyright 2024 DXOS.org
 //
-import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
+import { ArrowCounterClockwise, CaretDown, Check } from '@phosphor-icons/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type Dispatch, type SetStateAction, useRef, useState } from 'react';
+import React, { type Dispatch, type SetStateAction } from 'react';
 
-import {
-  Button,
-  useTranslation,
-  Tooltip,
-  DropdownMenu,
-  useThemeContext,
-  type ButtonProps,
-  Toolbar,
-  type ThemedClassName,
-} from '@dxos/react-ui';
-import { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';
+import { Button, useTranslation, Tooltip, DropdownMenu, useThemeContext, type ButtonProps } from '@dxos/react-ui';
+import { getSize, hueTokenThemes } from '@dxos/react-ui-theme';
 
 const HuePreview = ({ hue }: { hue: string }) => {
   const { tx } = useThemeContext();
@@ -34,92 +25,7 @@ export type HuePickerProps = {
   onClickClear?: ButtonProps['onClick'];
 };
 
-/**
- * A toolbar button for picking hue. Use only in `role=toolbar` elements. Unable to unset the value.
- */
-export const HuePickerToolbarButton = ({
-  disabled,
-  hue,
-  onChangeHue,
-  classNames,
-  defaultHue,
-}: ThemedClassName<Omit<HuePickerProps, 'onClickClear'>>) => {
-  const { t } = useTranslation('os');
-
-  const [hueValue, setHueValue] = useControllableState<string>({
-    prop: hue,
-    onChange: onChangeHue,
-    defaultProp: defaultHue,
-  });
-
-  const [huePickerOpen, setHuePickerOpen] = useState<boolean>(false);
-
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-
-  return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      <DropdownMenu.Root
-        modal={false}
-        open={huePickerOpen}
-        onOpenChange={(nextOpen) => {
-          setHuePickerOpen(nextOpen);
-          suppressNextTooltip.current = true;
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <DropdownMenu.Trigger asChild>
-            <Toolbar.Button classNames={mx('gap-2 plb-1', classNames)} disabled={disabled}>
-              <span className='sr-only'>{t('select hue label')}</span>
-              <Palette className={getSize(5)} />
-            </Toolbar.Button>
-          </DropdownMenu.Trigger>
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content side='bottom' classNames='z-50'>
-            {t('select hue label')}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-        <DropdownMenu.Content side='bottom'>
-          <DropdownMenu.Viewport>
-            {Object.keys(hueTokenThemes).map((hue) => {
-              return (
-                <DropdownMenu.CheckboxItem
-                  key={hue}
-                  checked={hue === hueValue}
-                  onCheckedChange={() => setHueValue(hue)}
-                >
-                  <HuePreview hue={hue} />
-                  <span className='grow'>{t(`${hue} label`)}</span>
-                  <DropdownMenu.ItemIndicator>
-                    <Check />
-                  </DropdownMenu.ItemIndicator>
-                </DropdownMenu.CheckboxItem>
-              );
-            })}
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </Tooltip.Root>
-  );
-};
-
-/**
- * A button for picking hue alongside a button for unsetting it.
- */
-export const HuePickerBlock = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
+export const HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
   const { t } = useTranslation('os');
 
   const [hueValue, setHueValue] = useControllableState<string>({

package/src/components/IdentityList/DeviceList.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { generateName } from '@dxos/display-name';
+import { type Device, DeviceType } from '@dxos/react-client/halo';
+import { List, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { IdentityListItem } from './IdentityListItem';
+
+export interface DeviceListProps {
+  devices: Device[];
+  onSelect?: (device: Device) => void;
+}
+
+export const DeviceList = ({ devices, onSelect }: DeviceListProps) => {
+  const { t } = useTranslation('os');
+  return devices.length > 0 ? (
+    <List classNames='flex flex-col gap-2'>
+      {devices.map((device) => {
+        // TODO(wittjosiah): Render this better. Consider communicating these as apps rather than devices.
+        const deviceType = device.profile?.type || DeviceType.UNKNOWN;
+        const displayName = device.profile?.label
+          ? `${device.profile.label} (${DeviceType[deviceType]})`
+          : generateName(device.deviceKey.toHex());
+
+        const identity = {
+          identityKey: device.deviceKey,
+          profile: { displayName },
+        };
+        return (
+          <IdentityListItem
+            key={device.deviceKey.toHex()}
+            identity={identity}
+            presence={device.presence}
+            onClick={onSelect && (() => onSelect(device))}
+          />
+        );
+      })}
+    </List>
+  ) : (
+    <div role='none' className='grow flex items-center p-2'>
+      <p className={mx(descriptionText, 'text-center is-full')}>{t('empty device list message')}</p>
+    </div>
+  );
+};

package/src/components/IdentityList/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './DeviceList';
 export * from './IdentityListItem';
 export * from './SpaceMemberList';

package/src/components/index.ts

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './AgentConfig';
 export * from './Clipboard';
 export * from './CompoundButton';
 export * from './EmojiPicker';
 export * from './HuePicker';
 export * from './IdentityList';
-export * from './DeviceList';
 export * from './InvitationList';
 export * from './Panel';
 export * from './Viewport';

package/src/composites/Shell/Shell.tsx

@@ -81,7 +81,13 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
             await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
           }}
-          initialDisposition={layout === ShellLayout.SHARE_IDENTITY ? 'manage-device-invitation' : 'default'}
+          initialDisposition={
+            layout === ShellLayout.SHARE_IDENTITY
+              ? 'manage-device-invitation'
+              : layout === ShellLayout.EDIT_PROFILE
+                ? 'manage-profile'
+                : 'default'
+          }
         />
       );
 

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

@@ -8,6 +8,7 @@ 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';
 
@@ -52,6 +53,58 @@ 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
@@ -103,3 +156,13 @@ 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,8 +1,7 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { CopySimple, Plugs, PlugsConnected } from '@phosphor-icons/react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
@@ -10,10 +9,8 @@ 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 { 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 { Avatar, DensityProvider, useId, useTranslation } from '@dxos/react-ui';
+import { keyToFallback } from '@dxos/util';
 
 import {
   type IdentityPanelHeadingProps,
@@ -21,122 +18,24 @@ import {
   type IdentityPanelProps,
 } from './IdentityPanelProps';
 import { useIdentityMachine } from './identityMachine';
-import { IdentityActionChooser } from './steps';
+import { AgentForm, DeviceManager, IdentityActionChooser, ProfileForm } from './steps';
 import { useAgentHandlers } from './useAgentHandlers';
-import {
-  Viewport,
-  Heading,
-  CloseButton,
-  EmojiPickerToolbarButton,
-  useClipboardContext,
-  HuePickerToolbarButton,
-} from '../../components';
+import { Viewport, Heading, CloseButton } from '../../components';
 import { ConfirmReset, InvitationManager } from '../../steps';
 
 const viewStyles = 'pbs-1 pbe-3 pli-3';
 
-// 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 IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHeadingProps) => {
   const fallbackValue = keyToFallback(identity.identityKey);
-  const { t } = useTranslation('os');
-  const [displayName, setDisplayName] = useState(identity.profile?.displayName ?? '');
-  const [emoji, setEmoji] = useState<string>(getEmojiValue(identity));
-  const [hue, setHue] = 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);
-  };
-
-  useEffect(() => {
-    void handleUpdateProfile();
-  }, [emoji, hue]);
-
-  const isConnected = connectionState === ConnectionState.ONLINE;
-
   return (
     <Heading titleId={titleId} title={title} corner={<CloseButton onDone={onDone} />}>
-      <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'>
+      <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'>
           {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>
   );
@@ -152,14 +51,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:
@@ -171,9 +70,7 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
 
   return (
     <DensityProvider density='fine'>
-      <IdentityHeading
-        {...{ identity, titleId, title, onDone, onUpdateProfile, connectionState, onChangeConnectionState }}
-      />
+      <IdentityHeading {...{ identity, titleId, title, onDone }} />
       <Viewport.Root activeView={activeView}>
         <Viewport.Views>
           <Viewport.View id='identity action chooser' classNames={viewStyles}>
@@ -186,6 +83,20 @@ 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'}
@@ -238,10 +149,6 @@ 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);
@@ -256,10 +163,16 @@ 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';
     }
@@ -279,8 +192,6 @@ export const IdentityPanel = ({
     titleId,
     createInvitationUrl,
     onUpdateProfile,
-    connectionState,
-    onChangeConnectionState: handleChangeConnectionState,
     ...agentProps,
   } satisfies IdentityPanelImplProps;
 

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -7,17 +7,27 @@ 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';
+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 IdentityPanelImplProps = {
   titleId: string;
   activeView:
+    | 'device manager'
+    | 'agent manager'
+    | 'update profile form'
     | 'device invitation manager'
     | 'identity action chooser'
     | 'confirm join new identity'
@@ -25,8 +35,6 @@ 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>;
@@ -42,15 +50,11 @@ export type IdentityPanelImplProps = {
 
 export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | 'activeView' | 'identity'>>;
 
-export type IdentityPanelHeadingProps = Pick<
-  IdentityPanelImplProps,
-  'titleId' | 'identity' | 'onDone' | 'onUpdateProfile' | 'connectionState' | 'onChangeConnectionState'
-> & {
+export type IdentityPanelHeadingProps = Pick<IdentityPanelImplProps, 'titleId' | 'identity' | 'onDone'> & {
   title: string;
 };
 
 export type IdentityPanelStepProps = Pick<IdentityPanelImplProps, 'send' | 'onDone' | 'doneActionParent'> & {
   active?: boolean;
   agentHostingEnabled?: boolean;
-  devices: Device[];
 };

package/src/panels/IdentityPanel/identityMachine.ts

@@ -21,7 +21,13 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseResetStorage' | 'chooseJoinNewIdentity' | 'unchooseAction';
+  type:
+    | 'chooseDevices'
+    | 'chooseAgent'
+    | 'chooseProfile'
+    | 'chooseResetStorage'
+    | 'chooseJoinNewIdentity'
+    | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -61,11 +67,31 @@ 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: {},
     },
@@ -73,14 +99,18 @@ 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>({