cnhkmcp 2.1.1__py3-none-any.whl → 2.1.3__py3-none-any.whl

cnhkmcp/untracked/APP/static/script.js

@@ -1,3082 +0,0 @@
-/**
- * Main Application Script
- * Handles editor functionality, grammar checking, and template management
- * The 'templates' global variable is used by decoder.js module
- */
-
-// Global variables
-let currentTemplate = null;
-let currentConfigType = null;
-let templates = new Map(); // Used by decoder.js for template decoding
-let currentTransformerExplanation = ''; // Store explanation for current transformer template
-
-// Initialize the application
-document.addEventListener('DOMContentLoaded', function() {
-    const editor = document.getElementById('expressionEditor');
-    const decodeTemplatesBtn = document.getElementById('decodeTemplates');
-    const detectTemplatesBtn = document.getElementById('detectTemplates');
-    const clearEditorBtn = document.getElementById('clearEditor');
-    
-    // Initialize navigation
-    initializeNavigation();
-    
-    // Debounce timer for automatic grammar checking
-    let grammarCheckTimer;
-    
-    // Update line numbers when content changes
-    editor.addEventListener('input', function(e) {
-        updateLineNumbers();
-        updateSyntaxHighlight();
-        
-        // Handle auto-completion
-        handleAutoComplete(e);
-        
-        // Clear previous timer
-        clearTimeout(grammarCheckTimer);
-        
-        // Set new timer for automatic grammar check (300ms delay)
-        grammarCheckTimer = setTimeout(function() {
-            checkGrammar();
-            detectTemplates();
-        }, 300);
-    });
-    
-    // Handle keydown events for Tab completion and other keys
-    editor.addEventListener('keydown', function(e) {
-        if (e.key === 'Tab') {
-            e.preventDefault();
-            handleTabCompletion();
-        } else if (e.key === 'Escape') {
-            // Allow users to dismiss the shadow suggestion
-            hideShadowSuggestion();
-            autoCompleteActive = false;
-        }
-    });
-    
-    editor.addEventListener('scroll', syncScroll);
-    
-    // Hide shadow suggestion when editor loses focus
-    editor.addEventListener('blur', function() {
-        hideShadowSuggestion();
-        autoCompleteActive = false;
-    });
-    
-    // Button event listeners
-    decodeTemplatesBtn.addEventListener('click', decodeTemplates);
-    clearEditorBtn.addEventListener('click', clearEditor);
-    
-    // Random iteration button
-    const randomIterationBtn = document.getElementById('randomIterationBtn');
-    if (randomIterationBtn) {
-        randomIterationBtn.addEventListener('click', randomIteration);
-    }
-    
-    // BRAIN connection button
-    const connectToBrainBtn = document.getElementById('connectToBrain');
-    connectToBrainBtn.addEventListener('click', openBrainLoginModal);
-    
-    // Simulator button - removed as requested
-    // const runSimulatorBtn = document.getElementById('runSimulator');
-    // if (runSimulatorBtn) {
-    //     runSimulatorBtn.addEventListener('click', runSimulator);
-    // }
-    
-    // Results button listeners
-    const copyDisplayedBtn = document.getElementById('copyDisplayedResults');
-    const copyAllBtn = document.getElementById('copyAllResults');
-    const downloadBtn = document.getElementById('downloadResults');
-    const nextMoveBtn = document.getElementById('nextMoveBtn');
-    if (copyDisplayedBtn) copyDisplayedBtn.addEventListener('click', copyDisplayedResults);
-    if (copyAllBtn) copyAllBtn.addEventListener('click', copyAllResults);
-    if (downloadBtn) downloadBtn.addEventListener('click', downloadResults);
-    if (nextMoveBtn) nextMoveBtn.addEventListener('click', openSettingsModal);
-    
-    // Initialize line numbers and syntax highlighting
-    updateLineNumbers();
-    updateSyntaxHighlight();
-    
-    // Auto-detect templates and check grammar on load
-    detectTemplates();
-    checkGrammar();
-    
-    // Handle Enter key in variable input
-    const variableInput = document.getElementById('variableInput');
-    variableInput.addEventListener('keydown', function(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            applyTemplate();
-        }
-    });
-    
-    // Update line numbers on window resize
-    window.addEventListener('resize', function() {
-        updateLineNumbers();
-    });
-    
-    // Load custom templates on startup
-    loadCustomTemplates();
-});
-
-// Custom Templates Management (Server-side storage)
-
-// Load custom templates from server
-async function loadCustomTemplates() {
-    try {
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        
-        const buttonsContainer = document.getElementById('customTemplateButtons');
-        const noTemplatesInfo = document.getElementById('noCustomTemplates');
-        
-        if (!buttonsContainer) {
-            console.error('customTemplateButtons container not found!');
-            return;
-        }
-        
-        buttonsContainer.innerHTML = '';
-        
-        if (!Array.isArray(customTemplates) || customTemplates.length === 0) {
-            // Only show "no templates" message if we're viewing custom or all templates
-            if (noTemplatesInfo && (currentTemplateView === 'all' || currentTemplateView === 'custom')) {
-                noTemplatesInfo.style.display = 'block';
-            }
-        } else {
-            if (noTemplatesInfo) {
-                noTemplatesInfo.style.display = 'none';
-            }
-            
-            customTemplates.forEach((template, index) => {
-                const button = document.createElement('button');
-                button.className = 'btn btn-template btn-template-custom';
-                button.setAttribute('data-template-type', 'custom');
-                button.innerHTML = `
-                    ${template.name}
-                    <span class="delete-btn" onclick="deleteCustomTemplate(${index}, event)" title="Delete template">×</span>
-                `;
-                button.onclick = () => loadCustomTemplate(index);
-                button.title = template.description || 'Click to load this template';
-                
-                buttonsContainer.appendChild(button);
-            });
-        }
-    } catch (error) {
-        console.error('Error loading templates:', error);
-        showNotification('Error loading templates', 'error');
-    }
-}
-
-// Save current template
-function saveCurrentTemplate() {
-    const editor = document.getElementById('expressionEditor');
-    const expression = editor.value.trim();
-    
-    if (!expression) {
-        showNotification('Please enter an expression before saving', 'error');
-        return;
-    }
-    
-    // Show save modal
-    const modal = document.getElementById('saveTemplateModal');
-    const preview = document.getElementById('templatePreview');
-    const nameInput = document.getElementById('templateName');
-    const descInput = document.getElementById('templateDescription');
-    const configurationsInfo = document.getElementById('templateConfigurationsInfo');
-    const configurationsList = document.getElementById('configurationsList');
-    
-    preview.textContent = expression;
-    nameInput.value = '';
-    // Auto-fill description if available from Transformer template
-    descInput.value = currentTransformerExplanation || '';
-    
-    // Check for configured templates and show info
-    const configuredTemplates = [];
-    templates.forEach((template, templateName) => {
-        if (template.variables && template.variables.length > 0 && template.configType) {
-            configuredTemplates.push({
-                name: templateName,
-                type: template.configType,
-                count: template.variables.length
-            });
-        }
-    });
-    
-    if (configuredTemplates.length > 0) {
-        configurationsList.innerHTML = configuredTemplates.map(config => 
-            `<li>&lt;${config.name}/&gt; - ${config.type} (${config.count} values)</li>`
-        ).join('');
-        configurationsInfo.style.display = 'block';
-    } else {
-        configurationsInfo.style.display = 'none';
-    }
-    
-    modal.style.display = 'block';
-    nameInput.focus();
-    
-    // Add Enter key support
-    const handleEnter = (event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            confirmSaveTemplate();
-        }
-    };
-    nameInput.addEventListener('keydown', handleEnter);
-    descInput.addEventListener('keydown', handleEnter);
-    
-    // Clean up event listeners when modal closes
-    modal.addEventListener('close', () => {
-        nameInput.removeEventListener('keydown', handleEnter);
-        descInput.removeEventListener('keydown', handleEnter);
-    });
-}
-
-// Close save template modal
-function closeSaveTemplateModal() {
-    const modal = document.getElementById('saveTemplateModal');
-    modal.style.display = 'none';
-}
-
-// Overwrite existing template
-async function overwriteExistingTemplate() {
-    const editor = document.getElementById('expressionEditor');
-    const expression = editor.value.trim();
-    
-    if (!expression) {
-        showNotification('Please enter an expression before overwriting a template', 'error');
-        return;
-    }
-    
-    // Check if there are any custom templates first
-    try {
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        
-        if (!Array.isArray(customTemplates) || customTemplates.length === 0) {
-            showNotification('No custom templates available to overwrite. Create a template first using "Save Current Template".', 'warning');
-            return;
-        }
-    } catch (error) {
-        console.error('Error checking templates:', error);
-        showNotification('Error checking existing templates', 'error');
-        return;
-    }
-    
-    // Show overwrite modal
-    const modal = document.getElementById('overwriteTemplateModal');
-    const preview = document.getElementById('overwriteTemplatePreview');
-    const templateSelect = document.getElementById('existingTemplateSelect');
-    const confirmBtn = document.getElementById('overwriteConfirmBtn');
-    const configurationsInfo = document.getElementById('overwriteConfigurationsInfo');
-    const configurationsList = document.getElementById('overwriteConfigurationsList');
-    
-    preview.textContent = expression;
-    
-    // Reset UI
-    templateSelect.value = '';
-    confirmBtn.disabled = true;
-    document.getElementById('selectedTemplateInfo').style.display = 'none';
-    
-    // Check for configured templates and show info
-    const configuredTemplates = [];
-    templates.forEach((template, templateName) => {
-        if (template.variables && template.variables.length > 0 && template.configType) {
-            configuredTemplates.push({
-                name: templateName,
-                type: template.configType,
-                count: template.variables.length
-            });
-        }
-    });
-    
-    if (configuredTemplates.length > 0) {
-        configurationsList.innerHTML = configuredTemplates.map(config => 
-            `<li>&lt;${config.name}/&gt; - ${config.type} (${config.count} values)</li>`
-        ).join('');
-        configurationsInfo.style.display = 'block';
-    } else {
-        configurationsInfo.style.display = 'none';
-    }
-    
-    // Load existing templates for dropdown
-    loadExistingTemplatesForOverwrite();
-    
-    // Add event listener for template selection
-    templateSelect.onchange = handleTemplateSelectionForOverwrite;
-    
-    modal.style.display = 'block';
-}
-
-// Load existing templates for the overwrite dropdown
-async function loadExistingTemplatesForOverwrite() {
-    try {
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        const templateSelect = document.getElementById('existingTemplateSelect');
-        
-        // Clear existing options except the first one
-        templateSelect.innerHTML = '<option value="">Select a template...</option>';
-        
-        if (Array.isArray(customTemplates) && customTemplates.length > 0) {
-            customTemplates.forEach((template, index) => {
-                const option = document.createElement('option');
-                option.value = index;
-                option.textContent = template.name;
-                option.dataset.description = template.description || '';
-                templateSelect.appendChild(option);
-            });
-        } else {
-            const option = document.createElement('option');
-            option.textContent = 'No custom templates available';
-            option.disabled = true;
-            templateSelect.appendChild(option);
-        }
-    } catch (error) {
-        console.error('Error loading templates for overwrite:', error);
-        showNotification('Error loading templates', 'error');
-    }
-}
-
-// Handle template selection for overwrite
-function handleTemplateSelectionForOverwrite() {
-    const templateSelect = document.getElementById('existingTemplateSelect');
-    const selectedTemplateInfo = document.getElementById('selectedTemplateInfo');
-    const currentTemplateDescription = document.getElementById('currentTemplateDescription');
-    const confirmBtn = document.getElementById('overwriteConfirmBtn');
-    
-    if (templateSelect.value === '') {
-        selectedTemplateInfo.style.display = 'none';
-        confirmBtn.disabled = true;
-        return;
-    }
-    
-    // Show selected template info
-    const selectedOption = templateSelect.options[templateSelect.selectedIndex];
-    const description = selectedOption.dataset.description || 'No description';
-    
-    currentTemplateDescription.textContent = description;
-    selectedTemplateInfo.style.display = 'block';
-    confirmBtn.disabled = false;
-}
-
-// Close overwrite template modal
-function closeOverwriteTemplateModal() {
-    const modal = document.getElementById('overwriteTemplateModal');
-    modal.style.display = 'none';
-}
-
-// Confirm and overwrite template
-async function confirmOverwriteTemplate() {
-    const templateSelect = document.getElementById('existingTemplateSelect');
-    const editor = document.getElementById('expressionEditor');
-    
-    if (templateSelect.value === '') {
-        showNotification('Please select a template to overwrite', 'error');
-        return;
-    }
-    
-    const selectedIndex = parseInt(templateSelect.value);
-    const selectedTemplateName = templateSelect.options[templateSelect.selectedIndex].textContent;
-    
-    // Confirm the overwrite action
-    if (!confirm(`Are you sure you want to overwrite the template "${selectedTemplateName}"? This action cannot be undone.`)) {
-        return;
-    }
-    
-    const expression = editor.value.trim();
-    
-    // Capture current template configurations
-    const templateConfigurations = {};
-    templates.forEach((template, templateName) => {
-        if (template.variables && template.variables.length > 0 && template.configType) {
-            templateConfigurations[templateName] = {
-                variables: template.variables,
-                configType: template.configType
-            };
-        }
-    });
-    
-    try {
-        // First get the existing template to preserve its name and original creation date
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        
-        if (!Array.isArray(customTemplates) || selectedIndex >= customTemplates.length) {
-            showNotification('Selected template not found', 'error');
-            return;
-        }
-        
-        const existingTemplate = customTemplates[selectedIndex];
-        
-        // Update the template with new expression and configurations
-        const updateResponse = await fetch('/api/templates', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                name: existingTemplate.name, // Keep the original name
-                description: existingTemplate.description, // Keep the original description
-                expression: expression,
-                templateConfigurations: templateConfigurations
-            })
-        });
-        
-        const result = await updateResponse.json();
-        
-        if (result.success) {
-            // Close modal and reload templates
-            closeOverwriteTemplateModal();
-            loadCustomTemplates();
-            showNotification(`Template "${existingTemplate.name}" overwritten successfully`, 'success');
-        } else {
-            showNotification(result.error || 'Error overwriting template', 'error');
-        }
-    } catch (error) {
-        console.error('Error overwriting template:', error);
-        showNotification('Error overwriting template', 'error');
-    }
-}
-
-// Confirm and save template
-async function confirmSaveTemplate() {
-    const nameInput = document.getElementById('templateName');
-    const descInput = document.getElementById('templateDescription');
-    const editor = document.getElementById('expressionEditor');
-    
-    const name = nameInput.value.trim();
-    const description = descInput.value.trim();
-    const expression = editor.value.trim();
-    
-    if (!name) {
-        showNotification('Please enter a name for the template', 'error');
-        nameInput.focus();
-        return;
-    }
-    
-    // Capture current template configurations
-    const templateConfigurations = {};
-    templates.forEach((template, templateName) => {
-        if (template.variables && template.variables.length > 0 && template.configType) {
-            templateConfigurations[templateName] = {
-                variables: template.variables,
-                configType: template.configType
-            };
-        }
-    });
-    
-    try {
-        const response = await fetch('/api/templates', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                name: name,
-                description: description,
-                expression: expression,
-                templateConfigurations: templateConfigurations
-            })
-        });
-        
-        const result = await response.json();
-        
-        if (result.success) {
-            // Close modal and reload templates
-            closeSaveTemplateModal();
-            loadCustomTemplates();
-            showNotification(result.message, 'success');
-        } else {
-            showNotification(result.error || 'Error saving template', 'error');
-        }
-    } catch (error) {
-        console.error('Error saving template:', error);
-        showNotification('Error saving template', 'error');
-    }
-}
-
-// Load a custom template
-async function loadCustomTemplate(index) {
-    try {
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        
-        if (Array.isArray(customTemplates) && index >= 0 && index < customTemplates.length) {
-            const template = customTemplates[index];
-            const editor = document.getElementById('expressionEditor');
-            
-            editor.value = template.expression;
-            updateLineNumbers();
-            updateSyntaxHighlight();
-            checkGrammar();
-            detectTemplates();
-            
-            // Restore template configurations if they exist
-            if (template.templateConfigurations) {
-                setTimeout(() => {
-                    Object.entries(template.templateConfigurations).forEach(([templateName, config]) => {
-                        if (templates.has(templateName) && config.variables && config.configType) {
-                            const templateObj = templates.get(templateName);
-                            templateObj.variables = config.variables;
-                            templateObj.configType = config.configType;
-                            
-                            // Update visual state
-                            if (templateObj.element) {
-                                templateObj.element.className = 'template-item configured';
-                            }
-                            updateTemplateCount(templateName);
-                        }
-                    });
-                    
-                    // Update the overall template status
-                    updateTemplateStatus();
-                }, 100); // Small delay to ensure templates are detected first
-            }
-            
-            showNotification(`Loaded template: ${template.name}`, 'success');
-        }
-    } catch (error) {
-        console.error('Error loading template:', error);
-        showNotification('Error loading template', 'error');
-    }
-}
-
-// Delete a custom template
-async function deleteCustomTemplate(index, event) {
-    event.stopPropagation(); // Prevent button click from triggering
-    
-    try {
-        const response = await fetch('/api/templates');
-        const customTemplates = await response.json();
-        
-        if (Array.isArray(customTemplates) && index >= 0 && index < customTemplates.length) {
-            const template = customTemplates[index];
-            
-            if (confirm(`Are you sure you want to delete the template "${template.name}"?`)) {
-                const deleteResponse = await fetch(`/api/templates/${index}`, {
-                    method: 'DELETE'
-                });
-                
-                const result = await deleteResponse.json();
-                
-                if (result.success) {
-                    loadCustomTemplates();
-                    showNotification(result.message, 'info');
-                } else {
-                    showNotification(result.error || 'Error deleting template', 'error');
-                }
-            }
-        }
-    } catch (error) {
-        console.error('Error deleting template:', error);
-        showNotification('Error deleting template', 'error');
-    }
-}
-
-// Export custom templates to JSON file
-async function exportCustomTemplates() {
-    try {
-        const response = await fetch('/api/templates/export');
-        const customTemplates = await response.json();
-        
-        if (!Array.isArray(customTemplates) || customTemplates.length === 0) {
-            showNotification('No custom templates to export', 'warning');
-            return;
-        }
-        
-        const dataStr = JSON.stringify(customTemplates, null, 2);
-        const dataBlob = new Blob([dataStr], { type: 'application/json' });
-        
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(dataBlob);
-        link.download = `brain_custom_templates_${new Date().toISOString().slice(0, 10)}.json`;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        
-        showNotification(`Exported ${customTemplates.length} template${customTemplates.length > 1 ? 's' : ''}`, 'success');
-    } catch (error) {
-        console.error('Error exporting templates:', error);
-        showNotification('Error exporting templates', 'error');
-    }
-}
-
-// Import custom templates from JSON file
-function importCustomTemplates(event) {
-    const file = event.target.files[0];
-    if (!file) return;
-    
-    const reader = new FileReader();
-    reader.onload = async function(e) {
-        try {
-            const importedTemplates = JSON.parse(e.target.result);
-            
-            if (!Array.isArray(importedTemplates)) {
-                throw new Error('Invalid template file format');
-            }
-            
-            // Validate template structure
-            const validTemplates = importedTemplates.filter(t => 
-                t.name && typeof t.name === 'string' &&
-                t.expression && typeof t.expression === 'string'
-            );
-            
-            if (validTemplates.length === 0) {
-                throw new Error('No valid templates found in file');
-            }
-            
-            // Get existing templates to check for duplicates
-            const response = await fetch('/api/templates');
-            const existingTemplates = await response.json();
-            
-            // Check for duplicates
-            const duplicates = validTemplates.filter(imported => 
-                Array.isArray(existingTemplates) && existingTemplates.some(existing => existing.name === imported.name)
-            );
-            
-            let overwrite = false;
-            if (duplicates.length > 0) {
-                const duplicateNames = duplicates.map(t => t.name).join(', ');
-                overwrite = confirm(`The following templates already exist: ${duplicateNames}\n\nDo you want to overwrite them?`);
-                
-                if (!overwrite) {
-                    // Filter out duplicates if user doesn't want to overwrite
-                    const nonDuplicates = validTemplates.filter(imported => 
-                        !Array.isArray(existingTemplates) || !existingTemplates.some(existing => existing.name === imported.name)
-                    );
-                    
-                    if (nonDuplicates.length === 0) {
-                        showNotification('Import cancelled - all templates already exist', 'info');
-                        event.target.value = ''; // Reset file input
-                        return;
-                    }
-                }
-            }
-            
-            // Import templates
-            const importResponse = await fetch('/api/templates/import', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    templates: validTemplates,
-                    overwrite: overwrite
-                })
-            });
-            
-            const result = await importResponse.json();
-            
-            if (result.success) {
-                loadCustomTemplates();
-                
-                let message = `Imported ${result.imported} new template${result.imported !== 1 ? 's' : ''}`;
-                if (result.overwritten > 0) {
-                    message += `, overwritten ${result.overwritten}`;
-                }
-                showNotification(message, 'success');
-            } else {
-                showNotification(result.error || 'Import failed', 'error');
-            }
-            
-        } catch (error) {
-            showNotification(`Import failed: ${error.message}`, 'error');
-        }
-        
-        event.target.value = ''; // Reset file input
-    };
-    
-    reader.readAsText(file);
-}
-
-// Run simulator script
-function runSimulator() {
-    // Show modal with two options
-    showSimulatorOptionsModal();
-}
-
-function showSimulatorOptionsModal() {
-    // Create modal HTML if it doesn't exist
-    let modal = document.getElementById('simulatorOptionsModal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'simulatorOptionsModal';
-        modal.className = 'modal';
-        modal.innerHTML = `
-            <div class="modal-content" style="max-width: 600px;">
-                <div class="modal-header">
-                    <h3>🚀 Run Simulator</h3>
-                    <span class="close" onclick="closeSimulatorOptionsModal()">&times;</span>
-                </div>
-                <div class="modal-body">
-                    <p style="margin-bottom: 20px;">选择您想要运行 BRAIN Alpha 模拟器的方式：</p>
-                    
-                    <div class="simulator-options">
-                        <div class="simulator-option" onclick="runTraditionalSimulator()">
-                            <div class="option-icon">⚙️</div>
-                            <div class="option-content">
-                                <h4>命令行界面</h4>
-                                <p>传统的交互式命令行界面，带有逐步提示。</p>
-                                <ul>
-                                    <li>交互式参数输入</li>
-                                    <li>逐步配置</li>
-                                    <li>适合熟悉命令行的高级用户</li>
-                                </ul>
-                            </div>
-                        </div>
-                        
-                        <div class="simulator-option" onclick="runWebSimulator()">
-                            <div class="option-icon">🌐</div>
-                            <div class="option-content">
-                                <h4>Web 界面</h4>
-                                <p>用户友好的 Web 表单，所有参数集中在一个页面。</p>
-                                <ul>
-                                    <li>所有参数在一个表单中</li>
-                                    <li>实时日志监控</li>
-                                    <li>可视化进度跟踪</li>
-                                    <li>对初学者友好的界面</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(modal);
-    }
-    
-    modal.style.display = 'block';
-}
-
-function closeSimulatorOptionsModal() {
-    const modal = document.getElementById('simulatorOptionsModal');
-    if (modal) {
-        modal.style.display = 'none';
-    }
-}
-
-async function runTraditionalSimulator() {
-    closeSimulatorOptionsModal();
-    
-    try {
-        const response = await fetch('/api/run-simulator', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        const result = await response.json();
-        
-        if (result.success) {
-            showNotification(result.message, 'success');
-        } else {
-            showNotification(result.error || 'Failed to run simulator', 'error');
-        }
-    } catch (error) {
-        console.error('Error running simulator:', error);
-        showNotification('Error running simulator', 'error');
-    }
-}
-
-function runWebSimulator() {
-    closeSimulatorOptionsModal();
-    // Navigate to the new simulator page
-    window.location.href = '/simulator';
-}
-
-async function openSubmitter() {
-    try {
-        const response = await fetch('/api/open-submitter', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        const result = await response.json();
-        
-        if (result.success) {
-            showNotification(result.message, 'success');
-        } else {
-            showNotification(result.error || 'Failed to open submitter', 'error');
-        }
-    } catch (error) {
-        console.error('Error opening submitter:', error);
-        showNotification('Error opening submitter', 'error');
-    }
-}
-
-async function openHKSimulator() {
-    try {
-        const response = await fetch('/api/open-hk-simulator', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        const result = await response.json();
-        
-        if (result.success) {
-            showNotification(result.message, 'success');
-        } else {
-            showNotification(result.error || 'Failed to open HK simulator', 'error');
-        }
-    } catch (error) {
-        console.error('Error opening HK simulator:', error);
-        showNotification('Error opening HK simulator', 'error');
-    }
-}
-
-function openTransformer() {
-    showTransformerOptionsModal();
-}
-
-function showTransformerOptionsModal() {
-    let modal = document.getElementById('transformerOptionsModal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'transformerOptionsModal';
-        modal.className = 'modal';
-        modal.innerHTML = `
-            <div class="modal-content" style="max-width: 600px;">
-                <div class="modal-header">
-                    <h3>🚀 Run Transformer (72变)</h3>
-                    <span class="close" onclick="closeTransformerOptionsModal()">&times;</span>
-                </div>
-                <div class="modal-body">
-                    <p style="margin-bottom: 20px;">选择您想要运行 Transformer 的方式：</p>
-                    
-                    <div class="simulator-options">
-                        <div class="simulator-option" onclick="runTraditionalTransformer()">
-                            <div class="option-icon">⚙️</div>
-                            <div class="option-content">
-                                <h4>命令行界面</h4>
-                                <p>传统的交互式命令行界面。</p>
-                                <ul>
-                                    <li>交互式参数输入</li>
-                                    <li>适合熟悉命令行的高级用户</li>
-                                </ul>
-                            </div>
-                        </div>
-                        
-                        <div class="simulator-option" onclick="runWebTransformer()">
-                            <div class="option-icon">🌐</div>
-                            <div class="option-content">
-                                <h4>Web 界面</h4>
-                                <p>用户友好的 Web 表单。</p>
-                                <ul>
-                                    <li>所有参数在一个表单中</li>
-                                    <li>实时日志监控</li>
-                                    <li>结果下载</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(modal);
-    }
-    
-    modal.style.display = 'block';
-}
-
-function closeTransformerOptionsModal() {
-    const modal = document.getElementById('transformerOptionsModal');
-    if (modal) {
-        modal.style.display = 'none';
-    }
-}
-
-async function runTraditionalTransformer() {
-    closeTransformerOptionsModal();
-    try {
-        const response = await fetch('/api/open-transformer', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        const result = await response.json();
-        
-        if (result.success) {
-            showNotification(result.message, 'success');
-        } else {
-            showNotification(result.error || 'Failed to open Transformer', 'error');
-        }
-    } catch (error) {
-        console.error('Error opening Transformer:', error);
-        showNotification('Error opening Transformer', 'error');
-    }
-}
-
-function runWebTransformer() {
-    closeTransformerOptionsModal();
-    window.location.href = '/transformer-web';
-}
-
-// Make functions globally accessible
-window.saveCurrentTemplate = saveCurrentTemplate;
-window.closeSaveTemplateModal = closeSaveTemplateModal;
-window.confirmSaveTemplate = confirmSaveTemplate;
-window.overwriteExistingTemplate = overwriteExistingTemplate;
-window.openSubmitter = openSubmitter;
-window.openHKSimulator = openHKSimulator;
-window.openTransformer = openTransformer;
-window.closeOverwriteTemplateModal = closeOverwriteTemplateModal;
-window.confirmOverwriteTemplate = confirmOverwriteTemplate;
-window.loadCustomTemplate = loadCustomTemplate;
-window.deleteCustomTemplate = deleteCustomTemplate;
-window.exportCustomTemplates = exportCustomTemplates;
-window.importCustomTemplates = importCustomTemplates;
-window.runSimulator = runSimulator;
-window.showSimulatorOptionsModal = showSimulatorOptionsModal;
-window.closeSimulatorOptionsModal = closeSimulatorOptionsModal;
-window.runTraditionalSimulator = runTraditionalSimulator;
-window.runWebSimulator = runWebSimulator;
-
-// Template View Toggle Functionality
-let currentTemplateView = 'all'; // 'all', 'custom', 'example'
-
-function toggleTemplateView() {
-    const toggleBtn = document.getElementById('toggleTemplateView');
-    const toggleText = document.getElementById('toggleTemplateViewText');
-    const exampleTemplates = document.getElementById('exampleTemplateButtons');
-    const customTemplates = document.getElementById('customTemplateButtons');
-    const noTemplatesInfo = document.getElementById('noCustomTemplates');
-    
-    // Cycle through views: all -> custom -> example -> all
-    if (currentTemplateView === 'all') {
-        currentTemplateView = 'custom';
-        toggleText.textContent = '只展示内置模板';
-        exampleTemplates.style.display = 'none';
-        customTemplates.style.display = 'block';
-        
-        // Check if there are custom templates
-        if (customTemplates.children.length === 0 && noTemplatesInfo) {
-            noTemplatesInfo.style.display = 'block';
-        }
-    } else if (currentTemplateView === 'custom') {
-        currentTemplateView = 'example';
-        toggleText.textContent = '展示所有模板';
-        exampleTemplates.style.display = 'block';
-        customTemplates.style.display = 'none';
-        if (noTemplatesInfo) {
-            noTemplatesInfo.style.display = 'none';
-        }
-    } else {
-        currentTemplateView = 'all';
-        toggleText.textContent = 'Show Custom Only';
-        exampleTemplates.style.display = 'block';
-        customTemplates.style.display = 'block';
-        
-        // Show no templates info only if in all view and no custom templates
-        if (customTemplates.children.length === 0 && noTemplatesInfo) {
-            noTemplatesInfo.style.display = 'block';
-        } else if (noTemplatesInfo) {
-            noTemplatesInfo.style.display = 'none';
-        }
-    }
-}
-
-// Make toggleTemplateView globally accessible
-window.toggleTemplateView = toggleTemplateView;
-
-// Load template examples
-function loadTemplateExample(exampleNumber) {
-    const editor = document.getElementById('expressionEditor');
-    const examples = {
-        1: `to_nan(
-    group_normalize(
-        group_neutralize(
-            group_rank(
-                ts_rank(
-                    ts_decay_linear(
-                        ts_returns(
-                            ts_backfill(<data_field/>, <backfill_days/>)/<secondary_data_field/>, <returns_window/>
-                        ), <decay_window/>
-                    ), <rank_window/>
-                ), <group/>
-            ), <group/>
-        ), <market/>
-    ), value=<nan_value/>, reverse=<reverse_bool/>
-)`,
-        2: `ts_decay_exp_window(
-    ts_max(
-        vec_avg(<model_field/>), <max_window/>
-    ), <decay_window/>
-)`,
-        3: `financial_data = ts_backfill(vec_func(<analyst_metric/>), <backfill_days/>);
-gp = group_cartesian_product(<group1/>, <group2/>);
-data = <ts_operator/>(
-    <group_operator/>(financial_data, gp), <window/>
-)`,
-        4: `alpha = <cross_sectional_transform/>(
-    <time_series_transform/>(<feature/>, <ts_window/>), <group/>
-);
-alpha_gpm = group_mean(alpha, <weight/>, <group/>);
-resid = <neutralization_func/>(alpha, alpha_gpm);
-final_signal = <time_series_transform2/>(
-    group_neutralize(resid, <group2/>), <final_window/>
-)`,
-        5: `alpha = group_zscore(
-    ts_zscore(
-        ts_backfill(vec_avg(<analyst_field/>), <backfill_days/>), <zscore_window/>
-    ), <exchange/>
-);
-alpha_gpm = group_mean(alpha, <cap_weight/>, <country/>);
-resid = subtract(alpha, alpha_gpm);
-ts_mean(group_neutralize(resid, <market/>), <mean_window/>)`,
-        6: `data = ts_backfill(
-    winsorize(vec_avg(<analyst_field/>), std=<std_value/>), <backfill_days/>
-);
-t_data = normalize(data);
-gp = group_cartesian_product(<market/>, <country/>);
-signal = group_normalize(ts_zscore(t_data, <zscore_window/>), gp);
-gpm = group_mean(signal, 1, gp);
-gpm_signal = subtract(signal, gpm);
-opt = group_neutralize(
-    arc_tan(ts_decay_exp_window(gpm_signal, <decay_window/>)), gp
-);
-ts_target_tvr_delta_limit(opt, ts_std_dev(opt, <std_window/>), target_tvr=<tvr_value/>)`,
-        7: `group = <industry/>;
-data = ts_min_max_cps(
-    group_zscore(
-        ts_backfill(vec_min(<model_field/>), <backfill_days/>), group
-    ), <minmax_window/>
-);
-ts_data = ts_median(data, <median_window/>);
-ts_target_tvr_hump(
-    group_neutralize(subtract(data, ts_data), group), target_tvr=<tvr_value/>
-)`
-    };
-    
-    if (examples[exampleNumber]) {
-        editor.value = examples[exampleNumber];
-        updateLineNumbers();
-        updateSyntaxHighlight();
-        checkGrammar();
-        detectTemplates();
-        
-        // Show a notification
-        showNotification(`Loaded template example ${exampleNumber}`, 'success');
-    }
-}
-
-// Show notification
-function showNotification(message, type = 'info') {
-    // Create notification element
-    const notification = document.createElement('div');
-    notification.className = `notification ${type}`;
-    notification.textContent = message;
-    notification.style.cssText = `
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        padding: 12px 20px;
-        background: ${type === 'success' ? '#48bb78' : '#667eea'};
-        color: white;
-        border-radius: 6px;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-        z-index: 10000;
-        animation: slideIn 0.3s ease;
-    `;
-    
-    document.body.appendChild(notification);
-    
-    // Remove after 3 seconds
-    setTimeout(() => {
-        notification.style.animation = 'fadeOut 0.3s ease';
-        setTimeout(() => {
-            document.body.removeChild(notification);
-        }, 300);
-    }, 3000);
-}
-
-// Make loadTemplateExample globally accessible
-window.loadTemplateExample = loadTemplateExample;
-
-// Initialize navigation system
-function initializeNavigation() {
-    const navTabs = document.querySelectorAll('.nav-tab');
-    
-    navTabs.forEach(tab => {
-        tab.addEventListener('click', function() {
-            const targetPage = this.getAttribute('data-page');
-            navigateToPage(targetPage);
-        });
-    });
-}
-
-// Navigate to a specific page
-function navigateToPage(pageName) {
-    // Update nav tabs
-    const navTabs = document.querySelectorAll('.nav-tab');
-    navTabs.forEach(tab => {
-        if (tab.getAttribute('data-page') === pageName) {
-            tab.classList.add('active');
-        } else {
-            tab.classList.remove('active');
-        }
-    });
-    
-    // Update page content
-    const pages = document.querySelectorAll('.page-content');
-    pages.forEach(page => {
-        if (page.id === pageName + 'Page') {
-            page.classList.add('active');
-        } else {
-            page.classList.remove('active');
-        }
-    });
-    
-    // Update template status when navigating to decode page
-    if (pageName === 'decode') {
-        updateTemplateStatus();
-    }
-}
-
-// Update template status on decode page
-function updateTemplateStatus() {
-    const statusDiv = document.getElementById('templateStatus');
-    const decodeHeading = document.querySelector('#decodePage h2');
-    const totalTemplates = templates.size;
-    const configuredTemplates = Array.from(templates.values()).filter(t => t.variables.length > 0).length;
-    
-    // Reset heading to default
-    decodeHeading.textContent = 'Template Decoding Options';
-    
-    if (totalTemplates === 0) {
-        statusDiv.innerHTML = `
-            <div class="info-message">
-                No templates detected in your expression. 
-                <button class="btn btn-secondary btn-small" onclick="navigateToPage('editor')">Go back to editor</button>
-            </div>
-        `;
-    } else if (configuredTemplates === 0) {
-        statusDiv.innerHTML = `
-            <div class="warning-message">
-                <strong>⚠️ No templates configured yet!</strong><br>
-                You have ${totalTemplates} variable${totalTemplates > 1 ? 's' : ''} in your expression, but none are configured.<br>
-                <button class="btn btn-secondary btn-small" onclick="navigateToPage('editor')">Configure templates</button>
-            </div>
-        `;
-    } else if (configuredTemplates < totalTemplates) {
-        statusDiv.innerHTML = `
-            <div class="warning-message">
-                <strong>⚠️ Some templates not configured!</strong><br>
-                ${configuredTemplates} out of ${totalTemplates} templates are configured.<br>
-                <button class="btn btn-secondary btn-small" onclick="navigateToPage('editor')">Configure remaining templates</button>
-            </div>
-        `;
-    } else {
-        // All templates configured - calculate search space
-        let searchSpace = [];
-        let totalCombinations = 1;
-        
-        templates.forEach((template, name) => {
-            if (template.variables.length > 0) {
-                searchSpace.push(template.variables.length);
-                totalCombinations *= template.variables.length;
-            }
-        });
-        
-        // Update heading with search space
-        const searchSpaceStr = searchSpace.join(' × ');
-        decodeHeading.innerHTML = `Template Decoding Options <span class="search-space">(SearchSpace: ${searchSpaceStr} = ${totalCombinations.toLocaleString()})</span>`;
-        
-        let configDetails = '<ul style="margin: 10px 0; padding-left: 20px;">';
-        templates.forEach((template, name) => {
-            if (template.variables.length > 0) {
-                configDetails += `<li><strong>&lt;${name}/&gt;</strong>: ${template.variables.length} ${template.configType || 'values'}</li>`;
-            }
-        });
-        configDetails += '</ul>';
-        
-        statusDiv.innerHTML = `
-            <div class="success-message">
-                <strong>✓ All templates configured!</strong><br>
-                ${configDetails}
-                Ready to decode your expressions.
-            </div>
-        `;
-    }
-}
-
-// Make navigateToPage globally accessible
-window.navigateToPage = navigateToPage;
-
-// Update line numbers in the editor
-function updateLineNumbers() {
-    const editor = document.getElementById('expressionEditor');
-    const lineNumbers = document.getElementById('lineNumbers');
-    const lines = editor.value.split('\n');
-    
-    // Calculate how many lines we need based on editor height
-    const editorHeight = editor.offsetHeight || 500;
-    const lineHeight = 25.6; // 16px font-size * 1.6 line-height
-    const visibleLines = Math.ceil(editorHeight / lineHeight);
-    const totalLines = Math.max(lines.length, visibleLines);
-    
-    // Build line numbers text
-    let lineNumbersText = '';
-    for (let i = 1; i <= totalLines; i++) {
-        lineNumbersText += i + '\n';
-    }
-    
-    // Remove trailing newline for better alignment
-    lineNumbers.textContent = lineNumbersText.trimEnd();
-}
-
-// Sync scroll between editor and line numbers
-function syncScroll() {
-    const editor = document.getElementById('expressionEditor');
-    const lineNumbers = document.getElementById('lineNumbers');
-    const highlightedText = document.getElementById('highlightedText');
-    
-    lineNumbers.scrollTop = editor.scrollTop;
-    highlightedText.scrollTop = editor.scrollTop;
-    highlightedText.scrollLeft = editor.scrollLeft;
-    
-    // Hide shadow suggestion when scrolling
-    hideShadowSuggestion();
-}
-
-// Update syntax highlighting
-function updateSyntaxHighlight() {
-    const editor = document.getElementById('expressionEditor');
-    const highlightedText = document.getElementById('highlightedText');
-    const text = editor.value;
-    
-    // Escape HTML special characters
-    let escapedText = text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#039;');
-    
-    // Highlight template tags
-    escapedText = escapedText.replace(/(&lt;)(\/?)(\w+)(\/&gt;)/g, function(match, open, slash, tagName, close) {
-        return `<span class="template-brackets">${open}</span>` +
-               `<span class="template-brackets">${slash}</span>` +
-               `<span class="template-tag">${tagName}</span>` +
-               `<span class="template-brackets">${close}</span>`;
-    });
-    
-    highlightedText.innerHTML = escapedText;
-}
-
-// Grammar checking function
-function checkGrammar() {
-    const editor = document.getElementById('expressionEditor');
-    const content = editor.value;
-    const errorsDiv = document.getElementById('grammarErrors');
-    const errors = [];
-    
-    // Clear previous errors
-    errorsDiv.innerHTML = '';
-    
-    // Check for unclosed block comments
-    const commentStart = content.match(/\/\*/g) || [];
-    const commentEnd = content.match(/\*\//g) || [];
-    if (commentStart.length !== commentEnd.length) {
-        errors.push({
-            type: 'error',
-            message: 'Unclosed block comment detected. Each /* must have a matching */'
-        });
-    }
-    
-    // Remove comments for statement detection
-    let contentWithoutComments = content.replace(/\/\*[\s\S]*?\*\//g, '').trim();
-    
-    // Check if content is empty after removing comments
-    if (!contentWithoutComments) {
-        errorsDiv.innerHTML = '<div class="info-message">Enter an expression to check grammar</div>';
-        return;
-    }
-    
-    // Detect statements by looking for assignment patterns (variable = expression)
-    // or by semicolons
-    const lines = contentWithoutComments.split('\n');
-    let statements = [];
-    let currentStatement = '';
-    let statementStartLine = 0;
-    let openParens = 0;
-    let openBrackets = 0;
-    let inStatement = false;
-    
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const trimmedLine = line.trim();
-        
-        // Skip empty lines
-        if (trimmedLine === '') {
-            if (currentStatement.trim()) {
-                currentStatement += '\n';
-            }
-            continue;
-        }
-        
-        // Track parentheses and brackets to handle multi-line expressions
-        for (let char of trimmedLine) {
-            if (char === '(') openParens++;
-            else if (char === ')') openParens--;
-            else if (char === '[') openBrackets++;
-            else if (char === ']') openBrackets--;
-        }
-        
-        currentStatement += (currentStatement ? '\n' : '') + line;
-        
-        // Check if this line starts a new statement (has assignment operator)
-        if (!inStatement && trimmedLine.match(/^\w+\s*=/)) {
-            inStatement = true;
-            statementStartLine = i;
-        }
-        
-        // Check if statement is complete
-        if (trimmedLine.endsWith(';') || 
-            (i === lines.length - 1) || // Last line
-            (i < lines.length - 1 && lines[i + 1].trim().match(/^\w+\s*=/))) { // Next line starts new assignment
-            
-            // Statement is complete
-            if (currentStatement.trim()) {
-                statements.push({
-                    text: currentStatement.trim(),
-                    startLine: statementStartLine,
-                    endLine: i,
-                    hasSemicolon: trimmedLine.endsWith(';'),
-                    isLastStatement: i === lines.length - 1 || (i < lines.length - 1 && !lines.slice(i + 1).some(l => l.trim()))
-                });
-            }
-            currentStatement = '';
-            inStatement = false;
-            openParens = 0;
-            openBrackets = 0;
-        }
-    }
-    
-    // Validate statements
-    if (statements.length === 0) {
-        // Single expression without assignment
-        const hasSemicolon = contentWithoutComments.trim().endsWith(';');
-        if (hasSemicolon) {
-            errors.push({
-                type: 'warning',
-                message: 'Single expression (Alpha expression) should not end with a semicolon'
-            });
-        }
-        
-        // Check if single expression is a variable assignment
-        const assignmentPattern = /^\s*\w+\s*=\s*[\s\S]*$/;
-        if (assignmentPattern.test(contentWithoutComments)) {
-            errors.push({
-                type: 'error',
-                message: 'The Alpha expression (final result) cannot be assigned to a variable. Remove the variable assignment.'
-            });
-        }
-    } else if (statements.length === 1) {
-        // Single statement
-        if (statements[0].hasSemicolon && statements[0].isLastStatement) {
-            errors.push({
-                type: 'warning',
-                message: 'The last statement (Alpha expression) should not end with a semicolon'
-            });
-        }
-        
-        // Check if single statement is a variable assignment
-        const assignmentPattern = /^\s*\w+\s*=\s*[\s\S]*$/;
-        if (assignmentPattern.test(statements[0].text)) {
-            errors.push({
-                type: 'error',
-                message: 'The Alpha expression (final result) cannot be assigned to a variable. Remove the variable assignment.'
-            });
-        }
-    } else {
-        // Multiple statements
-        for (let i = 0; i < statements.length; i++) {
-            const stmt = statements[i];
-            if (i < statements.length - 1 && !stmt.hasSemicolon) {
-                // Not the last statement and missing semicolon
-                errors.push({
-                    type: 'error',
-                    line: stmt.endLine + 1,
-                    message: `Line ${stmt.endLine + 1}: Missing semicolon at the end of the statement`
-                });
-            } else if (i === statements.length - 1 && stmt.hasSemicolon) {
-                // Last statement with semicolon
-                errors.push({
-                    type: 'warning',
-                    line: stmt.endLine + 1,
-                    message: `Line ${stmt.endLine + 1}: The last statement (Alpha expression) should not end with a semicolon`
-                });
-            }
-            
-            // Check if last statement is a variable assignment
-            if (i === statements.length - 1) {
-                const assignmentPattern = /^\s*\w+\s*=\s*[\s\S]*$/;
-                if (assignmentPattern.test(stmt.text)) {
-                    errors.push({
-                        type: 'error',
-                        line: stmt.endLine + 1,
-                        message: `Line ${stmt.endLine + 1}: The Alpha expression (final result) cannot be assigned to a variable. Remove the variable assignment.`
-                    });
-                }
-            }
-        }
-    }
-    
-    // Check for forbidden constructs
-    const forbiddenPatterns = [
-        { pattern: /\bclass\s+\w+/, message: 'Classes are not allowed in this expression language' },
-        { pattern: /\bfunction\s+\w+/, message: 'Functions are not allowed in this expression language' },
-        { pattern: /\w+\s*\*\s*\w+/, message: 'Pointers are not allowed in this expression language' },
-        { pattern: /\bnew\s+\w+/, message: 'Object creation (new) is not allowed in this expression language' }
-    ];
-    
-    forbiddenPatterns.forEach(({ pattern, message }) => {
-        const matches = content.match(pattern);
-        if (matches) {
-            errors.push({
-                type: 'error',
-                message: message
-            });
-        }
-    });
-    
-    // Display errors or success message
-    if (errors.length === 0) {
-        errorsDiv.innerHTML = '<div class="success-message">✓ Grammar check passed! No errors found.</div>';
-    } else {
-        errors.forEach(error => {
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'error-item';
-            errorDiv.innerHTML = `<strong>${error.type.toUpperCase()}:</strong> ${error.message}`;
-            errorsDiv.appendChild(errorDiv);
-        });
-    }
-}
-
-// Update template count display
-function updateTemplateCount(templateName) {
-    const template = templates.get(templateName);
-    if (template && template.element) {
-        const countSpan = template.element.querySelector('.template-count');
-        if (countSpan) {
-            if (template.variables && template.variables.length > 0) {
-                countSpan.textContent = ` (${template.variables.length})`;
-                countSpan.style.color = '#48bb78';
-                countSpan.style.fontWeight = '600';
-            } else {
-                countSpan.textContent = '';
-            }
-        }
-    }
-}
-
-// Detect templates in the expression
-function detectTemplates() {
-    const editor = document.getElementById('expressionEditor');
-    const content = editor.value;
-    const templateList = document.getElementById('templateList');
-    
-    // Store existing template configurations
-    const existingTemplates = new Map(templates);
-    
-    // Clear previous templates
-    templateList.innerHTML = '';
-    templates.clear();
-    
-    // Regular expression to match templates like <variable_name/>
-    const templateRegex = /<(\w+)\/>/g;
-    const matches = [...content.matchAll(templateRegex)];
-    
-    // Get unique templates
-    const uniqueTemplates = [...new Set(matches.map(match => match[1]))];
-    
-    if (uniqueTemplates.length === 0) {
-        templateList.innerHTML = '<p style="color: #999; font-style: italic;">No templates detected</p>';
-        return;
-    }
-    
-    // Display each template
-    uniqueTemplates.forEach(templateName => {
-        const templateDiv = document.createElement('div');
-        templateDiv.className = 'template-item not-configured';  // Add default not-configured class
-        
-        const nameSpan = document.createElement('span');
-        nameSpan.className = 'template-name';
-        nameSpan.innerHTML = `<span class="template-brackets">&lt;</span><span class="template-tag">${templateName}</span><span class="template-brackets">/&gt;</span><span class="template-count"></span>`;
-        nameSpan.onclick = () => showTemplateConfig(templateName);
-        nameSpan.title = 'Click to view current configuration';
-        
-        // Create container for the three buttons
-        const buttonContainer = document.createElement('div');
-        buttonContainer.className = 'template-buttons';
-        
-        // Create Op button
-        const opBtn = document.createElement('button');
-        opBtn.className = 'btn btn-primary btn-small';
-        opBtn.textContent = 'Op';
-        opBtn.onclick = () => openTemplateModal(templateName, 'operator');
-        
-        // Create Data button
-        const dataBtn = document.createElement('button');
-        dataBtn.className = 'btn btn-secondary btn-small';
-        dataBtn.textContent = 'DataField';
-        dataBtn.onclick = () => openTemplateModal(templateName, 'data');
-        
-        // Create Normal button
-        const normalBtn = document.createElement('button');
-        normalBtn.className = 'btn btn-outline btn-small';
-        normalBtn.textContent = 'Other';
-        // Use 'other' instead of 'normal' to match the type set in parseTransformerCandidates
-        normalBtn.onclick = () => openTemplateModal(templateName, 'other');
-        
-        buttonContainer.appendChild(opBtn);
-        buttonContainer.appendChild(dataBtn);
-        buttonContainer.appendChild(normalBtn);
-        
-        templateDiv.appendChild(nameSpan);
-        templateDiv.appendChild(buttonContainer);
-        templateList.appendChild(templateDiv);
-        
-        // Store template info - restore existing config if available
-        const existingTemplate = existingTemplates.get(templateName);
-        if (existingTemplate && existingTemplate.variables.length > 0) {
-            templates.set(templateName, {
-                name: templateName,
-                variables: existingTemplate.variables,
-                element: templateDiv,
-                configType: existingTemplate.configType
-            });
-            // Update visual state
-            templateDiv.className = 'template-item configured';
-            updateTemplateCount(templateName);
-        } else {
-            templates.set(templateName, {
-                name: templateName,
-                variables: [],
-                element: templateDiv,
-                configType: null
-            });
-        }
-    });
-}
-
-// Open modal for template configuration
-function openTemplateModal(templateName, configType) {
-    currentTemplate = templateName;
-    currentConfigType = configType;  // Store the configuration type
-    const modal = document.getElementById('templateModal');
-    const modalTitle = document.getElementById('modalTitle');
-    const modalDescription = document.getElementById('modalDescription');
-    const variableInput = document.getElementById('variableInput');
-    const brainChooseSection = document.getElementById('brainChooseSection');
-    
-    // Update modal content based on configuration type
-    let typeDescription = '';
-    switch(configType) {
-        case 'operator':
-            typeDescription = 'operators';
-            break;
-        case 'data':
-            typeDescription = 'data fields';
-            break;
-        case 'normal':
-        case 'other': // Add support for 'other' type
-            typeDescription = 'normal parameters (like dates, etc.)';
-            break;
-    }
-    
-    modalTitle.textContent = `Configure Template: <${templateName}/> - ${configType.charAt(0).toUpperCase() + configType.slice(1)}`;
-    modalDescription.textContent = `Enter a comma-separated list of ${typeDescription} for the ${templateName} template:`;
-    
-    // Show "Choose from BRAIN" button for operators and data fields if connected to BRAIN
-    if ((configType === 'operator' || configType === 'data') && window.brainAPI && window.brainAPI.isConnectedToBrain()) {
-        brainChooseSection.style.display = 'block';
-        const chooseBrainBtn = document.getElementById('chooseBrainBtn');
-        if (configType === 'operator') {
-            chooseBrainBtn.textContent = 'Choose Operators from BRAIN';
-            chooseBrainBtn.onclick = openBrainOperatorsModal;
-        } else if (configType === 'data') {
-            chooseBrainBtn.textContent = 'Choose Data Fields from BRAIN';
-            chooseBrainBtn.onclick = openBrainDataFieldsModal;
-        }
-    } else {
-        brainChooseSection.style.display = 'none';
-    }
-    
-    // Load existing variables if any
-    const template = templates.get(templateName);
-    // Allow editing if variables exist, regardless of previous configType (or if it matches)
-    // This fixes the issue where 'other' type templates loaded from Transformer couldn't be edited
-    // because the modal expects exact type match, but we want to allow editing anyway.
-    if (template && template.variables.length > 0) {
-        variableInput.value = template.variables.join(', ');
-    } else {
-        variableInput.value = '';
-    }
-    
-    modal.style.display = 'block';
-    variableInput.focus();
-}
-
-// Close modal
-function closeModal() {
-    const modal = document.getElementById('templateModal');
-    modal.style.display = 'none';
-    currentTemplate = null;
-}
-
-// Show current template configuration
-function showTemplateConfig(templateName) {
-    const template = templates.get(templateName);
-    const modal = document.getElementById('configInfoModal');
-    const title = document.getElementById('configInfoTitle');
-    const content = document.getElementById('configInfoContent');
-    
-    title.textContent = `Template: <${templateName}/>`;
-    
-    if (!template || !template.variables || template.variables.length === 0) {
-        content.innerHTML = `
-            <div class="config-info-item">
-                <strong>Status:</strong> <span class="config-status-unconfigured">Not configured</span><br>
-                <strong>Template:</strong> &lt;${templateName}/&gt;<br><br>
-                <em>Click one of the configuration buttons (Op, Data, Normal) to set up this template.</em>
-            </div>
-        `;
-    } else {
-        const configTypeDisplay = template.configType ? 
-            template.configType.charAt(0).toUpperCase() + template.configType.slice(1) : 
-            'Unknown';
-        
-        content.innerHTML = `
-            <div class="config-info-item">
-                <strong>Status:</strong> <span class="config-status-configured">Configured</span><br>
-                <strong>Template:</strong> &lt;${templateName}/&gt;<br>
-                <strong>Type:</strong> ${configTypeDisplay}<br>
-                <strong>Count:</strong> ${template.variables.length} value${template.variables.length > 1 ? 's' : ''}<br>
-                <div class="config-info-values">
-                    <strong>Values:</strong><br>
-                    ${template.variables.join(', ')}
-                </div>
-            </div>
-        `;
-    }
-    
-    modal.style.display = 'block';
-}
-
-// Close configuration info modal
-function closeConfigInfoModal() {
-    const modal = document.getElementById('configInfoModal');
-    modal.style.display = 'none';
-}
-
-// Close modal when clicking outside
-window.onclick = function(event) {
-    const templateModal = document.getElementById('templateModal');
-    const configInfoModal = document.getElementById('configInfoModal');
-    const brainLoginModal = document.getElementById('brainLoginModal');
-    const brainOperatorsModal = document.getElementById('brainOperatorsModal');
-    const brainDataFieldsModal = document.getElementById('brainDataFieldsModal');
-    const settingsModal = document.getElementById('settingsModal');
-    const saveTemplateModal = document.getElementById('saveTemplateModal');
-    const overwriteTemplateModal = document.getElementById('overwriteTemplateModal');
-    
-    if (event.target === templateModal) {
-        closeModal();
-    } else if (event.target === configInfoModal) {
-        closeConfigInfoModal();
-    } else if (event.target === brainLoginModal) {
-        // Check if login is in progress
-        const loginBtn = document.getElementById('loginBtn');
-        if (!loginBtn || !loginBtn.disabled) {
-            closeBrainLoginModal();
-        }
-    } else if (event.target === brainOperatorsModal) {
-        closeBrainOperatorsModal();
-    } else if (event.target === brainDataFieldsModal) {
-        closeBrainDataFieldsModal();
-    } else if (event.target === settingsModal) {
-        closeSettingsModal();
-    } else if (event.target === saveTemplateModal) {
-        closeSaveTemplateModal();
-    } else if (event.target === overwriteTemplateModal) {
-        closeOverwriteTemplateModal();
-    }
-}
-
-// Apply template variables
-function applyTemplate() {
-    const variableInput = document.getElementById('variableInput');
-    
-    // Special handling for bucket() functions to avoid splitting on commas inside them
-    const variables = parseVariablesWithBucketSupport(variableInput.value);
-    
-    if (variables.length === 0) {
-        alert('Please enter at least one variable');
-        return;
-    }
-    
-    // Store variables for the template
-    const template = templates.get(currentTemplate);
-    if (template) {
-        template.variables = variables;
-        template.configType = currentConfigType;  // Store the configuration type
-        // Update the visual indicator
-        if (template.element) {
-            template.element.className = 'template-item configured';
-        }
-        // Update the count display
-        updateTemplateCount(currentTemplate);
-    }
-    
-    // Close the modal
-    closeModal();
-    
-    // Show success message
-    const errorsDiv = document.getElementById('grammarErrors');
-    errorsDiv.innerHTML = `<div class="success-message">✓ Template <${currentTemplate}/> configured as ${currentConfigType} with ${variables.length} variable${variables.length > 1 ? 's' : ''}</div>`;
-}
-
-// Parse variables with special support for bucket() functions
-function parseVariablesWithBucketSupport(input) {
-    const variables = [];
-    let currentVariable = '';
-    let i = 0;
-    
-    while (i < input.length) {
-        const char = input[i];
-        
-        // Check if we're starting a bucket function
-        if (char === 'b' && i + 7 <= input.length && input.substring(i, i + 7) === 'bucket(') {
-            // Add any previous variable before the bucket function
-            const trimmed = currentVariable.trim();
-            if (trimmed !== '') {
-                variables.push(trimmed);
-            }
-            
-            // Find the complete bucket function
-            const bucketFunction = extractBucketFunction(input, i);
-            if (bucketFunction) {
-                // Add the complete bucket function
-                variables.push(bucketFunction.function);
-                currentVariable = '';
-                i = bucketFunction.endIndex + 1; // Move past the bucket function
-                continue;
-            } else {
-                currentVariable += char;
-            }
-        }
-        
-        // Regular comma handling
-        if (char === ',') {
-            const trimmed = currentVariable.trim();
-            if (trimmed !== '') {
-                variables.push(trimmed);
-            }
-            currentVariable = '';
-        } else {
-            currentVariable += char;
-        }
-        
-        i++;
-    }
-    
-    // Add the last variable if there is one
-    const trimmed = currentVariable.trim();
-    if (trimmed !== '') {
-        variables.push(trimmed);
-    }
-    
-    return variables;
-}
-
-// Extract complete bucket function including all nested content
-function extractBucketFunction(input, startIndex) {
-    let parenthesesCount = 0;
-    let inQuotes = false;
-    let quoteChar = null;
-    let i = startIndex;
-    
-    // Find the start of bucket(
-    if (input.substring(i, i + 7) !== 'bucket(') {
-        return null;
-    }
-    
-    parenthesesCount = 1;
-    i += 7; // Move past "bucket("
-    
-    while (i < input.length) {
-        const char = input[i];
-        
-        // Handle quotes
-        if ((char === '"' || char === "'") && !inQuotes) {
-            inQuotes = true;
-            quoteChar = char;
-        } else if (char === quoteChar && inQuotes) {
-            inQuotes = false;
-            quoteChar = null;
-        }
-        
-        // Only count parentheses when not inside quotes
-        if (!inQuotes) {
-            if (char === '(') {
-                parenthesesCount++;
-            } else if (char === ')') {
-                parenthesesCount--;
-                if (parenthesesCount === 0) {
-                    // Found the end of bucket function
-                    const functionText = input.substring(startIndex, i + 1);
-                    return {
-                        function: functionText,
-                        endIndex: i
-                    };
-                }
-            }
-        }
-        
-        i++;
-    }
-    
-    return null; // No matching closing parenthesis found
-}
-
-// Clear editor
-function clearEditor() {
-    const editor = document.getElementById('expressionEditor');
-    editor.value = '';
-    currentTransformerExplanation = ''; // Clear stored explanation
-    updateLineNumbers();
-    updateSyntaxHighlight();
-    document.getElementById('grammarErrors').innerHTML = '';
-    document.getElementById('decodedResults').style.display = 'none';
-    detectTemplates();
-}
-
-// Auto-completion functionality
-let autoCompleteActive = false;
-let autoCompletePosition = null;
-let shadowSuggestion = null;
-
-function handleAutoComplete(event) {
-    const editor = event.target;
-    const cursorPos = editor.selectionStart;
-    const text = editor.value;
-    const lastChar = text[cursorPos - 1];
-    const prevChar = cursorPos > 1 ? text[cursorPos - 2] : '';
-    
-    // If user typed '<', show shadow suggestion
-    if (lastChar === '<' && event.inputType === 'insertText') {
-        // Show shadow suggestion for template
-        showShadowSuggestion(editor, cursorPos, 'variable_name/>');
-        autoCompleteActive = true;
-        autoCompletePosition = cursorPos;
-    }
-    // If user typed '/', check if it's after '<'
-    else if (lastChar === '/' && prevChar === '<') {
-        // Auto-complete the closing '>'
-        const before = text.substring(0, cursorPos);
-        const after = text.substring(cursorPos);
-        editor.value = before + '>' + after;
-        editor.setSelectionRange(cursorPos, cursorPos);
-        
-        // Update shadow to show between < and />
-        hideShadowSuggestion();
-        autoCompleteActive = false;
-    }
-    // If user typed something after '<' that's not '/', hide suggestion
-    else if (prevChar === '<' && lastChar !== '/' && autoCompleteActive) {
-        // User is typing something else after '<', like a comparison
-        hideShadowSuggestion();
-        autoCompleteActive = false;
-    }
-    else {
-        // Check if we should hide suggestion for other cases
-        if (!autoCompleteActive || (autoCompletePosition && cursorPos > autoCompletePosition + 1)) {
-            hideShadowSuggestion();
-            autoCompleteActive = false;
-        }
-    }
-}
-
-function handleTabCompletion() {
-    const editor = document.getElementById('expressionEditor');
-    const cursorPos = editor.selectionStart;
-    const text = editor.value;
-    
-    if (autoCompleteActive && shadowSuggestion) {
-        // Check if we're right after '<'
-        if (cursorPos > 0 && text[cursorPos - 1] === '<') {
-            // Complete the template
-            const before = text.substring(0, cursorPos);
-            const after = text.substring(cursorPos);
-            editor.value = before + '/>' + after;
-            editor.setSelectionRange(cursorPos, cursorPos);
-            
-            hideShadowSuggestion();
-            autoCompleteActive = false;
-            
-            // Trigger input event to update everything
-            const inputEvent = new Event('input', { bubbles: true });
-            editor.dispatchEvent(inputEvent);
-            
-            // Update syntax highlighting immediately
-            updateSyntaxHighlight();
-        }
-    }
-}
-
-function showShadowSuggestion(editor, position, suggestion) {
-    // Remove any existing shadow
-    hideShadowSuggestion();
-    
-    // Create shadow element
-    shadowSuggestion = document.createElement('div');
-    shadowSuggestion.className = 'shadow-suggestion';
-    shadowSuggestion.textContent = suggestion;
-    
-    // Get editor wrapper for relative positioning
-    const editorWrapper = editor.closest('.editor-wrapper');
-    const editorRect = editor.getBoundingClientRect();
-    
-    // Calculate position based on character position
-    const lineHeight = parseInt(window.getComputedStyle(editor).lineHeight);
-    const lines = editor.value.substring(0, position).split('\n');
-    const currentLine = lines.length;
-    const currentCol = lines[lines.length - 1].length;
-    
-    // Approximate character width (monospace font)
-    const charWidth = 9.6; // Approximate width for 16px monospace font
-    
-    // Position shadow relative to editor
-    shadowSuggestion.style.position = 'fixed';
-    shadowSuggestion.style.left = (editorRect.left + 15 + (currentCol * charWidth)) + 'px';
-    shadowSuggestion.style.top = (editorRect.top + 12 + ((currentLine - 1) * lineHeight) - editor.scrollTop) + 'px';
-    shadowSuggestion.style.pointerEvents = 'none';
-    shadowSuggestion.style.zIndex = '1000';
-    
-    // Add hint text below
-    const hintText = document.createElement('div');
-    hintText.className = 'shadow-hint';
-    hintText.textContent = 'Tab to complete template';
-    shadowSuggestion.appendChild(hintText);
-    
-    document.body.appendChild(shadowSuggestion);
-}
-
-function hideShadowSuggestion() {
-    if (shadowSuggestion) {
-        shadowSuggestion.remove();
-        shadowSuggestion = null;
-    }
-}
-
-// BRAIN Operators Modal Functions
-let selectedOperators = new Set();
-
-function openBrainOperatorsModal() {
-    const modal = document.getElementById('brainOperatorsModal');
-    selectedOperators.clear();
-    
-    // Populate categories
-    populateOperatorCategories();
-    
-    // Populate operators list
-    populateOperatorsList();
-    
-    // Set up event listeners
-    setupOperatorsModalEventListeners();
-    
-    modal.style.display = 'block';
-}
-
-function closeBrainOperatorsModal() {
-    const modal = document.getElementById('brainOperatorsModal');
-    modal.style.display = 'none';
-    selectedOperators.clear();
-    updateSelectedOperatorsDisplay();
-}
-
-function populateOperatorCategories() {
-    const categoryFilter = document.getElementById('categoryFilter');
-    const operators = window.brainAPI ? window.brainAPI.getLoadedOperators() : [];
-    
-    // Clear existing options except "All Categories"
-    categoryFilter.innerHTML = '<option value="">All Categories</option>';
-    
-    // Get unique categories
-    const categories = [...new Set(operators.map(op => op.category))].sort();
-    
-    categories.forEach(category => {
-        const option = document.createElement('option');
-        option.value = category;
-        option.textContent = category;
-        categoryFilter.appendChild(option);
-    });
-}
-
-function populateOperatorsList(searchTerm = '', categoryFilter = '') {
-    const operatorsList = document.getElementById('operatorsList');
-    const operators = window.brainAPI ? window.brainAPI.getLoadedOperators() : [];
-    
-    // Filter operators
-    let filteredOperators = operators;
-    
-    if (searchTerm) {
-        const term = searchTerm.toLowerCase();
-        filteredOperators = filteredOperators.filter(op => 
-            op.name.toLowerCase().includes(term) || 
-            op.category.toLowerCase().includes(term)
-        );
-    }
-    
-    if (categoryFilter) {
-        filteredOperators = filteredOperators.filter(op => op.category === categoryFilter);
-    }
-    
-    // Clear list
-    operatorsList.innerHTML = '';
-    
-    if (filteredOperators.length === 0) {
-        operatorsList.innerHTML = '<p style="text-align: center; color: #666;">No operators found</p>';
-        return;
-    }
-    
-    // Create operator items
-    filteredOperators.forEach(operator => {
-        const item = document.createElement('div');
-        item.className = 'operator-item';
-        item.dataset.operatorName = operator.name;
-        
-        // Build tooltip content if description or definition is available
-        let tooltipContent = '';
-        if (operator.description) {
-            tooltipContent += `Description: ${operator.description}`;
-        }
-        if (operator.definition) {
-            tooltipContent += tooltipContent ? `\n\nDefinition: ${operator.definition}` : `Definition: ${operator.definition}`;
-        }
-        if (operator.example) {
-            tooltipContent += tooltipContent ? `\n\nExample: ${operator.example}` : `Example: ${operator.example}`;
-        }
-        if (operator.usageCount !== undefined) {
-            tooltipContent += tooltipContent ? `\n\nUsage Count: ${operator.usageCount}` : `Usage Count: ${operator.usageCount}`;
-        }
-        
-        // Add custom tooltip if we have content
-        if (tooltipContent) {
-            item.dataset.tooltip = tooltipContent;
-            item.style.cursor = 'help';
-            
-            // Add mouse event listeners for custom tooltip
-            item.addEventListener('mouseenter', showCustomTooltip);
-            item.addEventListener('mouseleave', hideCustomTooltip);
-            item.addEventListener('mousemove', moveCustomTooltip);
-        }
-        
-        // Create description indicator if description or definition is available
-        const descriptionIndicator = (operator.description || operator.definition) ? 
-            '<span class="description-indicator" title="Has description/definition">📖</span>' : '';
-        
-        item.innerHTML = `
-            <input type="checkbox" class="operator-checkbox" ${selectedOperators.has(operator.name) ? 'checked' : ''}>
-            <div class="operator-info">
-                <span class="operator-name">${operator.name} ${descriptionIndicator}</span>
-                <span class="operator-category">${operator.category}</span>
-            </div>
-        `;
-        
-        item.onclick = () => toggleOperatorSelection(operator.name, item);
-        operatorsList.appendChild(item);
-    });
-}
-
-function toggleOperatorSelection(operatorName, item) {
-    const checkbox = item.querySelector('.operator-checkbox');
-    
-    if (selectedOperators.has(operatorName)) {
-        selectedOperators.delete(operatorName);
-        checkbox.checked = false;
-        item.classList.remove('selected');
-    } else {
-        selectedOperators.add(operatorName);
-        checkbox.checked = true;
-        item.classList.add('selected');
-    }
-    
-    updateSelectedOperatorsDisplay();
-}
-
-function updateSelectedOperatorsDisplay() {
-    const selectedContainer = document.getElementById('selectedOperators');
-    
-    selectedContainer.innerHTML = '';
-    
-    if (selectedOperators.size === 0) {
-        selectedContainer.innerHTML = '<em style="color: #666;">No operators selected</em>';
-        return;
-    }
-    
-    selectedOperators.forEach(operatorName => {
-        const item = document.createElement('span');
-        item.className = 'selected-item';
-        item.innerHTML = `
-            ${operatorName}
-            <button class="remove-btn" onclick="removeSelectedOperator('${operatorName}')">&times;</button>
-        `;
-        selectedContainer.appendChild(item);
-    });
-}
-
-function removeSelectedOperator(operatorName) {
-    selectedOperators.delete(operatorName);
-    updateSelectedOperatorsDisplay();
-    
-    // Update the checkbox in the list
-    const operatorItem = document.querySelector(`[data-operator-name="${operatorName}"]`);
-    if (operatorItem) {
-        const checkbox = operatorItem.querySelector('.operator-checkbox');
-        checkbox.checked = false;
-        operatorItem.classList.remove('selected');
-    }
-}
-
-function setupOperatorsModalEventListeners() {
-    const searchInput = document.getElementById('operatorSearch');
-    const categoryFilter = document.getElementById('categoryFilter');
-    const selectAllBtn = document.getElementById('selectAllFilteredOperators');
-    const clearAllBtn = document.getElementById('clearAllOperators');
-    
-    searchInput.oninput = () => {
-        populateOperatorsList(searchInput.value, categoryFilter.value);
-    };
-    
-    categoryFilter.onchange = () => {
-        populateOperatorsList(searchInput.value, categoryFilter.value);
-    };
-    
-    selectAllBtn.onclick = selectAllFilteredOperators;
-    clearAllBtn.onclick = clearAllOperators;
-}
-
-function selectAllFilteredOperators() {
-    const operatorItems = document.querySelectorAll('.operator-item');
-    operatorItems.forEach(item => {
-        const operatorName = item.dataset.operatorName;
-        if (!selectedOperators.has(operatorName)) {
-            selectedOperators.add(operatorName);
-            const checkbox = item.querySelector('.operator-checkbox');
-            checkbox.checked = true;
-            item.classList.add('selected');
-        }
-    });
-    updateSelectedOperatorsDisplay();
-}
-
-function clearAllOperators() {
-    selectedOperators.clear();
-    
-    // Update all checkboxes
-    document.querySelectorAll('.operator-item').forEach(item => {
-        const checkbox = item.querySelector('.operator-checkbox');
-        checkbox.checked = false;
-        item.classList.remove('selected');
-    });
-    
-    updateSelectedOperatorsDisplay();
-}
-
-function applySelectedOperators() {
-    if (selectedOperators.size === 0) {
-        alert('Please select at least one operator');
-        return;
-    }
-    
-    // Add selected operators to the variable input
-    const variableInput = document.getElementById('variableInput');
-    const currentValues = variableInput.value.trim();
-    const newValues = Array.from(selectedOperators);
-    
-    if (currentValues) {
-        variableInput.value = currentValues + ', ' + newValues.join(', ');
-    } else {
-        variableInput.value = newValues.join(', ');
-    }
-    
-    closeBrainOperatorsModal();
-}
-
-// BRAIN Data Fields Modal Functions
-let selectedDataFields = new Set();
-let currentDataFields = [];
-let filteredDataFields = [];
-let columnFilters = {
-    id: '',
-    description: '',
-    type: '',
-    coverage: { min: null, max: null },
-    userCount: null,
-    alphaCount: null
-};
-let sortColumn = null;
-let sortOrder = 'asc';
-
-function openBrainDataFieldsModal() {
-    const modal = document.getElementById('brainDataFieldsModal');
-    selectedDataFields.clear();
-    currentDataFields = [];
-    filteredDataFields = [];
-    
-    // Reset column filters
-    columnFilters = {
-        id: '',
-        description: '',
-        type: '',
-        coverage: { min: null, max: null },
-        userCount: null,
-        alphaCount: null
-    };
-    sortColumn = null;
-    sortOrder = 'asc';
-    
-    // Reset UI state
-    document.getElementById('dataFieldsContent').style.display = 'none';
-    document.getElementById('dataFieldsLoading').style.display = 'none';
-    
-    // Clear column filter inputs
-    document.querySelectorAll('.column-filter').forEach(filter => {
-        filter.value = '';
-    });
-    document.querySelectorAll('.column-filter-min, .column-filter-max').forEach(filter => {
-        filter.value = '';
-    });
-    
-    // Reset sort buttons
-    document.querySelectorAll('.sort-btn').forEach(btn => {
-        btn.classList.remove('asc', 'desc');
-        btn.dataset.order = 'asc';
-    });
-    
-    // Set up event listeners
-    setupDataFieldsModalEventListeners();
-    
-    modal.style.display = 'block';
-
-    // Auto-load datasets if connected
-    if (window.brainAPI && window.brainAPI.isConnectedToBrain()) {
-        loadDatasets();
-        loadSimulationOptions();
-    }
-}
-
-let brainSimulationOptions = null;
-
-async function loadSimulationOptions() {
-    if (brainSimulationOptions) return; // Already loaded
-    
-    try {
-        if (!window.brainAPI || !window.brainAPI.isConnectedToBrain()) {
-            return;
-        }
-        
-        brainSimulationOptions = await window.brainAPI.getSimulationOptions();
-        
-        // Populate Region Select
-        const regionSelect = document.getElementById('regionSelect');
-        const instrumentType = 'EQUITY'; // Default
-        
-        if (brainSimulationOptions && brainSimulationOptions[instrumentType]) {
-            const regions = Object.keys(brainSimulationOptions[instrumentType]);
-            
-            regionSelect.innerHTML = '<option value="">Select...</option>';
-            regions.forEach(r => {
-                const option = document.createElement('option');
-                option.value = r;
-                option.textContent = r;
-                regionSelect.appendChild(option);
-            });
-            
-            regionSelect.style.display = 'block';
-            
-            // Trigger updates if values are already set
-            updateDelayOptions();
-        }
-        
-    } catch (error) {
-        console.error('Failed to load simulation options:', error);
-    }
-}
-
-function updateDelayOptions() {
-    const region = document.getElementById('regionInput').value;
-    const delaySelect = document.getElementById('delaySelect');
-    const instrumentType = 'EQUITY';
-    
-    if (!brainSimulationOptions || !brainSimulationOptions[instrumentType] || !brainSimulationOptions[instrumentType][region]) {
-        delaySelect.style.display = 'none';
-        return;
-    }
-    
-    // The structure is brainSimulationOptions[instrumentType][region] = { delays: [], universes: [], ... }
-    const delays = brainSimulationOptions[instrumentType][region].delays || [];
-    
-    delaySelect.innerHTML = '<option value="">Select...</option>';
-    delays.forEach(d => {
-        const option = document.createElement('option');
-        option.value = d;
-        option.textContent = d;
-        delaySelect.appendChild(option);
-    });
-    
-    delaySelect.style.display = 'block';
-    updateUniverseOptions();
-}
-
-function updateUniverseOptions() {
-    const region = document.getElementById('regionInput').value;
-    const universeSelect = document.getElementById('universeSelect');
-    const instrumentType = 'EQUITY';
-    
-    if (!brainSimulationOptions || !brainSimulationOptions[instrumentType] || !brainSimulationOptions[instrumentType][region]) {
-        universeSelect.style.display = 'none';
-        return;
-    }
-    
-    // Universe depends on Region, not Delay in this data structure
-    const universes = brainSimulationOptions[instrumentType][region].universes || [];
-    
-    universeSelect.innerHTML = '<option value="">Select...</option>';
-    universes.forEach(u => {
-        const option = document.createElement('option');
-        option.value = u;
-        option.textContent = u;
-        universeSelect.appendChild(option);
-    });
-    
-    universeSelect.style.display = 'block';
-}
-
-function closeBrainDataFieldsModal() {
-    const modal = document.getElementById('brainDataFieldsModal');
-    modal.style.display = 'none';
-    selectedDataFields.clear();
-    updateSelectedDataFieldsDisplay();
-}
-
-async function loadDatasets() {
-    const region = document.getElementById('regionInput').value;
-    const delay = document.getElementById('delayInput').value;
-    const universe = document.getElementById('universeInput').value;
-    const select = document.getElementById('datasetSelect');
-    const btn = document.getElementById('loadDatasetsBtn');
-    
-    try {
-        const originalText = btn.textContent;
-        btn.disabled = true;
-        btn.textContent = 'Loading...';
-        
-        if (!window.brainAPI || !window.brainAPI.isConnectedToBrain()) {
-            throw new Error('Not connected to BRAIN');
-        }
-        
-        const datasets = await window.brainAPI.getDatasets(region, parseInt(delay), universe);
-        
-        // Clear and populate select
-        select.innerHTML = '<option value="">Select dataset...</option>';
-        
-        // Sort datasets by ID
-        datasets.sort((a, b) => a.id.localeCompare(b.id));
-        
-        datasets.forEach(ds => {
-            const option = document.createElement('option');
-            option.value = ds.id;
-            option.textContent = `${ds.id} - ${ds.description || ds.name || ''}`;
-            option.title = ds.description || ds.name || '';
-            select.appendChild(option);
-        });
-        
-        select.style.display = 'block';
-        btn.textContent = 'Reload List';
-        
-    } catch (error) {
-        alert(`Failed to load datasets: ${error.message}`);
-        btn.textContent = 'Load List';
-    } finally {
-        btn.disabled = false;
-    }
-}
-
-async function loadDataFields() {
-    const region = document.getElementById('regionInput').value;
-    const delay = document.getElementById('delayInput').value;
-    const universe = document.getElementById('universeInput').value;
-    const datasetId = document.getElementById('datasetInput').value;
-    
-    const loadingDiv = document.getElementById('dataFieldsLoading');
-    const contentDiv = document.getElementById('dataFieldsContent');
-    
-    try {
-        loadingDiv.style.display = 'block';
-        contentDiv.style.display = 'none';
-        
-        // Fetch data fields using the brain API
-        if (!window.brainAPI || !window.brainAPI.isConnectedToBrain()) {
-            throw new Error('Not connected to BRAIN');
-        }
-        
-        const dataFields = await window.brainAPI.getDataFields(region, parseInt(delay), universe, datasetId);
-        currentDataFields = dataFields;
-        filteredDataFields = [...dataFields];
-        
-        populateDataFieldsList();
-        updateDataFieldsStats();
-        populateTypeFilter();
-        
-        loadingDiv.style.display = 'none';
-        contentDiv.style.display = 'block';
-        
-    } catch (error) {
-        loadingDiv.style.display = 'none';
-        alert(`Failed to load data fields: ${error.message}`);
-    }
-}
-
-function populateDataFieldsList() {
-    const tableBody = document.getElementById('dataFieldsTableBody');
-    const highCoverageFilter = document.getElementById('filterHighCoverage').checked;
-    const popularFilter = document.getElementById('filterPopular').checked;
-    const matrixOnlyFilter = document.getElementById('filterMatrixOnly').checked;
-    
-    // Apply filters
-    filteredDataFields = currentDataFields.filter(field => {
-        // Column-specific filters
-        // ID filter
-        if (columnFilters.id && !field.id.toLowerCase().includes(columnFilters.id.toLowerCase())) {
-            return false;
-        }
-        
-        // Description filter
-        if (columnFilters.description && !field.description.toLowerCase().includes(columnFilters.description.toLowerCase())) {
-            return false;
-        }
-        
-        // Type filter
-        if (columnFilters.type && field.type !== columnFilters.type) {
-            return false;
-        }
-        
-        // Coverage range filter
-        if (columnFilters.coverage.min !== null && field.coverage * 100 < columnFilters.coverage.min) {
-            return false;
-        }
-        if (columnFilters.coverage.max !== null && field.coverage * 100 > columnFilters.coverage.max) {
-            return false;
-        }
-        
-        // User count filter
-        if (columnFilters.userCount !== null && field.userCount < columnFilters.userCount) {
-            return false;
-        }
-        
-        // Alpha count filter
-        if (columnFilters.alphaCount !== null && field.alphaCount < columnFilters.alphaCount) {
-            return false;
-        }
-        
-        // High coverage filter
-        if (highCoverageFilter && field.coverage < 0.9) {
-            return false;
-        }
-        
-        // Popular filter
-        if (popularFilter && field.userCount < 1000) {
-            return false;
-        }
-        
-        // Matrix type filter
-        if (matrixOnlyFilter && field.type !== 'MATRIX') {
-            return false;
-        }
-        
-        return true;
-    });
-    
-    // Sort filtered data fields
-    if (sortColumn) {
-        filteredDataFields.sort((a, b) => {
-            let aVal = a[sortColumn];
-            let bVal = b[sortColumn];
-            
-            // Handle numeric values
-            if (sortColumn === 'coverage' || sortColumn === 'userCount' || sortColumn === 'alphaCount') {
-                aVal = Number(aVal);
-                bVal = Number(bVal);
-            } else {
-                // String comparison
-                aVal = String(aVal).toLowerCase();
-                bVal = String(bVal).toLowerCase();
-            }
-            
-            if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
-            if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
-            return 0;
-        });
-    }
-    
-    // Clear table
-    tableBody.innerHTML = '';
-    
-    if (filteredDataFields.length === 0) {
-        tableBody.innerHTML = '<tr><td colspan="7" style="text-align: center; color: #666; padding: 40px;">No data fields found matching the filters</td></tr>';
-        updateDataFieldsStats();
-        return;
-    }
-    
-    // Create table rows
-    filteredDataFields.forEach(field => {
-        const row = document.createElement('tr');
-        row.dataset.fieldId = field.id;
-        if (selectedDataFields.has(field.id)) {
-            row.classList.add('selected');
-        }
-        
-        row.innerHTML = `
-            <td>
-                <input type="checkbox" class="data-field-checkbox" ${selectedDataFields.has(field.id) ? 'checked' : ''}>
-            </td>
-            <td><span class="data-field-id">${field.id}</span></td>
-            <td><span class="data-field-description">${field.description}</span></td>
-            <td><span class="data-field-type">${field.type}</span></td>
-            <td><span class="data-field-coverage">${(field.coverage * 100).toFixed(1)}%</span></td>
-            <td><span class="data-field-count">${field.userCount.toLocaleString()}</span></td>
-            <td><span class="data-field-count">${field.alphaCount.toLocaleString()}</span></td>
-        `;
-        
-        row.onclick = (e) => {
-            if (e.target.type !== 'checkbox') {
-                toggleDataFieldSelection(field.id, row);
-            }
-        };
-        
-        const checkbox = row.querySelector('.data-field-checkbox');
-        checkbox.onclick = (e) => {
-            e.stopPropagation();
-            toggleDataFieldSelection(field.id, row);
-        };
-        
-        tableBody.appendChild(row);
-    });
-    
-    updateDataFieldsStats();
-}
-
-function toggleDataFieldSelection(fieldId, row) {
-    const checkbox = row.querySelector('.data-field-checkbox');
-    
-    if (selectedDataFields.has(fieldId)) {
-        selectedDataFields.delete(fieldId);
-        checkbox.checked = false;
-        row.classList.remove('selected');
-    } else {
-        selectedDataFields.add(fieldId);
-        checkbox.checked = true;
-        row.classList.add('selected');
-    }
-    
-    updateSelectedDataFieldsDisplay();
-    updateDataFieldsStats();
-    updateSelectAllCheckbox();
-}
-
-function updateSelectedDataFieldsDisplay() {
-    const selectedContainer = document.getElementById('selectedDataFields');
-    
-    selectedContainer.innerHTML = '';
-    
-    if (selectedDataFields.size === 0) {
-        selectedContainer.innerHTML = '<em style="color: #666;">No data fields selected</em>';
-        return;
-    }
-    
-    selectedDataFields.forEach(fieldId => {
-        const item = document.createElement('span');
-        item.className = 'selected-item';
-        item.innerHTML = `
-            ${fieldId}
-            <button class="remove-btn" onclick="removeSelectedDataField('${fieldId}')">&times;</button>
-        `;
-        selectedContainer.appendChild(item);
-    });
-}
-
-function removeSelectedDataField(fieldId) {
-    selectedDataFields.delete(fieldId);
-    updateSelectedDataFieldsDisplay();
-    updateDataFieldsStats();
-    
-    // Update the checkbox in the table
-    const row = document.querySelector(`tr[data-field-id="${fieldId}"]`);
-    if (row) {
-        const checkbox = row.querySelector('.data-field-checkbox');
-        checkbox.checked = false;
-        row.classList.remove('selected');
-    }
-    
-    updateSelectAllCheckbox();
-}
-
-function updateDataFieldsStats() {
-    document.getElementById('dataFieldsCount').textContent = `${currentDataFields.length} fields loaded`;
-    document.getElementById('filteredCount').textContent = `${filteredDataFields.length} filtered`;
-    document.getElementById('selectedCount').textContent = `${selectedDataFields.size} selected`;
-}
-
-function populateTypeFilter() {
-    const typeFilter = document.getElementById('typeFilter');
-    if (!typeFilter) return;
-    
-    // Get unique types from current data fields
-    const uniqueTypes = [...new Set(currentDataFields.map(field => field.type))].sort();
-    
-    // Clear existing options except "All Types"
-    typeFilter.innerHTML = '<option value="">All Types</option>';
-    
-    // Add unique types as options
-    uniqueTypes.forEach(type => {
-        const option = document.createElement('option');
-        option.value = type;
-        option.textContent = type;
-        typeFilter.appendChild(option);
-    });
-    
-    // Restore selected value if it exists
-    if (columnFilters.type && uniqueTypes.includes(columnFilters.type)) {
-        typeFilter.value = columnFilters.type;
-    }
-}
-
-function selectAllFilteredDataFields() {
-    filteredDataFields.forEach(field => {
-        selectedDataFields.add(field.id);
-        const row = document.querySelector(`tr[data-field-id="${field.id}"]`);
-        if (row) {
-            const checkbox = row.querySelector('.data-field-checkbox');
-            checkbox.checked = true;
-            row.classList.add('selected');
-        }
-    });
-    
-    updateSelectedDataFieldsDisplay();
-    updateDataFieldsStats();
-    updateSelectAllCheckbox();
-}
-
-function clearAllSelectedDataFields() {
-    selectedDataFields.clear();
-    
-    // Update all checkboxes
-    document.querySelectorAll('.data-field-checkbox').forEach(checkbox => {
-        checkbox.checked = false;
-        checkbox.closest('tr').classList.remove('selected');
-    });
-    
-    updateSelectedDataFieldsDisplay();
-    updateDataFieldsStats();
-    updateSelectAllCheckbox();
-}
-
-function setupDataFieldsModalEventListeners() {
-    const loadBtn = document.getElementById('loadDataFieldsBtn');
-    const selectAllBtn = document.getElementById('selectAllFiltered');
-    const clearAllBtn = document.getElementById('clearAllSelected');
-    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
-    
-    // Filter checkboxes
-    const highCoverageFilter = document.getElementById('filterHighCoverage');
-    const popularFilter = document.getElementById('filterPopular');
-    const matrixOnlyFilter = document.getElementById('filterMatrixOnly');
-    
-    loadBtn.onclick = loadDataFields;
-    
-    // Input listeners for cascading options
-    document.getElementById('regionInput').addEventListener('input', updateDelayOptions);
-    document.getElementById('delayInput').addEventListener('input', updateUniverseOptions);
-    
-    // Filter checkbox listeners
-    highCoverageFilter.onchange = () => populateDataFieldsList();
-    popularFilter.onchange = () => populateDataFieldsList();
-    matrixOnlyFilter.onchange = () => populateDataFieldsList();
-    
-    selectAllBtn.onclick = selectAllFilteredDataFields;
-    clearAllBtn.onclick = clearAllSelectedDataFields;
-    
-    selectAllCheckbox.onclick = (e) => {
-        e.stopPropagation();
-        if (selectAllCheckbox.checked) {
-            selectAllFilteredDataFields();
-        } else {
-            clearAllFilteredDataFields();
-        }
-    };
-    
-    // Column filter listeners
-    document.querySelectorAll('.column-filter').forEach(filter => {
-        filter.addEventListener('input', (e) => {
-            const column = e.target.dataset.column;
-            const value = e.target.value;
-            
-            if (column === 'userCount' || column === 'alphaCount') {
-                columnFilters[column] = value ? parseInt(value) : null;
-            } else {
-                columnFilters[column] = value;
-            }
-            
-            // Add/remove active class
-            if (value) {
-                e.target.classList.add('active');
-            } else {
-                e.target.classList.remove('active');
-            }
-            
-            populateDataFieldsList();
-        });
-    });
-    
-    // Coverage range filters
-    document.querySelectorAll('.column-filter-min, .column-filter-max').forEach(filter => {
-        filter.addEventListener('input', (e) => {
-            const isMin = e.target.classList.contains('column-filter-min');
-            const value = e.target.value;
-            
-            if (isMin) {
-                columnFilters.coverage.min = value ? parseFloat(value) : null;
-            } else {
-                columnFilters.coverage.max = value ? parseFloat(value) : null;
-            }
-            
-            // Add/remove active class
-            const minInput = e.target.parentElement.querySelector('.column-filter-min');
-            const maxInput = e.target.parentElement.querySelector('.column-filter-max');
-            
-            if (minInput.value || maxInput.value) {
-                minInput.classList.add('active');
-                maxInput.classList.add('active');
-            } else {
-                minInput.classList.remove('active');
-                maxInput.classList.remove('active');
-            }
-            
-            populateDataFieldsList();
-        });
-    });
-    
-    // Sort button listeners
-    document.querySelectorAll('.sort-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            const column = e.target.dataset.column;
-            
-            // Reset all other sort buttons
-            document.querySelectorAll('.sort-btn').forEach(b => {
-                if (b !== e.target) {
-                    b.classList.remove('asc', 'desc');
-                    b.dataset.order = 'asc';
-                }
-            });
-            
-            // Toggle sort order
-            if (sortColumn === column) {
-                sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
-            } else {
-                sortColumn = column;
-                sortOrder = 'asc';
-            }
-            
-            e.target.dataset.order = sortOrder;
-            e.target.classList.remove('asc', 'desc');
-            e.target.classList.add(sortOrder);
-            
-            populateDataFieldsList();
-        });
-    });
-}
-
-function updateSelectAllCheckbox() {
-    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
-    if (!selectAllCheckbox) return;
-    
-    const allFilteredSelected = filteredDataFields.length > 0 && 
-        filteredDataFields.every(field => selectedDataFields.has(field.id));
-    
-    selectAllCheckbox.checked = allFilteredSelected;
-    selectAllCheckbox.indeterminate = !allFilteredSelected && 
-        filteredDataFields.some(field => selectedDataFields.has(field.id));
-}
-
-function clearAllFilteredDataFields() {
-    filteredDataFields.forEach(field => {
-        selectedDataFields.delete(field.id);
-        const row = document.querySelector(`tr[data-field-id="${field.id}"]`);
-        if (row) {
-            const checkbox = row.querySelector('.data-field-checkbox');
-            checkbox.checked = false;
-            row.classList.remove('selected');
-        }
-    });
-    
-    updateSelectedDataFieldsDisplay();
-    updateDataFieldsStats();
-    updateSelectAllCheckbox();
-}
-
-function applySelectedDataFields() {
-    if (selectedDataFields.size === 0) {
-        alert('Please select at least one data field');
-        return;
-    }
-    
-    // Add selected data fields to the variable input
-    const variableInput = document.getElementById('variableInput');
-    const currentValues = variableInput.value.trim();
-    const newValues = Array.from(selectedDataFields);
-    
-    if (currentValues) {
-        variableInput.value = currentValues + ', ' + newValues.join(', ');
-    } else {
-        variableInput.value = newValues.join(', ');
-    }
-    
-    closeBrainDataFieldsModal();
-}
-
-// Custom tooltip functionality
-let tooltipElement = null;
-
-function createTooltipElement() {
-    if (!tooltipElement) {
-        tooltipElement = document.createElement('div');
-        tooltipElement.className = 'custom-tooltip';
-        document.body.appendChild(tooltipElement);
-    }
-    return tooltipElement;
-}
-
-function showCustomTooltip(event) {
-    const tooltip = createTooltipElement();
-    const content = event.target.closest('[data-tooltip]')?.dataset.tooltip;
-    
-    if (content) {
-        tooltip.textContent = content;
-        tooltip.style.opacity = '1';
-        moveCustomTooltip(event);
-    }
-}
-
-function hideCustomTooltip() {
-    if (tooltipElement) {
-        tooltipElement.style.opacity = '0';
-    }
-}
-
-function moveCustomTooltip(event) {
-    if (!tooltipElement || tooltipElement.style.opacity === '0') return;
-    
-    const tooltip = tooltipElement;
-    const mouseX = event.clientX;
-    const mouseY = event.clientY;
-    const offset = 10;
-    
-    // Get tooltip dimensions
-    const tooltipRect = tooltip.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    
-    // Calculate position
-    let left = mouseX + offset;
-    let top = mouseY + offset;
-    
-    // Adjust if tooltip would go off-screen to the right
-    if (left + tooltipRect.width > windowWidth) {
-        left = mouseX - tooltipRect.width - offset;
-    }
-    
-    // Adjust if tooltip would go off-screen at the bottom
-    if (top + tooltipRect.height > windowHeight) {
-        top = mouseY - tooltipRect.height - offset;
-    }
-    
-    // Ensure tooltip doesn't go off-screen to the left or top
-    if (left < 0) left = offset;
-    if (top < 0) top = offset;
-    
-    tooltip.style.left = left + 'px';
-    tooltip.style.top = top + 'px';
-}
-
-/**
- * Handle Transformer File Selection
- */
-function handleTransformerFileSelect(event) {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = function(e) {
-        try {
-            const data = JSON.parse(e.target.result);
-            loadTransformerData(data);
-            // Reset file input
-            event.target.value = '';
-        } catch (error) {
-            console.error("Error parsing transformer file:", error);
-            alert("Error parsing JSON file: " + error.message);
-        }
-    };
-    reader.readAsText(file);
-}
-
-/**
- * Load Transformer generated Alpha Candidates from data object
- */
-function loadTransformerData(data) {
-    try {
-        const buttonsContainer = document.getElementById('transformerTemplateButtons');
-        if (!buttonsContainer) {
-            console.error('transformerTemplateButtons container not found!');
-            return;
-        }
-        
-        // Clear existing buttons
-        buttonsContainer.innerHTML = '';
-        
-        // Add a header
-        const header = document.createElement('div');
-        header.innerHTML = '<hr><strong>Transformer Candidates</strong>';
-        header.style.margin = '10px 0';
-        header.style.color = '#666';
-        buttonsContainer.appendChild(header);
-        
-        // Iterate through expressions
-        Object.entries(data).forEach(([expression, details]) => {
-            const btn = document.createElement('button');
-            // Show first 30 chars of explanation
-            const explanation = details.template_explanation || expression;
-            
-            btn.className = 'btn btn-template btn-template-custom'; // Reuse custom template style
-            // Add a distinct border or color to distinguish
-            btn.style.borderLeft = '4px solid #9c27b0'; 
-            
-            btn.innerHTML = `
-                <div style="font-weight:bold; margin-bottom:4px;">Transformer Candidate</div>
-                <div style="font-size:0.9em; overflow:hidden; text-overflow:ellipsis;">${explanation.substring(0, 50)}${explanation.length > 50 ? '...' : ''}</div>
-            `;
-            
-            btn.title = explanation + '\n\n' + expression;
-            
-            btn.onclick = () => {
-                // 1. Set editor content
-                const editor = document.getElementById('expressionEditor');
-                editor.value = expression;
-                
-                // Store explanation for saving
-                currentTransformerExplanation = details.template_explanation || '';
-                
-                // Trigger input event to update line numbers and syntax highlight
-                editor.dispatchEvent(new Event('input'));
-                
-                // 2. Trigger parsing
-                detectTemplates();
-
-                // 3. Parse and fill candidates
-                parseTransformerCandidates(details.placeholder_candidates);
-                
-                // Scroll to editor
-                document.querySelector('.page-navigation button[data-page="editor"]').click();
-            };
-
-            buttonsContainer.appendChild(btn);
-        });
-        
-        // Show notification
-        if (typeof showNotification === 'function') {
-            showNotification(`Loaded ${Object.keys(data).length} transformer templates`, 'success');
-        }
-
-    } catch (error) {
-        console.error("Failed to load transformer candidates:", error);
-        alert("Failed to load transformer candidates");
-    }
-}
-
-/**
- * Parse candidates and fill into templates Map
- * @param {Object} placeholderCandidates - placeholder_candidates object from JSON
- */
-function parseTransformerCandidates(placeholderCandidates) {
-    if (!placeholderCandidates) return;
-
-    // Iterate through config
-    for (const [phTag, config] of Object.entries(placeholderCandidates)) {
-        // Convert "<fundamental_field/>" to "fundamental_field"
-        const templateName = phTag.replace(/[<\/>]/g, '');
-
-        if (templates.has(templateName)) {
-            const templateData = templates.get(templateName);
-            
-            // Extract values (compatible with id, value, name)
-            const values = config.candidates.map(item => {
-                if (item.id !== undefined) return item.id;
-                if (item.value !== undefined) return item.value;
-                if (item.name !== undefined) return item.name;
-                return null;
-            }).filter(v => v !== null);
-
-            // Update template data in memory
-            templateData.variables = values;
-            templateData.configType = 'other'; // Set to Other as requested
-
-            // Update UI
-            // We need to find the element in the templateList (Detected Templates panel)
-            // The detectTemplates() function recreates these elements, so we need to find them again
-            // But detectTemplates() is async? No, it seems synchronous in previous code.
-            // However, detectTemplates() clears and rebuilds the list.
-            
-            // Let's try to update the UI
-            updateTemplateUI(templateName, values.length);
-        }
-    }
-}
-
-/**
- * Helper: Update template UI display
- */
-function updateTemplateUI(templateName, count) {
-    const templateList = document.getElementById('templateList');
-    if (!templateList) return;
-    
-    const items = templateList.getElementsByClassName('template-item');
-    
-    for (let item of items) {
-        const nameSpan = item.querySelector('.template-tag');
-        if (nameSpan && nameSpan.textContent === templateName) {
-            item.classList.remove('not-configured');
-            item.classList.add('configured');
-            
-            const countSpan = item.querySelector('.template-count');
-            if (countSpan) {
-                countSpan.textContent = ` (${count})`;
-                countSpan.style.color = '#48bb78';
-                countSpan.style.fontWeight = '600';
-            }
-            
-            // Also update the buttons inside if possible, but the previous code structure 
-            // for template items wasn't fully visible. 
-            // Assuming the structure from detectTemplates()
-            
-            break;
-        }
-    }
-}