stashes 0.1.11 → 0.1.12

package/dist/cli.js

@@ -733,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,
@@ -751,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);
@@ -856,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,
@@ -872,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 {
@@ -1217,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") {
@@ -1238,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}` : "",
@@ -1250,7 +1260,7 @@ ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
       stashContext,
       "",
-      `User question: ${message}`
+      `User: ${message}`
     ].filter(Boolean).join(`
 `);
     const aiProcess = startAiProcess("chat", chatPrompt, this.projectPath);
@@ -1259,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;
@@ -1275,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"
       });
@@ -1288,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 });
         }
@@ -1296,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) {
@@ -1392,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);

package/dist/mcp.js

@@ -669,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,
@@ -687,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);
@@ -792,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,
@@ -808,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 {
@@ -1347,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") {
@@ -1368,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}` : "",
@@ -1380,7 +1390,7 @@ ${sourceCode.substring(0, 3000)}
 \`\`\`` : "",
       stashContext,
       "",
-      `User question: ${message}`
+      `User: ${message}`
     ].filter(Boolean).join(`
 `);
     const aiProcess = startAiProcess("chat", chatPrompt, this.projectPath);
@@ -1389,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;
@@ -1405,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"
       });
@@ -1418,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 });
         }
@@ -1426,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) {
@@ -1522,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);