@dxos/plugin-automation 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -5,20 +5,18 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { Function, Script } from '@dxos/functions';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { Button, IconButton, useTranslation } from '@dxos/react-ui';
-import { controlItemClasses } from '@dxos/react-ui-form';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { Operation, Script } from '@dxos/compute';
+import { Filter, Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { type Space, useQuery } from '@dxos/react-client/echo';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { ghostHover, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-
-const grid = 'grid grid-cols-[1fr_auto] min-bs-[2.5rem]';
+import { meta } from '#meta';
 
 export type FunctionsPanelProps = {
   space: Space;
@@ -26,9 +24,9 @@ export type FunctionsPanelProps = {
 
 export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   const { t } = useTranslation(meta.id);
-  const functions = useQuery(space, Filter.type(Function.Function));
-  const scripts = useQuery(space, Filter.type(Script.Script));
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const functions = useQuery(space.db, Filter.type(Operation.PersistentOperation));
+  const scripts = useQuery(space.db, Filter.type(Script.Script));
+  const { invokePromise } = useOperationInvoker();
 
   const functionToScriptMap = useMemo(
     () =>
@@ -49,7 +47,7 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   );
 
   const getScriptName = useCallback(
-    (func: Function.Function) => {
+    (func: Operation.PersistentOperation) => {
       const script = functionToScriptMap[func.id];
       return script?.name;
     },
@@ -57,50 +55,55 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   );
 
   const handleGoToScript = useCallback(
-    (func: Function.Function) => {
+    (func: Operation.PersistentOperation) => {
       const script = functionToScriptMap[func.id];
       if (script) {
-        void dispatch(
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [Obj.getDXN(script).toString()],
-          }),
-        );
+        void invokePromise(LayoutOperation.Open, { subject: [getObjectPathFromObject(script)] });
       }
     },
-    [functionToScriptMap, dispatch],
+    [functionToScriptMap, invokePromise],
   );
 
   const handleDelete = useCallback(
-    (func: Function.Function) => dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [func] })),
-    [dispatch],
+    (func: Operation.PersistentOperation) => invokePromise(SpaceOperation.RemoveObjects, { objects: [func] }),
+    [invokePromise],
   );
 
   return (
-    <div role='none' className={mx(controlItemClasses)}>
+    <Settings.Panel>
       {functions.length > 0 && (
-        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} getId={(func) => func.id}>
+        <List.Root<Operation.PersistentOperation>
+          items={functions}
+          isItem={Schema.is(Type.getSchema(Operation.PersistentOperation))}
+          getId={(func) => func.id}
+        >
           {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
+            <div role='list' className='flex flex-col w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<Operation.PersistentOperation>
                   key={func.id}
                   item={func}
-                  classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+                  classNames={mx(
+                    'grid grid-cols-[1fr_min-content_auto] min-h-[2.5rem] min-h-[3rem] px-2 items-center',
+                    ghostHover,
+                  )}
                 >
                   <div className='flex flex-col truncate'>
                     <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
-                    {getScriptName(func) && (
-                      <div className='text-xs text-description truncate'>{getScriptName(func)}</div>
-                    )}
+                    {getScriptName(func) && <p className='text-xs text-description truncate'>{getScriptName(func)}</p>}
                   </div>
-                  {functionToScriptMap[func.id] && (
-                    <Button onClick={() => handleGoToScript(func)}>{t('go to function source button label')}</Button>
-                  )}
+                  {(functionToScriptMap[func.id] && (
+                    <IconButton
+                      icon='ph--arrow-square-out--regular'
+                      iconOnly
+                      label={t('show-source-button.label')}
+                      onClick={() => handleGoToScript(func)}
+                    />
+                  )) || <div />}
                   <IconButton
-                    iconOnly
                     icon='ph--trash--regular'
-                    label={t('delete function button label')}
+                    iconOnly
+                    label={t('delete-function-button.label')}
                     onClick={() => handleDelete(func)}
                   />
                 </List.Item>
@@ -109,8 +112,6 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
           )}
         </List.Root>
       )}
-
-      {functions.length === 0 && <div className='text-center plb-4 text-gray-500'>{t('no functions found')}</div>}
-    </div>
+    </Settings.Panel>
   );
 };

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -2,27 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Array from 'effect/Array';
-import * as EffectFunction from 'effect/Function';
-import * as Order from 'effect/Order';
 import * as Schema from 'effect/Schema';
 import { useState } from 'react';
 import React, { useCallback } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { Function } from '@dxos/functions';
+import * as OperationModule from '@dxos/compute';
+import { Context } from '@dxos/context';
+import { Filter, Obj, Type } from '@dxos/echo';
 import { getDeployedFunctions } from '@dxos/functions-runtime/edge';
 import { useClient } from '@dxos/react-client';
-import { Filter, Query, type Space, useQuery } from '@dxos/react-client/echo';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { controlItemClasses } from '@dxos/react-ui-form';
+import { type Space, useQuery } from '@dxos/react-client/echo';
+import { IconButton, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { ghostHover, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-const grid = 'grid grid-cols-[1fr_1fr_auto] min-bs-[2.5rem]';
+const grid = 'grid grid-cols-[1fr_1fr_auto] min-h-[2.5rem]';
 
 type FunctionsRegistryProps = {
   space: Space;
@@ -31,17 +28,18 @@ type FunctionsRegistryProps = {
 export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
   const client = useClient();
   const [loading, setLoading] = useState(true);
-  const [functions, setFunctions] = useState<Function.Function[]>([]);
+  const [functions, setFunctions] = useState<OperationModule.Operation.PersistentOperation[]>([]);
   const { t } = useTranslation(meta.id);
 
-  const dbFunctions = useQuery(space, Filter.type(Function.Function));
+  const dbFunctions = useQuery(space.db, Filter.type(OperationModule.Operation.PersistentOperation));
 
-  const state = (func: Function.Function) => {
-    const dbFunction = dbFunctions.find((f) => f.key === func.key);
+  const state = (func: OperationModule.Operation.PersistentOperation) => {
+    const funcKey = Obj.getMeta(func).key;
+    const dbFunction = dbFunctions.find((f) => Obj.getMeta(f).key === funcKey);
     if (!dbFunction) {
       return 'import';
     }
-    if (dbFunction.version === func.version && dbFunction.updated === func.updated) {
+    if (Obj.getMeta(dbFunction).version === Obj.getMeta(func).version && dbFunction.updated === func.updated) {
       return 'none';
     }
     return 'update';
@@ -49,62 +47,51 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
 
   useAsyncEffect(async () => {
     setLoading(true);
-    const functions = await getDeployedFunctions(client);
+    const functions = await getDeployedFunctions(Context.default(), client, true);
     setFunctions(functions);
     setLoading(false);
   }, []);
 
-  const dedupedFunctions = EffectFunction.pipe(
-    functions,
-    Array.filter((_) => _.key !== undefined),
-    Array.sort(Order.reverse(Order.mapInput(Order.string, (_: Function.Function) => _.updated ?? ''))),
-    Array.dedupeWith((self, that) => self.key === that.key),
-    Array.sort(Order.mapInput(Order.string, (_: Function.Function) => _.key ?? '')),
-  );
-
   const hanleImportOrUpdate = useCallback(
-    async (func: Function.Function) => {
-      const {
-        objects: [existingFunc],
-      } = await space.db.query(Query.type(Function.Function, { key: func.key })).run();
+    async (func: OperationModule.Operation.PersistentOperation) => {
+      const funcKey = Obj.getMeta(func).key;
+      const functions = funcKey
+        ? await space.db
+            .query(Filter.and(Filter.type(OperationModule.Operation.PersistentOperation), Filter.key(funcKey)))
+            .run()
+        : [];
+      const [existingFunc] = functions;
       if (!existingFunc) {
         space.db.add(func);
         return;
       }
-      existingFunc.version = func.version;
-      existingFunc.updated = func.updated;
-      existingFunc.name = func.name;
-      existingFunc.description = func.description;
-      // TODO(dmaretskyi): A workaround for an ECHO bug.
-      existingFunc.inputSchema = JSON.parse(JSON.stringify(func.inputSchema));
-      existingFunc.outputSchema = JSON.parse(JSON.stringify(func.outputSchema));
-      Obj.getMeta(existingFunc).keys = JSON.parse(JSON.stringify(Obj.getMeta(func).keys));
+      OperationModule.Operation.setFrom(existingFunc, func);
     },
     [space],
   );
 
   return (
-    <div role='none' className={mx(controlItemClasses)}>
-      {dedupedFunctions.length > 0 && (
-        <List.Root<Function.Function>
-          items={dedupedFunctions}
-          isItem={Schema.is(Function.Function)}
+    <Settings.Panel>
+      {functions.length > 0 && (
+        <List.Root<OperationModule.Operation.PersistentOperation>
+          items={functions}
+          isItem={Schema.is(Type.getSchema(OperationModule.Operation.PersistentOperation))}
           getId={(func) => func.id}
         >
           {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
+            <div role='list' className='flex flex-col w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<OperationModule.Operation.PersistentOperation>
                   key={func.id}
                   item={func}
-                  classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+                  classNames={mx(grid, ghostHover, 'items-center', 'px-2', 'min-h-[3rem]')}
                 >
                   <div className='flex flex-col truncate'>
                     <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
-                    <div className='text-xs text-description truncate'>{func.key}</div>
+                    <div className='text-xs text-description truncate'>{Obj.getMeta(func).key}</div>
                   </div>
                   <div className='flex flex-col truncate'>
-                    <div className='text-xs text-description truncate'>{func.version}</div>
+                    <div className='text-xs text-description truncate'>{Obj.getMeta(func).version}</div>
                     <div className='text-xs text-description truncate'>
                       {func.updated ? `Uploaded ${new Date(func.updated).toLocaleString()}` : ''}
                     </div>
@@ -114,7 +101,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
                     iconOnly
                     icon={state(func) === 'update' ? 'ph--arrows-clockwise--regular' : 'ph--download--regular'}
                     label={
-                      state(func) === 'update' ? t('update function button label') : t('import function button label')
+                      state(func) === 'update' ? t('update-function-button.label') : t('import-function-button.label')
                     }
                     disabled={state(func) === 'none'}
                     onClick={() => hanleImportOrUpdate(func)}
@@ -126,10 +113,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
         </List.Root>
       )}
 
-      {dedupedFunctions.length === 0 && !loading && (
-        <div className='text-center plb-4 text-gray-500'>{t('no functions found')}</div>
-      )}
-      {loading && <div className='text-center plb-4 text-gray-500'>{t('loading functions')}</div>}
-    </div>
+      {loading && <div className='text-center py-4 text-gray-500'>{t('loading-functions.message')}</div>}
+    </Settings.Panel>
   );
 };

package/src/components/FunctionsRegistry/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-export { FunctionsRegistry } from './FunctionsRegistry';
+import { FunctionsRegistry } from './FunctionsRegistry';
+
+export { FunctionsRegistry };
+export default FunctionsRegistry;

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -2,32 +2,29 @@
 // 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 Operation } from '@dxos/compute';
+import { type Database, JsonSchema, Obj, Ref } from '@dxos/echo';
 import { type JsonPath } from '@dxos/echo/internal';
-import { type Function } from '@dxos/functions';
-import { useOnTransition } from '@dxos/react-ui';
-import { Form, type FormInputStateProps, type QueryRefOptions, useFormValues } from '@dxos/react-ui-form';
+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: Function.Function[];
-  onQueryRefOptions: QueryRefOptions;
-} & FormInputStateProps;
+  type: SchemaAST.AST;
+  functions: Operation.PersistentOperation[];
+  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);
+      return selectedFunctionValue.uri.split('dxn:echo:@:').at(1);
     }
   }, [selectedFunctionValue]);
 
@@ -44,23 +41,25 @@ export const FunctionInputEditor = ({
         return false;
       }
 
-      return prevValue.dxn.toString() !== selectedFunctionValue.dxn.toString();
+      return prevValue.uri !== selectedFunctionValue.uri;
     },
     (currValue) => currValue !== undefined,
-    () => onValueChange('object', {}),
+    () => onValueChange(type, {}),
   );
 
   const inputSchema = useMemo(() => selectedFunction?.inputSchema, [selectedFunction]);
-  const effectSchema = useMemo(() => (inputSchema ? Type.toEffectSchema(inputSchema) : undefined), [inputSchema]);
+  const effectSchema = useMemo(() => (inputSchema ? JsonSchema.toEffectSchema(inputSchema) : undefined), [inputSchema]);
   const propertyCount = inputSchema?.properties ? Object.keys(inputSchema.properties).length : 0;
+  const defaultValues = useMemo(() => {
+    const raw = getValue() ?? {};
+    return Obj.isObject(raw) ? { ...Obj.getSnapshot(raw) } : { ...raw };
+  }, [getValue]);
 
-  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) {
@@ -69,16 +68,18 @@ 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
+      <Form.Label label={t('function-parameters.label')} asChild />
+      <Form.Root
+        key={selectedFunction.id}
         schema={effectSchema}
-        values={values}
+        defaultValues={defaultValues}
+        db={db}
         onValuesChanged={handleValuesChanged}
-        onQueryRefOptions={onQueryRefOptions}
-        outerSpacing={false}
-      />
+      >
+        <Form.FieldSet />
+      </Form.Root>
     </>
   );
 };
+
+FunctionInputEditor.displayName = 'AutomationTrigger.FunctionInputEditor';

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,38 +4,33 @@
 
 import React, { useCallback, useMemo } from 'react';
 
+import { Trigger } from '@dxos/compute';
 import { Filter, Query } from '@dxos/echo';
-import { Trigger } from '@dxos/functions';
 import { useTranslation } from '@dxos/react-ui';
-import { type InputProps, SelectInput, useInputProps } from '@dxos/react-ui-form';
+import { type FormFieldComponentProps, SelectField, useFormFieldState } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
-export type SpecSelectorProps = InputProps;
+export type SpecSelectorProps = FormFieldComponentProps;
 
 export const SpecSelector = (props: SpecSelectorProps) => {
   const { t } = useTranslation(meta.id);
-  const specProps = useInputProps(['spec' satisfies keyof Trigger.Trigger]);
+  const specProps = useFormFieldState(SpecSelector.displayName, ['spec' satisfies keyof Trigger.Trigger]);
 
   const handleTypeChange = useCallback(
     (_type: any, value: string): Trigger.Spec | undefined => {
       const getDefaultTriggerSpec = (kind: string) => {
         switch (kind) {
           case 'timer':
-            return { kind: 'timer', cron: '' };
+            return Trigger.specTimer('');
           case 'subscription':
-            return {
-              kind: 'subscription',
-              query: {
-                ast: Query.select(Filter.nothing()).ast,
-              },
-            };
-          case 'queue':
-            return { kind: 'queue', queue: 'dxn:' };
+            return Trigger.specSubscription(Query.select(Filter.nothing()));
+          case 'feed':
+            return { kind: 'feed' } satisfies Trigger.FeedSpec;
           case 'email':
-            return { kind: 'email' };
+            return Trigger.specEmail();
           case 'webhook':
-            return { kind: 'webhook' };
+            return Trigger.specWebhook();
           default:
             return undefined;
         }
@@ -47,19 +42,30 @@ 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 kindLabels: Record<string, string> = {
+    timer: t('trigger-type.timer.label'),
+    webhook: t('trigger-type.webhook.label'),
+    websocket: t('trigger-type.websocket.label'),
+    subscription: t('trigger-type.subscription.label'),
+    email: t('trigger-type.email.label'),
+    feed: t('trigger-type.feed.label'),
+  };
+
   const options = useMemo(
     () =>
       Trigger.Kinds.map((kind) => ({
         value: kind,
-        label: t(`trigger type ${kind}`),
+        label: kindLabels[kind],
       })),
     [t],
   );
 
-  return <SelectInput {...props} options={options} onValueChange={handleTypeChange} />;
+  return <SelectField {...props} options={options} onValueChange={handleTypeChange} />;
 };
+
+SpecSelector.displayName = 'Form.SpecSelector';