script.js

// Navigation functionality - removed old NavigationManager class
console.log('Script.js loaded successfully!');
console.log('Testing JavaScript execution...');

// Chat functionality
class ChatManager {
    constructor() {
        this.chatInput = document.getElementById('chatInput');
        this.sendButton = document.getElementById('sendButton');
        this.chatMessages = document.getElementById('chatMessages');
        this.clearChatBtn = document.getElementById('clearChat');
        this.newChatBtn = document.getElementById('newChat');
        
        this.initializeEventListeners();
        this.autoResizeTextarea();
    }
    
    initializeEventListeners() {
        // Send message on button click
        this.sendButton.addEventListener('click', () => this.sendMessage());
        
        // Send message on Enter key (but allow Shift+Enter for new lines)
        this.chatInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.sendMessage();
            }
        });
        
        // Clear chat
        this.clearChatBtn.addEventListener('click', () => this.clearChat());
        
        // New chat
        this.newChatBtn.addEventListener('click', () => this.startNewChat());
        
    }
    
    autoResizeTextarea() {
        this.chatInput.addEventListener('input', () => {
            this.chatInput.style.height = 'auto';
            this.chatInput.style.height = Math.min(this.chatInput.scrollHeight, 200) + 'px';
        });
    }
    
    sendMessage() {
        const message = this.chatInput.value.trim();
        if (!message) return;
        
        // Add user message
        this.addMessage(message, 'user');
        
        // Clear input
        this.chatInput.value = '';
        this.chatInput.style.height = 'auto';
        
        // Simulate AI response
        setTimeout(() => {
            this.generateAIResponse(message);
        }, 1000);
    }
    
    addMessage(text, sender, isFlowResponse = false, messageType = 'normal') {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}-message`;
        
        const avatar = document.createElement('div');
        avatar.className = 'message-avatar';
        avatar.innerHTML = sender === 'user' ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>';
        
        const content = document.createElement('div');
        content.className = 'message-content';
        
        const messageText = document.createElement('div');
        messageText.className = 'message-text';
        
        // Set up styling first
        if (isFlowResponse) {
            messageText.className += ' flow-response-text';
            messageText.style.cursor = 'default';
            messageText.style.border = '2px solid #28a745';
            messageText.style.backgroundColor = '#f0fff4';
        } else if (messageType === 'error') {
            messageText.style.color = '#dc3545';
            messageText.style.backgroundColor = '#f8d7da';
            messageText.style.border = '1px solid #f5c6cb';
            messageText.style.borderRadius = '4px';
            messageText.style.padding = '0.75rem';
        } else if (sender === 'assistant') {
            messageText.className += ' assistant-text';
        }
        
        const messageTime = document.createElement('div');
        messageTime.className = 'message-time';
        messageTime.textContent = new Date().toLocaleTimeString();
        
        content.appendChild(messageText);
        content.appendChild(messageTime);
        
        messageDiv.appendChild(avatar);
        messageDiv.appendChild(content);
        
        this.chatMessages.appendChild(messageDiv);
        this.scrollToBottom();
        
        // Start typewriter effect for assistant messages
        if (sender === 'assistant') {
            this.typewriterEffect(messageText, text, isFlowResponse);
        } else {
            messageText.textContent = text;
        }
    }
    
    typewriterEffect(element, text, isFlowResponse = false) {
        let index = 0;
        const speed = isFlowResponse ? 4 : 6; // 5x faster: 20->4, 30->6
        const cursor = document.createElement('span');
        cursor.textContent = '|';
        cursor.style.animation = 'blink 1s infinite';
        cursor.style.color = '#007bff';
        element.appendChild(cursor);
        
        const typeInterval = setInterval(() => {
            if (index < text.length) {
                // Remove cursor, add character, add cursor back
                element.removeChild(cursor);
                element.textContent = text.substring(0, index + 1);
                element.appendChild(cursor);
                index++;
                
                // Scroll to bottom as text appears
                this.scrollToBottom();
            } else {
                // Remove cursor when done
                element.removeChild(cursor);
                clearInterval(typeInterval);
                
                // Auto-generate flow if it's a flow response
                if (isFlowResponse) {
                    setTimeout(() => {
                        if (window.flowsManager) {
                            window.flowsManager.generateFlowFromChat();
                        }
                    }, 1000);
                }
            }
        }, speed);
    }
    
    generateAIResponse(userMessage) {
        let response = '';
        let isFlowResponse = false;
        const lowerMessage = userMessage.toLowerCase();
        
        // Handle configuration choice responses FIRST (highest priority)
        if (window.flowsManager && window.flowsManager.isWaitingForConfigChoice) {
            window.flowsManager.handleConfigChoice(userMessage, window.flowsManager.pendingConfigComponent);
            return; // Don't process any other response logic
        }
        
        // Handle command actions
        if (lowerMessage.includes('run') || lowerMessage.includes('execute')) {
            if (window.flowsManager) {
                window.flowsManager.runFlow();
            }
            return; // Don't add additional response, the runFlow method handles messaging
        } else if (lowerMessage.includes('deploy')) {
            if (window.flowsManager) {
                window.flowsManager.deployFlow();
            }
            return; // Don't add additional response, the deployFlow method handles messaging
        } else if (lowerMessage.includes('export') || lowerMessage.includes('save')) {
            if (window.flowsManager) {
                window.flowsManager.exportFlow();
            }
            return; // Don't add additional response, the exportFlow method handles messaging
        } else if (lowerMessage.includes('new flow') || lowerMessage.includes('create flow')) {
            if (window.flowsManager) {
                window.flowsManager.createNewFlow();
            }
            return; // Don't add additional response, the createNewFlow method handles messaging
        } else if (lowerMessage.includes('payload') || lowerMessage.includes('sample')) {
            if (window.flowsManager) {
                window.flowsManager.showSamplePayload();
            }
            return; // Don't add additional response, the showSamplePayload method handles messaging
        } else if (lowerMessage.includes('response') || lowerMessage.includes('result')) {
            if (window.flowsManager) {
                window.flowsManager.showResponsePayloads();
            }
            return; // Don't add additional response, the showResponsePayloads method handles messaging
        }
        
        // Handle component configuration commands
        else if (lowerMessage.includes('configure') || lowerMessage.includes('config')) {
            if (window.flowsManager) {
                window.flowsManager.handleConfigCommand(userMessage);
            }
            return; // Don't add additional response, the handleConfigCommand method handles messaging
        }
        
        // Enhanced response logic with detailed reasoning and step-by-step explanations
        if (lowerMessage.includes('onboard') || lowerMessage.includes('employee')) {
            response = `🧠 Analysis & Reasoning:

I understand you want to create an Employee Onboarding Flow. Let me break down the integration requirements and design approach:

📋 Business Requirements Analysis:
• Trigger: New employee data received via HTTP POST
• Validation: Ensure all required fields are present and valid
• Parallel Processing: Multiple systems need to be provisioned simultaneously
• Data Aggregation: Collect responses from all systems
• Persistence: Log the onboarding status for audit trail

🔧 Technical Architecture:
Step 1: HTTP Listener receives JSON payload with employee details
Step 2: Input validation ensures data integrity (name, email, department)
Step 3: Scatter-Gather pattern initiates parallel API calls:
  • Directory System API → Create user account
  • Email System API → Create mailbox
  • Slack API → Invite to workspace
  • Workday API → Create employee record
Step 4: Gather component aggregates all responses
Step 5: Database connector logs final status

⚡ Performance Considerations:
• Parallel execution reduces total processing time
• Error handling ensures partial failures don't block entire process
• Response aggregation provides comprehensive status

🎯 Auto-Generating Flow: Creating the Employee Onboarding Flow with this architecture automatically...

⏳ Processing: Flow will appear on canvas in a moment with all components configured.`;
            isFlowResponse = true;
        } else if (lowerMessage.includes('mulesoft') || lowerMessage.includes('flow')) {
            response = `🧠 MuleSoft Integration Expertise:

📊 My Capabilities Analysis:
I specialize in MuleSoft integration patterns and can help you with:

🔧 Component Architecture:
• HTTP Listener: REST/SOAP endpoint configuration and security
• Transform Message: DataWeave 2.0 transformations and data mapping
• Database Connector: CRUD operations, connection pooling, transactions
• Choice Router: Conditional logic and routing strategies
• For Each & Batch Job: Bulk processing and iteration patterns

🔌 System Connectors:
• Salesforce Connector: CRM integration, object operations, bulk processing
• SAP Connector: ERP integration, IDoc processing, RFC calls
• File/FTP Connectors: File processing, batch operations, scheduling
• Email Connector: SMTP configuration, attachments, templates

🛠️ Development Support:
• Flow Design: Best practices, error handling, performance optimization
• DataWeave: Syntax, functions, data transformation patterns
• Debugging: Logging strategies, error diagnosis, troubleshooting
• Deployment: Environment management, configuration, monitoring

⚡ Quick Commands Available:
• run - Execute current flow with detailed monitoring
• deploy - Deploy to production with validation checks
• export - Save flow configuration and dependencies
• new flow - Create new integration flow from scratch

💡 What specific integration challenge are you working on?`;
        } else if (lowerMessage.includes('dataweave') || lowerMessage.includes('transform')) {
            response = `🧠 DataWeave 2.0 Deep Dive:

📋 Language Analysis:
DataWeave 2.0 is MuleSoft's functional transformation language designed for:
• Type Safety: Strong typing with automatic type inference
• Functional Programming: Immutable data structures and pure functions
• Performance: Optimized for large data processing
• Readability: Declarative syntax for complex transformations

🔧 Core Concepts:
1. Data Types: String, Number, Boolean, DateTime, Object, Array
2. Selectors: Dot notation, bracket notation, wildcards
3. Functions: Built-in functions for data manipulation
4. Operators: Mathematical, logical, comparison operators
5. Flow Control: if-else, unless, map, filter, reduce

💡 Common Patterns:
• Data Mapping: Transform between different data formats
• Data Filtering: Extract specific records or fields
• Data Aggregation: Group, sum, count, average operations
• Data Validation: Check data integrity and format

🎯 Transform Message Component:
The Transform Message component in your flows uses DataWeave for:
• Input/Output metadata definition
• Data transformation logic
• Error handling and validation
• Performance optimization

❓ What specific transformation are you working on?
I can help with syntax, functions, performance optimization, or debugging your DataWeave code.`;
        } else if (lowerMessage.includes('error') || lowerMessage.includes('debug')) {
            response = `🧠 Error Handling Strategy Analysis:

📊 Error Handling Importance:
Robust error handling is critical for production-ready integrations because:
• Reliability: Ensures system stability under failure conditions
• Observability: Provides clear error tracking and debugging
• User Experience: Graceful degradation and meaningful error messages
• Compliance: Audit trails and error logging for regulatory requirements

🔧 MuleSoft Error Handling Components:
1. Try-Catch Block:
  • Catches exceptions within specific scope
  • Allows custom error processing
  • Supports multiple catch blocks for different error types

2. Error Handlers:
  • On-Error-Continue: Logs error and continues processing
  • On-Error-Propagate: Logs error and stops processing
  • Global Error Handler: Application-wide error handling

3. Custom Error Handling:
  • Error response transformation
  • Retry mechanisms with exponential backoff
  • Dead letter queues for failed messages
  • Error notification systems

💡 Best Practices:
• Specific Error Types: Handle different exceptions appropriately
• Error Logging: Comprehensive logging with correlation IDs
• Error Recovery: Implement retry and fallback mechanisms
• Error Monitoring: Set up alerts and dashboards

❓ What type of error are you encountering?
I can help diagnose the issue and recommend appropriate error handling strategies.`;
        } else if (lowerMessage.includes('create') || lowerMessage.includes('new')) {
            response = `🧠 <strong>Flow Creation Strategy Analysis:</strong><br/><br/>

<strong>📊 Flow Design Process:</strong><br/>
Creating a new MuleSoft flow requires careful planning and architecture:<br/><br/>

<strong>🔧 Step-by-Step Flow Creation:</strong><br/>
<strong>1. Requirements Analysis:</strong><br/>
&nbsp;&nbsp;• Identify data sources and targets<br/>
&nbsp;&nbsp;• Define input/output formats<br/>
&nbsp;&nbsp;• Determine processing requirements<br/>
&nbsp;&nbsp;• Plan error handling strategy<br/><br/>

<strong>2. Component Selection:</strong><br/>
&nbsp;&nbsp;• <strong>HTTP Listener:</strong> REST/SOAP endpoints<br/>
&nbsp;&nbsp;• <strong>Transform Message:</strong> DataWeave transformations<br/>
&nbsp;&nbsp;• <strong>Database Connector:</strong> Data persistence<br/>
&nbsp;&nbsp;• <strong>Choice Router:</strong> Conditional logic<br/>
&nbsp;&nbsp;• <strong>For Each/Batch Job:</strong> Bulk processing<br/><br/>

<strong>3. Connector Integration:</strong><br/>
&nbsp;&nbsp;• <strong>Salesforce:</strong> CRM operations and bulk processing<br/>
&nbsp;&nbsp;• <strong>SAP:</strong> ERP integration and IDoc processing<br/>
&nbsp;&nbsp;• <strong>File/FTP:</strong> File-based integrations<br/>
&nbsp;&nbsp;• <strong>Email:</strong> Notification and document delivery<br/><br/>

<strong>4. Error Handling Implementation:</strong><br/>
&nbsp;&nbsp;• Try-Catch blocks for specific error handling<br/>
&nbsp;&nbsp;• Global error handlers for application-wide errors<br/>
&nbsp;&nbsp;• Retry mechanisms for transient failures<br/>
&nbsp;&nbsp;• Logging and monitoring setup<br/><br/>

<strong>5. Testing & Optimization:</strong><br/>
&nbsp;&nbsp;• Unit testing with mock services<br/>
&nbsp;&nbsp;• Performance testing and optimization<br/>
&nbsp;&nbsp;• Error scenario testing<br/>
&nbsp;&nbsp;• Documentation and deployment preparation<br/><br/>

<strong>⚡ Quick Start Options:</strong><br/>
• Type <strong>"new flow"</strong> to create a flow with best practices<br/>
• Type <strong>"employee onboarding"</strong> for a complete example<br/>
• Ask specific questions about component configuration<br/><br/>

<strong>❓ What type of integration are you building?</strong><br/>
I can guide you through the complete flow creation process with detailed explanations.`;
        } else if (lowerMessage.includes('connector')) {
            response = `🧠 <strong>MuleSoft Connector Architecture Analysis:</strong><br/><br/>

<strong>📊 Connector Ecosystem:</strong><br/>
MuleSoft provides a comprehensive set of connectors for enterprise integration:<br/><br/>

<strong>🔌 Available Connectors in Your Flows:</strong><br/>
<strong>1. Database Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> Select, Insert, Update, Delete, Stored Procedures<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> Connection pooling, transaction management<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> Data persistence, audit logging, configuration storage<br/><br/>

<strong>2. Salesforce Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> Query, Create, Update, Delete, Bulk operations<br/>
&nbsp;&nbsp;• <strong>Authentication:</strong> OAuth 2.0, Session-based authentication<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> CRM integration, lead management, opportunity tracking<br/><br/>

<strong>3. SAP Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> RFC calls, IDoc processing, BAPI operations<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> Connection parameters, authentication<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> ERP integration, master data synchronization<br/><br/>

<strong>4. File Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> Read, Write, List, Move, Delete<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> File patterns, encoding, streaming<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> Batch processing, file-based integrations<br/><br/>

<strong>5. FTP Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> Upload, Download, List, Delete<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> FTP/SFTP settings, security protocols<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> File transfer, legacy system integration<br/><br/>

<strong>6. Email Connector:</strong><br/>
&nbsp;&nbsp;• <strong>Operations:</strong> Send, Receive, List, Delete<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> SMTP/IMAP settings, authentication<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> Notifications, document delivery, alerts<br/><br/>

<strong>⚙️ Configuration Best Practices:</strong><br/>
• <strong>Connection Pooling:</strong> Optimize resource usage<br/>
• <strong>Security:</strong> Use secure authentication methods<br/>
• <strong>Error Handling:</strong> Implement retry and timeout strategies<br/>
• <strong>Monitoring:</strong> Set up connection health checks<br/><br/>

<strong>❓ Which connector are you working with?</strong><br/>
I can provide specific configuration guidance, operation details, and troubleshooting help.`;
        } else if (lowerMessage.includes('batch') || lowerMessage.includes('foreach')) {
            response = `🧠 <strong>Batch Processing Architecture Analysis:</strong><br/><br/>

<strong>📊 Processing Pattern Analysis:</strong><br/>
Batch processing in MuleSoft is designed for handling large datasets efficiently:<br/><br/>

<strong>🔧 Core Components:</strong><br/>
<strong>1. Batch Job Component:</strong><br/>
&nbsp;&nbsp;• <strong>Purpose:</strong> Process large datasets in chunks<br/>
&nbsp;&nbsp;• <strong>Phases:</strong> Load & Dispatch, Process, On Complete<br/>
&nbsp;&nbsp;• <strong>Benefits:</strong> Memory efficiency, fault tolerance, parallel processing<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> Bulk data migration, large file processing<br/><br/>

<strong>2. For Each Component:</strong><br/>
&nbsp;&nbsp;• <strong>Purpose:</strong> Iterate through collections sequentially<br/>
&nbsp;&nbsp;• <strong>Configuration:</strong> Collection source, batch size, error handling<br/>
&nbsp;&nbsp;• <strong>Benefits:</strong> Simple iteration, individual record processing<br/>
&nbsp;&nbsp;• <strong>Use Cases:</strong> API calls per record, data transformation<br/><br/>

<strong>⚡ Performance Considerations:</strong><br/>
<strong>Batch Job Advantages:</strong><br/>
• <strong>Memory Management:</strong> Processes data in configurable chunks<br/>
• <strong>Parallel Processing:</strong> Multiple threads for faster execution<br/>
• <strong>Fault Tolerance:</strong> Failed records don't stop entire batch<br/>
• <strong>Progress Tracking:</strong> Built-in monitoring and reporting<br/><br/>

<strong>For Each Advantages:</strong><br/>
• <strong>Simplicity:</strong> Easy to understand and implement<br/>
• <strong>Sequential Control:</strong> Predictable execution order<br/>
• <strong>Error Isolation:</strong> Individual record error handling<br/>
• <strong>Resource Control:</strong> Lower memory footprint<br/><br/>

<strong>🎯 When to Use Each:</strong><br/>
<strong>Use Batch Job for:</strong><br/>
• Large datasets (>1000 records)<br/>
• Independent record processing<br/>
• Performance-critical operations<br/>
• Fault tolerance requirements<br/><br/>

<strong>Use For Each for:</strong><br/>
• Small to medium datasets<br/>
• Sequential processing requirements<br/>
• Simple iteration logic<br/>
• API rate limiting considerations<br/><br/>

<strong>❓ What type of bulk operation are you implementing?</strong><br/>
I can help you choose the right approach and optimize the configuration.`;
        } else if (lowerMessage.includes('help') || lowerMessage.includes('commands')) {
            response = `🧠 MuleSoft Integration Assistant - Command Reference:

📊 Available Commands Analysis:
I provide comprehensive MuleSoft integration support with the following capabilities:

⚡ Flow Control Commands:
• run - Execute the current flow with detailed component monitoring
  → Provides real-time execution tracking and performance metrics
• deploy - Deploy the flow to production with validation checks
  → Includes dependency verification and environment configuration
• export - Export/save the flow configuration and dependencies
  → Generates complete project package for version control
• new flow - Create a new flow from scratch with best practices
  → Includes error handling, logging, and performance optimization

📋 Data & Testing Commands:
• payload - Show sample payload for testing and validation
  → Displays realistic test data for flow development
• response - Show response payload samples (success/failure)
  → Provides expected API response formats for testing
• employee onboarding - Generate the complete Employee Onboarding Flow
  → Creates production-ready flow with all components

🔧 Technical Support Areas:
• Component Design: HTTP Listener, Transform Message, Database Connector
• DataWeave: Transformations, functions, performance optimization
• Error Handling: Try-Catch, Error Handlers, retry mechanisms
• Connectors: Salesforce, SAP, File, FTP, Email configuration
• Performance: Batch processing, parallel execution, optimization
• Debugging: Logging strategies, error diagnosis, troubleshooting

💡 Usage Examples:
• Type "run" to execute your flow and see detailed component execution
• Type "payload" to view the sample employee data for testing
• Type "employee onboarding" to generate a complete integration flow
• Ask specific questions about DataWeave, connectors, or error handling

❓ What would you like to work on?
I'm ready to help with flow design, debugging, optimization, or any MuleSoft integration challenge!`;
        } else {
            response = `🧠 MuleSoft Integration Development Assistant:

📊 My Expertise Analysis:
I'm your comprehensive MuleSoft integration partner, specializing in:

🔧 Flow Architecture & Design:
• Component Selection: HTTP Listener, Transform Message, Database Connector, Choice Router
• Integration Patterns: Request-Reply, Fire-and-Forget, Scatter-Gather, Batch Processing
• Error Handling: Try-Catch blocks, Error Handlers, retry mechanisms
• Performance Optimization: Parallel processing, connection pooling, caching

🔌 System Connectors:
• Enterprise Systems: Salesforce, SAP, Workday, ServiceNow
• Data Sources: Database, File, FTP, Email, REST/SOAP APIs
• Cloud Platforms: AWS, Azure, Google Cloud integrations
• Legacy Systems: Mainframe, AS/400, custom applications

💻 Development Support:
• DataWeave 2.0: Transformations, functions, data mapping, validation
• Debugging: Logging strategies, error diagnosis, performance tuning
• Testing: Unit testing, integration testing, mock services
• Deployment: Environment management, configuration, monitoring

⚡ Quick Actions Available:
• run - Execute current flow with detailed monitoring
• deploy - Deploy to production with validation
• export - Save flow configuration and dependencies
• new flow - Create new integration from scratch

🎯 Current Flow Components:
Your Employee Onboarding Flow includes: HTTP Listener, Input Validation, Scatter-Gather pattern with Employee Directory/Gmail/Slack/Workday APIs, Response Aggregation, and Database Logging.

❓ What integration challenge can I help you solve?
I'm ready to assist with flow design, component configuration, error handling, performance optimization, or any MuleSoft development task!`;
        }
        
        this.addMessage(response, 'assistant', isFlowResponse);
    }
    
    clearChat() {
        this.chatMessages.innerHTML = `
            <div class="message assistant-message">
                <div class="message-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="message-content">
                    <div class="message-text">
                        Chat cleared! How can I help you with your MuleSoft integration flows today?
                    </div>
                    <div class="message-time">Just now</div>
                </div>
            </div>
        `;
    }
    
    startNewChat() {
        this.clearChat();
    }
    
    scrollToBottom() {
        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
    }
}

// MuleSoft Flows functionality
class FlowsManager {
    constructor() {
        this.createFlowBtn = document.getElementById('createFlow');
        this.runFlowBtn = document.getElementById('runFlow');
        this.deployFlowBtn = document.getElementById('deployFlow');
        this.exportFlowBtn = document.getElementById('exportFlow');
        this.flowDiagram = document.getElementById('flowDiagram');
        
        console.log('Button elements found:');
        console.log('createFlowBtn:', this.createFlowBtn);
        console.log('runFlowBtn:', this.runFlowBtn);
        console.log('deployFlowBtn:', this.deployFlowBtn);
        console.log('exportFlowBtn:', this.exportFlowBtn);
        
        this.flows = {
            'main-flow': {
                name: 'Employee Onboarding Flow',
                status: 'running',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'http-listener', label: 'HTTP Listener', details: 'POST /api/onboard' },
                    { type: 'validator', label: 'Validate Input', details: 'Check required fields' },
                    { type: 'scatter', label: 'Scatter', details: 'Start parallel calls' },
                    { type: 'directory-api', label: 'Employee Directory', details: 'Create user account' },
                    { type: 'email-api', label: 'Gmail', details: 'Create mailbox' },
                    { type: 'slack-api', label: 'Slack', details: 'Invite to workspace' },
                    { type: 'workday-api', label: 'Workday', details: 'Create employee record' },
                    { type: 'gather', label: 'Gather', details: 'Aggregate responses' },
                    { type: 'database-connector', label: 'Onboarding DB', details: 'Log status' },
                    { type: 'end', label: 'Flow End' }
                ]
            },
            'error-handler': {
                name: 'Global Error Handler',
                status: 'running',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'error-handler', label: 'Error Handler', details: 'Global Error Handler' },
                    { type: 'logger', label: 'Logger', details: 'Log Error Details' },
                    { type: 'set-variable', label: 'Set Variable', details: 'Set Error Context' },
                    { type: 'end', label: 'Flow End' }
                ]
            },
            'data-transform': {
                name: 'DataWeave Transform Flow',
                status: 'running',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'file-connector', label: 'File Connector', details: 'Read CSV File' },
                    { type: 'transform-message', label: 'Transform Message', details: 'DataWeave 2.0' },
                    { type: 'validator', label: 'Validator', details: 'Schema Validation' },
                    { type: 'salesforce-connector', label: 'Salesforce Connector', details: 'Create Records' },
                    { type: 'end', label: 'Flow End' }
                ]
            },
            'api-gateway': {
                name: 'API Gateway Flow',
                status: 'running',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'http-listener', label: 'HTTP Listener', details: 'POST /api/gateway' },
                    { type: 'choice-router', label: 'Choice Router', details: 'Route by Content Type' },
                    { type: 'logger', label: 'Logger', details: 'Log Request' },
                    { type: 'end', label: 'Flow End' }
                ]
            },
            'batch-processing': {
                name: 'Batch Processing Flow',
                status: 'stopped',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'batch-job', label: 'Batch Job', details: 'Process Large Dataset' },
                    { type: 'foreach', label: 'For Each', details: 'Process Each Record' },
                    { type: 'transform-message', label: 'Transform Message', details: 'DataWeave 2.0' },
                    { type: 'database-connector', label: 'Database Connector', details: 'Bulk Insert' },
                    { type: 'end', label: 'Flow End' }
                ]
            },
            'sap-integration': {
                name: 'SAP Integration Flow',
                status: 'running',
                nodes: [
                    { type: 'start', label: 'Flow Start' },
                    { type: 'http-listener', label: 'HTTP Listener', details: 'GET /sap/orders' },
                    { type: 'sap-connector', label: 'SAP Connector', details: 'RFC Call' },
                    { type: 'transform-message', label: 'Transform Message', details: 'DataWeave 2.0' },
                    { type: 'email-connector', label: 'Email Connector', details: 'Send Notification' },
                    { type: 'end', label: 'Flow End' }
                ]
            }
        };
        
        // Load sample payload and response payloads
        this.samplePayload = null;
        this.responsePayloads = null;
        this.loadSamplePayload();
        this.loadResponsePayloads();
        
        // Execution tracking
        this.executions = [];
        this.executionCounter = 0;
        
        // Component configurations storage
        this.componentConfigs = {};
        
        // Configuration choice waiting state
        this.isWaitingForConfigChoice = false;
        this.pendingConfigComponent = null;
        
        this.initializeEventListeners();
        this.initializeTabs();
        this.initializeConfigPanel();
        this.initializeConfigPanelResize();
        this.initializeComponentSeparator();
        this.initializeNavigation();
        this.initializeConnectorsPage();
        this.initializeProjectsPage();
        this.showZeroState();
    }
    
    async loadSamplePayload() {
        try {
            const response = await fetch('sample-payload.json');
            if (response.ok) {
                this.samplePayload = await response.json();
                console.log('Sample payload loaded:', this.samplePayload);
            } else {
                console.log('Sample payload file not found, using default payload');
                this.samplePayload = {
                    "employeeId": "E12345",
                    "firstName": "Ananya",
                    "lastName": "Rao",
                    "email": "ananya.rao@example.com",
                    "jobTitle": "Product Manager",
                    "department": "Product",
                    "location": "Bangalore",
                    "manager": {
                        "name": "Sujan Balachandran",
                        "email": "sujan.balachandran@company.com"
                    },
                    "startDate": "2025-10-20",
                    "systemsToProvision": {
                        "directoryAccount": true,
                        "emailAccount": true,
                        "slackAccount": true,
                        "vpnAccess": false
                    },
                    "hardwareRequest": {
                        "laptop": "MacBook Pro 14-inch",
                        "accessories": ["Docking Station", "Noise Cancelling Headset"]
                    },
                    "metadata": {
                        "requestedBy": "HR-System",
                        "requestTimestamp": "2025-10-16T10:30:00Z"
                    }
                };
            }
        } catch (error) {
            console.error('Error loading sample payload:', error);
            // Use default payload if file loading fails
            this.samplePayload = {
                "employeeId": "E12345",
                "firstName": "Ananya",
                "lastName": "Rao",
                "email": "ananya.rao@example.com",
                "jobTitle": "Product Manager",
                "department": "Product",
                "location": "Bangalore",
                "manager": {
                    "name": "Sujan Balachandran",
                    "email": "sujan.balachandran@company.com"
                },
                "startDate": "2025-10-20",
                "systemsToProvision": {
                    "directoryAccount": true,
                    "emailAccount": true,
                    "slackAccount": true,
                    "vpnAccess": false
                },
                "hardwareRequest": {
                    "laptop": "MacBook Pro 14-inch",
                    "accessories": ["Docking Station", "Noise Cancelling Headset"]
                },
                "metadata": {
                    "requestedBy": "HR-System",
                    "requestTimestamp": "2025-10-16T10:30:00Z"
                }
            };
        }
    }
    
    async loadResponsePayloads() {
        try {
            const response = await fetch('response-payloads.json');
            if (response.ok) {
                this.responsePayloads = await response.json();
                console.log('Response payloads loaded:', this.responsePayloads);
            } else {
                console.log('Response payloads file not found, using default payloads');
                this.responsePayloads = {
                    "success": {
                        "status": "success",
                        "employeeId": "E12345",
                        "message": "Employee provisioned successfully",
                        "provisionedSystems": {
                            "directoryAccount": {
                                "status": "created",
                                "userId": "okta-98213"
                            },
                            "emailAccount": {
                                "status": "created",
                                "accountId": "gmail-jane.austin"
                            },
                            "slackAccount": {
                                "status": "invited",
                                "userId": "U029384"
                            }
                        },
                        "timestamp": "2025-10-16T11:05:00Z"
                    },
                    "failure": {
                        "status": "failed",
                        "employeeId": "E12345",
                        "error": {
                            "message": "Slack provisioning failed",
                            "details": "Rate limit exceeded for Slack API",
                            "failedSystem": "Slack"
                        },
                        "partialProvision": {
                            "directoryAccount": "created",
                            "emailAccount": "created"
                        },
                        "timestamp": "2025-10-16T11:06:30Z"
                    }
                };
            }
        } catch (error) {
            console.error('Error loading response payloads:', error);
            // Use default payloads if file loading fails
            this.responsePayloads = {
                "success": {
                    "status": "success",
                    "employeeId": "E12345",
                    "message": "Employee provisioned successfully",
                    "provisionedSystems": {
                        "directoryAccount": {
                            "status": "created",
                            "userId": "okta-98213"
                        },
                        "emailAccount": {
                            "status": "created",
                            "accountId": "gmail-jane.austin"
                        },
                        "slackAccount": {
                            "status": "invited",
                            "userId": "U029384"
                        }
                    },
                    "timestamp": "2025-10-16T11:05:00Z"
                },
                "failure": {
                    "status": "failed",
                    "employeeId": "E12345",
                    "error": {
                        "message": "Slack provisioning failed",
                        "details": "Rate limit exceeded for Slack API",
                        "failedSystem": "Slack"
                    },
                    "partialProvision": {
                        "directoryAccount": "created",
                        "emailAccount": "created"
                    },
                    "timestamp": "2025-10-16T11:06:30Z"
                }
            };
        }
    }
    
    initializeEventListeners() {
        // Create new flow (header button)
        this.createFlowBtn.addEventListener('click', () => this.createNewFlow());
        
        // Create new flow (canvas button)
        const createFlowFromZero = document.getElementById('createFlowFromZero');
        if (createFlowFromZero) {
            createFlowFromZero.addEventListener('click', () => this.createNewFlow());
        }
        
        // Run flow
        this.runFlowBtn.addEventListener('click', () => this.runFlow());
        
        // Deploy flow
        this.deployFlowBtn.addEventListener('click', () => this.deployFlow());
        
        // Export flow
        this.exportFlowBtn.addEventListener('click', () => this.exportFlow());
        
        // Flow node interactions
        this.flowDiagram.addEventListener('click', (e) => {
            console.log('Flow diagram clicked, target:', e.target);
            console.log('Target classList:', e.target.classList);
            
            const node = e.target.closest('.flow-node');
            if (node) {
                console.log('Flow node clicked');
                this.showComponentConfig(node);
            }
            
            // Add component button interactions
            const addBtn = e.target.closest('.add-component-btn');
            console.log('Add button check:', addBtn);
            if (addBtn) {
                console.log('Add component button clicked');
                this.showAddComponentDialog(addBtn);
            }
        });
    }
    
    selectFlow(flowId, skipDesignErrors = false) {
        // Render flow diagram
        this.renderFlowDiagram(flowId);
        
        // Update flow properties
        this.updateFlowProperties(flowId);
        
        // Update design errors for the selected flow (unless skipped for new flows)
        if (!skipDesignErrors) {
            this.updateDesignErrors();
        }
    }
    
    showZeroState() {
        const zeroState = document.getElementById('zeroState');
        const flowNodesElement = document.getElementById('flowNodes');
        
        if (zeroState) {
            zeroState.style.display = 'flex';
        }
        if (flowNodesElement) {
            flowNodesElement.style.display = 'none';
        }
    }
    
    clearDesignErrors() {
        const errorsTableBody = document.getElementById('errorsTableBody');
        if (errorsTableBody) {
            errorsTableBody.innerHTML = '';
        }
        console.log('Design errors cleared');
    }
    
    getCurrentFlowId() {
        // For now, return the first flow ID or 'main-flow' if it exists
        // This is a simplified implementation - in a real app you'd track the selected flow
        if (this.flows['main-flow']) {
            return 'main-flow';
        }
        
        const flowIds = Object.keys(this.flows);
        return flowIds.length > 0 ? flowIds[0] : null;
    }
    
    generateFlowFromChat() {
        console.log('generateFlowFromChat called');
        console.log('flowDiagram element:', this.flowDiagram);
        console.log('Available flows:', this.flows);
        
        // Clear any existing design errors before generating new flow
        this.clearDesignErrors();
        
        // Step 1: Analysis and reasoning (already done in generateAIResponse)
        
        // Step 2: Flow generation in progress with typewriter effect
        this.addAgentMessage(`🔧 Flow Generation in Progress:

📊 Generation Process:
• Analyzing flow requirements and architecture
• Configuring HTTP Listener for employee data reception
• Setting up input validation for data integrity
• Implementing Scatter-Gather pattern for parallel processing
• Configuring API connectors (Employee Directory, Gmail, Slack, Workday)
• Setting up response aggregation and database logging

⚡ Components Being Created:
• HTTP Listener → Input Validation → Scatter
• Parallel Branches → Employee Directory, Gmail, Slack, Workday APIs
• Gather → Database Connector → Flow End

🎯 Status: Flow will appear on canvas momentarily with all components properly connected and configured.`);
        
        // Step 3: Wait for typewriter effect to complete, then generate flow on canvas
        setTimeout(() => {
        // Hide zero state
        const zeroState = document.querySelector('.zero-state');
        if (zeroState) {
            zeroState.style.display = 'none';
        }
        
        // Generate the employee onboarding flow automatically
        this.renderFlowDiagram('main-flow');
        this.updateFlowProperties('main-flow');
        
        // Create Employee Onboarding project in navigation
        this.createEmployeeOnboardingProject();
        
            // Update design errors to show connection string issues (with small delay to ensure DOM is ready)
            setTimeout(() => {
                this.updateDesignErrors();
            }, 100);
            
            // Step 4: Add completion message after flow is generated
        setTimeout(() => {
            this.addAgentMessage(`✅ Flow Generation Complete:

📊 Generated Components:
• HTTP Listener: Configured to receive employee onboarding requests
• Input Validation: Validates required fields (name, email, department)
• Scatter-Gather Pattern: Parallel processing for multiple system provisioning
• API Connectors: Employee Directory, Gmail, Slack, and Workday integrations
• Response Aggregation: Collects and processes all system responses
• Database Logging: Persists onboarding status for audit trail

📁 **Project Created:**
• Employee Onboarding project added to navigation
• Employee Onboarding flow created under the project

⚠️ **Design Errors Detected:**
• 5 connection string configuration errors found
• Components are NOT properly connected yet
• Flow execution is BLOCKED until errors are resolved

🔧 **Required Actions:**
• Go to the "Design Errors" tab to see all configuration issues
• Click "Inspect" on each error to set up connection strings
• Fix all connection string errors before testing

💡 Next Steps: Configure all components first, then you can run, deploy, or export this flow.`);
        }, 500);
        }, 3000); // Wait 3 seconds for typewriter effect to complete
    }
    
    createEmployeeOnboardingProject() {
        // Add Employee Onboarding project to navigation
        const projectsSubmenu = document.getElementById('projectsSubmenu');
        if (projectsSubmenu && !document.querySelector('[data-section="project1"]')) {
            // Create the project navigation item
            const projectItem = document.createElement('div');
            projectItem.className = 'nav-item nav-parent nav-subitem';
            projectItem.setAttribute('data-section', 'project1');
            projectItem.innerHTML = `
                <i class="fas fa-folder-open"></i>
                <span>Employee Onboarding</span>
            `;
            
            // Create the flows submenu for this project
            const flowsSubmenu = document.createElement('div');
            flowsSubmenu.className = 'nav-submenu';
            flowsSubmenu.id = 'project1Submenu';
            flowsSubmenu.innerHTML = `
                <a href="#" class="nav-item nav-subitem" data-section="employee-onboarding-flow">
                    <i class="fas fa-sitemap"></i>
                    <span>Employee Onboarding</span>
                </a>
            `;
            
            // Insert at the beginning of the projects submenu
            projectsSubmenu.insertBefore(projectItem, projectsSubmenu.firstChild);
            projectsSubmenu.insertBefore(flowsSubmenu, projectsSubmenu.children[1]);
            
            // Add click handler for the project
            projectItem.addEventListener('click', (e) => {
                e.preventDefault();
                this.toggleSubmenu('project1Submenu');
            });
            
            // Add click handler for the flow
            const flowLink = flowsSubmenu.querySelector('[data-section="employee-onboarding-flow"]');
            flowLink.addEventListener('click', (e) => {
                e.preventDefault();
                this.showSection('employee-onboarding-flow');
            });
        }
        
        // Add Employee Onboarding project to project explorer
        const projectList = document.querySelector('.project-list');
        if (projectList && !document.querySelector('[data-project="employee-onboarding"]')) {
            const projectItem = document.createElement('div');
            projectItem.className = 'project-item';
            projectItem.setAttribute('data-project', 'employee-onboarding');
            projectItem.innerHTML = `
                <div class="project-icon">
                    <i class="fas fa-folder-open"></i>
                </div>
                <div class="project-info">
                    <h3>Employee Onboarding</h3>
                    <p>Flows for employee registration and onboarding</p>
                    <div class="project-stats">
                        <span class="stat"><i class="fas fa-sitemap"></i> 1 Flow</span>
                        <span class="stat"><i class="fas fa-clock"></i> Just created</span>
                    </div>
                </div>
                <div class="project-actions">
                    <button class="btn-icon" title="Open"><i class="fas fa-external-link-alt"></i></button>
                    <button class="btn-icon" title="Settings"><i class="fas fa-cog"></i></button>
                </div>
            `;
            
            // Insert at the beginning of the project list
            projectList.insertBefore(projectItem, projectList.firstChild);
        }
    }
    
    toggleSubmenu(submenuId) {
        const submenu = document.getElementById(submenuId);
        if (submenu) {
            // Close all other submenus at the same level
            const allSubmenus = document.querySelectorAll('.nav-submenu');
            allSubmenus.forEach(menu => {
                if (menu.id !== submenuId) {
                    menu.classList.remove('expanded');
                }
            });
            
            // Toggle the current submenu
            submenu.classList.toggle('expanded');
        }
    }
    
    initializeConnectorsPage() {
        // Initialize category tabs
        const categoryTabs = document.querySelectorAll('.category-tab');
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Remove active class from all tabs
                categoryTabs.forEach(t => t.classList.remove('active'));
                // Add active class to clicked tab
                tab.classList.add('active');
                
                // Filter connectors by category
                const category = tab.getAttribute('data-category');
                this.filterConnectorsByCategory(category);
            });
        });
        
        // Initialize connector card actions
        this.initializeConnectorActions();
        
        // Initialize page actions
        this.initializeConnectorPageActions();
    }
    
    filterConnectorsByCategory(category) {
        const connectorCards = document.querySelectorAll('.connector-card');
        
        connectorCards.forEach(card => {
            const cardCategory = card.getAttribute('data-category');
            
            if (category === 'all' || cardCategory === category) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }
    
    initializeConnectorActions() {
        // Configure buttons
        const configureButtons = document.querySelectorAll('.connector-actions .btn-icon[title="Configure"]');
        configureButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const connectorCard = btn.closest('.connector-card');
                const connectorName = connectorCard.querySelector('.connector-info h3').textContent;
                this.configureConnector(connectorName);
            });
        });
        
        // Test connection buttons
        const testButtons = document.querySelectorAll('.connector-actions .btn-icon[title="Test Connection"]');
        testButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const connectorCard = btn.closest('.connector-card');
                const connectorName = connectorCard.querySelector('.connector-info h3').textContent;
                this.testConnector(connectorName);
            });
        });
        
        // View details buttons
        const detailsButtons = document.querySelectorAll('.connector-actions .btn-icon[title="View Details"]');
        detailsButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const connectorCard = btn.closest('.connector-card');
                const connectorName = connectorCard.querySelector('.connector-info h3').textContent;
                this.viewConnectorDetails(connectorName);
            });
        });
    }
    
    initializeConnectorPageActions() {
        // Add Connector button
        const addConnectorBtn = document.getElementById('addConnectorBtn');
        if (addConnectorBtn) {
            addConnectorBtn.addEventListener('click', () => {
                this.showAddConnectorDialog();
            });
        }
        
        // Test All Connections button
        const testAllBtn = document.getElementById('testAllConnectionsBtn');
        if (testAllBtn) {
            testAllBtn.addEventListener('click', () => {
                this.testAllConnections();
            });
        }
    }
    
    configureConnector(connectorName) {
        this.addAgentMessage(`🔧 **Configuring ${connectorName}**

Setting up connection parameters for ${connectorName}:

**Configuration Options:**
• **Connection String** - Select from available environments
• **Authentication** - Configure credentials and tokens
• **Data Mapper** - Set up field mappings
• **Advanced Settings** - Timeout, retry policies, etc.

**Available Environments:**
• Production - Live environment
• Staging - Testing environment  
• Development - Local development

Would you like me to help you configure the connection string for ${connectorName}?`);
    }
    
    testConnector(connectorName) {
        this.addAgentMessage(`🧪 **Testing ${connectorName} Connection**

Running connection test for ${connectorName}...

**Test Results:**
✅ Connection successful
✅ Authentication verified
✅ API endpoints accessible
✅ Response time: 245ms

**Connection Details:**
• Environment: Production
• Status: Active
• Last tested: Just now
• Response time: 245ms

The ${connectorName} connector is working properly and ready for use in your flows.`);
    }
    
    viewConnectorDetails(connectorName) {
        this.addAgentMessage(`📋 **${connectorName} Connector Details**

**Connector Information:**
• **Type:** ${this.getConnectorType(connectorName)}
• **Version:** 1.0.0
• **Status:** Active
• **Last Updated:** 2 hours ago

**Connection Details:**
• **Production:** Connected (245ms response time)
• **Staging:** Connected (189ms response time)
• **Development:** Not configured

**Configuration:**
• **Authentication:** OAuth 2.0
• **Rate Limits:** 1000 requests/hour
• **Timeout:** 30 seconds
• **Retry Policy:** 3 attempts with exponential backoff

**Usage in Flows:**
• Employee Onboarding Flow (Active)
• Customer Management Flow (Active)
• Order Processing Flow (Draft)

**Recent Activity:**
• Last successful connection: 5 minutes ago
• Total requests today: 1,247
• Error rate: 0.2%`);
    }
    
    getConnectorType(connectorName) {
        const typeMap = {
            'Employee Directory': 'API Connector',
            'Gmail': 'Email Connector',
            'Slack': 'Messaging Connector',
            'Workday': 'HR System Connector',
            'Onboarding DB': 'Database Connector',
            'Salesforce': 'CRM Connector'
        };
        return typeMap[connectorName] || 'Custom Connector';
    }
    
    showAddConnectorDialog() {
        this.addAgentMessage(`➕ **Add New Connector**

Choose a connector type to add to your configuration:

**Available Connectors:**
• **Database Connectors** - PostgreSQL, MySQL, Oracle, SQL Server
• **API Connectors** - REST, SOAP, GraphQL endpoints
• **Cloud Connectors** - AWS, Azure, Google Cloud services
• **SaaS Connectors** - Salesforce, ServiceNow, Workday
• **Messaging Connectors** - RabbitMQ, Apache Kafka, JMS
• **File Connectors** - FTP, SFTP, Amazon S3, Azure Blob

**Popular Connectors:**
• **Salesforce** - CRM and sales automation
• **ServiceNow** - IT service management
• **SAP** - Enterprise resource planning
• **Oracle** - Database and applications
• **Microsoft Dynamics** - Business applications

Which type of connector would you like to add?`);
    }
    
    testAllConnections() {
        this.addAgentMessage(`🧪 **Testing All Connections**

Running comprehensive connection tests for all configured connectors...

**Test Results:**

✅ **Employee Directory** - Production: Connected (245ms)
✅ **Employee Directory** - Staging: Connected (189ms)
❌ **Employee Directory** - Development: Connection failed

✅ **Gmail** - Production: Connected (156ms)
✅ **Gmail** - Staging: Connected (134ms)
❌ **Gmail** - Development: Connection failed

✅ **Slack** - Production: Connected (98ms)
✅ **Slack** - Staging: Connected (87ms)
❌ **Slack** - Development: Connection failed

✅ **Workday** - Production: Connected (312ms)
✅ **Workday** - Staging: Connected (278ms)
❌ **Workday** - Development: Connection failed

✅ **Onboarding DB** - Production: Connected (45ms)
✅ **Onboarding DB** - Staging: Connected (52ms)
❌ **Onboarding DB** - Development: Connection failed

❌ **Salesforce** - Production: Not configured
❌ **Salesforce** - Sandbox: Not configured

**Summary:**
• **Total Connections:** 12
• **Successful:** 8 (67%)
• **Failed:** 4 (33%)
• **Not Configured:** 2

**Recommendations:**
• Configure development environments for all connectors
• Set up Salesforce connector for CRM integration
• Review failed connections and update credentials`);
    }

    // Projects Page Methods
    initializeProjectsPage() {
        // Initialize project category tabs
        const projectCategoryTabs = document.querySelectorAll('.projects-page .category-tab');
        projectCategoryTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Remove active class from all tabs
                projectCategoryTabs.forEach(t => t.classList.remove('active'));
                // Add active class to clicked tab
                tab.classList.add('active');
                // Filter projects by category
                const category = tab.getAttribute('data-category');
                this.filterProjectsByCategory(category);
            });
        });

        // Initialize project actions
        this.initializeProjectActions();

        // Initialize page-level actions
        this.initializeProjectPageActions();
    }

    filterProjectsByCategory(category) {
        const projectCards = document.querySelectorAll('.project-card');
        projectCards.forEach(card => {
            const cardCategory = card.getAttribute('data-category');
            if (category === 'all' || cardCategory === category) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    }

    initializeProjectActions() {
        // Initialize project card action buttons
        const projectCards = document.querySelectorAll('.project-card');
        projectCards.forEach(card => {
            const actionButtons = card.querySelectorAll('.project-actions .btn-icon');
            actionButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const action = button.getAttribute('title');
                    const projectName = card.querySelector('.project-info h3').textContent;
                    this.handleProjectAction(action, projectName);
                });
            });
        });
    }

    initializeProjectPageActions() {
        // Initialize "Create Project" button
        const addProjectBtn = document.getElementById('addProjectBtn');
        if (addProjectBtn) {
            addProjectBtn.addEventListener('click', () => {
                this.showAddProjectDialog();
            });
        }

        // Initialize "Import Project" button
        const importProjectBtn = document.getElementById('importProjectBtn');
        if (importProjectBtn) {
            importProjectBtn.addEventListener('click', () => {
                this.showImportProjectDialog();
            });
        }
    }

    handleProjectAction(action, projectName) {
        switch (action) {
            case 'Open Project':
                this.openProject(projectName);
                break;
            case 'Deploy':
                this.deployProject(projectName);
                break;
            case 'Settings':
                this.configureProject(projectName);
                break;
            case 'Delete':
                this.deleteProject(projectName);
                break;
        }
    }

    openProject(projectName) {
        this.addAgentMessage(`📂 **Opening Project: ${projectName}**

Loading project details and flows...

**Project Information:**
• **Name:** ${projectName}
• **Status:** Active
• **Last Modified:** 2 hours ago
• **Flows:** 3 active flows

**Available Actions:**
• View flow diagrams
• Edit flow configurations
• Monitor flow executions
• Deploy to environments`);
    }

    deployProject(projectName) {
        this.addAgentMessage(`🚀 **Deploying Project: ${projectName}**

Preparing deployment package...

**Deployment Steps:**
1. ✅ Validating project configuration
2. ✅ Building deployment package
3. ✅ Uploading to target environment
4. ✅ Starting flows
5. ✅ Running health checks

**Deployment Complete!**
• **Environment:** Production
• **Status:** All flows running
• **Health:** All systems operational
• **Monitoring:** Enabled`);
    }

    configureProject(projectName) {
        this.addAgentMessage(`⚙️ **Configuring Project: ${projectName}**

Opening project settings...

**Configuration Options:**
• **General Settings** - Name, description, category
• **Environment Variables** - API keys, endpoints, credentials
• **Security Policies** - Authentication, authorization, encryption
• **Monitoring** - Logging, metrics, alerts
• **Deployment** - Target environments, deployment policies

**Current Settings:**
• **Category:** HR
• **Environment:** Development
• **Security Level:** Standard
• **Monitoring:** Basic`);
    }

    deleteProject(projectName) {
        this.addAgentMessage(`🗑️ **Delete Project: ${projectName}**

⚠️ **Warning:** This action cannot be undone!

**What will be deleted:**
• All flows in this project
• All configurations and settings
• All deployment history
• All monitoring data

**Confirmation Required:**
Type "CONFIRM DELETE" to proceed with deletion.

**Alternative Actions:**
• Archive project instead of deleting
• Export project before deletion
• Transfer ownership to another user`);
    }

    showAddProjectDialog() {
        this.addAgentMessage(`➕ **Create New Project**

Please provide the following details:

**Required Information:**
• **Project Name** - Unique identifier for your project
• **Description** - Brief description of the project purpose
• **Category** - HR, Finance, Sales, Operations, or Custom
• **Environment** - Development, Staging, or Production

**Optional Settings:**
• **Template** - Start from a pre-built template
• **Connectors** - Pre-configure common connectors
• **Security Level** - Standard, Enhanced, or Custom

**Example:**
\`\`\`
Project Name: Customer Onboarding
Description: Automated customer onboarding workflow
Category: Sales
Environment: Development
\`\`\`

Type your project details to get started!`);
    }

    showImportProjectDialog() {
        this.addAgentMessage(`📥 **Import Project**

You can import a project from various sources:

**Import Sources:**
• **MuleSoft Exchange** - Import from Anypoint Exchange
• **Anypoint Platform** - Import from existing platform projects
• **Local File** - Upload project archive (.zip)
• **Git Repository** - Clone from version control
• **Template Library** - Use pre-built project templates

**Supported Formats:**
• MuleSoft project archives
• RAML/OAS API specifications
• JSON configuration files
• Git repositories (GitHub, GitLab, Bitbucket)

**Import Process:**
1. Select import source
2. Provide connection details
3. Choose import options
4. Review and confirm
5. Deploy imported project

Please specify your import source and provide the necessary details.`);
    }

    showProjectsPage() {
        // Hide all pages
        const projectExplorer = document.getElementById('projectExplorer');
        const flowsCanvasContainer = document.getElementById('flowsCanvasContainer');
        const connectorsPage = document.getElementById('connectorsPage');
        const toolsPage = document.getElementById('toolsPage');
        const projectsPage = document.getElementById('projectsPage');
        
        if (projectExplorer) projectExplorer.style.display = 'none';
        if (flowsCanvasContainer) flowsCanvasContainer.style.display = 'none';
        if (connectorsPage) connectorsPage.style.display = 'none';
        if (toolsPage) toolsPage.style.display = 'none';
        if (projectsPage) projectsPage.style.display = 'flex';
        
        this.addAgentMessage(`📁 **Projects Management**

Manage your MuleSoft integration projects and flows:

**Available Projects:**
• **Employee Onboarding** - HR automation workflows (3 flows)
• **Customer Management** - Sales and support processes (5 flows)
• **Order Processing** - E-commerce integration flows (2 flows)
• **Financial Reporting** - Accounting automation (4 flows)

**Project Categories:**
• **HR** - Human resources and employee management
• **Finance** - Financial reporting and accounting
• **Sales** - Customer relationship management
• **Operations** - Business process automation

**Quick Actions:**
• Click on any project card to open it
• Use "Create Project" to start a new integration
• Use "Import Project" to bring in existing projects
• Filter by category using the tabs above

Each project contains multiple flows that work together to automate business processes.`);
    }

    showConnectorsPage() {
        // Hide all pages
        const projectExplorer = document.getElementById('projectExplorer');
        const flowsCanvasContainer = document.getElementById('flowsCanvasContainer');
        const projectsPage = document.getElementById('projectsPage');
        const toolsPage = document.getElementById('toolsPage');
        const connectorsPage = document.getElementById('connectorsPage');
        
        if (projectExplorer) projectExplorer.style.display = 'none';
        if (flowsCanvasContainer) flowsCanvasContainer.style.display = 'none';
        if (projectsPage) projectsPage.style.display = 'none';
        if (toolsPage) toolsPage.style.display = 'none';
        if (connectorsPage) connectorsPage.style.display = 'flex';
        
        this.addAgentMessage(`🔌 **Connectors Configuration**

Manage all your external system connections in one place:

**Available Connectors:**
• **Employee Directory** - Active Directory & HR Systems
• **Gmail** - Email & Communication
• **Slack** - Team Communication
• **Workday** - HR Management System
• **Onboarding DB** - PostgreSQL Database
• **Salesforce** - CRM & Sales Platform

**Features:**
• **Category Filtering** - Filter by SaaS, Databases, Messaging, Files
• **Connection Testing** - Test individual or all connections
• **Configuration Management** - Set up connection strings and authentication
• **Status Monitoring** - View connection health and performance
• **Add New Connectors** - Expand your integration capabilities

**Quick Actions:**
• Click on any connector card to view details
• Use the category tabs to filter connectors
• Test connections to verify they're working
• Configure new connectors as needed`);
    }
    
    showToolsPage() {
        // Hide all pages
        const projectExplorer = document.getElementById('projectExplorer');
        const flowsCanvasContainer = document.getElementById('flowsCanvasContainer');
        const projectsPage = document.getElementById('projectsPage');
        const connectorsPage = document.getElementById('connectorsPage');
        const toolsPage = document.getElementById('toolsPage');
        
        if (projectExplorer) projectExplorer.style.display = 'none';
        if (flowsCanvasContainer) flowsCanvasContainer.style.display = 'none';
        if (projectsPage) projectsPage.style.display = 'none';
        if (connectorsPage) connectorsPage.style.display = 'none';
        if (toolsPage) toolsPage.style.display = 'flex';
        
        this.addAgentMessage(`🔧 **Tools & Utilities**

This section will contain various tools and utilities for your integration development:

**Planned Features:**
• **Code Generators** - Generate MuleSoft flows, DataWeave transformations
• **API Testing** - Test REST APIs and SOAP services
• **Data Transformation** - Convert between different data formats
• **Schema Validators** - Validate JSON, XML, and other schemas
• **Performance Tools** - Monitor and optimize flow performance
• **Debugging Utilities** - Troubleshoot integration issues

**Coming Soon:**
Tools and utilities will be added here as they become available.`);
    }
    
    renderFlowDiagram(flowId) {
        const flow = this.flows[flowId];
        if (!flow) {
            console.log('Flow not found:', flowId);
            return;
        }
        
        console.log('Rendering flow:', flow);
        
        let diagramHTML = '';
        let i = 0;
        
        while (i < flow.nodes.length) {
            const node = flow.nodes[i];
            const nodeClass = this.getNodeClass(node.type);
            const icon = this.getNodeIcon(node.type);
            
            // Handle scatter-gather pattern
            if (node.type === 'scatter') {
                // Start scatter-gather container
                diagramHTML += '<div class="scatter-gather-container">';
                
                // Add scatter node
                diagramHTML += `
                <div class="flow-${node.type}">
                    <div class="flow-node ${nodeClass}">
                        <i class="${icon}"></i>
                        <span class="node-title">${node.label}</span>
                        ${node.details ? `<div class="node-details"><small>${node.details}</small></div>` : ''}
                    </div>
                </div>
                `;
                
                // Add parallel branches
                const parallelNodes = [];
                i++;
                while (i < flow.nodes.length && flow.nodes[i].type !== 'gather') {
                    parallelNodes.push(flow.nodes[i]);
                    i++;
                }
                
                // Create scatter-to-parallel connector
                diagramHTML += '<div class="scatter-to-parallel">';
                diagramHTML += '<div class="scatter-connector-line"></div>';
                diagramHTML += '<div class="add-component-btn" title="Add component">';
                diagramHTML += '<i class="fas fa-plus"></i>';
                diagramHTML += '</div>';
                diagramHTML += '</div>';
                
                // Create parallel layout with routes
                diagramHTML += '<div class="parallel-layout">';
                parallelNodes.forEach((parallelNode, index) => {
                    const parallelNodeClass = this.getNodeClass(parallelNode.type);
                    const parallelIcon = this.getNodeIcon(parallelNode.type);
                    
                    diagramHTML += `
                        <div class="parallel-route">
                            <div class="flow-${parallelNode.type}">
                                <div class="flow-node ${parallelNodeClass}">
                                    <i class="${parallelIcon}"></i>
                                    <span class="node-title">${parallelNode.label}</span>
                                    ${parallelNode.details ? `<div class="node-details"><small>${parallelNode.details}</small></div>` : ''}
                                </div>
                            </div>
                        </div>
                    `;
                });
                diagramHTML += '</div>';
                
                // Create parallel-to-gather connector
                diagramHTML += '<div class="parallel-to-gather">';
                diagramHTML += '<div class="gather-connector-line"></div>';
                diagramHTML += '<div class="add-component-btn" title="Add component">';
                diagramHTML += '<i class="fas fa-plus"></i>';
                diagramHTML += '</div>';
                diagramHTML += '</div>';
                
                // Add gather node if it exists
                if (i < flow.nodes.length && flow.nodes[i].type === 'gather') {
                    const gatherNode = flow.nodes[i];
                    const gatherNodeClass = this.getNodeClass(gatherNode.type);
                    const gatherIcon = this.getNodeIcon(gatherNode.type);
                    
                    diagramHTML += `
                        <div class="flow-${gatherNode.type}">
                            <div class="flow-node ${gatherNodeClass}">
                                <i class="${gatherIcon}"></i>
                                <span class="node-title">${gatherNode.label}</span>
                                ${gatherNode.details ? `<div class="node-details"><small>${gatherNode.details}</small></div>` : ''}
                            </div>
                        </div>
                    `;
                }
                
                // End scatter-gather container
                diagramHTML += '</div>';
            } else {
                // Regular sequential flow
                diagramHTML += `
                    <div class="flow-${node.type}">
                        <div class="flow-node ${nodeClass}">
                            <i class="${icon}"></i>
                            <span class="node-title">${node.label}</span>
                            ${node.details ? `<div class="node-details"><small>${node.details}</small></div>` : ''}
                        </div>
                    </div>
                    ${i < flow.nodes.length - 1 ? `
                        <div class="flow-connector">
                            <div class="connector-line"></div>
                            <div class="add-component-btn" title="Add component">
                                <i class="fas fa-plus"></i>
                            </div>
                        </div>
                    ` : ''}
                `;
            }
            
            i++;
        }
        
        console.log('Generated HTML:', diagramHTML);
        
        // Hide zero state and show flow nodes
        const zeroState = document.getElementById('zeroState');
        const flowNodesElement = document.getElementById('flowNodes');
        
        if (zeroState) {
            zeroState.style.display = 'none';
        }
        if (flowNodesElement) {
            flowNodesElement.style.display = 'block';
            flowNodesElement.innerHTML = diagramHTML;
        }
        
        // Add click handlers to flow components with a small delay to ensure DOM is ready
        setTimeout(() => {
            const flowNodeElements = document.querySelectorAll('.flow-node');
            console.log('Found flow nodes:', flowNodeElements.length);
            
            flowNodeElements.forEach(node => {
                node.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const titleElement = node.querySelector('.node-title');
                    if (titleElement) {
                        const componentType = titleElement.textContent;
                        console.log('Clicked on component:', componentType);
                        console.log('Config panel element:', this.configPanel);
                        this.openConfigPanel(componentType);
                    } else {
                        console.log('No .node-title found in node:', node);
                        // Fallback: try to get text content from the node itself
                        const componentType = node.textContent.trim() || 'Unknown Component';
                        this.openConfigPanel(componentType);
                    }
                });
            });
            
            // Add click-to-close functionality for flow canvas white space
            const flowCanvas = document.querySelector('.flow-canvas');
            const flowNodesContainer = document.getElementById('flowNodes');
            
            if (flowCanvas) {
                console.log('Adding click listener to flow canvas');
                flowCanvas.addEventListener('click', (e) => {
                    console.log('Flow canvas clicked, target:', e.target);
                    console.log('Flow canvas element:', flowCanvas);
                    console.log('Target === flowCanvas:', e.target === flowCanvas);
                    console.log('Target classList:', e.target.classList);
                    console.log('Target tagName:', e.target.tagName);
                    
                    // Close if clicking on the canvas itself, flow-diagram, or flow-nodes containers
                    if (e.target === flowCanvas || 
                        e.target.classList.contains('flow-diagram') || 
                        e.target.classList.contains('flow-nodes') ||
                        e.target.tagName === 'DIV' && e.target.classList.length === 0) {
                        console.log('Clicked on flow canvas white space - closing panels');
                        this.closeConfigPanel(); // This closes both config and add component panels
                    }
                });
            } else {
                console.log('Flow canvas not found');
            }
            
            // Also add click listener to flow-nodes container for better coverage
            if (flowNodesContainer) {
                console.log('Adding click listener to flow-nodes');
                flowNodesContainer.addEventListener('click', (e) => {
                    console.log('Flow nodes clicked, target:', e.target);
                    console.log('Target classList:', e.target.classList);
                    console.log('Target === flowNodesContainer:', e.target === flowNodesContainer);
                    
                    // Close if clicking on the flow-nodes container itself (empty space)
                    if (e.target === flowNodesContainer) {
                        console.log('Clicked on flow-nodes empty space - closing panels');
                        this.closeConfigPanel(); // This closes both config and add component panels
                    }
                });
            } else {
                console.log('Flow nodes not found');
            }
            
            // Add a more aggressive click listener to the entire document
            document.addEventListener('click', (e) => {
                // Don't interfere with add component button clicks
                const addBtn = e.target.closest('.add-component-btn');
                if (addBtn) {
                    console.log('Add component button clicked - not closing panels');
                    return; // Let the flow diagram click handler process this
                }
                
                // Check if we clicked outside of any config panel or add component panel
                const configPanel = document.getElementById('configPanel');
                const isConfigPanelOpen = configPanel && configPanel.style.display !== 'none';
                
                if (isConfigPanelOpen) {
                    // Check if click is outside the config panel
                    if (!configPanel.contains(e.target)) {
                        console.log('Clicked outside config panel - closing');
                        this.closeConfigPanel();
                    }
                }
                
                // Also check for add component panel (which uses the same configPanel container)
                // The add component panel is detected by checking the config title
                const configTitle = document.getElementById('configTitle');
                if (configTitle && configTitle.textContent === 'Add Component') {
                    // This is the add component panel, check if click is outside
                    if (!configPanel.contains(e.target)) {
                        console.log('Clicked outside add component panel - closing');
                        this.closeConfigPanel();
                    }
                }
            });
        }, 100);
    }
    
    getNodeClass(type) {
        const classes = {
            'start': 'start-node',
            'end': 'end-node',
            'http-listener': 'http-listener-node',
            'transform-message': 'transform-message-node',
            'database-connector': 'database-connector-node',
            'salesforce-connector': 'salesforce-connector-node',
            'sap-connector': 'sap-connector-node',
            'file-connector': 'file-connector-node',
            'ftp-connector': 'ftp-connector-node',
            'email-connector': 'email-connector-node',
            'batch-job': 'batch-job-node',
            'error-handler': 'error-handler-node',
            'logger': 'logger-node',
            'router': 'router-node',
            'validator': 'validator-node',
            'set-variable': 'set-variable-node',
            'choice-router': 'choice-router-node',
            'foreach': 'foreach-node',
            'scatter': 'scatter-node',
            'scatter-gather': 'scatter-gather-node',
            'directory-api': 'directory-api-node',
            'email-api': 'email-api-node',
            'slack-api': 'slack-api-node',
            'workday-api': 'workday-api-node',
            'gather': 'gather-node'
        };
        return classes[type] || 'default-node';
    }
    
    getNodeIcon(type) {
        const icons = {
            'start': 'fas fa-play',
            'end': 'fas fa-stop',
            'http-listener': 'fas fa-globe',
            'transform-message': 'fas fa-code',
            'database-connector': 'fas fa-database',
            'salesforce-connector': 'fas fa-cloud',
            'sap-connector': 'fas fa-building',
            'file-connector': 'fas fa-file',
            'ftp-connector': 'fas fa-upload',
            'email-connector': 'fas fa-envelope',
            'batch-job': 'fas fa-tasks',
            'error-handler': 'fas fa-exclamation-triangle',
            'logger': 'fas fa-file-alt',
            'router': 'fas fa-route',
            'validator': 'fas fa-check-circle',
            'set-variable': 'fas fa-tag',
            'choice-router': 'fas fa-code-branch',
            'foreach': 'fas fa-redo',
            'scatter': 'fas fa-share-alt',
            'scatter-gather': 'fas fa-sitemap',
            'directory-api': 'fas fa-users',
            'email-api': 'fab fa-google',
            'slack-api': 'fab fa-slack',
            'workday-api': 'fas fa-briefcase',
            'gather': 'fas fa-layer-group'
        };
        return icons[type] || 'fas fa-circle';
    }
    
    updateFlowProperties(flowId) {
        const flow = this.flows[flowId];
        if (!flow) return;
        
        const properties = document.querySelector('.flow-properties');
        if (!properties) {
            console.log('Flow properties element not found, skipping update');
            return;
        }
        
        const nameInput = properties.querySelector('input[type="text"]');
        const statusSelect = properties.querySelector('select');
        
        if (nameInput) nameInput.value = flow.name;
        if (statusSelect) statusSelect.value = flow.status;
    }
    
    showComponentConfig(node) {
        const nodeType = node.querySelector('span').textContent;
        const nodeDetails = node.querySelector('.node-details small');
        const details = nodeDetails ? nodeDetails.textContent : 'No additional details';
        
        // Remove any existing config panel
        const existingPanel = document.querySelector('.component-config-panel');
        if (existingPanel) {
            existingPanel.remove();
        }
        
        // Get component type from node class
        const nodeClasses = Array.from(node.classList);
        const componentType = nodeClasses.find(cls => cls.includes('-node'))?.replace('-node', '') || 'default';
        
        const panel = document.createElement('div');
        panel.className = 'component-config-panel';
        panel.innerHTML = `
            <div class="config-header">
                <h3>Configure ${nodeType}</h3>
                <button class="close-config-btn" onclick="this.closest('.component-config-panel').remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="config-content">
                <div class="config-section">
                    <label>Component Type:</label>
                    <input type="text" value="${nodeType}" readonly>
                </div>
                <div class="config-section">
                    <label>Description:</label>
                    <input type="text" value="${details}" placeholder="Enter component description">
                </div>
                ${this.getComponentSpecificConfig(componentType)}
                <div class="config-actions">
                    <button class="btn btn-primary" onclick="this.closest('.component-config-panel').remove()">Save</button>
                    <button class="btn btn-secondary" onclick="this.closest('.component-config-panel').remove()">Cancel</button>
                </div>
            </div>
        `;
        
        // Append to right pane
        const rightPane = document.querySelector('.right-pane');
        rightPane.appendChild(panel);
    }
    
    getComponentSpecificConfig(componentType) {
        const configs = {
            'http-listener': `
                <div class="config-section">
                    <label>HTTP Method:</label>
                    <select>
                        <option value="GET">GET</option>
                        <option value="POST" selected>POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                    </select>
                </div>
                <div class="config-section">
                    <label>Path:</label>
                    <input type="text" value="/api/onboard" placeholder="Enter API path">
                </div>
                <div class="config-section">
                    <label>Port:</label>
                    <input type="number" value="8081" placeholder="Enter port number">
                </div>
            `,
            'validator': `
                <div class="config-section">
                    <label>Schema Type:</label>
                    <select>
                        <option value="json">JSON Schema</option>
                        <option value="xml">XML Schema</option>
                        <option value="csv">CSV Schema</option>
                    </select>
                </div>
                <div class="config-section">
                    <label>Required Fields:</label>
                    <input type="text" value="name, department, email" placeholder="Comma-separated fields">
                </div>
            `,
            'database-connector': `
                <div class="config-section">
                    <label>Operation:</label>
                    <select>
                        <option value="insert" selected>Insert</option>
                        <option value="update">Update</option>
                        <option value="delete">Delete</option>
                        <option value="select">Select</option>
                    </select>
                </div>
                <div class="config-section">
                    <label>Table Name:</label>
                    <input type="text" value="onboarding_log" placeholder="Enter table name">
                </div>
                <div class="config-section">
                    <label>Connection:</label>
                    <input type="text" value="" placeholder="Connection reference">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('database-connector')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'directory-api': `
                <div class="config-section">
                    <label>API Endpoint:</label>
                    <input type="text" value="https://directory.company.com/api/users" placeholder="Enter API endpoint">
                </div>
                <div class="config-section">
                    <label>Authentication:</label>
                    <select>
                        <option value="basic">Basic Auth</option>
                        <option value="oauth" selected>OAuth 2.0</option>
                        <option value="api-key">API Key</option>
                    </select>
                </div>
            `,
            'email-api': `
                <div class="config-section">
                    <label>Email Provider:</label>
                    <select>
                        <option value="exchange" selected>Microsoft Exchange</option>
                        <option value="gmail">Gmail</option>
                        <option value="outlook">Outlook</option>
                    </select>
                </div>
                <div class="config-section">
                    <label>Domain:</label>
                    <input type="text" value="company.com" placeholder="Enter email domain">
                </div>
            `,
            'slack-api': `
                <div class="config-section">
                    <label>Workspace:</label>
                    <input type="text" value="company-workspace" placeholder="Enter workspace name">
                </div>
                <div class="config-section">
                    <label>Bot Token:</label>
                    <input type="password" value="xoxb-***" placeholder="Enter bot token">
                </div>
            `,
            'workday-api': `
                <div class="config-section">
                    <label>Tenant:</label>
                    <input type="text" value="company-tenant" placeholder="Enter Workday tenant">
                </div>
                <div class="config-section">
                    <label>Integration:</label>
                    <input type="text" value="Employee_Integration" placeholder="Enter integration name">
                </div>
            `,
            'scatter': `
                <div class="config-section">
                    <label>Timeout (ms):</label>
                    <input type="number" value="30000" placeholder="Enter timeout in milliseconds">
                </div>
                <div class="config-section">
                    <label>Error Handling:</label>
                    <select>
                        <option value="continue" selected>Continue on Error</option>
                        <option value="fail-fast">Fail Fast</option>
                    </select>
                </div>
            `,
            'gather': `
                <div class="config-section">
                    <label>Aggregation Strategy:</label>
                    <select>
                        <option value="all" selected>Wait for All</option>
                        <option value="any">Wait for Any</option>
                        <option value="majority">Wait for Majority</option>
                    </select>
                </div>
                <div class="config-section">
                    <label>Timeout (ms):</label>
                    <input type="number" value="60000" placeholder="Enter timeout in milliseconds">
                </div>
            `
        };
        
        return configs[componentType] || `
            <div class="config-section">
                <label>Configuration:</label>
                <textarea placeholder="Enter component configuration" rows="3"></textarea>
            </div>
        `;
    }
    
    showAddComponentDialog(addBtn) {
        console.log('showAddComponentDialog called with:', addBtn);
        
        const componentTypes = [
            'HTTP Listener', 'Transform Message', 'Database Connector', 
            'Logger', 'Validator', 'Set Variable', 'Choice Router',
            'Salesforce Connector', 'SAP Connector', 'File Connector',
            'Email Connector', 'Batch Job', 'Error Handler'
        ];
        
        // Close any existing config panel
        if (this.configPanel && this.configPanel.classList.contains('open')) {
            this.closeConfigPanel();
            console.log('Closed existing config panel');
        }
        
        // Use the same config panel container but with add component content
        if (this.configTitle) this.configTitle.textContent = 'Add Component';
        if (this.configContent) {
            this.configContent.innerHTML = `
                <div class="add-component-content">
                    <p>Select a component type to add to your flow:</p>
                <div class="component-list">
                    ${componentTypes.map(type => `
                        <button class="component-option" data-type="${type.toLowerCase().replace(/\s+/g, '-')}">
                                <i class="fas fa-plus"></i>
                            ${type}
                        </button>
                    `).join('')}
                </div>
            </div>
        `;
        }
        if (this.configPanel) this.configPanel.classList.add('open');
        
        // Add click handlers for component options
        setTimeout(() => {
            const componentOptions = this.configContent.querySelectorAll('.component-option');
            componentOptions.forEach(option => {
            option.addEventListener('click', () => {
                    const componentType = option.dataset.type;
                    console.log('Selected component type:', componentType);
                    // Here you would add the component to the flow
                    this.closeConfigPanel();
            });
        });
        }, 100);
    }
    
    initializeTabs() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabPanes = document.querySelectorAll('.tab-pane');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const targetTab = button.getAttribute('data-tab');
                
                // Remove active class from all buttons and panes
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabPanes.forEach(pane => pane.classList.remove('active'));
                
                // Add active class to clicked button and corresponding pane
                button.classList.add('active');
                document.getElementById(`${targetTab}-tab`).classList.add('active');
            });
        });
    }

    switchToExecutionTab() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabPanes = document.querySelectorAll('.tab-pane');
        
        // Remove active class from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabPanes.forEach(pane => pane.classList.remove('active'));
        
        // Find and activate the executions tab
        const executionsTabBtn = document.querySelector('.tab-btn[data-tab="executions"]');
        const executionsTabPane = document.getElementById('executions-tab');
        
        if (executionsTabBtn && executionsTabPane) {
            executionsTabBtn.classList.add('active');
            executionsTabPane.classList.add('active');
        }
    }

    initializeConfigPanel() {
        this.configPanel = document.getElementById('configPanel');
        this.configTitle = document.getElementById('configTitle');
        this.configContent = document.getElementById('configContent');
        this.configClose = document.getElementById('configClose');

        console.log('Config panel elements found:');
        console.log('configPanel:', this.configPanel);
        console.log('configTitle:', this.configTitle);
        console.log('configContent:', this.configContent);
        console.log('configClose:', this.configClose);

        if (this.configClose) {
            this.configClose.addEventListener('click', () => {
                this.closeConfigPanel();
            });
        }
    }

    initializeConfigPanelResize() {
        this.configResizeHandle = document.getElementById('configResizeHandle');
        this.flowCanvas = document.querySelector('.flow-canvas');
        
        console.log('Config resize elements:', {
            resizeHandle: this.configResizeHandle,
            flowCanvas: this.flowCanvas,
            configPanel: this.configPanel
        });
        
        if (!this.configResizeHandle || !this.flowCanvas) {
            console.log('Config resize elements not found');
            return;
        }
        
        console.log('Config panel resize initialized successfully');

        let isResizing = false;
        let startX = 0;
        let startConfigWidth = 0;
        let startCanvasWidth = 0;

        // Mouse down event
        this.configResizeHandle.addEventListener('mousedown', (e) => {
            isResizing = true;
            startX = e.clientX;
            
            // Get current widths
            const configRect = this.configPanel.getBoundingClientRect();
            const canvasRect = this.flowCanvas.getBoundingClientRect();
            startConfigWidth = configRect.width;
            startCanvasWidth = canvasRect.width;
            
            // Add global event listeners
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            
            // Prevent text selection during resize
            document.body.style.userSelect = 'none';
            document.body.style.cursor = 'ew-resize';
            
            e.preventDefault();
        });

        const handleMouseMove = (e) => {
            if (!isResizing) return;
            
            const deltaX = startX - e.clientX; // Negative because we're resizing from the left
            const newConfigWidth = startConfigWidth + deltaX;
            const newCanvasWidth = startCanvasWidth - deltaX;
            
            // Set minimum and maximum widths
            const minConfigWidth = 200;
            const maxConfigWidth = 600;
            const minCanvasWidth = 300;
            
            if (newConfigWidth >= minConfigWidth && 
                newConfigWidth <= maxConfigWidth && 
                newCanvasWidth >= minCanvasWidth) {
                this.configPanel.style.width = newConfigWidth + 'px';
                this.flowCanvas.style.width = newCanvasWidth + 'px';
            }
        };

        const handleMouseUp = () => {
            isResizing = false;
            
            // Remove global event listeners
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            
            // Restore text selection and cursor
            document.body.style.userSelect = '';
            document.body.style.cursor = '';
        };
    }

    initializeComponentSeparator() {
        this.componentSeparator = document.getElementById('componentSeparator');
        this.canvasComponent = document.querySelector('.canvas-component');
        this.executionComponent = document.querySelector('.execution-component');
        
        console.log('Component separator elements:', {
            separator: this.componentSeparator,
            canvas: this.canvasComponent,
            execution: this.executionComponent
        });
        
        if (!this.componentSeparator || !this.canvasComponent || !this.executionComponent) {
            console.log('Component separator elements not found');
            console.log('Available elements:', {
                separator: !!this.componentSeparator,
                canvas: !!this.canvasComponent,
                execution: !!this.executionComponent
            });
            return;
        }
        
        console.log('Component separator initialized successfully');

        let isResizing = false;
        let startY = 0;
        let startCanvasHeight = 0;
        let startExecutionHeight = 0;

        // Mouse down event
        this.componentSeparator.addEventListener('mousedown', (e) => {
            console.log('Component separator mousedown event triggered');
            isResizing = true;
            startY = e.clientY;
            
            // Get current heights
            const canvasRect = this.canvasComponent.getBoundingClientRect();
            const executionRect = this.executionComponent.getBoundingClientRect();
            startCanvasHeight = canvasRect.height;
            startExecutionHeight = executionRect.height;
            
            console.log('Starting resize:', {
                startY,
                startCanvasHeight,
                startExecutionHeight
            });
            
            // Add global event listeners
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            
            // Prevent text selection during resize
            document.body.style.userSelect = 'none';
            document.body.style.cursor = 'ns-resize';
            
            e.preventDefault();
        });

        const handleMouseMove = (e) => {
            if (!isResizing) return;
            
            const deltaY = e.clientY - startY;
            const newCanvasHeight = startCanvasHeight + deltaY;
            const newExecutionHeight = startExecutionHeight - deltaY;
            
            // Set minimum heights
            const minCanvasHeight = 200;
            const minExecutionHeight = 150;
            
            // Calculate maximum canvas height (prevent going past header)
            const flowsHeader = document.querySelector('.flows-header');
            const flowsHeaderHeight = flowsHeader ? flowsHeader.getBoundingClientRect().height : 80;
            const maxCanvasHeight = window.innerHeight - flowsHeaderHeight - 20; // 20px buffer
            
            // Check constraints
            if (newCanvasHeight >= minCanvasHeight && 
                newCanvasHeight <= maxCanvasHeight && 
                newExecutionHeight >= minExecutionHeight) {
                this.canvasComponent.style.height = newCanvasHeight + 'px';
                this.executionComponent.style.height = newExecutionHeight + 'px';
            }
        };

        const handleMouseUp = () => {
            isResizing = false;
            
            // Remove global event listeners
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
            
            // Restore text selection and cursor
            document.body.style.userSelect = '';
            document.body.style.cursor = '';
        };
    }

    initializeNavigation() {
        console.log('Initializing navigation...');
        const navItems = document.querySelectorAll('.nav-item[data-section]');
        const navParents = document.querySelectorAll('.nav-parent');
        
        console.log('Found nav items:', navItems.length);
        console.log('Found nav parents:', navParents.length);
        
        // Handle parent menu clicks (expand/collapse)
        navParents.forEach(parent => {
            parent.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                
                const section = parent.getAttribute('data-section');
                const submenu = document.getElementById(section + 'Submenu');
                
                if (submenu) {
                    // Toggle submenu
                    const isExpanded = submenu.classList.contains('expanded');
                    
                    // Close all other submenus at the same level
                    const parentLevel = parent.closest('.nav-submenu') ? 'sub' : 'main';
                    if (parentLevel === 'main') {
                        // Close all main level submenus
                        document.querySelectorAll('.nav-submenu:not(.nav-submenu .nav-submenu)').forEach(menu => {
                            menu.classList.remove('expanded');
                        });
                        document.querySelectorAll('.nav-parent:not(.nav-subitem)').forEach(p => {
                            p.classList.remove('expanded');
                        });
                    } else {
                        // Close all sub-level submenus within the same parent
                        const parentSubmenu = parent.closest('.nav-submenu');
                        if (parentSubmenu) {
                            parentSubmenu.querySelectorAll('.nav-submenu').forEach(menu => {
                                if (menu !== submenu) {
                                    menu.classList.remove('expanded');
                                }
                            });
                            parentSubmenu.querySelectorAll('.nav-parent').forEach(p => {
                                if (p !== parent) {
                                    p.classList.remove('expanded');
                                }
                            });
                        }
                    }
                    
                    // Toggle current submenu
                    if (!isExpanded) {
                        submenu.classList.add('expanded');
                        parent.classList.add('expanded');
                    }
                    
                    // For main navigation items (projects, connections), also show the section
                    if (parentLevel === 'main' && (section === 'projects' || section === 'connections')) {
                        console.log('Navigation clicked:', section);
                        this.showSection(section);
                    }
                }
            });
        });
        
        // Handle regular nav item clicks
        navItems.forEach(item => {
            if (!item.classList.contains('nav-parent')) {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    
                    // Remove active class from all nav items
                    navItems.forEach(navItem => navItem.classList.remove('active'));
                    
                    // Add active class to clicked item
                    item.classList.add('active');
                    
                    // Get the section to show
                    const section = item.getAttribute('data-section');
                    console.log('Navigation clicked:', section);
                    this.showSection(section);
                });
            }
        });
        
        // Close submenus when clicking outside navigation
        document.addEventListener('click', (e) => {
            const leftNav = document.querySelector('.left-nav');
            const isClickInsideNav = leftNav && leftNav.contains(e.target);
            
            if (!isClickInsideNav) {
                // Close all submenus
                document.querySelectorAll('.nav-submenu').forEach(menu => {
                    menu.classList.remove('expanded');
                });
                document.querySelectorAll('.nav-parent').forEach(parent => {
                    parent.classList.remove('expanded');
                });
            }
        });
    }

    showSection(section) {
        console.log('Showing section:', section);
        
        // Close all submenus when switching sections
        document.querySelectorAll('.nav-submenu').forEach(menu => {
            menu.classList.remove('expanded');
        });
        document.querySelectorAll('.nav-parent').forEach(parent => {
            parent.classList.remove('expanded');
        });
        
        // Hide all sections first
        const leftPane = document.getElementById('leftPane');
        const rightPane = document.getElementById('rightPane');
        
        // Show/hide based on section
        switch(section) {
            case 'home':
                // Simulate cmd+shift+R (hard refresh) to reset to zero state
                window.location.reload(true);
                break;
                
            case 'projects':
                // Show Project Explorer on the right, keep chat on the left
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                
                // Show Project Explorer, hide Flows Canvas
                const projectExplorer = document.getElementById('projectExplorer');
                const flowsCanvasContainer = document.getElementById('flowsCanvasContainer');
                
                if (projectExplorer) projectExplorer.style.display = 'flex';
                if (flowsCanvasContainer) flowsCanvasContainer.style.display = 'none';
                
                this.showProjectsPage();
                break;
                
            case 'project1':
                // Show Employee Onboarding project
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                this.addAgentMessage(`📁 **Employee Onboarding Project**
        
This project contains flows for:
        
• **Employee Registration** - New employee setup
• **Onboarding Workflow** - Complete onboarding process
• **Document Management** - Handle employee documents
• **System Access** - Provision access to systems
        
**Recent Flows:**
• Employee Onboarding Flow (Active)
• Document Collection Flow (Draft)
• Access Provisioning Flow (Testing)`);
                break;
                
            case 'project2':
                // Show Customer Management project
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                this.addAgentMessage(`📁 **Customer Management Project**
        
This project contains flows for:
        
• **Customer Registration** - New customer setup
• **Profile Management** - Customer data management
• **Support Tickets** - Customer support workflows
• **Billing Integration** - Payment processing
        
**Recent Flows:**
• Customer Onboarding Flow (Active)
• Support Ticket Flow (Production)
• Billing Sync Flow (Testing)`);
                break;
                
            case 'project3':
                // Show Order Processing project
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                this.addAgentMessage(`📁 **Order Processing Project**
        
This project contains flows for:
        
• **Order Creation** - New order processing
• **Inventory Management** - Stock level updates
• **Shipping Integration** - Logistics coordination
• **Payment Processing** - Transaction handling
        
**Recent Flows:**
• Order Creation Flow (Active)
• Inventory Update Flow (Production)
• Shipping Notification Flow (Testing)`);
                break;
                
            case 'flows':
                // Show the main flow canvas (default view)
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                
                // Show Flows Canvas, hide Project Explorer
                const projectExplorerFlows = document.getElementById('projectExplorer');
                const flowsCanvasContainerFlows = document.getElementById('flowsCanvasContainer');
                
                if (projectExplorerFlows) projectExplorerFlows.style.display = 'none';
                if (flowsCanvasContainerFlows) flowsCanvasContainerFlows.style.display = 'block';
                break;
                
            case 'employee-onboarding-flow':
                // Show the Employee Onboarding flow
                if (rightPane) rightPane.style.display = 'flex';
                if (leftPane) leftPane.style.display = 'flex';
                
                // Show Flows Canvas, hide Project Explorer
                const projectExplorerFlow = document.getElementById('projectExplorer');
                const flowsCanvasContainerFlow = document.getElementById('flowsCanvasContainer');
                
                if (projectExplorerFlow) projectExplorerFlow.style.display = 'none';
                if (flowsCanvasContainerFlow) flowsCanvasContainerFlow.style.display = 'block';
                
                // Render the Employee Onboarding flow to restore its state
                this.renderFlowDiagram('main-flow');
                
                // Update design errors to show current state
                this.updateDesignErrors();
                
                this.addAgentMessage(`🔄 **Employee Onboarding Flow Restored**

The flow has been restored to its previous state with all components and configurations intact.

**Flow Components:**
• **HTTP Listener** - Receives employee data via POST request
• **Input Validation** - Validates required fields (name, email, department)
• **Scatter-Gather** - Parallel processing for multiple system provisioning
• **API Connectors** - Employee Directory, Gmail, Slack, Workday integrations
• **Database Logging** - Persists onboarding status for audit trail

**Flow Status:**
• Flow is generated and ready for configuration
• Design errors need to be resolved before execution
• All components are properly connected in the flow diagram

**Next Steps:**
• Configure connection strings for all components
• Test the flow with sample employee data
• Deploy to your MuleSoft runtime environment`);
                break;
                
            case 'connections':
                this.showConnectorsPage();
                break;
                
            case 'tools':
                this.showToolsPage();
                break;
                
            default:
                console.log('Unknown section:', section);
        }
    }

    openConfigPanel(componentType) {
        console.log('=== openConfigPanel called ===');
        console.log('componentType:', componentType);
        console.log('configTitle:', this.configTitle);
        console.log('configContent:', this.configContent);
        console.log('configPanel:', this.configPanel);
        console.log('configPanel exists:', !!this.configPanel);
        console.log('configPanel classList:', this.configPanel ? this.configPanel.classList : 'N/A');
        
        // Close any existing add-component-panel
        const existingAddPanel = document.querySelector('.add-component-panel');
        if (existingAddPanel) {
            existingAddPanel.remove();
            console.log('Closed existing add-component-panel');
        }
        
        if (this.configTitle) this.configTitle.textContent = componentType;
        if (this.configContent) {
            console.log('Setting config content for:', componentType);
            console.log('Current content length:', this.configContent.innerHTML.length);
            const newContent = this.getConfigHTML(componentType);
            console.log('Generated content:', newContent);
            this.configContent.innerHTML = newContent;
            console.log('New content length:', this.configContent.innerHTML.length);
            console.log('Final HTML:', this.configContent.innerHTML);
        }
        if (this.configPanel) {
            this.configPanel.classList.add('open');
            console.log('Added open class to configPanel');
            console.log('configPanel classes after adding open:', this.configPanel.classList.toString());
        } else {
            console.log('ERROR: configPanel is null!');
        }
        
        // Add event listeners for connection string functionality
        this.initializeConnectionStringHandlers();
        
        console.log('Panel should be open now');
    }

    closeConfigPanel() {
        if (this.configPanel) {
        this.configPanel.classList.remove('open');
            // Clear the content to prevent duplicate buttons
            if (this.configContent) {
                this.configContent.innerHTML = '';
            }
    }
        
        // Don't update design errors when just closing the panel
        // Design errors should only be updated when configurations are actually saved
    }
    
    
    initializeConnectionStringHandlers() {
        // Handle all connection string buttons
        const connectionButtons = [
            'addConnectionBtn',      // Directory API
            'addEmailConnectionBtn', // Email API
            'addSlackConnectionBtn', // Slack API
            'addWorkdayConnectionBtn', // Workday API
            'addDbConnectionBtn'     // Database API
        ];
        
        connectionButtons.forEach(buttonId => {
            const button = document.getElementById(buttonId);
            if (button) {
                button.addEventListener('click', () => {
                    // Find connection details within the same config panel
                    const configPanel = button.closest('.config-panel');
                    const connectionDetails = configPanel.querySelectorAll('.connection-details');
                    
                    // Toggle visibility of connection details
                    connectionDetails.forEach(detail => {
                        if (detail.style.display === 'none') {
                            detail.style.display = 'block';
                            button.textContent = '−';
                            button.style.backgroundColor = '#dc3545';
                            button.style.borderColor = '#dc3545';
                        } else {
                            detail.style.display = 'none';
                            button.textContent = '+';
                            button.style.backgroundColor = '#007bff';
                            button.style.borderColor = '#007bff';
                        }
                    });
                });
            }
        });
    }

    getConfigHTML(componentType) {
        console.log('getConfigHTML called with componentType:', componentType);
        console.log('componentType type:', typeof componentType);
        console.log('componentType length:', componentType.length);
        
        // Get saved configuration for this component
        const savedConfig = this.componentConfigs[componentType] || {};
        console.log('Saved config for', componentType, ':', savedConfig);
        
        const configs = {
            'Flow Start': `
                <div class="config-field">
                    <label>Trigger Type</label>
                    <select>
                        <option value="manual" selected>Manual</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="event">Event</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Processing Mode</label>
                    <select>
                        <option value="synchronous" selected>Synchronous</option>
                        <option value="asynchronous">Asynchronous</option>
                    </select>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Flow Start')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'HTTP Listener': `
                <div class="config-field">
                    <label>Path</label>
                    <input type="text" value="/api/employee/onboard">
                </div>
                <div class="config-field">
                    <label>Method</label>
                    <select>
                        <option value="POST" selected>POST</option>
                        <option value="GET">GET</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Port</label>
                    <input type="number" value="8081">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('HTTP Listener')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Transform Message': `
                <div class="config-field">
                    <label>Language</label>
                    <select>
                        <option value="dataweave" selected>DataWeave 2.0</option>
                        <option value="javascript">JavaScript</option>
                        <option value="groovy">Groovy</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Input Format</label>
                    <input type="text" value="application/json">
                </div>
                <div class="config-field">
                    <label>Output Format</label>
                    <input type="text" value="application/json">
                </div>
                <div class="config-field">
                    <label>Script</label>
                    <textarea placeholder="Enter transformation script" rows="4">%dw 2.0
output application/json
---
{
    employeeId: payload.employeeId,
    fullName: payload.firstName ++ " " ++ payload.lastName,
    email: payload.email
}</textarea>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Transform Message')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Database Connector': `
                <div class="config-field">
                    <label>Operation</label>
                    <select>
                        <option value="insert" selected>Insert</option>
                        <option value="update">Update</option>
                        <option value="delete">Delete</option>
                        <option value="select">Select</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Table Name</label>
                    <input type="text" value="employees">
                </div>
                <div class="config-field">
                    <label>Connection</label>
                    <input type="text" value="">
                </div>
                <div class="config-field">
                    <label>Query</label>
                    <textarea placeholder="Enter SQL query" rows="3">INSERT INTO employees (employee_id, first_name, last_name, email) 
VALUES (:employeeId, :firstName, :lastName, :email)</textarea>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Database Connector')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Flow End': `
                <div class="config-field">
                    <label>Response Type</label>
                    <select>
                        <option value="success" selected>Success</option>
                        <option value="error">Error</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Status Code</label>
                    <input type="number" value="200">
                </div>
                <div class="config-field">
                    <label>Response Message</label>
                    <textarea placeholder="Enter response message" rows="2">Employee onboarded successfully</textarea>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Flow End')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Validate Input': `
                <div class="config-section">
                    <h4>🔍 Payload Validation Rules</h4>
                    <div class="validation-status">
                        <span class="status-indicator active"></span>
                        <span class="status-text">Validation Active</span>
                    </div>
                </div>
                
                <div class="config-section">
                    <h4>📋 Required Fields</h4>
                    <div class="field-groups">
                        <div class="field-group">
                            <h5>Employee Information</h5>
                            <div class="field-list">
                                <span class="field-item required">employeeId</span>
                                <span class="field-item required">firstName</span>
                                <span class="field-item required">lastName</span>
                                <span class="field-item required">email</span>
                                <span class="field-item required">jobTitle</span>
                                <span class="field-item required">department</span>
                                <span class="field-item required">location</span>
                            </div>
                        </div>
                        <div class="field-group">
                            <h5>Manager Information</h5>
                            <div class="field-list">
                                <span class="field-item required">manager.name</span>
                                <span class="field-item required">manager.email</span>
                            </div>
                        </div>
                        <div class="field-group">
                            <h5>System Configuration</h5>
                            <div class="field-list">
                                <span class="field-item required">startDate</span>
                                <span class="field-item required">systemsToProvision.directoryAccount</span>
                                <span class="field-item required">systemsToProvision.emailAccount</span>
                                <span class="field-item required">systemsToProvision.slackAccount</span>
                                <span class="field-item required">systemsToProvision.vpnAccess</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="config-section">
                    <h4>✅ Validation Rules</h4>
                    <div class="validation-rules">
                        <div class="rule-item">
                            <i class="fas fa-check-circle"></i>
                            <span>Email format validation (employee & manager)</span>
                        </div>
                        <div class="rule-item">
                            <i class="fas fa-check-circle"></i>
                            <span>Date format validation (YYYY-MM-DD)</span>
                        </div>
                        <div class="rule-item">
                            <i class="fas fa-check-circle"></i>
                            <span>Boolean validation for system flags</span>
                        </div>
                        <div class="rule-item">
                            <i class="fas fa-check-circle"></i>
                            <span>Nested object validation</span>
                        </div>
                        <div class="rule-item">
                            <i class="fas fa-check-circle"></i>
                            <span>Non-empty string validation</span>
                        </div>
                    </div>
                </div>
                
                <div class="config-section">
                    <h4>⚙️ Configuration</h4>
                    <div class="config-field">
                        <label>Validation Mode</label>
                        <select>
                            <option value="strict" selected>Strict Validation</option>
                            <option value="basic">Basic Validation</option>
                        </select>
                    </div>
                    <div class="config-field">
                        <label>Error Handling</label>
                        <select>
                            <option value="terminate" selected>Terminate Flow on Failure</option>
                            <option value="continue">Continue with Warnings</option>
                        </select>
                    </div>
                    <div class="config-field">
                        <label>Validation Timeout</label>
                        <input type="number" value="200" min="50" max="1000" step="50">
                        <span class="unit">ms</span>
                    </div>
                </div>
                
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Validate Input')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Employee Directory': `
                <div class="config-field">
                    <label>Connection String</label>
                    <div class="connection-string-container">
                        <select id="connectionStringSelect">
                            <option value="">Select Connection String</option>
                            <option value="directory-prod" ${savedConfig['Connection String'] === 'directory-prod' ? 'selected' : ''}>Directory Production</option>
                            <option value="directory-staging" ${savedConfig['Connection String'] === 'directory-staging' ? 'selected' : ''}>Directory Staging</option>
                            <option value="directory-dev" ${savedConfig['Connection String'] === 'directory-dev' ? 'selected' : ''}>Directory Development</option>
                        </select>
                        <button type="button" class="add-connection-btn" id="addConnectionBtn">+</button>
                    </div>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>API Endpoint</label>
                    <input type="text" value="https://api.directory.com/v1/users">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>HTTP Method</label>
                    <select>
                        <option value="POST" selected>POST</option>
                        <option value="PUT">PUT</option>
                    </select>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Authentication</label>
                    <select>
                        <option value="bearer" selected>Bearer Token</option>
                        <option value="basic">Basic Auth</option>
                        <option value="oauth2">OAuth 2.0</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Content-Type</label>
                    <input type="text" value="application/json" readonly>
                </div>
                <div class="config-field">
                    <label>Operation</label>
                    <input type="text" value="Create User Account" readonly>
                </div>
                <div class="config-field">
                    <label>Data Mapper</label>
                    <div class="data-mapper-container">
                        <div class="mapper-section">
                            <h4>Input Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">employeeId <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.employeeId" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">firstName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.firstName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">lastName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.lastName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">email <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.email" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">department</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.department" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">managerId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.manager.id" placeholder="Enter source field">
                            </div>
                        </div>
                        <div class="mapper-section">
                            <h4>Output Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">directoryId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="directoryResponse.id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">directoryStatus</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="directoryResponse.status" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">createdDate</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="directoryResponse.createdDate" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">employeeNumber</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="directoryResponse.employeeNumber" placeholder="Enter source field">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Employee Directory')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Gmail': `
                <div class="config-field">
                    <label>Connection String</label>
                    <div class="connection-string-container">
                        <select id="emailConnectionStringSelect">
                            <option value="">Select Connection String</option>
                            <option value="gmail-prod" ${savedConfig['Connection String'] === 'gmail-prod' ? 'selected' : ''}>Gmail Production</option>
                            <option value="gmail-staging" ${savedConfig['Connection String'] === 'gmail-staging' ? 'selected' : ''}>Gmail Staging</option>
                            <option value="gmail-dev" ${savedConfig['Connection String'] === 'gmail-dev' ? 'selected' : ''}>Gmail Development</option>
                        </select>
                        <button type="button" class="add-connection-btn" id="addEmailConnectionBtn">+</button>
                    </div>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>API Endpoint</label>
                    <input type="text" value="https://gmail.googleapis.com/gmail/v1/users/me/messages">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>HTTP Method</label>
                    <select>
                        <option value="POST" selected>POST</option>
                        <option value="PUT">PUT</option>
                    </select>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Authentication</label>
                    <select>
                        <option value="oauth2" selected>OAuth 2.0</option>
                        <option value="bearer">Bearer Token</option>
                        <option value="service-account">Service Account</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Content-Type</label>
                    <input type="text" value="application/json" readonly>
                </div>
                <div class="config-field">
                    <label>Operation</label>
                    <input type="text" value="Create Mailbox Account" readonly>
                </div>
                <div class="config-field">
                    <label>Data Mapper</label>
                    <div class="data-mapper-container">
                        <div class="mapper-section">
                            <h4>Input Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">gmailAddress <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.email" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">displayName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.firstName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">lastName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.lastName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">department <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.department" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">managerEmail</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.manager.email" placeholder="Enter source field">
                            </div>
                        </div>
                        <div class="mapper-section">
                            <h4>Output Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">emailAccountId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="gmailResponse.id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">emailStatus</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="gmailResponse.status" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">emailAddress</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="gmailResponse.emailAddress" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">createdDate</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="gmailResponse.createdDate" placeholder="Enter source field">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Gmail')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Slack': `
                <div class="config-field">
                    <label>Connection String</label>
                    <div class="connection-string-container">
                        <select id="slackConnectionStringSelect">
                            <option value="">Select Connection String</option>
                            <option value="slack-prod" ${savedConfig['Connection String'] === 'slack-prod' ? 'selected' : ''}>Slack Production</option>
                            <option value="slack-staging" ${savedConfig['Connection String'] === 'slack-staging' ? 'selected' : ''}>Slack Staging</option>
                            <option value="slack-dev" ${savedConfig['Connection String'] === 'slack-dev' ? 'selected' : ''}>Slack Development</option>
                        </select>
                        <button type="button" class="add-connection-btn" id="addSlackConnectionBtn">+</button>
                    </div>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>API Endpoint</label>
                    <input type="text" value="https://slack.com/api/users.admin.invite">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>HTTP Method</label>
                    <select>
                        <option value="POST" selected>POST</option>
                        <option value="GET">GET</option>
                    </select>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Authentication</label>
                    <select>
                        <option value="bearer" selected>Bearer Token</option>
                        <option value="oauth2">OAuth 2.0</option>
                        <option value="bot-token">Bot Token</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Content-Type</label>
                    <input type="text" value="application/x-www-form-urlencoded" readonly>
                </div>
                <div class="config-field">
                    <label>Operation</label>
                    <input type="text" value="Invite User to Workspace" readonly>
                </div>
                <div class="config-field">
                    <label>Data Mapper</label>
                    <div class="data-mapper-container">
                        <div class="mapper-section">
                            <h4>Input Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">email <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.email" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">firstName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.firstName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">lastName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.lastName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">teamId <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="T1234567890" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">channels</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="#general, #announcements" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">department</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.department" placeholder="Enter source field">
                            </div>
                        </div>
                        <div class="mapper-section">
                            <h4>Output Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">slackUserId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="slackResponse.user.id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">slackStatus</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="slackResponse.ok" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">inviteDate</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="slackResponse.invite_date" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">workspaceId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="slackResponse.team.id" placeholder="Enter source field">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-field">
                    <label>Workspace ID</label>
                    <input type="text" value="T1234567890">
                </div>
                <div class="config-field">
                    <label>Default Channels</label>
                    <input type="text" value="#general, #announcements">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Slack')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Workday': `
                <div class="config-field">
                    <label>Connection String</label>
                    <div class="connection-string-container">
                        <select id="workdayConnectionStringSelect">
                            <option value="">Select Connection String</option>
                            <option value="workday-prod" ${savedConfig['Connection String'] === 'workday-prod' ? 'selected' : ''}>Workday Production</option>
                            <option value="workday-staging" ${savedConfig['Connection String'] === 'workday-staging' ? 'selected' : ''}>Workday Staging</option>
                            <option value="workday-dev" ${savedConfig['Connection String'] === 'workday-dev' ? 'selected' : ''}>Workday Development</option>
                        </select>
                        <button type="button" class="add-connection-btn" id="addWorkdayConnectionBtn">+</button>
                    </div>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>API Endpoint</label>
                    <input type="text" value="https://tenant.workday.com/ccx/api/v1/workers">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>HTTP Method</label>
                    <select>
                        <option value="POST" selected>POST</option>
                        <option value="PUT">PUT</option>
                    </select>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Authentication</label>
                    <select>
                        <option value="basic" selected>Basic Auth</option>
                        <option value="oauth2">OAuth 2.0</option>
                        <option value="certificate">Client Certificate</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Content-Type</label>
                    <input type="text" value="application/xml" readonly>
                </div>
                <div class="config-field">
                    <label>Operation</label>
                    <input type="text" value="Create Employee Record" readonly>
                </div>
                <div class="config-field">
                    <label>Data Mapper</label>
                    <div class="data-mapper-container">
                        <div class="mapper-section">
                            <h4>Input Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">employeeId <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.employeeId" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">firstName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.firstName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">lastName <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.lastName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">email <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.email" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">jobTitle <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.jobTitle" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">department <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.department" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">startDate <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.startDate" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">managerId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.manager.id" placeholder="Enter source field">
                            </div>
                        </div>
                        <div class="mapper-section">
                            <h4>Output Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">workdayId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="workdayResponse.worker.id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">workdayStatus</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="workdayResponse.status" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">employeeNumber</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="workdayResponse.worker.employee_id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">createdDate</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="workdayResponse.created_date" placeholder="Enter source field">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-field">
                    <label>Tenant</label>
                    <input type="text" value="company_tenant">
                </div>
                <div class="config-field">
                    <label>Integration System ID</label>
                    <input type="text" value="MULESOFT_INTEGRATION">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Workday')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Database Log': `
                <div class="config-field">
                    <label>Database Type</label>
                    <select>
                        <option value="postgresql" selected>PostgreSQL</option>
                        <option value="mysql">MySQL</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Table Name</label>
                    <input type="text" value="onboarding_logs">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Database Log')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Scatter': `
                <div class="config-field">
                    <label>Max Concurrency</label>
                    <input type="number" value="4">
                </div>
                <div class="config-field">
                    <label>Timeout (ms)</label>
                    <input type="number" value="30000">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Scatter')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Gather': `
                <div class="config-field">
                    <label>Strategy</label>
                    <select>
                        <option value="all" selected>Wait for All</option>
                        <option value="any">Wait for Any</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Timeout (ms)</label>
                    <input type="number" value="30000">
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Gather')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `,
            'Onboarding DB': `
                <div class="config-field">
                    <label>Connection String</label>
                    <div class="connection-string-container">
                        <select id="dbConnectionStringSelect">
                            <option value="">Select Connection String</option>
                            <option value="db-prod" ${savedConfig['Connection String'] === 'db-prod' ? 'selected' : ''}>Database Production</option>
                            <option value="db-staging" ${savedConfig['Connection String'] === 'db-staging' ? 'selected' : ''}>Database Staging</option>
                            <option value="db-dev" ${savedConfig['Connection String'] === 'db-dev' ? 'selected' : ''}>Database Development</option>
                        </select>
                        <button type="button" class="add-connection-btn" id="addDbConnectionBtn">+</button>
                    </div>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Database Type</label>
                    <select>
                        <option value="postgresql" selected>PostgreSQL</option>
                        <option value="mysql">MySQL</option>
                        <option value="oracle">Oracle</option>
                        <option value="sqlserver">SQL Server</option>
                    </select>
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Host</label>
                    <input type="text" value="db.company.com">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Port</label>
                    <input type="number" value="5432">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Database Name</label>
                    <input type="text" value="onboarding_db">
                </div>
                <div class="config-field connection-details" style="display: none;">
                    <label>Authentication</label>
                    <select>
                        <option value="username-password" selected>Username/Password</option>
                        <option value="service-account">Service Account</option>
                        <option value="kerberos">Kerberos</option>
                    </select>
                </div>
                <div class="config-field">
                    <label>Table Name</label>
                    <input type="text" value="onboarding_logs" readonly>
                </div>
                <div class="config-field">
                    <label>Operation</label>
                    <input type="text" value="Insert Log Record" readonly>
                </div>
                <div class="config-field">
                    <label>Data Mapper</label>
                    <div class="data-mapper-container">
                        <div class="mapper-section">
                            <h4>Input Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">executionId <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="flowVars.executionId" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">employeeId <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.employeeId" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">status <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="flowVars.overallStatus" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">timestamp <span class="required-asterisk">*</span></span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="now()" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">errorMessage</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="flowVars.errorMessage" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">firstName</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.firstName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">lastName</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.lastName" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">email</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="payload.email" placeholder="Enter source field">
                            </div>
                        </div>
                        <div class="mapper-section">
                            <h4>Output Field Mappings</h4>
                            <div class="mapping-row">
                                <span class="target-field">logId</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="dbResponse.id" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">insertStatus</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="dbResponse.status" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">rowsAffected</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="dbResponse.rowsAffected" placeholder="Enter source field">
                            </div>
                            <div class="mapping-row">
                                <span class="target-field">insertedAt</span>
                                <span class="mapping-separator">:</span>
                                <input type="text" class="source-field-input" value="dbResponse.insertedAt" placeholder="Enter source field">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config-actions">
                    <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('Onboarding DB')">Save</button>
                    <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                </div>
            `
        };

        console.log('Looking up config for:', componentType);
        console.log('Available configs:', Object.keys(configs));
        console.log('Config found:', configs[componentType] ? 'YES' : 'NO');
        
        return configs[componentType] || `
            <div class="config-field">
                <label>Name</label>
                <input type="text" value="${componentType}">
            </div>
            <div class="config-actions">
                <button class="config-btn config-btn-secondary" onclick="window.flowsManager.closeConfigPanel()">Cancel</button>
                <button class="config-btn config-btn-primary" onclick="window.flowsManager.saveConfig('${componentType}')">Save</button>
            </div>
        `;
    }

    saveConfig(componentType) {
        const inputs = this.configContent.querySelectorAll('input, select');
        const config = {};
        
        inputs.forEach(input => {
            const label = input.previousElementSibling?.textContent || input.closest('.config-field')?.querySelector('label')?.textContent;
            if (label) {
                config[label] = input.value;
            }
        });

        // Store the configuration
        this.componentConfigs[componentType] = config;

        console.log(`Saved config for ${componentType}:`, config);
        
        // Validate the configuration
        const isValid = this.validateComponentConfig(componentType, config);
        
        if (isValid) {
            this.addAgentMessage(`✅ Configuration saved and validated for ${componentType}`, 'assistant');
        } else {
            this.addAgentMessage(`⚠️ Configuration saved for ${componentType}, but connection string is required`, 'error');
        }
        
        this.closeConfigPanel();
        
        // Update design errors after saving config
        this.updateDesignErrors();
    }
    
    validateComponentConfig(componentType, config) {
        // Check if connection string is selected for components that need it
        const componentsNeedingConnection = [
            'Employee Directory',
            'Gmail', 
            'Slack',
            'Workday',
            'Onboarding DB'
        ];
        
        if (componentsNeedingConnection.includes(componentType)) {
            const connectionString = config['Connection String'] || config['Connection'];
            return connectionString && connectionString.trim() !== '';
        }
        
        return true; // Other components don't need connection string validation
    }

    updateDesignErrors() {
        console.log('updateDesignErrors called');
        
        // Cache DOM elements to avoid repeated queries
        if (!this.errorsTab) {
            this.errorsTab = document.getElementById('errors-tab');
            this.errorCount = this.errorsTab?.querySelector('.error-count');
            this.errorsContent = this.errorsTab?.querySelector('.executions-content');
            console.log('Cached DOM elements:', {
                errorsTab: this.errorsTab,
                errorCount: this.errorCount,
                errorsContent: this.errorsContent
            });
        }
        
        if (!this.errorsTab || !this.errorCount || !this.errorsContent) {
            console.warn('Design errors DOM elements not found', {
                errorsTab: this.errorsTab,
                errorCount: this.errorCount,
                errorsContent: this.errorsContent
            });
            return;
        }
        
        // Check for design errors
        const errors = this.checkForDesignErrors();
        console.log('Design errors found:', errors);
        
        // Only update if errors count changed
        const currentErrorCount = this.errorsContent.querySelectorAll('.error-item').length;
        if (errors.length === currentErrorCount && errors.length > 0) {
            // Same number of errors, just update count
            this.errorCount.textContent = `${errors.length} error${errors.length !== 1 ? 's' : ''}`;
            return;
        }
        
        // Update error count
        this.errorCount.textContent = errors.length === 0 ? '0 errors' : `${errors.length} error${errors.length !== 1 ? 's' : ''}`;
        
        if (errors.length === 0) {
            this.errorsContent.innerHTML = `
                <div class="no-errors">
                    <i class="fas fa-check-circle"></i>
                    <p>No errors detected. All flows are running smoothly!</p>
                </div>
            `;
        } else {
            // Create simple table format
            this.errorsContent.innerHTML = `
                <table class="errors-table">
                    <thead>
                        <tr>
                            <th>Component</th>
                            <th>Error</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${errors.map(error => `
                            <tr>
                                <td class="error-component">${error.component}</td>
                                <td class="error-message">${error.message}</td>
                                <td class="error-action">
                                    <button class="btn btn-sm btn-primary inspect-btn" data-component="${error.component}">
                                        <i class="fas fa-search"></i> Inspect
                                    </button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
            
            // Add event listeners for inspect buttons
            setTimeout(() => {
                const inspectButtons = document.querySelectorAll('.inspect-btn');
                console.log('Found inspect buttons:', inspectButtons.length);
                inspectButtons.forEach((button, index) => {
                    console.log(`Setting up inspect button ${index}:`, button);
                    button.addEventListener('click', (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        const component = button.getAttribute('data-component');
                        console.log('Inspect button clicked for component:', component);
                        console.log('this context:', this);
                        console.log('openConfigPanel method:', typeof this.openConfigPanel);
                        this.openConfigPanel(component);
                    });
                });
            }, 100);
        }
    }
    
    checkForDesignErrors() {
        console.log('checkForDesignErrors called');
        
        // Check if there's a flow on the canvas
        const hasFlow = this.checkIfFlowExists();
        console.log('Has flow:', hasFlow);
        
        if (!hasFlow) {
            // No flow exists, so no design errors to show
            console.log('No flow exists, returning empty errors array');
            return [];
        }
        
        // Get the currently selected flow
        const currentFlowId = this.getCurrentFlowId();
        if (!currentFlowId) {
            console.log('No current flow selected, returning empty errors array');
            return [];
        }
        
        const currentFlow = this.flows[currentFlowId];
        if (!currentFlow) {
            console.log('Current flow not found, returning empty errors array');
            return [];
        }
        
        console.log('Current flow:', currentFlow);
        
        // Only check for components that are actually in the current flow
        const componentsNeedingConnection = [
            'Employee Directory',
            'Gmail', 
            'Slack',
            'Workday',
            'Onboarding DB'
        ];
        
        // Check if the current flow contains any of these components
        const flowHasComponents = currentFlow.nodes.some(node => 
            componentsNeedingConnection.includes(node.label)
        );
        
        if (!flowHasComponents) {
            console.log('Current flow does not contain components that need connection strings, returning empty errors array');
            return [];
        }
        
        // Check actual component configurations
        const errors = [];
        componentsNeedingConnection.forEach(component => {
            // Check if this component is actually in the current flow
            const componentInFlow = currentFlow.nodes.some(node => node.label === component);
            
            if (componentInFlow) {
                const config = this.componentConfigs[component];
                const isValid = this.validateComponentConfig(component, config || {});
                
                if (!isValid) {
                    errors.push({
                        component: component,
                        message: `Connection string not configured. Please select a connection string and configure connection details.`,
                        severity: 'error'
                    });
                }
            }
        });
        
        console.log('Design errors found:', errors.length);
        return errors;
    }

    // Test method to manually open config panel
    testConfigPanel() {
        console.log('Testing config panel...');
        this.openConfigPanel('HTTP Listener');
    }

    
    showSamplePayload() {
        if (this.samplePayload) {
            const payloadText = JSON.stringify(this.samplePayload, null, 2);
            this.addAgentMessage(`📋 Here's the sample payload for the Employee Onboarding Flow:\n\n\`\`\`json\n${payloadText}\n\`\`\`\n\nThis payload will be used when running the flow to test the complete onboarding process for ${this.samplePayload.firstName} ${this.samplePayload.lastName}.`);
        } else {
            this.addAgentMessage("Sample payload not loaded yet. Please try again in a moment.", 'error');
        }
    }
    
    showResponsePayloads() {
        if (this.responsePayloads) {
            const successText = JSON.stringify(this.responsePayloads.success, null, 2);
            const failureText = JSON.stringify(this.responsePayloads.failure, null, 2);
            this.addAgentMessage(`📤 Here are the response payload samples for the Employee Onboarding Flow:\n\n**Success Response:**\n\`\`\`json\n${successText}\n\`\`\`\n\n**Failure Response:**\n\`\`\`json\n${failureText}\n\`\`\`\n\nThese responses show what the flow returns after processing the employee onboarding request.`);
        } else {
            this.addAgentMessage("Response payloads not loaded yet. Please try again in a moment.", 'error');
        }
    }
    
    addAgentMessage(message, messageType = 'normal') {
        // Access the chat manager to add agent messages
        if (window.chatManager) {
            window.chatManager.addMessage(message, 'assistant', false, messageType);
        }
    }
    
    handleConfigCommand(userMessage) {
        const lowerMessage = userMessage.toLowerCase();
        
        // Check if there's a flow on the canvas
        const hasFlow = this.checkIfFlowExists();
        if (!hasFlow) {
            this.addAgentMessage("I can't configure components because there are no flows on the canvas. Please create a flow first using 'employee onboarding' command.", 'error');
            return;
        }
        
        // Parse the component name from the command
        let componentName = '';
        let connectionString = '';
        
        // Extract component name
        if (lowerMessage.includes('employee directory') || lowerMessage.includes('directory')) {
            componentName = 'Employee Directory';
        } else if (lowerMessage.includes('gmail') || lowerMessage.includes('email')) {
            componentName = 'Gmail';
        } else if (lowerMessage.includes('slack')) {
            componentName = 'Slack';
        } else if (lowerMessage.includes('workday')) {
            componentName = 'Workday';
        } else if (lowerMessage.includes('database') || lowerMessage.includes('db') || lowerMessage.includes('onboarding db')) {
            componentName = 'Onboarding DB';
        } else if (lowerMessage.includes('http listener') || lowerMessage.includes('listener')) {
            componentName = 'HTTP Listener';
        } else if (lowerMessage.includes('validate input') || lowerMessage.includes('validation')) {
            componentName = 'Validate Input';
        } else {
            this.addAgentMessage(`❌ Component not recognized. Available components:
• Employee Directory
• Gmail
• Slack  
• Workday
• Onboarding DB
• HTTP Listener
• Validate Input

Usage: "configure [component name]" or "configure [component name] with [connection string]"`, 'error');
            return;
        }
        
        
        // Extract connection string if provided
        const withMatch = userMessage.match(/with\s+(.+)/i);
        if (withMatch) {
            connectionString = withMatch[1].trim();
        }
        
        // If connection string was provided, configure directly
        if (connectionString) {
            this.configureComponentDirectly(componentName, connectionString);
        } else {
            // Show available options and wait for user choice
            this.showConfigOptions(componentName);
        }
    }
    
    showConfigOptions(componentName) {
        // Define available connection string options for each component
        const connectionOptions = {
            'Employee Directory': [
                { value: 'directory-prod', label: 'Directory Production' },
                { value: 'directory-staging', label: 'Directory Staging' },
                { value: 'directory-dev', label: 'Directory Development' }
            ],
            'Gmail': [
                { value: 'gmail-prod', label: 'Gmail Production' },
                { value: 'gmail-staging', label: 'Gmail Staging' },
                { value: 'gmail-dev', label: 'Gmail Development' }
            ],
            'Slack': [
                { value: 'slack-prod', label: 'Slack Production' },
                { value: 'slack-staging', label: 'Slack Staging' },
                { value: 'slack-dev', label: 'Slack Development' }
            ],
            'Workday': [
                { value: 'workday-prod', label: 'Workday Production' },
                { value: 'workday-staging', label: 'Workday Staging' },
                { value: 'workday-dev', label: 'Workday Development' }
            ],
            'Onboarding DB': [
                { value: 'db-prod', label: 'Database Production' },
                { value: 'db-staging', label: 'Database Staging' },
                { value: 'db-dev', label: 'Database Development' }
            ]
        };
        
        const options = connectionOptions[componentName];
        if (!options) {
            this.addAgentMessage(`❌ No connection string options available for ${componentName}. This component doesn't require connection configuration.`);
            return;
        }
        
        // Set up waiting state
        this.isWaitingForConfigChoice = true;
        this.pendingConfigComponent = componentName;
        
        // Display options to user
        const optionsList = options.map((option, index) => `${index + 1}. ${option.label}`).join('\n');
        
        this.addAgentMessage(`🔧 **Configure ${componentName}**

Please choose a connection string:

${optionsList}

**How to respond:**
• Type the number (1, 2, 3) of your choice
• Or type the full name (e.g., "Directory Production")
• Or type "configure ${componentName} with [connection name]"

Example: "1" or "Directory Production"`);
    }
    
    handleConfigChoice(userMessage, componentName) {
        const lowerMessage = userMessage.toLowerCase().trim();
        
        console.log('handleConfigChoice called with:', userMessage, 'for component:', componentName);
        
        // Define available connection string options for each component
        const connectionOptions = {
            'Employee Directory': [
                { value: 'directory-prod', label: 'Directory Production' },
                { value: 'directory-staging', label: 'Directory Staging' },
                { value: 'directory-dev', label: 'Directory Development' }
            ],
            'Gmail': [
                { value: 'gmail-prod', label: 'Gmail Production' },
                { value: 'gmail-staging', label: 'Gmail Staging' },
                { value: 'gmail-dev', label: 'Gmail Development' }
            ],
            'Slack': [
                { value: 'slack-prod', label: 'Slack Production' },
                { value: 'slack-staging', label: 'Slack Staging' },
                { value: 'slack-dev', label: 'Slack Development' }
            ],
            'Workday': [
                { value: 'workday-prod', label: 'Workday Production' },
                { value: 'workday-staging', label: 'Workday Staging' },
                { value: 'workday-dev', label: 'Workday Development' }
            ],
            'Onboarding DB': [
                { value: 'db-prod', label: 'Database Production' },
                { value: 'db-staging', label: 'Database Staging' },
                { value: 'db-dev', label: 'Database Development' }
            ]
        };
        
        const options = connectionOptions[componentName];
        let selectedOption = null;
        
        console.log('Available options:', options);
        console.log('User input:', lowerMessage);
        
        // Try to parse as number first
        const choiceNumber = parseInt(lowerMessage);
        if (!isNaN(choiceNumber) && choiceNumber >= 1 && choiceNumber <= options.length) {
            selectedOption = options[choiceNumber - 1];
            console.log('Selected by number:', selectedOption);
        } else {
            // Try to match by label (more flexible matching)
            selectedOption = options.find(option => {
                const labelLower = option.label.toLowerCase();
                return labelLower.includes(lowerMessage) || 
                       lowerMessage.includes(labelLower) ||
                       labelLower.includes(lowerMessage.replace(/\s+/g, ' ')) ||
                       lowerMessage.includes(labelLower.replace(/\s+/g, ' '));
            });
            console.log('Selected by label match:', selectedOption);
        }
        
        if (!selectedOption) {
            this.addAgentMessage(`❌ Invalid choice "${userMessage}". Please select a valid option (1-${options.length}) or type the connection name.

Available options:
${options.map((opt, i) => `${i + 1}. ${opt.label}`).join('\n')}`);
            return;
        }
        
        // Clear waiting state
        this.isWaitingForConfigChoice = false;
        this.pendingConfigComponent = null;
        
        console.log('Configuring component with:', selectedOption.value);
        
        // Configure the component
        this.configureComponentDirectly(componentName, selectedOption.value);
    }
    
    configureComponentDirectly(componentName, connectionStringValue) {
        // Create configuration object
        const config = {
            'Connection String': connectionStringValue
        };
        
        // Save the configuration
        this.componentConfigs[componentName] = config;
        
        // Validate the configuration
        const isValid = this.validateComponentConfig(componentName, config);
        
        // Update design errors
        this.updateDesignErrors();
        
        // Provide feedback
        if (isValid) {
            this.addAgentMessage(`✅ **${componentName} Configured Successfully!**

🔗 **Connection String:** ${connectionStringValue}
✅ **Status:** Validated and saved
📊 **Design Errors:** Updated automatically

The configuration has been committed and the design errors panel has been updated.`);
        } else {
            this.addAgentMessage(`⚠️ **${componentName} Configuration Saved**

🔗 **Connection String:** ${connectionStringValue}
⚠️ **Status:** Saved but validation failed
📊 **Design Errors:** Updated automatically

Please check the configuration details.`);
        }
    }
    
    setConnectionStringFromCommand(componentName, connectionString) {
        // Find the appropriate dropdown and set the connection string
        const configPanel = document.getElementById('configPanel');
        if (!configPanel) return;
        
        let selectElement = null;
        
        // Find the correct select element based on component
        switch (componentName) {
            case 'Employee Directory':
                selectElement = document.getElementById('connectionStringSelect');
                break;
            case 'Gmail':
                selectElement = document.getElementById('emailConnectionStringSelect');
                break;
            case 'Slack':
                selectElement = document.getElementById('slackConnectionStringSelect');
                break;
            case 'Workday':
                selectElement = document.getElementById('workdayConnectionStringSelect');
                break;
            case 'Onboarding DB':
                selectElement = document.getElementById('dbConnectionStringSelect');
                break;
        }
        
        if (selectElement) {
            // Try to find and select the option that matches the connection string
            const options = selectElement.querySelectorAll('option');
            for (let option of options) {
                if (option.value.toLowerCase().includes(connectionString.toLowerCase()) || 
                    option.textContent.toLowerCase().includes(connectionString.toLowerCase())) {
                    option.selected = true;
                    selectElement.dispatchEvent(new Event('change'));
                    break;
                }
            }
            
            // If no exact match found, add it as a new option
            if (!selectElement.value) {
                const newOption = document.createElement('option');
                newOption.value = connectionString;
                newOption.textContent = connectionString;
                newOption.selected = true;
                selectElement.appendChild(newOption);
                selectElement.dispatchEvent(new Event('change'));
            }
        }
    }
    
    createExecution() {
        this.executionCounter++;
        const executionId = `exec-${this.executionCounter.toString().padStart(3, '0')}`;
        const timestamp = new Date().toISOString();
        
        const execution = {
            id: executionId,
            timestamp: timestamp,
            status: 'running',
            components: {
                httpListener: { status: 'pending', responseTime: null, error: null },
                inputValidation: { status: 'pending', responseTime: null, error: null },
                directoryApi: { status: 'pending', responseTime: null, error: null },
                emailApi: { status: 'pending', responseTime: null, error: null },
                slackApi: { status: 'pending', responseTime: null, error: null },
                workdayApi: { status: 'pending', responseTime: null, error: null },
                databaseLog: { status: 'pending', responseTime: null, error: null }
            },
            totalTime: null
        };
        
        this.executions.unshift(execution); // Add to beginning of array
        this.updateExecutionsTable();
        return execution;
    }
    
    updateExecutionComponent(executionId, componentName, status, responseTime = null, error = null) {
        const execution = this.executions.find(exec => exec.id === executionId);
        if (execution) {
            execution.components[componentName] = {
                status: status,
                responseTime: responseTime,
                error: error
            };
            this.updateExecutionsTable();
        }
    }
    
    completeExecution(executionId, finalStatus, totalTime) {
        const execution = this.executions.find(exec => exec.id === executionId);
        if (execution) {
            execution.status = finalStatus;
            execution.totalTime = totalTime;
            this.updateExecutionsTable();
        }
    }
    
    updateExecutionsTable() {
        const noExecutions = document.getElementById('no-executions');
        const tableContainer = document.getElementById('executions-table-container');
        const tableBody = document.getElementById('executions-table-body');
        const executionCount = document.querySelector('.execution-count');
        
        // Check if elements exist (they might not exist if payload input is showing)
        if (!noExecutions || !tableContainer || !tableBody || !executionCount) {
            console.log('Execution table elements not found, skipping table update');
            return;
        }
        
        if (this.executions.length === 0) {
            noExecutions.style.display = 'block';
            tableContainer.style.display = 'none';
            executionCount.textContent = '0 executions';
        } else {
            noExecutions.style.display = 'none';
            tableContainer.style.display = 'block';
            executionCount.textContent = `${this.executions.length} execution${this.executions.length !== 1 ? 's' : ''}`;
            
            // Clear existing rows
            tableBody.innerHTML = '';
            
            // Add execution rows
            this.executions.forEach(execution => {
                const row = this.createExecutionRow(execution);
                tableBody.appendChild(row);
            });
        }
    }
    
    createExecutionRow(execution) {
        const row = document.createElement('tr');
        
        // Format timestamp
        const timestamp = new Date(execution.timestamp).toLocaleString();
        
        // Create status badge
        const statusBadge = document.createElement('span');
        statusBadge.className = `execution-status ${execution.status}`;
        statusBadge.textContent = execution.status.charAt(0).toUpperCase() + execution.status.slice(1);
        
        // Create component status cells
        const componentCells = [
            this.createComponentCell(execution.components.httpListener),
            this.createComponentCell(execution.components.inputValidation),
            this.createComponentCell(execution.components.directoryApi),
            this.createComponentCell(execution.components.emailApi),
            this.createComponentCell(execution.components.slackApi),
            this.createComponentCell(execution.components.workdayApi),
            this.createComponentCell(execution.components.databaseLog)
        ];
        
        // Total time
        const totalTime = execution.totalTime ? `${execution.totalTime}ms` : '-';
        
        row.innerHTML = `
            <td>${execution.id}</td>
            <td>${timestamp}</td>
            <td>${statusBadge.outerHTML}</td>
            ${componentCells.map(cell => `<td>${cell}</td>`).join('')}
            <td>${totalTime}</td>
        `;
        
        return row;
    }
    
    createComponentCell(component) {
        const statusBadge = document.createElement('span');
        statusBadge.className = `component-status ${component.status}`;
        
        // Handle different status types
        if (component.status === 'not-executed') {
            statusBadge.textContent = 'Not executed';
        } else {
        statusBadge.textContent = component.status.charAt(0).toUpperCase() + component.status.slice(1);
        }
        
        let details = '';
        if (component.responseTime && component.responseTime > 0) {
            details += `<div class="component-details"><span class="response-time">${component.responseTime}ms</span></div>`;
        }
        if (component.error) {
            details += `<div class="component-details"><span class="error-message">${component.error}</span></div>`;
        }
        
        return statusBadge.outerHTML + details;
    }
    
    createNewFlow() {
        console.log('createNewFlow called');
        
        // Check if there's an active flow that needs to be saved
        const hasActiveFlow = this.checkIfFlowExists();
        console.log('hasActiveFlow:', hasActiveFlow);
        
        if (hasActiveFlow) {
            this.addAgentMessage("⚠️ You have an active flow on the canvas. Please save your current flow before creating a new one. Use the Export button to save your current flow configuration.", 'error');
            return;
        }
        
        const flowName = prompt('Enter the name for the new flow:');
        if (!flowName) {
            this.addAgentMessage("Flow creation cancelled. No new flow was created.", 'error');
            return;
        }
        
        console.log('Creating new flow with name:', flowName);
        
        // Clear design errors for new flow
        this.clearDesignErrors();
        
        // Add agent message for flow creation
        this.addAgentMessage(`Creating new flow: "${flowName}". Setting up basic flow structure with start and end nodes.`);
        
        const newFlowId = 'flow-' + Date.now();
        this.flows[newFlowId] = {
            name: flowName,
            status: 'stopped',
            nodes: [
                { type: 'start', label: 'Flow Start' },
                { type: 'end', label: 'Flow End' }
            ]
        };
        
        console.log('New flow created:', this.flows[newFlowId]);
        
        // Select the new flow (skip design errors for empty new flows)
        this.selectFlow(newFlowId, true);
        
        // Add success message
        setTimeout(() => {
            this.addAgentMessage(`✅ New flow "${flowName}" created successfully! You can now add components to build your integration flow.`);
        }, 500);
    }
    
    
    runFlow() {
        // Check if there are any flows on the canvas
        const hasFlow = this.checkIfFlowExists();
        
        if (!hasFlow) {
            // Add agent message for no flow
            this.addAgentMessage("I can't run the flow because there are no flows on the canvas. Please create a flow first or load an existing flow before running.", 'error');
            return;
        }
        
        // Check for design errors before allowing execution
        const designErrors = this.checkForDesignErrors();
        if (designErrors.length > 0) {
            this.addAgentMessage(`❌ **Execution Blocked** - ${designErrors.length} design error${designErrors.length !== 1 ? 's' : ''} must be fixed before running the flow. Please resolve the connection string configuration issues in the Design Errors tab.`, 'error');
            return;
        }
        
        // Switch to Execution tab
        this.switchToExecutionTab();
        
        // Show payload input prompt
        this.showPayloadInputPrompt();
    }
    
    showPayloadInputPrompt() {
        // Add agent message asking for payload
        this.addAgentMessage(`🚀 Ready to Execute Flow!

📋 **Request Payload Required**

Before executing the flow, I need the request payload that will be sent to the HTTP Listener.

**Option 1: Provide via Chat**
Type your JSON payload in the chat input below.

**Option 2: Use Sample Payload**
Click "Use Sample Payload" in the Executions tab to use the default employee onboarding data.

**Option 3: Upload File**
You can also paste JSON data directly in the payload input field in the Executions tab.

**Sample Format:**
\`\`\`json
{
  "employeeId": "E12345",
  "firstName": "Jane",
  "lastName": "Doe",
  "email": "jane.doe@company.com",
  "department": "Engineering"
}
\`\`\`

Please provide your request payload to continue with the execution.`);
        
        // Show payload input in execution tab
        this.showPayloadInputInExecutionTab();
    }
    
    showPayloadInputInExecutionTab() {
        const executionsContent = document.querySelector('#executions-tab .executions-content');
        
        executionsContent.innerHTML = `
            <div class="payload-input-container">
                <div class="payload-input-header">
                    <h4>📋 Request Payload Input</h4>
                    <p>Provide the JSON payload that will be sent to the HTTP Listener</p>
                </div>
                
                <div class="payload-input-section">
                    <label for="payloadInput">Request Payload (JSON):</label>
                    <textarea id="payloadInput" rows="8" placeholder="Enter your JSON payload here..."></textarea>
                </div>
                
                <div class="payload-actions">
                    <button class="btn btn-secondary" onclick="window.flowsManager.useSamplePayload()">
                        <i class="fas fa-file-import"></i> Use Sample Payload
                    </button>
                    <button class="btn btn-primary" onclick="window.flowsManager.executeWithPayload()">
                        <i class="fas fa-play"></i> Execute Flow
                    </button>
                </div>
            </div>
        `;
        
        // Set default payload after DOM is created
        setTimeout(() => {
            const defaultPayload = {
                "employeeId": "E12345",
                "firstName": "Jane",
                "lastName": "Doe",
                "email": "jane.doe@company.com",
                "department": "Engineering",
                "jobTitle": "Software Engineer",
                "startDate": "2024-01-15"
            };
            const payloadInput = document.getElementById('payloadInput');
            if (payloadInput) {
                const jsonString = JSON.stringify(defaultPayload, null, 2);
                console.log('Setting default payload:', jsonString);
                payloadInput.value = jsonString;
                
                // Test if the JSON is valid
                try {
                    const testParse = JSON.parse(jsonString);
                    console.log('Default payload JSON is valid:', testParse);
                } catch (e) {
                    console.error('Default payload JSON is invalid:', e);
                }
            }
        }, 100);
    }
    
    useSamplePayload() {
        // Load sample payload from file
        fetch('sample-payload.json')
            .then(response => {
                console.log('Sample payload response:', response);
                return response.json();
            })
            .then(data => {
                console.log('Sample payload data:', data);
                const payloadInput = document.getElementById('payloadInput');
                const jsonString = JSON.stringify(data, null, 2);
                console.log('JSON string to set:', jsonString);
                payloadInput.value = jsonString;
            })
            .catch(error => {
                console.error('Error loading sample payload:', error);
                // Use default payload if file not found
                const defaultPayload = {
                    "employeeId": "E12345",
                    "firstName": "Jane",
                    "lastName": "Doe",
                    "email": "jane.doe@company.com",
                    "department": "Engineering",
                    "jobTitle": "Software Engineer",
                    "startDate": "2024-01-15"
                };
                const payloadInput = document.getElementById('payloadInput');
                const jsonString = JSON.stringify(defaultPayload, null, 2);
                console.log('Default payload JSON string:', jsonString);
                payloadInput.value = jsonString;
            });
    }
    
    executeWithPayload() {
        const payloadInput = document.getElementById('payloadInput');
        const payloadText = payloadInput.value.trim();
        
        console.log('Payload text:', payloadText);
        console.log('Payload text length:', payloadText.length);
        console.log('Payload text char codes:', payloadText.split('').map(c => c.charCodeAt(0)).slice(0, 20));
        
        if (!payloadText) {
            alert('Please provide a request payload before executing the flow.');
            return;
        }
        
        // Try to clean the JSON string
        let cleanedPayload = payloadText;
        
        // Remove any potential BOM or invisible characters
        cleanedPayload = cleanedPayload.replace(/^\uFEFF/, '');
        cleanedPayload = cleanedPayload.replace(/[\u200B-\u200D\uFEFF]/g, '');
        
        console.log('Cleaned payload:', cleanedPayload);
        console.log('Cleaned payload length:', cleanedPayload.length);
        
        try {
            // Validate JSON
            const payload = JSON.parse(cleanedPayload);
            console.log('Parsed payload:', payload);
            
            // Start actual execution
            this.startFlowExecution(payload);
            
        } catch (error) {
            console.error('JSON parse error:', error);
            console.error('Original payload text:', payloadText);
            console.error('Cleaned payload text:', cleanedPayload);
            console.error('Error position:', error.message);
            
            // Try to find the exact position of the error
            try {
                JSON.parse(cleanedPayload);
            } catch (e) {
                console.error('Detailed error:', e);
                if (e.message.includes('position')) {
                    const position = parseInt(e.message.match(/position (\d+)/)?.[1]);
                    if (position) {
                        console.error('Error at position:', position);
                        console.error('Character at error position:', cleanedPayload[position]);
                        console.error('Context around error:', cleanedPayload.substring(Math.max(0, position - 10), position + 10));
                    }
                }
            }
            
            alert(`Invalid JSON format. Please check your payload and try again.\n\nError: ${error.message}\n\nPlease check the console for detailed debugging information.`);
        }
    }
    
    startFlowExecution(payload) {
        // Create execution tracking
        const execution = this.createExecution();
        const startTime = Date.now();
        
        // Store payload in execution
        execution.payload = payload;
        
        // Restore the execution table UI
        this.restoreExecutionTable();
        
        // Add agent message for starting run with payload info
        this.addAgentMessage(`🚀 **Flow Execution Started!**

📊 **Execution Details:**
• Execution ID: ${execution.id}
• Started: ${new Date().toLocaleString()}
• Payload: ${JSON.stringify(payload, null, 2)}

🔧 **Execution Plan:**
Step 1: HTTP Listener receives payload
Step 2: Input validation verifies required fields
Step 3: Scatter-Gather pattern initiates parallel API calls
Step 4: Component execution monitored in real-time
Step 5: Response aggregation and database logging

⚡ **Monitor Progress:** Check the Executions tab for real-time component status updates.`);
        
        // Update button state
        this.runFlowBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Running...';
        
        // Simulate component execution with realistic timing
        this.simulateComponentExecution(execution.id, startTime);
    }
    
    restoreExecutionTable() {
        const executionsContent = document.querySelector('#executions-tab .executions-content');
        
        executionsContent.innerHTML = `
            <div class="no-executions" id="no-executions">
                <i class="fas fa-play-circle"></i>
                <p>No executions yet. Run a flow to see execution details.</p>
            </div>
            <div class="executions-table-container" id="executions-table-container" style="display: none;">
                <table class="executions-table">
                    <thead>
                        <tr>
                            <th>Execution ID</th>
                            <th>Timestamp</th>
                            <th>Status</th>
                            <th>HTTP Listener</th>
                            <th>Input Validation</th>
                            <th>Directory API</th>
                            <th>Email API</th>
                            <th>Slack API</th>
                            <th>Workday API</th>
                            <th>Database Log</th>
                            <th>Total Time</th>
                        </tr>
                    </thead>
                    <tbody id="executions-table-body">
                        <!-- Execution rows will be inserted here -->
                    </tbody>
                </table>
            </div>
        `;
    }
    
    markRemainingComponentsAsNotExecuted(executionId, startIndex, components) {
        // Mark all components after the failed one as "Not executed"
        for (let i = startIndex; i < components.length; i++) {
            const component = components[i];
            this.updateExecutionComponent(executionId, component.name, 'not-executed', 0, 'Not executed - flow terminated due to validation failure');
        }
    }

    testValidation() {
        console.log('Testing validation with sample payload...');
        // Test with valid sample payload
        fetch('sample-payload.json')
            .then(response => response.json())
            .then(payload => {
                const validation = this.validatePayload(payload);
                if (validation.isValid) {
                    alert('✅ Validation Test PASSED!\n\nSample payload is valid and contains all required fields.');
                } else {
                    alert('❌ Validation Test FAILED!\n\nErrors found:\n' + validation.errors.map(e => `• ${e.message}`).join('\n'));
                }
            })
            .catch(error => {
                alert('❌ Test Error: Could not load sample payload\n\n' + error.message);
            });
    }

    testInvalidValidation() {
        // Test with invalid payload (missing required fields)
        const invalidPayload = {
            "firstName": "Jane",
            "lastName": "Austin",
            // Missing employeeId, email, jobTitle, etc.
            "manager": {
                "name": "John Doe"
                // Missing manager.email
            }
        };
        
        const validation = this.validatePayload(invalidPayload);
        if (!validation.isValid) {
            alert('✅ Invalid Payload Test PASSED!\n\nValidation correctly identified errors:\n' + validation.errors.map(e => `• ${e.message}`).join('\n'));
        } else {
            alert('❌ Invalid Payload Test FAILED!\n\nValidation should have failed but passed instead.');
        }
    }

    validatePayload(payload) {
        const requiredFields = [
            'employeeId', 'firstName', 'lastName', 'email', 'jobTitle', 
            'department', 'location', 'manager', 'startDate', 'systemsToProvision'
        ];
        
        const validationErrors = [];
        
        // Check required top-level fields
        requiredFields.forEach(field => {
            if (!payload || payload[field] === undefined || payload[field] === null || payload[field] === '') {
                validationErrors.push({
                    field: field,
                    message: `Required field '${field}' is missing or empty`,
                    code: 'MISSING_REQUIRED_FIELD'
                });
            }
        });
        
        // Validate email format
        if (payload.email && !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(payload.email)) {
            validationErrors.push({
                field: 'email',
                message: 'Invalid email format',
                code: 'INVALID_EMAIL_FORMAT'
            });
        }
        
        // Validate manager object
        if (payload.manager) {
            if (!payload.manager.name || payload.manager.name.trim() === '') {
                validationErrors.push({
                    field: 'manager.name',
                    message: 'Manager name is required',
                    code: 'MISSING_MANAGER_NAME'
                });
            }
            if (!payload.manager.email || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(payload.manager.email)) {
                validationErrors.push({
                    field: 'manager.email',
                    message: 'Manager email is required and must be valid',
                    code: 'INVALID_MANAGER_EMAIL'
                });
            }
        }
        
        // Validate start date format
        if (payload.startDate && !/^\d{4}-\d{2}-\d{2}$/.test(payload.startDate)) {
            validationErrors.push({
                field: 'startDate',
                message: 'Start date must be in YYYY-MM-DD format',
                code: 'INVALID_DATE_FORMAT'
            });
        }
        
        // Validate systemsToProvision object
        if (payload.systemsToProvision) {
            const requiredSystems = ['directoryAccount', 'emailAccount', 'slackAccount', 'vpnAccess'];
            requiredSystems.forEach(system => {
                if (payload.systemsToProvision[system] === undefined || payload.systemsToProvision[system] === null) {
                    validationErrors.push({
                        field: `systemsToProvision.${system}`,
                        message: `System provisioning flag '${system}' is required`,
                        code: 'MISSING_SYSTEM_FLAG'
                    });
                } else if (typeof payload.systemsToProvision[system] !== 'boolean') {
                    validationErrors.push({
                        field: `systemsToProvision.${system}`,
                        message: `System provisioning flag '${system}' must be a boolean`,
                        code: 'INVALID_SYSTEM_FLAG_TYPE'
                    });
                }
            });
        }
        
        return {
            isValid: validationErrors.length === 0,
            errors: validationErrors
        };
    }
    
    simulateComponentExecution(executionId, startTime) {
        const execution = this.executions.find(e => e.id === executionId);
        const payload = execution ? execution.payload : null;
        
        const components = [
            { name: 'httpListener', delay: 100, successRate: 0.98 },
            { name: 'inputValidation', delay: 200, successRate: 0.95, requiresValidation: true },
            { name: 'directoryApi', delay: 800, successRate: 0.92 },
            { name: 'emailApi', delay: 600, successRate: 0.90 },
            { name: 'slackApi', delay: 1200, successRate: 0.88 },
            { name: 'workdayApi', delay: 1000, successRate: 0.85 },
            { name: 'databaseLog', delay: 300, successRate: 0.96 }
        ];
        
        let completedComponents = 0;
        let hasError = false;
        let flowTerminated = false; // Track if flow should be terminated
        
        components.forEach((component, index) => {
            setTimeout(() => {
                // Check if flow has been terminated (e.g., by validation failure)
                if (flowTerminated) {
                    return; // Skip execution if flow is terminated
                }
                
                let isSuccess = false;
                let errorMessage = '';
                const responseTime = component.delay + Math.floor(Math.random() * 200);
                
                // Special handling for input validation component
                if (component.name === 'inputValidation' && component.requiresValidation) {
                    if (payload) {
                        const validation = this.validatePayload(payload);
                        if (validation.isValid) {
                            isSuccess = true;
                } else {
                            isSuccess = false;
                            hasError = true;
                            flowTerminated = true; // Terminate the flow
                            errorMessage = `Validation failed: ${validation.errors.map(e => e.message).join(', ')}`;
                            
                            // Mark all remaining components as "Not executed"
                            this.markRemainingComponentsAsNotExecuted(executionId, index + 1, components);
                        }
                    } else {
                        isSuccess = false;
                        hasError = true;
                        flowTerminated = true; // Terminate the flow
                        errorMessage = 'No payload provided for validation';
                        
                        // Mark all remaining components as "Not executed"
                        this.markRemainingComponentsAsNotExecuted(executionId, index + 1, components);
                    }
                } else {
                    // Regular random success/failure for other components
                    isSuccess = Math.random() < component.successRate;
                    if (!isSuccess) {
                    hasError = true;
                    const errorMessages = {
                        httpListener: 'Connection timeout',
                        inputValidation: 'Invalid payload format',
                        directoryApi: 'User already exists',
                        emailApi: 'Domain not found',
                        slackApi: 'Rate limit exceeded',
                        workdayApi: 'API authentication failed',
                        databaseLog: 'Connection pool exhausted'
                    };
                        errorMessage = errorMessages[component.name];
                    }
                }
                
                if (isSuccess) {
                    this.updateExecutionComponent(executionId, component.name, 'success', responseTime);
                } else {
                    this.updateExecutionComponent(executionId, component.name, 'error', responseTime, errorMessage);
                }
                
                completedComponents++;
                
                // Check if all components are done OR if flow was terminated early
                if (completedComponents === components.length || flowTerminated) {
                    const totalTime = Date.now() - startTime;
                    const finalStatus = hasError ? 'failed' : 'completed';
                    
                    this.completeExecution(executionId, finalStatus, totalTime);
                    this.runFlowBtn.innerHTML = '<i class="fas fa-play"></i> Run';
                    
                    // Add final agent message with detailed analysis
                    if (hasError) {
                        // Check if this was a validation failure
                        const execution = this.executions.find(exec => exec.id === executionId);
                        console.log('Validation failure check:', {
                            flowTerminated,
                            executionId,
                            execution: execution ? 'found' : 'not found',
                            inputValidationStatus: execution?.components?.inputValidation?.status,
                            hasError
                        });
                        
                        const isValidationFailure = flowTerminated && execution && 
                            execution.components.inputValidation && 
                            execution.components.inputValidation.status === 'Failed';
                        
                        if (isValidationFailure) {
                            this.addAgentMessage(`🧠 Flow Execution Analysis - VALIDATION FAILURE:

📊 Execution Summary:
❌ Employee Onboarding Flow terminated due to INPUT VALIDATION FAILURE
🎯 Execution ID: ${executionId}
⏱️ Total Duration: ${totalTime}ms
📅 Completed: ${new Date().toLocaleString()}

🚨 VALIDATION ERROR DETAILS:
• Input payload failed validation requirements
• Flow execution was terminated at Input Validation step
• All subsequent components marked as "Not executed"
• No system provisioning occurred due to invalid data

🔍 Root Cause Analysis:
• Required fields missing or invalid in input payload
• Data format validation failed (email, date, etc.)
• Nested object validation errors detected
• Payload structure does not meet API requirements

🛠️ Required Actions:
• Fix input payload validation errors
• Ensure all required fields are present and valid
• Verify data formats (email, dates, etc.)
• Check nested object structure (manager, systemsToProvision)
• Re-run flow with corrected payload

💡 Recommendation: This is a data validation issue, not a system connectivity problem. Fix the input payload and retry execution.`, 'error');
                        } else {
                        this.addAgentMessage(`🧠 Flow Execution Analysis - FAILED:

📊 Execution Summary:
❌ Employee Onboarding Flow execution completed with errors
🎯 Execution ID: ${executionId}
⏱️ Total Duration: ${totalTime}ms
📅 Completed: ${new Date().toLocaleString()}

🔍 Error Analysis:
• One or more components failed during execution
• Partial provisioning may have occurred
• Error details available in Executions tab
• System remains in consistent state

🛠️ Next Steps:
• Review error details in Executions tab
• Check component-specific error messages
• Verify system connectivity and configuration
• Consider retry mechanism for failed components

💡 Recommendation: Investigate failed components and retry execution after resolving issues.`, 'error');
                        }
                    } else {
                        if (this.samplePayload && this.responsePayloads) {
                            const successResponse = { ...this.responsePayloads.success };
                            successResponse.employeeId = this.samplePayload.employeeId;
                            successResponse.provisionedSystems.emailAccount.accountId = `gmail-${this.samplePayload.email.split('@')[0]}`;
                            
                            const responseText = JSON.stringify(successResponse, null, 2);
                            this.addAgentMessage(`🧠 Flow Execution Analysis - SUCCESS:

📊 Execution Summary:
✅ Employee Onboarding Flow executed successfully
🎯 Execution ID: ${executionId}
⏱️ Total Duration: ${totalTime}ms
👤 Employee: ${this.samplePayload.firstName} ${this.samplePayload.lastName} (${this.samplePayload.employeeId})
📅 Completed: ${new Date().toLocaleString()}

🔧 Component Analysis:
• HTTP Listener: Successfully received employee payload
• Input Validation: All required fields validated
• Employee Directory: User account created successfully
• Gmail: Mailbox provisioned
• Slack: Workspace invitation sent
• Workday: Employee record created
• Database Log: Status persisted for audit trail

📤 Response Payload:
\`\`\`json
${responseText}
\`\`\`

🎯 Business Impact:
• Employee fully onboarded across all systems
• All provisioning tasks completed successfully
• Audit trail maintained for compliance
• Ready for employee first day activities`);
                        } else {
                            this.addAgentMessage(`🧠 Flow Execution Analysis - SUCCESS:

📊 Execution Summary:
✅ Employee Onboarding Flow executed successfully
🎯 Execution ID: ${executionId}
⏱️ Total Duration: ${totalTime}ms
📅 Completed: ${new Date().toLocaleString()}

🔧 Component Analysis:
• All components executed successfully
• Parallel processing completed efficiently
• Response aggregation successful
• Database logging completed

🎯 Performance Metrics:
• Execution time optimized through parallel processing
• All API calls completed within expected timeframes
• No errors or timeouts encountered
• System resources utilized efficiently`);
                        }
                    }
                    
                    console.log('Flow executed:', finalStatus, 'Execution ID:', executionId);
                }
            }, component.delay);
        });
    }
    
    checkIfFlowExists() {
        // Check if the zero state is visible (meaning no flow is loaded)
        const zeroState = document.querySelector('.zero-state');
        console.log('Zero state element:', zeroState);
        console.log('Zero state display:', zeroState ? zeroState.style.display : 'not found');
        
        if (zeroState && zeroState.style.display !== 'none') {
            console.log('Zero state is visible, no flow exists');
            return false;
        }
        
        // Check if there are any flow nodes on the canvas
        const flowNodeElements = document.querySelectorAll('.flow-node');
        console.log('Flow nodes found:', flowNodeElements.length);
        console.log('Flow nodes:', flowNodeElements);
        
        return flowNodeElements.length > 0;
    }
    
    showNoFlowMessage() {
        // Create a temporary message overlay
        const messageOverlay = document.createElement('div');
        messageOverlay.className = 'no-flow-message';
        messageOverlay.innerHTML = `
            <div class="message-content">
                <i class="fas fa-exclamation-circle"></i>
                <h3>No flows to run</h3>
                <p>Please create a flow first or load an existing flow before running.</p>
                <button class="btn btn-primary" onclick="this.closest('.no-flow-message').remove()">OK</button>
            </div>
        `;
        
        // Add to the flow canvas
        const flowCanvas = document.querySelector('.flow-canvas');
        flowCanvas.appendChild(messageOverlay);
        
        // Auto-remove after 5 seconds
        setTimeout(() => {
            if (messageOverlay.parentNode) {
                messageOverlay.remove();
            }
        }, 5000);
    }
    
    deployFlow() {
        console.log('Deploy button clicked');
        // Check if there are any flows on the canvas
        const hasFlow = this.checkIfFlowExists();
        console.log('Has flow:', hasFlow);
        
        if (!hasFlow) {
            console.log('No flow found, showing message');
            this.addAgentMessage("I can't deploy the flow because there are no flows on the canvas. Please create a flow first before deploying.", 'error');
            return;
        }
        
        // Add agent message for deployment start
        this.addAgentMessage("🚀 Starting deployment process... Preparing the flow for production environment.");
        
        // Simulate deploying the flow
        this.deployFlowBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deploying...';
        
        setTimeout(() => {
            this.deployFlowBtn.innerHTML = '<i class="fas fa-rocket"></i> Deploy';
            // Add agent message for successful deployment
            this.addAgentMessage("✅ Flow deployed successfully! The Employee Onboarding Flow is now live in the production environment and ready to process requests.");
            console.log('Flow deployed successfully');
        }, 3000);
    }
    
    exportFlow() {
        console.log('Export button clicked');
        // Check if there are any flows on the canvas
        const hasFlow = this.checkIfFlowExists();
        console.log('Has flow:', hasFlow);
        
        if (!hasFlow) {
            console.log('No flow found, showing message');
            this.addAgentMessage("I can't export the flow because there are no flows on the canvas. Please create a flow first before exporting.", 'error');
            return;
        }
        
        // Add agent message for export start
        this.addAgentMessage("📦 Starting export process... Generating flow configuration package.");
        
        // Simulate exporting the flow
        this.exportFlowBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Exporting...';
        
        setTimeout(() => {
            this.exportFlowBtn.innerHTML = '<i class="fas fa-download"></i> Export';
            
            // Create and download JAR file
            this.createAndDownloadJar();
            
            // Add agent message for successful export
            this.addAgentMessage("✅ Flow exported successfully! The flow configuration has been packaged and is ready for backup or sharing. The export includes all components, connectors, and configuration settings.");
            console.log('Flow exported successfully');
        }, 1500);
    }
    
    createAndDownloadJar() {
        console.log('Creating JAR file for download');
        
        // Get current flow data
        const currentFlowId = this.getCurrentFlowId();
        const flowData = currentFlowId ? this.flows[currentFlowId] : null;
        
        if (!flowData) {
            console.log('No flow data found for export');
            return;
        }
        
        // Create a simple JAR-like structure (ZIP format)
        const jarContent = this.createJarStructure(flowData);
        
        // Create blob and download
        const blob = new Blob([jarContent], { type: 'application/java-archive' });
        const url = URL.createObjectURL(blob);
        
        // Create download link
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = `muleflow-${flowData.name.replace(/\s+/g, '-').toLowerCase()}-${Date.now()}.jar`;
        
        // Trigger download
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
        
        // Clean up URL
        setTimeout(() => URL.revokeObjectURL(url), 1000);
        
        console.log('JAR file download initiated');
    }
    
    createJarStructure(flowData) {
        // Create a simple ZIP-like structure for the JAR file
        // This is a simplified version - in reality, JAR files are ZIP archives
        
        const manifest = `Manifest-Version: 1.0
Created-By: MuleSoft Flow Builder
Main-Class: com.mulesoft.flow.${flowData.name.replace(/\s+/g, '')}
Flow-Name: ${flowData.name}
Flow-Version: 1.0.0
Flow-Description: Generated by MuleSoft Flow Builder

`;
        
        const flowConfig = `<?xml version="1.0" encoding="UTF-8"?>
<mule xmlns="http://www.mulesoft.org/schema/mule/core"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd">
    
    <flow name="${flowData.name}">
        <!-- Flow Configuration -->
        <logger level="INFO" message="Starting ${flowData.name} flow"/>
        
        <!-- Flow Nodes -->
        ${flowData.nodes.map(node => this.generateMuleXML(node)).join('\n        ')}
        
        <logger level="INFO" message="Completed ${flowData.name} flow"/>
    </flow>
    
</mule>`;

        const pomXml = `<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <groupId>com.mulesoft.flow</groupId>
    <artifactId>${flowData.name.replace(/\s+/g, '-').toLowerCase()}</artifactId>
    <version>1.0.0</version>
    <packaging>mule-application</packaging>
    
    <name>${flowData.name}</name>
    <description>Generated by MuleSoft Flow Builder</description>
    
    <properties>
        <mule.version>4.4.0</mule.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <build>
        <plugins>
            <plugin>
                <groupId>org.mule.tools.maven</groupId>
                <artifactId>mule-maven-plugin</artifactId>
                <version>3.6.0</version>
                <extensions>true</extensions>
            </plugin>
        </plugins>
    </build>
</project>`;

        // For simplicity, we'll create a text file that represents the JAR structure
        // In a real implementation, you'd use a proper ZIP library
        const jarStructure = `MULE FLOW EXPORT
==================

Flow Name: ${flowData.name}
Export Date: ${new Date().toISOString()}
Flow ID: ${this.getCurrentFlowId()}

MANIFEST.MF:
${manifest}

src/main/mule/${flowData.name.replace(/\s+/g, '-').toLowerCase()}.xml:
${flowConfig}

pom.xml:
${pomXml}

FLOW NODES:
${flowData.nodes.map((node, index) => `${index + 1}. ${node.type}: ${node.label}`).join('\n')}

This is a MuleSoft Flow export package.
Import this into Anypoint Studio or deploy to CloudHub.
`;

        return jarStructure;
    }
    
    generateMuleXML(node) {
        switch(node.type) {
            case 'start':
                return '<logger level="INFO" message="Flow started"/>';
            case 'end':
                return '<logger level="INFO" message="Flow completed"/>';
            case 'http-listener':
                return `<http:listener config-ref="HTTP_Listener_config" path="/api" allowedMethods="GET,POST"/>
        <logger level="INFO" message="HTTP request received"/>`;
            case 'validate-input':
                return `<validation:is-not-null value="#[payload]" message="Payload cannot be null"/>
        <logger level="INFO" message="Input validation passed"/>`;
            case 'employee-directory':
                return `<http:request config-ref="Employee_Directory_config" path="/employees" method="GET"/>
        <logger level="INFO" message="Employee directory accessed"/>`;
            case 'gmail':
                return `<email:send config-ref="Gmail_config" to="#[payload.email]" subject="Welcome!"/>
        <logger level="INFO" message="Email sent via Gmail"/>`;
            case 'slack':
                return `<slack:send-message config-ref="Slack_config" channel="#general" text="New employee onboarded"/>
        <logger level="INFO" message="Slack notification sent"/>`;
            case 'workday':
                return `<http:request config-ref="Workday_config" path="/employees" method="POST"/>
        <logger level="INFO" message="Workday record created"/>`;
            case 'database-log':
                return `<db:insert config-ref="Database_config" tableName="onboarding_log">
            <db:sql>INSERT INTO logs (message, timestamp) VALUES ('Flow executed', NOW())</db:sql>
        </db:insert>
        <logger level="INFO" message="Database log entry created"/>`;
            case 'scatter':
                return `<scatter-gather>
            <route>
                <logger level="INFO" message="Parallel route 1"/>
            </route>
            <route>
                <logger level="INFO" message="Parallel route 2"/>
            </route>
        </scatter-gather>`;
            case 'gather':
                return '<logger level="INFO" message="Gathering parallel results"/>';
            default:
                return `<logger level="INFO" message="${node.label} executed"/>`;
        }
    }
}

// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
    const chatManager = new ChatManager();
    const flowsManager = new FlowsManager();
    
    // Make flowsManager globally accessible for chat interactions
    window.flowsManager = flowsManager;
    
    // Make chatManager globally accessible for flow interactions
    window.chatManager = chatManager;
    
    // Add some initial interaction
    console.log('Mulesoft Vibes & Integration Flows app initialized!');
    console.log('flowsManager available:', window.flowsManager);
    console.log('flowDiagram element:', flowsManager.flowDiagram);
    
    // Simulate real-time updates
    setInterval(() => {
        // In a real application, this would update flow data
        console.log('Checking for flow updates...');
    }, 10000); // Check every 10 seconds
    
    // Initialize resize handles
    initializeResizeHandle();
});

// Resize Handle Functionality
function initializeResizeHandle() {
    const resizeHandle = document.getElementById('resizeHandle');
    const leftPane = document.getElementById('leftPane');
    const rightPane = document.getElementById('rightPane');
    
    if (!resizeHandle || !leftPane || !rightPane) {
        console.log('Resize handle elements not found');
        return;
    }
    
    let isResizing = false;
    let startX = 0;
    let startLeftWidth = 0;
    
    resizeHandle.addEventListener('mousedown', (e) => {
        isResizing = true;
        startX = e.clientX;
        startLeftWidth = leftPane.offsetWidth;
        
        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
        
        // Prevent text selection during resize
        e.preventDefault();
    });
    
    function handleMouseMove(e) {
        if (!isResizing) return;
        
        const deltaX = e.clientX - startX;
        const newLeftWidth = startLeftWidth + deltaX;
        const containerWidth = document.querySelector('.app-container').offsetWidth;
        
        // Calculate minimum and maximum widths (20% to 80% of container)
        const minLeftWidth = containerWidth * 0.2;
        const maxLeftWidth = containerWidth * 0.8;
        
        // Constrain the width
        const constrainedWidth = Math.max(minLeftWidth, Math.min(maxLeftWidth, newLeftWidth));
        
        // Update pane widths
        leftPane.style.flex = 'none';
        leftPane.style.width = constrainedWidth + 'px';
        rightPane.style.flex = '1';
    }
    
    function handleMouseUp() {
        isResizing = false;
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
    }
    
    // Prevent resize handle from being selected
    resizeHandle.addEventListener('selectstart', (e) => {
        e.preventDefault();
    });
}