@monoes/monomindcli 1.10.37 → 1.10.38

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

@@ -436,6 +436,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #app.ambient #feed-recap,
 #app.ambient #feed-timeline,
 #app.ambient #digest-card { display:none !important; }
+#app.ambient #weekly-card { display:none !important; }
 #app.ambient #main { background:var(--bg); }
 #app.ambient #view-now { height:100vh; }
 #app.ambient #feed-pane { border:none; }
@@ -597,6 +598,59 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 .bm-save:hover { background:oklch(68% 0.18 75); }
 .bm-cancel { background:transparent; border:1px solid var(--border); border-radius:var(--r); padding:7px 12px; font-size:13px; color:var(--text-lo); cursor:pointer; }
 .bm-cancel:hover { color:var(--text-hi); }
+
+/* ── toast notifications ──────────────────────────────────── */
+#toast-rack { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
+.toast { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:8px; font-size:12px; max-width:300px; pointer-events:all; background:oklch(18% 0.012 55); border:1px solid var(--border); color:var(--text-mid); box-shadow:0 4px 24px rgba(0,0,0,0.4); animation:toast-in 0.25s var(--ease-out); }
+.toast.t-warn { border-color:oklch(72% 0.18 75 / 0.4); background:oklch(18% 0.015 75); }
+.toast.t-err  { border-color:oklch(60% 0.18 25 / 0.4); background:oklch(17% 0.015 25); }
+.toast.t-ok   { border-color:oklch(65% 0.15 150 / 0.4); background:oklch(17% 0.012 150); }
+.toast-ico { flex-shrink:0; font-size:14px; }
+.toast-body { flex:1; min-width:0; }
+.toast-title { font-weight:600; color:var(--text-hi); margin-bottom:2px; }
+.toast-msg { color:var(--text-lo); line-height:1.4; }
+.toast-close { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:12px; line-height:1; padding:0; flex-shrink:0; }
+.toast-close:hover { color:var(--text-lo); }
+@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+
+/* ── token velocity sparkline ─────────────────────────────── */
+#vel-chart { display:flex; align-items:flex-end; gap:2px; height:28px; margin-top:6px; }
+.vel-bar { flex:1; border-radius:2px 2px 0 0; min-height:2px; background:oklch(65% 0.18 200 / 0.55); }
+.vel-bar.vel-hi { background:oklch(65% 0.18 150 / 0.8); }
+.vel-bar.vel-lo { background:oklch(65% 0.08 200 / 0.3); }
+
+/* ── shortcut help modal ──────────────────────────────────── */
+#shortcut-modal { display:none; position:fixed; inset:0; z-index:500; background:oklch(0% 0 0 / 0.6); align-items:center; justify-content:center; }
+#shortcut-modal.open { display:flex; }
+#shortcut-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px 28px; max-width:460px; width:90%; max-height:80vh; overflow-y:auto; }
+.sk-title { font-size:14px; font-weight:600; color:var(--text-hi); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
+.sk-close { background:none; border:none; color:var(--text-xs); cursor:pointer; font-size:16px; padding:0; }
+.sk-close:hover { color:var(--text-lo); }
+.sk-section { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-xs); margin:14px 0 6px; }
+.sk-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid oklch(25% 0.008 55 / 0.4); }
+.sk-row:last-child { border-bottom:none; }
+.sk-keys { display:flex; gap:3px; }
+.sk-keys kbd { font-size:10px; background:var(--surface-hi); border:1px solid var(--border); border-radius:3px; padding:1px 6px; font-family:var(--mono); color:var(--text-lo); }
+.sk-desc { font-size:11px; color:var(--text-mid); }
+
+/* ── session filter ───────────────────────────────────────── */
+#sess-filter-wrap { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+#sess-filter-input { flex:1; background:var(--surface-hi); border:1px solid var(--border); border-radius:var(--r); padding:5px 10px; font-size:12px; color:var(--text-hi); outline:none; font-family:var(--sans); }
+#sess-filter-input:focus { border-color:oklch(72% 0.18 75 / 0.5); }
+#sess-filter-input::placeholder { color:var(--text-xs); }
+#sess-filter-count { font-size:11px; color:var(--text-xs); white-space:nowrap; min-width:60px; text-align:right; }
+
+/* ── topbar activity chip ─────────────────────────────────── */
+#topbar-activity { font-size:10px; color:var(--text-xs); font-family:var(--mono); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; transition:opacity 0.3s; }
+#topbar-activity.loaded { opacity:1; }
+
+/* ── anomaly badge on session rows ────────────────────────── */
+.sess-anomaly { display:inline-flex; align-items:center; font-size:10px; padding:1px 5px; border-radius:5px; font-weight:600; margin-left:4px; vertical-align:middle; }
+.sess-anomaly.anom-cost { background:oklch(60% 0.18 25 / 0.12); color:oklch(70% 0.18 25); }
+.sess-anomaly.anom-err  { background:oklch(65% 0.15 300 / 0.12); color:oklch(72% 0.15 300); }
+
+/* ── streak badge ─────────────────────────────────────────── */
+.streak-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:2px 7px; border-radius:8px; background:oklch(65% 0.18 75 / 0.12); color:oklch(78% 0.18 75); white-space:nowrap; }
 </style>
 </head>
 <body>
@@ -654,9 +708,11 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
     <span id="view-title">Now</span>
     <span class="pill"><span class="live-dot"></span> live</span>
     <span id="topbar-cost"></span>
+    <span id="topbar-activity"></span>
     <div id="tb-right">
       <button class="btn" id="btn-budget" onclick="openBudgetModal()" title="Set daily/monthly cost budget">⚑ Budget</button>
       <button class="btn" onclick="openCmdPalette()">⌕ Search <kbd style="font-size:10px;opacity:0.6;margin-left:3px">⌘K</kbd></button>
+      <button class="btn" onclick="openShortcutHelp()" title="Keyboard shortcuts (?)">? Help</button>
       <button class="btn" onclick="refreshCurrent()">↺ Refresh</button>
     </div>
   </div>
@@ -792,6 +848,10 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <div class="m-group-title">Activity Heatmap</div>
           <div class="loading-txt">—</div>
         </div>
+        <div id="m-velocity">
+          <div class="m-group-title">Token Velocity</div>
+          <div class="loading-txt">—</div>
+        </div>
       </div>
     </div>
 
@@ -816,6 +876,10 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           <button class="lb-toggle" id="btn-leaderboard" onclick="toggleLeaderboard()" title="Cost leaderboard">⬆ Leaderboard</button>
           <button class="lb-toggle" id="btn-model-mix" onclick="toggleModelMix()" title="Model usage breakdown">⬡ Models</button>
           <button class="lb-toggle" id="btn-tool-errors" onclick="toggleToolErrors()" title="Tool error rate">⚠ Errors</button>
+          <button class="lb-toggle" id="btn-tool-rank" onclick="toggleToolRank()" title="Most-used tools across sessions">⟳ Tools</button>
+          <button class="lb-toggle" id="btn-proj-costs" onclick="toggleProjCosts()" title="Cost breakdown by project">$ Projects</button>
+          <button class="lb-toggle" id="btn-export-csv" onclick="exportSessionsCSV()" title="Export sessions as CSV">⬇ CSV</button>
+          <button class="lb-toggle" id="btn-patterns" onclick="togglePatterns()" title="Prompt word frequency across sessions">⊞ Patterns</button>
           <button class="diff-toggle" id="btn-diff" onclick="toggleDiffMode()" title="Compare two sessions">⇄ Compare</button>
         </div>
         <div class="pg-sub" id="sess-pg-sub">Recent Claude Code sessions for this project</div>
@@ -835,6 +899,19 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
         <div id="tool-errors-panel" style="display:none;margin-bottom:16px">
           <div id="tool-errors-body"></div>
         </div>
+        <div id="tool-rank-panel" style="display:none;margin-bottom:16px">
+          <div id="tool-rank-body"></div>
+        </div>
+        <div id="proj-costs-panel" style="display:none;margin-bottom:16px">
+          <div id="proj-costs-body"></div>
+        </div>
+        <div id="patterns-panel" style="display:none;margin-bottom:16px">
+          <div id="patterns-body"></div>
+        </div>
+        <div id="sess-filter-wrap">
+          <input id="sess-filter-input" type="text" placeholder="Filter sessions by prompt…" oninput="filterSessions(this.value)" autocomplete="off">
+          <span id="sess-filter-count"></span>
+        </div>
         <div id="sess-content" class="sess-list"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -885,6 +962,7 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 </div><!-- /main -->
 <div id="app-ambient-hint">Press A to exit ambient mode</div>
 </div><!-- /app -->
+<div id="toast-rack"></div>
 
 <!-- budget modal (fixed overlay, outside app) -->
 <div id="budget-modal" onclick="if(event.target===this)closeBudgetModal()">
@@ -1613,7 +1691,24 @@ async function renderSessions() {
     buildWeeklyRecap();
     buildEfficiencyPanel();
     buildActivityHeatmap();
+    buildTokenVelocity();
     if (leaderboardOpen) renderLeaderboard();
+    // check budget thresholds and fire toasts
+    const todayCost = allSessions.filter(s => {
+      const t = s.firstTs || s.mtime;
+      if (!t) return false;
+      const d = new Date(typeof t === 'number' ? t : t);
+      const now = new Date();
+      return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
+    }).reduce((a, s) => a + (s.totalCost || 0), 0);
+    const monthCost = allSessions.filter(s => {
+      const t = s.firstTs || s.mtime;
+      if (!t) return false;
+      const d = new Date(typeof t === 'number' ? t : t);
+      const now = new Date();
+      return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
+    }).reduce((a, s) => a + (s.totalCost || 0), 0);
+    checkBudgetToast(todayCost, monthCost);
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load sessions: ' + esc(err.message) + '</div>';
   }
@@ -2331,7 +2426,33 @@ function buildSwimlane() {
       </div>
     </div>`;
   }).join('');
-  el.innerHTML = `<div class="m-group-title">Session Lanes <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h</span></div><div id="swimlane-wrap">${rows}</div>`;
+  // dead time: find largest gap between consecutive sessions
+  const sorted = recent.slice().sort((a, b) => {
+    const aTs = typeof (a.firstTs || a.mtime) === 'number' ? (a.firstTs || a.mtime) : new Date(a.firstTs || a.mtime).getTime();
+    const bTs = typeof (b.firstTs || b.mtime) === 'number' ? (b.firstTs || b.mtime) : new Date(b.firstTs || b.mtime).getTime();
+    return aTs - bTs;
+  });
+  let maxGapMs = 0; let gapStart = 0;
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = sorted[i - 1];
+    const curr = sorted[i];
+    const prevTs = typeof (prev.firstTs || prev.mtime) === 'number' ? (prev.firstTs || prev.mtime) : new Date(prev.firstTs || prev.mtime).getTime();
+    const prevEnd = prevTs + (prev.totalDurationMs || 60000);
+    const currTs = typeof (curr.firstTs || curr.mtime) === 'number' ? (curr.firstTs || curr.mtime) : new Date(curr.firstTs || curr.mtime).getTime();
+    const gap = currTs - prevEnd;
+    if (gap > maxGapMs) { maxGapMs = gap; gapStart = prevEnd; }
+  }
+  const MIN15 = 15 * 60000;
+  let gapNote = '';
+  if (maxGapMs > MIN15) {
+    const gapMins = Math.round(maxGapMs / 60000);
+    const when = new Date(gapStart);
+    const hr = when.getHours().toString().padStart(2, '0');
+    const mn = when.getMinutes().toString().padStart(2, '0');
+    const label = maxGapMs > 3600000 ? `${Math.floor(maxGapMs/3600000)}h idle` : `${gapMins}m idle`;
+    gapNote = `<div style="font-size:10px;color:var(--text-xs);margin-top:5px;padding:3px 6px;border-radius:4px;background:oklch(40% 0.04 55 / 0.15)">Longest gap: ${label} starting ${hr}:${mn}</div>`;
+  }
+  el.innerHTML = `<div class="m-group-title">Session Lanes <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h</span></div><div id="swimlane-wrap">${rows}</div>${gapNote}`;
 }
 
 // ── feature 18: loop run history ──────────────────────────
@@ -3026,6 +3147,176 @@ document.addEventListener('keydown', e => {
   }
 });
 
+// ── feature 25: notification toasts ──────────────────────
+let _toastLastBudgetKey = '';
+function showToast(title, msg, type = 'info', duration = 5000) {
+  const rack = document.getElementById('toast-rack');
+  if (!rack) return;
+  const icoMap = { warn: '⚑', err: '⚠', ok: '✓', info: '◉' };
+  const div = document.createElement('div');
+  div.className = 'toast t-' + type;
+  div.innerHTML = `<span class="toast-ico">${icoMap[type] || '◉'}</span>
+    <div class="toast-body">
+      <div class="toast-title">${esc(title)}</div>
+      <div class="toast-msg">${esc(msg)}</div>
+    </div>
+    <button class="toast-close" onclick="this.closest('.toast').remove()">✕</button>`;
+  rack.appendChild(div);
+  if (duration > 0) setTimeout(() => { try { div.remove(); } catch {} }, duration);
+}
+
+function checkBudgetToast(todayCost, monthCost) {
+  const budget = JSON.parse(localStorage.getItem('mm-budget') || '{}');
+  const daily = parseFloat(budget.daily) || 0;
+  const monthly = parseFloat(budget.monthly) || 0;
+  if (daily > 0 && todayCost >= daily * 0.9) {
+    const pct = Math.round((todayCost / daily) * 100);
+    const key = 'daily-' + pct;
+    if (key !== _toastLastBudgetKey) {
+      _toastLastBudgetKey = key;
+      showToast('Budget alert', `Daily spend at ${pct}% ($${todayCost.toFixed(2)} of $${daily})`, todayCost >= daily ? 'err' : 'warn');
+    }
+  }
+  if (monthly > 0 && monthCost >= monthly * 0.9) {
+    const pct = Math.round((monthCost / monthly) * 100);
+    const key = 'monthly-' + pct;
+    if (key !== _toastLastBudgetKey) {
+      _toastLastBudgetKey = key;
+      showToast('Monthly budget', `Monthly spend at ${pct}% ($${monthCost.toFixed(2)} of $${monthly})`, monthCost >= monthly ? 'err' : 'warn');
+    }
+  }
+}
+
+// ── feature 26: token velocity sparkline ──────────────────
+function buildTokenVelocity() {
+  const el = document.getElementById('m-velocity');
+  if (!el || !allSessions.length) return;
+  const now = Date.now();
+  const HOUR = 3600000;
+  const buckets = new Array(24).fill(0);
+  for (const s of allSessions) {
+    const t = s.firstTs || s.mtime;
+    if (!t) continue;
+    const ts = typeof t === 'number' ? t : new Date(t).getTime();
+    const hoursAgo = (now - ts) / HOUR;
+    if (hoursAgo < 0 || hoursAgo >= 24) continue;
+    const bucket = Math.min(23, Math.floor(23 - hoursAgo));
+    buckets[bucket] += s.totalInputTokens || 0;
+  }
+  const maxTok = Math.max(1, ...buckets);
+  const totalTok = buckets.reduce((a, b) => a + b, 0);
+  const fmt = n => n > 1e6 ? (n/1e6).toFixed(1)+'M' : n > 1e3 ? (n/1e3).toFixed(0)+'k' : String(n);
+  const bars = buckets.map((v, i) => {
+    const h = Math.max(2, Math.round((v / maxTok) * 28));
+    const cls = v > maxTok * 0.66 ? 'vel-hi' : v < maxTok * 0.15 ? 'vel-lo' : '';
+    const hrsAgo = 23 - i;
+    return `<div class="vel-bar ${cls}" style="height:${h}px" title="${fmt(v)} tokens — ${hrsAgo}h ago"></div>`;
+  }).join('');
+  const totalCost = allSessions.reduce((a, s) => a + (s.totalCost || 0), 0);
+  el.innerHTML = `<div class="m-group-title">Token Velocity <span style="font-size:10px;color:var(--text-xs);font-weight:400">24h · ${fmt(totalTok)}</span></div>
+    <div id="vel-chart">${bars}</div>
+    <div style="font-size:10px;color:var(--text-xs);margin-top:4px">Total cost <span style="color:oklch(78% 0.18 75)">$${totalCost.toFixed(2)}</span></div>`;
+}
+
+// ── feature 27: export sessions CSV ───────────────────────
+function exportSessionsCSV() {
+  if (!allSessions.length) { showToast('No data', 'No sessions loaded yet', 'warn'); return; }
+  const headers = ['Date', 'Session ID', 'Prompt', 'Cost ($)', 'Duration (s)', 'Tool Calls', 'User Messages', 'Cache Hit %', 'Input Tokens'];
+  const rows = allSessions.map(s => {
+    const dt = new Date(s.firstTs || s.mtime || 0).toISOString().slice(0, 19).replace('T', ' ');
+    const cost = typeof s.totalCost === 'number' ? s.totalCost.toFixed(4) : '';
+    const dur = s.totalDurationMs ? Math.round(s.totalDurationMs / 1000) : '';
+    const cachePct = s.totalInputTokens > 0 ? Math.round((s.cacheReadTokens || 0) / s.totalInputTokens * 100) : '';
+    const prompt = (s.lastPrompt || '').replace(/"/g, '""');
+    return [dt, s.id, prompt, cost, dur, s.toolCalls || '', s.userMessages || '', cachePct, s.totalInputTokens || ''];
+  });
+  const csv = [headers, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n');
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = `sessions-${new Date().toISOString().slice(0, 10)}.csv`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+  showToast('Exported', `${allSessions.length} sessions saved as CSV`, 'ok');
+}
+
+// ── feature 28: tool usage ranking ────────────────────────
+let toolRankOpen = false;
+function toggleToolRank() {
+  toolRankOpen = !toolRankOpen;
+  document.getElementById('btn-tool-rank').classList.toggle('on', toolRankOpen);
+  const p = document.getElementById('tool-rank-panel');
+  p.style.display = toolRankOpen ? '' : 'none';
+  if (toolRankOpen) loadToolRank();
+}
+async function loadToolRank() {
+  const el = document.getElementById('tool-rank-body');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/tool-ranking?dir=' + enc(DIR));
+    if (!data.tools?.length) { el.innerHTML = '<div class="loading-txt">No tool usage data</div>'; return; }
+    const maxCount = data.tools[0].count;
+    const rows = data.tools.slice(0, 15).map((t, i) => {
+      const barW = Math.round((t.count / maxCount) * 100);
+      const errRate = t.errors > 0 ? ((t.errors / t.count) * 100).toFixed(0) + '%' : '—';
+      return `<tr><td class="lb-rank">${i + 1}</td>
+        <td style="font-size:12px;color:var(--text-mid);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(t.tool)}</td>
+        <td style="width:80px;padding:4px 6px">
+          <div style="height:4px;background:var(--surface-hi);border-radius:2px;overflow:hidden">
+            <div style="height:100%;width:${barW}%;background:oklch(65% 0.15 200);border-radius:2px"></div>
+          </div>
+        </td>
+        <td class="lb-cost" style="color:var(--text-mid)">${t.count.toLocaleString()}</td>
+        <td class="lb-dur" style="color:${t.errors > 0 ? 'oklch(70% 0.18 25)' : 'var(--text-xs)'}">${errRate}</td>
+      </tr>`;
+    }).join('');
+    el.innerHTML = `<table class="lb-table"><thead><tr>
+      <th class="lb-rank">#</th><th>Tool</th><th></th><th class="lb-cost">Calls</th><th class="lb-dur">Error%</th>
+    </tr></thead><tbody>${rows}</tbody></table>`;
+  } catch (err) {
+    el.innerHTML = '<div class="loading-txt">Could not load: ' + esc(err.message) + '</div>';
+  }
+}
+
+// ── feature 29: cost breakdown by project ─────────────────
+let projCostsOpen = false;
+function toggleProjCosts() {
+  projCostsOpen = !projCostsOpen;
+  document.getElementById('btn-proj-costs').classList.toggle('on', projCostsOpen);
+  const p = document.getElementById('proj-costs-panel');
+  p.style.display = projCostsOpen ? '' : 'none';
+  if (projCostsOpen) loadProjCosts();
+}
+async function loadProjCosts() {
+  const el = document.getElementById('proj-costs-body');
+  el.innerHTML = '<div class="loading-txt">Loading…</div>';
+  try {
+    const data = await apiFetch('/api/project-costs');
+    if (!data.projects?.length) { el.innerHTML = '<div class="loading-txt">No cost data across projects</div>'; return; }
+    const maxCost = data.projects[0].cost;
+    const rows = data.projects.slice(0, 10).map((p, i) => {
+      const barW = maxCost > 0 ? Math.round((p.cost / maxCost) * 100) : 0;
+      const name = p.path.split('/').filter(Boolean).pop() || p.path;
+      return `<tr onclick="switchProject('${esc(p.path)}')" style="cursor:pointer" title="${esc(p.path)}">
+        <td class="lb-rank">${i + 1}</td>
+        <td style="font-size:12px;color:var(--text-mid);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(name)}</td>
+        <td class="lb-cost">$${p.cost.toFixed(2)}</td>
+        <td style="width:80px;padding:4px 6px">
+          <div style="height:4px;background:var(--surface-hi);border-radius:2px;overflow:hidden">
+            <div style="height:100%;width:${barW}%;background:oklch(72% 0.18 75 / 0.7);border-radius:2px"></div>
+          </div>
+        </td>
+        <td class="lb-dur">${p.sessions}</td>
+      </tr>`;
+    }).join('');
+    el.innerHTML = `<table class="lb-table"><thead><tr>
+      <th class="lb-rank">#</th><th>Project</th><th class="lb-cost">Cost</th><th></th><th class="lb-dur">Sessions</th>
+    </tr></thead><tbody>${rows}</tbody></table>`;
+  } catch (err) {
+    el.innerHTML = '<div class="loading-txt">Could not load: ' + esc(err.message) + '</div>';
+  }
+}
+
 // ── helpers ────────────────────────────────────────────────
 function enc(s) { return encodeURIComponent(s); }
 function esc(s) {

package/dist/src/ui/server.mjs

@@ -534,6 +534,92 @@ export async function startServer({ port = 4242, projectDir, openBrowser = true
       return;
     }
 
+    // ------------------------------------------------------- GET /api/tool-ranking
+    if (req.method === 'GET' && url === '/api/tool-ranking') {
+      try {
+        const qs = new URL(req.url, 'http://localhost').searchParams;
+        const dir = qs.get('dir') || projectDir || process.cwd();
+        const d = path.resolve(dir || process.cwd());
+        const slug = d.replace(/\//g, '-');
+        const projectClaudeDir = path.join(os.homedir(), '.claude', 'projects', slug);
+        let sessionFiles = [];
+        try {
+          sessionFiles = fs.readdirSync(projectClaudeDir)
+            .filter(f => f.endsWith('.jsonl'))
+            .map(f => { try { return { f, mtime: fs.statSync(path.join(projectClaudeDir, f)).mtimeMs }; } catch { return null; } })
+            .filter(Boolean).sort((a,b) => b.mtime - a.mtime).slice(0, 30);
+        } catch {}
+        const toolCounts = {}, errorCounts = {};
+        for (const { f } of sessionFiles) {
+          const fp = path.join(projectClaudeDir, f);
+          try {
+            const lines = fs.readFileSync(fp, 'utf8').split('\n').filter(Boolean);
+            const toolIdMap = {};
+            for (const line of lines) {
+              let e; try { e = JSON.parse(line); } catch { continue; }
+              if (e.type === 'assistant') {
+                for (const b of (e.message?.content || [])) {
+                  if (b && b.type === 'tool_use') { toolIdMap[b.id] = b.name; toolCounts[b.name] = (toolCounts[b.name] || 0) + 1; }
+                }
+              }
+              if (e.type === 'user') {
+                for (const b of (e.message?.content || [])) {
+                  if (b && b.type === 'tool_result' && b.is_error) {
+                    const name = toolIdMap[b.tool_use_id] || '?';
+                    errorCounts[name] = (errorCounts[name] || 0) + 1;
+                  }
+                }
+              }
+            }
+          } catch {}
+        }
+        const tools = Object.entries(toolCounts)
+          .map(([tool, count]) => ({ tool, count, errors: errorCounts[tool] || 0 }))
+          .sort((a,b) => b.count - a.count);
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', 'Cache-Control': 'no-cache' });
+        res.end(JSON.stringify({ tools }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
+    // ------------------------------------------------------- GET /api/project-costs
+    if (req.method === 'GET' && url === '/api/project-costs') {
+      try {
+        const projectsBase = path.join(os.homedir(), '.claude', 'projects');
+        let slugDirs = [];
+        try { slugDirs = fs.readdirSync(projectsBase, { withFileTypes: true }).filter(e => e.isDirectory()).map(e => e.name); } catch {}
+        const projectCosts = [];
+        for (const slug of slugDirs) {
+          const projDir = path.join(projectsBase, slug);
+          const projPath = '/' + slug.replace(/^-/, '').replace(/-/g, '/');
+          let sessionFiles = [];
+          try { sessionFiles = fs.readdirSync(projDir).filter(f => f.endsWith('.jsonl')).map(f => path.join(projDir, f)); } catch {}
+          if (!sessionFiles.length) continue;
+          let totalCost = 0;
+          for (const fp of sessionFiles) {
+            try {
+              const lines = fs.readFileSync(fp, 'utf8').split('\n').filter(Boolean);
+              for (const line of lines) {
+                let e; try { e = JSON.parse(line); } catch { continue; }
+                if (e.type === 'assistant' && e.message?.usage) { totalCost += _sjCalcCost(e.message.model || '', e.message.usage); }
+              }
+            } catch {}
+          }
+          if (totalCost > 0) projectCosts.push({ path: projPath, cost: totalCost, sessions: sessionFiles.length });
+        }
+        projectCosts.sort((a, b) => b.cost - a.cost);
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', 'Cache-Control': 'no-cache' });
+        res.end(JSON.stringify({ projects: projectCosts }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+
     // ------------------------------------------------------- GET /api/projects
     if (req.method === 'GET' && url === '/api/projects') {
       try {