stashes 0.1.7 → 0.1.9

package/dist/mcp.js

@@ -33,7 +33,12 @@ 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 STASH_PORT_END = 4030;
+var MAX_PREVIEW_SERVERS = 5;
+var PREVIEW_TTL_MS = 300000;
+var PREVIEW_REAPER_INTERVAL = 30000;
 var DEFAULT_DIRECTIVES = [
   "Minimal and clean \u2014 reduce visual noise, emphasize whitespace, limit to 2-3 colors, typography-driven hierarchy",
   "Bold and expressive \u2014 strong visual identity, use motion/animation, rich interactions, distinctive layout",
@@ -231,6 +236,34 @@ class WorktreeManager {
   getPreviewPort() {
     return PREVIEW_PORT;
   }
+  async createPreviewForPool(stashId) {
+    const previewPath = join2(this.projectPath, ".stashes", "previews", stashId);
+    const branch = `stashes/${stashId}`;
+    if (existsSync2(previewPath)) {
+      try {
+        await this.git.raw(["worktree", "remove", "--force", previewPath]);
+      } catch {
+        rmSync(previewPath, { recursive: true, force: true });
+      }
+      await this.git.raw(["worktree", "prune"]);
+    }
+    logger.info("worktree", `creating pool preview: ${stashId}`, { branch, path: previewPath });
+    await this.git.raw(["worktree", "add", previewPath, branch]);
+    this.symlinkDeps(previewPath);
+    logger.info("worktree", `pool preview created: ${stashId}`);
+    return previewPath;
+  }
+  async removePreviewForPool(stashId) {
+    const previewPath = join2(this.projectPath, ".stashes", "previews", stashId);
+    logger.info("worktree", `removing pool preview: ${stashId}`);
+    try {
+      await this.git.raw(["worktree", "remove", "--force", previewPath]);
+    } catch {
+      if (existsSync2(previewPath)) {
+        rmSync(previewPath, { recursive: true, force: true });
+      }
+    }
+  }
   async apply(stashId) {
     const branch = `stashes/${stashId}`;
     logger.info("worktree", `merging: ${stashId}`, { branch });
@@ -271,6 +304,10 @@ class WorktreeManager {
     if (existsSync2(previewDir)) {
       rmSync(previewDir, { recursive: true, force: true });
     }
+    const previewsDir = join2(this.projectPath, ".stashes", "previews");
+    if (existsSync2(previewsDir)) {
+      rmSync(previewsDir, { recursive: true, force: true });
+    }
     logger.info("worktree", `cleanup complete`);
   }
   symlinkDeps(worktreePath) {
@@ -346,6 +383,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);
@@ -1045,19 +1085,201 @@ var apiRoutes = app;
 // ../server/dist/services/stash-service.js
 import { readFileSync as readFileSync4, existsSync as existsSync7 } from "fs";
 import { join as join7 } from "path";
+
+// ../server/dist/services/preview-pool.js
+class PreviewPool {
+  entries = new Map;
+  usedPorts = new Set;
+  maxSize;
+  ttlMs;
+  worktreeManager;
+  broadcast;
+  reaperInterval;
+  constructor(worktreeManager, broadcast, maxSize = MAX_PREVIEW_SERVERS, ttlMs = PREVIEW_TTL_MS) {
+    this.worktreeManager = worktreeManager;
+    this.broadcast = broadcast;
+    this.maxSize = maxSize;
+    this.ttlMs = ttlMs;
+    this.reaperInterval = setInterval(() => this.reap(), PREVIEW_REAPER_INTERVAL);
+  }
+  async getOrStart(stashId) {
+    const existing = this.entries.get(stashId);
+    if (existing) {
+      existing.lastHeartbeat = Date.now();
+      logger.info("pool", `warm hit: ${stashId} on port ${existing.port}`);
+      return existing.port;
+    }
+    if (this.entries.size >= this.maxSize) {
+      this.evictOldest();
+    }
+    const port = this.allocatePort();
+    const worktreePath = await this.worktreeManager.createPreviewForPool(stashId);
+    const process2 = Bun.spawn({
+      cmd: ["npm", "run", "dev"],
+      cwd: worktreePath,
+      stdin: "ignore",
+      stdout: "pipe",
+      stderr: "pipe",
+      env: { ...Bun.env, PORT: String(port), BROWSER: "none" }
+    });
+    const entry = {
+      stashId,
+      port,
+      process: process2,
+      worktreePath,
+      lastHeartbeat: Date.now()
+    };
+    this.entries.set(stashId, entry);
+    this.usedPorts.add(port);
+    logger.info("pool", `cold start: ${stashId} on port ${port}`, { poolSize: this.entries.size });
+    await this.waitForPort(port, 60000);
+    return port;
+  }
+  heartbeat(stashId) {
+    const entry = this.entries.get(stashId);
+    if (entry) {
+      entry.lastHeartbeat = Date.now();
+    }
+  }
+  isWarm(stashId) {
+    return this.entries.has(stashId);
+  }
+  getPort(stashId) {
+    return this.entries.get(stashId)?.port ?? null;
+  }
+  async stop(stashId) {
+    const entry = this.entries.get(stashId);
+    if (!entry)
+      return;
+    logger.info("pool", `stopping: ${stashId} on port ${entry.port}`);
+    this.killEntry(entry);
+    this.entries.delete(stashId);
+    this.usedPorts.delete(entry.port);
+    try {
+      await this.worktreeManager.removePreviewForPool(stashId);
+    } catch (err) {
+      logger.warn("pool", `worktree removal failed for ${stashId}`, {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+  prefetchNeighbors(currentStashId, sortedStashIds) {
+    const currentIndex = sortedStashIds.indexOf(currentStashId);
+    if (currentIndex === -1 || sortedStashIds.length < 2)
+      return;
+    const neighbors = [];
+    const prevIndex = (currentIndex - 1 + sortedStashIds.length) % sortedStashIds.length;
+    const nextIndex = (currentIndex + 1) % sortedStashIds.length;
+    if (!this.entries.has(sortedStashIds[prevIndex])) {
+      neighbors.push(sortedStashIds[prevIndex]);
+    }
+    if (!this.entries.has(sortedStashIds[nextIndex])) {
+      neighbors.push(sortedStashIds[nextIndex]);
+    }
+    for (const stashId of neighbors) {
+      if (this.entries.size >= this.maxSize)
+        break;
+      logger.info("pool", `prefetching neighbor: ${stashId}`);
+      this.getOrStart(stashId).then((port) => {
+        this.broadcast({ type: "stash:port", stashId, port });
+      }).catch((err) => {
+        logger.warn("pool", `prefetch failed for ${stashId}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      });
+    }
+  }
+  async shutdown() {
+    logger.info("pool", `shutting down all`, { poolSize: this.entries.size });
+    clearInterval(this.reaperInterval);
+    const stashIds = [...this.entries.keys()];
+    for (const stashId of stashIds) {
+      await this.stop(stashId);
+    }
+  }
+  reap() {
+    const now = Date.now();
+    const expired = [];
+    for (const [stashId, entry] of this.entries) {
+      if (now - entry.lastHeartbeat > this.ttlMs) {
+        expired.push(stashId);
+      }
+    }
+    for (const stashId of expired) {
+      logger.info("pool", `reaping inactive: ${stashId}`);
+      const entry = this.entries.get(stashId);
+      this.killEntry(entry);
+      this.entries.delete(stashId);
+      this.usedPorts.delete(entry.port);
+      this.worktreeManager.removePreviewForPool(stashId).catch((err) => {
+        logger.warn("pool", `reap worktree cleanup failed for ${stashId}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      });
+      this.broadcast({ type: "stash:preview_stopped", stashId });
+    }
+  }
+  evictOldest() {
+    let oldest = null;
+    for (const entry of this.entries.values()) {
+      if (!oldest || entry.lastHeartbeat < oldest.lastHeartbeat) {
+        oldest = entry;
+      }
+    }
+    if (oldest) {
+      logger.info("pool", `evicting: ${oldest.stashId} (oldest heartbeat)`);
+      this.killEntry(oldest);
+      this.entries.delete(oldest.stashId);
+      this.usedPorts.delete(oldest.port);
+      this.worktreeManager.removePreviewForPool(oldest.stashId).catch((err) => {
+        logger.warn("pool", `evict worktree cleanup failed for ${oldest.stashId}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      });
+      this.broadcast({ type: "stash:preview_stopped", stashId: oldest.stashId });
+    }
+  }
+  allocatePort() {
+    for (let port = STASH_PORT_START;port <= STASH_PORT_END; port++) {
+      if (!this.usedPorts.has(port)) {
+        return port;
+      }
+    }
+    throw new Error(`No available ports in range ${STASH_PORT_START}-${STASH_PORT_END}`);
+  }
+  killEntry(entry) {
+    try {
+      entry.process.kill();
+    } catch {}
+  }
+  async waitForPort(port, timeout) {
+    const start = Date.now();
+    while (Date.now() - start < timeout) {
+      try {
+        const res = await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(2000) });
+        if (res.ok || res.status < 500)
+          return;
+      } catch {}
+      await new Promise((r) => setTimeout(r, 1000));
+    }
+    throw new Error(`Port ${port} not ready within ${timeout}ms`);
+  }
+}
+
+// ../server/dist/services/stash-service.js
 class StashService {
   projectPath;
   worktreeManager;
   persistence;
   broadcast;
+  previewPool;
   selectedComponent = null;
-  previewServer = null;
-  activePreviewStashId = null;
   constructor(projectPath, worktreeManager, persistence, broadcast) {
     this.projectPath = projectPath;
     this.worktreeManager = worktreeManager;
     this.persistence = persistence;
     this.broadcast = broadcast;
+    this.previewPool = new PreviewPool(worktreeManager, broadcast);
   }
   setSelectedComponent(component) {
     this.selectedComponent = component;
@@ -1103,7 +1325,7 @@ class StashService {
       });
     }
   }
-  async chat(projectId, message) {
+  async chat(projectId, message, referenceStashIds) {
     const component = this.selectedComponent;
     let sourceCode = "";
     const filePath = component?.filePath || "";
@@ -1113,8 +1335,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 +1356,7 @@ Source:
 \`\`\`
 ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
+      stashContext,
       "",
       `User question: ${message}`
     ].filter(Boolean).join(`
@@ -1176,18 +1409,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)
     });
@@ -1200,94 +1438,25 @@ ${sourceCode.substring(0, 3000)}
       onProgress: (event) => this.progressToBroadcast(event)
     });
   }
-  async switchPreview(stashId) {
-    const previewPort = this.worktreeManager.getPreviewPort();
-    let previewPath = this.worktreeManager.getPreviewPath();
-    if (!previewPath) {
-      previewPath = await this.worktreeManager.createPreview();
-    }
-    await this.ensurePreviewServer(previewPath);
-    if (this.activePreviewStashId === stashId) {
-      this.broadcast({ type: "stash:port", stashId, port: previewPort });
-      return;
+  async switchPreview(stashId, sortedStashIds) {
+    const port = await this.previewPool.getOrStart(stashId);
+    this.broadcast({ type: "stash:port", stashId, port });
+    if (sortedStashIds && sortedStashIds.length > 1) {
+      this.previewPool.prefetchNeighbors(stashId, sortedStashIds);
     }
-    await this.worktreeManager.switchPreviewTo(stashId);
-    this.activePreviewStashId = stashId;
-    await this.waitForRecompile(previewPort, 15000);
-    this.broadcast({ type: "stash:port", stashId, port: previewPort });
+  }
+  previewHeartbeat(stashId) {
+    this.previewPool.heartbeat(stashId);
   }
   async applyStash(stashId) {
-    this.stopPreviewServer();
+    await this.previewPool.shutdown();
     await apply({ projectPath: this.projectPath, stashId });
-    this.activePreviewStashId = null;
     this.broadcast({ type: "stash:applied", stashId });
   }
   async deleteStash(stashId) {
-    if (this.activePreviewStashId === stashId) {
-      this.activePreviewStashId = null;
-    }
+    await this.previewPool.stop(stashId);
     await remove(this.projectPath, stashId);
   }
-  async ensurePreviewServer(previewPath) {
-    if (this.previewServer) {
-      const port = this.worktreeManager.getPreviewPort();
-      try {
-        const res = await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(2000) });
-        if (res.ok || res.status < 500)
-          return;
-      } catch {
-        this.previewServer = null;
-      }
-    }
-    await this.startPreviewServer(previewPath);
-  }
-  async startPreviewServer(previewPath) {
-    const port = this.worktreeManager.getPreviewPort();
-    this.previewServer = Bun.spawn({
-      cmd: ["npm", "run", "dev"],
-      cwd: previewPath,
-      stdin: "ignore",
-      stdout: "pipe",
-      stderr: "pipe",
-      env: { ...process.env, PORT: String(port), BROWSER: "none" }
-    });
-    await this.waitForPort(port, 60000);
-  }
-  stopPreviewServer() {
-    if (this.previewServer) {
-      this.previewServer.kill();
-      this.previewServer = null;
-    }
-  }
-  async waitForRecompile(port, timeout) {
-    const start = Date.now();
-    await new Promise((r) => setTimeout(r, 500));
-    while (Date.now() - start < timeout) {
-      try {
-        const res = await fetch(`http://localhost:${port}`, {
-          signal: AbortSignal.timeout(3000),
-          headers: { "cache-control": "no-cache" }
-        });
-        if (res.ok) {
-          await new Promise((r) => setTimeout(r, 1000));
-          return;
-        }
-      } catch {}
-      await new Promise((r) => setTimeout(r, 500));
-    }
-  }
-  async waitForPort(port, timeout) {
-    const start = Date.now();
-    while (Date.now() - start < timeout) {
-      try {
-        const res = await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(2000) });
-        if (res.ok || res.status < 500)
-          return;
-      } catch {}
-      await new Promise((r) => setTimeout(r, 1000));
-    }
-    throw new Error(`Port ${port} not ready within ${timeout}ms`);
-  }
 }
 
 // ../server/dist/services/websocket.js
@@ -1304,7 +1473,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 +1481,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 +1508,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,13 +1518,16 @@ 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);
             break;
           case "interact":
-            await stashService.switchPreview(event.stashId);
+            await stashService.switchPreview(event.stashId, event.sortedStashIds);
+            break;
+          case "preview_heartbeat":
+            stashService.previewHeartbeat(event.stashId);
             break;
           case "apply_stash":
             await stashService.applyStash(event.stashId);
@@ -1377,6 +1549,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 +1665,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 +1707,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 +1874,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);