@dxos/plugin-client 0.8.2-main.f11618f → 0.8.2-staging.42af850

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

@@ -29,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();
@@ -73,9 +73,11 @@ export const DevicesContainer = ({
                   })}
                 </List>
               </ControlFrameItem>
-              <ControlFrameItem title='Add device'>
-                <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </ControlFrameItem>
+              {createInvitationUrl && (
+                <ControlFrameItem title='Add device'>
+                  <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+                </ControlFrameItem>
+              )}
             </ControlFrame>
           </ControlSection>
           <ControlSection
@@ -256,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,

package/src/components/ProfileContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema as S } from 'effect';
+import { Schema } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { debounce } from '@dxos/async';
@@ -163,10 +163,10 @@ export const ProfileContainer = () => {
 };
 
 // TODO(wittjosiah): Integrate annotations with translations.
-const ProfileSchema = S.Struct({
-  displayName: S.String.annotations({ title: 'Display name' }),
-  emoji: S.String.annotations({ title: 'Avatar' }),
-  hue: S.String.annotations({ title: 'Color' }),
-  did: S.String.annotations({ title: 'DID' }),
+const ProfileSchema = Schema.Struct({
+  displayName: Schema.String.annotations({ title: 'Display name' }),
+  emoji: Schema.String.annotations({ title: 'Avatar' }),
+  hue: Schema.String.annotations({ title: 'Color' }),
+  did: Schema.String.annotations({ title: 'DID' }),
 });
-type Profile = S.Schema.Type<typeof ProfileSchema>;
+type Profile = Schema.Schema.Type<typeof ProfileSchema>;

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -36,7 +36,7 @@ const meta: Meta<RecoveryCodeDialogProps> = {
   title: 'plugins/plugin-client/RecoveryCodeDialog',
   component: RecoveryCodeDialog,
   render: DefaultStory,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout()],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/RecoveryCredentialsContainer.stories.tsx

@@ -20,16 +20,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',

package/src/components/ResetDialog.stories.tsx

@@ -29,7 +29,13 @@ const meta: Meta<ResetDialogProps> = {
   title: 'plugins/plugin-client/ResetDialog',
   component: ResetDialog,
   render: Render,
-  decorators: [withPluginManager({ plugins: [IntentPlugin()] }), withTheme, withLayout({ tooltips: true })],
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/translations.ts

@@ -10,7 +10,7 @@ export default [
       [CLIENT_PLUGIN]: {
         'account label': 'User Account',
         'profile label': 'Profile',
-        'profile description': 'You can adjust how you’re represented in Composer here.',
+        'profile description': 'You can adjust how your user settings here.',
         'devices label': 'Devices',
         'devices verbose label': 'Manage devices',
         'add device description':