@embeddables/cli 0.7.19 → 0.8.1

package/dist/prompts/projects.js

@@ -0,0 +1,92 @@
+import pc from 'picocolors';
+import { getAuthenticatedSupabaseClient } from '../auth/index.js';
+import { prompt } from '../helpers/prompt.js';
+import * as stdout from '../stdout.js';
+/**
+ * Fetch all non-archived projects from Supabase
+ */
+export async function fetchProjects() {
+    const supabase = await getAuthenticatedSupabaseClient();
+    if (!supabase) {
+        return [];
+    }
+    try {
+        const { data, error } = await supabase
+            .from('projects')
+            .select(`
+        id,
+        title,
+        group_id,
+        groups (
+          title
+        )
+      `)
+            .not('archived', 'is', 'true')
+            .order('title', { ascending: true });
+        if (error) {
+            stdout.warn(pc.yellow(`Could not fetch projects: ${error.message}`));
+            return [];
+        }
+        const projects = (data || []).map((row) => ({
+            id: row.id,
+            title: row.title || null,
+            org_id: row.group_id || null,
+            org_title: 
+            // For some reason, I can't get Supabase typings to return this as an object
+            // (not an array of objects) so I have to convert it manually
+            row.groups?.title || null,
+        }));
+        projects.sort((a, b) => {
+            if (a.title && !b.title)
+                return -1;
+            if (!a.title && b.title)
+                return 1;
+            const aLabel = a.title || a.id;
+            const bLabel = b.title || b.id;
+            return aLabel.localeCompare(bLabel, undefined, { sensitivity: 'base' });
+        });
+        return projects;
+    }
+    catch (err) {
+        stdout.warn(pc.yellow(`Could not fetch projects: ${err}`));
+        return [];
+    }
+}
+/**
+ * Prompt the user to select a project from the list
+ * Returns null if no projects found, user cancels, or user selects "skip"
+ */
+export async function promptForProject(options = {}) {
+    const { allowSkip = false, message = 'Select a project:' } = options;
+    const projects = await fetchProjects();
+    if (projects.length === 0) {
+        stdout.print(pc.yellow('No projects found.'));
+        return null;
+    }
+    const choices = projects.map((p) => ({
+        title: p.title || p.id,
+        description: p.org_title ? `${p.org_title} (${p.id})` : p.id,
+        value: p.id,
+    }));
+    if (allowSkip) {
+        choices.push({
+            title: pc.dim('Skip for now'),
+            description: 'You can set this later',
+            value: '__skip__',
+        });
+    }
+    const response = await prompt({
+        type: 'autocomplete',
+        name: 'id',
+        message,
+        choices,
+        suggest: (input, choices) => Promise.resolve(choices.filter((c) => c.value === '__skip__' ||
+            (c.title?.toLowerCase().includes(input.toLowerCase()) ?? false) ||
+            String(c.value).toLowerCase().includes(input.toLowerCase()) ||
+            c.description?.toLowerCase().includes(input.toLowerCase()))),
+    });
+    if (!response.id || response.id === '__skip__') {
+        return null;
+    }
+    return projects.find((p) => p.id === response.id) || null;
+}

package/dist/prompts/versions.d.ts

@@ -0,0 +1,18 @@
+export interface VersionInfo {
+    version_number: number;
+    created_at: string | null;
+}
+/**
+ * Fetch up to 100 most recent version numbers for an embeddable (flow).
+ * Uses flow_versions for the given flow_id and branch (null = main).
+ * Returns unique version numbers in descending order.
+ */
+export declare function fetchRecentVersions(flowId: string, branchId: string | null): Promise<VersionInfo[]>;
+/**
+ * Prompt the user to select a version from the list.
+ * Returns the selected version number, or null for "Latest".
+ */
+export declare function promptForVersion(versions: VersionInfo[], options?: {
+    message?: string;
+}): Promise<number | null>;
+//# sourceMappingURL=versions.d.ts.map

package/dist/prompts/versions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"versions.d.ts","sourceRoot":"","sources":["../../src/prompts/versions.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAID;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,OAAO,CAAC,WAAW,EAAE,CAAC,CA8CxB;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,WAAW,EAAE,EACvB,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GACjC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA2CxB"}

package/dist/prompts/versions.js

@@ -0,0 +1,95 @@
+import pc from 'picocolors';
+import { getAuthenticatedSupabaseClient } from '../auth/index.js';
+import { prompt } from '../helpers/prompt.js';
+import * as stdout from '../stdout.js';
+import { formatDate } from '../helpers/dates.js';
+const RECENT_VERSIONS_LIMIT = 100;
+/**
+ * Fetch up to 100 most recent version numbers for an embeddable (flow).
+ * Uses flow_versions for the given flow_id and branch (null = main).
+ * Returns unique version numbers in descending order.
+ */
+export async function fetchRecentVersions(flowId, branchId) {
+    const supabase = await getAuthenticatedSupabaseClient();
+    if (!supabase) {
+        return [];
+    }
+    try {
+        let query = supabase
+            .from('flow_versions')
+            .select('version_number, created_at')
+            .eq('flow_id', flowId)
+            .order('version_number', { ascending: false })
+            .limit(RECENT_VERSIONS_LIMIT * 2); // fetch extra then dedupe
+        if (branchId === null) {
+            query = query.is('branch_id', null);
+        }
+        else {
+            query = query.eq('branch_id', branchId);
+        }
+        const { data, error } = await query;
+        if (error) {
+            stdout.warn(pc.yellow(`Could not fetch versions: ${error.message}`));
+            return [];
+        }
+        // Dedupe by version_number, preserving order (most recent first)
+        const seen = new Set();
+        const versions = [];
+        for (const row of data || []) {
+            const v = row.version_number;
+            if (typeof v !== 'number' || seen.has(v))
+                continue;
+            seen.add(v);
+            versions.push({
+                version_number: v,
+                created_at: row.created_at ?? null,
+            });
+            if (versions.length >= RECENT_VERSIONS_LIMIT)
+                break;
+        }
+        return versions;
+    }
+    catch (err) {
+        stdout.warn(pc.yellow(`Could not fetch versions: ${err}`));
+        return [];
+    }
+}
+/**
+ * Prompt the user to select a version from the list.
+ * Returns the selected version number, or null for "Latest".
+ */
+export async function promptForVersion(versions, options = {}) {
+    const choices = [];
+    if (versions.length === 0) {
+        choices.push({
+            title: pc.bold('Latest'),
+            value: 'latest',
+            description: 'Current published version',
+        });
+    }
+    else {
+        for (let i = 0; i < versions.length; i++) {
+            const v = versions[i];
+            const date = v.created_at ? formatDate(v.created_at) : '';
+            const isLatest = i === 0;
+            choices.push({
+                title: isLatest ? `Version ${v.version_number} (Latest)` : `Version ${v.version_number}`,
+                value: isLatest ? 'latest' : v.version_number,
+                description: date || undefined,
+            });
+        }
+    }
+    const response = await prompt({
+        type: 'autocomplete',
+        name: 'version',
+        message: options.message ?? 'Select a version to pull:',
+        choices,
+        suggest: (input, choicesList) => Promise.resolve(choicesList.filter((c) => c.value === 'latest' ||
+            String(c.value).includes(input) ||
+            (typeof c.title === 'string' && c.title.toLowerCase().includes(input.toLowerCase())))),
+    });
+    if (response.version === 'latest' || response.version === undefined) {
+        return null;
+    }
+    return typeof response.version === 'number' ? response.version : null;
+}

package/dist/proxy/injectApiInterceptor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Injects a script that intercepts fetch/XHR calls to the remote engine
+ * and rewrites them to go through the local proxy instead.
+ */
+export declare function injectApiInterceptor(html: string, remoteOrigin: string): string;
+//# sourceMappingURL=injectApiInterceptor.d.ts.map

package/dist/proxy/injectApiInterceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectApiInterceptor.d.ts","sourceRoot":"","sources":["../../src/proxy/injectApiInterceptor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAiE/E"}

package/dist/proxy/injectApiInterceptor.js

@@ -0,0 +1,66 @@
+/**
+ * Injects a script that intercepts fetch/XHR calls to the remote engine
+ * and rewrites them to go through the local proxy instead.
+ */
+export function injectApiInterceptor(html, remoteOrigin) {
+    // This script needs to run BEFORE any other scripts, so inject into <head>
+    const lower = html.toLowerCase();
+    const headCloseIndex = lower.indexOf('</head>');
+    // The interceptor script - patches fetch and XMLHttpRequest
+    const interceptorScript = `<script>(function(){
+  var remoteOrigin = ${JSON.stringify(remoteOrigin)};
+  var localOrigin = window.location.origin;
+
+  // Helper to rewrite URLs
+  function rewriteUrl(url) {
+    if (typeof url === 'string' && url.startsWith(remoteOrigin)) {
+      var newUrl = url.replace(remoteOrigin, localOrigin);
+      console.log('[DevProxy] Intercepted:', url, '->', newUrl);
+      return newUrl;
+    }
+    if (url instanceof URL && url.origin === remoteOrigin) {
+      var newUrl = new URL(url.pathname + url.search + url.hash, localOrigin);
+      console.log('[DevProxy] Intercepted:', url.href, '->', newUrl.href);
+      return newUrl;
+    }
+    return url;
+  }
+
+  // Patch fetch
+  var originalFetch = window.fetch;
+  window.fetch = function(input, init) {
+    if (typeof input === 'string') {
+      input = rewriteUrl(input);
+    } else if (input instanceof Request) {
+      var newUrl = rewriteUrl(input.url);
+      if (newUrl !== input.url) {
+        input = new Request(newUrl, input);
+      }
+    } else if (input instanceof URL) {
+      input = rewriteUrl(input);
+    }
+    return originalFetch.call(this, input, init);
+  };
+
+  // Patch XMLHttpRequest
+  var originalXHROpen = XMLHttpRequest.prototype.open;
+  XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
+    url = rewriteUrl(url);
+    return originalXHROpen.call(this, method, url, async, user, password);
+  };
+
+  console.log('[DevProxy] API interceptor installed, rewriting', remoteOrigin, 'to', localOrigin);
+})();</script>`;
+    const injection = `\n${interceptorScript}\n`;
+    if (headCloseIndex === -1) {
+        // No </head> tag found; try to inject after <head> or at the start
+        const headOpenIndex = lower.indexOf('<head>');
+        if (headOpenIndex !== -1) {
+            const insertPos = headOpenIndex + '<head>'.length;
+            return html.slice(0, insertPos) + injection + html.slice(insertPos);
+        }
+        // No head at all, prepend to document
+        return injection + html;
+    }
+    return html.slice(0, headCloseIndex) + injection + html.slice(headCloseIndex);
+}

package/dist/proxy/injectReload.d.ts

@@ -0,0 +1,2 @@
+export declare function injectReloadScript(html: string): string;
+//# sourceMappingURL=injectReload.d.ts.map

package/dist/proxy/injectReload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectReload.d.ts","sourceRoot":"","sources":["../../src/proxy/injectReload.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAkBvD"}

package/dist/proxy/injectReload.js

@@ -0,0 +1,14 @@
+export function injectReloadScript(html) {
+    const lower = html.toLowerCase();
+    const bodyCloseIndex = lower.lastIndexOf('</body>');
+    const reloadScript = '<script>(function(){' +
+        'var es = new EventSource("/__embeddables_reload");' +
+        'es.addEventListener("reload", function() { window.location.reload(); });' +
+        '})();</script>';
+    const injection = `\n${reloadScript}\n`;
+    if (bodyCloseIndex === -1) {
+        // No </body> tag found; append at the end
+        return html + injection;
+    }
+    return html.slice(0, bodyCloseIndex) + injection + html.slice(bodyCloseIndex);
+}

package/dist/proxy/injectWorkbench.d.ts

@@ -0,0 +1,5 @@
+export declare function injectWorkbenchHtml(html: string, opts: {
+    embeddableId: string;
+    workbenchOrigin?: string;
+}): string;
+//# sourceMappingURL=injectWorkbench.d.ts.map

package/dist/proxy/injectWorkbench.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectWorkbench.d.ts","sourceRoot":"","sources":["../../src/proxy/injectWorkbench.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAAE,GACvD,MAAM,CA8BR"}

package/dist/proxy/injectWorkbench.js

@@ -0,0 +1,22 @@
+export function injectWorkbenchHtml(html, opts) {
+    const lower = html.toLowerCase();
+    const bodyCloseIndex = lower.lastIndexOf('</body>');
+    const isLocalDev = !opts.workbenchOrigin;
+    const container = '<div id="__embeddables_workbench_root"></div>';
+    const configScript = `<script>(function(){` +
+        'window.__EMBEDDABLES_WORKBENCH = window.__EMBEDDABLES_WORKBENCH || {};' +
+        `window.__EMBEDDABLES_WORKBENCH.embeddableId = ${JSON.stringify(opts.embeddableId)};` +
+        `window.__EMBEDDABLES_WORKBENCH.localDev = ${JSON.stringify(isLocalDev)};` +
+        '})();</script>';
+    // When a remote origin is provided, load from the CDN; otherwise use the local proxy path.
+    const jsUrl = opts.workbenchOrigin
+        ? `${opts.workbenchOrigin}/workbench.js`
+        : '/__embeddables_workbench.js';
+    const scriptTag = `<script src="${jsUrl}" onload="if(typeof window.__embeddables_bootstrap_workbench==='function'){window.__embeddables_bootstrap_workbench({embeddableId:window.__EMBEDDABLES_WORKBENCH.embeddableId,localDev:window.__EMBEDDABLES_WORKBENCH.localDev});}"></script>`;
+    const injection = `\n${container}\n${configScript}\n${scriptTag}\n`;
+    if (bodyCloseIndex === -1) {
+        // No </body> tag found; append at the end
+        return html + injection;
+    }
+    return html.slice(0, bodyCloseIndex) + injection + html.slice(bodyCloseIndex);
+}

package/dist/proxy/server.d.ts

@@ -0,0 +1,11 @@
+export declare function startProxyServer(opts: {
+    port: number;
+    engineOrigin: string;
+    overrideRoute: string;
+    generatedJsonPath: string;
+    embeddableId: string;
+    watchWorkbench?: boolean;
+}): Promise<{
+    broadcastReload: () => void;
+}>;
+//# sourceMappingURL=server.d.ts.map

package/dist/proxy/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/proxy/server.ts"],"names":[],"mappings":"AAoCA,wBAAsB,gBAAgB,CAAC,IAAI,EAAE;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;GA+TA"}

package/dist/proxy/server.js

@@ -0,0 +1,304 @@
+import express from 'express';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import * as esbuild from 'esbuild';
+import chokidar from 'chokidar';
+import postcss from 'postcss';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+import { attachSse } from './sse.js';
+import { injectWorkbenchHtml } from './injectWorkbench.js';
+import { injectReloadScript } from './injectReload.js';
+import { injectApiInterceptor } from './injectApiInterceptor.js';
+import { WORKBENCH_CDN_ORIGIN } from '../constants.js';
+import * as stdout from '../stdout.js';
+// Resolve the CLI package root so workbench paths work regardless of cwd.
+// This file lives at  src/proxy/server.ts  (or  dist/proxy/server.js  when compiled),
+// so the package root is two directories up.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const CLI_ROOT = path.resolve(__dirname, '..', '..');
+/**
+ * Detect whether the CLI is running from a local development checkout
+ * (e.g. via `npm link` or `tsx`) rather than a regular `npm install -g`.
+ *
+ * Heuristic: the `src/workbench/` source directory only exists in the repo
+ * checkout — it is excluded from the published package (`files` in package.json
+ * only ships `bin/` and `dist/`).
+ */
+function isLocalDev() {
+    const workbenchSrcDir = path.join(CLI_ROOT, 'src', 'workbench', 'index.tsx');
+    return fs.existsSync(workbenchSrcDir);
+}
+export async function startProxyServer(opts) {
+    const app = express();
+    const localDev = isLocalDev();
+    // ---------- Local-dev mode: build workbench from source ----------
+    // Resolve workbench paths relative to the CLI package root, not process.cwd()
+    const workbenchEntry = path.join(CLI_ROOT, 'src', 'workbench', 'index.tsx');
+    const workbenchDir = path.join(CLI_ROOT, 'src', 'workbench');
+    const workbenchCssEntry = path.join(CLI_ROOT, 'src', 'workbench', 'workbench.css');
+    let workbenchBundle = null;
+    let workbenchCss = null;
+    // The origin used when injecting the workbench <script>/<link> tags.
+    // undefined  → local proxy paths  (/__embeddables_workbench.{js,css})
+    // string     → remote CDN origin  (e.g. https://embeddables-workbench.heysavvy.workers.dev)
+    const workbenchOrigin = localDev ? undefined : WORKBENCH_CDN_ORIGIN;
+    if (localDev) {
+        stdout.print('[Workbench] Local dev mode — building workbench from source');
+    }
+    else {
+        stdout.print(`[Workbench] Installed mode — loading workbench from CDN (${WORKBENCH_CDN_ORIGIN})`);
+    }
+    const buildWorkbench = async () => {
+        try {
+            const result = await esbuild.build({
+                entryPoints: [workbenchEntry],
+                bundle: true,
+                format: 'iife',
+                globalName: '__EmbeddablesWorkbenchBundle',
+                platform: 'browser',
+                write: false,
+                sourcemap: 'inline',
+            });
+            const outputFile = result.outputFiles?.[0];
+            if (outputFile) {
+                workbenchBundle = outputFile.contents;
+            }
+            else {
+                workbenchBundle = null;
+            }
+            const rawCss = fs.readFileSync(workbenchCssEntry, 'utf8');
+            const cssResult = await postcss([tailwindcss(), autoprefixer]).process(rawCss, {
+                from: workbenchCssEntry,
+            });
+            workbenchCss = cssResult.css;
+            if (workbenchBundle) {
+                stdout.print('[Workbench] Bundle built successfully');
+                return true;
+            }
+            stdout.warn('[Workbench] Bundle build completed but no output file found');
+            return false;
+        }
+        catch (err) {
+            stdout.warn(`[Workbench] Failed to build Workbench bundle. Workbench UI will be unavailable. ${err instanceof Error ? err.message : String(err)}`);
+            workbenchCss = null;
+            return false;
+        }
+    };
+    // Only build from source in local-dev mode
+    if (localDev) {
+        await buildWorkbench();
+    }
+    // Add JSON body parsing middleware
+    app.use(express.json());
+    app.use(express.urlencoded({ extended: true }));
+    const { broadcastReload } = attachSse(app);
+    // Watch workbench files if enabled (only meaningful in local-dev mode)
+    if (localDev && opts.watchWorkbench) {
+        const workbenchGlob = path.join(workbenchDir, '**/*');
+        const watcher = chokidar.watch(workbenchGlob, {
+            ignoreInitial: true,
+        });
+        let rebuildTimeout;
+        watcher.on('all', async () => {
+            clearTimeout(rebuildTimeout);
+            rebuildTimeout = setTimeout(async () => {
+                stdout.print('[Workbench] Files changed, rebuilding bundle...');
+                const success = await buildWorkbench();
+                if (success) {
+                    broadcastReload();
+                    stdout.print('[Workbench] Bundle rebuilt and reload broadcast');
+                }
+            }, 100);
+        });
+        stdout.print(`[Workbench] Watching ${workbenchGlob} for changes`);
+    }
+    // Serve the Workbench bundle as a static asset (local-dev mode only)
+    if (localDev) {
+        app.get('/__embeddables_workbench.js', (_req, res) => {
+            if (!workbenchBundle) {
+                res
+                    .status(503)
+                    .type('text/plain')
+                    .send('Workbench bundle is not available. Check dev server logs.');
+                return;
+            }
+            res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-store');
+            res.send(Buffer.from(workbenchBundle));
+        });
+        app.get('/__embeddables_workbench.css', (_req, res) => {
+            if (!workbenchCss) {
+                res
+                    .status(503)
+                    .type('text/plain')
+                    .send('Workbench CSS is not available. Check dev server logs.');
+                return;
+            }
+            res.setHeader('Content-Type', 'text/css; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-store');
+            res.send(workbenchCss);
+        });
+    }
+    // Intercept GET requests to overrideRoute: convert to POST and add generated JSON to body
+    app.get(opts.overrideRoute, async (req, res) => {
+        stdout.print(`[/init] Intercepted GET ${opts.overrideRoute}, query: ${JSON.stringify(req.query)}`);
+        try {
+            // Load the generated JSON
+            const raw = fs.readFileSync(opts.generatedJsonPath, 'utf8');
+            const generatedJson = JSON.parse(raw);
+            generatedJson.id = opts.embeddableId;
+            stdout.print(`[/init] Loaded local JSON, pages: ${generatedJson.pages?.length ?? 0}`);
+            // When the flow has content_sources (CMS), the remote engine needs flow metadata
+            // (project_id) to load them. Without an engine that supports dev + CMS, the request
+            // fails. So we omit content_sources so the page loads; CMS-backed content will be
+            // empty in dev.
+            const hasContentSources = Array.isArray(generatedJson.content_sources) && generatedJson.content_sources.length > 0;
+            const flowToSend = hasContentSources
+                ? (() => {
+                    const { content_sources: _, ...rest } = generatedJson;
+                    return rest;
+                })()
+                : generatedJson;
+            if (hasContentSources) {
+                stdout.print(`[/init] Omitting content_sources so dev loads (CMS content will be empty in preview).`);
+            }
+            // Create POST request body with the JSON
+            const postBody = {
+                json: {
+                    flow: flowToSend,
+                    flowId: generatedJson.id,
+                    groupId: 'group_test',
+                },
+            };
+            // Build the target URL with query parameters
+            const queryString = new URLSearchParams(req.query).toString();
+            const targetUrl = `${opts.engineOrigin}/init${queryString ? `?${queryString}` : ''}`;
+            stdout.print(`[/init] Forwarding to engine: POST ${targetUrl}`);
+            // Forward headers from original request (excluding problematic ones)
+            const headers = {};
+            for (const [key, value] of Object.entries(req.headers)) {
+                if (!['host', 'connection', 'content-length'].includes(key.toLowerCase())) {
+                    if (typeof value === 'string') {
+                        headers[key] = value;
+                    }
+                    else if (Array.isArray(value) && value.length > 0) {
+                        headers[key] = value[0];
+                    }
+                }
+            }
+            headers['Content-Type'] = 'application/json';
+            // Forward the modified request to the engine as POST
+            const engineResponse = await fetch(targetUrl, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(postBody),
+            });
+            // Parse and forward the response
+            const responseBody = await engineResponse.json();
+            stdout.print(`[/init] Engine response: status=${engineResponse.status}, hasFlow=${!!responseBody?.flow}, flowPages=${responseBody?.flow?.pages?.length ?? 'N/A'}`);
+            res.setHeader('Content-Type', 'application/json; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-store');
+            return res.status(engineResponse.status).send(JSON.stringify(responseBody));
+        }
+        catch (err) {
+            stdout.error(`Failed to modify /init request: ${err instanceof Error ? err.message : String(err)}`);
+            if (!res.headersSent) {
+                res.status(500).json({
+                    error: 'Failed to modify /init request',
+                    details: err?.message ?? String(err),
+                    path: opts.generatedJsonPath,
+                });
+            }
+        }
+    });
+    // For GET / from localhost: fetch HTML from engine, inject Workbench, then send.
+    // This avoids selfHandleResponse/responseInterceptor which were causing the proxy to hang.
+    app.get('/', async (req, res, next) => {
+        const host = (req.headers.host ?? '').toString();
+        const isLocalhost = host.startsWith('localhost') || host.startsWith('127.0.0.1');
+        stdout.print(`[Workbench] GET / handler: host=${host}, isLocalhost=${isLocalhost}, url=${req.url}`);
+        if (!isLocalhost) {
+            stdout.print('[Workbench] Not localhost, skipping injection');
+            return next();
+        }
+        const targetUrl = `${opts.engineOrigin}${req.url}`;
+        stdout.print(`[Workbench] Fetching from engine: ${targetUrl}`);
+        try {
+            const headers = {};
+            for (const [key, value] of Object.entries(req.headers)) {
+                if (!['host', 'connection'].includes(key.toLowerCase())) {
+                    if (typeof value === 'string')
+                        headers[key] = value;
+                    else if (Array.isArray(value) && value[0])
+                        headers[key] = value[0];
+                }
+            }
+            const engineRes = await fetch(targetUrl, { method: 'GET', headers });
+            const contentType = engineRes.headers.get('content-type') ?? '';
+            stdout.print(`[Workbench] Engine response: status=${engineRes.status}, content-type=${contentType}`);
+            if (!contentType.includes('text/html')) {
+                stdout.print('[Workbench] Not HTML, proxying normally');
+                return next();
+            }
+            const html = await engineRes.text();
+            stdout.print(`[Workbench] Got HTML (${html.length} chars), injecting Workbench...`);
+            let modifiedHtml = html;
+            // If proxying to a remote engine, inject API interceptor to rewrite absolute URLs
+            const isRemoteEngine = !opts.engineOrigin.includes('localhost') && !opts.engineOrigin.includes('127.0.0.1');
+            if (isRemoteEngine) {
+                modifiedHtml = injectApiInterceptor(modifiedHtml, opts.engineOrigin);
+                stdout.print(`[Workbench] Injected API interceptor for ${opts.engineOrigin}`);
+            }
+            modifiedHtml = injectReloadScript(modifiedHtml);
+            const includeWorkbench = req.query?.workbench !== 'false';
+            if (includeWorkbench) {
+                modifiedHtml = injectWorkbenchHtml(modifiedHtml, {
+                    embeddableId: opts.embeddableId,
+                    workbenchOrigin,
+                });
+            }
+            else {
+                console.log('[Workbench] Skipping workbench (workbench=false in URL)');
+            }
+            stdout.print(`[Workbench] Injection complete (${modifiedHtml.length} chars), sending response`);
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', engineRes.headers.get('cache-control') ?? 'no-store');
+            res.status(engineRes.status).send(modifiedHtml);
+        }
+        catch (err) {
+            stdout.error(`[Workbench] Error fetching/injecting HTML: ${err instanceof Error ? err.message : String(err)}`);
+            next();
+        }
+    });
+    // Proxy everything else to the engine (no response interception)
+    app.use('/', createProxyMiddleware({
+        target: opts.engineOrigin,
+        changeOrigin: true,
+        ws: true,
+        on: {
+            proxyReq: (proxyReq, req) => {
+                stdout.print(`[Proxy] ${req.method} ${req.url} → ${opts.engineOrigin}${req.url}`);
+            },
+            error: (err, req, res) => {
+                // ECONNRESET/ECONNABORTED often happen when the client navigates away or the
+                // upstream closes the connection; treat as non-fatal and log at debug level.
+                const code = err?.code ?? err?.errno;
+                const isConnectionClosed = code === 'ECONNRESET' || code === 'ECONNABORTED' || code === -54;
+                if (isConnectionClosed) {
+                    stdout.print(`[Proxy] Connection closed (client or upstream): ${err.message}`);
+                }
+                else {
+                    stdout.error(`[Proxy] Error proxying request: ${err instanceof Error ? err.message : String(err)}`);
+                }
+                if (!res.headersSent) {
+                    res.status(500).send('Proxy error');
+                }
+            },
+        },
+    }));
+    app.listen(opts.port);
+    return { broadcastReload };
+}