@reportforge/playwright-pdf 0.11.2 → 0.12.0

package/README.md

@@ -59,7 +59,7 @@ Three templates, one reporter. Every PDF is fully offline — fonts, charts, and
 - **Flakiness trend** — top-N flakiest tests table with per-test dot sparkline across stored history runs in the `detailed` template; `flakinessTopN` option (default 5, `0` disables)
 - **Offline failure analysis** — sorts each failure into one of 7 root-cause buckets and renders a per-test root-cause chip inline under the failed test in the `detailed` PDF (dominant-cause one-liner in `executive`). No network, no AI service — a small embedded classifier that updates itself safely over your existing license refresh; pin it any time. Full details at [reportforge.org/docs/advanced/failure-analysis](https://reportforge.org/docs/advanced/failure-analysis).
 - `npx @reportforge/playwright-pdf export-feedback` — exports locally-collected unrecognized failures (tokenized, local-only) for optional manual sharing.
-- **Rich execution capture** — opt-in repro steps, 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` / `console` / `evidence`); off by default.
+- **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 action 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`.
 - **Hybrid licensing** — one short key unlocks it; reports keep rendering offline via a cached JWT between refreshes
 
@@ -196,7 +196,7 @@ All options are the second element of the reporter tuple.
 | `shardResults` | `string \| string[]` | — | Glob or path array of Playwright JSON shard report files to merge into one PDF. See the Shard Merging docs. |
 | `notify` | `object` | — | Notification channels: `slack`, `teams`, `discord` (each `{ url, enabled, on }`), `email` (`{ to, enabled, on, attachPdf }`). See the Notifications docs. |
 | `failureAnalysis` | `object` | `{ enabled: true }` | Offline failure root-cause analysis (embedded Naive Bayes; no runtime network). Fields: `enabled` (default `true`), `maxClusters` (default `10`), `minStrength` (`weak`\|`moderate`\|`strong`, default `weak`), `maxFailuresToAnalyse` (default `500`), `collectUnclassified` (default `true`), `autoUpdateModel` (default `true`). See the Failure Analysis docs. |
-| `capture` | `object` | `{}` (off) | Opt-in rich execution capture for the defect log (reporter-side; no fixtures, no test-code changes). Fields: `steps` (compacted repro-steps trail from the Playwright step tree, default `false`), `apiSteps` (include granular `pw:api` click/fill/goto actions in the trail; off by default the trail shows only `test.step` intent + `expect` assertions + the failing action, default `false`), `console` (Node stdout/stderr tail, default `false`), `evidence` (trace/video file links, default `false`), `maxSteps` (default `50`), `maxConsoleLines` (default `50`). Renders in the Defect Log section of the `detailed` template. |
+| `capture` | `object` | `{}` (off) | Opt-in rich execution capture for the defect log (reporter-side; no fixtures, no test-code changes). Fields: `steps` (a copy-pasteable "Steps to Reproduce" outline built from the Playwright step tree — each row a Markdown list line indented under its parent `test.step`, default `false`), `apiSteps` (include every top-level `pw:api` action (click/fill/check/goto) in the outline for a full action trail; off by default the outline shows only `test.step` intent + `expect` assertions, default `false`), `console` (Node stdout/stderr tail, default `false`), `evidence` (trace/video file links, default `false`), `maxSteps` (default `50`), `maxConsoleLines` (default `50`). Renders in the Defect Log section of the `detailed` template. |
 | `live` | `object` | `{}` (off) | Opt-in live test-execution streaming. When `enabled`, the reporter prints an unguessable watch link to the CI logs at run start and streams per-test progress to the hosted dashboard while tests run — all shards of one CI run converge on a single live view. Fields: `enabled` (default `false`), `runId` (override the auto-derived run id), `serverUrl` (override the streaming server), `steps` (`none`\|`failed`\|`intent`\|`all`, default `failed`; `intent` shows only your `test.step` names plus any failing step), `console` (stream stdout/stderr tails, default `false`), `flushMs` (batch debounce 500–10000, default `2000`). The PDF at the end of the run is unaffected. Requires an active subscription with the `live` entitlement. See the Live Runs docs. |
 | `historyFile` | `string` | `~/.reportforge/{key}/history.json` | Path to the history JSON file. Relative paths resolve from `cwd`. Enables pass-rate trending charts in the `detailed` template. |
 | `historySize` | `number` | `10` | Maximum number of test runs to keep in the history file (integer ≥ 2). Older runs are pruned on append. |

package/dist/cli/index.js

@@ -139,7 +139,37 @@ function buildDemoFailures() {
         { attempt: 2, status: "failed", duration: 4900 }
       ],
       durationMs: 4900,
-      severity: "critical"
+      severity: "critical",
+      // A test with no test.step → a flat repro outline (every step depth 0).
+      execution: {
+        source: "reporter",
+        steps: [
+          { title: "Navigate to '/login'", category: "pw:api", durationMs: 420, depth: 0, failed: false },
+          { title: "Fill getByLabel('Email')", category: "pw:api", durationMs: 60, depth: 0, failed: false },
+          { title: "Fill getByLabel('Password')", category: "pw:api", durationMs: 55, depth: 0, failed: false },
+          { title: "Click getByRole('button', { name: 'Sign in' }) \u2014 repeated 5\xD7", category: "pw:api", durationMs: 2100, depth: 0, failed: false },
+          {
+            title: "Expect response status toBe 429",
+            category: "expect",
+            durationMs: 80,
+            depth: 0,
+            failed: true,
+            failingLeaf: true,
+            errorMessage: "expect(received).toBe(expected) \u2014 Expected: 429  Received: 200",
+            location: "tests/auth.spec.ts:79"
+          }
+        ],
+        failingStep: {
+          title: "Expect response status toBe 429",
+          category: "expect",
+          durationMs: 80,
+          depth: 0,
+          failed: true,
+          failingLeaf: true,
+          errorMessage: "expect(received).toBe(expected) \u2014 Expected: 429  Received: 200",
+          location: "tests/auth.spec.ts:79"
+        }
+      }
     },
     {
       testId: "co-3",
@@ -155,7 +185,38 @@ function buildDemoFailures() {
         { attempt: 2, status: "failed", duration: 4900 }
       ],
       durationMs: 4900,
-      severity: "high"
+      severity: "high",
+      // Nested outline — child actions/assertions indent under their parent test.step.
+      execution: {
+        source: "reporter",
+        steps: [
+          { title: "Add product to cart", category: "test.step", durationMs: 1200, depth: 0, failed: false },
+          { title: "Click getByRole('button', { name: 'Add to cart' })", category: "pw:api", durationMs: 340, depth: 1, failed: false },
+          { title: "Apply expired promo code", category: "test.step", durationMs: 5600, depth: 0, failed: false },
+          { title: "Fill getByLabel('Promo code')", category: "pw:api", durationMs: 120, depth: 1, failed: false },
+          { title: "Click getByRole('button', { name: 'Apply' })", category: "pw:api", durationMs: 90, depth: 1, failed: false },
+          {
+            title: "Expect getByText('Promo code is invalid') to be visible",
+            category: "expect",
+            durationMs: 5001,
+            depth: 1,
+            failed: true,
+            failingLeaf: true,
+            errorMessage: "Timed out 5000ms waiting for expect(locator).toBeVisible()",
+            location: "tests/checkout.spec.ts:58"
+          }
+        ],
+        failingStep: {
+          title: "Expect getByText('Promo code is invalid') to be visible",
+          category: "expect",
+          durationMs: 5001,
+          depth: 1,
+          failed: true,
+          failingLeaf: true,
+          errorMessage: "Timed out 5000ms waiting for expect(locator).toBeVisible()",
+          location: "tests/checkout.spec.ts:58"
+        }
+      }
     },
     {
       testId: "cat-7",
@@ -171,7 +232,35 @@ function buildDemoFailures() {
         { attempt: 2, status: "failed", duration: 3900 }
       ],
       durationMs: 3900,
-      severity: "medium"
+      severity: "medium",
+      execution: {
+        source: "reporter",
+        steps: [
+          { title: "Scroll to lazy-loaded section", category: "test.step", durationMs: 900, depth: 0, failed: false },
+          { title: "Mouse wheel by (0, 2000)", category: "pw:api", durationMs: 300, depth: 1, failed: false },
+          { title: "Verify lazy image renders", category: "test.step", durationMs: 5e3, depth: 0, failed: false },
+          {
+            title: "Expect getByTestId('lazy-img-12') to be visible",
+            category: "expect",
+            durationMs: 5e3,
+            depth: 1,
+            failed: true,
+            failingLeaf: true,
+            errorMessage: "expect(locator).toBeVisible() \u2014 Expected: visible  Received: hidden",
+            location: "tests/catalog.spec.ts:112"
+          }
+        ],
+        failingStep: {
+          title: "Expect getByTestId('lazy-img-12') to be visible",
+          category: "expect",
+          durationMs: 5e3,
+          depth: 1,
+          failed: true,
+          failingLeaf: true,
+          errorMessage: "expect(locator).toBeVisible() \u2014 Expected: visible  Received: hidden",
+          location: "tests/catalog.spec.ts:112"
+        }
+      }
     }
   ];
 }
@@ -6670,6 +6759,7 @@ var init_engine = __esm({
       }
       registerHelpers() {
         this.handlebars.registerHelper("formatDuration", (ms) => formatDuration(ms ?? 0));
+        this.handlebars.registerHelper("repeat", (s, n) => typeof s === "string" ? s.repeat(Math.max(0, n | 0)) : "");
         this.handlebars.registerHelper("formatDate", (d) => {
           const date = d instanceof Date ? d : new Date(d);
           return date.toLocaleString("en-US", {

package/dist/index.d.mts

@@ -223,9 +223,10 @@ interface ReporterOptions {
         /** Capture a compacted repro-steps trail from the Playwright step tree. Default: false */
         steps?: boolean;
         /**
-         * Include granular `pw:api` actions (click/fill/goto) in the repro trail. Off by
-         * default — the trail shows only `test.step` intent + `expect` assertions + the
-         * failing action. Default: false
+         * Include every top-level `pw:api` action (click/fill/check/goto) in the repro
+         * outline — a full, copy-pasteable action trail across the whole test, nested under
+         * its parent `test.step`. Off by default, so the outline shows only `test.step`
+         * intent + `expect` assertions. Default: false
          */
         apiSteps?: boolean;
         /** Capture the tail of the test's Node stdout/stderr. Default: false */

package/dist/index.d.ts

@@ -223,9 +223,10 @@ interface ReporterOptions {
         /** Capture a compacted repro-steps trail from the Playwright step tree. Default: false */
         steps?: boolean;
         /**
-         * Include granular `pw:api` actions (click/fill/goto) in the repro trail. Off by
-         * default — the trail shows only `test.step` intent + `expect` assertions + the
-         * failing action. Default: false
+         * Include every top-level `pw:api` action (click/fill/check/goto) in the repro
+         * outline — a full, copy-pasteable action trail across the whole test, nested under
+         * its parent `test.step`. Off by default, so the outline shows only `test.step`
+         * intent + `expect` assertions. Default: false
          */
         apiSteps?: boolean;
         /** Capture the tail of the test's Node stdout/stderr. Default: false */

package/dist/index.js

@@ -11435,9 +11435,13 @@ init_cjs_shims();
 var MAX_TITLE_CHARS = 200;
 var DEFAULT_MAX_STEPS = 50;
 var DEFAULT_MAX_CONSOLE_LINES = 50;
-var PW_API_WINDOW = 10;
 var isTeardown = (category) => category === "hook" || category === "fixture";
 var inHookSubtree = (flat, f) => isTeardown(f.category) || f.ancestors.some((a) => isTeardown(flat[a].category));
+var isTopLevel = (flat, f) => !f.ancestors.some((a) => {
+  const c = flat[a].category;
+  return c === "pw:api" || c === "expect";
+});
+var testStepDepth = (flat, f) => f.ancestors.reduce((n, a) => n + (flat[a].category === "test.step" ? 1 : 0), 0);
 function flatten(steps) {
   const out = [];
   const walk = (nodes, depth, ancestors) => {
@@ -11456,15 +11460,19 @@ function flatten(steps) {
   walk(steps ?? [], 0, []);
   return out;
 }
-function materialize(n, isFailing) {
+function materialize(n, isFailing, depth) {
   const loc = n.raw.location;
+  const firstLine = isFailing && n.raw.error?.message ? stripAnsi(n.raw.error.message).split("\n").map((s) => s.trim()).find((s) => s.length) ?? "" : "";
   return {
     title: clampWithEllipsis(n.raw.title ?? "", MAX_TITLE_CHARS),
     category: n.category,
     durationMs: Math.max(0, Math.round(n.raw.duration ?? 0)),
-    depth: n.depth,
+    depth,
     failed: n.hasError,
-    errorMessage: isFailing && n.raw.error?.message ? clampWithEllipsis(stripAnsi(n.raw.error.message).split("\n")[0], MAX_TITLE_CHARS) : void 0,
+    // Marks the single failing leaf so the template renders the error there once —
+    // independent of whether a step-level message survives (falls back to the record error).
+    failingLeaf: isFailing || void 0,
+    errorMessage: firstLine ? clampWithEllipsis(firstLine, MAX_TITLE_CHARS) : void 0,
     location: loc?.file != null ? `${loc.file}:${loc.line ?? 0}` : void 0
   };
 }
@@ -11488,21 +11496,19 @@ function compactSteps(rawSteps, opts = {}) {
   const failingIdx = pickFailingIdx(flat);
   const keep = /* @__PURE__ */ new Set();
   flat.forEach((f, i) => {
-    if (f.category === "test.step" || f.category === "expect") keep.add(i);
+    if (inHookSubtree(flat, f)) return;
+    if (f.category === "test.step") keep.add(i);
+    else if (f.category === "expect" && isTopLevel(flat, f)) keep.add(i);
+    else if (opts.apiSteps && f.category === "pw:api" && isTopLevel(flat, f)) keep.add(i);
   });
   if (failingIdx >= 0) {
     keep.add(failingIdx);
     for (const a of flat[failingIdx].ancestors) keep.add(a);
-    if (opts.apiSteps) {
-      const pwApiBefore = [];
-      for (let i = 0; i < failingIdx; i++) {
-        if (flat[i].category === "pw:api" && !inHookSubtree(flat, flat[i])) pwApiBefore.push(i);
-      }
-      for (const i of pwApiBefore.slice(-PW_API_WINDOW)) keep.add(i);
-    }
   }
   let keepArr = [...keep].sort((a, b) => a - b);
+  let omitted = 0;
   if (keepArr.length > maxSteps) {
+    omitted = keepArr.length - maxSteps;
     keepArr = keepArr.slice(-maxSteps);
     if (failingIdx >= 0 && !keepArr.includes(failingIdx)) {
       keepArr = [failingIdx, ...keepArr.slice(1)];
@@ -11512,13 +11518,23 @@ function compactSteps(rawSteps, opts = {}) {
   const mat = (i) => {
     let es = cache.get(i);
     if (!es) {
-      es = materialize(flat[i], i === failingIdx);
+      es = materialize(flat[i], i === failingIdx, testStepDepth(flat, flat[i]));
       cache.set(i, es);
     }
     return es;
   };
+  const steps = keepArr.map(mat);
+  if (omitted > 0) {
+    steps.unshift({
+      title: `\u2026 ${omitted} earlier step${omitted === 1 ? "" : "s"} omitted`,
+      category: "",
+      durationMs: 0,
+      depth: 0,
+      failed: false
+    });
+  }
   return {
-    steps: keepArr.map(mat),
+    steps,
     failingStep: failingIdx >= 0 ? mat(failingIdx) : void 0
   };
 }
@@ -12500,6 +12516,7 @@ var TemplateEngine = class {
   }
   registerHelpers() {
     this.handlebars.registerHelper("formatDuration", (ms) => formatDuration(ms ?? 0));
+    this.handlebars.registerHelper("repeat", (s, n) => typeof s === "string" ? s.repeat(Math.max(0, n | 0)) : "");
     this.handlebars.registerHelper("formatDate", (d) => {
       const date = d instanceof Date ? d : new Date(d);
       return date.toLocaleString("en-US", {
@@ -13887,7 +13904,7 @@ function mapCurrentStep(testId, step, shardKey) {
     currentStep: clampWithEllipsis(step.title ?? "", MAX_STEP_TITLE_CHARS)
   };
 }
-function testStepDepth(step) {
+function testStepDepth2(step) {
   let depth = 0;
   for (let p = step.parent; p; p = p.parent) {
     if (p.category === "test.step") depth++;
@@ -13907,7 +13924,7 @@ function mapStep(testId, step, phase, shardKey) {
     startedAt: step.startTime?.getTime(),
     // Nesting depth (test.step ancestors) so the page indents children under their
     // parent step. 0 → flat, so a test without test.steps renders as a flat trail.
-    depth: testStepDepth(step)
+    depth: testStepDepth2(step)
   };
 }
 function mapConsole(kind, chunk, testId, shardKey) {
@@ -13934,7 +13951,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.11.2" : "0.x";
+    const version = true ? "0.12.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/index.mjs

@@ -11436,9 +11436,13 @@ init_esm_shims();
 var MAX_TITLE_CHARS = 200;
 var DEFAULT_MAX_STEPS = 50;
 var DEFAULT_MAX_CONSOLE_LINES = 50;
-var PW_API_WINDOW = 10;
 var isTeardown = (category) => category === "hook" || category === "fixture";
 var inHookSubtree = (flat, f) => isTeardown(f.category) || f.ancestors.some((a) => isTeardown(flat[a].category));
+var isTopLevel = (flat, f) => !f.ancestors.some((a) => {
+  const c = flat[a].category;
+  return c === "pw:api" || c === "expect";
+});
+var testStepDepth = (flat, f) => f.ancestors.reduce((n, a) => n + (flat[a].category === "test.step" ? 1 : 0), 0);
 function flatten(steps) {
   const out = [];
   const walk = (nodes, depth, ancestors) => {
@@ -11457,15 +11461,19 @@ function flatten(steps) {
   walk(steps ?? [], 0, []);
   return out;
 }
-function materialize(n, isFailing) {
+function materialize(n, isFailing, depth) {
   const loc = n.raw.location;
+  const firstLine = isFailing && n.raw.error?.message ? stripAnsi(n.raw.error.message).split("\n").map((s) => s.trim()).find((s) => s.length) ?? "" : "";
   return {
     title: clampWithEllipsis(n.raw.title ?? "", MAX_TITLE_CHARS),
     category: n.category,
     durationMs: Math.max(0, Math.round(n.raw.duration ?? 0)),
-    depth: n.depth,
+    depth,
     failed: n.hasError,
-    errorMessage: isFailing && n.raw.error?.message ? clampWithEllipsis(stripAnsi(n.raw.error.message).split("\n")[0], MAX_TITLE_CHARS) : void 0,
+    // Marks the single failing leaf so the template renders the error there once —
+    // independent of whether a step-level message survives (falls back to the record error).
+    failingLeaf: isFailing || void 0,
+    errorMessage: firstLine ? clampWithEllipsis(firstLine, MAX_TITLE_CHARS) : void 0,
     location: loc?.file != null ? `${loc.file}:${loc.line ?? 0}` : void 0
   };
 }
@@ -11489,21 +11497,19 @@ function compactSteps(rawSteps, opts = {}) {
   const failingIdx = pickFailingIdx(flat);
   const keep = /* @__PURE__ */ new Set();
   flat.forEach((f, i) => {
-    if (f.category === "test.step" || f.category === "expect") keep.add(i);
+    if (inHookSubtree(flat, f)) return;
+    if (f.category === "test.step") keep.add(i);
+    else if (f.category === "expect" && isTopLevel(flat, f)) keep.add(i);
+    else if (opts.apiSteps && f.category === "pw:api" && isTopLevel(flat, f)) keep.add(i);
   });
   if (failingIdx >= 0) {
     keep.add(failingIdx);
     for (const a of flat[failingIdx].ancestors) keep.add(a);
-    if (opts.apiSteps) {
-      const pwApiBefore = [];
-      for (let i = 0; i < failingIdx; i++) {
-        if (flat[i].category === "pw:api" && !inHookSubtree(flat, flat[i])) pwApiBefore.push(i);
-      }
-      for (const i of pwApiBefore.slice(-PW_API_WINDOW)) keep.add(i);
-    }
   }
   let keepArr = [...keep].sort((a, b) => a - b);
+  let omitted = 0;
   if (keepArr.length > maxSteps) {
+    omitted = keepArr.length - maxSteps;
     keepArr = keepArr.slice(-maxSteps);
     if (failingIdx >= 0 && !keepArr.includes(failingIdx)) {
       keepArr = [failingIdx, ...keepArr.slice(1)];
@@ -11513,13 +11519,23 @@ function compactSteps(rawSteps, opts = {}) {
   const mat = (i) => {
     let es = cache.get(i);
     if (!es) {
-      es = materialize(flat[i], i === failingIdx);
+      es = materialize(flat[i], i === failingIdx, testStepDepth(flat, flat[i]));
       cache.set(i, es);
     }
     return es;
   };
+  const steps = keepArr.map(mat);
+  if (omitted > 0) {
+    steps.unshift({
+      title: `\u2026 ${omitted} earlier step${omitted === 1 ? "" : "s"} omitted`,
+      category: "",
+      durationMs: 0,
+      depth: 0,
+      failed: false
+    });
+  }
   return {
-    steps: keepArr.map(mat),
+    steps,
     failingStep: failingIdx >= 0 ? mat(failingIdx) : void 0
   };
 }
@@ -12501,6 +12517,7 @@ var TemplateEngine = class {
   }
   registerHelpers() {
     this.handlebars.registerHelper("formatDuration", (ms) => formatDuration(ms ?? 0));
+    this.handlebars.registerHelper("repeat", (s, n) => typeof s === "string" ? s.repeat(Math.max(0, n | 0)) : "");
     this.handlebars.registerHelper("formatDate", (d) => {
       const date = d instanceof Date ? d : new Date(d);
       return date.toLocaleString("en-US", {
@@ -13888,7 +13905,7 @@ function mapCurrentStep(testId, step, shardKey) {
     currentStep: clampWithEllipsis(step.title ?? "", MAX_STEP_TITLE_CHARS)
   };
 }
-function testStepDepth(step) {
+function testStepDepth2(step) {
   let depth = 0;
   for (let p = step.parent; p; p = p.parent) {
     if (p.category === "test.step") depth++;
@@ -13908,7 +13925,7 @@ function mapStep(testId, step, phase, shardKey) {
     startedAt: step.startTime?.getTime(),
     // Nesting depth (test.step ancestors) so the page indents children under their
     // parent step. 0 → flat, so a test without test.steps renders as a flat trail.
-    depth: testStepDepth(step)
+    depth: testStepDepth2(step)
   };
 }
 function mapConsole(kind, chunk, testId, shardKey) {
@@ -13935,7 +13952,7 @@ var PdfReporter = class {
     this.liveConsole = false;
     this.options = parseOptions(rawOptions);
     this.dataCollector = new DataCollector(this.options.capture);
-    const version = true ? "0.11.2" : "0.x";
+    const version = true ? "0.12.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/partials/defect-log.hbs

@@ -36,17 +36,19 @@
             {{#if execution.steps.length}}
             <div class="repro">
               <div class="repro__tag">Steps to Reproduce</div>
-              <ol class="repro-steps">
+              {{! Each row is a real Markdown list line — `'  '×depth + '- ' + title` rendered
+                  pre-wrap — so the outline both displays indented and survives a copy-paste
+                  into a bug tracker as a nested list. }}
+              <div class="repro-steps">
                 {{#each execution.steps}}
-                <li class="repro-step{{#if failed}} repro-step--failed{{/if}}" style="--d:{{depth}};">
-                  <span class="repro-step__cat">{{category}}</span>
-                  <span class="repro-step__title">{{title}}</span>
-                  {{#if failed}}{{#if location}}<span class="repro-step__loc">{{location}}</span>{{/if}}{{/if}}
-                  <span class="repro-step__dur">{{formatDuration durationMs}}</span>
-                  {{#if errorMessage}}<div class="repro-step__error">{{../error.message}}</div>{{/if}}
-                </li>
+                <div class="repro-step{{#if failed}} repro-step--failed{{/if}}">
+                  <span class="repro-step__line">{{repeat "  " depth}}- {{title}}{{#if failed}} [FAILED]{{#if location}}  ({{location}}){{/if}}{{/if}}</span>
+                  {{! Error renders once, at the failing leaf: the step's own message, else the
+                      authoritative record error so an empty step message never hides it. }}
+                  {{#if failingLeaf}}<div class="repro-step__error">{{#if errorMessage}}{{errorMessage}}{{else}}{{../error.message}}{{/if}}</div>{{/if}}
+                </div>
                 {{/each}}
-              </ol>
+              </div>
             </div>
             {{/if}}
 

package/dist/templates/styles/base.css

@@ -436,32 +436,24 @@ code {
   font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--text-3); margin-left: 6px;
 }
 .repro { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); }
-.repro-steps { list-style: none; margin: 6px 0 0; padding: 0; }
-.repro-step {
-  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
-  /* indent by tree depth (capped) — the value comes from `--d` on the element */
-  padding: 2px 0 2px min(60px, calc(var(--d, 0) * 12px));
-  font-size: 9px; line-height: 1.5;
-  page-break-inside: avoid; break-inside: avoid;
+.repro-steps { margin: 6px 0 0; padding: 0; }
+.repro-step { page-break-inside: avoid; break-inside: avoid; }
+/* One monospace, pre-wrap line per step. The leading `'  '×depth + '- '` (real
+   characters, not CSS padding) renders the outline indentation AND survives a PDF
+   text-copy — pasting yields a valid nested Markdown list. */
+.repro-step__line {
+  display: block;
+  font-family: 'JetBrains Mono', monospace; font-size: 9px; line-height: 1.55;
+  color: var(--text-2); white-space: pre-wrap; word-break: break-word;
 }
-/* The error sits at the failing step — full width below its row, indented past the
-   category column so it reads as belonging to that step. */
+.repro-step--failed .repro-step__line { color: #8A2E1E; font-weight: 700; }
+/* The error sits at the failing step — below its line, slightly indented so it reads
+   as belonging to that step. */
 .repro-step__error {
-  flex-basis: 100%; margin: 3px 0 2px; padding-left: 60px;
+  margin: 2px 0 3px; padding-left: 18px;
   font-family: 'JetBrains Mono', monospace; font-size: 9px; line-height: 1.55;
   color: #8A2E1E; white-space: pre-wrap; word-break: break-word;
 }
-.repro-step__cat {
-  flex: none; min-width: 52px;
-  font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text-3);
-}
-.repro-step__title { flex: 1; color: var(--text-2); word-break: break-word; }
-.repro-step__loc {
-  flex: none; font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--text-3);
-}
-.repro-step__dur { flex: none; color: var(--text-3); font-size: 8.5px; }
-.repro-step--failed .repro-step__title { color: #8A2E1E; font-weight: 700; }
-.repro-step--failed .repro-step__cat { color: var(--fail); }
 .console-tail { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); }
 .console-tail__line {
   font-family: 'JetBrains Mono', monospace; font-size: 8.5px; line-height: 1.55;

package/package.json

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