@monoes/monomindcli 1.10.36 → 1.10.38

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

@@ -436,6 +436,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #app.ambient #feed-recap,
 #app.ambient #feed-timeline,
 #app.ambient #digest-card { display:none !important; }
+#app.ambient #weekly-card { display:none !important; }
 #app.ambient #main { background:var(--bg); }
 #app.ambient #view-now { height:100vh; }
 #app.ambient #feed-pane { border:none; }
@@ -552,6 +553,37 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 .lsp-bar.err { background:var(--red); opacity:0.8; }
 .le-spark { display:flex; align-items:center; gap:8px; }
 
+/* ── feature 19: cache efficiency ───────────────────────── */
+.eff-row { display:flex; align-items:center; justify-content:space-between; font-size:11px; margin-bottom:2px; gap:6px; }
+.eff-lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-lo); flex:1; min-width:0; font-size:10px; }
+.eff-pct { font-size:10px; font-variant-numeric:tabular-nums; flex-shrink:0; }
+.eff-good { color:oklch(65% 0.15 150); }
+.eff-warn { color:oklch(70% 0.18 80); }
+.eff-bad  { color:oklch(65% 0.2 25); }
+.eff-bar-wrap { height:2px; background:var(--border); border-radius:1px; margin-bottom:5px; }
+.eff-bar-fill { height:2px; border-radius:1px; }
+
+/* ── feature 21: weekly recap ────────────────────────────── */
+#weekly-card { display:none; border:1px solid var(--border); border-radius:8px; margin:0 18px 10px; padding:10px 12px; background:oklch(14% 0.008 55 / 0.6); }
+#weekly-card.show { display:block; }
+.weekly-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
+.weekly-title { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-lo); }
+.weekly-dismiss { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:11px; padding:0; line-height:1; }
+.weekly-dismiss:hover { color:var(--text-lo); }
+
+/* ── feature 22: context saturation ─────────────────────── */
+.ctx-sat-wrap { margin-top:4px; }
+.ctx-sat-bar { height:2px; background:var(--border); border-radius:1px; overflow:hidden; }
+.ctx-sat-fill { height:2px; border-radius:1px; }
+.ctx-sat-lbl { font-size:9px; color:var(--text-xs); margin-top:1px; }
+
+/* ── feature 24: activity heatmap ───────────────────────── */
+.heatmap-grid { display:flex; flex-direction:column; gap:2px; }
+.heatmap-row { display:flex; align-items:center; gap:1px; }
+.heatmap-lbl { width:14px; font-size:8px; color:var(--text-xs); flex-shrink:0; text-align:right; padding-right:2px; }
+.heatmap-hdr-cell { width:9px; font-size:7px; color:var(--text-xs); text-align:center; flex-shrink:0; }
+.heatmap-cell { width:9px; height:9px; border-radius:1px; flex-shrink:0; cursor:default; }
+
 /* ── 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; }
@@ -566,6 +598,59 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 .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); }
+
+/* ── toast notifications ──────────────────────────────────── */
+#toast-rack { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
+.toast { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:8px; font-size:12px; max-width:300px; pointer-events:all; background:oklch(18% 0.012 55); border:1px solid var(--border); color:var(--text-mid); box-shadow:0 4px 24px rgba(0,0,0,0.4); animation:toast-in 0.25s var(--ease-out); }
+.toast.t-warn { border-color:oklch(72% 0.18 75 / 0.4); background:oklch(18% 0.015 75); }
+.toast.t-err  { border-color:oklch(60% 0.18 25 / 0.4); background:oklch(17% 0.015 25); }
+.toast.t-ok   { border-color:oklch(65% 0.15 150 / 0.4); background:oklch(17% 0.012 150); }
+.toast-ico { flex-shrink:0; font-size:14px; }
+.toast-body { flex:1; min-width:0; }
+.toast-title { font-weight:600; color:var(--text-hi); margin-bottom:2px; }
+.toast-msg { color:var(--text-lo); line-height:1.4; }
+.toast-close { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:12px; line-height:1; padding:0; flex-shrink:0; }
+.toast-close:hover { color:var(--text-lo); }
+@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+
+/* ── token velocity sparkline ─────────────────────────────── */
+#vel-chart { display:flex; align-items:flex-end; gap:2px; height:28px; margin-top:6px; }
+.vel-bar { flex:1; border-radius:2px 2px 0 0; min-height:2px; background:oklch(65% 0.18 200 / 0.55); }
+.vel-bar.vel-hi { background:oklch(65% 0.18 150 / 0.8); }
+.vel-bar.vel-lo { background:oklch(65% 0.08 200 / 0.3); }
+
+/* ── shortcut help modal ──────────────────────────────────── */
+#shortcut-modal { display:none; position:fixed; inset:0; z-index:500; background:oklch(0% 0 0 / 0.6); align-items:center; justify-content:center; }
+#shortcut-modal.open { display:flex; }
+#shortcut-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px 28px; max-width:460px; width:90%; max-height:80vh; overflow-y:auto; }
+.sk-title { font-size:14px; font-weight:600; color:var(--text-hi); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
+.sk-close { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:16px; padding:0; }
+.sk-close:hover { color:var(--text-lo); }
+.sk-section { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-xs); margin:14px 0 6px; }
+.sk-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid oklch(25% 0.008 55 / 0.4); }
+.sk-row:last-child { border-bottom:none; }
+.sk-keys { display:flex; gap:3px; }
+.sk-keys kbd { font-size:10px; background:var(--surface-hi); border:1px solid var(--border); border-radius:3px; padding:1px 6px; font-family:var(--mono); color:var(--text-lo); }
+.sk-desc { font-size:11px; color:var(--text-mid); }
+
+/* ── session filter ───────────────────────────────────────── */
+#sess-filter-wrap { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+#sess-filter-input { flex:1; background:var(--surface-hi); border:1px solid var(--border); border-radius:var(--r); padding:5px 10px; font-size:12px; color:var(--text-hi); outline:none; font-family:var(--sans); }
+#sess-filter-input:focus { border-color:oklch(72% 0.18 75 / 0.5); }
+#sess-filter-input::placeholder { color:var(--text-xs); }
+#sess-filter-count { font-size:11px; color:var(--text-xs); white-space:nowrap; min-width:60px; text-align:right; }
+
+/* ── topbar activity chip ─────────────────────────────────── */
+#topbar-activity { font-size:10px; color:var(--text-xs); font-family:var(--mono); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; transition:opacity 0.3s; }
+#topbar-activity.loaded { opacity:1; }
+
+/* ── anomaly badge on session rows ────────────────────────── */
+.sess-anomaly { display:inline-flex; align-items:center; font-size:10px; padding:1px 5px; border-radius:5px; font-weight:600; margin-left:4px; vertical-align:middle; }
+.sess-anomaly.anom-cost { background:oklch(60% 0.18 25 / 0.12); color:oklch(70% 0.18 25); }
+.sess-anomaly.anom-err  { background:oklch(65% 0.15 300 / 0.12); color:oklch(72% 0.15 300); }
+
+/* ── streak badge ─────────────────────────────────────────── */
+.streak-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:2px 7px; border-radius:8px; background:oklch(65% 0.18 75 / 0.12); color:oklch(78% 0.18 75); white-space:nowrap; }
 </style>
 </head>
 <body>
@@ -623,9 +708,11 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
     <span id="view-title">Now</span>
     <span class="pill"><span class="live-dot"></span> live</span>
     <span id="topbar-cost"></span>
+    <span id="topbar-activity"></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="openShortcutHelp()" title="Keyboard shortcuts (?)">? Help</button>
       <button class="btn" onclick="refreshCurrent()">↺ Refresh</button>
     </div>
   </div>
@@ -697,6 +784,13 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <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>A</kbd> ambient &nbsp;<kbd>⌘K</kbd> search</span>
         </div>
+        <div id="weekly-card">
+          <div class="weekly-header">
+            <span class="weekly-title">This week</span>
+            <button class="weekly-dismiss" onclick="dismissWeekly()" title="Dismiss">✕</button>
+          </div>
+          <div class="digest-row" id="weekly-stats"></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>
@@ -746,6 +840,18 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <div class="m-group-title">Session Lanes</div>
           <div class="loading-txt">—</div>
         </div>
+        <div id="m-efficiency">
+          <div class="m-group-title">Cache Efficiency</div>
+          <div class="loading-txt">—</div>
+        </div>
+        <div id="m-heatmap">
+          <div class="m-group-title">Activity Heatmap</div>
+          <div class="loading-txt">—</div>
+        </div>
+        <div id="m-velocity">
+          <div class="m-group-title">Token Velocity</div>
+          <div class="loading-txt">—</div>
+        </div>
       </div>
     </div>
 
@@ -768,6 +874,12 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <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="lb-toggle" id="btn-model-mix" onclick="toggleModelMix()" title="Model usage breakdown">⬡ Models</button>
+          <button class="lb-toggle" id="btn-tool-errors" onclick="toggleToolErrors()" title="Tool error rate">⚠ Errors</button>
+          <button class="lb-toggle" id="btn-tool-rank" onclick="toggleToolRank()" title="Most-used tools across sessions">⟳ Tools</button>
+          <button class="lb-toggle" id="btn-proj-costs" onclick="toggleProjCosts()" title="Cost breakdown by project">$ Projects</button>
+          <button class="lb-toggle" id="btn-export-csv" onclick="exportSessionsCSV()" title="Export sessions as CSV">⬇ CSV</button>
+          <button class="lb-toggle" id="btn-patterns" onclick="togglePatterns()" title="Prompt word frequency across sessions">⊞ Patterns</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>
@@ -781,6 +893,25 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
             <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="model-mix-panel" style="display:none;margin-bottom:16px">
+          <div id="model-mix-body"></div>
+        </div>
+        <div id="tool-errors-panel" style="display:none;margin-bottom:16px">
+          <div id="tool-errors-body"></div>
+        </div>
+        <div id="tool-rank-panel" style="display:none;margin-bottom:16px">
+          <div id="tool-rank-body"></div>
+        </div>
+        <div id="proj-costs-panel" style="display:none;margin-bottom:16px">
+          <div id="proj-costs-body"></div>
+        </div>
+        <div id="patterns-panel" style="display:none;margin-bottom:16px">
+          <div id="patterns-body"></div>
+        </div>
+        <div id="sess-filter-wrap">
+          <input id="sess-filter-input" type="text" placeholder="Filter sessions by prompt…" oninput="filterSessions(this.value)" autocomplete="off">
+          <span id="sess-filter-count"></span>
+        </div>
         <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -831,6 +962,7 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 </div><!-- /main -->
 <div id="app-ambient-hint">Press A to exit ambient mode</div>
 </div><!-- /app -->
+<div id="toast-rack"></div>
 
 <!-- budget modal (fixed overlay, outside app) -->
 <div id="budget-modal" onclick="if(event.target===this)closeBudgetModal()">
@@ -1521,6 +1653,11 @@ async function renderSessions() {
       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 satPct = Math.min(100, Math.round((s.totalMessages || 0) / 200 * 100));
+      const satColor = satPct > 80 ? 'oklch(65% 0.2 25)' : satPct > 50 ? 'oklch(70% 0.18 80)' : 'var(--accent)';
+      const satBar = satPct > 0 ? `<div class="ctx-sat-wrap" title="Context saturation ~${satPct}% (${s.totalMessages||0} turns / 200 est. max)">
+        <div class="ctx-sat-bar"><div class="ctx-sat-fill" style="width:${satPct}%;background:${satColor}"></div></div>
+      </div>` : '';
       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);
@@ -1536,6 +1673,7 @@ async function renderSessions() {
         </div>
         <div class="sr-meta">${esc(meta)}</div>
         ${(summaries || autoTags) ? `<div class="sr-tags">${summaries}${autoTags}</div>` : ''}
+        ${satBar}
         <div class="sess-notes-wrap" onclick="event.stopPropagation()">
           <button class="sess-notes-toggle${hasNote ? ' has-note' : ''}" onclick="toggleSessNote('${esc(s.id)}',this)">✎ ${hasNote ? 'Note' : 'Add note'}</button>
           <div class="sess-notes-area" id="snote-${esc(s.id)}">
@@ -1550,7 +1688,27 @@ async function renderSessions() {
       el.innerHTML = buildTagFilterBar(toShow) + el.innerHTML;
     }
     buildDigest();
+    buildWeeklyRecap();
+    buildEfficiencyPanel();
+    buildActivityHeatmap();
+    buildTokenVelocity();
     if (leaderboardOpen) renderLeaderboard();
+    // check budget thresholds and fire toasts
+    const todayCost = allSessions.filter(s => {
+      const t = s.firstTs || s.mtime;
+      if (!t) return false;
+      const d = new Date(typeof t === 'number' ? t : t);
+      const now = new Date();
+      return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
+    }).reduce((a, s) => a + (s.totalCost || 0), 0);
+    const monthCost = allSessions.filter(s => {
+      const t = s.firstTs || s.mtime;
+      if (!t) return false;
+      const d = new Date(typeof t === 'number' ? t : t);
+      const now = new Date();
+      return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
+    }).reduce((a, s) => a + (s.totalCost || 0), 0);
+    checkBudgetToast(todayCost, monthCost);
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -2268,7 +2426,33 @@ function buildSwimlane() {
       </div>
     </div>`;
   }).join('');
-  el.innerHTML = `<div class="m-group-title">Session Lanes <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h</span></div><div id="swimlane-wrap">${rows}</div>`;
+  // dead time: find largest gap between consecutive sessions
+  const sorted = recent.slice().sort((a, b) => {
+    const aTs = typeof (a.firstTs || a.mtime) === 'number' ? (a.firstTs || a.mtime) : new Date(a.firstTs || a.mtime).getTime();
+    const bTs = typeof (b.firstTs || b.mtime) === 'number' ? (b.firstTs || b.mtime) : new Date(b.firstTs || b.mtime).getTime();
+    return aTs - bTs;
+  });
+  let maxGapMs = 0; let gapStart = 0;
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = sorted[i - 1];
+    const curr = sorted[i];
+    const prevTs = typeof (prev.firstTs || prev.mtime) === 'number' ? (prev.firstTs || prev.mtime) : new Date(prev.firstTs || prev.mtime).getTime();
+    const prevEnd = prevTs + (prev.totalDurationMs || 60000);
+    const currTs = typeof (curr.firstTs || curr.mtime) === 'number' ? (curr.firstTs || curr.mtime) : new Date(curr.firstTs || curr.mtime).getTime();
+    const gap = currTs - prevEnd;
+    if (gap > maxGapMs) { maxGapMs = gap; gapStart = prevEnd; }
+  }
+  const MIN15 = 15 * 60000;
+  let gapNote = '';
+  if (maxGapMs > MIN15) {
+    const gapMins = Math.round(maxGapMs / 60000);
+    const when = new Date(gapStart);
+    const hr = when.getHours().toString().padStart(2, '0');
+    const mn = when.getMinutes().toString().padStart(2, '0');
+    const label = maxGapMs > 3600000 ? `${Math.floor(maxGapMs/3600000)}h idle` : `${gapMins}m idle`;
+    gapNote = `<div style="font-size:10px;color:var(--text-xs);margin-top:5px;padding:3px 6px;border-radius:4px;background:oklch(40% 0.04 55 / 0.15)">Longest gap: ${label} starting ${hr}:${mn}</div>`;
+  }
+  el.innerHTML = `<div class="m-group-title">Session Lanes <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h</span></div><div id="swimlane-wrap">${rows}</div>${gapNote}`;
 }
 
 // ── feature 18: loop run history ──────────────────────────
@@ -2335,6 +2519,185 @@ function toggleLoop(row) {
   row.classList.toggle('open');
 }
 
+// ── feature 19: cache efficiency panel ────────────────────
+function buildEfficiencyPanel() {
+  const el = document.getElementById('m-efficiency');
+  if (!el) return;
+  const sessions = allSessions.filter(s => s.totalInputTokens > 0);
+  if (!sessions.length) {
+    el.innerHTML = `<div class="m-group-title">Cache Efficiency</div><div class="loading-txt" style="padding:4px 0">No token data yet</div>`;
+    return;
+  }
+  const totalCR = sessions.reduce((a,s) => a + (s.cacheReadTokens||0), 0);
+  const totalIn = sessions.reduce((a,s) => a + (s.totalInputTokens||0), 0);
+  const avgPct = totalIn > 0 ? Math.round(totalCR/totalIn*100) : 0;
+  const avgCls = avgPct >= 60 ? 'eff-good' : avgPct >= 20 ? 'eff-warn' : 'eff-bad';
+  const rows = sessions.slice(0, 5).map(s => {
+    const pct = s.totalInputTokens > 0 ? Math.round((s.cacheReadTokens||0)/s.totalInputTokens*100) : 0;
+    const cls = pct >= 60 ? 'eff-good' : pct >= 20 ? 'eff-warn' : 'eff-bad';
+    const fillColor = pct >= 60 ? 'oklch(65% 0.15 150)' : pct >= 20 ? 'oklch(70% 0.18 80)' : 'oklch(65% 0.2 25)';
+    const lbl = (s.lastPrompt || s.id).slice(0, 22);
+    return `<div class="eff-row">
+      <span class="eff-lbl" title="${esc(s.lastPrompt||s.id)}">${esc(lbl)}</span>
+      <span class="eff-pct ${cls}">${pct}%</span>
+    </div>
+    <div class="eff-bar-wrap"><div class="eff-bar-fill" style="width:${pct}%;background:${fillColor}"></div></div>`;
+  }).join('');
+  el.innerHTML = `<div class="m-group-title">Cache Efficiency <span class="${avgCls}" style="font-size:10px;font-weight:400">${avgPct}% avg</span></div>${rows}`;
+}
+
+// ── feature 20: model mix ──────────────────────────────────
+let modelMixOpen = false;
+function toggleModelMix() {
+  modelMixOpen = !modelMixOpen;
+  const p = document.getElementById('model-mix-panel');
+  p.style.display = modelMixOpen ? 'block' : 'none';
+  document.getElementById('btn-model-mix').classList.toggle('active', modelMixOpen);
+  if (modelMixOpen) renderModelMix();
+}
+function renderModelMix() {
+  const body = document.getElementById('model-mix-body');
+  const breakdown = {};
+  for (const s of allSessions) {
+    for (const [model, d] of Object.entries(s.modelBreakdown || {})) {
+      if (!breakdown[model]) breakdown[model] = { calls: 0, cost: 0 };
+      breakdown[model].calls += d.calls || 0;
+      breakdown[model].cost += d.cost || 0;
+    }
+  }
+  const entries = Object.entries(breakdown).sort((a,b) => b[1].cost - a[1].cost);
+  if (!entries.length) {
+    body.innerHTML = '<div style="color:var(--text-lo);font-size:11px;padding:8px 0">No model data</div>';
+    return;
+  }
+  const totalCost = entries.reduce((a,[,d]) => a + d.cost, 0);
+  body.innerHTML = `<table class="lb-table"><thead><tr>
+    <th>Model</th><th class="lb-cost">Cost</th><th class="lb-dur">%</th><th class="lb-dur">Calls</th>
+  </tr></thead><tbody>
+  ${entries.map(([model, d]) => {
+    const short = model.replace(/^claude-/,'').replace(/-\d{8}$/,'');
+    const pct = totalCost > 0 ? Math.round(d.cost/totalCost*100) : 0;
+    return `<tr>
+      <td style="font-size:11px">${esc(short)}</td>
+      <td class="lb-cost">$${d.cost.toFixed(2)}</td>
+      <td class="lb-dur">${pct}%</td>
+      <td class="lb-dur">${d.calls}</td>
+    </tr>`;
+  }).join('')}
+  </tbody></table>`;
+}
+
+// ── feature 21: weekly recap ───────────────────────────────
+const WEEKLY_DISMISSED_KEY = 'mm-weekly-dismissed';
+function getWeekKey() {
+  const d = new Date();
+  const sun = new Date(d); sun.setDate(d.getDate() - d.getDay()); sun.setHours(0,0,0,0);
+  return sun.toISOString().slice(0,10);
+}
+function buildWeeklyRecap() {
+  if (localStorage.getItem(WEEKLY_DISMISSED_KEY) === getWeekKey()) return;
+  if (!allSessions.length) return;
+  const weekStart = new Date(); weekStart.setDate(weekStart.getDate() - weekStart.getDay()); weekStart.setHours(0,0,0,0);
+  const weekSess = allSessions.filter(s => {
+    const t = s.lastTs || s.mtime;
+    return t && new Date(typeof t === 'number' ? t : t).getTime() >= weekStart.getTime();
+  });
+  if (!weekSess.length) return;
+  const totalCost = weekSess.reduce((a,s) => a + (s.totalCost||0), 0);
+  const totalTools = weekSess.reduce((a,s) => a + (s.toolCalls||0), 0);
+  const days = new Set(weekSess.map(s => {
+    const t = s.lastTs || s.mtime;
+    return new Date(typeof t === 'number' ? t : t).toDateString();
+  })).size;
+  const longestMs = Math.max(...weekSess.map(s => s.totalDurationMs||0));
+  const stats = [
+    `${weekSess.length} session${weekSess.length!==1?'s':''}`,
+    `${days} day${days!==1?'s':''}`,
+    totalCost > 0 ? `$${totalCost.toFixed(2)} spent` : null,
+    totalTools > 0 ? `${totalTools.toLocaleString()} tool calls` : null,
+    longestMs > 0 ? `${fmtDur(longestMs)} longest` : null,
+  ].filter(Boolean);
+  document.getElementById('weekly-stats').innerHTML = stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('');
+  document.getElementById('weekly-card').classList.add('show');
+}
+function dismissWeekly() {
+  localStorage.setItem(WEEKLY_DISMISSED_KEY, getWeekKey());
+  document.getElementById('weekly-card').classList.remove('show');
+}
+
+// ── feature 23: tool error rate ────────────────────────────
+let toolErrorsOpen = false;
+function toggleToolErrors() {
+  toolErrorsOpen = !toolErrorsOpen;
+  const p = document.getElementById('tool-errors-panel');
+  p.style.display = toolErrorsOpen ? 'block' : 'none';
+  document.getElementById('btn-tool-errors').classList.toggle('active', toolErrorsOpen);
+  if (toolErrorsOpen) loadToolErrors();
+}
+async function loadToolErrors() {
+  const body = document.getElementById('tool-errors-body');
+  body.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/tool-errors?dir=' + enc(DIR));
+    const errors = data.errors || [];
+    if (!errors.length) {
+      body.innerHTML = '<div style="color:var(--text-lo);font-size:11px;padding:8px 0">No tool errors found in recent sessions</div>';
+      return;
+    }
+    body.innerHTML = `<table class="lb-table"><thead><tr>
+      <th>Tool</th><th class="lb-cost">Errors</th><th class="lb-dur">Rate</th>
+    </tr></thead><tbody>
+    ${errors.map(e => {
+      const rate = e.total > 0 ? Math.round(e.count/e.total*100)+'%' : '—';
+      return `<tr>
+        <td style="font-size:11px">${esc(e.tool)}</td>
+        <td class="lb-cost" style="color:oklch(65% 0.2 25)">${e.count}</td>
+        <td class="lb-dur">${rate}</td>
+      </tr>`;
+    }).join('')}
+    </tbody></table>`;
+  } catch (err) {
+    body.innerHTML = `<div style="color:var(--text-lo);font-size:11px">Error: ${esc(err.message)}</div>`;
+  }
+}
+
+// ── feature 24: activity heatmap ──────────────────────────
+function buildActivityHeatmap() {
+  const el = document.getElementById('m-heatmap');
+  if (!el) return;
+  if (!allSessions.length) {
+    el.innerHTML = `<div class="m-group-title">Activity Heatmap</div><div class="loading-txt" style="padding:4px 0">No sessions</div>`;
+    return;
+  }
+  const grid = Array.from({length:7}, () => new Array(24).fill(0));
+  for (const s of allSessions) {
+    const t = s.firstTs || s.mtime;
+    if (!t) continue;
+    const d = new Date(typeof t === 'number' ? t : t);
+    grid[d.getDay()][d.getHours()]++;
+  }
+  const maxVal = Math.max(1, ...grid.flat());
+  const DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  let html = '<div class="heatmap-grid">';
+  html += '<div class="heatmap-row"><div class="heatmap-lbl"></div>';
+  for (let h = 0; h < 24; h++) {
+    html += `<div class="heatmap-hdr-cell">${h % 6 === 0 ? h : ''}</div>`;
+  }
+  html += '</div>';
+  for (let d = 0; d < 7; d++) {
+    html += `<div class="heatmap-row"><div class="heatmap-lbl">${DAYS[d]}</div>`;
+    for (let h = 0; h < 24; h++) {
+      const v = grid[d][h];
+      const alpha = v > 0 ? Math.max(0.18, v/maxVal).toFixed(2) : 0;
+      const bg = v > 0 ? `oklch(65% 0.18 200 / ${alpha})` : 'transparent';
+      html += `<div class="heatmap-cell" style="background:${bg};border:1px solid ${v>0?'transparent':'var(--border)'}" title="${DAYS[d]} ${h}:00 — ${v} session${v!==1?'s':''}"></div>`;
+    }
+    html += '</div>';
+  }
+  html += '</div>';
+  el.innerHTML = `<div class="m-group-title">Activity Heatmap <span style="font-size:10px;color:var(--text-xs);font-weight:400">by day/hr</span></div>${html}`;
+}
+
 // ── memory ─────────────────────────────────────────────────
 async function renderMemory() {
   activeMemNs = 'All'; // reset on every render so stale filter doesn't persist
@@ -2784,6 +3147,176 @@ document.addEventListener('keydown', e => {
   }
 });
 
+// ── feature 25: notification toasts ──────────────────────
+let _toastLastBudgetKey = '';
+function showToast(title, msg, type = 'info', duration = 5000) {
+  const rack = document.getElementById('toast-rack');
+  if (!rack) return;
+  const icoMap = { warn: '⚑', err: '⚠', ok: '✓', info: '◉' };
+  const div = document.createElement('div');
+  div.className = 'toast t-' + type;
+  div.innerHTML = `<span class="toast-ico">${icoMap[type] || '◉'}</span>
+    <div class="toast-body">
+      <div class="toast-title">${esc(title)}</div>
+      <div class="toast-msg">${esc(msg)}</div>
+    </div>
+    <button class="toast-close" onclick="this.closest('.toast').remove()">✕</button>`;
+  rack.appendChild(div);
+  if (duration > 0) setTimeout(() => { try { div.remove(); } catch {} }, duration);
+}
+
+function checkBudgetToast(todayCost, monthCost) {
+  const budget = JSON.parse(localStorage.getItem('mm-budget') || '{}');
+  const daily = parseFloat(budget.daily) || 0;
+  const monthly = parseFloat(budget.monthly) || 0;
+  if (daily > 0 && todayCost >= daily * 0.9) {
+    const pct = Math.round((todayCost / daily) * 100);
+    const key = 'daily-' + pct;
+    if (key !== _toastLastBudgetKey) {
+      _toastLastBudgetKey = key;
+      showToast('Budget alert', `Daily spend at ${pct}% ($${todayCost.toFixed(2)} of $${daily})`, todayCost >= daily ? 'err' : 'warn');
+    }
+  }
+  if (monthly > 0 && monthCost >= monthly * 0.9) {
+    const pct = Math.round((monthCost / monthly) * 100);
+    const key = 'monthly-' + pct;
+    if (key !== _toastLastBudgetKey) {
+      _toastLastBudgetKey = key;
+      showToast('Monthly budget', `Monthly spend at ${pct}% ($${monthCost.toFixed(2)} of $${monthly})`, monthCost >= monthly ? 'err' : 'warn');
+    }
+  }
+}
+
+// ── feature 26: token velocity sparkline ──────────────────
+function buildTokenVelocity() {
+  const el = document.getElementById('m-velocity');
+  if (!el || !allSessions.length) return;
+  const now = Date.now();
+  const HOUR = 3600000;
+  const buckets = new Array(24).fill(0);
+  for (const s of allSessions) {
+    const t = s.firstTs || s.mtime;
+    if (!t) continue;
+    const ts = typeof t === 'number' ? t : new Date(t).getTime();
+    const hoursAgo = (now - ts) / HOUR;
+    if (hoursAgo < 0 || hoursAgo >= 24) continue;
+    const bucket = Math.min(23, Math.floor(23 - hoursAgo));
+    buckets[bucket] += s.totalInputTokens || 0;
+  }
+  const maxTok = Math.max(1, ...buckets);
+  const totalTok = buckets.reduce((a, b) => a + b, 0);
+  const fmt = n => n > 1e6 ? (n/1e6).toFixed(1)+'M' : n > 1e3 ? (n/1e3).toFixed(0)+'k' : String(n);
+  const bars = buckets.map((v, i) => {
+    const h = Math.max(2, Math.round((v / maxTok) * 28));
+    const cls = v > maxTok * 0.66 ? 'vel-hi' : v < maxTok * 0.15 ? 'vel-lo' : '';
+    const hrsAgo = 23 - i;
+    return `<div class="vel-bar ${cls}" style="height:${h}px" title="${fmt(v)} tokens — ${hrsAgo}h ago"></div>`;
+  }).join('');
+  const totalCost = allSessions.reduce((a, s) => a + (s.totalCost || 0), 0);
+  el.innerHTML = `<div class="m-group-title">Token Velocity <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h · ${fmt(totalTok)}</span></div>
+    <div id="vel-chart">${bars}</div>
+    <div style="font-size:10px;color:var(--text-xs);margin-top:4px">Total cost <span style="color:oklch(78% 0.18 75)">$${totalCost.toFixed(2)}</span></div>`;
+}
+
+// ── feature 27: export sessions CSV ───────────────────────
+function exportSessionsCSV() {
+  if (!allSessions.length) { showToast('No data', 'No sessions loaded yet', 'warn'); return; }
+  const headers = ['Date', 'Session ID', 'Prompt', 'Cost ($)', 'Duration (s)', 'Tool Calls', 'User Messages', 'Cache Hit %', 'Input Tokens'];
+  const rows = allSessions.map(s => {
+    const dt = new Date(s.firstTs || s.mtime || 0).toISOString().slice(0, 19).replace('T', ' ');
+    const cost = typeof s.totalCost === 'number' ? s.totalCost.toFixed(4) : '';
+    const dur = s.totalDurationMs ? Math.round(s.totalDurationMs / 1000) : '';
+    const cachePct = s.totalInputTokens > 0 ? Math.round((s.cacheReadTokens || 0) / s.totalInputTokens * 100) : '';
+    const prompt = (s.lastPrompt || '').replace(/"/g, '""');
+    return [dt, s.id, prompt, cost, dur, s.toolCalls || '', s.userMessages || '', cachePct, s.totalInputTokens || ''];
+  });
+  const csv = [headers, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n');
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `sessions-${new Date().toISOString().slice(0, 10)}.csv`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+  showToast('Exported', `${allSessions.length} sessions saved as CSV`, 'ok');
+}
+
+// ── feature 28: tool usage ranking ────────────────────────
+let toolRankOpen = false;
+function toggleToolRank() {
+  toolRankOpen = !toolRankOpen;
+  document.getElementById('btn-tool-rank').classList.toggle('on', toolRankOpen);
+  const p = document.getElementById('tool-rank-panel');
+  p.style.display = toolRankOpen ? '' : 'none';
+  if (toolRankOpen) loadToolRank();
+}
+async function loadToolRank() {
+  const el = document.getElementById('tool-rank-body');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/tool-ranking?dir=' + enc(DIR));
+    if (!data.tools?.length) { el.innerHTML = '<div class="loading-txt">No tool usage data</div>'; return; }
+    const maxCount = data.tools[0].count;
+    const rows = data.tools.slice(0, 15).map((t, i) => {
+      const barW = Math.round((t.count / maxCount) * 100);
+      const errRate = t.errors > 0 ? ((t.errors / t.count) * 100).toFixed(0) + '%' : '—';
+      return `<tr><td class="lb-rank">${i + 1}</td>
+        <td style="font-size:12px;color:var(--text-mid);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(t.tool)}</td>
+        <td style="width:80px;padding:4px 6px">
+          <div style="height:4px;background:var(--surface-hi);border-radius:2px;overflow:hidden">
+            <div style="height:100%;width:${barW}%;background:oklch(65% 0.15 200);border-radius:2px"></div>
+          </div>
+        </td>
+        <td class="lb-cost" style="color:var(--text-mid)">${t.count.toLocaleString()}</td>
+        <td class="lb-dur" style="color:${t.errors > 0 ? 'oklch(70% 0.18 25)' : 'var(--text-xs)'}">${errRate}</td>
+      </tr>`;
+    }).join('');
+    el.innerHTML = `<table class="lb-table"><thead><tr>
+      <th class="lb-rank">#</th><th>Tool</th><th></th><th class="lb-cost">Calls</th><th class="lb-dur">Error%</th>
+    </tr></thead><tbody>${rows}</tbody></table>`;
+  } catch (err) {
+    el.innerHTML = '<div class="loading-txt">Could not load: ' + esc(err.message) + '</div>';
+  }
+}
+
+// ── feature 29: cost breakdown by project ─────────────────
+let projCostsOpen = false;
+function toggleProjCosts() {
+  projCostsOpen = !projCostsOpen;
+  document.getElementById('btn-proj-costs').classList.toggle('on', projCostsOpen);
+  const p = document.getElementById('proj-costs-panel');
+  p.style.display = projCostsOpen ? '' : 'none';
+  if (projCostsOpen) loadProjCosts();
+}
+async function loadProjCosts() {
+  const el = document.getElementById('proj-costs-body');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/project-costs');
+    if (!data.projects?.length) { el.innerHTML = '<div class="loading-txt">No cost data across projects</div>'; return; }
+    const maxCost = data.projects[0].cost;
+    const rows = data.projects.slice(0, 10).map((p, i) => {
+      const barW = maxCost > 0 ? Math.round((p.cost / maxCost) * 100) : 0;
+      const name = p.path.split('/').filter(Boolean).pop() || p.path;
+      return `<tr onclick="switchProject('${esc(p.path)}')" style="cursor:pointer" title="${esc(p.path)}">
+        <td class="lb-rank">${i + 1}</td>
+        <td style="font-size:12px;color:var(--text-mid);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(name)}</td>
+        <td class="lb-cost">$${p.cost.toFixed(2)}</td>
+        <td style="width:80px;padding:4px 6px">
+          <div style="height:4px;background:var(--surface-hi);border-radius:2px;overflow:hidden">
+            <div style="height:100%;width:${barW}%;background:oklch(72% 0.18 75 / 0.7);border-radius:2px"></div>
+          </div>
+        </td>
+        <td class="lb-dur">${p.sessions}</td>
+      </tr>`;
+    }).join('');
+    el.innerHTML = `<table class="lb-table"><thead><tr>
+      <th class="lb-rank">#</th><th>Project</th><th class="lb-cost">Cost</th><th></th><th class="lb-dur">Sessions</th>
+    </tr></thead><tbody>${rows}</tbody></table>`;
+  } catch (err) {
+    el.innerHTML = '<div class="loading-txt">Could not load: ' + esc(err.message) + '</div>';
+  }
+}
+
 // ── helpers ────────────────────────────────────────────────
 function enc(s) { return encodeURIComponent(s); }
 function esc(s) {