npm - @echomem/mcp - Versions diffs - 1.4.7 → 1.4.9 - Mend

@echomem/mcp 1.4.7 → 1.4.9

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

Files changed (46) hide show

package/README.md +35 -9
package/assets/canonical-scorer/README.md +18 -0
package/assets/canonical-scorer/analyze-10-problems.mjs +857 -0
package/assets/canonical-scorer/build-session-waste-dashboard.mjs +1628 -0
package/assets/canonical-scorer/golden_anchors.mjs +83 -0
package/assets/canonical-scorer/optimizable_detail.mjs +633 -0
package/assets/hud/claude.svg +1 -0
package/assets/hud/codex.svg +1 -0
package/assets/hud/session-viewer.html +35 -0
package/dist/city/chaos-to-clarity-pencil.html +582 -0
package/dist/city/echo-ai-city-only.html +1126 -109
package/dist/city/echo-ai-city-only.template.html +1126 -109
package/dist/city/echo-face-cutout.png +0 -0
package/dist/city/pencil-pie-generator.html +883 -0
package/dist/city/pencil-webgl-landscape.html +1239 -0
package/dist/city/spatial-fan-story.html +479 -0
package/dist/codex-session-files.js +283 -0
package/dist/codex-sync.js +7 -2
package/dist/context-analysis/canonical-golden.js +47 -0
package/dist/context-analysis/claude-native-canonical.js +1193 -0
package/dist/context-analysis/vendored-canonical.js +793 -0
package/dist/context-analysis/workspace-report.js +1838 -0
package/dist/context-metrics/calculate.js +56 -0
package/dist/context-metrics/model-limits.js +26 -0
package/dist/context-metrics/types.js +1 -0
package/dist/forensics-10-problems.js +7 -6
package/dist/forensics.js +863 -132
package/dist/hud/adapters.js +8 -4
package/dist/hud/autostart.js +66 -0
package/dist/hud/cli.js +31 -0
package/dist/hud/electron-main.js +182 -19
package/dist/hud/metric.js +13 -4
package/dist/hud/monitor.js +171 -84
package/dist/hud/preload.cjs +3 -0
package/dist/hud/server.js +321 -4
package/dist/hud/web.js +880 -270
package/dist/index.js +122 -24
package/dist/local-data-paths.js +87 -0
package/dist/migrate.js +55 -29
package/dist/report.js +101 -40
package/dist/setup-page.js +4257 -245
package/dist/setup-preview.js +245 -0
package/dist/setup.js +786 -75
package/dist/v1-contract.js +20 -2
package/package.json +6 -4
package/templates/echomem-recall.md +2 -2

package/dist/hud/web.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { MCP_PACKAGE_VERSION } from "../package-metadata.js";
 export const HUD_HTML = String.raw `<!doctype html>
 <html lang="en">
   <head>
@@ -39,6 +38,11 @@ export const HUD_HTML = String.raw `<!doctype html>
         -webkit-font-smoothing: antialiased;
         cursor: grab;
       }
+      #hud.capture-preview {
+        position: fixed;
+        top: 0;
+        left: 0;
+      }
       #hud.dragging { cursor: grabbing; }
       .glance {
         position: relative;
@@ -129,24 +133,31 @@ export const HUD_HTML = String.raw `<!doctype html>
         min-width: 0;
         display: grid;
         grid-template-columns: minmax(0, 1fr);
-        gap: 4px;
-        padding: 20px 38px 18px 30px;
+        gap: 2px;
+        padding: 15px 38px 11px 30px;
       }
       .dot {
         position: absolute;
-        left: 14px;
-        top: 23px;
+        left: 13px;
+        top: 22px;
         z-index: 3;
-        width: 10px;
-        height: 10px;
+        width: 12px;
+        height: 12px;
         border: 2px solid #fdfaf2;
         border-radius: 999px;
         background: var(--green);
         box-shadow: 0 0 0 1px rgba(26, 58, 143, 0.14);
       }
       .dot.amber { background: var(--amber); }
-      .dot.red { background: #ff5f57; }
-      .dot.idle { background: #c9c5b8; }
+      .dot.red, .state-dot.red, #miniPill .mdot.red {
+        background: #ff5f57;
+        animation: red-pulse 1.15s ease-in-out infinite;
+      }
+      .dot.idle { background: var(--green); }
+      @keyframes red-pulse {
+        0%, 100% { box-shadow: 0 0 0 1px rgba(199, 55, 47, 0.18), 0 0 0 0 rgba(255, 95, 87, 0.34); transform: scale(1); }
+        50% { box-shadow: 0 0 0 1px rgba(199, 55, 47, 0.18), 0 0 0 7px rgba(255, 95, 87, 0); transform: scale(1.18); }
+      }
       .main {
         min-width: 0;
         overflow: hidden;
@@ -163,20 +174,37 @@ export const HUD_HTML = String.raw `<!doctype html>
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
-        font-size: 10px;
-        letter-spacing: 0.12em;
+        font-size: 10.5px;
+        font-weight: 720;
+        letter-spacing: 0;
+        line-height: 1;
+        color: var(--faint);
+      }
+      .client-repo {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 9.5px;
+        font-weight: 620;
         line-height: 1;
-        text-transform: uppercase;
         color: var(--faint);
       }
+      .client.voice {
+        font-family: inherit;
+        font-size: 11.5px;
+        font-weight: 750;
+        letter-spacing: 0.01em;
+        text-transform: none;
+        color: var(--brick);
+      }
       .details {
         display: none;
         position: relative;
-        margin: 2px 8px 0 24px;
+        margin: 2px 8px 0 8px;
         padding: 16px 17px 15px;
         border: 1px solid var(--line);
-        border-radius: 16px;
+        border-radius: 12px;
         background: var(--card);
         color: var(--ink);
         filter: var(--shadow);
@@ -197,28 +225,139 @@ export const HUD_HTML = String.raw `<!doctype html>
         font-size: 11px;
         color: var(--faint);
       }
-      .tabs { display: flex; gap: 6px; overflow-x: auto; margin: 2px 0 12px; padding-bottom: 2px; }
-      .tabs::-webkit-scrollbar { height: 0; }
+      .tabs {
+        display: grid;
+        gap: 6px;
+        max-height: 259px;
+        margin: 2px 0 12px;
+        padding-right: 3px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+      .tabs:empty { display: none; }
+      .tabs::-webkit-scrollbar { width: 4px; }
+      .tabs::-webkit-scrollbar-track { background: transparent; }
+      .tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(26, 58, 143, .2); }
       .tab {
-        flex: 0 0 auto; font-size: 10.5px; line-height: 1; padding: 5px 10px; border-radius: 999px;
+        display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px; align-items: center; column-gap: 8px;
+        width: 100%; min-height: 36px; font-size: 11px; line-height: 1.15; padding: 6px 9px; border-radius: 8px;
         border: 1px solid rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .04);
-        color: var(--faint); cursor: pointer; white-space: nowrap; font-family: inherit;
+        color: var(--faint); cursor: pointer; text-align: left; font-family: inherit;
       }
       .tab:hover { background: rgba(0, 0, 0, .08); }
-      .tab.active { border-color: rgba(0, 0, 0, .38); background: rgba(0, 0, 0, .10); color: #111; font-weight: 700; }
+      .tab.viewing {
+        border-color: rgba(26, 58, 143, .72);
+        background: rgba(26, 58, 143, .11);
+        box-shadow: inset 4px 0 0 var(--blue), 0 1px 4px rgba(26, 58, 143, .12);
+        color: #111;
+      }
+      .tab-icon { width: 16px; height: 16px; object-fit: contain; }
+      .tab-copy { min-width: 0; display: grid; gap: 2px; }
+      .tab-title, .tab-repo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tab-title { color: var(--ink); font-weight: 760; }
+      .tab-repo { color: var(--faint); font-size: 10px; font-weight: 600; }
+      .tab-status {
+        width: 10px;
+        height: 10px;
+        justify-self: end;
+        border: 2px solid #fff;
+        border-radius: 50%;
+        background: var(--green);
+        box-shadow: 0 0 0 1px rgba(26, 58, 143, .18);
+      }
+      .tab-status.amber { background: var(--amber); }
+      .tab-status.red { background: #ff5f57; box-shadow: 0 0 0 1px rgba(199, 55, 47, .28); }
+      .tab-status.idle { background: var(--faint); }
+      .tab.auto-tab {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        grid-template-columns: minmax(0, 1fr) auto;
+        min-height: 28px;
+        background: #f4f2ed;
+      }
+      .tab.auto-tab.mode-active {
+        border-color: rgba(26, 58, 143, .28);
+        background: #f8f8f5;
+      }
+      .auto-check {
+        display: none;
+        width: 17px;
+        height: 17px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: var(--blue);
+        color: #fff;
+        font-size: 10px;
+        font-weight: 850;
+      }
+      .auto-tab.mode-active .auto-check { display: inline-flex; }
       .spin {
-        display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px;
+        display: inline-block; width: 8px; height: 8px; margin-left: 4px; vertical-align: -1px;
         border: 1.5px solid rgba(0, 0, 0, .2); border-top-color: #1a3a8f; border-radius: 50%;
         animation: echospin .8s linear infinite;
       }
       @keyframes echospin { to { transform: rotate(360deg); } }
+      /* Mini mode: a small always-on pill instead of the full mascot+bubble. Opening the panel
+         temporarily shows the full layout; closing returns to the pill. */
+      #miniPill {
+        display: none; align-items: center; gap: 8px; width: calc(100% - 16px); min-height: 38px;
+        margin: 7px 0 0 8px; padding: 5px 11px; cursor: pointer; user-select: none;
+        border: 1.6px solid rgba(26, 58, 143, 0.75); border-radius: 999px; background: #fdfaf2;
+        filter: var(--shadow); color: var(--ink); letter-spacing: 0;
+      }
+      #miniPill .mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
+      #miniPill .mdot.amber { background: var(--amber); }
+      #miniPill .mdot.idle { background: var(--green); }
+      .micon { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
+      #mscore {
+        flex: 0 0 auto;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 12px;
+        font-weight: 850;
+      }
+      .mcopy { min-width: 0; display: grid; gap: 1px; line-height: 1.1; }
+      #msession, #mrepo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      #msession { font-size: 11.5px; font-weight: 760; color: var(--ink); }
+      #mrepo { font-size: 10px; font-weight: 650; color: var(--faint); }
+      #hud.mini:not(.open) .glance { height: 52px; }
+      #hud.mini:not(.open) .mascot-stage, #hud.mini:not(.open) .status-bubble, #hud.mini:not(.open) .drag { display: none; }
+      #hud.mini:not(.open) #miniPill { display: inline-flex; }
+      .cornerbtn {
+        position: absolute; top: 7px; right: 10px; z-index: 3;
+        width: 20px; height: 20px; border-radius: 50%; padding: 0; line-height: 1; font-size: 12px;
+        border: 1px solid rgba(0, 0, 0, .16); background: rgba(255, 255, 255, .7); color: var(--faint);
+        cursor: pointer; font-family: inherit;
+      }
+      .cornerbtn:hover { background: #fff; color: #111; }
       .headctl { display: flex; align-items: center; gap: 8px; }
       .switchbtn {
+        display: inline-flex; align-items: center; justify-content: center;
         width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1; font-size: 12px;
         border: 1px solid rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .05); color: var(--faint);
         cursor: pointer; font-family: inherit;
       }
       .switchbtn:hover { background: rgba(0, 0, 0, .1); color: #111; }
+      .agent-switch {
+        width: 28px;
+        min-width: 28px;
+        max-width: 28px;
+        height: 28px;
+        padding: 0;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, .78);
+        color: #1f1f1f;
+        font-size: 10.5px;
+        font-weight: 760;
+        letter-spacing: 0;
+        white-space: nowrap;
+      }
+      .agent-switch:hover { background: #fff; border-color: rgba(26, 58, 143, .34); }
+      .agent-switch[data-target-family="claude"] { border-color: rgba(217, 119, 87, .42); }
+      .agent-switch[data-target-family="codex"] { border-color: rgba(57, 65, 255, .34); }
+      .switch-icon { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; }
+      .switch-copy { display: none; }
       .reveal {
         margin-top: 8px; font-size: 10.5px; padding: 4px 11px; border-radius: 999px;
         border: 1px solid rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .04); color: var(--faint);
@@ -229,87 +368,75 @@ export const HUD_HTML = String.raw `<!doctype html>
         display: flex;
         align-items: center;
         gap: 9px;
-        margin-bottom: 7px;
+        margin-bottom: 9px;
       }
       .state-dot {
-        width: 11px;
-        height: 11px;
+        width: 12px;
+        height: 12px;
         flex: none;
         border-radius: 999px;
         background: var(--green);
         box-shadow: 0 0 0 1px rgba(26, 58, 143, 0.12);
       }
       .state-dot.amber { background: var(--amber); }
-      .state-dot.red { background: #ff5f57; }
       .state-word {
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 16px;
-        font-weight: 800;
-      }
-      .full {
-        min-height: 17px;
-        margin-bottom: 14px;
-        font-size: 12px;
-        font-weight: 650;
-        color: #4a7a3e;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 18px;
+        font-weight: 850;
       }
-      .lead {
-        margin-bottom: 5px;
-        font-size: 13.5px;
+      .why-btn {
+        margin-left: auto;
+        border: 1px solid rgba(26, 58, 143, 0.16);
+        border-radius: 999px;
+        padding: 4px 10px;
+        background: rgba(26, 58, 143, 0.04);
+        color: var(--muted);
+        font-family: inherit;
+        font-size: 11px;
         font-weight: 750;
-        color: #2f7d4f;
+        cursor: pointer;
       }
-      .evidence {
-        min-height: 38px;
-        margin-bottom: 12px;
-        color: var(--muted);
+      .why-btn:hover { background: rgba(26, 58, 143, 0.09); color: var(--ink); }
+      .full {
+        min-height: 16px;
+        margin-bottom: 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         font-size: 12.5px;
-        line-height: 1.5;
+        font-weight: 800;
+        color: var(--ink);
       }
-      .oldbar {
-        display: flex;
-        height: 9px;
-        margin: 0;
+      .lead {
+        margin-bottom: 0;
         overflow: hidden;
-        border-radius: 999px;
-        background: var(--track);
-      }
-      .oldbar span {
-        display: block;
-        height: 100%;
-        min-width: 0;
-        transition: width 0.35s ease;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 11px;
+        font-weight: 650;
+        color: var(--faint);
       }
-      .oldbar .useful { width: 100%; background: var(--blue); }
-      .oldbar .old { width: 0; background: var(--brick); }
-      .alert {
+      .evidence {
         display: none;
-        margin-top: 13px;
-        padding: 9px 0 9px 12px;
-        border-left: 3px solid rgba(199, 55, 47, 0.42);
-      }
-      .alert-title {
-        margin-bottom: 4px;
-        color: var(--brick);
-        font-size: 12.5px;
-        font-weight: 750;
-      }
-      .alert-detail {
+        margin: 11px 0 12px;
+        padding: 9px 10px;
+        border: 1px solid rgba(26, 58, 143, 0.12);
+        border-radius: 8px;
+        background: rgba(26, 58, 143, 0.035);
         color: var(--muted);
         font-size: 12px;
-        line-height: 1.45;
-      }
-      .nudge {
-        display: none;
-        margin-top: 13px;
-        padding: 10px 12px;
-        border-radius: 12px;
-        font-size: 12.5px;
-        line-height: 1.45;
+        line-height: 1.5;
       }
+      #hud.show-why .evidence { display: block; }
+      .why-line { display: flex; justify-content: space-between; gap: 12px; }
+      .why-line + .why-line { margin-top: 3px; }
+      .why-k { color: var(--faint); }
+      .why-v { color: var(--ink); font-weight: 750; text-align: right; }
+      .nudge { display: none; }
       .nudge.calm {
         border: 1px solid rgba(26, 58, 143, 0.14);
         background: rgba(26, 58, 143, 0.05);
@@ -324,29 +451,48 @@ export const HUD_HTML = String.raw `<!doctype html>
         display: none;
         width: 100%;
         margin-top: 12px;
-        border: 1px solid rgba(199, 55, 47, 0.3);
+        border: 1px solid rgba(26, 58, 143, 0.26);
         border-radius: 999px;
-        padding: 9px 10px;
-        background: rgba(199, 55, 47, 0.08);
-        color: var(--brick);
+        padding: 9px 14px;
+        background: rgba(26, 58, 143, 0.07);
+        color: var(--blue);
         font-weight: 750;
-        font-size: 13px;
+        font-size: 12px;
         cursor: pointer;
-        transition: background 0.2s ease, opacity 0.2s ease;
+        transition: all 0.25s ease;
       }
-      button.renew-btn:hover { background: rgba(199, 55, 47, 0.14); }
-      button.renew-btn:active { background: rgba(199, 55, 47, 0.22); }
-      button.renew-btn.loading { opacity: 0.6; cursor: wait; }
+      button.renew-btn.urgent {
+        border-color: var(--blue);
+        padding: 11px 14px;
+        background: var(--blue);
+        color: #fff;
+        font-size: 13px;
+        font-weight: 800;
+        box-shadow: 0 4px 12px rgba(26, 58, 143, 0.22);
+      }
+      button.renew-btn b { font-weight: 800; }
+      button.renew-btn small { display: none; }
+      button.renew-btn.urgent small, button.renew-btn.loading small {
+        display: block;
+        margin-top: 3px;
+        font-size: 10.5px;
+        font-weight: 600;
+        opacity: 0.85;
+        white-space: normal;
+      }
+      button.renew-btn:hover { background: rgba(26, 58, 143, 0.12); }
+      button.renew-btn.urgent:hover { background: #102d78; }
+      button.renew-btn.loading { width: 100%; opacity: 0.75; cursor: wait; }
       .renew-result {
         display: none;
         margin-top: 10px;
         border: 1px solid rgba(26, 58, 143, 0.18);
-        border-radius: 12px;
+        border-radius: 8px;
         background: rgba(26, 58, 143, 0.04);
         padding: 10px 12px;
       }
       .renew-result .renew-msg {
-        margin-bottom: 6px;
+        margin-bottom: 0;
         color: var(--blue);
         font-size: 11.5px;
         font-weight: 750;
@@ -383,7 +529,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         color: var(--faint);
         font-size: 11px;
       }
-      .meta { margin-top: 13px; }
+      .meta { display: none; }
       .path { margin-top: 8px; }
       .missing { margin-top: 6px; }
       #hud.s-green .mascot-stage { filter: drop-shadow(0 2px 6px rgba(67, 209, 122, 0.3)); }
@@ -426,33 +572,34 @@ export const HUD_HTML = String.raw `<!doctype html>
           <span class="copy">
             <span class="main" id="main">Checking context...</span>
             <span class="client" id="client">EchoMem HUD</span>
+            <span class="client-repo" id="clientrepo"></span>
           </span>
+          <button class="cornerbtn" id="minibtn" title="Shrink to mini pill">&ndash;</button>
+        </div>
+        <div id="miniPill" title="EchoMem — click to expand">
+          <span class="mdot" id="mdot"></span>
+          <img class="micon" id="micon" src="/assets/hud/codex.svg" alt="" />
+          <span id="mscore">on</span>
+          <span class="mcopy"><span id="msession">EchoMem</span><span id="mrepo"></span></span>
         </div>
       </div>
       <div class="details">
-        <div class="head"><span class="upd" id="updated"></span><span class="headctl"><span class="turn" id="turn"></span><button class="switchbtn" id="switchbtn" title="Switch agent" style="display:none">⇄</button></span></div>
+        <div class="head"><span class="upd" id="updated"></span><span class="headctl"><span class="turn" id="turn"></span><button class="switchbtn agent-switch" id="switchbtn" title="Switch agent" style="display:none" type="button"></button></span></div>
         <div class="tabs" id="tabs"></div>
         <div class="state-row">
           <span class="state-dot" id="stateDot"></span>
-          <span class="state-word" id="stateWord">Fresh</span>
+          <span class="state-word" id="stateWord">--%</span>
+          <button class="why-btn" id="whybtn" type="button" style="display:none">why</button>
         </div>
         <div class="full" id="fullness"></div>
-        <div class="lead" id="lead">Clean and roomy</div>
-        <div class="evidence" id="evidence">Collecting enough local context to judge the window.</div>
-        <div class="oldbar" aria-hidden="true">
-          <span class="useful" id="usefulbar"></span>
-          <span class="old" id="oldbar"></span>
-        </div>
-        <div class="alert" id="alert">
-          <div class="alert-title" id="alertTitle"></div>
-          <div class="alert-detail" id="alertDetail"></div>
-        </div>
+        <div class="lead" id="lead"></div>
+        <div class="evidence" id="evidence"></div>
         <div class="nudge" id="nudge"></div>
-        <button class="renew-btn" id="renewbtn">Renew session</button>
+        <button class="renew-btn" id="renewbtn">Start new with context</button>
         <div class="renew-result" id="renewresult">
           <div class="renew-msg" id="renewmsg"></div>
           <pre id="renewpre"></pre>
-          <button class="copy-btn" id="copybtn">Copy to clipboard</button>
+          <button class="copy-btn" id="copybtn">Copy</button>
         </div>
         <div class="meta" id="meta"></div>
         <div class="path" id="path"></div>
@@ -465,17 +612,14 @@ export const HUD_HTML = String.raw `<!doctype html>
       const dot = document.getElementById("dot");
       const main = document.getElementById("main");
       const client = document.getElementById("client");
+      const clientRepo = document.getElementById("clientrepo");
       const turnEl = document.getElementById("turn");
       const stateDot = document.getElementById("stateDot");
       const stateWordEl = document.getElementById("stateWord");
+      const whyBtn = document.getElementById("whybtn");
       const fullness = document.getElementById("fullness");
       const lead = document.getElementById("lead");
       const evidence = document.getElementById("evidence");
-      const usefulbar = document.getElementById("usefulbar");
-      const oldbar = document.getElementById("oldbar");
-      const alertEl = document.getElementById("alert");
-      const alertTitle = document.getElementById("alertTitle");
-      const alertDetail = document.getElementById("alertDetail");
       const nudge = document.getElementById("nudge");
       const renewBtn = document.getElementById("renewbtn");
       const renewResult = document.getElementById("renewresult");
@@ -489,12 +633,55 @@ export const HUD_HTML = String.raw `<!doctype html>
       const switchBtn = document.getElementById("switchbtn");
       const revealEl = document.getElementById("reveal");
       const missing = document.getElementById("missing");
-      const hudVersion = "v${MCP_PACKAGE_VERSION}";
       let prevTurnState = null;
       let lastCapsule = "";
+      let renewResultSessionKey = "";
       let activityEpoch = null;
       let lastState = null;
       let currentSrc = null;
+      let renewTimer = null;
+      let renewStartMs = 0;
+      let renewEta = null;
+      let renewEstimateSeq = 0;
+      const CHECKPOINT_CACHE_KEY = "echomemHudCheckpointCacheV2";
+      const CHECKPOINT_CACHE_LIMIT = 24;
+      const CHECKPOINT_CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+      const CHECKPOINT_STATUS_CACHE_KEY = "echomemHudCheckpointStatusV2";
+      const CHECKPOINT_STATUS_CACHE_LIMIT = 48;
+      const CHECKPOINT_STATUS_CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+      const statusFetchInFlight = {};
+      // Demo-clean mode: hide only the research-y session VIEWER (raw log / payload). Keep the session
+      // tabs + agent-switch — they're the manual override for "we can't detect which session you're
+      // viewing", so the user can always point the HUD at the right session. Flip false to show the viewer.
+      const DEMO_CLEAN = true;
+      // Mini mode: resting state is a small pill; opening the panel shows the full layout, closing
+      // returns to the pill. Preference persists (localStorage here, window size in main's bounds file).
+      const miniBtn = document.getElementById("minibtn");
+      const mdot = document.getElementById("mdot");
+      const micon = document.getElementById("micon");
+      const mscore = document.getElementById("mscore");
+      const msession = document.getElementById("msession");
+      const mrepo = document.getElementById("mrepo");
+      let miniOn = false;
+      let whyOpen = false;
+      try { miniOn = localStorage.getItem("echomemHudMini") === "1"; } catch {}
+      if (miniOn) hud.classList.add("mini");
+      function applyMini(next) {
+        miniOn = next;
+        try { localStorage.setItem("echomemHudMini", next ? "1" : "0"); } catch {}
+        hud.classList.toggle("mini", next);
+        if (next) hud.classList.remove("open");
+        if (window.echomemHud && typeof window.echomemHud.setMini === "function") window.echomemHud.setMini(next);
+      }
+      if (miniBtn) miniBtn.addEventListener("click", (e) => { e.stopPropagation(); applyMini(true); });
+      if (whyBtn) whyBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        whyOpen = !whyOpen;
+        hud.classList.toggle("show-why", whyOpen);
+        whyBtn.textContent = whyOpen ? "hide" : "why";
+        syncHeight();
+      });
       let hudDrag = null;
       let suppressNextToggle = false;
       const dragBlockSelector = "button, input, textarea, select, a, pre, .tab, .switchbtn, .reveal, .renew-btn, .copy-btn";
@@ -509,7 +696,8 @@ export const HUD_HTML = String.raw `<!doctype html>
         if (event.target.closest(dragBlockSelector)) return;
         if (!window.echomemHud || typeof window.echomemHud.startDrag !== "function") return;
         hudDrag = { pointerId: event.pointerId, startX: event.screenX, startY: event.screenY, moved: false };
-        try { hud.setPointerCapture(event.pointerId); } catch {}
+        // NOTE: do NOT setPointerCapture here — capturing on pointerdown re-targets the click to #hud,
+        // so #toggle never gets it and the panel can't expand. Capture only once a real drag starts.
         window.echomemHud.startDrag(event.screenX, event.screenY);
       }
@@ -519,6 +707,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         const dx = event.screenX - hudDrag.startX;
         const dy = event.screenY - hudDrag.startY;
         if (!hudDrag.moved && Math.hypot(dx, dy) < 3) return;
+        if (!hudDrag.moved) { try { hud.setPointerCapture(hudDrag.pointerId); } catch {} }
         hudDrag.moved = true;
         hud.classList.add("dragging");
         window.echomemHud.moveDrag(event.screenX, event.screenY);
@@ -544,17 +733,11 @@ export const HUD_HTML = String.raw `<!doctype html>
         fetch("/open-viewer?path=" + encodeURIComponent(currentSrc)).catch(() => {});
       });
-      // Circular top-right toggle: jump to the next agent's newest session (Claude ⇄ Codex).
+      // Jump to the other agent family while the tabs stay scoped to the family you're viewing.
       if (switchBtn) switchBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         const st = lastState;
-        if (!st || !st.recentSessions) return;
-        const clients = [];
-        for (const s of st.recentSessions) if (clients.indexOf(s.client) < 0) clients.push(s.client);
-        if (clients.length < 2) return;
-        const cur = st.active ? st.active.client : clients[0];
-        const next = clients[(clients.indexOf(cur) + 1) % clients.length];
-        const target = st.recentSessions.filter((s) => s.client === next)[0]; // newest of that agent
+        const target = switchTarget(st, st && st.active && st.active.client);
         if (!target) return;
         fetch("/select?id=" + encodeURIComponent(target.id))
           .then(() => fetch("/state"))
@@ -582,35 +765,83 @@ export const HUD_HTML = String.raw `<!doctype html>
           event.stopPropagation();
           return;
         }
-        if (event.target instanceof HTMLElement && event.target.closest(".switchbtn")) return;
+        if (event.target instanceof HTMLElement && (event.target.closest(".switchbtn") || event.target.closest(".cornerbtn"))) return;
         hud.classList.toggle("open");
         syncHeight();
       });
+      let renewUrgent = false;
+      function refreshRenewLabel() {
+        if (!renewBtn) return;
+        renewBtn.classList.toggle("urgent", renewUrgent);
+        if (renewStartMs) {
+          renderRenewLoadingLabel();
+          return;
+        }
+        renewBtn.textContent = "Start new with context";
+      }
       if (renewBtn) renewBtn.addEventListener("click", async () => {
+        if (renewStartMs) return;
+        const stateAtRenew = lastState;
+        const scoreAtRenew = activeRenewScore();
+        const renewSessionKey = sessionKeyFor(stateAtRenew, scoreAtRenew);
         renewBtn.classList.add("loading");
-        renewBtn.textContent = "Capturing...";
+        clearRenewResult();
+        startRenewTimer(scoreAtRenew);
         try {
-          const res = await fetch("/capsule");
-          const data = await res.json();
-          if (!data.ok) {
-            renewBtn.textContent = "Renew session";
-            renewBtn.classList.remove("loading");
+          // Cloud extraction (coding checkpoint) produces the real decision-log carryover. If that is
+          // unavailable, fall back transparently to a basic local capsule instead of the same artifact.
+          let prompt = "";
+          let promptKind = "cloud";
+          let renewData = null;
+          try {
+            const res = await fetch("/renew");
+            const data = await res.json();
+            if (data.ok && data.carryover) {
+              prompt = data.carryover;
+              renewData = data;
+            }
+          } catch {}
+          if (!prompt) {
+            const cap = await (await fetch("/capsule")).json();
+            if (cap.ok && cap.capsule) {
+              promptKind = "local";
+              prompt = localCapsulePrompt(cap.capsule);
+            }
+          }
+          if (!prompt) {
             return;
           }
-          const prompt = "Continue my previous session. Verify anything that references file state before trusting it.\n\n" + data.capsule;
-          lastCapsule = prompt;
-          if (renewPre) renewPre.textContent = prompt;
-          if (renewMsg) renewMsg.textContent = "Open a new session and paste this:";
-          if (renewResult) renewResult.style.display = "block";
+          if (renewSessionKey !== sessionKeyFor(lastState, activeRenewScore())) return;
+          const meta = checkpointMetaFor(scoreAtRenew);
+          if (renewData) {
+            meta.contextId = typeof renewData.contextId === "string" ? renewData.contextId : "";
+            meta.sessionMemoryCount = Number.isFinite(Number(renewData.sessionMemoryCount)) ? Number(renewData.sessionMemoryCount) : 0;
+            meta.saved = Number.isFinite(Number(renewData.saved)) ? Number(renewData.saved) : 0;
+            meta.renewedAt = Date.now();
+          }
+          saveCachedCheckpoint(renewSessionKey, prompt, promptKind, meta);
+          if (promptKind === "cloud") saveCheckpointStatus(renewSessionKey, statusFromRenewData(renewData, meta));
+          showRenewResult({
+            sessionKey: renewSessionKey,
+            prompt,
+            message: promptKind === "local" ? "Local capsule ready" : "Decision log ready",
+            canCopy: true,
+          });
           try {
             await navigator.clipboard.writeText(prompt);
-            if (renewMsg) renewMsg.textContent = "Copied. Open a new session and paste:";
-          } catch {}
-        } catch {}
-        renewBtn.textContent = "Renew session";
-        renewBtn.classList.remove("loading");
-        syncHeight();
+            if (renewMsg) renewMsg.textContent = promptKind === "local" ? "Local capsule copied" : "Decision log copied";
+          } catch {
+            if (renewMsg) renewMsg.textContent = promptKind === "local" ? "Local capsule ready" : "Decision log ready";
+          }
+        } catch {
+        } finally {
+          stopRenewTimer();
+          renewBtn.classList.remove("loading");
+          refreshRenewLabel();
+          syncHeight();
+        }
       });
       if (copyBtn) copyBtn.addEventListener("click", async () => {
@@ -618,66 +849,422 @@ export const HUD_HTML = String.raw `<!doctype html>
         try {
           await navigator.clipboard.writeText(lastCapsule);
           copyBtn.textContent = "Copied";
-          setTimeout(() => { copyBtn.textContent = "Copy to clipboard"; }, 1500);
+          setTimeout(() => { copyBtn.textContent = "Copy"; }, 1500);
         } catch {}
       });
-      const events = new EventSource("/events");
-      events.onmessage = (event) => render(JSON.parse(event.data));
-      fetch("/state").then((r) => r.json()).then(render).catch(() => {});
+      function activeRenewScore() {
+        const st = lastState || {};
+        return st.active || st;
+      }
+      function sessionKeyFor(state, score) {
+        if (!score || !score.sourcePath) return "";
+        const clientName = String(score.client || "");
+        const src = String(score.sourcePath || "");
+        const list = (state && state.recentSessions) || [];
+        const match = list.filter((s) => s.client === clientName && s.sourcePath === src)[0];
+        return clientName + "::" + (match && match.id ? match.id : src);
+      }
+      function clearRenewResult() {
+        lastCapsule = "";
+        renewResultSessionKey = "";
+        if (renewPre) {
+          renewPre.textContent = "";
+          renewPre.style.display = "none";
+        }
+        if (renewMsg) renewMsg.textContent = "";
+        if (copyBtn) {
+          copyBtn.textContent = "Copy";
+          copyBtn.style.display = "";
+        }
+        if (renewResult) renewResult.style.display = "none";
+      }
+      function showRenewResult(opts) {
+        const prompt = String((opts && opts.prompt) || "");
+        const body = String((opts && opts.body) || prompt || "");
+        lastCapsule = prompt;
+        renewResultSessionKey = String((opts && opts.sessionKey) || "");
+        if (renewMsg) renewMsg.textContent = String((opts && opts.message) || "");
+        if (renewPre) {
+          renewPre.textContent = body;
+          renewPre.style.display = "none";
+        }
+        if (copyBtn) {
+          copyBtn.textContent = "Copy";
+          copyBtn.style.display = opts && opts.canCopy ? "inline-block" : "none";
+        }
+        if (renewResult) renewResult.style.display = "block";
+        syncHeight();
+      }
+      function checkpointMetaFor(score) {
+        return {
+          turn: Number(score && score.turn) || 0,
+          ctTokens: Number(score && score.ctTokens) || 0,
+          createdAt: Date.now(),
+        };
+      }
+      function saveCachedCheckpoint(key, prompt, kind, meta) {
+        if (!key || !prompt) return;
+        const next = readCheckpointCache().filter((item) => item.key !== key);
+        next.unshift({
+          key,
+          prompt: String(prompt),
+          kind: kind === "local" ? "local" : "cloud",
+          turn: Number(meta && meta.turn) || 0,
+          ctTokens: Number(meta && meta.ctTokens) || 0,
+          createdAt: Number(meta && meta.createdAt) || Date.now(),
+          renewedAt: Number(meta && meta.renewedAt) || Number(meta && meta.createdAt) || Date.now(),
+          contextId: typeof (meta && meta.contextId) === "string" ? meta.contextId : "",
+          sessionMemoryCount: Number.isFinite(Number(meta && meta.sessionMemoryCount)) ? Number(meta.sessionMemoryCount) : null,
+          saved: Number.isFinite(Number(meta && meta.saved)) ? Number(meta.saved) : null,
+        });
+        try { localStorage.setItem(CHECKPOINT_CACHE_KEY, JSON.stringify(next.slice(0, CHECKPOINT_CACHE_LIMIT))); } catch {}
+      }
+      function readCheckpointCache() {
+        try {
+          const cutoff = Date.now() - CHECKPOINT_CACHE_TTL_MS;
+          const raw = JSON.parse(localStorage.getItem(CHECKPOINT_CACHE_KEY) || "[]");
+          return Array.isArray(raw)
+            ? raw.filter((item) => item && typeof item.key === "string" && typeof item.prompt === "string" && Number(item.createdAt || 0) >= cutoff)
+            : [];
+        } catch {
+          return [];
+        }
+      }
+      function cachedCheckpointFor(key) {
+        return readCheckpointCache().filter((item) => item.key === key)[0] || null;
+      }
+      function restoreCachedCheckpointFor(score, key) {
+        if (!key || renewStartMs || renewResultSessionKey === key) return false;
+        const cached = cachedCheckpointFor(key);
+        if (!cached) return false;
+        showRenewResult({
+          sessionKey: key,
+          prompt: cached.prompt,
+          message: cachedCheckpointMessage(score, cached),
+          canCopy: true,
+        });
+        return true;
+      }
+      function cachedCheckpointMessage(score, cached) {
+        const savedTurn = Number(cached && cached.turn) || 0;
+        const currentTurn = Number(score && score.turn) || 0;
+        const stale = savedTurn > 0 && currentTurn > savedTurn;
+        const summary = checkpointSummary(cached);
+        if (cached && cached.kind === "local") {
+          return savedTurn > 0 ? "Local capsule from turn " + savedTurn + checkpointSuffix(summary) : "Local capsule ready" + checkpointSuffix(summary);
+        }
+        return savedTurn > 0 && stale
+          ? "Decision log from turn " + savedTurn + checkpointSuffix(summary)
+          : "Decision log ready" + checkpointSuffix(summary);
+      }
+      function statusFromRenewData(data, meta) {
+        return {
+          fetched: true,
+          hasCheckpoint: Boolean(data && data.ok),
+          contextId: typeof (data && data.contextId) === "string" ? data.contextId : String((meta && meta.contextId) || ""),
+          renewedAt: Number(meta && meta.renewedAt) || Date.now(),
+          memoryCount: Number.isFinite(Number(data && data.sessionMemoryCount)) ? Number(data.sessionMemoryCount) : Number(meta && meta.sessionMemoryCount) || 0,
+          checkpointMemoryId: "",
+        };
+      }
+      function checkpointSummary(item) {
+        const parts = [];
+        const renewedAt = timestampMs(item && item.renewedAt);
+        if (renewedAt) parts.push("renewed " + relTime(Date.now() - renewedAt));
+        const count = Number(item && (item.memoryCount ?? item.sessionMemoryCount));
+        if (Number.isFinite(count) && count > 0) parts.push(count + " " + (count === 1 ? "memory" : "memories") + " saved");
+        return parts.join(" · ");
+      }
+      function checkpointSuffix(summary) {
+        return summary ? " · " + summary : "";
+      }
+      function timestampMs(value) {
+        if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+        if (typeof value === "string" && value) {
+          const ms = Date.parse(value);
+          return Number.isFinite(ms) ? ms : 0;
+        }
+        return 0;
+      }
+      function readCheckpointStatusCache() {
+        try {
+          const cutoff = Date.now() - CHECKPOINT_STATUS_CACHE_TTL_MS;
+          const raw = JSON.parse(localStorage.getItem(CHECKPOINT_STATUS_CACHE_KEY) || "[]");
+          return Array.isArray(raw)
+            ? raw.filter((item) => item && typeof item.key === "string" && item.fetched === true && Number(item.fetchedAt || 0) >= cutoff)
+            : [];
+        } catch {
+          return [];
+        }
+      }
+      function cachedCheckpointStatusFor(key) {
+        return readCheckpointStatusCache().filter((item) => item.key === key)[0] || null;
+      }
+      function saveCheckpointStatus(key, status) {
+        if (!key || !status) return;
+        const next = readCheckpointStatusCache().filter((item) => item.key !== key);
+        const fetchedAt = status.unavailable ? Date.now() - CHECKPOINT_STATUS_CACHE_TTL_MS + 60 * 1000 : Date.now();
+        next.unshift({
+          key,
+          fetched: true,
+          fetchedAt,
+          unavailable: Boolean(status.unavailable),
+          hasCheckpoint: Boolean(status.hasCheckpoint),
+          contextId: typeof status.contextId === "string" ? status.contextId : "",
+          checkpointMemoryId: typeof status.checkpointMemoryId === "string" ? status.checkpointMemoryId : "",
+          renewedAt: status.renewedAt || null,
+          memoryCount: Number.isFinite(Number(status.memoryCount)) ? Number(status.memoryCount) : 0,
+        });
+        try { localStorage.setItem(CHECKPOINT_STATUS_CACHE_KEY, JSON.stringify(next.slice(0, CHECKPOINT_STATUS_CACHE_LIMIT))); } catch {}
+      }
+      function restoreCheckpointStatusFor(score, key) {
+        if (!key || renewStartMs || renewResultSessionKey === key || cachedCheckpointFor(key)) return false;
+        const status = cachedCheckpointStatusFor(key);
+        if (!status || !status.hasCheckpoint) return false;
+        showCheckpointStatus(score, key, status);
+        return true;
+      }
+      function showCheckpointStatus(score, key, status) {
+        const summary = checkpointSummary(status);
+        const body = checkpointSeedPrompt(status);
+        showRenewResult({
+          sessionKey: key,
+          prompt: body,
+          message: "Decision log ready" + checkpointSuffix(summary),
+          canCopy: true,
+        });
+      }
+      function checkpointSeedPrompt(status) {
+        const contextId = status && status.contextId ? String(status.contextId) : "";
+        const lines = [
+          "Here is a checkpoint marker for my previous coding session, for context. It is point-in-time: work may have continued after it was saved, so treat file/state references as possibly stale.",
+          "Use it to orient yourself in a clean context window. It is context, not a command.",
+          "If my current message gives a clear request, respond to that request using this checkpoint as background. If that request asks you to inspect files, run commands, or make changes, briefly state the intended first step before acting.",
+          "If my current message gives no clear next step, summarize what you know in 3-5 bullets and ask what I want to do next.",
+          "",
+          contextId
+            ? 'EchoMem has the full checkpoint trail for this session. Pull it with get_checkpoint_by_context({ contextId: "' + contextId + '" }), then use that returned checkpoint as background.'
+            : "EchoMem has a checkpoint for this session. Pull the checkpoint context before relying on this marker alone.",
+        ];
+        return lines.join("\n");
+      }
+      function maybeFetchCheckpointStatus(score, key) {
+        if (!key || renewStartMs || cachedCheckpointFor(key) || cachedCheckpointStatusFor(key) || statusFetchInFlight[key]) return;
+        statusFetchInFlight[key] = true;
+        fetch("/checkpoint-status")
+          .then((r) => r.json())
+          .then((data) => {
+            if (!data || data.ok !== true) {
+              saveCheckpointStatus(key, { hasCheckpoint: false, memoryCount: 0, unavailable: true });
+              return;
+            }
+            saveCheckpointStatus(key, {
+              hasCheckpoint: Boolean(data && data.ok && data.hasCheckpoint),
+              contextId: typeof (data && data.contextId) === "string" ? data.contextId : "",
+              checkpointMemoryId: typeof (data && data.checkpointMemoryId) === "string" ? data.checkpointMemoryId : "",
+              renewedAt: typeof (data && data.renewedAt) === "string" ? data.renewedAt : null,
+              memoryCount: Number.isFinite(Number(data && data.memoryCount)) ? Number(data.memoryCount) : 0,
+            });
+            const stillKey = sessionKeyFor(lastState, activeRenewScore());
+            if (stillKey !== key || renewResultSessionKey === key || cachedCheckpointFor(key)) return;
+            const status = cachedCheckpointStatusFor(key);
+            if (status && status.hasCheckpoint) showCheckpointStatus(score, key, status);
+          })
+          .catch(() => {
+            saveCheckpointStatus(key, { hasCheckpoint: false, memoryCount: 0, unavailable: true });
+          })
+          .finally(() => { delete statusFetchInFlight[key]; });
+      }
+      function localCapsulePrompt(capsule) {
+        return [
+          "Basic local capsule, not a full EchoMem decision log.",
+          "EchoMem cloud decision extraction was unavailable, so this fallback was built from local session signals such as goal, latest instruction, file anchors, and context-health numbers. It may miss decisions or product nuance from the discussion.",
+          "Use it to orient yourself in a clean context window. The user's current message decides whether to continue, redirect, or only preserve context. Do not inspect files, run commands, or start work until intent is clear.",
+          "",
+          String(capsule || ""),
+        ].join("\n");
+      }
+      function startRenewTimer(score) {
+        const seq = ++renewEstimateSeq;
+        renewEta = { ms: fallbackEtaForScore(score || activeRenewScore()) };
+        renewStartMs = Date.now();
+        if (renewTimer) clearInterval(renewTimer);
+        renderRenewLoadingLabel();
+        renewTimer = setInterval(renderRenewLoadingLabel, 1000);
+        fetch("/renew-estimate")
+          .then((r) => r.json())
+          .then((data) => {
+            if (seq !== renewEstimateSeq || !renewStartMs) return;
+            if (data && data.ok && Number.isFinite(Number(data.etaMs))) {
+              renewEta = { ms: Number(data.etaMs) };
+              renderRenewLoadingLabel();
+            }
+          })
+          .catch(() => {});
+      }
+      function stopRenewTimer() {
+        if (renewTimer) clearInterval(renewTimer);
+        renewTimer = null;
+        renewStartMs = 0;
+        renewEta = null;
+        renewEstimateSeq += 1;
+      }
+      function renderRenewLoadingLabel() {
+        if (!renewBtn || !renewStartMs) return;
+        const elapsed = Date.now() - renewStartMs;
+        const remaining = Math.max(0, Number(renewEta && renewEta.ms) || 20000) - elapsed;
+        const detail = remaining > 0 ? "ETA " + fmtDuration(remaining) + " left" : "ETA any moment";
+        renewBtn.innerHTML = "<b>Preparing context&hellip;</b><small>" + esc(detail) + "</small>";
+      }
+      function fallbackEtaForScore(score) {
+        const n = Number(score && score.ctTokens) || 0;
+        if (n <= 5000) return 10000;
+        if (n <= 10000) return 12000;
+        if (n <= 25000) return 15000;
+        if (n <= 50000) return 18000;
+        if (n <= 100000) return 20000;
+        return 45000;
+      }
+      function fmtDuration(ms) {
+        const s = Math.max(0, Math.ceil(Number(ms || 0) / 1000));
+        if (s < 60) return s + "s";
+        const m = Math.floor(s / 60);
+        const r = s % 60;
+        return r ? m + "m " + r + "s" : m + "m";
+      }
+      // Dev/design preview: ?preview=green|amber|red renders that health state with sample data and
+      // skips the live feed — same pattern as the extraction page's ?preview hook.
+      const previewParams = new URLSearchParams(location.search);
+      const previewColor = previewParams.get("preview");
+      const previewPinned = previewParams.get("pinned") === "1";
+      if (previewParams.get("capture") === "1") hud.classList.add("capture-preview");
+      if (previewColor === "green" || previewColor === "amber" || previewColor === "red") {
+        const sample = {
+          client: "codex",
+          label: "EchoMem-Chrome",
+          sourcePath: previewPinned ? "/preview/b.jsonl" : "/preview/session.jsonl",
+          usefulPct: previewColor === "red" ? 55 : previewColor === "amber" ? 75 : 95,
+          healthScorePct: previewColor === "red" ? 48 : previewColor === "amber" ? 72 : 96,
+          color: previewColor,
+          ctTokens: previewColor === "red" ? 165000 : previewColor === "amber" ? 110000 : 24000,
+          modelContextWindow: 258000,
+          pollutionPct: previewColor === "red" ? 45 : previewColor === "amber" ? 24 : 4,
+          pollutionTok: previewColor === "red" ? 74000 : previewColor === "amber" ? 26000 : 900,
+          buckets: { range_redundant: { count: previewColor === "red" ? 61 : previewColor === "amber" ? 18 : 0 } },
+          stats: { patchEdits: 90 },
+          turn: 28,
+          lastActiveMs: 6000,
+          ctSource: "measured",
+        };
+        render({
+          active: sample,
+          pinnedId: previewPinned ? "p2" : null,
+          recentSessions: [
+            { id: "p1", client: "codex", title: "Simplify HUD session display", label: "EchoMem-Chrome", sourcePath: "/preview/session.jsonl", live: true },
+            { id: "p2", client: "codex", title: "修复 HUD 切换和图标", label: "EchoMem-Chrome", sourcePath: "/preview/b.jsonl", live: false },
+            { id: "p3", client: "codex", title: "Fix extraction preview", label: "EchoMem-Chrome", sourcePath: "/preview/c.jsonl", live: false },
+            { id: "p4", client: "codex", title: "Port Claude work", label: "EchoMem-Chrome", sourcePath: "/preview/d.jsonl", live: false },
+            { id: "p5", client: "codex", title: "Stamp fixes with Echo mascot", label: "EchoMem-Chrome", sourcePath: "/preview/e.jsonl", live: false },
+            { id: "p6", client: "codex", title: "Review migration checks", label: "EchoMem-Chrome", sourcePath: "/preview/f.jsonl", live: false },
+            { id: "p7", client: "codex", title: "Polish setup story", label: "EchoMem-Chrome", sourcePath: "/preview/g.jsonl", live: false },
+            { id: "p8", client: "claude-code", title: "DG-Web refactor", label: "DG-Web", sourcePath: "/preview/h.jsonl", live: false },
+          ],
+        });
+        hud.classList.add("open");
+        syncHeight();
+      } else {
+        const events = new EventSource("/events");
+        events.onmessage = (event) => render(JSON.parse(event.data));
+        fetch("/state").then((r) => r.json()).then(render).catch(() => {});
+      }
       function render(state) {
         const score = state.active || state;
         lastState = state;
-        renderTabs(state, score && score.sourcePath ? activeIdFor(state, score.sourcePath) : null);
-        if (switchBtn) {
-          const clients = [];
-          for (const s of (state.recentSessions || [])) if (clients.indexOf(s.client) < 0) clients.push(s.client);
-          switchBtn.style.display = clients.length >= 2 ? "inline-block" : "none";
-        }
+        const activeClient = score && score.client ? score.client : state && state.active && state.active.client;
+        const currentSessionKey = sessionKeyFor(state, score);
+        const viewColor = score && typeof score.usefulPct === "number" ? (score.color || "green") : "idle";
+        if (renewResultSessionKey && renewResultSessionKey !== currentSessionKey) clearRenewResult();
+        const hasSessionSwitcher = renderTabs(state, score && score.sourcePath ? activeIdFor(state, score.sourcePath, activeClient) : null, activeClient, viewColor);
+        renderSwitchButton(state, activeClient);
         if (!score || typeof score.usefulPct !== "number") {
           renderIdle(state);
           return;
         }
         const color = score.color || "green";
-        const stateName = stateWord(color);
         const sat = fullnessPct(score);
         const oldPct = clamp(score.pollutionPct || 0, 0, 95);
+        const health = healthScore(score);
         const repeatCount = score.buckets && score.buckets.range_redundant ? score.buckets.range_redundant.count || 0 : 0;
-        const edits = score.stats && score.stats.patchEdits ? Number(score.stats.patchEdits) : 0;
-        // A session idle for >10 min shouldn't wear the cheerful "Fresh/clean" look — its quality
-        // numbers are stale. Show it muted as Idle so a 47h-old pinned session never reads as current.
-        const stale = typeof score.lastActiveMs === "number" && score.lastActiveMs > 600000;
-        const shownColor = stale ? "idle" : color;
-        dot.className = "dot " + shownColor;
-        stateDot.className = stale ? "state-dot" : "state-dot " + color;
+        const info = activeSessionInfo(score, state);
+        dot.className = "dot " + color;
+        stateDot.className = "state-dot " + color;
         hud.classList.remove("s-green", "s-amber", "s-red");
-        if (!stale) hud.classList.add("s-" + color);
-        main.textContent = (stale ? "Idle" : stateName) + " - " + fmt(score.ctTokens) + " ctx";
-        client.textContent = sessionIdentity(score, state);
+        hud.classList.add("s-" + color);
+        main.textContent = health + "%";
+        renderMini(color, health + "%", info);
+        client.textContent = info.title || info.repo;
+        if (clientRepo) clientRepo.textContent = info.repo && info.repo !== info.title ? info.repo : "";
+        client.classList.remove("voice");
         activityEpoch = typeof score.lastActiveMs === "number" ? Date.now() - score.lastActiveMs : null;
         renderUpdated();
         turnEl.textContent = typeof score.turn === "number" && score.turn > 0 ? "turn " + score.turn : "";
-        stateWordEl.textContent = stale ? "Idle" : stateName;
-        fullness.textContent = fullnessLine(sat, score);
-        fullness.style.color = stale ? "#6b675d" : tone(color);
-        lead.textContent = stale ? "This session is idle - showing its last state" : leadLine(color);
-        lead.style.color = stale ? "#6b675d" : tone(color);
-        evidence.textContent = evidenceLine(score, oldPct, repeatCount);
-        usefulbar.style.width = Math.max(0, 100 - oldPct) + "%";
-        oldbar.style.width = oldPct + "%";
-        metaEl.textContent = ctSourceLabel(score.ctSource) + " - lower-bound signal - " + edits + " edits";
+        stateWordEl.textContent = health + "%";
+        fullness.textContent = hasSessionSwitcher ? "" : info.title;
+        fullness.style.display = hasSessionSwitcher ? "none" : "block";
+        fullness.style.color = "";
+        lead.textContent = hasSessionSwitcher ? "" : (info.repo && info.repo !== info.title ? info.repo : "");
+        lead.style.display = hasSessionSwitcher || !lead.textContent ? "none" : "block";
+        lead.style.color = "";
+        renderWhy(score, oldPct, repeatCount, sat, health, color);
+        metaEl.textContent = "";
         pathEl.textContent = "";
         currentSrc = score.sourcePath || null;
-        if (revealEl) revealEl.style.display = currentSrc ? "inline-block" : "none";
+        if (revealEl) revealEl.style.display = !DEMO_CLEAN && currentSrc ? "inline-block" : "none";
         missing.textContent = formatMissing(state.missing);
-        renderAlert(score, oldPct, repeatCount);
-        renderNudge(color, sat);
+        nudge.style.display = "none";
-        if (renewBtn) renewBtn.style.display = "block"; // always available — warm-start any session, even fresh
+        renewUrgent = color === "red";
+        if (renewBtn) {
+          renewBtn.style.display = "block";
+          refreshRenewLabel();
+        }
+        const restoredPrompt = restoreCachedCheckpointFor(score, currentSessionKey);
+        if (!restoredPrompt) {
+          const restoredStatus = restoreCheckpointStatusFor(score, currentSessionKey);
+          if (!restoredStatus) maybeFetchCheckpointStatus(score, currentSessionKey);
+        }
         prevTurnState = {
           src: score.sourcePath,
           turn: score.turn,
@@ -694,92 +1281,62 @@ export const HUD_HTML = String.raw `<!doctype html>
         stateDot.className = "state-dot";
         hud.classList.remove("s-green", "s-amber", "s-red");
         prevTurnState = null;
-        main.textContent = "No active session yet";
-        client.textContent = "EchoMem HUD - " + hudVersion;
+        main.textContent = "MCP on";
+        renderMini("idle", "on", { client: "EchoMem", title: "MCP", repo: "" });
+        client.textContent = "Waiting for Codex or Claude";
+        if (clientRepo) clientRepo.textContent = "";
+        client.classList.remove("voice");
         activityEpoch = null;
         if (updatedEl) updatedEl.textContent = "";
         currentSrc = null;
         if (revealEl) revealEl.style.display = "none";
         turnEl.textContent = "";
-        stateWordEl.textContent = "Fresh";
-        fullness.textContent = "";
-        lead.textContent = "Waiting for a live Codex or Claude session";
+        stateWordEl.textContent = "on";
+        fullness.textContent = "EchoMem MCP";
+        fullness.style.display = "block";
+        lead.textContent = "Waiting for Codex or Claude";
+        lead.style.display = "block";
         lead.style.color = "#6b675d";
-        evidence.textContent = "Start working and EchoMem will show when the context is still clean, drifting, or ready to renew.";
-        usefulbar.style.width = "100%";
-        oldbar.style.width = "0";
-        alertEl.style.display = "none";
+        evidence.textContent = "";
+        if (whyBtn) whyBtn.style.display = "none";
+        whyOpen = false;
+        hud.classList.remove("show-why");
         nudge.style.display = "none";
         if (renewBtn) renewBtn.style.display = "none";
-        if (renewResult) renewResult.style.display = "none";
+        clearRenewResult();
         metaEl.textContent = "";
         pathEl.textContent = "";
         missing.textContent = formatMissing(state && state.missing);
         syncHeight();
       }
-      function renderAlert(score, oldPct, repeatCount) {
-        if (!alertEl) return;
-        const turnChanged = prevTurnState && prevTurnState.src === score.sourcePath && score.turn !== prevTurnState.turn;
-        const dCt = turnChanged ? (score.ctTokens || 0) - prevTurnState.ct : 0;
-        const dReads = turnChanged ? (score.reads || 0) - prevTurnState.reads : 0;
-        const dRep = turnChanged ? repeatCount - prevTurnState.repeat : 0;
-        const dOld = turnChanged ? (score.pollutionTok || 0) - prevTurnState.oldTok : 0;
-        if (dRep > 0 || dOld > 2000) {
-          alertTitle.textContent = "this turn re-read what it already had";
-          alertDetail.textContent = joinParts([
-            dOld > 0 ? "+" + fmt(dOld) + " old weight" : "",
-            dReads > 0 ? "+" + dReads + " read" + (dReads === 1 ? "" : "s") : "0 new files",
-            dCt !== 0 ? signedFmt(dCt) + " ctx" : "",
-          ]);
-          alertEl.style.display = "block";
-          return;
-        }
-        if (score.color === "red") {
-          alertTitle.textContent = "context has drifted";
-          alertDetail.textContent = "at least " + oldPct + "% old weight is still riding in the window";
-          alertEl.style.display = "block";
-          return;
-        }
-        alertEl.style.display = "none";
-      }
-      function renderNudge(color, sat) {
-        let text = "";
-        let cls = "nudge";
-        if (color === "red") {
-          text = "A fresh start now beats pushing past this - keep the goal, drop the clutter.";
-          cls += " red";
-        } else if (color === "amber" || sat >= 75) {
-          text = "Still fine - a fresh start soon will keep this snappy.";
-          cls += " calm";
-        }
-        nudge.textContent = text;
-        nudge.className = cls;
-        nudge.style.display = text ? "block" : "none";
-      }
-      function stateWord(color) {
-        if (color === "red") return "Drifted";
-        if (color === "amber") return "Drifting";
-        return "Fresh";
-      }
-      function leadLine(color) {
-        if (color === "red") return "Working from a cluttered desk";
-        if (color === "amber") return "Old context is building up";
-        return "Clean and roomy";
-      }
-      function evidenceLine(score, oldPct, repeatCount) {
-        const repeat = repeatCount > 0 ? repeatCount + " repeated read" + (repeatCount === 1 ? "" : "s") : "nothing has been re-read yet";
-        return "at least " + oldPct + "% old weight (" + fmt(score.pollutionTok) + ") - " + repeat;
+      function renderMini(color, scoreText, info) {
+        if (mdot) mdot.className = "mdot " + color;
+        if (micon) micon.src = iconForFamily(agentFamily(info && info.clientRaw) || "codex");
+        if (mscore) mscore.textContent = scoreText;
+        if (msession) msession.textContent = miniTitle(info);
+        if (mrepo) mrepo.textContent = info && info.repo ? info.repo : "";
       }
-      function fullnessLine(sat, score) {
-        if (!score.modelContextWindow) return fmt(score.ctTokens) + " context tokens";
-        const room = sat >= 85 ? " - compaction near" : sat <= 30 ? " - plenty of room" : "";
-        return sat + "% full - " + fmt(score.ctTokens) + " / " + fmt(score.modelContextWindow) + room;
+      function renderWhy(score, oldPct, repeatCount, sat, health, color) {
+        const rows = [];
+        rows.push(["score", health + "%"]);
+        if (sat > 0) rows.push(["context", score.modelContextWindow ? sat + "% full" : fmt(score.ctTokens) + " tokens"]);
+        if (oldPct > 0 || score.pollutionTok > 0) rows.push(["old context", fmt(score.pollutionTok || 0) + " (" + Math.round(oldPct) + "%)"]);
+        if (repeatCount > 0) rows.push(["repeated reads", String(repeatCount)]);
+        rows.push(["source", ctSourceLabel(score.ctSource)]);
+        evidence.innerHTML = rows.map((row) => '<div class="why-line"><span class="why-k">' + esc(row[0]) + '</span><span class="why-v">' + esc(row[1]) + "</span></div>").join("");
+        const useful = color !== "green" || oldPct >= 10 || repeatCount > 0 || sat >= 80;
+        if (whyBtn) {
+          whyBtn.style.display = useful ? "inline-flex" : "none";
+          whyBtn.textContent = whyOpen ? "hide" : "why";
+        }
+        if (!useful) {
+          whyOpen = false;
+          hud.classList.remove("show-why");
+        } else {
+          hud.classList.toggle("show-why", whyOpen);
+        }
       }
       function fullnessPct(score) {
@@ -788,10 +1345,10 @@ export const HUD_HTML = String.raw `<!doctype html>
         return 0;
       }
-      function tone(color) {
-        if (color === "red") return "#c7372f";
-        if (color === "amber") return "#8a6a12";
-        return "#2f7d4f";
+      function healthScore(score) {
+        if (typeof score.healthScorePct === "number" && isFinite(score.healthScorePct)) return clamp(score.healthScorePct, 0, 100);
+        if (typeof score.usefulPct === "number" && isFinite(score.usefulPct)) return clamp(score.usefulPct, 0, 100);
+        return 0;
       }
       function ctSourceLabel(src) {
@@ -804,34 +1361,95 @@ export const HUD_HTML = String.raw `<!doctype html>
         return "Not seeing " + list.map(label).join(", ") + " yet";
       }
-      // Subtitle: which session this is (client + project) + version. The "other clients working"
-      // signal now lives in the live-spinner tabs, so it's dropped here to keep the line short.
-      function sessionIdentity(score) {
-        const parts = [label(score.client)];
-        if (score.label) parts.push(score.label);
-        parts.push(hudVersion);
-        return parts.join(" · ");
+      function activeSessionInfo(score, state) {
+        const list = (state && state.recentSessions) || [];
+        const match = list.filter((s) => s.client === score.client && s.sourcePath === score.sourcePath)[0];
+        const repo = String((match && match.label) || score.label || "");
+        const title = String((match && match.title) || repo || label(score.client));
+        return {
+          client: label(score.client),
+          clientRaw: score.client,
+          title,
+          repo,
+        };
       }
-      // Recent sessions as switchable tabs. "Auto" clears the pin. Hidden when there's only one session.
-      function renderTabs(state, activeId) {
-        if (!tabsEl) return;
+      function miniTitle(info) {
+        if (!info) return "EchoMem";
+        const title = info.title && info.title !== info.client ? info.title : info.repo;
+        return title || info.client;
+      }
+      function renderSwitchButton(state, activeClient) {
+        if (!switchBtn) return;
+        const target = switchTarget(state, activeClient);
+        if (!target) {
+          switchBtn.style.display = "none";
+          switchBtn.removeAttribute("data-target-family");
+          switchBtn.removeAttribute("data-target-id");
+          switchBtn.innerHTML = "";
+          return;
+        }
+        const family = agentFamily(target.client);
+        const name = family === "claude" ? "Claude" : "Codex";
+        switchBtn.dataset.targetFamily = family;
+        switchBtn.dataset.targetId = target.id;
+        switchBtn.title = "Switch to " + name;
+        switchBtn.innerHTML = '<img class="switch-icon" src="' + iconForFamily(family) + '" alt="" /><span class="switch-copy">Switch to ' + name + "</span>";
+        switchBtn.style.display = "inline-flex";
+      }
+      function switchTarget(state, activeClient) {
         const list = (state && state.recentSessions) || [];
-        if (list.length <= 1) { tabsEl.innerHTML = ""; return; }
+        if (!list.length) return null;
+        const currentFamily = agentFamily(activeClient || (state.active && state.active.client));
+        const targetFamily = currentFamily === "codex" ? "claude" : currentFamily === "claude" ? "codex" : "";
+        if (!targetFamily) return null;
+        return list.filter((s) => agentFamily(s.client) === targetFamily)[0] || null;
+      }
+      // Recent sessions as switchable rows. "Auto" clears the pin. Hidden when there's only one
+      // session for the active agent family, so Codex never recommends Claude sessions or vice versa.
+      function renderTabs(state, activeId, activeClient, viewColor) {
+        if (!tabsEl) return false;
+        const list = visibleRecentSessions(state, activeClient);
+        if (list.length <= 1) { tabsEl.innerHTML = ""; return false; }
+        const pinnedId = state && state.pinnedId ? state.pinnedId : null;
         const chips = list.map((s) => {
-          const cls = s.id === activeId ? "tab active" : "tab";
-          const dot = s.live ? '<span class="spin"></span>' : "";
+          const viewing = s.id === activeId;
+          const cls = "tab" + (viewing ? " viewing" : "") + (s.id === pinnedId ? " pinned" : "");
+          const activity = s.live && !viewing ? '<span class="spin"></span>' : "";
+          const status = viewing ? '<span class="tab-status ' + esc(viewColor || "idle") + '" aria-label="Current session health"></span>' : "";
           const title = s.title || label(s.client);
-          return '<button class="' + cls + '" data-id="' + esc(s.id) + '" title="' + esc(label(s.client) + " · " + title) + '">' + dot + esc(shortTitle(title)) + "</button>";
+          const repo = s.label && s.label !== title ? s.label : "";
+          const family = agentFamily(s.client);
+          return '<button class="' + cls + '" data-id="' + esc(s.id) + '"' + (viewing ? ' aria-current="true"' : "") + ' title="' + esc((viewing ? "Currently viewing · " : "") + label(s.client) + " · " + title + (repo ? " · " + repo : "")) + '">'
+            + '<img class="tab-icon" src="' + iconForFamily(family) + '" alt="" />'
+            + '<span class="tab-copy"><span class="tab-title">' + esc(title) + activity + '</span><span class="tab-repo">' + esc(repo || label(s.client)) + "</span></span>" + status + "</button>";
         });
-        chips.unshift('<button class="tab' + (activeId ? "" : " active") + '" data-id="auto">Auto</button>');
+        chips.unshift('<button class="tab auto-tab' + (pinnedId ? "" : " mode-active") + '" data-id="auto" title="' + (pinnedId ? "Use Auto selection" : "Auto selection is on") + '"><span class="tab-title">Auto</span><span class="auto-check" aria-hidden="true">&#10003;</span></button>');
         tabsEl.innerHTML = chips.join("");
+        return true;
       }
-      function activeIdFor(state, src) {
+      function visibleRecentSessions(state, activeClient) {
         const list = (state && state.recentSessions) || [];
+        const family = agentFamily(activeClient);
+        if (family !== "codex" && family !== "claude") return list;
+        return list.filter((s) => agentFamily(s.client) === family);
+      }
+      function activeIdFor(state, src, activeClient) {
+        const list = visibleRecentSessions(state, activeClient);
         const match = list.filter((s) => s.sourcePath === src)[0];
         return match ? match.id : null;
       }
+      function agentFamily(clientName) {
+        if (clientName === "codex") return "codex";
+        if (String(clientName || "").indexOf("claude") === 0) return "claude";
+        return "";
+      }
+      function iconForFamily(family) {
+        return family === "claude" ? "/assets/hud/claude.svg" : "/assets/hud/codex.svg";
+      }
       function shortTitle(t) {
         t = String(t || "");
         return t.length > 22 ? t.slice(0, 21) + "…" : t;
@@ -868,14 +1486,6 @@ export const HUD_HTML = String.raw `<!doctype html>
         return String(Math.round(n));
       }
-      function signedFmt(value) {
-        return (value >= 0 ? "+" : "-") + fmt(Math.abs(value));
-      }
-      function joinParts(parts) {
-        return parts.filter(Boolean).join(" - ");
-      }
       function clamp(value, min, max) {
         return Math.max(min, Math.min(max, Number(value) || 0));
       }