@echomem/mcp 1.4.21 → 1.4.22

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

@@ -135,21 +135,43 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
     .scanMascot {
       display: grid;
       place-items: center;
-      width: clamp(92px, 13vw, 118px);
+      width: clamp(108px, 14vw, 132px);
       aspect-ratio: 1;
       flex: 0 0 auto;
       border: 1px solid rgba(26,58,143,0.11);
       border-radius: 20px;
       background: color-mix(in srgb, var(--echo-paper-white) 64%, var(--echo-note-cream) 36%);
       box-shadow: var(--echo-shadow-paper);
+      overflow: hidden;
       transform: rotate(-1.5deg);
     }
-    .scanMascot img {
+    .scanMascotFrames {
+      position: relative;
       display: block;
-      width: 76%;
-      height: 76%;
+      width: 100%;
+      height: 100%;
+    }
+    .scanMascotFrame {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
+      opacity: 0;
       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; }
+    .scanMascotFrame:nth-child(2) { animation-delay: 0.6s; }
+    .scanMascotFrame:nth-child(3) { animation-delay: 1.2s; }
+    .scanMascotFrame:nth-child(4) { animation-delay: 1.8s; }
+    .scanMascotFrame:nth-child(5) { animation-delay: 2.4s; }
+    .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; }
     }
     .scanLoaderCopy { min-width: 0; }
     .scanEyebrow {
@@ -424,6 +446,7 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       border: 1.5px solid rgba(26,58,143,0.13);
       border-radius: var(--echo-radius-card);
       background: color-mix(in srgb, var(--echo-paper-white) 70%, var(--echo-note-cream) 30%);
+      padding: 42px 18px 18px;
       box-shadow: var(--echo-shadow-paper);
       transform: rotate(-0.45deg) translateY(5px);
       transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
@@ -482,6 +505,9 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       transform: rotate(8deg);
       box-shadow: 0 6px 14px rgba(199,55,47,0.24), inset 0 0 0 2px rgba(255,255,255,0.13);
     }
+    .setupPlanCard.is-pro .setupPlanHead {
+      padding-right: 0;
+    }
     .setupPlanCard button {
       border-radius: 999px;
       box-shadow: var(--echo-shadow-glass);
@@ -520,6 +546,193 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
     .readyDecision .actions .skipHistoryButton {
       border-radius: 999px;
     }
+    .extractionReady .readyHero {
+      grid-template-columns: 72px minmax(0, 1fr);
+      gap: 22px;
+      padding-top: 28px;
+      padding-bottom: 28px;
+    }
+    .extractionReady .readyMascot {
+      width: 68px;
+      height: 68px;
+    }
+    .extractionReady .readyHero .exCopy h2 {
+      max-width: 700px;
+      font-size: clamp(38px, 4.8vw, 56px);
+    }
+    .extractionReady .readyHero .exCopy .exSub {
+      max-width: 700px;
+      margin-top: 10px;
+      font-size: 15px;
+    }
+    .extractionReady .sessionSelectionCard {
+      grid-template-columns: 30px minmax(0, 1fr) auto;
+      min-height: 0;
+      padding: 11px clamp(22px, 4vw, 34px);
+      background: rgba(255,255,255,0.74);
+    }
+    .extractionReady .sessionSelectionIcon {
+      width: 30px;
+      height: 30px;
+      border: 0;
+      background: rgba(41,83,186,0.07);
+      box-shadow: none;
+    }
+    .extractionReady .sessionSelectionIcon .setupGlyph {
+      width: 17px;
+      height: 17px;
+    }
+    .extractionReady .sessionSelectionEyebrow {
+      display: none;
+    }
+    .extractionReady .sessionSelectionCopy > strong {
+      margin: 0;
+      font-size: 14px;
+    }
+    .extractionReady .sessionSelectionCopy p {
+      margin-top: 1px;
+      font-size: 11px;
+    }
+    .extractionReady .sessionEditButton {
+      min-height: 32px;
+      padding: 6px 12px;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+      font-size: 11px;
+      text-decoration: underline;
+    }
+    .extractionReady .readyGo {
+      justify-items: center;
+      padding: 28px clamp(22px, 4vw, 34px) 24px;
+      background: rgba(255,255,255,0.90);
+    }
+    .extractionReady .actions {
+      display: grid;
+      width: min(520px, 100%);
+      grid-template-columns: 1fr;
+      justify-items: center;
+      gap: 12px;
+    }
+    .extractionReady .actions .primary {
+      width: 100%;
+      min-height: 56px;
+      justify-content: center;
+      font-size: 15px;
+    }
+    .extractionReady .actions .skipHistoryButton {
+      min-height: 0;
+      border: 0;
+      background: transparent;
+      padding: 4px 10px;
+      color: var(--echo-ink-mute);
+      box-shadow: none;
+      font-size: 11px;
+      text-decoration: underline;
+    }
+    .extractionReady .ctaMeta {
+      justify-content: center;
+      margin-top: 12px;
+      text-align: center;
+    }
+    .readySettings {
+      display: grid;
+      width: 100%;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 16px;
+      border-top: 1px solid rgba(26,58,143,0.10);
+      border-bottom: 1px solid rgba(26,58,143,0.10);
+      background: color-mix(in srgb, var(--echo-paper-white) 76%, var(--echo-note-cream) 24%);
+      padding: 12px clamp(22px, 4vw, 34px);
+    }
+    .readySetting {
+      display: grid;
+      min-width: 0;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: center;
+      gap: 10px;
+    }
+    .readySetting + .readySetting {
+      border-left: 1px solid rgba(26,58,143,0.10);
+      padding-left: 16px;
+    }
+    .readySettingLabel {
+      color: var(--echo-ink-faint);
+      font: 800 8px/1 var(--echo-font-mono);
+      letter-spacing: 0.10em;
+      text-transform: uppercase;
+    }
+    .extractionReady .readySettings .setupAccountCard {
+      grid-template-columns: 28px minmax(0, 1fr) auto;
+      gap: 8px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .extractionReady .readySettings .setupAccountAvatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      font-size: 9px;
+      box-shadow: none;
+    }
+    .extractionReady .readySettings .setupAccountCopy small,
+    .extractionReady .readySettings .setupAccountCopy > span {
+      display: none;
+    }
+    .extractionReady .readySettings .setupAccountCopy strong {
+      margin: 0;
+      font-size: 12px;
+    }
+    .extractionReady .readySettings .setupAccountChange,
+    .extractionReady .readySettings .setupPlanConfirmed .textButton {
+      min-height: 0;
+      border: 0;
+      background: transparent;
+      padding: 4px 6px;
+      box-shadow: none;
+      font-size: 10px;
+      text-decoration: underline;
+    }
+    .extractionReady .readySettings .setupPlanConfirmed {
+      grid-template-columns: 24px minmax(0, 1fr) auto;
+      gap: 7px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .extractionReady .readySettings .setupPlanConfirmedIcon {
+      width: 24px;
+      height: 24px;
+      background: rgba(44,143,104,0.10);
+    }
+    .extractionReady .readySettings .setupPlanConfirmedIcon .setupGlyph {
+      width: 14px;
+      height: 14px;
+    }
+    .extractionReady .readySettings .setupPlanConfirmedCopy strong {
+      font-size: 12px;
+    }
+    .extractionReady .readySettings .setupPlanConfirmedCopy > span {
+      display: none;
+    }
+    .readySettings.is-plan-open {
+      grid-template-columns: 1fr;
+      padding: 0;
+    }
+    .readySettings.is-plan-open .readyAccountSetting {
+      display: none;
+    }
+    .readySettings.is-plan-open .readyPlanSetting {
+      grid-template-columns: 1fr;
+      border: 0;
+      padding: 0;
+    }
+    .readySettings.is-plan-open .readySettingLabel {
+      display: none;
+    }
     .readyFoot {
       border-top-color: rgba(26,58,143,0.10);
       border-radius: 0 0 calc(var(--echo-radius-panel) - 2px) calc(var(--echo-radius-panel) - 2px);
@@ -751,7 +964,7 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
         gap: 18px;
       }
       .scanMascot {
-        width: 76px;
+        width: 88px;
         border-radius: 16px;
       }
       .scanLoader h2.siteHeadline {
@@ -786,6 +999,18 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
       .setupPlanGrid {
         gap: 20px;
       }
+      .extractionReady .readyHero {
+        grid-template-columns: 1fr;
+      }
+      .readySettings {
+        grid-template-columns: 1fr;
+      }
+      .readySetting + .readySetting {
+        border-top: 1px solid rgba(26,58,143,0.10);
+        border-left: 0;
+        padding-top: 10px;
+        padding-left: 0;
+      }
       .setupPlanCard,
       .setupPlanCard:nth-child(2),
       .setupPlanCard:nth-child(3) {
@@ -814,5 +1039,12 @@ export const SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT = String.raw `
         transition: none;
         transform: none;
       }
+      .scanMascotFrame {
+        animation: none;
+        opacity: 0;
+      }
+      .scanMascotFrame:first-child {
+        opacity: 1;
+      }
     }
 `;

package/dist/setup-page/styles.js

@@ -3,6 +3,7 @@ import { SETUP_PAGE_STYLES_CITY_REPORT } from "./styles-city-report.js";
 import { SETUP_PAGE_STYLES_EXTRACTION } from "./styles-extraction.js";
 import { SETUP_PAGE_STYLES_CONTEXT_AUDIT } from "./styles-context-audit.js";
 import { SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT } from "./styles-website-alignment.js";
+import { SETUP_PAGE_STYLES_MVP } from "./styles-mvp.js";
 // Kept as one emitted style tag so the local HTML page remains self-contained.
 export const SETUP_PAGE_STYLES = [
     SETUP_PAGE_STYLES_FOUNDATION,
@@ -10,4 +11,5 @@ export const SETUP_PAGE_STYLES = [
     SETUP_PAGE_STYLES_EXTRACTION,
     SETUP_PAGE_STYLES_CONTEXT_AUDIT,
     SETUP_PAGE_STYLES_WEBSITE_ALIGNMENT,
+    SETUP_PAGE_STYLES_MVP,
 ].join("\n");

package/dist/setup-preview.js

@@ -15,6 +15,9 @@ export const SETUP_PREVIEW_STATES = [
     "extract-enterprise-active",
     "extract-unknown",
     "auth-login",
+    "auth-login-pro",
+    "auth-otp",
+    "checkout-pro-selected",
     "auth-unlock",
     "auth-setup",
     "extract-run",
@@ -242,7 +245,7 @@ function extractionPreviewBootstrap(options) {
     return `
         connected = true;
         billingStatus = ${JSON.stringify(billingStatus)};
-        setupPlanChoice = ${JSON.stringify(options.selectFree ? "free" : "")};
+        setupPlanChoice = ${JSON.stringify(options.selectFree ? "free" : options.selectedPlanChoice || "")};
         stats = {
           sessions: { total: ${candidateCount}, codex: ${Math.ceil(candidateCount * 0.68)}, claudeCode: ${Math.floor(candidateCount * 0.32)} },
           migratable: {
@@ -266,7 +269,7 @@ function extractionPreviewBootstrap(options) {
           discovery: { phase: "account", exact: false }
         };
         renderDashboard();
-        ${options.showUnknownStatus ? 'setSetupPlanStatus("Plan check unavailable. Free still works.");' : ""}
+        ${options.showUnknownStatus ? 'setSetupPlanStatus("Plan check unavailable. Original still works.");' : ""}
         ${options.openSessionPicker ? "window.setTimeout(function () { openSessionPicker(); }, 0);" : ""}`;
 }
 export function renderSetupPreviewBootstrap(state) {
@@ -294,6 +297,7 @@ export function renderSetupPreviewBootstrap(state) {
     if (state === "report") {
         const reportJson = JSON.stringify(previewReport);
         return `${watermark}
+        localHistoryConsentGranted = true;
         report = ${reportJson};
         reportEnvelope = { schemaVersion: 1, kind: "ready", mode: "preview", scanId: "design-preview", report: report };
         renderForensicReport();`;
@@ -359,6 +363,18 @@ export function renderSetupPreviewBootstrap(state) {
         })}`;
     if (state === "auth-login")
         return `${watermark}\n        renderLocalLogin("");`;
+    if (state === "auth-login-pro")
+        return `${watermark}
+        renderLocalLogin("");`;
+    if (state === "auth-otp")
+        return `${watermark}
+        localAuthEmail = "preview@example.com";
+        renderLocalOtp("Verification code sent. Check your email inbox.");`;
+    if (state === "checkout-pro-selected")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: true, trialUsed: false,
+            quotaLimit: 100, quotaRemaining: 100, selectedPlanChoice: "pro",
+        })}`;
     if (state === "auth-unlock")
         return `${watermark}\n        renderLocalPassphrase("unlock", "preview@example.com");`;
     if (state === "auth-setup")