feat(plugin-workflow): add AutomationBuilder and AutomationRunHistory components

Phase 18 L1: Trigger-Action pipeline configuration UI.

- AutomationBuilder: 3-section UI for configuring trigger type,
  actions pipeline, and automation metadata (name, description, toggle)
- AutomationRunHistory: Status-badged list of past automation runs
  with duration, trigger event, and error display
- Register both as 'automation-builder' and 'automation-run-history'
  in ComponentRegistry
- Export all interfaces (TriggerConfig, ActionConfig,
  AutomationDefinition, AutomationRun) for consumers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Copilot

packages/plugin-workflow/src/AutomationBuilder.tsx

@@ -0,0 +1,263 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  Card, CardContent, CardHeader, CardTitle,
+  Button, Input, Label, Badge, Separator, Switch,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@object-ui/components';
+import { Zap, Plus, Trash2, Settings, Clock, Mail, Bell, Globe, FileEdit } from 'lucide-react';
+
+export interface TriggerConfig {
+  type: 'record_created' | 'record_updated' | 'record_deleted' | 'field_changed' | 'scheduled';
+  objectName?: string;
+  fieldName?: string;
+  schedule?: string;
+  condition?: string;
+}
+
+export interface ActionConfig {
+  type: 'send_email' | 'update_field' | 'create_record' | 'delete_record' | 'webhook' | 'notification';
+  params: Record<string, any>;
+}
+
+export interface AutomationDefinition {
+  id: string;
+  name: string;
+  description?: string;
+  enabled: boolean;
+  trigger: TriggerConfig;
+  actions: ActionConfig[];
+  createdAt: string;
+  lastRunAt?: string;
+}
+
+export interface AutomationBuilderProps {
+  automation?: AutomationDefinition;
+  objects?: Array<{ name: string; label: string; fields?: Record<string, any> }>;
+  onSave?: (automation: AutomationDefinition) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+const TRIGGER_LABELS: Record<TriggerConfig['type'], string> = {
+  record_created: 'Record Created', record_updated: 'Record Updated',
+  record_deleted: 'Record Deleted', field_changed: 'Field Changed', scheduled: 'Scheduled',
+};
+
+const ACTION_LABELS: Record<ActionConfig['type'], string> = {
+  send_email: 'Send Email', update_field: 'Update Field', create_record: 'Create Record',
+  delete_record: 'Delete Record', webhook: 'Webhook', notification: 'Notification',
+};
+
+const ACTION_ICONS: Record<ActionConfig['type'], React.ReactNode> = {
+  send_email: <Mail className="h-4 w-4" />, update_field: <FileEdit className="h-4 w-4" />,
+  create_record: <Plus className="h-4 w-4" />, delete_record: <Trash2 className="h-4 w-4" />,
+  webhook: <Globe className="h-4 w-4" />, notification: <Bell className="h-4 w-4" />,
+};
+
+const defaultAutomation = (): AutomationDefinition => ({
+  id: `auto-${Date.now()}`, name: '', description: '', enabled: true,
+  trigger: { type: 'record_created' }, actions: [], createdAt: new Date().toISOString(),
+});
+
+/** Helper to render a labelled input for action params */
+const ParamInput: React.FC<{
+  label: string; value: string; placeholder: string;
+  onChange: (v: string) => void;
+}> = ({ label, value, placeholder, onChange }) => (
+  <div className="space-y-1">
+    <Label className="text-xs">{label}</Label>
+    <Input value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={placeholder} />
+  </div>
+);
+
+/**
+ * AutomationBuilder - Trigger-Action pipeline configuration UI
+ * Lets users configure automations with trigger selection, action configuration,
+ * and metadata (name, description, enable/disable).
+ */
+export const AutomationBuilder: React.FC<AutomationBuilderProps> = ({
+  automation: initial, objects = [], onSave, onCancel, className,
+}) => {
+  const [automation, setAutomation] = useState<AutomationDefinition>(initial ?? defaultAutomation());
+
+  const updateTrigger = useCallback((updates: Partial<TriggerConfig>) => {
+    setAutomation(prev => ({ ...prev, trigger: { ...prev.trigger, ...updates } }));
+  }, []);
+
+  const addAction = useCallback(() => {
+    setAutomation(prev => ({ ...prev, actions: [...prev.actions, { type: 'send_email', params: {} }] }));
+  }, []);
+
+  const updateAction = useCallback((index: number, updates: Partial<ActionConfig>) => {
+    setAutomation(prev => ({ ...prev, actions: prev.actions.map((a, i) => (i === index ? { ...a, ...updates } : a)) }));
+  }, []);
+
+  const removeAction = useCallback((index: number) => {
+    setAutomation(prev => ({ ...prev, actions: prev.actions.filter((_, i) => i !== index) }));
+  }, []);
+
+  const needsObject = automation.trigger.type !== 'scheduled';
+  const needsField = automation.trigger.type === 'field_changed';
+  const isScheduled = automation.trigger.type === 'scheduled';
+  const selectedObjectFields = objects.find(o => o.name === automation.trigger.objectName)?.fields;
+
+  const renderActionParams = (action: ActionConfig, idx: number) => {
+    const setParam = (key: string, value: string) =>
+      updateAction(idx, { params: { ...action.params, [key]: value } });
+    switch (action.type) {
+      case 'send_email':
+        return (<>
+          <ParamInput label="To" value={action.params.to ?? ''} placeholder="Recipient email" onChange={v => setParam('to', v)} />
+          <ParamInput label="Subject" value={action.params.subject ?? ''} placeholder="Email subject" onChange={v => setParam('subject', v)} />
+        </>);
+      case 'webhook':
+        return <ParamInput label="URL" value={action.params.url ?? ''} placeholder="https://..." onChange={v => setParam('url', v)} />;
+      case 'notification':
+        return <ParamInput label="Message" value={action.params.message ?? ''} placeholder="Notification message" onChange={v => setParam('message', v)} />;
+      case 'update_field': case 'create_record': case 'delete_record':
+        return <ParamInput label="Target Object" value={action.params.objectName ?? ''} placeholder="Object name" onChange={v => setParam('objectName', v)} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <div className={className ?? 'space-y-4'}>
+      {/* Trigger Selection */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <Zap className="h-4 w-4 text-yellow-500" />
+            Trigger
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <Label className="text-xs">Trigger Type</Label>
+            <Select value={automation.trigger.type} onValueChange={(v) => updateTrigger({ type: v as TriggerConfig['type'] })}>
+              <SelectTrigger><SelectValue placeholder="Select trigger type" /></SelectTrigger>
+              <SelectContent>
+                {(Object.keys(TRIGGER_LABELS) as TriggerConfig['type'][]).map(t => (
+                  <SelectItem key={t} value={t}>{TRIGGER_LABELS[t]}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          {needsObject && (
+            <div className="space-y-1">
+              <Label className="text-xs">Object</Label>
+              {objects.length > 0 ? (
+                <Select value={automation.trigger.objectName ?? ''} onValueChange={(v) => updateTrigger({ objectName: v })}>
+                  <SelectTrigger><SelectValue placeholder="Select object" /></SelectTrigger>
+                  <SelectContent>
+                    {objects.map(o => <SelectItem key={o.name} value={o.name}>{o.label}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input value={automation.trigger.objectName ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateTrigger({ objectName: e.target.value })} placeholder="Object name" />
+              )}
+            </div>
+          )}
+          {needsField && (
+            <div className="space-y-1">
+              <Label className="text-xs">Field</Label>
+              {selectedObjectFields ? (
+                <Select value={automation.trigger.fieldName ?? ''} onValueChange={(v) => updateTrigger({ fieldName: v })}>
+                  <SelectTrigger><SelectValue placeholder="Select field" /></SelectTrigger>
+                  <SelectContent>
+                    {Object.keys(selectedObjectFields).map(f => <SelectItem key={f} value={f}>{f}</SelectItem>)}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input value={automation.trigger.fieldName ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateTrigger({ fieldName: e.target.value })} placeholder="Field name" />
+              )}
+            </div>
+          )}
+          {isScheduled && (
+            <div className="space-y-1">
+              <Label className="text-xs flex items-center gap-1"><Clock className="h-3 w-3" /> Cron Schedule</Label>
+              <Input value={automation.trigger.schedule ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateTrigger({ schedule: e.target.value })} placeholder="e.g. 0 9 * * 1-5" />
+            </div>
+          )}
+          <div className="space-y-1">
+            <Label className="text-xs">Condition (optional)</Label>
+            <Input value={automation.trigger.condition ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateTrigger({ condition: e.target.value })} placeholder='e.g. ${data.status === "active"}' />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Action Configuration */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <Settings className="h-4 w-4" /> Actions
+            <Badge variant="secondary" className="ml-auto">{automation.actions.length}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {automation.actions.map((action, idx) => (
+            <div key={idx} className="rounded-lg border p-3 space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  {ACTION_ICONS[action.type]}
+                  <span className="text-sm font-medium">Action {idx + 1}</span>
+                </div>
+                <Button size="sm" variant="ghost" className="h-7 w-7 p-0 text-red-500 hover:text-red-700" onClick={() => removeAction(idx)}>
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">Action Type</Label>
+                <Select value={action.type} onValueChange={(v) => updateAction(idx, { type: v as ActionConfig['type'], params: {} })}>
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    {(Object.keys(ACTION_LABELS) as ActionConfig['type'][]).map(t => (
+                      <SelectItem key={t} value={t}>{ACTION_LABELS[t]}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {renderActionParams(action, idx)}
+            </div>
+          ))}
+          <Button variant="outline" size="sm" className="w-full" onClick={addAction}>
+            <Plus className="h-4 w-4 mr-2" /> Add Action
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Summary */}
+      <Card>
+        <CardHeader><CardTitle className="text-sm">Summary</CardTitle></CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <Label className="text-xs">Name</Label>
+            <Input value={automation.name} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAutomation(prev => ({ ...prev, name: e.target.value }))} placeholder="Automation name" />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Description</Label>
+            <Input value={automation.description ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAutomation(prev => ({ ...prev, description: e.target.value }))} placeholder="Optional description" />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label className="text-sm">Enabled</Label>
+            <Switch checked={automation.enabled} onCheckedChange={(checked: boolean) => setAutomation(prev => ({ ...prev, enabled: checked }))} />
+          </div>
+          <Separator />
+          <div className="flex items-center gap-2 justify-end">
+            {onCancel && <Button variant="outline" size="sm" onClick={onCancel}>Cancel</Button>}
+            <Button size="sm" onClick={() => onSave?.(automation)}>
+              <Zap className="h-4 w-4 mr-2" /> Save Automation
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

packages/plugin-workflow/src/AutomationRunHistory.tsx

@@ -0,0 +1,103 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle, Badge } from '@object-ui/components';
+import { Clock } from 'lucide-react';
+
+export interface AutomationRun {
+  id: string;
+  automationId: string;
+  automationName: string;
+  status: 'success' | 'failure' | 'running' | 'pending';
+  startedAt: string;
+  completedAt?: string;
+  triggerEvent?: string;
+  error?: string;
+}
+
+export interface AutomationRunHistoryProps {
+  runs?: AutomationRun[];
+  className?: string;
+}
+
+const STATUS_VARIANT: Record<AutomationRun['status'], 'default' | 'destructive' | 'secondary' | 'outline'> = {
+  success: 'default',
+  failure: 'destructive',
+  running: 'secondary',
+  pending: 'outline',
+};
+
+const STATUS_LABEL: Record<AutomationRun['status'], string> = {
+  success: 'Success',
+  failure: 'Failed',
+  running: 'Running',
+  pending: 'Pending',
+};
+
+function formatDuration(start: string, end?: string): string {
+  if (!end) return '—';
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const secs = Math.floor(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  const rem = secs % 60;
+  return `${mins}m ${rem}s`;
+}
+
+/**
+ * AutomationRunHistory - Displays a list of past automation executions
+ * Shows status, automation name, trigger event, timing, and errors.
+ */
+export const AutomationRunHistory: React.FC<AutomationRunHistoryProps> = ({
+  runs = [],
+  className,
+}) => {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-sm">
+          <Clock className="h-4 w-4" />
+          Automation Run History
+          <Badge variant="outline" className="ml-auto">{runs.length}</Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {runs.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-6">
+            No automation runs yet
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {runs.map(run => (
+              <div key={run.id} className="flex items-start gap-3 rounded-lg border p-3">
+                <Badge variant={STATUS_VARIANT[run.status]}>{STATUS_LABEL[run.status]}</Badge>
+                <div className="flex-1 min-w-0 space-y-1">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm font-medium">{run.automationName}</span>
+                    {run.triggerEvent && (
+                      <span className="text-xs text-muted-foreground">— {run.triggerEvent}</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span>{new Date(run.startedAt).toLocaleString()}</span>
+                    <span>Duration: {formatDuration(run.startedAt, run.completedAt)}</span>
+                  </div>
+                  {run.status === 'failure' && run.error && (
+                    <p className="text-xs text-red-600 mt-1">{run.error}</p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};