@monoes/monomindcli 1.10.39 → 1.10.41

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

@@ -714,6 +714,124 @@ 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); }
+
+/* ── f59: keyboard focus in sessions ────────────────────── */
+.sess-row.kb-focus { outline:1px solid oklch(72% 0.18 75 / 0.4); outline-offset:-1px; }
+
+/* ── f55: session timeline ───────────────────────────────── */
+#timeline-panel { display:none; margin-bottom:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
+#timeline-panel.open { display:block; }
+#timeline-head { padding:8px 12px; font-size:11px; font-weight:600; color:var(--text-lo); letter-spacing:0.06em; text-transform:uppercase; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
+#timeline-scroll { overflow-x:auto; padding:10px 12px; }
+.tl-day-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; min-height:18px; }
+.tl-day-lbl { font-size:10px; color:var(--text-xs); width:60px; flex-shrink:0; font-family:var(--mono); }
+.tl-track { flex:1; position:relative; height:14px; min-width:400px; }
+.tl-bar { position:absolute; height:10px; top:2px; border-radius:3px; cursor:pointer; opacity:0.7; transition:opacity 0.15s; }
+.tl-bar:hover { opacity:1; z-index:2; }
+
+/* ── f56: daily report card ──────────────────────────────── */
+#report-modal { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
+#report-modal.open { display:flex; }
+#report-box { background:var(--surface); border:1px solid var(--border); border-radius:10px; width:520px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; }
+.rp-head { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); }
+.rp-title { font-size:14px; font-weight:600; color:var(--text-hi); flex:1; }
+.rp-copy-btn { font-size:11px; background:none; border:1px solid var(--border); border-radius:var(--r); padding:4px 10px; cursor:pointer; color:var(--text-lo); transition:color 0.1s; }
+.rp-copy-btn:hover { color:var(--text-hi); }
+.rp-close-btn { background:none; border:none; cursor:pointer; color:var(--text-xs); font-size:16px; padding:0 2px; }
+#report-content { flex:1; overflow-y:auto; padding:16px; }
+#report-content pre { font-family:var(--mono); font-size:11px; color:var(--text-mid); white-space:pre-wrap; line-height:1.6; }
+
+/* ── f57: file-pivot filter ──────────────────────────────── */
+.sr-file-chip { cursor:pointer; }
+.sr-file-chip:hover { background:oklch(72% 0.18 75 / 0.25); color:oklch(85% 0.18 75); }
+.sr-file-chip.pivot-active { background:oklch(72% 0.18 75 / 0.3); color:oklch(90% 0.18 75); border-color:oklch(72% 0.18 75 / 0.5); }
+#file-pivot-bar { display:none; align-items:center; gap:8px; padding:6px 12px; background:oklch(72% 0.18 75 / 0.08); border:1px solid oklch(72% 0.18 75 / 0.2); border-radius:var(--r); margin-bottom:10px; font-size:11px; }
+#file-pivot-bar.show { display:flex; }
+.fpb-label { color:var(--accent); font-weight:600; }
+.fpb-clear { background:none; border:none; cursor:pointer; color:var(--text-lo); font-size:12px; margin-left:auto; }
+
+/* ── f58: model cost donut ───────────────────────────────── */
+#model-donut-panel { display:none; margin-bottom:16px; }
+#model-donut-panel.open { display:block; }
+.donut-wrap { display:flex; align-items:center; gap:16px; padding:10px 0; }
+.donut-svg { flex-shrink:0; }
+.donut-legend { display:flex; flex-direction:column; gap:4px; }
+.donut-item { display:flex; align-items:center; gap:6px; font-size:11px; }
+.donut-swatch { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
+.donut-name { color:var(--text-mid); min-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.donut-cost { color:var(--accent); font-family:var(--mono); }
+
+/* ── f62: context window pressure gauge ─────────────────── */
+.ctx-pressure-wrap { margin-top:3px; display:flex; align-items:center; gap:5px; }
+.ctx-pressure-bar { flex:1; height:3px; background:var(--surface-hi); border-radius:2px; overflow:hidden; }
+.ctx-pressure-fill { height:100%; border-radius:2px; background:oklch(65% 0.15 150); }
+.ctx-pressure-fill.warn { background:oklch(70% 0.18 80); }
+.ctx-pressure-fill.crit { background:oklch(65% 0.2 25); }
+.ctx-pressure-lbl { font-size:9px; color:var(--text-xs); white-space:nowrap; }
 </style>
 </head>
 <body>
@@ -771,6 +889,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 +1034,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>
 
@@ -944,6 +1071,9 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <button class="lb-toggle" id="btn-export-csv" onclick="exportSessionsCSV()" title="Export sessions as CSV">⬇ CSV</button>
           <button class="lb-toggle" id="btn-patterns" onclick="togglePatterns()" title="Prompt word frequency across sessions">⊞ Patterns</button>
           <button class="diff-toggle" id="btn-diff" onclick="toggleDiffMode()" title="Compare two sessions">⇄ Compare</button>
+          <button class="lb-toggle" id="btn-timeline" onclick="toggleTimeline()" title="Session timeline (Gantt)">⊟ Timeline</button>
+          <button class="lb-toggle" id="btn-donut" onclick="toggleModelDonut()" title="Model cost donut">◕ Donut</button>
+          <button class="lb-toggle" id="btn-report" onclick="showReportCard()" title="Generate daily/weekly report card">✦ Report</button>
         </div>
         <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
         <div id="diff-panel">
@@ -956,6 +1086,10 @@ 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="timeline-panel"><div id="timeline-head">Session Timeline <span style="font-weight:400;font-size:10px;color:var(--text-xs)">— each bar = one session, width = duration, color = cost</span></div><div id="timeline-scroll"></div></div>
+        <div id="model-donut-panel"></div>
+        <div id="file-pivot-bar"><span class="fpb-label" id="fpb-label"></span><button class="fpb-clear" onclick="clearFilePivot()">✕ Clear filter</button></div>
         <div id="model-mix-panel" style="display:none;margin-bottom:16px">
           <div id="model-mix-body"></div>
         </div>
@@ -1070,10 +1204,25 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 </div><!-- /app -->
 <div id="toast-rack"></div>
 
+<!-- f56: report card modal -->
+<div id="report-modal" onclick="if(event.target===this)closeReportCard()">
+  <div id="report-box">
+    <div class="rp-head">
+      <span class="rp-title">Report Card</span>
+      <button class="rp-copy-btn" onclick="copyReportCard()">⎘ Copy</button>
+      <button class="rp-close-btn" onclick="closeReportCard()">✕</button>
+    </div>
+    <div id="report-content"><pre id="report-pre"></pre></div>
+  </div>
+</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">Sessions view</div>
+    <div class="sk-row"><span class="sk-desc">Navigate rows</span><span class="sk-keys"><kbd>J</kbd><kbd>K</kbd></span></div>
+    <div class="sk-row"><span class="sk-desc">Open focused session</span><span class="sk-keys"><kbd>↵</kbd></span></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>
@@ -1186,11 +1335,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 +1348,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 +1403,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 +1457,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,25 +1945,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;
+    });
+    // f57: file pivot filter
+    if (filePivot) toShow = toShow.filter(s => (s.filesTouched || []).includes(filePivot));
     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) {
-        anomBadge = `<span class="sess-anomaly anom-cost" title="Cost ${((sCost/medianCost).toFixed(1))}× above median">! costly</span>`;
+        // f60: anomaly badge is clickable for explainer
+        anomBadge = `<span class="sess-anomaly anom-cost clickable" style="cursor:pointer" onclick="showCostExplainer('${esc(s.id)}',event)" title="Cost ${((sCost/medianCost).toFixed(1))}× above median — click for details">! 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>`;
       }
@@ -1811,16 +2002,39 @@ 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);
+      // f57: file chips are clickable for pivot filter — use data-attr to avoid JSON.stringify in onclick
+      const filesHtml = files.length ? `<div class="sr-files">${files.map(f => `<span class="sr-file-chip${filePivot===f?' pivot-active':''}" data-fname="${esc(f)}" onclick="setFilePivot(this.dataset.fname,event)" title="Filter by ${esc(f)}">${esc(f)}</span>`).join('')}${(s.filesTouched||[]).length > 5 ? `<span class="sr-file-chip">+${(s.filesTouched||[]).length-5}</span>` : ''}</div>` : '';
+      // f62: context window pressure gauge
+      const CTX_LIMIT = 200000;
+      const tokPct = s.totalInputTokens ? Math.min(100, Math.round(s.totalInputTokens / CTX_LIMIT * 100)) : 0;
+      const tokCls = tokPct > 80 ? 'crit' : tokPct > 50 ? 'warn' : '';
+      const ctxGauge = tokPct > 5 ? `<div class="ctx-pressure-wrap" title="${(s.totalInputTokens||0).toLocaleString()} input tokens — ${tokPct}% of 200k context">
+        <div class="ctx-pressure-bar"><div class="ctx-pressure-fill ${tokCls}" style="width:${tokPct}%"></div></div>
+        <span class="ctx-pressure-lbl">${tokPct}% ctx</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" data-prompt="${esc(s.lastPrompt || s.id)}" onclick="copyPrompt(this.dataset.prompt,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}
+        ${ctxGauge}
+        <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 +2043,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 +2121,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 +2172,7 @@ function setTagFilter(tag) {
   viewRendered['sessions'] = false;
   renderSessions();
   viewRendered['sessions'] = true;
+  syncURLParams();
 }
 
 // ── feature 2: session recap ───────────────────────────────
@@ -2680,6 +2914,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 +3157,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>
@@ -3309,18 +3588,48 @@ document.addEventListener('keydown', e => {
       if (sel) openDetail(sel.dataset.ev);
     }
   }
+
+  // ── f59: J/K navigation in sessions list ─────────────────
+  if (currentView === 'sessions') {
+    if (e.key === 'j' || e.key === 'k') {
+      e.preventDefault();
+      const rows = [...document.querySelectorAll('#sess-content .sess-row:not([style*="display: none"])')];
+      if (!rows.length) return;
+      let cur = rows.findIndex(r => r.classList.contains('kb-focus'));
+      if (e.key === 'j') cur = cur < 0 ? 0 : Math.min(cur + 1, rows.length - 1);
+      else cur = cur < 0 ? 0 : Math.max(cur - 1, 0);
+      rows.forEach((r, i) => r.classList.toggle('kb-focus', i === cur));
+      rows[cur].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+    if (e.key === 'Enter') {
+      const focused = document.querySelector('#sess-content .sess-row.kb-focus');
+      if (focused) {
+        const sid = focused.dataset.sessId;
+        if (sid) jumpToSession(sid);
+      }
+    }
+  }
 });
 
 // ── feature 31: inline session filter ─────────────────────
+// ── feature 61: extended session search ───────────────────
 function filterSessions(q) {
   const rows = document.querySelectorAll('#sess-content .sess-row');
   const lq = q.toLowerCase().trim();
   let visible = 0;
   rows.forEach(row => {
+    if (!lq) { row.style.display = ''; visible++; return; }
+    const sessId = row.dataset.sessId || '';
+    // search prompt, meta, tags (rendered text)
     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);
+    const meta   = (row.querySelector('.sr-meta')?.textContent || '').toLowerCase();
+    const tags   = (row.querySelector('.sr-tags')?.textContent || '').toLowerCase();
+    const files  = (row.querySelector('.sr-files')?.textContent || '').toLowerCase();
+    const ctags  = (row.querySelector('.sr-custom-tags')?.textContent || '').toLowerCase();
+    // search summaries from session data
+    const sess = allSessions.find(s => s.id === sessId);
+    const summText = sess ? (sess.summaries || []).map(sm => typeof sm === 'string' ? sm : (sm.summary || sm.text || '')).join(' ').toLowerCase() : '';
+    const match = prompt.includes(lq) || meta.includes(lq) || tags.includes(lq) || files.includes(lq) || ctags.includes(lq) || summText.includes(lq);
     row.style.display = match ? '' : 'none';
     if (match) visible++;
   });
@@ -3357,7 +3666,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 +3762,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 +3942,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 +4048,501 @@ async function loadProjCosts() {
   }
 }
 
+// ── feature 55: session timeline (Gantt) ──────────────────
+let timelineOpen = false;
+function toggleTimeline() {
+  timelineOpen = !timelineOpen;
+  document.getElementById('btn-timeline').classList.toggle('on', timelineOpen);
+  const panel = document.getElementById('timeline-panel');
+  panel.classList.toggle('open', timelineOpen);
+  if (timelineOpen) buildGanttTimeline();
+}
+
+function buildGanttTimeline() {
+  const el = document.getElementById('timeline-scroll');
+  if (!el || !allSessions.length) return;
+  // Group by date, show last 14 days
+  const now = Date.now(); const DAY = 86400000;
+  const days = {};
+  for (let i = 13; i >= 0; i--) {
+    const d = new Date(now - i * DAY); d.setHours(0,0,0,0);
+    days[d.toDateString()] = [];
+  }
+  for (const s of allSessions) {
+    const t = s.firstTs || s.mtime; if (!t) continue;
+    const d = new Date(typeof t === 'number' ? t : t); d.setHours(0,0,0,0);
+    const key = d.toDateString();
+    if (key in days) days[key].push(s);
+  }
+  // Find day with most sessions to normalize bar widths by session start time within day
+  const allCosts = allSessions.map(s => s.totalCost || 0);
+  const maxCost = Math.max(0.01, ...allCosts);
+
+  const DONUT_COLORS = ['oklch(72% 0.18 75)','oklch(65% 0.15 150)','oklch(65% 0.18 220)','oklch(65% 0.2 300)','oklch(65% 0.2 25)'];
+
+  let html = '';
+  for (const [dateStr, sessions] of Object.entries(days)) {
+    const d = new Date(dateStr);
+    const lbl = d.toLocaleDateString(undefined, { month:'short', day:'numeric' });
+    let track = '';
+    // Sort sessions by start time
+    const sorted = [...sessions].sort((a, b) => {
+      const ta = a.firstTs || a.mtime || 0; const tb = b.firstTs || b.mtime || 0;
+      return (typeof ta === 'number' ? ta : new Date(ta).getTime()) - (typeof tb === 'number' ? tb : new Date(tb).getTime());
+    });
+    for (let i = 0; i < sorted.length; i++) {
+      const s = sorted[i];
+      const startTs = typeof (s.firstTs || s.mtime) === 'number' ? (s.firstTs || s.mtime) : new Date(s.firstTs || s.mtime).getTime();
+      const dayStart = new Date(dateStr).getTime();
+      const startPct = Math.min(95, ((startTs - dayStart) / DAY) * 100);
+      const durPct = s.totalDurationMs ? Math.max(0.5, Math.min(15, (s.totalDurationMs / DAY) * 100)) : 1;
+      const costRatio = Math.max(0.15, (s.totalCost || 0.001) / maxCost);
+      const opacity = 0.3 + costRatio * 0.7;
+      const color = DONUT_COLORS[i % DONUT_COLORS.length];
+      const tip = `${s.lastPrompt ? s.lastPrompt.slice(0,60) : s.id} | $${(s.totalCost||0).toFixed(3)} | ${fmtDur(s.totalDurationMs||0)}`;
+      track += `<div class="tl-bar" style="left:${startPct}%;width:${durPct}%;background:${color};opacity:${opacity}" title="${esc(tip)}" onclick="jumpToSession('${esc(s.id)}')"></div>`;
+    }
+    html += `<div class="tl-day-row"><div class="tl-day-lbl">${lbl}</div><div class="tl-track">${track}</div></div>`;
+  }
+  el.innerHTML = html || '<div class="loading-txt">No sessions in last 14 days</div>';
+}
+
+// ── feature 56: daily report card ─────────────────────────
+function showReportCard() {
+  const modal = document.getElementById('report-modal');
+  const pre = document.getElementById('report-pre');
+  if (!modal || !pre) return;
+  const now = new Date();
+  const todayStr = now.toDateString();
+  const weekMs = 7 * 86400000;
+  const weekAgo = Date.now() - weekMs;
+
+  const todaySess = allSessions.filter(s => {
+    const t = s.firstTs || s.mtime; if (!t) return false;
+    return new Date(typeof t === 'number' ? t : t).toDateString() === todayStr;
+  });
+  const weekSess = allSessions.filter(s => {
+    const t = s.firstTs || s.mtime; if (!t) return false;
+    return (typeof t === 'number' ? t : new Date(t).getTime()) >= weekAgo;
+  });
+
+  function summarize(sessions, label) {
+    if (!sessions.length) return `${label}: no sessions\n`;
+    const totalCost = sessions.reduce((a, s) => a + (s.totalCost||0), 0);
+    const totalDur = sessions.reduce((a, s) => a + (s.totalDurationMs||0), 0);
+    const totalTools = sessions.reduce((a, s) => a + (s.toolCalls||0), 0);
+    const totalErrs = sessions.reduce((a, s) => a + (s.errorCount||0), 0);
+    // top files
+    const fileFreq = {};
+    for (const s of sessions) for (const f of s.filesTouched||[]) fileFreq[f] = (fileFreq[f]||0) + 1;
+    const topFiles = Object.entries(fileFreq).sort((a,b)=>b[1]-a[1]).slice(0,5).map(([f,n])=>`  - ${f} (×${n})`).join('\n');
+    // anomalies
+    const costsArr = sessions.map(s => s.totalCost||0).filter(c => c > 0).sort((a,b)=>a-b);
+    const median = costsArr.length ? costsArr[Math.floor(costsArr.length/2)] : 0;
+    const anomalies = sessions.filter(s => (s.totalCost||0) > median * 3 && (s.totalCost||0) > 0.5).map(s => `  - ${s.lastPrompt?.slice(0,50)||s.id}: $${(s.totalCost||0).toFixed(2)}`).join('\n');
+    return `### ${label}
+- Sessions: ${sessions.length}
+- Total cost: $${totalCost.toFixed(3)}
+- Total duration: ${fmtDur(totalDur)}
+- Tool calls: ${totalTools}${totalErrs ? ` (${totalErrs} errors)` : ''}
+${topFiles ? `\nTop files touched:\n${topFiles}` : ''}${anomalies ? `\n\nCost anomalies:\n${anomalies}` : ''}
+`;
+  }
+
+  const report = `# Monomind Report Card
+Generated: ${now.toLocaleString()}
+Project: ${DIR.split('/').filter(Boolean).pop() || DIR}
+
+${summarize(todaySess, 'Today')}
+${summarize(weekSess, 'This Week')}
+---
+Total all-time: ${allSessions.length} sessions | $${allSessions.reduce((a,s)=>a+(s.totalCost||0),0).toFixed(2)}
+`;
+  pre.textContent = report;
+  modal.classList.add('open');
+}
+
+function closeReportCard() {
+  document.getElementById('report-modal').classList.remove('open');
+}
+
+function copyReportCard() {
+  const text = document.getElementById('report-pre')?.textContent || '';
+  navigator.clipboard.writeText(text).then(() => {
+    const btn = document.querySelector('.rp-copy-btn');
+    if (btn) { btn.textContent = '✓ Copied'; setTimeout(() => { btn.textContent = '⎘ Copy'; }, 1500); }
+  }).catch(() => {});
+}
+
+// ── feature 57: file-pivot cross-filter ───────────────────
+let filePivot = null;
+
+function setFilePivot(fname, event) {
+  if (event) event.stopPropagation();
+  filePivot = filePivot === fname ? null : fname;
+  const bar = document.getElementById('file-pivot-bar');
+  const lbl = document.getElementById('fpb-label');
+  if (bar) bar.classList.toggle('show', !!filePivot);
+  if (lbl) lbl.textContent = filePivot ? `Showing sessions that touched: ${filePivot}` : '';
+  viewRendered['sessions'] = false;
+  renderSessions();
+}
+
+function clearFilePivot() {
+  filePivot = null;
+  const bar = document.getElementById('file-pivot-bar');
+  if (bar) bar.classList.remove('show');
+  viewRendered['sessions'] = false;
+  renderSessions();
+}
+
+// ── feature 58: model cost donut ──────────────────────────
+let modelDonutOpen = false;
+const DONUT_PALETTE = ['oklch(72% 0.18 75)','oklch(65% 0.15 150)','oklch(65% 0.18 220)','oklch(65% 0.2 300)','oklch(62% 0.18 25)','oklch(70% 0.12 60)'];
+
+function toggleModelDonut() {
+  modelDonutOpen = !modelDonutOpen;
+  document.getElementById('btn-donut').classList.toggle('on', modelDonutOpen);
+  const panel = document.getElementById('model-donut-panel');
+  panel.classList.toggle('open', modelDonutOpen);
+  if (modelDonutOpen) buildModelDonut();
+}
+
+function buildModelDonut() {
+  const el = document.getElementById('model-donut-panel');
+  if (!el) return;
+  const breakdown = {};
+  for (const s of allSessions) {
+    for (const [model, d] of Object.entries(s.modelBreakdown || {})) {
+      if (!breakdown[model]) breakdown[model] = { calls: 0, cost: 0 };
+      breakdown[model].calls += d.calls || 0;
+      breakdown[model].cost += d.cost || 0;
+    }
+  }
+  const entries = Object.entries(breakdown).sort((a, b) => b[1].cost - a[1].cost);
+  if (!entries.length) { el.innerHTML = '<div class="loading-txt" style="padding:8px">No model breakdown data</div>'; return; }
+  const totalCost = entries.reduce((a, [, d]) => a + d.cost, 0);
+
+  // Build SVG conic-gradient-style donut using stroke-dasharray
+  const R = 36; const CX = 44; const CY = 44; const CIRCUMFERENCE = 2 * Math.PI * R;
+  let offset = 0;
+  const segments = entries.map(([model, d], i) => {
+    const pct = totalCost > 0 ? d.cost / totalCost : 0;
+    const dash = pct * CIRCUMFERENCE;
+    const seg = `<circle cx="${CX}" cy="${CY}" r="${R}" fill="none" stroke="${DONUT_PALETTE[i % DONUT_PALETTE.length]}" stroke-width="14" stroke-dasharray="${dash} ${CIRCUMFERENCE - dash}" stroke-dashoffset="${-offset}" transform="rotate(-90 ${CX} ${CY})"/>`;
+    offset += dash;
+    return seg;
+  }).join('');
+  const svg = `<svg class="donut-svg" width="88" height="88" viewBox="0 0 88 88">
+    <circle cx="${CX}" cy="${CY}" r="${R}" fill="none" stroke="var(--surface-hi)" stroke-width="14"/>
+    ${segments}
+    <text x="${CX}" y="${CY}" text-anchor="middle" dy="0.3em" font-size="9" fill="var(--text-xs)" font-family="var(--mono)">$${totalCost.toFixed(2)}</text>
+  </svg>`;
+
+  const legend = entries.slice(0, 6).map(([model, d], i) => {
+    const short = model.replace(/^claude-/, '').replace(/-\d{8}$/, '');
+    const pct = totalCost > 0 ? Math.round(d.cost / totalCost * 100) : 0;
+    return `<div class="donut-item"><div class="donut-swatch" style="background:${DONUT_PALETTE[i % DONUT_PALETTE.length]}"></div>
+      <span class="donut-name" title="${esc(model)}">${esc(short)}</span>
+      <span class="donut-cost">$${d.cost.toFixed(2)} <span style="color:var(--text-xs)">${pct}%</span></span>
+    </div>`;
+  }).join('');
+
+  el.innerHTML = `<div class="donut-wrap">${svg}<div class="donut-legend">${legend}</div></div>`;
+}
+
+// ── feature 60: cost anomaly explainer ────────────────────
+// Enhance anom-cost badge with onclick that shows explainer panel
+function showCostExplainer(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; }
+  const sess = allSessions.find(s => s.id === sessId);
+  if (!sess) return;
+  drawer.classList.add('open');
+  const costsArr = allSessions.map(s => s.totalCost||0).filter(c=>c>0).sort((a,b)=>a-b);
+  const median = costsArr.length ? costsArr[Math.floor(costsArr.length/2)] : 0;
+  const pct = costsArr.length ? Math.round(costsArr.filter(c=>c<=(sess.totalCost||0)).length/costsArr.length*100) : 0;
+  const ratio = median > 0 ? ((sess.totalCost||0)/median).toFixed(1) : '—';
+  const modelRows = Object.entries(sess.modelBreakdown||{}).sort((a,b)=>b[1].cost-a[1].cost).slice(0,4)
+    .map(([m,d])=>`<div class="err-item">${esc(m.replace(/^claude-/,'').replace(/-\d{8}$/,''))}: $${(d.cost||0).toFixed(4)} · ${d.calls||0} calls</div>`).join('');
+  drawer.innerHTML = `<div class="err-drawer-head" style="color:oklch(70% 0.18 80)">
+    <span>Cost anomaly — $${(sess.totalCost||0).toFixed(3)} (${ratio}× median, top ${100-pct}%)</span>
+    <button class="err-close" onclick="this.closest('.err-drawer').classList.remove('open');this.closest('.err-drawer').innerHTML=''">✕</button>
+  </div>
+  <div class="err-drawer-body">
+    <div class="err-item" style="color:var(--text-lo)">Tool calls: ${sess.toolCalls||0} · Messages: ${sess.totalMessages||0} · Tokens in: ${(sess.totalInputTokens||0).toLocaleString()}</div>
+    ${modelRows || '<div class="err-item" style="color:var(--text-xs)">No model breakdown available</div>'}
+  </div>`;
+}
+
+// ── 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 bar in the DOM if it exists
+  initTags();
+  const tfBar = document.querySelector('.tag-filter-bar');
+  if (tfBar) tfBar.outerHTML = 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.closest('.ctag-input-wrap').querySelector('input');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="closeErrDrawer('${esc(sessId)}')">✕</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="closeErrDrawer('${esc(sessId)}')">✕</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="closeErrDrawer('${esc(sessId)}')">✕</button></div>`;
+  }
+}
+
+function closeErrDrawer(sessId) {
+  const drawer = document.getElementById('err-drawer-' + sessId);
+  if (!drawer) return;
+  drawer.classList.remove('open');
+  drawer.innerHTML = '';
+}
+
+// ── 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');
+  if (filePivot) p.set('file', filePivot); else p.delete('file');
+  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');
+  }
+  const file = p.get('file');
+  if (file) {
+    filePivot = file;
+    const bar = document.getElementById('file-pivot-bar');
+    const lbl = document.getElementById('fpb-label');
+    if (bar) bar.classList.add('show');
+    if (lbl) lbl.textContent = `Showing sessions that touched: ${file}`;
+  }
+}
+
 // ── helpers ────────────────────────────────────────────────
 function enc(s) { return encodeURIComponent(s); }
 function esc(s) {