@dxos/shell 0.3.11-main.690ca41 → 0.3.11-main.6cabbc5

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>
@@ -78,12 +88,7 @@ export const IdentityActionChooserImpl = ({
             <span className='grow mli-3'>{t('choose profile label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />
           </Action>
-          <Action
-            disabled
-            data-testid='sign-out'
-            onClick={() => {} /* send({ type: 'chooseSignOut' }) */}
-            classNames='plb-4'
-          >
+          <Action data-testid='sign-out' onClick={() => send?.({ type: 'chooseSignOut' })} classNames='plb-4'>
             <Power className={getSize(6)} />
             <span className='grow mli-3'>{t('choose sign out label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />

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,82 @@
+//
+// 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'
+          classNames='!bg-error-500 hover:!bg-error-550'
+          disabled={disabled}
+          onClick={onJoinNewIdentity}
+        >
+          {t('join new identity label')}
+        </Action>
+        <Action
+          variant='primary'
+          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';

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { type CancellableInvitation } from '@dxos/client-protocol';
+import { invariant } from '@dxos/invariant';
+import { useAgentHostingProviderClient, type Client } from '@dxos/react-client';
+import { type Identity } from '@dxos/react-client/halo';
+import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+
+export const useAgentHandlers = ({
+  client,
+  invitations,
+  identity,
+}: {
+  client: Client;
+  invitations: CancellableInvitation[];
+  identity: Identity | null;
+}) => {
+  const [validationMessage, setValidationMessage] = useState('');
+  const [agentStatus, setAgentStatus] = useState('');
+  const [agentActive, setAgentActive] = useState(false);
+  const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
+
+  useEffect(() => {
+    const fetchAgentStatus = async () => {
+      // TODO(nf): if agent exists, subscribe to updates instead of oneshot status
+      if (agentHostingProviderClient) {
+        const agentStatus = await agentHostingProviderClient?.getAgent(identity?.identityKey.truncate() ?? 'foo');
+        if (agentStatus) {
+          setAgentActive(true);
+          setAgentStatus(agentStatus);
+        } else {
+          setAgentActive(false);
+          setValidationMessage('No agent deployed via provider.');
+        }
+      } else {
+        setValidationMessage('No agent provider configured.');
+      }
+    };
+    void fetchAgentStatus();
+  }, []);
+
+  const handleAgentCreate = useCallback(async (invitation: Invitation) => {
+    const invitationCode = InvitationEncoder.encode(invitation);
+    if (invitation.state === Invitation.State.CONNECTING) {
+      console.log(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+      invariant(identity, 'Identity not found');
+      if (agentHostingProviderClient) {
+        try {
+          const res = await agentHostingProviderClient?.createAgent(invitationCode, identity.identityKey.truncate());
+          // TODO(nf): human-consumable response from API
+          setAgentStatus(res);
+          setAgentActive(true);
+          setValidationMessage('');
+        } catch (err: any) {
+          setValidationMessage(`error creating agent: ${err.message}`);
+        }
+      }
+    }
+  }, []);
+
+  const onAgentCreate = async () => {
+    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 });
+
+    invitation.subscribe(handleAgentCreate);
+  };
+
+  const onAgentDestroy = async () => {
+    const identity = client.halo.identity.get();
+    invariant(identity, 'Identity not found');
+    try {
+      await agentHostingProviderClient?.destroyAgent(identity.identityKey.truncate());
+      setValidationMessage('No agent deployed via provider.');
+      setAgentStatus('');
+      setAgentActive(false);
+    } catch (err: any) {
+      setValidationMessage(`error destroying agent: ${err.message}`);
+    }
+  };
+
+  return { onAgentCreate, onAgentDestroy, validationMessage, agentStatus, agentActive };
+};

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -193,8 +193,6 @@ export const JoinPanel = ({
     },
   });
 
-  console.log('[joinState]', joinState);
-
   useEffect(() => {
     const subscription = joinService.subscribe((state) => {
       log('[state]', state);
@@ -368,6 +366,7 @@ export const JoinPanel = ({
       identityKey: joinState.context.halo.invitation?.identityKey ?? null,
       swarmKey: joinState.context.halo.invitation?.swarmKey ?? null,
       spaceKey: joinState.context.halo.invitation?.spaceKey ?? null,
+      target: joinState.context.halo.invitation?.target ?? null,
     });
   }, [joinState, propsOnDone]);
 
@@ -376,6 +375,7 @@ export const JoinPanel = ({
       identityKey: joinState.context.space.invitation?.identityKey ?? null,
       swarmKey: joinState.context.space.invitation?.swarmKey ?? null,
       spaceKey: joinState.context.space.invitation?.spaceKey ?? null,
+      target: joinState.context.space.invitation?.target ?? null,
     });
   }, [joinState, propsOnDone]);
 

package/src/panels/JoinPanel/joinMachine.ts

@@ -397,7 +397,7 @@ const joinMachine = createMachine<JoinMachineContext, JoinEvent>(
           event.type.includes('Space') ? { ...context.space, invitation: event.invitation } : context.space,
       }),
       log: (context, event) => {
-        log.info('[transition]', {
+        log('[transition]', {
           event,
           haloInvitation: context.halo.invitation,
           spaceInvitation: context.space.invitation,

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -129,6 +129,7 @@ export const SpaceManagerWithEvenMoreInvites = () => {
                       identityKey = PublicKey.random(),
                       swarmKey,
                       spaceKey = PublicKey.random(),
+                      target = null,
                     } = invitation;
                     return (
                       <InvitationListItemImpl
@@ -140,7 +141,7 @@ export const SpaceManagerWithEvenMoreInvites = () => {
                           invitationCode: id,
                           authCode: state === Invitation.State.READY_FOR_AUTHENTICATION ? '123414' : undefined,
                           id,
-                          result: { identityKey, swarmKey, spaceKey },
+                          result: { identityKey, swarmKey, spaceKey, target },
                           cancel: () => {},
                           authenticate: async (authCode: string) => {},
                           connect: () => {},

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -39,17 +39,19 @@ export const SpacePanelImpl = (props: SpacePanelImplProps) => {
     titleId,
     activeView,
     space,
+    target,
     SpaceManager: SpaceManagerComponent = SpaceManager,
     InvitationManager: InvitationManagerComponent = InvitationManager,
     ...rest
   } = props;
+
   return (
     <DensityProvider density='fine'>
       <SpacePanelHeading {...rest} {...{ titleId, space }} />
       <Viewport.Root activeView={activeView}>
         <Viewport.Views>
           <Viewport.View id='space manager' classNames={stepStyles}>
-            <SpaceManagerComponent active={activeView === 'space manager'} space={space} {...rest} />
+            <SpaceManagerComponent active={activeView === 'space manager'} space={space} target={target} {...rest} />
           </Viewport.View>
           <Viewport.View id='space invitation manager' classNames={stepStyles}>
             <InvitationManagerComponent
@@ -115,6 +117,7 @@ export const SpacePanel = ({
   };
 
   return spaceState.context.invitation ? (
+    // TODO(wittjosiah): Unused? Remove?
     <SpacePanelWithInvitationImpl {...implProps} invitation={spaceState.context.invitation} />
   ) : (
     <SpacePanelImpl {...implProps} />

package/src/panels/SpacePanel/SpacePanelProps.ts

@@ -16,6 +16,7 @@ export type SpacePanelImplProps = {
   titleId: string;
   activeView: string;
   send: (event: SingleOrArray<Event<any>>) => void;
+  target?: string;
   createInvitationUrl: (invitationCode: string) => string;
   space: ErsatzSpace | Space;
   invitationUrl?: string;

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

@@ -23,6 +23,7 @@ import {
 import { type SpacePanelStepProps } from '../SpacePanelProps';
 
 export type SpaceManagerImplProps = SpacePanelStepProps & {
+  target?: string;
   invitations?: CancellableInvitationObservable[];
   showInactiveInvitations?: boolean;
   inviteActions?: Record<string, ActionMenuItem>;
@@ -35,7 +36,7 @@ const activeActionKey = 'dxos:react-shell/space-manager/active-action';
 export type SpaceManagerProps = SpaceManagerImplProps & {};
 
 export const SpaceManager = (props: SpaceManagerProps) => {
-  const { space } = props;
+  const { space, target } = props;
   const { t } = useTranslation('os');
   const config = useConfig();
 
@@ -57,6 +58,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
         const invitation = space.share?.({
           type: Invitation.Type.INTERACTIVE,
           authMethod: Invitation.AuthMethod.SHARED_SECRET,
+          target,
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
           invitation.subscribe(onInvitationEvent);
@@ -71,6 +73,7 @@ export const SpaceManager = (props: SpaceManagerProps) => {
         const invitation = space.share?.({
           type: Invitation.Type.MULTIUSE,
           authMethod: Invitation.AuthMethod.NONE,
+          target,
         });
         if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
           invitation.subscribe(onInvitationEvent);

package/src/translations/locales/en-US.ts

@@ -69,7 +69,8 @@ export const os = {
   'selecting identity heading': 'Selecting identity',
   'devices heading': 'Devices',
   'identity heading': 'Profile settings',
-  'choose devices label': 'Add device',
+  'choose add device label': 'Add device',
+  'choose devices label': 'Manage devices',
   'choose profile label': 'Edit profile',
   'choose sign out label': 'Sign out',
   'empty space members message': 'There is nobody in this space yet.',
@@ -98,4 +99,9 @@ export const os = {
     'This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.',
   'failed to reset identity message': 'Failed to reset identity.',
   'confirmation value': 'CONFIRM',
+  'sign out chooser title': 'DANGER ZONE',
+  'sign out chooser message': 'Proceeding with either action below will erase all data on this device.',
+  'join new identity label': 'Join a new identity',
+  'reset device label': 'Reset device',
+  'reset device confirm message': 'Are you sure you want to reset your device? All data will be lost.',
 };