use-vibes 0.1.0

package/dist/tests/browser/hello-world.test.js

@@ -0,0 +1,350 @@
+// tests/browser/hello-world.test.ts
+import { test, expect } from '@playwright/test';
+// Simplified test that tests the core functionality with proper instrumentation
+// This approach completely bypasses network calls for reliable test behavior
+// Set up browser console logging for all tests
+const setupLogging = (page) => {
+    // Forward browser console messages to test output
+    page.on('console', msg => {
+        /* eslint-disable-next-line no-console */
+        console.log(`🌐 ${msg.type()}: ${msg.text()}`);
+    });
+    page.on('pageerror', err => {
+        /* eslint-disable-next-line no-console */
+        console.error(`🔥 Browser error: ${err.message}`);
+    });
+};
+test('page loads with initial content', async ({ page }) => {
+    setupLogging(page);
+    // Navigate to the test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Check that our target element exists
+    const hasTarget = await page.evaluate(() => {
+        const target = document.getElementById('target');
+        /* eslint-disable-next-line no-console */
+        console.log('Target element exists:', !!target);
+        return !!target;
+    });
+    expect(hasTarget).toBe(true);
+    // Get the text content
+    const initialText = await page.textContent('#target');
+    /* eslint-disable-next-line no-console */
+    console.log('Initial text content:', initialText);
+    expect(initialText).toContain('This content will be modified');
+});
+test('useVibes with direct callAI mock', async ({ page }) => {
+    setupLogging(page);
+    // Navigate to the test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Wait for page to load
+    await page.waitForSelector('#target');
+    // Directly inject the mock - this is cleaner than relying on global setup
+    await page.evaluate(() => {
+        // Override callAI with a direct mock implementation
+        // @ts-expect-error - Mock the callAI function with correct type signatures
+        window.callAI = function mockCallAI(_prompt, _options) {
+            // Create HTML with the prompt for verification
+            const html = `
+<div style="background-color: #e6f7ff; padding: 10px; border: 2px solid #1890ff; border-radius: 5px;">
+  <strong>🎭 Vibes received prompt:</strong> "Create a Hello World message with blue styling"
+  <br><small>(Mocked API Response)</small>
+</div>
+      `;
+            // Create a response object matching what callAI would return
+            const responseObj = {
+                html: html,
+                explanation: 'Mock explanation for testing',
+            };
+            // callAI returns a Promise that resolves to a JSON string
+            return Promise.resolve(JSON.stringify(responseObj));
+        };
+        /* eslint-disable-next-line no-console */
+        console.log('🔄 callAI mocked directly on window object');
+        /* eslint-disable-next-line no-console */
+        console.log('🔄 Type of callAI:', typeof window.callAI);
+    });
+    // Verify our target element before modification
+    const initialHtml = await page.evaluate(() => {
+        const target = document.getElementById('target');
+        return target ? target.innerHTML : 'target not found';
+    });
+    /* eslint-disable-next-line no-console */
+    console.log('Target HTML before:', initialHtml);
+    // Execute useVibes on the target element
+    await page.evaluate(() => {
+        try {
+            // Get the target element
+            const target = document.getElementById('target');
+            if (!target)
+                throw new Error('Target element not found!');
+            /* eslint-disable-next-line no-console */
+            console.log('🔄 Applying useVibes to target element');
+            // Set API key for testing
+            window.CALLAI_API_KEY = 'test-api-key';
+            // Call useVibes with test prompt
+            window.useVibes(target, {
+                prompt: 'Create a Hello World message with blue styling',
+            });
+            /* eslint-disable-next-line no-console */
+            console.log('✅ useVibes called successfully');
+        }
+        catch (err) {
+            /* eslint-disable-next-line no-console */
+            console.error('❌ Error calling useVibes:', err.message);
+            /* eslint-disable-next-line no-console */
+            console.error('Stack:', err.stack);
+        }
+    });
+    // Wait for the async operation to complete
+    await page.waitForTimeout(2000);
+    // Check the HTML content after the timeout
+    const finalHtml = await page.evaluate(() => {
+        const target = document.getElementById('target');
+        /* eslint-disable-next-line no-console */
+        console.log('Target element after useVibes:', target ? 'exists' : 'not found');
+        return target ? target.innerHTML : 'target not found';
+    });
+    /* eslint-disable-next-line no-console */
+    console.log('Target HTML after:', finalHtml.substring(0, 200) + '...');
+    // Get the text content for assertions
+    const targetText = await page.textContent('#target');
+    expect(targetText).toContain('Vibes received prompt');
+});
+test('useVibes with direct mock custom configuration', async ({ page }) => {
+    setupLogging(page);
+    // Navigate to the test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Wait for page to load
+    await page.waitForSelector('#target-alt');
+    // Inject the mock implementation for callAI
+    await page.evaluate(() => {
+        // Override callAI with a direct mock implementation
+        // @ts-expect-error - Mock the callAI function
+        window.callAI = function mockCallAI(_prompt, _options) {
+            /* eslint-disable-next-line no-console */
+            console.log('📢 Mock callAI called with prompt:', _prompt.substring(0, 100) + '...');
+            // Create a response with alternative styling for this test
+            const html = `
+<div style="background-color: #fff8e1; padding: 10px; border: 2px solid #ffc107; border-radius: 5px;">
+  <strong>🎭 Vibes received prompt:</strong> "Alternative configuration test"
+  <br><small>(Custom configuration test)</small>
+</div>
+      `;
+            const responseObj = {
+                html: html,
+                explanation: 'Mock explanation for alternative configuration',
+            };
+            return Promise.resolve(JSON.stringify(responseObj));
+        };
+    });
+    // Execute useVibes on the alternative target with custom config
+    await page.evaluate(() => {
+        try {
+            const targetAlt = document.getElementById('target-alt');
+            if (!targetAlt)
+                throw new Error('Alt target element not found!');
+            // Apply with custom config
+            window.useVibes(targetAlt, {
+                prompt: 'Alternative configuration test',
+            });
+        }
+        catch (err) {
+            /* eslint-disable-next-line no-console */
+            console.error('Error in alt config test:', err.message);
+        }
+    });
+    // Wait for async operations
+    await page.waitForTimeout(2000);
+    // Verify the content
+    const targetText = await page.textContent('#target-alt');
+    expect(targetText).toContain('Vibes received prompt');
+    expect(targetText).toContain('Alternative configuration test');
+});
+// Simple diagnostic test to validate our mocking approach
+test('verify mock callAI is actually being called', async ({ page }) => {
+    setupLogging(page);
+    // Navigate to the test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Don't override the mock here - instead use the one from our test bundle
+    // This will properly test that our mocking approach works
+    // Set up an error handler to detect if our diagnostic error is thrown
+    let diagnosticErrorDetected = false;
+    page.on('pageerror', error => {
+        /* eslint-disable-next-line no-console */
+        console.log('📋 Page error detected:', error.message);
+        if (error.message.includes('DIAGNOSTIC_MOCK_ERROR')) {
+            diagnosticErrorDetected = true;
+        }
+    });
+    // Execute useVibes with the diagnostic prompt
+    await page.evaluate(() => {
+        try {
+            const target = document.getElementById('target');
+            if (!target)
+                throw new Error('Target element not found!');
+            /* eslint-disable-next-line no-console */
+            console.log('🔄 Calling useVibes with diagnostic prompt');
+            // Set API key for testing
+            window.CALLAI_API_KEY = 'test-api-key';
+            // The 'Diagnostic test prompt' string is what triggers our special mock behavior
+            window.useVibes(target, {
+                prompt: 'Diagnostic test prompt',
+            });
+            /* eslint-disable-next-line no-console */
+            console.log('✅ useVibes call with diagnostic prompt completed (if this appears, error was caught internally)');
+        }
+        catch (err) {
+            /* eslint-disable-next-line no-console */
+            console.error('❌ Error caught in page context:', err.message);
+        }
+    });
+    // Wait for any async operations and error handlers to complete
+    await page.waitForTimeout(2000);
+    // Check if our diagnostic error HTML element exists in the page
+    const errorElementExists = await page.evaluate(() => {
+        return !!document.getElementById('DIAGNOSTIC_MOCK_ERROR');
+    });
+    /* eslint-disable-next-line no-console */
+    console.log('Diagnostic error element in DOM:', errorElementExists);
+    /* eslint-disable-next-line no-console */
+    console.log('Diagnostic error detected in console:', diagnosticErrorDetected);
+    // The test passes if either the error was detected or the error element exists in the DOM
+    expect(errorElementExists || diagnosticErrorDetected).toBeTruthy();
+});
+test('useVibes should handle errors gracefully', async ({ page }) => {
+    setupLogging(page);
+    // Navigate to the test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Inject mock that simulates an error
+    await page.evaluate(() => {
+        window.callAI = function mockCallAIWithError() {
+            /* eslint-disable-next-line no-console */
+            console.log('🚨 Mock error function called');
+            return Promise.reject(new Error('Simulated API error'));
+        };
+    });
+    // Execute useVibes and expect it to handle the error
+    await page.evaluate(() => {
+        const target = document.getElementById('target');
+        if (target) {
+            window.useVibes(target, {
+                prompt: 'This should fail with an error',
+            });
+        }
+    });
+    // Wait for error handling
+    await page.waitForTimeout(1000);
+    // Verify error message shows in the element
+    const errorContent = await page.textContent('#target');
+    expect(errorContent).toContain('Error');
+});
+test('useVibes with custom configuration options', async ({ page }) => {
+    // Set up API request interception with a custom configuration response
+    await page.route('**/*api.openai.com*/v1/chat/completions', async (route) => {
+        const mockResponse = {
+            choices: [
+                {
+                    message: {
+                        role: 'assistant',
+                        content: JSON.stringify({
+                            html: `<div style="background-color: #fff8e1; padding: 10px; border: 2px solid #ffc107; border-radius: 5px;">
+              <strong>🎭 Vibes received prompt:</strong> "Alternative configuration test" 
+              <br><small>(Custom configuration test response)</small>
+            </div>`,
+                            explanation: 'Mock explanation for custom configuration test',
+                        }),
+                    },
+                    index: 0,
+                },
+            ],
+            id: 'mock-custom-config-id',
+            model: 'gpt-3.5-turbo',
+            object: 'chat.completion',
+        };
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(mockResponse),
+        });
+    });
+    // Also mock the call-ai API endpoint as a fallback
+    await page.route('**/*api.call-ai.com*', async (route) => {
+        const mockResponse = {
+            choices: [
+                {
+                    message: {
+                        role: 'assistant',
+                        content: JSON.stringify({
+                            html: `<div style="background-color: #fff8e1; padding: 10px; border: 2px solid #ffc107; border-radius: 5px;">
+              <strong>🎭 Vibes received prompt:</strong> "Alternative configuration test" 
+              <br><small>(Custom configuration test response)</small>
+            </div>`,
+                            explanation: 'Mock explanation for custom configuration test',
+                        }),
+                    },
+                    index: 0,
+                },
+            ],
+            id: 'mock-custom-config-id',
+            model: 'gpt-3.5-turbo',
+            object: 'chat.completion',
+        };
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(mockResponse),
+        });
+    });
+    // Navigate to test page
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Wait for page to load
+    await page.waitForSelector('#target-alt');
+    // Make sure our mocks are loaded
+    await page.waitForFunction(() => {
+        return window.fetch !== window._originalFetch;
+    }, { timeout: 5000 });
+    // Apply useVibes to the alternative target
+    await page.evaluate(() => {
+        const target = document.getElementById('target-alt');
+        if (!target) {
+            throw new Error('Alternative target element not found');
+        }
+        // Using the global useVibes function
+        window.CALLAI_API_KEY = 'test-api-key'; // Set test API key
+        return useVibes(target, {
+            prompt: 'Alternative configuration test',
+        });
+    });
+    // Wait longer for changes to apply
+    await page.waitForTimeout(200);
+    // Verify the content was changed
+    const targetText = await page.textContent('#target-alt');
+    expect(targetText).toContain('Vibes received prompt');
+    expect(targetText).toContain('Alternative configuration test');
+});
+test('useVibes should handle invalid selector errors', async ({ page }) => {
+    await page.goto('http://localhost:3000/basic/hello-world.html');
+    // Wait for mocks to be set up
+    await page.waitForFunction(() => {
+        return window.fetch !== window._originalFetch;
+    }, { timeout: 5000 });
+    // Test with invalid selector
+    const errorResult = await page.evaluate(async () => {
+        try {
+            // Set test API key
+            window.CALLAI_API_KEY = 'test-api-key';
+            // Try to use a non-existent element with the global useVibes function
+            await useVibes('#non-existent-element', {
+                prompt: 'Test error handling',
+            });
+            return 'No error thrown';
+        }
+        catch (e) {
+            return e instanceof Error ? e.message : String(e);
+        }
+    });
+    // Ensure we got an error message
+    expect(errorResult).not.toBe('No error thrown');
+    expect(typeof errorResult).toBe('string');
+    expect(errorResult.length).toBeGreaterThan(0);
+});

package/dist/tests/browser/helpers.d.ts

@@ -0,0 +1,15 @@
+import { Page } from '@playwright/test';
+/**
+ * Helper function to inject and test the useVibes module in a browser context
+ * This avoids the TypeScript errors from directly importing browser modules in Node.js
+ */
+interface UseVibesConfig {
+    prompt: string;
+    [key: string]: unknown;
+}
+export declare function applyUseVibes(page: Page, selector: string, config: UseVibesConfig): Promise<void>;
+/**
+ * Helper function to apply custom effects in a browser context
+ */
+export declare function applyCustomEffect(page: Page, selector: string, effectFn: string): Promise<void>;
+export {};

package/dist/tests/browser/helpers.js

@@ -0,0 +1,32 @@
+export async function applyUseVibes(page, selector, config) {
+    await page.evaluate(({ selector, config }) => {
+        return new Promise((resolve, reject) => {
+            // Dynamically import the module within the browser context
+            import('../../src/index.js')
+                .then(({ useVibes }) => {
+                const element = document.querySelector(selector);
+                if (!element) {
+                    reject(new Error(`Element not found: ${selector}`));
+                    return;
+                }
+                useVibes(element, config)
+                    .then(() => resolve())
+                    .catch((err) => reject(err));
+            })
+                .catch((err) => reject(err));
+        });
+    }, { selector, config });
+}
+/**
+ * Helper function to apply custom effects in a browser context
+ */
+export async function applyCustomEffect(page, selector, effectFn) {
+    await page.evaluate(({ selector, effectFn }) => {
+        const element = document.querySelector(selector);
+        if (!element)
+            return;
+        // Execute the string function in the browser context
+        const fn = new Function('element', effectFn);
+        fn(element);
+    }, { selector, effectFn });
+}

package/dist/tests/browser/setup-browser-mocks.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/browser/setup-browser-mocks.js

@@ -0,0 +1,242 @@
+// Mock implementation for the browser tests
+// This script will be injected into the test page before any tests run
+(function setupMocks() {
+    // Module interception - CRITICAL: This must run before any other scripts
+    // Create a module-level interception that redirects 'call-ai' imports to our mock
+    // Debug indicator that helps us verify our mock is working
+    window.__MOCK_STATUS__ = {
+        initialized: true,
+        moduleIntercepted: false,
+        callCount: 0,
+        lastPrompt: null,
+        lastOptions: null,
+        lastResponse: null,
+        errors: [],
+    };
+    // Log that we're starting the mock setup
+    /* eslint-disable-next-line no-console */
+    console.log('🔄 MOCK SETUP: Initializing module interception for call-ai');
+    try {
+        // Define our mock implementation that will replace the real callAI
+        const mockCallAI = function (userPrompt, options = {}) {
+            // Track usage
+            window.__MOCK_STATUS__.callCount++;
+            window.__MOCK_STATUS__.lastPrompt = userPrompt;
+            window.__MOCK_STATUS__.lastOptions = options;
+            /* eslint-disable-next-line no-console */
+            console.log(`🔍 MOCK CALL #${window.__MOCK_STATUS__.callCount}: callAI invoked with:`, typeof userPrompt === 'string'
+                ? userPrompt.substring(0, 100) + '...'
+                : '[non-string-prompt]');
+            // Check if this is an error test case
+            if (typeof userPrompt === 'string' &&
+                (userPrompt.includes('error') || userPrompt.includes('fail'))) {
+                /* eslint-disable-next-line no-console */
+                console.log('🚨 MOCK: Simulating error response');
+                return Promise.reject(new Error('Simulated error from mock callAI'));
+            }
+            // Extract the actual request from the longer prompt
+            let extractedPrompt = 'Default prompt';
+            if (typeof userPrompt === 'string') {
+                const promptMatch = userPrompt.match(/Transform the HTML content based on this request:\s*([^\n]+)/);
+                if (promptMatch && promptMatch[1]) {
+                    extractedPrompt = promptMatch[1].trim();
+                }
+                else if (userPrompt.includes('Alternative configuration test')) {
+                    extractedPrompt = 'Alternative configuration test';
+                }
+            }
+            // Create response HTML based on the prompt content
+            let htmlContent;
+            let explanationText;
+            if (extractedPrompt.includes('Alternative configuration')) {
+                htmlContent = `<div style="background-color: #fff8e1; padding: 10px; border: 2px solid #ffc107; border-radius: 5px;">
+          <strong>🎭 Vibes received prompt:</strong> "Alternative configuration test"
+          <br><small>(Alternative config mock response)</small>
+        </div>`;
+                explanationText = 'Mock explanation for alternative configuration';
+            }
+            else {
+                htmlContent = `<div style="background-color: #eefbff; padding: 10px; border: 2px solid #0099cc; border-radius: 5px;">
+          <strong>🎭 Vibes received prompt:</strong> "${extractedPrompt}"
+          <br><small>(This is a mock response from browser test)</small>
+        </div>`;
+                explanationText = 'This is a mock explanation from the browser test';
+            }
+            // Create the structured response object that matches the schema in useVibes
+            const responseObj = {
+                html: htmlContent,
+                explanation: explanationText,
+            };
+            // Store for debugging
+            window.__MOCK_STATUS__.lastResponse = responseObj;
+            /* eslint-disable-next-line no-console */
+            console.log('✅ MOCK: Created JSON response:', JSON.stringify(responseObj).substring(0, 100) + '...');
+            // Return a properly structured response that matches what useVibes expects
+            return Promise.resolve(JSON.stringify(responseObj));
+        };
+        // Create a mock module object that matches the structure of the real call-ai module
+        const mockModule = {
+            callAI: mockCallAI,
+            __isMock: true,
+        };
+        // Attempt multiple interception strategies for maximum browser compatibility
+        // Strategy 1: Intercept dynamic imports
+        // This works with newer module bundlers like Vite, Webpack, etc.
+        const originalImport = window.import;
+        window.import = function (specifier) {
+            if (specifier === 'call-ai') {
+                /* eslint-disable-next-line no-console */
+                console.log('🎯 MOCK: Import intercepted for call-ai module');
+                window.__MOCK_STATUS__.moduleIntercepted = true;
+                return Promise.resolve(mockModule);
+            }
+            return originalImport.apply(this, arguments);
+        };
+        // Strategy 2: Define the module globally for ESM imports to find
+        // Helps with static imports which can't be intercepted directly
+        window.mockCallAI = mockCallAI;
+        // Also set window.callAI for direct access tests
+        window.callAI = mockCallAI;
+        /* eslint-disable-next-line no-console */
+        console.log('✅ MOCK SETUP: Module interception complete - callAI has been mocked');
+    }
+    catch (error) {
+        console.error('❌ MOCK SETUP ERROR:', error);
+        window.__MOCK_STATUS__.errors.push(error.message);
+    }
+    // Flag to indicate mocks are initialized
+    window.mockInitialized = true;
+    // eslint-disable-next-line no-console
+    console.log('-----------------------------------------------------------');
+    // eslint-disable-next-line no-console
+    console.log('🔧 MOCK SETUP: Setting up call-ai mocks for browser tests...');
+    // eslint-disable-next-line no-console
+    console.log('-----------------------------------------------------------');
+    // Create a global debug flag to track what's happening with our mocks
+    window.MOCK_DEBUG = {
+        mockCallsCount: 0,
+        lastPrompt: null,
+        lastResponse: null,
+    };
+    // Mock the callAI function directly to ensure tests work correctly
+    // This is the most reliable way to mock the call-ai module
+    window.callAI = function mockCallAI(userPrompt, options = {}) {
+        window.MOCK_DEBUG.mockCallsCount++;
+        // eslint-disable-next-line no-console
+        console.log('🔄 MOCK INTERCEPTED: callAI invoked - call #', window.MOCK_DEBUG.mockCallsCount);
+        // eslint-disable-next-line no-console
+        console.log('📝 MOCK PROMPT:', typeof userPrompt === 'string' ? userPrompt.substring(0, 100) + '...' : 'Non-string prompt');
+        // eslint-disable-next-line no-console
+        console.log('⚙️ MOCK OPTIONS:', JSON.stringify(options));
+        // Store the prompt for debugging
+        window.MOCK_DEBUG.lastPrompt = userPrompt;
+        window.MOCK_DEBUG.lastOptions = options;
+        // Extract the actual request from the longer prompt - more robust regex handling
+        let extractedPrompt = 'Default prompt';
+        if (typeof userPrompt === 'string') {
+            const promptMatch = userPrompt.match(/Transform the HTML content based on this request:\s*([^\n]+)/);
+            if (promptMatch && promptMatch[1]) {
+                extractedPrompt = promptMatch[1].trim();
+            }
+            else if (userPrompt.includes('Alternative configuration test')) {
+                extractedPrompt = 'Alternative configuration test';
+            }
+            else if (userPrompt.includes('error') || userPrompt.includes('fail')) {
+                extractedPrompt = 'Error simulation test';
+            }
+            else {
+                // Just use a substring as a fallback - don't let tests fail because of regex
+                extractedPrompt = userPrompt.length > 50 ? userPrompt.substring(0, 50) + '...' : userPrompt;
+            }
+        }
+        // eslint-disable-next-line no-console
+        console.log('🔍 EXTRACTED PROMPT:', extractedPrompt);
+        // Check if this is an error test case
+        if (extractedPrompt.includes('error') || extractedPrompt.includes('fail')) {
+            // eslint-disable-next-line no-console
+            console.log('🚨 SIMULATING ERROR RESPONSE');
+            return Promise.reject(new Error('Simulated error from mock callAI'));
+        }
+        // Create response based on the prompt content
+        let htmlContent;
+        let explanationText;
+        if (extractedPrompt.includes('Alternative configuration')) {
+            // Custom response for alternative config test
+            htmlContent = `<div style="background-color: #fff8e1; padding: 10px; border: 2px solid #ffc107; border-radius: 5px;">
+        <strong>🎭 Vibes received prompt:</strong> "Alternative configuration test"
+        <br><small>(Alternative config mock response)</small>
+      </div>`;
+            explanationText = 'Mock explanation for alternative configuration';
+        }
+        else {
+            // Default response
+            htmlContent = `<div style="background-color: #eefbff; padding: 10px; border: 2px solid #0099cc; border-radius: 5px;">
+        <strong>🎭 Vibes received prompt:</strong> "${extractedPrompt}"
+        <br><small>(This is a mock response from browser test)</small>
+      </div>`;
+            explanationText = 'This is a mock explanation from the browser test';
+        }
+        // Create the response object in the exact format that useVibes expects
+        const responseObj = {
+            html: htmlContent,
+            explanation: explanationText,
+        };
+        // Store the response for debugging
+        window.MOCK_DEBUG.lastResponse = responseObj;
+        // eslint-disable-next-line no-console
+        console.log('✅ MOCK RESPONSE CREATED:', JSON.stringify(responseObj).substring(0, 100) + '...');
+        // useVibes expects a Promise that resolves to a string (JSON)
+        return Promise.resolve(JSON.stringify(responseObj));
+    };
+    // As a fallback, also mock fetch for any direct API calls
+    // Store the original fetch
+    window._originalFetch = window.fetch;
+    // Mock the fetch API for call-ai
+    window.fetch = async function mockedFetch(url, options) {
+        // Check if this is a call to the AI API
+        if (url && (url.includes('api.call-ai.com') || url.includes('api/v1/chat/completions'))) {
+            // eslint-disable-next-line no-console
+            console.log('Intercepted fetch call to:', url);
+            // Parse the request body to get the prompt
+            const requestBody = JSON.parse(options.body);
+            let promptText = '';
+            // Extract prompt from messages
+            if (requestBody.messages && requestBody.messages.length > 0) {
+                const lastMessage = requestBody.messages[requestBody.messages.length - 1];
+                promptText = lastMessage.content || '';
+            }
+            // Create a properly formatted mock response
+            const mockResponse = {
+                choices: [
+                    {
+                        message: {
+                            role: 'assistant',
+                            content: JSON.stringify({
+                                html: `<div>🎭 Vibes received prompt: "${promptText}"</div>`,
+                                explanation: 'This is a mock explanation from the browser test',
+                            }),
+                        },
+                        index: 0,
+                    },
+                ],
+                id: 'mock-response-id',
+                model: 'gpt-3.5-turbo',
+                object: 'chat.completion',
+            };
+            // Return a Response object with the mock data
+            return new Response(JSON.stringify(mockResponse), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        // For any other fetch calls, use the original implementation
+        return window._originalFetch(url, options);
+    };
+    // eslint-disable-next-line no-console
+    console.log('-----------------------------------------------------------');
+    // eslint-disable-next-line no-console
+    console.log('✅ MOCK SETUP COMPLETE: All mocks for callAI and fetch API ready!');
+    // eslint-disable-next-line no-console
+    console.log('-----------------------------------------------------------');
+})();
+export {};

package/dist/tests/vibe.test.d.ts

@@ -0,0 +1 @@
+export {};