@monoes/monomindcli 1.10.37 → 1.10.39

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

@@ -389,6 +389,69 @@ 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; }
 
+/* ── session date groups ─────────────────────────────────── */
+.sg-section { margin-bottom:4px; }
+.sg-header { display:flex; align-items:center; gap:6px; padding:5px 2px 3px; cursor:pointer; user-select:none; }
+.sg-title { font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-xs); font-weight:600; }
+.sg-count { font-size:10px; color:var(--text-lo); background:var(--surface-hi); border-radius:8px; padding:1px 6px; }
+.sg-toggle { font-size:10px; color:var(--text-xs); margin-left:auto; }
+.sg-header:hover .sg-title { color:var(--text-lo); }
+.sg-body.collapsed { display:none; }
+
+/* ── session heatmap calendar ─────────────────────────────── */
+#sess-heatmap { margin-bottom:14px; }
+.shm-grid { display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; grid-auto-columns:10px; gap:2px; margin-top:6px; }
+.shm-cell { border-radius:2px; background:var(--surface-hi); cursor:pointer; transition:outline 0.1s; }
+.shm-cell:hover { outline:1px solid var(--accent); outline-offset:-1px; }
+.shm-cell.shm-1 { background:oklch(72% 0.18 75 / 0.22); }
+.shm-cell.shm-2 { background:oklch(72% 0.18 75 / 0.42); }
+.shm-cell.shm-3 { background:oklch(72% 0.18 75 / 0.65); }
+.shm-cell.shm-4 { background:oklch(72% 0.18 75 / 0.85); }
+.shm-cell.shm-active { outline:2px solid var(--accent); outline-offset:-1px; }
+.shm-label { font-size:10px; color:var(--text-xs); display:flex; align-items:center; justify-content:space-between; }
+#shm-clear { font-size:10px; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; display:none; }
+#shm-clear.show { display:inline; }
+
+/* ── cost period toggle ───────────────────────────────────── */
+.period-toggles { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
+.period-btn { 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; }
+.period-btn:hover { color:var(--text-hi); }
+.period-btn.active { background:var(--accent-dim); color:var(--accent); border-color:oklch(72% 0.18 75 / 0.3); }
+
+/* ── bulk session actions ─────────────────────────────────── */
+.sess-row.bulk-sel { background:oklch(72% 0.18 75 / 0.08); outline:1px solid oklch(72% 0.18 75 / 0.3); outline-offset:-1px; }
+#bulk-toolbar { display:none; position:sticky; top:0; z-index:10; background:oklch(18% 0.009 55); border:1px solid oklch(72% 0.18 75 / 0.3); border-radius:var(--r); padding:8px 14px; margin-bottom:10px; gap:10px; align-items:center; }
+#bulk-toolbar.show { display:flex; }
+.bulk-count { font-size:12px; color:var(--text-mid); flex:1; }
+.bulk-btn { font-size:11px; padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text-mid); cursor:pointer; font-family:var(--sans); transition:color 0.1s; }
+.bulk-btn:hover { color:var(--text-hi); }
+.bulk-btn.danger { color:oklch(65% 0.15 25); border-color:oklch(65% 0.15 25 / 0.3); }
+
+/* ── files touched ────────────────────────────────────────── */
+.sr-files { font-size:10px; color:var(--text-xs); margin-top:2px; display:flex; flex-wrap:wrap; gap:3px; }
+.sr-file-chip { font-family:var(--mono); background:var(--surface-hi); border-radius:3px; padding:1px 5px; color:var(--text-lo); }
+
+/* ── memory age bars ──────────────────────────────────────── */
+.dr-age-bar { height:2px; border-radius:1px; margin-top:4px; background:oklch(72% 0.18 75 / 0.25); }
+.dr-age-bar-fill { height:100%; border-radius:1px; background:var(--accent); }
+
+/* ── loop creation form ───────────────────────────────────── */
+#loop-create-form { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; margin-bottom:16px; }
+.lcf-title { font-size:12px; font-weight:600; color:var(--text-hi); margin-bottom:10px; }
+.lcf-row { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
+.lcf-label { font-size:10px; color:var(--text-xs); text-transform:uppercase; letter-spacing:0.06em; }
+.lcf-input, .lcf-textarea { background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text-hi); font-family:var(--sans); font-size:12px; padding:6px 10px; transition:border-color 0.15s; }
+.lcf-textarea { resize:vertical; min-height:56px; }
+.lcf-input:focus, .lcf-textarea:focus { outline:none; border-color:oklch(72% 0.18 75 / 0.5); }
+.lcf-row-inline { display:flex; gap:8px; }
+.lcf-row-inline .lcf-row { flex:1; margin-bottom:0; }
+.lcf-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
+.lcf-submit { background:var(--accent); color:oklch(11% 0.009 55); border:none; border-radius:6px; font-size:12px; font-weight:600; padding:5px 16px; cursor:pointer; font-family:var(--sans); }
+.lcf-submit:hover { background:oklch(78% 0.18 75); }
+.lcf-cancel { background:transparent; border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--text-lo); padding:5px 12px; cursor:pointer; font-family:var(--sans); }
+#btn-new-loop { font-size:11px; color:var(--text-lo); background:transparent; border:1px solid var(--border); border-radius:8px; padding:3px 10px; cursor:pointer; transition:color 0.1s; font-family:var(--sans); margin-bottom:12px; }
+#btn-new-loop:hover { color:var(--accent); border-color:oklch(72% 0.18 75 / 0.4); }
+
 /* ── 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; }
@@ -436,6 +499,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; }
@@ -597,6 +661,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>
@@ -654,9 +771,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>
@@ -792,6 +911,10 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <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>
 
@@ -816,6 +939,10 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <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>
@@ -835,6 +962,36 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
         <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-heatmap" style="margin-bottom:14px;display:none">
+          <div class="shm-label"><span>12-week activity</span><button id="shm-clear" onclick="clearHeatmapFilter()">✕ Clear filter</button></div>
+          <div class="shm-grid" id="shm-grid"></div>
+        </div>
+        <div class="period-toggles" id="period-toggles">
+          <span style="font-size:10px;color:var(--text-xs);align-self:center;text-transform:uppercase;letter-spacing:0.06em">Period:</span>
+          <button class="period-btn active" data-period="day" onclick="setPeriod('day')">Day</button>
+          <button class="period-btn" data-period="week" onclick="setPeriod('week')">Week</button>
+          <button class="period-btn" data-period="month" onclick="setPeriod('month')">Month</button>
+          <button class="period-btn" data-period="all" onclick="setPeriod('all')">All</button>
+        </div>
+        <div id="bulk-toolbar">
+          <span class="bulk-count" id="bulk-count">0 selected</span>
+          <button class="bulk-btn" onclick="bulkExport()">⬇ Export</button>
+          <button class="bulk-btn" onclick="bulkBookmark()">☆ Bookmark all</button>
+          <button class="bulk-btn danger" onclick="clearBulkSelection()">✕ Clear</button>
+        </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>
@@ -844,6 +1001,32 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
       <div class="vscroll">
         <div class="pg-title">Loops</div>
         <div class="pg-sub">Scheduled automation loops</div>
+        <button id="btn-new-loop" onclick="showLoopForm()">+ New Loop</button>
+        <div id="loop-create-form" style="display:none">
+          <div class="lcf-title">Create Loop</div>
+          <div class="lcf-row">
+            <label class="lcf-label">Prompt</label>
+            <textarea class="lcf-textarea" id="lcf-prompt" placeholder="What should the agent do each iteration?"></textarea>
+          </div>
+          <div class="lcf-row">
+            <label class="lcf-label">Name (optional)</label>
+            <input class="lcf-input" id="lcf-name" type="text" placeholder="My loop">
+          </div>
+          <div class="lcf-row-inline">
+            <div class="lcf-row">
+              <label class="lcf-label">Interval</label>
+              <input class="lcf-input" id="lcf-interval" type="text" placeholder="1h" value="1h">
+            </div>
+            <div class="lcf-row">
+              <label class="lcf-label">Max reps (blank = ∞)</label>
+              <input class="lcf-input" id="lcf-maxreps" type="number" placeholder="∞" min="1">
+            </div>
+          </div>
+          <div class="lcf-actions">
+            <button class="lcf-cancel" onclick="hideLoopForm()">Cancel</button>
+            <button class="lcf-submit" onclick="createLoop()">Create Loop</button>
+          </div>
+        </div>
         <div id="loops-content" class="loop-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -885,6 +1068,25 @@ 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>
+
+<!-- shortcut help modal -->
+<div id="shortcut-modal" onclick="if(event.target===this)closeShortcutHelp()">
+  <div id="shortcut-box">
+    <div class="sk-title">Keyboard Shortcuts <button class="sk-close" onclick="closeShortcutHelp()">✕</button></div>
+    <div class="sk-section">Feed (Now view)</div>
+    <div class="sk-row"><span class="sk-desc">Navigate entries</span><span class="sk-keys"><kbd>J</kbd><kbd>K</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Open detail drawer</span><span class="sk-keys"><kbd>↵</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Search in feed</span><span class="sk-keys"><kbd>/</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Jump to live session</span><span class="sk-keys"><kbd>G</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Refresh current view</span><span class="sk-keys"><kbd>R</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Toggle ambient mode</span><span class="sk-keys"><kbd>A</kbd></span></div>
+    <div class="sk-section">Global</div>
+    <div class="sk-row"><span class="sk-desc">Command palette</span><span class="sk-keys"><kbd>⌘</kbd><kbd>K</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Close / dismiss</span><span class="sk-keys"><kbd>Esc</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">This help</span><span class="sk-keys"><kbd>?</kbd></span></div>
+  </div>
+</div>
 
 <!-- budget modal (fixed overlay, outside app) -->
 <div id="budget-modal" onclick="if(event.target===this)closeBudgetModal()">
@@ -975,9 +1177,19 @@ async function init() {
     document.getElementById('sb-path').textContent = DIR;
     document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
   } catch (_) {}
+  // deep-link: ?sess=<id>&proj=<path>
+  const params = new URLSearchParams(window.location.search);
+  const projParam = params.get('proj');
+  const sessParam = params.get('sess');
+  if (projParam) {
+    DIR = projParam;
+    document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
+    document.getElementById('sb-path').textContent = DIR;
+  }
   viewRendered['now'] = true; // prevents switchView from re-rendering NOW on jumpToSession
   updateBudgetBtnStyle();
   await refreshNow();
+  if (sessParam) setTimeout(() => jumpToSession(sessParam), 300);
   startPolling();
 }
 
@@ -1197,6 +1409,8 @@ function renderFeedEvents(events, silent) {
   updateBurnRate(filtered);
   // session recap card
   buildRecap(filtered, allSessions[sessionIdx]);
+  // infer current activity from most recent tool
+  updateCurrentActivity(visible);
 }
 
 function renderGroupRow(g) {
@@ -1568,6 +1782,9 @@ async function renderSessions() {
       el.innerHTML = '<div class="empty"><div class="empty-ico">☆</div><div>No bookmarked sessions</div></div>';
       return;
     }
+    // compute median cost for anomaly detection
+    const costsForMedian = sessions.map(s => s.totalCost || 0).filter(c => c > 0).sort((a, b) => a - b);
+    const medianCost = costsForMedian.length ? costsForMedian[Math.floor(costsForMedian.length / 2)] : 0;
     const sessData = JSON.stringify(toShow).replace(/'/g, '&#39;');
     el.innerHTML = toShow.map((s, idx) => {
       const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
@@ -1575,6 +1792,14 @@ 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);
+      // anomaly badge
+      const sCost = s.totalCost || 0;
+      let anomBadge = '';
+      if (medianCost > 0.05 && sCost > medianCost * 3 && sCost > 0.5) {
+        anomBadge = `<span class="sess-anomaly anom-cost" title="Cost ${((sCost/medianCost).toFixed(1))}× above median">! costly</span>`;
+      } else if (s.toolCalls > 0 && (s.errorCount || 0) / s.toolCalls > 0.3) {
+        anomBadge = `<span class="sess-anomaly anom-err" title="${s.errorCount} tool errors">! errors</span>`;
+      }
       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)">
@@ -1593,7 +1818,7 @@ async function renderSessions() {
           <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>
+        <div class="sr-meta">${esc(meta)}${anomBadge}</div>
         ${(summaries || autoTags) ? `<div class="sr-tags">${summaries}${autoTags}</div>` : ''}
         ${satBar}
         <div class="sess-notes-wrap" onclick="event.stopPropagation()">
@@ -1613,7 +1838,24 @@ async function renderSessions() {
     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>';
   }
@@ -1621,6 +1863,7 @@ async function renderSessions() {
 
 function jumpToSession(id) {
   switchView('now');
+  history.replaceState(null, '', '?sess=' + encodeURIComponent(id) + '&proj=' + encodeURIComponent(DIR));
   setTimeout(() => {
     const i = allSessions.findIndex(x => x.id === id);
     if (i >= 0) { sessionIdx = i; userScrolled = false; loadFeedForSession(allSessions[i]); }
@@ -2004,8 +2247,21 @@ function buildDigest() {
     ...themes.map(t => `#${t}`),
   ].filter(Boolean);
 
+  // cost forecast: project monthly spend from daily average
+  const today2 = new Date();
+  const daysInMonth = new Date(today2.getFullYear(), today2.getMonth() + 1, 0).getDate();
+  const dayOfMonth = today2.getDate();
+  const monthCostSoFar = allSessions.filter(s => {
+    const t = s.firstTs || s.mtime;
+    if (!t) return false;
+    const d = new Date(typeof t === 'number' ? t : t);
+    return d.getFullYear() === today2.getFullYear() && d.getMonth() === today2.getMonth();
+  }).reduce((a, s) => a + (s.totalCost || 0), 0);
+  const dailyAvg = dayOfMonth > 0 ? monthCostSoFar / dayOfMonth : 0;
+  const projected = dailyAvg * daysInMonth;
+  const forecastHtml = projected > 0.05 ? `<span class="digest-stat" title="Projected monthly spend at current pace" style="color:oklch(72% 0.14 200)">~$${projected.toFixed(2)}/mo</span>` : '';
   document.getElementById('digest-stats').innerHTML =
-    stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('');
+    stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('') + forecastHtml;
   document.getElementById('digest-card').classList.add('show');
 }
 
@@ -2331,7 +2587,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 ──────────────────────────
@@ -2489,6 +2771,7 @@ function buildWeeklyRecap() {
     return new Date(typeof t === 'number' ? t : t).toDateString();
   })).size;
   const longestMs = Math.max(...weekSess.map(s => s.totalDurationMs||0));
+  const streak = calcStreak();
   const stats = [
     `${weekSess.length} session${weekSess.length!==1?'s':''}`,
     `${days} day${days!==1?'s':''}`,
@@ -2496,7 +2779,8 @@ function buildWeeklyRecap() {
     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('');
+  const streakHtml = streak >= 2 ? `<span class="streak-chip" title="${streak} consecutive days with sessions">🔥 ${streak}d streak</span>` : '';
+  document.getElementById('weekly-stats').innerHTML = stats.map(s => `<span class="digest-stat">${esc(s)}</span>`).join('') + streakHtml;
   document.getElementById('weekly-card').classList.add('show');
 }
 function dismissWeekly() {
@@ -2997,7 +3281,8 @@ document.addEventListener('keydown', e => {
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
   if (document.getElementById('cmd-palette').classList.contains('open')) return;
 
-  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); if (document.getElementById('app').classList.contains('ambient')) toggleAmbient(); }
+  if (e.key === 'Escape') { closeDetail(); closeCmdPalette(); closeShortcutHelp(); if (document.getElementById('app').classList.contains('ambient')) toggleAmbient(); }
+  if (e.key === '?') { e.preventDefault(); openShortcutHelp(); return; }
   if (e.key === 'a' || e.key === 'A') { if (currentView === 'now') { e.preventDefault(); toggleAmbient(); } }
 
   if (currentView === 'now') {
@@ -3026,6 +3311,279 @@ document.addEventListener('keydown', e => {
   }
 });
 
+// ── feature 31: inline session filter ─────────────────────
+function filterSessions(q) {
+  const rows = document.querySelectorAll('#sess-content .sess-row');
+  const lq = q.toLowerCase().trim();
+  let visible = 0;
+  rows.forEach(row => {
+    const prompt = (row.querySelector('.sr-prompt')?.textContent || '').toLowerCase();
+    const meta = (row.querySelector('.sr-meta')?.textContent || '').toLowerCase();
+    const tags = (row.querySelector('.sr-tags')?.textContent || '').toLowerCase();
+    const match = !lq || prompt.includes(lq) || meta.includes(lq) || tags.includes(lq);
+    row.style.display = match ? '' : 'none';
+    if (match) visible++;
+  });
+  const countEl = document.getElementById('sess-filter-count');
+  if (countEl) countEl.textContent = lq && rows.length ? `${visible} / ${rows.length}` : '';
+}
+
+// ── feature 32: keyboard shortcut help modal ──────────────
+function openShortcutHelp() { document.getElementById('shortcut-modal').classList.add('open'); }
+function closeShortcutHelp() { document.getElementById('shortcut-modal').classList.remove('open'); }
+
+// ── feature 33: "currently working on" inference ──────────
+function updateCurrentActivity(events) {
+  const el = document.getElementById('topbar-activity');
+  if (!el) return;
+  if (!events?.length) { el.textContent = ''; el.classList.remove('loaded'); return; }
+  const recent = [...events].reverse().find(ev => ev.kind === 'tool');
+  if (!recent) { el.textContent = ''; el.classList.remove('loaded'); return; }
+  const name = recent.name || '';
+  let activity = '';
+  if (['Write', 'Edit', 'Read', 'MultiEdit'].includes(name)) {
+    const lbl = recent.label || '';
+    const match = lbl.match(/([^/\\]+\.[a-zA-Z0-9]+)/) ;
+    activity = match ? match[1] : (lbl.split('/').pop() || name);
+  } else if (name === 'Bash') {
+    activity = 'bash: ' + (recent.label || '').slice(0, 24);
+  } else if (name === 'WebSearch' || name === 'WebFetch') {
+    activity = 'web: ' + (recent.label || '').slice(0, 20);
+  } else if (name) {
+    activity = name;
+  }
+  if (activity) { el.textContent = '⤷ ' + activity; el.classList.add('loaded'); }
+  else { el.textContent = ''; el.classList.remove('loaded'); }
+}
+
+// ── feature 34: prompt pattern analysis ───────────────────
+const STOP_WORDS = new Set(['the','a','an','and','or','but','in','on','at','to','for','of','with','by','from','is','it','this','that','be','as','i','my','me','we','you','your','can','do','did','have','had','has','was','were','are','will','would','should','could','not','no','if','so','then','what','how','when','where','which','who','all','get','make','add','new','old','use','its','into','out','up','any','just','let','set','also','more','using','used','fix','run','file','please']);
+let patternsOpen = false;
+function togglePatterns() {
+  patternsOpen = !patternsOpen;
+  document.getElementById('btn-patterns').classList.toggle('on', patternsOpen);
+  const p = document.getElementById('patterns-panel');
+  p.style.display = patternsOpen ? '' : 'none';
+  if (patternsOpen) buildPatterns();
+}
+function buildPatterns() {
+  const el = document.getElementById('patterns-body');
+  if (!allSessions.length) { el.innerHTML = '<div class="loading-txt">No sessions loaded</div>'; return; }
+  const freq = {};
+  for (const s of allSessions) {
+    const words = (s.lastPrompt || '').toLowerCase().match(/\b[a-z]{4,}\b/g) || [];
+    const seen = new Set();
+    for (const w of words) {
+      if (!STOP_WORDS.has(w) && !seen.has(w)) { freq[w] = (freq[w] || 0) + 1; seen.add(w); }
+    }
+  }
+  const sorted = Object.entries(freq).filter(([,c]) => c >= 2).sort((a, b) => b[1] - a[1]).slice(0, 20);
+  if (!sorted.length) { el.innerHTML = '<div class="loading-txt">Not enough prompt data</div>'; return; }
+  const maxCount = sorted[0][1];
+  const rows = sorted.map(([word, count], i) => {
+    const barW = Math.round((count / maxCount) * 100);
+    return `<tr><td class="lb-rank">${i + 1}</td>
+      <td style="font-size:12px;color:var(--text-mid)">${esc(word)}</td>
+      <td style="width:100px;padding:4px 6px"><div style="height:4px;background:var(--surface-hi);border-radius:2px;overflow:hidden">
+        <div style="height:100%;width:${barW}%;background:oklch(70% 0.15 300);border-radius:2px"></div></div></td>
+      <td class="lb-cost" style="color:var(--text-mid)">${count}</td></tr>`;
+  }).join('');
+  el.innerHTML = `<table class="lb-table"><thead><tr>
+    <th class="lb-rank">#</th><th>Term</th><th></th><th class="lb-cost">Sessions</th>
+  </tr></thead><tbody>${rows}</tbody></table>`;
+}
+
+// ── feature 35: session streak tracker ────────────────────
+function calcStreak() {
+  const dates = new Set(allSessions.map(s => {
+    const t = s.firstTs || s.mtime;
+    if (!t) return null;
+    return new Date(typeof t === 'number' ? t : t).toDateString();
+  }).filter(Boolean));
+  let streak = 0;
+  const today = new Date();
+  for (let i = 0; i <= 365; i++) {
+    const d = new Date(today);
+    d.setDate(d.getDate() - i);
+    if (dates.has(d.toDateString())) {
+      streak++;
+    } else if (i > 0) {
+      break;
+    }
+  }
+  return streak;
+}
+
+// ── 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) {