@dxos/plugin-debug 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/capabilities/react-surface.tsx

@@ -2,14 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { Surface, useOperationInvoker, useSettingsState } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation, RootCollectionAnnotation, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { Surface, useAtomCapability, useOperationInvoker, useSettingsState } from '@dxos/app-framework/ui';
+import { AppAnnotation, AppCapabilities, LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { AppSurface, useActiveSpace } from '@dxos/app-toolkit/ui';
+import { EDGE_SERVICE_DEFAULTS, EdgeServiceName } from '@dxos/config';
 import {
   AutomergePanel,
   ConfigPanel,
@@ -37,19 +39,22 @@ import {
   TestingPanel,
   WorkflowPanel,
 } from '@dxos/devtools';
-import { Annotation, Collection, Feed, Obj } from '@dxos/echo';
+import { Annotation, Collection, Entity, Feed, Filter, Obj, Type } from '@dxos/echo';
+import { HiddenAnnotation } from '@dxos/echo/Annotation';
 import { log } from '@dxos/log';
 import { type IdbLogStore } from '@dxos/log-store-idb';
 import { type Graph } from '@dxos/plugin-graph';
 import { ScriptOperation } from '@dxos/plugin-script';
-import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities, SpaceOperation } from '@dxos/plugin-space';
+import { useClient } from '@dxos/react-client';
 import { type Space, SpaceState, isSpace } from '@dxos/react-client/echo';
 import { ToolsExplorer } from '@dxos/react-ui-introspect';
+import { Position } from '@dxos/util';
 
-import { DebugSettings } from '#components';
 import {
   DebugGraph,
   DebugObjectPanel,
+  DebugSettings,
   DebugSpaceObjectsPanel,
   DebugStatus,
   DevtoolsOverviewContainer,
@@ -58,10 +63,9 @@ import {
   Wireframe,
 } from '#containers';
 import { meta } from '#meta';
-import { DebugCapabilities, type Settings, Devtools } from '#types';
+import { DebugCapabilities, Devtools, type Settings } from '#types';
 
-// TODO(burdon): Move to config.
-const MCP_SERVER_URL = 'https://introspect-service-labs.dxos.workers.dev/mcp';
+const MCP_SERVER_URL = EDGE_SERVICE_DEFAULTS[EdgeServiceName.Introspect];
 
 type SpaceDebug = {
   type: string;
@@ -73,7 +77,8 @@ type GraphDebug = {
   root: string;
 };
 
-const isSpaceDebug = (data: any): data is SpaceDebug => data?.type === `${meta.id}.space` && isSpace(data.space);
+const isSpaceDebug = (data: any): data is SpaceDebug =>
+  data?.type === `${meta.profile.key}.space` && isSpace(data.space);
 const isGraphDebug = (data: any): data is GraphDebug => {
   const graph = data?.graph;
   return (
@@ -81,6 +86,46 @@ const isGraphDebug = (data: any): data is GraphDebug => {
   );
 };
 
+/** Returns `onOpen` and `canOpen` for the ObjectsTree "Open" action. */
+const useObjectOpenAction = (invokePromise: ReturnType<typeof useOperationInvoker>['invokePromise']) => {
+  const client = useClient();
+  const spaceSettings = useAtomCapability(SpaceCapabilities.Settings);
+  const showHidden = spaceSettings?.showHidden ?? false;
+
+  const allTypes = useAtomValue(useMemo(() => client.graph.registry.query(Filter.type(Type.Type)).atom, [client]));
+
+  const hiddenTypenames = useMemo(() => {
+    const result = new Set<string>();
+    for (const typeEntity of allTypes) {
+      const schema = Type.getSchema(typeEntity);
+      if (HiddenAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+        result.add(Type.getTypename(typeEntity));
+      }
+    }
+    return result;
+  }, [allTypes]);
+
+  const onOpen = useCallback(
+    (object: Obj.Unknown) => {
+      void invokePromise(LayoutOperation.Open, { subject: [Paths.getObjectPathFromObject(object)] });
+    },
+    [invokePromise],
+  );
+
+  const canOpen = useCallback(
+    (entity: Entity.Snapshot) => {
+      if (showHidden) {
+        return true;
+      }
+      const typename = Entity.getTypename(entity);
+      return !hiddenTypenames.has(typename ?? '');
+    },
+    [showHidden, hiddenTypenames],
+  );
+
+  return { onOpen, canOpen };
+};
+
 type ReactSurfaceOptions = {
   logStore?: IdbLogStore;
 };
@@ -95,7 +140,7 @@ export default Capability.makeModule(
     return Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'pluginSettings',
-        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.profile.key),
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
           return (
@@ -110,8 +155,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'space',
-        role: 'article',
-        filter: (data): data is { subject: SpaceDebug } => isSpaceDebug(data.subject),
+        filter: AppSurface.subject(AppSurface.Article, isSpaceDebug),
         component: ({ role, data }) => {
           const { invokePromise } = useOperationInvoker();
 
@@ -123,8 +167,9 @@ export default Capability.makeModule(
 
               const collection =
                 data.subject.space.state.get() === SpaceState.SPACE_READY &&
-                Annotation.get(data.subject.space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined)
-                  ?.target;
+                Annotation.get(data.subject.space.properties, AppAnnotation.RootCollectionAnnotation).pipe(
+                  Option.getOrUndefined,
+                )?.target;
               if (!Obj.instanceOf(Collection.Collection, collection)) {
                 return;
               }
@@ -144,8 +189,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'appGraph',
-        role: 'article',
-        filter: (data): data is { subject: GraphDebug } => isGraphDebug(data.subject),
+        filter: AppSurface.subject(AppSurface.Article, isGraphDebug),
         component: ({ data }) => <DebugGraph graph={data.subject.graph} root={data.subject.root} />,
       }),
       Surface.create({
@@ -161,12 +205,17 @@ export default Capability.makeModule(
       Surface.create({
         id: 'wireframe',
         // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
-        role: ['article', 'section'],
-        position: 'first',
-        filter: (data): data is { subject: Obj.Unknown } => {
-          const settings = registry.get(settingsAtom);
-          return Obj.isObject(data.subject) && !!settings.wireframe;
-        },
+        filter: AppSurface.oneOf(
+          AppSurface.subject(AppSurface.Article, (value): value is Obj.Unknown => {
+            const settings = registry.get(settingsAtom);
+            return Obj.isObject(value) && !!settings.wireframe;
+          }),
+          AppSurface.subject(AppSurface.Section, (value): value is Obj.Unknown => {
+            const settings = registry.get(settingsAtom);
+            return Obj.isObject(value) && !!settings.wireframe;
+          }),
+        ),
+        position: Position.first,
         component: ({ data, role, name }) => (
           <Wireframe label={`${role}:${name}`} object={data.subject} classNames='row-span-2 overflow-hidden' />
         ),
@@ -177,33 +226,36 @@ export default Capability.makeModule(
           AppSurface.literal(AppSurface.Article, 'debug'),
           AppSurface.companion(AppSurface.Article),
         ),
-        component: ({ role, data }) => <DebugObjectPanel role={role} companionTo={data.companionTo} />,
+        component: ({ role, data }) => {
+          const { invokePromise } = useOperationInvoker();
+          const { onOpen, canOpen } = useObjectOpenAction(invokePromise);
+          return <DebugObjectPanel role={role} companionTo={data.companionTo} onOpen={onOpen} canOpen={canOpen} />;
+        },
       }),
       Surface.create({
         id: 'devtoolsOverview',
-        filter: AppSurface.literal(Surface.makeType<{ subject: string }>('deck-companion--devtools'), 'devtools'),
+        filter: Surface.makeFilter(AppSurface.deckCompanion('devtools')),
         component: () => <DevtoolsOverviewContainer />,
       }),
       Surface.create({
         id: 'spaceObjects',
-        filter: AppSurface.literal(
-          Surface.makeType<{ subject: string }>('deck-companion--space-objects'),
-          'space-objects',
-        ),
+        filter: Surface.makeFilter(AppSurface.deckCompanion('spaceObjects')),
         component: () => {
           const space = useActiveSpace();
+          const { invokePromise } = useOperationInvoker();
+          const { onOpen, canOpen } = useObjectOpenAction(invokePromise);
           if (!space) {
             return null;
           }
 
-          return <DebugSpaceObjectsPanel space={space} />;
+          return <DebugSpaceObjectsPanel space={space} onOpen={onOpen} canOpen={canOpen} />;
         },
       }),
 
       Surface.create({
         id: 'debugStatus',
-        role: 'status-indicator',
-        position: 'first',
+        filter: Surface.makeFilter(AppSurface.StatusIndicator),
+        position: Position.first,
         component: () => <DebugStatus />,
       }),
 
@@ -438,7 +490,7 @@ export default Capability.makeModule(
               log.info('script created', { result: createResult });
               if (createResult.data?.object) {
                 await invokePromise(LayoutOperation.Open, {
-                  subject: [getObjectPathFromObject(createResult.data.object)],
+                  subject: [Paths.getObjectPathFromObject(createResult.data.object)],
                 });
               }
             },

package/src/capabilities/settings.ts

@@ -14,7 +14,7 @@ import { DebugCapabilities, Settings } from '#types';
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
-      key: meta.id,
+      key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({}),
     });
@@ -22,7 +22,7 @@ export default Capability.makeModule(() =>
     return [
       Capability.contributes(DebugCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
-        prefix: meta.id,
+        prefix: meta.profile.key,
         schema: Settings.Settings,
         atom: settingsAtom,
       }),

package/src/components/SpaceGenerator/presets.ts

@@ -4,8 +4,8 @@
 
 import * as Schema from 'effect/Schema';
 
-import { AgentPrompt, WebSearchBlueprint } from '@dxos/assistant-toolkit';
-import { Routine, Trigger, Operation } from '@dxos/compute';
+import { RunInstructions, WebSearchSkill } from '@dxos/assistant-toolkit';
+import { Instructions, Operation, Trigger } from '@dxos/compute';
 import { type ComputeGraphModel, NODE_INPUT } from '@dxos/conductor';
 import { Feed, Filter, JsonSchema, Key, Obj, Query, type QueryAST, Ref, Scope, Tag } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
@@ -135,7 +135,7 @@ export const generator = () => ({
             Trigger.make({
               enabled: true,
               spec: Trigger.specTimer('* * * * *'), // Every minute.
-              function: Ref.make(Operation.serialize(InboxOperation.GoogleMailSync)),
+              runnable: Ref.make(Operation.serialize(InboxOperation.GoogleMailSync)),
               input: {
                 mailbox: Ref.make(mailbox),
               },
@@ -143,22 +143,18 @@ export const generator = () => ({
           );
 
           const researchPrompt = space.db.add(
-            Routine.make({
+            Instructions.make({
               name: 'Research',
               description: 'Research organization',
-              input: Schema.Struct({
-                org: Schema.Any,
-              }),
-              output: Schema.Any,
 
               // TODO(dmaretskyi): This mocks research (returns pre-baked result), the actual research might take compute minutes.
               // Remove the mock prompt to do the actual research.
-              instructions: trim`
+              text: trim`
                 Research the organization provided as input.
                 Create a research note for it at the end.
                 NOTE: Do mocked reseach (set mockSearch to true).
               `,
-              blueprints: [Ref.make(WebSearchBlueprint.make())],
+              skills: [Ref.make(WebSearchSkill.make())],
             }),
           );
 
@@ -166,9 +162,9 @@ export const generator = () => ({
             Trigger.make({
               enabled: true,
               spec: Trigger.specSubscription(organizationsQuery),
-              function: Ref.make(Operation.serialize(AgentPrompt)),
+              runnable: Ref.make(Operation.serialize(RunInstructions)),
               input: {
-                prompt: Ref.make(researchPrompt),
+                instructions: Ref.make(researchPrompt),
                 input: '{{event.subject}}',
               },
             }),
@@ -790,7 +786,8 @@ const attachTrigger = (functionTrigger: Trigger.Trigger | undefined, computeMode
   invariant(functionTrigger);
   const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
   Obj.update(functionTrigger, (functionTrigger) => {
-    functionTrigger.function = Ref.make(computeModel.root);
+    // TODO(wittjosiah): Widen Runnable union to include ComputeGraph and remove cast.
+    functionTrigger.runnable = Ref.make(computeModel.root) as any;
     functionTrigger.inputNodeId = inputNode.id;
   });
 };

package/src/components/index.ts

@@ -2,9 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
-export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
-
 export * from './SchemaTable';
 export * from './SpaceGenerator';

package/src/containers/DebugObjectPanel/DebugObjectPanel.tsx

@@ -6,7 +6,7 @@ import React, { useMemo, useState } from 'react';
 
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { ObjectsTree } from '@dxos/devtools';
-import { Filter, Json, Obj, Query } from '@dxos/echo';
+import { type Entity, Filter, Json, Obj, Query } from '@dxos/echo';
 import type { EntityId } from '@dxos/keys';
 import { useQuery } from '@dxos/react-client/echo';
 import { Clipboard, Input, Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
@@ -16,9 +16,12 @@ import { mx } from '@dxos/ui-theme';
 export type DebugObjectPanelProps = Pick<
   AppSurface.ObjectArticleProps<Obj.Unknown, {}, Obj.Unknown>,
   'role' | 'companionTo'
->;
+> & {
+  onOpen?: (object: Obj.Unknown) => void;
+  canOpen?: (entity: Entity.Snapshot) => boolean;
+};
 
-export const DebugObjectPanel = ({ role, companionTo }: DebugObjectPanelProps) => {
+export const DebugObjectPanel = ({ role, companionTo, onOpen, canOpen }: DebugObjectPanelProps) => {
   const db = Obj.getDatabase(companionTo);
   const [selectedId, setSelectedId] = useState<EntityId | null>(null);
   const [depth, setDepth] = useState(0);
@@ -39,7 +42,13 @@ export const DebugObjectPanel = ({ role, companionTo }: DebugObjectPanelProps) =
             {db && (
               <ScrollArea.Root>
                 <ScrollArea.Viewport>
-                  <ObjectsTree db={db} root={companionTo} onSelect={(entity) => setSelectedId(entity.id)} />
+                  <ObjectsTree
+                    db={db}
+                    root={companionTo}
+                    onSelect={(entity) => setSelectedId(entity.id)}
+                    onOpen={onOpen}
+                    canOpen={canOpen}
+                  />
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             )}

package/src/{components → containers}/DebugSettings/DebugSettings.stories.tsx

@@ -12,7 +12,7 @@ import { translations } from '#translations';
 import { DebugSettings } from './DebugSettings';
 
 const meta = {
-  title: 'plugins/plugin-debug/components/DebugSettings',
+  title: 'plugins/plugin-debug/containers/DebugSettings',
   component: DebugSettings,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
   tags: ['settings'],

package/src/{components → containers}/DebugSettings/DebugSettings.tsx

@@ -4,19 +4,19 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { AppCapabilities, getPersonalSpace } from '@dxos/app-toolkit';
+import { AppCapabilities, AppSpace } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { type IdbLogStore } from '@dxos/log-store-idb';
 import { useClient } from '@dxos/react-client';
 import { IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
-import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 import { TRACE_ALL_KEY } from '@dxos/tracing';
 import { setDeep } from '@dxos/util';
 
 import { meta } from '#meta';
-import { type Settings } from '#types';
+import { Settings } from '#types';
 
 type Toast = {
   title: string;
@@ -28,7 +28,7 @@ const StorageAdapters = {
   idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
 } as const;
 
-export type DebugSettingsProps = AppSurface.SettingsArticleProps<
+export type DebugSettingsProps = AppSurface.SettingsProps<
   Settings.Settings,
   {
     logStore: IdbLogStore;
@@ -37,7 +37,7 @@ export type DebugSettingsProps = AppSurface.SettingsArticleProps<
 >;
 
 export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }: DebugSettingsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [toast, setToast] = useState<Toast>();
   const download = useFileDownload();
   const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
@@ -65,7 +65,7 @@ export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }
     download(file, fileName);
 
     if (onUpload) {
-      const personalSpace = getPersonalSpace(client);
+      const personalSpace = AppSpace.getPersonalSpace(client);
       if (!personalSpace) {
         log.error('no personal space available for upload');
         return;
@@ -152,100 +152,102 @@ export const DebugSettings = ({ settings, onSettingsChange, logStore, onUpload }
   );
 
   return (
-    <SettingsForm.Viewport>
-      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
-        <SettingsForm.Item title={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.wireframe}
-            onCheckedChange={handleWireframeChange}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item title={t('settings.trace-all.label')} description={t('settings.trace-all.description')}>
-          <Input.Switch disabled={!onSettingsChange} checked={traceAll} onCheckedChange={handleTraceAllChange} />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.tracing-panel.label')}
-          description={t('settings.tracing-panel.description')}
-        >
-          <IconButton
-            icon='ph--arrow-square-out--regular'
-            iconOnly
-            label={t('settings.tracing-panel.label')}
-            onClick={handleOpenTracingPanel}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.download-diagnostics.label')}
-          description={t('settings.download-diagnostics.description')}
-        >
-          <IconButton
-            icon='ph--download-simple--regular'
-            iconOnly
-            label={t('settings.download-diagnostics.label')}
-            onClick={handleDownload}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.download-logs.label')}
-          description={t('settings.download-logs.description')}
-        >
-          <IconButton
-            icon='ph--download-simple--regular'
-            iconOnly
-            label={t('settings.download-logs.label')}
-            onClick={handleDownloadLogs}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item title={t('settings.repair.label')} description={t('settings.repair.description')}>
-          <IconButton
-            icon='ph--first-aid-kit--regular'
-            iconOnly
-            label={t('settings.repair.label')}
-            onClick={handleRepair}
-          />
-        </SettingsForm.Item>
+    <Form.Root schema={Settings.Settings} values={settings} variant='settings' readonly={!onSettingsChange}>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={meta.profile.name ?? meta.profile.key}>
+            <Form.Row label={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
+              <Input.Root>
+                <Input.Switch
+                  disabled={!onSettingsChange}
+                  checked={settings.wireframe}
+                  onCheckedChange={handleWireframeChange}
+                />
+              </Input.Root>
+            </Form.Row>
+            <Form.Row label={t('settings.trace-all.label')} description={t('settings.trace-all.description')}>
+              <Input.Root>
+                <Input.Switch disabled={!onSettingsChange} checked={traceAll} onCheckedChange={handleTraceAllChange} />
+              </Input.Root>
+            </Form.Row>
+            <Form.Row label={t('settings.tracing-panel.label')} description={t('settings.tracing-panel.description')}>
+              <IconButton
+                icon='ph--arrow-square-out--regular'
+                iconOnly
+                label={t('settings.tracing-panel.label')}
+                onClick={handleOpenTracingPanel}
+              />
+            </Form.Row>
+            <Form.Row
+              label={t('settings.download-diagnostics.label')}
+              description={t('settings.download-diagnostics.description')}
+            >
+              <IconButton
+                icon='ph--download-simple--regular'
+                iconOnly
+                label={t('settings.download-diagnostics.label')}
+                onClick={handleDownload}
+              />
+            </Form.Row>
+            <Form.Row label={t('settings.download-logs.label')} description={t('settings.download-logs.description')}>
+              <IconButton
+                icon='ph--download-simple--regular'
+                iconOnly
+                label={t('settings.download-logs.label')}
+                onClick={handleDownloadLogs}
+              />
+            </Form.Row>
+            <Form.Row label={t('settings.repair.label')} description={t('settings.repair.description')}>
+              <IconButton
+                icon='ph--first-aid-kit--regular'
+                iconOnly
+                label={t('settings.repair.label')}
+                onClick={handleRepair}
+              />
+            </Form.Row>
 
-        {/* TODO(burdon): Move to layout? */}
-        {toast && (
-          <Toast.Root>
-            <Toast.Title icon='ph--gift--duotone'>
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Root>
-        )}
+            {/* TODO(burdon): Move to layout? */}
+            {toast && (
+              <Toast.Root>
+                <Toast.Title icon='ph--gift--duotone'>
+                  <span>{toast.title}</span>
+                </Toast.Title>
+                {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+              </Toast.Root>
+            )}
 
-        <SettingsForm.Item
-          title={t('settings.choose-storage-adaptor.label')}
-          description={t('settings.choose-storage-adaptor.description')}
-        >
-          <Select.Root
-            disabled={!onSettingsChange}
-            value={
-              Object.entries(StorageAdapters).find(
-                ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-              )?.[0]
-            }
-            onValueChange={handleStorageAdapterChange}
-          >
-            <Select.TriggerButton disabled={!onSettingsChange} 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>
-        </SettingsForm.Item>
-      </SettingsForm.Section>
-    </SettingsForm.Viewport>
+            <Form.Row
+              label={t('settings.choose-storage-adaptor.label')}
+              description={t('settings.choose-storage-adaptor.description')}
+            >
+              <Select.Root
+                disabled={!onSettingsChange}
+                value={
+                  Object.entries(StorageAdapters).find(
+                    ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+                  )?.[0]
+                }
+                onValueChange={handleStorageAdapterChange}
+              >
+                <Select.TriggerButton disabled={!onSettingsChange} 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>
+            </Form.Row>
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };