@fede0089/skill-eval 1.2.2 → 1.3.0

package/dist/reporters/html-reporter.js

@@ -87,38 +87,62 @@ function renderMetricsGrid(report) {
 </div>`;
 }
 // ---------------------------------------------------------------------------
-// Trial details
+// Expectations × Variants table (per-task drill-down)
 // ---------------------------------------------------------------------------
-function renderAssertions(assertions) {
-    if (assertions.length === 0)
-        return '<p class="muted">No assertions recorded.</p>';
-    return assertions.map(a => {
-        const icon = a.passed ? '✓' : '✗';
-        const cls = a.passed ? 'assert-pass' : 'assert-fail';
-        return `<div class="assertion ${cls}">
-  <span class="assert-icon">${icon}</span>
-  <div class="assert-body">
-    <div class="assert-text">${escapeHtml(a.assertion)}</div>
-    ${a.reason ? `<div class="assert-reason">${escapeHtml(a.reason)}</div>` : ''}
-  </div>
-</div>`;
+function renderExpectationCell(trials, expIdx, variant, taskId, clickable, totalCols) {
+    const passed = trials.filter(t => t.assertionResults[expIdx]?.passed).length;
+    const total = trials.length;
+    const rate = total > 0 ? passed / total : 0;
+    const colorCls = passColorClass(rate);
+    const ratePct = formatPercent(rate);
+    const frac = `${passed} / ${total}`;
+    const detailId = `exp-detail-${taskId}-${expIdx}-${variant}`;
+    const dataAttr = clickable ? ` data-detail="${escapeHtml(detailId)}"` : '';
+    const cell = `<td class="pass-cell ${colorCls}"${dataAttr}><span class="rate">${ratePct}</span><span class="frac">${frac}</span></td>`;
+    if (!clickable)
+        return { cell, detail: '' };
+    const lines = trials.map(t => {
+        const r = t.assertionResults[expIdx];
+        const ok = !!r?.passed;
+        const reason = r?.reason ?? '';
+        const icon = ok ? '✓' : '✗';
+        const iconCls = ok ? 'pass' : 'fail';
+        return `<div class="exp-trial-line"><div class="exp-trial-icon ${iconCls}">${icon}</div><div class="exp-trial-body"><span class="trial-label">Trial ${t.id}</span><span class="trial-reason">${escapeHtml(reason)}</span></div></div>`;
     }).join('');
+    const detail = `<tr class="exp-detail-row" id="${escapeHtml(detailId)}"><td colspan="${totalCols}"><div class="exp-detail-inner"><div class="exp-detail-header">Judge per trial · <span class="variant-pill">${escapeHtml(variant)}</span></div>${lines}</div></td></tr>`;
+    return { cell, detail };
 }
-function renderTrial(trial) {
-    const passedCount = trial.assertionResults.filter(r => r.passed).length;
-    const totalCount = trial.assertionResults.length;
-    const isPartial = !trial.trialPassed && !trial.isError && passedCount > 0;
-    const cls = trial.isError ? 'trial-error' : trial.trialPassed ? 'trial-pass' : isPartial ? 'trial-partial' : 'trial-fail';
-    const badge = trial.isError
-        ? '<span class="pill amber">! ERROR</span>'
-        : trial.trialPassed
-            ? '<span class="pill green">✓ PASS</span>'
-            : isPartial
-                ? `<span class="pill amber">~ PARTIAL ${passedCount}/${totalCount}</span>`
-                : '<span class="pill red">✗ NOT PASSED</span>';
-    return `<div class="trial ${cls}">
-  <div class="trial-header">Trial ${trial.id} ${badge}</div>
-  <div class="trial-assertions">${renderAssertions(trial.assertionResults)}</div>
+function renderExpectationsTable(result, allVersions, isFunctionalEval) {
+    let canonical = [];
+    for (const v of allVersions) {
+        const trials = v === 'baseline' ? result.baselineTrials : result.skillTrials[v];
+        if (trials && trials.length > 0 && trials[0].assertionResults.length > 0) {
+            canonical = trials[0].assertionResults;
+            break;
+        }
+    }
+    if (canonical.length === 0) {
+        return '<p class="muted">No assertions recorded.</p>';
+    }
+    const totalCols = 1 + allVersions.length;
+    const headerCells = allVersions.map(v => `<th class="variant-col">${escapeHtml(v)}</th>`).join('');
+    const rows = canonical.map((a, expIdx) => {
+        const cells = [];
+        const details = [];
+        for (const v of allVersions) {
+            const trials = v === 'baseline' ? result.baselineTrials : result.skillTrials[v];
+            const { cell, detail } = renderExpectationCell(trials, expIdx, v, result.taskId, isFunctionalEval, totalCols);
+            cells.push(cell);
+            if (detail)
+                details.push(detail);
+        }
+        return `<tr class="exp-row"><td class="exp-text">${escapeHtml(a.assertion)}</td>${cells.join('')}</tr>${details.join('')}`;
+    }).join('');
+    return `<div class="expectations-table-wrap">
+  <table class="expectations-table">
+    <thead><tr><th class="exp-col">Expectation</th>${headerCells}</tr></thead>
+    <tbody>${rows}</tbody>
+  </table>
 </div>`;
 }
 function avgTrialTokens(trials) {
@@ -175,16 +199,11 @@ function renderTaskMiniGrid(result, isFunctionalEval) {
 </div>`;
 }
 function renderTaskDetails(result, isFunctionalEval) {
+    const skillVersions = Object.keys(result.skillTrials);
+    const allVersions = isFunctionalEval ? ['baseline', ...skillVersions] : skillVersions;
     const sections = [];
     sections.push(renderTaskMiniGrid(result, isFunctionalEval));
-    if (isFunctionalEval && result.baselineTrials && result.baselineTrials.length > 0) {
-        sections.push('<div class="trial-group-label">Baseline</div>');
-        sections.push(...result.baselineTrials.map(t => renderTrial(t)));
-    }
-    for (const version of Object.keys(result.skillTrials)) {
-        sections.push(`<div class="trial-group-label">${version}</div>`);
-        sections.push(...result.skillTrials[version].map(t => renderTrial(t)));
-    }
+    sections.push(renderExpectationsTable(result, allVersions, isFunctionalEval));
     return `<div class="task-details" id="details-${result.taskId}">${sections.join('')}</div>`;
 }
 // ---------------------------------------------------------------------------
@@ -281,31 +300,42 @@ tr:last-child td { border-bottom: none; }
 .details-row > td { padding: 0; background: #f8fafc; }
 .task-details { display: none; padding: 12px 16px; }
 .task-details.visible { display: block; }
-.trial-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; margin: 8px 0 4px; }
 
-/* Trials */
-.trial { border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
-.trial-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 500; font-size: 13px; background: #f8fafc; }
-.trial-pass    .trial-header { border-left: 3px solid #22c55e; }
-.trial-partial .trial-header { border-left: 3px solid #f59e0b; }
-.trial-fail    .trial-header { border-left: 3px solid #ef4444; }
-.trial-error   .trial-header { border-left: 3px solid #f59e0b; }
-.trial-assertions { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
+/* Expectations × Variants table */
+.expectations-table-wrap { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #fff; }
+.expectations-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.expectations-table thead th { background: #f1f5f9; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #475569; padding: 10px 14px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+.expectations-table thead th.exp-col { width: auto; }
+.expectations-table thead th.variant-col { width: 110px; text-align: center; }
+.expectations-table tbody td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 13px; }
+.expectations-table tbody tr.exp-row:last-of-type > td { border-bottom: none; }
+.exp-text { color: #1e293b; line-height: 1.4; word-break: break-word; }
 
-/* Pills */
-.pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; letter-spacing: 0.05em; }
-.pill.green { background: #dcfce7; color: #15803d; }
-.pill.red   { background: #fee2e2; color: #b91c1c; }
-.pill.amber { background: #fef3c7; color: #92400e; }
+.pass-cell { text-align: center; border-left: 1px solid #f1f5f9; }
+.pass-cell[data-detail] { cursor: pointer; user-select: none; transition: background 0.12s; }
+.pass-cell[data-detail]:hover { background: #f1f5f9; }
+.pass-cell.open { background: #e0f2fe; }
+.pass-cell .rate { display: block; font-size: 13px; font-weight: 700; line-height: 1.1; }
+.pass-cell .frac { display: block; font-size: 10px; font-weight: 600; color: #94a3b8; margin-top: 2px; letter-spacing: 0.03em; }
+.pass-cell.green .rate { color: #16a34a; }
+.pass-cell.amber .rate { color: #d97706; }
+.pass-cell.red   .rate { color: #dc2626; }
+
+.exp-detail-row { display: none; }
+.exp-detail-row.visible { display: table-row; }
+.exp-detail-row > td { padding: 0; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
+.exp-detail-inner { padding: 12px 14px 14px; border-left: 3px solid #3b82f6; }
+.exp-detail-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 8px; }
+.exp-detail-header .variant-pill { display: inline-block; background: #e0f2fe; color: #0369a1; padding: 1px 7px; border-radius: 4px; margin-left: 4px; font-weight: 700; }
+.exp-trial-line { display: flex; gap: 8px; padding: 6px 0; border-top: 1px dashed #e2e8f0; }
+.exp-trial-line:first-of-type { border-top: none; }
+.exp-trial-icon { flex-shrink: 0; font-size: 13px; font-weight: 700; line-height: 1.4; width: 16px; }
+.exp-trial-icon.pass { color: #16a34a; }
+.exp-trial-icon.fail { color: #dc2626; }
+.exp-trial-body { flex: 1; min-width: 0; font-size: 12px; color: #334155; line-height: 1.45; }
+.exp-trial-body .trial-label { font-weight: 700; color: #475569; margin-right: 4px; }
+.exp-trial-body .trial-reason { color: #64748b; }
 
-/* Assertions */
-.assertion { display: flex; gap: 8px; }
-.assert-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
-.assert-pass .assert-icon { color: #16a34a; }
-.assert-fail .assert-icon { color: #dc2626; }
-.assert-body { flex: 1; min-width: 0; }
-.assert-text { font-size: 13px; color: #1e293b; word-break: break-word; }
-.assert-reason { font-size: 12px; color: #64748b; margin-top: 2px; word-break: break-word; }
 .muted { color: #94a3b8; font-size: 13px; }
 </style>
 </head>
@@ -345,6 +375,16 @@ tr:last-child td { border-bottom: none; }
       btn.textContent = isOpen ? '▶' : '▼';
     });
   });
+
+  document.querySelectorAll('.pass-cell[data-detail]').forEach(function (cell) {
+    cell.addEventListener('click', function () {
+      const detailRow = document.getElementById(cell.getAttribute('data-detail'));
+      if (!detailRow) return;
+      const isOpen = detailRow.classList.contains('visible');
+      detailRow.classList.toggle('visible', !isOpen);
+      cell.classList.toggle('open', !isOpen);
+    });
+  });
 }());
 </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fede0089/skill-eval",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "CLI to evaluate agent skills triggering",
   "main": "dist/index.js",
   "bin": {