@dxos/plugin-observability 0.8.4-main.1f223c7 → 0.8.4-main.21d9917

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({ layout: '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,39 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
 import React, { useCallback } from 'react';
 
-import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { osTranslations } from '@dxos/ui-theme';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
-import { ObservabilityAction, type UserFeedback } from '../types';
+import { meta } from '../meta';
+import { ObservabilityOperation, type UserFeedback } from '../types';
 
 import { FeedbackForm } from './FeedbackForm';
 
 export const HelpContainer = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
 
   const handleSave = useCallback(
-    (values: UserFeedback) =>
-      dispatch(
-        pipe(
-          createIntent(ObservabilityAction.CaptureUserFeedback, values),
-          chain(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
-          chain(LayoutAction.AddToast, {
-            part: 'toast',
-            subject: {
-              id: `${OBSERVABILITY_PLUGIN}/feedback-success`,
-              icon: 'ph--paper-plane-tilt--regular',
-              duration: 3000,
-              title: ['feedback toast label', { ns: OBSERVABILITY_PLUGIN }],
-              description: ['feedback toast description', { ns: OBSERVABILITY_PLUGIN }],
-              closeLabel: ['close label', { ns: 'os' }],
-            },
-          }),
-        ),
-      ),
-    [dispatch],
+    async (values: UserFeedback) => {
+      await invokePromise(ObservabilityOperation.CaptureUserFeedback, values);
+      await invokePromise(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+      await invokePromise(Common.LayoutOperation.AddToast, {
+        id: `${meta.id}/feedback-success`,
+        icon: 'ph--paper-plane-tilt--regular',
+        duration: 3000,
+        title: ['feedback toast label', { ns: meta.id }],
+        description: ['feedback toast description', { ns: meta.id }],
+        closeLabel: ['close label', { ns: osTranslations }],
+      });
+    },
+    [invokePromise],
   );
 
   return <FeedbackForm onSave={handleSave} />;

package/src/components/ObservabilitySettings.tsx

@@ -2,15 +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 { useOperationInvoker } from '@dxos/app-framework/react';
 import { Input, Message, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { OBSERVABILITY_PLUGIN } from '../meta';
-import { ObservabilityAction } from '../types';
+import { meta } from '../meta';
+import { ObservabilityOperation } from '../types';
 
 export const ObservabilitySettingsSchema = Schema.mutable(
   Schema.Struct({
@@ -24,13 +24,18 @@ 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 { dispatchPromise: dispatch } = useIntentDispatcher();
+export type ObservabilitySettingsComponentProps = {
+  settings: ObservabilitySettingsProps;
+  onSettingsChange: (fn: (current: ObservabilitySettingsProps) => ObservabilitySettingsProps) => void;
+};
+
+export const ObservabilitySettings = ({ settings }: ObservabilitySettingsComponentProps) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
 
   return (
     <ControlPage>
-      <ControlSection title={t('settings title', { ns: OBSERVABILITY_PLUGIN })}>
+      <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>
@@ -38,7 +43,7 @@ export const ObservabilitySettings = ({ settings }: { settings: ObservabilitySet
           <ControlItemInput title={t('observability enabled label')}>
             <Input.Switch
               checked={settings.enabled}
-              onCheckedChange={(checked) => dispatch(createIntent(ObservabilityAction.Toggle, { state: !!checked }))}
+              onCheckedChange={(checked) => invokePromise(ObservabilityOperation.Toggle, { state: !!checked })}
             />
           </ControlItemInput>
         </ControlGroup>

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ObservabilityCapabilities } from './capabilities';
-export { ObservabilityEvents } from './events';
+export { ObservabilityCapabilities, ObservabilityEvents } from './types';
 export * from './components';
 export * from './meta';
 export * from './ObservabilityPlugin';

package/src/meta.ts

@@ -2,12 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const OBSERVABILITY_PLUGIN = 'dxos.org/plugin/observability';
-
-export const meta: PluginMeta = {
-  id: OBSERVABILITY_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'dxos.org/plugin/observability',
   name: 'Telemetry',
+  description: trim`
+    Application observability and telemetry collection for monitoring performance and usage patterns.
+    Track metrics, logs, and traces for system health and analytics.
+  `,
   icon: 'ph--eye--regular',
 };

package/src/translations.ts

@@ -24,8 +24,8 @@ export const translations = [
           'When enabled, basic usage data will used to improve the product. This may include performance metrics, error logs, and usage data. No personally identifiable information, other than your public key, is included with this data and no private data ever leaves your devices.',
 
         'help label': 'Feedback & Support',
-        'feedback text area label': 'Feedback',
-        'feedback text area placeholder': 'Please enter your feedback, technical issue, or feature request.',
+        'feedback textarea label': 'Feedback',
+        'feedback textarea placeholder': 'Please enter your feedback, technical issue, or feature request.',
         'send feedback label': 'Send Feedback',
         'feedback toast label': 'Thank you for your feedback!',
         'feedback toast description': 'We will review your feedback and get back to you as soon as possible.',

package/src/types/capabilities.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { type Client } from '@dxos/client';
+import { type Observability } from '@dxos/observability';
+
+import { type ObservabilitySettingsProps } from '../components';
+import { meta } from '../meta';
+
+export namespace ObservabilityCapabilities {
+  export const Settings = Capability.make<Atom.Writable<ObservabilitySettingsProps>>(`${meta.id}/capability/settings`);
+
+  export const StateSchema = Schema.mutable(
+    Schema.Struct({
+      group: Schema.optional(Schema.String),
+      notified: Schema.optional(Schema.Boolean),
+    }),
+  );
+
+  export type State = Schema.Schema.Type<typeof StateSchema>;
+
+  export const State = Capability.make<Atom.Writable<State>>(`${meta.id}/capability/state`);
+
+  export const Observability = Capability.make<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 = Capability.make<Client>('dxos.org/plugin/client/capability/client');

package/src/types/events.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ActivationEvent, Common } from '@dxos/app-framework';
+
+import { meta } from '../meta';
+
+export namespace ObservabilityEvents {
+  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(meta.id);
+}
+
+// NOTE: This is cloned from the client plugin to avoid circular dependencies.
+export const ClientReadyEvent = ActivationEvent.make('dxos.org/plugin/client/event/client-ready');

package/src/types/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './capabilities';
+export * from './events';
 export * from './schema';

package/src/types/schema.ts

@@ -2,215 +2,77 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { Type } from '@dxos/echo';
+import { Capability } from '@dxos/app-framework';
+import { Format } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
 
 import { meta } from '../meta';
+import { translations } from '../translations';
 
-const nonEmpty = <S extends Schema.Schema.Any>(field: string) =>
-  Schema.nonEmptyString<S>({ message: () => `Missing field: ${field}` });
-
-const maxLength = <S extends Schema.Schema.Any>(field: string, length: number) =>
-  Schema.maxLength<S>(length, { message: () => `Exceeds max length (${length}): ${field}` });
+const t = translations[0]['en-US'][meta.id];
 
 export const UserFeedback = Schema.Struct({
-  message: Schema.String.pipe(nonEmpty('Feedback'), maxLength('Feedback', 32_768)),
+  message: Format.Text.pipe(
+    Schema.nonEmptyString(),
+    Schema.maxLength(4_096),
+    Schema.annotations({
+      title: t['feedback textarea label'],
+      description: t['feedback textarea placeholder'],
+    }),
+  ),
 });
 
 export type UserFeedback = Schema.Schema.Type<typeof UserFeedback>;
 
-export namespace ObservabilityAction {
-  export class Toggle extends Schema.TaggedClass<Toggle>()(`${meta.id}/action/toggle`, {
-    input: Schema.Struct({
-      state: Schema.optional(Schema.Boolean),
-    }),
-    output: Schema.Boolean,
-  }) {}
+const OBSERVABILITY_OPERATION = `${meta.id}/operation`;
+
+/**
+ * Operations for the Observability plugin.
+ */
+export namespace ObservabilityOperation {
+  export const Toggle = Operation.make({
+    meta: {
+      key: `${OBSERVABILITY_OPERATION}/toggle`,
+      name: 'Toggle Observability',
+      description: 'Toggle observability on or off.',
+    },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        state: Schema.optional(Schema.Boolean),
+      }),
+      output: Schema.Boolean,
+    },
+  });
 
-  export class CaptureUserFeedback extends Schema.TaggedClass<CaptureUserFeedback>()(
-    `${meta.id}/action/capture-feedback`,
-    {
+  export const CaptureUserFeedback = Operation.make({
+    meta: {
+      key: `${OBSERVABILITY_OPERATION}/capture-feedback`,
+      name: 'Capture User Feedback',
+      description: 'Capture user feedback.',
+    },
+    services: [Capability.Service],
+    schema: {
       input: UserFeedback,
       output: Schema.Void,
     },
-  ) {}
-
-  /** Base intent for sending events. */
-  export class BaseSendEvent extends Schema.TaggedClass<BaseSendEvent>()(`${meta.id}/action/send-event`, {
-    input: Schema.Struct({
-      name: Schema.String,
-      properties: Schema.optional(Schema.Object),
-    }),
-    output: Schema.Void,
-  }) {}
+  });
 
-  /** Intent with strict types for first-party events. */
-  export class SendEvent extends Schema.TaggedClass<SendEvent>()(`${meta.id}/action/send-event`, {
-    // NOTE: Sort alphabetically by name.
-    input: Schema.Union(
-      Schema.Struct({
-        name: Schema.Literal('identity.create'),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('identity.join'),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('identity.recover'),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('identity.share'),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('navigation.activate'),
-        properties: Schema.Struct({
-          subjectId: Schema.String,
-          typename: Schema.optional(Schema.String),
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('page.load'),
-        properties: Schema.Struct({
-          loadDuration: Schema.Number,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('plugins.toggle'),
-        properties: Schema.Struct({
-          plugin: Schema.String,
-          enabled: Schema.Boolean,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.create'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.join'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.limit'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.lock'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.migrate'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          targetVersion: Schema.optional(Schema.String),
-          version: Schema.optional(Schema.String),
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.schema.use'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          typename: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.schema.add'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          objectId: Schema.String,
-          typename: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.object.add'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          objectId: Schema.String,
-          typename: Schema.optional(Schema.String),
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.share'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('space.unlock'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.create'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.delete'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.message.add'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-          threadLength: Schema.Number,
-          messageId: Schema.String,
-          messageLength: Schema.Number,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.message.delete'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-          messageId: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.message.undo-delete'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-          messageId: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.message.update'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          messageId: Schema.String,
-          messageLength: Schema.Number,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.toggle-resolved'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-        }),
-      }),
-      Schema.Struct({
-        name: Schema.Literal('threads.undo-delete'),
-        properties: Schema.Struct({
-          spaceId: Type.SpaceId,
-          threadId: Schema.String,
-        }),
+  export const SendEvent = Operation.make({
+    meta: {
+      key: `${OBSERVABILITY_OPERATION}/send-event`,
+      name: 'Send Event',
+      description: 'Send an observability event.',
+    },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        name: Schema.String.annotations({ description: 'The name of the event.' }),
+        properties: Schema.optional(Schema.Any).annotations({ description: 'Event properties.' }),
       }),
-    ),
-    output: Schema.Void,
-  }) {}
+      output: Schema.Void,
+    },
+  });
 }

package/dist/lib/browser/app-graph-builder-2SLFJVUL.mjs

@@ -1,43 +0,0 @@
-import {
-  OBSERVABILITY_PLUGIN
-} from "./chunk-57RVSKYP.mjs";
-
-// src/capabilities/app-graph-builder.ts
-import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
-import { Capabilities, contributes } from "@dxos/app-framework";
-import { ROOT_ID, createExtension } from "@dxos/plugin-graph";
-var ATTENDABLE_PATH_SEPARATOR = "~";
-var DECK_COMPANION_TYPE = "dxos.org/plugin/deck/deck-companion";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, [
-  createExtension({
-    id: `${OBSERVABILITY_PLUGIN}/help`,
-    connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map((node2) => {
-      return [
-        {
-          id: [
-            node2.id,
-            "help"
-          ].join(ATTENDABLE_PATH_SEPARATOR),
-          type: DECK_COMPANION_TYPE,
-          data: null,
-          properties: {
-            label: [
-              "help label",
-              {
-                ns: OBSERVABILITY_PLUGIN
-              }
-            ],
-            icon: "ph--question--regular",
-            disposition: "hidden",
-            position: "hoist"
-          }
-        }
-      ];
-    }), Option.getOrElse(() => [])))
-  })
-]);
-export {
-  app_graph_builder_default as default
-};
-//# sourceMappingURL=app-graph-builder-2SLFJVUL.mjs.map