@dxos/plugin-automation 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -6,48 +6,50 @@ import * as Array from 'effect/Array';
 import * as EFn from 'effect/Function';
 import * as Match from 'effect/Match';
 import * as Schema from 'effect/Schema';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Filter, Obj, Tag } from '@dxos/echo';
 import { Function, Script, Trigger } from '@dxos/functions';
+import { KEY_QUEUE_CURSOR } from '@dxos/functions-runtime';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
 import { useTypeOptions } from '@dxos/plugin-space';
 import { type Client, useClient } from '@dxos/react-client';
-import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Clipboard, IconButton, Input, Separator, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { ControlItem, controlItemClasses } from '@dxos/react-ui-form';
+import { type Space, useObject, useQuery } from '@dxos/react-client/echo';
+import { Clipboard, IconButton, type IconButtonProps, Input, Separator, 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 { Project } from '@dxos/types';
+import { Pipeline } from '@dxos/types';
+import { ghostHover, mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../../meta';
 import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
 
-const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
+const grid = 'grid grid-cols-[40px_1fr_32px_32px] min-h-[2.5rem]';
 
-export type AutomationPanelProps = ThemedClassName<{
+export type AutomationPanelProps = {
   space: Space;
-  object?: Obj.Any;
+  object?: Obj.Unknown;
   initialTrigger?: Trigger.Trigger;
   onDone?: () => void;
-}>;
+};
 
 // TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ classNames, space, object, initialTrigger, onDone }: AutomationPanelProps) => {
+export const AutomationPanel = ({ space, object, initialTrigger, onDone }: AutomationPanelProps) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
-  const functions = useQuery(space, Filter.type(Function.Function));
-  const triggers = useQuery(space, Filter.type(Trigger.Trigger));
+  const functionsServiceClient = useMemo(() => FunctionsServiceClient.fromClient(client), [client]);
+  const functions = useQuery(space.db, Filter.type(Function.Function));
+  const triggers = useQuery(space.db, Filter.type(Trigger.Trigger));
   const filteredTriggers = useMemo(() => {
     return object ? triggers.filter(triggerMatch(object)) : triggers;
   }, [object, triggers]);
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space.db, Filter.type(Tag.Tag));
   const types = useTypeOptions({
     space,
     annotation: {
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered'],
     },
   });
 
@@ -72,7 +74,9 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
 
   const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
     if (selected) {
-      Object.assign(selected, trigger);
+      Obj.change(selected, (mutable) => {
+        Object.assign(mutable, trigger);
+      });
     } else {
       space.db.add(Trigger.make(trigger));
     }
@@ -87,11 +91,22 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
     onDone?.();
   };
 
+  const handleForceRunTrigger = async (trigger: Trigger.Trigger) => {
+    await functionsServiceClient.forceRunCronTrigger(space.id, trigger.id);
+  };
+
+  const handleResetCursor = async (trigger: Trigger.Trigger) => {
+    Obj.change(trigger, (t) => {
+      Obj.deleteKeys(t, KEY_QUEUE_CURSOR);
+    });
+    await space.db.flush({ indexes: true });
+  };
+
   if (trigger) {
     return (
-      <ControlItem title={t('trigger editor title')}>
+      <Settings.Item title={t('trigger editor title')} description={t('trigger editor description')}>
         <TriggerEditor
-          space={space}
+          db={space.db}
           trigger={trigger}
           readonlySpec={Boolean(object)}
           tags={tags}
@@ -99,12 +114,12 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
           onSave={handleSave}
           onCancel={handleCancel}
         />
-      </ControlItem>
+      </Settings.Item>
     );
   }
 
   return (
-    <div className={mx(controlItemClasses, classNames)}>
+    <Settings.Container>
       {filteredTriggers.length > 0 && (
         <List.Root<Trigger.Trigger>
           items={filteredTriggers}
@@ -112,67 +127,141 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
           getId={(field) => field.id}
         >
           {({ items: filteredTriggers }) => (
-            <div role='list' className='flex flex-col is-full'>
-              {filteredTriggers?.map((trigger) => {
-                const copyAction = getCopyAction(client, trigger);
-                return (
-                  <List.Item<Trigger.Trigger>
-                    key={trigger.id}
-                    item={trigger}
-                    classNames={mx(grid, ghostHover, 'items-center', 'pli-2')}
-                  >
-                    <Input.Root>
-                      <Input.Switch
-                        checked={trigger.enabled}
-                        onCheckedChange={(checked) => (trigger.enabled = checked)}
-                      />
-                    </Input.Root>
-
-                    <div className={'flex'}>
-                      <List.ItemTitle
-                        classNames='pli-1 cursor-pointer is-0 shrink truncate'
-                        onClick={() => handleSelect(trigger)}
-                      >
-                        {getFunctionName(functions, trigger) ?? '∅'}
-                      </List.ItemTitle>
-
-                      {/* TODO: a better way to expose copy action */}
-                      {copyAction && (
-                        <Clipboard.IconButton
-                          label={t(copyAction.translationKey)}
-                          value={copyAction.contentProvider()}
-                        />
-                      )}
-                    </div>
-
-                    <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-                  </List.Item>
-                );
-              })}
+            <div role='list' className='flex flex-col w-full'>
+              {filteredTriggers?.map((trigger) => (
+                <TriggerListItem
+                  key={trigger.id}
+                  trigger={trigger}
+                  functions={functions}
+                  onSelect={handleSelect}
+                  onDelete={handleDelete}
+                  onResetCursor={handleResetCursor}
+                  onForceRun={handleForceRunTrigger}
+                />
+              ))}
             </div>
           )}
         </List.Root>
       )}
-      {filteredTriggers.length > 0 && <Separator classNames='mlb-4' />}
+
+      {filteredTriggers.length > 0 && <Separator classNames='my-4' />}
       <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-    </div>
+    </Settings.Container>
+  );
+};
+
+const TriggerListItem = ({
+  trigger,
+  functions,
+  onSelect,
+  onDelete,
+  onResetCursor,
+  onForceRun,
+}: {
+  trigger: Trigger.Trigger;
+  functions: Function.Function[];
+  onSelect?: (trigger: Trigger.Trigger) => void;
+  onDelete?: (trigger: Trigger.Trigger) => void;
+  onResetCursor?: (trigger: Trigger.Trigger) => void;
+  onForceRun?: (trigger: Trigger.Trigger) => void;
+}) => {
+  const client = useClient();
+  const copyAction = getCopyAction(client, trigger);
+  const { t } = useTranslation(meta.id);
+  const cursor = Obj.getKeys(trigger, KEY_QUEUE_CURSOR).at(0)?.id;
+  const [snapshot, updateTrigger] = useObject(trigger);
+
+  const enabled = snapshot.enabled ?? false;
+  const onEnabledChange = (checked: boolean) => {
+    updateTrigger((trigger) => {
+      trigger.enabled = checked;
+    });
+  };
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(trigger);
+  }, [onSelect, trigger]);
+
+  const handleDelete = useCallback(() => {
+    onDelete?.(trigger);
+  }, [onDelete, trigger]);
+
+  const handleResetCursor = useCallback(() => {
+    onResetCursor?.(trigger);
+  }, [onResetCursor, trigger]);
+
+  const handleForceRun = useCallback(() => {
+    onForceRun?.(trigger);
+  }, [onForceRun, trigger]);
+
+  const actionProps = useMemo<IconButtonProps | undefined>(() => {
+    if (trigger.spec?.kind === 'timer' && onForceRun) {
+      return {
+        disabled: !enabled || trigger.spec?.kind !== 'timer',
+        icon: 'ph--play--regular',
+        label: 'Force run',
+        onClick: handleForceRun,
+      };
+    }
+
+    if (trigger.spec?.kind === 'queue' && onResetCursor) {
+      return {
+        disabled: !cursor,
+        icon: 'ph--arrow-clockwise--regular',
+        label: 'Reset cursor',
+        onClick: handleResetCursor,
+      };
+    }
+  }, [enabled, trigger.spec?.kind, handleForceRun]);
+
+  return (
+    <List.Item<Obj.Snapshot<Trigger.Trigger>>
+      key={trigger.id}
+      item={snapshot}
+      classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+    >
+      <Input.Root>
+        <Input.Switch checked={enabled} onCheckedChange={onEnabledChange} />
+      </Input.Root>
+
+      <div className={'flex'}>
+        <List.ItemTitle classNames='px-1 cursor-pointer w-0 shrink truncate' onClick={handleSelect}>
+          {getFunctionName(functions, trigger) ?? '∅'}
+          {cursor && <div className='text-xs text-description truncate ml-4'>Position: {cursor}</div>}
+        </List.ItemTitle>
+
+        {copyAction && (
+          <Clipboard.IconButton label={t(copyAction.translationKey)} value={copyAction.contentProvider()} />
+        )}
+      </div>
+
+      {actionProps ? <List.ItemIconButton {...actionProps} autoHide={false} /> : <div />}
+
+      {onDelete && <List.ItemDeleteButton onClick={handleDelete} />}
+    </List.Item>
   );
 };
 
 const getCopyAction = (client: Client, trigger: Trigger.Trigger | undefined) => {
   if (trigger?.spec?.kind === 'email') {
-    return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
+    return {
+      translationKey: 'trigger copy email' as const,
+      contentProvider: () => `${Obj.getDatabase(trigger)!.spaceId}@dxos.network`,
+    };
   }
 
   if (trigger?.spec?.kind === 'webhook') {
-    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
+    return {
+      translationKey: 'trigger copy url' as const,
+      contentProvider: () => getWebhookUrl(client, trigger!),
+    };
   }
 
   return undefined;
 };
 
 const getWebhookUrl = (client: Client, trigger: Trigger.Trigger) => {
-  const spaceId = getSpace(trigger)!.id;
+  const spaceId = Obj.getDatabase(trigger)!.spaceId;
   const edgeUrl = new URL(client.config.values.runtime!.services!.edge!.url!);
   const isSecure = edgeUrl.protocol.startsWith('https') || edgeUrl.protocol.startsWith('wss');
   edgeUrl.protocol = isSecure ? 'https' : 'http';
@@ -196,7 +285,7 @@ const scriptMatch = (script: Script.Script) => (trigger: Trigger.Trigger) => {
   return fn.source?.target === script;
 };
 
-const projectMatch = (project: Project.Project) => {
+const projectMatch = (project: Pipeline.Pipeline) => {
   const viewQueries = EFn.pipe(
     project.columns,
     Array.map((column) => column.view.target),
@@ -216,14 +305,14 @@ const projectMatch = (project: Project.Project) => {
   };
 };
 
-const triggerMatch = Match.type<Obj.Any>().pipe(
+const triggerMatch = Match.type<Obj.Unknown>().pipe(
   Match.withReturnType<(trigger: Trigger.Trigger) => boolean>(),
   Match.when(
     (obj) => Obj.instanceOf(Script.Script, obj),
     (obj) => scriptMatch(obj),
   ),
   Match.when(
-    (obj) => Obj.instanceOf(Project.Project, obj),
+    (obj) => Obj.instanceOf(Pipeline.Pipeline, obj),
     (obj) => projectMatch(obj),
   ),
   Match.orElse((_obj) => () => true),

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -5,30 +5,28 @@
 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 { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getObjectPathFromObject } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
 import { Function, Script } from '@dxos/functions';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { SpaceOperation } 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 { 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]';
-
 export type FunctionsPanelProps = {
   space: Space;
 };
 
 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(Function.Function));
+  const scripts = useQuery(space.db, Filter.type(Script.Script));
+  const { invokePromise } = useOperationInvoker();
 
   const functionToScriptMap = useMemo(
     () =>
@@ -60,33 +58,28 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
     (func: Function.Function) => {
       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: Function.Function) => invokePromise(SpaceOperation.RemoveObjects, { objects: [func] }),
+    [invokePromise],
   );
 
   return (
-    <div role='none' className={mx(controlItemClasses)}>
+    <Settings.Container>
       {functions.length > 0 && (
         <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} 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>
                   key={func.id}
                   item={func}
-                  classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+                  classNames={mx('grid grid-cols-[1fr_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>
@@ -110,7 +103,7 @@ 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>
+      {functions.length === 0 && <div className='text-center py-4 text-description'>{t('no functions found')}</div>}
+    </Settings.Container>
   );
 };

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -2,9 +2,6 @@
 // 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';
@@ -13,15 +10,14 @@ import { Function } from '@dxos/functions';
 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 { 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';
 
-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;
@@ -33,7 +29,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
   const [functions, setFunctions] = useState<Function.Function[]>([]);
   const { t } = useTranslation(meta.id);
 
-  const dbFunctions = useQuery(space, Filter.type(Function.Function));
+  const dbFunctions = useQuery(space.db, Filter.type(Function.Function));
 
   const state = (func: Function.Function) => {
     const dbFunction = dbFunctions.find((f) => f.key === func.key);
@@ -48,24 +44,15 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
 
   useAsyncEffect(async () => {
     setLoading(true);
-    const functions = await getDeployedFunctions(client);
+    const functions = await getDeployedFunctions(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();
+      const functions = await space.db.query(Query.type(Function.Function, { key: func.key })).run();
+      const [existingFunc] = functions;
       if (!existingFunc) {
         space.db.add(func);
         return;
@@ -76,20 +63,16 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
   );
 
   return (
-    <div role='none' className={mx(controlItemClasses)}>
-      {dedupedFunctions.length > 0 && (
-        <List.Root<Function.Function>
-          items={dedupedFunctions}
-          isItem={Schema.is(Function.Function)}
-          getId={(func) => func.id}
-        >
+    <Settings.Container>
+      {functions.length > 0 && (
+        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} 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>
                   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>
@@ -118,10 +101,10 @@ 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>
+      {functions.length === 0 && !loading && (
+        <div className='text-center py-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')}</div>}
+    </Settings.Container>
   );
 };

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,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 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 = {
+  type: SchemaAST.AST;
   functions: Function.Function[];
-  onQueryRefOptions: QueryRefOptions;
-} & FormInputStateProps;
+  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);
@@ -47,20 +44,22 @@ export const FunctionInputEditor = ({
       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 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';