@dxos/plugin-client 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/src/capabilities/intent-resolver.ts

@@ -2,8 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import { pipe } from 'effect';
+
 import {
   Capabilities,
+  chain,
   contributes,
   createIntent,
   createResolver,
@@ -16,16 +19,18 @@ import { PublicKey } from '@dxos/react-client';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { ClientCapabilities } from './capabilities';
-import { IDENTITY_DIALOG, JOIN_DIALOG, RECOVER_CODE_DIALOG } from '../components';
+import { JOIN_DIALOG, RECOVERY_CODE_DIALOG, RESET_DIALOG } from '../components';
 import { ClientEvents } from '../events';
-import { ClientAction, type ClientPluginOptions } from '../types';
+import { Account, ClientAction } from '../types';
 
-type IntentResolverOptions = Pick<ClientPluginOptions, 'onReset'> & {
+type IntentResolverOptions = {
   context: PluginsContext;
   appName?: string;
 };
 
-export default ({ context, appName = 'Composer', onReset }: IntentResolverOptions) =>
+const RECOVER_IDENTITY_RPC_TIMEOUT = 20_000;
+
+export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ClientAction.CreateIdentity,
@@ -34,7 +39,14 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
         const client = context.requestCapability(ClientCapabilities.Client);
         const data = await client.halo.createIdentity();
         await manager.activate(ClientEvents.IdentityCreated);
-        return { data, intents: [createIntent(ObservabilityAction.SendEvent, { name: 'identity.create' })] };
+        return {
+          data,
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'identity.create',
+            }),
+          ],
+        };
       },
     }),
     createResolver({
@@ -62,14 +74,19 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
       resolve: async () => {
         return {
           intents: [
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              subject: IDENTITY_DIALOG,
-              options: {
-                blockAlign: 'start',
-              },
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: Account.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [Account.Profile],
+              }),
+            ),
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'identity.share',
             }),
-            createIntent(ObservabilityAction.SendEvent, { name: 'identity.share' }),
           ],
         };
       },
@@ -96,7 +113,20 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
     createResolver({
       intent: ClientAction.ResetStorage,
       resolve: async (data) => {
-        await onReset?.({ target: data.target });
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: RESET_DIALOG,
+              options: {
+                blockAlign: 'start',
+                props: {
+                  mode: data.mode ?? 'reset storage',
+                },
+              },
+            }),
+          ],
+        };
       },
     }),
     createResolver({
@@ -118,7 +148,7 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
           intents: [
             createIntent(LayoutAction.UpdateDialog, {
               part: 'dialog',
-              subject: RECOVER_CODE_DIALOG,
+              subject: RECOVERY_CODE_DIALOG,
               options: {
                 blockAlign: 'start',
                 type: 'alert',
@@ -190,16 +220,31 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
           },
         });
         const lookupKey = PublicKey.from(new Uint8Array((credential as any).response.userHandle));
-        await client.services.services.IdentityService.recoverIdentity({
-          external: {
-            lookupKey,
-            deviceKey,
-            controlFeedKey,
-            signature: Buffer.from((credential as any).response.signature),
-            clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
-            authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+        await client.services.services.IdentityService.recoverIdentity(
+          {
+            external: {
+              lookupKey,
+              deviceKey,
+              controlFeedKey,
+              signature: Buffer.from((credential as any).response.signature),
+              clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
+              authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+            },
           },
-        });
+          { timeout: RECOVER_IDENTITY_RPC_TIMEOUT },
+        );
+      },
+    }),
+    createResolver({
+      intent: ClientAction.RedeemToken,
+      resolve: async (data) => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        // TODO(wittjosiah): This needs a proper api.
+        invariant(client.services.services.IdentityService, 'IdentityService not available');
+        await client.services.services.IdentityService.recoverIdentity(
+          { token: data.token },
+          { timeout: RECOVER_IDENTITY_RPC_TIMEOUT },
+        );
       },
     }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -5,32 +5,46 @@
 import React from 'react';
 
 import { createSurface, Capabilities, contributes } from '@dxos/app-framework';
-import { type IdentityPanelProps, type JoinPanelProps } from '@dxos/shell/react';
+import { type JoinPanelProps } from '@dxos/shell/react';
 
 import {
-  IDENTITY_DIALOG,
-  IdentityDialog,
+  DevicesContainer,
   JOIN_DIALOG,
   JoinDialog,
-  RECOVER_CODE_DIALOG,
-  RECOVER_SETUP_DIALOG,
+  ProfileContainer,
+  RECOVERY_CODE_DIALOG,
   RecoveryCodeDialog,
-  RecoverySetupDialog,
+  RecoveryCredentialsContainer,
+  RESET_DIALOG,
+  ResetDialog,
+  type ResetDialogProps,
   type RecoveryCodeDialogProps,
 } from '../components';
-import { MANAGE_CREDENTIALS_DIALOG, ManageCredentialsDialog } from '../components/ManageCredentialsDialog';
+import { Account, type ClientPluginOptions } from '../types';
 
-type ReactSurfaceOptions = {
+type ReactSurfaceOptions = Pick<ClientPluginOptions, 'onReset'> & {
   createInvitationUrl: (invitationCode: string) => string;
 };
 
-export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
+export default ({ createInvitationUrl, onReset }: ReactSurfaceOptions) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: IDENTITY_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: IdentityPanelProps } => data.component === IDENTITY_DIALOG,
-      component: ({ data }) => <IdentityDialog {...data.props} createInvitationUrl={createInvitationUrl} />,
+      id: Account.Profile,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Profile,
+      component: () => <ProfileContainer />,
+    }),
+    createSurface({
+      id: Account.Devices,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Devices,
+      component: ({ data }) => <DevicesContainer createInvitationUrl={createInvitationUrl} />,
+    }),
+    createSurface({
+      id: Account.Security,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Security,
+      component: () => <RecoveryCredentialsContainer />,
     }),
     createSurface({
       id: JOIN_DIALOG,
@@ -39,21 +53,15 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data }) => <JoinDialog {...data.props} />,
     }),
     createSurface({
-      id: RECOVER_CODE_DIALOG,
+      id: RECOVERY_CODE_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
+      filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVERY_CODE_DIALOG,
       component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
     }),
     createSurface({
-      id: RECOVER_SETUP_DIALOG,
-      role: 'dialog',
-      filter: (data): data is any => data.component === RECOVER_SETUP_DIALOG,
-      component: () => <RecoverySetupDialog />,
-    }),
-    createSurface({
-      id: MANAGE_CREDENTIALS_DIALOG,
+      id: RESET_DIALOG,
       role: 'dialog',
-      filter: (data): data is any => data.component === MANAGE_CREDENTIALS_DIALOG,
-      component: () => <ManageCredentialsDialog />,
+      filter: (data): data is { props: ResetDialogProps } => data.component === RESET_DIALOG,
+      component: ({ data }) => <ResetDialog {...data.props} onReset={onReset} />,
     }),
   ]);

package/src/components/DevicesContainer.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { osTranslations } from '@dxos/shell/react';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { DevicesContainer } from './DevicesContainer';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/DevicesContainer',
+  component: DevicesContainer,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, osTranslations],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DevicesContainer>;
+
+export const Default: Story = {};

package/src/components/DevicesContainer.tsx

@@ -0,0 +1,268 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Check, X } from '@phosphor-icons/react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { QR } from 'react-qr-rounded';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { useClient, useMulticastObservable } from '@dxos/react-client';
+import { type Device, useDevices } from '@dxos/react-client/halo';
+import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+import { useNetworkStatus } from '@dxos/react-client/mesh';
+import { Button, Clipboard, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
+import { ControlFrame, ControlFrameItem, ControlGroup, ControlItem, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { hexToEmoji } from '@dxos/util';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const DevicesContainer = ({
+  createInvitationUrl,
+}: {
+  createInvitationUrl: (invitationCode: string) => string;
+}) => {
+  const { t } = useTranslation('os');
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const devices = useDevices();
+  const { swarm: connectionState } = useNetworkStatus();
+
+  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+
+  const handleRecover = useCallback(
+    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
+    [dispatch],
+  );
+
+  const handleJoinNewIdentity = useCallback(
+    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
+    [dispatch],
+  );
+
+  return (
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <ControlSection
+        title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
+        description={t('devices description', { ns: CLIENT_PLUGIN })}
+      >
+        <ControlFrame>
+          <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
+            <List>
+              {devices.map((device: Device) => {
+                return (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                );
+              })}
+            </List>
+          </ControlFrameItem>
+          <ControlFrameItem title='Add device'>
+            <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+          </ControlFrameItem>
+        </ControlFrame>
+      </ControlSection>
+      <ControlSection
+        title={t('danger zone title', { ns: CLIENT_PLUGIN })}
+        description={t('danger zone description', { ns: CLIENT_PLUGIN })}
+      >
+        <ControlGroup>
+          <ControlItem
+            title={t('reset device label')}
+            description={t('reset device description', { ns: CLIENT_PLUGIN })}
+          >
+            <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+              {t('reset device label')}
+            </Button>
+          </ControlItem>
+          <ControlItem
+            title={t('recover identity label')}
+            description={t('recover identity description', { ns: CLIENT_PLUGIN })}
+          >
+            <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+              {t('recover identity label')}
+            </Button>
+          </ControlItem>
+          <ControlItem
+            title={t('join new identity label')}
+            description={t('join new identity description', { ns: CLIENT_PLUGIN })}
+          >
+            <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
+              {t('join new identity label')}
+            </Button>
+          </ControlItem>
+        </ControlGroup>
+      </ControlSection>
+    </StackItem.Content>
+  );
+};
+
+type DeviceInvitationProps = {
+  invitation?: CancellableInvitationObservable;
+  createInvitationUrl: (invitationCode: string) => string;
+  onInvitationDone: () => void;
+  onInvitationCreate: () => void;
+};
+
+const DeviceInvitation = (props: Pick<DeviceInvitationProps, 'createInvitationUrl'>) => {
+  const client = useClient();
+  const [invitation, setInvitation] = useState<CancellableInvitationObservable>();
+
+  const onInvitationCreate = useCallback(() => {
+    const invitation = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+      const subscription = invitation.subscribe((invitation: Invitation) => {
+        const invitationCode = InvitationEncoder.encode(invitation);
+        if (invitation.state === Invitation.State.CONNECTING) {
+          log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+          subscription.unsubscribe();
+        }
+      });
+    }
+    setInvitation(invitation);
+  }, [client]);
+
+  const onInvitationDone = useCallback(() => {
+    setInvitation(undefined);
+  }, []);
+
+  if (invitation) {
+    return <DeviceInvitationImpl {...props} {...{ invitation, onInvitationCreate, onInvitationDone }} />;
+  } else {
+    return <InvitationSection {...props} {...{ onInvitationCreate, onInvitationDone }} />;
+  }
+};
+
+const DeviceInvitationImpl = ({
+  invitation: invitationObservable,
+  createInvitationUrl,
+  onInvitationDone,
+  onInvitationCreate,
+}: DeviceInvitationProps) => {
+  const invitation = useMulticastObservable(invitationObservable!);
+  const url = createInvitationUrl(InvitationEncoder.encode(invitation));
+
+  useEffect(() => {
+    if (invitation.state >= Invitation.State.SUCCESS) {
+      onInvitationDone();
+    }
+  }, [invitation.state]);
+
+  return <InvitationSection {...invitation} {...{ url, onInvitationDone, onInvitationCreate }} />;
+};
+
+type InvitationComponentProps = Partial<
+  Pick<Invitation, 'authCode' | 'invitationId'> &
+    Pick<DeviceInvitationProps, 'onInvitationDone' | 'onInvitationCreate'> & {
+      state: number;
+      url: string;
+    }
+>;
+
+const InvitationSection = ({
+  state = -1,
+  authCode,
+  invitationId = 'never',
+  url = 'never',
+  onInvitationDone = () => {},
+  onInvitationCreate = () => {},
+}: InvitationComponentProps) => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const activeView =
+    state < 0
+      ? 'init'
+      : state >= Invitation.State.CANCELLED
+        ? 'complete'
+        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
+          ? 'auth-code'
+          : 'qr-code';
+  return activeView === 'init' ? (
+    <>
+      <p className='text-description mbe-2'>{t('add device description')}</p>
+      <IconButton
+        icon='ph--plus--regular'
+        label={t('create device invitation label')}
+        disabled={state >= 0}
+        classNames='is-full'
+        data-testid='devicesContainer.createInvitation'
+        onClick={onInvitationCreate}
+      />
+    </>
+  ) : (
+    <Viewport.Root activeView={activeView}>
+      <Viewport.Views>
+        <Viewport.View id='init'>
+          {/* This view intentionally left blank while conditionally rendering the viewport. */}
+        </Viewport.View>
+        <Viewport.View id='complete'>
+          <InvitationComplete statusValue={state} />
+        </Viewport.View>
+        <Viewport.View id='auth-code'>
+          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onInvitationDone} />
+        </Viewport.View>
+        <Viewport.View id='qr-code'>
+          <InvitationQR id={invitationId} url={url} onCancel={onInvitationDone} />
+        </Viewport.View>
+      </Viewport.Views>
+    </Viewport.Root>
+  );
+};
+
+const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
+  const { t } = useTranslation('os');
+  const qrLabel = useId('devices-container__qr-code');
+  const emoji = hexToEmoji(id);
+  return (
+    <Clipboard.Provider>
+      <p className='text-description'>{t('qr code description', { ns: CLIENT_PLUGIN })}</p>
+      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
+        <div role='none' className='is-full aspect-square relative text-description'>
+          <QR
+            rounding={100}
+            backgroundColor='transparent'
+            color='currentColor'
+            aria-labelledby={qrLabel}
+            errorCorrectionLevel='Q'
+            cutout={true}
+          >
+            {url ?? 'never'}
+          </QR>
+          <Centered>
+            <Emoji text={emoji} />
+          </Centered>
+        </div>
+        <span id={qrLabel} className='sr-only'>
+          {t('qr label')}
+        </span>
+        <Clipboard.Button value={url ?? 'never'} />
+      </div>
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </Clipboard.Provider>
+  );
+};
+
+const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
+  const { t } = useTranslation('os');
+  const emoji = hexToEmoji(id);
+
+  return (
+    <>
+      <p className='text-description'>{t('auth other device emoji message')}</p>
+      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      <p className='text-description'>{t('auth code message')}</p>
+      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
+  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+};

package/src/components/ProfileContainer.stories.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ProfileContainer } from './ProfileContainer';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/ProfileContainer',
+  component: ProfileContainer,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfileContainer>;
+
+export const Default: Story = {};