@echomem/mcp 1.4.21 → 1.4.22

package/dist/setup-page/client-lifecycle.js

@@ -6,39 +6,24 @@ export const SETUP_PAGE_CLIENT_LIFECYCLE = String.raw `      /* ---------- scan-
         setExtractMode(false);
         setReadyMode(true);
         setHead("Local file access", "Consent");
-        app.className = "consentStage";
+        app.className = "consentStage mvpConsentStage";
         app.innerHTML =
-          '<section class="localConsent localConsentAccess">' +
-            '<div class="consentLead">' +
-              '<p class="consentEyebrow">Local history access / required</p>' +
-              '<h2 class="siteHeadline">Let Echo read your <strong>local coding history?</strong></h2>' +
-              '<p class="consentIntro">Echo needs this access to find your local Codex and Claude Code sessions, build your private usage report, and prepare conversations for memory extraction.</p>' +
-              '<div class="consentLocalMark"><img src="/hud-assets/echo-face-cutout.png" alt="" /><span><strong>Processed on this Mac</strong><small>This scan does not send transcripts to EchoMem.</small></span></div>' +
-            '</div>' +
-            '<div class="consentDecision">' +
-              '<div class="consentScopeHead"><strong>What this access does</strong><span>Local scan</span></div>' +
-              '<div class="consentScope" aria-label="What this permission allows">' +
-                '<div><span class="consentScopeNumber" aria-hidden="true">01</span><p><strong>Reads supported session logs</strong><small>Only local Codex and Claude Code history on this device.</small></p></div>' +
-                '<div><span class="consentScopeNumber" aria-hidden="true">02</span><p><strong>Builds the Agent Doctor report</strong><small>Usage patterns and visualizations are computed locally.</small></p></div>' +
-                '<div><span class="consentScopeNumber" aria-hidden="true">03</span><p><strong>Keeps transcripts on this device</strong><small>Nothing is uploaded unless you later select conversations for memory extraction.</small></p></div>' +
-              '</div>' +
-              '<label class="consentCheck"><input type="checkbox" id="localScanConsentCheck" /><span><strong>I understand and allow this local scan</strong><small>Required for Agent Doctor and to choose local conversations for extraction.</small></span></label>' +
-              '<div class="consentActions">' +
-                '<button type="button" class="primary" id="allowLocalScan" disabled>Allow local scan</button>' +
-                '<button type="button" class="textButton" id="declineLocalScan">Not now</button>' +
-              '</div>' +
-              '<p class="consentFine" id="consentStatus" role="status" aria-live="polite"></p>' +
-            '</div>' +
+          '<section class="mvpConsent" aria-labelledby="mvpConsentTitle">' +
+            '<img class="mvpConsentEcho" src="/hud-assets/echo-face-cutout.png" alt="" />' +
+            '<p class="mvpKicker">Before we begin</p>' +
+            '<h2 id="mvpConsentTitle">Echo has something for you.</h2>' +
+            '<p class="mvpConsentIntro">Let Echo read your local Codex and Claude Code history to build a private report. You’ll see what’s filling your context window, what keeps getting repeated, and where memory could help.</p>' +
+            '<p class="mvpPrivacy">The scan runs on this Mac. Nothing leaves it unless you later choose memories to extract.</p>' +
+            '<button type="button" class="primary mvpPrimary" id="allowLocalScan">Allow scan &amp; build my report <span aria-hidden="true">→</span></button>' +
+            '<button type="button" class="mvpQuiet" id="declineLocalScan">Not now</button>' +
+            '<p class="consentFine" id="consentStatus" role="status" aria-live="polite"></p>' +
           '</section>';
         var allow = document.getElementById("allowLocalScan");
         if (allow) allow.onclick = allowLocalScan;
-        var consentCheck = document.getElementById("localScanConsentCheck");
-        if (consentCheck && allow) consentCheck.onchange = function () {
-          allow.disabled = !consentCheck.checked;
-          if (consentCheck.checked) setConsentStatus("");
-        };
         var decline = document.getElementById("declineLocalScan");
-        if (decline) decline.onclick = declineLocalScan;
+        if (decline) decline.onclick = function () {
+          setConsentStatus("Echo can't continue setup without permission to scan your local history.", "required");
+        };
       }
       function setConsentStatus(message, tone) {
         var node = document.getElementById("consentStatus");
@@ -48,22 +33,33 @@ export const SETUP_PAGE_CLIENT_LIFECYCLE = String.raw `      /* ---------- scan-
         }
       }
       async function allowLocalScan() {
+        var allow = document.getElementById("allowLocalScan");
+        if (allow) allow.disabled = true;
         setConsentStatus("Starting local scan...");
         try {
-          await postJson("/report-consent", { allowed: true });
+          await postJson("/report-consent", { allowed: true }, 5000);
           localHistoryConsentGranted = true;
           await showReport();
         } catch (error) {
+          // The localhost bridge may have accepted consent even if the browser loses the POST
+          // response while it swaps connections. Recover from the server's authoritative state
+          // instead of leaving the user forever on "Starting local scan...".
+          try {
+            var configResponse = await fetchWithTimeout(
+              "/config?nonce=" + encodeURIComponent(nonce),
+              { credentials: "omit", cache: "no-store" },
+              3000
+            );
+            var config = configResponse.ok ? await configResponse.json() : null;
+            if (config && config.consentGranted === true) {
+              localHistoryConsentGranted = true;
+              await showReport();
+              return;
+            }
+          } catch (_) {}
           renderReportIssue("CONSENT_SAVE_FAILED", error && error.message ? error.message : "Could not start the local scan.");
         }
       }
-      async function declineLocalScan() {
-        localHistoryConsentGranted = false;
-        try {
-          await postJson("/report-consent", { allowed: false });
-        } catch (_) {}
-        setConsentStatus("Local history access is required to continue setup. Nothing will be scanned or uploaded unless you allow it.", "required");
-      }
       async function showReport() {
         if (reportPollStarted) return;
         reportPollStarted = true;
@@ -136,12 +132,14 @@ export const SETUP_PAGE_CLIENT_LIFECYCLE = String.raw `      /* ---------- scan-
         if (event.origin !== location.origin) return;
         var data = event.data || {};
         if (data.type === "echomem:connected" && data.nonce === nonce) {
-          if (!localHistoryConsentGranted) {
-            renderLocalScanConsent();
-            setConsentStatus("Local history access is required before you can connect EchoMem or continue setup.", "required");
+          if (setupFlow === "login") {
+            connected = true;
+            renderLocalLoginComplete();
             return;
           }
           connected = true;
+          rememberSetupPlanChoice("");
+          try { void refreshBillingStatus(); } catch (_) {}
           void waitForStats();
         } else if (data.type === "echomem:city-ready" && data.nonce === nonce) {
           scheduleReportToCity();
@@ -162,11 +160,18 @@ export const SETUP_PAGE_CLIENT_LIFECYCLE = String.raw `      /* ---------- scan-
           var cfg = await getJson("/config");
           configLoaded = true;
           connected = !!cfg.connected;
+          setupFlow = cfg.flow === "login" ? "login" : "onboarding";
           workspacePath = cfg.workspacePath || workspacePath;
           consentRequired = cfg.consentRequired !== false;
           consentGranted = cfg.consentGranted === true;
           localHistoryConsentGranted = consentGranted;
         } catch (_) {}
+        if (setupFlow === "login") {
+          if (connected) renderLocalLoginComplete();
+          else renderLocalLogin("");
+          return;
+        }
+        if (!connected) rememberSetupPlanChoice("");
         if (params.get("connected") === "1") {
           if (!configLoaded || (consentRequired && !consentGranted)) {
             renderLocalScanConsent();
@@ -185,6 +190,7 @@ export const SETUP_PAGE_CLIENT_LIFECYCLE = String.raw `      /* ---------- scan-
             setTimeout(function () { if (!window.closed) void waitForStats(); }, 1500);
           } else {
             // Same-tab fallback (popup was blocked): go straight to the extraction dashboard.
+            try { void refreshBillingStatus(); } catch (_) {}
             void waitForStats();
           }
           return;

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

@@ -717,7 +717,7 @@ export const SETUP_PAGE_CLIENT_REPORT_AUDIT = String.raw `      /* ---------- fo
           '<div class="audit-list">' + groups.map(function (group, index) { return auditRowHtml(group, index, totalWaste, slices[index]); }).join('') + '</div>' +
           '<footer class="audit-end">' +
             '<h3>Stop burning tokens on these mistakes.</h3>' +
-            '<button class="rdo-cta" data-connect-echo>' + (connected ? 'Continue' : 'Add') +
+            '<button class="rdo-cta" data-connect-echo>' + (connected ? 'Continue' : 'Connect Echo') +
               '<img class="cta-face" src="/hud-assets/echo-face-cutout.png" alt="Echo" />' +
               '<svg class="cta-arrow" viewBox="0 0 64 26" aria-hidden="true">' +
                 '<defs><filter id="ctaPencil" x="-20%" y="-40%" width="140%" height="180%"><feTurbulence type="fractalNoise" baseFrequency="0.05 0.12" numOctaves="3" seed="11"/><feDisplacementMap in="SourceGraphic" scale="2.6"/></filter></defs>' +

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

@@ -173,12 +173,23 @@ export const SETUP_PAGE_CLIENT_REPORT_CITY = String.raw `      /* ---------- ful
         var scanned = Math.max(0, Number(progress.scanned || 0));
         var total = Math.max(0, Number(progress.total || 0));
         var pct = total > 0 ? Math.min(100, Math.round((scanned / total) * 100)) : 0;
-        var elapsed = Number(progress.stageElapsedMs || 0);
-        var unit = progress.stage === "reading-transcripts" ? "transcript files" : "sessions";
-        var stage = progress.label || "Starting local scan";
-        var caption = total > 0
-          ? stage + " " + number(scanned) + " / " + number(total) + " " + unit + (elapsed > 0 ? " · " + Math.round(elapsed / 1000) + "s" : "")
-          : stage + "…";
+        if (!reportEstimateDeadline) reportEstimateDeadline = Date.now() + 30000;
+        function estimateCaption() {
+          var seconds = Math.ceil((reportEstimateDeadline - Date.now()) / 1000);
+          return seconds > 0
+            ? "About " + seconds + " seconds remaining"
+            : "Still working — your report will be ready soon.";
+        }
+        var caption = estimateCaption();
+        function updateEstimateCaption() {
+          var node = document.getElementById("scan-load-caption");
+          if (!node) return;
+          node.textContent = estimateCaption();
+          if (Date.now() >= reportEstimateDeadline && reportEstimateTimer) {
+            clearInterval(reportEstimateTimer);
+            reportEstimateTimer = null;
+          }
+        }
         var fill = document.getElementById("scan-load-fill");
         if (app.className === "scanLoading" && fill) {
           fill.style.width = pct + "%";
@@ -191,23 +202,25 @@ export const SETUP_PAGE_CLIENT_REPORT_CITY = String.raw `      /* ---------- ful
         setHead("Reading your local coding history", "Local scan");
         app.className = "scanLoading";
         app.innerHTML =
-          '<div class="scanLoader" aria-live="polite">' +
-            '<div class="scanLoaderLead">' +
-              '<span class="scanMascot" aria-hidden="true"><img src="/hud-assets/echo-face-cutout.png" alt="" /></span>' +
-              '<div class="scanLoaderCopy">' +
-                '<p class="scanEyebrow">Local scan</p>' +
-                '<h2 class="siteHeadline">Reading your <strong>local coding history</strong></h2>' +
-                '<p class="scanIntro">Echo is organizing your Codex and Claude Code sessions on this Mac.</p>' +
-              '</div>' +
-            '</div>' +
-            '<div class="scanProgressCard">' +
-              '<div class="scanProgress" role="progressbar" aria-label="Local scan progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '">' +
-                '<i id="scan-load-fill" class="scanProgressFill" style="width:' + pct + '%"></i>' +
-              '</div>' +
-              '<p id="scan-load-caption" class="scanCaption">' + esc(caption) + '</p>' +
+          '<section class="mvpReading" aria-live="polite">' +
+            '<span class="scanMascot mvpReadingAnimation" aria-hidden="true">' +
+              '<span class="scanMascotFrames">' +
+                '<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>' +
+            '</span>' +
+            '<h2>Reading your coding history…</h2>' +
+            '<p id="scan-load-caption" class="scanCaption">' + esc(caption) + '</p>' +
+            '<div class="scanProgress mvpReadingProgress" role="progressbar" aria-label="Local scan progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '">' +
+              '<i id="scan-load-fill" class="scanProgressFill" style="width:' + pct + '%"></i>' +
             '</div>' +
-            '<p class="scanPrivacy"><span aria-hidden="true"></span>Transcripts stay on this device during the scan.</p>' +
-          '</div>';
+          '</section>';
+        if (!reportEstimateTimer) reportEstimateTimer = setInterval(updateEstimateCaption, 1000);
       }
 
 `;

package/dist/setup-page/document.js

@@ -11,7 +11,7 @@ const SETUP_PAGE_BODY = String.raw `
       </div>
       <div class="pill" id="status">Local</div>
     </header>
-    <section id="app" class="state">Preparing setup...</section>
+    <section id="app" class="state" aria-busy="true"></section>
   </main>
   <dialog id="echo-note" class="echo-note-dlg">
     <button class="nclose" aria-label="Close">&times;</button>

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

@@ -146,6 +146,263 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       min-height: min(660px, calc(100vh - 120px));
       margin: 0 auto;
     }
+    .localAuthWelcomeStage {
+      width: min(760px, 100%);
+      min-height: calc(100vh - clamp(56px, 10vw, 116px));
+    }
+    body.readyMode:has(.localAuthWelcome) {
+      background: var(--echo-paper-canvas);
+      background-image: none;
+    }
+    .localAuthWelcome {
+      width: min(590px, 100%);
+      display: grid;
+      justify-items: center;
+      gap: 22px;
+      text-align: center;
+      color: var(--echo-ink-text);
+    }
+    .localAuthOrbScene {
+      position: relative;
+      display: grid;
+      justify-items: center;
+      width: 108px;
+      height: 142px;
+      margin-bottom: 2px;
+    }
+    .localAuthOrb {
+      position: relative;
+      display: block;
+      width: 66px;
+      height: 66px;
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.56) 0 4%, transparent 24%),
+        radial-gradient(circle at 54% 66%, #147fdc 0 22%, transparent 58%),
+        linear-gradient(145deg, #68d9ff 0%, #21a9f4 46%, #1172d3 100%);
+      box-shadow:
+        inset -9px -12px 18px rgba(0,74,177,0.18),
+        0 12px 24px rgba(17,114,211,0.16);
+      animation: localAuthOrbFloat 3.2s ease-in-out infinite;
+    }
+    .localAuthOrb::before,
+    .localAuthOrb::after {
+      content: "";
+      position: absolute;
+      top: 28px;
+      width: 5px;
+      height: 8px;
+      border-radius: 50%;
+      background: #11100f;
+    }
+    .localAuthOrb::before { left: 24px; }
+    .localAuthOrb::after { right: 24px; }
+    .localAuthOrbShadow {
+      position: absolute;
+      left: 50%;
+      bottom: 2px;
+      width: 90px;
+      height: 10px;
+      border-radius: 50%;
+      background: rgba(65,61,54,0.12);
+      filter: blur(7px);
+      transform: translateX(-50%);
+      animation: localAuthOrbShadow 3.2s ease-in-out infinite;
+    }
+    @keyframes localAuthOrbFloat {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    @keyframes localAuthOrbShadow {
+      0%, 100% { opacity: 0.78; transform: translateX(-50%) scaleX(1); }
+      50% { opacity: 0.42; transform: translateX(-50%) scaleX(0.72); }
+    }
+    .localAuthWelcomeCopy {
+      display: grid;
+      justify-items: center;
+      gap: 6px;
+    }
+    .localAuthWelcomeCopy h2 {
+      margin: 0;
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-script, "Caveat", cursive);
+      font-size: clamp(44px, 6vw, 58px);
+      font-weight: 700;
+      line-height: 0.95;
+      letter-spacing: 0;
+    }
+    .localAuthWelcomeCopy p {
+      margin: 0;
+      color: #74736f;
+      font-size: clamp(14px, 1.7vw, 17px);
+      line-height: 1.45;
+      letter-spacing: 0.01em;
+    }
+    .localAuthWelcomeForm {
+      width: min(520px, 100%);
+      display: grid;
+      gap: 16px;
+    }
+    .localAuthEmailCapsule {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 58px;
+      align-items: center;
+      min-height: 64px;
+      border: 1px solid rgba(78,78,75,0.20);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.94);
+      padding: 5px 6px 5px 22px;
+      box-shadow: 0 3px 8px rgba(50,48,43,0.08);
+      transition: border-color 160ms ease, box-shadow 160ms ease;
+    }
+    .localAuthEmailCapsule .srOnly {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    .localAuthEmailCapsule:focus-within {
+      border-color: rgba(26,58,143,0.48);
+      box-shadow: 0 0 0 3px rgba(26,58,143,0.10), 0 3px 8px rgba(50,48,43,0.08);
+    }
+    .localAuthEmailCapsule input {
+      min-width: 0;
+      border: 0;
+      background: transparent;
+      color: var(--echo-ink-text);
+      font: inherit;
+      font-size: 17px;
+      outline: none;
+    }
+    .localAuthEmailCapsule input::placeholder { color: #a7a7a3; }
+    .localAuthEmailCapsule button {
+      width: 52px;
+      height: 52px;
+      display: grid;
+      place-items: center;
+      border: 0;
+      border-radius: 50%;
+      background: var(--echo-ink-primary);
+      color: #fff;
+      cursor: pointer;
+      font: inherit;
+      font-size: 27px;
+      line-height: 1;
+      transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
+    }
+    .localAuthEmailCapsule button:hover:not(:disabled) {
+      transform: translateX(2px);
+      background: #234ba9;
+    }
+    .localAuthEmailCapsule button:focus-visible {
+      outline: 3px solid rgba(26,58,143,0.20);
+      outline-offset: 3px;
+    }
+    .localAuthEmailCapsule button:disabled {
+      background: #ccccca;
+      color: #fff;
+      cursor: not-allowed;
+      opacity: 1;
+    }
+    .localAuthConsent {
+      width: min(470px, calc(100% - 24px));
+      display: grid;
+      grid-template-columns: 19px minmax(0, 1fr);
+      gap: 10px;
+      align-items: start;
+      justify-self: center;
+      color: #969591;
+      font-size: 13px;
+      line-height: 1.55;
+      text-align: left;
+    }
+    .localAuthConsent input {
+      width: 18px;
+      height: 18px;
+      margin: 2px 0 0;
+      accent-color: var(--echo-ink-primary);
+    }
+    .localAuthConsent a {
+      color: #62615e;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .localAuthWelcomeForm .localAuthStatus {
+      width: min(470px, calc(100% - 24px));
+      justify-self: center;
+      text-align: left;
+    }
+    .localAuthOtpWelcome {
+      width: min(620px, 100%);
+      gap: 18px;
+    }
+    .localAuthOtpWelcome .localAuthOrbScene {
+      margin-bottom: -4px;
+    }
+    .localAuthOtpWelcome .localAuthWelcomeCopy {
+      gap: 10px;
+    }
+    .localAuthOtpWelcome .localAuthWelcomeCopy p strong {
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-mono);
+      font-weight: 700;
+    }
+    .localAuthOtpForm {
+      width: min(540px, 100%);
+      gap: 14px;
+    }
+    .localAuthOtpCells {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(42px, 1fr));
+      gap: 10px;
+      width: 100%;
+    }
+    .localAuthOtpCells input {
+      width: 100%;
+      aspect-ratio: 1 / 0.82;
+      min-height: 58px;
+      border: 1.5px solid rgba(78,78,75,0.18);
+      border-radius: 8px;
+      background: rgba(255,255,255,0.95);
+      box-shadow: 0 3px 8px rgba(50,48,43,0.10);
+      color: var(--echo-ink-text);
+      font-family: var(--echo-font-body);
+      font-size: clamp(26px, 4vw, 34px);
+      font-weight: 650;
+      line-height: 1;
+      text-align: center;
+      outline: none;
+      transition: border-color 160ms ease, box-shadow 160ms ease;
+    }
+    .localAuthOtpCells input:focus {
+      border-color: rgba(26,58,143,0.72);
+      box-shadow: 0 0 0 4px rgba(26,58,143,0.14), 0 3px 8px rgba(50,48,43,0.10);
+    }
+    .localAuthVerifyWide,
+    .localAuthBackWide {
+      width: 100%;
+      min-height: 56px;
+      border-radius: 999px;
+      justify-content: center;
+    }
+    .localAuthOtpForm .localAuthStatus {
+      width: min(390px, 100%);
+      justify-self: center;
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-mono);
+      font-size: 14px;
+      line-height: 1.45;
+      text-align: center;
+    }
+    .localAuthOtpForm .localAuthStatus.is-error {
+      color: #c7372f;
+    }
     .localAuthCard {
       width: min(680px, 100%);
       border: 1.5px solid rgba(26,58,143,0.16);
@@ -262,6 +519,49 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       color: #8b2c26;
       font-weight: 650;
     }
+    @media (max-width: 560px) {
+      .localAuthWelcomeStage {
+        min-height: calc(100vh - 56px);
+      }
+      .localAuthWelcome {
+        gap: 18px;
+      }
+      .localAuthOrbScene {
+        width: 88px;
+        height: 112px;
+      }
+      .localAuthOrb {
+        width: 58px;
+        height: 58px;
+      }
+      .localAuthOrb::before,
+      .localAuthOrb::after {
+        top: 25px;
+      }
+      .localAuthOrb::before { left: 21px; }
+      .localAuthOrb::after { right: 21px; }
+      .localAuthWelcomeCopy h2 {
+        font-size: 44px;
+      }
+      .localAuthEmailCapsule {
+        min-height: 58px;
+        grid-template-columns: minmax(0, 1fr) 50px;
+        padding-left: 18px;
+      }
+      .localAuthEmailCapsule button {
+        width: 46px;
+        height: 46px;
+      }
+      .localAuthConsent {
+        width: calc(100% - 16px);
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .localAuthOrb,
+      .localAuthOrbShadow {
+        animation: none;
+      }
+    }
     .track { height: 12px; overflow: hidden; border-radius: 999px; background: #e8e8e1; margin: 16px 0 10px; }
     .fill { height: 100%; width: 0%; background: var(--echo-ink-primary); transition: width 180ms ease; }
     /* indeterminate "we're working on it" bar for the prep phase (before job counts move) */
@@ -1789,6 +2089,36 @@ export const SETUP_PAGE_STYLES_EXTRACTION = String.raw `    /* ---- dashboard (p
       max-width: 650px;
       margin: 14px 0 0;
     }
+    .planGateStage {
+      width: 100%;
+    }
+    .planGateDecision {
+      text-align: left;
+    }
+    .planGateHero {
+      display: grid;
+      grid-template-columns: 94px minmax(0, 1fr);
+      align-items: center;
+      gap: clamp(20px, 3vw, 34px);
+      border-bottom: 1px solid #d7d8d3;
+      padding: clamp(26px, 4vw, 42px) clamp(22px, 4vw, 34px);
+    }
+    .planGateHero h2 {
+      max-width: 760px;
+      margin: 0;
+      font-size: clamp(38px, 5vw, 60px);
+      line-height: 0.96;
+    }
+    .planGateHero p {
+      max-width: 680px;
+      margin: 14px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 16px;
+      line-height: 1.5;
+    }
+    .planGateAccount {
+      border-top: 1px solid #d7d8d3;
+    }
     .proofStrip {
       width: 100%;
       justify-content: flex-start;