stashes 0.1.38 → 0.1.40

package/dist/cli.js

@@ -102,18 +102,35 @@ app.get("/chats", (c) => {
 app.post("/chats", async (c) => {
   const persistence = getPersistence();
   const project = ensureProject(persistence);
-  const { title } = await c.req.json();
+  const { title, referencedStashIds } = await c.req.json();
   const chatCount = persistence.listChats(project.id).length;
   const chat = {
     id: `chat_${crypto.randomUUID().substring(0, 8)}`,
     projectId: project.id,
     title: title?.trim() || `Chat ${chatCount + 1}`,
+    referencedStashIds: referencedStashIds ?? [],
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString()
   };
   persistence.saveChat(chat);
   return c.json({ data: chat }, 201);
 });
+app.patch("/chats/:chatId", async (c) => {
+  const persistence = getPersistence();
+  const project = ensureProject(persistence);
+  const chatId = c.req.param("chatId");
+  const chat = persistence.getChat(project.id, chatId);
+  if (!chat)
+    return c.json({ error: "Chat not found" }, 404);
+  const body = await c.req.json();
+  const updated = {
+    ...chat,
+    ...body.referencedStashIds !== undefined ? { referencedStashIds: body.referencedStashIds } : {},
+    updatedAt: new Date().toISOString()
+  };
+  persistence.saveChat(updated);
+  return c.json({ data: updated });
+});
 app.get("/chats/:chatId", (c) => {
   const persistence = getPersistence();
   const project = ensureProject(persistence);
@@ -122,7 +139,8 @@ app.get("/chats/:chatId", (c) => {
   if (!chat)
     return c.json({ error: "Chat not found" }, 404);
   const messages = persistence.getChatMessages(project.id, chatId);
-  const stashes = persistence.listStashes(project.id).filter((s) => s.originChatId === chatId);
+  const refIds = new Set(chat.referencedStashIds ?? []);
+  const stashes = persistence.listStashes(project.id).filter((s) => s.originChatId === chatId || refIds.has(s.id));
   return c.json({ data: { ...chat, messages, stashes } });
 });
 app.delete("/chats/:chatId", (c) => {
@@ -1362,141 +1380,428 @@ async function cleanup(projectPath) {
 import { readFileSync as readFileSync4, existsSync as existsSync8 } from "fs";
 import { join as join8 } 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)
+// ../server/dist/services/app-proxy.js
+import { spawn as spawn5 } from "child_process";
+function startAppProxy(userDevPort, proxyPort, injectOverlay) {
+  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 {}
+        }
+        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);
     }
-  }
-  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)
-        });
-      });
+    proxyRes.on('error', () => clientRes.end());
+  });
+  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));
     }
-  }
-  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);
+    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/services/overlay-script.js
+function injectOverlayScript(html, _upstreamPort, _proxyPort) {
+  const overlayScript = `
+<script data-stashes-overlay>
+(function() {
+  var highlightOverlay = null;
+  var pickerEnabled = false;
+  var precisionMode = false;
+
+  function createOverlay() {
+    var overlay = document.createElement('div');
+    overlay.id = 'stashes-highlight';
+    overlay.style.cssText = 'position:fixed;pointer-events:none;border:2px solid #6366f1;background:rgba(99,102,241,0.1);z-index:99999;transition:all 0.1s ease;display:none;border-radius:4px;';
+    var tooltip = document.createElement('div');
+    tooltip.id = 'stashes-tooltip';
+    tooltip.style.cssText = 'position:fixed;background:#1e1b4b;color:#e0e7ff;padding:4px 10px;border-radius:6px;font-size:11px;font-family:ui-monospace,monospace;z-index:100000;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.3);max-width:400px;overflow:hidden;text-overflow:ellipsis;';
+    document.body.appendChild(overlay);
+    document.body.appendChild(tooltip);
+    return overlay;
   }
-  reap() {
-    const now = Date.now();
-    const expired = [];
-    for (const [stashId, entry] of this.entries) {
-      if (now - entry.lastHeartbeat > this.ttlMs) {
-        expired.push(stashId);
+
+  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; }
+      if (current.getAttribute('data-testid')) { best = current; break; }
+      if (current.children && current.children.length > 1 && current.getBoundingClientRect().height > 50) {
+        best = current;
+        break;
       }
+      current = current.parentElement;
     }
-    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 });
-    }
+    return best;
   }
-  evictOldest() {
-    let oldest = null;
+
+  function describeElement(el) {
+    var tag = el.tagName.toLowerCase();
+    var id = el.id ? '#' + el.id : '';
+    var role = el.getAttribute('role') || '';
+    var testId = el.getAttribute('data-testid') || '';
+    var cls = (el.className && typeof el.className === 'string') ? el.className.trim().split(/[ ]+/).slice(0, 2).join('.') : '';
+    var text = (el.textContent || '').trim().substring(0, 40);
+    var label = tag;
+    if (SEMANTIC_TAGS.indexOf(tag) !== -1) label = tag.toUpperCase();
+    if (id) label += ' ' + id;
+    else if (cls) label += '.' + cls;
+    if (role) label += ' [' + role + ']';
+    if (testId) label += ' [' + testId + ']';
+    if (!id && !cls && text) label += ' "' + text.substring(0, 25) + '"';
+    return label;
+  }
+
+  function generateSelector(el) {
+    if (el.id) return '#' + el.id;
+    var parts = [];
+    var current = el;
+    var depth = 0;
+    while (current && current !== document.body && depth < 5) {
+      var sel = current.tagName.toLowerCase();
+      if (current.id) { parts.unshift('#' + current.id); break; }
+      if (current.className && typeof current.className === 'string') {
+        var c = current.className.trim().split(/[ ]+/).slice(0, 2).join('.');
+        if (c) sel += '.' + c;
+      }
+      parts.unshift(sel);
+      current = current.parentElement;
+      depth++;
+    }
+    return parts.join(' > ');
+  }
+
+  function onMouseMove(e) {
+    if (!pickerEnabled) return;
+    if (!highlightOverlay) highlightOverlay = createOverlay();
+    precisionMode = e.shiftKey;
+    var target = findTarget(e.target, precisionMode);
+    var overlay = document.getElementById('stashes-highlight');
+    var tooltip = document.getElementById('stashes-tooltip');
+    if (target) {
+      var rect = target.getBoundingClientRect();
+      overlay.style.display = 'block';
+      overlay.style.top = rect.top + 'px';
+      overlay.style.left = rect.left + 'px';
+      overlay.style.width = rect.width + 'px';
+      overlay.style.height = rect.height + 'px';
+      overlay.style.borderColor = precisionMode ? '#f59e0b' : '#6366f1';
+      tooltip.style.display = 'block';
+      tooltip.style.top = Math.max(0, rect.top - 30) + 'px';
+      tooltip.style.left = Math.max(0, rect.left) + 'px';
+      tooltip.textContent = (precisionMode ? '[precise] ' : '') + describeElement(target);
+    } else {
+      overlay.style.display = 'none';
+      tooltip.style.display = 'none';
+    }
+  }
+
+  function onClick(e) {
+    if (!pickerEnabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    var target = findTarget(e.target, e.shiftKey);
+    if (target) {
+      var desc = describeElement(target);
+      var selector = generateSelector(target);
+      var tag = target.tagName.toLowerCase();
+      var outerSnippet = target.outerHTML.substring(0, 500);
+      window.parent.postMessage({
+        type: 'stashes:component_selected',
+        component: {
+          name: desc,
+          filePath: 'auto-detect',
+          domSelector: selector,
+          htmlSnippet: outerSnippet,
+          tag: tag
+        }
+      }, '*');
+      var overlay = document.getElementById('stashes-highlight');
+      if (overlay) {
+        overlay.style.borderColor = '#22c55e';
+        overlay.style.background = 'rgba(34,197,94,0.1)';
+        setTimeout(function() {
+          overlay.style.borderColor = '#6366f1';
+          overlay.style.background = 'rgba(99,102,241,0.1)';
+        }, 500);
+      }
+    }
+  }
+
+  window.addEventListener('message', function(e) {
+    if (!e.data || !e.data.type) return;
+    if (e.data.type === 'stashes:toggle_picker') {
+      pickerEnabled = e.data.enabled;
+      if (!pickerEnabled) {
+        var ov = document.getElementById('stashes-highlight');
+        var tp = document.getElementById('stashes-tooltip');
+        if (ov) ov.style.display = 'none';
+        if (tp) tp.style.display = 'none';
+      }
+    } else if (e.data.type === 'stashes:navigate_back') {
+      history.back();
+    } else if (e.data.type === 'stashes:navigate_forward') {
+      history.forward();
+    } else if (e.data.type === 'stashes:refresh') {
+      location.reload();
+    } else if (e.data.type === 'stashes:navigate_to') {
+      window.location.href = e.data.url;
+    }
+  });
+
+  // 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);
+})();
+</script>`;
+  if (html.includes("</body>")) {
+    return html.replace("</body>", () => overlayScript + `
+</body>`);
+  }
+  return html + overlayScript;
+}
+
+// ../server/dist/services/preview-pool.js
+var DEV_PORT_OFFSET = 1000;
+
+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 proxyPort = this.allocatePort();
+    const devPort = proxyPort + DEV_PORT_OFFSET;
+    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(devPort), BROWSER: "none" }
+    });
+    const proxyProcess = startAppProxy(devPort, proxyPort, injectOverlayScript);
+    const entry = {
+      stashId,
+      port: proxyPort,
+      process: process2,
+      proxyProcess,
+      worktreePath,
+      lastHeartbeat: Date.now()
+    };
+    this.entries.set(stashId, entry);
+    this.usedPorts.add(proxyPort);
+    logger.info("pool", `cold start: ${stashId} dev=:${devPort} proxy=:${proxyPort}`, { poolSize: this.entries.size });
+    await this.waitForPort(proxyPort, 60000);
+    return proxyPort;
+  }
+  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;
@@ -1527,6 +1832,9 @@ class PreviewPool {
     try {
       entry.process.kill();
     } catch {}
+    try {
+      entry.proxyProcess.kill();
+    } catch {}
   }
   async waitForPort(port, timeout) {
     const start = Date.now();
@@ -2031,124 +2339,34 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
               }
             }
             await stashService.message(event.projectId, event.chatId, event.message, event.referenceStashIds, event.componentContext);
-            break;
-          }
-          case "interact":
-            await stashService.switchPreview(event.stashId, event.sortedStashIds);
-            break;
-          case "preview_heartbeat":
-            stashService.previewHeartbeat(event.stashId);
-            break;
-          case "apply_stash":
-            await stashService.applyStash(event.stashId);
-            break;
-          case "delete_stash":
-            await stashService.deleteStash(event.stashId);
-            break;
-        }
-      } catch (err) {
-        const errorMsg = err instanceof Error ? err.message : String(err);
-        logger.error("ws", `handler failed for ${event.type}`, { error: errorMsg });
-        if ("stashId" in event && event.stashId) {
-          broadcast({ type: "stash:error", stashId: event.stashId, error: errorMsg });
-        }
-      }
-    },
-    close(ws) {
-      clients.delete(ws);
-      logger.info("ws", "client disconnected", { remaining: clients.size });
-    }
-  };
-}
-
-// ../server/dist/services/app-proxy.js
-import { spawn as spawn5 } from "child_process";
-function startAppProxy(userDevPort, proxyPort, injectOverlay) {
-  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 {}
+            break;
+          }
+          case "interact":
+            await stashService.switchPreview(event.stashId, event.sortedStashIds);
+            break;
+          case "preview_heartbeat":
+            stashService.previewHeartbeat(event.stashId);
+            break;
+          case "apply_stash":
+            await stashService.applyStash(event.stashId);
+            break;
+          case "delete_stash":
+            await stashService.deleteStash(event.stashId);
+            break;
         }
-        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());
-  });
-  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}`);
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        logger.error("ws", `handler failed for ${event.type}`, { error: errorMsg });
+        if ("stashId" in event && event.stashId) {
+          broadcast({ type: "stash:error", stashId: event.stashId, error: errorMsg });
+        }
+      }
+    },
+    close(ws) {
+      clients.delete(ws);
+      logger.info("ws", "client disconnected", { remaining: clients.size });
     }
-  });
-  return child;
+  };
 }
 
 // ../server/dist/index.js
@@ -2226,187 +2444,6 @@ function startServer(projectPath, userDevPort, port = STASHES_PORT) {
   logger.info("server", `Project: ${projectPath}`);
   return server;
 }
-function injectOverlayScript(html, _upstreamPort, _proxyPort) {
-  const overlayScript = `
-<script data-stashes-overlay>
-(function() {
-  var highlightOverlay = null;
-  var pickerEnabled = false;
-  var precisionMode = false;
-
-  function createOverlay() {
-    var overlay = document.createElement('div');
-    overlay.id = 'stashes-highlight';
-    overlay.style.cssText = 'position:fixed;pointer-events:none;border:2px solid #6366f1;background:rgba(99,102,241,0.1);z-index:99999;transition:all 0.1s ease;display:none;border-radius:4px;';
-    var tooltip = document.createElement('div');
-    tooltip.id = 'stashes-tooltip';
-    tooltip.style.cssText = 'position:fixed;background:#1e1b4b;color:#e0e7ff;padding:4px 10px;border-radius:6px;font-size:11px;font-family:ui-monospace,monospace;z-index:100000;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.3);max-width:400px;overflow:hidden;text-overflow:ellipsis;';
-    document.body.appendChild(overlay);
-    document.body.appendChild(tooltip);
-    return overlay;
-  }
-
-  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; }
-      if (current.getAttribute('data-testid')) { best = current; break; }
-      if (current.children && current.children.length > 1 && current.getBoundingClientRect().height > 50) {
-        best = current;
-        break;
-      }
-      current = current.parentElement;
-    }
-    return best;
-  }
-
-  function describeElement(el) {
-    var tag = el.tagName.toLowerCase();
-    var id = el.id ? '#' + el.id : '';
-    var role = el.getAttribute('role') || '';
-    var testId = el.getAttribute('data-testid') || '';
-    var cls = (el.className && typeof el.className === 'string') ? el.className.trim().split(/[ ]+/).slice(0, 2).join('.') : '';
-    var text = (el.textContent || '').trim().substring(0, 40);
-    var label = tag;
-    if (SEMANTIC_TAGS.indexOf(tag) !== -1) label = tag.toUpperCase();
-    if (id) label += ' ' + id;
-    else if (cls) label += '.' + cls;
-    if (role) label += ' [' + role + ']';
-    if (testId) label += ' [' + testId + ']';
-    if (!id && !cls && text) label += ' "' + text.substring(0, 25) + '"';
-    return label;
-  }
-
-  function generateSelector(el) {
-    if (el.id) return '#' + el.id;
-    var parts = [];
-    var current = el;
-    var depth = 0;
-    while (current && current !== document.body && depth < 5) {
-      var sel = current.tagName.toLowerCase();
-      if (current.id) { parts.unshift('#' + current.id); break; }
-      if (current.className && typeof current.className === 'string') {
-        var c = current.className.trim().split(/[ ]+/).slice(0, 2).join('.');
-        if (c) sel += '.' + c;
-      }
-      parts.unshift(sel);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(' > ');
-  }
-
-  function onMouseMove(e) {
-    if (!pickerEnabled) return;
-    if (!highlightOverlay) highlightOverlay = createOverlay();
-    precisionMode = e.shiftKey;
-    var target = findTarget(e.target, precisionMode);
-    var overlay = document.getElementById('stashes-highlight');
-    var tooltip = document.getElementById('stashes-tooltip');
-    if (target) {
-      var rect = target.getBoundingClientRect();
-      overlay.style.display = 'block';
-      overlay.style.top = rect.top + 'px';
-      overlay.style.left = rect.left + 'px';
-      overlay.style.width = rect.width + 'px';
-      overlay.style.height = rect.height + 'px';
-      overlay.style.borderColor = precisionMode ? '#f59e0b' : '#6366f1';
-      tooltip.style.display = 'block';
-      tooltip.style.top = Math.max(0, rect.top - 30) + 'px';
-      tooltip.style.left = Math.max(0, rect.left) + 'px';
-      tooltip.textContent = (precisionMode ? '[precise] ' : '') + describeElement(target);
-    } else {
-      overlay.style.display = 'none';
-      tooltip.style.display = 'none';
-    }
-  }
-
-  function onClick(e) {
-    if (!pickerEnabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    var target = findTarget(e.target, e.shiftKey);
-    if (target) {
-      var desc = describeElement(target);
-      var selector = generateSelector(target);
-      var tag = target.tagName.toLowerCase();
-      var outerSnippet = target.outerHTML.substring(0, 500);
-      window.parent.postMessage({
-        type: 'stashes:component_selected',
-        component: {
-          name: desc,
-          filePath: 'auto-detect',
-          domSelector: selector,
-          htmlSnippet: outerSnippet,
-          tag: tag
-        }
-      }, '*');
-      var overlay = document.getElementById('stashes-highlight');
-      if (overlay) {
-        overlay.style.borderColor = '#22c55e';
-        overlay.style.background = 'rgba(34,197,94,0.1)';
-        setTimeout(function() {
-          overlay.style.borderColor = '#6366f1';
-          overlay.style.background = 'rgba(99,102,241,0.1)';
-        }, 500);
-      }
-    }
-  }
-
-  window.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'stashes:toggle_picker') {
-      pickerEnabled = e.data.enabled;
-      if (!pickerEnabled) {
-        var ov = document.getElementById('stashes-highlight');
-        var tp = document.getElementById('stashes-tooltip');
-        if (ov) ov.style.display = 'none';
-        if (tp) tp.style.display = 'none';
-      }
-    }
-  });
-
-  // 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);
-})();
-</script>`;
-  if (html.includes("</body>")) {
-    return html.replace("</body>", () => overlayScript + `
-</body>`);
-  }
-  return html + overlayScript;
-}
 
 // ../server/dist/services/detector.js
 import { existsSync as existsSync10, readFileSync as readFileSync6 } from "fs";