@reportforge/playwright-pdf 0.6.3 → 0.7.1

package/dist/index.mjs

@@ -10330,7 +10330,8 @@ var DEFAULT_OPTIONS = {
   maxFileSizeMb: 8,
   historySize: 10,
   showTrend: true,
-  flakinessTopN: 5
+  flakinessTopN: 5,
+  slowTestThreshold: 10
 };
 
 // src/templates/sections.ts
@@ -10407,7 +10408,10 @@ var SECTION_DEFAULTS = {
     trend: true,
     requirementsMatrix: false,
     ciEnvironment: true,
-    suiteBreakdown: false,
+    // Suite breakdown now hosts the inline failure detail + slow badge, so the
+    // executive layout renders it too (compact: fullFailures stays false → no
+    // screenshots; failureAnalysis stays off → no per-test chip).
+    suiteBreakdown: true,
     failureDeepDive: true,
     failureAnalysis: false,
     slowTests: true,
@@ -10434,6 +10438,7 @@ function resolveSections(template, userSections) {
   }
   const result = { ...base, ...flat, ...perTemplate };
   if (!result.charts) result.trend = false;
+  if (!result.failureDeepDive) result.failureAnalysis = false;
   return result;
 }
 function allSectionsOn() {
@@ -10510,6 +10515,7 @@ var ReporterOptionsSchema = external_exports.object({
   historySize: external_exports.number().int().min(2).optional().default(DEFAULT_OPTIONS.historySize),
   showTrend: external_exports.boolean().optional().default(DEFAULT_OPTIONS.showTrend),
   flakinessTopN: external_exports.number().int().min(0, "flakinessTopN must be 0 or greater").optional().default(DEFAULT_OPTIONS.flakinessTopN),
+  slowTestThreshold: external_exports.number().int().min(0, "slowTestThreshold must be 0 or greater").optional().default(DEFAULT_OPTIONS.slowTestThreshold),
   failureAnalysis: failureAnalysisConfigSchema,
   templatePath: external_exports.union([
     external_exports.string().regex(/\.hbs$/, "templatePath must end with .hbs").refine((v) => v.slice(0, -4).trim().length > 0, "templatePath basename must not be empty"),
@@ -11173,6 +11179,14 @@ function classifyOne(f, model) {
 function classifyAll(failures, model) {
   return failures.map((f) => classifyOne(f, model));
 }
+function perTestClassifications(classified) {
+  return classified.map((c) => ({
+    testId: c.failure.testId,
+    category: c.category,
+    message: representativeMessage(c.failure.error.message),
+    strength: strengthOf(c.margin)
+  }));
+}
 function clusterClassified(classified) {
   const groups = /* @__PURE__ */ new Map();
   for (const c of classified) {
@@ -11348,6 +11362,7 @@ function runFailureAnalysis(reportData, options, cwd) {
   const analysed = reportData.failures.slice(0, cap);
   const model = loadModel(fa.autoUpdateModel);
   const classified = classifyAll(analysed, model);
+  reportData.classifications = perTestClassifications(classified);
   if (templatesConsumeAnalysis(options)) {
     reportData.analysis = analyseClassified(classified, reportData.failures.length, fa);
   }
@@ -12034,6 +12049,7 @@ function jsonForInlineScript(value) {
 function isUnknownValue(v) {
   return !v || v === "unknown";
 }
+var SLOW_MEDIAN_FACTOR = 2;
 function deriveOptions(s) {
   return {
     showCharts: s.charts,
@@ -12070,17 +12086,17 @@ var TemplateEngine = class {
   setChartjsBundle(inline) {
     this.chartjsInline = inline;
   }
-  render(data, template, userSections) {
+  render(data, template, userSections, slowTestThreshold) {
     const layoutPath = path7.join(this.templatesDir, "layouts", `${template}.hbs`);
     if (!fs5.existsSync(layoutPath)) {
       throw new Error(`[reportforge] Template layout not found: ${layoutPath}`);
     }
     const layoutSource = fs5.readFileSync(layoutPath, "utf8");
     const compiledLayout = this.handlebars.compile(layoutSource);
-    const ctx = this.buildContext(data, template, userSections);
+    const ctx = this.buildContext(data, template, userSections, slowTestThreshold);
     return compiledLayout(ctx);
   }
-  renderFromPath(data, filePath) {
+  renderFromPath(data, filePath, slowTestThreshold) {
     if (!this.customTemplateCache.has(filePath)) {
       if (!fs5.existsSync(filePath)) {
         throw new Error(`[reportforge] Custom template not found: ${filePath}`);
@@ -12089,32 +12105,41 @@ var TemplateEngine = class {
       this.customTemplateCache.set(filePath, this.handlebars.compile(source));
     }
     const compiledFn = this.customTemplateCache.get(filePath);
-    return compiledFn(this.buildCustomContext(data));
+    return compiledFn(this.buildCustomContext(data, slowTestThreshold));
   }
-  buildCustomContext(data) {
+  buildCustomContext(data, slowTestThreshold) {
     const sections = allSectionsOn();
+    const slow = this.buildSlowTests(data);
     return {
       ...data,
+      projects: this.enrichProjects(data, slow, sections, slowTestThreshold ?? DEFAULT_OPTIONS.slowTestThreshold),
       options: deriveOptions(sections),
       sections,
       tagGroups: this.buildTagGroups(data),
-      slowTests: this.buildSlowTests(data),
+      slowTests: slow.ranked,
       baseCSS: this.fontsBundleCss + "\n" + this.readStyle("base.css"),
       templateCSS: "",
       chartjsScript: this.buildChartjsScript()
     };
   }
-  buildContext(data, template, userSections) {
+  buildContext(data, template, userSections, slowTestThreshold) {
     const baseCSS = this.fontsBundleCss + "\n" + this.readStyle("base.css");
     const templateCSS = this.readStyle(`${template}.css`);
     const sections = resolveSections(template, userSections);
     const options = deriveOptions(sections);
+    const slow = this.buildSlowTests(data);
     return {
       ...data,
+      projects: this.enrichProjects(
+        data,
+        slow,
+        sections,
+        slowTestThreshold ?? DEFAULT_OPTIONS.slowTestThreshold
+      ),
       options,
       sections,
       tagGroups: this.buildTagGroups(data),
-      slowTests: this.buildSlowTests(data),
+      slowTests: slow.ranked,
       baseCSS,
       templateCSS,
       chartjsScript: this.buildChartjsScript()
@@ -12151,6 +12176,7 @@ var TemplateEngine = class {
         for (const test of suite.tests) {
           if (test.duration > 0) {
             tests.push({
+              id: test.id,
               title: test.title,
               suiteTitle: suite.title,
               durationMs: test.duration,
@@ -12162,7 +12188,39 @@ var TemplateEngine = class {
         }
       }
     }
-    return tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    const sortedDurations = tests.map((t) => t.durationMs).sort((a, b) => a - b);
+    const medianMs = sortedDurations.length ? sortedDurations[Math.floor((sortedDurations.length - 1) / 2)] : 0;
+    const ranked = tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    return { ranked, timedTotal: tests.length, medianMs };
+  }
+  /**
+   * Project the suite tree into its render form: attach each test's failure detail
+   * (by testId), root-cause chip, and slow rank. A pure projection — the source
+   * ReportData is never mutated. Gating lives here (not the template): a field is
+   * attached only when its section is on, so the template just checks presence.
+   * `failuresById` is built from the (possibly overflow-trimmed) `failures` array,
+   * so a trimmed failure yields no inline card; the overflow note points to the sidecar.
+   */
+  enrichProjects(data, slow, sections, slowTestThreshold) {
+    const failuresById = sections.failureDeepDive ? new Map(data.failures.map((f) => [f.testId, f])) : /* @__PURE__ */ new Map();
+    const chipById = sections.failureAnalysis ? new Map((data.classifications ?? []).map((c) => [c.testId, c])) : /* @__PURE__ */ new Map();
+    const slowRankById = /* @__PURE__ */ new Map();
+    if (sections.slowTests && slow.timedTotal > slowTestThreshold) {
+      const floorMs = slow.medianMs * SLOW_MEDIAN_FACTOR;
+      slow.ranked.filter((t) => t.durationMs >= floorMs).forEach((t, i) => slowRankById.set(t.id, i + 1));
+    }
+    const enrichTest = (t) => ({
+      ...t,
+      failure: failuresById.get(t.id),
+      chip: chipById.get(t.id),
+      slowRank: slowRankById.get(t.id)
+    });
+    const enrichSuite = (s) => ({
+      ...s,
+      suites: s.suites.map(enrichSuite),
+      tests: s.tests.map(enrichTest)
+    });
+    return data.projects.map((p) => ({ ...p, suites: p.suites.map(enrichSuite) }));
   }
   readStyle(filename) {
     const cached = this.styleCache.get(filename);
@@ -12841,7 +12899,7 @@ var PdfGenerator = class {
     }
     const templateLabel = source.kind === "builtin" ? source.id : source.label;
     logger.info(`Rendering template: ${templateLabel}`);
-    const html = source.kind === "builtin" ? this.templateEngine.render(renderData, source.id, options.sections) : this.templateEngine.renderFromPath(renderData, source.absolutePath);
+    const html = source.kind === "builtin" ? this.templateEngine.render(renderData, source.id, options.sections, options.slowTestThreshold) : this.templateEngine.renderFromPath(renderData, source.absolutePath, options.slowTestThreshold);
     const tempHtmlPath = await this.htmlWriter.write(html);
     const fileUrl = this.htmlWriter.toFileUrl(tempHtmlPath);
     try {
@@ -13238,7 +13296,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.6.3" : "0.x";
+    const version = true ? "0.7.1" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/layouts/detailed.hbs

@@ -18,7 +18,7 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
-{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate) }}{{/if}}
+{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
 
 {{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
 
@@ -26,13 +26,7 @@
 
 {{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
 
-{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries) }}{{/if}}
-
-{{#if sections.failureDeepDive}}{{> failure-deep-dive options=(obj showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
-
-{{#if sections.failureAnalysis}}{{> failure-analysis}}{{/if}}
-
-{{#if sections.slowTests}}{{> slow-tests limit=10 showProject=true}}{{/if}}
+{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
 
 {{#if sections.defectLog}}{{> defect-log }}{{/if}}
 

package/dist/templates/layouts/executive.hbs

@@ -18,23 +18,17 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
-{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate) }}{{/if}}
+{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
 
 {{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
 
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 
-{{#if sections.slowTests}}{{> slow-tests limit=5 showProject=false}}{{/if}}
-
-{{#if sections.failureDeepDive}}{{> failure-deep-dive options=(obj showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
-
-{{#if sections.failureAnalysis}}{{> failure-analysis}}{{/if}}
-
 {{#if sections.defectLog}}{{> defect-log }}{{/if}}
 
 {{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
 
-{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries) }}{{/if}}
+{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
 
 <div class="report-footer">
   <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>

package/dist/templates/layouts/minimal.hbs

@@ -18,19 +18,13 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
-{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate) }}{{/if}}
+{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
 
 {{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
 
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 
-{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries) }}{{/if}}
-
-{{#if sections.failureDeepDive}}{{> failure-deep-dive options=(obj showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
-
-{{#if sections.failureAnalysis}}{{> failure-analysis}}{{/if}}
-
-{{#if sections.slowTests}}{{> slow-tests limit=10 showProject=true}}{{/if}}
+{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
 
 {{#if sections.defectLog}}{{> defect-log }}{{/if}}
 

package/dist/templates/partials/charts.hbs

@@ -166,14 +166,14 @@
         y: {
           stacked: true,
           // Widen the label gutter so the longest label isn't clipped at the canvas edge.
-          afterFit: function(scale) { if (!scale.$rfPadded) { scale.$rfPadded = true; scale.width += 12; } },
+          afterFit: function(scale) { if (!scale.$rfPadded) { scale.$rfPadded = true; scale.width += 30; } },
           ticks: {
             font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
-            // Truncate long suite / describe labels so they fit the axis gutter
-            // instead of clipping at the canvas edge.
+            // Truncate only very long suite / describe labels; the wider gutter above
+            // lets most labels show in full instead of clipping at the canvas edge.
             callback: function(value) {
               var l = this.getLabelForValue(value);
-              return l.length > 18 ? l.slice(0, 17) + '…' : l;
+              return l.length > 24 ? l.slice(0, 23) + '…' : l;
             }
           },
           grid:   { display: false },
@@ -215,11 +215,17 @@
 
   // 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%.
+  // Pick the step FIRST, then snap the bounds to multiples of that step, so every
+  // tick (min, min+step, … max) is a round value — never 45% / 70% from a min that
+  // isn't itself a multiple of the step. Clamps to 0/100 keep the bounds round too.
   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);
+  var rawMin  = Math.max(0,   minRate - yPad);
+  var rawMax  = Math.min(100, maxRate + yPad);
+  var yStep   = (rawMax - rawMin) <= 20 ? 5 : (rawMax - rawMin) <= 50 ? 10 : 25;
+  var yMin    = Math.max(0,   Math.floor(rawMin / yStep) * yStep);
+  var yMax    = Math.min(100, Math.ceil(rawMax / yStep) * yStep);
 
   // Data-label plugin: renders pass-rate % above each point.
   // Canvas ID guard prevents firing on the doughnut and bar charts.
@@ -279,7 +285,7 @@
             callback: function(v) { return v + '%'; },
             font:  { size: 8.5, family: 'Inter, sans-serif' },
             color: '#8C8B82',
-            count: 5,
+            stepSize: yStep,
           },
           grid:   { color: 'rgba(31,31,28,0.07)' },
           border: { color: 'transparent' },

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

@@ -1,7 +1,13 @@
 <div class="section">
+  {{!-- The release gate (when the layout renders it) already states the verdict
+        prominently, so the chip would just repeat it — suppress it then. The layout
+        passes options.releaseGateShown; it is absent for custom templates, so the
+        chip renders by default there (a custom template may not include a gate). --}}
+  {{#unless options.releaseGateShown}}
   <span class="verdict verdict--{{stats.verdict}}">
     {{verdictLabel stats.verdict}}
   </span>
+  {{/unless}}
 
   <div class="kpi-strip">
     <div class="kpi-card kpi-card--total">
@@ -15,19 +21,21 @@
       <div class="kpi-card__rate">{{stats.passRate}}%</div>
       {{/if}}
     </div>
-    <div class="kpi-card kpi-card--fail">
+    {{!-- Zero-value status cards are dimmed: a coloured "0" for an absent status
+          draws the eye to nothing and dilutes the counts that matter. --}}
+    <div class="kpi-card kpi-card--fail{{#unless stats.failed}} kpi-card--zero{{/unless}}">
       <div class="kpi-card__value">{{stats.failed}}</div>
       <div class="kpi-card__label">Failed</div>
     </div>
-    <div class="kpi-card kpi-card--timedout">
+    <div class="kpi-card kpi-card--timedout{{#unless stats.timedOut}} kpi-card--zero{{/unless}}">
       <div class="kpi-card__value">{{stats.timedOut}}</div>
       <div class="kpi-card__label">Timed Out</div>
     </div>
-    <div class="kpi-card kpi-card--skip">
+    <div class="kpi-card kpi-card--skip{{#unless stats.skipped}} kpi-card--zero{{/unless}}">
       <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 kpi-card--flaky{{#unless stats.flaky}} kpi-card--zero{{/unless}}">
       <div class="kpi-card__value">{{stats.flaky}}</div>
       <div class="kpi-card__label">Flaky</div>
     </div>
@@ -38,10 +46,16 @@
       <span class="summary-row__label">Duration</span>
       <span class="summary-row__value">{{formatDuration stats.duration}}</span>
     </div>
+    {{!-- Pass rate normally shows on the Passed KPI card and the doughnut centre, so
+          it is omitted here to avoid a third restatement on one page. Fallback: if
+          BOTH of those are off (passRate modifier off AND charts off, e.g. a stripped
+          minimal), show it here so the headline metric never disappears entirely. --}}
+    {{#unless (or options.showPassRate @root.sections.charts)}}
     <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>
+    {{/unless}}
     <div class="summary-row__item">
       <span class="summary-row__label">Generated</span>
       <span class="summary-row__value">{{formatDate meta.generatedAt}}</span>

package/dist/templates/partials/failure-card.hbs

@@ -0,0 +1,27 @@
+{{!-- Inline failure detail, rendered inside the single .failure-detail block in
+      the suite breakdown (which provides the rail, indent, and page-break guard).
+      The test row already shows the title/location, so this is error + screenshot
+      + retry history only. Caller passes the context:
+        failure   — the FailureRecord for this test
+        showFull  — include the screenshot (compact templates pass false)
+        showStack — render the stack trace instead of the bare message --}}
+{{#if (and failure.error.stack showStack)}}
+  <pre>{{failure.error.stack}}</pre>
+{{else}}
+  <div class="failure-item__message">{{failure.error.message}}</div>
+{{/if}}
+
+{{#if (and showFull failure.screenshotBase64)}}
+  <img class="screenshot" src="{{failure.screenshotBase64}}" alt="Screenshot at failure">
+{{/if}}
+
+{{#if failure.retryHistory.length}}
+<div class="retry-history">
+  Retry history:&nbsp;
+  {{#each failure.retryHistory}}
+    <span class="retry-attempt retry-attempt--{{status}}">
+      #{{addOne attempt}} {{status}} · {{formatDuration duration}}
+    </span>
+  {{/each}}
+</div>
+{{/if}}

package/dist/templates/partials/suite-breakdown.hbs

@@ -1,5 +1,12 @@
 <div class="section">
   <h2>Suite Breakdown</h2>
+  {{#if (and overflowFailureCount sections.failureDeepDive)}}
+  <div class="overflow-banner">
+    Inline failure detail covers the first {{failures.length}} failures.
+    {{overflowFailureCount}} more {{#if (gt overflowFailureCount 1)}}are{{else}}is{{/if}}
+    available in <code>{{overflowSidecarName}}</code> alongside this report.
+  </div>
+  {{/if}}
   {{#each projects}}
     <h3 style="color:var(--primary,#CC785C);margin-bottom:8px;">{{name}}</h3>
     {{#each suites}}
@@ -25,14 +32,14 @@
     <thead>
       <tr>
         <th>Test</th>
-        <th style="width:88px;">Status</th>
+        <th style="width:112px;">Status</th>
         <th style="width:72px;">Duration</th>
-        {{#if ../options.showRetries}}<th style="width:52px;">Retries</th>{{/if}}
+        {{#if @root.options.showRetries}}<th style="width:52px;">Retries</th>{{/if}}
       </tr>
     </thead>
     <tbody>
       {{#each tests}}
-      <tr class="no-break">
+      <tr class="no-break{{#if failure}} test-row--has-detail{{/if}}">
         <td>
           <div style="font-weight:500;">{{title}}</div>
           {{#if location}}<div class="test-path">{{location}}</div>{{/if}}
@@ -42,10 +49,29 @@
           </div>
           {{/if}}
         </td>
-        <td>{{statusBadge status}}</td>
+        <td style="white-space:nowrap;">
+          {{statusBadge status}}{{#if slowRank}}<span class="badge badge--slow" title="Among the slowest tests">SLOW</span>{{/if}}
+        </td>
         <td style="color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;">{{formatDuration duration}}</td>
-        {{#if ../../options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
+        {{#if @root.options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
+      </tr>
+      {{#if failure}}
+      <tr class="failure-row no-break">
+        <td colspan="{{#if @root.options.showRetries}}4{{else}}3{{/if}}">
+          <div class="failure-detail failure-detail--{{failure.severity}}">
+            {{> failure-card failure=failure showFull=@root.options.showFullFailures showStack=@root.options.showStackTraces}}
+            {{#if chip}}
+            <div class="root-cause-chip root-cause-chip--{{chip.category}}">
+              <span class="root-cause-chip__tag">Root cause</span>
+              <span class="root-cause-chip__label">{{categoryLabel chip.category}}</span>
+              <span class="root-cause-chip__msg">{{chip.message}}</span>
+              <span class="root-cause-chip__strength">{{strengthLabel chip.strength}} match</span>
+            </div>
+            {{/if}}
+          </div>
+        </td>
       </tr>
+      {{/if}}
       {{/each}}
     </tbody>
   </table>

package/dist/templates/styles/base.css

@@ -153,6 +153,12 @@ tr:last-child td { border-bottom: none; }
 
 /* ── Page breaks ────────────────────────────────────────────────────────── */
 .no-break { page-break-inside: avoid; }
+/* Keep a failed test row glued to its inline failure detail: the detail block is
+   page-break-inside:avoid, so when it can't fit the remaining space it moves to the
+   next page — these pull the test row along so the title never orphans above it. */
+.test-row--has-detail { page-break-after: avoid; break-after: avoid; }
+.test-row--has-detail > td { border-bottom: none; }
+.failure-row { page-break-before: avoid; break-before: avoid; }
 
 /* ── Section wrapper ────────────────────────────────────────────────────── */
 /* Large sections (suite breakdown, failures, tables) MAY flow across pages —
@@ -292,12 +298,90 @@ code {
 .release-gate__sep { color: var(--border-3); }
 .release-gate__flaky-warn { color: var(--flaky); font-weight: 600; }
 
-/* ── Failure severity — colour the card's left edge by triage rank ───────── */
-/* Two-class specificity beats the per-template `.failure-item` border shorthand. */
-.failure-item.failure-item--critical { border-left-color: var(--fail); }
-.failure-item.failure-item--high     { border-left-color: #A35E1E; }
-.failure-item.failure-item--medium   { border-left-color: var(--timeout); }
-.failure-item.failure-item--low      { border-left-color: var(--text-3); }
+/* ── Inline failure detail — ONE block hanging off the failed test row ────────
+      A single severity-coloured left rail + hairline dividers tie the error,
+      retry history, and root cause together as the failed test's detail (not
+      three separate boxes). Lives here so every template's breakdown can use it. */
+.failure-row > td { padding: 0; border: none; background: transparent; }
+.failure-detail {
+  border-left: 3px solid var(--fail);
+  margin: 2px 10px 10px 12px;     /* slight indent under the test row + gap before next row */
+  padding: 11px 0 11px 16px;
+  page-break-inside: avoid;
+}
+.failure-detail--critical { border-left-color: var(--fail); }
+.failure-detail--high     { border-left-color: #A35E1E; }
+.failure-detail--medium   { border-left-color: var(--timeout); }
+.failure-detail--low      { border-left-color: var(--text-3); }
+
+/* error — flat on the rail, no inner box (override the base pre panel) */
+.failure-detail pre {
+  margin: 0; padding: 0;
+  background: transparent; border: none; border-radius: 0; max-height: none;
+}
+.failure-detail .failure-item__message {
+  background: transparent; border: none; border-radius: 0; padding: 0; margin: 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px; color: #8A2E1E; word-break: break-word; line-height: 1.6;
+}
+
+/* retry history — divider above, same block */
+.retry-history {
+  font-size: 9px; color: var(--text-3); margin-top: 11px;
+  padding-top: 10px; border-top: 1px solid var(--border);
+  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  letter-spacing: 0.5px; text-transform: uppercase;
+}
+.retry-attempt {
+  display: inline-block; padding: 2px 7px;
+  border-radius: 3px; margin-right: 4px;
+  font-size: 8.5px; font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+.retry-attempt--failed { background: var(--fail-dim); color: var(--fail); border: 1px solid #E5C9BD; }
+.retry-attempt--passed { background: var(--pass-dim); color: var(--pass); border: 1px solid #C5DBC9; }
+
+/* Slow-test badge — a compact tag inline beside the status badge (min-width:0
+   overrides the .badge 50px floor so it doesn't wrap onto its own line). */
+.badge--slow {
+  background: var(--timeout-dim); color: var(--timeout);
+  border: 1px solid #E5D2A8;
+  min-width: 0; margin-left: 5px;
+  padding: 1px 5px; font-size: 7.5px; letter-spacing: 0.4px;
+}
+
+/* Root cause — footer of the same failure block: a divider above, no box and no
+   second rail (the block already carries one). */
+.root-cause-chip {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
+  margin-top: 11px; padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px;
+}
+.root-cause-chip__tag {
+  font-size: 8px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
+  color: var(--text-3);
+}
+.root-cause-chip__label { font-weight: 700; color: var(--text-1); }
+.root-cause-chip__msg {
+  font-family: 'JetBrains Mono', monospace; color: var(--text-2);
+  word-break: break-word;
+}
+.root-cause-chip__strength {
+  margin-left: auto; font-size: 8.5px; font-weight: 600;
+  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3);
+}
+/* Subtle category cue — tint only the category name (no box, no second rail), so
+   the chip stays "quiet" but failures are still scannable by root-cause type. */
+.root-cause-chip--assertion .root-cause-chip__label,
+.root-cause-chip--locator-not-found .root-cause-chip__label { color: oklch(52% 0.19 25); }
+.root-cause-chip--timeout .root-cause-chip__label           { color: oklch(50% 0.13 65); }
+.root-cause-chip--network .root-cause-chip__label,
+.root-cause-chip--navigation .root-cause-chip__label        { color: oklch(50% 0.15 260); }
+.root-cause-chip--flaky-by-retry .root-cause-chip__label    { color: oklch(50% 0.15 290); }
+.root-cause-chip--env-config .root-cause-chip__label        { color: oklch(48% 0.14 145); }
+.root-cause-chip--unknown .root-cause-chip__label           { color: var(--text-2); }
 
 /* ── History trend card — shared by detailed + executive (charts.hbs) ─────── */
 .trend-card {
@@ -586,6 +670,11 @@ code {
   print-color-adjust: exact;
 }
 
+/* Dimmed zero-value KPI card — a coloured "0" for an absent status (no timeouts,
+   no flakes) draws the eye to nothing; muting it lets the real counts lead. Shared
+   modifier so every template's kpi-strip gets it. */
+.kpi-card--zero { opacity: 0.42; }
+
 /* ── Suite breakdown — shared so any template (incl. executive) can toggle it on ─ */
 /* Values match the detailed template; minimal.css keeps its own tuned overrides
    for .suite-group (margin) and .suite-stats (gap), which win via templateCSS order. */
@@ -656,23 +745,6 @@ code {
   font-size: 9.5px; color: var(--text-1);
 }
 
-/* ── Failure Analysis — shared so any template can toggle the section on ────── */
-/* NOTE: .analysis-oneliner lives in base.css above — the executive template renders it too. */
-.failure-analysis { margin-top: 24px; }
-.failure-analysis .oneliner { font-weight: 600; }
-.analysis-truncated { font-size: 0.85em; opacity: 0.8; }
-
-.cluster { border-left: 3px solid; padding-left: 12px; margin-bottom: 16px; }
-.cluster-header { display: flex; gap: 12px; align-items: baseline; }
-.cluster-strength--strong   { color: oklch(55% 0.15 145); }
-.cluster-strength--moderate { color: oklch(60% 0.18 65);  }
-.cluster-strength--weak     { color: oklch(55% 0.20 25);  }
-.cluster--timeout           { border-color: oklch(60% 0.18 65);  }
-.cluster--assertion         { border-color: oklch(55% 0.20 25);  }
-.cluster--locator-not-found { border-color: oklch(55% 0.20 25);  }
-.cluster--network           { border-color: oklch(55% 0.15 260); }
-.cluster--navigation        { border-color: oklch(55% 0.15 260); }
-.cluster--flaky-by-retry    { border-color: oklch(55% 0.15 290); }
-.cluster--env-config        { border-color: oklch(55% 0.15 145); }
-.cluster--unknown           { border-color: oklch(60% 0.00 0);   }
-.confidence-warning { font-size: 0.8em; opacity: 0.75; }
+/* The aggregate failure-analysis cluster section was retired — root causes now
+   render as inline per-test chips in the suite breakdown (.root-cause-chip above).
+   The .analysis-oneliner one-liner lives further up and is still used by executive. */