@echomem/mcp 1.4.26 → 1.4.28

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

@@ -48,34 +48,61 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         return envelope;
       }
       function renderReportIssue(code, message) {
+        void message;
         report = null;
         reportEnvelope = null;
         resetReportSurface();
-        setHead("Your local report could not be shown", "Needs attention");
-        app.className = "loading-panel";
+        setHead("We couldn't finish this scan", "Needs attention");
+        app.className = "reportMessageStage";
         app.innerHTML =
-          '<div style="padding:24px" data-report-state="failed">' +
-            '<h2>No backup or sample data was shown</h2>' +
-            '<p class="helper" style="margin-top:10px">' + esc(message || "The local scan did not produce a report that passed validation.") + '</p>' +
-            '<div class="warning" style="margin-top:16px;margin-bottom:0"><strong>Error ' + esc(code || "REPORT_FAILED") + '</strong><br />Close this tab, check the terminal, and run <code>echomem-mcp init</code> again.</div>' +
-          '</div>';
+          '<section class="reportMessage" data-report-state="failed">' +
+            '<h2>We couldn’t finish this scan.</h2>' +
+            '<p>Your coding history is unchanged.</p>' +
+            '<p>Close this tab and run <code>echomem-mcp init</code> again.</p>' +
+            '<details class="reportTechnical"><summary>Technical details</summary><code>' + esc(code || "REPORT_FAILED") + '</code></details>' +
+          '</section>';
       }
       function renderEmptyReport() {
         report = null;
         reportEnvelope = null;
         resetReportSurface();
         setHead("No local coding history found", "Local scan complete");
-        app.className = "loading-panel";
+        app.className = "reportMessageStage";
         app.innerHTML =
-          '<div style="padding:24px" data-report-state="empty">' +
-            '<h2>There is no local Codex or Claude Code history to analyze yet</h2>' +
-            '<p class="helper" style="margin-top:10px">Echo checked this machine and found no supported sessions with token usage. Start a coding session, then run <code>echomem-mcp init</code> again.</p>' +
-            '<p class="helper" style="margin-top:10px"><strong>No demo data, percentages, savings, persona, or city was substituted.</strong></p>' +
-          '</div>';
+          '<section class="reportMessage" data-report-state="empty">' +
+            '<h2>No coding history found.</h2>' +
+            '<p>Start a Codex or Claude Code session, then run <code>echomem-mcp init</code> again.</p>' +
+          '</section>';
       }
       function renderBridgeIssue() {
         renderReportIssue("BRIDGE_UNREACHABLE", "The local bridge stopped answering before your report was ready. Your terminal may have closed or the process may have stopped.");
       }
+      function renderDiscoveryCheck(slow) {
+        void slow;
+        setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
+        setHead("Loading", "Working");
+        app.className = "discoveryLoader";
+        app.innerHTML = '<div class="discoverySpinner" role="status" aria-label="Loading"><span aria-hidden="true"></span></div>';
+      }
+      function renderDiscoveryCheckIssue(error) {
+        setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
+        setHead("Session refresh paused", "Needs attention");
+        app.className = "loading-panel";
+        app.innerHTML =
+          '<div style="padding:24px"><h2>Echo could not refresh session status</h2>' +
+          '<p class="helper">Keep the terminal open and try the local check again.</p>' +
+          (error ? '<details class="reportTechnical"><summary>Technical details</summary><code>' + esc(error) + '</code></details>' : '') +
+          '<div class="actions"><button id="retryDiscoveryCheck" class="primary">Try again</button></div></div>';
+        var retry = document.getElementById("retryDiscoveryCheck");
+        if (retry) retry.onclick = function () {
+          statsPollStarted = false;
+          void waitForStats();
+        };
+      }
       function renderLogoutPending() {
         setCityMode(false);
         setHead("Signing out locally", "Working");
@@ -95,30 +122,36 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       async function waitForStats() {
         if (statsPollStarted) return;
+        var statsEpoch = accountStateEpoch;
         statsPollStarted = true;
         setCityMode(false);
         setExtractMode(false);
         setReadyMode(true);
-        setHead("Checking extraction", "Working");
-        app.className = "loading-panel";
-        app.innerHTML = '<div style="padding:24px"><h2>Checking for active work</h2><p class="helper">Echo is reconnecting to any extraction already running on this machine.</p></div>';
+        renderDiscoveryCheck(false);
         try {
           if (await resumeExistingExtraction()) return;
+          if (statsEpoch !== accountStateEpoch || !connected) return;
           var started = Date.now();
           var lastError = "";
           for (;;) {
-            if (decisionMade) return;
+            if (decisionMade || statsEpoch !== accountStateEpoch || !connected) return;
             try {
               var res = await fetchWithTimeout("/stats?nonce=" + encodeURIComponent(nonce), { credentials: "omit" }, 3000);
+              if (statsEpoch !== accountStateEpoch || !connected) return;
               if (res.status === 200) {
-                stats = await res.json();
-                if (decisionMade) return;
+                var nextStats = await res.json();
+                if (decisionMade || statsEpoch !== accountStateEpoch || !connected) return;
+                stats = nextStats;
                 if (connected && !billingStatus && !billingStatusLoading) {
                   try { await refreshBillingStatus(); } catch (_) {}
-                  if (decisionMade) return;
+                  if (decisionMade || statsEpoch !== accountStateEpoch || !connected) return;
                 }
                 renderDashboard();
-                if (stats && stats.partial) { await sleep(1200); continue; }
+                if (stats && stats.partial) {
+                  await sleep(1200);
+                  if (statsEpoch !== accountStateEpoch || !connected) return;
+                  continue;
+                }
                 return;
               }
               if (res.status !== 202) throw new Error(await res.text() || ("HTTP " + res.status));
@@ -153,6 +186,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         readyStage = "plan";
         app.className = "planGateStage";
         app.innerHTML =
+          setupJourney(3) +
           '<section class="planGateDecision">' +
             '<div class="setupPlanSlot" id="setupPlan"></div>' +
             '<aside class="planGateAccount" aria-label="Connected account"><div class="setupAccountSlot" id="setupAccount"></div></aside>' +
@@ -170,7 +204,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var discovery = stats && stats.discovery ? stats.discovery : {};
         var isPartial = !!(stats && stats.partial);
         var localScanReady = !isPartial || discovery.phase === "exact" || discovery.phase === "full";
-        var eta = migratable && migratable.eta ? migratable.eta : {};
         var skippedActive = typeof migratable.skippedActive === "number" ? migratable.skippedActive : 0;
         var sessions = stats && stats.sessions ? stats.sessions : {};
         // The "quick" phase counts only this device's local ledger; it does not know what the account
@@ -181,25 +214,36 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var knownDone = pendingTrusted && pending === 0;
         var canExtract = pendingTrusted && pending > 0;
         var pendN = hasPendingCount ? pending : 0;
-        var etaLabel = eta.estimatedLabel || migratable.estimatedLabel || "a couple of minutes";
         var pendingCodex = typeof migratable.pendingCodex === "number" ? migratable.pendingCodex : null;
         var pendingClaudeCode = typeof migratable.pendingClaudeCode === "number" ? migratable.pendingClaudeCode : null;
         if (connected && !billingStatusLoading && !setupPlanConfirmed()) {
           renderPlanGate();
           return;
         }
+        var importableNow = canExtract ? Math.min(pendN, historicalSelectionLimit()) : 0;
+        var planLimited = canExtract && importableNow < pendN;
+        var deferredByPlan = planLimited ? pendN - importableNow : 0;
+        var currentPlan = String(billingStatus && billingStatus.plan || "").toLowerCase();
+        var currentPlanLabel = paidRecallPlan(currentPlan)
+          ? currentPlan.charAt(0).toUpperCase() + currentPlan.slice(1) + " Echo"
+          : "Original Echo";
         setHead("Turn coding history into memory", pendingTrusted ? (knownDone ? "Done" : "Ready") : (localScanReady ? "Ready" : "Scanning"));
         var headlineHtml = !pendingTrusted
           ? "Counting your <strong>new conversations…</strong>"
           : (knownDone
               ? "You are <strong>all caught up.</strong>"
-              : "Echo found <strong>" + esc(number(pendN)) + " new coding session" + (pendN === 1 ? "" : "s") + ".</strong>");
+              : (planLimited
+                  ? "<strong>" + esc(number(pendN)) + " sessions</strong> found."
+                  : "<strong>" + esc(number(pendN)) + " sessions</strong> are ready to review."));
         var sub = !pendingTrusted
           ? "Echo is matching your local history against what is already in memory."
-          : (knownDone
+            : (knownDone
             ? (skippedActive ? number(skippedActive) + " active conversation" + (skippedActive === 1 ? " is" : "s are") + " still changing, so Echo will pick them up later." : "Your history is already in EchoMem. Nothing new to extract.")
-            : "Turn them into memory your agents can recall: decisions, fixes, and where you left off. No more re-explaining your project every session.");
-        var extractLabel = !pendingTrusted ? "Counting…" : (canExtract ? "Start memory extraction" : "All caught up");
+            : (planLimited
+                ? (importableNow > 0
+                    ? currentPlanLabel + " can import " + number(importableNow) + " of them. Choose which ones to bring into memory; the other " + number(deferredByPlan) + " stay on this Mac."
+                    : currentPlanLabel + " has no coding-session imports remaining. These sessions stay on this Mac.")
+                : ""));
         // Mount the dashboard shell ONCE so the WebGL plate iframe is never re-created across /stats polls.
         // (Rebuilding app.innerHTML on every partial-scan poll reloaded the iframe → the city flickered.)
         // Later polls only patch the text/counts in place; the iframe stays mounted.
@@ -214,9 +258,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           // one-line strip, not stat cards; the ETA is a commitment-moment note under the button,
           // not a display-size headline.
           app.innerHTML =
+            setupJourney(4) +
+            '<aside class="readyUtilityNav" aria-label="Account and plan settings">' +
+              '<div class="planGateAccount readyAccountNav" aria-label="Connected account"><div class="setupAccountSlot" id="setupAccount"></div></div>' +
+              '<div class="readyPlanNav" aria-label="Current plan"><span class="readyPlanNavLabel">Plan</span><div class="setupPlanSlot" id="setupPlan"></div></div>' +
+            '</aside>' +
             '<div id="exBanner"></div>' +
             '<section class="readyDecision extractionReady">' +
-              '<p class="utilityEyebrow readyEyebrow">History import / review</p>' +
               '<div class="readyHero">' +
                 '<img class="readyMascot" src="/hud-assets/echo-face-cutout.png" alt="" />' +
                 '<div class="exCopy">' +
@@ -225,20 +273,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
                 '</div>' +
               '</div>' +
               '<div class="proofStrip" id="exSources"></div>' +
+              '<div class="billingCommitmentSlot" id="billingCommitment"></div>' +
               '<div class="readyGo">' +
                 '<div class="actions">' +
                   '<button id="migrate" class="primary"></button>' +
-                  '<button type="button" id="skipHistoryImport" class="secondary skipHistoryButton">Skip for now</button>' +
                 '</div>' +
                 '<p class="ctaMeta" id="exEta"></p>' +
               '</div>' +
-              '<aside class="readySettings" aria-label="Account and plan settings">' +
-                '<div class="readySetting readyAccountSetting"><span class="readySettingLabel">Account</span><div class="setupAccountSlot" id="setupAccount"></div></div>' +
-                '<div class="readySetting readyPlanSetting"><span class="readySettingLabel">Plan</span><div class="setupPlanSlot" id="setupPlan"></div></div>' +
-              '</aside>' +
-              '<div class="readyFoot">' +
-                '<details class="readyExplain" id="readyExplain"></details>' +
-              '</div>' +
             '</section>' +
             '<dialog class="sessionPicker" id="sessionPicker" aria-labelledby="sessionPickerTitle"></dialog>';
           document.getElementById("migrate").onclick = openSessionPicker;
@@ -251,7 +292,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         document.getElementById("exSub").textContent = sub;
         var codexN = pendingTrusted && pendingCodex !== null ? pendingCodex : (sessions.codex || 0);
         var claudeN = pendingTrusted && pendingClaudeCode !== null ? pendingClaudeCode : (sessions.claudeCode || 0);
-        var alreadyN = Math.max(0, (sessions.total || 0) - pendN);
         // Proof strip: one quiet line of evidence that the scan is real. Hidden when there is nothing to show.
         var srcIcon = function (id, fallback) {
           var asset = id === "claude-desktop" ? "claude" : "codex";
@@ -268,59 +308,75 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         // Reassurances live at the moment of commitment — right under the button.
         document.getElementById("exEta").innerHTML = pendingTrusted
           ? (canExtract
-              ? '<span class="cm">&asymp; ' + esc(etaLabel) + '</span><span class="cmDot">&middot;</span><span class="cm">runs locally</span>' + (alreadyN ? '<span class="cmDot">&middot;</span><span class="cm">' + esc(number(alreadyN)) + ' already-saved skipped</span>' : '')
+              ? ''
               : 'Nothing new to extract right now.')
           : 'Echo is checking local history against saved memory&hellip;';
-        document.getElementById("readyExplain").innerHTML =
-          '<summary>What exactly happens?</summary>' +
-          '<p>A coding session is a local Codex or Claude Code transcript from this Mac. Echo extracts compact memories from it, not a full chat replay.</p>' +
-          '<div class="readySteps">' +
-            '<div class="readyStep"><strong>Read locally</strong><span>Echo scans session logs on this device.</span></div>' +
-            '<div class="readyStep"><strong>Skip repeats</strong><span>Anything already in memory is ignored.</span></div>' +
-            '<div class="readyStep"><strong>Save memory</strong><span>Decisions, fixes, context, and next steps become searchable.</span></div>' +
-          '</div>';
         renderSetupPlan(canExtract);
         renderAccountChoice();
         if (canExtract && !billingStatus && !billingStatusLoading) void refreshBillingStatus();
         // While still counting, hide the primary button entirely; the headline + source split
         // already say it is working, and the ready state should present one clear action.
         var migrateBtn = document.getElementById("migrate");
-        var skipHistoryBtn = document.getElementById("skipHistoryImport");
         if (pendingTrusted) {
           migrateBtn.style.display = "";
-          if (canExtract) ensureSessionSelection();
-          migrateBtn.disabled = canExtract && (!setupPlanConfirmed() || selectedSessionKeyList().length === 0);
-          migrateBtn.innerHTML = '<span>' + esc(canExtract ? "Review " + number(pendN) + " sessions" : "Finish setup") + '</span>' + (canExtract ? setupIcon("arrow-right") : "");
+          var candidatesReady = !canExtract || candidateSessions().length > 0;
+          if (canExtract && candidatesReady) ensureSessionSelection();
+          // This button opens the picker; zero selected belongs to the picker's Start button.
+          migrateBtn.disabled = canExtract && (
+            !setupPlanConfirmed() ||
+            !candidatesReady ||
+            historicalSelectionLimit() === 0
+          );
+          migrateBtn.innerHTML = '<span>' + esc(
+            canExtract
+              ? (candidatesReady
+                  ? (importableNow === 0
+                      ? "No imports available"
+                      : (planLimited
+                          ? "Choose " + number(importableNow) + " of " + number(pendN) + " sessions"
+                          : "Review " + number(pendN) + " sessions"))
+                  : "Preparing session list…")
+              : "Finish setup"
+          ) + '</span>' + (canExtract && candidatesReady ? setupIcon("arrow-right") : "");
           migrateBtn.onclick = canExtract ? openSessionPicker : skip;
-          if (skipHistoryBtn) {
-            skipHistoryBtn.style.display = canExtract ? "" : "none";
-            skipHistoryBtn.onclick = skip;
-          }
         } else {
           migrateBtn.style.display = "none";
-          if (skipHistoryBtn) skipHistoryBtn.style.display = "none";
         }
       }
+      // The picker's confirm button checks this BEFORE closing the dialog. Closing first turned a
+      // blocked start into a silent bounce back to the dashboard — or all the way to the plan gate,
+      // because a billing refresh can flip setupPlanConfirmed() while the picker is open.
+      function migrateBlockedReason() {
+        if (!setupPlanConfirmed()) return "Choose Original, Pro, or Power to bring Echo home.";
+        if (!selectedSessionKeyList().length) return "Choose at least one conversation to extract.";
+        return "";
+      }
+      function setSessionPickerStatus(message) {
+        var status = document.getElementById("sessionPickerStatus");
+        if (status) status.textContent = message;
+      }
       async function startMigrate() {
         if (decisionMade) return;
-        if (!setupPlanConfirmed()) {
-          setSetupPlanStatus("Choose Original, Pro, or Power to bring Echo home.");
+        var blocked = migrateBlockedReason();
+        if (blocked) {
+          if (!setupPlanConfirmed()) setSetupPlanStatus(blocked);
+          else openSessionPicker();
+          setSessionPickerStatus(blocked);
           return;
         }
         var selectedKeys = selectedSessionKeyList();
-        if (!selectedKeys.length) {
-          openSessionPicker();
-          var pickerStatus = document.getElementById("sessionPickerStatus");
-          if (pickerStatus) pickerStatus.textContent = "Choose at least one conversation to extract.";
-          return;
-        }
         stopBillingPoll();
         decisionMade = true;
         extractionEnded = false;
         setCityMode(false);
+        setScanMode(false);
+        setReadyMode(false);
+        setExtractMode(true);
         setHead("Extracting", "Starting");
-        app.className = "";
-        app.innerHTML = '<div class="miniLoad"><h2>Starting extraction</h2><p>Echo is sizing the remaining jobs, then imports automatically. Finished work is saved as it goes.</p><div class="miniBar"><i></i></div></div>';
+        app.className = "extractionStartStage";
+        app.innerHTML =
+          setupJourney(4) +
+          '<div class="discoverySpinner" role="status" aria-label="Starting import"><span aria-hidden="true"></span></div>';
         var started;
         try {
           started = await postJson("/migrate", { conversationKeys: selectedKeys });
@@ -334,8 +390,34 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         await pollProgress();
       }
       async function resumeExistingExtraction() {
+        var resumeEpoch = accountStateEpoch;
+        var existing = null;
+        var lastError = "";
+        for (var attempt = 0; attempt < 3; attempt++) {
+          try {
+            var progressResponse = await fetchWithTimeout(
+              "/progress?nonce=" + encodeURIComponent(nonce),
+              { credentials: "omit", cache: "no-store" },
+              3000
+            );
+            if (!progressResponse.ok) throw new Error(await progressResponse.text() || ("HTTP " + progressResponse.status));
+            existing = await progressResponse.json();
+            break;
+          } catch (error) {
+            if (resumeEpoch !== accountStateEpoch || !connected) return false;
+            lastError = error && error.message ? error.message : String(error);
+            if (attempt < 2) {
+              renderDiscoveryCheck(true);
+              await sleep(500 * (attempt + 1));
+            }
+          }
+        }
+        if (!existing) {
+          renderDiscoveryCheckIssue(lastError);
+          return true;
+        }
         try {
-          var existing = await getJson("/progress");
+          if (resumeEpoch !== accountStateEpoch || !connected) return false;
           if (!existing || existing.status === "idle") return false;
           decisionMade = true;
           extractionEnded = false;
@@ -345,21 +427,8 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             void pollProgress();
           }
           return true;
-        } catch (_) {
-          // Stats cannot prove that no import is running. Stay in the recovery view until
-          // the authoritative progress endpoint answers instead of exposing a second start.
-          decisionMade = true;
-          extractionEnded = false;
-          extractMounted = false;
-          renderProgress({
-            status: "running",
-            total: 0,
-            completed: 0,
-            failed: 0,
-            extracted: 0,
-            latest: "Reconnecting to the active extraction..."
-          });
-          void pollProgress();
+        } catch (error) {
+          renderDiscoveryCheckIssue(error && error.message ? error.message : String(error));
           return true;
         }
       }
@@ -414,11 +483,14 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         // each poll only rebuilds the text column.
         if (!extractMounted) {
           app.innerHTML =
+            '<div id="setupJourneySlot">' + setupJourney(4) + '</div>' +
             '<section class="exHero"><div class="exCopy" id="exText"></div>' +
             plateBlock() +
             '</section>';
           extractMounted = true;
         }
+        var journeySlot = document.getElementById("setupJourneySlot");
+        if (journeySlot) journeySlot.innerHTML = setupJourney(done ? 5 : 4);
         var shell = app.querySelector(".exHero");
         if (shell) {
           shell.classList.toggle("exHeroResult", done || stopped);
@@ -438,28 +510,19 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             ? '<p class="exSub">' + esc(progress.latest) + '</p>'
             : "";
           t.innerHTML =
-            '<div class="resultStage ' + (done ? "ok" : "warn") + '">' +
-              (done ? '<p class="utilityEyebrow">Memory extraction / complete</p>' : '<p class="utilityEyebrow">Memory extraction / stopped</p>') +
+            '<div class="resultStage ' + (done ? "firstRecallStage ok" : "warn") + '">' +
               '<div class="resultTop">' +
                 '<div>' +
                   (done
-                    ? '<h2 class="savedHeading siteHeadline"><span class="savedMain"><strong>' + esc(number(extracted)) + '</strong> ' + esc(savedMemoryLabel) + '</span></h2>' + completionNote
+                    ? '<h2 class="savedHeading"><span class="savedMain"><strong>' + esc(number(extracted)) + '</strong> ' + esc(savedMemoryLabel) + '</span></h2>' + completionNote
                     : '<h2 class="siteHeadline">Some conversations need <strong>another pass.</strong></h2>' +
-                      '<p class="exSub">' + stopDetail + '</p>' +
-                      '<div class="resultNumber"><strong>' + esc(number(extracted)) + '</strong><span>' + esc(memoryNoun) + '</span></div>') +
+                      '<p class="exSub">' + stopDetail + '</p>') +
                 '</div>' +
               '</div>' +
               (done ? tryItCard() : "") +
-              (done ? "" :
-                '<div class="memoryReceipt">' +
-                  '<p class="receiptK">What just happened</p>' +
-                  '<div class="finishStats">' +
-                    '<div class="finishStat"><strong>' + esc(number(completed)) + '</strong><span>' + esc(conversationNoun) + ' extracted</span></div>' +
-                    '<div class="finishStat"><strong>' + esc(number(extracted)) + '</strong><span>memories ready</span></div>' +
-                  '</div>' +
-                '</div>') +
+              (done ? "" : '<p class="resultSummary">' + esc(number(extracted)) + ' ' + esc(memoryNoun) + ' saved · ' + esc(number(completed)) + ' ' + esc(conversationNoun) + ' processed</p>') +
             '</div>' +
-            (done ? hudTip() + doneCloseNote() : "");
+            "";
           wireTryButtons();
           return;
         }
@@ -480,10 +543,9 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           if (completed >= 5 && elapsed > 20) remainSec = (total - completed) / (completed / elapsed);
           else remainSec = Math.max(0, (exDeadline - now) / 1000);
           if (now > exDeadline) {
-            overdueHtml = '<div class="exOverdue"><strong>Taking longer than expected. Still working.</strong>' +
-              'Everything already processed is saved. Ending now is safe; the next run resumes from the remaining conversations.</div>';
+            overdueHtml = '<div class="exOverdue"><strong>Taking longer than expected.</strong> Saved work is safe.</div>';
           } else {
-            countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes · safe to end and resume</p>';
+            countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes</p>';
           }
         }
         var recoveryNotice = extractionRecoveryMessage
@@ -491,15 +553,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           : "";
         t.innerHTML = recoveryNotice +
           '<div class="workbench">' +
-            '<p class="utilityEyebrow">Memory extraction / live</p>' +
             '<h2 class="siteHeadline">' + (preparing ? "Setting up the <strong>import.</strong>" : "Building your <strong>memory.</strong>") + '</h2>' +
             '<div class="exMeter"><strong>' + (preparing ? "Local" : esc(number(pct)) + "%") + '</strong><span>' + (preparing ? "sizing sessions" : (total ? esc(number(completed)) + " of " + esc(number(total)) + " conversations" : "starting")) + '</span></div>' +
             '<div class="track' + (preparing ? " indef" : "") + '"><div class="fill"' + (preparing ? "" : ' style="width:' + pct + '%"') + '></div></div>' +
-            '<p class="exSub">' + esc(number(extracted)) + ' ' + (extracted === 1 ? "memory" : "memories") + ' captured' + (checkingEdgeCases ? ' · finishing checks' : "") + '.</p>' +
-            '<div class="exCurrent"><i></i><div><span>Now handling</span><strong>' + esc(statusLine) + '</strong></div></div>' +
+            '<p class="exSub">' + esc(number(extracted)) + ' ' + (extracted === 1 ? "memory saved" : "memories saved") + (checkingEdgeCases ? ' · finishing checks' : "") + '.</p>' +
+            (String(statusLine).toLowerCase().indexOf("reconnecting") >= 0 ? '<p class="exActivity">' + esc(statusLine) + '</p>' : '') +
             countdownHtml + overdueHtml +
-            '<div class="extractEndRow"><button type="button" class="secondary" id="endExtraction">End for now</button><span>Ends cleanly; next time continues from saved work.</span></div>' +
-            '<p class="exHint">You can step away from this page. Echo saves each finished conversation as it goes.</p>' +
+            '<div class="extractEndRow"><button type="button" class="secondary" id="endExtraction">End for now</button></div>' +
           '</div>';
         var endBtn = document.getElementById("endExtraction");
         if (endBtn) endBtn.onclick = endExtraction;
@@ -602,21 +662,50 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       async function tryInCodex(prompt) {
         var copied = await copyRecallPrompt(prompt);
-        setLaunchStatus(copied ? "Copied question. Opening Codex..." : "Opening Codex with your question...");
+        setLaunchStatus(copied ? "Opening Codex with your first recall…" : "Opening Codex with your first recall…");
+        startFirstRecallWatch();
         window.location.href = codexDeepLink(prompt);
       }
       async function openClaudeDesktop(prompt) {
         var copied = await copyRecallPrompt(prompt);
-        setLaunchStatus(copied ? "Copied question. Opening Claude Desktop..." : "Opening Claude Desktop...");
+        setLaunchStatus(copied ? "Question copied. Opening Claude Desktop for your first recall…" : "Opening Claude Desktop for your first recall…");
+        startFirstRecallWatch();
         try {
           var res = await postJson("/launch-agent", { agent: "claude-desktop" }, 8000);
-          setLaunchStatus(res && res.message ? res.message : "Question copied. Paste it into Claude Desktop.");
+          setLaunchStatus(res && res.message ? res.message + " Send it there; this page will confirm when Echo remembers." : "Question copied. Send it in Claude Desktop; this page will confirm when Echo remembers.");
         } catch (error) {
           var msg = error && error.message ? error.message : "Could not auto-open Claude.";
           if (msg.indexOf("prompt") === -1 && msg.indexOf("Prompt") === -1) msg += " The question is copied - open Claude Desktop and paste it.";
           setLaunchStatus(msg);
         }
       }
+      function stopFirstRecallWatch() {
+        if (firstRecallPollTimer) window.clearInterval(firstRecallPollTimer);
+        firstRecallPollTimer = null;
+      }
+      async function checkFirstRecallActivation() {
+        if (!firstRecallPollStartedAt || Date.now() - firstRecallPollStartedAt > 120000) {
+          stopFirstRecallWatch();
+          return;
+        }
+        try {
+          var latest = await getJson("/billing-status");
+          if (latest && latest.activation && latest.activation.hasSearchedMemory === true) {
+            stopFirstRecallWatch();
+            document.title = "Echo remembered it — setup complete";
+            var card = document.querySelector(".tryCard");
+            if (card) card.classList.add("is-recalled");
+            setLaunchStatus("Echo remembered it. Setup complete.");
+          }
+        } catch (_) {}
+      }
+      function startFirstRecallWatch() {
+        firstRecallPollStartedAt = Date.now();
+        stopFirstRecallWatch();
+        firstRecallPollTimer = window.setInterval(function () {
+          void checkFirstRecallActivation();
+        }, 2500);
+      }
       function candidateSessions() {
         return stats && Array.isArray(stats.candidateSessions) ? stats.candidateSessions : [];
       }
@@ -701,7 +790,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var edit = document.getElementById("editSessions");
         if (edit) edit.onclick = openSessionPicker;
         var migrateBtn = document.getElementById("migrate");
-        if (migrateBtn) migrateBtn.disabled = selected.length === 0 || !setupPlanConfirmed();
+        if (migrateBtn) migrateBtn.disabled =
+          candidates.length === 0 ||
+          !setupPlanConfirmed() ||
+          historicalSelectionLimit() === 0;
       }
       function updateSessionPickerSelectionUi(dialog, input, limit) {
         var selectedCount = selectedSessionKeyList().length;
@@ -727,13 +819,46 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           '<span class="sessionPickerLimitEyebrow">Plan limit</span>' +
           '<h3>Plan limit reached.</h3>' +
           '<p>Upgrade your plan to select and import more conversations.</p>' +
-          '<div class="sessionPickerLimitActions"><a id="upgradeSessionPlan" class="button primary" href="' + esc(setupPricingUrl("pro", false)) + '" target="_blank" rel="noopener noreferrer">' + linkLabel + '</a>' +
+          '<div class="sessionPickerLimitActions"><button type="button" id="upgradeSessionPlan" class="button primary">' + linkLabel + '</button>' +
           (canDismiss ? '<button type="button" class="textButton" id="dismissSessionLimit">Keep editing</button>' : "") + '</div>' +
         '</div>';
       }
+      async function openSessionPickerPlanAction() {
+        var currentPlan = String(billingStatus && billingStatus.plan || "").toLowerCase();
+        if (currentPlan === "power" || currentPlan === "team" || currentPlan === "enterprise") {
+          setSessionPickerStatus("Opening secure plan options…");
+          var portal = await openHostedPlanOptions();
+          setSessionPickerStatus(portal
+            ? "Plan options opened in Stripe. This page will update automatically."
+            : "Could not open plan options. Try again.");
+          return;
+        }
+        var targetPlan = currentPlan === "pro" ? "power" : "pro";
+        setSessionPickerStatus("Opening secure Stripe checkout…");
+        var checkout = await openHostedBilling(
+          "/billing-checkout",
+          { plan: targetPlan, trial: !billingStatus || billingStatus.trialAvailable !== false },
+          "Creating your secure checkout…",
+          "Checkout opened in Stripe. Keep this local page open; Echo will confirm here automatically."
+        );
+        if (!checkout) {
+          setSessionPickerStatus("Could not open Stripe checkout. Try again.");
+          return;
+        }
+        billingActivationPendingPlan = targetPlan;
+        if (typeof checkout.sessionId === "string") {
+          rememberCheckoutSessionId(checkout.sessionId);
+          billingSyncAttempts = 0;
+          billingSyncLastAttemptAt = 0;
+        }
+        document.title = "Finish checkout — Echo setup is waiting";
+        setSessionPickerStatus("Stripe checkout opened. Return here when you finish; this page updates automatically.");
+      }
       function wireSessionPickerUpgrade() {
-        var upgrade = document.getElementById("upgradeSessionPlan");
-        if (upgrade) upgrade.onclick = function () { startBillingPoll(); };
+        ["upgradeSessionPlan", "upgradeSessionPlanInline"].forEach(function (id) {
+          var upgrade = document.getElementById(id);
+          if (upgrade) upgrade.onclick = function () { void openSessionPickerPlanAction(); };
+        });
         var dismiss = document.getElementById("dismissSessionLimit");
         if (dismiss) dismiss.onclick = hideSessionPickerLimitNotice;
       }
@@ -767,6 +892,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var all = candidateSessions();
         var selected = selectedSessionKeyList();
         var limit = Math.min(all.length, historicalSelectionLimit());
+        var planLimited = all.length > limit;
+        var inlineUpgrade = planLimited && limit > 0
+          ? '<button type="button" id="upgradeSessionPlanInline" class="sessionPickerUpgrade">Upgrade</button>'
+          : "";
         var query = sessionPickerQuery.trim().toLowerCase();
         var filtered = all.filter(function (session) {
           if (sessionPickerSource !== "all" && session.source !== sessionPickerSource) return false;
@@ -792,20 +921,23 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           : "";
         dialog.innerHTML =
           '<div class="sessionPickerShell">' +
-            '<header class="sessionPickerHead"><div><span>Bulk history import</span><h2 id="sessionPickerTitle">Choose conversations</h2><p>Select up to ' + esc(number(limit)) + '. Newest conversations are selected first.</p></div><button type="button" class="sessionPickerClose" id="closeSessionPicker" aria-label="Close">×</button></header>' +
+            '<header class="sessionPickerHead"><div><h2 id="sessionPickerTitle">Choose conversations</h2><p class="sessionPickerSummary"><span class="sessionPickerQuota">Up to <strong>' + esc(number(limit)) + '</strong></span>' + inlineUpgrade + '<span class="sessionPickerOrder">&middot; newest selected first</span></p></div><button type="button" class="sessionPickerClose" id="closeSessionPicker" aria-label="Close">×</button></header>' +
             '<div class="sessionPickerToolbar"><label class="sessionSearch"><span>Search</span><input type="search" id="sessionPickerSearch" placeholder="Title or project" value="' + esc(sessionPickerQuery) + '" /></label>' +
               '<label class="sessionSourceFilter"><span>Source</span><select id="sessionPickerSource"><option value="all"' + (sessionPickerSource === "all" ? " selected" : "") + '>All sources</option><option value="codex"' + (sessionPickerSource === "codex" ? " selected" : "") + '>Codex</option><option value="claude-code"' + (sessionPickerSource === "claude-code" ? " selected" : "") + '>Claude Code</option></select></label>' +
             '</div>' +
             '<div class="sessionPickerActions"><strong>' + esc(number(selected.length)) + ' / ' + esc(number(limit)) + ' selected</strong><span id="sessionPickerStatus" class="sessionPickerStatus" role="status" aria-live="polite">' + (limit === 0 ? "Plan limit reached. Upgrade to import more." : "") + '</span><button type="button" class="textButton" id="selectNewestSessions">Select newest</button><button type="button" class="textButton" id="clearSessions">Clear</button></div>' +
             '<div class="sessionPickerListWrap' + (limit === 0 ? " is-limit-blocked" : "") + '" id="sessionPickerListWrap"><div class="sessionPickerList"' + (limit === 0 ? " inert" : "") + '>' + (rows || '<div class="sessionPickerEmpty">No conversations match these filters.</div>') + overflow + '</div><div class="sessionPickerLimitOverlay" id="sessionPickerLimitOverlay" role="alert"' + (limit === 0 ? "" : " hidden") + '>' + (limit === 0 ? sessionPickerLimitNotice(false) : "") + '</div></div>' +
-            '<footer class="sessionPickerFoot"><p>Only selected conversations will be sent for extraction.</p><div class="sessionPickerFootActions"><button type="button" class="secondary" id="skipSessionImport">Skip history import</button><button type="button" class="primary" id="confirmSessions"' + (selected.length ? "" : " disabled") + '>Start memory extraction</button></div></footer>' +
+            '<footer class="sessionPickerFoot"><div class="sessionPickerFootActions"><button type="button" class="primary" id="confirmSessions"' + (selected.length ? "" : " disabled") + '>Start memory extraction</button></div></footer>' +
           '</div>';
         var close = document.getElementById("closeSessionPicker");
         var confirm = document.getElementById("confirmSessions");
-        var skipImport = document.getElementById("skipSessionImport");
         if (close) close.onclick = function () { dialog.close(); renderSessionSelection(true); };
-        if (confirm) confirm.onclick = function () { dialog.close(); void startMigrate(); };
-        if (skipImport) skipImport.onclick = skip;
+        if (confirm) confirm.onclick = function () {
+          var blocked = migrateBlockedReason();
+          if (blocked) { setSessionPickerStatus(blocked); return; }
+          dialog.close();
+          void startMigrate();
+        };
         wireSessionPickerUpgrade();
         var search = document.getElementById("sessionPickerSearch");
         if (search) search.oninput = function () {
@@ -850,16 +982,15 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         else dialog.setAttribute("open", "");
       }
       function accountInitials(account) {
-        var label = String(account && (account.displayName || account.email) || "EchoMem").trim();
-        return label.split(/\s+/).slice(0, 2).map(function (part) { return part.charAt(0).toUpperCase(); }).join("") || "E";
+        var email = String(account && account.email || "").trim();
+        var label = email ? email.split("@")[0] : "EchoMem";
+        return label.split(/[\s._-]+/).slice(0, 2).map(function (part) { return part.charAt(0).toUpperCase(); }).join("") || "E";
       }
       function renderAccountChoice() {
         var slot = document.getElementById("setupAccount");
         if (!slot) return;
         var account = billingStatus && billingStatus.account;
-        var name = account && account.displayName ? account.displayName : "Connected EchoMem account";
-        var email = account && account.email ? account.email : "This import will be saved to the account connected on this device.";
-        var accountLabel = account && account.email ? account.email : name;
+        var accountLabel = account && account.email ? account.email : "Connected account";
         var avatarUrl = account && account.avatarUrl ? String(account.avatarUrl) : "";
         var avatar = '<span class="setupAccountAvatar" aria-hidden="true">' +
           '<span>' + esc(accountInitials(account)) + '</span>' +
@@ -868,54 +999,168 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         slot.innerHTML =
           '<section class="setupAccountCard" aria-label="Connected EchoMem account">' +
             avatar +
-            '<span class="setupAccountCopy"><small>Logged in as</small><strong>' + esc(accountLabel) + '</strong><span>' + esc(email) + '</span></span>' +
+            '<span class="setupAccountCopy"><small>Logged in as</small><strong>' + esc(accountLabel) + '</strong></span>' +
             '<button type="button" class="textButton setupAccountChange" id="changeSetupAccount">Switch</button>' +
           '</section>';
         var change = document.getElementById("changeSetupAccount");
-        if (change) change.onclick = switchSetupAccount;
+        if (change) change.onclick = renderAccountSwitchConfirm;
+      }
+      function renderAccountSwitchConfirm() {
+        var account = billingStatus && billingStatus.account;
+        var accountLabel = account && account.email
+          ? account.email
+          : "the connected account";
+        accountSwitchPending = true;
+        setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
+        setHead("Switch EchoMem account", "Confirm");
+        app.className = "accountSwitchStage";
+        app.innerHTML =
+          setupJourney(4) +
+          '<section class="accountSwitchConfirm" aria-labelledby="accountSwitchTitle">' +
+            '<button type="button" class="flowBack" id="cancelAccountSwitch">← Back</button>' +
+            '<h2 id="accountSwitchTitle">Switch account?</h2>' +
+            '<p><strong>' + esc(accountLabel) + '</strong> stays connected until you continue.</p>' +
+            '<button type="button" class="primary" id="confirmAccountSwitch">Sign out &amp; switch</button>' +
+            '<p class="localAuthStatus" id="localAuthStatus" role="status" aria-live="polite"></p>' +
+          '</section>';
+        var cancel = document.getElementById("cancelAccountSwitch");
+        if (cancel) cancel.onclick = function () {
+          accountSwitchPending = false;
+          renderDashboard();
+        };
+        var confirm = document.getElementById("confirmAccountSwitch");
+        if (confirm) confirm.onclick = function () { void switchSetupAccount(); };
       }
       async function switchSetupAccount() {
-        var button = document.getElementById("changeSetupAccount");
+        var button = document.getElementById("confirmAccountSwitch");
         if (button) { button.disabled = true; button.textContent = "Signing out..."; }
+        accountStateEpoch++;
+        stopBillingPoll();
+        progressPollRunId++;
         try {
-          await postJson("/logout", {}, 12000);
+          var logoutResult = await postJson("/logout", {}, 12000);
+          if (!logoutResult || logoutResult.connected !== false) {
+            throw new Error("Echo did not confirm that this device signed out.");
+          }
+          accountSwitchPending = false;
           stats = null;
+          statsSlow = false;
           billingStatus = null;
+          billingStatusLoading = false;
           connected = false;
+          rememberSetupPlanChoice("");
           selectedSessionKeys = Object.create(null);
           sessionSelectionTouched = false;
           localAuthEmail = "";
           localAuthTermsAccepted = false;
           localAuthAgeConfirmed = false;
-          renderLocalLogin("");
+          renderLocalLogin("Signed out. Enter the email for the account you want to use.");
         } catch (error) {
-          if (button) { button.disabled = false; button.textContent = "Change account"; }
-          setSetupPlanStatus(error && error.message ? error.message : "Could not switch accounts.");
+          if (connected) startBillingPoll();
+          if (button) { button.disabled = false; button.textContent = "Sign out & switch"; }
+          setLocalAuthStatus(error && error.message ? error.message : "Could not switch accounts.", "error");
         }
       }
       function paidRecallPlan(plan) {
         return ["pro", "power", "team", "enterprise"].indexOf(String(plan || "").toLowerCase()) >= 0;
       }
-      function setupPricingUrl(plan, startTrial) {
-        var paidPlan = plan === "power" ? "power" : "pro";
-        return (billingStatus && billingStatus.pricingUrl)
-          ? billingStatus.pricingUrl + (startTrial ? "&start=" + paidPlan + "&trial=" + (billingStatus.trialAvailable === false ? "0" : "1") : "")
-          : "https://echoknows.com/account?source=mcp_onboarding" + (startTrial ? "&start=" + paidPlan + "&trial=1" : "");
+      function setupPlanPrice(plan) {
+        return plan === "power" ? "$100" : "$20";
+      }
+      function formatBillingDate(value) {
+        if (typeof value !== "string" || !value) return "";
+        var parsed = new Date(value);
+        if (!isFinite(parsed.getTime())) return "";
+        try {
+          return new Intl.DateTimeFormat(undefined, {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          }).format(parsed);
+        } catch (_) {
+          return parsed.toISOString().slice(0, 10);
+        }
+      }
+      function trialChargeDateText() {
+        var chargeAt = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+        try {
+          return new Intl.DateTimeFormat(undefined, {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          }).format(chargeAt);
+        } catch (_) {
+          return chargeAt.toISOString().slice(0, 10);
+        }
+      }
+      function paidPlanLifecycleText(plan) {
+        var state = String(billingStatus && billingStatus.subscriptionStatus || "").toLowerCase();
+        var trialEnd = formatBillingDate(billingStatus && billingStatus.trialEndedAt);
+        var periodEnd = formatBillingDate(billingStatus && billingStatus.currentPeriodEnd);
+        if (billingStatus && billingStatus.cancelAtPeriodEnd === true) {
+          var accessEnd = state === "trialing" ? (trialEnd || periodEnd) : periodEnd;
+          return accessEnd
+            ? "Canceled — active until " + accessEnd + ". It will not renew."
+            : "Canceled — active until the end of this billing period. It will not renew.";
+        }
+        if (state === "trialing") {
+          return trialEnd
+            ? "Trial active until " + trialEnd + ". Then " + setupPlanPrice(plan) + "/month unless canceled."
+            : "Trial active. Then " + setupPlanPrice(plan) + "/month unless canceled.";
+        }
+        if (state === "active" && periodEnd) return "Active — renews on " + periodEnd + ".";
+        return "";
+      }
+      function renderBillingCommitment(plan) {
+        var slot = document.getElementById("billingCommitment");
+        if (!slot) return;
+        if (!paidRecallPlan(plan)) {
+          slot.innerHTML = "";
+          slot.classList.remove("is-visible");
+          return;
+        }
+        var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
+        var state = String(billingStatus && billingStatus.subscriptionStatus || "").toLowerCase();
+        var canceled = !!(billingStatus && billingStatus.cancelAtPeriodEnd === true);
+        var statusLabel = canceled ? "Canceled" : (state === "trialing" ? "Trial active" : "Active");
+        var lifecycle = paidPlanLifecycleText(plan);
+        var quota = billingStatus && billingStatus.historicalConversationQuota;
+        var limit = quota && typeof quota.limit === "number" ? quota.limit : (plan === "power" ? 2000 : 500);
+        var moneyFact = canceled
+          ? "No future charge"
+          : (state === "trialing" ? setupPlanPrice(plan) + "/month after trial" : setupPlanPrice(plan) + "/month");
+        slot.classList.add("is-visible");
+        slot.innerHTML =
+          '<section class="billingCommitment' + (canceled ? ' is-canceled' : '') + '" aria-label="Current plan commitment">' +
+            '<div class="billingCommitmentIdentity"><span>' + esc(statusLabel) + '</span><strong>' + esc(planLabel) + '</strong></div>' +
+            '<div class="billingCommitmentFacts">' +
+              '<span><b>' + esc(number(limit)) + '</b> coding-session imports</span>' +
+              '<span><b>' + esc(moneyFact) + '</b></span>' +
+            '</div>' +
+            '<p>' + esc(lifecycle || "Your paid plan is active.") + '</p>' +
+          '</section>';
       }
       function setupPlanConfirmed() {
         return setupPlanChoice === "free" || paidRecallPlan(billingStatus && billingStatus.plan);
       }
       function setupPlanDefinition(plan) {
+        var trialAvailable = !billingStatus || billingStatus.trialAvailable !== false;
         if (plan === "power") return {
           id: "power",
           name: "Power",
           homeName: "Power",
           promise: "More room. More agents. Much more Echo.",
           price: "$100",
-          cadence: "per month · 14-day trial",
+          cadence: trialAvailable ? "per month · 14-day trial" : "per month · billed immediately",
           sticker: "/hud-assets/echo-pricing-power-sticker.png",
           stickerAlt: "Power Echo arrives with a gold key and a crew of notebook helpers.",
-          features: ["2,000 past chats", "agent-heavy memory", "2,000 context returns / week"]
+          features: [
+            "2,000 past chats",
+            "agent-heavy memory",
+            "2,000 memory recalls / week"
+          ]
         };
         if (plan === "pro") return {
           id: "pro",
@@ -923,11 +1168,15 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           homeName: "Pro",
           promise: "A room for the work you return to every day.",
           price: "$20",
-          cadence: "per month · 14-day trial",
+          cadence: trialAvailable ? "per month · 14-day trial" : "per month · billed immediately",
           sticker: "/hud-assets/echo-pricing-pro-sticker.png",
           stickerAlt: "Pro Echo organizes tabbed notebooks and a daily refresh control.",
           popular: true,
-          features: ["500 past chats", "daily memory updates", "500 context returns / week"]
+          features: [
+            "500 past chats",
+            "daily memory updates",
+            "500 memory recalls / week"
+          ]
         };
         return {
           id: "free",
@@ -938,19 +1187,12 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           cadence: "free forever · no card needed",
           sticker: "/hud-assets/echo-pricing-free-sticker.png",
           stickerAlt: "Original Echo hugs one simple memory card.",
-          features: ["100 past chats", "a few new chats / week", "100 context returns / week"]
+          features: ["100 coding sessions", "a few new sessions / week", "100 memory recalls / week"]
         };
       }
-      function setupDiscoveredSessionCount() {
-        var pending = stats && stats.migratable && stats.migratable.pending;
-        if (typeof pending === "number" && isFinite(pending)) return Math.max(0, pending);
-        var total = stats && stats.sessions && stats.sessions.total;
-        return typeof total === "number" && isFinite(total) ? Math.max(0, total) : 0;
-      }
       function renderPlanHabitat() {
         setupPlanPreview = setupPlanPreview === "pro" || setupPlanPreview === "power" ? setupPlanPreview : "free";
         var plan = setupPlanDefinition(setupPlanPreview);
-        var discovered = setupDiscoveredSessionCount();
         var tabs = ["free", "pro", "power"].map(function (id) {
           var tab = setupPlanDefinition(id);
           var selected = id === plan.id;
@@ -960,12 +1202,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           return '<li>' + setupIcon("check") + '<span>' + esc(feature) + '</span></li>';
         }).join("");
         var chooseId = plan.id === "free" ? "chooseFreePlan" : (plan.id === "power" ? "choosePowerPlan" : "chooseProPlan");
-        var chooseLabel = plan.id === "free" ? "Take " + plan.homeName + " home" : "Start 14-day trial";
-        var discovery = discovered > 0
-          ? '<p class="mvpPricingDiscovery">Echo found <strong>' + esc(number(discovered)) + '</strong> new coding session' + (discovered === 1 ? "" : "s") + ' on this Mac.</p>'
-          : "";
+        var chooseLabel = plan.id === "free"
+          ? "Continue with " + plan.homeName + " — Free"
+          : ((!billingStatus || billingStatus.trialAvailable !== false)
+            ? "Start " + plan.homeName + " trial — $0 today"
+            : "Subscribe to " + plan.homeName);
         return '<section class="mvpPricing" aria-labelledby="setupPlanHeading">' +
-          '<header class="mvpPricingIntro"><span>Plans</span><h2 id="setupPlanHeading">Choose your Echo.</h2>' + discovery + '</header>' +
+          '<header class="mvpPricingIntro"><h2 id="setupPlanHeading">Choose your Echo.</h2></header>' +
           '<div class="mvpPlanTabs" role="tablist" aria-label="Choose an Echo plan">' + tabs + '</div>' +
           '<article class="mvpPlanHabitat" id="activePlanHabitat" role="tabpanel" aria-labelledby="planTab-' + plan.id + '" data-plan="' + plan.id + '">' +
             '<div class="mvpHabitatScene">' +
@@ -977,9 +1220,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             '<div class="mvpHabitatDetails">' +
               '<div class="mvpPlanIdentity"><span>' + esc(plan.name) + '</span>' + (plan.popular ? "<b>Echo&rsquo;s pick</b>" : "") + '</div>' +
               '<h3>' + esc(plan.homeName) + ' Echo</h3>' +
-              '<p class="mvpPlanPromise">' + esc(plan.promise) + '</p>' +
               '<div class="mvpPlanPrice"><strong>' + esc(plan.price) + '</strong><span>' + esc(plan.cadence) + '</span></div>' +
-              '<p class="mvpPacksLabel">Echo packs</p>' +
               '<ul class="mvpPlanFacts">' + facts + '</ul>' +
               '<button type="button" class="primary mvpPlanCta" id="' + chooseId + '">' + esc(chooseLabel) + ' <span aria-hidden="true">→</span></button>' +
             '</div>' +
@@ -1024,6 +1265,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           slot.innerHTML = "";
           slot.classList.add("is-hidden");
           if (readySettings) readySettings.classList.remove("is-plan-open", "is-checkout-pending");
+          renderBillingCommitment("");
           return;
         }
         slot.classList.remove("is-hidden");
@@ -1042,12 +1284,19 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
           var checkoutJustConfirmed = !!billingActivationPendingPlan;
           billingActivationPendingPlan = "";
+          rememberCheckoutSessionId("");
+          billingSyncAttempts = 0;
           var paidHistory = billingStatus && billingStatus.historicalConversationQuota;
           var paidUsage = paidHistory && typeof paidHistory.used === "number" && typeof paidHistory.limit === "number"
-            ? paidHistory.used + " / " + paidHistory.limit + " bulk history imports used."
-            : "Your bulk history import and weekly new-chat allowance are ready.";
+            ? paidHistory.used + " / " + paidHistory.limit + " coding sessions imported."
+            : "Your coding-session import and weekly memory allowance are ready.";
+          var lifecycleText = paidPlanLifecycleText(plan);
+          var paidDetail = lifecycleText
+            ? lifecycleText + (checkoutJustConfirmed ? "" : " " + paidUsage)
+            : (checkoutJustConfirmed ? "Continue below." : paidUsage);
           if (checkoutJustConfirmed) document.title = "Echo plan active — continue setup";
-          slot.innerHTML = '<div class="setupPlanConfirmed' + (checkoutJustConfirmed ? ' is-checkout-confirmed' : '') + '"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>' + (checkoutJustConfirmed ? 'Your Echo is ready. ' : '') + esc(planLabel) + ' Echo</strong><span>' + esc(checkoutJustConfirmed ? "Continue below." : paidUsage) + '</span></span><button type="button" class="textButton" id="changeActivePlan">Change</button></div>';
+          slot.innerHTML = '<div class="setupPlanConfirmed' + (checkoutJustConfirmed ? ' is-checkout-confirmed' : '') + (lifecycleText ? ' has-lifecycle' : '') + '"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>' + (checkoutJustConfirmed ? 'Your Echo is ready. ' : '') + esc(planLabel) + ' Echo</strong><span>' + esc(paidDetail) + '</span></span><button type="button" class="textButton" id="changeActivePlan">Change</button></div>';
+          renderBillingCommitment(plan);
           var changeActivePlan = document.getElementById("changeActivePlan");
           if (changeActivePlan) changeActivePlan.onclick = openHostedPlanOptions;
           renderSessionSelection(true);
@@ -1056,7 +1305,8 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         }
         if (setupPlanChoice === "free") {
           if (readySettings) readySettings.classList.remove("is-plan-open", "is-checkout-pending");
-          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>Original Echo</strong><span>100 bulk history imports, 25K new-chat tokens each week, and 100 memory searches each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
+          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>Original Echo</strong><span>100 coding sessions and 100 memory recalls each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
+          renderBillingCommitment("");
           var changeBtn = document.getElementById("changeSetupPlan");
           if (changeBtn) changeBtn.onclick = function () {
             rememberSetupPlanChoice("");
@@ -1069,17 +1319,36 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           ? "power"
           : (setupPlanChoice === "pro" || billingActivationPendingPlan === "pro" ? "pro" : "");
         if (pendingPaidPlan) {
+          renderBillingCommitment("");
           if (readySettings) {
             readySettings.classList.remove("is-plan-open");
             readySettings.classList.add("is-checkout-pending");
           }
           var selectedPaidPlan = pendingPaidPlan === "power" ? "Power" : "Pro";
+          var pendingHasTrial = !billingStatus || billingStatus.trialAvailable !== false;
+          var pendingPrice = pendingPaidPlan === "power" ? "$100" : "$20";
+          var pendingLimit = pendingPaidPlan === "power" ? "2,000" : "500";
+          var pendingStatus = billingCheckMessage || (billingLastCheckedAt
+            ? "Checking automatically every few seconds · Last checked just now"
+            : "Checking automatically every few seconds");
           slot.innerHTML =
             '<section class="setupPlanChoice setupPlanCheckout" aria-labelledby="setupPlanHeading">' +
-              '<div class="setupPlanIntro"><h3 id="setupPlanHeading">Start your 14-day trial.</h3><p>Finish in the secure Stripe tab, then return here. Echo will update automatically.</p></div>' +
-              '<button type="button" class="primary" id="continueSelectedPaidPlan">Reopen secure checkout</button>' +
-              '<div class="setupPlanFoot"><button type="button" class="textButton" id="changeSelectedPaidPlan">Choose another Echo</button><span id="setupPlanStatus" role="status"></span></div>' +
+              '<div class="setupPlanIntro"><h3 id="setupPlanHeading">' + esc(pendingHasTrial ? selectedPaidPlan + " trial — $0 today" : selectedPaidPlan + " subscription") + '</h3><p>Finish in Stripe. This page updates automatically.</p></div>' +
+              '<dl class="checkoutCommitment">' +
+                '<div><dt>Today</dt><dd>' + esc(pendingHasTrial ? "$0" : pendingPrice) + '</dd></div>' +
+                '<div><dt>History import</dt><dd>' + esc(pendingLimit) + ' sessions</dd></div>' +
+                '<div><dt>' + esc(pendingHasTrial ? "First charge" : "Billing") + '</dt><dd>' + esc(pendingHasTrial ? pendingPrice + " on " + trialChargeDateText() : pendingPrice + "/month now") + '</dd></div>' +
+              '</dl>' +
+              '<div class="checkoutActions"><button type="button" class="primary" id="continueSelectedPaidPlan">Reopen Stripe checkout</button><button type="button" class="secondary" id="checkPaymentStatus">Check payment status</button></div>' +
+              '<p class="checkoutPollStatus" id="setupPlanStatus" role="status" aria-live="polite">' + esc(pendingStatus) + '</p>' +
+              '<div class="setupPlanFoot"><button type="button" class="textButton" id="changeSelectedPaidPlan">Choose another plan</button></div>' +
             '</section>';
+          var checkPaid = document.getElementById("checkPaymentStatus");
+          if (checkPaid) checkPaid.onclick = function () {
+            billingCheckMessage = "Checking payment status…";
+            renderSetupPlan(true);
+            void refreshBillingStatus();
+          };
           var continuePaid = document.getElementById("continueSelectedPaidPlan");
           if (continuePaid) continuePaid.onclick = function () { openPaidPricing(pendingPaidPlan); };
           var changePaid = document.getElementById("changeSelectedPaidPlan");
@@ -1099,22 +1368,60 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           readySettings.classList.add("is-plan-open");
         }
         slot.innerHTML = renderPlanHabitat();
+        renderBillingCommitment("");
         bindPlanHabitat();
         if (migrateBtn) migrateBtn.disabled = true;
       }
+      async function maybeSyncPendingCheckout() {
+        if (!pendingCheckoutSessionId || billingSyncAttempts >= 12) return;
+        var now = Date.now();
+        if (billingSyncLastAttemptAt && now - billingSyncLastAttemptAt < 5000) return;
+        billingSyncLastAttemptAt = now;
+        billingSyncAttempts++;
+        try {
+          var result = await postJson(
+            "/billing-checkout-sync",
+            { sessionId: pendingCheckoutSessionId },
+            18000
+          );
+          if (result && result.ok === true) rememberCheckoutSessionId("");
+        } catch (_) {
+          // A 409 is expected while the hosted Checkout session is still open.
+          // Webhooks remain primary; this bounded fallback repairs delayed delivery.
+        }
+      }
       async function refreshBillingStatus() {
-        if (billingStatusLoading) return;
+        if (billingStatusLoading || !connected) return;
+        var billingEpoch = accountStateEpoch;
         billingStatusLoading = true;
         try {
-          billingStatus = await getJson("/billing-status");
-          renderSetupPlan(true);
-          renderAccountChoice();
-          renderSessionSelection(true);
+          await maybeSyncPendingCheckout();
+          if (billingEpoch !== accountStateEpoch || !connected) return;
+          var nextBillingStatus = await getJson("/billing-status");
+          if (billingEpoch !== accountStateEpoch || !connected) return;
+          billingStatus = nextBillingStatus;
+          billingLastCheckedAt = Date.now();
+          billingCheckMessage = "";
+          if (readyStage === "sessions" && setupPlanConfirmed()) {
+            // Keep the visible promise in sync with the authoritative plan/quota response.
+            // renderDashboard patches the mounted shell without recreating the page. If the
+            // picker is already open after an upgrade, refresh its quota/action in place too.
+            renderDashboard();
+            var openPicker = document.getElementById("sessionPicker");
+            if (openPicker && openPicker.open) renderSessionPicker();
+          } else {
+            renderSetupPlan(true);
+            renderAccountChoice();
+            renderSessionSelection(true);
+          }
           if (billingStatus && billingStatus.plan === "unknown") setSetupPlanStatus("Plan check unavailable. Original still works.");
         } catch (_) {
+          if (billingEpoch !== accountStateEpoch || !connected) return;
+          billingLastCheckedAt = Date.now();
+          billingCheckMessage = "Could not check payment yet. Echo will keep trying automatically.";
           setSetupPlanStatus("Plan check unavailable. Original still works.");
         } finally {
-          billingStatusLoading = false;
+          if (billingEpoch === accountStateEpoch) billingStatusLoading = false;
         }
       }
       function refreshBillingOnFocus() { void refreshBillingStatus(); }
@@ -1147,29 +1454,34 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           opened.location.href = response.url;
           setSetupPlanStatus(openedMessage);
           startBillingPoll();
-          return true;
+          return response;
         } catch (error) {
           try { if (opened && !opened.closed) opened.close(); } catch (_) {}
           setSetupPlanStatus(error && error.message ? error.message : "Could not open secure Echo billing.");
-          return false;
+          return null;
         }
       }
       async function openPaidPricing(plan) {
         setSetupPlanStatus("Opening secure checkout…");
-        var opened = await openHostedBilling(
+        var checkout = await openHostedBilling(
           "/billing-checkout",
           { plan: plan, trial: !billingStatus || billingStatus.trialAvailable !== false },
           "Creating your secure checkout…",
           "Checkout opened in a secure tab. Keep this local page open; Echo will confirm here automatically."
         );
-        if (opened) {
+        if (checkout) {
           billingActivationPendingPlan = plan;
+          if (typeof checkout.sessionId === "string") {
+            rememberCheckoutSessionId(checkout.sessionId);
+            billingSyncAttempts = 0;
+            billingSyncLastAttemptAt = 0;
+          }
           document.title = "Finish checkout — Echo setup is waiting";
           renderSetupPlan(true);
         }
       }
       async function openHostedPlanOptions() {
-        await openHostedBilling(
+        return await openHostedBilling(
           "/billing-portal",
           {},
           "Opening secure plan management…",
@@ -1178,25 +1490,17 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       function tryItCard() {
         var questions = recallQuestions();
-        var prompts = questions.map(function (question, index) {
-          var numberLabel = String(index + 1).padStart(2, "0");
-          return '<article class="recallPrompt" data-recall-prompt="' + esc(question) + '">' +
-            '<div class="recallPromptHead">' +
-              '<span>Suggested prompt ' + numberLabel + '</span>' +
-              '<button type="button" class="recallCopy" data-recall-copy aria-label="Copy suggested prompt ' + (index + 1) + '">' + setupIcon("copy") + '<span>Copy</span></button>' +
-            '</div>' +
-            '<p class="recallPromptText">' + esc(question) + '</p>' +
-            '<div class="recallPromptActions" aria-label="Use suggested prompt ' + (index + 1) + '">' +
-              '<button type="button" class="recallAgent" data-recall-codex><span class="recallAgentIcon"><img src="/hud-assets/codex.svg" alt="" /></span><span>Ask in Codex</span></button>' +
-              '<button type="button" class="recallAgent is-claude" data-recall-claude><span class="recallAgentIcon"><img src="/hud-assets/claude.svg" alt="" /></span><span>Ask in Claude</span></button>' +
-            '</div>' +
-          '</article>';
-        }).join("");
+        var primary = questions[0];
         return '<div class="tryCard">' +
-          '<p class="tryK">First recall</p>' +
-          '<h3 class="tryTitle">Try your new memory</h3>' +
-          '<p class="tryLead">These prompts are ready to use. Copy one, or ask it directly in your coding agent.</p>' +
-          '<div class="recallPromptList">' + prompts + '</div>' +
+          '<h3 class="tryTitle">Take it into a fresh session.</h3>' +
+          '<article class="recallPrompt recallPromptPrimary" data-recall-prompt="' + esc(primary) + '">' +
+            '<div class="recallPromptHead"><span>Try this</span><button type="button" class="recallCopy" data-recall-copy aria-label="Copy your first recall question">' + setupIcon("copy") + '<span>Copy</span></button></div>' +
+            '<p class="recallPromptText">' + esc(primary) + '</p>' +
+            '<div class="recallPromptActions" aria-label="Try your first memory recall">' +
+              '<button type="button" class="recallAgent recallAgentPrimary" data-recall-codex><span class="recallAgentIcon"><img src="/hud-assets/codex.svg" alt="" /></span><span>Ask in Codex</span></button>' +
+              '<button type="button" class="recallAgent is-claude" data-recall-claude><span class="recallAgentIcon"><img src="/hud-assets/claude.svg" alt="" /></span><span>Use Claude instead</span></button>' +
+            '</div>' +
+          '</article>' +
           '<p class="launchStatus" id="launchStatus"></p>' +
           '</div>';
       }
@@ -1211,12 +1515,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           if (claudeBtn) claudeBtn.addEventListener("click", function () { void openClaudeDesktop(prompt); });
         });
       }
-      function hudTip() {
-        return '<p class="hudTip"><img src="/hud-assets/echo-face-cutout.png" alt="" /><span><strong>Live HUD:</strong> Echo watches context quality while you work. When it drops, <strong>Start new session with context</strong> opens a fresh Codex or Claude Code session and carries the useful work forward. Open it with <code>echomem-hud app</code>.</span></p>';
-      }
-      function doneCloseNote() {
-        return '<p class="doneCloseNote">You can safely close this page. EchoMem is set up, and your memories are saved.</p>';
-      }
       function renderEnding() {
         setCityMode(false);
         setExtractMode(true);
@@ -1226,27 +1524,30 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         setHead("Ending extraction", "Ending");
         app.className = "";
         app.innerHTML =
-          '<div class="miniLoad">' +
-            '<p class="utilityEyebrow">Memory extraction / closing</p>' +
-            '<h2 class="siteHeadline">Stopping the <strong>remaining work</strong></h2>' +
-            '<p>Echo is canceling every queued conversation and releasing its unused reservations. Anything already saved stays saved.</p>' +
-            '<div class="miniBar"><i></i></div>' +
-          '</div>';
+          setupJourney(4) +
+          '<section class="lifecycleState lifecyclePending">' +
+            '<h2>Stopping the remaining queued work…</h2>' +
+            '<p>Saved memories stay intact.</p>' +
+            '<div class="miniBar" aria-label="Ending extraction"><i></i></div>' +
+          '</section>';
       }
       function renderSkipped() {
         setCityMode(false);
         setExtractMode(true);
         setHead("Extraction ended for now", "Ended");
         app.className = "";
+        var savedCount = Math.max(0, Number(lastExtractionProgress && lastExtractionProgress.extracted || 0));
         app.innerHTML =
-          '<div class="skipStage">' +
-            '<div class="pauseStatus" role="status"><span aria-hidden="true">' + setupIcon("pause") + '</span><small>Extraction ended for now</small></div>' +
-            '<h2 class="siteHeadline">You can come back <strong>anytime.</strong></h2>' +
-            '<p>All remaining queued work was canceled and its unused reservations were released. When you are ready, run <code>echomem-mcp init</code> again — it rebuilds the remaining list from your local sessions.</p>' +
-            tryItCard() +
-            hudTip() +
-          '</div>';
-        wireTryButtons();
+          setupJourney(savedCount > 0 ? 5 : 4) +
+          '<section class="lifecycleState lifecyclePaused">' +
+            '<header class="lifecycleIntro">' +
+              '<h2>' + (savedCount > 0 ? esc(number(savedCount)) + ' memories are ready to use.' : 'Import ended safely.') + '</h2>' +
+              '<p>The remaining queue was canceled. Saved memories were not removed.</p>' +
+            '</header>' +
+            (savedCount > 0 ? tryItCard() : '') +
+            '<p class="lifecycleResume">Continue later with <code>echomem-mcp init</code>.</p>' +
+          '</section>';
+        if (savedCount > 0) wireTryButtons();
       }
       async function endExtraction() {
         if (extractionEnded) return;