@reportforge/playwright-pdf 0.23.0 → 0.25.0

package/dist/index.mjs

@@ -14231,11 +14231,35 @@ var NETWORK_TIMEOUT_MS3 = 8e3;
 var LIVE_DRAIN_DEADLINE_MS = 1e4;
 var MAX_FLUSH_MS = 3e4;
 var WARN_THROTTLE_MS = 3e4;
+var TREE_UPDATE_WEIGHT = 25;
+function redactTestUpdate(update, redact) {
+  if (update.title !== void 0) update.title = redact(update.title);
+  if (update.currentStep !== void 0) update.currentStep = redact(update.currentStep);
+  if (update.file !== void 0) update.file = redact(update.file);
+  if (update.suitePath) update.suitePath = update.suitePath.map(redact);
+  if (update.projectName !== void 0) update.projectName = redact(update.projectName);
+  if (update.steps) redactStepNodes(update.steps, redact);
+  if (update.errors) update.errors.forEach((e) => redactError(e, redact));
+}
+function redactStepNodes(nodes, redact) {
+  for (const node of nodes) {
+    node.t = redact(node.t);
+    if (node.err) redactError(node.err, redact);
+    if (node.ch) redactStepNodes(node.ch, redact);
+  }
+}
+function redactError(err, redact) {
+  err.message = redact(err.message);
+  if (err.stack !== void 0) err.stack = redact(err.stack);
+  if (err.snippet !== void 0) err.snippet = redact(err.snippet);
+}
 var LiveStreamer = class {
   constructor(config) {
     this.config = config;
     this.testBuffer = [];
     this.eventBuffer = [];
+    /** Weighted size of the buffers (tree-bearing updates count TREE_UPDATE_WEIGHT). */
+    this.bufferWeight = 0;
     /** Monotonic per-shard event counter → stable `{shardKey}:{seq}` event ids. */
     this.eventSeq = 0;
     /**
@@ -14249,6 +14273,7 @@ var LiveStreamer = class {
     this.enabled = true;
     this.gated = false;
     this.gatePromise = null;
+    this.announcePromise = null;
     this.jwt = null;
     this.envSent = false;
     this.lastWarnMs = 0;
@@ -14260,13 +14285,11 @@ var LiveStreamer = class {
   }
   enqueueTest(update) {
     if (!this.enabled) return;
-    if (this.config.redact) {
-      if (update.title !== void 0) update.title = this.config.redact(update.title);
-      if (update.currentStep !== void 0) update.currentStep = this.config.redact(update.currentStep);
-    }
+    if (this.config.redact) redactTestUpdate(update, this.config.redact);
     const prevRetry = this.testStates.get(update.id)?.retry;
     this.testStates.set(update.id, { status: update.status, retry: update.retry ?? prevRetry });
     this.testBuffer.push(update);
+    this.bufferWeight += update.steps ? TREE_UPDATE_WEIGHT : 1;
     this.capPreLicenseBuffer();
     this.scheduleFlush();
   }
@@ -14278,9 +14301,62 @@ var LiveStreamer = class {
     }
     event.id = `${this.config.shardKey}:${this.eventSeq++}`;
     this.eventBuffer.push(event);
+    this.bufferWeight += 1;
     this.capPreLicenseBuffer();
     this.scheduleFlush();
   }
+  /**
+   * One immediate empty "hello" batch, sent at run start before the banner
+   * prints. It binds the run server-side (so early link-openers and the
+   * dashboard see it instantly instead of a pending window) and returns the
+   * server-ISSUED watch token from the ack — the capability that survives
+   * every license-key lifecycle event, unlike the key-derived HMAC fallback.
+   * Returns null on any failure (not entitled, network error, older server
+   * whose ack carries no token); the caller then falls back to the HMAC link.
+   * Memoized so drain() can await the same in-flight promise (see drain()).
+   */
+  announce() {
+    return this.announcePromise ?? (this.announcePromise = this.announceOnce());
+  }
+  async announceOnce() {
+    const entitled = await this.ensureGate();
+    if (!entitled || !this.jwt) return null;
+    const body = {
+      runId: this.config.runId,
+      shardKey: this.config.shardKey,
+      shardTotal: this.config.shardTotal,
+      status: "running",
+      counts: this.snapshotCounts(),
+      tests: [],
+      events: [],
+      ...this.envSent ? {} : { env: this.config.env }
+    };
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), NETWORK_TIMEOUT_MS3);
+    try {
+      const res = await fetch(`${this.serverUrl}/api/live/ingest`, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          authorization: `Bearer ${this.jwt}`
+        },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      });
+      if (!res.ok) {
+        await res.body?.cancel().catch(() => {
+        });
+        return null;
+      }
+      const ack = await res.json().catch(() => null);
+      if (body.env) this.envSent = true;
+      return typeof ack?.watchToken === "string" && ack.watchToken ? ack.watchToken : null;
+    } catch {
+      return null;
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
   /**
    * Final flush: cancels the pending timer, emits the terminal `finished` batch,
    * then awaits in-flight requests bounded by LIVE_DRAIN_DEADLINE_MS. Called from
@@ -14292,6 +14368,7 @@ var LiveStreamer = class {
       clearTimeout(this.flushTimer);
       this.flushTimer = null;
     }
+    if (this.announcePromise) await this.announcePromise;
     await this.flush("finished");
     await Promise.race([
       Promise.allSettled([...this.inFlight]),
@@ -14342,9 +14419,13 @@ var LiveStreamer = class {
     if (dropEvents > 0) this.eventBuffer.splice(0, dropEvents);
     overflow -= dropEvents;
     if (overflow > 0) this.testBuffer.splice(0, overflow);
+    this.bufferWeight = this.currentBufferWeight();
+  }
+  currentBufferWeight() {
+    return this.eventBuffer.length + this.testBuffer.reduce((w, t) => w + (t.steps ? TREE_UPDATE_WEIGHT : 1), 0);
   }
   scheduleFlush() {
-    if (this.testBuffer.length + this.eventBuffer.length >= this.flushMaxBatch) {
+    if (this.bufferWeight >= this.flushMaxBatch) {
       void this.flush("running");
       return;
     }
@@ -14365,6 +14446,7 @@ var LiveStreamer = class {
     if (status !== "finished" && tests.length === 0 && events.length === 0) return;
     this.testBuffer = [];
     this.eventBuffer = [];
+    this.bufferWeight = 0;
     const body = {
       runId: this.config.runId,
       shardKey: this.config.shardKey,
@@ -14399,6 +14481,7 @@ var LiveStreamer = class {
       this.enabled = false;
       this.testBuffer = [];
       this.eventBuffer = [];
+      this.bufferWeight = 0;
       logger.debug("Live streaming disabled \u2014 no active license or live entitlement.");
       return false;
     }
@@ -14469,7 +14552,7 @@ function computeWatchToken(runId, key) {
 }
 function buildWatchUrl(serverUrl, runId, token) {
   const base = serverUrl.endsWith("/") ? serverUrl.slice(0, -1) : serverUrl;
-  return `${base}/live/${encodeURIComponent(runId)}?t=${encodeURIComponent(token)}`;
+  return `${base}/live/${encodeURIComponent(runId)}#t=${encodeURIComponent(token)}`;
 }
 function formatLiveBanner(url) {
   const label = "Live Tracker";
@@ -14485,25 +14568,213 @@ function shardKeyOf(shard) {
 
 // src/live/event-map.ts
 init_esm_shims();
+
+// src/live/step-tree.ts
+init_esm_shims();
+var MAX_TREE_DEPTH = 10;
+var MAX_TREE_NODES = 150;
+var MAX_TREE_JSON = 24e3;
+var MAX_NODE_TITLE = 200;
+var MAX_ERRORS = 3;
+var MAX_ERR_MESSAGE = 2e3;
+var MAX_ERR_STACK = 8192;
+var MAX_ERR_SNIPPET = 4096;
+var isHook = (c) => c === "hook" || c === "fixture";
+function flatten2(steps) {
+  const out = [];
+  const walk = (nodes, depth, ancestors) => {
+    for (const s of nodes ?? []) {
+      const index = out.length;
+      out.push({
+        raw: s,
+        category: s.category ?? "",
+        depth,
+        hasError: s.error != null,
+        ancestors
+      });
+      if (s.steps?.length) walk(s.steps, depth + 1, [...ancestors, index]);
+    }
+  };
+  walk(steps ?? [], 0, []);
+  return out;
+}
+var inHookSubtree2 = (flat, f) => isHook(f.category) || f.ancestors.some((a) => isHook(flat[a].category));
+function pickFailingIdx2(flat) {
+  const pick = (allowTeardown) => {
+    let idx = -1;
+    for (let i = 0; i < flat.length; i++) {
+      const f = flat[i];
+      if (!f.hasError || !allowTeardown && inHookSubtree2(flat, f)) continue;
+      if (idx === -1 || f.depth >= flat[idx].depth) idx = i;
+    }
+    return idx;
+  };
+  const body = pick(false);
+  return body >= 0 ? body : pick(true);
+}
+function mapCategory(category) {
+  if (category === "test.step") return "step";
+  if (category === "expect") return "expect";
+  if (isHook(category)) return "hook";
+  return "api";
+}
+function buildErrorInfo(err) {
+  if (!err?.message) return void 0;
+  return {
+    message: clampWithEllipsis(stripAnsi(err.message), MAX_ERR_MESSAGE),
+    ...err.stack ? { stack: clampWithEllipsis(stripAnsi(err.stack), MAX_ERR_STACK) } : {},
+    ...err.snippet ? { snippet: clampWithEllipsis(stripAnsi(err.snippet), MAX_ERR_SNIPPET) } : {}
+  };
+}
+function mapResultErrors(errors) {
+  if (!errors?.length) return void 0;
+  const out = errors.slice(0, MAX_ERRORS).map((e) => buildErrorInfo(e)).filter((e) => e !== void 0);
+  return out.length > 0 ? out : void 0;
+}
+function buildLiveStepTree(steps) {
+  if (!steps?.length) return void 0;
+  const flat = flatten2(steps);
+  if (flat.length === 0) return void 0;
+  const failingIdx = pickFailingIdx2(flat);
+  const failingPath = /* @__PURE__ */ new Set();
+  if (failingIdx >= 0) {
+    failingPath.add(flat[failingIdx].raw);
+    for (const a of flat[failingIdx].ancestors) failingPath.add(flat[a].raw);
+  }
+  const failingLeaf = failingIdx >= 0 ? flat[failingIdx].raw : void 0;
+  for (const level of [0, 1, 2, 3]) {
+    const budget = { left: MAX_TREE_NODES };
+    const tree = buildChildren(steps, {
+      level,
+      depth: 0,
+      underHook: false,
+      underApiOrExpect: false,
+      failingPath,
+      failingLeaf,
+      budget
+    });
+    if (tree.length === 0) return void 0;
+    if (budget.left >= 0 && JSON.stringify(tree).length <= MAX_TREE_JSON) return tree;
+  }
+  return void 0;
+}
+function keepNode(s, ctx) {
+  if (ctx.failingPath.has(s)) return true;
+  if (!s.title) return false;
+  const c = s.category ?? "";
+  if (isHook(c) || ctx.underHook) return false;
+  if (c === "test.step") return true;
+  if (ctx.underApiOrExpect) return false;
+  if (c === "expect") return ctx.level < 2;
+  if (c === "pw:api") return ctx.level < 1;
+  return false;
+}
+function containsFailing(s, leaf) {
+  if (!leaf) return false;
+  if (s === leaf) return true;
+  return (s.steps ?? []).some((child) => containsFailing(child, leaf));
+}
+function buildChildren(nodes, ctx) {
+  const out = [];
+  for (const s of nodes ?? []) {
+    if (ctx.budget.left <= 0) {
+      ctx.budget.left = -1;
+      break;
+    }
+    const c = s.category ?? "";
+    if (!keepNode(s, ctx)) {
+      if (containsFailing(s, ctx.failingLeaf)) {
+        out.push(
+          ...buildChildren(s.steps, {
+            ...ctx,
+            underHook: ctx.underHook || isHook(c),
+            underApiOrExpect: ctx.underApiOrExpect || c === "pw:api" || c === "expect"
+          })
+        );
+      }
+      continue;
+    }
+    ctx.budget.left -= 1;
+    const node = {
+      t: clampWithEllipsis(stripAnsi(s.title ?? ""), MAX_NODE_TITLE),
+      c: mapCategory(c),
+      ...Number.isFinite(s.duration) && s.duration >= 0 ? { d: Math.round(s.duration) } : {},
+      ...s.error != null ? { s: "failed" } : {},
+      ...s === ctx.failingLeaf ? errField(s) : {}
+    };
+    if (s.steps?.length) {
+      if (ctx.depth + 1 >= MAX_TREE_DEPTH) {
+        if (!node.err && containsFailing(s, ctx.failingLeaf) && s !== ctx.failingLeaf) {
+          const hoisted = errField(ctx.failingLeaf);
+          if (hoisted.err) {
+            node.err = hoisted.err;
+            node.s = "failed";
+          }
+        }
+      } else {
+        const ch = buildChildren(s.steps, {
+          ...ctx,
+          depth: ctx.depth + 1,
+          underHook: ctx.underHook || isHook(c),
+          underApiOrExpect: ctx.underApiOrExpect || c === "pw:api" || c === "expect"
+        });
+        if (ch.length > 0) node.ch = ch;
+      }
+    }
+    out.push(node);
+  }
+  return out;
+}
+function errField(s) {
+  const err = buildErrorInfo(s.error);
+  return err ? { err } : {};
+}
+
+// src/live/event-map.ts
 var MAX_TITLE_CHARS2 = 200;
 var MAX_STEP_TITLE_CHARS = 200;
 var MAX_CONSOLE_CHARS = 2048;
+var MAX_FILE_CHARS = 300;
+var MAX_PROJECT_CHARS = 100;
+var MAX_SUITE_SEGMENTS = 10;
+function suiteIdentity(test) {
+  const path16 = typeof test.titlePath === "function" ? test.titlePath() : [];
+  if (!Array.isArray(path16) || path16.length < 4) return {};
+  const [, project, file, ...rest] = path16;
+  const describes = rest.slice(0, -1);
+  const out = {};
+  if (typeof file === "string" && file) {
+    out.file = clampWithEllipsis(file.replace(/\\/g, "/"), MAX_FILE_CHARS);
+  }
+  const segs = describes.filter((s) => typeof s === "string" && s.length > 0).slice(0, MAX_SUITE_SEGMENTS).map((s) => clampWithEllipsis(s, MAX_STEP_TITLE_CHARS));
+  if (segs.length > 0) out.suitePath = segs;
+  if (typeof project === "string" && project) {
+    out.projectName = clampWithEllipsis(project, MAX_PROJECT_CHARS);
+  }
+  return out;
+}
 function mapTestBegin(test, shardKey) {
   return {
     id: test.id,
     title: clampWithEllipsis(test.title ?? "", MAX_TITLE_CHARS2),
     status: "running",
-    shardKey
+    shardKey,
+    ...suiteIdentity(test)
   };
 }
 function mapTestEnd(test, result, shardKey) {
+  const steps = buildLiveStepTree(result.steps);
+  const errors = mapResultErrors(result.errors);
   return {
     id: test.id,
     title: clampWithEllipsis(test.title ?? "", MAX_TITLE_CHARS2),
     status: result.status,
     durationMs: result.duration,
     retry: result.retry,
-    shardKey
+    shardKey,
+    ...suiteIdentity(test),
+    ...steps ? { steps } : {},
+    ...errors ? { errors } : {}
   };
 }
 function isLifecycleStep(step) {
@@ -14553,7 +14824,11 @@ 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: testStepDepth2(step)
+    depth: testStepDepth2(step),
+    // Category so the trail styles pw:api actions and expects distinctly. Hooks
+    // and fixtures never reach here non-errored (shouldEmitStep drops them); an
+    // errored one maps to 'api' — the trail has no dedicated hook style.
+    category: step.category === "test.step" ? "step" : step.category === "expect" ? "expect" : "api"
   };
 }
 function mapConsole(kind, chunk, testId, shardKey) {
@@ -14585,7 +14860,7 @@ var PdfReporter = class {
     if (this.options.redact.enabled) {
       this.redactor = new Redactor(this.options.redact);
     }
-    this.version = true ? "0.23.0" : "0.x";
+    this.version = true ? "0.25.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${this.version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,
@@ -14850,18 +15125,8 @@ var PdfReporter = class {
     this.liveSteps = live.steps;
     this.liveConsole = live.console;
     void this.license();
-    const token = computeWatchToken(runId, this.options.licenseKey);
-    const watchUrl = token ? buildWatchUrl(serverUrl, runId, token) : void 0;
     const env = detectCiEnv();
     if (this.redactor && env?.buildUrl) env.buildUrl = this.redactor.redactText(env.buildUrl);
-    if (watchUrl) {
-      void this.announceLive(watchUrl, env, shard).catch(() => {
-      });
-    } else {
-      logger.warn(
-        "Live is enabled but no RF_LICENSE_KEY was found \u2014 cannot mint a watch link or stream. Set RF_LICENSE_KEY (or the `licenseKey` option)."
-      );
-    }
     this.liveStreamer = new LiveStreamer({
       serverUrl,
       runId,
@@ -14872,16 +15137,27 @@ var PdfReporter = class {
       env,
       flushMs: live.flushMs
     });
+    if (!this.options.licenseKey?.trim() && !process.env.RF_LICENSE_KEY?.trim()) {
+      logger.warn(
+        "Live is enabled but no RF_LICENSE_KEY was found \u2014 cannot mint a watch link or stream. Set RF_LICENSE_KEY (or the `licenseKey` option)."
+      );
+      return;
+    }
+    void this.announceLive(serverUrl, runId, env, shard).catch(() => {
+    });
   }
   /**
    * Announces the watch link once the run is confirmed live-entitled. Gating on
    * the SAME resolved entitlement the streamer requires (`jwt` + the `'live'`
    * feature) guarantees the link is never printed or posted for a run that will
-   * never stream — no dead links. The chat ping fires from the primary shard only
-   * (unsharded, or `shard.current === 1`) so an N-way matrix posts one message,
-   * not N. The banner still prints from every shard's own log.
+   * never stream — no dead links. The link's token is the server-ISSUED one from
+   * the announce handshake (random, key-independent — a key rotation can never
+   * kill the link); the key-derived HMAC is minted only as a fallback when the
+   * handshake fails (network blip, older server). The chat ping fires from the
+   * primary shard only (unsharded, or `shard.current === 1`) so an N-way matrix
+   * posts one message, not N. The banner still prints from every shard's own log.
    */
-  async announceLive(watchUrl, env, shard) {
+  async announceLive(serverUrl, runId, env, shard) {
     const info = await this.license();
     if (!info) {
       logger.warn("Live is enabled but no active license resolved \u2014 no watch link or streaming.");
@@ -14899,6 +15175,13 @@ var PdfReporter = class {
       );
       return;
     }
+    const issued = await this.liveStreamer?.announce();
+    const token = issued ?? computeWatchToken(runId, this.options.licenseKey);
+    if (!token) {
+      logger.warn("Live is enabled but no watch link could be established \u2014 streaming continues without one.");
+      return;
+    }
+    const watchUrl = buildWatchUrl(serverUrl, runId, token);
     if (isLevelEnabled("info")) {
       console.log(formatLiveBanner(watchUrl));
     }

package/dist/templates/layouts/detailed.hbs

@@ -1,41 +1,41 @@
-{{> head}}
-
-{{> watermark}}
-
-{{#if sections.coverPage}}{{> cover-page}}{{/if}}
-
-<div class="report-header">
-  {{#if meta.branding.logoBase64}}
-    <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
-  {{/if}}
-  <div>
-    <div class="report-header__title">{{meta.title}}</div>
-    <div class="report-header__meta">{{meta.projectName}} &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</div>
-  </div>
-</div>
-
-{{#if sections.analysisOneliner}}{{> analysis-oneliner}}{{/if}}
-
-{{#if sections.releaseGate}}{{> release-gate}}{{/if}}
-
-{{#if sections.briefBand}}{{> brief-band}}{{/if}}
-
-{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
-
-{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
-
-{{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
-
-{{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
-
-{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
-
-{{#if sections.defectLog}}{{> defect-log }}{{/if}}
-
-<div class="report-footer">
-  <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>
-  <span>Generated by ReportForge &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</span>
-</div>
-
-</body>
-</html>
+{{> head}}
+
+{{> watermark}}
+
+{{#if sections.coverPage}}{{> cover-page}}{{/if}}
+
+<div class="report-header">
+  {{#if meta.branding.logoBase64}}
+    <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+  {{/if}}
+  <div>
+    <div class="report-header__title">{{meta.title}}</div>
+    <div class="report-header__meta">{{meta.projectName}} &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</div>
+  </div>
+</div>
+
+{{#if sections.analysisOneliner}}{{> analysis-oneliner}}{{/if}}
+
+{{#if sections.releaseGate}}{{> release-gate}}{{/if}}
+
+{{#if sections.briefBand}}{{> brief-band}}{{/if}}
+
+{{#if sections.summary}}{{> executive-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
+
+{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend) }}{{/if}}
+
+{{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
+
+{{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
+
+{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
+
+{{#if sections.defectLog}}{{> defect-log }}{{/if}}
+
+<div class="report-footer">
+  <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>
+  <span>Generated by ReportForge &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</span>
+</div>
+
+</body>
+</html>

package/dist/templates/layouts/executive.hbs

@@ -1,41 +1,41 @@
-{{> head}}
-
-{{> watermark}}
-
-{{#if sections.coverPage}}{{> cover-page}}{{/if}}
-
-<div class="report-header">
-  <div class="report-header__left">
-    {{#if meta.branding.logoBase64}}
-      <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
-    {{/if}}
-    <div class="report-header__title">{{meta.title}}</div>
-  </div>
-  <div class="report-header__date">{{formatDate meta.generatedAt}}</div>
-</div>
-
-{{#if sections.analysisOneliner}}{{> analysis-oneliner}}{{/if}}
-
-{{#if sections.releaseGate}}{{> release-gate}}{{/if}}
-
-{{#if sections.briefBand}}{{> brief-band}}{{/if}}
-
-{{#if sections.summary}}{{> executive-hero-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
-
-{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend heroTrend=true) }}{{/if}}
-
-{{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
-
-{{#if sections.defectLog}}{{> defect-log }}{{/if}}
-
-{{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
-
-{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
-
-<div class="report-footer">
-  <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>
-  <span>Generated by ReportForge &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</span>
-</div>
-
-</body>
-</html>
+{{> head}}
+
+{{> watermark}}
+
+{{#if sections.coverPage}}{{> cover-page}}{{/if}}
+
+<div class="report-header">
+  <div class="report-header__left">
+    {{#if meta.branding.logoBase64}}
+      <img class="report-header__logo" src="{{meta.branding.logoBase64}}" alt="Logo">
+    {{/if}}
+    <div class="report-header__title">{{meta.title}}</div>
+  </div>
+  <div class="report-header__date">{{formatDate meta.generatedAt}}</div>
+</div>
+
+{{#if sections.analysisOneliner}}{{> analysis-oneliner}}{{/if}}
+
+{{#if sections.releaseGate}}{{> release-gate}}{{/if}}
+
+{{#if sections.briefBand}}{{> brief-band}}{{/if}}
+
+{{#if sections.summary}}{{> executive-hero-summary options=(obj showPassRate=sections.passRate releaseGateShown=sections.releaseGate) }}{{/if}}
+
+{{#if sections.charts}}{{> charts options=(obj showCharts=true showTrend=sections.trend heroTrend=true) }}{{/if}}
+
+{{#if sections.requirementsMatrix}}{{> requirements-matrix }}{{/if}}
+
+{{#if sections.defectLog}}{{> defect-log }}{{/if}}
+
+{{#if sections.ciEnvironment}}{{> ci-environment options=(obj showFullEnvironment=sections.fullEnvironment) }}{{/if}}
+
+{{#if sections.suiteBreakdown}}{{> suite-breakdown options=(obj showRetries=sections.retries showFullFailures=sections.fullFailures showStackTraces=sections.stackTraces) }}{{/if}}
+
+<div class="report-footer">
+  <span>{{meta.projectName}} &nbsp;·&nbsp; Playwright Test Report</span>
+  <span>Generated by ReportForge &nbsp;·&nbsp; {{formatDate meta.generatedAt}}</span>
+</div>
+
+</body>
+</html>