@dxos/plugin-assistant 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/InitiativeContainer/InitiativeContainer.tsx

@@ -0,0 +1,340 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import type * as Record from 'effect/Record';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Initiative, InitiativeFunctions, Plan } from '@dxos/assistant-toolkit';
+import { DXN, Filter, Obj, Query, Ref } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { AtomObj, AtomRef } from '@dxos/echo-atom';
+import { FunctionDefinition, QueueService, Trigger } from '@dxos/functions';
+import { AutomationCapabilities } from '@dxos/plugin-automation/types';
+import { MarkdownEditor } from '@dxos/plugin-markdown';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { Button, ButtonGroup, IconButton, Input, Layout, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { type Text } from '@dxos/schema';
+
+const TAB_INITATIVE = 'Initiative';
+const TAB_CHAT = 'Chat';
+
+export type InitiativeContainerProps = SurfaceComponentProps<Initiative.Initiative>;
+
+export const InitiativeContainer = ({ subject: initiative }: InitiativeContainerProps) => {
+  const [selectedTab, setSelectedTab] = useState<string>(TAB_INITATIVE);
+
+  const tabs = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            return [TAB_INITATIVE, TAB_CHAT, ...get(initiative).artifacts.map((artifact) => artifact.name)];
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const chat = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            const chat = get(initiative).chat;
+            return chat ? get(AtomRef.make(chat)) : undefined;
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const artifacts = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            return get(initiative).artifacts.map((artifact) => ({
+              name: artifact.name,
+              data: get(AtomRef.make(artifact.data)),
+            }));
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const selectedArtifact = artifacts.find((artifact) => artifact.name === selectedTab);
+
+  return (
+    <StackItem.Content toolbar>
+      <div
+        role='none'
+        className='flex flex-1 min-is-0 overflow-x-auto scrollbar-none gap-1 border-b border-subduedSeparator'
+      >
+        {tabs.map((tab) => (
+          <IconButton
+            key={tab}
+            icon={Match.value(tab).pipe(
+              Match.when(TAB_INITATIVE, () => 'ph--sparkle--regular'),
+              Match.when(TAB_CHAT, () => 'ph--chat--regular'),
+              Match.orElse(() => 'ph--file--regular'),
+            )}
+            label={tab}
+            variant={selectedTab === tab ? 'primary' : 'ghost'}
+            onClick={() => setSelectedTab(tab)}
+          />
+        ))}
+      </div>
+      {selectedTab === TAB_INITATIVE && <InitiativeForm initiative={initiative} />}
+      {selectedTab === TAB_CHAT && <Surface.Surface role='article' data={{ subject: chat }} limit={1} />}
+      {selectedArtifact && <Surface.Surface role='section' data={{ subject: selectedArtifact.data }} limit={1} />}
+    </StackItem.Content>
+  );
+};
+
+export default InitiativeContainer;
+
+const InitiativeForm = ({ initiative }: { initiative: Initiative.Initiative }) => {
+  const handleChange = useCallback(
+    (
+      values: Omit<Initiative.Initiative, 'id'>,
+      { isValid, changed }: { isValid: boolean; changed: Record<string, boolean> },
+    ) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as string]) as JsonPath[];
+      // Handle other property changes.
+      if (changedPaths.length > 0) {
+        Obj.change(initiative, () => {
+          for (const path of changedPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values as any, parts);
+            Obj.setValue(initiative, parts, value);
+          }
+        });
+      }
+
+      queueMicrotask(() => syncTriggers(initiative));
+    },
+    [initiative],
+  );
+
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      spec: ({ type, label, getValue, onValueChange }) => {
+        const { t } = useTranslation();
+
+        const value: Ref.Ref<Text.Text> = getValue();
+        const target = useAtomValue(AtomRef.make(value));
+        const [initialValue] = useObject(target, 'content');
+
+        return (
+          <Input.Root>
+            <div role='none'>
+              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
+            </div>
+            <MarkdownEditor.Root id={target?.id ?? ''} object={target}>
+              <MarkdownEditor.Content initialValue={initialValue} />
+            </MarkdownEditor.Root>
+          </Input.Root>
+        );
+      },
+      plan: ({ type, label, getValue, onValueChange }) => {
+        const { t } = useTranslation();
+
+        const value: Ref.Ref<Plan.Plan> = getValue();
+        const target = useAtomValue(AtomRef.make(value));
+
+        return (
+          <Input.Root>
+            <div role='none'>
+              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
+            </div>
+            <MarkdownEditor.Root id={target?.id ?? ''}>
+              <MarkdownEditor.Content initialValue={target ? Plan.formatPlan(target) : ''} />
+            </MarkdownEditor.Root>
+          </Input.Root>
+        );
+      },
+    }),
+    [],
+  );
+
+  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+
+  const handleResetHistory = useCallback(async () => {
+    const runtime = computeRuntime.getRuntime(Obj.getDatabase(initiative)!.spaceId);
+
+    await runtime.runPromise(Initiative.resetChatHistory(initiative));
+
+    if (!initiative.queue) {
+      await runtime.runPromise(
+        Effect.gen(function* () {
+          const queue = yield* QueueService.createQueue();
+          Obj.change(initiative, (initiative) => {
+            initiative.queue = Ref.fromDXN(queue.dxn);
+          });
+        }),
+      );
+    }
+  }, [initiative, computeRuntime]);
+
+  const inputQueue = useAtomValue(
+    AtomObj.make(initiative).pipe((_) =>
+      Atom.make((get) =>
+        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
+      ),
+    ),
+  );
+
+  const inputQueueItems = useQuery(inputQueue, Query.select(Filter.everything()));
+
+  // TODO(dmaretskyi): Form breaks if we provide the echo object directly.
+  const spreadValue = useMemo(() => ({ ...initiative }), [initiative]);
+  return (
+    <Layout.Main>
+      <ButtonGroup classNames='h-10'>
+        <Button onClick={handleResetHistory}>Reset History</Button>
+      </ButtonGroup>
+      <h3 className='mb-2'>Input Queue</h3>
+      <div className='border border-subduedSeparator rounded-md p-2 h-64 overflow-y-auto'>
+        {inputQueueItems.map((item) => (
+          <Surface.Surface key={item.id} role='section' data={{ subject: item }} limit={1} />
+        ))}
+        {inputQueueItems.length === 0 && <div className='text-subdued'>No items in queue</div>}
+      </div>
+      <Form.Root
+        schema={omitId(Initiative.Initiative)}
+        onValuesChanged={handleChange as any}
+        values={spreadValue}
+        db={Obj.getDatabase(initiative)}
+        fieldMap={fieldMap}
+      >
+        <Form.FieldSet />
+      </Form.Root>
+    </Layout.Main>
+  );
+};
+
+// TODO(dmaretskyi): Perhaps the association is better done with a relation.
+
+/**
+ * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <initative id : ObjectId>
+ */
+const INITIATIVE_TRIGGER_EXTENSION_KEY = 'dxos.org/extension/InitiativeTrigger';
+
+/**
+ * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <dxn string of subscription target>
+ */
+const INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY = 'dxos.org/extension/InitiativeTriggerTarget';
+
+/**
+ * Syncs triggers in the database with the initiative subscriptions.
+ */
+
+const syncTriggers = async (initiative: Initiative.Initiative) => {
+  const db = Obj.getDatabase(initiative);
+  if (!db) {
+    return;
+  }
+
+  const triggers = await db
+    .query(Filter.foreignKeys(Trigger.Trigger, [{ source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id }]))
+    .run();
+
+  // Delete triggers that are not in subscriptions.
+  for (const trigger of triggers) {
+    const target = Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).at(0)?.id;
+
+    const exists = initiative.subscriptions.find((subscription) => subscription.dxn.toString() === target);
+    if (!exists && !(initiative.useQualifyingAgent && target === Obj.getDXN(initiative)?.toString())) {
+      db.remove(trigger);
+    }
+  }
+
+  // Add triggers that are not in the database.
+  for (const subscription of initiative.subscriptions) {
+    const relevantTrigger = triggers.find((trigger) =>
+      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
+        (key) => key.id === subscription.dxn.toString(),
+      ),
+    );
+    if (relevantTrigger) {
+      continue;
+    }
+
+    const target = await subscription.tryLoad();
+    if (!target || !target.queue || !(target.queue.dxn instanceof DXN) || target.queue.dxn.kind !== DXN.kind.QUEUE) {
+      continue;
+    }
+
+    db.add(
+      Trigger.make({
+        [Obj.Meta]: {
+          keys: [
+            { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
+            { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: subscription.dxn.toString() },
+          ],
+        },
+        enabled: true,
+        spec: {
+          kind: 'queue',
+          queue: target.queue.dxn.toString(),
+        },
+        function: Ref.make(
+          FunctionDefinition.serialize(
+            initiative.useQualifyingAgent ? InitiativeFunctions.Qualifier : InitiativeFunctions.Agent,
+          ),
+        ),
+        input: {
+          initiative: Ref.make(initiative),
+          event: '{{event}}',
+        },
+        concurrency: initiative.useQualifyingAgent ? 5 : undefined,
+      }),
+    );
+  }
+
+  if (initiative.useQualifyingAgent) {
+    const qualifierTrigger = triggers.find((trigger) =>
+      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
+        (key) => key.id === Obj.getDXN(initiative)?.toString(),
+      ),
+    );
+    if (!qualifierTrigger && initiative.queue) {
+      db.add(
+        Trigger.make({
+          [Obj.Meta]: {
+            keys: [
+              { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
+              { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: Obj.getDXN(initiative)?.toString() ?? '' },
+            ],
+          },
+          function: Ref.make(FunctionDefinition.serialize(InitiativeFunctions.Agent)),
+          enabled: true,
+          spec: {
+            kind: 'queue',
+            queue: initiative.queue.dxn.toString(),
+          },
+          input: {
+            initiative: Ref.make(initiative),
+            event: '{{event}}',
+          },
+        }),
+      );
+    }
+  }
+
+  await db.flush({ indexes: true });
+};

package/src/components/InitiativeContainer/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { default } from './InitiativeContainer';
+export * from './InitiativeContainer';

package/src/components/PromptArticle.tsx

@@ -4,14 +4,15 @@
 
 import React, { useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { Agent } from '@dxos/assistant-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { AgentFunctions } from '@dxos/assistant-toolkit';
 import { type Prompt } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
+import { type FunctionDefinition } from '@dxos/functions';
+import { invariant } from '@dxos/invariant';
 import { invokeFunctionWithTracing, useComputeRuntimeCallback } from '@dxos/plugin-automation';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { Layout, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { Layout } from '@dxos/react-ui-mosaic';
 
 import { meta } from '../meta';
 
@@ -21,21 +22,28 @@ export type PromptArticleProps = SurfaceComponentProps<Prompt.Prompt>;
 
 export const PromptArticle = ({ role, subject }: PromptArticleProps) => {
   const { t } = useTranslation(meta.id);
-  const db = Obj.getDatabase(subject);
   const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
+  const db = Obj.getDatabase(subject);
 
-  const inputData = useMemo(
+  const inputData = useMemo<FunctionDefinition.Input<typeof AgentFunctions.Prompt> | undefined>(
     () =>
-      subject && {
-        prompt: db?.makeRef(Obj.getDXN(subject)),
-        input: {},
-      },
+      subject && db
+        ? {
+            prompt: db.makeRef(Obj.getDXN(subject)),
+            input: {},
+          }
+        : undefined,
     [subject, db],
   );
 
-  const handleRun = useComputeRuntimeCallback(db?.spaceId, () => invokeFunctionWithTracing(Agent.prompt, inputData), [
-    inputData,
-  ]);
+  const handleRun = useComputeRuntimeCallback(
+    db?.spaceId,
+    () => {
+      invariant(inputData);
+      return invokeFunctionWithTracing(AgentFunctions.Prompt, inputData);
+    },
+    [inputData],
+  );
 
   return (
     <Layout.Main role={role} toolbar>

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -69,7 +69,7 @@ const meta = {
   component: TemplateEditor as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],

package/src/components/TemplateEditor/TemplateForm.stories.tsx

@@ -58,7 +58,7 @@ const meta = {
   component: TemplateForm,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -20,7 +20,7 @@ import { translations } from '../../translations';
 import { Toolbox, type ToolboxProps } from './Toolbox';
 
 const DefaultStory = (props: ToolboxProps) => {
-  return <Toolbox {...props} classNames='is-[30rem] bs-[15rem] rounded-sm border border-separator plb-1' />;
+  return <Toolbox {...props} classNames='bs-[15rem] is-[30rem] plb-1 rounded-sm border border-separator' />;
 };
 
 const meta = {
@@ -28,7 +28,7 @@ const meta = {
   component: Toolbox as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
         ...corePlugins(),

package/src/components/Toolbox/Toolbox.tsx

@@ -9,10 +9,9 @@ import { type Database, type Ref } from '@dxos/echo';
 import { Function } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { Filter, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
 import { type AiChatProcessor } from '../../processor';
 import { ServiceType } from '../../types';
 
@@ -25,47 +24,47 @@ export type ToolboxProps = ThemedClassName<{
 }>;
 
 export const Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }: ToolboxProps) => {
-  const { t } = useTranslation(meta.id);
-
   return (
-    <div className={mx('flex flex-col overflow-y-auto box-content', classNames)}>
-      {blueprints && blueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={blueprints.map(({ name, description, tools }) => ({
-            name,
-            description,
-            subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {activeBlueprints && activeBlueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={activeBlueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {services && services.length > 0 && (
-        <Section
-          title='Services'
-          items={services.map(({ service: { serviceId, name, description } }) => ({
-            name: name ?? serviceId,
-            description,
-            // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
-          }))}
-        />
-      )}
-
-      {functions && functions.length > 0 && (
-        <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
-      )}
-    </div>
+    <ScrollArea.Root thin orientation='vertical'>
+      <ScrollArea.Viewport classNames={classNames}>
+        {blueprints && blueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={blueprints.map(({ name, description, tools }) => ({
+              name,
+              description,
+              subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {activeBlueprints && activeBlueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={activeBlueprints.map(({ target }) => ({
+              name: target?.name ?? '',
+              description: target?.description ?? '',
+              subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {services && services.length > 0 && (
+          <Section
+            title='Services'
+            items={services.map(({ service: { serviceId, name, description } }) => ({
+              name: name ?? serviceId,
+              description,
+              // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
+            }))}
+          />
+        )}
+
+        {functions && functions.length > 0 && (
+          <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
+        )}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };
 

package/src/components/TriggerStatus/TriggerStatus.tsx

@@ -0,0 +1,142 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { type InvocationsState } from '@dxos/functions-runtime';
+import { useTriggerRuntimeControls } from '@dxos/plugin-automation';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { parseId } from '@dxos/react-client/echo';
+import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+type TriggerStatusState = 'disabled' | 'idle' | 'running' | 'error';
+
+const getIcon = (state: TriggerStatusState): string => {
+  switch (state) {
+    case 'disabled':
+      return 'ph--lightning-slash--regular';
+    case 'idle':
+      return 'ph--lightning--regular';
+    case 'running':
+      return 'ph--lightning--fill';
+    case 'error':
+      return 'ph--warning--regular';
+  }
+};
+
+const getIconClassNames = (state: TriggerStatusState): string | undefined => {
+  switch (state) {
+    case 'running':
+      return 'animate-pulse text-accentText';
+    case 'error':
+      return 'text-errorText';
+    default:
+      return undefined;
+  }
+};
+
+const useCurrentSpace = () => {
+  const layout = useLayout();
+  const client = useCapability(ClientCapabilities.Client);
+  const { spaceId } = parseId(layout.workspace);
+  const space = spaceId ? client.spaces.get(spaceId) : undefined;
+  return space;
+};
+
+export const TriggerStatus = () => {
+  const space = useCurrentSpace();
+  const db = space?.db;
+  const { state, start, stop } = useTriggerRuntimeControls(db);
+  const isRunning = state?.enabled ?? false;
+
+  // Determine the current trigger status state.
+  const triggerState: TriggerStatusState = useMemo(() => {
+    if (!isRunning) {
+      return 'disabled';
+    }
+
+    // Check if there's any pending invocation.
+    const hasPending = state?.invocations.some((invocation) => invocation.result === null);
+    if (hasPending) {
+      return 'running';
+    }
+
+    // Check if the last invocation failed.
+    const lastInvocation = state?.invocations.at(-1);
+    if (lastInvocation?.result?._tag === 'Failure') {
+      return 'error';
+    }
+
+    return 'idle';
+  }, [isRunning, state?.invocations]);
+
+  const { t } = useTranslation(meta.id);
+  const title = t(`trigger status ${triggerState} label`);
+  const icon = <Icon icon={getIcon(triggerState)} classNames={getIconClassNames(triggerState)} />;
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content>
+          <TriggerStatusPopover
+            isRunning={isRunning}
+            state={triggerState}
+            currentFunctionName={state?.invocations.at(-1)?.function?.name ?? state?.invocations.at(-1)?.function?.key}
+            lastInvocation={state?.invocations.at(-1)}
+            onToggle={isRunning ? stop : start}
+          />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+interface TriggerStatusPopoverProps {
+  isRunning: boolean;
+  state: TriggerStatusState;
+  currentFunctionName?: string;
+  lastInvocation?: InvocationsState;
+  onToggle: () => void;
+}
+
+const TriggerStatusPopover = ({
+  isRunning,
+  state,
+  currentFunctionName,
+  lastInvocation,
+  onToggle,
+}: TriggerStatusPopoverProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <div className='min-is-[240px] p-2 space-y-3'>
+      {/* Runtime Toggle */}
+      <Settings.ItemInput title={t('trigger runtime label')} description={t('trigger runtime description')}>
+        <Input.Switch classNames='justify-self-end' checked={isRunning} onCheckedChange={onToggle} />
+      </Settings.ItemInput>
+
+      {/* Status Indicator */}
+      <div className='flex items-center gap-2 pt-2 border-t border-separator'>
+        <Icon icon={getIcon(state)} classNames={mx(getIconClassNames(state), 'shrink-0')} />
+        <span className='text-sm'>{t(`trigger status ${state} label`)}</span>
+        {currentFunctionName && state === 'running' && (
+          <span className='text-xs text-description'>{currentFunctionName}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TriggerStatus;