openmagic 0.31.5 → 0.31.7

package/README.md

@@ -14,6 +14,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue?style=flat-square)](https://www.typescriptlang.org/)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](https://github.com/Kalmuraee/OpenMagic/pulls)
 [![Node](https://img.shields.io/node/v/openmagic?style=flat-square)](https://nodejs.org/)
+[![Hits](https://hits.sh/github.com/Kalmuraee/OpenMagic.svg?style=flat-square&label=views&color=6c5ce7)](https://hits.sh/github.com/Kalmuraee/OpenMagic/)
 
 OpenMagic injects a floating AI toolbar into your running web app via reverse proxy.
 Select any element, describe what you want, review the diff, approve — your code updates and HMR refreshes the page.
@@ -43,7 +44,7 @@ npm run dev
 npx openmagic@latest
 ```
 
-Run `npx openmagic@latest` from your project folder so it can find your source files and dev server. A proxied version of your app opens with the AI toolbar overlaid. That is it.
+Run this from your project folder so OpenMagic can find your source files and dev server. A proxied version of your app opens with the toolbar overlaid.
 
 ---
 
@@ -90,7 +91,7 @@ OpenMagic is a single-port reverse proxy. It sits between your browser and your
 3. **Server** -- Local Node.js process handling file I/O and proxying LLM calls. API keys never leave your machine.
 4. **HMR** -- When the AI modifies source files, your dev server's hot module replacement picks up changes automatically.
 
-Stop with `Ctrl+C`. No files modified. No dependencies added. No traces.
+Stop with `Ctrl+C`. Nothing stays behind.
 
 ---
 
@@ -181,11 +182,9 @@ npx openmagic --port 3000
 
 ## Known Limitations
 
-Honesty matters. Here is what you should know:
-
-- **Origin change** -- Your app runs on `:3000` but is accessed via `:4567`. This can affect OAuth redirect URIs, `localStorage` isolation, and Service Worker scope. Most dev workflows are unaffected, but apps that depend on `window.location.origin` may need dev config adjustments.
-- **CSP via meta tags** -- OpenMagic strips CSP response headers to allow the toolbar script, but CSP defined in `<meta>` tags cannot be modified at the proxy level and may block the toolbar on strict pages.
-- **Not for production** -- OpenMagic is a development tool. Do not deploy the proxy to production.
+- **Origin change** -- Your app runs on `:3000` but you access it via `:4567`. This can break OAuth redirect URIs, `localStorage` isolation, and Service Worker scope. Most dev setups work fine, but if your app checks `window.location.origin`, you may need to adjust your dev config.
+- **CSP via meta tags** -- OpenMagic strips CSP response headers so the toolbar script can load, but `<meta>` tag CSP can't be modified at the proxy level and may still block it.
+- **Not for production** -- This is a dev tool. Don't deploy the proxy to production.
 
 ---
 
@@ -220,15 +219,17 @@ OpenMagic works via reverse proxy, so it supports any framework that serves HTML
 
 ## Contributing
 
+PRs are welcome. Bug fixes, new providers, UI improvements, docs.
+
 ```bash
 git clone https://github.com/Kalmuraee/OpenMagic.git
 cd OpenMagic
 npm install
 npm run build
-node dist/cli.js --port 3000
+node dist/cli.js --port 3000   # Test with your dev server
 ```
 
-See the repo for project structure and contribution guidelines.
+See **[CONTRIBUTING.md](./CONTRIBUTING.md)** for the architecture overview, how to add providers, and PR process.
 
 ---
 

package/dist/cli.js

@@ -4,7 +4,7 @@
 import { Command } from "commander";
 import chalk from "chalk";
 import open from "open";
-import { resolve as resolve2, join as join5 } from "path";
+import { resolve as resolve3, join as join5 } from "path";
 import { existsSync as existsSync5, readFileSync as readFileSync5 } from "fs";
 import { spawn } from "child_process";
 import { createInterface } from "readline";
@@ -1849,7 +1849,8 @@ function buildInjectionScript(token) {
 // src/detect.ts
 import { createConnection } from "net";
 import { readFileSync as readFileSync4, existsSync as existsSync4 } from "fs";
-import { join as join4 } from "path";
+import { join as join4, resolve as resolve2 } from "path";
+import { execSync } from "child_process";
 var COMMON_DEV_PORTS = [
   3e3,
   // React (CRA), Next.js, Express
@@ -1883,19 +1884,19 @@ var COMMON_DEV_PORTS = [
   // Flask (last — macOS AirPlay also uses 5000)
 ];
 function checkPortSingle(port, host) {
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     const socket = createConnection({ port, host, timeout: 500 });
     socket.on("connect", () => {
       socket.destroy();
-      resolve3(true);
+      resolve4(true);
     });
     socket.on("error", () => {
       socket.destroy();
-      resolve3(false);
+      resolve4(false);
     });
     socket.on("timeout", () => {
       socket.destroy();
-      resolve3(false);
+      resolve4(false);
     });
   });
 }
@@ -1907,12 +1908,45 @@ async function checkPort(port, host = "127.0.0.1") {
   ]);
   return results.some(Boolean);
 }
-async function detectDevServer() {
-  const scripts = detectDevScripts();
+function verifyPortOwnership(port, expectedDir) {
+  try {
+    const pidOutput = execSync(`lsof -i :${port} -sTCP:LISTEN -t 2>/dev/null`, {
+      encoding: "utf-8",
+      timeout: 3e3
+    }).trim();
+    if (!pidOutput) return null;
+    const pids = pidOutput.split("\n").map((p) => p.trim()).filter(Boolean);
+    const expected = resolve2(expectedDir);
+    for (const pid of pids) {
+      try {
+        const cwdOutput = execSync(
+          `lsof -a -p ${pid} -d cwd -Fn 2>/dev/null | grep ^n | head -1`,
+          { encoding: "utf-8", timeout: 3e3 }
+        ).trim();
+        if (!cwdOutput) continue;
+        const processCwd = resolve2(cwdOutput.slice(1));
+        if (processCwd === expected || expected.startsWith(processCwd) || processCwd.startsWith(expected)) {
+          return true;
+        }
+      } catch {
+        continue;
+      }
+    }
+    return false;
+  } catch {
+    return null;
+  }
+}
+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);
   if (scriptPorts.length > 0) {
     for (const port of scriptPorts) {
       if (await checkPort(port)) {
+        const owned = verifyPortOwnership(port, cwd);
+        if (owned === false) {
+          continue;
+        }
         return { port, host: "localhost", fromScripts: true };
       }
     }
@@ -1923,8 +1957,10 @@ async function detectDevServer() {
     return isOpen ? port : null;
   });
   const results = await Promise.all(checks);
-  const foundPort = results.find((p) => p !== null);
-  if (foundPort) {
+  for (const foundPort of results) {
+    if (foundPort === null) continue;
+    const owned = verifyPortOwnership(foundPort, cwd);
+    if (owned === false) continue;
     return { port: foundPort, host: "localhost", fromScripts: false };
   }
   return null;
@@ -1932,6 +1968,16 @@ async function detectDevServer() {
 async function isPortOpen(port) {
   return checkPort(port);
 }
+async function findAvailablePort(startPort) {
+  let port = startPort;
+  while (await isPortOpen(port)) {
+    port++;
+    if (port > startPort + 100) {
+      throw new Error(`Could not find an available port near ${startPort}`);
+    }
+  }
+  return port;
+}
 var FRAMEWORK_PATTERNS = [
   { match: /\bnext\b/, framework: "Next.js", defaultPort: 3e3 },
   { match: /\bvite\b/, framework: "Vite", defaultPort: 5173 },
@@ -2044,27 +2090,27 @@ var lastDetectedPort = null;
 var VERSION2 = "0.31.1";
 function ask(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     rl.question(question, (answer) => {
       rl.close();
-      resolve3(answer.trim());
+      resolve4(answer.trim());
     });
   });
 }
 function waitForPort(port, timeoutMs = 3e4, shouldAbort) {
   const start = Date.now();
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     const check = async () => {
       if (shouldAbort?.()) {
-        resolve3(false);
+        resolve4(false);
         return;
       }
       if (await isPortOpen(port)) {
-        resolve3(true);
+        resolve4(true);
         return;
       }
       if (Date.now() - start > timeoutMs) {
-        resolve3(false);
+        resolve4(false);
         return;
       }
       setTimeout(check, 500);
@@ -2073,7 +2119,7 @@ function waitForPort(port, timeoutMs = 3e4, shouldAbort) {
   });
 }
 function runCommand(cmd, args, cwd = process.cwd()) {
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     try {
       const child = spawn(cmd, args, {
         cwd,
@@ -2094,10 +2140,10 @@ function runCommand(cmd, args, cwd = process.cwd()) {
 `));
         }
       });
-      child.on("error", () => resolve3(false));
-      child.on("close", (code) => resolve3(code === 0));
+      child.on("error", () => resolve4(false));
+      child.on("close", (code) => resolve4(code === 0));
     } catch {
-      resolve3(false);
+      resolve4(false);
     }
   });
 }
@@ -2220,7 +2266,7 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
     chalk.green(`  \u2713  Dev server running at ${targetHost}:${targetPort}`)
   );
   const roots = (opts.root || [process.cwd()]).map(
-    (r) => resolve2(r)
+    (r) => resolve3(r)
   );
   const config = loadConfig();
   saveConfig({ ...config, roots, targetPort });
@@ -2406,7 +2452,24 @@ async function offerToStartDevServer(expectedPort) {
       chosen = scripts[idx];
     }
   }
-  const port = expectedPort || chosen.defaultPort;
+  let port = expectedPort || chosen.defaultPort;
+  if (await isPortOpen(port)) {
+    const owned = verifyPortOwnership(port, process.cwd());
+    if (owned === true) {
+      console.log(chalk.green(`  \u2713  Dev server already running on port ${port}`));
+      lastDetectedPort = port;
+      return true;
+    }
+    const altPort = await findAvailablePort(port + 1);
+    console.log("");
+    console.log(
+      chalk.yellow(`  \u26A0  Port ${port} is already in use by another process.`)
+    );
+    console.log(
+      chalk.dim(`     Starting on port ${altPort} instead.`)
+    );
+    port = altPort;
+  }
   console.log("");
   console.log(
     chalk.dim(`  Starting `) + chalk.cyan(`npm run ${chosen.name}`) + chalk.dim("...")
@@ -2544,6 +2607,8 @@ async function offerToStartDevServer(expectedPort) {
     for (const scanPort of [3e3, 3001, 5173, 5174, 4200, 8080, 8e3, 4e3, 1234, 4321, 3333, 8081]) {
       if (scanPort === port) continue;
       if (await isPortOpen(scanPort)) {
+        const owned = verifyPortOwnership(scanPort, process.cwd());
+        if (owned === false) continue;
         console.log(
           chalk.green(`  \u2713  Dev server found on port ${scanPort}.`)
         );