@monoes/monomindcli 1.10.38 → 1.10.40

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; }
@@ -651,6 +714,70 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 
 /* ── 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; }
+
+/* ── f47: 30-day daily cost trend ────────────────────────── */
+#daily-trend-chart { display:flex; align-items:flex-end; gap:2px; height:40px; margin-top:6px; }
+.dt-bar { flex:1; min-width:4px; border-radius:2px 2px 0 0; background:oklch(72% 0.18 75 / 0.5); cursor:pointer; transition:background 0.15s; }
+.dt-bar:hover,.dt-bar.active { background:oklch(72% 0.18 75); }
+.dt-bar.has-filter { background:oklch(65% 0.15 150 / 0.7); }
+
+/* ── f48: live cost ticker ────────────────────────────────── */
+#live-cost-ticker { font-size:11px; font-family:var(--mono); font-weight:600; color:oklch(78% 0.18 75); opacity:0; transition:opacity 0.3s; white-space:nowrap; }
+#live-cost-ticker.show { opacity:1; }
+#live-cost-ticker .lct-change { font-size:10px; color:var(--green); margin-left:3px; }
+
+/* ── f49: hourly productivity heatmap ────────────────────── */
+#hourly-heatmap-grid { display:grid; grid-template-columns:20px repeat(24,1fr); grid-template-rows:auto; gap:2px; margin-top:6px; font-size:9px; }
+.hh-hour-lbl { color:var(--text-xs); text-align:center; padding-bottom:1px; }
+.hh-day-lbl { color:var(--text-xs); line-height:12px; }
+.hh-cell { height:10px; border-radius:2px; background:var(--surface-hi); cursor:default; }
+.hh-cell.hh-1 { background:oklch(72% 0.18 75 / 0.25); }
+.hh-cell.hh-2 { background:oklch(72% 0.18 75 / 0.5); }
+.hh-cell.hh-3 { background:oklch(72% 0.18 75 / 0.75); }
+.hh-cell.hh-4 { background:oklch(72% 0.18 75); }
+
+/* ── f50: custom tag editor ──────────────────────────────── */
+.sr-custom-tags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:4px; }
+.sr-ctag { display:inline-flex; align-items:center; gap:3px; font-size:10px; padding:1px 6px; border-radius:8px; background:oklch(65% 0.15 200 / 0.15); color:oklch(72% 0.15 200); }
+.sr-ctag .ctag-del { cursor:pointer; opacity:0.6; font-size:9px; line-height:1; }
+.sr-ctag .ctag-del:hover { opacity:1; }
+.ctag-add-btn { font-size:10px; color:var(--text-xs); background:none; border:1px dashed var(--border); border-radius:8px; padding:1px 6px; cursor:pointer; }
+.ctag-add-btn:hover { color:var(--text-lo); border-color:var(--text-xs); }
+.ctag-input-wrap { display:flex; gap:4px; margin-top:4px; }
+.ctag-input { font-size:11px; background:var(--surface-hi); border:1px solid var(--border); border-radius:var(--r); padding:2px 6px; color:var(--text-hi); outline:none; width:100px; }
+.ctag-input:focus { border-color:oklch(72% 0.18 75 / 0.5); }
+.ctag-ok { font-size:10px; background:none; border:1px solid var(--border); border-radius:var(--r); padding:2px 6px; cursor:pointer; color:var(--text-lo); }
+.ctag-ok:hover { color:var(--text-hi); }
+.sr-autotag.ctag { background:oklch(65% 0.15 200 / 0.12); color:oklch(72% 0.15 200); }
+
+/* ── f51: tool error drawer ──────────────────────────────── */
+.sess-anomaly.anom-err.clickable { cursor:pointer; }
+.sess-anomaly.anom-err.clickable:hover { opacity:0.8; }
+.err-drawer { display:none; margin-top:6px; border:1px solid oklch(60% 0.18 25 / 0.3); border-radius:var(--r); overflow:hidden; }
+.err-drawer.open { display:block; }
+.err-drawer-head { display:flex; align-items:center; gap:8px; padding:6px 10px; background:oklch(60% 0.18 25 / 0.08); font-size:11px; font-weight:600; color:oklch(70% 0.18 25); }
+.err-drawer-head .err-close { margin-left:auto; cursor:pointer; font-size:12px; background:none; border:none; color:var(--text-xs); }
+.err-drawer-body { max-height:160px; overflow-y:auto; padding:8px 10px; }
+.err-item { font-size:11px; font-family:var(--mono); color:oklch(80% 0.1 25); border-bottom:1px solid var(--border); padding:4px 0; white-space:pre-wrap; word-break:break-word; }
+.err-item:last-child { border:none; }
+
+/* ── f52: prompt copy button ─────────────────────────────── */
+.sr-copy-btn { font-size:10px; background:none; border:none; cursor:pointer; color:var(--text-xs); padding:0 4px; opacity:0; transition:opacity 0.15s; line-height:1; }
+.sess-row:hover .sr-copy-btn { opacity:1; }
+.sr-copy-btn:hover { color:var(--text-hi); }
+.sr-copy-btn.copied { color:var(--green); opacity:1; }
+
+/* ── f53: session cost histogram ─────────────────────────── */
+#cost-histogram-panel { display:none; margin-bottom:16px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); }
+.ch-title { font-size:11px; font-weight:600; color:var(--text-lo); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; }
+.ch-bars { display:flex; align-items:flex-end; gap:4px; height:50px; }
+.ch-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
+.ch-bar { width:100%; border-radius:2px 2px 0 0; background:oklch(72% 0.18 75 / 0.4); min-height:2px; }
+.ch-lbl { font-size:8px; color:var(--text-xs); white-space:nowrap; }
+.ch-cnt { font-size:9px; color:var(--text-lo); }
+
+/* ── f54: URL param indicator ────────────────────────────── */
+.url-param-active { background:oklch(72% 0.18 75 / 0.08); }
 </style>
 </head>
 <body>
@@ -708,6 +835,7 @@ 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="live-cost-ticker" title="Current session accumulated 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>
@@ -852,6 +980,14 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <div class="m-group-title">Token Velocity</div>
           <div class="loading-txt">—</div>
         </div>
+        <div id="m-daily-trend">
+          <div class="m-group-title">30-Day Cost Trend</div>
+          <div class="loading-txt">—</div>
+        </div>
+        <div id="m-hourly-heatmap">
+          <div class="m-group-title">Peak Work Hours</div>
+          <div class="loading-txt">—</div>
+        </div>
       </div>
     </div>
 
@@ -893,6 +1029,7 @@ 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="cost-histogram-panel"></div>
         <div id="model-mix-panel" style="display:none;margin-bottom:16px">
           <div id="model-mix-body"></div>
         </div>
@@ -908,6 +1045,23 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
         <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>
@@ -921,6 +1075,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>
@@ -964,6 +1144,24 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 </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()">
   <div id="budget-box">
@@ -1053,10 +1251,21 @@ async function init() {
     document.getElementById('sb-path').textContent = DIR;
     document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
   } catch (_) {}
-  viewRendered['now'] = true; // prevents switchView from re-rendering NOW on jumpToSession
+  // 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;
+  }
+  restoreURLParams();
+  viewRendered['now'] = true;
   updateBudgetBtnStyle();
   await refreshNow();
-  startPolling();
+  if (sessParam) setTimeout(() => jumpToSession(sessParam), 300);
+  initSSE();
 }
 
 function startPolling() {
@@ -1064,6 +1273,20 @@ function startPolling() {
   pollTimer = setInterval(() => { if (currentView === 'now') refreshNowSilent(); }, 30000);
 }
 
+let _sseSource = null;
+function initSSE() {
+  if (_sseSource) { try { _sseSource.close(); } catch {} _sseSource = null; }
+  if (!DIR || !window.EventSource) { startPolling(); return; }
+  try {
+    const src = new EventSource('/api/events-stream?dir=' + enc(DIR));
+    src.addEventListener('update', () => { if (currentView === 'now') refreshNowSilent(); });
+    src.addEventListener('connected', () => {});
+    src.onerror = () => { src.close(); _sseSource = null; startPolling(); };
+    _sseSource = src;
+    clearInterval(pollTimer); // SSE replaces polling
+  } catch { startPolling(); }
+}
+
 async function apiFetch(url) {
   const r = await fetch(url);
   if (!r.ok) throw new Error(r.status);
@@ -1105,7 +1328,7 @@ function toggleLiveTail() {
     if (sessionIdx !== 0 && allSessions.length) { sessionIdx = 0; userScrolled = false; loadFeedForSession(allSessions[0]); }
     liveTailTimer = setInterval(() => { if (currentView === 'now') refreshNowSilent(); }, 5000);
   } else {
-    startPolling();
+    initSSE();
   }
 }
 
@@ -1159,6 +1382,9 @@ async function loadFeedForSession(sess) {
   document.getElementById('btn-prev-sess').style.opacity = sessionIdx < allSessions.length - 1 ? '1' : '0.3';
   document.getElementById('btn-next-sess').style.opacity = sessionIdx > 0 ? '1' : '0.3';
   showSessCtx(sess);
+  // f48: live cost ticker
+  const sessCost = typeof sess.totalCost === 'number' ? sess.totalCost : (typeof sess.cost === 'number' ? sess.cost : null);
+  updateLiveTicker(sessCost);
   if (!sess.file) { setFeedContent('<div class="feed-empty">Session file path unavailable.</div>'); return; }
   try {
     const data = await apiFetch('/api/session?dir=' + enc(DIR) + '&file=' + enc(sess.file) + '&limit=120');
@@ -1275,6 +1501,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) {
@@ -1642,17 +1870,49 @@ async function renderSessions() {
     }
     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 (heatmapDateFilter) toShow = toShow.filter(s => {
+      const t = s.lastTs || s.mtime; if (!t) return false;
+      return new Date(typeof t === 'number' ? t : t).toDateString() === heatmapDateFilter;
+    });
     if (!toShow.length) {
       el.innerHTML = '<div class="empty"><div class="empty-ico">☆</div><div>No bookmarked sessions</div></div>';
+      buildSessionHeatmap(sessions);
       return;
     }
-    const sessData = JSON.stringify(toShow).replace(/'/g, '&#39;');
-    el.innerHTML = toShow.map((s, idx) => {
+    // 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;
+
+    // group by date
+    const now = Date.now(); const DAY = 86400000;
+    function sessDateGroup(s) {
+      const t = s.lastTs || s.mtime; if (!t) return 'Older';
+      const age = now - (typeof t === 'number' ? t : new Date(t).getTime());
+      if (age < DAY) return 'Today';
+      if (age < 2 * DAY) return 'Yesterday';
+      if (age < 8 * DAY) return 'This week';
+      return 'Older';
+    }
+    const GROUP_ORDER = ['Today', 'Yesterday', 'This week', 'Older'];
+    const groups = {};
+    for (const s of toShow) {
+      const g = sessDateGroup(s); if (!groups[g]) groups[g] = [];
+      groups[g].push(s);
+    }
+
+    function renderSessRow(s, idx) {
       const dur  = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '';
       const msgs = s.totalMessages ? s.totalMessages + ' msg' : '';
       const cost = typeof s.totalCost === 'number' ? '$' + s.totalCost.toFixed(2)
                  : typeof s.cost === 'number' ? '$' + s.cost.toFixed(2) : '';
       const meta = [dur, msgs, cost].filter(Boolean).join(' · ') || s.id.slice(0, 16);
+      const 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)">
@@ -1664,16 +1924,29 @@ async function renderSessions() {
       const sData = JSON.stringify(s).replace(/'/g, '&#39;');
       const note = getSessNote(s.id);
       const hasNote = !!note;
-      return `<div class="sess-row" data-sess-idx="${idx}" onclick="diffMode ? diffSelectSession(JSON.parse(this.dataset.sessData || '{}'), this) : jumpToSession('${esc(s.id)}')" data-sess-data='${sData}'>
+      const files = (s.filesTouched || []).slice(0, 5);
+      const filesHtml = files.length ? `<div class="sr-files">${files.map(f => `<span class="sr-file-chip">${esc(f)}</span>`).join('')}${(s.filesTouched||[]).length > 5 ? `<span class="sr-file-chip">+${(s.filesTouched||[]).length-5}</span>` : ''}</div>` : '';
+      // f51: error badge — clickable if errors exist
+      const errBadge = (s.errorCount > 0 && s.toolCalls > 0 && (s.errorCount / s.toolCalls) > 0.3)
+        ? `<span class="sess-anomaly anom-err clickable" onclick="toggleErrDrawer('${esc(s.id)}',event)" title="Click to see ${s.errorCount} tool errors">${s.errorCount} err</span>`
+        : anomBadge;
+      // f50: custom tags
+      const ctags = getCustomTags(s.id);
+      const ctagsHtml = renderCustomTagsInline(s.id, ctags);
+      return `<div class="sess-row" data-sess-idx="${idx}" data-sess-id="${esc(s.id)}" onclick="handleSessRowClick(event,this,'${esc(s.id)}')" data-sess-data='${sData}'>
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id)}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>
+          <button class="sr-copy-btn" onclick="copyPrompt(${JSON.stringify(s.lastPrompt || s.id)},event)" title="Copy prompt to clipboard">⎘</button>
           <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)}${errBadge}</div>
         ${(summaries || autoTags) ? `<div class="sr-tags">${summaries}${autoTags}</div>` : ''}
+        ${ctagsHtml}
+        ${filesHtml}
         ${satBar}
+        <div class="err-drawer" id="err-drawer-${esc(s.id)}"></div>
         <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)}">
@@ -1682,17 +1955,36 @@ async function renderSessions() {
           </div>
         </div>
       </div>`;
-    }).join('');
+    }
+
+    let html = '';
+    let flatIdx = 0;
+    for (const grp of GROUP_ORDER) {
+      const items = groups[grp];
+      if (!items || !items.length) continue;
+      const gid = 'sg-' + grp.replace(/\s+/g, '-').toLowerCase();
+      html += `<div class="sg-section"><div class="sg-header" onclick="toggleSessGroup('${gid}')">
+        <span class="sg-title">${grp}</span><span class="sg-count">${items.length}</span><span class="sg-toggle">▾</span>
+      </div><div class="sg-body" id="${gid}">`;
+      for (const s of items) { html += renderSessRow(s, flatIdx++); }
+      html += '</div></div>';
+    }
+    el.innerHTML = html;
     // prepend tag filter bar if there are common tags
     if (allTags.common.size > 1) {
       el.innerHTML = buildTagFilterBar(toShow) + el.innerHTML;
     }
+    buildSessionHeatmap(sessions);
     buildDigest();
     buildWeeklyRecap();
     buildEfficiencyPanel();
     buildActivityHeatmap();
     buildTokenVelocity();
+    buildDailyCostTrend();
+    buildHourlyHeatmap();
+    buildCostHistogram();
     if (leaderboardOpen) renderLeaderboard();
+    syncURLParams();
     // check budget thresholds and fire toasts
     const todayCost = allSessions.filter(s => {
       const t = s.firstTs || s.mtime;
@@ -1716,6 +2008,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]); }
@@ -1740,10 +2033,10 @@ function toggleSessStarFilter() {
   showStarredOnly = !showStarredOnly;
   const btn = document.getElementById('sess-star-filter');
   btn.classList.toggle('on', showStarredOnly);
-  // re-render with filter
   viewRendered['sessions'] = false;
   renderSessions();
   viewRendered['sessions'] = true;
+  syncURLParams();
 }
 
 // ── feature 1: auto-tags ───────────────────────────────────
@@ -1791,6 +2084,7 @@ function setTagFilter(tag) {
   viewRendered['sessions'] = false;
   renderSessions();
   viewRendered['sessions'] = true;
+  syncURLParams();
 }
 
 // ── feature 2: session recap ───────────────────────────────
@@ -2099,8 +2393,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');
 }
 
@@ -2519,6 +2826,42 @@ function toggleLoop(row) {
   row.classList.toggle('open');
 }
 
+function showLoopForm() {
+  document.getElementById('loop-create-form').style.display = 'block';
+  document.getElementById('btn-new-loop').style.display = 'none';
+  document.getElementById('lcf-prompt').focus();
+}
+
+function hideLoopForm() {
+  document.getElementById('loop-create-form').style.display = 'none';
+  document.getElementById('btn-new-loop').style.display = '';
+}
+
+async function createLoop() {
+  const prompt = document.getElementById('lcf-prompt').value.trim();
+  if (!prompt) { showToast('Required', 'Prompt is required', 'warn'); return; }
+  const name = document.getElementById('lcf-name').value.trim();
+  const interval = document.getElementById('lcf-interval').value.trim() || '1h';
+  const maxRepsVal = document.getElementById('lcf-maxreps').value;
+  const maxReps = maxRepsVal ? parseInt(maxRepsVal) : null;
+  try {
+    const r = await fetch('/api/loops/create?dir=' + enc(DIR), {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, prompt, interval, maxReps }),
+    });
+    const d = await r.json();
+    if (!d.ok) { showToast('Error', d.error || 'Failed to create loop', 'err'); return; }
+    showToast('Created', `Loop created: ${name || prompt.slice(0, 30)}`, 'ok');
+    hideLoopForm();
+    document.getElementById('lcf-prompt').value = '';
+    document.getElementById('lcf-name').value = '';
+    document.getElementById('lcf-interval').value = '1h';
+    document.getElementById('lcf-maxreps').value = '';
+    viewRendered['loops'] = false;
+    renderLoops();
+  } catch (err) { showToast('Error', err.message, 'err'); }
+}
+
 // ── feature 19: cache efficiency panel ────────────────────
 function buildEfficiencyPanel() {
   const el = document.getElementById('m-efficiency');
@@ -2610,6 +2953,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':''}`,
@@ -2617,7 +2961,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() {
@@ -2724,12 +3069,21 @@ async function renderMemory() {
         ).join('');
       }
 
-      const items = allDrawers.map((d, i) =>
-        `<div class="drawer-item" data-idx="${i}" data-ns="${esc(d.namespace || 'default')}">
+      const tsValues = allDrawers.map(d => d.timestamp ? new Date(d.timestamp).getTime() : 0).filter(Boolean);
+      const oldestTs = tsValues.length ? Math.min(...tsValues) : 0;
+      const newestTs = tsValues.length ? Math.max(...tsValues) : 0;
+      const tsRange = newestTs - oldestTs || 1;
+      const items = allDrawers.map((d, i) => {
+        const ts = d.timestamp ? new Date(d.timestamp).getTime() : 0;
+        const agePct = ts && oldestTs ? Math.round(((ts - oldestTs) / tsRange) * 100) : 0;
+        const ageBar = ts ? `<div class="dr-age-bar"><div class="dr-age-bar-fill" style="width:${agePct}%"></div></div>` : '';
+        return `<div class="drawer-item" data-idx="${i}" data-ns="${esc(d.namespace || 'default')}">
           <div class="dr-key">${esc(d.key || d.namespace || '—')}</div>
           <div class="dr-val">${esc(String(d.value || d.text || '').slice(0, 300))}</div>
           ${d.timestamp ? `<div class="dr-ts">${relTime(d.timestamp)}</div>` : ''}
-        </div>`).join('');
+          ${ageBar}
+        </div>`;
+      }).join('');
       html += `<div class="mem-section" id="drawers-section">
         <div class="mem-title">Drawers (${allDrawers.length})</div>
         <div id="drawers-list">${items}</div>
@@ -3118,7 +3472,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') {
@@ -3147,6 +3502,108 @@ 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 ───────────────────
+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) {
@@ -3187,14 +3644,169 @@ function checkBudgetToast(todayCost, monthCost) {
   }
 }
 
+// ── feature 39: cost period toggle ────────────────────────
+let activePeriod = 'day';
+let heatmapDateFilter = null;
+
+function setPeriod(p) {
+  activePeriod = p;
+  document.querySelectorAll('.period-btn').forEach(b => b.classList.toggle('active', b.dataset.period === p));
+  buildTokenVelocity();
+  syncURLParams();
+}
+
+function periodFilteredSessions() {
+  const now = Date.now();
+  const DAY = 86400000;
+  const windows = { day: DAY, week: 7 * DAY, month: 30 * DAY, all: Infinity };
+  const w = windows[activePeriod] || DAY;
+  if (w === Infinity) return allSessions;
+  return allSessions.filter(s => {
+    const t = s.firstTs || s.mtime; if (!t) return false;
+    const ts = typeof t === 'number' ? t : new Date(t).getTime();
+    return (now - ts) <= w;
+  });
+}
+
+// ── feature 40: session heatmap ────────────────────────────
+function buildSessionHeatmap(sessions) {
+  const el = document.getElementById('shm-grid');
+  const wrap = document.getElementById('sess-heatmap');
+  if (!el || !wrap || !sessions.length) return;
+  wrap.style.display = 'block';
+  const DAY = 86400000;
+  const now = Date.now();
+  const WEEKS = 12; const DAYS = WEEKS * 7;
+  const buckets = new Array(DAYS).fill(null).map(() => ({ count:0, date:null }));
+  for (let i = 0; i < DAYS; i++) {
+    buckets[i].date = new Date(now - (DAYS - 1 - i) * DAY).toDateString();
+  }
+  for (const s of sessions) {
+    const ts = s.lastTs || s.mtime; if (!ts) continue;
+    const age = now - (typeof ts === 'number' ? ts : new Date(ts).getTime());
+    const idx = DAYS - 1 - Math.floor(age / DAY);
+    if (idx >= 0 && idx < DAYS) buckets[idx].count++;
+  }
+  const max = Math.max(...buckets.map(b => b.count), 1);
+  el.innerHTML = buckets.map(b => {
+    const level = b.count === 0 ? 0 : Math.min(4, Math.ceil(b.count / max * 4));
+    const isActive = b.date === heatmapDateFilter;
+    return `<div class="shm-cell shm-${level}${isActive ? ' shm-active' : ''}" title="${b.date}: ${b.count} session${b.count !== 1 ? 's' : ''}" onclick="setHeatmapFilter('${b.date}',${b.count})"></div>`;
+  }).join('');
+}
+
+function setHeatmapFilter(dateStr, count) {
+  if (!count) return;
+  heatmapDateFilter = heatmapDateFilter === dateStr ? null : dateStr;
+  const clearBtn = document.getElementById('shm-clear');
+  if (clearBtn) clearBtn.classList.toggle('show', !!heatmapDateFilter);
+  viewRendered['sessions'] = false;
+  renderSessions();
+  syncURLParams();
+}
+
+function clearHeatmapFilter() {
+  heatmapDateFilter = null;
+  const clearBtn = document.getElementById('shm-clear');
+  if (clearBtn) clearBtn.classList.remove('show');
+  viewRendered['sessions'] = false;
+  renderSessions();
+}
+
+function toggleSessGroup(id) {
+  const body = document.getElementById(id);
+  if (!body) return;
+  body.classList.toggle('collapsed');
+  const hdr = body.previousElementSibling;
+  if (hdr) { const tog = hdr.querySelector('.sg-toggle'); if (tog) tog.textContent = body.classList.contains('collapsed') ? '▸' : '▾'; }
+}
+
+// ── feature 41: bulk session actions ───────────────────────
+let bulkSelected = new Set();
+let lastClickedSessIdx = null;
+
+function handleSessRowClick(evt, row, sessId) {
+  if (diffMode) { diffSelectSession(JSON.parse(row.dataset.sessData || '{}'), row); return; }
+  if (evt.shiftKey && lastClickedSessIdx !== null) {
+    // range-select
+    const rows = [...document.querySelectorAll('#sess-content .sess-row')];
+    const curIdx = rows.indexOf(row);
+    const lo = Math.min(lastClickedSessIdx, curIdx);
+    const hi = Math.max(lastClickedSessIdx, curIdx);
+    for (let i = lo; i <= hi; i++) {
+      const r = rows[i]; if (!r) continue;
+      const id = r.dataset.sessId;
+      if (id) { bulkSelected.add(id); r.classList.add('bulk-sel'); }
+    }
+    updateBulkToolbar();
+    return;
+  }
+  if (bulkSelected.size > 0) {
+    // toggle this row in bulk selection
+    if (bulkSelected.has(sessId)) { bulkSelected.delete(sessId); row.classList.remove('bulk-sel'); }
+    else { bulkSelected.add(sessId); row.classList.add('bulk-sel'); }
+    const rows = [...document.querySelectorAll('#sess-content .sess-row')];
+    lastClickedSessIdx = rows.indexOf(row);
+    updateBulkToolbar();
+    return;
+  }
+  lastClickedSessIdx = [...document.querySelectorAll('#sess-content .sess-row')].indexOf(row);
+  jumpToSession(sessId);
+}
+
+function updateBulkToolbar() {
+  const tb = document.getElementById('bulk-toolbar');
+  const cnt = document.getElementById('bulk-count');
+  if (!tb) return;
+  tb.classList.toggle('show', bulkSelected.size > 0);
+  if (cnt) cnt.textContent = bulkSelected.size + ' selected';
+}
+
+function clearBulkSelection() {
+  bulkSelected.clear();
+  document.querySelectorAll('#sess-content .sess-row.bulk-sel').forEach(r => r.classList.remove('bulk-sel'));
+  updateBulkToolbar();
+}
+
+function bulkBookmark() {
+  for (const id of bulkSelected) bookmarks.add(id);
+  localStorage.setItem('mm-bookmarks', JSON.stringify([...bookmarks]));
+  clearBulkSelection();
+  showToast('Bookmarked', `${bulkSelected.size || 'Selected'} sessions bookmarked`, 'ok');
+  viewRendered['sessions'] = false;
+  renderSessions();
+}
+
+function bulkExport() {
+  const toExport = allSessions.filter(s => bulkSelected.has(s.id));
+  if (!toExport.length) return;
+  const headers = ['Date', 'Session ID', 'Prompt', 'Cost ($)', 'Duration (s)', 'Tool Calls', 'Files Touched'];
+  const rows = toExport.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 prompt = (s.lastPrompt || '').replace(/"/g, '""');
+    const files = (s.filesTouched || []).join(';');
+    return [dt, s.id, prompt, cost, dur, s.toolCalls || '', files];
+  });
+  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-bulk-${new Date().toISOString().slice(0,10)}.csv`; a.click();
+  URL.revokeObjectURL(a.href);
+  showToast('Exported', `${toExport.length} sessions saved`, 'ok');
+  clearBulkSelection();
+}
+
 // ── 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 filtered = periodFilteredSessions();
   const buckets = new Array(24).fill(0);
-  for (const s of allSessions) {
+  for (const s of filtered) {
     const t = s.firstTs || s.mtime;
     if (!t) continue;
     const ts = typeof t === 'number' ? t : new Date(t).getTime();
@@ -3212,10 +3824,11 @@ function buildTokenVelocity() {
     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>
+  const totalCost = filtered.reduce((a, s) => a + (s.totalCost || 0), 0);
+  const periodLabel = { day:'24h', week:'7d', month:'30d', all:'all time' }[activePeriod] || '24h';
+  el.innerHTML = `<div class="m-group-title">Token Velocity <span style="font-size:10px;color:var(--text-xs);font-weight:400">${periodLabel} · ${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>`;
+    <div style="font-size:10px;color:var(--text-xs);margin-top:4px">Cost <span style="color:oklch(78% 0.18 75)">$${totalCost.toFixed(2)}</span> <span style="color:var(--text-xs)">· ${filtered.length} sessions</span></div>`;
 }
 
 // ── feature 27: export sessions CSV ───────────────────────
@@ -3317,6 +3930,254 @@ async function loadProjCosts() {
   }
 }
 
+// ── feature 47: 30-day daily cost trend ───────────────────
+function buildDailyCostTrend() {
+  const el = document.getElementById('m-daily-trend');
+  if (!el || !allSessions.length) return;
+  const now = Date.now(); const DAY = 86400000;
+  const buckets = new Array(30).fill(0);
+  const dates = new Array(30).fill(null).map((_, i) => new Date(now - (29 - i) * DAY).toDateString());
+  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 daysAgo = Math.floor((now - ts) / DAY);
+    const idx = 29 - daysAgo;
+    if (idx >= 0 && idx < 30) buckets[idx] += s.totalCost || 0;
+  }
+  const maxCost = Math.max(0.001, ...buckets);
+  const totalCost = buckets.reduce((a, b) => a + b, 0);
+  const bars = buckets.map((v, i) => {
+    const h = Math.max(2, Math.round((v / maxCost) * 38));
+    const isActive = dates[i] === heatmapDateFilter;
+    const label = i === 29 ? 'Today' : (i === 28 ? 'Yday' : '');
+    return `<div class="dt-bar${isActive ? ' active' : ''}" style="height:${h}px" title="${dates[i]}: $${v.toFixed(3)}" onclick="setDailyTrendFilter('${dates[i]}',${v})"></div>`;
+  }).join('');
+  el.innerHTML = `<div class="m-group-title">30-Day Cost <span style="font-size:10px;color:var(--text-xs);font-weight:400">$${totalCost.toFixed(2)} total</span></div>
+    <div id="daily-trend-chart">${bars}</div>
+    <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--text-xs);margin-top:2px"><span>30d ago</span><span>Today</span></div>`;
+}
+
+function setDailyTrendFilter(dateStr, cost) {
+  if (!cost) return;
+  heatmapDateFilter = heatmapDateFilter === dateStr ? null : dateStr;
+  const clearBtn = document.getElementById('shm-clear');
+  if (clearBtn) clearBtn.classList.toggle('show', !!heatmapDateFilter);
+  viewRendered['sessions'] = false;
+  renderSessions();
+  syncURLParams();
+}
+
+// ── feature 48: live cost ticker ──────────────────────────
+let _liveTickerCost = 0;
+let _liveTickerPrev = 0;
+
+function updateLiveTicker(cost) {
+  const el = document.getElementById('live-cost-ticker');
+  if (!el) return;
+  if (cost == null || cost === 0) { el.classList.remove('show'); return; }
+  _liveTickerPrev = _liveTickerCost;
+  _liveTickerCost = cost;
+  const delta = _liveTickerCost - _liveTickerPrev;
+  const deltaHtml = delta > 0.0001 ? `<span class="lct-change">+$${delta.toFixed(4)}</span>` : '';
+  el.innerHTML = `$${cost.toFixed(3)}${deltaHtml}`;
+  el.classList.add('show');
+}
+
+// ── feature 49: hourly productivity heatmap ───────────────
+function buildHourlyHeatmap() {
+  const el = document.getElementById('m-hourly-heatmap');
+  if (!el || !allSessions.length) return;
+  // 24 hours × 7 days-of-week matrix
+  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);
+    const dow = d.getDay(); // 0=Sun
+    const hour = d.getHours();
+    grid[dow][hour]++;
+  }
+  const maxVal = Math.max(1, ...grid.flatMap(r => r));
+  const dayNames = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  let html = '<div id="hourly-heatmap-grid">';
+  // Header row: empty corner + hour labels (0,6,12,18,23)
+  html += '<div></div>';
+  for (let h = 0; h < 24; h++) {
+    const lbl = h % 6 === 0 ? String(h) : '';
+    html += `<div class="hh-hour-lbl">${lbl}</div>`;
+  }
+  // Data rows
+  for (let d = 0; d < 7; d++) {
+    html += `<div class="hh-day-lbl">${dayNames[d]}</div>`;
+    for (let h = 0; h < 24; h++) {
+      const v = grid[d][h];
+      const level = v === 0 ? 0 : Math.min(4, Math.ceil(v / maxVal * 4));
+      html += `<div class="hh-cell hh-${level}" title="${dayNames[d]} ${h}:00 — ${v} session${v !== 1 ? 's' : ''}"></div>`;
+    }
+  }
+  html += '</div>';
+  const peakHour = grid.flatMap((r, d) => r.map((v, h) => ({ d, h, v }))).sort((a, b) => b.v - a.v)[0];
+  const peakLabel = peakHour ? `${dayNames[peakHour.d]} ${peakHour.h}:00` : '';
+  el.innerHTML = `<div class="m-group-title">Peak Work Hours${peakLabel ? `<span style="font-size:10px;color:var(--text-xs);font-weight:400;margin-left:4px">peak: ${peakLabel}</span>` : ''}</div>${html}`;
+}
+
+// ── feature 50: custom tag editor ─────────────────────────
+const _customTagsKey = 'mm-custom-tags';
+let _customTagsMap = new Map(Object.entries(JSON.parse(localStorage.getItem(_customTagsKey) || '{}')));
+
+function getCustomTags(sessId) {
+  return _customTagsMap.get(sessId) || [];
+}
+
+function saveCustomTags(sessId, tags) {
+  if (tags.length === 0) _customTagsMap.delete(sessId);
+  else _customTagsMap.set(sessId, tags);
+  localStorage.setItem(_customTagsKey, JSON.stringify(Object.fromEntries(_customTagsMap)));
+}
+
+function addCustomTag(sessId, tag, event) {
+  if (event) event.stopPropagation();
+  const t = tag.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '');
+  if (!t) return;
+  const tags = getCustomTags(sessId);
+  if (!tags.includes(t)) { tags.push(t); saveCustomTags(sessId, tags); }
+  const wrap = document.querySelector(`.sr-custom-tags[data-sess="${CSS.escape(sessId)}"]`);
+  if (wrap) wrap.outerHTML = renderCustomTagsInline(sessId, tags);
+  // rebuild tag filter if this tag is new globally
+  initTags(); buildTagFilterBar(allSessions);
+}
+
+function removeCustomTag(sessId, tag, event) {
+  if (event) event.stopPropagation();
+  const tags = getCustomTags(sessId).filter(t => t !== tag);
+  saveCustomTags(sessId, tags);
+  const wrap = document.querySelector(`.sr-custom-tags[data-sess="${CSS.escape(sessId)}"]`);
+  if (wrap) wrap.outerHTML = renderCustomTagsInline(sessId, tags);
+}
+
+function showCustomTagInput(sessId, event) {
+  if (event) event.stopPropagation();
+  const wrap = document.querySelector(`.sr-custom-tags[data-sess="${CSS.escape(sessId)}"]`);
+  if (!wrap) return;
+  const existing = wrap.querySelector('.ctag-input-wrap');
+  if (existing) { existing.remove(); return; }
+  const iw = document.createElement('div');
+  iw.className = 'ctag-input-wrap';
+  iw.onclick = e => e.stopPropagation();
+  iw.innerHTML = `<input class="ctag-input" type="text" placeholder="tag name…" maxlength="20" autofocus>
+    <button class="ctag-ok" onclick="(()=>{const inp=this.previousSibling;addCustomTag('${esc(sessId)}',inp.value,event);inp.value='';})()">Add</button>`;
+  wrap.appendChild(iw);
+  const inp = iw.querySelector('input');
+  inp.focus();
+  inp.addEventListener('keydown', e => {
+    if (e.key === 'Enter') { addCustomTag(sessId, inp.value, e); inp.value = ''; }
+    if (e.key === 'Escape') iw.remove();
+  });
+}
+
+function renderCustomTagsInline(sessId, tags) {
+  const tagHtml = tags.map(t =>
+    `<span class="sr-ctag">${esc(t)}<span class="ctag-del" onclick="removeCustomTag('${esc(sessId)}','${esc(t)}',event)" title="Remove tag">✕</span></span>`
+  ).join('');
+  return `<div class="sr-custom-tags" data-sess="${esc(sessId)}" onclick="event.stopPropagation()">
+    ${tagHtml}
+    <button class="ctag-add-btn" onclick="showCustomTagInput('${esc(sessId)}',event)" title="Add tag">+ tag</button>
+  </div>`;
+}
+
+// ── feature 51: tool error drawer ─────────────────────────
+async function toggleErrDrawer(sessId, event) {
+  if (event) event.stopPropagation();
+  const drawer = document.getElementById('err-drawer-' + sessId);
+  if (!drawer) return;
+  if (drawer.classList.contains('open')) { drawer.classList.remove('open'); drawer.innerHTML = ''; return; }
+  drawer.classList.add('open');
+  drawer.innerHTML = '<div class="err-drawer-head">Loading errors…</div>';
+  try {
+    const data = await apiFetch('/api/session-errors?dir=' + enc(DIR) + '&id=' + enc(sessId));
+    if (!data.errors?.length) {
+      drawer.innerHTML = `<div class="err-drawer-head"><span>No error details found</span><button class="err-close" onclick="toggleErrDrawer('${esc(sessId)}',event)">✕</button></div>`;
+      return;
+    }
+    const items = data.errors.map(e => `<div class="err-item">${esc(e.text)}</div>`).join('');
+    drawer.innerHTML = `<div class="err-drawer-head"><span>${data.errors.length} error${data.errors.length !== 1 ? 's' : ''}</span><button class="err-close" onclick="toggleErrDrawer('${esc(sessId)}',event)">✕</button></div>
+      <div class="err-drawer-body">${items}</div>`;
+  } catch (err) {
+    drawer.innerHTML = `<div class="err-drawer-head"><span>Could not load: ${esc(err.message)}</span><button class="err-close" onclick="toggleErrDrawer('${esc(sessId)}',event)">✕</button></div>`;
+  }
+}
+
+// ── feature 52: prompt copy button ────────────────────────
+function copyPrompt(text, event) {
+  if (event) event.stopPropagation();
+  const btn = event?.currentTarget || event?.target;
+  navigator.clipboard.writeText(text).then(() => {
+    if (btn) { btn.textContent = '✓'; btn.classList.add('copied'); setTimeout(() => { btn.textContent = '⎘'; btn.classList.remove('copied'); }, 1500); }
+  }).catch(() => {});
+}
+
+// ── feature 53: session cost histogram ────────────────────
+function buildCostHistogram() {
+  const el = document.getElementById('cost-histogram-panel');
+  if (!el) return;
+  const costs = allSessions.map(s => s.totalCost || 0).filter(c => c > 0);
+  if (costs.length < 2) { el.style.display = 'none'; return; }
+  el.style.display = 'block';
+  const minC = Math.min(...costs); const maxC = Math.max(...costs);
+  const BUCKETS = 10;
+  const range = maxC - minC || 0.01;
+  const bucketSize = range / BUCKETS;
+  const counts = new Array(BUCKETS).fill(0);
+  for (const c of costs) { const i = Math.min(BUCKETS - 1, Math.floor((c - minC) / bucketSize)); counts[i]++; }
+  const maxCount = Math.max(1, ...counts);
+  const fmt = v => v < 0.01 ? v.toFixed(4) : v < 1 ? '$' + v.toFixed(2) : '$' + v.toFixed(1);
+  const bars = counts.map((n, i) => {
+    const h = Math.max(2, Math.round((n / maxCount) * 46));
+    const lo = minC + i * bucketSize; const hi = lo + bucketSize;
+    return `<div class="ch-bar-wrap" title="${fmt(lo)}–${fmt(hi)}: ${n} session${n !== 1 ? 's' : ''}">
+      <div class="ch-cnt">${n || ''}</div>
+      <div class="ch-bar" style="height:${h}px"></div>
+      <div class="ch-lbl">${i === 0 ? fmt(lo) : i === BUCKETS - 1 ? fmt(hi) : ''}</div>
+    </div>`;
+  }).join('');
+  el.innerHTML = `<div class="ch-title">Cost Distribution — ${costs.length} sessions</div>
+    <div class="ch-bars">${bars}</div>`;
+}
+
+// ── feature 54: persistent filter URL params ──────────────
+function syncURLParams() {
+  const p = new URLSearchParams(window.location.search);
+  if (DIR) p.set('proj', DIR); else p.delete('proj');
+  if (activePeriod && activePeriod !== 'day') p.set('period', activePeriod); else p.delete('period');
+  if (activeTagFilter) p.set('tag', activeTagFilter); else p.delete('tag');
+  if (heatmapDateFilter) p.set('date', heatmapDateFilter); else p.delete('date');
+  if (showStarredOnly) p.set('starred', '1'); else p.delete('starred');
+  const newUrl = window.location.pathname + (p.toString() ? '?' + p.toString() : '');
+  history.replaceState(null, '', newUrl);
+}
+
+function restoreURLParams() {
+  const p = new URLSearchParams(window.location.search);
+  const period = p.get('period');
+  if (period && ['day','week','month','all'].includes(period)) {
+    activePeriod = period;
+    document.querySelectorAll('.period-btn').forEach(b => b.classList.toggle('active', b.dataset.period === period));
+  }
+  const tag = p.get('tag');
+  if (tag) activeTagFilter = tag;
+  const date = p.get('date');
+  if (date) {
+    heatmapDateFilter = date;
+    const clearBtn = document.getElementById('shm-clear');
+    if (clearBtn) clearBtn.classList.add('show');
+  }
+  const starred = p.get('starred');
+  if (starred === '1') {
+    showStarredOnly = true;
+    const btn = document.getElementById('sess-star-filter');
+    if (btn) btn.classList.add('on');
+  }
+}
+
 // ── helpers ────────────────────────────────────────────────
 function enc(s) { return encodeURIComponent(s); }
 function esc(s) {