@dxos/plugin-automation 0.8.4-main.406dc2a → 0.8.4-main.43cb759274

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -3,60 +3,85 @@
 //
 
 import * as Array from 'effect/Array';
-import * as Function from 'effect/Function';
+import * as Effect from 'effect/Effect';
+import * as EFn from 'effect/Function';
 import * as Match from 'effect/Match';
 import * as Schema from 'effect/Schema';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { Filter, Obj, Tag } from '@dxos/echo';
-import { FunctionTrigger, FunctionType, ScriptType } from '@dxos/functions';
-import { useTypeOptions } from '@dxos/plugin-space';
+import { useProcessManagerRuntime } from '@dxos/app-framework/ui';
+import { useTypeOptions } from '@dxos/app-toolkit/ui';
+import { type ComputeEnvironment } from '@dxos/client-protocol';
+import { Operation, Script, ServiceResolver, Trigger, TriggerEvent } from '@dxos/compute';
+import { Context } from '@dxos/context';
+import { Filter, Obj, Query, Tag, Type } from '@dxos/echo';
+import { KEY_FEED_CURSOR, TriggerDispatcher } from '@dxos/functions-runtime';
+import { FunctionsServiceClient } from '@dxos/functions-runtime/edge';
+import { log } from '@dxos/log';
 import { type Client, useClient } from '@dxos/react-client';
-import { type Space, getSpace, useQuery } from '@dxos/react-client/echo';
-import { Clipboard, IconButton, Input, Separator, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { ControlItem, controlItemClasses } from '@dxos/react-ui-form';
+import { type Space, useObject, useQuery } from '@dxos/react-client/echo';
+import { Clipboard, IconButton, type IconButtonProps, Input, Separator, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { List } from '@dxos/react-ui-list';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
+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 { type EdgeTriggersDispatcherStatusState, useEdgeTriggersDispatcherStatus } from '../../hooks';
 import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
+import { TriggerDispatcherSummary, TriggerEdgeMetadata } from './TriggerEdgeMetadata';
 
-const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
+const grid = 'grid grid-cols-[40px_1fr_32px_32px] min-h-[2.5rem]';
 
-export type AutomationPanelProps = ThemedClassName<{
+export type AutomationPanelProps = {
   space: Space;
-  object?: Obj.Any;
-  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) => {
+export const AutomationPanel = ({ space, object, initialTrigger, onDone }: AutomationPanelProps) => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
-  const functions = useQuery(space, Filter.type(FunctionType));
-  const triggers = useQuery(space, Filter.type(FunctionTrigger));
+  const processManagerRuntime = useProcessManagerRuntime();
+  const [properties] = useObject(space.properties);
+  const computeEnvironment = properties.computeEnvironment ?? 'local';
+  const edgeDispatcherStatus = useEdgeTriggersDispatcherStatus(space.id, computeEnvironment === 'edge');
+  const functionsServiceClient = useMemo(() => FunctionsServiceClient.fromClient(client), [client]);
+  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]);
-  const tags = useQuery(space, Filter.type(Tag.Tag));
-  const types = useTypeOptions({ space, annotation: ['dynamic', 'limited-static', 'object-form'] });
+  const tags = useQuery(space.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    db: space.db,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+    },
+  });
 
-  const [trigger, setTrigger] = useState<FunctionTrigger | undefined>(initialTrigger);
-  const [selected, setSelected] = useState<FunctionTrigger>();
+  const [trigger, setTrigger] = useState<Trigger.Trigger | undefined>(initialTrigger);
+  const [selected, setSelected] = useState<Trigger.Trigger>();
 
-  const handleSelect = (trigger: FunctionTrigger) => {
+  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);
@@ -64,9 +89,11 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
 
   const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
     if (selected) {
-      Object.assign(selected, trigger);
+      Obj.update(selected, (selected) => {
+        Object.assign(selected, trigger);
+      });
     } else {
-      space.db.add(Obj.make(FunctionTrigger, trigger));
+      space.db.add(Trigger.make(trigger));
     }
 
     setTrigger(undefined);
@@ -79,11 +106,47 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
     onDone?.();
   };
 
+  const handleForceRunTrigger = async (trigger: Trigger.Trigger) => {
+    if (computeEnvironment === 'disabled') {
+      return;
+    }
+
+    if (computeEnvironment === 'local') {
+      try {
+        await processManagerRuntime.runPromise(
+          Effect.gen(function* () {
+            const dispatcher = yield* TriggerDispatcher;
+            yield* dispatcher.invokeTrigger({
+              trigger,
+              event: { tick: Date.now() } satisfies TriggerEvent.TimerEvent,
+            });
+          }).pipe(Effect.provide(ServiceResolver.provide({ space: space.id }, TriggerDispatcher))),
+        );
+      } catch (error) {
+        log.catch(error);
+      }
+      return;
+    }
+
+    try {
+      await functionsServiceClient.forceRunCronTrigger(Context.default(), space.id, trigger.id);
+    } catch (error) {
+      log.catch(error);
+    }
+  };
+
+  const handleResetCursor = async (trigger: Trigger.Trigger) => {
+    Obj.update(trigger, (trigger) => {
+      Obj.deleteKeys(trigger, KEY_FEED_CURSOR);
+    });
+    await space.db.flush({ indexes: true });
+  };
+
   if (trigger) {
     return (
-      <ControlItem title={t('trigger editor title')}>
+      <Settings.Item title={t('trigger-editor.title')} description={t('trigger-editor.description')}>
         <TriggerEditor
-          space={space}
+          db={space.db}
           trigger={trigger}
           readonlySpec={Boolean(object)}
           tags={tags}
@@ -91,113 +154,210 @@ export const AutomationPanel = ({ classNames, space, object, initialTrigger, onD
           onSave={handleSave}
           onCancel={handleCancel}
         />
-      </ControlItem>
+      </Settings.Item>
     );
   }
 
   return (
-    <div className={mx(controlItemClasses, classNames)}>
-      {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'>
-              {filteredTriggers?.map((trigger) => {
-                const copyAction = getCopyAction(client, trigger);
-                return (
-                  <List.Item<FunctionTrigger>
+    <Settings.Panel>
+      <Clipboard.Provider>
+        {computeEnvironment === 'edge' && (
+          <TriggerDispatcherSummary
+            status={edgeDispatcherStatus.status}
+            error={edgeDispatcherStatus.error}
+            loading={edgeDispatcherStatus.loading}
+            timerTriggers={filteredTriggers.filter((trigger) => trigger.spec?.kind === 'timer')}
+          />
+        )}
+
+        {filteredTriggers.length > 0 && (
+          <List.Root<Trigger.Trigger>
+            items={filteredTriggers}
+            isItem={Schema.is(Type.getSchema(Trigger.Trigger))}
+            getId={(field) => field.id}
+          >
+            {({ items: filteredTriggers }) => (
+              <div role='list' className='flex flex-col w-full'>
+                {filteredTriggers?.map((trigger) => (
+                  <TriggerListItem
                     key={trigger.id}
-                    item={trigger}
-                    classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
-                  >
-                    <Input.Root>
-                      <Input.Switch
-                        checked={trigger.enabled}
-                        onCheckedChange={(checked) => (trigger.enabled = checked)}
-                      />
-                    </Input.Root>
-
-                    <div className={'flex'}>
-                      <List.ItemTitle
-                        classNames='px-1 cursor-pointer w-0 shrink truncate'
-                        onClick={() => handleSelect(trigger)}
-                      >
-                        {getFunctionName(functions, trigger) ?? '∅'}
-                      </List.ItemTitle>
-
-                      {/* TODO: a better way to expose copy action */}
-                      {copyAction && (
-                        <Clipboard.IconButton
-                          label={t(copyAction.translationKey)}
-                          value={copyAction.contentProvider()}
-                        />
-                      )}
-                    </div>
-
-                    <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-                  </List.Item>
-                );
-              })}
-            </div>
+                    trigger={trigger}
+                    functions={functions}
+                    computeEnvironment={computeEnvironment}
+                    edgeDispatcherStatus={edgeDispatcherStatus}
+                    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>
+  );
+};
+
+const TriggerListItem = ({
+  trigger,
+  functions,
+  computeEnvironment,
+  edgeDispatcherStatus,
+  onSelect,
+  onDelete,
+  onResetCursor,
+  onForceRun,
+}: {
+  trigger: Trigger.Trigger;
+  functions: Operation.PersistentOperation[];
+  computeEnvironment: ComputeEnvironment;
+  edgeDispatcherStatus?: EdgeTriggersDispatcherStatusState;
+  onSelect?: (trigger: Trigger.Trigger) => void;
+  onDelete?: (trigger: Trigger.Trigger) => void;
+  onResetCursor?: (trigger: Trigger.Trigger) => void;
+  onForceRun?: (trigger: Trigger.Trigger) => void;
+}) => {
+  const client = useClient();
+  const copyAction = getCopyAction(client, trigger);
+  const { t } = useTranslation(meta.id);
+  const cursor = Obj.getKeys(trigger, KEY_FEED_CURSOR).at(0)?.id;
+  const [snapshot, updateTrigger] = useObject(trigger);
+
+  const enabled = snapshot.enabled ?? false;
+  const onEnabledChange = (checked: boolean) => {
+    updateTrigger((trigger) => {
+      trigger.enabled = checked;
+    });
+  };
+
+  const handleSelect = useCallback(() => {
+    onSelect?.(trigger);
+  }, [onSelect, trigger]);
+
+  const handleDelete = useCallback(() => {
+    onDelete?.(trigger);
+  }, [onDelete, trigger]);
+
+  const handleResetCursor = useCallback(() => {
+    onResetCursor?.(trigger);
+  }, [onResetCursor, trigger]);
+
+  const handleForceRun = useCallback(() => {
+    onForceRun?.(trigger);
+  }, [onForceRun, trigger]);
+
+  const actionProps = useMemo<IconButtonProps | undefined>(() => {
+    if (trigger.spec?.kind === 'timer' && onForceRun) {
+      return {
+        disabled: !enabled || computeEnvironment === 'disabled',
+        icon: 'ph--play--regular',
+        label: 'Force run',
+        onClick: handleForceRun,
+      };
+    }
+
+    if (trigger.spec?.kind === 'feed' && onResetCursor) {
+      return {
+        disabled: !cursor,
+        icon: 'ph--arrow-clockwise--regular',
+        label: 'Reset cursor',
+        onClick: handleResetCursor,
+      };
+    }
+  }, [computeEnvironment, enabled, trigger.spec?.kind, handleForceRun, onResetCursor]);
+
+  return (
+    <List.Item<Obj.Snapshot<Trigger.Trigger>>
+      key={trigger.id}
+      item={snapshot}
+      classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+    >
+      <Input.Root>
+        <Input.Switch checked={enabled} onCheckedChange={onEnabledChange} />
+      </Input.Root>
+
+      <div className='flex flex-col min-w-0'>
+        <div className='flex'>
+          <List.ItemTitle classNames='px-1 cursor-pointer w-0 shrink truncate' onClick={handleSelect}>
+            {getFunctionName(functions, trigger) ?? '∅'}
+          </List.ItemTitle>
+
+          {copyAction && (
+            <Clipboard.IconButton label={t(copyAction.translationKey)} value={copyAction.contentProvider()} />
           )}
-        </List.Root>
-      )}
-      {filteredTriggers.length > 0 && <Separator classNames='mlb-4' />}
-      <IconButton icon='ph--plus--regular' label={t('new trigger label')} onClick={handleAdd} />
-    </div>
+        </div>
+
+        {cursor && <div className='text-xs text-description truncate ml-4'>Position: {cursor}</div>}
+        {computeEnvironment === 'edge' && edgeDispatcherStatus && (
+          <TriggerEdgeMetadata trigger={trigger} edgeStatus={edgeDispatcherStatus} />
+        )}
+      </div>
+
+      {actionProps ? <List.ItemIconButton {...actionProps} autoHide={false} /> : <div />}
+
+      {onDelete && <List.ItemDeleteButton onClick={handleDelete} />}
+    </List.Item>
   );
 };
 
-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' as const,
+      contentProvider: () => `${Obj.getDatabase(trigger)!.spaceId}@dxos.network`,
+    };
   }
 
   if (trigger?.spec?.kind === 'webhook') {
-    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
+    return {
+      translationKey: 'trigger copy url' as const,
+      contentProvider: () => getWebhookUrl(client, trigger!),
+    };
   }
 
   return undefined;
 };
 
-const getWebhookUrl = (client: Client, trigger: 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 = (functions: FunctionType[], trigger: FunctionTrigger) => {
+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)}…`;
+  const shortId = trigger.function && `${trigger.function.uri.slice(0, 16)}…`;
   const functionObject = functions.find((fn) => fn === trigger.function?.target);
   return functionObject?.name ?? shortId;
 };
 
-const scriptMatch = (script: ScriptType) => (trigger: FunctionTrigger) => {
+const scriptMatch = (script: Script.Script) => (trigger: Trigger.Trigger) => {
   const fn = trigger.function?.target;
-  if (!Obj.instanceOf(FunctionType, fn)) {
+  if (!Obj.instanceOf(Operation.PersistentOperation, 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)),
+const projectMatch = (project: Pipeline.Pipeline) => {
+  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: FunctionTrigger) => {
+  return (trigger: Trigger.Trigger) => {
     const spec = Obj.getSnapshot(trigger).spec;
     if (spec?.kind !== 'subscription') {
       return false;
@@ -208,14 +368,14 @@ const projectMatch = (project: DataType.Project) => {
   };
 };
 
-const triggerMatch = Match.type<Obj.Any>().pipe(
-  Match.withReturnType<(trigger: FunctionTrigger) => boolean>(),
+const triggerMatch = Match.type<Obj.Unknown>().pipe(
+  Match.withReturnType<(trigger: Trigger.Trigger) => boolean>(),
   Match.when(
-    (obj) => Obj.instanceOf(ScriptType, obj),
+    (obj) => Obj.instanceOf(Script.Script, obj),
     (obj) => scriptMatch(obj),
   ),
   Match.when(
-    (obj) => Obj.instanceOf(DataType.Project, obj),
+    (obj) => Obj.instanceOf(Pipeline.Pipeline, obj),
     (obj) => projectMatch(obj),
   ),
   Match.orElse((_obj) => () => true),

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>
+  );
+};