@dxos/shell 0.5.1-main.d514f85 → 0.5.1-main.ea79cb0

package/src/composites/Shell/memory-shell-runtime.ts

@@ -4,25 +4,40 @@
 
 import { Event } from '@dxos/async';
 import {
+  ShellLayout,
   type AppContextRequest,
+  type InvitationUrlRequest,
   type LayoutRequest,
   type PublicKey,
-  ShellLayout,
   type ShellRuntime,
 } from '@dxos/react-client';
 
 // TODO(wittjosiah): Remove?
 export class MemoryShellRuntime implements ShellRuntime {
   readonly layoutUpdate = new Event<LayoutRequest>();
+  readonly invitationUrlUpdate = new Event<InvitationUrlRequest>();
   readonly contextUpdate = new Event<AppContextRequest>();
   private _layout: ShellLayout;
   private _invitationCode?: string;
   private _spaceKey?: PublicKey;
+  private _invitationUrl: string;
+  private _deviceInvitationParam: string;
+  private _spaceInvitationParam: string;
 
-  constructor({ layout, invitationCode, spaceKey }: Partial<LayoutRequest> & Partial<AppContextRequest> = {}) {
+  constructor({
+    layout,
+    invitationCode,
+    spaceKey,
+    invitationUrl,
+    deviceInvitationParam,
+    spaceInvitationParam,
+  }: Partial<LayoutRequest> & Partial<AppContextRequest> & Partial<InvitationUrlRequest> = {}) {
     this._layout = layout ?? ShellLayout.DEFAULT;
     this._invitationCode = invitationCode;
     this._spaceKey = spaceKey;
+    this._invitationUrl = invitationUrl ?? window.location.origin;
+    this._deviceInvitationParam = deviceInvitationParam ?? 'deviceInvitationCode';
+    this._spaceInvitationParam = spaceInvitationParam ?? 'spaceInvitationCode';
   }
 
   get layout() {
@@ -37,6 +52,18 @@ export class MemoryShellRuntime implements ShellRuntime {
     return this._spaceKey;
   }
 
+  get invitationUrl() {
+    return this._invitationUrl;
+  }
+
+  get deviceInvitationParam() {
+    return this._deviceInvitationParam;
+  }
+
+  get spaceInvitationParam() {
+    return this._spaceInvitationParam;
+  }
+
   setLayout(request: LayoutRequest) {
     this._layout = request.layout;
     this._invitationCode = request.invitationCode;
@@ -44,6 +71,13 @@ export class MemoryShellRuntime implements ShellRuntime {
     this.layoutUpdate.emit(request);
   }
 
+  setInvitationUrl(request: InvitationUrlRequest) {
+    this._invitationUrl = request.invitationUrl;
+    this._deviceInvitationParam = request.deviceInvitationParam;
+    this._spaceInvitationParam = request.spaceInvitationParam;
+    this.invitationUrlUpdate.emit(request);
+  }
+
   async setAppContext(context: AppContextRequest) {
     this.contextUpdate.emit(context);
   }

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

@@ -13,9 +13,10 @@ import {
   ClientContext,
   ClientServicesProxy,
   Config,
+  ShellDisplay,
   SystemStatus,
 } from '@dxos/react-client';
-import { ThemeProvider, Tooltip } from '@dxos/react-ui';
+import { Button, Dialog, ThemeProvider, Tooltip, useTranslation } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
@@ -24,24 +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>
-              <AgentHostingProvider>
-                <Shell runtime={runtime} origin={location.origin} />
-              </AgentHostingProvider>
-            </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/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/translations/locales/en-US.ts

@@ -142,4 +142,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',
 };