@echomem/mcp 1.4.20 → 1.4.22

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

@@ -93,30 +93,17 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           '<div class="actions"><button id="logout" class="secondary">Retry sign out</button></div></div>';
         var lo = document.getElementById("logout"); if (lo) lo.onclick = localLogout;
       }
-      async function waitForConnection() {
-        if (connectionPollStarted) return;
-        connectionPollStarted = true;
-        try {
-          for (;;) {
-            if (decisionMade) return;
-            try {
-              var cfg = await getJson("/config");
-              authUrl = cfg.authUrl || authUrl;
-              switchAccountUrl = cfg.switchAccountUrl || switchAccountUrl || authUrl;
-              if (cfg.connected) { connected = true; closeAuthWindow(); await waitForStats(); return; }
-            } catch (_) {}
-            await sleep(900);
-          }
-        } finally { connectionPollStarted = false; }
-      }
-      function startConnectionPoll() { void waitForConnection(); }
       async function waitForStats() {
         if (statsPollStarted) return;
         statsPollStarted = true;
-        // Use the same one-reading-line stage as the partial scan state. This avoids a jarring
-        // old setup shell between device approval and the ready decision.
-        renderDashboard();
+        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>';
         try {
+          if (await resumeExistingExtraction()) return;
           var started = Date.now();
           var lastError = "";
           for (;;) {
@@ -126,6 +113,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
               if (res.status === 200) {
                 stats = await res.json();
                 if (decisionMade) return;
+                if (connected && !billingStatus && !billingStatusLoading) {
+                  try { await refreshBillingStatus(); } catch (_) {}
+                  if (decisionMade) return;
+                }
                 renderDashboard();
                 if (stats && stats.partial) { await sleep(1200); continue; }
                 return;
@@ -148,6 +139,27 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           '<iframe class="plateGl" title="Extraction plate" src="/city/echo-extraction-plate.html?nonce=' + encodeURIComponent(nonce) + '"></iframe>' +
           '</div></div>';
       }
+      function renderPlanGate() {
+        setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
+        setHead("Choose your Echo", "Plan");
+        dashMounted = false;
+        if (readyStage === "plan" && app.className === "planGateStage" && document.getElementById("setupPlan")) {
+          renderSetupPlan(true);
+          renderAccountChoice();
+          return;
+        }
+        readyStage = "plan";
+        app.className = "planGateStage";
+        app.innerHTML =
+          '<section class="planGateDecision">' +
+            '<div class="setupPlanSlot" id="setupPlan"></div>' +
+            '<aside class="planGateAccount" aria-label="Connected account"><div class="setupAccountSlot" id="setupAccount"></div></aside>' +
+          '</section>';
+        renderSetupPlan(true);
+        renderAccountChoice();
+      }
       function renderDashboard(error) {
         setCityMode(false);
         setExtractMode(false);
@@ -172,6 +184,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         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;
+        }
         setHead("Turn coding history into memory", pendingTrusted ? (knownDone ? "Done" : "Ready") : (localScanReady ? "Ready" : "Scanning"));
         var headlineHtml = !pendingTrusted
           ? "Counting your <strong>new conversations…</strong>"
@@ -183,13 +199,14 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           : (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 extraction" : "All caught up");
+        var extractLabel = !pendingTrusted ? "Counting…" : (canExtract ? "Start memory extraction" : "All caught up");
         // 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.
         var live = dashMounted && document.getElementById("exHeadline");
         if (!live) {
           extractMounted = false;
+          readyStage = "sessions";
           app.className = "";
           // One reading line, top to bottom: the find (headline) → the value (sub) → quiet proof
           // (source strip) → the single action with its reassurances attached → optional detail.
@@ -198,7 +215,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           // not a display-size headline.
           app.innerHTML =
             '<div id="exBanner"></div>' +
-            '<section class="readyDecision">' +
+            '<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="" />' +
@@ -208,22 +225,23 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
                 '</div>' +
               '</div>' +
               '<div class="proofStrip" id="exSources"></div>' +
-              '<div class="setupAccountSlot" id="setupAccount"></div>' +
-              '<div class="setupPlanSlot" id="setupPlan"></div>' +
-              '<div class="sessionSelectionSlot" id="sessionSelection"></div>' +
               '<div class="readyGo">' +
                 '<div class="actions">' +
                   '<button id="migrate" class="primary"></button>' +
-                  '<button type="button" id="skipHistoryImport" class="secondary skipHistoryButton">Skip history import</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 = startMigrate;
+          document.getElementById("migrate").onclick = openSessionPicker;
           dashMounted = true;
         }
         document.getElementById("exBanner").innerHTML =
@@ -263,7 +281,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           '</div>';
         renderSetupPlan(canExtract);
         renderAccountChoice();
-        renderSessionSelection(canExtract);
         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.
@@ -271,9 +288,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         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 ? extractLabel : "Finish setup") + '</span>' + (canExtract ? setupIcon("arrow-right") : "");
-          migrateBtn.onclick = canExtract ? startMigrate : skip;
+          migrateBtn.innerHTML = '<span>' + esc(canExtract ? "Review " + number(pendN) + " sessions" : "Finish setup") + '</span>' + (canExtract ? setupIcon("arrow-right") : "");
+          migrateBtn.onclick = canExtract ? openSessionPicker : skip;
           if (skipHistoryBtn) {
             skipHistoryBtn.style.display = canExtract ? "" : "none";
             skipHistoryBtn.onclick = skip;
@@ -286,12 +304,14 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       async function startMigrate() {
         if (decisionMade) return;
         if (!setupPlanConfirmed()) {
-          setSetupPlanStatus("Choose Free, Pro, or Power before extraction starts.");
+          setSetupPlanStatus("Choose Original, Pro, or Power to bring Echo home.");
           return;
         }
         var selectedKeys = selectedSessionKeyList();
         if (!selectedKeys.length) {
-          renderSessionSelection(true, "Choose at least one conversation to extract.");
+          openSessionPicker();
+          var pickerStatus = document.getElementById("sessionPickerStatus");
+          if (pickerStatus) pickerStatus.textContent = "Choose at least one conversation to extract.";
           return;
         }
         stopBillingPoll();
@@ -301,21 +321,74 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         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>';
+        var started;
         try {
-          var started = await postJson("/migrate", { conversationKeys: selectedKeys });
-          extractMounted = false;
-          renderProgress(Object.assign({ status: "starting", completed: 0, failed: 0, extracted: 0 }, started));
-          await pollProgress();
+          started = await postJson("/migrate", { conversationKeys: selectedKeys });
         } catch (e) {
           decisionMade = false;
           renderDashboard(routeError(e && e.message));
+          return;
+        }
+        extractMounted = false;
+        renderProgress(Object.assign({ status: "starting", completed: 0, failed: 0, extracted: 0 }, started));
+        await pollProgress();
+      }
+      async function resumeExistingExtraction() {
+        try {
+          var existing = await getJson("/progress");
+          if (!existing || existing.status === "idle") return false;
+          decisionMade = true;
+          extractionEnded = false;
+          extractMounted = false;
+          renderProgress(existing);
+          if (existing.status !== "completed" && existing.status !== "failed") {
+            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();
+          return true;
         }
       }
       async function pollProgress() {
         var runId = ++progressPollRunId;
+        var failures = 0;
         for (;;) {
           if (extractionEnded || runId !== progressPollRunId) return;
-          var progress = await getJson("/progress");
+          var progress;
+          try {
+            progress = await getJson("/progress");
+            failures = 0;
+          } catch (_) {
+            failures++;
+            var reconnecting = Object.assign({
+              status: "running",
+              total: 0,
+              completed: 0,
+              failed: 0,
+              extracted: 0
+            }, lastExtractionProgress || {});
+            reconnecting.status = reconnecting.status === "completed" || reconnecting.status === "failed"
+              ? "running"
+              : reconnecting.status;
+            reconnecting.latest = "Connection interrupted. Reconnecting to the active extraction...";
+            renderProgress(reconnecting);
+            await sleep(Math.min(5000, 500 * Math.pow(2, Math.min(failures - 1, 3))));
+            continue;
+          }
           if (extractionEnded || runId !== progressPollRunId) return;
           renderProgress(progress);
           if (progress.status === "completed" || progress.status === "failed") return;
@@ -358,7 +431,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           var memoryNoun = extracted === 1 ? "new memory" : "new memories";
           var savedMemoryLabel = extracted === 1 ? "memory saved" : "memories saved";
           var conversationNoun = completed === 1 ? "conversation" : "conversations";
-          var timelineUrl = "https://yeahecho.com/memories/timeline";
           var stopDetail = String(progress.error) === "vault-locked"
             ? "Your encryption key was not accepted. Re-run extraction; if it keeps failing, run <code>echomem-mcp unlock</code> first. Already-done conversations are skipped."
             : esc(progress.error || "Re-run extraction to finish the rest. Already-done conversations are skipped.");
@@ -371,7 +443,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
               '<div class="resultTop">' +
                 '<div>' +
                   (done
-                    ? '<h2 class="savedHeading siteHeadline"><span class="savedMain"><strong>' + esc(number(extracted)) + '</strong> ' + esc(savedMemoryLabel) + '</span><a class="viewEchoLink" href="' + timelineUrl + '" target="_blank" rel="noopener noreferrer">(view in yeahecho)</a></h2>' + completionNote
+                    ? '<h2 class="savedHeading siteHeadline"><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>') +
@@ -643,7 +715,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var confirm = dialog.querySelector("#confirmSessions");
         if (confirm) {
           confirm.disabled = selectedCount === 0;
-          confirm.textContent = "Use " + number(selectedCount) + " selected";
+          confirm.textContent = "Start memory extraction";
         }
       }
       function sessionPickerLimitNotice(canDismiss) {
@@ -726,13 +798,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             '</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") + '>Use ' + esc(number(selected.length)) + ' selected</button></div></footer>' +
+            '<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>' +
           '</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(); renderSessionSelection(true); };
+        if (confirm) confirm.onclick = function () { dialog.close(); void startMigrate(); };
         if (skipImport) skipImport.onclick = skip;
         wireSessionPickerUpgrade();
         var search = document.getElementById("sessionPickerSearch");
@@ -787,6 +859,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         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 avatarUrl = account && account.avatarUrl ? String(account.avatarUrl) : "";
         var avatar = '<span class="setupAccountAvatar" aria-hidden="true">' +
           '<span>' + esc(accountInitials(account)) + '</span>' +
@@ -795,15 +868,15 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         slot.innerHTML =
           '<section class="setupAccountCard" aria-label="Connected EchoMem account">' +
             avatar +
-            '<span class="setupAccountCopy"><small>Saving to</small><strong>' + esc(name) + '</strong><span>' + esc(email) + '</span></span>' +
-            '<button type="button" class="textButton setupAccountChange" id="changeSetupAccount">Change account</button>' +
+            '<span class="setupAccountCopy"><small>Logged in as</small><strong>' + esc(accountLabel) + '</strong><span>' + esc(email) + '</span></span>' +
+            '<button type="button" class="textButton setupAccountChange" id="changeSetupAccount">Switch</button>' +
           '</section>';
         var change = document.getElementById("changeSetupAccount");
         if (change) change.onclick = switchSetupAccount;
       }
       async function switchSetupAccount() {
         var button = document.getElementById("changeSetupAccount");
-        if (button) { button.disabled = true; button.textContent = "Opening account chooser…"; }
+        if (button) { button.disabled = true; button.textContent = "Signing out..."; }
         try {
           await postJson("/logout", {}, 12000);
           stats = null;
@@ -811,15 +884,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           connected = false;
           selectedSessionKeys = Object.create(null);
           sessionSelectionTouched = false;
-          if (!openAuthWindow(switchAccountUrl || authUrl)) {
-            if (button) { button.disabled = false; button.textContent = "Change account"; }
-            showPopupFallback("Your browser blocked the account chooser. Open it below to continue.", switchAccountUrl || authUrl);
-            return;
-          }
-          startConnectionPoll();
+          localAuthEmail = "";
+          localAuthTermsAccepted = false;
+          localAuthAgeConfirmed = false;
+          renderLocalLogin("");
         } catch (error) {
           if (button) { button.disabled = false; button.textContent = "Change account"; }
-          setSetupPlanStatus(error && error.message ? error.message : "Could not open the account chooser.");
+          setSetupPlanStatus(error && error.message ? error.message : "Could not switch accounts.");
         }
       }
       function paidRecallPlan(plan) {
@@ -834,6 +905,112 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       function setupPlanConfirmed() {
         return setupPlanChoice === "free" || paidRecallPlan(billingStatus && billingStatus.plan);
       }
+      function setupPlanDefinition(plan) {
+        if (plan === "power") return {
+          id: "power",
+          name: "Power",
+          homeName: "Power",
+          promise: "More room. More agents. Much more Echo.",
+          price: "$100",
+          cadence: "per month · cancel anytime",
+          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"]
+        };
+        if (plan === "pro") return {
+          id: "pro",
+          name: "Pro",
+          homeName: "Pro",
+          promise: "A room for the work you return to every day.",
+          price: "$20",
+          cadence: "per month · cancel anytime",
+          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"]
+        };
+        return {
+          id: "free",
+          name: "Free",
+          homeName: "Original",
+          promise: "A little corner is enough to start.",
+          price: "$0",
+          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"]
+        };
+      }
+      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;
+          return '<button type="button" class="mvpPlanTab" id="planTab-' + id + '" data-plan-tab="' + id + '" role="tab" aria-selected="' + (selected ? "true" : "false") + '" aria-controls="activePlanHabitat"><span>' + esc(tab.homeName) + '</span><b>' + esc(tab.price) + '</b></button>';
+        }).join("");
+        var facts = plan.features.map(function (feature) {
+          return '<li>' + setupIcon("check") + '<span>' + esc(feature) + '</span></li>';
+        }).join("");
+        var chooseId = plan.id === "free" ? "chooseFreePlan" : (plan.id === "power" ? "choosePowerPlan" : "chooseProPlan");
+        var discovery = discovered > 0
+          ? '<p class="mvpPricingDiscovery">Echo found <strong>' + esc(number(discovered)) + '</strong> new coding session' + (discovered === 1 ? "" : "s") + ' on this Mac.</p>'
+          : "";
+        return '<section class="mvpPricing" aria-labelledby="setupPlanHeading">' +
+          '<header class="mvpPricingIntro"><span>Plans</span><h2 id="setupPlanHeading">Choose your Echo.</h2>' + discovery + '</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">' +
+              '<div class="mvpHabitatWindow" aria-hidden="true"></div>' +
+              '<div class="mvpHabitatShelf" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>' +
+              '<div class="mvpHabitatRug" aria-hidden="true"></div>' +
+              '<img class="mvpHabitatEcho" src="' + esc(plan.sticker) + '" alt="' + esc(plan.stickerAlt) + '" />' +
+            '</div>' +
+            '<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 + '">Take ' + esc(plan.homeName) + ' home <span aria-hidden="true">→</span></button>' +
+            '</div>' +
+          '</article>' +
+          '<p class="mvpPlanStatus" id="setupPlanStatus" role="status"></p>' +
+        '</section>';
+      }
+      function bindPlanHabitat() {
+        Array.prototype.forEach.call(document.querySelectorAll("[data-plan-tab]"), function (tab) {
+          tab.onclick = function () {
+            setupPlanPreview = tab.getAttribute("data-plan-tab") || "free";
+            var slot = document.getElementById("setupPlan");
+            if (slot) slot.innerHTML = renderPlanHabitat();
+            bindPlanHabitat();
+          };
+        });
+        var free = document.getElementById("chooseFreePlan");
+        if (free) free.onclick = function () {
+          rememberSetupPlanChoice("free");
+          renderDashboard();
+        };
+        var pro = document.getElementById("chooseProPlan");
+        if (pro) pro.onclick = function () {
+          rememberSetupPlanChoice("pro");
+          openPaidPricing("pro");
+        };
+        var power = document.getElementById("choosePowerPlan");
+        if (power) power.onclick = function () {
+          rememberSetupPlanChoice("power");
+          openPaidPricing("power");
+        };
+      }
       function setSetupPlanStatus(message) {
         var node = document.getElementById("setupPlanStatus");
         if (node) node.textContent = message || "";
@@ -841,9 +1018,11 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       function renderSetupPlan(canExtract) {
         var slot = document.getElementById("setupPlan");
         if (!slot) return;
+        var readySettings = slot.closest ? slot.closest(".readySettings") : null;
         if (!canExtract) {
           slot.innerHTML = "";
           slot.classList.add("is-hidden");
+          if (readySettings) readySettings.classList.remove("is-plan-open");
           return;
         }
         slot.classList.remove("is-hidden");
@@ -851,61 +1030,70 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var paid = paidRecallPlan(plan);
         var migrateBtn = document.getElementById("migrate");
         if (paid) {
+          if (readyStage === "plan") {
+            stopBillingPoll();
+            renderDashboard();
+            return;
+          }
+          if (readySettings) readySettings.classList.remove("is-plan-open");
+          rememberSetupPlanChoice("");
           setupPlanChoice = "paid";
           var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
+          var checkoutJustConfirmed = !!billingActivationPendingPlan;
+          billingActivationPendingPlan = "";
           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.";
-          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>' + esc(planLabel) + ' is active.</strong><span>' + esc(paidUsage) + '</span></span></div>';
+          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 ? 'Payment confirmed. ' : '') + esc(planLabel) + ' Echo</strong><span>' + esc(checkoutJustConfirmed ? "Your plan is ready. Continue below—checkout never needed access to this localhost page." : paidUsage) + '</span></span><button type="button" class="textButton" id="changeActivePlan">Change</button></div>';
+          var changeActivePlan = document.getElementById("changeActivePlan");
+          if (changeActivePlan) changeActivePlan.onclick = openHostedPlanOptions;
           renderSessionSelection(true);
           stopBillingPoll();
           return;
         }
         if (setupPlanChoice === "free") {
-          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>Free selected.</strong><span>100 bulk history imports, 25K new-chat tokens each week, and 10 memory searches each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
+          if (readySettings) readySettings.classList.remove("is-plan-open");
+          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 10 memory searches each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
           var changeBtn = document.getElementById("changeSetupPlan");
-          if (changeBtn) changeBtn.onclick = function () { setupPlanChoice = ""; renderSetupPlan(true); renderSessionSelection(true); };
+          if (changeBtn) changeBtn.onclick = function () {
+            rememberSetupPlanChoice("");
+            renderDashboard();
+          };
           renderSessionSelection(true);
           return;
         }
-        var trialAvailable = !billingStatus || billingStatus.trialAvailable !== false;
-        slot.innerHTML =
-          '<section class="setupPlanChoice" aria-labelledby="setupPlanHeading">' +
-            '<div class="setupPlanIntro"><h3 id="setupPlanHeading">Choose a plan before extraction starts.</h3><p>Plans set how much history you can import and how much new conversation text Echo processes each week. There is no memory-count limit.</p></div>' +
-            '<div class="setupPlanGrid">' +
-              '<article class="setupPlanCard">' +
-                '<div class="setupPlanHead"><strong>Free</strong><span>$0 forever</span></div>' +
-                '<p>Start with the essentials.</p>' +
-                '<ul><li>' + setupIcon("check") + '<span>100 bulk history imports</span></li><li>' + setupIcon("check") + '<span>25K new-chat tokens each week</span></li><li>' + setupIcon("check") + '<span>10 memory searches each week</span></li><li>' + setupIcon("check") + '<span>No memory-count limit</span></li></ul>' +
-                '<button type="button" class="secondary" id="chooseFreePlan">Continue with Free</button>' +
-              '</article>' +
-              '<article class="setupPlanCard is-pro">' +
-                '<div class="setupPlanHead"><strong>Pro</strong><span>$40 / month</span></div>' +
-                '<p>More recall for serious work.</p>' +
-                '<ul><li>' + setupIcon("check") + '<span>250 bulk history imports</span></li><li>' + setupIcon("check") + '<span>200K new-chat tokens each week</span></li><li>' + setupIcon("check") + '<span>100 memory searches each week</span></li><li>' + setupIcon("check") + '<span>No memory-count limit</span></li></ul>' +
-                '<button type="button" class="primary" id="chooseProPlan">' + (trialAvailable ? "Start 7-day trial" : "Choose Pro") + '</button>' +
-                '<small>' + (trialAvailable ? "Card required. Cancel anytime." : "Your trial was already used.") + '</small>' +
-              '</article>' +
-              '<article class="setupPlanCard">' +
-                '<div class="setupPlanHead"><strong>Power</strong><span>$100 / month</span></div>' +
-                '<p>Higher limits for people who use Echo every day.</p>' +
-                // Future Power feature: API and automation access.
-                '<ul><li>' + setupIcon("check") + '<span>500 bulk history imports</span></li><li>' + setupIcon("check") + '<span>750K new-chat tokens each week</span></li><li>' + setupIcon("check") + '<span>250 memory searches each week</span></li><li>' + setupIcon("check") + '<span>No memory-count limit</span></li></ul>' +
-                '<button type="button" class="secondary" id="choosePowerPlan">' + (trialAvailable ? "Start 7-day trial" : "Choose Power") + '</button>' +
-                '<small>' + (trialAvailable ? "Card required. Cancel anytime." : "Your trial was already used.") + '</small>' +
-              '</article>' +
-            '</div>' +
-            '<div class="setupPlanFoot"><a href="' + esc(setupPricingUrl("pro", false)) + '" target="_blank" rel="noopener noreferrer">See all plan details</a><span id="setupPlanStatus" role="status"></span></div>' +
-          '</section>';
-        var freeBtn = document.getElementById("chooseFreePlan");
-        if (freeBtn) freeBtn.onclick = function () { setupPlanChoice = "free"; renderSetupPlan(true); renderSessionSelection(true); };
-        var proBtn = document.getElementById("chooseProPlan");
-        if (proBtn) proBtn.onclick = function () { openPaidPricing("pro"); };
-        var powerBtn = document.getElementById("choosePowerPlan");
-        if (powerBtn) powerBtn.onclick = function () { openPaidPricing("power"); };
+        var pendingPaidPlan = setupPlanChoice === "power" || billingActivationPendingPlan === "power"
+          ? "power"
+          : (setupPlanChoice === "pro" || billingActivationPendingPlan === "pro" ? "pro" : "");
+        if (pendingPaidPlan) {
+          if (readySettings) readySettings.classList.remove("is-plan-open");
+          var selectedPaidPlan = pendingPaidPlan === "power" ? "Power" : "Pro";
+          slot.innerHTML =
+            '<section class="setupPlanChoice setupPlanCheckout" aria-labelledby="setupPlanHeading">' +
+              '<div class="setupPlanIntro"><h3 id="setupPlanHeading">' + selectedPaidPlan + ' checkout is open.</h3><p>Finish in the secure Stripe tab. This page will notice automatically when your plan becomes active.</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>' +
+            '</section>';
+          var continuePaid = document.getElementById("continueSelectedPaidPlan");
+          if (continuePaid) continuePaid.onclick = function () { openPaidPricing(pendingPaidPlan); };
+          var changePaid = document.getElementById("changeSelectedPaidPlan");
+          if (changePaid) changePaid.onclick = function () {
+            stopBillingPoll();
+            billingActivationPendingPlan = "";
+            rememberSetupPlanChoice("");
+            renderSetupPlan(true);
+            renderSessionSelection(true);
+          };
+          if (migrateBtn) migrateBtn.disabled = true;
+          renderSessionSelection(true);
+          return;
+        }
+        if (readySettings) readySettings.classList.add("is-plan-open");
+        slot.innerHTML = renderPlanHabitat();
+        bindPlanHabitat();
         if (migrateBtn) migrateBtn.disabled = true;
-        renderSessionSelection(true);
       }
       async function refreshBillingStatus() {
         if (billingStatusLoading) return;
@@ -915,9 +1103,9 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           renderSetupPlan(true);
           renderAccountChoice();
           renderSessionSelection(true);
-          if (billingStatus && billingStatus.plan === "unknown") setSetupPlanStatus("Plan check unavailable. Free still works.");
+          if (billingStatus && billingStatus.plan === "unknown") setSetupPlanStatus("Plan check unavailable. Original still works.");
         } catch (_) {
-          setSetupPlanStatus("Plan check unavailable. Free still works.");
+          setSetupPlanStatus("Plan check unavailable. Original still works.");
         } finally {
           billingStatusLoading = false;
         }
@@ -933,21 +1121,54 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         billingPollTimer = null;
         window.removeEventListener("focus", refreshBillingOnFocus);
       }
-      function openPaidPricing(plan) {
-        var url = setupPricingUrl(plan, true);
-        setSetupPlanStatus("Opening secure checkout…");
+      async function openHostedBilling(path, body, openingMessage, openedMessage) {
+        var opened = null;
         try {
-          var opened = window.open(url, "_blank");
+          opened = window.open("about:blank", "_blank");
           if (!opened) {
-            setSetupPlanStatus("Your browser blocked checkout. Allow pop-ups, then try again.");
-            return;
+            setSetupPlanStatus("Your browser blocked the secure billing page. Allow pop-ups, then try again.");
+            return false;
           }
+          try {
+            opened.document.title = "Opening secure Echo billing…";
+            opened.document.body.innerHTML = '<p style="font:16px system-ui;padding:2rem;color:#555">Opening secure Echo billing…</p>';
+          } catch (_) {}
+          setSetupPlanStatus(openingMessage);
+          var response = await postJson(path, body, 18000);
+          if (!response || typeof response.url !== "string") throw new Error("Echo billing did not return a secure URL.");
           try { opened.opener = null; } catch (_) {}
+          opened.location.href = response.url;
+          setSetupPlanStatus(openedMessage);
           startBillingPoll();
-        } catch (_) {
-          setSetupPlanStatus("Could not open checkout. Allow pop-ups, then try again.");
+          return true;
+        } catch (error) {
+          try { if (opened && !opened.closed) opened.close(); } catch (_) {}
+          setSetupPlanStatus(error && error.message ? error.message : "Could not open secure Echo billing.");
+          return false;
         }
       }
+      async function openPaidPricing(plan) {
+        setSetupPlanStatus("Opening secure checkout…");
+        var opened = 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) {
+          billingActivationPendingPlan = plan;
+          document.title = "Finish checkout — Echo setup is waiting";
+          renderSetupPlan(true);
+        }
+      }
+      async function openHostedPlanOptions() {
+        await openHostedBilling(
+          "/billing-portal",
+          {},
+          "Opening secure plan management…",
+          "Plan management opened in a secure tab. Echo will refresh your plan here automatically."
+        );
+      }
       function tryItCard() {
         var questions = recallQuestions();
         var prompts = questions.map(function (question, index) {