@echomem/mcp 1.4.20 → 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-page.js

@@ -1,5 +1,6 @@
 import { renderSetupPageDocument } from "./setup-page/document.js";
 import { renderSetupPreviewBootstrap } from "./setup-preview.js";
+export { SETUP_PREVIEW_STATES } from "./setup-preview.js";
 /**
  * Setup page entry point. The implementation is split by product phase under ./setup-page/:
  * core utilities, local report, post-auth extraction, and lifecycle polling.

package/dist/setup-preview.js

@@ -5,7 +5,21 @@ export const SETUP_PREVIEW_STATES = [
     "report",
     "extract-counting",
     "extract-ready",
+    "extract-free-selected",
+    "extract-free-trial-used",
     "extract-limit",
+    "extract-pro-trial",
+    "extract-pro-active",
+    "extract-power-active",
+    "extract-team-active",
+    "extract-enterprise-active",
+    "extract-unknown",
+    "auth-login",
+    "auth-login-pro",
+    "auth-otp",
+    "checkout-pro-selected",
+    "auth-unlock",
+    "auth-setup",
     "extract-run",
     "extract-overdue",
     "extract-done",
@@ -202,6 +216,62 @@ function previewWatermarkScript() {
         document.body.appendChild(previewWatermark);
   `;
 }
+function extractionPreviewBootstrap(options) {
+    const candidateCount = options.candidateCount ?? 520;
+    const quotaLimit = options.quotaLimit;
+    const quotaRemaining = options.quotaRemaining;
+    const historicalConversationQuota = quotaLimit == null || quotaRemaining == null
+        ? null
+        : {
+            used: Math.max(0, quotaLimit - quotaRemaining),
+            limit: quotaLimit,
+            remaining: quotaRemaining,
+        };
+    const billingStatus = {
+        plan: options.plan,
+        paid: options.paid,
+        trialAvailable: options.trialAvailable,
+        trialUsed: options.trialUsed,
+        subscriptionStatus: options.subscriptionStatus ?? null,
+        trialEndedAt: options.trialEndedAt ?? null,
+        pricingUrl: "https://echoknows.com/pricing?source=mcp_onboarding",
+        account: {
+            displayName: "Preview User",
+            email: "preview@example.com",
+            avatarUrl: "/hud-assets/echo-face-cutout.png",
+        },
+        historicalConversationQuota,
+    };
+    return `
+        connected = true;
+        billingStatus = ${JSON.stringify(billingStatus)};
+        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: {
+            pending: ${candidateCount}, pendingTotal: ${candidateCount}, pendingCodex: ${Math.ceil(candidateCount * 0.68)}, pendingClaudeCode: ${Math.floor(candidateCount * 0.32)},
+            alreadyMigrated: 108, skippedActive: 0,
+            eta: { estimatedLabel: "under 2 minutes" }, estimatedLabel: "under 2 minutes"
+          },
+          candidateSessions: Array.from({ length: ${candidateCount} }, function (_, index) {
+            var codex = index < ${Math.ceil(candidateCount * 0.68)};
+            return {
+              key: (codex ? "codex:" : "claude-code:") + "preview-" + index,
+              source: codex ? "codex" : "claude-code",
+              title: ["Plan the onboarding flow", "Repair memory extraction", "Review pricing limits", "Polish the EchoMem HUD"][index % 4] + " · " + (index + 1),
+              project: ["EchoMem Chrome", "MCP Server", "Memory Platform"][index % 3],
+              date: new Date(Date.UTC(2026, 6, 18 - (index % 12))).toISOString(),
+              characters: 42000 + index * 2700,
+              approxInputTokens: 10500 + index * 675,
+              turns: 18 + index
+            };
+          }),
+          discovery: { phase: "account", exact: false }
+        };
+        renderDashboard();
+        ${options.showUnknownStatus ? 'setSetupPlanStatus("Plan check unavailable. Original still works.");' : ""}
+        ${options.openSessionPicker ? "window.setTimeout(function () { openSessionPicker(); }, 0);" : ""}`;
+}
 export function renderSetupPreviewBootstrap(state) {
     const watermark = previewWatermarkScript();
     if (state === "consent") {
@@ -227,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();`;
@@ -236,44 +307,78 @@ export function renderSetupPreviewBootstrap(state) {
         stats = null;
         renderDashboard();`;
     }
-    if (state === "extract-ready" || state === "extract-limit") {
-        const remainingHistory = state === "extract-limit" ? 0 : 28;
+    if (state === "extract-ready")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: true, trialUsed: false,
+            quotaLimit: 100, quotaRemaining: 28, candidateCount: 28,
+        })}`;
+    if (state === "extract-free-selected")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: true, trialUsed: false,
+            quotaLimit: 100, quotaRemaining: 100, selectFree: true,
+        })}`;
+    if (state === "extract-free-trial-used")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "expired", trialEndedAt: "2026-07-20T00:00:00.000Z",
+            quotaLimit: 100, quotaRemaining: 100,
+        })}`;
+    if (state === "extract-limit")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "free", paid: false, trialAvailable: false, trialUsed: true,
+            quotaLimit: 100, quotaRemaining: 0, selectFree: true, openSessionPicker: true,
+        })}`;
+    if (state === "extract-pro-trial")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "pro", paid: true, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "trialing", trialEndedAt: "2026-08-04T00:00:00.000Z",
+            // The server currently grants trialing users Free's lifetime history allowance,
+            // even though recurring processing/search allowances resolve to Pro.
+            quotaLimit: 100, quotaRemaining: 100,
+        })}`;
+    if (state === "extract-pro-active")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "pro", paid: true, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "active", quotaLimit: 250, quotaRemaining: 250,
+        })}`;
+    if (state === "extract-power-active")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "power", paid: true, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "active", quotaLimit: 500, quotaRemaining: 500,
+        })}`;
+    if (state === "extract-team-active")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "team", paid: true, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "active", quotaLimit: 250, quotaRemaining: 250,
+        })}`;
+    if (state === "extract-enterprise-active")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "enterprise", paid: true, trialAvailable: false, trialUsed: true,
+            subscriptionStatus: "active", quotaLimit: 500, quotaRemaining: 500,
+        })}`;
+    if (state === "extract-unknown")
+        return `${watermark}${extractionPreviewBootstrap({
+            plan: "unknown", paid: false, trialAvailable: true, trialUsed: false,
+            showUnknownStatus: true,
+        })}`;
+    if (state === "auth-login")
+        return `${watermark}\n        renderLocalLogin("");`;
+    if (state === "auth-login-pro")
         return `${watermark}
-        connected = true;
-        billingStatus = {
-          plan: "free", paid: false, trialAvailable: true,
-          pricingUrl: "https://echoknows.com/pricing?source=mcp_onboarding",
-          account: {
-            displayName: "Erik Hein",
-            email: "erik@example.com",
-            avatarUrl: "/hud-assets/echo-face-cutout.png"
-          },
-          historicalConversationQuota: { used: ${100 - remainingHistory}, limit: 100, remaining: ${remainingHistory} }
-        };
-        stats = {
-          sessions: { total: 136, codex: 82, claudeCode: 54 },
-          migratable: {
-            pending: 28, pendingTotal: 28, pendingCodex: 19, pendingClaudeCode: 9,
-            alreadyMigrated: 108, skippedActive: 0,
-            eta: { estimatedLabel: "under 2 minutes" }, estimatedLabel: "under 2 minutes"
-          },
-          candidateSessions: Array.from({ length: 28 }, function (_, index) {
-            var codex = index < 19;
-            return {
-              key: (codex ? "codex:" : "claude-code:") + "preview-" + index,
-              source: codex ? "codex" : "claude-code",
-              title: ["Plan the onboarding flow", "Repair memory extraction", "Review pricing limits", "Polish the EchoMem HUD"][index % 4] + " · " + (index + 1),
-              project: ["EchoMem Chrome", "MCP Server", "Memory Platform"][index % 3],
-              date: new Date(Date.UTC(2026, 6, 18 - (index % 12))).toISOString(),
-              characters: 42000 + index * 2700,
-              approxInputTokens: 10500 + index * 675,
-              turns: 18 + index
-            };
-          }),
-          discovery: { phase: "account", exact: false }
-        };
-        renderDashboard();`;
-    }
+        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")
+        return `${watermark}\n        renderLocalPassphrase("setup", "preview@example.com");`;
     if (state === "extract-run") {
         return `${watermark}
         renderProgress({ status: "running", total: 28, completed: 4, extracted: 19, failed: 1, latest: "preview session", latestRepo: "Preview Workspace" });`;