@dxos/plugin-automation 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -8,24 +8,27 @@ import * as Match from 'effect/Match';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Filter, Obj, Tag } from '@dxos/echo';
-import { Function, Script, Trigger } from '@dxos/functions';
+import { useTypeOptions } from '@dxos/app-toolkit/ui';
+import { Script, Trigger } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
+import { Context } from '@dxos/context';
+import { Filter, Obj, Query, Tag } from '@dxos/echo';
 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, useObject, useQuery } from '@dxos/react-client/echo';
-import { Clipboard, IconButton, Input, Separator, useTranslation } from '@dxos/react-ui';
+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 { Pipeline } from '@dxos/types';
 import { ghostHover, mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+
 import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
 
-const grid = 'grid grid-cols-[40px_1fr_32px_32px] min-bs-[2.5rem]';
+const grid = 'grid grid-cols-[40px_1fr_32px_32px] min-h-[2.5rem]';
 
 export type AutomationPanelProps = {
   space: Space;
@@ -39,8 +42,11 @@ export const AutomationPanel = ({ space, object, initialTrigger, onDone }: Autom
   const { t } = useTranslation(meta.id);
   const client = useClient();
   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 functions = useQuery(space.db, Filter.type(Operation.PersistentOperation));
+  const triggers = useQuery(
+    space.db,
+    Query.select(Filter.type(Trigger.Trigger)).debugLabel('plugin-automation.AutomationPanel'),
+  );
   const filteredTriggers = useMemo(() => {
     return object ? triggers.filter(triggerMatch(object)) : triggers;
   }, [object, triggers]);
@@ -50,7 +56,6 @@ export const AutomationPanel = ({ space, object, initialTrigger, onDone }: Autom
     annotation: {
       location: ['database', 'runtime'],
       kind: ['user'],
-      registered: ['registered'],
     },
   });
 
@@ -75,8 +80,8 @@ export const AutomationPanel = ({ space, object, initialTrigger, onDone }: Autom
 
   const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
     if (selected) {
-      Obj.change(selected, (mutable) => {
-        Object.assign(mutable, trigger);
+      Obj.update(selected, (selected) => {
+        Object.assign(selected, trigger);
       });
     } else {
       space.db.add(Trigger.make(trigger));
@@ -93,19 +98,19 @@ export const AutomationPanel = ({ space, object, initialTrigger, onDone }: Autom
   };
 
   const handleForceRunTrigger = async (trigger: Trigger.Trigger) => {
-    await functionsServiceClient.forceRunCronTrigger(space.id, trigger.id);
+    await functionsServiceClient.forceRunCronTrigger(Context.default(), space.id, trigger.id);
   };
 
   const handleResetCursor = async (trigger: Trigger.Trigger) => {
-    Obj.change(trigger, (t) => {
-      Obj.deleteKeys(t, KEY_QUEUE_CURSOR);
+    Obj.update(trigger, (trigger) => {
+      Obj.deleteKeys(trigger, KEY_QUEUE_CURSOR);
     });
     await space.db.flush({ indexes: true });
   };
 
   if (trigger) {
     return (
-      <Settings.Item title={t('trigger editor title')}>
+      <Settings.Item title={t('trigger-editor.title')} description={t('trigger-editor.description')}>
         <TriggerEditor
           db={space.db}
           trigger={trigger}
@@ -120,34 +125,36 @@ export const AutomationPanel = ({ space, object, initialTrigger, onDone }: Autom
   }
 
   return (
-    <Settings.Container>
-      {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) => (
-                <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' />}
-      <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-    </Settings.Container>
+    <Settings.Panel>
+      <Clipboard.Provider>
+        {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 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='my-4' />}
+        <IconButton icon='ph--plus--regular' label={t('new-trigger.label')} onClick={handleAdd} />
+      </Clipboard.Provider>
+    </Settings.Panel>
   );
 };
 
@@ -160,7 +167,7 @@ const TriggerListItem = ({
   onForceRun,
 }: {
   trigger: Trigger.Trigger;
-  functions: Function.Function[];
+  functions: Operation.PersistentOperation[];
   onSelect?: (trigger: Trigger.Trigger) => void;
   onDelete?: (trigger: Trigger.Trigger) => void;
   onResetCursor?: (trigger: Trigger.Trigger) => void;
@@ -195,18 +202,38 @@ const TriggerListItem = ({
     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', 'pli-2')}
+      classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
     >
       <Input.Root>
         <Input.Switch checked={enabled} onCheckedChange={onEnabledChange} />
       </Input.Root>
 
       <div className={'flex'}>
-        <List.ItemTitle classNames='pli-1 cursor-pointer is-0 shrink truncate' onClick={handleSelect}>
+        <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>
@@ -216,24 +243,7 @@ const TriggerListItem = ({
         )}
       </div>
 
-      {trigger.spec?.kind === 'timer' && onForceRun && (
-        <List.ItemButton
-          autoHide={false}
-          disabled={!enabled || trigger.spec?.kind !== 'timer'}
-          icon='ph--play--regular'
-          label='Force run'
-          onClick={handleForceRun}
-        />
-      )}
-      {trigger.spec?.kind === 'queue' && onResetCursor && (
-        <List.ItemButton
-          autoHide={false}
-          disabled={!cursor}
-          icon='ph--arrow-clockwise--regular'
-          label='Reset cursor'
-          onClick={handleResetCursor}
-        />
-      )}
+      {actionProps ? <List.ItemIconButton {...actionProps} autoHide={false} /> : <div />}
 
       {onDelete && <List.ItemDeleteButton onClick={handleDelete} />}
     </List.Item>
@@ -266,7 +276,7 @@ const getWebhookUrl = (client: Client, trigger: Trigger.Trigger) => {
   return new URL(`/webhook/${spaceId}:${trigger.id}`, edgeUrl).toString();
 };
 
-const getFunctionName = (functions: Function.Function[], trigger: Trigger.Trigger) => {
+const getFunctionName = (functions: Operation.PersistentOperation[], 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)}…`;
@@ -276,7 +286,7 @@ const getFunctionName = (functions: Function.Function[], trigger: Trigger.Trigge
 
 const scriptMatch = (script: Script.Script) => (trigger: Trigger.Trigger) => {
   const fn = trigger.function?.target;
-  if (!Obj.instanceOf(Function.Function, fn)) {
+  if (!Obj.instanceOf(Operation.PersistentOperation, fn)) {
     return false;
   }
 

package/src/components/FunctionsPanel/FunctionsPanel.tsx

@@ -6,17 +6,16 @@ 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 { LayoutOperation, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { Operation, Script } from '@dxos/compute';
+import { SpaceOperation } from '@dxos/plugin-space';
 import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { Button, IconButton, useTranslation } from '@dxos/react-ui';
+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 +23,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 +46,7 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
   );
 
   const getScriptName = useCallback(
-    (func: Function.Function) => {
+    (func: Operation.PersistentOperation) => {
       const script = functionToScriptMap[func.id];
       return script?.name;
     },
@@ -55,48 +54,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(Operation.PersistentOperation)}
+          getId={(func) => func.id}
+        >
           {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
+            <div role='list' className='flex flex-col w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<Operation.PersistentOperation>
                   key={func.id}
                   item={func}
                   classNames={mx(
-                    'grid grid-cols-[1fr_auto] min-bs-[2.5rem] min-bs-[3rem] pli-2 items-center',
+                    '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>
@@ -105,8 +111,6 @@ export const FunctionsPanel = ({ space }: FunctionsPanelProps) => {
           )}
         </List.Root>
       )}
-
-      {functions.length === 0 && <div className='text-center plb-4 text-description'>{t('no functions found')}</div>}
-    </Settings.Container>
+    </Settings.Panel>
   );
 };

package/src/components/FunctionsRegistry/FunctionsRegistry.tsx

@@ -6,7 +6,8 @@ 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 { getDeployedFunctions } from '@dxos/functions-runtime/edge';
 import { useClient } from '@dxos/react-client';
 import { Filter, Query, type Space, useQuery } from '@dxos/react-client/echo';
@@ -15,9 +16,9 @@ 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-bs-[2.5rem]';
+const grid = 'grid grid-cols-[1fr_1fr_auto] min-h-[2.5rem]';
 
 type FunctionsRegistryProps = {
   space: Space;
@@ -26,12 +27,12 @@ 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 state = (func: OperationModule.Operation.PersistentOperation) => {
     const dbFunction = dbFunctions.find((f) => f.key === func.key);
     if (!dbFunction) {
       return 'import';
@@ -44,35 +45,41 @@ 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 functions = await space.db
+        .query(Query.type(OperationModule.Operation.PersistentOperation, { key: func.key }))
+        .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(OperationModule.Operation.PersistentOperation)}
+          getId={(func) => func.id}
+        >
           {({ items }) => (
-            <div role='list' className='flex flex-col is-full'>
+            <div role='list' className='flex flex-col w-full'>
               {items?.map((func) => (
-                <List.Item<Function.Function>
+                <List.Item<OperationModule.Operation.PersistentOperation>
                   key={func.id}
                   item={func}
-                  classNames={mx(grid, ghostHover, 'items-center', 'pli-2', 'min-bs-[3rem]')}
+                  classNames={mx(grid, ghostHover, 'items-center', 'px-2', 'min-h-[3rem]')}
                 >
                   <div className='flex flex-col truncate'>
                     <List.ItemTitle classNames='truncate'>{func.name}</List.ItemTitle>
@@ -89,7 +96,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 +108,7 @@ export const FunctionsRegistry = ({ space }: FunctionsRegistryProps) => {
         </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>}
-    </Settings.Container>
+      {loading && <div className='text-center py-4 text-gray-500'>{t('loading-functions.message')}</div>}
+    </Settings.Panel>
   );
 };

package/src/components/FunctionsRegistry/index.ts

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

package/src/components/TriggerEditor/FunctionInputEditor.tsx

@@ -5,17 +5,17 @@
 import type * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Obj, Ref, Type } from '@dxos/echo';
+import { type Operation } from '@dxos/compute';
+import { type Database, JsonSchema, Obj, Ref } from '@dxos/echo';
 import { type JsonPath } from '@dxos/echo/internal';
-import { type Function } from '@dxos/functions';
 import { useOnTransition, 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';
 
 export type FunctionInputEditorProps = {
   type: SchemaAST.AST;
-  functions: Function.Function[];
+  functions: Operation.PersistentOperation[];
   db?: Database.Database;
 } & FormFieldStateProps;
 
@@ -48,7 +48,7 @@ export const FunctionInputEditor = ({ type, functions, db, getValue, onValueChan
   );
 
   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() ?? {};
@@ -68,7 +68,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,
-              },
-            };
+            return Trigger.specSubscription(Query.select(Filter.nothing()));
           case 'queue':
-            return { kind: 'queue', queue: 'dxn:' };
+            return Trigger.specQueue('dxn:queue:default');
           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'),
+    queue: t('trigger-type.queue.label'),
+  };
+
   const options = useMemo(
     () =>
       Trigger.Kinds.map((kind) => ({
         value: kind,
-        label: t(`trigger type ${kind}`),
+        label: kindLabels[kind],
       })),
     [t],
   );