@reportforge/playwright-pdf 0.6.2 → 0.7.0

package/dist/templates/styles/base.css

@@ -292,12 +292,90 @@ code {
 .release-gate__sep { color: var(--border-3); }
 .release-gate__flaky-warn { color: var(--flaky); font-weight: 600; }
 
-/* ── Failure severity — colour the card's left edge by triage rank ───────── */
-/* Two-class specificity beats the per-template `.failure-item` border shorthand. */
-.failure-item.failure-item--critical { border-left-color: var(--fail); }
-.failure-item.failure-item--high     { border-left-color: #A35E1E; }
-.failure-item.failure-item--medium   { border-left-color: var(--timeout); }
-.failure-item.failure-item--low      { border-left-color: var(--text-3); }
+/* ── Inline failure detail — ONE block hanging off the failed test row ────────
+      A single severity-coloured left rail + hairline dividers tie the error,
+      retry history, and root cause together as the failed test's detail (not
+      three separate boxes). Lives here so every template's breakdown can use it. */
+.failure-row > td { padding: 0; border: none; background: transparent; }
+.failure-detail {
+  border-left: 3px solid var(--fail);
+  margin: 2px 10px 10px 12px;     /* slight indent under the test row + gap before next row */
+  padding: 11px 0 11px 16px;
+  page-break-inside: avoid;
+}
+.failure-detail--critical { border-left-color: var(--fail); }
+.failure-detail--high     { border-left-color: #A35E1E; }
+.failure-detail--medium   { border-left-color: var(--timeout); }
+.failure-detail--low      { border-left-color: var(--text-3); }
+
+/* error — flat on the rail, no inner box (override the base pre panel) */
+.failure-detail pre {
+  margin: 0; padding: 0;
+  background: transparent; border: none; border-radius: 0; max-height: none;
+}
+.failure-detail .failure-item__message {
+  background: transparent; border: none; border-radius: 0; padding: 0; margin: 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px; color: #8A2E1E; word-break: break-word; line-height: 1.6;
+}
+
+/* retry history — divider above, same block */
+.retry-history {
+  font-size: 9px; color: var(--text-3); margin-top: 11px;
+  padding-top: 10px; border-top: 1px solid var(--border);
+  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  letter-spacing: 0.5px; text-transform: uppercase;
+}
+.retry-attempt {
+  display: inline-block; padding: 2px 7px;
+  border-radius: 3px; margin-right: 4px;
+  font-size: 8.5px; font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+.retry-attempt--failed { background: var(--fail-dim); color: var(--fail); border: 1px solid #E5C9BD; }
+.retry-attempt--passed { background: var(--pass-dim); color: var(--pass); border: 1px solid #C5DBC9; }
+
+/* Slow-test badge — a compact tag inline beside the status badge (min-width:0
+   overrides the .badge 50px floor so it doesn't wrap onto its own line). */
+.badge--slow {
+  background: var(--timeout-dim); color: var(--timeout);
+  border: 1px solid #E5D2A8;
+  min-width: 0; margin-left: 5px;
+  padding: 1px 5px; font-size: 7.5px; letter-spacing: 0.4px;
+}
+
+/* Root cause — footer of the same failure block: a divider above, no box and no
+   second rail (the block already carries one). */
+.root-cause-chip {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
+  margin-top: 11px; padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px;
+}
+.root-cause-chip__tag {
+  font-size: 8px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
+  color: var(--text-3);
+}
+.root-cause-chip__label { font-weight: 700; color: var(--text-1); }
+.root-cause-chip__msg {
+  font-family: 'JetBrains Mono', monospace; color: var(--text-2);
+  word-break: break-word;
+}
+.root-cause-chip__strength {
+  margin-left: auto; font-size: 8.5px; font-weight: 600;
+  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3);
+}
+/* Subtle category cue — tint only the category name (no box, no second rail), so
+   the chip stays "quiet" but failures are still scannable by root-cause type. */
+.root-cause-chip--assertion .root-cause-chip__label,
+.root-cause-chip--locator-not-found .root-cause-chip__label { color: oklch(52% 0.19 25); }
+.root-cause-chip--timeout .root-cause-chip__label           { color: oklch(50% 0.13 65); }
+.root-cause-chip--network .root-cause-chip__label,
+.root-cause-chip--navigation .root-cause-chip__label        { color: oklch(50% 0.15 260); }
+.root-cause-chip--flaky-by-retry .root-cause-chip__label    { color: oklch(50% 0.15 290); }
+.root-cause-chip--env-config .root-cause-chip__label        { color: oklch(48% 0.14 145); }
+.root-cause-chip--unknown .root-cause-chip__label           { color: var(--text-2); }
 
 /* ── History trend card — shared by detailed + executive (charts.hbs) ─────── */
 .trend-card {
@@ -656,23 +734,6 @@ code {
   font-size: 9.5px; color: var(--text-1);
 }
 
-/* ── Failure Analysis — shared so any template can toggle the section on ────── */
-/* NOTE: .analysis-oneliner lives in base.css above — the executive template renders it too. */
-.failure-analysis { margin-top: 24px; }
-.failure-analysis .oneliner { font-weight: 600; }
-.analysis-truncated { font-size: 0.85em; opacity: 0.8; }
-
-.cluster { border-left: 3px solid; padding-left: 12px; margin-bottom: 16px; }
-.cluster-header { display: flex; gap: 12px; align-items: baseline; }
-.cluster-strength--strong   { color: oklch(55% 0.15 145); }
-.cluster-strength--moderate { color: oklch(60% 0.18 65);  }
-.cluster-strength--weak     { color: oklch(55% 0.20 25);  }
-.cluster--timeout           { border-color: oklch(60% 0.18 65);  }
-.cluster--assertion         { border-color: oklch(55% 0.20 25);  }
-.cluster--locator-not-found { border-color: oklch(55% 0.20 25);  }
-.cluster--network           { border-color: oklch(55% 0.15 260); }
-.cluster--navigation        { border-color: oklch(55% 0.15 260); }
-.cluster--flaky-by-retry    { border-color: oklch(55% 0.15 290); }
-.cluster--env-config        { border-color: oklch(55% 0.15 145); }
-.cluster--unknown           { border-color: oklch(60% 0.00 0);   }
-.confidence-warning { font-size: 0.8em; opacity: 0.75; }
+/* The aggregate failure-analysis cluster section was retired — root causes now
+   render as inline per-test chips in the suite breakdown (.root-cause-chip above).
+   The .analysis-oneliner one-liner lives further up and is still used by executive. */

package/dist/templates/styles/detailed.css

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

package/dist/templates/styles/executive.css

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

package/dist/templates/styles/minimal.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportforge/playwright-pdf",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Enterprise-ready PDF reports for Playwright Test — minimal, detailed, and executive templates with CI/CD integrations",
   "license": "MIT",
   "author": "ReportForge",
@@ -34,8 +34,7 @@
     }
   },
   "bin": {
-    "reportforge-demo": "./dist/demo/cli.js",
-    "reportforge-export-feedback": "./dist/cli/export-feedback.js"
+    "playwright-pdf": "./dist/cli/index.js"
   },
   "publishConfig": {
     "access": "public"

package/dist/cli/export-feedback.js

@@ -1,87 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/cli/export-feedback.ts
-var export_feedback_exports = {};
-__export(export_feedback_exports, {
-  exportFeedback: () => exportFeedback
-});
-module.exports = __toCommonJS(export_feedback_exports);
-var import_node_fs = __toESM(require("fs"));
-var import_node_os = __toESM(require("os"));
-var import_node_path = __toESM(require("path"));
-
-// src/analysis/feedback-csv.ts
-var FEEDBACK_HEADER = "category,margin,text";
-function parseFeedbackRows(content) {
-  return content.trim().split("\n").slice(1).filter(Boolean).map((line) => {
-    const parts = line.split(",");
-    return { category: parts[0], margin: parts[1], text: parts.slice(2).join(","), raw: line };
-  });
-}
-
-// src/cli/export-feedback.ts
-function exportFeedback(deps = {}) {
-  const home = deps.home ?? import_node_os.default.homedir();
-  const cwd = deps.cwd ?? process.cwd();
-  const root = import_node_path.default.join(home, ".reportforge");
-  const rows = [];
-  if (import_node_fs.default.existsSync(root)) {
-    for (const entry of import_node_fs.default.readdirSync(root)) {
-      const file = import_node_path.default.join(root, entry, "unclassified.csv");
-      if (!import_node_fs.default.existsSync(file)) continue;
-      for (const r of parseFeedbackRows(import_node_fs.default.readFileSync(file, "utf8"))) {
-        rows.push(r.raw);
-      }
-    }
-  }
-  if (rows.length === 0) return { rowCount: 0, outFile: null };
-  const outFile = import_node_path.default.join(cwd, "reportforge-feedback.csv");
-  import_node_fs.default.writeFileSync(outFile, `${FEEDBACK_HEADER}
-${rows.join("\n")}
-`, "utf8");
-  return { rowCount: rows.length, outFile };
-}
-if (process.argv[1] && process.argv[1].endsWith("export-feedback.js")) {
-  const res = exportFeedback();
-  if (res.rowCount === 0) {
-    process.stdout.write("No locally collected failures found (~/.reportforge/*/unclassified.csv).\n");
-  } else {
-    process.stdout.write(
-      `Saved ${res.rowCount} row(s) to ${res.outFile} - tokenized + redacted, LOCAL only.
-Review it before sharing; there is no upload.
-`
-    );
-  }
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  exportFeedback
-});

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

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

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

@@ -1,62 +0,0 @@
-{{#if failures.length}}
-<div class="section">
-  <h2>Failures ({{failures.length}}{{#if overflowFailureCount}} shown · {{overflowFailureCount}} more in sidecar{{/if}})</h2>
-  {{#if overflowFailureCount}}
-  <div class="overflow-banner">
-    Showing the first {{failures.length}} failures. {{overflowFailureCount}} additional
-    failure{{#if (gt overflowFailureCount 1)}}s are{{else}} is{{/if}} available in
-    <code>{{overflowSidecarName}}</code> alongside this report.
-  </div>
-  {{/if}}
-  {{#each failures}}
-  <div class="failure-item failure-item--{{severity}} no-break">
-    {{#if ../options.showFullFailures}}
-
-    <div class="failure-item__header">
-      <div>
-        <div class="failure-item__title">{{testTitle}}</div>
-        <div class="failure-item__path">{{join suitePath " › "}}</div>
-      </div>
-      <span class="badge badge--failed severity--{{severity}}" style="white-space:nowrap;">
-        {{upperCase severity}}
-      </span>
-    </div>
-
-    {{!-- Playwright's error.stack already begins with the message, so rendering
-          both duplicates it. Show the formatted stack when available; otherwise
-          fall back to the bare message. --}}
-    {{#if (and error.stack ../options.showStackTraces)}}
-      <pre>{{error.stack}}</pre>
-    {{else}}
-      <div class="failure-item__message">{{error.message}}</div>
-    {{/if}}
-
-    {{#if screenshotBase64}}
-      <img class="screenshot" src="{{screenshotBase64}}" alt="Screenshot at failure">
-    {{/if}}
-
-    {{#if retryHistory.length}}
-    <div class="retry-history">
-      Retry history:&nbsp;
-      {{#each retryHistory}}
-        <span class="retry-attempt retry-attempt--{{status}}">
-          #{{addOne attempt}} {{status}} · {{formatDuration duration}}
-        </span>
-      {{/each}}
-    </div>
-    {{/if}}
-
-    {{else}}
-    {{!-- Executive: title + suite only --}}
-    <div class="failure-summary-item">
-      <div>
-        <div class="failure-summary-item__title">{{testTitle}}</div>
-        <div class="failure-summary-item__suite">{{join suitePath " › "}}</div>
-      </div>
-      <span class="badge badge--failed">FAILED</span>
-    </div>
-    {{/if}}
-  </div>
-  {{/each}}
-</div>
-{{/if}}

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

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