@reportforge/playwright-pdf 0.0.1 → 0.2.0

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),
@@ -10374,7 +10382,16 @@ var ReporterOptionsSchema = external_exports.object({
   notify: notifyConfigSchema,
   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)
+  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(
+      external_exports.string().regex(/\.hbs$/, "Each templatePath entry must end with .hbs").refine((v) => v.slice(0, -4).trim().length > 0, "Each templatePath basename must not be empty")
+    ).min(1, "templatePath array must not be empty")
+  ]).optional().transform(
+    (v) => v === void 0 ? void 0 : Array.isArray(v) ? v : [v]
+  )
 });
 function parseOptions(raw) {
   const result = ReporterOptionsSchema.safeParse(raw ?? {});
@@ -11462,6 +11479,7 @@ var TemplateEngine = class {
   constructor() {
     this.chartjsInline = "";
     this.fontsBundleCss = "";
+    this.customTemplateCache = /* @__PURE__ */ new Map();
     this.handlebars = import_handlebars.default.create();
     this.templatesDir = path4.resolve(__dirname, "templates");
     if (!fs3.existsSync(this.templatesDir)) {
@@ -11491,12 +11509,43 @@ var TemplateEngine = class {
     const ctx = this.buildContext(data, template);
     return compiledLayout(ctx);
   }
+  renderFromPath(data, filePath) {
+    if (!this.customTemplateCache.has(filePath)) {
+      if (!fs3.existsSync(filePath)) {
+        throw new Error(`[reportforge] Custom template not found: ${filePath}`);
+      }
+      const source = fs3.readFileSync(filePath, "utf8");
+      this.customTemplateCache.set(filePath, this.handlebars.compile(source));
+    }
+    const compiledFn = this.customTemplateCache.get(filePath);
+    return compiledFn(this.buildCustomContext(data));
+  }
+  buildCustomContext(data) {
+    return {
+      ...data,
+      options: {
+        showCharts: true,
+        showTrend: true,
+        showStackTraces: true,
+        showFullEnvironment: true,
+        showPassRate: true,
+        showRetries: true,
+        showFullFailures: true
+      },
+      tagGroups: this.buildTagGroups(data),
+      slowTests: this.buildSlowTests(data),
+      baseCSS: this.fontsBundleCss + "\n" + this.readStyle("base.css"),
+      templateCSS: "",
+      chartjsScript: this.buildChartjsScript()
+    };
+  }
   buildContext(data, template) {
     const baseCSS = this.fontsBundleCss + "\n" + this.readStyle("base.css");
     const templateCSS = this.readStyle(`${template}.css`);
     const optionsMap = {
       minimal: {
         showCharts: false,
+        showTrend: false,
         showStackTraces: true,
         showFullEnvironment: false,
         showPassRate: true,
@@ -11505,6 +11554,7 @@ var TemplateEngine = class {
       },
       detailed: {
         showCharts: true,
+        showTrend: true,
         showStackTraces: true,
         showFullEnvironment: true,
         showPassRate: true,
@@ -11513,6 +11563,7 @@ var TemplateEngine = class {
       },
       executive: {
         showCharts: true,
+        showTrend: true,
         showStackTraces: false,
         showFullEnvironment: false,
         showPassRate: true,
@@ -11520,7 +11571,7 @@ var TemplateEngine = class {
         showFullFailures: false
       }
     };
-    const chartjsScript = this.chartjsInline ? `<script>${this.chartjsInline}</script>` : "<!-- Chart.js not bundled; charts disabled --><script>window.__chartsReady=true;</script>";
+    const chartjsScript = this.buildChartjsScript();
     return {
       ...data,
       options: optionsMap[template],
@@ -11531,6 +11582,9 @@ var TemplateEngine = class {
       chartjsScript
     };
   }
+  buildChartjsScript() {
+    return this.chartjsInline ? `<script>${this.chartjsInline}</script>` : "<!-- Chart.js not bundled; charts disabled --><script>window.__chartsReady=true;</script>";
+  }
   buildTagGroups(data) {
     const tagMap = /* @__PURE__ */ new Map();
     for (const project of data.projects) {
@@ -11911,10 +11965,10 @@ var FilenameResolver = class {
     fs8.mkdirSync(path7.dirname(absolute), { recursive: true });
     return absolute;
   }
-  injectTemplateSuffix(outputPath, templateId) {
+  injectTemplateSuffix(outputPath, suffix) {
     const ext = path7.extname(outputPath);
     const base = outputPath.slice(0, outputPath.length - ext.length);
-    return `${base}-${templateId}${ext}`;
+    return `${base}-${suffix}${ext}`;
   }
   formatDate(d) {
     const yyyy = d.getFullYear();
@@ -12034,9 +12088,15 @@ var PdfGenerator = class {
     }
   }
   async generateAll(data, options, _licenseInfo) {
-    const rawTemplates = Array.isArray(options.template) ? options.template : [options.template];
-    const templates = [...new Set(rawTemplates)];
-    const isMulti = templates.length > 1;
+    const sources = this.resolveTemplateSources(options);
+    const isMulti = sources.length > 1;
+    for (const source of sources) {
+      if (source.kind === "custom" && !fs10.existsSync(source.absolutePath)) {
+        throw new Error(
+          `[reportforge] Custom template not found: ${source.absolutePath}`
+        );
+      }
+    }
     if (options.logo) {
       const logoBase64 = await this.screenshotEmbedder.embedLogoFile(options.logo);
       data.meta.branding.logoBase64 = logoBase64;
@@ -12053,11 +12113,13 @@ var PdfGenerator = class {
     const outputPaths = [];
     const { page } = await this.browserManager.launch(options.puppeteerExecutablePath);
     try {
-      for (const templateId of templates) {
-        const outputPath = isMulti ? this.filenameResolver.injectTemplateSuffix(baseOutputPath, templateId) : baseOutputPath;
+      for (const source of sources) {
+        const suffix = source.kind === "builtin" ? source.id : source.label;
+        const outputPath = isMulti ? this.filenameResolver.injectTemplateSuffix(baseOutputPath, suffix) : baseOutputPath;
+        const templateId = source.kind === "builtin" ? source.id : "detailed";
         const templateData = { ...data, meta: { ...data.meta, template: templateId } };
         const templateOptions = { ...options, template: templateId };
-        await this.renderPdf(templateData, templateOptions, compression, outputPath, page);
+        await this.renderPdf(templateData, templateOptions, source, compression, outputPath, page);
         const capBytes = (options.maxFileSizeMb ?? 0) * 1024 * 1024;
         if (capBytes > 0) {
           const sizeBytes = (await fs10.promises.stat(outputPath)).size;
@@ -12066,7 +12128,7 @@ var PdfGenerator = class {
             logger.warn(
               `PDF size ${fmtMb(sizeBytes)} exceeds cap ${fmtMb(capBytes)} \u2014 re-rendering (jpeg-q=${tighter.quality}, max-w=${tighter.maxWidth}px, inline-failures\u2264${tighter.maxInlineFailures}).`
             );
-            await this.renderPdf(templateData, templateOptions, tighter, outputPath, page);
+            await this.renderPdf(templateData, templateOptions, source, tighter, outputPath, page);
             const finalSize = (await fs10.promises.stat(outputPath)).size;
             if (finalSize > capBytes) {
               logger.warn(
@@ -12089,6 +12151,17 @@ var PdfGenerator = class {
     }
     return outputPaths;
   }
+  resolveTemplateSources(options) {
+    if (options.templatePath && options.templatePath.length > 0) {
+      return [...new Set(options.templatePath)].map((p) => ({
+        kind: "custom",
+        absolutePath: path9.isAbsolute(p) ? p : path9.resolve(process.cwd(), p),
+        label: path9.basename(p, ".hbs")
+      }));
+    }
+    const rawIds = Array.isArray(options.template) ? options.template : [options.template];
+    return [...new Set(rawIds)].map((id) => ({ kind: "builtin", id }));
+  }
   resolveSettings(options, data) {
     return resolveCompression({
       level: options.compressionLevel ?? "auto",
@@ -12123,7 +12196,7 @@ var PdfGenerator = class {
    * Separated from generateAll() so the size-cap retune can reuse it with
    * stricter settings without reshaping the rest of the flow.
    */
-  async renderPdf(data, options, compression, outputPath, page) {
+  async renderPdf(data, options, source, compression, outputPath, page) {
     const paginated = await this.failurePaginator.paginate(
       data.failures,
       compression.maxInlineFailures,
@@ -12143,15 +12216,15 @@ var PdfGenerator = class {
         maxWidth: compression.maxWidth
       });
     }
-    const templateId = options.template;
-    logger.info(`Rendering template: ${templateId}`);
-    const html = this.templateEngine.render(renderData, templateId);
+    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) : this.templateEngine.renderFromPath(renderData, source.absolutePath);
     const tempHtmlPath = await this.htmlWriter.write(html);
     const fileUrl = this.htmlWriter.toFileUrl(tempHtmlPath);
     try {
       logger.info(`Navigating to temp HTML (${Math.round(html.length / 1024)} KB)...`);
       await page.goto(fileUrl, { waitUntil: "domcontentloaded", timeout: 6e4 });
-      const showCharts = templateId !== "minimal";
+      const showCharts = source.kind === "builtin" ? source.id !== "minimal" : true;
       await this.chartRenderer.waitForCharts(page, showCharts);
       logger.info(`Generating PDF \u2192 ${path9.relative(process.cwd(), outputPath)}`);
       await page.pdf({
@@ -12212,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();
 
@@ -12328,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;
@@ -12356,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) {
@@ -12387,7 +12617,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.0.1" : "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,
@@ -12443,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(),
@@ -12452,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) => ({
@@ -12468,11 +12703,17 @@ 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;
     const projectName = this.options.projectName ?? this.resolveProjectName();
-    const firstTemplate = Array.isArray(this.options.template) ? this.options.template[0] : this.options.template;
+    const firstTemplate = this.options.templatePath?.length ? "detailed" : Array.isArray(this.options.template) ? this.options.template[0] : this.options.template;
     return {
       meta: {
         title: this.options.reportTitle,
@@ -12530,6 +12771,15 @@ var PdfReporter = class {
         logger.warn(`open: true \u2014 could not open ${pdfPath}: ${err.message}`);
       });
       child.unref();
+      if (platform === "win32") {
+        child.on("close", (code) => {
+          if (code !== 0 && code !== null) {
+            logger.warn(
+              `open: true \u2014 shell-open exited with code ${code}. No PDF viewer may be registered for .pdf files on this machine. File is at: ${pdfPath}`
+            );
+          }
+        });
+      }
     } catch (err) {
       logger.warn(`open: true \u2014 unexpected error: ${err.message}`);
     }
@@ -12554,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

@@ -10,9 +10,8 @@
   </div>
 </div>
 
-{{!-- Trend card: detailed + executive. Minimal skipped (no charts at all).
-     In multi-template runs generateAll overrides meta.template per render pass. --}}
-{{#unless (eq meta.template 'minimal')}}
+{{!-- 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">
@@ -29,7 +28,43 @@
   <div class="trend-run-history" id="run-history-table"></div>
 </div>
 {{/if}}
-{{/unless}}
+{{/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() {
@@ -144,7 +179,7 @@
     }
   });
 
-  {{#unless (eq meta.template 'minimal')}}{{#if charts.trend}}
+  {{#if options.showTrend}}{{#if charts.trend}}
   // entries are newest-first in storage; reverse for oldest-left (chronological) display
   var trendRaw    = {{{safeJsonData charts.trend.entries}}};
   var trendData   = trendRaw.slice().reverse();
@@ -298,7 +333,7 @@
       histEl.appendChild(row);
     });
   }
-  {{/if}}{{/unless}}
+  {{/if}}{{/if}}
 })();
 </script>
 {{else}}