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

@echomem/mcp 1.4.9 → 1.4.10

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

Files changed (48) hide show

package/assets/hud/github.svg +1 -0
package/dist/city/README.md +9 -0
package/dist/city/echo-ai-city-only.html +54 -93
package/dist/context-analysis/claude-canonical-adapter.js +315 -0
package/dist/context-analysis/claude-native-canonical.js +35 -12
package/dist/context-metrics/calculate.js +2 -15
package/dist/context-metrics/estimator.js +45 -0
package/dist/context-metrics/ledger.js +507 -0
package/dist/context-metrics/parse-claude.js +227 -0
package/dist/context-metrics/parse-codex.js +276 -0
package/dist/hud/adapters.js +69 -198
package/dist/hud/cli.js +0 -0
package/dist/hud/efficiency.js +447 -0
package/dist/hud/electron-main.js +3 -2
package/dist/hud/fs.js +14 -0
package/dist/hud/metric.js +4 -98
package/dist/hud/monitor.js +1 -12
package/dist/hud/render.js +4 -3
package/dist/hud/server.js +30 -0
package/dist/hud/web.js +409 -186
package/dist/index.js +0 -0
package/dist/setup-page/client-core.js +475 -0
package/dist/setup-page/client-extraction.js +550 -0
package/dist/setup-page/client-lifecycle.js +116 -0
package/dist/setup-page/client-report-audit.js +818 -0
package/dist/setup-page/client-report-city.js +204 -0
package/dist/setup-page/client-report.js +6 -0
package/dist/setup-page/client.js +15 -0
package/dist/setup-page/document.js +37 -0
package/dist/setup-page/styles-city-report.js +880 -0
package/dist/setup-page/styles-context-audit.js +470 -0
package/dist/setup-page/styles-extraction.js +821 -0
package/dist/setup-page/styles-foundation.js +231 -0
package/dist/setup-page/styles.js +11 -0
package/dist/setup-page.js +6 -5623
package/dist/setup.js +24 -10
package/package.json +4 -4
package/dist/city/10-problems-report.html +0 -649
package/dist/city/_live.html +0 -37
package/dist/city/_serve.mjs +0 -45
package/dist/city/card-data.json +0 -15
package/dist/city/chaos-to-clarity-pencil.html +0 -582
package/dist/city/city-data.json +0 -248
package/dist/city/echo-ai-city-only.template.html +0 -2271
package/dist/city/generate-echo-city-only.mjs +0 -112
package/dist/city/pencil-pie-generator.html +0 -883
package/dist/city/pencil-webgl-landscape.html +0 -1239
package/dist/city/spatial-fan-story.html +0 -479

package/dist/hud/web.js CHANGED Viewed

@@ -114,6 +114,9 @@ export const HUD_HTML = String.raw `<!doctype html>
         filter: var(--shadow);
         transition: border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
       }
+      /* Open = the card is the voice. Echo doesn't say the same thing twice, so the speech
+         bubble steps aside while the panel is up and comes back when it closes. */
+      #hud.open .status-bubble { display: none; }
       .status-bubble::after {
         content: "";
         position: absolute;
@@ -169,6 +172,9 @@ export const HUD_HTML = String.raw `<!doctype html>
         line-height: 1.1;
         color: var(--ink);
       }
+      .main-rest { font-size: 10.5px; font-weight: 680; color: var(--muted); }
+      .client-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
+      .line-icon { width: 11px; height: 11px; flex: 0 0 auto; object-fit: contain; opacity: .85; }
       .client {
         min-width: 0;
         overflow: hidden;
@@ -211,25 +217,94 @@ export const HUD_HTML = String.raw `<!doctype html>
         cursor: grab;
       }
       #hud.open .details { display: block; }
-      .head {
+      /* The current session is the one object every number and action belongs to — one card. */
+      .now-card {
+        border: 1px solid rgba(26, 58, 143, 0.24);
+        border-radius: 12px;
+        padding: 12px 13px 13px;
+        background: #fff;
+        box-shadow: 0 1px 5px rgba(26, 58, 143, 0.07);
+      }
+      #hud.s-amber .now-card { border-color: rgba(233, 185, 73, 0.55); }
+      #hud.s-red .now-card { border-color: rgba(199, 55, 47, 0.45); }
+      .now-sess {
         display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 9px;
+      }
+      .now-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
+      .now-copy { min-width: 0; flex: 1; display: grid; gap: 1px; line-height: 1.15; }
+      .now-title, .now-repo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .now-title { font-size: 12px; font-weight: 800; color: var(--ink); }
+      .now-repo { font-size: 10px; font-weight: 600; color: var(--faint); }
+      .verdict {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 11.5px;
+        font-weight: 650;
+        color: var(--muted);
+      }
+      .verdict:empty { display: none; }
+      .meta-row {
+        display: flex;
+        align-items: center;
         justify-content: space-between;
-        align-items: baseline;
-        min-height: 15px;
-        margin-bottom: 10px;
+        gap: 8px;
+        margin-top: 10px;
       }
-      .turn, .upd {
+      .meta-line {
+        min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 11px;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 9.5px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        color: var(--faint);
+      }
+      .session-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 8px 26px;
+      }
+      .pin-chip, .jump-chip {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        min-height: 22px;
+        padding: 3px 9px;
+        border: 1px solid rgba(26, 58, 143, .18);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, .78);
         color: var(--faint);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 10px;
+        font-weight: 760;
+        letter-spacing: 0;
+        line-height: 1;
+      }
+      .pin-chip:hover, .jump-chip:hover {
+        border-color: rgba(26, 58, 143, .34);
+        background: #fff;
+        color: var(--blue);
+      }
+      .jump-chip {
+        width: 22px;
+        min-width: 22px;
+        padding: 0;
+        border-radius: 50%;
+        font-size: 12px;
       }
       .tabs {
         display: grid;
         gap: 6px;
         max-height: 259px;
-        margin: 2px 0 12px;
+        margin: 10px 0 0;
         padding-right: 3px;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -238,24 +313,22 @@ export const HUD_HTML = String.raw `<!doctype html>
       .tabs::-webkit-scrollbar { width: 4px; }
       .tabs::-webkit-scrollbar-track { background: transparent; }
       .tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(26, 58, 143, .2); }
+      /* History rows: everything that is NOT the current session. Quiet on purpose. */
       .tab {
-        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);
+        display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 8px;
+        width: 100%; min-height: 30px; font-size: 10.5px; line-height: 1.15; padding: 5px 9px; border-radius: 8px;
+        border: 1px solid transparent; background: transparent;
         color: var(--faint); cursor: pointer; text-align: left; font-family: inherit;
       }
-      .tab:hover { background: rgba(0, 0, 0, .08); }
-      .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:hover { border-color: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .05); }
+      .tab-icon { width: 14px; height: 14px; object-fit: contain; opacity: .75; }
+      .tab-copy { min-width: 0; display: grid; gap: 1px; }
+      .tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 680; }
+      .tab-repo { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--faint); font-size: 9.5px; font-weight: 600; }
+      .tab-reponame { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tab-gh { width: 10px; height: 10px; flex: 0 0 auto; object-fit: contain; opacity: .7; }
+      /* When you last worked here — sits just left of the jump arrow. */
+      .tab-time { justify-self: end; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 600; color: var(--faint); white-space: nowrap; }
       .tab-status {
         width: 10px;
         height: 10px;
@@ -268,31 +341,24 @@ export const HUD_HTML = String.raw `<!doctype html>
       .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;
+      .tab-health {
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        background: var(--blue);
-        color: #fff;
-        font-size: 10px;
-        font-weight: 850;
+        gap: 5px;
+        justify-self: end;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-size: 9.5px;
+        font-weight: 750;
+        color: var(--muted);
       }
-      .auto-tab.mode-active .auto-check { display: inline-flex; }
+      .tab-health .tab-status { width: 8px; height: 8px; border-width: 1.5px; }
+      /* Jump straight to this conversation in its own app. */
+      .tab-jump {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 18px; height: 18px; justify-self: end; border-radius: 50%;
+        color: var(--faint); font-size: 11px; font-weight: 800;
+      }
+      .tab-jump:hover { background: rgba(26, 58, 143, 0.1); color: var(--blue); }
       .spin {
         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%;
@@ -301,26 +367,30 @@ export const HUD_HTML = String.raw `<!doctype html>
       @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. */
+      /* One line, one reading order: dot · score · agent icon · session · repo icon · repo.
+         The session name gets the space; the repo shrinks first. */
       #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;
+        display: none; align-items: center; gap: 7px; width: calc(100% - 16px); min-height: 38px;
+        margin: 7px 0 0 8px; padding: 5px 13px; 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; }
+      .micon { width: 13px; height: 13px; object-fit: contain; flex: 0 0 auto; opacity: .85; }
       #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; }
+      .mcopy { min-width: 0; flex: 1; display: grid; gap: 2px; line-height: 1.1; }
+      .mrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
       #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); }
+      .mrow .micon { width: 11px; height: 11px; }
       #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; }
@@ -331,7 +401,6 @@ export const HUD_HTML = String.raw `<!doctype html>
         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;
@@ -339,12 +408,12 @@ export const HUD_HTML = String.raw `<!doctype html>
         cursor: pointer; font-family: inherit;
       }
       .switchbtn:hover { background: rgba(0, 0, 0, .1); color: #111; }
+      /* Explicit family switch: a labeled pill, not a mystery icon. */
       .agent-switch {
-        width: 28px;
-        min-width: 28px;
-        max-width: 28px;
-        height: 28px;
-        padding: 0;
+        width: auto;
+        height: 26px;
+        gap: 6px;
+        padding: 0 11px 0 8px;
         border-radius: 999px;
         background: rgba(255, 255, 255, .78);
         color: #1f1f1f;
@@ -352,12 +421,13 @@ export const HUD_HTML = String.raw `<!doctype html>
         font-weight: 760;
         letter-spacing: 0;
         white-space: nowrap;
+        flex: 0 0 auto;
       }
       .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; }
+      .switch-icon { width: 14px; height: 14px; flex: 0 0 auto; object-fit: contain; }
+      .switch-copy { display: inline; }
       .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);
@@ -368,7 +438,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         display: flex;
         align-items: center;
         gap: 9px;
-        margin-bottom: 9px;
+        margin-bottom: 4px;
       }
       .state-dot {
         width: 12px;
@@ -385,41 +455,28 @@ export const HUD_HTML = String.raw `<!doctype html>
         text-overflow: ellipsis;
         white-space: nowrap;
         font-family: "JetBrains Mono", ui-monospace, monospace;
-        font-size: 18px;
+        font-size: 20px;
         font-weight: 850;
       }
       .why-btn {
         margin-left: auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        line-height: 1;
         border: 1px solid rgba(26, 58, 143, 0.16);
-        border-radius: 999px;
-        padding: 4px 10px;
+        border-radius: 50%;
         background: rgba(26, 58, 143, 0.04);
         color: var(--muted);
         font-family: inherit;
-        font-size: 11px;
-        font-weight: 750;
+        font-size: 15px;
+        font-weight: 700;
         cursor: pointer;
       }
       .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;
-        font-weight: 800;
-        color: var(--ink);
-      }
-      .lead {
-        margin-bottom: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 11px;
-        font-weight: 650;
-        color: var(--faint);
-      }
       .evidence {
         display: none;
         margin: 11px 0 12px;
@@ -471,8 +528,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         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 {
+      button.renew-btn small {
         display: block;
         margin-top: 3px;
         font-size: 10.5px;
@@ -497,20 +553,29 @@ export const HUD_HTML = String.raw `<!doctype html>
         font-size: 11.5px;
         font-weight: 750;
       }
+      /* Preview of the generated context: a few lines by default, "Read all" opens the whole
+         thing right here. */
       .renew-result pre {
-        max-height: 120px;
-        overflow: auto;
-        margin: 0;
+        max-height: 92px;
+        overflow: hidden;
+        margin: 7px 0 0;
         white-space: pre-wrap;
         word-break: break-word;
         color: var(--ink);
         font-family: "JetBrains Mono", ui-monospace, monospace;
         font-size: 9.5px;
+        line-height: 1.45;
+        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
       }
+      .renew-result.expanded pre {
+        max-height: 300px;
+        overflow: auto;
+        -webkit-mask-image: none;
+      }
+      .renew-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
       .renew-result .copy-btn {
         display: inline-block;
         width: auto;
-        margin-top: 6px;
         border: 1px solid rgba(26, 58, 143, 0.22);
         border-radius: 999px;
         padding: 5px 14px;
@@ -520,7 +585,19 @@ export const HUD_HTML = String.raw `<!doctype html>
         font-size: 11px;
         cursor: pointer;
       }
-      .meta,
+      .ghost-btn {
+        border: 1px solid rgba(26, 58, 143, 0.14);
+        border-radius: 999px;
+        padding: 5px 12px;
+        background: transparent;
+        color: var(--muted);
+        font-family: inherit;
+        font-size: 11px;
+        font-weight: 750;
+        cursor: pointer;
+      }
+      .ghost-btn:hover { background: rgba(26, 58, 143, 0.06); color: var(--ink); }
+      #renewagainbtn { margin-left: auto; }
       .path,
       .missing {
         overflow: hidden;
@@ -529,7 +606,6 @@ export const HUD_HTML = String.raw `<!doctype html>
         color: var(--faint);
         font-size: 11px;
       }
-      .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)); }
@@ -571,37 +647,51 @@ export const HUD_HTML = String.raw `<!doctype html>
           <span class="dot" id="dot"></span>
           <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 class="client-line"><img class="line-icon" id="bubbleagent" src="/assets/hud/codex.svg" alt="" style="display:none" /><span class="client" id="client">EchoMem HUD</span></span>
+            <span class="client-line" id="repoline" style="display:none"><img class="line-icon" src="/assets/hud/github.svg" alt="" /><span class="client-repo" id="clientrepo"></span></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>
+          <span class="mcopy">
+            <span class="mrow"><img class="micon" id="micon" src="/assets/hud/codex.svg" alt="" style="display:none" /><span id="msession">EchoMem</span></span>
+            <span class="mrow" id="mrepoline" style="display:none"><img class="micon" id="mghicon" src="/assets/hud/github.svg" alt="" /><span id="mrepo"></span></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 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">--%</span>
-          <button class="why-btn" id="whybtn" type="button" style="display:none">why</button>
+        <div class="now-card" id="nowcard">
+          <div class="now-sess">
+            <img class="now-icon" id="nowicon" src="/assets/hud/codex.svg" alt="" />
+            <span class="now-copy"><span class="now-title" id="nowtitle">EchoMem</span><span class="client-line" id="nowrepoline" style="display:none"><img class="line-icon" src="/assets/hud/github.svg" alt="" /><span class="now-repo" id="nowrepo"></span></span></span>
+          </div>
+          <div class="session-actions">
+            <button class="pin-chip" id="pinchip" type="button" title="Return to auto-follow">pinned x</button>
+            <button class="jump-chip" id="jumpchip" type="button" title="Open this conversation">&#8599;</button>
+          </div>
+          <div class="state-row">
+            <span class="state-dot" id="stateDot"></span>
+            <span class="state-word" id="stateWord">--%</span>
+            <button class="why-btn" id="whybtn" type="button" title="Details" aria-label="Details" style="display:none">+</button>
+          </div>
+          <div class="verdict" id="verdict"></div>
+          <div class="evidence" id="evidence"></div>
+          <div class="nudge" id="nudge"></div>
+          <button class="renew-btn" id="renewbtn"><b>Start new session with context</b><small>carry 100% signal, drop the junk</small></button>
+          <div class="renew-result" id="renewresult">
+            <div class="renew-msg" id="renewmsg"></div>
+            <pre id="renewpre"></pre>
+            <div class="renew-actions">
+              <button class="copy-btn" id="copybtn">Copy</button>
+              <button class="ghost-btn" id="expandbtn">Read all</button>
+              <button class="ghost-btn" id="renewagainbtn" title="Generate a fresh context from the latest turns">Renew</button>
+            </div>
+          </div>
         </div>
-        <div class="full" id="fullness"></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">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</button>
-        </div>
-        <div class="meta" id="meta"></div>
+        <div class="tabs" id="tabs"></div>
+        <div class="meta-row"><span class="meta-line" id="metaline"></span><button class="switchbtn agent-switch" id="switchbtn" title="Switch agent" style="display:none" type="button"></button></div>
         <div class="path" id="path"></div>
         <button class="reveal" id="reveal" style="display:none">↗ Open session in viewer</button>
         <div class="missing" id="missing"></div>
@@ -613,12 +703,16 @@ export const HUD_HTML = String.raw `<!doctype html>
       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 verdictEl = document.getElementById("verdict");
+      const nowIcon = document.getElementById("nowicon");
+      const nowTitle = document.getElementById("nowtitle");
+      const nowRepo = document.getElementById("nowrepo");
+      const nowRepoLine = document.getElementById("nowrepoline");
+      const pinChip = document.getElementById("pinchip");
+      const jumpChip = document.getElementById("jumpchip");
       const whyBtn = document.getElementById("whybtn");
-      const fullness = document.getElementById("fullness");
-      const lead = document.getElementById("lead");
       const evidence = document.getElementById("evidence");
       const nudge = document.getElementById("nudge");
       const renewBtn = document.getElementById("renewbtn");
@@ -626,9 +720,12 @@ export const HUD_HTML = String.raw `<!doctype html>
       const renewMsg = document.getElementById("renewmsg");
       const renewPre = document.getElementById("renewpre");
       const copyBtn = document.getElementById("copybtn");
-      const metaEl = document.getElementById("meta");
+      const expandBtn = document.getElementById("expandbtn");
+      const renewAgainBtn = document.getElementById("renewagainbtn");
+      const metaLineEl = document.getElementById("metaline");
+      const bubbleAgent = document.getElementById("bubbleagent");
+      const repoLine = document.getElementById("repoline");
       const pathEl = document.getElementById("path");
-      const updatedEl = document.getElementById("updated");
       const tabsEl = document.getElementById("tabs");
       const switchBtn = document.getElementById("switchbtn");
       const revealEl = document.getElementById("reveal");
@@ -637,6 +734,7 @@ export const HUD_HTML = String.raw `<!doctype html>
       let lastCapsule = "";
       let renewResultSessionKey = "";
       let activityEpoch = null;
+      let metaTail = ""; // "turn 2 · 178k tokens" — composed in render(), joined with "updated …" each second
       let lastState = null;
       let currentSrc = null;
       let renewTimer = null;
@@ -663,6 +761,7 @@ export const HUD_HTML = String.raw `<!doctype html>
       const mscore = document.getElementById("mscore");
       const msession = document.getElementById("msession");
       const mrepo = document.getElementById("mrepo");
+      const mrepoLine = document.getElementById("mrepoline");
       let miniOn = false;
       let whyOpen = false;
       try { miniOn = localStorage.getItem("echomemHudMini") === "1"; } catch {}
@@ -679,7 +778,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         e.stopPropagation();
         whyOpen = !whyOpen;
         hud.classList.toggle("show-why", whyOpen);
-        whyBtn.textContent = whyOpen ? "hide" : "why";
+        whyBtn.textContent = whyOpen ? "−" : "+";
         syncHeight();
       });
       let hudDrag = null;
@@ -746,17 +845,40 @@ export const HUD_HTML = String.raw `<!doctype html>
           .catch(() => {});
       });
-      // Click a tab → pin that session as the primary view (or "Auto" to return to auto-selection).
+      // Click a history row → pin that session as the current one. Auto-follow is the default;
+      // the card's "pinned ×" chip releases the pin. The ↗ corner jumps to the conversation in
+      // its own app instead of switching the HUD view.
       if (tabsEl) tabsEl.addEventListener("click", (e) => {
+        const jump = e.target && e.target.closest ? e.target.closest("[data-jump]") : null;
+        if (jump) {
+          e.stopPropagation();
+          jumpToSession(jump.getAttribute("data-jump"));
+          return;
+        }
         const btn = e.target && e.target.closest ? e.target.closest(".tab") : null;
         if (!btn) return;
-        const id = btn.getAttribute("data-id");
+        selectSession(btn.getAttribute("data-id"));
+      });
+      if (jumpChip) jumpChip.addEventListener("click", (e) => {
+        e.stopPropagation();
+        jumpToSession(jumpChip.getAttribute("data-jump"));
+      });
+      function jumpToSession(id) {
+        if (!id) return;
+        fetch("/jump?id=" + encodeURIComponent(id)).catch(() => {});
+      }
+      if (pinChip) pinChip.addEventListener("click", (e) => {
+        e.stopPropagation();
+        selectSession("auto");
+      });
+      function selectSession(id) {
+        if (!id) return;
         fetch("/select?id=" + encodeURIComponent(id))
           .then(() => fetch("/state"))
           .then((r) => r.json())
           .then(render)
           .catch(() => {});
-      });
+      }
       document.getElementById("toggle").addEventListener("click", (event) => {
         if (suppressNextToggle) {
@@ -778,7 +900,7 @@ export const HUD_HTML = String.raw `<!doctype html>
           renderRenewLoadingLabel();
           return;
         }
-        renewBtn.textContent = "Start new with context";
+        renewBtn.innerHTML = "<b>Start new session with context</b><small>carry 100% signal, drop the junk</small>";
       }
       if (renewBtn) renewBtn.addEventListener("click", async () => {
@@ -823,17 +945,18 @@ export const HUD_HTML = String.raw `<!doctype html>
           }
           saveCachedCheckpoint(renewSessionKey, prompt, promptKind, meta);
           if (promptKind === "cloud") saveCheckpointStatus(renewSessionKey, statusFromRenewData(renewData, meta));
+          const doneSummary = checkpointSuffix(checkpointSummary({ renewedAt: Date.now(), memoryCount: meta.sessionMemoryCount }));
           showRenewResult({
             sessionKey: renewSessionKey,
             prompt,
-            message: promptKind === "local" ? "Local capsule ready" : "Decision log ready",
+            message: (promptKind === "local" ? "Local capsule ready" : "Decision log ready") + doneSummary,
             canCopy: true,
           });
           try {
             await navigator.clipboard.writeText(prompt);
-            if (renewMsg) renewMsg.textContent = promptKind === "local" ? "Local capsule copied" : "Decision log copied";
+            if (renewMsg) renewMsg.textContent = (promptKind === "local" ? "Local capsule copied" : "Decision log copied") + doneSummary;
           } catch {
-            if (renewMsg) renewMsg.textContent = promptKind === "local" ? "Local capsule ready" : "Decision log ready";
+            if (renewMsg) renewMsg.textContent = (promptKind === "local" ? "Local capsule ready" : "Decision log ready") + doneSummary;
           }
         } catch {
         } finally {
@@ -853,6 +976,25 @@ export const HUD_HTML = String.raw `<!doctype html>
         } catch {}
       });
+      if (expandBtn) expandBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (!renewResult) return;
+        const expanded = renewResult.classList.toggle("expanded");
+        expandBtn.textContent = expanded ? "Collapse" : "Read all";
+        syncHeight();
+      });
+      // Escape hatch: the session moved on and the saved context is stale — clear it and
+      // run the renew flow again.
+      if (renewAgainBtn) renewAgainBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        clearRenewResult();
+        if (renewBtn) {
+          renewBtn.style.display = "block";
+          renewBtn.click();
+        }
+      });
       function activeRenewScore() {
         const st = lastState || {};
         return st.active || st;
@@ -879,9 +1021,15 @@ export const HUD_HTML = String.raw `<!doctype html>
           copyBtn.textContent = "Copy";
           copyBtn.style.display = "";
         }
-        if (renewResult) renewResult.style.display = "none";
+        if (renewResult) {
+          renewResult.style.display = "none";
+          renewResult.classList.remove("expanded");
+        }
+        if (expandBtn) expandBtn.textContent = "Read all";
       }
+      // The result replaces the action: once a context exists, the big renew button steps aside
+      // and this card carries the preview + timestamp + copy.
       function showRenewResult(opts) {
         const prompt = String((opts && opts.prompt) || "");
         const body = String((opts && opts.body) || prompt || "");
@@ -890,13 +1038,21 @@ export const HUD_HTML = String.raw `<!doctype html>
         if (renewMsg) renewMsg.textContent = String((opts && opts.message) || "");
         if (renewPre) {
           renewPre.textContent = body;
-          renewPre.style.display = "none";
+          renewPre.style.display = body ? "block" : "none";
+        }
+        if (expandBtn) {
+          expandBtn.style.display = body ? "inline-block" : "none";
+          expandBtn.textContent = "Read all";
         }
         if (copyBtn) {
           copyBtn.textContent = "Copy";
           copyBtn.style.display = opts && opts.canCopy ? "inline-block" : "none";
         }
-        if (renewResult) renewResult.style.display = "block";
+        if (renewResult) {
+          renewResult.classList.remove("expanded");
+          renewResult.style.display = "block";
+        }
+        if (renewBtn && !renewStartMs) renewBtn.style.display = "none";
         syncHeight();
       }
@@ -982,7 +1138,7 @@ export const HUD_HTML = String.raw `<!doctype html>
       function checkpointSummary(item) {
         const parts = [];
         const renewedAt = timestampMs(item && item.renewedAt);
-        if (renewedAt) parts.push("renewed " + relTime(Date.now() - renewedAt));
+        if (renewedAt) parts.push("generated " + 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(" · ");
@@ -1187,15 +1343,20 @@ export const HUD_HTML = String.raw `<!doctype html>
         render({
           active: sample,
           pinnedId: previewPinned ? "p2" : null,
+          sessions: [
+            sample,
+            { client: "codex", sourcePath: "/preview/b.jsonl", usefulPct: 71, healthScorePct: 71, color: "amber" },
+            { client: "codex", sourcePath: "/preview/c.jsonl", usefulPct: 94, healthScorePct: 94, color: "green" },
+          ],
           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 },
+            { id: "p1", client: "codex", title: "Simplify HUD session display", label: "EchoMem-Chrome", sourcePath: "/preview/session.jsonl", live: true, lastActiveMs: 4000 },
+            { id: "p2", client: "codex", title: "修复 HUD 切换和图标", label: "EchoMem-Chrome", sourcePath: "/preview/b.jsonl", live: false, lastActiveMs: 480000 },
+            { id: "p3", client: "codex", title: "Fix extraction preview", label: "EchoMem-Chrome", sourcePath: "/preview/c.jsonl", live: false, lastActiveMs: 2400000 },
+            { id: "p4", client: "codex", title: "Port Claude work", label: "EchoForPeople", sourcePath: "/preview/d.jsonl", live: false, lastActiveMs: 9000000 },
+            { id: "p5", client: "codex", title: "Stamp fixes with Echo mascot", label: "EchoMem-Chrome", sourcePath: "/preview/e.jsonl", live: false, lastActiveMs: 16200000 },
+            { id: "p6", client: "codex", title: "Review migration checks", label: "EchoForPeople", sourcePath: "/preview/f.jsonl", live: false, lastActiveMs: 21600000 },
+            { id: "p7", client: "codex", title: "Polish setup story", label: "EchoMem-Chrome", sourcePath: "/preview/g.jsonl", live: false, lastActiveMs: 34200000 },
+            { id: "p8", client: "claude-code", title: "DG-Web refactor", label: "DG-Web", sourcePath: "/preview/h.jsonl", live: false, lastActiveMs: 39600000 },
           ],
         });
         hud.classList.add("open");
@@ -1213,7 +1374,8 @@ export const HUD_HTML = String.raw `<!doctype html>
         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);
+        const activeId = score && score.sourcePath ? activeIdFor(state, score.sourcePath, activeClient) : null;
+        renderTabs(state, activeId, activeClient);
         renderSwitchButton(state, activeClient);
         if (!score || typeof score.usefulPct !== "number") {
           renderIdle(state);
@@ -1231,23 +1393,35 @@ export const HUD_HTML = String.raw `<!doctype html>
         stateDot.className = "state-dot " + color;
         hud.classList.remove("s-green", "s-amber", "s-red");
         hud.classList.add("s-" + color);
-        main.textContent = health + "%";
+        main.innerHTML = health + '%<span class="main-rest"> of tokens are useful</span>';
         renderMini(color, health + "%", info);
         client.textContent = info.title || info.repo;
-        if (clientRepo) clientRepo.textContent = info.repo && info.repo !== info.title ? info.repo : "";
+        if (bubbleAgent) {
+          bubbleAgent.src = iconForFamily(agentFamily(score.client) || "codex");
+          bubbleAgent.style.display = "inline-block";
+        }
+        const bubbleRepo = info.repo && info.repo !== info.title ? info.repo : "";
+        if (clientRepo) clientRepo.textContent = bubbleRepo;
+        if (repoLine) repoLine.style.display = bubbleRepo ? "flex" : "none";
         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 : "";
+        const metaParts = [];
+        if (typeof score.turn === "number" && score.turn > 0) metaParts.push("turn " + score.turn);
+        if (score.ctTokens > 0) metaParts.push(fmt(score.ctTokens) + " tok");
+        metaTail = metaParts.join(" · ");
+        renderMetaLine();
         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 = "";
+        if (verdictEl) verdictEl.textContent = verdictFor(color, oldPct);
+        if (nowIcon) nowIcon.src = iconForFamily(agentFamily(score.client) || "codex");
+        if (nowTitle) nowTitle.textContent = info.title;
+        if (nowRepo) nowRepo.textContent = bubbleRepo;
+        if (nowRepoLine) nowRepoLine.style.display = bubbleRepo ? "flex" : "none";
+        if (pinChip) pinChip.style.display = state && state.pinnedId ? "inline-block" : "none";
+        if (jumpChip) {
+          if (activeId) jumpChip.setAttribute("data-jump", activeId);
+          jumpChip.style.display = activeId ? "inline-block" : "none";
+        }
         renderWhy(score, oldPct, repeatCount, sat, health, color);
-        metaEl.textContent = "";
         pathEl.textContent = "";
         currentSrc = score.sourcePath || null;
         if (revealEl) revealEl.style.display = !DEMO_CLEAN && currentSrc ? "inline-block" : "none";
@@ -1256,15 +1430,18 @@ export const HUD_HTML = String.raw `<!doctype html>
         nudge.style.display = "none";
         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);
         }
+        // A generated context replaces the call to generate one: while the result card is up
+        // for this session, the big button stays hidden (Renew in the card re-runs the flow).
+        const resultShowing = renewResult && renewResult.style.display === "block" && renewResultSessionKey === currentSessionKey;
+        if (renewBtn) {
+          renewBtn.style.display = resultShowing && !renewStartMs ? "none" : "block";
+          refreshRenewLabel();
+        }
         prevTurnState = {
           src: score.sourcePath,
           turn: score.turn,
@@ -1284,19 +1461,22 @@ export const HUD_HTML = String.raw `<!doctype html>
         main.textContent = "MCP on";
         renderMini("idle", "on", { client: "EchoMem", title: "MCP", repo: "" });
         client.textContent = "Waiting for Codex or Claude";
+        if (bubbleAgent) bubbleAgent.style.display = "none";
         if (clientRepo) clientRepo.textContent = "";
+        if (repoLine) repoLine.style.display = "none";
         client.classList.remove("voice");
         activityEpoch = null;
-        if (updatedEl) updatedEl.textContent = "";
+        metaTail = "";
+        renderMetaLine();
         currentSrc = null;
         if (revealEl) revealEl.style.display = "none";
-        turnEl.textContent = "";
         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";
+        if (verdictEl) verdictEl.textContent = "Waiting for Codex or Claude.";
+        if (nowTitle) nowTitle.textContent = "EchoMem MCP";
+        if (nowRepo) nowRepo.textContent = "";
+        if (nowRepoLine) nowRepoLine.style.display = "none";
+        if (pinChip) pinChip.style.display = "none";
+        if (jumpChip) jumpChip.style.display = "none";
         evidence.textContent = "";
         if (whyBtn) whyBtn.style.display = "none";
         whyOpen = false;
@@ -1304,7 +1484,6 @@ export const HUD_HTML = String.raw `<!doctype html>
         nudge.style.display = "none";
         if (renewBtn) renewBtn.style.display = "none";
         clearRenewResult();
-        metaEl.textContent = "";
         pathEl.textContent = "";
         missing.textContent = formatMissing(state && state.missing);
         syncHeight();
@@ -1312,24 +1491,29 @@ export const HUD_HTML = String.raw `<!doctype html>
       function renderMini(color, scoreText, info) {
         if (mdot) mdot.className = "mdot " + color;
-        if (micon) micon.src = iconForFamily(agentFamily(info && info.clientRaw) || "codex");
+        const fam = agentFamily(info && info.clientRaw);
+        if (micon) {
+          micon.src = iconForFamily(fam || "codex");
+          micon.style.display = fam ? "inline-block" : "none";
+        }
         if (mscore) mscore.textContent = scoreText;
         if (msession) msession.textContent = miniTitle(info);
-        if (mrepo) mrepo.textContent = info && info.repo ? info.repo : "";
+        const repo = info && info.repo ? info.repo : "";
+        if (mrepo) mrepo.textContent = repo;
+        if (mrepoLine) mrepoLine.style.display = repo ? "flex" : "none";
       }
       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)]);
+        if (sat > 0) rows.push(["context", score.modelContextWindow ? sat + "% full · " + fmt(score.ctTokens) : fmt(score.ctTokens) + " tokens"]);
+        if (score.pollutionTok > 0) rows.push(["junk", fmt(score.pollutionTok) + " (" + Math.round(oldPct) + "% of window)"]);
+        for (const row of junkBreakdown(score)) rows.push(row);
         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";
+          whyBtn.textContent = whyOpen ? "−" : "+";
         }
         if (!useful) {
           whyOpen = false;
@@ -1339,6 +1523,21 @@ export const HUD_HTML = String.raw `<!doctype html>
         }
       }
+      // Top junk categories from the latest local-live waste partition, biggest first.
+      function junkBreakdown(score) {
+        const buckets = score.buckets || {};
+        const tok = (key) => (buckets[key] && buckets[key].tokens) || 0;
+        const copies = buckets.range_redundant || {};
+        const entries = [
+          ["stale screenshots", tok("superseded_image"), ""],
+          ["superseded copies", tok("range_redundant"), copies.count > 0 ? " · " + copies.count + " re-read" : ""],
+          ["carried tool output", tok("stale_tool_output"), ""],
+          ["outdated reads", tok("stale_read"), ""],
+        ].filter((entry) => entry[1] > 0);
+        entries.sort((a, b) => b[1] - a[1]);
+        return entries.map((entry) => ["· " + entry[0], fmt(entry[1]) + entry[2]]);
+      }
       function fullnessPct(score) {
         if (typeof score.saturationPct === "number") return score.saturationPct;
         if (score.modelContextWindow) return Math.round(100 * (score.ctTokens || 0) / score.modelContextWindow);
@@ -1408,28 +1607,42 @@ export const HUD_HTML = String.raw `<!doctype html>
         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;
+      // History rows: recent sessions that are NOT the current one (the current session lives in the
+      // now-card above — every number and action up there belongs to it). Clicking a row pins it as
+      // the new current session; the card's "pinned ×" chip releases back to auto-follow. Scored
+      // sessions carry their own health dot + %, so "Echo is following you across agents" reads off
+      // the list itself. Family-scoped, so Codex never recommends Claude sessions or vice versa.
+      function renderTabs(state, activeId, activeClient) {
+        if (!tabsEl) return;
+        const list = visibleRecentSessions(state, activeClient).filter((s) => s.id !== activeId);
+        if (!list.length) { tabsEl.innerHTML = ""; return; }
         const chips = list.map((s) => {
-          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 activity = s.live ? '<span class="spin"></span>' : "";
+          const hv = sessionHealthFor(state, s);
+          const status = hv
+            ? '<span class="tab-health"><span class="tab-status ' + esc(hv.color) + '"></span>' + hv.health + "%</span>"
+            : "";
           const title = s.title || label(s.client);
           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 : "")) + '">'
+          const repoCell = repo
+            ? '<span class="tab-repo"><img class="tab-gh" src="/assets/hud/github.svg" alt="" /><span class="tab-reponame">' + esc(repo) + "</span></span>"
+            : '<span class="tab-repo"><span class="tab-reponame">' + esc(label(s.client)) + "</span></span>";
+          const time = typeof s.lastActiveMs === "number" ? '<span class="tab-time" title="Last active here">' + esc(relTime(s.lastActiveMs)) + "</span>" : "";
+          return '<button class="tab" data-id="' + esc(s.id) + '" title="' + esc("Switch to · " + 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>";
+            + '<span class="tab-copy"><span class="tab-title">' + esc(title) + activity + "</span>" + repoCell + "</span>" + status + time
+            + '<span class="tab-jump" data-jump="' + esc(s.id) + '" title="Open this conversation in ' + esc(label(s.client)) + '">&#8599;</span></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;
+      }
+      // Health for a listed session, joined from the scored views the monitor already computes.
+      // Sessions Echo isn't actively scoring get no dot — honest absence, not a fake green.
+      function sessionHealthFor(state, s) {
+        const views = ((state && state.sessions) || []).concat((state && state.scores) || []);
+        const m = views.filter((v) => v && v.sourcePath === s.sourcePath && v.client === s.client && typeof v.usefulPct === "number")[0];
+        if (!m) return null;
+        return { color: m.color || "green", health: healthScore(m) };
       }
       function visibleRecentSessions(state, activeClient) {
         const list = (state && state.recentSessions) || [];
@@ -1458,9 +1671,19 @@ export const HUD_HTML = String.raw `<!doctype html>
         return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
       }
-      function renderUpdated() {
-        if (!updatedEl) return;
-        updatedEl.textContent = activityEpoch === null ? "" : "updated " + relTime(Date.now() - activityEpoch);
+      // One quiet mono line for all technical metadata: "16s ago · turn 2 · 178k tok".
+      function renderMetaLine() {
+        if (!metaLineEl) return;
+        const upd = activityEpoch === null ? "" : relTime(Date.now() - activityEpoch);
+        metaLineEl.textContent = [upd, metaTail].filter(Boolean).join(" · ");
+      }
+      // One plain sentence saying what the score means for THIS session. Direct, no hedging,
+      // and no second number — the score above is the only number on the card.
+      function verdictFor(color, oldPct) {
+        const usefulPct = 100 - clamp(oldPct || 0, 0, 100);
+        if (color === "red") return usefulPct <= 20 ? "Mostly junk — carry over now." : "Too much junk – consider to carry over.";
+        if (color === "amber") return "Junk is piling up.";
+        return "Context is clean.";
       }
       function relTime(ms) {
         const s = Math.max(0, Math.round(ms / 1000));
@@ -1470,7 +1693,7 @@ export const HUD_HTML = String.raw `<!doctype html>
         if (m < 60) return m + "m ago";
         return Math.round(m / 60) + "h ago";
       }
-      setInterval(renderUpdated, 1000);
+      setInterval(renderMetaLine, 1000);
       function label(clientName) {
         if (clientName === "codex") return "Codex";