@dxos/plugin-client 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

package/src/cli/commands/device/list/list.test.ts

@@ -16,7 +16,6 @@ describe('device list', () => {
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity());
-      yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
       yield* handler();
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;

package/src/cli/commands/device/list/list.ts

@@ -15,8 +15,6 @@ import { mapDevices, printDevices } from '../util';
 export const handler = Effect.fn(function* () {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   const devices = client.halo.devices.get();
 
   if (json) {

package/src/cli/commands/device/update/update.ts

@@ -16,8 +16,6 @@ import { printDevice } from '../util';
 export const handler = Effect.fn(function* ({ label }: { label: string }) {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   const device = client.halo.device;
   if (!device) {
     if (json) {

package/src/cli/commands/edge/status.ts

@@ -10,13 +10,14 @@ import * as Option from 'effect/Option';
 import { CommandConfig } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
 import { createEdgeIdentity } from '@dxos/client/edge';
+import { Context } from '@dxos/context';
 
 export const getStatus = () =>
   Effect.gen(function* () {
     const client = yield* ClientService;
     const identity = createEdgeIdentity(client);
     client.edge.http.setIdentity(identity);
-    const status = yield* Effect.tryPromise(() => client.edge.http.getStatus());
+    const status = yield* Effect.tryPromise(() => client.edge.http.getStatus(Context.default()));
 
     if (yield* CommandConfig.isJson) {
       yield* Console.log(JSON.stringify(status, null, 2));

package/src/cli/commands/halo/create/create.test.ts

@@ -15,7 +15,6 @@ import { runAndForwardErrors } from '@dxos/effect';
 import { ObservabilityPlugin } from '@dxos/plugin-observability/cli';
 
 import { ClientPlugin } from '../../../plugin';
-
 import { handler } from './create';
 
 const layer = Layer.merge(TestLayer, fromPlugins([ClientPlugin({}), OperationPlugin(), ObservabilityPlugin()]));

package/src/cli/commands/halo/create/create.ts

@@ -9,12 +9,16 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capabilities, Plugin } from '@dxos/app-framework';
+import { PERSONAL_SPACE_TAG } from '@dxos/app-toolkit';
 import { CommandConfig, flushAndSync, spaceLayer } from '@dxos/cli-util';
 import { print } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
 import { invariant } from '@dxos/invariant';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { MembershipPolicy } from '@dxos/protocols/proto/dxos/halo/credentials';
+
+import { ClientOperation } from '#operations';
 
-import { ClientOperation } from '../../../../types';
 import { printIdentity } from '../util';
 
 export const handler = Effect.fn(function* ({
@@ -39,9 +43,12 @@ export const handler = Effect.fn(function* ({
     yield* invoke(ClientOperation.CreateAgent);
   }
 
-  yield* Effect.promise(() => client.spaces.waitUntilReady());
-  yield* Effect.promise(() => client.spaces.default.waitUntilReady());
-  const space = client.spaces.default;
+  // Create personal space for the CLI identity.
+  const space = yield* Effect.promise(() =>
+    client.spaces.create({}, { tags: [PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
+  );
+  yield* Effect.promise(() => space.waitUntilReady());
+  yield* Effect.promise(() => space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED));
   yield* flushAndSync({ indexes: true }).pipe(Effect.provide(spaceLayer(Option.some(space.id))));
 
   if (json) {

package/src/cli/commands/halo/credential/list/list.test.ts

@@ -17,7 +17,6 @@ describe('halo credential list', () => {
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity());
-      yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
       yield* handler({ type: Option.none(), spaceId: Option.none(), timeout: 500, delay: 250 });
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;

package/src/cli/commands/halo/credential/list/list.ts

@@ -9,7 +9,7 @@ import * as Duration from 'effect/Duration';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
-import { CommandConfig, Common, FormBuilder, getSpace, printList, spaceIdWithDefault } from '@dxos/cli-util';
+import { CommandConfig, Common, FormBuilder, getSpace, printList } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
 import type { Credential } from '@dxos/client/halo';
 import { type Key } from '@dxos/echo';
@@ -41,20 +41,17 @@ export const handler = Effect.fn(function* ({
   delay,
 }: {
   type: Option.Option<string>;
-  spaceId: Option.Option<string>;
+  spaceId: Option.Option<Key.SpaceId>;
   timeout: number;
   delay: number;
 }) {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   let credentials: Credential[];
 
-  const resolvedSpaceId = yield* spaceIdWithDefault(spaceId as Option.Option<Key.SpaceId>);
   if (Option.isSome(spaceId)) {
-    // If space ID was provided, get credentials from that space
-    const space = yield* getSpace(resolvedSpaceId);
+    // If space ID was provided, get credentials from that space.
+    const space = yield* getSpace(spaceId.value);
     credentials = yield* Effect.tryPromise(() => space.internal.getCredentials());
   } else {
     // Get credentials from HALO

package/src/cli/commands/halo/identity/identity.ts

@@ -23,7 +23,6 @@ export const handler = Effect.fn(function* () {
       yield* Console.log('Identity not initialized.');
     }
   } else {
-    yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
     if (json) {
       yield* Console.log(
         JSON.stringify(

package/src/cli/commands/halo/keys/keys.ts

@@ -14,8 +14,6 @@ import { ClientService } from '@dxos/client';
 export const handler = Effect.fn(function* () {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   const identity = client.halo.identity.get();
   const device = client.halo.device;
 

package/src/cli/commands/halo/seed/seed.ts

@@ -12,8 +12,6 @@ import { ClientService } from '@dxos/client';
 export const handler = Effect.fn(function* () {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   const identityService = client.services.services.IdentityService;
   if (!identityService) {
     if (json) {

package/src/cli/commands/halo/update/update.test.ts

@@ -16,7 +16,6 @@ describe('halo update', () => {
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity());
-      yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
       yield* handler({ displayName: 'Updated Name' });
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;

package/src/cli/commands/halo/update/update.ts

@@ -16,8 +16,6 @@ import { printIdentity } from '../util';
 export const handler = Effect.fn(function* ({ displayName }: { displayName: string }) {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
-  yield* Effect.tryPromise(() => client.spaces.waitUntilReady());
-
   const identity = client.halo.identity.get();
   if (!identity) {
     if (json) {

package/src/cli/commands/profile/create.ts

@@ -5,13 +5,14 @@
 import * as Command from '@effect/cli/Command';
 import * as Options from '@effect/cli/Options';
 import * as FileSystem from '@effect/platform/FileSystem';
+import * as Path from '@effect/platform/Path';
 import * as Console from 'effect/Console';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import * as Record from 'effect/Record';
 
 import { CommandConfig, print } from '@dxos/cli-util';
-import { DX_CONFIG, getProfilePath } from '@dxos/client-protocol';
+import { DX_CONFIG, getProfileConfigPath } from '@dxos/client-protocol';
 import { trim } from '@dxos/util';
 
 import { printProfileCreated } from './util';
@@ -71,17 +72,19 @@ export const create = Command.make(
   Effect.fnUntraced(function* ({ template, name }) {
     const { json } = yield* CommandConfig;
     const fs = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
     const profileName = name.pipe(Option.getOrElse(() => template));
-    const profilePath = `${getProfilePath(DX_CONFIG, profileName)}.yml`;
-    if (yield* fs.exists(profilePath)) {
+    const configPath = getProfileConfigPath(DX_CONFIG, profileName);
+    if (yield* fs.exists(configPath)) {
       throw new Error(`Profile ${profileName} already exists`);
     }
 
-    yield* fs.writeFileString(profilePath, TEMPLATES[template]);
+    yield* fs.makeDirectory(path.dirname(configPath), { recursive: true });
+    yield* fs.writeFileString(configPath, TEMPLATES[template]);
     if (json) {
-      yield* Console.log(JSON.stringify({ name: profileName, path: profilePath }, null, 2));
+      yield* Console.log(JSON.stringify({ name: profileName, path: configPath }, null, 2));
     } else {
-      yield* Console.log(print(printProfileCreated(profileName, profilePath)));
+      yield* Console.log(print(printProfileCreated(profileName, configPath)));
     }
   }),
 );

package/src/cli/commands/profile/delete.ts

@@ -10,7 +10,7 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { CommandConfig, print } from '@dxos/cli-util';
-import { DX_CONFIG, getProfilePath } from '@dxos/client-protocol';
+import { DX_CONFIG, getProfileConfigPath } from '@dxos/client-protocol';
 
 import { printProfileDeleted } from './util';
 
@@ -23,7 +23,10 @@ export const del = Command.make(
     const { json } = yield* CommandConfig;
     const fs = yield* FileSystem.FileSystem;
     const profileName = name.pipe(Option.getOrElse(() => 'default'));
-    yield* fs.remove(`${getProfilePath(DX_CONFIG, profileName)}.yml`);
+    const configPath = getProfileConfigPath(DX_CONFIG, profileName);
+    const pluginsPath = `${DX_CONFIG}/plugins/${profileName}.yml`;
+    yield* fs.remove(configPath).pipe(Effect.ignore);
+    yield* fs.remove(pluginsPath).pipe(Effect.ignore);
     if (json) {
       yield* Console.log(JSON.stringify({ name: profileName, deleted: true }, null, 2));
     } else {

package/src/cli/commands/profile/list.ts

@@ -23,21 +23,22 @@ export const list = Command.make(
     const fs = yield* FileSystem.FileSystem;
     const path = yield* Path.Path;
     const profileDir = path.join(DX_CONFIG, 'profile');
-    const files = yield* fs.readDirectory(profileDir);
-    const profiles = yield* Effect.forEach(
-      files,
-      Effect.fnUntraced(function* (filename) {
-        const ext = path.extname(filename);
-        const name = filename.slice(0, -ext.length);
-        const fullPath = path.join(DX_CONFIG, 'profile', filename);
-        const configContent = yield* fs.readFileString(fullPath);
-        const configValues = Yaml.parse(configContent);
+    const entries = yield* fs.readDirectory(profileDir);
+    const profileFiles = entries.filter((entry) => entry.endsWith('.yml'));
+    const profiles = yield* Effect.forEach(profileFiles, (filename) =>
+      Effect.gen(function* () {
+        const name = filename.slice(0, -4);
+        const configPath = path.join(profileDir, filename);
+        const configContent = yield* fs
+          .readFileString(configPath)
+          .pipe(Effect.catchTag('SystemError', () => Effect.succeed('{}')));
+        const configValues = Yaml.parse(configContent) ?? {};
         const config = new Config(configValues);
         return {
           name,
           isCurrent: name === currentProfile,
-          fullPath,
-          storagePath: getProfilePath(configValues?.runtime?.client?.storage.dataRoot ?? DX_DATA, name),
+          fullPath: configPath,
+          storagePath: getProfilePath(configValues?.runtime?.client?.storage?.dataRoot ?? DX_DATA, name),
           edge: config.values.runtime?.services?.edge?.url,
         };
       }),

package/src/cli/plugin.ts

@@ -5,29 +5,26 @@
 import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 
-// NOTE: Must not import from index to avoid pulling in react dependencies.
-import { Client } from '../capabilities/client';
-import { OperationResolver } from '../capabilities/operation-resolver';
-import { SchemaDefs } from '../capabilities/schema-defs';
-import { meta } from '../meta';
-import { ClientEvents } from '../types';
-import { type ClientPluginOptions } from '../types';
+import { Client, OperationHandler, SchemaDefs } from '#capabilities';
+import { meta } from '#meta';
+import { ClientEvents } from '#types';
+import { type ClientPluginOptions } from '#types';
 
 import { config, device, edge, halo, profile } from './commands';
 
 export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
   // TODO(wittjosiah): Could some of these commands make use of operations?
   AppPlugin.addCommandModule({ commands: [config, device, edge, halo, profile] }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   Plugin.addModule((options) => ({
     id: Capability.getModuleTag(Client),
     activatesOn: ActivationEvents.Startup,
-    activatesAfter: [ClientEvents.ClientReady],
+    firesAfterActivation: [ClientEvents.ClientReady],
     activate: () => Client(options),
   })),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [AppActivationEvents.SetupSchema],
+    firesBeforeActivation: [AppActivationEvents.SetupSchema],
     activate: SchemaDefs,
   }),
   Plugin.make,

package/src/cli/testing/test-console.ts

@@ -2,12 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { inspect } from 'node:util';
-
 import * as Console from 'effect/Console';
 import * as Context from 'effect/Context';
 import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
+import { inspect } from 'node:util';
 
 function logToString(...args: any[]): string {
   return args

package/src/constants.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
-export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
-export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
-export const RESET_DIALOG = `${meta.id}/ResetDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const RECOVERY_CODE_DIALOG = `${meta.id}.RecoveryCodeDialog`;
+export const RESET_DIALOG = `${meta.id}.ResetDialog`;

package/src/containers/DevicesContainer/DevicesContainer.stories.tsx

@@ -10,9 +10,10 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
 
-import { ClientPlugin } from '../../ClientPlugin';
-import { translations } from '../../translations';
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
 
+import { ClientPlugin } from '../../ClientPlugin';
 import { DevicesContainer } from './DevicesContainer';
 
 const meta = {
@@ -26,7 +27,7 @@ const meta = {
         ClientPlugin({
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
         OperationPlugin(),

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -13,19 +13,19 @@ import { type CancellableInvitationObservable, Invitation, InvitationEncoder } f
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { meta } from '../../meta';
-import { ClientOperation } from '../../types';
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
@@ -38,61 +38,61 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),
     [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
-      <Settings.Root>
+      <Settings.Viewport>
         <Settings.Section
-          title={t('devices verbose label', { ns: meta.id })}
-          description={t('devices description', { ns: meta.id })}
+          title={t('devices-verbose.label', { ns: meta.id })}
+          description={t('devices.description', { ns: meta.id })}
         >
-          <Settings.Frame>
-            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Panel>
+            <div role='group' className='min-w-0'>
+              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.id })}</h3>
               <List>
                 {devices.map((device: Device) => (
                   <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
                 ))}
               </List>
-            </Settings.FrameItem>
+            </div>
             {createInvitationUrl && (
-              <Settings.FrameItem title='Add device'>
+              <div role='group' className='min-w-0'>
+                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </Settings.FrameItem>
+              </div>
             )}
-          </Settings.Frame>
+          </Settings.Panel>
         </Settings.Section>
         <Settings.Section
-          title={t('danger zone title', { ns: meta.id })}
-          description={t('danger zone description', { ns: meta.id })}
+          title={t('danger-zone.title', { ns: meta.id })}
+          description={t('danger-zone.description', { ns: meta.id })}
         >
-          <Settings.Group>
-            <Settings.Item title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
-              <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
-                {t('reset device label')}
-              </Button>
-            </Settings.Item>
-            <Settings.Item
-              title={t('recover identity label')}
-              description={t('recover identity description', { ns: meta.id })}
-            >
-              <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
-                {t('recover identity label')}
-              </Button>
-            </Settings.Item>
-            <Settings.Item
-              title={t('join new identity label')}
-              description={t('join new identity description', { ns: meta.id })}
-            >
-              <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
-                {t('join new identity label')}
-              </Button>
-            </Settings.Item>
-          </Settings.Group>
+          <Settings.Item title={t('reset-device.label')} description={t('reset-device.description', { ns: meta.id })}>
+            <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+              {t('reset-device.label')}
+            </Button>
+          </Settings.Item>
+          <Settings.Item
+            title={t('recover-identity.label')}
+            description={t('recover-identity.description', { ns: meta.id })}
+          >
+            <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+              {t('recover-identity.label')}
+            </Button>
+          </Settings.Item>
+          <Settings.Item
+            title={t('join-new-identity.label')}
+            description={t('join-new-identity.description', { ns: meta.id })}
+          >
+            <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
+              {t('join-new-identity.label')}
+            </Button>
+          </Settings.Item>
         </Settings.Section>
-      </Settings.Root>
+      </Settings.Viewport>
     </Clipboard.Provider>
   );
 };
@@ -176,12 +176,13 @@ const InvitationSection = ({
         : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
           ? 'auth-code'
           : 'qr-code';
+
   return activeView === 'init' ? (
     <>
-      <p className='text-description mb-2'>{t('add device description')}</p>
+      <p className='text-description mb-2'>{t('add-device.description')}</p>
       <IconButton
         icon='ph--plus--regular'
-        label={t('create device invitation label')}
+        label={t('create-device-invitation.label')}
         disabled={state >= 0}
         classNames='w-full'
         data-testid='devicesContainer.createInvitation'
@@ -214,7 +215,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
+      <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content]'>
         <div className='flex justify-center py-4'>
           <div role='none' className='w-full md:max-w-80 aspect-square relative text-description'>
@@ -234,7 +235,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
           </div>
         </div>
         <span id={qrLabel} className='sr-only'>
-          {t('qr label')}
+          {t('qr.label')}
         </span>
       </div>
       {/* TODO(burdon): Factor out button bar */}
@@ -242,7 +243,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
         <div className='flex gap-2'>
           <Clipboard.Button value={url ?? 'never'} />
           <Button variant='ghost' onClick={onCancel}>
-            {t('cancel label')}
+            {t('cancel.label')}
           </Button>
         </div>
       </div>
@@ -256,12 +257,12 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
 
   return (
     <>
-      <p className='text-description'>{t('auth other device emoji message')}</p>
+      <p className='text-description'>{t('auth-other-device-emoji.message')}</p>
       {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}
-      <p className='text-description'>{t('auth code message')}</p>
+      <p className='text-description'>{t('auth-code.message')}</p>
       <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />
       <Button variant='ghost' onClick={onCancel}>
-        {t('cancel label')}
+        {t('cancel.label')}
       </Button>
     </>
   );

package/src/containers/DevicesContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { DevicesContainer } from './DevicesContainer';
-
-export default DevicesContainer;
+export { DevicesContainer as default } from './DevicesContainer';

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Dialog } from '@dxos/react-ui';
+
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { JoinDialog } from './JoinDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <JoinDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-client/containers/JoinDialog',
+  component: JoinDialog,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof JoinDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};