machinaos 0.0.1

package/client/src/components/SquareNode.tsx

@@ -0,0 +1,797 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { NodeData } from '../types/NodeTypes';
+import { useAppStore } from '../store/useAppStore';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { ANDROID_SERVICE_NODE_TYPES } from '../nodeDefinitions/androidServiceNodes';
+import { ANDROID_DEVICE_NODE_TYPES } from '../nodeDefinitions/androidDeviceNodes';
+import { useWebSocket, useWhatsAppStatus } from '../contexts/WebSocketContext';
+import { useApiKeys } from '../hooks/useApiKeys';
+import { getAIProviderIcon } from './icons/AIProviderIcons';
+import { PlayCircleFilled, ScheduleOutlined } from '@ant-design/icons';
+
+// All Android node types combined
+const ALL_ANDROID_NODE_TYPES = [...ANDROID_SERVICE_NODE_TYPES, ...ANDROID_DEVICE_NODE_TYPES];
+
+// Android service nodes that can connect to Android Toolkit as tools
+const ANDROID_TOOL_CAPABLE_NODES = ANDROID_SERVICE_NODE_TYPES;
+
+// Nodes with 'tool' in their group can connect to AI Agent/Chat Agent tool handles
+const hasToolGroup = (definition: any): boolean => {
+  const groups = definition?.group || [];
+  return groups.includes('tool');
+};
+
+// Google Maps node types
+const GOOGLE_MAPS_NODE_TYPES = ['createMap', 'addLocations', 'showNearbyPlaces'];
+
+// WhatsApp node types
+const WHATSAPP_NODE_TYPES = ['whatsappConnect', 'whatsappSend', 'whatsappReceive', 'whatsappDb'];
+
+// Nodes that should not have output handles (input-only nodes)
+const NO_OUTPUT_NODE_TYPES = ['console'];
+
+// AI Model node types with their provider IDs
+const AI_MODEL_NODE_TYPES: Record<string, string> = {
+  'openaiChatModel': 'openai',
+  'anthropicChatModel': 'anthropic',
+  'geminiChatModel': 'gemini',
+  'openrouterChatModel': 'openrouter',
+  'groqChatModel': 'groq',
+  'cerebrasChatModel': 'cerebras',
+};
+
+const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
+  const theme = useAppTheme();
+  const { setSelectedNode, renamingNodeId, setRenamingNodeId, updateNodeData } = useAppStore();
+  const [hasApiKey, setHasApiKey] = useState(false);
+  const [isConfigured, setIsConfigured] = useState(false);
+  const isDisabled = data?.disabled === true;
+
+  // Inline rename state
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [editLabel, setEditLabel] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Get Android status, node status, and API key status from WebSocket context
+  const { androidStatus, getNodeStatus, getApiKeyStatus } = useWebSocket();
+  const { getStoredApiKey, validateGoogleMapsKey } = useApiKeys();
+  const nodeStatus = getNodeStatus(id);
+  const executionStatus = nodeStatus?.status || 'idle';
+
+  // Check if this is a Google Maps node
+  const isGoogleMapsNode = type ? GOOGLE_MAPS_NODE_TYPES.includes(type) : false;
+  const googleMapsKeyStatus = isGoogleMapsNode ? getApiKeyStatus('google_maps') : undefined;
+
+  // Check if this is an AI model node and get reactive API key status
+  const isAIModelNode = type ? type in AI_MODEL_NODE_TYPES : false;
+  const aiProviderId = type && AI_MODEL_NODE_TYPES[type] ? AI_MODEL_NODE_TYPES[type] : null;
+  const aiKeyStatus = aiProviderId ? getApiKeyStatus(aiProviderId) : undefined;
+
+  const definition = nodeDefinitions[type as keyof typeof nodeDefinitions];
+
+  // Check if this is an Android node
+  const isAndroidNode = type ? ALL_ANDROID_NODE_TYPES.includes(type) : false;
+
+  // Check if this node can be used as a tool (connects to Android Toolkit or AI Agent/Chat Agent tool handle)
+  const isToolCapable = type ? (ANDROID_TOOL_CAPABLE_NODES.includes(type) || hasToolGroup(definition)) : false;
+
+  // Android connection status from WebSocket (real-time updates)
+  // Service nodes need a paired device to execute, not just relay connection
+  const isAndroidConnected = isAndroidNode && androidStatus.paired;
+
+  // Check if this is a WhatsApp node
+  const isWhatsAppNode = type ? WHATSAPP_NODE_TYPES.includes(type) : false;
+
+  // WhatsApp connection status from WebSocket (real-time updates)
+  const whatsappStatus = useWhatsAppStatus();
+
+  // Execution state - waiting is treated identically to executing
+  const isExecuting = executionStatus === 'executing' || executionStatus === 'waiting';
+
+
+  // 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(() => {
+    setRenamingNodeId(id);
+  }, [id, setRenamingNodeId]);
+
+  // Check API key and configuration status
+  useEffect(() => {
+    const checkConfiguration = async () => {
+      try {
+        // Determine provider from node definition credentials
+        let provider = '';
+        const credentials = definition?.credentials?.[0];
+        if (credentials?.name) {
+          // Map credential names to provider keys
+          const credentialToProvider: Record<string, string> = {
+            'googleMapsApi': 'google_maps',
+            'openaiApi': 'openai',
+            'anthropicApi': 'anthropic',
+            'googleAiApi': 'gemini'
+          };
+          provider = credentialToProvider[credentials.name] || '';
+        }
+
+        // Fallback: extract provider from node type if not found in credentials
+        if (!provider) {
+          if (type?.includes('map') || type?.includes('location')) provider = 'google_maps';
+        }
+
+        // Check if API key exists via WebSocket
+        const apiKey = provider ? await getStoredApiKey(provider) : null;
+        setHasApiKey(!!apiKey);
+
+        // Check if service is configured (has required parameters)
+        const hasRequiredParams = data && Object.keys(data).length > 0;
+        setIsConfigured(hasRequiredParams && !!apiKey);
+
+        // For Google Maps nodes, trigger validation via WebSocket
+        if (isGoogleMapsNode && apiKey) {
+          await validateGoogleMapsKey(apiKey);
+        }
+
+        if (!apiKey && provider) {
+          console.warn(`[SquareNode] ${definition?.displayName} ${id}: No API key configured for ${provider}`);
+        }
+      } catch (error) {
+        console.error('Configuration check error:', error);
+        setHasApiKey(false);
+        setIsConfigured(false);
+      }
+    };
+
+    checkConfiguration();
+  }, [data, id, type, definition?.displayName, definition?.credentials, isGoogleMapsNode, getStoredApiKey, validateGoogleMapsKey]);
+
+  // Get settings panel controls from store
+  const { setWhatsAppSettingsOpen, setAndroidSettingsOpen } = useAppStore();
+
+  const handleParametersClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // For whatsappConnect, open the WhatsApp settings panel instead
+    if (type === 'whatsappConnect') {
+      setWhatsAppSettingsOpen(true);
+    } else if (type === 'androidDeviceSetup') {
+      // For androidDeviceSetup, open the Android settings panel
+      setAndroidSettingsOpen(true);
+    } else {
+      setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
+    }
+  };
+
+  // Get status indicator color based on execution state
+  const getStatusIndicatorColor = () => {
+    // For executing or waiting state, show blue/cyan
+    if (executionStatus === 'executing' || executionStatus === 'waiting') {
+      return theme.dracula.cyan;
+    }
+    if (executionStatus === 'success') {
+      return theme.dracula.green;
+    }
+    if (executionStatus === 'error') {
+      return theme.dracula.red;
+    }
+
+    // Idle state - use Android or configuration status
+    if (isAndroidNode) {
+      return isAndroidConnected ? theme.dracula.green : theme.dracula.red;
+    }
+
+    // WhatsApp nodes - use WebSocket connection status
+    if (isWhatsAppNode) {
+      if (whatsappStatus.connected) return theme.dracula.green;
+      if (whatsappStatus.pairing) return theme.dracula.orange;
+      return theme.dracula.red;
+    }
+
+    // Google Maps nodes - use WebSocket API key validation status
+    if (isGoogleMapsNode && googleMapsKeyStatus) {
+      return googleMapsKeyStatus.valid ? theme.dracula.green : theme.dracula.red;
+    }
+
+    // AI Model nodes - use reactive WebSocket API key status
+    if (isAIModelNode) {
+      if (aiKeyStatus?.valid && aiKeyStatus?.hasKey) return theme.dracula.green;
+      if (aiKeyStatus?.hasKey) return theme.dracula.orange;
+      return theme.dracula.red;
+    }
+
+    return isConfigured ? theme.dracula.green : hasApiKey ? theme.dracula.orange : theme.dracula.red;
+  };
+
+  const getStatusTitle = () => {
+    switch (executionStatus) {
+      case 'executing':
+        return 'Executing...';
+      case 'waiting':
+        return nodeStatus?.message || 'Waiting for event...';
+      case 'success':
+        return 'Execution successful';
+      case 'error':
+        return `Error: ${nodeStatus?.data?.error || 'Unknown error'}`;
+      default:
+        if (isAndroidNode) {
+          return isAndroidConnected ? 'Android device connected' : 'Android device not connected';
+        }
+        // WhatsApp nodes - use WebSocket connection status
+        if (isWhatsAppNode) {
+          if (whatsappStatus.connected) return 'WhatsApp connected';
+          if (whatsappStatus.pairing) return 'Pairing in progress...';
+          if (whatsappStatus.running) return 'WhatsApp service running';
+          return 'WhatsApp not connected';
+        }
+        // Google Maps nodes - use WebSocket API key validation status
+        if (isGoogleMapsNode && googleMapsKeyStatus) {
+          return googleMapsKeyStatus.valid
+            ? 'Google Maps API key validated'
+            : `API key invalid: ${googleMapsKeyStatus.message || 'Validation failed'}`;
+        }
+        // AI Model nodes - use reactive WebSocket API key status
+        if (isAIModelNode) {
+          if (aiKeyStatus?.valid && aiKeyStatus?.hasKey) {
+            return `${aiProviderId?.charAt(0).toUpperCase()}${aiProviderId?.slice(1)} API key validated`;
+          }
+          if (aiKeyStatus?.hasKey) {
+            return 'API key found, validation pending';
+          }
+          return 'API key required - configure in Credentials';
+        }
+        return isConfigured
+          ? 'Service configured and ready'
+          : hasApiKey
+            ? 'API key found, service needs configuration'
+            : 'API key required';
+    }
+  };
+
+  // Common icon name to emoji mapping for fallback
+  const iconNameToEmoji: Record<string, string> = {
+    brain: '🧠',
+    memory: '🧠',
+    robot: '🤖',
+    ai: '🤖',
+    agent: '🤖',
+    chat: '💬',
+    message: '💬',
+    whatsapp: '📱',
+    phone: '📱',
+    email: '📧',
+    mail: '📧',
+    webhook: '🔗',
+    http: '🌐',
+    api: '🔌',
+    database: '🗄️',
+    file: '📄',
+    folder: '📁',
+    code: '💻',
+    python: '🐍',
+    javascript: '📜',
+    settings: '⚙️',
+    config: '⚙️',
+    clock: '⏰',
+    schedule: '📅',
+    location: '📍',
+    map: '🗺️',
+    search: '🔍',
+    filter: '🔍',
+    play: '▶️',
+    start: '▶️',
+    stop: '⏹️',
+    pause: '⏸️',
+    send: '📤',
+    receive: '📥',
+    upload: '⬆️',
+    download: '⬇️',
+    sync: '🔄',
+    refresh: '🔄',
+    warning: '⚠️',
+    error: '❌',
+    success: '✅',
+    info: '💡',
+    help: '❓',
+    user: '👤',
+    users: '👥',
+    key: '🔑',
+    lock: '🔒',
+    unlock: '🔓',
+    star: '⭐',
+    heart: '❤️',
+    thunder: '⚡',
+    lightning: '⚡',
+    fire: '🔥',
+    water: '💧',
+    cloud: '☁️',
+    sun: '☀️',
+    moon: '🌙',
+    camera: '📷',
+    image: '🖼️',
+    video: '🎬',
+    audio: '🔊',
+    music: '🎵',
+    bell: '🔔',
+    notification: '🔔',
+    link: '🔗',
+    chain: '🔗',
+    tool: '🔧',
+    wrench: '🔧',
+    hammer: '🔨',
+    gear: '⚙️',
+    cog: '⚙️',
+    bug: '🐛',
+    debug: '🐛',
+    test: '🧪',
+    experiment: '🧪',
+    lab: '🧪',
+    book: '📖',
+    docs: '📚',
+    note: '📝',
+    edit: '✏️',
+    pencil: '✏️',
+    trash: '🗑️',
+    delete: '🗑️',
+    copy: '📋',
+    paste: '📋',
+    cut: '✂️',
+    scissors: '✂️',
+    tag: '🏷️',
+    label: '🏷️',
+    flag: '🚩',
+    bookmark: '🔖',
+    pin: '📌',
+    target: '🎯',
+    goal: '🎯',
+    trophy: '🏆',
+    medal: '🏅',
+    gift: '🎁',
+    package: '📦',
+    box: '📦',
+    truck: '🚚',
+    shipping: '🚚',
+    cart: '🛒',
+    shop: '🛍️',
+    store: '🏪',
+    money: '💰',
+    dollar: '💵',
+    credit: '💳',
+    payment: '💳',
+    chart: '📊',
+    graph: '📈',
+    analytics: '📊',
+    stats: '📊',
+    dashboard: '📊',
+    terminal: '💻',
+    console: '💻',
+    server: '🖥️',
+    computer: '💻',
+    mobile: '📱',
+    tablet: '📱',
+    battery: '🔋',
+    wifi: '📶',
+    bluetooth: '📶',
+    antenna: '📡',
+    satellite: '🛰️',
+    rocket: '🚀',
+    plane: '✈️',
+    car: '🚗',
+    bike: '🚲',
+    train: '🚂',
+    ship: '🚢',
+    home: '🏠',
+    house: '🏠',
+    building: '🏢',
+    office: '🏢',
+    factory: '🏭',
+    hospital: '🏥',
+    school: '🏫',
+    university: '🎓',
+    graduation: '🎓',
+    world: '🌍',
+    globe: '🌐',
+    earth: '🌍',
+    android: '🤖',
+    apple: '🍎',
+    windows: '🪟',
+    linux: '🐧',
+  };
+
+  // Check if string is likely an emoji (contains emoji characters)
+  const isEmoji = (str: string): boolean => {
+    // Emoji regex pattern - matches most common emojis
+    const emojiRegex = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F600}-\u{1F64F}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2300}-\u{23FF}]|[\u{2B50}]|[\u{231A}-\u{231B}]|[\u{25AA}-\u{25AB}]|[\u{25B6}]|[\u{25C0}]|[\u{25FB}-\u{25FE}]|[\u{2614}-\u{2615}]|[\u{2648}-\u{2653}]|[\u{267F}]|[\u{2693}]|[\u{26A1}]|[\u{26AA}-\u{26AB}]|[\u{26BD}-\u{26BE}]|[\u{26C4}-\u{26C5}]|[\u{26CE}]|[\u{26D4}]|[\u{26EA}]|[\u{26F2}-\u{26F3}]|[\u{26F5}]|[\u{26FA}]|[\u{26FD}]|[\u{2702}]|[\u{2705}]|[\u{2708}-\u{270D}]|[\u{270F}]|[\u{2712}]|[\u{2714}]|[\u{2716}]|[\u{271D}]|[\u{2721}]|[\u{2728}]|[\u{2733}-\u{2734}]|[\u{2744}]|[\u{2747}]|[\u{274C}]|[\u{274E}]|[\u{2753}-\u{2755}]|[\u{2757}]|[\u{2763}-\u{2764}]|[\u{2795}-\u{2797}]|[\u{27A1}]|[\u{27B0}]|[\u{27BF}]|[\u{E000}-\u{F8FF}]/u;
+    return emojiRegex.test(str);
+  };
+
+  // Helper to render icon (handles URLs, emojis, and icon names)
+  const renderIcon = (icon: string) => {
+    // Handle image URLs
+    if (icon.startsWith('http') || icon.startsWith('data:') || icon.startsWith('/')) {
+      return (
+        <img
+          src={icon}
+          alt="icon"
+          style={{
+            width: '28px',
+            height: '28px',
+            objectFit: 'contain',
+            borderRadius: '4px'
+          }}
+        />
+      );
+    }
+
+    // If it's already an emoji, return it directly
+    if (isEmoji(icon)) {
+      return icon;
+    }
+
+    // Check if it's a known icon name and convert to emoji
+    const lowerIcon = icon.toLowerCase().trim();
+    if (iconNameToEmoji[lowerIcon]) {
+      return iconNameToEmoji[lowerIcon];
+    }
+
+    // Fallback: return a generic icon instead of plain text
+    console.warn(`[SquareNode] Unknown icon name "${icon}" - using fallback. Add emoji directly or update iconNameToEmoji mapping.`);
+    return '📦';
+  };
+
+  // Get service icon for display
+  const getServiceIcon = () => {
+    // Priority 0: Start node - use PlayCircleFilled icon with cyan color (neutral "begin" color)
+    if (type === 'start') {
+      return <PlayCircleFilled style={{ fontSize: 28, color: theme.dracula.cyan }} />;
+    }
+
+    // Cron Scheduler node - use ScheduleOutlined with node definition color
+    if (type === 'cronScheduler') {
+      return <ScheduleOutlined style={{ fontSize: 28, color: definition?.defaults?.color || nodeColor }} />;
+    }
+
+    // Priority 1: Check if this is an AI model node - use official provider icons
+    if (type && AI_MODEL_NODE_TYPES[type]) {
+      const providerId = AI_MODEL_NODE_TYPES[type];
+      const IconComponent = getAIProviderIcon(providerId);
+      if (IconComponent) {
+        return <IconComponent size={28} />;
+      }
+    }
+
+    // Priority 2: Custom icon set on the node instance (via data.customIcon)
+    if (data?.customIcon && typeof data.customIcon === 'string') {
+      return renderIcon(data.customIcon);
+    }
+
+    // Priority 3: Use the icon from the node definition if available
+    if (definition?.icon && typeof definition.icon === 'string') {
+      return renderIcon(definition.icon);
+    }
+
+    // Fallback logic based on node type
+    if (type?.includes('createMap')) return '🗺️';
+    if (type?.includes('addLocations')) return '🌍';
+    if (type?.includes('showNearbyPlaces')) return '🔍';
+
+    return '📍';
+  };
+
+  // Get the node color from definition or use default
+  const nodeColor = definition?.defaults?.color || '#1A73E8';
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: '11px',
+        cursor: 'pointer',
+      }}
+    >
+      {/* Main Square Node */}
+      <div
+        style={{
+          position: 'relative',
+          width: theme.nodeSize.square,
+          height: theme.nodeSize.square,
+          borderRadius: theme.borderRadius.lg,
+          background: theme.isDarkMode
+            ? `linear-gradient(135deg, ${nodeColor}25 0%, ${theme.colors.background} 100%)`
+            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}08 100%)`,
+          border: `2px solid ${isExecuting
+            ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
+            : selected
+              ? theme.colors.focus
+              : theme.isDarkMode ? nodeColor + '80' : `${nodeColor}40`}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.colors.text,
+          fontSize: theme.nodeSize.squareIcon,
+          fontWeight: '600',
+          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 4px 12px ${theme.colors.focusRing}, 0 0 0 1px ${theme.colors.focusRing}`
+              : theme.isDarkMode
+                ? `0 2px 8px ${nodeColor}40`
+                : `0 2px 8px ${nodeColor}20, 0 4px 12px rgba(0,0,0,0.06)`,
+          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
+          opacity: isDisabled ? 0.5 : 1,
+        }}
+      >
+        {/* 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: 35,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}>
+            <span style={{ fontSize: '20px', opacity: 0.8, color: theme.colors.textSecondary }}>||</span>
+          </div>
+        )}
+
+
+        {/* Service Icon */}
+        {getServiceIcon()}
+
+        {/* Parameters Button */}
+        <button
+          onClick={handleParametersClick}
+          style={{
+            position: 'absolute',
+            top: '-8px',
+            right: '-8px',
+            width: theme.nodeSize.paramButton,
+            height: theme.nodeSize.paramButton,
+            borderRadius: theme.borderRadius.sm,
+            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
+            border: `1px solid ${theme.isDarkMode ? theme.colors.border : '#d1d5db'}`,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: theme.fontSize.xs,
+            color: theme.colors.textSecondary,
+            fontWeight: '400',
+            transition: theme.transitions.fast,
+            zIndex: 30,
+            boxShadow: theme.isDarkMode
+              ? `0 1px 3px ${theme.colors.shadow}`
+              : '0 1px 4px rgba(0,0,0,0.1)'
+          }}
+          title="Edit Service Parameters"
+        >
+          ⚙️
+        </button>
+
+        {/* Configuration/Execution Status Indicator */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-4px',
+            left: '-4px',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            borderRadius: '50%',
+            backgroundColor: getStatusIndicatorColor(),
+            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+            boxShadow: isExecuting
+              ? theme.isDarkMode
+                ? `0 0 6px ${theme.dracula.cyan}80`
+                : '0 0 4px rgba(37, 99, 235, 0.5)'
+              : theme.isDarkMode
+                ? `0 1px 2px ${theme.colors.shadow}`
+                : '0 1px 3px rgba(0,0,0,0.15)',
+            zIndex: 30,
+            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
+          }}
+          title={getStatusTitle()}
+        />
+
+        {/* Square Input Handle */}
+        <Handle
+          id="input-main"
+          type="target"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          style={{
+            position: 'absolute',
+            left: '-6px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: theme.nodeSize.handle,
+            height: theme.nodeSize.handle,
+            backgroundColor: theme.isDarkMode ? theme.colors.background : '#ffffff',
+            border: `2px solid ${theme.isDarkMode ? theme.colors.textSecondary : '#6b7280'}`,
+            borderRadius: '50%',
+            zIndex: 20
+          }}
+          title="Service Input"
+        />
+
+        {/* Square Output Handle - hidden for input-only nodes like console */}
+        {!NO_OUTPUT_NODE_TYPES.includes(type || '') && (
+          <Handle
+            id="output-main"
+            type="source"
+            position={Position.Right}
+            isConnectable={isConnectable}
+            style={{
+              position: 'absolute',
+              right: '-6px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              width: theme.nodeSize.handle,
+              height: theme.nodeSize.handle,
+              backgroundColor: isConfigured ? nodeColor : theme.colors.textSecondary,
+              border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+              borderRadius: '50%',
+              zIndex: 20
+            }}
+            title="Service Output"
+          />
+        )}
+
+        {/* Top Tool Output Handle - for nodes that can connect to AI Agent/Chat Agent tool handle */}
+        {isToolCapable && (
+          <Handle
+            id="output-tool"
+            type="source"
+            position={Position.Top}
+            isConnectable={isConnectable}
+            style={{
+              position: 'absolute',
+              top: '-6px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: theme.nodeSize.handle,
+              height: theme.nodeSize.handle,
+              backgroundColor: ANDROID_TOOL_CAPABLE_NODES.includes(type || '') ? '#3DDC84' : nodeColor, // Android green for Android nodes, node color for others
+              border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+              borderRadius: '50%',
+              zIndex: 20
+            }}
+            title={ANDROID_TOOL_CAPABLE_NODES.includes(type || '') ? 'Connect to Android Toolkit' : 'Connect to AI Agent/Chat Agent tool handle'}
+          />
+        )}
+
+        {/* Output Data Indicator - shows when node has execution output */}
+        {executionStatus === 'success' && nodeStatus?.data && (
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '-4px',
+              right: '-4px',
+              width: theme.nodeSize.outputBadge,
+              height: theme.nodeSize.outputBadge,
+              borderRadius: theme.borderRadius.sm,
+              backgroundColor: theme.dracula.green,
+              border: `1px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: theme.fontSize.xs,
+              color: 'white',
+              fontWeight: 'bold',
+              zIndex: 30,
+              boxShadow: theme.isDarkMode
+                ? '0 1px 3px rgba(0,0,0,0.2)'
+                : '0 1px 3px rgba(0,0,0,0.15)',
+            }}
+            title="Output data available - click node to view"
+          >
+            <span style={{ lineHeight: 1 }}>D</span>
+          </div>
+        )}
+      </div>
+
+      {/* Service Name Below Square */}
+      {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={{
+            marginTop: theme.spacing.sm,
+            width: '100%',
+            maxWidth: '120px',
+            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',
+            textAlign: 'center',
+          }}
+        />
+      ) : (
+        <div
+          onDoubleClick={handleLabelDoubleClick}
+          style={{
+            marginTop: theme.spacing.sm,
+            fontSize: theme.fontSize.sm,
+            fontWeight: theme.fontWeight.medium,
+            color: theme.colors.text,
+            lineHeight: '1.2',
+            textAlign: 'center',
+            maxWidth: '120px',
+            cursor: 'text',
+          }}
+          title="Double-click to rename"
+        >
+          {data?.label || definition?.displayName}
+        </div>
+      )}
+
+    </div>
+  );
+};
+
+export default SquareNode;