@dxos/plugin-observability 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-observability",
-  "version": "0.8.4-main.3a94e84",
+  "version": "0.8.4-main.3c1ae3b",
   "description": "DXOS app framework plugin for hooking up app observability",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
@@ -34,44 +36,43 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
-    "effect": "3.17.0",
+    "@preact/signals-core": "^1.12.1",
+    "effect": "3.18.3",
     "localforage": "^1.10.0",
-    "@dxos/app-framework": "0.8.4-main.3a94e84",
-    "@dxos/context": "0.8.4-main.3a94e84",
-    "@dxos/async": "0.8.4-main.3a94e84",
-    "@dxos/echo": "0.8.4-main.3a94e84",
-    "@dxos/echo-schema": "0.8.4-main.3a94e84",
-    "@dxos/invariant": "0.8.4-main.3a94e84",
-    "@dxos/live-object": "0.8.4-main.3a94e84",
-    "@dxos/local-storage": "0.8.4-main.3a94e84",
-    "@dxos/log": "0.8.4-main.3a94e84",
-    "@dxos/protocols": "0.8.4-main.3a94e84",
-    "@dxos/plugin-graph": "0.8.4-main.3a94e84",
-    "@dxos/react-client": "0.8.4-main.3a94e84",
-    "@dxos/react-ui-form": "0.8.4-main.3a94e84",
-    "@dxos/observability": "0.8.4-main.3a94e84",
-    "@dxos/util": "0.8.4-main.3a94e84",
-    "@dxos/react-ui-stack": "0.8.4-main.3a94e84"
+    "@dxos/app-framework": "0.8.4-main.3c1ae3b",
+    "@dxos/async": "0.8.4-main.3c1ae3b",
+    "@dxos/context": "0.8.4-main.3c1ae3b",
+    "@dxos/invariant": "0.8.4-main.3c1ae3b",
+    "@dxos/live-object": "0.8.4-main.3c1ae3b",
+    "@dxos/echo": "0.8.4-main.3c1ae3b",
+    "@dxos/local-storage": "0.8.4-main.3c1ae3b",
+    "@dxos/log": "0.8.4-main.3c1ae3b",
+    "@dxos/observability": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-graph": "0.8.4-main.3c1ae3b",
+    "@dxos/protocols": "0.8.4-main.3c1ae3b",
+    "@dxos/react-client": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-form": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-stack": "0.8.4-main.3c1ae3b",
+    "@dxos/util": "0.8.4-main.3c1ae3b"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
-    "@types/react": "~18.2.0",
-    "react": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.3a94e84",
-    "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
-    "@dxos/storybook-utils": "0.8.4-main.3a94e84"
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "react": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.3a94e84",
-    "@dxos/react-ui-theme": "0.8.4-main.3a94e84"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
   },
   "publishConfig": {
     "access": "public"

package/src/ObservabilityPlugin.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { allOf, Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, Events, allOf, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 import { type Observability } from '@dxos/observability';
 
 import {
@@ -14,54 +14,57 @@ import {
   ObservabilityState,
   ReactSurface,
 } from './capabilities';
-import { ObservabilityEvents, ClientReadyEvent } from './events';
+import { ClientReadyEvent, ObservabilityEvents } from './events';
 import { meta } from './meta';
 import { translations } from './translations';
 
-export const ObservabilityPlugin = (options: { namespace: string; observability: () => Promise<Observability> }) =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/observability`,
-      activatesOn: Events.Startup,
-      activate: async () => contributes(ObservabilityCapabilities.Observability, await options.observability()),
-    }),
-    defineModule({
-      id: `${meta.id}/module/settings`,
-      activatesOn: Events.SetupSettings,
-      activate: ObservabilitySettings,
-    }),
-    defineModule({
-      id: `${meta.id}/module/state`,
-      activatesOn: Events.Startup,
-      activatesAfter: [ObservabilityEvents.StateReady],
-      activate: () => ObservabilityState({ namespace: options.namespace }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: (context) => IntentResolver({ context, namespace: options.namespace }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-    defineModule({
-      id: `${meta.id}/module/client-ready`,
-      activatesOn: allOf(Events.DispatcherReady, ObservabilityEvents.StateReady, ClientReadyEvent),
-      activate: async (context) => {
-        const observability = await options.observability();
-        return ClientReady({ context, observability, namespace: options.namespace });
-      },
-    }),
-  ]);
+export type ObservabilityPluginOptions = {
+  namespace: string;
+  observability: () => Promise<Observability>;
+};
+
+export const ObservabilityPlugin = definePlugin<ObservabilityPluginOptions>(meta, ({ namespace, observability }) => [
+  defineModule({
+    id: `${meta.id}/module/observability`,
+    activatesOn: Events.Startup,
+    activate: async () => contributes(ObservabilityCapabilities.Observability, await observability()),
+  }),
+  defineModule({
+    id: `${meta.id}/module/settings`,
+    activatesOn: Events.SetupSettings,
+    activate: ObservabilitySettings,
+  }),
+  defineModule({
+    id: `${meta.id}/module/state`,
+    activatesOn: Events.Startup,
+    activatesAfter: [ObservabilityEvents.StateReady],
+    activate: () => ObservabilityState({ namespace }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: (context) => IntentResolver({ context, namespace }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+  defineModule({
+    id: `${meta.id}/module/client-ready`,
+    activatesOn: allOf(Events.DispatcherReady, ObservabilityEvents.StateReady, ClientReadyEvent),
+    activate: async (context) => {
+      return ClientReady({ context, observability: await observability(), namespace });
+    },
+  }),
+]);

package/src/capabilities/app-graph-builder.ts

@@ -2,25 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
-import { createExtension, ROOT_ID } from '@dxos/plugin-graph';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
+import { ROOT_ID, createExtension } from '@dxos/plugin-graph';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 // NOTE: Copied from @dxos/plugin-deck to break circular dependency.
 const ATTENDABLE_PATH_SEPARATOR = '~';
+
 const DECK_COMPANION_TYPE = 'dxos.org/plugin/deck/deck-companion';
 
-export default (context: PluginContext) =>
+export default (_context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${OBSERVABILITY_PLUGIN}/help`,
+      id: `${meta.id}/help`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -30,7 +32,7 @@ export default (context: PluginContext) =>
                   type: DECK_COMPANION_TYPE,
                   data: null,
                   properties: {
-                    label: ['help label', { ns: OBSERVABILITY_PLUGIN }],
+                    label: ['help label', { ns: meta.id }],
                     icon: 'ph--question--regular',
                     disposition: 'hidden',
                     position: 'hoist',

package/src/capabilities/capabilities.ts

@@ -6,17 +6,18 @@ import { defineCapability } from '@dxos/app-framework';
 import { type Client } from '@dxos/client';
 import { type Observability } from '@dxos/observability';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export namespace ObservabilityCapabilities {
   export type State = {
     group?: string;
     notified?: boolean;
   };
-  export const State = defineCapability<State>(`${OBSERVABILITY_PLUGIN}/capability/state`);
+  export const State = defineCapability<State>(`${meta.id}/capability/state`);
 
-  export const Observability = defineCapability<Observability>(`${OBSERVABILITY_PLUGIN}/capability/observability`);
+  export const Observability = defineCapability<Observability>(`${meta.id}/capability/observability`);
 }
 
 // NOTE: This is cloned from the client plugin to avoid circular dependencies.
+// TODO(burdon): Figure out how to share defs.
 export const ClientCapability = defineCapability<Client>('dxos.org/plugin/client/capability/client');

package/src/capabilities/client-ready.ts

@@ -4,18 +4,19 @@
 
 import {
   Capabilities,
-  contributes,
-  createIntent,
   LayoutAction,
-  SettingsAction,
   type PluginContext,
+  SettingsAction,
+  contributes,
+  createIntent,
 } from '@dxos/app-framework';
-import { setupTelemetryListeners, type Observability } from '@dxos/observability';
+import { type Observability, setupTelemetryListeners } from '@dxos/observability';
 
-import { ClientCapability, ObservabilityCapabilities } from './capabilities';
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ObservabilityAction } from '../types';
 
+import { ClientCapability, ObservabilityCapabilities } from './capabilities';
+
 type ClientReadyOptions = {
   context: PluginContext;
   namespace: string;
@@ -37,15 +38,15 @@ export default async ({ context, namespace, observability }: ClientReadyOptions)
         createIntent(LayoutAction.AddToast, {
           part: 'toast',
           subject: {
-            id: `${OBSERVABILITY_PLUGIN}/notice`,
-            title: ['observability toast label', { ns: OBSERVABILITY_PLUGIN }],
-            description: ['observability toast description', { ns: OBSERVABILITY_PLUGIN }],
+            id: `${meta.id}/notice`,
+            title: ['observability toast label', { ns: meta.id }],
+            description: ['observability toast description', { ns: meta.id }],
             duration: Infinity,
             icon: 'ph--info--regular',
-            actionLabel: ['observability toast action label', { ns: OBSERVABILITY_PLUGIN }],
-            actionAlt: ['observability toast action alt', { ns: OBSERVABILITY_PLUGIN }],
-            closeLabel: ['observability toast close label', { ns: OBSERVABILITY_PLUGIN }],
-            onAction: () => dispatch(createIntent(SettingsAction.Open, { plugin: OBSERVABILITY_PLUGIN })),
+            actionLabel: ['observability toast action label', { ns: meta.id }],
+            actionAlt: ['observability toast action alt', { ns: meta.id }],
+            closeLabel: ['observability toast close label', { ns: meta.id }],
+            onAction: () => dispatch(createIntent(SettingsAction.Open, { plugin: meta.id })),
           },
         }),
       );

package/src/capabilities/intent-resolver.ts

@@ -2,15 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createResolver, IntentAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, IntentAction, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { getTelemetryIdentity, storeObservabilityDisabled } from '@dxos/observability';
 
-import { ClientCapability, ObservabilityCapabilities } from './capabilities';
 import { type ObservabilitySettingsProps } from '../components';
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ObservabilityAction } from '../types';
 
+import { ClientCapability, ObservabilityCapabilities } from './capabilities';
+
 export default ({ context, namespace }: { context: PluginContext; namespace: string }) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
@@ -26,7 +27,7 @@ export default ({ context, namespace }: { context: PluginContext; namespace: str
         const observability = context.getCapability(ObservabilityCapabilities.Observability);
         const settings = context
           .getCapability(Capabilities.SettingsStore)
-          .getStore<ObservabilitySettingsProps>(OBSERVABILITY_PLUGIN)!.value;
+          .getStore<ObservabilitySettingsProps>(meta.id)!.value;
         settings.enabled = state ?? !settings.enabled;
         observability.track({
           ...getTelemetryIdentity(client),

package/src/capabilities/react-surface.tsx

@@ -4,23 +4,23 @@
 
 import React from 'react';
 
-import { contributes, Capabilities, createSurface } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { SettingsStore } from '@dxos/local-storage';
 
 import { HelpContainer, ObservabilitySettings, type ObservabilitySettingsProps } from '../components';
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: OBSERVABILITY_PLUGIN,
+      id: meta.id,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<ObservabilitySettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === OBSERVABILITY_PLUGIN,
+        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <ObservabilitySettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${OBSERVABILITY_PLUGIN}/help`,
+      id: `${meta.id}/help`,
       role: 'deck-companion--help',
       component: () => <HelpContainer />,
     }),

package/src/capabilities/state.ts

@@ -6,11 +6,12 @@ import { contributes } from '@dxos/app-framework';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { getObservabilityGroup } from '@dxos/observability';
 
+import { meta } from '../meta';
+
 import { ObservabilityCapabilities } from './capabilities';
-import { OBSERVABILITY_PLUGIN } from '../meta';
 
 export default async ({ namespace }: { namespace: string }) => {
-  const state = new LocalStorageStore<ObservabilityCapabilities.State>(OBSERVABILITY_PLUGIN);
+  const state = new LocalStorageStore<ObservabilityCapabilities.State>(meta.id);
 
   state.prop({ key: 'notified', type: LocalStorageStore.bool({ allowUndefined: true }) });
 

package/src/components/FeedbackForm.stories.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../translations';
+
+import { FeedbackForm } from './FeedbackForm';
+
+const meta = {
+  title: 'plugins/plugin-observability/FeedbackForm',
+  component: FeedbackForm,
+  decorators: [withTheme, withLayout({ container: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof FeedbackForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onSave: (values) => {
+      console.log(values);
+    },
+  },
+};

package/src/components/FeedbackForm.tsx

@@ -2,81 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useRef, useState } from 'react';
+import React from 'react';
 
-import { getSnapshot } from '@dxos/echo-schema';
-import { IconButton, Input, useTranslation } from '@dxos/react-ui';
-import { FormProvider, useFormContext, useInputProps } from '@dxos/react-ui-form';
+import { useTranslation } from '@dxos/react-ui';
+import { Form, type FormRootProps } from '@dxos/react-ui-form';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { UserFeedback } from '../types';
 
-const defaultValues: UserFeedback = { message: '' };
+export type FeedbackFormProps = Pick<FormRootProps<UserFeedback>, 'onSave'>;
 
-const FormContent = () => {
-  const { t } = useTranslation(OBSERVABILITY_PLUGIN);
-  const { handleSave, canSave } = useFormContext<UserFeedback>();
-
-  const messageProps = useInputProps(['message']);
-
-  return (
-    <div role='form' className='p-3 flex flex-col gap-2'>
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={messageProps.getStatus().status}>
-          <Input.Label>{t('feedback text area label')}</Input.Label>
-          <Input.TextArea
-            classNames={'text-sm'}
-            rows={5}
-            cols={30}
-            placeholder={t('feedback text area placeholder')}
-            value={messageProps.getValue() ?? ''}
-            onChange={(e) => messageProps.onValueChange('string', e.target.value)}
-            // TODO(wittjosiah): This aggressively shows validation errors.
-            onBlur={messageProps.onBlur}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{messageProps.getStatus().error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-2'>
-        <IconButton
-          icon='ph--paper-plane-tilt--regular'
-          label={t('send feedback label')}
-          variant='primary'
-          type='submit'
-          classNames='is-full'
-          disabled={!canSave}
-          onClick={handleSave}
-        />
-      </div>
-    </div>
-  );
-};
-
-// TODO(wittjosiah): Use `Form`?
-export const FeedbackForm = ({ onSave }: { onSave: (values: UserFeedback) => void }) => {
-  const formRef = useRef<HTMLDivElement>(null);
-  const [_, update] = useState({});
-  const forceRender = useCallback(() => update({}), [update]);
-
-  const handleSave = useCallback(
-    (values: UserFeedback) => {
-      onSave(values);
-      // TODO(wittjosiah): Force re-render to clear the form.
-      forceRender();
-    },
-    [forceRender, onSave],
-  );
-
-  const initialValues = getSnapshot(defaultValues);
+export const FeedbackForm = ({ onSave }: FeedbackFormProps) => {
+  const { t } = useTranslation(meta.id);
 
   return (
-    <FormProvider formRef={formRef} schema={UserFeedback} initialValues={initialValues} onSave={handleSave}>
-      <div ref={formRef}>
-        <FormContent />
-      </div>
-    </FormProvider>
+    <Form.Root schema={UserFeedback} onSave={onSave}>
+      <Form.Content>
+        <Form.FieldSet />
+        <Form.Submit icon='ph--paper-plane-tilt--regular' label={t('send feedback label')} />
+      </Form.Content>
+    </Form.Root>
   );
 };

package/src/components/HelpContainer.tsx

@@ -2,32 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 import React, { useCallback } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 
-import { FeedbackForm } from './FeedbackForm';
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ObservabilityAction, type UserFeedback } from '../types';
 
+import { FeedbackForm } from './FeedbackForm';
+
 export const HelpContainer = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleSave = useCallback(
     (values: UserFeedback) =>
       dispatch(
-        pipe(
+        Function.pipe(
           createIntent(ObservabilityAction.CaptureUserFeedback, values),
           chain(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
           chain(LayoutAction.AddToast, {
             part: 'toast',
             subject: {
-              id: `${OBSERVABILITY_PLUGIN}/feedback-success`,
+              id: `${meta.id}/feedback-success`,
               icon: 'ph--paper-plane-tilt--regular',
               duration: 3000,
-              title: ['feedback toast label', { ns: OBSERVABILITY_PLUGIN }],
-              description: ['feedback toast description', { ns: OBSERVABILITY_PLUGIN }],
+              title: ['feedback toast label', { ns: meta.id }],
+              description: ['feedback toast description', { ns: meta.id }],
               closeLabel: ['close label', { ns: 'os' }],
             },
           }),

package/src/components/ObservabilitySettings.tsx

@@ -2,14 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { Input, Message, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { ObservabilityAction } from '../types';
 
 export const ObservabilitySettingsSchema = Schema.mutable(
@@ -25,24 +26,24 @@ export const ObservabilitySettingsSchema = Schema.mutable(
 export type ObservabilitySettingsProps = Schema.Schema.Type<typeof ObservabilitySettingsSchema>;
 
 export const ObservabilitySettings = ({ settings }: { settings: ObservabilitySettingsProps }) => {
-  const { t } = useTranslation(OBSERVABILITY_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput
-        label={t('observability enabled label')}
-        secondary={
-          <Message.Root valence='info'>
-            <Message.Content>{t('observability description')}</Message.Content>
-          </Message.Root>
-        }
-      >
-        <Input.Switch
-          checked={settings.enabled}
-          onCheckedChange={(checked) => dispatch(createIntent(ObservabilityAction.Toggle, { state: !!checked }))}
-        />
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <Message.Root valence='info' classNames='container-max-width mbe-cardSpacingBlock'>
+          <Message.Content>{t('observability description')}</Message.Content>
+        </Message.Root>
+        <ControlGroup>
+          <ControlItemInput title={t('observability enabled label')}>
+            <Input.Switch
+              checked={settings.enabled}
+              onCheckedChange={(checked) => dispatch(createIntent(ObservabilityAction.Toggle, { state: !!checked }))}
+            />
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };