@reportforge/playwright-pdf 0.1.0 → 0.2.0

package/README.md

@@ -53,7 +53,8 @@ Three templates, one reporter. Every PDF is fully offline — fonts, charts, and
 - **Dynamic filenames** — `{date}`, `{branch}`, `{status}` tokens in the output path
 - **CI/CD snippets** — GitHub Actions, GitLab CI, Bitbucket Pipelines, Jenkins, Azure DevOps
 - **Shard merging** — combine N Playwright JSON shard reports into one PDF via `shardResults`; accepts glob patterns or explicit paths
-- **Webhook notifications** — post pass/fail summaries to Slack, Teams, or Discord on every run; configurable per channel with `on: 'always' | 'failure' | 'success'`
+- **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)
 - **Hybrid licensing** — one short key unlocks it; reports keep rendering offline via a cached JWT between refreshes
 
 ---
@@ -183,10 +184,11 @@ All options are the second element of the reporter tuple.
 | `serverUrl` | `string` | `'https://reportforge.org'` | Licensing server base URL (override only for self-hosting) |
 | `open` | `boolean` | `false` | Open PDF after generation (local only) |
 | `shardResults` | `string \| string[]` | — | Glob or path array of Playwright JSON shard files to merge into one PDF. |
-| `notify` | `object` | — | Webhook notification channels. See [Webhook Notifications](#webhook-notifications). |
+| `notify` | `object` | — | Notification channels: `slack`, `teams`, `discord` (each `{ url, enabled, on }`), `email` (`{ to, enabled, on, attachPdf }`). See [Notifications](#notifications). |
 | `historyFile` | `string` | `~/.reportforge/{key}/history.json` | Path to history JSON. Relative paths resolved from cwd at startup. |
 | `historySize` | `number` | `10` | Max run entries to keep (integer ≥ 2). |
-| `showTrend` | `boolean` | `true` | Set to `false` to disable history write and sparkline entirely. |
+| `showTrend` | `boolean` | `true` | Set to `false` to disable history write and trend charts entirely. |
+| `flakinessTopN` | `number` | `5` | Max flaky tests to show in the `detailed` template flakiness table. `0` disables the table. |
 | `puppeteerExecutablePath` | `string` | auto-detect | Path to Chrome / Chromium |
 
 Full reference: [reportforge.org/docs#configuration](https://reportforge.org/docs#configuration).
@@ -215,30 +217,37 @@ The merge step can run against a dummy test file with zero tests — `shardResul
 
 > **Note:** Timed-out tests are counted as failures in shard mode (Playwright JSON stats do not distinguish `timedOut` from `failed`).
 
-### Webhook Notifications
+### Notifications
 
-Post a summary message to Slack, Teams, or Discord after each run.
+Post a summary to Slack, Teams, Discord, or email after each run.
 
 ```typescript
 notify: {
   slack: {
-    url: 'https://hooks.slack.com/services/...',
-    enabled: true,               // required — defaults to false
-    on: 'always',                // 'always' | 'failure' | 'success'  (default: 'always')
+    url: process.env.SLACK_WEBHOOK_URL,
+    enabled: true,
+    on: 'failure',               // 'always' | 'failure' | 'success'  (default: 'always')
   },
   teams: {
-    url: 'https://outlook.office.com/webhook/...',
+    url: process.env.TEAMS_WEBHOOK_URL,
     enabled: true,
-    on: 'failure',
+    on: 'always',
   },
   discord: {
-    url: 'https://discord.com/api/webhooks/...',
+    url: process.env.DISCORD_WEBHOOK_URL,
+    enabled: true,
+    on: 'failure',
+  },
+  email: {
+    to: ['team@company.com', 'qa@company.com'],
     enabled: true,
+    on: 'failure',
+    attachPdf: false,            // set true to attach the generated PDF
   },
 },
 ```
 
-Each channel is independent. `enabled: false` (the default) lets you store a URL without activating it — useful for staging configs. Set `enabled: true` to activate.
+Each channel is independent. `enabled: false` (the default) lets you store a URL without activating it — useful for staging configs.
 
 The `on` trigger controls when the message fires:
 
@@ -248,7 +257,9 @@ The `on` trigger controls when the message fires:
 | `'failure'` | `stats.failed > 0` or run timed out / interrupted |
 | `'success'` | All tests passed |
 
-The summary includes pass rate, test counts, duration, and the report filename. Notifications require a valid license and fire after PDF generation (or after a PDF generation failure — you still get the ping).
+**Email** requires `RESEND_API_KEY` in the environment (get one at [resend.com](https://resend.com)). Sender defaults to `noreply@reportforge.org`; override with `RESEND_FROM`. Store webhook URLs and API keys as CI secrets — never commit them.
+
+The summary includes pass rate, test counts, duration, and the report filename. Notifications require a valid license and fire after PDF generation (or after a PDF failure — you still get the ping).
 
 ### Test History Trending
 
@@ -277,6 +288,19 @@ reporter: [['@reportforge/playwright-pdf', {
 
 **Monorepo** — each package needs a distinct `historyFile` (e.g. `.reportforge/api-history.json`, `.reportforge/web-history.json`) so runs do not overwrite each other.
 
+### Flakiness Trend Table
+
+The `detailed` template includes a **Top flaky tests** table showing which tests flake most often across your stored history. Each row shows the test name, flake rate (%), run count, and a dot sparkline (amber dot = flaky in that run).
+
+```typescript
+reporter: [['@reportforge/playwright-pdf', {
+  template: 'detailed',
+  flakinessTopN: 5,    // default — show top 5; set 0 to disable
+}]]
+```
+
+The table is gated behind `showTrend: true` (the default) and appears automatically once history entries are present. Runs written before the flakiness feature was added are excluded from the denominator — the table fills in correctly as newer runs accumulate. Set `flakinessTopN: 0` to hide the table entirely.
+
 ### Filename tokens
 
 | Token | Replaced with | Example |

package/dist/index.d.mts

@@ -176,6 +176,12 @@ interface ReporterOptions {
      * @default true
      */
     showTrend?: boolean;
+    /**
+     * Number of flaky tests to display in the flakiness table (detailed template).
+     * Set to 0 to disable. Must be a non-negative integer.
+     * @default 5
+     */
+    flakinessTopN?: number;
     /**
      * Path to a custom Handlebars (.hbs) template file. When set, takes
      * precedence over `template`. Relative paths resolve from `process.cwd()`.
@@ -256,6 +262,7 @@ declare class PdfReporter implements Reporter {
     onEnd(result: FullResult): Promise<void>;
     private _collectData;
     private _appendTrend;
+    private _populateHistoryCharts;
     private _buildReportData;
     printsToStdio(): boolean;
     private resolveLicense;

package/dist/index.d.ts

@@ -176,6 +176,12 @@ interface ReporterOptions {
      * @default true
      */
     showTrend?: boolean;
+    /**
+     * Number of flaky tests to display in the flakiness table (detailed template).
+     * Set to 0 to disable. Must be a non-negative integer.
+     * @default 5
+     */
+    flakinessTopN?: number;
     /**
      * Path to a custom Handlebars (.hbs) template file. When set, takes
      * precedence over `template`. Relative paths resolve from `process.cwd()`.
@@ -256,6 +262,7 @@ declare class PdfReporter implements Reporter {
     onEnd(result: FullResult): Promise<void>;
     private _collectData;
     private _appendTrend;
+    private _populateHistoryCharts;
     private _buildReportData;
     printsToStdio(): boolean;
     private resolveLicense;

package/dist/index.js

@@ -10328,7 +10328,8 @@ var DEFAULT_OPTIONS = {
   compressionLevel: "auto",
   maxFileSizeMb: 8,
   historySize: 10,
-  showTrend: true
+  showTrend: true,
+  flakinessTopN: 5
 };
 
 // src/config/schema.ts
@@ -10341,10 +10342,17 @@ var channelConfigSchema = external_exports.object({
   on: external_exports.enum(["always", "failure", "success"]).default("always"),
   enabled: external_exports.boolean().default(false)
 });
+var emailChannelConfigSchema = external_exports.object({
+  to: external_exports.array(external_exports.string().email('Each "to" entry must be a valid email')).min(1, '"to" must have at least one address'),
+  on: external_exports.enum(["always", "failure", "success"]).default("always"),
+  enabled: external_exports.boolean().default(false),
+  attachPdf: external_exports.boolean().default(false)
+});
 var notifyConfigSchema = external_exports.object({
   slack: channelConfigSchema.optional(),
   teams: channelConfigSchema.optional(),
-  discord: channelConfigSchema.optional()
+  discord: channelConfigSchema.optional(),
+  email: emailChannelConfigSchema.optional()
 }).optional();
 var ReporterOptionsSchema = external_exports.object({
   outputFile: external_exports.string().optional().default(DEFAULT_OPTIONS.outputFile),
@@ -10374,6 +10382,7 @@ var ReporterOptionsSchema = external_exports.object({
   historyFile: external_exports.string().optional(),
   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),
   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"),
     external_exports.array(
@@ -12233,7 +12242,7 @@ function fmtMb(bytes) {
 }
 
 // src/reporter.ts
-var import_path11 = __toESM(require("path"));
+var import_path12 = __toESM(require("path"));
 var import_crypto7 = __toESM(require("crypto"));
 var import_os6 = __toESM(require("os"));
 
@@ -12275,6 +12284,42 @@ var HistoryManager = class {
   }
 };
 
+// src/history/FlakinessAnalyser.ts
+init_cjs_shims();
+function computeTopN(entries, topN) {
+  if (topN === 0) return [];
+  const qualifying = entries.filter((e) => Array.isArray(e.flakyTests));
+  if (qualifying.length === 0) return [];
+  const map = /* @__PURE__ */ new Map();
+  qualifying.forEach((entry, idx) => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const t of entry.flakyTests) {
+      if (seen.has(t.id)) continue;
+      seen.add(t.id);
+      if (!map.has(t.id)) map.set(t.id, { title: t.title, hits: /* @__PURE__ */ new Set() });
+      map.get(t.id).hits.add(idx);
+    }
+  });
+  const totalRuns = qualifying.length;
+  const rows = [...map.entries()].map(([, { title, hits }]) => {
+    const flakeCount = hits.size;
+    const sparkline = qualifying.slice().reverse().map((_, reversedIdx) => {
+      const originalIdx = qualifying.length - 1 - reversedIdx;
+      return hits.has(originalIdx);
+    });
+    return {
+      title,
+      flakeRate: Math.round(flakeCount / totalRuns * 100),
+      flakeCount,
+      totalRuns,
+      sparkline
+    };
+  });
+  return rows.sort(
+    (a, b) => b.flakeRate - a.flakeRate || b.flakeCount - a.flakeCount || a.title.localeCompare(b.title)
+  ).slice(0, topN);
+}
+
 // src/notify/index.ts
 init_cjs_shims();
 
@@ -12391,6 +12436,115 @@ ${name}`,
   };
 }
 
+// src/notify/EmailSender.ts
+init_cjs_shims();
+var import_promises = require("fs/promises");
+var import_path11 = require("path");
+
+// src/notify/formatters/email.ts
+init_cjs_shims();
+function buildEmailContent(stats, pdfPaths, reportTitle) {
+  const label = statusLabel(stats.verdict);
+  const subject = `[ReportForge] ${label} \u2014 ${stats.passRate}% passed`;
+  const name = reportName(pdfPaths, reportTitle);
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="utf-8"><title>${escHtml(subject)}</title></head>
+<body style="font-family:sans-serif;max-width:600px;margin:auto;padding:24px;color:#1a1a1a">
+  <h2 style="margin:0 0 8px">${escHtml(label)}</h2>
+  <p style="margin:0 0 16px;color:#555">${escHtml(name)}</p>
+  <table style="border-collapse:collapse;width:100%">
+    <tr style="background:#f5f5f5">
+      <th style="text-align:left;padding:8px 12px;font-weight:600">Metric</th>
+      <th style="text-align:right;padding:8px 12px;font-weight:600">Value</th>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Total</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.total}</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Passed</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right;color:#1a7f3c">${stats.passed}</td>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Failed</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right;color:${stats.failed > 0 ? "#b91c1c" : "#1a1a1a"}">${stats.failed}</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Flaky</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.flaky}</td>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Pass Rate</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.passRate}%</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Duration</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${escHtml(countsLine(stats).split(" \xB7 ").pop() ?? "")}</td>
+    </tr>
+  </table>
+  <p style="margin:24px 0 0;color:#888;font-size:12px">Sent by ReportForge \xB7 <a href="https://reportforge.org" style="color:#888">reportforge.org</a></p>
+</body>
+</html>`;
+  return { subject, html };
+}
+function escHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/notify/EmailSender.ts
+var RESEND_ENDPOINT = "https://api.resend.com/emails";
+var DEFAULT_FROM = "ReportForge <noreply@reportforge.org>";
+var EmailSender = class {
+  async send(reportData, config, pdfPaths) {
+    const apiKey = process.env["RESEND_API_KEY"];
+    if (!apiKey) {
+      logger.warn("[notify] email: RESEND_API_KEY not set \u2014 skipping");
+      return "skipped";
+    }
+    const from = process.env["RESEND_FROM"] ?? DEFAULT_FROM;
+    const { subject, html } = buildEmailContent(
+      reportData.stats,
+      pdfPaths,
+      reportData.meta.title ?? ""
+    );
+    const body = { from, to: config.to, subject, html };
+    if (config.attachPdf && pdfPaths.length > 0) {
+      const pdfPath = pdfPaths[0];
+      try {
+        const content = await (0, import_promises.readFile)(pdfPath);
+        body["attachments"] = [{ filename: (0, import_path11.basename)(pdfPath), content: content.toString("base64") }];
+      } catch (err) {
+        logger.warn(`[notify] email: could not read PDF for attachment: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 15e3);
+    try {
+      const res = await fetch(RESEND_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      });
+      if (!res.ok) {
+        const detail = await res.json().catch(() => ({}));
+        throw new Error(`HTTP ${res.status}: ${detail.message ?? "unknown"}`);
+      }
+      logger.info("[notify] email: sent");
+      return "sent";
+    } catch (err) {
+      logger.warn(`[notify] email: ${err instanceof Error ? err.message : String(err)}`);
+      return "failed";
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+};
+
 // src/notify/NotificationSender.ts
 function shouldNotify(channel, stats) {
   if (!channel.enabled) return false;
@@ -12419,6 +12573,18 @@ var NotificationSender = class {
         return this.post(name, channel.url, payload, result);
       })
     );
+    if (notifyConfig.email) {
+      if (!shouldNotify(notifyConfig.email, reportData.stats)) {
+        result.skipped.push("email");
+      } else {
+        const outcome = await new EmailSender().send(reportData, notifyConfig.email, pdfPaths);
+        if (outcome === "sent") result.sent.push("email");
+        else if (outcome === "failed") result.failed.push("email");
+        else result.skipped.push("email");
+      }
+    } else {
+      result.skipped.push("email");
+    }
     return result;
   }
   async post(name, url, payload, result) {
@@ -12450,7 +12616,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.1.0" : "0.x";
+    const version = true ? "0.2.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,
@@ -12506,6 +12672,7 @@ var PdfReporter = class {
     const historyPath = resolveHistoryPath(this.options, this.cwd);
     const hm = new HistoryManager(historyPath);
     const suffix = Math.random().toString(36).padEnd(8, "0").slice(2, 6);
+    const flakyTests = collectFlakyTests(collected.projects);
     const entry = {
       runId: `${(/* @__PURE__ */ new Date()).toISOString()}-${suffix}`,
       timestamp: Date.now(),
@@ -12515,9 +12682,13 @@ var PdfReporter = class {
       failed: collected.stats.failed,
       flaky: collected.stats.flaky,
       duration: collected.stats.duration,
-      verdict: deriveVerdict(collected.stats)
+      verdict: deriveVerdict(collected.stats),
+      flakyTests
     };
     const entries = hm.append(entry, this.options.historySize);
+    this._populateHistoryCharts(entries, collected);
+  }
+  _populateHistoryCharts(entries, collected) {
     if (entries.length >= 2) {
       collected.charts.trend = {
         entries: entries.map((e) => ({
@@ -12531,6 +12702,12 @@ var PdfReporter = class {
         delta: entries[0].passRate - entries[1].passRate
       };
     }
+    if (this.options.flakinessTopN > 0) {
+      const table = computeTopN(entries, this.options.flakinessTopN);
+      if (table.length > 0) {
+        collected.charts.flakinessTable = table;
+      }
+    }
   }
   _buildReportData(collected, licenseInfo) {
     const { projects, stats, failures, environment, charts } = collected;
@@ -12571,7 +12748,7 @@ var PdfReporter = class {
   }
   resolveProjectName() {
     try {
-      const pkgPath = import_path11.default.resolve(process.cwd(), "package.json");
+      const pkgPath = import_path12.default.resolve(process.cwd(), "package.json");
       const pkg = require(pkgPath);
       return pkg.name ?? "Playwright Tests";
     } catch {
@@ -12621,10 +12798,28 @@ function deriveVerdict(stats) {
 }
 function resolveHistoryPath(options, cwd) {
   if (options.historyFile) {
-    return import_path11.default.isAbsolute(options.historyFile) ? options.historyFile : import_path11.default.resolve(cwd, options.historyFile);
+    return import_path12.default.isAbsolute(options.historyFile) ? options.historyFile : import_path12.default.resolve(cwd, options.historyFile);
   }
   const projectKey = import_crypto7.default.createHash("sha256").update(cwd + (options.outputFile ?? "")).digest("hex").slice(0, 8);
-  return import_path11.default.join(import_os6.default.homedir(), ".reportforge", projectKey, "history.json");
+  return import_path12.default.join(import_os6.default.homedir(), ".reportforge", projectKey, "history.json");
+}
+function flattenSuiteNodes(suites) {
+  return suites.flatMap((s) => [s, ...flattenSuiteNodes(s.suites)]);
+}
+function collectFlakyTests(projects) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const project of projects) {
+    for (const suite of flattenSuiteNodes(project.suites)) {
+      for (const test of suite.tests) {
+        if (test.status === "flaky" && !seen.has(test.id)) {
+          seen.add(test.id);
+          result.push({ id: test.id, title: test.fullTitle });
+        }
+      }
+    }
+  }
+  return result;
 }
 
 // src/index.ts

package/dist/index.mjs

@@ -10329,7 +10329,8 @@ var DEFAULT_OPTIONS = {
   compressionLevel: "auto",
   maxFileSizeMb: 8,
   historySize: 10,
-  showTrend: true
+  showTrend: true,
+  flakinessTopN: 5
 };
 
 // src/config/schema.ts
@@ -10342,10 +10343,17 @@ var channelConfigSchema = external_exports.object({
   on: external_exports.enum(["always", "failure", "success"]).default("always"),
   enabled: external_exports.boolean().default(false)
 });
+var emailChannelConfigSchema = external_exports.object({
+  to: external_exports.array(external_exports.string().email('Each "to" entry must be a valid email')).min(1, '"to" must have at least one address'),
+  on: external_exports.enum(["always", "failure", "success"]).default("always"),
+  enabled: external_exports.boolean().default(false),
+  attachPdf: external_exports.boolean().default(false)
+});
 var notifyConfigSchema = external_exports.object({
   slack: channelConfigSchema.optional(),
   teams: channelConfigSchema.optional(),
-  discord: channelConfigSchema.optional()
+  discord: channelConfigSchema.optional(),
+  email: emailChannelConfigSchema.optional()
 }).optional();
 var ReporterOptionsSchema = external_exports.object({
   outputFile: external_exports.string().optional().default(DEFAULT_OPTIONS.outputFile),
@@ -10375,6 +10383,7 @@ var ReporterOptionsSchema = external_exports.object({
   historyFile: external_exports.string().optional(),
   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),
   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"),
     external_exports.array(
@@ -12276,6 +12285,42 @@ var HistoryManager = class {
   }
 };
 
+// src/history/FlakinessAnalyser.ts
+init_esm_shims();
+function computeTopN(entries, topN) {
+  if (topN === 0) return [];
+  const qualifying = entries.filter((e) => Array.isArray(e.flakyTests));
+  if (qualifying.length === 0) return [];
+  const map = /* @__PURE__ */ new Map();
+  qualifying.forEach((entry, idx) => {
+    const seen = /* @__PURE__ */ new Set();
+    for (const t of entry.flakyTests) {
+      if (seen.has(t.id)) continue;
+      seen.add(t.id);
+      if (!map.has(t.id)) map.set(t.id, { title: t.title, hits: /* @__PURE__ */ new Set() });
+      map.get(t.id).hits.add(idx);
+    }
+  });
+  const totalRuns = qualifying.length;
+  const rows = [...map.entries()].map(([, { title, hits }]) => {
+    const flakeCount = hits.size;
+    const sparkline = qualifying.slice().reverse().map((_, reversedIdx) => {
+      const originalIdx = qualifying.length - 1 - reversedIdx;
+      return hits.has(originalIdx);
+    });
+    return {
+      title,
+      flakeRate: Math.round(flakeCount / totalRuns * 100),
+      flakeCount,
+      totalRuns,
+      sparkline
+    };
+  });
+  return rows.sort(
+    (a, b) => b.flakeRate - a.flakeRate || b.flakeCount - a.flakeCount || a.title.localeCompare(b.title)
+  ).slice(0, topN);
+}
+
 // src/notify/index.ts
 init_esm_shims();
 
@@ -12392,6 +12437,115 @@ ${name}`,
   };
 }
 
+// src/notify/EmailSender.ts
+init_esm_shims();
+import { readFile } from "fs/promises";
+import { basename as basename2 } from "path";
+
+// src/notify/formatters/email.ts
+init_esm_shims();
+function buildEmailContent(stats, pdfPaths, reportTitle) {
+  const label = statusLabel(stats.verdict);
+  const subject = `[ReportForge] ${label} \u2014 ${stats.passRate}% passed`;
+  const name = reportName(pdfPaths, reportTitle);
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="utf-8"><title>${escHtml(subject)}</title></head>
+<body style="font-family:sans-serif;max-width:600px;margin:auto;padding:24px;color:#1a1a1a">
+  <h2 style="margin:0 0 8px">${escHtml(label)}</h2>
+  <p style="margin:0 0 16px;color:#555">${escHtml(name)}</p>
+  <table style="border-collapse:collapse;width:100%">
+    <tr style="background:#f5f5f5">
+      <th style="text-align:left;padding:8px 12px;font-weight:600">Metric</th>
+      <th style="text-align:right;padding:8px 12px;font-weight:600">Value</th>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Total</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.total}</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Passed</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right;color:#1a7f3c">${stats.passed}</td>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Failed</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right;color:${stats.failed > 0 ? "#b91c1c" : "#1a1a1a"}">${stats.failed}</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Flaky</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.flaky}</td>
+    </tr>
+    <tr>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Pass Rate</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${stats.passRate}%</td>
+    </tr>
+    <tr style="background:#f9f9f9">
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5">Duration</td>
+      <td style="padding:8px 12px;border-top:1px solid #e5e5e5;text-align:right">${escHtml(countsLine(stats).split(" \xB7 ").pop() ?? "")}</td>
+    </tr>
+  </table>
+  <p style="margin:24px 0 0;color:#888;font-size:12px">Sent by ReportForge \xB7 <a href="https://reportforge.org" style="color:#888">reportforge.org</a></p>
+</body>
+</html>`;
+  return { subject, html };
+}
+function escHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/notify/EmailSender.ts
+var RESEND_ENDPOINT = "https://api.resend.com/emails";
+var DEFAULT_FROM = "ReportForge <noreply@reportforge.org>";
+var EmailSender = class {
+  async send(reportData, config, pdfPaths) {
+    const apiKey = process.env["RESEND_API_KEY"];
+    if (!apiKey) {
+      logger.warn("[notify] email: RESEND_API_KEY not set \u2014 skipping");
+      return "skipped";
+    }
+    const from = process.env["RESEND_FROM"] ?? DEFAULT_FROM;
+    const { subject, html } = buildEmailContent(
+      reportData.stats,
+      pdfPaths,
+      reportData.meta.title ?? ""
+    );
+    const body = { from, to: config.to, subject, html };
+    if (config.attachPdf && pdfPaths.length > 0) {
+      const pdfPath = pdfPaths[0];
+      try {
+        const content = await readFile(pdfPath);
+        body["attachments"] = [{ filename: basename2(pdfPath), content: content.toString("base64") }];
+      } catch (err) {
+        logger.warn(`[notify] email: could not read PDF for attachment: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 15e3);
+    try {
+      const res = await fetch(RESEND_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      });
+      if (!res.ok) {
+        const detail = await res.json().catch(() => ({}));
+        throw new Error(`HTTP ${res.status}: ${detail.message ?? "unknown"}`);
+      }
+      logger.info("[notify] email: sent");
+      return "sent";
+    } catch (err) {
+      logger.warn(`[notify] email: ${err instanceof Error ? err.message : String(err)}`);
+      return "failed";
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+};
+
 // src/notify/NotificationSender.ts
 function shouldNotify(channel, stats) {
   if (!channel.enabled) return false;
@@ -12420,6 +12574,18 @@ var NotificationSender = class {
         return this.post(name, channel.url, payload, result);
       })
     );
+    if (notifyConfig.email) {
+      if (!shouldNotify(notifyConfig.email, reportData.stats)) {
+        result.skipped.push("email");
+      } else {
+        const outcome = await new EmailSender().send(reportData, notifyConfig.email, pdfPaths);
+        if (outcome === "sent") result.sent.push("email");
+        else if (outcome === "failed") result.failed.push("email");
+        else result.skipped.push("email");
+      }
+    } else {
+      result.skipped.push("email");
+    }
     return result;
   }
   async post(name, url, payload, result) {
@@ -12451,7 +12617,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.1.0" : "0.x";
+    const version = true ? "0.2.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,
@@ -12507,6 +12673,7 @@ var PdfReporter = class {
     const historyPath = resolveHistoryPath(this.options, this.cwd);
     const hm = new HistoryManager(historyPath);
     const suffix = Math.random().toString(36).padEnd(8, "0").slice(2, 6);
+    const flakyTests = collectFlakyTests(collected.projects);
     const entry = {
       runId: `${(/* @__PURE__ */ new Date()).toISOString()}-${suffix}`,
       timestamp: Date.now(),
@@ -12516,9 +12683,13 @@ var PdfReporter = class {
       failed: collected.stats.failed,
       flaky: collected.stats.flaky,
       duration: collected.stats.duration,
-      verdict: deriveVerdict(collected.stats)
+      verdict: deriveVerdict(collected.stats),
+      flakyTests
     };
     const entries = hm.append(entry, this.options.historySize);
+    this._populateHistoryCharts(entries, collected);
+  }
+  _populateHistoryCharts(entries, collected) {
     if (entries.length >= 2) {
       collected.charts.trend = {
         entries: entries.map((e) => ({
@@ -12532,6 +12703,12 @@ var PdfReporter = class {
         delta: entries[0].passRate - entries[1].passRate
       };
     }
+    if (this.options.flakinessTopN > 0) {
+      const table = computeTopN(entries, this.options.flakinessTopN);
+      if (table.length > 0) {
+        collected.charts.flakinessTable = table;
+      }
+    }
   }
   _buildReportData(collected, licenseInfo) {
     const { projects, stats, failures, environment, charts } = collected;
@@ -12627,6 +12804,24 @@ function resolveHistoryPath(options, cwd) {
   const projectKey = crypto3.createHash("sha256").update(cwd + (options.outputFile ?? "")).digest("hex").slice(0, 8);
   return path11.join(os6.homedir(), ".reportforge", projectKey, "history.json");
 }
+function flattenSuiteNodes(suites) {
+  return suites.flatMap((s) => [s, ...flattenSuiteNodes(s.suites)]);
+}
+function collectFlakyTests(projects) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const project of projects) {
+    for (const suite of flattenSuiteNodes(project.suites)) {
+      for (const test of suite.tests) {
+        if (test.status === "flaky" && !seen.has(test.id)) {
+          seen.add(test.id);
+          result.push({ id: test.id, title: test.fullTitle });
+        }
+      }
+    }
+  }
+  return result;
+}
 
 // src/index.ts
 function defineReporterConfig(options) {

package/dist/templates/layouts/detailed.hbs

@@ -14,7 +14,7 @@
 
 {{> executive-summary options=(obj showPassRate=true) }}
 
-{{> charts options=(obj showCharts=true) }}
+{{> charts options=(obj showCharts=true showTrend=options.showTrend) }}
 
 <div class="page-group">
   {{> requirements-matrix }}

package/dist/templates/layouts/executive.hbs

@@ -18,7 +18,7 @@
 
 {{> executive-summary options=(obj showPassRate=true) }}
 
-{{> charts options=(obj showCharts=true) }}
+{{> charts options=(obj showCharts=true showTrend=options.showTrend) }}
 
 {{> slow-tests limit=5 showProject=false}}
 

package/dist/templates/partials/charts.hbs

@@ -30,6 +30,42 @@
 {{/if}}
 {{/if}}
 
+{{#if options.showTrend}}
+{{#if charts.flakinessTable}}
+<div class="flakiness-card">
+  <div class="flakiness-card__header">
+    <span class="flakiness-card__title">Top flaky tests &mdash; last {{charts.flakinessTable.[0].totalRuns}} runs</span>
+  </div>
+  <table class="flakiness-table">
+    <thead>
+      <tr>
+        <th class="flakiness-table__test">Test</th>
+        <th class="flakiness-table__rate">Flake rate</th>
+        <th class="flakiness-table__count">Runs flaky</th>
+        <th class="flakiness-table__spark">History</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each charts.flakinessTable}}
+      <tr>
+        <td class="flakiness-table__test" title="{{this.title}}">{{this.title}}</td>
+        <td class="flakiness-table__rate">{{this.flakeRate}}%</td>
+        <td class="flakiness-table__count">{{this.flakeCount}} / {{this.totalRuns}}</td>
+        <td class="flakiness-table__spark">
+          <span class="flaky-spark">
+            {{#each this.sparkline}}
+            <span class="flaky-dot{{#if this}} flaky-dot--hit{{/if}}"></span>
+            {{/each}}
+          </span>
+        </td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>
+{{/if}}
+{{/if}}
+
 <script>
 (function() {
   var remaining = 0;

package/dist/templates/styles/detailed.css

@@ -307,5 +307,106 @@
 .verdict-partial { background: var(--flaky); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
 .verdict-failed  { background: var(--fail);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
 .verdict-unknown { background: var(--skip);  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+/* ── Flakiness trend table (R8) ─────────────────────────────────────────── */
+.flakiness-card {
+  margin: 24px 0 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.flakiness-card__header {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-card__title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+}
+
+.flakiness-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.flakiness-table thead th {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-2);
+}
+
+.flakiness-table tbody tr {
+  border-bottom: 1px solid var(--border);
+}
+
+.flakiness-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.flakiness-table tbody td {
+  padding: 8px 12px;
+  vertical-align: middle;
+  color: var(--text-1);
+}
+
+.flakiness-table__test {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flakiness-table__rate {
+  width: 72px;
+  font-weight: 600;
+  color: var(--flaky);
+}
+
+.flakiness-table__count {
+  width: 72px;
+  color: var(--text-3);
+}
+
+.flakiness-table__spark {
+  width: 140px;
+}
+
+.flaky-spark {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.flaky-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--border, #e5e3d8);
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+.flaky-dot--hit {
+  background: #f59e0b;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
 </content>
 </invoke>

package/package.json

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