machinaos 0.0.1 → 0.0.7

package/client/src/components/OutputPanel.tsx

@@ -1,471 +1,471 @@
-import React, { useState } from 'react';
-import { useAppTheme } from '../hooks/useAppTheme';
-import { useAppStore } from '../store/useAppStore';
-import { nodeDefinitions } from '../nodeDefinitions';
-import { INodeOutputDefinition, NodeConnectionType } from '../types/INodeProperties';
-import { useDragVariable } from '../hooks/useDragVariable';
-
-interface OutputPanelProps {
-  nodeId: string;
-}
-
-interface ConnectedNodeData {
-  nodeId: string;
-  nodeName: string;
-  outputs: INodeOutputDefinition[];
-}
-
-// Android node output schemas - matches the flattened output structure from backend
-// These are shown as draggable outputs for template variable creation
-const ANDROID_OUTPUT_SCHEMAS: Record<string, Record<string, string>> = {
-  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',
-    ssid: 'string',
-    ip_address: 'string',
-    signal_strength: 'number'
-  },
-  wifiAutomation: {
-    enabled: 'boolean',
-    connected: 'boolean',
-    ssid: 'string',
-    networks: 'array'
-  },
-  bluetoothAutomation: {
-    enabled: 'boolean',
-    connected: 'boolean',
-    paired_devices: 'array'
-  },
-  audioAutomation: {
-    media_volume: 'number',
-    ring_volume: 'number',
-    muted: 'boolean'
-  },
-  location: {
-    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'
-  },
-  motionDetection: {
-    acceleration_x: 'number',
-    acceleration_y: 'number',
-    acceleration_z: 'number',
-    is_moving: 'boolean'
-  },
-  environmentalSensors: {
-    temperature: 'number',
-    humidity: 'number',
-    pressure: 'number',
-    light: 'number'
-  },
-  cameraControl: {
-    cameras: 'array',
-    photo_path: 'string'
-  },
-  mediaControl: {
-    playing: 'boolean',
-    volume: 'number',
-    track: 'string'
-  },
-  airplaneModeControl: {
-    enabled: 'boolean'
-  }
-};
-
-// List of Android service node types
-const ANDROID_NODE_TYPES = [
-  'batteryMonitor', 'systemInfo', 'networkMonitor', 'location',
-  'wifiAutomation', 'bluetoothAutomation', 'audioAutomation',
-  'deviceStateAutomation', 'screenControlAutomation', 'airplaneModeControl',
-  'motionDetection', 'environmentalSensors', 'cameraControl', 'mediaControl',
-  'appLauncher', 'appList'
-];
-
-const OutputPanel: React.FC<OutputPanelProps> = ({ nodeId }) => {
-  const theme = useAppTheme();
-  const { currentWorkflow } = useAppStore();
-  const [expandedNode, setExpandedNode] = useState<string | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [draggedParam, setDraggedParam] = useState<{ nodeId: string; output: string } | null>(null);
-
-  // Use the same template variable naming as InputSection for consistency
-  const { getTemplateVariableName } = useDragVariable(nodeId);
-
-  // Helper to get outputs from a node definition
-  const getNodeOutputs = (nodeType: string): INodeOutputDefinition[] => {
-    // For Android nodes, use the detailed schema to show individual draggable properties
-    if (ANDROID_NODE_TYPES.includes(nodeType)) {
-      const schema = ANDROID_OUTPUT_SCHEMAS[nodeType];
-      if (schema) {
-        return Object.entries(schema).map(([name, type]) => ({
-          name,
-          displayName: name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
-          type: type as NodeConnectionType,
-          description: `${type} value`
-        }));
-      }
-    }
-
-    const definition = nodeDefinitions[nodeType];
-    if (!definition) return [];
-
-    if (!definition.outputs) {
-      return [{
-        name: 'output',
-        displayName: 'Output',
-        type: 'main' as NodeConnectionType,
-        description: 'Node output'
-      }];
-    } else if (Array.isArray(definition.outputs)) {
-      if (typeof definition.outputs[0] === 'string') {
-        return (definition.outputs as string[]).map(outputName => ({
-          name: outputName,
-          displayName: outputName.charAt(0).toUpperCase() + outputName.slice(1),
-          type: 'main' as NodeConnectionType,
-          description: `${outputName} output`
-        }));
-      } else {
-        return definition.outputs as INodeOutputDefinition[];
-      }
-    }
-    return [{
-      name: 'output',
-      displayName: 'Output',
-      type: 'main' as NodeConnectionType,
-      description: 'Node output'
-    }];
-  };
-
-  // 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, or have no main input
-    const groups = definition.group || [];
-    return groups.includes('memory') || groups.includes('tool');
-  };
-
-  // Get connected nodes with their outputs
-  const getConnectedNodes = (): ConnectedNodeData[] => {
-    if (!currentWorkflow || !nodeId) return [];
-
-    const connectedNodes: ConnectedNodeData[] = [];
-    const addedNodeIds = new Set<string>();
-
-    // Helper to add a node to connected list
-    const addConnectedNode = (sourceNodeId: string, label?: string) => {
-      if (addedNodeIds.has(sourceNodeId)) return;
-
-      const sourceNode = currentWorkflow.nodes.find(n => n.id === sourceNodeId);
-      if (!sourceNode?.type) return;
-
-      const sourceDefinition = nodeDefinitions[sourceNode.type];
-      if (!sourceDefinition) return;
-
-      addedNodeIds.add(sourceNodeId);
-      connectedNodes.push({
-        nodeId: sourceNode.id,
-        nodeName: label ? `${sourceDefinition.displayName} (${label})` : sourceDefinition.displayName,
-        outputs: getNodeOutputs(sourceNode.type)
-      });
-    };
-
-    // Find all edges that connect TO the current node
-    const incomingEdges = currentWorkflow.edges.filter(edge => edge.target === nodeId);
-
-    // Get current node info
-    const currentNode = currentWorkflow.nodes.find(n => n.id === nodeId);
-    const currentNodeType = currentNode?.type;
-
-    for (const edge of incomingEdges) {
-      // Skip config handle connections - they're for auxiliary nodes, not main data flow
-      if (isConfigHandle(edge.targetHandle)) {
-        continue;
-      }
-      addConnectedNode(edge.source);
-    }
-
-    // If current node is a config node (memory, tool), inherit parent node's main inputs
-    if (isConfigNode(currentNodeType)) {
-      // Find which parent node this config node is connected to
-      const outgoingEdges = currentWorkflow.edges.filter(edge => edge.source === nodeId);
-
-      for (const edge of outgoingEdges) {
-        // Check if connected to a config handle on the target
-        if (isConfigHandle(edge.targetHandle)) {
-          const targetNode = currentWorkflow.nodes.find(n => n.id === edge.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 = currentWorkflow.edges.filter(
-            e => e.target === targetNode.id && !isConfigHandle(e.targetHandle)
-          );
-
-          for (const parentEdge of parentInputEdges) {
-            addConnectedNode(parentEdge.source, `via ${targetName}`);
-          }
-        }
-      }
-    }
-
-    return connectedNodes;
-  };
-
-  const connectedNodes = getConnectedNodes();
-
-  const handleDragStart = (e: React.DragEvent, sourceNodeId: string, outputName: string) => {
-    setIsDragging(true);
-    setDraggedParam({ nodeId: sourceNodeId, output: outputName });
-    e.dataTransfer.effectAllowed = 'copy';
-
-    // Use the same template naming as InputSection for consistency
-    // This ensures Android nodes and all other nodes work properly with template variables
-    const templateName = getTemplateVariableName(sourceNodeId);
-
-    e.dataTransfer.setData('text/plain', `{{${templateName}.${outputName}}}`);
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-    setDraggedParam(null);
-  };
-
-  if (connectedNodes.length === 0) {
-    return (
-      <div style={{
-        width: '300px',
-        height: '100%',
-        padding: theme.spacing.md,
-        backgroundColor: theme.colors.backgroundAlt,
-        borderRight: `1px solid ${theme.colors.border}`,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
-        <p style={{
-          margin: 0,
-          fontSize: theme.fontSize.sm,
-          color: theme.colors.textSecondary,
-          fontStyle: 'italic',
-          textAlign: 'center'
-        }}>
-          No connected nodes.
-          <br />
-          Connect nodes to see their outputs here.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{
-      width: '300px',
-      height: '100%',
-      backgroundColor: theme.colors.backgroundAlt,
-      borderRight: `1px solid ${theme.colors.border}`,
-      display: 'flex',
-      flexDirection: 'column'
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: theme.spacing.md,
-        backgroundColor: theme.colors.backgroundPanel,
-        borderBottom: `1px solid ${theme.colors.border}`,
-        fontSize: theme.fontSize.sm,
-        fontWeight: theme.fontWeight.semibold,
-        color: theme.colors.textSecondary,
-        textTransform: 'uppercase',
-        letterSpacing: '0.1em'
-      }}>
-        🔗 Connected Outputs
-      </div>
-
-      {/* Scrollable content */}
-      <div style={{ 
-        flex: 1, 
-        overflowY: 'auto', 
-        padding: theme.spacing.sm 
-      }}>
-        {connectedNodes.map((node) => (
-          <div key={node.nodeId} style={{
-            marginBottom: theme.spacing.xs,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.colors.background,
-            overflow: 'hidden'
-          }}>
-            <div
-              onClick={() => setExpandedNode(expandedNode === node.nodeId ? null : node.nodeId)}
-              style={{
-                padding: theme.spacing.sm,
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: theme.colors.backgroundAlt,
-                transition: theme.transitions.fast
-              }}
-            >
-              <span style={{
-                fontSize: theme.fontSize.sm,
-                fontWeight: theme.fontWeight.medium,
-                color: theme.colors.text
-              }}>
-                📦 {node.nodeName}
-              </span>
-              <span style={{
-                fontSize: theme.fontSize.xs,
-                color: theme.colors.textSecondary,
-                transform: expandedNode === node.nodeId ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s ease'
-              }}>
-                ▼
-              </span>
-            </div>
-
-            {expandedNode === node.nodeId && (
-              <div style={{
-                padding: theme.spacing.sm,
-                borderTop: `1px solid ${theme.colors.border}`
-              }}>
-                {node.outputs.length === 0 ? (
-                  <p style={{
-                    margin: 0,
-                    fontSize: theme.fontSize.xs,
-                    color: theme.colors.textSecondary,
-                    fontStyle: 'italic',
-                    padding: theme.spacing.xs
-                  }}>
-                    No output parameters available
-                  </p>
-                ) : (
-                  node.outputs.map((output) => (
-                    <div
-                      key={output.name}
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, node.nodeId, output.name)}
-                      onDragEnd={handleDragEnd}
-                      style={{
-                        padding: theme.spacing.xs,
-                        marginBottom: theme.spacing.xs,
-                        backgroundColor: isDragging && draggedParam?.nodeId === node.nodeId && draggedParam?.output === output.name
-                          ? theme.colors.focusRing
-                          : theme.colors.backgroundAlt,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: theme.borderRadius.sm,
-                        cursor: 'grab',
-                        transition: theme.transitions.fast
-                      }}
-                    >
-                      <div style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between'
-                      }}>
-                        <div>
-                          <div style={{
-                            fontSize: theme.fontSize.sm,
-                            fontWeight: theme.fontWeight.medium,
-                            color: theme.colors.text,
-                            marginBottom: '2px'
-                          }}>
-                            {output.displayName}
-                          </div>
-                          <div style={{
-                            fontSize: theme.fontSize.xs,
-                            color: theme.colors.textSecondary
-                          }}>
-                            {output.type} • {output.description}
-                          </div>
-                        </div>
-                        <div style={{
-                          fontSize: theme.fontSize.xs,
-                          color: theme.colors.textSecondary,
-                          fontFamily: 'monospace',
-                          padding: `2px ${theme.spacing.xs}`,
-                          backgroundColor: theme.colors.background,
-                          borderRadius: theme.borderRadius.sm,
-                          border: `1px solid ${theme.colors.border}`
-                        }}>
-                          {output.name}
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                )}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Footer */}
-      <div style={{
-        padding: theme.spacing.sm,
-        backgroundColor: theme.colors.backgroundPanel,
-        borderTop: `1px solid ${theme.colors.border}`,
-        fontSize: theme.fontSize.xs,
-        color: theme.colors.textSecondary,
-        textAlign: 'center'
-      }}>
-        💡 Drag outputs to parameter fields
-      </div>
-    </div>
-  );
-};
-
+import React, { useState } from 'react';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { INodeOutputDefinition, NodeConnectionType } from '../types/INodeProperties';
+import { useDragVariable } from '../hooks/useDragVariable';
+
+interface OutputPanelProps {
+  nodeId: string;
+}
+
+interface ConnectedNodeData {
+  nodeId: string;
+  nodeName: string;
+  outputs: INodeOutputDefinition[];
+}
+
+// Android node output schemas - matches the flattened output structure from backend
+// These are shown as draggable outputs for template variable creation
+const ANDROID_OUTPUT_SCHEMAS: Record<string, Record<string, string>> = {
+  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',
+    ssid: 'string',
+    ip_address: 'string',
+    signal_strength: 'number'
+  },
+  wifiAutomation: {
+    enabled: 'boolean',
+    connected: 'boolean',
+    ssid: 'string',
+    networks: 'array'
+  },
+  bluetoothAutomation: {
+    enabled: 'boolean',
+    connected: 'boolean',
+    paired_devices: 'array'
+  },
+  audioAutomation: {
+    media_volume: 'number',
+    ring_volume: 'number',
+    muted: 'boolean'
+  },
+  location: {
+    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'
+  },
+  motionDetection: {
+    acceleration_x: 'number',
+    acceleration_y: 'number',
+    acceleration_z: 'number',
+    is_moving: 'boolean'
+  },
+  environmentalSensors: {
+    temperature: 'number',
+    humidity: 'number',
+    pressure: 'number',
+    light: 'number'
+  },
+  cameraControl: {
+    cameras: 'array',
+    photo_path: 'string'
+  },
+  mediaControl: {
+    playing: 'boolean',
+    volume: 'number',
+    track: 'string'
+  },
+  airplaneModeControl: {
+    enabled: 'boolean'
+  }
+};
+
+// List of Android service node types
+const ANDROID_NODE_TYPES = [
+  'batteryMonitor', 'systemInfo', 'networkMonitor', 'location',
+  'wifiAutomation', 'bluetoothAutomation', 'audioAutomation',
+  'deviceStateAutomation', 'screenControlAutomation', 'airplaneModeControl',
+  'motionDetection', 'environmentalSensors', 'cameraControl', 'mediaControl',
+  'appLauncher', 'appList'
+];
+
+const OutputPanel: React.FC<OutputPanelProps> = ({ nodeId }) => {
+  const theme = useAppTheme();
+  const { currentWorkflow } = useAppStore();
+  const [expandedNode, setExpandedNode] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggedParam, setDraggedParam] = useState<{ nodeId: string; output: string } | null>(null);
+
+  // Use the same template variable naming as InputSection for consistency
+  const { getTemplateVariableName } = useDragVariable(nodeId);
+
+  // Helper to get outputs from a node definition
+  const getNodeOutputs = (nodeType: string): INodeOutputDefinition[] => {
+    // For Android nodes, use the detailed schema to show individual draggable properties
+    if (ANDROID_NODE_TYPES.includes(nodeType)) {
+      const schema = ANDROID_OUTPUT_SCHEMAS[nodeType];
+      if (schema) {
+        return Object.entries(schema).map(([name, type]) => ({
+          name,
+          displayName: name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+          type: type as NodeConnectionType,
+          description: `${type} value`
+        }));
+      }
+    }
+
+    const definition = nodeDefinitions[nodeType];
+    if (!definition) return [];
+
+    if (!definition.outputs) {
+      return [{
+        name: 'output',
+        displayName: 'Output',
+        type: 'main' as NodeConnectionType,
+        description: 'Node output'
+      }];
+    } else if (Array.isArray(definition.outputs)) {
+      if (typeof definition.outputs[0] === 'string') {
+        return (definition.outputs as string[]).map(outputName => ({
+          name: outputName,
+          displayName: outputName.charAt(0).toUpperCase() + outputName.slice(1),
+          type: 'main' as NodeConnectionType,
+          description: `${outputName} output`
+        }));
+      } else {
+        return definition.outputs as INodeOutputDefinition[];
+      }
+    }
+    return [{
+      name: 'output',
+      displayName: 'Output',
+      type: 'main' as NodeConnectionType,
+      description: 'Node output'
+    }];
+  };
+
+  // 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, or have no main input
+    const groups = definition.group || [];
+    return groups.includes('memory') || groups.includes('tool');
+  };
+
+  // Get connected nodes with their outputs
+  const getConnectedNodes = (): ConnectedNodeData[] => {
+    if (!currentWorkflow || !nodeId) return [];
+
+    const connectedNodes: ConnectedNodeData[] = [];
+    const addedNodeIds = new Set<string>();
+
+    // Helper to add a node to connected list
+    const addConnectedNode = (sourceNodeId: string, label?: string) => {
+      if (addedNodeIds.has(sourceNodeId)) return;
+
+      const sourceNode = currentWorkflow.nodes.find(n => n.id === sourceNodeId);
+      if (!sourceNode?.type) return;
+
+      const sourceDefinition = nodeDefinitions[sourceNode.type];
+      if (!sourceDefinition) return;
+
+      addedNodeIds.add(sourceNodeId);
+      connectedNodes.push({
+        nodeId: sourceNode.id,
+        nodeName: label ? `${sourceDefinition.displayName} (${label})` : sourceDefinition.displayName,
+        outputs: getNodeOutputs(sourceNode.type)
+      });
+    };
+
+    // Find all edges that connect TO the current node
+    const incomingEdges = currentWorkflow.edges.filter(edge => edge.target === nodeId);
+
+    // Get current node info
+    const currentNode = currentWorkflow.nodes.find(n => n.id === nodeId);
+    const currentNodeType = currentNode?.type;
+
+    for (const edge of incomingEdges) {
+      // Skip config handle connections - they're for auxiliary nodes, not main data flow
+      if (isConfigHandle(edge.targetHandle)) {
+        continue;
+      }
+      addConnectedNode(edge.source);
+    }
+
+    // If current node is a config node (memory, tool), inherit parent node's main inputs
+    if (isConfigNode(currentNodeType)) {
+      // Find which parent node this config node is connected to
+      const outgoingEdges = currentWorkflow.edges.filter(edge => edge.source === nodeId);
+
+      for (const edge of outgoingEdges) {
+        // Check if connected to a config handle on the target
+        if (isConfigHandle(edge.targetHandle)) {
+          const targetNode = currentWorkflow.nodes.find(n => n.id === edge.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 = currentWorkflow.edges.filter(
+            e => e.target === targetNode.id && !isConfigHandle(e.targetHandle)
+          );
+
+          for (const parentEdge of parentInputEdges) {
+            addConnectedNode(parentEdge.source, `via ${targetName}`);
+          }
+        }
+      }
+    }
+
+    return connectedNodes;
+  };
+
+  const connectedNodes = getConnectedNodes();
+
+  const handleDragStart = (e: React.DragEvent, sourceNodeId: string, outputName: string) => {
+    setIsDragging(true);
+    setDraggedParam({ nodeId: sourceNodeId, output: outputName });
+    e.dataTransfer.effectAllowed = 'copy';
+
+    // Use the same template naming as InputSection for consistency
+    // This ensures Android nodes and all other nodes work properly with template variables
+    const templateName = getTemplateVariableName(sourceNodeId);
+
+    e.dataTransfer.setData('text/plain', `{{${templateName}.${outputName}}}`);
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+    setDraggedParam(null);
+  };
+
+  if (connectedNodes.length === 0) {
+    return (
+      <div style={{
+        width: '300px',
+        height: '100%',
+        padding: theme.spacing.md,
+        backgroundColor: theme.colors.backgroundAlt,
+        borderRight: `1px solid ${theme.colors.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        <p style={{
+          margin: 0,
+          fontSize: theme.fontSize.sm,
+          color: theme.colors.textSecondary,
+          fontStyle: 'italic',
+          textAlign: 'center'
+        }}>
+          No connected nodes.
+          <br />
+          Connect nodes to see their outputs here.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      width: '300px',
+      height: '100%',
+      backgroundColor: theme.colors.backgroundAlt,
+      borderRight: `1px solid ${theme.colors.border}`,
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: theme.spacing.md,
+        backgroundColor: theme.colors.backgroundPanel,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        fontSize: theme.fontSize.sm,
+        fontWeight: theme.fontWeight.semibold,
+        color: theme.colors.textSecondary,
+        textTransform: 'uppercase',
+        letterSpacing: '0.1em'
+      }}>
+        🔗 Connected Outputs
+      </div>
+
+      {/* Scrollable content */}
+      <div style={{ 
+        flex: 1, 
+        overflowY: 'auto', 
+        padding: theme.spacing.sm 
+      }}>
+        {connectedNodes.map((node) => (
+          <div key={node.nodeId} style={{
+            marginBottom: theme.spacing.xs,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.borderRadius.sm,
+            backgroundColor: theme.colors.background,
+            overflow: 'hidden'
+          }}>
+            <div
+              onClick={() => setExpandedNode(expandedNode === node.nodeId ? null : node.nodeId)}
+              style={{
+                padding: theme.spacing.sm,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                backgroundColor: theme.colors.backgroundAlt,
+                transition: theme.transitions.fast
+              }}
+            >
+              <span style={{
+                fontSize: theme.fontSize.sm,
+                fontWeight: theme.fontWeight.medium,
+                color: theme.colors.text
+              }}>
+                📦 {node.nodeName}
+              </span>
+              <span style={{
+                fontSize: theme.fontSize.xs,
+                color: theme.colors.textSecondary,
+                transform: expandedNode === node.nodeId ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s ease'
+              }}>
+                ▼
+              </span>
+            </div>
+
+            {expandedNode === node.nodeId && (
+              <div style={{
+                padding: theme.spacing.sm,
+                borderTop: `1px solid ${theme.colors.border}`
+              }}>
+                {node.outputs.length === 0 ? (
+                  <p style={{
+                    margin: 0,
+                    fontSize: theme.fontSize.xs,
+                    color: theme.colors.textSecondary,
+                    fontStyle: 'italic',
+                    padding: theme.spacing.xs
+                  }}>
+                    No output parameters available
+                  </p>
+                ) : (
+                  node.outputs.map((output) => (
+                    <div
+                      key={output.name}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, node.nodeId, output.name)}
+                      onDragEnd={handleDragEnd}
+                      style={{
+                        padding: theme.spacing.xs,
+                        marginBottom: theme.spacing.xs,
+                        backgroundColor: isDragging && draggedParam?.nodeId === node.nodeId && draggedParam?.output === output.name
+                          ? theme.colors.focusRing
+                          : theme.colors.backgroundAlt,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: theme.borderRadius.sm,
+                        cursor: 'grab',
+                        transition: theme.transitions.fast
+                      }}
+                    >
+                      <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between'
+                      }}>
+                        <div>
+                          <div style={{
+                            fontSize: theme.fontSize.sm,
+                            fontWeight: theme.fontWeight.medium,
+                            color: theme.colors.text,
+                            marginBottom: '2px'
+                          }}>
+                            {output.displayName}
+                          </div>
+                          <div style={{
+                            fontSize: theme.fontSize.xs,
+                            color: theme.colors.textSecondary
+                          }}>
+                            {output.type} • {output.description}
+                          </div>
+                        </div>
+                        <div style={{
+                          fontSize: theme.fontSize.xs,
+                          color: theme.colors.textSecondary,
+                          fontFamily: 'monospace',
+                          padding: `2px ${theme.spacing.xs}`,
+                          backgroundColor: theme.colors.background,
+                          borderRadius: theme.borderRadius.sm,
+                          border: `1px solid ${theme.colors.border}`
+                        }}>
+                          {output.name}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div style={{
+        padding: theme.spacing.sm,
+        backgroundColor: theme.colors.backgroundPanel,
+        borderTop: `1px solid ${theme.colors.border}`,
+        fontSize: theme.fontSize.xs,
+        color: theme.colors.textSecondary,
+        textAlign: 'center'
+      }}>
+        💡 Drag outputs to parameter fields
+      </div>
+    </div>
+  );
+};
+
 export default OutputPanel;