@dxos/plugin-client 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -11,8 +11,9 @@ import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Button, Clipboard, Icon, IconButton, useId, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Listbox } from '@dxos/react-ui-list';
 import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
@@ -44,58 +45,72 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <Settings.Viewport>
-        <Settings.Section
-          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.profile.key })}</h3>
-              <List>
-                {devices.map((device: Device) => (
-                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
-                ))}
-              </List>
-            </div>
-            {createInvitationUrl && (
-              <div role='group' className='min-w-0'>
-                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
-                <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </div>
-            )}
-          </Settings.Panel>
-        </Settings.Section>
-        <Settings.Section
-          title={t('danger-zone.title', { ns: meta.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.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.profile.key })}
-          >
-            <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
-              {t('recover-identity.label')}
-            </Button>
-          </Settings.Item>
-          <Settings.Item
-            title={t('join-new-identity.label')}
-            description={t('join-new-identity.description', { ns: meta.profile.key })}
-          >
-            <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
-              {t('join-new-identity.label')}
-            </Button>
-          </Settings.Item>
-        </Settings.Section>
-      </Settings.Viewport>
+      <Form.Root variant='settings'>
+        <Form.Viewport scroll>
+          <Form.Content>
+            <Form.Section
+              title={t('devices-verbose.label', { ns: meta.profile.key })}
+              description={t('devices.description', { ns: meta.profile.key })}
+            >
+              <Form.Group>
+                <div role='group' className='min-w-0'>
+                  <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.profile.key })}</h3>
+                  <Listbox.Root>
+                    <Listbox.Content aria-label={t('devices.label', { ns: meta.profile.key })}>
+                      {devices.map((device: Device) => (
+                        <DeviceListItem
+                          key={device.deviceKey.toHex()}
+                          device={device}
+                          connectionState={connectionState}
+                        />
+                      ))}
+                    </Listbox.Content>
+                  </Listbox.Root>
+                </div>
+                {createInvitationUrl && (
+                  <div role='group' className='min-w-0'>
+                    <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
+                    <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+                  </div>
+                )}
+              </Form.Group>
+            </Form.Section>
+            <Form.Section
+              title={t('danger-zone.title', { ns: meta.profile.key })}
+              description={t('danger-zone.description', { ns: meta.profile.key })}
+            >
+              <Form.Row
+                label={t('reset-device.label')}
+                description={t('reset-device.description', { ns: meta.profile.key })}
+              >
+                <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+                  {t('reset-device.label')}
+                </Button>
+              </Form.Row>
+              <Form.Row
+                label={t('recover-identity.label')}
+                description={t('recover-identity.description', { ns: meta.profile.key })}
+              >
+                <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+                  {t('recover-identity.label')}
+                </Button>
+              </Form.Row>
+              <Form.Row
+                label={t('join-new-identity.label')}
+                description={t('join-new-identity.description', { ns: meta.profile.key })}
+              >
+                <Button
+                  variant='destructive'
+                  onClick={handleJoinNewIdentity}
+                  data-testid='devicesContainer.joinExisting'
+                >
+                  {t('join-new-identity.label')}
+                </Button>
+              </Form.Row>
+            </Form.Section>
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Clipboard.Provider>
   );
 };

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

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

package/src/containers/InvitationsContainer/InvitationsContainer.tsx

@@ -7,14 +7,14 @@ 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 { Clipboard, Icon, IconButton, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Listbox } from '@dxos/react-ui-list';
 
 import { meta } from '#meta';
-import { ClientCapabilities } from '#types';
+import { type AccountCacheInvitation, ClientCapabilities } from '#types';
 
-import { type AccountCacheInvitation } from '../../state/account-cache';
-import { useHubHttpClient } from '../../state/use-hub-http';
+import { useHubHttpClient } from '../../hooks';
 
 export const InvitationsContainer = () => {
   const { t } = useTranslation(meta.profile.key);
@@ -24,27 +24,28 @@ export const InvitationsContainer = () => {
   const [pending, setPending] = useState(false);
 
   // Account/invitation routes live on hub-service, not the edge worker.
-  const hubHttp = useHubHttpClient();
+  const hubClient = useHubHttpClient();
 
   useAsyncEffect(async () => {
-    if (!hubHttp) {
+    if (!hubClient) {
       return;
     }
+
     try {
-      const result = await hubHttp.listAccountInvitations(new Context());
+      const result = await hubClient.listAccountInvitations(new Context());
       setCache((prev) => ({ ...prev, invitations: result.invitations, fetchedAt: Date.now() }));
     } catch {
       // Offline: keep cache.
     }
-  }, [hubHttp, setCache]);
+  }, [hubClient, setCache]);
 
   const handleIssue = useCallback(async () => {
-    if (!hubHttp) {
+    if (!hubClient) {
       return;
     }
     setPending(true);
     try {
-      const result = await hubHttp.issueAccountInvitation(new Context());
+      const result = await hubClient.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) => ({
@@ -57,7 +58,7 @@ export const InvitationsContainer = () => {
     } finally {
       setPending(false);
     }
-  }, [hubHttp, setCache]);
+  }, [hubClient, setCache]);
 
   const remaining = cache.account?.invitationsRemaining ?? 0;
   const list = cache.invitations ?? [];
@@ -66,72 +67,74 @@ export const InvitationsContainer = () => {
 
   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>
+      <Form.Root variant='settings'>
+        <Form.Viewport scroll>
+          <Form.Content>
+            <Form.Section title={t('invitations-section.title')} description={t('invitations-section.description')}>
+              <Form.Row
+                label={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}
+                />
+              </Form.Row>
+            </Form.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}
+            {available.length > 0 ? (
+              <Form.Section title={t('available-invitations.title')}>
+                <Listbox.Root>
+                  <Listbox.Content classNames='gap-1'>
+                    {available.map((row) => (
+                      <AvailableInvitationItem key={row.code} row={row} />
+                    ))}
+                  </Listbox.Content>
+                </Listbox.Root>
+              </Form.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>
+            {redeemed.length > 0 ? (
+              <Form.Section title={t('redeemed-invitations.title')}>
+                <Listbox.Root>
+                  <Listbox.Content classNames='gap-1'>
+                    {redeemed.map((row) => (
+                      <RedeemedInvitationItem key={row.code} row={row} />
+                    ))}
+                  </Listbox.Content>
+                </Listbox.Root>
+              </Form.Section>
+            ) : null}
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </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>
+  <Listbox.Item id={row.code} classNames='grid grid-cols-[min-content_1fr_min-content] items-center gap-2'>
+    <Icon icon='ph--paper-plane-tilt--duotone' size={5} classNames='text-description' />
     <div className='flex flex-col min-w-0'>
-      <ListItem.Heading classNames='font-mono truncate'>{row.code}</ListItem.Heading>
+      <div className='font-mono truncate'>{row.code}</div>
       <p className='text-description text-xs'>{new Date(row.createdAt).toLocaleString()}</p>
     </div>
-    <ListItem.Endcap>
-      <Clipboard.IconButton value={row.code} />
-    </ListItem.Endcap>
-  </ListItem.Root>
+    <Clipboard.IconButton value={row.code} />
+  </Listbox.Item>
 );
 
 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>
+    <Listbox.Item id={row.code} classNames='grid grid-cols-[min-content_1fr] items-center gap-2'>
+      <Icon icon='ph--check-circle--duotone' size={5} classNames='text-success-text' />
       <div className='flex flex-col min-w-0'>
-        <ListItem.Heading classNames='font-mono truncate'>{row.code}</ListItem.Heading>
+        <div className='font-mono truncate'>{row.code}</div>
         <p className='text-description text-xs'>{new Date(date).toLocaleString()}</p>
       </div>
-    </ListItem.Root>
+    </Listbox.Item>
   );
 };

package/src/containers/ProfileContainer/ProfileContainer.tsx

@@ -9,7 +9,7 @@ import { debounce } from '@dxos/async';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
-import { Form, type FormFieldMap, type FormUpdateMeta, Settings } from '@dxos/react-ui-form';
+import { Form, type FormFieldMap, type FormUpdateMeta } from '@dxos/react-ui-form';
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
@@ -101,14 +101,16 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.Item title={label} description={t('display-name.description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display-name-input.placeholder')}
-              classNames='min-w-64'
-            />
-          </Settings.Item>
+          <Form.Row label={label} description={t('display-name.description')}>
+            <Input.Root>
+              <Input.TextInput
+                value={getValue()}
+                onChange={handleChange}
+                placeholder={t('display-name-input.placeholder')}
+                classNames='min-w-64'
+              />
+            </Input.Root>
+          </Form.Row>
         );
       },
       emoji: ({ type, label, getValue, onValueChange }) => {
@@ -119,7 +121,7 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.Item title={label} description={t('icon.description')}>
+          <Form.Row label={label} description={t('icon.description')}>
             <EmojiPickerBlock
               triggerVariant='default'
               emoji={getValue()}
@@ -127,7 +129,7 @@ export const ProfileContainer = () => {
               onClickClear={handleEmojiReset}
               classNames='justify-self-end'
             />
-          </Settings.Item>
+          </Form.Row>
         );
       },
       hue: ({ type, label, getValue, onValueChange }) => {
@@ -138,22 +140,24 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.Item title={label} description={t('hue.description')}>
+          <Form.Row label={label} description={t('hue.description')}>
             <div className='flex justify-self-end'>
               <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
             </div>
-          </Settings.Item>
+          </Form.Row>
         );
       },
       // TODO(wittjosiah): We need text input annotations for disabled and copyable.
       did: ({ label, getValue }) => {
         return (
-          <Settings.Item title={label} description={t('did.description')}>
-            <ButtonGroup classNames='w-full'>
-              <Input.TextInput value={getValue()} disabled classNames='min-w-64' />
-              <Clipboard.IconButton value={getValue() ?? ''} />
-            </ButtonGroup>
-          </Settings.Item>
+          <Form.Row label={label} description={t('did.description')}>
+            <Input.Root>
+              <ButtonGroup classNames='w-full'>
+                <Input.TextInput value={getValue()} disabled classNames='min-w-64' />
+                <Clipboard.IconButton value={getValue() ?? ''} />
+              </ButtonGroup>
+            </Input.Root>
+          </Form.Row>
         );
       },
     }),
@@ -162,15 +166,21 @@ export const ProfileContainer = () => {
 
   return (
     <Clipboard.Provider>
-      <Settings.Viewport>
-        <Settings.Section title={t('profile.label')} description={t('profile.description')}>
-          <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
-            <Form.Content classNames='gap-form-gap'>
+      <Form.Root
+        variant='settings'
+        schema={UserProfile}
+        values={values}
+        fieldMap={fieldMap}
+        onValuesChanged={handleChange}
+      >
+        <Form.Viewport scroll>
+          <Form.Content>
+            <Form.Section title={t('profile.label')} description={t('profile.description')}>
               <Form.FieldSet />
-            </Form.Content>
-          </Form.Root>
-        </Settings.Section>
-      </Settings.Viewport>
+            </Form.Section>
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Clipboard.Provider>
   );
 };

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx

@@ -6,8 +6,9 @@ import React from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { useCredentials } from '@dxos/react-client/halo';
-import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Icon, IconButton, Message, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Listbox } from '@dxos/react-ui-list';
 
 import { meta } from '#meta';
 import { ClientOperation } from '#operations';
@@ -23,44 +24,52 @@ export const RecoveryCredentialsContainer = () => {
   );
 
   return (
-    <Settings.Viewport>
-      <Settings.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>
-        <Settings.Item title={t('create-passkey.label')} description={t('create-passkey.description')}>
-          <IconButton
-            label={t('create-passkey.label')}
-            icon='ph--key--duotone'
-            variant='primary'
-            onClick={() => invokePromise(ClientOperation.CreatePasskey)}
-          />
-        </Settings.Item>
-        <Settings.Item title={t('create-recovery-code.label')} description={t('create-recovery-code.description')}>
-          <IconButton
-            label={t('create-recovery-code.label')}
-            icon='ph--receipt--duotone'
-            variant='default'
-            onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}
-          />
-        </Settings.Item>
-      </Settings.Section>
-      <Settings.Section title={t('credentials-list.label')}>
-        {recoveryCredentials.length < 1 ? (
-          <Message.Root valence='error'>
-            <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>
-            <Message.Content>{t('no-credentials.message')}</Message.Content>
-          </Message.Root>
-        ) : (
-          <List>
-            {recoveryCredentials.map((credential) => (
-              <ListItem.Root key={credential.id?.toHex()}>
-                <ListItem.Endcap>
-                  <Icon icon='ph--key--regular' />
-                </ListItem.Endcap>
-                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
-              </ListItem.Root>
-            ))}
-          </List>
-        )}
-      </Settings.Section>
-    </Settings.Viewport>
+    <Form.Root variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>
+            <Form.Row label={t('create-passkey.label')} description={t('create-passkey.description')}>
+              <IconButton
+                label={t('create-passkey.label')}
+                icon='ph--key--duotone'
+                variant='primary'
+                onClick={() => invokePromise(ClientOperation.CreatePasskey)}
+              />
+            </Form.Row>
+            <Form.Row label={t('create-recovery-code.label')} description={t('create-recovery-code.description')}>
+              <IconButton
+                label={t('create-recovery-code.label')}
+                icon='ph--receipt--duotone'
+                variant='default'
+                onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}
+              />
+            </Form.Row>
+          </Form.Section>
+          <Form.Section title={t('credentials-list.label')}>
+            {recoveryCredentials.length < 1 ? (
+              <Message.Root valence='error'>
+                <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>
+                <Message.Content>{t('no-credentials.message')}</Message.Content>
+              </Message.Root>
+            ) : (
+              <Listbox.Root>
+                <Listbox.Content classNames='gap-1'>
+                  {recoveryCredentials.map((credential, index) => (
+                    <Listbox.Item
+                      key={credential.id?.toHex() ?? index}
+                      id={credential.id?.toHex() ?? `${index}`}
+                      classNames='gap-2'
+                    >
+                      <Icon icon='ph--key--regular' />
+                      <Listbox.ItemLabel>{credential.issuanceDate.toLocaleString()}</Listbox.ItemLabel>
+                    </Listbox.Item>
+                  ))}
+                </Listbox.Content>
+              </Listbox.Root>
+            )}
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };

package/src/containers/UsageContainer/UsageContainer.tsx

@@ -9,39 +9,40 @@ 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 { useHubHttpClient } from '../../hooks';
 import { UsageView, type UsageViewState } from './UsageView';
 
+/** State + payload kept together so `ready` always carries data (mirrors the discriminated `UsageViewProps`). */
+type UsageFetchState = { state: Exclude<UsageViewState, 'ready'> } | { state: 'ready'; data: GetProfileUsageResponse };
+
 /**
  * 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 [fetchState, setFetchState] = useState<UsageFetchState>({ state: 'loading' });
   const [lastUpdated, setLastUpdated] = useState<number | undefined>();
   const [refreshCount, setRefreshCount] = useState(0);
 
   useAsyncEffect(async () => {
     if (!hubHttp) {
-      setState('unavailable');
+      setFetchState({ state: 'unavailable' });
       return;
     }
-    // Keep prior data visible while refetching; only show the skeleton on first load.
-    setState((previous) => (previous === 'ready' ? previous : 'loading'));
+    // Keep prior data visible while refetching; only show the loading state on first load.
+    setFetchState((previous) => (previous.state === 'ready' ? previous : { state: 'loading' }));
     try {
       const result = await hubHttp.getProfileUsage(new Context());
-      setData(result);
+      setFetchState({ state: 'ready', data: result });
       setLastUpdated(Date.now());
-      setState('ready');
     } catch (err) {
       log.catch(err);
-      setState('error');
+      setFetchState({ state: 'error' });
     }
   }, [hubHttp, refreshCount]);
 
   const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);
 
-  return <UsageView state={state} data={data} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;
+  return <UsageView {...fetchState} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;
 };