stashes 0.1.26 → 0.1.28

package/dist/mcp.js

@@ -26,10 +26,10 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { z } from "zod";
 
 // ../core/dist/generation.js
-import { readFileSync as readFileSync2, existsSync as existsSync5 } from "fs";
-import { join as join5 } from "path";
+import { readFileSync as readFileSync2, existsSync as existsSync6 } from "fs";
+import { join as join6 } from "path";
 var {spawn: spawn3 } = globalThis.Bun;
-import simpleGit2 from "simple-git";
+import simpleGit3 from "simple-git";
 // ../shared/dist/constants/index.js
 var STASHES_PORT = 4000;
 var DEFAULT_STASH_COUNT = 3;
@@ -424,6 +424,14 @@ class PersistenceService {
     const filePath = join3(this.basePath, "projects", projectId, "stashes.json");
     writeJson(filePath, stashes);
   }
+  getProjectSettings(projectId) {
+    const filePath = join3(this.basePath, "projects", projectId, "settings.json");
+    return readJson(filePath, {});
+  }
+  saveProjectSettings(projectId, settings) {
+    const filePath = join3(this.basePath, "projects", projectId, "settings.json");
+    writeJson(filePath, settings);
+  }
   listChats(projectId) {
     const dir = join3(this.basePath, "projects", projectId, "chats");
     if (!existsSync3(dir))
@@ -504,18 +512,22 @@ class PersistenceService {
 var {spawn } = globalThis.Bun;
 var CLAUDE_BIN = "/opt/homebrew/bin/claude";
 var processes = new Map;
-function startAiProcess(id, prompt, cwd, resumeSessionId) {
+function startAiProcess(id, prompt, cwd, resumeSessionId, model) {
   killAiProcess(id);
   logger.info("claude", `spawning process: ${id}`, {
     cwd,
     promptLength: prompt.length,
     promptPreview: prompt.substring(0, 100),
-    resumeSessionId
+    resumeSessionId,
+    model
   });
   const cmd = [CLAUDE_BIN, "-p", prompt, "--output-format=stream-json", "--verbose", "--dangerously-skip-permissions"];
   if (resumeSessionId) {
     cmd.push("--resume", resumeSessionId);
   }
+  if (model) {
+    cmd.push("--model", model);
+  }
   const proc = spawn({
     cmd,
     stdin: "ignore",
@@ -639,6 +651,11 @@ async function* parseClaudeStream(proc) {
   }
 }
 
+// ../core/dist/smart-screenshot.js
+import { join as join5 } from "path";
+import { mkdirSync as mkdirSync4, existsSync as existsSync5 } from "fs";
+import simpleGit2 from "simple-git";
+
 // ../core/dist/screenshot.js
 var {spawn: spawn2 } = globalThis.Bun;
 import { join as join4 } from "path";
@@ -681,6 +698,171 @@ async function captureScreenshot(port, projectPath, stashId) {
   return `/api/screenshots/${filename}`;
 }
 
+// ../core/dist/smart-screenshot.js
+var SCREENSHOTS_DIR2 = ".stashes/screenshots";
+var DEFAULT_TIMEOUT = 120000;
+var DIFF_MAX_CHARS = 1e4;
+async function getStashDiff(worktreePath, parentBranch) {
+  const git = simpleGit2(worktreePath);
+  try {
+    const diff = await git.diff([parentBranch, "HEAD"]);
+    if (diff.length <= DIFF_MAX_CHARS)
+      return diff;
+    const diffStat = await git.diff([parentBranch, "HEAD", "--stat"]);
+    const truncatedDiff = diff.substring(0, DIFF_MAX_CHARS);
+    return `## Changed files:
+${diffStat}
+
+## Partial diff (truncated):
+${truncatedDiff}`;
+  } catch (err) {
+    logger.warn("smart-screenshot", `git diff failed, falling back`, {
+      error: err instanceof Error ? err.message : String(err)
+    });
+    return "";
+  }
+}
+function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
+  return [
+    "You are a screenshot assistant. A developer made UI changes to a web app.",
+    "Your job: navigate the running app, find the pages affected by the changes, and take screenshots.",
+    "",
+    `## The app is running at: http://localhost:${port}`,
+    "",
+    "## Git diff of changes:",
+    "```",
+    diff,
+    "```",
+    "",
+    "## Instructions:",
+    "1. Analyze the diff to identify which components/pages changed",
+    "2. Determine the URL routes where these changes are visible",
+    "3. For each route:",
+    "   - Navigate to it using browser_navigate",
+    "   - If the change is behind an interaction (tab, modal, accordion), perform that interaction",
+    "   - Wait for the page to settle",
+    "   - Take a screenshot using browser_take_screenshot",
+    "4. Decide which screenshot shows the MOST visually significant change \u2014 mark it as primary",
+    "",
+    `## Screenshot save paths:`,
+    `- Primary: ${join5(screenshotDir, `${stashId}.png`)}`,
+    `- Additional: ${join5(screenshotDir, `${stashId}-1.png`)}, ${join5(screenshotDir, `${stashId}-2.png`)}, etc.`,
+    "",
+    "## Output format (after all screenshots are taken):",
+    "Respond with ONLY this JSON (no markdown fences):",
+    "{",
+    '  "screenshots": [',
+    "    {",
+    `      "path": "${join5(screenshotDir, `${stashId}.png`)}",`,
+    '      "label": "Short description of what is shown",',
+    '      "route": "/the-url-path",',
+    '      "isPrimary": true',
+    "    }",
+    "  ]",
+    "}"
+  ].join(`
+`);
+}
+function parseAiResult(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    const jsonMatch = text.match(/\{[\s\S]*"screenshots"[\s\S]*\}/);
+    if (jsonMatch) {
+      try {
+        return JSON.parse(jsonMatch[0]);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+}
+async function captureSmartScreenshots(opts) {
+  const { projectPath, stashId, stashBranch, parentBranch, worktreePath, port, model = "haiku", timeout = DEFAULT_TIMEOUT } = opts;
+  const screenshotDir = join5(projectPath, SCREENSHOTS_DIR2);
+  if (!existsSync5(screenshotDir)) {
+    mkdirSync4(screenshotDir, { recursive: true });
+  }
+  const diff = await getStashDiff(worktreePath, parentBranch);
+  if (!diff) {
+    logger.info("smart-screenshot", `No diff found for ${stashId}, using simple screenshot`);
+    const url = await captureScreenshot(port, projectPath, stashId);
+    return {
+      primary: url,
+      screenshots: [{ url, label: "Homepage", route: "/", isPrimary: true }]
+    };
+  }
+  const processId = `screenshot-ai-${stashId}`;
+  const prompt = buildScreenshotPrompt(port, diff, screenshotDir, stashId);
+  const modelFlag = model === "sonnet" ? "sonnet" : "haiku";
+  const aiProcess = startAiProcess(processId, prompt, worktreePath, undefined, modelFlag);
+  let textOutput = "";
+  let timedOut = false;
+  const timeoutId = setTimeout(() => {
+    timedOut = true;
+    killAiProcess(processId);
+  }, timeout);
+  try {
+    for await (const chunk of parseClaudeStream(aiProcess.process)) {
+      if (chunk.type === "text") {
+        textOutput += chunk.content;
+      }
+    }
+    await aiProcess.process.exited;
+  } catch (err) {
+    logger.warn("smart-screenshot", `AI process error for ${stashId}`, {
+      error: err instanceof Error ? err.message : String(err),
+      timedOut
+    });
+  } finally {
+    clearTimeout(timeoutId);
+    killAiProcess(processId);
+  }
+  const result = parseAiResult(textOutput);
+  if (!result || !result.screenshots || result.screenshots.length === 0) {
+    logger.info("smart-screenshot", `AI returned no screenshots for ${stashId}, falling back`);
+    const url = await captureScreenshot(port, projectPath, stashId);
+    return {
+      primary: url,
+      screenshots: [{ url, label: "Homepage", route: "/", isPrimary: true }]
+    };
+  }
+  const screenshots = [];
+  let primaryUrl = "";
+  for (const shot of result.screenshots) {
+    const filename = shot.path.split("/").pop() || "";
+    if (!existsSync5(shot.path)) {
+      logger.warn("smart-screenshot", `Screenshot file not found: ${shot.path}`);
+      continue;
+    }
+    const url = `/api/screenshots/${filename}`;
+    const screenshot = {
+      url,
+      label: shot.label,
+      route: shot.route,
+      isPrimary: shot.isPrimary
+    };
+    screenshots.push(screenshot);
+    if (shot.isPrimary)
+      primaryUrl = url;
+  }
+  if (screenshots.length === 0) {
+    logger.info("smart-screenshot", `No valid screenshots for ${stashId}, falling back`);
+    const url = await captureScreenshot(port, projectPath, stashId);
+    return {
+      primary: url,
+      screenshots: [{ url, label: "Homepage", route: "/", isPrimary: true }]
+    };
+  }
+  if (!primaryUrl) {
+    primaryUrl = screenshots[0].url;
+    screenshots[0] = { ...screenshots[0], isPrimary: true };
+  }
+  logger.info("smart-screenshot", `Captured ${screenshots.length} smart screenshots for ${stashId}`);
+  return { primary: primaryUrl, screenshots };
+}
+
 // ../core/dist/prompt.js
 function buildStashPrompt(component, sourceCode, userPrompt, directive) {
   const parts = [
@@ -731,23 +913,6 @@ async function waitForPort(port, timeout) {
   }
   throw new Error(`Port ${port} not ready within ${timeout}ms`);
 }
-async function captureEphemeralScreenshot(worktreePath, projectPath, stashId, port) {
-  const devServer = spawn3({
-    cmd: ["npm", "run", "dev"],
-    cwd: worktreePath,
-    stdin: "ignore",
-    stdout: "pipe",
-    stderr: "pipe",
-    env: { ...process.env, PORT: String(port), BROWSER: "none" }
-  });
-  try {
-    await waitForPort(port, 60000);
-    await new Promise((r) => setTimeout(r, 2000));
-    return await captureScreenshot(port, projectPath, stashId);
-  } finally {
-    devServer.kill();
-  }
-}
 async function allocatePort() {
   for (let port = 4010;port <= 4030; port++) {
     try {
@@ -765,8 +930,8 @@ async function generate(opts) {
   const selectedDirectives = directives.slice(0, count);
   let sourceCode = "";
   if (component?.filePath) {
-    const sourceFile = join5(projectPath, component.filePath);
-    if (existsSync5(sourceFile)) {
+    const sourceFile = join6(projectPath, component.filePath);
+    if (existsSync6(sourceFile)) {
       sourceCode = readFileSync2(sourceFile, "utf-8");
     }
   }
@@ -788,6 +953,7 @@ async function generate(opts) {
       worktreePath: worktree.path,
       port: null,
       screenshotUrl: null,
+      screenshots: [],
       status: "generating",
       error: null,
       relatedTo: [],
@@ -812,7 +978,7 @@ async function generate(opts) {
         });
       }
       await aiProcess.process.exited;
-      const wtGit = simpleGit2(worktree.path);
+      const wtGit = simpleGit3(worktree.path);
       try {
         await wtGit.add("-A");
         await wtGit.commit(`stashes: stash ${stashId}`);
@@ -835,15 +1001,40 @@ async function generate(opts) {
     try {
       const port = await allocatePort();
       const worktree = await worktreeManager.createForGeneration(`screenshot-${stash.id}`);
-      const screenshotGit = simpleGit2(worktree.path);
+      const screenshotGit = simpleGit3(worktree.path);
       await screenshotGit.checkout(["-f", stash.branch]);
-      const screenshotPath = await captureEphemeralScreenshot(worktree.path, projectPath, stash.id, port);
+      const devServer = spawn3({
+        cmd: ["npm", "run", "dev"],
+        cwd: worktree.path,
+        stdin: "ignore",
+        stdout: "pipe",
+        stderr: "pipe",
+        env: { ...process.env, PORT: String(port), BROWSER: "none" }
+      });
+      try {
+        await waitForPort(port, 60000);
+        await new Promise((r) => setTimeout(r, 2000));
+        const mainGit = simpleGit3(projectPath);
+        const parentBranch = (await mainGit.revparse(["HEAD"])).trim();
+        const { primary, screenshots } = await captureSmartScreenshots({
+          projectPath,
+          stashId: stash.id,
+          stashBranch: stash.branch,
+          parentBranch,
+          worktreePath: worktree.path,
+          port,
+          model: opts.screenshotModel,
+          timeout: opts.screenshotTimeout
+        });
+        const updatedStash = { ...stash, screenshotUrl: primary, screenshots };
+        persistence.saveStash(updatedStash);
+        const idx = completedStashes.indexOf(stash);
+        completedStashes[idx] = updatedStash;
+        emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: primary });
+      } finally {
+        devServer.kill();
+      }
       await worktreeManager.removeGeneration(`screenshot-${stash.id}`);
-      const updatedStash = { ...stash, screenshotUrl: screenshotPath };
-      persistence.saveStash(updatedStash);
-      const idx = completedStashes.indexOf(stash);
-      completedStashes[idx] = updatedStash;
-      emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath });
     } catch (err) {
       logger.error("generation", `screenshot failed for ${stash.id}`, {
         error: err instanceof Error ? err.message : String(err)
@@ -855,7 +1046,7 @@ async function generate(opts) {
 }
 // ../core/dist/vary.js
 var {spawn: spawn4 } = globalThis.Bun;
-import simpleGit3 from "simple-git";
+import simpleGit4 from "simple-git";
 function emit2(onProgress, event) {
   if (onProgress)
     onProgress(event);
@@ -913,6 +1104,7 @@ async function vary(opts) {
     worktreePath: worktree.path,
     port: null,
     screenshotUrl: null,
+    screenshots: [],
     status: "generating",
     error: null,
     relatedTo: [sourceStashId],
@@ -932,7 +1124,7 @@ async function vary(opts) {
       });
     }
     await aiProcess.process.exited;
-    const wtGit = simpleGit3(worktree.path);
+    const wtGit = simpleGit4(worktree.path);
     try {
       await wtGit.add("-A");
       await wtGit.commit(`stashes: vary ${stashId} from ${sourceStashId}`);
@@ -940,10 +1132,11 @@ async function vary(opts) {
     await worktreeManager.removeGeneration(stashId);
     emit2(onProgress, { type: "screenshotting", stashId });
     let screenshotPath = "";
+    let screenshots = [];
     try {
       const port = await allocatePort2();
       const screenshotWorktree = await worktreeManager.createForGeneration(`screenshot-${stashId}`);
-      const screenshotGit = simpleGit3(screenshotWorktree.path);
+      const screenshotGit = simpleGit4(screenshotWorktree.path);
       await screenshotGit.checkout(["-f", stash.branch]);
       const devServer = spawn4({
         cmd: ["npm", "run", "dev"],
@@ -956,7 +1149,18 @@ async function vary(opts) {
       try {
         await waitForPort2(port, 60000);
         await new Promise((r) => setTimeout(r, 2000));
-        screenshotPath = await captureScreenshot(port, projectPath, stashId);
+        const result = await captureSmartScreenshots({
+          projectPath,
+          stashId,
+          stashBranch: stash.branch,
+          parentBranch: sourceStash.branch,
+          worktreePath: screenshotWorktree.path,
+          port,
+          model: opts.screenshotModel,
+          timeout: opts.screenshotTimeout
+        });
+        screenshotPath = result.primary;
+        screenshots = [...result.screenshots];
       } finally {
         devServer.kill();
       }
@@ -966,7 +1170,7 @@ async function vary(opts) {
         error: err instanceof Error ? err.message : String(err)
       });
     }
-    const readyStash = { ...stash, status: "ready", screenshotUrl: screenshotPath || null };
+    const readyStash = { ...stash, status: "ready", screenshotUrl: screenshotPath || null, screenshots };
     persistence.saveStash(readyStash);
     emit2(onProgress, { type: "ready", stashId, screenshotPath });
     return readyStash;
@@ -990,7 +1194,7 @@ async function apply(opts) {
   logger.info("apply", `stash ${stashId} applied and worktrees cleaned up`);
 }
 // ../core/dist/manage.js
-import simpleGit4 from "simple-git";
+import simpleGit5 from "simple-git";
 async function list(projectPath) {
   const persistence = new PersistenceService(projectPath);
   const projects = persistence.listProjects();
@@ -1011,7 +1215,7 @@ async function remove(projectPath, stashId) {
     }
   }
   try {
-    const git = simpleGit4(projectPath);
+    const git = simpleGit5(projectPath);
     await git.raw(["branch", "-D", `stashes/${stashId}`]);
   } catch {}
   logger.info("manage", `removed stash: ${stashId}`);
@@ -1026,7 +1230,7 @@ async function show(projectPath, stashId) {
   }
   if (!found)
     return null;
-  const git = simpleGit4(projectPath);
+  const git = simpleGit5(projectPath);
   const branch = found.branch || `stashes/${stashId}`;
   let diff = "";
   let files = [];
@@ -1223,14 +1427,14 @@ async function handleRemove(args, projectPath) {
 // ../server/dist/index.js
 import { Hono as Hono2 } from "hono";
 import { cors } from "hono/cors";
-import { join as join8, dirname as dirname2 } from "path";
+import { join as join9, dirname as dirname2 } from "path";
 import { fileURLToPath } from "url";
-import { existsSync as existsSync8, readFileSync as readFileSync5 } from "fs";
+import { existsSync as existsSync9, readFileSync as readFileSync5 } from "fs";
 
 // ../server/dist/routes/api.js
 import { Hono } from "hono";
-import { join as join6, basename } from "path";
-import { existsSync as existsSync6, readFileSync as readFileSync3 } from "fs";
+import { join as join7, basename } from "path";
+import { existsSync as existsSync7, readFileSync as readFileSync3 } from "fs";
 var app = new Hono;
 app.get("/health", (c) => c.json({ status: "ok", service: "stashes" }));
 app.get("/projects", (c) => {
@@ -1311,8 +1515,8 @@ app.delete("/chats/:chatId", (c) => {
 });
 app.get("/screenshots/:filename", (c) => {
   const filename = c.req.param("filename");
-  const filePath = join6(serverState.projectPath, ".stashes", "screenshots", filename);
-  if (!existsSync6(filePath))
+  const filePath = join7(serverState.projectPath, ".stashes", "screenshots", filename);
+  if (!existsSync7(filePath))
     return c.json({ error: "Not found" }, 404);
   const content = readFileSync3(filePath);
   return new Response(content, {
@@ -1336,8 +1540,8 @@ function ensureProject(persistence) {
 var apiRoutes = app;
 
 // ../server/dist/services/stash-service.js
-import { readFileSync as readFileSync4, existsSync as existsSync7 } from "fs";
-import { join as join7 } from "path";
+import { readFileSync as readFileSync4, existsSync as existsSync8 } from "fs";
+import { join as join8 } from "path";
 
 // ../server/dist/services/preview-pool.js
 class PreviewPool {
@@ -1600,8 +1804,8 @@ class StashService {
     let sourceCode = "";
     const filePath = component?.filePath || "";
     if (filePath && filePath !== "auto-detect") {
-      const sourceFile = join7(this.projectPath, filePath);
-      if (existsSync7(sourceFile)) {
+      const sourceFile = join8(this.projectPath, filePath);
+      if (existsSync8(sourceFile)) {
         sourceCode = readFileSync4(sourceFile, "utf-8");
       }
     }
@@ -1751,6 +1955,7 @@ ${sourceCode.substring(0, 3000)}
       for (const msg of pendingMessages) {
         this.persistence.saveChatMessage(projectId, chatId, msg);
       }
+      this.syncStashesFromDisk(projectId);
     } catch (err) {
       this.broadcast({
         type: "ai_stream",
@@ -1762,6 +1967,25 @@ ${sourceCode.substring(0, 3000)}
       killAiProcess("chat");
     }
   }
+  syncStashesFromDisk(projectId) {
+    const diskStashes = this.persistence.listStashes(projectId);
+    for (const stash of diskStashes) {
+      this.broadcast({
+        type: "stash:status",
+        stashId: stash.id,
+        status: stash.status,
+        number: stash.number
+      });
+      if (stash.screenshotUrl) {
+        this.broadcast({
+          type: "stash:screenshot",
+          stashId: stash.id,
+          url: stash.screenshotUrl,
+          screenshots: stash.screenshots?.length ? [...stash.screenshots] : undefined
+        });
+      }
+    }
+  }
   progressToBroadcast(event) {
     switch (event.type) {
       case "generating":
@@ -1774,7 +1998,12 @@ ${sourceCode.substring(0, 3000)}
           ..."number" in event ? { number: event.number } : {}
         });
         if (event.type === "ready" && "screenshotPath" in event && event.screenshotPath) {
-          this.broadcast({ type: "stash:screenshot", stashId: event.stashId, url: event.screenshotPath });
+          this.broadcast({
+            type: "stash:screenshot",
+            stashId: event.stashId,
+            url: event.screenshotPath,
+            screenshots: "screenshots" in event ? event.screenshots : undefined
+          });
         }
         break;
       case "error":
@@ -1788,6 +2017,7 @@ ${sourceCode.substring(0, 3000)}
     }
   }
   async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT, referenceStashIds) {
+    const settings = this.persistence.getProjectSettings(projectId);
     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})` : ""}`);
@@ -1805,14 +2035,27 @@ ${refDescriptions.join(`
       prompt: enrichedPrompt,
       component: this.selectedComponent ? { filePath: this.selectedComponent.filePath, exportName: this.selectedComponent.name } : undefined,
       count: stashCount,
+      screenshotModel: settings.screenshotModel,
+      screenshotTimeout: settings.screenshotTimeout,
       onProgress: (event) => this.progressToBroadcast(event)
     });
   }
   async vary(sourceStashId, prompt) {
+    let projectId = "";
+    for (const project of this.persistence.listProjects()) {
+      const stashes = this.persistence.listStashes(project.id);
+      if (stashes.find((s) => s.id === sourceStashId)) {
+        projectId = project.id;
+        break;
+      }
+    }
+    const settings = projectId ? this.persistence.getProjectSettings(projectId) : {};
     await vary({
       projectPath: this.projectPath,
       sourceStashId,
       prompt,
+      screenshotModel: settings.screenshotModel,
+      screenshotTimeout: settings.screenshotTimeout,
       onProgress: (event) => this.progressToBroadcast(event)
     });
   }
@@ -1926,115 +2169,93 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
 }
 
 // ../server/dist/services/app-proxy.js
+import { spawn as spawn5 } from "child_process";
 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) {
-      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") || "";
-        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, userDevPort, proxyPort);
-          respHeaders.delete("content-encoding");
-          respHeaders.delete("content-length");
-          return new Response(injectedHtml, {
-            status: response.status,
-            headers: respHeaders
-          });
-        }
-        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);
+  const overlayScript = injectOverlay("", userDevPort, proxyPort);
+  const overlayEscaped = JSON.stringify(overlayScript);
+  const proxyScript = `
+const http = require('http');
+const net = require('net');
+const zlib = require('zlib');
+const UPSTREAM = ${userDevPort};
+const OVERLAY = ${overlayEscaped};
+
+const server = http.createServer((clientReq, clientRes) => {
+  const opts = {
+    hostname: 'localhost',
+    port: UPSTREAM,
+    path: clientReq.url,
+    method: clientReq.method,
+    headers: clientReq.headers,
+  };
+  const proxyReq = http.request(opts, (proxyRes) => {
+    const ct = proxyRes.headers['content-type'] || '';
+    if (ct.includes('text/html')) {
+      // Buffer HTML to inject overlay
+      const chunks = [];
+      proxyRes.on('data', c => chunks.push(c));
+      proxyRes.on('end', () => {
+        let html = Buffer.concat(chunks);
+        const enc = proxyRes.headers['content-encoding'];
+        // Decompress if needed
+        if (enc === 'gzip') {
+          try { html = zlib.gunzipSync(html); } catch {}
+        } else if (enc === 'br') {
+          try { html = zlib.brotliDecompressSync(html); } catch {}
+        } else if (enc === 'deflate') {
+          try { html = zlib.inflateSync(html); } catch {}
         }
-      },
-      close(ws) {
-        try {
-          ws.data.upstream?.close();
-        } catch {}
-      }
+        const hdrs = { ...proxyRes.headers };
+        delete hdrs['content-length'];
+        delete hdrs['content-encoding'];
+        delete hdrs['transfer-encoding'];
+        clientRes.writeHead(proxyRes.statusCode, hdrs);
+        clientRes.write(html);
+        clientRes.end(OVERLAY);
+      });
+    } else {
+      // Non-HTML: stream through unchanged
+      clientRes.writeHead(proxyRes.statusCode, proxyRes.headers);
+      proxyRes.pipe(clientRes);
     }
+    proxyRes.on('error', () => clientRes.end());
   });
-  logger.info("proxy", `App proxy at http://localhost:${proxyPort} \u2192 http://localhost:${userDevPort}`);
-  return server;
+  proxyReq.on('error', () => { try { clientRes.writeHead(502); clientRes.end(); } catch {} });
+  clientReq.pipe(proxyReq);
+});
+
+// WebSocket upgrades: raw TCP pipe
+server.on('upgrade', (req, socket, head) => {
+  const upstream = net.createConnection(UPSTREAM, 'localhost', () => {
+    const lines = [req.method + ' ' + req.url + ' HTTP/1.1'];
+    for (const [k, v] of Object.entries(req.headers)) {
+      lines.push(k + ': ' + (Array.isArray(v) ? v.join(', ') : v));
+    }
+    upstream.write(lines.join('\\r\\n') + '\\r\\n\\r\\n');
+    if (head.length) upstream.write(head);
+    socket.pipe(upstream);
+    upstream.pipe(socket);
+  });
+  upstream.on('error', () => socket.destroy());
+  socket.on('error', () => upstream.destroy());
+});
+
+server.listen(${proxyPort}, () => {
+  if (process.send) process.send('ready');
+});
+`;
+  const child = spawn5("node", ["-e", proxyScript], {
+    stdio: ["ignore", "inherit", "inherit", "ipc"]
+  });
+  child.on("error", (err) => {
+    logger.error("proxy", `Failed to start proxy: ${err.message}`);
+  });
+  child.on("message", (msg) => {
+    if (msg === "ready") {
+      logger.info("proxy", `App proxy at http://localhost:${proxyPort} \u2192 http://localhost:${userDevPort}`);
+    }
+  });
+  return child;
 }
 
 // ../server/dist/index.js
@@ -2051,12 +2272,12 @@ app2.route("/api", apiRoutes);
 app2.get("/*", async (c) => {
   const path = c.req.path;
   const selfDir = dirname2(fileURLToPath(import.meta.url));
-  const bundledWebDir = join8(selfDir, "web");
-  const monorepoWebDir = join8(selfDir, "../../web/dist");
-  const webDistDir = existsSync8(join8(bundledWebDir, "index.html")) ? bundledWebDir : monorepoWebDir;
+  const bundledWebDir = join9(selfDir, "web");
+  const monorepoWebDir = join9(selfDir, "../../web/dist");
+  const webDistDir = existsSync9(join9(bundledWebDir, "index.html")) ? bundledWebDir : monorepoWebDir;
   const requestPath = path === "/" ? "/index.html" : path;
-  const filePath = join8(webDistDir, requestPath);
-  if (existsSync8(filePath) && !filePath.includes("..")) {
+  const filePath = join9(webDistDir, requestPath);
+  if (existsSync9(filePath) && !filePath.includes("..")) {
     const content = readFileSync5(filePath);
     const ext = filePath.split(".").pop() || "";
     const contentTypes = {
@@ -2075,8 +2296,8 @@ app2.get("/*", async (c) => {
       headers: { "content-type": contentTypes[ext] || "application/octet-stream" }
     });
   }
-  const indexPath = join8(webDistDir, "index.html");
-  if (existsSync8(indexPath)) {
+  const indexPath = join9(webDistDir, "index.html");
+  if (existsSync9(indexPath)) {
     const html = readFileSync5(indexPath, "utf-8");
     return new Response(html, {
       headers: { "content-type": "text/html; charset=utf-8" }
@@ -2112,7 +2333,7 @@ function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   logger.info("server", `Project: ${projectPath}`);
   return server;
 }
-function injectOverlayScript(html, upstreamPort, proxyPort) {
+function injectOverlayScript(html, _upstreamPort, _proxyPort) {
   const overlayScript = `
 <script data-stashes-overlay>
 (function() {
@@ -2120,35 +2341,6 @@ function injectOverlayScript(html, upstreamPort, proxyPort) {
   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';
@@ -2162,13 +2354,18 @@ function injectOverlayScript(html, upstreamPort, proxyPort) {
   }
 
   var SEMANTIC_TAGS = ['header','nav','main','section','article','aside','footer','form','dialog'];
+  var LEAF_TAGS = ['h1','h2','h3','h4','h5','h6','p','button','a','input','textarea','select','img','svg','video','label','li','td','th','figcaption','blockquote','pre','code','span'];
 
   function findTarget(el, precise) {
     if (precise) return el;
+    // If the element itself is a meaningful leaf, select it directly
+    var elTag = el.tagName ? el.tagName.toLowerCase() : '';
+    if (LEAF_TAGS.indexOf(elTag) !== -1) return el;
     var current = el;
     var best = el;
     while (current && current !== document.body) {
       var tag = current.tagName.toLowerCase();
+      if (LEAF_TAGS.indexOf(tag) !== -1) { best = current; break; }
       if (SEMANTIC_TAGS.indexOf(tag) !== -1) { best = current; break; }
       if (current.id) { best = current; break; }
       if (current.getAttribute('role')) { best = current; break; }
@@ -2322,11 +2519,11 @@ function injectOverlayScript(html, upstreamPort, proxyPort) {
 import open from "open";
 
 // ../server/dist/services/detector.js
-import { existsSync as existsSync9, readFileSync as readFileSync6 } from "fs";
-import { join as join9 } from "path";
+import { existsSync as existsSync10, readFileSync as readFileSync6 } from "fs";
+import { join as join10 } from "path";
 function detectFramework(projectPath) {
-  const packageJsonPath = join9(projectPath, "package.json");
-  if (!existsSync9(packageJsonPath)) {
+  const packageJsonPath = join10(projectPath, "package.json");
+  if (!existsSync10(packageJsonPath)) {
     return {
       framework: "unknown",
       devCommand: "npm run dev",
@@ -2388,7 +2585,7 @@ function getDevCommand(packageJson, fallback) {
 }
 function findConfig(projectPath, candidates) {
   for (const candidate of candidates) {
-    if (existsSync9(join9(projectPath, candidate))) {
+    if (existsSync10(join10(projectPath, candidate))) {
       return candidate;
     }
   }