@productmaker/mcp 2.8.3 → 2.9.1

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

@@ -91,120 +91,102 @@
       .app {
         width: min(100%, 760px);
         margin: 0 auto;
-        padding: 18px;
+        padding: 12px;
       }
 
       .card {
         overflow: hidden;
         border: 1px solid var(--pm-line);
-        border-radius: 24px;
+        border-radius: 26px;
         background: var(--pm-card);
         box-shadow: var(--pm-shadow);
       }
 
-      .hero,
-      .section {
-        padding: 22px;
-      }
-
       .hero {
-        border-bottom: 1px solid var(--pm-line);
+        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 42%
+            transparent 48%
           ),
           var(--pm-card);
       }
 
-      .eyebrow {
-        display: inline-flex;
+      .upload-header {
+        display: flex;
         align-items: center;
-        gap: 7px;
-        margin: 0 0 10px;
-        color: var(--pm-primary-strong);
-        font-size: 12px;
-        font-weight: 800;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-
-      .eyebrow-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 999px;
-        background: var(--pm-primary);
-        box-shadow: 0 0 0 5px var(--pm-primary-soft);
-      }
-
-      h1,
-      h2,
-      p {
-        margin-top: 0;
-      }
-
-      h1 {
-        margin-bottom: 8px;
-        font-size: clamp(23px, 5vw, 34px);
-        line-height: 1.12;
-        letter-spacing: -0.03em;
-      }
-
-      h2 {
-        margin-bottom: 6px;
-        font-size: 18px;
+        justify-content: space-between;
+        gap: 12px;
       }
 
-      .muted {
-        color: var(--pm-muted);
+      .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;
       }
 
-      .hero-copy,
-      .section-copy {
-        margin-bottom: 0;
-        font-size: 14px;
-        line-height: 1.55;
+      .brand-mark {
+        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;
-        flex-wrap: wrap;
+        min-height: 0;
         align-items: center;
-        gap: 8px 12px;
-        margin-top: 16px;
+        gap: 10px;
+        margin-top: 8px;
       }
 
       .session-id {
         overflow: hidden;
         max-width: 100%;
-        padding: 7px 10px;
-        border-radius: 9px;
-        background: var(--pm-card-muted);
         color: var(--pm-muted);
         font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 11px;
+        font-size: 10px;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .fallback-link {
         color: var(--pm-primary-strong);
-        font-size: 13px;
-        font-weight: 750;
+        font-size: 12px;
+        font-weight: 760;
         text-decoration-thickness: 1px;
         text-underline-offset: 3px;
       }
 
       .status {
         display: none;
-        margin: 14px 0 0;
-        padding: 10px 12px;
-        border-radius: 12px;
-        background: var(--pm-card-muted);
+        margin: 10px 0 0;
+        padding: 9px 11px;
+        border-radius: 11px;
         color: var(--pm-muted);
-        font-size: 13px;
-        line-height: 1.45;
+        font-size: 12px;
+        line-height: 1.4;
       }
 
       .status[data-tone="success"] {
@@ -226,7 +208,11 @@
       }
 
       .status[data-tone="neutral"] {
-        display: block;
+        display: none;
+      }
+
+      .section {
+        padding: 12px 22px 22px;
       }
 
       .section + .section {
@@ -235,12 +221,16 @@
 
       .dropzone {
         display: grid;
-        min-height: 190px;
+        min-height: 260px;
         place-items: center;
-        padding: 24px;
+        padding: 20px;
         border: 2px dashed var(--pm-line);
-        border-radius: 18px;
-        background: var(--pm-card-muted);
+        border-radius: 21px;
+        background: color-mix(
+          in srgb,
+          var(--pm-card-muted) 62%,
+          var(--pm-card)
+        );
         text-align: center;
         transition:
           border-color 160ms ease,
@@ -259,31 +249,54 @@
         opacity: 0.65;
       }
 
+      .drop-trigger {
+        display: grid;
+        width: min(100%, 280px);
+        min-height: 190px;
+        place-items: center;
+        align-content: center;
+        gap: 16px;
+        border: 0;
+        border-radius: 18px;
+        background: transparent;
+        color: var(--pm-text);
+        cursor: pointer;
+      }
+
+      .drop-trigger:disabled {
+        cursor: not-allowed;
+      }
+
       .drop-icon {
         display: grid;
-        width: 48px;
-        height: 48px;
-        margin: 0 auto 12px;
+        width: 58px;
+        height: 58px;
         place-items: center;
-        border-radius: 15px;
-        background: var(--pm-primary-soft);
-        color: var(--pm-primary-strong);
-        font-size: 24px;
-        font-weight: 800;
+        border: 1px solid var(--pm-line);
+        border-radius: 50%;
+        background: var(--pm-card);
+        box-shadow: 0 7px 20px rgb(27 36 66 / 8%);
+        color: var(--pm-text);
+        font-size: 31px;
+        font-weight: 350;
+        line-height: 1;
       }
 
       .drop-title {
-        margin-bottom: 6px;
-        font-size: 16px;
-        font-weight: 780;
+        margin: 0;
+        font-size: 18px;
+        font-weight: 520;
+        letter-spacing: -0.02em;
       }
 
       .drop-help {
-        max-width: 490px;
-        margin: 0 auto 15px;
-        color: var(--pm-muted);
-        font-size: 12px;
-        line-height: 1.5;
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
       }
 
       .native-input {
@@ -337,17 +350,11 @@
         background: var(--pm-card-muted);
       }
 
-      .button.danger {
-        border-color: color-mix(in srgb, var(--pm-danger) 25%, var(--pm-line));
-        background: transparent;
-        color: var(--pm-danger);
-      }
-
       .batch-error {
         display: none;
-        margin: 12px 0 0;
+        margin: 10px 0 0;
         color: var(--pm-danger);
-        font-size: 13px;
+        font-size: 12px;
       }
 
       .batch-error:not(:empty) {
@@ -356,85 +363,134 @@
 
       .file-list {
         display: grid;
-        gap: 10px;
-        margin-top: 16px;
+        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+        gap: 12px;
+        margin-top: 14px;
       }
 
       .file-card {
-        padding: 13px;
-        border: 1px solid var(--pm-line);
-        border-radius: 15px;
-        background: var(--pm-card);
+        min-width: 0;
+        background: transparent;
       }
 
-      .file-head,
-      .file-actions,
-      .file-meta {
-        display: flex;
-        align-items: center;
+      .file-preview {
+        position: relative;
+        aspect-ratio: 1;
+        overflow: hidden;
+        border: 1px solid var(--pm-line);
+        border-radius: 16px;
+        background: var(--pm-card-muted);
       }
 
-      .file-head {
-        justify-content: space-between;
-        gap: 12px;
+      .file-preview img,
+      .video-preview {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
 
-      .file-meta {
-        min-width: 0;
-        gap: 10px;
+      .video-preview {
+        display: grid;
+        place-items: center;
+        background: linear-gradient(145deg, #242a3d, #515c78);
+        color: #ffffff;
+        font-size: 37px;
       }
 
       .file-kind {
         display: grid;
-        width: 36px;
-        height: 36px;
-        flex: 0 0 auto;
+        width: 100%;
+        height: 100%;
         place-items: center;
-        border-radius: 11px;
-        background: var(--pm-primary-soft);
-        color: var(--pm-primary-strong);
-        font-size: 17px;
+        color: var(--pm-muted);
+        font-size: 34px;
+      }
+
+      .file-head {
+        min-width: 0;
+        margin-top: 7px;
       }
 
       .file-label {
         margin: 0;
-        font-size: 13px;
-        font-weight: 760;
+        overflow: hidden;
+        font-size: 12px;
+        font-weight: 700;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .file-state {
         margin: 3px 0 0;
+        overflow: hidden;
         color: var(--pm-muted);
         font-size: 11px;
+        line-height: 1.35;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .file-state.error {
         color: var(--pm-danger);
+        white-space: normal;
       }
 
-      .file-actions {
-        flex: 0 0 auto;
-        gap: 7px;
+      .overlay-button {
+        position: absolute;
+        z-index: 1;
+        border: 0;
+        cursor: pointer;
       }
 
-      .icon-button {
-        min-height: 34px;
-        padding: 7px 9px;
-        border: 1px solid var(--pm-line);
-        border-radius: 9px;
-        background: transparent;
+      .remove-overlay {
+        top: 9px;
+        right: 9px;
+        display: grid;
+        width: 30px;
+        height: 30px;
+        place-items: center;
+        border: 1px solid rgb(23 32 51 / 12%);
+        border-radius: 50%;
+        background: rgb(255 255 255 / 90%);
+        color: #172033;
+        font-size: 23px;
+        font-weight: 350;
+        line-height: 1;
+      }
+
+      .remove-overlay:disabled {
+        cursor: not-allowed;
+        opacity: 0.72;
+      }
+
+      .retry-overlay {
+        top: 50%;
+        left: 50%;
+        padding: 10px 14px;
+        border: 1px solid rgb(255 255 255 / 76%);
+        border-radius: 11px;
+        background: rgb(255 255 255 / 94%);
+        box-shadow: 0 8px 24px rgb(27 36 66 / 16%);
         color: var(--pm-text);
-        cursor: pointer;
-        font-size: 11px;
-        font-weight: 730;
+        font-size: 12px;
+        font-weight: 780;
+        transform: translate(-50%, -50%);
+      }
+
+      .retry-overlay:hover {
+        background: var(--pm-primary-soft);
       }
 
       .progress {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+        left: 10px;
         height: 6px;
-        margin-top: 11px;
         overflow: hidden;
         border-radius: 999px;
-        background: var(--pm-card-muted);
+        background: rgb(255 255 255 / 75%);
       }
 
       .progress-bar {
@@ -448,20 +504,11 @@
       .destination-grid {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 12px;
-        margin-top: 16px;
+        gap: 9px;
       }
 
       .field {
         display: grid;
-        gap: 6px;
-      }
-
-      .field label {
-        color: var(--pm-muted);
-        font-size: 11px;
-        font-weight: 760;
-        letter-spacing: 0.02em;
       }
 
       select,
@@ -474,8 +521,9 @@
       }
 
       select {
-        min-height: 44px;
-        padding: 9px 32px 9px 10px;
+        min-height: 42px;
+        padding: 8px 30px 8px 10px;
+        font-size: 12px;
       }
 
       textarea {
@@ -492,19 +540,22 @@
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
-        margin-top: 16px;
+        margin-top: 12px;
       }
 
-      .privacy-note {
-        display: flex;
-        gap: 9px;
-        margin: 16px 0 0;
-        padding: 11px 12px;
-        border-radius: 12px;
-        background: var(--pm-success-soft);
-        color: var(--pm-success);
-        font-size: 11px;
-        line-height: 1.5;
+      .compatibility-control {
+        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] {
@@ -513,23 +564,29 @@
 
       @media (max-width: 640px) {
         .app {
-          padding: 10px;
+          padding: 8px;
         }
 
         .card {
-          border-radius: 18px;
+          border-radius: 20px;
         }
 
         .hero,
         .section {
-          padding: 17px;
+          padding-right: 14px;
+          padding-left: 14px;
+        }
+
+        .dropzone {
+          min-height: 230px;
         }
 
         .destination-grid {
           grid-template-columns: 1fr;
         }
 
-        .button {
+        .destination-actions .button,
+        .handoff-actions .button {
           width: 100%;
         }
       }
@@ -548,16 +605,16 @@
     <main class="app" data-testid="meta-upload-root">
       <article class="card">
         <header class="hero">
-          <p class="eyebrow">
-            <span class="eyebrow-dot"></span>ProductMaker · Meta Ads
-          </p>
-          <h1>Sube tus creativos de forma segura</h1>
-          <p class="hero-copy muted">
-            Los archivos van directo al staging privado de ProductMaker. El chat
-            solo recibe identificadores seguros para continuar.
-          </p>
+          <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"
+            <code class="session-id" data-testid="meta-upload-session-id" hidden
               >Esperando sesión…</code
             >
             <a
@@ -577,52 +634,46 @@
           ></p>
         </header>
 
-        <section class="section" aria-labelledby="upload-heading">
-          <h2 id="upload-heading">1. Selecciona tus archivos</h2>
-          <p class="section-copy muted">
-            Hasta 10 archivos · 350 MB por archivo · videos de máximo 180
-            segundos · mínimo 600 × 600 px.
-          </p>
+        <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"
           >
-            <div>
-              <div class="drop-icon" aria-hidden="true">↑</div>
-              <p class="drop-title">Arrastra aquí o usa el selector</p>
-              <p class="drop-help">
-                JPEG, PNG, WebP, MP4, MOV o WebM. Las imágenes grandes se
-                comprimen; los videos nunca se transcodifican.
-              </p>
-              <button
-                class="button"
-                type="button"
-                data-testid="meta-upload-picker-btn"
-                disabled
-              >
-                Elegir archivos
-              </button>
-              <button
-                class="button secondary"
-                type="button"
-                data-testid="meta-upload-library-btn"
-                hidden
-                disabled
+            <button
+              class="drop-trigger"
+              type="button"
+              data-testid="meta-upload-picker-btn"
+              disabled
+            >
+              <span class="drop-icon" aria-hidden="true">+</span>
+              <span class="drop-title" data-testid="meta-upload-drop-title"
+                >Upload image</span
               >
-                Elegir desde la biblioteca de ChatGPT
-              </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>
+            </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>
+          <p class="drop-help" id="meta-upload-constraints">
+            JPEG, PNG, WebP, MP4, MOV o WebM. Hasta 10 archivos de 350 MB; las
+            imágenes grandes se comprimen y los videos no se transcodifican.
+          </p>
           <p
             class="batch-error"
             data-testid="meta-upload-batch-error"
@@ -635,57 +686,44 @@
             aria-live="polite"
           ></div>
           <button
-            class="button secondary"
+            class="compatibility-control"
             type="button"
             data-testid="meta-upload-pending-refresh"
             hidden
-          >
-            Actualizar estado del staging
-          </button>
-          <p class="privacy-note">
-            <span aria-hidden="true">✓</span>
-            <span
-              >No enviamos bytes, enlaces temporales, nombres de archivo ni
-              tokens al modelo.</span
-            >
-          </p>
+            aria-label="Refresh upload status"
+          ></button>
         </section>
 
         <section
           class="section"
           data-testid="meta-upload-destination-section"
-          aria-labelledby="destination-heading"
+          aria-label="Meta destination"
           hidden
         >
-          <h2 id="destination-heading">2. Elige el destino de Meta</h2>
-          <p class="section-copy muted">
-            La selección es obligatoria. Las cuentas se filtran por el portfolio
-            elegido.
-          </p>
           <div class="destination-grid">
             <div class="field">
-              <label for="portfolio-select">Portfolio</label>
+              <label class="sr-only" for="portfolio-select">Portfolio</label>
               <select
                 id="portfolio-select"
                 data-testid="meta-upload-portfolio-select"
               >
-                <option value="">Selecciona un portfolio</option>
+                <option value="">Portfolio</option>
               </select>
             </div>
             <div class="field">
-              <label for="ad-account-select">Cuenta publicitaria</label>
+              <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="">Selecciona una cuenta</option>
+                <option value="">Ad account</option>
               </select>
             </div>
             <div class="field">
-              <label for="page-select">Página</label>
+              <label class="sr-only" for="page-select">Facebook Page</label>
               <select id="page-select" data-testid="meta-upload-page-select">
-                <option value="">Selecciona una página</option>
+                <option value="">Facebook Page</option>
               </select>
             </div>
           </div>
@@ -696,15 +734,15 @@
               data-testid="meta-upload-submit-destination"
               disabled
             >
-              Enviar selección al chat
+              Continue
             </button>
             <button
-              class="button secondary"
+              class="compatibility-control"
               type="button"
               data-testid="meta-upload-check-status"
-            >
-              Actualizar estado
-            </button>
+              hidden
+              aria-label="Refresh upload status"
+            ></button>
           </div>
         </section>
 
@@ -714,10 +752,8 @@
           aria-labelledby="handoff-heading"
           hidden
         >
-          <h2 id="handoff-heading">3. Copia el handoff seguro</h2>
-          <p class="section-copy muted">
-            Este host no puede devolver el mensaje automáticamente. Copia este
-            JSON exacto en el chat.
+          <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">
@@ -726,7 +762,7 @@
               type="button"
               data-testid="meta-upload-copy-btn"
             >
-              Copiar handoff
+              Copy handoff
             </button>
           </div>
         </section>
@@ -765,6 +801,7 @@
 
         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"]',
           ),
@@ -777,6 +814,9 @@
           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"]',
           ),
@@ -823,12 +863,17 @@
         };
 
         const state = {
+          disposed: false,
           initialized: false,
           standardHostReady: false,
           hostCanMessage: false,
           hostCanServerTools: false,
+          hostContainerDimensions: null,
           rpcId: 0,
           pendingRpc: new Map(),
+          pendingSizeReport: false,
+          forceSizeReport: false,
+          lastReportedHeight: 0,
           session: null,
           toolInput: {},
           items: [],
@@ -836,7 +881,18 @@
           destinations: { portfolios: [], adAccounts: [], pages: [] },
           consumedBridgeIds: new Set(),
           consumingBridgeFiles: false,
+          bridgeConsumptionQueued: false,
+          ingestionQueue: Promise.resolve(),
           busyBatch: false,
+          uploadBlocked: false,
+          fallbackRequired: false,
+          workCancelled: false,
+          abortController: null,
+          activeXhrs: new Set(),
+          resizeObserver: null,
+          mutationObserver: null,
+          resizeHandler: null,
+          hostMessageHandler: null,
         };
 
         function isRecord(value) {
@@ -870,6 +926,29 @@
           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)
@@ -887,16 +966,232 @@
         function setSessionStatus(message, tone = "neutral") {
           elements.sessionStatus.textContent = message;
           elements.sessionStatus.dataset.tone = tone;
+          scheduleIntrinsicSizeReport(true);
         }
 
         function setBatchError(message) {
           elements.batchError.textContent = message;
+          scheduleIntrinsicSizeReport(true);
+        }
+
+        function parseFinitePositiveNumber(value) {
+          return typeof value === "number" &&
+            Number.isFinite(value) &&
+            value > 0
+            ? value
+            : null;
+        }
+
+        function parseHostContainerDimensions(value) {
+          if (!isRecord(value)) return null;
+          const height = parseFinitePositiveNumber(value.height);
+          const maxHeight = parseFinitePositiveNumber(value.maxHeight);
+          if (!height && !maxHeight) return null;
+          return { height, maxHeight };
+        }
+
+        function boundedPositiveHeight(value) {
+          const parsed = parseFinitePositiveNumber(value);
+          return parsed ? Math.max(1, Math.round(parsed)) : null;
+        }
+
+        function intrinsicHeightLimit() {
+          const dimensions = state.hostContainerDimensions;
+          if (!dimensions) return null;
+          return boundedPositiveHeight(
+            dimensions.height || dimensions.maxHeight,
+          );
+        }
+
+        function measureIntrinsicWidth() {
+          const candidates = [
+            elements.root && elements.root.scrollWidth,
+            document.body && document.body.scrollWidth,
+            document.documentElement && document.documentElement.scrollWidth,
+          ];
+          for (const candidate of candidates) {
+            const parsed = boundedPositiveHeight(candidate);
+            if (parsed) return parsed;
+          }
+          return 1;
+        }
+
+        function applyHostContainerDimensions() {
+          const dimensions = state.hostContainerDimensions;
+          if (!dimensions) return;
+          if (dimensions.height) {
+            document.documentElement.style.height = "100vh";
+          } else {
+            document.documentElement.style.removeProperty("height");
+          }
+          if (dimensions.maxHeight) {
+            document.documentElement.style.maxHeight = `${boundedPositiveHeight(dimensions.maxHeight)}px`;
+          } else {
+            document.documentElement.style.removeProperty("max-height");
+          }
+          document.documentElement.style.overflowY = "auto";
+          scheduleIntrinsicSizeReport(true);
+        }
+
+        function measureIntrinsicHeight() {
+          const candidates = [
+            elements.root && elements.root.scrollHeight,
+            document.body && document.body.scrollHeight,
+            document.documentElement && document.documentElement.scrollHeight,
+          ];
+          let measured = 1;
+          for (const candidate of candidates) {
+            const parsed = boundedPositiveHeight(candidate);
+            if (parsed) {
+              measured = parsed;
+              break;
+            }
+          }
+          const limit = intrinsicHeightLimit();
+          return limit ? Math.min(measured, limit) : measured;
+        }
+
+        function reportIntrinsicHeight(force = false) {
+          state.pendingSizeReport = false;
+          state.forceSizeReport = false;
+          const height = measureIntrinsicHeight();
+          if (!force && height === state.lastReportedHeight) return;
+          state.lastReportedHeight = height;
+          if (state.standardHostReady) {
+            postNotification("ui/notifications/size-changed", {
+              width: measureIntrinsicWidth(),
+              height,
+            });
+          }
+          const bridge = openAiBridge();
+          if (bridge && typeof bridge.notifyIntrinsicHeight === "function") {
+            void Promise.resolve(bridge.notifyIntrinsicHeight(height)).catch(
+              () => {},
+            );
+          }
+        }
+
+        function scheduleIntrinsicSizeReport(force = false) {
+          state.forceSizeReport = state.forceSizeReport || force;
+          if (state.pendingSizeReport) return;
+          state.pendingSizeReport = true;
+          const flush = () => reportIntrinsicHeight(state.forceSizeReport);
+          if (typeof window.requestAnimationFrame === "function") {
+            window.requestAnimationFrame(() => flush());
+            return;
+          }
+          window.setTimeout(flush, 0);
+        }
+
+        function installIntrinsicSizeObserver() {
+          if (
+            state.resizeObserver ||
+            state.mutationObserver ||
+            state.resizeHandler
+          )
+            return;
+          if (typeof ResizeObserver === "function" && elements.root) {
+            state.resizeObserver = new ResizeObserver(() =>
+              scheduleIntrinsicSizeReport(),
+            );
+            state.resizeObserver.observe(elements.root);
+          } else if (typeof MutationObserver === "function" && elements.root) {
+            state.mutationObserver = new MutationObserver(() =>
+              scheduleIntrinsicSizeReport(),
+            );
+            state.mutationObserver.observe(elements.root, {
+              attributes: true,
+              childList: true,
+              subtree: true,
+              characterData: true,
+            });
+          }
+          state.resizeHandler = () => scheduleIntrinsicSizeReport();
+          window.addEventListener("resize", state.resizeHandler);
+        }
+
+        function setFallbackVisibility(visible) {
+          elements.fallbackLink.hidden = !visible;
+          scheduleIntrinsicSizeReport(true);
+        }
+
+        function requireFallback(
+          message,
+          tone = "warning",
+          blockPicker = false,
+        ) {
+          state.fallbackRequired = true;
+          state.uploadBlocked = state.uploadBlocked || blockPicker;
+          setFallbackVisibility(true);
+          if (message) setSessionStatus(message, tone);
+          setPickerAvailability();
+        }
+
+        function enqueueIngestion(task) {
+          const next = state.ingestionQueue.then(task, task);
+          state.ingestionQueue = next.catch(() => {});
+          return next;
+        }
+
+        function activeAbortSignal() {
+          if (!state.abortController || state.abortController.signal.aborted) {
+            state.abortController =
+              typeof AbortController === "function"
+                ? new AbortController()
+                : null;
+          }
+          return state.abortController?.signal;
+        }
+
+        function abortActiveWork() {
+          state.abortController?.abort();
+          for (const request of state.activeXhrs) request.abort();
+          state.activeXhrs.clear();
+        }
+
+        function cleanup() {
+          if (state.disposed) return;
+          state.disposed = true;
+          abortActiveWork();
+          state.resizeObserver?.disconnect();
+          state.mutationObserver?.disconnect();
+          if (state.resizeHandler)
+            window.removeEventListener("resize", state.resizeHandler);
+          if (state.hostMessageHandler)
+            window.removeEventListener("message", state.hostMessageHandler);
+          for (const item of state.items) revokePreviewUrl(item);
+          for (const [id, pending] of state.pendingRpc) {
+            window.clearTimeout(pending.timeout);
+            pending.reject(new Error("resource_teardown"));
+            state.pendingRpc.delete(id);
+          }
+        }
+
+        function normalizedBridgeReferenceId(reference) {
+          return isRecord(reference)
+            ? boundedString(
+                reference.file_id || reference.fileId || reference.id,
+                300,
+              )
+            : "";
+        }
+
+        function normalizedBridgeDownloadUrl(result) {
+          return typeof result === "string"
+            ? result
+            : isRecord(result)
+              ? boundedString(
+                  result.download_url || result.downloadUrl || result.url,
+                  3000,
+                )
+              : "";
         }
 
         function setPickerAvailability() {
           const disabled =
             !state.session ||
             sessionExpired() ||
+            state.uploadBlocked ||
             state.busyBatch ||
             state.items.length >= safeSessionLimit();
           elements.input.disabled = disabled;
@@ -925,10 +1220,12 @@
         }
 
         function initialize() {
-          if (state.initialized) return;
+          if (state.initialized || state.disposed) return;
           state.initialized = true;
           bindUi();
+          installIntrinsicSizeObserver();
           setPickerAvailability();
+          scheduleIntrinsicSizeReport(true);
           void initializeStandardHost();
           const bridge = openAiBridge();
           elements.libraryPickerButton.hidden = !(
@@ -1010,14 +1307,17 @@
             () => void copyHandoff(),
           );
 
-          window.addEventListener("message", handleHostMessage);
+          state.hostMessageHandler = handleHostMessage;
+          window.addEventListener("message", state.hostMessageHandler);
         }
 
         async function initializeStandardHost() {
           try {
             const result = await rpcRequest("ui/initialize", {
               appInfo: { name: "ProductMaker Meta upload", version: "1.0.0" },
-              appCapabilities: {},
+              appCapabilities: {
+                availableDisplayModes: ["inline", "fullscreen"],
+              },
               protocolVersion: APP_PROTOCOL_VERSION,
             });
             state.standardHostReady = true;
@@ -1025,11 +1325,20 @@
               isRecord(result) && isRecord(result.hostCapabilities)
                 ? result.hostCapabilities
                 : {};
+            const hostContext =
+              isRecord(result) && isRecord(result.hostContext)
+                ? result.hostContext
+                : {};
+            state.hostContainerDimensions = parseHostContainerDimensions(
+              hostContext.containerDimensions,
+            );
+            applyHostContainerDimensions();
             state.hostCanMessage = capabilityEnabled(capabilities.message);
             state.hostCanServerTools = capabilityEnabled(
               capabilities.serverTools,
             );
             postNotification("ui/notifications/initialized", {});
+            scheduleIntrinsicSizeReport(true);
           } catch {
             state.standardHostReady = false;
             state.hostCanServerTools = false;
@@ -1038,6 +1347,10 @@
 
         function rpcRequest(method, params) {
           return new Promise((resolve, reject) => {
+            if (state.disposed) {
+              reject(new Error("resource_teardown"));
+              return;
+            }
             state.rpcId += 1;
             const id = state.rpcId;
             const timeout = window.setTimeout(() => {
@@ -1053,12 +1366,44 @@
         }
 
         function postNotification(method, params) {
+          if (state.disposed) return;
           window.parent.postMessage({ jsonrpc: "2.0", method, params }, "*");
         }
 
         function handleHostMessage(event) {
           if (event.source !== window.parent || !isRecord(event.data)) return;
           const message = event.data;
+          if (message.method === "ui/resource-teardown") {
+            cleanup();
+            if (Object.prototype.hasOwnProperty.call(message, "id")) {
+              window.parent.postMessage(
+                { jsonrpc: "2.0", id: message.id, result: {} },
+                "*",
+              );
+            }
+            return;
+          }
+          if (message.method === "ui/notifications/tool-cancelled") {
+            state.workCancelled = true;
+            abortActiveWork();
+            requireFallback(
+              "La carga fue cancelada por el host. Puedes continuar desde el enlace seguro.",
+              "warning",
+              true,
+            );
+            return;
+          }
+          if (message.method === "ui/notifications/host-context-changed") {
+            const params = isRecord(message.params) ? message.params : {};
+            const hostContext = isRecord(params.hostContext)
+              ? params.hostContext
+              : params;
+            state.hostContainerDimensions = parseHostContainerDimensions(
+              hostContext.containerDimensions,
+            );
+            applyHostContainerDimensions();
+            return;
+          }
           if (Object.prototype.hasOwnProperty.call(message, "id")) {
             const pending = state.pendingRpc.get(message.id);
             if (!pending) return;
@@ -1090,22 +1435,35 @@
           if (!candidate) return;
           const session = parseSession(candidate);
           if (!session) return;
+          const sessionChanged =
+            !state.session || state.session.sessionId !== session.sessionId;
+          if (sessionChanged) {
+            state.uploadBlocked = false;
+            state.fallbackRequired = 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;
-          elements.fallbackLink.hidden = false;
+          updateUploadTitle();
           if (sessionExpired()) {
-            setSessionStatus(
+            requireFallback(
               "La sesión está expirada. Abre el enlace seguro para solicitar una nueva.",
               "danger",
+              true,
             );
             elements.pendingRefresh.hidden = true;
           } else {
+            setFallbackVisibility(state.fallbackRequired);
             setSessionStatus("Sesión lista para recibir archivos.", "neutral");
-            elements.pendingRefresh.hidden = false;
+            elements.pendingRefresh.hidden = true;
           }
           setPickerAvailability();
           void consumePendingBridgeFiles();
+          scheduleIntrinsicSizeReport(true);
         }
 
         function parseSession(candidate) {
@@ -1139,8 +1497,26 @@
           void consumePendingBridgeFiles();
         }
 
-        async function consumePendingBridgeFiles() {
+        function consumePendingBridgeFiles() {
           if (
+            state.disposed ||
+            state.bridgeConsumptionQueued ||
+            !state.session ||
+            !Array.isArray(state.toolInput.files)
+          )
+            return;
+          state.bridgeConsumptionQueued = true;
+          void enqueueIngestion(async () => {
+            state.bridgeConsumptionQueued = false;
+            await consumePendingBridgeFilesNow();
+          }).catch(() => {
+            state.bridgeConsumptionQueued = false;
+          });
+        }
+
+        async function consumePendingBridgeFilesNow() {
+          if (
+            state.disposed ||
             !state.session ||
             !Array.isArray(state.toolInput.files) ||
             state.consumingBridgeFiles
@@ -1149,14 +1525,12 @@
           state.consumingBridgeFiles = true;
           try {
             const pending = state.toolInput.files.filter((reference) => {
-              const id = isRecord(reference)
-                ? boundedString(reference.file_id, 300)
-                : "";
+              const id = normalizedBridgeReferenceId(reference);
               return id && !state.consumedBridgeIds.has(id);
             });
             if (!pending.length) return;
             if (!hasOpenAiFunction("getFileDownloadUrl")) {
-              setSessionStatus(
+              requireFallback(
                 "Este host no expone el puente de archivos. Usa el selector o el enlace seguro.",
                 "warning",
               );
@@ -1168,11 +1542,13 @@
             );
             const files = [];
             for (const reference of pending.slice(0, availableSlots)) {
-              const id = boundedString(reference.file_id, 300);
-              state.consumedBridgeIds.add(id);
+              const id = normalizedBridgeReferenceId(reference);
               try {
-                files.push(await downloadBridgeReference(reference));
+                const file = await downloadBridgeReference(reference);
+                state.consumedBridgeIds.add(id);
+                files.push(file);
               } catch {
+                state.consumedBridgeIds.add(id);
                 addBridgeFailure(reference);
               }
             }
@@ -1182,9 +1558,7 @@
             const hasUnconsumed =
               Array.isArray(state.toolInput.files) &&
               state.toolInput.files.some((reference) => {
-                const id = isRecord(reference)
-                  ? boundedString(reference.file_id, 300)
-                  : "";
+                const id = normalizedBridgeReferenceId(reference);
                 return id && !state.consumedBridgeIds.has(id);
               });
             if (
@@ -1197,82 +1571,75 @@
           }
         }
 
-        async function processLocalFiles(files) {
-          if (!state.session || sessionExpired() || state.busyBatch) return;
-          const bridge = openAiBridge();
-          if (
-            !bridge ||
-            typeof bridge.uploadFile !== "function" ||
-            typeof bridge.getFileDownloadUrl !== "function"
-          ) {
-            await processFiles(files);
-            return;
-          }
-          const availableSlots = Math.max(
-            0,
-            safeSessionLimit() - state.items.length,
-          );
-          const normalized = [];
-          for (const file of files.slice(0, availableSlots)) {
-            try {
-              const fileId = boundedString(
-                await bridge.uploadFile(file, { library: false }),
-                300,
-              );
-              if (!fileId) throw new Error("missing_bridge_file_id");
-              normalized.push(
-                await downloadBridgeReference({
-                  fileId,
-                  fileName: file.name,
-                  mimeType: file.type,
-                }),
+        function processLocalFiles(files) {
+          return enqueueIngestion(async () => {
+            if (
+              state.disposed ||
+              !state.session ||
+              sessionExpired() ||
+              state.uploadBlocked
+            )
+              return;
+            state.workCancelled = false;
+            if (files.length > safeSessionLimit() - state.items.length) {
+              setBatchError(
+                `Puedes subir hasta ${safeSessionLimit()} archivos por sesión.`,
               );
-            } catch {
-              addBridgeFailure({ fileName: file.name, mimeType: file.type });
             }
-          }
-          if (files.length > availableSlots) {
-            setBatchError(
-              `Puedes subir hasta ${safeSessionLimit()} archivos por sesión.`,
-            );
-          }
-          await processFiles(normalized);
+            await processFiles(files);
+          });
         }
 
-        async function chooseLibraryFiles() {
-          if (!state.session || sessionExpired() || state.busyBatch) return;
-          const bridge = openAiBridge();
-          if (
-            !bridge ||
-            typeof bridge.selectFiles !== "function" ||
-            typeof bridge.getFileDownloadUrl !== "function"
-          )
-            return;
-          try {
-            const result = await bridge.selectFiles();
-            const selected = Array.isArray(result) ? result : [];
-            const availableSlots = Math.max(
-              0,
-              safeSessionLimit() - state.items.length,
-            );
-            const files = [];
-            for (const candidate of selected.slice(0, availableSlots)) {
-              if (!isRecord(candidate)) continue;
-              const fileId = boundedString(candidate.fileId, 300);
-              const fileName = boundedString(candidate.fileName, 240);
-              const mimeType = boundedString(candidate.mimeType, 100);
-              if (!fileId || !fileName || !mimeType) continue;
-              files.push(
-                await downloadBridgeReference({ fileId, fileName, mimeType }),
+        function chooseLibraryFiles() {
+          return enqueueIngestion(async () => {
+            if (
+              state.disposed ||
+              !state.session ||
+              sessionExpired() ||
+              state.uploadBlocked
+            )
+              return;
+            const bridge = openAiBridge();
+            if (
+              !bridge ||
+              typeof bridge.selectFiles !== "function" ||
+              typeof bridge.getFileDownloadUrl !== "function"
+            )
+              return;
+            try {
+              const result = await bridge.selectFiles();
+              const selected = Array.isArray(result) ? result : [];
+              const availableSlots = Math.max(
+                0,
+                safeSessionLimit() - state.items.length,
+              );
+              const files = [];
+              for (const candidate of selected.slice(0, availableSlots)) {
+                if (!isRecord(candidate)) continue;
+                const fileId = boundedString(candidate.fileId, 300);
+                const fileName = boundedString(candidate.fileName, 240);
+                const mimeType = boundedString(candidate.mimeType, 100);
+                if (!fileId || !fileName || !mimeType) continue;
+                try {
+                  files.push(
+                    await downloadBridgeReference({
+                      fileId,
+                      fileName,
+                      mimeType,
+                    }),
+                  );
+                } catch {
+                  addBridgeFailure({ fileId, fileName, mimeType });
+                }
+              }
+              await processFiles(files);
+            } catch {
+              setSessionStatus(
+                "No se pudo abrir el selector del host. Usa el selector del navegador.",
+                "warning",
               );
             }
-            await processFiles(files);
-          } catch {
-            setSessionStatus(
-              "No se pudo abrir el selector del host. Usa el selector del navegador.",
-              "warning",
-            );
-          }
+          });
         }
 
         function isBrowserFile(value) {
@@ -1290,31 +1657,21 @@
           if (!bridge || typeof bridge.getFileDownloadUrl !== "function") {
             throw new Error("bridge_download_unavailable");
           }
-          const fileId = boundedString(
-            reference.file_id || reference.fileId || reference.id,
-            300,
-          );
+          const fileId = normalizedBridgeReferenceId(reference);
           if (!fileId) throw new Error("invalid_bridge_file");
           const resolved = await bridge.getFileDownloadUrl({ fileId });
-          const temporaryUrl =
-            typeof resolved === "string"
-              ? resolved
-              : isRecord(resolved)
-                ? boundedString(
-                    resolved.download_url ||
-                      resolved.downloadUrl ||
-                      resolved.url,
-                    3000,
-                  )
-                : "";
+          const temporaryUrl = normalizedBridgeDownloadUrl(resolved);
           const parsedUrl = new URL(temporaryUrl);
-          if (!safeWebProtocol(parsedUrl)) throw new Error("unsafe_bridge_url");
+          if (!safeBridgeDownloadUrl(parsedUrl))
+            throw new Error("unsafe_bridge_url");
           const response = await fetch(parsedUrl.toString(), {
             method: "GET",
             credentials: "omit",
+            redirect: "error",
+            signal: activeAbortSignal(),
           });
           if (!response.ok) throw new Error("bridge_download_failed");
-          const blob = await response.blob();
+          const blob = await readBoundedBridgeBlob(response);
           const preferredType = boundedString(
             reference.mime_type || reference.mimeType || reference.type,
             100,
@@ -1338,6 +1695,48 @@
           });
         }
 
+        async function readBoundedBridgeBlob(response) {
+          const declaredLength = Number(
+            response.headers.get("content-length") || "",
+          );
+          if (
+            Number.isFinite(declaredLength) &&
+            declaredLength > MAX_FILE_SIZE_BYTES
+          ) {
+            throw new Error("bridge_file_too_large");
+          }
+
+          if (!response.body || typeof response.body.getReader !== "function") {
+            const blob = await response.blob();
+            if (blob.size > MAX_FILE_SIZE_BYTES) {
+              throw new Error("bridge_file_too_large");
+            }
+            return blob;
+          }
+
+          const reader = response.body.getReader();
+          const chunks = [];
+          let total = 0;
+          try {
+            while (true) {
+              const next = await reader.read();
+              if (next.done) break;
+              const chunk = next.value;
+              total += chunk.byteLength;
+              if (total > MAX_FILE_SIZE_BYTES) {
+                await reader.cancel();
+                throw new Error("bridge_file_too_large");
+              }
+              chunks.push(chunk);
+            }
+          } finally {
+            reader.releaseLock?.();
+          }
+          return new Blob(chunks, {
+            type: response.headers.get("content-type") || "",
+          });
+        }
+
         function addBridgeFailure(reference) {
           const type = boundedString(
             reference.mime_type || reference.mimeType || reference.type,
@@ -1345,11 +1744,19 @@
           );
           const mediaKind = mediaKindForType(type) || "image";
           const item = createItem(null, mediaKind);
+          item.displayName = boundedString(
+            reference.file_name || reference.fileName || reference.name,
+            300,
+          );
           item.status = "failed";
           item.error =
             "No se pudo leer el archivo temporal del host. Usa el selector o el enlace seguro.";
           item.failureStage = "bridge";
           state.items.push(item);
+          requireFallback(
+            "No se pudo leer el archivo temporal del host. Usa el selector o el enlace seguro.",
+            "warning",
+          );
           renderItems();
           emitAnalytics("ads_meta_remote_upload_error", mediaKind, {
             failureStage: "bridge",
@@ -1358,7 +1765,14 @@
         }
 
         async function processFiles(fileCandidates) {
-          if (!state.session || sessionExpired() || state.busyBatch) return;
+          if (
+            state.disposed ||
+            !state.session ||
+            sessionExpired() ||
+            state.uploadBlocked ||
+            state.busyBatch
+          )
+            return;
           const files = fileCandidates.filter(isBrowserFile);
           if (!files.length) return;
           setBatchError("");
@@ -1395,6 +1809,7 @@
             id: `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`,
             uploadId: createClientUuid(),
             file,
+            displayName: file?.name || "",
             uploadFile: file,
             mediaKind,
             status: "pending",
@@ -1403,6 +1818,7 @@
             error: "",
             failureStage: "",
             stagingAssetId: "",
+            previewUrl: "",
           };
         }
 
@@ -1435,6 +1851,18 @@
               failureStage: failure.stage,
               errorType: failure.code,
             });
+            if (failure.code === "session_expired") {
+              requireFallback(
+                "La sesión expiró. Abre el enlace seguro para crear otra.",
+                "danger",
+                true,
+              );
+            } else if (failure.stage !== "validation") {
+              requireFallback(
+                "La carga no terminó. Puedes reintentarlo o continuar desde el enlace seguro.",
+                "warning",
+              );
+            }
           }
           renderItems();
         }
@@ -1606,6 +2034,12 @@
               alpha: file.type !== "image/jpeg",
             });
             if (!context) throw new Error("canvas_unavailable");
+            if (file.type === "image/png") {
+              context.save();
+              context.fillStyle = "#ffffff";
+              context.fillRect(0, 0, canvas.width, canvas.height);
+              context.restore();
+            }
             context.drawImage(
               inspection.image,
               0,
@@ -1613,16 +2047,13 @@
               canvas.width,
               canvas.height,
             );
-            const blob = await new Promise((resolve, reject) => {
-              canvas.toBlob(
-                (result) =>
-                  result
-                    ? resolve(result)
-                    : reject(new Error("compression_failed")),
-                file.type,
-                0.85,
-              );
-            });
+            let blob = await canvasBlob(canvas, file.type);
+            if (
+              file.type === "image/png" &&
+              blob.size > IMAGE_COMPRESSION_MAX_BYTES
+            ) {
+              blob = await canvasBlob(canvas, "image/jpeg");
+            }
             const compressed = new File([blob], file.name, {
               type: blob.type || file.type,
               lastModified: file.lastModified,
@@ -1651,6 +2082,19 @@
           }
         }
 
+        function canvasBlob(canvas, type) {
+          return new Promise((resolve, reject) => {
+            canvas.toBlob(
+              (result) =>
+                result
+                  ? resolve(result)
+                  : reject(new Error("compression_failed")),
+              type,
+              0.85,
+            );
+          });
+        }
+
         async function uploadWithRetries(item) {
           let lastError = null;
           for (let attempt = 1; attempt <= MAX_UPLOAD_ATTEMPTS; attempt += 1) {
@@ -1675,6 +2119,7 @@
               return;
             } catch (error) {
               if (error && error.message === "session_expired") throw error;
+              if (state.disposed || state.workCancelled) throw error;
               lastError = error;
             }
           }
@@ -1712,6 +2157,7 @@
               fileSize: file.size,
             }),
             credentials: "omit",
+            signal: activeAbortSignal(),
           });
           if (!response.ok) {
             const error = new Error(
@@ -1761,6 +2207,21 @@
           );
         }
 
+        function safeBridgeDownloadUrl(url) {
+          if (
+            url.protocol !== "https:" ||
+            url.username ||
+            url.password ||
+            url.port
+          )
+            return false;
+          const hostname = url.hostname.toLowerCase();
+          return (
+            hostname === "files.oaiusercontent.com" ||
+            hostname.endsWith(".oaiusercontent.com")
+          );
+        }
+
         function safeUploadPageUrl(url) {
           if (url.username || url.password) return false;
           if (
@@ -1779,23 +2240,32 @@
         function putFileWithProgress(url, file, onProgress) {
           return new Promise((resolve, reject) => {
             const request = new XMLHttpRequest();
+            let settled = false;
+            const finish = (callback) => {
+              if (settled) return;
+              settled = true;
+              state.activeXhrs.delete(request);
+              callback();
+            };
             request.open("PUT", url);
             request.timeout = 5 * 60 * 1000;
             request.setRequestHeader("Content-Type", file.type);
+            state.activeXhrs.add(request);
             request.upload.addEventListener("progress", (event) => {
               if (event.lengthComputable && event.total > 0) {
                 onProgress(Math.round((event.loaded / event.total) * 100));
               }
             });
             request.addEventListener("load", () => {
-              if (request.status >= 200 && request.status < 300) resolve();
-              else reject(uploadTransportError("put_failed"));
+              if (request.status >= 200 && request.status < 300)
+                finish(resolve);
+              else finish(() => reject(uploadTransportError("put_failed")));
             });
             request.addEventListener("error", () =>
-              reject(uploadTransportError("network_error")),
+              finish(() => reject(uploadTransportError("network_error"))),
             );
             request.addEventListener("timeout", () =>
-              reject(uploadTransportError("upload_timeout")),
+              finish(() => reject(uploadTransportError("upload_timeout"))),
             );
             request.send(file);
           });
@@ -1846,11 +2316,38 @@
 
         function removeItem(index) {
           if (state.busyBatch) return;
-          state.items.splice(index, 1);
+          const [item] = state.items.splice(index, 1);
+          if (item) revokePreviewUrl(item);
           renderItems();
           setPickerAvailability();
         }
 
+        function revokePreviewUrl(item) {
+          if (
+            item.previewUrl &&
+            typeof window.URL.revokeObjectURL === "function"
+          ) {
+            window.URL.revokeObjectURL(item.previewUrl);
+            item.previewUrl = "";
+          }
+        }
+
+        function previewUrlFor(item) {
+          if (
+            !item.file ||
+            item.mediaKind !== "image" ||
+            !IMAGE_TYPES.has(item.file.type)
+          )
+            return "";
+          if (
+            !item.previewUrl &&
+            typeof window.URL.createObjectURL === "function"
+          ) {
+            item.previewUrl = window.URL.createObjectURL(item.file);
+          }
+          return item.previewUrl;
+        }
+
         function renderItems() {
           const fragment = document.createDocumentFragment();
           state.items.forEach((item, index) => {
@@ -1858,33 +2355,46 @@
             card.className = "file-card";
             card.dataset.testid = `meta-upload-file-${index}`;
 
-            const head = document.createElement("div");
-            head.className = "file-head";
-            const meta = document.createElement("div");
-            meta.className = "file-meta";
-            const icon = document.createElement("span");
-            icon.className = "file-kind";
-            icon.setAttribute("aria-hidden", "true");
-            icon.textContent = item.mediaKind === "video" ? "▶" : "▧";
-            const text = document.createElement("div");
-            const label = document.createElement("p");
-            label.className = "file-label";
-            label.textContent =
-              item.mediaKind === "video"
-                ? `Video ${index + 1}`
-                : `Imagen ${index + 1}`;
-            const status = document.createElement("p");
-            status.className = `file-state${item.status === "failed" ? " error" : ""}`;
-            status.dataset.testid =
-              item.status === "failed"
-                ? `meta-upload-file-error-${index}`
-                : `meta-upload-file-status-${index}`;
-            status.textContent = itemStatusText(item);
-            text.append(label, status);
-            meta.append(icon, text);
+            const preview = document.createElement("div");
+            preview.className = "file-preview";
+            preview.dataset.testid = `meta-upload-file-preview-${index}`;
+            const previewUrl = previewUrlFor(item);
+            if (previewUrl) {
+              const image = document.createElement("img");
+              image.src = previewUrl;
+              image.alt =
+                item.file?.name || item.displayName || "Uploaded image";
+              image.dataset.testid = `meta-upload-preview-${index}`;
+              preview.append(image);
+            } else if (item.mediaKind === "video") {
+              const video = document.createElement("span");
+              video.className = "video-preview";
+              video.setAttribute("aria-hidden", "true");
+              video.textContent = "▶";
+              preview.append(video);
+            } else {
+              const placeholder = document.createElement("span");
+              placeholder.className = "file-kind";
+              placeholder.setAttribute("aria-hidden", "true");
+              placeholder.textContent = "▧";
+              preview.append(placeholder);
+            }
+
+            if (item.status === "uploading" || item.status === "uploaded") {
+              const progress = document.createElement("div");
+              progress.className = "progress";
+              progress.setAttribute("role", "progressbar");
+              progress.setAttribute("aria-valuemin", "0");
+              progress.setAttribute("aria-valuemax", "100");
+              progress.setAttribute("aria-valuenow", String(item.progress));
+              progress.dataset.testid = `meta-upload-progress-${index}`;
+              const bar = document.createElement("div");
+              bar.className = "progress-bar";
+              bar.style.width = `${item.progress}%`;
+              progress.append(bar);
+              preview.append(progress);
+            }
 
-            const actions = document.createElement("div");
-            actions.className = "file-actions";
             if (
               item.status === "failed" &&
               item.failureStage !== "validation" &&
@@ -1892,42 +2402,50 @@
             ) {
               const retry = document.createElement("button");
               retry.type = "button";
-              retry.className = "icon-button";
+              retry.className = "overlay-button retry-overlay";
               retry.dataset.testid = `meta-upload-retry-${index}`;
-              retry.textContent = "Reintentar";
+              retry.setAttribute("aria-label", `Retry ${item.file.name}`);
+              retry.textContent = "Retry";
               retry.addEventListener("click", () => void retryItem(index));
-              actions.append(retry);
+              preview.append(retry);
             }
+
             const remove = document.createElement("button");
             remove.type = "button";
-            remove.className = "icon-button";
+            remove.className = "overlay-button remove-overlay";
             remove.dataset.testid = `meta-upload-remove-${index}`;
-            remove.textContent = "Quitar";
+            remove.setAttribute(
+              "aria-label",
+              `Remove ${item.file?.name || item.displayName || `file ${index + 1}`}`,
+            );
+            remove.textContent = "×";
             remove.disabled = ["uploading", "validating", "uploaded"].includes(
               item.status,
             );
             remove.addEventListener("click", () => removeItem(index));
-            actions.append(remove);
-            head.append(meta, actions);
-            card.append(head);
+            preview.append(remove);
+            card.append(preview);
 
-            if (item.status === "uploading" || item.status === "uploaded") {
-              const progress = document.createElement("div");
-              progress.className = "progress";
-              progress.setAttribute("role", "progressbar");
-              progress.setAttribute("aria-valuemin", "0");
-              progress.setAttribute("aria-valuemax", "100");
-              progress.setAttribute("aria-valuenow", String(item.progress));
-              progress.dataset.testid = `meta-upload-progress-${index}`;
-              const bar = document.createElement("div");
-              bar.className = "progress-bar";
-              bar.style.width = `${item.progress}%`;
-              progress.append(bar);
-              card.append(progress);
-            }
+            const head = document.createElement("div");
+            head.className = "file-head";
+            const label = document.createElement("p");
+            label.className = "file-label";
+            label.textContent =
+              item.file?.name || item.displayName || `File ${index + 1}`;
+            const status = document.createElement("p");
+            status.className = `file-state${item.status === "failed" ? " error" : ""}`;
+            status.dataset.testid =
+              item.status === "failed"
+                ? `meta-upload-file-error-${index}`
+                : `meta-upload-file-status-${index}`;
+            status.textContent = itemStatusText(item);
+            head.append(label, status);
+            card.append(head);
             fragment.append(card);
           });
           elements.fileList.replaceChildren(fragment);
+          updateUploadTitle();
+          scheduleIntrinsicSizeReport(true);
         }
 
         function itemStatusText(item) {
@@ -1950,24 +2468,36 @@
             const status = parseStatusResult(result);
             state.assets = status.assets;
             if (!status.assets.length) {
-              setSessionStatus(
-                status.legacyKindAmbiguous
-                  ? "El tipo del asset legacy es ambiguo. Vuelve a comprobar o usa el enlace seguro."
-                  : "La sesión sigue pendiente. Termina la carga o vuelve a comprobar.",
-                "warning",
-              );
+              if (status.legacyKindAmbiguous) {
+                requireFallback(
+                  "El tipo del asset legacy es ambiguo. Vuelve a comprobar o usa el enlace seguro.",
+                  "warning",
+                );
+              } else {
+                setFallbackVisibility(state.fallbackRequired);
+                setSessionStatus(
+                  "La sesión sigue pendiente. Termina la carga o vuelve a comprobar.",
+                  "warning",
+                );
+              }
               elements.destinationSection.hidden = true;
-              elements.pendingRefresh.hidden = false;
+              elements.pendingRefresh.hidden = true;
               return;
             }
             elements.pendingRefresh.hidden = true;
 
-            const locallyUploaded = state.items.filter(
-              (item) => item.status === "uploaded",
-            ).length;
             const partial =
               status.status === "pending" ||
-              status.assets.length < locallyUploaded;
+              (state.items.length > 0 &&
+                status.assets.length < state.items.length);
+            if (partial) {
+              requireFallback(
+                "Carga parcial verificada. Puedes continuar desde el enlace seguro si algún archivo no terminó.",
+                "warning",
+              );
+            } else {
+              setFallbackVisibility(state.fallbackRequired);
+            }
             setSessionStatus(
               partial
                 ? "Carga parcial verificada. Continuaremos solo con los assets listos."
@@ -1986,17 +2516,16 @@
               (error && /expired|expirad/i.test(String(error.message)));
             const toolsUnavailable =
               error && error.message === "host_tools_unavailable";
-            setSessionStatus(
-              expired
-                ? "La sesión está expirada. Abre el enlace seguro para solicitar una nueva."
-                : toolsUnavailable
-                  ? "host_tools_unavailable: este host no permite comprobar el staging desde la App. Usa el enlace seguro."
-                  : "No se pudo comprobar la sesión. Conserva el enlace y vuelve a intentarlo.",
-              "danger",
-            );
-            elements.pendingRefresh.hidden = expired;
+            const message = expired
+              ? "La sesión está expirada. Abre el enlace seguro para solicitar una nueva."
+              : toolsUnavailable
+                ? "host_tools_unavailable: este host no permite comprobar el staging desde la App. Usa el enlace seguro."
+                : "No se pudo comprobar la sesión. Conserva el enlace y vuelve a intentarlo.";
+            requireFallback(message, "danger", expired);
+            elements.pendingRefresh.hidden = true;
           } finally {
             elements.checkStatus.disabled = false;
+            elements.pendingRefresh.hidden = true;
             elements.pendingRefresh.disabled = false;
           }
         }
@@ -2012,7 +2541,15 @@
           const bridge = openAiBridge();
           let result;
           if (bridge && typeof bridge.callTool === "function") {
-            result = await bridge.callTool(name, args);
+            try {
+              result = await bridge.callTool(name, args);
+            } catch (error) {
+              if (!state.hostCanServerTools) throw error;
+              result = await rpcRequest("tools/call", {
+                name,
+                arguments: args,
+              });
+            }
           } else if (state.hostCanServerTools) {
             result = await rpcRequest("tools/call", { name, arguments: args });
           } else {
@@ -2125,18 +2662,19 @@
           fillSelect(
             elements.portfolio,
             state.destinations.portfolios,
-            "Selecciona un portfolio",
+            "Portfolio",
             (entry) => entry.name,
           );
           fillSelect(
             elements.page,
             state.destinations.pages,
-            "Selecciona una página",
+            "Facebook Page",
             (entry) => entry.name,
           );
           renderAdAccounts();
           elements.destinationSection.hidden = false;
           updateDestinationSubmit();
+          scheduleIntrinsicSizeReport(true);
         }
 
         function renderAdAccounts() {
@@ -2149,9 +2687,7 @@
           fillSelect(
             elements.adAccount,
             accounts,
-            portfolioId
-              ? "Selecciona una cuenta"
-              : "Elige primero un portfolio",
+            portfolioId ? "Ad account" : "Ad account",
             (entry) =>
               `${entry.name}${entry.currency ? ` · ${entry.currency}` : ""}`,
           );
@@ -2236,6 +2772,7 @@
             "Copia el handoff exacto y pégalo en el chat.",
             "warning",
           );
+          scheduleIntrinsicSizeReport(true);
         }
 
         async function copyHandoff() {