@dxos/plugin-automation 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -2,52 +2,71 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-import React, { useState } from 'react';
-
-import { Filter, Obj } from '@dxos/echo';
-import { FunctionTrigger, FunctionType, ScriptType } from '@dxos/functions';
+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 { Filter, Obj, Tag } from '@dxos/echo';
+import { Function, Script, Trigger } from '@dxos/functions';
+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 { type Space, 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 { List } from '@dxos/react-ui-list';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { Project } from '@dxos/types';
+import { ghostHover, mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+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-bs-[2.5rem]';
 
 export type AutomationPanelProps = ThemedClassName<{
   space: Space;
-  object?: Obj.Any;
-  initialTrigger?: FunctionTrigger;
+  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) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
-  const triggers = useQuery(space, Filter.type(FunctionTrigger));
-  const functions = useQuery(space, Filter.type(FunctionType));
-  const scripts = useQuery(space, Filter.type(ScriptType));
-
-  const [trigger, setTrigger] = useState<FunctionTrigger | undefined>(initialTrigger);
-  const [selected, setSelected] = useState<FunctionTrigger>();
-
-  const handleSelect = (trigger: FunctionTrigger) => {
+  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.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
+    },
+  });
+
+  const [trigger, setTrigger] = useState<Trigger.Trigger | undefined>(initialTrigger);
+  const [selected, setSelected] = useState<Trigger.Trigger>();
+
+  const handleSelect = (trigger: Trigger.Trigger) => {
     setTrigger(trigger);
     setSelected(trigger);
   };
 
   const handleAdd = () => {
-    setTrigger(Obj.make(FunctionTrigger, {}));
+    setTrigger(Trigger.make({}));
     setSelected(undefined);
   };
 
-  const handleDelete = (trigger: FunctionTrigger) => {
+  const handleDelete = (trigger: Trigger.Trigger) => {
     space.db.remove(trigger);
     setTrigger(undefined);
     setSelected(undefined);
@@ -57,7 +76,7 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
     if (selected) {
       Object.assign(selected, trigger);
     } else {
-      space.db.add(Obj.make(FunctionTrigger, trigger));
+      space.db.add(Trigger.make(trigger));
     }
 
     setTrigger(undefined);
@@ -70,41 +89,61 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
     onDone?.();
   };
 
+  const handleForceRunTrigger = async (trigger: Trigger.Trigger) => {
+    await functionsServiceClient.forceRunCronTrigger(space.id, trigger.id);
+  };
+
   if (trigger) {
     return (
       <ControlItem title={t('trigger editor title')}>
-        <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
+        <TriggerEditor
+          db={space.db}
+          trigger={trigger}
+          readonlySpec={Boolean(object)}
+          tags={tags}
+          types={types}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
       </ControlItem>
     );
   }
 
   return (
     <div className={mx(controlItemClasses, classNames)}>
-      {triggers.length > 0 && (
-        <List.Root<FunctionTrigger> items={triggers} isItem={Schema.is(FunctionTrigger)} getId={(field) => field.id}>
-          {({ items: triggers }) => (
-            <div role='list' className='flex flex-col w-full'>
-              {triggers?.map((trigger) => {
+      {filteredTriggers.length > 0 && (
+        <List.Root<Trigger.Trigger>
+          items={filteredTriggers}
+          isItem={Schema.is(Trigger.Trigger)}
+          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<FunctionTrigger>
+                  <List.Item<Trigger.Trigger>
                     key={trigger.id}
                     item={trigger}
-                    classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+                    classNames={mx(grid, ghostHover, 'items-center', 'pli-2')}
                   >
                     <Input.Root>
                       <Input.Switch
                         checked={trigger.enabled}
-                        onCheckedChange={(checked) => (trigger.enabled = checked)}
+                        onCheckedChange={(checked) =>
+                          Obj.change(trigger, (t) => {
+                            t.enabled = checked;
+                          })
+                        }
                       />
                     </Input.Root>
 
                     <div className={'flex'}>
                       <List.ItemTitle
-                        classNames='px-1 cursor-pointer w-0 shrink truncate'
+                        classNames='pli-1 cursor-pointer is-0 shrink truncate'
                         onClick={() => handleSelect(trigger)}
                       >
-                        {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                        {getFunctionName(functions, trigger) ?? '∅'}
                       </List.ItemTitle>
 
                       {/* TODO: a better way to expose copy action */}
@@ -116,6 +155,14 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
                       )}
                     </div>
 
+                    <List.ItemButton
+                      autoHide={false}
+                      disabled={!trigger.enabled || trigger.spec?.kind !== 'timer'}
+                      icon='ph--play--regular'
+                      label='Force run'
+                      onClick={() => handleForceRunTrigger(trigger)}
+                    />
+
                     <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
                   </List.Item>
                 );
@@ -124,15 +171,18 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
           )}
         </List.Root>
       )}
-      {triggers.length > 0 && <Separator classNames='mlb-4' />}
+      {filteredTriggers.length > 0 && <Separator classNames='mlb-4' />}
       <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
     </div>
   );
 };
 
-const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) => {
+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',
+      contentProvider: () => `${Obj.getDatabase(trigger)!.spaceId}@dxos.network`,
+    };
   }
 
   if (trigger?.spec?.kind === 'webhook') {
@@ -142,18 +192,60 @@ const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) =>
   return undefined;
 };
 
-const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
-  const spaceId = getSpace(trigger)!.id;
+const getWebhookUrl = (client: Client, trigger: Trigger.Trigger) => {
+  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';
   return new URL(`/webhook/${spaceId}:${trigger.id}`, edgeUrl).toString();
 };
 
-const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTrigger) => {
+const getFunctionName = (functions: Function.Function[], trigger: Trigger.Trigger) => {
   // TODO(wittjosiah): Truncation should be done in the UI.
   //   Warning that the List component is currently a can of worms.
   const shortId = trigger.function && `${trigger.function.dxn.toString().slice(0, 16)}…`;
   const functionObject = functions.find((fn) => fn === trigger.function?.target);
   return functionObject?.name ?? shortId;
 };
+
+const scriptMatch = (script: Script.Script) => (trigger: Trigger.Trigger) => {
+  const fn = trigger.function?.target;
+  if (!Obj.instanceOf(Function.Function, fn)) {
+    return false;
+  }
+
+  return fn.source?.target === script;
+};
+
+const projectMatch = (project: Project.Project) => {
+  const viewQueries = EFn.pipe(
+    project.columns,
+    Array.map((column) => column.view.target),
+    Array.filter(isNonNullable),
+    Array.map((view) => Obj.getSnapshot(view).query.ast),
+    Array.map((ast) => JSON.stringify(ast)),
+  );
+
+  return (trigger: Trigger.Trigger) => {
+    const spec = Obj.getSnapshot(trigger).spec;
+    if (spec?.kind !== 'subscription') {
+      return false;
+    }
+
+    // TODO(wittjosiah): Implement better way of comparing query ASTs.
+    return viewQueries.some((query) => JSON.stringify(spec.query) === query);
+  };
+};
+
+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) => projectMatch(obj),
+  ),
+  Match.orElse((_obj) => () => true),
+);

package/src/components/AutomationSettings.tsx

@@ -7,21 +7,21 @@ import React from 'react';
 import { useTranslation } from '@dxos/react-ui';
 import { ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 import { AutomationPanel, type AutomationPanelProps } from './AutomationPanel';
 import { TriggersSettings } from './TriggerSettings';
 
 export const AutomationSettings = (props: AutomationPanelProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <ControlPage>
       <ControlSection
-        title={t('automation verbose label', { ns: AUTOMATION_PLUGIN })}
-        description={t('automation description', { ns: AUTOMATION_PLUGIN })}
+        title={t('automation verbose label', { ns: meta.id })}
+        description={t('automation description', { ns: meta.id })}
       >
         <AutomationPanel {...props} />
-        <TriggersSettings space={props.space} />
+        <TriggersSettings db={props.space.db} />
       </ControlSection>
     </ControlPage>
   );

package/src/components/FunctionsContainer.tsx

@@ -8,20 +8,27 @@ import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 import { FunctionsPanel } from './FunctionsPanel';
+import { FunctionsRegistry } from './FunctionsRegistry';
 
 export const FunctionsContainer = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <ControlPage>
       <ControlSection
-        title={t('functions verbose label', { ns: AUTOMATION_PLUGIN })}
-        description={t('functions description', { ns: AUTOMATION_PLUGIN })}
+        title={t('functions verbose label', { ns: meta.id })}
+        description={t('functions description', { ns: meta.id })}
       >
         <FunctionsPanel space={space} />
       </ControlSection>
+      <ControlSection
+        title={t('functions registry verbose label', { ns: meta.id })}
+        description={t('functions registry description', { ns: meta.id })}
+      >
+        <FunctionsRegistry space={space} />
+      </ControlSection>
     </ControlPage>
   );
 };

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -2,18 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, ScriptType } from '@dxos/functions';
-import { Filter, type Space, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
-import { Button, useTranslation } from '@dxos/react-ui';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { Function, Script } from '@dxos/functions';
+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 { List } from '@dxos/react-ui-list';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { ghostHover, mx } from '@dxos/ui-theme';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 const grid = 'grid grid-cols-[1fr_auto] min-bs-[2.5rem]';
 
@@ -22,10 +25,10 @@ export type FunctionsPanelProps = {
 };
 
 export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const functions = useQuery(space, Filter.type(FunctionType));
-  const scripts = useQuery(space, Filter.type(ScriptType));
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(meta.id);
+  const functions = useQuery(space.db, Filter.type(Function.Function));
+  const scripts = useQuery(space.db, Filter.type(Script.Script));
+  const { invokePromise } = useOperationInvoker();
 
   const functionToScriptMap = useMemo(
     () =>
@@ -40,13 +43,13 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
           }
           return map;
         },
-        {} as Record<string, ScriptType>,
+        {} as Record<string, Script.Script>,
       ),
     [functions, scripts],
   );
 
   const getScriptName = useCallback(
-    (func: FunctionType) => {
+    (func: Function.Function) => {
       const script = functionToScriptMap[func.id];
       return script?.name;
     },
@@ -54,23 +57,28 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   );
 
   const handleGoToScript = useCallback(
-    (func: FunctionType) => {
+    (func: Function.Function) => {
       const script = functionToScriptMap[func.id];
       if (script) {
-        void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(script)] }));
+        void invokePromise(Common.LayoutOperation.Open, { subject: [Obj.getDXN(script).toString()] });
       }
     },
-    [functionToScriptMap, dispatch],
+    [functionToScriptMap, invokePromise],
+  );
+
+  const handleDelete = useCallback(
+    (func: Function.Function) => invokePromise(SpaceOperation.RemoveObjects, { objects: [func] }),
+    [invokePromise],
   );
 
   return (
     <div role='none' className={mx(controlItemClasses)}>
       {functions.length > 0 && (
-        <List.Root<FunctionType> items={functions} isItem={Schema.is(FunctionType)} getId={(func) => func.id}>
+        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} getId={(func) => func.id}>
           {({ items }) => (
-            <div role='list' className='flex flex-col w-full'>
+            <div role='list' className='flex flex-col is-full'>
               {items?.map((func) => (
-                <List.Item<FunctionType>
+                <List.Item<Function.Function>
                   key={func.id}
                   item={func}
                   classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
@@ -84,6 +92,12 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
                   {functionToScriptMap[func.id] && (
                     <Button onClick={() => handleGoToScript(func)}>{t('go to function source button label')}</Button>
                   )}
+                  <IconButton
+                    iconOnly
+                    icon='ph--trash--regular'
+                    label={t('delete function button label')}
+                    onClick={() => handleDelete(func)}
+                  />
                 </List.Item>
               ))}
             </div>

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import { useState } from 'react';
+import React, { useCallback } from 'react';
+
+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 { List } from '@dxos/react-ui-list';
+import { ghostHover, mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+const grid = 'grid grid-cols-[1fr_1fr_auto] min-bs-[2.5rem]';
+
+type FunctionsRegistryProps = {
+  space: Space;
+};
+
+export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
+  const client = useClient();
+  const [loading, setLoading] = useState(true);
+  const [functions, setFunctions] = useState<Function.Function[]>([]);
+  const { t } = useTranslation(meta.id);
+
+  const dbFunctions = useQuery(space.db, Filter.type(Function.Function));
+
+  const state = (func: Function.Function) => {
+    const dbFunction = dbFunctions.find((f) => f.key === func.key);
+    if (!dbFunction) {
+      return 'import';
+    }
+    if (dbFunction.version === func.version && dbFunction.updated === func.updated) {
+      return 'none';
+    }
+    return 'update';
+  };
+
+  useAsyncEffect(async () => {
+    setLoading(true);
+    const functions = await getDeployedFunctions(client, true);
+    setFunctions(functions);
+    setLoading(false);
+  }, []);
+
+  const hanleImportOrUpdate = useCallback(
+    async (func: Function.Function) => {
+      const functions = await space.db.query(Query.type(Function.Function, { key: func.key })).run();
+      const [existingFunc] = functions;
+      if (!existingFunc) {
+        space.db.add(func);
+        return;
+      }
+      Function.setFrom(existingFunc, func);
+    },
+    [space],
+  );
+
+  return (
+    <div role='none' className={mx(controlItemClasses)}>
+      {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'>
+              {items?.map((func) => (
+                <List.Item<Function.Function>
+                  key={func.id}
+                  item={func}
+                  classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[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>
+                  <div className='flex flex-col truncate'>
+                    <div className='text-xs text-description truncate'>{func.version}</div>
+                    <div className='text-xs text-description truncate'>
+                      {func.updated ? `Uploaded ${new Date(func.updated).toLocaleString()}` : ''}
+                    </div>
+                  </div>
+
+                  <IconButton
+                    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')
+                    }
+                    disabled={state(func) === 'none'}
+                    onClick={() => hanleImportOrUpdate(func)}
+                  />
+                </List.Item>
+              ))}
+            </div>
+          )}
+        </List.Root>
+      )}
+
+      {functions.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>
+  );
+};

package/src/components/FunctionsRegistry/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { FunctionsRegistry } from './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 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';