UX improvements

static/css/main.css

@@ -2114,4 +2114,185 @@ input[type="text"]:focus, select:focus {
         flex-direction: column;
         gap: 0.5rem;
     }
+}
+
+/* Add these styles to the existing main.css file - they use existing design patterns */
+
+/* Settings Modal Enhancements - using existing provider-item styles */
+#settings-modal .modal-section {
+    margin-bottom: 1.5rem;
+}
+
+#settings-modal .modal-section:last-child {
+    margin-bottom: 0;
+}
+
+/* Provider configuration section using existing provider-item styling */
+#provider-config-list .provider-item {
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
+    border: 1px solid #333;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+#provider-config-list .provider-item:last-child {
+    margin-bottom: 0;
+}
+
+#provider-config-list .provider-item:hover {
+    border-color: #444;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+/* Provider toggle styling - extends existing checkbox pattern */
+.provider-toggle {
+    appearance: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    border: 2px solid #555 !important;
+    background: #1a1a1a !important;
+    cursor: pointer !important;
+    position: relative !important;
+    border-radius: 3px !important;
+    transition: all 0.3s ease !important;
+    margin: 0 !important;
+}
+
+.provider-toggle:checked {
+    background: #00ff41 !important;
+    border-color: #00ff41 !important;
+}
+
+.provider-toggle:checked::after {
+    content: '✓' !important;
+    position: absolute !important;
+    top: -3px !important;
+    left: 1px !important;
+    color: #1a1a1a !important;
+    font-size: 12px !important;
+    font-weight: bold !important;
+}
+
+.provider-toggle:hover {
+    border-color: #00ff41 !important;
+    box-shadow: 0 0 5px rgba(0, 255, 65, 0.3) !important;
+}
+
+/* API Key status row styling - uses existing status-row pattern */
+.api-key-status-row {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid;
+    transition: all 0.3s ease;
+    margin-top: 0.5rem;
+}
+
+.api-key-status-row.configured {
+    background: rgba(0, 255, 65, 0.1);
+    border-color: rgba(0, 255, 65, 0.3);
+}
+
+.api-key-status-row.not-configured {
+    background: rgba(255, 153, 0, 0.1);
+    border-color: rgba(255, 153, 0, 0.3);
+}
+
+/* Settings modal button styling - uses existing button classes */
+#settings-modal .button-group {
+    padding-top: 1.5rem;
+    border-top: 1px solid #333;
+    margin-top: 1.5rem;
+}
+
+/* Clear button specific styling - extends btn-secondary */
+.clear-api-key-btn {
+    font-size: 0.8rem !important;
+    padding: 0.4rem 0.8rem !important;
+    min-width: auto !important;
+}
+
+.clear-api-key-btn:disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+}
+
+/* Provider configuration checkbox label styling */
+#provider-config-list .status-row label {
+    color: #e0e0e0;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+#provider-config-list .status-row label:hover {
+    color: #00ff41;
+}
+
+/* Settings section count badges - uses existing merge-badge styling */
+#provider-count,
+#api-key-count {
+    background: #444;
+    color: #fff;
+    padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+}
+
+/* API key help text styling - uses existing patterns */
+#settings-modal .apikey-help {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.5rem;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+/* Modal section content spacing */
+#settings-modal .modal-section-content {
+    padding: 1rem;
+}
+
+#settings-modal .modal-section-content .provider-item {
+    padding: 1rem;
+}
+
+/* Transition effects for API key clearing */
+.api-key-clearing {
+    opacity: 0.6;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.api-key-cleared {
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s ease;
+}
+
+/* Settings modal responsiveness - extends existing responsive patterns */
+@media (max-width: 768px) {
+    #settings-modal .modal-content {
+        width: 95%;
+        margin: 5% auto;
+        max-height: 90vh;
+    }
+    
+    #provider-config-list .provider-item {
+        margin-bottom: 0.75rem;
+    }
+    
+    #settings-modal .provider-stats {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+    
+    #settings-modal .button-group {
+        flex-direction: column;
+    }
 }

static/js/main.js

@@ -34,8 +34,8 @@ class DNSReconApp {
                 this.updateStatus();
                 this.loadProviders();
                 this.initializeEnhancedModals();
+                this.addCheckboxStyling();
                 
-                // FIXED: Force initial graph update to handle empty sessions properly
                 this.updateGraph();
                 
                 console.log('DNSRecon application initialized successfully');
@@ -81,9 +81,7 @@ class DNSReconApp {
             // Settings Modal elements
             settingsModal: document.getElementById('settings-modal'),
             settingsModalClose: document.getElementById('settings-modal-close'),
-            apiKeyInputs: document.getElementById('api-key-inputs'),
-            saveApiKeys: document.getElementById('save-api-keys'),
-            resetApiKeys: document.getElementById('reset-api-keys'),
+            
 
             // Other elements
             sessionId: document.getElementById('session-id'),
@@ -182,10 +180,21 @@ class DNSReconApp {
                 });
             }
             if (this.elements.saveApiKeys) {
-                this.elements.saveApiKeys.addEventListener('click', () => this.saveApiKeys());
+                this.elements.saveApiKeys.removeEventListener('click', this.saveApiKeys);
             }
             if (this.elements.resetApiKeys) {
-                this.elements.resetApiKeys.addEventListener('click', () => this.resetApiKeys());
+                this.elements.resetApiKeys.removeEventListener('click', this.resetApiKeys);
+            }
+            
+            // Setup new handlers
+            const saveSettingsBtn = document.getElementById('save-settings');
+            const resetSettingsBtn = document.getElementById('reset-settings');
+            
+            if (saveSettingsBtn) {
+                saveSettingsBtn.addEventListener('click', () => this.saveSettings());
+            }
+            if (resetSettingsBtn) {
+                resetSettingsBtn.addEventListener('click', () => this.resetSettings());
             }
 
             // Listen for the custom event from the graph
@@ -724,7 +733,7 @@ class DNSReconApp {
             
             if (response.success) {
                 this.updateProviderDisplay(response.providers);
-                this.buildApiKeyModal(response.providers);
+                this.buildSettingsModal(response.providers); // Updated to use new function
                 console.log('Providers loaded successfully');
             }
             
@@ -732,6 +741,411 @@ class DNSReconApp {
             console.error('Failed to load providers:', error);
         }
     }
+
+    /**
+     * Build the enhanced settings modal with provider configuration and API keys
+     * @param {Object} providers - Provider information from backend
+     */
+    buildSettingsModal(providers) {
+        this.buildProviderConfigSection(providers);
+        this.buildApiKeySection(providers);
+        this.updateSettingsCounts(providers);
+    }
+
+    /**
+     * Build the provider configuration section with enable/disable checkboxes
+     * @param {Object} providers - Provider information
+     */
+    buildProviderConfigSection(providers) {
+        const providerConfigList = document.getElementById('provider-config-list');
+        if (!providerConfigList) return;
+
+        providerConfigList.innerHTML = '';
+
+        for (const [name, info] of Object.entries(providers)) {
+            const providerConfig = document.createElement('div');
+            providerConfig.className = 'provider-item';
+            
+            const statusClass = info.enabled ? 'enabled' : 'disabled';
+            const statusIcon = info.enabled ? '✓' : '✗';
+            
+            providerConfig.innerHTML = `
+                <div class="provider-header">
+                    <div class="provider-name">${info.display_name}</div>
+                    <div class="provider-status ${statusClass}">
+                        ${statusIcon} ${info.enabled ? 'Enabled' : 'Disabled'}
+                    </div>
+                </div>
+                <div class="status-row">
+                    <div class="status-label">
+                        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+                            <input type="checkbox" 
+                                data-provider="${name}" 
+                                class="provider-toggle"
+                                ${info.enabled ? 'checked' : ''}
+                                style="appearance: none; width: 16px; height: 16px; border: 2px solid #555; background: #1a1a1a; cursor: pointer; position: relative;">
+                            <span>Auto-process with this provider</span>
+                        </label>
+                    </div>
+                </div>
+            `;
+            
+            providerConfigList.appendChild(providerConfig);
+        }
+
+        // Add checkbox styling and event handlers
+        this.setupProviderCheckboxes();
+    }
+
+    /**
+     * Setup provider checkbox styling and event handlers
+     */
+    setupProviderCheckboxes() {
+        const checkboxes = document.querySelectorAll('.provider-toggle');
+        
+        checkboxes.forEach(checkbox => {
+            // Apply existing checkbox styling
+            checkbox.style.cssText = `
+                appearance: none;
+                width: 16px;
+                height: 16px;
+                border: 2px solid #555;
+                background: #1a1a1a;
+                cursor: pointer;
+                position: relative;
+                border-radius: 3px;
+                transition: all 0.3s ease;
+            `;
+            
+            // Update visual state
+            this.updateCheckboxAppearance(checkbox);
+            
+            // Add change event handler
+            checkbox.addEventListener('change', (e) => {
+                this.updateCheckboxAppearance(e.target);
+            });
+        });
+    }
+
+    /**
+     * Add CSS for checkbox styling since we're using existing styles
+     */
+    addCheckboxStyling() {
+        // Add CSS for the checkboxes to work with existing styles
+        const style = document.createElement('style');
+        style.textContent = `
+            .provider-toggle[data-checked="true"]::after {
+                content: '✓';
+                position: absolute;
+                top: -2px;
+                left: 2px;
+                color: #1a1a1a;
+                font-size: 12px;
+                font-weight: bold;
+            }
+            
+            .provider-toggle:hover {
+                border-color: #00ff41;
+            }
+            
+            .api-key-status-row {
+                transition: all 0.3s ease;
+            }
+            
+            .provider-item {
+                margin-bottom: 1rem;
+            }
+            
+            .provider-item:last-child {
+                margin-bottom: 0;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+
+    /**
+     * Update checkbox appearance based on checked state
+     */
+    updateCheckboxAppearance(checkbox) {
+        if (checkbox.checked) {
+            checkbox.style.background = '#00ff41';
+            checkbox.style.borderColor = '#00ff41';
+            checkbox.style.setProperty('content', '"✓"', 'important');
+            
+            // Add checkmark via pseudo-element simulation
+            checkbox.setAttribute('data-checked', 'true');
+        } else {
+            checkbox.style.background = '#1a1a1a';
+            checkbox.style.borderColor = '#555';
+            checkbox.removeAttribute('data-checked');
+        }
+    }
+
+    /**
+     * Enhanced API key section builder - FIXED to always allow API key input
+     * @param {Object} providers - Provider information
+     */
+    buildApiKeySection(providers) {
+        const apiKeyInputs = document.getElementById('api-key-inputs');
+        if (!apiKeyInputs) return;
+
+        apiKeyInputs.innerHTML = '';
+        let hasApiKeyProviders = false;
+
+        for (const [name, info] of Object.entries(providers)) {
+            if (info.requires_api_key) {
+                hasApiKeyProviders = true;
+                
+                const inputGroup = document.createElement('div');
+                inputGroup.className = 'provider-item';
+                
+                // Check if API key is set via backend (not clearable) or frontend (clearable)
+                const isBackendConfigured = info.api_key_source === 'backend';
+                
+                if (info.api_key_configured && isBackendConfigured) {
+                    // API key is configured via backend - show status only
+                    inputGroup.innerHTML = `
+                        <div class="provider-header">
+                            <div class="provider-name">${info.display_name}</div>
+                            <div class="provider-status enabled">✓ Backend Configured</div>
+                        </div>
+                        <div class="api-key-status-row" style="padding: 0.75rem; background: rgba(0, 255, 65, 0.1); border-radius: 4px; border: 1px solid rgba(0, 255, 65, 0.3);">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <div class="status-value">API Key Active</div>
+                                    <div class="status-label" style="font-size: 0.8rem;">
+                                        Configured via environment variable
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                } else if (info.api_key_configured && !isBackendConfigured) {
+                    // API key is configured via frontend - show status with clear option
+                    inputGroup.innerHTML = `
+                        <div class="provider-header">
+                            <div class="provider-name">${info.display_name}</div>
+                            <div class="provider-status enabled">✓ Web Configured</div>
+                        </div>
+                        <div class="api-key-status-row" style="padding: 0.75rem; background: rgba(0, 255, 65, 0.1); border-radius: 4px; border: 1px solid rgba(0, 255, 65, 0.3);">
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <div>
+                                    <div class="status-value">API Key Active</div>
+                                    <div class="status-label" style="font-size: 0.8rem;">
+                                        Set via web interface (session-only)
+                                    </div>
+                                </div>
+                                <button class="clear-api-key-btn btn-secondary" data-provider="${name}" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">
+                                    <span class="btn-icon">[×]</span>
+                                    <span>Clear</span>
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    // API key not configured - ALWAYS show input field
+                    const statusClass = info.enabled ? 'enabled' : 'api-key-required';
+                    const statusText = info.enabled ? '○ Ready for API Key' : '⚠️ API Key Required';
+                    
+                    inputGroup.innerHTML = `
+                        <div class="provider-header">
+                            <div class="provider-name">${info.display_name}</div>
+                            <div class="provider-status ${statusClass}">
+                                ${statusText}
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <label for="${name}-api-key">API Key</label>
+                            <input type="password" 
+                                id="${name}-api-key" 
+                                data-provider="${name}" 
+                                placeholder="Enter ${info.display_name} API Key"
+                                autocomplete="off">
+                            <div class="apikey-help">
+                                ${info.api_key_help || `Provides enhanced ${info.display_name.toLowerCase()} data and context.`}
+                                ${!info.enabled ? ' Enable the provider above to use this API key.' : ''}
+                            </div>
+                        </div>
+                    `;
+                }
+                
+                apiKeyInputs.appendChild(inputGroup);
+            }
+        }
+        
+        if (!hasApiKeyProviders) {
+            apiKeyInputs.innerHTML = `
+                <div class="status-row">
+                    <div class="status-label">No providers require API keys</div>
+                    <div class="status-value">All Active</div>
+                </div>
+            `;
+        }
+        
+        // Setup clear button event handlers
+        this.setupApiKeyClearHandlers();
+    }
+
+    /**
+     * Setup API key clear button handlers
+     */
+    setupApiKeyClearHandlers() {
+        document.querySelectorAll('.clear-api-key-btn').forEach(button => {
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                const provider = e.currentTarget.dataset.provider;
+                this.clearSingleApiKey(provider, e.currentTarget);
+            });
+        });
+    }
+
+    /**
+     * Clear a single API key with immediate feedback
+     */
+    async clearSingleApiKey(provider, buttonElement) {
+        try {
+            // Show immediate feedback
+            const originalContent = buttonElement.innerHTML;
+            buttonElement.innerHTML = '<span class="btn-icon">[...]</span><span>Clearing...</span>';
+            buttonElement.disabled = true;
+            
+            const response = await this.apiCall('/api/config/api-keys', 'POST', { [provider]: '' });
+            
+            if (response.success) {
+                // Find the parent container and update it
+                const providerContainer = buttonElement.closest('.provider-item');
+                const statusRow = providerContainer.querySelector('.api-key-status-row');
+                
+                // Animate out the current status
+                statusRow.style.transition = 'all 0.3s ease';
+                statusRow.style.opacity = '0';
+                statusRow.style.transform = 'translateX(-10px)';
+                
+                setTimeout(() => {
+                    // Replace with input field
+                    const providerName = buttonElement.dataset.provider;
+                    const apiKeySection = this.elements.apiKeyInputs;
+                    
+                    // Rebuild the API key section to reflect changes
+                    this.loadProviders();
+                    
+                    this.showSuccess(`API key for ${provider} has been cleared.`);
+                }, 300);
+                
+            } else {
+                throw new Error(response.error || 'Failed to clear API key');
+            }
+        } catch (error) {
+            // Restore button on error
+            buttonElement.innerHTML = originalContent;
+            buttonElement.disabled = false;
+            this.showError(`Error clearing API key: ${error.message}`);
+        }
+    }
+
+    /**
+     * Update settings modal counts
+     */
+    updateSettingsCounts(providers) {
+        const providerCount = Object.keys(providers).length;
+        const apiKeyCount = Object.values(providers).filter(p => p.requires_api_key).length;
+        
+        const providerCountElement = document.getElementById('provider-count');
+        const apiKeyCountElement = document.getElementById('api-key-count');
+        
+        if (providerCountElement) providerCountElement.textContent = providerCount;
+        if (apiKeyCountElement) apiKeyCountElement.textContent = apiKeyCount;
+    }
+
+    /**
+     * Enhanced save settings function
+     */
+    async saveSettings() {
+        try {
+            const settings = {
+                apiKeys: {},
+                providerSettings: {}
+            };
+            
+            // Collect API key inputs
+            const apiKeyInputs = document.querySelectorAll('#api-key-inputs input[type="password"]');
+            apiKeyInputs.forEach(input => {
+                const provider = input.dataset.provider;
+                const value = input.value.trim();
+                if (provider && value) {
+                    settings.apiKeys[provider] = value;
+                }
+            });
+            
+            // Collect provider enable/disable settings
+            const providerCheckboxes = document.querySelectorAll('.provider-toggle');
+            providerCheckboxes.forEach(checkbox => {
+                const provider = checkbox.dataset.provider;
+                if (provider) {
+                    settings.providerSettings[provider] = {
+                        enabled: checkbox.checked
+                    };
+                }
+            });
+            
+            // Save API keys if any
+            if (Object.keys(settings.apiKeys).length > 0) {
+                const apiKeyResponse = await this.apiCall('/api/config/api-keys', 'POST', settings.apiKeys);
+                if (!apiKeyResponse.success) {
+                    throw new Error(apiKeyResponse.error || 'Failed to save API keys');
+                }
+            }
+            
+            // Save provider settings if any
+            if (Object.keys(settings.providerSettings).length > 0) {
+                const providerResponse = await this.apiCall('/api/config/providers', 'POST', settings.providerSettings);
+                if (!providerResponse.success) {
+                    throw new Error(providerResponse.error || 'Failed to save provider settings');
+                }
+            }
+            
+            this.showSuccess('Settings saved successfully');
+            this.hideSettingsModal();
+            
+            // Reload providers to reflect changes
+            this.loadProviders();
+            
+        } catch (error) {
+            this.showError(`Error saving settings: ${error.message}`);
+        }
+    }
+
+    /**
+     * Reset settings to defaults
+     */
+    async resetSettings() {
+        try {
+            // Clear all API key inputs
+            const apiKeyInputs = document.querySelectorAll('#api-key-inputs input[type="password"]');
+            apiKeyInputs.forEach(input => {
+                input.value = '';
+            });
+            
+            // Reset all provider checkboxes to enabled (default)
+            const providerCheckboxes = document.querySelectorAll('.provider-toggle');
+            providerCheckboxes.forEach(checkbox => {
+                checkbox.checked = true;
+                this.updateCheckboxAppearance(checkbox);
+            });
+            
+            // Reset recursion depth to default
+            const depthSelect = document.getElementById('max-depth');
+            if (depthSelect) {
+                depthSelect.value = '2';
+            }
+            
+            this.showInfo('Settings reset to defaults');
+            
+        } catch (error) {
+            this.showError(`Error resetting settings: ${error.message}`);
+        }
+    }
     
     /**
      * Update provider display
@@ -1501,33 +1915,6 @@ class DNSReconApp {
         }
     }
 
-    /**
-     * Copy text to clipboard with user feedback
-     */
-    async copyToClipboard(text) {
-        try {
-            await navigator.clipboard.writeText(text);
-            this.showMessage('Copied to clipboard', 'success');
-        } catch (err) {
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = text;
-            textArea.style.position = 'fixed';
-            textArea.style.opacity = '0';
-            document.body.appendChild(textArea);
-            textArea.select();
-            
-            try {
-                document.execCommand('copy');
-                this.showMessage('Copied to clipboard', 'success');
-            } catch (fallbackErr) {
-                this.showMessage('Failed to copy text', 'error');
-            }
-            
-            document.body.removeChild(textArea);
-        }
-    }
-
     /**
      * Enhanced keyboard navigation for modals
      */
@@ -1690,40 +2077,7 @@ class DNSReconApp {
         });
     }
     
-    /**
-     * Check if graph data has changed
-     * @param {Object} graphData - New graph data
-     * @returns {boolean} True if data has changed
-     */
-    hasGraphChanged(graphData) {
-        // Simple check based on node and edge counts and timestamps
-        const currentStats = this.graphManager.getStatistics();
-        const newNodeCount = graphData.nodes ? graphData.nodes.length : 0;
-        const newEdgeCount = graphData.edges ? graphData.edges.length : 0;
-        
-        // FIXED: Always update if we currently have no data (ensures placeholder is handled correctly)
-        if (currentStats.nodeCount === 0 && currentStats.edgeCount === 0) {
-            return true;
-        }
-        
-        // Check if counts changed
-        const countsChanged = currentStats.nodeCount !== newNodeCount || currentStats.edgeCount !== newEdgeCount;
-        
-        // Also check if we have new timestamp data
-        const hasNewTimestamp = graphData.statistics && 
-                            graphData.statistics.last_modified && 
-                            graphData.statistics.last_modified !== this.lastGraphTimestamp;
-        
-        if (hasNewTimestamp) {
-            this.lastGraphTimestamp = graphData.statistics.last_modified;
-        }
-        
-        const changed = countsChanged || hasNewTimestamp;
-        
-        console.log(`Graph change check: Current(${currentStats.nodeCount}n, ${currentStats.edgeCount}e) vs New(${newNodeCount}n, ${newEdgeCount}e) = ${changed}`);
-        
-        return changed;
-    }
+
         
     /**
      * Make API call to server
@@ -1823,15 +2177,6 @@ class DNSReconApp {
         return statusMap[status] || status;
     }
     
-    /**
-     * Format label for display
-     * @param {string} label - Raw label
-     * @returns {string} Formatted label
-     */
-    formatLabel(label) {
-        return label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-    }
-    
     /**
      * Format value for display
      * @param {*} value - Raw value
@@ -1955,73 +2300,7 @@ class DNSReconApp {
         return colors[type] || colors.info;
     }
 
-    /**
-     * Build the API key modal dynamically
-     * @param {Object} providers - Provider information
-     */
-    buildApiKeyModal(providers) {
-        if (!this.elements.apiKeyInputs) return;
-        this.elements.apiKeyInputs.innerHTML = ''; // Clear existing inputs
-        let hasApiKeyProviders = false;
 
-        for (const [name, info] of Object.entries(providers)) {
-            if (info.requires_api_key) {
-                hasApiKeyProviders = true;
-                const inputGroup = document.createElement('div');
-                inputGroup.className = 'apikey-section';
-
-                if (info.enabled) {
-                    // If the API key is set and the provider is enabled
-                    inputGroup.innerHTML = `
-                        <label for="${name}-api-key">${info.display_name} API Key</label>
-                        <div class="api-key-set-message">
-                            <span class="api-key-set-text">API Key is set</span>
-                            <button class="clear-api-key-btn" data-provider="${name}">Clear</button>
-                        </div>
-                        <p class="apikey-help">Provides infrastructure context and service information.</p>
-                    `;
-                } else {
-                    // If the API key is not set
-                    inputGroup.innerHTML = `
-                        <label for="${name}-api-key">${info.display_name} API Key</label>
-                        <input type="password" id="${name}-api-key" data-provider="${name}" placeholder="Enter ${info.display_name} API Key">
-                        <p class="apikey-help">Provides infrastructure context and service information.</p>
-                    `;
-                }
-                this.elements.apiKeyInputs.appendChild(inputGroup);
-            }
-        }
-        
-        // Add event listeners for the new clear buttons
-        this.elements.apiKeyInputs.querySelectorAll('.clear-api-key-btn').forEach(button => {
-            button.addEventListener('click', (e) => {
-                const provider = e.target.dataset.provider;
-                this.clearApiKey(provider);
-            });
-        });
-
-        if (!hasApiKeyProviders) {
-            this.elements.apiKeyInputs.innerHTML = '<p>No providers require API keys.</p>';
-        }
-    }
-
-    /**
-     * Clear an API key for a specific provider
-     * @param {string} provider The name of the provider to clear the API key for
-     */
-    async clearApiKey(provider) {
-        try {
-            const response = await this.apiCall('/api/config/api-keys', 'POST', { [provider]: '' });
-            if (response.success) {
-                this.showSuccess(`API key for ${provider} has been cleared.`);
-                this.loadProviders(); // This will rebuild the modal with the updated state
-            } else {
-                throw new Error(response.error || 'Failed to clear API key');
-            }
-        } catch (error) {
-            this.showError(`Error clearing API key: ${error.message}`);
-        }
-    }
 }
 
 // Add CSS animations for message toasts