stashes 0.1.10 → 0.1.12

package/dist/cli.js

@@ -312,7 +312,29 @@ class WorktreeManager {
       await this.git.raw(["worktree", "prune"]);
     }
     logger.info("worktree", `creating pool preview: ${stashId}`, { branch, path: previewPath });
-    await this.git.raw(["worktree", "add", previewPath, branch]);
+    try {
+      await this.git.raw(["worktree", "add", previewPath, branch]);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (msg.includes("is already used by worktree")) {
+        logger.warn("worktree", `branch ${branch} locked by stale worktree, cleaning up`);
+        const staleDir = join3(this.projectPath, ".stashes", "worktrees", stashId);
+        const legacyPreview = join3(this.projectPath, ".stashes", "preview");
+        for (const dir of [staleDir, legacyPreview]) {
+          if (existsSync3(dir)) {
+            try {
+              await this.git.raw(["worktree", "remove", "--force", dir]);
+            } catch {
+              rmSync(dir, { recursive: true, force: true });
+            }
+          }
+        }
+        await this.git.raw(["worktree", "prune"]);
+        await this.git.raw(["worktree", "add", previewPath, branch]);
+      } else {
+        throw err;
+      }
+    }
     this.symlinkDeps(previewPath);
     logger.info("worktree", `pool preview created: ${stashId}`);
     return previewPath;
@@ -711,11 +733,15 @@ async function generate(opts) {
     }
   }
   const completedStashes = [];
-  const stashPromises = selectedDirectives.map(async (directive) => {
+  const existingStashes = persistence.listStashes(projectId);
+  const maxNumber = existingStashes.reduce((max, s) => Math.max(max, s.number ?? 0), 0);
+  const stashPromises = selectedDirectives.map(async (directive, idx) => {
     const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+    const stashNumber = maxNumber + idx + 1;
     const worktree = await worktreeManager.createForGeneration(stashId);
     const stash = {
       id: stashId,
+      number: stashNumber,
       projectId,
       prompt,
       componentPath: component?.filePath,
@@ -729,7 +755,7 @@ async function generate(opts) {
       createdAt: new Date().toISOString()
     };
     persistence.saveStash(stash);
-    emit(onProgress, { type: "generating", stashId });
+    emit(onProgress, { type: "generating", stashId, number: stashNumber });
     let stashPrompt;
     if (component?.filePath) {
       stashPrompt = buildStashPrompt({ name: component.exportName || component.filePath, filePath: component.filePath, domSelector: "" }, sourceCode, prompt, directive);
@@ -834,9 +860,12 @@ async function vary(opts) {
   if (!sourceStash)
     throw new Error(`Source stash ${sourceStashId} not found`);
   const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+  const existingStashes = persistence.listStashes(projectId);
+  const stashNumber = existingStashes.reduce((max, s) => Math.max(max, s.number ?? 0), 0) + 1;
   const worktree = await worktreeManager.createForVary(stashId, sourceStash.branch);
   const stash = {
     id: stashId,
+    number: stashNumber,
     projectId,
     prompt,
     componentPath: sourceStash.componentPath,
@@ -850,7 +879,7 @@ async function vary(opts) {
     createdAt: new Date().toISOString()
   };
   persistence.saveStash(stash);
-  emit2(onProgress, { type: "generating", stashId });
+  emit2(onProgress, { type: "generating", stashId, number: stashNumber });
   const varyPrompt = `The user wants to vary the current UI. Apply this change: ${prompt}`;
   const aiProcess = startAiProcess(stashId, varyPrompt, worktree.path);
   try {
@@ -1195,8 +1224,8 @@ class StashService {
       });
     }
   }
-  async chat(projectId, message, referenceStashIds) {
-    const component = this.selectedComponent;
+  async message(projectId, message, referenceStashIds, componentContext) {
+    const component = componentContext ? { name: componentContext.name, filePath: this.selectedComponent?.filePath || "" } : this.selectedComponent;
     let sourceCode = "";
     const filePath = component?.filePath || "";
     if (filePath && filePath !== "auto-detect") {
@@ -1216,8 +1245,11 @@ ${refs.join(`
       }
     }
     const chatPrompt = [
-      "The user is asking about their UI project. Answer concisely.",
-      "Do NOT modify any files.",
+      "You are helping the user explore UI design variations for their project.",
+      "You have access to stashes MCP tools to generate, list, browse, vary, and apply stashes.",
+      "If the user asks you to generate, create, or make variations, use the stashes_generate tool.",
+      "If the user asks to vary an existing stash, use the stashes_vary tool.",
+      "Otherwise, respond conversationally about their project and stashes.",
       "",
       component ? `Component: ${component.name}` : "",
       filePath !== "auto-detect" ? `File: ${filePath}` : "",
@@ -1228,7 +1260,7 @@ ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
       stashContext,
       "",
-      `User question: ${message}`
+      `User: ${message}`
     ].filter(Boolean).join(`
 `);
     const aiProcess = startAiProcess("chat", chatPrompt, this.projectPath);
@@ -1237,7 +1269,55 @@ ${sourceCode.substring(0, 3000)}
       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" });
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "text",
+            source: "chat"
+          });
+        } else if (chunk.type === "thinking") {
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "thinking",
+            source: "chat"
+          });
+        } else if (chunk.type === "tool_use") {
+          let toolName = "unknown";
+          let toolParams = {};
+          try {
+            const parsed = JSON.parse(chunk.content);
+            toolName = parsed.tool || parsed.name || "unknown";
+            toolParams = parsed.input || parsed.params || {};
+          } catch {}
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "tool_start",
+            source: "chat",
+            toolName,
+            toolParams,
+            toolStatus: "running"
+          });
+        } else if (chunk.type === "tool_result") {
+          let toolName = "unknown";
+          let toolResult = "";
+          try {
+            const parsed = JSON.parse(chunk.content);
+            toolName = parsed.tool || parsed.name || "unknown";
+            toolResult = typeof parsed.result === "string" ? parsed.result.substring(0, 200) : JSON.stringify(parsed.result).substring(0, 200);
+          } catch {
+            toolResult = chunk.content.substring(0, 200);
+          }
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "tool_end",
+            source: "chat",
+            toolName,
+            toolStatus: "completed",
+            toolResult
+          });
         }
       }
       await aiProcess.process.exited;
@@ -1253,7 +1333,7 @@ ${sourceCode.substring(0, 3000)}
     } catch (err) {
       this.broadcast({
         type: "ai_stream",
-        content: `Chat error: ${err instanceof Error ? err.message : String(err)}`,
+        content: `Error: ${err instanceof Error ? err.message : String(err)}`,
         streamType: "text",
         source: "chat"
       });
@@ -1266,7 +1346,12 @@ ${sourceCode.substring(0, 3000)}
       case "generating":
       case "screenshotting":
       case "ready":
-        this.broadcast({ type: "stash:status", stashId: event.stashId, status: event.type === "ready" ? "ready" : event.type });
+        this.broadcast({
+          type: "stash:status",
+          stashId: event.stashId,
+          status: event.type === "ready" ? "ready" : event.type,
+          ..."number" in event ? { number: event.number } : {}
+        });
         if (event.type === "ready" && "screenshotPath" in event && event.screenshotPath) {
           this.broadcast({ type: "stash:screenshot", stashId: event.stashId, url: event.screenshotPath });
         }
@@ -1274,9 +1359,11 @@ ${sourceCode.substring(0, 3000)}
       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 });
+      case "ai_stream": {
+        const streamType = event.streamType === "tool_use" ? "tool_start" : event.streamType;
+        this.broadcast({ type: "ai_stream", content: event.content, streamType });
         break;
+      }
     }
   }
   async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT, referenceStashIds) {
@@ -1370,28 +1457,17 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
           case "select_component":
             stashService.setSelectedComponent(event.component);
             break;
-          case "chat":
+          case "message":
             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, event.referenceStashIds);
-            break;
-          case "generate":
-            persistence.saveChatMessage(event.projectId, {
-              id: crypto.randomUUID(),
-              role: "user",
-              content: event.prompt,
-              type: "text",
-              createdAt: new Date().toISOString()
+              createdAt: new Date().toISOString(),
+              referenceStashIds: event.referenceStashIds,
+              componentContext: event.componentContext
             });
-            await stashService.generate(event.projectId, event.prompt, event.stashCount, event.referenceStashIds);
-            break;
-          case "vary":
-            await stashService.vary(event.sourceStashId, event.prompt);
+            await stashService.message(event.projectId, event.message, event.referenceStashIds, event.componentContext);
             break;
           case "interact":
             await stashService.switchPreview(event.stashId, event.sortedStashIds);
@@ -1407,9 +1483,11 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
             break;
         }
       } catch (err) {
-        logger.error("ws", `handler failed for ${event.type}`, {
-          error: err instanceof Error ? err.message : String(err)
-        });
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        logger.error("ws", `handler failed for ${event.type}`, { error: errorMsg });
+        if ("stashId" in event && event.stashId) {
+          broadcast({ type: "stash:error", stashId: event.stashId, error: errorMsg });
+        }
       }
     },
     close(ws) {

package/dist/mcp.js

@@ -248,7 +248,29 @@ class WorktreeManager {
       await this.git.raw(["worktree", "prune"]);
     }
     logger.info("worktree", `creating pool preview: ${stashId}`, { branch, path: previewPath });
-    await this.git.raw(["worktree", "add", previewPath, branch]);
+    try {
+      await this.git.raw(["worktree", "add", previewPath, branch]);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (msg.includes("is already used by worktree")) {
+        logger.warn("worktree", `branch ${branch} locked by stale worktree, cleaning up`);
+        const staleDir = join2(this.projectPath, ".stashes", "worktrees", stashId);
+        const legacyPreview = join2(this.projectPath, ".stashes", "preview");
+        for (const dir of [staleDir, legacyPreview]) {
+          if (existsSync2(dir)) {
+            try {
+              await this.git.raw(["worktree", "remove", "--force", dir]);
+            } catch {
+              rmSync(dir, { recursive: true, force: true });
+            }
+          }
+        }
+        await this.git.raw(["worktree", "prune"]);
+        await this.git.raw(["worktree", "add", previewPath, branch]);
+      } else {
+        throw err;
+      }
+    }
     this.symlinkDeps(previewPath);
     logger.info("worktree", `pool preview created: ${stashId}`);
     return previewPath;
@@ -647,11 +669,15 @@ async function generate(opts) {
     }
   }
   const completedStashes = [];
-  const stashPromises = selectedDirectives.map(async (directive) => {
+  const existingStashes = persistence.listStashes(projectId);
+  const maxNumber = existingStashes.reduce((max, s) => Math.max(max, s.number ?? 0), 0);
+  const stashPromises = selectedDirectives.map(async (directive, idx) => {
     const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+    const stashNumber = maxNumber + idx + 1;
     const worktree = await worktreeManager.createForGeneration(stashId);
     const stash = {
       id: stashId,
+      number: stashNumber,
       projectId,
       prompt,
       componentPath: component?.filePath,
@@ -665,7 +691,7 @@ async function generate(opts) {
       createdAt: new Date().toISOString()
     };
     persistence.saveStash(stash);
-    emit(onProgress, { type: "generating", stashId });
+    emit(onProgress, { type: "generating", stashId, number: stashNumber });
     let stashPrompt;
     if (component?.filePath) {
       stashPrompt = buildStashPrompt({ name: component.exportName || component.filePath, filePath: component.filePath, domSelector: "" }, sourceCode, prompt, directive);
@@ -770,9 +796,12 @@ async function vary(opts) {
   if (!sourceStash)
     throw new Error(`Source stash ${sourceStashId} not found`);
   const stashId = `stash_${crypto.randomUUID().substring(0, 8)}`;
+  const existingStashes = persistence.listStashes(projectId);
+  const stashNumber = existingStashes.reduce((max, s) => Math.max(max, s.number ?? 0), 0) + 1;
   const worktree = await worktreeManager.createForVary(stashId, sourceStash.branch);
   const stash = {
     id: stashId,
+    number: stashNumber,
     projectId,
     prompt,
     componentPath: sourceStash.componentPath,
@@ -786,7 +815,7 @@ async function vary(opts) {
     createdAt: new Date().toISOString()
   };
   persistence.saveStash(stash);
-  emit2(onProgress, { type: "generating", stashId });
+  emit2(onProgress, { type: "generating", stashId, number: stashNumber });
   const varyPrompt = `The user wants to vary the current UI. Apply this change: ${prompt}`;
   const aiProcess = startAiProcess(stashId, varyPrompt, worktree.path);
   try {
@@ -1325,8 +1354,8 @@ class StashService {
       });
     }
   }
-  async chat(projectId, message, referenceStashIds) {
-    const component = this.selectedComponent;
+  async message(projectId, message, referenceStashIds, componentContext) {
+    const component = componentContext ? { name: componentContext.name, filePath: this.selectedComponent?.filePath || "" } : this.selectedComponent;
     let sourceCode = "";
     const filePath = component?.filePath || "";
     if (filePath && filePath !== "auto-detect") {
@@ -1346,8 +1375,11 @@ ${refs.join(`
       }
     }
     const chatPrompt = [
-      "The user is asking about their UI project. Answer concisely.",
-      "Do NOT modify any files.",
+      "You are helping the user explore UI design variations for their project.",
+      "You have access to stashes MCP tools to generate, list, browse, vary, and apply stashes.",
+      "If the user asks you to generate, create, or make variations, use the stashes_generate tool.",
+      "If the user asks to vary an existing stash, use the stashes_vary tool.",
+      "Otherwise, respond conversationally about their project and stashes.",
       "",
       component ? `Component: ${component.name}` : "",
       filePath !== "auto-detect" ? `File: ${filePath}` : "",
@@ -1358,7 +1390,7 @@ ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
       stashContext,
       "",
-      `User question: ${message}`
+      `User: ${message}`
     ].filter(Boolean).join(`
 `);
     const aiProcess = startAiProcess("chat", chatPrompt, this.projectPath);
@@ -1367,7 +1399,55 @@ ${sourceCode.substring(0, 3000)}
       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" });
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "text",
+            source: "chat"
+          });
+        } else if (chunk.type === "thinking") {
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "thinking",
+            source: "chat"
+          });
+        } else if (chunk.type === "tool_use") {
+          let toolName = "unknown";
+          let toolParams = {};
+          try {
+            const parsed = JSON.parse(chunk.content);
+            toolName = parsed.tool || parsed.name || "unknown";
+            toolParams = parsed.input || parsed.params || {};
+          } catch {}
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "tool_start",
+            source: "chat",
+            toolName,
+            toolParams,
+            toolStatus: "running"
+          });
+        } else if (chunk.type === "tool_result") {
+          let toolName = "unknown";
+          let toolResult = "";
+          try {
+            const parsed = JSON.parse(chunk.content);
+            toolName = parsed.tool || parsed.name || "unknown";
+            toolResult = typeof parsed.result === "string" ? parsed.result.substring(0, 200) : JSON.stringify(parsed.result).substring(0, 200);
+          } catch {
+            toolResult = chunk.content.substring(0, 200);
+          }
+          this.broadcast({
+            type: "ai_stream",
+            content: chunk.content,
+            streamType: "tool_end",
+            source: "chat",
+            toolName,
+            toolStatus: "completed",
+            toolResult
+          });
         }
       }
       await aiProcess.process.exited;
@@ -1383,7 +1463,7 @@ ${sourceCode.substring(0, 3000)}
     } catch (err) {
       this.broadcast({
         type: "ai_stream",
-        content: `Chat error: ${err instanceof Error ? err.message : String(err)}`,
+        content: `Error: ${err instanceof Error ? err.message : String(err)}`,
         streamType: "text",
         source: "chat"
       });
@@ -1396,7 +1476,12 @@ ${sourceCode.substring(0, 3000)}
       case "generating":
       case "screenshotting":
       case "ready":
-        this.broadcast({ type: "stash:status", stashId: event.stashId, status: event.type === "ready" ? "ready" : event.type });
+        this.broadcast({
+          type: "stash:status",
+          stashId: event.stashId,
+          status: event.type === "ready" ? "ready" : event.type,
+          ..."number" in event ? { number: event.number } : {}
+        });
         if (event.type === "ready" && "screenshotPath" in event && event.screenshotPath) {
           this.broadcast({ type: "stash:screenshot", stashId: event.stashId, url: event.screenshotPath });
         }
@@ -1404,9 +1489,11 @@ ${sourceCode.substring(0, 3000)}
       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 });
+      case "ai_stream": {
+        const streamType = event.streamType === "tool_use" ? "tool_start" : event.streamType;
+        this.broadcast({ type: "ai_stream", content: event.content, streamType });
         break;
+      }
     }
   }
   async generate(projectId, prompt, stashCount = DEFAULT_STASH_COUNT, referenceStashIds) {
@@ -1500,28 +1587,17 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
           case "select_component":
             stashService.setSelectedComponent(event.component);
             break;
-          case "chat":
+          case "message":
             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, event.referenceStashIds);
-            break;
-          case "generate":
-            persistence.saveChatMessage(event.projectId, {
-              id: crypto.randomUUID(),
-              role: "user",
-              content: event.prompt,
-              type: "text",
-              createdAt: new Date().toISOString()
+              createdAt: new Date().toISOString(),
+              referenceStashIds: event.referenceStashIds,
+              componentContext: event.componentContext
             });
-            await stashService.generate(event.projectId, event.prompt, event.stashCount, event.referenceStashIds);
-            break;
-          case "vary":
-            await stashService.vary(event.sourceStashId, event.prompt);
+            await stashService.message(event.projectId, event.message, event.referenceStashIds, event.componentContext);
             break;
           case "interact":
             await stashService.switchPreview(event.stashId, event.sortedStashIds);
@@ -1537,9 +1613,11 @@ function createWebSocketHandler(projectPath, userDevPort, appProxyPort) {
             break;
         }
       } catch (err) {
-        logger.error("ws", `handler failed for ${event.type}`, {
-          error: err instanceof Error ? err.message : String(err)
-        });
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        logger.error("ws", `handler failed for ${event.type}`, { error: errorMsg });
+        if ("stashId" in event && event.stashId) {
+          broadcast({ type: "stash:error", stashId: event.stashId, error: errorMsg });
+        }
       }
     },
     close(ws) {