@dxos/plugin-client 0.9.0 → 0.9.1-main.c7dcc2e112

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -25,7 +25,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();
@@ -46,12 +46,12 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
     <Clipboard.Provider>
       <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.profile.key })}
+          description={t('devices.description', { ns: meta.profile.key })}
         >
           <Settings.Panel>
             <div role='group' className='min-w-0'>
-              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.id })}</h3>
+              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.profile.key })}</h3>
               <List>
                 {devices.map((device: Device) => (
                   <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
@@ -67,17 +67,20 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
           </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.profile.key })}
+          description={t('danger-zone.description', { ns: meta.profile.key })}
         >
-          <Settings.Item title={t('reset-device.label')} description={t('reset-device.description', { ns: meta.id })}>
+          <Settings.Item
+            title={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>
           </Settings.Item>
           <Settings.Item
             title={t('recover-identity.label')}
-            description={t('recover-identity.description', { ns: meta.id })}
+            description={t('recover-identity.description', { ns: meta.profile.key })}
           >
             <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
               {t('recover-identity.label')}
@@ -85,7 +88,7 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
           </Settings.Item>
           <Settings.Item
             title={t('join-new-identity.label')}
-            description={t('join-new-identity.description', { ns: meta.id })}
+            description={t('join-new-identity.description', { ns: meta.profile.key })}
           >
             <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
               {t('join-new-identity.label')}
@@ -167,7 +170,7 @@ const InvitationSection = ({
   onInvitationDone = () => {},
   onInvitationCreate = () => {},
 }: InvitationComponentProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const activeView =
     state < 0
       ? 'init'
@@ -215,7 +218,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.tsx

@@ -17,7 +17,7 @@ import { type AccountCacheInvitation } from '../../state/account-cache';
 import { useHubHttpClient } from '../../state/use-hub-http';
 
 export const InvitationsContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const accountCacheAtom = useCapability(ClientCapabilities.AccountCache);
   const [cache] = useAtom(accountCacheAtom);
   const setCache = useAtomSet(accountCacheAtom);

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -17,7 +17,7 @@ import { ClientOperation } from '#operations';
 
 export const JoinDialog = (props: JoinPanelProps) => {
   const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);
 

package/src/containers/ProfileContainer/ProfileContainer.tsx

@@ -33,7 +33,7 @@ const getDefaultEmojiValue = (identity: Identity | null) => hexToEmoji(identity?
 const getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 
 export const ProfileContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const client = useClient();
   const identity = useIdentity();
   const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');

package/src/containers/RecoveryCodeDialog/RecoveryCodeDialog.tsx

@@ -14,7 +14,7 @@ export type RecoveryCodeDialogProps = {
 
 // TODO(burdon): Should have cancel button.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [confirmation, setConfirmation] = useState(false);
 
   const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx

@@ -12,10 +12,10 @@ import { Settings } from '@dxos/react-ui-form';
 import { meta } from '#meta';
 import { ClientOperation } from '#operations';
 
-export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.profile.key}.ManageCredentialsDialog`;
 
 export const RecoveryCredentialsContainer = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter(

package/src/containers/UsageContainer/UsageContainer.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { Context } from '@dxos/context';
+import { log } from '@dxos/log';
+import { type GetProfileUsageResponse } from '@dxos/protocols';
+import { useAsyncEffect } from '@dxos/react-ui';
+
+import { useHubHttpClient } from '../../state/use-hub-http';
+import { UsageView, type UsageViewState } from './UsageView';
+
+/**
+ * Fetches rolling-window profile usage from the hub service and renders it.
+ * Connected wrapper around the presentational {@link UsageView}.
+ */
+export const UsageContainer = () => {
+  const hubHttp = useHubHttpClient();
+  const [state, setState] = useState<UsageViewState>('loading');
+  const [data, setData] = useState<GetProfileUsageResponse | undefined>();
+  const [lastUpdated, setLastUpdated] = useState<number | undefined>();
+  const [refreshCount, setRefreshCount] = useState(0);
+
+  useAsyncEffect(async () => {
+    if (!hubHttp) {
+      setState('unavailable');
+      return;
+    }
+    // Keep prior data visible while refetching; only show the skeleton on first load.
+    setState((previous) => (previous === 'ready' ? previous : 'loading'));
+    try {
+      const result = await hubHttp.getProfileUsage(new Context());
+      setData(result);
+      setLastUpdated(Date.now());
+      setState('ready');
+    } catch (err) {
+      log.catch(err);
+      setState('error');
+    }
+  }, [hubHttp, refreshCount]);
+
+  const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);
+
+  return <UsageView state={state} data={data} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;
+};

package/src/containers/UsageContainer/UsageView.stories.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { type GetProfileUsageResponse } from '@dxos/protocols';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { UsageView } from './UsageView';
+
+// Mock payload shaped like the `/api/metering/profile/usage` response.
+const usageData: GetProfileUsageResponse = {
+  profileId: 'did:key:z6MkExampleProfileIdentity',
+  usage: [
+    { eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-opus-4'], amount: 1_284_500 },
+    { eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['claude-opus-4'], amount: 238_900 },
+    { eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-sonnet-4'], amount: 92_300 },
+    { eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['claude-sonnet-4'], amount: 18_400 },
+  ],
+  limits: [
+    {
+      eventType: 'ai',
+      valueKey: 'inputTokens',
+      subtypePattern: ['claude-opus-4'],
+      limit: 5_000_000,
+      windowDuration: 24 * 7 * 60 * 60,
+    },
+    {
+      eventType: 'ai',
+      valueKey: 'outputTokens',
+      subtypePattern: ['*'],
+      limit: 1_000_000,
+      windowDuration: 24 * 30 * 60 * 60,
+    },
+    {
+      eventType: 'ai',
+      valueKey: 'inputTokens',
+      subtypePattern: ['*'],
+      limit: 20_000_000,
+      windowDuration: 24 * 30 * 60 * 60,
+    },
+  ],
+  buckets: [],
+};
+
+const meta = {
+  title: 'plugins/plugin-client/containers/UsageView',
+  component: UsageView,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof UsageView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    state: 'ready',
+    data: usageData,
+    lastUpdated: new Date('2026-06-16T12:00:00Z').getTime(),
+    onRefresh: () => {},
+  },
+};
+
+// Internal plan: a single unlimited (`limit: null`) `ai` limit — renders without a meter.
+export const Internal: Story = {
+  args: {
+    state: 'ready',
+    data: {
+      profileId: usageData.profileId,
+      usage: usageData.usage,
+      limits: [
+        {
+          eventType: 'ai',
+          valueKey: 'outputTokens',
+          subtypePattern: ['*'],
+          limit: null,
+          windowDuration: 24 * 30 * 60 * 60,
+        },
+      ],
+      buckets: [],
+    },
+    lastUpdated: new Date('2026-06-16T12:00:00Z').getTime(),
+    onRefresh: () => {},
+  },
+};
+
+export const Loading: Story = {
+  args: { state: 'loading' },
+};
+
+export const Error: Story = {
+  args: { state: 'error' },
+};
+
+export const Empty: Story = {
+  args: {
+    state: 'ready',
+    data: { profileId: usageData.profileId, usage: [], limits: [], buckets: [] },
+    lastUpdated: new Date('2026-06-16T12:00:00Z').getTime(),
+    onRefresh: () => {},
+  },
+};
+
+export const Unavailable: Story = {
+  args: { state: 'unavailable' },
+};

package/src/containers/UsageContainer/UsageView.tsx

@@ -0,0 +1,238 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { type GetProfileUsageResponse, type MeteringLimit, type MeteringUsageItem } from '@dxos/protocols';
+import { IconButton, Message, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+
+import { meta } from '#meta';
+
+export type UsageViewState = 'loading' | 'ready' | 'error' | 'unavailable';
+
+export type UsageViewProps = {
+  /** Current fetch state; drives which content is shown. */
+  state: UsageViewState;
+  /** Profile usage payload; required when `state` is `'ready'`. */
+  data?: GetProfileUsageResponse;
+  /** Epoch milliseconds of the last successful fetch. */
+  lastUpdated?: number;
+  /** Invoked when the user requests a refresh. */
+  onRefresh?: () => void;
+};
+
+type TFunction = (key: string, options?: Record<string, unknown>) => string;
+
+/**
+ * Whether a usage row falls under a limit. Subtype segments are matched positionally against
+ * `subtypePattern` where `*` matches any segment.
+ */
+const usageMatchesLimit = (item: MeteringUsageItem, limit: MeteringLimit): boolean => {
+  if (item.eventType !== limit.eventType || item.valueKey !== limit.valueKey) {
+    return false;
+  }
+  return limit.subtypePattern.every((pattern, index) => pattern === '*' || pattern === item.subtypePattern[index]);
+};
+
+/** Sum every usage item that falls under the limit. */
+const sumUsageForLimit = (usage: GetProfileUsageResponse['usage'], limit: MeteringLimit): number =>
+  usage.reduce((total, item) => (usageMatchesLimit(item, limit) ? total + item.amount : total), 0);
+
+/** Humanize a camelCase value key, e.g. `outputTokens` → `output tokens`. */
+const formatValueKey = (valueKey: string): string =>
+  valueKey
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .toLowerCase();
+
+/**
+ * Human label for a limit: a scope followed by the value key, e.g.
+ * `{ eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['*'] }` → `All models · output tokens`,
+ * `{ eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-opus-4'] }` → `claude-opus-4 · input tokens`.
+ */
+const formatLimitLabel = (limit: MeteringLimit, t: TFunction): string => {
+  const metric = formatValueKey(limit.valueKey);
+  const subtype = limit.subtypePattern.filter((segment) => segment && segment !== '*').join('/');
+  if (limit.eventType === 'ai') {
+    return `${subtype || t('usage-all-models.label')} · ${metric}`;
+  }
+  return `${subtype ? `${limit.eventType}/${subtype}` : limit.eventType} · ${metric}`;
+};
+
+const formatAmount = (amount: number): string => amount.toLocaleString();
+
+const SECONDS_PER_HOUR = 60 * 60;
+
+/** Render `windowHours` as a localized "N months / days / hours" string. */
+const formatWindow = (windowHours: number, t: TFunction): string => {
+  if (windowHours % (24 * 30) === 0) {
+    return t('usage-window-months.label', { count: windowHours / (24 * 30) });
+  }
+  if (windowHours % 24 === 0) {
+    return t('usage-window-days.label', { count: windowHours / 24 });
+  }
+  return t('usage-window-hours.label', { count: windowHours });
+};
+
+/**
+ * A single usage row: label + caption on the left, a thin meter, and a value on the right.
+ * Omitting `percent` (an unlimited limit) renders no meter.
+ */
+const UsageRow = ({
+  label,
+  caption,
+  percent,
+  value,
+}: {
+  label: string;
+  caption?: string;
+  percent?: number;
+  value: string;
+}) => (
+  <div className='flex items-center gap-trim-lg py-trim-sm'>
+    <div className='flex flex-col min-w-0 w-1/3 shrink-0'>
+      <span className='truncate text-base-fg'>{label}</span>
+      {caption && <span className='text-sm text-description'>{caption}</span>}
+    </div>
+    {percent === undefined ? (
+      <div className='flex-1' />
+    ) : (
+      <div
+        role='progressbar'
+        aria-label={label}
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className='h-1.5 flex-1 rounded-full bg-separator overflow-hidden'
+      >
+        <div
+          className='h-full rounded-full bg-primary-500 transition-[width] duration-500'
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+    )}
+    <span className='shrink-0 w-24 text-end text-sm text-description tabular-nums'>{value}</span>
+  </div>
+);
+
+/** Placeholder rows shown while the first fetch is in flight. */
+const UsageSkeleton = () => (
+  <div className='flex flex-col'>
+    {Array.from({ length: 3 }).map((_, index) => (
+      <div key={index} className='flex items-center gap-trim-lg py-trim-sm'>
+        <div className='flex flex-col gap-1 w-1/3 shrink-0'>
+          <div className='h-4 w-24 rounded bg-separator animate-pulse' />
+          <div className='h-3 w-32 rounded bg-separator animate-pulse' />
+        </div>
+        <div className='h-1.5 flex-1 rounded-full bg-separator animate-pulse' />
+        <div className='h-3 w-12 shrink-0 rounded bg-separator animate-pulse' />
+      </div>
+    ))}
+  </div>
+);
+
+/**
+ * Presentational view of profile usage: renders loading/error/unavailable/empty states, or one row
+ * per limit with a usage meter, plus a collapsible raw-response viewer. Pure — all data via props.
+ */
+export const UsageView = ({ state, data, lastUpdated, onRefresh }: UsageViewProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const [rawExpanded, setRawExpanded] = useState(false);
+
+  // One display row per limit, shorter windows first. A `null` amount means unlimited (rendered without a meter).
+  const limitRows = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    return data.limits
+      .map((limit) => {
+        const used = sumUsageForLimit(data.usage, limit);
+        const label = formatLimitLabel(limit, t);
+        const windowHours = limit.windowDuration / SECONDS_PER_HOUR;
+        const window = formatWindow(windowHours, t);
+        const key = `${limit.eventType}/${limit.subtypePattern.join(',')}/${limit.valueKey}/${limit.windowDuration}/${limit.limit ?? 'unlimited'}`;
+        if (limit.limit === null) {
+          return {
+            key,
+            label,
+            caption: t('usage-unlimited.description', { used: formatAmount(used), window }),
+            percent: undefined,
+            value: t('usage-unlimited.label'),
+            windowHours,
+          };
+        }
+        const percent = limit.limit > 0 ? Math.min(100, Math.round((used / limit.limit) * 100)) : used > 0 ? 100 : 0;
+        return {
+          key,
+          label,
+          caption: t('usage-limit.description', { used: formatAmount(used), limit: formatAmount(limit.limit), window }),
+          percent,
+          value: t('usage-percent-used.label', { percent }),
+          windowHours,
+        };
+      })
+      .sort((a, b) => a.windowHours - b.windowHours);
+  }, [data, t]);
+
+  return (
+    <Settings.Viewport>
+      <Settings.Section title={t('usage-section.title')} description={t('usage-section.description')}>
+        {state === 'unavailable' ? (
+          <Message.Root valence='warning'>
+            <Message.Title icon='ph--cloud-slash--duotone'>{t('usage-unavailable.title')}</Message.Title>
+            <Message.Content>{t('usage-unavailable.description')}</Message.Content>
+          </Message.Root>
+        ) : state === 'loading' ? (
+          <UsageSkeleton />
+        ) : state === 'error' ? (
+          <Message.Root valence='error'>
+            <Message.Title icon='ph--cloud-x--duotone'>{t('usage-offline.title')}</Message.Title>
+            <Message.Content>{t('usage-offline.description')}</Message.Content>
+          </Message.Root>
+        ) : limitRows.length === 0 ? (
+          <Message.Root valence='neutral'>
+            <Message.Title icon='ph--chart-bar--duotone'>{t('usage-empty.title')}</Message.Title>
+            <Message.Content>{t('usage-empty.description')}</Message.Content>
+          </Message.Root>
+        ) : (
+          <div className='flex flex-col'>
+            {limitRows.map((row) => (
+              <UsageRow key={row.key} label={row.label} caption={row.caption} percent={row.percent} value={row.value} />
+            ))}
+
+            <div className='flex items-center gap-1 pt-trim-md text-sm text-description'>
+              {lastUpdated !== undefined && (
+                <span>{t('usage-last-updated.label', { time: new Date(lastUpdated).toLocaleTimeString() })}</span>
+              )}
+              {onRefresh && (
+                <IconButton
+                  iconOnly
+                  variant='ghost'
+                  icon='ph--arrow-clockwise--regular'
+                  label={t('usage-refresh.label')}
+                  onClick={onRefresh}
+                />
+              )}
+            </div>
+          </div>
+        )}
+        {state === 'ready' && data && (
+          <div className='flex flex-col pt-trim-md'>
+            <IconButton
+              variant='ghost'
+              icon='ph--caret-right--regular'
+              iconClassNames={rawExpanded ? 'transition-transform rotate-90' : 'transition-transform'}
+              label={t('usage-raw-json.label')}
+              onClick={() => setRawExpanded((value) => !value)}
+              classNames='self-start'
+            />
+            {rawExpanded && <JsonHighlighter data={data} classNames='mt-trim-sm text-xs overflow-auto' />}
+          </div>
+        )}
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};

package/src/containers/UsageContainer/index.ts

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

package/src/containers/index.ts

@@ -10,6 +10,7 @@ export { type ResetDialogProps } from './ResetDialog';
 export const AccountContainer: ComponentType<any> = lazy(() => import('./AccountContainer'));
 export const DevicesContainer: ComponentType<any> = lazy(() => import('./DevicesContainer'));
 export const InvitationsContainer: ComponentType<any> = lazy(() => import('./InvitationsContainer'));
+export const UsageContainer: ComponentType<any> = lazy(() => import('./UsageContainer'));
 export const JoinDialog: ComponentType<any> = lazy(() => import('./JoinDialog'));
 export const ProfileContainer: ComponentType<any> = lazy(() => import('./ProfileContainer'));
 export const RecoveryCodeDialog: ComponentType<any> = lazy(() => import('./RecoveryCodeDialog'));

package/src/meta.ts

@@ -3,16 +3,7 @@
 //
 
 import { Plugin } from '@dxos/app-framework';
-import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.client'),
-  name: 'Client',
-  author: 'DXOS',
-  description: trim`
-    Core client connectivity and peer-to-peer networking infrastructure.
-    Manages identity, authentication, and real-time synchronization across devices.
-  `,
-  tags: ['system'],
-});
+import config from '../dx.config';
+
+export const meta = Plugin.getMetaFromConfig(config);

package/src/operations/create-passkey.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 import * as Match from 'effect/Match';
 
 import { Capability } from '@dxos/app-framework';
-import { supportsNativePasskeys, createNativePasskey, extractPublicKeyFromAttestation } from '@dxos/app-toolkit';
+import { NativePasskey } from '@dxos/app-toolkit';
 import { PublicKey } from '@dxos/client';
 import { Operation } from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
@@ -23,16 +23,18 @@ const handler: Operation.WithHandler<typeof CreatePasskey> = CreatePasskey.pipe(
 
       const lookupKey = PublicKey.random();
 
-      const { recoveryKey, algorithm } = yield* Match.value(supportsNativePasskeys()).pipe(
+      const { recoveryKey, algorithm } = yield* Match.value(NativePasskey.supportsNativePasskeys()).pipe(
         Match.when(true, () =>
           Effect.gen(function* () {
             const result = yield* Effect.promise(() =>
-              createNativePasskey({
+              NativePasskey.createNativePasskey({
                 username: identity.did,
                 userId: lookupKey.asUint8Array(),
               }),
             );
-            const { publicKey, algorithm: alg } = extractPublicKeyFromAttestation(result.attestation_object);
+            const { publicKey, algorithm: alg } = NativePasskey.extractPublicKeyFromAttestation(
+              result.attestation_object,
+            );
             return {
               recoveryKey: PublicKey.from(publicKey),
               algorithm: alg === -7 ? 'ES256' : 'ED25519',

package/src/operations/definitions.ts

@@ -10,7 +10,7 @@ import { DXN, IdentityDid, SpaceId } from '@dxos/keys';
 
 import { meta } from '#meta';
 
-const makeKey = (name: string) => DXN.make(`${meta.id}.operation.${name}`);
+const makeKey = (name: string) => DXN.make(`${meta.profile.key}.operation.${name}`);
 
 const IdentitySchema = Schema.Struct({
   identityDid: IdentityDid,
@@ -57,6 +57,17 @@ export const ShareIdentity = Operation.make({
   output: Schema.Void,
 });
 
+export const OpenUsage = Operation.make({
+  meta: {
+    key: makeKey('openUsage'),
+    name: 'Open Usage',
+    icon: 'ph--chart-bar--regular',
+  },
+  services: [Capability.Service],
+  input: Schema.Void,
+  output: Schema.Void,
+});
+
 export const RecoverIdentity = Operation.make({
   meta: { key: makeKey('recoverIdentity'), name: 'Recover Identity', icon: 'ph--key--regular' },
   services: [Capability.Service],

package/src/operations/index.ts

@@ -12,6 +12,7 @@ export const ClientOperationHandlerSet = OperationHandlerSet.lazy(
   () => import('./create-passkey'),
   () => import('./create-recovery-code'),
   () => import('./join-identity'),
+  () => import('./open-usage'),
   () => import('./recover-identity'),
   () => import('./redeem-passkey'),
   () => import('./redeem-token'),

package/src/operations/open-usage.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { Account } from '../types';
+import { OpenUsage } from './definitions';
+
+const handler: Operation.WithHandler<typeof OpenUsage> = OpenUsage.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      yield* Operation.invoke(LayoutOperation.SwitchWorkspace, { subject: Paths.getSpacePath(Account.id) });
+      yield* Operation.invoke(LayoutOperation.Open, {
+        subject: [Paths.getSpacePath(Account.id, Account.Usage)],
+      });
+    }),
+  ),
+);
+
+export default handler;