@dxos/plugin-client 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

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

@@ -0,0 +1,48 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { FormBuilder } from '@dxos/cli-util';
+
+export type ProfileInfo = {
+  name: string;
+  isCurrent: boolean;
+  fullPath: string;
+  storagePath: string;
+  edge?: string;
+};
+
+/**
+ * Pretty prints profile creation result with ANSI colors.
+ */
+export const printProfileCreated = (name: string, path: string) =>
+  FormBuilder.make({ title: 'Profile created' }).pipe(
+    FormBuilder.set('name', name),
+    FormBuilder.set('path', path),
+    FormBuilder.build,
+  );
+
+/**
+ * Pretty prints profile deletion result with ANSI colors.
+ */
+export const printProfileDeleted = (name: string) =>
+  FormBuilder.make({ title: 'Profile deleted' }).pipe(FormBuilder.set('name', name), FormBuilder.build);
+
+/**
+ * Pretty prints profile reset result with ANSI colors.
+ */
+export const printProfileReset = (profile: string) =>
+  FormBuilder.make({ title: 'Profile reset' }).pipe(FormBuilder.set('profile', profile), FormBuilder.build);
+
+/**
+ * Pretty prints a profile with ANSI colors.
+ */
+export const printProfile = (profile: ProfileInfo) => {
+  const title = profile.isCurrent ? `${profile.name} (current)` : profile.name;
+  return FormBuilder.make({ title }).pipe(
+    FormBuilder.set('fullPath', profile.fullPath),
+    FormBuilder.set('storagePath', profile.storagePath),
+    FormBuilder.set('edge', profile.edge ?? '<none>'),
+    FormBuilder.build,
+  );
+};

package/src/cli/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './plugin';

package/src/cli/plugin.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { OperationHandler } from '../capabilities/operation-handler';
+import { SchemaDefs } from '../capabilities/schema-defs';
+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.addOperationHandlerModule({ activate: OperationHandler }),
+  Plugin.addModule((options) => ({
+    id: Capability.getModuleTag(Client),
+    activatesOn: ActivationEvents.Startup,
+    activatesAfter: [ClientEvents.ClientReady],
+    activate: () => Client(options),
+  })),
+  Plugin.addModule({
+    activatesOn: ClientEvents.ClientReady,
+    activatesBefore: [AppActivationEvents.SetupSchema],
+    activate: SchemaDefs,
+  }),
+  Plugin.make,
+);

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

@@ -0,0 +1,88 @@
+//
+// 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';
+
+function logToString(...args: any[]): string {
+  return args
+    .map((arg) => {
+      if (typeof arg === 'string') {
+        return arg;
+      }
+
+      return inspect(arg, { colors: false, depth: null });
+    })
+    .join(' ');
+}
+
+class TestConsoleService {
+  private _logs: Array<{ level: string; args: unknown; message: string }> = [];
+
+  readonly console: Console.Console;
+
+  constructor(console: Console.Console) {
+    const pusher =
+      (level: string) =>
+      (...args: readonly any[]) => {
+        this._logs.push({ level, args, message: logToString(...args) });
+      };
+
+    this.console = {
+      ...console,
+      log: (...args: readonly any[]) => Effect.sync(() => pusher('log')(...args)),
+    };
+  }
+
+  get logs() {
+    return [...this._logs];
+  }
+
+  clear() {
+    this._logs.length = 0;
+  }
+}
+
+// TODO(burdon): We could have a single namespace "Testing" with all test utilities.
+export namespace TestConsole {
+  export class TestConsole extends Context.Tag('TestConsole')<TestConsole, TestConsoleService>() {}
+
+  /**
+   * Extract JSON string from log arguments.
+   * Handles both array and string argument formats.
+   */
+  export const extractJsonString = (log: { args: unknown }): string => {
+    if (Array.isArray(log.args) && log.args.length > 0) {
+      return String(log.args[0]);
+    }
+    return log.args as string;
+  };
+
+  /**
+   * Parse JSON from log arguments.
+   * Handles both array and string argument formats.
+   */
+  export const parseJson = <T = unknown>(log: { args: unknown }): T => {
+    const jsonString = extractJsonString(log);
+    return JSON.parse(jsonString) as T;
+  };
+
+  const testConsole = Layer.effect(
+    TestConsole,
+    Effect.gen(function* () {
+      return new TestConsoleService(yield* Effect.console);
+    }),
+  );
+
+  const setConsole = Effect.gen(function* () {
+    const { console } = yield* TestConsole;
+    return Console.setConsole(console);
+  }).pipe(Layer.unwrapEffect);
+
+  export const layer = Layer.provideMerge(setConsole, testConsole);
+}

package/src/components/index.ts

@@ -1,10 +1,3 @@
 //
 // Copyright 2024 DXOS.org
 //
-
-export * from './DevicesContainer';
-export * from './JoinDialog';
-export * from './ProfileContainer';
-export * from './RecoveryCodeDialog';
-export * from './RecoveryCredentialsContainer';
-export * from './ResetDialog';

package/src/constants.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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`;

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

@@ -3,30 +3,35 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { IntentPlugin } 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 { translations as shellTranslations } from '@dxos/shell/react';
 
-import { ClientPlugin } from '../ClientPlugin';
-import { translations } from '../translations';
+import { ClientPlugin } from '../../ClientPlugin';
+import { initializeIdentity } from '../../testing';
+import { translations } from '../../translations';
 
 import { DevicesContainer } from './DevicesContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/DevicesContainer',
+  title: 'plugins/plugin-client/containers/DevicesContainer',
   component: DevicesContainer,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
         }),
-        IntentPlugin(),
+        OperationPlugin(),
+        RuntimePlugin(),
       ],
     }),
   ],

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

@@ -5,103 +5,94 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { log } from '@dxos/log';
 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 {
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlItem,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { Settings } from '@dxos/react-ui-form';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { meta } from '../meta';
-import { ClientAction } 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('os');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
 
-  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);
 
   const handleRecover = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),
+    [invokePromise],
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
-      <ControlPage>
-        <ControlSection
+      <Settings.Root>
+        <Settings.Section
           title={t('devices verbose label', { ns: meta.id })}
           description={t('devices description', { ns: meta.id })}
         >
-          <ControlFrame>
-            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Frame>
+            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
               <List>
-                {devices.map((device: Device) => {
-                  return (
-                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
-                  );
-                })}
+                {devices.map((device: Device) => (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                ))}
               </List>
-            </ControlFrameItem>
+            </Settings.FrameItem>
             {createInvitationUrl && (
-              <ControlFrameItem title='Add device'>
+              <Settings.FrameItem title='Add device'>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </ControlFrameItem>
+              </Settings.FrameItem>
             )}
-          </ControlFrame>
-        </ControlSection>
-        <ControlSection
+          </Settings.Frame>
+        </Settings.Section>
+        <Settings.Section
           title={t('danger zone title', { ns: meta.id })}
           description={t('danger zone description', { ns: meta.id })}
         >
-          <ControlGroup>
-            <ControlItem title={t('reset device label')} description={t('reset device 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>
-            </ControlItem>
-            <ControlItem
+            </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>
-            </ControlItem>
-            <ControlItem
+            </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>
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-      </ControlPage>
+            </Settings.Item>
+          </Settings.Group>
+        </Settings.Section>
+      </Settings.Root>
     </Clipboard.Provider>
   );
 };
@@ -185,14 +176,15 @@ const InvitationSection = ({
         : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
           ? 'auth-code'
           : 'qr-code';
+
   return activeView === 'init' ? (
     <>
-      <p className='text-description mbe-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')}
         disabled={state >= 0}
-        classNames='is-full'
+        classNames='w-full'
         data-testid='devicesContainer.createInvitation'
         onClick={onInvitationCreate}
       />
@@ -218,27 +210,29 @@ const InvitationSection = ({
 };
 
 const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const qrLabel = useId('devices-container__qr-code');
   const emoji = hexToEmoji(id);
   return (
     <>
       <p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
-      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
-        <div role='none' className='is-full aspect-square relative text-description'>
-          <QR
-            rounding={100}
-            backgroundColor='transparent'
-            color='currentColor'
-            aria-labelledby={qrLabel}
-            errorCorrectionLevel='Q'
-            cutout={true}
-          >
-            {url ?? 'never'}
-          </QR>
-          <Centered>
-            <Emoji text={emoji} />
-          </Centered>
+      <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'>
+            <QR
+              rounding={100}
+              backgroundColor='transparent'
+              color='currentColor'
+              aria-labelledby={qrLabel}
+              errorCorrectionLevel='Q'
+              cutout={true}
+            >
+              {url ?? 'never'}
+            </QR>
+            <Centered>
+              <Emoji text={emoji} />
+            </Centered>
+          </div>
         </div>
         <span id={qrLabel} className='sr-only'>
           {t('qr label')}
@@ -258,15 +252,15 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
 };
 
 const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const emoji = hexToEmoji(id);
 
   return (
     <>
       <p className='text-description'>{t('auth other device emoji message')}</p>
-      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}
       <p className='text-description'>{t('auth code message')}</p>
-      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />
       <Button variant='ghost' onClick={onCancel}>
         {t('cancel label')}
       </Button>

package/src/containers/DevicesContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { DevicesContainer } from './DevicesContainer';
+
+export default 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 { Dialog } from '@dxos/react-ui';
+import { corePlugins } from '@dxos/plugin-testing';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { translations } from '../../translations';
+
+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 = {};

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { type InvitationResult } from '@dxos/react-client/invitations';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { ClientOperation } from '../../operations';
+
+export const JoinDialog = (props: JoinPanelProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const { t } = useTranslation(meta.id);
+
+  const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);
+
+  const handleDone = useCallback(
+    async (result: InvitationResult | null) => {
+      if (result?.identityKey) {
+        await Promise.all([
+          invokePromise(LayoutOperation.UpdateDialog, { state: false }),
+          invokePromise(ObservabilityOperation.SendEvent, {
+            name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
+          }),
+        ]);
+      }
+    },
+    [invokePromise],
+  );
+
+  // TODO(burdon): Move JoinHeading into Dialog.Heading.
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Body>
+        <JoinPanel
+          {...props}
+          mode='halo-only'
+          exitActionParent={<Dialog.Close asChild />}
+          doneActionParent={<Dialog.Close asChild />}
+          onCancelResetStorage={handleCancelResetStorage}
+          onDone={handleDone}
+        />
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/JoinDialog/index.ts

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

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

@@ -5,16 +5,16 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { ProfileContainer } from './ProfileContainer';
 
 const meta = {
-  title: 'plugins/plugin-client/ProfileContainer',
+  title: 'plugins/plugin-client/containers/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,