@dxos/plugin-automation 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/components/AutomationPanel/TriggerEdgeMetadata.tsx

@@ -0,0 +1,148 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Trigger } from '@dxos/compute';
+import { type TriggersDispatcherStatus } from '@dxos/edge-client';
+import { useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+import { type EdgeTriggersDispatcherStatusState } from '../../hooks';
+
+const formatTimestamp = (timestamp?: number): string | undefined =>
+  timestamp != null ? new Date(timestamp).toLocaleString() : undefined;
+
+const formatRemaining = (remainingMs?: number): string | undefined => {
+  if (remainingMs == null) {
+    return undefined;
+  }
+  const totalSeconds = Math.max(0, Math.round(remainingMs / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+};
+
+export type TriggerDispatcherSummaryProps = {
+  status: TriggersDispatcherStatus | undefined;
+  error: boolean;
+  loading: boolean;
+  /** Timer triggers shown in the list (used for registered count). */
+  timerTriggers: Trigger.Trigger[];
+};
+
+export const TriggerDispatcherSummary = ({ status, error, loading, timerTriggers }: TriggerDispatcherSummaryProps) => {
+  const { t } = useTranslation(meta.id);
+
+  if (loading && !status) {
+    return <div className='text-xs text-description px-2 pb-2'>{t('edge.trigger.status.loading.message')}</div>;
+  }
+
+  if (error && !status) {
+    return <div className='text-xs text-error-text px-2 pb-2'>{t('edge.trigger.status.unavailable.message')}</div>;
+  }
+
+  if (!status) {
+    return null;
+  }
+
+  const enabledTimerCount = timerTriggers.filter((trigger) => trigger.enabled).length;
+  const registeredEnabledCount = timerTriggers.filter(
+    (trigger) => trigger.enabled && status.registeredTriggers.includes(trigger.id),
+  ).length;
+
+  const lines = [
+    t('edge.trigger.status.dispatcher.label', {
+      state: status.isActive ? t('edge.trigger.status.active.label') : t('edge.trigger.status.inactive.label'),
+    }),
+    timerTriggers.length > 0 &&
+      t('edge.trigger.status.registered.count.label', {
+        registered: registeredEnabledCount,
+        total: enabledTimerCount,
+      }),
+    status.nextCronTaskRunTimestamp != null &&
+      t('edge.trigger.status.next.cron.label', { time: formatTimestamp(status.nextCronTaskRunTimestamp) }),
+    status.nextAlarmTimestamp != null &&
+      t('edge.trigger.status.next.alarm.label', { time: formatTimestamp(status.nextAlarmTimestamp) }),
+    status.remainingMs != null &&
+      t('edge.trigger.status.inactivity.label', { remaining: formatRemaining(status.remainingMs) }),
+  ].filter((line): line is string => Boolean(line));
+
+  if (lines.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col gap-0.5 text-xs text-description px-2 pb-2'>
+      {lines.map((line) => (
+        <div key={line}>{line}</div>
+      ))}
+    </div>
+  );
+};
+
+export type TriggerEdgeMetadataProps = {
+  trigger: Trigger.Trigger;
+  edgeStatus: Pick<EdgeTriggersDispatcherStatusState, 'status' | 'loading' | 'error'>;
+};
+
+export const TriggerEdgeMetadata = ({ trigger, edgeStatus }: TriggerEdgeMetadataProps) => {
+  const { t } = useTranslation(meta.id);
+  const { status, loading, error } = edgeStatus;
+
+  const registration = useMemo(() => {
+    if (trigger.spec?.kind !== 'timer') {
+      return { kind: 'na' as const };
+    }
+    if (!status) {
+      return { kind: 'unknown' as const };
+    }
+    return {
+      kind: 'cron' as const,
+      registered: status.registeredTriggers.includes(trigger.id),
+    };
+  }, [status, trigger.id, trigger.spec?.kind]);
+
+  if (loading && !status) {
+    return <div className='text-xs text-description ml-4 truncate'>{t('edge.trigger.status.loading.message')}</div>;
+  }
+
+  if (error && !status) {
+    return null;
+  }
+
+  if (!status) {
+    return null;
+  }
+
+  if (registration.kind === 'na') {
+    return <div className='text-xs text-description ml-4 truncate'>{t('edge.trigger.status.cron.na.label')}</div>;
+  }
+
+  const enabled = trigger.enabled ?? false;
+  const registered = registration.kind === 'cron' && registration.registered;
+
+  const label = registered ? t('edge.trigger.status.registered.label') : t('edge.trigger.status.not.registered.label');
+
+  const classNames = mx(
+    'text-xs ml-4 truncate',
+    registered ? 'text-success-text' : enabled ? 'text-warning-text' : 'text-description',
+  );
+
+  const detail = registration.kind === 'cron' && !enabled ? t('edge.trigger.status.disabled.detail.label') : undefined;
+
+  return (
+    <div className='flex flex-col gap-0.5 min-w-0'>
+      <div className={classNames}>
+        {label}
+        {detail && <span className='text-description'> · {detail}</span>}
+      </div>
+    </div>
+  );
+};

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -6,17 +6,17 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-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 { 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/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type FunctionsPanelProps = {
   space: Space;
@@ -24,7 +24,7 @@ export type FunctionsPanelProps = {
 
 export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   const { t } = useTranslation(meta.id);
-  const functions = useQuery(space.db, Filter.type(Function.Function));
+  const functions = useQuery(space.db, Filter.type(Operation.PersistentOperation));
   const scripts = useQuery(space.db, Filter.type(Script.Script));
   const { invokePromise } = useOperationInvoker();
 
@@ -47,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;
     },
@@ -55,45 +55,55 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   );
 
   const handleGoToScript = useCallback(
-    (func: Function.Function) => {
+    (func: Operation.PersistentOperation) => {
       const script = functionToScriptMap[func.id];
       if (script) {
-        void invokePromise(LayoutOperation.Open, { subject: [Obj.getDXN(script).toString()] });
+        void invokePromise(LayoutOperation.Open, { subject: [getObjectPathFromObject(script)] });
       }
     },
     [functionToScriptMap, invokePromise],
   );
 
   const handleDelete = useCallback(
-    (func: Function.Function) => invokePromise(SpaceOperation.RemoveObjects, { objects: [func] }),
+    (func: Operation.PersistentOperation) => invokePromise(SpaceOperation.RemoveObjects, { objects: [func] }),
     [invokePromise],
   );
 
   return (
-    <Settings.Container>
+    <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 w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<Operation.PersistentOperation>
                   key={func.id}
                   item={func}
-                  classNames={mx('grid grid-cols-[1fr_auto] min-h-[2.5rem] min-h-[3rem] px-2 items-center', ghostHover)}
+                  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>
@@ -102,8 +112,6 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
           )}
         </List.Root>
       )}
-
-      {functions.length === 0 && <div className='text-center py-4 text-description'>{t('no functions found')}</div>}
-    </Settings.Container>
+    </Settings.Panel>
   );
 };

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -6,16 +6,18 @@ import * as Schema from 'effect/Schema';
 import { useState } from 'react';
 import React, { useCallback } from 'react';
 
-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 { 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/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 const grid = 'grid grid-cols-[1fr_1fr_auto] min-h-[2.5rem]';
 
@@ -26,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.db, 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';
@@ -44,42 +47,51 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
 
   useAsyncEffect(async () => {
     setLoading(true);
-    const functions = await getDeployedFunctions(client, true);
+    const functions = await getDeployedFunctions(Context.default(), 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();
+    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;
       }
-      Function.setFrom(existingFunc, func);
+      OperationModule.Operation.setFrom(existingFunc, func);
     },
     [space],
   );
 
   return (
-    <Settings.Container>
+    <Settings.Panel>
       {functions.length > 0 && (
-        <List.Root<Function.Function> items={functions} isItem={Schema.is(Function.Function)} getId={(func) => func.id}>
+        <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 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', '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>
@@ -89,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)}
@@ -101,10 +113,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
         </List.Root>
       )}
 
-      {functions.length === 0 && !loading && (
-        <div className='text-center py-4 text-gray-500'>{t('no functions found')}</div>
-      )}
-      {loading && <div className='text-center py-4 text-gray-500'>{t('loading functions')}</div>}
-    </Settings.Container>
+      {loading && <div className='text-center py-4 text-gray-500'>{t('loading-functions.message')}</div>}
+    </Settings.Panel>
   );
 };

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -5,32 +5,28 @@
 import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
 
+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, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldStateProps, type FormRootProps, useFormValues } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+
+import { findOperationByUri } from './util';
 
 export type FunctionInputEditorProps = {
   type: SchemaAST.AST;
-  functions: Function.Function[];
+  functions: Operation.PersistentOperation[];
   db?: Database.Database;
 } & FormFieldStateProps;
 
 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);
-    }
-  }, [selectedFunctionValue]);
-
   const selectedFunction = useMemo(
-    () => functions.find((fn) => fn.id === selectedFunctionId),
-    [functions, selectedFunctionId],
+    () => (Ref.isRef(selectedFunctionValue) ? findOperationByUri(functions, selectedFunctionValue.uri) : undefined),
+    [functions, selectedFunctionValue],
   );
 
   useOnTransition(
@@ -41,7 +37,7 @@ export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChan
         return false;
       }
 
-      return prevValue.dxn.toString() !== selectedFunctionValue.dxn.toString();
+      return prevValue.uri !== selectedFunctionValue.uri;
     },
     (currValue) => currValue !== undefined,
     () => onValueChange(type, {}),
@@ -68,7 +64,7 @@ export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChan
 
   return (
     <>
-      <Form.Label label={t('function parameters label')} asChild />
+      <Form.Label label={t('function-parameters.label')} asChild />
       <Form.Root
         key={selectedFunction.id}
         schema={effectSchema}

package/src/components/TriggerEditor/SpecSelector.tsx

@@ -4,12 +4,12 @@
 
 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 FormFieldComponentProps, SelectField, useFormFieldState } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type SpecSelectorProps = FormFieldComponentProps;
 
@@ -22,20 +22,15 @@ export const SpecSelector = (props: SpecSelectorProps) => {
       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:queue:default' };
+            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;
         }
@@ -52,11 +47,20 @@ export const SpecSelector = (props: SpecSelectorProps) => {
     [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],
   );

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

@@ -6,28 +6,28 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
+import { Operation, Trigger } from '@dxos/compute';
 import { Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
-import { Function, Trigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { useQuery } from '@dxos/react-client/echo';
 import { TestSchema, useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { translations as formTranslations } from '@dxos/react-ui-form';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
-import { functions } from '../../testing';
-import { translations } from '../../translations';
+import { functions, registryFunctions } from '#testing';
+import { translations } from '#translations';
 
 import { TriggerEditor, type TriggerEditorProps } from './TriggerEditor';
 
 const types = [
   // TODO(burdon): Get label from annotation.
-  { value: Organization.Organization.typename, label: 'Organization' },
-  { value: Person.Person.typename, label: 'Person' },
+  { value: Type.getTypename(Organization.Organization), label: 'Organization' },
+  { value: Type.getTypename(Person.Person), label: 'Person' },
   { value: Type.getTypename(Pipeline.Pipeline), label: 'Project' },
-  { value: Employer.Employer.typename, label: 'Employer' },
+  { value: Type.getTypename(Employer.Employer), label: 'Employer' },
 ];
 
 const DefaultStory = (props: Partial<TriggerEditorProps>) => {
@@ -40,13 +40,13 @@ const DefaultStory = (props: Partial<TriggerEditorProps>) => {
       return;
     }
 
-    const functions = await space.db.query(Filter.type(Function.Function)).run();
-    const fn = functions.find((fn) => fn.name === 'example.com/function/forex');
+    const functions = await space.db.query(Filter.type(Operation.PersistentOperation)).run();
+    const fn = functions.find((fn) => fn.name === 'com.example.function.forex');
     invariant(fn);
     const trigger = space.db.add(
       Trigger.make({
         function: Ref.make(fn),
-        spec: { kind: 'webhook' },
+        spec: Trigger.specWebhook(),
         input: {
           from: 'USD',
           to: 'JPY',
@@ -82,23 +82,39 @@ const meta = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [Tag.Tag, Function.Function, Trigger.Trigger, TestSchema.ContactType],
+      types: [Tag.Tag, Operation.PersistentOperation, Trigger.Trigger, TestSchema.ContactType],
       onCreateSpace: ({ space }) => {
         // Tags.
         ['Important', 'Investor', 'New'].forEach((label) => {
           space.db.add(Tag.make({ label }));
         });
 
-        // Functions.
+        // Functions in the local space.
         functions.forEach((fn) => {
-          space.db.add(Function.make(fn));
+          const { key, version, ...data } = fn;
+          space.db.add(
+            Obj.make(Operation.PersistentOperation, {
+              [Obj.Meta]: { key, version: version ?? '0.1.0' },
+              ...data,
+            }),
+          );
         });
 
+        // Functions in the registry (simulate built-in / plugin-provided operations).
+        space.db.registry.add(
+          registryFunctions.map(({ key, version, ...data }) =>
+            Obj.make(Operation.PersistentOperation, {
+              [Obj.Meta]: { key, version: version ?? '0.1.0' },
+              ...data,
+            }),
+          ),
+        );
+
         // Objects.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
             Obj.make(TestSchema.ContactType, {
-              name: faker.person.fullName(),
+              name: random.person.fullName(),
               identifiers: [],
             }),
           );
@@ -159,8 +175,10 @@ export const Spec: Story = {
     await expect(combobox).not.toBeDisabled();
     await expect(canvas.queryByLabelText('Method')).not.toBeInTheDocument();
 
-    // Queue — should show DXN field (the queue address).
-    await selectKind(combobox, 'q');
-    await expect(canvas.findByLabelText('DXN')).resolves.toBeInTheDocument();
+    // Feed — should show the Feed selector field (a Ref(Feed) combobox). The combobox
+    // isn't associated with its label, so match the field's <label> element directly.
+    await selectKind(combobox, 'f');
+    await expect(combobox).not.toBeDisabled();
+    await expect(await canvas.findByText('Feed', { selector: 'label' })).toBeInTheDocument();
   },
 };