@reportforge/playwright-pdf 0.0.1

package/dist/templates/layouts/detailed.hbs

@@ -0,0 +1,38 @@
+{{> head}}
+
+{{> watermark}}
+
+<div class="report-header">
+  {{#if meta.branding.logoBase64}}
+    <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+  {{/if}}
+  <div>
+    <div class="report-header__title">{{meta.title}}</div>
+    <div class="report-header__meta">{{meta.projectName}} &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</div>
+  </div>
+</div>
+
+{{> executive-summary options=(obj showPassRate=true) }}
+
+{{> charts options=(obj showCharts=true) }}
+
+<div class="page-group">
+  {{> requirements-matrix }}
+  {{> ci-environment options=(obj showFullEnvironment=true) }}
+</div>
+
+{{> suite-breakdown options=(obj showRetries=true) }}
+
+{{> failure-deep-dive options=(obj showFullFailures=true showStackTraces=true) }}
+
+{{> slow-tests limit=10 showProject=true}}
+
+{{> defect-log }}
+
+<div class="report-footer">
+  <span>Generated by ReportForge</span>
+  <span>{{formatDate meta.generatedAt}}</span>
+</div>
+
+</body>
+</html>

package/dist/templates/layouts/executive.hbs

@@ -0,0 +1,35 @@
+{{> head}}
+
+{{> watermark}}
+
+{{> cover-page}}
+
+<div class="report-header">
+  <div class="report-header__left">
+    {{#if meta.branding.logoBase64}}
+      <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+    {{/if}}
+    <div class="report-header__title">{{meta.title}}</div>
+  </div>
+  <div class="report-header__date">{{formatDate meta.generatedAt}}</div>
+</div>
+
+{{> release-gate}}
+
+{{> executive-summary options=(obj showPassRate=true) }}
+
+{{> charts options=(obj showCharts=true) }}
+
+{{> slow-tests limit=5 showProject=false}}
+
+{{> failure-deep-dive options=(obj showFullFailures=false showStackTraces=false) }}
+
+{{> ci-environment options=(obj showFullEnvironment=false) }}
+
+<div class="report-footer">
+  <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>
+  <span>Generated by ReportForge &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</span>
+</div>
+
+</body>
+</html>

package/dist/templates/layouts/minimal.hbs

@@ -0,0 +1,29 @@
+{{> head}}
+
+{{> watermark}}
+
+<div class="report-header">
+  {{#if meta.branding.logoBase64}}
+    <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+  {{/if}}
+  <div>
+    <div class="report-header__title">{{meta.title}}</div>
+    <div class="report-header__meta">{{meta.projectName}} &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</div>
+  </div>
+</div>
+
+{{> executive-summary options=(obj showPassRate=true showCharts=false) }}
+
+{{> suite-breakdown options=(obj showRetries=true) }}
+
+{{> failure-deep-dive options=(obj showFullFailures=true showStackTraces=true) }}
+
+{{> ci-environment options=(obj showFullEnvironment=false) }}
+
+<div class="report-footer">
+  <span>Generated by ReportForge</span>
+  <span>{{formatDate meta.generatedAt}}</span>
+</div>
+
+</body>
+</html>

package/dist/templates/partials/charts.hbs

@@ -0,0 +1,306 @@
+{{#if options.showCharts}}
+<div class="section charts-grid">
+  <div class="chart-card">
+    <h3>Pass Rate</h3>
+    <canvas id="passRateChart" width="186" height="186"></canvas>
+  </div>
+  <div class="chart-card">
+    <h3>Suite Results</h3>
+    <canvas id="suitesBarChart" width="390" height="186"></canvas>
+  </div>
+</div>
+
+{{!-- Trend card: detailed + executive. Minimal skipped (no charts at all).
+     In multi-template runs generateAll overrides meta.template per render pass. --}}
+{{#unless (eq meta.template 'minimal')}}
+{{#if charts.trend}}
+<div class="trend-card">
+  <div class="trend-card__header">
+    <span class="trend-card__title">Pass rate trend &mdash; last {{charts.trend.entries.length}} runs</span>
+    {{!-- Delta badge: falsy guard handles null (< 2 entries) and 0 (identical runs). --}}
+    {{#if charts.trend.delta}}
+    <span class="delta {{#if (gt charts.trend.delta 0)}}delta-up{{else}}delta-down{{/if}}">
+      {{#if (gt charts.trend.delta 0)}}&#8593;{{else}}&#8595;{{/if}} {{absFixed charts.trend.delta}}% vs previous run
+    </span>
+    {{/if}}
+  </div>
+  <canvas id="trendChart" width="680" height="160"></canvas>
+  {{!-- Run history table is populated by JS below; placeholder must exist before script runs. --}}
+  <div class="trend-run-history" id="run-history-table"></div>
+</div>
+{{/if}}
+{{/unless}}
+
+<script>
+(function() {
+  var remaining = 0;
+  function chartDone() { if (--remaining === 0) window.__chartsReady = true; }
+
+  var passed  = {{charts.passRate.passed}};
+  var failed  = {{charts.passRate.failed}};
+  var skipped = {{charts.passRate.skipped}};
+  var flaky   = {{charts.passRate.flaky}};
+  var total   = passed + failed + skipped + flaky;
+  var passRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+
+  /* ── Centre-text plugin for the doughnut ─────────────────────────────── */
+  var centerTextPlugin = {
+    id: 'centerText',
+    afterDatasetsDraw: function(chart) {
+      if (chart.canvas.id !== 'passRateChart') return;
+      var ctx = chart.ctx;
+      var cx  = (chart.chartArea.left + chart.chartArea.right)  / 2;
+      var cy  = (chart.chartArea.top  + chart.chartArea.bottom) / 2;
+      ctx.save();
+      ctx.textAlign    = 'center';
+      ctx.textBaseline = 'middle';
+      /* large percentage */
+      ctx.font      = '700 28px "Source Serif Pro", Georgia, serif';
+      ctx.fillStyle = '#1F1F1C';
+      ctx.fillText(passRate + '%', cx, cy - 7);
+      /* label below */
+      ctx.font      = '600 9px Inter, sans-serif';
+      ctx.fillStyle = '#8C8B82';
+      ctx.fillText('PASS RATE', cx, cy + 13);
+      ctx.restore();
+    }
+  };
+  Chart.register(centerTextPlugin);
+
+  /* ── Pass rate doughnut ──────────────────────────────────────────────── */
+  remaining += 1;
+  new Chart(document.getElementById('passRateChart'), {
+    type: 'doughnut',
+    data: {
+      labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
+      datasets: [{
+        data: [passed, failed, skipped, flaky],
+        backgroundColor: ['#3F7D58', '#C3553C', '#7A786E', '#D49452'],
+        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
+        borderWidth: 2,
+        hoverOffset: 4
+      }]
+    },
+    options: {
+      responsive: false,
+      cutout: '68%',
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            font: { size: 9, family: 'Inter, sans-serif' },
+            color: '#5A5A52', padding: 10, boxWidth: 10, boxHeight: 10
+          }
+        }
+      },
+      animation: { onComplete: chartDone }
+    }
+  });
+
+  /* ── Horizontal suite results bar ────────────────────────────────────── */
+  var suiteLabels  = [{{{jsonArray charts.suiteResults 'label'}}}];
+  var suitePassed  = [{{{jsonArray charts.suiteResults 'passed'}}}];
+  var suiteFailed  = [{{{jsonArray charts.suiteResults 'failed'}}}];
+  var suiteSkipped = [{{{jsonArray charts.suiteResults 'skipped'}}}];
+
+  remaining += 1;
+  new Chart(document.getElementById('suitesBarChart'), {
+    type: 'bar',
+    data: {
+      labels: suiteLabels,
+      datasets: [
+        { label: 'Passed',  data: suitePassed,  backgroundColor: '#3F7D58', borderRadius: 3 },
+        { label: 'Failed',  data: suiteFailed,  backgroundColor: '#C3553C', borderRadius: 3 },
+        { label: 'Skipped', data: suiteSkipped, backgroundColor: '#7A786E', borderRadius: 3 }
+      ]
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: false,
+      scales: {
+        x: {
+          stacked: true,
+          ticks: { font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52', stepSize: 1 },
+          grid:   { color: 'rgba(31,31,28,0.06)' },
+          border: { color: '#D6D4C8' }
+        },
+        y: {
+          stacked: true,
+          ticks: { font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C' },
+          grid:   { display: false },
+          border: { color: '#D6D4C8' }
+        }
+      },
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            font: { size: 9, family: 'Inter, sans-serif' }, color: '#5A5A52',
+            padding: 12, boxWidth: 10, boxHeight: 10
+          }
+        }
+      },
+      animation: { onComplete: chartDone }
+    }
+  });
+
+  {{#unless (eq meta.template 'minimal')}}{{#if charts.trend}}
+  // entries are newest-first in storage; reverse for oldest-left (chronological) display
+  var trendRaw    = {{{safeJsonData charts.trend.entries}}};
+  var trendData   = trendRaw.slice().reverse();
+  var trendMonths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+  var trendLabels = trendData.map(function(e) {
+    var d = new Date(e.timestamp);
+    return trendMonths[d.getMonth()] + ' ' + d.getDate() + ' ' +
+      String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+  });
+  var trendRates = trendData.map(function(e) { return e.passRate; });
+
+  // Points colored by verdict for instant visual distinction across runs
+  var trendPointColors = trendData.map(function(e) {
+    return e.verdict === 'passed'  ? '#3F7D58' :
+           e.verdict === 'failed'  ? '#C3553C' :
+           e.verdict === 'partial' ? '#CA8A04' : '#7A786E';
+  });
+
+  // Smart y-axis: pad above/below the actual data range so variation is readable
+  // rather than a flat line at the top of a 0–100 axis when all runs pass at 96%.
+  var minRate = Math.min.apply(null, trendRates);
+  var maxRate = Math.max.apply(null, trendRates);
+  var yPad    = Math.max(8, Math.round((maxRate - minRate) * 0.4));
+  var yMin    = Math.max(0,   minRate - yPad);
+  var yMax    = Math.min(100, maxRate + yPad);
+
+  // Data-label plugin: renders pass-rate % above each point.
+  // Canvas ID guard prevents firing on the doughnut and bar charts.
+  var trendLabelPlugin = {
+    id: 'trendLabels',
+    afterDatasetsDraw: function(chart) {
+      if (chart.canvas.id !== 'trendChart') return;
+      var ctx2d = chart.ctx;
+      var meta  = chart.getDatasetMeta(0);
+      var ds    = chart.data.datasets[0];
+      meta.data.forEach(function(pt, i) {
+        ctx2d.save();
+        ctx2d.font         = '700 8.5px Inter, sans-serif';
+        ctx2d.fillStyle    = trendPointColors[i];
+        ctx2d.textAlign    = 'center';
+        ctx2d.textBaseline = 'bottom';
+        ctx2d.fillText(ds.data[i] + '%', pt.x, pt.y - 7);
+        ctx2d.restore();
+      });
+    }
+  };
+  Chart.register(trendLabelPlugin);
+
+  var trendCanvas = document.getElementById('trendChart');
+  var trendCtx2d  = trendCanvas.getContext('2d');
+  var trendGrad   = trendCtx2d.createLinearGradient(0, 0, 0, 160);
+  trendGrad.addColorStop(0, 'rgba(204,120,92,0.22)');
+  trendGrad.addColorStop(1, 'rgba(204,120,92,0.02)');
+
+  remaining += 1;
+  new Chart(trendCanvas, {
+    type: 'line',
+    data: {
+      labels: trendLabels,
+      datasets: [{
+        data:                 trendRates,
+        borderColor:          '#CC785C',
+        backgroundColor:      trendGrad,
+        fill:                 true,
+        tension:              0.35,
+        pointRadius:          5,
+        pointBackgroundColor: trendPointColors,
+        pointBorderColor:     '#FFFFFF',
+        pointBorderWidth:     2,
+        borderWidth:          2,
+      }]
+    },
+    options: {
+      animation: { onComplete: chartDone },
+      responsive: false,
+      layout: { padding: { top: 22, right: 10, bottom: 4, left: 4 } },
+      scales: {
+        y: {
+          min: yMin,
+          max: yMax,
+          ticks: {
+            callback: function(v) { return v + '%'; },
+            font:  { size: 8.5, family: 'Inter, sans-serif' },
+            color: '#8C8B82',
+            count: 5,
+          },
+          grid:   { color: 'rgba(31,31,28,0.07)' },
+          border: { color: 'transparent' },
+        },
+        x: {
+          ticks: {
+            font:        { size: 8, family: 'Inter, sans-serif' },
+            color:       '#8C8B82',
+            maxRotation: 0,
+          },
+          grid:   { display: false },
+          border: { color: '#E5E3D8' },
+        }
+      },
+      plugins: { legend: { display: false } },
+    }
+  });
+
+  // Run history table — oldest-first (top→bottom matches chart left→right).
+  // Built via DOM methods (not innerHTML) so no HTML-injection risk.
+  var histEl = document.getElementById('run-history-table');
+  if (histEl) {
+    trendData.forEach(function(e) {
+      var d       = new Date(e.timestamp);
+      var dateStr = trendMonths[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() +
+                    ' · ' +
+                    String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+      var durStr  = e.duration >= 60000
+        ? Math.floor(e.duration / 60000) + 'm ' + Math.round((e.duration % 60000) / 1000) + 's'
+        : (e.duration / 1000).toFixed(1) + 's';
+      var dotCls  = e.verdict === 'passed'  ? 'verdict-passed'  :
+                    e.verdict === 'failed'  ? 'verdict-failed'  :
+                    e.verdict === 'partial' ? 'verdict-partial' : 'verdict-unknown';
+      var rateCls = e.verdict === 'passed'  ? 'rh-rate--pass'    :
+                    e.verdict === 'failed'  ? 'rh-rate--fail'    :
+                    e.verdict === 'partial' ? 'rh-rate--partial' : '';
+
+      var row = document.createElement('div');
+      row.className = 'rh-item rh-item--' + e.verdict;
+
+      var dot = document.createElement('span');
+      dot.className = 'rh-dot verdict-dot ' + dotCls;
+      row.appendChild(dot);
+
+      var dateEl = document.createElement('span');
+      dateEl.className = 'rh-date';
+      dateEl.textContent = dateStr;
+      row.appendChild(dateEl);
+
+      var rateEl = document.createElement('span');
+      rateEl.className = 'rh-rate' + (rateCls ? ' ' + rateCls : '');
+      rateEl.textContent = e.passRate + '%';
+      row.appendChild(rateEl);
+
+      var testsEl = document.createElement('span');
+      testsEl.className = 'rh-tests';
+      testsEl.textContent = e.total + ' tests';
+      row.appendChild(testsEl);
+
+      var durEl = document.createElement('span');
+      durEl.className = 'rh-dur';
+      durEl.textContent = durStr;
+      row.appendChild(durEl);
+
+      histEl.appendChild(row);
+    });
+  }
+  {{/if}}{{/unless}}
+})();
+</script>
+{{else}}
+<script>window.__chartsReady = true;</script>
+{{/if}}

package/dist/templates/partials/ci-environment.hbs

@@ -0,0 +1,56 @@
+<div class="section">
+  <h2>Environment &amp; CI</h2>
+  {{#if options.showFullEnvironment}}
+  <table class="env-table">
+    <tbody>
+      <tr><td>CI Provider</td><td class="env-value">{{environment.ciProvider}}</td></tr>
+      <tr><td>Branch</td>     <td class="env-value">{{environment.branch}}</td></tr>
+      <tr><td>Commit</td>     <td class="env-value">{{environment.commit}}</td></tr>
+      {{#if environment.buildUrl}}
+      <tr><td>Build URL</td>  <td class="env-value"><a href="{{environment.buildUrl}}" style="color:var(--primary,#CC785C);">{{environment.buildUrl}}</a></td></tr>
+      {{/if}}
+      <tr><td>Browsers</td>   <td class="env-value">{{join environment.browsers ", "}}</td></tr>
+      <tr><td>OS</td>         <td class="env-value">{{environment.os}}</td></tr>
+      <tr><td>Node.js</td>    <td class="env-value">{{environment.nodeVersion}}</td></tr>
+      <tr><td>Playwright</td> <td class="env-value">v{{environment.playwrightVersion}}</td></tr>
+      <tr><td>Projects</td>   <td class="env-value">{{environment.projectCount}}</td></tr>
+      <tr><td>Workers</td>    <td class="env-value">{{environment.workerCount}}</td></tr>
+    </tbody>
+  </table>
+  {{else}}
+  <div class="env-grid">
+    <div class="env-item">
+      <span class="env-item__key">Branch</span>
+      <span class="env-item__val">{{environment.branch}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Commit</span>
+      <span class="env-item__val">{{environment.commit}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Browsers</span>
+      <span class="env-item__val">{{join environment.browsers ", "}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">CI</span>
+      <span class="env-item__val">{{environment.ciProvider}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Node</span>
+      <span class="env-item__val">{{environment.nodeVersion}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Playwright</span>
+      <span class="env-item__val">v{{environment.playwrightVersion}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Projects</span>
+      <span class="env-item__val">{{environment.projectCount}}</span>
+    </div>
+    <div class="env-item">
+      <span class="env-item__key">Workers</span>
+      <span class="env-item__val">{{environment.workerCount}}</span>
+    </div>
+  </div>
+  {{/if}}
+</div>

package/dist/templates/partials/cover-page.hbs

@@ -0,0 +1,46 @@
+<div class="cover-page">
+  {{#if meta.branding.logoBase64}}
+    <img class="cover-page__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+  {{/if}}
+
+  <div class="cover-page__title">{{meta.title}}</div>
+  <div class="cover-page__subtitle">{{meta.projectName}}</div>
+
+  <div class="cover-page__divider"></div>
+
+  <span class="cover-page__verdict cover-page__verdict--{{stats.verdict}}">
+    {{upperCase stats.verdict}}
+  </span>
+
+  <div class="cover-page__stats-strip">
+    <div class="cover-page__stat">
+      <div class="cover-page__stat-val">{{stats.total}}</div>
+      <div class="cover-page__stat-lbl">Tests</div>
+    </div>
+    <div class="cover-page__stat">
+      <div class="cover-page__stat-val" style="color:var(--pass);">{{stats.passed}}</div>
+      <div class="cover-page__stat-lbl">Passed</div>
+    </div>
+    <div class="cover-page__stat">
+      <div class="cover-page__stat-val" style="color:var(--fail);">{{stats.failed}}</div>
+      <div class="cover-page__stat-lbl">Failed</div>
+    </div>
+    <div class="cover-page__stat">
+      <div class="cover-page__stat-val" style="color:var(--pass);">{{stats.passRate}}%</div>
+      <div class="cover-page__stat-lbl">Pass Rate</div>
+    </div>
+    <div class="cover-page__stat">
+      <div class="cover-page__stat-val">{{formatDuration stats.duration}}</div>
+      <div class="cover-page__stat-lbl">Duration</div>
+    </div>
+  </div>
+
+  <div class="cover-page__meta">
+    Generated {{formatDate meta.generatedAt}}
+  </div>
+  <div class="cover-page__meta">
+    Branch: <strong style="color:var(--text-1);">{{environment.branch}}</strong>
+    &nbsp;·&nbsp;
+    Commit: <strong style="color:var(--text-1);">{{environment.commit}}</strong>
+  </div>
+</div>

package/dist/templates/partials/defect-log.hbs

@@ -0,0 +1,27 @@
+{{#if failures.length}}
+<div class="section">
+  <h2>Defect Log</h2>
+  <table>
+    <thead>
+      <tr>
+        <th style="width:58px;">ID</th>
+        <th>Title</th>
+        <th style="width:100px;">Suite</th>
+        <th style="width:80px;">Severity</th>
+        <th style="width:55px;text-align:center;">Retries</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each failures}}
+      <tr class="no-break">
+        <td class="defect-id">DEF-{{addOne @index}}</td>
+        <td style="font-weight:500;">{{testTitle}}</td>
+        <td style="font-size:9px;color:var(--text-3);font-family:'JetBrains Mono',monospace;">{{lastItem suitePath}}</td>
+        <td><span class="severity--{{severity}}">{{upperCase severity}}</span></td>
+        <td style="text-align:center;color:var(--text-3);">{{retryCount}}</td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>
+{{/if}}

package/dist/templates/partials/executive-summary.hbs

@@ -0,0 +1,60 @@
+<div class="section">
+  <span class="verdict verdict--{{stats.verdict}}">
+    {{upperCase stats.verdict}}
+  </span>
+
+  <div class="kpi-strip">
+    <div class="kpi-card kpi-card--total">
+      <div class="kpi-card__value">{{stats.total}}</div>
+      <div class="kpi-card__label">Total</div>
+    </div>
+    <div class="kpi-card kpi-card--pass">
+      <div class="kpi-card__value">{{stats.passed}}</div>
+      <div class="kpi-card__label">Passed</div>
+      {{#if options.showPassRate}}
+      <div class="kpi-card__rate">{{stats.passRate}}%</div>
+      {{/if}}
+    </div>
+    <div class="kpi-card kpi-card--fail">
+      <div class="kpi-card__value">{{stats.failed}}</div>
+      <div class="kpi-card__label">Failed</div>
+    </div>
+    <div class="kpi-card kpi-card--skip">
+      <div class="kpi-card__value">{{stats.skipped}}</div>
+      <div class="kpi-card__label">Skipped</div>
+    </div>
+    <div class="kpi-card kpi-card--flaky">
+      <div class="kpi-card__value">{{stats.flaky}}</div>
+      <div class="kpi-card__label">Flaky</div>
+    </div>
+  </div>
+
+  <div class="summary-row">
+    <div class="summary-row__item">
+      <span class="summary-row__label">Duration</span>
+      <span class="summary-row__value">{{formatDuration stats.duration}}</span>
+    </div>
+    <div class="summary-row__item">
+      <span class="summary-row__label">Pass Rate</span>
+      <span class="summary-row__value" style="color:var(--pass);">{{stats.passRate}}%</span>
+    </div>
+    <div class="summary-row__item">
+      <span class="summary-row__label">Generated</span>
+      <span class="summary-row__value">{{formatDate meta.generatedAt}}</span>
+    </div>
+    <div class="summary-row__item">
+      <span class="summary-row__label">Project</span>
+      <span class="summary-row__value">{{meta.projectName}}</span>
+    </div>
+  </div>
+
+  {{#if stats.flaky}}
+  <div class="flaky-callout">
+    <span class="flaky-callout__icon">&#9888;</span>
+    <div class="flaky-callout__body">
+      <span class="flaky-callout__title">{{stats.flaky}} Flaky Test{{#if (gt stats.flaky 1)}}s{{/if}} Detected</span>
+      <span class="flaky-callout__text">These tests passed on retry. Results may vary across re-runs. Investigate before shipping to production.</span>
+    </div>
+  </div>
+  {{/if}}
+</div>

package/dist/templates/partials/failure-deep-dive.hbs

@@ -0,0 +1,61 @@
+{{#if failures.length}}
+<div class="section page-break">
+  <h2>Failures ({{failures.length}}{{#if overflowFailureCount}} shown · {{overflowFailureCount}} more in sidecar{{/if}})</h2>
+  {{#if overflowFailureCount}}
+  <div class="overflow-banner">
+    Showing the first {{failures.length}} failures. {{overflowFailureCount}} additional
+    failure{{#if (gt overflowFailureCount 1)}}s are{{else}} is{{/if}} available in
+    <code>{{overflowSidecarName}}</code> alongside this report.
+  </div>
+  {{/if}}
+  {{#each failures}}
+  <div class="failure-item no-break">
+    {{#if ../options.showFullFailures}}
+
+    <div class="failure-item__header">
+      <div>
+        <div class="failure-item__title">{{testTitle}}</div>
+        <div class="failure-item__path">{{join suitePath " › "}}</div>
+      </div>
+      <span class="badge badge--failed severity--{{severity}}" style="white-space:nowrap;">
+        {{upperCase severity}}
+      </span>
+    </div>
+
+    <div class="failure-item__message">{{error.message}}</div>
+
+    {{#if error.stack}}
+      {{#if ../options.showStackTraces}}
+      <pre>{{error.stack}}</pre>
+      {{/if}}
+    {{/if}}
+
+    {{#if screenshotBase64}}
+      <img class="screenshot" src="{{screenshotBase64}}" alt="Screenshot at failure">
+    {{/if}}
+
+    {{#if retryHistory.length}}
+    <div class="retry-history">
+      Retry history:&nbsp;
+      {{#each retryHistory}}
+        <span class="retry-attempt retry-attempt--{{status}}">
+          #{{attempt}} {{status}} · {{formatDuration duration}}
+        </span>
+      {{/each}}
+    </div>
+    {{/if}}
+
+    {{else}}
+    {{!-- Executive: title + suite only --}}
+    <div class="failure-summary-item">
+      <div>
+        <div class="failure-summary-item__title">{{testTitle}}</div>
+        <div class="failure-summary-item__suite">{{join suitePath " › "}}</div>
+      </div>
+      <span class="badge badge--failed">FAILED</span>
+    </div>
+    {{/if}}
+  </div>
+  {{/each}}
+</div>
+{{/if}}