machinaos 0.0.1

package/client/src/Dashboard.tsx

@@ -0,0 +1,1173 @@
+import React, { useEffect } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  ConnectionMode,
+  ConnectionLineType,
+  SelectionMode,
+  Node,
+  Edge,
+} from 'reactflow';
+import GenericNode from './components/GenericNode';
+import AIAgentNode from './components/AIAgentNode';
+import ModelNode from './components/ModelNode';
+import SquareNode from './components/SquareNode';
+import TriggerNode from './components/TriggerNode';
+import ToolkitNode from './components/ToolkitNode';
+import ConditionalEdge from './components/ConditionalEdge';
+import NodeContextMenu from './components/ui/NodeContextMenu';
+import { nodeDefinitions } from './nodeDefinitions';
+import { ANDROID_SERVICE_NODE_TYPES } from './nodeDefinitions/androidServiceNodes';
+import { ANDROID_DEVICE_NODE_TYPES } from './nodeDefinitions/androidDeviceNodes';
+import { SCHEDULER_NODE_TYPES } from './nodeDefinitions/schedulerNodes';
+import { CHAT_NODE_TYPES } from './nodeDefinitions/chatNodes';
+import { CODE_NODE_TYPES } from './nodeDefinitions/codeNodes';
+import { UTILITY_NODE_TYPES } from './nodeDefinitions/utilityNodes';
+import { TOOL_NODE_TYPES } from './nodeDefinitions/toolNodes';
+import { SKILL_NODE_TYPES } from './nodeDefinitions/skillNodes';
+import { DOCUMENT_NODE_TYPES } from './nodeDefinitions/documentNodes';
+import ParameterPanel from './ParameterPanel';
+import LocationParameterPanel from './components/LocationParameterPanel';
+import { useAppStore } from './store/useAppStore';
+import ComponentPalette from './components/ui/ComponentPalette';
+import TopToolbar from './components/ui/TopToolbar';
+import WorkflowSidebar from './components/ui/WorkflowSidebar';
+import SettingsPanel, { WorkflowSettings, defaultSettings } from './components/ui/SettingsPanel';
+import WhatsAppSettingsPanel from './components/ui/WhatsAppSettingsPanel';
+import AndroidSettingsPanel from './components/ui/AndroidSettingsPanel';
+import AIResultModal from './components/ui/AIResultModal';
+import CredentialsModal from './components/CredentialsModal';
+import ErrorBoundary from './components/ui/ErrorBoundary';
+import ConsolePanel from './components/ui/ConsolePanel';
+import { useAppTheme } from './hooks/useAppTheme';
+import { useWorkflowManagement } from './hooks/useWorkflowManagement';
+import { useDragAndDrop } from './hooks/useDragAndDrop';
+import { useComponentPalette } from './hooks/useComponentPalette';
+import { useReactFlowNodes } from './hooks/useReactFlowNodes';
+import { useCopyPaste } from './hooks/useCopyPaste';
+import { useWebSocket } from './contexts/WebSocketContext';
+import { useTheme } from './contexts/ThemeContext';
+import {
+  sanitizeNodesForComparison,
+  sanitizeEdgesForComparison,
+  generateWorkflowId
+} from './utils/workflow';
+import { importWorkflowFromFile } from './utils/workflowExport';
+
+import 'reactflow/dist/style.css';
+
+// Node types configuration - defined outside component to prevent recreation on re-renders
+// This is required by React Flow to avoid performance issues
+const createNodeTypes = (): Record<string, React.ComponentType<any>> => {
+  const types: Record<string, React.ComponentType<any>> = {};
+
+  // Trigger nodes (no input handles) - check by group or specific types
+  const TRIGGER_NODE_TYPES = ['start', 'cronScheduler', 'webhookTrigger', 'whatsappReceive', 'chatTrigger'];
+
+  Object.keys(nodeDefinitions).forEach(type => {
+    const definition = nodeDefinitions[type];
+
+    // Trigger nodes - no input connections (start workflows)
+    if (TRIGGER_NODE_TYPES.includes(type)) {
+      types[type] = TriggerNode;
+    } else if (type === 'openaiChatModel' || type === 'anthropicChatModel' || type === 'geminiChatModel' || type === 'openrouterChatModel' || type === 'groqChatModel' || type === 'cerebrasChatModel') {
+      // AI chat model nodes use square design
+      types[type] = SquareNode;
+    } else if (type === 'aiAgent' || type === 'chatAgent') {
+      types[type] = AIAgentNode;
+    } else if (type === 'simpleMemory') {
+      // Simple Memory node for AI conversation history - uses circular ModelNode design
+      types[type] = ModelNode;
+    } else if (type === 'whatsappConnect' || type === 'whatsappSend' || type === 'whatsappDb') {
+      // WhatsApp action nodes use SquareNode (whatsappReceive is a trigger)
+      types[type] = SquareNode;
+    } else if (ANDROID_SERVICE_NODE_TYPES.includes(type) || ANDROID_DEVICE_NODE_TYPES.includes(type)) {
+      // Android service and device nodes use SquareNode component
+      types[type] = SquareNode;
+    } else if (SCHEDULER_NODE_TYPES.includes(type)) {
+      // Timer uses SquareNode (has input), cronScheduler already handled as trigger above
+      types[type] = SquareNode;
+    } else if (CHAT_NODE_TYPES.includes(type)) {
+      // Chat nodes use SquareNode component
+      types[type] = SquareNode;
+    } else if (CODE_NODE_TYPES.includes(type)) {
+      // Code execution nodes use SquareNode component
+      types[type] = SquareNode;
+    } else if (UTILITY_NODE_TYPES.includes(type)) {
+      // Utility nodes (HTTP, Webhooks) use SquareNode component
+      // Note: webhookTrigger is already handled as trigger above
+      types[type] = SquareNode;
+    } else if (TOOL_NODE_TYPES.includes(type)) {
+      // Most tool nodes use circular ModelNode
+      // Exception: androidTool uses ToolkitNode with top/bottom handles
+      if (type === 'androidTool') {
+        types[type] = ToolkitNode;
+      } else {
+        types[type] = ModelNode;
+      }
+    } else if (SKILL_NODE_TYPES.includes(type)) {
+      // Skill nodes use ToolkitNode (vertical handle layout like Android Toolkit)
+      types[type] = ToolkitNode;
+    } else if (DOCUMENT_NODE_TYPES.includes(type)) {
+      // Document processing nodes use SquareNode component
+      types[type] = SquareNode;
+    } else if (definition?.group?.includes('model')) {
+      // Fallback for other model nodes
+      types[type] = ModelNode;
+    } else if (definition?.group?.includes('service')) {
+      // Any node with 'service' group uses SquareNode component
+      types[type] = SquareNode;
+    } else {
+      types[type] = GenericNode;
+    }
+  });
+
+  return types;
+};
+
+// Create node types once at module load time
+const moduleNodeTypes = createNodeTypes();
+
+// Edge types configuration - enables conditional edge rendering
+const moduleEdgeTypes = {
+  conditional: ConditionalEdge,
+};
+
+// Edge styles generator using theme colors - supports light and dark modes
+const getEdgeStyles = (colors: {
+  edgeDefault: string;
+  edgeSelected: string;
+  edgeExecuting: string;
+  edgeCompleted: string;
+  edgeError: string;
+}, isDark: boolean) => `
+  /* Base style for ALL edges */
+  .react-flow__edge path {
+    stroke: ${colors.edgeDefault} !important;
+    stroke-width: 2px;
+  }
+
+  .react-flow__edge.selected path {
+    stroke: ${colors.edgeSelected} !important;
+    stroke-width: 4px !important;
+  }
+
+  /* Executing edge - subtle blue in light mode, cyan in dark mode */
+  .react-flow__edge.executing path {
+    stroke: ${isDark ? colors.edgeExecuting : '#2563eb'} !important;
+    stroke-width: 3px !important;
+    stroke-dasharray: 8 4;
+    animation: dashFlow 0.5s linear infinite;
+  }
+
+  /* Completed edge - subtle green in both modes */
+  .react-flow__edge.completed path {
+    stroke: ${isDark ? colors.edgeCompleted : '#16a34a'} !important;
+    stroke-width: 2px !important;
+  }
+
+  /* Error edge - keep red for visibility */
+  .react-flow__edge.error path {
+    stroke: ${colors.edgeError} !important;
+    stroke-width: 3px !important;
+  }
+
+  /* Pending edge - animated dash in both modes */
+  .react-flow__edge.pending path {
+    stroke: ${isDark ? colors.edgeDefault : '#6b7280'} !important;
+    stroke-width: 2px !important;
+    stroke-dasharray: 8 4;
+    animation: dashFlow 0.5s linear infinite;
+  }
+
+  /* Memory connection active */
+  .react-flow__edge.memory-active path {
+    stroke: ${isDark ? '#ff79c6' : '#db2777'} !important;
+    stroke-width: 3px !important;
+  }
+
+  /* Tool connection active */
+  .react-flow__edge.tool-active path {
+    stroke: ${isDark ? '#ffb86c' : '#ea580c'} !important;
+    stroke-width: 3px !important;
+  }
+
+  @keyframes dashFlow {
+    0% { stroke-dashoffset: 24; }
+    100% { stroke-dashoffset: 0; }
+  }
+
+  /* Executing node - visible glow in both modes */
+  .react-flow__node.executing {
+    filter: ${isDark
+      ? `drop-shadow(0 0 8px ${colors.edgeExecuting}) drop-shadow(0 0 16px ${colors.edgeExecuting}80)`
+      : 'drop-shadow(0 0 10px rgba(37, 99, 235, 0.8)) drop-shadow(0 0 20px rgba(37, 99, 235, 0.6))'};
+    animation: ${isDark ? 'nodeGlowDark' : 'nodeGlowLight'} 1.2s ease-in-out infinite;
+  }
+
+  @keyframes nodeGlowDark {
+    0%, 100% {
+      filter: drop-shadow(0 0 8px ${colors.edgeExecuting}) drop-shadow(0 0 16px ${colors.edgeExecuting}80);
+    }
+    50% {
+      filter: drop-shadow(0 0 14px ${colors.edgeExecuting}) drop-shadow(0 0 24px ${colors.edgeExecuting});
+    }
+  }
+
+  @keyframes nodeGlowLight {
+    0%, 100% {
+      filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.8)) drop-shadow(0 0 20px rgba(37, 99, 235, 0.6));
+    }
+    50% {
+      filter: drop-shadow(0 0 16px rgba(37, 99, 235, 1)) drop-shadow(0 0 30px rgba(37, 99, 235, 0.8));
+    }
+  }
+`;
+
+const initialNodes: Node[] = [];
+const initialEdges: Edge[] = [];
+
+// Inner component that uses useReactFlow() - must be inside ReactFlowProvider
+const DashboardContent: React.FC = () => {
+  const theme = useAppTheme();
+  const { isDarkMode } = useTheme();
+  const {
+    currentWorkflow,
+    hasUnsavedChanges,
+    savedWorkflows,
+    sidebarVisible,
+    componentPaletteVisible,
+    updateWorkflow,
+    loadSavedWorkflows,
+    createNewWorkflow,
+    deleteWorkflow,
+    migrateCurrentWorkflow,
+    toggleSidebar,
+    toggleComponentPalette,
+    proMode,
+    toggleProMode,
+    exportWorkflowToJSON,
+    exportWorkflowToFile,
+    setCurrentWorkflow,
+    whatsappSettingsOpen,
+    setWhatsAppSettingsOpen,
+    androidSettingsOpen,
+    setAndroidSettingsOpen,
+    selectedNode,
+    setSelectedNode,
+    renamingNodeId,
+    setRenamingNodeId,
+    // Per-workflow UI state (n8n pattern)
+    setWorkflowExecuting,
+    setWorkflowExecutionOrder,
+    setWorkflowViewport,
+    clearWorkflowExecutionState,
+  } = useAppStore();
+  
+  // ReactFlow state management (local state for performance)
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  // ReactFlow instance for viewport control (n8n pattern - per-workflow viewport)
+  const reactFlowInstance = useReactFlow();
+
+  // AI execution state - result and modal are local, execution tracking is per-workflow
+  const [executionResult, setExecutionResult] = React.useState<any>(null);
+  const [showResult, setShowResult] = React.useState(false);
+
+  // Get per-workflow execution state (n8n pattern - isolated per workflow)
+  // Subscribe to workflowUIStates directly so Zustand triggers re-renders when it changes
+  const workflowUIStates = useAppStore(state => state.workflowUIStates);
+  const workflowUIState = React.useMemo(() => {
+    if (!currentWorkflow?.id) return null;
+    return workflowUIStates[currentWorkflow.id] || { isExecuting: false, executedNodes: [], executionOrder: [], selectedNodeId: null };
+  }, [workflowUIStates, currentWorkflow?.id]);
+  const isExecuting = workflowUIState?.isExecuting || false;
+  const executedNodes = React.useMemo(() => new Set(workflowUIState?.executedNodes || []), [workflowUIState?.executedNodes]);
+  const executionOrder = workflowUIState?.executionOrder || [];
+  // Custom hooks for different concerns
+  const { 
+    handleWorkflowNameChange,
+    handleSave,
+    handleNew,
+    handleOpen,
+    handleSelectWorkflow,
+  } = useWorkflowManagement();
+
+  const { collapsedSections, searchQuery, setSearchQuery, toggleSection } = useComponentPalette();
+  const { saveNodeParameters, executeWorkflow, deployWorkflow, cancelDeployment, nodeStatuses, deploymentStatus, workflowLock } = useWebSocket();
+
+  // Scope deployment and lock to current workflow (n8n pattern)
+  // Only show as "running" or "locked" if it applies to the currently viewed workflow
+  const isCurrentWorkflowDeployed = deploymentStatus.isRunning &&
+    deploymentStatus.workflow_id === currentWorkflow?.id;
+  const isCurrentWorkflowLocked = workflowLock.locked &&
+    workflowLock.workflow_id === currentWorkflow?.id;
+  const { onDragOver, onDrop, handleComponentDragStart } = useDragAndDrop({ nodes, setNodes, saveNodeParameters });
+  const { onConnect, onNodesDelete, onEdgesDelete } = useReactFlowNodes({ setNodes, setEdges });
+  const { copySelectedNodes, pasteNodes } = useCopyPaste({ nodes, edges, setNodes, setEdges, saveNodeParameters });
+
+  // Toggle disabled state on selected nodes
+  const toggleDisableSelected = React.useCallback(() => {
+    setNodes(nds => nds.map(node => {
+      if (node.selected) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            disabled: !node.data?.disabled,
+          },
+        };
+      }
+      return node;
+    }));
+  }, [setNodes]);
+
+  // Note: executedNodes and executionOrder are now derived from per-workflow state above
+
+  // Settings state with localStorage persistence
+  const [settings, setSettings] = React.useState<WorkflowSettings>(() => {
+    try {
+      const saved = localStorage.getItem('workflow_settings');
+      return saved ? { ...defaultSettings, ...JSON.parse(saved) } : defaultSettings;
+    } catch {
+      return defaultSettings;
+    }
+  });
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  const [credentialsOpen, setCredentialsOpen] = React.useState(false);
+  const [consolePanelOpen, setConsolePanelOpen] = React.useState(false);
+
+  // Context menu state for node right-click
+  const [contextMenu, setContextMenu] = React.useState<{
+    nodeId: string;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Persist settings to localStorage
+  React.useEffect(() => {
+    localStorage.setItem('workflow_settings', JSON.stringify(settings));
+  }, [settings]);
+
+  // Update nodes with execution status classes
+  const styledNodes = React.useMemo(() => {
+    return nodes.map(node => {
+      const nodeStatus = nodeStatuses[node.id];
+      let className = '';
+
+      if (nodeStatus?.status === 'executing' || nodeStatus?.status === 'waiting') {
+        className = 'executing';
+      } else if (nodeStatus?.status === 'success') {
+        className = 'completed';
+      } else if (nodeStatus?.status === 'error') {
+        className = 'error';
+      } else if (isExecuting && executionOrder.includes(node.id) && !executedNodes.has(node.id)) {
+        className = 'pending';
+      }
+
+      return {
+        ...node,
+        className
+      };
+    });
+  }, [nodes, nodeStatuses, isExecuting, executionOrder, executedNodes]);
+
+  // Update edges with execution status classes
+  const styledEdges = React.useMemo(() => {
+    return edges.map(edge => {
+      const sourceStatus = nodeStatuses[edge.source];
+      const targetStatus = nodeStatuses[edge.target];
+      const targetNode = nodes.find(n => n.id === edge.target);
+
+      let className = '';
+
+      // Check if this edge connects to an AI Agent's memory or tools/skill handle
+      const isMemoryConnection = edge.targetHandle === 'input-memory';
+      const isToolConnection = edge.targetHandle === 'input-tools';
+      const isSkillConnection = edge.targetHandle === 'input-skill';
+      const isAIAgentTarget = targetNode?.type === 'aiAgent' || targetNode?.type === 'chatAgent';
+
+      // Highlight memory/tool connections when AI Agent is executing and using them
+      if (isAIAgentTarget && targetStatus?.status === 'executing') {
+        const phase = targetStatus?.data?.phase as string | undefined;
+        const hasMemory = targetStatus?.data?.has_memory;
+
+        // Memory connection highlights during memory phases
+        if (isMemoryConnection && hasMemory) {
+          if (phase === 'loading_memory' || phase === 'memory_loaded' || phase === 'saving_memory') {
+            className = 'memory-active';
+          } else if (phase === 'invoking_llm') {
+            // Keep memory edge highlighted during LLM invocation to show context is being used
+            className = 'memory-active';
+          }
+        }
+        // Tool connection highlights when the specific tool node is executing
+        // Only highlight the edge whose source (tool node) is actually being used
+        else if (isToolConnection) {
+          const toolNodeStatus = sourceStatus?.status;
+          if (toolNodeStatus === 'executing') {
+            // This specific tool is being executed - highlight its edge
+            className = 'tool-active';
+          } else if ((phase === 'invoking_llm' || phase === 'building_graph') && toolNodeStatus === 'success') {
+            // Tool completed successfully - keep edge showing success
+            className = 'completed';
+          }
+        }
+        // Skill connection highlights during skill loading phase (Chat Agent)
+        // Skills provide context to LLM, so highlight only when loading skills
+        else if (isSkillConnection) {
+          if (phase === 'loading_skills') {
+            className = 'skill-active';
+          }
+        }
+      }
+
+      // Standard edge status classes - ONLY apply during active execution or deployment
+      // When not executing/deploying, all edges should have the same default cyan color
+      const isActiveExecution = isExecuting || isCurrentWorkflowDeployed;
+      if (!className && isActiveExecution) {
+        const srcStatus = sourceStatus?.status;
+        const tgtStatus = targetStatus?.status;
+
+        // Edge is executing if target is currently executing (data flowing into it)
+        if (tgtStatus === 'executing') {
+          className = 'executing';
+        }
+        // Edge is completed if both source and target are successful during this execution
+        else if (srcStatus === 'success' && tgtStatus === 'success') {
+          className = 'completed';
+        }
+        // Edge has error if target has error
+        else if (tgtStatus === 'error') {
+          className = 'error';
+        }
+        // Edge shows data flowing when source completed and target is waiting for inputs
+        // This indicates data has been produced and is available to the target
+        else if (srcStatus === 'success' && tgtStatus === 'waiting') {
+          className = 'executing';
+        }
+        // Edge is pending if source completed but target hasn't started
+        else if (srcStatus === 'success' && !tgtStatus) {
+          className = 'pending';
+        }
+        // Edge is pending if source is waiting (hasn't produced output yet)
+        // This keeps downstream edges from glowing until source completes
+        else if (srcStatus === 'waiting') {
+          className = 'pending';
+        }
+      }
+
+      return {
+        ...edge,
+        className
+      };
+    });
+  }, [edges, nodeStatuses, isExecuting, isCurrentWorkflowDeployed, nodes]);
+
+  // Memoize ReactFlow options to prevent unnecessary re-renders
+  const defaultEdgeOptions = React.useMemo(() => ({
+    type: 'smoothstep',
+    animated: true,
+    style: { stroke: theme.dracula.cyan, strokeWidth: 3 },
+  }), [theme.dracula.cyan]);
+
+  const connectionLineStyle = React.useMemo(() => ({
+    stroke: theme.dracula.cyan,
+    strokeWidth: 2
+  }), [theme.dracula.cyan]);
+
+  const reactFlowStyle = React.useMemo(() => ({
+    width: '100%',
+    height: '100%',
+    backgroundColor: theme.colors.background,
+  }), [theme.colors.background]);
+
+  const snapGrid: [number, number] = React.useMemo(() => [20, 20], []);
+
+  const proOptions = React.useMemo(() => ({ hideAttribution: true }), []);
+
+  // Use useRef for nodeTypes to guarantee the same object reference across all renders
+  // including React.StrictMode's double-render cycle. useMemo can't guarantee this
+  // because it may run during both render cycles.
+  const nodeTypesRef = React.useRef(moduleNodeTypes);
+  const edgeTypesRef = React.useRef(moduleEdgeTypes);
+
+  // Execute entire workflow from start node to end
+  const handleRun = async () => {
+    if (!currentWorkflow) return;
+    const workflowId = currentWorkflow.id;
+
+    // Use per-workflow state setters (n8n pattern)
+    setWorkflowExecuting(workflowId, true);
+    setExecutionResult(null);
+    clearWorkflowExecutionState(workflowId);
+    setWorkflowExecuting(workflowId, true); // Re-set after clear
+
+    try {
+      // Check if there's a start node
+      const startNode = nodes.find(node => node.type === 'start');
+      if (!startNode) {
+        alert('No Start node found in workflow.\n\nAdd a Start node to begin workflow execution.');
+        setWorkflowExecuting(workflowId, false);
+        return;
+      }
+
+      // Build execution order for visual feedback (BFS from start node)
+      const buildOrder = () => {
+        const order: string[] = [];
+        const visited = new Set<string>();
+        const queue = [startNode.id];
+        const adjacencyMap = new Map<string, string[]>();
+
+        edges.forEach(edge => {
+          const sources = adjacencyMap.get(edge.source) || [];
+          sources.push(edge.target);
+          adjacencyMap.set(edge.source, sources);
+        });
+
+        while (queue.length > 0) {
+          const currentId = queue.shift()!;
+          if (visited.has(currentId)) continue;
+          visited.add(currentId);
+          order.push(currentId);
+
+          const connected = adjacencyMap.get(currentId) || [];
+          connected.forEach(id => {
+            if (!visited.has(id)) queue.push(id);
+          });
+        }
+        return order;
+      };
+
+      const order = buildOrder();
+      setWorkflowExecutionOrder(workflowId, order);
+
+      console.log('[Workflow Run] Starting workflow execution with', nodes.length, 'nodes and', edges.length, 'edges');
+      console.log('[Workflow Run] Execution order:', order);
+
+      // Execute the entire workflow via WebSocket
+      const workflowResult = await executeWorkflow(nodes, edges);
+
+      console.log('[Workflow Run] Execution complete:', workflowResult);
+
+      // Build result for display
+      const result = {
+        success: workflowResult.success,
+        nodeId: 'workflow',
+        nodeName: currentWorkflow.name || 'Workflow',
+        timestamp: new Date().toISOString(),
+        executionTime: workflowResult.execution_time || 0,
+        outputs: workflowResult.node_results || {},
+        data: workflowResult,
+        error: workflowResult.error || (workflowResult.errors?.length > 0 ? workflowResult.errors[0].error : undefined),
+        nodeData: workflowResult,
+        // Workflow-specific display data
+        nodesExecuted: workflowResult.nodes_executed || [],
+        executionOrder: workflowResult.execution_order || [],
+        totalNodes: workflowResult.total_nodes || 0,
+        completedNodes: workflowResult.completed_nodes || 0,
+        nodeResults: workflowResult.node_results || {},
+        errors: workflowResult.errors || [],
+        // For backwards compatibility with AI result modal
+        response: workflowResult.success
+          ? `Workflow executed successfully. ${workflowResult.completed_nodes}/${workflowResult.total_nodes} nodes completed.`
+          : `Workflow failed: ${workflowResult.error || 'Unknown error'}`,
+        model: 'workflow'
+      };
+
+      // Set result and show modal
+      setExecutionResult(result);
+      setShowResult(true);
+
+    } catch (error: any) {
+      console.error('Workflow execution error:', error);
+
+      // Create error result for modal display
+      const errorResult = {
+        success: false,
+        nodeId: 'workflow',
+        nodeName: currentWorkflow?.name || 'Workflow',
+        timestamp: new Date().toISOString(),
+        executionTime: 0,
+        error: error.message || 'Unknown execution error',
+        response: `Error: ${error.message}`,
+        model: 'workflow'
+      };
+
+      setExecutionResult(errorResult);
+      setShowResult(true);
+    } finally {
+      setWorkflowExecuting(workflowId, false);
+    }
+  };
+
+  // Deploy workflow - runs continuously until cancelled
+  const handleDeploy = async () => {
+    if (!currentWorkflow) return;
+
+    // Check if there's at least one trigger node (workflow entry points)
+    // Trigger types: start, cronScheduler, webhookTrigger, whatsappReceive, workflowTrigger, chatTrigger
+    const triggerTypes = ['start', 'cronScheduler', 'webhookTrigger', 'whatsappReceive', 'workflowTrigger', 'chatTrigger'];
+    const hasTriggerNode = nodes.some(node => triggerTypes.includes(node.type || ''));
+    if (!hasTriggerNode) {
+      alert('No trigger node found in workflow.\n\nAdd a trigger node (Cron Scheduler, WhatsApp Receive, Webhook, Chat Trigger, etc.) to begin deployment.');
+      return;
+    }
+
+    try {
+      // Settings are already synced to backend via WebSocket from SettingsPanel
+      // Backend will use the stored settings
+
+      // DEBUG: Log edges being sent to deployment
+      console.log('[Dashboard] Deploying with edges:', {
+        edgeCount: edges.length,
+        edges: edges.map(e => ({
+          id: e.id,
+          source: e.source,
+          target: e.target,
+          sourceHandle: e.sourceHandle,
+          targetHandle: e.targetHandle
+        })),
+        // Check for toolkit connections specifically
+        toolkitEdges: edges.filter(e =>
+          e.target?.includes('androidTool') || e.source?.includes('androidTool')
+        )
+      });
+
+      const result = await deployWorkflow(currentWorkflow.id, nodes, edges, 'default');
+
+      if (!result.success) {
+        console.error('[Dashboard] Deployment failed:', result.error);
+        alert(`Failed to start deployment: ${result.error}`);
+      }
+    } catch (error: any) {
+      console.error('[Dashboard] Deployment error:', error);
+      alert(`Deployment error: ${error.message}`);
+    }
+  };
+
+  // Cancel running deployment for current workflow
+  const handleCancelDeployment = async () => {
+    try {
+      const workflowId = currentWorkflow?.id;
+      console.log('[Dashboard] Cancelling deployment for workflow:', workflowId);
+      const result = await cancelDeployment(workflowId);
+
+      if (result.success) {
+        console.log('[Dashboard] Deployment cancelled:', result);
+      } else {
+        console.error('[Dashboard] Failed to cancel deployment:', result.message);
+      }
+    } catch (error: any) {
+      console.error('[Dashboard] Cancel deployment error:', error);
+    }
+  };
+
+  const handleExportJSON = async () => {
+    try {
+      const jsonString = exportWorkflowToJSON();
+      await navigator.clipboard.writeText(jsonString);
+      alert('Workflow JSON copied to clipboard');
+    } catch (error) {
+      console.error('Export JSON error:', error);
+      alert('Failed to export workflow JSON');
+    }
+  };
+
+  const handleExportFile = () => {
+    try {
+      exportWorkflowToFile();
+    } catch (error) {
+      console.error('Export file error:', error);
+      alert('Failed to export workflow file');
+    }
+  };
+
+  const handleImportJSON = () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.json';
+    fileInput.onchange = async (e) => {
+      try {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+
+        const importedWorkflow = await importWorkflowFromFile(file);
+
+        const workflow = {
+          ...importedWorkflow,
+          id: generateWorkflowId(),
+          createdAt: new Date(),
+          lastModified: new Date()
+        };
+
+        console.log('Importing workflow:', workflow);
+
+        for (const node of workflow.nodes) {
+          if (node.data && Object.keys(node.data).length > 0) {
+            try {
+              await saveNodeParameters(node.id, node.data);
+              console.log(`Saved parameters for node ${node.id}:`, node.data);
+            } catch (error) {
+              console.error(`Failed to save parameters for node ${node.id}:`, error);
+            }
+          }
+        }
+
+        setCurrentWorkflow(workflow);
+
+        console.log('Workflow imported successfully');
+        alert(`Workflow "${workflow.name}" imported with ${workflow.nodes.length} nodes and ${workflow.edges.length} connections`);
+      } catch (error: any) {
+        console.error('Import error:', error);
+        alert(`Failed to import workflow: ${error.message}`);
+      }
+    };
+    fileInput.click();
+  };
+  // Load saved workflows on mount and create default workflow if needed
+  const hasMigrated = React.useRef(false);
+  useEffect(() => {
+    console.log('[Dashboard] Mount effect - loading workflows', {
+      hasCurrentWorkflow: !!currentWorkflow,
+      currentWorkflowId: currentWorkflow?.id,
+    });
+    loadSavedWorkflows();
+    if (!currentWorkflow) {
+      console.log('[Dashboard] No current workflow, creating new one');
+      createNewWorkflow();
+    } else if (!hasMigrated.current) {
+      console.log('[Dashboard] Migrating current workflow');
+      migrateCurrentWorkflow();
+      hasMigrated.current = true;
+    }
+  }, [loadSavedWorkflows, currentWorkflow, createNewWorkflow, migrateCurrentWorkflow]);
+
+  // Sync workflow state → ReactFlow state (when loading workflows or data changes)
+  // Note: Database is the source of truth for parameters - node.data should NOT store parameters
+  // Parameters are loaded from database when parameter panel opens (useParameterPanel hook)
+  // and when backend executes nodes (NodeExecutor._prepare_parameters)
+  useEffect(() => {
+    if (currentWorkflow && currentWorkflow.id) {
+      console.log('[Dashboard] Sync Store -> ReactFlow', {
+        workflowId: currentWorkflow.id,
+        storeEdgeCount: (currentWorkflow.edges || []).length,
+        storeEdges: (currentWorkflow.edges || []).map(e => ({ id: e.id, source: e.source, target: e.target })),
+        lastModified: currentWorkflow.lastModified
+      });
+      const workflowNodes = currentWorkflow.nodes || [];
+      setNodes(workflowNodes);
+      setEdges(currentWorkflow.edges || []);
+      // Do NOT sync database parameters to node.data
+      // Database is the single source of truth for parameters
+      // This prevents dual storage issues where node.data could diverge from database
+    }
+  }, [currentWorkflow?.id, currentWorkflow?.lastModified, setNodes, setEdges]);
+  
+  // Sync ReactFlow state → workflow state (debounced for performance)
+  useEffect(() => {
+    if (!currentWorkflow || !currentWorkflow.id) return;
+
+    const timeoutId = setTimeout(() => {
+      try {
+        const currentNodesStr = JSON.stringify(sanitizeNodesForComparison(nodes));
+        const currentEdgesStr = JSON.stringify(sanitizeEdgesForComparison(edges));
+        const workflowNodesStr = JSON.stringify(sanitizeNodesForComparison(currentWorkflow.nodes || []));
+        const workflowEdgesStr = JSON.stringify(sanitizeEdgesForComparison(currentWorkflow.edges || []));
+
+        if (currentNodesStr !== workflowNodesStr || currentEdgesStr !== workflowEdgesStr) {
+          console.log('[Dashboard] Syncing ReactFlow -> Store', {
+            reactFlowEdgeCount: edges.length,
+            storeEdgeCount: (currentWorkflow.edges || []).length,
+            newEdges: edges.filter(e => !(currentWorkflow.edges || []).find(we => we.id === e.id))
+          });
+          updateWorkflow({ nodes, edges });
+        }
+      } catch (error) {
+        console.warn('Failed to sync workflow state:', error);
+      }
+    }, theme.constants.debounceDelay.workflowUpdate);
+
+    return () => clearTimeout(timeoutId);
+  }, [nodes, edges, currentWorkflow?.id, updateWorkflow]);
+
+  // Track previous workflow ID for viewport save/restore (n8n pattern)
+  const prevWorkflowIdRef = React.useRef<string | null>(null);
+  // Track if we've already restored viewport for current workflow (prevent duplicate restores)
+  const viewportRestoredForRef = React.useRef<string | null>(null);
+
+  // Save viewport when switching workflows, restore after nodes load (n8n pattern)
+  useEffect(() => {
+    const currentId = currentWorkflow?.id;
+    const prevId = prevWorkflowIdRef.current;
+
+    // Save viewport of previous workflow before switching
+    if (prevId && prevId !== currentId) {
+      try {
+        const viewport = reactFlowInstance.getViewport();
+        setWorkflowViewport(prevId, viewport);
+      } catch {
+        // Failed to save viewport - ignore
+      }
+      // Reset the restored flag when switching to new workflow
+      viewportRestoredForRef.current = null;
+    }
+
+    prevWorkflowIdRef.current = currentId || null;
+  }, [currentWorkflow?.id, reactFlowInstance, setWorkflowViewport]);
+
+  // Restore viewport AFTER nodes are loaded and rendered
+  // Only restores saved viewport - never auto-centers
+  useEffect(() => {
+    const currentId = currentWorkflow?.id;
+    if (!currentId) return;
+
+    // Skip if we already restored viewport for this workflow
+    if (viewportRestoredForRef.current === currentId) {
+      return;
+    }
+
+    // Get saved viewport from store
+    const uiState = workflowUIStates[currentId];
+    const savedViewport = uiState?.viewport;
+
+    // Only restore if we have a saved viewport
+    if (!savedViewport) {
+      viewportRestoredForRef.current = currentId;
+      return;
+    }
+
+    // Use delay to ensure ReactFlow has finished rendering nodes
+    const timeoutId = setTimeout(() => {
+      try {
+        reactFlowInstance.setViewport(savedViewport, { duration: 0 });
+        viewportRestoredForRef.current = currentId;
+      } catch {
+        // Viewport restore failed - ignore silently
+      }
+    }, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [currentWorkflow?.id, nodes.length, workflowUIStates, reactFlowInstance]);
+
+  // Node context menu handler (right-click)
+  const onNodeContextMenu = React.useCallback(
+    (event: React.MouseEvent, node: Node) => {
+      event.preventDefault();
+      // Select the node when right-clicking
+      setSelectedNode(node);
+      setContextMenu({
+        nodeId: node.id,
+        x: event.clientX,
+        y: event.clientY,
+      });
+    },
+    [setSelectedNode]
+  );
+
+  // Close context menu
+  const closeContextMenu = React.useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  // Context menu actions
+  const handleContextMenuRename = React.useCallback(() => {
+    if (contextMenu) {
+      setRenamingNodeId(contextMenu.nodeId);
+    }
+    closeContextMenu();
+  }, [contextMenu, setRenamingNodeId, closeContextMenu]);
+
+  const handleContextMenuCopy = React.useCallback(() => {
+    if (contextMenu) {
+      // Select the node first, then copy
+      const node = nodes.find(n => n.id === contextMenu.nodeId);
+      if (node) {
+        setNodes(nds => nds.map(n => ({ ...n, selected: n.id === contextMenu.nodeId })));
+        // Small delay to ensure selection is applied before copy
+        setTimeout(() => copySelectedNodes(), 0);
+      }
+    }
+    closeContextMenu();
+  }, [contextMenu, nodes, setNodes, copySelectedNodes, closeContextMenu]);
+
+  const handleContextMenuDelete = React.useCallback(() => {
+    if (contextMenu) {
+      onNodesDelete([nodes.find(n => n.id === contextMenu.nodeId)].filter(Boolean) as Node[]);
+    }
+    closeContextMenu();
+  }, [contextMenu, nodes, onNodesDelete, closeContextMenu]);
+
+  // Keyboard shortcut handler for workflow operations
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Ignore shortcuts when typing in input/textarea
+      if (event.target instanceof HTMLInputElement ||
+          event.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      // Ignore shortcuts when renaming a node
+      if (renamingNodeId) {
+        return;
+      }
+
+      // F2 to rename selected node
+      if (event.key === 'F2' && selectedNode) {
+        event.preventDefault();
+        setRenamingNodeId(selectedNode.id);
+        return;
+      }
+
+      // Check for Ctrl/Cmd key shortcuts
+      if (event.ctrlKey || event.metaKey) {
+        switch (event.key.toLowerCase()) {
+          case 's':
+            event.preventDefault();
+            handleSave();
+            break;
+          case 'c':
+            event.preventDefault();
+            copySelectedNodes();
+            break;
+          case 'v':
+            event.preventDefault();
+            pasteNodes();
+            break;
+        }
+      } else {
+        // Non-modifier shortcuts
+        switch (event.key.toLowerCase()) {
+          case 'd':
+            // Toggle disable on selected nodes
+            event.preventDefault();
+            toggleDisableSelected();
+            break;
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleSave, copySelectedNodes, pasteNodes, toggleDisableSelected, selectedNode, renamingNodeId, setRenamingNodeId]);
+
+  return (
+    <>
+      <style>{getEdgeStyles(theme.colors, isDarkMode)}</style>
+      <div style={{
+        width: '100%',
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.colors.background,
+        fontFamily: 'system-ui, sans-serif',
+      }}>
+        {/* Top Toolbar */}
+        <TopToolbar
+          workflowName={currentWorkflow?.name || 'Untitled Workflow'}
+          onWorkflowNameChange={handleWorkflowNameChange}
+          onSave={handleSave}
+          onNew={handleNew}
+          onOpen={handleOpen}
+          onRun={handleRun}
+          isRunning={isExecuting}
+          onDeploy={handleDeploy}
+          onCancelDeployment={handleCancelDeployment}
+          isDeploying={isCurrentWorkflowDeployed}
+          hasUnsavedChanges={hasUnsavedChanges}
+          sidebarVisible={sidebarVisible}
+          onToggleSidebar={toggleSidebar}
+          componentPaletteVisible={componentPaletteVisible}
+          onToggleComponentPalette={toggleComponentPalette}
+          proMode={proMode}
+          onToggleProMode={toggleProMode}
+          onOpenSettings={() => setSettingsOpen(true)}
+          onOpenCredentials={() => setCredentialsOpen(true)}
+          onExportJSON={handleExportJSON}
+          onExportFile={handleExportFile}
+          onImportJSON={handleImportJSON}
+        />
+        
+        {/* Main Content Area */}
+        <div style={{
+          flex: 1,
+          display: 'flex',
+          overflow: 'hidden',
+        }}>
+          {/* Left Workflow Sidebar */}
+          <div style={{
+            width: sidebarVisible ? '280px' : '0px',
+            overflow: 'hidden',
+            transition: 'width 0.3s ease',
+            borderRight: sidebarVisible ? `1px solid ${theme.colors.border}` : 'none',
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
+            {sidebarVisible && (
+              <WorkflowSidebar
+                workflows={savedWorkflows}
+                currentWorkflowId={currentWorkflow?.id}
+                onSelectWorkflow={handleSelectWorkflow}
+                onDeleteWorkflow={deleteWorkflow}
+              />
+            )}
+          </div>
+          
+          {/* Canvas Area */}
+          <div style={{
+            flex: 1,
+            display: 'flex',
+            position: 'relative',
+          }}>
+            <div style={{
+              flex: 1,
+              backgroundColor: theme.colors.backgroundAlt,
+            }}>
+              <ErrorBoundary>
+                <ReactFlow
+                  nodes={styledNodes}
+                  edges={styledEdges}
+                  onNodesChange={onNodesChange}
+                  onEdgesChange={onEdgesChange}
+                  onNodesDelete={onNodesDelete}
+                  onEdgesDelete={onEdgesDelete}
+                  onConnect={onConnect}
+                  onDragOver={onDragOver}
+                  onDrop={onDrop}
+                  onNodeContextMenu={onNodeContextMenu}
+                  nodeTypes={nodeTypesRef.current}
+                  edgeTypes={edgeTypesRef.current}
+                  connectionMode={ConnectionMode.Loose}
+                  deleteKeyCode={isCurrentWorkflowLocked ? [] : ['Delete', 'Backspace']}
+                  edgesFocusable={!isCurrentWorkflowLocked}
+                  edgesUpdatable={!isCurrentWorkflowLocked}
+                  nodesDraggable={!isCurrentWorkflowLocked}
+                  nodesConnectable={!isCurrentWorkflowLocked}
+                  nodesFocusable={!isCurrentWorkflowLocked}
+                  elementsSelectable={!isCurrentWorkflowLocked}
+                  selectNodesOnDrag={false}
+                  selectionOnDrag={true}
+                  selectionMode={SelectionMode.Partial}
+                  selectionKeyCode="Control"
+                  panOnDrag={true}
+                  panOnScroll={false}
+                  zoomOnScroll={true}
+                  preventScrolling={true}
+                  proOptions={proOptions}
+                  defaultEdgeOptions={defaultEdgeOptions}
+                  connectionLineStyle={connectionLineStyle}
+                  connectionLineType={ConnectionLineType.SmoothStep}
+                  snapToGrid={true}
+                  snapGrid={snapGrid}
+                  style={reactFlowStyle}
+                >
+                  <Controls />
+                </ReactFlow>
+              </ErrorBoundary>
+            </div>
+            
+            {/* Right Component Palette */}
+            <div style={{
+              width: componentPaletteVisible ? theme.layout.sidebarWidth : '0px',
+              overflow: 'hidden',
+              transition: 'width 0.3s ease',
+              borderLeft: componentPaletteVisible ? `1px solid ${theme.colors.border}` : 'none',
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+              {componentPaletteVisible && (
+                <ComponentPalette
+                  nodeDefinitions={nodeDefinitions}
+                  searchQuery={searchQuery}
+                  onSearchChange={setSearchQuery}
+                  collapsedSections={collapsedSections}
+                  onToggleSection={toggleSection}
+                  onDragStart={handleComponentDragStart}
+                  proMode={proMode}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Console Panel - n8n-style debug output at bottom */}
+        <ConsolePanel
+          isOpen={consolePanelOpen}
+          onToggle={() => setConsolePanelOpen(prev => !prev)}
+          nodes={nodes}
+        />
+
+        {/* Parameter Panels */}
+        <ErrorBoundary>
+          <ParameterPanel />
+          <LocationParameterPanel />
+        </ErrorBoundary>
+        
+        {/* AI Result Modal */}
+        <AIResultModal
+          isOpen={showResult}
+          onClose={() => setShowResult(false)}
+          result={executionResult}
+        />
+
+        {/* Settings Panel Modal */}
+        <SettingsPanel
+          isOpen={settingsOpen}
+          onClose={() => setSettingsOpen(false)}
+          settings={settings}
+          onSettingsChange={setSettings}
+        />
+
+        {/* WhatsApp Settings Panel Modal */}
+        <WhatsAppSettingsPanel
+          isOpen={whatsappSettingsOpen}
+          onClose={() => setWhatsAppSettingsOpen(false)}
+        />
+
+        {/* Android Settings Panel Modal */}
+        <AndroidSettingsPanel
+          isOpen={androidSettingsOpen}
+          onClose={() => setAndroidSettingsOpen(false)}
+        />
+
+        {/* Credentials Modal */}
+        <CredentialsModal
+          visible={credentialsOpen}
+          onClose={() => setCredentialsOpen(false)}
+        />
+
+        {/* Node Context Menu (right-click) */}
+        {contextMenu && (
+          <NodeContextMenu
+            nodeId={contextMenu.nodeId}
+            x={contextMenu.x}
+            y={contextMenu.y}
+            onClose={closeContextMenu}
+            onRename={handleContextMenuRename}
+            onCopy={handleContextMenuCopy}
+            onDelete={handleContextMenuDelete}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+// Outer wrapper component that provides ReactFlowProvider context
+const Dashboard: React.FC = () => {
+  return (
+    <ReactFlowProvider>
+      <DashboardContent />
+    </ReactFlowProvider>
+  );
+};
+
+export default Dashboard;