machinaos 0.0.1

package/client/src/components/parameterPanel/InputSection.tsx

@@ -0,0 +1,1094 @@
+import React, { useState, useEffect } from 'react';
+import { useAppStore } from '../../store/useAppStore';
+import { nodeDefinitions } from '../../nodeDefinitions';
+import { useWebSocket } from '../../contexts/WebSocketContext';
+import { Node, Edge } from 'reactflow';
+import { useDragVariable } from '../../hooks/useDragVariable';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface InputSectionProps {
+  nodeId: string;
+  visible?: boolean;
+}
+
+interface NodeData {
+  id: string;
+  name: string;
+  type: string;
+  icon: string;
+  inputData?: any;
+  outputSchema: Record<string, any>;
+  hasExecutionData: boolean;
+}
+
+// Helper to render icon (handles both image URLs and emoji/text)
+const renderNodeIcon = (icon: string, size: number = 16) => {
+  if (icon.startsWith('data:') || icon.startsWith('http') || icon.startsWith('/')) {
+    return (
+      <img
+        src={icon}
+        alt="icon"
+        style={{ width: size, height: size, objectFit: 'contain' }}
+      />
+    );
+  }
+  return <span style={{ fontSize: size - 2 }}>{icon}</span>;
+};
+
+const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) => {
+  const theme = useAppTheme();
+  const { currentWorkflow } = useAppStore();
+  const { getNodeOutput } = useWebSocket();
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+  const [connectedNodes, setConnectedNodes] = useState<NodeData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { handleVariableDragStart, getTemplateVariableName } = useDragVariable(nodeId);
+
+  // Fetch connected node data with execution results from backend
+  useEffect(() => {
+    const fetchConnectedNodes = async () => {
+      if (!currentWorkflow || !nodeId) {
+        setConnectedNodes([]);
+        return;
+      }
+
+      setLoading(true);
+      const nodes = currentWorkflow.nodes || [];
+      const edges = currentWorkflow.edges || [];
+
+      // Helper to check if a handle is a config/auxiliary handle (not main data flow)
+      const isConfigHandle = (handle: string | null | undefined): boolean => {
+        if (!handle) return false;
+        // Config handles follow pattern: input-<type> where type is not 'main'
+        // Examples: input-memory, input-tools, input-model
+        if (handle.startsWith('input-') && handle !== 'input-main') {
+          return true;
+        }
+        return false;
+      };
+
+      // Helper to check if a node is a config/auxiliary node (connects to config handles)
+      const isConfigNode = (nodeType: string | undefined): boolean => {
+        if (!nodeType) return false;
+        const definition = nodeDefinitions[nodeType];
+        if (!definition) return false;
+        // Config nodes typically have 'memory' or 'tool' in their group
+        const groups = definition.group || [];
+        return groups.includes('memory') || groups.includes('tool');
+      };
+
+      // Get current node info
+      const currentNode = nodes.find((node: Node) => node.id === nodeId);
+      const currentNodeType = currentNode?.type;
+
+      // Collect all edges to process (direct + inherited from parent for config nodes)
+      interface EdgeWithLabel { edge: Edge; label?: string }
+      const edgesToProcess: EdgeWithLabel[] = [];
+
+      // 1. Add direct incoming edges (excluding config handle connections)
+      const directEdges = edges.filter((edge: Edge) => {
+        if (edge.target !== nodeId) return false;
+        if (isConfigHandle(edge.targetHandle)) return false;
+        return true;
+      });
+      directEdges.forEach(edge => edgesToProcess.push({ edge }));
+
+      // 2. If current node is a config node (memory, tool), inherit parent node's main inputs
+      if (isConfigNode(currentNodeType)) {
+        const outgoingEdges = edges.filter((edge: Edge) => edge.source === nodeId);
+
+        for (const outEdge of outgoingEdges) {
+          // Check if connected to a config handle on the target
+          if (isConfigHandle(outEdge.targetHandle)) {
+            const targetNode = nodes.find((node: Node) => node.id === outEdge.target);
+            if (!targetNode) continue;
+
+            const targetDef = nodeDefinitions[targetNode.type || ''];
+            const targetName = targetDef?.displayName || targetNode.type;
+
+            // Find nodes connected to the parent's main input (non-config handles)
+            const parentInputEdges = edges.filter(
+              (e: Edge) => e.target === targetNode.id && !isConfigHandle(e.targetHandle)
+            );
+
+            for (const parentEdge of parentInputEdges) {
+              edgesToProcess.push({ edge: parentEdge, label: `via ${targetName}` });
+            }
+          }
+        }
+      }
+
+      const nodeDataPromises = edgesToProcess.map(async ({ edge, label }) => {
+        const sourceNode = nodes.find((node: Node) => node.id === edge.source);
+        const nodeType = sourceNode?.type || '';
+        const nodeDef = nodeDefinitions[nodeType];
+
+        const executionData = await getNodeOutput(edge.source, 'output_0');
+        let inputData: any = null;
+        let outputSchema: Record<string, any>;
+        let hasExecutionData = false;
+
+        if (executionData && executionData[0] && executionData[0][0]) {
+          const rawData = executionData[0][0].json || executionData[0][0];
+          if (typeof rawData === 'object' && rawData !== null) {
+            inputData = rawData;
+            outputSchema = rawData;
+            hasExecutionData = true;
+          } else {
+            inputData = { value: rawData };
+            outputSchema = { value: typeof rawData };
+            hasExecutionData = true;
+          }
+        } else {
+          hasExecutionData = false;
+
+          if (nodeType === 'start') {
+            try {
+              const initialData = sourceNode?.data?.initialData || '{}';
+              outputSchema = typeof initialData === 'string' ? JSON.parse(initialData) : initialData;
+            } catch (e) {
+              outputSchema = {};
+            }
+          } else {
+            const sampleSchemas: Record<string, Record<string, any>> = {
+              location: { latitude: 'number', longitude: 'number', accuracy: 'number', provider: 'string', altitude: 'number' },
+              ai: { response: 'string', thinking: 'string', model: 'string', provider: 'string', finish_reason: 'string', timestamp: 'string' },
+              file: { fileName: 'string', fileSize: 'number' },
+              whatsapp: {
+                message_id: 'string',
+                sender: 'string',
+                sender_phone: 'string',
+                chat_id: 'string',
+                message_type: 'string',
+                text: 'string',
+                timestamp: 'string',
+                is_group: 'boolean',
+                is_from_me: 'boolean',
+                push_name: 'string',
+                media: 'object',
+                group_info: {
+                  group_jid: 'string',
+                  sender_jid: 'string',
+                  sender_phone: 'string',
+                  sender_name: 'string'
+                }
+              },
+              whatsappDb: {
+                // Output varies by operation - this shows chat_history output
+                operation: 'string',
+                // chat_history output
+                messages: [
+                  {
+                    text: 'string',
+                    sender: 'string',
+                    sender_phone: 'string',
+                    message_type: 'string',
+                    timestamp: 'string',
+                    message_id: 'string',
+                    is_from_me: 'boolean',
+                    is_group: 'boolean',
+                    push_name: 'string',
+                    index: 'number'
+                  }
+                ],
+                total: 'number',
+                has_more: 'boolean',
+                count: 'number',
+                chat_type: 'string',
+                // search_groups / list_contacts output
+                groups: [{ jid: 'string', name: 'string', participant_count: 'number' }],
+                contacts: [{ jid: 'string', phone: 'string', name: 'string', push_name: 'string' }],
+                // get_group_info output
+                participants: [{ jid: 'string', phone: 'string', name: 'string', is_admin: 'boolean' }],
+                // get_contact_info output
+                jid: 'string',
+                phone: 'string',
+                name: 'string',
+                push_name: 'string',
+                business_name: 'string',
+                is_business: 'boolean',
+                is_contact: 'boolean',
+                profile_pic: 'string',
+                timestamp: 'string'
+              },
+              webhook: {
+                method: 'string',
+                path: 'string',
+                headers: 'object',
+                query: 'object',
+                body: 'string',
+                json: 'object'
+              },
+              httpRequest: {
+                status: 'number',
+                data: 'any',
+                headers: 'object',
+                url: 'string',
+                method: 'string'
+              },
+              python: { output: 'any' },
+              javascript: { output: 'any' },
+              memory: {
+                session_id: 'string',
+                messages: 'array',
+                message_count: 'number',
+                memory_type: 'string',
+                window_size: 'number'
+              },
+              cronScheduler: {
+                timestamp: 'string',
+                iteration: 'number',
+                start_mode: 'string',
+                frequency: 'string',
+                timezone: 'string',
+                schedule: 'string',
+                scheduled_time: 'string',
+                triggered_at: 'string',
+                waited_seconds: 'number',
+                message: 'string'
+              },
+              // Android service schemas
+              android: {
+                service_id: 'string',
+                action: 'string',
+                data: 'object',
+                success: 'boolean'
+              },
+              batteryMonitor: {
+                battery_level: 'number',
+                is_charging: 'boolean',
+                temperature_celsius: 'number',
+                health: 'string',
+                voltage: 'number'
+              },
+              systemInfo: {
+                device_model: 'string',
+                android_version: 'string',
+                api_level: 'number',
+                manufacturer: 'string',
+                total_memory: 'number',
+                available_memory: 'number'
+              },
+              networkMonitor: {
+                connected: 'boolean',
+                type: 'string',
+                wifi_ssid: 'string',
+                ip_address: 'string'
+              },
+              wifiAutomation: {
+                wifi_enabled: 'boolean',
+                ssid: 'string',
+                ip_address: 'string',
+                signal_strength: 'number'
+              },
+              bluetoothAutomation: {
+                bluetooth_enabled: 'boolean',
+                paired_devices: 'array',
+                connected_devices: 'array'
+              },
+              audioAutomation: {
+                music_volume: 'number',
+                ring_volume: 'number',
+                muted: 'boolean'
+              },
+              androidLocation: {
+                latitude: 'number',
+                longitude: 'number',
+                accuracy: 'number',
+                provider: 'string',
+                altitude: 'number',
+                speed: 'number',
+                bearing: 'number'
+              },
+              appLauncher: {
+                package_name: 'string',
+                launched: 'boolean',
+                app_name: 'string'
+              },
+              appList: {
+                apps: 'array',
+                count: 'number'
+              },
+              deviceStateAutomation: {
+                airplane_mode: 'boolean',
+                screen_on: 'boolean',
+                brightness: 'number'
+              },
+              screenControlAutomation: {
+                brightness: 'number',
+                auto_brightness: 'boolean',
+                screen_timeout: 'number'
+              },
+              airplaneModeControl: {
+                airplane_mode_enabled: 'boolean'
+              },
+              motionDetection: {
+                accelerometer: { x: 'number', y: 'number', z: 'number' },
+                gyroscope: { x: 'number', y: 'number', z: 'number' },
+                motion_detected: 'boolean'
+              },
+              environmentalSensors: {
+                temperature: 'number',
+                humidity: 'number',
+                pressure: 'number',
+                light_level: 'number'
+              },
+              cameraControl: {
+                cameras: 'array',
+                photo_path: 'string',
+                success: 'boolean'
+              },
+              mediaControl: {
+                volume: 'number',
+                is_playing: 'boolean',
+                current_track: 'string'
+              },
+              chatTrigger: {
+                message: 'string',
+                timestamp: 'string',
+                session_id: 'string'
+              },
+              // Document processing schemas
+              httpScraper: {
+                items: 'array',
+                item_count: 'number',
+                errors: 'array'
+              },
+              fileDownloader: {
+                downloaded: 'number',
+                skipped: 'number',
+                failed: 'number',
+                files: 'array',
+                output_dir: 'string'
+              },
+              documentParser: {
+                documents: 'array',
+                parsed_count: 'number',
+                failed: 'array'
+              },
+              textChunker: {
+                chunks: 'array',
+                chunk_count: 'number'
+              },
+              embeddingGenerator: {
+                embeddings: 'array',
+                embedding_count: 'number',
+                dimensions: 'number',
+                chunks: 'array'
+              },
+              vectorStore: {
+                stored_count: 'number',
+                matches: 'array',
+                collection_name: 'string',
+                backend: 'string'
+              }
+            };
+
+            // Node type detection
+            const isMemory = nodeType === 'simpleMemory';
+            const nodeTypeLower = nodeType.toLowerCase();
+            const isAI = !isMemory && (nodeTypeLower.includes('chatmodel') || nodeTypeLower.includes('aiagent') || nodeTypeLower.includes('chatagent'));
+            const isFile = nodeType.includes('file');
+            const isWhatsAppDb = nodeType === 'whatsappDb';
+            const isWhatsApp = !isWhatsAppDb && (nodeType.includes('whatsapp') || nodeType.includes('Whatsapp'));
+            const isWebhook = nodeType === 'webhookTrigger';
+            const isHttpRequest = nodeType === 'httpRequest';
+            const isPython = nodeType.includes('python') || nodeType.includes('Python');
+            const isJavaScript = nodeType.includes('javascript') || nodeType.includes('Javascript');
+            const isCodeExecutor = isPython || isJavaScript;
+            const isCronScheduler = nodeType === 'cronScheduler';
+            const isChatTrigger = nodeType === 'chatTrigger';
+
+            // Document processing node detection
+            const documentNodeTypes = ['httpScraper', 'fileDownloader', 'documentParser', 'textChunker', 'embeddingGenerator', 'vectorStore'];
+            const isDocumentNode = documentNodeTypes.includes(nodeType);
+
+            // Android service node detection - check for specific Android node types
+            const androidNodeTypes = [
+              'batteryMonitor', 'systemInfo', 'networkMonitor',
+              'wifiAutomation', 'bluetoothAutomation', 'audioAutomation',
+              'deviceStateAutomation', 'screenControlAutomation', 'airplaneModeControl',
+              'motionDetection', 'environmentalSensors', 'cameraControl', 'mediaControl',
+              'appLauncher', 'appList'
+            ];
+            const isAndroidNode = androidNodeTypes.includes(nodeType);
+            const isAndroidLocation = nodeType === 'location';
+
+            // Location nodes (Google Maps, not Android location)
+            const isLocationNode = nodeType.includes('location') && !isAndroidLocation;
+            const isGoogleMaps = nodeType === 'createMap' || nodeType === 'addLocations' || nodeType === 'showNearbyPlaces';
+
+            // Select appropriate schema
+            if (isAndroidLocation) {
+              outputSchema = sampleSchemas.androidLocation;
+            } else if (isAndroidNode && sampleSchemas[nodeType as keyof typeof sampleSchemas]) {
+              outputSchema = sampleSchemas[nodeType as keyof typeof sampleSchemas];
+            } else if (isDocumentNode && sampleSchemas[nodeType as keyof typeof sampleSchemas]) {
+              outputSchema = sampleSchemas[nodeType as keyof typeof sampleSchemas];
+            } else {
+              outputSchema = isLocationNode || isGoogleMaps ? sampleSchemas.location :
+                            isMemory ? sampleSchemas.memory :
+                            isAI ? sampleSchemas.ai :
+                            isFile ? sampleSchemas.file :
+                            isWhatsAppDb ? sampleSchemas.whatsappDb :
+                            isWhatsApp ? sampleSchemas.whatsapp :
+                            isWebhook ? sampleSchemas.webhook :
+                            isHttpRequest ? sampleSchemas.httpRequest :
+                            isCodeExecutor ? sampleSchemas.python :
+                            isCronScheduler ? sampleSchemas.cronScheduler :
+                            isChatTrigger ? sampleSchemas.chatTrigger :
+                            { data: 'any' };
+            }
+          }
+        }
+
+        const baseName = sourceNode?.data?.label || nodeDef?.displayName || nodeType;
+        return {
+          id: edge.source,
+          name: label ? `${baseName} (${label})` : baseName,
+          type: nodeType,
+          icon: nodeDef?.icon || '',
+          inputData,
+          outputSchema,
+          hasExecutionData
+        };
+      });
+
+      const nodeDataResults = await Promise.all(nodeDataPromises);
+      setConnectedNodes(nodeDataResults);
+      // Auto-expand all nodes initially
+      setExpandedNodes(new Set(nodeDataResults.map(n => n.id)));
+      setLoading(false);
+    };
+
+    fetchConnectedNodes();
+  }, [nodeId, currentWorkflow, getNodeOutput]);
+
+  const toggleNode = (nodeId: string) => {
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      return next;
+    });
+  };
+
+  // Render draggable property
+  // NOTE: sourceNodeId is the unique node ID, used for template variable resolution
+  const renderDraggableProperty = (key: string, value: any, sourceNodeId: string, path: string = '', depth: number = 0, maxArrayItems: number = 3) => {
+    const currentPath = path ? `${path}.${key}` : key;
+    const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+    const isArray = Array.isArray(value);
+
+    // Handle arrays - show indexed items
+    if (isArray && value.length > 0) {
+      const templateName = getTemplateVariableName(sourceNodeId);
+      const itemsToShow = Math.min(value.length, maxArrayItems);
+
+      return (
+        <div key={currentPath} style={{ marginLeft: depth > 0 ? 16 : 0, marginBottom: 8 }}>
+          <div style={{
+            fontSize: theme.fontSize.xs,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.textMuted,
+            marginBottom: 4,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}>
+            {key}
+            <span style={{
+              fontSize: '10px',
+              color: theme.dracula.purple,
+              padding: '1px 6px',
+              backgroundColor: theme.dracula.purple + '20',
+              borderRadius: theme.borderRadius.sm,
+            }}>
+              [{value.length} items]
+            </span>
+          </div>
+          <div>
+            {/* Render first N array items with their index */}
+            {value.slice(0, itemsToShow).map((item: any, index: number) => {
+              const indexedPath = `${key}[${index}]`;
+              const fullIndexedPath = path ? `${path}.${indexedPath}` : indexedPath;
+
+              if (typeof item === 'object' && item !== null) {
+                // Object item - render its properties with indexed path
+                return (
+                  <div key={`${currentPath}[${index}]`} style={{
+                    marginLeft: 8,
+                    marginBottom: 8,
+                    padding: theme.spacing.xs,
+                    backgroundColor: theme.colors.backgroundElevated,
+                    borderRadius: theme.borderRadius.sm,
+                    border: `1px dashed ${theme.colors.border}`,
+                  }}>
+                    <div style={{
+                      fontSize: theme.fontSize.xs,
+                      fontWeight: theme.fontWeight.medium,
+                      color: theme.dracula.cyan,
+                      marginBottom: 4,
+                    }}>
+                      [{index}]
+                    </div>
+                    {Object.entries(item).map(([itemKey, itemValue]) => {
+                      const itemPath = `${fullIndexedPath}.${itemKey}`;
+                      // For nested objects within array items, render as draggable
+                      if (typeof itemValue === 'object' && itemValue !== null && !Array.isArray(itemValue)) {
+                        return (
+                          <div key={itemPath} style={{ marginLeft: 8, marginBottom: 4 }}>
+                            <div style={{
+                              fontSize: theme.fontSize.xs,
+                              color: theme.colors.textMuted,
+                              marginBottom: 2,
+                            }}>
+                              {itemKey}:
+                            </div>
+                            {Object.entries(itemValue as Record<string, any>).map(([nestedKey, nestedValue]) => (
+                              <div
+                                key={`${itemPath}.${nestedKey}`}
+                                draggable
+                                onDragStart={(e) => handleVariableDragStart(e, sourceNodeId, `${itemPath}.${nestedKey}`, nestedValue)}
+                                style={{
+                                  marginBottom: 4,
+                                  marginLeft: 8,
+                                  padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                                  backgroundColor: theme.colors.backgroundAlt,
+                                  border: `1px solid ${theme.colors.focus}`,
+                                  borderRadius: theme.borderRadius.sm,
+                                  cursor: 'grab',
+                                  fontSize: theme.fontSize.xs,
+                                }}
+                                onMouseEnter={(e) => {
+                                  e.currentTarget.style.backgroundColor = theme.colors.focusRing;
+                                  e.currentTarget.style.borderColor = theme.dracula.cyan;
+                                }}
+                                onMouseLeave={(e) => {
+                                  e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+                                  e.currentTarget.style.borderColor = theme.colors.focus;
+                                }}
+                              >
+                                <span style={{ color: theme.colors.templateVariable, fontFamily: 'monospace' }}>
+                                  {`{{${templateName}.${itemPath}.${nestedKey}}}`}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        );
+                      }
+                      // Primitive value in array item
+                      return (
+                        <div
+                          key={itemPath}
+                          draggable
+                          onDragStart={(e) => handleVariableDragStart(e, sourceNodeId, itemPath, itemValue)}
+                          style={{
+                            marginBottom: 4,
+                            marginLeft: 8,
+                            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                            backgroundColor: theme.colors.backgroundAlt,
+                            border: `1px solid ${theme.colors.focus}`,
+                            borderRadius: theme.borderRadius.sm,
+                            cursor: 'grab',
+                            fontSize: theme.fontSize.xs,
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.focusRing;
+                            e.currentTarget.style.borderColor = theme.dracula.cyan;
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+                            e.currentTarget.style.borderColor = theme.colors.focus;
+                          }}
+                        >
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <div>
+                              <span style={{ color: theme.colors.templateVariable, fontFamily: 'monospace' }}>
+                                {`{{${templateName}.${itemPath}}}`}
+                              </span>
+                              <span style={{ color: theme.colors.textMuted, marginLeft: 8 }}>
+                                {itemKey}: {typeof itemValue}
+                              </span>
+                            </div>
+                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={theme.colors.templateVariable} strokeWidth="2">
+                              <line x1="12" y1="5" x2="12" y2="19"/>
+                              <polyline points="19 12 12 19 5 12"/>
+                            </svg>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              } else {
+                // Primitive array item
+                return (
+                  <div
+                    key={`${currentPath}[${index}]`}
+                    draggable
+                    onDragStart={(e) => handleVariableDragStart(e, sourceNodeId, fullIndexedPath, item)}
+                    style={{
+                      marginBottom: 4,
+                      marginLeft: 8,
+                      padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                      backgroundColor: theme.colors.backgroundAlt,
+                      border: `1px solid ${theme.colors.focus}`,
+                      borderRadius: theme.borderRadius.sm,
+                      cursor: 'grab',
+                      fontSize: theme.fontSize.xs,
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor = theme.colors.focusRing;
+                      e.currentTarget.style.borderColor = theme.dracula.cyan;
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+                      e.currentTarget.style.borderColor = theme.colors.focus;
+                    }}
+                  >
+                    <span style={{ color: theme.colors.templateVariable, fontFamily: 'monospace' }}>
+                      {`{{${templateName}.${fullIndexedPath}}}`}
+                    </span>
+                    <span style={{ color: theme.colors.textMuted, marginLeft: 8 }}>
+                      [{index}]: {typeof item}
+                    </span>
+                  </div>
+                );
+              }
+            })}
+            {/* Show "and N more" if array has more items */}
+            {value.length > maxArrayItems && (
+              <div style={{
+                marginLeft: 8,
+                fontSize: theme.fontSize.xs,
+                color: theme.colors.textMuted,
+                fontStyle: 'italic',
+              }}>
+                ... and {value.length - maxArrayItems} more items
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    // Handle empty arrays
+    if (isArray && value.length === 0) {
+      return (
+        <div key={currentPath} style={{ marginLeft: depth > 0 ? 16 : 0, marginBottom: 8 }}>
+          <div style={{
+            fontSize: theme.fontSize.xs,
+            color: theme.colors.textMuted,
+          }}>
+            {key}: <span style={{ fontStyle: 'italic' }}>empty array</span>
+          </div>
+        </div>
+      );
+    }
+
+    // Handle objects
+    if (isObject) {
+      return (
+        <div key={currentPath} style={{ marginLeft: depth > 0 ? 16 : 0, marginBottom: 8 }}>
+          <div style={{
+            fontSize: theme.fontSize.xs,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.textMuted,
+            marginBottom: 4,
+          }}>
+            {key}:
+          </div>
+          <div>
+            {Object.entries(value as Record<string, any>).map(([subKey, subValue]) =>
+              renderDraggableProperty(subKey, subValue, sourceNodeId, currentPath, depth + 1)
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    const templateName = getTemplateVariableName(sourceNodeId);
+    return (
+      <div
+        key={currentPath}
+        draggable
+        onDragStart={(e) => handleVariableDragStart(e, sourceNodeId, currentPath, value)}
+        style={{
+          marginBottom: 8,
+          marginLeft: depth > 0 ? 16 : 0,
+          padding: theme.spacing.sm,
+          backgroundColor: theme.colors.backgroundAlt,
+          border: `1px solid ${theme.colors.focus}`,
+          borderRadius: theme.borderRadius.md,
+          cursor: 'grab',
+          transition: theme.transitions.fast,
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = theme.colors.focusRing;
+          e.currentTarget.style.borderColor = theme.dracula.cyan;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt;
+          e.currentTarget.style.borderColor = theme.colors.focus;
+        }}
+      >
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+          <div>
+            <div style={{
+              fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+              fontSize: theme.fontSize.sm,
+              fontWeight: theme.fontWeight.medium,
+              color: theme.colors.templateVariable,
+              marginBottom: 2,
+            }}>
+              {`{{${templateName}.${currentPath}}}`}
+            </div>
+            <div style={{
+              fontSize: theme.fontSize.xs,
+              color: theme.colors.textSecondary,
+            }}>
+              {key}: {typeof value}
+            </div>
+          </div>
+          {/* Drag icon */}
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={theme.colors.templateVariable} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <polyline points="19 12 12 19 5 12"/>
+          </svg>
+        </div>
+      </div>
+    );
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.colors.backgroundPanel,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing.xxl,
+      }}>
+        <div style={{
+          width: 32,
+          height: 32,
+          border: `3px solid ${theme.colors.border}`,
+          borderTopColor: theme.dracula.cyan,
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite',
+          marginBottom: theme.spacing.lg,
+        }} />
+        <style>
+          {`@keyframes spin { to { transform: rotate(360deg); } }`}
+        </style>
+        <div style={{
+          fontSize: theme.fontSize.sm,
+          color: theme.colors.textSecondary,
+        }}>
+          Loading input data...
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (connectedNodes.length === 0) {
+    return (
+      <div style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.colors.backgroundPanel,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing.xxl,
+      }}>
+        {/* Link icon */}
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke={theme.colors.textMuted} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginBottom: theme.spacing.lg }}>
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+        <div style={{
+          fontSize: theme.fontSize.base,
+          fontWeight: theme.fontWeight.medium,
+          color: theme.colors.textSecondary,
+          marginBottom: theme.spacing.xs,
+        }}>
+          No connected inputs
+        </div>
+        <div style={{
+          fontSize: theme.fontSize.sm,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+        }}>
+          Connect nodes to see input data and available variables
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      width: '100%',
+      height: '100%',
+      backgroundColor: theme.colors.backgroundPanel,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: `${theme.spacing.md} ${theme.spacing.lg}`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.background,
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        flexShrink: 0,
+      }}>
+        {/* Database icon */}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={theme.colors.textSecondary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <ellipse cx="12" cy="5" rx="9" ry="3"/>
+          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+        </svg>
+        <span style={{
+          fontSize: theme.fontSize.sm,
+          fontWeight: theme.fontWeight.semibold,
+          color: theme.colors.text,
+        }}>
+          Input Data & Variables
+        </span>
+        <span style={{
+          fontSize: theme.fontSize.xs,
+          fontWeight: theme.fontWeight.medium,
+          color: theme.dracula.cyan,
+          padding: `2px ${theme.spacing.sm}`,
+          backgroundColor: theme.dracula.cyan + '20',
+          borderRadius: theme.borderRadius.sm,
+        }}>
+          {connectedNodes.length}
+        </span>
+      </div>
+
+      {/* Content */}
+      <div style={{
+        flex: 1,
+        overflow: 'auto',
+        padding: theme.spacing.md,
+      }}>
+        {connectedNodes.map((node) => {
+          const isExpanded = expandedNodes.has(node.id);
+
+          return (
+            <div key={node.id} style={{
+              marginBottom: theme.spacing.md,
+              backgroundColor: theme.colors.background,
+              border: `1px solid ${theme.colors.border}`,
+              borderLeft: `3px solid ${node.hasExecutionData ? theme.dracula.green : theme.dracula.orange}`,
+              borderRadius: theme.borderRadius.md,
+              overflow: 'hidden',
+            }}>
+              {/* Node Header */}
+              <div
+                onClick={() => toggleNode(node.id)}
+                style={{
+                  padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+                  backgroundColor: theme.colors.backgroundAlt,
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  transition: theme.transitions.fast,
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing.sm }}>
+                  {renderNodeIcon(node.icon, 18)}
+                  <span style={{
+                    fontSize: theme.fontSize.sm,
+                    fontWeight: theme.fontWeight.semibold,
+                    color: theme.colors.text,
+                  }}>
+                    {node.name}
+                  </span>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing.sm }}>
+                  {/* Status badge */}
+                  <span style={{
+                    fontSize: '10px',
+                    fontWeight: theme.fontWeight.medium,
+                    color: node.hasExecutionData ? theme.dracula.green : theme.dracula.orange,
+                    padding: `2px ${theme.spacing.xs}`,
+                    backgroundColor: node.hasExecutionData ? theme.dracula.green + '20' : theme.dracula.orange + '20',
+                    borderRadius: theme.borderRadius.sm,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                  }}>
+                    {node.hasExecutionData ? (
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill={theme.dracula.green} stroke="none">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                      </svg>
+                    ) : (
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill={theme.dracula.orange} stroke="none">
+                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+                      </svg>
+                    )}
+                    {node.hasExecutionData ? 'LIVE' : 'SCHEMA'}
+                  </span>
+                  {/* Expand arrow */}
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke={theme.colors.textSecondary}
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{
+                      transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.2s ease',
+                    }}
+                  >
+                    <polyline points="6 9 12 15 18 9"/>
+                  </svg>
+                </div>
+              </div>
+
+              {/* Node Content */}
+              {isExpanded && (
+                <div style={{
+                  padding: theme.spacing.md,
+                  borderTop: `1px solid ${theme.colors.border}`,
+                }}>
+                  {/* Schema info banner */}
+                  {!node.hasExecutionData && (
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: theme.spacing.sm,
+                      padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+                      marginBottom: theme.spacing.md,
+                      backgroundColor: theme.dracula.cyan + '10',
+                      border: `1px solid ${theme.dracula.cyan}40`,
+                      borderRadius: theme.borderRadius.sm,
+                      fontSize: theme.fontSize.xs,
+                      color: theme.dracula.cyan,
+                    }}>
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill={theme.dracula.cyan} stroke="none">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+                      </svg>
+                      Schema view - Execute this node to see actual input data
+                    </div>
+                  )}
+
+                  {/* Live data preview */}
+                  {node.hasExecutionData && (
+                    <div style={{ marginBottom: theme.spacing.md }}>
+                      <div style={{
+                        fontSize: theme.fontSize.xs,
+                        fontWeight: theme.fontWeight.medium,
+                        color: theme.colors.textMuted,
+                        marginBottom: theme.spacing.xs,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                      }}>
+                        Received Data
+                      </div>
+                      <pre style={{
+                        margin: 0,
+                        padding: theme.spacing.sm,
+                        fontSize: theme.fontSize.xs,
+                        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                        backgroundColor: theme.colors.backgroundElevated,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius.sm,
+                        overflow: 'auto',
+                        maxHeight: '120px',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        color: theme.dracula.foreground,
+                      }}>
+                        {JSON.stringify(node.inputData, null, 2)}
+                      </pre>
+                    </div>
+                  )}
+
+                  {/* Draggable variables */}
+                  <div style={{
+                    fontSize: theme.fontSize.xs,
+                    fontWeight: theme.fontWeight.medium,
+                    color: theme.colors.textMuted,
+                    marginBottom: theme.spacing.sm,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                  }}>
+                    Drag Variables to Parameters
+                  </div>
+                  <div>
+                    {typeof node.outputSchema === 'object' && node.outputSchema !== null
+                      ? Object.entries(node.outputSchema).map(([key, value]) =>
+                          renderDraggableProperty(key, value, node.id)
+                        )
+                      : (
+                        <div style={{
+                          fontSize: theme.fontSize.sm,
+                          color: theme.colors.textMuted,
+                          fontStyle: 'italic',
+                        }}>
+                          No variables available
+                        </div>
+                      )
+                    }
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer hint */}
+      <div style={{
+        padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
+        borderTop: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.background,
+        fontSize: theme.fontSize.xs,
+        color: theme.colors.textMuted,
+        textAlign: 'center',
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.spacing.xs,
+      }}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="16" x2="12" y2="12"/>
+          <line x1="12" y1="8" x2="12.01" y2="8"/>
+        </svg>
+        Drag variables into parameter fields to use them
+      </div>
+    </div>
+  );
+};
+
+export default InputSection;