stashes 0.1.25 → 0.1.26

package/dist/cli.js

@@ -1731,6 +1731,8 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
 
 // ../server/dist/services/app-proxy.js
 function startAppProxy(userDevPort, proxyPort, injectOverlay) {
+  const upstreamOrigin = `http://localhost:${userDevPort}`;
+  const proxyOrigin = `http://localhost:${proxyPort}`;
   const server = Bun.serve({
     port: proxyPort,
     async fetch(req, server2) {
@@ -1763,18 +1765,23 @@ function startAppProxy(userDevPort, proxyPort, injectOverlay) {
           redirect: "manual"
         });
         const contentType = response.headers.get("content-type") || "";
+        const respHeaders = new Headers(response.headers);
+        if (response.status >= 300 && response.status < 400) {
+          const location = respHeaders.get("location");
+          if (location?.startsWith(upstreamOrigin)) {
+            respHeaders.set("location", proxyOrigin + location.substring(upstreamOrigin.length));
+          }
+        }
         if (contentType.includes("text/html")) {
           const html = await response.text();
-          const injectedHtml = injectOverlay(html);
-          const respHeaders2 = new Headers(response.headers);
-          respHeaders2.delete("content-encoding");
-          respHeaders2.delete("content-length");
+          const injectedHtml = injectOverlay(html, userDevPort, proxyPort);
+          respHeaders.delete("content-encoding");
+          respHeaders.delete("content-length");
           return new Response(injectedHtml, {
             status: response.status,
-            headers: respHeaders2
+            headers: respHeaders
           });
         }
-        const respHeaders = new Headers(response.headers);
         respHeaders.delete("content-encoding");
         return new Response(response.body, {
           status: response.status,
@@ -1909,7 +1916,7 @@ function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   logger.info("server", `Project: ${projectPath}`);
   return server;
 }
-function injectOverlayScript(html) {
+function injectOverlayScript(html, upstreamPort, proxyPort) {
   const overlayScript = `
 <script data-stashes-overlay>
 (function() {
@@ -1917,6 +1924,35 @@ function injectOverlayScript(html) {
   var pickerEnabled = false;
   var precisionMode = false;
 
+  // Rewrite cross-origin requests to the upstream dev server through the proxy
+  var upstreamOrigin = 'http://localhost:${upstreamPort}';
+  var proxyOrigin = window.location.origin;
+  if (proxyOrigin !== upstreamOrigin) {
+    function rewriteUrl(url) {
+      if (typeof url === 'string' && (url.startsWith(upstreamOrigin + '/') || url === upstreamOrigin)) {
+        return proxyOrigin + url.substring(upstreamOrigin.length);
+      }
+      return url;
+    }
+    var origFetch = window.fetch;
+    window.fetch = function(input, init) {
+      if (typeof input === 'string') {
+        input = rewriteUrl(input);
+      } else if (input instanceof Request) {
+        var rewritten = rewriteUrl(input.url);
+        if (rewritten !== input.url) { input = new Request(rewritten, input); }
+      }
+      return origFetch.call(window, input, init);
+    };
+    var origXhrOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function() {
+      if (arguments.length >= 2 && typeof arguments[1] === 'string') {
+        arguments[1] = rewriteUrl(arguments[1]);
+      }
+      return origXhrOpen.apply(this, arguments);
+    };
+  }
+
   function createOverlay() {
     var overlay = document.createElement('div');
     overlay.id = 'stashes-highlight';

package/dist/mcp.js

@@ -1927,6 +1927,8 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
 
 // ../server/dist/services/app-proxy.js
 function startAppProxy(userDevPort, proxyPort, injectOverlay) {
+  const upstreamOrigin = `http://localhost:${userDevPort}`;
+  const proxyOrigin = `http://localhost:${proxyPort}`;
   const server = Bun.serve({
     port: proxyPort,
     async fetch(req, server2) {
@@ -1959,18 +1961,23 @@ function startAppProxy(userDevPort, proxyPort, injectOverlay) {
           redirect: "manual"
         });
         const contentType = response.headers.get("content-type") || "";
+        const respHeaders = new Headers(response.headers);
+        if (response.status >= 300 && response.status < 400) {
+          const location = respHeaders.get("location");
+          if (location?.startsWith(upstreamOrigin)) {
+            respHeaders.set("location", proxyOrigin + location.substring(upstreamOrigin.length));
+          }
+        }
         if (contentType.includes("text/html")) {
           const html = await response.text();
-          const injectedHtml = injectOverlay(html);
-          const respHeaders2 = new Headers(response.headers);
-          respHeaders2.delete("content-encoding");
-          respHeaders2.delete("content-length");
+          const injectedHtml = injectOverlay(html, userDevPort, proxyPort);
+          respHeaders.delete("content-encoding");
+          respHeaders.delete("content-length");
           return new Response(injectedHtml, {
             status: response.status,
-            headers: respHeaders2
+            headers: respHeaders
           });
         }
-        const respHeaders = new Headers(response.headers);
         respHeaders.delete("content-encoding");
         return new Response(response.body, {
           status: response.status,
@@ -2105,7 +2112,7 @@ function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   logger.info("server", `Project: ${projectPath}`);
   return server;
 }
-function injectOverlayScript(html) {
+function injectOverlayScript(html, upstreamPort, proxyPort) {
   const overlayScript = `
 <script data-stashes-overlay>
 (function() {
@@ -2113,6 +2120,35 @@ function injectOverlayScript(html) {
   var pickerEnabled = false;
   var precisionMode = false;
 
+  // Rewrite cross-origin requests to the upstream dev server through the proxy
+  var upstreamOrigin = 'http://localhost:${upstreamPort}';
+  var proxyOrigin = window.location.origin;
+  if (proxyOrigin !== upstreamOrigin) {
+    function rewriteUrl(url) {
+      if (typeof url === 'string' && (url.startsWith(upstreamOrigin + '/') || url === upstreamOrigin)) {
+        return proxyOrigin + url.substring(upstreamOrigin.length);
+      }
+      return url;
+    }
+    var origFetch = window.fetch;
+    window.fetch = function(input, init) {
+      if (typeof input === 'string') {
+        input = rewriteUrl(input);
+      } else if (input instanceof Request) {
+        var rewritten = rewriteUrl(input.url);
+        if (rewritten !== input.url) { input = new Request(rewritten, input); }
+      }
+      return origFetch.call(window, input, init);
+    };
+    var origXhrOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function() {
+      if (arguments.length >= 2 && typeof arguments[1] === 'string') {
+        arguments[1] = rewriteUrl(arguments[1]);
+      }
+      return origXhrOpen.apply(this, arguments);
+    };
+  }
+
   function createOverlay() {
     var overlay = document.createElement('div');
     overlay.id = 'stashes-highlight';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stashes",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "type": "module",
   "description": "Generate AI-powered UI design explorations in your project",
   "keywords": [