@kirrosh/zond 0.7.0

package/src/web/views/endpoints-tab.ts

@@ -0,0 +1,170 @@
+/**
+ * Endpoints tab: all spec endpoints with coverage status, warnings, filters.
+ */
+
+import type { CollectionState, EndpointViewState, CoveringStep } from "../data/collection-state.ts";
+import { escapeHtml } from "./layout.ts";
+import { methodBadge } from "./results.ts";
+import { basename } from "node:path";
+
+export function renderEndpointsTab(state: CollectionState, filters?: { status?: string; method?: string }): string {
+  if (state.totalEndpoints === 0) {
+    return `<div class="tab-empty">No OpenAPI spec configured. Register a spec with <code>setup_api</code> to see endpoints.</div>`;
+  }
+
+  let filtered = state.endpoints;
+  if (filters?.status) {
+    filtered = filtered.filter(ep => {
+      if (filters.status === "passing") return ep.runStatus === "passing";
+      if (filters.status === "failing") return ep.runStatus === "api_error" || ep.runStatus === "test_failed";
+      if (filters.status === "no_tests") return ep.runStatus === "no_tests";
+      if (filters.status === "not_run") return ep.runStatus === "not_run";
+      return true;
+    });
+  }
+  if (filters?.method) {
+    filtered = filtered.filter(ep => ep.method === filters.method);
+  }
+
+  const collectionId = state.collection.id;
+
+  // Filter bar
+  const counts = {
+    all: state.endpoints.length,
+    passing: state.endpoints.filter(e => e.runStatus === "passing").length,
+    failing: state.endpoints.filter(e => e.runStatus === "api_error" || e.runStatus === "test_failed").length,
+    no_tests: state.endpoints.filter(e => e.runStatus === "no_tests").length,
+    not_run: state.endpoints.filter(e => e.runStatus === "not_run").length,
+  };
+
+  const filterBar = `
+    <div class="filter-bar">
+      <button class="filter-chip ${!filters?.status ? 'filter-active' : ''}"
+        hx-get="/panels/endpoints?collection_id=${collectionId}"
+        hx-target="#tab-content" hx-swap="innerHTML">All (${counts.all})</button>
+      <button class="filter-chip filter-chip-pass ${filters?.status === 'passing' ? 'filter-active' : ''}"
+        hx-get="/panels/endpoints?collection_id=${collectionId}&status=passing"
+        hx-target="#tab-content" hx-swap="innerHTML">Passing (${counts.passing})</button>
+      <button class="filter-chip filter-chip-fail ${filters?.status === 'failing' ? 'filter-active' : ''}"
+        hx-get="/panels/endpoints?collection_id=${collectionId}&status=failing"
+        hx-target="#tab-content" hx-swap="innerHTML">Failing (${counts.failing})</button>
+      <button class="filter-chip filter-chip-notrun ${filters?.status === 'not_run' ? 'filter-active' : ''}"
+        hx-get="/panels/endpoints?collection_id=${collectionId}&status=not_run"
+        hx-target="#tab-content" hx-swap="innerHTML">Not Run (${counts.not_run})</button>
+      <button class="filter-chip filter-chip-notest ${filters?.status === 'no_tests' ? 'filter-active' : ''}"
+        hx-get="/panels/endpoints?collection_id=${collectionId}&status=no_tests"
+        hx-target="#tab-content" hx-swap="innerHTML">No Tests (${counts.no_tests})</button>
+    </div>`;
+
+  const rows = filtered.map((ep, i) => renderEndpointRow(ep, collectionId, i)).join("");
+
+  return `${filterBar}<div class="endpoint-list">${rows}</div>`;
+}
+
+function renderEndpointRow(ep: EndpointViewState, collectionId: number, index: number): string {
+  const statusDot = getStatusDot(ep.runStatus);
+  const warningBadges = renderWarningBadges(ep.warnings);
+  const detailId = `ep-detail-${index}`;
+
+  return `
+    <div class="endpoint-row" onclick="var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'grid':'none'">
+      <span class="endpoint-status">${statusDot}</span>
+      <span class="endpoint-method">${methodBadge(ep.method)}</span>
+      <span class="endpoint-path">${escapeHtml(ep.path)}</span>
+      <span class="endpoint-badges">${warningBadges}${ep.summary ? `<span class="endpoint-summary">${escapeHtml(ep.summary)}</span>` : ""}</span>
+    </div>
+    <div class="endpoint-detail" id="${detailId}" style="display:none">
+      ${renderEndpointDetail(ep)}
+    </div>`;
+}
+
+function getStatusDot(status: EndpointViewState["runStatus"]): string {
+  switch (status) {
+    case "passing": return '<span class="status-dot status-pass" title="Tests passing"></span>';
+    case "api_error": return '<span class="status-dot status-fail" title="API error (5xx)"></span>';
+    case "test_failed": return '<span class="status-dot status-fail" title="Assertion failed"></span>';
+    case "not_run": return '<span class="status-dot status-notrun" title="Tests exist, not run"></span>';
+    case "no_tests": return '<span class="status-dot status-notest" title="No tests"></span>';
+  }
+}
+
+function renderWarningBadges(warnings: string[]): string {
+  return warnings.map(w => {
+    if (w === "deprecated") return '<span class="warning-badge warning-deprecated">DEPRECATED</span>';
+    if (w === "no_response_schema") return '<span class="warning-badge warning-schema">NO SCHEMA</span>';
+    if (w === "no_responses_defined") return '<span class="warning-badge warning-schema">NO RESPONSES</span>';
+    if (w.startsWith("required_params_no_examples")) return '<span class="warning-badge warning-params">MISSING EXAMPLES</span>';
+    return `<span class="warning-badge">${escapeHtml(w)}</span>`;
+  }).join(" ");
+}
+
+function renderEndpointDetail(ep: EndpointViewState): string {
+  if (!ep.hasCoverage) {
+    return `<div class="ep-detail-section"><em style="color:var(--text-dim);">No test files cover this endpoint</em></div>`;
+  }
+
+  // If we have run results, show covering steps
+  if (ep.coveringSteps.length > 0) {
+    const steps = ep.coveringSteps.map(step => {
+      const icon = step.status === "pass"
+        ? '<span class="step-icon pass">&#10003;</span>'
+        : step.status === "fail" || step.status === "error"
+          ? '<span class="step-icon fail">&#10007;</span>'
+          : step.status === "skip"
+            ? '<span class="step-icon skip">&#9644;</span>'
+            : '<span class="step-icon" style="color:var(--text-dim);">&#9675;</span>';
+
+      const statusBadge = step.responseStatus && step.responseStatus >= 400 && (step.status === "fail" || step.status === "error")
+        ? ` <span class="warning-badge server-error" style="font-size:0.6rem;">${step.responseStatus} ${httpStatusText(step.responseStatus)}</span>`
+        : "";
+
+      const duration = step.durationMs != null ? `<span class="step-duration">${step.durationMs}ms</span>` : "";
+
+      let assertionsHtml = "";
+      if (step.assertions && step.assertions.length > 0) {
+        assertionsHtml = `<div style="padding-left:1.5rem;margin-top:0.25rem;">` +
+          step.assertions.map(a => {
+            const aIcon = a.passed
+              ? '<span class="assertion-icon pass">&#10003;</span>'
+              : '<span class="assertion-icon fail">&#10007;</span>';
+            const actual = !a.passed && a.actual !== undefined
+              ? ` <span class="assertion-actual">(got ${JSON.stringify(a.actual)})</span>` : "";
+            return `<div class="assertion-row">${aIcon} <span class="assertion-field">${escapeHtml(a.field)}:</span> <span class="assertion-rule">${escapeHtml(a.rule)}</span>${actual}</div>`;
+          }).join("") + `</div>`;
+      }
+
+      let hintHtml = "";
+      if (step.hint) {
+        hintHtml = `<div class="failure-hint"><span>&#9888;</span> ${escapeHtml(step.hint)}</div>`;
+      }
+
+      return `<div class="covering-suite">
+        ${icon}
+        <span class="suite-ref">${escapeHtml(step.file)}</span>
+        <span class="dim" style="font-size:0.75rem;">&rarr; "${escapeHtml(step.stepName)}"</span>
+        <span style="margin-left:auto;display:flex;align-items:center;gap:0.5rem;">${statusBadge}${duration}</span>
+      </div>${assertionsHtml}${hintHtml}`;
+    }).join("");
+    return steps;
+  }
+
+  // Fallback: just file names
+  const files = ep.coveringFiles.map(f =>
+    `<div class="covering-suite">
+      <span class="step-icon" style="color:var(--text-dim);">&#9675;</span>
+      <span class="suite-ref">${escapeHtml(basename(f))}</span>
+      <span class="dim" style="font-size:0.75rem;">not run</span>
+    </div>`
+  ).join("");
+  return files;
+}
+
+function httpStatusText(code: number): string {
+  const map: Record<number, string> = {
+    400: "Bad Request", 401: "Unauthorized", 403: "Forbidden", 404: "Not Found",
+    405: "Method Not Allowed", 409: "Conflict", 422: "Unprocessable Entity",
+    429: "Too Many Requests", 500: "Internal Server Error", 502: "Bad Gateway",
+    503: "Service Unavailable", 504: "Gateway Timeout",
+  };
+  return map[code] ?? "";
+}

package/src/web/views/health-strip.ts

@@ -0,0 +1,92 @@
+/**
+ * Health strip: coverage donut, run stats, env alert banner.
+ */
+
+import type { CollectionState } from "../data/collection-state.ts";
+import { formatDuration } from "../../core/reporter/console.ts";
+
+export function renderHealthStrip(state: CollectionState): string {
+  const { coveragePct, coveredCount, totalEndpoints, runPassed, runFailed, runSkipped, runTotal, runDurationMs, envAlert, latestRun } = state;
+
+  const donut = renderCoverageDonut(coveragePct, coveredCount, totalEndpoints);
+
+  const hasRun = latestRun !== null;
+  const duration = runDurationMs != null ? formatDuration(runDurationMs) : "-";
+
+  const statsHtml = hasRun
+    ? `<div class="health-stats">
+        <div class="stat-block stat-pass"><span class="stat-value">${runPassed}</span><span class="stat-label">passed</span></div>
+        <div class="stat-block stat-fail"><span class="stat-value">${runFailed}</span><span class="stat-label">failed</span></div>
+        <div class="stat-block stat-skip"><span class="stat-value">${runSkipped}</span><span class="stat-label">skipped</span></div>
+        <div class="stat-block"><span class="stat-value">${duration}</span><span class="stat-label">duration</span></div>
+      </div>`
+    : `<div class="health-stats">
+        <div class="stat-block"><span class="stat-value">-</span><span class="stat-label">No runs yet</span></div>
+      </div>`;
+
+  // Mini progress bar
+  const progressHtml = hasRun && runTotal > 0
+    ? `<div class="health-progress">
+        <div class="progress-bar" style="height:6px;">
+          <div class="progress-pass" style="width:${(runPassed / runTotal * 100).toFixed(1)}%"></div>
+          <div class="progress-fail" style="width:${(runFailed / runTotal * 100).toFixed(1)}%"></div>
+          <div class="progress-skip" style="width:${(runSkipped / runTotal * 100).toFixed(1)}%"></div>
+        </div>
+        <span class="health-progress-label">${runPassed}/${runTotal} steps passed</span>
+      </div>`
+    : "";
+
+  const envAlertHtml = envAlert ? renderEnvAlert(envAlert) : "";
+
+  return `
+    <div class="health-strip">
+      <div class="health-donut-zone">
+        ${donut}
+        <div class="coverage-label">
+          <span class="label-title">Coverage</span>
+          <span class="label-value">${coveredCount} / ${totalEndpoints} endpoints</span>
+        </div>
+      </div>
+      <div class="health-info-zone">
+        ${statsHtml}
+        ${progressHtml}
+      </div>
+      ${envAlertHtml}
+    </div>`;
+}
+
+export function renderCoverageDonut(pct: number, covered: number, total: number): string {
+  // SVG donut chart
+  const size = 80;
+  const stroke = 8;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+
+  const color = pct >= 80 ? "var(--pass)" : pct >= 50 ? "var(--warn, #fbbf24)" : "var(--fail)";
+  const trackColor = "var(--border)";
+
+  return `
+    <div class="coverage-donut">
+      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <circle cx="${size / 2}" cy="${size / 2}" r="${radius}"
+          fill="none" stroke="${trackColor}" stroke-width="${stroke}" />
+        <circle cx="${size / 2}" cy="${size / 2}" r="${radius}"
+          fill="none" stroke="${color}" stroke-width="${stroke}"
+          stroke-dasharray="${circumference}" stroke-dashoffset="${offset}"
+          stroke-linecap="round"
+          transform="rotate(-90 ${size / 2} ${size / 2})" />
+        <text x="${size / 2}" y="${size / 2}" text-anchor="middle" dominant-baseline="central"
+          fill="var(--text)" font-size="16" font-weight="700" font-family="inherit">${pct}%</text>
+      </svg>
+      <div class="donut-label">${covered}/${total} endpoints</div>
+    </div>`;
+}
+
+export function renderEnvAlert(message: string): string {
+  return `
+    <div class="env-alert">
+      <span class="env-alert-icon">&#9888;</span>
+      <span>${message}</span>
+    </div>`;
+}

package/src/web/views/layout.ts

@@ -0,0 +1,48 @@
+let _devMode = false;
+
+export function setDevMode(enabled: boolean): void {
+  _devMode = enabled;
+}
+
+export function layout(title: string, content: string, navExtra = ""): string {
+  const devScript = _devMode
+    ? `<script>new EventSource('/dev/reload').onmessage = (e) => { if (e.data === 'reload') location.reload() }</script>`
+    : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)} — zond</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=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/style.css?v=${Date.now()}">
+  <script src="/static/htmx.min.js"></script>
+  <script>htmx.config.refreshOnHistoryMiss = true;</script>
+</head>
+<body>
+  <nav class="navbar">
+    <a href="/" class="nav-brand" style="text-decoration:none;color:inherit;"><span class="logo-dot"></span>zond</a>
+    ${navExtra}
+  </nav>
+  <main class="main-container">
+    ${content}
+  </main>
+  <footer class="footer"><div class="main-container">zond</div></footer>
+  ${devScript}
+</body>
+</html>`;
+}
+
+export function fragment(content: string): string {
+  return content;
+}
+
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/src/web/views/results.ts

@@ -0,0 +1,209 @@
+import { escapeHtml } from "./layout.ts";
+import { formatDuration } from "../../core/reporter/console.ts";
+import type { StoredStepResult } from "../../db/queries.ts";
+
+export function statusBadge(total: number, passed: number, failed: number): string {
+  if (total === 0) return `<span class="badge badge-skip">empty</span>`;
+  if (failed > 0) return `<span class="badge badge-fail">fail</span>`;
+  return `<span class="badge badge-pass">pass</span>`;
+}
+
+export function stepStatusBadge(status: string): string {
+  switch (status) {
+    case "pass":
+      return `<span class="badge badge-pass">&#10003;</span>`;
+    case "fail":
+      return `<span class="badge badge-fail">&#10007;</span>`;
+    case "skip":
+      return `<span class="badge badge-skip">&#9675;</span>`;
+    case "error":
+      return `<span class="badge badge-error">&#10007;</span>`;
+    default:
+      return `<span class="badge">${escapeHtml(status)}</span>`;
+  }
+}
+
+export function methodBadge(method: string): string {
+  const m = method.toLowerCase();
+  return `<span class="badge-method method-${m}">${method}</span>`;
+}
+
+/**
+ * Render grouped suite results with step details, captures, and chain visualization.
+ * Used by both the dashboard panels and the /runs/:id detail page.
+ */
+export function renderSuiteResults(
+  results: StoredStepResult[],
+  runId: number,
+  options?: { idPrefix?: string; suiteMetadata?: Map<string, { description?: string; tags?: string[] }> },
+): string {
+  const prefix = options?.idPrefix ?? `r${runId}`;
+
+  // Group by suite
+  const suites = new Map<string, StoredStepResult[]>();
+  for (const r of results) {
+    const list = suites.get(r.suite_name) ?? [];
+    list.push(r);
+    suites.set(r.suite_name, list);
+  }
+
+  // Build capture source map
+  const captureSourceMap = new Map<string, string>();
+  for (const [, steps] of suites) {
+    for (const step of steps) {
+      if (step.captures && typeof step.captures === "object") {
+        for (const varName of Object.keys(step.captures)) {
+          captureSourceMap.set(varName, step.test_name);
+        }
+      }
+    }
+  }
+
+  let suitesHtml = "";
+  for (const [suiteName, steps] of suites) {
+    const suiteHasCaptures = steps.some(s =>
+      s.captures && typeof s.captures === "object" && Object.keys(s.captures).length > 0,
+    );
+    const isChainSuite = suiteHasCaptures || suiteName.endsWith("CRUD");
+
+    const stepsHtml = steps
+      .map((step, i) => {
+        const detailId = `detail-${prefix}-${i}`;
+        const hasFailed = step.status === "fail" || step.status === "error";
+
+        let capturesHtml = "";
+        if (step.captures && typeof step.captures === "object") {
+          const captureEntries = Object.entries(step.captures);
+          if (captureEntries.length > 0) {
+            capturesHtml = captureEntries.map(([k, v]) =>
+              `<span class="capture-badge">${escapeHtml(k)} = ${escapeHtml(String(v))}</span>`,
+            ).join(" ");
+          }
+        }
+
+        let assertionsHtml = "";
+        if (step.assertions.length > 0) {
+          const items = step.assertions
+            .map(
+              (a) =>
+                `<li class="${a.passed ? "assertion-pass" : "assertion-fail"}">${escapeHtml(a.field)}: ${escapeHtml(a.rule)} (got ${escapeHtml(String(a.actual))})</li>`,
+            )
+            .join("");
+          assertionsHtml = `<ul class="assertion-list">${items}</ul>`;
+        }
+
+        let requestHtml = "";
+        if (step.request_method) {
+          requestHtml = `<div><strong>Request:</strong> ${escapeHtml(step.request_method)} ${escapeHtml(step.request_url ?? "")}</div>`;
+        }
+
+        let reqBodyHtml = "";
+        if (hasFailed && step.request_body) {
+          reqBodyHtml = `<details class="body-details"><summary>Request Body</summary><pre>${escapeHtml(step.request_body)}</pre></details>`;
+        }
+        let resBodyHtml = "";
+        if (hasFailed && step.response_body) {
+          resBodyHtml = `<details class="body-details"><summary>Response Body</summary><pre>${escapeHtml(step.response_body)}</pre></details>`;
+        }
+
+        let errorHtml = "";
+        if (step.error_message) {
+          errorHtml = `<div><strong>Error:</strong> ${escapeHtml(step.error_message)}</div>`;
+        }
+
+        let skipReasonHtml = "";
+        if (step.status === "skip" && step.error_message) {
+          const match = step.error_message.match(/Depends on missing capture: (\w+)/);
+          if (match) {
+            const depVar = match[1]!;
+            const sourceStep = captureSourceMap.get(depVar);
+            skipReasonHtml = sourceStep
+              ? `<div class="skip-reason">Skipped: depends on <code>${escapeHtml(depVar)}</code> (from step "${escapeHtml(sourceStep)}")</div>`
+              : `<div class="skip-reason">Skipped: depends on <code>${escapeHtml(depVar)}</code></div>`;
+          }
+        }
+
+        const detailPanel = (hasFailed || skipReasonHtml)
+          ? `<div class="detail-panel" id="${detailId}" style="display:none">
+              ${requestHtml}
+              ${errorHtml}
+              ${skipReasonHtml}
+              ${assertionsHtml}
+              ${reqBodyHtml}
+              ${resBodyHtml}
+            </div>`
+          : "";
+
+        const toggle = (hasFailed || skipReasonHtml)
+          ? `onclick="var d=document.getElementById('${detailId}');d.style.display=d.style.display==='none'?'block':'none'"`
+          : "";
+
+        const chainedClass = isChainSuite ? " chained" : "";
+        const statusClass = (step.status === "fail" || step.status === "error") ? ` step-${step.status}` : "";
+
+        return `
+          <div class="step-row${chainedClass}${statusClass}" ${toggle}>
+            <div>${stepStatusBadge(step.status)}</div>
+            <div class="step-name">${escapeHtml(step.test_name)}${capturesHtml ? ` ${capturesHtml}` : ""}</div>
+            <div class="step-duration">${formatDuration(step.duration_ms)}</div>
+          </div>
+          ${detailPanel}`;
+      })
+      .join("");
+
+    const chainClass = isChainSuite ? " chain-suite" : "";
+
+    const meta = options?.suiteMetadata?.get(suiteName);
+    const descriptionHtml = meta?.description
+      ? `<p class="suite-description">${escapeHtml(meta.description)}</p>`
+      : "";
+    const tagsHtml = meta?.tags?.length
+      ? `<div class="suite-tags">${meta.tags.map(t => `<span class="tag-badge">${escapeHtml(t)}</span>`).join(" ")}</div>`
+      : "";
+
+    suitesHtml += `
+      <div class="suite-section${chainClass}">
+        <h3>${escapeHtml(suiteName)}</h3>
+        ${descriptionHtml}
+        ${tagsHtml}
+        ${isChainSuite ? '<div class="chain-connector">' : ""}
+        ${stepsHtml}
+        ${isChainSuite ? "</div>" : ""}
+      </div>`;
+  }
+
+  return suitesHtml;
+}
+
+/**
+ * Render the "show only failed" toggle + auto-expand failed steps script.
+ */
+export function failedFilterToggle(): string {
+  return `
+    <label class="failed-filter-toggle" style="display:inline-flex;align-items:center;gap:0.5rem;font-size:0.85rem;cursor:pointer;">
+      <input type="checkbox" id="failed-only-toggle" onchange="
+        var on = this.checked;
+        document.querySelectorAll('.step-row').forEach(function(el) {
+          if (on && !el.classList.contains('step-fail') && !el.classList.contains('step-error')) {
+            el.style.display = 'none';
+            var next = el.nextElementSibling;
+            if (next && next.classList.contains('detail-panel')) next.style.display = 'none';
+          } else {
+            el.style.display = '';
+          }
+        });
+      "> Show only failed
+    </label>`;
+}
+
+/**
+ * Script to auto-expand failed step detail panels on page load.
+ */
+export function autoExpandFailedScript(): string {
+  return `<script>
+    document.querySelectorAll('.step-row.step-fail, .step-row.step-error').forEach(function(el) {
+      var next = el.nextElementSibling;
+      if (next && next.classList.contains('detail-panel')) next.style.display = 'block';
+    });
+  </script>`;
+}

package/src/web/views/runs-tab.ts

@@ -0,0 +1,126 @@
+/**
+ * Runs tab: history of test runs with comparison.
+ */
+
+import { escapeHtml } from "./layout.ts";
+import { statusBadge } from "./results.ts";
+import { formatDuration } from "../../core/reporter/console.ts";
+import {
+  listRunsByCollection,
+  countRunsByCollection,
+  getResultsByRunId,
+  getRunById,
+} from "../../db/queries.ts";
+import type { RunSummary } from "../../db/queries.ts";
+import { renderSuiteResults, failedFilterToggle, autoExpandFailedScript } from "./results.ts";
+
+const PAGE_SIZE = 15;
+
+export function renderRunsTab(collectionId: number, page = 1): string {
+  const offset = (page - 1) * PAGE_SIZE;
+  const runs = listRunsByCollection(collectionId, PAGE_SIZE, offset);
+  const total = countRunsByCollection(collectionId);
+  const hasMore = offset + runs.length < total;
+
+  if (runs.length === 0 && page === 1) {
+    return `<div class="tab-empty">No test runs yet. Click <strong>Run Tests</strong> to get started.</div>`;
+  }
+
+  const rows = runs.map(r => renderRunRow(r, collectionId)).join("");
+
+  const loadMore = hasMore
+    ? `<div style="text-align:center;padding:0.75rem;">
+        <button class="btn btn-sm btn-outline"
+          hx-get="/panels/runs-tab?collection_id=${collectionId}&page=${page + 1}"
+          hx-target="#tab-content" hx-swap="innerHTML">Load more...</button>
+      </div>`
+    : "";
+
+  return `
+    <div class="runs-list">
+      <div class="runs-header">
+        <span>Run</span><span>Time</span><span>Results</span><span>Duration</span><span>Status</span>
+      </div>
+      ${rows}
+      ${loadMore}
+    </div>`;
+}
+
+function renderRunRow(run: RunSummary, collectionId: number): string {
+  const timeAgo = formatTimeAgo(run.started_at);
+  const duration = run.duration_ms != null ? formatDuration(run.duration_ms) : "-";
+  const total = run.total || 1;
+
+  // Mini progress bar
+  const progressBar = run.total > 0
+    ? `<div class="progress-bar run-progress">
+        <div class="progress-pass" style="width:${(run.passed / total * 100).toFixed(1)}%"></div>
+        <div class="progress-fail" style="width:${(run.failed / total * 100).toFixed(1)}%"></div>
+      </div>`
+    : "";
+
+  return `
+    <div class="run-row"
+      hx-get="/panels/run-detail?run_id=${run.id}&collection_id=${collectionId}"
+      hx-target="#tab-content" hx-swap="innerHTML">
+      <span class="run-id">#${run.id}</span>
+      <span class="run-time">${escapeHtml(timeAgo)}</span>
+      <span class="run-results">
+        ${progressBar}
+        <span class="run-counts">${run.passed}&#10003; ${run.failed}&#10007; ${run.skipped}&#9675;</span>
+      </span>
+      <span class="run-duration">${duration}</span>
+      <span>${statusBadge(run.total, run.passed, run.failed)}</span>
+    </div>`;
+}
+
+export function renderRunDetail(runId: number, collectionId: number): string {
+  const run = getRunById(runId);
+  if (!run) return `<p>Run not found</p>`;
+
+  const results = getResultsByRunId(runId);
+  if (results.length === 0) return `<p class="tab-empty">No results for run #${runId}.</p>`;
+
+  const timeAgo = formatTimeAgo(run.started_at);
+  const duration = run.duration_ms != null ? formatDuration(run.duration_ms) : "-";
+
+  const backButton = `<button class="btn btn-sm btn-outline" style="margin-bottom:0.75rem;"
+    hx-get="/panels/runs-tab?collection_id=${collectionId}"
+    hx-target="#tab-content" hx-swap="innerHTML">&larr; Back to runs</button>`;
+
+  const header = `
+    <div class="run-detail-header">
+      <strong>Run #${run.id}</strong>
+      <span class="text-dim">${escapeHtml(timeAgo)}</span>
+      <span>${run.passed}&#10003; ${run.failed}&#10007; ${run.skipped}&#9675;</span>
+      <span class="text-dim">${duration}</span>
+      ${statusBadge(run.total, run.passed, run.failed)}
+      <span style="flex:1;"></span>
+      <a href="/api/export/${run.id}/junit" download class="btn btn-sm btn-outline">JUnit</a>
+      <a href="/api/export/${run.id}/json" download class="btn btn-sm btn-outline">JSON</a>
+      ${failedFilterToggle()}
+    </div>`;
+
+  const suitesHtml = renderSuiteResults(results, runId);
+
+  return backButton + header + suitesHtml + autoExpandFailedScript();
+}
+
+function formatTimeAgo(isoDate: string): string {
+  try {
+    const date = new Date(isoDate);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60) return "just now";
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return isoDate;
+  }
+}