machinaos 0.0.1

package/client/src/components/GenericNode.tsx

@@ -0,0 +1,357 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { NodeData } from '../types/NodeTypes';
+import { INodeInputDefinition, INodeOutputDefinition, NodeConnectionType } from '../types/INodeProperties';
+import { useAppStore } from '../store/useAppStore';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { useWebSocket } from '../contexts/WebSocketContext';
+
+const GenericNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
+  const theme = useAppTheme();
+  const { setSelectedNode, renamingNodeId, setRenamingNodeId, updateNodeData } = useAppStore();
+  const { getNodeStatus } = useWebSocket();
+  const isDisabled = data?.disabled === true;
+
+  // Get execution status from WebSocket
+  const nodeStatus = getNodeStatus(id);
+  const executionStatus = nodeStatus?.status || 'idle';
+  const isExecuting = executionStatus === 'executing' || executionStatus === 'waiting';
+
+  // Get definition early for use in hooks
+  const definition = type && nodeDefinitions[type] ? nodeDefinitions[type] : null;
+
+  // Inline rename state
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [editLabel, setEditLabel] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync with global renaming state
+  useEffect(() => {
+    if (renamingNodeId === id) {
+      setIsRenaming(true);
+      setEditLabel(data?.label || definition?.displayName || type || '');
+    } else {
+      setIsRenaming(false);
+    }
+  }, [renamingNodeId, id, data?.label, definition?.displayName, type]);
+
+  // Focus and select input when entering rename mode
+  useEffect(() => {
+    if (isRenaming && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isRenaming]);
+
+  // Handle save rename
+  const handleSaveRename = useCallback(() => {
+    const newLabel = editLabel.trim();
+    const originalLabel = data?.label || definition?.displayName || type || '';
+
+    // Only save if label changed and is not empty
+    if (newLabel && newLabel !== originalLabel) {
+      updateNodeData(id, { ...data, label: newLabel });
+    }
+
+    setIsRenaming(false);
+    setRenamingNodeId(null);
+  }, [editLabel, data, definition?.displayName, type, id, updateNodeData, setRenamingNodeId]);
+
+  // Handle cancel rename
+  const handleCancelRename = useCallback(() => {
+    setIsRenaming(false);
+    setRenamingNodeId(null);
+  }, [setRenamingNodeId]);
+
+  // Handle double-click to rename
+  const handleLabelDoubleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setRenamingNodeId(id);
+  }, [id, setRenamingNodeId]);
+
+  const handleParametersClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
+  };
+
+  if (!type || !definition) {
+    return (
+      <div style={{
+        padding: '8px 12px',
+        backgroundColor: '#ef4444',
+        color: 'white',
+        borderRadius: '8px',
+        fontSize: '12px',
+        minWidth: '120px',
+        textAlign: 'center'
+      }}>
+        Unknown node type
+      </div>
+    );
+  }
+  
+  // Helper functions to get inputs/outputs for both enhanced and legacy nodes
+  const getNodeInputs = (): INodeInputDefinition[] => {
+    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 = (): INodeOutputDefinition[] => {
+    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'
+    }));
+  };
+
+  const nodeInputs = getNodeInputs();
+  const nodeOutputs = getNodeOutputs();
+  
+  // Helper functions for color management
+  const getNodeColor = () => definition.defaults.color || '#9E9E9E';
+  const getBorderColor = () => {
+    const color = getNodeColor();
+    if (color.startsWith('#')) {
+      const hex = color.substring(1);
+      const r = Math.max(0, parseInt(hex.substring(0, 2), 16) - 40);
+      const g = Math.max(0, parseInt(hex.substring(2, 4), 16) - 40);
+      const b = Math.max(0, parseInt(hex.substring(4, 6), 16) - 40);
+      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+    return color;
+  };
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        padding: '12px 32px 12px 16px',
+        minWidth: '160px',
+        minHeight: '60px',
+        borderRadius: '12px',
+        background: `linear-gradient(135deg, ${getNodeColor()} 0%, ${getBorderColor()} 100%)`,
+        border: `2px solid ${isExecuting
+          ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
+          : selected
+            ? '#3b82f6'
+            : getBorderColor()}`,
+        color: 'white',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: '14px',
+        fontWeight: '600',
+        textAlign: 'center',
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        boxShadow: isExecuting
+          ? theme.isDarkMode
+            ? `0 4px 12px ${theme.dracula.cyan}66, 0 0 0 3px ${theme.dracula.cyan}4D`
+            : `0 0 0 3px rgba(37, 99, 235, 0.5), 0 4px 16px rgba(37, 99, 235, 0.35)`
+          : selected
+            ? `0 8px 25px ${getNodeColor()}40, 0 0 0 2px ${theme.colors.focus}`
+            : theme.isDarkMode
+              ? `0 4px 12px ${getNodeColor()}40`
+              : `0 2px 8px ${getNodeColor()}25, 0 4px 16px rgba(0, 0, 0, 0.08)`,
+        overflow: 'visible',
+        opacity: isDisabled ? 0.5 : 1,
+        animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
+      }}
+    >
+      {/* Disabled Overlay */}
+      {isDisabled && (
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(128, 128, 128, 0.4)',
+          borderRadius: 'inherit',
+          zIndex: 25,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          pointerEvents: 'none',
+        }}>
+          <span style={{ fontSize: '24px', opacity: 0.8 }}>||</span>
+        </div>
+      )}
+      {/* Input Handles - Multiple handles based on node definition */}
+      {nodeInputs.map((input, index) => {
+        const totalInputs = nodeInputs.length;
+        const topPosition = totalInputs === 1 ? '50%' : 
+          `${20 + (60 * index) / Math.max(totalInputs - 1, 1)}%`;
+        
+        return (
+          <Handle
+            key={`input-${input.name}-${index}`}
+            id={`input-${input.name}`}
+            type="target"
+            position={Position.Left}
+            isConnectable={isConnectable}
+            style={{
+              position: 'absolute',
+              left: '-6px',
+              top: topPosition,
+              transform: 'translateY(-50%)',
+              width: '12px',
+              height: '12px',
+              backgroundColor: 'rgba(255,255,255,0.9)',
+              border: `2px solid ${getBorderColor()}`,
+              borderRadius: '50%'
+            }}
+            title={`${input.displayName}: ${input.description}`}
+          />
+        );
+      })}
+      
+
+      {/* Parameters Button */}
+      <button
+        onClick={handleParametersClick}
+        style={{
+          position: 'absolute',
+          top: '8px',
+          right: '8px',
+          width: '20px',
+          height: '20px',
+          borderRadius: '50%',
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          border: 'none',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '10px',
+          color: getNodeColor(),
+          fontWeight: '600',
+          transition: 'all 0.2s ease',
+          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+          zIndex: 20
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = 'white';
+          e.currentTarget.style.transform = 'scale(1.15)';
+          e.currentTarget.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.3)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
+          e.currentTarget.style.transform = 'scale(1)';
+          e.currentTarget.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.2)';
+        }}
+        title="Edit Parameters"
+      >
+        ⚙️
+      </button>
+      
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        position: 'relative',
+        zIndex: 10,
+        paddingRight: '4px'
+      }}>
+        <span style={{ fontSize: type === 'aiAgent' ? '18px' : '24px' }}>{definition.icon}</span>
+        {isRenaming ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editLabel}
+            onChange={(e) => setEditLabel(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleSaveRename();
+              } else if (e.key === 'Escape') {
+                handleCancelRename();
+              }
+              e.stopPropagation();
+            }}
+            onBlur={handleSaveRename}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              padding: '2px 4px',
+              fontSize: theme.fontSize.sm,
+              fontWeight: theme.fontWeight.medium,
+              color: theme.colors.text,
+              backgroundColor: theme.colors.backgroundElevated,
+              border: `1px solid ${theme.dracula.purple}`,
+              borderRadius: theme.borderRadius.sm,
+              outline: 'none',
+              minWidth: '60px',
+              maxWidth: '120px',
+            }}
+          />
+        ) : (
+          <span
+            onDoubleClick={handleLabelDoubleClick}
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              maxWidth: '100%',
+              cursor: 'text',
+            }}
+            title="Double-click to rename"
+          >
+            {data?.label || definition.displayName}
+          </span>
+        )}
+      </div>
+
+      
+      {/* Output Handles - Multiple handles based on node definition */}
+      {nodeOutputs.map((output, index) => {
+        const totalOutputs = nodeOutputs.length;
+        const topPosition = totalOutputs === 1 ? '50%' : 
+          `${20 + (60 * index) / Math.max(totalOutputs - 1, 1)}%`;
+        
+        return (
+          <Handle
+            key={`output-${output.name}-${index}`}
+            id={`output-${output.name}`}
+            type="source"
+            position={Position.Right}
+            isConnectable={isConnectable}
+            style={{
+              position: 'absolute',
+              right: '-6px',
+              top: topPosition,
+              transform: 'translateY(-50%)',
+              width: '12px',
+              height: '12px',
+              backgroundColor: 'rgba(255,255,255,0.9)',
+              border: `2px solid ${getBorderColor()}`,
+              borderRadius: '50%'
+            }}
+            title={`${output.displayName}: ${output.description}`}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default GenericNode;

package/client/src/components/LocationParameterPanel.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import Modal from './ui/Modal';
+import LocationPanelLayout from './parameterPanel/LocationPanelLayout';
+import { useParameterPanel } from '../hooks/useParameterPanel';
+import { ExecutionService } from '../services/executionService';
+import { useAppTheme } from '../hooks/useAppTheme';
+
+const LocationParameterPanel: React.FC = () => {
+  const theme = useAppTheme();
+  const {
+    selectedNode,
+    nodeDefinition,
+    parameters,
+    hasUnsavedChanges,
+    handleParameterChange,
+    handleSave,
+    handleCancel,
+  } = useParameterPanel();
+
+
+  // Execution state (kept for potential future location node execution)
+  const [isExecuting, setIsExecuting] = useState(false);
+
+  const handleModalClose = () => {
+    handleCancel();
+  };
+
+  // Execute the current node (simplified - location nodes typically don't execute)
+  const handleRun = async () => {
+    if (!selectedNode || !nodeDefinition) return;
+
+    if (hasUnsavedChanges) {
+      await handleSave();
+    }
+
+    setIsExecuting(true);
+    try {
+      // Location nodes like createMap typically don't need backend execution
+      // They're configuration nodes that output map instances
+    } catch (error: any) {
+      console.error('Location node execution failed:', error);
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  // Check if node can be executed
+  const canExecute = selectedNode && nodeDefinition &&
+    ExecutionService.isNodeTypeSupported(nodeDefinition.name);
+
+  if (!selectedNode || !nodeDefinition) {
+    return null;
+  }
+
+  // Only show LocationParameterPanel for createMap node
+  if (nodeDefinition.name !== 'createMap') {
+    return null;
+  }
+
+  // Action button style helper - matches main ParameterPanel
+  const actionButtonStyle = (color: string, isDisabled = false): React.CSSProperties => ({
+    height: '32px',
+    padding: '0 14px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    backgroundColor: isDisabled ? `${theme.colors.primary}15` : `${color}25`,
+    color: isDisabled ? theme.colors.primary : color,
+    border: `1px solid ${isDisabled ? `${theme.colors.primary}40` : `${color}60`}`,
+    borderRadius: theme.borderRadius.sm,
+    fontSize: '13px',
+    fontWeight: 600,
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    transition: `all ${theme.transitions.fast}`,
+  });
+
+  // Header actions with node name and buttons in middle area
+  const headerActions = (
+    <div style={{
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center'
+    }}>
+      {/* Node Name */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '15px',
+        fontWeight: 600,
+        color: theme.colors.text
+      }}>
+        <span>{nodeDefinition.icon}</span>
+        <span>{nodeDefinition.displayName}</span>
+        {hasUnsavedChanges && <span style={{ color: theme.accent.orange }}>*</span>}
+      </div>
+
+      {/* Buttons: Run, Save, Cancel */}
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        {/* Run Button */}
+        {canExecute && (
+          <button
+            style={actionButtonStyle(theme.dracula.green, isExecuting)}
+            onClick={handleRun}
+            disabled={isExecuting}
+            title={isExecuting ? 'Execution in progress...' : 'Execute this node'}
+          >
+            {isExecuting ? 'Running...' : 'Run'}
+          </button>
+        )}
+
+        {/* Save Button */}
+        <button
+          style={actionButtonStyle(theme.dracula.purple, !hasUnsavedChanges)}
+          onClick={handleSave}
+          disabled={!hasUnsavedChanges}
+        >
+          Save
+        </button>
+
+        {/* Cancel Button */}
+        <button
+          style={actionButtonStyle(theme.dracula.pink, false)}
+          onClick={handleCancel}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <Modal
+      isOpen={!!selectedNode}
+      onClose={handleModalClose}
+      title="Node Configuration"
+      maxWidth="95vw"
+      maxHeight="95vh"
+      headerActions={headerActions}
+    >
+      {/* Modular Location Panel Layout */}
+      <LocationPanelLayout
+        selectedNode={selectedNode}
+        nodeDefinition={nodeDefinition}
+        parameters={parameters}
+        hasUnsavedChanges={hasUnsavedChanges}
+        onParameterChange={handleParameterChange}
+        showInputSection={true}
+      />
+    </Modal>
+  );
+};
+
+export default LocationParameterPanel;