@monoes/monomindcli 1.10.40 → 1.10.41

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

@@ -778,6 +778,60 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 
 /* ── 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>
@@ -1017,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">
@@ -1030,6 +1087,9 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           </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>
@@ -1144,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>
@@ -1874,6 +1949,8 @@ async function renderSessions() {
       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);
@@ -1909,7 +1986,8 @@ async function renderSessions() {
       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>`;
       }
@@ -1925,7 +2003,16 @@ async function renderSessions() {
       const note = getSessNote(s.id);
       const hasNote = !!note;
       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>` : '';
+      // 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>`
@@ -1937,7 +2024,7 @@ async function renderSessions() {
         <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="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>
@@ -1946,6 +2033,7 @@ async function renderSessions() {
         ${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>
@@ -3500,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++;
   });
@@ -3930,6 +4048,235 @@ 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');
@@ -4042,8 +4389,10 @@ function addCustomTag(sessId, tag, event) {
   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);
+  // 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) {
@@ -4064,7 +4413,7 @@ function showCustomTagInput(sessId, event) {
   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>`;
+    <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();
@@ -4095,17 +4444,24 @@ async function toggleErrDrawer(sessId, event) {
   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>`;
+      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="toggleErrDrawer('${esc(sessId)}',event)">✕</button></div>
+    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="toggleErrDrawer('${esc(sessId)}',event)">✕</button></div>`;
+    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();
@@ -4151,6 +4507,7 @@ function syncURLParams() {
   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);
 }
@@ -4176,6 +4533,14 @@ function restoreURLParams() {
     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 ────────────────────────────────────────────────