@dxos/plugin-automation 0.8.4-main.b97322e → 0.8.4-main.bc674ce

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -2,29 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
+import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
 
-import { Ref, Type } from '@dxos/echo';
-import { type JsonPath } from '@dxos/echo-schema';
-import { type FunctionType } from '@dxos/functions';
-import { useOnTransition } from '@dxos/react-ui';
-import { Form, type FormInputStateProps, type QueryRefOptions, useFormValues } from '@dxos/react-ui-form';
+import { type Database, Ref, Type } from '@dxos/echo';
+import { type JsonPath } from '@dxos/echo/internal';
+import { type Function } from '@dxos/functions';
+import { useOnTransition, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldStateProps, type FormRootProps, useFormValues } from '@dxos/react-ui-form';
+
+import { meta } from '../../meta';
 
 export type FunctionInputEditorProps = {
-  functions: FunctionType[];
-  onQueryRefOptions: QueryRefOptions;
-} & FormInputStateProps;
+  type: SchemaAST.AST;
+  functions: Function.Function[];
+  db?: Database.Database;
+} & FormFieldStateProps;
 
-/**
- * Editor component for function input parameters.
- */
-export const FunctionInputEditor = ({
-  functions,
-  getValue,
-  onValueChange,
-  onQueryRefOptions,
-}: FunctionInputEditorProps) => {
-  const selectedFunctionValue = useFormValues(['function' as JsonPath]);
+export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChange }: FunctionInputEditorProps) => {
+  const { t } = useTranslation(meta.id);
+  const selectedFunctionValue = useFormValues(FunctionInputEditor.displayName, ['function' as JsonPath]);
   const selectedFunctionId = useMemo(() => {
     if (Ref.isRef(selectedFunctionValue)) {
       return selectedFunctionValue.dxn.toString().split('dxn:echo:@:').at(1);
@@ -39,22 +36,27 @@ export const FunctionInputEditor = ({
   useOnTransition(
     // Clear function parameter input when the function changes.
     selectedFunctionValue,
-    (prevValue) => prevValue !== undefined && prevValue !== selectedFunctionValue,
+    (prevValue) => {
+      if (!Ref.isRef(prevValue) || !Ref.isRef(selectedFunctionValue)) {
+        return false;
+      }
+
+      return prevValue.dxn.toString() !== selectedFunctionValue.dxn.toString();
+    },
     (currValue) => currValue !== undefined,
-    () => onValueChange('object', {}),
+    () => onValueChange(type, {}),
   );
 
   const inputSchema = useMemo(() => selectedFunction?.inputSchema, [selectedFunction]);
   const effectSchema = useMemo(() => (inputSchema ? Type.toEffectSchema(inputSchema) : undefined), [inputSchema]);
   const propertyCount = inputSchema?.properties ? Object.keys(inputSchema.properties).length : 0;
-
   const values = useMemo(() => getValue() ?? {}, [getValue]);
 
-  const handleValuesChanged = useCallback(
-    (values: any) => {
-      onValueChange('object', values);
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps['onValuesChanged']>>(
+    (values) => {
+      onValueChange(type, values);
     },
-    [onValueChange],
+    [type, onValueChange],
   );
 
   if (selectedFunction === undefined || effectSchema === undefined || propertyCount === 0) {
@@ -63,16 +65,12 @@ export const FunctionInputEditor = ({
 
   return (
     <>
-      <h3 className='text-md'>Function parameters</h3>
-      {/* TODO(ZaymonFC): Try using <FormFields /> internal component for this nesting.
-                          This would allow errors to flow up to the root context. */}
-      <Form
-        schema={effectSchema}
-        values={values}
-        onValuesChanged={handleValuesChanged}
-        onQueryRefOptions={onQueryRefOptions}
-        outerSpacing={false}
-      />
+      <Form.Label label={t('function parameters label')} asChild />
+      <Form.Root schema={effectSchema} values={values} db={db} onValuesChanged={handleValuesChanged}>
+        <Form.FieldSet />
+      </Form.Root>
     </>
   );
 };
+
+FunctionInputEditor.displayName = 'AutomationTrigger.FunctionInputEditor';

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,32 +4,38 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { type FunctionTriggerType, TriggerKind, type TriggerType } from '@dxos/functions';
+import { Filter, Query } from '@dxos/echo';
+import { Trigger } from '@dxos/functions';
 import { useTranslation } from '@dxos/react-ui';
-import { SelectInput, type InputProps, useInputProps } from '@dxos/react-ui-form';
+import { type FormFieldComponentProps, SelectField, useFormFieldState } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
-export type SpecSelectorProps = InputProps;
+export type SpecSelectorProps = FormFieldComponentProps;
 
 export const SpecSelector = (props: SpecSelectorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const specProps = useInputProps(['spec' satisfies keyof FunctionTriggerType]);
+  const { t } = useTranslation(meta.id);
+  const specProps = useFormFieldState(SpecSelector.displayName, ['spec' satisfies keyof Trigger.Trigger]);
 
   const handleTypeChange = useCallback(
-    (_type: any, value: string): TriggerType | undefined => {
+    (_type: any, value: string): Trigger.Spec | undefined => {
       const getDefaultTriggerSpec = (kind: string) => {
         switch (kind) {
-          case TriggerKind.Timer:
-            return { kind: TriggerKind.Timer, cron: '' };
-          case TriggerKind.Subscription:
-            return { kind: TriggerKind.Subscription, filter: {} };
-          case TriggerKind.Queue:
-            return { kind: TriggerKind.Queue, queue: '' };
-          case TriggerKind.Email:
-            return { kind: TriggerKind.Email };
-          case TriggerKind.Webhook:
-            return { kind: TriggerKind.Webhook };
+          case 'timer':
+            return { kind: 'timer', cron: '' };
+          case 'subscription':
+            return {
+              kind: 'subscription',
+              query: {
+                ast: Query.select(Filter.nothing()).ast,
+              },
+            };
+          case 'queue':
+            return { kind: 'queue', queue: 'dxn:' };
+          case 'email':
+            return { kind: 'email' };
+          case 'webhook':
+            return { kind: 'webhook' };
           default:
             return undefined;
         }
@@ -41,19 +47,21 @@ export const SpecSelector = (props: SpecSelectorProps) => {
       }
 
       // Update the entire spec object, not just the `spec.kind`.
-      specProps.onValueChange('object', defaultSpec);
+      specProps.onValueChange(props.type, defaultSpec);
     },
-    [specProps],
+    [props.type, specProps],
   );
 
   const options = useMemo(
     () =>
-      Object.values(TriggerKind).map((kind) => ({
+      Trigger.Kinds.map((kind) => ({
         value: kind,
         label: t(`trigger type ${kind}`),
       })),
     [t],
   );
 
-  return <SelectInput {...props} options={options} onValueChange={handleTypeChange} />;
+  return <SelectField {...props} options={options} onValueChange={handleTypeChange} />;
 };
+
+SpecSelector.displayName = 'Form.SpecSelector';

package/src/components/TriggerEditor/TriggerEditor.stories.tsx

@@ -2,32 +2,56 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
 
-import { type Meta } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { FunctionType, FunctionTrigger, TriggerKind } from '@dxos/functions';
+import { Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { Function, Trigger } from '@dxos/functions';
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { useSpaces } from '@dxos/react-client/echo';
-import { ContactType, withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { useQuery } from '@dxos/react-client/echo';
+import { TestSchema, useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { translations as formTranslations } from '@dxos/react-ui-form';
+import { Employer, Organization, Person, Project } from '@dxos/types';
 
-import { TriggerEditor } from './TriggerEditor';
 import { functions } from '../../testing';
 import { translations } from '../../translations';
 
-const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[1];
-  const [trigger, setTrigger] = useState<FunctionTrigger>();
-  useEffect(() => {
+import { TriggerEditor, type TriggerEditorProps } from './TriggerEditor';
+
+const types = [
+  // TODO(burdon): Get label from annotation.
+  { value: Organization.Organization.typename, label: 'Organization' },
+  { value: Person.Person.typename, label: 'Person' },
+  { value: Type.getTypename(Project.Project), label: 'Project' },
+  { value: Employer.Employer.typename, label: 'Employer' },
+];
+
+const DefaultStory = (props: Partial<TriggerEditorProps>) => {
+  const { space } = useClientStory();
+  const [trigger, setTrigger] = useState<Trigger.Trigger>();
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+
+  useAsyncEffect(async () => {
     if (!space) {
       return;
     }
 
-    const trigger = space.db.add(Obj.make(FunctionTrigger, { spec: { kind: TriggerKind.Timer, cron: '' } }));
+    const functions = await space.db.query(Filter.type(Function.Function)).run();
+    const fn = functions.find((fn) => fn.name === 'example.com/function/forex');
+    invariant(fn);
+    const trigger = space.db.add(
+      Trigger.make({
+        function: Ref.make(fn),
+        spec: { kind: 'webhook' },
+        input: {
+          from: 'USD',
+          to: 'JPY',
+        },
+      }),
+    );
     setTrigger(trigger);
   }, [space]);
 
@@ -36,28 +60,43 @@ const DefaultStory = () => {
   }
 
   return (
-    <div role='none' className='w-[32rem] bs-fit border border-separator rounded-sm'>
-      <TriggerEditor space={space} trigger={trigger} onSave={(values) => console.log('on save', values)} />
-    </div>
+    <TriggerEditor
+      db={space.db}
+      trigger={trigger}
+      types={types}
+      tags={tags}
+      onSave={(values) => console.log('on save', values)}
+      {...props}
+    />
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-automation/TriggerEditor',
-  component: TriggerEditor,
+  component: TriggerEditor as any,
   render: DefaultStory,
   decorators: [
+    withTheme,
+    withLayout({ layout: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger, ContactType],
-      onSpaceCreated: ({ space }) => {
-        for (const fn of functions) {
-          space.db.add(Obj.make(FunctionType, fn));
-        }
+      types: [Tag.Tag, Function.Function, Trigger.Trigger, TestSchema.ContactType],
+      onCreateSpace: ({ space }) => {
+        // Tags.
+        ['Important', 'Investor', 'New'].forEach((label) => {
+          space.db.add(Tag.make({ label }));
+        });
+
+        // Functions.
+        functions.forEach((fn) => {
+          space.db.add(Function.make(fn));
+        });
+
+        // Objects.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(ContactType, {
+            Obj.make(TestSchema.ContactType, {
               name: faker.person.fullName(),
               identifiers: [],
             }),
@@ -65,14 +104,21 @@ const meta: Meta = {
         });
       },
     }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
   ],
   parameters: {
-    translations,
+    layout: 'fullscreen',
+    translations: [...formTranslations, ...translations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ReadonlySpec: Story = {
+  args: {
+    readonlySpec: true,
+  },
+};

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -5,57 +5,76 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { ComputeGraph } from '@dxos/conductor';
-import { Type } from '@dxos/echo';
+import { DXN, type Database, type Query } from '@dxos/echo';
+import { Function, Script, Trigger } from '@dxos/functions';
+import { Filter, Ref, useQuery } from '@dxos/react-client/echo';
+import { Input } from '@dxos/react-ui';
+import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import {
-  FunctionType,
-  FunctionTriggerSchema,
-  type FunctionTriggerType,
-  type FunctionTrigger,
-  ScriptType,
-} from '@dxos/functions';
-import { Filter, Ref, useQuery, type Space } from '@dxos/react-client/echo';
-import { type CustomInputMap, Form, SelectInput, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-
-import { FunctionInputEditor, type FunctionInputEditorProps } from './FunctionInputEditor';
+  type ExcludeId,
+  Form,
+  FormFieldLabel,
+  type FormFieldMap,
+  type FormRootProps,
+  SelectField,
+  omitId,
+} from '@dxos/react-ui-form';
+
+import { FunctionInputEditor } from './FunctionInputEditor';
 import { SpecSelector } from './SpecSelector';
 
-export type TriggerEditorProps = {
-  space: Space;
-  trigger: FunctionTriggerType;
-  onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;
-  onCancel?: () => void;
-};
+type TriggerFormSchema = ExcludeId<typeof Trigger.Trigger>;
 
-export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {
-  const handleSave = (values: FunctionTriggerType) => {
-    onSave?.(values);
-  };
+export type TriggerEditorProps = {
+  db: Database.Database;
+  trigger: Trigger.Trigger;
+  // TODO(wittjosiah): This needs to apply to whole spec but currently only applies to spec.kind & spec.query.
+  readonlySpec?: boolean;
+} &
+  // prettier-ignore
+  Pick<QueryFormProps, 'types' | 'tags'> &
+  Pick<FormRootProps<TriggerFormSchema>, 'onSave' | 'onCancel'>;
 
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-  const Custom = useCustomInputs(space, handleRefQueryLookup);
+export const TriggerEditor = ({ db, types, tags, readonlySpec, trigger, ...formProps }: TriggerEditorProps) => {
+  const fieldMap = useCustomInputs({
+    db,
+    types,
+    tags,
+    readonlySpec,
+  });
 
   return (
-    <Form
-      outerSpacing={false}
-      Custom={Custom}
-      schema={FunctionTriggerSchema}
+    <Form.Root<TriggerFormSchema>
+      {...formProps}
+      schema={omitId(Trigger.Trigger)}
       values={trigger}
-      onSave={handleSave}
-      onCancel={onCancel}
-      onQueryRefOptions={handleRefQueryLookup}
-    />
+      db={db}
+      fieldMap={fieldMap}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+          <Form.Actions />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };
 
-const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorProps['onQueryRefOptions']) => {
-  const functions = useQuery(space, Filter.type(FunctionType));
-  const workflows = useQuery(space, Filter.type(ComputeGraph));
-  const scripts = useQuery(space, Filter.type(ScriptType));
+type UseCustomInputsProps = {
+  db: Database.Database;
+  readonlySpec?: boolean;
+} & Pick<QueryFormProps, 'types' | 'tags'>;
+
+const useCustomInputs = ({ db, readonlySpec, types, tags }: UseCustomInputsProps): FormFieldMap => {
+  const functions = useQuery(db, Filter.type(Function.Function));
+  const workflows = useQuery(db, Filter.type(ComputeGraph));
+  const scripts = useQuery(db, Filter.type(Script.Script));
 
   return useMemo(
-    (): CustomInputMap => ({
+    (): FormFieldMap => ({
       // Function selector.
-      ['function' satisfies keyof FunctionTriggerType]: (props) => {
+      ['function' satisfies keyof Trigger.Trigger]: (props) => {
         const getValue = useCallback(() => {
           const formValue = props.getValue();
           if (Ref.isRef(formValue)) {
@@ -66,17 +85,17 @@ const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorPro
 
         const handleOnValueChange = useCallback(
           (_type: any, dxnString: string) => {
-            const dxn = Type.DXN.parse(dxnString);
+            const dxn = DXN.parse(dxnString);
             if (dxn) {
               const ref = Ref.fromDXN(dxn);
-              props.onValueChange('object', ref);
+              props.onValueChange(props.type, ref);
             }
           },
-          [props.onValueChange],
+          [props.type, props.onValueChange],
         );
 
         return (
-          <SelectInput
+          <SelectField
             {...props}
             getValue={getValue as any}
             onValueChange={handleOnValueChange}
@@ -86,14 +105,28 @@ const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorPro
       },
 
       // Spec selector.
-      ['spec.kind' as const]: SpecSelector,
+      ['spec.kind' as const]: (props) => <SpecSelector {...props} readonly={readonlySpec} />,
+
+      // TODO(wittjosiah): Copied from ViewEditor.
+      // Query input editor.
+      ['spec.query' as const]: (props) => {
+        const handleChange = useCallback(
+          (query: Query.Any) => props.onValueChange(props.type, { ast: query.ast }),
+          [props.type, props.onValueChange],
+        );
+
+        return (
+          <Input.Root>
+            <FormFieldLabel label={props.label} asChild />
+            <QueryForm initialQuery={(props.getValue() as any).ast} types={types} tags={tags} onChange={handleChange} />
+          </Input.Root>
+        );
+      },
 
       // Function input editor.
-      ['input' as const]: (props) => (
-        <FunctionInputEditor {...props} functions={functions} onQueryRefOptions={onQueryRefOptions} />
-      ),
+      ['input' as const]: (props) => <FunctionInputEditor {...props} functions={functions} db={db} />,
     }),
-    [workflows, scripts, functions],
+    [workflows, scripts, functions, readonlySpec],
   );
 };
 
@@ -101,7 +134,7 @@ const getWorkflowOptions = (graphs: ComputeGraph[]) => {
   return graphs.map((graph) => ({ label: `compute-${graph.id}`, value: `dxn:echo:@:${graph.id}` }));
 };
 
-const getFunctionOptions = (scripts: ScriptType[], functions: FunctionType[]) => {
-  const getLabel = (fn: FunctionType) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
+const getFunctionOptions = (scripts: Script.Script[], functions: Function.Function[]) => {
+  const getLabel = (fn: Function.Function) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
   return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:echo:@:${fn.id}` }));
 };

package/src/components/TriggerSettings.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Database } from '@dxos/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { ControlItemInput } from '@dxos/react-ui-form';
+
+import { useTriggerRuntimeControls } from '../hooks';
+import { meta } from '../meta';
+
+export const TriggersSettings = ({ db }: { db: Database.Database }) => {
+  const { triggers, isRunning, start, stop } = useTriggerRuntimeControls(db);
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <div className='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+      <ControlItemInput title={t('runtime label')} description={t('runtime description')}>
+        <Input.Switch classNames='justify-self-end' checked={isRunning} onCheckedChange={isRunning ? stop : start} />
+      </ControlItemInput>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -6,7 +6,7 @@ import { lazy } from 'react';
 
 export * from './TriggerEditor';
 
-export const AutomationContainer = lazy(() => import('./AutomationContainer'));
 export const AutomationPanel = lazy(() => import('./AutomationPanel'));
+export const AutomationSettings = lazy(() => import('./AutomationSettings'));
 export const FunctionsContainer = lazy(() => import('./FunctionsContainer'));
 export const FunctionsPanel = lazy(() => import('./FunctionsPanel'));

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useComputeRuntimeCallback';
+export * from './useTriggerRuntimeControls';

package/src/hooks/useComputeRuntimeCallback.ts

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Cause from 'effect/Cause';
+import * as Effect from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import { type DependencyList, useCallback } from 'react';
+
+import { useCapability } from '@dxos/app-framework/react';
+import { type Key } from '@dxos/echo';
+import { type FunctionDefinition, FunctionInvocationService, TracingService } from '@dxos/functions';
+import { log } from '@dxos/log';
+
+import { AutomationCapabilities } from '../types';
+
+/**
+ * Create an effectful function that has access to compute services
+ */
+// TODO(burdon): Factor out (figure out cross-plugin capabilities dependencies).
+export const useComputeRuntimeCallback = <T>(
+  id: Key.SpaceId | undefined,
+  fn: () => Effect.Effect<T, any, AutomationCapabilities.ComputeServices>,
+  deps?: DependencyList,
+): (() => Promise<T>) => {
+  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+  const runtime = id !== undefined ? computeRuntime.getRuntime(id) : undefined;
+
+  return useCallback(() => {
+    if (!runtime) {
+      throw new TypeError('Space not provided to useComputeRuntimeCallback');
+    }
+
+    return runtime.runPromise(fn());
+  }, [runtime, ...(deps ?? [])]);
+};
+
+// TODO(wittjosiah): Function invoking should automatically be traced (DX-647).
+export const invokeFunctionWithTracing = <I, O>(functionDef: FunctionDefinition<I, O>, inputData: I) =>
+  Effect.gen(function* () {
+    const tracer = yield* TracingService;
+    const trace = yield* tracer.traceInvocationStart({
+      target: undefined,
+      payload: {
+        data: {},
+      },
+    });
+
+    // Invoke the function.
+    const result = yield* FunctionInvocationService.invokeFunction(functionDef, inputData).pipe(
+      Effect.provide(trace.invocationTraceQueue ? TracingService.layerInvocation(trace) : TracingService.layerNoop),
+      Effect.exit,
+    );
+
+    if (Exit.isFailure(result)) {
+      const error = Cause.prettyErrors(result.cause)[0];
+      log.error(error.message, error.cause ?? error.stack);
+    }
+
+    yield* tracer.traceInvocationEnd({
+      trace,
+      // TODO(dmaretskyi): Might miss errors.
+      exception: Exit.isFailure(result) ? Cause.prettyErrors(result.cause)[0] : undefined,
+    });
+
+    return result;
+  });