@runflow-ai/cli 0.2.11 → 0.2.12

package/static/app.js

@@ -1,1381 +0,0 @@
-/**
- * Runflow Test Interface - Enterprise Modular Architecture
- * @version 2.0.0
- * @description Professional frontend for testing Runflow agents with improved developer experience
- */
-
-// ============================================================================
-// Module System - Simple but Effective Module Pattern
-// ============================================================================
-
-const Runflow = (() => {
-    'use strict';
-    
-    // Private module storage
-    const modules = {};
-    const config = {};
-    
-    // Public API
-    return {
-        define(name, dependencies, factory) {
-            if (typeof dependencies === 'function') {
-                factory = dependencies;
-                dependencies = [];
-            }
-            
-            const resolvedDeps = dependencies.map(dep => modules[dep]);
-            modules[name] = factory(...resolvedDeps);
-            return modules[name];
-        },
-        
-        get(name) {
-            return modules[name];
-        },
-        
-        config: config
-    };
-})();
-
-// ============================================================================
-// Configuration Module
-// ============================================================================
-
-Runflow.define('Config', () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const backendPort = urlParams.get('backend') || '8547';
-    
-    return {
-        api: {
-            baseURL: `http://localhost:${backendPort}`,
-            timeout: 30000,
-            retryAttempts: 3,
-            retryDelay: 2000
-        },
-        ui: {
-            maxMessages: 100,
-            autoScroll: true,
-            theme: 'light',
-            animations: true
-        },
-        session: {
-            prefix: 'runflow-test',
-            storageKey: 'runflow-session-data'
-        },
-        features: {
-            scenarios: true,
-            export: true,
-            keyboard: true,
-            autosave: false
-        }
-    };
-});
-
-// ============================================================================
-// Event Bus - Central Communication Hub
-// ============================================================================
-
-Runflow.define('EventBus', () => {
-    const events = {};
-    let debug = false;
-    
-    return {
-        on(event, handler, context = null) {
-            if (!events[event]) events[event] = [];
-            events[event].push({ handler, context });
-            
-            // Return unsubscribe function
-            return () => this.off(event, handler);
-        },
-        
-        off(event, handler) {
-            if (!events[event]) return;
-            events[event] = events[event].filter(h => h.handler !== handler);
-        },
-        
-        emit(event, data = {}) {
-            if (debug) console.log(`[Event] ${event}`, data);
-            if (!events[event]) return;
-            
-            events[event].forEach(({ handler, context }) => {
-                try {
-                    handler.call(context, data);
-                } catch (error) {
-                    console.error(`Error in event handler for ${event}:`, error);
-                }
-            });
-        },
-        
-        once(event, handler, context = null) {
-            const wrapper = (data) => {
-                this.off(event, wrapper);
-                handler.call(context, data);
-            };
-            this.on(event, wrapper);
-        },
-        
-        setDebug(enabled) {
-            debug = enabled;
-        }
-    };
-});
-
-// ============================================================================
-// State Manager - Centralized State with Subscriptions
-// ============================================================================
-
-Runflow.define('StateManager', ['EventBus'], (EventBus) => {
-    const state = {
-        connection: {
-            status: 'disconnected',
-            backend: null,
-            lastPing: null
-        },
-        session: {
-            id: generateSessionId(),
-            startTime: new Date(),
-            messageCount: 0,
-            lastResponseTime: null
-        },
-        ui: {
-            loading: false,
-            testMode: 'simple',
-            currentScenario: null
-        },
-        messages: [],
-        scenarios: []
-    };
-    
-    const subscribers = new Map();
-    
-    function generateSessionId() {
-        return `runflow-test-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    
-    function getValueByPath(obj, path) {
-        return path.split('.').reduce((current, key) => current?.[key], obj);
-    }
-    
-    function setValueByPath(obj, path, value) {
-        const keys = path.split('.');
-        const lastKey = keys.pop();
-        const target = keys.reduce((current, key) => {
-            if (!current[key]) current[key] = {};
-            return current[key];
-        }, obj);
-        
-        const oldValue = target[lastKey];
-        target[lastKey] = value;
-        return oldValue;
-    }
-    
-    return {
-        get(path) {
-            return path ? getValueByPath(state, path) : state;
-        },
-        
-        set(path, value) {
-            const oldValue = setValueByPath(state, path, value);
-            EventBus.emit('state:changed', { path, oldValue, newValue: value });
-            this.notifySubscribers(path, value);
-        },
-        
-        update(path, updater) {
-            const current = this.get(path);
-            this.set(path, updater(current));
-        },
-        
-        subscribe(path, callback) {
-            if (!subscribers.has(path)) {
-                subscribers.set(path, new Set());
-            }
-            subscribers.get(path).add(callback);
-            
-            return () => {
-                subscribers.get(path)?.delete(callback);
-            };
-        },
-        
-        notifySubscribers(path, value) {
-            subscribers.get(path)?.forEach(callback => {
-                try {
-                    callback(value);
-                } catch (error) {
-                    console.error(`Subscriber error for ${path}:`, error);
-                }
-            });
-        }
-    };
-});
-
-// ============================================================================
-// API Client - Clean HTTP Communication Layer
-// ============================================================================
-
-Runflow.define('APIClient', ['Config', 'EventBus'], (Config, EventBus) => {
-    class APIClient {
-        constructor() {
-            this.baseURL = Config.api.baseURL;
-            this.timeout = Config.api.timeout;
-        }
-        
-        async request(method, endpoint, data = null) {
-            const controller = new AbortController();
-            const timeoutId = setTimeout(() => controller.abort(), this.timeout);
-            
-            try {
-                const options = {
-                    method,
-                    headers: { 'Content-Type': 'application/json' },
-                    signal: controller.signal
-                };
-                
-                if (data) {
-                    options.body = JSON.stringify(data);
-                }
-                
-                const response = await fetch(`${this.baseURL}${endpoint}`, options);
-                clearTimeout(timeoutId);
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                
-                const contentType = response.headers.get('content-type');
-                return contentType?.includes('application/json') 
-                    ? await response.json() 
-                    : await response.text();
-                    
-            } catch (error) {
-                clearTimeout(timeoutId);
-                EventBus.emit('api:error', { endpoint, error: error.message });
-                throw error;
-            }
-        }
-        
-        get(endpoint) {
-            return this.request('GET', endpoint);
-        }
-        
-        post(endpoint, data) {
-            return this.request('POST', endpoint, data);
-        }
-        
-        async checkHealth() {
-            try {
-                await this.get('/api/health');
-                EventBus.emit('api:health', { status: 'healthy' });
-                return true;
-            } catch (error) {
-                EventBus.emit('api:health', { status: 'unhealthy', error });
-                return false;
-            }
-        }
-    }
-    
-    return new APIClient();
-});
-
-// ============================================================================
-// UI Components - Reusable UI Elements
-// ============================================================================
-
-Runflow.define('UIComponents', () => {
-    // Helper to safely stringify objects with circular references
-    function safeStringify(obj, indent = 2) {
-        const cache = new Set();
-        try {
-            return JSON.stringify(obj, (key, value) => {
-                if (typeof value === 'object' && value !== null) {
-                    if (cache.has(value)) {
-                        return '[Circular Reference]';
-                    }
-                    cache.add(value);
-                }
-                return value;
-            }, indent);
-        } catch (error) {
-            return JSON.stringify({ error: 'Could not serialize object', message: error.message }, null, indent);
-        }
-    }
-    
-    return {
-        Message: {
-            create(type, content, metadata = {}) {
-                const div = document.createElement('div');
-                div.className = `message ${type}`;
-                
-                // Format content
-                let formattedContent = content;
-                if (typeof content === 'object') {
-                    formattedContent = `<pre>${JSON.stringify(content, null, 2)}</pre>`;
-                } else {
-                    // Convert markdown code blocks to pre tags
-                    formattedContent = content.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
-                    // Convert line breaks to <br> for better formatting
-                    formattedContent = formattedContent.replace(/\n/g, '<br>');
-                }
-                
-                // Get display settings
-                const showMetadata = document.getElementById('showMetadata')?.checked !== false;
-                const showJsonToggle = document.getElementById('showJsonToggle')?.checked !== false;
-                const autoExpandJson = document.getElementById('autoExpandJson')?.checked === true;
-                
-                // Create metadata display if available and enabled
-                let metadataDisplay = '';
-                if (showMetadata && (metadata.model || metadata.provider)) {
-                    metadataDisplay = `
-                        <div class="message-metadata">
-                            ${metadata.model ? `<span class="meta-item">${metadata.model}</span>` : ''}
-                            ${metadata.provider ? `<span class="meta-item">${metadata.provider}</span>` : ''}
-                            ${metadata.sessionId ? `<span class="meta-item">Session: ${metadata.sessionId}</span>` : ''}
-                        </div>
-                    `;
-                }
-                
-                // Create collapsible JSON view if full response available and enabled
-                let jsonToggle = '';
-                if (showJsonToggle && metadata.fullResponse && type === 'assistant') {
-                    const jsonId = `json-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-                    const isExpanded = autoExpandJson ? 'block' : 'none';
-                    const buttonText = autoExpandJson ? 'Hide JSON' : 'Show JSON';
-                    
-                    // Use UIComponents.safeStringify to handle any circular references
-                    const UIComponents = Runflow.get('UIComponents');
-                    const jsonString = UIComponents.safeStringify(metadata.fullResponse, 2);
-                    
-                    jsonToggle = `
-                        <div class="json-toggle-wrapper">
-                            <button class="json-toggle" onclick="
-                                const el = document.getElementById('${jsonId}');
-                                const btn = this;
-                                if (el.style.display === 'none') {
-                                    el.style.display = 'block';
-                                    btn.textContent = 'Hide JSON';
-                                } else {
-                                    el.style.display = 'none';
-                                    btn.textContent = 'Show JSON';
-                                }
-                            ">${buttonText}</button>
-                            <div id="${jsonId}" class="json-response" style="display: ${isExpanded};">
-                                <pre>${jsonString}</pre>
-                            </div>
-                        </div>
-                    `;
-                }
-                
-                div.innerHTML = `
-                    <div class="message-bubble">
-                        <div class="content">${formattedContent}</div>
-                        ${metadataDisplay}
-                        <div class="message-footer">
-                            <span class="timestamp">${new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</span>
-                            ${metadata.duration ? `<span class="duration">${metadata.duration}ms</span>` : ''}
-                        </div>
-                        ${jsonToggle}
-                    </div>
-                `;
-                
-                return div;
-            }
-        },
-        
-        StatusIndicator: {
-            update(status, message) {
-                const el = document.getElementById('status');
-                if (el) {
-                    el.className = `connection-status status ${status}`;
-                    el.innerHTML = `<span class="status-indicator dot"></span><span class="status-text">${message}</span>`;
-                }
-            }
-        },
-        
-        Toast: {
-            show(message, type = 'info', duration = 3000) {
-                const toast = document.createElement('div');
-                toast.className = `toast toast-${type}`;
-                toast.textContent = message;
-                toast.style.cssText = `
-                    position: fixed;
-                    bottom: 20px;
-                    right: 20px;
-                    padding: 12px 20px;
-                    background: ${type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#3b82f6'};
-                    color: white;
-                    border-radius: 8px;
-                    font-size: 14px;
-                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-                    transform: translateX(400px);
-                    transition: transform 0.3s ease;
-                    z-index: 1000;
-                `;
-                
-                document.body.appendChild(toast);
-                
-                setTimeout(() => {
-                    toast.style.transform = 'translateX(0)';
-                }, 10);
-                
-                setTimeout(() => {
-                    toast.style.transform = 'translateX(400px)';
-                    setTimeout(() => toast.remove(), 300);
-                }, duration);
-            }
-        },
-        
-        safeStringify  // Export the helper function
-    };
-});
-
-// ============================================================================
-// Chat Manager - Message Handling Logic
-// ============================================================================
-
-Runflow.define('ChatManager', ['APIClient', 'StateManager', 'EventBus', 'UIComponents'], 
-    (APIClient, StateManager, EventBus, UIComponents) => {
-    
-    let messagesContainer = null;
-    
-    async function sendMessage(content, mode = 'simple', payload = null) {
-        const startTime = Date.now();
-        
-        try {
-            // Add user message
-            addMessage('user', content || 'Custom payload sent');
-            
-            // Update state
-            StateManager.set('ui.loading', true);
-            StateManager.update('session.messageCount', c => c + 1);
-            
-            // Prepare request
-            const requestData = mode === 'custom' && payload 
-                ? JSON.parse(payload) 
-                : { message: content };
-            
-            // Send to backend
-            const response = await APIClient.post('/api/chat', requestData);
-            
-            // Calculate duration
-            const duration = Date.now() - startTime;
-            StateManager.set('session.lastResponseTime', duration);
-            
-            // Handle response format
-            let messageContent = response;
-            let metadata = {};
-            let fullResponseCopy = null;
-            
-            if (typeof response === 'object') {
-                // Get configured response path
-                const responsePath = document.getElementById('responsePath')?.value || 'data.message';
-                
-                // Try to get message from configured path
-                messageContent = getValueByPath(response, responsePath);
-                
-                // Fallback to common paths if configured path doesn't work
-                if (!messageContent) {
-                    if (response.data?.message) {
-                        messageContent = response.data.message;
-                        metadata = response.data.metadata || {};
-                    } else if (response.data?.content) {
-                        messageContent = response.data.content;
-                        metadata = response.data.metadata || {};
-                    } else if (response.message) {
-                        messageContent = response.message;
-                        metadata = response.metadata || {};
-                    } else if (response.content) {
-                        messageContent = response.content;
-                        metadata = response.metadata || {};
-                    } else if (response.reply) {
-                        messageContent = response.reply;
-                    }
-                } else {
-                    // Try to get metadata from data.metadata or response.metadata
-                    metadata = response.data?.metadata || response.metadata || {};
-                }
-                
-                // Create a clean copy of the response for display (avoid circular references)
-                try {
-                    fullResponseCopy = JSON.parse(JSON.stringify(response));
-                } catch (e) {
-                    // If circular reference exists, create a simplified version
-                    fullResponseCopy = {
-                        success: response.success,
-                        data: {
-                            message: messageContent,
-                            metadata: {...metadata}
-                        },
-                        timestamp: response.timestamp || new Date().toISOString()
-                    };
-                }
-            }
-            
-            // Helper function to get value by path
-            function getValueByPath(obj, path) {
-                return path.split('.').reduce((current, key) => current?.[key], obj);
-            }
-            
-            // Add assistant response with clean metadata
-            addMessage('assistant', messageContent, { 
-                ...metadata, 
-                duration,
-                fullResponse: fullResponseCopy 
-            });
-            
-            EventBus.emit('message:sent', { response, duration });
-            
-        } catch (error) {
-            addMessage('error', `Error: ${error.message}`);
-            UIComponents.Toast.show(error.message, 'error');
-        } finally {
-            StateManager.set('ui.loading', false);
-        }
-    }
-    
-    function addMessage(type, content, metadata = {}) {
-        if (!messagesContainer) {
-            messagesContainer = document.getElementById('messages');
-        }
-        
-        const messageEl = UIComponents.Message.create(type, content, metadata);
-        messagesContainer.appendChild(messageEl);
-        
-        // Auto scroll
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-        
-        // Update state
-        StateManager.update('messages', msgs => [
-            ...msgs,
-            { type, content, metadata, timestamp: new Date() }
-        ]);
-        
-        // Limit messages
-        const messages = messagesContainer.querySelectorAll('.message');
-        if (messages.length > 100) {
-            messages[0].remove();
-        }
-    }
-    
-    function clearAll() {
-        if (!messagesContainer) {
-            messagesContainer = document.getElementById('messages');
-        }
-        
-        messagesContainer.innerHTML = `
-            <div class="message system">
-                <div class="message-bubble">
-                    <div class="content">Chat cleared. Ready for new messages.</div>
-                    <div class="timestamp">${new Date().toLocaleTimeString()}</div>
-                </div>
-            </div>
-        `;
-        
-        StateManager.set('messages', []);
-        StateManager.set('session.messageCount', 0);
-    }
-    
-    function exportChat() {
-        const messages = StateManager.get('messages');
-        const session = StateManager.get('session');
-        
-        const data = {
-            session: {
-                id: session.id,
-                startTime: session.startTime,
-                messageCount: session.messageCount
-            },
-            messages: messages
-        };
-        
-        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `runflow-chat-${Date.now()}.json`;
-        a.click();
-        URL.revokeObjectURL(url);
-        
-        UIComponents.Toast.show('Chat exported successfully', 'success');
-    }
-    
-    return {
-        sendMessage,
-        addMessage,
-        clearAll,
-        exportChat
-    };
-});
-
-// ============================================================================
-// Scenario Manager - Test Scenarios Handling
-// ============================================================================
-
-Runflow.define('ScenarioManager', ['APIClient', 'StateManager', 'EventBus'], 
-    (APIClient, StateManager, EventBus) => {
-    
-    let scenarioSelect = null;
-    let variablesSection = null;
-    let variablesContainer = null;
-    let payloadInput = null;
-    
-    async function loadScenarios() {
-        try {
-            const response = await APIClient.get('/api/scenarios');
-            // Handle both formats: direct array or {scenarios: [...]}
-            const scenarios = Array.isArray(response) ? response : (response.scenarios || []);
-            StateManager.set('scenarios', scenarios);
-            populateScenarioSelect(scenarios);
-        } catch (error) {
-            console.warn('Failed to load scenarios:', error);
-            populateScenarioSelect([]);
-        }
-    }
-    
-    function populateScenarioSelect(scenarios) {
-        if (!scenarioSelect) {
-            scenarioSelect = document.getElementById('scenarioSelect');
-        }
-        
-        scenarioSelect.innerHTML = '<option value="">-- Select scenario --</option>';
-        
-        // Group scenarios by category
-        const grouped = {};
-        scenarios.forEach(scenario => {
-            const category = scenario.category || 'Other';
-            if (!grouped[category]) {
-                grouped[category] = [];
-            }
-            grouped[category].push(scenario);
-        });
-        
-        // Create optgroups for each category
-        Object.keys(grouped).sort().forEach(category => {
-            const optgroup = document.createElement('optgroup');
-            optgroup.label = category;
-            
-            grouped[category].forEach(scenario => {
-                const option = document.createElement('option');
-                option.value = scenario.id;
-                option.textContent = scenario.name;
-                optgroup.appendChild(option);
-            });
-            
-            scenarioSelect.appendChild(optgroup);
-        });
-    }
-    
-    function loadScenario(scenarioId) {
-        if (!scenarioId) {
-            clearScenario();
-            return;
-        }
-        
-        const scenarios = StateManager.get('scenarios');
-        const scenario = scenarios.find(s => s.id === scenarioId);
-        
-        if (!scenario) return;
-        
-        StateManager.set('ui.currentScenario', scenario);
-        
-        if (scenario.variables && Object.keys(scenario.variables).length > 0) {
-            showVariables(scenario.variables);
-            updatePayloadPreview(scenario);
-        } else {
-            hideVariables();
-            if (!payloadInput) payloadInput = document.getElementById('payloadInput');
-            payloadInput.value = JSON.stringify(scenario.payload, null, 2);
-        }
-        
-        EventBus.emit('scenario:loaded', scenario);
-    }
-    
-    function showVariables(variables) {
-        if (!variablesSection) {
-            variablesSection = document.getElementById('variablesSection');
-            variablesContainer = document.getElementById('variablesContainer');
-        }
-        
-        variablesSection.style.display = 'block';
-        variablesContainer.innerHTML = '';
-        
-        Object.entries(variables).forEach(([key, config]) => {
-            const div = document.createElement('div');
-            div.style.marginBottom = '8px';
-            
-            if (config.type === 'select' && config.options) {
-                div.innerHTML = `
-                    <label style="display: block; font-size: 11px; color: #64748b; margin-bottom: 2px;">
-                        ${config.description || key}:
-                    </label>
-                    <select data-variable="${key}" style="width: 100%; padding: 4px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 3px;">
-                        ${config.options.map(opt => 
-                            `<option value="${opt}" ${opt === config.default ? 'selected' : ''}>${opt}</option>`
-                        ).join('')}
-                    </select>
-                `;
-            } else {
-                div.innerHTML = `
-                    <label style="display: block; font-size: 11px; color: #64748b; margin-bottom: 2px;">
-                        ${config.description || key}:
-                    </label>
-                    <input 
-                        type="${config.type || 'text'}" 
-                        data-variable="${key}" 
-                        value="${config.default || ''}"
-                        placeholder="${config.placeholder || ''}"
-                        style="width: 100%; padding: 4px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 3px;"
-                    />
-                `;
-            }
-            
-            variablesContainer.appendChild(div);
-            
-            const input = div.querySelector('input, select');
-            input.addEventListener('input', () => updatePayloadPreview());
-        });
-    }
-    
-    function hideVariables() {
-        if (!variablesSection) {
-            variablesSection = document.getElementById('variablesSection');
-            variablesContainer = document.getElementById('variablesContainer');
-        }
-        
-        variablesSection.style.display = 'none';
-        variablesContainer.innerHTML = '';
-    }
-    
-    function updatePayloadPreview(scenario) {
-        if (!scenario) {
-            scenario = StateManager.get('ui.currentScenario');
-        }
-        
-        if (!scenario || !scenario.payload) return;
-        
-        if (!payloadInput) payloadInput = document.getElementById('payloadInput');
-        if (!variablesContainer) variablesContainer = document.getElementById('variablesContainer');
-        
-        let payloadStr = JSON.stringify(scenario.payload, null, 2);
-        
-        // Replace variables
-        variablesContainer.querySelectorAll('[data-variable]').forEach(input => {
-            const key = input.dataset.variable;
-            const value = input.value;
-            const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
-            payloadStr = payloadStr.replace(regex, value);
-        });
-        
-        payloadInput.value = payloadStr;
-    }
-    
-    function clearScenario() {
-        StateManager.set('ui.currentScenario', null);
-        hideVariables();
-        if (!payloadInput) payloadInput = document.getElementById('payloadInput');
-        payloadInput.value = '';
-    }
-    
-    return {
-        loadScenarios,
-        loadScenario,
-        clearScenario
-    };
-});
-
-// ============================================================================
-// Connection Monitor - Health Check Service
-// ============================================================================
-
-Runflow.define('ConnectionMonitor', ['APIClient', 'StateManager', 'EventBus', 'UIComponents', 'Config'],
-    (APIClient, StateManager, EventBus, UIComponents, Config) => {
-    
-    let healthInterval = null;
-    let retryCount = 0;
-    
-    async function start() {
-        await checkHealth();
-        startPeriodicChecks();
-    }
-    
-    async function checkHealth() {
-        try {
-            const isHealthy = await APIClient.checkHealth();
-            
-            if (isHealthy) {
-                onConnectionSuccess();
-            } else {
-                onConnectionFailure();
-            }
-        } catch (error) {
-            onConnectionFailure(error);
-        }
-    }
-    
-    function onConnectionSuccess() {
-        StateManager.set('connection.status', 'connected');
-        StateManager.set('connection.lastPing', new Date());
-        
-        UIComponents.StatusIndicator.update('connected', 'Connected');
-        
-        const agentStatus = document.getElementById('agentStatus');
-        if (agentStatus) {
-            agentStatus.textContent = 'Ready';
-            agentStatus.className = 'status-ready';
-        }
-        
-        retryCount = 0;
-        hideLoadingOverlay();
-        
-        EventBus.emit('connection:established');
-    }
-    
-    function onConnectionFailure(error) {
-        StateManager.set('connection.status', 'disconnected');
-        UIComponents.StatusIndicator.update('error', 'Disconnected');
-        
-        const agentStatus = document.getElementById('agentStatus');
-        if (agentStatus) {
-            agentStatus.textContent = 'Offline';
-            agentStatus.className = 'status-error';
-        }
-        
-        retryCount++;
-        
-        if (retryCount <= Config.api.retryAttempts) {
-            setTimeout(() => checkHealth(), Config.api.retryDelay * retryCount);
-        } else {
-            UIComponents.Toast.show('Unable to connect to backend', 'error');
-            EventBus.emit('connection:failed');
-        }
-    }
-    
-    function startPeriodicChecks() {
-        healthInterval = setInterval(() => checkHealth(), 30000);
-    }
-    
-    function stop() {
-        if (healthInterval) {
-            clearInterval(healthInterval);
-            healthInterval = null;
-        }
-    }
-    
-    function hideLoadingOverlay() {
-        const overlay = document.getElementById('loadingOverlay');
-        if (overlay) {
-            overlay.style.opacity = '0';
-            setTimeout(() => overlay.style.display = 'none', 300);
-        }
-    }
-    
-    return {
-        start,
-        checkHealth,
-        stop
-    };
-});
-
-// ============================================================================
-// Traces Manager - Local Traces Visualization
-// ============================================================================
-
-Runflow.define('TracesManager', ['APIClient', 'StateManager', 'EventBus', 'UIComponents'],
-    (APIClient, StateManager, EventBus, UIComponents) => {
-    
-    async function loadTraces() {
-        try {
-            const data = await APIClient.get('/api/traces');
-            renderThreads(data.threads || []);
-        } catch (error) {
-            console.error('Failed to load traces:', error);
-            document.getElementById('tracesContainer').innerHTML = `
-                <div style="text-align: center; padding: 20px; color: var(--error);">
-                    ❌ Failed to load traces
-                </div>
-            `;
-        }
-    }
-    
-    function renderThreads(threads) {
-        const container = document.getElementById('tracesContainer');
-        
-        if (threads.length === 0) {
-            container.innerHTML = `
-                <div style="text-align: center; padding: 20px; color: var(--gray-500); font-size: 13px;">
-                    No traces yet. Send a message to generate traces.
-                </div>
-            `;
-            return;
-        }
-        
-        container.innerHTML = threads.map(thread => `
-            <div class="trace-item" onclick="Runflow.get('TracesManager').viewThread('${thread.threadId}')">
-                <div class="trace-item-header">
-                    <div class="trace-item-title">
-                        ${thread.entityValue || thread.threadId}
-                        <span class="trace-item-badge ${thread.entityType || 'session'}">${thread.entityType || 'session'}</span>
-                    </div>
-                </div>
-                <div class="trace-item-meta">
-                    <div class="trace-item-stat">
-                        <span>📊</span> ${thread.totalTraces} traces
-                    </div>
-                    <div class="trace-item-stat">
-                        <span>🔄</span> ${thread.executions?.length || 1} exec
-                    </div>
-                </div>
-            </div>
-        `).join('');
-    }
-    
-    async function viewThread(threadId) {
-        try {
-            const data = await APIClient.get('/api/traces');
-            const thread = data.threads.find(t => t.threadId === threadId);
-            
-            if (!thread || !thread.executions || thread.executions.length === 0) {
-                UIComponents.Toast.show('No executions found', 'warning');
-                return;
-            }
-            
-            // Show first execution
-            const execution = thread.executions[0];
-            await viewExecution(execution.executionId);
-        } catch (error) {
-            console.error('Failed to view thread:', error);
-            UIComponents.Toast.show('Failed to load thread details', 'error');
-        }
-    }
-    
-    async function viewExecution(executionId) {
-        try {
-            const data = await APIClient.get(`/api/traces/executions/${executionId}`);
-            renderExecutionDetails(data);
-        } catch (error) {
-            console.error('Failed to view execution:', error);
-            UIComponents.Toast.show('Failed to load execution details', 'error');
-        }
-    }
-    
-    function renderExecutionDetails(data) {
-        const panel = document.getElementById('traceDetailsPanel');
-        const container = document.getElementById('traceDetailsContainer');
-        
-        container.innerHTML = `
-            <div style="margin-bottom: 12px; padding: 12px; background: var(--gray-50); border-radius: var(--radius-md);">
-                <div style="font-weight: 600; margin-bottom: 8px; font-size: 13px;">📋 Execution Info</div>
-                <div style="font-size: 11px; color: var(--gray-600); line-height: 1.6;">
-                    <div><strong>ID:</strong> <code style="font-size: 10px; background: white; padding: 2px 4px; border-radius: 2px;">${data.execution.executionId}</code></div>
-                    <div><strong>Thread:</strong> ${data.execution.threadId || 'N/A'}</div>
-                    <div><strong>Agent:</strong> ${data.execution.agentName || 'Unknown'}</div>
-                    ${data.execution.entityType ? `<div><strong>Entity:</strong> ${data.execution.entityType} - ${data.execution.entityValue || 'N/A'}</div>` : ''}
-                    ${data.execution.userId ? `<div><strong>User:</strong> ${data.execution.userId}</div>` : ''}
-                    <div><strong>Total Traces:</strong> ${data.execution.totalTraces}</div>
-                    <div><strong>Started:</strong> ${new Date(data.execution.startedAt).toLocaleTimeString()}</div>
-                </div>
-            </div>
-            <div style="margin-bottom: 8px; font-weight: 600; font-size: 13px;">🔍 Trace Hierarchy</div>
-            <div class="trace-details-tree">
-                ${renderTraceTree(data.traces)}
-            </div>
-        `;
-        
-        panel.style.display = 'block';
-    }
-    
-    function renderTraceTree(traces, depth = 0) {
-        if (!traces || traces.length === 0) return '<div style="color: var(--gray-500); font-size: 11px;">No traces</div>';
-        
-        return traces.map(trace => {
-            const metadata = trace.metadata || {};
-            const hasDetails = trace.input || trace.output || Object.keys(metadata).length > 0;
-            
-            return `
-            <div class="trace-node ${trace.status}" style="margin-left: ${depth * 8}px;">
-                <div class="trace-node-header">
-                    <span style="color: var(--gray-800);">
-                        ${getTraceIcon(trace.type)} ${trace.type || trace.operation}
-                    </span>
-                    <span style="font-size: 10px; font-weight: normal; color: var(--gray-600);">
-                        ${trace.duration || 0}ms
-                    </span>
-                </div>
-                <div class="trace-node-meta">
-                    <div><strong>Operation:</strong> ${trace.operation}</div>
-                    <div><strong>Status:</strong> <span style="color: ${trace.status === 'success' ? 'var(--success)' : 'var(--error)'};">${trace.status}</span></div>
-                    ${trace.error ? `<div style="color: var(--error);"><strong>Error:</strong> ${trace.error}</div>` : ''}
-                </div>
-                
-                ${hasDetails ? `
-                    <details style="margin-top: 8px; font-size: 10px;">
-                        <summary style="cursor: pointer; color: var(--primary); font-weight: 500;">
-                            📄 View Details
-                        </summary>
-                        <div style="margin-top: 8px; padding: 8px; background: white; border-radius: 4px; border: 1px solid var(--gray-200);">
-                            ${trace.input ? `
-                                <div style="margin-bottom: 8px;">
-                                    <strong style="color: var(--gray-700);">Input:</strong>
-                                    <pre style="margin: 4px 0; padding: 6px; background: var(--gray-50); border-radius: 3px; overflow-x: auto; font-size: 10px; line-height: 1.4;">${JSON.stringify(trace.input, null, 2)}</pre>
-                                </div>
-                            ` : ''}
-                            ${trace.output ? `
-                                <div style="margin-bottom: 8px;">
-                                    <strong style="color: var(--gray-700);">Output:</strong>
-                                    <pre style="margin: 4px 0; padding: 6px; background: var(--gray-50); border-radius: 3px; overflow-x: auto; font-size: 10px; line-height: 1.4;">${JSON.stringify(trace.output, null, 2)}</pre>
-                                </div>
-                            ` : ''}
-                            ${Object.keys(metadata).length > 0 ? `
-                                <div>
-                                    <strong style="color: var(--gray-700);">Metadata:</strong>
-                                    <pre style="margin: 4px 0; padding: 6px; background: var(--gray-50); border-radius: 3px; overflow-x: auto; font-size: 10px; line-height: 1.4;">${JSON.stringify(metadata, null, 2)}</pre>
-                                </div>
-                            ` : ''}
-                        </div>
-                    </details>
-                ` : ''}
-                
-                ${trace.children && trace.children.length > 0 ? `
-                    <div class="trace-children">
-                        ${renderTraceTree(trace.children, depth + 1)}
-                    </div>
-                ` : ''}
-            </div>
-        `}).join('');
-    }
-    
-    function getTraceIcon(type) {
-        const icons = {
-            'agent_execution': '🤖',
-            'llm_call': '💬',
-            'tool_call': '🔧',
-            'memory_operation': '🧠',
-            'workflow_execution': '🔄',
-            'workflow_step': '📍',
-            'connector_call': '🔌',
-            'vector_search': '🔍',
-        };
-        return icons[type] || '📝';
-    }
-    
-    async function clearTraces() {
-        if (!confirm('Clear all local traces?')) return;
-        
-        try {
-            await APIClient.delete('/api/traces');
-            loadTraces();
-            document.getElementById('traceDetailsPanel').style.display = 'none';
-            UIComponents.Toast.show('Traces cleared', 'success');
-        } catch (error) {
-            UIComponents.Toast.show('Failed to clear traces', 'error');
-        }
-    }
-    
-    return {
-        loadTraces,
-        viewThread,
-        viewExecution,
-        clearTraces
-    };
-});
-
-// ============================================================================
-// Main Application - Bootstrap and Initialization
-// ============================================================================
-
-Runflow.define('App', ['EventBus', 'StateManager', 'ChatManager', 'ScenarioManager', 'ConnectionMonitor', 'UIComponents', 'TracesManager'],
-    (EventBus, StateManager, ChatManager, ScenarioManager, ConnectionMonitor, UIComponents, TracesManager) => {
-    
-    let initialized = false;
-    const dom = {};
-    
-    function init() {
-        if (initialized) return;
-        
-        console.log('🚀 Runflow Test Interface v2.0 - Initializing...');
-        
-        setupDOM();
-        setupEventHandlers();
-        setupKeyboardShortcuts();
-        setupTracesPanel();
-        loadSettings();
-        
-        // Start services
-        ConnectionMonitor.start();
-        ScenarioManager.loadScenarios();
-        
-        updateUI();
-        
-        initialized = true;
-        
-        console.log('✅ Application ready');
-        
-        // Development helpers
-        if (window.location.hostname === 'localhost') {
-            window.RunflowDebug = {
-                state: StateManager,
-                events: EventBus,
-                modules: Runflow
-            };
-            console.log('Debug tools available at window.RunflowDebug');
-        }
-    }
-    
-    function setupDOM() {
-        // Cache DOM elements
-        dom.messageForm = document.getElementById('messageForm');
-        dom.messageInput = document.getElementById('messageInput');
-        dom.sendButton = document.getElementById('sendButton');
-        dom.clearBtn = document.getElementById('clearBtn');
-        dom.refreshBtn = document.getElementById('refreshBtn');
-        dom.exportBtn = document.getElementById('exportBtn');
-        dom.clearAllBtn = document.getElementById('clearAllBtn');
-        dom.payloadInput = document.getElementById('payloadInput');
-        dom.customPayloadSection = document.getElementById('customPayloadSection');
-        
-        // Update project info
-        const projectName = new URLSearchParams(window.location.search).get('project') || 'Runflow Project';
-        document.getElementById('projectName').textContent = projectName.split('/').pop();
-        document.getElementById('backendUrl').textContent = Runflow.get('Config').api.baseURL.replace('http://', '');
-        document.getElementById('sessionId').textContent = StateManager.get('session.id').split('-').pop();
-    }
-    
-    function setupEventHandlers() {
-        // Form submission
-        dom.messageForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            handleMessageSubmit();
-        });
-        
-        // Clear button
-        dom.clearBtn.addEventListener('click', () => {
-            dom.messageInput.value = '';
-            dom.messageInput.focus();
-        });
-        
-        // Control buttons
-        dom.refreshBtn.addEventListener('click', () => ConnectionMonitor.checkHealth());
-        dom.exportBtn.addEventListener('click', () => ChatManager.exportChat());
-        dom.clearAllBtn.addEventListener('click', () => {
-            if (confirm('Clear all messages?')) {
-                ChatManager.clearAll();
-            }
-        });
-        
-        // Test mode toggle
-        document.querySelectorAll('input[name="testMode"]').forEach(radio => {
-            radio.addEventListener('change', (e) => handleTestModeChange(e.target.value));
-        });
-        
-        // Scenario selection
-        document.getElementById('scenarioSelect').addEventListener('change', (e) => {
-            ScenarioManager.loadScenario(e.target.value);
-        });
-        
-        // Example buttons
-        document.querySelectorAll('.example-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const message = btn.getAttribute('data-message');
-                dom.messageInput.value = message;
-                dom.messageInput.focus();
-            });
-        });
-        
-        // Sidebar tabs
-        document.querySelectorAll('.sidebar-tab').forEach(tab => {
-            tab.addEventListener('click', () => {
-                const tabName = tab.dataset.tab;
-                switchTab(tabName);
-            });
-        });
-        
-        // State change listeners
-        StateManager.subscribe('session.messageCount', count => {
-            document.getElementById('messageCount').textContent = count;
-        });
-        
-        StateManager.subscribe('session.lastResponseTime', time => {
-            if (time) {
-                document.getElementById('lastResponse').textContent = `${time}ms`;
-            }
-        });
-        
-        StateManager.subscribe('ui.loading', loading => {
-            dom.sendButton.disabled = loading;
-            const spinner = dom.sendButton.querySelector('.spinner');
-            const text = dom.sendButton.querySelector('span');
-            if (spinner && text) {
-                spinner.style.display = loading ? 'block' : 'none';
-                text.style.display = loading ? 'none' : 'inline';
-            }
-        });
-        
-        // Event bus listeners
-        EventBus.on('message:sent', () => {
-            dom.messageInput.value = '';
-        });
-    }
-    
-    function setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-            // Ctrl/Cmd + Enter to send
-            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                e.preventDefault();
-                dom.messageForm.dispatchEvent(new Event('submit'));
-            }
-            
-            // Ctrl/Cmd + L to clear chat
-            if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
-                e.preventDefault();
-                ChatManager.clearAll();
-            }
-            
-            // Escape to clear input
-            if (e.key === 'Escape') {
-                dom.messageInput.value = '';
-                dom.messageInput.focus();
-            }
-        });
-    }
-    
-    function handleMessageSubmit() {
-        const mode = StateManager.get('ui.testMode');
-        const content = dom.messageInput.value.trim();
-        
-        if (mode === 'simple') {
-            if (!content) return;
-            ChatManager.sendMessage(content);
-        } else {
-            const payload = dom.payloadInput.value.trim();
-            if (!payload) {
-                UIComponents.Toast.show('Please enter a JSON payload', 'warning');
-                return;
-            }
-            
-            try {
-                JSON.parse(payload);
-                ChatManager.sendMessage(content, 'custom', payload);
-            } catch (error) {
-                UIComponents.Toast.show('Invalid JSON payload', 'error');
-            }
-        }
-    }
-    
-    function handleTestModeChange(mode) {
-        StateManager.set('ui.testMode', mode);
-        dom.customPayloadSection.style.display = mode === 'custom' ? 'block' : 'none';
-        dom.messageInput.placeholder = mode === 'simple' 
-            ? 'Type your message...' 
-            : 'Optional: Add context message for the payload...';
-    }
-    
-    function setupTracesPanel() {
-        // Refresh traces button
-        const refreshTracesBtn = document.getElementById('refreshTracesBtn');
-        if (refreshTracesBtn) {
-            refreshTracesBtn.addEventListener('click', () => {
-                TracesManager.loadTraces();
-                UIComponents.Toast.show('Traces refreshed', 'success');
-            });
-        }
-        
-        // Clear traces button
-        const clearTracesBtn = document.getElementById('clearTracesBtn');
-        if (clearTracesBtn) {
-            clearTracesBtn.addEventListener('click', () => {
-                TracesManager.clearTraces();
-            });
-        }
-        
-        // Close details button
-        const closeDetailsBtn = document.getElementById('closeDetailsBtn');
-        if (closeDetailsBtn) {
-            closeDetailsBtn.addEventListener('click', () => {
-                document.getElementById('traceDetailsPanel').style.display = 'none';
-            });
-        }
-    }
-    
-    function switchTab(tabName) {
-        // Update tab buttons
-        document.querySelectorAll('.sidebar-tab').forEach(tab => {
-            tab.classList.toggle('active', tab.dataset.tab === tabName);
-        });
-        
-        // Update tab content
-        document.querySelectorAll('.tab-content').forEach(content => {
-            content.classList.toggle('active', content.dataset.tabContent === tabName);
-        });
-        
-        // Load traces if switching to traces tab
-        if (tabName === 'traces') {
-            TracesManager.loadTraces();
-        }
-    }
-    
-    function updateUI() {
-        document.getElementById('messageCount').textContent = StateManager.get('session.messageCount');
-        dom.messageInput.focus();
-    }
-    
-    function loadSettings() {
-        try {
-            const settings = localStorage.getItem('runflow-display-settings');
-            if (settings) {
-                const parsed = JSON.parse(settings);
-                if (document.getElementById('showJsonToggle')) {
-                    document.getElementById('showJsonToggle').checked = parsed.showJsonToggle !== false;
-                }
-                if (document.getElementById('autoExpandJson')) {
-                    document.getElementById('autoExpandJson').checked = parsed.autoExpandJson === true;
-                }
-                if (document.getElementById('showMetadata')) {
-                    document.getElementById('showMetadata').checked = parsed.showMetadata !== false;
-                }
-                if (document.getElementById('responsePath') && parsed.responsePath) {
-                    document.getElementById('responsePath').value = parsed.responsePath;
-                }
-            }
-        } catch (error) {
-            console.warn('Failed to load settings:', error);
-        }
-        
-        // Setup settings change handlers
-        ['showJsonToggle', 'autoExpandJson', 'showMetadata'].forEach(id => {
-            const element = document.getElementById(id);
-            if (element) {
-                element.addEventListener('change', saveSettings);
-            }
-        });
-        
-        // Setup response path change handler
-        const responsePathElement = document.getElementById('responsePath');
-        if (responsePathElement) {
-            responsePathElement.addEventListener('input', saveSettings);
-        }
-    }
-    
-    function saveSettings() {
-        try {
-            const settings = {
-                showJsonToggle: document.getElementById('showJsonToggle')?.checked,
-                autoExpandJson: document.getElementById('autoExpandJson')?.checked,
-                showMetadata: document.getElementById('showMetadata')?.checked,
-                responsePath: document.getElementById('responsePath')?.value || 'data.message'
-            };
-            localStorage.setItem('runflow-display-settings', JSON.stringify(settings));
-        } catch (error) {
-            console.warn('Failed to save settings:', error);
-        }
-    }
-    
-    return {
-        init
-    };
-});
-
-// ============================================================================
-// Application Entry Point
-// ============================================================================
-
-document.addEventListener('DOMContentLoaded', () => {
-    const App = Runflow.get('App');
-    App.init();
-});