@echomem/mcp 1.4.26 → 1.4.27

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

@@ -48,30 +48,31 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         return envelope;
       }
       function renderReportIssue(code, message) {
+        void message;
         report = null;
         reportEnvelope = null;
         resetReportSurface();
-        setHead("Your local report could not be shown", "Needs attention");
-        app.className = "loading-panel";
+        setHead("We couldn't finish this scan", "Needs attention");
+        app.className = "reportMessageStage";
         app.innerHTML =
-          '<div style="padding:24px" data-report-state="failed">' +
-            '<h2>No backup or sample data was shown</h2>' +
-            '<p class="helper" style="margin-top:10px">' + esc(message || "The local scan did not produce a report that passed validation.") + '</p>' +
-            '<div class="warning" style="margin-top:16px;margin-bottom:0"><strong>Error ' + esc(code || "REPORT_FAILED") + '</strong><br />Close this tab, check the terminal, and run <code>echomem-mcp init</code> again.</div>' +
-          '</div>';
+          '<section class="reportMessage" data-report-state="failed">' +
+            '<h2>We couldn’t finish this scan.</h2>' +
+            '<p>Your coding history is unchanged.</p>' +
+            '<p>Close this tab and run <code>echomem-mcp init</code> again.</p>' +
+            '<details class="reportTechnical"><summary>Technical details</summary><code>' + esc(code || "REPORT_FAILED") + '</code></details>' +
+          '</section>';
       }
       function renderEmptyReport() {
         report = null;
         reportEnvelope = null;
         resetReportSurface();
         setHead("No local coding history found", "Local scan complete");
-        app.className = "loading-panel";
+        app.className = "reportMessageStage";
         app.innerHTML =
-          '<div style="padding:24px" data-report-state="empty">' +
-            '<h2>There is no local Codex or Claude Code history to analyze yet</h2>' +
-            '<p class="helper" style="margin-top:10px">Echo checked this machine and found no supported sessions with token usage. Start a coding session, then run <code>echomem-mcp init</code> again.</p>' +
-            '<p class="helper" style="margin-top:10px"><strong>No demo data, percentages, savings, persona, or city was substituted.</strong></p>' +
-          '</div>';
+          '<section class="reportMessage" data-report-state="empty">' +
+            '<h2>No coding history found.</h2>' +
+            '<p>Start a Codex or Claude Code session, then run <code>echomem-mcp init</code> again.</p>' +
+          '</section>';
       }
       function renderBridgeIssue() {
         renderReportIssue("BRIDGE_UNREACHABLE", "The local bridge stopped answering before your report was ready. Your terminal may have closed or the process may have stopped.");
@@ -153,6 +154,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         readyStage = "plan";
         app.className = "planGateStage";
         app.innerHTML =
+          setupJourney(3) +
           '<section class="planGateDecision">' +
             '<div class="setupPlanSlot" id="setupPlan"></div>' +
             '<aside class="planGateAccount" aria-label="Connected account"><div class="setupAccountSlot" id="setupAccount"></div></aside>' +
@@ -193,12 +195,12 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           ? "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>");
+              : "<strong>" + esc(number(pendN)) + " sessions</strong> are ready to review.");
         var sub = !pendingTrusted
           ? "Echo is matching your local history against what is already in memory."
           : (knownDone
             ? (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.");
+            : "Nothing uploads until you confirm.");
         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.)
@@ -214,9 +216,9 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           // one-line strip, not stat cards; the ETA is a commitment-moment note under the button,
           // not a display-size headline.
           app.innerHTML =
+            setupJourney(4) +
             '<div id="exBanner"></div>' +
             '<section class="readyDecision extractionReady">' +
-              '<p class="utilityEyebrow readyEyebrow">History import / review</p>' +
               '<div class="readyHero">' +
                 '<img class="readyMascot" src="/hud-assets/echo-face-cutout.png" alt="" />' +
                 '<div class="exCopy">' +
@@ -225,10 +227,10 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
                 '</div>' +
               '</div>' +
               '<div class="proofStrip" id="exSources"></div>' +
+              '<div class="billingCommitmentSlot" id="billingCommitment"></div>' +
               '<div class="readyGo">' +
                 '<div class="actions">' +
                   '<button id="migrate" class="primary"></button>' +
-                  '<button type="button" id="skipHistoryImport" class="secondary skipHistoryButton">Skip for now</button>' +
                 '</div>' +
                 '<p class="ctaMeta" id="exEta"></p>' +
               '</div>' +
@@ -236,9 +238,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
                 '<div class="readySetting readyAccountSetting"><span class="readySettingLabel">Account</span><div class="setupAccountSlot" id="setupAccount"></div></div>' +
                 '<div class="readySetting readyPlanSetting"><span class="readySettingLabel">Plan</span><div class="setupPlanSlot" id="setupPlan"></div></div>' +
               '</aside>' +
-              '<div class="readyFoot">' +
-                '<details class="readyExplain" id="readyExplain"></details>' +
-              '</div>' +
             '</section>' +
             '<dialog class="sessionPicker" id="sessionPicker" aria-labelledby="sessionPickerTitle"></dialog>';
           document.getElementById("migrate").onclick = openSessionPicker;
@@ -251,7 +250,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         document.getElementById("exSub").textContent = sub;
         var codexN = pendingTrusted && pendingCodex !== null ? pendingCodex : (sessions.codex || 0);
         var claudeN = pendingTrusted && pendingClaudeCode !== null ? pendingClaudeCode : (sessions.claudeCode || 0);
-        var alreadyN = Math.max(0, (sessions.total || 0) - pendN);
         // Proof strip: one quiet line of evidence that the scan is real. Hidden when there is nothing to show.
         var srcIcon = function (id, fallback) {
           var asset = id === "claude-desktop" ? "claude" : "codex";
@@ -268,59 +266,54 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         // Reassurances live at the moment of commitment — right under the button.
         document.getElementById("exEta").innerHTML = pendingTrusted
           ? (canExtract
-              ? '<span class="cm">&asymp; ' + esc(etaLabel) + '</span><span class="cmDot">&middot;</span><span class="cm">runs locally</span>' + (alreadyN ? '<span class="cmDot">&middot;</span><span class="cm">' + esc(number(alreadyN)) + ' already-saved skipped</span>' : '')
+              ? '<span class="cm">&asymp; ' + esc(etaLabel) + '</span>'
               : 'Nothing new to extract right now.')
           : 'Echo is checking local history against saved memory&hellip;';
-        document.getElementById("readyExplain").innerHTML =
-          '<summary>What exactly happens?</summary>' +
-          '<p>A coding session is a local Codex or Claude Code transcript from this Mac. Echo extracts compact memories from it, not a full chat replay.</p>' +
-          '<div class="readySteps">' +
-            '<div class="readyStep"><strong>Read locally</strong><span>Echo scans session logs on this device.</span></div>' +
-            '<div class="readyStep"><strong>Skip repeats</strong><span>Anything already in memory is ignored.</span></div>' +
-            '<div class="readyStep"><strong>Save memory</strong><span>Decisions, fixes, context, and next steps become searchable.</span></div>' +
-          '</div>';
         renderSetupPlan(canExtract);
         renderAccountChoice();
         if (canExtract && !billingStatus && !billingStatusLoading) void refreshBillingStatus();
         // While still counting, hide the primary button entirely; the headline + source split
         // already say it is working, and the ready state should present one clear action.
         var migrateBtn = document.getElementById("migrate");
-        var skipHistoryBtn = document.getElementById("skipHistoryImport");
         if (pendingTrusted) {
           migrateBtn.style.display = "";
           if (canExtract) ensureSessionSelection();
           migrateBtn.disabled = canExtract && (!setupPlanConfirmed() || selectedSessionKeyList().length === 0);
           migrateBtn.innerHTML = '<span>' + esc(canExtract ? "Review " + number(pendN) + " sessions" : "Finish setup") + '</span>' + (canExtract ? setupIcon("arrow-right") : "");
           migrateBtn.onclick = canExtract ? openSessionPicker : skip;
-          if (skipHistoryBtn) {
-            skipHistoryBtn.style.display = canExtract ? "" : "none";
-            skipHistoryBtn.onclick = skip;
-          }
         } else {
           migrateBtn.style.display = "none";
-          if (skipHistoryBtn) skipHistoryBtn.style.display = "none";
         }
       }
+      // The picker's confirm button checks this BEFORE closing the dialog. Closing first turned a
+      // blocked start into a silent bounce back to the dashboard — or all the way to the plan gate,
+      // because a billing refresh can flip setupPlanConfirmed() while the picker is open.
+      function migrateBlockedReason() {
+        if (!setupPlanConfirmed()) return "Choose Original, Pro, or Power to bring Echo home.";
+        if (!selectedSessionKeyList().length) return "Choose at least one conversation to extract.";
+        return "";
+      }
+      function setSessionPickerStatus(message) {
+        var status = document.getElementById("sessionPickerStatus");
+        if (status) status.textContent = message;
+      }
       async function startMigrate() {
         if (decisionMade) return;
-        if (!setupPlanConfirmed()) {
-          setSetupPlanStatus("Choose Original, Pro, or Power to bring Echo home.");
+        var blocked = migrateBlockedReason();
+        if (blocked) {
+          if (!setupPlanConfirmed()) setSetupPlanStatus(blocked);
+          else openSessionPicker();
+          setSessionPickerStatus(blocked);
           return;
         }
         var selectedKeys = selectedSessionKeyList();
-        if (!selectedKeys.length) {
-          openSessionPicker();
-          var pickerStatus = document.getElementById("sessionPickerStatus");
-          if (pickerStatus) pickerStatus.textContent = "Choose at least one conversation to extract.";
-          return;
-        }
         stopBillingPoll();
         decisionMade = true;
         extractionEnded = false;
         setCityMode(false);
         setHead("Extracting", "Starting");
         app.className = "";
-        app.innerHTML = '<div class="miniLoad"><h2>Starting extraction</h2><p>Echo is sizing the remaining jobs, then imports automatically. Finished work is saved as it goes.</p><div class="miniBar"><i></i></div></div>';
+        app.innerHTML = '<div class="miniLoad"><h2>Starting extraction…</h2><div class="miniBar"><i></i></div></div>';
         var started;
         try {
           started = await postJson("/migrate", { conversationKeys: selectedKeys });
@@ -414,11 +407,14 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         // each poll only rebuilds the text column.
         if (!extractMounted) {
           app.innerHTML =
+            '<div id="setupJourneySlot">' + setupJourney(4) + '</div>' +
             '<section class="exHero"><div class="exCopy" id="exText"></div>' +
             plateBlock() +
             '</section>';
           extractMounted = true;
         }
+        var journeySlot = document.getElementById("setupJourneySlot");
+        if (journeySlot) journeySlot.innerHTML = setupJourney(done ? 5 : 4);
         var shell = app.querySelector(".exHero");
         if (shell) {
           shell.classList.toggle("exHeroResult", done || stopped);
@@ -439,27 +435,18 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             : "";
           t.innerHTML =
             '<div class="resultStage ' + (done ? "ok" : "warn") + '">' +
-              (done ? '<p class="utilityEyebrow">Memory extraction / complete</p>' : '<p class="utilityEyebrow">Memory extraction / stopped</p>') +
               '<div class="resultTop">' +
                 '<div>' +
                   (done
                     ? '<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>') +
+                      '<p class="exSub">' + stopDetail + '</p>') +
                 '</div>' +
               '</div>' +
               (done ? tryItCard() : "") +
-              (done ? "" :
-                '<div class="memoryReceipt">' +
-                  '<p class="receiptK">What just happened</p>' +
-                  '<div class="finishStats">' +
-                    '<div class="finishStat"><strong>' + esc(number(completed)) + '</strong><span>' + esc(conversationNoun) + ' extracted</span></div>' +
-                    '<div class="finishStat"><strong>' + esc(number(extracted)) + '</strong><span>memories ready</span></div>' +
-                  '</div>' +
-                '</div>') +
+              (done ? "" : '<p class="resultSummary">' + esc(number(extracted)) + ' ' + esc(memoryNoun) + ' saved · ' + esc(number(completed)) + ' ' + esc(conversationNoun) + ' processed</p>') +
             '</div>' +
-            (done ? hudTip() + doneCloseNote() : "");
+            "";
           wireTryButtons();
           return;
         }
@@ -480,10 +467,9 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           if (completed >= 5 && elapsed > 20) remainSec = (total - completed) / (completed / elapsed);
           else remainSec = Math.max(0, (exDeadline - now) / 1000);
           if (now > exDeadline) {
-            overdueHtml = '<div class="exOverdue"><strong>Taking longer than expected. Still working.</strong>' +
-              'Everything already processed is saved. Ending now is safe; the next run resumes from the remaining conversations.</div>';
+            overdueHtml = '<div class="exOverdue"><strong>Taking longer than expected.</strong> Saved work is safe.</div>';
           } else {
-            countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes · safe to end and resume</p>';
+            countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes</p>';
           }
         }
         var recoveryNotice = extractionRecoveryMessage
@@ -491,15 +477,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           : "";
         t.innerHTML = recoveryNotice +
           '<div class="workbench">' +
-            '<p class="utilityEyebrow">Memory extraction / live</p>' +
             '<h2 class="siteHeadline">' + (preparing ? "Setting up the <strong>import.</strong>" : "Building your <strong>memory.</strong>") + '</h2>' +
             '<div class="exMeter"><strong>' + (preparing ? "Local" : esc(number(pct)) + "%") + '</strong><span>' + (preparing ? "sizing sessions" : (total ? esc(number(completed)) + " of " + esc(number(total)) + " conversations" : "starting")) + '</span></div>' +
             '<div class="track' + (preparing ? " indef" : "") + '"><div class="fill"' + (preparing ? "" : ' style="width:' + pct + '%"') + '></div></div>' +
-            '<p class="exSub">' + esc(number(extracted)) + ' ' + (extracted === 1 ? "memory" : "memories") + ' captured' + (checkingEdgeCases ? ' · finishing checks' : "") + '.</p>' +
-            '<div class="exCurrent"><i></i><div><span>Now handling</span><strong>' + esc(statusLine) + '</strong></div></div>' +
+            '<p class="exSub">' + esc(number(extracted)) + ' ' + (extracted === 1 ? "memory saved" : "memories saved") + (checkingEdgeCases ? ' · finishing checks' : "") + '.</p>' +
+            (String(statusLine).toLowerCase().indexOf("reconnecting") >= 0 ? '<p class="exActivity">' + esc(statusLine) + '</p>' : '') +
             countdownHtml + overdueHtml +
-            '<div class="extractEndRow"><button type="button" class="secondary" id="endExtraction">End for now</button><span>Ends cleanly; next time continues from saved work.</span></div>' +
-            '<p class="exHint">You can step away from this page. Echo saves each finished conversation as it goes.</p>' +
+            '<div class="extractEndRow"><button type="button" class="secondary" id="endExtraction">End for now</button></div>' +
           '</div>';
         var endBtn = document.getElementById("endExtraction");
         if (endBtn) endBtn.onclick = endExtraction;
@@ -602,21 +586,50 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       async function tryInCodex(prompt) {
         var copied = await copyRecallPrompt(prompt);
-        setLaunchStatus(copied ? "Copied question. Opening Codex..." : "Opening Codex with your question...");
+        setLaunchStatus(copied ? "Opening Codex with your first recall…" : "Opening Codex with your first recall…");
+        startFirstRecallWatch();
         window.location.href = codexDeepLink(prompt);
       }
       async function openClaudeDesktop(prompt) {
         var copied = await copyRecallPrompt(prompt);
-        setLaunchStatus(copied ? "Copied question. Opening Claude Desktop..." : "Opening Claude Desktop...");
+        setLaunchStatus(copied ? "Question copied. Opening Claude Desktop for your first recall…" : "Opening Claude Desktop for your first recall…");
+        startFirstRecallWatch();
         try {
           var res = await postJson("/launch-agent", { agent: "claude-desktop" }, 8000);
-          setLaunchStatus(res && res.message ? res.message : "Question copied. Paste it into Claude Desktop.");
+          setLaunchStatus(res && res.message ? res.message + " Send it there; this page will confirm when Echo remembers." : "Question copied. Send it in Claude Desktop; this page will confirm when Echo remembers.");
         } catch (error) {
           var msg = error && error.message ? error.message : "Could not auto-open Claude.";
           if (msg.indexOf("prompt") === -1 && msg.indexOf("Prompt") === -1) msg += " The question is copied - open Claude Desktop and paste it.";
           setLaunchStatus(msg);
         }
       }
+      function stopFirstRecallWatch() {
+        if (firstRecallPollTimer) window.clearInterval(firstRecallPollTimer);
+        firstRecallPollTimer = null;
+      }
+      async function checkFirstRecallActivation() {
+        if (!firstRecallPollStartedAt || Date.now() - firstRecallPollStartedAt > 120000) {
+          stopFirstRecallWatch();
+          return;
+        }
+        try {
+          var latest = await getJson("/billing-status");
+          if (latest && latest.activation && latest.activation.hasSearchedMemory === true) {
+            stopFirstRecallWatch();
+            document.title = "Echo remembered it — setup complete";
+            var card = document.querySelector(".tryCard");
+            if (card) card.classList.add("is-recalled");
+            setLaunchStatus("Echo remembered it. Setup complete.");
+          }
+        } catch (_) {}
+      }
+      function startFirstRecallWatch() {
+        firstRecallPollStartedAt = Date.now();
+        stopFirstRecallWatch();
+        firstRecallPollTimer = window.setInterval(function () {
+          void checkFirstRecallActivation();
+        }, 2500);
+      }
       function candidateSessions() {
         return stats && Array.isArray(stats.candidateSessions) ? stats.candidateSessions : [];
       }
@@ -792,20 +805,23 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           : "";
         dialog.innerHTML =
           '<div class="sessionPickerShell">' +
-            '<header class="sessionPickerHead"><div><span>Bulk history import</span><h2 id="sessionPickerTitle">Choose conversations</h2><p>Select up to ' + esc(number(limit)) + '. Newest conversations are selected first.</p></div><button type="button" class="sessionPickerClose" id="closeSessionPicker" aria-label="Close">×</button></header>' +
+            '<header class="sessionPickerHead"><div><h2 id="sessionPickerTitle">Choose conversations</h2><p>Up to ' + esc(number(limit)) + ' · newest 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") + '>Start memory extraction</button></div></footer>' +
+            '<footer class="sessionPickerFoot"><div class="sessionPickerFootActions"><button type="button" class="primary" id="confirmSessions"' + (selected.length ? "" : " disabled") + '>Start memory extraction</button></div></footer>' +
           '</div>';
         var close = document.getElementById("closeSessionPicker");
         var confirm = document.getElementById("confirmSessions");
-        var skipImport = document.getElementById("skipSessionImport");
         if (close) close.onclick = function () { dialog.close(); renderSessionSelection(true); };
-        if (confirm) confirm.onclick = function () { dialog.close(); void startMigrate(); };
-        if (skipImport) skipImport.onclick = skip;
+        if (confirm) confirm.onclick = function () {
+          var blocked = migrateBlockedReason();
+          if (blocked) { setSessionPickerStatus(blocked); return; }
+          dialog.close();
+          void startMigrate();
+        };
         wireSessionPickerUpgrade();
         var search = document.getElementById("sessionPickerSearch");
         if (search) search.oninput = function () {
@@ -872,13 +888,42 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             '<button type="button" class="textButton setupAccountChange" id="changeSetupAccount">Switch</button>' +
           '</section>';
         var change = document.getElementById("changeSetupAccount");
-        if (change) change.onclick = switchSetupAccount;
+        if (change) change.onclick = renderAccountSwitchConfirm;
+      }
+      function renderAccountSwitchConfirm() {
+        var account = billingStatus && billingStatus.account;
+        var accountLabel = account && (account.email || account.displayName)
+          ? (account.email || account.displayName)
+          : "the connected account";
+        accountSwitchPending = true;
+        setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
+        setHead("Switch EchoMem account", "Confirm");
+        app.className = "accountSwitchStage";
+        app.innerHTML =
+          setupJourney(4) +
+          '<section class="accountSwitchConfirm" aria-labelledby="accountSwitchTitle">' +
+            '<button type="button" class="flowBack" id="cancelAccountSwitch">← Back</button>' +
+            '<h2 id="accountSwitchTitle">Switch account?</h2>' +
+            '<p><strong>' + esc(accountLabel) + '</strong> stays connected until you continue.</p>' +
+            '<button type="button" class="primary" id="confirmAccountSwitch">Sign out &amp; switch</button>' +
+            '<p class="localAuthStatus" id="localAuthStatus" role="status" aria-live="polite"></p>' +
+          '</section>';
+        var cancel = document.getElementById("cancelAccountSwitch");
+        if (cancel) cancel.onclick = function () {
+          accountSwitchPending = false;
+          renderDashboard();
+        };
+        var confirm = document.getElementById("confirmAccountSwitch");
+        if (confirm) confirm.onclick = function () { void switchSetupAccount(); };
       }
       async function switchSetupAccount() {
-        var button = document.getElementById("changeSetupAccount");
+        var button = document.getElementById("confirmAccountSwitch");
         if (button) { button.disabled = true; button.textContent = "Signing out..."; }
         try {
           await postJson("/logout", {}, 12000);
+          accountSwitchPending = false;
           stats = null;
           billingStatus = null;
           connected = false;
@@ -889,13 +934,89 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           localAuthAgeConfirmed = false;
           renderLocalLogin("");
         } catch (error) {
-          if (button) { button.disabled = false; button.textContent = "Change account"; }
-          setSetupPlanStatus(error && error.message ? error.message : "Could not switch accounts.");
+          if (button) { button.disabled = false; button.textContent = "Sign out & switch"; }
+          setLocalAuthStatus(error && error.message ? error.message : "Could not switch accounts.", "error");
         }
       }
       function paidRecallPlan(plan) {
         return ["pro", "power", "team", "enterprise"].indexOf(String(plan || "").toLowerCase()) >= 0;
       }
+      function setupPlanPrice(plan) {
+        return plan === "power" ? "$100" : "$20";
+      }
+      function formatBillingDate(value) {
+        if (typeof value !== "string" || !value) return "";
+        var parsed = new Date(value);
+        if (!isFinite(parsed.getTime())) return "";
+        try {
+          return new Intl.DateTimeFormat(undefined, {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          }).format(parsed);
+        } catch (_) {
+          return parsed.toISOString().slice(0, 10);
+        }
+      }
+      function trialChargeDateText() {
+        var chargeAt = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+        try {
+          return new Intl.DateTimeFormat(undefined, {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+          }).format(chargeAt);
+        } catch (_) {
+          return chargeAt.toISOString().slice(0, 10);
+        }
+      }
+      function paidPlanLifecycleText(plan) {
+        var state = String(billingStatus && billingStatus.subscriptionStatus || "").toLowerCase();
+        var trialEnd = formatBillingDate(billingStatus && billingStatus.trialEndedAt);
+        var periodEnd = formatBillingDate(billingStatus && billingStatus.currentPeriodEnd);
+        if (billingStatus && billingStatus.cancelAtPeriodEnd === true) {
+          var accessEnd = state === "trialing" ? (trialEnd || periodEnd) : periodEnd;
+          return accessEnd
+            ? "Canceled — active until " + accessEnd + ". It will not renew."
+            : "Canceled — active until the end of this billing period. It will not renew.";
+        }
+        if (state === "trialing") {
+          return trialEnd
+            ? "Trial active until " + trialEnd + ". Then " + setupPlanPrice(plan) + "/month unless canceled."
+            : "Trial active. Then " + setupPlanPrice(plan) + "/month unless canceled.";
+        }
+        if (state === "active" && periodEnd) return "Active — renews on " + periodEnd + ".";
+        return "";
+      }
+      function renderBillingCommitment(plan) {
+        var slot = document.getElementById("billingCommitment");
+        if (!slot) return;
+        if (!paidRecallPlan(plan)) {
+          slot.innerHTML = "";
+          slot.classList.remove("is-visible");
+          return;
+        }
+        var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
+        var state = String(billingStatus && billingStatus.subscriptionStatus || "").toLowerCase();
+        var canceled = !!(billingStatus && billingStatus.cancelAtPeriodEnd === true);
+        var statusLabel = canceled ? "Canceled" : (state === "trialing" ? "Trial active" : "Active");
+        var lifecycle = paidPlanLifecycleText(plan);
+        var quota = billingStatus && billingStatus.historicalConversationQuota;
+        var limit = quota && typeof quota.limit === "number" ? quota.limit : (plan === "power" ? 2000 : 500);
+        var moneyFact = canceled
+          ? "No future charge"
+          : (state === "trialing" ? setupPlanPrice(plan) + "/month after trial" : setupPlanPrice(plan) + "/month");
+        slot.classList.add("is-visible");
+        slot.innerHTML =
+          '<section class="billingCommitment' + (canceled ? ' is-canceled' : '') + '" aria-label="Current plan commitment">' +
+            '<div class="billingCommitmentIdentity"><span>' + esc(statusLabel) + '</span><strong>' + esc(planLabel) + '</strong></div>' +
+            '<div class="billingCommitmentFacts">' +
+              '<span><b>' + esc(number(limit)) + '</b> coding-session imports</span>' +
+              '<span><b>' + esc(moneyFact) + '</b></span>' +
+            '</div>' +
+            '<p>' + esc(lifecycle || "Your paid plan is active.") + '</p>' +
+          '</section>';
+      }
       function setupPricingUrl(plan, startTrial) {
         var paidPlan = plan === "power" ? "power" : "pro";
         return (billingStatus && billingStatus.pricingUrl)
@@ -906,16 +1027,21 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         return setupPlanChoice === "free" || paidRecallPlan(billingStatus && billingStatus.plan);
       }
       function setupPlanDefinition(plan) {
+        var trialAvailable = !billingStatus || billingStatus.trialAvailable !== false;
         if (plan === "power") return {
           id: "power",
           name: "Power",
           homeName: "Power",
           promise: "More room. More agents. Much more Echo.",
           price: "$100",
-          cadence: "per month · 14-day trial",
+          cadence: trialAvailable ? "per month · 14-day trial" : "per month · billed immediately",
           sticker: "/hud-assets/echo-pricing-power-sticker.png",
           stickerAlt: "Power Echo arrives with a gold key and a crew of notebook helpers.",
-          features: ["2,000 past chats", "agent-heavy memory", "2,000 context returns / week"]
+          features: [
+            "2,000 coding sessions",
+            "agent-heavy memory",
+            "2,000 memory recalls / week"
+          ]
         };
         if (plan === "pro") return {
           id: "pro",
@@ -923,11 +1049,15 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           homeName: "Pro",
           promise: "A room for the work you return to every day.",
           price: "$20",
-          cadence: "per month · 14-day trial",
+          cadence: trialAvailable ? "per month · 14-day trial" : "per month · billed immediately",
           sticker: "/hud-assets/echo-pricing-pro-sticker.png",
           stickerAlt: "Pro Echo organizes tabbed notebooks and a daily refresh control.",
           popular: true,
-          features: ["500 past chats", "daily memory updates", "500 context returns / week"]
+          features: [
+            "500 coding sessions",
+            "daily memory updates",
+            "500 memory recalls / week"
+          ]
         };
         return {
           id: "free",
@@ -938,19 +1068,12 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           cadence: "free forever · no card needed",
           sticker: "/hud-assets/echo-pricing-free-sticker.png",
           stickerAlt: "Original Echo hugs one simple memory card.",
-          features: ["100 past chats", "a few new chats / week", "100 context returns / week"]
+          features: ["100 coding sessions", "a few new sessions / week", "100 memory recalls / week"]
         };
       }
-      function setupDiscoveredSessionCount() {
-        var pending = stats && stats.migratable && stats.migratable.pending;
-        if (typeof pending === "number" && isFinite(pending)) return Math.max(0, pending);
-        var total = stats && stats.sessions && stats.sessions.total;
-        return typeof total === "number" && isFinite(total) ? Math.max(0, total) : 0;
-      }
       function renderPlanHabitat() {
         setupPlanPreview = setupPlanPreview === "pro" || setupPlanPreview === "power" ? setupPlanPreview : "free";
         var plan = setupPlanDefinition(setupPlanPreview);
-        var discovered = setupDiscoveredSessionCount();
         var tabs = ["free", "pro", "power"].map(function (id) {
           var tab = setupPlanDefinition(id);
           var selected = id === plan.id;
@@ -960,12 +1083,13 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           return '<li>' + setupIcon("check") + '<span>' + esc(feature) + '</span></li>';
         }).join("");
         var chooseId = plan.id === "free" ? "chooseFreePlan" : (plan.id === "power" ? "choosePowerPlan" : "chooseProPlan");
-        var chooseLabel = plan.id === "free" ? "Take " + plan.homeName + " home" : "Start 14-day trial";
-        var discovery = discovered > 0
-          ? '<p class="mvpPricingDiscovery">Echo found <strong>' + esc(number(discovered)) + '</strong> new coding session' + (discovered === 1 ? "" : "s") + ' on this Mac.</p>'
-          : "";
+        var chooseLabel = plan.id === "free"
+          ? "Continue with " + plan.homeName + " — Free"
+          : ((!billingStatus || billingStatus.trialAvailable !== false)
+            ? "Start " + plan.homeName + " trial — $0 today"
+            : "Subscribe to " + plan.homeName);
         return '<section class="mvpPricing" aria-labelledby="setupPlanHeading">' +
-          '<header class="mvpPricingIntro"><span>Plans</span><h2 id="setupPlanHeading">Choose your Echo.</h2>' + discovery + '</header>' +
+          '<header class="mvpPricingIntro"><h2 id="setupPlanHeading">Choose your Echo.</h2></header>' +
           '<div class="mvpPlanTabs" role="tablist" aria-label="Choose an Echo plan">' + tabs + '</div>' +
           '<article class="mvpPlanHabitat" id="activePlanHabitat" role="tabpanel" aria-labelledby="planTab-' + plan.id + '" data-plan="' + plan.id + '">' +
             '<div class="mvpHabitatScene">' +
@@ -977,9 +1101,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
             '<div class="mvpHabitatDetails">' +
               '<div class="mvpPlanIdentity"><span>' + esc(plan.name) + '</span>' + (plan.popular ? "<b>Echo&rsquo;s pick</b>" : "") + '</div>' +
               '<h3>' + esc(plan.homeName) + ' Echo</h3>' +
-              '<p class="mvpPlanPromise">' + esc(plan.promise) + '</p>' +
               '<div class="mvpPlanPrice"><strong>' + esc(plan.price) + '</strong><span>' + esc(plan.cadence) + '</span></div>' +
-              '<p class="mvpPacksLabel">Echo packs</p>' +
               '<ul class="mvpPlanFacts">' + facts + '</ul>' +
               '<button type="button" class="primary mvpPlanCta" id="' + chooseId + '">' + esc(chooseLabel) + ' <span aria-hidden="true">→</span></button>' +
             '</div>' +
@@ -1024,6 +1146,7 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           slot.innerHTML = "";
           slot.classList.add("is-hidden");
           if (readySettings) readySettings.classList.remove("is-plan-open", "is-checkout-pending");
+          renderBillingCommitment("");
           return;
         }
         slot.classList.remove("is-hidden");
@@ -1042,12 +1165,19 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           var planLabel = plan.charAt(0).toUpperCase() + plan.slice(1);
           var checkoutJustConfirmed = !!billingActivationPendingPlan;
           billingActivationPendingPlan = "";
+          rememberCheckoutSessionId("");
+          billingSyncAttempts = 0;
           var paidHistory = billingStatus && billingStatus.historicalConversationQuota;
           var paidUsage = paidHistory && typeof paidHistory.used === "number" && typeof paidHistory.limit === "number"
-            ? paidHistory.used + " / " + paidHistory.limit + " bulk history imports used."
-            : "Your bulk history import and weekly new-chat allowance are ready.";
+            ? paidHistory.used + " / " + paidHistory.limit + " coding sessions imported."
+            : "Your coding-session import and weekly memory allowance are ready.";
+          var lifecycleText = paidPlanLifecycleText(plan);
+          var paidDetail = lifecycleText
+            ? lifecycleText + (checkoutJustConfirmed ? "" : " " + paidUsage)
+            : (checkoutJustConfirmed ? "Continue below." : paidUsage);
           if (checkoutJustConfirmed) document.title = "Echo plan active — continue setup";
-          slot.innerHTML = '<div class="setupPlanConfirmed' + (checkoutJustConfirmed ? ' is-checkout-confirmed' : '') + '"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>' + (checkoutJustConfirmed ? 'Your Echo is ready. ' : '') + esc(planLabel) + ' Echo</strong><span>' + esc(checkoutJustConfirmed ? "Continue below." : paidUsage) + '</span></span><button type="button" class="textButton" id="changeActivePlan">Change</button></div>';
+          slot.innerHTML = '<div class="setupPlanConfirmed' + (checkoutJustConfirmed ? ' is-checkout-confirmed' : '') + (lifecycleText ? ' has-lifecycle' : '') + '"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>' + (checkoutJustConfirmed ? 'Your Echo is ready. ' : '') + esc(planLabel) + ' Echo</strong><span>' + esc(paidDetail) + '</span></span><button type="button" class="textButton" id="changeActivePlan">Change</button></div>';
+          renderBillingCommitment(plan);
           var changeActivePlan = document.getElementById("changeActivePlan");
           if (changeActivePlan) changeActivePlan.onclick = openHostedPlanOptions;
           renderSessionSelection(true);
@@ -1056,7 +1186,8 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         }
         if (setupPlanChoice === "free") {
           if (readySettings) readySettings.classList.remove("is-plan-open", "is-checkout-pending");
-          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>Original Echo</strong><span>100 bulk history imports, 25K new-chat tokens each week, and 100 memory searches each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
+          slot.innerHTML = '<div class="setupPlanConfirmed"><span class="setupPlanConfirmedIcon" aria-hidden="true">' + setupIcon("check") + '</span><span class="setupPlanConfirmedCopy"><strong>Original Echo</strong><span>100 coding sessions and 100 memory recalls each week.</span></span><button type="button" class="textButton" id="changeSetupPlan">Change</button></div>';
+          renderBillingCommitment("");
           var changeBtn = document.getElementById("changeSetupPlan");
           if (changeBtn) changeBtn.onclick = function () {
             rememberSetupPlanChoice("");
@@ -1069,17 +1200,36 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           ? "power"
           : (setupPlanChoice === "pro" || billingActivationPendingPlan === "pro" ? "pro" : "");
         if (pendingPaidPlan) {
+          renderBillingCommitment("");
           if (readySettings) {
             readySettings.classList.remove("is-plan-open");
             readySettings.classList.add("is-checkout-pending");
           }
           var selectedPaidPlan = pendingPaidPlan === "power" ? "Power" : "Pro";
+          var pendingHasTrial = !billingStatus || billingStatus.trialAvailable !== false;
+          var pendingPrice = pendingPaidPlan === "power" ? "$100" : "$20";
+          var pendingLimit = pendingPaidPlan === "power" ? "2,000" : "500";
+          var pendingStatus = billingCheckMessage || (billingLastCheckedAt
+            ? "Checking automatically every few seconds · Last checked just now"
+            : "Checking automatically every few seconds");
           slot.innerHTML =
             '<section class="setupPlanChoice setupPlanCheckout" aria-labelledby="setupPlanHeading">' +
-              '<div class="setupPlanIntro"><h3 id="setupPlanHeading">Start your 14-day trial.</h3><p>Finish in the secure Stripe tab, then return here. Echo will update automatically.</p></div>' +
-              '<button type="button" class="primary" id="continueSelectedPaidPlan">Reopen secure checkout</button>' +
-              '<div class="setupPlanFoot"><button type="button" class="textButton" id="changeSelectedPaidPlan">Choose another Echo</button><span id="setupPlanStatus" role="status"></span></div>' +
+              '<div class="setupPlanIntro"><h3 id="setupPlanHeading">' + esc(pendingHasTrial ? selectedPaidPlan + " trial — $0 today" : selectedPaidPlan + " subscription") + '</h3><p>Finish in Stripe. This page updates automatically.</p></div>' +
+              '<dl class="checkoutCommitment">' +
+                '<div><dt>Today</dt><dd>' + esc(pendingHasTrial ? "$0" : pendingPrice) + '</dd></div>' +
+                '<div><dt>History import</dt><dd>' + esc(pendingLimit) + ' sessions</dd></div>' +
+                '<div><dt>' + esc(pendingHasTrial ? "First charge" : "Billing") + '</dt><dd>' + esc(pendingHasTrial ? pendingPrice + " on " + trialChargeDateText() : pendingPrice + "/month now") + '</dd></div>' +
+              '</dl>' +
+              '<div class="checkoutActions"><button type="button" class="primary" id="continueSelectedPaidPlan">Reopen Stripe checkout</button><button type="button" class="secondary" id="checkPaymentStatus">Check payment status</button></div>' +
+              '<p class="checkoutPollStatus" id="setupPlanStatus" role="status" aria-live="polite">' + esc(pendingStatus) + '</p>' +
+              '<div class="setupPlanFoot"><button type="button" class="textButton" id="changeSelectedPaidPlan">Choose another plan</button></div>' +
             '</section>';
+          var checkPaid = document.getElementById("checkPaymentStatus");
+          if (checkPaid) checkPaid.onclick = function () {
+            billingCheckMessage = "Checking payment status…";
+            renderSetupPlan(true);
+            void refreshBillingStatus();
+          };
           var continuePaid = document.getElementById("continueSelectedPaidPlan");
           if (continuePaid) continuePaid.onclick = function () { openPaidPricing(pendingPaidPlan); };
           var changePaid = document.getElementById("changeSelectedPaidPlan");
@@ -1099,19 +1249,43 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           readySettings.classList.add("is-plan-open");
         }
         slot.innerHTML = renderPlanHabitat();
+        renderBillingCommitment("");
         bindPlanHabitat();
         if (migrateBtn) migrateBtn.disabled = true;
       }
+      async function maybeSyncPendingCheckout() {
+        if (!pendingCheckoutSessionId || billingSyncAttempts >= 12) return;
+        var now = Date.now();
+        if (billingSyncLastAttemptAt && now - billingSyncLastAttemptAt < 5000) return;
+        billingSyncLastAttemptAt = now;
+        billingSyncAttempts++;
+        try {
+          var result = await postJson(
+            "/billing-checkout-sync",
+            { sessionId: pendingCheckoutSessionId },
+            18000
+          );
+          if (result && result.ok === true) rememberCheckoutSessionId("");
+        } catch (_) {
+          // A 409 is expected while the hosted Checkout session is still open.
+          // Webhooks remain primary; this bounded fallback repairs delayed delivery.
+        }
+      }
       async function refreshBillingStatus() {
         if (billingStatusLoading) return;
         billingStatusLoading = true;
         try {
+          await maybeSyncPendingCheckout();
           billingStatus = await getJson("/billing-status");
+          billingLastCheckedAt = Date.now();
+          billingCheckMessage = "";
           renderSetupPlan(true);
           renderAccountChoice();
           renderSessionSelection(true);
           if (billingStatus && billingStatus.plan === "unknown") setSetupPlanStatus("Plan check unavailable. Original still works.");
         } catch (_) {
+          billingLastCheckedAt = Date.now();
+          billingCheckMessage = "Could not check payment yet. Echo will keep trying automatically.";
           setSetupPlanStatus("Plan check unavailable. Original still works.");
         } finally {
           billingStatusLoading = false;
@@ -1147,23 +1321,28 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           opened.location.href = response.url;
           setSetupPlanStatus(openedMessage);
           startBillingPoll();
-          return true;
+          return response;
         } catch (error) {
           try { if (opened && !opened.closed) opened.close(); } catch (_) {}
           setSetupPlanStatus(error && error.message ? error.message : "Could not open secure Echo billing.");
-          return false;
+          return null;
         }
       }
       async function openPaidPricing(plan) {
         setSetupPlanStatus("Opening secure checkout…");
-        var opened = await openHostedBilling(
+        var checkout = await openHostedBilling(
           "/billing-checkout",
           { plan: plan, trial: !billingStatus || billingStatus.trialAvailable !== false },
           "Creating your secure checkout…",
           "Checkout opened in a secure tab. Keep this local page open; Echo will confirm here automatically."
         );
-        if (opened) {
+        if (checkout) {
           billingActivationPendingPlan = plan;
+          if (typeof checkout.sessionId === "string") {
+            rememberCheckoutSessionId(checkout.sessionId);
+            billingSyncAttempts = 0;
+            billingSyncLastAttemptAt = 0;
+          }
           document.title = "Finish checkout — Echo setup is waiting";
           renderSetupPlan(true);
         }
@@ -1178,25 +1357,17 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
       }
       function tryItCard() {
         var questions = recallQuestions();
-        var prompts = questions.map(function (question, index) {
-          var numberLabel = String(index + 1).padStart(2, "0");
-          return '<article class="recallPrompt" data-recall-prompt="' + esc(question) + '">' +
-            '<div class="recallPromptHead">' +
-              '<span>Suggested prompt ' + numberLabel + '</span>' +
-              '<button type="button" class="recallCopy" data-recall-copy aria-label="Copy suggested prompt ' + (index + 1) + '">' + setupIcon("copy") + '<span>Copy</span></button>' +
-            '</div>' +
-            '<p class="recallPromptText">' + esc(question) + '</p>' +
-            '<div class="recallPromptActions" aria-label="Use suggested prompt ' + (index + 1) + '">' +
-              '<button type="button" class="recallAgent" data-recall-codex><span class="recallAgentIcon"><img src="/hud-assets/codex.svg" alt="" /></span><span>Ask in Codex</span></button>' +
-              '<button type="button" class="recallAgent is-claude" data-recall-claude><span class="recallAgentIcon"><img src="/hud-assets/claude.svg" alt="" /></span><span>Ask in Claude</span></button>' +
-            '</div>' +
-          '</article>';
-        }).join("");
+        var primary = questions[0];
         return '<div class="tryCard">' +
-          '<p class="tryK">First recall</p>' +
-          '<h3 class="tryTitle">Try your new memory</h3>' +
-          '<p class="tryLead">These prompts are ready to use. Copy one, or ask it directly in your coding agent.</p>' +
-          '<div class="recallPromptList">' + prompts + '</div>' +
+          '<h3 class="tryTitle">Let Echo prove it remembers</h3>' +
+          '<article class="recallPrompt recallPromptPrimary" data-recall-prompt="' + esc(primary) + '">' +
+            '<div class="recallPromptHead"><span>Your question</span><button type="button" class="recallCopy" data-recall-copy aria-label="Copy your first recall question">' + setupIcon("copy") + '<span>Copy</span></button></div>' +
+            '<p class="recallPromptText">' + esc(primary) + '</p>' +
+            '<div class="recallPromptActions" aria-label="Try your first memory recall">' +
+              '<button type="button" class="recallAgent recallAgentPrimary" data-recall-codex><span class="recallAgentIcon"><img src="/hud-assets/codex.svg" alt="" /></span><span>Ask in Codex</span></button>' +
+              '<button type="button" class="recallAgent is-claude" data-recall-claude><span class="recallAgentIcon"><img src="/hud-assets/claude.svg" alt="" /></span><span>Use Claude instead</span></button>' +
+            '</div>' +
+          '</article>' +
           '<p class="launchStatus" id="launchStatus"></p>' +
           '</div>';
       }
@@ -1211,12 +1382,6 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
           if (claudeBtn) claudeBtn.addEventListener("click", function () { void openClaudeDesktop(prompt); });
         });
       }
-      function hudTip() {
-        return '<p class="hudTip"><img src="/hud-assets/echo-face-cutout.png" alt="" /><span><strong>Live HUD:</strong> Echo watches context quality while you work. When it drops, <strong>Start new session with context</strong> opens a fresh Codex or Claude Code session and carries the useful work forward. Open it with <code>echomem-hud app</code>.</span></p>';
-      }
-      function doneCloseNote() {
-        return '<p class="doneCloseNote">You can safely close this page. EchoMem is set up, and your memories are saved.</p>';
-      }
       function renderEnding() {
         setCityMode(false);
         setExtractMode(true);
@@ -1226,27 +1391,30 @@ export const SETUP_PAGE_CLIENT_EXTRACTION = String.raw `      /* ---------- dash
         setHead("Ending extraction", "Ending");
         app.className = "";
         app.innerHTML =
-          '<div class="miniLoad">' +
-            '<p class="utilityEyebrow">Memory extraction / closing</p>' +
-            '<h2 class="siteHeadline">Stopping the <strong>remaining work</strong></h2>' +
-            '<p>Echo is canceling every queued conversation and releasing its unused reservations. Anything already saved stays saved.</p>' +
-            '<div class="miniBar"><i></i></div>' +
-          '</div>';
+          setupJourney(4) +
+          '<section class="lifecycleState lifecyclePending">' +
+            '<h2>Stopping the remaining queued work…</h2>' +
+            '<p>Saved memories stay intact.</p>' +
+            '<div class="miniBar" aria-label="Ending extraction"><i></i></div>' +
+          '</section>';
       }
       function renderSkipped() {
         setCityMode(false);
         setExtractMode(true);
         setHead("Extraction ended for now", "Ended");
         app.className = "";
+        var savedCount = Math.max(0, Number(lastExtractionProgress && lastExtractionProgress.extracted || 0));
         app.innerHTML =
-          '<div class="skipStage">' +
-            '<div class="pauseStatus" role="status"><span aria-hidden="true">' + setupIcon("pause") + '</span><small>Extraction ended for now</small></div>' +
-            '<h2 class="siteHeadline">You can come back <strong>anytime.</strong></h2>' +
-            '<p>All remaining queued work was canceled and its unused reservations were released. When you are ready, run <code>echomem-mcp init</code> again — it rebuilds the remaining list from your local sessions.</p>' +
-            tryItCard() +
-            hudTip() +
-          '</div>';
-        wireTryButtons();
+          setupJourney(savedCount > 0 ? 5 : 4) +
+          '<section class="lifecycleState lifecyclePaused">' +
+            '<header class="lifecycleIntro">' +
+              '<h2>' + (savedCount > 0 ? esc(number(savedCount)) + ' memories are ready to use.' : 'Import ended safely.') + '</h2>' +
+              '<p>The remaining queue was canceled. Saved memories were not removed.</p>' +
+            '</header>' +
+            (savedCount > 0 ? tryItCard() : '') +
+            '<p class="lifecycleResume">Continue later with <code>echomem-mcp init</code>.</p>' +
+          '</section>';
+        if (savedCount > 0) wireTryButtons();
       }
       async function endExtraction() {
         if (extractionEnded) return;