machinaos 0.0.1 → 0.0.7

package/client/src/components/ParameterRenderer.tsx

@@ -1,1874 +1,1874 @@
-import React, { useState, useEffect } from 'react';
-import { NodeParameter } from '../types/NodeTypes';
-import { INodeProperties, INodePropertyOption } from '../types/INodeProperties';
-import APIKeyValidator from './APIKeyValidator';
-import CodeEditor from './ui/CodeEditor';
-import DynamicParameterService from '../services/dynamicParameterService';
-import { useAppStore } from '../store/useAppStore';
-import { ANDROID_SERVICE_NODE_TYPES } from '../nodeDefinitions/androidServiceNodes';
-import { nodeDefinitions } from '../nodeDefinitions';
-import { useAppTheme } from '../hooks/useAppTheme';
-import { API_CONFIG } from '../config/api';
-import { useWebSocket } from '../contexts/WebSocketContext';
-import { useApiKeys } from '../hooks/useApiKeys';
-
-// Map node types to provider keys for AI model nodes
-const NODE_TYPE_TO_PROVIDER: Record<string, string> = {
-  'openaiChatModel': 'openai',
-  'anthropicChatModel': 'anthropic',
-  'claudeChatModel': 'anthropic',
-  'googleChatModel': 'gemini',
-  'geminiChatModel': 'gemini',
-  'azureChatModel': 'azure_openai',
-  'cohereChatModel': 'cohere',
-  'ollamaChatModel': 'ollama',
-  'mistralChatModel': 'mistral',
-  'openrouterChatModel': 'openrouter',
-  'groqChatModel': 'groq',
-  'cerebrasChatModel': 'cerebras'
-};
-
-// Collection Renderer - n8n official style
-const CollectionRenderer: React.FC<{
-  parameter: any;
-  value: any;
-  onChange: (value: any) => void;
-  allParameters?: Record<string, any>;
-  theme: ReturnType<typeof useAppTheme>;
-}> = ({ parameter, value, onChange, allParameters, theme }) => {
-  const [showAddOption, setShowAddOption] = useState(false);
-  const currentValue = value || {};
-  const addedOptions = Object.keys(currentValue).filter(key => currentValue[key] !== undefined);
-  const availableOptions = parameter.options?.filter((opt: any) => !addedOptions.includes(opt.name)) || [];
-
-  const addOption = (optionName: string) => {
-    const option = parameter.options?.find((opt: any) => opt.name === optionName);
-    if (option) {
-      onChange({
-        ...currentValue,
-        [optionName]: option.default
-      });
-      setShowAddOption(false);
-    }
-  };
-
-  const removeOption = (optionName: string) => {
-    const newValue = { ...currentValue };
-    delete newValue[optionName];
-    onChange(newValue);
-  };
-
-  const updateOption = (optionName: string, optionValue: any) => {
-    onChange({
-      ...currentValue,
-      [optionName]: optionValue
-    });
-  };
-
-  return (
-    <div>
-      {addedOptions.length === 0 && (
-        <div style={{
-          fontSize: '14px',
-          color: theme.colors.textSecondary,
-          marginBottom: '12px',
-          padding: '8px 0'
-        }}>
-          No properties
-        </div>
-      )}
-
-      {addedOptions.map((optionName) => {
-        const option = parameter.options?.find((opt: any) => opt.name === optionName);
-        if (!option) return null;
-
-        return (
-          <div key={optionName} style={{
-            marginBottom: '16px',
-            padding: '12px',
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: '4px',
-            backgroundColor: theme.colors.backgroundAlt,
-            position: 'relative'
-          }}>
-            <button
-              onClick={() => removeOption(optionName)}
-              style={{
-                position: 'absolute',
-                top: '6px',
-                right: '6px',
-                background: 'none',
-                border: 'none',
-                color: theme.colors.textSecondary,
-                cursor: 'pointer',
-                fontSize: '14px',
-                padding: '2px 4px',
-                borderRadius: '2px'
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.border}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-              title="Remove"
-            >
-              ✕
-            </button>
-            <ParameterRenderer
-              parameter={option}
-              value={currentValue[optionName]}
-              onChange={(newValue) => updateOption(optionName, newValue)}
-              allParameters={allParameters}
-            />
-          </div>
-        );
-      })}
-
-      {availableOptions.length > 0 && (
-        <div style={{ position: 'relative' }}>
-          <button
-            onClick={() => setShowAddOption(!showAddOption)}
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: '4px',
-              backgroundColor: theme.colors.backgroundAlt,
-              color: theme.colors.textSecondary,
-              cursor: 'pointer',
-              fontSize: '14px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              transition: 'all 0.2s ease'
-            }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.borderHover}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
-          >
-            {parameter.placeholder || 'Add Option'}
-            <span style={{
-              transform: showAddOption ? 'rotate(180deg)' : 'rotate(0deg)',
-              transition: 'transform 0.2s ease'
-            }}>
-              ▼
-            </span>
-          </button>
-
-          {showAddOption && (
-            <div style={{
-              position: 'absolute',
-              top: '100%',
-              left: 0,
-              right: 0,
-              zIndex: 1000,
-              backgroundColor: theme.colors.background,
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: '4px',
-              marginTop: '2px',
-              boxShadow: `0 4px 6px -1px ${theme.colors.shadow}`,
-              maxHeight: '200px',
-              overflowY: 'auto'
-            }}>
-              {availableOptions.map((option: any, index: number) => (
-                <button
-                  key={option.name}
-                  onClick={() => addOption(option.name)}
-                  style={{
-                    width: '100%',
-                    padding: '10px 12px',
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    color: theme.colors.text,
-                    cursor: 'pointer',
-                    fontSize: '14px',
-                    textAlign: 'left',
-                    borderBottom: index < availableOptions.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
-                  }}
-                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
-                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-                >
-                  <div style={{ fontWeight: '500' }}>
-                    {option.displayName}
-                  </div>
-                  {option.description && (
-                    <div style={{
-                      fontSize: '12px',
-                      color: theme.colors.textSecondary,
-                      marginTop: '2px'
-                    }}>
-                      {option.description}
-                    </div>
-                  )}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-// Group ID Selector - with Load Groups button and dropdown
-const GroupIdSelector: React.FC<{
-  value: string;
-  onChange: (value: string) => void;
-  onNameChange?: (name: string) => void;
-  storedName?: string;
-  placeholder?: string;
-  theme: ReturnType<typeof useAppTheme>;
-  isDragOver: boolean;
-  onDragOver: (e: React.DragEvent) => void;
-  onDragLeave: (e: React.DragEvent) => void;
-  onDrop: (e: React.DragEvent) => void;
-}> = ({ value, onChange, onNameChange, storedName, placeholder, theme, isDragOver, onDragOver, onDragLeave, onDrop }) => {
-  const [groups, setGroups] = useState<Array<{ jid: string; name: string; topic?: string; size?: number; is_community?: boolean }>>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  // Use stored name if available, otherwise local state
-  const [localGroupName, setLocalGroupName] = useState<string | null>(null);
-  const selectedGroupName = storedName || localGroupName;
-  const { getWhatsAppGroups } = useWebSocket();
-
-  // Sync local state with stored name
-  useEffect(() => {
-    if (storedName) {
-      setLocalGroupName(storedName);
-    }
-  }, [storedName]);
-
-  const handleLoadGroups = async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await getWhatsAppGroups();
-      console.log('[GroupIdSelector] Raw groups from API:', result.groups?.map(g => ({ name: g.name, jid: g.jid, is_community: g.is_community })));
-      if (result.success && result.groups.length > 0) {
-        // Filter out communities - they don't have regular chat history
-        const regularGroups = result.groups.filter(g => !g.is_community);
-        console.log('[GroupIdSelector] After filtering communities:', regularGroups.length, 'groups remaining');
-        if (regularGroups.length === 0) {
-          setError('Only communities found (no chat history available)');
-          return;
-        }
-        setGroups(regularGroups);
-        setShowDropdown(true);
-        // If we already have a value, try to find its name and update storage
-        if (value) {
-          const matchingGroup = regularGroups.find(g => g.jid === value);
-          if (matchingGroup && matchingGroup.name !== storedName) {
-            setLocalGroupName(matchingGroup.name);
-            onNameChange?.(matchingGroup.name);
-          }
-        }
-      } else if (result.error) {
-        setError(result.error);
-      } else {
-        setError('No groups found');
-      }
-    } catch (err: any) {
-      setError(err.message || 'Failed to load groups');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSelectGroup = (group: { jid: string; name: string }) => {
-    onChange(group.jid);
-    setLocalGroupName(group.name);
-    onNameChange?.(group.name);
-    setShowDropdown(false);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
-    // Clear group name when user types manually
-    setLocalGroupName(null);
-    onNameChange?.('');
-  };
-
-  // Display value: show group name if selected, otherwise show JID
-  const displayValue = selectedGroupName || value;
-  const isGroupSelected = selectedGroupName !== null && value;
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-        <input
-          type="text"
-          value={displayValue}
-          onChange={handleInputChange}
-          placeholder={placeholder || '123456789@g.us'}
-          onDragOver={onDragOver}
-          onDragLeave={onDragLeave}
-          onDrop={onDrop}
-          style={{
-            flex: 1,
-            padding: '8px 12px',
-            border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
-            borderRadius: '6px',
-            fontSize: '14px',
-            backgroundColor: isGroupSelected ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
-            color: isGroupSelected ? theme.colors.success : (value && value.includes('{{') ? theme.colors.templateVariable : theme.colors.text),
-            outline: 'none',
-            transition: 'all 0.2s ease',
-            fontFamily: value && value.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
-            fontWeight: isGroupSelected ? '500' : 'normal'
-          }}
-          onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-          onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-        />
-        <button
-          onClick={handleLoadGroups}
-          disabled={isLoading}
-          style={{
-            padding: '8px 12px',
-            border: `1px solid ${isLoading ? theme.colors.border : `${theme.colors.focus}40`}`,
-            borderRadius: '6px',
-            backgroundColor: isLoading ? 'transparent' : `${theme.colors.focus}18`,
-            color: isLoading ? theme.colors.textMuted : theme.colors.focus,
-            cursor: isLoading ? 'wait' : 'pointer',
-            fontSize: '13px',
-            fontWeight: 600,
-            transition: 'all 0.2s ease',
-            whiteSpace: 'nowrap',
-            opacity: isLoading ? 0.7 : 1
-          }}
-          onMouseEnter={(e) => {
-            if (!isLoading) {
-              e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
-            }
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = isLoading ? 'transparent' : `${theme.colors.focus}18`;
-          }}
-          title="Load WhatsApp groups"
-        >
-          {isLoading ? 'Loading...' : 'Load'}
-        </button>
-      </div>
-      {/* Show JID below when group name is displayed */}
-      {isGroupSelected && (
-        <div style={{
-          fontSize: '11px',
-          color: theme.colors.textSecondary,
-          marginTop: '4px',
-          fontFamily: 'monospace'
-        }}>
-          {value}
-        </div>
-      )}
-
-      {error && (
-        <div style={{
-          fontSize: '12px',
-          color: theme.colors.error,
-          marginTop: '4px'
-        }}>
-          {error}
-        </div>
-      )}
-
-      {showDropdown && groups.length > 0 && (
-        <div style={{
-          position: 'absolute',
-          top: '100%',
-          left: 0,
-          right: 0,
-          marginTop: '4px',
-          backgroundColor: theme.colors.background,
-          border: `1px solid ${theme.colors.border}`,
-          borderRadius: '6px',
-          boxShadow: `0 4px 12px ${theme.colors.shadow}`,
-          maxHeight: '200px',
-          overflowY: 'auto',
-          zIndex: 1000
-        }}>
-          {groups.map((group, index) => (
-            <button
-              key={group.jid}
-              onClick={() => handleSelectGroup(group)}
-              style={{
-                width: '100%',
-                padding: '10px 12px',
-                border: 'none',
-                backgroundColor: 'transparent',
-                color: theme.colors.text,
-                cursor: 'pointer',
-                fontSize: '13px',
-                textAlign: 'left',
-                borderBottom: index < groups.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-            >
-              <div style={{ fontWeight: '500' }}>{group.name}</div>
-              <div style={{
-                fontSize: '11px',
-                color: theme.colors.textSecondary,
-                marginTop: '2px',
-                fontFamily: 'monospace'
-              }}>
-                {group.jid}
-                {group.size && <span style={{ marginLeft: '8px' }}>({group.size} members)</span>}
-              </div>
-            </button>
-          ))}
-          <button
-            onClick={() => setShowDropdown(false)}
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: 'none',
-              borderTop: `1px solid ${theme.colors.border}`,
-              backgroundColor: theme.colors.backgroundAlt,
-              color: theme.colors.textSecondary,
-              cursor: 'pointer',
-              fontSize: '12px',
-              textAlign: 'center'
-            }}
-            onMouseEnter={(e) => e.currentTarget.style.color = theme.colors.text}
-            onMouseLeave={(e) => e.currentTarget.style.color = theme.colors.textSecondary}
-          >
-            Close
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// Sender Number Selector - with Load Members button and dropdown (loads from selected group)
-const SenderNumberSelector: React.FC<{
-  value: string;
-  onChange: (value: string) => void;
-  onNameChange?: (name: string) => void;
-  storedName?: string;
-  placeholder?: string;
-  theme: ReturnType<typeof useAppTheme>;
-  isDragOver: boolean;
-  onDragOver: (e: React.DragEvent) => void;
-  onDragLeave: (e: React.DragEvent) => void;
-  onDrop: (e: React.DragEvent) => void;
-  groupId: string; // The selected group to load members from
-}> = ({ value, onChange, onNameChange, storedName, placeholder, theme, isDragOver, onDragOver, onDragLeave, onDrop, groupId }) => {
-  const [members, setMembers] = useState<Array<{ phone: string; name: string; jid: string; is_admin?: boolean }>>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  // Use stored name if available, otherwise local state
-  const [localMemberName, setLocalMemberName] = useState<string | null>(null);
-  const selectedMemberName = storedName || localMemberName;
-  const { getWhatsAppGroupInfo } = useWebSocket();
-
-  // Sync local state with stored name
-  useEffect(() => {
-    if (storedName) {
-      setLocalMemberName(storedName);
-    }
-  }, [storedName]);
-
-  const handleLoadMembers = async () => {
-    if (!groupId) {
-      setError('Select a group first');
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await getWhatsAppGroupInfo(groupId);
-      if (result.success && result.participants && result.participants.length > 0) {
-        setMembers(result.participants);
-        setShowDropdown(true);
-        // If we already have a value, try to find its name and update storage
-        if (value) {
-          const matchingMember = result.participants.find((m: any) => m.phone === value);
-          if (matchingMember) {
-            const name = matchingMember.name || matchingMember.phone;
-            if (name !== storedName) {
-              setLocalMemberName(name);
-              onNameChange?.(name);
-            }
-          }
-        }
-      } else if (result.error) {
-        setError(result.error);
-      } else {
-        setError('No members found');
-      }
-    } catch (err: any) {
-      setError(err.message || 'Failed to load members');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSelectMember = (member: { phone: string; name: string }) => {
-    const name = member.name || member.phone;
-    onChange(member.phone);
-    setLocalMemberName(name);
-    onNameChange?.(name);
-    setShowDropdown(false);
-  };
-
-  const handleClearSelection = () => {
-    onChange('');
-    setLocalMemberName(null);
-    onNameChange?.('');
-    setShowDropdown(false);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
-    // Clear member name when user types manually
-    setLocalMemberName(null);
-    onNameChange?.('');
-  };
-
-  // Display value: show member name if selected, otherwise show phone
-  const displayValue = selectedMemberName || value;
-  const isMemberSelected = selectedMemberName !== null && value;
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-        <input
-          type="text"
-          value={displayValue}
-          onChange={handleInputChange}
-          placeholder={placeholder || 'All members (leave empty)'}
-          onDragOver={onDragOver}
-          onDragLeave={onDragLeave}
-          onDrop={onDrop}
-          style={{
-            flex: 1,
-            padding: '8px 12px',
-            border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
-            borderRadius: '6px',
-            fontSize: '14px',
-            backgroundColor: isMemberSelected ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
-            color: isMemberSelected ? theme.colors.success : (value && value.includes('{{') ? theme.colors.templateVariable : theme.colors.text),
-            outline: 'none',
-            transition: 'all 0.2s ease',
-            fontFamily: value && value.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
-            fontWeight: isMemberSelected ? '500' : 'normal'
-          }}
-          onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-          onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-        />
-        <button
-          onClick={handleLoadMembers}
-          disabled={isLoading || !groupId}
-          style={{
-            padding: '8px 12px',
-            border: `1px solid ${(isLoading || !groupId) ? theme.colors.border : `${theme.colors.focus}40`}`,
-            borderRadius: '6px',
-            backgroundColor: (isLoading || !groupId) ? 'transparent' : `${theme.colors.focus}18`,
-            color: (isLoading || !groupId) ? theme.colors.textMuted : theme.colors.focus,
-            cursor: (isLoading || !groupId) ? 'not-allowed' : 'pointer',
-            fontSize: '13px',
-            fontWeight: 600,
-            transition: 'all 0.2s ease',
-            whiteSpace: 'nowrap',
-            opacity: (isLoading || !groupId) ? 0.7 : 1
-          }}
-          onMouseEnter={(e) => {
-            if (!isLoading && groupId) {
-              e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
-            }
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = (isLoading || !groupId) ? 'transparent' : `${theme.colors.focus}18`;
-          }}
-          title={groupId ? "Load group members" : "Select a group first"}
-        >
-          {isLoading ? 'Loading...' : 'Load'}
-        </button>
-      </div>
-      {/* Show phone below when member name is displayed */}
-      {isMemberSelected && (
-        <div style={{
-          fontSize: '11px',
-          color: theme.colors.textSecondary,
-          marginTop: '4px',
-          fontFamily: 'monospace'
-        }}>
-          {value}
-        </div>
-      )}
-
-      {error && (
-        <div style={{
-          fontSize: '12px',
-          color: theme.colors.error,
-          marginTop: '4px'
-        }}>
-          {error}
-        </div>
-      )}
-
-      {showDropdown && members.length > 0 && (
-        <div style={{
-          position: 'absolute',
-          top: '100%',
-          left: 0,
-          right: 0,
-          marginTop: '4px',
-          backgroundColor: theme.colors.background,
-          border: `1px solid ${theme.colors.border}`,
-          borderRadius: '6px',
-          boxShadow: `0 4px 12px ${theme.colors.shadow}`,
-          maxHeight: '250px',
-          overflowY: 'auto',
-          zIndex: 1000
-        }}>
-          {/* All Members option */}
-          <button
-            onClick={handleClearSelection}
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              border: 'none',
-              backgroundColor: !value ? theme.colors.backgroundAlt : 'transparent',
-              color: theme.colors.text,
-              cursor: 'pointer',
-              fontSize: '13px',
-              textAlign: 'left',
-              borderBottom: `1px solid ${theme.colors.border}`
-            }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = !value ? theme.colors.backgroundAlt : 'transparent'}
-          >
-            <div style={{ fontWeight: '500', color: theme.colors.textSecondary }}>All Members</div>
-            <div style={{ fontSize: '11px', color: theme.colors.textMuted, marginTop: '2px' }}>
-              Receive from anyone in group
-            </div>
-          </button>
-          {members.map((member, index) => (
-            <button
-              key={member.jid || member.phone}
-              onClick={() => handleSelectMember(member)}
-              style={{
-                width: '100%',
-                padding: '10px 12px',
-                border: 'none',
-                backgroundColor: value === member.phone ? theme.colors.backgroundAlt : 'transparent',
-                color: theme.colors.text,
-                cursor: 'pointer',
-                fontSize: '13px',
-                textAlign: 'left',
-                borderBottom: index < members.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = value === member.phone ? theme.colors.backgroundAlt : 'transparent'}
-            >
-              <div style={{ fontWeight: '500' }}>
-                {member.name || member.phone}
-                {member.is_admin && <span style={{ marginLeft: '8px', fontSize: '10px', color: theme.colors.warning }}>(Admin)</span>}
-              </div>
-              <div style={{
-                fontSize: '11px',
-                color: theme.colors.textSecondary,
-                marginTop: '2px',
-                fontFamily: 'monospace'
-              }}>
-                {member.phone}
-              </div>
-            </button>
-          ))}
-          <button
-            onClick={() => setShowDropdown(false)}
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: 'none',
-              borderTop: `1px solid ${theme.colors.border}`,
-              backgroundColor: theme.colors.backgroundAlt,
-              color: theme.colors.textSecondary,
-              cursor: 'pointer',
-              fontSize: '12px',
-              textAlign: 'center'
-            }}
-            onMouseEnter={(e) => e.currentTarget.style.color = theme.colors.text}
-            onMouseLeave={(e) => e.currentTarget.style.color = theme.colors.textSecondary}
-          >
-            Close
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// Fixed Collection Renderer - n8n style fixed collection
-const FixedCollectionRenderer: React.FC<{
-  parameter: any;
-  value: any;
-  onChange: (value: any) => void;
-  allParameters?: Record<string, any>;
-  theme: ReturnType<typeof useAppTheme>;
-}> = ({ parameter, value, onChange, allParameters, theme }) => {
-  const currentValue = value || {};
-
-  return (
-    <div style={{
-      border: `1px solid ${theme.colors.border}`,
-      borderRadius: '6px',
-      backgroundColor: theme.colors.backgroundAlt,
-      padding: '12px'
-    }}>
-      {parameter.options?.map((option: any) => {
-        const optionValue = currentValue[option.name] || {};
-
-        return (
-          <div key={option.name} style={{ marginBottom: '16px' }}>
-            <div style={{
-              fontSize: '14px',
-              fontWeight: '500',
-              color: theme.colors.text,
-              marginBottom: '8px'
-            }}>
-              {option.displayName}
-            </div>
-            <div style={{
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              backgroundColor: theme.colors.background,
-              padding: '12px'
-            }}>
-              {option.values?.map((valueParam: any) => (
-                <ParameterRenderer
-                  key={valueParam.name}
-                  parameter={valueParam}
-                  value={optionValue[valueParam.name]}
-                  onChange={(newValue) => {
-                    onChange({
-                      ...currentValue,
-                      [option.name]: {
-                        ...optionValue,
-                        [valueParam.name]: newValue
-                      }
-                    });
-                  }}
-                  allParameters={allParameters}
-                />
-              ))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-interface ParameterRendererProps {
-  parameter: NodeParameter | INodeProperties;
-  value: any;
-  onChange: (value: any) => void;
-  allParameters?: Record<string, any>;
-  onParameterChange?: (paramName: string, value: any) => void;
-  onClosePanel?: () => void;
-  isLoadingParameters?: boolean;
-}
-
-// Type guard to check if parameter is INodeProperties
-const isINodeProperties = (param: NodeParameter | INodeProperties): param is INodeProperties => {
-  return 'typeOptions' in param;
-};
-
-const ParameterRenderer: React.FC<ParameterRendererProps> = ({
-  parameter,
-  value,
-  onChange,
-  allParameters,
-  onParameterChange,
-  isLoadingParameters = false,
-}) => {
-  const theme = useAppTheme();
-  // Don't use default while loading - wait for actual saved value to load
-  // This prevents showing template code briefly before saved code appears
-  const currentValue = isLoadingParameters ? (value ?? '') : (value !== undefined ? value : parameter.default);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [dynamicOptions, setDynamicOptions] = useState<INodePropertyOption[]>([]);
-  const [nodeParameters, setNodeParameters] = useState<Record<string, any>>({});
-
-  const { selectedNode } = useAppStore();
-  const { getNodeParameters } = useWebSocket();
-  const { getStoredApiKey, hasStoredKey, getStoredModels } = useApiKeys();
-
-  // Don't render hidden parameters
-  if (parameter.type === 'hidden') {
-    return null;
-  }
-
-  // Load node parameters for expression resolution
-  useEffect(() => {
-    const loadParameters = async () => {
-      if (selectedNode?.id) {
-        const result = await getNodeParameters(selectedNode.id);
-        if (result?.parameters) setNodeParameters(result.parameters);
-      }
-    };
-    loadParameters();
-  }, [selectedNode?.id, getNodeParameters]);
-
-  // Auto-load stored API key and models when provider changes
-  // Use ref to track previous provider to prevent infinite loops
-  const prevProviderRef = React.useRef<string | null>(null);
-  // Track if we've done initial auto-select after parameters loaded
-  const hasAutoSelectedRef = React.useRef(false);
-
-  // Reset auto-select tracking when node changes
-  useEffect(() => {
-    hasAutoSelectedRef.current = false;
-    prevProviderRef.current = null;
-  }, [selectedNode?.id]);
-
-  useEffect(() => {
-    const loadStoredKeyForProvider = async () => {
-      // Only run for apiKey or model parameters
-      if (parameter.name !== 'apiKey' && parameter.name !== 'model') return;
-
-      // Don't run while parameters are still loading from database
-      if (isLoadingParameters) return;
-
-      // Get provider from allParameters or derive from node type
-      let provider = allParameters?.provider;
-      if (!provider && selectedNode) {
-        const nodeType = selectedNode.type || selectedNode.data?.nodeType;
-        if (nodeType) {
-          provider = NODE_TYPE_TO_PROVIDER[nodeType];
-        }
-      }
-      if (!provider) return;
-
-      // Distinguish between initial load (prevProvider was null) and actual user-initiated provider change
-      // On initial load: respect saved model if it exists
-      // On provider change: reset to first model to prevent mismatched provider/model
-      const isInitialLoad = prevProviderRef.current === null;
-      const isActualProviderChange = !isInitialLoad && prevProviderRef.current !== provider;
-      const shouldAutoSelectModel = parameter.name === 'model' &&
-        (isActualProviderChange || isInitialLoad || !hasAutoSelectedRef.current);
-
-      // Skip if provider hasn't changed (except for initial model load)
-      if (!isActualProviderChange && !isInitialLoad && parameter.name !== 'model') return;
-      if (!isActualProviderChange && !isInitialLoad && hasAutoSelectedRef.current) return;
-
-      prevProviderRef.current = provider;
-
-      try {
-        const hasKey = await hasStoredKey(provider);
-
-        if (hasKey) {
-          // Auto-load API key for apiKey parameter - always update when provider changes
-          if (parameter.name === 'apiKey' && isActualProviderChange) {
-            const storedKey = await getStoredApiKey(provider);
-            if (storedKey) {
-              onChange(storedKey);
-            }
-          }
-
-          // Auto-load models for model parameter
-          if (shouldAutoSelectModel && selectedNode) {
-            const models = await getStoredModels(provider);
-            if (models?.length) {
-              const modelOptions = DynamicParameterService.createModelOptions(models);
-              DynamicParameterService.updateParameterOptions(selectedNode.id, 'model', modelOptions);
-
-              // Extract model ID (handles both string and object formats)
-              const getModelId = (model: any) => typeof model === 'string' ? model : model.id;
-              const firstModelId = getModelId(models[0]);
-
-              // When user actively changes provider, reset to first model
-              // to prevent mismatched provider/model combinations (e.g., OpenAI model with Anthropic provider)
-              if (isActualProviderChange) {
-                onChange(firstModelId);
-              } else {
-                // Initial load or no provider change - only auto-select if no saved model exists
-                const savedModel = value || allParameters?.model;
-                if (!savedModel || savedModel === '') {
-                  onChange(firstModelId);
-                }
-                // If saved model exists, keep it (don't call onChange)
-              }
-              hasAutoSelectedRef.current = true;
-            }
-          }
-        } else {
-          // No stored key for this provider - clear the fields
-          if (parameter.name === 'apiKey') {
-            onChange('');
-          }
-          if (parameter.name === 'model') {
-            onChange('');
-            hasAutoSelectedRef.current = true;
-          }
-        }
-      } catch (error) {
-        console.warn('Error loading stored key info:', error);
-      }
-    };
-
-    loadStoredKeyForProvider();
-  }, [allParameters?.provider, parameter.name, hasStoredKey, getStoredApiKey, getStoredModels, selectedNode?.id, selectedNode?.type, onChange, isLoadingParameters, value, allParameters?.model]);
-
-  // Merge database params with current form params (current takes precedence)
-  const resolvedParameters = { ...nodeParameters, ...allParameters };
-
-  // Helper functions to get values from both interface types
-  const getMin = () => (parameter as any).min || (parameter as any).typeOptions?.minValue || 0;
-  const getMax = () => (parameter as any).max || (parameter as any).typeOptions?.maxValue || 100;
-  const getStep = () => (parameter as any).step || (parameter as any).typeOptions?.numberStepSize || 1;
-
-  // Load dynamic options based on loadOptionsMethod
-  useEffect(() => {
-    const loadDynamicOptions = async () => {
-      if (!selectedNode || !isINodeProperties(parameter) || !parameter.typeOptions?.loadOptionsMethod) return;
-
-      const dependsOn = parameter.typeOptions.loadOptionsDependsOn || [];
-      const allParamsResolved = { ...nodeParameters, ...allParameters };
-
-      // Check if all dependencies are satisfied
-      const hasAllDependencies = dependsOn.every((dep: string) => allParamsResolved[dep]);
-      if (dependsOn.length > 0 && !hasAllDependencies) return;
-
-      try {
-        // Get the node definition to access methods
-        const nodeType = selectedNode.data?.nodeType || selectedNode.type;
-        const nodeDef = nodeType ? nodeDefinitions[nodeType] : null;
-
-        if (nodeDef?.methods?.loadOptions?.[parameter.typeOptions.loadOptionsMethod]) {
-          const loadMethod = nodeDef.methods.loadOptions[parameter.typeOptions.loadOptionsMethod];
-
-          // Create context for the load method
-          const context = {
-            getCurrentNodeParameter: (paramName: string) => allParamsResolved[paramName]
-          };
-
-          // Call the load method with context
-          const options = await loadMethod.call(context);
-          setDynamicOptions(options);
-
-          // Also update the DynamicParameterService for consistency
-          DynamicParameterService.updateParameterOptions(selectedNode.id, parameter.name, options);
-
-          // Auto-select first option if current value is empty and options are available
-          if (options.length > 0 && (!currentValue || currentValue === '')) {
-            console.log(`[ParameterRenderer] Auto-selecting first option for ${parameter.name}:`, options[0].value);
-            onChange(options[0].value);
-          }
-        }
-      } catch (error) {
-        console.error('Error loading dynamic options:', error);
-      }
-    };
-
-    loadDynamicOptions();
-  }, [selectedNode?.id, isINodeProperties(parameter) && parameter.typeOptions?.loadOptionsMethod, nodeParameters, allParameters, parameter.name]);
-
-  // Load default parameters for Android service nodes when service_id or action changes
-  useEffect(() => {
-    const loadDefaultParameters = async () => {
-      if (!selectedNode || parameter.name !== 'parameters') return;
-
-      const nodeType = selectedNode.data?.nodeType || selectedNode.type;
-      if (!ANDROID_SERVICE_NODE_TYPES.includes(nodeType)) return;
-
-      // Merge database params with current form params (current takes precedence)
-      const allParamsResolved = { ...nodeParameters, ...allParameters };
-      const serviceId = allParamsResolved.service_id;
-      const action = allParamsResolved.action;
-
-      if (!serviceId || !action) {
-        console.log('[AndroidService] Skipping - missing serviceId or action:', { serviceId, action });
-        return;
-      }
-
-      try {
-        console.log('[AndroidService] Fetching default parameters for:', { serviceId, action });
-        const response = await fetch(`${API_CONFIG.PYTHON_BASE_URL}/api/android/services/${serviceId}/actions/${action}/parameters`, {
-          credentials: 'include'
-        });
-        const data = await response.json();
-        console.log('[AndroidService] Default parameters response:', data);
-
-        if (data.success && data.default_parameters) {
-          // Always update with new defaults when service/action changes
-          console.log('[AndroidService] Setting parameters to:', data.default_parameters);
-          onChange(data.default_parameters);
-        }
-      } catch (error) {
-        console.error('[AndroidService] Error loading default parameters:', error);
-      }
-    };
-
-    loadDefaultParameters();
-  }, [
-    selectedNode?.id,
-    parameter.name,
-    allParameters?.service_id,
-    allParameters?.action,
-    nodeParameters?.service_id,
-    nodeParameters?.action
-  ]);
-
-  // Subscribe to dynamic parameter updates
-  useEffect(() => {
-    if (!selectedNode) return;
-
-
-    const unsubscribe = DynamicParameterService.subscribe((nodeId, parameterName, options) => {
-
-      if (nodeId === selectedNode.id && parameterName === parameter.name) {
-        setDynamicOptions(options);
-      }
-    });
-
-    // Check for existing dynamic options
-    const existingOptions = DynamicParameterService.getParameterOptions(selectedNode.id, parameter.name);
-
-    if (existingOptions) {
-      setDynamicOptions(existingOptions);
-    }
-
-    return unsubscribe;
-  }, [selectedNode?.id, parameter.name]);
-
-  // Handle API key validation success
-  const handleApiKeyValidationSuccess = (models: string[]) => {
-
-    if (!selectedNode) {
-      console.warn('ParameterRenderer: No selected node for dynamic options update');
-      return;
-    }
-
-    // Always update the 'model' parameter with dynamic options when API key validation succeeds
-    // This callback can be triggered from any parameter (usually the apiKey parameter)
-    const modelOptions = DynamicParameterService.createModelOptions(models);
-    DynamicParameterService.updateParameterOptions(selectedNode.id, 'model', modelOptions);
-
-    // If this callback is triggered from the model parameter itself and it's empty, auto-select first model
-    if (parameter.name === 'model' && !currentValue && models.length > 0) {
-      onChange(models[0]);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
-    setIsDragOver(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-
-    // Check if this is a coordinate parameter (lat/lng) for special handling
-    const paramName = parameter.name.toLowerCase();
-    const isCoordinate = paramName.includes('lat') || paramName.includes('lng') ||
-                        paramName.includes('lon') || paramName === 'latitude' ||
-                        paramName === 'longitude';
-
-    // Try to get JSON data first (from connected node outputs)
-    const jsonData = e.dataTransfer.getData('application/json');
-    if (jsonData) {
-      try {
-        const parsedData = JSON.parse(jsonData);
-        if (parsedData.type === 'nodeVariable') {
-          // For coordinate parameters, try to extract actual numeric value from connected node data
-          if (isCoordinate && typeof parsedData.dataType === 'string' && parsedData.dataType === 'number') {
-            // Look for actual coordinate values in global execution data
-            // This is a simplified approach - in production you'd want more robust data access
-
-            // For now, use template string but mark it for coordinate processing
-            const existingValue = currentValue || '';
-            const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
-            const newValue = existingValue + (needsSpace ? ' ' : '') + parsedData.variableTemplate;
-            onChange(newValue);
-            return;
-          }
-
-          // Handle variable template data - use the template string
-          const existingValue = currentValue || '';
-          // Add smart spacing - add space if existing content doesn't end with space
-          const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
-          const newValue = existingValue + (needsSpace ? ' ' : '') + parsedData.variableTemplate;
-          onChange(newValue);
-          return;
-        }
-        if (parsedData.type === 'nodeOutput') {
-          // Handle node output data - use the actual value for direct mapping
-          onChange(parsedData.value);
-          return;
-        }
-      } catch (err) {
-        console.warn('Failed to parse JSON drag data:', err);
-      }
-    }
-
-    // Fallback to existing text/plain format (OutputPanel drag-drop)
-    const data = e.dataTransfer.getData('text/plain');
-    if (data && data.startsWith('{{') && data.endsWith('}}')) {
-      // For coordinate parameters, allow template strings but process them appropriately
-      if (isCoordinate) {
-        onChange(data); // Set the template directly for coordinate resolution
-        return;
-      }
-
-      // Append to existing content instead of replacing
-      const existingValue = currentValue || '';
-      // Add smart spacing - add space if existing content doesn't end with space
-      const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
-      const newValue = existingValue + (needsSpace ? ' ' : '') + data;
-      onChange(newValue);
-    }
-  };
-
-  const renderInput = () => {
-    switch (parameter.type) {
-      case 'string':
-        // Check if this should be a textarea based on typeOptions.rows
-        const shouldUseTextarea = (parameter as any).typeOptions?.rows > 1;
-        // Check if this should be a password field
-        const isPassword = (parameter as any).typeOptions?.password;
-        // Check if this is a code editor
-        const isCodeEditor = (parameter as any).typeOptions?.editor === 'code';
-
-        if (shouldUseTextarea) {
-          // Use CodeEditor for code editing
-          if (isCodeEditor) {
-            // Show loading state while parameters are being fetched
-            if (isLoadingParameters) {
-              return (
-                <div style={{
-                  height: '100%',
-                  minHeight: '200px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: theme.colors.backgroundAlt,
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: theme.borderRadius.md,
-                  color: theme.colors.textMuted,
-                  fontSize: '14px'
-                }}>
-                  Loading code...
-                </div>
-              );
-            }
-            // Get language from typeOptions or default to python
-            const codeLanguage = (parameter as any).typeOptions?.editorLanguage || 'python';
-            return (
-              <CodeEditor
-                value={currentValue || ''}
-                onChange={onChange}
-                language={codeLanguage}
-                placeholder={parameter.placeholder}
-              />
-            );
-          }
-
-          // Regular textarea for non-code
-          return (
-            <textarea
-              value={currentValue || ''}
-              onChange={(e) => onChange(e.target.value)}
-              placeholder={parameter.placeholder}
-              rows={(parameter as any).typeOptions?.rows || 3}
-              spellCheck={true}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              style={{
-                width: '100%',
-                padding: '10px 12px',
-                border: isDragOver ? `2px solid ${theme.accent.cyan}` : `1px solid ${theme.colors.border}`,
-                borderRadius: '6px',
-                fontSize: '14px',
-                backgroundColor: isDragOver ? `${theme.accent.cyan}10` : theme.colors.backgroundAlt,
-                color: currentValue && currentValue.includes('{{') ? theme.accent.yellow : theme.colors.text,
-                outline: 'none',
-                transition: 'all 0.2s ease',
-                fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
-                resize: 'vertical',
-                minHeight: '80px',
-                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)',
-                lineHeight: '1.5'
-              }}
-              onFocus={(e) => {
-                e.target.style.borderColor = theme.accent.cyan;
-                e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
-              }}
-              onBlur={(e) => {
-                e.target.style.borderColor = theme.colors.border;
-                e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
-              }}
-            />
-          );
-        }
-
-        // Check if this parameter has API key validation
-        const validationArray = (parameter as any).validation;
-        const apiKeyValidation = validationArray?.find((v: any) => v.type === 'apiKey' && v.showValidateButton);
-
-        if (apiKeyValidation) {
-          // Resolve provider expression if it's a template like {{ $parameter["provider"] }}
-          let resolvedProvider = apiKeyValidation.provider;
-          if (typeof resolvedProvider === 'string' && resolvedProvider.includes('$parameter[')) {
-            // Extract parameter name from expression like {{ $parameter["provider"] }}
-            const match = resolvedProvider.match(/\$parameter\["([^"]+)"\]|\$parameter\['([^']+)'\]/);
-            if (match) {
-              const paramName = match[1] || match[2];
-              resolvedProvider = resolvedParameters[paramName] || resolvedProvider;
-            }
-          }
-
-          const resolvedValidationConfig = {
-            ...apiKeyValidation,
-            provider: resolvedProvider
-          };
-
-          return (
-            <APIKeyValidator
-              value={currentValue || ''}
-              onChange={onChange}
-              placeholder={parameter.placeholder}
-              validationConfig={resolvedValidationConfig}
-              onValidationSuccess={handleApiKeyValidationSuccess}
-              isDragOver={isDragOver}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-            />
-          );
-        }
-
-        // Check if this parameter has dynamic options (like models after API key validation)
-
-        if (dynamicOptions.length > 0 && parameter.type === 'string') {
-          // Check if OpenRouter (has [FREE] tagged models)
-          const hasFreeModels = dynamicOptions.some(opt => String(opt.label || opt.value).includes('[FREE]'));
-
-          if (hasFreeModels) {
-            // Group into Free and Paid for OpenRouter using native select with optgroup
-            const freeModels = dynamicOptions.filter(opt => String(opt.label || opt.value).includes('[FREE]'));
-            const paidModels = dynamicOptions.filter(opt => !String(opt.label || opt.value).includes('[FREE]'));
-
-            return (
-              <select
-                value={currentValue || ''}
-                onChange={(e) => onChange(e.target.value)}
-                style={{
-                  width: '100%',
-                  padding: theme.spacing.sm,
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: theme.borderRadius.md,
-                  fontSize: theme.fontSize.sm,
-                  outline: 'none',
-                  transition: 'border-color 0.2s ease',
-                  cursor: 'pointer',
-                  backgroundColor: theme.colors.background,
-                  color: theme.colors.text,
-                  fontFamily: 'system-ui, sans-serif'
-                }}
-                onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-                onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-              >
-                {!currentValue && (
-                  <option value="" disabled>
-                    Select a model...
-                  </option>
-                )}
-                <optgroup label={`Free Models (${freeModels.length})`}>
-                  {freeModels.map((option) => (
-                    <option key={String(option.value)} value={String(option.value)}>
-                      {option.label || option.name || String(option.value)}
-                    </option>
-                  ))}
-                </optgroup>
-                <optgroup label={`Paid Models (${paidModels.length})`}>
-                  {paidModels.map((option) => (
-                    <option key={String(option.value)} value={String(option.value)}>
-                      {option.label || option.name || String(option.value)}
-                    </option>
-                  ))}
-                </optgroup>
-              </select>
-            );
-          }
-
-          // Use native select for non-OpenRouter (original working code)
-          return (
-            <select
-              value={currentValue || ''}
-              onChange={(e) => onChange(e.target.value)}
-              style={{
-                width: '100%',
-                padding: '8px 12px',
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '6px',
-                fontSize: '14px',
-                outline: 'none',
-                transition: 'border-color 0.2s ease',
-                cursor: 'pointer',
-                backgroundColor: theme.colors.background,
-                color: theme.colors.text,
-                fontFamily: 'system-ui, sans-serif'
-              }}
-              onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-              onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-            >
-              {!currentValue && (
-                <option value="" disabled>
-                  Select a model...
-                </option>
-              )}
-              {dynamicOptions.map((option) => (
-                <option key={String(option.value)} value={String(option.value)}>
-                  {option.label || option.name || String(option.value)}
-                </option>
-              ))}
-            </select>
-          );
-        }
-
-        // Log why we're not using dynamic options for this parameter
-        if (parameter.type === 'string' && parameter.name === 'model') {
-        }
-
-        // Special case for group_id parameter - add Load Groups button
-        if (parameter.name === 'group_id') {
-          const storedGroupName = allParameters?.group_name || '';
-          return (
-            <GroupIdSelector
-              value={currentValue || ''}
-              onChange={onChange}
-              onNameChange={(name) => onParameterChange?.('group_name', name)}
-              storedName={storedGroupName}
-              placeholder={parameter.placeholder}
-              theme={theme}
-              isDragOver={isDragOver}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-            />
-          );
-        }
-
-        // Special case for senderNumber parameter - add Load Members button (uses group_id)
-        if (parameter.name === 'senderNumber') {
-          const groupId = resolvedParameters?.group_id || allParameters?.group_id || '';
-          const storedSenderName = allParameters?.sender_name || '';
-          return (
-            <SenderNumberSelector
-              value={currentValue || ''}
-              onChange={onChange}
-              onNameChange={(name) => onParameterChange?.('sender_name', name)}
-              storedName={storedSenderName}
-              placeholder={parameter.placeholder}
-              theme={theme}
-              isDragOver={isDragOver}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              groupId={groupId}
-            />
-          );
-        }
-
-        return (
-          <input
-            type={isPassword ? "password" : "text"}
-            value={currentValue || ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={parameter.placeholder}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              border: isDragOver ? `2px solid ${theme.accent.cyan}` : `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              fontSize: '14px',
-              backgroundColor: isDragOver ? `${theme.accent.cyan}10` : theme.colors.backgroundAlt,
-              color: currentValue && currentValue.includes('{{') ? theme.accent.yellow : theme.colors.text,
-              outline: 'none',
-              transition: 'all 0.2s ease',
-              fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
-              boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)'
-            }}
-            onFocus={(e) => {
-              e.target.style.borderColor = theme.accent.cyan;
-              e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
-            }}
-            onBlur={(e) => {
-              e.target.style.borderColor = theme.colors.border;
-              e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
-            }}
-          />
-        );
-
-      case 'number':
-
-        return (
-          <input
-            type="number"
-            value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
-            onChange={(e) => onChange(Number(e.target.value))}
-            min={getMin()}
-            max={getMax()}
-            step={getStep()}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              fontSize: '14px',
-              backgroundColor: isDragOver ? theme.colors.focusRing : theme.colors.background,
-              color: theme.colors.text,
-              outline: 'none',
-              transition: 'all 0.2s ease',
-              fontFamily: 'system-ui, sans-serif'
-            }}
-            onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-            onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-          />
-        );
-
-      case 'boolean':
-        return (
-          <label style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            cursor: 'pointer',
-            fontSize: '14px',
-            fontFamily: 'system-ui, sans-serif',
-            color: theme.colors.text
-          }}>
-            <input
-              type="checkbox"
-              checked={currentValue || false}
-              onChange={(e) => onChange(e.target.checked)}
-              style={{ width: '16px', height: '16px', accentColor: theme.colors.focus }}
-            />
-            {parameter.displayName}
-          </label>
-        );
-
-      case 'select':
-      case 'options':
-        // Use dynamic options if available, otherwise use static options
-        const optionsToRender = dynamicOptions.length > 0 ? dynamicOptions : (parameter.options || []);
-        const selectOptions = optionsToRender.filter((option): option is import('../types/INodeProperties').INodePropertyOption =>
-          'value' in option
-        );
-
-        return (
-          <select
-            value={currentValue || parameter.default}
-            onChange={(e) => onChange(e.target.value)}
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              fontSize: '14px',
-              outline: 'none',
-              transition: 'all 0.2s ease',
-              cursor: 'pointer',
-              backgroundColor: theme.colors.backgroundAlt,
-              color: theme.colors.text,
-              fontFamily: 'system-ui, sans-serif',
-              boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)',
-              appearance: 'none',
-              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23657b83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
-              backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'right 12px center',
-              paddingRight: '36px'
-            }}
-            onFocus={(e) => {
-              e.target.style.borderColor = theme.accent.cyan;
-              e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
-            }}
-            onBlur={(e) => {
-              e.target.style.borderColor = theme.colors.border;
-              e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
-            }}
-          >
-            {selectOptions.map((option) => (
-              <option key={String(option.value)} value={String(option.value)}>
-                {option.label || option.name || String(option.value)}
-              </option>
-            ))}
-          </select>
-        );
-
-      case 'slider':
-        return (
-          <div>
-            <input
-              type="range"
-              min={getMin()}
-              max={getMax()}
-              step={getStep()}
-              value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
-              onChange={(e) => onChange(Number(e.target.value))}
-              style={{
-                width: '100%',
-                height: '8px',
-                backgroundColor: theme.colors.backgroundAlt,
-                borderRadius: '8px',
-                outline: 'none',
-                accentColor: theme.colors.focus
-              }}
-            />
-            <div style={{
-              textAlign: 'center',
-              fontSize: '12px',
-              color: theme.colors.textSecondary,
-              marginTop: '4px',
-              fontFamily: 'system-ui, sans-serif'
-            }}>
-              {currentValue !== undefined ? currentValue : (parameter.default || 0)}
-              {parameter.type === 'slider' ? '%' : ''}
-            </div>
-          </div>
-        );
-
-      case 'percentage':
-        return (
-          <div>
-            <input
-              type="range"
-              min={getMin()}
-              max={getMax()}
-              step={getStep()}
-              value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
-              onChange={(e) => onChange(Number(e.target.value))}
-              style={{
-                width: '100%',
-                height: '8px',
-                backgroundColor: theme.colors.backgroundAlt,
-                borderRadius: '8px',
-                outline: 'none',
-                accentColor: theme.colors.success
-              }}
-            />
-            <div style={{
-              textAlign: 'center',
-              fontSize: '12px',
-              color: theme.colors.textSecondary,
-              marginTop: '4px',
-              fontFamily: 'system-ui, sans-serif'
-            }}>
-              {currentValue !== undefined ? currentValue : (parameter.default || 0)}%
-            </div>
-          </div>
-        );
-
-      case 'text':
-        return (
-          <input
-            type="text"
-            value={currentValue || ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={parameter.placeholder}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              fontSize: '14px',
-              backgroundColor: isDragOver ? theme.colors.focusRing : theme.colors.background,
-              color: currentValue && currentValue.includes('{{') ? theme.colors.templateVariable : theme.colors.text,
-              outline: 'none',
-              transition: 'all 0.2s ease',
-              fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif'
-            }}
-            onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-            onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-          />
-        );
-
-      case 'file':
-        const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-        const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-          const file = e.target.files?.[0];
-          if (!file) return;
-
-          const reader = new FileReader();
-          reader.onload = () => {
-            const base64 = (reader.result as string).split(',')[1]; // Remove data:mime;base64, prefix
-            // Store as object with base64 data, filename, and mime type
-            onChange({
-              type: 'upload',
-              data: base64,
-              filename: file.name,
-              mimeType: file.type || 'application/octet-stream'
-            });
-          };
-          reader.readAsDataURL(file);
-        };
-
-        const isUploadedFile = currentValue && typeof currentValue === 'object' && currentValue.type === 'upload';
-
-        // Determine file accept type based on context (e.g., messageType for WhatsApp)
-        const getFileAcceptType = () => {
-          const messageType = allParameters?.messageType;
-          if (messageType) {
-            switch (messageType) {
-              case 'image':
-                return 'image/*';
-              case 'video':
-                return 'video/*';
-              case 'audio':
-                return 'audio/*,.ogg,.opus,.mp3,.wav,.m4a';
-              case 'document':
-                return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar';
-              case 'sticker':
-                return 'image/webp,.webp';
-              default:
-                return (parameter as any).typeOptions?.accept || '*/*';
-            }
-          }
-          return (parameter as any).typeOptions?.accept || '*/*';
-        };
-
-        return (
-          <div>
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <input
-                type="text"
-                value={isUploadedFile ? `[Uploaded] ${currentValue.filename}` : (currentValue || '')}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={parameter.placeholder || 'Enter file path or upload'}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-                readOnly={isUploadedFile}
-                style={{
-                  flex: 1,
-                  padding: '8px 12px',
-                  border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
-                  borderRadius: '6px',
-                  fontSize: '13px',
-                  backgroundColor: isUploadedFile ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
-                  color: isUploadedFile ? theme.colors.success : (currentValue && currentValue.includes?.('{{') ? theme.colors.templateVariable : theme.colors.text),
-                  outline: 'none',
-                  transition: 'all 0.2s ease',
-                  fontFamily: 'monospace'
-                }}
-                onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
-                onBlur={(e) => e.target.style.borderColor = theme.colors.border}
-              />
-              <input
-                key={`file-input-${allParameters?.messageType || 'default'}`}
-                ref={fileInputRef}
-                type="file"
-                onChange={handleFileUpload}
-                style={{ display: 'none' }}
-                accept={getFileAcceptType()}
-              />
-              <button
-                onClick={() => fileInputRef.current?.click()}
-                style={{
-                  padding: '8px 12px',
-                  border: `1px solid ${theme.colors.focus}40`,
-                  borderRadius: '6px',
-                  backgroundColor: `${theme.colors.focus}18`,
-                  color: theme.colors.focus,
-                  cursor: 'pointer',
-                  fontSize: '13px',
-                  fontWeight: 600,
-                  transition: 'all 0.2s ease',
-                  whiteSpace: 'nowrap'
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = `${theme.colors.focus}18`;
-                }}
-                title="Upload file"
-              >
-                Upload
-              </button>
-              {isUploadedFile && (
-                <button
-                  onClick={() => {
-                    onChange('');
-                    if (fileInputRef.current) fileInputRef.current.value = '';
-                  }}
-                  style={{
-                    padding: '8px 10px',
-                    border: `1px solid ${theme.colors.error}40`,
-                    borderRadius: '6px',
-                    backgroundColor: `${theme.colors.error}18`,
-                    color: theme.colors.error,
-                    cursor: 'pointer',
-                    fontSize: '13px',
-                    fontWeight: 600,
-                    transition: 'all 0.2s ease'
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor = `${theme.colors.error}30`;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = `${theme.colors.error}18`;
-                  }}
-                  title="Clear uploaded file"
-                >
-                  X
-                </button>
-              )}
-            </div>
-            <div style={{
-              fontSize: '11px',
-              color: theme.colors.textSecondary,
-              marginTop: '4px',
-              fontStyle: 'italic'
-            }}>
-              {isUploadedFile
-                ? `Size: ${(currentValue.data.length * 0.75 / 1024).toFixed(1)} KB | Type: ${currentValue.mimeType}`
-                : 'Enter server path or click Upload to select a file'}
-            </div>
-          </div>
-        );
-
-      case 'array':
-        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
-        return (
-          <div>
-            <div style={{
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: '6px',
-              backgroundColor: theme.colors.background,
-              maxHeight: '120px',
-              overflowY: 'auto'
-            }}>
-              {parameter.options?.map((option) => (
-                <label key={option.value} style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                  padding: '8px 12px',
-                  cursor: 'pointer',
-                  fontSize: '14px',
-                  fontFamily: 'system-ui, sans-serif',
-                  color: theme.colors.text,
-                  borderBottom: `1px solid ${theme.colors.border}`
-                }}>
-                  <input
-                    type="checkbox"
-                    checked={arrayValue.includes(option.value)}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        onChange([...arrayValue, option.value]);
-                      } else {
-                        onChange(arrayValue.filter((v: any) => v !== option.value));
-                      }
-                    }}
-                    style={{ width: '16px', height: '16px', accentColor: theme.colors.focus }}
-                  />
-                  {option.label}
-                </label>
-              ))}
-            </div>
-            <div style={{
-              fontSize: '11px',
-              color: theme.colors.textSecondary,
-              marginTop: '4px'
-            }}>
-              Selected: {arrayValue.length} item{arrayValue.length !== 1 ? 's' : ''}
-            </div>
-          </div>
-        );
-
-      case 'collection':
-        return <CollectionRenderer parameter={parameter} value={currentValue} onChange={onChange} allParameters={allParameters} theme={theme} />;
-
-      case 'fixedCollection':
-        return <FixedCollectionRenderer parameter={parameter} value={currentValue} onChange={onChange} allParameters={allParameters} theme={theme} />;
-
-      case 'notice':
-        // Info/notice display - shows informational text without input
-        return (
-          <div style={{
-            padding: '10px 12px',
-            backgroundColor: theme.colors.backgroundAlt,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: '6px',
-            fontSize: '13px',
-            color: theme.colors.textSecondary,
-            lineHeight: '1.5'
-          }}>
-            {parameter.default || parameter.description || ''}
-          </div>
-        );
-
-      default:
-        return <div style={{ color: theme.colors.error, fontSize: '14px', padding: '8px 12px', backgroundColor: `${theme.colors.error}15`, border: `1px solid ${theme.colors.error}30`, borderRadius: '6px' }}>Unsupported parameter type: {parameter.type}</div>;
-    }
-  };
-
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      {parameter.type !== 'boolean' && (
-        <label style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '6px',
-          marginBottom: '8px',
-          fontSize: '13px',
-          fontWeight: 600,
-          color: theme.colors.text,
-          fontFamily: 'system-ui, sans-serif',
-          flexShrink: 0
-        }}>
-          <span>{parameter.displayName}</span>
-          {parameter.required && (
-            <span style={{
-              color: theme.accent.red,
-              fontSize: '14px',
-              fontWeight: 700
-            }}>*</span>
-          )}
-        </label>
-      )}
-
-      <div style={{ flex: 1, minHeight: 0 }}>
-        {renderInput()}
-      </div>
-
-      {parameter.description && (
-        <div style={{
-          fontSize: '12px',
-          color: theme.colors.textSecondary,
-          marginTop: '6px',
-          lineHeight: '1.5',
-          fontFamily: 'system-ui, sans-serif',
-          paddingLeft: '2px',
-          flexShrink: 0
-        }}>
-          {parameter.description}
-        </div>
-      )}
-
-    </div>
-  );
-};
-
+import React, { useState, useEffect } from 'react';
+import { NodeParameter } from '../types/NodeTypes';
+import { INodeProperties, INodePropertyOption } from '../types/INodeProperties';
+import APIKeyValidator from './APIKeyValidator';
+import CodeEditor from './ui/CodeEditor';
+import DynamicParameterService from '../services/dynamicParameterService';
+import { useAppStore } from '../store/useAppStore';
+import { ANDROID_SERVICE_NODE_TYPES } from '../nodeDefinitions/androidServiceNodes';
+import { nodeDefinitions } from '../nodeDefinitions';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { API_CONFIG } from '../config/api';
+import { useWebSocket } from '../contexts/WebSocketContext';
+import { useApiKeys } from '../hooks/useApiKeys';
+
+// Map node types to provider keys for AI model nodes
+const NODE_TYPE_TO_PROVIDER: Record<string, string> = {
+  'openaiChatModel': 'openai',
+  'anthropicChatModel': 'anthropic',
+  'claudeChatModel': 'anthropic',
+  'googleChatModel': 'gemini',
+  'geminiChatModel': 'gemini',
+  'azureChatModel': 'azure_openai',
+  'cohereChatModel': 'cohere',
+  'ollamaChatModel': 'ollama',
+  'mistralChatModel': 'mistral',
+  'openrouterChatModel': 'openrouter',
+  'groqChatModel': 'groq',
+  'cerebrasChatModel': 'cerebras'
+};
+
+// Collection Renderer - n8n official style
+const CollectionRenderer: React.FC<{
+  parameter: any;
+  value: any;
+  onChange: (value: any) => void;
+  allParameters?: Record<string, any>;
+  theme: ReturnType<typeof useAppTheme>;
+}> = ({ parameter, value, onChange, allParameters, theme }) => {
+  const [showAddOption, setShowAddOption] = useState(false);
+  const currentValue = value || {};
+  const addedOptions = Object.keys(currentValue).filter(key => currentValue[key] !== undefined);
+  const availableOptions = parameter.options?.filter((opt: any) => !addedOptions.includes(opt.name)) || [];
+
+  const addOption = (optionName: string) => {
+    const option = parameter.options?.find((opt: any) => opt.name === optionName);
+    if (option) {
+      onChange({
+        ...currentValue,
+        [optionName]: option.default
+      });
+      setShowAddOption(false);
+    }
+  };
+
+  const removeOption = (optionName: string) => {
+    const newValue = { ...currentValue };
+    delete newValue[optionName];
+    onChange(newValue);
+  };
+
+  const updateOption = (optionName: string, optionValue: any) => {
+    onChange({
+      ...currentValue,
+      [optionName]: optionValue
+    });
+  };
+
+  return (
+    <div>
+      {addedOptions.length === 0 && (
+        <div style={{
+          fontSize: '14px',
+          color: theme.colors.textSecondary,
+          marginBottom: '12px',
+          padding: '8px 0'
+        }}>
+          No properties
+        </div>
+      )}
+
+      {addedOptions.map((optionName) => {
+        const option = parameter.options?.find((opt: any) => opt.name === optionName);
+        if (!option) return null;
+
+        return (
+          <div key={optionName} style={{
+            marginBottom: '16px',
+            padding: '12px',
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: '4px',
+            backgroundColor: theme.colors.backgroundAlt,
+            position: 'relative'
+          }}>
+            <button
+              onClick={() => removeOption(optionName)}
+              style={{
+                position: 'absolute',
+                top: '6px',
+                right: '6px',
+                background: 'none',
+                border: 'none',
+                color: theme.colors.textSecondary,
+                cursor: 'pointer',
+                fontSize: '14px',
+                padding: '2px 4px',
+                borderRadius: '2px'
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.border}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+              title="Remove"
+            >
+              ✕
+            </button>
+            <ParameterRenderer
+              parameter={option}
+              value={currentValue[optionName]}
+              onChange={(newValue) => updateOption(optionName, newValue)}
+              allParameters={allParameters}
+            />
+          </div>
+        );
+      })}
+
+      {availableOptions.length > 0 && (
+        <div style={{ position: 'relative' }}>
+          <button
+            onClick={() => setShowAddOption(!showAddOption)}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: '4px',
+              backgroundColor: theme.colors.backgroundAlt,
+              color: theme.colors.textSecondary,
+              cursor: 'pointer',
+              fontSize: '14px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.borderHover}
+            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
+          >
+            {parameter.placeholder || 'Add Option'}
+            <span style={{
+              transform: showAddOption ? 'rotate(180deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s ease'
+            }}>
+              ▼
+            </span>
+          </button>
+
+          {showAddOption && (
+            <div style={{
+              position: 'absolute',
+              top: '100%',
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              backgroundColor: theme.colors.background,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: '4px',
+              marginTop: '2px',
+              boxShadow: `0 4px 6px -1px ${theme.colors.shadow}`,
+              maxHeight: '200px',
+              overflowY: 'auto'
+            }}>
+              {availableOptions.map((option: any, index: number) => (
+                <button
+                  key={option.name}
+                  onClick={() => addOption(option.name)}
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.text,
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    textAlign: 'left',
+                    borderBottom: index < availableOptions.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
+                  }}
+                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
+                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                >
+                  <div style={{ fontWeight: '500' }}>
+                    {option.displayName}
+                  </div>
+                  {option.description && (
+                    <div style={{
+                      fontSize: '12px',
+                      color: theme.colors.textSecondary,
+                      marginTop: '2px'
+                    }}>
+                      {option.description}
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Group ID Selector - with Load Groups button and dropdown
+const GroupIdSelector: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  onNameChange?: (name: string) => void;
+  storedName?: string;
+  placeholder?: string;
+  theme: ReturnType<typeof useAppTheme>;
+  isDragOver: boolean;
+  onDragOver: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+}> = ({ value, onChange, onNameChange, storedName, placeholder, theme, isDragOver, onDragOver, onDragLeave, onDrop }) => {
+  const [groups, setGroups] = useState<Array<{ jid: string; name: string; topic?: string; size?: number; is_community?: boolean }>>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Use stored name if available, otherwise local state
+  const [localGroupName, setLocalGroupName] = useState<string | null>(null);
+  const selectedGroupName = storedName || localGroupName;
+  const { getWhatsAppGroups } = useWebSocket();
+
+  // Sync local state with stored name
+  useEffect(() => {
+    if (storedName) {
+      setLocalGroupName(storedName);
+    }
+  }, [storedName]);
+
+  const handleLoadGroups = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await getWhatsAppGroups();
+      console.log('[GroupIdSelector] Raw groups from API:', result.groups?.map(g => ({ name: g.name, jid: g.jid, is_community: g.is_community })));
+      if (result.success && result.groups.length > 0) {
+        // Filter out communities - they don't have regular chat history
+        const regularGroups = result.groups.filter(g => !g.is_community);
+        console.log('[GroupIdSelector] After filtering communities:', regularGroups.length, 'groups remaining');
+        if (regularGroups.length === 0) {
+          setError('Only communities found (no chat history available)');
+          return;
+        }
+        setGroups(regularGroups);
+        setShowDropdown(true);
+        // If we already have a value, try to find its name and update storage
+        if (value) {
+          const matchingGroup = regularGroups.find(g => g.jid === value);
+          if (matchingGroup && matchingGroup.name !== storedName) {
+            setLocalGroupName(matchingGroup.name);
+            onNameChange?.(matchingGroup.name);
+          }
+        }
+      } else if (result.error) {
+        setError(result.error);
+      } else {
+        setError('No groups found');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to load groups');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSelectGroup = (group: { jid: string; name: string }) => {
+    onChange(group.jid);
+    setLocalGroupName(group.name);
+    onNameChange?.(group.name);
+    setShowDropdown(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+    // Clear group name when user types manually
+    setLocalGroupName(null);
+    onNameChange?.('');
+  };
+
+  // Display value: show group name if selected, otherwise show JID
+  const displayValue = selectedGroupName || value;
+  const isGroupSelected = selectedGroupName !== null && value;
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <input
+          type="text"
+          value={displayValue}
+          onChange={handleInputChange}
+          placeholder={placeholder || '123456789@g.us'}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          style={{
+            flex: 1,
+            padding: '8px 12px',
+            border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
+            borderRadius: '6px',
+            fontSize: '14px',
+            backgroundColor: isGroupSelected ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
+            color: isGroupSelected ? theme.colors.success : (value && value.includes('{{') ? theme.colors.templateVariable : theme.colors.text),
+            outline: 'none',
+            transition: 'all 0.2s ease',
+            fontFamily: value && value.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
+            fontWeight: isGroupSelected ? '500' : 'normal'
+          }}
+          onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+          onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+        />
+        <button
+          onClick={handleLoadGroups}
+          disabled={isLoading}
+          style={{
+            padding: '8px 12px',
+            border: `1px solid ${isLoading ? theme.colors.border : `${theme.colors.focus}40`}`,
+            borderRadius: '6px',
+            backgroundColor: isLoading ? 'transparent' : `${theme.colors.focus}18`,
+            color: isLoading ? theme.colors.textMuted : theme.colors.focus,
+            cursor: isLoading ? 'wait' : 'pointer',
+            fontSize: '13px',
+            fontWeight: 600,
+            transition: 'all 0.2s ease',
+            whiteSpace: 'nowrap',
+            opacity: isLoading ? 0.7 : 1
+          }}
+          onMouseEnter={(e) => {
+            if (!isLoading) {
+              e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = isLoading ? 'transparent' : `${theme.colors.focus}18`;
+          }}
+          title="Load WhatsApp groups"
+        >
+          {isLoading ? 'Loading...' : 'Load'}
+        </button>
+      </div>
+      {/* Show JID below when group name is displayed */}
+      {isGroupSelected && (
+        <div style={{
+          fontSize: '11px',
+          color: theme.colors.textSecondary,
+          marginTop: '4px',
+          fontFamily: 'monospace'
+        }}>
+          {value}
+        </div>
+      )}
+
+      {error && (
+        <div style={{
+          fontSize: '12px',
+          color: theme.colors.error,
+          marginTop: '4px'
+        }}>
+          {error}
+        </div>
+      )}
+
+      {showDropdown && groups.length > 0 && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          right: 0,
+          marginTop: '4px',
+          backgroundColor: theme.colors.background,
+          border: `1px solid ${theme.colors.border}`,
+          borderRadius: '6px',
+          boxShadow: `0 4px 12px ${theme.colors.shadow}`,
+          maxHeight: '200px',
+          overflowY: 'auto',
+          zIndex: 1000
+        }}>
+          {groups.map((group, index) => (
+            <button
+              key={group.jid}
+              onClick={() => handleSelectGroup(group)}
+              style={{
+                width: '100%',
+                padding: '10px 12px',
+                border: 'none',
+                backgroundColor: 'transparent',
+                color: theme.colors.text,
+                cursor: 'pointer',
+                fontSize: '13px',
+                textAlign: 'left',
+                borderBottom: index < groups.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            >
+              <div style={{ fontWeight: '500' }}>{group.name}</div>
+              <div style={{
+                fontSize: '11px',
+                color: theme.colors.textSecondary,
+                marginTop: '2px',
+                fontFamily: 'monospace'
+              }}>
+                {group.jid}
+                {group.size && <span style={{ marginLeft: '8px' }}>({group.size} members)</span>}
+              </div>
+            </button>
+          ))}
+          <button
+            onClick={() => setShowDropdown(false)}
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: 'none',
+              borderTop: `1px solid ${theme.colors.border}`,
+              backgroundColor: theme.colors.backgroundAlt,
+              color: theme.colors.textSecondary,
+              cursor: 'pointer',
+              fontSize: '12px',
+              textAlign: 'center'
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.color = theme.colors.text}
+            onMouseLeave={(e) => e.currentTarget.style.color = theme.colors.textSecondary}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Sender Number Selector - with Load Members button and dropdown (loads from selected group)
+const SenderNumberSelector: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  onNameChange?: (name: string) => void;
+  storedName?: string;
+  placeholder?: string;
+  theme: ReturnType<typeof useAppTheme>;
+  isDragOver: boolean;
+  onDragOver: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+  groupId: string; // The selected group to load members from
+}> = ({ value, onChange, onNameChange, storedName, placeholder, theme, isDragOver, onDragOver, onDragLeave, onDrop, groupId }) => {
+  const [members, setMembers] = useState<Array<{ phone: string; name: string; jid: string; is_admin?: boolean }>>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Use stored name if available, otherwise local state
+  const [localMemberName, setLocalMemberName] = useState<string | null>(null);
+  const selectedMemberName = storedName || localMemberName;
+  const { getWhatsAppGroupInfo } = useWebSocket();
+
+  // Sync local state with stored name
+  useEffect(() => {
+    if (storedName) {
+      setLocalMemberName(storedName);
+    }
+  }, [storedName]);
+
+  const handleLoadMembers = async () => {
+    if (!groupId) {
+      setError('Select a group first');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await getWhatsAppGroupInfo(groupId);
+      if (result.success && result.participants && result.participants.length > 0) {
+        setMembers(result.participants);
+        setShowDropdown(true);
+        // If we already have a value, try to find its name and update storage
+        if (value) {
+          const matchingMember = result.participants.find((m: any) => m.phone === value);
+          if (matchingMember) {
+            const name = matchingMember.name || matchingMember.phone;
+            if (name !== storedName) {
+              setLocalMemberName(name);
+              onNameChange?.(name);
+            }
+          }
+        }
+      } else if (result.error) {
+        setError(result.error);
+      } else {
+        setError('No members found');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to load members');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSelectMember = (member: { phone: string; name: string }) => {
+    const name = member.name || member.phone;
+    onChange(member.phone);
+    setLocalMemberName(name);
+    onNameChange?.(name);
+    setShowDropdown(false);
+  };
+
+  const handleClearSelection = () => {
+    onChange('');
+    setLocalMemberName(null);
+    onNameChange?.('');
+    setShowDropdown(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+    // Clear member name when user types manually
+    setLocalMemberName(null);
+    onNameChange?.('');
+  };
+
+  // Display value: show member name if selected, otherwise show phone
+  const displayValue = selectedMemberName || value;
+  const isMemberSelected = selectedMemberName !== null && value;
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <input
+          type="text"
+          value={displayValue}
+          onChange={handleInputChange}
+          placeholder={placeholder || 'All members (leave empty)'}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          style={{
+            flex: 1,
+            padding: '8px 12px',
+            border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
+            borderRadius: '6px',
+            fontSize: '14px',
+            backgroundColor: isMemberSelected ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
+            color: isMemberSelected ? theme.colors.success : (value && value.includes('{{') ? theme.colors.templateVariable : theme.colors.text),
+            outline: 'none',
+            transition: 'all 0.2s ease',
+            fontFamily: value && value.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
+            fontWeight: isMemberSelected ? '500' : 'normal'
+          }}
+          onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+          onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+        />
+        <button
+          onClick={handleLoadMembers}
+          disabled={isLoading || !groupId}
+          style={{
+            padding: '8px 12px',
+            border: `1px solid ${(isLoading || !groupId) ? theme.colors.border : `${theme.colors.focus}40`}`,
+            borderRadius: '6px',
+            backgroundColor: (isLoading || !groupId) ? 'transparent' : `${theme.colors.focus}18`,
+            color: (isLoading || !groupId) ? theme.colors.textMuted : theme.colors.focus,
+            cursor: (isLoading || !groupId) ? 'not-allowed' : 'pointer',
+            fontSize: '13px',
+            fontWeight: 600,
+            transition: 'all 0.2s ease',
+            whiteSpace: 'nowrap',
+            opacity: (isLoading || !groupId) ? 0.7 : 1
+          }}
+          onMouseEnter={(e) => {
+            if (!isLoading && groupId) {
+              e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = (isLoading || !groupId) ? 'transparent' : `${theme.colors.focus}18`;
+          }}
+          title={groupId ? "Load group members" : "Select a group first"}
+        >
+          {isLoading ? 'Loading...' : 'Load'}
+        </button>
+      </div>
+      {/* Show phone below when member name is displayed */}
+      {isMemberSelected && (
+        <div style={{
+          fontSize: '11px',
+          color: theme.colors.textSecondary,
+          marginTop: '4px',
+          fontFamily: 'monospace'
+        }}>
+          {value}
+        </div>
+      )}
+
+      {error && (
+        <div style={{
+          fontSize: '12px',
+          color: theme.colors.error,
+          marginTop: '4px'
+        }}>
+          {error}
+        </div>
+      )}
+
+      {showDropdown && members.length > 0 && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          right: 0,
+          marginTop: '4px',
+          backgroundColor: theme.colors.background,
+          border: `1px solid ${theme.colors.border}`,
+          borderRadius: '6px',
+          boxShadow: `0 4px 12px ${theme.colors.shadow}`,
+          maxHeight: '250px',
+          overflowY: 'auto',
+          zIndex: 1000
+        }}>
+          {/* All Members option */}
+          <button
+            onClick={handleClearSelection}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              border: 'none',
+              backgroundColor: !value ? theme.colors.backgroundAlt : 'transparent',
+              color: theme.colors.text,
+              cursor: 'pointer',
+              fontSize: '13px',
+              textAlign: 'left',
+              borderBottom: `1px solid ${theme.colors.border}`
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
+            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = !value ? theme.colors.backgroundAlt : 'transparent'}
+          >
+            <div style={{ fontWeight: '500', color: theme.colors.textSecondary }}>All Members</div>
+            <div style={{ fontSize: '11px', color: theme.colors.textMuted, marginTop: '2px' }}>
+              Receive from anyone in group
+            </div>
+          </button>
+          {members.map((member, index) => (
+            <button
+              key={member.jid || member.phone}
+              onClick={() => handleSelectMember(member)}
+              style={{
+                width: '100%',
+                padding: '10px 12px',
+                border: 'none',
+                backgroundColor: value === member.phone ? theme.colors.backgroundAlt : 'transparent',
+                color: theme.colors.text,
+                cursor: 'pointer',
+                fontSize: '13px',
+                textAlign: 'left',
+                borderBottom: index < members.length - 1 ? `1px solid ${theme.colors.border}` : 'none'
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = theme.colors.backgroundAlt}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = value === member.phone ? theme.colors.backgroundAlt : 'transparent'}
+            >
+              <div style={{ fontWeight: '500' }}>
+                {member.name || member.phone}
+                {member.is_admin && <span style={{ marginLeft: '8px', fontSize: '10px', color: theme.colors.warning }}>(Admin)</span>}
+              </div>
+              <div style={{
+                fontSize: '11px',
+                color: theme.colors.textSecondary,
+                marginTop: '2px',
+                fontFamily: 'monospace'
+              }}>
+                {member.phone}
+              </div>
+            </button>
+          ))}
+          <button
+            onClick={() => setShowDropdown(false)}
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: 'none',
+              borderTop: `1px solid ${theme.colors.border}`,
+              backgroundColor: theme.colors.backgroundAlt,
+              color: theme.colors.textSecondary,
+              cursor: 'pointer',
+              fontSize: '12px',
+              textAlign: 'center'
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.color = theme.colors.text}
+            onMouseLeave={(e) => e.currentTarget.style.color = theme.colors.textSecondary}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Fixed Collection Renderer - n8n style fixed collection
+const FixedCollectionRenderer: React.FC<{
+  parameter: any;
+  value: any;
+  onChange: (value: any) => void;
+  allParameters?: Record<string, any>;
+  theme: ReturnType<typeof useAppTheme>;
+}> = ({ parameter, value, onChange, allParameters, theme }) => {
+  const currentValue = value || {};
+
+  return (
+    <div style={{
+      border: `1px solid ${theme.colors.border}`,
+      borderRadius: '6px',
+      backgroundColor: theme.colors.backgroundAlt,
+      padding: '12px'
+    }}>
+      {parameter.options?.map((option: any) => {
+        const optionValue = currentValue[option.name] || {};
+
+        return (
+          <div key={option.name} style={{ marginBottom: '16px' }}>
+            <div style={{
+              fontSize: '14px',
+              fontWeight: '500',
+              color: theme.colors.text,
+              marginBottom: '8px'
+            }}>
+              {option.displayName}
+            </div>
+            <div style={{
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              backgroundColor: theme.colors.background,
+              padding: '12px'
+            }}>
+              {option.values?.map((valueParam: any) => (
+                <ParameterRenderer
+                  key={valueParam.name}
+                  parameter={valueParam}
+                  value={optionValue[valueParam.name]}
+                  onChange={(newValue) => {
+                    onChange({
+                      ...currentValue,
+                      [option.name]: {
+                        ...optionValue,
+                        [valueParam.name]: newValue
+                      }
+                    });
+                  }}
+                  allParameters={allParameters}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface ParameterRendererProps {
+  parameter: NodeParameter | INodeProperties;
+  value: any;
+  onChange: (value: any) => void;
+  allParameters?: Record<string, any>;
+  onParameterChange?: (paramName: string, value: any) => void;
+  onClosePanel?: () => void;
+  isLoadingParameters?: boolean;
+}
+
+// Type guard to check if parameter is INodeProperties
+const isINodeProperties = (param: NodeParameter | INodeProperties): param is INodeProperties => {
+  return 'typeOptions' in param;
+};
+
+const ParameterRenderer: React.FC<ParameterRendererProps> = ({
+  parameter,
+  value,
+  onChange,
+  allParameters,
+  onParameterChange,
+  isLoadingParameters = false,
+}) => {
+  const theme = useAppTheme();
+  // Don't use default while loading - wait for actual saved value to load
+  // This prevents showing template code briefly before saved code appears
+  const currentValue = isLoadingParameters ? (value ?? '') : (value !== undefined ? value : parameter.default);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [dynamicOptions, setDynamicOptions] = useState<INodePropertyOption[]>([]);
+  const [nodeParameters, setNodeParameters] = useState<Record<string, any>>({});
+
+  const { selectedNode } = useAppStore();
+  const { getNodeParameters } = useWebSocket();
+  const { getStoredApiKey, hasStoredKey, getStoredModels } = useApiKeys();
+
+  // Don't render hidden parameters
+  if (parameter.type === 'hidden') {
+    return null;
+  }
+
+  // Load node parameters for expression resolution
+  useEffect(() => {
+    const loadParameters = async () => {
+      if (selectedNode?.id) {
+        const result = await getNodeParameters(selectedNode.id);
+        if (result?.parameters) setNodeParameters(result.parameters);
+      }
+    };
+    loadParameters();
+  }, [selectedNode?.id, getNodeParameters]);
+
+  // Auto-load stored API key and models when provider changes
+  // Use ref to track previous provider to prevent infinite loops
+  const prevProviderRef = React.useRef<string | null>(null);
+  // Track if we've done initial auto-select after parameters loaded
+  const hasAutoSelectedRef = React.useRef(false);
+
+  // Reset auto-select tracking when node changes
+  useEffect(() => {
+    hasAutoSelectedRef.current = false;
+    prevProviderRef.current = null;
+  }, [selectedNode?.id]);
+
+  useEffect(() => {
+    const loadStoredKeyForProvider = async () => {
+      // Only run for apiKey or model parameters
+      if (parameter.name !== 'apiKey' && parameter.name !== 'model') return;
+
+      // Don't run while parameters are still loading from database
+      if (isLoadingParameters) return;
+
+      // Get provider from allParameters or derive from node type
+      let provider = allParameters?.provider;
+      if (!provider && selectedNode) {
+        const nodeType = selectedNode.type || selectedNode.data?.nodeType;
+        if (nodeType) {
+          provider = NODE_TYPE_TO_PROVIDER[nodeType];
+        }
+      }
+      if (!provider) return;
+
+      // Distinguish between initial load (prevProvider was null) and actual user-initiated provider change
+      // On initial load: respect saved model if it exists
+      // On provider change: reset to first model to prevent mismatched provider/model
+      const isInitialLoad = prevProviderRef.current === null;
+      const isActualProviderChange = !isInitialLoad && prevProviderRef.current !== provider;
+      const shouldAutoSelectModel = parameter.name === 'model' &&
+        (isActualProviderChange || isInitialLoad || !hasAutoSelectedRef.current);
+
+      // Skip if provider hasn't changed (except for initial model load)
+      if (!isActualProviderChange && !isInitialLoad && parameter.name !== 'model') return;
+      if (!isActualProviderChange && !isInitialLoad && hasAutoSelectedRef.current) return;
+
+      prevProviderRef.current = provider;
+
+      try {
+        const hasKey = await hasStoredKey(provider);
+
+        if (hasKey) {
+          // Auto-load API key for apiKey parameter - always update when provider changes
+          if (parameter.name === 'apiKey' && isActualProviderChange) {
+            const storedKey = await getStoredApiKey(provider);
+            if (storedKey) {
+              onChange(storedKey);
+            }
+          }
+
+          // Auto-load models for model parameter
+          if (shouldAutoSelectModel && selectedNode) {
+            const models = await getStoredModels(provider);
+            if (models?.length) {
+              const modelOptions = DynamicParameterService.createModelOptions(models);
+              DynamicParameterService.updateParameterOptions(selectedNode.id, 'model', modelOptions);
+
+              // Extract model ID (handles both string and object formats)
+              const getModelId = (model: any) => typeof model === 'string' ? model : model.id;
+              const firstModelId = getModelId(models[0]);
+
+              // When user actively changes provider, reset to first model
+              // to prevent mismatched provider/model combinations (e.g., OpenAI model with Anthropic provider)
+              if (isActualProviderChange) {
+                onChange(firstModelId);
+              } else {
+                // Initial load or no provider change - only auto-select if no saved model exists
+                const savedModel = value || allParameters?.model;
+                if (!savedModel || savedModel === '') {
+                  onChange(firstModelId);
+                }
+                // If saved model exists, keep it (don't call onChange)
+              }
+              hasAutoSelectedRef.current = true;
+            }
+          }
+        } else {
+          // No stored key for this provider - clear the fields
+          if (parameter.name === 'apiKey') {
+            onChange('');
+          }
+          if (parameter.name === 'model') {
+            onChange('');
+            hasAutoSelectedRef.current = true;
+          }
+        }
+      } catch (error) {
+        console.warn('Error loading stored key info:', error);
+      }
+    };
+
+    loadStoredKeyForProvider();
+  }, [allParameters?.provider, parameter.name, hasStoredKey, getStoredApiKey, getStoredModels, selectedNode?.id, selectedNode?.type, onChange, isLoadingParameters, value, allParameters?.model]);
+
+  // Merge database params with current form params (current takes precedence)
+  const resolvedParameters = { ...nodeParameters, ...allParameters };
+
+  // Helper functions to get values from both interface types
+  const getMin = () => (parameter as any).min || (parameter as any).typeOptions?.minValue || 0;
+  const getMax = () => (parameter as any).max || (parameter as any).typeOptions?.maxValue || 100;
+  const getStep = () => (parameter as any).step || (parameter as any).typeOptions?.numberStepSize || 1;
+
+  // Load dynamic options based on loadOptionsMethod
+  useEffect(() => {
+    const loadDynamicOptions = async () => {
+      if (!selectedNode || !isINodeProperties(parameter) || !parameter.typeOptions?.loadOptionsMethod) return;
+
+      const dependsOn = parameter.typeOptions.loadOptionsDependsOn || [];
+      const allParamsResolved = { ...nodeParameters, ...allParameters };
+
+      // Check if all dependencies are satisfied
+      const hasAllDependencies = dependsOn.every((dep: string) => allParamsResolved[dep]);
+      if (dependsOn.length > 0 && !hasAllDependencies) return;
+
+      try {
+        // Get the node definition to access methods
+        const nodeType = selectedNode.data?.nodeType || selectedNode.type;
+        const nodeDef = nodeType ? nodeDefinitions[nodeType] : null;
+
+        if (nodeDef?.methods?.loadOptions?.[parameter.typeOptions.loadOptionsMethod]) {
+          const loadMethod = nodeDef.methods.loadOptions[parameter.typeOptions.loadOptionsMethod];
+
+          // Create context for the load method
+          const context = {
+            getCurrentNodeParameter: (paramName: string) => allParamsResolved[paramName]
+          };
+
+          // Call the load method with context
+          const options = await loadMethod.call(context);
+          setDynamicOptions(options);
+
+          // Also update the DynamicParameterService for consistency
+          DynamicParameterService.updateParameterOptions(selectedNode.id, parameter.name, options);
+
+          // Auto-select first option if current value is empty and options are available
+          if (options.length > 0 && (!currentValue || currentValue === '')) {
+            console.log(`[ParameterRenderer] Auto-selecting first option for ${parameter.name}:`, options[0].value);
+            onChange(options[0].value);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading dynamic options:', error);
+      }
+    };
+
+    loadDynamicOptions();
+  }, [selectedNode?.id, isINodeProperties(parameter) && parameter.typeOptions?.loadOptionsMethod, nodeParameters, allParameters, parameter.name]);
+
+  // Load default parameters for Android service nodes when service_id or action changes
+  useEffect(() => {
+    const loadDefaultParameters = async () => {
+      if (!selectedNode || parameter.name !== 'parameters') return;
+
+      const nodeType = selectedNode.data?.nodeType || selectedNode.type;
+      if (!ANDROID_SERVICE_NODE_TYPES.includes(nodeType)) return;
+
+      // Merge database params with current form params (current takes precedence)
+      const allParamsResolved = { ...nodeParameters, ...allParameters };
+      const serviceId = allParamsResolved.service_id;
+      const action = allParamsResolved.action;
+
+      if (!serviceId || !action) {
+        console.log('[AndroidService] Skipping - missing serviceId or action:', { serviceId, action });
+        return;
+      }
+
+      try {
+        console.log('[AndroidService] Fetching default parameters for:', { serviceId, action });
+        const response = await fetch(`${API_CONFIG.PYTHON_BASE_URL}/api/android/services/${serviceId}/actions/${action}/parameters`, {
+          credentials: 'include'
+        });
+        const data = await response.json();
+        console.log('[AndroidService] Default parameters response:', data);
+
+        if (data.success && data.default_parameters) {
+          // Always update with new defaults when service/action changes
+          console.log('[AndroidService] Setting parameters to:', data.default_parameters);
+          onChange(data.default_parameters);
+        }
+      } catch (error) {
+        console.error('[AndroidService] Error loading default parameters:', error);
+      }
+    };
+
+    loadDefaultParameters();
+  }, [
+    selectedNode?.id,
+    parameter.name,
+    allParameters?.service_id,
+    allParameters?.action,
+    nodeParameters?.service_id,
+    nodeParameters?.action
+  ]);
+
+  // Subscribe to dynamic parameter updates
+  useEffect(() => {
+    if (!selectedNode) return;
+
+
+    const unsubscribe = DynamicParameterService.subscribe((nodeId, parameterName, options) => {
+
+      if (nodeId === selectedNode.id && parameterName === parameter.name) {
+        setDynamicOptions(options);
+      }
+    });
+
+    // Check for existing dynamic options
+    const existingOptions = DynamicParameterService.getParameterOptions(selectedNode.id, parameter.name);
+
+    if (existingOptions) {
+      setDynamicOptions(existingOptions);
+    }
+
+    return unsubscribe;
+  }, [selectedNode?.id, parameter.name]);
+
+  // Handle API key validation success
+  const handleApiKeyValidationSuccess = (models: string[]) => {
+
+    if (!selectedNode) {
+      console.warn('ParameterRenderer: No selected node for dynamic options update');
+      return;
+    }
+
+    // Always update the 'model' parameter with dynamic options when API key validation succeeds
+    // This callback can be triggered from any parameter (usually the apiKey parameter)
+    const modelOptions = DynamicParameterService.createModelOptions(models);
+    DynamicParameterService.updateParameterOptions(selectedNode.id, 'model', modelOptions);
+
+    // If this callback is triggered from the model parameter itself and it's empty, auto-select first model
+    if (parameter.name === 'model' && !currentValue && models.length > 0) {
+      onChange(models[0]);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+
+    // Check if this is a coordinate parameter (lat/lng) for special handling
+    const paramName = parameter.name.toLowerCase();
+    const isCoordinate = paramName.includes('lat') || paramName.includes('lng') ||
+                        paramName.includes('lon') || paramName === 'latitude' ||
+                        paramName === 'longitude';
+
+    // Try to get JSON data first (from connected node outputs)
+    const jsonData = e.dataTransfer.getData('application/json');
+    if (jsonData) {
+      try {
+        const parsedData = JSON.parse(jsonData);
+        if (parsedData.type === 'nodeVariable') {
+          // For coordinate parameters, try to extract actual numeric value from connected node data
+          if (isCoordinate && typeof parsedData.dataType === 'string' && parsedData.dataType === 'number') {
+            // Look for actual coordinate values in global execution data
+            // This is a simplified approach - in production you'd want more robust data access
+
+            // For now, use template string but mark it for coordinate processing
+            const existingValue = currentValue || '';
+            const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
+            const newValue = existingValue + (needsSpace ? ' ' : '') + parsedData.variableTemplate;
+            onChange(newValue);
+            return;
+          }
+
+          // Handle variable template data - use the template string
+          const existingValue = currentValue || '';
+          // Add smart spacing - add space if existing content doesn't end with space
+          const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
+          const newValue = existingValue + (needsSpace ? ' ' : '') + parsedData.variableTemplate;
+          onChange(newValue);
+          return;
+        }
+        if (parsedData.type === 'nodeOutput') {
+          // Handle node output data - use the actual value for direct mapping
+          onChange(parsedData.value);
+          return;
+        }
+      } catch (err) {
+        console.warn('Failed to parse JSON drag data:', err);
+      }
+    }
+
+    // Fallback to existing text/plain format (OutputPanel drag-drop)
+    const data = e.dataTransfer.getData('text/plain');
+    if (data && data.startsWith('{{') && data.endsWith('}}')) {
+      // For coordinate parameters, allow template strings but process them appropriately
+      if (isCoordinate) {
+        onChange(data); // Set the template directly for coordinate resolution
+        return;
+      }
+
+      // Append to existing content instead of replacing
+      const existingValue = currentValue || '';
+      // Add smart spacing - add space if existing content doesn't end with space
+      const needsSpace = existingValue && !existingValue.endsWith(' ') && existingValue.length > 0;
+      const newValue = existingValue + (needsSpace ? ' ' : '') + data;
+      onChange(newValue);
+    }
+  };
+
+  const renderInput = () => {
+    switch (parameter.type) {
+      case 'string':
+        // Check if this should be a textarea based on typeOptions.rows
+        const shouldUseTextarea = (parameter as any).typeOptions?.rows > 1;
+        // Check if this should be a password field
+        const isPassword = (parameter as any).typeOptions?.password;
+        // Check if this is a code editor
+        const isCodeEditor = (parameter as any).typeOptions?.editor === 'code';
+
+        if (shouldUseTextarea) {
+          // Use CodeEditor for code editing
+          if (isCodeEditor) {
+            // Show loading state while parameters are being fetched
+            if (isLoadingParameters) {
+              return (
+                <div style={{
+                  height: '100%',
+                  minHeight: '200px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: theme.colors.backgroundAlt,
+                  border: `1px solid ${theme.colors.border}`,
+                  borderRadius: theme.borderRadius.md,
+                  color: theme.colors.textMuted,
+                  fontSize: '14px'
+                }}>
+                  Loading code...
+                </div>
+              );
+            }
+            // Get language from typeOptions or default to python
+            const codeLanguage = (parameter as any).typeOptions?.editorLanguage || 'python';
+            return (
+              <CodeEditor
+                value={currentValue || ''}
+                onChange={onChange}
+                language={codeLanguage}
+                placeholder={parameter.placeholder}
+              />
+            );
+          }
+
+          // Regular textarea for non-code
+          return (
+            <textarea
+              value={currentValue || ''}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={parameter.placeholder}
+              rows={(parameter as any).typeOptions?.rows || 3}
+              spellCheck={true}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              style={{
+                width: '100%',
+                padding: '10px 12px',
+                border: isDragOver ? `2px solid ${theme.accent.cyan}` : `1px solid ${theme.colors.border}`,
+                borderRadius: '6px',
+                fontSize: '14px',
+                backgroundColor: isDragOver ? `${theme.accent.cyan}10` : theme.colors.backgroundAlt,
+                color: currentValue && currentValue.includes('{{') ? theme.accent.yellow : theme.colors.text,
+                outline: 'none',
+                transition: 'all 0.2s ease',
+                fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
+                resize: 'vertical',
+                minHeight: '80px',
+                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)',
+                lineHeight: '1.5'
+              }}
+              onFocus={(e) => {
+                e.target.style.borderColor = theme.accent.cyan;
+                e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
+              }}
+              onBlur={(e) => {
+                e.target.style.borderColor = theme.colors.border;
+                e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
+              }}
+            />
+          );
+        }
+
+        // Check if this parameter has API key validation
+        const validationArray = (parameter as any).validation;
+        const apiKeyValidation = validationArray?.find((v: any) => v.type === 'apiKey' && v.showValidateButton);
+
+        if (apiKeyValidation) {
+          // Resolve provider expression if it's a template like {{ $parameter["provider"] }}
+          let resolvedProvider = apiKeyValidation.provider;
+          if (typeof resolvedProvider === 'string' && resolvedProvider.includes('$parameter[')) {
+            // Extract parameter name from expression like {{ $parameter["provider"] }}
+            const match = resolvedProvider.match(/\$parameter\["([^"]+)"\]|\$parameter\['([^']+)'\]/);
+            if (match) {
+              const paramName = match[1] || match[2];
+              resolvedProvider = resolvedParameters[paramName] || resolvedProvider;
+            }
+          }
+
+          const resolvedValidationConfig = {
+            ...apiKeyValidation,
+            provider: resolvedProvider
+          };
+
+          return (
+            <APIKeyValidator
+              value={currentValue || ''}
+              onChange={onChange}
+              placeholder={parameter.placeholder}
+              validationConfig={resolvedValidationConfig}
+              onValidationSuccess={handleApiKeyValidationSuccess}
+              isDragOver={isDragOver}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            />
+          );
+        }
+
+        // Check if this parameter has dynamic options (like models after API key validation)
+
+        if (dynamicOptions.length > 0 && parameter.type === 'string') {
+          // Check if OpenRouter (has [FREE] tagged models)
+          const hasFreeModels = dynamicOptions.some(opt => String(opt.label || opt.value).includes('[FREE]'));
+
+          if (hasFreeModels) {
+            // Group into Free and Paid for OpenRouter using native select with optgroup
+            const freeModels = dynamicOptions.filter(opt => String(opt.label || opt.value).includes('[FREE]'));
+            const paidModels = dynamicOptions.filter(opt => !String(opt.label || opt.value).includes('[FREE]'));
+
+            return (
+              <select
+                value={currentValue || ''}
+                onChange={(e) => onChange(e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: theme.spacing.sm,
+                  border: `1px solid ${theme.colors.border}`,
+                  borderRadius: theme.borderRadius.md,
+                  fontSize: theme.fontSize.sm,
+                  outline: 'none',
+                  transition: 'border-color 0.2s ease',
+                  cursor: 'pointer',
+                  backgroundColor: theme.colors.background,
+                  color: theme.colors.text,
+                  fontFamily: 'system-ui, sans-serif'
+                }}
+                onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+                onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+              >
+                {!currentValue && (
+                  <option value="" disabled>
+                    Select a model...
+                  </option>
+                )}
+                <optgroup label={`Free Models (${freeModels.length})`}>
+                  {freeModels.map((option) => (
+                    <option key={String(option.value)} value={String(option.value)}>
+                      {option.label || option.name || String(option.value)}
+                    </option>
+                  ))}
+                </optgroup>
+                <optgroup label={`Paid Models (${paidModels.length})`}>
+                  {paidModels.map((option) => (
+                    <option key={String(option.value)} value={String(option.value)}>
+                      {option.label || option.name || String(option.value)}
+                    </option>
+                  ))}
+                </optgroup>
+              </select>
+            );
+          }
+
+          // Use native select for non-OpenRouter (original working code)
+          return (
+            <select
+              value={currentValue || ''}
+              onChange={(e) => onChange(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px 12px',
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: '6px',
+                fontSize: '14px',
+                outline: 'none',
+                transition: 'border-color 0.2s ease',
+                cursor: 'pointer',
+                backgroundColor: theme.colors.background,
+                color: theme.colors.text,
+                fontFamily: 'system-ui, sans-serif'
+              }}
+              onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+              onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+            >
+              {!currentValue && (
+                <option value="" disabled>
+                  Select a model...
+                </option>
+              )}
+              {dynamicOptions.map((option) => (
+                <option key={String(option.value)} value={String(option.value)}>
+                  {option.label || option.name || String(option.value)}
+                </option>
+              ))}
+            </select>
+          );
+        }
+
+        // Log why we're not using dynamic options for this parameter
+        if (parameter.type === 'string' && parameter.name === 'model') {
+        }
+
+        // Special case for group_id parameter - add Load Groups button
+        if (parameter.name === 'group_id') {
+          const storedGroupName = allParameters?.group_name || '';
+          return (
+            <GroupIdSelector
+              value={currentValue || ''}
+              onChange={onChange}
+              onNameChange={(name) => onParameterChange?.('group_name', name)}
+              storedName={storedGroupName}
+              placeholder={parameter.placeholder}
+              theme={theme}
+              isDragOver={isDragOver}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            />
+          );
+        }
+
+        // Special case for senderNumber parameter - add Load Members button (uses group_id)
+        if (parameter.name === 'senderNumber') {
+          const groupId = resolvedParameters?.group_id || allParameters?.group_id || '';
+          const storedSenderName = allParameters?.sender_name || '';
+          return (
+            <SenderNumberSelector
+              value={currentValue || ''}
+              onChange={onChange}
+              onNameChange={(name) => onParameterChange?.('sender_name', name)}
+              storedName={storedSenderName}
+              placeholder={parameter.placeholder}
+              theme={theme}
+              isDragOver={isDragOver}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+              groupId={groupId}
+            />
+          );
+        }
+
+        return (
+          <input
+            type={isPassword ? "password" : "text"}
+            value={currentValue || ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={parameter.placeholder}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              border: isDragOver ? `2px solid ${theme.accent.cyan}` : `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              fontSize: '14px',
+              backgroundColor: isDragOver ? `${theme.accent.cyan}10` : theme.colors.backgroundAlt,
+              color: currentValue && currentValue.includes('{{') ? theme.accent.yellow : theme.colors.text,
+              outline: 'none',
+              transition: 'all 0.2s ease',
+              fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif',
+              boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)'
+            }}
+            onFocus={(e) => {
+              e.target.style.borderColor = theme.accent.cyan;
+              e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
+            }}
+            onBlur={(e) => {
+              e.target.style.borderColor = theme.colors.border;
+              e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
+            }}
+          />
+        );
+
+      case 'number':
+
+        return (
+          <input
+            type="number"
+            value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
+            onChange={(e) => onChange(Number(e.target.value))}
+            min={getMin()}
+            max={getMax()}
+            step={getStep()}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              fontSize: '14px',
+              backgroundColor: isDragOver ? theme.colors.focusRing : theme.colors.background,
+              color: theme.colors.text,
+              outline: 'none',
+              transition: 'all 0.2s ease',
+              fontFamily: 'system-ui, sans-serif'
+            }}
+            onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+            onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+          />
+        );
+
+      case 'boolean':
+        return (
+          <label style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontFamily: 'system-ui, sans-serif',
+            color: theme.colors.text
+          }}>
+            <input
+              type="checkbox"
+              checked={currentValue || false}
+              onChange={(e) => onChange(e.target.checked)}
+              style={{ width: '16px', height: '16px', accentColor: theme.colors.focus }}
+            />
+            {parameter.displayName}
+          </label>
+        );
+
+      case 'select':
+      case 'options':
+        // Use dynamic options if available, otherwise use static options
+        const optionsToRender = dynamicOptions.length > 0 ? dynamicOptions : (parameter.options || []);
+        const selectOptions = optionsToRender.filter((option): option is import('../types/INodeProperties').INodePropertyOption =>
+          'value' in option
+        );
+
+        return (
+          <select
+            value={currentValue || parameter.default}
+            onChange={(e) => onChange(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px 12px',
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              fontSize: '14px',
+              outline: 'none',
+              transition: 'all 0.2s ease',
+              cursor: 'pointer',
+              backgroundColor: theme.colors.backgroundAlt,
+              color: theme.colors.text,
+              fontFamily: 'system-ui, sans-serif',
+              boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.05)',
+              appearance: 'none',
+              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23657b83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'right 12px center',
+              paddingRight: '36px'
+            }}
+            onFocus={(e) => {
+              e.target.style.borderColor = theme.accent.cyan;
+              e.target.style.boxShadow = `0 0 0 3px ${theme.accent.cyan}20, inset 0 1px 2px rgba(0,0,0,0.05)`;
+            }}
+            onBlur={(e) => {
+              e.target.style.borderColor = theme.colors.border;
+              e.target.style.boxShadow = 'inset 0 1px 2px rgba(0,0,0,0.05)';
+            }}
+          >
+            {selectOptions.map((option) => (
+              <option key={String(option.value)} value={String(option.value)}>
+                {option.label || option.name || String(option.value)}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'slider':
+        return (
+          <div>
+            <input
+              type="range"
+              min={getMin()}
+              max={getMax()}
+              step={getStep()}
+              value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
+              onChange={(e) => onChange(Number(e.target.value))}
+              style={{
+                width: '100%',
+                height: '8px',
+                backgroundColor: theme.colors.backgroundAlt,
+                borderRadius: '8px',
+                outline: 'none',
+                accentColor: theme.colors.focus
+              }}
+            />
+            <div style={{
+              textAlign: 'center',
+              fontSize: '12px',
+              color: theme.colors.textSecondary,
+              marginTop: '4px',
+              fontFamily: 'system-ui, sans-serif'
+            }}>
+              {currentValue !== undefined ? currentValue : (parameter.default || 0)}
+              {parameter.type === 'slider' ? '%' : ''}
+            </div>
+          </div>
+        );
+
+      case 'percentage':
+        return (
+          <div>
+            <input
+              type="range"
+              min={getMin()}
+              max={getMax()}
+              step={getStep()}
+              value={currentValue !== undefined ? currentValue : (parameter.default || 0)}
+              onChange={(e) => onChange(Number(e.target.value))}
+              style={{
+                width: '100%',
+                height: '8px',
+                backgroundColor: theme.colors.backgroundAlt,
+                borderRadius: '8px',
+                outline: 'none',
+                accentColor: theme.colors.success
+              }}
+            />
+            <div style={{
+              textAlign: 'center',
+              fontSize: '12px',
+              color: theme.colors.textSecondary,
+              marginTop: '4px',
+              fontFamily: 'system-ui, sans-serif'
+            }}>
+              {currentValue !== undefined ? currentValue : (parameter.default || 0)}%
+            </div>
+          </div>
+        );
+
+      case 'text':
+        return (
+          <input
+            type="text"
+            value={currentValue || ''}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={parameter.placeholder}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              fontSize: '14px',
+              backgroundColor: isDragOver ? theme.colors.focusRing : theme.colors.background,
+              color: currentValue && currentValue.includes('{{') ? theme.colors.templateVariable : theme.colors.text,
+              outline: 'none',
+              transition: 'all 0.2s ease',
+              fontFamily: currentValue && currentValue.includes('{{') ? 'monospace' : 'system-ui, sans-serif'
+            }}
+            onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+            onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+          />
+        );
+
+      case 'file':
+        const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+        const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+          const file = e.target.files?.[0];
+          if (!file) return;
+
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64 = (reader.result as string).split(',')[1]; // Remove data:mime;base64, prefix
+            // Store as object with base64 data, filename, and mime type
+            onChange({
+              type: 'upload',
+              data: base64,
+              filename: file.name,
+              mimeType: file.type || 'application/octet-stream'
+            });
+          };
+          reader.readAsDataURL(file);
+        };
+
+        const isUploadedFile = currentValue && typeof currentValue === 'object' && currentValue.type === 'upload';
+
+        // Determine file accept type based on context (e.g., messageType for WhatsApp)
+        const getFileAcceptType = () => {
+          const messageType = allParameters?.messageType;
+          if (messageType) {
+            switch (messageType) {
+              case 'image':
+                return 'image/*';
+              case 'video':
+                return 'video/*';
+              case 'audio':
+                return 'audio/*,.ogg,.opus,.mp3,.wav,.m4a';
+              case 'document':
+                return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar';
+              case 'sticker':
+                return 'image/webp,.webp';
+              default:
+                return (parameter as any).typeOptions?.accept || '*/*';
+            }
+          }
+          return (parameter as any).typeOptions?.accept || '*/*';
+        };
+
+        return (
+          <div>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+              <input
+                type="text"
+                value={isUploadedFile ? `[Uploaded] ${currentValue.filename}` : (currentValue || '')}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={parameter.placeholder || 'Enter file path or upload'}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                readOnly={isUploadedFile}
+                style={{
+                  flex: 1,
+                  padding: '8px 12px',
+                  border: isDragOver ? `2px solid ${theme.colors.focus}` : `1px solid ${theme.colors.border}`,
+                  borderRadius: '6px',
+                  fontSize: '13px',
+                  backgroundColor: isUploadedFile ? theme.colors.backgroundAlt : (isDragOver ? theme.colors.focusRing : theme.colors.background),
+                  color: isUploadedFile ? theme.colors.success : (currentValue && currentValue.includes?.('{{') ? theme.colors.templateVariable : theme.colors.text),
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
+                  fontFamily: 'monospace'
+                }}
+                onFocus={(e) => e.target.style.borderColor = theme.colors.focus}
+                onBlur={(e) => e.target.style.borderColor = theme.colors.border}
+              />
+              <input
+                key={`file-input-${allParameters?.messageType || 'default'}`}
+                ref={fileInputRef}
+                type="file"
+                onChange={handleFileUpload}
+                style={{ display: 'none' }}
+                accept={getFileAcceptType()}
+              />
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                style={{
+                  padding: '8px 12px',
+                  border: `1px solid ${theme.colors.focus}40`,
+                  borderRadius: '6px',
+                  backgroundColor: `${theme.colors.focus}18`,
+                  color: theme.colors.focus,
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  fontWeight: 600,
+                  transition: 'all 0.2s ease',
+                  whiteSpace: 'nowrap'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = `${theme.colors.focus}30`;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = `${theme.colors.focus}18`;
+                }}
+                title="Upload file"
+              >
+                Upload
+              </button>
+              {isUploadedFile && (
+                <button
+                  onClick={() => {
+                    onChange('');
+                    if (fileInputRef.current) fileInputRef.current.value = '';
+                  }}
+                  style={{
+                    padding: '8px 10px',
+                    border: `1px solid ${theme.colors.error}40`,
+                    borderRadius: '6px',
+                    backgroundColor: `${theme.colors.error}18`,
+                    color: theme.colors.error,
+                    cursor: 'pointer',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    transition: 'all 0.2s ease'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = `${theme.colors.error}30`;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = `${theme.colors.error}18`;
+                  }}
+                  title="Clear uploaded file"
+                >
+                  X
+                </button>
+              )}
+            </div>
+            <div style={{
+              fontSize: '11px',
+              color: theme.colors.textSecondary,
+              marginTop: '4px',
+              fontStyle: 'italic'
+            }}>
+              {isUploadedFile
+                ? `Size: ${(currentValue.data.length * 0.75 / 1024).toFixed(1)} KB | Type: ${currentValue.mimeType}`
+                : 'Enter server path or click Upload to select a file'}
+            </div>
+          </div>
+        );
+
+      case 'array':
+        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+        return (
+          <div>
+            <div style={{
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: '6px',
+              backgroundColor: theme.colors.background,
+              maxHeight: '120px',
+              overflowY: 'auto'
+            }}>
+              {parameter.options?.map((option) => (
+                <label key={option.value} style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '8px 12px',
+                  cursor: 'pointer',
+                  fontSize: '14px',
+                  fontFamily: 'system-ui, sans-serif',
+                  color: theme.colors.text,
+                  borderBottom: `1px solid ${theme.colors.border}`
+                }}>
+                  <input
+                    type="checkbox"
+                    checked={arrayValue.includes(option.value)}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        onChange([...arrayValue, option.value]);
+                      } else {
+                        onChange(arrayValue.filter((v: any) => v !== option.value));
+                      }
+                    }}
+                    style={{ width: '16px', height: '16px', accentColor: theme.colors.focus }}
+                  />
+                  {option.label}
+                </label>
+              ))}
+            </div>
+            <div style={{
+              fontSize: '11px',
+              color: theme.colors.textSecondary,
+              marginTop: '4px'
+            }}>
+              Selected: {arrayValue.length} item{arrayValue.length !== 1 ? 's' : ''}
+            </div>
+          </div>
+        );
+
+      case 'collection':
+        return <CollectionRenderer parameter={parameter} value={currentValue} onChange={onChange} allParameters={allParameters} theme={theme} />;
+
+      case 'fixedCollection':
+        return <FixedCollectionRenderer parameter={parameter} value={currentValue} onChange={onChange} allParameters={allParameters} theme={theme} />;
+
+      case 'notice':
+        // Info/notice display - shows informational text without input
+        return (
+          <div style={{
+            padding: '10px 12px',
+            backgroundColor: theme.colors.backgroundAlt,
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: '6px',
+            fontSize: '13px',
+            color: theme.colors.textSecondary,
+            lineHeight: '1.5'
+          }}>
+            {parameter.default || parameter.description || ''}
+          </div>
+        );
+
+      default:
+        return <div style={{ color: theme.colors.error, fontSize: '14px', padding: '8px 12px', backgroundColor: `${theme.colors.error}15`, border: `1px solid ${theme.colors.error}30`, borderRadius: '6px' }}>Unsupported parameter type: {parameter.type}</div>;
+    }
+  };
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {parameter.type !== 'boolean' && (
+        <label style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          marginBottom: '8px',
+          fontSize: '13px',
+          fontWeight: 600,
+          color: theme.colors.text,
+          fontFamily: 'system-ui, sans-serif',
+          flexShrink: 0
+        }}>
+          <span>{parameter.displayName}</span>
+          {parameter.required && (
+            <span style={{
+              color: theme.accent.red,
+              fontSize: '14px',
+              fontWeight: 700
+            }}>*</span>
+          )}
+        </label>
+      )}
+
+      <div style={{ flex: 1, minHeight: 0 }}>
+        {renderInput()}
+      </div>
+
+      {parameter.description && (
+        <div style={{
+          fontSize: '12px',
+          color: theme.colors.textSecondary,
+          marginTop: '6px',
+          lineHeight: '1.5',
+          fontFamily: 'system-ui, sans-serif',
+          paddingLeft: '2px',
+          flexShrink: 0
+        }}>
+          {parameter.description}
+        </div>
+      )}
+
+    </div>
+  );
+};
+
 export default ParameterRenderer;