@healflow/playwright 0.1.0

package/dist/report-html.js

@@ -0,0 +1,862 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildReportHtml = buildReportHtml;
+const node_path_1 = require("node:path");
+const terminal_js_1 = require("./terminal.js");
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+function formatTimestamp(iso) {
+    try {
+        return new Date(iso).toLocaleString();
+    }
+    catch {
+        return iso;
+    }
+}
+function formatConfidence(confidence) {
+    return `${Math.round(confidence * 100)}%`;
+}
+function slugify(value) {
+    return value
+        .replace(/[^a-zA-Z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .toLowerCase();
+}
+function buildTestTree(artifacts) {
+    const fixByKey = new Map();
+    for (const fix of artifacts.fixes) {
+        fixByKey.set(`${fix.testFile}::${fix.testTitle}`, fix);
+    }
+    const testMap = new Map();
+    for (const heal of artifacts.heals) {
+        const testFile = heal.testFile ?? 'unknown';
+        const testTitle = heal.testTitle ?? 'Unknown test';
+        const key = `${testFile}::${testTitle}`;
+        const existing = testMap.get(key);
+        if (existing) {
+            existing.heals.push(heal);
+            continue;
+        }
+        testMap.set(key, {
+            id: slugify(key),
+            testFile,
+            testTitle,
+            heals: [heal],
+            fix: fixByKey.get(key),
+        });
+    }
+    const fileMap = new Map();
+    for (const test of testMap.values()) {
+        const fileName = (0, node_path_1.basename)(test.testFile);
+        const group = fileMap.get(test.testFile);
+        if (group) {
+            group.tests.push(test);
+            group.healCount += test.heals.length;
+            continue;
+        }
+        fileMap.set(test.testFile, {
+            testFile: test.testFile,
+            fileName,
+            tests: [test],
+            healCount: test.heals.length,
+        });
+    }
+    return [...fileMap.values()].sort((a, b) => a.fileName.localeCompare(b.fileName));
+}
+function categoryCounts(heals) {
+    const counts = new Map();
+    for (const heal of heals) {
+        counts.set(heal.category, (counts.get(heal.category) ?? 0) + 1);
+    }
+    return [...counts.entries()]
+        .map(([category, count]) => ({ category, count }))
+        .sort((a, b) => b.count - a.count);
+}
+function statusLabel(status, failureCount) {
+    if (failureCount > 0 ||
+        status === 'failed' ||
+        status === 'timedout' ||
+        status === 'interrupted') {
+        return 'failed';
+    }
+    return 'passed';
+}
+function renderSidebarTree(groups) {
+    if (groups.length === 0) {
+        return '<div class="tree-empty">No heals recorded this run.</div>';
+    }
+    return groups
+        .map((group) => {
+        const tests = group.tests
+            .map((test) => {
+            const healLabel = test.heals.length > 1 ? ` (${test.heals.length})` : '';
+            return `
+            <div class="tree-item test-tree-item" data-test-id="${escapeHtml(test.id)}" role="button" tabindex="0">
+              <span class="status-icon status-healed" aria-hidden="true">${STATUS_ICON_HEALED}</span>
+              <span class="tree-item-title">${escapeHtml(test.testTitle)}${escapeHtml(healLabel)}</span>
+            </div>`;
+        })
+            .join('');
+        return `
+        <div class="file-group" data-file="${escapeHtml(group.testFile)}">
+          <div class="tree-item file-tree-item" role="presentation">
+            <span class="file-chevron" aria-hidden="true">▸</span>
+            <span class="tree-item-title file-title">${escapeHtml(group.fileName)}</span>
+            <span class="file-heal-count">${group.healCount}</span>
+          </div>
+          <div class="file-tests">${tests}</div>
+        </div>`;
+    })
+        .join('');
+}
+function renderHealCards(test) {
+    return test.heals
+        .map((heal) => {
+        const selectorChange = heal.oldValue || heal.newValue
+            ? `
+            <div class="detail-row">
+              <span class="detail-label">Selector</span>
+              <span class="detail-value selector-change">
+                <code>${escapeHtml(heal.oldValue ?? '—')}</code>
+                <span class="arrow">→</span>
+                <code>${escapeHtml(heal.newValue ?? '—')}</code>
+              </span>
+            </div>`
+            : '';
+        return `
+        <article class="heal-card" data-heal-id="${escapeHtml(heal.id)}">
+          <div class="heal-card-header">
+            <span class="category-badge category-${escapeHtml(heal.category.toLowerCase())}">${escapeHtml(heal.category)}</span>
+            <span class="confidence-badge">${formatConfidence(heal.confidence)} confidence</span>
+          </div>
+          <p class="heal-description">${escapeHtml((0, terminal_js_1.formatHealDescription)(heal))}</p>
+          <div class="detail-grid">
+            <div class="detail-row">
+              <span class="detail-label">Root cause</span>
+              <span class="detail-value">${escapeHtml(heal.rootCause)}</span>
+            </div>
+            ${selectorChange}
+            <div class="detail-row">
+              <span class="detail-label">Healed at</span>
+              <span class="detail-value">${escapeHtml(formatTimestamp(heal.healedAt))}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Heal ID</span>
+              <span class="detail-value mono">${escapeHtml(heal.id)}</span>
+            </div>
+          </div>
+        </article>`;
+    })
+        .join('');
+}
+function renderFixProposal(fix) {
+    if (!fix)
+        return '';
+    return `
+    <section class="detail-section">
+      <div class="chip-header">Fix proposal</div>
+      <div class="chip-body">
+        <div class="detail-grid">
+          <div class="detail-row">
+            <span class="detail-label">Strategy</span>
+            <span class="detail-value">${escapeHtml(fix.strategy)}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">Dry run</span>
+            <span class="detail-value">${fix.dryRun ? 'Yes' : 'No'}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">Confidence</span>
+            <span class="detail-value">${formatConfidence(fix.confidence)}</span>
+          </div>
+        </div>
+      </div>
+    </section>`;
+}
+function renderTestDetailPanels(groups) {
+    const panels = groups.flatMap((group) => group.tests.map((test) => {
+        const relativePath = test.testFile;
+        return `
+        <section class="test-detail" id="test-${escapeHtml(test.id)}" hidden>
+          <div class="test-file-header">
+            <div class="test-file-title-row">
+              <span class="status-icon status-healed" aria-hidden="true">${STATUS_ICON_HEALED}</span>
+              <h2 class="test-file-title">${escapeHtml(test.testTitle)}</h2>
+            </div>
+            <div class="test-file-path">${escapeHtml(relativePath)}</div>
+          </div>
+          <section class="detail-section">
+            <div class="chip-header">Runtime heals (${test.heals.length})</div>
+            <div class="chip-body heal-cards">${renderHealCards(test)}</div>
+          </section>
+          ${renderFixProposal(test.fix)}
+        </section>`;
+    }));
+    return panels.join('');
+}
+function renderCategorySummary(heals) {
+    const counts = categoryCounts(heals);
+    if (counts.length === 0) {
+        return '<p class="muted">No heal categories to summarize.</p>';
+    }
+    return `
+    <div class="category-summary">
+      ${counts
+        .map((entry) => `
+        <div class="category-stat">
+          <span class="category-badge category-${escapeHtml(entry.category.toLowerCase())}">${escapeHtml(entry.category)}</span>
+          <span class="category-count">${entry.count}</span>
+        </div>`)
+        .join('')}
+    </div>`;
+}
+const STATUS_ICON_PASSED = '<svg viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="8" fill="#1a7f37"/><path d="M6.5 10.5 4 8l1-1 1.5 1.5L11 4l1 1-5.5 5.5Z" fill="#fff"/></svg>';
+const STATUS_ICON_FAILED = '<svg viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="8" fill="#cf222e"/><path d="M5 5l6 6M11 5l-6 6" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg>';
+const STATUS_ICON_HEALED = '<svg viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="8" fill="#0969da"/><path d="M8 3.5a1 1 0 0 1 .9.6l1.4 2.8 3.1.5a1 1 0 0 1 .55 1.7l-2.2 2.2.5 3.1a1 1 0 0 1-1.45 1.05L8 13.2l-2.8 1.5a1 1 0 0 1-1.45-1.05l.5-3.1-2.2-2.2a1 1 0 0 1 .55-1.7l3.1-.5 1.4-2.8A1 1 0 0 1 8 3.5Z" fill="#fff"/></svg>';
+const REPORT_STYLES = `
+:root {
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-border-default: #d0d7de;
+  --color-success-fg: #1a7f37;
+  --color-success-subtle: #dafbe1;
+  --color-danger-fg: #cf222e;
+  --color-danger-subtle: #ffebe9;
+  --color-attention-fg: #9a6700;
+  --color-attention-subtle: #fff8c5;
+  --color-accent-fg: #0969da;
+  --color-accent-subtle: #ddf4ff;
+  --color-heal-fg: #0550ae;
+  --color-heal-subtle: #ddf4ff;
+  --sidebar-width: 320px;
+  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --mono-stack: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: var(--font-stack);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-fg-default);
+  background: var(--color-canvas-default);
+}
+
+button, input { font: inherit; }
+
+.app { display: flex; flex-direction: column; min-height: 100vh; }
+
+.header-view {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-canvas-default);
+  flex-wrap: wrap;
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.header-logo {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #2da44e, #0969da);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+}
+
+.header-subtitle {
+  color: var(--color-fg-muted);
+  font-size: 12px;
+}
+
+.header-view-status-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+.summary-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 2em;
+  border: 1px solid var(--color-border-default);
+  background: var(--color-canvas-subtle);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.summary-chip.passed { color: var(--color-success-fg); background: var(--color-success-subtle); border-color: #82d8a5; }
+.summary-chip.failed { color: var(--color-danger-fg); background: var(--color-danger-subtle); border-color: #ffbbb9; }
+.summary-chip.healed { color: var(--color-heal-fg); background: var(--color-heal-subtle); border-color: #9cd7ff; }
+.summary-chip.neutral { color: var(--color-fg-muted); }
+
+.main-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.sidebar {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  border-right: 1px solid var(--color-border-default);
+  background: var(--color-canvas-subtle);
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 57px);
+}
+
+.sidebar-toolbar {
+  padding: 12px;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-canvas-default);
+}
+
+.search-input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  background: var(--color-canvas-default);
+  color: var(--color-fg-default);
+}
+
+.search-input:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -1px;
+}
+
+.tree-panel {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 0 24px;
+}
+
+.tree-empty {
+  padding: 16px;
+  color: var(--color-fg-muted);
+}
+
+.file-group { margin-bottom: 4px; }
+
+.tree-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  line-height: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.file-tree-item {
+  color: var(--color-fg-default);
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+
+.test-tree-item {
+  padding-left: 28px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+}
+
+.test-tree-item:hover,
+.test-tree-item:focus-visible {
+  background: rgba(9, 105, 218, 0.08);
+  outline: none;
+}
+
+.test-tree-item.selected {
+  background: #fff;
+  border-left-color: var(--color-accent-fg);
+}
+
+.overview-tree-item {
+  padding-left: 12px;
+  border-bottom: 1px solid var(--color-border-default);
+  margin-bottom: 8px;
+}
+
+.file-chevron {
+  width: 12px;
+  color: var(--color-fg-muted);
+  transition: transform 0.15s ease;
+}
+
+.file-group.expanded .file-chevron { transform: rotate(90deg); }
+
+.file-tests { display: none; }
+.file-group.expanded .file-tests { display: block; }
+
+.tree-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-title { flex: 1; }
+
+.file-heal-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-heal-fg);
+  background: var(--color-heal-subtle);
+  border-radius: 10px;
+  padding: 1px 7px;
+}
+
+.status-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+  padding: 20px 24px 40px;
+  background: var(--color-canvas-default);
+}
+
+.overview-panel { max-width: 960px; }
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin: 16px 0 24px;
+}
+
+.meta-card {
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  padding: 14px 16px;
+  background: var(--color-canvas-subtle);
+}
+
+.meta-card .label {
+  font-size: 12px;
+  color: var(--color-fg-muted);
+  margin-bottom: 4px;
+}
+
+.meta-card .value {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.muted { color: var(--color-fg-muted); }
+
+.chip-header {
+  border: 1px solid var(--color-border-default);
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: var(--color-canvas-subtle);
+  padding: 0 12px;
+  font-weight: 600;
+  line-height: 38px;
+}
+
+.chip-body {
+  border: 1px solid var(--color-border-default);
+  border-top: none;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.detail-section { margin-bottom: 16px; }
+
+.test-file-header {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.test-file-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.test-file-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.test-file-path {
+  margin-top: 6px;
+  color: var(--color-fg-muted);
+  font-family: var(--mono-stack);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.heal-cards { display: grid; gap: 12px; }
+
+.heal-card {
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  padding: 12px 14px;
+  background: var(--color-canvas-default);
+}
+
+.heal-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.heal-description {
+  margin: 0 0 12px;
+  color: var(--color-fg-default);
+}
+
+.detail-grid { display: grid; gap: 8px; }
+
+.detail-row {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 12px;
+  align-items: start;
+}
+
+.detail-label {
+  color: var(--color-fg-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.detail-value { word-break: break-word; }
+.detail-value.mono { font-family: var(--mono-stack); font-size: 12px; }
+
+.selector-change {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.selector-change code {
+  font-family: var(--mono-stack);
+  font-size: 12px;
+  background: var(--color-canvas-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.arrow { color: var(--color-fg-muted); }
+
+.category-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 2em;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.category-timing { background: var(--color-attention-subtle); color: var(--color-attention-fg); }
+.category-overlay { background: var(--color-danger-subtle); color: var(--color-danger-fg); }
+.category-selector { background: var(--color-success-subtle); color: var(--color-success-fg); }
+.category-iframe, .category-shadow_dom, .category-auth, .category-session, .category-network {
+  background: var(--color-accent-subtle);
+  color: var(--color-accent-fg);
+}
+
+.confidence-badge {
+  font-size: 12px;
+  color: var(--color-fg-muted);
+}
+
+.category-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.category-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  padding: 8px 10px;
+  background: var(--color-canvas-subtle);
+}
+
+.category-count {
+  font-weight: 700;
+  min-width: 1.5em;
+  text-align: right;
+}
+
+.run-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.run-status.passed { color: var(--color-success-fg); }
+.run-status.failed { color: var(--color-danger-fg); }
+
+@media (max-width: 900px) {
+  .main-layout { flex-direction: column; }
+  .sidebar {
+    width: 100%;
+    min-height: auto;
+    max-height: 40vh;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border-default);
+  }
+  .detail-row { grid-template-columns: 1fr; gap: 2px; }
+}
+`;
+const REPORT_SCRIPT = `
+(function () {
+  const data = JSON.parse(document.getElementById('healflow-data').textContent);
+  const searchInput = document.getElementById('tree-search');
+  const overview = document.getElementById('overview-panel');
+  const details = Array.from(document.querySelectorAll('.test-detail'));
+  const testItems = Array.from(document.querySelectorAll('.test-tree-item'));
+  const fileGroups = Array.from(document.querySelectorAll('.file-group'));
+
+  function showOverview() {
+    overview.hidden = false;
+    details.forEach((panel) => { panel.hidden = true; });
+    testItems.forEach((item) => {
+      item.classList.toggle('selected', !item.dataset.testId);
+    });
+  }
+
+  function showTest(testId) {
+    overview.hidden = true;
+    details.forEach((panel) => {
+      panel.hidden = panel.id !== 'test-' + testId;
+    });
+    testItems.forEach((item) => {
+      item.classList.toggle('selected', item.dataset.testId === testId);
+    });
+  }
+
+  testItems.forEach((item) => {
+    item.addEventListener('click', () => {
+      if (!item.dataset.testId) {
+        showOverview();
+        return;
+      }
+      showTest(item.dataset.testId);
+    });
+    item.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        if (!item.dataset.testId) {
+          showOverview();
+          return;
+        }
+        showTest(item.dataset.testId);
+      }
+    });
+  });
+
+  fileGroups.forEach((group) => {
+    group.classList.add('expanded');
+    const header = group.querySelector('.file-tree-item');
+    header.addEventListener('click', () => group.classList.toggle('expanded'));
+  });
+
+  searchInput.addEventListener('input', () => {
+    const query = searchInput.value.trim().toLowerCase();
+    fileGroups.forEach((group) => {
+      let visibleTests = 0;
+      group.querySelectorAll('.test-tree-item').forEach((item) => {
+        const title = item.textContent.toLowerCase();
+        const match = !query || title.includes(query);
+        item.style.display = match ? '' : 'none';
+        if (match) visibleTests += 1;
+      });
+      const fileName = group.querySelector('.file-title').textContent.toLowerCase();
+      const showGroup = visibleTests > 0 || fileName.includes(query);
+      group.style.display = showGroup ? '' : 'none';
+      if (showGroup && query) group.classList.add('expanded');
+    });
+  });
+
+})();
+`;
+function buildReportHtml(artifacts, options = {}) {
+    const groups = buildTestTree(artifacts);
+    const durationMs = options.durationMs ??
+        Math.max(0, new Date(artifacts.completedAt).getTime() - new Date(artifacts.startedAt).getTime());
+    const passedCount = options.passedCount ?? 0;
+    const runStatus = statusLabel(artifacts.status, artifacts.failureCount);
+    const statusIcon = runStatus === 'passed' ? STATUS_ICON_PASSED : STATUS_ICON_FAILED;
+    const embeddedData = {
+        runId: artifacts.runId,
+    };
+    const passedChip = passedCount > 0 ? `<span class="summary-chip passed">${passedCount} passed</span>` : '';
+    const failedChip = artifacts.failureCount > 0
+        ? `<span class="summary-chip failed">${artifacts.failureCount} failed</span>`
+        : '';
+    const healedChip = artifacts.healCount > 0
+        ? `<span class="summary-chip healed">⚡ ${artifacts.healCount} healed</span>`
+        : `<span class="summary-chip neutral">0 healed</span>`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HealFlow Report</title>
+  <style>${REPORT_STYLES}</style>
+</head>
+<body>
+  <div class="app">
+    <header class="header-view">
+      <div class="header-brand">
+        <div class="header-logo" aria-hidden="true">HF</div>
+        <div>
+          <div class="header-title">HealFlow Report</div>
+          <div class="header-subtitle">${escapeHtml(formatTimestamp(artifacts.completedAt))}</div>
+        </div>
+      </div>
+      <div class="header-view-status-container">
+        ${passedChip}
+        ${failedChip}
+        ${healedChip}
+        <span class="summary-chip neutral">${escapeHtml(formatDuration(durationMs))}</span>
+        <span class="summary-chip neutral">${escapeHtml(artifacts.mode)} mode</span>
+      </div>
+    </header>
+
+    <div class="main-layout">
+      <aside class="sidebar" aria-label="Test tree">
+        <div class="sidebar-toolbar">
+          <input id="tree-search" class="search-input" type="search" placeholder="Search tests…" aria-label="Search tests" />
+        </div>
+        <div class="tree-panel">
+          <div class="tree-item test-tree-item overview-tree-item selected" data-test-id="" role="button" tabindex="0">
+            <span class="status-icon" aria-hidden="true">${statusIcon}</span>
+            <span class="tree-item-title">Run summary</span>
+          </div>
+          ${renderSidebarTree(groups)}
+        </div>
+      </aside>
+
+      <main class="content">
+        <section class="overview-panel" id="overview-panel">
+          <div class="test-file-title-row">
+            <span class="status-icon" aria-hidden="true">${statusIcon}</span>
+            <h2 class="test-file-title">Run summary</h2>
+          </div>
+          <p class="muted">Status: <span class="run-status ${runStatus}">${escapeHtml(runStatus)}</span></p>
+
+          <div class="overview-grid">
+            <div class="meta-card">
+              <div class="label">Heals</div>
+              <div class="value">${artifacts.healCount}</div>
+            </div>
+            <div class="meta-card">
+              <div class="label">Failures</div>
+              <div class="value">${artifacts.failureCount}</div>
+            </div>
+            <div class="meta-card">
+              <div class="label">Fix proposals</div>
+              <div class="value">${artifacts.fixes.length}</div>
+            </div>
+            <div class="meta-card">
+              <div class="label">Duration</div>
+              <div class="value">${escapeHtml(formatDuration(durationMs))}</div>
+            </div>
+          </div>
+
+          <section class="detail-section">
+            <div class="chip-header">Run metadata</div>
+            <div class="chip-body">
+              <div class="detail-grid">
+                <div class="detail-row">
+                  <span class="detail-label">Run ID</span>
+                  <span class="detail-value mono">${escapeHtml(artifacts.runId)}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Started</span>
+                  <span class="detail-value">${escapeHtml(formatTimestamp(artifacts.startedAt))}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Completed</span>
+                  <span class="detail-value">${escapeHtml(formatTimestamp(artifacts.completedAt))}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Mode</span>
+                  <span class="detail-value">${escapeHtml(artifacts.mode)}</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="detail-section">
+            <div class="chip-header">Heal categories</div>
+            <div class="chip-body">
+              ${renderCategorySummary(artifacts.heals)}
+            </div>
+          </section>
+        </section>
+
+        ${renderTestDetailPanels(groups)}
+      </main>
+    </div>
+  </div>
+
+  <script id="healflow-data" type="application/json">${escapeHtml(JSON.stringify(embeddedData))}</script>
+  <script>${REPORT_SCRIPT}</script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=report-html.js.map