stashes 0.1.7 → 0.1.8

package/dist/cli.js

@@ -37,6 +37,7 @@ import { existsSync as existsSync8, readFileSync as readFileSync5 } from "fs";
 // ../shared/dist/constants/index.js
 var STASHES_PORT = 4000;
 var DEFAULT_STASH_COUNT = 3;
+var APP_PROXY_PORT = STASHES_PORT + 1;
 var STASH_PORT_START = 4010;
 var DEFAULT_DIRECTIVES = [
   "Minimal and clean \u2014 reduce visual noise, emphasize whitespace, limit to 2-3 colors, typography-driven hierarchy",
@@ -410,6 +411,9 @@ class PersistenceService {
     const filePath = join4(this.basePath, "projects", projectId, "stashes.json");
     return readJson(filePath, []);
   }
+  getStash(projectId, stashId) {
+    return this.listStashes(projectId).find((s) => s.id === stashId);
+  }
   saveStash(stash) {
     const stashes = [...this.listStashes(stash.projectId)];
     const index = stashes.findIndex((s) => s.id === stash.id);
@@ -973,7 +977,7 @@ class StashService {
       });
     }
   }
-  async chat(projectId, message) {
+  async chat(projectId, message, referenceStashIds) {
     const component = this.selectedComponent;
     let sourceCode = "";
     const filePath = component?.filePath || "";
@@ -983,8 +987,18 @@ class StashService {
         sourceCode = readFileSync4(sourceFile, "utf-8");
       }
     }
+    let stashContext = "";
+    if (referenceStashIds?.length) {
+      const refs = referenceStashIds.map((id) => this.persistence.getStash(projectId, id)).filter(Boolean).map((s) => `- "${s.prompt}"${s.componentPath ? ` (${s.componentPath})` : ""}`);
+      if (refs.length) {
+        stashContext = `
+Referenced stashes:
+${refs.join(`
+`)}`;
+      }
+    }
     const chatPrompt = [
-      "The user is asking about a UI component in their project. Answer concisely.",
+      "The user is asking about their UI project. Answer concisely.",
       "Do NOT modify any files.",
       "",
       component ? `Component: ${component.name}` : "",
@@ -994,6 +1008,7 @@ Source:
 \`\`\`
 ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
+      stashContext,
       "",
       `User question: ${message}`
     ].filter(Boolean).join(`
@@ -1046,18 +1061,23 @@ ${sourceCode.substring(0, 3000)}
         break;
     }
   }
-  async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT) {
-    if (!this.selectedComponent) {
-      throw new Error("No component selected");
+  async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT, referenceStashIds) {
+    let enrichedPrompt = prompt;
+    if (referenceStashIds?.length) {
+      const refDescriptions = referenceStashIds.map((id) => this.persistence.getStash(projectId, id)).filter(Boolean).map((s) => `- "${s.prompt}"${s.componentPath ? ` (${s.componentPath})` : ""}`);
+      if (refDescriptions.length) {
+        enrichedPrompt = `${prompt}
+
+## Reference Stashes (use as inspiration)
+${refDescriptions.join(`
+`)}`;
+      }
     }
     await generate({
       projectPath: this.projectPath,
       projectId,
-      prompt,
-      component: {
-        filePath: this.selectedComponent.filePath,
-        exportName: this.selectedComponent.name
-      },
+      prompt: enrichedPrompt,
+      component: this.selectedComponent ? { filePath: this.selectedComponent.filePath, exportName: this.selectedComponent.name } : undefined,
       count: stashCount,
       onProgress: (event) => this.progressToBroadcast(event)
     });
@@ -1174,7 +1194,7 @@ function broadcast(event) {
 function getPersistenceFromWs() {
   return persistence;
 }
-function createWebSocketHandler(projectPath, userDevPort) {
+function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
   worktreeManager = new WorktreeManager(projectPath);
   persistence = new PersistenceService(projectPath);
   stashService = new StashService(projectPath, worktreeManager, persistence, broadcast);
@@ -1182,7 +1202,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
     open(ws) {
       clients.add(ws);
       logger.info("ws", "client connected", { total: clients.size });
-      ws.send(JSON.stringify({ type: "server_ready", port: userDevPort }));
+      ws.send(JSON.stringify({ type: "server_ready", port: userDevPort, appProxyPort }));
     },
     async message(ws, message) {
       const raw = typeof message === "string" ? message : new TextDecoder().decode(message);
@@ -1209,7 +1229,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
               type: "text",
               createdAt: new Date().toISOString()
             });
-            await stashService.chat(event.projectId, event.message);
+            await stashService.chat(event.projectId, event.message, event.referenceStashIds);
             break;
           case "generate":
             persistence.saveChatMessage(event.projectId, {
@@ -1219,7 +1239,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
               type: "text",
               createdAt: new Date().toISOString()
             });
-            await stashService.generate(event.projectId, event.prompt, event.stashCount);
+            await stashService.generate(event.projectId, event.prompt, event.stashCount, event.referenceStashIds);
             break;
           case "vary":
             await stashService.vary(event.sourceStashId, event.prompt);
@@ -1247,6 +1267,111 @@ function createWebSocketHandler(projectPath, userDevPort) {
   };
 }
 
+// ../server/dist/services/app-proxy.js
+function startAppProxy(userDevPort, proxyPort, injectOverlay) {
+  const server = Bun.serve({
+    port: proxyPort,
+    async fetch(req, server2) {
+      if (req.headers.get("upgrade")?.toLowerCase() === "websocket") {
+        const url2 = new URL(req.url);
+        const success = server2.upgrade(req, {
+          data: {
+            path: url2.pathname + url2.search,
+            upstream: null,
+            ready: false,
+            buffer: []
+          }
+        });
+        return success ? undefined : new Response("WebSocket upgrade failed", { status: 400 });
+      }
+      const url = new URL(req.url);
+      const targetUrl = `http://localhost:${userDevPort}${url.pathname}${url.search}`;
+      try {
+        const headers = new Headers;
+        for (const [key, value] of req.headers.entries()) {
+          if (!["host", "accept-encoding"].includes(key.toLowerCase())) {
+            headers.set(key, value);
+          }
+        }
+        headers.set("host", `localhost:${userDevPort}`);
+        const response = await fetch(targetUrl, {
+          method: req.method,
+          headers,
+          body: req.method !== "GET" && req.method !== "HEAD" ? await req.arrayBuffer() : undefined,
+          redirect: "manual"
+        });
+        const contentType = response.headers.get("content-type") || "";
+        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");
+          return new Response(injectedHtml, {
+            status: response.status,
+            headers: respHeaders2
+          });
+        }
+        const respHeaders = new Headers(response.headers);
+        respHeaders.delete("content-encoding");
+        return new Response(response.body, {
+          status: response.status,
+          headers: respHeaders
+        });
+      } catch (err) {
+        return new Response(JSON.stringify({ error: "Proxy failed", detail: String(err) }), {
+          status: 502,
+          headers: { "content-type": "application/json" }
+        });
+      }
+    },
+    websocket: {
+      open(ws) {
+        const { data } = ws;
+        const upstream = new WebSocket(`ws://localhost:${userDevPort}${data.path}`);
+        upstream.addEventListener("open", () => {
+          data.upstream = upstream;
+          data.ready = true;
+          for (const msg of data.buffer) {
+            upstream.send(msg);
+          }
+          data.buffer = [];
+        });
+        upstream.addEventListener("message", (event) => {
+          try {
+            ws.sendText(typeof event.data === "string" ? event.data : String(event.data));
+          } catch {}
+        });
+        upstream.addEventListener("close", () => {
+          try {
+            ws.close();
+          } catch {}
+        });
+        upstream.addEventListener("error", () => {
+          try {
+            ws.close();
+          } catch {}
+        });
+      },
+      message(ws, msg) {
+        const { data } = ws;
+        if (data.ready && data.upstream) {
+          data.upstream.send(typeof msg === "string" ? msg : new Uint8Array(msg));
+        } else {
+          data.buffer.push(typeof msg === "string" ? msg : new Uint8Array(msg).buffer);
+        }
+      },
+      close(ws) {
+        try {
+          ws.data.upstream?.close();
+        } catch {}
+      }
+    }
+  });
+  logger.info("proxy", `App proxy at http://localhost:${proxyPort} \u2192 http://localhost:${userDevPort}`);
+  return server;
+}
+
 // ../server/dist/index.js
 var serverState = {
   projectPath: "",
@@ -1258,56 +1383,6 @@ function getPersistence() {
 var app2 = new Hono2;
 app2.use("/*", cors());
 app2.route("/api", apiRoutes);
-async function proxyToUserApp(c, targetPath, injectOverlay = false) {
-  const userDevPort = serverState.userDevPort;
-  const url = new URL(c.req.url);
-  const targetUrl = `http://localhost:${userDevPort}${targetPath}${url.search}`;
-  try {
-    const headers = new Headers;
-    for (const [key, value] of Object.entries(c.req.header())) {
-      if (!["host", "accept-encoding"].includes(key.toLowerCase()) && value) {
-        headers.set(key, value);
-      }
-    }
-    headers.set("host", `localhost:${userDevPort}`);
-    const response = await fetch(targetUrl, {
-      method: c.req.method,
-      headers,
-      body: c.req.method !== "GET" && c.req.method !== "HEAD" ? await c.req.arrayBuffer() : undefined,
-      redirect: "manual"
-    });
-    const contentType = response.headers.get("content-type") || "";
-    if (injectOverlay && contentType.includes("text/html")) {
-      const html = await response.text();
-      const injectedHtml = injectOverlayScript(html);
-      const respHeaders2 = new Headers(response.headers);
-      respHeaders2.delete("content-encoding");
-      respHeaders2.delete("content-length");
-      return new Response(injectedHtml, {
-        status: response.status,
-        headers: respHeaders2
-      });
-    }
-    const respHeaders = new Headers(response.headers);
-    respHeaders.delete("content-encoding");
-    return new Response(response.body, {
-      status: response.status,
-      headers: respHeaders
-    });
-  } catch (err) {
-    return new Response(JSON.stringify({ error: "Proxy failed", detail: String(err) }), {
-      status: 502,
-      headers: { "content-type": "application/json" }
-    });
-  }
-}
-app2.all("/app/*", (c) => {
-  const path = c.req.path.replace(/^\/app/, "") || "/";
-  return proxyToUserApp(c, path, true);
-});
-app2.all("/_next/*", (c) => proxyToUserApp(c, c.req.path));
-app2.all("/__nextjs*", (c) => proxyToUserApp(c, c.req.path));
-app2.all("/__next*", (c) => proxyToUserApp(c, c.req.path));
 app2.get("/*", async (c) => {
   const path = c.req.path;
   const selfDir = dirname2(fileURLToPath(import.meta.url));
@@ -1350,7 +1425,9 @@ app2.get("/*", async (c) => {
 function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   serverState = { projectPath, userDevPort };
   initLogFile(projectPath);
-  const wsHandler = createWebSocketHandler(projectPath, userDevPort);
+  const appProxyPort = port + 1;
+  startAppProxy(userDevPort, appProxyPort, injectOverlayScript);
+  const wsHandler = createWebSocketHandler(projectPath, userDevPort, appProxyPort);
   const server = Bun.serve({
     port,
     fetch(req, server2) {
@@ -1515,22 +1592,25 @@ function injectOverlayScript(html) {
     }
   });
 
-  document.addEventListener('click', function(e) {
-    if (pickerEnabled) return;
-    var link = e.target;
-    while (link && link.tagName !== 'A') link = link.parentElement;
-    if (link && link.href) {
-      var url;
-      try { url = new URL(link.href); } catch(_) { return; }
-      if (url.origin === window.location.origin) {
-        var path = url.pathname;
-        if (!path.startsWith('/app/')) {
-          e.preventDefault();
-          window.location.href = '/app' + path + url.search + url.hash;
-        }
-      }
-    }
-  }, false);
+  // Report current URL to parent for status bar display
+  function reportUrl() {
+    window.parent.postMessage({
+      type: 'stashes:url_change',
+      url: window.location.pathname + window.location.search + window.location.hash
+    }, '*');
+  }
+  reportUrl();
+  var origPush = history.pushState;
+  history.pushState = function() {
+    origPush.apply(this, arguments);
+    setTimeout(reportUrl, 0);
+  };
+  var origReplace = history.replaceState;
+  history.replaceState = function() {
+    origReplace.apply(this, arguments);
+    setTimeout(reportUrl, 0);
+  };
+  window.addEventListener('popstate', reportUrl);
 
   document.addEventListener('mousemove', onMouseMove, { passive: true });
   document.addEventListener('click', onClick, true);

package/dist/mcp.js

@@ -33,6 +33,7 @@ import simpleGit2 from "simple-git";
 // ../shared/dist/constants/index.js
 var STASHES_PORT = 4000;
 var DEFAULT_STASH_COUNT = 3;
+var APP_PROXY_PORT = STASHES_PORT + 1;
 var STASH_PORT_START = 4010;
 var DEFAULT_DIRECTIVES = [
   "Minimal and clean \u2014 reduce visual noise, emphasize whitespace, limit to 2-3 colors, typography-driven hierarchy",
@@ -346,6 +347,9 @@ class PersistenceService {
     const filePath = join3(this.basePath, "projects", projectId, "stashes.json");
     return readJson(filePath, []);
   }
+  getStash(projectId, stashId) {
+    return this.listStashes(projectId).find((s) => s.id === stashId);
+  }
   saveStash(stash) {
     const stashes = [...this.listStashes(stash.projectId)];
     const index = stashes.findIndex((s) => s.id === stash.id);
@@ -1103,7 +1107,7 @@ class StashService {
       });
     }
   }
-  async chat(projectId, message) {
+  async chat(projectId, message, referenceStashIds) {
     const component = this.selectedComponent;
     let sourceCode = "";
     const filePath = component?.filePath || "";
@@ -1113,8 +1117,18 @@ class StashService {
         sourceCode = readFileSync4(sourceFile, "utf-8");
       }
     }
+    let stashContext = "";
+    if (referenceStashIds?.length) {
+      const refs = referenceStashIds.map((id) => this.persistence.getStash(projectId, id)).filter(Boolean).map((s) => `- "${s.prompt}"${s.componentPath ? ` (${s.componentPath})` : ""}`);
+      if (refs.length) {
+        stashContext = `
+Referenced stashes:
+${refs.join(`
+`)}`;
+      }
+    }
     const chatPrompt = [
-      "The user is asking about a UI component in their project. Answer concisely.",
+      "The user is asking about their UI project. Answer concisely.",
       "Do NOT modify any files.",
       "",
       component ? `Component: ${component.name}` : "",
@@ -1124,6 +1138,7 @@ Source:
 \`\`\`
 ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
+      stashContext,
       "",
       `User question: ${message}`
     ].filter(Boolean).join(`
@@ -1176,18 +1191,23 @@ ${sourceCode.substring(0, 3000)}
         break;
     }
   }
-  async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT) {
-    if (!this.selectedComponent) {
-      throw new Error("No component selected");
+  async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT, referenceStashIds) {
+    let enrichedPrompt = prompt;
+    if (referenceStashIds?.length) {
+      const refDescriptions = referenceStashIds.map((id) => this.persistence.getStash(projectId, id)).filter(Boolean).map((s) => `- "${s.prompt}"${s.componentPath ? ` (${s.componentPath})` : ""}`);
+      if (refDescriptions.length) {
+        enrichedPrompt = `${prompt}
+
+## Reference Stashes (use as inspiration)
+${refDescriptions.join(`
+`)}`;
+      }
     }
     await generate({
       projectPath: this.projectPath,
       projectId,
-      prompt,
-      component: {
-        filePath: this.selectedComponent.filePath,
-        exportName: this.selectedComponent.name
-      },
+      prompt: enrichedPrompt,
+      component: this.selectedComponent ? { filePath: this.selectedComponent.filePath, exportName: this.selectedComponent.name } : undefined,
       count: stashCount,
       onProgress: (event) => this.progressToBroadcast(event)
     });
@@ -1304,7 +1324,7 @@ function broadcast(event) {
 function getPersistenceFromWs() {
   return persistence;
 }
-function createWebSocketHandler(projectPath, userDevPort) {
+function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
   worktreeManager = new WorktreeManager(projectPath);
   persistence = new PersistenceService(projectPath);
   stashService = new StashService(projectPath, worktreeManager, persistence, broadcast);
@@ -1312,7 +1332,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
     open(ws) {
       clients.add(ws);
       logger.info("ws", "client connected", { total: clients.size });
-      ws.send(JSON.stringify({ type: "server_ready", port: userDevPort }));
+      ws.send(JSON.stringify({ type: "server_ready", port: userDevPort, appProxyPort }));
     },
     async message(ws, message) {
       const raw = typeof message === "string" ? message : new TextDecoder().decode(message);
@@ -1339,7 +1359,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
               type: "text",
               createdAt: new Date().toISOString()
             });
-            await stashService.chat(event.projectId, event.message);
+            await stashService.chat(event.projectId, event.message, event.referenceStashIds);
             break;
           case "generate":
             persistence.saveChatMessage(event.projectId, {
@@ -1349,7 +1369,7 @@ function createWebSocketHandler(projectPath, userDevPort) {
               type: "text",
               createdAt: new Date().toISOString()
             });
-            await stashService.generate(event.projectId, event.prompt, event.stashCount);
+            await stashService.generate(event.projectId, event.prompt, event.stashCount, event.referenceStashIds);
             break;
           case "vary":
             await stashService.vary(event.sourceStashId, event.prompt);
@@ -1377,6 +1397,111 @@ function createWebSocketHandler(projectPath, userDevPort) {
   };
 }
 
+// ../server/dist/services/app-proxy.js
+function startAppProxy(userDevPort, proxyPort, injectOverlay) {
+  const server = Bun.serve({
+    port: proxyPort,
+    async fetch(req, server2) {
+      if (req.headers.get("upgrade")?.toLowerCase() === "websocket") {
+        const url2 = new URL(req.url);
+        const success = server2.upgrade(req, {
+          data: {
+            path: url2.pathname + url2.search,
+            upstream: null,
+            ready: false,
+            buffer: []
+          }
+        });
+        return success ? undefined : new Response("WebSocket upgrade failed", { status: 400 });
+      }
+      const url = new URL(req.url);
+      const targetUrl = `http://localhost:${userDevPort}${url.pathname}${url.search}`;
+      try {
+        const headers = new Headers;
+        for (const [key, value] of req.headers.entries()) {
+          if (!["host", "accept-encoding"].includes(key.toLowerCase())) {
+            headers.set(key, value);
+          }
+        }
+        headers.set("host", `localhost:${userDevPort}`);
+        const response = await fetch(targetUrl, {
+          method: req.method,
+          headers,
+          body: req.method !== "GET" && req.method !== "HEAD" ? await req.arrayBuffer() : undefined,
+          redirect: "manual"
+        });
+        const contentType = response.headers.get("content-type") || "";
+        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");
+          return new Response(injectedHtml, {
+            status: response.status,
+            headers: respHeaders2
+          });
+        }
+        const respHeaders = new Headers(response.headers);
+        respHeaders.delete("content-encoding");
+        return new Response(response.body, {
+          status: response.status,
+          headers: respHeaders
+        });
+      } catch (err) {
+        return new Response(JSON.stringify({ error: "Proxy failed", detail: String(err) }), {
+          status: 502,
+          headers: { "content-type": "application/json" }
+        });
+      }
+    },
+    websocket: {
+      open(ws) {
+        const { data } = ws;
+        const upstream = new WebSocket(`ws://localhost:${userDevPort}${data.path}`);
+        upstream.addEventListener("open", () => {
+          data.upstream = upstream;
+          data.ready = true;
+          for (const msg of data.buffer) {
+            upstream.send(msg);
+          }
+          data.buffer = [];
+        });
+        upstream.addEventListener("message", (event) => {
+          try {
+            ws.sendText(typeof event.data === "string" ? event.data : String(event.data));
+          } catch {}
+        });
+        upstream.addEventListener("close", () => {
+          try {
+            ws.close();
+          } catch {}
+        });
+        upstream.addEventListener("error", () => {
+          try {
+            ws.close();
+          } catch {}
+        });
+      },
+      message(ws, msg) {
+        const { data } = ws;
+        if (data.ready && data.upstream) {
+          data.upstream.send(typeof msg === "string" ? msg : new Uint8Array(msg));
+        } else {
+          data.buffer.push(typeof msg === "string" ? msg : new Uint8Array(msg).buffer);
+        }
+      },
+      close(ws) {
+        try {
+          ws.data.upstream?.close();
+        } catch {}
+      }
+    }
+  });
+  logger.info("proxy", `App proxy at http://localhost:${proxyPort} \u2192 http://localhost:${userDevPort}`);
+  return server;
+}
+
 // ../server/dist/index.js
 var serverState = {
   projectPath: "",
@@ -1388,56 +1513,6 @@ function getPersistence() {
 var app2 = new Hono2;
 app2.use("/*", cors());
 app2.route("/api", apiRoutes);
-async function proxyToUserApp(c, targetPath, injectOverlay = false) {
-  const userDevPort = serverState.userDevPort;
-  const url = new URL(c.req.url);
-  const targetUrl = `http://localhost:${userDevPort}${targetPath}${url.search}`;
-  try {
-    const headers = new Headers;
-    for (const [key, value] of Object.entries(c.req.header())) {
-      if (!["host", "accept-encoding"].includes(key.toLowerCase()) && value) {
-        headers.set(key, value);
-      }
-    }
-    headers.set("host", `localhost:${userDevPort}`);
-    const response = await fetch(targetUrl, {
-      method: c.req.method,
-      headers,
-      body: c.req.method !== "GET" && c.req.method !== "HEAD" ? await c.req.arrayBuffer() : undefined,
-      redirect: "manual"
-    });
-    const contentType = response.headers.get("content-type") || "";
-    if (injectOverlay && contentType.includes("text/html")) {
-      const html = await response.text();
-      const injectedHtml = injectOverlayScript(html);
-      const respHeaders2 = new Headers(response.headers);
-      respHeaders2.delete("content-encoding");
-      respHeaders2.delete("content-length");
-      return new Response(injectedHtml, {
-        status: response.status,
-        headers: respHeaders2
-      });
-    }
-    const respHeaders = new Headers(response.headers);
-    respHeaders.delete("content-encoding");
-    return new Response(response.body, {
-      status: response.status,
-      headers: respHeaders
-    });
-  } catch (err) {
-    return new Response(JSON.stringify({ error: "Proxy failed", detail: String(err) }), {
-      status: 502,
-      headers: { "content-type": "application/json" }
-    });
-  }
-}
-app2.all("/app/*", (c) => {
-  const path = c.req.path.replace(/^\/app/, "") || "/";
-  return proxyToUserApp(c, path, true);
-});
-app2.all("/_next/*", (c) => proxyToUserApp(c, c.req.path));
-app2.all("/__nextjs*", (c) => proxyToUserApp(c, c.req.path));
-app2.all("/__next*", (c) => proxyToUserApp(c, c.req.path));
 app2.get("/*", async (c) => {
   const path = c.req.path;
   const selfDir = dirname2(fileURLToPath(import.meta.url));
@@ -1480,7 +1555,9 @@ app2.get("/*", async (c) => {
 function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   serverState = { projectPath, userDevPort };
   initLogFile(projectPath);
-  const wsHandler = createWebSocketHandler(projectPath, userDevPort);
+  const appProxyPort = port + 1;
+  startAppProxy(userDevPort, appProxyPort, injectOverlayScript);
+  const wsHandler = createWebSocketHandler(projectPath, userDevPort, appProxyPort);
   const server = Bun.serve({
     port,
     fetch(req, server2) {
@@ -1645,22 +1722,25 @@ function injectOverlayScript(html) {
     }
   });
 
-  document.addEventListener('click', function(e) {
-    if (pickerEnabled) return;
-    var link = e.target;
-    while (link && link.tagName !== 'A') link = link.parentElement;
-    if (link && link.href) {
-      var url;
-      try { url = new URL(link.href); } catch(_) { return; }
-      if (url.origin === window.location.origin) {
-        var path = url.pathname;
-        if (!path.startsWith('/app/')) {
-          e.preventDefault();
-          window.location.href = '/app' + path + url.search + url.hash;
-        }
-      }
-    }
-  }, false);
+  // Report current URL to parent for status bar display
+  function reportUrl() {
+    window.parent.postMessage({
+      type: 'stashes:url_change',
+      url: window.location.pathname + window.location.search + window.location.hash
+    }, '*');
+  }
+  reportUrl();
+  var origPush = history.pushState;
+  history.pushState = function() {
+    origPush.apply(this, arguments);
+    setTimeout(reportUrl, 0);
+  };
+  var origReplace = history.replaceState;
+  history.replaceState = function() {
+    origReplace.apply(this, arguments);
+    setTimeout(reportUrl, 0);
+  };
+  window.addEventListener('popstate', reportUrl);
 
   document.addEventListener('mousemove', onMouseMove, { passive: true });
   document.addEventListener('click', onClick, true);