@dxos/shell 0.3.11-main.a8d7a97 → 0.3.11-main.afa73e0

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/IdentityActionChooser.tsx

@@ -89,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/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,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './AgentForm';
 export * from './DeviceManager';
 export * from './IdentityActionChooser';
 export * from './ProfileForm';
-export * from './AgentPanel';
+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/joinMachine.ts

@@ -15,7 +15,7 @@ import {
 } from 'xstate';
 
 import { log } from '@dxos/log';
-import type { Client } from '@dxos/react-client';
+import { type Client, AlreadyJoinedError } from '@dxos/react-client';
 import { type Identity } from '@dxos/react-client/halo';
 import { type AuthenticatingInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
@@ -133,6 +133,12 @@ const getInvitationSubscribable = (
           }
         },
         (error: any) => {
+          if (error instanceof AlreadyJoinedError) {
+            log('[already joined]', { Kind, error });
+            next({ type: `success${Kind}Invitation`, invitation: invitation.get() });
+            return complete?.();
+          }
+
           log.error('[invitation errored]', { Kind, error });
           next({ type: `fail${Kind}Invitation`, reason: 'error' });
           return onError?.(error);
@@ -437,9 +443,8 @@ const useJoinMachine = (
     ({ halo }: JoinMachineContext) => {
       if (halo.unredeemedCode) {
         try {
-          const invitationObservable = client.halo.join(
-            InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode)),
-          );
+          const invitation = InvitationEncoder.decode(defaultCodeFromUrl('halo', halo.unredeemedCode));
+          const invitationObservable = client.halo.join(invitation);
           return {
             ...halo,
             invitationObservable,
@@ -461,20 +466,12 @@ const useJoinMachine = (
       if (space.unredeemedCode) {
         try {
           const invitation = InvitationEncoder.decode(defaultCodeFromUrl('space', space.unredeemedCode));
-          // Don’t join with the invitation if it has already succeeded.
-          if (space.succeededKeys?.has(invitation.spaceKey?.toHex() ?? 'never')) {
-            return {
-              ...space,
-              invitation,
-            };
-          } else {
-            const invitationObservable = client.spaces.join(invitation);
-            return {
-              ...space,
-              invitationObservable,
-              invitationSubscribable: getInvitationSubscribable('Space', invitationObservable),
-            };
-          }
+          const invitationObservable = client.spaces.join(invitation);
+          return {
+            ...space,
+            invitationObservable,
+            invitationSubscribable: getInvitationSubscribable('Space', invitationObservable),
+          };
         } catch (err) {
           log.error('Could not redeem space invitation code', err);
           return space;

package/src/panels/JoinPanel/steps/AdditionMethodChooser.tsx

@@ -35,7 +35,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           before={<Plus className={getSize(6)} />}
           onClick={() => send({ type: 'createIdentity' })}
           data-autofocus='choosingAuthMethod'
-          data-testid='create-identity'
+          data-testid='identity-chooser.create-identity'
         >
           {t('create identity label')}
         </CompoundButton>
@@ -44,7 +44,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           description={t('join identity description')}
           before={<QrCode className={getSize(6)} />}
           onClick={() => send({ type: 'acceptHaloInvitation' })}
-          data-testid='join-identity'
+          data-testid='identity-chooser.join-identity'
         >
           {t('join identity label')}
         </CompoundButton>
@@ -55,7 +55,7 @@ export const AdditionMethodChooser = (viewStateProps: AdditionMethodChooserProps
           description={t('recover identity description')}
           before={<Textbox className={getSize(6)} />}
           onClick={() => send({ type: 'recoverIdentity' })}
-          data-testid='recover-identity'
+          data-testid='identity-chooser.recover-identity'
         >
           {t('recover identity label')}
         </CompoundButton>

package/src/panels/JoinPanel/steps/InvitationInput.tsx

@@ -39,12 +39,17 @@ export const InvitationInput = (props: InvitationInputProps) => {
     unredeemedCode && setInputValue(unredeemedCode ?? '');
   }, [unredeemedCode]);
 
-  const handleNext = () =>
+  const handleNext = () => {
+    if (inputValue.trim().length === 0) {
+      return;
+    }
+
     send({
       type: `set${Kind}InvitationCode`,
       code: invitationCodeFromUrl(inputValue),
       ...(Kind === 'Space' && { succeededKeys }),
     });
+  };
 
   const exitAction = (
     <Action
@@ -62,6 +67,7 @@ export const InvitationInput = (props: InvitationInputProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           label={<StepHeading>{t('invitation input label')}</StepHeading>}
+          // TODO(burdon): Translation.
           placeholder='Type an invitation code'
           disabled={disabled}
           value={inputValue}

package/src/panels/JoinPanel/steps/ResetIdentity.tsx

@@ -50,7 +50,7 @@ export const ResetIdentityImpl = ({ disabled, validationMessage, onConfirm }: Re
           {...{ validationMessage }}
           label={<StepHeading>{t('reset identity input label', { confirmationValue })}</StepHeading>}
           disabled={disabled}
-          data-testid='identity-input'
+          data-testid='reset-identity-input'
           placeholder={confirmationValue}
           onChange={({ target: { value } }) => setInputValue(value)}
         />

package/src/playwright/invitations-manager.ts

@@ -70,6 +70,10 @@ export class InvitationsManager extends ScopedShellManager {
     return this.peer(id).getByTestId('space-list-item').nth(nth).textContent();
   }
 
+  async getSpaceMembersCount(id: number) {
+    return this.peer(id).getByTestId('space-members-list').locator('li').count();
+  }
+
   async getAuthCode(): Promise<string> {
     return await this._authCode.wait();
   }
@@ -147,7 +151,7 @@ export class InvitationsManager extends ScopedShellManager {
     const peer = this.peer(id);
     // TODO(wittjosiah): Update ids.
     if (type === 'device') {
-      await peer.getByTestId('join-identity').click();
+      await peer.getByTestId('identity-chooser.join-identity').click();
     }
     await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).waitFor({ timeout: 500 });
     await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).fill(invitation);

package/src/playwright/invitations.spec.ts

@@ -185,6 +185,25 @@ test.describe('Invitations', () => {
       expect(await manager.getSpaceName(0, 1)).to.equal(await manager.getSpaceName(1, 1));
     });
 
+    test('already joined', async () => {
+      await manager.createIdentity(0);
+      await manager.createSpace(0);
+      await manager.openPanel(0, 1);
+      const invitation1 = await manager.createInvitation(0, 'space', { authMethod: Invitation.AuthMethod.NONE });
+      const invitation2 = await manager.createInvitation(0, 'space');
+
+      await manager.createIdentity(1);
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation1);
+      await manager.doneInvitation('space', manager.peer(1));
+
+      await manager.openPanel(1, 'join');
+      await manager.acceptInvitation(1, 'space', invitation2);
+      await manager.doneInvitation('space', manager.peer(1));
+
+      expect(await manager.getSpaceMembersCount(0)).to.equal(2);
+    });
+
     test('no auth method', async () => {
       await manager.createIdentity(0);
       await manager.createSpace(0);

package/src/testing/shell-manager.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { ConsoleMessage, Page } from '@playwright/test';
+import type { ConsoleMessage, Dialog, Page } from '@playwright/test';
 
 import { sleep, Trigger } from '@dxos/async';
 
 import { ScopedShellManager } from './scoped-shell-manager';
 
+// TODO(wittjosiah): Normalize data-testids between snake and camel case.
+
 export class ShellManager extends ScopedShellManager {
   private _invitationCode = new Trigger<string>();
   private _authCode = new Trigger<string>();
@@ -27,6 +29,10 @@ export class ShellManager extends ScopedShellManager {
 
   // Getters
 
+  async getDisplayName(): Promise<string | null> {
+    return this.shell.getByTestId('identityHeading.displayName').textContent();
+  }
+
   async isCurrentSpaceViewVisible(): Promise<boolean> {
     return await this.shell.getByTestId('current-space-view').isVisible();
   }
@@ -44,29 +50,50 @@ export class ShellManager extends ScopedShellManager {
     await this.shell.getByTestId('halo-invitation-accepted-done').click();
   }
 
-  async closeShell() {
-    await this.page.keyboard.press('Escape');
+  async createDeviceInvitation(): Promise<string> {
+    this._invitationCode = new Trigger<string>();
+    this._authCode = new Trigger<string>();
+    await this.shell.getByTestId('devices-panel.create-invitation').click();
+    return await this._invitationCode.wait();
   }
 
-  // TODO(wittjosiah): These shortcuts are no longer within the SDK so these commands should live elsewhere.
-  async openCurrentSpace() {
-    await this.page.keyboard.press('Meta+.');
+  async resetDevice() {
+    const handleDialog = async (dialog: Dialog) => {
+      if (dialog.type() === 'confirm') {
+        await dialog.accept();
+      }
+    };
+
+    this.page.on('dialog', handleDialog);
+    await this.shell.getByTestId('devices-panel.sign-out').click();
+    await this.shell.getByTestId('sign-out.reset-device').click();
+    this.page.off('dialog', handleDialog);
   }
 
-  async openSpaceList() {
-    await this.page.keyboard.press('Meta+Shift+>');
+  async joinNewIdentity(invitationCode: string) {
+    await this.shell.getByTestId('devices-panel.sign-out').click();
+    await this.shell.getByTestId('sign-out.join-new-identity').click();
+    await this.shell.getByTestId('reset-identity-input').fill('CONFIRM');
+    await this.shell.getByTestId('reset-identity-input-confirm').click();
+    await this.shell.getByTestId('identity-chooser.join-identity').click();
+    await this.inputInvitation('device', invitationCode, this.shell);
   }
 
-  async showAllSpaces() {
-    await this.shell.getByTestId('show-all-spaces').click();
+  async authenticateDevice(authCode: string, skipDone = true) {
+    // Wait for focus to shift before typing.
+    await sleep(1500);
+    await this.authenticateInvitation('device', authCode, this.shell);
+    // TODO(wittjosiah): When "signing out" and joinging a new identity, the done step seems to be skipped.
+    if (!skipDone) {
+      await this.doneInvitation('device', this.shell);
+    }
   }
 
-  async showCurrentSpace() {
-    await this.shell.getByTestId('show-current-space').click();
+  async closeShell() {
+    await this.page.keyboard.press('Escape');
   }
 
   async createSpaceInvitation(): Promise<string> {
-    await this.openCurrentSpace();
     this._invitationCode = new Trigger<string>();
     this._authCode = new Trigger<string>();
     await this.shell.getByTestId('spaces-panel.create-invitation').click();

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

@@ -99,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.',
 };

package/dist/types/src/panels/IdentityPanel/steps/AgentPanel.d.ts

@@ -1,19 +0,0 @@
-import { type Event, type SingleOrArray } from 'xstate';
-import { type Identity } from '@dxos/react-client/halo';
-import { type IdentityPanelStepProps } from '../IdentityPanelProps';
-import { type IdentityEvent } from '../identityMachine';
-export interface AgentFormProps extends Omit<IdentityPanelStepProps, 'send'> {
-    send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
-    onAgentCreate?: () => Promise<void>;
-    onAgentDestroy?: () => Promise<void>;
-    identity?: Identity;
-}
-export type AgentFormImplProps = AgentFormProps & {
-    agentStatus?: string;
-    agentActive?: boolean;
-    agentProviderDisabled?: boolean;
-    validationMessage?: string;
-};
-export declare const AgentForm: (props: AgentFormProps) => JSX.Element;
-export declare const AgentFormImpl: (props: AgentFormImplProps) => JSX.Element;
-//# sourceMappingURL=AgentPanel.d.ts.map

package/dist/types/src/panels/IdentityPanel/steps/AgentPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/IdentityPanel/steps/AgentPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAIxD,OAAO,EAAE,KAAK,QAAQ,EAAsB,MAAM,yBAAyB,CAAC;AAK5E,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,gBAiF9C,CAAC;AAGF,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAiDtD,CAAC"}