stashes 0.1.56 → 0.1.58

package/dist/mcp.js

@@ -26,8 +26,8 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { z } from "zod";
 
 // ../core/dist/generation.js
-import { readFileSync as readFileSync2, existsSync as existsSync7 } from "fs";
-import { join as join7 } from "path";
+import { readFileSync as readFileSync2, existsSync as existsSync6 } from "fs";
+import { join as join6 } from "path";
 var {spawn: spawn3 } = globalThis.Bun;
 import simpleGit3 from "simple-git";
 // ../shared/dist/constants/index.js
@@ -529,65 +529,19 @@ class PersistenceService {
 
 // ../core/dist/ai-process.js
 var {spawn } = globalThis.Bun;
-import { writeFileSync as writeFileSync2, existsSync as existsSync4, mkdirSync as mkdirSync3 } from "fs";
-import { join as join4 } from "path";
-import { tmpdir } from "os";
 var CLAUDE_BIN = "/opt/homebrew/bin/claude";
-function getPlaywrightMcpConfigPath() {
-  const configDir = join4(tmpdir(), "stashes-mcp");
-  const configPath = join4(configDir, "playwright.json");
-  if (!existsSync4(configPath)) {
-    mkdirSync3(configDir, { recursive: true });
-    writeFileSync2(configPath, JSON.stringify({
-      mcpServers: {
-        playwright: { command: "npx", args: ["@playwright/mcp@latest"] }
-      }
-    }), "utf-8");
-  }
-  return configPath;
-}
-var OVERHEAD_TOOLS = [
-  "Agent",
-  "TodoWrite",
-  "TaskCreate",
-  "TaskUpdate",
-  "TaskList",
-  "TaskGet",
-  "Skill",
-  "ToolSearch",
-  "EnterPlanMode",
-  "ExitPlanMode",
-  "WebSearch",
-  "WebFetch",
-  "NotebookEdit",
-  "mcp__UseAI__*",
-  "mcp__stashes__*",
-  "mcp__plugin_drills*",
-  "mcp__plugin_coverit*"
-];
 var processes = new Map;
 function startAiProcess(idOrOpts, prompt, cwd, resumeSessionId, model) {
   const opts = typeof idOrOpts === "string" ? { id: idOrOpts, prompt, cwd, resumeSessionId, model } : idOrOpts;
-  const restricted = opts.tools !== undefined;
   killAiProcess(opts.id);
   logger.info("claude", `spawning process: ${opts.id}`, {
     cwd: opts.cwd,
     promptLength: opts.prompt.length,
     promptPreview: opts.prompt.substring(0, 100),
     resumeSessionId: opts.resumeSessionId,
-    model: opts.model,
-    restricted,
-    tools: restricted ? opts.tools.join(",") || "none" : "all"
+    model: opts.model
   });
   const cmd = [CLAUDE_BIN, "-p", opts.prompt, "--output-format=stream-json", "--verbose", "--dangerously-skip-permissions"];
-  if (restricted) {
-    cmd.push("--tools", opts.tools.length > 0 ? opts.tools.join(",") : "");
-    cmd.push("--disallowedTools", OVERHEAD_TOOLS.join(","));
-    cmd.push("--strict-mcp-config");
-    if (opts.mcpConfigPath) {
-      cmd.push("--mcp-config", opts.mcpConfigPath);
-    }
-  }
   if (opts.resumeSessionId) {
     cmd.push("--resume", opts.resumeSessionId);
   }
@@ -718,35 +672,47 @@ async function* parseClaudeStream(proc) {
 }
 
 // ../core/dist/smart-screenshot.js
-import { join as join6 } from "path";
-import { mkdirSync as mkdirSync5, existsSync as existsSync6 } from "fs";
+import { join as join5 } from "path";
+import { mkdirSync as mkdirSync4, existsSync as existsSync5 } from "fs";
 import simpleGit2 from "simple-git";
 
 // ../core/dist/screenshot.js
 var {spawn: spawn2 } = globalThis.Bun;
-import { join as join5 } from "path";
-import { mkdirSync as mkdirSync4, existsSync as existsSync5 } from "fs";
+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 = join5(projectPath, SCREENSHOTS_DIR);
-  if (!existsSync5(screenshotsDir)) {
-    mkdirSync4(screenshotsDir, { recursive: true });
-  }
-  const filename = `${stashId}.png`;
-  const outputPath = join5(screenshotsDir, filename);
+async function captureScreenshot(portOrOpts, projectPath, stashId) {
+  const opts = typeof portOrOpts === "number" ? { port: portOrOpts, projectPath, stashId } : portOrOpts;
+  const screenshotsDir = join4(opts.projectPath, SCREENSHOTS_DIR);
+  if (!existsSync4(screenshotsDir)) {
+    mkdirSync3(screenshotsDir, { recursive: true });
+  }
+  const filename = `${opts.stashId}.png`;
+  const outputPath = join4(screenshotsDir, filename);
+  const url = `http://localhost:${opts.port}${opts.route || "/"}`;
+  const scrollCode = opts.scrollToSelector ? `
+      try {
+        const el = await page.waitForSelector('${opts.scrollToSelector.replace(/'/g, "\\'")}', { timeout: 5000 });
+        if (el) {
+          await el.scrollIntoViewIfNeeded();
+          await page.waitForTimeout(500);
+        }
+      } catch(e) { /* selector not found, capture viewport */ }
+    ` : "";
   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.goto('${url}', { waitUntil: 'networkidle', timeout: 20000 });
         await page.waitForTimeout(2000);
       } catch(e) {
-        await page.goto('http://localhost:${port}', { waitUntil: 'domcontentloaded', timeout: 10000 });
+        await page.goto('${url}', { waitUntil: 'domcontentloaded', timeout: 10000 });
         await page.waitForTimeout(3000);
       }
-      await page.screenshot({ path: '${outputPath.replace(/'/g, "\\'")}', type: 'png' });
+      ${scrollCode}
+      await page.screenshot({ path: '${outputPath.replace(/'/g, "\\'")}', type: 'png'${opts.fullPage ? ", fullPage: true" : ""} });
       await browser.close();
     })();
   `;
@@ -782,62 +748,67 @@ ${diffStat}
 ## Partial diff (truncated):
 ${truncatedDiff}`;
   } catch (err) {
-    logger.warn("smart-screenshot", `git diff failed, falling back`, {
+    logger.warn("smart-screenshot", `git diff failed`, {
       error: err instanceof Error ? err.message : String(err)
     });
     return "";
   }
 }
-function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
-  const outputPath = join6(screenshotDir, `${stashId}.png`);
+function buildScreenshotPrompt(port, diff, screenshotDir, stashId, componentPath) {
+  const outputPath = join5(screenshotDir, `${stashId}.png`);
   return [
-    "You are a screenshot assistant. Take a screenshot of a running web app.",
-    "Be fast \u2014 you have a strict time limit.",
+    "## You are a screenshot agent. Your goal: capture a screenshot showing the UI changes described in the diff below.",
     "",
-    `The app is running at: http://localhost:${port}`,
+    "## RULES",
+    "- ONLY use Playwright MCP tools (prefixed with mcp__plugin_playwright_playwright__)",
+    "- Do NOT call: ToolSearch, Skill, Agent, TodoWrite, TaskCreate, TaskUpdate,",
+    "  mcp__UseAI__*, mcp__stashes__*, mcp__plugin_drills__*, mcp__plugin_coverit__*,",
+    "  EnterPlanMode, ExitPlanMode, WebSearch, WebFetch, LSP, Read, Write, Edit, Glob, Grep",
+    "- You have a strict time budget. Be fast and decisive.",
     "",
-    "## Git diff of changes (tells you what was modified):",
+    `## App: http://localhost:${port}`,
+    componentPath ? `## Target component file: ${componentPath}` : "",
+    "",
+    "## Git diff of changes:",
     "```",
     diff,
     "```",
     "",
-    "## Instructions",
-    "Use mcp__playwright__browser_run_code to navigate AND screenshot in a single call.",
-    "From the diff, determine the route/section that shows the changes.",
+    "## Your task",
+    "Study the diff above to understand:",
+    "1. WHAT changed (component, styles, layout, content)",
+    "2. WHERE it lives in the app (which route? which section of the page? is it behind a tab/modal/click?)",
+    "3. WHAT STATE is needed to see it (does a button need to be clicked? a tab selected? a form filled?)",
     "",
-    "**Call this tool:**",
-    "```",
-    "mcp__playwright__browser_run_code",
-    "```",
+    "Then use Playwright tools to navigate there and capture it:",
     "",
-    "**With this code parameter** (adjust the URL path and scroll if needed):",
-    "```javascript",
-    `async (page) => {`,
-    `  await page.setViewportSize({ width: 1280, height: 720 });`,
-    `  await page.goto('http://localhost:${port}', { waitUntil: 'networkidle', timeout: 15000 });`,
-    `  // If the changed component is further down, scroll to it:`,
-    `  // await page.evaluate(() => window.scrollTo(0, 500));`,
-    `  // await page.waitForTimeout(500);`,
-    `  await page.waitForTimeout(2000);`,
-    `  await page.screenshot({ path: '${outputPath.replace(/'/g, "\\'")}', type: 'png' });`,
-    `  return 'saved';`,
-    `}`,
-    "```",
+    "**Available Playwright tools:**",
+    "- `mcp__plugin_playwright_playwright__browser_navigate` \u2014 go to a URL",
+    "- `mcp__plugin_playwright_playwright__browser_snapshot` \u2014 get the page accessibility tree (use this to find elements)",
+    "- `mcp__plugin_playwright_playwright__browser_click` \u2014 click an element (use ref from snapshot)",
+    "- `mcp__plugin_playwright_playwright__browser_hover` \u2014 hover over an element",
+    "- `mcp__plugin_playwright_playwright__browser_evaluate` \u2014 run JS on the page (e.g. scroll, trigger state)",
+    "- `mcp__plugin_playwright_playwright__browser_take_screenshot` \u2014 capture the screenshot",
     "",
-    "If the diff shows changes to a component that requires scrolling or navigation,",
-    "adjust the code: change the URL path, add scrollTo, or click a tab first.",
+    "**Typical flow:**",
+    `1. Navigate to http://localhost:${port} (or a sub-route if the diff indicates one)`,
+    "2. Take a snapshot to understand the page layout",
+    "3. If the changed component is not visible: scroll to it, click a tab, open a modal \u2014 whatever is needed",
+    "4. Take the screenshot once the changed component is visible",
     "",
-    `After the tool call succeeds, respond with ONLY this JSON:`,
+    `## Output \u2014 after taking the screenshot, respond with ONLY this JSON:`,
+    "```json",
     "{",
     '  "screenshots": [',
     "    {",
     `      "path": "${outputPath}",`,
-    '      "label": "Short description of what is shown",',
-    '      "route": "/the-url-path",',
+    '      "label": "Brief description of what the screenshot shows",',
+    '      "route": "/the-route-you-navigated-to",',
     '      "isPrimary": true',
     "    }",
     "  ]",
-    "}"
+    "}",
+    "```"
   ].join(`
 `);
 }
@@ -871,10 +842,10 @@ async function fallbackScreenshot(port, projectPath, stashId) {
   }
 }
 async function captureSmartScreenshots(opts) {
-  const { projectPath, stashId, stashBranch, parentBranch, worktreePath, port, model = "sonnet", timeout = DEFAULT_TIMEOUT } = opts;
-  const screenshotDir = join6(projectPath, SCREENSHOTS_DIR2);
-  if (!existsSync6(screenshotDir)) {
-    mkdirSync5(screenshotDir, { recursive: true });
+  const { projectPath, stashId, stashBranch, parentBranch, worktreePath, port, model = "sonnet", timeout = DEFAULT_TIMEOUT, componentPath } = opts;
+  const screenshotDir = join5(projectPath, SCREENSHOTS_DIR2);
+  if (!existsSync5(screenshotDir)) {
+    mkdirSync4(screenshotDir, { recursive: true });
   }
   const diff = await getStashDiff(worktreePath, parentBranch);
   if (!diff) {
@@ -882,15 +853,13 @@ async function captureSmartScreenshots(opts) {
     return fallbackScreenshot(port, projectPath, stashId);
   }
   const processId = `screenshot-ai-${stashId}`;
-  const prompt = buildScreenshotPrompt(port, diff, screenshotDir, stashId);
+  const prompt = buildScreenshotPrompt(port, diff, screenshotDir, stashId, componentPath);
   const modelFlag = model === "sonnet" ? "sonnet" : "haiku";
   const aiProcess = startAiProcess({
     id: processId,
     prompt,
     cwd: worktreePath,
-    model: modelFlag,
-    tools: [],
-    mcpConfigPath: getPlaywrightMcpConfigPath()
+    model: modelFlag
   });
   let textOutput = "";
   let timedOut = false;
@@ -916,9 +885,9 @@ async function captureSmartScreenshots(opts) {
   }
   const result = parseAiResult(textOutput);
   if (!result || !result.screenshots || result.screenshots.length === 0) {
-    const expectedPath = join6(screenshotDir, `${stashId}.png`);
-    if (existsSync6(expectedPath)) {
-      logger.info("smart-screenshot", `AI saved screenshot for ${stashId} via browser_run_code (no JSON response)`);
+    const expectedPath = join5(screenshotDir, `${stashId}.png`);
+    if (existsSync5(expectedPath)) {
+      logger.info("smart-screenshot", `AI saved screenshot for ${stashId} (no JSON response, but file exists)`);
       const url = `/api/screenshots/${stashId}.png`;
       return {
         primary: url,
@@ -932,18 +901,12 @@ async function captureSmartScreenshots(opts) {
   let primaryUrl = "";
   for (const shot of result.screenshots) {
     const filename = shot.path.split("/").pop() || "";
-    if (!existsSync6(shot.path)) {
+    if (!existsSync5(shot.path)) {
       logger.warn("smart-screenshot", `Screenshot file not found: ${shot.path}`);
       continue;
     }
     const url = `/api/screenshots/${filename}`;
-    const screenshot = {
-      url,
-      label: shot.label,
-      route: shot.route,
-      isPrimary: shot.isPrimary
-    };
-    screenshots.push(screenshot);
+    screenshots.push({ url, label: shot.label, route: shot.route, isPrimary: shot.isPrimary });
     if (shot.isPrimary)
       primaryUrl = url;
   }
@@ -1026,8 +989,8 @@ async function generate(opts) {
   const selectedDirectives = directives.slice(0, count);
   let sourceCode = "";
   if (component?.filePath) {
-    const sourceFile = join7(projectPath, component.filePath);
-    if (existsSync7(sourceFile)) {
+    const sourceFile = join6(projectPath, component.filePath);
+    if (existsSync6(sourceFile)) {
       sourceCode = readFileSync2(sourceFile, "utf-8");
     }
   }
@@ -1162,7 +1125,8 @@ async function generate(opts) {
             worktreePath: screenshotWorktree.path,
             port,
             model: opts.screenshotModel,
-            timeout: opts.screenshotTimeout
+            timeout: opts.screenshotTimeout,
+            componentPath: stash.componentPath ?? undefined
           });
           const readyStash = { ...generatedStash, status: "ready", screenshotUrl: primary, screenshots };
           completedStashes.push(readyStash);
@@ -1328,7 +1292,8 @@ async function vary(opts) {
           worktreePath: screenshotWorktree.path,
           port,
           model: opts.screenshotModel,
-          timeout: opts.screenshotTimeout
+          timeout: opts.screenshotTimeout,
+          componentPath: stash.componentPath ?? undefined
         });
         screenshotPath = result.primary;
         screenshots = [...result.screenshots];
@@ -1626,18 +1591,18 @@ async function handleRemove(args, projectPath) {
 // ../server/dist/index.js
 import { Hono as Hono2 } from "hono";
 import { cors } from "hono/cors";
-import { join as join11, dirname as dirname3 } from "path";
+import { join as join10, dirname as dirname3 } from "path";
 import { fileURLToPath } from "url";
-import { existsSync as existsSync11, readFileSync as readFileSync6 } from "fs";
+import { existsSync as existsSync10, readFileSync as readFileSync6 } from "fs";
 
 // ../server/dist/routes/api.js
 import { Hono } from "hono";
-import { join as join10, basename } from "path";
-import { existsSync as existsSync10, readFileSync as readFileSync5 } from "fs";
+import { join as join9, basename } from "path";
+import { existsSync as existsSync9, readFileSync as readFileSync5 } from "fs";
 
 // ../server/dist/services/stash-service.js
-import { readFileSync as readFileSync3, existsSync as existsSync8 } from "fs";
-import { join as join8 } from "path";
+import { readFileSync as readFileSync3, existsSync as existsSync7 } from "fs";
+import { join as join7 } from "path";
 
 // ../server/dist/services/app-proxy.js
 import { spawn as spawn5 } from "child_process";
@@ -2173,8 +2138,7 @@ class StashService {
       id: "resolve-component",
       prompt,
       cwd: this.projectPath,
-      model: "claude-haiku-4-5-20251001",
-      tools: ["Read", "Grep", "Glob", "Bash"]
+      model: "claude-haiku-4-5-20251001"
     });
     let resolvedPath = "";
     try {
@@ -2236,8 +2200,8 @@ class StashService {
     let sourceCode = "";
     const filePath = component?.filePath || "";
     if (filePath && filePath !== "auto-detect") {
-      const sourceFile = join8(this.projectPath, filePath);
-      if (existsSync8(sourceFile)) {
+      const sourceFile = join7(this.projectPath, filePath);
+      if (existsSync7(sourceFile)) {
         sourceCode = readFileSync3(sourceFile, "utf-8");
       }
     }
@@ -2589,8 +2553,8 @@ ${refDescriptions.join(`
 }
 
 // ../server/dist/services/activity-store.js
-import { appendFileSync as appendFileSync2, readFileSync as readFileSync4, existsSync as existsSync9, mkdirSync as mkdirSync6, rmSync as rmSync3 } from "fs";
-import { join as join9, dirname as dirname2 } from "path";
+import { appendFileSync as appendFileSync2, readFileSync as readFileSync4, existsSync as existsSync8, mkdirSync as mkdirSync5, rmSync as rmSync3 } from "fs";
+import { join as join8, dirname as dirname2 } from "path";
 
 class ActivityStore {
   cache = new Map;
@@ -2599,7 +2563,7 @@ class ActivityStore {
     this.projectPath = projectPath;
   }
   jsonlPath(stashId) {
-    return join9(this.projectPath, ".stashes", "activity", `${stashId}.jsonl`);
+    return join8(this.projectPath, ".stashes", "activity", `${stashId}.jsonl`);
   }
   append(event) {
     const existing = this.cache.get(event.stashId) ?? [];
@@ -2607,8 +2571,8 @@ class ActivityStore {
     this.cache.set(event.stashId, existing);
     const filePath = this.jsonlPath(event.stashId);
     const dir = dirname2(filePath);
-    if (!existsSync9(dir))
-      mkdirSync6(dir, { recursive: true });
+    if (!existsSync8(dir))
+      mkdirSync5(dir, { recursive: true });
     appendFileSync2(filePath, JSON.stringify(event) + `
 `, "utf-8");
   }
@@ -2617,7 +2581,7 @@ class ActivityStore {
     if (cached && cached.length > 0)
       return cached;
     const filePath = this.jsonlPath(stashId);
-    if (!existsSync9(filePath))
+    if (!existsSync8(filePath))
       return [];
     const lines = readFileSync4(filePath, "utf-8").trim().split(`
 `).filter(Boolean);
@@ -2643,14 +2607,14 @@ class ActivityStore {
   clear(stashId) {
     this.cache.delete(stashId);
     const filePath = this.jsonlPath(stashId);
-    if (existsSync9(filePath)) {
+    if (existsSync8(filePath)) {
       rmSync3(filePath);
     }
   }
   has(stashId) {
     if (this.cache.has(stashId) && (this.cache.get(stashId)?.length ?? 0) > 0)
       return true;
-    return existsSync9(this.jsonlPath(stashId));
+    return existsSync8(this.jsonlPath(stashId));
   }
 }
 
@@ -2892,8 +2856,8 @@ app.get("/dev-server-status", async (c) => {
 });
 app.get("/screenshots/:filename", (c) => {
   const filename = c.req.param("filename");
-  const filePath = join10(serverState.projectPath, ".stashes", "screenshots", filename);
-  if (!existsSync10(filePath))
+  const filePath = join9(serverState.projectPath, ".stashes", "screenshots", filename);
+  if (!existsSync9(filePath))
     return c.json({ error: "Not found" }, 404);
   const content = readFileSync5(filePath);
   return new Response(content, {
@@ -2945,12 +2909,12 @@ app2.route("/api", apiRoutes);
 app2.get("/*", async (c) => {
   const path = c.req.path;
   const selfDir = dirname3(fileURLToPath(import.meta.url));
-  const bundledWebDir = join11(selfDir, "web");
-  const monorepoWebDir = join11(selfDir, "../../web/dist");
-  const webDistDir = existsSync11(join11(bundledWebDir, "index.html")) ? bundledWebDir : monorepoWebDir;
+  const bundledWebDir = join10(selfDir, "web");
+  const monorepoWebDir = join10(selfDir, "../../web/dist");
+  const webDistDir = existsSync10(join10(bundledWebDir, "index.html")) ? bundledWebDir : monorepoWebDir;
   const requestPath = path === "/" ? "/index.html" : path;
-  const filePath = join11(webDistDir, requestPath);
-  if (existsSync11(filePath) && !filePath.includes("..")) {
+  const filePath = join10(webDistDir, requestPath);
+  if (existsSync10(filePath) && !filePath.includes("..")) {
     const content = readFileSync6(filePath);
     const ext = filePath.split(".").pop() || "";
     const contentTypes = {
@@ -2969,8 +2933,8 @@ app2.get("/*", async (c) => {
       headers: { "content-type": contentTypes[ext] || "application/octet-stream" }
     });
   }
-  const indexPath = join11(webDistDir, "index.html");
-  if (existsSync11(indexPath)) {
+  const indexPath = join10(webDistDir, "index.html");
+  if (existsSync10(indexPath)) {
     const html = readFileSync6(indexPath, "utf-8");
     return new Response(html, {
       headers: { "content-type": "text/html; charset=utf-8" }
@@ -3034,11 +2998,11 @@ async function startServer(projectPath, userDevPort, requestedPort = STASHES_POR
 import open from "open";
 
 // ../server/dist/services/detector.js
-import { existsSync as existsSync12, readFileSync as readFileSync7 } from "fs";
-import { join as join12 } from "path";
+import { existsSync as existsSync11, readFileSync as readFileSync7 } from "fs";
+import { join as join11 } from "path";
 function detectFramework(projectPath) {
-  const packageJsonPath = join12(projectPath, "package.json");
-  if (!existsSync12(packageJsonPath)) {
+  const packageJsonPath = join11(projectPath, "package.json");
+  if (!existsSync11(packageJsonPath)) {
     return {
       framework: "unknown",
       devCommand: "npm run dev",
@@ -3100,7 +3064,7 @@ function getDevCommand(packageJson, fallback) {
 }
 function findConfig(projectPath, candidates) {
   for (const candidate of candidates) {
-    if (existsSync12(join12(projectPath, candidate))) {
+    if (existsSync11(join11(projectPath, candidate))) {
       return candidate;
     }
   }