@memberjunction/react-test-harness 2.90.0 → 2.92.0

package/dist/lib/component-runner.js

@@ -1,22 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentRunner = void 0;
-const react_runtime_1 = require("@memberjunction/react-runtime");
 const core_1 = require("@memberjunction/core");
 const component_linter_1 = require("./component-linter");
+const core_entities_1 = require("@memberjunction/core-entities");
+/**
+ * ComponentRunner that uses the actual React runtime via Playwright UMD bundle
+ */
 class ComponentRunner {
     constructor(browserManager) {
         this.browserManager = browserManager;
-        this.compiler = new react_runtime_1.ComponentCompiler();
-        this.registry = new react_runtime_1.ComponentRegistry();
-        // Set up runtime context (will be populated in browser)
-        this.runtimeContext = {};
     }
     /**
      * Lint component code before execution
      */
-    async lintComponent(componentCode, componentName, componentSpec, isRootComponent) {
-        const lintResult = await component_linter_1.ComponentLinter.lintComponent(componentCode, componentName, componentSpec, isRootComponent);
+    async lintComponent(componentCode, componentName, componentSpec, isRootComponent, contextUser) {
+        const lintResult = await component_linter_1.ComponentLinter.lintComponent(componentCode, componentName, componentSpec, isRootComponent, contextUser);
         const hasErrors = lintResult.violations.some(v => v.severity === 'critical' || v.severity === 'high');
         return {
             violations: lintResult.violations,
@@ -30,65 +52,454 @@ class ComponentRunner {
         const warnings = [];
         const criticalWarnings = [];
         const consoleLogs = [];
+        const dataErrors = []; // Track data access errors from RunView/RunQuery
         let renderCount = 0;
-        // Default debug to true
-        const debug = options.debug !== false;
+        const debug = options.debug !== false; // Default to true for debugging
+        const globalTimeout = options.timeout || 30000; // Default 30 seconds total timeout
         if (debug) {
             console.log('\n🔍 === Component Execution Debug Mode ===');
             console.log('Component:', options.componentSpec.name);
             console.log('Props:', JSON.stringify(options.props || {}, null, 2));
         }
+        // Get a fresh page for this test execution
+        const page = await this.browserManager.getPage();
+        // Set default timeout for all page operations (Recommendation #2)
+        page.setDefaultTimeout(globalTimeout);
+        // Load component metadata and libraries first (needed for library loading)
+        await core_entities_1.ComponentMetadataEngine.Instance.Config(false, options.contextUser);
+        const allLibraries = core_entities_1.ComponentMetadataEngine.Instance.ComponentLibraries.map(c => c.GetAll());
         try {
-            const page = await this.browserManager.getPage();
-            // Clear the page before each test for isolation
+            // Navigate to a blank page FIRST, then load runtime
             await page.goto('about:blank');
-            // Expose MJ utilities to the page
-            await this.exposeMJUtilities(page, options.contextUser);
-            // Then set up monitoring
+            // Set up the basic HTML structure
+            await page.setContent(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <title>React Component Test (V2)</title>
+          <style>
+            body { 
+              margin: 0; 
+              padding: 20px; 
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            }
+            #root { 
+              min-height: 100vh;
+              background-color: white;
+              padding: 20px;
+            }
+          </style>
+        </head>
+        <body>
+          <div id="root" data-testid="react-root"></div>
+        </body>
+        </html>
+      `);
+            // Always load runtime libraries after setting content
+            // This ensures they persist in the current page context
+            // allLibraries is loaded above from ComponentMetadataEngine
+            await this.loadRuntimeLibraries(page, options.componentSpec, allLibraries, debug);
+            // Verify the runtime is actually loaded
+            const runtimeCheck = await page.evaluate(() => {
+                return {
+                    hasMJRuntime: typeof window.MJReactRuntime !== 'undefined',
+                    hasReact: typeof window.React !== 'undefined',
+                    hasReactDOM: typeof window.ReactDOM !== 'undefined',
+                    hasBabel: typeof window.Babel !== 'undefined',
+                    mjRuntimeKeys: window.MJReactRuntime ? Object.keys(window.MJReactRuntime) : []
+                };
+            });
+            if (debug) {
+                console.log('Runtime loaded successfully');
+            }
+            if (!runtimeCheck.hasMJRuntime) {
+                throw new Error('Failed to inject MJReactRuntime into page context');
+            }
+            // Set up error tracking
+            await this.setupErrorTracking(page);
+            // Set up console logging
             this.setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings);
-            this.setupErrorHandling(page, errors);
-            await this.injectRenderTracking(page);
-            // Create and load the component
-            const htmlContent = this.createHTMLTemplate(options);
-            await page.goto(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
-            // Wait for render with timeout detection
-            const renderSuccess = await this.waitForRender(page, options, errors);
+            // Expose MJ utilities to the page
+            await this.exposeMJUtilities(page, options, dataErrors, debug);
+            if (debug) {
+                console.log('📤 NODE: About to call page.evaluate with:');
+                console.log('  - spec.name:', options.componentSpec.name);
+                console.log('  - spec.code length:', options.componentSpec.code?.length || 0);
+                console.log('  - props:', JSON.stringify(options.props || {}, null, 2));
+                console.log('  - componentLibraries count:', allLibraries?.length || 0);
+                if (allLibraries && allLibraries.length > 0) {
+                    console.log('  - First few libraries:', allLibraries.slice(0, 3).map(lib => ({
+                        Name: lib.Name,
+                        GlobalVariable: lib.GlobalVariable
+                    })));
+                }
+            }
+            // Execute the component using the real React runtime with timeout (Recommendation #1)
+            const executionPromise = page.evaluate(async ({ spec, props, debug, componentLibraries }) => {
+                if (debug) {
+                    console.log('🎯 Starting component execution');
+                    console.log('📚 BROWSER: Received componentLibraries:', componentLibraries?.length || 0);
+                    if (componentLibraries?.length > 0) {
+                        console.log('  First library:', componentLibraries[0]);
+                    }
+                }
+                // Declare renderCheckInterval at the top scope for cleanup
+                let renderCheckInterval;
+                try {
+                    // Access the real runtime classes
+                    const MJRuntime = window.MJReactRuntime;
+                    if (!MJRuntime) {
+                        throw new Error('React runtime not loaded');
+                    }
+                    const { ComponentCompiler, ComponentRegistry, ComponentHierarchyRegistrar, SetupStyles } = MJRuntime;
+                    if (debug) {
+                        console.log('🚀 Starting component execution with real runtime');
+                        console.log('Available runtime classes:', Object.keys(MJRuntime));
+                    }
+                    // Initialize LibraryRegistry if needed
+                    // Note: In test environment, we may not have full database access
+                    // so libraries are handled by the runtime internally
+                    // Build libraries object from loaded libraries
+                    const loadedLibraries = {};
+                    if (spec.libraries && componentLibraries) {
+                        for (const specLib of spec.libraries) {
+                            // Find the library definition
+                            const libDef = componentLibraries.find(l => l.Name.toLowerCase() === specLib.name.toLowerCase());
+                            if (libDef && libDef.GlobalVariable) {
+                                // Check if the library is available as a global
+                                const libraryValue = window[libDef.GlobalVariable];
+                                if (libraryValue) {
+                                    loadedLibraries[libDef.GlobalVariable] = libraryValue;
+                                    if (debug) {
+                                        console.log(`📦 Added ${libDef.Name} to runtime context as ${libDef.GlobalVariable}`);
+                                    }
+                                }
+                                else {
+                                    console.warn(`⚠️ Library ${libDef.Name} global variable ${libDef.GlobalVariable} not found on window`);
+                                }
+                            }
+                        }
+                    }
+                    // Create runtime context with loaded libraries
+                    const runtimeContext = {
+                        React: window.React,
+                        ReactDOM: window.ReactDOM,
+                        libraries: loadedLibraries
+                    };
+                    // Create instances
+                    const compiler = new ComponentCompiler();
+                    compiler.setBabelInstance(window.Babel);
+                    // IMPORTANT: Configure the LibraryRegistry in the browser context
+                    // This is needed for the compiler to know about approved libraries
+                    if (window.MJReactRuntime && window.MJReactRuntime.LibraryRegistry) {
+                        const { LibraryRegistry } = window.MJReactRuntime;
+                        // Configure the registry with the component libraries
+                        // Note: LibraryRegistry.Config expects ComponentLibraryEntity[]
+                        await LibraryRegistry.Config(false, componentLibraries || []);
+                        if (debug) {
+                            console.log('⚙️ Configured LibraryRegistry with', componentLibraries?.length || 0, 'libraries');
+                        }
+                    }
+                    const registry = new ComponentRegistry();
+                    const registrar = new ComponentHierarchyRegistrar(compiler, registry, runtimeContext);
+                    // Use the utilities we already created with mock metadata
+                    // Don't call createRuntimeUtilities() as it tries to create new Metadata() which fails
+                    const utilities = window.__mjUtilities;
+                    if (!utilities) {
+                        throw new Error('Utilities not found - exposeMJUtilities may have failed');
+                    }
+                    const styles = SetupStyles();
+                    if (debug) {
+                        console.log('📦 Registering component hierarchy...');
+                    }
+                    // CRITICAL: Ensure spec.libraries have globalVariable set from componentLibraries
+                    // The spec might not have globalVariable, but we need it for the runtime to work
+                    if (spec.libraries && componentLibraries) {
+                        for (const specLib of spec.libraries) {
+                            if (!specLib.globalVariable) {
+                                const libDef = componentLibraries.find(l => l.Name.toLowerCase() === specLib.name.toLowerCase());
+                                if (libDef && libDef.GlobalVariable) {
+                                    specLib.globalVariable = libDef.GlobalVariable;
+                                    if (debug) {
+                                        console.log(`  📝 Enhanced spec library ${specLib.name} with globalVariable: ${libDef.GlobalVariable}`);
+                                    }
+                                }
+                            }
+                        }
+                        if (debug) {
+                            console.log('🔍 Spec libraries after enhancement:', spec.libraries.map((l) => ({
+                                name: l.name,
+                                globalVariable: l.globalVariable
+                            })));
+                        }
+                    }
+                    // Register the component hierarchy with error capture
+                    // IMPORTANT: Pass component libraries for library loading to work
+                    if (debug) {
+                        console.log('📚 Registering component with', componentLibraries?.length || 0, 'libraries');
+                        if (componentLibraries?.length > 0) {
+                            console.log('  Passing libraries to registrar:', componentLibraries.slice(0, 2).map((l) => l.Name));
+                        }
+                    }
+                    let registrationResult;
+                    try {
+                        registrationResult = await registrar.registerHierarchy(spec, {
+                            styles,
+                            namespace: 'Global',
+                            version: 'v1', // Use v1 to match the registry defaults
+                            allLibraries: componentLibraries || [] // Pass the component libraries for LibraryRegistry
+                        });
+                    }
+                    catch (registrationError) {
+                        // Capture the actual error before it gets obscured
+                        console.error('🔴 Component registration error:', registrationError);
+                        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                        window.__testHarnessRuntimeErrors.push({
+                            message: `Component registration failed: ${registrationError.message || registrationError}`,
+                            stack: registrationError.stack,
+                            type: 'registration-error',
+                            phase: 'component-compilation'
+                        });
+                        window.__testHarnessTestFailed = true;
+                        throw registrationError; // Re-throw for outer handler
+                    }
+                    if (debug && !registrationResult.success) {
+                        console.log('❌ Registration failed:', registrationResult.errors);
+                    }
+                    if (!registrationResult.success) {
+                        throw new Error('Component registration failed: ' + JSON.stringify(registrationResult.errors));
+                    }
+                    if (debug) {
+                        console.log('📝 Registered components:', registrationResult.registeredComponents);
+                        // Note: ComponentRegistry doesn't expose internal components Map directly
+                        // We can see what was registered through the registrationResult
+                    }
+                    // Get the root component - explicitly pass namespace and version
+                    const RootComponent = registry.get(spec.name, 'Global', 'v1');
+                    if (!RootComponent) {
+                        // Enhanced error message with debugging info
+                        console.error('Failed to find component:', spec.name);
+                        console.error('Registry keys:', Array.from(registry.components.keys()));
+                        throw new Error('Root component not found: ' + spec.name);
+                    }
+                    // Get all registered components for prop passing
+                    const components = registry.getAll('Global', 'v1');
+                    // Add all loaded library exports to the components object
+                    // This allows generated code to use components.PieChart, components.ResponsiveContainer, etc.
+                    // for libraries that export components (like Recharts)
+                    for (const [globalVar, libraryValue] of Object.entries(loadedLibraries)) {
+                        if (typeof libraryValue === 'object' && libraryValue !== null) {
+                            // If the library exports an object with multiple components, spread them
+                            Object.assign(components, libraryValue);
+                            if (debug) {
+                                console.log(`📦 Added ${globalVar} exports to components object`);
+                            }
+                        }
+                    }
+                    // Render the component
+                    const rootElement = document.getElementById('root');
+                    if (!rootElement) {
+                        throw new Error('Root element not found');
+                    }
+                    const root = window.ReactDOM.createRoot(rootElement);
+                    // Set up render count protection
+                    // This is for detecting infinite loops during execution
+                    // Note: counts createElement calls, not re-renders
+                    const MAX_RENDERS_ALLOWED = 10000; // Complex dashboards can have many createElement calls
+                    if (typeof window !== 'undefined') {
+                        renderCheckInterval = setInterval(() => {
+                            const currentRenderCount = window.__testHarnessRenderCount || 0;
+                            if (currentRenderCount > MAX_RENDERS_ALLOWED) {
+                                clearInterval(renderCheckInterval);
+                                // Mark test as failed due to excessive renders
+                                window.__testHarnessTestFailed = true;
+                                window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                                window.__testHarnessRuntimeErrors.push({
+                                    message: `Likely infinite render loop: ${currentRenderCount} createElement calls (max: ${MAX_RENDERS_ALLOWED})`,
+                                    type: 'render-loop'
+                                });
+                                // Try to unmount to stop the madness
+                                try {
+                                    root.unmount();
+                                }
+                                catch (e) {
+                                    console.error('Failed to unmount after render loop:', e);
+                                }
+                                throw new Error(`Likely infinite render loop: ${currentRenderCount} createElement calls detected`);
+                            }
+                        }, 100); // Check every 100ms
+                    }
+                    // Build complete props
+                    const componentProps = {
+                        ...props,
+                        utilities,
+                        styles,
+                        components,
+                        savedUserSettings: {},
+                        onSaveUserSettings: (settings) => {
+                            console.log('User settings saved:', settings);
+                        }
+                    };
+                    if (debug) {
+                        console.log('🎨 Rendering component with props:', Object.keys(componentProps));
+                    }
+                    // Create error boundary wrapper
+                    const ErrorBoundary = class extends window.React.Component {
+                        constructor(props) {
+                            super(props);
+                            this.state = { hasError: false, error: null };
+                        }
+                        static getDerivedStateFromError(error) {
+                            // Capture the actual error message IMMEDIATELY
+                            window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                            window.__testHarnessRuntimeErrors.push({
+                                message: error.message || error.toString(),
+                                stack: error.stack,
+                                type: 'react-render-error',
+                                phase: 'component-render'
+                            });
+                            window.__testHarnessTestFailed = true;
+                            return { hasError: true, error };
+                        }
+                        componentDidCatch(error, errorInfo) {
+                            console.error('React Error Boundary caught:', error, errorInfo);
+                            // Update the last error with component stack info
+                            const errors = window.__testHarnessRuntimeErrors || [];
+                            if (errors.length > 0) {
+                                const lastError = errors[errors.length - 1];
+                                if (lastError.type === 'react-render-error') {
+                                    lastError.componentStack = errorInfo.componentStack;
+                                }
+                            }
+                        }
+                        render() {
+                            if (this.state.hasError) {
+                                // DON'T re-throw - this causes "Script error"
+                                // Instead, render an error message
+                                return window.React.createElement('div', { style: { color: 'red', padding: '20px' } }, 'Component failed to render: ' + (this.state.error?.message || 'Unknown error'));
+                            }
+                            return this.props.children;
+                        }
+                    };
+                    // Render with error boundary
+                    root.render(window.React.createElement(ErrorBoundary, null, window.React.createElement(RootComponent, componentProps)));
+                    // Clear the render check interval since we succeeded
+                    if (renderCheckInterval) {
+                        clearInterval(renderCheckInterval);
+                    }
+                    if (debug) {
+                        console.log('✅ Component rendered successfully');
+                    }
+                    return {
+                        success: true,
+                        componentCount: registrationResult.registeredComponents.length
+                    };
+                }
+                catch (error) {
+                    // Clean up render check interval if it exists
+                    if (typeof renderCheckInterval !== 'undefined' && renderCheckInterval) {
+                        clearInterval(renderCheckInterval);
+                    }
+                    console.error('🔴 BROWSER: Component execution failed:', error);
+                    console.error('🔴 BROWSER: Error stack:', error.stack);
+                    console.error('🔴 BROWSER: Error type:', typeof error);
+                    console.error('🔴 BROWSER: Error stringified:', JSON.stringify(error, null, 2));
+                    window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                    window.__testHarnessRuntimeErrors.push({
+                        message: error.message || String(error),
+                        stack: error.stack,
+                        type: 'execution-error'
+                    });
+                    window.__testHarnessTestFailed = true;
+                    return {
+                        success: false,
+                        error: error.message || String(error)
+                    };
+                }
+            }, {
+                spec: options.componentSpec,
+                props: options.props,
+                debug,
+                componentLibraries: allLibraries || []
+            });
+            // Create timeout promise (Recommendation #1)
+            const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error(`Component execution timeout after ${globalTimeout}ms`)), globalTimeout));
+            // Race between execution and timeout
+            let executionResult;
+            try {
+                executionResult = await Promise.race([executionPromise, timeoutPromise]);
+            }
+            catch (timeoutError) {
+                // Handle timeout gracefully
+                errors.push(`Component execution timed out after ${globalTimeout}ms`);
+                executionResult = {
+                    success: false,
+                    error: timeoutError instanceof Error ? timeoutError.message : 'Execution timeout'
+                };
+            }
+            if (debug) {
+                console.log('Execution result:', executionResult);
+            }
+            // Wait for render completion
+            const renderWaitTime = options.renderWaitTime || 500;
+            await page.waitForTimeout(renderWaitTime);
             // Get render count
-            renderCount = await this.getRenderCount(page);
-            // Collect runtime errors
+            renderCount = await page.evaluate(() => window.__testHarnessRenderCount || 0);
+            // Collect all errors
             const runtimeErrors = await this.collectRuntimeErrors(page);
             errors.push(...runtimeErrors);
-            // Capture async errors only if wait time is specified
-            if (options.asyncErrorWaitTime && options.asyncErrorWaitTime > 0) {
-                const asyncErrors = await this.captureAsyncErrors(page, options.asyncErrorWaitTime);
-                errors.push(...asyncErrors);
-            }
-            // Perform deep render validation
-            const deepRenderErrors = await this.validateDeepRender(page);
-            errors.push(...deepRenderErrors);
+            // Collect warnings (separate from errors)
+            const collectedWarnings = await this.collectWarnings(page);
+            warnings.push(...collectedWarnings);
+            // Capture async errors
+            const asyncWaitTime = options.asyncErrorWaitTime || 1000;
+            await page.waitForTimeout(asyncWaitTime);
+            const asyncErrors = await this.collectRuntimeErrors(page);
+            // Only add new errors
+            asyncErrors.forEach(err => {
+                if (!errors.includes(err)) {
+                    errors.push(err);
+                }
+            });
+            // Also check for new warnings
+            const asyncWarnings = await this.collectWarnings(page);
+            asyncWarnings.forEach(warn => {
+                if (!warnings.includes(warn)) {
+                    warnings.push(warn);
+                }
+            });
             // Get the rendered HTML
             const html = await page.content();
-            // Take screenshot if needed
+            // Take screenshot
             const screenshot = await page.screenshot();
-            // Determine success and collect any additional errors
-            const { success, additionalErrors } = this.determineSuccess(errors, criticalWarnings, renderCount, !renderSuccess);
-            // Add any additional errors
-            errors.push(...additionalErrors);
+            // Determine success
+            const success = errors.length === 0 &&
+                criticalWarnings.length === 0 &&
+                renderCount <= ComponentRunner.MAX_RENDER_COUNT &&
+                executionResult.success;
+            if (renderCount > ComponentRunner.MAX_RENDER_COUNT) {
+                errors.push(`Possible render loop: ${renderCount} createElement calls detected (likely infinite loop)`);
+            }
+            // Combine runtime errors with data errors
+            const allErrors = [...errors, ...dataErrors];
             const result = {
-                success,
+                success: success && dataErrors.length === 0, // Fail if we have data errors
                 html,
-                errors: errors.map(e => {
-                    return {
-                        message: e,
-                        severity: 'critical'
-                    }; // Ensure Violation type
-                }),
-                warnings: warnings.map(w => {
-                    return {
-                        message: w,
-                        severity: 'low'
-                    }; // Ensure Violation type
-                }),
+                errors: allErrors.map(e => ({
+                    message: e,
+                    severity: 'critical',
+                    rule: 'runtime-error',
+                    line: 0,
+                    column: 0
+                })),
+                warnings: warnings.map(w => ({
+                    message: w,
+                    severity: 'low',
+                    rule: 'warning',
+                    line: 0,
+                    column: 0
+                })),
                 criticalWarnings,
                 console: consoleLogs,
                 screenshot,
@@ -102,21 +513,25 @@ class ComponentRunner {
         }
         catch (error) {
             errors.push(error instanceof Error ? error.message : String(error));
+            // Combine runtime errors with data errors
+            const allErrors = [...errors, ...dataErrors];
             const result = {
                 success: false,
                 html: '',
-                errors: errors.map(e => {
-                    return {
-                        message: e,
-                        severity: 'critical'
-                    }; // Ensure Violation type
-                }),
-                warnings: warnings.map(w => {
-                    return {
-                        message: w,
-                        severity: 'low'
-                    }; // Ensure Violation type
-                }),
+                errors: allErrors.map(e => ({
+                    message: e,
+                    severity: 'critical',
+                    rule: 'runtime-error',
+                    line: 0,
+                    column: 0
+                })),
+                warnings: warnings.map(w => ({
+                    message: w,
+                    severity: 'low',
+                    rule: 'warning',
+                    line: 0,
+                    column: 0
+                })),
                 criticalWarnings,
                 console: consoleLogs,
                 executionTime: Date.now() - startTime,
@@ -128,1011 +543,571 @@ class ComponentRunner {
             }
             return result;
         }
+        finally {
+            // Clean up: close the page after each test execution
+            // This is important because getPage() now creates a new page each time
+            // Closing the page ensures clean isolation between test runs
+            try {
+                await page.close();
+            }
+            catch (closeError) {
+                // Ignore errors when closing the page
+                if (debug) {
+                    console.log('Note: Error closing page (this is usually harmless):', closeError);
+                }
+            }
+        }
     }
     /**
-     * Dumps debug information to console for easier troubleshooting
+     * Load runtime libraries into the page
      */
-    dumpDebugInfo(result) {
-        console.log('\n📊 === Component Execution Results ===');
-        console.log('Success:', result.success ? '✅' : '❌');
-        console.log('Execution time:', result.executionTime + 'ms');
-        console.log('Render count:', result.renderCount);
-        if (result.console && result.console.length > 0) {
-            console.log('\n📝 Console Output:');
-            result.console.forEach(log => {
-                const icon = log.type === 'error' ? '❌' :
-                    log.type === 'warning' ? '⚠️' :
-                        log.type === 'log' ? '📝' : '💬';
-                console.log(`  ${icon} [${log.type}] ${log.text}`);
-            });
-        }
-        if (result.errors && result.errors.length > 0) {
-            console.log('\n❌ Errors:', result.errors.length);
-            result.errors.forEach((err, i) => {
-                const message = typeof err === 'string' ? err : err.message;
-                console.log(`  ${i + 1}. ${message}`);
-            });
+    async loadRuntimeLibraries(page, componentSpec, allLibraries, debug = false) {
+        // Helper function to load scripts with timeout (Recommendation #3)
+        const loadScriptWithTimeout = async (url, timeout = 10000) => {
+            try {
+                await Promise.race([
+                    page.addScriptTag({ url }),
+                    new Promise((_, reject) => setTimeout(() => reject(new Error(`Script load timeout: ${url}`)), timeout))
+                ]);
+            }
+            catch (error) {
+                throw new Error(`Failed to load script ${url}: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        };
+        // Load React and ReactDOM with timeout protection
+        await loadScriptWithTimeout('https://unpkg.com/react@18/umd/react.development.js');
+        await loadScriptWithTimeout('https://unpkg.com/react-dom@18/umd/react-dom.development.js');
+        // Load Babel for JSX transformation with timeout
+        await loadScriptWithTimeout('https://unpkg.com/@babel/standalone/babel.min.js');
+        // Load the real MemberJunction React Runtime UMD bundle
+        const fs = await Promise.resolve().then(() => __importStar(require('fs')));
+        // Resolve the path to the UMD bundle
+        const runtimePath = require.resolve('@memberjunction/react-runtime/dist/runtime.umd.js');
+        const runtimeBundle = fs.readFileSync(runtimePath, 'utf-8');
+        // Inject the UMD bundle into the page
+        await page.addScriptTag({ content: runtimeBundle });
+        // The UMD bundle should have created window.MJReactRuntime
+        // Let's verify and potentially add any test-harness specific overrides
+        await page.evaluate(() => {
+            // Check if MJReactRuntime was loaded from the UMD bundle
+            if (typeof window.MJReactRuntime === 'undefined') {
+                throw new Error('MJReactRuntime UMD bundle did not load correctly');
+            }
+            // The real runtime is now available!
+        });
+        // Verify everything loaded
+        const loaded = await page.evaluate(() => {
+            return {
+                React: typeof window.React !== 'undefined',
+                ReactDOM: typeof window.ReactDOM !== 'undefined',
+                Babel: typeof window.Babel !== 'undefined',
+                MJRuntime: typeof window.MJReactRuntime !== 'undefined'
+            };
+        });
+        // All libraries loaded successfully
+        if (!loaded.React || !loaded.ReactDOM || !loaded.Babel || !loaded.MJRuntime) {
+            throw new Error('Failed to load required libraries');
         }
-        if (result.warnings && result.warnings.length > 0) {
-            console.log('\n⚠️ Warnings:', result.warnings.length);
-            result.warnings.forEach((warn, i) => {
-                const message = typeof warn === 'string' ? warn : warn.message;
-                console.log(`  ${i + 1}. ${message}`);
-            });
+        // Load component-specific libraries from CDN
+        if (componentSpec?.libraries && allLibraries) {
+            await this.loadComponentLibraries(page, componentSpec.libraries, allLibraries, debug);
         }
-        if (result.criticalWarnings && result.criticalWarnings.length > 0) {
-            console.log('\n🔴 Critical Warnings:', result.criticalWarnings.length);
-            result.criticalWarnings.forEach((warn, i) => {
-                console.log(`  ${i + 1}. ${warn}`);
+    }
+    /**
+     * Load component-specific libraries from CDN
+     */
+    async loadComponentLibraries(page, specLibraries, allLibraries, debug = false) {
+        if (debug) {
+            console.log('📚 Loading component libraries:', {
+                count: specLibraries.length,
+                libraries: specLibraries.map(l => l.name)
             });
         }
-        if (result.html) {
-            const htmlPreview = result.html.substring(0, 200);
-            console.log('\n📄 HTML Preview:', htmlPreview + (result.html.length > 200 ? '...' : ''));
-        }
-        console.log('\n========================================\n');
-    }
-    createHTMLTemplate(options) {
-        const propsJson = JSON.stringify(options.props || {});
-        const specJson = JSON.stringify(options.componentSpec);
-        // Set configuration if provided
-        if (options.libraryConfiguration) {
-            react_runtime_1.StandardLibraryManager.setConfiguration(options.libraryConfiguration);
+        // Create a map of library definitions from allLibraries
+        const libraryMap = new Map();
+        for (const lib of allLibraries) {
+            libraryMap.set(lib.Name.toLowerCase(), lib);
         }
-        // Get all enabled libraries from configuration
-        const enabledLibraries = react_runtime_1.StandardLibraryManager.getEnabledLibraries();
-        // Separate runtime and component libraries
-        const runtimeLibraries = enabledLibraries.filter((lib) => lib.category === 'runtime');
-        const componentLibraries = enabledLibraries.filter((lib) => lib.category !== 'runtime');
-        // Generate script tags for runtime libraries
-        const runtimeScripts = runtimeLibraries
-            .map((lib) => `  <script crossorigin src="${lib.cdnUrl}"></script>`)
-            .join('\n');
-        // Generate script tags for component libraries
-        const componentScripts = componentLibraries
-            .map((lib) => `  <script src="${lib.cdnUrl}"></script>`)
-            .join('\n');
-        // Generate CSS links
-        const cssLinks = enabledLibraries
-            .filter((lib) => lib.cdnCssUrl)
-            .map((lib) => `  <link rel="stylesheet" href="${lib.cdnCssUrl}">`)
-            .join('\n');
-        // Include the ComponentCompiler class definition
-        const componentCompilerCode = this.getComponentCompilerCode();
-        return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>React Component Test</title>
-${runtimeScripts}
-${componentScripts}
-${cssLinks}
-  <style>
-    body { 
-      margin: 0; 
-      padding: 20px; 
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background-color: #f0f0f0; /* Light gray background to see contrast */
-    }
-    #root { 
-      min-height: 100vh;
-      background-color: white;
-      border: 2px solid #007bff;
-      padding: 20px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    }
-    .test-harness-header {
-      background-color: #28a745;
-      color: white;
-      padding: 10px;
-      margin-bottom: 20px;
-      border-radius: 5px;
-      font-weight: bold;
-      text-align: center;
-    }
-  </style>
-  <script>
-    // Initialize error and console tracking
-    window.__testHarnessRuntimeErrors = [];
-    window.__testHarnessConsoleLogs = [];
-    
-    // Track console output for async error detection
-    const originalConsoleError = console.error;
-    console.error = function(...args) {
-      window.__testHarnessConsoleLogs.push({
-        type: 'error',
-        text: args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')
-      });
-      originalConsoleError.apply(console, args);
-    };
-    
-    // Global error handler
-    window.addEventListener('error', (event) => {
-      console.error('Runtime error:', event.error);
-      window.__testHarnessRuntimeErrors.push({
-        message: event.error.message,
-        stack: event.error.stack,
-        type: 'runtime'
-      });
-    });
-    
-    // Unhandled promise rejection handler
-    window.addEventListener('unhandledrejection', (event) => {
-      console.error('Unhandled promise rejection:', event.reason);
-      window.__testHarnessRuntimeErrors.push({
-        message: 'Unhandled Promise Rejection: ' + (event.reason?.message || event.reason || 'Unknown reason'),
-        stack: event.reason?.stack || 'No stack trace available',
-        type: 'promise-rejection'
-      });
-      // Prevent the default handling (which would log to console)
-      event.preventDefault();
-    });
-    
-    // Render tracking injection
-    (function() {
-      let renderCounter = 0;
-      window.__testHarnessRenderCount = 0;
-      
-      // Wait for React to be available
-      const setupRenderTracking = () => {
-        if (window.React && window.React.createElement) {
-          const originalCreateElement = window.React.createElement.bind(window.React);
-          
-          window.React.createElement = function(type, props, ...children) {
-            renderCounter++;
-            window.__testHarnessRenderCount = renderCounter;
-            
-            if (renderCounter > 1000) {
-              console.error('Excessive renders detected: ' + renderCounter + ' renders. Possible infinite loop.');
+        // Load each library the component needs
+        for (const specLib of specLibraries) {
+            const libDef = libraryMap.get(specLib.name.toLowerCase());
+            if (!libDef) {
+                console.warn(`⚠️ Library ${specLib.name} not found in metadata`);
+                continue;
             }
-            
-            return originalCreateElement(type, props, ...children);
-          };
-        }
-      };
-      
-      // Try to set up immediately
-      setupRenderTracking();
-      
-      // Also try after a delay in case React loads later
-      setTimeout(setupRenderTracking, 100);
-    })();
-  </script>
-</head>
-<body>
-  <div class="test-harness-header">
-    🧪 React Test Harness - Component Loaded Successfully
-  </div>
-  <div id="root" data-testid="react-root">
-    <!-- Component will render here -->
-  </div>
-  <script type="text/babel">
-    // Immediate debug message
-    console.log('🚀 Test harness script started executing');
-    document.getElementById('root').innerHTML = '<div style="background: lime; padding: 20px; color: black; font-size: 18px;">📝 Script is running...</div>';
-    
-    ${options.setupCode || ''}
-    
-    // Create runtime context with dynamic libraries
-    const componentLibraries = ${JSON.stringify(componentLibraries.map((lib) => ({
-            globalVariable: lib.globalVariable,
-            displayName: lib.displayName
-        })))};
-    
-    const libraries = {};
-    componentLibraries.forEach(lib => {
-      if (window[lib.globalVariable]) {
-        libraries[lib.globalVariable] = window[lib.globalVariable];
-      }
-    });
-    
-    const runtimeContext = {
-      React: React,
-      ReactDOM: ReactDOM,
-      libraries: libraries
-    };
-    
-    // Import the ComponentCompiler implementation
-    ${componentCompilerCode}
-    
-    // Create component compiler instance
-    const compiler = new ComponentCompiler();
-    compiler.setBabelInstance(Babel);
-    
-    // Create component registry
-    class SimpleRegistry {
-      constructor() {
-        this.components = new Map();
-      }
-      
-      register(name, component, namespace = 'Global', version = 'v1') {
-        const key = \`\${namespace}/\${version}/\${name}\`;
-        this.components.set(key, component);
-      }
-      
-      get(name, namespace = 'Global', version = 'v1') {
-        const key = \`\${namespace}/\${version}/\${name}\`;
-        return this.components.get(key);
-      }
-      
-      getAll(namespace = 'Global', version = 'v1') {
-        const components = {};
-        const prefix = \`\${namespace}/\${version}/\`;
-        this.components.forEach((component, key) => {
-          if (key.startsWith(prefix)) {
-            const name = key.substring(prefix.length);
-            components[name] = component;
-          }
-        });
-        return components;
-      }
-    }
-    
-    // Create registry instance
-    const registry = new SimpleRegistry();
-    
-    // Create hierarchy registrar
-    class SimpleHierarchyRegistrar {
-      constructor(compiler, registry, runtimeContext) {
-        this.compiler = compiler;
-        this.registry = registry;
-        this.runtimeContext = runtimeContext;
-      }
-      
-      async registerHierarchy(rootSpec, options = {}) {
-        const registeredComponents = [];
-        const errors = [];
-        const warnings = [];
-        
-        // Register components recursively
-        const registerSpec = async (spec) => {
-          // Register children first
-          const children = spec.dependencies || [];
-          for (const child of children) {
-            await registerSpec(child);
-          }
-          
-          // Register this component
-          if (spec.code) {
-            const result = await this.compiler.compile({
-              componentName: spec.name,
-              componentCode: spec.code
-            });
-            
-            if (result.success) {
-              const factory = result.component.component(this.runtimeContext, {});
-              this.registry.register(spec.name, factory.component);
-              registeredComponents.push(spec.name);
-            } else {
-              errors.push({
-                componentName: spec.name,
-                error: result.error.message,
-                phase: 'compilation'
-              });
+            if (debug) {
+                console.log(`📦 Loading ${specLib.name}:`, {
+                    cdnUrl: libDef.CDNUrl,
+                    globalVariable: libDef.GlobalVariable
+                });
+            }
+            // Load CSS if available
+            if (libDef.CDNCssUrl) {
+                const cssUrls = libDef.CDNCssUrl.split(',').map(url => url.trim());
+                for (const cssUrl of cssUrls) {
+                    if (cssUrl) {
+                        await page.addStyleTag({ url: cssUrl });
+                        if (debug) {
+                            console.log(`  🎨 Loaded CSS: ${cssUrl}`);
+                        }
+                    }
+                }
+            }
+            // Load the library script with timeout protection
+            if (libDef.CDNUrl) {
+                try {
+                    // Add timeout for library loading (Recommendation #3)
+                    await Promise.race([
+                        page.addScriptTag({ url: libDef.CDNUrl }),
+                        new Promise((_, reject) => setTimeout(() => reject(new Error(`Library load timeout: ${libDef.CDNUrl}`)), 10000))
+                    ]);
+                    // Verify the library loaded
+                    const isLoaded = await page.evaluate((globalVar) => {
+                        return typeof window[globalVar] !== 'undefined';
+                    }, libDef.GlobalVariable);
+                    if (isLoaded) {
+                        if (debug) {
+                            console.log(`  📦 Loaded ${specLib.name} (available as ${libDef.GlobalVariable})`);
+                        }
+                    }
+                    else {
+                        // Some libraries (like @mui/material) may load successfully but not attach to window
+                        // Check if we can at least verify the script loaded
+                        if (debug) {
+                            console.log(`  📦 Loaded ${specLib.name} from CDN (global variable ${libDef.GlobalVariable} may not be exposed)`);
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error(`  ❌ Error loading ${specLib.name} from ${libDef.CDNUrl}:`, error);
+                }
             }
-          }
-        };
-        
-        await registerSpec(rootSpec);
-        
-        return {
-          success: errors.length === 0,
-          registeredComponents,
-          errors,
-          warnings
-        };
-      }
-    }
-    
-    const hierarchyRegistrar = new SimpleHierarchyRegistrar(compiler, registry, runtimeContext);
-    
-    // BuildUtilities function - uses real MJ utilities exposed via Playwright
-    const BuildUtilities = () => {
-      const utilities = {
-        md: {
-          entities: () => {
-            return window.__mjGetEntities();
-          },
-          GetEntityObject: async (entityName) => {
-            return await window.__mjGetEntityObject(entityName);
-          }
-        },
-        rv: {
-          RunView: async (params) => {
-            return await window.__mjRunView(params);
-          },
-          RunViews: async (params) => {
-            return await window.__mjRunViews(params);
-          }
-        },
-        rq: {
-          RunQuery: async (params) => {
-            return await window.__mjRunQuery(params);
-          }
-        }
-      };
-      return utilities;
-    };
-    
-    // SetupStyles function - copied from skip-chat implementation
-    const SetupStyles = () => ({
-      colors: {
-        primary: '#5B4FE9',
-        primaryHover: '#4940D4',
-        primaryLight: '#E8E6FF',
-        secondary: '#64748B',
-        secondaryHover: '#475569',
-        success: '#10B981',
-        successLight: '#D1FAE5',
-        warning: '#F59E0B',
-        warningLight: '#FEF3C7',
-        error: '#EF4444',
-        errorLight: '#FEE2E2',
-        info: '#3B82F6',
-        infoLight: '#DBEAFE',
-        background: '#FFFFFF',
-        surface: '#F8FAFC',
-        surfaceHover: '#F1F5F9',
-        text: '#1E293B',
-        textSecondary: '#64748B',
-        textTertiary: '#94A3B8',
-        textInverse: '#FFFFFF',
-        border: '#E2E8F0',
-        borderLight: '#F1F5F9',
-        borderFocus: '#5B4FE9',
-        shadow: 'rgba(0, 0, 0, 0.05)',
-        shadowMedium: 'rgba(0, 0, 0, 0.1)',
-        shadowLarge: 'rgba(0, 0, 0, 0.15)',
-      },
-      spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px',
-        xl: '32px',
-        xxl: '48px',
-        xxxl: '64px',
-      },
-      typography: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
-        fontSize: {
-          xs: '11px',
-          sm: '12px',
-          md: '14px',
-          lg: '16px',
-          xl: '20px',
-          xxl: '24px',
-          xxxl: '32px',
-        },
-        fontWeight: {
-          light: '300',
-          regular: '400',
-          medium: '500',
-          semibold: '600',
-          bold: '700',
-        },
-        lineHeight: {
-          tight: '1.25',
-          normal: '1.5',
-          relaxed: '1.75',
-        },
-      },
-      borders: {
-        radius: {
-          sm: '6px',
-          md: '8px',
-          lg: '12px',
-          xl: '16px',
-          full: '9999px',
-        },
-        width: {
-          thin: '1px',
-          medium: '2px',
-          thick: '3px',
-        },
-      },
-      shadows: {
-        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      },
-      transitions: {
-        fast: '150ms ease-in-out',
-        normal: '250ms ease-in-out',
-        slow: '350ms ease-in-out',
-      },
-      overflow: 'auto'
-    });
-    
-    // React Error Boundary component
-    const ErrorBoundary = class extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-      }
-      
-      static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-      }
-      
-      componentDidCatch(error, errorInfo) {
-        console.error('React Error Boundary caught:', error, errorInfo);
-        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
-        window.__testHarnessRuntimeErrors.push({
-          message: error.message,
-          stack: error.stack,
-          componentStack: errorInfo.componentStack,
-          type: 'react'
-        });
-      }
-      
-      render() {
-        if (this.state.hasError) {
-          return React.createElement('div', { style: { color: 'red', padding: '20px' } }, 
-            'Component Error: ' + this.state.error.message
-          );
-        }
-        return this.props.children;
-      }
-    };
-    
-    // Load component spec and register hierarchy
-    const componentSpec = ${specJson};
-    const props = ${propsJson};
-    
-    (async () => {
-      console.log('📦 Starting component initialization...');
-      console.log('React available:', typeof React !== 'undefined');
-      console.log('ReactDOM available:', typeof ReactDOM !== 'undefined');
-      console.log('Babel available:', typeof Babel !== 'undefined');
-      
-      // Update the root to show progress
-      document.getElementById('root').innerHTML = '<div style="background: cyan; padding: 20px; color: black;">🔄 Initializing components...</div>';
-      
-      // First, test that React is working with a simple component
-      const TestComponent = () => React.createElement('div', {
-        style: { 
-          background: 'yellow', 
-          padding: '10px', 
-          margin: '10px 0',
-          border: '2px solid orange',
-          color: 'black',
-          fontSize: '16px',
-          fontWeight: 'bold'
         }
-      }, '🔧 React is working! Now loading your component...');
-      
-      const testRoot = ReactDOM.createRoot(document.getElementById('root'));
-      testRoot.render(React.createElement(TestComponent));
-      
-      // Wait a moment to show the test component
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      // Now proceed with the actual component
-      // Register the component hierarchy
-      const result = await hierarchyRegistrar.registerHierarchy(componentSpec);
-      
-      if (!result.success) {
-        console.error('Failed to register components:', result.errors);
-        document.getElementById('root').innerHTML = '<div style="color: red; padding: 20px;">Failed to register components: ' + JSON.stringify(result.errors) + '</div>';
-        return;
-      }
-      
-      // Get all registered components
-      const components = registry.getAll();
-      
-      // Get the root component
-      const RootComponent = registry.get(componentSpec.name);
-      
-      if (!RootComponent) {
-        console.error('Root component not found:', componentSpec.name);
-        return;
-      }
-      
-      // Simple in-memory storage for user settings
-      let savedUserSettings = {};
-      
-      // Create root for rendering
-      const root = ReactDOM.createRoot(document.getElementById('root'));
-      
-      // Function to render with current settings
-      const renderWithSettings = () => {
-        console.log('🎯 Starting component render...');
-        console.log('Props:', props);
-        console.log('Root component found:', !!RootComponent);
-        
-        const enhancedProps = {
-          ...props,
-          components: components,
-          utilities: BuildUtilities(),
-          styles: SetupStyles(),
-          savedUserSettings: savedUserSettings,
-          onSaveUserSettings: (newSettings) => {
-            console.log('User settings saved:', newSettings);
-            // Update in-memory storage
-            savedUserSettings = { ...newSettings };
-            // Re-render with new settings
-            renderWithSettings();
-          }
-        };
-        
-        console.log('Enhanced props created:', Object.keys(enhancedProps));
-        
-        try {
-          root.render(
-            React.createElement(ErrorBoundary, null,
-              React.createElement(RootComponent, enhancedProps)
-            )
-          );
-          console.log('✅ Component rendered successfully');
-        } catch (error) {
-          console.error('❌ Render error:', error);
-          document.getElementById('root').innerHTML = '<div style="color: red; padding: 20px;">Render Error: ' + error.message + '</div>';
+        if (debug) {
+            // Log all available global variables that look like libraries
+            // Get all the global variables we expect from the spec
+            const expectedGlobals = specLibraries.map(lib => {
+                const libDef = libraryMap.get(lib.name.toLowerCase());
+                return libDef?.GlobalVariable;
+            }).filter(Boolean);
+            const globals = await page.evaluate((expected) => {
+                const relevantGlobals = {};
+                // Check the expected globals from the spec
+                for (const key of expected) {
+                    if (window[key]) {
+                        relevantGlobals[key] = typeof window[key];
+                    }
+                    else {
+                        relevantGlobals[key] = 'NOT FOUND';
+                    }
+                }
+                // Also check some common library globals
+                const commonKeys = ['Recharts', 'chroma', '_', 'moment', 'dayjs', 'Chart', 'GSAP', 'gsap', 'lottie'];
+                for (const key of commonKeys) {
+                    if (!(key in relevantGlobals) && window[key]) {
+                        relevantGlobals[key] = typeof window[key];
+                    }
+                }
+                return relevantGlobals;
+            }, expectedGlobals);
+            console.log('🌍 Available library globals:', globals);
         }
-      };
-      
-      // Initial render
-      renderWithSettings();
-      
-      // Add a fallback message if nothing renders after a delay
-      setTimeout(() => {
-        const rootElement = document.getElementById('root');
-        if (rootElement) {
-          const hasContent = rootElement.innerHTML.trim().length > 0;
-          const hasVisibleChildren = rootElement.querySelector('*');
-          
-          console.log('Root element check:', {
-            hasContent,
-            innerHTML: rootElement.innerHTML.substring(0, 100),
-            hasVisibleChildren: !!hasVisibleChildren,
-            childCount: rootElement.childNodes.length
-          });
-          
-          if (!hasContent || !hasVisibleChildren) {
-            rootElement.innerHTML = '<div style="color: red; font-size: 18px; padding: 20px; border: 2px dashed red; background: #ffe6e6;">⚠️ Component did not render any visible content</div>';
-          } else {
-            // Force visibility on all children as a test
-            const allElements = rootElement.querySelectorAll('*');
-            allElements.forEach(el => {
-              if (el instanceof HTMLElement) {
-                // Make sure elements are visible
-                if (window.getComputedStyle(el).display === 'none') {
-                  el.style.display = 'block !important';
+    }
+    /**
+     * Set up error tracking in the page
+     */
+    async setupErrorTracking(page) {
+        await page.evaluate(() => {
+            // Initialize error tracking
+            window.__testHarnessRuntimeErrors = [];
+            window.__testHarnessConsoleErrors = [];
+            window.__testHarnessConsoleWarnings = [];
+            window.__testHarnessTestFailed = false;
+            window.__testHarnessRenderCount = 0;
+            // Track renders
+            const originalCreateElement = window.React?.createElement;
+            if (originalCreateElement) {
+                window.React.createElement = function (...args) {
+                    window.__testHarnessRenderCount++;
+                    return originalCreateElement.apply(this, args);
+                };
+            }
+            // Override console.error
+            const originalConsoleError = console.error;
+            console.error = function (...args) {
+                const errorText = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ');
+                // Check if this is a warning rather than an error
+                // React warnings typically start with "Warning:" or contain warning-related text
+                const isWarning = errorText.includes('Warning:') ||
+                    errorText.includes('DevTools') ||
+                    errorText.includes('deprecated') ||
+                    errorText.includes('has been renamed') ||
+                    errorText.includes('will be removed') ||
+                    errorText.includes('Consider using') ||
+                    errorText.includes('Please update') ||
+                    (errorText.includes('React') && errorText.includes('recognize the')) || // Prop warnings
+                    (errorText.includes('React') && errorText.includes('Invalid'));
+                if (isWarning) {
+                    // Track as warning, don't fail the test
+                    window.__testHarnessConsoleWarnings.push(errorText);
                 }
-                if (window.getComputedStyle(el).visibility === 'hidden') {
-                  el.style.visibility = 'visible !important';
+                else {
+                    // Real error - track and fail the test
+                    window.__testHarnessConsoleErrors.push(errorText);
+                    window.__testHarnessTestFailed = true;
                 }
-                // Add a test border to see if elements exist
-                el.style.border = '1px dotted red';
-              }
+                originalConsoleError.apply(console, args);
+            };
+            // Global error handler
+            window.addEventListener('error', (event) => {
+                window.__testHarnessRuntimeErrors.push({
+                    message: event.error?.message || event.message,
+                    stack: event.error?.stack,
+                    type: 'runtime'
+                });
+                window.__testHarnessTestFailed = true;
             });
-            console.log('Applied debug borders to', allElements.length, 'elements');
-          }
-        }
-      }, 2000);
-    })();
-  </script>
-</body>
-</html>`;
+            // Unhandled promise rejection handler
+            window.addEventListener('unhandledrejection', (event) => {
+                window.__testHarnessRuntimeErrors.push({
+                    message: 'Unhandled Promise Rejection: ' + (event.reason?.message || event.reason),
+                    stack: event.reason?.stack,
+                    type: 'promise-rejection'
+                });
+                window.__testHarnessTestFailed = true;
+                event.preventDefault();
+            });
+        });
     }
     /**
-     * Checks if a console message is a warning
+     * Collect runtime errors from the page
      */
-    isWarning(type, text) {
-        return type === 'warning' || text.startsWith('Warning:');
+    async collectRuntimeErrors(page) {
+        const errorData = await page.evaluate(() => {
+            return {
+                runtimeErrors: window.__testHarnessRuntimeErrors || [],
+                consoleErrors: window.__testHarnessConsoleErrors || [],
+                testFailed: window.__testHarnessTestFailed || false
+            };
+        });
+        const errors = [];
+        // Only add "test failed" message if there are actual errors
+        if (errorData.testFailed && (errorData.runtimeErrors.length > 0 || errorData.consoleErrors.length > 0)) {
+            errors.push('Test marked as failed by error handlers');
+        }
+        errorData.runtimeErrors.forEach((error) => {
+            // Include phase information if available to help identify where the error occurred
+            const phase = error.phase ? ` (during ${error.phase})` : '';
+            const errorMsg = `${error.type} error: ${error.message}${phase}`;
+            if (!errors.includes(errorMsg)) {
+                errors.push(errorMsg);
+            }
+        });
+        errorData.consoleErrors.forEach((error) => {
+            const errorMsg = `Console error: ${error}`;
+            if (!errors.includes(errorMsg)) {
+                errors.push(errorMsg);
+            }
+        });
+        return errors;
     }
     /**
-     * Checks if a warning is critical and should fail the test
+     * Collect warnings from the page (non-fatal issues)
      */
-    isCriticalWarning(text) {
-        return ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text));
+    async collectWarnings(page) {
+        const warningData = await page.evaluate(() => {
+            return {
+                consoleWarnings: window.__testHarnessConsoleWarnings || []
+            };
+        });
+        const warnings = [];
+        warningData.consoleWarnings.forEach((warning) => {
+            if (!warnings.includes(warning)) {
+                warnings.push(warning);
+            }
+        });
+        return warnings;
     }
     /**
-     * Sets up console logging with warning detection
+     * Set up console logging
      */
     setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings) {
         page.on('console', (msg) => {
             const type = msg.type();
             const text = msg.text();
             consoleLogs.push({ type, text });
-            if (this.isWarning(type, text)) {
-                warnings.push(text);
-                if (this.isCriticalWarning(text)) {
+            // Note: We're already handling warnings in our console.error override
+            // This catches any direct console.warn() calls
+            if (type === 'warning') {
+                if (!warnings.includes(text)) {
+                    warnings.push(text);
+                }
+                // Check if it's a critical warning that should fail the test
+                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text))) {
                     criticalWarnings.push(text);
                 }
             }
         });
-    }
-    /**
-     * Sets up error handling for the page
-     */
-    setupErrorHandling(page, errors) {
         page.on('pageerror', (error) => {
-            errors.push(error.message);
+            consoleLogs.push({ type: 'error', text: error.message });
         });
     }
-    /**
-     * Injects render tracking code into the page
-     */
-    async injectRenderTracking(page) {
-        // Instead of using evaluateOnNewDocument, we'll inject the script directly into the HTML
-        // This avoids the Playwright-specific API issue
-        // The actual injection will happen in createHTMLTemplate
+    buildLocalMJUtilities() {
+        console.log("   Building local MJ utilities");
+        const rv = new core_1.RunView();
+        const rq = new core_1.RunQuery();
+        const md = new core_1.Metadata();
+        return {
+            RunView: rv.RunView,
+            RunQuery: rq.RunQuery,
+            RunViews: rv.RunViews,
+            GetEntityObject: md.GetEntityObject, // return the function
+            Entities: md.Entities // return the function
+        };
     }
     /**
-     * Waits for component to render and checks for timeouts
+     * Expose MJ utilities to the browser context
      */
-    async waitForRender(page, options, errors) {
-        const timeout = options.timeout || 10000; // 10 seconds default
-        const renderWaitTime = options.renderWaitTime || 500; // Default 500ms for render completion
+    async exposeMJUtilities(page, options, dataErrors, debug = false) {
+        // Don't check if already exposed - we always start fresh after goto('about:blank')
+        // The page.exposeFunction calls need to be made for each new page instance
+        // Serialize contextUser to pass to the browser context
+        // UserInfo is a simple object that can be serialized
+        const serializedContextUser = JSON.parse(JSON.stringify(options.contextUser));
+        // utilities - favor the one passed in by the caller, or fall back to the local ones
+        const util = options.utilities || this.buildLocalMJUtilities();
+        // Create a lightweight mock metadata object with serializable data
+        // This avoids authentication/provider issues in the browser context
+        let entitiesData = [];
         try {
-            if (options.waitForSelector) {
-                await page.waitForSelector(options.waitForSelector, { timeout });
-            }
-            if (options.waitForLoadState) {
-                await page.waitForLoadState(options.waitForLoadState);
+            // Try to get entities if available, otherwise use empty array
+            if (util.Entities) {
+                // Serialize the entities data (remove functions, keep data)
+                entitiesData = JSON.parse(JSON.stringify(util.Entities));
+                // Serialized entities for browser context
             }
             else {
-                // Wait for React to finish rendering with configurable time
-                await page.waitForTimeout(renderWaitTime);
-                // Force React to flush all updates
-                await page.evaluate(() => {
-                    if (window.React && window.React.flushSync) {
-                        try {
-                            window.React.flushSync(() => { });
-                        }
-                        catch (e) {
-                            console.error('flushSync error:', e);
-                        }
-                    }
-                });
-                // Additional small wait after flush to ensure DOM updates
-                await page.waitForTimeout(50);
+                // Metadata.Entities not available, using empty array
             }
-            return true;
         }
-        catch (timeoutError) {
-            errors.push(`Component rendering timeout after ${timeout}ms - possible infinite render loop`);
-            return false;
+        catch (error) {
+            // Could not serialize entities
+            entitiesData = [];
         }
-    }
-    /**
-     * Gets the render count from the page
-     */
-    async getRenderCount(page) {
-        return await page.evaluate(() => window.__testHarnessRenderCount || 0);
-    }
-    /**
-     * Collects runtime errors that were caught during component execution
-     */
-    async collectRuntimeErrors(page) {
-        const runtimeErrors = await page.evaluate(() => {
-            return window.__testHarnessRuntimeErrors || [];
+        // Create the mock metadata structure with entities and user
+        // Note: Don't include functions here as they can't be serialized
+        // Include common properties that Metadata.Provider might need
+        const mockMetadata = {
+            Entities: entitiesData,
+            CurrentUser: serializedContextUser,
+            Applications: [],
+            Queries: [],
+            QueryFields: [],
+            QueryCategories: [],
+            QueryPermissions: [],
+            Roles: [],
+            Libraries: [],
+            AuditLogTypes: [],
+            Authorizations: [],
+            VisibleExplorerNavigationItems: [],
+            AllExplorerNavigationItems: []
+        };
+        // Inject both the contextUser and mock metadata into the page
+        // Playwright only accepts a single argument, so wrap in an object
+        await page.evaluate((data) => {
+            const { ctxUser, mockMd } = data;
+            window.__mjContextUser = ctxUser;
+            // Add the EntityByName function directly in the browser context
+            mockMd.EntityByName = (name) => {
+                return mockMd.Entities.find((e) => e.Name === name) || null;
+            };
+            window.__mjMockMetadata = mockMd;
+            // IMPORTANT: Create global Metadata mock immediately to prevent undefined errors
+            // This must be available before any component code runs
+            if (!window.Metadata) {
+                window.Metadata = {
+                    Provider: mockMd
+                };
+                // Created global Metadata mock with Provider (early)
+            }
+            // Received contextUser and mock metadata in browser
+        }, { ctxUser: serializedContextUser, mockMd: mockMetadata });
+        // Expose functions
+        await page.exposeFunction('__mjGetEntityObject', async (entityName) => {
+            try {
+                const entity = await util.GetEntityObject(entityName, options.contextUser);
+                return entity;
+            }
+            catch (error) {
+                console.error('Error in __mjGetEntityObject:', error);
+                return null;
+            }
         });
-        const errors = [];
-        runtimeErrors.forEach((error) => {
-            errors.push(`${error.type} error: ${error.message}`);
-            if (error.componentStack) {
-                errors.push(`Component stack: ${error.componentStack}`);
+        await page.exposeFunction('__mjGetEntities', () => {
+            try {
+                // Return the entities array or empty array if not available
+                return entitiesData;
+            }
+            catch (error) {
+                console.error('Error in __mjGetEntities:', error);
+                return [];
             }
         });
-        return errors;
-    }
-    /**
-     * Captures async errors by waiting for asynchronous operations to complete
-     * This catches errors from setTimeout, setInterval, Promises, and async effects
-     */
-    async captureAsyncErrors(page, waitTime) {
-        const errors = [];
-        try {
-            // Clear any existing errors to track only new ones
-            const initialErrorCount = await page.evaluate(() => {
-                return window.__testHarnessRuntimeErrors?.length || 0;
-            });
-            // Wait for async operations to potentially fail
-            await page.waitForTimeout(waitTime);
-            // Collect any new errors that occurred during the wait
-            const allErrors = await page.evaluate(() => {
-                return window.__testHarnessRuntimeErrors || [];
-            });
-            // Process only new errors
-            const newErrors = allErrors.slice(initialErrorCount);
-            newErrors.forEach((error) => {
-                if (error.type === 'promise-rejection') {
-                    errors.push(`Async operation failed: ${error.message}`);
-                }
-                else if (error.message && !errors.includes(`${error.type} error: ${error.message}`)) {
-                    errors.push(`Delayed ${error.type} error: ${error.message}`);
-                }
-            });
-            // Also check if any console errors appeared
-            const consoleErrors = await page.evaluate(() => {
-                const logs = window.__testHarnessConsoleLogs || [];
-                return logs.filter((log) => log.type === 'error').map((log) => log.text);
-            });
-            // Add unique console errors
-            consoleErrors.forEach((error) => {
-                if (!errors.some(e => e.includes(error))) {
-                    errors.push(`Console error during async wait: ${error}`);
-                }
-            });
-        }
-        catch (e) {
-            errors.push(`Failed to capture async errors: ${e}`);
-        }
-        return errors;
-    }
-    /**
-     * Performs deep render validation to catch errors that might be in the DOM
-     */
-    async validateDeepRender(page) {
-        const errors = [];
-        try {
-            // Execute a full render cycle by forcing a state update
-            await page.evaluate(() => {
-                // Force React to complete all pending updates
-                if (window.React && window.React.flushSync) {
-                    window.React.flushSync(() => { });
-                }
-            });
-            // Check for render errors in the component tree
-            const renderErrors = await page.evaluate(() => {
-                const errors = [];
-                // Walk the DOM and check for error boundaries or error text
-                const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
-                let node;
-                while (node = walker.nextNode()) {
-                    const text = node.textContent || '';
-                    // Look for common error patterns
-                    if (text.includes('TypeError:') ||
-                        text.includes('ReferenceError:') ||
-                        text.includes('Cannot read properties of undefined') ||
-                        text.includes('Cannot access property') ||
-                        text.includes('is not a function') ||
-                        text.includes('Component Error:')) {
-                        // Only add if it's not already in our error list
-                        const errorMsg = text.trim();
-                        if (errorMsg.length < 500) { // Avoid huge text blocks
-                            errors.push(`Potential error in rendered content: ${errorMsg}`);
-                        }
+        await page.exposeFunction('__mjRunView', async (params) => {
+            try {
+                const result = await util.RunView(params, options.contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    const rowCount = result.Results?.length || 0;
+                    console.log(`💾 RunView SUCCESS: Entity="${params.EntityName}" Rows=${rowCount}`);
+                    if (params.ExtraFilter) {
+                        console.log(`   Filter: ${params.ExtraFilter}`);
                     }
                 }
-                return errors;
-            });
-            errors.push(...renderErrors);
-        }
-        catch (e) {
-            errors.push(`Deep render validation failed: ${e}`);
-        }
-        return errors;
-    }
-    /**
-     * Determines if the component execution was successful
-     */
-    determineSuccess(errors, criticalWarnings, renderCount, hasTimeout) {
-        const additionalErrors = [];
-        if (renderCount > ComponentRunner.MAX_RENDER_COUNT) {
-            additionalErrors.push(`Excessive render count: ${renderCount} renders detected`);
-        }
-        const success = errors.length === 0 &&
-            criticalWarnings.length === 0 &&
-            !hasTimeout &&
-            renderCount <= ComponentRunner.MAX_RENDER_COUNT;
-        return { success, additionalErrors };
-    }
-    /**
-     * Expose MemberJunction utilities to the browser context
-     */
-    async exposeMJUtilities(page, contextUser) {
-        // Check if utilities are already exposed (they persist across navigations)
-        const alreadyExposed = await page.evaluate(() => {
-            return typeof window.__mjGetEntityObject === 'function';
-        });
-        if (alreadyExposed) {
-            return; // Already exposed, skip
-        }
-        try {
-            // Create instances in Node.js context
-            const metadata = new core_1.Metadata();
-            const runView = new core_1.RunView();
-            const runQuery = new core_1.RunQuery();
-            // Expose individual functions since we can't pass complex objects
-            await page.exposeFunction('__mjGetEntityObject', async (entityName) => {
-                try {
-                    const entity = await metadata.GetEntityObject(entityName, contextUser);
-                    return entity;
-                }
-                catch (error) {
-                    console.error('Error in __mjGetEntityObject:', error);
-                    return null;
+                return result;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunView FAILED: Entity="${params.EntityName || 'unknown'}"`);
+                    console.log(`   Error: ${errorMessage}`);
                 }
-            });
-            await page.exposeFunction('__mjGetEntities', () => {
-                try {
-                    return metadata.Entities;
+                else {
+                    console.error('Error in __mjRunView:', errorMessage);
                 }
-                catch (error) {
-                    console.error('Error in __mjGetEntities:', error);
-                    return null;
+                // Collect this error for the test report
+                dataErrors.push(`RunView error: ${errorMessage} (Entity: ${params.EntityName || 'unknown'})`);
+                // Return error result that won't crash the component
+                return { Success: false, ErrorMessage: errorMessage, Results: [] };
+            }
+        });
+        await page.exposeFunction('__mjRunViews', async (params) => {
+            try {
+                const results = await util.RunViews(params, options.contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    console.log(`💾 RunViews SUCCESS: ${params.length} queries executed`);
+                    params.forEach((p, i) => {
+                        const rowCount = results[i]?.Results?.length || 0;
+                        console.log(`   [${i + 1}] Entity="${p.EntityName}" Rows=${rowCount}`);
+                    });
                 }
-            });
-            await page.exposeFunction('__mjRunView', async (params) => {
-                try {
-                    return await runView.RunView(params, contextUser);
+                return results;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                const entities = params.map(p => p.EntityName || 'unknown').join(', ');
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunViews FAILED: Entities=[${entities}]`);
+                    console.log(`   Error: ${errorMessage}`);
                 }
-                catch (error) {
-                    console.error('Error in __mjRunView:', error);
-                    const errorMessage = error instanceof Error ? error.message : String(error);
-                    return { Success: false, ErrorMessage: errorMessage, Results: [] };
+                else {
+                    console.error('Error in __mjRunViews:', errorMessage);
                 }
-            });
-            await page.exposeFunction('__mjRunViews', async (params) => {
-                try {
-                    return await runView.RunViews(params, contextUser);
+                // Collect this error for the test report
+                dataErrors.push(`RunViews error: ${errorMessage} (Entities: ${entities})`);
+                // Return error results that won't crash the component
+                return params.map(() => ({ Success: false, ErrorMessage: errorMessage, Results: [] }));
+            }
+        });
+        await page.exposeFunction('__mjRunQuery', async (params) => {
+            try {
+                const result = await util.RunQuery(params, options.contextUser);
+                // Debug logging for successful calls
+                if (debug) {
+                    const queryIdentifier = params.QueryName || params.QueryID || 'unknown';
+                    const rowCount = result.Results?.length || 0;
+                    console.log(`💾 RunQuery SUCCESS: Query="${queryIdentifier}" Rows=${rowCount}`);
+                    if (params.Parameters && Object.keys(params.Parameters).length > 0) {
+                        console.log(`   Parameters:`, params.Parameters);
+                    }
                 }
-                catch (error) {
-                    console.error('Error in __mjRunViews:', error);
-                    const errorMessage = error instanceof Error ? error.message : String(error);
-                    return params.map(() => ({ Success: false, ErrorMessage: errorMessage, Results: [] }));
+                return result;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                const queryIdentifier = params.QueryName || params.QueryID || 'unknown';
+                // Debug logging for errors
+                if (debug) {
+                    console.log(`❌ RunQuery FAILED: Query="${queryIdentifier}"`);
+                    console.log(`   Error: ${errorMessage}`);
                 }
-            });
-            await page.exposeFunction('__mjRunQuery', async (params) => {
-                try {
-                    return await runQuery.RunQuery(params, contextUser);
+                else {
+                    console.error('Error in __mjRunQuery:', errorMessage);
                 }
-                catch (error) {
-                    console.error('Error in __mjRunQuery:', error);
-                    const errorMessage = error instanceof Error ? error.message : String(error);
-                    return { Success: false, ErrorMessage: errorMessage, Results: [] };
+                // Collect this error for the test report
+                dataErrors.push(`RunQuery error: ${errorMessage} (Query: ${queryIdentifier})`);
+                // Return error result that won't crash the component
+                return { Success: false, ErrorMessage: errorMessage, Results: [] };
+            }
+        });
+        // Make them available in utilities with the mock metadata
+        await page.evaluate(() => {
+            // Use the mock metadata for synchronous access
+            const mockMd = window.__mjMockMetadata || { Entities: [], CurrentUser: null };
+            window.__mjUtilities = {
+                md: {
+                    // Use the mock metadata's Entities directly (synchronous)
+                    Entities: mockMd.Entities,
+                    entities: mockMd.Entities, // Support both cases
+                    CurrentUser: mockMd.CurrentUser,
+                    EntityByName: (name) => {
+                        return mockMd.Entities.find((e) => e.Name === name) || null;
+                    },
+                    // Keep async function for GetEntityObject for compatibility
+                    GetEntityObject: async (entityName) => await window.__mjGetEntityObject(entityName)
+                },
+                rv: {
+                    RunView: async (params) => await window.__mjRunView(params),
+                    RunViews: async (params) => await window.__mjRunViews(params)
+                },
+                rq: {
+                    RunQuery: async (params) => await window.__mjRunQuery(params)
                 }
-            });
-        }
-        catch (error) {
-            console.error('Failed to expose MJ utilities to page:', error);
-            // Log more details about the error
-            if (error instanceof Error && error.message.includes('addBinding')) {
-                console.error('addBinding error - this usually means the page context is invalid');
+            };
+            // Update or create global Metadata mock (in case it wasn't created earlier)
+            if (!window.Metadata) {
+                window.Metadata = {
+                    Provider: mockMd
+                };
+                // Created global Metadata mock with Provider (late)
             }
-            throw error; // Re-throw to be caught by the main error handler
-        }
-    }
-    /**
-     * Analyze component errors to identify failed components
-     * @param errors Array of error messages
-     * @returns Array of component names that failed
-     */
-    static analyzeComponentErrors(errors) {
-        return react_runtime_1.ComponentErrorAnalyzer.identifyFailedComponents(errors);
-    }
-    /**
-     * Get detailed error analysis
-     * @param errors Array of error messages
-     * @returns Detailed failure information
-     */
-    static getDetailedErrorAnalysis(errors) {
-        return react_runtime_1.ComponentErrorAnalyzer.analyzeComponentErrors(errors);
+            else {
+                // Update the existing one to ensure it has the latest mock data
+                window.Metadata.Provider = mockMd;
+                // Updated existing Metadata.Provider with mock data
+            }
+        });
     }
     /**
-     * Gets the ComponentCompiler code to inject into the browser
-     * This is a simplified version that works in the browser context
+     * Dump debug information
      */
-    getComponentCompilerCode() {
-        // Return a browser-compatible version of ComponentCompiler
-        return `
-    class ComponentCompiler {
-      constructor() {
-        this.cache = new Map();
-      }
-      
-      setBabelInstance(babel) {
-        this.babelInstance = babel;
-      }
-      
-      async compile(options) {
-        const { componentName, componentCode } = options;
-        
-        try {
-          // Validate inputs
-          if (!componentName || !componentCode) {
-            throw new Error('componentName and componentCode are required');
-          }
-          
-          // Wrap component code
-          const wrappedCode = this.wrapComponentCode(componentCode, componentName);
-          
-          // Transform using Babel
-          const result = this.babelInstance.transform(wrappedCode, {
-            presets: ['react'],
-            filename: componentName + '.jsx'
-          });
-          
-          // Create factory
-          const componentFactory = this.createComponentFactory(result.code, componentName);
-          
-          return {
-            success: true,
-            component: {
-              component: componentFactory,
-              id: componentName + '_' + Date.now(),
-              name: componentName,
-              compiledAt: new Date(),
-              warnings: []
-            },
-            duration: 0
-          };
-        } catch (error) {
-          return {
-            success: false,
-            error: {
-              message: error.message,
-              componentName: componentName,
-              phase: 'compilation'
-            },
-            duration: 0
-          };
+    dumpDebugInfo(result) {
+        console.log('\n📊 === Component Execution Results ===');
+        console.log('Success:', result.success ? '✅' : '❌');
+        console.log('Execution time:', result.executionTime + 'ms');
+        console.log('Render count:', result.renderCount);
+        if (result.errors && result.errors.length > 0) {
+            console.log('\n❌ Errors:', result.errors.length);
+            result.errors.forEach((err, i) => {
+                console.log(`  ${i + 1}. ${err.message}`);
+            });
         }
-      }
-      
-      wrapComponentCode(componentCode, componentName) {
-        // Make component libraries available in scope
-        const libraryDeclarations = componentLibraries
-          .map(lib => \`const \${lib.globalVariable} = libraries['\${lib.globalVariable}'];\`)
-          .join('\\n        ');
-          
-        return \`
-          function createComponent(
-            React, ReactDOM,
-            useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
-            libraries, styles, console
-          ) {
-            \${libraryDeclarations}
-            
-            \${componentCode}
-            
-            if (typeof \${componentName} === 'undefined') {
-              throw new Error('Component "\${componentName}" is not defined in the provided code');
-            }
-            
-            return {
-              component: \${componentName},
-              print: function() { window.print(); },
-              refresh: function(data) { }
-            };
-          }
-        \`;
-      }
-      
-      createComponentFactory(transpiledCode, componentName) {
-        const factoryCreator = new Function(
-          'React', 'ReactDOM',
-          'useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useContext', 'useReducer', 'useLayoutEffect',
-          'libraries', 'styles', 'console',
-          transpiledCode + '; return createComponent;'
-        );
-        
-        return (context, styles = {}) => {
-          const { React, ReactDOM, libraries = {} } = context;
-          
-          const createComponentFn = factoryCreator(
-            React, ReactDOM,
-            React.useState, React.useEffect, React.useCallback, React.useMemo,
-            React.useRef, React.useContext, React.useReducer, React.useLayoutEffect,
-            libraries, styles, console
-          );
-          
-          return createComponentFn(
-            React, ReactDOM,
-            React.useState, React.useEffect, React.useCallback, React.useMemo,
-            React.useRef, React.useContext, React.useReducer, React.useLayoutEffect,
-            libraries, styles, console
-          );
-        };
-      }
-    }
-    `;
+        if (result.warnings && result.warnings.length > 0) {
+            console.log('\n⚠️ Warnings:', result.warnings.length);
+            result.warnings.forEach((warn, i) => {
+                console.log(`  ${i + 1}. ${warn.message}`);
+            });
+        }
+        if (result.criticalWarnings && result.criticalWarnings.length > 0) {
+            console.log('\n🔴 Critical Warnings:', result.criticalWarnings.length);
+            result.criticalWarnings.forEach((warn, i) => {
+                console.log(`  ${i + 1}. ${warn}`);
+            });
+        }
+        console.log('\n========================================\n');
     }
 }
 exports.ComponentRunner = ComponentRunner;
@@ -1147,6 +1122,8 @@ ComponentRunner.CRITICAL_WARNING_PATTERNS = [
     /Error: Minified React error/i,
     /too many re-renders/i,
 ];
-// Maximum allowed renders before considering it excessive
-ComponentRunner.MAX_RENDER_COUNT = 1000;
+// Note: This counts React.createElement calls, not component re-renders
+// A complex dashboard can easily have 5000+ createElement calls on initial mount
+// Only flag if it's likely an infinite loop (10000+ is suspicious)
+ComponentRunner.MAX_RENDER_COUNT = 10000;
 //# sourceMappingURL=component-runner.js.map