@dxos/plugin-client 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -9,7 +9,7 @@ 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 { AppSpace } from '@dxos/app-toolkit';
 import { CommandConfig, flushAndSync, spaceLayer } from '@dxos/cli-util';
 import { print } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
@@ -45,7 +45,7 @@ export const handler = Effect.fn(function* ({
 
   // Create personal space for the CLI identity.
   const space = yield* Effect.promise(() =>
-    client.spaces.create({}, { tags: [PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
+    client.spaces.create({}, { tags: [AppSpace.PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
   );
   yield* Effect.promise(() => space.waitUntilReady());
   yield* Effect.promise(() => space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED));

package/src/commands/halo/index.ts

@@ -4,18 +4,18 @@
 
 import * as Command from '@effect/cli/Command';
 
-import { create } from './create';
 import { credential } from './credential';
 import { identity } from './identity';
-// TODO(wittjosiah): Omitted currently due to p2p networking not working in bun.
-// import { join } from './join';
 import { keys } from './keys';
-import { recover } from './recover';
 import { seed } from './seed';
-// import { share } from './share';
 import { update } from './update';
 
+// `create`, `join`, and `recover` are superseded by `dx account login`, which logs in to an
+// existing identity via the same methods as Composer (email / atproto / device-invitation /
+// recovery-code). Note: `join` was omitted and the `device-invitation` login method may hang —
+// both rely on p2p networking which does not work in bun.
+
 export const halo: Command.Command<any, any, any, any> = Command.make('halo').pipe(
   Command.withDescription('Manage HALO identity.'),
-  Command.withSubcommands([create, credential, identity, keys, recover, seed, update]),
+  Command.withSubcommands([credential, identity, keys, seed, update]),
 );

package/src/commands/halo/join/join.ts

@@ -7,14 +7,13 @@ import * as Command from '@effect/cli/Command';
 import * as Prompt from '@effect/cli/Prompt';
 import * as Console from 'effect/Console';
 import * as Effect from 'effect/Effect';
-import * as Match from 'effect/Match';
 
 import { CommandConfig, print } from '@dxos/cli-util';
 import { type Client, ClientService } from '@dxos/client';
-import { type AuthenticatingInvitationObservable, Invitation, InvitationEncoder } from '@dxos/client/invitations';
+import { Invitation, InvitationEncoder } from '@dxos/client/invitations';
 import { invariant } from '@dxos/invariant';
 
-import { printIdentity } from '../util';
+import { printIdentity, waitForState } from '../util';
 
 export const join = Command.make(
   'join',
@@ -75,13 +74,3 @@ const sendInvitation = Effect.fn(function* ({
   yield* waitForState(invitation, Invitation.State.SUCCESS);
   return client.halo.identity.get();
 });
-
-const waitForState = (invitation: AuthenticatingInvitationObservable, state: Invitation.State) =>
-  Effect.gen(function* () {
-    const latch = yield* Effect.makeLatch();
-    const subscription = invitation.subscribe((invitation) => {
-      Match.value(invitation.state).pipe(Match.when(state, () => Effect.runSync(latch.open)));
-    });
-    yield* latch.await;
-    subscription.unsubscribe();
-  });

package/src/commands/halo/util.ts

@@ -2,7 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Duration from 'effect/Duration';
+import * as Effect from 'effect/Effect';
+
 import { FormBuilder } from '@dxos/cli-util';
+import { type AuthenticatingInvitationObservable, Invitation } from '@dxos/client/invitations';
 
 /**
  * Pretty prints an identity with ANSI colors.
@@ -13,3 +17,23 @@ export const printIdentity = (identity: { identityDid: string; profile?: { displ
     FormBuilder.set('displayName', identity.profile?.displayName ?? '<none>'),
     FormBuilder.build,
   );
+
+const TERMINAL_FAILURE_STATES = new Set([
+  Invitation.State.CANCELLED,
+  Invitation.State.TIMEOUT,
+  Invitation.State.ERROR,
+  Invitation.State.EXPIRED,
+]);
+
+/** Await an authenticating invitation reaching the given state. */
+export const waitForState = (invitation: AuthenticatingInvitationObservable, state: Invitation.State) =>
+  Effect.async<void, Error>((resume) => {
+    const subscription = invitation.subscribe((inv) => {
+      if (inv.state === state) {
+        resume(Effect.void);
+      } else if (TERMINAL_FAILURE_STATES.has(inv.state!)) {
+        resume(Effect.fail(new Error(`Invitation failed with state: ${Invitation.State[inv.state!]}`)));
+      }
+    });
+    return Effect.sync(() => subscription.unsubscribe());
+  }).pipe(Effect.timeout(Duration.minutes(3)));

package/src/commands/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './account';
 export * from './config';
 export * from './device';
 export * from './edge';

package/src/constants.ts

@@ -6,6 +6,6 @@ import { DXN } from '@dxos/keys';
 
 import { meta } from '#meta';
 
-export const JOIN_DIALOG = DXN.make(`${meta.id}.joinDialog`);
-export const RECOVERY_CODE_DIALOG = DXN.make(`${meta.id}.recoveryCodeDialog`);
-export const RESET_DIALOG = DXN.make(`${meta.id}.resetDialog`);
+export const JOIN_DIALOG = DXN.make(`${meta.profile.key}.joinDialog`);
+export const RECOVERY_CODE_DIALOG = DXN.make(`${meta.profile.key}.recoveryCodeDialog`);
+export const RESET_DIALOG = DXN.make(`${meta.profile.key}.resetDialog`);

package/src/containers/AccountContainer/AccountContainer.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { AccountContainer } from './AccountContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/AccountContainer',
+  component: AccountContainer,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
+        }),
+        ProcessManagerPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof AccountContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/AccountContainer/AccountContainer.tsx

@@ -11,18 +11,18 @@ import { Context } from '@dxos/context';
 import { createDidFromIdentityKey } from '@dxos/credentials';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Button, Icon, IconButton, Input, Message, useAsyncEffect, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
 import { ClientCapabilities } from '#types';
 
 import { RESET_DIALOG } from '../../constants';
-import { useHubHttpClient } from '../../state/use-hub-http';
+import { useHubHttpClient } from '../../hooks';
 
 type AccountState = 'loading' | 'present' | 'missing' | 'error';
 
 export const AccountContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const identity = useIdentity();
   const { invokePromise } = useOperationInvoker();
   const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
@@ -114,66 +114,70 @@ export const AccountContainer = () => {
   const account = cache.account;
 
   return (
-    <Settings.Viewport>
-      <Settings.Section title={t('account-section.title')} description={t('account-section.description')}>
-        {accountState === 'loading' ? null : accountState === 'missing' ? (
-          <>
-            <Message.Root valence='warning'>
-              <Message.Title icon='ph--warning--duotone'>{t('no-edge-access.title')}</Message.Title>
-              <Message.Content>{t('no-edge-access.description')}</Message.Content>
-            </Message.Root>
-            <Settings.Item title={t('request-access.label')} description={t('request-access.description')}>
-              {requestSubmitted ? (
-                <span className='text-sm text-description'>{t('access-request-submitted.message')}</span>
-              ) : (
-                <form onSubmit={handleRequestAccess} className='flex gap-2 items-center justify-end'>
-                  <Input.Root>
-                    <Input.TextInput
-                      type='email'
-                      required
-                      placeholder={t('access-request-email.placeholder')}
-                      value={requestEmail}
-                      onChange={(event) => setRequestEmail(event.target.value)}
-                      classNames='min-w-64'
-                    />
-                  </Input.Root>
-                  <Button type='submit' density='sm'>
-                    {t('request-access.label')}
+    <Form.Root variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('account-section.title')} description={t('account-section.description')}>
+            {accountState === 'loading' ? null : accountState === 'missing' ? (
+              <>
+                <Message.Root valence='warning'>
+                  <Message.Title icon='ph--warning--duotone'>{t('no-edge-access.title')}</Message.Title>
+                  <Message.Content>{t('no-edge-access.description')}</Message.Content>
+                </Message.Root>
+                <Form.Row label={t('request-access.label')} description={t('request-access.description')}>
+                  {requestSubmitted ? (
+                    <span className='text-sm text-description'>{t('access-request-submitted.message')}</span>
+                  ) : (
+                    <form onSubmit={handleRequestAccess} className='flex gap-2 items-center justify-end'>
+                      <Input.Root>
+                        <Input.TextInput
+                          type='email'
+                          required
+                          placeholder={t('access-request-email.placeholder')}
+                          value={requestEmail}
+                          onChange={(event) => setRequestEmail(event.target.value)}
+                          classNames='min-w-64'
+                        />
+                      </Input.Root>
+                      <Button type='submit' density='sm'>
+                        {t('request-access.label')}
+                      </Button>
+                    </form>
+                  )}
+                </Form.Row>
+              </>
+            ) : accountState === 'error' && !account ? (
+              <Message.Root valence='error'>
+                <Message.Title icon='ph--cloud-x--duotone'>{t('account-offline.title')}</Message.Title>
+                <Message.Content>{t('account-offline.description')}</Message.Content>
+              </Message.Root>
+            ) : account ? (
+              <>
+                <Form.Row label={t('email.label')} description={account.email}>
+                  {account.emailVerified ? (
+                    <Icon icon='ph--check-circle--duotone' size={5} classNames='text-success-text justify-self-end' />
+                  ) : (
+                    <div className='flex flex-col gap-1 items-end'>
+                      <IconButton
+                        icon='ph--paper-plane-tilt--regular'
+                        label={t('resend-verification.label')}
+                        onClick={handleResend}
+                        density='sm'
+                      />
+                      {resendStatus ? <span className='text-xs text-description'>{resendStatus}</span> : null}
+                    </div>
+                  )}
+                </Form.Row>
+                <Form.Row label={t('delete-account.label')} description={t('delete-account.description')}>
+                  <Button variant='destructive' density='sm' onClick={handleDeleteAccount}>
+                    {t('delete-account.label')}
                   </Button>
-                </form>
-              )}
-            </Settings.Item>
-          </>
-        ) : accountState === 'error' && !account ? (
-          <Message.Root valence='error'>
-            <Message.Title icon='ph--cloud-x--duotone'>{t('account-offline.title')}</Message.Title>
-            <Message.Content>{t('account-offline.description')}</Message.Content>
-          </Message.Root>
-        ) : account ? (
-          <>
-            <Settings.Item title={t('email.label')} description={account.email}>
-              {account.emailVerified ? (
-                <Icon icon='ph--check-circle--duotone' size={5} classNames='text-success-text justify-self-end' />
-              ) : (
-                <div className='flex flex-col gap-1 items-end'>
-                  <IconButton
-                    icon='ph--paper-plane-tilt--regular'
-                    label={t('resend-verification.label')}
-                    onClick={handleResend}
-                    density='sm'
-                  />
-                  {resendStatus ? <span className='text-xs text-description'>{resendStatus}</span> : null}
-                </div>
-              )}
-            </Settings.Item>
-            <Settings.Item title={t('delete-account.label')} description={t('delete-account.description')}>
-              <Button variant='destructive' density='sm' onClick={handleDeleteAccount}>
-                {t('delete-account.label')}
-              </Button>
-            </Settings.Item>
-          </>
-        ) : null}
-      </Settings.Section>
-    </Settings.Viewport>
+                </Form.Row>
+              </>
+            ) : null}
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -11,8 +11,9 @@ import { useClient, useMulticastObservable } from '@dxos/react-client';
 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, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Button, Clipboard, Icon, IconButton, useId, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Listbox } from '@dxos/react-ui-list';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
@@ -25,7 +26,7 @@ export type DevicesContainerProps = {
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
@@ -44,55 +45,72 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <Settings.Viewport>
-        <Settings.Section
-          title={t('devices-verbose.label', { ns: meta.id })}
-          description={t('devices.description', { 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>
-            </div>
-            {createInvitationUrl && (
-              <div role='group' className='min-w-0'>
-                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
-                <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </div>
-            )}
-          </Settings.Panel>
-        </Settings.Section>
-        <Settings.Section
-          title={t('danger-zone.title', { ns: meta.id })}
-          description={t('danger-zone.description', { ns: meta.id })}
-        >
-          <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.Viewport>
+      <Form.Root variant='settings'>
+        <Form.Viewport scroll>
+          <Form.Content>
+            <Form.Section
+              title={t('devices-verbose.label', { ns: meta.profile.key })}
+              description={t('devices.description', { ns: meta.profile.key })}
+            >
+              <Form.Group>
+                <div role='group' className='min-w-0'>
+                  <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.profile.key })}</h3>
+                  <Listbox.Root>
+                    <Listbox.Content aria-label={t('devices.label', { ns: meta.profile.key })}>
+                      {devices.map((device: Device) => (
+                        <DeviceListItem
+                          key={device.deviceKey.toHex()}
+                          device={device}
+                          connectionState={connectionState}
+                        />
+                      ))}
+                    </Listbox.Content>
+                  </Listbox.Root>
+                </div>
+                {createInvitationUrl && (
+                  <div role='group' className='min-w-0'>
+                    <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
+                    <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+                  </div>
+                )}
+              </Form.Group>
+            </Form.Section>
+            <Form.Section
+              title={t('danger-zone.title', { ns: meta.profile.key })}
+              description={t('danger-zone.description', { ns: meta.profile.key })}
+            >
+              <Form.Row
+                label={t('reset-device.label')}
+                description={t('reset-device.description', { ns: meta.profile.key })}
+              >
+                <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+                  {t('reset-device.label')}
+                </Button>
+              </Form.Row>
+              <Form.Row
+                label={t('recover-identity.label')}
+                description={t('recover-identity.description', { ns: meta.profile.key })}
+              >
+                <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+                  {t('recover-identity.label')}
+                </Button>
+              </Form.Row>
+              <Form.Row
+                label={t('join-new-identity.label')}
+                description={t('join-new-identity.description', { ns: meta.profile.key })}
+              >
+                <Button
+                  variant='destructive'
+                  onClick={handleJoinNewIdentity}
+                  data-testid='devicesContainer.joinExisting'
+                >
+                  {t('join-new-identity.label')}
+                </Button>
+              </Form.Row>
+            </Form.Section>
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Clipboard.Provider>
   );
 };
@@ -167,7 +185,7 @@ const InvitationSection = ({
   onInvitationDone = () => {},
   onInvitationCreate = () => {},
 }: InvitationComponentProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const activeView =
     state < 0
       ? 'init'
@@ -215,7 +233,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.profile.key })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content]'>
         <div className='flex justify-center py-4'>
           <div className='w-full md:max-w-80 aspect-square relative text-description'>

package/src/containers/InvitationsContainer/InvitationsContainer.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { InvitationsContainer } from './InvitationsContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/InvitationsContainer',
+  component: InvitationsContainer,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
+        }),
+        ProcessManagerPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof InvitationsContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};