@dxos/plugin-debug 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

package/src/capabilities/react-surface.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 import React, { useCallback } from 'react';
 
 import {
@@ -13,9 +13,8 @@ import {
   contributes,
   createIntent,
   createSurface,
-  useCapability,
-  useIntentDispatcher,
 } from '@dxos/app-framework';
+import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
 import {
   AutomergePanel,
   ConfigPanel,
@@ -52,10 +51,10 @@ import { ScriptAction } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { type Space, SpaceState, isSpace, parseId } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
+import { Collection } from '@dxos/schema';
 
 import {
-  DebugApp,
+  DebugGraph,
   DebugObjectPanel,
   DebugSettings,
   DebugStatus,
@@ -63,7 +62,7 @@ import {
   SpaceGenerator,
   Wireframe,
 } from '../components';
-import { DEBUG_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type DebugSettingsProps, Devtools } from '../types';
 
 type SpaceDebug = {
@@ -73,10 +72,11 @@ type SpaceDebug = {
 
 type GraphDebug = {
   graph: Graph;
+  root: string;
 };
 
-const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${DEBUG_PLUGIN}/space` && isSpace(data.space);
-const isGraphDebug = (data: any): data is GraphDebug => data?.graph instanceof Graph;
+const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}/space` && isSpace(data.space);
+const isGraphDebug = (data: any): data is GraphDebug => data?.graph instanceof Graph && typeof data?.root === 'string';
 
 // TODO(wittjosiah): Factor out?
 const useCurrentSpace = () => {
@@ -90,14 +90,14 @@ const useCurrentSpace = () => {
 export default (context: PluginContext) =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${DEBUG_PLUGIN}/plugin-settings`,
+      id: `${meta.id}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<DebugSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === DEBUG_PLUGIN,
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <DebugSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/space`,
+      id: `${meta.id}/space`,
       role: 'article',
       filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
       component: ({ data }) => {
@@ -111,13 +111,18 @@ export default (context: PluginContext) =>
 
             const collection =
               data.subject.space.state.get() === SpaceState.SPACE_READY &&
-              data.subject.space.properties[DataType.Collection.typename]?.target;
-            if (!Obj.instanceOf(DataType.Collection, collection)) {
+              data.subject.space.properties[Collection.Collection.typename]?.target;
+            if (!Obj.instanceOf(Collection.Collection, collection)) {
               return;
             }
 
             objects.forEach((object) => {
-              void dispatch(createIntent(SpaceAction.AddObject, { target: collection, object }));
+              void dispatch(
+                createIntent(SpaceAction.AddObject, {
+                  target: collection,
+                  object,
+                }),
+              );
             });
           },
           [data.subject.space],
@@ -131,19 +136,17 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/graph`,
+      id: `${meta.id}/app-graph`,
       role: 'article',
       filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
-      component: ({ data }) => <DebugApp graph={data.subject.graph} />,
+      component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/wireframe`,
+      id: `${meta.id}/wireframe`,
       role: ['article', 'section'],
       position: 'hoist',
       filter: (data): data is { subject: Obj.Any } => {
-        const settings = context
-          .getCapability(Capabilities.SettingsStore)
-          .getStore<DebugSettingsProps>(DEBUG_PLUGIN)!.value;
+        const settings = context.getCapability(Capabilities.SettingsStore).getStore<DebugSettingsProps>(meta.id)!.value;
         return Obj.isObject(data.subject) && !!settings.wireframe;
       },
       component: ({ data, role }) => (
@@ -151,18 +154,18 @@ export default (context: PluginContext) =>
       ),
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/object-debug`,
+      id: `${meta.id}/object-debug`,
       role: 'article',
       filter: (data): data is { companionTo: Obj.Any } => data.subject === 'debug' && Obj.isObject(data.companionTo),
       component: ({ data }) => <DebugObjectPanel object={data.companionTo} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/devtools-overview`,
+      id: `${meta.id}/devtools-overview`,
       role: 'deck-companion--devtools',
       component: () => <DevtoolsOverviewContainer />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/status`,
+      id: `${meta.id}/status`,
       role: 'status',
       component: () => <DebugStatus />,
     }),
@@ -172,55 +175,55 @@ export default (context: PluginContext) =>
     //
 
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/config`,
+      id: `${meta.id}/client/config`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Config,
       component: () => <ConfigPanel vaultSelector={false} />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/storage`,
+      id: `${meta.id}/client/storage`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Storage,
       component: () => <StoragePanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/logs`,
+      id: `${meta.id}/client/logs`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Logs,
       component: () => <LoggingPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/diagnostics`,
+      id: `${meta.id}/client/diagnostics`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Diagnostics,
       component: () => <DiagnosticsPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/client/tracing`,
+      id: `${meta.id}/client/tracing`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Client.Tracing,
       component: () => <TracingPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/identity`,
+      id: `${meta.id}/halo/identity`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Identity,
       component: () => <IdentityPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/devices`,
+      id: `${meta.id}/halo/devices`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Devices,
       component: () => <DeviceListPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/keyring`,
+      id: `${meta.id}/halo/keyring`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Keyring,
       component: () => <KeyringPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/halo/credentials`,
+      id: `${meta.id}/halo/credentials`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Halo.Credentials,
       component: () => {
@@ -229,34 +232,46 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/spaces`,
+      id: `${meta.id}/echo/spaces`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Spaces,
       component: () => {
         const { dispatchPromise: dispatch } = useIntentDispatcher();
         const handleSelect = useCallback(
-          () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Space] })),
+          () =>
+            dispatch(
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [Devtools.Echo.Space],
+              }),
+            ),
           [dispatch],
         );
         return <SpaceListPanel onSelect={handleSelect} />;
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/space`,
+      id: `${meta.id}/echo/space`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Space,
       component: () => {
         const space = useCurrentSpace();
         const { dispatchPromise: dispatch } = useIntentDispatcher();
         const handleSelect = useCallback(
-          () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [Devtools.Echo.Feeds] })),
+          () =>
+            dispatch(
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [Devtools.Echo.Feeds],
+              }),
+            ),
           [dispatch],
         );
         return <SpaceInfoPanel space={space} onSelectFeed={handleSelect} onSelectPipeline={handleSelect} />;
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/feeds`,
+      id: `${meta.id}/echo/feeds`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Feeds,
       component: () => {
@@ -265,7 +280,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/objects`,
+      id: `${meta.id}/echo/objects`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Objects,
       component: () => {
@@ -274,7 +289,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/schema`,
+      id: `${meta.id}/echo/schema`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Schema,
       component: () => {
@@ -283,7 +298,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/automerge`,
+      id: `${meta.id}/echo/automerge`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Automerge,
       component: () => {
@@ -292,13 +307,13 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/queues`,
+      id: `${meta.id}/echo/queues`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Queues,
       component: () => <QueuesPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/members`,
+      id: `${meta.id}/echo/members`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Members,
       component: () => {
@@ -307,25 +322,25 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/echo/metadata`,
+      id: `${meta.id}/echo/metadata`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Echo.Metadata,
       component: () => <MetadataPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/signal`,
+      id: `${meta.id}/mesh/signal`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Signal,
       component: () => <SignalPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/swarm`,
+      id: `${meta.id}/mesh/swarm`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Swarm,
       component: () => <SwarmPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/mesh/network`,
+      id: `${meta.id}/mesh/network`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Mesh.Network,
       component: () => {
@@ -335,19 +350,19 @@ export default (context: PluginContext) =>
     }),
     // TODO(wittjosiah): Remove?
     // createSurface({
-    //   id: `${DEBUG_PLUGIN}/agent/dashboard`,
+    //   id: `${meta.id}/agent/dashboard`,
     //   role: 'article',
     //   filter: (data): data is any => data.subject === Devtools.Agent.Dashboard,
     //   component: () => <DashboardPanel />,
     // }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/dashboard`,
+      id: `${meta.id}/edge/dashboard`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Dashboard,
       component: () => <EdgeDashboardPanel />,
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/workflows`,
+      id: `${meta.id}/edge/workflows`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Workflows,
       component: () => {
@@ -356,7 +371,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/traces`,
+      id: `${meta.id}/edge/traces`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Traces,
       component: () => {
@@ -365,7 +380,7 @@ export default (context: PluginContext) =>
       },
     }),
     createSurface({
-      id: `${DEBUG_PLUGIN}/edge/testing`,
+      id: `${meta.id}/edge/testing`,
       role: 'article',
       filter: (data): data is any => data.subject === Devtools.Edge.Testing,
       component: () => {
@@ -382,11 +397,17 @@ export default (context: PluginContext) =>
           async (space: Space) => {
             await space.waitUntilReady();
             const result = await dispatch(
-              pipe(createIntent(ScriptAction.Create, { space }), chain(SpaceAction.AddObject, { target: space })),
+              Function.pipe(
+                createIntent(ScriptAction.CreateScript, { space }),
+                chain(SpaceAction.AddObject, { target: space }),
+              ),
             );
             log.info('script created', { result });
             await dispatch(
-              createIntent(LayoutAction.Open, { part: 'main', subject: [`${space.id}:${result.data?.object.id}`] }),
+              createIntent(LayoutAction.Open, {
+                part: 'main',
+                subject: [`${space.id}:${result.data?.object.id}`],
+              }),
             );
           },
           [dispatch],

package/src/components/DebugGraph.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Tree } from '@dxos/devtools';
+import { type Graph } from '@dxos/plugin-graph';
+
+export const DebugGraph: FC<{ graph: Graph; root: string }> = ({ graph, root }) => {
+  return <Tree data={graph.toJSON(root)} />;
+};
+
+export default DebugGraph;

package/src/components/DebugObjectPanel.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { type Obj } from '@dxos/echo';
 import { Clipboard, Input, Toolbar } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 export type DebugObjectPanelProps = {
   object: Obj.Any;
@@ -26,9 +26,7 @@ export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
             <Clipboard.IconButton value={dxn} />
           </Input.Root>
         </Toolbar.Root>
-        <SyntaxHighlighter classNames='flex text-xs' language='json'>
-          {JSON.stringify(object, null, 2)}
-        </SyntaxHighlighter>
+        <Json data={object} />
       </StackItem.Content>
     </Clipboard.Provider>
   );

package/src/components/DebugSettings.tsx

@@ -4,15 +4,16 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapabilities } from '@dxos/app-framework/react';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Button, Icon, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
-import { DEBUG_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type DebugSettingsProps } from '../types';
 
 type Toast = {
@@ -26,7 +27,7 @@ const StorageAdapters = {
 } as const;
 
 export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
-  const { t } = useTranslation(DEBUG_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [toast, setToast] = useState<Toast>();
   const client = useClient();
   const download = useFileDownload();
@@ -46,22 +47,30 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   const handleDownload = async () => {
     const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
+    const file = new Blob([JSON.stringify(data, undefined, 2)], {
+      type: 'text/plain',
+    });
     const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
+      const info = await upload(client.spaces.default, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
       }
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
 
       // TODO(nf): move to IpfsPlugin?
       const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
       void navigator.clipboard.writeText(url);
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
       log.info('diagnostics', { url });
     }
   };
@@ -70,74 +79,94 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     try {
       const info = await client.repair();
       setStorageConfig(await Storage());
-      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
+      handleToast({
+        title: t('settings repair success'),
+        description: JSON.stringify(info, undefined, 2),
+      });
     } catch (err: any) {
-      handleToast({ title: t('settings repair failed'), description: err.message });
+      handleToast({
+        title: t('settings repair failed'),
+        description: err.message,
+      });
     }
   };
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings wireframe')}>
-        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings download diagnostics')}>
-        <Button onClick={handleDownload}>
-          <Icon icon='ph--download-simple--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings repair')}>
-        <Button onClick={handleRepair}>
-          <Icon icon='ph--first-aid-kit--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-
-      {/* TODO(burdon): Move to layout? */}
-      {toast && (
-        <Toast.Root>
-          <Toast.Body>
-            <Toast.Title>
-              <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Body>
-        </Toast.Root>
-      )}
-
-      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-        <Select.Root
-          value={
-            Object.entries(StorageAdapters).find(
-              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-            )?.[0]
-          }
-          onValueChange={(value) => {
-            if (confirm(t('settings storage adapter changed alert'))) {
-              updateConfig(
-                storageConfig,
-                setStorageConfig,
-                ['runtime', 'client', 'storage', 'dataStore'],
-                StorageAdapters[value as keyof typeof StorageAdapters],
-              );
-            }
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings data store label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {Object.keys(StorageAdapters).map((key) => (
-                  <Select.Option key={key} value={key}>
-                    {t(`settings storage adaptor ${key} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings wireframe')}>
+            <Input.Switch
+              checked={settings.wireframe}
+              onCheckedChange={(checked) => (settings.wireframe = !!checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('settings download diagnostics')}>
+            <IconButton
+              icon='ph--download-simple--regular'
+              iconOnly
+              label={t('settings download diagnostics')}
+              onClick={handleDownload}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('settings repair')}>
+            <IconButton
+              icon='ph--first-aid-kit--regular'
+              iconOnly
+              label={t('settings repair')}
+              onClick={handleRepair}
+            />
+          </ControlItemInput>
+
+          {/* TODO(burdon): Move to layout? */}
+          {toast && (
+            <Toast.Root>
+              <Toast.Body>
+                <Toast.Title>
+                  <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
+                  <span>{toast.title}</span>
+                </Toast.Title>
+                {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+              </Toast.Body>
+            </Toast.Root>
+          )}
+
+          <ControlItemInput title={t('settings choose storage adaptor')}>
+            <Select.Root
+              value={
+                Object.entries(StorageAdapters).find(
+                  ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+                )?.[0]
+              }
+              onValueChange={(value) => {
+                if (confirm(t('settings storage adapter changed alert'))) {
+                  updateConfig(
+                    storageConfig,
+                    setStorageConfig,
+                    ['runtime', 'client', 'storage', 'dataStore'],
+                    StorageAdapters[value as keyof typeof StorageAdapters],
+                  );
+                }
+              }}
+            >
+              <Select.TriggerButton placeholder={t('settings data store label')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {Object.keys(StorageAdapters).map((key) => (
+                      <Select.Option key={key} value={key}>
+                        {t(`settings storage adaptor ${key} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };
 

package/src/components/DebugStatus.tsx

@@ -59,7 +59,7 @@ const _timer = (cb: (err?: Error) => void, options?: { min?: number; max?: numbe
 // TODO(burdon): Integrate with Sentry?
 const ErrorIndicator = () => {
   const [, forceUpdate] = useState({});
-  const errorRef = useRef<Error>();
+  const errorRef = useRef<Error>(null);
   useEffect(() => {
     const errorListener = (event: any) => {
       const error: Error = event.error ?? event.reason;
@@ -83,7 +83,7 @@ const ErrorIndicator = () => {
   }, []);
 
   const handleReset = () => {
-    errorRef.current = undefined;
+    errorRef.current = null;
     forceUpdate({});
   };