openmagic 0.13.0 → 0.14.1

package/README.md

@@ -191,6 +191,15 @@ This file is in your home directory, never in your project. It won't be committe
 - **Path sandboxing** — File operations are restricted to configured root directories. The server cannot read/write outside your project.
 - **API keys stay local** — Keys are stored in `~/.openmagic/config.json` on your machine. They are proxied through the local server and never exposed to the browser or any third party.
 - **Zero project modification** — OpenMagic never modifies your `package.json`, config files, or source code during installation. The toolbar exists only in the proxy layer.
+- **Symlink protection** — File operations resolve symlinks and reject paths that escape the project root.
+- **Diff preview** — AI-proposed code changes are shown as diffs with Apply/Reject buttons. Nothing is auto-applied.
+
+### Known Limitations
+
+OpenMagic uses a reverse proxy which introduces these tradeoffs:
+
+- **Origin change** — Your app runs on `localhost:3000` but is accessed via `localhost:4567`. This can affect OAuth redirects, `localStorage` isolation, and Service Worker scope. Most dev workflows are unaffected, but if your app relies on `window.location.origin`, you may need to adjust your dev config.
+- **CSP meta tags** — OpenMagic strips CSP response headers to allow the toolbar script. However, CSP set via `<meta>` tags in your HTML cannot be modified and may block the toolbar on strict CSP pages.
 
 ## Comparison
 

package/dist/cli.js

@@ -10,8 +10,6 @@ import { createInterface } from "readline";
 
 // src/proxy.ts
 import http from "http";
-import { gunzip, inflate, brotliDecompress } from "zlib";
-import { promisify } from "util";
 import httpProxy from "http-proxy";
 
 // src/security.ts
@@ -1358,7 +1356,7 @@ async function handleLlmChat(params, onChunk, onDone, onError) {
 }
 
 // src/server.ts
-var VERSION = "0.13.0";
+var VERSION = "0.14.1";
 var __dirname = dirname2(fileURLToPath(import.meta.url));
 function attachOpenMagic(httpServer, roots) {
   function handleRequest(req, res) {
@@ -1603,9 +1601,6 @@ function serveToolbarBundle(res) {
 }
 
 // src/proxy.ts
-var gunzipAsync = promisify(gunzip);
-var inflateAsync = promisify(inflate);
-var brotliAsync = promisify(brotliDecompress);
 function createProxyServer(targetHost, targetPort, roots) {
   const proxy = httpProxy.createProxyServer({
     target: `http://${targetHost}:${targetPort}`,
@@ -1613,23 +1608,19 @@ function createProxyServer(targetHost, targetPort, roots) {
     selfHandleResponse: true
   });
   const token = getSessionToken();
+  proxy.on("proxyReq", (proxyReq) => {
+    proxyReq.removeHeader("Accept-Encoding");
+  });
   proxy.on("proxyRes", (proxyRes, req, res) => {
     const contentType = proxyRes.headers["content-type"] || "";
     const isHtml = contentType.includes("text/html");
-    if (!isHtml) {
-      res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+    const status = proxyRes.statusCode || 200;
+    if (!isHtml && status < 400) {
+      res.writeHead(status, proxyRes.headers);
       proxyRes.pipe(res);
       return;
     }
-    collectBody(proxyRes).then((body) => {
-      const toolbarScript = buildInjectionScript(token);
-      if (body.includes("</body>")) {
-        body = body.replace("</body>", `${toolbarScript}</body>`);
-      } else if (body.includes("</html>")) {
-        body = body.replace("</html>", `${toolbarScript}</html>`);
-      } else {
-        body += toolbarScript;
-      }
+    if (isHtml) {
       const headers = { ...proxyRes.headers };
       delete headers["content-length"];
       delete headers["content-encoding"];
@@ -1640,14 +1631,26 @@ function createProxyServer(targetHost, targetPort, roots) {
       delete headers["etag"];
       delete headers["last-modified"];
       headers["cache-control"] = "no-store";
-      res.writeHead(proxyRes.statusCode || 200, headers);
-      res.end(body);
-    }).catch(() => {
-      try {
-        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
-        res.end();
-      } catch {
-      }
+      res.writeHead(status, headers);
+      proxyRes.pipe(res, { end: false });
+      proxyRes.on("end", () => {
+        res.end(buildInjectionScript(token));
+      });
+      return;
+    }
+    const chunks = [];
+    proxyRes.on("data", (c) => chunks.push(c));
+    proxyRes.on("end", () => {
+      const body = Buffer.concat(chunks).toString("utf-8").slice(0, 2e3);
+      const toolbarScript = buildInjectionScript(token);
+      res.writeHead(status, { "Content-Type": "text/html", "Cache-Control": "no-store" });
+      res.end(`<html><head><meta charset="utf-8"><title>Error ${status}</title></head>
+<body style="font-family:system-ui;padding:40px;background:#0f0f1e;color:#e0e0e0;">
+<h2 style="color:#e94560;">Error ${status}</h2>
+<pre style="color:#888;white-space:pre-wrap;max-width:800px;overflow:auto;font-size:13px;">${body.replace(/</g, "&lt;")}</pre>
+<p style="color:#555;font-size:13px;">This error is from your dev server, not OpenMagic. The toolbar is available below.</p>
+${toolbarScript}
+</body></html>`);
     });
   });
   proxy.on("error", (err, _req, res) => {
@@ -1678,33 +1681,6 @@ function createProxyServer(targetHost, targetPort, roots) {
   });
   return server;
 }
-async function collectBody(stream) {
-  const rawBuffer = await new Promise((resolve3, reject) => {
-    const chunks = [];
-    stream.on("data", (chunk) => chunks.push(chunk));
-    stream.on("end", () => resolve3(Buffer.concat(chunks)));
-    stream.on("error", reject);
-  });
-  const encoding = (stream.headers["content-encoding"] || "").toLowerCase();
-  if (!encoding || encoding === "identity") {
-    return rawBuffer.toString("utf-8");
-  }
-  try {
-    let decompressed;
-    if (encoding === "gzip" || encoding === "x-gzip") {
-      decompressed = await gunzipAsync(rawBuffer);
-    } else if (encoding === "deflate") {
-      decompressed = await inflateAsync(rawBuffer);
-    } else if (encoding === "br") {
-      decompressed = await brotliAsync(rawBuffer);
-    } else {
-      return rawBuffer.toString("utf-8");
-    }
-    return decompressed.toString("utf-8");
-  } catch {
-    return rawBuffer.toString("utf-8");
-  }
-}
 function buildInjectionScript(token) {
   return `<script src="/__openmagic__/toolbar.js?v=${Date.now()}" data-openmagic="true" data-openmagic-token="${token}" defer></script>`;
 }
@@ -1885,7 +1861,7 @@ process.on("uncaughtException", (err) => {
   process.exit(1);
 });
 var childProcesses = [];
-var VERSION2 = "0.13.0";
+var VERSION2 = "0.14.1";
 function ask(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   return new Promise((resolve3) => {
@@ -1945,29 +1921,18 @@ function runCommand(cmd, args, cwd = process.cwd()) {
     }
   });
 }
-async function healthCheck(proxyPort, targetPort) {
+async function healthCheck(proxyPort, _targetPort) {
   try {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 5e3);
-    const res = await fetch(`http://127.0.0.1:${proxyPort}/`, {
-      signal: controller.signal,
-      headers: { Accept: "text/html" }
+    const res = await fetch(`http://127.0.0.1:${proxyPort}/__openmagic__/health`, {
+      signal: controller.signal
     });
     clearTimeout(timeout);
     if (res.ok) {
-      const text = await res.text();
-      if (text.includes("__OPENMAGIC_LOADED__")) {
-        console.log(chalk.green("  \u2713  Toolbar injection verified."));
-      } else {
-        console.log(chalk.yellow("  \u26A0  Page loaded but toolbar may not have injected (non-HTML response or CSP)."));
-      }
+      console.log(chalk.green("  \u2713  Toolbar ready."));
     } else {
-      console.log(
-        chalk.yellow(`  \u26A0  Dev server returned ${res.status}. Pages may have errors.`)
-      );
-      console.log(
-        chalk.dim("     The toolbar will still appear on pages that load successfully.")
-      );
+      console.log(chalk.yellow("  \u26A0  Proxy started but toolbar health check failed."));
     }
   } catch {
     console.log(