npm - @echomem/mcp - Versions diffs - 1.4.8 → 1.4.10 - Mend

@echomem/mcp 1.4.8 → 1.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/README.md +23 -3
package/assets/canonical-scorer/README.md +18 -0
package/assets/canonical-scorer/analyze-10-problems.mjs +857 -0
package/assets/canonical-scorer/build-session-waste-dashboard.mjs +1628 -0
package/assets/canonical-scorer/golden_anchors.mjs +83 -0
package/assets/canonical-scorer/optimizable_detail.mjs +633 -0
package/assets/hud/github.svg +1 -0
package/dist/city/README.md +9 -0
package/dist/city/echo-ai-city-only.html +1067 -107
package/dist/codex-session-files.js +283 -0
package/dist/codex-sync.js +7 -2
package/dist/context-analysis/canonical-golden.js +47 -0
package/dist/context-analysis/claude-canonical-adapter.js +315 -0
package/dist/context-analysis/claude-native-canonical.js +1216 -0
package/dist/context-analysis/vendored-canonical.js +793 -0
package/dist/context-analysis/workspace-report.js +1838 -0
package/dist/context-metrics/calculate.js +43 -0
package/dist/context-metrics/estimator.js +45 -0
package/dist/context-metrics/ledger.js +507 -0
package/dist/context-metrics/model-limits.js +26 -0
package/dist/context-metrics/parse-claude.js +227 -0
package/dist/context-metrics/parse-codex.js +276 -0
package/dist/context-metrics/types.js +1 -0
package/dist/forensics-10-problems.js +7 -6
package/dist/forensics.js +863 -132
package/dist/hud/adapters.js +77 -202
package/dist/hud/cli.js +0 -0
package/dist/hud/efficiency.js +447 -0
package/dist/hud/electron-main.js +3 -2
package/dist/hud/fs.js +14 -0
package/dist/hud/metric.js +17 -102
package/dist/hud/monitor.js +136 -28
package/dist/hud/render.js +4 -3
package/dist/hud/server.js +30 -0
package/dist/hud/web.js +622 -353
package/dist/index.js +7 -3
package/dist/local-data-paths.js +87 -0
package/dist/migrate.js +37 -29
package/dist/report.js +101 -40
package/dist/setup-page/client-core.js +475 -0
package/dist/setup-page/client-extraction.js +550 -0
package/dist/setup-page/client-lifecycle.js +116 -0
package/dist/setup-page/client-report-audit.js +818 -0
package/dist/setup-page/client-report-city.js +204 -0
package/dist/setup-page/client-report.js +6 -0
package/dist/setup-page/client.js +15 -0
package/dist/setup-page/document.js +37 -0
package/dist/setup-page/styles-city-report.js +880 -0
package/dist/setup-page/styles-context-audit.js +470 -0
package/dist/setup-page/styles-extraction.js +821 -0
package/dist/setup-page/styles-foundation.js +231 -0
package/dist/setup-page/styles.js +11 -0
package/dist/setup-page.js +15 -2538
package/dist/setup-preview.js +245 -0
package/dist/setup.js +456 -44
package/package.json +8 -7
package/templates/echomem-recall.md +2 -2
package/dist/city/10-problems-report.html +0 -649
package/dist/city/_live.html +0 -37
package/dist/city/_serve.mjs +0 -45
package/dist/city/card-data.json +0 -15
package/dist/city/city-data.json +0 -248
package/dist/city/echo-ai-city-only.template.html +0 -1272
package/dist/city/generate-echo-city-only.mjs +0 -112

package/dist/setup-page.js CHANGED Viewed

@@ -1,2539 +1,16 @@
-export function renderSetupPage() {
-    return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>EchoMem Device Setup</title>
-  <style>
-    :root {
-      color-scheme: light;
-      --echo-ink-primary: #1a3a8f;
-      --echo-ink-accent: #4ecdc4;
-      --echo-ink-seal: #c7372f;
-      --echo-ink-text: #2b2a26;
-      --echo-ink-mute: #6b6f69;
-      --echo-ink-faint: #9a9b94;
-      --echo-paper-canvas: #faf7f0;
-      --echo-paper-white: #ffffff;
-      --echo-paper-soft: #f0efe9;
-      --echo-line-soft: #e4e0d6;
-      --echo-ink-accent-deep: #2f9d93;
-      --echo-night: #8b95cf;
-      --rdo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
-      --echo-font-brand: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
-      --echo-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      --echo-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-      --bg: var(--echo-paper-canvas);
-      --ink: var(--echo-ink-text);
-      --muted: var(--echo-ink-mute);
-      --line: var(--echo-line-soft);
-      --panel: var(--echo-paper-white);
-      --good-bg: #eff7ec;
-      --good-line: #cbd9c8;
-      --warn-bg: #fff6dc;
-      --warn-line: #edce79;
-      --error-bg: #fff1ef;
-      --error-line: #e7aaa2;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background:
-        linear-gradient(180deg, rgba(245, 241, 231, 0.92), rgba(255, 255, 255, 0.96)),
-        var(--echo-paper-canvas);
-      color: var(--echo-ink-text);
-      font-family: var(--echo-font-body);
-      letter-spacing: 0;
-    }
-    main {
-      width: min(1120px, 100%);
-      margin: 0 auto;
-      padding: clamp(18px, 4vw, 34px);
-    }
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      flex-wrap: wrap;
-      border-bottom: 1px solid var(--line);
-      padding-bottom: 18px;
-      margin-bottom: 24px;
-    }
-    .kicker {
-      margin: 0;
-      font-family: var(--echo-font-mono);
-      color: var(--echo-ink-mute);
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    h1 {
-      margin: 4px 0 0;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(30px, 5vw, 56px);
-      font-weight: 900;
-      line-height: 1;
-      letter-spacing: 0;
-      color: var(--echo-ink-primary);
-    }
-    h2 {
-      margin: 0;
-      font-family: var(--echo-font-brand);
-      font-size: 22px;
-      font-weight: 900;
-      line-height: 1.2;
-      letter-spacing: 0;
-      color: var(--echo-ink-primary);
-    }
-    .pill {
-      min-height: 36px;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      border: 1px solid #c9ccc3;
-      border-radius: 999px;
-      padding: 0 14px;
-      background: var(--panel);
-      font-family: var(--echo-font-mono);
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-    .state {
-      min-height: 220px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--echo-ink-mute);
-      font-size: 16px;
-      text-align: center;
-    }
-    body.cityMode {
-      background: #eef0f3;
-    }
-    body.cityMode main {
-      width: 100%;
-      padding: 0;
-      margin: 0;
-    }
-    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; }
-    .miniLoad h2 { margin: 0; font-family: var(--echo-font-brand); font-size: clamp(22px, 3.6vw, 32px); color: var(--echo-ink-primary); }
-    .miniLoad p { margin: 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.5; }
-    .miniBar { height: 6px; border-radius: 999px; background: var(--echo-paper-soft); overflow: hidden; max-width: 360px; margin-top: 4px; }
-    .miniBar i { display: block; height: 100%; width: 36%; border-radius: 999px; background: var(--echo-ink-primary); animation: miniIndet 1.3s ease-in-out infinite; }
-    @keyframes miniIndet { 0% { transform: translateX(-115%); } 100% { transform: translateX(330%); } }
-    /* ---- forensic report (ContextDoctorTwo) ---- */
-    .cityHero {
-      --city-display-w: min(calc(100vw - 28px), calc((100vh - 28px) * 0.7797));
-      --city-display-h: min(calc(100vh - 28px), calc((100vw - 28px) * 1.2826));
-      position: relative;
-      min-height: 100vh;
-      display: block;
-      padding: 0;
-      overflow: hidden;
-      background: #eef0f3;
-    }
-    .cityShell {
-      position: relative;
-      width: 100vw;
-      height: 100vh;
-      border-radius: 0;
-      overflow: hidden;
-    }
-    .cityShell iframe {
-      width: 100%;
-      height: 100%;
-      border: 0;
-      display: block;
-      border-radius: 0;
-      background: transparent;
-    }
-    .cityArrow {
-      position: absolute;
-      z-index: 5;
-      right: clamp(22px, 3vw, 42px);
-      bottom: clamp(22px, 3.5vh, 42px);
-      width: 44px;
-      height: 44px;
-      min-height: 44px;
-      padding: 0;
-      border-radius: 999px;
-      border-color: rgba(26, 58, 143, 0.2);
-      background: rgba(255, 255, 255, 0.92);
-      color: var(--echo-ink-primary);
-      font-size: 24px;
-      line-height: 1;
-      box-shadow: 0 10px 28px rgba(28, 38, 60, 0.12);
-    }
-    .detailsWrap {
-      width: 100%;
-      margin: 0;
-      padding: clamp(42px, 6vw, 86px) clamp(28px, 7vw, 104px);
-      background: #fff;
-    }
-    #setup-details { scroll-margin-top: 0; }
-    .hero { padding: 4px 0 24px; }
-    .privacy {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 10px;
-      align-items: baseline;
-      margin-bottom: 24px;
-      padding: 10px 0;
-      border-bottom: 1px solid var(--echo-line-soft);
-    }
-    .privacy span,
-    .kicker-mono,
-    .sectionHead span {
-      font-family: var(--echo-font-mono);
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--echo-ink-primary);
-    }
-    .privacy p { margin: 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.55; }
-    .heroGrid {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 280px;
-      gap: clamp(20px, 3vw, 36px);
-      align-items: stretch;
-    }
-    .heroCopy { display: flex; flex-direction: column; justify-content: center; }
-    .heroCopy .kicker-mono { margin: 0 0 14px; color: var(--echo-ink-primary); }
-    .heroCopy h2 {
-      max-width: 720px;
-      margin: 0;
-      font-size: clamp(34px, 5vw, 58px);
-      line-height: 1.02;
-    }
-    .heroCopy p:not(.kicker-mono) {
-      margin: 18px 0 0;
-      font-size: clamp(15px, 1.25vw, 18px);
-      line-height: 1.62;
-      color: var(--echo-ink-text);
-    }
-    .scoreCard, .promiseCard, .panel {
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      background: var(--echo-paper-white);
-    }
-    .scoreCard { display: grid; align-content: center; min-height: 282px; padding: 22px; }
-    .scoreCard span, .promiseCard span {
-      font-family: var(--echo-font-mono);
-      font-size: 12px;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--echo-ink-mute);
-    }
-    .scoreCard strong {
-      margin-top: 12px;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(72px, 8vw, 96px);
-      font-weight: 900;
-      line-height: 0.9;
-      color: var(--echo-ink-seal);
-      font-variant-numeric: tabular-nums;
-    }
-    .scoreCard em {
-      margin-top: 4px;
-      font-style: normal;
-      font-weight: 900;
-      font-size: 22px;
-      color: var(--echo-ink-primary);
-    }
-    .scoreCard p, .promiseCard p { margin: 14px 0 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.55; }
-    .statStrip {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 10px;
-      margin-top: 22px;
-    }
-    .stat {
-      min-height: 92px;
-      padding: 14px;
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      background: var(--echo-paper-white);
-    }
-    .stat strong {
-      display: block;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(24px, 2.8vw, 34px);
-      font-weight: 900;
-      line-height: 1;
-      color: var(--echo-ink-primary);
-      font-variant-numeric: tabular-nums;
-    }
-    .stat.alert strong { color: var(--echo-ink-seal); }
-    .stat span {
-      display: block;
-      margin-top: 8px;
-      font-family: var(--echo-font-mono);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--echo-ink-mute);
-    }
-    .sourceNote {
-      max-width: 980px;
-      margin: 16px 0 0;
-      font-family: var(--echo-font-mono);
-      font-size: 11px;
-      line-height: 1.55;
-      color: var(--echo-ink-faint);
-    }
-    .sourceNote code {
-      padding: 1px 5px;
-      border-radius: 4px;
-      background: var(--echo-paper-soft);
-      color: var(--echo-ink-primary);
-    }
-    .section { padding: 30px 0 0; margin-top: 30px; border-top: 1px solid var(--echo-line-soft); }
-    .sectionHead { display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px; }
-    .sectionHead h2 { margin: 0; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.05; }
-    .twoCol {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
-      gap: clamp(20px, 3.5vw, 36px);
-      align-items: start;
-    }
-    .storyText p { margin: 0 0 18px; color: var(--echo-ink-text); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.62; }
-    .storyText p:last-child { margin-bottom: 0; }
-    .storyText b { color: var(--echo-ink-primary); }
-    .panel { display: grid; gap: 12px; padding: 16px; }
-    .promiseCard { padding: 22px; }
-    .promiseCard strong {
-      display: block;
-      margin-top: 12px;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(34px, 4vw, 48px);
-      font-weight: 900;
-      line-height: 1;
-      color: var(--echo-ink-primary);
-    }
-    .promiseActions { display: grid; gap: 10px; margin-top: 18px; }
-    .promiseCard button, .promiseCard .button {
-      width: 100%;
-      min-height: 48px;
-      border-radius: 6px;
-      font-family: var(--echo-font-mono);
-      font-size: 13px;
-      font-weight: 800;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    .promiseCard .primary { border-color: var(--echo-ink-primary); background: var(--echo-ink-primary); color: #fff; }
-    .promiseCard .secondary { background: #fff; color: var(--echo-ink-primary); border-color: var(--echo-ink-primary); }
-    /* histogram */
-    .histo { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
-    .histoBar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--echo-ink-primary); }
-    .histoBar.night { background: var(--echo-ink-seal); }
-    .histoAxis {
-      display: flex; justify-content: space-between; margin-top: 8px;
-      font-family: var(--echo-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--echo-ink-faint);
-    }
-    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
-    .chips span {
-      padding: 6px 8px; border: 1px solid var(--echo-line-soft); border-radius: 6px;
-      background: var(--echo-paper-soft); font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-primary);
-    }
-    /* reread / repo rows */
-    .row2 {
-      display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
-      padding: 11px 0; border-bottom: 1px solid var(--echo-line-soft);
-    }
-    .row2:last-child { border-bottom: 0; }
-    .row2 b { font-family: var(--echo-font-mono); font-size: 13px; color: var(--echo-ink-primary); }
-    .row2 small { display: block; margin-top: 3px; font-size: 12px; color: var(--echo-ink-mute); }
-    .row2 strong {
-      font-family: var(--echo-font-brand); font-size: 24px; font-weight: 900;
-      color: var(--echo-ink-seal); font-variant-numeric: tabular-nums; white-space: nowrap;
-    }
-    .repoRow strong { color: var(--echo-ink-primary); }
-    .tag {
-      display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
-      background: var(--echo-paper-soft); font-family: var(--echo-font-mono); font-size: 10px;
-      font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--echo-ink-seal);
-    }
-    /* cost split + model rows */
-    .segBar { display: flex; width: 100%; height: 22px; overflow: hidden; border-radius: 5px; background: var(--echo-paper-soft); }
-    .segBar span { display: block; min-width: 2px; }
-    .seg-output { background: var(--echo-ink-primary); }
-    .seg-cold { background: var(--echo-ink-mute); }
-    .seg-cw { background: var(--echo-ink-accent); }
-    .seg-cr { background: var(--echo-ink-seal); }
-    .costLegend { display: grid; gap: 6px; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-mute); }
-    .modelRow {
-      display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
-      padding: 9px 0; border-bottom: 1px solid var(--echo-line-soft);
-      font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute);
-    }
-    .modelRow:last-child { border-bottom: 0; }
-    .modelRow b { font-size: 13px; color: var(--echo-ink-primary); }
-    .modelRow strong { font-family: var(--echo-font-brand); font-size: 18px; font-weight: 900; color: var(--echo-ink-seal); }
-    .nightCard {
-      margin-top: 18px; padding: 20px 22px; border: 1px solid var(--echo-ink-seal);
-      border-radius: 8px; background: var(--echo-paper-white);
-    }
-    .nightCard span {
-      font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
-      text-transform: uppercase; color: var(--echo-ink-seal);
-    }
-    .nightCard p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--echo-ink-text); }
-    .nightCard b { color: var(--echo-ink-primary); }
-    /* optional city explanation page */
-    .explainPage {
-      max-width: 1260px;
-      margin: 0 auto;
-    }
-    .explainHero {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
-      gap: clamp(28px, 5vw, 70px);
-      align-items: end;
-      padding-bottom: clamp(28px, 5vw, 58px);
-      border-bottom: 1px solid var(--echo-line-soft);
-    }
-    .explainCopy {
-      max-width: 760px;
-    }
-    .explainCopy h2 {
-      margin: 10px 0 0;
-      font-size: clamp(38px, 5.4vw, 74px);
-      line-height: 0.98;
-      color: var(--echo-ink-primary);
-    }
-    .explainCopy p:not(.kicker-mono) {
-      max-width: 680px;
-      margin: 20px 0 0;
-      font-size: clamp(16px, 1.35vw, 20px);
-      line-height: 1.55;
-      color: var(--echo-ink-text);
-    }
-    .cleanReadout {
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      padding: 22px;
-      background: #fff;
-    }
-    .cleanReadout span {
-      display: block;
-      font-family: var(--echo-font-mono);
-      font-size: 11px;
-      font-weight: 800;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--echo-ink-mute);
-    }
-    .cleanReadout strong {
-      display: block;
-      margin-top: 8px;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(54px, 6vw, 88px);
-      font-weight: 900;
-      line-height: 0.9;
-      color: var(--echo-ink-seal);
-      font-variant-numeric: tabular-nums;
-    }
-    .cleanReadout p {
-      margin: 14px 0 0;
-      color: var(--echo-ink-mute);
-      font-size: 15px;
-      line-height: 1.55;
-    }
-    .insightPills {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 10px;
-      margin-top: clamp(18px, 3vw, 32px);
-    }
-    .insightPill {
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      padding: 14px 16px;
-      background: #fff;
-    }
-    .insightPill strong {
-      display: block;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(24px, 2.2vw, 34px);
-      font-weight: 900;
-      line-height: 1;
-      color: var(--echo-ink-primary);
-      font-variant-numeric: tabular-nums;
-    }
-    .insightPill.alert strong { color: var(--echo-ink-seal); }
-    .insightPill span {
-      display: block;
-      margin-top: 8px;
-      font-family: var(--echo-font-mono);
-      font-size: 10px;
-      font-weight: 800;
-      letter-spacing: 0.07em;
-      text-transform: uppercase;
-      color: var(--echo-ink-mute);
-    }
-    .calcNote {
-      margin-top: 18px;
-      border-top: 1px solid var(--echo-line-soft);
-      padding-top: 14px;
-      color: var(--echo-ink-faint);
-      font-family: var(--echo-font-mono);
-      font-size: 11px;
-      line-height: 1.6;
-    }
-    .calcNote summary {
-      cursor: pointer;
-      color: var(--echo-ink-primary);
-      font-weight: 800;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-    }
-    .calcNote p { margin: 10px 0 0; }
-    .explainSections {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 14px;
-      margin-top: clamp(28px, 4vw, 52px);
-    }
-    .explainCard {
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      background: #fff;
-      padding: 18px;
-      min-height: 230px;
-      display: grid;
-      gap: 14px;
-      align-content: start;
-    }
-    .explainCard .kicker-mono { margin: 0; color: var(--echo-ink-mute); }
-    .explainCard h3 {
-      margin: 0;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(21px, 2vw, 28px);
-      line-height: 1.08;
-      color: var(--echo-ink-primary);
-    }
-    .explainCard p {
-      margin: 0;
-      color: var(--echo-ink-text);
-      font-size: 15px;
-      line-height: 1.55;
-    }
-    .explainCard .panel {
-      padding: 0;
-      border: 0;
-      background: transparent;
-    }
-    .explainCta {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 24px;
-      align-items: center;
-      margin-top: 16px;
-      padding: 22px;
-      border: 1px solid var(--echo-line-soft);
-      border-radius: 8px;
-      background: var(--echo-paper-canvas);
-    }
-    .explainCta h3 {
-      margin: 0;
-      font-family: var(--echo-font-brand);
-      font-size: clamp(24px, 2.5vw, 34px);
-      line-height: 1.08;
-      color: var(--echo-ink-primary);
-    }
-    .explainCta p {
-      margin: 8px 0 0;
-      max-width: 700px;
-      color: var(--echo-ink-mute);
-      font-size: 15px;
-      line-height: 1.5;
-    }
-    .explainCta .primary, .explainCta .secondary {
-      min-width: 180px;
-      min-height: 50px;
-      border-radius: 8px;
-      font-family: var(--echo-font-mono);
-      font-size: 13px;
-      font-weight: 800;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    /* ---- dashboard (post-auth extraction) ---- */
-    .loading-panel, .doctor-copy, .doctor-score, .metric, .extract-panel {
-      border: 1px solid var(--line);
-      border-radius: 8px;
-      background: var(--panel);
-    }
-    .status-strip {
-      display: flex; align-items: flex-start; gap: 12px;
-      border: 1px solid #c7d6e5; border-radius: 8px; background: #eef5fb; color: #1e3449;
-      padding: 13px 15px; margin-bottom: 18px;
-    }
-    .status-strip.good { border-color: var(--good-line); background: var(--good-bg); color: #203820; }
-    .status-strip.warn { border-color: var(--warn-line); background: var(--warn-bg); color: #5e4300; }
-    .status-strip .dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 999px; margin-top: 4px; background: currentColor; }
-    .status-strip strong { display: block; line-height: 1.25; }
-    .status-strip p { margin-top: 3px; color: currentColor; font-size: 14px; }
-    .doctor-hero {
-      display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
-      gap: 14px; margin-bottom: 14px; align-items: stretch;
-    }
-    .doctor-copy, .doctor-score { padding: clamp(18px, 3vw, 26px); }
-    .doctor-copy { display: flex; flex-direction: column; justify-content: center; min-height: 240px; }
-    .doctor-copy h2 { max-width: 760px; margin-top: 10px; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; }
-    .doctor-copy p:not(.label):not(.helper) { max-width: 720px; margin-top: 14px; font-size: clamp(15px, 1.5vw, 18px); color: var(--echo-ink-text); }
-    .doctor-score { display: grid; align-content: center; gap: 12px; }
-    .doctor-score > span { font-family: var(--echo-font-mono); color: var(--echo-ink-mute); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
-    .doctor-score > strong { display: block; font-family: var(--echo-font-brand); font-size: clamp(34px, 5.5vw, 60px); font-weight: 900; line-height: 0.95; color: var(--echo-ink-primary); }
-    .doctor-mini { display: grid; gap: 8px; margin-top: 12px; }
-    .mini-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--echo-line-soft); padding-bottom: 8px; }
-    .mini-row span { color: var(--echo-ink-text); font-size: 14px; }
-    .mini-row strong { font-family: var(--echo-font-brand); font-size: 16px; font-weight: 900; color: var(--echo-ink-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
-    .doctor-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
-    .doctor-actions { margin: 0 0 18px; }
-    .metric { min-height: 122px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
-    .label { margin: 0; font-family: var(--echo-font-mono); color: var(--echo-ink-mute); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
-    .value { display: block; font-family: var(--echo-font-brand); font-size: 34px; font-weight: 900; line-height: 1; color: var(--echo-ink-primary); }
-    .detail { margin: 0; color: var(--echo-ink-mute); font-size: 14px; line-height: 1.45; }
-    .extract-panel { padding: 18px; }
-    .bucket-row { align-items: center; display: grid; grid-template-columns: minmax(90px, 1fr) minmax(100px, auto); gap: 12px; }
-    .bucket-value { text-align: right; font-weight: 800; white-space: nowrap; }
-    .helper { margin-top: 10px; color: var(--echo-ink-mute); font-size: 14px; }
-    .notice, .done, .warning, .error { border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
-    .notice, .done { border: 1px solid var(--good-line); background: var(--good-bg); color: #203820; }
-    .warning { border: 1px solid var(--warn-line); background: var(--warn-bg); color: #5e4300; }
-    .error { border: 1px solid var(--error-line); background: var(--error-bg); color: #7d2117; }
-    .details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
-    dl { margin: 14px 0 0; display: grid; gap: 10px; }
-    .row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #ecece7; padding-bottom: 8px; }
-    dt { color: var(--echo-ink-text); }
-    dd { margin: 0; text-align: right; color: var(--echo-ink-text); }
-    ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
-    li { display: flex; justify-content: space-between; gap: 10px; }
-    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
-    button, .button {
-      min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-      border-radius: 8px; border: 1px solid var(--echo-ink-primary); padding: 0 16px;
-      font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
-    }
-    .primary { background: var(--echo-ink-primary); color: #fff; }
-    .secondary { background: #fff; color: var(--echo-ink-primary); }
-    button:disabled { cursor: not-allowed; opacity: 0.55; }
-    .track { height: 12px; overflow: hidden; border-radius: 999px; background: #e8e8e1; margin: 16px 0 10px; }
-    .fill { height: 100%; width: 0%; background: var(--echo-ink-primary); transition: width 180ms ease; }
-    /* indeterminate "we're working on it" bar for the prep phase (before job counts move) */
-    .track.indef .fill { width: 40%; transition: none; animation: prepSlide 1.2s ease-in-out infinite; }
-    @keyframes prepSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(350%); } }
-    .prep-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
-    .prep-steps li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: center; font-size: 15px; color: var(--echo-ink-mute); }
-    .prep-steps .dot { width: 13px; height: 13px; border-radius: 999px; border: 2px solid #cfcfc6; box-sizing: border-box; }
-    .prep-steps li.done { color: var(--echo-ink-text); }
-    .prep-steps li.done .dot { background: var(--echo-ink-primary); border-color: var(--echo-ink-primary); }
-    .prep-steps li.active { color: var(--echo-ink-primary); font-weight: 700; }
-    .prep-steps li.active .dot { border-color: var(--echo-ink-primary); animation: prepDot 1.1s ease-in-out infinite; }
-    @keyframes prepDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,58,143,0.4); } 60% { box-shadow: 0 0 0 6px rgba(26,58,143,0); } }
-    .counts { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--echo-font-mono); color: var(--echo-ink-mute); font-size: 13px; letter-spacing: 0.02em; margin-bottom: 6px; }
-    .finish { display: grid; gap: 6px; place-items: center; text-align: center; padding: clamp(28px, 6vw, 64px) 0; }
-    .finishMark { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; font-size: 26px; font-weight: 900; margin-bottom: 8px; }
-    .finishMark.ok { background: var(--good-bg); color: #2f7f4f; border: 1px solid var(--good-line); }
-    .finishMark.warn { background: var(--warn-bg); color: #5e4300; border: 1px solid var(--warn-line); }
-    .finishBig { font-family: var(--echo-font-brand); font-size: clamp(48px, 8vw, 84px); font-weight: 900; line-height: 0.9; color: var(--echo-ink-primary); font-variant-numeric: tabular-nums; }
-    .finishLabel { font-family: var(--echo-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-mute); }
-    .finish p { max-width: 560px; margin: 12px 0 0; color: var(--echo-ink-text); font-size: 16px; line-height: 1.6; }
-    .finish p.helper { color: var(--echo-ink-mute); font-size: 14px; margin-top: 6px; }
-    code { font-family: var(--echo-font-mono); font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--echo-paper-soft); color: var(--echo-ink-primary); }
-    .hidden { display: none; }
-    @media (max-width: 820px) {
-      .heroGrid, .twoCol, .statStrip, .privacy, .doctor-hero, .doctor-stat-strip,
-      .explainHero, .insightPills, .explainSections, .explainCta { grid-template-columns: 1fr; }
-      .doctor-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-      .heroCopy h2 { font-size: 34px; }
-      .scoreCard { min-height: 220px; }
-      .explainCopy h2 { font-size: 38px; }
-      .explainCta .promiseActions { width: 100%; }
-      .explainCta .primary, .explainCta .secondary { width: 100%; }
-      .cityHero { min-height: auto; }
-      .cityShell {
-        width: 100vw;
-        height: 100vh;
-      }
-    }
-    /* 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; }
-    /* 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; }
-    .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; }
-    .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; } }
-    @keyframes rdoGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
-    @keyframes rdoDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
-    @keyframes rdoWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
-    body.cityMode .detailsWrap { background: linear-gradient(180deg, rgba(245,241,231,0.92), rgba(255,255,255,0.96)), var(--echo-paper-canvas); }
-    .echo-rdo { width: min(1280px, 100%); margin: 0 auto; color: var(--echo-ink-text); font-family: var(--echo-font-body); }
-    .echo-rdo .rise { opacity: 0; animation: rdoRise 0.6s var(--rdo-ease) forwards; animation-delay: var(--d, 0ms); }
-    .echo-rdo .rdo-head { border-bottom: 1px solid var(--echo-line-soft); padding-bottom: 20px; margin-bottom: 22px; }
-    .echo-rdo .rdo-kicker { margin: 0; font-family: var(--echo-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-h1 { margin: 8px 0 0; font-family: var(--echo-font-brand); font-weight: 900; font-size: clamp(28px, 4vw, 46px); line-height: 1.02; letter-spacing: -0.01em; color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-lead { margin: 12px 0 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--echo-ink-text); max-width: 56ch; }
-    .echo-rdo .rdo-lead b { color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
-    .echo-rdo .rdo-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--echo-line-soft); border-radius: 999px; background: var(--echo-paper-white); padding: 6px 13px; font-family: var(--echo-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--echo-ink-mute); }
-    .echo-rdo .rdo-chip b { color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-chip .live { width: 7px; height: 7px; border-radius: 50%; background: var(--echo-ink-accent); }
-    .echo-rdo .rdo-card { position: relative; background: var(--echo-paper-white); border: 1px solid var(--echo-line-soft); border-radius: 10px; padding: 18px; transition: box-shadow 0.2s var(--rdo-ease), transform 0.2s var(--rdo-ease); }
-    .echo-rdo .rdo-card:hover { box-shadow: 0 14px 30px -16px rgba(26,58,143,0.28); transform: translateY(-2px); }
-    .echo-rdo .clab { margin: 0; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--echo-ink-mute); }
-    .echo-rdo .csub { margin-top: 4px; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-faint); }
-    .echo-rdo .csub b { color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-help { position: absolute; top: 13px; right: 13px; width: 24px; height: 24px; min-height: 0; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--echo-line-soft); background: var(--echo-paper-soft); color: var(--echo-ink-faint); font-family: var(--echo-font-mono); font-size: 11px; font-weight: 800; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; transition: all 0.15s ease; }
-    .echo-rdo .rdo-help:hover { color: #fff; background: var(--echo-ink-primary); border-color: var(--echo-ink-primary); }
-    .echo-rdo .rdo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
-    .echo-rdo .rdo-kpi { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; }
-    .echo-rdo .rdo-kpi .num { font-family: var(--echo-font-brand); font-weight: 900; font-size: clamp(34px, 4vw, 50px); line-height: 0.9; color: var(--echo-ink-primary); font-variant-numeric: tabular-nums; }
-    .echo-rdo .rdo-kpi.hero { border-color: rgba(199,55,47,0.30); }
-    .echo-rdo .rdo-kpi.hero::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--echo-ink-seal); }
-    .echo-rdo .rdo-kpi.hero .num { color: var(--echo-ink-seal); }
-    .echo-rdo .rdo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
-    .echo-rdo .figbox { margin-top: 16px; position: relative; }
-    .echo-rdo .rdo-histo { display: flex; align-items: flex-end; gap: 3px; height: 132px; border-bottom: 2px solid var(--echo-line-soft); }
-    .echo-rdo .rdo-histo .bar { flex: 1; align-self: flex-end; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--echo-ink-primary); transform: scaleY(0); transform-origin: bottom; animation: rdoGrow 0.5s var(--rdo-ease) forwards; animation-delay: var(--bd, 0ms); }
-    .echo-rdo .rdo-histo .bar.night { background: var(--echo-night); }
-    .echo-rdo .rdo-histo .bar:hover { filter: brightness(1.12); }
-    .echo-rdo .rdo-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--echo-font-mono); font-size: 10px; color: var(--echo-ink-faint); }
-    .echo-rdo .rdo-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 13px; font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-mute); }
-    .echo-rdo .rdo-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
-    .echo-rdo .terr { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin-top: 16px; }
-    .echo-rdo .donut { width: 144px; height: 144px; position: relative; margin: 0 auto; }
-    .echo-rdo .donut .donutSvg { width: 100%; height: 100%; display: block; opacity: 0; animation: rdoRise 0.6s var(--rdo-ease) 0.2s forwards; }
-    .echo-rdo .donut .seg { transition: opacity 0.15s ease, stroke-width 0.15s ease; }
-    .echo-rdo .donut.hovering .seg { opacity: 0.3; }
-    .echo-rdo .donut.hovering .seg.on { opacity: 1; stroke-width: 7.5; }
-    .echo-rdo .donut .seg { cursor: pointer; }
-    .echo-rdo .donut-tip, .echo-rdo .histo-tip { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -132%); background: var(--echo-ink-text); color: #fff; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 6; opacity: 0; transition: opacity 0.12s ease; box-shadow: 0 6px 16px rgba(28,38,60,0.2); }
-    .echo-rdo .donut-tip.show, .echo-rdo .histo-tip.show { opacity: 1; }
-    .echo-rdo .donut-tip::after, .echo-rdo .histo-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--echo-ink-text); }
-    .echo-rdo .donut .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
-    .echo-rdo .donut .center b { display: block; font-family: var(--echo-font-brand); font-weight: 900; font-size: 28px; color: var(--echo-ink-primary); line-height: 0.9; }
-    .echo-rdo .donut .center span { font-family: var(--echo-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-mute); }
-    .echo-rdo .rrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; }
-    .echo-rdo .rrow .nm { font-family: var(--echo-font-mono); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .echo-rdo .rrow .vl { font-family: var(--echo-font-mono); font-size: 11px; color: var(--echo-ink-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
-    .echo-rdo .rbar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--echo-paper-soft); margin-top: 3px; overflow: hidden; }
-    .echo-rdo .rbar i { display: block; height: 100%; border-radius: 999px; transform-origin: left; transform: scaleX(0); animation: rdoDraw 0.6s var(--rdo-ease) forwards; animation-delay: var(--rd, 0ms); }
-    .echo-rdo .lblrow { font-family: var(--echo-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--echo-ink-mute); margin: 16px 0 7px; }
-    .echo-rdo .stack { display: flex; height: 28px; border-radius: 7px; overflow: hidden; background: var(--echo-paper-soft); }
-    .echo-rdo .stack .seg { min-width: 0; display: grid; place-items: center; font-family: var(--echo-font-mono); font-size: 10px; font-weight: 800; }
-    .echo-rdo .ledgerCols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
-    .echo-rdo .ex-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--echo-line-soft); }
-    .echo-rdo .ex-row:first-of-type { border-top: 0; padding-top: 16px; }
-    .echo-rdo .collapse-inner .ex-row:first-of-type { border-top: 1px solid var(--echo-line-soft); padding-top: 11px; }
-    .echo-rdo .ex-file { font-family: var(--echo-font-mono); font-size: 12.5px; font-weight: 700; color: var(--echo-ink-primary); }
-    .echo-rdo .ex-meta { margin-top: 3px; font-size: 12px; color: var(--echo-ink-mute); }
-    .echo-rdo .ex-reads { font-family: var(--echo-font-brand); font-weight: 900; font-size: 20px; color: var(--echo-ink-seal); font-variant-numeric: tabular-nums; white-space: nowrap; }
-    .echo-rdo .rdo-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(199,55,47,0.08); font-family: var(--echo-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--echo-ink-seal); }
-    .echo-rdo .collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--rdo-ease); }
-    .echo-rdo .collapse.open { grid-template-rows: 1fr; }
-    .echo-rdo .collapse-inner { overflow: hidden; min-height: 0; }
-    .echo-rdo .moreBtn { display: inline-block; min-height: 0; margin-top: 14px; background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--echo-ink-primary); }
-    .echo-rdo .moreBtn:hover { opacity: 0.65; }
-    .echo-rdo .mrow2 { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--echo-line-soft); font-family: var(--echo-font-mono); font-size: 12px; color: var(--echo-ink-mute); }
-    .echo-rdo .mrow2:first-child { border-top: 0; }
-    .echo-rdo .mrow2 b { font-size: 13px; color: var(--echo-ink-primary); }
-    .echo-rdo .mrow2 strong { font-family: var(--echo-font-brand); font-size: 16px; color: var(--echo-ink-text); }
-    .echo-rdo .outcome { margin-top: 14px; border: 1px solid rgba(78,205,196,0.45); background: linear-gradient(180deg, rgba(78,205,196,0.10), rgba(78,205,196,0.04)); border-radius: 12px; padding: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(22px, 3vw, 44px); align-items: center; }
-    .echo-rdo .outcome .rdo-kicker { color: var(--echo-ink-accent-deep); }
-    .echo-rdo .outcome h2 { margin: 9px 0 0; font-family: var(--echo-font-brand); font-weight: 900; font-size: clamp(22px, 2.7vw, 33px); line-height: 1.05; letter-spacing: -0.01em; color: var(--echo-ink-primary); }
-    .echo-rdo .outcome .rdo-lead { margin-top: 12px; max-width: 46ch; }
-    .echo-rdo .targetbar { position: relative; margin-top: 36px; }
-    .echo-rdo .tb-track { position: relative; height: 34px; border-radius: 999px; background: var(--echo-paper-soft); border: 1px solid var(--echo-line-soft); overflow: hidden; }
-    .echo-rdo .tb-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #d6473e, var(--echo-ink-seal)); display: flex; align-items: center; padding: 0 14px; color: #fff; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 800; white-space: nowrap; animation: rdoWipe 0.85s var(--rdo-ease) 0.2s both; }
-    .echo-rdo .tb-goal { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.9); border-radius: 2px; }
-    .echo-rdo .tb-flag { position: absolute; top: -29px; transform: translateX(-50%); background: var(--echo-ink-accent-deep); color: #fff; font-family: var(--echo-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 3px 8px rgba(47,157,147,0.3); }
-    .echo-rdo .tb-flag::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--echo-ink-accent-deep); }
-    .echo-rdo .oc-targets { background: var(--echo-paper-white); border: 1px solid var(--echo-line-soft); border-radius: 10px; padding: 18px; }
-    .echo-rdo .ot-title { margin: 0 0 6px; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--echo-ink-mute); }
-    .echo-rdo .ot-note { margin: -2px 0 10px; font-size: 12px; line-height: 1.45; color: var(--echo-ink-mute); }
-    .echo-rdo .ot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--echo-line-soft); }
-    .echo-rdo .ot-row:last-of-type { border-bottom: 0; }
-    .echo-rdo .ot-row .otk { display: flex; flex-direction: column; gap: 2px; }
-    .echo-rdo .ot-row .k { font-size: 13px; color: var(--echo-ink-text); }
-    .echo-rdo .ot-row .ks { font-family: var(--echo-font-mono); font-size: 10px; color: var(--echo-ink-faint); }
-    .echo-rdo .ot-row .v { font-family: var(--echo-font-brand); font-weight: 900; font-size: 22px; color: var(--echo-ink-accent-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
-    .echo-rdo .rdo-cta { margin-top: 16px; width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid var(--echo-ink-primary); background: var(--echo-ink-primary); color: #fff; font-family: var(--echo-font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; transition: filter 0.15s ease; }
-    .echo-rdo .rdo-cta:hover { filter: brightness(1.12); }
-    .echo-rdo .rdo-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--echo-line-soft); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-family: var(--echo-font-mono); font-size: 11px; line-height: 1.6; color: var(--echo-ink-faint); }
-    .echo-rdo .rdo-foot code { background: var(--echo-paper-soft); color: var(--echo-ink-primary); padding: 1px 5px; border-radius: 4px; }
-    .echo-rdo .rdo-foot .priv { color: var(--echo-ink-accent-deep); font-weight: 700; }
-    @media (max-width: 860px) { .echo-rdo .rdo-kpis { grid-template-columns: repeat(2, 1fr); } .echo-rdo .rdo-grid { grid-template-columns: 1fr; } .echo-rdo .outcome { grid-template-columns: 1fr; } }
-    @media (max-width: 620px) { .echo-rdo .ledgerCols, .echo-rdo .terr { grid-template-columns: 1fr; } }
-    @media (prefers-reduced-motion: reduce) { .echo-rdo .rise, .echo-rdo .rdo-histo .bar, .echo-rdo .donut .donutSvg, .echo-rdo .rbar i, .echo-rdo .tb-fill { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; } }
-    /* annotation dialog */
-    .echo-note-dlg { border: 1px solid var(--echo-line-soft); border-radius: 14px; padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--echo-paper-white); color: var(--echo-ink-text); box-shadow: 0 28px 60px -18px rgba(26,32,46,0.4); }
-    .echo-note-dlg[open] { animation: rdoRise 0.24s var(--rdo-ease); }
-    .echo-note-dlg::backdrop { background: rgba(26,32,46,0.4); }
-    .echo-note-dlg .nk, .echo-note-dlg .nt, .echo-note-dlg .nb { padding-left: 26px; padding-right: 26px; }
-    .echo-note-dlg .nk { margin: 24px 0 0; font-family: var(--echo-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--echo-ink-accent-deep); }
-    .echo-note-dlg .nt { margin: 6px 0 0; font-family: var(--echo-font-brand); font-weight: 900; font-size: 24px; line-height: 1.1; color: var(--echo-ink-primary); }
-    .echo-note-dlg .nb { padding-top: 14px; padding-bottom: 26px; }
-    .echo-note-dlg .nb p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
-    .echo-note-dlg .nb p:last-child { margin-bottom: 0; }
-    .echo-note-dlg .nb .echo { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(78,205,196,0.10); border: 1px solid rgba(78,205,196,0.3); font-size: 13px; line-height: 1.55; }
-    .echo-note-dlg .nb .echo b { color: var(--echo-ink-primary); }
-    .echo-note-dlg .nb code { background: var(--echo-paper-soft); color: var(--echo-ink-primary); padding: 1px 5px; border-radius: 4px; }
-    .echo-note-dlg .nclose { position: absolute; top: 13px; right: 14px; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--echo-line-soft); background: var(--echo-paper-white); color: var(--echo-ink-mute); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
-    .echo-note-dlg .nclose:hover { color: var(--echo-ink-seal); border-color: var(--echo-ink-seal); }
-  </style>
-</head>
-<body>
-  <main>
-    <header>
-      <div>
-        <p class="kicker">EchoMem device setup</p>
-        <h1 id="title">Turn history into memory</h1>
-      </div>
-      <div class="pill" id="status">Local</div>
-    </header>
-    <section id="app" class="state">Starting local scan...</section>
-  </main>
-  <dialog id="echo-note" class="echo-note-dlg">
-    <button class="nclose" aria-label="Close">&times;</button>
-    <p class="nk" id="echo-note-k"></p>
-    <h2 class="nt" id="echo-note-t"></h2>
-    <div class="nb" id="echo-note-b"></div>
-  </dialog>
-  <script>
-    (function () {
-      var params = new URLSearchParams(location.search);
-      var nonce = params.get("nonce") || "";
-      var app = document.getElementById("app");
-      var title = document.getElementById("title");
-      var status = document.getElementById("status");
-      var report = null;
-      var stats = null;
-      var statsSlow = false;
-      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;
-      var reportPollStarted = false;
-      var NIGHT_HOURS = { 22: 1, 23: 1, 0: 1, 1: 1, 2: 1, 3: 1 };
-      function esc(value) {
-        return String(value == null ? "" : value).replace(/[&<>"']/g, function (ch) {
-          return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch];
-        });
-      }
-      function setHead(nextTitle, nextStatus) {
-        title.textContent = nextTitle;
-        status.textContent = nextStatus;
-      }
-      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() : "-";
-      }
-      function countOrChecking(value) {
-        return typeof value === "number" && isFinite(value) ? Math.round(value).toLocaleString() : "checking";
-      }
-      function compact(value) {
-        if (typeof value !== "number" || !isFinite(value)) return "-";
-        var abs = Math.abs(value);
-        if (abs >= 1e9) return (value / 1e9).toFixed(1) + "B";
-        if (abs >= 1e6) return (value / 1e6).toFixed(1) + "M";
-        if (abs >= 1e3) return (value / 1e3).toFixed(1) + "K";
-        return String(Math.round(value));
-      }
-      function big(value) {
-        if (typeof value !== "number" || !isFinite(value)) return "-";
-        var n = Math.abs(value);
-        if (n >= 1e9) return (value / 1e9).toFixed(2) + "B";
-        if (n >= 1e6) return (value / 1e6).toFixed(1) + "M";
-        if (n >= 1e3) return Math.round(value / 1e3) + "K";
-        return String(Math.round(value));
-      }
-      function money(value) {
-        return "$" + number(value);
-      }
-      function sleep(ms) { return new Promise(function (resolve) { setTimeout(resolve, ms); }); }
-      async function fetchWithTimeout(url, options, timeoutMs) {
-        var controller = new AbortController();
-        var timer = setTimeout(function () { controller.abort(); }, timeoutMs);
-        try {
-          return await fetch(url, Object.assign({}, options || {}, { signal: controller.signal }));
-        } finally {
-          clearTimeout(timer);
-        }
-      }
-      async function getJson(path) {
-        var sep = path.indexOf("?") >= 0 ? "&" : "?";
-        var res = await fetch(path + sep + "nonce=" + encodeURIComponent(nonce), { credentials: "omit" });
-        if (!res.ok) throw new Error(await res.text() || ("HTTP " + res.status));
-        return await res.json();
-      }
-      async function postJson(path, body, timeoutMs) {
-        var options = {
-          method: "POST",
-          credentials: "omit",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(Object.assign({ nonce: nonce }, body || {}))
-        };
-        var res = timeoutMs ? await fetchWithTimeout(path, options, timeoutMs) : await fetch(path, options);
-        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) {
-        return '<section class="metric"><p class="label">' + esc(label) + '</p><strong class="value">' + esc(value) + '</strong><p class="detail">' + esc(detail) + '</p></section>';
-      }
-      function row(label, value) {
-        return '<div class="row"><dt>' + esc(label) + '</dt><dd>' + esc(value) + '</dd></div>';
-      }
-      function migrationBuckets(migratable) {
-        var eta = migratable && migratable.eta ? migratable.eta : {};
-        return Array.isArray(migratable && migratable.buckets) ? migratable.buckets : (Array.isArray(eta.buckets) ? eta.buckets : []);
-      }
-      function bucketCount(buckets, key) {
-        var found = buckets.filter(function (b) { return b && b.key === key; })[0];
-        return found && typeof found.count === "number" ? found.count : 0;
-      }
-      function bucketList(buckets) {
-        var visible = buckets.filter(function (b) { return b && (b.count || b.chars); });
-        if (!visible.length) return '<p style="margin-top:10px">No pending extraction buckets.</p>';
-        return '<ol>' + visible.map(function (b) {
-          return '<li class="bucket-row"><span>' + esc(b.label) + '</span><span class="bucket-value">' + esc(number(b.count)) + ' · ' + esc(compact(b.chars)) + '</span></li>';
-        }).join("") + '</ol>';
-      }
-      function routeError(code) {
-        if (code === "NO_PENDING_SESSIONS") return "There are no unprocessed local conversations to extract right now.";
-        if (code === "FORBIDDEN_SCOPE") return "This device token cannot import history. Re-connect this device to mint an import-capable token.";
-        if (code === "VAULT_LOCKED") return "Your local vault is locked. Run echomem-mcp unlock, then retry.";
-        if (code === "IMPORT_START_TIMEOUT") return "Starting the import timed out. Retry when the connection settles.";
-        if (code === "NOT_LOGGED_IN") return "The local bridge is not logged in yet. Sign in again and retry.";
-        return code || "Something went wrong. Retry in a moment.";
-      }
-      function closeAuthWindow() {
-        try { if (authWindow && !authWindow.closed) authWindow.close(); } catch (_) {}
-        authWindow = null;
-      }
-      function notifyOpenerConnected() {
-        try {
-          if (window.opener && window.opener !== window && !window.opener.closed) {
-            window.opener.postMessage({ type: "echomem:connected", nonce: nonce }, location.origin);
-            setTimeout(function () { window.close(); }, 250);
-            return true;
-          }
-        } catch (_) {}
-        return false;
-      }
-      function openAuthWindow(url) {
-        var targetUrl = url || authUrl;
-        if (!targetUrl) return false;
-        try {
-          authWindow = window.open(targetUrl, "echomem-signin-" + nonce, "popup=yes,width=560,height=760");
-          if (!authWindow) return false;
-          authWindow.focus();
-          return true;
-        } catch (_) { return false; }
-      }
-      function showPopupFallback(message, url) {
-        Array.prototype.forEach.call(document.querySelectorAll("[data-signin-help]"), function (hint) {
-          hint.textContent = message || "Your browser blocked the secure sign-in window. Use the button below, then this page will resume when sign-in returns.";
-        });
-        Array.prototype.forEach.call(document.querySelectorAll("[data-signin-fallback]"), function (fallback) {
-          fallback.setAttribute("href", url || authUrl);
-          fallback.classList.remove("hidden");
-        });
-      }
-      function onConnectClick() {
-        if (connected) { void waitForStats(); return; }
-        if (!openAuthWindow(authUrl)) showPopupFallback("", authUrl);
-        startConnectionPoll();
-      }
-      function bindConnect() {
-        Array.prototype.forEach.call(document.querySelectorAll("[data-connect-echo]"), function (signin) {
-          signin.onclick = onConnectClick;
-        });
-      }
-      function bindDetailsArrow() {
-        var arrow = document.getElementById("details-arrow");
-        var target = document.getElementById("setup-details");
-        if (arrow && target) {
-          arrow.onclick = function () { target.scrollIntoView({ behavior: "smooth", block: "start" }); };
-        }
-      }
-      /* ---------- report shell (city iframe owns its own loading) ---------- */
-      // The report page (full-width city hero + detail sections below) is mounted ONCE. The city iframe
-      // shows its OWN in-canvas loading state while it scans, then fades into the rendered report — one
-      // surface, no separate loading page, no reload. The parent only fills the detail sections on /report.
-      function mountReportShell() {
-        setCityMode(true);
-        app.className = "";
-        app.innerHTML =
-          '<section class="cityHero"><div class="cityShell">' +
-            '<iframe title="AI Coding City" src="/city/echo-ai-city-only.html?setup=1&nonce=' + encodeURIComponent(nonce) + '"></iframe>' +
-            '<button id="details-arrow" class="cityArrow hidden" aria-label="Show detailed report">&#8595;</button>' +
-          '</div></section>' +
-          '<div id="setup-details" class="detailsWrap"></div>';
-        bindDetailsArrow();
-        reportMounted = true;
-      }
-      function renderLoading() {
-        if (!reportMounted || !document.getElementById("setup-details")) mountReportShell();
-        setCityMode(true);
-        setHead("Turn history into memory", "Reading");
-      }
-      /* ---------- forensic report (pic 1/2) ---------- */
-      function histogram(hours) {
-        var list = Array.isArray(hours) ? hours : [];
-        var max = Math.max.apply(null, [1].concat(list));
-        var bars = list.map(function (v, h) {
-          var height = Math.max(2, Math.round((v / max) * 100));
-          return '<span class="histoBar' + (NIGHT_HOURS[h] ? ' night' : '') + '" style="height:' + height + '%" title="' + h + ':00 — ' + number(v) + ' prompts"></span>';
-        }).join("");
-        return '<div class="histo">' + bars + '</div><div class="histoAxis"><span>12a</span><span>6a</span><span>12p</span><span>6p</span><span>11p</span></div>';
-      }
-      function rereadRows(files) {
-        return (files || []).slice(0, 6).map(function (f) {
-          var meta = esc(f.repo) + ' · ' + number(f.sessionsTouched) + ' sessions · ' + number(f.daysTouched) + ' days' + (f.nightReads ? ' · ' + number(f.nightReads) + ' at night' : '');
-          var tag = f.everChanged ? '' : '<span class="tag">never changed</span>';
-          return '<div class="row2"><div><b>' + esc(f.file) + '</b>' + tag + '<small>' + meta + '</small></div><strong>' + number(f.totalReads) + '&times;</strong></div>';
-        }).join("");
-      }
-      function repoRows(repos) {
-        return (repos || []).slice(0, 5).map(function (r) {
-          var meta = number(r.sessions) + ' sessions · ' + number(r.activeAttentionDays) + ' active days · ' + (r.dailyFocusHours || 0) + 'h/day · ' + big(r.tokens) + ' tokens';
-          return '<div class="row2 repoRow"><div><b style="font-family:var(--echo-font-brand);font-size:18px">' + esc(r.name) + '</b><small>' + esc(meta) + '</small></div><strong style="color:var(--echo-ink-primary)">' + (r.attentionHours || 0) + 'h</strong></div>';
-        }).join("");
-      }
-      function costSplit(cost) {
-        var total = cost.total || 1;
-        function seg(cls, v) { return '<span class="' + cls + '" style="width:' + Math.max(0, (v / total) * 100) + '%"></span>'; }
-        var byModel = cost.byModel || {};
-        var rows = Object.keys(byModel).map(function (k) { return [k, byModel[k]]; })
-          .sort(function (a, b) { return b[1].total - a[1].total; })
-          .map(function (e) { return '<div class="modelRow"><b>' + esc(e[0]) + '</b><span>' + big(e[1].total) + ' tok</span><strong>' + money(e[1].cost) + '</strong></div>'; })
-          .join("");
-        return '<div class="segBar">' + seg("seg-output", cost.outputCost) + seg("seg-cold", cost.coldInputCost) + seg("seg-cw", cost.cacheWriteCost) + seg("seg-cr", cost.cacheReadCost) + '</div>' +
-          '<div class="costLegend"><span>output ' + money(cost.outputCost) + '</span><span>cold input ' + money(cost.coldInputCost) + '</span><span>cache write ' + money(cost.cacheWriteCost) + '</span><span>cache read ' + money(cost.cacheReadCost) + '</span></div>' +
-          '<div style="margin-top:14px">' + rows + '</div>';
-      }
-      /* ---------- workspace readout dashboard (Part 2) ---------- */
-      var RDO_NIGHT = { 22: 1, 23: 1, 0: 1, 1: 1, 2: 1, 3: 1 };
-      var RDO_PIE = ["#1a3a8f", "#4ecdc4", "#c7372f", "#7a86c2", "#d29a3f", "#7d9a6d", "#cf6f4e"]; // major-repo colors; "#b3aea0" (taupe) is reserved for "Others" only
-      var rdoReduce = !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-      function rdoDec(v) { return typeof v === "number" && isFinite(v) ? (Math.round(v * 10) / 10) : "-"; }
-      function rdoFmt(v, k) { if (k === "pct") return number(v) + "%"; if (k === "hours") return number(v) + "h"; if (k === "money") return money(v); if (k === "big") return big(v); return number(v); }
-      function rdoHourLabel(h) { var x = h % 24, ap = x < 12 ? "am" : "pm", hr = x % 12; if (hr === 0) hr = 12; return hr + ap; }
-      function rdoHisto(hours) {
-        var list = Array.isArray(hours) ? hours : [], n = list.length || 1, max = Math.max.apply(null, [1].concat(list));
-        var bars = list.map(function (v, h) {
-          var ht = Math.max(3, Math.round((v / max) * 100)), hour = Math.round(h * (24 / n));
-          return '<div class="bar' + (RDO_NIGHT[hour] ? ' night' : '') + '" style="height:' + ht + '%;--bd:' + (300 + h * 14) + 'ms" data-tip="' + rdoHourLabel(hour) + ' &middot; ' + number(v) + ' prompts"></div>';
-        }).join("");
-        return '<div class="figbox"><div class="rdo-histo">' + bars + '</div><div class="rdo-axis"><span>12am</span><span>6am</span><span>12pm</span><span>6pm</span><span>11pm</span></div>' +
-          '<div class="rdo-legend"><span><i style="background:var(--echo-ink-primary)"></i>daytime</span><span><i style="background:var(--echo-night)"></i>late night (10pm&ndash;4am)</span></div><div class="histo-tip"></div></div>';
-      }
-      function rdoTerritory(repos) {
-        var list = (repos || []).slice().sort(function (a, b) { return (b.attentionHours || 0) - (a.attentionHours || 0); });
-        if (!list.length) return '<div class="terr"><div class="donut"></div><div></div></div>';
-        var total = list.reduce(function (t, r) { return t + (r.attentionHours || 0); }, 0) || 1;
-        var maxH = Math.max.apply(null, [1].concat(list.map(function (r) { return r.attentionHours || 0; })));
-        var threshold = total * 0.05; // repos over 5% shown individually; the rest combine into "Others"
-        var major = list.filter(function (r) { return (r.attentionHours || 0) > threshold; });
-        var minor = list.filter(function (r) { return (r.attentionHours || 0) <= threshold; });
-        var minorH = minor.reduce(function (t, r) { return t + (r.attentionHours || 0); }, 0);
-        var slices = major.map(function (r, i) { return { i: i, name: r.name, hours: (r.attentionHours || 0), col: RDO_PIE[i % RDO_PIE.length] }; });
-        if (minorH > 0) slices.push({ i: major.length, name: "Others (" + number(minor.length) + (minor.length === 1 ? " repo)" : " repos)"), hours: minorH, col: "#b3aea0" });
-        var c0 = 0;
-        var segs = slices.map(function (sl) {
-          var pct = sl.hours / total * 100;
-          var seg = '<circle class="seg" data-i="' + sl.i + '" data-name="' + esc(sl.name) + '" data-pct="' + Math.round(pct) + '%" cx="21" cy="21" r="15.915" fill="none" stroke="' + sl.col + '" stroke-width="6" stroke-dasharray="' + pct.toFixed(2) + ' ' + (100 - pct).toFixed(2) + '" stroke-dashoffset="' + (25 - c0).toFixed(2) + '"></circle>';
-          c0 += pct; return seg;
-        }).join("");
-        var donut = '<div class="donut"><svg viewBox="0 0 42 42" class="donutSvg">' + segs + '</svg>' +
-          '<div class="center"><div><b>' + number(list.length) + '</b><span>repos</span></div></div><div class="donut-tip"></div></div>';
-        var rows = slices.map(function (sl) {
-          var pct = Math.round(sl.hours / total * 100), w = Math.round(sl.hours / maxH * 100);
-          return '<div class="rrow" data-i="' + sl.i + '" data-name="' + esc(sl.name) + '" data-pct="' + pct + '%"><span class="nm" style="color:' + sl.col + '">' + esc(sl.name) + '</span><span class="vl">' + rdoDec(sl.hours) + 'h &middot; ' + pct + '%</span>' +
-            '<span class="rbar"><i style="width:' + w + '%;background:' + sl.col + '"></i></span></div>';
-        }).join("");
-        return '<div class="terr">' + donut + '<div>' + rows + '</div></div>';
-      }
-      function rdoTokenStack(ip) {
-        ip = Math.max(0, Math.min(100, ip || 0)); var op = 100 - ip;
-        return '<div class="stack"><div class="seg" style="width:' + ip + '%;background:var(--echo-ink-primary);color:#fff">' + ip + '% in</div><div class="seg" style="width:' + op + '%;background:var(--echo-ink-accent);color:#0c3b37">' + op + '%</div></div>' +
-          '<div class="rdo-legend"><span><i style="background:var(--echo-ink-primary)"></i>context loaded in</span><span><i style="background:var(--echo-ink-accent)"></i>answers written out</span></div>';
-      }
-      function rdoCostStack(c) {
-        var t = c.total || 1; function s(col, v) { return '<div class="seg" style="width:' + Math.max(0, (v / t) * 100) + '%;background:' + col + '"></div>'; }
-        return '<div class="stack">' + s("var(--echo-ink-seal)", c.cacheReadCost) + s("var(--echo-ink-mute)", c.coldInputCost) + s("var(--echo-night)", c.cacheWriteCost) + s("var(--echo-ink-accent)", c.outputCost) + '</div>' +
-          '<div class="rdo-legend"><span><i style="background:var(--echo-ink-seal)"></i>cache read ' + money(c.cacheReadCost) + '</span><span><i style="background:var(--echo-ink-mute)"></i>cold input ' + money(c.coldInputCost) + '</span>' +
-          '<span><i style="background:var(--echo-night)"></i>cache write ' + money(c.cacheWriteCost) + '</span><span><i style="background:var(--echo-ink-accent)"></i>output ' + money(c.outputCost) + '</span></div>';
-      }
-      function rdoModelRows(byModel) {
-        return Object.keys(byModel || {}).map(function (k) { return [k, byModel[k]]; }).sort(function (a, b) { return b[1].cost - a[1].cost; })
-          .map(function (e) { return '<div class="mrow2"><b>' + esc(e[0]) + '</b><span>' + big(e[1].total) + ' tok</span><strong>' + money(e[1].cost) + '</strong></div>'; }).join("");
-      }
-      function rdoEvidence(files) {
-        var list = files || [];
-        function rowHtml(f) {
-          var tag = f.everChanged ? '' : '<span class="rdo-tag">never changed</span>';
-          return '<div class="ex-row"><div><div class="ex-file">' + esc(f.file) + '</div><div class="ex-meta">' + esc(f.repo) + ' &middot; ' + number(f.sessionsTouched) + ' sessions &middot; ' + number(f.daysTouched) + ' days' + tag + '</div></div><div class="ex-reads">' + number(f.totalReads) + '&times;</div></div>';
-        }
-        var firstN = 5;
-        var head = list.slice(0, firstN).map(rowHtml).join("");
-        var rest = list.slice(firstN).map(rowHtml).join("");
-        var moreBtn = list.length > firstN ? '<button class="moreBtn" data-rdo-toggle>Show all ' + number(list.length) + ' files &darr;</button>' : '';
-        return head + '<div class="collapse"><div class="collapse-inner">' + rest + '</div></div>' + moreBtn;
-      }
-      function rdoNotes() {
-        var r = report || {}, s = r.scale || {}, c = r.cost || {}, cl = r.cleanliness || {}, rh = r.rhythm || {}, uwh = r.userWorkingHours || {};
-        return {
-          "repeated-reads": { k: "Cleanliness", t: "Repeated reads", b: '<p>' + number(cl.staleReadSharePct) + '% of file reads reopened a file already seen <b>unchanged</b> &mdash; ' + number(cl.staleRereads) + ' stale rereads across ' + number(s.repoCount) + ' repos.</p><p>Every reopen re-pays the cost of loading that file, though nothing changed. It is the biggest source of avoidable token spend.</p><div class="echo"><b>What Echo does:</b> remembers each file so your agent recalls it instead of reading it again.</div>' },
-          "agent-attention": { k: "Activity", t: "Agent attention", b: '<p>' + number(uwh.userAttentionHours) + ' hours of active agent work across the scan. ' + rdoDec(uwh.averageDailyAttentionHours) + 'h/day average, peaking at ' + rdoDec(uwh.maxDailyAttentionHours) + 'h.</p>' },
-          "tokens-moved": { k: "Scale", t: "Tokens moved", b: '<p>' + big(s.totalTokens) + ' tokens read and written. ' + number(s.inputPct) + '% was <b>input</b> &mdash; context fed in, not output generated.</p>' },
-          "api-value": { k: "Cost", t: "API-equivalent", b: '<p>' + money(c.total) + ' at API list prices &mdash; a measure of scale, not a charge. Subscriptions were not billed this.</p>' },
-          "when-you-work": { k: "Rhythm", t: "When you work", b: '<p>Prompts by hour of day. The soft-indigo bars are late-night hours (10pm&ndash;4am); ' + number(rh.lateNightShare) + '% of your prompts land there.</p>' },
-          "time-by-repo": { k: "Focus", t: "Where your time goes", b: '<p>Agent attention hours split by repository &mdash; where your coding actually happened.</p>' },
-          "cost-went": { k: "Cost", t: "Where the tokens & cost go", b: '<p>Most volume is input &mdash; reloading context each turn. In cost, <b>cache read</b> + <b>cold input</b> are re-fed context.</p><div class="echo">That re-fed-context tax shrinks when agents recall instead of re-read.</div>' },
-          "rereads": { k: "Cleanliness", t: "Most re-read files", b: '<p>Files your agents kept reopening after seeing them unchanged. A <code>never changed</code> tag means many reads, zero edits.</p>' }
-        };
-      }
-      function rdoOpenNote(key) {
-        var d = rdoNotes()[key]; if (!d) return; var dlg = document.getElementById("echo-note"); if (!dlg) return;
-        document.getElementById("echo-note-k").textContent = d.k;
-        document.getElementById("echo-note-t").textContent = d.t;
-        document.getElementById("echo-note-b").innerHTML = d.b;
-        if (dlg.showModal) dlg.showModal(); else dlg.setAttribute("open", "");
-      }
-      function rdoCountUp(el) {
-        var target = parseFloat(el.getAttribute("data-count")), kind = el.getAttribute("data-fmt");
-        if (rdoReduce || !isFinite(target)) { el.textContent = rdoFmt(target, kind); return; }
-        var dur = 950, start = null;
-        function tick(now) { if (start === null) start = now; var t = Math.min(1, (now - start) / dur), e = 1 - Math.pow(1 - t, 3); el.textContent = rdoFmt(target * e, kind); if (t < 1) requestAnimationFrame(tick); else el.textContent = rdoFmt(target, kind); }
-        requestAnimationFrame(tick);
-      }
-      function rdoKpi(cls, value, kind, label, sub, key) {
-        return '<div class="rdo-card rdo-kpi ' + cls + '"><button class="rdo-help" data-info="' + key + '">?</button>' +
-          '<div class="num" data-count="' + value + '" data-fmt="' + kind + '">' + rdoFmt(value, kind) + '</div>' +
-          '<p class="clab" style="margin-top:11px">' + esc(label) + '</p><div class="csub">' + sub + '</div></div>';
-      }
-      function rdoWire() {
-        var root = document.getElementById("setup-details"); if (!root) return;
-        Array.prototype.forEach.call(root.querySelectorAll("[data-count]"), function (el, i) { setTimeout(function () { rdoCountUp(el); }, rdoReduce ? 0 : 260 + i * 60); });
-        Array.prototype.forEach.call(root.querySelectorAll(".rdo-help"), function (el) { el.onclick = function () { rdoOpenNote(el.getAttribute("data-info")); }; });
-        var dlg = document.getElementById("echo-note");
-        if (dlg) { var cl = dlg.querySelector(".nclose"); if (cl) cl.onclick = function () { dlg.close(); }; dlg.onclick = function (e) { if (e.target === dlg) dlg.close(); }; }
-        Array.prototype.forEach.call(root.querySelectorAll("[data-rdo-toggle]"), function (mb) {
-          var box = mb.previousElementSibling, tx = mb.textContent;
-          if (!box || !box.classList.contains("collapse")) return;
-          mb.onclick = function () { var o = !box.classList.contains("open"); box.classList.toggle("open", o); mb.textContent = o ? "Show less ↑" : tx; };
-        });
-        var donut = root.querySelector(".terr .donut");
-        if (donut) {
-          var segEls = donut.querySelectorAll(".seg");
-          var tip = donut.querySelector(".donut-tip");
-          function placeTip(e) { var rc = donut.getBoundingClientRect(); if (tip) { tip.style.left = (e.clientX - rc.left) + "px"; tip.style.top = (e.clientY - rc.top) + "px"; } }
-          Array.prototype.forEach.call(segEls, function (s) {
-            s.addEventListener("mouseenter", function (e) {
-              donut.classList.add("hovering");
-              Array.prototype.forEach.call(segEls, function (x) { x.classList.toggle("on", x === s); });
-              if (tip) { tip.textContent = s.getAttribute("data-name") + " · " + s.getAttribute("data-pct"); tip.classList.add("show"); placeTip(e); }
-            });
-            s.addEventListener("mousemove", placeTip);
-            s.addEventListener("mouseleave", function () {
-              donut.classList.remove("hovering");
-              s.classList.remove("on");
-              if (tip) tip.classList.remove("show");
-            });
-          });
-        }
-        var histo = root.querySelector(".rdo-histo");
-        if (histo) {
-          var figbox = histo.closest(".figbox");
-          var htip = figbox ? figbox.querySelector(".histo-tip") : null;
-          function placeHTip(e) { if (!figbox || !htip) return; var rc = figbox.getBoundingClientRect(); htip.style.left = (e.clientX - rc.left) + "px"; htip.style.top = (e.clientY - rc.top) + "px"; }
-          Array.prototype.forEach.call(histo.querySelectorAll(".bar"), function (b) {
-            b.addEventListener("mouseenter", function (e) { if (htip) { htip.textContent = b.getAttribute("data-tip"); htip.classList.add("show"); placeHTip(e); } });
-            b.addEventListener("mousemove", placeHTip);
-            b.addEventListener("mouseleave", function () { if (htip) htip.classList.remove("show"); });
-          });
-        }
-      }
-      function renderForensicReport(message) {
-        var r = report;
-        if (!r) { showReport(); return; }
-        if (!reportMounted || !document.getElementById("setup-details")) mountReportShell();
-        setCityMode(true);
-        var s = r.scale || {}, c = r.cost || {}, mu = r.modelUsage || {}, uwh = r.userWorkingHours || {}, rh = r.rhythm || {}, cl = r.cleanliness || {}, rf = r.rereadForensics || {}, aw = r.avoidableWait || {}, cf = r.counterfactual || {};
-        var night = rf.nightExample;
-        setHead("AI Coding City", connected ? "Signed in" : "Local");
-        // The city iframe is already mounted by the shell and shows its own loading; just reveal the
-        // details arrow and fill the sections, so the city never reloads from loading to full report.
-        var dArrow = document.getElementById("details-arrow");
-        if (dArrow) dArrow.classList.remove("hidden");
-        var files = rf.topFiles || [], repos = r.repos || [];
-        var topRepoHours = repos.reduce(function (t, x) { return t + (x.attentionHours || 0); }, 0);
-        var weeks = (new Date(r.scanEndDate) - new Date(r.scanStartDate)) / (7 * 86400000);
-        if (!isFinite(weeks) || weeks < 1) weeks = 1;
-        var sharePct = cl.staleReadSharePct || 0;
-        var savedCost = Math.round((c.total / weeks) * (sharePct / 100));
-        var savedTokens = (s.totalTokens / weeks) * (sharePct / 100);
-        var weeklyRereads = Math.round((cl.staleRereads || 0) / weeks);
-        var targetShare = 10;
-        document.getElementById("setup-details").innerHTML =
-          '<div class="echo-rdo">' +
-            (message ? '<div class="notice" style="margin-bottom:18px">' + esc(message) + '</div>' : '') +
-            '<div class="rdo-head rise" style="--d:0ms">' +
-              '<p class="rdo-kicker">EchoMem &middot; Local Workspace Scan</p>' +
-              '<h2 class="rdo-h1">Where your agents spent their attention</h2>' +
-              '<p class="rdo-lead">A local scan of ' + number(s.sessionCount) + ' coding sessions across ' + number(s.repoCount) + ' repositories. Most of the load wasn&#39;t new thinking &mdash; it was <b>reloading context</b> your agents had already seen.</p>' +
-              '<div class="rdo-meta"><span class="rdo-chip"><span class="live"></span>Filed locally</span><span class="rdo-chip"><b>' + number(s.sessionCount) + '</b> sessions</span><span class="rdo-chip"><b>' + number(s.repoCount) + '</b> repos</span><span class="rdo-chip">' + esc(r.scanStartDate) + ' &ndash; ' + esc(r.scanEndDate) + '</span></div>' +
-            '</div>' +
-            '<div class="rdo-kpis">' +
-              '<div class="rise" style="--d:60ms">' + rdoKpi("hero", cl.staleReadSharePct, "pct", "repeated reads", number(cl.staleRereads) + ' stale rereads', "repeated-reads") + '</div>' +
-              '<div class="rise" style="--d:110ms">' + rdoKpi("", uwh.userAttentionHours, "hours", "agent attention", rdoDec(uwh.averageDailyAttentionHours) + 'h/day avg', "agent-attention") + '</div>' +
-              '<div class="rise" style="--d:160ms">' + rdoKpi("", s.totalTokens, "big", "tokens moved", number(s.inputPct) + '% input', "tokens-moved") + '</div>' +
-              '<div class="rise" style="--d:210ms">' + rdoKpi("", c.total, "money", "API-equivalent", 'list price, not billed', "api-value") + '</div>' +
-            '</div>' +
-            '<div class="rdo-grid">' +
-              '<div class="rdo-card rise" style="--d:260ms"><button class="rdo-help" data-info="when-you-work">?</button><p class="clab">When you work</p><div class="csub"><b>' + number(rh.lateNightShare) + '%</b> after 10pm &middot; <b>' + rdoDec(uwh.averageDailyAttentionHours) + 'h</b> avg active day</div>' + rdoHisto(rh.hourHistogram) + '</div>' +
-              '<div class="rdo-card rise" style="--d:310ms"><button class="rdo-help" data-info="cost-went">?</button><p class="clab">Where the tokens &amp; cost go</p><div class="csub"><b>' + number(s.inputPct) + '%</b> input &middot; <b>' + money(c.total) + '</b> API-equivalent</div>' +
-                '<div class="ledgerCols"><div><div class="lblrow">Tokens &mdash; in vs. out</div>' + rdoTokenStack(s.inputPct) + '</div><div><div class="lblrow">Cost by token type</div>' + rdoCostStack(c) + '</div></div>' +
-                '<div class="collapse"><div class="collapse-inner" style="padding-top:6px">' + rdoModelRows(c.byModel) + '</div></div>' +
-                '<button class="moreBtn" data-rdo-toggle>Break down by model &darr;</button>' +
-              '</div>' +
-              '<div class="rdo-card rise" style="--d:360ms"><button class="rdo-help" data-info="time-by-repo">?</button><p class="clab">Where your time goes</p><div class="csub"><b>' + rdoDec(topRepoHours) + 'h</b> across ' + number(repos.length) + ' repos</div>' + rdoTerritory(repos) + '</div>' +
-              '<div class="rdo-card rise" style="--d:410ms"><button class="rdo-help" data-info="rereads">?</button><p class="clab">Most re-read files</p><div class="csub">top 5 of <b>' + number(files.length) + '</b> by total reads</div>' + rdoEvidence(files) + '</div>' +
-            '</div>' +
-            '<section class="outcome rise" style="--d:460ms">' +
-              '<div class="oc-copy">' +
-                '<p class="rdo-kicker">What changes next week</p>' +
-                '<h2>Echo remembers, so your agents stop re-reading.</h2>' +
-                '<p class="rdo-lead" data-signin-help>Right now ' + number(sharePct) + '% of reads are repeats. As Echo fills in, your agents <b>recall</b> what they have already seen instead of reloading it &mdash; and it compounds every session.</p>' +
-                '<div class="targetbar"><div class="tb-track"><div class="tb-fill" style="width:' + sharePct + '%">' + number(sharePct) + '% repeats today</div><div class="tb-goal" style="left:' + targetShare + '%"></div></div><div class="tb-flag" style="left:' + targetShare + '%">target &le; ' + targetShare + '%</div></div>' +
-              '</div>' +
-              '<div class="oc-targets">' +
-                '<p class="ot-title">Next week&rsquo;s target</p>' +
-                '<p class="ot-note">What Echo saves you in a week, once it recalls instead of re-reading:</p>' +
-                '<div class="ot-row"><div class="otk"><span class="k">Cost saved</span><span class="ks">API list-price value</span></div><span class="v" data-count="' + savedCost + '" data-fmt="money">' + money(savedCost) + '</span></div>' +
-                '<div class="ot-row"><div class="otk"><span class="k">Tokens saved</span><span class="ks">context not reloaded</span></div><span class="v" data-count="' + savedTokens + '" data-fmt="big">' + big(savedTokens) + '</span></div>' +
-                '<div class="ot-row"><div class="otk"><span class="k">Re-reads avoided</span><span class="ks">unchanged files reopened</span></div><span class="v" data-count="' + weeklyRereads + '" data-fmt="int">' + number(weeklyRereads) + '</span></div>' +
-                '<button class="rdo-cta" data-connect-echo>' + (connected ? "Continue &rarr;" : "Connect Echo &rarr;") + '</button>' +
-              '</div>' +
-            '</section>' +
-            '<div class="rdo-foot rise" style="--d:520ms">' +
-              '<span>Compiled locally from <code>~/.codex/sessions</code> and <code>~/.claude/projects</code> &middot; API-equivalent list pricing, not a subscription bill.</span>' +
-              '<span class="priv">No transcripts leave this machine.</span>' +
-            '</div>' +
-          '</div>';
-        rdoWire();
-        bindConnect();
-        bindDetailsArrow();
-      }
-      /* ---------- dashboard (post-auth extraction) ---------- */
-      function statusStrip(title, detail, kind) {
-        return '<div class="status-strip ' + esc(kind || "") + '"><span class="dot"></span><div><strong>' + esc(title) + '</strong><p>' + esc(detail) + '</p></div></div>';
-      }
-      function renderBridgeIssue(error) {
-        setCityMode(false);
-        setHead("Local bridge issue", "Retrying");
-        app.className = "loading-panel";
-        app.innerHTML =
-          '<div style="padding:24px"><h2>Still waiting for the local bridge</h2>' +
-          '<p class="helper">Keep the terminal running. If it already exited or printed an error, close this tab and run echomem-mcp setup again.</p>' +
-          (error ? '<div class="warning" style="margin-top:16px;margin-bottom:0">' + esc(error) + '</div>' : '') + '</div>';
-      }
-      function renderLogoutPending() {
-        setCityMode(false);
-        setHead("Signing out locally", "Working");
-        app.className = "loading-panel";
-        app.innerHTML = '<div style="padding:24px"><h2>Clearing this device token</h2><p class="helper">If the bridge is scanning local files, this can take a few seconds to answer.</p></div>';
-      }
-      function renderLogoutIssue(error) {
-        setCityMode(false);
-        setHead("Sign out did not finish", "Needs attention");
-        app.className = "loading-panel";
-        app.innerHTML =
-          '<div style="padding:24px"><h2>The local bridge did not answer</h2>' +
-          '<p class="helper">Keep the terminal open and retry. If the command exited, close this tab and run setup again.</p>' +
-          (error ? '<div class="warning" style="margin-top:16px;margin-bottom:0">' + esc(error) + '</div>' : '') +
-          '<div class="actions"><button id="logout" class="secondary">Retry sign out</button></div></div>';
-        var lo = document.getElementById("logout"); if (lo) lo.onclick = localLogout;
-      }
-      async function waitForConnection() {
-        if (connectionPollStarted) return;
-        connectionPollStarted = true;
-        try {
-          for (;;) {
-            if (decisionMade) return;
-            try {
-              var cfg = await getJson("/config");
-              authUrl = cfg.authUrl || authUrl;
-              if (cfg.connected) { connected = true; closeAuthWindow(); await waitForStats(); return; }
-            } catch (_) {}
-            await sleep(900);
-          }
-        } finally { connectionPollStarted = false; }
-      }
-      function startConnectionPoll() { void waitForConnection(); }
-      async function waitForStats() {
-        if (statsPollStarted) return;
-        statsPollStarted = true;
-        // Use the same one-reading-line stage as the partial scan state. This avoids a jarring
-        // old setup shell between device approval and the ready decision.
-        renderDashboard();
-        try {
-          var started = Date.now();
-          var lastError = "";
-          for (;;) {
-            if (decisionMade) return;
-            try {
-              var res = await fetchWithTimeout("/stats?nonce=" + encodeURIComponent(nonce), { credentials: "omit" }, 3000);
-              if (res.status === 200) {
-                stats = await res.json();
-                if (decisionMade) return;
-                renderDashboard();
-                if (stats && stats.partial) { await sleep(1200); continue; }
-                return;
-              }
-              if (res.status !== 202) throw new Error(await res.text() || ("HTTP " + res.status));
-            } catch (e) {
-              lastError = e && e.message ? e.message : String(e);
-              if (!stats && Date.now() - started > 25000) renderBridgeIssue(lastError);
-              if (Date.now() - started > 20000) { statsSlow = true; if (stats) renderDashboard(); }
-            }
-            await sleep(statsSlow ? 1500 : 500);
-          }
-        } finally { statsPollStarted = false; }
-      }
-      // The plate slot: ONLY the WebGL clay city (echo-extraction-plate.html). It self-fetches /report
-      // (your repos) and polls /progress (extraction state), growing as memories are created. The old SVG
-      // fallback board was removed — it was bleeding through behind the transparent canvas (the double board).
-      function plateBlock() {
-        return '<div class="exPlate"><div class="plateStack">' +
-          '<iframe class="plateGl" title="Extraction plate" src="/city/echo-extraction-plate.html?nonce=' + encodeURIComponent(nonce) + '"></iframe>' +
-          '</div></div>';
-      }
-      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";
-        var discovery = stats && stats.discovery ? stats.discovery : {};
-        var isPartial = !!(stats && stats.partial);
-        var localScanReady = !isPartial || discovery.phase === "exact" || discovery.phase === "full";
-        var eta = migratable && migratable.eta ? migratable.eta : {};
-        var skippedActive = typeof migratable.skippedActive === "number" ? migratable.skippedActive : 0;
-        var sessions = stats && stats.sessions ? stats.sessions : {};
-        // The "quick" phase counts only this device's local ledger; it does not know what the account
-        // already imported elsewhere, so it over-counts (e.g. 10). The count is only trustworthy after the
-        // account check (phase "account"/"exact"/"full"), which corrects it (e.g. 3). Until then we show a
-        // "counting" state with no number, so the user never sees the count jump down.
-        var pendingTrusted = hasPendingCount && !!discovery.phase && discovery.phase !== "quick";
-        var knownDone = pendingTrusted && pending === 0;
-        var canExtract = pendingTrusted && pending > 0;
-        var pendN = hasPendingCount ? pending : 0;
-        var etaLabel = eta.estimatedLabel || migratable.estimatedLabel || "a couple of minutes";
-        var pendingCodex = typeof migratable.pendingCodex === "number" ? migratable.pendingCodex : null;
-        var pendingClaudeCode = typeof migratable.pendingClaudeCode === "number" ? migratable.pendingClaudeCode : null;
-        setHead("Turn coding history into memory", pendingTrusted ? (knownDone ? "Done" : "Ready") : (localScanReady ? "Ready" : "Scanning"));
-        var headline = !pendingTrusted
-          ? "Counting your new conversations…"
-          : (knownDone ? "You are all caught up." : "Echo found " + number(pendN) + " new coding session" + (pendN === 1 ? "" : "s") + ".");
-        var 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.");
-        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.
-        var live = dashMounted && document.getElementById("exHeadline");
-        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="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>' +
-                '</div>' +
-                '<p class="ctaMeta" id="exEta"></p>' +
-              '</div>' +
-              '<div class="readyFoot">' +
-                '<details class="readyExplain" id="readyExplain"></details>' +
-              '</div>' +
-            '</section>';
-          document.getElementById("migrate").onclick = startMigrate;
-          dashMounted = true;
-        }
-        document.getElementById("exBanner").innerHTML =
-          (statsSlow && !stats ? '<div class="warning">Local counts are taking longer than expected. You can still ask the bridge to extract anything unprocessed.</div>' : '') +
-          (error ? '<div class="error">' + esc(error) + '</div>' : '');
-        document.getElementById("exHeadline").textContent = headline;
-        document.getElementById("exSub").textContent = sub;
-        var codexN = pendingTrusted && pendingCodex !== null ? pendingCodex : (sessions.codex || 0);
-        var claudeN = pendingTrusted && pendingClaudeCode !== null ? pendingClaudeCode : (sessions.claudeCode || 0);
-        var alreadyN = Math.max(0, (sessions.total || 0) - pendN);
-        // Proof strip: one quiet line of evidence that the scan is real. Hidden when there is nothing to show.
-        var srcIcon = function (id, fallback) {
-          return '<span class="pfIcon"><img src="/agent-icons/' + id + '.png" alt="" onerror="this.style.display=&quot;none&quot;;this.nextElementSibling.style.display=&quot;grid&quot;;" /><span class="pfFallback">' + fallback + '</span></span>';
-        };
-        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.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. Finished work is saved as it goes.</p><div class="miniBar"><i></i></div></div>';
-        try {
-          var started = await postJson("/migrate", {});
-          extractMounted = false;
-          renderProgress(Object.assign({ status: "starting", completed: 0, failed: 0, extracted: 0 }, started));
-          await pollProgress();
-        } catch (e) {
-          decisionMade = false;
-          renderDashboard(routeError(e && e.message));
-        }
-      }
-      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";
-        var total = progress.total || progress.jobCount || 0;
-        var completed = progress.completed || 0;
-        var failed = progress.failed || 0;
-        var extracted = progress.extracted || 0;
-        var pct = total > 0 ? Math.round((completed / total) * 100) : (done ? 100 : 0);
-        var preparing = (status === "starting" || status === "preparing");
-        app.className = "";
-        // Mount the shell ONCE so the WebGL plate iframe survives every poll (it self-polls /progress);
-        // each poll only rebuilds the text column.
-        if (!extractMounted) {
-          app.innerHTML =
-            '<section class="exHero"><div class="exCopy" id="exText"></div>' +
-            plateBlock() +
-            '</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 =
-            '<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 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 =
-          '<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", {});
-          renderSkipped();
-        } catch (e) {
-          decisionMade = false;
-          renderDashboard(e && e.message);
-        }
-      }
-      async function localLogout() {
-        if (decisionMade) return;
-        decisionMade = true;
-        renderLogoutPending();
-        try {
-          await postJson("/logout", {}, 12000);
-          stats = null;
-          statsSlow = false;
-          connected = false;
-          decisionMade = false;
-          renderForensicReport("Signed out locally. Connect EchoMem again to extract.");
-        } catch (e) {
-          decisionMade = false;
-          renderLogoutIssue(e && e.message ? e.message : String(e));
-        }
-      }
-      /* ---------- scan-first poll for the forensic report ---------- */
-      async function showReport() {
-        if (reportPollStarted) return;
-        reportPollStarted = true;
-        if (!report) renderLoading();
-        try {
-          var fails = 0;
-          for (;;) {
-            if (decisionMade) return;
-            try {
-              var res = await fetchWithTimeout("/report?nonce=" + encodeURIComponent(nonce), { credentials: "omit" }, 12000);
-              if (res.status === 200) { report = await res.json(); renderForensicReport(); return; }
-              if (res.status === 202) {
-                fails = 0;
-                renderLoading();
-              } else {
-                throw new Error(await res.text() || ("HTTP " + res.status));
-              }
-            } catch (e) {
-              // Only a RUN of consecutive failures is a real bridge problem. A long scan that keeps
-              // answering 202 must never trip this (that was the old false "Local bridge issue").
-              fails++;
-              if (!report && fails >= 8) renderBridgeIssue(e && e.message ? e.message : String(e));
-            }
-            await sleep(700);
-          }
-        } finally { reportPollStarted = false; }
-      }
-      window.addEventListener("message", function (event) {
-        if (event.origin !== location.origin) return;
-        var data = event.data || {};
-        if (data.type === "echomem:connected" && data.nonce === nonce) {
-          connected = true;
-          closeAuthWindow();
-          void waitForStats();
-        } else if (data.type === "echomem:connect-click") {
-          onConnectClick();
-        }
-      });
-      async function init() {
-        if (!nonce) throw new Error("Missing setup nonce. Re-run echomem-mcp setup.");
-        if (params.get("connected") === "1") {
-          connected = true;
-          if (notifyOpenerConnected()) {
-            // Popup flow: hand the main tab back control, then this popup closes.
-            setHead("EchoMem connected", "Done");
-            app.className = "notice";
-            app.innerHTML = '<h2 style="color:#203820">This device is connected</h2><p style="margin-top:10px">Returning to the local setup page...</p>';
-            // Fallback: if window.close() was blocked (auth opened as a tab, or the browser refused),
-            // this window would otherwise hang on "Returning..." forever. After a beat, take over here
-            // so the user always lands on the dashboard instead of a dead page.
-            setTimeout(function () { if (!window.closed) void waitForStats(); }, 1500);
-          } else {
-            // Same-tab fallback (popup was blocked): go straight to the extraction dashboard.
-            void waitForStats();
-          }
-          return;
-        }
-        // Learn the auth URL + connection state, but don't block the local scan on it.
-        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();
-      }
-      // 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>
-</html>`;
+import { renderSetupPageDocument } from "./setup-page/document.js";
+import { renderSetupPreviewBootstrap } from "./setup-preview.js";
+/**
+ * Setup page entry point. The implementation is split by product phase under ./setup-page/:
+ * core utilities, local report, post-auth extraction, and lifecycle polling.
+ */
+export function renderSetupPage(options = {}) {
+    const previewState = options.previewState ?? null;
+    const startupScript = previewState
+        ? renderSetupPreviewBootstrap(previewState)
+        : `
+        init().catch(function () {
+          renderReportIssue("SETUP_INITIALIZATION_FAILED", "The local setup page could not start. Close this tab and run echomem-mcp init again.");
+        });`;
+    return renderSetupPageDocument({ previewState, startupScript });
 }