kiku-agent 1.3.1 → 1.3.2

package/server/agent/eval/modules/reporting/dashboard.js

@@ -0,0 +1,1406 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+import { allCases, cases } from '../evaluation/cases.js';
+import {
+  evaluateToolCorrectness,
+  detectTrajectoryLoops,
+  computeLatencyBreakdown,
+  checkGroundedness,
+  summarize
+} from '../evaluation/scoring.js';
+import { diffReports } from '../analysis/compare.js';
+import { BENCHMARK_ROWS, computeBenchmarkSummary } from './benchmark.js';
+import { REPO_ROOT } from '../core/config.js';
+
+const caseLookup = new Map(allCases.map(c => [c.id, c]));
+
+export function enrichEvaluationReport(report) {
+  if (!report || !Array.isArray(report.rows)) return report;
+
+  for (const row of report.rows) {
+    const c = caseLookup.get(row.id) || cases.find(item => item.id === row.id) || { id: row.id, groups: [] };
+    if (!row.toolCorrectness) {
+      row.toolCorrectness = evaluateToolCorrectness(c, row.trace);
+    }
+    if (!row.trajectoryHealth) {
+      row.trajectoryHealth = detectTrajectoryLoops(row.trace);
+    }
+    if (!row.latencyBreakdown) {
+      row.latencyBreakdown = computeLatencyBreakdown(row);
+    }
+    if (!row.groundedness && row.status === 'completed') {
+      row.groundedness = checkGroundedness(c, row.answer, row.trace);
+    }
+  }
+
+  const planned = report.metadata?.caseIds?.length || report.rows.length;
+  report.summary = summarize(report.rows, planned);
+  return report;
+}
+
+export function generateDashboardHtml(report, compareReport = null) {
+  enrichEvaluationReport(report);
+  if (compareReport) enrichEvaluationReport(compareReport);
+  const { metadata = {}, summary = {}, rows = [] } = report;
+
+  let comparison = null;
+  if (compareReport) {
+    try {
+      comparison = diffReports(compareReport, report);
+    } catch {
+      comparison = null;
+    }
+  }
+
+  const escapeHtml = str => String(str ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+
+  const deltaBadge = (metricKey, isRate = true) => {
+    if (!comparison) return '';
+    const d = comparison.metricDeltas?.[metricKey]?.delta;
+    if (d === null || d === undefined || !Number.isFinite(d)) return '';
+    if (Math.abs(d) < 0.0001) return '<span class="delta-badge delta-neutral">±0%</span>';
+    const isGood = d > 0;
+    const sign = d > 0 ? '+' : '';
+    const formatted = isRate ? `${sign}${(d * 100).toFixed(1)}%` : `${sign}${d.toFixed(2)}`;
+    const cls = isGood ? 'delta-good' : 'delta-bad';
+    const arrow = isGood ? '▲' : '▼';
+    return `<span class="delta-badge ${cls}">${arrow} ${formatted}</span>`;
+  };
+
+  const passRate = summary.lexicalCoverageRate !== null ? Math.round(summary.lexicalCoverageRate * 100) : 0;
+  const toolRate = summary.toolAccuracyRate !== null ? Math.round(summary.toolAccuracyRate * 100) : 0;
+  const loopFreeRate = summary.loopFreeRate !== null ? Math.round(summary.loopFreeRate * 100) : 100;
+  const groundedRate = summary.groundednessRate !== null ? Math.round(summary.groundednessRate * 100) : 100;
+  const medianSec = summary.medianMs ? (summary.medianMs / 1000).toFixed(2) : '-';
+  const p95Sec = summary.p95Ms ? (summary.p95Ms / 1000).toFixed(2) : '-';
+  const meanLlmSec = summary.meanLlmMs ? (summary.meanLlmMs / 1000).toFixed(2) : '-';
+  const meanToolSec = summary.meanToolMs ? (summary.meanToolMs / 1000).toFixed(2) : '-';
+  const decodeTps = summary.meanDecodeTps ?? '-';
+  const bench = summary.benchmark && summary.benchmark.values ? summary.benchmark : computeBenchmarkSummary(rows, summary);
+  const formatObserved = row => {
+    const v = bench.values[row.key];
+    if (v === null || v === undefined) return '-';
+    if (row.format === 'percent') return `${(v * 100).toFixed(1)}%`;
+    if (row.format === 'cost') return `$${Number(v).toFixed(3)}`;
+    return Number(v).toFixed(2);
+  };
+  let benchmarkTableRowsHtml = '';
+  for (const bRow of BENCHMARK_ROWS) {
+    const observed = formatObserved(bRow);
+    const st = bench.status[bRow.key];
+    const badge = st === null ? '<span class="badge badge-category">N-A</span>' : (st ? '<span class="badge badge-success">Pass</span>' : '<span class="badge badge-danger">Fail</span>');
+    benchmarkTableRowsHtml += `<tr><td><strong>${escapeHtml(bRow.dimension)}</strong><div class="bench-sub">${escapeHtml(bRow.iso)} · ${escapeHtml(bRow.nist)}</div></td><td>${escapeHtml(bRow.indicator)}</td><td>${escapeHtml(bRow.benchmark)}</td><td>${escapeHtml(bRow.target)}</td><td><strong>${escapeHtml(observed)}</strong></td><td>${badge}</td></tr>`;
+  }
+  let failureBarsHtml = '';
+  for (const key of Object.keys(bench.failureDistribution || {})) {
+    const f = bench.failureDistribution[key];
+    const pct = Math.round((f.rate || 0) * 1000) / 10;
+    const blocks = Math.round((f.rate || 0) * 20);
+    const bar = `${'█'.repeat(blocks)}${'░'.repeat(Math.max(0, 20 - blocks))}`;
+    failureBarsHtml += `<div class="failure-row"><div class="failure-label">${escapeHtml(f.label)}</div><div class="failure-bar">${bar}</div><div class="failure-pct">${pct.toFixed(1)}% (${f.count})</div></div>`;
+  }
+  const paretoW = 920;
+  const paretoH = 300;
+  const paretoX = c => 60 + Math.min(Math.max(Number(c) || 0, 0), 0.08) * (820 / 0.08);
+  const paretoY = s => 270 - ((Math.min(Math.max(Number(s) || 0, 40), 100) - 40) * (240 / 60));
+  const paretoColors = { candidate: '#34d399', baseline: '#fbbf24', legacy: '#94a3b8', live: '#f43f5e' };
+  let paretoDotsHtml = '';
+  for (const p of (bench.pareto || [])) {
+    const cx = paretoX(p.cost).toFixed(1);
+    const cy = paretoY(p.successRate).toFixed(1);
+    const fill = paretoColors[p.kind] || '#e2e8f0';
+    paretoDotsHtml += `<circle cx="${cx}" cy="${cy}" r="${p.kind === 'live' ? 8 : 6}" fill="${fill}" stroke="#0b0f19" stroke-width="2"><title>${escapeHtml(p.label)}: ${escapeHtml(String(p.successRate))}% at $${escapeHtml(String(p.cost))}</title></circle><text x="${Number(cx) + 10}" y="${Number(cy) - 8}" class="svg-val">${escapeHtml(p.label)} (${escapeHtml(String(p.successRate))}%, $${escapeHtml(String(p.cost))})</text>`;
+  }
+
+
+  const validRows = rows.filter(r => r.status === 'completed' && r.durationMs > 0);
+  const maxDuration = Math.max(...validRows.map(r => r.durationMs || 1000), 1000);
+  const chartWidth = 960;
+  const barHeight = 14;
+  const gap = 6;
+  const chartHeight = Math.max(220, validRows.length * (barHeight + gap) + 40);
+
+  let latencySvgBars = '';
+  validRows.forEach((r, idx) => {
+    const y = 30 + idx * (barHeight + gap);
+    const totalW = Math.max(4, Math.round((r.durationMs / maxDuration) * (chartWidth - 180)));
+    const toolMs = r.latencyBreakdown?.toolExecutionMs || 0;
+    const toolW = Math.min(totalW, Math.round((toolMs / maxDuration) * (chartWidth - 180)));
+    const llmW = Math.max(0, totalW - toolW);
+
+    latencySvgBars += `
+      <g class="chart-row" data-id="${escapeHtml(r.id)}">
+        <text x="10" y="${y + 11}" class="svg-label">${escapeHtml(r.id)}</text>
+        <rect x="65" y="${y}" width="${llmW}" height="${barHeight}" rx="3" fill="#818cf8" class="bar-llm">
+          <title>${escapeHtml(r.id)} LLM Time: ${Math.round(r.latencyBreakdown?.llmInferenceMs || 0)}ms</title>
+        </rect>
+        <rect x="${65 + llmW}" y="${y}" width="${toolW}" height="${barHeight}" rx="3" fill="#f43f5e" class="bar-tool">
+          <title>${escapeHtml(r.id)} Tool Time: ${Math.round(toolMs)}ms</title>
+        </rect>
+        <text x="${72 + totalW}" y="${y + 11}" class="svg-val">${(r.durationMs / 1000).toFixed(2)}s</text>
+      </g>
+    `;
+  });
+
+  const catStats = summary.categoryStats || {};
+  let categoryCardsHtml = '';
+  for (const [cat, data] of Object.entries(catStats)) {
+    const catPass = data.completed > 0 ? Math.round((data.factsMatched / data.completed) * 100) : 0;
+    const toolDenom = data.toolEligible ?? data.completed;
+    const catTools = toolDenom > 0 ? Math.round((data.toolsCorrect / toolDenom) * 100) : 0;
+    categoryCardsHtml += `
+      <div class="category-card">
+        <div class="category-header">
+          <span class="category-name">${escapeHtml(cat.toUpperCase())}</span>
+          <span class="category-count">${data.completed}/${data.total} cases</span>
+        </div>
+        <div class="category-metrics">
+          <div class="metric-row">
+            <span>Lexical Pass:</span>
+            <strong>${catPass}%</strong>
+          </div>
+          <div class="progress-bar"><div class="progress-fill" style="width: ${catPass}%"></div></div>
+          <div class="metric-row">
+            <span>Tool Accuracy:</span>
+            <strong>${catTools}%</strong>
+          </div>
+          <div class="progress-bar progress-tool"><div class="progress-fill" style="width: ${catTools}%"></div></div>
+        </div>
+      </div>
+    `;
+  }
+
+  const langStats = summary.languageStats || {};
+  let languageCardsHtml = '';
+  for (const [lang, data] of Object.entries(langStats)) {
+    const langPass = data.completed > 0 ? Math.round((data.factsMatched / data.completed) * 100) : 0;
+    const toolDenom = data.toolEligible ?? data.completed;
+    const langTools = toolDenom > 0 ? Math.round((data.toolsCorrect / toolDenom) * 100) : 0;
+    const avgLatency = data.meanMs ? `${(data.meanMs / 1000).toFixed(2)}s` : '-';
+    languageCardsHtml += `
+      <div class="category-card language-card">
+        <div class="category-header">
+          <span class="category-name">LANG: ${escapeHtml(lang.toUpperCase())}</span>
+          <span class="category-count">${data.completed}/${data.total} cases (${avgLatency})</span>
+        </div>
+        <div class="category-metrics">
+          <div class="metric-row">
+            <span>Coverage:</span>
+            <strong>${langPass}%</strong>
+          </div>
+          <div class="progress-bar"><div class="progress-fill" style="width: ${langPass}%"></div></div>
+          <div class="metric-row">
+            <span>Tool Accuracy:</span>
+            <strong>${langTools}%</strong>
+          </div>
+          <div class="progress-bar progress-tool"><div class="progress-fill" style="width: ${langTools}%"></div></div>
+        </div>
+      </div>
+    `;
+  }
+
+  const baseRowMap = compareReport ? new Map(compareReport.rows?.map(r => [r.id, r]) || []) : null;
+
+  let tableRowsHtml = '';
+  rows.forEach((r, idx) => {
+    const isCompleted = r.status === 'completed';
+    const allMatched = r.coverage?.allMatched;
+    const hasLoop = r.trajectoryHealth?.hasLoop;
+    const statusBadge = isCompleted
+      ? (allMatched ? '<span class="badge badge-success">PASS</span>' : '<span class="badge badge-warning">PARTIAL</span>')
+      : '<span class="badge badge-danger">ERROR</span>';
+
+    let compareBadge = '';
+    if (baseRowMap && baseRowMap.has(r.id)) {
+      const bRow = baseRowMap.get(r.id);
+      const bPass = bRow.status === 'completed' && bRow.coverage?.allMatched === true;
+      const cPass = isCompleted && allMatched === true;
+      if (bPass && !cPass) {
+        compareBadge = '<span class="badge badge-regression">REGRESSION</span>';
+      } else if (!bPass && cPass) {
+        compareBadge = '<span class="badge badge-improved">IMPROVED</span>';
+      }
+    }
+
+    const toolsUsed = [...new Set(r.trace?.filter(t => t.event === 'start').map(t => t.name) || [])];
+    const toolsHtml = toolsUsed.length
+      ? toolsUsed.map(t => `<span class="tag-tool">${escapeHtml(t)}</span>`).join('')
+      : '<span class="tag-empty">None</span>';
+
+    const loopBadge = hasLoop ? '<span class="badge badge-loop">LOOP</span>' : '';
+    const durationStr = r.durationMs ? `${(r.durationMs / 1000).toFixed(2)}s` : '-';
+
+    tableRowsHtml += `
+      <tr class="case-row" onclick="toggleDetails('row-detail-${idx}')" id="row-${idx}" data-category="${escapeHtml(r.category)}" data-language="${escapeHtml(r.language)}" data-status="${allMatched ? 'pass' : 'fail'}" data-has-loop="${hasLoop ? 'true' : 'false'}">
+        <td class="col-id"><strong>${escapeHtml(r.id)}</strong></td>
+        <td><span class="badge badge-category">${escapeHtml(r.category)}</span></td>
+        <td><span class="badge badge-lang">${escapeHtml((r.language || '').toUpperCase())}</span></td>
+        <td class="col-question" title="${escapeHtml(r.question)}">${escapeHtml(r.question)}</td>
+        <td>${statusBadge} ${loopBadge} ${compareBadge}</td>
+        <td><div class="tool-tags-cell">${toolsHtml}</div></td>
+        <td class="col-duration">${durationStr}</td>
+      </tr>
+      <tr class="detail-row" id="row-detail-${idx}" style="display: none;">
+        <td colspan="7">
+          <div class="detail-drawer">
+            <div class="detail-grid">
+              <div class="detail-pane">
+                <h4>Reference & Fact Matching</h4>
+                <p><strong>Question:</strong> ${escapeHtml(r.question)}</p>
+                <div class="fact-coverage-box">
+                  <strong>Matched Facts:</strong> ${r.coverage?.matched ?? 0} / ${r.coverage?.total ?? 0}
+                  ${r.coverage?.missing?.length ? `<div class="missing-facts">[FAIL] Missing: ${escapeHtml(JSON.stringify(r.coverage.missing))}</div>` : '<div class="all-facts-ok">[OK] All target aliases identified</div>'}
+                </div>
+                <h4 style="margin-top: 14px;">Latency & Execution Breakdown</h4>
+                <div class="latency-stat-row">
+                  <div>LLM Thought & Gen: <strong>${Math.round(r.latencyBreakdown?.llmInferenceMs || 0)}ms</strong> (${r.latencyBreakdown?.llmPercentage || 0}%)</div>
+                  <div>Tool Execution: <strong>${Math.round(r.latencyBreakdown?.toolExecutionMs || 0)}ms</strong> (${r.latencyBreakdown?.toolPercentage || 0}%)</div>
+                </div>
+                <div class="dual-progress">
+                  <div class="dp-llm" style="width: ${r.latencyBreakdown?.llmPercentage || 0}%"></div>
+                  <div class="dp-tool" style="width: ${r.latencyBreakdown?.toolPercentage || 0}%"></div>
+                </div>
+              </div>
+              <div class="detail-pane">
+                <h4>Agent Final Response</h4>
+                <div class="answer-box">${escapeHtml(r.answer || r.error || 'No answer generated')}</div>
+              </div>
+            </div>
+
+            <h4 style="margin-top: 16px;">Full Trajectory Trace Events (${r.trace?.length || 0} events)</h4>
+            <div class="trace-timeline">
+              ${(r.trace || []).map((t, stepIdx) => `
+                <div class="trace-event trace-${escapeHtml(t.event)}">
+                  <div class="trace-badge">${stepIdx + 1}. [${escapeHtml(t.event.toUpperCase())}] ${escapeHtml(t.name || '')} ${t.durationMs ? `<span class="trace-time">${t.durationMs}ms</span>` : ''}</div>
+                  ${t.parameters ? `<pre class="trace-json">Params: ${escapeHtml(JSON.stringify(t.parameters, null, 2))}</pre>` : ''}
+                  ${t.value ? `<pre class="trace-json trace-val">Output: ${escapeHtml(typeof t.value === 'object' ? JSON.stringify(t.value, null, 2) : String(t.value).slice(0, 300))}</pre>` : ''}
+                  ${t.message ? `<div class="trace-msg">${escapeHtml(t.message)}</div>` : ''}
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        </td>
+      </tr>
+    `;
+  });
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>Kiku Agent Evaluation & Performance Dashboard</title>
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/fonts/google-sans-official.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Google+Sans+Text:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #0b0f19;
+      --card-bg: rgba(22, 27, 46, 0.85);
+      --card-border: rgba(255, 255, 255, 0.08);
+      --text: #f1f5f9;
+      --text-muted: #94a3b8;
+      --primary: #f43f5e;
+      --primary-glow: rgba(244, 63, 94, 0.35);
+      --accent-purple: #818cf8;
+      --success: #10b981;
+      --warning: #f59e0b;
+      --danger: #ef4444;
+      --font: 'Google Sans', 'Google Sans Text', 'Product Sans', 'Noto Sans Thai', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
+    html {
+      scroll-behavior: smooth;
+      -webkit-text-size-adjust: 100%;
+      max-width: 100vw;
+      overflow-x: hidden;
+    }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--font);
+      line-height: 1.5;
+      padding: clamp(12px, 3vw, 24px);
+      -webkit-font-smoothing: antialiased;
+      -webkit-overflow-scrolling: touch;
+      max-width: 100vw;
+      overflow-x: hidden;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.2);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(244, 63, 94, 0.35);
+      border-radius: 999px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary);
+    }
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(244, 63, 94, 0.35) rgba(0, 0, 0, 0.2);
+    }
+
+    .dashboard-container {
+      max-width: 1280px;
+      margin: 0 auto;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .header-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--card-border);
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+
+    .title-area {
+      flex: 1 1 300px;
+      min-width: 0;
+    }
+    .title-area h1 {
+      font-size: clamp(20px, 4.5vw, 26px);
+      font-weight: 800;
+      background: linear-gradient(135deg, #fff 30%, var(--primary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      line-height: 1.25;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+    .title-area p {
+      color: var(--text-muted);
+      font-size: clamp(12px, 2.5vw, 13px);
+      margin-top: 6px;
+      line-height: 1.45;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+
+    .header-meta {
+      display: flex;
+      gap: 12px;
+      font-size: 12px;
+      color: var(--text-muted);
+      background: var(--card-bg);
+      padding: 8px 14px;
+      border-radius: 10px;
+      border: 1px solid var(--card-border);
+      flex-wrap: wrap;
+    }
+    .meta-tag strong { color: var(--text); }
+
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 45vw, 190px), 1fr));
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .kpi-card {
+      background: var(--card-bg);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      padding: clamp(12px, 2.5vw, 18px);
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      min-width: 0;
+    }
+    .kpi-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 3px;
+      background: linear-gradient(90deg, var(--primary), var(--accent-purple));
+    }
+    .kpi-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      word-break: break-word;
+    }
+    .kpi-value {
+      font-size: clamp(20px, 4.5vw, 26px);
+      font-weight: 800;
+      margin-top: 6px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px;
+      word-break: break-word;
+    }
+    .kpi-sub {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 3px;
+      word-break: break-word;
+    }
+
+    .delta-badge {
+      font-size: 11px;
+      font-weight: 700;
+      padding: 2px 6px;
+      border-radius: 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      flex-shrink: 0;
+    }
+    .delta-good { background: rgba(16, 185, 129, 0.2); color: #34d399; }
+    .delta-bad { background: rgba(239, 68, 68, 0.2); color: #f87171; }
+    .delta-neutral { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
+    .badge-regression { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid #ef4444; }
+    .badge-improved { background: rgba(16, 185, 129, 0.25); color: #34d399; border: 1px solid #10b981; }
+
+    .section-card {
+      background: var(--card-bg);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      padding: clamp(14px, 3vw, 20px);
+      margin-bottom: 24px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+      min-width: 0;
+      overflow: hidden;
+    }
+    .section-title {
+      font-size: clamp(14px, 3.2vw, 16px);
+      font-weight: 700;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      word-break: break-word;
+    }
+
+    .category-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 45vw, 220px), 1fr));
+      gap: 12px;
+    }
+    .category-card {
+      background: rgba(15, 20, 36, 0.65);
+      border: 1px solid var(--card-border);
+      border-radius: 10px;
+      padding: 12px;
+      min-width: 0;
+      overflow: hidden;
+    }
+    .language-card {
+      border-left: 3px solid var(--accent-purple);
+    }
+    .category-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      gap: 6px;
+    }
+    .category-name { font-weight: 700; font-size: 12px; color: #cbd5e1; word-break: break-word; }
+    .category-count { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
+    .metric-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 11.5px;
+      margin-top: 6px;
+      color: var(--text-muted);
+      gap: 6px;
+    }
+    .metric-row strong { color: #f8fafc; }
+    .progress-bar {
+      height: 6px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 999px;
+      overflow: hidden;
+      margin-top: 4px;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #10b981, #059669);
+      border-radius: 999px;
+    }
+    .progress-tool .progress-fill {
+      background: linear-gradient(90deg, var(--accent-purple), #6366f1);
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 14px;
+      font-size: 12px;
+      flex-wrap: wrap;
+    }
+    .legend-item { display: flex; align-items: center; gap: 6px; }
+    .legend-box { width: 12px; height: 12px; border-radius: 3px; }
+    .svg-scroll-wrap {
+      overflow-x: auto;
+      max-height: 480px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      max-width: 100%;
+    }
+    .svg-label { fill: #94a3b8; font-size: 11px; font-weight: 600; font-family: var(--font); }
+    .svg-val { fill: #cbd5e1; font-size: 10px; font-family: var(--font); }
+    .bar-llm { transition: opacity 0.2s ease; cursor: pointer; }
+    .bar-tool { transition: opacity 0.2s ease; cursor: pointer; }
+    .chart-row:hover .bar-llm, .chart-row:hover .bar-tool { opacity: 0.8; }
+
+    .table-toolbar {
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: 14px;
+      flex-wrap: wrap;
+    }
+    .search-box {
+      flex: 1 1 200px;
+      min-width: 0;
+      position: relative;
+    }
+    .search-box input {
+      width: 100%;
+      background: rgba(15, 20, 36, 0.8);
+      border: 1px solid var(--card-border);
+      border-radius: 8px;
+      padding: 8px 12px;
+      color: #fff;
+      font-size: 13px;
+      outline: none;
+    }
+    .search-box input:focus {
+      border-color: var(--primary);
+    }
+    .filter-group {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      max-width: 100%;
+    }
+    .filter-btn {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--card-border);
+      color: var(--text-muted);
+      padding: 6px 12px;
+      border-radius: 8px;
+      font-size: 12px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+    }
+    .filter-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
+    .filter-btn.active {
+      background: linear-gradient(135deg, var(--primary), #e11d48);
+      color: #fff;
+      border-color: transparent;
+      box-shadow: 0 0 10px var(--primary-glow);
+    }
+
+    .table-wrap {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      border: 1px solid var(--card-border);
+      border-radius: 10px;
+      max-width: 100%;
+    }
+    table {
+      width: 100%;
+      min-width: 620px;
+      border-collapse: collapse;
+      font-size: 12.5px;
+      text-align: left;
+    }
+    th {
+      background: rgba(15, 20, 36, 0.9);
+      color: var(--text-muted);
+      font-weight: 600;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--card-border);
+      white-space: nowrap;
+    }
+    td {
+      padding: 12px 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      color: #cbd5e1;
+    }
+    .case-row { cursor: pointer; transition: background 0.15s ease; }
+    .case-row:hover { background: rgba(255, 255, 255, 0.03); }
+
+    .badge {
+      display: inline-block;
+      padding: 2px 7px;
+      border-radius: 6px;
+      font-size: 10.5px;
+      font-weight: 700;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+    .badge-success { background: rgba(16, 185, 129, 0.18); color: #34d399; }
+    .badge-warning { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
+    .badge-danger { background: rgba(239, 68, 68, 0.18); color: #f87171; }
+    .badge-category { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
+    .badge-lang { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
+    .badge-loop { background: rgba(244, 63, 94, 0.2); color: #fb7185; }
+
+    .tool-tags-cell { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
+    .tag-tool {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      color: #e2e8f0;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-family: monospace;
+      word-break: break-all;
+    }
+    .tag-empty { color: #64748b; font-style: italic; font-size: 11px; }
+
+    .detail-row td { background: rgba(11, 15, 25, 0.95); padding: 0; }
+    .detail-drawer { padding: clamp(12px, 2.5vw, 18px); border-bottom: 2px solid var(--primary); min-width: 0; }
+    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
+    .detail-pane {
+      background: rgba(22, 27, 46, 0.5);
+      border: 1px solid var(--card-border);
+      border-radius: 8px;
+      padding: 12px;
+      min-width: 0;
+      overflow: hidden;
+    }
+    .detail-pane h4 { font-size: 13px; color: var(--accent-purple); margin-bottom: 8px; font-weight: 700; word-break: break-word; }
+    .fact-coverage-box {
+      margin-top: 8px;
+      padding: 8px 10px;
+      background: rgba(0, 0, 0, 0.25);
+      border-radius: 6px;
+      font-size: 12px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+    .missing-facts { color: #f87171; margin-top: 4px; font-family: monospace; font-size: 11px; word-break: break-all; }
+    .all-facts-ok { color: #34d399; margin-top: 4px; font-weight: 600; word-break: break-word; }
+    .answer-box {
+      max-height: 180px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      font-size: 12px;
+      color: #e2e8f0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      background: rgba(0, 0, 0, 0.3);
+      padding: 10px;
+      border-radius: 6px;
+    }
+    .latency-stat-row { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 6px; gap: 6px; }
+    .dual-progress { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
+    .dp-llm { background: #818cf8; }
+    .dp-tool { background: #f43f5e; }
+
+    .trace-timeline {
+      max-height: 280px;
+      overflow-y: auto;
+      border: 1px solid var(--card-border);
+      border-radius: 8px;
+      padding: 10px;
+      background: rgba(0, 0, 0, 0.3);
+    }
+    .trace-event {
+      padding: 6px 8px;
+      margin-bottom: 6px;
+      border-left: 3px solid #64748b;
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 0 4px 4px 0;
+      font-size: 11px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+    .trace-start { border-left-color: #38bdf8; }
+    .trace-result { border-left-color: #34d399; }
+    .trace-error { border-left-color: #f87171; }
+    .trace-badge { font-weight: 700; color: #f1f5f9; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
+    .trace-time { color: var(--text-muted); font-weight: normal; }
+    .trace-json { font-size: 10.5px; color: #cbd5e1; margin-top: 4px; overflow-x: auto; font-family: monospace; word-break: break-all; white-space: pre-wrap; }
+    .bench-sub { font-size: 10.5px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
+    .bench-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+    .formula-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 45vw, 240px), 1fr)); gap: 12px; margin-top: 14px; }
+    .formula-card { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--card-border); border-radius: 8px; padding: 12px; font-size: 12px; min-width: 0; }
+    .formula-card strong { color: #a5b4fc; display: block; margin-bottom: 6px; word-break: break-word; }
+    .formula-card code { font-family: monospace; color: #e2e8f0; font-size: 11.5px; word-break: break-all; }
+    .failure-row { display: grid; grid-template-columns: 170px 1fr 110px; gap: 10px; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); min-width: 0; }
+    .failure-label { color: #cbd5e1; font-weight: 600; word-break: break-word; }
+    .failure-bar { font-family: monospace; color: #fb7185; letter-spacing: 1px; overflow: hidden; white-space: nowrap; }
+    .failure-pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
+    .pareto-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
+    .pareto-axis { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
+
+    @media (max-width: 768px) {
+      .header-bar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 14px;
+      }
+      .title-area h1 {
+        font-size: clamp(20px, 5.5vw, 24px);
+      }
+      .header-meta {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+        box-sizing: border-box;
+      }
+      .detail-grid {
+        grid-template-columns: 1fr;
+      }
+      .failure-row {
+        grid-template-columns: 1fr auto;
+        gap: 8px;
+      }
+      .failure-bar {
+        display: none;
+      }
+      .table-toolbar {
+        flex-direction: column;
+      }
+      .search-box {
+        width: 100%;
+      }
+      .filter-group {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        padding-bottom: 4px;
+        -webkit-overflow-scrolling: touch;
+        max-width: 100%;
+      }
+      .filter-btn {
+        flex-shrink: 0;
+      }
+      .formula-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    @media (max-width: 480px) {
+      body {
+        padding: 10px 8px;
+      }
+      .title-area h1 {
+        font-size: 20px;
+        line-height: 1.3;
+      }
+      .header-meta {
+        grid-template-columns: 1fr;
+        padding: 10px;
+      }
+      .kpi-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+      }
+      .category-grid {
+        grid-template-columns: 1fr;
+      }
+      .kpi-card {
+        padding: 10px;
+      }
+      .kpi-label {
+        font-size: 10px;
+      }
+      .kpi-value {
+        font-size: 18px;
+      }
+      .section-card {
+        padding: 12px 10px;
+      }
+    }
+
+    .live-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 8px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      background: rgba(16, 185, 129, 0.15);
+      color: #34d399;
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      vertical-align: middle;
+    }
+    .live-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: #10b981;
+      box-shadow: 0 0 8px #10b981;
+      animation: livePulse 2s infinite ease-in-out;
+    }
+    .live-dot.paused {
+      background: #94a3b8;
+      box-shadow: none;
+      animation: none;
+    }
+    @keyframes livePulse {
+      0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+      70% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
+      100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+    }
+  </style>
+</head>
+<body>
+  <div class="dashboard-container">
+    <div class="header-bar">
+      <div class="title-area">
+        <h1>Kiku Agent Evaluation & Performance <span class="live-badge"><span class="live-dot" id="live-dot"></span><span id="live-status-text">LIVE AUTO-SYNC</span></span></h1>
+        <p>Real-time evaluation suite monitoring reasoning accuracy, tool invocation telemetry, trajectory loop health, and end-to-end latency breakdowns.</p>
+      </div>
+      <div class="header-meta">
+        <a href="/eval" style="text-decoration:none; display:inline-flex; align-items:center; gap:6px; background: linear-gradient(135deg, rgba(236,72,153,0.2), rgba(168,85,247,0.25)); border: 1px solid rgba(236,72,153,0.4); color: #f472b6; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; margin-right: 4px;" title="Open Workbench & AI Summary">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+          <span>Workbench &bull; AI Summary</span>
+        </a>
+        <div class="meta-tag">Model: <strong id="meta-model">${escapeHtml(metadata.model || 'Unknown')}</strong></div>
+        <div class="meta-tag">Planned Cases: <strong id="meta-planned">${metadata.caseIds?.length || summary.planned || rows.length}</strong></div>
+        <div class="meta-tag">Completed: <strong id="meta-completed">${summary.completed || 0}</strong></div>
+        <div class="meta-tag">Platform: <strong>${escapeHtml(metadata.platform || process.platform)}</strong></div>
+        <div class="meta-tag">Sync: <strong id="meta-sync-status">Real-time Stream</strong></div>
+      </div>
+    </div>
+
+    <div class="kpi-grid">
+      <div class="kpi-card">
+        <div class="kpi-label">Lexical Pass Rate</div>
+        <div class="kpi-value" id="kpi-pass-rate"><span id="val-pass-rate">${passRate}%</span> ${deltaBadge('lexicalCoverageRate')}</div>
+        <div class="kpi-sub" id="kpi-pass-sub">${summary.allFactsMatched || 0} of ${summary.coverageEligibleCompleted || 0} evaluated cases</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Tool Accuracy F1</div>
+        <div class="kpi-value" id="kpi-tool-rate"><span id="val-tool-rate">${toolRate}%</span> ${deltaBadge('toolAccuracyRate')}</div>
+        <div class="kpi-sub" id="kpi-tool-sub">Target tools selected & executed</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Trajectory Health</div>
+        <div class="kpi-value" id="kpi-loop-rate"><span id="val-loop-rate">${loopFreeRate}%</span> ${deltaBadge('loopFreeRate')}</div>
+        <div class="kpi-sub" id="kpi-loop-sub">Loop-free execution trajectories</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Groundedness Rate</div>
+        <div class="kpi-value" id="kpi-grounded-rate"><span id="val-grounded-rate">${groundedRate}%</span> ${deltaBadge('groundednessRate')}</div>
+        <div class="kpi-sub" id="kpi-grounded-sub">Facts backed by tool observations</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Latency (Median)</div>
+        <div class="kpi-value" id="kpi-latency-median"><span id="val-latency-median">${medianSec}s</span> ${deltaBadge('medianMs', false)}</div>
+        <div class="kpi-sub" id="kpi-latency-sub">P95: ${p95Sec}s | LLM: ${meanLlmSec}s | Tool: ${meanToolSec}s</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Throughput TPS</div>
+        <div class="kpi-value" id="kpi-tps"><span id="val-tps">${decodeTps}</span> ${deltaBadge('meanDecodeTps', false)}</div>
+        <div class="kpi-sub" id="kpi-tps-sub">Average decode tokens / second</div>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <div class="section-title">Agent Evaluation and Benchmark Dashboard (ISO-IEC 42001 and NIST AI RMF)</div>
+      <div class="table-wrap">
+        <table class="bench-table">
+          <thead><tr><th>Metric Dimension</th><th>Technical Indicator</th><th>Benchmark</th><th>Target</th><th>Observed</th><th>Status</th></tr></thead>
+          <tbody>${benchmarkTableRowsHtml}</tbody>
+        </table>
+      </div>
+      <div class="formula-grid">
+        <div class="formula-card"><strong>Task Success Rate Pass at k</strong><code>Pass at k = E[ 1 - C(n-c, k) over C(n, k) ]</code><div>n runs per task, c passing runs</div></div>
+        <div class="formula-card"><strong>Trajectory Step Optimality</strong><code>eta_traj = L* over max(L, L*)</code><div>L* shortest ground truth path, L actual steps</div></div>
+        <div class="formula-card"><strong>Grounded Faithfulness</strong><code>S_faith = sum I(Claim in K) over m</code><div>K retrieval context or tool output, m claims</div></div>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <div class="section-title">Trajectory vs Cost Pareto Frontier</div>
+      <div class="pareto-wrap">
+        <svg width="${paretoW}" height="${paretoH}" viewBox="0 0 ${paretoW} ${paretoH}">
+          <line x1="60" y1="270" x2="880" y2="270" class="pareto-axis"></line>
+          <line x1="60" y1="270" x2="60" y2="30" class="pareto-axis"></line>
+          <text x="430" y="295" class="svg-label">Cost per task (USD): 0.00 to 0.08</text>
+          <text x="8" y="150" class="svg-label">Success</text>
+          <text x="400" y="18" class="svg-label">Target Optimal Zone near 82 percent and low cost</text>
+          ${paretoDotsHtml}
+        </svg>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <div class="section-title">Failure Mode Distribution</div>
+      ${failureBarsHtml}
+    </div>
+
+
+
+    <div class="section-card">
+      <div class="section-title">Category Health & Coverage</div>
+      <div class="category-grid" id="categoryCardsContainer">
+        ${categoryCardsHtml}
+      </div>
+    </div>
+
+    ${languageCardsHtml ? `
+    <div class="section-card">
+      <div class="section-title">Multi-Lingual Breakdown & Performance</div>
+      <div class="category-grid" id="languageCardsContainer">
+        ${languageCardsHtml}
+      </div>
+    </div>` : ''}
+
+    <div class="section-card">
+      <div class="section-title">Latency Distribution & Inference Breakdown</div>
+      <div class="chart-legend">
+        <div class="legend-item">
+          <div class="legend-box" style="background: #818cf8;"></div>
+          <span>LLM Inference & Generation</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-box" style="background: #f43f5e;"></div>
+          <span>Tool Calling & I/O</span>
+        </div>
+      </div>
+      <div class="svg-scroll-wrap">
+        <svg width="${chartWidth}" height="${chartHeight}" viewBox="0 0 ${chartWidth} ${chartHeight}">
+          ${latencySvgBars}
+        </svg>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <div class="section-title">Case Inspection Matrix & Trajectory Explorer</div>
+      <div class="table-toolbar">
+        <div class="search-box">
+          <input type="text" id="searchInput" placeholder="Search by case ID, question, or tool name..." oninput="filterCases()">
+        </div>
+        <div class="filter-group">
+          <button class="filter-btn active" onclick="setFilter('all', this)">All Status</button>
+          <button class="filter-btn" onclick="setFilter('pass', this)">Passed</button>
+          <button class="filter-btn" onclick="setFilter('fail', this)">Failed / Partial</button>
+          <button class="filter-btn" onclick="setFilter('loops', this)">Loops</button>
+        </div>
+        <div class="filter-group">
+          <button class="filter-btn active" onclick="setLangFilter('all', this)" id="btn-lang-all">All Langs</button>
+          <button class="filter-btn" onclick="setLangFilter('th', this)">Thai (TH)</button>
+          <button class="filter-btn" onclick="setLangFilter('en', this)">English (EN)</button>
+          <button class="filter-btn" onclick="setLangFilter('zh', this)">Chinese (ZH)</button>
+        </div>
+      </div>
+
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 80px;">ID</th>
+              <th style="width: 120px;">Category</th>
+              <th style="width: 80px;">Lang</th>
+              <th>Question</th>
+              <th style="width: 130px;">Status</th>
+              <th style="width: 280px;">Tools Used</th>
+              <th style="width: 90px;">Latency</th>
+            </tr>
+          </thead>
+          <tbody id="caseTableBody">
+            ${tableRowsHtml}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let activeFilter = 'all';
+    let activeLang = 'all';
+
+    function escapeHtml(str) {
+      return String(str ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    function toggleDetails(idOrIdx) {
+      var id = typeof idOrIdx === 'number' ? ('row-detail-' + idOrIdx) : String(idOrIdx);
+      var el = document.getElementById(id);
+      if (!el) return;
+      el.style.display = el.style.display === 'none' ? 'table-row' : 'none';
+    }
+
+    function setFilter(type, btn) {
+      activeFilter = type;
+      document.querySelectorAll('[onclick^="setFilter"]').forEach(b => b.classList.remove('active'));
+      if (btn) btn.classList.add('active');
+      filterCases();
+    }
+
+    function setLangFilter(lang, btn) {
+      activeLang = lang;
+      document.querySelectorAll('[onclick^="setLangFilter"]').forEach(b => b.classList.remove('active'));
+      if (btn) btn.classList.add('active');
+      filterCases();
+    }
+
+    function filterCases() {
+      const query = (document.getElementById('searchInput')?.value || '').toLowerCase().trim();
+      const rows = document.querySelectorAll('.case-row');
+
+      rows.forEach((row, idx) => {
+        const text = row.textContent.toLowerCase();
+        const status = row.getAttribute('data-status');
+        const lang = (row.getAttribute('data-language') || '').toLowerCase();
+        const hasLoop = row.getAttribute('data-has-loop') === 'true';
+
+        let matchesFilter = true;
+        if (activeFilter === 'pass') matchesFilter = (status === 'pass');
+        else if (activeFilter === 'fail') matchesFilter = (status === 'fail');
+        else if (activeFilter === 'loops') matchesFilter = hasLoop;
+
+        const matchesLang = (activeLang === 'all' || lang === activeLang);
+        const matchesQuery = !query || text.includes(query);
+        const shouldShow = matchesFilter && matchesLang && matchesQuery;
+
+        row.style.display = shouldShow ? 'table-row' : 'none';
+        const detailRow = document.getElementById('row-detail-' + idx);
+        if (detailRow && !shouldShow) {
+          detailRow.style.display = 'none';
+        }
+      });
+    }
+
+    function renderCaseRow(r, idx) {
+      var isCompleted = r.status === 'completed';
+      var allMatched = r.coverage && r.coverage.allMatched;
+      var hasLoop = r.trajectoryHealth && r.trajectoryHealth.hasLoop;
+      var statusBadge = isCompleted
+        ? (allMatched ? '<span class="badge badge-success">PASS</span>' : '<span class="badge badge-warning">PARTIAL</span>')
+        : '<span class="badge badge-danger">ERROR</span>';
+
+      var toolsUsed = Array.isArray(r.trace)
+        ? Array.from(new Set(r.trace.filter(function(t) { return t.event === 'start'; }).map(function(t) { return t.name; })))
+        : [];
+      var toolsHtml = toolsUsed.length
+        ? toolsUsed.map(function(t) { return '<span class="tag-tool">' + escapeHtml(t) + '</span>'; }).join('')
+        : '<span class="tag-empty">None</span>';
+
+      var loopBadge = hasLoop ? '<span class="badge badge-loop">LOOP</span>' : '';
+      var durationStr = r.durationMs ? (r.durationMs / 1000).toFixed(2) + 's' : '-';
+
+      var matchedCount = (r.coverage && r.coverage.matched) || 0;
+      var totalCount = (r.coverage && r.coverage.total) || 0;
+      var missingFactsHtml = (r.coverage && r.coverage.missing && r.coverage.missing.length)
+        ? '<div class="missing-facts">[FAIL] Missing: ' + escapeHtml(JSON.stringify(r.coverage.missing)) + '</div>'
+        : '<div class="all-facts-ok">[OK] All target aliases identified</div>';
+
+      var llmMs = Math.round((r.latencyBreakdown && (r.latencyBreakdown.llmInferenceMs || r.latencyBreakdown.llmMs)) || 0);
+      var toolMs = Math.round((r.latencyBreakdown && (r.latencyBreakdown.toolExecutionMs || r.latencyBreakdown.toolMs)) || 0);
+      var llmPct = (r.latencyBreakdown && r.latencyBreakdown.llmPercentage) || 0;
+      var toolPct = (r.latencyBreakdown && r.latencyBreakdown.toolPercentage) || 0;
+
+      var traces = Array.isArray(r.trace) ? r.trace : [];
+      var tracesHtml = traces.map(function(t, stepIdx) {
+        var durationBadge = t.durationMs ? '<span class="trace-time">' + t.durationMs + 'ms</span>' : '';
+        var paramsHtml = t.parameters ? '<pre class="trace-json">Params: ' + escapeHtml(JSON.stringify(t.parameters, null, 2)) + '</pre>' : '';
+        var valStr = typeof t.value === 'object' ? JSON.stringify(t.value, null, 2) : String(t.value || '').slice(0, 300);
+        var valHtml = t.value ? '<pre class="trace-json trace-val">Output: ' + escapeHtml(valStr) + '</pre>' : '';
+        var msgHtml = t.message ? '<div class="trace-msg">' + escapeHtml(t.message) + '</div>' : '';
+        return '<div class="trace-event trace-' + escapeHtml(t.event) + '">'
+          + '<div class="trace-badge">' + (stepIdx + 1) + '. [' + escapeHtml((t.event || '').toUpperCase()) + '] ' + escapeHtml(t.name || '') + ' ' + durationBadge + '</div>'
+          + paramsHtml + valHtml + msgHtml
+          + '</div>';
+      }).join('');
+
+      var rowHtml = '<tr class="case-row" onclick="toggleDetails(' + idx + ')" id="row-' + idx + '" data-category="' + escapeHtml(r.category) + '" data-language="' + escapeHtml(r.language) + '" data-status="' + (allMatched ? 'pass' : 'fail') + '" data-has-loop="' + (hasLoop ? 'true' : 'false') + '">'
+        + '<td class="col-id"><strong>' + escapeHtml(r.id) + '</strong></td>'
+        + '<td><span class="badge badge-category">' + escapeHtml(r.category) + '</span></td>'
+        + '<td><span class="badge badge-lang">' + escapeHtml((r.language || '').toUpperCase()) + '</span></td>'
+        + '<td class="col-question" title="' + escapeHtml(r.question) + '">' + escapeHtml(r.question) + '</td>'
+        + '<td>' + statusBadge + ' ' + loopBadge + '</td>'
+        + '<td><div class="tool-tags-cell">' + toolsHtml + '</div></td>'
+        + '<td class="col-duration">' + durationStr + '</td>'
+        + '</tr>'
+        + '<tr class="detail-row" id="row-detail-' + idx + '" style="display: none;">'
+        + '<td colspan="7">'
+        + '<div class="detail-drawer">'
+        + '<div class="detail-grid">'
+        + '<div class="detail-pane">'
+        + '<h4>Reference &amp; Fact Matching</h4>'
+        + '<p><strong>Question:</strong> ' + escapeHtml(r.question) + '</p>'
+        + '<div class="fact-coverage-box"><strong>Matched Facts:</strong> ' + matchedCount + ' / ' + totalCount + missingFactsHtml + '</div>'
+        + '<h4 style="margin-top: 14px;">Latency &amp; Execution Breakdown</h4>'
+        + '<div class="latency-stat-row"><div>LLM Thought &amp; Gen: <strong>' + llmMs + 'ms</strong> (' + llmPct + '%)</div><div>Tool Execution: <strong>' + toolMs + 'ms</strong> (' + toolPct + '%)</div></div>'
+        + '<div class="dual-progress"><div class="dp-llm" style="width: ' + llmPct + '%"></div><div class="dp-tool" style="width: ' + toolPct + '%"></div></div>'
+        + '</div>'
+        + '<div class="detail-pane">'
+        + '<h4>Agent Final Response</h4>'
+        + '<div class="answer-box">' + escapeHtml(r.answer || r.error || 'No answer generated') + '</div>'
+        + '</div>'
+        + '</div>'
+        + '<h4 style="margin-top: 16px;">Full Trajectory Trace Events (' + traces.length + ' events)</h4>'
+        + '<div class="trace-timeline">' + tracesHtml + '</div>'
+        + '</div>'
+        + '</td>'
+        + '</tr>';
+      return rowHtml;
+    }
+
+    function renderCategoryCards(catStats) {
+      if (!catStats) return '';
+      var html = '';
+      var entries = Object.entries(catStats);
+      for (var i = 0; i < entries.length; i++) {
+        var cat = entries[i][0];
+        var data = entries[i][1];
+        var catPass = data.completed > 0 ? Math.round((data.factsMatched / data.completed) * 100) : 0;
+        var toolDenom = data.toolEligible != null ? data.toolEligible : data.completed;
+        var catTools = toolDenom > 0 ? Math.round((data.toolsCorrect / toolDenom) * 100) : 0;
+        html += '<div class="category-card">'
+          + '<div class="category-header"><span class="category-name">' + escapeHtml(cat.toUpperCase()) + '</span><span class="category-count">' + data.completed + '/' + data.total + ' cases</span></div>'
+          + '<div class="category-metrics">'
+          + '<div class="metric-row"><span>Lexical Pass:</span><strong>' + catPass + '%</strong></div>'
+          + '<div class="progress-bar"><div class="progress-fill" style="width: ' + catPass + '%"></div></div>'
+          + '<div class="metric-row"><span>Tool Accuracy:</span><strong>' + catTools + '%</strong></div>'
+          + '<div class="progress-bar progress-tool"><div class="progress-fill" style="width: ' + catTools + '%"></div></div>'
+          + '</div>'
+          + '</div>';
+      }
+      return html;
+    }
+
+    function applyLiveReport(rep) {
+      if (!rep) return;
+      var s = rep.summary || {};
+      var meta = rep.metadata || {};
+      var rows = Array.isArray(rep.rows) ? rep.rows : [];
+
+      var mModel = document.getElementById('meta-model');
+      if (mModel && meta.model) mModel.textContent = meta.model;
+      var mPlanned = document.getElementById('meta-planned');
+      if (mPlanned) mPlanned.textContent = (meta.caseIds && meta.caseIds.length) || s.planned || rows.length;
+      var mComp = document.getElementById('meta-completed');
+      if (mComp) mComp.textContent = s.completed != null ? s.completed : rows.length;
+
+      var completedCount = s.completed != null ? s.completed : rows.filter(function(r) { return r.status === 'completed'; }).length;
+      var passCount = s.allFactsMatched != null ? s.allFactsMatched : rows.filter(function(r) { return r.coverage && r.coverage.allMatched; }).length;
+      var coverageEligible = s.coverageEligibleCompleted != null ? s.coverageEligibleCompleted : completedCount;
+      var pRate = s.lexicalCoverageRate != null
+        ? Math.round(s.lexicalCoverageRate * 100)
+        : (coverageEligible > 0 ? Math.round((passCount / coverageEligible) * 100) : 0);
+
+      var tRate = s.toolAccuracyRate != null ? Math.round(s.toolAccuracyRate * 100) : 0;
+      var lRate = s.loopFreeRate != null ? Math.round(s.loopFreeRate * 100) : 100;
+      var gRate = s.groundednessRate != null ? Math.round(s.groundednessRate * 100) : 100;
+      var medSec = s.medianMs ? (s.medianMs / 1000).toFixed(2) : '-';
+      var p95 = s.p95Ms ? (s.p95Ms / 1000).toFixed(2) : '-';
+      var mLlm = s.meanLlmMs ? (s.meanLlmMs / 1000).toFixed(2) : '-';
+      var mTool = s.meanToolMs ? (s.meanToolMs / 1000).toFixed(2) : '-';
+      var tps = s.meanDecodeTps != null ? s.meanDecodeTps : '-';
+
+      var elPass = document.getElementById('val-pass-rate');
+      if (elPass) elPass.textContent = pRate + '%';
+      var elPassSub = document.getElementById('kpi-pass-sub');
+      if (elPassSub) elPassSub.textContent = passCount + ' of ' + coverageEligible + ' evaluated cases';
+
+      var elTool = document.getElementById('val-tool-rate');
+      if (elTool) elTool.textContent = tRate + '%';
+
+      var elLoop = document.getElementById('val-loop-rate');
+      if (elLoop) elLoop.textContent = lRate + '%';
+
+      var elGrounded = document.getElementById('val-grounded-rate');
+      if (elGrounded) elGrounded.textContent = gRate + '%';
+
+      var elLatency = document.getElementById('val-latency-median');
+      if (elLatency) elLatency.textContent = medSec + 's';
+      var elLatencySub = document.getElementById('kpi-latency-sub');
+      if (elLatencySub) elLatencySub.textContent = 'P95: ' + p95 + 's | LLM: ' + mLlm + 's | Tool: ' + mTool + 's';
+
+      var elTps = document.getElementById('val-tps');
+      if (elTps) elTps.textContent = tps;
+
+      if (s.categoryStats) {
+        var catBox = document.getElementById('categoryCardsContainer');
+        if (catBox) catBox.innerHTML = renderCategoryCards(s.categoryStats);
+      }
+
+      var tbody = document.getElementById('caseTableBody');
+      if (tbody && rows.length > 0) {
+        var openIds = new Set(Array.from(document.querySelectorAll('.detail-row')).filter(function(el) { return el.style.display !== 'none'; }).map(function(el) { return el.id; }));
+        tbody.innerHTML = rows.map(function(r, idx) { return renderCaseRow(r, idx); }).join('');
+        openIds.forEach(function(id) {
+          var el = document.getElementById(id);
+          if (el) el.style.display = 'table-row';
+        });
+        filterCases();
+      }
+    }
+
+    function initRealtimeStream() {
+      var isHttp = window.location.protocol.indexOf('http') === 0;
+      var apiHost = isHttp ? window.location.origin : 'http://localhost:3000';
+      var eventsUrl = apiHost + '/api/eval/events';
+      var statusUrl = apiHost + '/api/eval/status';
+      var sseConnected = false;
+
+      function updateStatus(text, ok) {
+        var el = document.getElementById('meta-sync-status');
+        var dot = document.getElementById('live-dot');
+        var txt = document.getElementById('live-status-text');
+        if (el) el.textContent = text;
+        if (txt) txt.textContent = ok ? 'LIVE STREAM' : 'AUTO-RETRYING';
+        if (dot) {
+          if (ok) dot.classList.remove('paused');
+          else dot.classList.add('paused');
+        }
+      }
+
+      function setupSSE() {
+        try {
+          var es = new EventSource(eventsUrl);
+          es.onopen = function() {
+            sseConnected = true;
+            updateStatus('Real-time Stream Connected', true);
+          };
+          es.addEventListener('sync_state', function(e) {
+            try {
+              var data = JSON.parse(e.data);
+              if (data.report) {
+                applyLiveReport(data.report);
+                updateStatus('Stream Active (' + new Date().toLocaleTimeString() + ')', true);
+              }
+            } catch (err) {}
+          });
+          es.addEventListener('live_file_update', function(e) {
+            try {
+              var data = JSON.parse(e.data);
+              if (data.report) {
+                applyLiveReport(data.report);
+                updateStatus('Stream Active (' + new Date().toLocaleTimeString() + ')', true);
+              }
+            } catch (err) {}
+          });
+          es.addEventListener('case_complete', function(e) {
+            try {
+              var data = JSON.parse(e.data);
+              if (data.report) {
+                applyLiveReport(data.report);
+                updateStatus('Stream Active (' + new Date().toLocaleTimeString() + ')', true);
+              }
+            } catch (err) {}
+          });
+          es.addEventListener('eval_complete', function(e) {
+            try {
+              var data = JSON.parse(e.data);
+              if (data.report) {
+                applyLiveReport(data.report);
+                updateStatus('Eval Complete (' + new Date().toLocaleTimeString() + ')', true);
+              }
+            } catch (err) {}
+          });
+          es.onerror = function() {
+            sseConnected = false;
+            updateStatus('Reconnecting...', false);
+            es.close();
+            setTimeout(setupSSE, 3000);
+          };
+        } catch (err) {
+          sseConnected = false;
+        }
+      }
+
+      function pollStatus() {
+        if (sseConnected) return;
+        fetch(statusUrl, { headers: { 'Accept': 'application/json' } })
+          .then(function(res) {
+            if (res.ok) return res.json();
+            throw new Error('HTTP ' + res.status);
+          })
+          .then(function(json) {
+            if (json.currentReport && Array.isArray(json.currentReport.rows)) {
+              applyLiveReport(json.currentReport);
+              updateStatus('Live Polling Active (' + new Date().toLocaleTimeString() + ')', true);
+            }
+          })
+          .catch(function() {
+            updateStatus('Waiting for Server...', false);
+          });
+      }
+
+      setupSSE();
+      setInterval(pollStatus, 2000);
+    }
+
+    initRealtimeStream();
+  </script>
+</body>
+</html>`;
+}
+
+export async function writeDashboardReport(report, outputPath, compareReport = null) {
+  const html = generateDashboardHtml(report, compareReport);
+  await fs.mkdir(path.dirname(outputPath), { recursive: true });
+  await fs.writeFile(outputPath, html, 'utf8');
+  return outputPath;
+}
+
+if (process.argv[1] && fileURLToPath(import.meta.url) === path.resolve(process.argv[1])) {
+  const { values: args } = parseArgs({ options: {
+    in: { type: 'string', default: 'artifacts/eval/live.json' },
+    out: { type: 'string', default: 'artifacts/eval/dashboard.html' },
+    compare: { type: 'string' }
+  } });
+
+  const inPath = path.resolve(REPO_ROOT, args.in);
+  const outPath = path.resolve(REPO_ROOT, args.out);
+
+  try {
+    const raw = await fs.readFile(inPath, 'utf8');
+    const report = JSON.parse(raw);
+    let compareReport = null;
+    if (args.compare) {
+      const compRaw = await fs.readFile(path.resolve(REPO_ROOT, args.compare), 'utf8');
+      compareReport = JSON.parse(compRaw);
+    }
+    await writeDashboardReport(report, outPath, compareReport);
+  } catch (err) {
+    console.error(`Failed to generate dashboard: ${err.message}`);
+    process.exit(1);
+  }
+}