@echomem/mcp 1.4.27 → 1.4.29

package/dist/setup-page/client-report-city.js

@@ -169,8 +169,111 @@ export const SETUP_PAGE_CLIENT_REPORT_CITY = String.raw `      /* ---------- ful
         setScanMode(false);
         setCityMode(false);
       }
+      function formatReportEta(seconds) {
+        seconds = Math.max(1, Math.round(seconds));
+        if (seconds >= 3600) {
+          var hours = Math.floor(seconds / 3600);
+          var minutesAfterHours = Math.ceil((seconds % 3600) / 60);
+          return "About " + hours + "h" + (minutesAfterHours ? " " + minutesAfterHours + "m" : "") + " remaining";
+        }
+        if (seconds >= 60) {
+          var minutes = Math.floor(seconds / 60);
+          var secondsAfterMinutes = seconds % 60;
+          return "About " + minutes + "m " + secondsAfterMinutes + "s remaining";
+        }
+        return "About " + seconds + "s remaining";
+      }
+      function estimateReportRemaining(progress, overall, stage) {
+        void overall;
+        var now = Date.now();
+        var stageElapsed = Math.max(0, Number(progress.stageElapsedMs || 0) / 1000);
+        var stageDone = Math.max(0, Number(progress.stageDone || 0));
+        var stageTotal = Math.max(0, Number(progress.stageTotal || 0));
+        function tickExistingEstimate() {
+          if (reportEtaDisplaySeconds <= 0) {
+            return { seconds: 0, overdue: false, calibrating: true };
+          }
+          var sinceLast = reportEtaUpdatedAt ? Math.max(0, (now - reportEtaUpdatedAt) / 1000) : 0;
+          reportEtaDisplaySeconds = Math.max(0, reportEtaDisplaySeconds - sinceLast);
+          reportEtaUpdatedAt = now;
+          return {
+            seconds: reportEtaDisplaySeconds,
+            overdue: now >= reportEtaDeadline || reportEtaDisplaySeconds <= 0,
+            calibrating: false,
+          };
+        }
+
+        // The visual progress bands describe work completed, not wall-clock cost. In particular,
+        // reaching the 75% classification band does NOT mean only 25% of the time remains.
+        // Calibrate only from movement inside the expensive classification stage.
+        if (stage !== "classifying-repeated-context") {
+          return tickExistingEstimate();
+        }
+        if (reportEtaStage !== stage) {
+          reportEtaStage = stage;
+          reportEtaStageDone = stageDone;
+          reportEtaStageElapsed = stageElapsed;
+          reportEtaObservedRate = 0;
+          return { seconds: 0, overdue: false, calibrating: true };
+        }
+
+        // The first canonical completions can be cache hits and arrive almost instantly. Treat the
+        // first observation as a baseline, then measure only later movement over real elapsed time.
+        if (stageDone > reportEtaStageDone && stageElapsed > reportEtaStageElapsed) {
+          var sampleElapsed = stageElapsed - reportEtaStageElapsed;
+          var sampleDone = stageDone - reportEtaStageDone;
+          if (sampleElapsed >= 2 && sampleDone > 0) {
+            var sampleRate = sampleDone / sampleElapsed;
+            reportEtaObservedRate = reportEtaObservedRate > 0
+              ? reportEtaObservedRate * 0.65 + sampleRate * 0.35
+              : sampleRate;
+            reportEtaStageDone = stageDone;
+            reportEtaStageElapsed = stageElapsed;
+          }
+        }
+        if (
+          reportEtaObservedRate <= 0 ||
+          !isFinite(reportEtaObservedRate)
+        ) {
+          return { seconds: 0, overdue: false, calibrating: true };
+        }
+        if (stageTotal <= stageDone) return tickExistingEstimate();
+
+        // Add a safety margin for the tail of slower sessions plus final report reconciliation.
+        // This intentionally prefers a slightly early completion over a fake three-second promise.
+        var observedRemaining = ((stageTotal - stageDone) / reportEtaObservedRate) * 1.35 + 5;
+        observedRemaining = Math.min(15 * 60, Math.max(8, observedRemaining));
+
+        if (!reportEtaDeadline) {
+          reportEtaDeadline = now + observedRemaining * 1000;
+          reportEtaDisplaySeconds = observedRemaining;
+        } else {
+          var sinceLast = reportEtaUpdatedAt ? Math.max(0, (now - reportEtaUpdatedAt) / 1000) : 0;
+          var clockRemaining = Math.max(0, reportEtaDisplaySeconds - sinceLast);
+          // A faster observed rate may shorten the estimate. A slower sample never pushes the
+          // countdown back upward; passing the first deadline changes the copy to "Finishing up".
+          reportEtaDisplaySeconds = Math.min(clockRemaining, observedRemaining);
+        }
+        reportEtaUpdatedAt = now;
+        return {
+          seconds: Math.max(0, reportEtaDisplaySeconds),
+          overdue: now >= reportEtaDeadline || reportEtaDisplaySeconds <= 0,
+          calibrating: false,
+        };
+      }
       function renderLoading() {
         var progress = reportEnvelope && reportEnvelope.kind === "scanning" ? (reportEnvelope.progress || {}) : {};
+        var scanId = String(reportEnvelope && reportEnvelope.scanId || "");
+        if (scanId !== reportEtaScanId) {
+          reportEtaScanId = scanId;
+          reportEtaDeadline = 0;
+          reportEtaDisplaySeconds = 0;
+          reportEtaUpdatedAt = 0;
+          reportEtaStage = "";
+          reportEtaStageDone = 0;
+          reportEtaStageElapsed = 0;
+          reportEtaObservedRate = 0;
+        }
         var scannedValue = Number(progress.scanned);
         var totalValue = Number(progress.total);
         var scanned = isFinite(scannedValue) ? Math.max(0, scannedValue) : 0;
@@ -182,26 +285,48 @@ export const SETUP_PAGE_CLIENT_REPORT_CITY = String.raw `      /* ---------- ful
         var overall = isFinite(overallValue) ? Math.min(1, Math.max(0, overallValue)) : 0;
         var pct = Math.round(overall * 100);
         var stage = String(progress.stage || "starting");
+        var stageDone = Math.max(0, Number(progress.stageDone || 0));
+        var stageTotal = Math.max(0, Number(progress.stageTotal || 0));
+        var stageElapsed = Math.max(0, Number(progress.stageElapsedMs || 0));
+        var beat = Math.floor(stageElapsed / 4500);
         var progressText = "";
         if (total > 0 && stage === "reading-transcripts") {
           progressText = "Reading " + number(visibleScanned) + " of " + number(total) + " sessions…";
-        } else if (stage === "building-summary" || stage === "classifying-repeated-context") {
-          progressText = total > 0
-            ? "Analyzing repeated context across " + number(total) + " sessions…"
-            : "Analyzing repeated context…";
+        } else if (stage === "building-summary") {
+          var summaryBeats = [
+            "Organizing what Echo found…",
+            "Building the report summary…"
+          ];
+          progressText = summaryBeats[beat % summaryBeats.length];
+        } else if (stage === "classifying-repeated-context") {
+          var analysisCount = stageTotal > 0
+            ? " · " + number(Math.min(stageDone, stageTotal)) + " of " + number(stageTotal)
+            : "";
+          var analysisBeats = [
+            "Comparing context across sessions" + analysisCount + "…",
+            "Finding repeated context" + analysisCount + "…",
+            "Separating useful context from noise" + analysisCount + "…"
+          ];
+          progressText = analysisBeats[beat % analysisBeats.length];
         } else if (stage === "finalizing-report") {
-          progressText = "Preparing your report…";
+          progressText = beat % 2 === 0 ? "Checking the report totals…" : "Preparing your report…";
         }
+        var etaState = estimateReportRemaining(progress, overall, stage);
+        var etaText = etaState.overdue
+          ? "Taking a little longer than estimated…"
+          : (etaState.seconds > 0 ? formatReportEta(etaState.seconds) : "Estimating time remaining…");
         var fill = document.getElementById("scan-load-fill");
         var caption = document.getElementById("scan-load-caption");
+        var eta = document.getElementById("scan-load-eta");
         if (app.className === "scanLoading" && fill) {
           fill.style.width = pct + "%";
           fill.parentElement.setAttribute("aria-valuenow", String(pct));
-          fill.parentElement.setAttribute("aria-valuetext", progressText || "Preparing session count");
+          fill.parentElement.setAttribute("aria-valuetext", (progressText || "Preparing session count") + " " + etaText);
           if (caption) {
             caption.textContent = progressText;
             caption.hidden = !progressText;
           }
+          if (eta) eta.textContent = etaText;
           return;
         }
         setScanMode(true);
@@ -210,10 +335,19 @@ export const SETUP_PAGE_CLIENT_REPORT_CITY = String.raw `      /* ---------- ful
         app.innerHTML =
           setupJourney(1) +
           '<section class="mvpReading" aria-labelledby="scanLoadingTitle">' +
-            '<img class="mvpReadingMascot" src="/hud-assets/scan-loop/frame-04-read.png" alt="" aria-hidden="true" />' +
+            '<span class="mvpReadingMascot scanMascotFrames" aria-hidden="true">' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-01-ready.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-02-open.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-03-pull.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-04-read.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-04-read.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-05-file.png" alt="" />' +
+              '<img class="scanMascotFrame" src="/hud-assets/scan-loop/frame-06-close.png" alt="" />' +
+            '</span>' +
             '<h2 id="scanLoadingTitle">Building your report…</h2>' +
             '<p class="mvpReadingCount" id="scan-load-caption" aria-live="polite"' + (progressText ? "" : " hidden") + '>' + esc(progressText) + '</p>' +
-            '<div class="scanProgress mvpReadingProgress" role="progressbar" aria-labelledby="scanLoadingTitle" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '" aria-valuetext="' + esc(progressText || "Preparing session count") + '">' +
+            '<p class="mvpReadingEta" id="scan-load-eta">' + esc(etaText) + '</p>' +
+            '<div class="scanProgress mvpReadingProgress" role="progressbar" aria-labelledby="scanLoadingTitle" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '" aria-valuetext="' + esc((progressText || "Preparing session count") + " " + etaText) + '">' +
               '<i id="scan-load-fill" class="scanProgressFill" style="width:' + pct + '%"></i>' +
             '</div>' +
           '</section>';

package/dist/setup-page/styles-extraction.js

@@ -1462,6 +1462,43 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
     .savedHeading strong {
       font-variant-numeric: tabular-nums;
     }
+    .firstRecallStage {
+      display: flex;
+      flex-direction: column;
+      gap: clamp(22px, 3vw, 34px);
+    }
+    .firstRecallStage .resultTop h2 {
+      max-width: none;
+      margin: 0;
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-brand);
+      font-size: clamp(42px, 6vw, 72px);
+      font-weight: 700;
+      line-height: 0.96;
+      letter-spacing: -0.045em;
+    }
+    .firstRecallStage .savedHeading {
+      display: block;
+    }
+    .firstRecallStage .savedHeading .savedMain {
+      color: var(--echo-ink-text);
+    }
+    .firstRecallStage .savedHeading strong {
+      color: var(--echo-ink-primary);
+      font-weight: 900;
+    }
+    .firstRecallStage .tryCard {
+      margin-top: 0;
+    }
+    .firstRecallStage .tryCard > .tryTitle {
+      margin-bottom: 0;
+      color: var(--echo-ink-primary);
+      font-size: clamp(26px, 3vw, 38px);
+      line-height: 1.04;
+    }
+    .firstRecallStage .recallPromptPrimary {
+      margin-top: 18px;
+    }
     .viewEchoLink {
       color: var(--echo-ink-mute);
       font-style: normal;

package/dist/setup-page/styles-mvp.js

@@ -14,7 +14,8 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       width: 100%;
       min-height: 100vh;
       margin: 0;
-      padding: clamp(16px, 2.4vw, 34px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
+      padding: clamp(12px, 1.8vw, 24px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
+      display: block;
     }
     main > header { display: none; }
     #app.state { color: transparent; }
@@ -24,11 +25,17 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       width: 100%;
       min-height: calc(100vh - clamp(56px, 10vw, 128px));
     }
+    body.readyMode #app:has(> .setupJourney),
+    body.scanMode #app:has(> .setupJourney),
+    body.extractMode #app:has(> .setupJourney) {
+      padding-top: 0 !important;
+    }
 
     /* One calm map across local scan, account/Stripe, import, and first value. */
     .setupJourney {
       width: min(760px, 100%);
-      margin: 0 auto clamp(16px, 2.4vw, 26px);
+      flex: 0 0 auto;
+      margin: 0 auto 14px;
       color: var(--echo-ink-faint);
     }
     .setupJourney ol {
@@ -93,12 +100,13 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       color: white;
     }
     body.cityMode .setupJourney {
-      margin-top: 26px;
+      margin-top: 12px;
       margin-bottom: 8px;
       padding-inline: 18px;
     }
-    body.readyMode #app:has(.readyDecision.extractionReady) {
-      padding-top: 124px;
+    #setupJourneySlot {
+      width: 100%;
+      flex: 0 0 auto;
     }
 
     /* Permission ------------------------------------------------------------ */
@@ -277,6 +285,56 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     .localAuthWelcomeStage.localAuthPassphraseStage .localAuthWelcome {
       margin: clamp(24px, 5vh, 48px) auto 0;
     }
+    body.readyMode #app.localAuthCompleteStage {
+      min-height: calc(100vh - clamp(56px, 10vw, 128px));
+      display: grid;
+      place-items: center;
+    }
+    .localAuthComplete {
+      width: min(680px, 100%);
+      display: grid;
+      justify-items: center;
+      gap: 14px;
+      margin: 0 auto;
+      padding: clamp(24px, 5vw, 48px) 0;
+      color: var(--echo-ink-text);
+      text-align: center;
+    }
+    .localAuthComplete > img {
+      width: 76px;
+      height: 76px;
+      object-fit: contain;
+      filter: drop-shadow(0 12px 20px rgba(26,58,143,0.18));
+    }
+    .localAuthComplete h2 {
+      max-width: 100%;
+      margin: 4px 0 0;
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-brand);
+      font-size: clamp(42px, 6vw, 64px);
+      font-weight: 800;
+      letter-spacing: -0.055em;
+      line-height: 0.98;
+      white-space: nowrap;
+    }
+    .localAuthComplete p {
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: clamp(17px, 2.2vw, 22px);
+      line-height: 1.45;
+    }
+    .localAuthComplete .localAuthCompleteNext {
+      max-width: 460px;
+      margin-top: 2px;
+      color: var(--echo-ink-faint);
+      font-size: 14px;
+    }
+    .localAuthComplete code {
+      color: var(--echo-ink-primary);
+    }
+    @media (max-width: 560px) {
+      .localAuthComplete h2 { white-space: normal; }
+    }
     .localAuthWelcome {
       width: min(440px, 100%);
       gap: 14px;
@@ -481,8 +539,13 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
 
     /* Reading --------------------------------------------------------------- */
     .scanLoading {
-      display: grid !important;
-      place-items: center;
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .scanLoading .mvpReading {
+      margin-block: auto;
     }
     .mvpReading {
       display: flex;
@@ -515,12 +578,45 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       display: block;
       visibility: hidden;
     }
+    .mvpReadingEta {
+      min-height: 17px;
+      margin: 5px 0 0;
+      color: var(--echo-ink-faint);
+      font: 600 12px/1.4 var(--echo-font-mono);
+      font-variant-numeric: tabular-nums;
+    }
     .mvpReadingProgress {
       width: min(260px, 100%);
       height: 3px;
       margin: 8px 0 0;
       background: rgba(26,58,143,0.12);
     }
+    .discoveryLoader {
+      width: 100%;
+      min-height: min(62vh, 620px);
+      display: grid;
+      place-items: center;
+    }
+    .discoverySpinner span {
+      display: block;
+      width: 26px;
+      height: 26px;
+      border: 3px solid rgba(26,58,143,0.16);
+      border-top-color: var(--echo-ink-primary);
+      border-radius: 50%;
+      animation: localAuthSpin 700ms linear infinite;
+    }
+    .extractionStartStage {
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .extractionStartStage .discoverySpinner {
+      display: grid;
+      flex: 1 1 auto;
+      place-items: center;
+    }
     .reportMessageStage {
       display: flex !important;
       justify-content: center;
@@ -890,6 +986,112 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       text-transform: uppercase;
     }
     .planGateAccount .setupAccountChange { min-height: 34px; }
+    .readyUtilityNav {
+      position: fixed;
+      top: 20px;
+      left: 22px;
+      z-index: 20;
+      display: grid;
+      width: min(310px, calc(100vw - 44px));
+      gap: 2px;
+      border: 1px solid rgba(26,58,143,0.10);
+      border-radius: 24px;
+      background: rgba(255,255,255,0.78);
+      padding: 6px;
+      box-shadow: 0 8px 24px rgba(26,58,143,0.08);
+      backdrop-filter: blur(12px);
+    }
+    .readyUtilityNav .planGateAccount {
+      position: static;
+      top: auto;
+      left: auto;
+      z-index: auto;
+      width: 100%;
+      max-width: 100%;
+    }
+    .readyUtilityNav .planGateAccount .setupAccountCard {
+      display: grid;
+      width: 100%;
+      min-height: 44px;
+      grid-template-columns: 70px minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 10px;
+      border: 0;
+      border-radius: 16px;
+      background: transparent;
+      padding: 5px 8px;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .readyUtilityNav .setupAccountCopy { display: contents; }
+    .readyUtilityNav .setupAccountCopy small {
+      grid-column: 1;
+      margin: 0;
+      align-self: center;
+    }
+    .readyUtilityNav .setupAccountCopy strong {
+      grid-column: 2;
+      overflow: hidden;
+      align-self: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .readyUtilityNav .setupAccountChange { grid-column: 3; }
+    .readyPlanNav {
+      display: grid;
+      width: 100%;
+      min-height: 44px;
+      grid-template-columns: 70px minmax(0, 1fr);
+      align-items: center;
+      gap: 10px;
+      border: 0;
+      border-radius: 16px;
+      background: transparent;
+      padding: 5px 8px;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .readyPlanNav:has(.setupPlanSlot.is-hidden) { display: none; }
+    .readyPlanNavLabel {
+      grid-column: 1;
+      color: var(--echo-ink-faint);
+      font: 700 8px/1 var(--echo-font-mono);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .readyPlanNav .setupPlanSlot {
+      grid-column: 2;
+      min-width: 0;
+    }
+    .readyPlanNav .setupPlanConfirmed {
+      display: grid;
+      min-width: 0;
+      grid-template-columns: minmax(0, 1fr) auto;
+      margin: 0;
+      align-items: center;
+      gap: 8px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .readyPlanNav .setupPlanConfirmedIcon,
+    .readyPlanNav .setupPlanConfirmedCopy > span { display: none; }
+    .readyPlanNav .setupPlanConfirmedCopy { min-width: 0; }
+    .readyPlanNav .setupPlanConfirmedCopy strong {
+      display: block;
+      overflow: hidden;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .readyPlanNav .textButton {
+      min-height: 34px;
+      padding: 0 9px;
+      font-size: 11px;
+    }
 
     /* Found sessions: one message, one next action -------------------------- */
     .readyDecision.extractionReady {
@@ -951,6 +1153,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       line-height: 1.45;
       text-align: left;
     }
+    .extractionReady .readyHero .exSub:empty { display: none; }
     .extractionReady .proofStrip {
       order: 1;
       width: fit-content;
@@ -996,6 +1199,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       color: var(--echo-ink-faint);
       font-size: 11px;
     }
+    .extractionReady .ctaMeta:empty { display: none; }
     .extractionReady .ctaMeta .dataHandlingLink { font-size: inherit; }
     .extractionReady .readyFoot { order: 4; }
     .billingCommitmentSlot {
@@ -1257,6 +1461,34 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       letter-spacing: -0.06em;
     }
     .sessionPickerHead p { margin-top: 12px; font-size: 14px; }
+    .sessionPickerSummary {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+    }
+    .sessionPickerQuota strong {
+      color: var(--echo-ink-text);
+      font-weight: 750;
+    }
+    .sessionPickerUpgrade {
+      display: inline-flex;
+      min-height: 30px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid rgba(26,58,143,0.22);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.78);
+      padding: 0 12px;
+      color: var(--echo-ink-primary);
+      font-size: 12px;
+      font-weight: 750;
+      line-height: 1;
+      text-decoration: none;
+      box-shadow: 0 4px 12px rgba(26,58,143,0.07);
+    }
+    .sessionPickerUpgrade:hover { background: var(--echo-paper-white); }
+    .sessionPickerOrder { color: var(--echo-ink-faint); }
     .sessionPickerClose {
       border: 0;
       background: rgba(255,255,255,0.72);

package/dist/setup-page/styles-website-alignment.js

@@ -162,7 +162,12 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       filter: drop-shadow(0 12px 14px rgba(26,58,143,0.16));
       animation: scanMascotFrame 4.2s linear infinite;
     }
-    .scanMascotFrame:nth-child(1) { animation-delay: 0s; }
+    /* Keep the ready pose mounted underneath every animated frame. This prevents
+       a transparent flash at loop boundaries or while a later PNG is decoding. */
+    .scanMascotFrame:nth-child(1) {
+      opacity: 1;
+      animation: none;
+    }
     .scanMascotFrame:nth-child(2) { animation-delay: 0.6s; }
     .scanMascotFrame:nth-child(3) { animation-delay: 1.2s; }
     .scanMascotFrame:nth-child(4) { animation-delay: 1.8s; }
@@ -170,8 +175,8 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
     .scanMascotFrame:nth-child(6) { animation-delay: 3s; }
     .scanMascotFrame:nth-child(7) { animation-delay: 3.6s; }
     @keyframes scanMascotFrame {
-      0%, 14.2% { opacity: 1; }
-      14.3%, 100% { opacity: 0; }
+      0%, 14.4% { opacity: 1; }
+      14.5%, 100% { opacity: 0; }
     }
     .scanLoaderCopy { min-width: 0; }
     .scanEyebrow {

package/dist/setup-preview.js

@@ -21,7 +21,9 @@ export const SETUP_PREVIEW_STATES = [
     "auth-login",
     "auth-login-pro",
     "auth-otp",
+    "auth-complete",
     "checkout-pro-selected",
+    "checkout-pro-stale",
     "auth-unlock",
     "auth-setup",
     "extract-run",
@@ -252,6 +254,7 @@ function extractionPreviewBootstrap(options) {
         connected = true;
         billingStatus = ${JSON.stringify(billingStatus)};
         setupPlanChoice = ${JSON.stringify(options.selectFree ? "free" : options.selectedPlanChoice || "")};
+        pendingCheckoutSessionId = ${JSON.stringify(options.checkoutPending ? "cs_test_preview_pending_123" : "")};
         stats = {
           sessions: { total: ${candidateCount}, codex: ${Math.ceil(candidateCount * 0.68)}, claudeCode: ${Math.floor(candidateCount * 0.32)} },
           migratable: {
@@ -400,7 +403,15 @@ export function renderSetupPreviewBootstrap(state) {
         return `${watermark}
         localAuthEmail = "preview@example.com";
         renderLocalOtp("Verification code sent. Check your email inbox.");`;
+    if (state === "auth-complete")
+        return `${watermark}
+        renderLocalLoginComplete();`;
     if (state === "checkout-pro-selected")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: true, trialUsed: false,
+            quotaLimit: 100, quotaRemaining: 100, selectedPlanChoice: "pro", checkoutPending: true,
+        })}`;
+    if (state === "checkout-pro-stale")
         return `${watermark}${extractionPreviewBootstrap({
             plan: "free", paid: false, trialAvailable: true, trialUsed: false,
             quotaLimit: 100, quotaRemaining: 100, selectedPlanChoice: "pro",