@reportforge/playwright-pdf 0.6.3 → 0.7.0

package/README.md

@@ -46,7 +46,7 @@ Three templates, one reporter. Every PDF is fully offline — fonts, charts, and
 ## Features
 
 - **3 templates** — `minimal` (developer), `detailed` (QA team), `executive` (stakeholders)
-- **Detailed reports** — KPI dashboard, suite breakdown, failure deep-dive with screenshots, CI/CD environment
+- **Detailed reports** — KPI dashboard, suite breakdown with inline failure detail (error, screenshot, root-cause chip) under each failed test, CI/CD environment
 - **Embedded Chart.js** — pass-rate doughnut + per-suite bar chart, bundled inline (no CDN)
 - **Self-contained PDFs** — screenshots, fonts, logos all embedded; share or archive with confidence
 - **Custom branding** — logo, primary/accent colours, watermark, PDF password encryption
@@ -56,7 +56,7 @@ Three templates, one reporter. Every PDF is fully offline — fonts, charts, and
 - **Shard merging** — combine N Playwright JSON shard reports into one PDF via `shardResults`; accepts glob patterns or explicit paths
 - **Notifications** — post pass/fail summaries to Slack, Teams, Discord, or email after each run; configurable trigger (`always` / `failure` / `success`) per channel; email supports optional PDF attachment via `attachPdf`
 - **Flakiness trend** — top-N flakiest tests table with per-test dot sparkline across stored history runs in the `detailed` template; `flakinessTopN` option (default 5, `0` disables)
-- **Offline failure analysis** — sorts failures into 7 root-cause buckets and clusters them, right inside the `detailed` PDF (one-liner in `executive`). No network, no AI service — a small embedded classifier that updates itself safely over your existing license refresh; pin it any time. Full details at [reportforge.org/docs/advanced/failure-analysis](https://reportforge.org/docs/advanced/failure-analysis).
+- **Offline failure analysis** — sorts each failure into one of 7 root-cause buckets and renders a per-test root-cause chip inline under the failed test in the `detailed` PDF (dominant-cause one-liner in `executive`). No network, no AI service — a small embedded classifier that updates itself safely over your existing license refresh; pin it any time. Full details at [reportforge.org/docs/advanced/failure-analysis](https://reportforge.org/docs/advanced/failure-analysis).
 - `npx @reportforge/playwright-pdf export-feedback` — exports locally-collected unrecognized failures (tokenized, local-only) for optional manual sharing.
 - **Configurable sections** — add or remove any report section per template via `sections`.
 - **Hybrid licensing** — one short key unlocks it; reports keep rendering offline via a cached JWT between refreshes
@@ -198,6 +198,7 @@ All options are the second element of the reporter tuple.
 | `historySize` | `number` | `10` | Maximum number of test runs to keep in the history file (integer ≥ 2). Older runs are pruned on append. |
 | `showTrend` | `boolean` | `true` | Show the pass-rate sparkline and delta badge in the `detailed` template. Set to `false` to disable history tracking entirely. |
 | `flakinessTopN` | `number` | `5` | Maximum flaky tests to show in the flakiness table (`detailed` template). Set to `0` to disable the table entirely. |
+| `slowTestThreshold` | `number` | `10` | Minimum timed-test count before `SLOW` badges appear in the suite breakdown. The badge marks the 10 slowest tests; below this many it stays hidden (every test would be trivially "slowest"). Set to `0` to always badge the slowest. |
 | `templatePath` | `string \| string[]` | — | Path to a custom Handlebars (`.hbs`) template file. Takes precedence over `template`. Pass an array to generate one PDF per custom template. See the Custom Templates docs. |
 | `sections` | `object` | per-template | Override which report sections appear, on top of the chosen template's defaults. Flat keys are the baseline for every chosen template; per-template keys (`minimal`\|`detailed`\|`executive`) override per template. Block toggles: `coverPage`, `analysisOneliner`, `releaseGate`, `summary`, `charts`, `trend`, `requirementsMatrix`, `ciEnvironment`, `suiteBreakdown`, `failureDeepDive`, `failureAnalysis`, `slowTests`, `defectLog`. Display modifiers: `passRate`, `fullEnvironment`, `retries`, `fullFailures`, `stackTraces`. See the Report Sections docs. |
 <!-- AUTOGEN:options-table END -->
@@ -391,10 +392,10 @@ reporter: [['@reportforge/playwright-pdf', {
 | `trend` | Pass-rate trend line, run-history table, and flakiness table (rendered inside `charts`) |
 | `requirementsMatrix` | Tests grouped by `@tag('REQ-…')` with coverage bars (requirements traceability) |
 | `ciEnvironment` | Branch, commit, browsers, CI provider, OS, Node, Playwright, projects, workers |
-| `suiteBreakdown` | Per-suite → per-test table (status, duration, tags, retries) |
-| `failureDeepDive` | Failure cards: error message, stack trace, screenshot, retry history |
-| `failureAnalysis` | Clustered root-cause buckets from the offline classifier |
-| `slowTests` | Slowest tests, duration-ranked |
+| `suiteBreakdown` | Per-suite → per-test table (status, duration, tags, retries). Failed tests carry their failure detail, root-cause chip, and a `SLOW` badge inline (the three keys below) |
+| `failureDeepDive` | Inline failure detail under each failed test in the breakdown: error message, stack trace, screenshot, retry history |
+| `failureAnalysis` | Inline per-test root-cause chip under each failed test (category + representative error + match strength, from the offline classifier) |
+| `slowTests` | `SLOW` badge on the duration-ranked slowest tests, shown inline in the breakdown |
 | `defectLog` | `DEF-####` numbered failure table (severity, retries) |
 
 #### Display modifiers — tune a section that's on
@@ -404,8 +405,8 @@ reporter: [['@reportforge/playwright-pdf', {
 | `passRate` | Show the pass-rate % on the Passed KPI card (`summary`) |
 | `fullEnvironment` | Full environment table instead of the compact grid (`ciEnvironment`) |
 | `retries` | Retries column in the suite breakdown (`suiteBreakdown`) |
-| `fullFailures` | Full failure cards instead of one-line summaries (`failureDeepDive`) |
-| `stackTraces` | Include `<pre>` stack traces in the failure cards (`failureDeepDive`) |
+| `fullFailures` | Include the screenshot in the inline failure detail (compact templates omit it) (`failureDeepDive`) |
+| `stackTraces` | Include `<pre>` stack traces in the inline failure detail (`failureDeepDive`) |
 
 #### Per-template defaults
 
@@ -421,7 +422,7 @@ Omit `sections` entirely and each template renders exactly this (✓ = on):
 | `trend` | – | ✓ | ✓ |
 | `requirementsMatrix` | – | ✓ | – |
 | `ciEnvironment` | ✓ | ✓ | ✓ |
-| `suiteBreakdown` | ✓ | ✓ | – |
+| `suiteBreakdown` | ✓ | ✓ | ✓ |
 | `failureDeepDive` | ✓ | ✓ | ✓ |
 | `failureAnalysis` | – | ✓ | – |
 | `slowTests` | – | ✓ | ✓ |
@@ -435,7 +436,8 @@ Omit `sections` entirely and each template renders exactly this (✓ = on):
 #### Dependencies & gotchas
 
 - **`trend` needs `charts`.** The trend line, run-history, and flakiness table live inside the charts block, so `trend: true` does nothing with `charts: false` (it's coerced off). It also needs history data — keep the top-level `showTrend` option on.
-- **Data-gated sections** — `failureAnalysis`, `requirementsMatrix`, `slowTests`, `defectLog` render only when there's matching data (clusters, tagged tests, timed tests, failures). Toggling them on with no data shows nothing.
+- **Inline failure detail needs `suiteBreakdown`.** `failureDeepDive` (failure detail), `failureAnalysis` (root-cause chip), and `slowTests` (`SLOW` badge) now render *inside* the suite breakdown, so they show nothing when `suiteBreakdown` is off. The chip (`failureAnalysis`) also needs `failureDeepDive` — it lives inside the failure detail, so it's coerced off without it.
+- **Data-gated sections** — `failureAnalysis`, `requirementsMatrix`, `slowTests`, `defectLog` render only when there's matching data (classified failures, tagged tests, a meaningful slow set, failures). Toggling them on with no data shows nothing.
 - **Render-layer only.** `sections` controls what's drawn, never what's collected — the data switches stay separate: `showTrend` (history), `flakinessTopN` (flaky-table size), `failureAnalysis.enabled` (classifier), `includeScreenshots` (images).
 - **Custom templates.** `sections` applies to the built-in templates; a custom `templatePath` controls its own layout (every section available) and ignores `sections` — you'll get a warning if both are set.
 

package/dist/cli/index.js

@@ -6243,6 +6243,29 @@ var require_lib = __commonJS({
   }
 });
 
+// src/config/defaults.ts
+var DEFAULT_OPTIONS;
+var init_defaults = __esm({
+  "src/config/defaults.ts"() {
+    "use strict";
+    init_cjs_shims();
+    DEFAULT_OPTIONS = {
+      outputFile: "playwright-report/{date}-report.pdf",
+      template: "minimal",
+      primaryColor: "#CC785C",
+      accentColor: "#3F7D58",
+      reportTitle: "Playwright Test Report",
+      open: false,
+      compressionLevel: "auto",
+      maxFileSizeMb: 8,
+      historySize: 10,
+      showTrend: true,
+      flakinessTopN: 5,
+      slowTestThreshold: 10
+    };
+  }
+});
+
 // src/utils/duration.ts
 function formatDuration(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -6316,6 +6339,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() {
@@ -6398,7 +6422,10 @@ var init_sections = __esm({
         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,
@@ -6454,6 +6481,7 @@ var init_engine = __esm({
     import_handlebars = __toESM(require_lib());
     import_fs = __toESM(require("fs"));
     import_path = __toESM(require("path"));
+    init_defaults();
     init_duration();
     init_SummaryWriter();
     init_sections();
@@ -6482,17 +6510,17 @@ var init_engine = __esm({
       setChartjsBundle(inline) {
         this.chartjsInline = inline;
       }
-      render(data, template, userSections) {
+      render(data, template, userSections, slowTestThreshold) {
         const layoutPath = import_path.default.join(this.templatesDir, "layouts", `${template}.hbs`);
         if (!import_fs.default.existsSync(layoutPath)) {
           throw new Error(`[reportforge] Template layout not found: ${layoutPath}`);
         }
         const layoutSource = import_fs.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_fs.default.existsSync(filePath)) {
             throw new Error(`[reportforge] Custom template not found: ${filePath}`);
@@ -6501,32 +6529,41 @@ var init_engine = __esm({
           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()
@@ -6563,6 +6600,7 @@ var init_engine = __esm({
             for (const test of suite.tests) {
               if (test.duration > 0) {
                 tests.push({
+                  id: test.id,
                   title: test.title,
                   suiteTitle: suite.title,
                   durationMs: test.duration,
@@ -6574,7 +6612,36 @@ var init_engine = __esm({
             }
           }
         }
-        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);
@@ -7598,7 +7665,7 @@ var init_PdfGenerator = __esm({
         }
         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 {
@@ -11747,28 +11814,6 @@ var init_zod = __esm({
   }
 });
 
-// src/config/defaults.ts
-var DEFAULT_OPTIONS;
-var init_defaults = __esm({
-  "src/config/defaults.ts"() {
-    "use strict";
-    init_cjs_shims();
-    DEFAULT_OPTIONS = {
-      outputFile: "playwright-report/{date}-report.pdf",
-      template: "minimal",
-      primaryColor: "#CC785C",
-      accentColor: "#3F7D58",
-      reportTitle: "Playwright Test Report",
-      open: false,
-      compressionLevel: "auto",
-      maxFileSizeMb: 8,
-      historySize: 10,
-      showTrend: true,
-      flakinessTopN: 5
-    };
-  }
-});
-
 // src/config/schema.ts
 function parseOptions(raw) {
   const result = ReporterOptionsSchema.safeParse(raw ?? {});
@@ -11856,6 +11901,7 @@ var init_schema = __esm({
       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"),
@@ -12074,6 +12120,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) {
@@ -12246,6 +12300,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);
   }

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.3" : "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.3" : "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>

package/dist/templates/styles/base.css

@@ -292,12 +292,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 {
@@ -656,23 +734,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. */

package/dist/templates/styles/detailed.css

@@ -130,50 +130,7 @@
 
 /* ── Suite breakdown · styles live in base.css (shared across templates) ──── */
 
-/* ── Failure item ────────────────────────────────────────────────────────── */
-.failure-item {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-left: 3px solid var(--fail);
-  border-radius: 6px; padding: 16px 18px;
-  margin-bottom: 12px; page-break-inside: avoid;
-}
-.failure-item__header {
-  display: flex; justify-content: space-between;
-  align-items: flex-start; margin-bottom: 10px;
-}
-.failure-item__title {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-weight: 600; font-size: 12px; color: var(--text-1);
-}
-.failure-item__path {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 8.5px; color: var(--text-3); margin-bottom: 10px;
-}
-.failure-item__message {
-  background: var(--fail-dim);
-  border: 1px solid #E5C9BD;
-  border-left: 2px solid var(--fail);
-  border-radius: 4px; padding: 10px 14px; margin-bottom: 12px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 9.5px; color: #8A2E1E;
-  word-break: break-word; line-height: 1.6;
-}
-.retry-history {
-  font-size: 9px; color: var(--text-3); margin-top: 10px;
-  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; }
+/* ── Failure card · styles live in base.css (rendered inside the breakdown) ── */
 
 /* ── Defect log, coverage bar, environment table, failure analysis ───────── */
 /* All moved to base.css so executive/minimal can toggle these sections on too. */

package/dist/templates/styles/executive.css

@@ -132,35 +132,5 @@
   letter-spacing: 1.3px;
 }
 
-/* ── Executive failure summary ───────────────────────────────────────────── */
-.failure-summary-item {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-  border-left: 3px solid var(--fail);
-}
-.failure-summary-item:first-child {
-  border-radius: 6px 6px 0 0;
-  border-top: 1px solid var(--border-2);
-  border-right: 1px solid var(--border-2);
-}
-.failure-summary-item:last-child {
-  border-radius: 0 0 6px 6px;
-  border-bottom: 1px solid var(--border-2);
-  border-right: 1px solid var(--border-2);
-}
-.failure-summary-item:only-child {
-  border-radius: 6px;
-  border: 1px solid var(--border-2);
-  border-left: 3px solid var(--fail);
-}
-.failure-summary-item__title {
-  font-size: 11px; font-weight: 600; color: var(--text-1);
-  padding-left: 6px;
-}
-.failure-summary-item__suite {
-  font-size: 9px; color: var(--text-3); margin-top: 3px;
-  font-family: 'JetBrains Mono', monospace;
-  padding-left: 6px;
-}
+/* Executive failures now render inline in the suite breakdown (compact, no
+   screenshots) — card styles live in base.css. */

package/dist/templates/styles/minimal.css

@@ -143,49 +143,4 @@
 }
 .suite-stats { gap: 6px; }
 
-/* ── Failure item ────────────────────────────────────────────────────────── */
-.failure-item {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-left: 3px solid var(--fail);
-  border-radius: 6px;
-  padding: 14px 16px; margin-bottom: 10px;
-  page-break-inside: avoid;
-}
-.failure-item__header {
-  display: flex; justify-content: space-between;
-  align-items: flex-start; margin-bottom: 8px;
-}
-.failure-item__title {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-weight: 600; font-size: 12px;
-  color: var(--text-1); margin-bottom: 4px;
-}
-.failure-item__path {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 8.5px; color: var(--text-3); margin-bottom: 10px;
-}
-.failure-item__message {
-  background: var(--fail-dim);
-  border: 1px solid #E5C9BD;
-  border-left: 2px solid var(--fail);
-  border-radius: 4px;
-  padding: 9px 12px; margin-bottom: 10px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 9.5px; color: #8A2E1E;
-  word-break: break-word; line-height: 1.6;
-}
-.retry-history {
-  font-size: 9px; color: var(--text-3); margin-top: 10px;
-  padding-top: 8px; border-top: 1px solid var(--border);
-}
-.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;
-  letter-spacing: 0.4px; text-transform: uppercase;
-  -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; }
+/* ── Failure card · styles live in base.css (rendered inside the breakdown) ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "Enterprise-ready PDF reports for Playwright Test — minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",

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

@@ -1,42 +0,0 @@
-{{#if analysis.clusters.length}}
-<section class="failure-analysis">
-  <h2>Failure Analysis</h2>
-  <p class="oneliner">{{analysis.oneLiner}}</p>
-
-  {{#if analysis.truncated}}
-  <p class="analysis-truncated">
-    Showing analysis of the first {{analysis.analysedCount}} of {{analysis.totalFailures}} failures.
-    Raise <code>failureAnalysis.maxFailuresToAnalyse</code> for full coverage.
-  </p>
-  {{/if}}
-
-  {{#each analysis.clusters}}
-  <div class="cluster cluster--{{category}}">
-    <div class="cluster-header">
-      <span class="cluster-category">{{categoryLabel category}}</span>
-      <span class="cluster-count">{{count}} {{pluralise count "test" "tests"}}</span>
-      <span class="cluster-strength cluster-strength--{{strength}}">{{strengthLabel strength}} match</span>
-    </div>
-
-    {{#if stackFrame}}
-    <div class="cluster-frame"><code>{{stackFrame}}</code></div>
-    {{/if}}
-
-    <div class="cluster-message">{{representativeMessage}}</div>
-
-    <ul class="cluster-tests">
-      {{#each (take tests 5)}}
-        <li>{{this}}</li>
-      {{/each}}
-      {{#if (gt testsTotal 5)}}
-        <li class="more">+{{subtract testsTotal 5}} more</li>
-      {{/if}}
-    </ul>
-
-    {{#if (eq strength "weak")}}
-    <p class="confidence-warning">* Weak match — manual review recommended</p>
-    {{/if}}
-  </div>
-  {{/each}}
-</section>
-{{/if}}

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

@@ -1,62 +0,0 @@
-{{#if failures.length}}
-<div class="section">
-  <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 failure-item--{{severity}} 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>
-
-    {{!-- Playwright's error.stack already begins with the message, so rendering
-          both duplicates it. Show the formatted stack when available; otherwise
-          fall back to the bare message. --}}
-    {{#if (and error.stack ../options.showStackTraces)}}
-      <pre>{{error.stack}}</pre>
-    {{else}}
-      <div class="failure-item__message">{{error.message}}</div>
-    {{/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}}">
-          #{{addOne 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}}

package/dist/templates/partials/slow-tests.hbs

@@ -1,27 +0,0 @@
-{{#if slowTests.length}}
-<div class="section">
-  <h2>Slowest Tests</h2>
-  <table>
-    <thead>
-      <tr>
-        <th>Test</th>
-        <th style="width:130px;">Suite</th>
-        {{#if showProject}}<th style="width:80px;">Project</th>{{/if}}
-        <th style="width:76px;text-align:right;">Duration</th>
-        <th style="width:68px;">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each (take slowTests limit)}}
-      <tr class="no-break">
-        <td style="font-weight:500;">{{title}}</td>
-        <td style="font-size:9px;color:var(--text-3);font-family:'JetBrains Mono',monospace;">{{suiteTitle}}</td>
-        {{#if ../showProject}}<td style="font-size:9px;color:var(--text-3);white-space:nowrap;">{{project}}</td>{{/if}}
-        <td style="font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-2);text-align:right;">{{durationFormatted}}</td>
-        <td>{{statusBadge status}}</td>
-      </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</div>
-{{/if}}