@popmelt.com/core 0.1.0 → 0.3.0

package/dist/server.mjs

@@ -324,6 +324,7 @@ async function parseMultipart(req) {
   let planId;
   let manifest;
   let tasks;
+  const pastedImages = [];
   let offset = 0;
   const parts = [];
   while (offset < body.length) {
@@ -375,11 +376,18 @@ async function parseMultipart(req) {
       manifest = part.body.toString("utf-8");
     } else if (name === "tasks") {
       tasks = part.body.toString("utf-8");
+    } else if (name.startsWith("image-")) {
+      const segments = name.split("-");
+      const idx = parseInt(segments[segments.length - 1], 10);
+      const annotationId = segments.slice(1, -1).join("-");
+      if (annotationId && !isNaN(idx)) {
+        pastedImages.push({ annotationId, index: idx, data: part.body });
+      }
     }
   }
   if (!screenshot) throw new Error("Missing screenshot field");
   if (!feedback) feedback = "";
-  return { screenshot, feedback, color, provider, model, goal, pageUrl, viewport, planId, manifest, tasks };
+  return { screenshot, feedback, color, provider, model, goal, pageUrl, viewport, planId, manifest, tasks, pastedImages };
 }
 function readBody(req) {
   return new Promise((resolve, reject) => {
@@ -391,7 +399,7 @@ function readBody(req) {
 }
 
 // src/server/prompt-builder.ts
-function formatFeedbackContext(feedback) {
+function formatFeedbackContext(feedback, imagePaths) {
   var _a;
   const lines = [];
   if (feedback.annotations.length > 0) {
@@ -404,6 +412,12 @@ function formatFeedbackContext(feedback) {
       }).join(", ");
       const instruction = ann.instruction || "No text";
       lines.push(`- id=${ann.id} [${ann.type}] ${instruction} \u2192 Elements: ${elementsDesc || "none"}`);
+      const annImages = imagePaths == null ? void 0 : imagePaths[ann.id];
+      if (annImages && annImages.length > 0) {
+        for (const imgPath of annImages) {
+          lines.push(`  Attached image: use the Read tool to view ${imgPath}`);
+        }
+      }
     }
   }
   if (feedback.styleModifications.length > 0) {
@@ -488,7 +502,7 @@ function buildPrompt(screenshotPath, feedback, options) {
     lines.push("");
     lines.push("The current round is shown in full below.");
   }
-  const feedbackContext = formatFeedbackContext(feedback);
+  const feedbackContext = formatFeedbackContext(feedback, options == null ? void 0 : options.imagePaths);
   if (feedbackContext) {
     lines.push("");
     lines.push(feedbackContext);
@@ -521,7 +535,7 @@ function parseQuestion(responseText) {
   const match = responseText.match(/<question>\s*([\s\S]*?)\s*<\/question>/);
   return (_a = match == null ? void 0 : match[1]) != null ? _a : null;
 }
-function buildReplyPrompt(screenshotPath, threadHistory, provider) {
+function buildReplyPrompt(screenshotPath, threadHistory, provider, imagePaths) {
   const lines = [];
   lines.push("You are continuing work on a UI based on the developer's reply to your question.");
   lines.push("");
@@ -567,6 +581,14 @@ function buildReplyPrompt(screenshotPath, threadHistory, provider) {
   lines.push("Follow their instructions \u2014 apply code changes only if requested. The dev server has HMR so changes appear immediately.");
   lines.push("");
   lines.push("IMPORTANT: If any elements you modify have a `data-pm` attribute, preserve it in the source. This attribute tracks annotation positions.");
+  if (imagePaths && imagePaths.length > 0) {
+    lines.push("");
+    lines.push("## Attached Images");
+    lines.push("The developer attached reference images with their reply:");
+    for (const imgPath of imagePaths) {
+      lines.push(`Attached image: use the Read tool to view the image at: ${imgPath}`);
+    }
+  }
   lines.push("");
   lines.push("## Resolution");
   lines.push("After completing all work, output a resolution block listing what you did for each annotation:");
@@ -1084,14 +1106,15 @@ async function createPopmelt(options = {}) {
       const replyText = (lastReply == null ? void 0 : lastReply.replyToQuestion) || (lastReply == null ? void 0 : lastReply.feedbackSummary) || "";
       prompt = replyText + "\n\nAfter completing work, output a <resolution> block. If unclear, output a <question> block.";
     } else if (resumeSessionId) {
-      prompt = formatFeedbackContext(job.feedback) + "\n\nFollow the developer's instructions. If they ask for changes, apply them to the source files.\n\nAfter completing work, output a <resolution> block. If unclear, output a <question> block." + (provider !== "codex" ? `
+      prompt = formatFeedbackContext(job.feedback, job.imagePaths) + "\n\nFollow the developer's instructions. If they ask for changes, apply them to the source files.\n\nAfter completing work, output a <resolution> block. If unclear, output a <question> block." + (provider !== "codex" ? `
 
 IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.screenshotPath}` : "");
     } else {
       const threadHistory = !replyPrompt && job.threadId ? await threadStore.getThreadHistory(job.threadId) : void 0;
       prompt = replyPrompt != null ? replyPrompt : buildPrompt(job.screenshotPath, job.feedback, {
         threadHistory: threadHistory && threadHistory.length > 0 ? threadHistory : void 0,
-        provider
+        provider,
+        imagePaths: job.imagePaths
       });
     }
     const tag = ansiColor(job.color, `[\u22B9 ${port}:${job.id}]`);
@@ -1153,6 +1176,7 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
           }));
         }
       }
+      const toolsUsed = spawnResult.fileEdits && spawnResult.fileEdits.length > 0 ? spawnResult.fileEdits.map((e) => `${e.tool} ${e.file_path.split("/").pop()}`) : void 0;
       if (job.threadId) {
         await threadStore.appendMessage(job.threadId, {
           role: "assistant",
@@ -1161,7 +1185,8 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
           responseText: spawnResult.text,
           resolutions: resolutions.length > 0 ? resolutions : void 0,
           question: question != null ? question : void 0,
-          sessionId: spawnResult.sessionId
+          sessionId: spawnResult.sessionId,
+          toolsUsed
         });
       }
       if (job.planId && !job.planTaskId) {
@@ -1268,7 +1293,7 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
     }
   });
   async function handleSend(req, res) {
-    const { screenshot, feedback: feedbackStr, color, provider: providerStr, model: modelStr } = await parseMultipart(req);
+    const { screenshot, feedback: feedbackStr, color, provider: providerStr, model: modelStr, pastedImages } = await parseMultipart(req);
     let feedback;
     try {
       feedback = JSON.parse(feedbackStr);
@@ -1279,6 +1304,15 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
     const jobId = randomUUID().slice(0, 8);
     const screenshotPath = join2(tempDir, `screenshot-${jobId}.png`);
     await writeFile2(screenshotPath, screenshot);
+    const imagePaths = {};
+    if (pastedImages.length > 0) {
+      for (const img of pastedImages) {
+        const imgPath = join2(tempDir, `pasted-${jobId}-${img.annotationId}-${img.index}.png`);
+        await writeFile2(imgPath, img.data);
+        if (!imagePaths[img.annotationId]) imagePaths[img.annotationId] = [];
+        imagePaths[img.annotationId].push(imgPath);
+      }
+    }
     const linkedSelectors = feedback.annotations.map((a) => a.linkedSelector).filter((s) => !!s);
     let threadId;
     if (linkedSelectors.length > 0) {
@@ -1292,7 +1326,7 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
       }
     }
     const annotationIds = feedback.annotations.map((a) => a.id);
-    const job = {
+    const job = __spreadValues({
       id: jobId,
       status: "queued",
       screenshotPath,
@@ -1303,10 +1337,10 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
       annotationIds,
       provider: providerStr === "claude" || providerStr === "codex" ? providerStr : void 0,
       model: modelStr || void 0
-    };
+    }, Object.keys(imagePaths).length > 0 ? { imagePaths } : {});
     if (threadId) {
       const feedbackSummary = feedback.annotations.map((a) => a.instruction || `[${a.type}]`).join("; ");
-      const feedbackContext = formatFeedbackContext(feedback);
+      const feedbackContext = formatFeedbackContext(feedback, Object.keys(imagePaths).length > 0 ? imagePaths : void 0);
       await threadStore.appendMessage(threadId, {
         role: "human",
         timestamp: Date.now(),
@@ -1321,31 +1355,55 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
     sendJson(res, 200, { jobId, position, threadId });
   }
   async function handleReply(req, res) {
-    const chunks = [];
-    try {
-      for (var iter = __forAwait(req), more, temp, error; more = !(temp = await iter.next()).done; more = false) {
-        const chunk = temp.value;
-        chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+    const contentType = req.headers["content-type"] || "";
+    let threadId;
+    let reply;
+    let color;
+    let providerStr;
+    let modelStr;
+    let replyImageBuffers = [];
+    if (contentType.includes("multipart/form-data")) {
+      const parsed = await parseMultipart(req);
+      const meta = parsed.feedback ? JSON.parse(parsed.feedback) : {};
+      threadId = meta.threadId;
+      reply = meta.reply;
+      color = meta.color;
+      providerStr = meta.provider;
+      modelStr = meta.model;
+      for (const img of parsed.pastedImages) {
+        replyImageBuffers.push(img.data);
       }
-    } catch (temp) {
-      error = [temp];
-    } finally {
+    } else {
+      const chunks = [];
       try {
-        more && (temp = iter.return) && await temp.call(iter);
+        for (var iter = __forAwait(req), more, temp, error; more = !(temp = await iter.next()).done; more = false) {
+          const chunk = temp.value;
+          chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+        }
+      } catch (temp) {
+        error = [temp];
       } finally {
-        if (error)
-          throw error[0];
+        try {
+          more && (temp = iter.return) && await temp.call(iter);
+        } finally {
+          if (error)
+            throw error[0];
+        }
       }
+      const body = Buffer.concat(chunks).toString("utf-8");
+      let parsed;
+      try {
+        parsed = JSON.parse(body);
+      } catch (e) {
+        sendJson(res, 400, { error: "Invalid JSON" });
+        return;
+      }
+      threadId = parsed.threadId;
+      reply = parsed.reply;
+      color = parsed.color;
+      providerStr = parsed.provider;
+      modelStr = parsed.model;
     }
-    const body = Buffer.concat(chunks).toString("utf-8");
-    let parsed;
-    try {
-      parsed = JSON.parse(body);
-    } catch (e) {
-      sendJson(res, 400, { error: "Invalid JSON" });
-      return;
-    }
-    const { threadId, reply, color, provider: providerStr, model: modelStr } = parsed;
     if (!threadId || !reply) {
       sendJson(res, 400, { error: "Missing threadId or reply" });
       return;
@@ -1356,6 +1414,12 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
       return;
     }
     const jobId = randomUUID().slice(0, 8);
+    const replyImagePaths = [];
+    for (let i = 0; i < replyImageBuffers.length; i++) {
+      const imgPath = join2(tempDir, `reply-${jobId}-${i}.png`);
+      await writeFile2(imgPath, replyImageBuffers[i]);
+      replyImagePaths.push(imgPath);
+    }
     let screenshotPath = "";
     {
       const history2 = await threadStore.getThreadHistory(threadId);
@@ -1387,7 +1451,12 @@ IMPORTANT: First, use the Read tool to view the updated screenshot at: ${job.scr
       }
     }
     const replyProvider = providerStr === "claude" || providerStr === "codex" ? providerStr : void 0;
-    const prompt = buildReplyPrompt(screenshotPath, history, replyProvider);
+    const prompt = buildReplyPrompt(
+      screenshotPath,
+      history,
+      replyProvider,
+      replyImagePaths.length > 0 ? replyImagePaths : void 0
+    );
     const job = {
       id: jobId,
       status: "queued",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmelt.com/core",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The design collaboration layer for AI coding agents",
   "license": "PolyForm-Shield-1.0.0",
   "author": "Popmelt <hello@popmelt.com> (https://popmelt.com)",
@@ -30,7 +30,6 @@
     "format": "prettier --check \"**/*.{ts,tsx}\"",
     "lint": "eslint .",
     "prepublishOnly": "pnpm run build",
-    "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
   "exports": {
@@ -73,7 +72,6 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.8.3",
-    "vitest": "^4.0.18"
+    "typescript": "^5.8.3"
   }
 }