@productmaker/mcp 2.9.3 → 2.10.0

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

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light dark" />
-    <title>Carga segura para Meta · ProductMaker</title>
+    <title>Upload media · ProductMaker</title>
     <style>
       :root {
         color-scheme: light dark;
@@ -98,10 +98,8 @@
       }
 
       .upload-feedback {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
+        display: grid;
+        gap: 8px;
         margin-top: 10px;
       }
 
@@ -202,21 +200,31 @@
         cursor: not-allowed;
       }
 
-      .drop-icon {
-        display: grid;
-        width: 48px;
-        height: 48px;
-        place-items: center;
-        border: 1px solid var(--pm-line);
-        border-radius: 50%;
-        background: var(--pm-card);
-        box-shadow: 0 7px 20px rgb(27 36 66 / 8%);
+      .add-symbol {
         color: var(--pm-text);
-        font-size: 29px;
-        font-weight: 350;
+        font-size: 44px;
+        font-weight: 300;
         line-height: 1;
       }
 
+      .complete-button {
+        justify-self: start;
+        min-width: 76px;
+        margin-top: 10px;
+        padding: 10px 20px;
+        border: 0;
+        border-radius: 12px;
+        background: var(--pm-primary);
+        color: #ffffff;
+        cursor: pointer;
+        font-weight: 780;
+      }
+
+      .complete-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
       .drop-help {
         position: absolute;
         width: 1px;
@@ -447,7 +455,7 @@
                 aria-label="Agregar otro archivo"
                 disabled
               >
-                <span class="drop-icon" aria-hidden="true">+</span>
+                <span class="add-symbol" aria-hidden="true">+</span>
               </button>
               <button
                 class="compatibility-control"
@@ -493,6 +501,15 @@
               aria-live="polite"
             ></p>
           </div>
+          <button
+            class="complete-button"
+            type="button"
+            data-testid="meta-upload-complete-btn"
+            hidden
+            disabled
+          >
+            OK
+          </button>
         </section>
       </article>
     </main>
@@ -548,6 +565,9 @@
           batchError: document.querySelector(
             '[data-testid="meta-upload-batch-error"]',
           ),
+          completeButton: document.querySelector(
+            '[data-testid="meta-upload-complete-btn"]',
+          ),
           fileList: document.querySelector(
             '[data-testid="meta-upload-file-list"]',
           ),
@@ -643,6 +663,38 @@
           scheduleIntrinsicSizeReport(true);
         }
 
+        function canMessageHost() {
+          return (
+            hasOpenAiFunction("sendFollowUpMessage") || state.hostCanMessage
+          );
+        }
+
+        function canCompleteUpload() {
+          return (
+            !state.disposed &&
+            Boolean(state.session) &&
+            !sessionExpired() &&
+            !state.busyBatch &&
+            !state.completionNotified &&
+            !state.completionNotificationInFlight &&
+            state.assets.length > 0 &&
+            state.items.length > 0 &&
+            state.assets.length === state.items.length &&
+            state.items.every((item) => item.status === "uploaded") &&
+            canMessageHost()
+          );
+        }
+
+        function renderCompletionAction() {
+          const hasVerifiedAssets = state.assets.length > 0;
+          elements.completeButton.hidden =
+            state.completionNotified || !hasVerifiedAssets || !canMessageHost();
+          elements.completeButton.disabled = !canCompleteUpload();
+          elements.completeButton.textContent =
+            state.completionNotificationInFlight ? "…" : "OK";
+          scheduleIntrinsicSizeReport(true);
+        }
+
         function parseFinitePositiveNumber(value) {
           return typeof value === "number" &&
             Number.isFinite(value) &&
@@ -861,6 +913,8 @@
             !state.session ||
             sessionExpired() ||
             state.uploadBlocked ||
+            state.completionNotified ||
+            state.completionNotificationInFlight ||
             state.busyBatch ||
             state.items.length >= safeSessionLimit();
           elements.input.disabled = disabled;
@@ -957,7 +1011,7 @@
         async function initializeStandardHost() {
           try {
             const result = await rpcRequest("ui/initialize", {
-              appInfo: { name: "ProductMaker Meta upload", version: "1.0.0" },
+              appInfo: { name: "ProductMaker media upload", version: "1.0.0" },
               appCapabilities: {
                 availableDisplayModes: ["inline", "fullscreen"],
               },
@@ -1081,6 +1135,17 @@
           const sessionChanged =
             !state.session || state.session.sessionId !== session.sessionId;
           if (sessionChanged) {
+            abortActiveWork();
+            for (const item of state.items) revokePreviewUrl(item);
+            state.items = [];
+            state.assets = [];
+            state.consumedBridgeIds.clear();
+            state.consumingBridgeFiles = false;
+            state.bridgeConsumptionQueued = false;
+            state.ingestionQueue = Promise.resolve();
+            state.busyBatch = false;
+            elements.input.value = "";
+            renderItems();
             state.uploadBlocked = false;
             state.fallbackRequired = false;
             state.completionNotified = false;
@@ -1103,6 +1168,7 @@
             setSessionStatus("Sesión lista para recibir archivos.", "neutral");
           }
           setPickerAvailability();
+          renderCompletionAction();
           void consumePendingBridgeFiles();
           scheduleIntrinsicSizeReport(true);
         }
@@ -1113,6 +1179,15 @@
           const mediaKind = candidate.mediaKind;
           const assetRole = candidate.assetRole;
           const expiresAt = boundedString(candidate.expiresAt, 100);
+          const checkToolName = [
+            "check_media_upload",
+            "check_meta_media_upload",
+          ].includes(candidate.checkToolName)
+            ? candidate.checkToolName
+            : "check_meta_media_upload";
+          const resolveEndpoint =
+            boundedString(candidate.resolveEndpoint, 200) ||
+            "/api/meta-upload/resolve";
           if (!sessionId || !["image", "video", "mixed"].includes(mediaKind))
             return null;
           if (!["media", "thumbnail"].includes(assetRole)) return null;
@@ -1130,6 +1205,8 @@
             assetRole,
             maxFiles: candidate.maxFiles,
             expiresAt,
+            checkToolName,
+            resolveEndpoint,
           };
         }
 
@@ -1218,7 +1295,9 @@
               state.disposed ||
               !state.session ||
               sessionExpired() ||
-              state.uploadBlocked
+              state.uploadBlocked ||
+              state.completionNotified ||
+              state.completionNotificationInFlight
             )
               return;
             state.workCancelled = false;
@@ -1237,7 +1316,9 @@
               state.disposed ||
               !state.session ||
               sessionExpired() ||
-              state.uploadBlocked
+              state.uploadBlocked ||
+              state.completionNotified ||
+              state.completionNotificationInFlight
             )
               return;
             const bridge = openAiBridge();
@@ -1411,6 +1492,8 @@
             !state.session ||
             sessionExpired() ||
             state.uploadBlocked ||
+            state.completionNotified ||
+            state.completionNotificationInFlight ||
             state.busyBatch
           )
             return;
@@ -1430,7 +1513,10 @@
           if (!selected.length) return;
 
           state.busyBatch = true;
+          state.assets = [];
+          state.completionNotified = false;
           setPickerAvailability();
+          renderCompletionAction();
           for (const file of selected) {
             const mediaKind = mediaKindForType(file.type) || "image";
             const item = createItem(file, mediaKind);
@@ -1440,6 +1526,7 @@
           }
           state.busyBatch = false;
           setPickerAvailability();
+          renderCompletionAction();
           if (state.items.some((item) => item.status === "uploaded")) {
             await refreshSessionStatus();
           }
@@ -1458,7 +1545,7 @@
             attempts: 0,
             error: "",
             failureStage: "",
-            stagingAssetId: "",
+            assetId: "",
             previewUrl: "",
           };
         }
@@ -1756,7 +1843,7 @@
                   renderItems();
                 },
               );
-              item.stagingAssetId = resolved.stagingAssetId;
+              item.assetId = resolved.assetId;
               return;
             } catch (error) {
               if (error && error.message === "session_expired") throw error;
@@ -1777,14 +1864,16 @@
           const uploadPage = new URL(state.session.uploadPageUrl);
           if (!safeUploadPageUrl(uploadPage))
             throw new Error("unsafe_upload_page");
-          const token = uploadPage.searchParams.get("token");
+          const token =
+            uploadPage.searchParams.get("token") ||
+            new URLSearchParams(uploadPage.hash.slice(1)).get("token");
           if (!token) {
             const error = new Error("missing_token");
             error.safeStage = "resolve";
             throw error;
           }
           const resolveUrl = new URL(
-            "/api/meta-upload/resolve",
+            state.session.resolveEndpoint,
             uploadPage.origin,
           );
           const response = await fetch(resolveUrl.toString(), {
@@ -1812,14 +1901,17 @@
           const body = await response.json();
           if (!isRecord(body)) throw new Error("invalid_resolve_response");
           const uploadUrl = boundedString(body.uploadUrl, 3000);
-          const stagingAssetId = boundedString(body.stagingAssetId, 300);
+          const assetId = boundedString(
+            body.assetId || body.stagingAssetId,
+            300,
+          );
           const parsedUploadUrl = new URL(uploadUrl);
-          if (!safeWebProtocol(parsedUploadUrl) || !stagingAssetId) {
+          if (!safeWebProtocol(parsedUploadUrl) || !assetId) {
             const error = new Error("invalid_resolve_response");
             error.safeStage = "resolve";
             throw error;
           }
-          return { uploadUrl: parsedUploadUrl.toString(), stagingAssetId };
+          return { uploadUrl: parsedUploadUrl.toString(), assetId };
         }
 
         function createClientUuid() {
@@ -2085,6 +2177,7 @@
             fragment.append(card);
           });
           elements.fileList.replaceChildren(fragment);
+          renderCompletionAction();
           scheduleIntrinsicSizeReport(true);
         }
 
@@ -2098,13 +2191,21 @@
 
         async function refreshSessionStatus() {
           if (!state.session) return;
+          const requestedSessionId = state.session.sessionId;
           setSessionStatus("Comprobando el staging privado…", "neutral");
           try {
-            const result = await callReadOnlyTool("check_meta_media_upload", {
-              sessionId: state.session.sessionId,
+            const result = await callReadOnlyTool(state.session.checkToolName, {
+              sessionId: requestedSessionId,
             });
-            const status = parseStatusResult(result);
+            if (
+              state.disposed ||
+              !state.session ||
+              state.session.sessionId !== requestedSessionId
+            )
+              return;
+            const status = parseStatusResult(result, requestedSessionId);
             state.assets = status.assets;
+            renderCompletionAction();
             if (!status.assets.length) {
               if (status.legacyKindAmbiguous) {
                 requireFallback(
@@ -2138,7 +2239,6 @@
                 : "Carga completada.",
               partial ? "warning" : "success",
             );
-            await notifyChatUploadComplete();
           } catch (error) {
             const expired =
               sessionExpired() ||
@@ -2155,7 +2255,9 @@
         }
 
         async function callReadOnlyTool(name, args) {
-          if (name !== "check_meta_media_upload") {
+          if (
+            !["check_media_upload", "check_meta_media_upload"].includes(name)
+          ) {
             throw new Error("tool_not_allowed");
           }
           const bridge = openAiBridge();
@@ -2200,18 +2302,26 @@
           return parsed;
         }
 
-        function parseStatusResult(result) {
+        function parseStatusResult(result, expectedSessionId) {
           const payload = resultPayload(result);
+          if (
+            state.session.checkToolName === "check_meta_media_upload" &&
+            payload.sessionId !== expectedSessionId
+          )
+            throw new Error("status_session_mismatch");
           const status = payload.status;
           if (!["pending", "uploaded"].includes(status))
             throw new Error("invalid_status");
           const assets = Array.isArray(payload.assets)
             ? payload.assets.slice(0, MAX_FILES).flatMap((asset) => {
                 if (!isRecord(asset)) return [];
-                const stagingAssetId = boundedString(asset.stagingAssetId, 300);
+                const assetId = boundedString(
+                  asset.assetId || asset.stagingAssetId,
+                  300,
+                );
                 const mediaKind = asset.mediaKind;
-                return stagingAssetId && ["image", "video"].includes(mediaKind)
-                  ? [{ stagingAssetId, mediaKind }]
+                return assetId && ["image", "video"].includes(mediaKind)
+                  ? [{ assetId, mediaKind }]
                   : [];
               })
             : [];
@@ -2236,7 +2346,7 @@
                   : null;
             if (inferredMediaKind) {
               assets.push({
-                stagingAssetId: legacyStagingAssetId,
+                assetId: legacyStagingAssetId,
                 mediaKind: inferredMediaKind,
               });
             } else {
@@ -2253,38 +2363,79 @@
             !state.session
           )
             return;
+          const completionSessionId = state.session.sessionId;
           state.completionNotificationInFlight = true;
-          const message =
-            "Terminé de subir los archivos. Verifica esta misma sesión de carga y continúa en el chat: muéstrame las opciones disponibles y pregúntame por el portafolio, la cuenta publicitaria y la página de Meta. No publiques nada todavía.";
+          setPickerAvailability();
+          renderCompletionAction();
+          const assets = state.assets
+            .map((asset) => `${asset.mediaKind} asset_id ${asset.assetId}`)
+            .join(", ");
+          const metaGuard =
+            state.session.checkToolName === "check_meta_media_upload"
+              ? " Do not publish anything until you have asked me for the Meta portfolio, ad account, and Facebook Page."
+              : "";
+          const message = `The ProductMaker upload is complete. Continue my previous request using these uploaded assets: ${assets}. Do not ask me to upload them again.${metaGuard}`;
           try {
             const bridge = openAiBridge();
             if (bridge && typeof bridge.sendFollowUpMessage === "function") {
               await bridge.sendFollowUpMessage({ prompt: message });
+              if (
+                !state.session ||
+                state.session.sessionId !== completionSessionId
+              )
+                return;
               state.completionNotified = true;
+              setPickerAvailability();
+              renderCompletionAction();
               return;
             }
             if (state.hostCanMessage) {
-              await rpcRequest("ui/message", {
+              const messageResult = await rpcRequest("ui/message", {
                 role: "user",
                 content: [{ type: "text", text: message }],
               });
+              if (isRecord(messageResult) && messageResult.isError === true)
+                throw new Error("host_message_rejected");
+              if (
+                !state.session ||
+                state.session.sessionId !== completionSessionId
+              )
+                return;
               state.completionNotified = true;
+              setPickerAvailability();
+              renderCompletionAction();
               return;
             }
             setSessionStatus(
-              "Carga completada. Escribe “listo” en el chat para continuar.",
-              "success",
+              "La carga terminó, pero este host no puede continuar el chat desde el widget. Vuelve al chat para seguir.",
+              "warning",
             );
           } catch {
+            if (
+              !state.session ||
+              state.session.sessionId !== completionSessionId
+            )
+              return;
             setSessionStatus(
-              "Carga completada. Escribe “listo” en el chat para continuar.",
-              "success",
+              "No pudimos continuar el chat. Intenta nuevamente.",
+              "danger",
             );
           } finally {
-            state.completionNotificationInFlight = false;
+            if (
+              state.session &&
+              state.session.sessionId === completionSessionId
+            ) {
+              state.completionNotificationInFlight = false;
+              setPickerAvailability();
+              renderCompletionAction();
+            }
           }
         }
 
+        elements.completeButton.addEventListener("click", () => {
+          if (canCompleteUpload()) void notifyChatUploadComplete();
+        });
+
         document.addEventListener("DOMContentLoaded", initialize, {
           once: true,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@productmaker/mcp",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "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.",