@dxos/plugin-client 0.8.4-main.b97322e → 0.8.4-main.bc674ce

package/src/components/RecoveryCredentialsContainer.tsx

@@ -4,70 +4,65 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
 import { useCredentials } from '@dxos/react-client/halo';
-import { Icon, IconButton, List, ListItem, useTranslation, Message } from '@dxos/react-ui';
+import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItem, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { CLIENT_PLUGIN } from '../meta';
-import { ClientAction } from '../types';
+import { meta } from '../meta';
+import { ClientOperation } from '../types';
 
-export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
 
 export const RecoveryCredentialsContainer = () => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter(
     (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <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')}>
-              <IconButton
-                label={t('create passkey label')}
-                icon='ph--key--duotone'
-                variant='primary'
-                size={5}
-                onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
-              />
-            </ControlItem>
-            <ControlItem 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'
-                size={5}
-                onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
-              />
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-        <ControlSection title={t('credentials list label')}>
-          {recoveryCredentials.length < 1 ? (
-            <Message.Root valence='error' classNames='container-max-width'>
-              <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'>
-              {recoveryCredentials.map((credential) => (
-                <ListItem.Root key={credential.id?.toHex()}>
-                  <ListItem.Endcap>
-                    <Icon icon='ph--key--regular' size={5} />
-                  </ListItem.Endcap>
-                  <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
-                </ListItem.Root>
-              ))}
-            </List>
-          )}
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
+    <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')}>
+            <IconButton
+              label={t('create passkey label')}
+              icon='ph--key--duotone'
+              variant='primary'
+              onClick={() => invokePromise(ClientOperation.CreatePasskey)}
+            />
+          </ControlItem>
+          <ControlItem 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={() => invokePromise(ClientOperation.CreateRecoveryCode)}
+            />
+          </ControlItem>
+        </ControlGroup>
+      </ControlSection>
+      <ControlSection title={t('credentials list label')}>
+        {recoveryCredentials.length < 1 ? (
+          <Message.Root valence='error' classNames='container-max-width'>
+            <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'>
+            {recoveryCredentials.map((credential) => (
+              <ListItem.Root key={credential.id?.toHex()}>
+                <ListItem.Endcap>
+                  <Icon icon='ph--key--regular' />
+                </ListItem.Endcap>
+                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        )}
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/ResetDialog.stories.tsx

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

package/src/components/ResetDialog.tsx

@@ -2,45 +2,46 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { Capability, type CapabilityManager, Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { runAndForwardErrors } from '@dxos/effect';
 import { useClient } from '@dxos/react-client';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { ConfirmReset, type ConfirmResetProps } from '@dxos/shell/react';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type ClientPluginOptions } from '../types';
 
-export const RESET_DIALOG = `${CLIENT_PLUGIN}/ResetDialog`;
+export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
+  Pick<ClientPluginOptions, 'onReset'> & {
+    capabilityManager: CapabilityManager.CapabilityManager;
+  };
 
-export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> & Pick<ClientPluginOptions, 'onReset'>;
-
-export const ResetDialog = ({ mode, onReset }: ResetDialogProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
 
   const handleReset = useCallback(async () => {
     await client.reset();
     const target =
       mode === 'join new identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
-    await onReset?.({ target });
-  }, [dispatch, client, mode, onReset]);
+    if (onReset) {
+      await runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+    }
+  }, [client, mode, onReset, capabilityManager]);
 
   const handleCancel = useCallback(() => {
-    void dispatch(
-      createIntent(LayoutAction.UpdateDialog, {
-        part: 'dialog',
-        options: { state: false },
-      }),
-    );
-  }, [dispatch]);
+    void invokePromise(Common.LayoutOperation.UpdateDialog, { state: false });
+  }, [invokePromise]);
 
   // TODO(wittjosiah): Add the sr-only translations.
   // TODO(wittjosiah): Add missing descriptions to other dialogs.
   return (
-    <Dialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+    <Dialog.Content>
       <Dialog.Title classNames='sr-only'>{t('reset dialog title')}</Dialog.Title>
       <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
       <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />

package/src/constants.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
+export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
+export const RESET_DIALOG = `${meta.id}/ResetDialog`;

package/src/index.ts

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

package/src/meta.ts

@@ -2,11 +2,14 @@
 // 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 CLIENT_PLUGIN = 'dxos.org/plugin/client';
-
-export const meta: PluginMeta = {
-  id: CLIENT_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'dxos.org/plugin/client',
   name: 'Client',
+  description: trim`
+    Core client connectivity and peer-to-peer networking infrastructure.
+    Manages identity, authentication, and real-time synchronization across devices.
+  `,
 };

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',
@@ -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.Entity.Any[]>(`${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 { Schema } from 'effect';
+import type * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
-import { type PluginContext } from '@dxos/app-framework';
-import { type Client, PublicKey, type ClientOptions } 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';
 
@@ -90,6 +91,115 @@ 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.
@@ -99,22 +209,25 @@ export type ClientPluginOptions = ClientOptions & {
   /**
    * 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?: (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?: (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 {

package/dist/lib/browser/app-graph-builder-JNIES5L4.mjs

@@ -1,123 +0,0 @@
-import {
-  ClientCapabilities
-} from "./chunk-3F2Q2RKC.mjs";
-import {
-  Account,
-  ClientAction
-} from "./chunk-RMHBOY3Y.mjs";
-import {
-  CLIENT_PLUGIN
-} from "./chunk-GS3LDHYD.mjs";
-
-// src/capabilities/app-graph-builder.ts
-import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
-import { createIntent } from "@dxos/app-framework";
-import { Capabilities, contributes } from "@dxos/app-framework";
-import { createExtension, rxFromObservable, ROOT_ID } from "@dxos/plugin-graph";
-import { ConnectionState } from "@dxos/react-client/mesh";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, createExtension({
-  id: CLIENT_PLUGIN,
-  actions: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
-    return [
-      {
-        id: `${CLIENT_PLUGIN}/open-user-account`,
-        data: async () => {
-          const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-          await dispatch(createIntent(ClientAction.ShareIdentity));
-        },
-        properties: {
-          label: [
-            "open user account label",
-            {
-              ns: CLIENT_PLUGIN
-            }
-          ],
-          icon: "ph--user--regular",
-          disposition: "menu",
-          keyBinding: {
-            macos: "meta+shift+.",
-            // TODO(wittjosiah): Test on windows to see if it behaves the same as linux.
-            windows: "alt+shift+.",
-            linux: "alt+shift+>"
-          }
-        }
-      }
-    ];
-  }), Option.getOrElse(() => []))),
-  connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => {
-    const client = context.getCapability(ClientCapabilities.Client);
-    const identity = get(rxFromObservable(client.halo.identity));
-    const status = get(rxFromObservable(client.mesh.networkStatus));
-    return [
-      {
-        id: Account.id,
-        type: CLIENT_PLUGIN,
-        properties: {
-          label: [
-            "account label",
-            {
-              ns: CLIENT_PLUGIN
-            }
-          ],
-          icon: "ph--user--regular",
-          disposition: "user-account",
-          // NOTE: This currently needs to be the identity key because the fallback is generated from hex.
-          userId: identity?.identityKey.toHex(),
-          hue: identity?.profile?.data?.hue,
-          emoji: identity?.profile?.data?.emoji,
-          status: status.swarm === ConnectionState.OFFLINE ? "error" : "active"
-        },
-        nodes: [
-          {
-            id: Account.Profile,
-            data: Account.Profile,
-            type: CLIENT_PLUGIN,
-            properties: {
-              label: [
-                "profile label",
-                {
-                  ns: CLIENT_PLUGIN
-                }
-              ],
-              icon: "ph--user--regular"
-            }
-          },
-          {
-            id: Account.Devices,
-            data: Account.Devices,
-            type: CLIENT_PLUGIN,
-            properties: {
-              label: [
-                "devices label",
-                {
-                  ns: CLIENT_PLUGIN
-                }
-              ],
-              icon: "ph--devices--regular",
-              testId: "clientPlugin.devices"
-            }
-          },
-          {
-            id: Account.Security,
-            data: Account.Security,
-            type: CLIENT_PLUGIN,
-            properties: {
-              label: [
-                "security label",
-                {
-                  ns: CLIENT_PLUGIN
-                }
-              ],
-              icon: "ph--key--regular"
-            }
-          }
-        ]
-      }
-    ];
-  }), Option.getOrElse(() => [])))
-}));
-export {
-  app_graph_builder_default as default
-};
-//# sourceMappingURL=app-graph-builder-JNIES5L4.mjs.map