npm - astron-eval - Versions diffs - 0.0.1 - Mend

astron-eval 0.0.1

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 (96) hide show

package/skills/skill-driven-eval/eval-viewer/viewer.html ADDED Viewed

@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Model Comparison Report</title>
+  <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=Poppins:wght@500;600&family=Lora:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #faf9f5;
+      --surface: #ffffff;
+      --border: #e8e6dc;
+      --text: #141413;
+      --text-muted: #b0aea5;
+      --accent: #d97757;
+      --accent-hover: #c4613f;
+      --green: #788c5d;
+      --green-bg: #eef2e8;
+      --red: #c44;
+      --red-bg: #fceaea;
+      --header-bg: #141413;
+      --header-text: #faf9f5;
+      --radius: 6px;
+      --opus-color: #1976d2;
+      --opus-bg: rgba(25, 118, 210, 0.1);
+      --sonnet-color: #f57f17;
+      --sonnet-bg: rgba(245, 127, 23, 0.1);
+      --haiku-color: #2e7d32;
+      --haiku-bg: rgba(46, 125, 50, 0.1);
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Lora', Georgia, serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+    /* ---- Header ---- */
+    .header {
+      background: var(--header-bg);
+      color: var(--header-text);
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .header h1 {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+    .header .metadata {
+      font-size: 0.8rem;
+      opacity: 0.7;
+      margin-top: 0.25rem;
+    }
+    .header .note {
+      font-size: 0.75rem;
+      opacity: 0.6;
+      font-style: italic;
+      margin-top: 0.5rem;
+    }
+    /* ---- Main content ---- */
+    .main {
+      padding: 1.5rem 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    /* ---- Sections ---- */
+    .section {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      margin-bottom: 1.5rem;
+    }
+    .section-header {
+      font-family: 'Poppins', sans-serif;
+      padding: 0.75rem 1rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      border-bottom: 1px solid var(--border);
+      background: var(--bg);
+    }
+    .section-body {
+      padding: 1rem;
+    }
+    /* ---- Model badge ---- */
+    .model-badge {
+      display: inline-block;
+      padding: 0.2rem 0.625rem;
+      border-radius: 9999px;
+      font-family: 'Poppins', sans-serif;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      margin-left: 0.5rem;
+      vertical-align: middle;
+    }
+    .model-badge.model-opus { background: var(--opus-bg); color: var(--opus-color); }
+    .model-badge.model-sonnet { background: var(--sonnet-bg); color: var(--sonnet-color); }
+    .model-badge.model-haiku { background: var(--haiku-bg); color: var(--haiku-color); }
+    /* ---- Summary Table ---- */
+    .summary-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+    }
+    .summary-table th, .summary-table td {
+      padding: 0.75rem 1rem;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .summary-table th {
+      font-family: 'Poppins', sans-serif;
+      font-weight: 500;
+      background: var(--bg);
+    }
+    .summary-table tr:last-child td {
+      border-bottom: none;
+    }
+    .summary-table .metric-label {
+      font-weight: 600;
+    }
+    .summary-table .positive { color: var(--green); font-weight: 600; }
+    .summary-table .negative { color: var(--red); font-weight: 600; }
+    /* ---- Per-eval grid ---- */
+    .eval-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 1rem;
+    }
+    .eval-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+    .eval-card-header {
+      background: var(--bg);
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border);
+      font-family: 'Poppins', sans-serif;
+      font-weight: 500;
+      font-size: 0.875rem;
+    }
+    .eval-card-body {
+      padding: 1rem;
+    }
+    .model-result {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .model-result:last-child {
+      border-bottom: none;
+    }
+    .model-result .model-name {
+      display: flex;
+      align-items: center;
+    }
+    .model-result .stats {
+      display: flex;
+      gap: 1rem;
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+    .model-result .pass-rate {
+      font-weight: 600;
+    }
+    .model-result .pass-rate.high { color: var(--green); }
+    .model-result .pass-rate.medium { color: var(--sonnet-color); }
+    .model-result .pass-rate.low { color: var(--red); }
+    /* ---- Assertions ---- */
+    .assertion-list {
+      list-style: none;
+      font-size: 0.8125rem;
+    }
+    .assertion-item {
+      padding: 0.5rem 0;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+    .assertion-item:last-child { border-bottom: none; }
+    .assertion-status {
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .assertion-status.pass { color: var(--green); }
+    .assertion-status.fail { color: var(--red); }
+    .assertion-evidence {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      margin-top: 0.25rem;
+      padding-left: 1.5rem;
+    }
+    /* ---- Recommendations ---- */
+    .recommendation {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1rem;
+      margin-bottom: 0.75rem;
+    }
+    .recommendation .scenario {
+      font-family: 'Poppins', sans-serif;
+      font-weight: 600;
+      font-size: 0.875rem;
+      margin-bottom: 0.25rem;
+    }
+    .recommendation .model {
+      display: inline-block;
+      padding: 0.125rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-right: 0.5rem;
+    }
+    .recommendation .reason {
+      font-size: 0.8125rem;
+      color: var(--text-muted);
+    }
+    /* ---- Notes ---- */
+    .notes-list {
+      list-style: disc;
+      padding-left: 1.25rem;
+      font-size: 0.875rem;
+    }
+    .notes-list li {
+      margin-bottom: 0.5rem;
+      line-height: 1.5;
+    }
+    /* ---- View tabs ---- */
+    .view-tabs {
+      display: flex;
+      gap: 0;
+      padding: 0 2rem;
+      background: var(--bg);
+      border-bottom: 1px solid var(--border);
+    }
+    .view-tab {
+      font-family: 'Poppins', sans-serif;
+      padding: 0.625rem 1.25rem;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      background: none;
+      color: var(--text-muted);
+      border-bottom: 2px solid transparent;
+      transition: all 0.15s;
+    }
+    .view-tab:hover { color: var(--text); }
+    .view-tab.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+    .view-panel { display: none; }
+    .view-panel.active { display: block; }
+    /* ---- Output files ---- */
+    .output-file {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      margin-top: 1rem;
+    }
+    .output-file-header {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.8rem;
+      font-weight: 600;
+      color: var(--text-muted);
+      background: var(--bg);
+      border-bottom: 1px solid var(--border);
+      font-family: 'SF Mono', monospace;
+    }
+    .output-file-content {
+      padding: 0.75rem;
+      overflow-x: auto;
+    }
+    .output-file-content pre {
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: 'SF Mono', monospace;
+    }
+    .output-file-content img {
+      max-width: 100%;
+      border-radius: 4px;
+    }
+    /* ---- Collapsible ---- */
+    .collapsible-toggle {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+    }
+    .collapsible-toggle:hover {
+      color: var(--accent);
+    }
+    .collapsible-toggle .arrow {
+      margin-right: 0.5rem;
+      transition: transform 0.15s;
+      font-size: 0.75rem;
+    }
+    .collapsible-toggle .arrow.open {
+      transform: rotate(90deg);
+    }
+    .collapsible-content {
+      display: none;
+    }
+    .collapsible-content.open {
+      display: block;
+    }
+    /* ---- Empty state ---- */
+    .empty-state {
+      color: var(--text-muted);
+      font-style: italic;
+      text-align: center;
+      padding: 2rem;
+    }
+    /* ---- Run details ---- */
+    .run-details {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      margin-bottom: 1rem;
+      overflow: hidden;
+    }
+    .run-header {
+      background: var(--bg);
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .run-header .run-title {
+      font-family: 'Poppins', sans-serif;
+      font-weight: 500;
+    }
+    .run-body {
+      padding: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="header">
+      <div>
+        <h1>Model Comparison: <span id="skill-name"></span></h1>
+        <div class="metadata" id="metadata"></div>
+        <div class="note" id="blind-note"></div>
+      </div>
+    </div>
+    <!-- View tabs -->
+    <div class="view-tabs">
+      <button class="view-tab active" onclick="switchView('summary')">Summary</button>
+      <button class="view-tab" onclick="switchView('details')">Details</button>
+    </div>
+    <!-- Summary panel -->
+    <div class="view-panel active" id="panel-summary">
+      <div class="main">
+        <!-- Benchmark summary -->
+        <div class="section" id="benchmark-section">
+          <div class="section-header">Model Performance Comparison</div>
+          <div class="section-body" id="benchmark-body">
+            <div class="empty-state">No benchmark data available</div>
+          </div>
+        </div>
+        <!-- Recommendations -->
+        <div class="section" id="recommendations-section" style="display:none;">
+          <div class="section-header">Recommendations</div>
+          <div class="section-body" id="recommendations-body"></div>
+        </div>
+        <!-- Notes -->
+        <div class="section" id="notes-section" style="display:none;">
+          <div class="section-header">Analysis Notes</div>
+          <div class="section-body">
+            <ul class="notes-list" id="notes-list"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Details panel -->
+    <div class="view-panel" id="panel-details">
+      <div class="main">
+        <!-- Per-eval breakdown -->
+        <div class="section">
+          <div class="section-header">Per-Eval Breakdown</div>
+          <div class="section-body">
+            <div class="eval-grid" id="eval-grid"></div>
+          </div>
+        </div>
+        <!-- All runs with outputs -->
+        <div class="section" id="all-runs-section">
+          <div class="section-header">All Runs</div>
+          <div class="section-body" id="all-runs-body"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // ---- Embedded data (injected by generate_report.py) ----
+    /*__EMBEDDED_DATA__*/
+    // ---- Init ----
+    function init() {
+      document.getElementById("skill-name").textContent = EMBEDDED_DATA.skill_name || "Unknown";
+      // Render metadata
+      if (EMBEDDED_DATA.benchmark && EMBEDDED_DATA.benchmark.metadata) {
+        const m = EMBEDDED_DATA.benchmark.metadata;
+        const metaText = [];
+        if (m.models_compared) metaText.push("Models: " + m.models_compared.join(", "));
+        if (m.evals_run) metaText.push("Evals: " + m.evals_run.join(", "));
+        if (m.timestamp) metaText.push("Date: " + m.timestamp);
+        document.getElementById("metadata").textContent = metaText.join(" | ");
+        if (m.note) {
+          document.getElementById("blind-note").textContent = m.note;
+        }
+      }
+      renderBenchmark();
+      renderRecommendations();
+      renderNotes();
+      renderEvalGrid();
+      renderAllRuns();
+    }
+    // ---- View switching ----
+    function switchView(view) {
+      document.querySelectorAll(".view-tab").forEach(t => t.classList.remove("active"));
+      document.querySelectorAll(".view-panel").forEach(p => p.classList.remove("active"));
+      document.querySelector(`[onclick="switchView('${view}')"]`).classList.add("active");
+      document.getElementById("panel-" + view).classList.add("active");
+    }
+    // ---- Safe number formatting ----
+    function safeToFixed(val, decimals, suffix) {
+      if (val === undefined || val === null || isNaN(val)) return "—";
+      suffix = suffix || "";
+      return val.toFixed(decimals) + suffix;
+    }
+    function safePercent(val) {
+      if (val === undefined || val === null || isNaN(val)) return "—";
+      return (val * 100).toFixed(0) + "%";
+    }
+    // ---- Render benchmark summary ----
+    function renderBenchmark() {
+      const b = EMBEDDED_DATA.benchmark;
+      if (!b || !b.model_summary) return;
+      const summary = b.model_summary;
+      const models = Object.keys(summary);
+      if (models.length === 0) return;
+      let html = '<table class="summary-table">';
+      html += "<thead><tr><th>Metric</th>";
+      for (const m of models) {
+        const label = m.charAt(0).toUpperCase() + m.slice(1);
+        html += `<th>${label}</th>`;
+      }
+      html += "<th>Comparison</th></tr></thead><tbody>";
+      // Pass rate
+      html += '<tr><td class="metric-label">Pass Rate</td>';
+      let prValues = [];
+      for (const m of models) {
+        const pr = (summary[m].pass_rate || {}).mean;
+        const stddev = (summary[m].pass_rate || {}).stddev || 0;
+        if (pr !== undefined && pr !== null) prValues.push(pr);
+        html += `<td>${safePercent(pr)} ± ${safePercent(stddev)}</td>`;
+      }
+      html += `<td>${renderComparison(prValues, true)}</td></tr>`;
+      // Time
+      html += '<tr><td class="metric-label">Time (seconds)</td>';
+      let timeValues = [];
+      for (const m of models) {
+        const t = (summary[m].time_seconds || {}).mean;
+        if (t !== undefined && t !== null) timeValues.push(t);
+        html += `<td>${safeToFixed(t, 1, "s")}</td>`;
+      }
+      html += `<td>${renderComparison(timeValues, false, true)}</td></tr>`;
+      // Tokens
+      html += '<tr><td class="metric-label">Tokens</td>';
+      let tokenValues = [];
+      for (const m of models) {
+        const tk = (summary[m].tokens || {}).mean;
+        if (tk !== undefined && tk !== null) tokenValues.push(tk);
+        html += `<td>${safeToFixed(tk, 0, "")}</td>`;
+      }
+      html += `<td>${renderComparison(tokenValues, false, true)}</td></tr>`;
+      // Cost efficiency
+      if (b.comparison && b.comparison.cost_efficiency) {
+        html += '<tr><td class="metric-label">Cost Efficiency</td>';
+        const ce = b.comparison.cost_efficiency;
+        for (const m of models) {
+          html += `<td>${ce[m] || "—"}</td>`;
+        }
+        html += "<td>Higher is better</td></tr>";
+      }
+      html += "</tbody></table>";
+      document.getElementById("benchmark-body").innerHTML = html;
+    }
+    function renderComparison(values, higherIsBetter, lowerIsBetter) {
+      if (!values || values.length < 2) return "—";
+      if (values[1] === 0) return "—";
+      const diff = values[0] - values[1];
+      const pct = ((diff / values[1]) * 100).toFixed(0);
+      const isPositive = higherIsBetter ? diff > 0 : (lowerIsBetter ? diff < 0 : diff > 0);
+      const cls = isPositive ? "positive" : "negative";
+      const sign = diff > 0 ? "+" : "";
+      return `<span class="${cls}">${sign}${pct}%</span>`;
+    }
+    // ---- Render recommendations ----
+    function renderRecommendations() {
+      const b = EMBEDDED_DATA.benchmark;
+      if (!b || !b.recommendations || b.recommendations.length === 0) return;
+      const section = document.getElementById("recommendations-section");
+      const body = document.getElementById("recommendations-body");
+      let html = '<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem;">These recommendations are derived from actual evaluation results, not pre-conceived assumptions.</p>';
+      for (const rec of b.recommendations) {
+        const modelClass = "model-" + rec.recommended_model;
+        html += `<div class="recommendation">`;
+        html += `<div class="scenario">${rec.scenario}</div>`;
+        html += `<span class="model ${modelClass}">${rec.recommended_model.toUpperCase()}</span>`;
+        html += `<span class="reason">${rec.reason}</span>`;
+        html += `</div>`;
+      }
+      body.innerHTML = html;
+      section.style.display = "block";
+    }
+    // ---- Render notes ----
+    function renderNotes() {
+      const b = EMBEDDED_DATA.benchmark;
+      if (!b || !b.notes || b.notes.length === 0) return;
+      const section = document.getElementById("notes-section");
+      const list = document.getElementById("notes-list");
+      let html = "";
+      for (const note of b.notes) {
+        html += `<li>${escapeHtml(note)}</li>`;
+      }
+      list.innerHTML = html;
+      section.style.display = "block";
+    }
+    // ---- Render per-eval grid ----
+    function renderEvalGrid() {
+      const b = EMBEDDED_DATA.benchmark;
+      const runs = b ? b.runs : EMBEDDED_DATA.runs;
+      if (!runs || runs.length === 0) {
+        document.getElementById("eval-grid").innerHTML = '<div class="empty-state">No eval runs found</div>';
+        return;
+      }
+      // Group by eval_id
+      const evalGroups = {};
+      for (const run of runs) {
+        const key = run.eval_id != null ? run.eval_id : 0;
+        if (!evalGroups[key]) {
+          evalGroups[key] = { eval_id: key, eval_name: run.eval_name || `Eval ${key}`, runs: [] };
+        }
+        evalGroups[key].runs.push(run);
+      }
+      let html = "";
+      for (const key of Object.keys(evalGroups).sort((a, b) => a - b)) {
+        const group = evalGroups[key];
+        html += `<div class="eval-card">`;
+        html += `<div class="eval-card-header">${group.eval_name}</div>`;
+        html += `<div class="eval-card-body">`;
+        // Sort runs by model
+        group.runs.sort((a, b) => (a.model || "").localeCompare(b.model || ""));
+        for (const run of group.runs) {
+          const model = run.model || "unknown";
+          const result = run.result || {};
+          const grading = run.grading || {};
+          const summary = grading.summary || {};
+          const pr = result.pass_rate != null ? result.pass_rate : (summary.pass_rate || 0);
+          const prClass = pr >= 0.8 ? "high" : pr >= 0.5 ? "medium" : "low";
+          html += `<div class="model-result">`;
+          html += `<div class="model-name">`;
+          html += `<span class="model-badge model-${model}">${model}</span>`;
+          html += `</div>`;
+          html += `<div class="stats">`;
+          html += `<span class="pass-rate ${prClass}">${safePercent(pr)}</span>`;
+          if (result.time_seconds != null) {
+            html += `<span>${result.time_seconds.toFixed(1)}s</span>`;
+          }
+          if (result.tokens != null) {
+            html += `<span>${result.tokens} tok</span>`;
+          }
+          html += `</div>`;
+          html += `</div>`;
+        }
+        html += `</div></div>`;
+      }
+      document.getElementById("eval-grid").innerHTML = html;
+    }
+    // ---- Render all runs ----
+    function renderAllRuns() {
+      const runs = EMBEDDED_DATA.runs;
+      if (!runs || runs.length === 0) {
+        document.getElementById("all-runs-body").innerHTML = '<div class="empty-state">No runs found</div>';
+        return;
+      }
+      let html = "";
+      for (const run of runs) {
+        const model = run.model || "unknown";
+        const grading = run.grading || {};
+        const summary = grading.summary || {};
+        html += `<div class="run-details">`;
+        html += `<div class="run-header">`;
+        html += `<span class="run-title">Run: ${run.id || run.run_id || "unknown"}</span>`;
+        html += `<span class="model-badge model-${model}">${model}</span>`;
+        html += `</div>`;
+        html += `<div class="run-body">`;
+        // Prompt
+        html += `<p style="margin-bottom: 0.5rem;"><strong>Prompt:</strong> ${escapeHtml(run.prompt || "N/A")}</p>`;
+        // Pass rate
+        if (summary.pass_rate != null) {
+          const prClass = summary.pass_rate >= 0.8 ? "high" : summary.pass_rate >= 0.5 ? "medium" : "low";
+          const total = summary.total || summary.total_expectations || 0;
+          html += `<p style="font-size: 0.9rem;">Pass Rate: <span class="pass-rate ${prClass}" style="font-weight: 600;">${safePercent(summary.pass_rate)}</span> (${summary.passed || 0}/${total})</p>`;
+        }
+        // Timing
+        if (run.timing) {
+          html += `<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem;">`;
+          if (run.timing.total_tokens) html += `Tokens: ${run.timing.total_tokens} | `;
+          if (run.timing.total_duration_seconds) html += `Time: ${run.timing.total_duration_seconds.toFixed(1)}s`;
+          html += `</p>`;
+        }
+        // Assertions (collapsible)
+        if (grading.expectations && grading.expectations.length > 0) {
+          const assertTotal = summary.total || summary.total_expectations || grading.expectations.length;
+          html += `<div class="collapsible-toggle" onclick="toggleCollapsible(this)" style="margin-top: 1rem;">`;
+          html += `<span class="arrow">&#9654;</span> Assertions (${summary.passed || 0}/${assertTotal})`;
+          html += `</div>`;
+          html += `<div class="collapsible-content">`;
+          html += `<ul class="assertion-list">`;
+          for (const exp of grading.expectations) {
+            const statusClass = exp.passed ? "pass" : "fail";
+            const statusIcon = exp.passed ? "✓" : "✗";
+            const expText = exp.text || exp.description || "";
+            html += `<li class="assertion-item">`;
+            html += `<span class="assertion-status ${statusClass}">${statusIcon}</span>`;
+            html += `<span>${escapeHtml(expText)}</span>`;
+            if (exp.evidence) {
+              html += `<div class="assertion-evidence">${escapeHtml(exp.evidence)}</div>`;
+            }
+            html += `</li>`;
+          }
+          html += `</ul></div>`;
+        }
+        // Outputs (collapsible)
+        if (run.outputs && run.outputs.length > 0) {
+          html += `<div class="collapsible-toggle" onclick="toggleCollapsible(this)" style="margin-top: 0.5rem;">`;
+          html += `<span class="arrow">&#9654;</span> Outputs (${run.outputs.length} files)`;
+          html += `</div>`;
+          html += `<div class="collapsible-content">`;
+          for (const file of run.outputs) {
+            html += `<div class="output-file">`;
+            html += `<div class="output-file-header">${escapeHtml(file.name)}</div>`;
+            html += `<div class="output-file-content">`;
+            if (file.type === "text") {
+              html += `<pre>${escapeHtml(file.content || "")}</pre>`;
+            } else if (file.type === "image") {
+              html += `<img src="${file.data_uri}" alt="${escapeHtml(file.name)}">`;
+            } else if (file.type === "binary" && file.data_uri) {
+              html += `<a href="${file.data_uri}" download="${escapeHtml(file.name)}">Download ${escapeHtml(file.name)}</a>`;
+            } else {
+              html += `<span style="color: var(--text-muted);">Binary file</span>`;
+            }
+            html += `</div></div>`;
+          }
+          html += `</div>`;
+        }
+        html += `</div></div>`;
+      }
+      document.getElementById("all-runs-body").innerHTML = html;
+    }
+    function toggleCollapsible(el) {
+      const arrow = el.querySelector(".arrow");
+      const content = el.nextElementSibling;
+      if (arrow) arrow.classList.toggle("open");
+      if (content) content.classList.toggle("open");
+    }
+    // ---- Util ----
+    function escapeHtml(text) {
+      if (!text) return "";
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    // ---- Start ----
+    init();
+  </script>
+</body>
+</html>