stashes 0.1.53 → 0.1.54

package/dist/cli.js

@@ -804,33 +804,49 @@ ${truncatedDiff}`;
   }
 }
 function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
+  const outputPath = join6(screenshotDir, `${stashId}.png`);
   return [
-    "You are a screenshot assistant. Take screenshots of a running web app using Playwright MCP tools.",
+    "You are a screenshot assistant. Take a screenshot of a running web app.",
     "Be fast \u2014 you have a strict time limit.",
     "",
-    `## The app is running at: http://localhost:${port}`,
+    `The app is running at: http://localhost:${port}`,
     "",
-    "## Git diff of changes:",
+    "## Git diff of changes (tells you what was modified):",
     "```",
     diff,
     "```",
     "",
-    "## Steps:",
-    `1. Call mcp__playwright__browser_navigate with url "http://localhost:${port}" to open the app`,
-    "2. From the diff, determine which page/route shows the changed components",
-    "3. If the change is on a different route, navigate to it",
-    "4. If the change is behind an interaction (tab click, modal open), perform it with mcp__playwright__browser_click",
-    `5. Call mcp__playwright__browser_take_screenshot to capture the page`,
-    "6. Respond with the JSON below",
+    "## 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.",
     "",
-    `## Screenshot save directory: ${screenshotDir}`,
-    `Use filename "${stashId}.png" for the primary screenshot.`,
+    "**Call this tool:**",
+    "```",
+    "mcp__playwright__browser_run_code",
+    "```",
+    "",
+    "**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';`,
+    `}`,
+    "```",
+    "",
+    "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.",
     "",
-    "## After taking screenshots, respond with ONLY this JSON:",
+    `After the tool call succeeds, respond with ONLY this JSON:`,
     "{",
     '  "screenshots": [',
     "    {",
-    `      "path": "${join6(screenshotDir, `${stashId}.png`)}",`,
+    `      "path": "${outputPath}",`,
     '      "label": "Short description of what is shown",',
     '      "route": "/the-url-path",',
     '      "isPrimary": true',
@@ -1124,8 +1140,53 @@ async function generate(opts) {
         return;
       }
       const generatedStash = { ...stash, status: "screenshotting" };
-      completedStashes.push(generatedStash);
       persistence.saveStash(generatedStash);
+      emit(onProgress, { type: "screenshotting", stashId });
+      try {
+        const port = await allocatePort();
+        const screenshotWorktree = await worktreeManager.createForGeneration(`screenshot-${stashId}`);
+        const screenshotGit = simpleGit3(screenshotWorktree.path);
+        await screenshotGit.checkout(["--detach", stash.branch]);
+        const devServer = spawn3({
+          cmd: ["npm", "run", "dev"],
+          cwd: screenshotWorktree.path,
+          stdin: "ignore",
+          stdout: "pipe",
+          stderr: "pipe",
+          env: { ...process.env, PORT: String(port), BROWSER: "none" }
+        });
+        try {
+          await waitForPort(port, 60000);
+          await new Promise((r) => setTimeout(r, 2000));
+          const mainGit = simpleGit3(projectPath);
+          const parentBranch = (await mainGit.revparse(["HEAD"])).trim();
+          const { primary, screenshots } = await captureSmartScreenshots({
+            projectPath,
+            stashId,
+            stashBranch: stash.branch,
+            parentBranch,
+            worktreePath: screenshotWorktree.path,
+            port,
+            model: opts.screenshotModel,
+            timeout: opts.screenshotTimeout
+          });
+          const readyStash = { ...generatedStash, status: "ready", screenshotUrl: primary, screenshots };
+          completedStashes.push(readyStash);
+          persistence.saveStash(readyStash);
+          emit(onProgress, { type: "ready", stashId, screenshotPath: primary });
+        } finally {
+          devServer.kill();
+        }
+        await worktreeManager.removeGeneration(`screenshot-${stashId}`);
+      } catch (err) {
+        logger.error("generation", `screenshot failed for ${stashId}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+        const readyStash = { ...generatedStash, status: "ready" };
+        completedStashes.push(readyStash);
+        persistence.saveStash(readyStash);
+        emit(onProgress, { type: "ready", stashId, screenshotPath: "" });
+      }
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : "Unknown error";
       persistence.saveStash({ ...stash, status: "error", error: errorMsg });
@@ -1135,53 +1196,6 @@ async function generate(opts) {
     }
   });
   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 = simpleGit3(worktree.path);
-      await screenshotGit.checkout(["--detach", stash.branch]);
-      const devServer = spawn3({
-        cmd: ["npm", "run", "dev"],
-        cwd: worktree.path,
-        stdin: "ignore",
-        stdout: "pipe",
-        stderr: "pipe",
-        env: { ...process.env, PORT: String(port), BROWSER: "none" }
-      });
-      try {
-        await waitForPort(port, 60000);
-        await new Promise((r) => setTimeout(r, 2000));
-        const mainGit = simpleGit3(projectPath);
-        const parentBranch = (await mainGit.revparse(["HEAD"])).trim();
-        const { primary, screenshots } = await captureSmartScreenshots({
-          projectPath,
-          stashId: stash.id,
-          stashBranch: stash.branch,
-          parentBranch,
-          worktreePath: worktree.path,
-          port,
-          model: opts.screenshotModel,
-          timeout: opts.screenshotTimeout
-        });
-        const updatedStash = { ...stash, status: "ready", screenshotUrl: primary, screenshots };
-        persistence.saveStash(updatedStash);
-        const idx = completedStashes.indexOf(stash);
-        completedStashes[idx] = updatedStash;
-        emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: primary });
-      } finally {
-        devServer.kill();
-      }
-      await worktreeManager.removeGeneration(`screenshot-${stash.id}`);
-    } catch (err) {
-      logger.error("generation", `screenshot failed for ${stash.id}`, {
-        error: err instanceof Error ? err.message : String(err)
-      });
-      persistence.saveStash({ ...stash, status: "ready" });
-      emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: "" });
-    }
-  }
   return completedStashes;
 }
 // ../core/dist/vary.js

package/dist/mcp.js

@@ -789,33 +789,49 @@ ${truncatedDiff}`;
   }
 }
 function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
+  const outputPath = join6(screenshotDir, `${stashId}.png`);
   return [
-    "You are a screenshot assistant. Take screenshots of a running web app using Playwright MCP tools.",
+    "You are a screenshot assistant. Take a screenshot of a running web app.",
     "Be fast \u2014 you have a strict time limit.",
     "",
-    `## The app is running at: http://localhost:${port}`,
+    `The app is running at: http://localhost:${port}`,
     "",
-    "## Git diff of changes:",
+    "## Git diff of changes (tells you what was modified):",
     "```",
     diff,
     "```",
     "",
-    "## Steps:",
-    `1. Call mcp__playwright__browser_navigate with url "http://localhost:${port}" to open the app`,
-    "2. From the diff, determine which page/route shows the changed components",
-    "3. If the change is on a different route, navigate to it",
-    "4. If the change is behind an interaction (tab click, modal open), perform it with mcp__playwright__browser_click",
-    `5. Call mcp__playwright__browser_take_screenshot to capture the page`,
-    "6. Respond with the JSON below",
+    "## 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.",
     "",
-    `## Screenshot save directory: ${screenshotDir}`,
-    `Use filename "${stashId}.png" for the primary screenshot.`,
+    "**Call this tool:**",
+    "```",
+    "mcp__playwright__browser_run_code",
+    "```",
+    "",
+    "**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';`,
+    `}`,
+    "```",
+    "",
+    "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.",
     "",
-    "## After taking screenshots, respond with ONLY this JSON:",
+    `After the tool call succeeds, respond with ONLY this JSON:`,
     "{",
     '  "screenshots": [',
     "    {",
-    `      "path": "${join6(screenshotDir, `${stashId}.png`)}",`,
+    `      "path": "${outputPath}",`,
     '      "label": "Short description of what is shown",',
     '      "route": "/the-url-path",',
     '      "isPrimary": true',
@@ -1109,8 +1125,53 @@ async function generate(opts) {
         return;
       }
       const generatedStash = { ...stash, status: "screenshotting" };
-      completedStashes.push(generatedStash);
       persistence.saveStash(generatedStash);
+      emit(onProgress, { type: "screenshotting", stashId });
+      try {
+        const port = await allocatePort();
+        const screenshotWorktree = await worktreeManager.createForGeneration(`screenshot-${stashId}`);
+        const screenshotGit = simpleGit3(screenshotWorktree.path);
+        await screenshotGit.checkout(["--detach", stash.branch]);
+        const devServer = spawn3({
+          cmd: ["npm", "run", "dev"],
+          cwd: screenshotWorktree.path,
+          stdin: "ignore",
+          stdout: "pipe",
+          stderr: "pipe",
+          env: { ...process.env, PORT: String(port), BROWSER: "none" }
+        });
+        try {
+          await waitForPort(port, 60000);
+          await new Promise((r) => setTimeout(r, 2000));
+          const mainGit = simpleGit3(projectPath);
+          const parentBranch = (await mainGit.revparse(["HEAD"])).trim();
+          const { primary, screenshots } = await captureSmartScreenshots({
+            projectPath,
+            stashId,
+            stashBranch: stash.branch,
+            parentBranch,
+            worktreePath: screenshotWorktree.path,
+            port,
+            model: opts.screenshotModel,
+            timeout: opts.screenshotTimeout
+          });
+          const readyStash = { ...generatedStash, status: "ready", screenshotUrl: primary, screenshots };
+          completedStashes.push(readyStash);
+          persistence.saveStash(readyStash);
+          emit(onProgress, { type: "ready", stashId, screenshotPath: primary });
+        } finally {
+          devServer.kill();
+        }
+        await worktreeManager.removeGeneration(`screenshot-${stashId}`);
+      } catch (err) {
+        logger.error("generation", `screenshot failed for ${stashId}`, {
+          error: err instanceof Error ? err.message : String(err)
+        });
+        const readyStash = { ...generatedStash, status: "ready" };
+        completedStashes.push(readyStash);
+        persistence.saveStash(readyStash);
+        emit(onProgress, { type: "ready", stashId, screenshotPath: "" });
+      }
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : "Unknown error";
       persistence.saveStash({ ...stash, status: "error", error: errorMsg });
@@ -1120,53 +1181,6 @@ async function generate(opts) {
     }
   });
   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 = simpleGit3(worktree.path);
-      await screenshotGit.checkout(["--detach", stash.branch]);
-      const devServer = spawn3({
-        cmd: ["npm", "run", "dev"],
-        cwd: worktree.path,
-        stdin: "ignore",
-        stdout: "pipe",
-        stderr: "pipe",
-        env: { ...process.env, PORT: String(port), BROWSER: "none" }
-      });
-      try {
-        await waitForPort(port, 60000);
-        await new Promise((r) => setTimeout(r, 2000));
-        const mainGit = simpleGit3(projectPath);
-        const parentBranch = (await mainGit.revparse(["HEAD"])).trim();
-        const { primary, screenshots } = await captureSmartScreenshots({
-          projectPath,
-          stashId: stash.id,
-          stashBranch: stash.branch,
-          parentBranch,
-          worktreePath: worktree.path,
-          port,
-          model: opts.screenshotModel,
-          timeout: opts.screenshotTimeout
-        });
-        const updatedStash = { ...stash, status: "ready", screenshotUrl: primary, screenshots };
-        persistence.saveStash(updatedStash);
-        const idx = completedStashes.indexOf(stash);
-        completedStashes[idx] = updatedStash;
-        emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: primary });
-      } finally {
-        devServer.kill();
-      }
-      await worktreeManager.removeGeneration(`screenshot-${stash.id}`);
-    } catch (err) {
-      logger.error("generation", `screenshot failed for ${stash.id}`, {
-        error: err instanceof Error ? err.message : String(err)
-      });
-      persistence.saveStash({ ...stash, status: "ready" });
-      emit(onProgress, { type: "ready", stashId: stash.id, screenshotPath: "" });
-    }
-  }
   return completedStashes;
 }
 // ../core/dist/vary.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stashes",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "type": "module",
   "description": "Generate AI-powered UI design explorations in your project",
   "keywords": [