@reportforge/playwright-pdf 0.13.2 → 0.14.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.14.1] - 2026-07-06
+
+### Fixed
+
+- **Executive report's pass-rate doughnut centre text no longer overlaps the ring.** The `executive` template renders the doughnut at 150px (vs 186px on `detailed`/`minimal`), but the centre-text plugin drew a fixed 28px/9px label sized for the larger canvas. Text now scales off the doughnut's actual inner radius, so it fits cleanly at any canvas size.
+
+---
+
+## [0.14.0] - 2026-07-06
+
+### Added
+
+- **Executive report leads with a plain-language brief and a hero pass-rate stat**: a new tinted brief band composes the trend delta and root-cause tally into one sentence (e.g. "Pass rate climbed 4 points to 92%... 3 root causes remain: 2 assertion, 1 timeout"), replacing the 6-card KPI grid with a single hero pass-rate number and a compact secondary stat row. The trend chart is promoted above the smaller pass-rate/suite-results charts. `detailed` and `minimal` templates are unchanged.
+- **New `sections.briefBand` option** to toggle the brief band on any template (on by default for `executive`).
+
+### Fixed
+
+- **Flaky doughnut slice now matches the `--flaky` design token** instead of a stray hardcoded color.
+- **`minimal` template's header no longer uses a side-stripe border**, now consistent with the design system's top-accent-bar convention used everywhere else.
+
+---
+
 ## [0.13.2] - 2026-07-04
 
 ### Fixed

package/README.md

@@ -37,7 +37,7 @@ Three templates, one reporter. Every PDF is fully offline: fonts, charts, and sc
   <tr>
     <td align="center"><sub>KPI dashboard · suite breakdown · failure stack traces · embedded screenshots</sub></td>
     <td align="center"><sub>Everything in minimal <strong>+ charts · requirements matrix · defect log · full environment</strong></sub></td>
-    <td align="center"><sub>Cover page · KPI dashboard · charts · failure summary <em>(no stack traces)</em></sub></td>
+    <td align="center"><sub>Cover page · plain-language brief · hero pass-rate stat · trend chart · failure summary <em>(no stack traces)</em></sub></td>
   </tr>
 </table>
 
@@ -61,6 +61,7 @@ Three templates, one reporter. Every PDF is fully offline: fonts, charts, and sc
 - `npx @reportforge/playwright-pdf export-feedback`: exports locally-collected unrecognized failures (tokenized, local-only) for optional manual sharing.
 - **Rich execution capture**: opt-in "Steps to Reproduce" outline (a nested, copy-pasteable Markdown list of your `test.step`s and assertions; add `apiSteps` for the full click/fill/check trail), Node console tail, and trace/video links under each failed test in the defect log. Read straight from the Playwright step tree: no fixtures, no test-code changes. Enable via `capture` (`steps` / `apiSteps` / `console` / `evidence`); off by default.
 - **Configurable sections**: add or remove any report section per template via `sections`.
+- **Executive report brief band**: leads with a plain-language brief (trend + root causes) and one hero pass-rate number instead of a flat KPI grid
 - **Hybrid licensing**: one short key unlocks it; reports keep rendering offline via a cached JWT between refreshes
 
 ---
@@ -204,7 +205,7 @@ All options are the second element of the reporter tuple.
 | `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: below this, every test is trivially the "slowest" so badges stay hidden. On larger runs only genuine outliers (at least 2× the median test duration) are badged, so the badge stays rare. Set to `0` to drop the run-size gate (outliers still required). |
 | `templatePath` | `string \| string[]` | n/a | 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. |
+| `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`, `briefBand`. Display modifiers: `passRate`, `fullEnvironment`, `retries`, `fullFailures`, `stackTraces`. See the Report Sections docs. |
 <!-- AUTOGEN:options-table END -->
 
 Full reference: [reportforge.org/docs/configuration](https://reportforge.org/docs/configuration).

package/dist/cli/index.js

@@ -6388,6 +6388,25 @@ function buildOneLiner(clusters) {
 function dominantCategory(clusters) {
   return clusters[0]?.category ?? "unknown";
 }
+function trendClause(passRate, delta) {
+  if (delta === 0) return `Pass rate held steady at ${passRate}%.`;
+  const verb = delta > 0 ? "climbed" : "dropped";
+  const abs = Math.abs(delta);
+  const points = abs === 1 ? "point" : "points";
+  return `Pass rate ${verb} ${abs} ${points} to ${passRate}% since the last run.`;
+}
+function causesClause(analysis) {
+  const [head, ...tallyParts] = buildOneLiner(analysis.clusters).split(" \xB7 ");
+  const verb = analysis.clusters.length === 1 ? "remains" : "remain";
+  return `${head} ${verb}: ${tallyParts.join(", ")}.`;
+}
+function buildBriefSentence(stats, analysis, trend) {
+  if (trend && trend.delta !== null) {
+    const trendSentence = trendClause(stats.passRate, trend.delta);
+    return analysis && analysis.clusters.length > 0 ? `${trendSentence} ${causesClause(analysis)}` : trendSentence;
+  }
+  return analysis && analysis.clusters.length > 0 ? causesClause(analysis) : void 0;
+}
 var CATEGORY_LABEL, SHORT_LABEL;
 var init_SummaryWriter = __esm({
   "src/analysis/SummaryWriter.ts"() {
@@ -6457,6 +6476,7 @@ var init_sections = __esm({
       "failureAnalysis",
       "slowTests",
       "defectLog",
+      "briefBand",
       // display modifiers
       "passRate",
       "fullEnvironment",
@@ -6479,6 +6499,7 @@ var init_sections = __esm({
         failureAnalysis: false,
         slowTests: false,
         defectLog: false,
+        briefBand: false,
         passRate: true,
         fullEnvironment: false,
         retries: true,
@@ -6499,6 +6520,7 @@ var init_sections = __esm({
         failureAnalysis: true,
         slowTests: true,
         defectLog: true,
+        briefBand: false,
         passRate: true,
         fullEnvironment: true,
         retries: true,
@@ -6507,7 +6529,9 @@ var init_sections = __esm({
       },
       executive: {
         coverPage: true,
-        analysisOneliner: true,
+        // Now off: its content (root-cause tally) is subsumed by briefBand below,
+        // which also adds the trend delta. Showing both would say it twice.
+        analysisOneliner: false,
         releaseGate: true,
         summary: true,
         charts: true,
@@ -6522,6 +6546,7 @@ var init_sections = __esm({
         failureAnalysis: false,
         slowTests: true,
         defectLog: false,
+        briefBand: true,
         passRate: true,
         fullEnvironment: false,
         retries: false,
@@ -12502,6 +12527,7 @@ async function run() {
   const options = parseOptions({ template, outputFile, failureAnalysis: { collectUnclassified: false } });
   const generator = new PdfGenerator();
   runFailureAnalysis(reportData, options, process.cwd());
+  reportData.briefSentence = buildBriefSentence(reportData.stats, reportData.analysis, reportData.charts.trend);
   const paths = await generator.generateAll(reportData, options, DEMO_LICENSE_INFO2);
   if (paths.length > 0) {
     console.log(`
@@ -12542,6 +12568,7 @@ var init_cli = __esm({
     init_schema();
     init_types2();
     init_analysis();
+    init_SummaryWriter();
     DEMO_LICENSE_INFO2 = {
       plan: "subscription",
       source: "demo",

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import { Reporter, FullConfig, Suite, TestCase, TestResult, TestStep, FullResult } from '@playwright/test/reporter';
 
 /**
- * Canonical section catalog. 13 block toggles (section present/absent) followed
+ * Canonical section catalog. 14 block toggles (section present/absent) followed
  * by 5 display modifiers (tweak a section that is on). Single source of truth —
  * the Zod schema in src/config/schema.ts builds its flag shape from this array.
  */
-declare const SECTION_KEYS: readonly ["coverPage", "analysisOneliner", "releaseGate", "summary", "charts", "trend", "requirementsMatrix", "ciEnvironment", "suiteBreakdown", "failureDeepDive", "failureAnalysis", "slowTests", "defectLog", "passRate", "fullEnvironment", "retries", "fullFailures", "stackTraces"];
+declare const SECTION_KEYS: readonly ["coverPage", "analysisOneliner", "releaseGate", "summary", "charts", "trend", "requirementsMatrix", "ciEnvironment", "suiteBreakdown", "failureDeepDive", "failureAnalysis", "slowTests", "defectLog", "briefBand", "passRate", "fullEnvironment", "retries", "fullFailures", "stackTraces"];
 type SectionKey = (typeof SECTION_KEYS)[number];
 /** A partial map of section flags — used both as the flat baseline and per-template. */
 type SectionFlags = Partial<Record<SectionKey, boolean>>;
@@ -41,7 +41,7 @@ interface ReporterOptions {
      *
      * - minimal:   clean white layout, developer-focused, fast
      * - detailed:  full QA report with defect log and requirements traceability
-     * - executive: cover page, KPI dashboard, charts for stakeholders
+     * - executive: cover page, plain-language brief, hero pass-rate stat, charts for stakeholders
      * @default 'minimal'
      */
     template?: TemplateId | TemplateId[];
@@ -332,7 +332,7 @@ interface ReporterOptions {
      *
      * Block toggles: `coverPage`, `analysisOneliner`, `releaseGate`, `summary`,
      * `charts`, `trend`, `requirementsMatrix`, `ciEnvironment`, `suiteBreakdown`,
-     * `failureDeepDive`, `failureAnalysis`, `slowTests`, `defectLog`.
+     * `failureDeepDive`, `failureAnalysis`, `slowTests`, `defectLog`, `briefBand`.
      * Display modifiers: `passRate`, `fullEnvironment`, `retries`, `fullFailures`,
      * `stackTraces`.
      *

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import { Reporter, FullConfig, Suite, TestCase, TestResult, TestStep, FullResult } from '@playwright/test/reporter';
 
 /**
- * Canonical section catalog. 13 block toggles (section present/absent) followed
+ * Canonical section catalog. 14 block toggles (section present/absent) followed
  * by 5 display modifiers (tweak a section that is on). Single source of truth —
  * the Zod schema in src/config/schema.ts builds its flag shape from this array.
  */
-declare const SECTION_KEYS: readonly ["coverPage", "analysisOneliner", "releaseGate", "summary", "charts", "trend", "requirementsMatrix", "ciEnvironment", "suiteBreakdown", "failureDeepDive", "failureAnalysis", "slowTests", "defectLog", "passRate", "fullEnvironment", "retries", "fullFailures", "stackTraces"];
+declare const SECTION_KEYS: readonly ["coverPage", "analysisOneliner", "releaseGate", "summary", "charts", "trend", "requirementsMatrix", "ciEnvironment", "suiteBreakdown", "failureDeepDive", "failureAnalysis", "slowTests", "defectLog", "briefBand", "passRate", "fullEnvironment", "retries", "fullFailures", "stackTraces"];
 type SectionKey = (typeof SECTION_KEYS)[number];
 /** A partial map of section flags — used both as the flat baseline and per-template. */
 type SectionFlags = Partial<Record<SectionKey, boolean>>;
@@ -41,7 +41,7 @@ interface ReporterOptions {
      *
      * - minimal:   clean white layout, developer-focused, fast
      * - detailed:  full QA report with defect log and requirements traceability
-     * - executive: cover page, KPI dashboard, charts for stakeholders
+     * - executive: cover page, plain-language brief, hero pass-rate stat, charts for stakeholders
      * @default 'minimal'
      */
     template?: TemplateId | TemplateId[];
@@ -332,7 +332,7 @@ interface ReporterOptions {
      *
      * Block toggles: `coverPage`, `analysisOneliner`, `releaseGate`, `summary`,
      * `charts`, `trend`, `requirementsMatrix`, `ciEnvironment`, `suiteBreakdown`,
-     * `failureDeepDive`, `failureAnalysis`, `slowTests`, `defectLog`.
+     * `failureDeepDive`, `failureAnalysis`, `slowTests`, `defectLog`, `briefBand`.
      * Display modifiers: `passRate`, `fullEnvironment`, `retries`, `fullFailures`,
      * `stackTraces`.
      *

package/dist/index.js

@@ -10350,6 +10350,7 @@ var SECTION_KEYS = [
   "failureAnalysis",
   "slowTests",
   "defectLog",
+  "briefBand",
   // display modifiers
   "passRate",
   "fullEnvironment",
@@ -10372,6 +10373,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: false,
     slowTests: false,
     defectLog: false,
+    briefBand: false,
     passRate: true,
     fullEnvironment: false,
     retries: true,
@@ -10392,6 +10394,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: true,
     slowTests: true,
     defectLog: true,
+    briefBand: false,
     passRate: true,
     fullEnvironment: true,
     retries: true,
@@ -10400,7 +10403,9 @@ var SECTION_DEFAULTS = {
   },
   executive: {
     coverPage: true,
-    analysisOneliner: true,
+    // Now off: its content (root-cause tally) is subsumed by briefBand below,
+    // which also adds the trend delta. Showing both would say it twice.
+    analysisOneliner: false,
     releaseGate: true,
     summary: true,
     charts: true,
@@ -10415,6 +10420,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: false,
     slowTests: true,
     defectLog: false,
+    briefBand: true,
     passRate: true,
     fullEnvironment: false,
     retries: false,
@@ -11298,6 +11304,25 @@ function buildOneLiner(clusters) {
 function dominantCategory(clusters) {
   return clusters[0]?.category ?? "unknown";
 }
+function trendClause(passRate, delta) {
+  if (delta === 0) return `Pass rate held steady at ${passRate}%.`;
+  const verb = delta > 0 ? "climbed" : "dropped";
+  const abs = Math.abs(delta);
+  const points = abs === 1 ? "point" : "points";
+  return `Pass rate ${verb} ${abs} ${points} to ${passRate}% since the last run.`;
+}
+function causesClause(analysis) {
+  const [head, ...tallyParts] = buildOneLiner(analysis.clusters).split(" \xB7 ");
+  const verb = analysis.clusters.length === 1 ? "remains" : "remain";
+  return `${head} ${verb}: ${tallyParts.join(", ")}.`;
+}
+function buildBriefSentence(stats, analysis, trend) {
+  if (trend && trend.delta !== null) {
+    const trendSentence = trendClause(stats.passRate, trend.delta);
+    return analysis && analysis.clusters.length > 0 ? `${trendSentence} ${causesClause(analysis)}` : trendSentence;
+  }
+  return analysis && analysis.clusters.length > 0 ? causesClause(analysis) : void 0;
+}
 
 // src/analysis/UnclassifiedCollector.ts
 init_cjs_shims();
@@ -14031,7 +14056,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.13.2" : "0.x";
+    const version = true ? "0.14.1" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,
@@ -14115,6 +14140,7 @@ var PdfReporter = class {
     }
     const reportData = this._buildReportData(collected, licenseInfo);
     runFailureAnalysis(reportData, this.options, this.cwd);
+    reportData.briefSentence = buildBriefSentence(reportData.stats, reportData.analysis, reportData.charts.trend);
     let pdfPaths = [];
     try {
       pdfPaths = await this.pdfGenerator.generateAll(reportData, this.options, licenseInfo);

package/dist/index.mjs

@@ -10351,6 +10351,7 @@ var SECTION_KEYS = [
   "failureAnalysis",
   "slowTests",
   "defectLog",
+  "briefBand",
   // display modifiers
   "passRate",
   "fullEnvironment",
@@ -10373,6 +10374,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: false,
     slowTests: false,
     defectLog: false,
+    briefBand: false,
     passRate: true,
     fullEnvironment: false,
     retries: true,
@@ -10393,6 +10395,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: true,
     slowTests: true,
     defectLog: true,
+    briefBand: false,
     passRate: true,
     fullEnvironment: true,
     retries: true,
@@ -10401,7 +10404,9 @@ var SECTION_DEFAULTS = {
   },
   executive: {
     coverPage: true,
-    analysisOneliner: true,
+    // Now off: its content (root-cause tally) is subsumed by briefBand below,
+    // which also adds the trend delta. Showing both would say it twice.
+    analysisOneliner: false,
     releaseGate: true,
     summary: true,
     charts: true,
@@ -10416,6 +10421,7 @@ var SECTION_DEFAULTS = {
     failureAnalysis: false,
     slowTests: true,
     defectLog: false,
+    briefBand: true,
     passRate: true,
     fullEnvironment: false,
     retries: false,
@@ -11299,6 +11305,25 @@ function buildOneLiner(clusters) {
 function dominantCategory(clusters) {
   return clusters[0]?.category ?? "unknown";
 }
+function trendClause(passRate, delta) {
+  if (delta === 0) return `Pass rate held steady at ${passRate}%.`;
+  const verb = delta > 0 ? "climbed" : "dropped";
+  const abs = Math.abs(delta);
+  const points = abs === 1 ? "point" : "points";
+  return `Pass rate ${verb} ${abs} ${points} to ${passRate}% since the last run.`;
+}
+function causesClause(analysis) {
+  const [head, ...tallyParts] = buildOneLiner(analysis.clusters).split(" \xB7 ");
+  const verb = analysis.clusters.length === 1 ? "remains" : "remain";
+  return `${head} ${verb}: ${tallyParts.join(", ")}.`;
+}
+function buildBriefSentence(stats, analysis, trend) {
+  if (trend && trend.delta !== null) {
+    const trendSentence = trendClause(stats.passRate, trend.delta);
+    return analysis && analysis.clusters.length > 0 ? `${trendSentence} ${causesClause(analysis)}` : trendSentence;
+  }
+  return analysis && analysis.clusters.length > 0 ? causesClause(analysis) : void 0;
+}
 
 // src/analysis/UnclassifiedCollector.ts
 init_esm_shims();
@@ -14032,7 +14057,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.13.2" : "0.x";
+    const version = true ? "0.14.1" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,
@@ -14116,6 +14141,7 @@ var PdfReporter = class {
     }
     const reportData = this._buildReportData(collected, licenseInfo);
     runFailureAnalysis(reportData, this.options, this.cwd);
+    reportData.briefSentence = buildBriefSentence(reportData.stats, reportData.analysis, reportData.charts.trend);
     let pdfPaths = [];
     try {
       pdfPaths = await this.pdfGenerator.generateAll(reportData, this.options, licenseInfo);

package/dist/templates/layouts/detailed.hbs

@@ -18,6 +18,8 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
+{{#if sections.briefBand}}{{> brief-band}}{{/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}}

package/dist/templates/layouts/executive.hbs

@@ -18,9 +18,11 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
-{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
+{{#if sections.briefBand}}{{> brief-band}}{{/if}}
 
-{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
+{{#if sections.summary}}{{> executive-hero-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
+
+{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend heroTrend=true) }}{{/if}}
 
 {{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
 

package/dist/templates/layouts/minimal.hbs

@@ -18,6 +18,8 @@
 
 {{#if sections.releaseGate}}{{> release-gate}}{{/if}}
 
+{{#if sections.briefBand}}{{> brief-band}}{{/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}}

package/dist/templates/partials/brief-band.hbs

@@ -0,0 +1,6 @@
+{{#if briefSentence}}
+<div class="brief-band">
+  <span class="brief-band__quote">&#8220;</span>
+  <p class="brief-band__text">{{briefSentence}}</p>
+</div>
+{{/if}}

package/dist/templates/partials/chart-summary-grid.hbs

@@ -0,0 +1,18 @@
+<div class="section charts-grid{{#if options.heroTrend}} charts-grid--secondary{{/if}}">
+  <div class="chart-card">
+    <h3>Pass Rate</h3>
+    {{#if options.heroTrend}}
+    <canvas id="passRateChart" width="150" height="150"></canvas>
+    {{else}}
+    <canvas id="passRateChart" width="186" height="186"></canvas>
+    {{/if}}
+  </div>
+  <div class="chart-card">
+    <h3>Suite Results</h3>
+    {{#if options.heroTrend}}
+    <canvas id="suitesBarChart" width="300" height="150"></canvas>
+    {{else}}
+    <canvas id="suitesBarChart" width="390" height="186"></canvas>
+    {{/if}}
+  </div>
+</div>

package/dist/templates/partials/chart-trend-card.hbs

@@ -0,0 +1,16 @@
+{{#if options.showTrend}}
+{{#if charts.trend}}
+<div class="trend-card">
+  <div class="trend-card__header">
+    <span class="trend-card__title">Pass rate trend &mdash; last {{charts.trend.entries.length}} runs</span>
+    {{#if charts.trend.delta}}
+    <span class="delta {{#if (gt charts.trend.delta 0)}}delta-up{{else}}delta-down{{/if}}">
+      {{#if (gt charts.trend.delta 0)}}&#8593;{{else}}&#8595;{{/if}} {{absFixed charts.trend.delta}}% vs previous run
+    </span>
+    {{/if}}
+  </div>
+  <canvas id="trendChart" width="680" height="160"></canvas>
+  <div class="trend-run-history" id="run-history-table"></div>
+</div>
+{{/if}}
+{{/if}}

package/dist/templates/partials/charts.hbs

@@ -1,33 +1,10 @@
 {{#if options.showCharts}}
-<div class="section charts-grid">
-  <div class="chart-card">
-    <h3>Pass Rate</h3>
-    <canvas id="passRateChart" width="186" height="186"></canvas>
-  </div>
-  <div class="chart-card">
-    <h3>Suite Results</h3>
-    <canvas id="suitesBarChart" width="390" height="186"></canvas>
-  </div>
-</div>
-
-{{!-- Trend card: detailed + executive + custom templates. Minimal has showTrend=false. --}}
-{{#if options.showTrend}}
-{{#if charts.trend}}
-<div class="trend-card">
-  <div class="trend-card__header">
-    <span class="trend-card__title">Pass rate trend &mdash; last {{charts.trend.entries.length}} runs</span>
-    {{!-- Delta badge: falsy guard handles null (< 2 entries) and 0 (identical runs). --}}
-    {{#if charts.trend.delta}}
-    <span class="delta {{#if (gt charts.trend.delta 0)}}delta-up{{else}}delta-down{{/if}}">
-      {{#if (gt charts.trend.delta 0)}}&#8593;{{else}}&#8595;{{/if}} {{absFixed charts.trend.delta}}% vs previous run
-    </span>
-    {{/if}}
-  </div>
-  <canvas id="trendChart" width="680" height="160"></canvas>
-  {{!-- Run history table is populated by JS below; placeholder must exist before script runs. --}}
-  <div class="trend-run-history" id="run-history-table"></div>
-</div>
-{{/if}}
+{{#if options.heroTrend}}
+{{> chart-trend-card options=options}}
+{{> chart-summary-grid options=options}}
+{{else}}
+{{> chart-summary-grid options=options}}
+{{> chart-trend-card options=options}}
 {{/if}}
 
 {{#if options.showTrend}}
@@ -88,17 +65,25 @@
       var ctx = chart.ctx;
       var cx  = (chart.chartArea.left + chart.chartArea.right)  / 2;
       var cy  = (chart.chartArea.top  + chart.chartArea.bottom) / 2;
+      /* Size the centre text off the doughnut's actual hole, not a fixed px
+         value — the executive template's 150px canvas has a smaller inner
+         radius than the 186px canvas used elsewhere, and fixed 28px/9px text
+         overran the hole into the ring on the smaller size. */
+      var arc = chart.getDatasetMeta(0).data[0];
+      var innerRadius = (arc && arc.innerRadius) ? arc.innerRadius : 50;
+      var mainSize = Math.max(15, Math.round(innerRadius * 0.56));
+      var subSize  = Math.max(7,  Math.round(innerRadius * 0.175));
       ctx.save();
       ctx.textAlign    = 'center';
       ctx.textBaseline = 'middle';
       /* large percentage */
-      ctx.font      = '700 28px "Source Serif Pro", Georgia, serif';
+      ctx.font      = '700 ' + mainSize + 'px "Source Serif Pro", Georgia, serif';
       ctx.fillStyle = '#1F1F1C';
-      ctx.fillText(passRate + '%', cx, cy - 7);
+      ctx.fillText(passRate + '%', cx, cy - mainSize * 0.24);
       /* label below */
-      ctx.font      = '600 9px Inter, sans-serif';
+      ctx.font      = '600 ' + subSize + 'px Inter, sans-serif';
       ctx.fillStyle = '#8C8B82';
-      ctx.fillText('PASS RATE', cx, cy + 13);
+      ctx.fillText('PASS RATE', cx, cy + mainSize * 0.46);
       ctx.restore();
     }
   };
@@ -112,7 +97,7 @@
       labels: ['Passed', 'Failed', 'Timed Out', 'Skipped', 'Flaky'],
       datasets: [{
         data: [passed, failed, timedOut, skipped, flaky],
-        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#D49452'],
+        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#CA8A04'],
         borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
         borderWidth: 2,
         hoverOffset: 4

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

@@ -0,0 +1,66 @@
+<div class="section">
+  {{#unless options.releaseGateShown}}
+  <span class="verdict verdict--{{stats.verdict}}">
+    {{verdictLabel stats.verdict}}
+  </span>
+  {{/unless}}
+
+  <div class="hero-summary">
+    <div class="hero-summary__value">{{stats.passRate}}<span class="hero-summary__pct">%</span></div>
+    <div class="hero-summary__label">Pass Rate</div>
+  </div>
+
+  <div class="hero-stat-row">
+    <div class="hero-stat">
+      <span class="hero-stat__value">{{stats.total}}</span>
+      <span class="hero-stat__label">Total</span>
+    </div>
+    <div class="hero-stat{{#unless stats.failed}} hero-stat--zero{{/unless}}">
+      <span class="hero-stat__value" style="color:var(--fail);">{{stats.failed}}</span>
+      <span class="hero-stat__label">Failed</span>
+    </div>
+    <div class="hero-stat{{#unless stats.timedOut}} hero-stat--zero{{/unless}}">
+      <span class="hero-stat__value" style="color:var(--timeout);">{{stats.timedOut}}</span>
+      <span class="hero-stat__label">Timed Out</span>
+    </div>
+    <div class="hero-stat{{#unless stats.skipped}} hero-stat--zero{{/unless}}">
+      <span class="hero-stat__value" style="color:var(--skip);">{{stats.skipped}}</span>
+      <span class="hero-stat__label">Skipped</span>
+    </div>
+    <div class="hero-stat{{#unless stats.flaky}} hero-stat--zero{{/unless}}">
+      <span class="hero-stat__value" style="color:var(--flaky);">{{stats.flaky}}</span>
+      <span class="hero-stat__label">Flaky</span>
+    </div>
+  </div>
+
+  <div class="summary-row">
+    <div class="summary-row__item">
+      <span class="summary-row__label">Duration</span>
+      <span class="summary-row__value">{{formatDuration stats.duration}}</span>
+    </div>
+    {{#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>
+    </div>
+    <div class="summary-row__item">
+      <span class="summary-row__label">Project</span>
+      <span class="summary-row__value">{{meta.projectName}}</span>
+    </div>
+  </div>
+
+  {{#if stats.flaky}}
+  <div class="flaky-callout">
+    <span class="flaky-callout__icon">&#9888;</span>
+    <div class="flaky-callout__body">
+      <span class="flaky-callout__title">{{stats.flaky}} Flaky Test{{#if (gt stats.flaky 1)}}s{{/if}} Detected</span>
+      <span class="flaky-callout__text">These tests passed on retry. Results may vary across re-runs. Investigate before shipping to production.</span>
+    </div>
+  </div>
+  {{/if}}
+</div>

package/dist/templates/styles/base.css

@@ -635,6 +635,28 @@ code {
 
 /* These section styles ship to every template so any section can be toggled in styled; ~a few KB of unused CSS in templates where the section is off is an accepted cost. */
 
+/* ── Brief band — the executive lede sentence, shared so any template can
+   toggle briefBand on. No border/side-stripe (deliberately distinct from the
+   card recipe used everywhere else); a tinted surface instead. ── */
+.brief-band {
+  display: flex; align-items: flex-start; gap: 14px;
+  background: var(--surface-2);
+  padding: 18px 22px 20px;
+  border-radius: 6px;
+  margin-bottom: 22px;
+}
+.brief-band__quote {
+  font-family: 'Source Serif Pro', Georgia, serif;
+  font-size: 40px; font-weight: 700;
+  color: var(--accent); opacity: .5; line-height: .6;
+  flex-shrink: 0; margin-top: 8px;
+}
+.brief-band__text {
+  font-family: 'Source Serif Pro', Georgia, serif;
+  font-style: italic; font-size: 15px;
+  color: var(--text-1); line-height: 1.55;
+}
+
 /* Charts grid + cards (available to any template via sections.charts) */
 .charts-grid {
   display: grid; grid-template-columns: 210px 1fr;

package/dist/templates/styles/executive.css

@@ -28,53 +28,6 @@
   font-weight: 500; letter-spacing: 0.4px;
 }
 
-/* ── KPI dashboard ─────────────────────────────────────────────────────── */
-.kpi-strip {
-  display: grid; grid-template-columns: repeat(6, 1fr);
-  gap: 10px; margin-bottom: 22px;
-}
-.kpi-card {
-  background: var(--surface);
-  border: 1px solid var(--border-2);
-  border-radius: 6px; padding: 18px 12px; text-align: center;
-  position: relative; overflow: hidden;
-}
-.kpi-card::before {
-  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-}
-.kpi-card--total::before { background: var(--accent); }
-.kpi-card--pass::before  { background: var(--pass); }
-.kpi-card--fail::before  { background: var(--fail); }
-.kpi-card--timedout::before { background: var(--timeout); }
-.kpi-card--skip::before  { background: var(--skip); }
-.kpi-card--flaky::before { background: var(--flaky); }
-
-.kpi-card__value {
-  font-family: 'Source Serif Pro', Georgia, serif;
-  font-size: 32px; font-weight: 700; line-height: 1;
-  margin-top: 6px;
-  letter-spacing: -0.5px;
-  color: var(--text-1);
-}
-.kpi-card--total .kpi-card__value { color: var(--info); }
-.kpi-card--pass  .kpi-card__value { color: var(--pass); }
-.kpi-card--fail  .kpi-card__value { color: var(--fail); }
-.kpi-card--timedout .kpi-card__value { color: var(--timeout); }
-.kpi-card--skip  .kpi-card__value { color: var(--skip); }
-.kpi-card--flaky .kpi-card__value { color: var(--flaky); }
-.kpi-card__label {
-  font-family: 'Inter', system-ui, sans-serif; font-size: 8px;
-  font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
-  color: var(--text-3); margin-top: 8px;
-}
-.kpi-card__rate {
-  font-size: 12px; font-weight: 600; color: var(--pass);
-  margin-top: 5px;
-  font-family: 'Inter', system-ui, sans-serif;
-}
-
 /* ── Verdict badge ───────────────────────────────────────────────────────── */
 .verdict {
   display: inline-flex; align-items: center; gap: 8px;
@@ -131,6 +84,37 @@
 .chart-card h3 {
   letter-spacing: 1.3px;
 }
+.charts-grid--secondary {
+  grid-template-columns: 1fr 1fr;
+  margin-top: 4px;
+}
 
 /* Executive failures now render inline in the suite breakdown (compact, no
    screenshots) — card styles live in base.css. */
+
+/* ── Hero summary — executive-exclusive replacement for the 6-card KPI strip ── */
+.hero-summary { text-align: center; padding: 18px 0 2px; }
+.hero-summary__value {
+  font-family: 'Source Serif Pro', Georgia, serif;
+  font-size: 68px; font-weight: 700; color: var(--pass);
+  letter-spacing: -1.5px; line-height: 1;
+}
+.hero-summary__pct { font-size: 32px; }
+.hero-summary__label {
+  font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 600;
+  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); margin-top: 6px;
+}
+.hero-stat-row { display: flex; justify-content: center; gap: 0; margin: 18px 0 24px; }
+.hero-stat {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 0 22px; border-right: 1px solid var(--border);
+}
+.hero-stat:last-child { border-right: none; }
+.hero-stat--zero { opacity: .45; }
+.hero-stat__value {
+  font-family: 'Source Serif Pro', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--text-1);
+}
+.hero-stat__label {
+  display: block; font-family: 'Inter', system-ui, sans-serif; font-size: 8px; font-weight: 600;
+  letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); margin-top: 4px;
+}

package/dist/templates/styles/minimal.css

@@ -6,9 +6,17 @@
   padding: 20px 22px;
   background: var(--surface);
   border: 1px solid var(--border-2);
-  border-left: 3px solid var(--primary, #CC785C);
   border-radius: 6px;
   margin-bottom: 22px;
+  position: relative;
+  overflow: hidden;
+}
+.report-header::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: var(--accent);
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
 }
 .report-header__logo { height: 36px; width: auto; }
 .report-header__title {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.13.2",
+  "version": "0.14.1",
   "description": "Playwright Test reporter that generates designed PDF reports: minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",