@productmaker/mcp 2.9.2 → 2.9.4

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

@@ -66,21 +66,16 @@
       }
 
       button,
-      input,
-      select,
-      textarea {
+      input {
         font: inherit;
       }
 
       button,
-      select,
       a {
         -webkit-tap-highlight-color: transparent;
       }
 
       button:focus-visible,
-      select:focus-visible,
-      textarea:focus-visible,
       a:focus-visible,
       [tabindex]:focus-visible {
         outline: 3px solid
@@ -102,73 +97,10 @@
         box-shadow: var(--pm-shadow);
       }
 
-      .hero {
-        padding: 19px 22px 14px;
-        border-bottom: 1px solid
-          color-mix(in srgb, var(--pm-line) 65%, transparent);
-        background:
-          radial-gradient(
-            circle at 100% 0%,
-            var(--pm-primary-soft),
-            transparent 48%
-          ),
-          var(--pm-card);
-      }
-
-      .upload-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-      }
-
-      .upload-title {
-        min-width: 0;
-        margin: 0;
-        overflow: hidden;
-        font-size: clamp(17px, 3vw, 24px);
-        font-weight: 760;
-        letter-spacing: -0.025em;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .brand-mark {
+      .upload-feedback {
         display: grid;
-        width: 34px;
-        height: 34px;
-        flex: 0 0 auto;
-        place-items: center;
-        border: 1px solid
-          color-mix(in srgb, var(--pm-primary) 20%, var(--pm-line));
-        border-radius: 50%;
-        background: color-mix(
-          in srgb,
-          var(--pm-primary-soft) 70%,
-          var(--pm-card)
-        );
-        color: var(--pm-primary-strong);
-        font-size: 20px;
-        font-weight: 800;
-        line-height: 1;
-      }
-
-      .session-row {
-        display: flex;
-        min-height: 0;
-        align-items: center;
-        gap: 10px;
-        margin-top: 8px;
-      }
-
-      .session-id {
-        overflow: hidden;
-        max-width: 100%;
-        color: var(--pm-muted);
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 10px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        gap: 8px;
+        margin-top: 10px;
       }
 
       .fallback-link {
@@ -212,20 +144,23 @@
       }
 
       .section {
-        padding: 12px 22px 22px;
+        padding: 18px;
       }
 
-      .section + .section {
-        border-top: 1px solid var(--pm-line);
+      .media-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 12px;
+        align-items: start;
       }
 
       .dropzone {
         display: grid;
-        min-height: 260px;
+        aspect-ratio: 1;
+        min-width: 0;
         place-items: center;
-        padding: 20px;
         border: 2px dashed var(--pm-line);
-        border-radius: 21px;
+        border-radius: 16px;
         background: color-mix(
           in srgb,
           var(--pm-card-muted) 62%,
@@ -251,13 +186,11 @@
 
       .drop-trigger {
         display: grid;
-        width: min(100%, 280px);
-        min-height: 190px;
+        width: 100%;
+        height: 100%;
         place-items: center;
-        align-content: center;
-        gap: 16px;
         border: 0;
-        border-radius: 18px;
+        border-radius: 14px;
         background: transparent;
         color: var(--pm-text);
         cursor: pointer;
@@ -267,26 +200,29 @@
         cursor: not-allowed;
       }
 
-      .drop-icon {
-        display: grid;
-        width: 58px;
-        height: 58px;
-        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: 31px;
-        font-weight: 350;
+        font-size: 44px;
+        font-weight: 300;
         line-height: 1;
       }
 
-      .drop-title {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 520;
-        letter-spacing: -0.02em;
+      .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 {
@@ -309,47 +245,6 @@
         clip-path: inset(50%);
       }
 
-      .button {
-        display: inline-flex;
-        min-height: 42px;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 10px 16px;
-        border: 1px solid transparent;
-        border-radius: 12px;
-        background: var(--pm-primary);
-        color: #ffffff;
-        cursor: pointer;
-        font-size: 13px;
-        font-weight: 780;
-        line-height: 1;
-        transition:
-          background 140ms ease,
-          opacity 140ms ease,
-          transform 140ms ease;
-      }
-
-      .button:hover:not(:disabled) {
-        background: var(--pm-primary-strong);
-        transform: translateY(-1px);
-      }
-
-      .button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
-
-      .button.secondary {
-        border-color: var(--pm-line);
-        background: var(--pm-card);
-        color: var(--pm-text);
-      }
-
-      .button.secondary:hover:not(:disabled) {
-        background: var(--pm-card-muted);
-      }
-
       .batch-error {
         display: none;
         margin: 10px 0 0;
@@ -362,10 +257,7 @@
       }
 
       .file-list {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-        gap: 12px;
-        margin-top: 14px;
+        display: contents;
       }
 
       .file-card {
@@ -501,64 +393,11 @@
         transition: width 120ms linear;
       }
 
-      .destination-grid {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 9px;
-      }
-
-      .field {
-        display: grid;
-      }
-
-      select,
-      textarea {
-        width: 100%;
-        border: 1px solid var(--pm-line);
-        border-radius: 11px;
-        background: var(--pm-card);
-        color: var(--pm-text);
-      }
-
-      select {
-        min-height: 42px;
-        padding: 8px 30px 8px 10px;
-        font-size: 12px;
-      }
-
-      textarea {
-        min-height: 135px;
-        padding: 12px;
-        resize: vertical;
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 11px;
-        line-height: 1.5;
-      }
-
-      .destination-actions,
-      .handoff-actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin-top: 12px;
-      }
-
       .compatibility-control {
         /* Retained for older hosts; recovery is visible only through the secure fallback. */
         display: none !important;
       }
 
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-      }
-
       [hidden] {
         display: none !important;
       }
@@ -572,23 +411,13 @@
           border-radius: 20px;
         }
 
-        .hero,
         .section {
           padding-right: 14px;
           padding-left: 14px;
         }
 
-        .dropzone {
-          min-height: 230px;
-        }
-
-        .destination-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .destination-actions .button,
-        .handoff-actions .button {
-          width: 100%;
+        .media-grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
         }
       }
 
@@ -605,71 +434,46 @@
   <body>
     <main class="app" data-testid="meta-upload-root">
       <article class="card">
-        <header class="hero">
-          <div class="upload-header">
-            <p class="upload-title" data-testid="meta-upload-title">
-              Upload image
-            </p>
-            <span class="brand-mark" aria-label="ProductMaker" role="img"
-              >↗</span
-            >
-          </div>
-          <div class="session-row">
-            <code class="session-id" data-testid="meta-upload-session-id" hidden
-              >Esperando sesión…</code
-            >
-            <a
-              class="fallback-link"
-              data-testid="meta-upload-fallback-link"
-              href="#"
-              target="_blank"
-              rel="noopener noreferrer"
-              hidden
-              >Abrir carga segura en otra pestaña</a
-            >
-          </div>
-          <p
-            class="status"
-            data-testid="meta-upload-session-status"
-            aria-live="polite"
-          ></p>
-        </header>
-
         <section class="section" aria-label="Upload media">
-          <div
-            class="dropzone"
-            data-testid="meta-upload-dropzone"
-            data-dragging="false"
-            aria-disabled="true"
-            aria-describedby="meta-upload-constraints"
-          >
-            <button
-              class="drop-trigger"
-              type="button"
-              data-testid="meta-upload-picker-btn"
-              disabled
+          <div class="media-grid">
+            <div
+              class="file-list"
+              data-testid="meta-upload-file-list"
+              aria-live="polite"
+            ></div>
+            <div
+              class="dropzone"
+              data-testid="meta-upload-dropzone"
+              data-dragging="false"
+              aria-disabled="true"
+              aria-describedby="meta-upload-constraints"
             >
-              <span class="drop-icon" aria-hidden="true">+</span>
-              <span class="drop-title" data-testid="meta-upload-drop-title"
-                >Upload image</span
+              <button
+                class="drop-trigger"
+                type="button"
+                data-testid="meta-upload-add-tile"
+                aria-label="Agregar otro archivo"
+                disabled
               >
-            </button>
-            <button
-              class="compatibility-control"
-              type="button"
-              data-testid="meta-upload-library-btn"
-              hidden
-              disabled
-              aria-label="Choose from ChatGPT library"
-            ></button>
-            <input
-              class="native-input"
-              data-testid="meta-upload-input"
-              type="file"
-              accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime,video/webm"
-              multiple
-              disabled
-            />
+                <span class="add-symbol" aria-hidden="true">+</span>
+              </button>
+              <button
+                class="compatibility-control"
+                type="button"
+                data-testid="meta-upload-library-btn"
+                hidden
+                disabled
+                aria-label="Choose from ChatGPT library"
+              ></button>
+              <input
+                class="native-input"
+                data-testid="meta-upload-input"
+                type="file"
+                accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime,video/webm"
+                multiple
+                disabled
+              />
+            </div>
           </div>
           <p class="drop-help" id="meta-upload-constraints">
             JPEG, PNG, WebP, MP4, MOV o WebM. Hasta 10 archivos de 350 MB; las
@@ -681,77 +485,31 @@
             role="alert"
             aria-live="assertive"
           ></p>
-          <div
-            class="file-list"
-            data-testid="meta-upload-file-list"
-            aria-live="polite"
-          ></div>
-        </section>
-
-        <section
-          class="section"
-          data-testid="meta-upload-destination-section"
-          aria-label="Meta destination"
-          hidden
-        >
-          <div class="destination-grid">
-            <div class="field">
-              <label class="sr-only" for="portfolio-select">Portfolio</label>
-              <select
-                id="portfolio-select"
-                data-testid="meta-upload-portfolio-select"
-              >
-                <option value="">Portfolio</option>
-              </select>
-            </div>
-            <div class="field">
-              <label class="sr-only" for="ad-account-select">Ad account</label>
-              <select
-                id="ad-account-select"
-                data-testid="meta-upload-ad-account-select"
-                disabled
-              >
-                <option value="">Ad account</option>
-              </select>
-            </div>
-            <div class="field">
-              <label class="sr-only" for="page-select">Facebook Page</label>
-              <select id="page-select" data-testid="meta-upload-page-select">
-                <option value="">Facebook Page</option>
-              </select>
-            </div>
-          </div>
-          <div class="destination-actions">
-            <button
-              class="button"
-              type="button"
-              data-testid="meta-upload-submit-destination"
-              disabled
-            >
-              Continue
-            </button>
-          </div>
-        </section>
-
-        <section
-          class="section"
-          data-testid="meta-upload-handoff-section"
-          aria-labelledby="handoff-heading"
-          hidden
-        >
-          <p id="handoff-heading" class="section-copy muted">
-            Copy this handoff into the chat.
-          </p>
-          <textarea data-testid="meta-upload-handoff-copy" readonly></textarea>
-          <div class="handoff-actions">
-            <button
-              class="button secondary"
-              type="button"
-              data-testid="meta-upload-copy-btn"
+          <div class="upload-feedback">
+            <a
+              class="fallback-link"
+              data-testid="meta-upload-fallback-link"
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              hidden
+              >Abrir carga segura en otra pestaña</a
             >
-              Copy handoff
-            </button>
+            <p
+              class="status"
+              data-testid="meta-upload-session-status"
+              aria-live="polite"
+            ></p>
           </div>
+          <button
+            class="complete-button"
+            type="button"
+            data-testid="meta-upload-complete-btn"
+            hidden
+            disabled
+          >
+            OK
+          </button>
         </section>
       </article>
     </main>
@@ -788,10 +546,6 @@
 
         const elements = {
           root: document.querySelector('[data-testid="meta-upload-root"]'),
-          title: document.querySelector('[data-testid="meta-upload-title"]'),
-          sessionId: document.querySelector(
-            '[data-testid="meta-upload-session-id"]',
-          ),
           fallbackLink: document.querySelector(
             '[data-testid="meta-upload-fallback-link"]',
           ),
@@ -801,11 +555,8 @@
           dropzone: document.querySelector(
             '[data-testid="meta-upload-dropzone"]',
           ),
-          dropTitle: document.querySelector(
-            '[data-testid="meta-upload-drop-title"]',
-          ),
           pickerButton: document.querySelector(
-            '[data-testid="meta-upload-picker-btn"]',
+            '[data-testid="meta-upload-add-tile"]',
           ),
           libraryPickerButton: document.querySelector(
             '[data-testid="meta-upload-library-btn"]',
@@ -814,33 +565,12 @@
           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"]',
           ),
-          destinationSection: document.querySelector(
-            '[data-testid="meta-upload-destination-section"]',
-          ),
-          portfolio: document.querySelector(
-            '[data-testid="meta-upload-portfolio-select"]',
-          ),
-          adAccount: document.querySelector(
-            '[data-testid="meta-upload-ad-account-select"]',
-          ),
-          page: document.querySelector(
-            '[data-testid="meta-upload-page-select"]',
-          ),
-          submitDestination: document.querySelector(
-            '[data-testid="meta-upload-submit-destination"]',
-          ),
-          handoffSection: document.querySelector(
-            '[data-testid="meta-upload-handoff-section"]',
-          ),
-          handoffCopy: document.querySelector(
-            '[data-testid="meta-upload-handoff-copy"]',
-          ),
-          copyButton: document.querySelector(
-            '[data-testid="meta-upload-copy-btn"]',
-          ),
         };
 
         const state = {
@@ -859,7 +589,8 @@
           toolInput: {},
           items: [],
           assets: [],
-          destinations: { portfolios: [], adAccounts: [], pages: [] },
+          completionNotified: false,
+          completionNotificationInFlight: false,
           consumedBridgeIds: new Set(),
           consumingBridgeFiles: false,
           bridgeConsumptionQueued: false,
@@ -907,29 +638,6 @@
           return null;
         }
 
-        function defaultUploadTitle() {
-          return state.session?.mediaKind === "video"
-            ? "Upload video"
-            : "Upload image";
-        }
-
-        function updateUploadTitle() {
-          const namedItems = state.items.filter(
-            (item) =>
-              (item.file && typeof item.file.name === "string") ||
-              (typeof item.displayName === "string" &&
-                item.displayName.length > 0),
-          );
-          const title =
-            namedItems.length === 1
-              ? namedItems[0].file?.name || namedItems[0].displayName
-              : namedItems.length > 1
-                ? `${namedItems.length} files`
-                : defaultUploadTitle();
-          elements.title.textContent = title;
-          elements.dropTitle.textContent = defaultUploadTitle();
-        }
-
         function safeSessionLimit() {
           const proposed =
             state.session && Number.isInteger(state.session.maxFiles)
@@ -955,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) &&
@@ -1173,6 +913,8 @@
             !state.session ||
             sessionExpired() ||
             state.uploadBlocked ||
+            state.completionNotified ||
+            state.completionNotificationInFlight ||
             state.busyBatch ||
             state.items.length >= safeSessionLimit();
           elements.input.disabled = disabled;
@@ -1262,24 +1004,6 @@
             void processLocalFiles(files);
           });
 
-          elements.portfolio.addEventListener("change", () => {
-            renderAdAccounts();
-            updateDestinationSubmit();
-          });
-          elements.adAccount.addEventListener(
-            "change",
-            updateDestinationSubmit,
-          );
-          elements.page.addEventListener("change", updateDestinationSubmit);
-          elements.submitDestination.addEventListener(
-            "click",
-            () => void submitDestination(),
-          );
-          elements.copyButton.addEventListener(
-            "click",
-            () => void copyHandoff(),
-          );
-
           state.hostMessageHandler = handleHostMessage;
           window.addEventListener("message", state.hostMessageHandler);
         }
@@ -1411,17 +1135,28 @@
           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;
+            state.completionNotificationInFlight = false;
             state.workCancelled = false;
             if (state.abortController?.signal.aborted) {
               state.abortController = null;
             }
           }
           state.session = session;
-          elements.sessionId.textContent = session.sessionId;
           elements.fallbackLink.href = session.uploadPageUrl;
-          updateUploadTitle();
           if (sessionExpired()) {
             requireFallback(
               "La sesión está expirada. Abre el enlace seguro para solicitar una nueva.",
@@ -1433,6 +1168,7 @@
             setSessionStatus("Sesión lista para recibir archivos.", "neutral");
           }
           setPickerAvailability();
+          renderCompletionAction();
           void consumePendingBridgeFiles();
           scheduleIntrinsicSizeReport(true);
         }
@@ -1548,7 +1284,9 @@
               state.disposed ||
               !state.session ||
               sessionExpired() ||
-              state.uploadBlocked
+              state.uploadBlocked ||
+              state.completionNotified ||
+              state.completionNotificationInFlight
             )
               return;
             state.workCancelled = false;
@@ -1567,7 +1305,9 @@
               state.disposed ||
               !state.session ||
               sessionExpired() ||
-              state.uploadBlocked
+              state.uploadBlocked ||
+              state.completionNotified ||
+              state.completionNotificationInFlight
             )
               return;
             const bridge = openAiBridge();
@@ -1741,6 +1481,8 @@
             !state.session ||
             sessionExpired() ||
             state.uploadBlocked ||
+            state.completionNotified ||
+            state.completionNotificationInFlight ||
             state.busyBatch
           )
             return;
@@ -1760,7 +1502,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);
@@ -1770,6 +1515,7 @@
           }
           state.busyBatch = false;
           setPickerAvailability();
+          renderCompletionAction();
           if (state.items.some((item) => item.status === "uploaded")) {
             await refreshSessionStatus();
           }
@@ -2415,7 +2161,7 @@
             fragment.append(card);
           });
           elements.fileList.replaceChildren(fragment);
-          updateUploadTitle();
+          renderCompletionAction();
           scheduleIntrinsicSizeReport(true);
         }
 
@@ -2429,13 +2175,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,
+              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(
@@ -2448,7 +2202,6 @@
                   "warning",
                 );
               }
-              elements.destinationSection.hidden = true;
               return;
             }
 
@@ -2467,15 +2220,9 @@
             setSessionStatus(
               partial
                 ? "Carga parcial verificada. Continuaremos solo con los assets listos."
-                : "Carga verificada. Elige ahora el destino de Meta.",
+                : "Carga completada.",
               partial ? "warning" : "success",
             );
-            const destinationsResult = await callReadOnlyTool(
-              "list_meta_destinations",
-              {},
-            );
-            state.destinations = parseDestinationsResult(destinationsResult);
-            renderDestinations();
           } catch (error) {
             const expired =
               sessionExpired() ||
@@ -2492,11 +2239,7 @@
         }
 
         async function callReadOnlyTool(name, args) {
-          if (
-            !["check_meta_media_upload", "list_meta_destinations"].includes(
-              name,
-            )
-          ) {
+          if (name !== "check_meta_media_upload") {
             throw new Error("tool_not_allowed");
           }
           const bridge = openAiBridge();
@@ -2541,8 +2284,10 @@
           return parsed;
         }
 
-        function parseStatusResult(result) {
+        function parseStatusResult(result, expectedSessionId) {
           const payload = resultPayload(result);
+          if (payload.sessionId !== expectedSessionId)
+            throw new Error("status_session_mismatch");
           const status = payload.status;
           if (!["pending", "uploaded"].includes(status))
             throw new Error("invalid_status");
@@ -2587,175 +2332,84 @@
           return { status, assets, legacyKindAmbiguous };
         }
 
-        function parseDestinationsResult(result) {
-          const payload = resultPayload(result);
-          return {
-            portfolios: parseDestinationList(payload.portfolios, (entry) => ({
-              id: boundedString(entry.id, 300),
-              name: boundedString(entry.name, 300) || "Portfolio sin nombre",
-            })),
-            adAccounts: parseDestinationList(payload.adAccounts, (entry) => ({
-              id: boundedString(entry.id, 300),
-              name: boundedString(entry.name, 300) || "Cuenta sin nombre",
-              currency: boundedString(entry.currency, 20),
-              portfolioId: boundedString(entry.portfolioId, 300),
-              accountStatus: Number(entry.accountStatus),
-            })).filter(
-              (entry) => entry.portfolioId && entry.accountStatus === 1,
-            ),
-            pages: parseDestinationList(payload.pages, (entry) => ({
-              id: boundedString(entry.id, 300),
-              name: boundedString(entry.name, 300) || "Página sin nombre",
-            })),
-          };
-        }
-
-        function parseDestinationList(value, mapper) {
-          if (!Array.isArray(value)) return [];
-          return value.slice(0, 1000).flatMap((entry) => {
-            if (!isRecord(entry)) return [];
-            const mapped = mapper(entry);
-            return mapped.id ? [mapped] : [];
-          });
-        }
-
-        function renderDestinations() {
-          fillSelect(
-            elements.portfolio,
-            state.destinations.portfolios,
-            "Portfolio",
-            (entry) => entry.name,
-          );
-          fillSelect(
-            elements.page,
-            state.destinations.pages,
-            "Facebook Page",
-            (entry) => entry.name,
-          );
-          renderAdAccounts();
-          elements.destinationSection.hidden = false;
-          updateDestinationSubmit();
-          scheduleIntrinsicSizeReport(true);
-        }
-
-        function renderAdAccounts() {
-          const portfolioId = elements.portfolio.value;
-          const accounts = portfolioId
-            ? state.destinations.adAccounts.filter(
-                (account) => account.portfolioId === portfolioId,
-              )
-            : [];
-          fillSelect(
-            elements.adAccount,
-            accounts,
-            portfolioId ? "Ad account" : "Ad account",
-            (entry) =>
-              `${entry.name}${entry.currency ? ` · ${entry.currency}` : ""}`,
-          );
-          elements.adAccount.disabled = !portfolioId || !accounts.length;
-        }
-
-        function fillSelect(select, entries, placeholder, labelFor) {
-          const fragment = document.createDocumentFragment();
-          const empty = document.createElement("option");
-          empty.value = "";
-          empty.textContent = placeholder;
-          fragment.append(empty);
-          for (const entry of entries) {
-            const option = document.createElement("option");
-            option.value = entry.id;
-            option.textContent = labelFor(entry);
-            fragment.append(option);
-          }
-          select.replaceChildren(fragment);
-          select.value = "";
-        }
-
-        function updateDestinationSubmit() {
-          elements.submitDestination.disabled = !(
-            elements.portfolio.value &&
-            elements.adAccount.value &&
-            elements.page.value &&
-            state.assets.length
-          );
-        }
-
-        function exactHandoff() {
-          return JSON.stringify({
-            sessionId: state.session.sessionId,
-            portfolioId: elements.portfolio.value,
-            adAccountId: elements.adAccount.value,
-            pageId: elements.page.value,
-            assets: state.assets.slice(0, MAX_FILES).map((asset) => ({
-              stagingAssetId: asset.stagingAssetId,
-              mediaKind: asset.mediaKind,
-            })),
-          });
-        }
-
-        async function submitDestination() {
-          if (elements.submitDestination.disabled || !state.session) return;
-          const handoff = exactHandoff();
-          elements.submitDestination.disabled = true;
+        async function notifyChatUploadComplete() {
+          if (
+            state.completionNotified ||
+            state.completionNotificationInFlight ||
+            !state.session
+          )
+            return;
+          const completionSessionId = state.session.sessionId;
+          state.completionNotificationInFlight = true;
+          setPickerAvailability();
+          renderCompletionAction();
+          const assets = state.assets
+            .map(
+              (asset) => `${asset.mediaKind} asset_id ${asset.stagingAssetId}`,
+            )
+            .join(", ");
+          const message = `The ProductMaker upload is complete. Continue my previous request using these uploaded assets: ${assets}. Do not ask me to upload them again. Do not publish anything until you have asked me for the Meta portfolio, ad account, and Facebook Page.`;
           try {
             const bridge = openAiBridge();
             if (bridge && typeof bridge.sendFollowUpMessage === "function") {
-              await bridge.sendFollowUpMessage({ prompt: handoff });
-              setSessionStatus(
-                "Selección enviada al chat. Espera la confirmación antes de continuar.",
-                "success",
-              );
+              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: handoff }],
+                content: [{ type: "text", text: message }],
               });
-              setSessionStatus(
-                "Selección enviada al chat. Espera la confirmación antes de continuar.",
-                "success",
-              );
+              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;
             }
-            showCopyableHandoff(handoff);
+            setSessionStatus(
+              "La carga terminó, pero este host no puede continuar el chat desde el widget. Vuelve al chat para seguir.",
+              "warning",
+            );
           } catch {
-            showCopyableHandoff(handoff);
-          } finally {
-            updateDestinationSubmit();
-          }
-        }
-
-        function showCopyableHandoff(handoff) {
-          elements.handoffCopy.value = handoff;
-          elements.handoffSection.hidden = false;
-          setSessionStatus(
-            "Copia el handoff exacto y pégalo en el chat.",
-            "warning",
-          );
-          scheduleIntrinsicSizeReport(true);
-        }
-
-        async function copyHandoff() {
-          const handoff = elements.handoffCopy.value;
-          if (!handoff) return;
-          if (
-            navigator.clipboard &&
-            typeof navigator.clipboard.writeText === "function"
-          ) {
-            try {
-              await navigator.clipboard.writeText(handoff);
-              elements.copyButton.textContent = "Copiado";
+            if (
+              !state.session ||
+              state.session.sessionId !== completionSessionId
+            )
               return;
-            } catch {
-              // Selection fallback below.
+            setSessionStatus(
+              "No pudimos continuar el chat. Intenta nuevamente.",
+              "danger",
+            );
+          } finally {
+            if (
+              state.session &&
+              state.session.sessionId === completionSessionId
+            ) {
+              state.completionNotificationInFlight = false;
+              setPickerAvailability();
+              renderCompletionAction();
             }
           }
-          elements.handoffCopy.focus();
-          elements.handoffCopy.select();
-          elements.copyButton.textContent = "Seleccionado para copiar";
         }
 
+        elements.completeButton.addEventListener("click", () => {
+          if (canCompleteUpload()) void notifyChatUploadComplete();
+        });
+
         document.addEventListener("DOMContentLoaded", initialize, {
           once: true,
         });