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

package/src/{components → containers/RecoveryCredentialsContainer}/RecoveryCredentialsContainer.stories.tsx

@@ -5,29 +5,32 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ClientPlugin } from '../ClientPlugin';
-import { translations } from '../translations';
+import { ClientPlugin } from '../../ClientPlugin';
+import { initializeIdentity } from '#testing';
+import { translations } from '../../translations';
 
 import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/RecoveryCredentialsContainer',
+  title: 'plugins/plugin-client/containers/RecoveryCredentialsContainer',
   component: RecoveryCredentialsContainer,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ClientPlugin({
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
         OperationPlugin(),
+        RuntimePlugin(),
       ],
     }),
   ],

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { useCredentials } from '@dxos/react-client/halo';
+import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
+
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
+
+export const RecoveryCredentialsContainer = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter(
+    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
+  );
+
+  return (
+    <Settings.Viewport>
+      <Settings.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>
+        <Settings.Item title={t('create-passkey.label')} description={t('create-passkey.description')}>
+          <IconButton
+            label={t('create-passkey.label')}
+            icon='ph--key--duotone'
+            variant='primary'
+            onClick={() => invokePromise(ClientOperation.CreatePasskey)}
+          />
+        </Settings.Item>
+        <Settings.Item title={t('create-recovery-code.label')} description={t('create-recovery-code.description')}>
+          <IconButton
+            label={t('create-recovery-code.label')}
+            icon='ph--receipt--duotone'
+            variant='default'
+            onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}
+          />
+        </Settings.Item>
+      </Settings.Section>
+      <Settings.Section title={t('credentials-list.label')}>
+        {recoveryCredentials.length < 1 ? (
+          <Message.Root valence='error'>
+            <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>
+            <Message.Content>{t('no-credentials.message')}</Message.Content>
+          </Message.Root>
+        ) : (
+          <List>
+            {recoveryCredentials.map((credential) => (
+              <ListItem.Root key={credential.id?.toHex()}>
+                <ListItem.Endcap>
+                  <Icon icon='ph--key--regular' />
+                </ListItem.Endcap>
+                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        )}
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};

package/src/containers/RecoveryCredentialsContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
+
+export default RecoveryCredentialsContainer;

package/src/{components → containers/ResetDialog}/ResetDialog.stories.tsx

@@ -6,26 +6,26 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
-import { usePluginManager } from '@dxos/app-framework/react';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { usePluginManager } from '@dxos/app-framework/ui';
 import { Dialog } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ClientPlugin } from '../ClientPlugin';
-import { translations } from '../translations';
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
 
 import { ResetDialog, type ResetDialogProps } from './ResetDialog';
 
-const Render = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
+const DefaultStory = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
   const manager = usePluginManager();
 
   return (
     <Dialog.Root open>
       <Dialog.Overlay>
         <ResetDialog
-          onReset={() => Effect.sync(() => console.log('reset'))}
           capabilityManager={manager.capabilities}
+          onReset={() => Effect.sync(() => console.log('reset'))}
           {...props}
         />
       </Dialog.Overlay>
@@ -34,13 +34,14 @@ const Render = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-client/ResetDialog',
+  title: 'plugins/plugin-client/containers/ResetDialog',
   component: ResetDialog,
-  render: Render as any,
+  render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
-      plugins: [OperationPlugin(), ClientPlugin({})],
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {
@@ -53,8 +54,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = { args: { mode: 'reset storage' as const } as any };
+export const Default: Story = {
+  args: {
+    mode: 'reset storage' as const,
+  } as any,
+};
 
-export const JoinNewIdentity: Story = { args: { mode: 'join new identity' as const } as any };
+export const JoinNewIdentity: Story = {
+  args: {
+    mode: 'join new identity' as const,
+  } as any,
+};
 
-export const Recover: Story = { args: { mode: 'recover' as const } as any };
+export const Recover: Story = {
+  args: {
+    mode: 'recover' as const,
+  } as any,
+};

package/src/{components → containers/ResetDialog}/ResetDialog.tsx

@@ -5,15 +5,15 @@
 import * as Effect from 'effect/Effect';
 import React, { useCallback } from 'react';
 
-import { Capability, type CapabilityManager, Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { Capability, type CapabilityManager } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { runAndForwardErrors } from '@dxos/effect';
 import { useClient } from '@dxos/react-client';
 import { Dialog, useTranslation } from '@dxos/react-ui';
-import { ConfirmReset, type ConfirmResetProps } from '@dxos/shell/react';
+import { ConfirmReset, type ConfirmResetProps, translationKey } from '@dxos/shell/react';
 
-import { meta } from '../meta';
-import { type ClientPluginOptions } from '../types';
+import { type ClientPluginOptions } from '#types';
 
 export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
   Pick<ClientPluginOptions, 'onReset'> & {
@@ -21,7 +21,7 @@ export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
   };
 
 export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(translationKey);
   const { invokePromise } = useOperationInvoker();
   const client = useClient();
 
@@ -35,15 +35,15 @@ export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogPro
   }, [client, mode, onReset, capabilityManager]);
 
   const handleCancel = useCallback(() => {
-    void invokePromise(Common.LayoutOperation.UpdateDialog, { state: false });
+    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
   }, [invokePromise]);
 
-  // TODO(wittjosiah): Add the sr-only translations.
-  // TODO(wittjosiah): Add missing descriptions to other dialogs.
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('reset dialog title')}</Dialog.Title>
-      <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
+      <Dialog.Header>
+        <Dialog.Title>{t('reset-dialog.title')}</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Description classNames='sr-only'>{t('reset-dialog.description')}</Dialog.Description>
       <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
     </Dialog.Content>
   );

package/src/containers/ResetDialog/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ResetDialog } from './ResetDialog';
+
+export * from './ResetDialog';
+export default ResetDialog;

package/src/containers/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export { type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
+export { type ResetDialogProps } from './ResetDialog';
+
+export const DevicesContainer: ComponentType<any> = lazy(() => import('./DevicesContainer'));
+export const JoinDialog: ComponentType<any> = lazy(() => import('./JoinDialog'));
+export const ProfileContainer: ComponentType<any> = lazy(() => import('./ProfileContainer'));
+export const RecoveryCodeDialog: ComponentType<any> = lazy(() => import('./RecoveryCodeDialog'));
+export const RecoveryCredentialsContainer: ComponentType<any> = lazy(() => import('./RecoveryCredentialsContainer'));
+export const ResetDialog: ComponentType<any> = lazy(() => import('./ResetDialog'));

package/src/index.ts

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

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/client',
+  id: 'org.dxos.plugin.client',
   name: 'Client',
   description: trim`
     Core client connectivity and peer-to-peer networking infrastructure.

package/src/operations/create-agent.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+
+import { CreateAgent } from './definitions';
+
+import { ClientCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof CreateAgent> = CreateAgent.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
+      yield* Effect.promise(() =>
+        client.services.services.EdgeAgentService!.createAgent(undefined, { timeout: 10_000 }),
+      );
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/create-identity.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Operation } from '@dxos/operation';
+import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+
+import { CreateIdentity } from './definitions';
+
+import { ClientEvents } from '../types';
+import { ClientCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof CreateIdentity> = CreateIdentity.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (profile) {
+      const manager = yield* Capability.get(Capabilities.PluginManager);
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      const data = yield* Effect.promise(() => client.halo.createIdentity(profile));
+      yield* Effect.promise(() => runAndForwardErrors(manager.activate(ClientEvents.IdentityCreated)));
+      yield* Operation.schedule(ObservabilityOperation.SendEvent, { name: 'identity.create' });
+      return data;
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/create-passkey.ts

@@ -0,0 +1,89 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Match from 'effect/Match';
+
+import { Capability } from '@dxos/app-framework';
+import { supportsNativePasskeys, createNativePasskey, extractPublicKeyFromAttestation } from '@dxos/app-toolkit';
+import { PublicKey } from '@dxos/client';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+
+import { CreatePasskey } from './definitions';
+
+import { ClientCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof CreatePasskey> = CreatePasskey.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      const identity = client.halo.identity.get();
+      invariant(identity, 'Identity not available');
+
+      const lookupKey = PublicKey.random();
+
+      const { recoveryKey, algorithm } = yield* Match.value(supportsNativePasskeys()).pipe(
+        Match.when(true, () =>
+          Effect.gen(function* () {
+            const result = yield* Effect.promise(() =>
+              createNativePasskey({
+                username: identity.did,
+                userId: lookupKey.asUint8Array(),
+              }),
+            );
+            const { publicKey, algorithm: alg } = extractPublicKeyFromAttestation(result.attestation_object);
+            return {
+              recoveryKey: PublicKey.from(publicKey),
+              algorithm: alg === -7 ? 'ES256' : 'ED25519',
+            };
+          }),
+        ),
+        Match.orElse(() =>
+          Effect.gen(function* () {
+            const credential = yield* Effect.promise(() =>
+              navigator.credentials.create({
+                publicKey: {
+                  challenge: new Uint8Array(),
+                  rp: { id: location.hostname, name: 'Composer' },
+                  user: {
+                    id: lookupKey.asUint8Array() as Uint8Array<ArrayBuffer>,
+                    name: identity.did,
+                    displayName: identity.profile?.displayName ?? '',
+                  },
+                  pubKeyCredParams: [
+                    { type: 'public-key', alg: -8 },
+                    { type: 'public-key', alg: -7 },
+                  ],
+                  authenticatorSelection: {
+                    residentKey: 'required',
+                    requireResidentKey: true,
+                  },
+                },
+              }),
+            );
+            invariant(credential, 'Credential not available');
+            return {
+              recoveryKey: PublicKey.from(new Uint8Array((credential as any).response.getPublicKey())),
+              algorithm: (credential as any).response.getPublicKeyAlgorithm() === -7 ? 'ES256' : 'ED25519',
+            };
+          }),
+        ),
+      );
+
+      invariant(client.services.services.IdentityService, 'IdentityService not available');
+      yield* Effect.promise(() =>
+        client.services.services.IdentityService!.createRecoveryCredential({
+          data: {
+            recoveryKey,
+            algorithm,
+            lookupKey,
+          },
+        }),
+      );
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/create-recovery-code.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+
+import { CreateRecoveryCode } from './definitions';
+
+import { RECOVERY_CODE_DIALOG } from '../constants';
+import { ClientCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof CreateRecoveryCode> = CreateRecoveryCode.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      invariant(client.services.services.IdentityService, 'IdentityService not available');
+      const { recoveryCode } = yield* Effect.promise(() =>
+        client.services.services.IdentityService!.createRecoveryCredential({}),
+      );
+      yield* Operation.invoke(LayoutOperation.UpdateDialog, {
+        subject: RECOVERY_CODE_DIALOG,
+        blockAlign: 'start',
+        type: 'alert',
+        props: { code: recoveryCode },
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/definitions.ts

@@ -0,0 +1,107 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { PublicKey } from '@dxos/client';
+import { Operation } from '@dxos/operation';
+
+import { meta } from '#meta';
+
+const CLIENT_OPERATION = `${meta.id}.operation`;
+
+const IdentitySchema = Schema.Struct({
+  identityKey: Schema.instanceOf(PublicKey),
+  spaceKey: Schema.optional(Schema.instanceOf(PublicKey)),
+  profile: Schema.optional(
+    Schema.Struct({
+      displayName: Schema.optional(Schema.String),
+      avatarCid: Schema.optional(Schema.String),
+      data: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
+    }),
+  ),
+});
+
+const ProfileSchema = Schema.Struct({
+  displayName: Schema.optional(Schema.String),
+  avatarCid: Schema.optional(Schema.String),
+  data: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
+});
+
+export const CreateIdentity = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.create-identity`, name: 'Create Identity' },
+  services: [Capability.Service],
+  input: ProfileSchema,
+  output: IdentitySchema,
+});
+
+export const JoinIdentity = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.join-identity`, name: 'Join Identity' },
+  services: [Capability.Service],
+  input: Schema.Struct({
+    invitationCode: Schema.optional(Schema.String),
+  }),
+  output: Schema.Void,
+});
+
+export const ShareIdentity = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.share-identity`, name: 'Share Identity' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const RecoverIdentity = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.recover-identity`, name: 'Recover Identity' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const ResetStorage = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.reset-storage`, name: 'Reset Storage' },
+  services: [Capability.Service],
+  input: Schema.Struct({
+    mode: Schema.optional(Schema.String),
+  }),
+  output: Schema.Void,
+});
+
+export const CreateAgent = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.create-agent`, name: 'Create Agent' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const CreateRecoveryCode = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.create-recovery-code`, name: 'Create Recovery Code' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const CreatePasskey = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.create-passkey`, name: 'Create Passkey' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const RedeemPasskey = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.redeem-passkey`, name: 'Redeem Passkey' },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
+export const RedeemToken = Operation.make({
+  meta: { key: `${CLIENT_OPERATION}.redeem-token`, name: 'Redeem Token' },
+  services: [Capability.Service],
+  input: Schema.Struct({
+    token: Schema.String,
+  }),
+  output: Schema.Void,
+});

package/src/operations/index.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export * as ClientOperation from './definitions';
+
+export const ClientOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./create-agent'),
+  () => import('./create-identity'),
+  () => import('./create-passkey'),
+  () => import('./create-recovery-code'),
+  () => import('./join-identity'),
+  () => import('./recover-identity'),
+  () => import('./redeem-passkey'),
+  () => import('./redeem-token'),
+  () => import('./reset-storage'),
+  () => import('./share-identity'),
+);

package/src/operations/join-identity.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { JoinIdentity } from './definitions';
+
+import { JOIN_DIALOG } from '../constants';
+
+const handler: Operation.WithHandler<typeof JoinIdentity> = JoinIdentity.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (data) {
+      yield* Operation.invoke(LayoutOperation.UpdateDialog, {
+        subject: JOIN_DIALOG,
+        blockAlign: 'start',
+        props: {
+          initialInvitationCode: data.invitationCode,
+          initialDisposition: 'accept-halo-invitation',
+        },
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/recover-identity.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+import { type JoinPanelProps } from '@dxos/shell/react';
+
+import { RecoverIdentity } from './definitions';
+
+import { JOIN_DIALOG } from '../constants';
+
+const handler: Operation.WithHandler<typeof RecoverIdentity> = RecoverIdentity.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      yield* Operation.invoke(LayoutOperation.UpdateDialog, {
+        subject: JOIN_DIALOG,
+        blockAlign: 'start',
+        props: {
+          initialDisposition: 'recover-identity',
+        } satisfies Partial<JoinPanelProps>,
+      });
+    }),
+  ),
+);
+
+export default handler;