@monoes/monomindcli 1.10.31 → 1.10.32

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

@@ -388,6 +388,57 @@ 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); }
+
+/* ── 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 +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">
@@ -443,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>
@@ -476,6 +531,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 +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>
@@ -592,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 = '';
@@ -611,7 +706,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 +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; }
 }
@@ -647,6 +742,7 @@ function renderView(v) {
   if (v === 'loops') renderLoops();
   if (v === 'memory') renderMemory();
   if (v === 'orgs') renderOrgs();
+  if (v === 'global') renderGlobalFeed();
 }
 
 function refreshCurrent() {
@@ -666,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();
 }
@@ -882,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) {
@@ -1039,6 +1138,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 +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') {
@@ -1206,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">
@@ -1230,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);
@@ -1237,7 +1345,8 @@ 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;
@@ -1249,6 +1358,7 @@ async function renderSessions() {
                  : 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)}')">
         <div class="sr-top">
@@ -1258,9 +1368,13 @@ 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;
+    }
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -1298,6 +1412,289 @@ 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 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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monoes/monomindcli",
-  "version": "1.10.31",
+  "version": "1.10.32",
   "type": "module",
   "description": "Monomind CLI - Enterprise AI agent orchestration with 60+ specialized agents, swarm coordination, MCP server, self-learning hooks, and vector memory for Claude Code",
   "main": "dist/src/index.js",