@monoes/monomindcli 1.10.39 → 1.10.40

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

@@ -714,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>
@@ -771,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>
@@ -915,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>
 
@@ -956,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>
@@ -1186,11 +1260,12 @@ async function init() {
     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
+  restoreURLParams();
+  viewRendered['now'] = true;
   updateBudgetBtnStyle();
   await refreshNow();
   if (sessParam) setTimeout(() => jumpToSession(sessParam), 300);
-  startPolling();
+  initSSE();
 }
 
 function startPolling() {
@@ -1198,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);
@@ -1239,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();
   }
 }
 
@@ -1293,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');
@@ -1778,21 +1870,42 @@ 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;
     }
     // 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) => {
+
+    // 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);
-      // anomaly badge
       const sCost = s.totalCost || 0;
       let anomBadge = '';
       if (medianCost > 0.05 && sCost > medianCost * 3 && sCost > 0.5) {
@@ -1811,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)}${anomBadge}</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)}">
@@ -1829,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;
@@ -1888,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 ───────────────────────────────────
@@ -1939,6 +2084,7 @@ function setTagFilter(tag) {
   viewRendered['sessions'] = false;
   renderSessions();
   viewRendered['sessions'] = true;
+  syncURLParams();
 }
 
 // ── feature 2: session recap ───────────────────────────────
@@ -2680,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');
@@ -2887,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>
@@ -3357,7 +3548,6 @@ function updateCurrentActivity(events) {
 }
 
 // ── 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;
@@ -3454,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();
@@ -3479,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 ───────────────────────
@@ -3584,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) {