@dxos/plugin-automation 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -2,19 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-import React, { useState } from 'react';
+import * as Array from 'effect/Array';
+import * as Function from 'effect/Function';
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
+import React, { useMemo, useState } from 'react';
 
-import { Filter, Obj } from '@dxos/echo';
+import { Filter, Obj, Tag } from '@dxos/echo';
 import { FunctionTrigger, FunctionType, ScriptType } from '@dxos/functions';
+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 { List } from '@dxos/react-ui-list';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
 
-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]';
@@ -28,11 +33,15 @@ export type AutomationPanelProps = ThemedClassName<{
 
 // 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 triggers = useQuery(space, Filter.type(FunctionTrigger));
+  const filteredTriggers = useMemo(() => {
+    return object ? triggers.filter(triggerMatch(object)) : triggers;
+  }, [object, triggers]);
+  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const types = useTypeOptions({ space, annotation: ['dynamic', 'limited-static', 'object-form'] });
 
   const [trigger, setTrigger] = useState<FunctionTrigger | undefined>(initialTrigger);
   const [selected, setSelected] = useState<FunctionTrigger>();
@@ -73,18 +82,30 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
   if (trigger) {
     return (
       <ControlItem title={t('trigger editor title')}>
-        <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />
+        <TriggerEditor
+          space={space}
+          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 }) => (
+      {filteredTriggers.length > 0 && (
+        <List.Root<FunctionTrigger>
+          items={filteredTriggers}
+          isItem={Schema.is(FunctionTrigger)}
+          getId={(field) => field.id}
+        >
+          {({ items: filteredTriggers }) => (
             <div role='list' className='flex flex-col w-full'>
-              {triggers?.map((trigger) => {
+              {filteredTriggers?.map((trigger) => {
                 const copyAction = getCopyAction(client, trigger);
                 return (
                   <List.Item<FunctionTrigger>
@@ -104,7 +125,7 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
                         classNames='px-1 cursor-pointer w-0 shrink truncate'
                         onClick={() => handleSelect(trigger)}
                       >
-                        {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                        {getFunctionName(functions, trigger) ?? '∅'}
                       </List.ItemTitle>
 
                       {/* TODO: a better way to expose copy action */}
@@ -124,7 +145,7 @@ 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>
   );
@@ -150,10 +171,52 @@ const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
   return new URL(`/webhook/${spaceId}:${trigger.id}`, edgeUrl).toString();
 };
 
-const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTrigger) => {
+const getFunctionName = (functions: FunctionType[], trigger: FunctionTrigger) => {
   // 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: ScriptType) => (trigger: FunctionTrigger) => {
+  const fn = trigger.function?.target;
+  if (!Obj.instanceOf(FunctionType, fn)) {
+    return false;
+  }
+
+  return fn.source?.target === script;
+};
+
+const projectMatch = (project: DataType.Project) => {
+  const viewQueries = Function.pipe(
+    project.collections,
+    Array.map((collection) => collection.target),
+    Array.filter(Schema.is(DataType.View)),
+    Array.map((view) => Obj.getSnapshot(view).query.ast),
+    Array.map((ast) => JSON.stringify(ast)),
+  );
+
+  return (trigger: FunctionTrigger) => {
+    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.Any>().pipe(
+  Match.withReturnType<(trigger: FunctionTrigger) => boolean>(),
+  Match.when(
+    (obj) => Obj.instanceOf(ScriptType, obj),
+    (obj) => scriptMatch(obj),
+  ),
+  Match.when(
+    (obj) => Obj.instanceOf(DataType.Project, obj),
+    (obj) => projectMatch(obj),
+  ),
+  Match.orElse((_obj) => () => true),
+);

package/src/components/{AutomationContainer.tsx → AutomationSettings.tsx}

@@ -7,22 +7,24 @@ 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 AutomationContainer = (props: AutomationPanelProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+export const AutomationSettings = (props: AutomationPanelProps) => {
+  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} />
       </ControlSection>
     </ControlPage>
   );
 };
 
-export default AutomationContainer;
+export default AutomationSettings;

package/src/components/FunctionsContainer.tsx

@@ -8,17 +8,17 @@ 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';
 
 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>

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -2,18 +2,19 @@
 // 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 { SpaceAction } from '@dxos/plugin-space/types';
 import { Filter, type Space, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
-import { Button, useTranslation } from '@dxos/react-ui';
+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 { AUTOMATION_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 const grid = 'grid grid-cols-[1fr_auto] min-bs-[2.5rem]';
 
@@ -22,7 +23,7 @@ export type FunctionsPanelProps = {
 };
 
 export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const functions = useQuery(space, Filter.type(FunctionType));
   const scripts = useQuery(space, Filter.type(ScriptType));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -63,6 +64,11 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
     [functionToScriptMap, dispatch],
   );
 
+  const handleDelete = useCallback(
+    (func: FunctionType) => dispatch(createIntent(SpaceAction.RemoveObjects, { objects: [func] })),
+    [dispatch],
+  );
+
   return (
     <div role='none' className={mx(controlItemClasses)}>
       {functions.length > 0 && (
@@ -84,6 +90,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/TriggerEditor/FunctionInputEditor.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Ref, Type } from '@dxos/echo';
-import { type JsonPath } from '@dxos/echo-schema';
+import { type JsonPath } from '@dxos/echo/internal';
 import { type FunctionType } from '@dxos/functions';
 import { useOnTransition } from '@dxos/react-ui';
 import { Form, type FormInputStateProps, type QueryRefOptions, useFormValues } from '@dxos/react-ui-form';
@@ -39,7 +39,13 @@ 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', {}),
   );

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,16 +4,17 @@
 
 import React, { useCallback, useMemo } from 'react';
 
+import { Filter, Query } from '@dxos/echo';
 import { type FunctionTrigger, TriggerKinds, type TriggerType } from '@dxos/functions';
 import { useTranslation } from '@dxos/react-ui';
 import { type InputProps, SelectInput, useInputProps } from '@dxos/react-ui-form';
 
-import { AUTOMATION_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export type SpecSelectorProps = InputProps;
 
 export const SpecSelector = (props: SpecSelectorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const specProps = useInputProps(['spec' satisfies keyof FunctionTrigger]);
 
   const handleTypeChange = useCallback(
@@ -23,9 +24,14 @@ export const SpecSelector = (props: SpecSelectorProps) => {
           case 'timer':
             return { kind: 'timer', cron: '' };
           case 'subscription':
-            return { kind: 'subscription', filter: {} };
+            return {
+              kind: 'subscription',
+              query: {
+                ast: Query.select(Filter.nothing()).ast,
+              },
+            };
           case 'queue':
-            return { kind: 'queue', queue: '' };
+            return { kind: 'queue', queue: 'dxn:' };
           case 'email':
             return { kind: 'email' };
           case 'webhook':

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

@@ -2,33 +2,55 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
-import { Obj } from '@dxos/echo';
+import { Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
 import { FunctionTrigger, FunctionType } 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 { ContactType, useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { DataType } from '@dxos/schema';
 
 import { functions } from '../../testing';
 import { translations } from '../../translations';
 
-import { TriggerEditor } from './TriggerEditor';
+import { TriggerEditor, type TriggerEditorProps } from './TriggerEditor';
+
+const types = [
+  // TODO(burdon): Get label from annotation.
+  { value: Type.getTypename(DataType.Organization), label: 'Organization' },
+  { value: Type.getTypename(DataType.Person), label: 'Person' },
+  { value: Type.getTypename(DataType.Project), label: 'Project' },
+  { value: Type.getTypename(DataType.Employer), label: 'Employer' },
+];
 
-const DefaultStory = () => {
-  const spaces = useSpaces();
-  const space = spaces[1];
+const DefaultStory = (props: Partial<TriggerEditorProps>) => {
+  const { space } = useClientProvider();
   const [trigger, setTrigger] = useState<FunctionTrigger>();
-  useEffect(() => {
+  const tags = useQuery(space, Filter.type(Tag.Tag));
+
+  useAsyncEffect(async () => {
     if (!space) {
       return;
     }
 
-    const trigger = space.db.add(Obj.make(FunctionTrigger, { spec: { kind: 'timer', cron: '' } }));
+    const result = await space.db.query(Filter.type(FunctionType)).run();
+    const fn = result.objects.find((fn) => fn.name === 'example.com/function/forex');
+    invariant(fn);
+    const trigger = space.db.add(
+      Obj.make(FunctionTrigger, {
+        function: Ref.make(fn),
+        spec: { kind: 'webhook' },
+        input: {
+          from: 'USD',
+          to: 'JPY',
+        },
+      }),
+    );
     setTrigger(trigger);
   }, [space]);
 
@@ -38,7 +60,14 @@ 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)} />
+      <TriggerEditor
+        space={space}
+        trigger={trigger}
+        types={types}
+        tags={tags}
+        onSave={(values) => console.log('on save', values)}
+        {...props}
+      />
     </div>
   );
 };
@@ -48,11 +77,17 @@ const meta = {
   component: TriggerEditor as any,
   render: DefaultStory,
   decorators: [
+    withTheme,
+    withLayout({ container: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger, ContactType],
-      onSpaceCreated: ({ space }) => {
+      types: [Tag.Tag, FunctionType, FunctionTrigger, ContactType],
+      onCreateSpace: ({ space }) => {
+        space.db.add(Tag.make({ label: 'Important' }));
+        space.db.add(Tag.make({ label: 'Investor' }));
+        space.db.add(Tag.make({ label: 'New' }));
+
         for (const fn of functions) {
           space.db.add(Obj.make(FunctionType, fn));
         }
@@ -66,8 +101,6 @@ const meta = {
         });
       },
     }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
   ],
   parameters: {
     translations,
@@ -79,3 +112,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const ReadonlySpec: Story = {
+  args: {
+    readonlySpec: true,
+  },
+};

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -5,10 +5,12 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { ComputeGraph } from '@dxos/conductor';
-import { Type } from '@dxos/echo';
+import { type Query, Type } from '@dxos/echo';
 import { FunctionTrigger, FunctionType, ScriptType } from '@dxos/functions';
 import { Filter, Ref, type Space, useQuery } from '@dxos/react-client/echo';
-import { type CustomInputMap, Form, SelectInput, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+import { Input } from '@dxos/react-ui';
+import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
+import { type CustomInputMap, Form, InputHeader, SelectInput, useRefQueryLookupHandler } from '@dxos/react-ui-form';
 
 import { FunctionInputEditor, type FunctionInputEditorProps } from './FunctionInputEditor';
 import { SpecSelector } from './SpecSelector';
@@ -16,17 +18,19 @@ import { SpecSelector } from './SpecSelector';
 export type TriggerEditorProps = {
   space: Space;
   trigger: FunctionTrigger;
+  // TODO(wittjosiah): This needs to apply to whole spec but currently only applies to spec.kind & spec.query.
+  readonlySpec?: boolean;
   onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;
   onCancel?: () => void;
-};
+} & Pick<QueryFormProps, 'types' | 'tags'>;
 
-export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {
-  const handleSave = (values: FunctionTrigger) => {
+export const TriggerEditor = ({ space, trigger, readonlySpec, types, tags, onSave, onCancel }: TriggerEditorProps) => {
+  const handleSave = ({ id: _, ...values }: FunctionTrigger) => {
     onSave?.(values);
   };
 
   const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-  const Custom = useCustomInputs(space, handleRefQueryLookup);
+  const Custom = useCustomInputs({ space, readonlySpec, types, tags, onQueryRefOptions: handleRefQueryLookup });
 
   return (
     <Form
@@ -41,7 +45,13 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
   );
 };
 
-const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorProps['onQueryRefOptions']) => {
+type UseCustomInputsProps = {
+  space: Space;
+  readonlySpec?: boolean;
+  onQueryRefOptions: FunctionInputEditorProps['onQueryRefOptions'];
+} & Pick<QueryFormProps, 'types' | 'tags'>;
+
+const useCustomInputs = ({ space, readonlySpec, types, tags, onQueryRefOptions }: UseCustomInputsProps) => {
   const functions = useQuery(space, Filter.type(FunctionType));
   const workflows = useQuery(space, Filter.type(ComputeGraph));
   const scripts = useQuery(space, Filter.type(ScriptType));
@@ -80,14 +90,30 @@ const useCustomInputs = (space: Space, onQueryRefOptions: FunctionInputEditorPro
       },
 
       // Spec selector.
-      ['spec.kind' as const]: SpecSelector,
+      ['spec.kind' as const]: (props) => <SpecSelector {...props} readonly={readonlySpec ? 'disabled-input' : false} />,
+
+      // TODO(wittjosiah): Copied from ViewEditor.
+      // Query input editor.
+      ['spec.query' as const]: (props) => {
+        const handleChange = useCallback(
+          (query: Query.Any) => props.onValueChange('object', { ast: query.ast }),
+          [props.onValueChange],
+        );
+
+        return (
+          <Input.Root>
+            <InputHeader label={props.label} />
+            <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} />
       ),
     }),
-    [workflows, scripts, functions],
+    [workflows, scripts, functions, readonlySpec],
   );
 };
 

package/src/components/TriggerSettings.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type Space } from '@dxos/react-client/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 = ({ space }: { space: Space }) => {
+  const { triggers, isRunning, start, stop } = useTriggerRuntimeControls(space);
+  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/events.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineEvent } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export namespace AutomationEvents {
+  export const ComputeRuntimeReady = defineEvent(`${meta.id}/event/compute-runtime-ready`);
+}

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,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type * as Effect from 'effect/Effect';
+import { useCallback } from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+import type { Space } from '@dxos/react-client/echo';
+
+import { AutomationCapabilities } from '../capabilities';
+
+/**
+ * Create an effectful function that has access to compute services
+ */
+export const useComputeRuntimeCallback = <T>(
+  space: Space | undefined,
+  fn: () => Effect.Effect<T, any, AutomationCapabilities.ComputeServices>,
+  deps?: React.DependencyList,
+): (() => Promise<T>) => {
+  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+  const runtime = space !== undefined ? computeRuntime.getRuntime(space.id) : undefined;
+
+  return useCallback(() => {
+    if (!runtime) {
+      throw new TypeError('Space not provided to useComputeRuntimeCallback');
+    }
+    return runtime.runPromise(fn());
+  }, [runtime, ...(deps ?? [])]);
+};