@monoes/monomindcli 1.10.30 → 1.10.32

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

@@ -359,6 +359,86 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .wow-up   { color:oklch(60% 0.18 25); }
 .wow-down { color:oklch(65% 0.15 150); }
 .wow-flat { color:var(--text-lo); }
+
+/* ── live tail ───────────────────────────────────────────── */
+.live-tail-btn { font-size:10px; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:2px 7px; cursor:pointer; transition:color 0.15s, border-color 0.15s; line-height:1.4; white-space:nowrap; }
+.live-tail-btn:hover { color:var(--text-hi); }
+.live-tail-btn.on { color:var(--green); border-color:oklch(65% 0.15 150 / 0.5); }
+@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+#btn-live-tail.on { animation: live-pulse 2s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) { #btn-live-tail.on { animation:none; } }
+
+/* ── calendar heatmap ────────────────────────────────────── */
+.cal-grid { display:grid; grid-template-rows:repeat(7,9px); grid-auto-flow:column; grid-auto-columns:9px; gap:2px; margin-top:6px; }
+.cal-cell { border-radius:2px; background:var(--surface-hi); }
+.cal-cell.cal-1 { background:oklch(72% 0.18 75 / 0.22); }
+.cal-cell.cal-2 { background:oklch(72% 0.18 75 / 0.42); }
+.cal-cell.cal-3 { background:oklch(72% 0.18 75 / 0.65); }
+.cal-cell.cal-4 { background:oklch(72% 0.18 75 / 0.85); }
+.cal-cell.cal-today { outline:1px solid var(--accent); outline-offset:-1px; }
+
+/* ── session bookmark ────────────────────────────────────── */
+.sess-star { font-size:13px; background:none; border:none; cursor:pointer; color:var(--text-xs); padding:0 2px; transition:color 0.1s; line-height:1; flex-shrink:0; }
+.sess-star:hover { color:var(--text-lo); }
+.sess-star.on { color:oklch(78% 0.18 75); }
+.sr-starred { font-size:10px; color:oklch(78% 0.18 75); margin-left:auto; }
+#sess-star-filter { 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); margin-left:auto; }
+#sess-star-filter:hover { color:var(--text-hi); }
+#sess-star-filter.on { background:oklch(72% 0.18 75 / 0.1); color:oklch(78% 0.18 75); border-color:oklch(72% 0.18 75 / 0.3); }
+
+/* ── 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); }
+
+/* ── 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>
@@ -399,6 +479,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">
@@ -414,6 +497,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>
@@ -432,6 +516,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
     <div class="cmd-footer">
       <span class="cmd-key"><kbd>↑↓</kbd> navigate</span>
       <span class="cmd-key"><kbd>↵</kbd> select</span>
+      <span class="cmd-key"><kbd>></kbd> search all sessions</span>
       <span class="cmd-key"><kbd>esc</kbd> close</span>
     </div>
   </div>
@@ -445,6 +530,8 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
           <h2>Live Feed</h2>
           <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>
@@ -463,6 +550,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>
@@ -521,7 +617,10 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
     <!-- SESSIONS -->
     <div class="view" id="view-sessions">
       <div class="vscroll">
-        <div class="pg-title">Sessions</div>
+        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+          <div class="pg-title" style="margin-bottom:0">Sessions</div>
+          <button id="sess-star-filter" onclick="toggleSessStarFilter()" title="Show only bookmarked sessions">☆ Starred</button>
+        </div>
         <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
         <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
       </div>
@@ -558,10 +657,40 @@ 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><!-- /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 = '';
@@ -577,10 +706,14 @@ let userScrolled = false;
 let selectedEntryId = null;
 let allDrawers = [];
 let dismissedAlerts = new Set();
-let alertState = { todayCost: 0, errorCount: 0, longLoops: [] };
+let alertState = { todayCost: 0, errorCount: 0, longLoops: [], anomaly: null, budgetAlert: null, budgetCls: 'alert-warn' };
 let feedTimeFilter = 'all';
 let cmdFocusIdx = 0;
 let cmdItems = [];
+let liveTailMode = false;
+let liveTailTimer = null;
+let bookmarks = new Set(JSON.parse(localStorage.getItem('mm-bookmarks') || '[]'));
+let showStarredOnly = false;
 
 // ── nav ────────────────────────────────────────────────────
 document.querySelectorAll('.nav-item[data-view]').forEach(el => {
@@ -597,7 +730,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; }
 }
@@ -609,6 +742,7 @@ function renderView(v) {
   if (v === 'loops') renderLoops();
   if (v === 'memory') renderMemory();
   if (v === 'orgs') renderOrgs();
+  if (v === 'global') renderGlobalFeed();
 }
 
 function refreshCurrent() {
@@ -628,6 +762,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();
 }
@@ -662,9 +797,26 @@ async function refreshNow() {
 }
 
 async function refreshNowSilent() {
+  if (liveTailMode) { userScrolled = false; sessionIdx = 0; }
   await Promise.allSettled([loadFeedSilent(), loadMetrics()]);
 }
 
+// ── live tail ──────────────────────────────────────────────
+function toggleLiveTail() {
+  liveTailMode = !liveTailMode;
+  const btn = document.getElementById('btn-live-tail');
+  btn.classList.toggle('on', liveTailMode);
+  btn.title = liveTailMode ? 'Live tail ON — click to disable' : 'Toggle live tail (5s refresh + auto-scroll)';
+  clearInterval(liveTailTimer);
+  if (liveTailMode) {
+    // jump to newest session and start fast polling
+    if (sessionIdx !== 0 && allSessions.length) { sessionIdx = 0; userScrolled = false; loadFeedForSession(allSessions[0]); }
+    liveTailTimer = setInterval(() => { if (currentView === 'now') refreshNowSilent(); }, 5000);
+  } else {
+    startPolling();
+  }
+}
+
 // session nav
 function prevSession() {
   if (sessionIdx < allSessions.length - 1) { sessionIdx++; userScrolled = false; loadFeedForSession(allSessions[sessionIdx]); }
@@ -690,6 +842,7 @@ async function loadFeed() {
     const todayEl = document.getElementById('m-today');
     const sparkWrap = todayEl?.querySelector('.spark-wrap');
     if (sparkWrap) sparkWrap.outerHTML = buildSparkline();
+    detectAnomalies();
   } catch (err) {
     setFeedContent('<div class="feed-empty">Could not load feed: ' + esc(err.message) + '</div>');
   }
@@ -826,6 +979,8 @@ function renderFeedEvents(events, silent) {
   // update timeline + breakdown with all original events (before time-filter)
   buildTimeline(filtered);
   buildBreakdown(filtered);
+  // session recap card
+  buildRecap(filtered, allSessions[sessionIdx]);
 }
 
 function renderGroupRow(g) {
@@ -934,28 +1089,34 @@ function closeDetail() {
   selectedEntryId = null;
 }
 
-// ── sparkline ──────────────────────────────────────────────
+// ── 12-week calendar heatmap ───────────────────────────────
 function buildSparkline() {
-  // bucket allSessions into 7 days (0 = 6 days ago, 6 = today)
   const DAY = 86400000;
   const now = Date.now();
-  const buckets = [0, 0, 0, 0, 0, 0, 0];
+  const WEEKS = 12;
+  const DAYS = WEEKS * 7; // 84 days
+  const buckets = new Array(DAYS).fill(0);
   for (const s of allSessions) {
     const ts = s.lastTs || s.mtime;
     if (!ts) continue;
     const age = now - (typeof ts === 'number' ? ts : new Date(ts).getTime());
-    const dayIdx = 6 - Math.floor(age / DAY);
-    if (dayIdx >= 0 && dayIdx < 7) buckets[dayIdx]++;
+    const idx = DAYS - 1 - Math.floor(age / DAY);
+    if (idx >= 0 && idx < DAYS) buckets[idx]++;
   }
   const max = Math.max(...buckets, 1);
-  const days = ['6d','5d','4d','3d','2d','1d','now'];
-  const bars = buckets.map((v, i) => {
-    const pct = Math.round((v / max) * 100);
-    const isToday = i === 6;
-    const title = `${days[i]}: ${v} session${v !== 1 ? 's' : ''}`;
-    return `<div class="spark-bar${isToday ? ' spark-today' : ''}" style="height:${Math.max(pct, 8)}%" title="${title}"></div>`;
-  }).join('');
-  return `<div class="spark-wrap"><div class="spark-lbl">7-day activity ${buildWowDelta()}</div><div class="sparkline">${bars}</div></div>`;
+  // offset so first cell starts on Monday of the week 12 weeks ago
+  const todayDow = new Date().getDay(); // 0=Sun
+  // pad start so column 0 begins on Monday
+  const startOffset = todayDow === 0 ? 6 : todayDow - 1;
+  const cells = buckets.map((v, i) => {
+    const isToday = i === DAYS - 1;
+    const level = v === 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+    const d = new Date(now - (DAYS - 1 - i) * DAY);
+    const label = d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    const title = `${label}: ${v} session${v !== 1 ? 's' : ''}`;
+    return `<div class="cal-cell cal-${level}${isToday ? ' cal-today' : ''}" title="${title}"></div>`;
+  });
+  return `<div class="spark-wrap"><div class="spark-lbl">12-week activity ${buildWowDelta()}</div><div class="cal-grid">${cells.join('')}</div></div>`;
 }
 
 // ── alerts rail ────────────────────────────────────────────
@@ -973,6 +1134,14 @@ function updateAlerts() {
     all.push({ id: 'feed-errors', cls: 'alert-warn', ico: '⚠', msg: `${alertState.errorCount} errors in current session`, action: 'jumpToErrors()' });
   }
 
+  if (alertState.anomaly) {
+    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}` });
   }
@@ -995,6 +1164,21 @@ function dismissAlert(id) {
   updateAlerts();
 }
 
+// ── anomaly detection ──────────────────────────────────────
+function detectAnomalies() {
+  const withCost = allSessions.filter(s => typeof (s.totalCost ?? s.cost) === 'number');
+  if (withCost.length < 3) { alertState.anomaly = null; updateAlerts(); return; }
+  const avg = withCost.reduce((sum, s) => sum + (s.totalCost ?? s.cost ?? 0), 0) / withCost.length;
+  const curr = allSessions[sessionIdx];
+  const currCost = typeof curr?.totalCost === 'number' ? curr.totalCost : (typeof curr?.cost === 'number' ? curr.cost : null);
+  if (currCost !== null && avg > 0.05 && currCost > avg * 2.5 && currCost > 0.5) {
+    alertState.anomaly = `Session unusually costly: $${currCost.toFixed(2)} vs $${avg.toFixed(2)} avg`;
+  } else {
+    alertState.anomaly = null;
+  }
+  updateAlerts();
+}
+
 // ── session context bar ────────────────────────────────────
 function showSessCtx(sess) {
   const bar = document.getElementById('sess-ctx');
@@ -1026,6 +1210,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') {
@@ -1035,11 +1220,20 @@ async function loadTodayMetrics() {
     const cost  = typeof s.todayCost  === 'number' ? '$' + s.todayCost.toFixed(2)  : '—';
     const calls = s.todayCalls != null ? s.todayCalls : '—';
     const moCost = typeof s.monthCost === 'number' ? '$' + s.monthCost.toFixed(2) : '—';
+    // cost forecast: project monthly spend from daily average
+    let forecast = '';
+    if (typeof s.monthCost === 'number' && s.monthCost > 0) {
+      const day = new Date().getDate();
+      const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
+      const projected = (s.monthCost / day) * daysInMonth;
+      forecast = `<div class="m-row"><span class="m-name">Month forecast</span><span class="m-val forecast">~$${projected.toFixed(2)}</span></div>`;
+    }
     document.getElementById('m-today').innerHTML = `
       <div class="m-group-title">Today</div>
       <div class="m-row"><span class="m-name">API cost</span><span class="m-val gold">${cost}</span></div>
       <div class="m-row"><span class="m-name">API calls</span><span class="m-val">${calls}</span></div>
       <div class="m-row"><span class="m-name">Month total</span><span class="m-val">${moCost}</span></div>
+      ${forecast}
       ${buildSparkline()}
     `;
   } catch (_) {
@@ -1116,8 +1310,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">
@@ -1140,6 +1337,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);
@@ -1147,23 +1345,36 @@ async function renderSessions() {
       el.innerHTML = '<div class="empty"><div class="empty-ico">◫</div><div>No sessions yet</div></div>';
       return;
     }
-    el.innerHTML = sessions.map(s => {
+    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 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('');
-      return `<div class="sess-row" onclick="jumpToSession('${s.id}')">
+      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)}')">
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
+          <button class="sess-star${isStarred ? ' on' : ''}" data-sid="${esc(s.id)}" onclick="toggleBookmark('${esc(s.id)}',event)" title="${isStarred ? 'Remove bookmark' : 'Bookmark session'}">${isStarred ? '★' : '☆'}</button>
           <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;
+    }
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -1177,6 +1388,313 @@ function jumpToSession(id) {
   }, 80);
 }
 
+// ── session bookmarks ──────────────────────────────────────
+function toggleBookmark(id, e) {
+  e.stopPropagation();
+  if (bookmarks.has(id)) bookmarks.delete(id);
+  else bookmarks.add(id);
+  localStorage.setItem('mm-bookmarks', JSON.stringify([...bookmarks]));
+  document.querySelectorAll('.sess-star[data-sid="' + id + '"]').forEach(el => {
+    const on = bookmarks.has(id);
+    el.classList.toggle('on', on);
+    el.textContent = on ? '★' : '☆';
+    el.title = on ? 'Remove bookmark' : 'Bookmark session';
+  });
+}
+
+function toggleSessStarFilter() {
+  showStarredOnly = !showStarredOnly;
+  const btn = document.getElementById('sess-star-filter');
+  btn.classList.toggle('on', showStarredOnly);
+  // re-render with filter
+  viewRendered['sessions'] = false;
+  renderSessions();
+  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 using ORIGINAL_DIR
+    const data = await apiFetch('/api/data?dir=' + enc(ORIGINAL_DIR));
+    const projects = (data?.allProjects || []).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';
+}
+
 // ── loops ──────────────────────────────────────────────────
 async function renderLoops() {
   const el = document.getElementById('loops-content');
@@ -1516,6 +2034,16 @@ function cmdSearch(q) {
   const lq = q.toLowerCase().trim();
   const results = document.getElementById('cmd-results');
 
+  // ">" prefix = cross-session full-text search
+  if (q.startsWith('>')) {
+    const sq = q.slice(1).trim();
+    results.innerHTML = sq.length >= 2
+      ? '<div class="cmd-empty">Searching sessions…</div>'
+      : '<div class="cmd-empty">Type at least 2 chars after &gt; to search all sessions</div>';
+    if (sq.length >= 2) searchSessions(sq);
+    return;
+  }
+
   const sessMatches = allSessions
     .filter(s => !lq || (s.lastPrompt || s.id).toLowerCase().includes(lq))
     .slice(0, 5);
@@ -1617,6 +2145,40 @@ function executeCmdItem() {
   else if (item.type === 'project') switchProject(item.data.path);
 }
 
+// ── cross-session search ───────────────────────────────────
+async function searchSessions(q) {
+  const resultsEl = document.getElementById('cmd-results');
+  try {
+    const data = await apiFetch('/api/search-sessions?dir=' + enc(DIR) + '&q=' + enc(q));
+    if (!data.results?.length) {
+      resultsEl.innerHTML = '<div class="cmd-empty">No matches found across sessions</div>';
+      return;
+    }
+    cmdItems = [];
+    let html = '<div class="cmd-group-lbl">Matches across sessions</div>';
+    data.results.forEach(r => {
+      const idx = cmdItems.length;
+      cmdItems.push({ type: 'session', data: { id: r.id, lastPrompt: r.lastPrompt, lastTs: r.mtime } });
+      const snippet = r.matches[0]?.text?.replace(/\s+/g, ' ').trim() || '';
+      html += `<div class="cmd-item" data-ci="${idx}">
+        <span class="ci-ico">◫</span>
+        <div class="cmd-item-body">
+          <div class="ci-title">${esc(r.lastPrompt || r.id.slice(0, 32))}</div>
+          <div class="ci-sub">${esc(snippet.length > 70 ? snippet.slice(0, 70) + '…' : snippet)}</div>
+        </div>
+      </div>`;
+    });
+    resultsEl.innerHTML = html;
+    cmdFocusIdx = 0;
+    updateCmdFocus();
+    resultsEl.querySelectorAll('.cmd-item').forEach(el => {
+      el.addEventListener('click', () => { cmdFocusIdx = parseInt(el.dataset.ci); executeCmdItem(); });
+    });
+  } catch (_) {
+    resultsEl.innerHTML = '<div class="cmd-empty">Search error — is the server running?</div>';
+  }
+}
+
 // ── keyboard shortcuts ─────────────────────────────────────
 document.addEventListener('keydown', e => {
   // ⌘K / Ctrl+K — command palette