@monoes/monomindcli 1.10.31 → 1.10.33

package/dist/src/ui/dashboard-v2.html

@@ -74,7 +74,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #feed-sess-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
 .sess-btn { font-size: 11px; color: var(--text-lo); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; transition: color 0.1s; line-height: 1.4; }
 .sess-btn:hover { color: var(--text-hi); }
-#feed-scroll { flex: 1; overflow-y: auto; }
+#feed-scroll { flex: 1; overflow-y: auto; min-width: 0; }
 #feed-scroll::-webkit-scrollbar { width: 3px; }
 #feed-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
@@ -388,6 +388,136 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 
 /* ── forecast row ────────────────────────────────────────── */
 .m-val.forecast { color:var(--text-lo); font-size:11px; font-weight:500; }
+
+/* ── auto-tags ───────────────────────────────────────────── */
+.sr-autotag { font-size:10px; padding:1px 6px; border-radius:8px; background:oklch(72% 0.18 75 / 0.1); color:oklch(78% 0.18 75); border:1px solid oklch(72% 0.18 75 / 0.2); }
+.tag-filter-bar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
+.tag-chip { font-size:11px; padding:3px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-lo); cursor:pointer; font-family:var(--sans); transition:color 0.1s, background 0.1s; }
+.tag-chip:hover { color:var(--text-hi); }
+.tag-chip.active { background:var(--accent-dim); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+
+/* ── session recap ───────────────────────────────────────── */
+#feed-recap { display:none; flex-shrink:0; padding:8px 18px; border-bottom:1px solid var(--border); background:oklch(14% 0.009 55); }
+#feed-recap.show { display:block; }
+.recap-text { font-size:12px; color:var(--text-mid); line-height:1.6; }
+.recap-stat { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:1px 7px; border-radius:8px; margin-right:5px; }
+.recap-stat.rs-tool { background:oklch(65% 0.15 150 / 0.1); color:oklch(65% 0.15 150); }
+.recap-stat.rs-cost { background:oklch(72% 0.18 75 / 0.1); color:oklch(78% 0.18 75); }
+.recap-stat.rs-err  { background:oklch(60% 0.18 25 / 0.1); color:oklch(70% 0.18 25); }
+.recap-stat.rs-user { background:var(--surface-hi); color:var(--text-lo); }
+
+/* ── replay mode ─────────────────────────────────────────── */
+#replay-bar { display:none; flex-shrink:0; align-items:center; gap:8px; padding:5px 18px; border-bottom:1px solid var(--border); background:oklch(13% 0.009 55); }
+#replay-bar.show { display:flex; }
+.rp-btn { font-size:11px; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:2px 8px; cursor:pointer; color:var(--text-lo); transition:color 0.1s; }
+.rp-btn:hover { color:var(--text-hi); }
+.rp-btn.active { color:var(--accent); border-color:oklch(72% 0.18 75 / 0.5); }
+#rp-progress { flex:1; height:3px; background:var(--surface-hi); border-radius:2px; overflow:hidden; }
+#rp-fill { height:100%; background:var(--accent); border-radius:2px; transition:width 0.15s; }
+#rp-counter { font-size:11px; color:var(--text-lo); font-family:var(--mono); white-space:nowrap; }
+
+/* ── global feed (multi-project) ─────────────────────────── */
+.gf-proj-tag { font-size:10px; padding:1px 6px; border-radius:6px; background:var(--surface-hi); color:var(--text-lo); white-space:nowrap; flex-shrink:0; margin-top:3px; }
+
+/* ── project health score ────────────────────────────────── */
+.proj-health { position:absolute; bottom:12px; right:12px; font-size:11px; font-weight:700; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+.ph-hi { background:oklch(65% 0.15 150 / 0.15); color:oklch(65% 0.15 150); }
+.ph-mid { background:oklch(72% 0.18 75 / 0.15); color:oklch(78% 0.18 75); }
+.ph-lo { background:oklch(60% 0.18 25 / 0.12); color:oklch(70% 0.18 25); }
+
+/* ── ambient mode ────────────────────────────────────────── */
+#app.ambient #sidebar,
+#app.ambient #topbar,
+#app.ambient #alerts-rail,
+#app.ambient #feed-head,
+#app.ambient #feed-time-filter,
+#app.ambient #metrics-pane,
+#app.ambient #replay-bar,
+#app.ambient #feed-recap,
+#app.ambient #feed-timeline { display:none !important; }
+#app.ambient #main { background:var(--bg); }
+#app.ambient #view-now { height:100vh; }
+#app.ambient #feed-pane { border:none; }
+#app.ambient .feed-entry { padding: 6px 22px; }
+#app.ambient .feed-lbl { font-size:14px; }
+#app-ambient-hint { display:none; position:fixed; bottom:16px; right:16px; font-size:11px; color:var(--text-xs); z-index:300; pointer-events:none; }
+#app.ambient #app-ambient-hint { display:block; }
+
+/* ── minimap scrubber ─────────────────────────────────────── */
+#feed-minimap { position:absolute; top:0; right:0; width:8px; height:100%; z-index:10; cursor:pointer; }
+#feed-minimap-track { position:absolute; inset:0; }
+.mm-pip { position:absolute; right:1px; width:6px; border-radius:3px; min-height:3px; opacity:0.55; transition:opacity 0.1s; }
+.mm-pip:hover { opacity:1; }
+.mm-pip.mp-file  { background:oklch(60% 0.12 220); }
+.mm-pip.mp-bash  { background:oklch(72% 0.18 75); }
+.mm-pip.mp-agent { background:oklch(70% 0.15 300); }
+.mm-pip.mp-mcp   { background:oklch(65% 0.15 200); }
+.mm-pip.mp-err   { background:var(--red); opacity:0.8; }
+.mm-pip.mp-user  { background:var(--text-xs); }
+.mm-pip.mp-other { background:var(--surface-hi); }
+#mm-thumb { position:absolute; right:0; width:8px; background:oklch(100% 0 0 / 0.08); border-radius:4px; pointer-events:none; transition:top 0.05s; }
+#feed-scroll-wrap { position:relative; flex:1; overflow:hidden; display:flex; }
+#feed-scroll { flex:1; }
+
+/* ── daily digest ─────────────────────────────────────────── */
+#digest-card { display:none; flex-shrink:0; border-bottom:1px solid var(--border); background:oklch(13.5% 0.009 55); padding:10px 18px; }
+#digest-card.show { display:block; }
+.digest-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.digest-title { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-lo); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
+.digest-close { margin-left:auto; background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:13px; line-height:1; padding:0; }
+.digest-close:hover { color:var(--text-lo); }
+.digest-stat { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:8px; background:var(--surface-hi); color:var(--text-mid); white-space:nowrap; }
+
+/* ── cost leaderboard ────────────────────────────────────── */
+.lb-toggle { font-size:11px; color:var(--text-lo); background:transparent; border:1px solid transparent; border-radius:8px; padding:2px 9px; cursor:pointer; transition:color 0.1s, background 0.1s; font-family:var(--sans); }
+.lb-toggle:hover { color:var(--text-hi); }
+.lb-toggle.on { background:oklch(72% 0.18 75 / 0.1); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+.lb-table { width:100%; border-collapse:collapse; margin-top:4px; }
+.lb-table th { font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-xs); padding:4px 6px; text-align:left; border-bottom:1px solid var(--border); }
+.lb-table td { font-size:12px; padding:7px 6px; border-bottom:1px solid oklch(25% 0.008 55 / 0.5); color:var(--text-mid); vertical-align:top; cursor:pointer; }
+.lb-table tr:hover td { background:var(--surface-hi); color:var(--text-hi); }
+.lb-rank { font-family:var(--mono); color:var(--text-xs); width:22px; }
+.lb-cost { font-family:var(--mono); color:oklch(78% 0.18 75); white-space:nowrap; }
+.lb-dur  { font-family:var(--mono); color:var(--text-lo); white-space:nowrap; }
+.lb-prompt { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+/* ── session diff ─────────────────────────────────────────── */
+.diff-toggle { font-size:11px; color:var(--text-lo); background:transparent; border:1px solid transparent; border-radius:8px; padding:2px 9px; cursor:pointer; transition:color 0.1s, background 0.1s; font-family:var(--sans); }
+.diff-toggle:hover { color:var(--text-hi); }
+.diff-toggle.on { background:oklch(60% 0.12 220 / 0.1); color:oklch(65% 0.12 220); border-color:oklch(60% 0.12 220 / 0.3); }
+#diff-panel { display:none; border:1px solid var(--border); border-radius:8px; margin-bottom:16px; overflow:hidden; }
+#diff-panel.show { display:block; }
+.diff-header { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); background:oklch(14% 0.009 55); }
+.diff-title { font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-lo); flex:1; }
+.diff-clear { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:12px; }
+.diff-cols { display:grid; grid-template-columns:1fr 1fr; }
+.diff-col { padding:10px 14px; }
+.diff-col + .diff-col { border-left:1px solid var(--border); }
+.diff-col-title { font-size:11px; font-weight:600; color:var(--text-mid); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.diff-row { display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px solid oklch(25% 0.008 55 / 0.4); }
+.diff-row:last-child { border-bottom:none; }
+.diff-k { font-size:11px; color:var(--text-xs); }
+.diff-v { font-size:11px; font-family:var(--mono); color:var(--text-mid); }
+.diff-v.diff-hi { color:oklch(78% 0.18 75); }
+.diff-v.diff-lo { color:var(--red); }
+.diff-hint { font-size:11px; color:var(--text-xs); padding:8px 12px; text-align:center; }
+.sess-row.diff-sel-a { background:oklch(60% 0.12 220 / 0.08); outline:1px solid oklch(60% 0.12 220 / 0.3); }
+.sess-row.diff-sel-b { background:oklch(72% 0.18 75 / 0.06); outline:1px solid oklch(72% 0.18 75 / 0.3); }
+
+/* ── budget cap ──────────────────────────────────────────── */
+#budget-modal { display:none; position:fixed; inset:0; z-index:200; background:oklch(5% 0 0 / 0.6); align-items:center; justify-content:center; }
+#budget-modal.open { display:flex; }
+#budget-box { background:oklch(16% 0.009 55); border:1px solid oklch(32% 0.008 55); border-radius:10px; padding:22px 24px; width:320px; box-shadow:0 24px 60px oklch(5% 0 0 / 0.7); }
+.bm-title { font-size:14px; font-weight:600; color:var(--text-hi); margin-bottom:14px; }
+.bm-row { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
+.bm-lbl { font-size:11px; color:var(--text-lo); }
+.bm-input { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:6px 10px; font-size:13px; color:var(--text-hi); font-family:var(--mono); outline:none; transition:border-color 0.1s; }
+.bm-input:focus { border-color:var(--accent); }
+.bm-btns { display:flex; gap:8px; margin-top:16px; }
+.bm-save { flex:1; background:var(--accent); border:none; border-radius:var(--r); padding:7px 0; font-size:13px; color:oklch(11% 0.009 55); font-weight:600; cursor:pointer; }
+.bm-save:hover { background:oklch(68% 0.18 75); }
+.bm-cancel { background:transparent; border:1px solid var(--border); border-radius:var(--r); padding:7px 12px; font-size:13px; color:var(--text-lo); cursor:pointer; }
+.bm-cancel:hover { color:var(--text-hi); }
 </style>
 </head>
 <body>
@@ -428,6 +558,9 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
       <div class="nav-item" data-view="orgs">
         <span class="ico">⬡</span><span class="lbl">Orgs</span>
       </div>
+      <div class="nav-item" data-view="global">
+        <span class="ico">⊕</span><span class="lbl">Global Feed</span>
+      </div>
     </div>
   </div>
   <div id="sb-footer">
@@ -443,6 +576,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
     <span class="pill"><span class="live-dot"></span> live</span>
     <span id="topbar-cost"></span>
     <div id="tb-right">
+      <button class="btn" id="btn-budget" onclick="openBudgetModal()" title="Set daily/monthly cost budget">⚑ Budget</button>
       <button class="btn" onclick="openCmdPalette()">⌕ Search <kbd style="font-size:10px;opacity:0.6;margin-left:3px">⌘K</kbd></button>
       <button class="btn" onclick="refreshCurrent()">↺ Refresh</button>
     </div>
@@ -476,6 +610,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <span id="feed-sess">—</span>
           <div id="feed-sess-nav">
             <button class="live-tail-btn" id="btn-live-tail" onclick="toggleLiveTail()" title="Toggle live tail (auto-scroll + 5s refresh)">⬤ Tail</button>
+            <button class="sess-copy-btn" id="btn-replay" onclick="replayToggle()" title="Replay session event-by-event">⏵ Replay</button>
             <button class="sess-copy-btn" id="btn-copy-sess" onclick="copySession()" title="Copy session as markdown">⎘ Copy</button>
             <button class="density-btn" id="btn-density" onclick="toggleDensity()" title="Toggle compact view">⊟</button>
             <button class="sess-btn" onclick="toggleFeedSearch()" title="Search in feed (/)">⌕</button>
@@ -494,6 +629,15 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <span class="sctx-label" id="sctx-label"></span>
           <button class="sctx-live" onclick="goLive()">⬤ Go live</button>
         </div>
+        <div id="feed-recap"></div>
+        <div id="replay-bar">
+          <button class="rp-btn" id="rp-play" onclick="replayToggle()" title="Play/pause replay">▶</button>
+          <button class="rp-btn" onclick="replayStep(-1)" title="Step back">‹</button>
+          <button class="rp-btn" onclick="replayStep(1)" title="Step forward">›</button>
+          <div id="rp-progress"><div id="rp-fill" style="width:0%"></div></div>
+          <span id="rp-counter">0 / 0</span>
+          <button class="rp-btn" onclick="stopReplay()" title="Exit replay">✕</button>
+        </div>
         <div id="feed-timeline" title="Session tool activity timeline"></div>
         <div id="feed-time-filter">
           <span class="tf-lbl">Range</span>
@@ -501,10 +645,20 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <button class="tf-btn" data-tf="1h" onclick="setFeedTimeFilter('1h')">1h</button>
           <button class="tf-btn" data-tf="6h" onclick="setFeedTimeFilter('6h')">6h</button>
           <button class="tf-btn" data-tf="24h" onclick="setFeedTimeFilter('24h')">24h</button>
-          <span class="kb-hint"><kbd>J</kbd><kbd>K</kbd> navigate &nbsp;<kbd>↵</kbd> detail &nbsp;<kbd>/</kbd> find &nbsp;<kbd>G</kbd> live &nbsp;<kbd>⌘K</kbd> search</span>
+          <span class="kb-hint"><kbd>J</kbd><kbd>K</kbd> navigate &nbsp;<kbd>↵</kbd> detail &nbsp;<kbd>/</kbd> find &nbsp;<kbd>G</kbd> live &nbsp;<kbd>A</kbd> ambient &nbsp;<kbd>⌘K</kbd> search</span>
         </div>
-        <div id="feed-scroll">
-          <div id="feed-content"><div class="loading-txt">Loading activity…</div></div>
+        <div id="digest-card">
+          <div class="digest-title">Today's Digest <button class="digest-close" onclick="dismissDigest()" title="Dismiss">✕</button></div>
+          <div class="digest-row" id="digest-stats"></div>
+        </div>
+        <div id="feed-scroll-wrap">
+          <div id="feed-scroll">
+            <div id="feed-content"><div class="loading-txt">Loading activity…</div></div>
+          </div>
+          <div id="feed-minimap" title="Click to jump · events map">
+            <div id="feed-minimap-track"></div>
+            <div id="mm-thumb"></div>
+          </div>
         </div>
       </div>
 
@@ -552,11 +706,23 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
     <!-- SESSIONS -->
     <div class="view" id="view-sessions">
       <div class="vscroll">
-        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap">
           <div class="pg-title" style="margin-bottom:0">Sessions</div>
           <button id="sess-star-filter" onclick="toggleSessStarFilter()" title="Show only bookmarked sessions">☆ Starred</button>
+          <button class="lb-toggle" id="btn-leaderboard" onclick="toggleLeaderboard()" title="Cost leaderboard">⬆ Leaderboard</button>
+          <button class="diff-toggle" id="btn-diff" onclick="toggleDiffMode()" title="Compare two sessions">⇄ Compare</button>
         </div>
         <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
+        <div id="diff-panel">
+          <div class="diff-header"><span class="diff-title">Session Comparison</span><button class="diff-clear" onclick="clearDiff()" title="Clear">✕</button></div>
+          <div class="diff-hint" id="diff-hint">Click two sessions below to compare them</div>
+          <div class="diff-cols" id="diff-cols" style="display:none"></div>
+        </div>
+        <div id="lb-panel" style="display:none;margin-bottom:16px">
+          <table class="lb-table"><thead><tr>
+            <th class="lb-rank">#</th><th>Session</th><th class="lb-cost">Cost</th><th class="lb-dur">Duration</th>
+          </tr></thead><tbody id="lb-body"></tbody></table>
+        </div>
         <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -592,10 +758,41 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
       </div>
     </div>
 
+    <!-- GLOBAL FEED -->
+    <div class="view" id="view-global">
+      <div class="vscroll">
+        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+          <div class="pg-title" style="margin-bottom:0">Global Feed</div>
+          <span class="pg-sub" id="gf-sub" style="margin-bottom:0">Activity across all projects</span>
+        </div>
+        <div id="gf-content" style="margin-top:16px"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+
   </div><!-- /view-wrap -->
 </div><!-- /main -->
+<div id="app-ambient-hint">Press A to exit ambient mode</div>
 </div><!-- /app -->
 
+<!-- budget modal (fixed overlay, outside app) -->
+<div id="budget-modal" onclick="if(event.target===this)closeBudgetModal()">
+  <div id="budget-box">
+    <div class="bm-title">Set Cost Budget</div>
+    <div class="bm-row">
+      <div class="bm-lbl">Daily limit ($)</div>
+      <input class="bm-input" id="bm-daily" type="number" min="0" step="1" placeholder="e.g. 20">
+    </div>
+    <div class="bm-row">
+      <div class="bm-lbl">Monthly limit ($)</div>
+      <input class="bm-input" id="bm-monthly" type="number" min="0" step="10" placeholder="e.g. 200">
+    </div>
+    <div class="bm-btns">
+      <button class="bm-cancel" onclick="closeBudgetModal()">Cancel</button>
+      <button class="bm-save" onclick="saveBudget()">Save</button>
+    </div>
+  </div>
+</div>
+
 <script>
 // ── state ──────────────────────────────────────────────────
 let DIR = '';
@@ -611,7 +808,7 @@ let userScrolled = false;
 let selectedEntryId = null;
 let allDrawers = [];
 let dismissedAlerts = new Set();
-let alertState = { todayCost: 0, errorCount: 0, longLoops: [], anomaly: null };
+let alertState = { todayCost: 0, errorCount: 0, longLoops: [], anomaly: null, budgetAlert: null, budgetCls: 'alert-warn' };
 let feedTimeFilter = 'all';
 let cmdFocusIdx = 0;
 let cmdItems = [];
@@ -635,7 +832,7 @@ function switchView(v) {
     el.classList.toggle('active', el.dataset.view === v));
   document.querySelectorAll('.view').forEach(el =>
     el.classList.toggle('active', el.id === 'view-' + v));
-  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', memory:'Memory', orgs:'Orgs' };
+  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', memory:'Memory', orgs:'Orgs', global:'Global Feed' };
   document.getElementById('view-title').textContent = titles[v] || v;
   if (!viewRendered[v]) { renderView(v); viewRendered[v] = true; }
 }
@@ -647,6 +844,7 @@ function renderView(v) {
   if (v === 'loops') renderLoops();
   if (v === 'memory') renderMemory();
   if (v === 'orgs') renderOrgs();
+  if (v === 'global') renderGlobalFeed();
 }
 
 function refreshCurrent() {
@@ -666,6 +864,7 @@ async function init() {
     document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
   } catch (_) {}
   viewRendered['now'] = true; // prevents switchView from re-rendering NOW on jumpToSession
+  updateBudgetBtnStyle();
   await refreshNow();
   startPolling();
 }
@@ -881,7 +1080,10 @@ function renderFeedEvents(events, silent) {
 
   // update timeline + breakdown with all original events (before time-filter)
   buildTimeline(filtered);
-  buildBreakdown(filtered);
+  buildBreakdownByName(filtered);
+  buildMinimap(filtered);
+  // session recap card
+  buildRecap(filtered, allSessions[sessionIdx]);
 }
 
 function renderGroupRow(g) {
@@ -1039,6 +1241,10 @@ function updateAlerts() {
     all.push({ id: 'anomaly-sess', cls: 'alert-warn', ico: '◎', msg: alertState.anomaly });
   }
 
+  if (alertState.budgetAlert) {
+    all.push({ id: 'budget-alert', cls: alertState.budgetCls || 'alert-warn', ico: '⚑', msg: alertState.budgetAlert });
+  }
+
   for (const l of alertState.longLoops) {
     all.push({ id: 'loop-' + l, cls: 'alert-warn', ico: '↺', msg: `Long-running loop: ${l}` });
   }
@@ -1107,6 +1313,7 @@ async function loadTodayMetrics() {
     const s = data?.tokens?.summary || {};
     alertState.todayCost = typeof s.todayCost === 'number' ? s.todayCost : 0;
     updateAlerts();
+    checkBudget();
     // topbar cost badge
     const badge = document.getElementById('topbar-cost');
     if (badge && typeof s.todayCost === 'number') {
@@ -1183,8 +1390,8 @@ async function renderProjects() {
   const el = document.getElementById('proj-content');
   el.innerHTML = '<div class="loading-txt">Loading…</div>';
   try {
-    const data = await apiFetch('/api/data?dir=' + enc(ORIGINAL_DIR));
-    allProjects = data?.allProjects || [];
+    const data = await apiFetch('/api/projects');
+    allProjects = data?.projects || [];
     document.getElementById('bdg-projects').textContent = allProjects.length || '—';
     document.getElementById('proj-pg-sub').textContent =
       allProjects.length + ' project' + (allProjects.length !== 1 ? 's' : '') + ' found';
@@ -1206,8 +1413,11 @@ function renderProjectGrid(projects, query) {
   el.className = 'proj-grid';
   el.innerHTML = filtered.map(p => {
     const isCurrent = p.path === DIR;
+    const score = computeHealthScore(p);
+    const hCls = healthClass(score);
     return `<div class="proj-card${isCurrent ? ' current' : ''}" onclick="switchProject('${esc(p.path || '')}')">
       ${isCurrent ? '<div class="proj-card-badge">active</div>' : ''}
+      <div class="proj-health ${hCls}" title="Health score: ${score}">${score}</div>
       <div class="proj-card-name">${esc(p.name || p.slug)}</div>
       <div class="proj-card-path">${esc(p.path || '')}</div>
       <div class="proj-card-stats">
@@ -1230,6 +1440,7 @@ async function renderSessions() {
   try {
     const { sessions = [] } = await apiFetch('/api/session-journal?dir=' + enc(DIR));
     allSessions = sessions; // always sync — stale ordering breaks jumpToSession
+    initTags();
     document.getElementById('bdg-sessions').textContent = sessions.length || '—';
     document.getElementById('sess-pg-sub').textContent =
       sessions.length + ' session' + (sessions.length !== 1 ? 's' : '') + ' · ' + (DIR.split('/').pop() || DIR);
@@ -1237,20 +1448,24 @@ async function renderSessions() {
       el.innerHTML = '<div class="empty"><div class="empty-ico">◫</div><div>No sessions yet</div></div>';
       return;
     }
-    const toShow = showStarredOnly ? sessions.filter(s => bookmarks.has(s.id)) : sessions;
+    let toShow = showStarredOnly ? sessions.filter(s => bookmarks.has(s.id)) : sessions;
+    if (activeTagFilter) toShow = toShow.filter(s => (allTags.sessionTags.get(s.id) || []).includes(activeTagFilter));
     if (!toShow.length) {
       el.innerHTML = '<div class="empty"><div class="empty-ico">☆</div><div>No bookmarked sessions</div></div>';
       return;
     }
-    el.innerHTML = toShow.map(s => {
+    const sessData = JSON.stringify(toShow).replace(/'/g, '&#39;');
+    el.innerHTML = toShow.map((s, idx) => {
       const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
       const msgs = s.totalMessages ? s.totalMessages + ' msg' : '';
       const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2)
                  : typeof s.cost === 'number' ? '$' + s.cost.toFixed(2) : '';
       const meta = [dur, msgs, cost].filter(Boolean).join(' · ') || s.id.slice(0, 16);
       const summaries = (s.summaries || []).slice(0, 2).map(sm => { const t = typeof sm === 'string' ? sm : (sm.summary || sm.text || String(sm)); return `<span class="sr-tag">${esc(t.slice(0, 40))}</span>`; }).join('');
+      const autoTags = (allTags.sessionTags.get(s.id) || []).map(t => `<span class="sr-autotag">${esc(t)}</span>`).join('');
       const isStarred = bookmarks.has(s.id);
-      return `<div class="sess-row" onclick="jumpToSession('${esc(s.id)}')">
+      const sData = JSON.stringify(s).replace(/'/g, '&#39;');
+      return `<div class="sess-row" data-sess-idx="${idx}" onclick="diffMode ? diffSelectSession(JSON.parse(this.dataset.sessData || '{}'), this) : jumpToSession('${esc(s.id)}')" data-sess-data='${sData}'>
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
@@ -1258,9 +1473,15 @@ async function renderSessions() {
           <span class="sr-view">→ view</span>
         </div>
         <div class="sr-meta">${esc(meta)}</div>
-        ${summaries ? `<div class="sr-tags">${summaries}</div>` : ''}
+        ${(summaries || autoTags) ? `<div class="sr-tags">${summaries}${autoTags}</div>` : ''}
       </div>`;
     }).join('');
+    // prepend tag filter bar if there are common tags
+    if (allTags.common.size > 1) {
+      el.innerHTML = buildTagFilterBar(toShow) + el.innerHTML;
+    }
+    buildDigest();
+    if (leaderboardOpen) renderLeaderboard();
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -1298,6 +1519,539 @@ function toggleSessStarFilter() {
   viewRendered['sessions'] = true;
 }
 
+// ── feature 1: auto-tags ───────────────────────────────────
+const STOP_WORDS = new Set('the a an and or but in on at to for of is are was were be been being have has had do does did will would could should may might shall can i you he she it we they this that these those with from by about as into through during before after above below up down out off over under again further then once here there when where why how all any both each few more most other some such no nor not only own same so than too very just because if although when while'.split(' '));
+
+function extractTags(sessions) {
+  // compute per-session tags from lastPrompt text
+  const sessionTags = new Map();
+  const globalFreq = {};
+  for (const s of sessions) {
+    const text = (s.lastPrompt || '').toLowerCase();
+    const words = text.match(/\b[a-z][a-z0-9_-]{2,}\b/g) || [];
+    const freq = {};
+    for (const w of words) {
+      if (!STOP_WORDS.has(w)) freq[w] = (freq[w] || 0) + 1;
+    }
+    // top 3 words for this session
+    const top = Object.entries(freq).sort((a, b) => b[1] - a[1]).slice(0, 3).map(e => e[0]);
+    sessionTags.set(s.id, top);
+    for (const t of top) globalFreq[t] = (globalFreq[t] || 0) + 1;
+  }
+  // only keep tags that appear in 2+ sessions OR are in the current session
+  const common = new Set(Object.entries(globalFreq).filter(([, v]) => v >= 2).map(([k]) => k));
+  return { sessionTags, common };
+}
+
+let allTags = { sessionTags: new Map(), common: new Set() };
+let activeTagFilter = null;
+
+function initTags() {
+  allTags = extractTags(allSessions);
+}
+
+function buildTagFilterBar(sessions) {
+  if (!allTags.common.size) return '';
+  const sorted = [...allTags.common].sort();
+  const chips = sorted.map(t =>
+    `<button class="tag-chip${activeTagFilter === t ? ' active' : ''}" onclick="setTagFilter('${esc(t)}')">${esc(t)}</button>`
+  ).join('');
+  return `<div class="tag-filter-bar">${chips}</div>`;
+}
+
+function setTagFilter(tag) {
+  activeTagFilter = activeTagFilter === tag ? null : tag;
+  viewRendered['sessions'] = false;
+  renderSessions();
+  viewRendered['sessions'] = true;
+}
+
+// ── feature 2: session recap ───────────────────────────────
+function buildRecap(events, sess) {
+  const recap = document.getElementById('feed-recap');
+  if (!recap) return;
+  const tools = events.filter(e => e.kind === 'tool');
+  const users = events.filter(e => e.kind === 'user');
+  const errors = events.filter(e => e._errored);
+  if (!tools.length && !users.length) { recap.className = ''; return; }
+
+  // dominant tool category
+  const cats = {};
+  for (const e of tools) cats[e.cat || 'other'] = (cats[e.cat || 'other'] || 0) + 1;
+  const topCat = Object.entries(cats).sort((a, b) => b[1] - a[1])[0];
+  const topPct = topCat ? Math.round(topCat[1] / tools.length * 100) : 0;
+
+  const costStr = sess?.totalCost != null ? '$' + sess.totalCost.toFixed(2) : (sess?.cost != null ? '$' + sess.cost.toFixed(2) : null);
+
+  const stats = [
+    tools.length ? `<span class="recap-stat rs-tool">${tools.length} tool calls${topCat ? ' · ' + topPct + '% ' + topCat[0] : ''}</span>` : '',
+    users.length ? `<span class="recap-stat rs-user">${users.length} message${users.length !== 1 ? 's' : ''}</span>` : '',
+    costStr ? `<span class="recap-stat rs-cost">${costStr}</span>` : '',
+    errors.length ? `<span class="recap-stat rs-err">${errors.length} error${errors.length !== 1 ? 's' : ''}</span>` : '',
+  ].filter(Boolean).join('');
+
+  recap.innerHTML = `<div class="recap-text">${stats}</div>`;
+  recap.className = 'show';
+}
+
+// ── feature 3: global feed ─────────────────────────────────
+async function renderGlobalFeed() {
+  const el = document.getElementById('gf-content');
+  el.innerHTML = '<div class="loading-txt">Loading all projects…</div>';
+  try {
+    // fetch project list
+    const data = await apiFetch('/api/projects');
+    const projects = (data?.projects || []).slice(0, 8);
+    if (!projects.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">⊕</div><div>No projects found</div></div>';
+      return;
+    }
+    document.getElementById('gf-sub').textContent = `Last activity across ${projects.length} projects`;
+
+    // fetch sessions for each project in parallel
+    const results = await Promise.allSettled(
+      projects.map(p => apiFetch('/api/session-journal?dir=' + enc(p.path)).then(d => ({ project: p, sessions: d.sessions || [] })))
+    );
+
+    // flatten + sort by recency
+    const entries = [];
+    for (const r of results) {
+      if (r.status !== 'fulfilled') continue;
+      const { project, sessions } = r.value;
+      for (const s of sessions.slice(0, 3)) {
+        entries.push({ project, session: s });
+      }
+    }
+    entries.sort((a, b) => {
+      const ta = a.session.lastTs || a.session.mtime || 0;
+      const tb = b.session.lastTs || b.session.mtime || 0;
+      return (typeof tb === 'number' ? tb : new Date(tb).getTime()) - (typeof ta === 'number' ? ta : new Date(ta).getTime());
+    });
+
+    if (!entries.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">⊕</div><div>No sessions found</div></div>';
+      return;
+    }
+
+    el.innerHTML = '<div class="sess-list">' + entries.map(({ project, session: s }) => {
+      const projName = project.name || project.slug || project.path?.split('/').pop() || '?';
+      const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
+      const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2) : '';
+      const meta = [dur, cost].filter(Boolean).join(' · ') || s.id.slice(0, 12);
+      return `<div class="sess-row" onclick="switchProject('${esc(project.path)}');setTimeout(()=>jumpToSession('${esc(s.id)}'),150)">
+        <div class="sr-top">
+          <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
+          <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
+          <span class="gf-proj-tag">${esc(projName)}</span>
+        </div>
+        <div class="sr-meta">${esc(meta)}</div>
+      </div>`;
+    }).join('') + '</div>';
+  } catch (err) {
+    el.innerHTML = '<div class="empty">Could not load: ' + esc(err.message) + '</div>';
+  }
+}
+
+// ── feature 4: budget cap + desktop notification ───────────
+let budget = JSON.parse(localStorage.getItem('mm-budget') || '{}');
+
+function openBudgetModal() {
+  const b = budget;
+  document.getElementById('bm-daily').value = b.daily || '';
+  document.getElementById('bm-monthly').value = b.monthly || '';
+  document.getElementById('budget-modal').classList.add('open');
+  document.getElementById('bm-daily').focus();
+}
+
+function closeBudgetModal() {
+  document.getElementById('budget-modal').classList.remove('open');
+}
+
+function saveBudget() {
+  budget = {
+    daily: parseFloat(document.getElementById('bm-daily').value) || null,
+    monthly: parseFloat(document.getElementById('bm-monthly').value) || null,
+  };
+  localStorage.setItem('mm-budget', JSON.stringify(budget));
+  closeBudgetModal();
+  checkBudget(); // check immediately
+  updateBudgetBtnStyle();
+}
+
+function updateBudgetBtnStyle() {
+  const btn = document.getElementById('btn-budget');
+  if (!btn) return;
+  const hasBudget = budget.daily || budget.monthly;
+  btn.style.color = hasBudget ? 'var(--accent)' : '';
+}
+
+function checkBudget() {
+  const cost = alertState.todayCost;
+  if (!cost) return;
+  if (budget.daily) {
+    const pct = cost / budget.daily;
+    if (pct >= 1 && !dismissedAlerts.has('budget-daily-over')) {
+      alertState.budgetAlert = `Daily budget exceeded: $${cost.toFixed(2)} / $${budget.daily}`;
+      alertState.budgetCls = 'alert-crit';
+    } else if (pct >= 0.8 && !dismissedAlerts.has('budget-daily-warn')) {
+      alertState.budgetAlert = `Approaching daily budget: $${cost.toFixed(2)} / $${budget.daily}`;
+      alertState.budgetCls = 'alert-warn';
+      maybeNotify('monomind budget', `$${cost.toFixed(2)} of $${budget.daily} daily budget used`);
+    } else {
+      alertState.budgetAlert = null;
+    }
+    updateAlerts();
+  }
+}
+
+function maybeNotify(title, body) {
+  if (!('Notification' in window)) return;
+  if (Notification.permission === 'granted') {
+    new Notification(title, { body, icon: '' });
+  } else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then(p => { if (p === 'granted') new Notification(title, { body }); });
+  }
+}
+
+// ── feature 5: session replay ──────────────────────────────
+let replayEvents = [];
+let replayIdx = 0;
+let replayActive = false;
+let replayTimer = null;
+
+function startReplay() {
+  // collect visible feed entries as ordered list
+  const entries = [...document.querySelectorAll('#feed-content .feed-entry')];
+  if (!entries.length) return;
+  replayEvents = entries;
+  replayIdx = 0;
+  replayActive = false;
+  document.getElementById('replay-bar').classList.add('show');
+  // dim all entries
+  entries.forEach(el => { el.style.opacity = '0.2'; el.style.transition = 'opacity 0.15s'; });
+  highlightReplayEntry();
+}
+
+function stopReplay() {
+  clearInterval(replayTimer);
+  replayActive = false;
+  replayEvents.forEach(el => { el.style.opacity = ''; el.style.transition = ''; });
+  replayEvents = [];
+  document.getElementById('replay-bar').classList.remove('show');
+  document.getElementById('rp-play').textContent = '▶';
+  document.getElementById('rp-play').classList.remove('active');
+}
+
+function highlightReplayEntry() {
+  replayEvents.forEach((el, i) => {
+    el.style.opacity = i === replayIdx ? '1' : (i < replayIdx ? '0.5' : '0.2');
+  });
+  const total = replayEvents.length;
+  const pct = total > 1 ? Math.round(replayIdx / (total - 1) * 100) : 100;
+  document.getElementById('rp-fill').style.width = pct + '%';
+  document.getElementById('rp-counter').textContent = `${replayIdx + 1} / ${total}`;
+  // scroll into view
+  replayEvents[replayIdx]?.scrollIntoView({ block: 'nearest' });
+}
+
+function replayStep(dir) {
+  replayIdx = Math.max(0, Math.min(replayEvents.length - 1, replayIdx + dir));
+  highlightReplayEntry();
+}
+
+function replayToggle() {
+  if (!replayEvents.length) { startReplay(); return; }
+  replayActive = !replayActive;
+  const btn = document.getElementById('rp-play');
+  btn.textContent = replayActive ? '⏸' : '▶';
+  btn.classList.toggle('active', replayActive);
+  if (replayActive) {
+    replayTimer = setInterval(() => {
+      if (replayIdx >= replayEvents.length - 1) { replayToggle(); return; }
+      replayStep(1);
+    }, 600);
+  } else {
+    clearInterval(replayTimer);
+  }
+}
+
+// ── feature 6: project health score ───────────────────────
+function computeHealthScore(p) {
+  let score = 50; // base
+  const now = Date.now();
+  const DAY = 86400000;
+  // recency: up to +30 points for activity in last 7 days
+  if (p.lastActivity) {
+    const age = now - (typeof p.lastActivity === 'number' ? p.lastActivity : new Date(p.lastActivity).getTime());
+    if (age < DAY)       score += 30;
+    else if (age < 3*DAY) score += 20;
+    else if (age < 7*DAY) score += 10;
+    else if (age > 30*DAY) score -= 15;
+  }
+  // session count: up to +15
+  const sc = p.sessionCount || 0;
+  score += Math.min(15, sc * 2);
+  // memory: up to +5
+  score += Math.min(5, (p.memoryCount || 0));
+  return Math.max(0, Math.min(99, Math.round(score)));
+}
+
+function healthClass(score) {
+  if (score >= 70) return 'ph-hi';
+  if (score >= 40) return 'ph-mid';
+  return 'ph-lo';
+}
+
+// ── feature 7: tool call frequency chart (by name) ─────────
+function buildBreakdownByName(events) {
+  const counts = {};
+  for (const ev of events) {
+    if (ev.kind !== 'tool') continue;
+    const name = (ev.name || ev.cat || 'other').replace(/^mcp__.*$/, 'MCP').replace(/^m__.*$/, 'MCP');
+    counts[name] = (counts[name] || 0) + 1;
+  }
+  const total = Object.values(counts).reduce((a, b) => a + b, 0);
+  if (!total) {
+    document.getElementById('m-breakdown').innerHTML =
+      '<div class="m-group-title">Tool Usage</div><div class="loading-txt" style="padding:6px 0">—</div>';
+    return;
+  }
+  const CAT_COLOR = { Bash:'oklch(72% 0.18 75)', Read:'oklch(60% 0.12 220)', Edit:'oklch(65% 0.15 160)', Write:'oklch(65% 0.15 160)', Agent:'oklch(70% 0.15 300)', Task:'oklch(65% 0.15 280)', MCP:'oklch(65% 0.15 200)', WebFetch:'oklch(60% 0.12 195)', WebSearch:'oklch(60% 0.12 195)' };
+  const getColor = n => CAT_COLOR[n] || 'var(--text-xs)';
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 8);
+  const rows = sorted.map(([name, cnt]) => {
+    const pct = Math.round(cnt / total * 100);
+    return `<div class="tb-row">
+      <div class="tb-lbl" style="width:54px" title="${esc(name)}">${esc(name.length > 8 ? name.slice(0,7)+'…' : name)}</div>
+      <div class="tb-bar-wrap"><div class="tb-bar" style="width:${pct}%;background:${getColor(name)}"></div></div>
+      <div class="tb-count">${cnt}</div>
+    </div>`;
+  }).join('');
+  document.getElementById('m-breakdown').innerHTML =
+    `<div class="m-group-title">Tool Usage <span style="font-size:10px;color:var(--text-xs);font-weight:400">${total} calls</span></div><div class="m-breakdown">${rows}</div>`;
+}
+
+// ── feature 8: ambient mode ────────────────────────────────
+function toggleAmbient() {
+  document.getElementById('app').classList.toggle('ambient');
+}
+
+// ── feature 9: daily digest ────────────────────────────────
+const DIGEST_DISMISSED_KEY = 'mm-digest-dismissed';
+
+function buildDigest() {
+  const todayKey = new Date().toISOString().slice(0, 10);
+  if (localStorage.getItem(DIGEST_DISMISSED_KEY) === todayKey) return;
+  if (!allSessions.length) return;
+
+  const todayStart = new Date(); todayStart.setHours(0, 0, 0, 0);
+  const todaySessions = allSessions.filter(s => {
+    const t = s.lastTs || s.mtime;
+    return t && new Date(typeof t === 'number' ? t : t).getTime() >= todayStart.getTime();
+  });
+  if (!todaySessions.length) return;
+
+  const totalCost = todaySessions.reduce((a, s) => a + (s.totalCost || 0), 0);
+  const totalTools = todaySessions.reduce((a, s) => a + (s.toolCalls || 0), 0);
+  const totalMsgs = todaySessions.reduce((a, s) => a + (s.userMessages || 0), 0);
+  const longestMs = Math.max(...todaySessions.map(s => s.totalDurationMs || 0));
+
+  // gather top tools from today's sessions' tag keywords as themes
+  const themes = [...new Set(todaySessions.flatMap(s => s._tags || []))].slice(0, 3);
+
+  const stats = [
+    `${todaySessions.length} session${todaySessions.length > 1 ? 's' : ''}`,
+    totalCost > 0 ? `$${totalCost.toFixed(2)} spent` : null,
+    totalTools > 0 ? `${totalTools} tool calls` : null,
+    totalMsgs > 0 ? `${totalMsgs} messages` : null,
+    longestMs > 0 ? `${fmtDur(longestMs)} longest` : null,
+    ...themes.map(t => `#${t}`),
+  ].filter(Boolean);
+
+  document.getElementById('digest-stats').innerHTML =
+    stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('');
+  document.getElementById('digest-card').classList.add('show');
+}
+
+function dismissDigest() {
+  const todayKey = new Date().toISOString().slice(0, 10);
+  localStorage.setItem(DIGEST_DISMISSED_KEY, todayKey);
+  document.getElementById('digest-card').classList.remove('show');
+}
+
+// ── feature 10: minimap scrubber ──────────────────────────
+function buildMinimap(events) {
+  const track = document.getElementById('feed-minimap-track');
+  const thumb = document.getElementById('mm-thumb');
+  const scroll = document.getElementById('feed-scroll');
+  if (!track || !thumb || !scroll) return;
+
+  const tools = events.filter(ev => ev.kind === 'tool' || ev.kind === 'user');
+  if (!tools.length) { track.innerHTML = ''; return; }
+
+  const CAT_CLS = { file:'mp-file', bash:'mp-bash', agent:'mp-agent', mcp:'mp-mcp', user:'mp-user' };
+  const H = scroll.clientHeight || 400;
+  const N = tools.length;
+  track.innerHTML = tools.map((ev, i) => {
+    const top = Math.round((i / N) * H);
+    const h = Math.max(3, Math.round((1 / N) * H * 0.7));
+    const cls = ev._errored ? 'mp-err' : (ev.kind === 'user' ? 'mp-user' : (CAT_CLS[ev.cat] || 'mp-other'));
+    return `<div class="mm-pip ${cls}" style="top:${top}px;height:${h}px" onclick="minimapJump(${i},${N})"></div>`;
+  }).join('');
+
+  // sync thumb
+  const updateThumb = () => {
+    const ratio = scroll.scrollHeight > H ? scroll.scrollTop / (scroll.scrollHeight - H) : 0;
+    const thH = Math.max(20, Math.round(H * (H / Math.max(scroll.scrollHeight, H + 1))));
+    thumb.style.height = thH + 'px';
+    thumb.style.top = Math.round(ratio * (H - thH)) + 'px';
+  };
+  scroll.removeEventListener('scroll', scroll._mmListener || (() => {}));
+  scroll._mmListener = updateThumb;
+  scroll.addEventListener('scroll', scroll._mmListener);
+  updateThumb();
+}
+
+function minimapJump(idx, total) {
+  const scroll = document.getElementById('feed-scroll');
+  if (!scroll) return;
+  scroll.scrollTop = Math.round((idx / total) * scroll.scrollHeight);
+}
+
+// ── feature 11: cost leaderboard ──────────────────────────
+let leaderboardOpen = false;
+
+function toggleLeaderboard() {
+  leaderboardOpen = !leaderboardOpen;
+  document.getElementById('btn-leaderboard').classList.toggle('on', leaderboardOpen);
+  const panel = document.getElementById('lb-panel');
+  panel.style.display = leaderboardOpen ? 'block' : 'none';
+  if (leaderboardOpen) renderLeaderboard();
+}
+
+function renderLeaderboard() {
+  const sorted = [...allSessions]
+    .filter(s => typeof s.totalCost === 'number' && s.totalCost > 0)
+    .sort((a, b) => b.totalCost - a.totalCost)
+    .slice(0, 15);
+  const body = document.getElementById('lb-body');
+  if (!sorted.length) { body.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--text-xs);padding:12px">No cost data yet</td></tr>'; return; }
+  body.innerHTML = sorted.map((s, i) => {
+    const cost = '$' + s.totalCost.toFixed(2);
+    const dur = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '—';
+    const prompt = s.lastPrompt || s.id;
+    return `<tr onclick="jumpToSession('${esc(s.id)}')" title="${esc(prompt)}">
+      <td class="lb-rank">${i + 1}</td>
+      <td class="lb-prompt">${esc(prompt.slice(0, 60))}</td>
+      <td class="lb-cost">${cost}</td>
+      <td class="lb-dur">${dur}</td>
+    </tr>`;
+  }).join('');
+}
+
+// ── feature 12: session diff ──────────────────────────────
+let diffMode = false;
+let diffSelA = null; let diffSelB = null;
+
+function toggleDiffMode() {
+  diffMode = !diffMode;
+  document.getElementById('btn-diff').classList.toggle('on', diffMode);
+  const panel = document.getElementById('diff-panel');
+  panel.classList.toggle('show', diffMode);
+  if (!diffMode) clearDiff();
+}
+
+function clearDiff() {
+  diffSelA = null; diffSelB = null;
+  document.getElementById('diff-hint').style.display = '';
+  document.getElementById('diff-cols').style.display = 'none';
+  document.getElementById('diff-cols').innerHTML = '';
+  document.querySelectorAll('.sess-row.diff-sel-a, .sess-row.diff-sel-b').forEach(el => {
+    el.classList.remove('diff-sel-a', 'diff-sel-b');
+  });
+}
+
+function diffSelectSession(sess, el) {
+  if (!diffMode) return;
+  if (diffSelA && diffSelA.id === sess.id) {
+    diffSelA = null;
+    el.classList.remove('diff-sel-a');
+    document.getElementById('diff-hint').style.display = '';
+    document.getElementById('diff-cols').style.display = 'none';
+    return;
+  }
+  if (diffSelB && diffSelB.id === sess.id) {
+    diffSelB = null;
+    el.classList.remove('diff-sel-b');
+    renderDiff();
+    return;
+  }
+  if (!diffSelA) {
+    diffSelA = sess;
+    el.classList.add('diff-sel-a');
+  } else if (!diffSelB) {
+    diffSelB = sess;
+    el.classList.add('diff-sel-b');
+  } else {
+    // replace B with new selection
+    document.querySelectorAll('.sess-row.diff-sel-b').forEach(e => e.classList.remove('diff-sel-b'));
+    diffSelB = sess;
+    el.classList.add('diff-sel-b');
+  }
+  if (diffSelA && diffSelB) {
+    renderDiff();
+  } else {
+    document.getElementById('diff-hint').textContent = diffSelA ? 'Now click a second session to compare' : 'Click two sessions below to compare them';
+    document.getElementById('diff-hint').style.display = '';
+    document.getElementById('diff-cols').style.display = 'none';
+  }
+}
+
+function renderDiff() {
+  if (!diffSelA || !diffSelB) return;
+  document.getElementById('diff-hint').style.display = 'none';
+  const cols = document.getElementById('diff-cols');
+  cols.style.display = '';
+  const fmt = (a, b, key, prefix = '') => {
+    const va = a[key], vb = b[key];
+    if (va == null && vb == null) return '';
+    const fa = prefix + (va != null ? va : '—');
+    const fb = prefix + (vb != null ? vb : '—');
+    const hiA = va != null && vb != null && va > vb ? ' diff-hi' : (va != null && vb != null && va < vb ? ' diff-lo' : '');
+    const hiB = va != null && vb != null && vb > va ? ' diff-hi' : (va != null && vb != null && vb < va ? ' diff-lo' : '');
+    return [fa, hiA, fb, hiB];
+  };
+
+  const diffCol = (s) => {
+    const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2) : '—';
+    const dur = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '—';
+    const tools = s.toolCalls != null ? s.toolCalls : '—';
+    const msgs = s.userMessages != null ? s.userMessages : '—';
+    const errs = s.errors != null ? s.errors : '—';
+    const prompt = (s.lastPrompt || s.id || '').slice(0, 50);
+    return { cost, dur, tools, msgs, errs, prompt, s };
+  };
+
+  const a = diffCol(diffSelA), b = diffCol(diffSelB);
+  const rows = [
+    ['Cost', a.cost, b.cost, typeof diffSelA.totalCost === 'number' && typeof diffSelB.totalCost === 'number' ? (diffSelA.totalCost > diffSelB.totalCost ? ['diff-hi','diff-lo'] : diffSelA.totalCost < diffSelB.totalCost ? ['diff-lo','diff-hi'] : ['','']) : ['','']],
+    ['Duration', a.dur, b.dur, ['','']],
+    ['Tool calls', a.tools, b.tools, typeof a.tools === 'number' && typeof b.tools === 'number' ? (a.tools > b.tools ? ['diff-hi','diff-lo'] : a.tools < b.tools ? ['diff-lo','diff-hi'] : ['','']) : ['','']],
+    ['Messages', a.msgs, b.msgs, ['','']],
+    ['Errors', a.errs, b.errs, ['','']],
+  ];
+
+  const colHtml = (idx) => `<div class="diff-col">
+    <div class="diff-col-title">${esc(idx === 0 ? a.prompt : b.prompt)}</div>
+    ${rows.map(([k, va, vb, cls]) => `<div class="diff-row">
+      <span class="diff-k">${k}</span>
+      <span class="diff-v ${cls[idx]}">${esc(idx === 0 ? va : vb)}</span>
+    </div>`).join('')}
+  </div>`;
+
+  cols.innerHTML = colHtml(0) + colHtml(1);
+}
+
 // ── loops ──────────────────────────────────────────────────
 async function renderLoops() {
   const el = document.getElementById('loops-content');
@@ -1796,7 +2550,8 @@ document.addEventListener('keydown', e => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (document.getElementById('cmd-palette').classList.contains('open')) return;
 
-  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); }
+  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); if (document.getElementById('app').classList.contains('ambient')) toggleAmbient(); }
+  if (e.key === 'a' || e.key === 'A') { if (currentView === 'now') { e.preventDefault(); toggleAmbient(); } }
 
   if (currentView === 'now') {
     if (e.key === '/') { e.preventDefault(); toggleFeedSearch(); }