stashes 0.1.57 → 0.1.58

package/dist/cli.js

@@ -769,50 +769,61 @@ ${truncatedDiff}`;
     return "";
   }
 }
-function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
+function buildScreenshotPrompt(port, diff, screenshotDir, stashId, componentPath) {
   const outputPath = join5(screenshotDir, `${stashId}.png`);
   return [
-    "## CRITICAL: You are an automated screenshot subprocess. Follow these rules exactly.",
+    "## You are a screenshot agent. Your goal: capture a screenshot showing the UI changes described in the diff below.",
     "",
-    "FORBIDDEN \u2014 do NOT call any of these tools:",
-    "- ToolSearch, Skill, Agent, TodoWrite, TaskCreate, TaskUpdate, TaskList",
-    "- mcp__UseAI__useai_start, mcp__UseAI__useai_end, mcp__UseAI__useai_heartbeat",
-    "- mcp__stashes__*, mcp__plugin_drills__*, mcp__plugin_coverit__*",
-    "- EnterPlanMode, ExitPlanMode, WebSearch, WebFetch, LSP",
-    "- Read, Write, Edit, Glob, Grep (you do NOT need to read code)",
+    "## 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.",
     "",
-    "YOUR ONLY JOB: navigate to the app and take a screenshot using Playwright.",
+    `## App: http://localhost:${port}`,
+    componentPath ? `## Target component file: ${componentPath}` : "",
     "",
-    `## App URL: http://localhost:${port}`,
-    "",
-    "## Git diff (shows what changed \u2014 use this to decide where to navigate):",
+    "## Git diff of changes:",
     "```",
     diff,
     "```",
     "",
-    "## Steps (do these in order, nothing else):",
-    `1. Navigate: call mcp__plugin_playwright_playwright__browser_navigate with url "http://localhost:${port}"`,
-    "2. Wait 3 seconds for the page to render",
-    "3. If the diff shows changes below the fold, scroll down using mcp__plugin_playwright_playwright__browser_evaluate",
-    `4. Take screenshot: call mcp__plugin_playwright_playwright__browser_take_screenshot with type "png"`,
-    `   The screenshot will be saved automatically.`,
-    "5. Output ONLY this JSON (replace the screenshot path with the actual path returned):",
+    "## 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?)",
+    "",
+    "Then use Playwright tools to navigate there and capture it:",
+    "",
+    "**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",
     "",
+    "**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",
+    "",
+    `## Output \u2014 after taking the screenshot, respond with ONLY this JSON:`,
     "```json",
     "{",
     '  "screenshots": [',
     "    {",
     `      "path": "${outputPath}",`,
-    '      "label": "Description of what is shown",',
-    '      "route": "/",',
+    '      "label": "Brief description of what the screenshot shows",',
+    '      "route": "/the-route-you-navigated-to",',
     '      "isPrimary": true',
     "    }",
     "  ]",
     "}",
-    "```",
-    "",
-    "REMEMBER: Do NOT call ToolSearch, Skill, UseAI, Read, or any tool not listed above.",
-    "You have a strict time limit. Just navigate, screenshot, output JSON, done."
+    "```"
   ].join(`
 `);
 }
@@ -846,7 +857,7 @@ async function fallbackScreenshot(port, projectPath, stashId) {
   }
 }
 async function captureSmartScreenshots(opts) {
-  const { projectPath, stashId, stashBranch, parentBranch, worktreePath, port, model = "sonnet", timeout = DEFAULT_TIMEOUT } = opts;
+  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 });
@@ -857,7 +868,7 @@ 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,
@@ -1129,7 +1140,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);
@@ -1295,7 +1307,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];

package/dist/mcp.js

@@ -754,50 +754,61 @@ ${truncatedDiff}`;
     return "";
   }
 }
-function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
+function buildScreenshotPrompt(port, diff, screenshotDir, stashId, componentPath) {
   const outputPath = join5(screenshotDir, `${stashId}.png`);
   return [
-    "## CRITICAL: You are an automated screenshot subprocess. Follow these rules exactly.",
+    "## You are a screenshot agent. Your goal: capture a screenshot showing the UI changes described in the diff below.",
     "",
-    "FORBIDDEN \u2014 do NOT call any of these tools:",
-    "- ToolSearch, Skill, Agent, TodoWrite, TaskCreate, TaskUpdate, TaskList",
-    "- mcp__UseAI__useai_start, mcp__UseAI__useai_end, mcp__UseAI__useai_heartbeat",
-    "- mcp__stashes__*, mcp__plugin_drills__*, mcp__plugin_coverit__*",
-    "- EnterPlanMode, ExitPlanMode, WebSearch, WebFetch, LSP",
-    "- Read, Write, Edit, Glob, Grep (you do NOT need to read code)",
+    "## 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.",
     "",
-    "YOUR ONLY JOB: navigate to the app and take a screenshot using Playwright.",
+    `## App: http://localhost:${port}`,
+    componentPath ? `## Target component file: ${componentPath}` : "",
     "",
-    `## App URL: http://localhost:${port}`,
-    "",
-    "## Git diff (shows what changed \u2014 use this to decide where to navigate):",
+    "## Git diff of changes:",
     "```",
     diff,
     "```",
     "",
-    "## Steps (do these in order, nothing else):",
-    `1. Navigate: call mcp__plugin_playwright_playwright__browser_navigate with url "http://localhost:${port}"`,
-    "2. Wait 3 seconds for the page to render",
-    "3. If the diff shows changes below the fold, scroll down using mcp__plugin_playwright_playwright__browser_evaluate",
-    `4. Take screenshot: call mcp__plugin_playwright_playwright__browser_take_screenshot with type "png"`,
-    `   The screenshot will be saved automatically.`,
-    "5. Output ONLY this JSON (replace the screenshot path with the actual path returned):",
+    "## 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?)",
+    "",
+    "Then use Playwright tools to navigate there and capture it:",
+    "",
+    "**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",
     "",
+    "**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",
+    "",
+    `## Output \u2014 after taking the screenshot, respond with ONLY this JSON:`,
     "```json",
     "{",
     '  "screenshots": [',
     "    {",
     `      "path": "${outputPath}",`,
-    '      "label": "Description of what is shown",',
-    '      "route": "/",',
+    '      "label": "Brief description of what the screenshot shows",',
+    '      "route": "/the-route-you-navigated-to",',
     '      "isPrimary": true',
     "    }",
     "  ]",
     "}",
-    "```",
-    "",
-    "REMEMBER: Do NOT call ToolSearch, Skill, UseAI, Read, or any tool not listed above.",
-    "You have a strict time limit. Just navigate, screenshot, output JSON, done."
+    "```"
   ].join(`
 `);
 }
@@ -831,7 +842,7 @@ async function fallbackScreenshot(port, projectPath, stashId) {
   }
 }
 async function captureSmartScreenshots(opts) {
-  const { projectPath, stashId, stashBranch, parentBranch, worktreePath, port, model = "sonnet", timeout = DEFAULT_TIMEOUT } = opts;
+  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 });
@@ -842,7 +853,7 @@ 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,
@@ -1114,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);
@@ -1280,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];