@dxos/plugin-observability 0.8.4-main.3f58842 → 0.8.4-main.52d7546f51

package/src/cli/plugin.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { OperationResolver } from '@dxos/operation';
+
+import { meta } from '../meta';
+import { ObservabilityOperation } from '../types';
+
+// TODO(wittjosiah): Hook up.
+export const ObservabilityPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addOperationResolverModule({
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(Capabilities.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,30 @@
 // 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, type FormSubmitProps } 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'> & Pick<FormSubmitProps, 'disabled'>;
 
-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>
-  );
+const defaultValues: UserFeedback = {
+  message: '',
+  includeLogs: true,
 };
 
-// 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, disabled }: 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} defaultValues={defaultValues} onSave={onSave}>
+      <Form.Content>
+        <Form.FieldSet />
+        <Form.Submit icon='ph--paper-plane-tilt--regular' label={t('send feedback label')} disabled={disabled} />
+      </Form.Content>
+    </Form.Root>
   );
 };

package/src/components/HelpContainer.tsx

@@ -2,39 +2,55 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
-import React, { useCallback } from 'react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+import { useAsyncEffect } from '@dxos/react-hooks';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '../meta';
+import { ObservabilityCapabilities, ObservabilityOperation, type UserFeedback } from '../types';
 
 import { FeedbackForm } from './FeedbackForm';
-import { OBSERVABILITY_PLUGIN } from '../meta';
-import { ObservabilityAction, type UserFeedback } from '../types';
 
+/** Renders the feedback form, disabling it when the feedback survey is unavailable. */
 export const HelpContainer = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
+  const observability = useCapability(ObservabilityCapabilities.Observability);
+  const [feedbackAvailable, setFeedbackAvailable] = useState(false);
+
+  useAsyncEffect(
+    async (controller) => {
+      const available = await observability.isAvailable('feedback').pipe(
+        Effect.catchAll(() => Effect.succeed(false)),
+        Effect.catchAllDefect(() => Effect.succeed(false)),
+        runAndForwardErrors,
+      );
+      if (!controller.signal.aborted) {
+        setFeedbackAvailable(available);
+      }
+    },
+    [observability],
+  );
 
   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(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+      await invokePromise(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} />;
+  return <FeedbackForm onSave={handleSave} disabled={!feedbackAvailable} />;
 };

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/ui';
 import { Input, Message, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Settings } 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>
+    <Settings.Root>
+      <Settings.Section 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>
+        <Settings.Group>
+          <Settings.ItemInput title={t('observability enabled label')}>
+            <Input.Switch
+              checked={settings.enabled}
+              onCheckedChange={(checked) => invokePromise(ObservabilityOperation.Toggle, { state: !!checked })}
+            />
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

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,9 @@ 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.',
+        'include debug logs label': 'Include debug logs',
         '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.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,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+
+import { meta } from '../meta';
+
+export namespace ObservabilityEvents {
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.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';