@dxos/plugin-observability 0.8.4-main.84f28bd → 0.8.4-main.9735255

package/src/cli/plugin.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { OperationResolver } from '@dxos/operation';
+
+import { meta } from '../meta';
+import { ObservabilityOperation } from '../types';
+
+// TODO(wittjosiah): Hook up.
+export const ObservabilityPlugin = Plugin.define(meta).pipe(
+  Common.Plugin.addOperationResolverModule({
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(Common.Capability.OperationResolver, [
+          OperationResolver.make({
+            operation: ObservabilityOperation.SendEvent,
+            handler: () => Effect.void,
+          }),
+        ]),
+      ),
+  }),
+  Plugin.make,
+);

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,38 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
 import React, { useCallback } from 'react';
 
-import { chain, createIntent, LayoutAction, 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 { meta } from '../meta';
+import { ObservabilityOperation, type UserFeedback } from '../types';
 
 import { FeedbackForm } from './FeedbackForm';
-import { OBSERVABILITY_PLUGIN } from '../meta';
-import { ObservabilityAction, type UserFeedback } from '../types';
 
 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 { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+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,25 +24,30 @@ 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 (
-    <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) => invokePromise(ObservabilityOperation.Toggle, { state: !!checked })}
+            />
+          </ControlItemInput>
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

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

@@ -11,6 +11,7 @@ export const translations = [
     'en-US': {
       [meta.id]: {
         'plugin name': 'Telemetry',
+        'settings title': 'Telemetry settings',
         'observability toast label': 'Privacy Notice',
         'observability toast description':
           'Composer collects usage and performance metrics to improve the product. No user data is collected.',
@@ -23,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

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './capabilities';
+export * from './events';
+export * from './schema';

package/src/types/schema.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+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 t = translations[0]['en-US'][meta.id];
+
+export const UserFeedback = Schema.Struct({
+  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>;
+
+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 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,
+    },
+  });
+
+  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,
+    },
+  });
+}

package/dist/lib/browser/app-graph-builder-DCOBBL5B.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 { createExtension, ROOT_ID } 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-DCOBBL5B.mjs.map

package/dist/lib/browser/app-graph-builder-DCOBBL5B.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';\nimport { createExtension, ROOT_ID } from '@dxos/plugin-graph';\n\nimport { OBSERVABILITY_PLUGIN } from '../meta';\n\n// NOTE: Copied from @dxos/plugin-deck to break circular dependency.\nconst ATTENDABLE_PATH_SEPARATOR = '~';\nconst DECK_COMPANION_TYPE = 'dxos.org/plugin/deck/deck-companion';\n\nexport default (context: PluginContext) =>\n  contributes(Capabilities.AppGraphBuilder, [\n    createExtension({\n      id: `${OBSERVABILITY_PLUGIN}/help`,\n      connector: (node) =>\n        Rx.make((get) =>\n          pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map((node) => {\n              return [\n                {\n                  id: [node.id, 'help'].join(ATTENDABLE_PATH_SEPARATOR),\n                  type: DECK_COMPANION_TYPE,\n                  data: null,\n                  properties: {\n                    label: ['help label', { ns: OBSERVABILITY_PLUGIN }],\n                    icon: 'ph--question--regular',\n                    disposition: 'hidden',\n                    position: 'hoist',\n                  },\n                },\n              ];\n            }),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  ]);\n"],
-  "mappings": ";;;;;AAIA,SAASA,UAAU;AACnB,SAASC,QAAQC,YAAY;AAE7B,SAASC,cAAcC,mBAAuC;AAC9D,SAASC,iBAAiBC,eAAe;AAKzC,IAAMC,4BAA4B;AAClC,IAAMC,sBAAsB;AAE5B,IAAA,4BAAe,CAACC,YACdC,YAAYC,aAAaC,iBAAiB;EACxCC,gBAAgB;IACdC,IAAI,GAAGC,oBAAAA;IACPC,WAAW,CAACC,SACVC,GAAGC,KAAK,CAACC,QACPC,KACED,IAAIH,IAAAA,GACJK,OAAOC,QAAQ,CAACN,UAAUA,MAAKH,OAAOU,UAAUF,OAAOG,KAAKR,KAAAA,IAAQK,OAAOI,KAAI,CAAA,GAC/EJ,OAAOK,IAAI,CAACV,UAAAA;AACV,aAAO;QACL;UACEH,IAAI;YAACG,MAAKH;YAAI;YAAQc,KAAKrB,yBAAAA;UAC3BsB,MAAMrB;UACNsB,MAAM;UACNC,YAAY;YACVC,OAAO;cAAC;cAAc;gBAAEC,IAAIlB;cAAqB;;YACjDmB,MAAM;YACNC,aAAa;YACbC,UAAU;UACZ;QACF;;IAEJ,CAAA,GACAd,OAAOe,UAAU,MAAM,CAAA,CAAE,CAAA,CAAA;EAGjC,CAAA;CACD;",
-  "names": ["Rx", "Option", "pipe", "Capabilities", "contributes", "createExtension", "ROOT_ID", "ATTENDABLE_PATH_SEPARATOR", "DECK_COMPANION_TYPE", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "OBSERVABILITY_PLUGIN", "connector", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "ROOT_ID", "some", "none", "map", "join", "type", "data", "properties", "label", "ns", "icon", "disposition", "position", "getOrElse"]
-}

package/dist/lib/browser/chunk-57RVSKYP.mjs

@@ -1,13 +0,0 @@
-// src/meta.ts
-var OBSERVABILITY_PLUGIN = "dxos.org/plugin/observability";
-var meta = {
-  id: OBSERVABILITY_PLUGIN,
-  name: "Telemetry",
-  icon: "ph--eye--regular"
-};
-
-export {
-  OBSERVABILITY_PLUGIN,
-  meta
-};
-//# sourceMappingURL=chunk-57RVSKYP.mjs.map

package/dist/lib/browser/chunk-57RVSKYP.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const OBSERVABILITY_PLUGIN = 'dxos.org/plugin/observability';\n\nexport const meta: PluginMeta = {\n  id: OBSERVABILITY_PLUGIN,\n  name: 'Telemetry',\n  icon: 'ph--eye--regular',\n};\n"],
-  "mappings": ";AAMO,IAAMA,uBAAuB;AAE7B,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;EACNC,MAAM;AACR;",
-  "names": ["OBSERVABILITY_PLUGIN", "meta", "id", "name", "icon"]
-}