@dxos/shell 0.5.1-main.f02b2c7 → 0.5.1-main.f2d5836

package/src/composites/Shell/run-shell.tsx

@@ -7,8 +7,16 @@ import { createRoot } from 'react-dom/client';
 
 import { DEFAULT_CLIENT_CHANNEL, DEFAULT_SHELL_CHANNEL } from '@dxos/client-protocol';
 import { ShellRuntimeImpl } from '@dxos/client-services';
-import { Client, ClientContext, ClientServicesProxy, Config, SystemStatus } from '@dxos/react-client';
-import { ThemeProvider, Tooltip } from '@dxos/react-ui';
+import {
+  AgentHostingProvider,
+  Client,
+  ClientContext,
+  ClientServicesProxy,
+  Config,
+  ShellDisplay,
+  SystemStatus,
+} from '@dxos/react-client';
+import { Button, Dialog, ThemeProvider, Tooltip, useTranslation } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
@@ -17,22 +25,55 @@ import { ClipboardProvider } from '../../components';
 import { osTranslations } from '../../translations';
 
 export const runShell = async (config: Config = new Config()) => {
-  const services = new ClientServicesProxy(createIFramePort({ channel: DEFAULT_CLIENT_CHANNEL }));
-  const client = new Client({ config, services });
+  // If runtime fails to open then the shell will not be openable.
   const runtime = new ShellRuntimeImpl(createIFramePort({ channel: DEFAULT_SHELL_CHANNEL }));
-  await Promise.all([runtime.open(), client.initialize()]);
-
-  createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-      <ThemeProvider tx={defaultTx} resourceExtensions={[osTranslations]}>
-        <ClientContext.Provider value={{ client, status: SystemStatus.ACTIVE }}>
-          <ClipboardProvider>
-            <Tooltip.Provider>
-              <Shell runtime={runtime} origin={location.origin} />
-            </Tooltip.Provider>
-          </ClipboardProvider>
-        </ClientContext.Provider>
-      </ThemeProvider>
-    </StrictMode>,
+  await runtime.open();
+
+  try {
+    const services = new ClientServicesProxy(createIFramePort({ channel: DEFAULT_CLIENT_CHANNEL }));
+    const client = new Client({ config, services });
+    await client.initialize();
+
+    createRoot(document.getElementById('root')!).render(
+      <StrictMode>
+        <ThemeProvider tx={defaultTx} resourceExtensions={[osTranslations]}>
+          <ClientContext.Provider value={{ client, status: SystemStatus.ACTIVE }}>
+            <ClipboardProvider>
+              <Tooltip.Provider>
+                <AgentHostingProvider>
+                  <Shell runtime={runtime} />
+                </AgentHostingProvider>
+              </Tooltip.Provider>
+            </ClipboardProvider>
+          </ClientContext.Provider>
+        </ThemeProvider>
+      </StrictMode>,
+    );
+  } catch {
+    // If shell's client fails to initialize, ensure that the shell is still closeable.
+    createRoot(document.getElementById('root')!).render(
+      <StrictMode>
+        <ThemeProvider tx={defaultTx} resourceExtensions={[osTranslations]}>
+          <Fallback onClose={() => runtime.setAppContext({ display: ShellDisplay.NONE })} />
+        </ThemeProvider>
+      </StrictMode>,
+    );
+  }
+};
+
+const Fallback = ({ onClose }: { onClose?: () => void }) => {
+  const { t } = useTranslation('os');
+
+  return (
+    <Dialog.Root modal open onOpenChange={() => onClose?.()}>
+      <Dialog.Overlay>
+        <Dialog.Content>
+          <Dialog.Title>{t('shell fallback title')}</Dialog.Title>
+          <Dialog.Close asChild onClick={() => onClose?.()}>
+            <Button variant='primary'>{t('close label')}</Button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
   );
 };

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -235,7 +235,7 @@ export const IdentityPanel = ({
   const devices = useDevices();
   const identity = useIdentity();
   const invitations = useHaloInvitations();
-  const agentProps = useAgentHandlers({ client, identity, invitations });
+  const agentProps = useAgentHandlers({ identity, invitations });
   if (!identity) {
     log.error('IdentityPanel rendered with no active identity.');
     return null;

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

@@ -5,7 +5,7 @@
 import React, { useCallback } from 'react';
 
 import { log } from '@dxos/log';
-import { useAgentHostingProviderClient, useClient } from '@dxos/react-client';
+import { useAgentHostingClient, useClient } from '@dxos/react-client';
 import { useHaloInvitations } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 
@@ -18,7 +18,7 @@ export const IdentityActionChooser = (props: IdentityPanelStepProps) => {
   const { send } = props;
   const client = useClient();
   const invitations = useHaloInvitations();
-  const agentHostingProviderClient = useAgentHostingProviderClient(client.config);
+  const agentHostingProviderClient = useAgentHostingClient();
   const onInvitationEvent = useCallback((invitation: Invitation) => {
     const invitationCode = InvitationEncoder.encode(invitation);
     if (invitation.state === Invitation.State.CONNECTING) {

package/src/panels/IdentityPanel/useAgentHandlers.ts

@@ -7,23 +7,22 @@ import { useCallback, useEffect, useState } from 'react';
 import { type CancellableInvitation } from '@dxos/client-protocol';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { useAgentHostingProviderClient, type Client } from '@dxos/react-client';
+import { useAgentHostingClient, useClient } 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);
+  const agentHostingProviderClient = useAgentHostingClient();
+  const client = useClient();
 
   useEffect(() => {
     const fetchAgentStatus = async () => {

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -60,7 +60,7 @@ export const JoinPanelImpl = (props: JoinPanelImplProps) => {
           <Viewport.View classNames={stepStyles} id='reset storage confirmation'>
             <ConfirmResetComponent
               send={send}
-              active={activeView === 'reset identity confirmation'}
+              active={activeView === 'reset storage confirmation'}
               onCancel={onCancelResetStorage}
               onConfirm={onConfirmResetStorage}
             />
@@ -222,7 +222,7 @@ export const JoinPanel = ({
       case joinState.matches({ choosingIdentity: 'choosingAuthMethod' }):
         return 'addition method chooser';
       case joinState.matches('resettingIdentity'):
-        return 'reset identity confirmation';
+        return 'reset storage confirmation';
       case joinState.matches({ choosingIdentity: 'creatingIdentity' }):
         return 'create identity input';
       case joinState.matches({ choosingIdentity: 'recoveringIdentity' }):

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

@@ -73,8 +73,8 @@ export const SpaceManager = (props: SpaceManagerProps) => {
       icon: UsersThree,
       onClick: useCallback(() => {
         const invitation = space.share?.({
-          type: Invitation.Type.INTERACTIVE,
-          authMethod: Invitation.AuthMethod.NONE,
+          type: Invitation.Type.DELEGATED,
+          authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
           multiUse: true,
           target,
         });
@@ -83,22 +83,6 @@ export const SpaceManager = (props: SpaceManagerProps) => {
         }
       }, [space]),
     },
-    // inviteNonPersistent: {
-    //   label: 'Invite one (nonpersistent)',
-    //   description: 'Only one user may join. Invitation does not resume if client is restarted.',
-    //   icon: UserPlus,
-    //   onClick: useCallback(() => {
-    //     const invitation = space.share?.({
-    //       type: Invitation.Type.INTERACTIVE,
-    //       authMethod: Invitation.AuthMethod.SHARED_SECRET,
-    //       persistent: false,
-    //       target,
-    //     });
-    //     if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
-    //       invitation.subscribe(onInvitationEvent);
-    //     }
-    //   }, [space]),
-    // },
   };
 
   return <SpaceManagerImpl {...props} invitations={invitations} inviteActions={inviteActions} />;

package/src/steps/ConfirmReset.tsx

@@ -86,7 +86,7 @@ export const ConfirmResetImpl = ({
           }
           disabled={disabled}
           data-testid={`${testIdAffix}.reset-identity-input`}
-          placeholder={confirmationValue}
+          placeholder={t('confirmation placeholder', { confirmationValue })}
           onChange={({ target: { value } }) => setInputValue(value)}
         />
       </div>

package/src/steps/InvitationManager.tsx

@@ -53,6 +53,9 @@ export const InvitationManager = ({
   const showAuthCode = statusValue === 3;
   const emoji = hexToEmoji(id);
   const activeView = useMemo(() => {
+    if (multiUse) {
+      return 'showing qr';
+    }
     switch (true) {
       case statusValue === 5:
       case statusValue < 0:

package/src/testing/shell-manager.ts

@@ -10,6 +10,8 @@ import { ScopedShellManager } from './scoped-shell-manager';
 
 // TODO(wittjosiah): Normalize data-testids between snake and camel case.
 
+const CONFIRM_INPUT = 'RESET';
+
 export class ShellManager extends ScopedShellManager {
   private _invitationCode = new Trigger<string>();
   private _authCode = new Trigger<string>();
@@ -67,14 +69,14 @@ export class ShellManager extends ScopedShellManager {
     this.page.on('dialog', handleDialog);
     await this.shell.getByTestId('device-list-item-current.options').click();
     await this.shell.getByTestId('device-list-item-current.reset').click();
-    await this.shell.getByTestId('reset-storage.reset-identity-input').fill('CONFIRM');
+    await this.shell.getByTestId('reset-storage.reset-identity-input').fill(CONFIRM_INPUT);
     await this.shell.getByTestId('reset-storage.reset-identity-confirm').click();
   }
 
   async joinNewIdentity(invitationCode: string) {
     await this.shell.getByTestId('device-list-item-current.options').click();
     await this.shell.getByTestId('device-list-item-current.join-existing').click();
-    await this.shell.getByTestId('join-new-identity.reset-identity-input').fill('CONFIRM');
+    await this.shell.getByTestId('join-new-identity.reset-identity-input').fill(CONFIRM_INPUT);
     await this.shell.getByTestId('join-new-identity.reset-identity-confirm').click();
     await this.inputInvitation('device', invitationCode, this.shell);
   }

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

@@ -85,23 +85,24 @@ export const os = {
   'auth code message': 'Enter the following auth code on the joining device.',
   'display name input label': 'Display name',
   'display name input placeholder': 'Enter a display name',
-  'invite one label': 'Invite one',
+  'invite one label': 'Single-use invitation',
   'invite one description': 'Only one user may join.',
-  'invite one qr label': 'Single-use',
+  'invite one qr label': 'Single-use invitation',
   'invite one list item label': 'Active single-use invitation',
-  'invite many label': 'Invite many',
+  'invite many label': 'Standing invitation',
   'invite many description': 'Anyone with the link can join.',
-  'invite many qr label': 'Multiple-use',
-  'invite many list item label': 'Active multiple-use invitation',
+  'invite many qr label': 'Standing invitation',
+  'invite many list item label': 'Active standing invitation',
   'invite options label': 'Change the active invite option.',
   'reset in progress label': 'Resetting...',
   'confirm label': 'Confirm',
   'reset storage input label':
-    'This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.',
+    'WARNING: This will delete all data on this device. Type {{confirmationValue}} to continue.',
   'join new identity input label':
-    'In order to join an existing device, storage on this device must be cleared first. Type {{confirmationValue}} to continue.',
+    'WARNING: To join an existing device all data on this device will be deleted. Type {{confirmationValue}} to continue.',
   'failed to reset identity message': 'Failed to reset identity.',
-  'confirmation value': 'CONFIRM',
+  'confirmation value': 'RESET',
+  'confirmation placeholder': 'Enter {{confirmationValue}} to continue.',
   'sign out chooser title': 'Danger zone',
   'sign out chooser message': 'Proceeding with the action below will erase all data on this device.',
   'join new identity label': 'Join a new identity',
@@ -111,7 +112,7 @@ export const os = {
   'clear label': 'Use default',
   'select emoji label': 'Choose an emoji to use in your avatar',
   'select hue label': 'Choose a hue to use in your avatar',
-  'resetting message': 'One moment while things are reset…',
+  'resetting message': 'One moment while the device is reset…',
   'red label': 'Red',
   'orange label': 'Orange',
   'amber label': 'Amber',
@@ -142,4 +143,5 @@ export const os = {
   'create agent label': 'Start an agent',
   'destroy agent label': 'Shut down agent',
   'agent device label': 'Your agent',
+  'shell fallback title': 'Shell failed to connect',
 };