snow-flow 1.1.0

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

@@ -0,0 +1,1539 @@
+"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