@codeyam/codeyam-cli 0.1.0-staging.9574237 → 0.1.0-staging.a2f381a

package/codeyam-cli/src/webserver/__tests__/editorProxy.test.js

@@ -1,6 +1,6 @@
 import http from 'http';
 import zlib from 'zlib';
-import { injectHealthScript, PREVIEW_HEALTH_SCRIPT, getPreviewHealthReport, resetPreviewHealth, } from "../editorProxy.js";
+import { injectHealthScript, PREVIEW_HEALTH_SCRIPT, getPreviewHealthReport, resetPreviewHealth, buildErrorPage, escapeHtml, } from "../editorProxy.js";
 describe('editorProxy', () => {
     describe('normalizeTargetUrl', () => {
         it('should leave localhost as-is (no longer normalizes to 127.0.0.1)', () => {
@@ -198,6 +198,14 @@ describe('editorProxy', () => {
             const result = injectHealthScript(html);
             expect(result).toContain('data-codeyam-health');
         });
+        it('should use 100ms settle delay for network-idle detection', () => {
+            // The settle delay determines how long after all fetch() calls complete
+            // before the preview is shown. 100ms is enough for React to re-render.
+            expect(PREVIEW_HEALTH_SCRIPT).toContain('}, 100)');
+        });
+        it('should use 200ms fallback for static pages with no fetches', () => {
+            expect(PREVIEW_HEALTH_SCRIPT).toContain('}, 200)');
+        });
     });
     describe('preview health endpoint', () => {
         let targetServer;
@@ -352,10 +360,20 @@ describe('editorProxy', () => {
         });
     });
     describe('buildLocalStorageScript', () => {
-        it('should return empty string when no localStorage config', () => {
+        it('should clean up previous keys when no localStorage config but scenarioId is present', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            // When switching to a scenario WITHOUT localStorage from one that HAD it,
+            // the script must clean up the previous scenario's keys so stale filters
+            // don't persist and hide data.
+            const script = buildLocalStorageScript(null, 'scenario-123');
+            expect(script).toContain('__codeyam_ls_keys__');
+            expect(script).toContain('removeItem');
+            expect(script).toContain('clear:scenario-123');
+        });
+        it('should return empty string when no localStorage config and no scenarioId', () => {
             const { buildLocalStorageScript } = require('../editorProxy');
-            expect(buildLocalStorageScript(null, 'scenario-123')).toBe('');
-            expect(buildLocalStorageScript(undefined, 'scenario-123')).toBe('');
+            expect(buildLocalStorageScript(null, '')).toBe('');
+            expect(buildLocalStorageScript(undefined, '')).toBe('');
         });
         it('should emit cleanup script when localStorage config is empty object', () => {
             // BUG FIX: When switching from a scenario with localStorage data to one
@@ -401,12 +419,13 @@ describe('editorProxy', () => {
             expect(script).toContain('__codeyam_proto__');
             expect(script).toContain('proto-abc');
         });
-        it('should not emit clear script when prototypeId is absent and config is null', () => {
+        it('should clean up previous keys when prototypeId is absent but scenarioId is present', () => {
             const { buildLocalStorageScript } = require('../editorProxy');
-            // No prototypeId — same as before
-            expect(buildLocalStorageScript(null, 'scenario-123')).toBe('');
-            expect(buildLocalStorageScript(null, 'scenario-123', null)).toBe('');
-            expect(buildLocalStorageScript(undefined, 'scenario-123', null)).toBe('');
+            // No prototypeId but scenarioId — cleanup previous scenario's keys
+            const script1 = buildLocalStorageScript(null, 'scenario-123');
+            expect(script1).toContain('removeItem');
+            const script2 = buildLocalStorageScript(null, 'scenario-123', null);
+            expect(script2).toContain('removeItem');
         });
         it('should clean up keys from previous scenario before setting new ones', () => {
             const { buildLocalStorageScript } = require('../editorProxy');
@@ -432,6 +451,67 @@ describe('editorProxy', () => {
             expect(script).toContain('array_key');
             expect(script).toContain('[1,2,3]');
         });
+        it('should include localStorage mutation watcher that sends postMessage on changes', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            const config = { my_key: 'my_value' };
+            const script = buildLocalStorageScript(config, 'scenario-1');
+            // Should hook setItem, removeItem, and clear
+            expect(script).toContain('__codeyam_orig_setItem__');
+            expect(script).toContain('__codeyam_orig_removeItem__');
+            expect(script).toContain('__codeyam_orig_clear__');
+            // Should send postMessage to parent
+            expect(script).toContain('codeyam-localstorage-changed');
+            expect(script).toContain('postMessage');
+            // Should filter out internal codeyam keys
+            expect(script).toContain('__codeyam_');
+        });
+        it('should include localStorage mutation watcher even for empty localStorage config', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            const script = buildLocalStorageScript({}, 'scenario-1');
+            // Empty config still needs the watcher since the app may write to localStorage
+            expect(script).toContain('codeyam-localstorage-changed');
+        });
+        it('should include a listener for codeyam-get-localstorage requests', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            const config = { my_key: 'my_value' };
+            const script = buildLocalStorageScript(config, 'scenario-1');
+            // Should listen for get-localstorage requests from parent
+            expect(script).toContain('codeyam-get-localstorage');
+            expect(script).toContain('codeyam-localstorage-state');
+        });
+        it('should not include mutation watcher when no localStorage config and no scenarioId', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            // No config AND no scenarioId — returns empty string
+            expect(buildLocalStorageScript(null, '')).toBe('');
+        });
+        it('should re-seed localStorage when scenario data changes even if ID is the same', () => {
+            // BUG: When a scenario is re-registered with updated data (e.g., adding
+            // collections to articles), the scenario ID stays the same. The guard
+            // checked only the ID, so the browser skipped re-seeding and showed stale
+            // data. The screenshot (captured by Playwright with a fresh browser)
+            // showed the new data, but the live preview didn't.
+            const { buildLocalStorageScript } = require('../editorProxy');
+            const originalData = {
+                articles: '[{"id":"a1","title":"Test"}]',
+            };
+            const updatedData = {
+                articles: '[{"id":"a1","title":"Test","collectionIds":["c1"]}]',
+                collections: '[{"id":"c1","name":"Dev"}]',
+            };
+            const script1 = buildLocalStorageScript(originalData, 'scenario-abc');
+            const script2 = buildLocalStorageScript(updatedData, 'scenario-abc');
+            // Both scripts use the same scenario ID
+            expect(script1).toContain('scenario-abc');
+            expect(script2).toContain('scenario-abc');
+            // The guard values must be DIFFERENT so the browser re-seeds
+            // Extract the guard comparison value from each script
+            const guardPattern = /__codeyam_ls_sid__.*?===\s*([^\)]+)\)/;
+            const guard1 = script1.match(guardPattern)?.[1];
+            const guard2 = script2.match(guardPattern)?.[1];
+            expect(guard1).toBeDefined();
+            expect(guard2).toBeDefined();
+            expect(guard1).not.toEqual(guard2);
+        });
     });
     describe('localStorage injection in HTML responses', () => {
         it('should inject localStorage script before health script in HTML', () => {
@@ -510,6 +590,121 @@ describe('editorProxy', () => {
             expect(response.headers.get('content-encoding')).toBeNull();
         });
     });
+    describe('session cookie injection into requests', () => {
+        let targetServer;
+        let targetPort;
+        let tempDir;
+        let receivedCookies;
+        let originalProjectRoot;
+        beforeEach(() => {
+            const fs = require('fs');
+            const path = require('path');
+            const os = require('os');
+            const { getProjectRoot } = require('../../state');
+            const { setProjectRoot } = require('../../state');
+            originalProjectRoot = getProjectRoot();
+            tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'proxy-req-cookie-'));
+            setProjectRoot(tempDir);
+            receivedCookies = undefined;
+        });
+        afterEach(async () => {
+            const { stopEditorProxy, invalidateScenarioCache, } = require('../editorProxy');
+            const { setProjectRoot } = require('../../state');
+            invalidateScenarioCache();
+            await stopEditorProxy();
+            if (targetServer?.listening) {
+                await new Promise((resolve) => targetServer.close(() => resolve()));
+            }
+            if (originalProjectRoot) {
+                setProjectRoot(originalProjectRoot);
+            }
+            const fs = require('fs');
+            fs.rmSync(tempDir, { recursive: true, force: true });
+            resetPreviewHealth();
+        });
+        it('should forward seed adapter session cookies in the request Cookie header', async () => {
+            const fs = require('fs');
+            const path = require('path');
+            const { startEditorProxy, invalidateScenarioCache, } = require('../editorProxy');
+            // Set up scenario files
+            const scenarioId = 'integration-auth-test';
+            const codeyamDir = path.join(tempDir, '.codeyam');
+            const scenariosDir = path.join(codeyamDir, 'editor-scenarios');
+            fs.mkdirSync(scenariosDir, { recursive: true });
+            fs.writeFileSync(path.join(codeyamDir, 'active-scenario.json'), JSON.stringify({ scenarioId, type: 'application' }));
+            fs.writeFileSync(path.join(scenariosDir, `${scenarioId}.json`), JSON.stringify({
+                type: 'application',
+                seed: { user: [{ id: '1' }] },
+                sessionCookies: [
+                    {
+                        name: 'sb-test-auth-token',
+                        value: '{"access_token":"test-jwt","refresh_token":"test-ref"}',
+                        path: '/',
+                        sameSite: 'Lax',
+                    },
+                ],
+            }));
+            // Target server that captures the request Cookie header
+            targetServer = http.createServer((req, res) => {
+                receivedCookies = req.headers.cookie;
+                res.writeHead(200, { 'Content-Type': 'text/plain' });
+                res.end('OK');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            // Invalidate to force re-read of scenario data
+            invalidateScenarioCache();
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            // Make request WITHOUT any cookies (simulates first iframe load after scenario switch)
+            await fetch(`http://127.0.0.1:${result.port}/library`);
+            // The target server should have received the injected auth cookie
+            expect(receivedCookies).toBeDefined();
+            expect(receivedCookies).toContain('sb-test-auth-token=');
+            expect(receivedCookies).toContain('test-jwt');
+        });
+        it('should merge injected cookies with existing browser cookies', async () => {
+            const fs = require('fs');
+            const path = require('path');
+            const { startEditorProxy, invalidateScenarioCache, } = require('../editorProxy');
+            const scenarioId = 'integration-merge-test';
+            const codeyamDir = path.join(tempDir, '.codeyam');
+            const scenariosDir = path.join(codeyamDir, 'editor-scenarios');
+            fs.mkdirSync(scenariosDir, { recursive: true });
+            fs.writeFileSync(path.join(codeyamDir, 'active-scenario.json'), JSON.stringify({ scenarioId, type: 'application' }));
+            fs.writeFileSync(path.join(scenariosDir, `${scenarioId}.json`), JSON.stringify({
+                type: 'application',
+                seed: {},
+                session: { cookieValue: 'sess_alice' },
+                sessionCookies: [
+                    { name: 'sb-auth', value: 'supabase-jwt', path: '/' },
+                ],
+            }));
+            targetServer = http.createServer((req, res) => {
+                receivedCookies = req.headers.cookie;
+                res.writeHead(200, { 'Content-Type': 'text/plain' });
+                res.end('OK');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            invalidateScenarioCache();
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            // Make request WITH an existing cookie (simulates browser that already has cookies)
+            await fetch(`http://127.0.0.1:${result.port}/library`, {
+                headers: { Cookie: 'other-cookie=existing-value' },
+            });
+            // Should have both the existing cookie and the injected ones
+            expect(receivedCookies).toContain('other-cookie=existing-value');
+            expect(receivedCookies).toContain('session-token=sess_alice');
+            expect(receivedCookies).toContain('sb-auth=supabase-jwt');
+        });
+    });
     describe('Cache-Control on HTML responses', () => {
         let targetServer;
         let targetPort;
@@ -563,5 +758,243 @@ describe('editorProxy', () => {
             expect(response.headers.get('cache-control')).toBeNull();
         });
     });
+    describe('escapeHtml', () => {
+        it('should escape ampersands, angle brackets, and quotes', () => {
+            expect(escapeHtml('<script>alert("xss")</script>')).toBe('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+        });
+        it('should escape single quotes', () => {
+            expect(escapeHtml("it's")).toBe('it&#39;s');
+        });
+        it('should return empty string for empty input', () => {
+            expect(escapeHtml('')).toBe('');
+        });
+        it('should leave safe text unchanged', () => {
+            expect(escapeHtml('Hello world 123')).toBe('Hello world 123');
+        });
+    });
+    describe('buildErrorPage', () => {
+        it('should generate a complete HTML document', () => {
+            const page = buildErrorPage(500, 'Internal Server Error', 'something broke');
+            expect(page).toContain('<!DOCTYPE html>');
+            expect(page).toContain('<html');
+            expect(page).toContain('</html>');
+        });
+        it('should include the status code and title', () => {
+            const page = buildErrorPage(502, 'Dev Server Unreachable', 'details here');
+            expect(page).toContain('502');
+            expect(page).toContain('Dev Server Unreachable');
+        });
+        it('should include the error detail text', () => {
+            const page = buildErrorPage(500, 'Error', 'Connection refused on port 3000');
+            expect(page).toContain('Connection refused on port 3000');
+        });
+        it('should escape HTML in the detail to prevent XSS', () => {
+            const page = buildErrorPage(500, 'Error', '<script>alert("xss")</script>');
+            expect(page).not.toContain('<script>alert("xss")</script>');
+            expect(page).toContain('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+        });
+        it('should include codeyam-server-error postMessage', () => {
+            const page = buildErrorPage(500, 'Error', 'detail');
+            expect(page).toContain('codeyam-server-error');
+            expect(page).toContain('postMessage');
+        });
+        it('should NOT include codeyam-preview-ready postMessage', () => {
+            const page = buildErrorPage(500, 'Error', 'detail');
+            expect(page).not.toContain('codeyam-preview-ready');
+        });
+        it('should include a retry button that sends codeyam-server-error-retry', () => {
+            const page = buildErrorPage(500, 'Error', 'detail');
+            expect(page).toContain('codeyam-server-error-retry');
+            // Should have a button element
+            expect(page).toMatch(/<button[^>]*>/i);
+        });
+        it('should include the status code in the postMessage data', () => {
+            const page = buildErrorPage(502, 'Unreachable', 'detail');
+            // The postMessage should include statusCode: 502
+            expect(page).toContain('502');
+        });
+        it('should escape HTML in the title to prevent XSS', () => {
+            const page = buildErrorPage(500, '<img onerror=alert(1)>', 'detail');
+            expect(page).not.toContain('<img onerror=alert(1)>');
+            expect(page).toContain('&lt;img onerror=alert(1)&gt;');
+        });
+        it('should handle multiline error detail', () => {
+            const detail = 'Error on line 1\nStack trace line 2\nStack trace line 3';
+            const page = buildErrorPage(500, 'Error', detail);
+            expect(page).toContain('Error on line 1');
+            expect(page).toContain('Stack trace line 3');
+        });
+        it('should handle empty detail', () => {
+            const page = buildErrorPage(500, 'Error', '');
+            expect(page).toContain('<!DOCTYPE html>');
+            expect(page).toContain('codeyam-server-error');
+        });
+    });
+    describe('5xx error page serving', () => {
+        let targetServer;
+        let targetPort;
+        afterEach(async () => {
+            const { stopEditorProxy } = require('../editorProxy');
+            await stopEditorProxy();
+            if (targetServer?.listening) {
+                await new Promise((resolve) => targetServer.close(() => resolve()));
+            }
+        });
+        it('should serve an error page instead of raw HTML for 500 responses', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(500, { 'Content-Type': 'text/html' });
+                res.end('<html><body>Internal Server Error</body></html>');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/`);
+            expect(response.status).toBe(500);
+            const body = await response.text();
+            // Should contain the friendly error page, not the raw error
+            expect(body).toContain('codeyam-server-error');
+            expect(body).toContain('Internal Server Error');
+        });
+        it('should NOT replace non-HTML 500 responses', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'server error' }));
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/api/data`);
+            expect(response.status).toBe(500);
+            const body = await response.text();
+            // JSON responses should pass through unchanged
+            expect(body).toContain('"error":"server error"');
+            expect(body).not.toContain('codeyam-server-error');
+        });
+        it('should serve an error page for 500 responses with no content type', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            // Simulates Next.js returning bare "Internal Server Error" with no Content-Type
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(500);
+                res.end('Internal Server Error');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/`);
+            expect(response.status).toBe(500);
+            const body = await response.text();
+            expect(body).toContain('codeyam-server-error');
+            expect(body).toContain('<!DOCTYPE html>');
+            expect(body).toContain('Internal Server Error');
+        });
+        it('should serve an error page for 500 text/plain responses', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(500, { 'Content-Type': 'text/plain' });
+                res.end('Something went wrong');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/`);
+            expect(response.status).toBe(500);
+            const body = await response.text();
+            expect(body).toContain('codeyam-server-error');
+            expect(body).toContain('Something went wrong');
+        });
+        it('should serve an error page for 503 responses', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(503, { 'Content-Type': 'text/html' });
+                res.end('<html><body>Service Unavailable</body></html>');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/`);
+            expect(response.status).toBe(503);
+            const body = await response.text();
+            expect(body).toContain('codeyam-server-error');
+        });
+        it('should serve an error page for POST requests returning 500', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(500, { 'Content-Type': 'text/html' });
+                res.end('<html><body>POST Error</body></html>');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/api/action`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ test: true }),
+            });
+            expect(response.status).toBe(500);
+            const body = await response.text();
+            expect(body).toContain('codeyam-server-error');
+            expect(body).toContain('POST Error');
+        });
+        it('should NOT serve an error page for 4xx responses', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            targetServer = http.createServer((_req, res) => {
+                res.writeHead(404, { 'Content-Type': 'text/html' });
+                res.end('<html><body>Not Found</body></html>');
+            });
+            await new Promise((resolve) => targetServer.listen(0, '127.0.0.1', () => resolve()));
+            targetPort = targetServer.address().port;
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: `http://localhost:${targetPort}`,
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/missing`);
+            expect(response.status).toBe(404);
+            const body = await response.text();
+            // 4xx should pass through normally (with health script injected, not error page)
+            expect(body).not.toContain('codeyam-server-error');
+            expect(body).toContain('Not Found');
+        });
+        it('should serve an HTML error page for 502 connection failures', async () => {
+            const { startEditorProxy } = require('../editorProxy');
+            // No target server — connection will fail
+            const result = await startEditorProxy({
+                port: 0,
+                targetUrl: 'http://127.0.0.1:19999',
+            });
+            expect(result).not.toBeNull();
+            const response = await fetch(`http://127.0.0.1:${result.port}/`);
+            expect(response.status).toBe(502);
+            const body = await response.text();
+            expect(body).toContain('codeyam-server-error');
+            expect(body).toContain('<!DOCTYPE html>');
+        });
+    });
 });
 //# sourceMappingURL=editorProxy.test.js.map