@dxos/plugin-client 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/dist/types/src/meta.d.ts

@@ -1,6 +1,4 @@
+import { type PluginMeta } from '@dxos/app-framework';
 export declare const CLIENT_PLUGIN = "dxos.org/plugin/client";
-export declare const meta: {
-    id: string;
-    name: string;
-};
+export declare const meta: PluginMeta;
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,2BAA2B,CAAC;AAEtD,eAAO,MAAM,IAAI;;;CAGK,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,aAAa,2BAA2B,CAAC;AAEtD,eAAO,MAAM,IAAI,EAAE,UAGlB,CAAC"}

package/dist/types/src/translations.d.ts

@@ -1,8 +1,35 @@
 declare const _default: {
     'en-US': {
         "dxos.org/plugin/client": {
-            'open shell label': string;
+            'account label': string;
+            'profile label': string;
+            'profile description': string;
+            'devices label': string;
+            'devices verbose label': string;
+            'add device description': string;
+            'devices description': string;
+            'create device invitation label': string;
+            'qr code description': string;
+            'security label': string;
+            'reset device description': string;
+            'join new identity description': string;
+            'recover identity description': string;
+            'danger zone title': string;
+            'danger zone description': string;
+            'display name label': string;
+            'display name description': string;
+            'display name input placeholder': string;
+            'icon label': string;
+            'icon description': string;
+            'hue label': string;
+            'hue description': string;
+            'did label': string;
+            'did description': string;
+            'open user account label': string;
             'manage credentials dialog title': string;
+            'credentials list label': string;
+            'no credentials title': string;
+            'no credentials message': string;
             'recovery setup dialog title': string;
             'recovery setup dialog description': string;
             'create passkey label': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,wBAyBE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBA6DE"}

package/dist/types/src/types.d.ts

@@ -51,7 +51,7 @@ export declare namespace ClientAction {
         readonly _tag: S.tag<"dxos.org/plugin/client/action/reset-storage">;
     } & {
         input: S.Struct<{
-            target: S.optional<typeof S.String>;
+            mode: S.optional<typeof S.String>;
         }>;
         output: typeof S.Void;
     }>;
@@ -89,6 +89,16 @@ export declare namespace ClientAction {
     }>;
     export class RedeemPasskey extends RedeemPasskey_base {
     }
+    const RedeemToken_base: S.TaggedClass<RedeemToken, "dxos.org/plugin/client/action/redeem-token", {
+        readonly _tag: S.tag<"dxos.org/plugin/client/action/redeem-token">;
+    } & {
+        input: S.Struct<{
+            token: typeof S.String;
+        }>;
+        output: typeof S.Void;
+    }>;
+    export class RedeemToken extends RedeemToken_base {
+    }
     export {};
 }
 export type ClientPluginOptions = ClientOptions & {
@@ -111,4 +121,10 @@ export type ClientPluginOptions = ClientOptions & {
         target?: string;
     }) => MaybePromise<void>;
 };
+export declare namespace Account {
+    const id = "!dxos.org.plugin.client.account";
+    const Profile = "dxos.org.plugin.client.account.profile";
+    const Devices = "dxos.org.plugin.client.account.devices";
+    const Security = "dxos.org.plugin.client.account.security";
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,KAAK,MAAM,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB/C,yBAAiB,YAAY,CAAC;;;;;;;;;;;;;;;;;IAC5B,MAAM,OAAO,cAAe,SAAQ,mBAKlC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,YAAa,SAAQ,iBAKhC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;;;;;;IAEL,MAAM,OAAO,eAAgB,SAAQ,oBAGnC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,YAAa,SAAQ,iBAKhC;KAAG;;;;;;;IAEL,MAAM,OAAO,WAAY,SAAQ,gBAG/B;KAAG;;;;;;;IAEL,MAAM,OAAO,kBAAmB,SAAQ,uBAGtC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;CACN;AAED,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG;IAChD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAEtF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,KAAK,MAAM,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB/C,yBAAiB,YAAY,CAAC;;;;;;;;;;;;;;;;;IAC5B,MAAM,OAAO,cAAe,SAAQ,mBAKlC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,YAAa,SAAQ,iBAKhC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;;;;;;IAEL,MAAM,OAAO,eAAgB,SAAQ,oBAGnC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,YAAa,SAAQ,iBAKhC;KAAG;;;;;;;IAEL,MAAM,OAAO,WAAY,SAAQ,gBAG/B;KAAG;;;;;;;IAEL,MAAM,OAAO,kBAAmB,SAAQ,uBAGtC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;;;;;;IAEL,MAAM,OAAO,aAAc,SAAQ,kBAGjC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,WAAY,SAAQ,gBAK/B;KAAG;;CACN;AAED,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG;IAChD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAEtF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEF,yBAAiB,OAAO,CAAC;IAKhB,MAAM,EAAE,oCAAY,CAAC;IAErB,MAAM,OAAO,2CAAmB,CAAC;IACjC,MAAM,OAAO,2CAAmB,CAAC;IACjC,MAAM,QAAQ,4CAAoB,CAAC;CAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.8.1-staging.391c573",
+  "version": "0.8.1-staging.97aedb1",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -34,37 +34,44 @@
   ],
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
-    "@dxos/app-framework": "0.8.1-staging.391c573",
-    "@dxos/config": "0.8.1-staging.391c573",
-    "@dxos/echo-signals": "0.8.1-staging.391c573",
-    "@dxos/invariant": "0.8.1-staging.391c573",
-    "@dxos/echo-schema": "0.8.1-staging.391c573",
-    "@dxos/local-storage": "0.8.1-staging.391c573",
-    "@dxos/plugin-graph": "0.8.1-staging.391c573",
-    "@dxos/plugin-observability": "0.8.1-staging.391c573",
-    "@dxos/log": "0.8.1-staging.391c573",
-    "@dxos/react-client": "0.8.1-staging.391c573",
-    "@dxos/shell": "0.8.1-staging.391c573",
-    "@dxos/util": "0.8.1-staging.391c573"
+    "react-qr-rounded": "^1.0.0",
+    "@dxos/app-framework": "0.8.1-staging.97aedb1",
+    "@dxos/async": "0.8.1-staging.97aedb1",
+    "@dxos/config": "0.8.1-staging.97aedb1",
+    "@dxos/echo-signals": "0.8.1-staging.97aedb1",
+    "@dxos/invariant": "0.8.1-staging.97aedb1",
+    "@dxos/local-storage": "0.8.1-staging.97aedb1",
+    "@dxos/log": "0.8.1-staging.97aedb1",
+    "@dxos/plugin-graph": "0.8.1-staging.97aedb1",
+    "@dxos/echo-schema": "0.8.1-staging.97aedb1",
+    "@dxos/plugin-observability": "0.8.1-staging.97aedb1",
+    "@dxos/react-client": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-form": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-pickers": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-stack": "0.8.1-staging.97aedb1",
+    "@dxos/shell": "0.8.1-staging.97aedb1",
+    "@dxos/util": "0.8.1-staging.97aedb1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/live-object": "0.8.1-staging.391c573",
-    "@dxos/react-ui": "0.8.1-staging.391c573",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573",
-    "@dxos/storybook-utils": "0.8.1-staging.391c573"
+    "@dxos/live-object": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/storybook-utils": "0.8.1-staging.97aedb1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-staging.391c573",
-    "@dxos/react-ui-theme": "0.8.1-staging.391c573"
+    "@dxos/react-ui": "0.8.1-staging.97aedb1",
+    "@dxos/react-ui-theme": "0.8.1-staging.97aedb1"
   },
   "publishConfig": {
     "access": "public"

package/src/ClientPlugin.ts

@@ -57,7 +57,7 @@ export const ClientPlugin = ({
     defineModule({
       id: `${meta.id}/module/react-surface`,
       activatesOn: Events.SetupReactSurface,
-      activate: () => ReactSurface({ createInvitationUrl }),
+      activate: () => ReactSurface({ createInvitationUrl, onReset }),
     }),
     defineModule({
       id: `${meta.id}/module/app-graph-builder`,
@@ -67,7 +67,7 @@ export const ClientPlugin = ({
     defineModule({
       id: `${meta.id}/module/intent-resolver`,
       activatesOn: Events.SetupIntentResolver,
-      activate: (context) => IntentResolver({ context, onReset }),
+      activate: (context) => IntentResolver({ context }),
     }),
     defineModule({
       id: `${meta.id}/module/translations`,

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

@@ -4,10 +4,12 @@
 
 import { createIntent } from '@dxos/app-framework';
 import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
-import { createExtension, type Node } from '@dxos/plugin-graph';
+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 { ClientAction } from '../types';
+import { Account, ClientAction } from '../types';
 
 export default (context: PluginsContext) =>
   contributes(
@@ -17,23 +19,77 @@ export default (context: PluginsContext) =>
       filter: (node): node is Node<null> => node.id === 'root',
       actions: () => [
         {
-          id: `${CLIENT_PLUGIN}/open-shell`,
+          id: `${CLIENT_PLUGIN}/open-user-account`,
           data: async () => {
             const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
             await dispatch(createIntent(ClientAction.ShareIdentity));
           },
           properties: {
-            label: ['open shell label', { ns: CLIENT_PLUGIN }],
-            icon: 'ph--address-book--regular',
+            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+>',
             },
-            testId: 'clientPlugin.openShell',
           },
         },
       ],
+      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',
+                },
+              },
+            ],
+          },
+        ];
+      },
     }),
   );

package/src/capabilities/capabilities.ts

@@ -12,5 +12,6 @@ import { CLIENT_PLUGIN } from '../meta';
 export namespace ClientCapabilities {
   export const Client = defineCapability<Client>(`${CLIENT_PLUGIN}/capability/client`);
   export const Schema = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/schema`);
+  export const SchemaWhiteList = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/schema-whitelist`);
   export const Migration = defineCapability<ObjectMigration[]>(`${CLIENT_PLUGIN}/capability/migration`);
 }

package/src/capabilities/client.ts

@@ -29,7 +29,7 @@ export default async ({ context, onClientInitialized, ...options }: ClientCapabi
 
   const subscription = client.spaces.isReady.subscribe(async (ready) => {
     if (ready) {
-      await context.activate(ClientEvents.SpacesReady);
+      await context.activatePromise(ClientEvents.SpacesReady);
     }
   });
 

package/src/capabilities/intent-resolver.ts

@@ -2,8 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import { pipe } from 'effect';
+
 import {
   Capabilities,
+  chain,
   contributes,
   createIntent,
   createResolver,
@@ -16,16 +19,18 @@ import { PublicKey } from '@dxos/react-client';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { ClientCapabilities } from './capabilities';
-import { IDENTITY_DIALOG, JOIN_DIALOG, RECOVER_CODE_DIALOG } from '../components';
+import { JOIN_DIALOG, RECOVERY_CODE_DIALOG, RESET_DIALOG } from '../components';
 import { ClientEvents } from '../events';
-import { ClientAction, type ClientPluginOptions } from '../types';
+import { Account, ClientAction } from '../types';
 
-type IntentResolverOptions = Pick<ClientPluginOptions, 'onReset'> & {
+type IntentResolverOptions = {
   context: PluginsContext;
   appName?: string;
 };
 
-export default ({ context, appName = 'Composer', onReset }: IntentResolverOptions) =>
+const RECOVER_IDENTITY_RPC_TIMEOUT = 20_000;
+
+export default ({ context, appName = 'Composer' }: IntentResolverOptions) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ClientAction.CreateIdentity,
@@ -34,7 +39,14 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
         const client = context.requestCapability(ClientCapabilities.Client);
         const data = await client.halo.createIdentity();
         await manager.activate(ClientEvents.IdentityCreated);
-        return { data, intents: [createIntent(ObservabilityAction.SendEvent, { name: 'identity.create' })] };
+        return {
+          data,
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'identity.create',
+            }),
+          ],
+        };
       },
     }),
     createResolver({
@@ -62,14 +74,19 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
       resolve: async () => {
         return {
           intents: [
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              subject: IDENTITY_DIALOG,
-              options: {
-                blockAlign: 'start',
-              },
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: Account.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [Account.Profile],
+              }),
+            ),
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'identity.share',
             }),
-            createIntent(ObservabilityAction.SendEvent, { name: 'identity.share' }),
           ],
         };
       },
@@ -96,7 +113,20 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
     createResolver({
       intent: ClientAction.ResetStorage,
       resolve: async (data) => {
-        await onReset?.({ target: data.target });
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: RESET_DIALOG,
+              options: {
+                blockAlign: 'start',
+                props: {
+                  mode: data.mode ?? 'reset storage',
+                },
+              },
+            }),
+          ],
+        };
       },
     }),
     createResolver({
@@ -118,7 +148,7 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
           intents: [
             createIntent(LayoutAction.UpdateDialog, {
               part: 'dialog',
-              subject: RECOVER_CODE_DIALOG,
+              subject: RECOVERY_CODE_DIALOG,
               options: {
                 blockAlign: 'start',
                 type: 'alert',
@@ -190,16 +220,31 @@ export default ({ context, appName = 'Composer', onReset }: IntentResolverOption
           },
         });
         const lookupKey = PublicKey.from(new Uint8Array((credential as any).response.userHandle));
-        await client.services.services.IdentityService.recoverIdentity({
-          external: {
-            lookupKey,
-            deviceKey,
-            controlFeedKey,
-            signature: Buffer.from((credential as any).response.signature),
-            clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
-            authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+        await client.services.services.IdentityService.recoverIdentity(
+          {
+            external: {
+              lookupKey,
+              deviceKey,
+              controlFeedKey,
+              signature: Buffer.from((credential as any).response.signature),
+              clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
+              authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+            },
           },
-        });
+          { timeout: RECOVER_IDENTITY_RPC_TIMEOUT },
+        );
+      },
+    }),
+    createResolver({
+      intent: ClientAction.RedeemToken,
+      resolve: async (data) => {
+        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(
+          { token: data.token },
+          { timeout: RECOVER_IDENTITY_RPC_TIMEOUT },
+        );
       },
     }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -5,32 +5,46 @@
 import React from 'react';
 
 import { createSurface, Capabilities, contributes } from '@dxos/app-framework';
-import { type IdentityPanelProps, type JoinPanelProps } from '@dxos/shell/react';
+import { type JoinPanelProps } from '@dxos/shell/react';
 
 import {
-  IDENTITY_DIALOG,
-  IdentityDialog,
+  DevicesContainer,
   JOIN_DIALOG,
   JoinDialog,
-  RECOVER_CODE_DIALOG,
-  RECOVER_SETUP_DIALOG,
+  ProfileContainer,
+  RECOVERY_CODE_DIALOG,
   RecoveryCodeDialog,
-  RecoverySetupDialog,
+  RecoveryCredentialsContainer,
+  RESET_DIALOG,
+  ResetDialog,
+  type ResetDialogProps,
   type RecoveryCodeDialogProps,
 } from '../components';
-import { MANAGE_CREDENTIALS_DIALOG, ManageCredentialsDialog } from '../components/ManageCredentialsDialog';
+import { Account, type ClientPluginOptions } from '../types';
 
-type ReactSurfaceOptions = {
+type ReactSurfaceOptions = Pick<ClientPluginOptions, 'onReset'> & {
   createInvitationUrl: (invitationCode: string) => string;
 };
 
-export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
+export default ({ createInvitationUrl, onReset }: ReactSurfaceOptions) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: IDENTITY_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: IdentityPanelProps } => data.component === IDENTITY_DIALOG,
-      component: ({ data }) => <IdentityDialog {...data.props} createInvitationUrl={createInvitationUrl} />,
+      id: Account.Profile,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Profile,
+      component: () => <ProfileContainer />,
+    }),
+    createSurface({
+      id: Account.Devices,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Devices,
+      component: ({ data }) => <DevicesContainer createInvitationUrl={createInvitationUrl} />,
+    }),
+    createSurface({
+      id: Account.Security,
+      role: 'article',
+      filter: (data): data is any => data.subject === Account.Security,
+      component: () => <RecoveryCredentialsContainer />,
     }),
     createSurface({
       id: JOIN_DIALOG,
@@ -39,21 +53,15 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data }) => <JoinDialog {...data.props} />,
     }),
     createSurface({
-      id: RECOVER_CODE_DIALOG,
+      id: RECOVERY_CODE_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
+      filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVERY_CODE_DIALOG,
       component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
     }),
     createSurface({
-      id: RECOVER_SETUP_DIALOG,
-      role: 'dialog',
-      filter: (data): data is any => data.component === RECOVER_SETUP_DIALOG,
-      component: () => <RecoverySetupDialog />,
-    }),
-    createSurface({
-      id: MANAGE_CREDENTIALS_DIALOG,
+      id: RESET_DIALOG,
       role: 'dialog',
-      filter: (data): data is any => data.component === MANAGE_CREDENTIALS_DIALOG,
-      component: () => <ManageCredentialsDialog />,
+      filter: (data): data is { props: ResetDialogProps } => data.component === RESET_DIALOG,
+      component: ({ data }) => <ResetDialog {...data.props} onReset={onReset} />,
     }),
   ]);

package/src/components/DevicesContainer.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { osTranslations } from '@dxos/shell/react';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { DevicesContainer } from './DevicesContainer';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/DevicesContainer',
+  component: DevicesContainer,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, osTranslations],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DevicesContainer>;
+
+export const Default: Story = {};