stashes 0.1.0 → 0.1.2

package/dist/mcp.js

@@ -0,0 +1,1781 @@
+#!/usr/bin/env bun
+// @bun
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = import.meta.require;
+
+// ../mcp/src/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// ../mcp/src/tools/generate.ts
+import { z } from "zod";
+
+// ../core/dist/generation.js
+import { readFileSync as readFileSync2, existsSync as existsSync5 } from "fs";
+import { join as join5 } from "path";
+var {spawn: spawn3 } = globalThis.Bun;
+import simpleGit2 from "simple-git";
+// ../shared/dist/constants/index.js
+var STASHES_PORT = 4000;
+var DEFAULT_STASH_COUNT = 3;
+var STASH_PORT_START = 4010;
+var DEFAULT_DIRECTIVES = [
+  "Minimal and clean \u2014 reduce visual noise, emphasize whitespace, limit to 2-3 colors, typography-driven hierarchy",
+  "Bold and expressive \u2014 strong visual identity, use motion/animation, rich interactions, distinctive layout",
+  "Data-dense and functional \u2014 maximize information density, compact layout, efficient use of space, power-user focused",
+  "Elegant and premium \u2014 refined aesthetics, subtle animations, luxury feel, careful attention to micro-interactions",
+  "Playful and modern \u2014 rounded corners, vibrant colors, friendly tone, engaging micro-interactions"
+];
+// ../core/dist/worktree.js
+import simpleGit from "simple-git";
+import { join as join2 } from "path";
+import { existsSync as existsSync2, rmSync, symlinkSync } from "fs";
+
+// ../core/dist/logger.js
+import { appendFileSync, mkdirSync, existsSync } from "fs";
+import { join } from "path";
+var COLORS = {
+  reset: "\x1B[0m",
+  dim: "\x1B[2m",
+  cyan: "\x1B[36m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  red: "\x1B[31m",
+  magenta: "\x1B[35m"
+};
+var LEVEL_COLORS = {
+  debug: COLORS.dim,
+  info: COLORS.cyan,
+  warn: COLORS.yellow,
+  error: COLORS.red
+};
+var LEVEL_LABELS = {
+  debug: "DBG",
+  info: "INF",
+  warn: "WRN",
+  error: "ERR"
+};
+var logFilePath = null;
+function initLogFile(projectPath) {
+  const logDir = join(projectPath, ".stashes", "logs");
+  if (!existsSync(logDir)) {
+    mkdirSync(logDir, { recursive: true });
+  }
+  const date = new Date().toISOString().substring(0, 10);
+  logFilePath = join(logDir, `stashes-${date}.log`);
+}
+function ts() {
+  return new Date().toISOString().substring(11, 23);
+}
+function log(level, category, message, data) {
+  const timestamp = ts();
+  const color = LEVEL_COLORS[level];
+  const label = LEVEL_LABELS[level];
+  const dataStr = data ? ` ${JSON.stringify(data)}` : "";
+  console.log(`${COLORS.dim}${timestamp}${COLORS.reset} ${color}${label}${COLORS.reset} ${COLORS.magenta}[${category}]${COLORS.reset} ${message}${data ? ` ${COLORS.dim}${JSON.stringify(data)}${COLORS.reset}` : ""}`);
+  if (logFilePath) {
+    const line = `${timestamp} ${label} [${category}] ${message}${dataStr}
+`;
+    try {
+      appendFileSync(logFilePath, line);
+    } catch {}
+  }
+}
+var logger = {
+  debug: (category, message, data) => log("debug", category, message, data),
+  info: (category, message, data) => log("info", category, message, data),
+  warn: (category, message, data) => log("warn", category, message, data),
+  error: (category, message, data) => log("error", category, message, data)
+};
+
+// ../core/dist/worktree.js
+var PREVIEW_PORT = STASH_PORT_START;
+
+class WorktreeManager {
+  git;
+  projectPath;
+  worktrees = new Map;
+  previewPath = null;
+  constructor(projectPath) {
+    this.projectPath = projectPath;
+    this.git = simpleGit(projectPath);
+    this.cleanupStaleWorktrees();
+  }
+  async cleanupStaleWorktrees() {
+    const worktreesDir = join2(this.projectPath, ".stashes", "worktrees");
+    if (!existsSync2(worktreesDir))
+      return;
+    try {
+      const { readdirSync } = await import("fs");
+      const entries = readdirSync(worktreesDir);
+      for (const entry of entries) {
+        const worktreePath = join2(worktreesDir, entry);
+        logger.info("worktree", `cleaning up stale worktree: ${entry}`);
+        try {
+          await this.git.raw(["worktree", "remove", "--force", worktreePath]);
+        } catch {
+          rmSync(worktreePath, { recursive: true, force: true });
+        }
+      }
+      await this.git.raw(["worktree", "prune"]);
+      logger.info("worktree", "stale worktree cleanup complete");
+    } catch (err) {
+      logger.warn("worktree", "stale worktree cleanup failed", {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+  async createForGeneration(stashId) {
+    const branch = `stashes/${stashId}`;
+    const worktreePath = join2(this.projectPath, ".stashes", "worktrees", stashId);
+    if (existsSync2(worktreePath)) {
+      await this.removeGeneration(stashId);
+    }
+    logger.info("worktree", `creating generation: ${stashId}`, { branch, path: worktreePath });
+    await this.git.raw(["worktree", "add", "-b", branch, worktreePath]);
+    this.symlinkDeps(worktreePath);
+    const info = { path: worktreePath, branch };
+    this.worktrees.set(stashId, info);
+    logger.info("worktree", `created generation: ${stashId}`);
+    return info;
+  }
+  async createForVary(stashId, sourceBranch) {
+    const branch = `stashes/${stashId}`;
+    const worktreePath = join2(this.projectPath, ".stashes", "worktrees", stashId);
+    if (existsSync2(worktreePath)) {
+      await this.removeGeneration(stashId);
+    }
+    logger.info("worktree", `creating vary: ${stashId}`, { sourceBranch, branch });
+    await this.git.raw(["worktree", "add", "-b", branch, worktreePath, sourceBranch]);
+    this.symlinkDeps(worktreePath);
+    const info = { path: worktreePath, branch };
+    this.worktrees.set(stashId, info);
+    logger.info("worktree", `created vary: ${stashId}`);
+    return info;
+  }
+  async removeGeneration(stashId) {
+    const info = this.worktrees.get(stashId);
+    const worktreePath = info?.path ?? join2(this.projectPath, ".stashes", "worktrees", stashId);
+    logger.info("worktree", `removing generation worktree: ${stashId}`);
+    try {
+      await this.git.raw(["worktree", "remove", "--force", worktreePath]);
+    } catch {
+      if (existsSync2(worktreePath)) {
+        rmSync(worktreePath, { recursive: true, force: true });
+      }
+    }
+    this.worktrees.delete(stashId);
+  }
+  async createPreview() {
+    const previewPath = join2(this.projectPath, ".stashes", "preview");
+    if (existsSync2(previewPath)) {
+      try {
+        await this.git.raw(["worktree", "remove", "--force", previewPath]);
+      } catch {
+        rmSync(previewPath, { recursive: true, force: true });
+      }
+    }
+    logger.info("worktree", "creating preview worktree");
+    await this.git.raw(["worktree", "add", "--detach", previewPath]);
+    this.symlinkDeps(previewPath);
+    this.previewPath = previewPath;
+    logger.info("worktree", "preview worktree created", { path: previewPath });
+    return previewPath;
+  }
+  async switchPreviewTo(stashId) {
+    if (!this.previewPath)
+      throw new Error("Preview worktree not created");
+    const branch = `stashes/${stashId}`;
+    logger.info("worktree", `switching preview to: ${branch}`);
+    const previewGit = simpleGit(this.previewPath);
+    try {
+      await previewGit.checkout(["-f", branch]);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (msg.includes("is already used by worktree")) {
+        logger.warn("worktree", `stale worktree blocking ${branch}, cleaning up`);
+        const staleDir = join2(this.projectPath, ".stashes", "worktrees", stashId);
+        try {
+          await this.git.raw(["worktree", "remove", "--force", staleDir]);
+        } catch {
+          if (existsSync2(staleDir)) {
+            rmSync(staleDir, { recursive: true, force: true });
+          }
+        }
+        await this.git.raw(["worktree", "prune"]);
+        await previewGit.checkout(["-f", branch]);
+      } else {
+        throw err;
+      }
+    }
+    logger.info("worktree", `preview now on: ${branch}`);
+  }
+  getPreviewPath() {
+    return this.previewPath;
+  }
+  getPreviewPort() {
+    return PREVIEW_PORT;
+  }
+  async apply(stashId) {
+    const branch = `stashes/${stashId}`;
+    logger.info("worktree", `merging: ${stashId}`, { branch });
+    await this.git.merge([branch, "--no-ff", "-m", `stashes: apply stash ${stashId}`]);
+    logger.info("worktree", `merged: ${stashId}`);
+  }
+  async cleanupAll() {
+    logger.info("worktree", `cleaning up all`, { worktrees: this.worktrees.size, hasPreview: !!this.previewPath });
+    if (this.previewPath) {
+      try {
+        await this.git.raw(["worktree", "remove", "--force", this.previewPath]);
+      } catch {
+        if (existsSync2(this.previewPath)) {
+          rmSync(this.previewPath, { recursive: true, force: true });
+        }
+      }
+      this.previewPath = null;
+    }
+    const stashIds = [...this.worktrees.keys()];
+    for (const id of stashIds) {
+      await this.removeGeneration(id);
+    }
+    try {
+      const branches = await this.git.branch();
+      for (const branch of branches.all) {
+        if (branch.startsWith("stashes/")) {
+          try {
+            await this.git.raw(["branch", "-D", branch]);
+          } catch {}
+        }
+      }
+    } catch {}
+    const worktreesDir = join2(this.projectPath, ".stashes", "worktrees");
+    if (existsSync2(worktreesDir)) {
+      rmSync(worktreesDir, { recursive: true, force: true });
+    }
+    const previewDir = join2(this.projectPath, ".stashes", "preview");
+    if (existsSync2(previewDir)) {
+      rmSync(previewDir, { recursive: true, force: true });
+    }
+    logger.info("worktree", `cleanup complete`);
+  }
+  symlinkDeps(worktreePath) {
+    const symlinks = ["node_modules", ".env", ".env.local"];
+    for (const name of symlinks) {
+      const source = join2(this.projectPath, name);
+      const target = join2(worktreePath, name);
+      if (existsSync2(source) && !existsSync2(target)) {
+        try {
+          symlinkSync(source, target);
+        } catch {}
+      }
+    }
+  }
+}
+
+// ../core/dist/persistence.js
+import { readFileSync, writeFileSync, mkdirSync as mkdirSync2, existsSync as existsSync3, rmSync as rmSync2 } from "fs";
+import { join as join3, dirname } from "path";
+var STASHES_DIR = ".stashes";
+function ensureDir(dirPath) {
+  if (!existsSync3(dirPath)) {
+    mkdirSync2(dirPath, { recursive: true });
+  }
+}
+function readJson(filePath, fallback) {
+  if (!existsSync3(filePath))
+    return fallback;
+  try {
+    return JSON.parse(readFileSync(filePath, "utf-8"));
+  } catch {
+    logger.warn("persistence", `failed to read ${filePath}, using fallback`);
+    return fallback;
+  }
+}
+function writeJson(filePath, data) {
+  ensureDir(dirname(filePath));
+  writeFileSync(filePath, JSON.stringify(data, null, 2), "utf-8");
+}
+
+class PersistenceService {
+  basePath;
+  constructor(projectPath) {
+    this.basePath = join3(projectPath, STASHES_DIR);
+    ensureDir(this.basePath);
+    this.ensureGitignore(projectPath);
+  }
+  listProjects() {
+    return readJson(join3(this.basePath, "projects.json"), []);
+  }
+  getProject(projectId) {
+    return this.listProjects().find((p) => p.id === projectId);
+  }
+  saveProject(project) {
+    const projects = [...this.listProjects()];
+    const index = projects.findIndex((p) => p.id === project.id);
+    if (index >= 0) {
+      projects[index] = project;
+    } else {
+      projects.push(project);
+    }
+    writeJson(join3(this.basePath, "projects.json"), projects);
+  }
+  deleteProject(projectId) {
+    const projects = this.listProjects().filter((p) => p.id !== projectId);
+    writeJson(join3(this.basePath, "projects.json"), projects);
+    const projectDir = join3(this.basePath, "projects", projectId);
+    if (existsSync3(projectDir)) {
+      rmSync2(projectDir, { recursive: true, force: true });
+    }
+  }
+  listStashes(projectId) {
+    const filePath = join3(this.basePath, "projects", projectId, "stashes.json");
+    return readJson(filePath, []);
+  }
+  saveStash(stash) {
+    const stashes = [...this.listStashes(stash.projectId)];
+    const index = stashes.findIndex((s) => s.id === stash.id);
+    if (index >= 0) {
+      stashes[index] = stash;
+    } else {
+      stashes.push(stash);
+    }
+    const filePath = join3(this.basePath, "projects", stash.projectId, "stashes.json");
+    writeJson(filePath, stashes);
+  }
+  deleteStash(projectId, stashId) {
+    const stashes = this.listStashes(projectId).filter((s) => s.id !== stashId);
+    const filePath = join3(this.basePath, "projects", projectId, "stashes.json");
+    writeJson(filePath, stashes);
+  }
+  getChatHistory(projectId) {
+    const filePath = join3(this.basePath, "projects", projectId, "chat.json");
+    return readJson(filePath, []);
+  }
+  saveChatMessage(projectId, message) {
+    const messages = [...this.getChatHistory(projectId), message];
+    const filePath = join3(this.basePath, "projects", projectId, "chat.json");
+    writeJson(filePath, messages);
+  }
+  ensureGitignore(projectPath) {
+    const gitignorePath = join3(projectPath, ".gitignore");
+    if (existsSync3(gitignorePath)) {
+      const content = readFileSync(gitignorePath, "utf-8");
+      if (!content.includes(".stashes/")) {
+        writeFileSync(gitignorePath, content.trimEnd() + `
+.stashes/
+`, "utf-8");
+        logger.info("persistence", "added .stashes/ to .gitignore");
+      }
+    } else {
+      writeFileSync(gitignorePath, `.stashes/
+`, "utf-8");
+    }
+  }
+}
+
+// ../core/dist/ai-process.js
+var {spawn } = globalThis.Bun;
+var CLAUDE_BIN = "/opt/homebrew/bin/claude";
+var processes = new Map;
+function startAiProcess(id, prompt, cwd) {
+  killAiProcess(id);
+  logger.info("claude", `spawning process: ${id}`, {
+    cwd,
+    promptLength: prompt.length,
+    promptPreview: prompt.substring(0, 100)
+  });
+  const proc = spawn({
+    cmd: [CLAUDE_BIN, "-p", prompt, "--output-format=stream-json", "--verbose", "--dangerously-skip-permissions"],
+    stdin: "ignore",
+    stdout: "pipe",
+    stderr: "pipe",
+    cwd,
+    env: { ...process.env }
+  });
+  proc.exited.then((code) => {
+    logger.info("claude", `process exited: ${id}`, { exitCode: code });
+  });
+  const aiProcess = { process: proc, id };
+  processes.set(id, aiProcess);
+  return aiProcess;
+}
+function killAiProcess(id) {
+  const existing = processes.get(id);
+  if (existing) {
+    logger.info("claude", `killing process: ${id}`);
+    try {
+      existing.process.kill();
+    } catch {}
+    processes.delete(id);
+    return true;
+  }
+  return false;
+}
+async function* parseClaudeStream(proc) {
+  const stdout = proc.stdout;
+  if (!stdout || typeof stdout === "number") {
+    throw new Error("Process stdout is not a readable stream");
+  }
+  const reader = stdout.getReader();
+  const decoder = new TextDecoder;
+  let buffer = "";
+  let chunkCount = 0;
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done)
+        break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split(`
+`);
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.trim())
+          continue;
+        let parsed;
+        try {
+          parsed = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (parsed.type === "assistant" && parsed.message) {
+          const message = parsed.message;
+          for (const block of message.content || []) {
+            chunkCount++;
+            if (block.type === "text" && block.text) {
+              yield { type: "text", content: block.text };
+            } else if (block.type === "thinking" && block.thinking) {
+              yield { type: "thinking", content: block.thinking };
+            } else if (block.type === "tool_use") {
+              logger.debug("claude", `tool_use: ${block.name}`);
+              yield { type: "tool_use", content: JSON.stringify({ tool: block.name, input: block.input }) };
+            }
+          }
+        }
+      }
+    }
+  } finally {
+    logger.debug("claude", `stream ended`, { totalChunks: chunkCount });
+    reader.releaseLock();
+  }
+}
+
+// ../core/dist/screenshot.js
+var {spawn: spawn2 } = globalThis.Bun;
+import { join as join4 } from "path";
+import { mkdirSync as mkdirSync3, existsSync as existsSync4 } from "fs";
+var SCREENSHOTS_DIR = ".stashes/screenshots";
+async function captureScreenshot(port, projectPath, stashId) {
+  const screenshotsDir = join4(projectPath, SCREENSHOTS_DIR);
+  if (!existsSync4(screenshotsDir)) {
+    mkdirSync3(screenshotsDir, { recursive: true });
+  }
+  const filename = `${stashId}.png`;
+  const outputPath = join4(screenshotsDir, filename);
+  const playwrightScript = `
+    const { chromium } = require('playwright');
+    (async () => {
+      const browser = await chromium.launch({ headless: true });
+      const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
+      try {
+        await page.goto('http://localhost:${port}', { waitUntil: 'networkidle', timeout: 20000 });
+        await page.waitForTimeout(2000);
+      } catch(e) {
+        await page.goto('http://localhost:${port}', { waitUntil: 'domcontentloaded', timeout: 10000 });
+        await page.waitForTimeout(3000);
+      }
+      await page.screenshot({ path: '${outputPath.replace(/'/g, "\\'")}', type: 'png' });
+      await browser.close();
+    })();
+  `;
+  const proc = spawn2({
+    cmd: ["node", "-e", playwrightScript],
+    stdin: "ignore",
+    stdout: "pipe",
+    stderr: "pipe"
+  });
+  const exitCode = await proc.exited;
+  if (exitCode !== 0) {
+    const stderr = await new Response(proc.stderr).text();
+    throw new Error(`Screenshot failed: ${stderr.substring(0, 200)}`);
+  }
+  return outputPath;
+}
+
+// ../core/dist/prompt.js
+function buildStashPrompt(component, sourceCode, userPrompt, directive) {
+  const parts = [
+    "You are modifying a UI component in an existing project.",
+    "",
+    "## Component",
+    `- Name: ${component.name}`,
+    `- File: ${component.filePath}`,
+    `- DOM: ${component.domSelector}`
+  ];
+  if (sourceCode) {
+    parts.push("", "## Current Source Code", "```", sourceCode, "```");
+  } else {
+    parts.push("", "## HTML Snippet", "```html", component.htmlSnippet || "N/A", "```", "", "Find and modify the component file that renders this section.");
+  }
+  parts.push("", "## User Request", userPrompt, "", "## Creative Direction", directive, "", "## Rules", "- ONLY modify files related to this component and its direct children", "- Keep all existing functionality, routing, state management, and API calls intact", "- Respect the existing design system", "- Ensure the result is production-ready, accessible, and responsive", "- Do not modify test files, configuration files, or unrelated components");
+  return parts.join(`
+`);
+}
+function buildFreeformStashPrompt(userPrompt, directive, filePath, sourceCode) {
+  const parts = [
+    "You are modifying the UI of an existing project."
+  ];
+  if (filePath && sourceCode) {
+    parts.push("", "## Target File", `File: ${filePath}`, "", "## Current Source Code", "```", sourceCode, "```");
+  } else if (filePath) {
+    parts.push("", `## Target File`, `Focus your changes on: ${filePath}`);
+  }
+  parts.push("", "## User Request", userPrompt, "", "## Creative Direction", directive, "", "## Rules", "- Keep all existing functionality, routing, state management, and API calls intact", "- Respect the existing design system", "- Ensure the result is production-ready, accessible, and responsive", "- Do not modify test files, configuration files, or unrelated components");
+  return parts.join(`
+`);
+}
+
+// ../core/dist/generation.js
+function emit(onProgress, event) {
+  if (onProgress)
+    onProgress(event);
+}
+async function 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`);
+}
+async function captureEphemeralScreenshot(worktreePath, projectPath, stashId, port) {
+  const devServer = spawn3({
+    cmd: ["npm", "run", "dev", "--", "--port", String(port)],
+    cwd: worktreePath,
+    stdin: "ignore",
+    stdout: "pipe",
+    stderr: "pipe",
+    env: { ...process.env, PORT: String(port) }
+  });
+  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 {
+      await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(500) });
+    } catch {
+      return port;
+    }
+  }
+  throw new Error("No available ports in range 4010-4030");
+}
+async function generate(opts) {
+  const { projectPath, projectId, prompt, component, count = DEFAULT_STASH_COUNT, directives = DEFAULT_DIRECTIVES, onProgress } = opts;
+  const worktreeManager = new WorktreeManager(projectPath);
+  const persistence = new PersistenceService(projectPath);
+  const selectedDirectives = directives.slice(0, count);
+  let sourceCode = "";
+  if (component?.filePath) {
+    const sourceFile = join5(projectPath, component.filePath);
+    if (existsSync5(sourceFile)) {
+      sourceCode = readFileSync2(sourceFile, "utf-8");
+    }
+  }
+  const completedStashes = [];
+  const stashPromises = selectedDirectives.map(async (directive) => {
+    const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+    const worktree = await worktreeManager.createForGeneration(stashId);
+    const stash = {
+      id: stashId,
+      projectId,
+      prompt,
+      componentPath: component?.filePath,
+      branch: worktree.branch,
+      worktreePath: worktree.path,
+      port: null,
+      screenshotUrl: null,
+      status: "generating",
+      error: null,
+      relatedTo: [],
+      createdAt: new Date().toISOString()
+    };
+    persistence.saveStash(stash);
+    emit(onProgress, { type: "generating", stashId });
+    let stashPrompt;
+    if (component?.filePath) {
+      stashPrompt = buildStashPrompt({ name: component.exportName || component.filePath, filePath: component.filePath, domSelector: "" }, sourceCode, prompt, directive);
+    } else {
+      stashPrompt = buildFreeformStashPrompt(prompt, directive);
+    }
+    const aiProcess = startAiProcess(stashId, stashPrompt, worktree.path);
+    try {
+      for await (const chunk of parseClaudeStream(aiProcess.process)) {
+        emit(onProgress, {
+          type: "ai_stream",
+          stashId,
+          content: chunk.content,
+          streamType: chunk.type
+        });
+      }
+      await aiProcess.process.exited;
+      const wtGit = simpleGit2(worktree.path);
+      try {
+        await wtGit.add("-A");
+        await wtGit.commit(`stashes: stash ${stashId}`);
+      } catch {}
+      await worktreeManager.removeGeneration(stashId);
+      const readyStash = { ...stash, status: "ready" };
+      completedStashes.push(readyStash);
+      persistence.saveStash(readyStash);
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : "Unknown error";
+      persistence.saveStash({ ...stash, status: "error", error: errorMsg });
+      emit(onProgress, { type: "error", stashId, error: errorMsg });
+    } finally {
+      killAiProcess(stashId);
+    }
+  });
+  await Promise.all(stashPromises);
+  for (const stash of completedStashes) {
+    emit(onProgress, { type: "screenshotting", stashId: stash.id });
+    try {
+      const port = await allocatePort();
+      const worktree = await worktreeManager.createForGeneration(`screenshot-${stash.id}`);
+      const screenshotGit = simpleGit2(worktree.path);
+      await screenshotGit.checkout(["-f", stash.branch]);
+      const screenshotPath = await captureEphemeralScreenshot(worktree.path, projectPath, stash.id, port);
+      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)
+      });
+      emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: "" });
+    }
+  }
+  return completedStashes;
+}
+// ../core/dist/vary.js
+var {spawn: spawn4 } = globalThis.Bun;
+import simpleGit3 from "simple-git";
+function emit2(onProgress, event) {
+  if (onProgress)
+    onProgress(event);
+}
+async function waitForPort2(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`);
+}
+async function allocatePort2() {
+  for (let port = 4010;port <= 4030; port++) {
+    try {
+      await fetch(`http://localhost:${port}`, { signal: AbortSignal.timeout(500) });
+    } catch {
+      return port;
+    }
+  }
+  throw new Error("No available ports in range 4010-4030");
+}
+async function vary(opts) {
+  const { projectPath, sourceStashId, prompt, onProgress } = opts;
+  const persistence = new PersistenceService(projectPath);
+  const worktreeManager = new WorktreeManager(projectPath);
+  let sourceStash;
+  let projectId = "";
+  for (const project of persistence.listProjects()) {
+    const stashes = persistence.listStashes(project.id);
+    sourceStash = stashes.find((s) => s.id === sourceStashId);
+    if (sourceStash) {
+      projectId = project.id;
+      break;
+    }
+  }
+  if (!sourceStash)
+    throw new Error(`Source stash ${sourceStashId} not found`);
+  const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+  const worktree = await worktreeManager.createForVary(stashId, sourceStash.branch);
+  const stash = {
+    id: stashId,
+    projectId,
+    prompt,
+    componentPath: sourceStash.componentPath,
+    branch: worktree.branch,
+    worktreePath: worktree.path,
+    port: null,
+    screenshotUrl: null,
+    status: "generating",
+    error: null,
+    relatedTo: [sourceStashId],
+    createdAt: new Date().toISOString()
+  };
+  persistence.saveStash(stash);
+  emit2(onProgress, { type: "generating", stashId });
+  const varyPrompt = `The user wants to vary the current UI. Apply this change: ${prompt}`;
+  const aiProcess = startAiProcess(stashId, varyPrompt, worktree.path);
+  try {
+    for await (const chunk of parseClaudeStream(aiProcess.process)) {
+      emit2(onProgress, {
+        type: "ai_stream",
+        stashId,
+        content: chunk.content,
+        streamType: chunk.type
+      });
+    }
+    await aiProcess.process.exited;
+    const wtGit = simpleGit3(worktree.path);
+    try {
+      await wtGit.add("-A");
+      await wtGit.commit(`stashes: vary ${stashId} from ${sourceStashId}`);
+    } catch {}
+    await worktreeManager.removeGeneration(stashId);
+    emit2(onProgress, { type: "screenshotting", stashId });
+    let screenshotPath = "";
+    try {
+      const port = await allocatePort2();
+      const screenshotWorktree = await worktreeManager.createForGeneration(`screenshot-${stashId}`);
+      const screenshotGit = simpleGit3(screenshotWorktree.path);
+      await screenshotGit.checkout(["-f", stash.branch]);
+      const devServer = spawn4({
+        cmd: ["npm", "run", "dev", "--", "--port", String(port)],
+        cwd: screenshotWorktree.path,
+        stdin: "ignore",
+        stdout: "pipe",
+        stderr: "pipe",
+        env: { ...process.env, PORT: String(port) }
+      });
+      try {
+        await waitForPort2(port, 60000);
+        await new Promise((r) => setTimeout(r, 2000));
+        screenshotPath = await captureScreenshot(port, projectPath, stashId);
+      } finally {
+        devServer.kill();
+      }
+      await worktreeManager.removeGeneration(`screenshot-${stashId}`);
+    } catch (err) {
+      logger.error("vary", `screenshot failed for ${stashId}`, {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+    const readyStash = { ...stash, status: "ready", screenshotUrl: screenshotPath || null };
+    persistence.saveStash(readyStash);
+    emit2(onProgress, { type: "ready", stashId, screenshotPath });
+    return readyStash;
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : "Unknown error";
+    const errorStash = { ...stash, status: "error", error: errorMsg };
+    persistence.saveStash(errorStash);
+    emit2(onProgress, { type: "error", stashId, error: errorMsg });
+    return errorStash;
+  } finally {
+    killAiProcess(stashId);
+  }
+}
+// ../core/dist/apply.js
+async function apply(opts) {
+  const { projectPath, stashId } = opts;
+  logger.info("apply", `applying stash: ${stashId}`);
+  const worktreeManager = new WorktreeManager(projectPath);
+  await worktreeManager.apply(stashId);
+  await worktreeManager.cleanupAll();
+  logger.info("apply", `stash ${stashId} applied and worktrees cleaned up`);
+}
+// ../core/dist/manage.js
+import simpleGit4 from "simple-git";
+async function list(projectPath) {
+  const persistence = new PersistenceService(projectPath);
+  const projects = persistence.listProjects();
+  const allStashes = [];
+  for (const project of projects) {
+    const stashes = persistence.listStashes(project.id);
+    allStashes.push(...stashes);
+  }
+  return allStashes;
+}
+async function remove(projectPath, stashId) {
+  const persistence = new PersistenceService(projectPath);
+  for (const project of persistence.listProjects()) {
+    const stashes = persistence.listStashes(project.id);
+    if (stashes.some((s) => s.id === stashId)) {
+      persistence.deleteStash(project.id, stashId);
+      break;
+    }
+  }
+  try {
+    const git = simpleGit4(projectPath);
+    await git.raw(["branch", "-D", `stashes/${stashId}`]);
+  } catch {}
+  logger.info("manage", `removed stash: ${stashId}`);
+}
+// ../mcp/src/tools/generate.ts
+var generateParams = {
+  prompt: z.string().describe('What UI changes to generate (e.g. "make the hero section bolder")'),
+  count: z.number().min(1).max(5).optional().describe("Number of stashes to generate (1-5, default 3)"),
+  filePath: z.string().optional().describe('Optional: scope changes to a specific file (e.g. "src/components/Hero.tsx")'),
+  exportName: z.string().optional().describe("Optional: specific component export name within the file")
+};
+async function handleGenerate(args, projectPath) {
+  const { prompt, filePath, exportName } = args;
+  const count = args.count ?? 3;
+  initLogFile(projectPath);
+  const persistence = new PersistenceService(projectPath);
+  let projects = persistence.listProjects();
+  let project;
+  if (projects.length > 0) {
+    project = projects[0];
+  } else {
+    project = {
+      id: `proj_${crypto.randomUUID().substring(0, 8)}`,
+      name: "Default",
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString()
+    };
+    persistence.saveProject(project);
+  }
+  const stashes = await generate({
+    projectPath,
+    projectId: project.id,
+    prompt,
+    count,
+    component: filePath ? { filePath, exportName } : undefined,
+    onProgress: () => {}
+  });
+  return {
+    content: [{
+      type: "text",
+      text: JSON.stringify({
+        message: `Generated ${stashes.length} stashes`,
+        stashes: stashes.map((s) => ({
+          id: s.id,
+          status: s.status,
+          branch: s.branch,
+          screenshotPath: s.screenshotUrl
+        })),
+        hint: "Use stashes_list to see all stashes, stashes_browse to interact live, or stashes_apply to merge one."
+      }, null, 2)
+    }]
+  };
+}
+
+// ../mcp/src/tools/list.ts
+var listParams = {};
+async function handleList(args, projectPath) {
+  initLogFile(projectPath);
+  const stashes = await list(projectPath);
+  if (stashes.length === 0) {
+    return {
+      content: [{ type: "text", text: "No stashes found. Use stashes_generate to create some." }]
+    };
+  }
+  return {
+    content: [{
+      type: "text",
+      text: JSON.stringify({
+        stashes: stashes.map((s) => ({
+          id: s.id,
+          prompt: s.prompt,
+          status: s.status,
+          branch: s.branch,
+          screenshotPath: s.screenshotUrl,
+          createdAt: s.createdAt
+        }))
+      }, null, 2)
+    }]
+  };
+}
+
+// ../mcp/src/tools/apply.ts
+import { z as z2 } from "zod";
+var applyParams = {
+  stashId: z2.string().describe('The stash ID to apply (e.g. "stash_a1b2c3d4")')
+};
+async function handleApply(args, projectPath) {
+  const { stashId } = args;
+  initLogFile(projectPath);
+  await apply({ projectPath, stashId });
+  return {
+    content: [{
+      type: "text",
+      text: `Stash ${stashId} merged into current branch. All worktrees cleaned up.`
+    }]
+  };
+}
+
+// ../mcp/src/tools/vary.ts
+import { z as z3 } from "zod";
+var varyParams = {
+  stashId: z3.string().describe("The source stash ID to vary from"),
+  prompt: z3.string().describe("What changes to apply on top of the source stash")
+};
+async function handleVary(args, projectPath) {
+  const { stashId, prompt } = args;
+  initLogFile(projectPath);
+  const stash = await vary({
+    projectPath,
+    sourceStashId: stashId,
+    prompt
+  });
+  return {
+    content: [{
+      type: "text",
+      text: JSON.stringify({
+        message: `Created variation ${stash.id} from ${stashId}`,
+        stash: {
+          id: stash.id,
+          status: stash.status,
+          branch: stash.branch,
+          screenshotPath: stash.screenshotUrl
+        }
+      }, null, 2)
+    }]
+  };
+}
+
+// ../mcp/src/tools/remove.ts
+import { z as z4 } from "zod";
+var removeParams = {
+  stashId: z4.string().describe("The stash ID to remove")
+};
+async function handleRemove(args, projectPath) {
+  const { stashId } = args;
+  initLogFile(projectPath);
+  await remove(projectPath, stashId);
+  return {
+    content: [{ type: "text", text: `Stash ${stashId} removed.` }]
+  };
+}
+
+// ../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 { fileURLToPath } from "url";
+import { existsSync as existsSync8, readFileSync as readFileSync5 } from "fs";
+
+// ../server/dist/routes/api.js
+import { Hono } from "hono";
+import { join as join6 } from "path";
+import { existsSync as existsSync6, readFileSync as readFileSync3 } from "fs";
+var app = new Hono;
+app.get("/health", (c) => c.json({ status: "ok", service: "stashes" }));
+app.get("/projects", (c) => {
+  const persistence = getPersistence();
+  const projects = persistence.listProjects();
+  const projectsWithCounts = projects.map((p) => ({
+    ...p,
+    stashCount: persistence.listStashes(p.id).length,
+    recentScreenshots: persistence.listStashes(p.id).filter((s) => s.screenshotUrl).slice(-4).map((s) => s.screenshotUrl)
+  }));
+  return c.json({ data: projectsWithCounts });
+});
+app.post("/projects", async (c) => {
+  const { name, description } = await c.req.json();
+  const project = {
+    id: `proj_${crypto.randomUUID().substring(0, 8)}`,
+    name,
+    description,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  };
+  getPersistence().saveProject(project);
+  return c.json({ data: project }, 201);
+});
+app.get("/projects/:id", (c) => {
+  const persistence = getPersistence();
+  const project = persistence.getProject(c.req.param("id"));
+  if (!project)
+    return c.json({ error: "Project not found" }, 404);
+  const stashes = persistence.listStashes(project.id);
+  const chat = persistence.getChatHistory(project.id);
+  return c.json({ data: { ...project, stashes, chat } });
+});
+app.delete("/projects/:id", (c) => {
+  const id = c.req.param("id");
+  getPersistence().deleteProject(id);
+  return c.json({ data: { deleted: id } });
+});
+app.get("/screenshots/:filename", (c) => {
+  const filename = c.req.param("filename");
+  const filePath = join6(serverState.projectPath, ".stashes", "screenshots", filename);
+  if (!existsSync6(filePath))
+    return c.json({ error: "Not found" }, 404);
+  const content = readFileSync3(filePath);
+  return new Response(content, {
+    headers: { "content-type": "image/png", "cache-control": "no-cache" }
+  });
+});
+var apiRoutes = app;
+
+// ../server/dist/services/stash-service.js
+import { readFileSync as readFileSync4, existsSync as existsSync7 } from "fs";
+import { join as join7 } from "path";
+class StashService {
+  projectPath;
+  worktreeManager;
+  persistence;
+  broadcast;
+  selectedComponent = null;
+  previewServer = null;
+  activePreviewStashId = null;
+  constructor(projectPath, worktreeManager, persistence, broadcast) {
+    this.projectPath = projectPath;
+    this.worktreeManager = worktreeManager;
+    this.persistence = persistence;
+    this.broadcast = broadcast;
+  }
+  setSelectedComponent(component) {
+    this.selectedComponent = component;
+    if (component.filePath === "auto-detect") {
+      this.resolveComponentFile(component);
+    }
+  }
+  async resolveComponentFile(component) {
+    const prompt = [
+      "I need you to identify which source file renders a specific UI section.",
+      "Look at this HTML snippet from the running app:",
+      "",
+      "```html",
+      component.htmlSnippet || component.domSelector,
+      "```",
+      "",
+      `The element is a <${component.tag || "div"}> with description: ${component.name}`,
+      `DOM selector: ${component.domSelector}`,
+      "",
+      "Search the src/ directory and find the component file that renders this section.",
+      "Reply with ONLY the file path relative to the project root."
+    ].join(`
+`);
+    const aiProcess = startAiProcess("resolve-component", prompt, this.projectPath);
+    let resolvedPath = "";
+    try {
+      for await (const chunk of parseClaudeStream(aiProcess.process)) {
+        if (chunk.type === "text")
+          resolvedPath += chunk.content;
+      }
+      await aiProcess.process.exited;
+    } finally {
+      killAiProcess("resolve-component");
+    }
+    const match = resolvedPath.match(/(?:src\/[^\s\n"`']+\.(?:tsx|ts|jsx|js))/);
+    if (match) {
+      this.selectedComponent = { ...component, filePath: match[0] };
+      this.broadcast({
+        type: "ai_stream",
+        content: `Identified component: ${match[0]}`,
+        streamType: "text",
+        source: "system"
+      });
+    }
+  }
+  async chat(projectId, message) {
+    const component = this.selectedComponent;
+    let sourceCode = "";
+    const filePath = component?.filePath || "";
+    if (filePath && filePath !== "auto-detect") {
+      const sourceFile = join7(this.projectPath, filePath);
+      if (existsSync7(sourceFile)) {
+        sourceCode = readFileSync4(sourceFile, "utf-8");
+      }
+    }
+    const chatPrompt = [
+      "The user is asking about a UI component in their project. Answer concisely.",
+      "Do NOT modify any files.",
+      "",
+      component ? `Component: ${component.name}` : "",
+      filePath !== "auto-detect" ? `File: ${filePath}` : "",
+      sourceCode ? `
+Source:
+\`\`\`
+${sourceCode.substring(0, 3000)}
+\`\`\`` : "",
+      "",
+      `User question: ${message}`
+    ].filter(Boolean).join(`
+`);
+    const aiProcess = startAiProcess("chat", chatPrompt, this.projectPath);
+    let fullResponse = "";
+    try {
+      for await (const chunk of parseClaudeStream(aiProcess.process)) {
+        if (chunk.type === "text") {
+          fullResponse += chunk.content;
+          this.broadcast({ type: "ai_stream", content: chunk.content, streamType: "text", source: "chat" });
+        }
+      }
+      await aiProcess.process.exited;
+      if (fullResponse) {
+        this.persistence.saveChatMessage(projectId, {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: fullResponse,
+          type: "text",
+          createdAt: new Date().toISOString()
+        });
+      }
+    } catch (err) {
+      this.broadcast({
+        type: "ai_stream",
+        content: `Chat error: ${err instanceof Error ? err.message : String(err)}`,
+        streamType: "text",
+        source: "chat"
+      });
+    } finally {
+      killAiProcess("chat");
+    }
+  }
+  progressToBroadcast(event) {
+    switch (event.type) {
+      case "generating":
+      case "screenshotting":
+      case "ready":
+        this.broadcast({ type: "stash:status", stashId: event.stashId, status: event.type === "ready" ? "ready" : event.type });
+        if (event.type === "ready" && "screenshotPath" in event && event.screenshotPath) {
+          this.broadcast({ type: "stash:screenshot", stashId: event.stashId, url: `/api/screenshots/${event.stashId}.png` });
+        }
+        break;
+      case "error":
+        this.broadcast({ type: "stash:error", stashId: event.stashId, error: event.error });
+        break;
+      case "ai_stream":
+        this.broadcast({ type: "ai_stream", content: event.content, streamType: event.streamType });
+        break;
+    }
+  }
+  async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT) {
+    if (!this.selectedComponent) {
+      throw new Error("No component selected");
+    }
+    await generate({
+      projectPath: this.projectPath,
+      projectId,
+      prompt,
+      component: {
+        filePath: this.selectedComponent.filePath,
+        exportName: this.selectedComponent.name
+      },
+      count: stashCount,
+      onProgress: (event) => this.progressToBroadcast(event)
+    });
+  }
+  async vary(sourceStashId, prompt) {
+    await vary({
+      projectPath: this.projectPath,
+      sourceStashId,
+      prompt,
+      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;
+    }
+    await this.worktreeManager.switchPreviewTo(stashId);
+    this.activePreviewStashId = stashId;
+    await this.waitForRecompile(previewPort, 15000);
+    this.broadcast({ type: "stash:port", stashId, port: previewPort });
+  }
+  async applyStash(stashId) {
+    this.stopPreviewServer();
+    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 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", "--", "--port", String(port)],
+      cwd: previewPath,
+      stdin: "ignore",
+      stdout: "pipe",
+      stderr: "pipe",
+      env: { ...process.env, PORT: String(port) }
+    });
+    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
+var worktreeManager;
+var stashService;
+var persistence;
+var clients = new Set;
+function broadcast(event) {
+  const data = JSON.stringify(event);
+  for (const client of clients) {
+    client.send(data);
+  }
+}
+function getPersistenceFromWs() {
+  return persistence;
+}
+function createWebSocketHandler(projectPath, userDevPort) {
+  worktreeManager = new WorktreeManager(projectPath);
+  persistence = new PersistenceService(projectPath);
+  stashService = new StashService(projectPath, worktreeManager, persistence, broadcast);
+  return {
+    open(ws) {
+      clients.add(ws);
+      logger.info("ws", "client connected", { total: clients.size });
+      ws.send(JSON.stringify({ type: "server_ready", port: userDevPort }));
+    },
+    async message(ws, message) {
+      const raw = typeof message === "string" ? message : new TextDecoder().decode(message);
+      let event;
+      try {
+        const parsed = JSON.parse(raw);
+        if (!parsed.type)
+          return;
+        event = parsed;
+      } catch {
+        return;
+      }
+      logger.info("ws", `received: ${event.type}`);
+      try {
+        switch (event.type) {
+          case "select_component":
+            stashService.setSelectedComponent(event.component);
+            break;
+          case "chat":
+            persistence.saveChatMessage(event.projectId, {
+              id: crypto.randomUUID(),
+              role: "user",
+              content: event.message,
+              type: "text",
+              createdAt: new Date().toISOString()
+            });
+            await stashService.chat(event.projectId, event.message);
+            break;
+          case "generate":
+            persistence.saveChatMessage(event.projectId, {
+              id: crypto.randomUUID(),
+              role: "user",
+              content: event.prompt,
+              type: "text",
+              createdAt: new Date().toISOString()
+            });
+            await stashService.generate(event.projectId, event.prompt, event.stashCount);
+            break;
+          case "vary":
+            await stashService.vary(event.sourceStashId, event.prompt);
+            break;
+          case "interact":
+            await stashService.switchPreview(event.stashId);
+            break;
+          case "apply_stash":
+            await stashService.applyStash(event.stashId);
+            break;
+          case "delete_stash":
+            await stashService.deleteStash(event.stashId);
+            break;
+        }
+      } catch (err) {
+        logger.error("ws", `handler failed for ${event.type}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    },
+    close(ws) {
+      clients.delete(ws);
+      logger.info("ws", "client disconnected", { remaining: clients.size });
+    }
+  };
+}
+
+// ../server/dist/index.js
+var serverState = {
+  projectPath: "",
+  userDevPort: 3000
+};
+function getPersistence() {
+  return getPersistenceFromWs();
+}
+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));
+  const bundledWebDir = join8(selfDir, "web");
+  const monorepoWebDir = join8(selfDir, "../../web/dist");
+  const webDistDir = existsSync8(join8(bundledWebDir, "index.html")) ? bundledWebDir : monorepoWebDir;
+  const requestPath = path === "/" ? "/index.html" : path;
+  const filePath = join8(webDistDir, requestPath);
+  if (existsSync8(filePath) && !filePath.includes("..")) {
+    const content = readFileSync5(filePath);
+    const ext = filePath.split(".").pop() || "";
+    const contentTypes = {
+      html: "text/html; charset=utf-8",
+      js: "application/javascript",
+      css: "text/css",
+      json: "application/json",
+      png: "image/png",
+      jpg: "image/jpeg",
+      svg: "image/svg+xml",
+      ico: "image/x-icon",
+      woff: "font/woff",
+      woff2: "font/woff2"
+    };
+    return new Response(content, {
+      headers: { "content-type": contentTypes[ext] || "application/octet-stream" }
+    });
+  }
+  const indexPath = join8(webDistDir, "index.html");
+  if (existsSync8(indexPath)) {
+    const html = readFileSync5(indexPath, "utf-8");
+    return new Response(html, {
+      headers: { "content-type": "text/html; charset=utf-8" }
+    });
+  }
+  return new Response(JSON.stringify({ error: "Web UI not built. Run: bun run build" }), {
+    status: 404,
+    headers: { "content-type": "application/json" }
+  });
+});
+function startServer(projectPath, userDevPort, port = STASHES_PORT) {
+  serverState = { projectPath, userDevPort };
+  initLogFile(projectPath);
+  const wsHandler = createWebSocketHandler(projectPath, userDevPort);
+  const server = Bun.serve({
+    port,
+    fetch(req, server2) {
+      if (req.headers.get("upgrade") === "websocket") {
+        const success = server2.upgrade(req, {
+          data: { projectPath, userDevPort }
+        });
+        if (success)
+          return;
+      }
+      return app2.fetch(req);
+    },
+    websocket: wsHandler
+  });
+  logger.info("server", `Stashes running at http://localhost:${port}`);
+  logger.info("server", `Proxying user app from http://localhost:${userDevPort}`);
+  logger.info("server", `Project: ${projectPath}`);
+  return server;
+}
+function injectOverlayScript(html) {
+  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'];
+
+  function findTarget(el, precise) {
+    if (precise) return el;
+    var current = el;
+    var best = el;
+    while (current && current !== document.body) {
+      var tag = current.tagName.toLowerCase();
+      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;
+      }
+      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';
+      }
+    }
+  });
+
+  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);
+
+  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;
+}
+
+// ../mcp/src/tools/browse.ts
+import open from "open";
+
+// ../server/dist/services/detector.js
+import { existsSync as existsSync9, readFileSync as readFileSync6 } from "fs";
+import { join as join9 } from "path";
+function detectFramework(projectPath) {
+  const packageJsonPath = join9(projectPath, "package.json");
+  if (!existsSync9(packageJsonPath)) {
+    return {
+      framework: "unknown",
+      devCommand: "npm run dev",
+      devPort: 3000,
+      configFile: null
+    };
+  }
+  const packageJson = JSON.parse(readFileSync6(packageJsonPath, "utf-8"));
+  const deps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  if (deps["next"]) {
+    return {
+      framework: "nextjs",
+      devCommand: getDevCommand(packageJson, "next dev"),
+      devPort: 3000,
+      configFile: findConfig(projectPath, ["next.config.ts", "next.config.mjs", "next.config.js"])
+    };
+  }
+  if (deps["@remix-run/react"]) {
+    return {
+      framework: "remix",
+      devCommand: getDevCommand(packageJson, "remix dev"),
+      devPort: 3000,
+      configFile: findConfig(projectPath, ["remix.config.ts", "remix.config.js"])
+    };
+  }
+  if (deps["vite"] && deps["react"]) {
+    return {
+      framework: "vite-react",
+      devCommand: getDevCommand(packageJson, "vite"),
+      devPort: 5173,
+      configFile: findConfig(projectPath, ["vite.config.ts", "vite.config.js"])
+    };
+  }
+  if (deps["react-scripts"]) {
+    return {
+      framework: "cra",
+      devCommand: getDevCommand(packageJson, "react-scripts start"),
+      devPort: 3000,
+      configFile: null
+    };
+  }
+  return {
+    framework: "unknown",
+    devCommand: getDevCommand(packageJson, "npm run dev"),
+    devPort: 3000,
+    configFile: null
+  };
+}
+function getDevCommand(packageJson, fallback) {
+  const scripts = packageJson.scripts;
+  if (scripts?.dev)
+    return "bun run dev";
+  if (scripts?.start)
+    return "bun run start";
+  return fallback;
+}
+function findConfig(projectPath, candidates) {
+  for (const candidate of candidates) {
+    if (existsSync9(join9(projectPath, candidate))) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+// ../mcp/src/tools/browse.ts
+var browseParams = {};
+async function handleBrowse(args, projectPath) {
+  const detected = detectFramework(projectPath);
+  const port = STASHES_PORT;
+  startServer(projectPath, detected.devPort, port);
+  await open(`http://localhost:${port}`);
+  return {
+    content: [{
+      type: "text",
+      text: `Stashes server started at http://localhost:${port}. Opened in browser.`
+    }]
+  };
+}
+
+// ../mcp/src/index.ts
+var projectPath = process.cwd();
+var server = new McpServer({
+  name: "stashes",
+  version: "0.1.0"
+});
+server.tool("stashes_generate", "Generate multiple AI-powered UI design explorations (stashes) for a given prompt. Each stash applies a different creative direction.", generateParams, async (args) => handleGenerate(args, projectPath));
+server.tool("stashes_list", "List all existing stashes in the current project. Shows ID, prompt, status, branch, and screenshot path.", listParams, async (args) => handleList(args, projectPath));
+server.tool("stashes_apply", "Merge a stash branch into the current git branch. Applies the AI-generated UI changes and cleans up all worktrees.", applyParams, async (args) => handleApply(args, projectPath));
+server.tool("stashes_vary", "Create a variation of an existing stash by applying additional changes on top of it.", varyParams, async (args) => handleVary(args, projectPath));
+server.tool("stashes_remove", "Delete a stash \u2014 removes its persistence entry and git branch.", removeParams, async (args) => handleRemove(args, projectPath));
+server.tool("stashes_browse", "Start the Stashes web server and open the browser for interactive browsing of generated stashes.", browseParams, async (args) => handleBrowse(args, projectPath));
+var transport = new StdioServerTransport;
+await server.connect(transport);