stashes 0.1.35 → 0.1.37

package/dist/cli.js

@@ -851,8 +851,14 @@ ${truncatedDiff}`;
 }
 function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
   return [
-    "You are a screenshot assistant. A developer made UI changes to a web app.",
-    "Your job: navigate the running app, find the pages affected by the changes, and take screenshots.",
+    "You are a screenshot assistant. Your ONLY job is to take screenshots of a running web app using Playwright MCP tools.",
+    "",
+    "IMPORTANT RULES:",
+    "- ONLY use these Playwright MCP tools: mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_click, mcp__playwright__browser_snapshot",
+    "- Do NOT use any other tools (no Bash, Read, Grep, Agent, ToolSearch, etc.)",
+    "- Do NOT start any sessions or call useai tools",
+    "- Do NOT read or analyze code files \u2014 the diff below tells you everything",
+    "- Be fast \u2014 you have a strict time limit",
     "",
     `## The app is running at: http://localhost:${port}`,
     "",
@@ -861,22 +867,18 @@ function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
     diff,
     "```",
     "",
-    "## Instructions:",
-    "1. Analyze the diff to identify which components/pages changed",
-    "2. Determine the URL routes where these changes are visible",
-    "3. For each route:",
-    "   - Navigate to it using browser_navigate",
-    "   - If the change is behind an interaction (tab, modal, accordion), perform that interaction",
-    "   - Wait for the page to settle",
-    "   - Take a screenshot using browser_take_screenshot",
-    "4. Decide which screenshot shows the MOST visually significant change \u2014 mark it as primary",
+    "## 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",
     "",
-    `## Screenshot save paths:`,
-    `- Primary: ${join6(screenshotDir, `${stashId}.png`)}`,
-    `- Additional: ${join6(screenshotDir, `${stashId}-1.png`)}, ${join6(screenshotDir, `${stashId}-2.png`)}, etc.`,
+    `## Screenshot save directory: ${screenshotDir}`,
+    `Use filename "${stashId}.png" for the primary screenshot.`,
     "",
-    "## Output format (after all screenshots are taken):",
-    "Respond with ONLY this JSON (no markdown fences):",
+    "## After taking screenshots, respond with ONLY this JSON:",
     "{",
     '  "screenshots": [',
     "    {",
@@ -1113,9 +1115,9 @@ async function generate(opts) {
         await wtGit.commit(`stashes: stash ${stashId}`);
       } catch {}
       await worktreeManager.removeGeneration(stashId);
-      const readyStash = { ...stash, status: "ready" };
-      completedStashes.push(readyStash);
-      persistence.saveStash(readyStash);
+      const generatedStash = { ...stash, status: "screenshotting" };
+      completedStashes.push(generatedStash);
+      persistence.saveStash(generatedStash);
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : "Unknown error";
       persistence.saveStash({ ...stash, status: "error", error: errorMsg });
@@ -1155,7 +1157,7 @@ async function generate(opts) {
           model: opts.screenshotModel,
           timeout: opts.screenshotTimeout
         });
-        const updatedStash = { ...stash, screenshotUrl: primary, screenshots };
+        const updatedStash = { ...stash, status: "ready", screenshotUrl: primary, screenshots };
         persistence.saveStash(updatedStash);
         const idx = completedStashes.indexOf(stash);
         completedStashes[idx] = updatedStash;
@@ -1168,6 +1170,7 @@ async function generate(opts) {
       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: "" });
     }
   }
@@ -1259,6 +1262,7 @@ async function vary(opts) {
       await wtGit.commit(`stashes: vary ${stashId} from ${sourceStashId}`);
     } catch {}
     await worktreeManager.removeGeneration(stashId);
+    persistence.saveStash({ ...stash, status: "screenshotting" });
     emit2(onProgress, { type: "screenshotting", stashId });
     let screenshotPath = "";
     let screenshots = [];
@@ -2008,7 +2012,8 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
           case "select_component":
             stashService.setSelectedComponent(event.component);
             break;
-          case "message":
+          case "message": {
+            const isFirstMessage = persistence.getChatMessages(event.projectId, event.chatId).length === 0;
             persistence.saveChatMessage(event.projectId, event.chatId, {
               id: crypto.randomUUID(),
               role: "user",
@@ -2018,8 +2023,16 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
               referenceStashIds: event.referenceStashIds,
               componentContext: event.componentContext
             });
+            if (isFirstMessage) {
+              const chat = persistence.getChat(event.projectId, event.chatId);
+              if (chat) {
+                const title = event.message.length > 80 ? event.message.substring(0, 80).trimEnd() + "\u2026" : event.message;
+                persistence.saveChat({ ...chat, title });
+              }
+            }
             await stashService.message(event.projectId, event.chatId, event.message, event.referenceStashIds, event.componentContext);
             break;
+          }
           case "interact":
             await stashService.switchPreview(event.stashId, event.sortedStashIds);
             break;

package/dist/mcp.js

@@ -733,8 +733,14 @@ ${truncatedDiff}`;
 }
 function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
   return [
-    "You are a screenshot assistant. A developer made UI changes to a web app.",
-    "Your job: navigate the running app, find the pages affected by the changes, and take screenshots.",
+    "You are a screenshot assistant. Your ONLY job is to take screenshots of a running web app using Playwright MCP tools.",
+    "",
+    "IMPORTANT RULES:",
+    "- ONLY use these Playwright MCP tools: mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_click, mcp__playwright__browser_snapshot",
+    "- Do NOT use any other tools (no Bash, Read, Grep, Agent, ToolSearch, etc.)",
+    "- Do NOT start any sessions or call useai tools",
+    "- Do NOT read or analyze code files \u2014 the diff below tells you everything",
+    "- Be fast \u2014 you have a strict time limit",
     "",
     `## The app is running at: http://localhost:${port}`,
     "",
@@ -743,22 +749,18 @@ function buildScreenshotPrompt(port, diff, screenshotDir, stashId) {
     diff,
     "```",
     "",
-    "## Instructions:",
-    "1. Analyze the diff to identify which components/pages changed",
-    "2. Determine the URL routes where these changes are visible",
-    "3. For each route:",
-    "   - Navigate to it using browser_navigate",
-    "   - If the change is behind an interaction (tab, modal, accordion), perform that interaction",
-    "   - Wait for the page to settle",
-    "   - Take a screenshot using browser_take_screenshot",
-    "4. Decide which screenshot shows the MOST visually significant change \u2014 mark it as primary",
+    "## 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",
     "",
-    `## Screenshot save paths:`,
-    `- Primary: ${join5(screenshotDir, `${stashId}.png`)}`,
-    `- Additional: ${join5(screenshotDir, `${stashId}-1.png`)}, ${join5(screenshotDir, `${stashId}-2.png`)}, etc.`,
+    `## Screenshot save directory: ${screenshotDir}`,
+    `Use filename "${stashId}.png" for the primary screenshot.`,
     "",
-    "## Output format (after all screenshots are taken):",
-    "Respond with ONLY this JSON (no markdown fences):",
+    "## After taking screenshots, respond with ONLY this JSON:",
     "{",
     '  "screenshots": [',
     "    {",
@@ -995,9 +997,9 @@ async function generate(opts) {
         await wtGit.commit(`stashes: stash ${stashId}`);
       } catch {}
       await worktreeManager.removeGeneration(stashId);
-      const readyStash = { ...stash, status: "ready" };
-      completedStashes.push(readyStash);
-      persistence.saveStash(readyStash);
+      const generatedStash = { ...stash, status: "screenshotting" };
+      completedStashes.push(generatedStash);
+      persistence.saveStash(generatedStash);
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : "Unknown error";
       persistence.saveStash({ ...stash, status: "error", error: errorMsg });
@@ -1037,7 +1039,7 @@ async function generate(opts) {
           model: opts.screenshotModel,
           timeout: opts.screenshotTimeout
         });
-        const updatedStash = { ...stash, screenshotUrl: primary, screenshots };
+        const updatedStash = { ...stash, status: "ready", screenshotUrl: primary, screenshots };
         persistence.saveStash(updatedStash);
         const idx = completedStashes.indexOf(stash);
         completedStashes[idx] = updatedStash;
@@ -1050,6 +1052,7 @@ async function generate(opts) {
       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: "" });
     }
   }
@@ -1141,6 +1144,7 @@ async function vary(opts) {
       await wtGit.commit(`stashes: vary ${stashId} from ${sourceStashId}`);
     } catch {}
     await worktreeManager.removeGeneration(stashId);
+    persistence.saveStash({ ...stash, status: "screenshotting" });
     emit2(onProgress, { type: "screenshotting", stashId });
     let screenshotPath = "";
     let screenshots = [];
@@ -2204,7 +2208,8 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
           case "select_component":
             stashService.setSelectedComponent(event.component);
             break;
-          case "message":
+          case "message": {
+            const isFirstMessage = persistence.getChatMessages(event.projectId, event.chatId).length === 0;
             persistence.saveChatMessage(event.projectId, event.chatId, {
               id: crypto.randomUUID(),
               role: "user",
@@ -2214,8 +2219,16 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
               referenceStashIds: event.referenceStashIds,
               componentContext: event.componentContext
             });
+            if (isFirstMessage) {
+              const chat = persistence.getChat(event.projectId, event.chatId);
+              if (chat) {
+                const title = event.message.length > 80 ? event.message.substring(0, 80).trimEnd() + "\u2026" : event.message;
+                persistence.saveChat({ ...chat, title });
+              }
+            }
             await stashService.message(event.projectId, event.chatId, event.message, event.referenceStashIds, event.componentContext);
             break;
+          }
           case "interact":
             await stashService.switchPreview(event.stashId, event.sortedStashIds);
             break;