@productmaker/mcp 3.1.0 → 3.1.2

package/dist/ui/meta-upload-app.html

@@ -548,6 +548,7 @@
         const IMAGE_COMPRESSION_THRESHOLD_BYTES = 1.8 * 1024 * 1024;
         const IMAGE_COMPRESSION_MAX_BYTES = 1.8 * 1024 * 1024;
         const IMAGE_MAX_DIMENSION = 2048;
+        const PREVIEW_MAX_DIMENSION = 256;
         const MAX_UPLOAD_ATTEMPTS = 3;
         const TOOL_RESULT_TEXT_LIMIT = 100000;
         const RPC_TIMEOUT_MS = 15000;
@@ -1560,6 +1561,8 @@
             const item = createItem(file, mediaKind);
             state.items.push(item);
             renderItems();
+            // Thumbnail is cosmetic and must never delay or block the upload.
+            void upgradePreviewToDataUrl(item);
             await prepareAndUpload(item);
           }
           state.busyBatch = false;
@@ -1685,39 +1688,77 @@
           return inspection;
         }
 
-        function inspectImage(file) {
-          return new Promise((resolve, reject) => {
+        /**
+         * Decodes `file` into a canvas-drawable source WITHOUT a `blob:` URL.
+         *
+         * Host sandboxes restrict `img-src`, and ChatGPT's does not allow `blob:`
+         * ("Loading the image 'blob:…' violates the following Content Security Policy
+         * directive: img-src 'self' data: …"), so `<img>.src = URL.createObjectURL(file)`
+         * is blocked, fires onerror, and every image was rejected as unreadable —
+         * regardless of its format. `createImageBitmap` reads the File directly, so no
+         * URL and no CSP is involved. The object-URL path stays only as a fallback for
+         * hosts without it, where nothing blocked us in the first place.
+         *
+         * Callers own the result: call releaseImageSource() when done.
+         */
+        async function decodeImageSource(file) {
+          if (typeof createImageBitmap === "function") {
+            try {
+              return await createImageBitmap(file);
+            } catch {
+              // fall through to the object-URL path
+            }
+          }
+          return await new Promise((resolve, reject) => {
             const image = new Image();
             const objectUrl = URL.createObjectURL(file);
-            const cleanup = () => URL.revokeObjectURL(objectUrl);
             image.onload = () => {
-              cleanup();
-              const width = image.naturalWidth;
-              const height = image.naturalHeight;
-              if (!validDimension(width) || !validDimension(height)) {
-                reject(
-                  validationError(
-                    "invalid_metadata",
-                    "No se pudo leer la imagen.",
-                  ),
-                );
-                return;
-              }
-              resolve({ mediaKind: "image", width, height, image });
+              URL.revokeObjectURL(objectUrl);
+              resolve(image);
             };
             image.onerror = () => {
-              cleanup();
-              reject(
-                validationError(
-                  "invalid_metadata",
-                  "No se pudo leer la imagen.",
-                ),
-              );
+              URL.revokeObjectURL(objectUrl);
+              reject(new Error("decode_failed"));
             };
             image.src = objectUrl;
           });
         }
 
+        function releaseImageSource(source) {
+          if (source && typeof source.close === "function") source.close();
+        }
+
+        function sourceDimensions(source) {
+          return {
+            width: source.width ?? source.naturalWidth,
+            height: source.height ?? source.naturalHeight,
+          };
+        }
+
+        async function inspectImage(file) {
+          let source;
+          try {
+            source = await decodeImageSource(file);
+          } catch {
+            throw validationError(
+              "invalid_metadata",
+              "No se pudo leer la imagen.",
+            );
+          }
+          try {
+            const { width, height } = sourceDimensions(source);
+            if (!validDimension(width) || !validDimension(height)) {
+              throw validationError(
+                "invalid_metadata",
+                "No se pudo leer la imagen.",
+              );
+            }
+            return { mediaKind: "image", width, height };
+          } finally {
+            releaseImageSource(source);
+          }
+        }
+
         function inspectVideo(file) {
           return new Promise((resolve, reject) => {
             const video = document.createElement("video");
@@ -1772,6 +1813,15 @@
 
         async function compressImage(file, inspection) {
           if (file.size <= IMAGE_COMPRESSION_THRESHOLD_BYTES) return file;
+          // Decoded here rather than carried over from inspectImage so the source's
+          // lifetime never spans two functions: an ImageBitmap must be closed, and only
+          // oversized files reach this path at all.
+          let source;
+          try {
+            source = await decodeImageSource(file);
+          } catch {
+            return file;
+          }
           try {
             const scale = Math.min(
               1,
@@ -1791,13 +1841,7 @@
               context.fillRect(0, 0, canvas.width, canvas.height);
               context.restore();
             }
-            context.drawImage(
-              inspection.image,
-              0,
-              0,
-              canvas.width,
-              canvas.height,
-            );
+            context.drawImage(source, 0, 0, canvas.width, canvas.height);
             let blob = await canvasBlob(canvas, file.type);
             if (
               file.type === "image/png" &&
@@ -1830,6 +1874,8 @@
             safeError.safeMessage = "No se pudo comprimir la imagen.";
             safeError.safeStage = "compression";
             throw safeError;
+          } finally {
+            releaseImageSource(source);
           }
         }
 
@@ -2112,21 +2158,24 @@
 
         function revokePreviewUrl(item) {
           if (
-            item.previewUrl &&
+            item.previewUrl.startsWith("blob:") &&
             typeof window.URL.revokeObjectURL === "function"
           ) {
             window.URL.revokeObjectURL(item.previewUrl);
-            item.previewUrl = "";
           }
+          item.previewUrl = "";
+        }
+
+        function previewableImage(item) {
+          return Boolean(
+            item.file &&
+            item.mediaKind === "image" &&
+            IMAGE_TYPES.has(item.file.type),
+          );
         }
 
         function previewUrlFor(item) {
-          if (
-            !item.file ||
-            item.mediaKind !== "image" ||
-            !IMAGE_TYPES.has(item.file.type)
-          )
-            return "";
+          if (!previewableImage(item)) return "";
           if (
             !item.previewUrl &&
             typeof window.URL.createObjectURL === "function"
@@ -2136,6 +2185,44 @@
           return item.previewUrl;
         }
 
+        /**
+         * Upgrades the thumbnail from the `blob:` object URL to a small `data:` URL.
+         *
+         * ChatGPT's sandbox blocks `blob:` in `img-src` (see decodeImageSource), so the
+         * object URL renders as a broken image there; `data:` is allowed. This only ever
+         * replaces a working-or-broken preview with a working one, so a failure here is
+         * cosmetic and leaves the existing behaviour untouched on hosts that allow
+         * `blob:`. Downscaled first so the inline URL stays a few KB, not the whole file.
+         */
+        async function upgradePreviewToDataUrl(item) {
+          if (!previewableImage(item)) return;
+          let source;
+          try {
+            source = await decodeImageSource(item.file);
+            const { width, height } = sourceDimensions(source);
+            if (!validDimension(width) || !validDimension(height)) return;
+            const scale = Math.min(
+              1,
+              PREVIEW_MAX_DIMENSION / Math.max(width, height),
+            );
+            const canvas = document.createElement("canvas");
+            canvas.width = Math.max(1, Math.round(width * scale));
+            canvas.height = Math.max(1, Math.round(height * scale));
+            const context = canvas.getContext("2d");
+            if (!context) return;
+            context.drawImage(source, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL("image/jpeg", 0.7);
+            if (!dataUrl.startsWith("data:image/")) return;
+            revokePreviewUrl(item);
+            item.previewUrl = dataUrl;
+            renderItems();
+          } catch {
+            // Cosmetic only: the object-URL preview and the upload both stand on their own.
+          } finally {
+            releaseImageSource(source);
+          }
+        }
+
         function renderItems() {
           const fragment = document.createDocumentFragment();
           state.items.forEach((item, index) => {
@@ -2273,19 +2360,27 @@
               status.status === "pending" ||
               (state.items.length > 0 &&
                 status.assets.length < state.items.length);
+            const canContinueInChat = canMessageHost();
             if (partial) {
               requireFallback(
                 "Carga parcial verificada. Puedes continuar desde el enlace seguro si algún archivo no terminó.",
                 "warning",
               );
+            } else if (!canContinueInChat) {
+              requireFallback(
+                "Carga completada. Este chat no puede continuar desde el widget. Abre el enlace seguro para seguir.",
+                "warning",
+              );
             } else {
               setFallbackVisibility(state.fallbackRequired);
             }
             setSessionStatus(
               partial
                 ? "Carga parcial verificada. Continuaremos solo con los assets listos."
-                : "Carga completada.",
-              partial ? "warning" : "success",
+                : canContinueInChat
+                  ? "Carga completada."
+                  : "Carga completada. Abre el enlace seguro para seguir.",
+              partial || !canContinueInChat ? "warning" : "success",
             );
           } catch (error) {
             const expired =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@productmaker/mcp",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "type": "module",
   "private": false,
   "description": "Product Maker MCP server — cost products, generate dropshipping landing pages, UGC videos, and ad creatives, and publish to Shopify and Meta Ads from Claude, ChatGPT, or Gemini.",
@@ -53,7 +53,9 @@
     "@modelcontextprotocol/sdk": "^1.30.0",
     "express": "^4.19.2",
     "express-rate-limit": "^7.4.0",
+    "jose": "^5.2.0",
     "pino": "^9.0.0",
+    "posthog-node": "^5.24.11",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -64,8 +66,8 @@
     "tsx": "^4.16.0",
     "typescript": "^7.0.2",
     "vitest": "^2.1.9",
-    "@packages/product-research": "0.1.0",
     "@packages/product-economics": "0.1.0",
+    "@packages/product-research": "0.1.0",
     "@packages/types": "0.1.0"
   },
   "publishConfig": {