@dxos/shell 0.4.10-main.c32f430 → 0.4.10-main.c5e8686

package/src/components/HuePicker.tsx

@@ -1,12 +1,21 @@
 //
 // Copyright 2024 DXOS.org
 //
-import { ArrowCounterClockwise, CaretDown, Check } from '@phosphor-icons/react';
+import { ArrowCounterClockwise, CaretDown, Check, Palette } from '@phosphor-icons/react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type Dispatch, type SetStateAction } from 'react';
+import React, { type Dispatch, type SetStateAction, useRef, useState } from 'react';
 
-import { Button, useTranslation, Tooltip, DropdownMenu, useThemeContext, type ButtonProps } from '@dxos/react-ui';
-import { getSize, hueTokenThemes } from '@dxos/react-ui-theme';
+import {
+  Button,
+  useTranslation,
+  Tooltip,
+  DropdownMenu,
+  useThemeContext,
+  type ButtonProps,
+  Toolbar,
+  type ThemedClassName,
+} from '@dxos/react-ui';
+import { getSize, hueTokenThemes, mx } from '@dxos/react-ui-theme';
 
 const HuePreview = ({ hue }: { hue: string }) => {
   const { tx } = useThemeContext();
@@ -25,7 +34,92 @@ export type HuePickerProps = {
   onClickClear?: ButtonProps['onClick'];
 };
 
-export const HuePicker = ({ disabled, hue, onChangeHue, defaultHue, onClickClear }: HuePickerProps) => {
+/**
+ * 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) => {
   const { t } = useTranslation('os');
 
   const [hueValue, setHueValue] = useControllableState<string>({

package/src/components/IdentityList/index.ts

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

package/src/components/InvitationList/InvitationListItem.tsx

@@ -96,14 +96,14 @@ export const InvitationListItemImpl = ({
   ...props
 }: InvitationListItemImplProps) => {
   const { t } = useTranslation('os');
-  const { cancel, status: invitationStatus, invitationCode, authCode, type } = propsInvitationStatus;
+  const { cancel, status: invitationStatus, invitationCode, authCode, multiUse } = propsInvitationStatus;
 
   const isCancellable = !(
     [Invitation.State.ERROR, Invitation.State.TIMEOUT, Invitation.State.CANCELLED].indexOf(invitationStatus) >= 0
   );
 
   const showShare =
-    type === Invitation.Type.MULTIUSE ||
+    multiUse ||
     [Invitation.State.INIT, Invitation.State.CONNECTING, Invitation.State.CONNECTED].indexOf(invitationStatus) >= 0;
 
   const showAuthCode = invitationStatus === Invitation.State.READY_FOR_AUTHENTICATION;
@@ -147,9 +147,9 @@ export const InvitationListItemImpl = ({
       classNames={['flex gap-2 pis-3 pie-1 items-center relative', props.classNames]}
     >
       <ListItem.Heading classNames='sr-only'>
-        {t(type === Invitation.Type.MULTIUSE ? 'invite many list item label' : 'invite one list item label')}
+        {t(multiUse ? 'invite many list item label' : 'invite one list item label')}
       </ListItem.Heading>
-      {type === Invitation.Type.MULTIUSE && (
+      {multiUse && (
         <AvatarStackEffect status={avatarStatus} animation={avatarAnimation} reverseEffects={reverseEffects} />
       )}
       <Tooltip.Root>
@@ -162,7 +162,7 @@ export const InvitationListItemImpl = ({
         </Avatar.Root>
         <Tooltip.Portal>
           <Tooltip.Content side='left' classNames='z-[70]'>
-            {t(type === Invitation.Type.MULTIUSE ? 'invite many qr label' : 'invite one qr label')}
+            {t(multiUse ? 'invite many qr label' : 'invite one qr label')}
             <Tooltip.Arrow />
           </Tooltip.Content>
         </Tooltip.Portal>

package/src/components/index.ts

@@ -2,11 +2,13 @@
 // 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/IdentityDialog/IdentityDialog.tsx

@@ -16,7 +16,7 @@ export interface IdentityDialogProps
 }
 
 export const IdentityDialog = (props: IdentityDialogProps) => {
-  const titleId = useId('spaceDialog__title');
+  const titleId = useId('identityDialog__title', props.title);
   return (
     <Dialog.Root defaultOpen onOpenChange={(open) => open || props.onDone?.()}>
       <Dialog.Portal>

package/src/composites/Shell/Shell.tsx

@@ -11,6 +11,7 @@ import { useSpace } from '@dxos/react-client/echo';
 import { IdentityDialog } from '../IdentityDialog';
 import { JoinDialog } from '../JoinDialog';
 import { SpaceDialog } from '../SpaceDialog';
+import { StatusDialog } from '../StatusDialog';
 
 export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
   const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState<LayoutRequest>({
@@ -41,12 +42,18 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
   }, [runtime, layout, space]);
 
   switch (layout) {
+    case ShellLayout.STATUS:
+      return <StatusDialog />;
     case ShellLayout.INITIALIZE_IDENTITY:
+    case ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION:
       return (
         <JoinDialog
           mode='halo-only'
+          initialDisposition={
+            layout === ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION ? 'accept-halo-invitation' : 'default'
+          }
           initialInvitationCode={invitationCode}
-          onCancelResetIdentity={() => runtime.setLayout({ layout: ShellLayout.IDENTITY })}
+          onCancelResetStorage={() => runtime.setLayout({ layout: ShellLayout.IDENTITY })}
           onDone={() => {
             void runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
@@ -54,22 +61,27 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
         />
       );
 
-    // TODO(wittjosiah): Jump straight to specific step if SHARE or EDIT are specified.
     case ShellLayout.IDENTITY:
     case ShellLayout.SHARE_IDENTITY:
     case ShellLayout.EDIT_PROFILE:
       return (
         <IdentityDialog
           createInvitationUrl={(invitationCode) => `${origin}?deviceInvitationCode=${invitationCode}`}
-          onResetDevice={async () => {
+          onResetStorage={async () => {
+            runtime.setLayout({ layout: ShellLayout.STATUS });
             await client.reset();
-            await runtime.setAppContext({ display: ShellDisplay.NONE, reload: true });
+            return runtime.setAppContext({ display: ShellDisplay.NONE, reload: true });
+          }}
+          onJoinNewIdentity={async () => {
+            runtime.setLayout({ layout: ShellLayout.STATUS });
+            await client.reset();
+            return runtime.setLayout({ layout: ShellLayout.INITIALIZE_IDENTITY_FROM_INVITATION });
           }}
-          onJoinNewIdentity={() => runtime.setLayout({ layout: ShellLayout.INITIALIZE_IDENTITY })}
           onDone={async () => {
             await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
           }}
+          initialDisposition={layout === ShellLayout.SHARE_IDENTITY ? 'manage-device-invitation' : 'default'}
         />
       );
 

package/src/composites/StatusDialog/StatusDialog.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { AlertDialog, useId } from '@dxos/react-ui';
+
+import { StatusPanel } from '../../panels';
+
+export const StatusDialog = () => {
+  const titleId = useId('statusDialog__title');
+  return (
+    <AlertDialog.Root open>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay>
+          <AlertDialog.Content aria-labelledby={titleId}>
+            <StatusPanel titleId={titleId} />
+          </AlertDialog.Content>
+        </AlertDialog.Overlay>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+};

package/src/composites/StatusDialog/index.ts

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

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,122 @@ import {
   type IdentityPanelProps,
 } from './IdentityPanelProps';
 import { useIdentityMachine } from './identityMachine';
-import { AgentForm, DeviceManager, IdentityActionChooser, ProfileForm, SignOutChooser } from './steps';
+import { IdentityActionChooser } from './steps';
 import { useAgentHandlers } from './useAgentHandlers';
-import { Viewport, Heading, CloseButton } from '../../components';
-import { InvitationManager } from '../../steps';
+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, 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={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>
   );
@@ -47,18 +148,18 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     titleId,
     activeView,
     onUpdateProfile,
-    onResetDevice,
+    onResetStorage,
     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:
@@ -66,9 +167,13 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     }
   }, [activeView, t]);
 
+  const onCancelReset = () => rest.send?.('unchooseAction');
+
   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}>
@@ -81,28 +186,24 @@ 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 classNames={viewStyles} id='confirm join new identity'>
+            <ConfirmReset
+              active={activeView === 'confirm join new identity'}
+              {...rest}
+              mode='join new identity'
+              onConfirm={onJoinNewIdentity}
+              onCancel={onCancelReset}
             />
           </Viewport.View>
-          <Viewport.View classNames={viewStyles} id='signing out'>
-            <SignOutChooser
-              send={rest.send}
-              active={activeView === 'signing out'}
-              onResetDevice={onResetDevice}
-              onJoinNewIdentity={onJoinNewIdentity}
+          <Viewport.View classNames={viewStyles} id='confirm reset storage'>
+            <ConfirmReset
+              active={activeView === 'confirm reset storage'}
+              {...rest}
+              mode='reset storage'
+              onConfirm={onResetStorage}
+              onCancel={onCancelReset}
             />
           </Viewport.View>
-          <Viewport.View classNames={viewStyles} id='agent manager'>
-            <AgentForm send={rest.send} active={activeView === 'agent manager'} {...rest} />
-          </Viewport.View>
         </Viewport.Views>
       </Viewport.Root>
     </DensityProvider>
@@ -120,6 +221,7 @@ const IdentityPanelWithInvitationImpl = ({
 export const IdentityPanel = ({
   titleId: propsTitleId,
   createInvitationUrl = (code) => code,
+  initialDisposition = 'default',
   ...props
 }: IdentityPanelProps) => {
   const titleId = useId('identityPanel__heading', propsTitleId);
@@ -132,7 +234,13 @@ export const IdentityPanel = ({
     log.error('IdentityPanel rendered with no active identity.');
     return null;
   }
-  const [identityState, identitySend, identityService] = useIdentityMachine(client);
+  const [identityState, identitySend, identityService] = useIdentityMachine(client, {
+    context: { initialDisposition },
+  });
+
+  const { swarm: connectionState } = useNetworkStatus();
+
+  const handleChangeConnectionState = async (nextState: ConnectionState) => client?.mesh.updateConfig(nextState);
 
   useEffect(() => {
     const subscription = identityService.subscribe((state) => {
@@ -148,14 +256,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('signingOut'):
-        return 'signing out';
-      case [{ managingAgent: 'idle' }, { managingAgent: 'pending' }].some(identityState.matches):
-        return 'agent manager';
+      case identityState.matches('confirmingResetStorage'):
+        return 'confirm reset storage';
+      case identityState.matches('confirmingJoinNewIdentity'):
+        return 'confirm join new identity';
       default:
         return 'identity action chooser';
     }
@@ -175,6 +279,8 @@ export const IdentityPanel = ({
     titleId,
     createInvitationUrl,
     onUpdateProfile,
+    connectionState,
+    onChangeConnectionState: handleChangeConnectionState,
     ...agentProps,
   } satisfies IdentityPanelImplProps;