@dxos/plugin-client 0.8.4-main.422d1c7879 → 0.8.4-main.4668b7de9b

package/src/capabilities/schema-defs.ts

@@ -6,7 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { type Type } from '@dxos/echo';
+import { Type } from '@dxos/echo';
+import { log } from '@dxos/log';
 
 import { ClientCapabilities } from '#types';
 
@@ -17,16 +18,35 @@ export default Capability.makeModule(
     const schemasAtom = yield* Capability.atom(AppCapabilities.Schema);
 
     // TODO(wittjosiah): Unregister schemas when they are disabled.
-    let previous: Type.AnyEntity[] = [];
+    let previousDxns = new Set<string>();
     const cancel = registry.subscribe(
       schemasAtom,
-      async (_schemas: any[]) => {
-        // TODO(wittjosiah): This doesn't seem to de-dupe schemas as expected.
-        const schemas = Array.from(new Set(_schemas.flat())) as Type.AnyEntity[];
-        // TODO(wittjosiah): Filter out schemas which the client has already registered.
-        const newSchemas = schemas.filter((schema) => !previous.includes(schema));
-        previous = schemas;
-        await client.addTypes(newSchemas);
+      async (schemas) => {
+        const seenSchemaDxns = new Set<string>();
+        const batch: { schema: Type.AnyEntity; dxnKey: string }[] = [];
+        for (const schema of schemas.flat()) {
+          const uri = Type.getURI(schema);
+          if (!uri) {
+            log.warn('skipping schema without uri');
+            continue;
+          }
+
+          const key = uri.toString();
+          if (seenSchemaDxns.has(key)) {
+            log('skipping duplicate schema for echo registration', { uri: key });
+            continue;
+          }
+
+          seenSchemaDxns.add(key);
+          batch.push({ schema, dxnKey: key });
+        }
+
+        const toRegister = batch.filter(({ dxnKey }) => !previousDxns.has(dxnKey));
+
+        await client.addTypes(toRegister.map(({ schema }) => schema));
+        for (const { dxnKey } of toRegister) {
+          previousDxns.add(dxnKey);
+        }
       },
       { immediate: true },
     );

package/src/{cli/commands → commands}/halo/create/create.test.ts

@@ -2,26 +2,28 @@
 // Copyright 2025 DXOS.org
 //
 
-import { describe, expect, it } from '@effect/vitest';
+import { describe, test } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
 import * as Option from 'effect/Option';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import {} from '@dxos/app-framework';
 import { fromPlugins } from '@dxos/app-framework/testing';
 import { TestConsole, TestLayer } from '@dxos/cli-util/testing';
 import { ClientService } from '@dxos/client';
 import { runAndForwardErrors } from '@dxos/effect';
-import { ObservabilityPlugin } from '@dxos/plugin-observability/cli';
+import { ObservabilityPlugin } from '@dxos/plugin-observability/plugin';
+
+import { ClientPlugin } from '#plugin';
 
-import { ClientPlugin } from '../../../plugin';
 import { handler } from './create';
 
-const layer = Layer.merge(TestLayer, fromPlugins([ClientPlugin({}), OperationPlugin(), ObservabilityPlugin()]));
+// TODO(wittjosiah): Align browser and node variant option types for ObservabilityPlugin.
+const layer = Layer.merge(TestLayer, fromPlugins([ClientPlugin({}), ObservabilityPlugin({} as any)]));
 
 // TODO(wittjosiah): Fix these tests.
 describe.skip('halo create', () => {
-  it('should create an identity without a display name', () =>
+  test('should create an identity without a display name', ({ expect }) =>
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* handler({ agent: false, displayName: Option.none() });
@@ -30,12 +32,12 @@ describe.skip('halo create', () => {
       expect(logs).toHaveLength(1);
       const parsedIdentity = TestConsole.parseJson(logs[0]);
       expect(parsedIdentity).toEqual({
-        identityKey: client.halo.identity.get()?.identityKey.toHex(),
+        identityDid: client.halo.identity.get()?.did,
         displayName: client.halo.identity.get()?.profile?.displayName,
       });
     }).pipe(Effect.provide(layer), Effect.scoped, runAndForwardErrors));
 
-  it('should create an identity with a display name', () =>
+  test('should create an identity with a display name', ({ expect }) =>
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* handler({ agent: false, displayName: Option.some('Example') });
@@ -44,7 +46,7 @@ describe.skip('halo create', () => {
       expect(logs).toHaveLength(1);
       const parsedIdentity = TestConsole.parseJson(logs[0]);
       expect(parsedIdentity).toEqual({
-        identityKey: client.halo.identity.get()?.identityKey.toHex(),
+        identityDid: client.halo.identity.get()?.did,
         displayName: client.halo.identity.get()?.profile?.displayName,
       });
     }).pipe(Effect.provide(layer), Effect.scoped, runAndForwardErrors));

package/src/{cli/commands → commands}/halo/create/create.ts

@@ -55,7 +55,7 @@ export const handler = Effect.fn(function* ({
     yield* Console.log(
       JSON.stringify(
         {
-          identityKey: identity.identityKey.toHex(),
+          identityDid: identity.identityDid,
           displayName: identity.profile?.displayName,
         },
         null,

package/src/{cli/commands → commands}/halo/identity/identity.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { describe, expect, it } from '@effect/vitest';
+import { describe, test } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 
 import { TestConsole, TestLayer } from '@dxos/cli-util/testing';
@@ -12,7 +12,7 @@ import { runAndForwardErrors } from '@dxos/effect';
 import { handler } from './identity';
 
 describe('halo identity', () => {
-  it('should log if identity is not initialized', () =>
+  test('should log if identity is not initialized', ({ expect }) =>
     Effect.gen(function* () {
       yield* handler();
       const logger = yield* TestConsole.TestConsole;
@@ -23,7 +23,7 @@ describe('halo identity', () => {
       );
     }).pipe(Effect.provide(TestLayer), Effect.scoped, runAndForwardErrors));
 
-  it('should print identity if initialized', () =>
+  test('should print identity if initialized', ({ expect }) =>
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity({ displayName: 'Test' }));
@@ -33,7 +33,7 @@ describe('halo identity', () => {
       expect(logs).toHaveLength(1);
       const parsedIdentity = TestConsole.parseJson(logs[0]);
       expect(parsedIdentity).toEqual({
-        identityKey: client.halo.identity.get()?.identityKey.toHex(),
+        identityDid: client.halo.identity.get()?.did,
         displayName: client.halo.identity.get()?.profile?.displayName,
       });
     }).pipe(Effect.provide(TestLayer), Effect.scoped, runAndForwardErrors));

package/src/{cli/commands → commands}/halo/identity/identity.ts

@@ -27,7 +27,7 @@ export const handler = Effect.fn(function* () {
       yield* Console.log(
         JSON.stringify(
           {
-            identityKey: identity.identityKey.toHex(),
+            identityDid: identity.did,
             displayName: identity.profile?.displayName,
           },
           null,
@@ -35,7 +35,7 @@ export const handler = Effect.fn(function* () {
         ),
       );
     } else {
-      yield* Console.log(print(printIdentity(identity)));
+      yield* Console.log(print(printIdentity({ identityDid: identity.did, profile: identity.profile })));
     }
   }
 });

package/src/{cli/commands → commands}/halo/join/join.ts

@@ -41,7 +41,7 @@ export const join = Command.make(
       yield* Console.log(
         JSON.stringify(
           {
-            identityKey: identity.identityKey.toHex(),
+            identityDid: identity.did,
             displayName: identity.profile?.displayName,
           },
           null,
@@ -49,7 +49,7 @@ export const join = Command.make(
         ),
       );
     } else {
-      yield* Console.log(print(printIdentity(identity)));
+      yield* Console.log(print(printIdentity({ identityDid: identity.did, profile: identity.profile })));
     }
   }),
 ).pipe(Command.withDescription('Join an existing identity using an invitation code.'));

package/src/{cli/commands → commands}/halo/recover/recover.ts

@@ -29,7 +29,7 @@ export const recover = Command.make(
       yield* Console.log(
         JSON.stringify(
           {
-            identityKey: identity.identityKey.toHex(),
+            identityDid: identity.did,
             displayName: identity.profile?.displayName,
           },
           null,
@@ -38,7 +38,7 @@ export const recover = Command.make(
       );
     } else {
       yield* Console.log('Identity recovered successfully');
-      yield* Console.log(print(printIdentity(identity)));
+      yield* Console.log(print(printIdentity({ identityDid: identity.did, profile: identity.profile })));
     }
   }),
 ).pipe(Command.withDescription('Recover an existing identity using a recovery code.'));

package/src/{cli/commands → commands}/halo/update/update.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { describe, expect, it } from '@effect/vitest';
+import { describe, test } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 
 import { TestConsole, TestLayer } from '@dxos/cli-util/testing';
@@ -12,7 +12,7 @@ import { runAndForwardErrors } from '@dxos/effect';
 import { handler } from './update';
 
 describe('halo update', () => {
-  it('should update identity display name', () =>
+  test('should update identity display name', ({ expect }) =>
     Effect.gen(function* () {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity());
@@ -20,9 +20,9 @@ describe('halo update', () => {
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;
       expect(logs).toHaveLength(1);
-      const parsed = TestConsole.parseJson<{ identityKey: string; displayName: string }>(logs[0]);
-      expect(parsed).toHaveProperty('identityKey');
+      const parsed = TestConsole.parseJson<{ identityDid: string; displayName: string }>(logs[0]);
+      expect(parsed).toHaveProperty('identityDid');
       expect(parsed).toHaveProperty('displayName', 'Updated Name');
-      expect(parsed.identityKey).toBe(client.halo.identity.get()?.identityKey.toHex());
+      expect(parsed.identityDid).toBe(client.halo.identity.get()?.did);
     }).pipe(Effect.provide(TestLayer), Effect.scoped, runAndForwardErrors));
 });

package/src/{cli/commands → commands}/halo/update/update.ts

@@ -46,7 +46,7 @@ export const handler = Effect.fn(function* ({ displayName }: { displayName: stri
     yield* Console.log(
       JSON.stringify(
         {
-          identityKey: updatedIdentity.identityKey.toHex(),
+          identityDid: updatedIdentity.did,
           displayName: updatedIdentity.profile?.displayName,
         },
         null,
@@ -54,7 +54,7 @@ export const handler = Effect.fn(function* ({ displayName }: { displayName: stri
       ),
     );
   } else {
-    yield* Console.log(print(printIdentity(updatedIdentity)));
+    yield* Console.log(print(printIdentity({ identityDid: updatedIdentity.did, profile: updatedIdentity.profile })));
   }
 });
 

package/src/{cli/commands → commands}/halo/util.ts

@@ -7,12 +7,9 @@ import { FormBuilder } from '@dxos/cli-util';
 /**
  * Pretty prints an identity with ANSI colors.
  */
-export const printIdentity = (identity: {
-  identityKey: { toHex(): string; truncate(): string };
-  profile?: { displayName?: string };
-}) =>
+export const printIdentity = (identity: { identityDid: string; profile?: { displayName?: string } }) =>
   FormBuilder.make({ title: 'Identity' }).pipe(
-    FormBuilder.set('identityKey', identity.identityKey.truncate()),
+    FormBuilder.set('identityDid', identity.identityDid),
     FormBuilder.set('displayName', identity.profile?.displayName ?? '<none>'),
     FormBuilder.build,
   );

package/src/constants.ts

@@ -2,8 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
+import { DXN } from '@dxos/keys';
+
 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 = 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

@@ -5,15 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+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 { translations } from '../../translations';
 import { DevicesContainer } from './DevicesContainer';
 
 const meta = {
@@ -30,8 +30,7 @@ const meta = {
               yield* initializeIdentity(client);
             }),
         }),
-        OperationPlugin(),
-        RuntimePlugin(),
+        ProcessManagerPlugin(),
       ],
     }),
   ],

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -218,7 +218,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
       <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'>
+          <div className='w-full md:max-w-80 aspect-square relative text-description'>
             <QR
               rounding={100}
               backgroundColor='transparent'

package/src/containers/InvitationsContainer/InvitationsContainer.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtom, useAtomSet } from '@effect-atom/atom-react';
+import React, { useCallback, useState } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { Context } from '@dxos/context';
+import { Clipboard, Icon, IconButton, List, ListItem, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { ClientCapabilities } from '#types';
+
+import { type AccountCacheInvitation } from '../../state/account-cache';
+import { useHubHttpClient } from '../../state/use-hub-http';
+
+export const InvitationsContainer = () => {
+  const { t } = useTranslation(meta.id);
+  const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
+  const [cache] = useAtom(accountCacheAtom);
+  const setCache = useAtomSet(accountCacheAtom);
+  const [pending, setPending] = useState(false);
+
+  // Account/invitation routes live on hub-service, not the edge worker.
+  const hubHttp = useHubHttpClient();
+
+  useAsyncEffect(async () => {
+    if (!hubHttp) {
+      return;
+    }
+    try {
+      const result = await hubHttp.listAccountInvitations(new Context());
+      setCache((prev) => ({ ...prev, invitations: result.invitations, fetchedAt: Date.now() }));
+    } catch {
+      // Offline: keep cache.
+    }
+  }, [hubHttp, setCache]);
+
+  const handleIssue = useCallback(async () => {
+    if (!hubHttp) {
+      return;
+    }
+    setPending(true);
+    try {
+      const result = await hubHttp.issueAccountInvitation(new Context());
+      // Optimistically push the new code and decrement the remaining quota; the
+      // server consumes one slot at issue time. Next refresh reconciles.
+      setCache((prev) => ({
+        ...prev,
+        account: prev.account
+          ? { ...prev.account, invitationsRemaining: Math.max(0, prev.account.invitationsRemaining - 1) }
+          : prev.account,
+        invitations: [{ code: result.code, createdAt: new Date().toISOString() }, ...(prev.invitations ?? [])],
+      }));
+    } finally {
+      setPending(false);
+    }
+  }, [hubHttp, setCache]);
+
+  const remaining = cache.account?.invitationsRemaining ?? 0;
+  const list = cache.invitations ?? [];
+  const available = list.filter((row) => !row.redeemedByIdentityDid);
+  const redeemed = list.filter((row) => Boolean(row.redeemedByIdentityDid));
+
+  return (
+    <Clipboard.Provider>
+      <Settings.Viewport>
+        <Settings.Section title={t('invitations-section.title')} description={t('invitations-section.description')}>
+          <Settings.Item
+            title={t('generate-invitation.label')}
+            description={t('generate-invitation.description', { count: remaining })}
+          >
+            <IconButton
+              icon='ph--plus--regular'
+              label={t('generate-invitation.label')}
+              variant='primary'
+              onClick={handleIssue}
+              disabled={pending || remaining <= 0}
+            />
+          </Settings.Item>
+        </Settings.Section>
+
+        {available.length > 0 ? (
+          <Settings.Section title={t('available-invitations.title')}>
+            <List>
+              {available.map((row) => (
+                <AvailableInvitationItem key={row.code} row={row} />
+              ))}
+            </List>
+          </Settings.Section>
+        ) : null}
+
+        {redeemed.length > 0 ? (
+          <Settings.Section title={t('redeemed-invitations.title')}>
+            <List>
+              {redeemed.map((row) => (
+                <RedeemedInvitationItem key={row.code} row={row} />
+              ))}
+            </List>
+          </Settings.Section>
+        ) : null}
+      </Settings.Viewport>
+    </Clipboard.Provider>
+  );
+};
+
+const AvailableInvitationItem = ({ row }: { row: AccountCacheInvitation }) => (
+  <ListItem.Root classNames='grid grid-cols-[min-content_1fr_min-content] items-center gap-2'>
+    <ListItem.Endcap>
+      <Icon icon='ph--paper-plane-tilt--duotone' size={5} classNames='text-description' />
+    </ListItem.Endcap>
+    <div className='flex flex-col min-w-0'>
+      <ListItem.Heading classNames='font-mono truncate'>{row.code}</ListItem.Heading>
+      <p className='text-description text-xs'>{new Date(row.createdAt).toLocaleString()}</p>
+    </div>
+    <ListItem.Endcap>
+      <Clipboard.IconButton value={row.code} />
+    </ListItem.Endcap>
+  </ListItem.Root>
+);
+
+const RedeemedInvitationItem = ({ row }: { row: AccountCacheInvitation }) => {
+  const date = row.redeemedAt ?? row.createdAt;
+  return (
+    <ListItem.Root classNames='grid grid-cols-[min-content_1fr] items-center gap-2'>
+      <ListItem.Endcap>
+        <Icon icon='ph--check-circle--duotone' size={5} classNames='text-success-text' />
+      </ListItem.Endcap>
+      <div className='flex flex-col min-w-0'>
+        <ListItem.Heading classNames='font-mono truncate'>{row.code}</ListItem.Heading>
+        <p className='text-description text-xs'>{new Date(date).toLocaleString()}</p>
+      </div>
+    </ListItem.Root>
+  );
+};

package/src/containers/InvitationsContainer/index.ts

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