npm - opencode-rag-plugin - Versions diffs - 1.11.0 → 1.12.4 - Mend

opencode-rag-plugin 1.11.0 → 1.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/ReadMe.md +14 -6
package/dist/api.js +21 -82
package/dist/api.js.map +1 -1
package/dist/chunker/image.d.ts +14 -0
package/dist/chunker/image.js +356 -0
package/dist/chunker/image.js.map +1 -0
package/dist/chunker/loader.js +5 -0
package/dist/chunker/loader.js.map +1 -1
package/dist/chunker/xml.js +1 -1
package/dist/chunker/xml.js.map +1 -1
package/dist/cli.js +123 -108
package/dist/cli.js.map +1 -1
package/dist/core/bootstrap.d.ts +18 -0
package/dist/core/bootstrap.js +80 -0
package/dist/core/bootstrap.js.map +1 -0
package/dist/core/config.d.ts +15 -0
package/dist/core/config.js +39 -3
package/dist/core/config.js.map +1 -1
package/dist/core/interfaces.d.ts +1 -0
package/dist/core/resolve-api-key.js +3 -0
package/dist/core/resolve-api-key.js.map +1 -1
package/dist/core/runtime-overrides.d.ts +5 -0
package/dist/core/runtime-overrides.js +17 -0
package/dist/core/runtime-overrides.js.map +1 -1
package/dist/describer/describer.js +1 -1
package/dist/describer/describer.js.map +1 -1
package/dist/embedder/health.d.ts +25 -0
package/dist/embedder/health.js +346 -0
package/dist/embedder/health.js.map +1 -0
package/dist/index.d.ts +2 -1
package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/indexer.d.ts +1 -1
package/dist/indexer.js +192 -22
package/dist/indexer.js.map +1 -1
package/dist/mcp/server.js +7 -61
package/dist/mcp/server.js.map +1 -1
package/dist/retriever/keyword-index.js +38 -5
package/dist/retriever/keyword-index.js.map +1 -1
package/dist/web/api.d.ts +8 -0
package/dist/web/api.js +81 -0
package/dist/web/api.js.map +1 -1
package/dist/web/ui/index.html +503 -98
package/package.json +3 -2

package/dist/web/ui/index.html CHANGED Viewed

@@ -7,6 +7,13 @@
   <link rel="stylesheet" href="/ui/app.css">
   <link rel="stylesheet" href="/ui/github-dark.css">
   <script src="/ui/highlight.min.js"></script>
+  <style>
+    .chart-svg text { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
+    .chart-svg rect { transition: opacity 0.15s; }
+    .chart-svg rect:hover { opacity: 0.85; }
+    .chart-svg circle { transition: r 0.15s; }
+    .chart-svg circle:hover { r: 5; }
+  </style>
 </head>
 <body class="h-screen flex flex-col overflow-hidden">
   <!-- Top Bar -->
@@ -16,7 +23,6 @@
       <button id="nav-dashboard" class="nav-btn active px-3 py-1 rounded text-sm font-medium transition">Dashboard</button>
       <button id="nav-chunks" class="nav-btn px-3 py-1 rounded text-sm font-medium hover:bg-slate-700 transition">Chunks</button>
       <button id="nav-files" class="nav-btn px-3 py-1 rounded text-sm font-medium hover:bg-slate-700 transition">Files</button>
-      <button id="nav-compare" class="nav-btn px-3 py-1 rounded text-sm font-medium hover:bg-slate-700 transition">Compare</button>
       <button id="nav-evaluate" class="nav-btn px-3 py-1 rounded text-sm font-medium hover:bg-slate-700 transition">Evaluate</button>
     </nav>
     <div class="flex-1"></div>
@@ -49,8 +55,7 @@
         <div id="chunks-detail" class="w-1/2 overflow-y-auto scrollbar-thin pl-1"></div>
       </div>
       <div id="view-files" class="h-full overflow-y-auto scrollbar-thin"></div>
-      <div id="view-compare" class="h-full overflow-y-auto scrollbar-thin"></div>
-      <div id="view-evaluate" class="hidden h-full overflow-y-auto scrollbar-thin"></div>
+      <div id="view-evaluate" class="hidden h-full flex flex-col"></div>
     </main>
   </div>
@@ -77,6 +82,9 @@
       async evalSession(id) { const r = await fetch('/api/eval/sessions/' + encodeURIComponent(id)); return r.json(); },
       async evalDeleteSession(id) { const r = await fetch('/api/eval/sessions/' + encodeURIComponent(id), { method: 'DELETE' }); return r.json(); },
       async evalCompare(a, b) { const p = new URLSearchParams({a, b}); const r = await fetch('/api/eval/compare?' + p); return r.json(); },
+      async evalAnalysis(id) { const r = await fetch('/api/eval/sessions/' + encodeURIComponent(id) + '/analysis'); return r.json(); },
+      async evalTokenCompare(a, b) { const p = new URLSearchParams({a, b}); const r = await fetch('/api/eval/token-compare?' + p); return r.json(); },
+      async evalProjectSavings(params) { const r = await fetch('/api/eval/project-savings', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(params) }); return r.json(); },
     };
     const state = {
@@ -86,7 +94,7 @@
       selectedChunkId: null,
       chunkOffset: 0,
       chunkLimit: 50,
-      compareIds: new Set(),
       collapsedDirs: new Set(),
       stats: null,
       files: [],
@@ -139,6 +147,213 @@
       });
     }
+    // ── SVG Chart Helpers ──────────────────────────────────────────────
+    const CHART_COLORS = {
+      input: '#3b82f6',   // blue-500
+      output: '#a855f7',  // purple-500
+      rag: '#06b6d4',     // cyan-500
+      reasoning: '#f59e0b', // amber-500
+      cache: '#64748b',   // slate-500
+      cost: '#22c55e',    // green-500
+      time: '#f97316',    // orange-500
+      sessionA: '#3b82f6',
+      sessionB: '#06b6d4',
+    };
+    function svgAttr(attrs) {
+      return Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(' ');
+    }
+    function svgRect(x, y, w, h, fill, extra = '') {
+      return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${fill}" ${extra}/>`;
+    }
+    function svgText(x, y, text, extra = '') {
+      return `<text x="${x}" y="${y}" ${extra}>${escapeHtml(String(text))}</text>`;
+    }
+    function svgLine(x1, y1, x2, y2, extra = '') {
+      return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" ${extra}/>`;
+    }
+    function svgCircle(cx, cy, r, extra = '') {
+      return `<circle cx="${cx}" cy="${cy}" r="${r}" ${extra}/>`;
+    }
+    function svgPath(d, extra = '') {
+      return `<path d="${d}" ${extra}/>`;
+    }
+    function svgDonutArc(cx, cy, r, startAngle, endAngle, fill, innerR) {
+      if (endAngle - startAngle >= 359.99) {
+        return svgCircle(cx, cy, r, `fill="none" stroke="${fill}" stroke-width="${r - (innerR || r * 0.6)}"`) +
+               svgCircle(cx, cy, innerR || r * 0.6, `fill="#0f172a"`);
+      }
+      const toRad = a => (a - 90) * Math.PI / 180;
+      const x1 = cx + r * Math.cos(toRad(startAngle));
+      const y1 = cy + r * Math.sin(toRad(startAngle));
+      const x2 = cx + r * Math.cos(toRad(endAngle));
+      const y2 = cy + r * Math.sin(toRad(endAngle));
+      const ix1 = cx + (innerR || r * 0.6) * Math.cos(toRad(endAngle));
+      const iy1 = cy + (innerR || r * 0.6) * Math.sin(toRad(endAngle));
+      const ix2 = cx + (innerR || r * 0.6) * Math.cos(toRad(startAngle));
+      const iy2 = cy + (innerR || r * 0.6) * Math.sin(toRad(startAngle));
+      const large = endAngle - startAngle > 180 ? 1 : 0;
+      const d = `M${x1},${y1} A${r},${r} 0 ${large} 1 ${x2},${y2} L${ix1},${iy1} A${innerR || r * 0.6},${innerR || r * 0.6} 0 ${large} 0 ${ix2},${iy2} Z`;
+      return svgPath(d, `fill="${fill}"`);
+    }
+    function chartLegend(items) {
+      return `<div class="flex flex-wrap gap-3 mt-2">${items.map(([label, color]) =>
+        `<div class="flex items-center gap-1.5 text-xs text-slate-400">
+          <span class="inline-block w-3 h-3 rounded-sm" style="background:${color}"></span>${escapeHtml(label)}
+        </div>`
+      ).join('')}</div>`;
+    }
+    // ── Vertical Bar Chart: Session Comparison ─────────────────────────
+    function renderComparisonBars(a, b) {
+      const aName = truncate(a.title || a.sessionID.slice(0, 8), 14);
+      const bName = truncate(b.title || b.sessionID.slice(0, 8), 14);
+      const aIn = a.totalTokens.input + a.totalTokens.cacheRead;
+      const bIn = b.totalTokens.input + b.totalTokens.cacheRead;
+      const aTotalTokens = aIn + a.totalTokens.output + a.totalTokens.reasoning;
+      const bTotalTokens = bIn + b.totalTokens.output + b.totalTokens.reasoning;
+      const aRagToolCount = (a.toolCallCounts?.search_semantic || 0) + (a.toolCallCounts?.get_file_skeleton || 0) + (a.toolCallCounts?.find_usages || 0);
+      const bRagToolCount = (b.toolCallCounts?.search_semantic || 0) + (b.toolCallCounts?.get_file_skeleton || 0) + (b.toolCallCounts?.find_usages || 0);
+      const metrics = [
+        { label: 'Total Tokens', aVal: aTotalTokens, bVal: bTotalTokens, color: CHART_COLORS.input, stacked: [
+          { label: 'Input', color: CHART_COLORS.input, aFn: () => aIn - a.ragContextTokens, bFn: () => bIn - b.ragContextTokens },
+          { label: 'RAG Ctx', color: CHART_COLORS.rag, aFn: () => a.ragContextTokens, bFn: () => b.ragContextTokens },
+          { label: 'Output', color: CHART_COLORS.output, aFn: () => a.totalTokens.output, bFn: () => b.totalTokens.output },
+          { label: 'Reasoning', color: CHART_COLORS.reasoning, aFn: () => a.totalTokens.reasoning, bFn: () => b.totalTokens.reasoning },
+        ]},
+        { label: 'Cost', aVal: a.totalCost, bVal: b.totalCost, color: CHART_COLORS.cost, format: formatCost },
+        { label: 'Avg Response', aVal: a.avgResponseTimeMs || 0, bVal: b.avgResponseTimeMs || 0, color: CHART_COLORS.time, format: formatMs },
+        { label: 'Messages', aVal: a.messageCount, bVal: b.messageCount, color: '#94a3b8' },
+        { label: 'RAG Injections', aVal: a.ragContextCount, bVal: b.ragContextCount, color: CHART_COLORS.rag },
+        { label: 'RAG Tool Calls', aVal: aRagToolCount, bVal: bRagToolCount, color: CHART_COLORS.rag },
+      ];
+      const n = metrics.length;
+      const svgW = 700, svgH = 260;
+      const padL = 10, padR = 20, padTop = 30, padBot = 50;
+      const chartW = svgW - padL - padR;
+      const chartH = svgH - padTop - padBot;
+      const groupW = chartW / n;
+      const barW = Math.min(groupW * 0.3, 40);
+      const barGap = 4;
+      const baseline = padTop + chartH;
+      const maxGlobal = Math.max(...metrics.map(m => Math.max(m.aVal, m.bVal)), 1);
+      const gridLines = [0.25, 0.5, 0.75, 1].map(pct => {
+        const y = baseline - chartH * pct;
+        return svgLine(padL, y, svgW - padR, y, 'stroke="#1e293b" stroke-width="1"');
+      }).join('');
+      const axisLine = svgLine(padL, baseline, svgW - padR, baseline, 'stroke="#334155" stroke-width="1"');
+      const barGroups = metrics.map((m, i) => {
+        const cx = padL + groupW * i + groupW / 2;
+        const aBarX = cx - barW - barGap / 2;
+        const bBarX = cx + barGap / 2;
+        const scale = chartH / maxGlobal;
+        const aH = m.aVal * scale;
+        const bH = m.bVal * scale;
+        const fmt = m.format || formatTokens;
+        const aLabel = fmt(m.aVal);
+        const bLabel = fmt(m.bVal);
+        let bars;
+        if (m.stacked) {
+          const stackScale = chartH / maxGlobal;
+          let aStackY = baseline, bStackY = baseline;
+          const aStackBars = m.stacked.filter(s => s.aFn() > 0).map(s => {
+            const val = s.aFn();
+            const h = val * stackScale;
+            aStackY -= h;
+            return svgRect(aBarX, aStackY, barW, h, s.color, `rx="2"`);
+          }).join('');
+          const bStackBars = m.stacked.filter(s => s.bFn() > 0).map(s => {
+            const val = s.bFn();
+            const h = val * stackScale;
+            bStackY -= h;
+            return svgRect(bBarX, bStackY, barW, h, s.color, `rx="2"`);
+          }).join('');
+          bars = aStackBars + bStackBars;
+        } else {
+          bars = svgRect(aBarX, baseline - aH, barW, aH, m.color, `rx="2"`) +
+                 svgRect(bBarX, baseline - bH, barW, bH, m.color === CHART_COLORS.cost ? '#16a34a' : m.color === CHART_COLORS.time ? '#ea580c' : CHART_COLORS.sessionB, `rx="2" opacity="0.7"`);
+        }
+        return `
+          ${bars}
+          <text x="${cx}" y="${baseline + 14}" text-anchor="middle" fill="#94a3b8" font-size="9" font-family="inherit">${escapeHtml(m.label)}</text>
+          ${m.aVal > 0 ? svgText(aBarX + barW / 2, baseline - aH - 4, aLabel, 'text-anchor="middle" fill="#94a3b8" font-size="8" font-family="inherit"') : ''}
+          ${m.bVal > 0 ? svgText(bBarX + barW / 2, baseline - bH - 4, bLabel, 'text-anchor="middle" fill="#94a3b8" font-size="8" font-family="inherit"') : ''}
+        `;
+      }).join('');
+      return `
+        <div class="bg-slate-900 rounded-lg border border-slate-700 p-4 mb-4">
+          <h4 class="text-sm font-semibold text-white mb-3">Session Comparison</h4>
+          <svg width="100%" viewBox="0 0 ${svgW} ${svgH}" class="chart-svg">
+            ${gridLines}${axisLine}${barGroups}
+          </svg>
+          <div class="flex gap-6 mt-1 justify-center">
+            ${chartLegend([[aName, CHART_COLORS.sessionA], [bName, CHART_COLORS.sessionB]])}
+          </div>
+        </div>`;
+    }
+    // ── Donut Chart: Token Composition (Session Detail) ────────────────
+    function renderTokenDonut(s) {
+      const totalIn = s.totalTokens.input + s.totalTokens.cacheRead;
+      const segments = [
+        { label: 'Input (non-RAG)', value: totalIn - s.ragContextTokens, color: CHART_COLORS.input },
+        { label: 'RAG Context', value: s.ragContextTokens, color: CHART_COLORS.rag },
+        { label: 'Output', value: s.totalTokens.output, color: CHART_COLORS.output },
+        { label: 'Reasoning', value: s.totalTokens.reasoning, color: CHART_COLORS.reasoning },
+        { label: 'Cache Read', value: s.totalTokens.cacheRead, color: CHART_COLORS.cache },
+      ].filter(s => s.value > 0);
+      const total = segments.reduce((sum, s) => sum + s.value, 0) || 1;
+      const cx = 90, cy = 90, r = 75, innerR = 48;
+      let angle = 0;
+      const arcs = segments.map(seg => {
+        const sweep = (seg.value / total) * 360;
+        const arc = svgDonutArc(cx, cy, r, angle, angle + sweep, seg.color, innerR);
+        angle += sweep;
+        return arc;
+      }).join('');
+      const pctLabel = total >= 1000000 ? (total / 1000000).toFixed(1) + 'M' : total >= 1000 ? (total / 1000).toFixed(1) + 'k' : String(total);
+      return `
+        <div class="flex items-center gap-6 mb-4">
+          <div class="shrink-0">
+            <svg width="180" height="180" viewBox="0 0 180 180" class="chart-svg">
+              ${arcs}
+              <text x="${cx}" y="${cy - 4}" text-anchor="middle" fill="white" font-size="16" font-weight="bold" font-family="inherit">${pctLabel}</text>
+              <text x="${cx}" y="${cy + 12}" text-anchor="middle" fill="#64748b" font-size="9" font-family="inherit">tokens</text>
+            </svg>
+          </div>
+          <div class="flex-1">
+            ${chartLegend(segments.map(s => [`${s.label}: ${formatTokens(s.value)} (${((s.value / total) * 100).toFixed(1)}%)`, s.color]))}
+          </div>
+        </div>`;
+    }
     async function renderDashboard() {
       const [stats, files] = await Promise.all([API.stats(), API.files()]);
       state.stats = stats;
@@ -209,7 +424,6 @@
           <table class="w-full text-sm">
             <thead>
               <tr class="bg-slate-800 text-slate-400 text-xs">
-                <th class="px-3 py-2 text-left w-8"></th>
                 <th class="px-3 py-2 text-left">File</th>
                 <th class="px-3 py-2 text-left w-20">Lang</th>
                 <th class="px-3 py-2 text-left">Description</th>
@@ -218,11 +432,9 @@
             <tbody>
               ${data.chunks.map((c, i) => {
                 const id = c.id || `chunk-${i}`;
-                const checked = state.compareIds.has(id) ? 'checked' : '';
                 const selected = state.selectedChunkId === id ? ' selected' : '';
                 return `
                 <tr class="chunk-row${selected} border-t border-slate-800 cursor-pointer" data-id="${id}" data-index="${i}">
-                  <td class="px-3 py-2"><input type="checkbox" class="compare-check rounded" data-id="${id}" ${checked}></td>
                   <td class="px-3 py-2 text-yellow-400 font-mono text-xs">${truncate(c.filePath, 40)}:${c.startLine}-${c.endLine}</td>
                   <td class="px-3 py-2">${langBadge(c.language)}</td>
                   <td class="px-3 py-2 text-slate-400 text-xs">${truncate(c.description || '', 50)}</td>
@@ -241,7 +453,6 @@
       // Row click -> select and show detail
       $$('.chunk-row').forEach(row => {
         row.addEventListener('click', (e) => {
-          if (e.target.type === 'checkbox') return;
           const id = row.dataset.id;
           const idx = parseInt(row.dataset.index, 10);
           if (!id) return;
@@ -252,14 +463,6 @@
         });
       });
-      $$('.compare-check').forEach(cb => {
-        cb.addEventListener('change', (e) => {
-          const id = e.target.dataset.id;
-          if (e.target.checked) state.compareIds.add(id);
-          else state.compareIds.delete(id);
-        });
-      });
       const prevBtn = $('#prev-page');
       const nextBtn = $('#next-page');
       if (prevBtn) prevBtn.addEventListener('click', () => { state.chunkOffset = Math.max(0, state.chunkOffset - state.chunkLimit); renderChunks(); });
@@ -485,52 +688,7 @@
       });
     }
-    async function renderCompare() {
-      const el = $('#view-compare');
-      const ids = [...state.compareIds];
-      if (ids.length === 0) {
-        el.innerHTML = `
-          <div class="text-center py-20">
-            <h2 class="text-lg font-semibold text-slate-400 mb-2">No chunks selected</h2>
-            <p class="text-sm text-slate-500">Go to the Chunks view, select 2-3 chunks using checkboxes, then come back here.</p>
-          </div>`;
-        return;
-      }
-      if (ids.length > 3) {
-        el.innerHTML = `
-          <div class="text-center py-20">
-            <h2 class="text-lg font-semibold text-slate-400 mb-2">Too many selected</h2>
-            <p class="text-sm text-slate-500">Select at most 3 chunks to compare. Currently selected: ${ids.length}</p>
-          </div>`;
-        return;
-      }
-      const data = await API.compare(ids);
-      el.innerHTML = `
-        <div class="flex items-center gap-4 mb-4">
-          <h2 class="text-lg font-semibold text-white">Compare</h2>
-          <span class="text-sm text-slate-400">${data.chunks.length} chunks</span>
-          <button id="clear-compare" class="text-xs text-slate-500 hover:text-white">Clear selection</button>
-        </div>
-        <div class="grid gap-4" style="grid-template-columns: repeat(${data.chunks.length}, 1fr)">
-          ${data.chunks.map(c => `
-            <div class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden">
-              <div class="px-3 py-2 bg-slate-800 border-b border-slate-700">
-                <div class="text-xs text-yellow-400 font-mono">${c.filePath}:${c.startLine}-${c.endLine}</div>
-                <div class="flex items-center gap-2 mt-1">${langBadge(c.language)}</div>
-              </div>
-              ${c.description ? `<div class="px-3 py-2 text-xs text-slate-400 border-b border-slate-800">${c.description}</div>` : ''}
-              <pre class="p-3 overflow-x-auto text-xs max-h-[600px] overflow-y-auto"><code class="language-${c.language}">${escapeHtml(c.content || '')}</code></pre>
-            </div>
-          `).join('')}
-        </div>`;
-      el.querySelectorAll('pre code').forEach(b => hljs.highlightElement(b));
-      $('#clear-compare')?.addEventListener('click', () => { state.compareIds.clear(); renderCompare(); });
-    }
     async function selectChunkFromSearch(id) {
       showView('chunks');
@@ -615,7 +773,7 @@
       showView('files');
       renderFiles();
     });
-    $('#nav-compare')?.addEventListener('click', () => { showView('compare'); renderCompare(); });
     $('#nav-evaluate')?.addEventListener('click', () => { showView('evaluate'); renderEvaluate(); });
     // ── Evaluate View ──────────────────────────────────────────────────
@@ -660,13 +818,15 @@
       if (sessions.length === 0) {
         el.innerHTML = `
-          <div class="text-center py-20">
-            <div class="text-4xl mb-3">&#128202;</div>
-            <h2 class="text-lg font-semibold text-slate-400 mb-2">No sessions recorded yet</h2>
-            <p class="text-sm text-slate-500 max-w-md mx-auto">
-              Sessions are logged automatically when the OpenCodeRAG plugin is active.
-              Use OpenCode normally — every conversation is captured here with token usage, timing, and RAG context data.
-            </p>
+          <div class="text-center flex-1 flex items-center justify-center">
+            <div>
+              <div class="text-4xl mb-3">&#128202;</div>
+              <h2 class="text-lg font-semibold text-slate-400 mb-2">No sessions recorded yet</h2>
+              <p class="text-sm text-slate-500 max-w-md mx-auto">
+                Sessions are logged automatically when the OpenCodeRAG plugin is active.
+                Use OpenCode normally — every conversation is captured here with token usage, timing, and RAG context data.
+              </p>
+            </div>
           </div>`;
         return;
       }
@@ -674,16 +834,17 @@
       const selected = state.evalSelectedSessions;
       el.innerHTML = `
-        <div class="flex items-center gap-4 mb-4">
-          <h2 class="text-lg font-semibold text-white">Evaluate</h2>
-          <span class="text-sm text-slate-400">${sessions.length} session${sessions.length === 1 ? '' : 's'}</span>
-          <div class="flex-1"></div>
-          <button id="eval-compare-btn" class="px-3 py-1 bg-brand-600 rounded text-sm font-medium hover:bg-brand-500 disabled:opacity-50 disabled:cursor-not-allowed" ${selected.size === 2 ? '' : 'disabled'}>Compare Selected (2)</button>
-          <button id="eval-select-all" class="px-2 py-1 bg-slate-700 rounded text-xs hover:bg-slate-600">Select All</button>
-          <button id="eval-clear-sel" class="px-2 py-1 bg-slate-700 rounded text-xs hover:bg-slate-600">Clear</button>
-        </div>
+        <div id="eval-top" class="h-1/2 overflow-y-auto scrollbar-thin border-b border-slate-700">
+          <div class="flex items-center gap-4 mb-4">
+            <h2 class="text-lg font-semibold text-white">Evaluate</h2>
+            <span class="text-sm text-slate-400">${sessions.length} session${sessions.length === 1 ? '' : 's'}</span>
+            <div class="flex-1"></div>
+            <button id="eval-compare-btn" class="px-3 py-1 bg-brand-600 rounded text-sm font-medium hover:bg-brand-500 disabled:opacity-50 disabled:cursor-not-allowed" ${selected.size === 2 ? '' : 'disabled'}>Compare Selected (2)</button>
+            <button id="eval-select-all" class="px-2 py-1 bg-slate-700 rounded text-xs hover:bg-slate-600">Select All</button>
+            <button id="eval-clear-sel" class="px-2 py-1 bg-slate-700 rounded text-xs hover:bg-slate-600">Clear</button>
+          </div>
-        <div class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden mb-6">
+          <div class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden">
           <table class="w-full text-sm">
             <thead>
               <tr class="bg-slate-800 text-slate-400 text-xs">
@@ -722,10 +883,66 @@
               }).join('')}
             </tbody>
           </table>
+          </div>
         </div>
-        <div id="eval-detail-area"></div>
-        <div id="eval-compare-area"></div>
+        <div id="eval-bottom" class="h-1/2 overflow-y-auto scrollbar-thin">
+          <div id="eval-compare-area"></div>
+          <div id="eval-detail-area"></div>
+        <div id="eval-projection-area" class="mt-4">
+          <details class="group">
+            <summary class="text-sm font-semibold text-slate-400 cursor-pointer hover:text-white select-none mb-2">What-If Projection</summary>
+            <div class="bg-slate-900 rounded-lg border border-slate-700 p-4">
+              <div class="grid grid-cols-5 gap-4 mb-4">
+                <div>
+                  <label class="block text-xs text-slate-500 mb-1">Avg Chunk Size (chars)</label>
+                  <input type="range" id="proj-chunk-size" min="200" max="2000" step="100" value="600" class="w-full">
+                  <div class="text-xs text-slate-400 text-center mt-1" id="proj-chunk-size-val">600</div>
+                </div>
+                <div>
+                  <label class="block text-xs text-slate-500 mb-1">Chunks/Query</label>
+                  <input type="range" id="proj-chunks-query" min="1" max="10" step="1" value="3" class="w-full">
+                  <div class="text-xs text-slate-400 text-center mt-1" id="proj-chunks-query-val">3</div>
+                </div>
+                <div>
+                  <label class="block text-xs text-slate-500 mb-1">Reads/Query (no RAG)</label>
+                  <input type="range" id="proj-reads-without" min="0" max="10" step="0.5" value="2.5" class="w-full">
+                  <div class="text-xs text-slate-400 text-center mt-1" id="proj-reads-without-val">2.5</div>
+                </div>
+                <div>
+                  <label class="block text-xs text-slate-500 mb-1">Reads/Query (with RAG)</label>
+                  <input type="range" id="proj-reads-with" min="0" max="10" step="0.5" value="0.5" class="w-full">
+                  <div class="text-xs text-slate-400 text-center mt-1" id="proj-reads-with-val">0.5</div>
+                </div>
+                <div>
+                  <label class="block text-xs text-slate-500 mb-1">Query Count</label>
+                  <input type="range" id="proj-query-count" min="1" max="100" step="1" value="10" class="w-full">
+                  <div class="text-xs text-slate-400 text-center mt-1" id="proj-query-count-val">10</div>
+                </div>
+              </div>
+              <div class="grid grid-cols-4 gap-3">
+                <div class="kpi-card p-3 text-center">
+                  <div class="text-slate-500 text-xs mb-1">RAG Overhead</div>
+                  <div class="text-lg font-bold text-yellow-400" id="proj-overhead">-</div>
+                </div>
+                <div class="kpi-card p-3 text-center">
+                  <div class="text-slate-500 text-xs mb-1">Reads Saved</div>
+                  <div class="text-lg font-bold text-green-400" id="proj-saved">-</div>
+                </div>
+                <div class="kpi-card p-3 text-center">
+                  <div class="text-slate-500 text-xs mb-1">Net Savings</div>
+                  <div class="text-lg font-bold" id="proj-net">-</div>
+                </div>
+                <div class="kpi-card p-3 text-center">
+                  <div class="text-slate-500 text-xs mb-1">Verdict</div>
+                  <div class="text-lg font-bold" id="proj-verdict">-</div>
+                </div>
+              </div>
+            </div>
+          </details>
+        </div>
+        </div>
       `;
       // Row click -> show detail
@@ -761,6 +978,7 @@
       // Compare button
       $('#eval-compare-btn')?.addEventListener('click', () => {
         const ids = [...selected];
+        console.log('[Compare] clicked, selected ids:', ids);
         if (ids.length === 2) renderEvalComparison(ids[0], ids[1]);
       });
@@ -783,6 +1001,57 @@
           btn.textContent = `Compare Selected (${selected.size})`;
         }
       }
+      // What-If Projection sliders
+      let projDebounce = null;
+      const projSliders = [
+        { id: 'proj-chunk-size', valId: 'proj-chunk-size-val' },
+        { id: 'proj-chunks-query', valId: 'proj-chunks-query-val' },
+        { id: 'proj-reads-without', valId: 'proj-reads-without-val' },
+        { id: 'proj-reads-with', valId: 'proj-reads-with-val' },
+        { id: 'proj-query-count', valId: 'proj-query-count-val' },
+      ];
+      projSliders.forEach(({ id, valId }) => {
+        const slider = document.getElementById(id);
+        const label = document.getElementById(valId);
+        if (!slider || !label) return;
+        slider.addEventListener('input', () => {
+          label.textContent = slider.value;
+          if (projDebounce) clearTimeout(projDebounce);
+          projDebounce = setTimeout(updateProjection, 200);
+        });
+      });
+      updateProjection();
+    }
+    async function updateProjection() {
+      const params = {
+        avgChunkSize: Number(document.getElementById('proj-chunk-size')?.value ?? 600),
+        avgChunksPerQuery: Number(document.getElementById('proj-chunks-query')?.value ?? 3),
+        avgReadsPerQueryWithoutRAG: Number(document.getElementById('proj-reads-without')?.value ?? 2.5),
+        avgReadsPerQueryWithRAG: Number(document.getElementById('proj-reads-with')?.value ?? 0.5),
+        queryCount: Number(document.getElementById('proj-query-count')?.value ?? 10),
+      };
+      const data = await API.evalProjectSavings(params);
+      const p = data?.projection;
+      if (!p) return;
+      const overheadEl = document.getElementById('proj-overhead');
+      const savedEl = document.getElementById('proj-saved');
+      const netEl = document.getElementById('proj-net');
+      const verdictEl = document.getElementById('proj-verdict');
+      if (overheadEl) overheadEl.textContent = formatTokens(p.ragOverheadTokens);
+      if (savedEl) savedEl.textContent = formatTokens(p.savedReadTokens);
+      if (netEl) {
+        netEl.textContent = (p.netSavings > 0 ? '+' : '') + formatTokens(p.netSavings);
+        netEl.className = `text-lg font-bold ${p.netSavings > 0 ? 'text-green-400' : p.netSavings < 0 ? 'text-red-400' : 'text-slate-400'}`;
+      }
+      if (verdictEl) {
+        verdictEl.textContent = p.isPositive ? 'SAVES' : 'COSTS';
+        verdictEl.className = `text-lg font-bold ${p.isPositive ? 'text-green-400' : 'text-red-400'}`;
+      }
     }
     async function renderEvalDetail(sessionId) {
@@ -801,8 +1070,6 @@
       const totalIn = s.totalTokens.input + s.totalTokens.cacheRead;
       const totalAll = totalIn + s.totalTokens.output + s.totalTokens.reasoning;
-      const toolEntries = Object.entries(s.toolCallCounts).sort((a, b) => b[1] - a[1]);
       area.innerHTML = `
         <div class="mb-4">
           <div class="flex items-center gap-3 mb-3">
@@ -833,6 +1100,8 @@
             </div>
           </div>
+          ${renderTokenDonut(s)}
           <div class="grid grid-cols-4 gap-3 mb-4">
             <div class="kpi-card p-3">
               <div class="text-slate-400 text-xs mb-1">Messages</div>
@@ -852,18 +1121,6 @@
             </div>
           </div>
-          ${toolEntries.length > 0 ? `
-          <div class="kpi-card p-3 mb-4">
-            <h4 class="text-xs font-semibold text-slate-400 mb-2">Tool Calls</h4>
-            <div class="flex flex-wrap gap-2">
-              ${toolEntries.map(([name, count]) => {
-                const isRag = ['search_semantic','get_file_skeleton','find_usages','read'].includes(name);
-                const cls = isRag ? 'bg-cyan-900/50 text-cyan-300 border-cyan-700' : 'bg-slate-800 text-slate-400 border-slate-700';
-                return `<span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs border ${cls}">${escapeHtml(name)} <strong>${count}</strong></span>`;
-              }).join('')}
-            </div>
-          </div>` : ''}
           ${s.models.length > 0 ? `
           <div class="kpi-card p-3 mb-4">
             <h4 class="text-xs font-semibold text-slate-400 mb-2">Models Used</h4>
@@ -873,6 +1130,8 @@
           </div>` : ''}
         </div>
+        <div id="token-analysis-area" class="mb-4"></div>
         <div class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden">
           <div class="px-3 py-2 bg-slate-800 border-b border-slate-700">
             <span class="text-xs font-semibold text-slate-400">Event Timeline</span>
@@ -883,6 +1142,104 @@
           </div>
         </div>
       `;
+      renderTokenAnalysis(sessionId);
+    }
+    async function renderTokenAnalysis(sessionId) {
+      const area = $('#token-analysis-area');
+      if (!area) return;
+      const data = await API.evalAnalysis(sessionId);
+      if (!data || data.error || !data.analysis) {
+        area.innerHTML = '';
+        return;
+      }
+      const a = data.analysis;
+      const e = a.estimates;
+      const savingsColor = e.netSavings > 0 ? 'text-green-400' : e.netSavings < 0 ? 'text-red-400' : 'text-slate-400';
+      const savingsSign = e.netSavings > 0 ? '+' : '';
+      area.innerHTML = `
+        <div class="bg-slate-900 rounded-lg border border-slate-700 p-4 mb-4">
+          <h4 class="text-sm font-semibold text-white mb-3">Token Analysis</h4>
+          <div class="grid grid-cols-3 gap-3 mb-4">
+            <div class="kpi-card p-3">
+              <div class="text-slate-400 text-xs mb-1">Est. Tokens Without RAG</div>
+              <div class="text-xl font-bold text-white">${formatTokens(e.tokensWithoutRAG)}</div>
+            </div>
+            <div class="kpi-card p-3">
+              <div class="text-slate-400 text-xs mb-1">Tokens With RAG (actual)</div>
+              <div class="text-xl font-bold text-white">${formatTokens(e.tokensWithRAG)}</div>
+            </div>
+            <div class="kpi-card p-3">
+              <div class="text-slate-400 text-xs mb-1">Net Savings</div>
+              <div class="text-xl font-bold ${savingsColor}">${savingsSign}${formatTokens(e.netSavings)}</div>
+              <div class="text-xs ${savingsColor}">${savingsSign}${e.percentSavings}%</div>
+            </div>
+          </div>
+          <div class="grid grid-cols-4 gap-3 mb-4 text-xs">
+            <div class="text-slate-400">
+              <span class="block text-slate-500">RAG Context</span>
+              <span class="text-white font-semibold">${formatTokens(a.totals.ragContextTokens)}</span>
+            </div>
+            <div class="text-slate-400">
+              <span class="block text-slate-500">System Guidance</span>
+              <span class="text-white font-semibold">${formatTokens(a.totals.systemGuidanceTokens)}</span>
+            </div>
+            <div class="text-slate-400">
+              <span class="block text-slate-500">Read Tool Calls</span>
+              <span class="text-white font-semibold">${a.totals.readToolCalls}</span>
+            </div>
+            <div class="text-slate-400">
+              <span class="block text-slate-500">RAG Tool Calls</span>
+              <span class="text-cyan-400 font-semibold">${a.totals.ragToolCalls}</span>
+            </div>
+          </div>
+          ${a.breakdowns.length > 0 ? `
+          <details class="group">
+            <summary class="text-xs font-semibold text-slate-400 cursor-pointer hover:text-white select-none">Per-Query Breakdown (${a.breakdowns.length} queries)</summary>
+            <div class="mt-2 overflow-x-auto">
+              <table class="w-full text-xs">
+                <thead>
+                  <tr class="text-slate-500 border-b border-slate-800">
+                    <th class="px-2 py-1 text-left">#</th>
+                    <th class="px-2 py-1 text-right">Input</th>
+                    <th class="px-2 py-1 text-right">Output</th>
+                    <th class="px-2 py-1 text-right">RAG Ctx</th>
+                    <th class="px-2 py-1 text-right">Chunks</th>
+                    <th class="px-2 py-1 text-right">Reads</th>
+                    <th class="px-2 py-1 text-right">RAG Tools</th>
+                    <th class="px-2 py-1 text-right">Score</th>
+                    <th class="px-2 py-1 text-right">Time</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${a.breakdowns.map((b, i) => {
+                    const hasRag = b.ragContextTokens > 0;
+                    const borderCls = hasRag ? 'border-l-2 border-l-cyan-600' : '';
+                    return `<tr class="border-b border-slate-800/50 ${borderCls}">
+                      <td class="px-2 py-1 text-slate-500">${i + 1}</td>
+                      <td class="px-2 py-1 text-right text-slate-300">${formatTokens(b.inputTokens)}</td>
+                      <td class="px-2 py-1 text-right text-slate-300">${formatTokens(b.outputTokens)}</td>
+                      <td class="px-2 py-1 text-right ${hasRag ? 'text-cyan-400' : 'text-slate-500'}">${hasRag ? formatTokens(b.ragContextTokens) : '-'}</td>
+                      <td class="px-2 py-1 text-right text-slate-400">${hasRag ? b.ragChunkCount : '-'}</td>
+                      <td class="px-2 py-1 text-right text-slate-400">${b.readToolCalls}</td>
+                      <td class="px-2 py-1 text-right ${b.ragToolCalls > 0 ? 'text-cyan-400' : 'text-slate-500'}">${b.ragToolCalls || '-'}</td>
+                      <td class="px-2 py-1 text-right text-slate-400">${b.ragTopScore > 0 ? b.ragTopScore.toFixed(2) : '-'}</td>
+                      <td class="px-2 py-1 text-right text-slate-500">${b.responseTimeMs > 0 ? formatMs(b.responseTimeMs) : '-'}</td>
+                    </tr>`;
+                  }).join('')}
+                </tbody>
+              </table>
+            </div>
+          </details>` : ''}
+        </div>
+      `;
     }
     function renderTimelineEvent(ev) {
@@ -960,13 +1317,24 @@
       area.innerHTML = '<div class="text-center py-4 text-slate-500">Loading comparison...</div>';
-      const data = await API.evalCompare(idA, idB);
-      if (!data || data.error) {
-        area.innerHTML = `<div class="text-center py-4 text-red-400">${escapeHtml(data?.error || 'Comparison failed')}</div>`;
+      let basicData, tokenData;
+      try {
+        [basicData, tokenData] = await Promise.all([
+          API.evalCompare(idA, idB),
+          API.evalTokenCompare(idA, idB),
+        ]);
+      } catch (err) {
+        area.innerHTML = `<div class="text-center py-4 text-red-400">Comparison failed: ${escapeHtml(String(err))}</div>`;
         return;
       }
-      const { sessionA: a, sessionB: b, delta } = data;
+      if (!basicData || basicData.error) {
+        area.innerHTML = `<div class="text-center py-4 text-red-400">${escapeHtml(basicData?.error || 'Comparison failed')}</div>`;
+        return;
+      }
+      try {
+      const { sessionA: a, sessionB: b, delta } = basicData;
       const aTotalIn = a.totalTokens.input + a.totalTokens.cacheRead;
       const bTotalIn = b.totalTokens.input + b.totalTokens.cacheRead;
       const aTotal = aTotalIn + a.totalTokens.output + a.totalTokens.reasoning;
@@ -992,6 +1360,14 @@
         { label: 'Avg Response Time', a: a.avgResponseTimeMs || 0, b: b.avgResponseTimeMs || 0, fmt: formatMs, pct: true },
       ];
+      // Add token analysis rows if available
+      const tc = tokenData?.comparison;
+      if (tc) {
+        rows.push(
+          { label: 'Read Tool Calls', a: a.ragToolCalls || 0, b: b.ragToolCalls || 0, fmt: String, pct: false },
+        );
+      }
       area.innerHTML = `
         <div class="mt-6 mb-4">
           <div class="flex items-center gap-3 mb-3">
@@ -999,6 +1375,18 @@
             <button id="eval-close-compare" class="text-xs text-slate-500 hover:text-white ml-auto">Close</button>
           </div>
+          ${tc ? `
+          <div class="p-3 rounded-lg mb-4 ${tc.delta.inputTokens < 0 ? 'bg-green-900/20 border border-green-800' : tc.delta.inputTokens > 0 ? 'bg-red-900/20 border border-red-800' : 'bg-slate-800 border border-slate-700'}">
+            <div class="text-sm font-semibold ${tc.delta.inputTokens < 0 ? 'text-green-300' : tc.delta.inputTokens > 0 ? 'text-red-300' : 'text-slate-300'}">${escapeHtml(tc.verdict)}</div>
+            ${tokenData?.ragOn?.estimates ? `
+            <div class="text-xs text-slate-400 mt-1">
+              Token savings estimate: ${tokenData.ragOn.estimates.netSavings > 0 ? '+' : ''}${formatTokens(tokenData.ragOn.estimates.netSavings)} (${tokenData.ragOn.estimates.percentSavings}%)
+              for RAG-on session
+            </div>` : ''}
+          </div>` : ''}
+          ${renderComparisonBars(a, b)}
           <div class="bg-slate-900 rounded-lg border border-slate-700 overflow-hidden">
             <table class="w-full text-sm">
               <thead>
@@ -1037,12 +1425,29 @@
                 : `RAG reduced context by ${formatTokens(Math.abs(delta.ragContextTokens))} tokens. The LLM processed ${formatTokens(Math.abs(delta.inputTokens))} fewer input tokens.`}
             </div>
           </div>` : ''}
+          ${tokenData?.ragOn?.estimates ? `
+          <div class="grid grid-cols-2 gap-3 mt-3">
+            <div class="kpi-card p-3">
+              <div class="text-slate-400 text-xs mb-1">RAG-On Session Savings</div>
+              <div class="text-lg font-bold ${tokenData.ragOn.estimates.netSavings > 0 ? 'text-green-400' : 'text-red-400'}">${tokenData.ragOn.estimates.netSavings > 0 ? '+' : ''}${formatTokens(tokenData.ragOn.estimates.netSavings)}</div>
+              <div class="text-xs text-slate-500">est. ${tokenData.ragOn.estimates.percentSavings}% ${tokenData.ragOn.estimates.netSavings > 0 ? 'saved' : 'overhead'}</div>
+            </div>
+            <div class="kpi-card p-3">
+              <div class="text-slate-400 text-xs mb-1">RAG-Off Session Savings</div>
+              <div class="text-lg font-bold ${tokenData.ragOff.estimates.netSavings > 0 ? 'text-green-400' : 'text-red-400'}">${tokenData.ragOff.estimates.netSavings > 0 ? '+' : ''}${formatTokens(tokenData.ragOff.estimates.netSavings)}</div>
+              <div class="text-xs text-slate-500">est. ${tokenData.ragOff.estimates.percentSavings}% ${tokenData.ragOff.estimates.netSavings > 0 ? 'saved' : 'overhead'}</div>
+            </div>
+          </div>` : ''}
         </div>
       `;
       $('#eval-close-compare')?.addEventListener('click', () => {
         area.innerHTML = '';
       });
+      } catch (err) {
+        area.innerHTML = `<div class="text-center py-4 text-red-400">Comparison rendering failed: ${escapeHtml(String(err))}</div>`;
+      }
     }
     // Init