npm - @memberjunction/react-test-harness - Versions diffs - 2.90.0 → 2.91.0 - Mend

@memberjunction/react-test-harness 2.90.0 → 2.91.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/index.d.ts.map +1 -1
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/lib/browser-context.d.ts.map +1 -1
package/dist/lib/browser-context.js +6 -2
package/dist/lib/browser-context.js.map +1 -1
package/dist/lib/component-linter.d.ts +1 -0
package/dist/lib/component-linter.d.ts.map +1 -1
package/dist/lib/component-linter.js +2620 -663
package/dist/lib/component-linter.js.map +1 -1
package/dist/lib/component-runner.d.ts +17 -58
package/dist/lib/component-runner.d.ts.map +1 -1
package/dist/lib/component-runner.js +932 -1002
package/dist/lib/component-runner.js.map +1 -1
package/dist/lib/test-harness.d.ts +1 -0
package/dist/lib/test-harness.d.ts.map +1 -1
package/dist/lib/test-harness.js.map +1 -1
package/package.json +3 -3

package/dist/lib/component-runner.js CHANGED Viewed

@@ -1,16 +1,38 @@
 "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
@@ -30,65 +52,427 @@ 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.contextUser, 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} not found as window.${libDef.GlobalVariable}`);
+                                }
+                            }
+                        }
+                    }
+                    // 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
+                    // 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));
+                        }
+                    }
+                    const 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
+                    });
+                    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 (Recommendation #5)
+                    const MAX_RENDERS_ALLOWED = 500; // Reasonable limit for complex components
+                    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: `Excessive re-renders detected: ${currentRenderCount} renders (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(`Excessive re-renders: ${currentRenderCount} renders 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) {
+                            window.__testHarnessTestFailed = true;
+                            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-error-boundary'
+                            });
+                            window.__testHarnessTestFailed = true;
+                        }
+                        render() {
+                            if (this.state.hasError) {
+                                // Re-throw to fail hard
+                                throw this.state.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(`Excessive render count: ${renderCount} renders detected`);
+            }
+            // 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 +486,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 +516,554 @@ 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 ? '...' : ''));
+        // Create a map of library definitions from allLibraries
+        const libraryMap = new Map();
+        for (const lib of allLibraries) {
+            libraryMap.set(lib.Name.toLowerCase(), lib);
         }
-        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);
-        }
-        // 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} as window.${libDef.GlobalVariable}`);
+                        }
+                    }
+                    else {
+                        console.error(`  ❌ Failed to load ${specLib.name} - global variable ${libDef.GlobalVariable} not found`);
+                    }
+                }
+                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) => {
+            const errorMsg = `${error.type} error: ${error.message}`;
+            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
-    }
-    /**
-     * 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, contextUser, 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(contextUser));
+        // Create instances in Node.js context
+        const metadata = new core_1.Metadata();
+        const runView = new core_1.RunView();
+        const runQuery = new core_1.RunQuery();
+        // 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 (metadata.Entities) {
+                // Serialize the entities data (remove functions, keep data)
+                entitiesData = JSON.parse(JSON.stringify(metadata.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 metadata.GetEntityObject(entityName, 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 runView.RunView(params, 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 runView.RunViews(params, 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 runQuery.RunQuery(params, 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 +1078,5 @@ 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;
 //# sourceMappingURL=component-runner.js.map