@dxos/plugin-client 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/commands/profile/inspect.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+
+import { CommandConfig, FormBuilder, print } from '@dxos/cli-util';
+import { ProfileArchiveEntryType } from '@dxos/protocols';
+import { arrayToBuffer } from '@dxos/util';
+
+export const handler = Effect.fn(function* ({ file, storage }: { file: string; storage: boolean }) {
+  const { json } = yield* CommandConfig;
+  const fs = yield* FileSystem.FileSystem;
+
+  const { decodeProfileArchive } = yield* Effect.promise(() => import('@dxos/client-services'));
+
+  const data = yield* fs.readFile(file);
+
+  const archive = decodeProfileArchive(data);
+
+  if (json) {
+    yield* Console.log(
+      JSON.stringify(
+        {
+          meta: archive.meta,
+          ...(storage ? { storage: archive.storage } : {}),
+        },
+        null,
+        2,
+      ),
+    );
+  } else {
+    const builder = FormBuilder.make({ title: 'Profile Archive' }).pipe(
+      FormBuilder.when(
+        archive.meta,
+        FormBuilder.each(Object.entries(archive.meta ?? {}), ([key, value]) => FormBuilder.set(key, String(value))),
+      ),
+      FormBuilder.build,
+    );
+    yield* Console.log(print(builder));
+
+    if (storage) {
+      yield* Console.log('\nStorage entries:\n');
+      for (const entry of archive.storage) {
+        const key =
+          typeof entry.key === 'string' ? entry.key : JSON.stringify(arrayToBuffer(entry.key).toString()).slice(1, -1);
+        yield* Console.log(`  ${ProfileArchiveEntryType[entry.type]} ${key}`);
+      }
+    }
+  }
+});
+
+export const inspect = Command.make(
+  'inspect',
+  {
+    file: Options.text('file').pipe(Options.withDescription('Archive filename.'), Options.withAlias('f')),
+    storage: Options.boolean('storage', { ifPresent: true }).pipe(Options.withDescription('List storage entries.')),
+  },
+  handler,
+).pipe(Command.withDescription('Inspect profile archive.'));

package/src/commands/profile/list.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+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 Yaml from 'yaml';
+
+import { CommandConfig, printList } from '@dxos/cli-util';
+import { Config } from '@dxos/client';
+import { DX_CONFIG, DX_DATA, getProfilePath } from '@dxos/client-protocol';
+
+import { printProfile } from './util';
+
+export const list = Command.make(
+  'list',
+  {},
+  Effect.fnUntraced(function* () {
+    const { profile: currentProfile } = yield* CommandConfig;
+    const fs = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
+    const profileDir = path.join(DX_CONFIG, 'profile');
+    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: configPath,
+          storagePath: getProfilePath(configValues?.runtime?.client?.storage?.dataRoot ?? DX_DATA, name),
+          edge: config.values.runtime?.services?.edge?.url,
+        };
+      }),
+    );
+
+    const { json } = yield* CommandConfig;
+    if (json) {
+      yield* Console.log(JSON.stringify(profiles, null, 2));
+    } else {
+      const formatted = profiles.map(printProfile);
+      yield* Console.log(printList(formatted));
+    }
+  }),
+);

package/src/commands/profile/reset.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as Prompt from '@effect/cli/Prompt';
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+
+import { CommandConfig, print } from '@dxos/cli-util';
+import { DX_DATA, getProfilePath } from '@dxos/client-protocol';
+import { ConfigService } from '@dxos/config';
+
+import { printProfileReset } from './util';
+
+export const reset = Command.make(
+  'reset',
+  {
+    force: Options.boolean('force', { ifPresent: true }).pipe(Options.withDescription('Skip confirmation prompt')),
+  },
+  Effect.fnUntraced(function* ({ force }) {
+    const fs = yield* FileSystem.FileSystem;
+    const config = yield* ConfigService;
+    const { json, profile } = yield* CommandConfig;
+    const path = config.values.runtime?.client?.storage?.dataRoot ?? getProfilePath(DX_DATA, profile);
+    if (!force) {
+      const confirmed = yield* Prompt.confirm({
+        message: `Are you sure you want to reset the profile (${profile})?`,
+        initial: false,
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    yield* fs.remove(path, { recursive: true });
+    if (json) {
+      yield* Console.log(JSON.stringify({ profile, reset: true }, null, 2));
+    } else {
+      yield* Console.log(print(printProfileReset(profile)));
+    }
+  }),
+);

package/src/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/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,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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`);

package/src/containers/AccountContainer/AccountContainer.tsx

@@ -0,0 +1,179 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtom, useAtomSet } from '@effect-atom/atom-react';
+import React, { type FormEvent, useCallback, useState } from 'react';
+
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+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 { meta } from '#meta';
+import { ClientCapabilities } from '#types';
+
+import { RESET_DIALOG } from '../../constants';
+import { useHubHttpClient } from '../../state/use-hub-http';
+
+type AccountState = 'loading' | 'present' | 'missing' | 'error';
+
+export const AccountContainer = () => {
+  const { t } = useTranslation(meta.id);
+  const identity = useIdentity();
+  const { invokePromise } = useOperationInvoker();
+  const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
+  const [cache] = useAtom(accountCacheAtom);
+  const setCache = useAtomSet(accountCacheAtom);
+  const [resendStatus, setResendStatus] = useState<string | null>(null);
+  const [accountState, setAccountState] = useState<AccountState>(cache.account ? 'present' : 'loading');
+  const [requestEmail, setRequestEmail] = useState('');
+  const [requestSubmitted, setRequestSubmitted] = useState(false);
+
+  // Single shared instance keeps the VP-auth handshake (request → 401 → signed
+  // retry) at one round-trip per session instead of one per panel.
+  const hubHttp = useHubHttpClient();
+
+  useAsyncEffect(async () => {
+    if (!hubHttp) {
+      return;
+    }
+    try {
+      const account = await hubHttp.getAccount(new Context());
+      setCache((prev) => ({ ...prev, account, fetchedAt: Date.now() }));
+      setAccountState('present');
+    } catch (err: any) {
+      if (err?.data?.type === 'no_account') {
+        setCache((prev) => ({ ...prev, account: undefined, fetchedAt: Date.now() }));
+        setAccountState('missing');
+      } else {
+        setAccountState((prev) => (prev === 'present' ? 'present' : 'error'));
+      }
+    }
+  }, [hubHttp, setCache]);
+
+  const handleResend = useCallback(async () => {
+    if (!hubHttp) {
+      return;
+    }
+    try {
+      const result = await hubHttp.resendVerificationEmail(new Context());
+      if (result.sent) {
+        setResendStatus(t('verification-sent.message'));
+      } else if (result.cooldownSecondsRemaining) {
+        setResendStatus(t('verification-cooldown.message', { seconds: result.cooldownSecondsRemaining }));
+      } else {
+        setResendStatus(t('verification-failed.message'));
+      }
+    } catch {
+      setResendStatus(t('verification-failed.message'));
+    }
+  }, [hubHttp, t]);
+
+  const handleRequestAccess = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      const email = requestEmail.trim();
+      if (!email || !hubHttp) {
+        return;
+      }
+      try {
+        const identityDid = identity ? await createDidFromIdentityKey(identity.identityKey) : undefined;
+        await hubHttp.requestAccess(new Context(), { email, identityDid });
+      } catch {
+        // Surface a generic confirmation; failure details would leak signal.
+      }
+      setRequestSubmitted(true);
+    },
+    [hubHttp, identity, requestEmail],
+  );
+
+  // Opens the standard reset confirmation dialog. The `onBeforeReset` hook
+  // deletes the hub account first; if that fails the reset is aborted so the
+  // local identity is not wiped while the server record remains.
+  const handleDeleteAccount = useCallback(() => {
+    if (!hubHttp) {
+      return;
+    }
+    void invokePromise(LayoutOperation.UpdateDialog, {
+      subject: RESET_DIALOG,
+      blockAlign: 'start',
+      props: {
+        mode: 'reset-storage',
+        onBeforeReset: async () => {
+          await hubHttp.deleteAccount(new Context());
+          setCache(() => ({}));
+        },
+      },
+    });
+  }, [hubHttp, invokePromise, setCache]);
+
+  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')}
+                  </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>
+  );
+};

package/src/containers/AccountContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { AccountContainer as default } from './AccountContainer';

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

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 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 { translations as shellTranslations } from '@dxos/shell/react';
+
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { DevicesContainer } from './DevicesContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/DevicesContainer',
+  component: DevicesContainer,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
+        }),
+        ProcessManagerPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...shellTranslations],
+  },
+} satisfies Meta<typeof DevicesContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    createInvitationUrl: () => 'https://example.com',
+  },
+};