@echomem/mcp 1.4.7 → 1.4.8

package/dist/setup-page.js

@@ -125,12 +125,41 @@ export function renderSetupPage() {
     body.cityMode header {
       display: none;
     }
+    body.extractMode header {
+      display: none;
+    }
+    body.readyMode header {
+      display: none;
+    }
+    body.extractMode main {
+      min-height: 100vh;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+    }
+    body.readyMode main {
+      min-height: 100vh;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      padding: clamp(24px, 5vw, 56px);
+    }
     body.cityMode #app {
       display: block;
       min-height: 100vh;
       color: var(--echo-ink-text);
       text-align: left;
     }
+    body.extractMode #app {
+      width: 100%;
+      display: grid;
+      justify-items: center;
+    }
+    body.readyMode #app {
+      width: 100%;
+      display: grid;
+      justify-items: center;
+    }
 
     /* clean, consistent loader for the post-connect "working/starting" states */
     .miniLoad { display: grid; gap: 12px; max-width: 520px; padding: clamp(24px, 6vw, 64px) 0; }
@@ -689,21 +718,651 @@ export function renderSetupPage() {
     }
     /* extraction dashboard — plate layout */
     .exHero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 8px; }
-    .exCopy h2 { max-width: 560px; margin: 8px 0 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.03; }
-    .exCopy .exSub { margin: 14px 0 0; max-width: 520px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--echo-ink-mute); }
+    /* Centered composition: mascot on top, then everything stacked and centered on one axis. */
+    .readyDecision {
+      width: 100%;
+      max-width: min(720px, calc(100vw - clamp(32px, 8vw, 120px)));
+      display: grid;
+      justify-items: center;
+      text-align: center;
+      gap: 20px;
+      margin: 0 auto;
+    }
+    .readyHero {
+      display: grid;
+      justify-items: center;
+      gap: 16px;
+      margin: 0 auto;
+    }
+    .readyMascot {
+      width: 84px;
+      height: 84px;
+      object-fit: contain;
+      filter: drop-shadow(0 12px 18px rgba(26,58,143,0.18));
+    }
+    .readyHero .exCopy h2 {
+      margin: 0;
+      font-size: clamp(32px, 4.6vw, 60px);
+      line-height: 0.98;
+    }
+    .readyHero .exCopy .exSub {
+      max-width: 560px;
+      margin: 12px auto 0;
+      font-size: clamp(16px, 1.45vw, 18px);
+    }
+    .readyAction {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
+      gap: clamp(18px, 3vw, 34px);
+      align-items: end;
+      margin-top: 2px;
+      padding: 22px 0 24px;
+      border-top: 1px solid var(--echo-line-soft);
+      border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .readyRun {
+      display: grid;
+      grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
+      gap: clamp(18px, 3vw, 34px);
+      align-items: start;
+    }
+    .exHeroReady {
+      width: 100%;
+      max-width: min(860px, calc(100vw - clamp(36px, 9vw, 140px)));
+      grid-template-columns: minmax(0, 1fr);
+      justify-content: center;
+      justify-items: stretch;
+      margin: clamp(8px, 2vh, 24px) auto 0;
+    }
+    .exHeroReady .exCopy { width: 100%; }
+    .exHeroResult {
+      width: 100%;
+      max-width: min(920px, calc(100vw - clamp(36px, 8vw, 120px)));
+      grid-template-columns: minmax(0, 760px);
+      justify-content: center;
+      justify-items: stretch;
+      margin: 0 auto;
+    }
+    .exHeroResult .exPlate { display: none; }
+    .exHeroResult .exCopy { width: 100%; margin: 0 auto; }
+    .exCopy h2 { max-width: 620px; margin: 8px 0 0; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.01; }
+    .exCopy .exSub { margin: 14px 0 0; max-width: 590px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: var(--echo-ink-mute); }
     .exLegend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute); }
     .exLegend .lgDot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 10px; }
     .exLegend .lgDot:first-child { margin-left: 0; }
     .lgNew { background: #2f6df0; }
     .lgDim { background: #cfc8b8; }
     .exHero .actions { margin-top: 22px; }
-    .exHint { margin: 14px 0 0; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-faint); }
+    .readyDecision .actions {
+      justify-content: center;
+      margin-top: 0;
+    }
+    .readyDecision .actions .primary {
+      min-width: 240px;
+      min-height: 60px;
+      padding: 0 30px;
+      font-size: 16px;
+      box-shadow: 0 16px 28px -20px rgba(26,58,143,0.55);
+    }
+    /* Proof strip: one quiet line of evidence (source split), not stat cards. Centered. */
+    .proofStrip {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: 8px 12px;
+      min-height: 26px;
+      margin-top: 2px;
+      font-family: var(--echo-font-mono);
+      font-size: 13px;
+      color: var(--echo-ink-mute);
+    }
+    .proofStrip .pf { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+    .proofStrip .pf strong { color: var(--echo-ink-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
+    .proofStrip .pfIcon { position: relative; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--echo-ink-primary); display: grid; place-items: center; flex: 0 0 auto; }
+    .proofStrip .pfIcon img { width: 22px; height: 22px; object-fit: cover; display: block; }
+    .proofStrip .pfFallback { display: none; place-items: center; width: 22px; height: 22px; color: #fff; font-size: 8px; font-weight: 900; }
+    .proofStrip .pfDot { color: var(--echo-ink-faint); }
+    .proofStrip .pfNote { color: var(--echo-ink-faint); font-size: 12px; }
+    /* The action block: button first, reassurances attached right under it. Centered. */
+    .readyGo { display: grid; gap: 11px; margin-top: 6px; justify-items: center; }
+    .ctaMeta { margin: 0; max-width: 480px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 9px; font-family: var(--echo-font-mono); font-size: 12px; line-height: 1.5; color: var(--echo-ink-mute); }
+    .ctaMeta .cm { white-space: nowrap; }
+    .ctaMeta .cmDot { color: var(--echo-ink-faint); }
+    .exHint { margin: 0; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-faint); }
+    .readyFoot {
+      display: grid;
+      justify-items: center;
+      gap: 14px;
+      margin-top: clamp(24px, 5vh, 52px);
+      opacity: 0.82;
+    }
+    .readyTime {
+      width: 100%;
+      display: grid;
+      gap: 7px;
+      align-content: start;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .readyTime span {
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .readyTime strong {
+      font-family: var(--echo-font-brand);
+      font-size: clamp(36px, 4vw, 54px);
+      font-weight: 900;
+      line-height: 0.92;
+      color: var(--echo-ink-primary);
+    }
+    .readyTime em {
+      max-width: 390px;
+      font-style: normal;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .sourceGrid {
+      display: grid;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .sourceHeading {
+      margin: 0;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .sourceCard {
+      display: grid;
+      grid-template-columns: 30px minmax(0, 1fr);
+      align-items: center;
+      gap: 10px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: var(--echo-paper-soft);
+      padding: 8px 11px 8px 8px;
+    }
+    .sourceIcon {
+      width: 30px;
+      height: 30px;
+      border-radius: 7px;
+      overflow: hidden;
+      background: var(--echo-ink-primary);
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+    }
+    .sourceIcon img { width: 30px; height: 30px; object-fit: cover; display: block; }
+    .sourceFallback {
+      display: none;
+      color: #fff;
+      font-family: var(--echo-font-mono);
+      font-size: 9px;
+      font-weight: 900;
+    }
+    .sourceCard > div {
+      min-width: 0;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: baseline;
+      gap: 2px 7px;
+    }
+    .sourceCard strong {
+      font-family: var(--echo-font-brand);
+      font-size: 24px;
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .sourceCard span {
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.04em;
+      color: var(--echo-ink-mute);
+    }
+    .sourceCard small {
+      display: block;
+      grid-column: 1 / -1;
+      color: var(--echo-ink-faint);
+      font-size: 12px;
+      line-height: 1.35;
+    }
+    .readyExplain {
+      max-width: 760px;
+      border-top: 1px solid var(--echo-line-soft);
+      padding-top: 12px;
+      color: var(--echo-ink-mute);
+    }
+    .readyExplain summary {
+      cursor: pointer;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-primary);
+    }
+    .readyExplain summary::marker { color: var(--echo-ink-faint); }
+    .readyExplain p {
+      margin: 7px 0 0;
+      max-width: 640px;
+      color: var(--echo-ink-mute);
+      font-size: 14px;
+      line-height: 1.55;
+    }
+    .readySteps {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px;
+      margin-top: 11px;
+    }
+    .readyStep {
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 8px;
+      background: transparent;
+      padding: 10px 11px;
+    }
+    .readyStep strong {
+      display: block;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--echo-ink-primary);
+    }
+    .readyStep span {
+      display: block;
+      margin-top: 5px;
+      color: var(--echo-ink-faint);
+      font-size: 12px;
+      line-height: 1.35;
+    }
     .exPlate { width: 100%; }
     /* WebGL clay city (echo-extraction-plate.html) — the only plate; no SVG layer */
     .plateStack { position: relative; width: 100%; aspect-ratio: 640 / 470; }
     .plateStack .plateGl { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
-    .recon { margin-top: 16px; display: inline-block; font-family: var(--echo-font-mono); font-size: 13px; font-weight: 700; color: var(--echo-ink-primary); background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 8px; padding: 8px 12px; }
-    @media (max-width: 820px) { .exHero { grid-template-columns: 1fr; } }
+    .exHeroActive {
+      grid-template-columns: minmax(0, 640px);
+      justify-content: center;
+      justify-items: stretch;
+      width: 100%;
+      max-width: min(920px, calc(100vw - clamp(36px, 8vw, 120px)));
+      margin: 0 auto;
+    }
+    .exHeroActive .exPlate { display: none; }
+    .exHeroActive .exCopy { width: 100%; }
+    .workbench { display: grid; gap: 14px; max-width: 640px; }
+    .workbench h2 {
+      max-width: 520px;
+      font-size: clamp(24px, 3vw, 34px);
+      line-height: 1.04;
+    }
+    .exMeter {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 14px;
+      margin-top: 10px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .exMeter strong {
+      font-family: var(--echo-font-brand);
+      font-size: clamp(38px, 5vw, 66px);
+      font-weight: 900;
+      line-height: 0.9;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .exMeter span {
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .exCurrent {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 10px;
+      align-items: center;
+      margin-top: 2px;
+      padding: 11px 0;
+      border-top: 1px solid var(--echo-line-soft);
+      border-bottom: 1px solid var(--echo-line-soft);
+    }
+    .exCurrent i {
+      width: 9px;
+      height: 9px;
+      border-radius: 999px;
+      background: var(--echo-ink-accent);
+      box-shadow: 0 0 0 4px rgba(78,205,196,0.15);
+    }
+    .exCurrent span {
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-primary);
+    }
+    .exCurrent strong {
+      display: block;
+      margin-top: 3px;
+      color: var(--echo-ink-text);
+      font-size: 14px;
+      line-height: 1.45;
+      font-weight: 700;
+    }
+    .extractFacts {
+      margin: 0;
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      line-height: 1.5;
+      color: var(--echo-ink-mute);
+    }
+    .extractFacts strong {
+      color: var(--echo-ink-primary);
+      font-weight: 900;
+    }
+    .extractEndRow {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-top: 2px;
+    }
+    .extractEndRow button {
+      min-height: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      color: var(--echo-ink-primary);
+      padding: 0;
+      font-family: var(--echo-font-mono);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.04em;
+      text-transform: none;
+    }
+    .extractEndRow button:hover {
+      text-decoration: underline;
+    }
+    .extractEndRow span {
+      color: var(--echo-ink-faint);
+      font-size: 12px;
+      line-height: 1.45;
+    }
+    .skipStage {
+      display: grid;
+      gap: 14px;
+      max-width: 680px;
+      margin: 0 auto;
+      text-align: center;
+      justify-items: center;
+    }
+    .skipStage h2 {
+      max-width: 620px;
+      font-size: clamp(38px, 5vw, 64px);
+      line-height: 0.98;
+    }
+    .skipStage p {
+      max-width: 560px;
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 16px;
+      line-height: 1.6;
+    }
+    .skipStage .seal {
+      width: fit-content;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 999px;
+      background: var(--echo-paper-white);
+      padding: 8px 13px;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-primary);
+    }
+    .resultStage { display: grid; gap: 18px; max-width: 760px; padding: 8px 0 2px; }
+    .resultStage .kicker-mono { color: var(--echo-ink-seal); }
+    .resultTop {
+      display: grid;
+      gap: 12px;
+      align-items: start;
+    }
+    .resultTop h2 { margin-top: 6px; font-size: clamp(36px, 5vw, 58px); line-height: 0.98; }
+    .resultNumber {
+      width: fit-content;
+      display: inline-flex;
+      align-items: baseline;
+      gap: 8px;
+      border: 1px solid var(--echo-line-soft);
+      border-radius: 999px;
+      background: var(--echo-paper-white);
+      padding: 7px 12px;
+    }
+    .resultNumber strong {
+      font-family: var(--echo-font-brand);
+      font-size: 18px;
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .resultNumber span {
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+      text-align: right;
+    }
+    .memoryReceipt {
+      display: grid;
+      gap: 10px;
+      max-width: 700px;
+      padding-top: 2px;
+    }
+    .memoryReceipt .receiptK {
+      margin: 0;
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .finishStats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 18px;
+    }
+    .finishStat {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 6px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+    }
+    .finishStat strong {
+      font-family: var(--echo-font-brand);
+      font-size: 17px;
+      font-weight: 900;
+      line-height: 1;
+      color: var(--echo-ink-primary);
+      font-variant-numeric: tabular-nums;
+    }
+    .finishStat span {
+      font-family: var(--echo-font-mono);
+      font-size: 10px;
+      font-weight: 800;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--echo-ink-mute);
+    }
+    .retryNote {
+      margin: 0;
+      max-width: 640px;
+      font-size: 12px;
+      line-height: 1.5;
+      color: var(--echo-ink-faint);
+    }
+    .recon { margin-top: 0; display: inline-block; font-family: var(--echo-font-mono); font-size: 13px; font-weight: 700; color: var(--echo-ink-primary); background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 8px; padding: 8px 12px; }
+    .exCountdown { margin: 0; font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute); }
+    .exCountdown strong { color: var(--echo-ink-primary); font-weight: 700; }
+    .exOverdue { margin: 0; max-width: 620px; border: 1px solid rgba(196, 148, 42, 0.45); background: rgba(233, 185, 73, 0.12); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--echo-ink-text); }
+    .exOverdue strong { display: block; margin-bottom: 4px; color: var(--echo-ink-primary); }
+    .tryCard { margin-top: 2px; max-width: 760px; border: 2px solid var(--echo-ink-primary); border-radius: 8px; background: var(--echo-paper-white); padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 38px -28px rgba(26,58,143,0.45); }
+    .tryCard .tryK { margin: 0 0 10px; font-family: var(--echo-font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-primary); }
+    .tryCard .tryTitle {
+      margin: 0 0 12px;
+      font-family: var(--echo-font-brand);
+      font-size: clamp(18px, 1.9vw, 23px);
+      line-height: 1.15;
+      font-weight: 900;
+      color: var(--echo-ink-primary);
+    }
+    .tryCard pre { margin: 0; max-height: 72px; overflow: hidden; white-space: pre-wrap; word-break: break-word; font-family: var(--echo-font-mono); font-size: 12px; line-height: 1.5; color: var(--echo-ink-mute); background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 8px; padding: 11px 13px; -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent); mask-image: linear-gradient(to bottom, #000 52%, transparent); }
+    .agentLaunch {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 18px;
+    }
+    .agentLaunch button {
+      min-height: 72px;
+      justify-content: flex-start;
+      border-color: var(--echo-line-soft);
+      background: var(--echo-paper-white);
+      color: var(--echo-ink-primary);
+      padding: 10px 14px;
+      text-align: left;
+    }
+    .agentLaunch button:hover { border-color: var(--echo-ink-primary); }
+    .agentIcon {
+      width: 46px;
+      height: 46px;
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+      border-radius: 11px;
+      background: var(--echo-ink-primary);
+      color: #fff;
+      font-family: var(--echo-font-mono);
+      font-size: 11px;
+      font-weight: 900;
+      letter-spacing: 0;
+      overflow: hidden;
+      box-shadow: 0 8px 16px -10px rgba(20,20,20,0.45);
+    }
+    .agentIcon img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .agentIcon .agentFallback {
+      width: 100%;
+      height: 100%;
+      display: none;
+      place-items: center;
+    }
+    .copyGlyph {
+      position: relative;
+      width: 21px;
+      height: 25px;
+      display: block;
+    }
+    .copyGlyph::before,
+    .copyGlyph::after {
+      content: "";
+      position: absolute;
+      width: 15px;
+      height: 18px;
+      border: 2px solid #fff;
+      border-radius: 4px;
+      background: var(--echo-ink-primary);
+    }
+    .copyGlyph::before { left: 0; top: 0; opacity: 0.72; }
+    .copyGlyph::after { right: 0; bottom: 0; }
+    .agentText {
+      display: block;
+      min-width: 0;
+    }
+    .agentLaunch strong {
+      display: block;
+      font-family: var(--echo-font-brand);
+      font-size: 17px;
+      font-weight: 900;
+      line-height: 1.1;
+    }
+    .agentText small {
+      display: block;
+      margin-top: 2px;
+      color: var(--echo-ink-mute);
+      font-size: 11px;
+      line-height: 1.3;
+      font-weight: 600;
+    }
+    .launchStatus { margin: 9px 0 0; min-height: 18px; font-size: 12px; color: var(--echo-ink-mute); }
+    .hudTip { margin: 14px 0 0; max-width: 700px; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; font-size: 13px; line-height: 1.55; color: var(--echo-ink-mute); }
+    .hudTip img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(26,58,143,0.18)); }
+    .hudTip strong { color: var(--echo-ink-primary); }
+    .hudTip code { font-family: var(--echo-font-mono); font-size: 12px; background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 5px; padding: 1px 5px; }
+    .doneCloseNote { margin: clamp(30px, 5vh, 58px) 0 0; max-width: 700px; font-family: var(--echo-font-mono); font-size: 11px; line-height: 1.5; color: var(--echo-ink-faint); }
+
+    /* ===== Calm redesign: one focal point per state, progressive disclosure ===== */
+    .calm { max-width: 640px; }
+    /* Ready: a single compact meta strip replaces the giant ETA box + source cards. */
+    .readyMeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0 2px; font-family: var(--echo-font-mono); font-size: 12.5px; color: var(--echo-ink-mute); }
+    .readyMeta .rm { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--echo-line-soft); border-radius: 999px; background: var(--echo-paper-soft); white-space: nowrap; }
+    .readyMeta .rm strong { color: var(--echo-ink-primary); font-weight: 800; }
+    .readyMeta .rm img { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; }
+    .readyMeta .rm .sf { display: none; width: 15px; height: 15px; border-radius: 4px; background: var(--echo-ink-primary); color: #fff; font-size: 8px; font-weight: 800; align-items: center; justify-content: center; }
+    /* Done: the number is the hero; a small ceremonial tick, one supporting line, no duplicate receipt. */
+    .doneMark { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-family: var(--echo-font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--echo-ink-accent-deep); }
+    .doneMark .tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--echo-ink-accent-deep); color: #fff; font-size: 13px; animation: donePop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
+    @keyframes donePop { from { transform: scale(0); } to { transform: scale(1); } }
+    .doneNum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; }
+    .doneNum strong { font-family: var(--echo-font-brand); font-size: clamp(52px, 9vw, 96px); line-height: 0.9; color: var(--echo-ink-primary); letter-spacing: -0.01em; }
+    .doneNum span { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; color: var(--echo-ink-mute); }
+    .doneSub { margin: 16px 0 0; max-width: 560px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; color: var(--echo-ink-text); }
+    /* Collapse the long warm-up prompt behind a disclosure so the buttons lead. */
+    .promptPeek { margin: 14px 0 0; }
+    .promptPeek summary { cursor: pointer; font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute); list-style: none; }
+    .promptPeek summary::-webkit-details-marker { display: none; }
+    .promptPeek summary::before { content: "▸ "; color: var(--echo-ink-faint); }
+    .promptPeek[open] summary::before { content: "▾ "; }
+    .promptPeek pre { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; font-family: var(--echo-font-mono); font-size: 12px; line-height: 1.6; color: var(--echo-ink-mute); background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); border-radius: 8px; padding: 12px 14px; }
+
+    @media (max-width: 820px) {
+      .exHero, .resultTop, .finishStats, .agentLaunch, .sourceGrid, .readySteps, .readyRun, .readyAction { grid-template-columns: 1fr; }
+      .readyHero { grid-template-columns: 1fr; }
+      .readyMascot { width: 76px; height: 76px; }
+      .readyDecision .actions { justify-content: stretch; }
+      .readyDecision .actions .primary { width: 100%; }
+      .resultNumber span { text-align: left; }
+    }
 
     /* ===== workspace readout dashboard (Part 2 — replaces explainPage) ===== */
     @keyframes rdoRise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@@ -856,9 +1515,13 @@ export function renderSetupPage() {
       var decisionMade = false;
       var connected = false;
       var extractMounted = false;   // WebGL extraction-plate iframe mounted once; persists across /progress polls
+      var exStartAt = 0;            // extraction start (ms) — drives the countdown
+      var exDeadline = 0;           // first honest ETA deadline; passing it while running → "taking longer" banner
+      var extractionEnded = false;  // user chose to leave the extraction flow before natural completion
       var dashMounted = false;      // dashboard shell (incl. plate iframe) mounted once; persists across /stats polls
       var reportMounted = false;    // report shell (city iframe) mounted once; loading is an overlay on it, not a separate page
       var authUrl = "";
+      var workspacePath = "";
       var authWindow = null;
       var connectionPollStarted = false;
       var statsPollStarted = false;
@@ -876,6 +1539,15 @@ export function renderSetupPage() {
       }
       function setCityMode(enabled) {
         document.body.classList.toggle("cityMode", !!enabled);
+        if (enabled) document.body.classList.remove("extractMode", "readyMode");
+      }
+      function setExtractMode(enabled) {
+        document.body.classList.toggle("extractMode", !!enabled);
+        if (enabled) document.body.classList.remove("readyMode");
+      }
+      function setReadyMode(enabled) {
+        document.body.classList.toggle("readyMode", !!enabled);
+        if (enabled) document.body.classList.remove("cityMode", "extractMode");
       }
       function number(value) {
         return typeof value === "number" && isFinite(value) ? Math.round(value).toLocaleString() : "-";
@@ -926,8 +1598,10 @@ export function renderSetupPage() {
           body: JSON.stringify(Object.assign({ nonce: nonce }, body || {}))
         };
         var res = timeoutMs ? await fetchWithTimeout(path, options, timeoutMs) : await fetch(path, options);
-        var data = await res.json().catch(function () { return {}; });
-        if (!res.ok) throw new Error(data.message || data.error || ("HTTP " + res.status));
+        var raw = await res.text();
+        var data = {};
+        try { data = raw ? JSON.parse(raw) : {}; } catch (_) {}
+        if (!res.ok) throw new Error(data.message || data.error || raw || ("HTTP " + res.status));
         return data;
       }
       function metric(label, value, detail) {
@@ -1331,10 +2005,9 @@ export function renderSetupPage() {
       async function waitForStats() {
         if (statsPollStarted) return;
         statsPollStarted = true;
-        setCityMode(false);
-        setHead("Turn history into memory", "Working");
-        app.className = "";
-        app.innerHTML = '<div class="miniLoad"><h2>Preparing your conversations</h2><p>Sizing what is new since your last run.</p><div class="miniBar"><i></i></div></div>';
+        // Use the same one-reading-line stage as the partial scan state. This avoids a jarring
+        // old setup shell between device approval and the ready decision.
+        renderDashboard();
         try {
           var started = Date.now();
           var lastError = "";
@@ -1369,6 +2042,8 @@ export function renderSetupPage() {
       }
       function renderDashboard(error) {
         setCityMode(false);
+        setExtractMode(false);
+        setReadyMode(true);
         var migratable = stats && stats.migratable ? stats.migratable : {};
         var pending = stats && stats.migratable ? stats.migratable.pending : null;
         var hasPendingCount = typeof pending === "number";
@@ -1386,18 +2061,19 @@ export function renderSetupPage() {
         var knownDone = pendingTrusted && pending === 0;
         var canExtract = pendingTrusted && pending > 0;
         var pendN = hasPendingCount ? pending : 0;
-        var alreadyN = Math.max(0, (sessions.total || 0) - pendN);
         var etaLabel = eta.estimatedLabel || migratable.estimatedLabel || "a couple of minutes";
-        setHead("Turn history into memory", localScanReady ? "Ready" : "Scanning");
+        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." : (pendN === 1 ? "1 new conversation to turn into memory." : number(pendN) + " new conversations to turn into memory."));
+          : (knownDone ? "You are all caught up." : "Echo found " + number(pendN) + " new coding session" + (pendN === 1 ? "" : "s") + ".");
         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 — Echo will pick them up later." : "Your history is already in EchoMem. Nothing new to extract.")
-            : "Already-processed conversations are skipped, so re-running stays incremental. About " + etaLabel + ".");
-        var extractLabel = !pendingTrusted ? "Counting…" : (canExtract ? ("Extract " + number(pendN) + " conversation" + (pendN === 1 ? "" : "s")) : "All caught up");
+            ? (skippedActive ? number(skippedActive) + " active conversation" + (skippedActive === 1 ? " is" : "s are") + " still changing, so Echo will pick them up later." : "Your history is already in EchoMem. Nothing new to extract.")
+            : "Turn them into memory your agents can recall: decisions, fixes, and where you left off. No more re-explaining your project every session.");
+        var extractLabel = !pendingTrusted ? "Counting…" : (canExtract ? "Start extraction" : "All caught up");
         // Mount the dashboard shell ONCE so the WebGL plate iframe is never re-created across /stats polls.
         // (Rebuilding app.innerHTML on every partial-scan poll reloaded the iframe → the city flickered.)
         // Later polls only patch the text/counts in place; the iframe stays mounted.
@@ -1405,49 +2081,89 @@ export function renderSetupPage() {
         if (!live) {
           extractMounted = false;
           app.className = "";
+          // One reading line, top to bottom: the find (headline) → the value (sub) → quiet proof
+          // (source strip) → the single action with its reassurances attached → optional detail.
+          // The 19/9 split is EVIDENCE ("Echo scanned MY machine"), not data to study — so it is a
+          // one-line strip, not stat cards; the ETA is a commitment-moment note under the button,
+          // not a display-size headline.
           app.innerHTML =
             '<div id="exBanner"></div>' +
-            '<section class="exHero">' +
-              '<div class="exCopy">' +
-                '<p class="kicker-mono" id="exKicker"></p>' +
-                '<h2 id="exHeadline"></h2>' +
-                '<p class="exSub" id="exSub"></p>' +
-                '<div class="exLegend" id="exLegend"></div>' +
+            '<section class="readyDecision">' +
+              '<div class="readyHero">' +
+                '<img class="readyMascot" src="/hud-assets/echo-face-cutout.png" alt="" />' +
+                '<div class="exCopy">' +
+                  '<h2 id="exHeadline"></h2>' +
+                  '<p class="exSub" id="exSub"></p>' +
+                '</div>' +
+              '</div>' +
+              '<div class="proofStrip" id="exSources"></div>' +
+              '<div class="readyGo">' +
                 '<div class="actions">' +
                   '<button id="migrate" class="primary"></button>' +
-                  '<button id="skip" class="secondary"></button>' +
                 '</div>' +
-                '<p class="exHint">No transcripts leave this machine until you start extraction.</p>' +
+                '<p class="ctaMeta" id="exEta"></p>' +
+              '</div>' +
+              '<div class="readyFoot">' +
+                '<details class="readyExplain" id="readyExplain"></details>' +
               '</div>' +
-              plateBlock() +
             '</section>';
           document.getElementById("migrate").onclick = startMigrate;
-          document.getElementById("skip").onclick = skip;
           dashMounted = true;
         }
         document.getElementById("exBanner").innerHTML =
           (statsSlow && !stats ? '<div class="warning">Local counts are taking longer than expected. You can still ask the bridge to extract anything unprocessed.</div>' : '') +
           (error ? '<div class="error">' + esc(error) + '</div>' : '');
-        document.getElementById("exKicker").textContent = "Local scan · " + number(sessions.total) + " sessions found";
         document.getElementById("exHeadline").textContent = headline;
         document.getElementById("exSub").textContent = sub;
-        document.getElementById("exLegend").innerHTML = pendingTrusted
-          ? '<span class="lgDot lgNew"></span>new (' + esc(number(pendN)) + ')<span class="lgDot lgDim"></span>already in memory (' + esc(number(alreadyN)) + ')'
-          : '<span class="lgDot lgDim"></span>matching your history against saved memory…';
-        // While still counting, hide the primary button entirely (a disabled "Counting…" button looked
-        // half-baked) — the headline + legend already say it is working; only "Not now" stays available.
+        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>';
+        };
+        document.getElementById("exSources").innerHTML = !pendingTrusted
+          ? '<span class="pfNote">Scanning local history&hellip;</span>'
+          : (canExtract
+              ? '<span class="pf">' + srcIcon("codex", "CX") + '<strong>' + esc(number(codexN)) + '</strong> Codex</span>' +
+                '<span class="pfDot">&middot;</span>' +
+                '<span class="pf">' + srcIcon("claude-desktop", "CL") + '<strong>' + esc(number(claudeN)) + '</strong> Claude Code</span>' +
+                '<span class="pfNote">found on this Mac</span>'
+              : "");
+        // Reassurances live at the moment of commitment — right under the button.
+        document.getElementById("exEta").innerHTML = pendingTrusted
+          ? (canExtract
+              ? '<span class="cm">&asymp; ' + esc(etaLabel) + '</span><span class="cmDot">&middot;</span><span class="cm">runs locally</span>' + (alreadyN ? '<span class="cmDot">&middot;</span><span class="cm">' + esc(number(alreadyN)) + ' already-saved skipped</span>' : '')
+              : 'Nothing new to extract right now.')
+          : 'Echo is checking local history against saved memory&hellip;';
+        document.getElementById("readyExplain").innerHTML =
+          '<summary>What exactly happens?</summary>' +
+          '<p>A coding session is a local Codex or Claude Code transcript from this Mac. Echo extracts compact memories from it, not a full chat replay.</p>' +
+          '<div class="readySteps">' +
+            '<div class="readyStep"><strong>Read locally</strong><span>Echo scans session logs on this device.</span></div>' +
+            '<div class="readyStep"><strong>Skip repeats</strong><span>Anything already in memory is ignored.</span></div>' +
+            '<div class="readyStep"><strong>Save memory</strong><span>Decisions, fixes, context, and next steps become searchable.</span></div>' +
+          '</div>';
+        // 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");
-        if (pendingTrusted) { migrateBtn.style.display = ""; migrateBtn.textContent = extractLabel; migrateBtn.disabled = !canExtract; }
-        else { migrateBtn.style.display = "none"; }
-        document.getElementById("skip").textContent = knownDone ? "Finish setup" : "Not now";
+        if (pendingTrusted) {
+          migrateBtn.style.display = "";
+          migrateBtn.disabled = false;
+          migrateBtn.textContent = canExtract ? extractLabel : "Finish setup";
+          migrateBtn.onclick = canExtract ? startMigrate : skip;
+        } else {
+          migrateBtn.style.display = "none";
+        }
       }
       async function startMigrate() {
         if (decisionMade) return;
         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 — keep this terminal open.</p><div class="miniBar"><i></i></div></div>';
+        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", {});
           extractMounted = false;
@@ -1460,14 +2176,18 @@ export function renderSetupPage() {
       }
       async function pollProgress() {
         for (;;) {
+          if (extractionEnded) return;
           var progress = await getJson("/progress");
+          if (extractionEnded) return;
           renderProgress(progress);
           if (progress.status === "completed" || progress.status === "failed") return;
           await sleep(1200);
         }
       }
       function renderProgress(progress) {
+        if (extractionEnded) return;
         setCityMode(false);
+        setExtractMode(true);
         var status = progress.status;
         var done = status === "completed";
         var stopped = status === "failed";
@@ -1487,39 +2207,199 @@ export function renderSetupPage() {
             '</section>';
           extractMounted = true;
         }
+        var shell = app.querySelector(".exHero");
+        if (shell) {
+          shell.classList.toggle("exHeroResult", done || stopped);
+          shell.classList.toggle("exHeroActive", !done && !stopped);
+        }
         var t = document.getElementById("exText");
         if (!t) return;
         if (done || stopped) {
           setHead(done ? "Memory captured" : "Extraction stopped", done ? "Done" : "Needs attention");
+          var memoryNoun = extracted === 1 ? "new memory" : "new memories";
+          var conversationNoun = completed === 1 ? "conversation" : "conversations";
+          var stopDetail = String(progress.error) === "key-expired"
+            ? "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.");
           t.innerHTML =
-            '<p class="kicker-mono">' + (done ? "Extraction complete" : "Extraction stopped") + '</p>' +
-            '<h2>' + (done ? esc(number(extracted)) + ' new ' + (extracted === 1 ? "memory" : "memories") + '.' : "Some conversations did not finish.") + '</h2>' +
-            '<p class="exSub">' + (done
-              ? "From " + esc(number(completed)) + " conversation" + (completed === 1 ? "" : "s") + ". Your next coding session recalls instead of re-reading — and it keeps compounding."
-              : (String(progress.error) === "key-expired"
-                  ? "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."))) + '</p>' +
-            '<div class="recon">&#10003; ' + esc(number(completed)) + ' extracted · ' + esc(number(extracted)) + ' memories · ' + esc(number(failed)) + ' error' + (failed === 1 ? "" : "s") + '</div>';
+            '<div class="resultStage ' + (done ? "ok" : "warn") + '">' +
+              (done ? "" : '<p class="kicker-mono">Extraction stopped</p>') +
+              '<div class="resultTop">' +
+                '<div>' +
+                  '<h2>' + (done ? "Memory is live." : "Some conversations need another pass.") + '</h2>' +
+                  (done ? "" : '<p class="exSub">' + stopDetail + '</p>') +
+                  '<div class="resultNumber"><strong>' + esc(number(extracted)) + '</strong><span>' + esc(memoryNoun) + '</span></div>' +
+                '</div>' +
+              '</div>' +
+              (done ? tryItCard() : "") +
+              '<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>' +
+            '</div>' +
+            (done ? hudTip() + doneCloseNote() : "");
+          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);
           return;
         }
         setHead(preparing ? "Preparing" : "Extracting", preparing ? "Preparing" : "Extracting");
-        var statusLine = progress.latest ? ("Now: " + progress.latest) : (preparing ? "Getting your sessions ready locally…" : "");
+        var checkingEdgeCases = failed > 0 && !preparing;
+        var statusLine = checkingEdgeCases
+          ? "Finishing a few checks without stopping the import."
+          : (progress.latest ? (progress.latest + (progress.latestRepo ? " · " + progress.latestRepo : "")) : (preparing ? "Getting your sessions ready locally…" : "Importing the next batch…"));
+        // Honest countdown: first ETA from batch size (throughput is rate-capped ≈ 26/min), then
+        // refined from the observed rate. Blowing past the FIRST estimate flips on the reassurance banner.
+        var countdownHtml = "";
+        var overdueHtml = "";
+        if (!preparing && total > 0) {
+          var now = Date.now();
+          if (!exStartAt) { exStartAt = now; exDeadline = now + Math.max(60, total * 2.6) * 1000; }
+          var elapsed = (now - exStartAt) / 1000;
+          var remainSec;
+          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>';
+          } else {
+            countdownHtml = '<p class="extractFacts"><strong>' + esc(fmtCountdown(remainSec)) + '</strong> left · saved as it goes · safe to end and resume</p>';
+          }
+        }
         t.innerHTML =
-          '<p class="kicker-mono">' + (preparing ? "Preparing" : "Extraction progress") + '</p>' +
-          '<h2>' + (preparing ? "Sizing your sessions…" : (total ? esc(number(completed)) + ' of ' + esc(number(total)) : "Starting…")) + '</h2>' +
-          '<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' + (failed ? ' · ' + esc(number(failed)) + ' failed' : "") + '.' + (statusLine ? ' ' + esc(statusLine) : "") + '</p>' +
-          (progress.capped ? '<p class="exHint">Importing the newest ' + esc(number(progress.capped)) + ' — re-run later for older sessions.</p>' : '<p class="exHint">Keep this terminal open — nothing leaves your machine beyond what you extract. You can use EchoMem in your editor now.</p>');
+          '<div class="workbench">' +
+            '<h2>' + (preparing ? "Setting up the import." : "Building your memory.") + '</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>' +
+            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>';
+        var endBtn = document.getElementById("endExtraction");
+        if (endBtn) endBtn.onclick = endExtraction;
+      }
+      function fmtCountdown(sec) {
+        sec = Math.max(0, Math.round(sec));
+        var m = Math.floor(sec / 60), s = sec % 60;
+        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 setLaunchStatus(message) {
+        var node = document.getElementById("launchStatus");
+        if (node) node.textContent = message || "";
+      }
+      async function copyRecallPrompt() {
+        var prompt = recallPrompt();
+        try {
+          await navigator.clipboard.writeText(prompt);
+          return true;
+        } catch (_) {
+          return false;
+        }
+      }
+      async function copyPromptOnly() {
+        var copied = await copyRecallPrompt();
+        setLaunchStatus(copied ? "Prompt copied." : "Could not copy automatically. Select the prompt and copy it.");
+      }
+      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.");
+        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.");
+        try {
+          var res = await postJson("/launch-agent", { agent: "claude-desktop" }, 8000);
+          setLaunchStatus(res && res.message ? res.message : "Prompt 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.";
+          setLaunchStatus(msg);
+        }
+      }
+      function tryItCard() {
+        var prompt = recallPrompt();
+        return '<div class="tryCard">' +
+          '<p class="tryK">Try it now</p>' +
+          '<h3 class="tryTitle">Ask your agent to pick up where you left off.</h3>' +
+          '<pre id="tryPrompt">' + esc(prompt) + '</pre>' +
+          '<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>' +
+            '<button type="button" id="tryCopy"><span class="agentIcon"><span class="copyGlyph" aria-hidden="true"></span></span><span class="agentText"><strong>Copy prompt</strong><small>paste anywhere</small></span></button>' +
+          '</div>' +
+          '<p class="launchStatus" id="launchStatus">Paste into Codex, Claude Code, or Claude Desktop. EchoMem tools need to be available there.</p>' +
+          '</div>';
+      }
+      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>';
+      }
+      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);
+        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="miniBar"><i></i></div>' +
+          '</div>';
+      }
+      function renderSkipped() {
+        setCityMode(false);
+        setExtractMode(true);
+        setHead("Setup paused", "Skipped");
+        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 migrate</code> and it will continue from the remaining conversations.</p>' +
+            hudTip() +
+          '</div>';
+      }
+      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.");
+        if (!ok) return;
+        extractionEnded = true;
+        renderEnding();
+        try {
+          await postJson("/skip", {});
+        } catch (_) {
+          /* The bridge may close while ending; the local page can still show the paused state. */
+        }
+        await sleep(650);
+        renderSkipped();
       }
       async function skip() {
         if (decisionMade) return;
         decisionMade = true;
         try {
           await postJson("/skip", {});
-          setCityMode(false);
-          setHead("Setup complete", "Done");
-          app.className = "notice";
-          app.innerHTML = '<h2 style="color:#203820">All set</h2><p style="margin-top:10px">You can extract unprocessed conversations later with echomem-mcp migrate.</p>';
+          renderSkipped();
         } catch (e) {
           decisionMade = false;
           renderDashboard(e && e.message);
@@ -1605,15 +2485,53 @@ export function renderSetupPage() {
         getJson("/config").then(function (cfg) {
           authUrl = cfg.authUrl || authUrl;
           connected = !!cfg.connected;
+          workspacePath = cfg.workspacePath || workspacePath;
         }).catch(function () {});
         // Scan-first: show the local forensic report before asking the user to connect.
         await showReport();
       }
-      init().catch(function (e) {
-        setHead("Connection issue", "Needs attention");
-        app.className = "error";
-        app.textContent = e && e.message ? e.message : String(e);
-      });
+      // Dev/design preview: ?preview=extract-counting|extract-ready|extract-run|extract-overdue|extract-done|extract-ending|extract-skipped renders that extraction
+      // state directly with sample data (no server, no nonce). Lets us eyeball every state of the
+      // first-impression flow without running a real 3000-session import.
+      var previewState = params.get("preview");
+      if (previewState === "extract-counting") {
+        stats = null;
+        renderDashboard();
+      } else if (previewState === "extract-ready") {
+        stats = {
+          sessions: { total: 136, codex: 82, claudeCode: 54 },
+          migratable: {
+            pending: 28,
+            pendingTotal: 28,
+            pendingCodex: 19,
+            pendingClaudeCode: 9,
+            alreadyMigrated: 108,
+            skippedActive: 0,
+            eta: { estimatedLabel: "under 2 minutes" },
+            estimatedLabel: "under 2 minutes",
+          },
+          discovery: { phase: "account", exact: false },
+        };
+        renderDashboard();
+      } else if (previewState === "extract-run") {
+        renderProgress({ status: "running", total: 28, completed: 4, extracted: 19, failed: 1, latest: "codex 2026-07-01", latestRepo: "EchoMem-Chrome" });
+      } else if (previewState === "extract-overdue") {
+        exStartAt = Date.now() - 200000;
+        exDeadline = Date.now() - 1000;
+        renderProgress({ status: "running", total: 28, completed: 21, extracted: 96, failed: 2, latest: "claude-code 2026-06-28", latestRepo: "DG-Web" });
+      } else if (previewState === "extract-done") {
+        renderProgress({ status: "completed", total: 28, completed: 28, extracted: 128, failed: 0 });
+      } else if (previewState === "extract-ending") {
+        renderEnding();
+      } else if (previewState === "extract-skipped") {
+        renderSkipped();
+      } else {
+        init().catch(function (e) {
+          setHead("Connection issue", "Needs attention");
+          app.className = "error";
+          app.textContent = e && e.message ? e.message : String(e);
+        });
+      }
     })();
   </script>
 </body>