draw2agent 1.3.4 → 2.0.1

package/README.md

@@ -1,62 +1,78 @@
-# draw2agent ✏️
-
-[![mcp-registry](https://img.shields.io/badge/mcp--registry-draw2agent%401.3.3-blue)](https://mcpregistry.com/packages/draw2agent)
-
-Draw on your website. Your AI agent sees it.
-
-**draw2agent** is an MCP server that lets you draw annotations directly on top of your local dev page. When you submit, your IDE agent receives a screenshot, structured DOM data, and annotation context to make precise code edits.
-
-👉 **Try it out at:** [draw2agent.vercel.app](https://draw2agent.vercel.app)
-
-## Demo
-
-[![draw2agent demo video](https://img.youtube.com/vi/siv1ioOnOXk/maxresdefault.jpg)](https://youtu.be/siv1ioOnOXk)
-*(Note: Video hosted on YouTube. Demo files have been ignored from the repository to save space.)*
-
-## Quick Start
-
-### 1. Add to your IDE (one-time)
-
-**Cursor** (`~/.cursor/mcp.json`):
-```json
-{
-  "mcpServers": {
-    "draw2agent": {
-      "command": "npx",
-      "args": ["-y", "draw2agent"]
-    }
-  }
-}
-```
-
-### 2. Use it
-
-Tell your agent:
-> "Use draw2agent to fix the navbar"
-
-1. 🌐 Agent opens your browser with drawing tools on your page
-2. ✏️ Draw circles, arrows, text directly on your website
-3. 📸 Click **Submit**
-4. 🤖 Agent reads the visual context and applies code changes
-
-## How It Works
-
-```
-Your Dev Page (proxied)
-├── Your original page content
-└── Excalidraw overlay (transparent, on top)
-    ├── Draw mode: annotate directly on the page
-    ├── Select mode: interact with the page normally (Esc)
-    └── Submit: screenshot + DOM + annotations → agent
-```
-
-The MCP server exposes two tools:
-
-| Tool | Description |
-|---|---|
-| `launch_canvas` | Opens your dev page with the drawing overlay |
-| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations |
-
-## License
-
-MIT
+# draw2agent ✏️
+
+[![npm version](https://img.shields.io/npm/v/draw2agent)](https://www.npmjs.com/package/draw2agent)
+[![mcp-registry](https://img.shields.io/badge/mcp--registry-io.github.zero--abd%2Fdraw2agent%402.0.0-blue)](https://registry.modelcontextprotocol.io/?q=draw2agent)
+
+Draw on your website. Your AI agent sees it.
+
+**draw2agent** is an MCP server that lets you draw annotations directly on top of your local dev page. When you submit, your IDE agent receives a screenshot, structured DOM data, and annotation context to make precise code edits.
+
+👉 **Try it out at:** [draw2agent.vercel.app](https://draw2agent.vercel.app)
+
+## Demo
+
+[![draw2agent demo video](https://img.youtube.com/vi/siv1ioOnOXk/maxresdefault.jpg)](https://youtu.be/siv1ioOnOXk)
+
+## Quick Start
+
+### 1. Add to your IDE (one-time)
+
+**Cursor** (`~/.cursor/mcp.json`):
+```json
+{
+  "mcpServers": {
+    "draw2agent": {
+      "command": "npx",
+      "args": ["-y", "draw2agent@latest"]
+    }
+  }
+}
+```
+
+### 2. Use it
+
+Tell your agent:
+> "Use draw2agent to fix the navbar"
+
+1. 🌐 Agent opens your browser with drawing tools on your page
+2. ✏️ Draw circles, arrows, text directly on your website
+3. 📸 Click **Submit**
+4. 🤖 Agent reads the visual context and applies code changes
+
+## How It Works
+
+```
+Your Dev Page (proxied)
+├── Your original page content
+└── Excalidraw overlay (transparent, on top)
+    ├── Draw mode: annotate directly on the page
+    ├── Select mode: interact with the page normally (Esc)
+    └── Submit: screenshot + DOM + annotations → agent
+```
+
+## Tools
+
+The MCP server exposes the following tools:
+
+| Tool | Description |
+|---|---|
+| `launch_canvas` | Opens your dev page with the drawing overlay |
+| `launch_ipad_canvas` | Creates a tunnel and returns a QR code for remote drawing from iPad/mobile |
+| `launch_scratch` | Opens a standalone Excalidraw whiteboard for freehand sketching |
+| `get_drawing_state` | Returns screenshot, DOM nodes, and annotations for the current state |
+
+### `launch_canvas`
+The core tool — proxies your localhost dev server and injects an Excalidraw overlay. Draw annotations directly on your running app, then submit to send visual context to your agent. The tool blocks until you submit.
+
+### `launch_ipad_canvas`
+Same as `launch_canvas`, but exposes the proxy over the internet via a secure tunnel. Returns a QR code that you can scan from your iPad or phone to draw annotations with touch. Perfect for whiteboard-style feedback sessions.
+
+### `launch_scratch`
+Opens a blank Excalidraw whiteboard — no target URL needed. Sketch UI mockups, wireframes, or diagrams from scratch. Your agent receives the drawing and implements the design.
+
+### `get_drawing_state`
+Returns the last captured drawing state (screenshot, DOM nodes, annotations) without launching a new session. Useful for re-fetching context.
+
+## License
+
+MIT

package/dist/index.js

@@ -778,10 +778,10 @@ function mergeDefs(...defs) {
 function cloneDef(schema) {
   return mergeDefs(schema._zod.def);
 }
-function getElementAtPath(obj, path3) {
-  if (!path3)
+function getElementAtPath(obj, path4) {
+  if (!path4)
     return obj;
-  return path3.reduce((acc, key) => acc?.[key], obj);
+  return path4.reduce((acc, key) => acc?.[key], obj);
 }
 function promiseAllObject(promisesObj) {
   const keys = Object.keys(promisesObj);
@@ -1164,11 +1164,11 @@ function aborted(x, startIndex = 0) {
   }
   return false;
 }
-function prefixIssues(path3, issues) {
+function prefixIssues(path4, issues) {
   return issues.map((iss) => {
     var _a2;
     (_a2 = iss).path ?? (_a2.path = []);
-    iss.path.unshift(path3);
+    iss.path.unshift(path4);
     return iss;
   });
 }
@@ -1351,7 +1351,7 @@ function formatError(error48, mapper = (issue2) => issue2.message) {
 }
 function treeifyError(error48, mapper = (issue2) => issue2.message) {
   const result = { errors: [] };
-  const processError = (error49, path3 = []) => {
+  const processError = (error49, path4 = []) => {
     var _a2, _b;
     for (const issue2 of error49.issues) {
       if (issue2.code === "invalid_union" && issue2.errors.length) {
@@ -1361,7 +1361,7 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
       } else if (issue2.code === "invalid_element") {
         processError({ issues: issue2.issues }, issue2.path);
       } else {
-        const fullpath = [...path3, ...issue2.path];
+        const fullpath = [...path4, ...issue2.path];
         if (fullpath.length === 0) {
           result.errors.push(mapper(issue2));
           continue;
@@ -1393,8 +1393,8 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
 }
 function toDotPath(_path) {
   const segs = [];
-  const path3 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
-  for (const seg of path3) {
+  const path4 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
+  for (const seg of path4) {
     if (typeof seg === "number")
       segs.push(`[${seg}]`);
     else if (typeof seg === "symbol")
@@ -13371,13 +13371,13 @@ function resolveRef(ref, ctx) {
   if (!ref.startsWith("#")) {
     throw new Error("External $ref is not supported, only local refs (#/...) are allowed");
   }
-  const path3 = ref.slice(1).split("/").filter(Boolean);
-  if (path3.length === 0) {
+  const path4 = ref.slice(1).split("/").filter(Boolean);
+  if (path4.length === 0) {
     return ctx.rootSchema;
   }
   const defsKey = ctx.version === "draft-2020-12" ? "$defs" : "definitions";
-  if (path3[0] === defsKey) {
-    const key = path3[1];
+  if (path4[0] === defsKey) {
+    const key = path4[1];
     if (!key || !ctx.defs[key]) {
       throw new Error(`Reference not found: ${ref}`);
     }
@@ -13827,6 +13827,9 @@ function rejectState(errorMsg) {
     rejectPendingState = null;
   }
 }
+function getState() {
+  return currentState;
+}
 function clearState() {
   currentState = null;
   isSessionClosed = false;
@@ -13992,6 +13995,203 @@ function stopHttpServer() {
   }
 }
 
+// src/scratch-server.ts
+import http2 from "http";
+import fs2 from "fs";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
+var OVERLAY_DIR2 = path2.resolve(__dirname2, "..", "overlay", "dist");
+var D2A_PREFIX2 = "/__d2a__";
+var MIME_TYPES2 = {
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".html": "text/html",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf"
+};
+var scratchServer = null;
+function getScratchHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>draw2agent \u2014 Scratch Whiteboard</title>
+  <link rel="stylesheet" href="${D2A_PREFIX2}/draw2agent-overlay.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #1e1e2e; }
+    /* In scratch mode, make the Excalidraw canvas fill the entire page with a visible background */
+    #draw2agent-root {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 1 !important;
+    }
+    #draw2agent-root .d2a-canvas-container {
+      pointer-events: all !important;
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 1 !important;
+    }
+    /* Show a background for the Excalidraw canvas in scratch mode */
+    #draw2agent-root .excalidraw {
+      --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    /* Override transparent background for scratch mode */
+    #draw2agent-root .excalidraw .excalidraw__canvas {
+      background: #1e1e2e !important;
+    }
+  </style>
+</head>
+<body data-d2a-mode="scratch">
+  <script src="${D2A_PREFIX2}/draw2agent-overlay.js"></script>
+</body>
+</html>`;
+}
+function startScratchServer(port) {
+  return new Promise((resolve, reject) => {
+    if (scratchServer) {
+      resolve(`http://localhost:${port}`);
+      return;
+    }
+    scratchServer = http2.createServer((req, res) => {
+      const url2 = req.url || "/";
+      if (req.method === "OPTIONS") {
+        res.writeHead(204, {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Content-Type"
+        });
+        res.end();
+        return;
+      }
+      if (url2 === `${D2A_PREFIX2}/capture` && req.method === "POST") {
+        let body = "";
+        req.on("data", (chunk) => body += chunk);
+        req.on("end", () => {
+          try {
+            const payload = JSON.parse(body);
+            payload.timestamp = (/* @__PURE__ */ new Date()).toISOString();
+            payload.targetUrl = "scratch://whiteboard";
+            setState(payload);
+            res.writeHead(200, {
+              "Content-Type": "application/json",
+              "Access-Control-Allow-Origin": "*"
+            });
+            res.end(JSON.stringify({ success: true }));
+            console.error("[draw2agent] \u2705 Scratch state captured successfully");
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error("[draw2agent] \u274C Scratch capture error:", msg);
+            rejectState(`Failed to parse capture payload: ${msg}`);
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: "Invalid JSON payload" }));
+          }
+        });
+        return;
+      }
+      if (url2 === `${D2A_PREFIX2}/close` && req.method === "POST") {
+        rejectState("User closed the draw2agent session.");
+        res.writeHead(200, {
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": "*"
+        });
+        res.end(JSON.stringify({ success: true }));
+        console.error("[draw2agent] \u{1F6D1} Scratch session closed by user");
+        return;
+      }
+      if (url2.startsWith(D2A_PREFIX2 + "/")) {
+        const filePath = path2.join(OVERLAY_DIR2, url2.slice(D2A_PREFIX2.length));
+        const ext = path2.extname(filePath);
+        const mime = MIME_TYPES2[ext] || "application/octet-stream";
+        fs2.readFile(filePath, (err, data) => {
+          if (err) {
+            res.writeHead(404, { "Content-Type": "text/plain" });
+            res.end("Not found");
+            return;
+          }
+          res.writeHead(200, {
+            "Content-Type": mime,
+            "Access-Control-Allow-Origin": "*",
+            "Cache-Control": "no-cache"
+          });
+          res.end(data);
+        });
+        return;
+      }
+      if (url2 === "/" || url2 === "/index.html") {
+        const html = getScratchHTML();
+        res.writeHead(200, {
+          "Content-Type": "text/html",
+          "Cache-Control": "no-cache"
+        });
+        res.end(html);
+        return;
+      }
+      res.writeHead(404, { "Content-Type": "text/plain" });
+      res.end("Not found");
+    });
+    scratchServer.listen(port, () => {
+      const url2 = `http://localhost:${port}`;
+      console.error(`[draw2agent] \u{1F3A8} Scratch whiteboard at ${url2}`);
+      resolve(url2);
+    });
+    scratchServer.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+function stopScratchServer() {
+  if (scratchServer) {
+    scratchServer.close();
+    scratchServer = null;
+  }
+}
+
+// src/tunnel.ts
+import localtunnel from "localtunnel";
+var activeTunnel = null;
+async function startTunnel(localPort) {
+  await stopTunnel();
+  const tunnel = await localtunnel({ port: localPort });
+  tunnel.on("close", () => {
+    console.error("[draw2agent] \u{1F50C} Tunnel closed");
+    activeTunnel = null;
+  });
+  tunnel.on("error", (err) => {
+    console.error("[draw2agent] Tunnel error:", err.message);
+  });
+  activeTunnel = tunnel;
+  console.error(`[draw2agent] \u{1F310} Tunnel opened: ${tunnel.url}`);
+  return tunnel.url;
+}
+async function stopTunnel() {
+  if (activeTunnel) {
+    activeTunnel.close();
+    activeTunnel = null;
+  }
+}
+
+// src/utils/qrcode.ts
+import QRCode from "qrcode";
+async function generateQR(url2) {
+  const [dataUrl, ascii] = await Promise.all([
+    QRCode.toDataURL(url2, {
+      type: "image/png",
+      width: 400,
+      margin: 2,
+      color: { dark: "#000000", light: "#ffffff" }
+    }),
+    QRCode.toString(url2, { type: "terminal", small: true })
+  ]);
+  return { dataUrl, ascii };
+}
+
 // src/utils/browser.ts
 import open from "open";
 async function openBrowser(url2) {
@@ -13999,14 +14199,50 @@ async function openBrowser(url2) {
 }
 
 // src/mcp-server.ts
-import fs2 from "fs";
-import path2 from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
-var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
-var INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-instructions.txt");
-var ERROR_INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-error-instructions.txt");
-var CLOSE_INSTRUCTIONS_PATH = path2.resolve(__dirname2, "..", "prompts", "agent-close-instructions.txt");
+import fs3 from "fs";
+import path3 from "path";
+import { fileURLToPath as fileURLToPath3 } from "url";
+var __dirname3 = path3.dirname(fileURLToPath3(import.meta.url));
+var INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-instructions.txt");
+var ERROR_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-error-instructions.txt");
+var CLOSE_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-close-instructions.txt");
+var IPAD_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-ipad-instructions.txt");
+var SCRATCH_INSTRUCTIONS_PATH = path3.resolve(__dirname3, "..", "prompts", "agent-scratch-instructions.txt");
 var DEFAULT_PORT = 9742;
+var DEFAULT_SCRATCH_PORT = 9743;
+function readPromptFile(filePath, fallback) {
+  try {
+    if (fs3.existsSync(filePath)) {
+      return fs3.readFileSync(filePath, "utf-8");
+    }
+  } catch (e) {
+    console.error(`[draw2agent] Failed to read ${path3.basename(filePath)}, using default.`, e);
+  }
+  return fallback;
+}
+function handleToolError(err, toolName) {
+  const message = err instanceof Error ? err.message : String(err);
+  let customInstructions = `\u274C Failed to capture canvas: ${message}`;
+  let isErrorResult = true;
+  if (message.includes("User closed the draw2agent session")) {
+    customInstructions = readPromptFile(
+      CLOSE_INSTRUCTIONS_PATH,
+      "The user closed the draw2agent session. Please summarize the changes you made."
+    );
+    customInstructions = customInstructions.replace(/launch_canvas/g, toolName);
+    isErrorResult = false;
+    stopHttpServer();
+    stopScratchServer();
+    stopTunnel();
+    clearProxyInfo();
+  } else {
+    customInstructions = readPromptFile(ERROR_INSTRUCTIONS_PATH, customInstructions).replace("{{ERROR_MESSAGE}}", message);
+  }
+  return {
+    content: [{ type: "text", text: customInstructions }],
+    isError: isErrorResult
+  };
+}
 function createMcpServer() {
   const server2 = new McpServer({
     name: "draw2agent",
@@ -14046,15 +14282,10 @@ function createMcpServer() {
         }
         clearState();
         const state = await waitForState();
-        let instructionsUrl = "";
-        let customInstructions = "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase.";
-        try {
-          if (fs2.existsSync(INSTRUCTIONS_PATH)) {
-            customInstructions = fs2.readFileSync(INSTRUCTIONS_PATH, "utf-8");
-          }
-        } catch (e) {
-          console.error("[draw2agent] Failed to read agent-instructions.txt, using default.", e);
-        }
+        const customInstructions = readPromptFile(
+          INSTRUCTIONS_PATH,
+          "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase."
+        );
         return {
           content: [
             {
@@ -14069,37 +14300,145 @@ function createMcpServer() {
           ]
         };
       } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        let customInstructions = `\u274C Failed to capture canvas: ${message}`;
-        let isErrorResult = true;
+        return handleToolError(err, "launch_canvas");
+      }
+    }
+  );
+  server2.tool(
+    "launch_ipad_canvas",
+    "Launch a remote drawing canvas accessible from an iPad or mobile device. Creates a tunnel to expose the local dev page over the internet and returns a QR code that the user can scan from their iPad. The user draws annotations on their device, and this tool blocks until they submit, returning the visual context. Ideal for touch-based annotation workflows.",
+    {
+      targetUrl: external_exports.string().describe("The URL of the local dev server to overlay (e.g. http://localhost:3000)"),
+      port: external_exports.number().optional().describe("Port for the draw2agent proxy server (default: 9742)")
+    },
+    async ({ targetUrl, port }) => {
+      const proxyPort = port ?? DEFAULT_PORT;
+      try {
         try {
-          if (message.includes("User closed the draw2agent session")) {
-            if (fs2.existsSync(CLOSE_INSTRUCTIONS_PATH)) {
-              customInstructions = fs2.readFileSync(CLOSE_INSTRUCTIONS_PATH, "utf-8");
-            } else {
-              customInstructions = "The user closed the draw2agent session. Please summarize the changes you made.";
-            }
-            isErrorResult = false;
-            stopHttpServer();
-            clearProxyInfo();
-          } else {
-            if (fs2.existsSync(ERROR_INSTRUCTIONS_PATH)) {
-              customInstructions = fs2.readFileSync(ERROR_INSTRUCTIONS_PATH, "utf-8").replace("{{ERROR_MESSAGE}}", message);
-            }
+          const checkUrl = targetUrl.replace("://localhost", "://127.0.0.1");
+          await fetch(checkUrl);
+        } catch (err) {
+          if (err.cause?.code === "ECONNREFUSED") {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `\u274C Connection refused to ${targetUrl}. There is no dev server running on that port. Please ask the user to confirm the correct local server URL.`
+                }
+              ],
+              isError: true
+            };
           }
-        } catch (e) {
-          console.error("[draw2agent] Failed to read fallback instructions.", e);
         }
+        const proxyInfo2 = getProxyInfo();
+        if (!proxyInfo2.running) {
+          const proxyUrl = await startHttpServer(targetUrl, proxyPort);
+          setProxyInfo(proxyUrl);
+        }
+        const tunnelUrl = await startTunnel(proxyPort);
+        const qr = await generateQR(tunnelUrl);
+        console.error(`
+[draw2agent] \u{1F4F1} iPad Canvas Ready!`);
+        console.error(`[draw2agent] \u{1F517} Scan this QR code or open: ${tunnelUrl}`);
+        console.error(qr.ascii);
+        clearState();
+        const state = await waitForState();
+        await stopTunnel();
+        const customInstructions = readPromptFile(
+          IPAD_INSTRUCTIONS_PATH,
+          "Analyze the attached screenshot with user annotations and implement the requested UI changes in the codebase."
+        );
         return {
           content: [
             {
               type: "text",
               text: customInstructions
+            },
+            {
+              type: "image",
+              data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+              mimeType: "image/png"
+            }
+          ]
+        };
+      } catch (err) {
+        await stopTunnel();
+        return handleToolError(err, "launch_ipad_canvas");
+      }
+    }
+  );
+  server2.tool(
+    "launch_scratch",
+    "Open a standalone whiteboard for freehand drawing and sketching. No target URL needed \u2014 the user gets a blank Excalidraw canvas to sketch UI mockups, wireframes, or diagrams. The agent receives the drawing as visual context. This tool blocks until the user submits their sketch.",
+    {
+      port: external_exports.number().optional().describe("Port for the scratch whiteboard server (default: 9743)")
+    },
+    async ({ port }) => {
+      const scratchPort = port ?? DEFAULT_SCRATCH_PORT;
+      try {
+        const scratchUrl = await startScratchServer(scratchPort);
+        await openBrowser(scratchUrl);
+        clearState();
+        const state = await waitForState();
+        const customInstructions = readPromptFile(
+          SCRATCH_INSTRUCTIONS_PATH,
+          "The user has drawn a freehand sketch. Analyze it and implement the design."
+        );
+        return {
+          content: [
+            {
+              type: "text",
+              text: customInstructions
+            },
+            {
+              type: "image",
+              data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+              mimeType: "image/png"
+            }
+          ]
+        };
+      } catch (err) {
+        return handleToolError(err, "launch_scratch");
+      }
+    }
+  );
+  server2.tool(
+    "get_drawing_state",
+    "Returns the current drawing state including screenshot, DOM nodes, and annotations. Use this to retrieve the latest captured state without launching a new canvas session. Returns an error if no state has been captured yet.",
+    {},
+    async () => {
+      const state = getState();
+      if (!state) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "\u274C No drawing state available. The user has not submitted any drawings yet. Use `launch_canvas`, `launch_ipad_canvas`, or `launch_scratch` first."
             }
           ],
-          isError: isErrorResult
+          isError: true
         };
       }
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              timestamp: state.timestamp,
+              targetUrl: state.targetUrl,
+              viewportSize: state.viewportSize,
+              drawingBounds: state.drawingBounds,
+              domNodes: state.domNodes,
+              annotationCount: state.annotations.length
+            }, null, 2)
+          },
+          {
+            type: "image",
+            data: state.annotatedScreenshot.replace(/^data:image\/\w+;base64,/, ""),
+            mimeType: "image/png"
+          }
+        ]
+      };
     }
   );
   return server2;