@codeyam/codeyam-cli 0.1.0-staging.dbc742d → 0.1.0-staging.df25827

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

@@ -1,4 +1,4 @@
-import { parseClientErrors } from "../app/lib/clientErrors.js";
+import { parseClientErrors, parseVisibleText } from "../app/lib/clientErrors.js";
 describe('parseClientErrors', () => {
     it('extracts console.error lines', () => {
         const output = `[JournalCapture] Page console.error: Uncaught TypeError: x is not a function`;
@@ -36,5 +36,72 @@ describe('parseClientErrors', () => {
         const output = `[JournalCapture] Screenshot saved\n[JournalCapture] Done`;
         expect(parseClientErrors(output)).toEqual([]);
     });
+    it('extracts HTTP error status lines (e.g. 404)', () => {
+        const output = `[JournalCapture] HTTP error: status=404, url=http://localhost:3112/library/collections/col-1`;
+        expect(parseClientErrors(output)).toEqual([
+            'HTTP error: status=404, url=http://localhost:3112/library/collections/col-1',
+        ]);
+    });
+    it('extracts HTTP 500 error status lines', () => {
+        const output = `[JournalCapture] HTTP error: status=500, url=http://localhost:3112/api/crash`;
+        expect(parseClientErrors(output)).toEqual([
+            'HTTP error: status=500, url=http://localhost:3112/api/crash',
+        ]);
+    });
+    it('collects HTTP errors alongside console errors', () => {
+        const output = [
+            `[JournalCapture] HTTP error: status=404, url=http://localhost:3112/missing`,
+            `[JournalCapture] Page console.error: Cannot read properties of null`,
+        ].join('\n');
+        expect(parseClientErrors(output)).toEqual([
+            'HTTP error: status=404, url=http://localhost:3112/missing',
+            'Cannot read properties of null',
+        ]);
+    });
+    it('extracts API response error lines with response body', () => {
+        const output = `[JournalCapture] API response error: GET http://localhost:3112/api/items/abc-123 → 404 — {"error":"not found"}`;
+        expect(parseClientErrors(output)).toEqual([
+            'API response error: GET http://localhost:3112/api/items/abc-123 → 404 — {"error":"not found"}',
+        ]);
+    });
+    it('collects API response errors alongside HTTP errors and console errors', () => {
+        const output = [
+            `[JournalCapture] HTTP error: status=404, url=http://localhost:3112/page/abc`,
+            `[JournalCapture] API response error: GET http://localhost:3112/api/items/abc-123 → 404 — {"error":"Item not found"}`,
+            `[JournalCapture] Page console.error: Unhandled error in component`,
+        ].join('\n');
+        expect(parseClientErrors(output)).toEqual([
+            'HTTP error: status=404, url=http://localhost:3112/page/abc',
+            'API response error: GET http://localhost:3112/api/items/abc-123 → 404 — {"error":"Item not found"}',
+            'Unhandled error in component',
+        ]);
+    });
+});
+describe('parseVisibleText', () => {
+    it('extracts visible text from capture output', () => {
+        const output = '[JournalCapture] Visible text: Save to Library | Tech Chronicle';
+        expect(parseVisibleText(output)).toBe('Save to Library | Tech Chronicle');
+    });
+    it('returns null when no visible text line exists', () => {
+        const output = '[JournalCapture] Page loaded: status=200';
+        expect(parseVisibleText(output)).toBeNull();
+    });
+    it('extracts empty page marker', () => {
+        const output = '[JournalCapture] Visible text: (empty page)';
+        expect(parseVisibleText(output)).toBe('(empty page)');
+    });
+    it('extracts from multi-line output with other log lines', () => {
+        const output = [
+            '[JournalCapture] Page loaded: status=200, url=http://localhost:3113/',
+            '[JournalCapture] Page title: Margo',
+            '[JournalCapture] Visible text: Save to Library | Tech Chronicle | The Future of Web Dev',
+            '[JournalCapture] RESULT:{"success":true,"path":"/tmp/screenshot.png"}',
+        ].join('\n');
+        expect(parseVisibleText(output)).toBe('Save to Library | Tech Chronicle | The Future of Web Dev');
+    });
+    it('extracts extraction failure marker', () => {
+        const output = '[JournalCapture] Visible text: (extraction failed)';
+        expect(parseVisibleText(output)).toBe('(extraction failed)');
+    });
 });
 //# sourceMappingURL=clientErrors.test.js.map

package/codeyam-cli/src/webserver/__tests__/clientErrors.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"clientErrors.test.js","sourceRoot":"","sources":["../../../../../src/webserver/__tests__/clientErrors.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,8EAA8E,CAAC;QAC9F,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxC,yCAAyC;SAC1C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACxC,MAAM,MAAM,GAAG,uGAAuG,CAAC;QACvH,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxC,sFAAsF;SACvF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,MAAM,GAAG;YACb,qGAAqG;YACrG,uGAAuG;YACvG,sDAAsD;SACvD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxC,sFAAsF;YACtF,iBAAiB;SAClB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,MAAM,GAAG;YACb,2GAA2G;YAC3G,uGAAuG;SACxG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxC,sFAAsF;SACvF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,MAAM,GAAG,0DAA0D,CAAC;QAC1E,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"clientErrors.test.js","sourceRoot":"","sources":["../../../../../src/webserver/__tests__/clientErrors.test.ts"],"names":[],"mappings":"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"}

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
@@ -391,6 +409,24 @@ describe('editorProxy', () => {
             // Should track which keys were set for cleanup
             expect(script).toContain('__codeyam_ls_keys__');
         });
+        it('should emit gated localStorage.clear() when prototypeId is provided and config is null', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            const script = buildLocalStorageScript(null, 'scenario-123', 'proto-abc');
+            // Should not be empty — prototypeId triggers a clear script
+            expect(script).not.toBe('');
+            expect(script).toContain('localStorage.clear()');
+            // Should be gated by the __codeyam_proto__ marker
+            expect(script).toContain('__codeyam_proto__');
+            expect(script).toContain('proto-abc');
+        });
+        it('should clean up previous keys when prototypeId is absent but scenarioId is present', () => {
+            const { buildLocalStorageScript } = require('../editorProxy');
+            // 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');
             const config = { my_key: 'my_value' };
@@ -415,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', () => {
@@ -493,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;
@@ -546,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