@productmaker/mcp 12.0.3 → 12.1.1

package/dist/ui/task-results-app.html

@@ -0,0 +1,398 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Your creative · ProductMaker</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+        color: #202635;
+        background: #fff;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+      }
+      main {
+        max-width: 760px;
+        margin: auto;
+        padding: 18px;
+      }
+      h1 {
+        margin: 0 0 12px;
+        font-size: 18px;
+        font-weight: 650;
+      }
+      #status {
+        margin: 0;
+        color: #657083;
+        font-size: 14px;
+        line-height: 1.5;
+      }
+      #media {
+        display: grid;
+        gap: 18px;
+      }
+      figure {
+        margin: 0;
+        min-width: 0;
+      }
+      img,
+      video {
+        display: block;
+        width: 100%;
+        max-height: 640px;
+        object-fit: contain;
+        border-radius: 12px;
+        background: #f3f4f6;
+      }
+      img[hidden],
+      video[hidden],
+      p[hidden] {
+        display: none;
+      }
+      figcaption {
+        margin-top: 9px;
+        font-size: 13px;
+      }
+      a {
+        color: #5140cf;
+        text-underline-offset: 3px;
+      }
+      a:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 4px;
+      }
+      .fallback {
+        color: #657083;
+        line-height: 1.5;
+        font-size: 14px;
+      }
+      ul {
+        padding-left: 20px;
+        margin: 0;
+        line-height: 1.8;
+      }
+      @media (max-width: 420px) {
+        main {
+          padding: 12px;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color: #f2f4f8;
+          background: #17191f;
+        }
+        #status,
+        .fallback {
+          color: #b5becd;
+        }
+        img,
+        video {
+          background: #222630;
+        }
+        a {
+          color: #b6aaff;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main data-testid="task-results-root" data-state="loading" aria-busy="true">
+      <h1>Your creative</h1>
+      <p id="status" role="status" aria-live="polite">Loading your result…</p>
+      <div id="media"></div>
+    </main>
+    <script>
+      (() => {
+        "use strict";
+        const assetOrigin = __PRODUCTMAKER_ASSET_ORIGIN__;
+        const root = document.querySelector("main");
+        const status = document.getElementById("status");
+        const media = document.getElementById("media");
+        let receivedResult = false;
+        let hostReady = false;
+        let disposed = false;
+        const isRecord = (value) =>
+          value !== null && typeof value === "object" && !Array.isArray(value);
+        const safeUrl = (value) => {
+          if (typeof value !== "string") return null;
+          try {
+            const url = new URL(value);
+            return url.protocol === "https:" &&
+              url.origin === assetOrigin &&
+              url.pathname.startsWith("/assets/") &&
+              url.pathname.length > "/assets/".length &&
+              !url.username &&
+              !url.password
+              ? url.href
+              : null;
+          } catch {
+            return null;
+          }
+        };
+        const notify = (method, params) => {
+          if (!disposed)
+            window.parent.postMessage({ jsonrpc: "2.0", method, params }, "*");
+        };
+        const reportSize = () => {
+          if (disposed) return;
+          // Measure content, not the host's previous iframe height, so errors
+          // and smaller follow-up results can shrink instead of keeping a gap.
+          const height = Math.ceil(root.getBoundingClientRect().height);
+          if (hostReady) notify("ui/notifications/size-changed", { height });
+          if (typeof window.openai?.notifyIntrinsicHeight === "function")
+            window.openai.notifyIntrinsicHeight(height);
+        };
+        function cleanupMedia() {
+          media.querySelectorAll("video").forEach((video) => {
+            video.pause();
+            video.removeAttribute("src");
+            video.load();
+          });
+          media.replaceChildren();
+        }
+        function setState(state, message) {
+          root.dataset.state = state;
+          root.setAttribute(
+            "aria-busy",
+            state === "loading" ? "true" : "false",
+          );
+          status.textContent = message;
+          status.hidden = !message;
+          cleanupMedia();
+        }
+        function download(url, label, testId) {
+          const link = document.createElement("a");
+          link.href = url;
+          link.textContent = label;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          link.dataset.testid = testId;
+          return link;
+        }
+        function addMedia(item, kind, index) {
+          const figure = document.createElement("figure");
+          const element = document.createElement(kind);
+          element.src = item.url;
+          element.dataset.testid = `task-results-${kind}-${index}`;
+          if (kind === "img")
+            element.alt =
+              typeof item.alt === "string"
+                ? item.alt.slice(0, 160)
+                : "Ad creative";
+          else {
+            element.setAttribute(
+              "aria-label",
+              typeof item.label === "string"
+                ? item.label.slice(0, 120)
+                : "ProductMaker video",
+            );
+            element.controls = true;
+            element.preload = "metadata";
+            element.playsInline = true;
+          }
+          const fallback = document.createElement("p");
+          fallback.className = "fallback";
+          fallback.hidden = true;
+          fallback.textContent =
+            "Preview unavailable. Ask ChatGPT to show it again for a fresh link, or try the download link.";
+          element.addEventListener("error", () => {
+            element.hidden = true;
+            fallback.hidden = false;
+            reportSize();
+          });
+          element.addEventListener("load", reportSize);
+          element.addEventListener("loadedmetadata", reportSize);
+          const caption = document.createElement("figcaption");
+          caption.append(
+            download(
+              item.url,
+              kind === "img" ? "Download image" : "Download video",
+              `task-results-download-${kind}-${index}`,
+            ),
+          );
+          figure.append(element, fallback, caption);
+          if (kind === "video" && item.scriptRewritten === true) {
+            const warning = document.createElement("p");
+            warning.dataset.testid = `task-results-script-warning-${index}`;
+            warning.textContent =
+              "This video uses a revised script instead of the one you approved.";
+            figure.append(warning);
+          }
+          media.append(figure);
+        }
+        function entries(value) {
+          return Array.isArray(value)
+            ? value.filter(isRecord).flatMap((item) => {
+                const url = safeUrl(item.url);
+                return url
+                  ? [
+                      {
+                        url,
+                        alt: item.alt,
+                        label: item.label,
+                        ...(item.scriptRewritten === true
+                          ? { scriptRewritten: true }
+                          : {}),
+                      },
+                    ]
+                  : [];
+              })
+            : [];
+        }
+        function applyResult(result) {
+          if (disposed) return;
+          receivedResult = true;
+          window.clearTimeout(resultTimeout);
+          const metadata =
+            isRecord(result) && isRecord(result._meta) ? result._meta : null;
+          const data = metadata?.taskResults;
+          if (
+            !isRecord(result) ||
+            result.isError ||
+            !isRecord(data) ||
+            !["ready", "empty", "pending", "awaiting_review", "error"].includes(
+              data.state,
+            )
+          ) {
+            setState(
+              "error",
+              "We couldn't load this result. Ask ChatGPT to show it again.",
+            );
+            reportSize();
+            return;
+          }
+          if (data.state === "awaiting_review") {
+            setState(
+              data.state,
+              "Your approval is needed. Reply in the chat to continue.",
+            );
+            reportSize();
+            return;
+          }
+          if (data.state === "pending" || data.state === "error") {
+            setState(
+              data.state,
+              data.state === "pending"
+                ? "Your creative is still being prepared. Ask ChatGPT to check its progress."
+                : "This task couldn't deliver a result. Ask ChatGPT to check its status.",
+            );
+            reportSize();
+            return;
+          }
+          const images = entries(data.images);
+          const videos = entries(data.videos);
+          const links = entries(data.links);
+          if (
+            data.state === "empty" ||
+            !(images.length || videos.length || links.length)
+          ) {
+            setState(
+              "empty",
+              "No preview is available here. Your result can still be opened in ProductMaker.",
+            );
+          } else {
+            setState("ready", "");
+            images.forEach((item, index) => addMedia(item, "img", index));
+            videos.forEach((item, index) => addMedia(item, "video", index));
+            if (links.length) {
+              const list = document.createElement("ul");
+              links.forEach((item, index) => {
+                const row = document.createElement("li");
+                row.append(
+                  download(
+                    item.url,
+                    typeof item.label === "string"
+                      ? item.label.slice(0, 120)
+                      : "Open result",
+                    `task-results-link-${index}`,
+                  ),
+                );
+                list.append(row);
+              });
+              media.append(list);
+            }
+          }
+          reportSize();
+        }
+        function handleMessage(event) {
+          if (
+            event.source !== window.parent ||
+            !isRecord(event.data) ||
+            disposed
+          )
+            return;
+          const message = event.data;
+          if (message.method === "ui/resource-teardown") {
+            cleanupMedia();
+            window.clearTimeout(initializeTimeout);
+            window.clearTimeout(resultTimeout);
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("openai:set_globals", handleGlobals);
+            window.removeEventListener("resize", reportSize);
+            if (Object.prototype.hasOwnProperty.call(message, "id")) {
+              window.parent.postMessage(
+                { jsonrpc: "2.0", id: message.id, result: {} },
+                "*",
+              );
+            }
+            disposed = true;
+          } else if (message.id === 1) {
+            window.clearTimeout(initializeTimeout);
+            if (message.error) {
+              if (!receivedResult) applyResult({ isError: true });
+            } else {
+              hostReady = true;
+              notify("ui/notifications/initialized", {});
+              reportSize();
+            }
+          } else if (message.method === "ui/notifications/tool-result")
+            applyResult(message.params);
+          else if (message.method === "ui/notifications/tool-cancelled")
+            applyResult({ isError: true });
+        }
+        function handleGlobals(event) {
+          const globals = event.detail?.globals;
+          if (
+            isRecord(globals) &&
+            Object.prototype.hasOwnProperty.call(
+              globals,
+              "toolResponseMetadata",
+            )
+          )
+            applyResult({ _meta: globals.toolResponseMetadata });
+        }
+        const resultTimeout = window.setTimeout(() => {
+          if (!receivedResult) applyResult({ isError: true });
+        }, 10000);
+        const initializeTimeout = window.setTimeout(() => {
+          if (!receivedResult) applyResult({ isError: true });
+        }, 8000);
+        window.addEventListener("message", handleMessage);
+        window.addEventListener("openai:set_globals", handleGlobals);
+        window.addEventListener("resize", reportSize);
+        window.parent.postMessage(
+          {
+            jsonrpc: "2.0",
+            id: 1,
+            method: "ui/initialize",
+            params: {
+              appInfo: { name: "ProductMaker task results", version: "1.0.0" },
+              appCapabilities: { availableDisplayModes: ["inline"] },
+              protocolVersion: "2026-01-26",
+            },
+          },
+          "*",
+        );
+        if (isRecord(window.openai?.toolResponseMetadata))
+          applyResult({ _meta: window.openai.toolResponseMetadata });
+      })();
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@productmaker/mcp",
-  "version": "12.0.3",
+  "version": "12.1.1",
   "type": "module",
   "private": false,
   "description": "ProductMaker MCP server — cost products, generate landing pages, UGC videos, and ad creatives, and publish to Shopify, Meta Ads, and TikTok Ads.",
@@ -74,7 +74,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup && mkdir -p dist/ui && cp src/ui/meta-upload-app.html dist/ui/meta-upload-app.html",
+    "build": "tsup && mkdir -p dist/ui && cp src/ui/*.html dist/ui/",
     "dev:stdio": "tsx src/stdio.ts",
     "dev:http": "tsx src/http.ts",
     "test": "vitest run",