openmagic 0.34.0 → 0.35.0

package/dist/cli.js

@@ -1915,7 +1915,9 @@ function serveToolbarBundle(res) {
 function createProxyServer(targetHost, targetPort, roots) {
   const proxy = httpProxy.createProxyServer({
     target: `http://${targetHost}:${targetPort}`,
-    selfHandleResponse: true
+    selfHandleResponse: true,
+    changeOrigin: true
+    // Rewrite Host header to match upstream — required by Vite 5.4+ and some Next.js setups
     // ws: false — we handle WebSocket upgrades manually in server.on("upgrade")
   });
   const token = getSessionToken();
@@ -2124,7 +2126,11 @@ function verifyPortOwnership(port, expectedDir) {
 }
 async function detectDevServer(cwd = process.cwd()) {
   const scripts = detectDevScripts(cwd);
-  const scriptPorts = scripts.map((s) => s.defaultPort).filter((p, i, a) => a.indexOf(p) === i);
+  const envPort = checkEnvPort(cwd);
+  const scriptPorts = [
+    ...envPort ? [envPort] : [],
+    ...scripts.map((s) => s.defaultPort)
+  ].filter((p, i, a) => a.indexOf(p) === i);
   if (scriptPorts.length > 0) {
     for (const port of scriptPorts) {
       if (await checkPort(port)) {
@@ -2216,6 +2222,56 @@ function detectDevScripts(cwd = process.cwd()) {
   }
   return scripts;
 }
+var FRAMEWORK_NODE_REQUIREMENTS = {
+  "Next.js": { minNode: "18.17.0", label: "Next.js 14+" },
+  "Vite": { minNode: "18.0.0", label: "Vite 5+" },
+  "Angular": { minNode: "18.13.0", label: "Angular 17+" },
+  "SvelteKit": { minNode: "18.13.0", label: "SvelteKit 2+" },
+  "Nuxt": { minNode: "18.0.0", label: "Nuxt 3+" },
+  "Astro": { minNode: "18.14.1", label: "Astro 4+" },
+  "Remix": { minNode: "18.0.0", label: "Remix 2+" },
+  "Create React App": { minNode: "14.0.0", label: "Create React App" },
+  "Gatsby": { minNode: "18.0.0", label: "Gatsby 5+" },
+  "Vue CLI": { minNode: "14.0.0", label: "Vue CLI" },
+  "Webpack": { minNode: "14.0.0", label: "Webpack 5+" },
+  "Parcel": { minNode: "16.0.0", label: "Parcel 2+" }
+};
+function semverGte(a, b) {
+  const pa = a.split(".").map(Number);
+  const pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] || 0) > (pb[i] || 0)) return true;
+    if ((pa[i] || 0) < (pb[i] || 0)) return false;
+  }
+  return true;
+}
+function checkNodeCompatibility(framework) {
+  const req = FRAMEWORK_NODE_REQUIREMENTS[framework];
+  if (!req) return { ok: true };
+  const current = process.versions.node;
+  if (!semverGte(current, req.minNode)) {
+    return {
+      ok: false,
+      message: `${req.label} requires Node.js >= ${req.minNode}, but you are running v${current}`
+    };
+  }
+  return { ok: true };
+}
+function checkEnvPort(cwd = process.cwd()) {
+  const envFiles = [".env.local", ".env.development.local", ".env.development", ".env"];
+  for (const envFile of envFiles) {
+    const envPath = join4(cwd, envFile);
+    if (!existsSync4(envPath)) continue;
+    try {
+      const content = readFileSync4(envPath, "utf-8");
+      const match = content.match(/^PORT\s*=\s*(\d+)/m);
+      if (match) return parseInt(match[1], 10);
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
 function getProjectName(cwd = process.cwd()) {
   const pkgPath = join4(cwd, "package.json");
   if (!existsSync4(pkgPath)) return "this project";
@@ -2359,6 +2415,49 @@ async function healthCheck(proxyPort, _targetPort) {
   }
   console.log("");
 }
+var detectedFramework = null;
+async function validateAppHealth(targetHost, targetPort) {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 8e3);
+    const res = await fetch(`http://${targetHost}:${targetPort}/`, {
+      signal: controller.signal,
+      redirect: "manual",
+      headers: { Accept: "text/html" }
+    });
+    clearTimeout(timeout);
+    const status = res.status;
+    if (status >= 200 && status < 400) return;
+    if (status === 404) {
+      console.log(chalk.yellow('  \u26A0  Your app returned 404 for the root path ("/").'));
+      console.log(chalk.dim("     The dev server is running, but no page matched."));
+      console.log("");
+      if (detectedFramework === "Next.js") {
+        console.log(chalk.dim("     Common Next.js causes:"));
+        console.log(chalk.dim("     \u2022 A stray package-lock.json in a parent directory confuses"));
+        console.log(chalk.dim("       Turbopack's workspace root detection."));
+        console.log(chalk.dim("       \u2192 Check for ~/package-lock.json and remove if unneeded"));
+        console.log(chalk.dim("       \u2192 Or set turbopack.root in next.config (Next.js 15+)"));
+        console.log(chalk.dim("     \u2022 Missing src/app/page.tsx (App Router) or pages/index.tsx"));
+        console.log(chalk.dim("     \u2022 Middleware redirecting all routes to an auth provider"));
+      } else if (detectedFramework === "Angular") {
+        console.log(chalk.dim("     Angular hint: ensure the base href matches the proxy path."));
+      } else if (detectedFramework === "Vite") {
+        console.log(chalk.dim("     Vite hint: check that index.html exists in the project root."));
+      } else {
+        console.log(chalk.dim("     Check your framework's routing configuration."));
+      }
+      console.log("");
+      console.log(chalk.dim("     The toolbar is still available \u2014 navigate to a working route."));
+      console.log("");
+    } else if (status >= 500) {
+      console.log(chalk.yellow(`  \u26A0  Your app returned HTTP ${status} on the root path.`));
+      console.log(chalk.dim("     There may be a server-side error. Check your dev server output."));
+      console.log("");
+    }
+  } catch {
+  }
+}
 var program = new Command();
 program.name("openmagic").description("AI-powered coding toolbar for any web application").version(VERSION2).option("-p, --port <port>", "Dev server port to proxy", "").option(
   "-l, --listen <port>",
@@ -2434,6 +2533,10 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
       }
     }
   }
+  if (!detectedFramework) {
+    const scripts = detectDevScripts();
+    if (scripts.length > 0) detectedFramework = scripts[0].framework;
+  }
   console.log(
     chalk.green(`  \u2713  Dev server running at ${targetHost}:${targetPort}`)
   );
@@ -2462,6 +2565,7 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
     );
     console.log("");
     await healthCheck(proxyPort, targetPort);
+    await validateAppHealth(targetHost, targetPort);
     console.log(chalk.dim("  Press Ctrl+C to stop."));
     console.log(
       chalk.dim("  Errors below are from your dev server, not OpenMagic.")
@@ -2625,6 +2729,18 @@ async function offerToStartDevServer(expectedPort) {
       chosen = scripts[idx];
     }
   }
+  detectedFramework = chosen.framework;
+  const compat = checkNodeCompatibility(chosen.framework);
+  if (!compat.ok) {
+    console.log(chalk.red(`
+  \u2717  ${compat.message}`));
+    console.log("");
+    console.log(chalk.white("  Switch Node.js version before running:"));
+    console.log(chalk.cyan("    nvm use 20"));
+    console.log(chalk.dim("    # then re-run: npx openmagic"));
+    console.log("");
+    return false;
+  }
   let port = expectedPort || chosen.defaultPort;
   let portChanged = false;
   if (await isPortOpen(port)) {
@@ -2750,6 +2866,14 @@ async function offerToStartDevServer(expectedPort) {
       }
     } catch {
     }
+    if (chosen?.framework) {
+      const compat2 = checkNodeCompatibility(chosen.framework);
+      if (!compat2.ok) {
+        console.log(chalk.yellow(`  ${compat2.message}`));
+        console.log(chalk.dim("  Switch with: nvm use 20"));
+        console.log("");
+      }
+    }
     console.log(chalk.white("  Options:"));
     console.log(chalk.dim("  1. Fix the error above and try again"));
     console.log(chalk.dim("  2. Start the server manually, then run:"));