@echomem/mcp 1.4.44 → 1.4.46

package/dist/save-checkpoint-hook.js

@@ -10,7 +10,7 @@ const CHECKPOINT_REASON = [
     "Private persistence happens first. For a user with a company group, call `request_group_session_sharing` near conversation start or after a qualifying private save.",
     "On the first request_group_session_sharing call in a conversation, omit groupSharingScopeId so EchoMem mints a fresh opaque scope. Reuse that exact scope only in this conversation for later get/request/set/save calls, and never persist it as memory. If multiple groups are returned, reuse the same scope and call once per groupId. Relay the tool's exact text question and call set_group_session_sharing only after an explicit Yes/No. Silence leaves that group's state unset. A Share decision syncs eligible memories from later saves carrying the same scope to that group; saves automatically sync to every approved group. Keep private keeps them private for that group.",
     "Flagged memories are withheld from automatic conversation sync and remain private.",
-    "If EchoMem reports that the encrypted vault is locked, relay its local unlock instruction; for a standalone installation, use `echomem-mcp unlock`. Never silently skip a qualifying checkpoint.",
+    "If EchoMem reports that the encrypted vault is locked, tell the user to open Echo Desktop and unlock the vault there; on a headless system, use `echomem-mcp unlock`. Never silently skip a qualifying checkpoint.",
 ].join(" ");
 function currentTurnSlice(transcript) {
     const lines = transcript.split(/\r?\n/);

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

@@ -6,28 +6,27 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
       var app = document.getElementById("app");
       var title = document.getElementById("title");
       var status = document.getElementById("status");
-      // The local bridge is authoritative. Login never gets access to history/import routes;
+      var report = null;
+      var reportEnvelope = null;
+      // The local bridge is authoritative. Login never gets access to scan/import routes;
       // onboarding may request the separate local-history permission.
       var setupFlow = "onboarding";
+      var activeScanId = "";
       var stats = null;
       var statsSlow = false;
       var decisionMade = false;
       var connected = false;
       var localHistoryConsentGranted = false;
-      var extractMounted = false;   // extraction shell mounted once; persists across /progress polls
+      var extractMounted = false;   // WebGL extraction-plate iframe mounted once; persists across /progress polls
       var lastExtractionProgress = null; // restores the live extraction view if ending fails
       var extractionRecoveryMessage = ""; // persists pause failures across resumed progress updates
       var exStartAt = 0;            // extraction start (ms) — drives the countdown
       var exDeadline = 0;           // first honest ETA deadline; passing it while running → "taking longer" banner
       var extractionEnded = false;  // user chose to leave the extraction flow before natural completion
       var progressPollRunId = 0;    // invalidates older progress loops when extraction resumes
-      var dashMounted = false;      // dashboard shell mounted once; persists across /stats polls
+      var dashMounted = false;      // dashboard shell (incl. plate iframe) mounted once; persists across /stats polls
+      var reportMounted = false;    // report shell (city iframe) mounted once; loading is an overlay on it, not a separate page
       var workspacePath = "";
-      var setupPlatform = "unknown";
-      // Preview states render before /config; production init replaces these with bridge-reported
-      // capabilities before rendering a user-facing state.
-      var canOpenClaudeDesktop = true;
-      var canOpenAgentSessions = true;
       var billingStatus = null;
       var billingStatusLoading = false;
       var setupPlanChoice = "";
@@ -52,7 +51,17 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
       // Invalidates async work started for a previously connected account.
       var accountStateEpoch = 0;
       var statsPollStarted = false;
+      var reportPollStarted = false;
+      var reportEtaDeadline = 0;
+      var reportEtaDisplaySeconds = 0;
+      var reportEtaUpdatedAt = 0;
+      var reportEtaStage = "";
+      var reportEtaStageDone = 0;
+      var reportEtaStageElapsed = 0;
+      var reportEtaObservedRate = 0;
+      var reportEtaScanId = "";
       var readyStage = "";
+      var NIGHT_HOURS = { 22: 1, 23: 1, 0: 1, 1: 1, 2: 1, 3: 1 };
 
       try {
         var storedSetupPlanChoice = sessionStorage.getItem("echomem:setup-plan:" + nonce) || "";
@@ -98,6 +107,7 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         var paths = {
           "shield-check": '<path d="M12 3 5 6v5c0 4.6 2.9 8.1 7 10 4.1-1.9 7-5.4 7-10V6l-7-3Z"/><path d="m8.8 12.1 2 2 4.4-4.5"/>',
           "folder-read": '<path d="M3 7.5h6l2-2h4.5A2.5 2.5 0 0 1 18 8v1"/><path d="M3 7.5V18a2 2 0 0 0 2 2h7"/><circle cx="17" cy="15" r="3.5"/><path d="m19.5 17.5 2 2"/>',
+          "report": '<path d="M5 20V10"/><path d="M12 20V4"/><path d="M19 20v-7"/><path d="M3 20h18"/>',
           "cloud-off": '<path d="m3 3 18 18"/><path d="M6.7 6.7A5.5 5.5 0 0 0 6.5 17H17"/><path d="M10.7 5.2A7 7 0 0 1 19 12.1 4 4 0 0 1 19.5 19"/>',
           "list-check": '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="m7.5 9 1.4 1.4L11.5 8"/><path d="M13.5 9h3"/><path d="m7.5 14 1.4 1.4 2.6-2.4"/><path d="M13.5 14h3"/>',
           "pause": '<path d="M9 7v10"/><path d="M15 7v10"/>',
@@ -108,7 +118,7 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         return '<svg class="setupGlyph" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' + (paths[name] || "") + '</g></svg>';
       }
       function setupJourney(currentStep) {
-        var labels = ["Access", "Connect", "Import", "Try Echo"];
+        var labels = ["Scan", "Report", "Connect", "Import", "Try Echo"];
         var items = labels.map(function (label, index) {
           var step = index + 1;
           var state = step < currentStep ? " is-complete" : (step === currentStep ? " is-current" : "");
@@ -123,13 +133,21 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         title.textContent = nextTitle;
         status.textContent = nextStatus;
       }
+      function setCityMode(enabled) {
+        document.body.classList.toggle("cityMode", !!enabled);
+        if (enabled) document.body.classList.remove("scanMode", "extractMode", "readyMode");
+      }
+      function setScanMode(enabled) {
+        document.body.classList.toggle("scanMode", !!enabled);
+        if (enabled) document.body.classList.remove("cityMode", "extractMode", "readyMode");
+      }
       function setExtractMode(enabled) {
         document.body.classList.toggle("extractMode", !!enabled);
-        if (enabled) document.body.classList.remove("readyMode");
+        if (enabled) document.body.classList.remove("scanMode", "readyMode");
       }
       function setReadyMode(enabled) {
         document.body.classList.toggle("readyMode", !!enabled);
-        if (enabled) document.body.classList.remove("extractMode");
+        if (enabled) document.body.classList.remove("scanMode", "cityMode", "extractMode");
       }
       function number(value) {
         return typeof value === "number" && isFinite(value) ? Math.round(value).toLocaleString() : "-";
@@ -141,6 +159,14 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         if (abs >= 1e6) return (value / 1e6).toFixed(1) + "M";
         if (abs >= 1e3) return (value / 1e3).toFixed(1) + "K";
         return String(Math.round(value));
+      }
+      function big(value) {
+        if (typeof value !== "number" || !isFinite(value)) return "-";
+        var n = Math.abs(value);
+        if (n >= 1e9) return (value / 1e9).toFixed(2) + "B";
+        if (n >= 1e6) return (value / 1e6).toFixed(1) + "M";
+        if (n >= 1e3) return Math.round(value / 1e3) + "K";
+        return String(Math.round(value));
       }
             function sleep(ms) { return new Promise(function (resolve) { setTimeout(resolve, ms); }); }
       async function fetchWithTimeout(url, options, timeoutMs) {
@@ -174,6 +200,12 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         try { data = raw ? JSON.parse(raw) : {}; } catch (_) {}
         if (!res.ok) throw new Error(data.message || data.error || raw || ("HTTP " + res.status));
         return data;
+      }
+      function metric(label, value, detail) {
+        return '<section class="metric"><p class="label">' + esc(label) + '</p><strong class="value">' + esc(value) + '</strong><p class="detail">' + esc(detail) + '</p></section>';
+      }
+      function row(label, value) {
+        return '<div class="row"><dt>' + esc(label) + '</dt><dd>' + esc(value) + '</dd></div>';
       }
                         function routeError(code) {
         if (code === "NO_PENDING_SESSIONS") return "There are no unprocessed local conversations to extract right now.";
@@ -227,18 +259,20 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
       }
       function renderLocalLogin(message) {
         var onboardingConnect = setupFlow !== "login";
+        setCityMode(false);
+        setScanMode(false);
         setExtractMode(false);
         setReadyMode(true);
         setHead("Connect EchoMem", "Local login");
         app.className = "localAuthStage localAuthWelcomeStage localAuthEmailStage";
         app.innerHTML =
-          setupJourney(2) +
+          setupJourney(3) +
           '<section class="localAuthWelcome" aria-labelledby="localAuthWelcomeTitle">' +
             '<div class="localAuthOrbScene" aria-hidden="true"><span class="localAuthOrb"></span><span class="localAuthOrbShadow"></span></div>' +
             '<div class="localAuthWelcomeCopy">' +
               '<h2 id="localAuthWelcomeTitle">' + (onboardingConnect ? 'Take your context with you.' : 'Welcome to Echo') + '</h2>' +
               (onboardingConnect
-                ? '<p class="localAuthConnectPurpose">Connect this computer to Echo to use the memories you choose across your AI tools.</p>'
+                ? '<p class="localAuthConnectPurpose">Connect this Mac to Echo to use the memories you choose across your AI tools.</p>'
                 : '') +
             '</div>' +
             '<form class="localAuthWelcomeForm" id="localAuthEmailForm">' +
@@ -263,6 +297,8 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         updateLocalAuthSendButton();
       }
       function renderLocalLoginComplete() {
+        setCityMode(false);
+        setScanMode(false);
         setExtractMode(false);
         setReadyMode(true);
         setHead("EchoMem connected", "Done");
@@ -271,7 +307,7 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
           '<section class="localAuthComplete" aria-labelledby="localAuthCompleteTitle">' +
             '<img src="/hud-assets/echo-face-cutout.png" alt="" />' +
             '<h2 id="localAuthCompleteTitle">You\'re signed in.</h2>' +
-            '<p>Return to your terminal.</p>' +
+            '<p>Return to Terminal.</p>' +
             '<p class="localAuthCompleteNext">Run <code>echomem-mcp init</code> when you\'re ready to start onboarding.</p>' +
           '</section>';
       }
@@ -311,12 +347,14 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
         }
       }
       function renderLocalOtp(message) {
+        setCityMode(false);
+        setScanMode(false);
         setExtractMode(false);
         setReadyMode(true);
         setHead("Check your email", "Local login");
         app.className = "localAuthStage localAuthWelcomeStage localAuthOtpStage";
         app.innerHTML =
-          setupJourney(2) +
+          setupJourney(3) +
           '<section class="localAuthWelcome localAuthOtpWelcome" aria-labelledby="localAuthOtpTitle">' +
             '<div class="localAuthOrbScene" aria-hidden="true"><span class="localAuthOrb"></span><span class="localAuthOrbShadow"></span></div>' +
             '<div class="localAuthWelcomeCopy">' +
@@ -405,12 +443,14 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
       function renderLocalPassphrase(mode, email, message) {
         localAuthEmail = email || localAuthEmail;
         var setupMode = mode === "setup";
+        setCityMode(false);
+        setScanMode(false);
         setExtractMode(false);
         setReadyMode(true);
         setHead(setupMode ? "Create encrypted vault" : "Unlock encrypted vault", "Local passphrase");
         app.className = "localAuthStage localAuthWelcomeStage localAuthPassphraseStage";
         app.innerHTML =
-          setupJourney(2) +
+          setupJourney(3) +
           '<section class="localAuthWelcome localAuthPassphraseWelcome">' +
             '<div class="localAuthOrbScene" aria-hidden="true"><span class="localAuthOrb"></span><span class="localAuthOrbShadow"></span></div>' +
             '<div class="localAuthWelcomeCopy">' +
@@ -471,8 +511,8 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
       }
       function onConnectClick() {
         if (!localHistoryConsentGranted) {
-          renderLocalHistoryConsent();
-          setConsentStatus("Allow local history access to continue.", "required");
+          renderLocalScanConsent();
+          setConsentStatus("Allow the local scan to continue.", "required");
           return;
         }
         if (connected) { void waitForStats(); return; }
@@ -484,4 +524,318 @@ export const SETUP_PAGE_CLIENT_CORE = String.raw `      var params = new URLSear
           signin.onclick = onConnectClick;
         });
       }
+      // Retained from the archived pencil-pie prototype: 3D pencil-sketch pies drawn on a
+      // transparent canvas so the graphite sits directly on the page background.
+      function pencilMulberry(seed) {
+        return function () {
+          var t = seed += 0x6D2B79F5;
+          t = Math.imul(t ^ t >>> 15, t | 1);
+          t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+      function drawPencilPie(cv, slices, R) {
+        var TILT = 0.48, u = R / 270;
+        var TH = 58 * u, SHLEN = 154 * u, SHANG = 14 * Math.PI / 180;
+        var density = Math.min(1.1, Math.max(0.2, u * u * 2.6));
+        cv.width = Math.round(R * 2.62);
+        cv.height = Math.round(R * 1.9);
+        var cx = R * 1.14, cy = R * 0.64;
+        var g = cv.getContext("2d");
+        var random = pencilMulberry(2117 + Math.round(R * 7) + slices.length * 131);
+        function ePoint(radius, angle, yOff) { return { x: cx + Math.cos(angle) * radius, y: cy + Math.sin(angle) * radius * TILT + (yOff || 0) }; }
+        function ePath(radius) { g.beginPath(); g.ellipse(cx, cy, radius, radius * TILT, 0, 0, Math.PI * 2); }
+        function wPath(start, sweep) {
+          var steps = Math.max(18, Math.ceil(Math.abs(sweep) / (Math.PI / 90)));
+          g.beginPath();
+          g.moveTo(cx, cy);
+          for (var i = 0; i <= steps; i++) { var p = ePoint(R, start + sweep * (i / steps), 0); g.lineTo(p.x, p.y); }
+          g.closePath();
+        }
+        function pStroke(pathFn, color, width, repeats) {
+          var rnd = pencilMulberry(808 + Math.round(width * 100) + repeats * 47);
+          for (var i = 0; i < repeats; i++) {
+            g.save();
+            g.translate((rnd() - 0.5) * 1.25, (rnd() - 0.5) * 0.8);
+            pathFn();
+            g.strokeStyle = color;
+            g.globalAlpha = 0.58 / Math.max(1, repeats * 0.64);
+            g.lineWidth = width + rnd() * 0.45;
+            g.stroke();
+            g.restore();
+          }
+        }
+        function hatchClipped(clipFn, angle, spacing, color, alpha) {
+          g.save();
+          clipFn();
+          g.clip();
+          g.translate(cx, cy);
+          g.rotate(angle);
+          g.translate(-cx, -cy);
+          g.strokeStyle = color;
+          g.globalAlpha = alpha;
+          g.lineWidth = 0.58;
+          g.lineCap = "round";
+          g.beginPath();
+          for (var x = cx - R * 1.7; x < cx + R * 1.7; x += spacing) {
+            var off = (random() - 0.5) * 2;
+            g.moveTo(x + off, cy - R);
+            g.lineTo(x + off + (random() - 0.5) * 2, cy + R);
+          }
+          g.stroke();
+          g.restore();
+        }
+        // Graphite shadow rubbed into the page beneath the disc.
+        var dx = Math.cos(SHANG) * SHLEN, dy = Math.sin(SHANG) * SHLEN;
+        var shX = cx + dx * 0.46, shY = cy + TH + 12 * u + dy * 0.42;
+        g.save();
+        g.filter = "blur(" + Math.max(2, 6 * u * 1.6).toFixed(1) + "px)";
+        g.fillStyle = "rgba(31,33,28,.05)";
+        g.beginPath();
+        g.ellipse(shX, shY, R * 1.08, R * TILT * 0.82, SHANG * 0.12, 0, Math.PI * 2);
+        g.fill();
+        g.restore();
+        var L = Math.max(0.8, u * 1.9);
+        var dust = Math.round(1380 * density), pass, i;
+        var dustTones = ["rgba(35,37,32,.028)", "rgba(35,37,32,.055)", "rgba(35,37,32,.09)"];
+        for (pass = 0; pass < 3; pass++) {
+          g.beginPath();
+          for (i = pass; i < dust; i += 3) {
+            var ring = Math.pow(random(), 0.58 + pass * 0.16), ang = random() * Math.PI * 2, trail = Math.pow(random(), 2.1);
+            g.rect(shX + Math.cos(ang) * R * 1.06 * ring + dx * trail * 0.48, shY + Math.sin(ang) * R * TILT * 0.76 * ring + dy * trail * 0.32, 0.35 + random() * (1.2 + pass * 0.28), (0.35 + random()) * (0.55 + random() * 0.8));
+          }
+          g.fillStyle = dustTones[pass];
+          g.fill();
+        }
+        var strokes = Math.round(1040 * density);
+        g.save();
+        g.lineCap = "round";
+        g.lineWidth = 0.72;
+        for (pass = 0; pass < 2; pass++) {
+          g.beginPath();
+          var cross = pass === 0 ? -0.38 : 0.46;
+          for (i = pass; i < strokes; i += 2) {
+            var ring2 = Math.pow(random(), 0.62), ang2 = random() * Math.PI * 2, trail2 = Math.pow(random(), 2.05);
+            var x0 = shX + Math.cos(ang2) * R * 1.04 * ring2 + dx * trail2 * 0.5;
+            var y0 = shY + Math.sin(ang2) * R * TILT * 0.75 * ring2 + dy * trail2 * 0.34;
+            var len = (3 + random() * (9 + (1 - ring2) * 14)) * L;
+            var sa = SHANG + cross + (random() - 0.5) * 0.15;
+            g.moveTo(x0, y0);
+            g.lineTo(x0 + Math.cos(sa) * len, y0 + Math.sin(sa) * len * 0.62);
+          }
+          g.strokeStyle = pass === 0 ? "rgba(32,34,29,.14)" : "rgba(32,34,29,.11)";
+          g.stroke();
+        }
+        g.restore();
+        // Contact crevice hugging the lower ellipse.
+        g.save();
+        g.lineCap = "round";
+        g.lineWidth = 0.9;
+        var contact = Math.round(300 * density);
+        for (pass = 0; pass < 3; pass++) {
+          g.beginPath();
+          for (i = pass; i < contact; i += 3) {
+            var cAng = random() * Math.PI;
+            var dark = 0.5 + Math.cos(cAng - SHANG) * 0.5;
+            var depth = Math.pow(random(), 2.6) * (5 + dark * 8) * L + pass * 1.2;
+            var cp = ePoint(R * (0.97 + random() * 0.045), cAng, TH + 1 + depth);
+            var tx = -Math.sin(cAng), ty = Math.cos(cAng) * TILT;
+            var norm = Math.hypot(tx, ty) || 1;
+            var cLen = (3 + random() * (8 + dark * 11)) * L;
+            g.moveTo(cp.x - tx / norm * cLen * 0.5, cp.y - ty / norm * cLen * 0.5);
+            g.lineTo(cp.x + tx / norm * cLen * 0.5, cp.y + ty / norm * cLen * 0.5);
+          }
+          g.strokeStyle = ["rgba(27,29,25,.36)", "rgba(27,29,25,.25)", "rgba(27,29,25,.16)"][pass];
+          g.stroke();
+        }
+        g.restore();
+        // Cylinder wall.
+        function sidePath() {
+          var steps = 120, k;
+          g.beginPath();
+          for (k = 0; k <= steps; k++) { var sp = ePoint(R, Math.PI * k / steps, 0); if (k === 0) g.moveTo(sp.x, sp.y); else g.lineTo(sp.x, sp.y); }
+          for (k = steps; k >= 0; k--) { var sp2 = ePoint(R, Math.PI * k / steps, TH); g.lineTo(sp2.x, sp2.y); }
+          g.closePath();
+        }
+        sidePath();
+        var sideTone = g.createLinearGradient(cx - Math.cos(SHANG) * R, cy - Math.sin(SHANG) * R * TILT, cx + Math.cos(SHANG) * R, cy + Math.sin(SHANG) * R * TILT);
+        sideTone.addColorStop(0, "#e6e1d6");
+        sideTone.addColorStop(0.47, "#d8d3c7");
+        sideTone.addColorStop(1, "#aaa79f");
+        g.fillStyle = sideTone;
+        g.fill();
+        g.strokeStyle = "rgba(39,41,35,.7)";
+        g.lineWidth = 1.5;
+        g.stroke();
+        var hatchCount = Math.round(138 * Math.max(density, 0.45));
+        g.save();
+        g.lineCap = "round";
+        g.lineWidth = 0.66;
+        for (pass = 0; pass < 3; pass++) {
+          g.beginPath();
+          for (i = 1; i < hatchCount; i++) {
+            var hAng = Math.PI * i / hatchCount;
+            var hDark = 0.5 + Math.cos(hAng - SHANG) * 0.5;
+            if (Math.min(2, Math.floor(hDark * 3)) !== pass) continue;
+            var top = ePoint(R, hAng, 0);
+            var jit = (random() - 0.5) * 4 * L;
+            g.moveTo(top.x + jit * 0.25, top.y + 2 + random() * 3);
+            g.lineTo(top.x + jit, top.y + TH - 2 - random() * 5);
+          }
+          g.strokeStyle = ["rgba(37,39,34,.13)", "rgba(37,39,34,.21)", "rgba(37,39,34,.31)"][pass];
+          g.stroke();
+        }
+        g.restore();
+        pStroke(function () { g.beginPath(); g.ellipse(cx, cy, R, R * TILT, 0, 0, Math.PI, false); }, "#272923", 1.05, 3);
+        pStroke(function () { g.beginPath(); g.ellipse(cx, cy + TH, R, R * TILT, 0, 0, Math.PI, false); }, "#22241f", 1.45, 4);
+        // Disc top.
+        ePath(R);
+        g.fillStyle = "#f1ede2";
+        g.fill();
+        hatchClipped(function () { ePath(R); }, -Math.PI / 4, Math.max(3, 8 * u * 2) / 1, "#4c4d47", 0.15);
+        pStroke(function () { ePath(R); }, "#22241f", 1.35, 3);
+        // Colored wedges: same clock as the CSS conic version (0% = 12 o'clock).
+        slices.forEach(function (slice) {
+          var pctSpan = Math.max(0, Number(slice.end || 0) - Number(slice.start || 0));
+          if (pctSpan < 0.5) return;
+          var start = (-90 + Number(slice.start || 0) * 3.6) * Math.PI / 180;
+          var sweep = pctSpan * 3.6 * Math.PI / 180;
+          wPath(start, sweep);
+          g.fillStyle = slice.color || "#778db8";
+          g.fill();
+          hatchClipped(function () { wPath(start, sweep); }, Math.PI / 5, Math.max(2.4, 5.5 * u * 2), "#26354d", 0.24);
+          pStroke(function () { wPath(start, sweep); }, "#20231f", 1.25, 3);
+          g.save();
+          wPath(start, sweep);
+          g.strokeStyle = "rgba(30,32,28,.92)";
+          g.lineWidth = 1.45;
+          g.stroke();
+          g.restore();
+        });
+        pStroke(function () { ePath(R); }, "#22241f", 1.15, 2);
+      }
+      function renderPencilPies() {
+        Array.prototype.forEach.call(document.querySelectorAll("canvas[data-pencil-pie]"), function (cv) {
+          if (cv.getAttribute("data-pie-drawn")) return;
+          cv.setAttribute("data-pie-drawn", "1");
+          var slices = [];
+          try { slices = JSON.parse(cv.getAttribute("data-slices") || "[]"); } catch (_) { slices = []; }
+          drawPencilPie(cv, slices, Number(cv.getAttribute("data-radius") || 100));
+        });
+      }
+      function bindSessionLinks() {
+        Array.prototype.forEach.call(document.querySelectorAll("[data-open-session]"), function (button) {
+          button.onclick = async function () {
+            var scope = button.closest(".audit-example-body");
+            var status = scope && scope.querySelector(".audit-session-status");
+            if (status) status.textContent = "Opening original session…";
+            try {
+              var result = await postJson("/open-session", {
+                source: button.getAttribute("data-session-source"),
+                sessionId: button.getAttribute("data-session-id")
+              }, 8000);
+              if (status) status.textContent = result && result.message ? result.message : "Original session opened.";
+            } catch (error) {
+              if (status) status.textContent = error && error.message ? error.message : "Could not open the original session.";
+            }
+          };
+        });
+      }
+      function bindDetailsArrow() {
+        var arrow = document.getElementById("details-arrow");
+        var target = document.getElementById("setup-details");
+        if (arrow && target) {
+          arrow.onclick = function () { target.scrollIntoView({ behavior: "smooth", block: "start" }); };
+        }
+      }
+      function bindCityFieldnote() {
+        window.addEventListener("message", function (event) {
+          if (event.origin !== location.origin) return;
+          var data = event.data || {};
+          if (data.type !== "echomem:city-fieldnote") return;
+          var note = document.getElementById("city-fieldnote");
+          if (!note) return;
+          var sig = JSON.stringify([data.name, data.rank, data.lede]);
+          if (note._fnSig === sig) return;
+          note._fnSig = sig;
+          var save = fnSavings();
+          var saveLine = save
+            ? '<p class="fn-save">I can help you get the same things done with ' +
+                '<b class="fn-num" data-kind="days" data-target="' + save.days + '">0 days</b> and ' +
+                '<b class="fn-num" data-kind="tokens" data-target="' + save.tokens + '">0 tokens</b> <b class="fn-less">less</b>.</p>'
+            : '';
+          note.innerHTML =
+            '<div class="fn-speak">' +
+              (data.avatar ? '<img src="' + esc(data.avatar) + '" alt="" />' : '') +
+              '<div class="fn-bubble"><h2>hey, <b>' + esc(data.name || "") + '</b><span class="fn-dot">.</span></h2>' + saveLine + '</div>' +
+            '</div>' +
+            (data.rank ? '<p class="fn-rank">' + data.rank + (data.guide ? '<button class="fn-info" type="button" aria-label="What do these types mean?">i</button>' : '') + '</p>' : '') +
+            (data.lede ? '<p class="fn-lede">' + data.lede + '</p>' : '');
+          var infoBtn = note.querySelector(".fn-info");
+          if (infoBtn) infoBtn.onclick = function () { openPersonaGuide(data.guide); };
+          fnAnimateNums(note);
+        });
+      }
+      // The taxonomy quote: every persona kind Echo can assign, with the user's own
+      // rank/rhythm/personality highlighted. Data rides in from the city iframe.
+      function openPersonaGuide(guide) {
+        var dlg = document.getElementById("echo-note");
+        if (!dlg || !guide) return;
+        dlg.classList.remove("example");
+        var cur = guide.current || {};
+        function rows(list, curLabel) {
+          return (list || []).map(function (t) {
+            var you = t.label === curLabel;
+            return '<div class="fn-guide-row' + (you ? ' is-you' : '') + '"><b>' + esc(t.label) + '</b>' + (you ? '<i>you</i>' : '') + '<span> &mdash; ' + esc(t.blurb) + '</span></div>';
+          }).join("");
+        }
+        document.getElementById("echo-note-k").textContent = "Persona guide";
+        document.getElementById("echo-note-t").textContent = "How Echo reads you";
+        document.getElementById("echo-note-b").innerHTML =
+          '<p class="fn-guide-sec">Personality &middot; ' + (guide.traits || []).length + ' kinds</p>' + rows(guide.traits, cur.primary) +
+          '<p class="fn-guide-sec">Rank &middot; ' + (guide.ranks || []).length + ' levels</p>' + rows(guide.ranks, cur.rank) +
+          '<p class="fn-guide-sec">Rhythm &middot; ' + (guide.rhythms || []).length + ' kinds</p>' + rows(guide.rhythms, cur.rhythm);
+        var cl = dlg.querySelector(".nclose");
+        if (cl) cl.onclick = function () { dlg.close(); };
+        dlg.onclick = function (e) { if (e.target === dlg) dlg.close(); };
+        if (dlg.showModal) dlg.showModal(); else dlg.setAttribute("open", "");
+      }
+      // Savings projection. BOTH figures apply the canonical terminal-window noise share to the
+      // FULL ledger, so they share one basis: days = waste share of total attention hours; tokens =
+      // projected waste share of total provider-billed input. The absolute token figure is a
+      // calibrated projection because intermediate requests are billed but not independently scored.
+      function fnSavings() {
+        var r = report || {};
+        var gs = gsClean(r.canonicalGoldenStandard);
+        if (!gs) return null;
+        var pct = gsDisplayWastePct(gs);
+        var projection = gsBillingProjection(r, gs);
+        var tokens = Number(projection.projectedWasteTokens || 0);
+        var wh = r.userWorkingHours || {};
+        var hours = Number(wh.userAttentionHours || 0) * pct / 100;
+        var perDay = Number(wh.averageDailyAttentionHours || 0);
+        var days = Math.round(perDay > 0 ? hours / perDay : hours / 8);
+        if (!tokens && !days) return null;
+        return { tokens: tokens, days: days };
+      }
+      function fnAnimateNums(root) {
+        var els = root.querySelectorAll(".fn-num");
+        if (!els.length) return;
+        var DURATION = 1500, t0 = null;
+        function label(kind, value) {
+          if (kind === "days") return number(value) + " days";
+          return big(value) + " tokens";
+        }
+        function step(ts) {
+          if (t0 === null) t0 = ts;
+          var p = Math.min(1, (ts - t0) / DURATION);
+          var eased = 1 - Math.pow(1 - p, 3);
+          Array.prototype.forEach.call(els, function (el) {
+            var target = Number(el.getAttribute("data-target") || 0);
+            el.textContent = label(el.getAttribute("data-kind"), Math.round(target * eased));
+          });
+          if (p < 1) requestAnimationFrame(step);
+        }
+        requestAnimationFrame(step);
+      }
 `;