@loupekit/mcp 0.6.0 → 0.7.0-next.24

package/README.md

@@ -52,7 +52,8 @@ element, its state, and the page.
 | Tool | Description |
 | --- | --- |
 | `list_comments(status?, url?)` | List comments, optionally filtered by status (`open` / `in_progress` / `done`) or page URL. |
-| `get_comment(id)` | The full Claude-ready package for one comment: request + element HTML + computed styles + screenshot URL. |
+| `get_comment(id)` | The full Claude-ready package for one comment: request + element HTML + computed styles + the **screenshot as an image** + any screen-recording URL. |
+| `propose_change(id, html, css?, notes?)` | Write your **modified HTML/CSS** back onto the comment. The dashboard renders it as code plus a live before/after preview for the dev team. |
 | `update_status(id, status)` | Move a comment across the workflow (`open` → `in_progress` → `done`) so triage state stays in sync. |
 
 ## Install

package/dist/index.js

@@ -7,6 +7,7 @@ import { pathToFileURL } from "url";
 import { realpathSync } from "fs";
 import { argv } from "process";
 import { z } from "zod";
+import { Buffer } from "buffer";
 var API = (process.env.LOUPE_API || "http://localhost:8787").replace(/\/$/, "");
 var PROJECT_KEY = process.env.LOUPE_PROJECT_KEY || "pk_demo_acme";
 var ADMIN = process.env.LOUPE_ADMIN_KEY || "";
@@ -18,7 +19,25 @@ async function api(path, init) {
   if (!res.ok) throw new Error(`${init?.method || "GET"} ${path} \u2192 ${res.status}`);
   return res.status === 204 ? null : res.json();
 }
-var wrap = (text) => ({ content: [{ type: "text", text }] });
+var wrap = (...parts) => ({
+  content: parts.map((p) => typeof p === "string" ? { type: "text", text: p } : p)
+});
+async function fetchImage(url) {
+  try {
+    if (url.startsWith("data:")) {
+      const m = /^data:([^;,]+)[^,]*,(.*)$/s.exec(url);
+      if (!m) return null;
+      return { mimeType: m[1] || "image/png", data: m[2].replace(/^base64,/, "") };
+    }
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    const mimeType = res.headers.get("content-type") || "image/png";
+    if (!mimeType.startsWith("image/")) return null;
+    return { mimeType, data: Buffer.from(await res.arrayBuffer()).toString("base64") };
+  } catch {
+    return null;
+  }
+}
 var targetOf = (c) => c.kind === "free" ? "page-level note" : c.anchor.testid ? `[data-testid="${c.anchor.testid}"]` : c.anchor.cssPath;
 async function listComments({ status, url }) {
   const q = new URLSearchParams({ projectKey: PROJECT_KEY });
@@ -49,32 +68,57 @@ async function getComment({ id }) {
       ].join("\n")
     );
   }
-  return wrap(
-    [
-      `# Feedback #${c.id} from ${c.author.name} (${c.status})`,
-      ``,
-      `**Request:** ${c.body}`,
-      `**Page:** ${c.url}`,
-      `**Target element:** ${c.anchor.testid ? `[data-testid="${c.anchor.testid}"]` : `\`${c.anchor.cssPath}\``}`,
-      c.screenshot ? `**Screenshot:** ${c.screenshot}` : ``,
+  const text = [
+    `# Feedback #${c.id} from ${c.author.name} (${c.status})`,
+    ``,
+    `**Request:** ${c.body}`,
+    `**Page:** ${c.url}`,
+    `**Target element:** ${c.anchor.testid ? `[data-testid="${c.anchor.testid}"]` : `\`${c.anchor.cssPath}\``}`,
+    c.screenshot ? `**Screenshot:** ${c.screenshot}` : ``,
+    c.recording ? `**Screen recording (webm):** ${c.recording}` : ``,
+    ``,
+    `## Target element HTML`,
+    "```html",
+    c.context.html,
+    "```",
+    ``,
+    `## Computed styles`,
+    "```json",
+    JSON.stringify(c.context.styles, null, 2),
+    "```",
+    // Surface an existing proposal so Claude can iterate rather than start over.
+    ...c.proposal ? [
       ``,
-      `## Target element HTML`,
+      `## Existing proposal (by ${c.proposal.author ?? "unknown"})`,
+      c.proposal.notes ? c.proposal.notes : ``,
       "```html",
-      c.context.html,
+      c.proposal.html,
       "```",
-      ``,
-      `## Computed styles`,
-      "```json",
-      JSON.stringify(c.context.styles, null, 2),
-      "```"
-    ].filter(Boolean).join("\n")
-  );
+      ...c.proposal.css ? ["```css", c.proposal.css, "```"] : []
+    ] : [],
+    ``,
+    `---`,
+    `When you've rewritten this UI, call \`propose_change(id: "${c.id}", html, css?, notes?)\` so the dev team sees your modified HTML/CSS in the dashboard.`
+  ].filter(Boolean).join("\n");
+  const img = c.screenshot ? await fetchImage(c.screenshot) : null;
+  return img ? wrap(text, { type: "image", data: img.data, mimeType: img.mimeType }) : wrap(text);
 }
 async function updateStatus({ id, status }) {
   await api(`/v1/comments/${encodeURIComponent(id)}`, { method: "PATCH", body: JSON.stringify({ status }) });
   return wrap(`#${id} \u2192 ${status}`);
 }
-var server = new McpServer({ name: "loupe", version: "0.6.0" });
+async function proposeChange({ id, html, css, notes }) {
+  const proposal = {
+    html,
+    css,
+    notes,
+    author: "Claude Code via MCP",
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  await api(`/v1/comments/${encodeURIComponent(id)}`, { method: "PATCH", body: JSON.stringify({ proposal }) });
+  return wrap(`Proposal saved for #${id}. The dev team can now review your modified HTML/CSS in the dashboard.`);
+}
+var server = new McpServer({ name: "loupe", version: "0.7.0" });
 server.tool(
   "list_comments",
   "List Loupe product-feedback comments for the project as a task backlog. Use this to see what a PM has flagged, then work through the items.",
@@ -96,6 +140,17 @@ server.tool(
   { id: z.string(), status: z.enum(["open", "in_progress", "done"]) },
   updateStatus
 );
+server.tool(
+  "propose_change",
+  "Submit the modified UI for a comment: the rewritten HTML (and optional CSS) that resolves the PM's request. This stores your proposal on the comment so the dev team can review the code and a live preview in the dashboard. Use get_comment first to see the original element, its computed styles, and the screenshot.",
+  {
+    id: z.string().describe("The comment id from list_comments."),
+    html: z.string().describe("The modified element markup that implements the requested change."),
+    css: z.string().optional().describe("Accompanying CSS. Omit if the styling is inlined in the HTML."),
+    notes: z.string().optional().describe("A short explanation of what you changed and why.")
+  },
+  proposeChange
+);
 function isEntrypoint() {
   try {
     return import.meta.url === pathToFileURL(realpathSync(argv[1] ?? "")).href;
@@ -110,5 +165,6 @@ if (isEntrypoint()) {
 export {
   getComment,
   listComments,
+  proposeChange,
   updateStatus
 };

package/package.json

@@ -5,7 +5,7 @@
     "email": "m.ashraf.saed@gmail.com",
     "url": "https://www.linkedin.com/in/mohamedashrafelsaed/"
   },
-  "version": "0.6.0",
+  "version": "0.7.0-next.24",
   "description": "MCP server that exposes Loupe comments to Claude Code as an actionable, fully-contextualized backlog.",
   "keywords": [
     "loupe",
@@ -46,6 +46,6 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@loupekit/shared": "0.6.0"
+    "@loupekit/shared": "0.7.0-next.24"
   }
 }