@dxos/plugin-client 0.8.4-main.72ec0f3 → 0.8.4-main.8360d9e660

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
+
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/RecoveryCredentialsContainer',
+  component: RecoveryCredentialsContainer,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
+        }),
+        OperationPlugin(),
+        RuntimePlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RecoveryCredentialsContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/{components → containers/RecoveryCredentialsContainer}/RecoveryCredentialsContainer.tsx

@@ -4,55 +4,54 @@
 
 import React from 'react';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { useCredentials } from '@dxos/react-client/halo';
 import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItem, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
-import { meta } from '../meta';
-import { ClientAction } from '../types';
+import { meta } from '../../meta';
+import { ClientOperation } from '../../types';
 
-export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
 
 export const RecoveryCredentialsContainer = () => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter(
     (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
   );
 
   return (
-    <ControlPage>
-      <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
-        <ControlGroup>
-          <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
+    <Settings.Root>
+      <Settings.Section title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
+        <Settings.Group>
+          <Settings.Item title={t('create passkey label')} description={t('create passkey description')}>
             <IconButton
               label={t('create passkey label')}
               icon='ph--key--duotone'
               variant='primary'
-              onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
+              onClick={() => invokePromise(ClientOperation.CreatePasskey)}
             />
-          </ControlItem>
-          <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
+          </Settings.Item>
+          <Settings.Item title={t('create recovery code label')} description={t('create recovery code description')}>
             <IconButton
               label={t('create recovery code label')}
               icon='ph--receipt--duotone'
               variant='default'
-              onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
+              onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}
             />
-          </ControlItem>
-        </ControlGroup>
-      </ControlSection>
-      <ControlSection title={t('credentials list label')}>
+          </Settings.Item>
+        </Settings.Group>
+      </Settings.Section>
+      <Settings.Section title={t('credentials list label')}>
         {recoveryCredentials.length < 1 ? (
-          <Message.Root valence='error' classNames='container-max-width'>
+          <Message.Root valence='error'>
             <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
             <Message.Content>{t('no credentials message')}</Message.Content>
           </Message.Root>
         ) : (
-          <List classNames='container-max-width pli-2'>
+          <List>
             {recoveryCredentials.map((credential) => (
               <ListItem.Root key={credential.id?.toHex()}>
                 <ListItem.Endcap>
@@ -63,7 +62,7 @@ export const RecoveryCredentialsContainer = () => {
             ))}
           </List>
         )}
-      </ControlSection>
-    </ControlPage>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/RecoveryCredentialsContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
+
+export default RecoveryCredentialsContainer;

package/src/containers/ResetDialog/ResetDialog.stories.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
+
+import { ResetDialog, type ResetDialogProps } from './ResetDialog';
+
+const DefaultStory = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
+  const manager = usePluginManager();
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <ResetDialog
+          capabilityManager={manager.capabilities}
+          onReset={() => Effect.sync(() => console.log('reset'))}
+          {...props}
+        />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-client/containers/ResetDialog',
+  component: ResetDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ResetDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    mode: 'reset storage' as const,
+  } as any,
+};
+
+export const JoinNewIdentity: Story = {
+  args: {
+    mode: 'join new identity' as const,
+  } as any,
+};
+
+export const Recover: Story = {
+  args: {
+    mode: 'recover' as const,
+  } as any,
+};

package/src/containers/ResetDialog/ResetDialog.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback } from 'react';
+
+import { Capability, type CapabilityManager } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+import { useClient } from '@dxos/react-client';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { ConfirmReset, type ConfirmResetProps, translationKey } from '@dxos/shell/react';
+
+import { type ClientPluginOptions } from '../../types';
+
+export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
+  Pick<ClientPluginOptions, 'onReset'> & {
+    capabilityManager: CapabilityManager.CapabilityManager;
+  };
+
+export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogProps) => {
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+
+  const handleReset = useCallback(async () => {
+    await client.reset();
+    const target =
+      mode === 'join new identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
+    if (onReset) {
+      await runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+    }
+  }, [client, mode, onReset, capabilityManager]);
+
+  const handleCancel = useCallback(() => {
+    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+  }, [invokePromise]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('reset dialog title')}</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
+      <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
+    </Dialog.Content>
+  );
+};

package/src/containers/ResetDialog/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ResetDialog } from './ResetDialog';
+
+export * from './ResetDialog';
+export default ResetDialog;

package/src/containers/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export { type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
+export { type ResetDialogProps } from './ResetDialog';
+
+export const DevicesContainer: ComponentType<any> = lazy(() => import('./DevicesContainer'));
+export const JoinDialog: ComponentType<any> = lazy(() => import('./JoinDialog'));
+export const ProfileContainer: ComponentType<any> = lazy(() => import('./ProfileContainer'));
+export const RecoveryCodeDialog: ComponentType<any> = lazy(() => import('./RecoveryCodeDialog'));
+export const RecoveryCredentialsContainer: ComponentType<any> = lazy(() => import('./RecoveryCredentialsContainer'));
+export const ResetDialog: ComponentType<any> = lazy(() => import('./ResetDialog'));

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ClientCapabilities } from './capabilities';
-export { ClientEvents } from './events';
+export { ClientCapabilities, ClientEvents } from './types';
 export * from './meta';
 export * from './types';
 

package/src/meta.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/client',
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.client',
   name: 'Client',
   description: trim`
     Core client connectivity and peer-to-peer networking infrastructure.

package/src/translations.ts

@@ -3,14 +3,15 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as shellTranslations } from '@dxos/shell/react';
 
 import { meta } from './meta';
 
-export const translations = [
+const pluginTranslations = [
   {
     'en-US': {
       [meta.id]: {
-        'account label': 'User Account',
+        'account label': 'User profile',
         'profile label': 'Profile',
         'profile description': 'You can adjust how your user settings here.',
         'devices label': 'Devices',
@@ -35,7 +36,7 @@ export const translations = [
         'display name description': 'Your name as it appears in the app.',
         'display name input placeholder': 'Enter a name',
         'icon label': 'Avatar',
-        'icon description': 'The emoji used to represent you in the app.',
+        'icon description': 'The emoji used to represent the user.',
         'hue label': 'Color',
         'hue description':
           'The color used to represent you in the app, including as your avatar’s background, your cursor as it appears to others, and the messages you send in group threads.',
@@ -68,3 +69,5 @@ export const translations = [
     },
   },
 ] as const satisfies Resource[];
+
+export const translations: Resource[] = [...pluginTranslations, ...shellTranslations];

package/src/types/capabilities.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import { type Client } from '@dxos/client';
+import { type ObjectMigration } from '@dxos/client/echo';
+import { type Type } from '@dxos/echo';
+
+import { meta } from '../meta';
+
+export namespace ClientCapabilities {
+  export const Client = Capability.make<Client>(`${meta.id}.capability.client`);
+  export const Schema = Capability.make<Type.AnyEntity[]>(`${meta.id}.capability.schema`);
+  export const Migration = Capability.make<ObjectMigration[]>(`${meta.id}.capability.migration`);
+}

package/src/types/events.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ActivationEvent } from '@dxos/app-framework';
+
+import { meta } from '../meta';
+
+export namespace ClientEvents {
+  export const ClientReady = ActivationEvent.make(`${meta.id}.event.client-ready`);
+  export const SetupSchema = ActivationEvent.make(`${meta.id}.event.setup-schema`);
+  export const SetupMigration = ActivationEvent.make(`${meta.id}.event.setup-migration`);
+  export const IdentityCreated = ActivationEvent.make(`${meta.id}.event.identity-created`);
+  export const SpacesReady = ActivationEvent.make(`${meta.id}.event.spaces-ready`);
+}

package/src/types/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './capabilities';
+export * from './events';
 export * from './schema';

package/src/types/schema.ts

@@ -2,11 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
+import type * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
-import { type PluginContext } from '@dxos/app-framework';
-import { type Client, type ClientOptions, PublicKey } from '@dxos/react-client';
-import { type MaybePromise } from '@dxos/util';
+import { Capability } from '@dxos/app-framework';
+import { type Client, type ClientOptions, PublicKey } from '@dxos/client';
+import { Operation } from '@dxos/operation';
 
 import { meta } from '../meta';
 
@@ -30,59 +31,59 @@ export namespace ClientAction {
     data: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
   });
 
-  export class CreateIdentity extends Schema.TaggedClass<CreateIdentity>()(`${meta.id}/action/create-identity`, {
+  export class CreateIdentity extends Schema.TaggedClass<CreateIdentity>()(`${meta.id}.action.create-identity`, {
     input: ProfileSchema,
     output: IdentitySchema,
   }) {}
 
-  export class JoinIdentity extends Schema.TaggedClass<JoinIdentity>()(`${meta.id}/action/join-identity`, {
+  export class JoinIdentity extends Schema.TaggedClass<JoinIdentity>()(`${meta.id}.action.join-identity`, {
     input: Schema.Struct({
       invitationCode: Schema.optional(Schema.String),
     }),
     output: Schema.Void,
   }) {}
 
-  export class ShareIdentity extends Schema.TaggedClass<ShareIdentity>()(`${meta.id}/action/share-identity`, {
+  export class ShareIdentity extends Schema.TaggedClass<ShareIdentity>()(`${meta.id}.action.share-identity`, {
     input: Schema.Void,
     output: Schema.Void,
   }) {}
 
-  export class RecoverIdentity extends Schema.TaggedClass<RecoverIdentity>()(`${meta.id}/action/recover-identity`, {
+  export class RecoverIdentity extends Schema.TaggedClass<RecoverIdentity>()(`${meta.id}.action.recover-identity`, {
     input: Schema.Void,
     output: Schema.Void,
   }) {}
 
-  export class ResetStorage extends Schema.TaggedClass<ResetStorage>()(`${meta.id}/action/reset-storage`, {
+  export class ResetStorage extends Schema.TaggedClass<ResetStorage>()(`${meta.id}.action.reset-storage`, {
     input: Schema.Struct({
       mode: Schema.optional(Schema.String),
     }),
     output: Schema.Void,
   }) {}
 
-  export class CreateAgent extends Schema.TaggedClass<CreateAgent>()(`${meta.id}/action/create-agent`, {
+  export class CreateAgent extends Schema.TaggedClass<CreateAgent>()(`${meta.id}.action.create-agent`, {
     input: Schema.Void,
     output: Schema.Void,
   }) {}
 
   export class CreateRecoveryCode extends Schema.TaggedClass<CreateRecoveryCode>()(
-    `${meta.id}/action/create-recovery-code`,
+    `${meta.id}.action.create-recovery-code`,
     {
       input: Schema.Void,
       output: Schema.Void,
     },
   ) {}
 
-  export class CreatePasskey extends Schema.TaggedClass<CreatePasskey>()(`${meta.id}/action/create-passkey`, {
+  export class CreatePasskey extends Schema.TaggedClass<CreatePasskey>()(`${meta.id}.action.create-passkey`, {
     input: Schema.Void,
     output: Schema.Void,
   }) {}
 
-  export class RedeemPasskey extends Schema.TaggedClass<RedeemPasskey>()(`${meta.id}/action/redeem-passkey`, {
+  export class RedeemPasskey extends Schema.TaggedClass<RedeemPasskey>()(`${meta.id}.action.redeem-passkey`, {
     input: Schema.Void,
     output: Schema.Void,
   }) {}
 
-  export class RedeemToken extends Schema.TaggedClass<RedeemToken>()(`${meta.id}/action/redeem-token`, {
+  export class RedeemToken extends Schema.TaggedClass<RedeemToken>()(`${meta.id}.action.redeem-token`, {
     input: Schema.Struct({
       token: Schema.String,
     }),
@@ -90,31 +91,148 @@ export namespace ClientAction {
   }) {}
 }
 
+const CLIENT_OPERATION = `${meta.id}.operation`;
+
+/**
+ * Operations for the Client plugin.
+ */
+export namespace ClientOperation {
+  const ProfileSchema = Schema.Struct({
+    displayName: Schema.optional(Schema.String),
+    avatarCid: Schema.optional(Schema.String),
+    data: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
+  });
+
+  export const CreateIdentity = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.create-identity`, name: 'Create Identity' },
+    services: [Capability.Service],
+    schema: {
+      input: ProfileSchema,
+      output: IdentitySchema,
+    },
+  });
+
+  export const JoinIdentity = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.join-identity`, name: 'Join Identity' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        invitationCode: Schema.optional(Schema.String),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const ShareIdentity = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.share-identity`, name: 'Share Identity' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const RecoverIdentity = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.recover-identity`, name: 'Recover Identity' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const ResetStorage = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.reset-storage`, name: 'Reset Storage' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        mode: Schema.optional(Schema.String),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  export const CreateAgent = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.create-agent`, name: 'Create Agent' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const CreateRecoveryCode = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.create-recovery-code`, name: 'Create Recovery Code' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const CreatePasskey = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.create-passkey`, name: 'Create Passkey' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const RedeemPasskey = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.redeem-passkey`, name: 'Redeem Passkey' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Void,
+      output: Schema.Void,
+    },
+  });
+
+  export const RedeemToken = Operation.make({
+    meta: { key: `${CLIENT_OPERATION}.redeem-token`, name: 'Redeem Token' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        token: Schema.String,
+      }),
+      output: Schema.Void,
+    },
+  });
+}
+
 export type ClientPluginOptions = ClientOptions & {
   /**
-   * Base URL for the invitation link.
+   * Base origin for the invitation link.
+   */
+  shareableLinkOrigin?: string;
+
+  /**
+   * Path for the invitation link.
    */
-  invitationUrl?: string;
+  invitationPath?: string;
 
   /**
    * Query parameter for the invitation code.
    */
-  invitationParam?: string;
+  invitationProp?: string;
 
   /**
    * Run after the client has been initialized.
+   * Plugin context is provided so capabilities are accessible.
    */
-  onClientInitialized?: (params: { context: PluginContext; client: Client }) => MaybePromise<void>;
+  onClientInitialized?: (params: { client: Client }) => Effect.Effect<void, Error | never, Capability.Service | never>;
 
   /**
    * Called when spaces are ready.
+   * Plugin context is provided so capabilities are accessible.
    */
-  onSpacesReady?: (params: { context: PluginContext; client: Client }) => MaybePromise<void>;
+  onSpacesReady?: (params: { client: Client }) => Effect.Effect<void, Error | never, Capability.Service | never>;
 
   /**
    * Called when the client is reset.
+   * Plugin context is provided so capabilities are accessible.
    */
-  onReset?: (params: { target?: string }) => MaybePromise<void>;
+  onReset?: (params: { target?: string }) => Effect.Effect<void, Error | never, Capability.Service | never>;
 };
 
 export namespace Account {