@echomem/mcp 1.4.7 → 1.4.9

package/dist/city/echo-ai-city-only.template.html

@@ -38,7 +38,9 @@
   .v7-head{right:56px;top:48px;width:410px;text-align:right;}
   .v7-eyebrow{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9aa0aa;}
   .v7-title{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-top:8px;}
-  .v7-personaName{font-size:64px;font-weight:800;letter-spacing:-.035em;line-height:.9;margin-top:8px;text-transform:lowercase;}
+  /* Persona is identity flavor (a badge), not the page headline — one display-size element per
+     screen, and that's "Here's what you built." */
+  .v7-personaName{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:.92;margin-top:8px;text-transform:lowercase;}
   .v7-rank{margin-top:12px;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8d929c;}
   .v7-combo{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
   .v7-combo .ct{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#3a3c43;border:1px solid var(--line);
@@ -59,6 +61,9 @@
   .v7-stat .v{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1;}
   .v7-stat .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9296a0;margin-top:4px;}
   .v7-band{left:90px;right:90px;bottom:250px;text-align:center;}
+  /* Echo delivers the verdict: the mascot makes the band a character speaking, not a floating stat. */
+  .v7-echo{width:56px;height:56px;object-fit:contain;margin:10px auto 2px;display:block;
+    filter:drop-shadow(0 12px 20px rgba(26,58,143,.22));}
   .v7-band .eyebrow{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#a4a7af;}
   .v7-band .bignum{font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:.9;margin-top:10px;color:var(--red);
     min-height:64px;transition:opacity .52s ease,transform .52s ease;}
@@ -160,6 +165,11 @@
     box-shadow:0 16px 36px rgba(20,24,40,.18);cursor:pointer;}
   .setup-connect:hover{background:#223f9b;}
   body.setup-mode{background:#fff;}
+  /* figure-mode: embedded as an inline article figure — city only, chrome hidden, paper shows through */
+  body.figure-mode{background:transparent;}
+  body.figure-mode .share-card{background:transparent;box-shadow:none;}
+  body.figure-mode .fr-panel,body.figure-mode .corner-ribbon,body.figure-mode .city-toggle,
+  body.figure-mode .city-split,body.figure-mode .city-timeline,body.figure-mode .v7-band{display:none!important;}
   body.setup-mode .share-card{width:100vw;height:100vh;border-radius:0;box-shadow:none;overflow:hidden;}
   body.setup-mode .compute-cost,
   body.setup-mode .tool-split,
@@ -227,7 +237,7 @@
   body.setup-mode .counterfactual,
   body.setup-mode .setup-connect{display:none;}
   body.setup-mode .v7-persona{left:clamp(48px,5vw,86px);top:clamp(42px,5vh,72px);width:min(360px,32vw);}
-  body.setup-mode .v7-personaName{font-size:clamp(54px,5.3vw,86px);}
+  body.setup-mode .v7-personaName{font-size:clamp(38px,3.4vw,54px);}
   body.setup-mode .v7-head{right:clamp(48px,5vw,86px);top:clamp(42px,5vh,72px);width:min(520px,38vw);}
   body.setup-mode .v7-head .v7-eyebrow{font-size:clamp(10px,.72vw,12px);}
   body.setup-mode .v7-title{font-size:clamp(28px,2.1vw,40px);}
@@ -235,7 +245,10 @@
   body.setup-mode .v7-stat .v{font-size:clamp(20px,1.45vw,28px);}
   body.setup-mode .v7-stat .k{font-size:clamp(9px,.72vw,11px);}
   body.setup-mode .v7-band{left:clamp(48px,5vw,86px);right:auto;bottom:clamp(82px,8vh,130px);
-    width:min(570px,38vw);text-align:left;}
+    width:min(640px,42vw);text-align:left;display:grid;grid-template-columns:72px minmax(0,1fr);
+    column-gap:16px;align-items:start;}
+  body.setup-mode .v7-echo{width:72px;height:72px;margin:2px 0 0;}
+  body.setup-mode .v7-bandCopy{min-width:0;}
   body.setup-mode .v7-band .eyebrow{display:none;}
   body.setup-mode .v7-band .bignum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
     margin-top:0;min-height:0;line-height:.96;}
@@ -250,13 +263,146 @@
   body.setup-mode .v7-ctaWrap .micro{max-width:430px;margin-left:auto;}
   body.setup-mode .v7-foot{left:clamp(48px,5vw,86px);right:clamp(48px,5vw,86px);}
   @media (max-height:820px){
-    body.setup-mode .v7-personaName{font-size:clamp(44px,6vh,62px);}
+    body.setup-mode .v7-personaName{font-size:clamp(32px,4.4vh,46px);}
     body.setup-mode .v7-title{font-size:clamp(30px,5vh,44px);}
     body.setup-mode .v7-band{bottom:58px;width:min(500px,40vw);}
     body.setup-mode .v7-ctaWrap{bottom:58px;width:min(390px,32vw);}
     body.setup-mode .v7-foot{display:none;}
   }
 
+  /* setup split report: city on the left, field report on the right */
+  /* Old full-screen setup overlay reserves 620px for the right-hand text panel.
+     figure-mode embeds (city as its own column) must NOT reserve anything: the
+     canvas fills the iframe, matching the full-width render buffer (VIZ_W). */
+  body.setup-mode:not(.figure-mode) #repo-visualizer{right:auto;width:calc(100vw - min(40vw,620px));}
+  body.with-echo .fr-metric .fr-v{color:#2a8f7d;}
+  body.with-echo .fr-pull{border-left-color:#2a8f7d;}
+  .city-toggle{display:none;transition:opacity .4s ease;}
+  body.setup-mode .city-toggle{display:inline-flex;position:absolute;z-index:9;
+    left:calc((100vw - min(40vw,620px)) / 2);top:clamp(92px,12.5vh,104px);transform:translateX(-50%);gap:2px;
+    background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:4px;
+    box-shadow:0 8px 22px rgba(20,24,40,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
+  .ct-thumb{position:absolute;left:0;top:0;z-index:0;background:#1a3a8f;border-radius:999px;
+    transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),height .32s ease;}
+  .city-toggle button{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
+    font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
+    color:#80838c;padding:7px 14px;border-radius:999px;transition:color .25s ease;}
+  .city-toggle button.on{color:#fff;}
+  .city-toggle button:not(.on):hover{color:#1b1c1f;}
+  .corner-ribbon{display:none;}
+  body.setup-mode .corner-ribbon{display:block;position:absolute;top:0;left:0;width:180px;height:180px;
+    overflow:hidden;z-index:12;pointer-events:none;}
+  .corner-ribbon>span{position:absolute;left:-70px;top:51px;width:280px;transform:rotate(-45deg);
+    background:#1a3a8f;color:#fff;text-align:center;padding:7px 0;line-height:1.2;
+    box-shadow:0 6px 16px rgba(20,24,40,.18);}
+  .corner-ribbon .l1{display:block;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
+  .corner-ribbon .l2{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
+    text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:2px;}
+  .city-split{display:none;transition:opacity .4s ease;}
+  body.setup-mode .city-split{display:block;position:absolute;z-index:9;
+    left:clamp(28px,3vw,48px);bottom:clamp(72px,9vh,104px);width:min(260px,24vw);}
+  .city-split .cs-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#eceef2;
+    box-shadow:inset 0 0 0 1px rgba(20,24,40,.05);}
+  .city-split .cs-bar i{height:100%;display:block;transition:width .4s cubic-bezier(.4,0,.2,1);}
+  .city-split .cs-claude{background:#d97757;}
+  .city-split .cs-codex{background:#10a37f;}
+  .city-split .cs-legend{display:flex;justify-content:space-between;margin-top:9px;
+    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#80838c;}
+  .city-split .cs-l{display:flex;align-items:center;gap:6px;}
+  .city-split .cs-l i{width:8px;height:8px;border-radius:50%;}
+  .city-split .cs-l.claude i{background:#d97757;}
+  .city-split .cs-l.codex i{background:#10a37f;}
+  .city-split .cs-l b{color:#1b1c1f;font-weight:800;margin-left:2px;}
+  .city-timeline{display:none;transition:opacity .4s ease;}
+  body.setup-mode .city-timeline{display:block;position:absolute;z-index:9;
+    left:clamp(28px,3vw,48px);bottom:clamp(20px,2.6vh,32px);
+    width:calc(100vw - min(40vw,620px) - 2 * clamp(28px,3vw,48px));touch-action:none;user-select:none;}
+  .city-timeline .tl-track{position:relative;height:18px;cursor:pointer;}
+  .city-timeline .tl-line{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
+    height:3px;border-radius:3px;background:#d8dbe1;}
+  .city-timeline .tl-progress{position:absolute;left:0;top:50%;transform:translateY(-50%);
+    width:100%;height:3px;border-radius:3px;background:#1a3a8f;pointer-events:none;}
+  .city-timeline .tl-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;}
+  .city-timeline .tl-dot.start{left:0;background:#9aa0aa;}
+  .city-timeline .tl-dot.end{left:100%;background:#1a3a8f;}
+  .city-timeline .tl-dot.end::after{content:'';position:absolute;inset:-4px;border-radius:50%;
+    border:2px solid rgba(26,58,143,.4);animation:tlPulse 2.2s ease-out infinite;}
+  @keyframes tlPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.85);opacity:0}}
+  .city-timeline .tl-handle{position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);
+    width:16px;height:16px;border-radius:50%;background:#1a3a8f;border:3px solid #fff;
+    box-shadow:0 3px 10px rgba(20,24,40,.28);z-index:3;cursor:grab;}
+  .city-timeline.dragging .tl-handle{cursor:grabbing;box-shadow:0 3px 14px rgba(26,58,143,.42);}
+  .city-timeline .tl-selected{position:absolute;left:100%;top:-17px;transform:translateX(-50%);
+    font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
+    color:#1a3a8f;white-space:nowrap;pointer-events:none;}
+  .city-timeline .tl-labels{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;
+    font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#80838c;}
+  .city-timeline .tl-labels .tl-span{color:#1b1c1f;font-weight:800;}
+  body.setup-mode .v7-persona,
+  body.setup-mode .v7-head,
+  body.setup-mode .v7-band,
+  body.setup-mode .v7-ctaWrap,
+  body.setup-mode .v7-foot{display:none;}
+
+  .fr-panel{display:none;transition:opacity .6s ease;}
+  body.setup-mode .fr-panel{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:8;
+    right:0;top:0;width:min(40vw,620px);height:100vh;border-left:1px solid var(--line);background:#fff;
+    padding:clamp(44px,6vh,90px) clamp(36px,3.2vw,60px);}
+  .fr{width:min(54ch,100%);flex:1;display:flex;flex-direction:column;justify-content:space-between;
+    gap:clamp(22px,3.4vh,46px);}
+  .fr-dateline{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
+    font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9aa0aa;}
+  .fr-dateline .fr-rule{flex:1;height:1px;background:var(--line);}
+  .fr-intro{display:flex;flex-direction:column;position:relative;
+    padding-bottom:clamp(20px,3vh,38px);border-bottom:1px solid var(--line);}
+  .fr-avatar{width:clamp(92px,9.5vw,128px);height:auto;display:block;margin-bottom:10px;}
+  .fr-greet{font-size:clamp(34px,3.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:.95;
+    text-transform:lowercase;}
+  .fr-greet .fr-name{color:#1a3a8f;}
+  .fr-greet .fr-dot{color:var(--amber);}
+  .fr-rank{margin-top:13px;font-family:var(--mono);font-size:clamp(12px,1vw,14px);font-weight:600;
+    letter-spacing:.04em;color:#9296a0;}
+  .fr-rank b{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#3a3c43;}
+  .fr-readBtn{position:absolute;z-index:9;top:clamp(2px,0.5vw,8px);right:0;
+    display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
+    cursor:pointer;font-family:var(--mono);font-size:14px;font-weight:800;line-height:1;
+    color:#5a5e66;background:#fafafb;border:1px solid var(--line);border-radius:50%;
+    transition:background .15s ease,border-color .15s ease,color .15s ease;}
+  .fr-readBtn:hover,.fr-readBtn:focus-visible{background:#fff;border-color:#d7dade;color:var(--ink);outline:none;}
+  .fr-readBtn[aria-expanded="true"]{background:#1a3a8f;border-color:#1a3a8f;color:#fff;}
+  .fr-personaHover{position:absolute;z-index:32;top:clamp(42px,4.6vw,56px);right:0;
+    width:min(340px,100%);max-height:min(72vh,540px);overflow:auto;
+    background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:16px;padding:15px 17px;
+    box-shadow:0 18px 46px rgba(20,24,40,.18);opacity:0;visibility:hidden;transform:translateY(-4px);
+    transition:opacity .14s ease,transform .14s ease;pointer-events:none;}
+  .fr-personaHover.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
+  .fr-personaHover .ph-line{font-size:13.5px;line-height:1.5;color:#42444b;margin-bottom:9px;}
+  .fr-personaHover .ph-line:last-of-type{margin-bottom:0;}
+  .fr-personaHover .ph-line b{color:var(--ink);font-weight:800;}
+  .fr-personaHover .ph-meta{font-size:12px;line-height:1.45;color:#73767e;margin-top:9px;
+    padding-top:9px;border-top:1px solid var(--line);}
+  .fr-personaHover .ph-meta b{color:var(--blue);font-weight:700;}
+  .fr-mid{display:flex;flex-direction:column;gap:clamp(20px,3vh,40px);}
+  .fr-lede{font-size:clamp(16px,1.1vw,18px);line-height:1.68;color:#3c3e45;}
+  .fr-lede mark{background:linear-gradient(transparent 58%, rgba(240,168,63,.42) 58%);
+    color:var(--ink);font-weight:800;padding:0 1px;}
+  .fr-pull{padding-left:20px;border-left:3px solid var(--red);}
+  .fr-metric{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
+    transition:opacity .5s ease,transform .5s ease;}
+  .fr-metric .fr-v{font-size:clamp(32px,2.8vw,44px);font-weight:800;color:var(--red);letter-spacing:-.03em;line-height:.9;}
+  .fr-metric .fr-l{font-size:clamp(16px,1.2vw,19px);font-weight:700;color:var(--ink);letter-spacing:-.01em;}
+  .fr-say{font-size:clamp(14px,.9vw,15px);color:#56585f;margin-top:9px;line-height:1.5;max-width:46ch;
+    min-height:4.6em;transition:opacity .5s ease,transform .5s ease;}
+  .fr-say b{color:var(--ink);font-weight:700;}
+  .fr-metric.is-swapping,.fr-say.is-swapping{opacity:0;transform:translateY(6px);}
+  .fr-signoff{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
+  .fr-cta{display:inline-flex;align-items:center;gap:10px;background:#1a3a8f;color:#fff;border:0;
+    border-radius:13px;font-family:var(--mono);font-size:clamp(13px,1vw,15px);font-weight:800;
+    letter-spacing:.08em;text-transform:uppercase;padding:16px 34px;
+    box-shadow:0 18px 40px rgba(26,58,143,.30);cursor:pointer;transition:background .18s ease,transform .18s ease;}
+  .fr-cta:hover{background:#223f9b;transform:translateY(-2px);}
+  .fr-micro{font-size:12.5px;color:#8b8d94;line-height:1.45;max-width:24ch;}
+
   /* ===== in-canvas scan loader (setup mode) — loading lives inside the report, matches its type ===== */
   .scan-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
     text-align:center;gap:14px;padding:24px;opacity:1;transition:opacity .5s ease;pointer-events:none;}
@@ -270,10 +416,14 @@
   /* during scan: hide the city + the value-bearing chrome (so demo numbers never flash), then fade in together */
   #repo-visualizer{transition:opacity .7s ease;}
   body.scanning #repo-visualizer{opacity:0;}
-  .setup-header,.dirty-context,.counterfactual,.setup-connect,.v7-z{transition:opacity .6s ease;}
-  body.scanning .setup-header,body.scanning .dirty-context,body.scanning .counterfactual,body.scanning .setup-connect,body.scanning .v7-z{opacity:0;pointer-events:none;}
+  .setup-header,.dirty-context,.counterfactual,.setup-connect,.v7-z,.city-toggle,.city-split,.city-timeline,.fr-panel{transition:opacity .6s ease;}
+  body.scanning .setup-header,body.scanning .dirty-context,body.scanning .counterfactual,body.scanning .setup-connect,body.scanning .v7-z,body.scanning .city-toggle,body.scanning .city-split,body.scanning .city-timeline,body.scanning .fr-panel{opacity:0;pointer-events:none;}
   body.setup-mode:not(.scanning) #repo-visualizer,
-  body.setup-mode:not(.scanning) .v7-z{opacity:1;}
+  body.setup-mode:not(.scanning) .v7-z,
+  body.setup-mode:not(.scanning) .city-toggle,
+  body.setup-mode:not(.scanning) .city-split,
+  body.setup-mode:not(.scanning) .city-timeline,
+  body.setup-mode:not(.scanning) .fr-panel{opacity:1;}
 
   /* hover-to-preview repo detail (interaction overlay, not part of the static export) */
   #repo-detail{position:fixed;display:none;z-index:50;width:286px;background:rgba(255,255,255,.96);
@@ -300,10 +450,38 @@
 </style>
 </head>
 <body>
-<script>try{const p=new URLSearchParams(location.search);if(p.get('setup')==='1'){document.body.classList.add('setup-mode');if(p.get('nonce'))document.body.classList.add('scanning');}}catch(e){}</script>
+<script>try{const p=new URLSearchParams(location.search);if(p.get('setup')==='1'){document.body.classList.add('setup-mode','scanning');}if(p.get('figure')==='1'){document.body.classList.add('figure-mode');window.addEventListener('message',function(e){if(e.origin!==location.origin)return;var d=e.data||{};if(d.type==='echomem:city-figure')document.body.classList.toggle('figure-mode',!d.expanded);});}}catch(e){}</script>
 	<div class="share-card">
 	  <canvas id="repo-visualizer"></canvas>
 
+	  <div class="city-toggle" id="city-toggle" role="group" aria-label="City metric">
+	    <span class="ct-thumb" aria-hidden="true"></span>
+	    <button type="button" data-metric="time" class="on">Time</button>
+	    <button type="button" data-metric="tokens">Tokens</button>
+	    <button type="button" data-metric="cost">API $</button>
+	  </div>
+
+	  <div class="corner-ribbon" aria-hidden="true"><span><span class="l1">Local Scan</span><span class="l2">100% private &amp; safe</span></span></div>
+
+	  <div class="city-split" id="city-split">
+	    <div class="cs-bar"><i class="cs-claude" style="width:{{claudePct}}%"></i><i class="cs-codex" style="width:{{codexPct}}%"></i></div>
+	    <div class="cs-legend">
+	      <span class="cs-l claude"><i></i>Claude <b>{{claudePct}}%</b></span>
+	      <span class="cs-l codex"><i></i>Codex <b>{{codexPct}}%</b></span>
+	    </div>
+	  </div>
+
+	  <div class="city-timeline" id="city-timeline">
+	    <div class="tl-track">
+	      <span class="tl-line"></span>
+	      <span class="tl-progress"></span>
+	      <span class="tl-dot start"></span><span class="tl-dot end"></span>
+	      <span class="tl-selected">Today</span>
+	      <span class="tl-handle" role="slider" tabindex="0" aria-label="Coding history date" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"></span>
+	    </div>
+	    <div class="tl-labels"><span class="tl-start">Dec 2024</span><span class="tl-span">AI coding history</span><span class="tl-end">Today</span></div>
+	  </div>
+
 	  <div class="v7-z v7-persona" tabindex="0" aria-describedby="v7-persona-hover">
 	    <div class="v7-eyebrow">AI Coding City</div>
 	    <div class="v7-personaName">{{personaPrimary}}</div>
@@ -323,24 +501,50 @@
 	  </div>
 	  <div class="v7-z v7-band">
 	    <div class="eyebrow">What we found</div>
-	    <div class="bignum" id="v7-metric"><span id="v7-metric-value">{{dirtyPct}}%</span><span id="v7-metric-label">repeated reads</span><button class="v7-infoBtn" id="v7-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
-	    <div class="say" id="v7-metric-say">Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city.</div>
+	    <img class="v7-echo" src="echo-face-cutout.png" alt="" />
+	    <div class="v7-bandCopy">
+	    <div class="bignum" id="v7-metric"><span id="v7-metric-value">{{dirtyPct}}%</span><span id="v7-metric-label">wasteful context</span><button class="v7-infoBtn" id="v7-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
+	    <div class="say" id="v7-metric-say">The golden-standard model separates useful context from wasteful context, then attributes the waste to concrete problem types across your workspace.</div>
+	    </div>
 	  </div>
 	  <div class="v7-z v7-ctaWrap">
 	    <div class="pre">Ready when you are</div>
 	    <button class="v7-cta" id="v7-connect" type="button">Connect Echo →</button>
-	    <div class="micro">Clears the dirty context, so agents stop relearning your workspace.</div>
 	  </div>
 	  <div class="v7-z v7-foot"><span>Generated by Echo · No transcripts shown</span><span>Local scan · Share-safe city mode</span></div>
+
+	  <div class="fr-panel">
+	    <div class="fr">
+	      <div class="fr-dateline"><span>Echo field report</span><span class="fr-rule"></span></div>
+	      <div class="fr-intro">
+	        <button class="fr-readBtn" id="fr-read-btn" type="button" aria-expanded="false" aria-controls="fr-persona-hover" aria-label="Your full coding-personality read">?</button>
+	        <div class="fr-personaHover" id="fr-persona-hover" role="region" aria-label="Your full coding-personality read"></div>
+	        <img class="fr-avatar" id="fr-avatar" src="./personality_stickers/bossy.png" alt="" />
+	        <h1 class="fr-greet">hey, <span class="fr-name" id="fr-name">{{personaPrimary}}</span><span class="fr-dot">.</span></h1>
+	        <div class="fr-rank" id="fr-rank">You are <b>{{personaRankRhythm}}</b></div>
+	      </div>
+	      <div class="fr-mid">
+	        <p class="fr-lede">Across <mark id="fr-repos">13 repos</mark> you poured in <mark id="fr-hours">{{attentionHours}} hours</mark> and <mark id="fr-tokens">7.49B tokens</mark> — about <mark id="fr-cost">{{computeCost}}</mark> of API-equivalent compute. That whole skyline on the left? You built it.</p>
+	        <div class="fr-pull">
+	          <div class="fr-metric" id="fr-metric"><span class="fr-v" id="fr-metric-value">{{dirtyPct}}%</span><span class="fr-l" id="fr-metric-label">wasteful context</span></div>
+	          <div class="fr-say" id="fr-metric-say">The golden-standard model separates useful context from wasteful context, then attributes the waste to concrete problem types.</div>
+	        </div>
+	      </div>
+	      <div class="fr-signoff">
+	        <button class="fr-cta" id="fr-connect" type="button">Connect Echo →</button>
+	      </div>
+	    </div>
+	  </div>
+
 	  <div class="v7-infoSheet" id="v7-info-sheet" aria-hidden="true">
 	    <div class="v7-infoCard" role="dialog" aria-modal="true" aria-labelledby="v7-info-title">
 	      <button class="v7-infoClose" id="v7-info-close" type="button" aria-label="Close">×</button>
 	      <div class="v7-infoTitle" id="v7-info-title">How we read your city</div>
 	      <div class="v7-infoSub">Every number comes from your local Codex + Claude Code logs. Nothing here is an estimate of you — it's a readout of the tools.</div>
-	      <div class="v7-infoRow"><div class="sk">Dirty context</div><div class="sv">Agents re-read files they've already seen — unchanged code, the same rules, stale maps — every new session. Nothing new is learned; it's re-remembering. That build-up is <b>context rot</b>.</div></div>
-	      <div class="v7-infoRow"><div class="sk">The {{dirtyPct}}%</div><div class="sv">Share of your agents' total reads that were <b>repeats</b> of context already loaded earlier, across your sessions.</div></div>
+	      <div class="v7-infoRow"><div class="sk">Wasteful context</div><div class="sv">The headline comes from the golden-standard workspace rollup: waste tokens divided by official input tokens.</div></div>
+	      <div class="v7-infoRow"><div class="sk">Useful context</div><div class="sv">Useful context is the portion worth keeping: active task state, product facts, current files, and required overhead.</div></div>
 	      <div class="v7-infoRow"><div class="sk">{{computeCost}}</div><div class="sv"><b>API-equivalent</b> — what this usage would cost at list API rates. Most of it is cache / input reads, so it's a measure of <b>volume, not a bill you paid</b>.</div></div>
-	      <div class="v7-infoRow"><div class="sk">{{cfDaysEarlier}} days</div><div class="sv">With the repeated context cleared, the same workspace state is reached <b>~{{cfDaysEarlier}} days sooner</b> — derived from your attention hours vs. the re-read overhead.</div></div>
+	      <div class="v7-infoRow"><div class="sk">Evidence</div><div class="sv">Repeated reads are still evidence, but the top-line waste number now includes duplicate context, re-finding, dead work, and residue.</div></div>
 	      <div class="v7-infoNote">Computed locally · no transcripts leave your machine.</div>
 	    </div>
 	  </div>
@@ -394,8 +598,8 @@
 
   <!-- dirty context -->
   <div class="card-zone dirty-context">
-    <div class="pct" id="setup-metric"><span id="setup-metric-value">{{dirtyPct}}%</span><span class="word" id="setup-metric-label">repeated reads</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
-    <div class="desc" id="setup-metric-say">Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot.</div>
+    <div class="pct" id="setup-metric"><span id="setup-metric-value">{{dirtyPct}}%</span><span class="word" id="setup-metric-label">wasteful context</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button></div>
+    <div class="desc" id="setup-metric-say">The golden-standard model separates useful context from wasteful context across your workspace.</div>
   </div>
 
   <!-- counterfactual: one line — 18 days saved -->
@@ -424,6 +628,30 @@
 
 <div id="repo-detail"></div>
 
+<script>
+// The poster shares this artifact, but setup must never expose poster labels while it is waiting or
+// failed. Scrub personalized defaults after the DOM exists; the validated report repopulates them.
+try{
+  if(new URLSearchParams(location.search).get('setup')==='1'){
+    const pendingText={
+      'v7-repo-count':'—','v7-attention':'—','v7-cost':'—','v7-total-tokens':'—',
+      'v7-metric-value':'—','fr-name':'—','fr-rank':'Waiting for local scan',
+      'fr-repos':'— repos','fr-hours':'— hours','fr-tokens':'— tokens','fr-cost':'—',
+      'fr-metric-value':'—','setup-metric-value':'—'
+    };
+    for(const [id,value] of Object.entries(pendingText)){ const el=document.getElementById(id); if(el) el.textContent=value; }
+    document.querySelectorAll('.v7-personaName,.setup-persona-name,.persona-card .name').forEach((el)=>{ el.textContent='—'; });
+    document.querySelectorAll('.v7-rank,.setup-rank,.persona-card .rankrhythm').forEach((el)=>{ el.textContent='Waiting for local scan'; });
+    document.querySelectorAll('.v7-combo,.setup-combo,.persona-card .combo,.setup-split,#tool-split').forEach((el)=>{ el.replaceChildren(); });
+    document.querySelectorAll('.setup-stats .amount,.compute-cost .amount').forEach((el)=>{ el.textContent='—'; });
+    document.querySelectorAll('.setup-stats .detail,.compute-cost .detail').forEach((el)=>{ el.textContent='Waiting for validated local data.'; });
+    document.querySelectorAll('#v7-metric-say,#fr-metric-say,#setup-metric-say').forEach((el)=>{ el.textContent='Waiting for a validated local report.'; });
+    const frAvatar=document.getElementById('fr-avatar'); if(frAvatar) frAvatar.removeAttribute('src');
+    document.querySelectorAll('.share-card > :not(#scan-loading)').forEach((el)=>{ el.setAttribute('aria-hidden','true'); el.setAttribute('data-setup-pending-hidden',''); });
+  }
+}catch(_){}
+</script>
+
 <script type="importmap">
 { "imports": { "three": "./vendor/three.module.min.js" } }
 </script>
@@ -434,11 +662,41 @@ import { OrbitControls } from './vendor/OrbitControls.js';
 
 const pageParams=new URLSearchParams(location.search);
 const setupMode=pageParams.get('setup')==='1';
+const previewMode=pageParams.get('preview')==='1';
+const figureModeEmbed=pageParams.get('figure')==='1';
 if(setupMode) document.body.classList.add('setup-mode');
-let VIZ_W=setupMode ? window.innerWidth : 920;
-let VIZ_H=setupMode ? window.innerHeight : 1180; // repo-visualizer canvas = full card in share mode, viewport in setup mode
-const TRAY_COL = 0xece5d3;   // warm IVORY — not pure white, not cool grey; separates from the white card
+// figure-mode embeds the city as its own column beside the text: the canvas owns the whole
+// iframe. The 620px text reservation only applies to the old full-screen setup overlay.
+let VIZ_W=setupMode ? (figureModeEmbed ? window.innerWidth : Math.round(window.innerWidth - Math.min(window.innerWidth*0.4, 620))) : 920;
+let VIZ_H=setupMode ? window.innerHeight : 1180; // repo-visualizer canvas = full card in share mode, left city in setup mode
+const TRAY_COL = 0xd9d5ca;   // worn warm concrete; keeps the corrupted city distinct from the white report panel
 const TOOL = { codex:0x10a37f, claude:0xd97757 };   // ONLY two cube colours — exact OpenAI / Claude chip-icon hexes
+const CORRUPTION = 0.82;
+const corruptionFloaters=[];
+const repairGroups=[];
+const repairPieces=[];
+const corruptionFades=[];
+const corruptionSurfaces=[];
+const buildingMaterials=[];
+
+function hash01(value, salt=0){
+  let h=2166136261 ^ salt;
+  for(let i=0;i<String(value).length;i++){
+    h^=String(value).charCodeAt(i);
+    h=Math.imul(h,16777619);
+  }
+  return (h>>>0)/4294967295;
+}
+function corruptionProfile(o){
+  const pressure=Math.min(1, Math.max(0.28, Math.log10(Math.max(10, o.tokens||10))/10));
+  return {
+    amount:CORRUPTION*(0.58+pressure*0.42),
+    leanX:(hash01(o.name,11)-0.5)*0.25,
+    leanZ:(hash01(o.name,19)-0.5)*0.25,
+    phase:hash01(o.name,29)*Math.PI*2,
+    side:hash01(o.name,37)<0.5?-1:1,
+  };
+}
 
 // ── volume normalization ─────────────────────────────────────────────────────
 // Each cube's VOLUME is proportional to that repo's token usage, measured in a fixed unit so
@@ -453,6 +711,8 @@ const LABEL_MIN_BASE  = 24;     // cubes with footprint ≥ this get a top-face
 const fmtTok=(n)=> n>=1e9?`${(n/1e9).toFixed(2)}B` : n>=1e6?`${Math.round(n/1e6)}M` : `${Math.round(n/1e3)}K`;
 const money=(n)=>'$'+Math.round(Number(n)||0).toLocaleString('en-US');
 const oneDec=(n)=>Number(n||0).toFixed(1).replace(/\.0$/,'');
+const REPEATED_READS_SAY="Your agents re-read unchanged files, re-run the same searches, and check git again before they can move. Echo turns those repeated proofs into recall.";
+const GOLDEN_WASTE_SAY="The golden-standard model labels every analyzed input token as useful or wasteful, then attributes waste to duplicate context, re-finding, dead work, and residue across Codex and Claude Code.";
 const monthDay=(iso)=>{
   const d=new Date(iso);
   if(Number.isNaN(d.getTime())) return {month:'JUN', day:'2', label:'Jun 2'};
@@ -470,9 +730,71 @@ function providerSplit(report){
   const codexPct=Math.round(codex/total*100);
   return {codexPct, claudePct:100-codexPct, dominant:codex>=claude?'codex':'claude'};
 }
+function clampScore(value){
+  return Math.max(0, Math.min(100, Math.round(Number(value)||0)));
+}
+function reportContextMetrics(report){
+  const metrics=report?.contextWindow?.metrics;
+  return metrics && typeof metrics==='object' ? metrics : null;
+}
+function contextHealthScore(report){
+  const metrics=reportContextMetrics(report);
+  const direct=Number(metrics?.healthScorePct);
+  if(Number.isFinite(direct)) return clampScore(direct);
+  const stale=Number(report?.cleanliness?.staleReadSharePct);
+  return report && Number.isFinite(stale) ? clampScore(100-stale) : null;
+}
+function pctText(value){
+  const n=Number(value);
+  return Number.isFinite(n) ? `${Math.round(Math.max(0, Math.min(1, n))*100)}%` : null;
+}
+function contextPressureText(metrics){
+  const projected=pctText(metrics?.projectedNextFullnessPct);
+  if(projected) return `${projected} projected window pressure`;
+  const fullness=pctText(metrics?.contextFullnessPct);
+  if(fullness) return `${fullness} window full`;
+  const latest=Number(metrics?.latestInputTokens);
+  return Number.isFinite(latest) && latest>0 ? `${fmtTok(latest)} latest input` : 'current window pressure';
+}
+function contextNoiseText(report){
+  const metrics=reportContextMetrics(report);
+  const noise=pctText(metrics?.noisePct);
+  if(noise) return `${noise} resident noise`;
+  const stale=Number(report?.cleanliness?.staleReadSharePct);
+  return Number.isFinite(stale) ? `${oneDec(stale)}% repeated-read signal` : 'resident noise';
+}
+function contextScoreSay(report){
+  const score=contextHealthScore(report);
+  const metrics=reportContextMetrics(report);
+  return `This is the same <b>${score}% context score</b> the HUD uses: ${contextNoiseText(report)} and ${contextPressureText(metrics)}, folded into one live setup readout.`;
+}
+function goldenReport(report){
+  const gs=report?.canonicalGoldenStandard || report?.goldenStandard;
+  return gs && typeof gs==='object' && !gs.error && gs.summary ? gs : null;
+}
+function goldenSummary(report){
+  return goldenReport(report)?.summary || null;
+}
+function goldenWastePct(report){
+  const pct=Number(goldenSummary(report)?.wastePct);
+  return Number.isFinite(pct) ? pct : Number(report?.cleanliness?.staleReadSharePct)||0;
+}
+function goldenUsefulPct(report){
+  const pct=Number(goldenSummary(report)?.usefulPct);
+  return Number.isFinite(pct) ? pct : Math.max(0, 100-goldenWastePct(report));
+}
+function goldenWasteSay(report){
+  const s=goldenSummary(report);
+  if(!s) return REPEATED_READS_SAY;
+  const p=report?.billedWasteProjection;
+  if(p && p.method==='canonical-window-share-over-provider-input'){
+    return `Across <b>${Number(s.sessionsAnalyzed||0).toLocaleString('en-US')} sessions</b>, the canonical windows found <b>${oneDec(s.wastePct)}% wasteful context</b>: a provider-billed projection of ${fmtTok(Number(p.projectedWasteTokens)||0)} waste tokens out of ${fmtTok(Number(p.billedInputTokens)||0)} input.`;
+  }
+  return `Across <b>${Number(s.sessionsAnalyzed||0).toLocaleString('en-US')} sessions</b>, the canonical windows found <b>${oneDec(s.wastePct)}% wasteful context</b>.`;
+}
 // ---- coding-persona engine (Phase 1: only signals the scan actually has — no commits / accept-all yet) ----
 const PERSONA_TRAITS={
-  loopy:{label:'loopy', blurb:"opened the same file 14 times and still doesn't know what's in it. it's not working, it's re-remembering. context rot undefeated — and the bill's yours. 🗿"},
+  loopy:{label:'loopy', blurb:"opened the same file 14 times and still had to prove it again. not a skill issue — the session forgot what it had already seen."},
   lusty:{label:'lusty', blurb:"burned a car payment in tokens for demos that'll never ship. zero regrets. Anthropic's about to send a thank-you card. 💸"},
   maxxy:{label:'maxxy', blurb:"Opus to rename a variable, Opus to fix a typo. the small models are right there — but you don't do small models, you do consequences."},
   tabby:{label:'tabby', blurb:"tabs everywhere, half-built features, breadth over depth. your brain is a browser with a memory leak. 🫠"},
@@ -504,7 +826,7 @@ function derivePersona(report){
   const turns=Math.max(1, Number(uwh.realUserTurns)||0);
   const autonomy=assistant/turns;                          // AI turns per human prompt → how hands-off you run
   const repoCount=Number(scale.repoCount)||repos.length;
-  const stale=Number(cl.staleReadSharePct)||0, spend=Number(cost.total)||0;
+  const stale=goldenWastePct(report), spend=Number(cost.total)||0;
   // Phase-2 git signal: commits landed vs building activity. Gated on commits>0 so a missing git pass can't false-fire ghosty.
   const commits=Number(scale.totalCommits)||0, attention=Number(uwh.userAttentionHours)||0;
   const activeDaysG=Number(uwh.activeAttentionDays)||0;
@@ -567,6 +889,8 @@ function renderV7PersonaHover(persona){
   host.innerHTML = line(persona.primary) + (persona.sides||[]).map(line).join('') +
     (persona.rank?`<div class="ph-meta"><b>${esc(persona.rank.label)}</b> · ${esc(persona.rank.blurb)}</div>`:'') +
     (persona.rhythm?`<div class="ph-meta"><b>${esc(persona.rhythm.label)}</b> · ${esc(persona.rhythm.blurb)}</div>`:'');
+  const frHost=document.getElementById('fr-persona-hover');
+  if(frHost) frHost.innerHTML=host.innerHTML;
 }
 function buildSetupRepos(report){
   const split=providerSplit(report);
@@ -598,6 +922,7 @@ function buildSetupRepos(report){
       sessions:Number(repo.sessions)||0,
       codexPct, claudePct:100-codexPct,
       pin:i<2,
+      daily:Array.isArray(repo.daily)?repo.daily:null,
     };
   });
 }
@@ -607,13 +932,17 @@ function applySetupReport(report){
   const persona=derivePersona(report);
   const cost=money(report?.cost?.total);
   const attention=oneDec(report?.userWorkingHours?.userAttentionHours);
-  const dirty=oneDec(report?.cleanliness?.staleReadSharePct);
+  const dirty=oneDec(goldenWastePct(report));
+  const metricValue=`${dirty}%`;
+  const metricLabel='wasteful context';
+  const metricSay=goldenWasteSay(report);
   const cf=report?.counterfactual || {};
   const reach=monthDay(cf.counterfactualDate);
   const instead=monthDay(report?.scanEndDate).label;
-  const days=Math.max(1, Math.round(Number(cf.daysGained)||0));
+  const days=Math.max(0, Math.round(Number(cf.daysGained)||0));
   document.querySelectorAll('.setup-persona-name,.persona-card .name,.v7-personaName').forEach((el)=>{ el.textContent=persona.primary.label; });
   document.querySelectorAll('.setup-rank,.persona-card .rankrhythm,.v7-rank').forEach((el)=>{ el.textContent=`${persona.rank.label} · ${persona.rhythm.label}`; });
+  const frRank=document.getElementById('fr-rank'); if(frRank) frRank.innerHTML=`You are <b>${persona.rank.label}</b> on <b>${persona.rhythm.label}</b>`;
   document.querySelectorAll('.setup-combo,.persona-card .combo,.v7-combo').forEach((el)=>{ el.innerHTML=persona.sides.map((s)=>`<span class="ct">${s.label}</span>`).join(''); });
   renderPersonaHover(persona);
   renderV7PersonaHover(persona);
@@ -624,45 +953,343 @@ function applySetupReport(report){
   const repoCount=Number(report?.scale?.repoCount) || (Array.isArray(report?.repos) ? report.repos.length : 0);
   const v7RepoCount=document.getElementById('v7-repo-count'); if(v7RepoCount && repoCount) v7RepoCount.textContent=String(repoCount);
   const v7Tokens=document.getElementById('v7-total-tokens'); if(v7Tokens) v7Tokens.textContent=fmtTok(Number(report?.scale?.totalTokens)||0);
-  const v7MetricValue=document.getElementById('v7-metric-value'); if(v7MetricValue) v7MetricValue.textContent=`${dirty}%`;
-  const v7MetricLabel=document.getElementById('v7-metric-label'); if(v7MetricLabel) v7MetricLabel.textContent='repeated reads';
+  const v7MetricValue=document.getElementById('v7-metric-value'); if(v7MetricValue) v7MetricValue.textContent=metricValue;
+  const v7MetricLabel=document.getElementById('v7-metric-label'); if(v7MetricLabel) v7MetricLabel.textContent=metricLabel;
   const v7MetricSay=document.getElementById('v7-metric-say');
-  if(v7MetricSay) v7MetricSay.innerHTML="Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city.";
+  if(v7MetricSay) v7MetricSay.innerHTML=metricSay;
+  const frName=document.getElementById('fr-name'); if(frName) frName.textContent=persona.primary.label;
+  const frAvatar=document.getElementById('fr-avatar');
+  if(frAvatar){
+    const key=String(persona.primary?.label||'').toLowerCase();
+    if(PERSONA_TRAITS[key]){ frAvatar.src=`./personality_stickers/${key}.png`; frAvatar.alt=`${key} avatar`; }
+  }
+  const frRepos=document.getElementById('fr-repos'); if(frRepos && repoCount) frRepos.textContent=`${repoCount} ${repoCount===1?'repo':'repos'}`;
+  const frHours=document.getElementById('fr-hours'); if(frHours) frHours.textContent=`${attention} hours`;
+  const frTokens=document.getElementById('fr-tokens'); if(frTokens) frTokens.textContent=`${fmtTok(Number(report?.scale?.totalTokens)||0)} tokens`;
+  const frCost=document.getElementById('fr-cost'); if(frCost) frCost.textContent=cost;
+  const frMetricValue=document.getElementById('fr-metric-value'); if(frMetricValue) frMetricValue.textContent=metricValue;
+  const frMetricLabel=document.getElementById('fr-metric-label'); if(frMetricLabel) frMetricLabel.textContent=metricLabel;
+  const frMetricSay=document.getElementById('fr-metric-say'); if(frMetricSay) frMetricSay.innerHTML=metricSay;
+  try{ window.parent?.postMessage({type:'echomem:city-fieldnote',
+    avatar:(frAvatar&&frAvatar.src)||'',
+    name:String(persona?.primary?.label||''),
+    rank:(document.getElementById('fr-rank')||{}).innerHTML||'',
+    lede:(document.querySelector('.fr-lede')||{}).innerHTML||'',
+    guide:{
+      current:{primary:String(persona?.primary?.label||''), rank:String(persona?.rank?.label||''), rhythm:String(persona?.rhythm?.label||'')},
+      traits:Object.values(PERSONA_TRAITS).map(({label,blurb})=>({label,blurb})),
+      ranks:Object.values(PERSONA_RANKS).map(({label,blurb})=>({label,blurb})),
+      rhythms:Object.values(PERSONA_RHYTHMS).map(({label,blurb})=>({label,blurb}))
+    }
+  }, location.origin); }catch(_){}
   const splitHtml=`<span>${split.codexPct}% Codex</span><span>${split.claudePct}% Claude</span>`;
   const setupSplit=document.querySelector('.setup-split'); if(setupSplit) setupSplit.innerHTML=splitHtml;
+  const csClaude=document.querySelector('#city-split .cs-claude'); if(csClaude) csClaude.style.width=`${split.claudePct}%`;
+  const csCodex=document.querySelector('#city-split .cs-codex'); if(csCodex) csCodex.style.width=`${split.codexPct}%`;
+  const csClB=document.querySelector('#city-split .cs-l.claude b'); if(csClB) csClB.textContent=`${split.claudePct}%`;
+  const csCdB=document.querySelector('#city-split .cs-l.codex b'); if(csCdB) csCdB.textContent=`${split.codexPct}%`;
+  const tlStartDate=new Date(report?.scanStartDate);
+  if(!Number.isNaN(tlStartDate.getTime())){
+    const tlStartEl=document.querySelector('#city-timeline .tl-start');
+    if(tlStartEl) tlStartEl.textContent=tlStartDate.toLocaleString('en-US',{month:'short', year:'numeric', timeZone:'UTC'});
+  }
+  const spanDays=daysBetween(report?.scanStartDate, report?.scanEndDate);
+  const spanLabel=spanDays>=60 ? `${Math.round(spanDays/30.44)} months with AI` : `${spanDays} day${spanDays===1?'':'s'} with AI`;
+  const tlSpanEl=document.querySelector('#city-timeline .tl-span'); if(tlSpanEl) tlSpanEl.textContent=spanLabel;
   const dirtyPct=document.querySelector('.dirty-context .pct');
-  if(dirtyPct) dirtyPct.innerHTML=`<span id="setup-metric-value">${dirty}%</span><span class="word" id="setup-metric-label">repeated reads</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button>`;
+  if(dirtyPct) dirtyPct.innerHTML=`<span id="setup-metric-value">${metricValue}</span><span class="word" id="setup-metric-label">${metricLabel}</span><button class="v7-infoBtn" id="setup-info-btn" type="button" aria-label="How we read your city" aria-expanded="false" aria-controls="v7-info-sheet">i</button>`;
   const dirtyDesc=document.querySelector('.dirty-context .desc');
-  if(dirtyDesc) dirtyDesc.id='setup-metric-say';
+  if(dirtyDesc){ dirtyDesc.id='setup-metric-say'; dirtyDesc.innerHTML=metricSay; }
   const monthEl=document.querySelector('.counterfactual text:first-of-type'); if(monthEl) monthEl.textContent=reach.month;
   const dayEl=document.querySelector('.counterfactual text:last-of-type'); if(dayEl) dayEl.textContent=reach.day;
   const cfHero=document.querySelector('.cf-hero'); if(cfHero) cfHero.innerHTML=`Echo saves you <b>${days} days</b>`;
   const cfSay=document.querySelector('.cf-say'); if(cfSay) cfSay.innerHTML=`You'd have reached today's workspace on <b>${reach.label}</b>, not ${instead}.`;
   signpostTokens=fmtTok(Number(report?.scale?.totalTokens)||0);
-  const inputPct=Number(report?.scale?.totalTokens) ? (Number(report.scale.totalInputTokens||0)/Number(report.scale.totalTokens)*100).toFixed(2) : '0.00';
-  signpostInputPct=`${inputPct}% INPUT`;
+  signpostHours=`${attention}h`;
+  signpostCost=cost;
+  const dirtyShare=Math.max(0, Number(dirty)||0)/100;
+  signpostWastedTime=`≈${Math.round((Number(attention)||0)*dirtyShare)}h WASTED`;
+  signpostWastedPct=`${Math.round(Number(dirty))||0}% WASTED`;
+  signpostWastedCost=`≈${money((Number(report?.cost?.total)||0)*dirtyShare)} WASTED`;
 }
 async function loadSetupReport(){
   const nonce=pageParams.get('nonce');
-  if(!setupMode || !nonce) return null;
+  if(!setupMode) return null;
   const countEl=document.getElementById('scan-count');
-  for(let i=0;i<80;i++){
+  const loadingEl=document.getElementById('scan-loading');
+  const setLoadState=(kind, title, detail)=>{
+    const titleEl=loadingEl?.querySelector('.title');
+    const eyebrowEl=loadingEl?.querySelector('.eyebrow');
+    const barEl=loadingEl?.querySelector('.bar');
+    if(titleEl) titleEl.textContent=title;
+    if(eyebrowEl && kind!=='running') eyebrowEl.textContent=kind==='empty'?'Local scan complete':'Local scan error';
+    if(barEl) barEl.hidden=kind!=='running';
+    if(countEl) countEl.textContent=String(detail||'').slice(0, 240);
+  };
+  const reportShape=(report)=>{
+    if(!report || typeof report!=='object') return {ok:false, code:'REPORT_NOT_OBJECT'};
+    if(report.schemaVersion!==1) return {ok:false, code:'REPORT_SCHEMA_UNSUPPORTED'};
+    const origin=report.dataOrigin;
+    if((previewMode && origin!=='design-preview') || (!previewMode && origin!=='local-workspace-scan')){
+      return {ok:false, code:'REPORT_ORIGIN_REJECTED'};
+    }
+    const finiteNonNegative=(value)=>typeof value==='number' && Number.isFinite(value) && value>=0;
+    const scale=report.scale;
+    const cost=report.cost;
+    const hours=report.userWorkingHours;
+    const summary=goldenSummary(report);
+    const projection=report.billedWasteProjection;
+    const cf=report.counterfactual;
+    if(!scale || typeof scale!=='object' || !finiteNonNegative(scale.totalTokens) || Number(scale.totalTokens)<=0 ||
+       !finiteNonNegative(scale.totalInputTokens) || Number(scale.totalInputTokens)<=0 ||
+       !finiteNonNegative(scale.sessionCount) || Number(scale.sessionCount)<=0 ||
+       !finiteNonNegative(scale.repoCount) || Number(scale.repoCount)<=0){
+      return {ok:false, code:'REPORT_SCALE_INVALID'};
+    }
+    if(!cost || typeof cost!=='object' || !finiteNonNegative(cost.total) || !cost.byModel || typeof cost.byModel!=='object'){
+      return {ok:false, code:'REPORT_COST_INVALID'};
+    }
+    if(!hours || typeof hours!=='object' || !finiteNonNegative(hours.userAttentionHours) ||
+       !finiteNonNegative(hours.averageDailyAttentionHours)){
+      return {ok:false, code:'REPORT_ATTENTION_INVALID'};
+    }
+    if(!summary || !finiteNonNegative(summary.sessionsAnalyzed) || Number(summary.sessionsAnalyzed)<=0 ||
+       !finiteNonNegative(summary.officialInputTokens) || Number(summary.officialInputTokens)<=0 ||
+       !finiteNonNegative(summary.wasteTokens) || !finiteNonNegative(summary.usefulTokens) ||
+       !finiteNonNegative(summary.wastePct) || Number(summary.wastePct)>100){
+      return {ok:false, code:'REPORT_CANONICAL_INVALID'};
+    }
+    if(!projection || typeof projection!=='object' || projection.method!=='canonical-window-share-over-provider-input' ||
+       !finiteNonNegative(projection.billedInputTokens) || projection.billedInputTokens!==scale.totalInputTokens ||
+       !finiteNonNegative(projection.canonicalInputTokens) || projection.canonicalInputTokens!==summary.officialInputTokens ||
+       !finiteNonNegative(projection.canonicalWasteTokens) || projection.canonicalWasteTokens!==summary.wasteTokens ||
+       !finiteNonNegative(projection.projectedUsefulTokens) || !finiteNonNegative(projection.projectedWasteTokens) ||
+       projection.projectedUsefulTokens+projection.projectedWasteTokens!==projection.billedInputTokens){
+      return {ok:false, code:'REPORT_PROJECTION_INVALID'};
+    }
+    if(!Array.isArray(report.repos) || !report.repos.some((repo)=>repo && typeof repo.name==='string' && repo.name.trim() &&
+       typeof repo.tokens==='number' && Number.isFinite(repo.tokens) && repo.tokens>0)){
+      return {ok:false, code:'REPORT_REPOS_EMPTY'};
+    }
+    if(!Number.isFinite(contextHealthScore(report)) || !cf || typeof cf!=='object' ||
+       !finiteNonNegative(cf.daysGained) || !finiteNonNegative(cf.targetScore) || cf.targetScore>100 ||
+       typeof report.scanStartDate!=='string' || Number.isNaN(Date.parse(report.scanStartDate)) ||
+       typeof report.scanEndDate!=='string' || Number.isNaN(Date.parse(report.scanEndDate)) ||
+       typeof cf.counterfactualDate!=='string' || Number.isNaN(Date.parse(cf.counterfactualDate))){
+      return {ok:false, code:'REPORT_DERIVED_FIELDS_INVALID'};
+    }
+    return {ok:true};
+  };
+  const classifyEnvelope=(envelope)=>{
+    if(!envelope || typeof envelope!=='object' || envelope.schemaVersion!==1 ||
+       typeof envelope.scanId!=='string' || !envelope.scanId.trim()){
+      return {kind:'invalid', code:'REPORT_ENVELOPE_INVALID'};
+    }
+    if(envelope.kind==='empty') return {kind:'empty'};
+    if(envelope.kind==='failed'){
+      const error=envelope.error && typeof envelope.error==='object' ? envelope.error : {};
+      return {kind:'failed', code:String(error.code||'REPORT_BUILD_FAILED'), message:String(error.message||'The local report could not be built.')};
+    }
+    if(envelope.kind!=='ready') return {kind:'invalid', code:'REPORT_ENVELOPE_KIND_INVALID'};
+    const shape=reportShape(envelope.report);
+    if(!shape.ok) return {kind:'invalid', code:shape.code};
+    const origin=envelope.report.dataOrigin;
+    if(origin==='local-workspace-scan' && envelope.mode!=='production') return {kind:'invalid', code:'REPORT_MODE_INVALID'};
+    if(origin==='design-preview' && (!previewMode || envelope.mode!=='preview')) return {kind:'invalid', code:'REPORT_PREVIEW_REJECTED'};
+    return {kind:'ready', report:envelope.report};
+  };
+  if(!nonce){
+    setLoadState('failed', 'Your local report could not be shown', 'REPORT_NONCE_MISSING: Rerun Echo setup to open a verified local scan.');
+    return new Promise(()=>{});
+  }
+  let cleanupParentListener=()=>{};
+  let readyTimer=null;
+  const parentEnvelope=new Promise((resolve)=>{
+    const postReady=()=>{ try{ window.parent?.postMessage({type:'echomem:city-ready', nonce}, location.origin); }catch(_){} };
+    const onMessage=(event)=>{
+      if(event.origin!==location.origin) return;
+      const data=event.data||{};
+      if(data.type==='echomem:setup-report' && data.nonce===nonce && Object.prototype.hasOwnProperty.call(data,'envelope')){
+        resolve({source:'parent', envelope:data.envelope});
+      }
+    };
+    cleanupParentListener=()=>{ window.removeEventListener('message', onMessage); if(readyTimer) window.clearInterval(readyTimer); };
+    window.addEventListener('message', onMessage);
+    postReady();
+    readyTimer=window.setInterval(postReady, 500);
+  });
+  const sleep=(ms)=>new Promise((resolve)=>setTimeout(resolve, ms));
+  const fetchOnce=async()=>{
+    // A design-preview iframe may consume only its explicit parent envelope. It must
+    // never race the production /report endpoint and accidentally display local data.
+    if(previewMode) return null;
+    const controller=typeof AbortController!=='undefined' ? new AbortController() : null;
+    const timer=controller ? window.setTimeout(()=>controller.abort(), 3500) : null;
     try{
-      const res=await fetch(`/report?nonce=${encodeURIComponent(nonce)}`, {credentials:'omit', cache:'no-store'});
-      if(res.status===200) return await res.json();
-      if(res.status!==202) return null;
-      // 202 = still scanning. Surface live "read N / M sessions" so heavy histories never look frozen.
-      try{ const p=await res.json(); if(countEl && p && Number(p.total)>0){ countEl.textContent=`read ${Number(p.scanned||0).toLocaleString()} / ${Number(p.total).toLocaleString()} sessions`; } }catch(_){}
-    }catch(_){ return null; }
-    await new Promise((resolve)=>setTimeout(resolve, 500));
+      const res=await fetch(`/report?nonce=${encodeURIComponent(nonce)}`, {credentials:'omit', cache:'no-store', signal:controller?.signal});
+      if(res.status===200){
+        try{ return {source:'server', envelope:await res.json()}; }
+        catch(_){ return {source:'failure', code:'REPORT_RESPONSE_INVALID', message:'The local scanner returned an unreadable report.'}; }
+      }
+      if(res.status!==202){
+        let payload=null;
+        try{ payload=await res.json(); }catch(_){}
+        if(payload && payload.kind==='failed') return {source:'server', envelope:payload};
+        const error=payload?.error && typeof payload.error==='object' ? payload.error : {};
+        return {
+          source:'failure',
+          code:String(error.code||`REPORT_HTTP_${res.status}`),
+          message:String(error.message||'The local scanner could not provide this report.'),
+        };
+      }
+      // 202 = still scanning. This is a file-processing counter; final session totals are
+      // deduplicated separately once the report has finished parsing.
+      try{
+        const p=await res.json();
+        if(p && p.kind==='failed') return {source:'server', envelope:p};
+        const progress=p?.progress || p;
+        if(countEl && progress && Number(progress.total)>0){
+          const scanned=Number(progress.scanned||0);
+          const total=Number(progress.total||0);
+          const elapsed=Number(progress.stageElapsedMs||0)>0 ? ` · ${Math.round(Number(progress.stageElapsedMs)/1000)}s` : '';
+          if(progress.stage && progress.stage!=='reading-transcripts'){
+            countEl.textContent=progress.stage==='classifying-repeated-context'
+              ? `${progress.label || 'classifying repeated context'} ${scanned.toLocaleString()} / ${total.toLocaleString()}${elapsed}`
+              : `${progress.label || 'building report'}${elapsed}`;
+          }else{
+            countEl.textContent=`read ${scanned.toLocaleString()} / ${total.toLocaleString()} transcript files`;
+          }
+        }
+      }catch(_){ return {source:'failure', code:'REPORT_PROGRESS_INVALID', message:'The local scanner returned an unreadable progress update.'}; }
+      return null;
+    }catch(error){
+      if(error?.name!=='AbortError') setLoadState('running', 'Reading your local history', 'Local scanner connection interrupted · retrying');
+      return null;
+    }finally{
+      if(timer) window.clearTimeout(timer);
+    }
+  };
+  const stopClosed=(kind, code, message)=>{
+    cleanupParentListener();
+    if(kind==='empty'){
+      setLoadState('empty', 'No local workspace data found', 'No demo data was substituted.');
+    }else{
+      setLoadState('failed', 'Your local report could not be shown', `${code}: ${message||'Rerun Echo setup to try again.'}`);
+    }
+    return new Promise(()=>{});
+  };
+  while(true){
+    const result=await Promise.race([parentEnvelope, fetchOnce()]);
+    if(result){
+      if(result.source==='failure') return stopClosed('failed', result.code, result.message);
+      const classified=classifyEnvelope(result.envelope);
+      if(classified.kind==='ready'){
+        cleanupParentListener();
+        return result.envelope;
+      }
+      if(classified.kind==='empty') return stopClosed('empty');
+      return stopClosed('failed', classified.code, classified.message || 'The report failed provenance or structure validation.');
+    }
+    const duringSleep=await Promise.race([parentEnvelope, sleep(500).then(()=>null)]);
+    if(duringSleep){
+      const classified=classifyEnvelope(duringSleep.envelope);
+      if(classified.kind==='ready'){
+        cleanupParentListener();
+        return duringSleep.envelope;
+      }
+      if(classified.kind==='empty') return stopClosed('empty');
+      return stopClosed('failed', classified.code, classified.message || 'The report failed provenance or structure validation.');
+    }
   }
-  return null;
 }
-let signpostTokens='7.49B';
-let signpostInputPct='99.39% INPUT';
-const setupReport=await loadSetupReport();
+let signpostTokens=setupMode?'—':'7.49B';
+let signpostHours=setupMode?'—':'191.1h';
+let signpostCost=setupMode?'—':'$13,689';
+let signpostWastedTime=setupMode?'—':'≈162h WASTED';
+let signpostWastedPct=setupMode?'—':'85% WASTED';
+let signpostWastedCost=setupMode?'—':'≈$11,636 WASTED';
+const setupEnvelope=await loadSetupReport();
+const setupReport=setupMode ? setupEnvelope.report : null;
+const setupLiveRepos=setupMode ? buildSetupRepos(setupReport) : [];
 applySetupReport(setupReport);
 renderV7PersonaHover();
+let comparisonBefore=contextHealthScore(setupReport);
+if(!Number.isFinite(comparisonBefore)) comparisonBefore=setupMode?0:58;
+const reportTargetScore=Number(setupReport?.counterfactual?.targetScore);
+let comparisonAfter=Number.isFinite(reportTargetScore) ? clampScore(reportTargetScore) : (setupMode?comparisonBefore:clampScore(comparisonBefore+28));
+comparisonAfter=Math.max(comparisonBefore,comparisonAfter);
+let cityComparison='without';
+let repairTarget=0;
+let repairProgress=0;
+let dirty=true;
+let shadowFrame=0;
+
+function setupWasteShare(){
+  const pct=Number(goldenWastePct(setupReport) || setupReport?.cleanliness?.staleReadSharePct || 0);
+  if(Number.isFinite(pct) && pct>0) return Math.max(0, Math.min(0.95, pct/100));
+  return Math.max(0, Math.min(0.95, (100-comparisonBefore)/100));
+}
+function setupAttentionHours(){
+  const direct=Number(setupReport?.userWorkingHours?.userAttentionHours);
+  if(Number.isFinite(direct) && direct>=0) return direct;
+  return all.reduce((sum,o)=>sum+(Number(o.hours)||0),0);
+}
+function setupInputTokens(){
+  const direct=Number(setupReport?.billedWasteProjection?.billedInputTokens);
+  if(Number.isFinite(direct) && direct>0) return direct;
+  return 0;
+}
+function setupUsefulTokens(){
+  const direct=Number(setupReport?.billedWasteProjection?.projectedUsefulTokens);
+  if(Number.isFinite(direct) && direct>=0) return direct;
+  return 0;
+}
+function setupApiCost(){
+  const direct=Number(setupReport?.cost?.total);
+  if(Number.isFinite(direct) && direct>=0) return direct;
+  return all.reduce((sum,o)=>sum+(Number(o.cost)||0),0);
+}
+function fmtInt(n){ return Math.round(Number(n)||0).toLocaleString('en-US'); }
+function cityMetricReadout(){
+  const waste=setupWasteShare();
+  const attention=setupAttentionHours();
+  const reportedDaily=Number(setupReport?.userWorkingHours?.averageDailyAttentionHours);
+  const daily=Number.isFinite(reportedDaily) && reportedDaily>0 ? reportedDaily : (attention>0?attention:0);
+  const currentDays=daily>0?Math.ceil(attention/daily):0;
+  const withHours=Math.max(0, attention*(1-waste));
+  const withDays=daily>0?Math.ceil(withHours/daily):0;
+  const inputTokens=setupInputTokens();
+  const usefulTokens=Math.max(0, Math.min(inputTokens, setupUsefulTokens()));
+  const apiCost=setupApiCost();
+  const withCost=Math.max(0, apiCost*(1-waste));
+  const savedDays=Math.max(0, currentDays-withDays);
+  const savedTokens=Math.max(0, inputTokens-usefulTokens);
+  const savedCost=Math.max(0, apiCost-withCost);
+  const mode=cityComparison==='with'?'with':'without';
+  const metric=cityMetric==='tokens'||cityMetric==='cost'?cityMetric:'time';
+  const data={
+    time:{
+      without:{value:`${fmtInt(currentDays)} days`,label:'time without Echo',say:`${fmtInt(attention)}h of agent work at <b>${oneDec(daily)}h per active day</b>. This is the pace that built the current city.`},
+      with:{value:`${fmtInt(withDays)} days`,label:'time with Echo',say:`Same project state, with repeat context cleared. That frees about <b>${fmtInt(savedDays)} working days</b> for everything else.`}
+    },
+    tokens:{
+      without:{value:fmtTok(inputTokens),label:'tokens without Echo',say:`The current scan analyzed <b>${fmtTok(inputTokens)} input tokens</b>, including context the agent had to reload again.`},
+      with:{value:fmtTok(usefulTokens),label:'tokens with Echo',say:`Echo carries the useful checkpoint forward, so about <b>${fmtTok(savedTokens)}</b> repeat tokens do not need to be reloaded.`}
+    },
+    cost:{
+      without:{value:money(apiCost),label:'API cost without Echo',say:`API-equivalent list-price scale for the context volume in this scan. This is a volume estimate, not your subscription bill.`},
+      with:{value:money(withCost),label:'API cost with Echo',say:`Modeled after removing repeat context from the scan, avoiding about <b>${money(savedCost)}</b> of reloaded context volume.`}
+    }
+  };
+  return data[metric][mode];
+}
+function updateFieldReportMetric(){
+  if(!setupMode) return;
+  const readout=cityMetricReadout();
+  const metricValue=document.getElementById('fr-metric-value'); if(metricValue) metricValue.textContent=readout.value;
+  const metricLabel=document.getElementById('fr-metric-label'); if(metricLabel) metricLabel.textContent=readout.label;
+  const metricSay=document.getElementById('fr-metric-say'); if(metricSay) metricSay.innerHTML=readout.say;
+}
 
 const renderer = new THREE.WebGLRenderer({canvas:document.getElementById('repo-visualizer'), antialias:true, alpha:true});
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
@@ -694,8 +1321,9 @@ function buildEnv(){
 }
 scene.environment = buildEnv();
 
-// real per-repo token usage (from city-data.json); x/z layout + tool colour stay hand-tuned, sizes are derived.
-let REPOS=[
+// Frozen poster data is available only outside setup. Setup starts empty and can be
+// populated solely by the validated local report envelope above.
+const POSTER_REPOS=[
   {name:'WebPageReactVersion', x:-30, z:-60, tool:'claude', pin:true, tokens:3436946364, cost:8896, days:18.6, hours:92.8, sessions:74},
   {name:'EchoMem-Chrome',      x:140, z:-14, tool:'claude', pin:true, tokens:2863590896, cost:6959, days:14.0, hours:70.1, sessions:38},
   {name:'echo-design-system',  x:30,  z:30,  tool:'codex',  tokens:382642012, cost:1106, days:4.2, hours:21.2, sessions:29},
@@ -710,12 +1338,12 @@ let REPOS=[
   {name:'dist',                x:-210,z:118, tool:'claude', tokens:4550877,   cost:8,    days:0, hours:0, sessions:2},
   {name:'Daimler Engineering', x:-168,z:160, tool:'codex',  tokens:4439902,   cost:15,   days:0, hours:0.2, sessions:2},
 ];
+let REPOS=setupMode ? [] : POSTER_REPOS;
 // per-repo codex/claude split (frozen poster values from city-data.json) → drives the stacked two-colour buildings
 const REPO_SPLIT={'WebPageReactVersion':[31,69],'EchoMem-Chrome':[19,81],'echo-design-system':[44,56],'sleepy-merkle-3d0470':[0,100],'DG-Web':[0,100],'Kobe Life':[100,0],'public':[0,100],'EchoMemory_log':[63,37],'production-prompt':[0,100],'brands':[0,100],'components':[0,100],'dist':[0,100],'Daimler Engineering':[100,0]};
 for(const o of REPOS){ const s=REPO_SPLIT[o.name]; if(s){ o.codexPct=s[0]; o.claudePct=s[1]; } else { o.codexPct=o.tool==='codex'?100:0; o.claudePct=100-o.codexPct; } }
-if(setupMode && setupReport){
-  const liveRepos=buildSetupRepos(setupReport);
-  if(liveRepos.length) REPOS=liveRepos;
+if(setupMode){
+  REPOS=setupLiveRepos;
   window.__ECHOMEM_CITY_REPORT_REPO_COUNT=Array.isArray(setupReport?.repos) ? setupReport.repos.length : -1;
   window.__ECHOMEM_CITY_REPOS=REPOS.map(({name,tokens,cost,hours,sessions,tool})=>({name,tokens,cost,hours,sessions,tool}));
 }
@@ -818,17 +1446,21 @@ const fill = new THREE.DirectionalLight(0xffffff, 0.4); fill.position.set(CX+420
 const floor = new THREE.Mesh(new THREE.PlaneGeometry(6000,6000), new THREE.ShadowMaterial({opacity:0.22}));
 floor.rotation.x=-Math.PI/2; floor.position.y=0; floor.receiveShadow=true; scene.add(floor);
 
-// frosted clay-glass: colour comes from inside the volume (attenuation), not a flat surface
+// Comparison material: corrupted buildings are dark and chalky; repaired buildings regain colour
+// without returning to the glossy toy-plastic finish.
 function clayGlass(hex){
-  const c=new THREE.Color(hex);
-  return new THREE.MeshPhysicalMaterial({
-    color:c,
-    roughness:0.42, metalness:0.0,
-    transmission:0.85, ior:1.34, thickness:70,
-    attenuationColor:c.clone(), attenuationDistance:95,
-    clearcoat:0.28, clearcoatRoughness:0.45,
-    envMapIntensity:1.05, transparent:true,
+  const clean=new THREE.Color(hex).multiplyScalar(0.82);
+  const damaged=clean.clone().multiplyScalar(0.58);
+  const material=new THREE.MeshPhysicalMaterial({
+    color:damaged,
+    roughness:0.9, metalness:0.01,
+    transmission:0.05, ior:1.25, thickness:45,
+    attenuationColor:damaged.clone(), attenuationDistance:58,
+    clearcoat:0.015, clearcoatRoughness:0.94,
+    envMapIntensity:0.24, transparent:true,
   });
+  buildingMaterials.push({material,damaged,clean});
+  return material;
 }
 function selectiveRoundedBoxGeometry(width, height, depth, segments=8, radius=0.1, opts={}){
   const roundTop=opts.roundTop!==false, roundBottom=opts.roundBottom!==false;
@@ -870,6 +1502,7 @@ function selectiveRoundedBoxGeometry(width, height, depth, segments=8, radius=0.
 }
 function addCube(o){
   const {x,z,w,h,d,tool}=o;
+  const damage=corruptionProfile(o);
   const r=Math.min(Math.min(w,h,d)*0.12, 12);
   // proportional split: Claude (orange) on the bottom, Codex (green) on top; segment heights ∝ each tool's token share
   let cl=Number(o.claudePct), cx=Number(o.codexPct);
@@ -877,46 +1510,156 @@ function addCube(o){
   const total=cl+cx, segs=[];
   if(cl>0) segs.push([h*cl/total, TOOL.claude]);
   if(cx>0) segs.push([h*cx/total, TOOL.codex]);
+  const slices=[];
+  for(const [hSeg,color] of segs){
+    const count=hSeg>78?4:hSeg>44?3:hSeg>24?2:1;
+    const gap=count>1?Math.min(3.2,hSeg*0.055):0;
+    const sliceH=(hSeg-gap*(count-1))/count;
+    for(let i=0;i<count;i++) slices.push({h:sliceH,color,gap:i===count-1?0:gap});
+  }
   const group=new THREE.Group();
+  group.position.set(x,0,z);
+  group.rotation.x=damage.leanX*damage.amount;
+  group.rotation.z=damage.leanZ*damage.amount;
+  repairGroups.push({group,damageX:group.rotation.x,damageZ:group.rotation.z});
   let yBase=TRAY_TOP - 3;
-  const mixed=segs.length>1;
-  for(let i=0;i<segs.length;i++){
-    const [hSeg, color] = segs[i];
+  let cleanY=TRAY_TOP - 3;
+  const fractured=slices.length>1;
+  for(let i=0;i<slices.length;i++){
+    const {h:hSeg,color,gap}=slices[i];
     const mat=clayGlass(color);
-    const geom=mixed
-      ? selectiveRoundedBoxGeometry(w,hSeg,d,8,Math.min(r,hSeg*0.45), {roundBottom:i===0, roundTop:i===segs.length-1})
+    const geom=fractured
+      ? selectiveRoundedBoxGeometry(w,hSeg,d,8,Math.min(r,hSeg*0.45), {roundBottom:i===0, roundTop:i===slices.length-1})
       : new RoundedBoxGeometry(w,hSeg,d,8,Math.min(r,hSeg*0.45));
     const m=new THREE.Mesh(geom, mat);
-    m.position.set(x, yBase + hSeg/2, z);
+    const stagger=i===0?0:(hash01(o.name,i+61)-0.5)*2;
+    const splitShift=stagger*Math.min(w*0.24, 13)*damage.amount;
+    m.position.set(splitShift, yBase + hSeg/2, -splitShift*(0.25+hash01(o.name,i+67)*0.45));
+    if(i>0) m.rotation.y=(hash01(o.name,i+71)-0.5)*0.30*damage.amount;
+    repairPieces.push({
+      mesh:m,
+      damagePos:m.position.clone(),
+      cleanPos:new THREE.Vector3(0,cleanY+hSeg/2,0),
+      damageRotY:m.rotation.y,
+    });
     m.castShadow=true; m.receiveShadow=true; m.userData=o;
     group.add(m);
-    yBase+=hSeg;
+    yBase+=hSeg+gap;
+    cleanY+=hSeg;
+  }
+  const scarMat=new THREE.MeshStandardMaterial({color:0x343238,roughness:0.92,metalness:0.08,transparent:true});
+  const scarCount=Math.max(1,Math.round(2+damage.amount*3));
+  for(let i=0;i<scarCount;i++){
+    const sw=Math.max(3,w*(0.10+hash01(o.name,101+i)*0.20));
+    const sh=Math.max(2,Math.min(6,h*0.045));
+    const sd=Math.max(2,d*0.06);
+    const scar=new THREE.Mesh(new THREE.BoxGeometry(sw,sh,sd),scarMat);
+    scar.position.set((hash01(o.name,131+i)-0.5)*w*0.72,TRAY_TOP+h*(0.18+hash01(o.name,151+i)*0.67),d*0.5+1.2);
+    scar.rotation.z=(hash01(o.name,171+i)-0.5)*0.55;
+    scar.castShadow=true; scar.userData=o; group.add(scar);
+    corruptionFades.push({mesh:scar,material:scar.material,damagePos:scar.position.clone(),cleanPos:scar.position.clone(),baseScale:scar.scale.clone()});
+  }
+  const chunkCount=Math.max(4,Math.round(4+damage.amount*5));
+  for(let i=0;i<chunkCount;i++){
+    const size=Math.max(3,Math.min(w,d)*(0.07+hash01(o.name,201+i)*0.10));
+    const chunk=new THREE.Mesh(
+      i%3===0?new THREE.TetrahedronGeometry(size,0):new THREE.BoxGeometry(size,size*(0.5+hash01(o.name,221+i)),size*0.72),
+      i%2?scarMat:clayGlass(tool==='codex'?TOOL.codex:TOOL.claude)
+    );
+    const angle=hash01(o.name,241+i)*Math.PI*2;
+    const radius=Math.max(w,d)*(0.62+hash01(o.name,261+i)*1.05);
+    const baseY=TRAY_TOP+2+hash01(o.name,281+i)*Math.min(h*0.72,58);
+    chunk.position.set(Math.cos(angle)*radius,baseY,Math.sin(angle)*radius);
+    chunk.rotation.set(hash01(o.name,301+i)*2.4,hash01(o.name,321+i)*2.4,hash01(o.name,341+i)*2.4);
+    chunk.castShadow=true; chunk.receiveShadow=true; chunk.userData=o; group.add(chunk);
+    chunk.material.transparent=true;
+    corruptionFades.push({
+      mesh:chunk,
+      material:chunk.material,
+      damagePos:chunk.position.clone(),
+      cleanPos:new THREE.Vector3(0,Math.max(TRAY_TOP+4,Math.min(TRAY_TOP+h-5,baseY)),0),
+      baseScale:chunk.scale.clone(),
+    });
+    if(i===0 && h>42) corruptionFloaters.push({mesh:chunk,baseY,phase:damage.phase,speed:0.65+hash01(o.name,361)*0.55});
   }
   group.userData=o; scene.add(group); return group;
 }
 // repo summary as an upright billboard above each bar — white text, ALWAYS faces the camera (never skewed).
-// name = small tag just above the bar top; tokens + $ fly higher above it, clear of the cube.
-function addTopLabel(o){
+// setup mode uses the selected city metric; share-card mode keeps the original tokens + $ poster readout.
+let cityMetric=setupMode ? 'time' : 'tokens';
+let timelineProgress=1;
+const repoLabels=[];
+function fmtMetric(hours, tokens, cost){
+  if(cityMetric==='tokens') return fmtTok(tokens);
+  if(cityMetric==='cost') return '$'+Math.round(cost).toLocaleString('en-US');
+  return `${(Number(hours)||0).toFixed(1)}h`;
+}
+function repoMetricText(o){
+  const fraction=Number.isFinite(o.timelineFraction)?o.timelineFraction:1;
+  return fmtMetric((Number(o.hours)||0)*fraction,(Number(o.tokens)||0)*fraction,(Number(o.cost)||0)*fraction*(setupMode?1:COST_SCALE));
+}
+// GitHub octocat mark (24x24) — same glyph as the report's repo chips.
+const GH_MARK=new Path2D('M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.78 2.72 1.27 3.38.97.1-.75.41-1.27.74-1.56-2.57-.29-5.27-1.29-5.27-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.47.11-3.05 0 0 .97-.31 3.16 1.18A10.97 10.97 0 0 1 12 6.12c.98 0 1.96.13 2.88.39 2.2-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.4-2.71 5.38-5.29 5.67.42.36.79 1.06.79 2.14v3.27c0 .31.21.68.8.56A11.5 11.5 0 0 0 12 .7Z');
+function drawRepoLabel(e){
+  const {o, g, tex, PW, PH, numbers}=e;
+  g.clearRect(0,0,PW,PH);
+  g.textAlign='center';
+  if(numbers){
+    // dark ink + white halo: stays readable over the light grid AND the coloured roofs
+    g.save();
+    g.shadowColor='rgba(255,255,255,0.92)'; g.shadowBlur=12; g.shadowOffsetY=0;
+    g.fillStyle='#171717'; g.font=`800 ${Math.round(PW*0.19)}px "IBM Plex Mono", monospace`;
+    g.fillText(setupMode ? repoMetricText(o) : fmtTok(o.tokens), PW/2, setupMode ? PH*0.66 : PH*0.18);
+    if(!setupMode){
+      g.fillStyle='rgba(23,23,23,0.85)'; g.font=`700 ${Math.round(PW*0.11)}px "IBM Plex Mono", monospace`;
+      g.fillText('$'+Math.round(o.cost*COST_SCALE).toLocaleString('en-US'), PW/2, PH*0.40);
+    }
+    g.restore();
+  }
+  // repo name rides a white chip with the octocat, matching .audit-repo-chip in the report
+  const fs=Math.round(PW*0.075);
+  g.font=`700 ${fs}px "IBM Plex Mono", monospace`;
+  const icon=Math.round(fs*1.25), gap=Math.round(fs*0.45), padX=Math.round(fs*0.7);
+  const tw=g.measureText(o.name).width;
+  const maxText=PW*0.94-icon-gap-padX*2;
+  const drawTw=Math.min(tw,maxText);
+  const chipW=drawTw+icon+gap+padX*2;
+  const chipH=Math.round(icon+fs*0.85);
+  const cx=PW/2, cyMid=PH*0.86-fs*0.35;
+  const rx=cx-chipW/2, ry=cyMid-chipH/2;
+  g.save();
+  g.shadowColor='rgba(31,35,40,0.25)'; g.shadowBlur=8; g.shadowOffsetY=2;
+  g.beginPath();
+  if(g.roundRect) g.roundRect(rx,ry,chipW,chipH,chipH/2); else g.rect(rx,ry,chipW,chipH);
+  g.fillStyle='rgba(255,255,255,0.96)'; g.fill();
+  g.shadowColor='transparent';
+  g.lineWidth=1.5; g.strokeStyle='rgba(24,23,23,0.32)'; g.stroke();
+  g.translate(rx+padX, cyMid-icon/2); g.scale(icon/24, icon/24);
+  g.fillStyle='#181717'; g.fill(GH_MARK);
+  g.restore();
+  g.save();
+  g.fillStyle='#171717'; g.textAlign='left'; g.textBaseline='middle';
+  g.font=`700 ${fs}px "IBM Plex Mono", monospace`;
+  g.translate(rx+padX+icon+gap, cyMid+fs*0.06);
+  if(tw>maxText) g.scale(maxText/tw,1);
+  g.fillText(o.name,0,0);
+  g.restore();
+  tex.needsUpdate=true;
+}
+function addTopLabel(o, numbers=true, lift=0){
   const PW=320, PH=280;
   const cv=document.createElement('canvas'); cv.width=PW; cv.height=PH;
-  const g=cv.getContext('2d'); g.textAlign='center';
-  g.shadowColor='rgba(0,0,0,0.34)'; g.shadowBlur=9; g.shadowOffsetY=1;   // subtle contrast over light areas
-  // tokens — the headline, flies highest
-  g.fillStyle='#ffffff'; g.font=`800 ${Math.round(PW*0.19)}px "IBM Plex Mono", monospace`;
-  g.fillText(fmtTok(o.tokens), PW/2, PH*0.18);
-  // dollars — just under the tokens, also up high
-  g.fillStyle='rgba(255,255,255,0.92)'; g.font=`700 ${Math.round(PW*0.11)}px "IBM Plex Mono", monospace`;
-  g.fillText('$'+Math.round(o.cost*(setupMode?1:COST_SCALE)).toLocaleString('en-US'), PW/2, PH*0.40);
-  // name — small tag sitting just above the bar top
-  g.fillStyle='rgba(255,255,255,0.95)'; g.font=`600 ${Math.round(PW*0.075)}px "IBM Plex Mono", monospace`;
-  const fw=g.measureText(o.name).width, maxw=PW*0.94;
-  g.save(); g.translate(PW/2, PH*0.86); if(fw>maxw){ const s=maxw/fw; g.scale(s,s); } g.fillText(o.name, 0, 0); g.restore();
+  const g=cv.getContext('2d');
   const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
   const sprite=new THREE.Sprite(new THREE.SpriteMaterial({map:tex, transparent:true, toneMapped:false, depthWrite:false}));
   const wWorld=Math.min(Math.max(o.w*0.95, 42), 128), hWorld=wWorld*PH/PW;   // scales with bar size, clamped legible
+  const labelOffset=-3+6+0.36*hWorld+lift;
   sprite.scale.set(wWorld, hWorld, 1);
-  sprite.position.set(o.x, TRAY_TOP + o.h - 3 + 6 + 0.36*hWorld, o.z);   // name tags the top; tokens/$ fly higher
+  sprite.position.set(o.x, TRAY_TOP + o.h + labelOffset, o.z);   // name tags the top; tokens/$ fly higher; lift staggers neighbors
   scene.add(sprite);
+  const entry={o, g, tex, PW, PH, sprite, numbers, labelOffset};
+  repoLabels.push(entry);
+  drawRepoLabel(entry);
 }
 // fine ivory grain — textures EVERY face (incl. the curved side walls), so the tray isn't flat plastic
 const grain=(function(){
@@ -931,9 +1674,9 @@ const grain=(function(){
 })();
 const trayGeo=new RoundedBoxGeometry(trayW, TRAY_TOP, trayD, 8, 12);
 const tray=new THREE.Mesh(trayGeo, new THREE.MeshPhysicalMaterial({
-  color:TRAY_COL, roughness:0.6, metalness:0.0,
-  clearcoat:0.3, clearcoatRoughness:0.5, envMapIntensity:0.6,
-  bumpMap:grain, bumpScale:0.4,
+  color:TRAY_COL, roughness:0.84, metalness:0.02,
+  clearcoat:0.08, clearcoatRoughness:0.82, envMapIntensity:0.4,
+  bumpMap:grain, bumpScale:0.9,
 }));
 tray.position.set(CX, TRAY_TOP/2, CZ); tray.castShadow=true; tray.receiveShadow=true; scene.add(tray);
 // grid + perimeter border on ONE decal: the grid is CLIPPED to the border's rounded rect, so
@@ -960,13 +1703,49 @@ tray.position.set(CX, TRAY_TOP/2, CZ); tray.castShadow=true; tray.receiveShadow=
   const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
   const plane=new THREE.Mesh(new THREE.PlaneGeometry(trayW, trayD), new THREE.MeshBasicMaterial({map:tex, transparent:true, depthWrite:false, toneMapped:false}));
   plane.rotation.x=-Math.PI/2; plane.position.set(CX, TRAY_TOP+0.6, CZ); scene.add(plane);
+
+  // Keep corruption on its own decal so the same city can visibly heal without losing its clean grid.
+  const damageCv=document.createElement('canvas'); damageCv.width=W; damageCv.height=H;
+  const dg=damageCv.getContext('2d');
+  dg.save(); dg.beginPath(); dg.roundRect(m,m,rw,rh,rad); dg.clip();
+  let seed=0xdecafbad;
+  const rnd=()=>{ seed=(Math.imul(seed,1664525)+1013904223)>>>0; return seed/4294967296; };
+  for(let i=0;i<16;i++){
+    const x=m+rnd()*rw, y=m+rnd()*rh, ww=(18+rnd()*54)*scale, hh=(8+rnd()*24)*scale;
+    dg.save(); dg.translate(x,y); dg.rotate((rnd()-0.5)*0.7);
+    dg.fillStyle=i%3===0?'rgba(170,59,51,0.18)':'rgba(43,43,49,0.16)';
+    dg.fillRect(-ww/2,-hh/2,ww,hh); dg.restore();
+  }
+  dg.lineCap='square';
+  for(let i=0;i<22;i++){
+    let x=m+rnd()*rw, y=m+rnd()*rh;
+    dg.strokeStyle=i%5===0?'rgba(176,58,51,0.62)':'rgba(45,44,49,0.55)';
+    dg.lineWidth=(0.9+rnd()*1.5)*scale; dg.beginPath(); dg.moveTo(x,y);
+    const steps=2+Math.floor(rnd()*4);
+    for(let j=0;j<steps;j++){
+      x+=((rnd()-0.5)*42)*scale; y+=((rnd()-0.5)*42)*scale; dg.lineTo(x,y);
+      if(j===1 && rnd()>0.45){ dg.moveTo(x,y); dg.lineTo(x+(rnd()-0.5)*24*scale,y+(rnd()-0.5)*24*scale); dg.moveTo(x,y); }
+    }
+    dg.stroke();
+  }
+  dg.restore();
+  const damageTex=new THREE.CanvasTexture(damageCv); damageTex.colorSpace=THREE.SRGBColorSpace; damageTex.anisotropy=8;
+  const damageMat=new THREE.MeshBasicMaterial({map:damageTex,transparent:true,depthWrite:false,toneMapped:false});
+  const damagePlane=new THREE.Mesh(new THREE.PlaneGeometry(trayW,trayD),damageMat);
+  damagePlane.rotation.x=-Math.PI/2; damagePlane.position.set(CX,TRAY_TOP+0.72,CZ); scene.add(damagePlane);
+  corruptionSurfaces.push(damageMat);
 })();
 
-all.forEach(o=>{ o.mesh=addCube(o); o.mesh.userData=o; if(o.w>=LABEL_MIN_BASE) addTopLabel(o); });
+// De-crowd the skyline: only the top token movers fly their numbers; every other building keeps just
+// its name tag (hover still shows the full repo detail card). Kills the mid-air label collisions.
+const NUMBERED_LABELS=4;
+const numberedOrder=all.slice().sort((a,b)=>(b.tokens||0)-(a.tokens||0)).slice(0,NUMBERED_LABELS);
+const numberedLift=new Map(numberedOrder.map((o,i)=>[o.name, (i%2)*16]));   // alternate heights so neighbors' numbers never collide
+all.forEach(o=>{ o.mesh=addCube(o); o.mesh.userData=o; if(o.w>=LABEL_MIN_BASE) addTopLabel(o, numberedLift.has(o.name), numberedLift.get(o.name)||0); });
 
-// bottom-right standing "signpost": tray summary — total tokens + how much is input
+// bottom-right standing "signpost": tray summary follows the selected city metric.
 let signpostCanvas=null, signpostTexture=null;
-function drawSignpost(tokenText, bottomText, accent='#e8473f'){
+function drawSignpost(bigText, subLabel, bottomText, accent='#e8473f'){
   if(!signpostCanvas) return;
   const W=signpostCanvas.width, H=signpostCanvas.height;
   const g=signpostCanvas.getContext('2d');
@@ -974,18 +1753,44 @@ function drawSignpost(tokenText, bottomText, accent='#e8473f'){
   g.fillStyle='rgba(244,241,233,0.97)'; g.beginPath(); g.roundRect(8,8,W-16,H-16,30); g.fill();
   g.strokeStyle='rgba(120,126,140,0.30)'; g.lineWidth=3; g.beginPath(); g.roundRect(8,8,W-16,H-16,30); g.stroke();
   g.textAlign='center';
-  g.fillStyle='#1a1a1a'; g.font='800 124px "IBM Plex Mono", monospace'; g.fillText(tokenText, W/2, 150);
-  g.fillStyle='#6b6b6b'; g.font='600 36px "IBM Plex Mono", monospace'; g.fillText('TOTAL TOKENS', W/2, 204);
+  g.fillStyle='#1a1a1a'; g.font='800 124px "IBM Plex Mono", monospace'; g.fillText(bigText, W/2, 150);
+  g.fillStyle='#6b6b6b'; g.font='600 36px "IBM Plex Mono", monospace'; g.fillText(subLabel, W/2, 204);
   g.fillStyle=accent; g.font='800 62px "IBM Plex Mono", monospace'; g.fillText(bottomText, W/2, 280);
   if(signpostTexture) signpostTexture.needsUpdate=true;
 }
+function signpostBig(){
+  if(setupMode && cityComparison==='with') return cityMetricReadout().value;
+  if(timelineProgress>=0.999) return cityMetric==='tokens'?signpostTokens : cityMetric==='cost'?signpostCost : signpostHours;
+  const totals=all.reduce((sum,o)=>{
+    const fraction=Number.isFinite(o.timelineFraction)?o.timelineFraction:1;
+    sum.tokens+=(Number(o.tokens)||0)*fraction;
+    sum.cost+=(Number(o.cost)||0)*fraction*(setupMode?1:COST_SCALE);
+    sum.hours+=(Number(o.hours)||0)*fraction;
+    return sum;
+  },{tokens:0,cost:0,hours:0});
+  return cityMetric==='tokens'?fmtTok(totals.tokens):cityMetric==='cost'?money(totals.cost):`${totals.hours.toFixed(1)}h`;
+}
+function signpostSub(){
+  if(setupMode && cityComparison==='with') return cityMetric==='tokens'?'MODELED TOKENS' : cityMetric==='cost'?'MODELED API COST' : 'MODELED TIME';
+  return cityMetric==='tokens'?'TOTAL TOKENS' : cityMetric==='cost'?'TOTAL SPENT' : 'TOTAL TIME';
+}
+function signpostBottom(){
+  if(cityComparison==='with') return `${comparisonAfter} CONTEXT SCORE`;
+  if(timelineProgress<0.999) return 'HISTORY AT DATE';
+  return cityMetric==='tokens'?signpostWastedPct : cityMetric==='cost'?signpostWastedCost : signpostWastedTime;
+}
+function redrawCityMetric(){
+  repoLabels.forEach(drawRepoLabel);
+  drawSignpost(signpostBig(), signpostSub(), signpostBottom(),cityComparison==='with'?'#2a8f7d':'#e8473f');
+  dirty=true;
+}
 (function(){
   const W=640, H=320;
   const cv=document.createElement('canvas'); cv.width=W; cv.height=H;
   signpostCanvas=cv;
   const tex=new THREE.CanvasTexture(cv); tex.colorSpace=THREE.SRGBColorSpace; tex.anisotropy=8;
   signpostTexture=tex;
-  drawSignpost(signpostTokens, signpostInputPct);
+  drawSignpost(signpostBig(), signpostSub(), signpostBottom());
   const SIGN_W=152, SIGN_H=76, SIGN_Y=TRAY_TOP+64;
   const sign=new THREE.Mesh(
     new THREE.PlaneGeometry(SIGN_W, SIGN_H),
@@ -1002,6 +1807,114 @@ function drawSignpost(tokenText, bottomText, accent='#e8473f'){
   post.position.set(sx, TRAY_TOP+postH/2, sz); post.castShadow=true; scene.add(post);
 })();
 
+(function(){
+  const ct=document.getElementById('city-toggle');
+  if(!ct) return;
+  const thumb=ct.querySelector('.ct-thumb');
+  const moveThumb=(btn)=>{ if(!thumb||!btn) return;
+    thumb.style.width=btn.offsetWidth+'px'; thumb.style.height=btn.offsetHeight+'px';
+    thumb.style.transform=`translate(${btn.offsetLeft}px, ${btn.offsetTop}px)`;
+  };
+  requestAnimationFrame(()=>{
+    const on=ct.querySelector('button.on')||ct.querySelector('button[data-metric]');
+    if(thumb) thumb.style.transition='none';
+    moveThumb(on);
+    requestAnimationFrame(()=>{ if(thumb) thumb.style.transition=''; });
+  });
+  ct.addEventListener('click', (e)=>{
+    const b=e.target.closest('button[data-metric]'); if(!b) return;
+    cityMetric=b.getAttribute('data-metric') || 'time';
+    ct.querySelectorAll('button').forEach((x)=>x.classList.toggle('on', x===b));
+    moveThumb(b);
+    redrawCityMetric();
+    updateFieldReportMetric();
+  });
+})();
+
+function setCityComparison(mode){
+  cityComparison=mode==='with'?'with':'without';
+  repairTarget=cityComparison==='with'?1:0;
+  document.body.classList.toggle('with-echo',cityComparison==='with');
+  updateFieldReportMetric();
+  redrawCityMetric();
+  dirty=true;
+}
+setCityComparison('without');
+// Parent page (setup report fullscreen modal) drives the dirty/clean comparison remotely.
+window.addEventListener('message',(e)=>{if(e.origin!==location.origin)return;const d=e.data||{};if(d.type==='echomem:city-comparison')setCityComparison(d.mode==='with'?'with':'without');if(d.type==='echomem:city-metric'){const m=({time:1,tokens:1,cost:1})[d.metric]?d.metric:'time';const b=document.querySelector('#city-toggle button[data-metric="'+m+'"]');if(b)b.click();}});
+
+const timelineStartMs=Date.parse(setupReport?.scanStartDate||'2024-12-01T00:00:00Z');
+const timelineEndMs=Math.max(timelineStartMs+86400000,Date.parse(setupReport?.scanEndDate||new Date().toISOString()));
+function repoFractionAt(o,cutoffMs){
+  if(timelineProgress>=0.999) return 1;
+  if(!Array.isArray(o.daily)||!o.daily.length) return timelineProgress;
+  let total=0,visible=0;
+  for(const point of o.daily){
+    if(!Array.isArray(point)||point.length<2) continue;
+    const amount=Math.max(0,Number(point[1])||0);
+    const day=Date.parse(String(point[0])+'T23:59:59Z');
+    total+=amount;
+    if(Number.isFinite(day)&&day<=cutoffMs) visible+=amount;
+  }
+  return total>0?Math.max(0,Math.min(1,visible/total)):timelineProgress;
+}
+function setTimelineProgress(value){
+  timelineProgress=Math.max(0,Math.min(1,Number(value)||0));
+  const cutoffMs=timelineStartMs+(timelineEndMs-timelineStartMs)*timelineProgress;
+  const handle=document.querySelector('#city-timeline .tl-handle');
+  const progress=document.querySelector('#city-timeline .tl-progress');
+  const selected=document.querySelector('#city-timeline .tl-selected');
+  const pct=timelineProgress*100;
+  if(handle){ handle.style.left=`${pct}%`; handle.setAttribute('aria-valuenow',String(Math.round(pct))); }
+  if(progress) progress.style.width=`${pct}%`;
+  if(selected){
+    selected.style.left=`${Math.max(7,Math.min(93,pct))}%`;
+    selected.textContent=timelineProgress>=0.995?'Today':new Date(cutoffMs).toLocaleString('en-US',{month:'short',day:'numeric',year:'numeric',timeZone:'UTC'});
+  }
+  for(const o of all){
+    const fraction=repoFractionAt(o,cutoffMs);
+    o.timelineFraction=fraction;
+    if(o.mesh){
+      o.mesh.visible=fraction>0.002;
+      o.mesh.scale.y=Math.max(0.001,fraction);
+    }
+  }
+  for(const entry of repoLabels){
+    const fraction=Number.isFinite(entry.o.timelineFraction)?entry.o.timelineFraction:1;
+    entry.sprite.visible=fraction>0.08;
+    entry.sprite.material.opacity=Math.max(0,Math.min(1,(fraction-0.08)/0.18));
+    entry.sprite.position.y=TRAY_TOP+entry.o.h*fraction+entry.labelOffset;
+  }
+  redrawCityMetric();
+  key.shadow.needsUpdate=true;
+  dirty=true;
+}
+(function(){
+  const timeline=document.getElementById('city-timeline');
+  const track=timeline?.querySelector('.tl-track');
+  const handle=timeline?.querySelector('.tl-handle');
+  if(!timeline||!track||!handle) return;
+  let dragging=false;
+  const updateFromPointer=(event)=>{
+    const rect=track.getBoundingClientRect();
+    setTimelineProgress((event.clientX-rect.left)/Math.max(1,rect.width));
+  };
+  track.addEventListener('pointerdown',(event)=>{
+    dragging=true; timeline.classList.add('dragging'); updateFromPointer(event); event.preventDefault();
+  });
+  window.addEventListener('pointermove',(event)=>{ if(dragging){ updateFromPointer(event); event.preventDefault(); } });
+  window.addEventListener('pointerup',()=>{ dragging=false; timeline.classList.remove('dragging'); });
+  handle.addEventListener('keydown',(event)=>{
+    if(event.key==='ArrowLeft'||event.key==='ArrowDown') setTimelineProgress(timelineProgress-0.025);
+    else if(event.key==='ArrowRight'||event.key==='ArrowUp') setTimelineProgress(timelineProgress+0.025);
+    else if(event.key==='Home') setTimelineProgress(0);
+    else if(event.key==='End') setTimelineProgress(1);
+    else return;
+    event.preventDefault();
+  });
+  setTimelineProgress(1);
+})();
+
 const MINZ=0.4, MAXZ=2.8;   // lower floor → can zoom out to ~2/3 of the previous limit
 const controls=new OrbitControls(camera, renderer.domElement);
 controls.target.copy(TARGET);
@@ -1009,16 +1922,63 @@ controls.enableDamping=true; controls.dampingFactor=0.08; controls.enablePan=fal
 controls.minPolarAngle=0.18; controls.maxPolarAngle=Math.PI*0.47; controls.rotateSpeed=0.85;
 controls.update();
 let targetZoom=camera.zoom;
+// Hover auto-focus: wheel + drag behave differently over the city, so cue it —
+// the camera eases into a slight zoom when the pointer enters, back out on leave.
+let hoverFocus=1, hoverFocusTarget=1;
+renderer.domElement.addEventListener('pointerenter',()=>{ hoverFocusTarget=1.05; });
+renderer.domElement.addEventListener('pointerleave',()=>{ hoverFocusTarget=1; });
 renderer.domElement.addEventListener('wheel', (e)=>{
   e.preventDefault();
   const dy=e.deltaY * (e.deltaMode===1 ? 16 : 1);
   targetZoom=Math.min(MAXZ, Math.max(MINZ, targetZoom * Math.pow(0.999, dy)));
 }, {passive:false});
 
-let dirty=true;
 function render(){ renderer.render(scene,camera); }
 function loop(){ requestAnimationFrame(loop); let need=controls.update();
-  if(Math.abs(targetZoom-camera.zoom) > 0.0006){ camera.zoom += (targetZoom-camera.zoom)*0.16; if(Math.abs(targetZoom-camera.zoom)<0.001) camera.zoom=targetZoom; camera.updateProjectionMatrix(); need=true; }
+  let shadowNeedsUpdate=false;
+  if(Math.abs(hoverFocusTarget-hoverFocus)>0.0004){ hoverFocus+=(hoverFocusTarget-hoverFocus)*0.1; if(Math.abs(hoverFocusTarget-hoverFocus)<0.0005) hoverFocus=hoverFocusTarget; }
+  const zoomGoal=Math.min(MAXZ, Math.max(MINZ, targetZoom*hoverFocus));
+  if(Math.abs(zoomGoal-camera.zoom) > 0.0006){ camera.zoom += (zoomGoal-camera.zoom)*0.16; if(Math.abs(zoomGoal-camera.zoom)<0.001) camera.zoom=zoomGoal; camera.updateProjectionMatrix(); need=true; }
+  if(Math.abs(repairTarget-repairProgress)>0.0005){
+    repairProgress+=(repairTarget-repairProgress)*0.085;
+    if(Math.abs(repairTarget-repairProgress)<0.001) repairProgress=repairTarget;
+    need=true; shadowNeedsUpdate=true;
+  }
+  const repairEase=repairProgress*repairProgress*(3-2*repairProgress);
+  for(const entry of repairGroups){
+    entry.group.rotation.x=entry.damageX*(1-repairEase);
+    entry.group.rotation.z=entry.damageZ*(1-repairEase);
+  }
+  for(const entry of repairPieces){
+    entry.mesh.position.copy(entry.damagePos).lerp(entry.cleanPos,repairEase);
+    entry.mesh.rotation.y=entry.damageRotY*(1-repairEase);
+  }
+  for(const entry of buildingMaterials){
+    entry.material.color.copy(entry.damaged).lerp(entry.clean,repairEase);
+    entry.material.attenuationColor.copy(entry.damaged).lerp(entry.clean,repairEase);
+    entry.material.roughness=0.9-(0.2*repairEase);
+    entry.material.transmission=0.05+(0.11*repairEase);
+    entry.material.clearcoat=0.015+(0.035*repairEase);
+    entry.material.clearcoatRoughness=0.94-(0.14*repairEase);
+    entry.material.envMapIntensity=0.24+(0.21*repairEase);
+  }
+  for(const entry of corruptionFades){
+    entry.mesh.position.copy(entry.damagePos).lerp(entry.cleanPos,repairEase);
+    const scale=1-repairEase*0.92;
+    entry.mesh.scale.copy(entry.baseScale).multiplyScalar(scale);
+    entry.material.opacity=1-repairEase;
+    entry.mesh.visible=repairEase<0.985;
+  }
+  for(const material of corruptionSurfaces) material.opacity=1-repairEase;
+  const now=performance.now()*0.001;
+  for(const floater of corruptionFloaters){
+    if(repairEase<0.985){
+      floater.mesh.position.y+=Math.sin(now*floater.speed+floater.phase)*3.2*(1-repairEase);
+      floater.mesh.rotation.y+=0.0025*floater.speed*(1-repairEase);
+    }
+  }
+  if(corruptionFloaters.length && repairEase<0.985) need=true;
+  if(shadowNeedsUpdate && (++shadowFrame%3===0 || repairProgress===repairTarget)) key.shadow.needsUpdate=true;
   if(need||dirty){ render(); dirty=false; }
 }
 loop();
@@ -1027,7 +1987,7 @@ loop();
 const cardEl=document.querySelector('.share-card');
 function fit(){
   if(setupMode){
-    VIZ_W=window.innerWidth; VIZ_H=window.innerHeight;
+    VIZ_W=figureModeEmbed ? window.innerWidth : Math.round(window.innerWidth - Math.min(window.innerWidth*0.4, 620)); VIZ_H=window.innerHeight;
     cardEl.style.transform='none';
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.setSize(VIZ_W,VIZ_H,false);
@@ -1045,51 +2005,79 @@ function fit(){
 fit();
 window.addEventListener('resize', fit);
 
-// Loading lives inside the report: once the city has rendered + framed, fade the scan loader out and
-// the city + real chrome in together (one surface, smooth). Runs unconditionally so it never sticks.
+// Loading lives inside the report: reveal only after a provenance-checked report has
+// populated at least one real repo. Empty, failed, and invalid setup states stay closed.
 function finishSetupReveal(){
+  document.querySelectorAll('[data-setup-pending-hidden]').forEach((el)=>{ el.removeAttribute('aria-hidden'); el.removeAttribute('data-setup-pending-hidden'); });
   document.body.classList.remove('scanning');
 }
-if(setupMode){
+if(setupMode && setupReport && setupLiveRepos.length && all.length){
   requestAnimationFrame(()=>requestAnimationFrame(finishSetupReveal));
   window.setTimeout(finishSetupReveal, 1200);
 }
 
-document.querySelectorAll('#setup-connect,#v7-connect').forEach((connectButton)=>{
+(function(){
+  const btn=document.getElementById('fr-read-btn');
+  const panel=document.getElementById('fr-persona-hover');
+  if(!btn || !panel) return;
+  const setOpen=(open)=>{
+    panel.classList.toggle('open', open);
+    btn.setAttribute('aria-expanded', String(open));
+  };
+  btn.addEventListener('click', (event)=>{
+    event.stopPropagation();
+    setOpen(!panel.classList.contains('open'));
+  });
+  document.addEventListener('click', (event)=>{
+    if(event.target!==btn && !panel.contains(event.target)) setOpen(false);
+  });
+  window.addEventListener('keydown', (event)=>{ if(event.key==='Escape') setOpen(false); });
+})();
+
+document.querySelectorAll('#setup-connect,#v7-connect,#fr-connect').forEach((connectButton)=>{
   connectButton.addEventListener('click', (event)=>{
     event.stopPropagation();
     if(setupMode) window.parent?.postMessage({type:'echomem:connect-click'}, window.location.origin);
   });
 });
 
-// ---- rotating cost-of-forgetting readout: share, time, and API-equivalent waste ----
+// ---- rotating context-health readout: HUD score, share, time, and API-equivalent waste ----
 const parseScalar=(value)=>{
   const match=String(value||'').match(/[0-9][0-9,]*(?:\.[0-9]+)?/);
   return match ? Number(match[0].replace(/,/g,''))||0 : 0;
 };
 const formatWasteMoney=(value)=>`$${Math.round(value).toLocaleString('en-US')}`;
-function buildMetricSlides(dirtyPct, attentionHours, computeCost){
-  const dirtyShare=Math.max(0, parseScalar(dirtyPct))/100;
+function buildMetricSlides(dirtyPct, attentionHours, computeCost, report){
+  const wastePct=goldenWastePct(report);
+  const usefulPct=goldenUsefulPct(report);
+  const dirtyShare=Math.max(0, Number.isFinite(wastePct) ? wastePct : parseScalar(dirtyPct))/100;
   const wastedHours=Math.max(0, parseScalar(attentionHours))*dirtyShare;
   const wastedDays=wastedHours/8;
   const wastedCost=Math.max(0, parseScalar(computeCost))*dirtyShare;
-  return [
+  const slides=[];
+  slides.push(
+    {
+      value:`${oneDec(wastePct)}%`,
+      label:'wasteful context',
+      say:goldenWasteSay(report)
+    },
     {
-      value:`${parseScalar(dirtyPct).toFixed(1)}%`,
-      label:'repeated reads',
-      say:"Your agents re-load context they've already seen — unchanged files, the same rules, stale maps — every session. That's context rot. It's <b>how coding agents work today</b>, and it's the haze on your city."
+      value:`${oneDec(usefulPct)}%`,
+      label:'useful context',
+      say:'Useful context is the portion of the analyzed window that still helps the agent: active task state, product facts, current files, and required overhead.'
     },
     {
       value:`≈${Math.round(wastedHours)}h`,
-      label:'spent rereading',
-      say:`That is roughly <b>${wastedDays.toFixed(1)} workdays</b> of agent attention spent loading old context again instead of moving the workspace forward.`
+      label:'waste-weighted time',
+      say:`That is roughly <b>${wastedDays.toFixed(1)} workdays</b> of agent attention weighted by the golden-standard wasteful-context share.`
     },
     {
       value:`≈${formatWasteMoney(wastedCost)}`,
       label:'API-equiv waste',
-      say:`At list API-equivalent rates, repeated reads account for about <b>${formatWasteMoney(wastedCost)}</b> of the compute volume shown above. Not your bill — the scale of the waste.`
+      say:`At list API-equivalent rates, the wasteful-context share represents about <b>${formatWasteMoney(wastedCost)}</b> of the compute volume shown above. Not your bill — the scale of the waste.`
     },
-  ];
+  );
+  return slides;
 }
 function bindMetricCarousel({metric,value,label,say,slides}){
   if(!metric || !value || !label || !say || !slides?.length) return;
@@ -1106,7 +2094,7 @@ function bindMetricCarousel({metric,value,label,say,slides}){
       say.classList.remove('is-swapping');
     }, 520);
   }
-  if(slides.length>1 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){
+  if(!setupMode && slides.length>1 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){
     window.setInterval(()=>{
       index=(index+1)%slides.length;
       show(index);
@@ -1119,11 +2107,40 @@ bindMetricCarousel({
   label:document.getElementById('v7-metric-label'),
   say:document.getElementById('v7-metric-say'),
   slides:buildMetricSlides(
-    document.getElementById('v7-metric-value')?.textContent || '{{dirtyPct}}',
+    goldenWastePct(setupReport) || setupReport?.cleanliness?.staleReadSharePct || '{{dirtyPct}}',
     document.getElementById('v7-attention')?.textContent || '{{attentionHours}}',
-    document.getElementById('v7-cost')?.textContent || '{{computeCost}}'
+    document.getElementById('v7-cost')?.textContent || '{{computeCost}}',
+    setupReport
   ),
 });
+bindMetricCarousel({
+  metric:document.getElementById('fr-metric'),
+  value:document.getElementById('fr-metric-value'),
+  label:document.getElementById('fr-metric-label'),
+  say:document.getElementById('fr-metric-say'),
+  slides:buildMetricSlides(
+    goldenWastePct(setupReport) || setupReport?.cleanliness?.staleReadSharePct || '{{dirtyPct}}',
+    document.getElementById('v7-attention')?.textContent || '{{attentionHours}}',
+    document.getElementById('v7-cost')?.textContent || '{{computeCost}}',
+    setupReport
+  ),
+});
+function reserveFrSayHeight(){
+  if(!setupMode) return;
+  const say=document.getElementById('fr-metric-say'); if(!say) return;
+  const slides=buildMetricSlides(
+    goldenWastePct(setupReport) || setupReport?.cleanliness?.staleReadSharePct || '{{dirtyPct}}',
+    document.getElementById('v7-attention')?.textContent || '{{attentionHours}}',
+    document.getElementById('v7-cost')?.textContent || '{{computeCost}}',
+    setupReport
+  );
+  const prev=say.innerHTML; say.style.minHeight='0px'; let max=0;
+  for(const slide of slides){ say.innerHTML=slide.say; max=Math.max(max, say.offsetHeight); }
+  say.innerHTML=prev;
+  if(max>0) say.style.minHeight=max+'px';
+}
+reserveFrSayHeight();
+window.addEventListener('resize', reserveFrSayHeight);
 
 // ---- repeated-reads info sheet: v7 "how we read your city" disclosure, moved behind the info button ----
 const v7InfoBtns=Array.from(document.querySelectorAll('[aria-controls="v7-info-sheet"]'));