@dxos/plugin-client 0.8.2-staging.7ac8446 → 0.8.2

package/src/capabilities/app-graph-builder.ts

@@ -2,94 +2,112 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
 import { createIntent } from '@dxos/app-framework';
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
-import { createExtension, toSignal, type Node } from '@dxos/plugin-graph';
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { createExtension, rxFromObservable, ROOT_ID } from '@dxos/plugin-graph';
 import { ConnectionState } from '@dxos/react-client/mesh';
 
 import { ClientCapabilities } from './capabilities';
 import { CLIENT_PLUGIN } from '../meta';
 import { Account, ClientAction } from '../types';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
       id: CLIENT_PLUGIN,
-      filter: (node): node is Node<null> => node.id === 'root',
-      actions: () => [
-        {
-          id: `${CLIENT_PLUGIN}/open-user-account`,
-          data: async () => {
-            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            await dispatch(createIntent(ClientAction.ShareIdentity));
-          },
-          properties: {
-            label: ['open user account label', { ns: CLIENT_PLUGIN }],
-            icon: 'ph--user--regular',
-            keyBinding: {
-              macos: 'meta+shift+.',
-              // TODO(wittjosiah): Test on windows to see if it behaves the same as linux.
-              windows: 'alt+shift+.',
-              linux: 'alt+shift+>',
-            },
-          },
-        },
-      ],
-      connector: () => {
-        const client = context.requestCapability(ClientCapabilities.Client);
-        const identity = client.halo.identity.get();
-        const status = toSignal(
-          (onChange) => client.mesh.networkStatus.subscribe(() => onChange()).unsubscribe,
-          () => client.mesh.networkStatus.get(),
-        );
-
-        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',
+      actions: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : 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+>',
+                    },
+                  },
                 },
-              },
-              {
-                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(() => []),
+          ),
+        ),
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : 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(() => []),
+          ),
+        ),
     }),
   );

package/src/capabilities/client.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { contributes, type PluginContext } from '@dxos/app-framework';
 import { Client } from '@dxos/react-client';
 
 import { ClientCapabilities } from './capabilities';
@@ -10,10 +10,10 @@ import { ClientEvents } from '../events';
 import { type ClientPluginOptions } from '../types';
 
 type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationUrl' | 'invitationParam' | 'onReset'> & {
-  context: PluginsContext;
+  context: PluginContext;
 };
 
-export default async ({ context, onClientInitialized, ...options }: ClientCapabilityOptions) => {
+export default async ({ context, onClientInitialized, onSpacesReady, ...options }: ClientCapabilityOptions) => {
   const client = new Client(options);
   await client.initialize();
   await onClientInitialized?.(context, client);
@@ -30,6 +30,7 @@ export default async ({ context, onClientInitialized, ...options }: ClientCapabi
   const subscription = client.spaces.isReady.subscribe(async (ready) => {
     if (ready) {
       await context.activatePromise(ClientEvents.SpacesReady);
+      await onSpacesReady?.(context, client);
     }
   });
 

package/src/capabilities/index.ts

@@ -10,6 +10,6 @@ export const IntentResolver = lazy(async () => import('./intent-resolver'));
 export const Migrations = lazy(async () => import('./migrations'));
 export const ReactContext = lazy(async () => import('./react-context'));
 export const ReactSurface = lazy(async () => import('./react-surface'));
-export const Schema = lazy(async () => import('./schema'));
+export const SchemaDefs = lazy(async () => import('./schema-defs'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -11,7 +11,7 @@ import {
   createIntent,
   createResolver,
   LayoutAction,
-  type PluginsContext,
+  type PluginContext,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
@@ -24,7 +24,7 @@ import { ClientEvents } from '../events';
 import { Account, ClientAction } from '../types';
 
 type IntentResolverOptions = {
-  context: PluginsContext;
+  context: PluginContext;
   appName?: string;
 };
 
@@ -34,10 +34,10 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ClientAction.CreateIdentity,
-      resolve: async () => {
-        const manager = context.requestCapability(Capabilities.PluginManager);
-        const client = context.requestCapability(ClientCapabilities.Client);
-        const data = await client.halo.createIdentity();
+      resolve: async (profile) => {
+        const manager = context.getCapability(Capabilities.PluginManager);
+        const client = context.getCapability(ClientCapabilities.Client);
+        const data = await client.halo.createIdentity(profile);
         await manager.activate(ClientEvents.IdentityCreated);
         return {
           data,
@@ -132,7 +132,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.CreateAgent,
       resolve: async () => {
-        const client = context.requestCapability(ClientCapabilities.Client);
+        const client = context.getCapability(ClientCapabilities.Client);
         invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
         await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
       },
@@ -140,7 +140,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.CreateRecoveryCode,
       resolve: async () => {
-        const client = context.requestCapability(ClientCapabilities.Client);
+        const client = context.getCapability(ClientCapabilities.Client);
         invariant(client.services.services.IdentityService, 'IdentityService not available');
         // TODO(wittjosiah): This needs a proper api.
         const { recoveryCode } = await client.services.services.IdentityService.createRecoveryCredential({});
@@ -162,7 +162,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.CreatePasskey,
       resolve: async () => {
-        const client = context.requestCapability(ClientCapabilities.Client);
+        const client = context.getCapability(ClientCapabilities.Client);
         const identity = client.halo.identity.get();
         invariant(identity, 'Identity not available');
 
@@ -207,7 +207,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.RedeemPasskey,
       resolve: async () => {
-        const client = context.requestCapability(ClientCapabilities.Client);
+        const client = context.getCapability(ClientCapabilities.Client);
         // TODO(wittjosiah): This needs a proper api.
         invariant(client.services.services.IdentityService, 'IdentityService not available');
         const { deviceKey, controlFeedKey, challenge } =
@@ -238,7 +238,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.RedeemToken,
       resolve: async (data) => {
-        const client = context.requestCapability(ClientCapabilities.Client);
+        const client = context.getCapability(ClientCapabilities.Client);
         // TODO(wittjosiah): This needs a proper api.
         invariant(client.services.services.IdentityService, 'IdentityService not available');
         await client.services.services.IdentityService.recoverIdentity(

package/src/capabilities/migrations.ts

@@ -2,21 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
-
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 
 import { ClientCapabilities } from './capabilities';
 
-export default (context: PluginsContext) => {
-  const client = context.requestCapability(ClientCapabilities.Client);
+export default (context: PluginContext) => {
+  const registry = context.getCapability(Capabilities.RxRegistry);
+  const client = context.getCapability(ClientCapabilities.Client);
 
   // NOTE: Migrations are currently unidirectional and idempotent.
-  const unsubscribe = effect(() => {
-    const migrations = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Migration).flat()));
-    const spaces = client.spaces.get();
-    void Promise.all(spaces.map((space) => space.db.runMigrations(migrations)));
-  });
+  const cancel = registry.subscribe(
+    context.capabilities(ClientCapabilities.Migration),
+    (_migrations) => {
+      const migrations = Array.from(new Set(_migrations.flat()));
+      const spaces = client.spaces.get();
+      void Promise.all(spaces.map((space) => space.db.runMigrations(migrations)));
+    },
+    { immediate: true },
+  );
 
-  return contributes(Capabilities.Null, null, () => unsubscribe());
+  return contributes(Capabilities.Null, null, () => cancel());
 };

package/src/capabilities/schema-defs.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { type TypedObject } from '@dxos/echo-schema';
+
+import { ClientCapabilities } from './capabilities';
+
+export default (context: PluginContext) => {
+  const registry = context.getCapability(Capabilities.RxRegistry);
+  const client = context.getCapability(ClientCapabilities.Client);
+
+  // TODO(wittjosiah): Unregister schemas when they are disabled.
+  let previous: TypedObject[] = [];
+  const cancel = registry.subscribe(
+    context.capabilities(ClientCapabilities.Schema),
+    (_schemas) => {
+      const schemas = Array.from(new Set(_schemas.flat()));
+      // TODO(wittjosiah): Filter out schemas which the client has already registered.
+      const newSchemas = schemas.filter((schema) => !previous.includes(schema));
+      previous = schemas;
+      client.addTypes(newSchemas);
+    },
+    { immediate: true },
+  );
+
+  return contributes(Capabilities.Null, null, () => cancel());
+};

package/src/components/DevicesContainer.stories.tsx

@@ -21,16 +21,16 @@ const meta: Meta = {
   decorators: [
     withPluginManager({
       plugins: [
-        IntentPlugin(),
         ClientPlugin({
           onClientInitialized: async (_, client) => {
             await client.halo.createIdentity();
           },
         }),
+        IntentPlugin(),
       ],
     }),
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout(),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -42,4 +42,8 @@ export default meta;
 
 type Story = StoryObj<typeof DevicesContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    createInvitationUrl: () => 'https://example.com',
+  },
+};

package/src/components/DevicesContainer.tsx

@@ -13,7 +13,14 @@ 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 {
+  ControlFrame,
+  ControlFrameItem,
+  ControlGroup,
+  ControlItem,
+  ControlPage,
+  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';
@@ -22,11 +29,11 @@ import { hexToEmoji } from '@dxos/util';
 import { CLIENT_PLUGIN } from '../meta';
 import { ClientAction } from '../types';
 
-export const DevicesContainer = ({
-  createInvitationUrl,
-}: {
-  createInvitationUrl: (invitationCode: string) => string;
-}) => {
+export type DevicesContainerProps = {
+  createInvitationUrl?: (invitationCode: string) => string;
+};
+
+export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
   const { t } = useTranslation('os');
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const devices = useDevices();
@@ -46,57 +53,69 @@ export const DevicesContainer = ({
 
   return (
     <Clipboard.Provider>
-      <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 classNames='block overflow-y-auto'>
+        <ControlPage>
+          <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>
+              {createInvitationUrl && (
+                <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>
+        </ControlPage>
       </StackItem.Content>
     </Clipboard.Provider>
   );
@@ -239,11 +258,16 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
         <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>
+      {/* TODO(burdon): Factor out button bar */}
+      <div className='flex justify-center'>
+        <div className='flex gap-2'>
+          <Clipboard.Button value={url ?? 'never'} />
+          <Button variant='ghost' onClick={onCancel}>
+            {t('cancel label')}
+          </Button>
+        </div>
+      </div>
     </>
   );
 };

package/src/components/ProfileContainer.stories.tsx

@@ -15,7 +15,7 @@ import translations from '../translations';
 const meta: Meta = {
   title: 'plugins/plugin-client/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout()],
   parameters: {
     layout: 'fullscreen',
     translations,