@echomem/mcp 1.4.18 → 1.4.20

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

@@ -102,6 +102,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             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);
@@ -172,9 +173,11 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         var pendingCodex = typeof migratable.pendingCodex === "number" ? migratable.pendingCodex : null;
         var pendingClaudeCode = typeof migratable.pendingClaudeCode === "number" ? migratable.pendingClaudeCode : null;
         setHead("Turn coding history into memory", pendingTrusted ? (knownDone ? "Done" : "Ready") : (localScanReady ? "Ready" : "Scanning"));
-        var headline = !pendingTrusted
-          ? "Counting your new conversations…"
-          : (knownDone ? "You are all caught up." : "Echo found " + number(pendN) + " new coding session" + (pendN === 1 ? "" : "s") + ".");
+        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>");
         var sub = !pendingTrusted
           ? "Echo is matching your local history against what is already in memory."
           : (knownDone
@@ -196,38 +199,45 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           app.innerHTML =
             '<div id="exBanner"></div>' +
             '<section class="readyDecision">' +
+              '<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">' +
-                  '<h2 id="exHeadline"></h2>' +
+                  '<h2 class="siteHeadline" id="exHeadline"></h2>' +
                   '<p class="exSub" id="exSub"></p>' +
                 '</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>' +
                 '</div>' +
                 '<p class="ctaMeta" id="exEta"></p>' +
               '</div>' +
               '<div class="readyFoot">' +
                 '<details class="readyExplain" id="readyExplain"></details>' +
               '</div>' +
-            '</section>';
+            '</section>' +
+            '<dialog class="sessionPicker" id="sessionPicker" aria-labelledby="sessionPickerTitle"></dialog>';
           document.getElementById("migrate").onclick = startMigrate;
           dashMounted = true;
         }
         document.getElementById("exBanner").innerHTML =
           (statsSlow && !stats ? '<div class="warning">Local counts are taking longer than expected. You can still ask Echo to extract anything unprocessed.</div>' : '') +
           (error ? '<div class="error">' + esc(error) + '</div>' : '');
-        document.getElementById("exHeadline").textContent = headline;
+        document.getElementById("exHeadline").innerHTML = headlineHtml;
         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) {
-          return '<span class="pfIcon"><img src="/agent-icons/' + id + '.png" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="pfFallback">' + fallback + '</span></span>';
+          var asset = id === "claude-desktop" ? "claude" : "codex";
+          return '<span class="pfIcon"><img src="/hud-assets/' + asset + '.svg" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="pfFallback">' + fallback + '</span></span>';
         };
         document.getElementById("exSources").innerHTML = !pendingTrusted
           ? '<span class="pfNote">Scanning local history&hellip;</span>'
@@ -251,20 +261,40 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             '<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();
+        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.
         var migrateBtn = document.getElementById("migrate");
+        var skipHistoryBtn = document.getElementById("skipHistoryImport");
         if (pendingTrusted) {
           migrateBtn.style.display = "";
-          migrateBtn.disabled = false;
-          migrateBtn.textContent = canExtract ? extractLabel : "Finish setup";
+          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;
+          if (skipHistoryBtn) {
+            skipHistoryBtn.style.display = canExtract ? "" : "none";
+            skipHistoryBtn.onclick = skip;
+          }
         } else {
           migrateBtn.style.display = "none";
+          if (skipHistoryBtn) skipHistoryBtn.style.display = "none";
         }
       }
       async function startMigrate() {
         if (decisionMade) return;
+        if (!setupPlanConfirmed()) {
+          setSetupPlanStatus("Choose Free, Pro, or Power before extraction starts.");
+          return;
+        }
+        var selectedKeys = selectedSessionKeyList();
+        if (!selectedKeys.length) {
+          renderSessionSelection(true, "Choose at least one conversation to extract.");
+          return;
+        }
+        stopBillingPoll();
         decisionMade = true;
         extractionEnded = false;
         setCityMode(false);
@@ -272,7 +302,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         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>';
         try {
-          var started = await postJson("/migrate", {});
+          var started = await postJson("/migrate", { conversationKeys: selectedKeys });
           extractMounted = false;
           renderProgress(Object.assign({ status: "starting", completed: 0, failed: 0, extracted: 0 }, started));
           await pollProgress();
@@ -282,10 +312,11 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         }
       }
       async function pollProgress() {
+        var runId = ++progressPollRunId;
         for (;;) {
-          if (extractionEnded) return;
+          if (extractionEnded || runId !== progressPollRunId) return;
           var progress = await getJson("/progress");
-          if (extractionEnded) return;
+          if (extractionEnded || runId !== progressPollRunId) return;
           renderProgress(progress);
           if (progress.status === "completed" || progress.status === "failed") return;
           await sleep(1200);
@@ -293,6 +324,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       function renderProgress(progress) {
         if (extractionEnded) return;
+        lastExtractionProgress = progress;
         setCityMode(false);
         setExtractMode(true);
         var status = progress.status;
@@ -327,22 +359,25 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           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) === "key-expired"
+          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.");
+          var completionNote = done && progress.latest && progress.latest !== "Import complete."
+            ? '<p class="exSub">' + esc(progress.latest) + '</p>'
+            : "";
           t.innerHTML =
             '<div class="resultStage ' + (done ? "ok" : "warn") + '">' +
-              (done ? "" : '<p class="kicker-mono">Extraction stopped</p>') +
+              (done ? '<p class="utilityEyebrow">Memory extraction / complete</p>' : '<p class="utilityEyebrow">Memory extraction / stopped</p>') +
               '<div class="resultTop">' +
                 '<div>' +
                   (done
-                    ? '<h2 class="savedHeading"><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>'
-                    : '<h2>Some conversations need another pass.</h2>' +
+                    ? '<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="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>') +
                 '</div>' +
               '</div>' +
-              (done ? recallGateBlock() : "") +
+              (done ? tryItCard() : "") +
               (done ? "" :
                 '<div class="memoryReceipt">' +
                   '<p class="receiptK">What just happened</p>' +
@@ -353,7 +388,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
                 '</div>') +
             '</div>' +
             (done ? hudTip() + doneCloseNote() : "");
-          wireRecallGate();
+          wireTryButtons();
           return;
         }
         setHead(preparing ? "Preparing" : "Extracting", preparing ? "Preparing" : "Extracting");
@@ -379,9 +414,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes · safe to end and resume</p>';
           }
         }
-        t.innerHTML =
+        var recoveryNotice = extractionRecoveryMessage
+          ? '<div class="error">' + esc(extractionRecoveryMessage) + '</div>'
+          : "";
+        t.innerHTML = recoveryNotice +
           '<div class="workbench">' +
-            '<h2>' + (preparing ? "Setting up the import." : "Building your memory.") + '</h2>' +
+            '<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>' +
@@ -399,15 +438,75 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         if (m >= 60) { var h = Math.floor(m / 60); return h + "h " + (m % 60) + "m"; }
         return m > 0 ? m + "m " + s + "s" : s + "s";
       }
-      function recallPrompt() {
-        return "Warm up from EchoMem: call search_memories for what I have been working on recently, then give me a 5-line recap of my current projects and where each one stands, so we can pick up right where I left off. If this is Codex or Claude Code, open the EchoMem context HUD by running echomem-hud app. Use the HUD's context-health score to tell me when to renew into a fresh session and carry a checkpoint forward. As we work, when we make a decision, finish a fix, or hit a milestone, save it with save_conversation. Use this prompt in Codex, Claude Code, or Claude Desktop; if you are in another chat surface, tell me EchoMem tools may not be available here.";
+      function cleanRecallTopic(value) {
+        var topic = String(value || "")
+          .replace(/\s+/g, " ")
+          .replace(/\s+[·|]\s+\d+$/, "")
+          .trim();
+        if (!topic || topic.length < 3) return "";
+        if (topic.length > 56) topic = topic.slice(0, 53).trim() + "...";
+        var generic = {
+          "no project detected": true,
+          "untitled coding session": true,
+          "project": true,
+          "projects": true,
+          "coding session": true,
+          "coding sessions": true
+        };
+        return generic[topic.toLowerCase()] ? "" : topic;
+      }
+      function recallTopics() {
+        var selected = Object.create(null);
+        selectedSessionKeyList().forEach(function (key) { selected[key] = true; });
+        var sessions = candidateSessions().filter(function (session) {
+          return !!selected[String(session.key || "")];
+        });
+        if (!sessions.length) sessions = candidateSessions();
+
+        var scored = Object.create(null);
+        function addTopic(value, base, recency) {
+          var topic = cleanRecallTopic(value);
+          if (!topic) return;
+          var key = topic.toLowerCase();
+          if (!scored[key]) scored[key] = { topic: topic, score: 0 };
+          scored[key].score += base + recency;
+        }
+        sessions.forEach(function (session, index) {
+          var recency = Math.max(1, sessions.length - index);
+          addTopic(session.project, 100, recency);
+          addTopic(session.title, 20, recency);
+        });
+        return Object.keys(scored)
+          .map(function (key) { return scored[key]; })
+          .sort(function (a, b) { return b.score - a.score || a.topic.localeCompare(b.topic); })
+          .slice(0, 3)
+          .map(function (entry) { return entry.topic; });
+      }
+      function recallQuestions() {
+        var topics = recallTopics();
+        var templates = [
+          "What do I know about {x}?",
+          "Catch me up on {x}.",
+          "Where did I leave off with {x}?"
+        ];
+        var questions = topics.map(function (topic, index) {
+          return templates[index].replace("{x}", topic);
+        });
+        var fallbacks = [
+          "What have I been working on recently?",
+          "What decisions and next steps should I pick up?",
+          "What from my recent work needs attention next?"
+        ];
+        fallbacks.forEach(function (question) {
+          if (questions.length < 3) questions.push(question);
+        });
+        return questions.slice(0, 3);
       }
       function setLaunchStatus(message) {
         var node = document.getElementById("launchStatus");
         if (node) node.textContent = message || "";
       }
-      async function copyRecallPrompt() {
-        var prompt = recallPrompt();
+      async function copyRecallPrompt(prompt) {
         try {
           await navigator.clipboard.writeText(prompt);
           return true;
@@ -415,162 +514,477 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           return false;
         }
       }
-      async function copyPromptOnly() {
-        var copied = await copyRecallPrompt();
-        var copyBtn = document.getElementById("tryCopy");
+      async function copyPromptOnly(prompt, copyBtn) {
+        var copied = await copyRecallPrompt(prompt);
         if (copyBtn && copied) {
+          var original = copyBtn.innerHTML;
           copyBtn.textContent = "Copied";
-          window.setTimeout(function () { copyBtn.textContent = "Copy prompt"; }, 1600);
+          window.setTimeout(function () { copyBtn.innerHTML = original; }, 1600);
         }
-        setLaunchStatus(copied ? "Prompt copied." : "Could not copy automatically. Select the prompt and copy it.");
+        setLaunchStatus(copied ? "Question copied." : "Could not copy the question automatically.");
       }
       function codexDeepLink(prompt) {
         var q = "prompt=" + encodeURIComponent(prompt);
         if (workspacePath) q += "&path=" + encodeURIComponent(workspacePath);
         return "codex://new?" + q;
       }
-      async function tryInCodex() {
-        var prompt = recallPrompt();
-        var copied = await copyRecallPrompt();
-        setLaunchStatus(copied ? "Copied prompt. Opening Codex..." : "Opening Codex. If the prompt is empty, copy it manually.");
+      async function tryInCodex(prompt) {
+        var copied = await copyRecallPrompt(prompt);
+        setLaunchStatus(copied ? "Copied question. Opening Codex..." : "Opening Codex with your question...");
         window.location.href = codexDeepLink(prompt);
       }
-      async function openClaudeDesktop() {
-        var copied = await copyRecallPrompt();
-        setLaunchStatus(copied ? "Copied prompt. Opening Claude Desktop..." : "Opening Claude Desktop. If the prompt is empty, copy it manually.");
+      async function openClaudeDesktop(prompt) {
+        var copied = await copyRecallPrompt(prompt);
+        setLaunchStatus(copied ? "Copied question. Opening Claude Desktop..." : "Opening Claude Desktop...");
         try {
           var res = await postJson("/launch-agent", { agent: "claude-desktop" }, 8000);
-          setLaunchStatus(res && res.message ? res.message : "Prompt copied. Paste it into Claude Desktop.");
+          setLaunchStatus(res && res.message ? res.message : "Question copied. Paste it into Claude Desktop.");
         } 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 prompt is copied - open Claude Desktop and paste it.";
+          if (msg.indexOf("prompt") === -1 && msg.indexOf("Prompt") === -1) msg += " The question is copied - open Claude Desktop and paste it.";
           setLaunchStatus(msg);
         }
       }
+      function candidateSessions() {
+        return stats && Array.isArray(stats.candidateSessions) ? stats.candidateSessions : [];
+      }
+      function historicalSelectionLimit() {
+        if (!setupPlanConfirmed()) return 0;
+        var quota = billingStatus && billingStatus.historicalConversationQuota;
+        if (quota && typeof quota.remaining === "number" && isFinite(quota.remaining)) {
+          return Math.max(0, Math.floor(quota.remaining));
+        }
+        var plan = String(billingStatus && billingStatus.plan || "").toLowerCase();
+        if (plan === "power" || plan === "enterprise") return 500;
+        if (paidRecallPlan(plan)) return 250;
+        return 100;
+      }
+      function selectedSessionKeyList() {
+        var valid = Object.create(null);
+        candidateSessions().forEach(function (session) { valid[String(session.key || "")] = true; });
+        return Object.keys(selectedSessionKeys).filter(function (key) { return selectedSessionKeys[key] && valid[key]; });
+      }
+      function ensureSessionSelection() {
+        var candidates = candidateSessions();
+        var valid = Object.create(null);
+        candidates.forEach(function (session) { valid[String(session.key || "")] = true; });
+        Object.keys(selectedSessionKeys).forEach(function (key) {
+          if (!valid[key]) delete selectedSessionKeys[key];
+        });
+        if (!setupPlanConfirmed()) return;
+        var limit = Math.min(candidates.length, historicalSelectionLimit());
+        if (!sessionSelectionTouched) {
+          selectedSessionKeys = Object.create(null);
+          candidates.slice(0, limit).forEach(function (session) { selectedSessionKeys[String(session.key)] = true; });
+          return;
+        }
+        var selected = selectedSessionKeyList();
+        if (selected.length > limit) {
+          var keep = Object.create(null);
+          var selectedSet = Object.create(null);
+          selected.forEach(function (key) { selectedSet[key] = true; });
+          candidates.forEach(function (session) {
+            var key = String(session.key || "");
+            if (selectedSet[key] && Object.keys(keep).length < limit) keep[key] = true;
+          });
+          selectedSessionKeys = keep;
+        }
+      }
+      function sessionSourceLabel(source) {
+        return source === "claude-code" ? "Claude Code" : "Codex";
+      }
+      function sessionDateLabel(value) {
+        if (!value) return "Date unavailable";
+        var date = new Date(value);
+        if (!isFinite(date.getTime())) return "Date unavailable";
+        return date.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+      }
+      function renderSessionSelection(canExtract, message) {
+        var slot = document.getElementById("sessionSelection");
+        if (!slot) return;
+        if (!canExtract || !setupPlanConfirmed()) {
+          slot.innerHTML = "";
+          slot.classList.add("is-hidden");
+          return;
+        }
+        slot.classList.remove("is-hidden");
+        var candidates = candidateSessions();
+        if (!candidates.length) {
+          slot.innerHTML = '<div class="sessionSelectionCard is-loading"><span class="sessionSelectionIcon" aria-hidden="true">' + setupIcon("list-check") + '</span><div><strong>Preparing your conversation list…</strong><p>Echo is reading titles and project names locally so you can review the selection.</p></div></div>';
+          return;
+        }
+        ensureSessionSelection();
+        var selected = selectedSessionKeyList();
+        var limit = Math.min(candidates.length, historicalSelectionLimit());
+        var planLimited = candidates.length > limit;
+        var summary = planLimited
+          ? "Your plan can import " + number(limit) + " of " + number(candidates.length) + " available conversations."
+          : "All " + number(candidates.length) + " available conversations are included by default.";
+        slot.innerHTML =
+          '<section class="sessionSelectionCard" aria-labelledby="sessionSelectionTitle">' +
+            '<span class="sessionSelectionIcon" aria-hidden="true">' + setupIcon("list-check") + '</span>' +
+            '<div class="sessionSelectionCopy"><span class="sessionSelectionEyebrow">Conversations to import</span><strong id="sessionSelectionTitle">' + esc(number(selected.length)) + ' selected</strong><p>' + esc(message || summary) + '</p></div>' +
+            '<button type="button" class="secondary sessionEditButton" id="editSessions">Review &amp; edit</button>' +
+          '</section>';
+        var edit = document.getElementById("editSessions");
+        if (edit) edit.onclick = openSessionPicker;
+        var migrateBtn = document.getElementById("migrate");
+        if (migrateBtn) migrateBtn.disabled = selected.length === 0 || !setupPlanConfirmed();
+      }
+      function updateSessionPickerSelectionUi(dialog, input, limit) {
+        var selectedCount = selectedSessionKeyList().length;
+        hideSessionPickerLimitNotice();
+        var row = input && input.closest ? input.closest(".sessionPickerRow") : null;
+        if (row) row.classList.toggle("is-selected", !!input.checked);
+        var count = dialog.querySelector(".sessionPickerActions strong");
+        if (count) count.textContent = number(selectedCount) + " / " + number(limit) + " selected";
+        var status = dialog.querySelector("#sessionPickerStatus");
+        if (status) status.textContent = "";
+        var confirm = dialog.querySelector("#confirmSessions");
+        if (confirm) {
+          confirm.disabled = selectedCount === 0;
+          confirm.textContent = "Use " + number(selectedCount) + " selected";
+        }
+      }
+      function sessionPickerLimitNotice(canDismiss) {
+        var plan = String(billingStatus && billingStatus.plan || "").toLowerCase();
+        var linkLabel = plan === "power" || plan === "team" || plan === "enterprise"
+          ? "View plan options"
+          : "Upgrade to import more";
+        return '<div class="sessionPickerLimitCard">' +
+          '<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>' +
+          (canDismiss ? '<button type="button" class="textButton" id="dismissSessionLimit">Keep editing</button>' : "") + '</div>' +
+        '</div>';
+      }
+      function wireSessionPickerUpgrade() {
+        var upgrade = document.getElementById("upgradeSessionPlan");
+        if (upgrade) upgrade.onclick = function () { startBillingPoll(); };
+        var dismiss = document.getElementById("dismissSessionLimit");
+        if (dismiss) dismiss.onclick = hideSessionPickerLimitNotice;
+      }
+      function showSessionPickerLimitNotice(canDismiss) {
+        var wrap = document.getElementById("sessionPickerListWrap");
+        var list = wrap && wrap.querySelector ? wrap.querySelector(".sessionPickerList") : null;
+        var overlay = document.getElementById("sessionPickerLimitOverlay");
+        var status = document.getElementById("sessionPickerStatus");
+        if (status) status.textContent = "Plan limit reached. Upgrade to import more.";
+        if (!wrap || !overlay) return;
+        overlay.innerHTML = sessionPickerLimitNotice(canDismiss);
+        overlay.hidden = false;
+        if (list) list.inert = true;
+        wrap.classList.add("is-limit-blocked");
+        wireSessionPickerUpgrade();
+      }
+      function hideSessionPickerLimitNotice() {
+        var wrap = document.getElementById("sessionPickerListWrap");
+        var list = wrap && wrap.querySelector ? wrap.querySelector(".sessionPickerList") : null;
+        var overlay = document.getElementById("sessionPickerLimitOverlay");
+        var status = document.getElementById("sessionPickerStatus");
+        if (status) status.textContent = "";
+        if (overlay) { overlay.hidden = true; overlay.innerHTML = ""; }
+        if (list) list.inert = false;
+        if (wrap) wrap.classList.remove("is-limit-blocked");
+      }
+      function renderSessionPicker() {
+        var dialog = document.getElementById("sessionPicker");
+        if (!dialog) return;
+        ensureSessionSelection();
+        var all = candidateSessions();
+        var selected = selectedSessionKeyList();
+        var limit = Math.min(all.length, historicalSelectionLimit());
+        var query = sessionPickerQuery.trim().toLowerCase();
+        var filtered = all.filter(function (session) {
+          if (sessionPickerSource !== "all" && session.source !== sessionPickerSource) return false;
+          if (!query) return true;
+          return [session.title, session.project, session.source, session.date].join(" ").toLowerCase().indexOf(query) >= 0;
+        });
+        var visible = filtered.slice(0, 250);
+        var rows = visible.map(function (session) {
+          var key = String(session.key || "");
+          var encodedKey = encodeURIComponent(key);
+          var checked = !!selectedSessionKeys[key];
+          var sourceIcon = session.source === "claude-code" ? "claude" : "codex";
+          var sourceFallback = session.source === "claude-code" ? "CL" : "CX";
+          return '<label class="sessionPickerRow' + (checked ? " is-selected" : "") + '">' +
+            '<input type="checkbox" data-session-key="' + esc(encodedKey) + '"' + (checked ? " checked" : "") + ' />' +
+            '<span class="sessionPickerSource ' + (session.source === "claude-code" ? "is-claude" : "is-codex") + '"><img src="/hud-assets/' + sourceIcon + '.svg" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="sessionPickerSourceFallback">' + sourceFallback + '</span></span>' +
+            '<span class="sessionPickerMain"><strong>' + esc(session.title || "Untitled coding session") + '</strong><small>' + esc(session.project || "No project detected") + ' · ' + esc(sessionDateLabel(session.date)) + '</small></span>' +
+            '<span class="sessionPickerMeta">' + esc(compact(Number(session.approxInputTokens) || 0)) + ' tok</span>' +
+          '</label>';
+        }).join("");
+        var overflow = filtered.length > visible.length
+          ? '<p class="sessionPickerOverflow">Showing the first 250 matches. Narrow the search to find older conversations.</p>'
+          : "";
+        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>' +
+            '<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") + '>Use ' + esc(number(selected.length)) + ' selected</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 (skipImport) skipImport.onclick = skip;
+        wireSessionPickerUpgrade();
+        var search = document.getElementById("sessionPickerSearch");
+        if (search) search.oninput = function () {
+          sessionPickerQuery = search.value || "";
+          renderSessionPicker();
+          var next = document.getElementById("sessionPickerSearch");
+          if (next) { next.focus(); next.setSelectionRange(next.value.length, next.value.length); }
+        };
+        var source = document.getElementById("sessionPickerSource");
+        if (source) source.onchange = function () { sessionPickerSource = source.value || "all"; renderSessionPicker(); };
+        Array.prototype.forEach.call(dialog.querySelectorAll("[data-session-key]"), function (input) {
+          input.onchange = function () {
+            var key = decodeURIComponent(input.getAttribute("data-session-key") || "");
+            var count = selectedSessionKeyList().length;
+            if (input.checked && !selectedSessionKeys[key] && count >= limit) {
+              input.checked = false;
+              showSessionPickerLimitNotice(limit > 0);
+              return;
+            }
+            sessionSelectionTouched = true;
+            if (input.checked) selectedSessionKeys[key] = true;
+            else delete selectedSessionKeys[key];
+            // Keep the existing list DOM so selecting a row does not reset its scroll position.
+            updateSessionPickerSelectionUi(dialog, input, limit);
+          };
+        });
+        var newest = document.getElementById("selectNewestSessions");
+        if (newest) newest.onclick = function () {
+          sessionSelectionTouched = true;
+          selectedSessionKeys = Object.create(null);
+          all.slice(0, limit).forEach(function (session) { selectedSessionKeys[String(session.key)] = true; });
+          renderSessionPicker();
+        };
+        var clear = document.getElementById("clearSessions");
+        if (clear) clear.onclick = function () { sessionSelectionTouched = true; selectedSessionKeys = Object.create(null); renderSessionPicker(); };
+      }
+      function openSessionPicker() {
+        var dialog = document.getElementById("sessionPicker");
+        if (!dialog) return;
+        renderSessionPicker();
+        if (typeof dialog.showModal === "function") dialog.showModal();
+        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";
+      }
+      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 avatarUrl = account && account.avatarUrl ? String(account.avatarUrl) : "";
+        var avatar = '<span class="setupAccountAvatar" aria-hidden="true">' +
+          '<span>' + esc(accountInitials(account)) + '</span>' +
+          (avatarUrl ? '<img src="' + esc(avatarUrl) + '" alt="" onerror="this.remove()" />' : '') +
+          '</span>';
+        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>' +
+          '</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…"; }
+        try {
+          await postJson("/logout", {}, 12000);
+          stats = null;
+          billingStatus = null;
+          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();
+        } catch (error) {
+          if (button) { button.disabled = false; button.textContent = "Change account"; }
+          setSetupPlanStatus(error && error.message ? error.message : "Could not open the account chooser.");
+        }
+      }
       function paidRecallPlan(plan) {
         return ["pro", "power", "team", "enterprise"].indexOf(String(plan || "").toLowerCase()) >= 0;
       }
-      function recallPricingUrl() {
+      function setupPricingUrl(plan, startTrial) {
+        var paidPlan = plan === "power" ? "power" : "pro";
         return (billingStatus && billingStatus.pricingUrl)
-          || "https://echoknows.com/pricing?source=mcp_onboarding";
-      }
-      function recallGateUnlocked() {
-        return recallGateSkipped || paidRecallPlan(billingStatus && billingStatus.plan);
-      }
-      function recallTrialAvailable() {
-        return !billingStatus || billingStatus.trialAvailable !== false;
-      }
-      function recallGateBlock() {
-        var unlocked = recallGateUnlocked();
-        var trialAvailable = recallTrialAvailable();
-        return '<div class="recallGateBlock">' +
-          '<section class="recallGate' + (unlocked ? " is-hidden" : "") + '" id="recallGate">' +
-            '<p class="recallEyebrow"><i></i>Premium recall</p>' +
-            '<h3 id="recallGateTitle">' + (trialAvailable ? "Unlock memory search for your agents." : "Ready to turn recall back on?") + '</h3>' +
-            '<p id="recallGateBody">' + (trialAvailable ? "Start a 14-day trial and let Codex, Claude, and MCP clients search what Echo saved. Saving conversations keeps working either way." : "Choose Pro or Power to let Codex, Claude, and MCP clients search what Echo saved. Saving conversations keeps working either way.") + '</p>' +
-            '<div class="recallTrial' + (trialAvailable ? "" : " is-hidden") + '" id="recallTrialBadge" aria-label="14 days free"><strong>14</strong><span>days free<br>then choose what fits</span></div>' +
-            '<p class="recallUsedNote' + (trialAvailable ? " is-hidden" : "") + '" id="recallUsedNote">Your trial was already used. You can still unlock recall by choosing Pro or Power.</p>' +
-            '<div class="recallGateActions">' +
-              '<button type="button" class="primary" id="recallStartTrial">' + (trialAvailable ? "Compare Pro and Power" : "See pricing") + '</button>' +
-              '<button type="button" class="textButton" id="recallSkip">Skip recall for now</button>' +
-            '</div>' +
-            '<p class="recallFine" id="recallFine">' + (trialAvailable ? "Card required for trial. Cancel anytime." : "Cancel anytime.") + '</p>' +
-            '<p class="launchStatus" id="recallGateStatus"></p>' +
-          '</section>' +
-          '<div id="recallTryWrap" class="recallTryWrap' + (unlocked ? "" : " is-hidden") + '">' +
-            '<p id="recallSkipNote" class="recallSkipNote' + (recallGateSkipped ? "" : " is-hidden") + '">Saving will keep working. Search and recall require Pro or Power when this prompt calls <code>search_memories</code>.</p>' +
-            tryItCard() +
-          '</div>' +
-        '</div>';
+          ? billingStatus.pricingUrl + (startTrial ? "&start=" + paidPlan + "&trial=" + (billingStatus.trialAvailable === false ? "0" : "1") : "")
+          : "https://echoknows.com/pricing?source=mcp_onboarding" + (startTrial ? "&start=" + paidPlan + "&trial=1" : "");
+      }
+      function setupPlanConfirmed() {
+        return setupPlanChoice === "free" || paidRecallPlan(billingStatus && billingStatus.plan);
       }
-      function setRecallGateStatus(message) {
-        var node = document.getElementById("recallGateStatus");
+      function setSetupPlanStatus(message) {
+        var node = document.getElementById("setupPlanStatus");
         if (node) node.textContent = message || "";
       }
-      function applyRecallGate() {
-        var gate = document.getElementById("recallGate");
-        var wrap = document.getElementById("recallTryWrap");
-        var skipNote = document.getElementById("recallSkipNote");
-        var unlocked = recallGateUnlocked();
-        if (gate) gate.classList.toggle("is-hidden", unlocked);
-        if (wrap) wrap.classList.toggle("is-hidden", !unlocked);
-        if (skipNote) skipNote.classList.toggle("is-hidden", !recallGateSkipped);
-        var trialAvailable = recallTrialAvailable();
-        var badge = document.getElementById("recallTrialBadge");
-        if (badge) badge.classList.toggle("is-hidden", !trialAvailable);
-        var usedNote = document.getElementById("recallUsedNote");
-        if (usedNote) usedNote.classList.toggle("is-hidden", trialAvailable);
-        var title = document.getElementById("recallGateTitle");
-        if (title) title.textContent = trialAvailable ? "Unlock memory search for your agents." : "Ready to turn recall back on?";
-        var body = document.getElementById("recallGateBody");
-        if (body) body.textContent = trialAvailable
-          ? "Start a 14-day trial and let Codex, Claude, and MCP clients search what Echo saved. Saving conversations keeps working either way."
-          : "Choose Pro or Power to let Codex, Claude, and MCP clients search what Echo saved. Saving conversations keeps working either way.";
-        var cta = document.getElementById("recallStartTrial");
-        if (cta) cta.textContent = trialAvailable ? "Compare Pro and Power" : "See pricing";
-        var fine = document.getElementById("recallFine");
-        if (fine) fine.textContent = trialAvailable ? "Card required for trial. Cancel anytime." : "Cancel anytime.";
+      function renderSetupPlan(canExtract) {
+        var slot = document.getElementById("setupPlan");
+        if (!slot) return;
+        if (!canExtract) {
+          slot.innerHTML = "";
+          slot.classList.add("is-hidden");
+          return;
+        }
+        slot.classList.remove("is-hidden");
+        var plan = String(billingStatus && billingStatus.plan || "").toLowerCase();
+        var paid = paidRecallPlan(plan);
+        var migrateBtn = document.getElementById("migrate");
+        if (paid) {
+          setupPlanChoice = "paid";
+          var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
+          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>';
+          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>';
+          var changeBtn = document.getElementById("changeSetupPlan");
+          if (changeBtn) changeBtn.onclick = function () { setupPlanChoice = ""; renderSetupPlan(true); renderSessionSelection(true); };
+          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"); };
+        if (migrateBtn) migrateBtn.disabled = true;
+        renderSessionSelection(true);
       }
       async function refreshBillingStatus() {
+        if (billingStatusLoading) return;
+        billingStatusLoading = true;
         try {
           billingStatus = await getJson("/billing-status");
-          applyRecallGate();
-          if (!recallGateUnlocked() && billingStatus && billingStatus.plan === "unknown") {
-            setRecallGateStatus("Could not check your plan. You can start the trial or skip and keep setup going.");
-          }
+          renderSetupPlan(true);
+          renderAccountChoice();
+          renderSessionSelection(true);
+          if (billingStatus && billingStatus.plan === "unknown") setSetupPlanStatus("Plan check unavailable. Free still works.");
         } catch (_) {
-          setRecallGateStatus("Could not check your plan. You can start the trial or skip and keep setup going.");
+          setSetupPlanStatus("Plan check unavailable. Free still works.");
+        } finally {
+          billingStatusLoading = false;
         }
       }
-      function openRecallPricing() {
-        var url = recallPricingUrl();
-        setRecallGateStatus("Opening pricing in a new tab...");
+      function refreshBillingOnFocus() { void refreshBillingStatus(); }
+      function startBillingPoll() {
+        if (billingPollTimer) return;
+        window.addEventListener("focus", refreshBillingOnFocus);
+        billingPollTimer = window.setInterval(function () { void refreshBillingStatus(); }, 2500);
+      }
+      function stopBillingPoll() {
+        if (billingPollTimer) window.clearInterval(billingPollTimer);
+        billingPollTimer = null;
+        window.removeEventListener("focus", refreshBillingOnFocus);
+      }
+      function openPaidPricing(plan) {
+        var url = setupPricingUrl(plan, true);
+        setSetupPlanStatus("Opening secure checkout…");
         try {
-          var opened = window.open(url, "_blank", "noopener,noreferrer");
-          if (!opened) setRecallGateStatus("Your browser blocked the pricing tab. Allow pop-ups for this page, then click Compare plans again.");
+          var opened = window.open(url, "_blank");
+          if (!opened) {
+            setSetupPlanStatus("Your browser blocked checkout. Allow pop-ups, then try again.");
+            return;
+          }
+          try { opened.opener = null; } catch (_) {}
+          startBillingPoll();
         } catch (_) {
-          setRecallGateStatus("Could not open a new tab. Allow pop-ups for this page, then click Compare plans again.");
+          setSetupPlanStatus("Could not open checkout. Allow pop-ups, then try again.");
         }
       }
-      function skipRecallGate() {
-        recallGateSkipped = true;
-        applyRecallGate();
-      }
-      function wireRecallGate() {
-        var trialBtn = document.getElementById("recallStartTrial");
-        if (trialBtn) trialBtn.addEventListener("click", openRecallPricing);
-        var skipBtn = document.getElementById("recallSkip");
-        if (skipBtn) skipBtn.addEventListener("click", skipRecallGate);
-        wireTryButtons();
-        void refreshBillingStatus();
-      }
       function tryItCard() {
-        var prompt = recallPrompt();
-        return '<div class="tryCard">' +
-          '<h3 class="tryTitle">Echo MCP now available to use</h3>' +
-          '<div class="promptShell">' +
-            '<div class="promptControls">' +
-              '<button type="button" id="tryCopy" class="promptCopyLabel">Copy prompt</button>' +
+        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>' +
-            '<pre id="tryPrompt">' + esc(prompt) + '</pre>' +
-          '</div>' +
-          '<div class="agentLaunch" aria-label="Open in a coding agent">' +
-            '<button type="button" id="tryCodex"><span class="agentIcon"><img src="/agent-icons/codex.png" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="agentFallback">CX</span></span><span class="agentText"><strong>Try in Codex</strong><small>copy prompt + open session</small></span></button>' +
-            '<button type="button" id="tryClaudeDesktop"><span class="agentIcon"><img src="/agent-icons/claude-desktop.png" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="agentFallback">CL</span></span><span class="agentText"><strong>Open Claude Desktop</strong><small>copy prompt + open app</small></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("");
+        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>' +
           '<p class="launchStatus" id="launchStatus"></p>' +
           '</div>';
       }
       function wireTryButtons() {
-        var copyBtn = document.getElementById("tryCopy");
-        if (copyBtn) copyBtn.addEventListener("click", copyPromptOnly);
-        var codexBtn = document.getElementById("tryCodex");
-        if (codexBtn) codexBtn.addEventListener("click", tryInCodex);
-        var claudeBtn = document.getElementById("tryClaudeDesktop");
-        if (claudeBtn) claudeBtn.addEventListener("click", openClaudeDesktop);
+        Array.prototype.forEach.call(document.querySelectorAll("[data-recall-prompt]"), function (row) {
+          var prompt = row.getAttribute("data-recall-prompt") || "";
+          var copyBtn = row.querySelector("[data-recall-copy]");
+          var codexBtn = row.querySelector("[data-recall-codex]");
+          var claudeBtn = row.querySelector("[data-recall-claude]");
+          if (copyBtn) copyBtn.addEventListener("click", function () { void copyPromptOnly(prompt, copyBtn); });
+          if (codexBtn) codexBtn.addEventListener("click", function () { void tryInCodex(prompt); });
+          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 the context window while you work. When the score drifts low, start a fresh session and carry the checkpoint forward. In Codex or Claude Code, ask &ldquo;<strong>open the EchoMem HUD</strong>&rdquo; or run <code>echomem-hud app</code>.</span></p>';
+        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>';
@@ -578,34 +992,39 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       function renderEnding() {
         setCityMode(false);
         setExtractMode(true);
+        // This view replaces the live extraction shell. Mark it unmounted so a failed
+        // pause can rebuild the progress page instead of trying to patch missing DOM.
+        extractMounted = false;
         setHead("Ending extraction", "Ending");
         app.className = "";
         app.innerHTML =
-          '<div class="miniLoad" style="margin:0 auto;text-align:center;place-items:center">' +
-            '<h2>Ending cleanly</h2>' +
-            '<p>Give Echo a moment to mark this setup as finished for now. Everything already captured stays saved.</p>' +
+          '<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>';
       }
       function renderSkipped() {
         setCityMode(false);
         setExtractMode(true);
-        setHead("Setup paused", "Skipped");
+        setHead("Extraction ended for now", "Ended");
         app.className = "";
         app.innerHTML =
           '<div class="skipStage">' +
-            '<span class="seal">Skipped for now</span>' +
-            '<h2>You can come back anytime.</h2>' +
-            '<p>Echo saved what already finished. When you are ready, run <code>echomem-mcp init</code> again — it picks up right where it left off.</p>' +
-            recallGateBlock() +
+            '<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>';
-        wireRecallGate();
+        wireTryButtons();
       }
       async function endExtraction() {
         if (extractionEnded) return;
-        var ok = window.confirm("End extraction for now? You can come back anytime. Everything already captured stays saved, and the next run continues from what remains.");
+        var ok = window.confirm("End extraction for now? Echo will cancel all remaining queued work and release its unused reservations. Everything already captured stays saved.");
         if (!ok) return;
+        extractionRecoveryMessage = "";
         extractionEnded = true;
         renderEnding();
         try {
@@ -614,18 +1033,23 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           renderSkipped();
         } catch (error) {
           // A paused screen is a promise: do not show it until the bridge confirms that no more
-          // conversations will be scheduled. Keep the active view visible when pausing fails.
+          // conversations will be scheduled. Restore the last live extraction state immediately;
+          // do not depend on another bridge request before leaving the ending screen.
           extractionEnded = false;
-          var message = error && error.message ? error.message : "Could not pause extraction. It is still running.";
-          try {
-            renderProgress(await getJson("/progress"));
-            var notice = document.getElementById("exText");
-            if (notice) notice.insertAdjacentHTML("afterbegin", '<div class="error">' + esc(message) + '</div>');
-          } catch (_) {
-            setHead("Could not pause extraction", "Still extracting");
-            app.className = "notice";
-            app.innerHTML = '<h2>Extraction may still be running.</h2><p>' + esc(message) + '</p><p>Keep this page open and try ending it again in a moment.</p>';
-          }
+          var message = error && error.message ? error.message : "Could not end extraction. It may still be running.";
+          extractionRecoveryMessage = message;
+          extractMounted = false;
+          renderProgress(lastExtractionProgress || {
+            status: "running",
+            total: 0,
+            completed: 0,
+            failed: 0,
+            extracted: 0,
+            latest: "Extraction is still running."
+          });
+          // Rejoin live updates. If the bridge is temporarily unavailable, the restored page and
+          // End for now button remain usable instead of being replaced by another blocking state.
+          void pollProgress().catch(function () {});
         }
       }
       async function skip() {