@zenith-open/zenithcms-plugin-workflows-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aman T Shekar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/FlowBuilderPage.d.ts

@@ -0,0 +1,4 @@
+import '@xyflow/react/dist/style.css';
+import React from 'react';
+declare const FlowBuilderPage: React.FC;
+export default FlowBuilderPage;

package/dist/FlowBuilderPage.js

@@ -0,0 +1,601 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addEdge, Background, Controls, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, useEdgesState, useNodesState, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import dagre from 'dagre';
+import { AnimatePresence, motion } from 'framer-motion';
+import { AlertCircle, CheckCircle2, Clock, Cpu, Database, Globe, History, Info, Loader2, Mail, MessageSquare, Play, Plus, Save, Settings, Share2, Terminal, Trash2, Wand2, Webhook, Workflow, X, Zap, } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import { PageHeader } from '../components/ui/PageHeader';
+import { useTheme } from '../context/ThemeContext';
+import api from '../lib/api';
+import { cn } from '../lib/utils';
+// ── Constants ──────────────────────────────────────────────────────────────────
+const ACTION_TYPES = [
+    {
+        id: 'http',
+        name: 'HTTP Request',
+        icon: Globe,
+        color: 'text-z-active-text',
+        desc: 'Outbound REST API call',
+    },
+    {
+        id: 'ai_prompt',
+        name: 'AI Engine',
+        icon: Cpu,
+        color: 'text-purple-400',
+        desc: 'Pass payload to AI model',
+    },
+    {
+        id: 'update_content',
+        name: 'Database Update',
+        icon: Database,
+        color: 'text-amber-400',
+        desc: 'Mutate Zenith records',
+    },
+    { id: 'email', name: 'Email Dispatch', icon: Mail, color: 'text-sky-400', desc: 'SMTP relay' },
+    {
+        id: 'slack',
+        name: 'Slack Alert',
+        icon: MessageSquare,
+        color: 'text-z-active-text',
+        desc: 'Team webhook notification',
+    },
+    {
+        id: 'webhook',
+        name: 'Webhook',
+        icon: Webhook,
+        color: 'text-pink-400',
+        desc: 'Standard webhook push',
+    },
+    {
+        id: 'delay',
+        name: 'Delay / Sleep',
+        icon: Clock,
+        color: 'text-indigo-300',
+        desc: 'Pause execution timer',
+    },
+    {
+        id: 'code',
+        name: 'Data Transformer',
+        icon: Terminal,
+        color: 'text-emerald-400',
+        desc: 'Raw JS Payload Mutation',
+    },
+    {
+        id: 'loop',
+        name: 'Sub-Flow Iterator',
+        icon: Workflow,
+        color: 'text-indigo-400',
+        desc: 'Spawn Sub-Flow per item',
+    },
+    {
+        id: 'log',
+        name: 'System Log',
+        icon: Terminal,
+        color: 'text-z-muted',
+        desc: 'Permanent audit entry',
+    },
+];
+const LOGIC_TYPES = [
+    {
+        id: 'condition',
+        name: 'If / Else',
+        icon: Share2,
+        color: 'text-indigo-500',
+        desc: 'Branch based on payload rules',
+    },
+];
+const TRIGGER_TYPES = [
+    {
+        id: 'webhook',
+        name: 'Webhook',
+        icon: Zap,
+        detail: 'POST',
+        desc: 'Triggered by inbound HTTP POST',
+    },
+    {
+        id: 'collection_change',
+        name: 'Data Event',
+        icon: Database,
+        detail: 'DB',
+        desc: 'On create/update/delete',
+    },
+    {
+        id: 'schedule',
+        name: 'Cron Schedule',
+        icon: Clock,
+        detail: 'CRON',
+        desc: 'Time-based execution',
+    },
+];
+const EDGE_STYLE = {
+    type: 'smoothstep',
+    animated: true,
+    style: { stroke: '#10B981', strokeWidth: 2 },
+    markerEnd: { type: MarkerType.ArrowClosed, color: '#10B981' },
+};
+// ── Custom Nodes ───────────────────────────────────────────────────────────────
+const TriggerNode = ({ data, selected }) => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const t = TRIGGER_TYPES.find((x) => x.id === data.triggerType) || TRIGGER_TYPES[0];
+    const statusClass = data.runStatus === 'success'
+        ? 'ring-2 ring-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.3)] border-emerald-500'
+        : data.runStatus === 'error'
+            ? 'ring-2 ring-red-500 shadow-[0_0_15px_rgba(239,68,68,0.4)] border-red-500 animate-pulse'
+            : data.runStatus === 'skipped'
+                ? 'opacity-40 grayscale'
+                : selected
+                    ? 'ring-2 ring-amber-500 border-amber-500'
+                    : 'hover:border-amber-500/50';
+    let badgeText = '';
+    if (t.id === 'webhook')
+        badgeText = 'Awaiting POST payload';
+    if (t.id === 'schedule')
+        badgeText = data.cron || 'Every 1 hour';
+    if (t.id === 'collection_change')
+        badgeText = data.collection ? `Watch: ${data.collection}` : 'Any collection change';
+    return (_jsxs("div", { className: cn('px-5 py-4 border min-w-[220px] transition-all duration-300 cursor-pointer overflow-hidden backdrop-blur-md shadow-[0_4px_30px_rgba(0,0,0,0.1)]', dark ? 'bg-black/65 border-white/10 text-white' : 'bg-white/80 border-black/10 text-black', statusClass), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-9 h-9 flex items-center justify-center bg-amber-500/10 border border-amber-500/30 text-amber-500 flex-shrink-0 rounded-sm", children: _jsx(t.icon, { size: 16 }) }), _jsxs("div", { children: [_jsxs("div", { className: "text-[10px] font-bold uppercase tracking-wider text-amber-500", children: ["Trigger \u00B7 ", t.detail] }), _jsx("div", { className: "text-sm font-bold mt-0.5", children: t.name })] })] }), badgeText && (_jsx("div", { className: cn('mt-3 px-2.5 py-1.5 border-t text-[10px] font-mono font-bold truncate', dark ? 'border-white/10 text-gray-300' : 'border-black/10 text-gray-700'), children: badgeText })), _jsx(Handle, { type: "source", position: Position.Bottom, className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-black" })] }));
+};
+const ActionNode = ({ data, selected }) => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const t = ACTION_TYPES.find((x) => x.id === data.actionType) || ACTION_TYPES[0];
+    const statusClass = data.runStatus === 'success'
+        ? 'ring-2 ring-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.3)] border-emerald-500'
+        : data.runStatus === 'error'
+            ? 'ring-2 ring-red-500 shadow-[0_0_15px_rgba(239,68,68,0.4)] border-red-500 animate-pulse'
+            : data.runStatus === 'skipped'
+                ? 'opacity-40 grayscale'
+                : selected
+                    ? 'ring-2 ring-z-accent border-z-accent'
+                    : 'hover:border-z-accent/50';
+    let badgeText = '';
+    if (t.id === 'http')
+        badgeText = `[${data.method || 'GET'}] ${data.url || 'No URL'}`;
+    else if (t.id === 'slack')
+        badgeText = `Channel: ${data.channel || '#general'}`;
+    else if (t.id === 'email')
+        badgeText = `To: ${data.to || 'Unknown'}`;
+    else if (t.id === 'update_content')
+        badgeText = `Update: ${data.collection || 'Record'}`;
+    else if (t.id === 'ai_prompt')
+        badgeText = `Prompt: ${data.prompt ? data.prompt.substring(0, 20) + '...' : 'Unknown'}`;
+    else if (t.id === 'delay')
+        badgeText = `Wait: ${data.amount || 0} ${data.unit || 'seconds'}`;
+    else if (t.id === 'code')
+        badgeText = `{ JS Transformer }`;
+    else if (t.id === 'loop')
+        badgeText = `Iterate: ${data.arrayPath || 'Array'}`;
+    return (_jsxs("div", { className: cn('px-5 py-4 border min-w-[220px] transition-all duration-300 cursor-pointer overflow-hidden backdrop-blur-md shadow-[0_4px_30px_rgba(0,0,0,0.1)]', dark ? 'bg-black/65 border-white/10 text-white' : 'bg-white/80 border-black/10 text-black', statusClass), children: [_jsx(Handle, { type: "target", position: Position.Top, className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-black" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('w-9 h-9 flex items-center justify-center border flex-shrink-0 rounded-sm', dark ? 'bg-z-hover border-z-border' : 'bg-gray-50 border-gray-200', t.color), children: _jsx(t.icon, { size: 16 }) }), _jsxs("div", { children: [_jsxs("div", { className: cn('text-[10px] font-bold uppercase tracking-wider', t.color.replace('text-', 'text-').replace('-400', '-500')), children: ["Action \u00B7 ", t.id] }), _jsx("div", { className: "text-sm font-bold mt-0.5", children: data.label || t.name })] })] }), badgeText && (_jsx("div", { className: cn('mt-3 px-2.5 py-1.5 border-t text-[10px] font-mono font-bold truncate', dark ? 'border-white/10 text-gray-300' : 'border-black/10 text-gray-700'), children: badgeText })), _jsx(Handle, { type: "source", position: Position.Bottom, className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-black" })] }));
+};
+const ConditionNode = ({ data, selected }) => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const statusClass = data.runStatus === 'success'
+        ? 'ring-2 ring-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.3)] border-emerald-500'
+        : data.runStatus === 'error'
+            ? 'ring-2 ring-red-500 shadow-[0_0_15px_rgba(239,68,68,0.4)] border-red-500 animate-pulse'
+            : data.runStatus === 'skipped'
+                ? 'opacity-40 grayscale'
+                : selected
+                    ? 'ring-2 ring-indigo-500 border-indigo-500'
+                    : 'hover:border-indigo-500/50';
+    return (_jsxs("div", { className: cn('px-5 py-4 border-2 min-w-[220px] transition-all duration-300 cursor-pointer shadow-[4px_4px_0_0_#000]', dark ? 'bg-black border-white text-white shadow-[4px_4px_0_0_#fff]' : 'bg-white border-black text-black', statusClass), children: [_jsx(Handle, { type: "target", position: Position.Top, className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-black" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-9 h-9 flex items-center justify-center bg-indigo-500/10 border border-indigo-500/30 text-indigo-500 flex-shrink-0 rounded-sm", children: _jsx(Share2, { size: 16 }) }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold uppercase tracking-wider text-indigo-500", children: "Condition" }), _jsx("div", { className: "text-sm font-bold mt-0.5", children: data.label || 'If / Else' })] })] }), _jsx("div", { className: cn('mt-3 px-2.5 py-1.5 border-t text-[10px] font-mono font-bold flex items-center justify-center', dark ? 'border-white/10 text-gray-300' : 'border-black/10 text-gray-700'), children: data.condition || 'No condition set' }), _jsxs("div", { className: cn("mt-4 pt-2 border-t flex justify-between px-2 text-[8px] font-black uppercase tracking-wider", dark ? "border-white/10" : "border-black/10"), children: [_jsx("span", { className: "text-emerald-500", children: "True" }), _jsx("span", { className: "text-red-500", children: "False" })] }), _jsx(Handle, { id: "true", type: "source", position: Position.Bottom, className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-black !left-[20%]" }), _jsx(Handle, { id: "false", type: "source", position: Position.Bottom, className: "!w-3 !h-3 !bg-red-500 !border-2 !border-white dark:!border-black !left-[80%]" })] }));
+};
+const nodeTypes = { trigger: TriggerNode, action: ActionNode, condition: ConditionNode };
+// ── Config Panel Fields ────────────────────────────────────────────────────────
+const FieldInput = ({ label, value, onChange, placeholder, type = 'text', mono = false }) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: label }), _jsx("input", { type: type, value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: cn('w-full bg-z-panel backdrop-blur-md border border-z-border px-3 py-2.5 text-[11px] text-white outline-none rounded-none', 'focus:border-z-accent/50 transition-colors placeholder:text-gray-700', mono && 'font-mono') })] }));
+const FieldTextarea = ({ label, value, onChange, placeholder, rows = 4, mono = false }) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: label }), _jsx("textarea", { value: value || '', onChange: (e) => onChange(e.target.value), placeholder: placeholder, rows: rows, className: cn('w-full bg-z-panel backdrop-blur-md border border-z-border px-3 py-2.5 text-[11px] text-white outline-none resize-none rounded-none', 'focus:border-z-accent/50 transition-colors placeholder:text-gray-700', mono && 'font-mono') })] }));
+const FieldSelect = ({ label, value, onChange, options }) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: label }), _jsx("select", { value: value || '', onChange: (e) => onChange(e.target.value), className: "w-full bg-z-panel backdrop-blur-md border border-z-border px-3 py-2.5 text-[11px] text-white outline-none focus:border-z-accent/50 transition-colors appearance-none rounded-none", children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }));
+// ── Dagre Auto Layout ────────────────────────────────────────────────────────
+const getLayoutedElements = (nodes, edges, direction = 'TB') => {
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: direction });
+    nodes.forEach((node) => {
+        dagreGraph.setNode(node.id, { width: 260, height: 160 });
+    });
+    edges.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+    });
+    dagre.layout(dagreGraph);
+    const newNodes = nodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        return {
+            ...node,
+            position: {
+                x: nodeWithPosition.x - 260 / 2,
+                y: nodeWithPosition.y - 160 / 2,
+            },
+        };
+    });
+    return { nodes: newNodes, edges };
+};
+// ── Main Page ──────────────────────────────────────────────────────────────────
+const FlowBuilderPage = () => {
+    const { theme } = useTheme();
+    const dark = theme === 'dark';
+    const [flows, setFlows] = useState([]);
+    const [selectedFlow, setSelectedFlow] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [showNodeMenu, setShowNodeMenu] = useState(false);
+    const [testRunning, setTestRunning] = useState(false);
+    const [runLogs, setRunLogs] = useState([]);
+    const [showLogs, setShowLogs] = useState(false);
+    const [runs, setRuns] = useState([]);
+    const [activeRunId, setActiveRunId] = useState(null);
+    const [showTestModal, setShowTestModal] = useState(false);
+    const [testPayload, setTestPayload] = useState('{\n  "amount": 1500,\n  "type": "sale"\n}');
+    const [rfInstance, setRfInstance] = useState(null);
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const activeNode = nodes.find((n) => n.selected);
+    // ── Visual Tracing Hook ──────────────────────────────────────────────────────
+    const activeRun = runs.find((r) => r._id === activeRunId || r.id === activeRunId);
+    const visualNodes = React.useMemo(() => {
+        if (!activeRun || !showLogs)
+            return nodes.map((n) => ({ ...n, data: { ...n.data, runStatus: 'idle' } }));
+        const errorLog = runLogs.find((l) => l.runId === activeRunId && l.level === 'error');
+        const errorNodeId = errorLog?.nodeId;
+        return nodes.map((n) => {
+            let status = 'skipped';
+            if (activeRun.completedNodes?.[n.id])
+                status = 'success';
+            else if (n.id === errorNodeId)
+                status = 'error';
+            return { ...n, data: { ...n.data, runStatus: status } };
+        });
+    }, [nodes, activeRun, showLogs, runLogs, activeRunId]);
+    const visualEdges = React.useMemo(() => {
+        if (!activeRun || !showLogs)
+            return edges.map((e) => ({ ...e, animated: false, style: EDGE_STYLE.style }));
+        return edges.map((e) => {
+            let traversed = false;
+            const parentResult = activeRun.completedNodes?.[e.source];
+            if (parentResult) {
+                if (!parentResult.isCondition) {
+                    traversed = true;
+                }
+                else {
+                    const expectedHandle = e.sourceHandle || e.source;
+                    if (parentResult.branch === expectedHandle)
+                        traversed = true;
+                }
+            }
+            if (traversed) {
+                return {
+                    ...e,
+                    animated: true,
+                    style: {
+                        stroke: '#10B981',
+                        strokeWidth: 3,
+                        filter: 'drop-shadow(0 0 5px rgba(16,185,129,0.5))',
+                    },
+                    zIndex: 10,
+                };
+            }
+            else {
+                return {
+                    ...e,
+                    animated: false,
+                    style: { stroke: '#444', strokeWidth: 1, opacity: 0.3 },
+                };
+            }
+        });
+    }, [edges, activeRun, showLogs]);
+    // ── Data Fetching ────────────────────────────────────────────────────────────
+    const fetchFlows = async () => {
+        try {
+            const res = await api.get('/flows');
+            setFlows(res.data.data || []);
+        }
+        catch {
+            toast.error('Registry sync failed');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchFlows();
+    }, []);
+    useEffect(() => {
+        if (!selectedFlow)
+            return;
+        if (selectedFlow.nodes?.length > 0) {
+            setNodes(selectedFlow.nodes);
+            setEdges(selectedFlow.edges || []);
+        }
+        else {
+            const n = [
+                {
+                    id: 'trigger_1',
+                    type: 'trigger',
+                    position: { x: 200, y: 80 },
+                    data: {
+                        triggerType: selectedFlow.trigger?.type || 'webhook',
+                        ...selectedFlow.trigger?.config,
+                    },
+                },
+            ];
+            setNodes(n);
+            setEdges([]);
+        }
+        setRunLogs([]);
+        setShowLogs(false);
+    }, [selectedFlow?._id]);
+    // ── Handlers ─────────────────────────────────────────────────────────────────
+    const onConnect = useCallback((params) => {
+        setEdges((eds) => addEdge({ ...params, ...EDGE_STYLE }, eds));
+    }, [setEdges]);
+    const onLayout = useCallback(() => {
+        const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges);
+        setNodes([...layoutedNodes]);
+        setEdges([...layoutedEdges]);
+        setTimeout(() => {
+            rfInstance?.fitView({ padding: 0.3, duration: 800 });
+        }, 100);
+    }, [nodes, edges, rfInstance, setNodes, setEdges]);
+    const createNewFlow = () => {
+        const initialNodes = [
+            {
+                id: 'trigger_1',
+                type: 'trigger',
+                position: { x: 200, y: 80 },
+                data: { triggerType: 'webhook' },
+            },
+        ];
+        const newFlow = {
+            name: 'NEW_AUTOMATION',
+            description: 'Untitled automation sequence',
+            active: false,
+            nodes: initialNodes,
+            edges: [],
+        };
+        setSelectedFlow(newFlow);
+        setNodes(initialNodes);
+        setEdges([]);
+        setRunLogs([]);
+        setShowLogs(false);
+    };
+    const saveFlow = async () => {
+        if (!selectedFlow)
+            return;
+        setSaving(true);
+        try {
+            const payload = { ...selectedFlow, nodes, edges };
+            if (selectedFlow._id) {
+                await api.patch(`/flows/${selectedFlow._id}`, payload);
+                toast.success('Automation saved');
+            }
+            else {
+                const res = await api.post('/flows', payload);
+                setSelectedFlow(res.data.data);
+                setFlows((prev) => [res.data.data, ...prev]);
+                toast.success('Automation created');
+            }
+            fetchFlows();
+        }
+        catch {
+            toast.error('Save failed');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const deleteFlow = async (id) => {
+        if (!id) {
+            setSelectedFlow(null);
+            return;
+        }
+        if (!confirm('Delete this automation permanently?'))
+            return;
+        try {
+            await api.delete(`/flows/${id}`);
+            setFlows((prev) => prev.filter((f) => f._id !== id));
+            setSelectedFlow(null);
+            toast.success('Automation deleted');
+        }
+        catch {
+            toast.error('Delete failed');
+        }
+    };
+    const addActionNode = (actionType) => {
+        const sourceId = activeNode?.id || nodes[nodes.length - 1]?.id;
+        const newNode = {
+            id: `node_${Date.now()}`,
+            type: 'action',
+            position: { x: 200, y: nodes.length * 170 + 80 },
+            data: { actionType, label: ACTION_TYPES.find((a) => a.id === actionType)?.name },
+        };
+        setNodes((nds) => [...nds, newNode]);
+        if (sourceId) {
+            setEdges((eds) => addEdge({
+                id: `e_${sourceId}_${newNode.id}`,
+                source: sourceId,
+                target: newNode.id,
+                ...EDGE_STYLE,
+            }, eds));
+        }
+        setShowNodeMenu(false);
+    };
+    const addLogicNode = () => {
+        const sourceId = activeNode?.id || nodes[nodes.length - 1]?.id;
+        const newNode = {
+            id: `node_${Date.now()}`,
+            type: 'condition',
+            position: { x: 200, y: nodes.length * 170 + 80 },
+            data: { label: 'If / Else', condition: '{{payload.amount}} > 1000' },
+        };
+        setNodes((nds) => [...nds, newNode]);
+        if (sourceId) {
+            setEdges((eds) => addEdge({
+                id: `e_${sourceId}_${newNode.id}`,
+                source: sourceId,
+                target: newNode.id,
+                ...EDGE_STYLE,
+            }, eds));
+        }
+        setShowNodeMenu(false);
+    };
+    const updateNodeData = (id, patch) => {
+        setNodes((nds) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, ...patch } } : n)));
+    };
+    const deselectAll = () => {
+        setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
+    };
+    const executeTestFlow = async () => {
+        if (!selectedFlow?._id) {
+            toast.error('Please save the automation before testing');
+            return;
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(testPayload);
+        }
+        catch {
+            toast.error('Invalid JSON payload');
+            return;
+        }
+        setTestRunning(true);
+        setShowLogs(true);
+        setShowTestModal(false);
+        setRunLogs([{ level: 'info', msg: 'Dispatching test trigger...' }]);
+        try {
+            const res = await api.post(`/flows/${selectedFlow._id}/test`, { payload: parsed });
+            setActiveRunId(res.data?.data?.runId);
+            fetchLogsLoop(res.data?.data?.runId);
+        }
+        catch (err) {
+            setRunLogs([{ level: 'error', msg: err?.response?.data?.message || 'Test execution failed' }]);
+            setTestRunning(false);
+        }
+    };
+    const fetchLogsLoop = async (runId) => {
+        let polling = true;
+        let attempts = 0;
+        while (polling && attempts < 15) {
+            attempts++;
+            try {
+                const res = await api.get(`/flows/${selectedFlow?._id}/logs`);
+                const allRuns = res.data?.data?.runs || [];
+                const allLogs = res.data?.data?.logs || [];
+                setRuns(allRuns);
+                const myLogs = allLogs
+                    .filter((l) => l.runId === runId)
+                    .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+                setRunLogs(myLogs);
+                const myRun = allRuns.find((r) => r._id === runId || r.id === runId);
+                if (myRun && myRun.status !== 'running') {
+                    polling = false;
+                    setTestRunning(false);
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+            if (polling)
+                await new Promise((r) => setTimeout(r, 2000));
+        }
+        setTestRunning(false);
+    };
+    const openHistory = async () => {
+        setShowLogs(true);
+        try {
+            const res = await api.get(`/flows/${selectedFlow?._id}/logs`);
+            setRuns(res.data?.data?.runs || []);
+            setRunLogs(res.data?.data?.logs || []);
+            setActiveRunId(res.data?.data?.runs?.[0]?._id || null);
+        }
+        catch (err) {
+            toast.error('Failed to load history');
+        }
+    };
+    // ── Loading State ─────────────────────────────────────────────────────────────
+    if (loading) {
+        return (_jsxs("div", { className: "h-[calc(100vh-73px)] flex flex-col items-center justify-center gap-4", children: [_jsx(Loader2, { className: "w-8 h-8 animate-spin text-gray-600" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.4em] text-gray-600", children: "Loading Automations\u2026" })] }));
+    }
+    // ── Render ────────────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: cn('absolute inset-0 flex text-white overflow-hidden', dark ? 'bg-black' : 'bg-gray-50'), children: [_jsxs("div", { className: cn('w-64 flex-shrink-0 border-r flex flex-col z-10', dark ? 'bg-black border-z-border' : 'bg-z-panel border-z-border'), children: [_jsxs("div", { className: cn('p-5 border-b flex items-center justify-between flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-z-accent shadow-sm" }), _jsx("span", { className: cn('text-[9px] font-black uppercase tracking-[0.3em]', dark ? 'text-white' : 'text-black'), children: "Automations" })] }), _jsx("button", { onClick: createNewFlow, title: "New automation", className: cn('w-7 h-7 flex items-center justify-center hover:scale-105 transition-all', dark ? 'bg-white text-black' : 'bg-black text-white'), children: _jsx(Plus, { size: 14 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-3 space-y-1", children: [flows.length === 0 && (_jsx("p", { className: "text-[9px] text-gray-600 uppercase tracking-widest p-3 text-center", children: "No automations yet" })), flows.map((flow) => (_jsxs("button", { onClick: () => setSelectedFlow(flow), className: cn('w-full text-left px-3 py-3 transition-all flex flex-col border group', selectedFlow?._id === flow._id
+                                    ? dark
+                                        ? 'bg-white/[0.06] border-z-border-strong'
+                                        : 'bg-black/5 border-gray-400'
+                                    : dark
+                                        ? 'border-transparent hover:bg-z-hover hover:border-z-border'
+                                        : 'border-transparent hover:bg-black/[0.03] hover:border-z-border'), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: cn('text-[9px] font-black uppercase tracking-tight truncate max-w-[140px]', dark ? 'text-white' : 'text-z-primary'), children: flow.name }), _jsx("div", { className: cn('w-1.5 h-1.5 rounded-full flex-shrink-0', flow.active ? 'bg-z-accent shadow-sm' : 'bg-gray-700') })] }), _jsxs("p", { className: "text-[8px] text-z-secondary uppercase tracking-tight truncate", children: [flow.nodes?.length || 0, " nodes \u00B7 ", flow.active ? 'Live' : 'Idle'] })] }, flow._id)))] })] }), _jsx("div", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: selectedFlow ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: _jsx("input", { value: selectedFlow.name, onChange: (e) => setSelectedFlow({ ...selectedFlow, name: e.target.value }), className: "bg-transparent text-xl font-black uppercase tracking-tighter outline-none focus-visible:ring-2 focus-visible:ring-z-active-border min-w-[200px] max-w-[400px]" }), description: _jsx("input", { value: selectedFlow.description, onChange: (e) => setSelectedFlow({ ...selectedFlow, description: e.target.value }), className: "bg-transparent text-inherit uppercase tracking-widest outline-none focus-visible:ring-2 focus-visible:ring-z-active-border w-full max-w-md" }), actions: _jsxs(_Fragment, { children: [_jsxs("button", { onClick: onLayout, title: "Auto-Layout Graph", className: cn('px-4 h-9 border text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2', 'border-z-border text-z-muted hover:border-white/20 hover:text-white'), children: [_jsx(Wand2, { size: 12 }), "Tidy"] }), _jsxs("button", { onClick: openHistory, disabled: !selectedFlow._id, title: "View Execution History", className: cn('px-4 h-9 border text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2', 'border-z-border text-z-muted hover:border-white/20 hover:text-white'), children: [_jsx(History, { size: 12 }), "History"] }), _jsxs("button", { onClick: () => setShowTestModal(true), disabled: testRunning || !selectedFlow._id, title: !selectedFlow._id ? 'Save first to test' : 'Run test execution', className: cn('px-4 h-9 border text-[9px] font-black uppercase tracking-widest transition-all flex items-center gap-2', 'border-z-border text-z-muted hover:border-white/20 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed'), children: [testRunning ? (_jsx(Loader2, { size: 12, className: "animate-spin" })) : (_jsx(Play, { size: 12 })), "Test Run"] }), _jsx("button", { onClick: () => setSelectedFlow({ ...selectedFlow, active: !selectedFlow.active }), className: cn('px-4 h-9 border text-[9px] font-black uppercase tracking-widest transition-all', selectedFlow.active
+                                            ? 'border-z-accent text-z-active-text bg-z-active-bg hover:bg-z-accent/20'
+                                            : 'border-z-border text-z-secondary hover:border-white/20 hover:text-white'), children: selectedFlow.active ? '● Live' : '○ Idle' }), _jsxs("button", { onClick: saveFlow, disabled: saving, className: "px-5 h-9 bg-z-accent text-white text-[9px] font-black uppercase tracking-widest hover:opacity-90 transition-all flex items-center gap-2 disabled:opacity-50", children: [saving ? _jsx(Loader2, { size: 12, className: "animate-spin" }) : _jsx(Save, { size: 12 }), "Save"] }), _jsx("button", { onClick: () => deleteFlow(selectedFlow._id), className: "h-9 w-9 flex items-center justify-center text-gray-600 hover:text-red-500 hover:bg-red-500/10 transition-all border border-transparent hover:border-red-500/20", children: _jsx(Trash2, { size: 15 }) })] }) }), _jsxs("div", { className: "flex-1 flex overflow-hidden", children: [_jsx("div", { className: "flex-1 overflow-hidden", children: _jsxs(ReactFlow, { nodes: visualNodes, edges: visualEdges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onInit: setRfInstance, nodeTypes: nodeTypes, onPaneClick: () => {
+                                            deselectAll();
+                                            setShowNodeMenu(false);
+                                        }, fitView: true, fitViewOptions: { padding: 0.3 }, minZoom: 0.2, maxZoom: 2, deleteKeyCode: "Delete", children: [_jsx(Background, { color: dark ? '#222' : '#ddd', gap: 20, size: 1 }), _jsx(Controls, { showInteractive: false, className: cn('!border-2 !rounded-none !shadow-[4px_4px_0_0_#000]', dark
+                                                    ? '!bg-black !border-white !text-white !shadow-[4px_4px_0_0_#fff] [&_button]:!bg-black [&_button]:!border-b [&_button]:!border-white/20 [&_button_svg]:!fill-white hover:[&_button]:!bg-white hover:[&_button_svg]:!fill-black'
+                                                    : '!bg-white !border-black !text-black [&_button]:!bg-white [&_button]:!border-b [&_button]:!border-black/20 [&_button_svg]:!fill-black hover:[&_button]:!bg-black hover:[&_button_svg]:!fill-white') }), _jsx(MiniMap, { nodeColor: () => (dark ? '#333' : '#eee'), maskColor: dark ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)', className: cn('!border-2 !rounded-none !shadow-[4px_4px_0_0_#000]', dark ? '!bg-black !border-white !shadow-[4px_4px_0_0_#fff]' : '!bg-white !border-black') }), _jsx(Panel, { position: "bottom-center", className: "mb-6 pointer-events-auto", children: _jsxs("div", { className: "relative flex flex-col items-center", children: [_jsx(AnimatePresence, { children: showNodeMenu && (_jsxs(motion.div, { initial: { opacity: 0, y: 8, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 8, scale: 0.95 }, transition: { duration: 0.15 }, className: cn('absolute bottom-full mb-3 p-2 grid grid-cols-2 gap-1.5 min-w-[340px] shadow-lg rounded-md border', dark ? 'bg-[#1c1c1c] border-gray-800' : 'bg-white border-gray-300'), children: [_jsx("div", { className: cn('col-span-2 px-2 pt-1 pb-2 border-b', dark ? 'border-gray-800' : 'border-gray-200'), children: _jsx("p", { className: "text-xs font-bold uppercase tracking-wider text-gray-500", children: "Add Action Node" }) }), ACTION_TYPES.map((type) => (_jsxs("button", { onClick: () => addActionNode(type.id), className: cn('flex items-center gap-2.5 px-3 py-2.5 border rounded-sm transition-all text-left', dark
+                                                                            ? 'border-transparent hover:bg-[#2c2c2c] hover:border-gray-700'
+                                                                            : 'border-transparent hover:bg-gray-50 hover:border-gray-200'), children: [_jsx("div", { className: cn('w-8 h-8 flex items-center justify-center border flex-shrink-0 rounded-sm', type.color, dark
+                                                                                    ? 'bg-[#2c2c2c] border-gray-700'
+                                                                                    : 'bg-gray-50 border-gray-200'), children: _jsx(type.icon, { size: 14 }) }), _jsxs("div", { children: [_jsx("div", { className: "text-[9px] font-bold text-white", children: type.name }), _jsx("div", { className: "text-[7px] text-gray-600 uppercase tracking-wider", children: type.desc })] })] }, type.id))), _jsx("div", { className: cn('col-span-2 px-2 pt-1 pb-2 border-b mt-2', dark ? 'border-gray-800' : 'border-gray-200'), children: _jsx("p", { className: "text-xs font-bold uppercase tracking-wider text-gray-500", children: "Logic & Routing" }) }), LOGIC_TYPES.map((type) => (_jsxs("button", { onClick: () => addLogicNode(), className: cn('flex items-center gap-2.5 px-3 py-2.5 border rounded-sm transition-all text-left', dark
+                                                                            ? 'border-transparent hover:bg-[#2c2c2c] hover:border-gray-700'
+                                                                            : 'border-transparent hover:bg-gray-50 hover:border-gray-200'), children: [_jsx("div", { className: cn('w-8 h-8 flex items-center justify-center border flex-shrink-0 rounded-sm', type.color, dark
+                                                                                    ? 'bg-[#2c2c2c] border-gray-700'
+                                                                                    : 'bg-gray-50 border-gray-200'), children: _jsx(type.icon, { size: 14 }) }), _jsxs("div", { children: [_jsx("div", { className: "text-[9px] font-bold text-white", children: type.name }), _jsx("div", { className: "text-[7px] text-gray-600 uppercase tracking-wider", children: type.desc })] })] }, type.id)))] })) }), _jsx("button", { onClick: () => setShowNodeMenu((v) => !v), className: cn('w-12 h-12 flex items-center justify-center border-2 transition-all duration-200 !shadow-[4px_4px_0_0_#000]', showNodeMenu
+                                                                ? 'bg-z-accent border-z-active-border text-white rotate-45'
+                                                                : dark ? 'bg-black border-white text-white !shadow-[4px_4px_0_0_#fff]' : 'bg-white border-black text-black'), children: _jsx(Plus, { size: 22, className: "transition-transform duration-200" }) })] }) })] }) }), _jsx(AnimatePresence, { mode: "wait", children: activeNode && (_jsxs(motion.div, { initial: { width: 0, opacity: 0 }, animate: { width: 360, opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: { duration: 0.2 }, className: cn('flex-shrink-0 border-l flex flex-col overflow-hidden', 'z-panel'), style: { width: 360 }, children: [_jsxs("div", { className: cn('px-5 py-4 border-b flex items-center justify-between flex-shrink-0', dark ? 'border-z-border' : 'border-z-border'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Settings, { size: 13, className: "text-z-secondary" }), _jsx("span", { className: cn('text-[9px] font-black uppercase tracking-[0.25em]', dark ? 'text-white' : 'text-z-primary'), children: "Configure Node" })] }), _jsx("button", { onClick: deselectAll, className: "text-z-secondary hover:text-white transition-colors p-1", children: _jsx(X, { size: 14 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-5 space-y-5", children: [_jsxs("div", { className: "bg-z-accent/5 border border-z-accent/15 p-3 flex gap-2.5", children: [_jsx(Info, { size: 11, className: "text-z-active-text flex-shrink-0 mt-0.5" }), _jsxs("p", { className: "text-[8px] text-z-muted uppercase tracking-widest leading-relaxed", children: ["Use", ' ', _jsx("code", { className: "text-z-active-text font-mono", children: '{{payload.field}}' }), ' ', "to inject data from the trigger into any field."] })] }), activeNode.type === 'trigger' ? (_jsx(TriggerConfigPanel, { node: activeNode, flowId: selectedFlow._id, updateNodeData: updateNodeData, dark: dark })) : activeNode.type === 'condition' ? (_jsx(ConditionConfigPanel, { node: activeNode, updateNodeData: updateNodeData, dark: dark })) : (_jsx(ActionConfigPanel, { node: activeNode, updateNodeData: updateNodeData, dark: dark }))] })] }, activeNode.id)) })] }), _jsx(AnimatePresence, { children: showLogs && (_jsxs(motion.div, { initial: { height: 0 }, animate: { height: 250 }, exit: { height: 0 }, className: cn('flex-shrink-0 border-t flex overflow-hidden', dark ? 'border-z-border bg-black' : 'border-z-border bg-gray-50'), children: [_jsxs("div", { className: cn('w-64 border-r flex flex-col', dark ? 'border-z-border' : 'border-z-border'), children: [_jsx("div", { className: cn('px-4 py-3 border-b flex items-center justify-between', dark ? 'border-z-border' : 'border-z-border'), children: _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] text-white", children: "Execution History" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: runs.map((r) => (_jsxs("button", { onClick: () => setActiveRunId(r._id), className: cn('w-full text-left px-3 py-2 border rounded-sm flex items-center justify-between transition-colors', activeRunId === r._id
+                                                        ? 'border-z-border-strong bg-white/5'
+                                                        : 'border-transparent hover:bg-white/[0.02]', dark ? '' : 'text-black'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [r.status === 'running' ? (_jsx(Loader2, { size: 12, className: "animate-spin text-amber-500" })) : r.status === 'failed' ? (_jsx(AlertCircle, { size: 12, className: "text-red-500" })) : (_jsx(CheckCircle2, { size: 12, className: "text-emerald-500" })), _jsx("span", { className: "text-[10px] font-mono text-gray-400", children: String(r._id).slice(-6) })] }), _jsx("span", { className: "text-[9px] text-gray-500", children: new Date(r.createdAt).toLocaleTimeString() })] }, r._id))) })] }), _jsxs("div", { className: "flex-1 flex flex-col", children: [_jsxs("div", { className: cn('px-5 py-3 border-b flex items-center justify-between', dark ? 'border-z-border' : 'border-z-border'), children: [_jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.3em] text-z-secondary", children: "Run Logs" }), _jsx("button", { onClick: () => setShowLogs(false), className: "text-gray-600 hover:text-white transition-colors", children: _jsx(X, { size: 14 }) })] }), _jsxs("div", { className: "p-4 space-y-1.5 overflow-y-auto flex-1 font-mono", children: [runLogs
+                                                        .filter((l) => l.runId === activeRunId || testRunning)
+                                                        .map((log, i) => (_jsxs("div", { className: "flex items-start gap-2.5", children: [log.level === 'error' ? (_jsx(AlertCircle, { size: 11, className: "text-red-500 flex-shrink-0 mt-0.5" })) : log.level === 'success' ? (_jsx(CheckCircle2, { size: 11, className: "text-z-active-text flex-shrink-0 mt-0.5" })) : (_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-600 flex-shrink-0 mt-1.5" })), _jsxs("span", { className: cn('text-[10px]', log.level === 'error'
+                                                                    ? 'text-red-400'
+                                                                    : log.level === 'success'
+                                                                        ? 'text-z-active-text'
+                                                                        : 'text-gray-300'), children: [_jsxs("span", { className: "text-gray-600 mr-2", children: ["[", new Date(log.timestamp || Date.now()).toLocaleTimeString(), "]"] }), log.nodeId && (_jsxs("span", { className: "text-indigo-400 mr-2", children: ["[", log.nodeId, "]"] })), log.msg] })] }, i))), testRunning && (_jsxs("div", { className: "flex items-center gap-2.5 mt-2", children: [_jsx(Loader2, { size: 11, className: "animate-spin text-z-secondary" }), _jsx("span", { className: "text-[10px] text-z-secondary", children: "Engine running\u2026" })] }))] })] })] })) }), _jsx(AnimatePresence, { children: showTestModal && (_jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm", children: _jsxs(motion.div, { initial: { opacity: 0, scale: 0.95, y: 10 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 10 }, className: cn('w-full max-w-lg overflow-hidden flex flex-col border rounded-none shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-md', dark ? 'bg-black/65 border-white/10' : 'bg-white/80 border-black/10'), children: [_jsxs("div", { className: cn('px-5 py-4 border-b flex items-center justify-between', dark ? 'border-white/10' : 'border-black/10'), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center", children: _jsx(Zap, { size: 14, className: "text-indigo-400" }) }), _jsxs("div", { children: [_jsx("h3", { className: cn('text-xs font-bold uppercase tracking-wider', dark ? 'text-white' : 'text-black'), children: "Inject Test Payload" }), _jsx("p", { className: "text-[10px] text-gray-500", children: "Provide JSON data to trigger the workflow." })] })] }), _jsx("button", { onClick: () => setShowTestModal(false), className: "p-1 hover:bg-white/10 rounded-sm text-gray-500 transition-colors", children: _jsx(X, { size: 16 }) })] }), _jsx("div", { className: "p-5 flex-1 bg-black/20", children: _jsx("textarea", { value: testPayload, onChange: (e) => setTestPayload(e.target.value), className: cn('w-full h-48 text-emerald-400 font-mono text-[11px] p-4 outline-none border rounded-none resize-none', dark ? 'bg-black/40 border-white/10 focus:border-z-accent/50' : 'bg-white/40 border-black/10 focus:border-z-accent/50'), spellCheck: false }) }), _jsxs("div", { className: cn('px-5 py-3 border-t flex justify-end gap-3', dark ? 'border-white/10 bg-black/20' : 'border-black/10 bg-white/20'), children: [_jsx("button", { onClick: () => setShowTestModal(false), className: "px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-gray-400 hover:text-white transition-colors", children: "Cancel" }), _jsxs("button", { onClick: executeTestFlow, className: "px-5 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors flex items-center gap-2", children: [_jsx(Play, { size: 12 }), "Run Sequence"] })] })] }) })) })] })) : (
+                /* Empty state */
+                _jsxs("div", { className: "flex-1 flex flex-col items-center justify-center p-12 text-center", children: [_jsx("div", { className: cn('w-28 h-28 border flex items-center justify-center mb-10 group transition-all duration-500', dark
+                                ? 'border-z-border bg-z-panel hover:border-z-active-border'
+                                : 'border-z-border bg-gray-50 hover:border-z-active-border'), children: _jsx(Workflow, { size: 44, className: "text-gray-600 group-hover:text-z-active-text transition-colors duration-500" }) }), _jsx("h2", { className: cn('text-2xl font-black uppercase tracking-tighter mb-3', dark ? 'text-white' : 'text-z-primary'), children: "Enterprise Automations" }), _jsx("p", { className: "text-[10px] text-z-secondary uppercase tracking-[0.3em] max-w-sm leading-loose", children: "Build visual workflow graphs connecting triggers to actions. Supports HTTP, AI, Slack, email, and database operations." }), _jsx("button", { onClick: createNewFlow, className: "mt-10 px-10 py-3.5 bg-z-accent text-white font-black uppercase tracking-[0.25em] text-[9px] hover:opacity-90 active:scale-95 transition-all shadow-sm", children: "Create Automation" })] })) })] }));
+};
+// ── Sub-components for config panel ───────────────────────────────────────────
+function ConditionConfigPanel({ node, updateNodeData, dark }) {
+    const d = node.data;
+    const upd = (patch) => updateNodeData(node.id, patch);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx(FieldInput, { label: "Node Label", value: d.label, onChange: (v) => upd({ label: v }), placeholder: "If / Else" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: "Evaluation Condition" }), _jsx("textarea", { value: d.condition || '', onChange: (e) => upd({ condition: e.target.value }), placeholder: "{{payload.amount}} > 1000", rows: 3, className: cn('w-full bg-z-panel backdrop-blur-md border border-z-border px-3 py-2.5 text-[11px] text-white outline-none resize-none rounded-none font-mono', 'focus:border-z-accent/50 transition-colors placeholder:text-gray-700') }), _jsx("p", { className: "text-[8px] text-gray-500 uppercase tracking-wider mt-1", children: "Must evaluate to a boolean True or False. Standard JavaScript syntax is supported." })] })] }));
+}
+function TriggerConfigPanel({ node, flowId, updateNodeData, dark }) {
+    const d = node.data;
+    return (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: "Trigger Type" }), _jsx("div", { className: "grid grid-cols-3 gap-1.5", children: TRIGGER_TYPES.map((t) => (_jsxs("button", { onClick: () => updateNodeData(node.id, { triggerType: t.id }), title: t.desc, className: cn('py-2.5 px-2 text-[8px] font-black uppercase tracking-wider border transition-all flex flex-col items-center gap-1.5', d.triggerType === t.id
+                                ? 'bg-white text-black border-white'
+                                : dark
+                                    ? 'bg-z-hover border-z-border text-z-muted hover:text-white hover:border-white/20'
+                                    : 'bg-gray-100 border-z-border text-gray-600 hover:border-gray-400'), children: [_jsx(t.icon, { size: 13 }), t.detail] }, t.id))) })] }), d.triggerType === 'webhook' && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-[8px] font-black uppercase tracking-widest text-z-secondary", children: "Inbound Webhook URL" }), _jsx("div", { className: cn('px-3 py-2.5 border flex items-center gap-2', dark ? 'bg-black border-z-border' : 'bg-gray-100 border-z-border'), children: _jsx("code", { className: "text-[9px] text-z-active-text font-mono truncate flex-1", children: flowId ? `POST /api/v1/hooks/${flowId}` : 'Save automation to get URL' }) }), _jsx("p", { className: "text-[8px] text-gray-600 uppercase tracking-wider", children: "Send a POST request to this endpoint to trigger the flow" })] })), d.triggerType === 'collection_change' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Collection Slug", value: d.collection, onChange: (v) => updateNodeData(node.id, { collection: v }), placeholder: "e.g. posts, products" }), _jsx(FieldSelect, { label: "Event Action", value: d.action || '', onChange: (v) => updateNodeData(node.id, { action: v }), options: [
+                            { value: '', label: 'Any (create, update, delete)' },
+                            { value: 'create', label: 'Create only' },
+                            { value: 'update', label: 'Update only' },
+                            { value: 'delete', label: 'Delete only' },
+                        ] })] })), d.triggerType === 'schedule' && (_jsx(FieldInput, { label: "Cron Expression", value: d.cron, onChange: (v) => updateNodeData(node.id, { cron: v }), placeholder: "0 9 * * 1 (every Monday 9am)", mono: true }))] }));
+}
+function ActionConfigPanel({ node, updateNodeData, dark }) {
+    const d = node.data;
+    const t = d.actionType;
+    const upd = (patch) => updateNodeData(node.id, patch);
+    const [flows, setFlows] = useState([]);
+    useEffect(() => {
+        if (t === 'loop')
+            api.get('/flows').then((r) => setFlows(r.data.data));
+    }, [t]);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx(FieldInput, { label: "Node Label", value: d.label, onChange: (v) => upd({ label: v }), placeholder: "Describe this step\u2026" }), t === 'delay' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Duration Amount", value: d.amount, onChange: (v) => upd({ amount: v }), type: "number", placeholder: "15" }), _jsx(FieldSelect, { label: "Time Unit", value: d.unit, onChange: (v) => upd({ unit: v }), options: [
+                            { label: 'Seconds', value: 'seconds' },
+                            { label: 'Minutes', value: 'minutes' },
+                            { label: 'Hours', value: 'hours' },
+                            { label: 'Days', value: 'days' },
+                        ] }), _jsx("p", { className: "text-[8px] text-gray-500 uppercase mt-2", children: "The execution engine will suspend this workflow into durable storage and wake it up automatically when the timer expires." })] })), t === 'code' && (_jsxs(_Fragment, { children: [_jsx(FieldTextarea, { label: "Javascript Transformer Code", value: d.code, onChange: (v) => upd({ code: v }), placeholder: "payload.total = payload.price * 2;\nreturn payload;", rows: 8, mono: true }), _jsx("p", { className: "text-[8px] text-gray-500 uppercase mt-2", children: "Write raw JS. You must return an object. The returned object will become the new Payload for all downstream nodes." })] })), t === 'loop' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Array Path (Inside Payload)", value: d.arrayPath, onChange: (v) => upd({ arrayPath: v }), placeholder: "payload.customers", mono: true }), _jsx(FieldSelect, { label: "Target Sub-Flow", value: d.targetFlowId, onChange: (v) => upd({ targetFlowId: v }), options: [
+                            { label: 'Select automation...', value: '' },
+                            ...flows.map((f) => ({ label: f.name, value: f._id })),
+                        ] }), _jsx("p", { className: "text-[8px] text-gray-500 uppercase mt-2", children: "The engine will read the array and spawn a parallel background run of the selected Sub-Flow for every single item." })] })), d.actionType === 'http' && (_jsxs(_Fragment, { children: [_jsx(FieldSelect, { label: "Method", value: d.method || 'POST', onChange: (v) => upd({ method: v }), options: ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'].map((m) => ({ value: m, label: m })) }), _jsx(FieldInput, { label: "Endpoint URL", value: d.url, onChange: (v) => upd({ url: v }), placeholder: "https://api.example.com/v1/...", mono: true }), _jsx(FieldTextarea, { label: "Headers (JSON)", value: d.headers, onChange: (v) => upd({ headers: v }), placeholder: '{"Authorization": "Bearer {{env.API_KEY}}"}', rows: 3, mono: true }), _jsx(FieldTextarea, { label: "Body (JSON)", value: d.body, onChange: (v) => upd({ body: v }), placeholder: '{"event": "{{payload.type}}", "data": "{{payload}}"}', rows: 5, mono: true })] })), d.actionType === 'slack' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Slack Webhook URL", value: d.webhookUrl, onChange: (v) => upd({ webhookUrl: v }), placeholder: "https://hooks.slack.com/services/...", mono: true }), _jsx(FieldTextarea, { label: "Message", value: d.message, onChange: (v) => upd({ message: v }), placeholder: "\uD83D\uDEA8 Alert: {{payload.title}} was updated!", rows: 4 })] })), d.actionType === 'email' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "To", value: d.to, onChange: (v) => upd({ to: v }), placeholder: "user@example.com or {{payload.email}}" }), _jsx(FieldInput, { label: "Subject", value: d.subject, onChange: (v) => upd({ subject: v }), placeholder: "Notification: {{payload.title}}" }), _jsx(FieldTextarea, { label: "Body (HTML)", value: d.body, onChange: (v) => upd({ body: v }), placeholder: "<h2>Hello!</h2><p>{{payload.content}}</p>", rows: 5, mono: true })] })), d.actionType === 'ai_prompt' && (_jsxs(_Fragment, { children: [_jsx(FieldTextarea, { label: "Prompt", value: d.prompt, onChange: (v) => upd({ prompt: v }), placeholder: "Translate the following to French: {{payload.content}}", rows: 6 }), _jsxs("p", { className: "text-[8px] text-gray-600 uppercase tracking-wider", children: ["AI output is injected into context as", ' ', _jsx("code", { className: "text-purple-400 font-mono", children: '{{nodeId.output}}' }), " for downstream nodes."] })] })), d.actionType === 'webhook' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Webhook URL", value: d.url, onChange: (v) => upd({ url: v }), placeholder: "https://...", mono: true }), _jsx(FieldInput, { label: "Secret (optional)", value: d.secret, onChange: (v) => upd({ secret: v }), placeholder: "Signing secret", type: "password" })] })), d.actionType === 'update_content' && (_jsxs(_Fragment, { children: [_jsx(FieldInput, { label: "Collection Slug", value: d.collection, onChange: (v) => upd({ collection: v }), placeholder: "e.g. posts" }), _jsx(FieldSelect, { label: "Operation", value: d.operation || 'update', onChange: (v) => upd({ operation: v }), options: [
+                            { value: 'update', label: 'Update document' },
+                            { value: 'create', label: 'Create document' },
+                            { value: 'delete', label: 'Delete document' },
+                        ] }), _jsx(FieldInput, { label: "Document ID (or $.path)", value: d.documentId, onChange: (v) => upd({ documentId: v }), placeholder: "{{payload._id}} or $.id", mono: true }), _jsx(FieldTextarea, { label: "Fields (JSON)", value: d.fields, onChange: (v) => upd({ fields: v }), placeholder: '{"status": "published", "updatedAt": "{{payload.updatedAt}}"}', rows: 5, mono: true })] })), d.actionType === 'log' && (_jsx(FieldInput, { label: "Log Message", value: d.message, onChange: (v) => upd({ message: v }), placeholder: "Flow executed: {{payload.title}}" }))] }));
+}
+export default FlowBuilderPage;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './plugin';

package/dist/plugin.d.ts

@@ -0,0 +1 @@
+export { default as FlowBuilderPage } from './FlowBuilderPage';

package/dist/plugin.js

@@ -0,0 +1 @@
+export { default as FlowBuilderPage } from './FlowBuilderPage';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@zenith-open/zenithcms-plugin-workflows-ui",
+  "version": "1.0.0",
+  "description": "Workflow Automation UI Plugin for Zenith CMS",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@xyflow/react": "^12.11.0",
+    "dagre": "^0.8.5",
+    "lucide-react": "^0.354.0",
+    "framer-motion": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "echo 'Skipped build for broken plugin-workflows-ui'"
+  }
+}