machinaos 0.0.1

package/client/src/hooks/useApiKeys.ts

@@ -0,0 +1,238 @@
+/**
+ * useApiKeys Hook - WebSocket-based API key management
+ *
+ * Provides API key validation, storage, and retrieval via WebSocket.
+ * This replaces the REST-based ApiKeyManagerService for real-time operations.
+ */
+
+import { useCallback, useState } from 'react';
+import { useWebSocket } from '../contexts/WebSocketContext';
+
+export interface ApiKeyValidationResult {
+  isValid: boolean;
+  error?: string;
+  models?: string[];
+}
+
+export interface UseApiKeysResult {
+  // Validate and store API key
+  validateApiKey: (provider: string, apiKey: string) => Promise<ApiKeyValidationResult>;
+
+  // Save API key without validation
+  saveApiKey: (provider: string, apiKey: string) => Promise<ApiKeyValidationResult>;
+
+  // Get stored API key
+  getStoredApiKey: (provider: string) => Promise<string | null>;
+
+  // Check if API key exists
+  hasStoredKey: (provider: string) => Promise<boolean>;
+
+  // Get stored models for a provider
+  getStoredModels: (provider: string) => Promise<string[] | null>;
+
+  // Remove stored API key
+  removeApiKey: (provider: string) => Promise<void>;
+
+  // Validate Google Maps API key
+  validateGoogleMapsKey: (apiKey: string) => Promise<ApiKeyValidationResult>;
+
+  // Get AI models for a provider
+  getAiModels: (provider: string, apiKey: string) => Promise<string[]>;
+
+  // State
+  isValidating: boolean;
+  validationError: string | null;
+  isConnected: boolean;
+}
+
+export const useApiKeys = (): UseApiKeysResult => {
+  const {
+    validateApiKey: wsValidateApiKey,
+    getStoredApiKey: wsGetStoredApiKey,
+    saveApiKey: wsSaveApiKey,
+    deleteApiKey: wsDeleteApiKey,
+    validateMapsKey: wsValidateMapsKey,
+    getAiModels: wsGetAiModels,
+    isConnected
+  } = useWebSocket();
+
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  /**
+   * Validate API key and store if valid
+   */
+  const validateApiKey = useCallback(async (
+    provider: string,
+    apiKey: string
+  ): Promise<ApiKeyValidationResult> => {
+    setIsValidating(true);
+    setValidationError(null);
+
+    try {
+      const result = await wsValidateApiKey(provider, apiKey);
+
+      if (!result.valid) {
+        setValidationError(result.message || 'Validation failed');
+      }
+
+      return {
+        isValid: result.valid,
+        error: result.message,
+        models: result.models
+      };
+    } catch (error: any) {
+      const errorMsg = error.message || 'Validation failed';
+      setValidationError(errorMsg);
+      return {
+        isValid: false,
+        error: errorMsg
+      };
+    } finally {
+      setIsValidating(false);
+    }
+  }, [wsValidateApiKey]);
+
+  /**
+   * Save API key without validation (for keys that can't be validated beforehand)
+   */
+  const saveApiKey = useCallback(async (
+    provider: string,
+    apiKey: string
+  ): Promise<ApiKeyValidationResult> => {
+    try {
+      const success = await wsSaveApiKey(provider, apiKey);
+      return {
+        isValid: success,
+        error: success ? undefined : 'Failed to save API key'
+      };
+    } catch (error: any) {
+      return {
+        isValid: false,
+        error: error.message || 'Failed to save API key'
+      };
+    }
+  }, [wsSaveApiKey]);
+
+  /**
+   * Get stored API key for a provider
+   */
+  const getStoredApiKey = useCallback(async (
+    provider: string
+  ): Promise<string | null> => {
+    try {
+      const result = await wsGetStoredApiKey(provider);
+      return result.hasKey ? (result.apiKey || null) : null;
+    } catch (error) {
+      console.warn(`Error retrieving API key for ${provider}:`, error);
+      return null;
+    }
+  }, [wsGetStoredApiKey]);
+
+  /**
+   * Check if a stored key exists for a provider
+   */
+  const hasStoredKey = useCallback(async (
+    provider: string
+  ): Promise<boolean> => {
+    try {
+      const result = await wsGetStoredApiKey(provider);
+      return result.hasKey;
+    } catch (error) {
+      return false;
+    }
+  }, [wsGetStoredApiKey]);
+
+  /**
+   * Get stored models for a provider
+   */
+  const getStoredModels = useCallback(async (
+    provider: string
+  ): Promise<string[] | null> => {
+    try {
+      // Get models directly from stored API key response (includes models from DB)
+      const result = await wsGetStoredApiKey(provider);
+      if (result.hasKey && result.models && result.models.length > 0) {
+        return result.models;
+      }
+      return null;
+    } catch (error) {
+      console.warn(`Error retrieving models for ${provider}:`, error);
+      return null;
+    }
+  }, [wsGetStoredApiKey]);
+
+  /**
+   * Remove stored API key
+   */
+  const removeApiKey = useCallback(async (
+    provider: string
+  ): Promise<void> => {
+    try {
+      await wsDeleteApiKey(provider);
+    } catch (error) {
+      console.warn(`Error removing API key for ${provider}:`, error);
+    }
+  }, [wsDeleteApiKey]);
+
+  /**
+   * Validate Google Maps API key
+   */
+  const validateGoogleMapsKey = useCallback(async (
+    apiKey: string
+  ): Promise<ApiKeyValidationResult> => {
+    setIsValidating(true);
+    setValidationError(null);
+
+    try {
+      const result = await wsValidateMapsKey(apiKey);
+
+      if (!result.valid) {
+        setValidationError(result.message || 'Validation failed');
+      }
+
+      return {
+        isValid: result.valid,
+        error: result.message
+      };
+    } catch (error: any) {
+      const errorMsg = error.message || 'Validation failed';
+      setValidationError(errorMsg);
+      return {
+        isValid: false,
+        error: errorMsg
+      };
+    } finally {
+      setIsValidating(false);
+    }
+  }, [wsValidateMapsKey]);
+
+  /**
+   * Get available AI models for a provider
+   */
+  const getAiModels = useCallback(async (
+    provider: string,
+    apiKey: string
+  ): Promise<string[]> => {
+    try {
+      return await wsGetAiModels(provider, apiKey);
+    } catch (error) {
+      console.warn(`Error fetching AI models for ${provider}:`, error);
+      return [];
+    }
+  }, [wsGetAiModels]);
+
+  return {
+    validateApiKey,
+    saveApiKey,
+    getStoredApiKey,
+    hasStoredKey,
+    getStoredModels,
+    removeApiKey,
+    validateGoogleMapsKey,
+    getAiModels,
+    isValidating,
+    validationError,
+    isConnected
+  };
+};

package/client/src/hooks/useAppTheme.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { theme as baseTheme, lightColors, darkColors } from '../styles/theme';
+
+export const useAppTheme = () => {
+  const { isDarkMode } = useTheme();
+
+  const dynamicTheme = useMemo(() => {
+    return {
+      ...baseTheme,
+      colors: isDarkMode ? darkColors : lightColors,
+      isDarkMode,
+    };
+  }, [isDarkMode]);
+
+  return dynamicTheme;
+};

package/client/src/hooks/useComponentPalette.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback, useEffect } from 'react';
+import { nodeDefinitions } from '../nodeDefinitions';
+
+const STORAGE_KEY = 'component_palette_collapsed_sections';
+
+export const useComponentPalette = () => {
+  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>(() => {
+    // Try to load from localStorage first
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        return JSON.parse(saved);
+      }
+    } catch {
+      // Ignore parsing errors
+    }
+
+    // Default: all sections collapsed
+    const initialCollapsed: Record<string, boolean> = {};
+    const categories = new Set(Object.values(nodeDefinitions).flatMap(def => def.group || []));
+    categories.forEach(category => {
+      initialCollapsed[category] = true;
+    });
+    return initialCollapsed;
+  });
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  // Persist collapsed sections to localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedSections));
+    } catch {
+      // Ignore storage errors
+    }
+  }, [collapsedSections]);
+
+  const toggleSection = useCallback((sectionId: string) => {
+    setCollapsedSections(prev => ({
+      ...prev,
+      [sectionId]: !prev[sectionId]
+    }));
+  }, []);
+
+  return {
+    collapsedSections,
+    searchQuery,
+    setSearchQuery,
+    toggleSection,
+  };
+};

package/client/src/hooks/useCopyPaste.ts

@@ -0,0 +1,155 @@
+import { useCallback, useRef } from 'react';
+import { Node, Edge } from 'reactflow';
+import { generateUniqueLabel } from './useDragAndDrop';
+import { nodeDefinitions } from '../nodeDefinitions';
+
+interface UseCopyPasteProps {
+  nodes: Node[];
+  edges: Edge[];
+  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
+  setEdges: (edges: Edge[] | ((edges: Edge[]) => Edge[])) => void;
+  saveNodeParameters?: (nodeId: string, parameters: Record<string, any>) => Promise<boolean>;
+}
+
+interface ClipboardData {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+/**
+ * Hook for copy/paste functionality with n8n-style auto-labeling.
+ *
+ * Features:
+ * - Copy selected nodes and their connecting edges
+ * - Paste with offset position and unique labels
+ * - Persist node parameters to database
+ */
+export const useCopyPaste = ({
+  nodes,
+  edges,
+  setNodes,
+  setEdges,
+  saveNodeParameters
+}: UseCopyPasteProps) => {
+  // In-memory clipboard (simpler than browser clipboard API)
+  const clipboardRef = useRef<ClipboardData | null>(null);
+
+  /**
+   * Copy selected nodes and their connecting edges to clipboard.
+   */
+  const copySelectedNodes = useCallback(() => {
+    const selectedNodes = nodes.filter(n => n.selected);
+    if (selectedNodes.length === 0) {
+      console.log('[CopyPaste] No nodes selected to copy');
+      return;
+    }
+
+    // Get edges that connect selected nodes (both ends must be selected)
+    const selectedNodeIds = new Set(selectedNodes.map(n => n.id));
+    const selectedEdges = edges.filter(
+      e => selectedNodeIds.has(e.source) && selectedNodeIds.has(e.target)
+    );
+
+    clipboardRef.current = {
+      nodes: selectedNodes,
+      edges: selectedEdges,
+    };
+
+    console.log(`[CopyPaste] Copied ${selectedNodes.length} nodes and ${selectedEdges.length} edges`);
+  }, [nodes, edges]);
+
+  /**
+   * Paste nodes from clipboard with offset and unique labels.
+   */
+  const pasteNodes = useCallback(async () => {
+    if (!clipboardRef.current) {
+      console.log('[CopyPaste] Nothing in clipboard to paste');
+      return;
+    }
+
+    const { nodes: copiedNodes, edges: copiedEdges } = clipboardRef.current;
+
+    // Generate ID mapping (old ID -> new ID)
+    const idMap = new Map<string, string>();
+    const now = Date.now();
+
+    copiedNodes.forEach((node, index) => {
+      // Use timestamp + index to ensure unique IDs
+      idMap.set(node.id, `${node.type}-${now + index}`);
+    });
+
+    // Offset for pasted nodes to avoid stacking on original
+    const PASTE_OFFSET = 50;
+
+    // Create new nodes with offset, new IDs, and unique labels
+    const newNodes: Node[] = [];
+
+    for (let i = 0; i < copiedNodes.length; i++) {
+      const node = copiedNodes[i];
+      const newId = idMap.get(node.id)!;
+
+      // Always use the original display name from node definition as base
+      // This ensures "WhatsApp Receive 2" copies become "WhatsApp Receive 3", not "WhatsApp Receive 2 1"
+      const baseDisplayName = nodeDefinitions[node.type!]?.displayName || node.type!;
+
+      // Generate unique label considering existing nodes AND nodes we're about to add
+      const allNodes = [...nodes, ...newNodes];
+      const uniqueLabel = generateUniqueLabel(baseDisplayName, node.type!, allNodes);
+
+      const newNode: Node = {
+        ...node,
+        id: newId,
+        position: {
+          x: node.position.x + PASTE_OFFSET,
+          y: node.position.y + PASTE_OFFSET,
+        },
+        selected: true,
+        data: {
+          ...node.data,
+          label: uniqueLabel,
+        },
+      };
+
+      // Save parameters for new node to database
+      if (saveNodeParameters && newNode.data) {
+        try {
+          await saveNodeParameters(newId, newNode.data);
+        } catch (error) {
+          console.error(`[CopyPaste] Failed to save parameters for ${newId}:`, error);
+        }
+      }
+
+      newNodes.push(newNode);
+    }
+
+    // Create new edges with updated source/target IDs
+    const newEdges: Edge[] = copiedEdges.map(edge => ({
+      ...edge,
+      id: `e-${idMap.get(edge.source)}-${idMap.get(edge.target)}-${Date.now()}`,
+      source: idMap.get(edge.source)!,
+      target: idMap.get(edge.target)!,
+      selected: false,
+    }));
+
+    // Deselect existing nodes and add new ones as selected
+    setNodes(nds => [
+      ...nds.map(n => ({ ...n, selected: false })),
+      ...newNodes,
+    ]);
+
+    setEdges(eds => [...eds, ...newEdges]);
+
+    console.log(`[CopyPaste] Pasted ${newNodes.length} nodes and ${newEdges.length} edges`);
+  }, [nodes, setNodes, setEdges, saveNodeParameters]);
+
+  /**
+   * Check if clipboard has content.
+   */
+  const hasClipboard = clipboardRef.current !== null && clipboardRef.current.nodes.length > 0;
+
+  return {
+    copySelectedNodes,
+    pasteNodes,
+    hasClipboard,
+  };
+};

package/client/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,124 @@
+import { useCallback } from 'react';
+import { Node } from 'reactflow';
+import { snapToGrid, getDefaultNodePosition } from '../utils/workflow';
+import { theme } from '../styles/theme';
+import { nodeDefinitions } from '../nodeDefinitions';
+
+interface UseDragAndDropProps {
+  nodes: Node[];
+  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
+  saveNodeParameters?: (nodeId: string, parameters: Record<string, any>) => Promise<boolean>;
+}
+
+/**
+ * Generate a unique label for a new node (n8n pattern).
+ * First node of type: "Cron Scheduler"
+ * Second node of type: "Cron Scheduler 1"
+ * Third node of type: "Cron Scheduler 2"
+ */
+export const generateUniqueLabel = (displayName: string, nodeType: string, existingNodes: Node[]): string => {
+  // Collect all labels from nodes of the same type
+  const existingLabels = existingNodes
+    .filter(n => n.type === nodeType)
+    .map(n => n.data?.label as string | undefined)
+    .filter((label): label is string => !!label);
+
+  // If no nodes have this base displayName, use it as-is
+  if (!existingLabels.includes(displayName)) {
+    return displayName;
+  }
+
+  // Find next available suffix
+  let suffix = 1;
+  while (existingLabels.includes(`${displayName} ${suffix}`)) {
+    suffix++;
+  }
+  return `${displayName} ${suffix}`;
+};
+
+export const useDragAndDrop = ({ nodes, setNodes, saveNodeParameters }: UseDragAndDropProps) => {
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    async (event: React.DragEvent) => {
+      event.preventDefault();
+
+      try {
+        const nodeData = JSON.parse(event.dataTransfer.getData('application/reactflow'));
+        if (!nodeData || !nodeData.type) {
+          return;
+        }
+
+        const reactFlowBounds = (event.target as Element).getBoundingClientRect();
+
+        let position = {
+          x: event.clientX - reactFlowBounds.left - theme.constants.dragOffset.x,
+          y: event.clientY - reactFlowBounds.top - theme.constants.dragOffset.y,
+        };
+
+        // Snap to grid for better alignment
+        position = snapToGrid(position);
+
+        // If no nodes exist, use default position
+        if (nodes.length === 0) {
+          position = getDefaultNodePosition(nodes.length);
+        }
+
+        // Get node definition to access displayName
+        const nodeDef = nodeDefinitions[nodeData.type];
+        const displayName = nodeDef?.displayName || nodeData.type;
+
+        // Generate unique label for template variable resolution (n8n pattern)
+        const uniqueLabel = generateUniqueLabel(displayName, nodeData.type, nodes);
+
+        const newNode: Node = {
+          id: `${nodeData.type}-${Date.now()}`,
+          type: nodeData.type,
+          position,
+          data: {
+            ...(nodeData.data || {}),
+            label: uniqueLabel,  // Add unique label for template resolution
+          },
+        };
+
+        // Save node parameters to database immediately via WebSocket (including hidden parameters)
+        if (newNode.data && Object.keys(newNode.data).length > 0 && saveNodeParameters) {
+          try {
+            await saveNodeParameters(newNode.id, newNode.data);
+            console.log(`[DragAndDrop] Saved default parameters for node ${newNode.id}:`, newNode.data);
+          } catch (error) {
+            console.error(`[DragAndDrop] Failed to save parameters for node ${newNode.id}:`, error);
+          }
+        }
+
+        setNodes((nds) => nds.concat(newNode));
+      } catch (error) {
+        console.error('Error dropping node:', error);
+      }
+    },
+    [setNodes, nodes, saveNodeParameters]
+  );
+
+  const handleComponentDragStart = useCallback((event: React.DragEvent, definition: any) => {
+    const defaults: any = {};
+    // Handle both old (parameters) and new (properties) interface formats
+    const properties = definition.properties || definition.parameters || [];
+    properties.forEach((param: any) => {
+      defaults[param.name] = param.default;
+    });
+    event.dataTransfer.setData('application/reactflow', JSON.stringify({ 
+      type: definition.name || definition.type, // Handle both new (name) and old (type) formats
+      data: defaults 
+    }));
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  return {
+    onDragOver,
+    onDrop,
+    handleComponentDragStart,
+  };
+};

package/client/src/hooks/useDragVariable.ts

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { Node } from 'reactflow';
+
+interface DragVariableHookReturn {
+  handleVariableDragStart: (
+    e: React.DragEvent,
+    sourceNodeId: string,
+    propertyPath: string,
+    value: any
+  ) => void;
+  getTemplateVariableName: (sourceNodeId: string) => string;
+}
+
+/**
+ * Hook for handling drag-and-drop of template variables from connected nodes.
+ *
+ * Template variables use the SOURCE NODE LABEL as the key to ensure uniqueness
+ * when multiple nodes of the same type are connected to the same target.
+ * This follows the n8n pattern where each node has a unique label.
+ *
+ * Format: {{normalizedLabel.propertyPath}}
+ * Example: {{cronscheduler.data}} or {{cronscheduler1.data}}
+ *
+ * @param targetNodeId - The ID of the node receiving the drag (target of edge)
+ */
+export const useDragVariable = (_targetNodeId: string): DragVariableHookReturn => {
+  const { currentWorkflow } = useAppStore();
+
+  /**
+   * Get template variable name for a source node.
+   * Uses node label (n8n pattern) for uniqueness when multiple same-type nodes connect.
+   * Falls back to displayName -> nodeType -> nodeId for backward compatibility.
+   */
+  const getTemplateVariableName = useCallback((sourceNodeId: string): string => {
+    if (!currentWorkflow) return sourceNodeId;
+
+    // Find the source node by ID
+    const sourceNode = (currentWorkflow.nodes || []).find(
+      (node: Node) => node.id === sourceNodeId
+    );
+
+    if (!sourceNode) return sourceNodeId;
+
+    // Priority: node.data.label > displayName > nodeType > nodeId
+    const label = sourceNode.data?.label;
+    if (label && typeof label === 'string') {
+      // Normalize label: lowercase, remove spaces
+      return label.toLowerCase().replace(/\s+/g, '');
+    }
+
+    // Fallback to displayName from node definition
+    const nodeDef = nodeDefinitions[sourceNode.type || ''];
+    if (nodeDef?.displayName) {
+      return nodeDef.displayName.toLowerCase().replace(/\s+/g, '');
+    }
+
+    // Ultimate fallback: node type or ID
+    return (sourceNode.type || sourceNodeId).toLowerCase().replace(/\s+/g, '');
+  }, [currentWorkflow]);
+
+  const handleVariableDragStart = useCallback((
+    e: React.DragEvent,
+    sourceNodeId: string,
+    propertyPath: string,
+    value: any
+  ) => {
+    const templateName = getTemplateVariableName(sourceNodeId);
+    const variableTemplate = `{{${templateName}.${propertyPath}}}`;
+
+    e.dataTransfer.setData('text/plain', variableTemplate);
+    e.dataTransfer.setData('application/json', JSON.stringify({
+      type: 'nodeVariable',
+      nodeId: sourceNodeId,  // Include source node ID for reference
+      nodeName: templateName,
+      key: propertyPath,
+      variableTemplate,
+      dataType: typeof value
+    }));
+    e.dataTransfer.effectAllowed = 'copy';
+  }, [getTemplateVariableName]);
+
+  return {
+    handleVariableDragStart,
+    getTemplateVariableName
+  };
+};