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

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

@@ -2,112 +2,94 @@
 // 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 PluginContext } from '@dxos/app-framework';
-import { createExtension, rxFromObservable, ROOT_ID } from '@dxos/plugin-graph';
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { createExtension, toSignal, type Node } 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: PluginContext) =>
+export default (context: PluginsContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
       id: CLIENT_PLUGIN,
-      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+>',
-                    },
-                  },
-                },
-              ];
-            }),
-            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));
+      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',
-                      },
-                    },
-                    {
-                      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',
-                      },
-                    },
-                  ],
+        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 PluginContext } from '@dxos/app-framework';
+import { contributes, type PluginsContext } from '@dxos/app-framework';
 import { Client } from '@dxos/react-client';
 
 import { ClientCapabilities } from './capabilities';
@@ -10,7 +10,7 @@ import { ClientEvents } from '../events';
 import { type ClientPluginOptions } from '../types';
 
 type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationUrl' | 'invitationParam' | 'onReset'> & {
-  context: PluginContext;
+  context: PluginsContext;
 };
 
 export default async ({ context, onClientInitialized, ...options }: ClientCapabilityOptions) => {

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 SchemaDefs = lazy(async () => import('./schema-defs'));
+export const Schema = lazy(async () => import('./schema'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -11,7 +11,7 @@ import {
   createIntent,
   createResolver,
   LayoutAction,
-  type PluginContext,
+  type PluginsContext,
 } 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: PluginContext;
+  context: PluginsContext;
   appName?: string;
 };
 
@@ -35,8 +35,8 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.CreateIdentity,
       resolve: async () => {
-        const manager = context.getCapability(Capabilities.PluginManager);
-        const client = context.getCapability(ClientCapabilities.Client);
+        const manager = context.requestCapability(Capabilities.PluginManager);
+        const client = context.requestCapability(ClientCapabilities.Client);
         const data = await client.halo.createIdentity();
         await manager.activate(ClientEvents.IdentityCreated);
         return {
@@ -132,7 +132,7 @@ export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
     createResolver({
       intent: ClientAction.CreateAgent,
       resolve: async () => {
-        const client = context.getCapability(ClientCapabilities.Client);
+        const client = context.requestCapability(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.getCapability(ClientCapabilities.Client);
+        const client = context.requestCapability(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.getCapability(ClientCapabilities.Client);
+        const client = context.requestCapability(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.getCapability(ClientCapabilities.Client);
+        const client = context.requestCapability(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.getCapability(ClientCapabilities.Client);
+        const client = context.requestCapability(ClientCapabilities.Client);
         // TODO(wittjosiah): This needs a proper api.
         invariant(client.services.services.IdentityService, 'IdentityService not available');
         await client.services.services.IdentityService.recoverIdentity(

package/src/capabilities/migrations.ts

@@ -2,24 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
 
 import { ClientCapabilities } from './capabilities';
 
-export default (context: PluginContext) => {
-  const registry = context.getCapability(Capabilities.RxRegistry);
-  const client = context.getCapability(ClientCapabilities.Client);
+export default (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
 
   // NOTE: Migrations are currently unidirectional and idempotent.
-  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 },
-  );
+  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)));
+  });
 
-  return contributes(Capabilities.Null, null, () => cancel());
+  return contributes(Capabilities.Null, null, () => unsubscribe());
 };

package/src/capabilities/schema.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type TypedObject } from '@dxos/echo-schema';
+
+import { ClientCapabilities } from './capabilities';
+
+export default (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
+
+  // TODO(wittjosiah): Unregister schemas when they are disabled.
+  let previous: TypedObject[] = [];
+  const unsubscribe = effect(() => {
+    const schemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Schema).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);
+  });
+
+  return contributes(Capabilities.Null, null, () => unsubscribe());
+};

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(),
+    withLayout({ tooltips: true }),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -42,8 +42,4 @@ export default meta;
 
 type Story = StoryObj<typeof DevicesContainer>;
 
-export const Default: Story = {
-  args: {
-    createInvitationUrl: () => 'https://example.com',
-  },
-};
+export const Default: Story = {};

package/src/components/DevicesContainer.tsx

@@ -13,14 +13,7 @@ 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,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
+import { ControlFrame, ControlFrameItem, ControlGroup, ControlItem, ControlSection } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
@@ -29,11 +22,11 @@ import { hexToEmoji } from '@dxos/util';
 import { CLIENT_PLUGIN } from '../meta';
 import { ClientAction } from '../types';
 
-export type DevicesContainerProps = {
-  createInvitationUrl?: (invitationCode: string) => string;
-};
-
-export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
+export const DevicesContainer = ({
+  createInvitationUrl,
+}: {
+  createInvitationUrl: (invitationCode: string) => string;
+}) => {
   const { t } = useTranslation('os');
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const devices = useDevices();
@@ -53,69 +46,57 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <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 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>
     </Clipboard.Provider>
   );
@@ -258,16 +239,11 @@ 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>
-      {/* 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>
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
     </>
   );
 };

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()],
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/ProfileContainer.tsx

@@ -2,21 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import { Schema as S } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
-import {
-  Form,
-  type InputComponent,
-  ControlItem,
-  ControlItemInput,
-  ControlSection,
-  ControlPage,
-} from '@dxos/react-ui-form';
+import { Form, type InputComponent, ControlItem, ControlItemInput, ControlSection } from '@dxos/react-ui-form';
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
 import { hexToHue, hexToEmoji } from '@dxos/util';
@@ -143,30 +136,28 @@ export const ProfileContainer = () => {
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <ControlPage>
-        <Clipboard.Provider>
-          <ControlSection title={t('profile label')} description={t('profile description')}>
-            <Form
-              schema={ProfileSchema}
-              values={values}
-              autoSave
-              onSave={handleSave}
-              Custom={customElements}
-              classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
-            />
-          </ControlSection>
-        </Clipboard.Provider>
-      </ControlPage>
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <Clipboard.Provider>
+        <ControlSection title={t('profile label')} description={t('profile description')}>
+          <Form
+            schema={ProfileSchema}
+            values={values}
+            autoSave
+            onSave={handleSave}
+            Custom={customElements}
+            classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+          />
+        </ControlSection>
+      </Clipboard.Provider>
     </StackItem.Content>
   );
 };
 
 // TODO(wittjosiah): Integrate annotations with translations.
-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' }),
+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' }),
 });
-type Profile = Schema.Schema.Type<typeof ProfileSchema>;
+type Profile = S.Schema.Type<typeof ProfileSchema>;