machinaos 0.0.1

package/client/src/hooks/useExecution.ts

@@ -0,0 +1,313 @@
+/**
+ * useExecution Hook - WebSocket-based node execution
+ *
+ * Provides node execution functionality via WebSocket instead of REST API.
+ * This replaces the REST-based ExecutionService for real-time execution.
+ */
+
+import { useCallback, useState } from 'react';
+import { Node, Edge } from 'reactflow';
+import { useWebSocket } from '../contexts/WebSocketContext';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { INodeExecutionData } from '../types/INodeProperties';
+
+// Execution result interface (compatible with ExecutionService)
+export interface ExecutionResult {
+  success: boolean;
+  nodeId: string;
+  nodeType: string;
+  nodeName: string;
+  timestamp: string;
+  executionTime: number;
+  outputs?: Record<string, any>;
+  error?: string;
+  data?: any;
+  nodeData: INodeExecutionData[][];
+}
+
+export interface UseExecutionResult {
+  // Execute a node via WebSocket
+  executeNode: (
+    nodeId: string,
+    nodeType: string,
+    nodes?: Node[],
+    edges?: Edge[]
+  ) => Promise<ExecutionResult>;
+
+  // Execute AI node via WebSocket
+  executeAiNode: (
+    nodeId: string,
+    nodeType: string,
+    parameters: Record<string, any>,
+    model: string
+  ) => Promise<ExecutionResult>;
+
+  // Execution state
+  isExecuting: boolean;
+  executingNodeId: string | null;
+  lastError: string | null;
+
+  // Connection status
+  isConnected: boolean;
+}
+
+export const useExecution = (): UseExecutionResult => {
+  const {
+    executeNode: wsExecuteNode,
+    executeAiNode: wsExecuteAiNode,
+    getNodeParameters,
+    isConnected
+  } = useWebSocket();
+
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [executingNodeId, setExecutingNodeId] = useState<string | null>(null);
+  const [lastError, setLastError] = useState<string | null>(null);
+
+  /**
+   * Execute a workflow node via WebSocket
+   */
+  const executeNode = useCallback(async (
+    nodeId: string,
+    nodeType: string,
+    nodes?: Node[],
+    edges?: Edge[]
+  ): Promise<ExecutionResult> => {
+    const startTime = Date.now();
+
+    try {
+      console.log(`[WebSocket Execution] Starting: ${nodeId} (type: ${nodeType})`);
+
+      setIsExecuting(true);
+      setExecutingNodeId(nodeId);
+      setLastError(null);
+
+      // Load parameters from WebSocket/backend
+      const paramsResult = await getNodeParameters(nodeId);
+      const parameters = paramsResult?.parameters || {};
+
+      console.log(`[WebSocket Execution] Parameters for ${nodeId}:`, parameters);
+
+      // Prepare nodes and edges for execution
+      const nodeData = nodes?.map(node => ({
+        id: node.id,
+        type: node.type || '',
+        data: node.data || {}
+      })) || [];
+
+      const edgeData = edges?.map(edge => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: edge.sourceHandle || undefined,
+        targetHandle: edge.targetHandle || undefined
+      })) || [];
+
+      // Execute via WebSocket
+      const result = await wsExecuteNode(nodeId, nodeType, parameters, nodeData, edgeData);
+
+      console.log(`[WebSocket Execution] Result:`, result);
+
+      const executionTime = Date.now() - startTime;
+
+      if (result.success) {
+        // Extract output data
+        const outputData = result.result || {
+          nodeId,
+          success: true,
+          message: 'Execution completed successfully',
+          timestamp: result.timestamp || new Date().toISOString()
+        };
+
+        const nodeExecutionData: INodeExecutionData[][] = [[{
+          json: outputData
+        }]];
+
+        return {
+          success: true,
+          nodeId,
+          nodeType,
+          nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+          timestamp: result.timestamp || new Date().toISOString(),
+          executionTime: result.execution_time || executionTime,
+          outputs: outputData,
+          data: outputData,
+          nodeData: nodeExecutionData
+        };
+      } else {
+        // Handle error
+        const errorOutputData = result.result || {
+          error: result.error,
+          nodeId,
+          success: false,
+          timestamp: result.timestamp || new Date().toISOString()
+        };
+
+        const errorData: INodeExecutionData[][] = [[{
+          json: errorOutputData
+        }]];
+
+        setLastError(result.error || 'Execution failed');
+
+        return {
+          success: false,
+          nodeId,
+          nodeType,
+          nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+          timestamp: result.timestamp || new Date().toISOString(),
+          executionTime: result.execution_time || executionTime,
+          error: result.error,
+          outputs: errorOutputData,
+          data: errorOutputData,
+          nodeData: errorData
+        };
+      }
+
+    } catch (error: any) {
+      console.error(`[WebSocket Execution] Failed for node ${nodeId}:`, error);
+
+      const errorMessage = error.message || 'WebSocket execution failed';
+      setLastError(errorMessage);
+
+      const catchErrorData = {
+        error: errorMessage,
+        nodeId,
+        success: false,
+        timestamp: new Date().toISOString()
+      };
+
+      return {
+        success: false,
+        nodeId,
+        nodeType,
+        nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+        timestamp: new Date().toISOString(),
+        executionTime: Date.now() - startTime,
+        error: errorMessage,
+        outputs: catchErrorData,
+        data: catchErrorData,
+        nodeData: [[{ json: catchErrorData }]]
+      };
+
+    } finally {
+      setIsExecuting(false);
+      setExecutingNodeId(null);
+    }
+  }, [wsExecuteNode, getNodeParameters]);
+
+  /**
+   * Execute an AI node via WebSocket
+   */
+  const executeAiNode = useCallback(async (
+    nodeId: string,
+    nodeType: string,
+    parameters: Record<string, any>,
+    model: string
+  ): Promise<ExecutionResult> => {
+    const startTime = Date.now();
+
+    try {
+      console.log(`[WebSocket AI Execution] Starting: ${nodeId} (type: ${nodeType})`);
+
+      setIsExecuting(true);
+      setExecutingNodeId(nodeId);
+      setLastError(null);
+
+      // Execute AI node via WebSocket
+      const result = await wsExecuteAiNode(nodeId, nodeType, parameters, model);
+
+      console.log(`[WebSocket AI Execution] Result:`, result);
+
+      const executionTime = Date.now() - startTime;
+
+      if (result.success) {
+        const outputData = result.result || {
+          nodeId,
+          success: true,
+          message: 'AI execution completed successfully',
+          timestamp: result.timestamp || new Date().toISOString()
+        };
+
+        const nodeExecutionData: INodeExecutionData[][] = [[{
+          json: outputData
+        }]];
+
+        return {
+          success: true,
+          nodeId,
+          nodeType,
+          nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+          timestamp: result.timestamp || new Date().toISOString(),
+          executionTime: result.execution_time || executionTime,
+          outputs: outputData,
+          data: outputData,
+          nodeData: nodeExecutionData
+        };
+      } else {
+        const errorOutputData = result.result || {
+          error: result.error,
+          nodeId,
+          success: false,
+          timestamp: result.timestamp || new Date().toISOString()
+        };
+
+        const errorData: INodeExecutionData[][] = [[{
+          json: errorOutputData
+        }]];
+
+        setLastError(result.error || 'AI execution failed');
+
+        return {
+          success: false,
+          nodeId,
+          nodeType,
+          nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+          timestamp: result.timestamp || new Date().toISOString(),
+          executionTime: result.execution_time || executionTime,
+          error: result.error,
+          outputs: errorOutputData,
+          data: errorOutputData,
+          nodeData: errorData
+        };
+      }
+
+    } catch (error: any) {
+      console.error(`[WebSocket AI Execution] Failed for node ${nodeId}:`, error);
+
+      const errorMessage = error.message || 'WebSocket AI execution failed';
+      setLastError(errorMessage);
+
+      const catchErrorData = {
+        error: errorMessage,
+        nodeId,
+        success: false,
+        timestamp: new Date().toISOString()
+      };
+
+      return {
+        success: false,
+        nodeId,
+        nodeType,
+        nodeName: nodeDefinitions[nodeType]?.displayName || nodeType,
+        timestamp: new Date().toISOString(),
+        executionTime: Date.now() - startTime,
+        error: errorMessage,
+        outputs: catchErrorData,
+        data: catchErrorData,
+        nodeData: [[{ json: catchErrorData }]]
+      };
+
+    } finally {
+      setIsExecuting(false);
+      setExecutingNodeId(null);
+    }
+  }, [wsExecuteAiNode]);
+
+  return {
+    executeNode,
+    executeAiNode,
+    isExecuting,
+    executingNodeId,
+    lastError,
+    isConnected
+  };
+};

package/client/src/hooks/useParameterPanel.ts

@@ -0,0 +1,176 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { useWebSocket } from '../contexts/WebSocketContext';
+import { SKILL_NODE_TYPES } from '../nodeDefinitions/skillNodes';
+
+export const useParameterPanel = () => {
+  const { selectedNode, setSelectedNode, updateNodeData } = useAppStore();
+  const [parameters, setParameters] = useState<any>({});
+  const [originalParameters, setOriginalParameters] = useState<any>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Use WebSocket for parameter operations
+  const { getNodeParameters, saveNodeParameters, sendRequest, isConnected } = useWebSocket();
+
+  // Use stable references to prevent multiple effect runs
+  const nodeId = selectedNode?.id;
+  const nodeType = selectedNode?.type;
+
+  useEffect(() => {
+    if (!nodeType || !nodeId) {
+      setParameters({});
+      setOriginalParameters({});
+      setError(null);
+      return;
+    }
+
+    const loadParameters = async () => {
+      const nodeDefinition = nodeDefinitions[nodeType];
+      if (!nodeDefinition) return;
+
+      const defaults: any = {};
+
+      // Set parameter defaults
+      if (nodeDefinition.properties) {
+        nodeDefinition.properties.forEach((param: any) => {
+          defaults[param.name] = param.default !== undefined ? param.default : null;
+        });
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Load saved parameters via WebSocket
+        const result = await getNodeParameters(nodeId);
+        // Extract parameters from NodeParameters response
+        const savedParams = result?.parameters || {};
+        let initialParams = { ...defaults, ...savedParams };
+
+        console.log('[useParameterPanel] Loading params for node:', nodeId, nodeType);
+        console.log('[useParameterPanel] Defaults:', defaults);
+        console.log('[useParameterPanel] Saved from backend:', savedParams);
+
+        // For skill nodes, load skill content (instructions) from SKILL.md files
+        if (SKILL_NODE_TYPES.includes(nodeType) && nodeType !== 'customSkill') {
+          const skillName = initialParams.skillName;
+          if (skillName) {
+            try {
+              console.log('[useParameterPanel] Loading skill content for:', skillName);
+              const skillResult = await sendRequest('get_skill_content', { skill_name: skillName });
+              if (skillResult?.success && skillResult?.instructions) {
+                initialParams = {
+                  ...initialParams,
+                  instructions: skillResult.instructions
+                };
+                console.log('[useParameterPanel] Loaded skill instructions:', skillResult.instructions.substring(0, 100) + '...');
+              }
+            } catch (skillErr) {
+              console.error('[useParameterPanel] Failed to load skill content:', skillErr);
+            }
+          }
+        }
+
+        console.log('[useParameterPanel] Merged initial:', initialParams);
+
+        setParameters(initialParams);
+        setOriginalParameters(initialParams);
+      } catch (err) {
+        console.error('Failed to load parameters via WebSocket:', err);
+        // Use defaults if WebSocket fails
+        setParameters(defaults);
+        setOriginalParameters(defaults);
+        setError('Failed to load saved parameters');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadParameters();
+  }, [nodeId, nodeType, getNodeParameters, sendRequest]);
+
+  const hasUnsavedChanges = useMemo(() => {
+    return JSON.stringify(parameters) !== JSON.stringify(originalParameters);
+  }, [parameters, originalParameters]);
+
+  const handleParameterChange = useCallback((paramName: string, value: any) => {
+    setParameters((prevParams: any) => ({
+      ...prevParams,
+      [paramName]: value
+    }));
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (selectedNode) {
+      setIsSaving(true);
+      setError(null);
+
+      try {
+        // Save parameters to database via WebSocket
+        const success = await saveNodeParameters(selectedNode.id, parameters);
+
+        if (success) {
+          // For skill nodes, also save skill content (instructions) to SKILL.md files
+          if (selectedNode.type && SKILL_NODE_TYPES.includes(selectedNode.type) && selectedNode.type !== 'customSkill') {
+            const skillName = parameters.skillName;
+            const instructions = parameters.instructions;
+            if (skillName && instructions !== undefined) {
+              try {
+                console.log('[useParameterPanel] Saving skill content for:', skillName);
+                const skillResult = await sendRequest('save_skill_content', {
+                  skill_name: skillName,
+                  instructions: instructions
+                });
+                if (!skillResult?.success) {
+                  console.error('[useParameterPanel] Failed to save skill content:', skillResult?.error);
+                  setError(skillResult?.error || 'Failed to save skill content');
+                } else {
+                  console.log('[useParameterPanel] Skill content saved successfully');
+                }
+              } catch (skillErr) {
+                console.error('[useParameterPanel] Failed to save skill content:', skillErr);
+                setError('Failed to save skill content');
+              }
+            }
+          }
+
+          // Also update the node data in store for faster loading
+          updateNodeData(selectedNode.id, parameters);
+          setOriginalParameters({ ...parameters });
+        } else {
+          setError('Failed to save parameters');
+        }
+      } catch (err) {
+        console.error('Failed to save parameters via WebSocket:', err);
+        setError('Failed to save parameters');
+      } finally {
+        setIsSaving(false);
+      }
+    }
+  }, [selectedNode, parameters, updateNodeData, saveNodeParameters, sendRequest]);
+
+  const handleCancel = useCallback(() => {
+    setParameters({ ...originalParameters });
+    setSelectedNode(null);
+  }, [originalParameters, setSelectedNode]);
+
+  const nodeDefinition = selectedNode?.type ? nodeDefinitions[selectedNode.type] : null;
+
+  return {
+    selectedNode,
+    nodeDefinition,
+    parameters,
+    hasUnsavedChanges,
+    handleParameterChange,
+    handleSave,
+    handleCancel,
+    // New state for loading/saving status
+    isLoading,
+    isSaving,
+    error,
+    isConnected,
+  };
+};

package/client/src/hooks/useReactFlowNodes.ts

@@ -0,0 +1,189 @@
+import { useCallback } from 'react';
+import { Node, Edge, addEdge, Connection } from 'reactflow';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { INodeInputDefinition, INodeOutputDefinition, NodeConnectionType } from '../types/INodeProperties';
+
+interface UseReactFlowNodesProps {
+  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
+  setEdges: (edges: Edge[] | ((edges: Edge[]) => Edge[])) => void;
+}
+
+export const useReactFlowNodes = ({ setNodes, setEdges }: UseReactFlowNodesProps) => {
+  const { selectedNode, setSelectedNode } = useAppStore();
+
+  // Helper function to get node inputs/outputs for both enhanced and legacy nodes
+  const getNodeInputs = (nodeType: string): INodeInputDefinition[] => {
+    const definition = nodeDefinitions[nodeType];
+    if (!definition?.inputs) return [];
+    
+    // Enhanced nodes: array of input objects
+    if (definition.inputs.length > 0 && typeof definition.inputs[0] === 'object') {
+      return definition.inputs as INodeInputDefinition[];
+    }
+    
+    // Legacy nodes: array of strings - convert to input objects
+    return (definition.inputs as string[]).map((input, index) => ({
+      name: `input_${index}`,
+      displayName: 'Input',
+      type: (input as NodeConnectionType) || 'main',
+      description: 'Node input connection'
+    }));
+  };
+  
+  const getNodeOutputs = (nodeType: string): INodeOutputDefinition[] => {
+    const definition = nodeDefinitions[nodeType];
+    if (!definition?.outputs) return [];
+    
+    // Enhanced nodes: array of output objects
+    if (definition.outputs.length > 0 && typeof definition.outputs[0] === 'object') {
+      return definition.outputs as INodeOutputDefinition[];
+    }
+    
+    // Legacy nodes: array of strings - convert to output objects
+    return (definition.outputs as string[]).map((output, index) => ({
+      name: `output_${index}`,
+      displayName: 'Output',
+      type: (output as NodeConnectionType) || 'main',
+      description: 'Node output connection'
+    }));
+  };
+
+  // Validate connection compatibility
+  const isValidConnection = (connection: Connection, nodes: Node[]): boolean => {
+    const sourceNode = nodes.find(n => n.id === connection.source);
+    const targetNode = nodes.find(n => n.id === connection.target);
+    
+    if (!sourceNode || !targetNode) {
+      console.warn('Connection validation: Source or target node not found');
+      return false;
+    }
+
+    const sourceOutputs = getNodeOutputs(sourceNode.type || '');
+    const targetInputs = getNodeInputs(targetNode.type || '');
+
+    // Find the specific output and input being connected
+    const sourceHandle = connection.sourceHandle || 'output_0';
+    const targetHandle = connection.targetHandle || 'input_0';
+
+    const sourceOutput = sourceOutputs.find(output =>
+      `output-${output.name}` === sourceHandle || output.name === sourceHandle
+    );
+    const targetInput = targetInputs.find(input =>
+      `input-${input.name}` === targetHandle || input.name === targetHandle
+    );
+
+    if (!sourceOutput || !targetInput) {
+      console.log('[Connection Debug]', {
+        sourceType: sourceNode.type,
+        targetType: targetNode.type,
+        sourceHandle,
+        targetHandle,
+        sourceOutputs: sourceOutputs.map(o => ({ name: o.name, computed: `output-${o.name}` })),
+        targetInputs: targetInputs.map(i => ({ name: i.name, computed: `input-${i.name}` })),
+        sourceOutput: sourceOutput ? 'found' : 'NOT FOUND',
+        targetInput: targetInput ? 'found' : 'NOT FOUND'
+      });
+      console.warn('Connection validation: Handle not found', { sourceHandle, targetHandle });
+      // Allow connection if we can't find handle definitions (fallback for legacy nodes)
+      return true;
+    }
+
+    // Check type compatibility
+    const isCompatible = areTypesCompatible(sourceOutput.type, targetInput.type);
+    
+    if (!isCompatible) {
+      console.warn(`Connection rejected: Incompatible types`, {
+        source: `${sourceNode.type}.${sourceOutput.name} (${sourceOutput.type})`,
+        target: `${targetNode.type}.${targetInput.name} (${targetInput.type})`
+      });
+    }
+    
+    return isCompatible;
+  };
+
+  // Check if two connection types are compatible
+  const areTypesCompatible = (outputType: NodeConnectionType, inputType: NodeConnectionType): boolean => {
+    // Same types are always compatible
+    if (outputType === inputType) return true;
+    
+    // 'main' is compatible with most types (universal data format)
+    if (outputType === 'main' || inputType === 'main') return true;
+    
+    // Specific compatibility rules
+    const compatibilityMatrix: Record<NodeConnectionType, NodeConnectionType[]> = {
+      'main': ['main', 'trigger', 'ai', 'file', 'binary', 'webhook'], // Main accepts everything
+      'trigger': ['main', 'trigger'], // Triggers only connect to main or other triggers
+      'ai': ['main', 'ai'], // AI outputs connect to main or other AI inputs
+      'file': ['main', 'file', 'binary'], // Files can connect to binary
+      'binary': ['main', 'file', 'binary'], // Binary connects to file/binary
+      'webhook': ['main', 'webhook'] // Webhooks connect to main or other webhooks
+    };
+    
+    return compatibilityMatrix[outputType]?.includes(inputType) ?? false;
+  };
+
+  const onConnect = useCallback(
+    (params: Edge | Connection) => {
+      const { currentWorkflow } = useAppStore.getState();
+      const nodes = currentWorkflow?.nodes || [];
+
+      // Convert Edge to Connection format for validation
+      const connection: Connection = {
+        source: params.source,
+        target: params.target,
+        sourceHandle: params.sourceHandle ?? null,
+        targetHandle: params.targetHandle ?? null
+      };
+
+      // Debug: Log all connection attempts
+      console.log('[onConnect] Connection attempt:', {
+        source: params.source,
+        target: params.target,
+        sourceHandle: params.sourceHandle,
+        targetHandle: params.targetHandle
+      });
+
+      // Validate connection before adding
+      if (!isValidConnection(connection, nodes)) {
+        // Show user feedback for rejected connection (non-blocking)
+        console.warn('Connection rejected: Incompatible connection types', connection);
+        // Could implement a toast notification system here instead of alert
+        setTimeout(() => {
+          alert('Connection not allowed: Incompatible connection types.\n\nTip: Connect outputs to compatible inputs (e.g., AI → Main, File → Binary).');
+        }, 0);
+        return;
+      }
+
+      console.log('[onConnect] Connection accepted, adding edge');
+      // Add the connection
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onNodesDelete = useCallback(
+    (deleted: Node[]) => {
+      setNodes((nds) => nds.filter((node) => !deleted.find((d) => d.id === node.id)));
+      
+      // Clear selected node if it was deleted
+      if (selectedNode && deleted.find((d) => d.id === selectedNode.id)) {
+        setSelectedNode(null);
+      }
+    },
+    [setNodes, selectedNode, setSelectedNode]
+  );
+
+  const onEdgesDelete = useCallback(
+    (deleted: Edge[]) => {
+      setEdges((eds) => eds.filter((edge) => !deleted.find((d) => d.id === edge.id)));
+    },
+    [setEdges]
+  );
+
+  return {
+    onConnect,
+    onNodesDelete,
+    onEdgesDelete,
+  };
+};