@dxos/shell 0.3.11-main.fbbdc2a → 0.3.11-main.fc97a54

package/src/composites/Shell/Shell.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { type LayoutRequest, ShellDisplay, ShellLayout, type ShellRuntime } from '@dxos/react-client';
+import { type LayoutRequest, ShellDisplay, ShellLayout, type ShellRuntime, useClient } from '@dxos/react-client';
 import { useSpace } from '@dxos/react-client/echo';
 
 import { IdentityDialog } from '../IdentityDialog';
@@ -13,12 +13,14 @@ import { JoinDialog } from '../JoinDialog';
 import { SpaceDialog } from '../SpaceDialog';
 
 export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: string }) => {
-  const [{ layout, invitationCode, spaceKey }, setLayout] = useState<LayoutRequest>({
+  const [{ layout, invitationCode, spaceKey, target }, setLayout] = useState<LayoutRequest>({
     layout: runtime.layout,
     invitationCode: runtime.invitationCode,
     spaceKey: runtime.spaceKey,
+    target: runtime.target,
   });
 
+  const client = useClient();
   const space = useSpace(spaceKey);
 
   useEffect(() => {
@@ -58,6 +60,11 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
       return (
         <IdentityDialog
           createInvitationUrl={(invitationCode) => `${origin}?deviceInvitationCode=${invitationCode}`}
+          onResetDevice={async () => {
+            await client.reset();
+            await runtime.setAppContext({ display: ShellDisplay.NONE, reload: true });
+          }}
+          onJoinNewIdentity={() => runtime.setLayout({ layout: ShellLayout.INITIALIZE_IDENTITY })}
           onDone={async () => {
             await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
@@ -69,6 +76,7 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
       return space ? (
         <SpaceDialog
           space={space}
+          target={target}
           createInvitationUrl={(invitationCode) => `${origin}?spaceInvitationCode=${invitationCode}`}
           onDone={async () => {
             await runtime.setAppContext({ display: ShellDisplay.NONE });
@@ -82,7 +90,12 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
         <JoinDialog
           initialInvitationCode={invitationCode}
           onDone={async (result) => {
-            await runtime.setAppContext({ display: ShellDisplay.NONE, spaceKey: result?.spaceKey ?? undefined });
+            const target = result?.target ?? undefined;
+            await runtime.setAppContext({
+              display: ShellDisplay.NONE,
+              spaceKey: result?.spaceKey ?? undefined,
+              target,
+            });
             runtime.setLayout({ layout: ShellLayout.DEFAULT });
           }}
           onExit={async () => {

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

@@ -4,10 +4,11 @@
 
 import '@dxosTheme';
 
-import { faker } from '@faker-js/faker';
 import React from 'react';
 
+import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
+import { DeviceKind } from '@dxos/react-client/halo';
 import { Invitation } from '@dxos/react-client/invitations';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -16,6 +17,7 @@ import type { IdentityPanelImplProps } from './IdentityPanelProps';
 import { IdentityActionChooserImpl } from './steps';
 import { StorybookDialog } from '../../components/StorybookDialog';
 import { InvitationManager, type InvitationManagerProps } from '../../steps';
+import { osTranslations } from '../../translations';
 
 faker.seed(1234);
 
@@ -30,12 +32,13 @@ const noOpProps: IdentityPanelImplProps = {
       displayName: faker.person.firstName(),
     },
   },
+  devices: [],
 };
 
 export default {
-  title: 'Panels/Identity',
+  title: 'react-shell/IdentityPanel',
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  parameters: { translations: [osTranslations], chromatic: { disableSnapshot: false } },
 };
 
 export const IdentityActionChooser = () => {
@@ -50,6 +53,45 @@ 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,
+          devices: [
+            { deviceKey: PublicKey.random(), kind: DeviceKind.CURRENT },
+            { deviceKey: PublicKey.random(), kind: DeviceKind.TRUSTED },
+            { deviceKey: PublicKey.random(), kind: DeviceKind.TRUSTED },
+          ],
+        }}
+        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

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useMemo } from 'react';
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { type Identity, useIdentity, useDevices, useHaloInvitations } from '@dxos/react-client/halo';
 import { useInvitationStatus } from '@dxos/react-client/invitations';
 import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
 import { Avatar, DensityProvider, useId, useJdenticonHref, useTranslation } from '@dxos/react-ui';
@@ -17,7 +17,8 @@ import {
   type IdentityPanelProps,
 } from './IdentityPanelProps';
 import { useIdentityMachine } from './identityMachine';
-import { IdentityActionChooser, ProfileForm } from './steps';
+import { AgentForm, DeviceManager, IdentityActionChooser, ProfileForm, SignOutChooser } from './steps';
+import { useAgentHandlers } from './useAgentHandlers';
 import { Viewport, Heading, CloseButton } from '../../components';
 import { InvitationManager } from '../../steps';
 
@@ -31,7 +32,7 @@ const IdentityHeading = ({ titleId, title, identity, onDone }: IdentityPanelHead
         <Avatar.Frame classNames='block mbs-4 mbe-2 mli-auto chromatic-ignore'>
           <Avatar.Fallback href={fallbackHref} />
         </Avatar.Frame>
-        <Avatar.Label classNames='block text-center font-light text-xl'>
+        <Avatar.Label classNames='block text-center font-light text-xl' data-testid='identityHeading.displayName'>
           {identity.profile?.displayName ?? generateName(identity.identityKey.toHex())}
         </Avatar.Label>
       </Avatar.Root>
@@ -45,6 +46,8 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
     titleId,
     activeView,
     onUpdateProfile,
+    onResetDevice,
+    onJoinNewIdentity,
     IdentityActionChooser: IdentityActionChooserComponent = IdentityActionChooser,
     InvitationManager: InvitationManagerComponent = InvitationManager,
     onDone,
@@ -53,13 +56,15 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
   const { t } = useTranslation('os');
   const title = useMemo(() => {
     switch (activeView) {
-      case 'device manager':
+      case 'agent manager':
+        return 'Manage Agent';
       case 'device invitation manager':
-        return t('choose devices label');
+        return t('choose add device label');
       default:
         return t('identity heading');
     }
   }, [activeView, t]);
+
   return (
     <DensityProvider density='fine'>
       <IdentityHeading {...{ identity, titleId, title, onDone }} />
@@ -75,6 +80,9 @@ 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}
@@ -83,7 +91,17 @@ export const IdentityPanelImpl = (props: IdentityPanelImplProps) => {
               onUpdateProfile={onUpdateProfile}
             />
           </Viewport.View>
-          {/* <Viewport.View id='signing out'></Viewport.View> */}
+          <Viewport.View classNames={viewStyles} id='signing out'>
+            <SignOutChooser
+              send={rest.send}
+              active={activeView === 'signing out'}
+              onResetDevice={onResetDevice}
+              onJoinNewIdentity={onJoinNewIdentity}
+            />
+          </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>
@@ -105,7 +123,10 @@ export const IdentityPanel = ({
 }: IdentityPanelProps) => {
   const titleId = useId('identityPanel__heading', propsTitleId);
   const client = useClient();
+  const devices = useDevices();
   const identity = useIdentity();
+  const invitations = useHaloInvitations();
+  const agentProps = useAgentHandlers({ client, identity, invitations });
   if (!identity) {
     console.error('IdentityPanel rendered with no active identity.');
     return null;
@@ -126,10 +147,14 @@ 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 'identity exit';
+      case identityState.matches('signingOut'):
+        return 'signing out';
+      case [{ managingAgent: 'idle' }, { managingAgent: 'pending' }].some(identityState.matches):
+        return 'agent manager';
       default:
         return 'identity action chooser';
     }
@@ -143,11 +168,13 @@ export const IdentityPanel = ({
   const implProps = {
     ...props,
     identity,
+    devices,
     activeView,
     send: identitySend,
     titleId,
     createInvitationUrl,
     onUpdateProfile,
+    ...agentProps,
   } satisfies IdentityPanelImplProps;
 
   return identityState.context.invitation ? (

package/src/panels/IdentityPanel/IdentityPanelProps.ts

@@ -2,20 +2,38 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type cloneElement } from 'react';
-import { type Event, type SingleOrArray } from 'xstate';
+import type { cloneElement } from 'react';
+import type { Event, SingleOrArray } from 'xstate';
 
-import type { Identity } from '@dxos/react-client/halo';
-import { type InvitationStatus } from '@dxos/react-client/invitations';
+import type { Device, Identity } from '@dxos/react-client/halo';
+import type { InvitationStatus } from '@dxos/react-client/invitations';
 
-import { type IdentityEvent } from './identityMachine';
-import { type InvitationManagerProps } from '../../steps';
+import type { IdentityEvent } from './identityMachine';
+import type { InvitationManagerProps } from '../../steps';
+
+export type AgentFormProps = {
+  onAgentCreate?: () => Promise<void>;
+  onAgentDestroy?: () => Promise<void>;
+  agentStatus?: string;
+  agentActive?: boolean;
+  agentProviderDisabled?: boolean;
+  validationMessage?: string;
+};
 
 export type IdentityPanelImplProps = {
   titleId: string;
-  activeView: 'device manager' | 'update profile form' | 'device invitation manager' | 'identity action chooser';
+  activeView:
+    | 'device manager'
+    | 'agent manager'
+    | 'update profile form'
+    | 'device invitation manager'
+    | 'identity action chooser'
+    | 'signing out';
   identity: Identity;
+  devices: Device[];
   onUpdateProfile?: (profile: NonNullable<Identity['profile']>) => Promise<void>;
+  onResetDevice?: () => Promise<void>;
+  onJoinNewIdentity?: () => void;
   createInvitationUrl: (invitationCode: string) => string;
   send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
   onDone?: () => void;
@@ -23,7 +41,8 @@ export type IdentityPanelImplProps = {
   invitationUrl?: string;
   IdentityActionChooser?: React.FC<IdentityPanelStepProps>;
   InvitationManager?: React.FC<InvitationManagerProps>;
-} & Partial<InvitationStatus>;
+} & Partial<InvitationStatus> &
+  Partial<AgentFormProps>;
 
 export type IdentityPanelProps = Partial<Omit<IdentityPanelImplProps, 'send' | 'activeView' | 'identity'>>;
 

package/src/panels/IdentityPanel/identityMachine.ts

@@ -19,7 +19,7 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseDevices' | 'chooseProfile' | /* 'chooseSignOut' | */ 'unchooseAction';
+  type: 'chooseDevices' | 'chooseAgent' | 'chooseProfile' | 'chooseSignOut' | 'sigingOut' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -58,6 +58,14 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
     states: {
       choosingAction: {},
       managingDeviceInvitation: {},
+      managingAgent: {
+        initial: 'idle',
+        states: {
+          idle: {},
+          pending: {},
+        },
+      },
+      managingDevices: {},
       managingProfile: {
         initial: 'idle',
         states: {
@@ -69,15 +77,16 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
           updateProfile: { target: '.pending', actions: 'log' },
         },
       },
-      // signingOut: {},
+      signingOut: {},
     },
     on: {
       unchooseAction: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
-      chooseDevices: { target: '.managingDeviceInvitation', 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' },
+      chooseSignOut: { target: '.signingOut', actions: 'log' },
+      chooseAgent: { target: '.managingAgent', actions: 'log' },
     },
   },
   {

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

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

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

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+import { type Device } from '@dxos/react-client/halo';
+import { useTranslation } from '@dxos/react-ui';
+
+import { Action, Actions, DeviceList } from '../../../components';
+import type { IdentityPanelStepProps } from '../IdentityPanelProps';
+import type { IdentityEvent } from '../identityMachine';
+
+export interface DeviceManagerProps extends Omit<IdentityPanelStepProps, 'send'> {
+  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
+  devices: Device[];
+}
+
+export const DeviceManager = ({ devices, active, send }: DeviceManagerProps) => {
+  const { t } = useTranslation('os');
+  const disabled = !active;
+
+  return (
+    <>
+      <div role='none' className='grow'>
+        <DeviceList devices={devices} />
+      </div>
+      <Actions>
+        <Action
+          variant='ghost'
+          disabled={disabled}
+          onClick={() => send?.({ type: 'unchooseAction' })}
+          data-testid={'manage-devices-back'}
+        >
+          {t('back label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretRight, Plus, Power, UserGear } from '@phosphor-icons/react';
+import { CaretRight, Devices, Plus, Power, UserGear, HardDrive } from '@phosphor-icons/react';
 import React, { useCallback } from 'react';
 
 import { useClient } from '@dxos/react-client';
@@ -63,6 +63,11 @@ export const IdentityActionChooserImpl = ({
     <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-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'
@@ -70,6 +75,11 @@ export const IdentityActionChooserImpl = ({
             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>
@@ -79,9 +89,8 @@ export const IdentityActionChooserImpl = ({
             <CaretRight weight='bold' className={getSize(4)} />
           </Action>
           <Action
-            disabled
-            data-testid='sign-out'
-            onClick={() => {} /* send({ type: 'chooseSignOut' }) */}
+            data-testid='devices-panel.sign-out'
+            onClick={() => send?.({ type: 'chooseSignOut' })}
             classNames='plb-4'
           >
             <Power className={getSize(6)} />

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

@@ -37,7 +37,7 @@ export const ProfileForm = (props: ProfileFormProps) => {
 };
 
 // TODO(zhenyasav): impl shouldn't need send()
-export const ProfileFormImpl = (props: ProfileFormImplProps) => {
+const ProfileFormImpl = (props: ProfileFormImplProps) => {
   const { active, profile, send, onUpdateProfile, validationMessage } = props;
   const disabled = !active;
   const { t } = useTranslation('os');

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

@@ -0,0 +1,84 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Warning } from '@phosphor-icons/react';
+import React from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+import { Message, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { Action, Actions } from '../../../components';
+import { type IdentityPanelStepProps } from '../IdentityPanelProps';
+import { type IdentityEvent } from '../identityMachine';
+
+export interface SignOutChooserProps extends Omit<IdentityPanelStepProps, 'send'> {
+  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
+  onResetDevice?: () => Promise<void>;
+  onJoinNewIdentity?: () => void;
+}
+
+export const SignOutChooser = (props: SignOutChooserProps) => {
+  const { t } = useTranslation('os');
+  const onResetDevice = () => {
+    if (window.confirm(t('reset device confirm message'))) {
+      void props.onResetDevice?.();
+    }
+  };
+  return (
+    <SignOutChooserImpl
+      disabled={!props.active}
+      onBack={() => props.send?.({ type: 'unchooseAction' })}
+      onResetDevice={onResetDevice}
+      onJoinNewIdentity={props.onJoinNewIdentity}
+    />
+  );
+};
+
+export type SignOutChooserImplProps = {
+  disabled?: boolean;
+  onResetDevice?: () => void;
+  onJoinNewIdentity?: () => void;
+  onBack?: () => void;
+};
+
+const SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack }: SignOutChooserImplProps) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Message.Root valence='error'>
+          <Message.Title>
+            <Warning className={mx(getSize(6), 'inline mie-2')} />
+            {t('sign out chooser title')}
+          </Message.Title>
+          <Message.Body>{t('sign out chooser message')}</Message.Body>
+        </Message.Root>
+      </div>
+      <Actions>
+        <Action disabled={disabled} onClick={onBack}>
+          {t('back label')}
+        </Action>
+        <Action
+          variant='primary'
+          data-testid='sign-out.join-new-identity'
+          classNames='!bg-error-500 hover:!bg-error-550'
+          disabled={disabled}
+          onClick={onJoinNewIdentity}
+        >
+          {t('join new identity label')}
+        </Action>
+        <Action
+          variant='primary'
+          data-testid='sign-out.reset-device'
+          classNames='!bg-error-500 hover:!bg-error-550'
+          disabled={disabled}
+          onClick={onResetDevice}
+        >
+          {t('reset device label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

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

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