snow-flow 3.0.9 → 3.0.13

package/dist/agents/ui-builder.agent.js

@@ -1,1539 +0,0 @@
-"use strict";
-/**
- * UI Builder Agent for UI Pages and UI Actions
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIBuilderAgent = void 0;
-const base_agent_js_1 = require("../core/base-agent.js");
-class UIBuilderAgent extends base_agent_js_1.BaseServiceNowAgent {
-    constructor(config) {
-        super('ui-builder', servicenow_types_js_1.AgentType.UI_BUILDER, [
-            'create_ui_page',
-            'create_ui_action',
-            'generate_form_layout',
-            'create_ui_macro',
-            'generate_responsive_ui',
-            'create_ui_components',
-            'validate_ui_code'
-        ], config);
-    }
-    async execute(task) {
-        this.logger.info(`Executing UI building task: ${task.description}`);
-        try {
-            switch (task.type) {
-                case 'create_ui_page':
-                    return await this.createUIPage(task);
-                case 'create_ui_action':
-                    return await this.createUIAction(task);
-                case 'generate_ui_from_spec':
-                    return await this.generateUIFromSpec(task);
-                case 'create_form_layout':
-                    return await this.createFormLayout(task);
-                case 'create_ui_components':
-                    return await this.createUIComponents(task);
-                default:
-                    throw new Error(`Unknown task type: ${task.type}`);
-            }
-        }
-        catch (error) {
-            this.logger.error(`UI building task failed: ${error.message}`);
-            return {
-                taskId: task.id,
-                success: false,
-                error: error.message
-            };
-        }
-    }
-    async createUIPage(task) {
-        const { name, description, layout, components, directAccess } = task.payload;
-        const uiPage = {
-            name,
-            html: this.generateUIPageHTML(name, layout, components),
-            processingScript: this.generateProcessingScript(components),
-            clientScript: this.generateUIPageClientScript(components),
-            directAccess: directAccess ?? false
-        };
-        // Generate CSS file
-        const css = this.generateUIPageCSS(name, layout);
-        // Generate orchestration commands
-        const commands = [
-            this.generateCommand('Bash', 'create', {
-                command: `mkdir -p /Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}`,
-                description: `Create UI Page directory for ${name}`
-            }, 'Create directory'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}/page.html`,
-                content: uiPage.html
-            }, `Create UI Page HTML: ${name}`),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}/processing.js`,
-                content: uiPage.processingScript || '// No processing script required'
-            }, 'Create processing script'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}/client.js`,
-                content: uiPage.clientScript || '// No client script required'
-            }, 'Create client script'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}/styles.css`,
-                content: css
-            }, 'Create CSS styles'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_pages/${this.sanitizeName(name)}/config.json`,
-                content: JSON.stringify({
-                    name,
-                    description: description || `UI Page: ${name}`,
-                    directAccess,
-                    created: new Date().toISOString()
-                }, null, 2)
-            }, 'Create UI Page configuration')
-        ];
-        // Store in memory
-        await this.storeInMemory(`ui_pages:${this.sanitizeName(name)}`, uiPage);
-        return {
-            taskId: task.id,
-            success: true,
-            output: uiPage,
-            artifacts: [
-                this.createArtifact('ui_page', name, uiPage, {
-                    hasProcessingScript: !!uiPage.processingScript,
-                    hasClientScript: !!uiPage.clientScript,
-                    directAccess
-                })
-            ],
-            commands
-        };
-    }
-    async createUIAction(task) {
-        const { name, table, label, formButton, listButton, conditions, action } = task.payload;
-        const uiAction = {
-            name,
-            table,
-            formButton: formButton ?? true,
-            listButton: listButton ?? false,
-            conditions: conditions || '',
-            clientScript: action.clientSide ? this.generateUIActionClientScript(action) : undefined,
-            serverScript: action.serverSide ? this.generateUIActionServerScript(action) : undefined
-        };
-        const commands = [
-            this.generateCommand('Bash', 'create', {
-                command: `mkdir -p /Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_actions/${table}`,
-                description: `Create UI Actions directory for ${table}`
-            }, 'Create directory'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_actions/${table}/${this.sanitizeName(name)}.js`,
-                content: this.combineUIActionScripts(uiAction)
-            }, `Create UI Action: ${name}`),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/ui_actions/${table}/${this.sanitizeName(name)}.json`,
-                content: JSON.stringify({
-                    ...uiAction,
-                    label: label || name,
-                    order: action.order || 100,
-                    active: true
-                }, null, 2)
-            }, 'Create UI Action metadata')
-        ];
-        await this.storeInMemory(`ui_actions:${table}:${this.sanitizeName(name)}`, uiAction);
-        return {
-            taskId: task.id,
-            success: true,
-            output: uiAction,
-            artifacts: [
-                this.createArtifact('ui_action', name, uiAction, {
-                    table,
-                    type: action.clientSide ? 'client' : 'server'
-                })
-            ],
-            commands
-        };
-    }
-    async generateUIFromSpec(task) {
-        const { spec, type } = task.payload;
-        let result;
-        switch (type) {
-            case 'dashboard':
-                result = await this.generateDashboard(spec);
-                break;
-            case 'form':
-                result = await this.generateForm(spec);
-                break;
-            case 'report':
-                result = await this.generateReport(spec);
-                break;
-            case 'wizard':
-                result = await this.generateWizard(spec);
-                break;
-            default:
-                result = await this.generateGenericUI(spec);
-        }
-        return {
-            ...result,
-            taskId: task.id
-        };
-    }
-    async createFormLayout(task) {
-        const { formName, sections, fields, responsive } = task.payload;
-        const formHTML = this.generateFormHTML(sections, fields, responsive);
-        const formCSS = this.generateFormCSS(formName, responsive);
-        const formJS = this.generateFormJavaScript(fields);
-        const commands = [
-            this.generateCommand('Bash', 'create', {
-                command: `mkdir -p /Users/nielsvanderwerf/Projects/servicenow_multiagent/output/forms/${this.sanitizeName(formName)}`,
-                description: `Create form directory for ${formName}`
-            }, 'Create directory'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/forms/${this.sanitizeName(formName)}/form.html`,
-                content: formHTML
-            }, 'Create form HTML'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/forms/${this.sanitizeName(formName)}/styles.css`,
-                content: formCSS
-            }, 'Create form CSS'),
-            this.generateCommand('Write', 'create', {
-                file_path: `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/forms/${this.sanitizeName(formName)}/script.js`,
-                content: formJS
-            }, 'Create form JavaScript')
-        ];
-        return {
-            taskId: task.id,
-            success: true,
-            output: {
-                html: formHTML,
-                css: formCSS,
-                javascript: formJS
-            },
-            artifacts: [
-                this.createArtifact('form_layout', formName, {
-                    sections: sections.length,
-                    fields: fields.length,
-                    responsive
-                })
-            ],
-            commands
-        };
-    }
-    async createUIComponents(task) {
-        const { components, theme } = task.payload;
-        const generatedComponents = components.map((comp) => ({
-            name: comp.name,
-            type: comp.type,
-            html: this.generateComponentHTML(comp),
-            css: this.generateComponentCSS(comp, theme),
-            javascript: this.generateComponentJS(comp)
-        }));
-        const commands = [];
-        generatedComponents.forEach((comp) => {
-            const compDir = `/Users/nielsvanderwerf/Projects/servicenow_multiagent/output/components/${this.sanitizeName(comp.name)}`;
-            commands.push(this.generateCommand('Bash', 'create', {
-                command: `mkdir -p ${compDir}`,
-                description: `Create component directory for ${comp.name}`
-            }, 'Create directory'), this.generateCommand('Write', 'create', {
-                file_path: `${compDir}/component.html`,
-                content: comp.html
-            }, `Create ${comp.name} HTML`), this.generateCommand('Write', 'create', {
-                file_path: `${compDir}/component.css`,
-                content: comp.css
-            }, `Create ${comp.name} CSS`), this.generateCommand('Write', 'create', {
-                file_path: `${compDir}/component.js`,
-                content: comp.javascript
-            }, `Create ${comp.name} JavaScript`));
-        });
-        return {
-            taskId: task.id,
-            success: true,
-            output: generatedComponents,
-            artifacts: generatedComponents.map((comp) => this.createArtifact('ui_component', comp.name, comp)),
-            commands
-        };
-    }
-    // Helper methods
-    generateUIPageHTML(name, layout, components) {
-        const layoutClass = layout?.type || 'standard';
-        return `<?xml version="1.0" encoding="utf-8" ?>
-<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
-  <g:requires name="styles/${this.sanitizeName(name)}.css" />
-  
-  <div class="ui-page-container ${layoutClass}-layout">
-    <header class="ui-page-header">
-      <h1>${name}</h1>
-    </header>
-    
-    <main class="ui-page-content">
-      ${this.generateLayoutHTML(layout, components)}
-    </main>
-    
-    <footer class="ui-page-footer">
-      <p>Generated by ServiceNow UI Builder</p>
-    </footer>
-  </div>
-  
-  <script>
-    ${this.generateUIPageClientScript(components)}
-  </script>
-</j:jelly>`;
-    }
-    generateLayoutHTML(layout, components) {
-        if (!layout || !components) {
-            return '<div class="placeholder">Add your content here</div>';
-        }
-        switch (layout.type) {
-            case 'grid':
-                return this.generateGridLayout(layout, components);
-            case 'flex':
-                return this.generateFlexLayout(layout, components);
-            case 'tabs':
-                return this.generateTabsLayout(layout, components);
-            default:
-                return this.generateStandardLayout(components);
-        }
-    }
-    generateGridLayout(layout, components) {
-        const columns = layout.columns || 3;
-        return `<div class="grid-container" style="grid-template-columns: repeat(${columns}, 1fr);">
-      ${components.map((comp, index) => `
-        <div class="grid-item" data-component="${comp.type}">
-          ${this.generateComponentHTML(comp)}
-        </div>
-      `).join('')}
-    </div>`;
-    }
-    generateFlexLayout(layout, components) {
-        return `<div class="flex-container" style="flex-direction: ${layout.direction || 'row'};">
-      ${components.map(comp => `
-        <div class="flex-item" data-component="${comp.type}">
-          ${this.generateComponentHTML(comp)}
-        </div>
-      `).join('')}
-    </div>`;
-    }
-    generateTabsLayout(layout, components) {
-        return `<div class="tabs-container">
-      <ul class="tab-headers">
-        ${components.map((comp, index) => `
-          <li class="tab-header ${index === 0 ? 'active' : ''}" data-tab="${index}">
-            ${comp.label || comp.name}
-          </li>
-        `).join('')}
-      </ul>
-      <div class="tab-contents">
-        ${components.map((comp, index) => `
-          <div class="tab-content ${index === 0 ? 'active' : ''}" data-tab="${index}">
-            ${this.generateComponentHTML(comp)}
-          </div>
-        `).join('')}
-      </div>
-    </div>`;
-    }
-    generateStandardLayout(components) {
-        return components.map(comp => `
-      <section class="ui-section">
-        ${this.generateComponentHTML(comp)}
-      </section>
-    `).join('');
-    }
-    generateComponentHTML(component) {
-        switch (component.type) {
-            case 'chart':
-                return `<div class="chart-container" id="${component.id || 'chart'}">
-          <canvas id="${component.id}-canvas"></canvas>
-        </div>`;
-            case 'table':
-                return `<div class="table-container">
-          <table class="data-table" id="${component.id || 'table'}">
-            <thead>
-              <tr>${(component.columns || []).map((col) => `<th>${col.label}</th>`).join('')}</tr>
-            </thead>
-            <tbody>
-              <!-- Data will be loaded dynamically -->
-            </tbody>
-          </table>
-        </div>`;
-            case 'form':
-                return this.generateFormHTML(component.sections || [], component.fields || [], false);
-            case 'metric':
-                return `<div class="metric-widget">
-          <h3>${component.label}</h3>
-          <div class="metric-value" id="${component.id}-value">--</div>
-          <div class="metric-trend" id="${component.id}-trend"></div>
-        </div>`;
-            default:
-                return `<div class="custom-component" id="${component.id}">
-          ${component.content || '<!-- Custom component -->'}
-        </div>`;
-        }
-    }
-    generateProcessingScript(components) {
-        return `<%
-  // Server-side processing script
-  
-  // Initialize response object
-  var response = {
-    success: true,
-    data: {}
-  };
-  
-  try {
-    ${components?.map(comp => this.generateComponentDataFetch(comp)).join('\n    ') || '// Add data fetching logic'}
-    
-    // Set response data
-    g_response.setContentType('application/json');
-    g_response.getWriter().write(JSON.stringify(response));
-  } catch (e) {
-    response.success = false;
-    response.error = e.message;
-    g_response.getWriter().write(JSON.stringify(response));
-  }
-%>`;
-    }
-    generateComponentDataFetch(component) {
-        switch (component.type) {
-            case 'table':
-                return `// Fetch data for table: ${component.id}
-    var gr = new GlideRecord('${component.table || 'incident'}');
-    gr.setLimit(${component.limit || 100});
-    gr.query();
-    response.data.${component.id} = [];
-    while (gr.next()) {
-      response.data.${component.id}.push({
-        sys_id: gr.getUniqueValue(),
-        display_value: gr.getDisplayValue()
-      });
-    }`;
-            case 'metric':
-                return `// Calculate metric: ${component.id}
-    var count = new GlideAggregate('${component.table || 'incident'}');
-    count.addAggregate('COUNT');
-    count.query();
-    if (count.next()) {
-      response.data.${component.id} = count.getAggregate('COUNT');
-    }`;
-            default:
-                return `// Custom data fetch for ${component.id}`;
-        }
-    }
-    generateUIPageClientScript(components) {
-        return `(function() {
-    // UI Page client-side script
-    
-    document.addEventListener('DOMContentLoaded', function() {
-        initializePage();
-    });
-    
-    function initializePage() {
-        ${components?.map(comp => this.generateComponentInitialization(comp)).join('\n        ') || '// Add initialization logic'}
-        
-        // Setup event handlers
-        setupEventHandlers();
-    }
-    
-    function setupEventHandlers() {
-        // Tab navigation
-        var tabHeaders = document.querySelectorAll('.tab-header');
-        tabHeaders.forEach(function(header) {
-            header.addEventListener('click', function() {
-                switchTab(this.getAttribute('data-tab'));
-            });
-        });
-    }
-    
-    function switchTab(tabIndex) {
-        // Hide all tabs
-        document.querySelectorAll('.tab-content').forEach(function(content) {
-            content.classList.remove('active');
-        });
-        document.querySelectorAll('.tab-header').forEach(function(header) {
-            header.classList.remove('active');
-        });
-        
-        // Show selected tab
-        document.querySelector('.tab-content[data-tab="' + tabIndex + '"]').classList.add('active');
-        document.querySelector('.tab-header[data-tab="' + tabIndex + '"]').classList.add('active');
-    }
-})();`;
-    }
-    generateComponentInitialization(component) {
-        switch (component.type) {
-            case 'chart':
-                return `// Initialize chart: ${component.id}
-        initializeChart('${component.id}-canvas', ${JSON.stringify(component.config || {})});`;
-            case 'table':
-                return `// Initialize table: ${component.id}
-        loadTableData('${component.id}');`;
-            default:
-                return `// Initialize component: ${component.id}`;
-        }
-    }
-    generateUIPageCSS(name, layout) {
-        return `.ui-page-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.ui-page-header {
-    margin-bottom: 30px;
-    padding-bottom: 20px;
-    border-bottom: 2px solid #e0e0e0;
-}
-
-.ui-page-header h1 {
-    margin: 0;
-    color: #333;
-    font-size: 28px;
-}
-
-.ui-page-content {
-    min-height: 400px;
-}
-
-/* Grid Layout */
-.grid-container {
-    display: grid;
-    gap: 20px;
-    margin-bottom: 20px;
-}
-
-.grid-item {
-    background: #f9f9f9;
-    padding: 20px;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-/* Flex Layout */
-.flex-container {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-
-.flex-item {
-    flex: 1;
-    min-width: 300px;
-    background: #f9f9f9;
-    padding: 20px;
-    border-radius: 4px;
-}
-
-/* Tabs Layout */
-.tab-headers {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    border-bottom: 2px solid #ddd;
-}
-
-.tab-header {
-    padding: 10px 20px;
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-    transition: all 0.3s;
-}
-
-.tab-header:hover {
-    background: #f0f0f0;
-}
-
-.tab-header.active {
-    border-bottom-color: #0078d4;
-    color: #0078d4;
-}
-
-.tab-content {
-    display: none;
-    padding: 20px 0;
-}
-
-.tab-content.active {
-    display: block;
-}
-
-/* Components */
-.chart-container {
-    position: relative;
-    height: 400px;
-}
-
-.data-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-    padding: 10px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
-}
-
-.data-table th {
-    background: #f5f5f5;
-    font-weight: bold;
-}
-
-.metric-widget {
-    text-align: center;
-    padding: 20px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.metric-value {
-    font-size: 48px;
-    font-weight: bold;
-    color: #0078d4;
-    margin: 20px 0;
-}
-
-.ui-page-footer {
-    margin-top: 40px;
-    padding-top: 20px;
-    border-top: 1px solid #e0e0e0;
-    text-align: center;
-    color: #666;
-}`;
-    }
-    generateUIActionClientScript(action) {
-        const confirmMessage = action.confirmMessage || 'Are you sure you want to perform this action?';
-        return `function ${this.sanitizeName(action.name)}() {
-    // Client-side UI Action
-    
-    if (!confirm('${confirmMessage}')) {
-        return false;
-    }
-    
-    // Show loading indicator
-    g_form.showLoadingMessage('Processing...');
-    
-    // Prepare data
-    var data = {
-        sys_id: g_form.getUniqueValue(),
-        table: '${action.table || 'current'}',
-        ${action.parameters?.map((p) => `${p.name}: g_form.getValue('${p.field}')`).join(',\n        ') || ''}
-    };
-    
-    // Make AJAX call to server
-    var ga = new GlideAjax('${action.ajaxProcessor || 'UIActionProcessor'}');
-    ga.addParam('sysparm_name', '${action.name}');
-    ga.addParam('sysparm_data', JSON.stringify(data));
-    
-    ga.getXMLAnswer(function(response) {
-        g_form.hideLoadingMessage();
-        
-        try {
-            var result = JSON.parse(response);
-            if (result.success) {
-                g_form.addInfoMessage(result.message || 'Action completed successfully');
-                ${action.refresh ? 'g_form.reload();' : ''}
-            } else {
-                g_form.addErrorMessage(result.error || 'Action failed');
-            }
-        } catch (e) {
-            g_form.addErrorMessage('Error processing response');
-        }
-    });
-    
-    return false; // Prevent default form submission
-}
-
-// Execute the action
-${this.sanitizeName(action.name)}();`;
-    }
-    generateUIActionServerScript(action) {
-        return `// Server-side UI Action
-(function() {
-    try {
-        ${this.generateServerActionLogic(action)}
-        
-        // Set success message
-        gs.addInfoMessage('${action.successMessage || 'Action completed successfully'}');
-        
-        // Redirect if specified
-        ${action.redirect ? `action.setRedirectURL('${action.redirect}');` : '// No redirect'}
-        
-    } catch (e) {
-        gs.addErrorMessage('Error: ' + e.message);
-        action.setRedirectURL(current);
-    }
-})();`;
-    }
-    generateServerActionLogic(action) {
-        switch (action.type) {
-            case 'create_related':
-                return `// Create related record
-        var gr = new GlideRecord('${action.targetTable}');
-        gr.initialize();
-        ${action.fieldMappings?.map((m) => `gr.${m.target} = current.${m.source};`).join('\n        ') || ''}
-        gr.insert();`;
-            case 'update_field':
-                return `// Update field
-        current.${action.field} = '${action.value}';
-        current.update();`;
-            case 'execute_flow':
-                return `// Execute flow
-        sn_fd.FlowAPI.startFlow('${action.flowId}', {
-            table: current.getTableName(),
-            sys_id: current.getUniqueValue()
-        });`;
-            default:
-                return '// Custom action logic\n        ' + (action.customCode || '// Add implementation');
-        }
-    }
-    combineUIActionScripts(uiAction) {
-        let combined = '// UI Action: ' + uiAction.name + '\n\n';
-        if (uiAction.clientScript) {
-            combined += '// CLIENT SCRIPT\n' + uiAction.clientScript + '\n\n';
-        }
-        if (uiAction.serverScript) {
-            combined += '// SERVER SCRIPT\n' + uiAction.serverScript;
-        }
-        return combined;
-    }
-    generateFormHTML(sections, fields, responsive) {
-        const formClass = responsive ? 'responsive-form' : 'standard-form';
-        return `<form class="${formClass}" id="custom-form">
-      ${sections.map(section => `
-        <fieldset class="form-section">
-          <legend>${section.title}</legend>
-          <div class="form-fields">
-            ${fields
-            .filter(field => field.section === section.id)
-            .map(field => this.generateFieldHTML(field))
-            .join('')}
-          </div>
-        </fieldset>
-      `).join('')}
-      
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">Submit</button>
-        <button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
-      </div>
-    </form>`;
-    }
-    generateFieldHTML(field) {
-        const required = field.required ? 'required' : '';
-        switch (field.type) {
-            case 'text':
-            case 'email':
-            case 'number':
-                return `<div class="form-field">
-          <label for="${field.id}">${field.label}</label>
-          <input type="${field.type}" id="${field.id}" name="${field.name}" ${required} />
-        </div>`;
-            case 'textarea':
-                return `<div class="form-field">
-          <label for="${field.id}">${field.label}</label>
-          <textarea id="${field.id}" name="${field.name}" rows="4" ${required}></textarea>
-        </div>`;
-            case 'select':
-                return `<div class="form-field">
-          <label for="${field.id}">${field.label}</label>
-          <select id="${field.id}" name="${field.name}" ${required}>
-            <option value="">-- Select --</option>
-            ${field.options?.map((opt) => `<option value="${opt.value}">${opt.label}</option>`).join('')}
-          </select>
-        </div>`;
-            case 'checkbox':
-                return `<div class="form-field checkbox-field">
-          <input type="checkbox" id="${field.id}" name="${field.name}" />
-          <label for="${field.id}">${field.label}</label>
-        </div>`;
-            case 'reference':
-                return `<div class="form-field">
-          <label for="${field.id}">${field.label}</label>
-          <input type="text" id="${field.id}" name="${field.name}" 
-                 data-reference="${field.reference}" ${required} />
-          <button type="button" class="reference-lookup" onclick="lookupReference('${field.id}')">
-            🔍
-          </button>
-        </div>`;
-            default:
-                return `<div class="form-field">
-          <label for="${field.id}">${field.label}</label>
-          <input type="text" id="${field.id}" name="${field.name}" ${required} />
-        </div>`;
-        }
-    }
-    generateFormCSS(formName, responsive) {
-        return `.${responsive ? 'responsive-form' : 'standard-form'} {
-    max-width: ${responsive ? '100%' : '800px'};
-    margin: 0 auto;
-}
-
-.form-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-}
-
-.form-section legend {
-    font-weight: bold;
-    color: #333;
-    padding: 0 10px;
-}
-
-.form-fields {
-    display: ${responsive ? 'grid' : 'block'};
-    ${responsive ? 'grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));' : ''}
-    gap: 20px;
-}
-
-.form-field {
-    margin-bottom: 20px;
-}
-
-.form-field label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: 600;
-    color: #555;
-}
-
-.form-field input,
-.form-field textarea,
-.form-field select {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-}
-
-.form-field input:focus,
-.form-field textarea:focus,
-.form-field select:focus {
-    outline: none;
-    border-color: #0078d4;
-    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
-}
-
-.checkbox-field {
-    display: flex;
-    align-items: center;
-}
-
-.checkbox-field input {
-    width: auto;
-    margin-right: 8px;
-}
-
-.reference-lookup {
-    display: inline-block;
-    margin-left: 8px;
-    padding: 6px 10px;
-    border: 1px solid #ddd;
-    background: #f5f5f5;
-    cursor: pointer;
-    border-radius: 4px;
-}
-
-.form-actions {
-    margin-top: 30px;
-    text-align: center;
-}
-
-.btn {
-    padding: 10px 20px;
-    margin: 0 5px;
-    border: none;
-    border-radius: 4px;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.btn-primary {
-    background: #0078d4;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #005a9e;
-}
-
-.btn-secondary {
-    background: #e0e0e0;
-    color: #333;
-}
-
-.btn-secondary:hover {
-    background: #d0d0d0;
-}`;
-    }
-    generateFormJavaScript(fields) {
-        return `// Form JavaScript
-document.addEventListener('DOMContentLoaded', function() {
-    initializeForm();
-});
-
-function initializeForm() {
-    // Setup form validation
-    var form = document.getElementById('custom-form');
-    form.addEventListener('submit', handleSubmit);
-    
-    // Initialize reference fields
-    ${fields.filter(f => f.type === 'reference').map(field => `
-    initializeReferenceField('${field.id}', '${field.reference}');`).join('')}
-    
-    // Setup field dependencies
-    setupFieldDependencies();
-}
-
-function handleSubmit(event) {
-    event.preventDefault();
-    
-    if (!validateForm()) {
-        return false;
-    }
-    
-    // Collect form data
-    var formData = new FormData(event.target);
-    var data = {};
-    
-    for (var [key, value] of formData.entries()) {
-        data[key] = value;
-    }
-    
-    // Submit form via AJAX
-    submitForm(data);
-}
-
-function validateForm() {
-    var isValid = true;
-    var errors = [];
-    
-    // Validate required fields
-    document.querySelectorAll('[required]').forEach(function(field) {
-        if (!field.value.trim()) {
-            errors.push(field.previousElementSibling.textContent + ' is required');
-            isValid = false;
-        }
-    });
-    
-    // Custom validations
-    ${fields.filter(f => f.validation).map(field => `
-    if (!validate${field.name}()) {
-        errors.push('${field.validationMessage || 'Invalid ' + field.label}');
-        isValid = false;
-    }`).join('')}
-    
-    if (!isValid) {
-        showErrors(errors);
-    }
-    
-    return isValid;
-}
-
-function submitForm(data) {
-    // Show loading
-    showLoading();
-    
-    // Make AJAX request
-    var xhr = new XMLHttpRequest();
-    xhr.open('POST', '/api/form/submit', true);
-    xhr.setRequestHeader('Content-Type', 'application/json');
-    
-    xhr.onload = function() {
-        hideLoading();
-        
-        if (xhr.status === 200) {
-            var response = JSON.parse(xhr.responseText);
-            if (response.success) {
-                showSuccess('Form submitted successfully');
-                resetForm();
-            } else {
-                showError(response.error || 'Submission failed');
-            }
-        } else {
-            showError('Server error occurred');
-        }
-    };
-    
-    xhr.send(JSON.stringify(data));
-}
-
-function resetForm() {
-    document.getElementById('custom-form').reset();
-}
-
-function lookupReference(fieldId) {
-    // Open reference lookup dialog
-    var field = document.getElementById(fieldId);
-    var table = field.getAttribute('data-reference');
-    
-    // Implement reference lookup logic
-    console.log('Opening reference lookup for', table);
-}
-
-function initializeReferenceField(fieldId, table) {
-    // Setup autocomplete for reference field
-    var field = document.getElementById(fieldId);
-    
-    // Add autocomplete functionality
-    // This would integrate with ServiceNow's reference field behavior
-}
-
-function setupFieldDependencies() {
-    // Setup any field dependencies or conditional display logic
-}
-
-function showLoading() {
-    // Show loading indicator
-}
-
-function hideLoading() {
-    // Hide loading indicator
-}
-
-function showSuccess(message) {
-    alert('Success: ' + message);
-}
-
-function showError(message) {
-    alert('Error: ' + message);
-}
-
-function showErrors(errors) {
-    alert('Please fix the following errors:\\n\\n' + errors.join('\\n'));
-}`;
-    }
-    generateComponentCSS(component, theme) {
-        const primaryColor = theme?.primaryColor || '#0078d4';
-        const secondaryColor = theme?.secondaryColor || '#e0e0e0';
-        return `.component-${this.sanitizeName(component.name)} {
-    padding: 20px;
-    background: ${theme?.background || '#fff'};
-    border: 1px solid ${secondaryColor};
-    border-radius: 4px;
-    margin-bottom: 20px;
-}
-
-.component-${this.sanitizeName(component.name)} h3 {
-    color: ${primaryColor};
-    margin-bottom: 15px;
-}`;
-    }
-    generateComponentJS(component) {
-        return `// Component: ${component.name}
-(function() {
-    var component = {
-        init: function() {
-            console.log('Initializing ${component.name}');
-            ${component.initialization || '// Add initialization code'}
-        },
-        
-        refresh: function() {
-            ${component.refreshCode || '// Add refresh logic'}
-        },
-        
-        destroy: function() {
-            ${component.cleanupCode || '// Add cleanup code'}
-        }
-    };
-    
-    // Auto-initialize if DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', component.init);
-    } else {
-        component.init();
-    }
-    
-    // Export for external use
-    window['${this.sanitizeName(component.name)}Component'] = component;
-})();`;
-    }
-    async generateDashboard(spec) {
-        // Generate dashboard UI
-        const dashboardHTML = this.generateDashboardHTML(spec);
-        const dashboardCSS = this.generateDashboardCSS(spec);
-        const dashboardJS = this.generateDashboardJS(spec);
-        return {
-            taskId: '',
-            success: true,
-            output: {
-                html: dashboardHTML,
-                css: dashboardCSS,
-                javascript: dashboardJS
-            },
-            artifacts: [
-                this.createArtifact('dashboard', spec.name, {
-                    html: dashboardHTML,
-                    css: dashboardCSS,
-                    javascript: dashboardJS
-                })
-            ]
-        };
-    }
-    generateDashboardHTML(spec) {
-        return `<div class="dashboard-container">
-      <header class="dashboard-header">
-        <h1>${spec.title || 'Dashboard'}</h1>
-        <div class="dashboard-controls">
-          <button onclick="refreshDashboard()">Refresh</button>
-        </div>
-      </header>
-      
-      <div class="dashboard-grid">
-        ${spec.widgets?.map((widget) => `
-          <div class="dashboard-widget ${widget.size || 'medium'}" id="widget-${widget.id}">
-            ${this.generateWidgetHTML(widget)}
-          </div>
-        `).join('') || ''}
-      </div>
-    </div>`;
-    }
-    generateWidgetHTML(widget) {
-        switch (widget.type) {
-            case 'metric':
-                return `<div class="metric-widget">
-          <h3>${widget.title}</h3>
-          <div class="metric-value">${widget.value || '--'}</div>
-          <div class="metric-change">${widget.change || ''}</div>
-        </div>`;
-            case 'chart':
-                return `<div class="chart-widget">
-          <h3>${widget.title}</h3>
-          <canvas id="chart-${widget.id}"></canvas>
-        </div>`;
-            case 'list':
-                return `<div class="list-widget">
-          <h3>${widget.title}</h3>
-          <ul class="widget-list">
-            <!-- Items will be loaded dynamically -->
-          </ul>
-        </div>`;
-            default:
-                return `<div class="custom-widget">
-          <h3>${widget.title}</h3>
-          <div class="widget-content">
-            <!-- Custom content -->
-          </div>
-        </div>`;
-        }
-    }
-    generateDashboardCSS(spec) {
-        return `.dashboard-container {
-    padding: 20px;
-    background: #f5f5f5;
-    min-height: 100vh;
-}
-
-.dashboard-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 30px;
-    padding: 20px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.dashboard-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-}
-
-.dashboard-widget {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.dashboard-widget.small {
-    grid-column: span 1;
-}
-
-.dashboard-widget.medium {
-    grid-column: span 2;
-}
-
-.dashboard-widget.large {
-    grid-column: span 3;
-}
-
-.metric-widget {
-    text-align: center;
-}
-
-.metric-value {
-    font-size: 48px;
-    font-weight: bold;
-    color: #0078d4;
-    margin: 20px 0;
-}
-
-.metric-change {
-    color: #666;
-    font-size: 14px;
-}
-
-.chart-widget canvas {
-    max-width: 100%;
-    height: 300px;
-}
-
-.list-widget .widget-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.list-widget .widget-list li {
-    padding: 10px;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.list-widget .widget-list li:last-child {
-    border-bottom: none;
-}`;
-    }
-    generateDashboardJS(spec) {
-        return `// Dashboard JavaScript
-var dashboard = {
-    widgets: {},
-    refreshInterval: ${spec.refreshInterval || 30000},
-    
-    init: function() {
-        console.log('Initializing dashboard');
-        this.loadWidgets();
-        this.startAutoRefresh();
-    },
-    
-    loadWidgets: function() {
-        ${spec.widgets?.map((widget) => `
-        this.loadWidget('${widget.id}', ${JSON.stringify(widget)});`).join('')}
-    },
-    
-    loadWidget: function(widgetId, config) {
-        console.log('Loading widget:', widgetId);
-        
-        switch (config.type) {
-            case 'metric':
-                this.loadMetricWidget(widgetId, config);
-                break;
-            case 'chart':
-                this.loadChartWidget(widgetId, config);
-                break;
-            case 'list':
-                this.loadListWidget(widgetId, config);
-                break;
-        }
-    },
-    
-    loadMetricWidget: function(widgetId, config) {
-        // Fetch metric data
-        fetch('/api/metrics/' + config.metric)
-            .then(response => response.json())
-            .then(data => {
-                var widget = document.getElementById('widget-' + widgetId);
-                widget.querySelector('.metric-value').textContent = data.value;
-                widget.querySelector('.metric-change').textContent = data.change;
-            });
-    },
-    
-    loadChartWidget: function(widgetId, config) {
-        // Initialize chart
-        var ctx = document.getElementById('chart-' + widgetId).getContext('2d');
-        // Chart.js initialization would go here
-    },
-    
-    loadListWidget: function(widgetId, config) {
-        // Fetch list data
-        fetch('/api/list/' + config.source)
-            .then(response => response.json())
-            .then(data => {
-                var list = document.querySelector('#widget-' + widgetId + ' .widget-list');
-                list.innerHTML = data.items.map(item => 
-                    '<li>' + item.display_value + '</li>'
-                ).join('');
-            });
-    },
-    
-    refresh: function() {
-        console.log('Refreshing dashboard');
-        this.loadWidgets();
-    },
-    
-    startAutoRefresh: function() {
-        var self = this;
-        setInterval(function() {
-            self.refresh();
-        }, this.refreshInterval);
-    }
-};
-
-// Initialize on load
-document.addEventListener('DOMContentLoaded', function() {
-    dashboard.init();
-});
-
-function refreshDashboard() {
-    dashboard.refresh();
-}`;
-    }
-    async generateForm(spec) {
-        return this.createFormLayout({
-            id: '',
-            type: 'create_form_layout',
-            description: 'Generate form from spec',
-            payload: {
-                formName: spec.name,
-                sections: spec.sections || [{ id: 'main', title: 'Main Section' }],
-                fields: spec.fields || [],
-                responsive: spec.responsive !== false
-            },
-            priority: 'medium'
-        });
-    }
-    async generateReport(spec) {
-        // Generate report UI
-        const reportHTML = `<div class="report-container">
-      <h1>${spec.title}</h1>
-      <div class="report-filters">
-        <!-- Filters will be added here -->
-      </div>
-      <div class="report-content">
-        <!-- Report content will be loaded here -->
-      </div>
-    </div>`;
-        return {
-            taskId: '',
-            success: true,
-            output: { html: reportHTML },
-            artifacts: [
-                this.createArtifact('report', spec.name, { html: reportHTML })
-            ]
-        };
-    }
-    async generateWizard(spec) {
-        // Generate wizard UI
-        const wizardHTML = this.generateWizardHTML(spec);
-        const wizardCSS = this.generateWizardCSS();
-        const wizardJS = this.generateWizardJS(spec);
-        return {
-            taskId: '',
-            success: true,
-            output: {
-                html: wizardHTML,
-                css: wizardCSS,
-                javascript: wizardJS
-            },
-            artifacts: [
-                this.createArtifact('wizard', spec.name, {
-                    html: wizardHTML,
-                    css: wizardCSS,
-                    javascript: wizardJS
-                })
-            ]
-        };
-    }
-    generateWizardHTML(spec) {
-        return `<div class="wizard-container">
-      <div class="wizard-progress">
-        ${spec.steps?.map((step, index) => `
-          <div class="wizard-step ${index === 0 ? 'active' : ''}" data-step="${index}">
-            <div class="step-number">${index + 1}</div>
-            <div class="step-title">${step.title}</div>
-          </div>
-        `).join('') || ''}
-      </div>
-      
-      <div class="wizard-content">
-        ${spec.steps?.map((step, index) => `
-          <div class="wizard-panel ${index === 0 ? 'active' : ''}" data-step="${index}">
-            <h2>${step.title}</h2>
-            ${step.content || '<!-- Step content -->'}
-          </div>
-        `).join('') || ''}
-      </div>
-      
-      <div class="wizard-actions">
-        <button class="btn btn-secondary" onclick="previousStep()" id="prevBtn" disabled>Previous</button>
-        <button class="btn btn-primary" onclick="nextStep()" id="nextBtn">Next</button>
-        <button class="btn btn-success" onclick="finishWizard()" id="finishBtn" style="display:none;">Finish</button>
-      </div>
-    </div>`;
-    }
-    generateWizardCSS() {
-        return `.wizard-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.wizard-progress {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 40px;
-}
-
-.wizard-step {
-    text-align: center;
-    flex: 1;
-    position: relative;
-}
-
-.wizard-step:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    top: 20px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    background: #e0e0e0;
-}
-
-.wizard-step.active::after,
-.wizard-step.completed::after {
-    background: #0078d4;
-}
-
-.step-number {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: #e0e0e0;
-    color: #666;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 10px;
-    position: relative;
-    z-index: 1;
-}
-
-.wizard-step.active .step-number,
-.wizard-step.completed .step-number {
-    background: #0078d4;
-    color: white;
-}
-
-.wizard-panel {
-    display: none;
-    min-height: 300px;
-}
-
-.wizard-panel.active {
-    display: block;
-}
-
-.wizard-actions {
-    margin-top: 40px;
-    text-align: center;
-}`;
-    }
-    generateWizardJS(spec) {
-        return `// Wizard JavaScript
-var wizard = {
-    currentStep: 0,
-    totalSteps: ${spec.steps?.length || 0},
-    
-    init: function() {
-        this.updateButtons();
-    },
-    
-    nextStep: function() {
-        if (this.validateStep(this.currentStep)) {
-            this.currentStep++;
-            this.showStep(this.currentStep);
-        }
-    },
-    
-    previousStep: function() {
-        this.currentStep--;
-        this.showStep(this.currentStep);
-    },
-    
-    showStep: function(step) {
-        // Hide all panels
-        document.querySelectorAll('.wizard-panel').forEach(function(panel) {
-            panel.classList.remove('active');
-        });
-        document.querySelectorAll('.wizard-step').forEach(function(stepEl) {
-            stepEl.classList.remove('active');
-        });
-        
-        // Show current panel
-        document.querySelector('.wizard-panel[data-step="' + step + '"]').classList.add('active');
-        document.querySelector('.wizard-step[data-step="' + step + '"]').classList.add('active');
-        
-        // Mark completed steps
-        for (var i = 0; i < step; i++) {
-            document.querySelector('.wizard-step[data-step="' + i + '"]').classList.add('completed');
-        }
-        
-        this.updateButtons();
-    },
-    
-    updateButtons: function() {
-        var prevBtn = document.getElementById('prevBtn');
-        var nextBtn = document.getElementById('nextBtn');
-        var finishBtn = document.getElementById('finishBtn');
-        
-        prevBtn.disabled = this.currentStep === 0;
-        
-        if (this.currentStep === this.totalSteps - 1) {
-            nextBtn.style.display = 'none';
-            finishBtn.style.display = 'inline-block';
-        } else {
-            nextBtn.style.display = 'inline-block';
-            finishBtn.style.display = 'none';
-        }
-    },
-    
-    validateStep: function(step) {
-        // Add validation logic for each step
-        return true;
-    },
-    
-    finish: function() {
-        if (this.validateStep(this.currentStep)) {
-            // Collect all data and submit
-            console.log('Wizard completed');
-        }
-    }
-};
-
-// Global functions
-function nextStep() {
-    wizard.nextStep();
-}
-
-function previousStep() {
-    wizard.previousStep();
-}
-
-function finishWizard() {
-    wizard.finish();
-}
-
-// Initialize
-document.addEventListener('DOMContentLoaded', function() {
-    wizard.init();
-});`;
-    }
-    async generateGenericUI(spec) {
-        // Generate generic UI based on spec
-        return {
-            taskId: '',
-            success: true,
-            output: {
-                html: '<div>Generic UI Component</div>'
-            },
-            artifacts: [
-                this.createArtifact('ui_component', spec.name, spec)
-            ]
-        };
-    }
-    sanitizeName(name) {
-        return name.toLowerCase().replace(/[^a-z0-9]/g, '_');
-    }
-}
-exports.UIBuilderAgent = UIBuilderAgent;
-//# sourceMappingURL=ui-builder.agent.js.map