@reportforge/playwright-pdf 0.6.2 → 0.7.0

package/dist/index.d.mts

@@ -234,6 +234,14 @@ interface ReporterOptions {
      * @default 5
      */
     flakinessTopN?: number;
+    /**
+     * Minimum number of timed tests before `SLOW` badges appear in the suite
+     * breakdown. The badge marks the 10 slowest tests; below this many timed
+     * tests every test would trivially be the "slowest", so badges stay hidden.
+     * Set to 0 to always badge the slowest. Must be a non-negative integer.
+     * @default 10
+     */
+    slowTestThreshold?: number;
     /**
      * Path to a custom Handlebars (.hbs) template file. When set, takes
      * precedence over `template`. Relative paths resolve from `process.cwd()`.

package/dist/index.d.ts

@@ -234,6 +234,14 @@ interface ReporterOptions {
      * @default 5
      */
     flakinessTopN?: number;
+    /**
+     * Minimum number of timed tests before `SLOW` badges appear in the suite
+     * breakdown. The badge marks the 10 slowest tests; below this many timed
+     * tests every test would trivially be the "slowest", so badges stay hidden.
+     * Set to 0 to always badge the slowest. Must be a non-negative integer.
+     * @default 10
+     */
+    slowTestThreshold?: number;
     /**
      * Path to a custom Handlebars (.hbs) template file. When set, takes
      * precedence over `template`. Relative paths resolve from `process.cwd()`.

package/dist/index.js

@@ -10329,7 +10329,8 @@ var DEFAULT_OPTIONS = {
   maxFileSizeMb: 8,
   historySize: 10,
   showTrend: true,
-  flakinessTopN: 5
+  flakinessTopN: 5,
+  slowTestThreshold: 10
 };
 
 // src/templates/sections.ts
@@ -10406,7 +10407,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,
@@ -10433,6 +10437,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() {
@@ -10509,6 +10514,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"),
@@ -11172,6 +11178,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) {
@@ -11347,6 +11361,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);
   }
@@ -12069,17 +12084,17 @@ var TemplateEngine = class {
   setChartjsBundle(inline) {
     this.chartjsInline = inline;
   }
-  render(data, template, userSections) {
+  render(data, template, userSections, slowTestThreshold) {
     const layoutPath = import_path3.default.join(this.templatesDir, "layouts", `${template}.hbs`);
     if (!import_fs4.default.existsSync(layoutPath)) {
       throw new Error(`[reportforge] Template layout not found: ${layoutPath}`);
     }
     const layoutSource = import_fs4.default.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 (!import_fs4.default.existsSync(filePath)) {
         throw new Error(`[reportforge] Custom template not found: ${filePath}`);
@@ -12088,32 +12103,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()
@@ -12150,6 +12174,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,
@@ -12161,7 +12186,36 @@ var TemplateEngine = class {
         }
       }
     }
-    return tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    const ranked = tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    return { ranked, timedTotal: tests.length };
+  }
+  /**
+   * 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) {
+      slow.ranked.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);
@@ -12840,7 +12894,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 {
@@ -13237,7 +13291,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.6.2" : "0.x";
+    const version = true ? "0.7.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

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);
   }
@@ -12070,17 +12085,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 +12104,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 +12175,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 +12187,36 @@ var TemplateEngine = class {
         }
       }
     }
-    return tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    const ranked = tests.sort((a, b) => b.durationMs - a.durationMs).slice(0, 10);
+    return { ranked, timedTotal: tests.length };
+  }
+  /**
+   * 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) {
+      slow.ranked.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 +12895,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 +13292,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.6.2" : "0.x";
+    const version = true ? "0.7.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/layouts/detailed.hbs

@@ -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

@@ -24,17 +24,11 @@
 
 {{#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

@@ -24,13 +24,7 @@
 
 {{#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/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,9 +32,9 @@
     <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>
@@ -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>