@arghajit/playwright-pulse-report 0.2.1 → 0.2.3

package/scripts/generate-static-report.mjs

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
 import * as fs from "fs/promises";
+import { readFileSync, existsSync as fsExistsSync } from "fs";
 import path from "path";
-import { fork } from "child_process"; // Add this
-import { fileURLToPath } from "url"; // Add this for resolving path in ESM
+import { fork } from "child_process";
+import { fileURLToPath } from "url";
 
 // Use dynamic import for chalk as it's ESM only
 let chalk;
@@ -27,126 +28,238 @@ const DEFAULT_JSON_FILE = "playwright-pulse-report.json";
 const DEFAULT_HTML_FILE = "playwright-pulse-static-report.html";
 
 // Helper functions
+export function ansiToHtml(text) {
+  if (!text) {
+    return "";
+  }
+  const codes = {
+    0: "color:inherit;font-weight:normal;font-style:normal;text-decoration:none;opacity:1;background-color:inherit;",
+    1: "font-weight:bold",
+    2: "opacity:0.6",
+    3: "font-style:italic",
+    4: "text-decoration:underline",
+    30: "color:#000", // black
+    31: "color:#d00", // red
+    32: "color:#0a0", // green
+    33: "color:#aa0", // yellow
+    34: "color:#00d", // blue
+    35: "color:#a0a", // magenta
+    36: "color:#0aa", // cyan
+    37: "color:#aaa", // light grey
+    39: "color:inherit", // default foreground color
+    40: "background-color:#000", // black background
+    41: "background-color:#d00", // red background
+    42: "background-color:#0a0", // green background
+    43: "background-color:#aa0", // yellow background
+    44: "background-color:#00d", // blue background
+    45: "background-color:#a0a", // magenta background
+    46: "background-color:#0aa", // cyan background
+    47: "background-color:#aaa", // light grey background
+    49: "background-color:inherit", // default background color
+    90: "color:#555", // dark grey
+    91: "color:#f55", // light red
+    92: "color:#5f5", // light green
+    93: "color:#ff5", // light yellow
+    94: "color:#55f", // light blue
+    95: "color:#f5f", // light magenta
+    96: "color:#5ff", // light cyan
+    97: "color:#fff", // white
+  };
+
+  let currentStylesArray = [];
+  let html = "";
+  let openSpan = false;
+
+  const applyStyles = () => {
+    if (openSpan) {
+      html += "</span>";
+      openSpan = false;
+    }
+    if (currentStylesArray.length > 0) {
+      const styleString = currentStylesArray.filter((s) => s).join(";");
+      if (styleString) {
+        html += `<span style="${styleString}">`;
+        openSpan = true;
+      }
+    }
+  };
+  const resetAndApplyNewCodes = (newCodesStr) => {
+    const newCodes = newCodesStr.split(";");
+    if (newCodes.includes("0")) {
+      currentStylesArray = [];
+      if (codes["0"]) currentStylesArray.push(codes["0"]);
+    }
+    for (const code of newCodes) {
+      if (code === "0") continue;
+      if (codes[code]) {
+        if (code === "39") {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith("color:")
+          );
+          currentStylesArray.push("color:inherit");
+        } else if (code === "49") {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith("background-color:")
+          );
+          currentStylesArray.push("background-color:inherit");
+        } else {
+          currentStylesArray.push(codes[code]);
+        }
+      } else if (code.startsWith("38;2;") || code.startsWith("48;2;")) {
+        const parts = code.split(";");
+        const type = parts[0] === "38" ? "color" : "background-color";
+        if (parts.length === 5) {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith(type + ":")
+          );
+          currentStylesArray.push(
+            `${type}:rgb(${parts[2]},${parts[3]},${parts[4]})`
+          );
+        }
+      }
+    }
+    applyStyles();
+  };
+  const segments = text.split(/(\x1b\[[0-9;]*m)/g);
+  for (const segment of segments) {
+    if (!segment) continue;
+    if (segment.startsWith("\x1b[") && segment.endsWith("m")) {
+      const command = segment.slice(2, -1);
+      resetAndApplyNewCodes(command);
+    } else {
+      const escapedContent = segment
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+      html += escapedContent;
+    }
+  }
+  if (openSpan) {
+    html += "</span>";
+  }
+  return html;
+}
+
 function sanitizeHTML(str) {
-  // User's provided version (note: this doesn't escape HTML special chars correctly)
   if (str === null || str === undefined) return "";
-  return String(str)
-    .replace(/&/g, "&")
-    .replace(/</g, "<")
-    .replace(/>/g, ">")
-    .replace(/"/g, `"`)
-    .replace(/'/g, "'");
+  return String(str).replace(
+    /[&<>"']/g,
+    (match) =>
+      ({ "&": "&", "<": "<", ">": ">", '"': '"', "'": "'" }[match] || match)
+  );
 }
+
 function capitalize(str) {
-  if (!str) return ""; // Handle empty string
+  if (!str) return "";
   return str[0].toUpperCase() + str.slice(1).toLowerCase();
 }
-
 function formatPlaywrightError(error) {
-  // Get the error message and clean ANSI codes
-  const rawMessage = error.stack || error.message || error.toString();
-  const cleanMessage = rawMessage.replace(/\x1B\[[0-9;]*[mGKH]/g, "");
-
-  // Parse error components
-  const timeoutMatch = cleanMessage.match(/Timed out (\d+)ms waiting for/);
-  const assertionMatch = cleanMessage.match(/expect\((.*?)\)\.(.*?)\(/);
-  const expectedMatch = cleanMessage.match(
-    /Expected (?:pattern|string|regexp|value): (.*?)(?:\n|Call log|$)/s
-  );
-  const actualMatch = cleanMessage.match(
-    /Received (?:string|value): (.*?)(?:\n|Call log|$)/s
+  const commandOutput = ansiToHtml(error || error.message);
+  return convertPlaywrightErrorToHTML(commandOutput);
+}
+function convertPlaywrightErrorToHTML(str) {
+  return (
+    str
+      // Convert leading spaces to &nbsp; and tabs to &nbsp;&nbsp;&nbsp;&nbsp;
+      .replace(/^(\s+)/gm, (match) =>
+        match.replace(/ /g, "&nbsp;").replace(/\t/g, "&nbsp;&nbsp;")
+      )
+      // Color and style replacements
+      .replace(/<red>/g, '<span style="color: red;">')
+      .replace(/<green>/g, '<span style="color: green;">')
+      .replace(/<dim>/g, '<span style="opacity: 0.6;">')
+      .replace(/<intensity>/g, '<span style="font-weight: bold;">') // Changed to apply bold
+      .replace(/<\/color>/g, "</span>")
+      .replace(/<\/intensity>/g, "</span>")
+      // Convert newlines to <br> after processing other replacements
+      .replace(/\n/g, "<br>")
   );
+}
+function formatDuration(ms, options = {}) {
+  const {
+    precision = 1,
+    invalidInputReturn = "N/A",
+    defaultForNullUndefinedNegative = null,
+  } = options;
+
+  const validPrecision = Math.max(0, Math.floor(precision));
+  const zeroWithPrecision = (0).toFixed(validPrecision) + "s";
+  const resolvedNullUndefNegReturn =
+    defaultForNullUndefinedNegative === null
+      ? zeroWithPrecision
+      : defaultForNullUndefinedNegative;
+
+  if (ms === undefined || ms === null) {
+    return resolvedNullUndefNegReturn;
+  }
 
-  // HTML escape function
-  const escapeHtml = (str) => {
-    if (!str) return "";
-    return str.replace(
-      /[&<>'"]/g,
-      (tag) =>
-        ({
-          "&": "&amp;",
-          "<": "&lt;",
-          ">": "&gt;",
-          "'": "&#39;",
-          '"': "&quot;",
-        }[tag])
-    );
-  };
-
-  // Build HTML output
-  let html = `<div class="playwright-error">
-    <div class="error-header">Test Error</div>`;
+  const numMs = Number(ms);
 
-  if (timeoutMatch) {
-    html += `<div class="error-timeout">⏱ Timeout: ${escapeHtml(
-      timeoutMatch[1]
-    )}ms</div>`;
+  if (Number.isNaN(numMs) || !Number.isFinite(numMs)) {
+    return invalidInputReturn;
   }
 
-  if (assertionMatch) {
-    html += `<div class="error-assertion">🔍 Assertion: expect(${escapeHtml(
-      assertionMatch[1]
-    )}).${escapeHtml(assertionMatch[2])}()</div>`;
+  if (numMs < 0) {
+    return resolvedNullUndefNegReturn;
   }
 
-  if (expectedMatch) {
-    html += `<div class="error-expected">✅ Expected: ${escapeHtml(
-      expectedMatch[1]
-    )}</div>`;
+  if (numMs === 0) {
+    return zeroWithPrecision;
   }
 
-  if (actualMatch) {
-    html += `<div class="error-actual">❌ Actual: ${escapeHtml(
-      actualMatch[1]
-    )}</div>`;
-  }
+  const MS_PER_SECOND = 1000;
+  const SECONDS_PER_MINUTE = 60;
+  const MINUTES_PER_HOUR = 60;
+  const SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
 
-  // Add call log if present
-  const callLogStart = cleanMessage.indexOf("Call log:");
-  if (callLogStart !== -1) {
-    const callLogEnd =
-      cleanMessage.indexOf("\n\n", callLogStart) || cleanMessage.length;
-    const callLogSection = cleanMessage
-      .slice(callLogStart + 9, callLogEnd)
-      .trim();
-
-    html += `<div class="error-call-log">
-      <div class="call-log-header">📜 Call Log:</div>
-      <ul class="call-log-items">${callLogSection
-        .split("\n")
-        .map((line) => line.trim())
-        .filter((line) => line)
-        .map((line) => `<li>${escapeHtml(line.replace(/^-\s*/, ""))}</li>`)
-        .join("")}</ul>
-    </div>`;
-  }
+  const totalRawSeconds = numMs / MS_PER_SECOND;
 
-  // Add stack trace if present
-  const stackTraceMatch = cleanMessage.match(/\n\s*at\s.*/gs);
-  if (stackTraceMatch) {
-    html += `<div class="error-stack-trace">
-      <div class="stack-trace-header">🔎 Stack Trace:</div>
-      <ul class="stack-trace-items">${stackTraceMatch[0]
-        .trim()
-        .split("\n")
-        .map((line) => line.trim())
-        .filter((line) => line)
-        .map((line) => `<li>${escapeHtml(line)}</li>`)
-        .join("")}</ul>
-    </div>`;
-  }
+  // Decision: Are we going to display hours or minutes?
+  // This happens if the duration is inherently >= 1 minute OR
+  // if it's < 1 minute but ceiling the seconds makes it >= 1 minute.
+  if (
+    totalRawSeconds < SECONDS_PER_MINUTE &&
+    Math.ceil(totalRawSeconds) < SECONDS_PER_MINUTE
+  ) {
+    // Strictly seconds-only display, use precision.
+    return `${totalRawSeconds.toFixed(validPrecision)}s`;
+  } else {
+    // Display will include minutes and/or hours, or seconds round up to a minute.
+    // Seconds part should be an integer (ceiling).
+    // Round the total milliseconds UP to the nearest full second.
+    const totalMsRoundedUpToSecond =
+      Math.ceil(numMs / MS_PER_SECOND) * MS_PER_SECOND;
 
-  html += `</div>`;
+    let remainingMs = totalMsRoundedUpToSecond;
 
-  return html;
-}
+    const h = Math.floor(remainingMs / (MS_PER_SECOND * SECONDS_PER_HOUR));
+    remainingMs %= MS_PER_SECOND * SECONDS_PER_HOUR;
 
-// User-provided formatDuration function
-function formatDuration(ms) {
-  if (ms === undefined || ms === null || ms < 0) return "0.0s";
-  return (ms / 1000).toFixed(1) + "s";
-}
+    const m = Math.floor(remainingMs / (MS_PER_SECOND * SECONDS_PER_MINUTE));
+    remainingMs %= MS_PER_SECOND * SECONDS_PER_MINUTE;
 
+    const s = Math.floor(remainingMs / MS_PER_SECOND); // This will be an integer
+
+    const parts = [];
+    if (h > 0) {
+      parts.push(`${h}h`);
+    }
+
+    // Show minutes if:
+    // - hours are present (e.g., "1h 0m 5s")
+    // - OR minutes themselves are > 0 (e.g., "5m 10s")
+    // - OR the original duration was >= 1 minute (ensures "1m 0s" for 60000ms)
+    if (h > 0 || m > 0 || numMs >= MS_PER_SECOND * SECONDS_PER_MINUTE) {
+      parts.push(`${m}m`);
+    }
+
+    parts.push(`${s}s`);
+
+    return parts.join(" ");
+  }
+}
 function generateTestTrendsChart(trendData) {
   if (!trendData || !trendData.overall || trendData.overall.length === 0) {
     return '<div class="no-data">No overall trend data available for test counts.</div>';
@@ -155,107 +268,93 @@ function generateTestTrendsChart(trendData) {
   const chartId = `testTrendsChart-${Date.now()}-${Math.random()
     .toString(36)
     .substring(2, 7)}`;
+  const renderFunctionName = `renderTestTrendsChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
   const runs = trendData.overall;
 
   const series = [
     {
       name: "Total",
       data: runs.map((r) => r.totalTests),
-      color: "var(--primary-color)", // Blue
+      color: "var(--primary-color)",
       marker: { symbol: "circle" },
     },
     {
       name: "Passed",
       data: runs.map((r) => r.passed),
-      color: "var(--success-color)", // Green
+      color: "var(--success-color)",
       marker: { symbol: "circle" },
     },
     {
       name: "Failed",
       data: runs.map((r) => r.failed),
-      color: "var(--danger-color)", // Red
+      color: "var(--danger-color)",
       marker: { symbol: "circle" },
     },
     {
       name: "Skipped",
       data: runs.map((r) => r.skipped || 0),
-      color: "var(--warning-color)", // Yellow
+      color: "var(--warning-color)",
       marker: { symbol: "circle" },
     },
   ];
-
-  // Data needed by the tooltip formatter, stringified to be embedded in the client-side script
   const runsForTooltip = runs.map((r) => ({
     runId: r.runId,
     timestamp: r.timestamp,
     duration: r.duration,
   }));
 
-  const optionsObjectString = `
-  {
-      chart: { type: "line", height: 350, backgroundColor: "transparent" },
-      title: { text: null },
-      xAxis: {
-          categories: ${JSON.stringify(runs.map((run, i) => `Run ${i + 1}`))},
-          crosshair: true,
-          labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' }}
-      },
-      yAxis: {
-          title: { text: "Test Count", style: { color: 'var(--text-color)'} },
-          min: 0,
-          labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' }}
-      },
-      legend: {
-          layout: "horizontal", align: "center", verticalAlign: "bottom",
-          itemStyle: { fontSize: "12px", color: 'var(--text-color)' }
-      },
-      plotOptions: {
-          series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}},
-          line: { lineWidth: 2.5 } // fillOpacity was 0.1, but for line charts, area fill is usually separate (area chart type)
-      },
-      tooltip: {
-          shared: true, useHTML: true,
-          backgroundColor: 'rgba(10,10,10,0.92)',
-          borderColor: 'rgba(10,10,10,0.92)',
-          style: { color: '#f5f5f5' },
-          formatter: function () {
-              const runsData = ${JSON.stringify(runsForTooltip)};
-              const pointIndex = this.points[0].point.x; // Get index from point
-              const run = runsData[pointIndex];
-              let tooltip = '<strong>Run ' + (run.runId || pointIndex + 1) + '</strong><br>' +
-                            'Date: ' + new Date(run.timestamp).toLocaleString() + '<br><br>';
-              this.points.forEach(point => {
-                  tooltip += '<span style="color:' + point.color + '">●</span> ' + point.series.name + ': <b>' + point.y + '</b><br>';
-              });
-              tooltip += '<br>Duration: ' + formatDuration(run.duration);
-              return tooltip;
-          }
-      },
-      series: ${JSON.stringify(series)},
-      credits: { enabled: false }
-  }
-  `;
+  const categoriesString = JSON.stringify(runs.map((run, i) => `Run ${i + 1}`));
+  const seriesString = JSON.stringify(series);
+  const runsForTooltipString = JSON.stringify(runsForTooltip);
 
   return `
-      <div id="${chartId}" class="trend-chart-container"></div>
+      <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+          <div class="no-data">Loading Test Volume Trends...</div>
+      </div>
       <script>
-          document.addEventListener('DOMContentLoaded', function() {
+          window.${renderFunctionName} = function() {
+              const chartContainer = document.getElementById('${chartId}');
+              if (!chartContainer) { console.error("Chart container ${chartId} not found for lazy loading."); return; }
               if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
                   try {
-                      const chartOptions = ${optionsObjectString};
+                      chartContainer.innerHTML = ''; // Clear placeholder
+                      const chartOptions = {
+                          chart: { type: "line", height: 350, backgroundColor: "transparent" },
+                          title: { text: null },
+                          xAxis: { categories: ${categoriesString}, crosshair: true, labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' }}},
+                          yAxis: { title: { text: "Test Count", style: { color: 'var(--text-color)'} }, min: 0, labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' }}},
+                          legend: { layout: "horizontal", align: "center", verticalAlign: "bottom", itemStyle: { fontSize: "12px", color: 'var(--text-color)' }},
+                          plotOptions: { series: { marker: { radius: 4, states: { hover: { radius: 6 }}}, states: { hover: { halo: { size: 5, opacity: 0.1 }}}}, line: { lineWidth: 2.5 }},
+                          tooltip: {
+                              shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                              formatter: function () {
+                                  const runsData = ${runsForTooltipString};
+                                  const pointIndex = this.points[0].point.x;
+                                  const run = runsData[pointIndex];
+                                  let tooltip = '<strong>Run ' + (run.runId || pointIndex + 1) + '</strong><br>' + 'Date: ' + new Date(run.timestamp).toLocaleString() + '<br><br>';
+                                  this.points.forEach(point => { tooltip += '<span style="color:' + point.color + '">●</span> ' + point.series.name + ': <b>' + point.y + '</b><br>'; });
+                                  tooltip += '<br>Duration: ' + formatDuration(run.duration);
+                                  return tooltip;
+                              }
+                          },
+                          series: ${seriesString},
+                          credits: { enabled: false }
+                      };
                       Highcharts.chart('${chartId}', chartOptions);
                   } catch (e) {
-                      console.error("Error rendering chart ${chartId}:", e);
-                      document.getElementById('${chartId}').innerHTML = '<div class="no-data">Error rendering test trends chart.</div>';
+                      console.error("Error rendering chart ${chartId} (lazy):", e);
+                      chartContainer.innerHTML = '<div class="no-data">Error rendering test trends chart.</div>';
                   }
               } else {
-                  document.getElementById('${chartId}').innerHTML = '<div class="no-data">Charting library not available.</div>';
+                  chartContainer.innerHTML = '<div class="no-data">Charting library not available for test trends.</div>';
               }
-          });
+          };
       </script>
   `;
 }
-
 function generateDurationTrendChart(trendData) {
   if (!trendData || !trendData.overall || trendData.overall.length === 0) {
     return '<div class="no-data">No overall trend data available for durations.</div>';
@@ -263,109 +362,83 @@ function generateDurationTrendChart(trendData) {
   const chartId = `durationTrendChart-${Date.now()}-${Math.random()
     .toString(36)
     .substring(2, 7)}`;
+  const renderFunctionName = `renderDurationTrendChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
   const runs = trendData.overall;
 
-  // Assuming var(--accent-color-alt) is Orange #FF9800
-  const accentColorAltRGB = "255, 152, 0";
-
-  const seriesString = `[{
-      name: 'Duration',
-      data: ${JSON.stringify(runs.map((run) => run.duration))},
-      color: 'var(--accent-color-alt)',
-      type: 'area',
-      marker: {
-          symbol: 'circle', enabled: true, radius: 4,
-          states: { hover: { radius: 6, lineWidthPlus: 0 } }
-      },
-      fillColor: {
-          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-          stops: [
-              [0, 'rgba(${accentColorAltRGB}, 0.4)'],
-              [1, 'rgba(${accentColorAltRGB}, 0.05)']
-          ]
-      },
-      lineWidth: 2.5
-  }]`;
+  const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
 
+  const chartDataString = JSON.stringify(runs.map((run) => run.duration));
+  const categoriesString = JSON.stringify(runs.map((run, i) => `Run ${i + 1}`));
   const runsForTooltip = runs.map((r) => ({
     runId: r.runId,
     timestamp: r.timestamp,
     duration: r.duration,
     totalTests: r.totalTests,
   }));
+  const runsForTooltipString = JSON.stringify(runsForTooltip);
 
-  const optionsObjectString = `
-  {
-      chart: { type: 'area', height: 350, backgroundColor: 'transparent' },
-      title: { text: null },
-      xAxis: {
-          categories: ${JSON.stringify(runs.map((run, i) => `Run ${i + 1}`))},
-          crosshair: true,
-          labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' } }
-      },
-      yAxis: {
-          title: { text: 'Duration', style: { color: 'var(--text-color)' } },
-          labels: {
-              formatter: function() { return formatDuration(this.value); },
-              style: { color: 'var(--text-color-secondary)', fontSize: '12px' }
-          },
-          min: 0
-      },
-      legend: {
-          layout: 'horizontal', align: 'center', verticalAlign: 'bottom',
-          itemStyle: { fontSize: '12px', color: 'var(--text-color)' }
-      },
-      plotOptions: {
-          area: {
-              lineWidth: 2.5,
-              states: { hover: { lineWidthPlus: 0 } },
-              threshold: null 
-          }
-      },
-      tooltip: {
-          shared: true, useHTML: true,
-          backgroundColor: 'rgba(10,10,10,0.92)',
-          borderColor: 'rgba(10,10,10,0.92)',
-          style: { color: '#f5f5f5' },
-          formatter: function () {
-              const runsData = ${JSON.stringify(runsForTooltip)};
-              const pointIndex = this.points[0].point.x;
-              const run = runsData[pointIndex];
-              let tooltip = '<strong>Run ' + (run.runId || pointIndex + 1) + '</strong><br>' +
-                            'Date: ' + new Date(run.timestamp).toLocaleString() + '<br>';
-              this.points.forEach(point => {
-                  tooltip += '<span style="color:' + point.series.color + '">●</span> ' +
-                             point.series.name + ': <b>' + formatDuration(point.y) + '</b><br>';
-              });
-              tooltip += '<br>Tests: ' + run.totalTests;
-              return tooltip;
-          }
-      },
-      series: ${seriesString},
-      credits: { enabled: false }
-  }
-  `;
+  const seriesStringForRender = `[{
+      name: 'Duration',
+      data: ${chartDataString},
+      color: 'var(--accent-color-alt)',
+      type: 'area',
+      marker: { symbol: 'circle', enabled: true, radius: 4, states: { hover: { radius: 6, lineWidthPlus: 0 } } },
+      fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, 'rgba(${accentColorAltRGB}, 0.4)'], [1, 'rgba(${accentColorAltRGB}, 0.05)']] },
+      lineWidth: 2.5
+  }]`;
 
   return `
-      <div id="${chartId}" class="trend-chart-container"></div>
+      <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+          <div class="no-data">Loading Duration Trends...</div>
+      </div>
       <script>
-          document.addEventListener('DOMContentLoaded', function() {
+          window.${renderFunctionName} = function() {
+              const chartContainer = document.getElementById('${chartId}');
+              if (!chartContainer) { console.error("Chart container ${chartId} not found for lazy loading."); return; }
               if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
                   try {
-                      const chartOptions = ${optionsObjectString};
+                      chartContainer.innerHTML = ''; // Clear placeholder
+                      const chartOptions = {
+                          chart: { type: 'area', height: 350, backgroundColor: 'transparent' },
+                          title: { text: null },
+                          xAxis: { categories: ${categoriesString}, crosshair: true, labels: { style: { color: 'var(--text-color-secondary)', fontSize: '12px' }}},
+                          yAxis: {
+                              title: { text: 'Duration', style: { color: 'var(--text-color)' } },
+                              labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)', fontSize: '12px' }},
+                              min: 0
+                          },
+                          legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemStyle: { fontSize: '12px', color: 'var(--text-color)' }},
+                          plotOptions: { area: { lineWidth: 2.5, states: { hover: { lineWidthPlus: 0 } }, threshold: null }},
+                          tooltip: {
+                              shared: true, useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5' },
+                              formatter: function () {
+                                  const runsData = ${runsForTooltipString};
+                                  const pointIndex = this.points[0].point.x;
+                                  const run = runsData[pointIndex];
+                                  let tooltip = '<strong>Run ' + (run.runId || pointIndex + 1) + '</strong><br>' + 'Date: ' + new Date(run.timestamp).toLocaleString() + '<br>';
+                                  this.points.forEach(point => { tooltip += '<span style="color:' + point.series.color + '">●</span> ' + point.series.name + ': <b>' + formatDuration(point.y) + '</b><br>'; });
+                                  tooltip += '<br>Tests: ' + run.totalTests;
+                                  return tooltip;
+                              }
+                          },
+                          series: ${seriesStringForRender}, // This is already a string representation of an array
+                          credits: { enabled: false }
+                      };
                       Highcharts.chart('${chartId}', chartOptions);
                   } catch (e) {
-                      console.error("Error rendering chart ${chartId}:", e);
-                      document.getElementById('${chartId}').innerHTML = '<div class="no-data">Error rendering duration trend chart.</div>';
+                      console.error("Error rendering chart ${chartId} (lazy):", e);
+                      chartContainer.innerHTML = '<div class="no-data">Error rendering duration trend chart.</div>';
                   }
               } else {
-                   document.getElementById('${chartId}').innerHTML = '<div class="no-data">Charting library not available.</div>';
+                  chartContainer.innerHTML = '<div class="no-data">Charting library not available for duration trends.</div>';
               }
-          });
+          };
       </script>
   `;
 }
-
 function formatDate(dateStrOrDate) {
   if (!dateStrOrDate) return "N/A";
   try {
@@ -384,11 +457,9 @@ function formatDate(dateStrOrDate) {
     return "Invalid Date Format";
   }
 }
-
 function generateTestHistoryChart(history) {
   if (!history || history.length === 0)
     return '<div class="no-data-chart">No data for chart</div>';
-
   const validHistory = history.filter(
     (h) => h && typeof h.duration === "number" && h.duration >= 0
   );
@@ -398,6 +469,10 @@ function generateTestHistoryChart(history) {
   const chartId = `testHistoryChart-${Date.now()}-${Math.random()
     .toString(36)
     .substring(2, 7)}`;
+  const renderFunctionName = `renderTestHistoryChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
 
   const seriesDataPoints = validHistory.map((run) => {
     let color;
@@ -427,94 +502,71 @@ function generateTestHistoryChart(history) {
     };
   });
 
-  // Assuming var(--accent-color) is Deep Purple #673ab7 -> RGB 103, 58, 183
-  const accentColorRGB = "103, 58, 183";
+  const accentColorRGB = "103, 58, 183"; // Assuming var(--accent-color) is Deep Purple #673ab7
 
-  const optionsObjectString = `
-  {
-      chart: { type: 'area', height: 100, width: 320, backgroundColor: 'transparent', spacing: [10,10,15,35] },
-      title: { text: null },
-      xAxis: {
-          categories: ${JSON.stringify(
-            validHistory.map((_, i) => `R${i + 1}`)
-          )},
-          labels: { style: { fontSize: '10px', color: 'var(--text-color-secondary)' } }
-      },
-      yAxis: {
-          title: { text: null },
-          labels: {
-              formatter: function() { return formatDuration(this.value); },
-              style: { fontSize: '10px', color: 'var(--text-color-secondary)' },
-              align: 'left', x: -35, y: 3
-          },
-          min: 0,
-          gridLineWidth: 0,
-          tickAmount: 4
-      },
-      legend: { enabled: false },
-      plotOptions: {
-          area: {
-              lineWidth: 2,
-              lineColor: 'var(--accent-color)',
-              fillColor: {
-                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                  stops: [
-                      [0, 'rgba(${accentColorRGB}, 0.4)'],
-                      [1, 'rgba(${accentColorRGB}, 0)']
-                  ]
-              },
-              marker: { enabled: true },
-              threshold: null
-          }
-      },
-      tooltip: {
-          useHTML: true,
-          backgroundColor: 'rgba(10,10,10,0.92)',
-          borderColor: 'rgba(10,10,10,0.92)',
-          style: { color: '#f5f5f5', padding: '8px' },
-          formatter: function() {
-              const pointData = this.point;
-              let statusBadgeHtml = '<span style="padding: 2px 5px; border-radius: 3px; font-size: 0.9em; font-weight: 600; color: white; text-transform: uppercase; background-color: ';
-              switch(String(pointData.status).toLowerCase()) {
-                  case 'passed': statusBadgeHtml += 'var(--success-color)'; break;
-                  case 'failed': statusBadgeHtml += 'var(--danger-color)'; break;
-                  case 'skipped': statusBadgeHtml += 'var(--warning-color)'; break;
-                  default: statusBadgeHtml += 'var(--dark-gray-color)';
-              }
-              statusBadgeHtml += ';">' + String(pointData.status).toUpperCase() + '</span>';
+  const categoriesString = JSON.stringify(
+    validHistory.map((_, i) => `R${i + 1}`)
+  );
+  const seriesDataPointsString = JSON.stringify(seriesDataPoints);
 
-              return '<strong>Run ' + (pointData.runId || (this.point.index + 1)) + '</strong><br>' +
-                     'Status: ' + statusBadgeHtml + '<br>' +
-                     'Duration: ' + formatDuration(pointData.y);
-          }
-      },
-      series: [{
-          data: ${JSON.stringify(seriesDataPoints)},
-          showInLegend: false
-      }],
-      credits: { enabled: false }
-  }
-  `;
   return `
-      <div id="${chartId}" style="width: 320px; height: 100px;"></div>
+      <div id="${chartId}" style="width: 320px; height: 100px;" class="lazy-load-chart" data-render-function-name="${renderFunctionName}">
+          <div class="no-data-chart">Loading History...</div>
+      </div>
       <script>
-          document.addEventListener('DOMContentLoaded', function() {
+          window.${renderFunctionName} = function() {
+              const chartContainer = document.getElementById('${chartId}');
+              if (!chartContainer) { console.error("Chart container ${chartId} not found for lazy loading."); return; }
               if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
                   try {
-                      const chartOptions = ${optionsObjectString};
+                      chartContainer.innerHTML = ''; // Clear placeholder
+                      const chartOptions = {
+                          chart: { type: 'area', height: 100, width: 320, backgroundColor: 'transparent', spacing: [10,10,15,35] },
+                          title: { text: null },
+                          xAxis: { categories: ${categoriesString}, labels: { style: { fontSize: '10px', color: 'var(--text-color-secondary)' }}},
+                          yAxis: {
+                              title: { text: null },
+                              labels: { formatter: function() { return formatDuration(this.value); }, style: { fontSize: '10px', color: 'var(--text-color-secondary)' }, align: 'left', x: -35, y: 3 },
+                              min: 0, gridLineWidth: 0, tickAmount: 4
+                          },
+                          legend: { enabled: false },
+                          plotOptions: {
+                              area: {
+                                  lineWidth: 2, lineColor: 'var(--accent-color)',
+                                  fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, 'rgba(${accentColorRGB}, 0.4)'],[1, 'rgba(${accentColorRGB}, 0)']]},
+                                  marker: { enabled: true }, threshold: null
+                              }
+                          },
+                          tooltip: {
+                              useHTML: true, backgroundColor: 'rgba(10,10,10,0.92)', borderColor: 'rgba(10,10,10,0.92)', style: { color: '#f5f5f5', padding: '8px' },
+                              formatter: function() {
+                                  const pointData = this.point;
+                                  let statusBadgeHtml = '<span style="padding: 2px 5px; border-radius: 3px; font-size: 0.9em; font-weight: 600; color: white; text-transform: uppercase; background-color: ';
+                                  switch(String(pointData.status).toLowerCase()) {
+                                      case 'passed': statusBadgeHtml += 'var(--success-color)'; break;
+                                      case 'failed': statusBadgeHtml += 'var(--danger-color)'; break;
+                                      case 'skipped': statusBadgeHtml += 'var(--warning-color)'; break;
+                                      default: statusBadgeHtml += 'var(--dark-gray-color)';
+                                  }
+                                  statusBadgeHtml += ';">' + String(pointData.status).toUpperCase() + '</span>';
+                                  return '<strong>Run ' + (pointData.runId || (this.point.index + 1)) + '</strong><br>' + 'Status: ' + statusBadgeHtml + '<br>' + 'Duration: ' + formatDuration(pointData.y);
+                              }
+                          },
+                          series: [{ data: ${seriesDataPointsString}, showInLegend: false }],
+                          credits: { enabled: false }
+                      };
                       Highcharts.chart('${chartId}', chartOptions);
                   } catch (e) {
-                      console.error("Error rendering chart ${chartId}:", e);
-                      document.getElementById('${chartId}').innerHTML = '<div class="no-data-chart">Error rendering history chart.</div>';
+                      console.error("Error rendering chart ${chartId} (lazy):", e);
+                      chartContainer.innerHTML = '<div class="no-data-chart">Error rendering history chart.</div>';
                   }
               } else {
-                  document.getElementById('${chartId}').innerHTML = '<div class="no-data-chart">Charting library not available.</div>';
+                  chartContainer.innerHTML = '<div class="no-data-chart">Charting library not available for history.</div>';
               }
-          });
+          };
       </script>
   `;
 }
-
 function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   const total = data.reduce((sum, d) => sum + d.value, 0);
   if (total === 0) {
@@ -621,7 +673,7 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   `;
 
   return `
-      <div class="pie-chart-wrapper" style="align-items: center">
+      <div class="pie-chart-wrapper" style="align-items: center; max-height: 450px">
           <div style="display: flex; align-items: start; width: 100%;"><h3>Test Distribution</h3></div>
           <div id="${chartId}" style="width: ${chartWidth}px; height: ${
     chartHeight - 40
@@ -644,7 +696,335 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       </div>
   `;
 }
+function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
+  // Format memory for display
+  const formattedMemory = environment.memory.replace(/(\d+\.\d{2})GB/, "$1 GB");
 
+  // Generate a unique ID for the dashboard
+  const dashboardId = `envDashboard-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+
+  const cardHeight = Math.floor(dashboardHeight * 0.44);
+  const cardContentPadding = 16; // px
+
+  return `
+    <div class="environment-dashboard-wrapper" id="${dashboardId}">
+      <style>
+        .environment-dashboard-wrapper *,
+        .environment-dashboard-wrapper *::before,
+        .environment-dashboard-wrapper *::after {
+          box-sizing: border-box;
+        }
+
+        .environment-dashboard-wrapper {
+          --primary-color: #007bff;
+          --primary-light-color: #e6f2ff;
+          --secondary-color: #6c757d;
+          --success-color: #28a745;
+          --success-light-color: #eaf6ec;
+          --warning-color: #ffc107;
+          --warning-light-color: #fff9e6;
+          --danger-color: #dc3545;
+          
+          --background-color: #ffffff; 
+          --card-background-color: #ffffff; 
+          --text-color: #212529; 
+          --text-color-secondary: #6c757d; 
+          --border-color: #dee2e6; 
+          --border-light-color: #f1f3f5;
+          --icon-color: #495057;
+          --chip-background: #e9ecef;
+          --chip-text: #495057;
+          --shadow-color: rgba(0, 0, 0, 0.075);
+
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+          background-color: var(--background-color);
+          border-radius: 12px; 
+          box-shadow: 0 6px 12px var(--shadow-color);
+          padding: 24px; 
+          color: var(--text-color);
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: auto 1fr; 
+          gap: 20px; 
+          font-size: 14px; 
+        }
+        
+        .env-dashboard-header {
+          grid-column: 1 / -1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid var(--border-color);
+          padding-bottom: 16px; 
+          margin-bottom: 8px; 
+        }
+        
+        .env-dashboard-title {
+          font-size: 1.5rem; 
+          font-weight: 600;
+          color: var(--text-color); 
+          margin: 0;
+        }
+        
+        .env-dashboard-subtitle {
+          font-size: 0.875rem; 
+          color: var(--text-color-secondary);
+          margin-top: 4px;
+        }
+        
+        .env-card {
+          background-color: var(--card-background-color);
+          border-radius: 8px;
+          padding: ${cardContentPadding}px;
+          box-shadow: 0 3px 6px var(--shadow-color);
+          height: ${cardHeight}px;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden; 
+        }
+        
+        .env-card-header {
+          font-weight: 600;
+          font-size: 1rem; 
+          margin-bottom: 12px;
+          color: var(--text-color);
+          display: flex;
+          align-items: center;
+          padding-bottom: 8px;
+          border-bottom: 1px solid var(--border-light-color);
+        }
+        
+        .env-card-header svg {
+          margin-right: 10px; 
+          width: 18px; 
+          height: 18px;
+          fill: var(--icon-color);
+        }
+
+        .env-card-content {
+          flex-grow: 1; 
+          overflow-y: auto; 
+          padding-right: 5px; 
+        }
+        
+        .env-detail-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center; 
+          padding: 10px 0; 
+          border-bottom: 1px solid var(--border-light-color);
+          font-size: 0.875rem;
+        }
+        
+        .env-detail-row:last-child {
+          border-bottom: none;
+        }
+        
+        .env-detail-label {
+          color: var(--text-color-secondary);
+          font-weight: 500;
+          margin-right: 10px; 
+        }
+        
+        .env-detail-value {
+          color: var(--text-color);
+          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+          text-align: right;
+          word-break: break-all; 
+        }
+        
+        .env-chip {
+          display: inline-block;
+          padding: 4px 10px; 
+          border-radius: 16px; 
+          font-size: 0.75rem; 
+          font-weight: 500;
+          line-height: 1.2;
+          background-color: var(--chip-background);
+          color: var(--chip-text);
+        }
+        
+        .env-chip-primary {
+          background-color: var(--primary-light-color);
+          color: var(--primary-color);
+        }
+        
+        .env-chip-success {
+          background-color: var(--success-light-color);
+          color: var(--success-color);
+        }
+        
+        .env-chip-warning {
+          background-color: var(--warning-light-color);
+          color: var(--warning-color);
+        }
+        
+        .env-cpu-cores {
+          display: flex;
+          align-items: center;
+          gap: 6px; 
+        }
+        
+        .env-core-indicator {
+          width: 12px; 
+          height: 12px;
+          border-radius: 50%;
+          background-color: var(--success-color);
+          border: 1px solid rgba(0,0,0,0.1); 
+        }
+        
+        .env-core-indicator.inactive {
+          background-color: var(--border-light-color);
+          opacity: 0.7; 
+          border-color: var(--border-color);
+        }
+      </style>
+      
+      <div class="env-dashboard-header">
+        <div>
+          <h3 class="env-dashboard-title">System Environment</h3>
+          <p class="env-dashboard-subtitle">Snapshot of the execution environment</p>
+        </div>
+        <span class="env-chip env-chip-primary">${environment.host}</span>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M4 6h16V4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-2v10H4V6zm18-2h-4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2H6a2 2 0 0 0-2 2v2h20V6a2 2 0 0 0-2-2zM8 12h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>
+          Hardware
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">CPU Model</span>
+            <span class="env-detail-value">${environment.cpu.model}</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">CPU Cores</span>
+            <span class="env-detail-value">
+              <div class="env-cpu-cores">
+                ${Array.from(
+                  { length: Math.max(0, environment.cpu.cores || 0) },
+                  (_, i) =>
+                    `<div class="env-core-indicator ${
+                      i >=
+                      (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
+                        ? "inactive"
+                        : ""
+                    }" title="Core ${i + 1}"></div>`
+                ).join("")}
+                <span>${environment.cpu.cores || "N/A"} cores</span>
+              </div>
+            </span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Memory</span>
+            <span class="env-detail-value">${formattedMemory}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-0.01 18c-2.76 0-5.26-1.12-7.07-2.93A7.973 7.973 0 0 1 4 12c0-2.21.9-4.21 2.36-5.64A7.994 7.994 0 0 1 11.99 4c4.41 0 8 3.59 8 8 0 2.76-1.12 5.26-2.93 7.07A7.973 7.973 0 0 1 11.99 20zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
+          Operating System
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">OS Type</span>
+            <span class="env-detail-value">${
+              environment.os.split(" ")[0] === "darwin"
+                ? "darwin (macOS)"
+                : environment.os.split(" ")[0] || "Unknown"
+            }</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">OS Version</span>
+            <span class="env-detail-value">${
+              environment.os.split(" ")[1] || "N/A"
+            }</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Hostname</span>
+            <span class="env-detail-value" title="${environment.host}">${
+    environment.host
+  }</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
+          Node.js Runtime
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">Node Version</span>
+            <span class="env-detail-value">${environment.node}</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">V8 Engine</span>
+            <span class="env-detail-value">${environment.v8}</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Working Dir</span>
+            <span class="env-detail-value" title="${environment.cwd}">${
+    environment.cwd.length > 25
+      ? "..." + environment.cwd.slice(-22)
+      : environment.cwd
+  }</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 8.69 9.48 7 12 7c2.76 0 5 2.24 5 5v1h2c1.66 0 3 1.34 3 3s-1.34 3-3 3z"/></svg>
+          System Summary
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">Platform Arch</span>
+            <span class="env-detail-value">
+              <span class="env-chip ${
+                environment.os.includes("darwin") &&
+                environment.cpu.model.toLowerCase().includes("apple")
+                  ? "env-chip-success"
+                  : "env-chip-warning"
+              }">
+                ${
+                  environment.os.includes("darwin") &&
+                  environment.cpu.model.toLowerCase().includes("apple")
+                    ? "Apple Silicon"
+                    : environment.cpu.model.toLowerCase().includes("arm") ||
+                      environment.cpu.model.toLowerCase().includes("aarch64")
+                    ? "ARM-based"
+                    : "x86/Other"
+                }
+              </span>
+            </span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Memory per Core</span>
+            <span class="env-detail-value">${
+              environment.cpu.cores > 0
+                ? (
+                    parseFloat(environment.memory) / environment.cpu.cores
+                  ).toFixed(2) + " GB"
+                : "N/A"
+            }</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Run Context</span>
+            <span class="env-detail-value">CI/Local Test</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
 function generateTestHistoryContent(trendData) {
   if (
     !trendData ||
@@ -730,7 +1110,7 @@ function generateTestHistoryContent(trendData) {
                 </span>
               </div>
               <div class="test-history-trend">
-                ${generateTestHistoryChart(test.history)}
+                ${generateTestHistoryChart(test.history)} 
               </div>
               <details class="test-history-details-collapsible">
                 <summary>Show Run Details (${test.history.length})</summary>
@@ -764,7 +1144,6 @@ function generateTestHistoryContent(trendData) {
     </div>
   `;
 }
-
 function getStatusClass(status) {
   switch (String(status).toLowerCase()) {
     case "passed":
@@ -777,7 +1156,6 @@ function getStatusClass(status) {
       return "status-unknown";
   }
 }
-
 function getStatusIcon(status) {
   switch (String(status).toLowerCase()) {
     case "passed":
@@ -790,7 +1168,6 @@ function getStatusIcon(status) {
       return "❓";
   }
 }
-
 function getSuitesData(results) {
   const suitesMap = new Map();
   if (!results || results.length === 0) return [];
@@ -833,19 +1210,12 @@ function getSuitesData(results) {
     if (currentStatus && suite[currentStatus] !== undefined) {
       suite[currentStatus]++;
     }
-
-    if (currentStatus === "failed") {
-      suite.statusOverall = "failed";
-    } else if (
-      currentStatus === "skipped" &&
-      suite.statusOverall !== "failed"
-    ) {
+    if (currentStatus === "failed") suite.statusOverall = "failed";
+    else if (currentStatus === "skipped" && suite.statusOverall !== "failed")
       suite.statusOverall = "skipped";
-    }
   });
   return Array.from(suitesMap.values());
 }
-
 function generateSuitesWidget(suitesData) {
   if (!suitesData || suitesData.length === 0) {
     return `<div class="suites-widget"><div class="suites-header"><h2>Test Suites</h2></div><div class="no-data">No suite data available.</div></div>`;
@@ -854,12 +1224,12 @@ function generateSuitesWidget(suitesData) {
 <div class="suites-widget">
   <div class="suites-header">
     <h2>Test Suites</h2>
-    <span class="summary-badge">
-      ${suitesData.length} suites • ${suitesData.reduce(
+    <span class="summary-badge">${
+      suitesData.length
+    } suites • ${suitesData.reduce(
     (sum, suite) => sum + suite.count,
     0
-  )} tests
-    </span>
+  )} tests</span>
   </div>
   <div class="suites-grid">
     ${suitesData
@@ -870,8 +1240,10 @@ function generateSuitesWidget(suitesData) {
         <h3 class="suite-name" title="${sanitizeHTML(
           suite.name
         )} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(suite.name)}</h3>
-        <span class="browser-tag">${sanitizeHTML(suite.browser)}</span>
       </div>
+      <div>🖥️ <span class="browser-tag">${sanitizeHTML(
+        suite.browser
+      )}</span></div>
       <div class="suite-card-body">
         <span class="test-count">${suite.count} test${
           suite.count !== 1 ? "s" : ""
@@ -900,7 +1272,6 @@ function generateSuitesWidget(suitesData) {
   </div>
 </div>`;
 }
-
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -912,8 +1283,7 @@ function generateHTML(reportData, trendData = null) {
     duration: 0,
     timestamp: new Date().toISOString(),
   };
-
-  const totalTestsOr1 = runSummary.totalTests || 1; // Avoid division by zero
+  const totalTestsOr1 = runSummary.totalTests || 1;
   const passPercentage = Math.round((runSummary.passed / totalTestsOr1) * 100);
   const failPercentage = Math.round((runSummary.failed / totalTestsOr1) * 100);
   const skipPercentage = Math.round(
@@ -925,17 +1295,14 @@ function generateHTML(reportData, trendData = null) {
       : "0.0s";
 
   function generateTestCasesHTML() {
-    if (!results || results.length === 0) {
+    if (!results || results.length === 0)
       return '<div class="no-tests">No test results found in this run.</div>';
-    }
-
     return results
-      .map((test, index) => {
+      .map((test) => {
         const browser = test.browser || "unknown";
         const testFileParts = test.name.split(" > ");
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
-
         const generateStepsHTML = (steps, depth = 0) => {
           if (!steps || steps.length === 0)
             return "<div class='no-steps'>No steps recorded for this test.</div>";
@@ -947,258 +1314,245 @@ function generateHTML(reportData, trendData = null) {
                 ? `step-hook step-hook-${step.hookType}`
                 : "";
               const hookIndicator = isHook ? ` (${step.hookType} hook)` : "";
-
-              return `
-          <div class="step-item" style="--depth: ${depth};">
-            <div class="step-header ${stepClass}" role="button" aria-expanded="false">
-              <span class="step-icon">${getStatusIcon(step.status)}</span>
-              <span class="step-title">${sanitizeHTML(
+              return `<div class="step-item" style="--depth: ${depth};"><div class="step-header ${stepClass}" role="button" aria-expanded="false"><span class="step-icon">${getStatusIcon(
+                step.status
+              )}</span><span class="step-title">${sanitizeHTML(
                 step.title
-              )}${hookIndicator}</span>
-              <span class="step-duration">${formatDuration(
+              )}${hookIndicator}</span><span class="step-duration">${formatDuration(
                 step.duration
-              )}</span>
-            </div>
-            <div class="step-details" style="display: none;">
-              ${
+              )}</span></div><div class="step-details" style="display: none;">${
                 step.codeLocation
                   ? `<div class="step-info"><strong>Location:</strong> ${sanitizeHTML(
                       step.codeLocation
                     )}</div>`
                   : ""
-              }
-              ${
+              }${
                 step.errorMessage
-                  ? `
-                <div class="step-error">
-                  ${
-                    step.stackTrace
-                      ? `<pre class="stack-trace">${sanitizeHTML(
-                          step.stackTrace
-                        )}</pre>`
-                      : ""
-                  }
-                </div>`
+                  ? `<div class="step-error">${
+                      step.stackTrace
+                        ? `<div class="stack-trace">${formatPlaywrightError(
+                            step.stackTrace
+                          )}</div>`
+                        : ""
+                    }<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
                   : ""
-              }
-              ${
+              }${
                 hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
                       step.steps,
                       depth + 1
                     )}</div>`
                   : ""
-              }
-            </div>
-          </div>`;
+              }</div></div>`;
             })
             .join("");
         };
-
-        return `
-      <div class="test-case" data-status="${
-        test.status
-      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
+        return `<div class="test-case" data-status="${
+          test.status
+        }" data-browser="${sanitizeHTML(browser)}" data-tags="${(
+          test.tags || []
+        )
           .join(",")
           .toLowerCase()}">
-        <div class="test-case-header" role="button" aria-expanded="false">
-          <div class="test-case-summary">
-            <span class="status-badge ${getStatusClass(test.status)}">${String(
+                    <div class="test-case-header" role="button" aria-expanded="false"><div class="test-case-summary"><span class="status-badge ${getStatusClass(
+                      test.status
+                    )}">${String(
           test.status
-        ).toUpperCase()}</span>
-            <span class="test-case-title" title="${sanitizeHTML(
-              test.name
-            )}">${sanitizeHTML(testTitle)}</span>
-            <span class="test-case-browser">(${sanitizeHTML(browser)})</span>
-          </div>
-          <div class="test-case-meta">
-            ${
-              test.tags && test.tags.length > 0
-                ? test.tags
-                    .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
-                    .join(" ")
-                : ""
-            }
-            <span class="test-duration">${formatDuration(test.duration)}</span>
-          </div>
-        </div>
-        <div class="test-case-content" style="display: none;">
-          <p><strong>Full Path:</strong> ${sanitizeHTML(test.name)}</p>
-          ${
-            test.error
-              ? `<div class="test-error-summary">
-  ${formatPlaywrightError(test.error)}
-</div>`
-              : ""
-          }
-
-          <h4>Steps</h4>
-          <div class="steps-list">${generateStepsHTML(test.steps)}</div>
-
-          ${
-            test.stdout && test.stdout.length > 0
-              ? `
-            <div class="console-output-section">
-              <h4>Console Output (stdout)</h4>
-              <pre class="console-log stdout-log" style="background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${test.stdout
-                .map((line) => sanitizeHTML(line))
-                .join("\n")}</pre>
-            </div>`
-              : ""
-          }
-          ${
-            test.stderr && test.stderr.length > 0
-              ? `
-            <div class="console-output-section">
-              <h4>Console Output (stderr)</h4>
-              <pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${test.stderr
-                .map((line) => sanitizeHTML(line))
-                .join("\n")}</pre>
-            </div>`
-              : ""
-          }
-          
-                    ${
-                      test.screenshots && test.screenshots.length > 0
-                        ? `
-            <div class="attachments-section">
-              <h4>Screenshots</h4>
-              <div class="attachments-grid">
-                ${test.screenshots
-                  .map(
-                    (screenshot) => `
-                  <div class="attachment-item">
-                    <img src="${screenshot}" alt="Screenshot">
-                    <div class="attachment-info">
-                    <div class="trace-actions">
-                      <a href="${screenshot}" target="_blank">View Full Size</a></div>
+        ).toUpperCase()}</span><span class="test-case-title" title="${sanitizeHTML(
+          test.name
+        )}">${sanitizeHTML(
+          testTitle
+        )}</span><span class="test-case-browser">(${sanitizeHTML(
+          browser
+        )})</span></div><div class="test-case-meta">${
+          test.tags && test.tags.length > 0
+            ? test.tags
+                .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
+                .join(" ")
+            : ""
+        }<span class="test-duration">${formatDuration(
+          test.duration
+        )}</span></div></div>
+                    <div class="test-case-content" style="display: none;">
+                        <p><strong>Full Path:</strong> ${sanitizeHTML(
+                          test.name
+                        )}</p>
+                        <p><strong>Test run Worker ID:</strong> ${sanitizeHTML(
+                          test.workerId
+                        )} [<strong>Total No. of Workers:</strong> ${sanitizeHTML(
+          test.totalWorkers
+        )}]</p>
+                        ${
+                          test.errorMessage
+                            ? `<div class="test-error-summary">${formatPlaywrightError(
+                                test.errorMessage
+                              )}<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
+                            : ""
+                        }
+                        <h4>Steps</h4><div class="steps-list">${generateStepsHTML(
+                          test.steps
+                        )}</div>
+                        ${
+                          test.stdout && test.stdout.length > 0
+                            ? `<div class="console-output-section"><h4>Console Output (stdout)</h4><pre class="console-log stdout-log">${formatPlaywrightError(
+                                test.stdout.join("\\n")
+                              )}</pre></div>`
+                            : ""
+                        }
+                        ${
+                          test.stderr && test.stderr.length > 0
+                            ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log">${test.stderr
+                                .map((line) => sanitizeHTML(line))
+                                .join("\\n")}</pre></div>`
+                            : ""
+                        }
+                        
+                        ${(() => {
+                          if (
+                            !test.screenshots ||
+                            test.screenshots.length === 0
+                          )
+                            return "";
+                          return `<div class="attachments-section"><h4>Screenshots</h4><div class="attachments-grid">${test.screenshots
+                            .map((screenshotPath, index) => {
+                              try {
+                                const imagePath = path.resolve(
+                                  DEFAULT_OUTPUT_DIR,
+                                  screenshotPath
+                                );
+                                if (!fsExistsSync(imagePath))
+                                  return `<div class="attachment-item error">Screenshot not found: ${sanitizeHTML(
+                                    screenshotPath
+                                  )}</div>`;
+                                const base64ImageData =
+                                  readFileSync(imagePath).toString("base64");
+                                return `<div class="attachment-item"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="data:image/png;base64,${base64ImageData}" alt="Screenshot ${
+                                  index + 1
+                                }" class="lazy-load-image"><div class="attachment-info"><div class="trace-actions"><a href="data:image/png;base64,${base64ImageData}" target="_blank" download="screenshot-${index}.png">Download</a></div></div></div>`;
+                              } catch (e) {
+                                return `<div class="attachment-item error">Failed to load screenshot: ${sanitizeHTML(
+                                  screenshotPath
+                                )}</div>`;
+                              }
+                            })
+                            .join("")}</div></div>`;
+                        })()}
+
+                        ${(() => {
+                          if (!test.videoPath || test.videoPath.length === 0)
+                            return "";
+                          return `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
+                            .map((videoPath, index) => {
+                              try {
+                                const videoFilePath = path.resolve(
+                                  DEFAULT_OUTPUT_DIR,
+                                  videoPath
+                                );
+                                if (!fsExistsSync(videoFilePath))
+                                  return `<div class="attachment-item error">Video not found: ${sanitizeHTML(
+                                    videoPath
+                                  )}</div>`;
+                                const videoBase64 =
+                                  readFileSync(videoFilePath).toString(
+                                    "base64"
+                                  );
+                                const fileExtension = path
+                                  .extname(videoPath)
+                                  .slice(1)
+                                  .toLowerCase();
+                                const mimeType =
+                                  {
+                                    mp4: "video/mp4",
+                                    webm: "video/webm",
+                                    ogg: "video/ogg",
+                                    mov: "video/quicktime",
+                                    avi: "video/x-msvideo",
+                                  }[fileExtension] || "video/mp4";
+                                const videoDataUri = `data:${mimeType};base64,${videoBase64}`;
+                                return `<div class="attachment-item video-item"><video controls preload="none" class="lazy-load-video"><source data-src="${videoDataUri}" type="${mimeType}"></video><div class="attachment-info"><div class="trace-actions"><a href="${videoDataUri}" target="_blank" download="video-${index}.${fileExtension}">Download</a></div></div></div>`;
+                              } catch (e) {
+                                return `<div class="attachment-item error">Failed to load video: ${sanitizeHTML(
+                                  videoPath
+                                )}</div>`;
+                              }
+                            })
+                            .join("")}</div></div>`;
+                        })()}
+
+                        ${(() => {
+                          if (!test.tracePath) return "";
+                          try {
+                            const traceFilePath = path.resolve(
+                              DEFAULT_OUTPUT_DIR,
+                              test.tracePath
+                            );
+                            if (!fsExistsSync(traceFilePath))
+                              return `<div class="attachments-section"><h4>Trace File</h4><div class="attachment-item error">Trace file not found: ${sanitizeHTML(
+                                test.tracePath
+                              )}</div></div>`;
+                            const traceBase64 =
+                              readFileSync(traceFilePath).toString("base64");
+                            const traceDataUri = `data:application/zip;base64,${traceBase64}`;
+                            return `<div class="attachments-section"><h4>Trace File</h4><div class="attachments-grid"><div class="attachment-item generic-attachment"><div class="attachment-icon">📄</div><div class="attachment-caption"><span class="attachment-name">trace.zip</span></div><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="${traceDataUri}" class="lazy-load-attachment" download="trace.zip">Download Trace</a></div></div></div></div></div>`;
+                          } catch (e) {
+                            return `<div class="attachments-section"><h4>Trace File</h4><div class="attachment-item error">Failed to load trace file.</div></div>`;
+                          }
+                        })()}
+                        
+                        ${(() => {
+                          if (
+                            !test.attachments ||
+                            test.attachments.length === 0
+                          )
+                            return "";
+                          return `<div class="attachments-section"><h4>Other Attachments</h4><div class="attachments-grid">${test.attachments
+                            .map((attachment) => {
+                              try {
+                                const attachmentPath = path.resolve(
+                                  DEFAULT_OUTPUT_DIR,
+                                  attachment.path
+                                );
+                                if (!fsExistsSync(attachmentPath))
+                                  return `<div class="attachment-item error">Attachment not found: ${sanitizeHTML(
+                                    attachment.name
+                                  )}</div>`;
+                                const attachmentBase64 =
+                                  readFileSync(attachmentPath).toString(
+                                    "base64"
+                                  );
+                                const attachmentDataUri = `data:${attachment.contentType};base64,${attachmentBase64}`;
+                                return `<div class="attachment-item generic-attachment"><div class="attachment-icon">${getAttachmentIcon(
+                                  attachment.contentType
+                                )}</div><div class="attachment-caption"><span class="attachment-name" title="${sanitizeHTML(
+                                  attachment.name
+                                )}">${sanitizeHTML(
+                                  attachment.name
+                                )}</span><span class="attachment-type">${sanitizeHTML(
+                                  attachment.contentType
+                                )}</span></div><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="${attachmentDataUri}" class="lazy-load-attachment" download="${sanitizeHTML(
+                                  attachment.name
+                                )}">Download</a></div></div></div>`;
+                              } catch (e) {
+                                return `<div class="attachment-item error">Failed to load attachment: ${sanitizeHTML(
+                                  attachment.name
+                                )}</div>`;
+                              }
+                            })
+                            .join("")}</div></div>`;
+                        })()}
+                        
+                        ${
+                          test.codeSnippet
+                            ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${sanitizeHTML(
+                                test.codeSnippet
+                              )}</code></pre></div>`
+                            : ""
+                        }
                     </div>
-                  </div>
-                `
-                  )
-                  .join("")}
-              </div>
-            </div>
-          `
-                        : ""
-                    }
-            
-          ${
-            test.videoPath
-              ? `
-            <div class="attachments-section">
-              <h4>Videos</h4>
-              <div class="attachments-grid">
-                ${(() => {
-                  // Handle both string and array cases
-                  const videos = Array.isArray(test.videoPath)
-                    ? test.videoPath
-                    : [test.videoPath];
-                  const mimeTypes = {
-                    mp4: "video/mp4",
-                    webm: "video/webm",
-                    ogg: "video/ogg",
-                    mov: "video/quicktime",
-                    avi: "video/x-msvideo",
-                  };
-
-                  return videos
-                    .map((video, index) => {
-                      const videoUrl =
-                        typeof video === "object" ? video.url || "" : video;
-                      const videoName =
-                        typeof video === "object"
-                          ? video.name || `Video ${index + 1}`
-                          : `Video ${index + 1}`;
-                      const fileExtension = videoUrl
-                        .split(".")
-                        .pop()
-                        .toLowerCase();
-                      const mimeType = mimeTypes[fileExtension] || "video/mp4";
-
-                      return `
-                      <div class="attachment-item">
-                        <video controls width="100%" height="auto" title="${videoName}">
-                          <source src="${videoUrl}" type="${mimeType}">
-                          Your browser does not support the video tag.
-                        </video>
-                        <div class="attachment-info">
-                          <div class="trace-actions">
-                          <a href="${videoUrl}" target="_blank" download="${videoName}.${fileExtension}">
-                            Download
-                          </a>
-                          </div>
-                        </div>
-                      </div>
-                    `;
-                    })
-                    .join("");
-                })()}
-              </div>
-            </div>
-          `
-              : ""
-          }
-          
-          ${
-            test.tracePath
-              ? `
-  <div class="attachments-section">
-    <h4>Trace Files</h4>
-    <div class="attachments-grid">
-      ${(() => {
-        // Handle both string and array cases
-        const traces = Array.isArray(test.tracePath)
-          ? test.tracePath
-          : [test.tracePath];
-
-        return traces
-          .map((trace, index) => {
-            const traceUrl =
-              typeof trace === "object" ? trace.url || "" : trace;
-            const traceName =
-              typeof trace === "object"
-                ? trace.name || `Trace ${index + 1}`
-                : `Trace ${index + 1}`;
-            const traceFileName = traceUrl.split("/").pop();
-
-            return `
-            <div class="attachment-item">
-              <div class="trace-preview">
-                <span class="trace-icon">📄</span>
-                <span class="trace-name">${traceName}</span>
-              </div>
-              <div class="attachment-info">
-                <div class="trace-actions">
-                  <a href="${traceUrl}" target="_blank" download="${traceFileName}" class="download-trace">
-                    Download
-                  </a>
-                </div>
-              </div>
-            </div>
-          `;
-          })
-          .join("");
-      })()}
-    </div>
-  </div>
-`
-              : ""
-          }
-
-          ${
-            test.codeSnippet
-              ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${sanitizeHTML(
-                  test.codeSnippet
-                )}</code></pre></div>`
-              : ""
-          }
-        </div>
-      </div>`;
+                </div>`;
       })
       .join("");
   }
-
   return `
 <!DOCTYPE html>
 <html lang="en">
@@ -1207,94 +1561,43 @@ function generateHTML(reportData, trendData = null) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
     <link rel="apple-touch-icon" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
-    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/highcharts.js" defer></script>
     <title>Playwright Pulse Report</title>
     <style>
-        :root {
-          --primary-color: #3f51b5; /* Indigo */
-          --secondary-color: #ff4081; /* Pink */
-          --accent-color: #673ab7; /* Deep Purple */
-          --accent-color-alt: #FF9800; /* Orange for duration charts */
-          --success-color: #4CAF50; /* Green */
-          --danger-color: #F44336; /* Red */
-          --warning-color: #FFC107; /* Amber */
-          --info-color: #2196F3; /* Blue */
-          --light-gray-color: #f5f5f5;
-          --medium-gray-color: #e0e0e0;
-          --dark-gray-color: #757575;
-          --text-color: #333;
-          --text-color-secondary: #555;
-          --border-color: #ddd;
-          --background-color: #f8f9fa; 
-          --card-background-color: #fff;
-          --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-          --border-radius: 8px;
-          --box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
-          --box-shadow-light: 0 3px 8px rgba(0,0,0,0.05);
-          --box-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.07);
+        :root { 
+          --primary-color: #3f51b5; --secondary-color: #ff4081; --accent-color: #673ab7; --accent-color-alt: #FF9800;
+          --success-color: #4CAF50; --danger-color: #F44336; --warning-color: #FFC107; --info-color: #2196F3;
+          --light-gray-color: #f5f5f5; --medium-gray-color: #e0e0e0; --dark-gray-color: #757575;
+          --text-color: #333; --text-color-secondary: #555; --border-color: #ddd; --background-color: #f8f9fa;
+          --card-background-color: #fff; --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+          --border-radius: 8px; --box-shadow: 0 5px 15px rgba(0,0,0,0.08); --box-shadow-light: 0 3px 8px rgba(0,0,0,0.05); --box-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.07);
         }
-
+        .trend-chart-container, .test-history-trend div[id^="testHistoryChart-"] { min-height: 100px; }
+        .lazy-load-chart .no-data, .lazy-load-chart .no-data-chart { display: flex; align-items: center; justify-content: center; height: 100%; font-style: italic; color: var(--dark-gray-color); }
+        
         /* General Highcharts styling */
         .highcharts-background { fill: transparent; }
         .highcharts-title, .highcharts-subtitle { font-family: var(--font-family); }
         .highcharts-axis-labels text, .highcharts-legend-item text { fill: var(--text-color-secondary) !important; font-size: 12px !important; }
         .highcharts-axis-title { fill: var(--text-color) !important; }
         .highcharts-tooltip > span { background-color: rgba(10,10,10,0.92) !important; border-color: rgba(10,10,10,0.92) !important; color: #f5f5f5 !important; padding: 10px !important; border-radius: 6px !important; }
-        
-        body {
-          font-family: var(--font-family);
-          margin: 0;
-          background-color: var(--background-color);
-          color: var(--text-color);
-          line-height: 1.65; 
-          font-size: 16px;
-        }
-        
-        .container {
-          max-width: 1600px; 
-          padding: 30px; 
-          border-radius: var(--border-radius);
-          box-shadow: var(--box-shadow);
-          background: repeating-linear-gradient(#f1f8e9, #f9fbe7, #fce4ec);
-        }
-        
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          flex-wrap: wrap;
-          padding-bottom: 25px;
-          border-bottom: 1px solid var(--border-color);
-          margin-bottom: 25px;
-        }
+        body { font-family: var(--font-family); margin: 0; background-color: var(--background-color); color: var(--text-color); line-height: 1.65; font-size: 16px; }
+        .container { padding: 30px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); background: repeating-linear-gradient(#f1f8e9, #f9fbe7, #fce4ec); }
+        .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
         .header-title { display: flex; align-items: center; gap: 15px; }
         .header h1 { margin: 0; font-size: 1.85em; font-weight: 600; color: var(--primary-color); }
         #report-logo { height: 40px; width: 40px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
         .run-info { font-size: 0.9em; text-align: right; color: var(--text-color-secondary); line-height:1.5;}
         .run-info strong { color: var(--text-color); }
-        
         .tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 30px; overflow-x: auto; }
-        .tab-button {
-          padding: 15px 25px; background: none; border: none; border-bottom: 3px solid transparent;
-          cursor: pointer; font-size: 1.1em; font-weight: 600; color: black;
-          transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap;
-        }
+        .tab-button { padding: 15px 25px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 1.1em; font-weight: 600; color: black; transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
         .tab-button:hover { color: var(--accent-color); }
         .tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
         .tab-content { display: none; animation: fadeIn 0.4s ease-out; }
         .tab-content.active { display: block; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-
-        .dashboard-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); 
-          gap: 22px; margin-bottom: 35px;
-        }
-        .summary-card {
-          background-color: var(--card-background-color); border: 1px solid var(--border-color);
-          border-radius: var(--border-radius); padding: 22px; text-align: center;
-          box-shadow: var(--box-shadow-light); transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
+        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin-bottom: 35px; }
+        .summary-card { background-color: var(--card-background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 22px; text-align: center; box-shadow: var(--box-shadow-light); transition: transform 0.2s ease, box-shadow 0.2s ease; }
         .summary-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow); }
         .summary-card h3 { margin: 0 0 10px; font-size: 1.05em; font-weight: 500; color: var(--text-color-secondary); }
         .summary-card .value { font-size: 2.4em; font-weight: 600; margin-bottom: 8px; }
@@ -1302,43 +1605,19 @@ function generateHTML(reportData, trendData = null) {
         .status-passed .value, .stat-passed svg { color: var(--success-color); }
         .status-failed .value, .stat-failed svg { color: var(--danger-color); }
         .status-skipped .value, .stat-skipped svg { color: var(--warning-color); }
-        
-        .dashboard-bottom-row {
-            display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
-            gap: 28px; align-items: stretch; 
-        }
-        .pie-chart-wrapper, .suites-widget, .trend-chart {
-            background-color: var(--card-background-color); padding: 28px; 
-            border-radius: var(--border-radius); box-shadow: var(--box-shadow-light);
-            display: flex; flex-direction: column; 
-        }
-
-        .pie-chart-wrapper h3, .suites-header h2, .trend-chart h3 { 
-            text-align: center; margin-top: 0; margin-bottom: 25px; 
-            font-size: 1.25em; font-weight: 600; color: var(--text-color);
-        }
-         .trend-chart-container, .pie-chart-wrapper div[id^="pieChart-"] { /* For Highcharts containers */
-            flex-grow: 1;
-            min-height: 250px; /* Ensure charts have some min height */
-        }
-        
-        .chart-tooltip { /* This class was for D3, Highcharts has its own tooltip styling via JS/SVG */
-          /* Basic styling for Highcharts HTML tooltips can be done via .highcharts-tooltip span */
-        }
+        .dashboard-bottom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 28px; align-items: stretch; }
+        .pie-chart-wrapper, .suites-widget, .trend-chart { background-color: var(--card-background-color); padding: 28px; border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); display: flex; flex-direction: column; }
+        .pie-chart-wrapper h3, .suites-header h2, .trend-chart h3 { text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.25em; font-weight: 600; color: var(--text-color); }
+        .trend-chart-container, .pie-chart-wrapper div[id^="pieChart-"] { flex-grow: 1; min-height: 250px; }
         .status-badge-small-tooltip { padding: 2px 5px; border-radius: 3px; font-size: 0.9em; font-weight: 600; color: white; text-transform: uppercase; }
         .status-badge-small-tooltip.status-passed { background-color: var(--success-color); }
         .status-badge-small-tooltip.status-failed { background-color: var(--danger-color); }
         .status-badge-small-tooltip.status-skipped { background-color: var(--warning-color); }
         .status-badge-small-tooltip.status-unknown { background-color: var(--dark-gray-color); }
-        
         .suites-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
         .summary-badge { background-color: var(--light-gray-color); color: var(--text-color-secondary); padding: 7px 14px; border-radius: 16px; font-size: 0.9em; }
         .suites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
-        .suite-card {
-          border: 1px solid var(--border-color); border-left-width: 5px;
-          border-radius: calc(var(--border-radius) / 1.5); padding: 20px;
-          background-color: var(--card-background-color); transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
-        }
+        .suite-card { border: 1px solid var(--border-color); border-left-width: 5px; border-radius: calc(var(--border-radius) / 1.5); padding: 20px; background-color: var(--card-background-color); transition: box-shadow 0.2s ease, border-left-color 0.2s ease; }
         .suite-card:hover { box-shadow: var(--box-shadow); }
         .suite-card.status-passed { border-left-color: var(--success-color); }
         .suite-card.status-failed { border-left-color: var(--danger-color); }
@@ -1350,67 +1629,36 @@ function generateHTML(reportData, trendData = null) {
         .suite-stats { display: flex; gap: 14px; font-size: 0.95em; align-items: center; }
         .suite-stats span { display: flex; align-items: center; gap: 6px; }
         .suite-stats svg { vertical-align: middle; font-size: 1.15em; }
-
-        .filters {
-          display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px;
-          padding: 20px; background-color: var(--light-gray-color); border-radius: var(--border-radius);
-          box-shadow: var(--box-shadow-inset); border-color: black; border-style: groove;
-        }
-        .filters input, .filters select, .filters button {
-          padding: 11px 15px; border: 1px solid var(--border-color);
-          border-radius: 6px; font-size: 1em;
-        }
+        .filters { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; padding: 20px; background-color: var(--light-gray-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-inset); border-color: black; border-style: groove; }
+        .filters input, .filters select, .filters button { padding: 11px 15px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1em; }
         .filters input { flex-grow: 1; min-width: 240px;}
         .filters select {min-width: 180px;}
         .filters button { background-color: var(--primary-color); color: white; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; border: none; }
         .filters button:hover { background-color: var(--accent-color); box-shadow: 0 2px 5px rgba(0,0,0,0.15);}
-
-        .test-case {
-          margin-bottom: 15px; border: 1px solid var(--border-color);
-          border-radius: var(--border-radius); background-color: var(--card-background-color);
-          box-shadow: var(--box-shadow-light); overflow: hidden; 
-        }
-        .test-case-header {
-          padding: 10px 15px; background-color: #fff; cursor: pointer;
-          display: flex; justify-content: space-between; align-items: center;
-          border-bottom: 1px solid transparent; 
-          transition: background-color 0.2s ease;
-        }
+        .test-case { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--card-background-color); box-shadow: var(--box-shadow-light); overflow: hidden; }
+        .test-case-header { padding: 10px 15px; background-color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid transparent; transition: background-color 0.2s ease; }
         .test-case-header:hover { background-color: #f4f6f8; } 
         .test-case-header[aria-expanded="true"] { border-bottom-color: var(--border-color); background-color: #f9fafb; }
-        
         .test-case-summary { display: flex; align-items: center; gap: 14px; flex-grow: 1; flex-wrap: wrap;}
         .test-case-title { font-weight: 600; color: var(--text-color); font-size: 1em; }
         .test-case-browser { font-size: 0.9em; color: var(--text-color-secondary); }
         .test-case-meta { display: flex; align-items: center; gap: 12px; font-size: 0.9em; color: var(--text-color-secondary); flex-shrink: 0; }
         .test-duration { background-color: var(--light-gray-color); padding: 4px 10px; border-radius: 12px; font-size: 0.9em;}
-        
-        .status-badge {
-          padding: 5px; border-radius: 6px; font-size: 0.8em; font-weight: 600; color: white; text-transform: uppercase;
-          min-width: 70px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
+        .status-badge { padding: 5px; border-radius: 6px; font-size: 0.8em; font-weight: 600; color: white; text-transform: uppercase; min-width: 70px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
         .status-badge.status-passed { background-color: var(--success-color); }
         .status-badge.status-failed { background-color: var(--danger-color); }
         .status-badge.status-skipped { background-color: var(--warning-color); }
         .status-badge.status-unknown { background-color: var(--dark-gray-color); }
-        
         .tag { display: inline-block; background: linear-gradient( #fff, #333, #000); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 0.85em; margin-right: 6px; font-weight: 400; }
-        
         .test-case-content { display: none; padding: 20px; border-top: 1px solid var(--border-color); background-color: #fcfdff; }
         .test-case-content h4 { margin-top: 22px; margin-bottom: 14px; font-size: 1.15em; color: var(--primary-color); }
         .test-case-content p { margin-bottom: 10px; font-size: 1em; }
         .test-error-summary { margin-bottom: 20px; padding: 14px; background-color: rgba(244,67,54,0.05); border: 1px solid rgba(244,67,54,0.2); border-left: 4px solid var(--danger-color); border-radius: 4px; }
         .test-error-summary h4 { color: var(--danger-color); margin-top:0;}
         .test-error-summary pre { white-space: pre-wrap; word-break: break-all; color: var(--danger-color); font-size: 0.95em;}
-
         .steps-list { margin: 18px 0; }
         .step-item { margin-bottom: 8px; padding-left: calc(var(--depth, 0) * 28px); } 
-        .step-header {
-          display: flex; align-items: center; cursor: pointer;
-          padding: 10px 14px; border-radius: 6px; background-color: #fff;
-          border: 1px solid var(--light-gray-color); 
-          transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
-        }
+        .step-header { display: flex; align-items: center; cursor: pointer; padding: 10px 14px; border-radius: 6px; background-color: #fff; border: 1px solid var(--light-gray-color); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
         .step-header:hover { background-color: #f0f2f5; border-color: var(--medium-gray-color); box-shadow: var(--box-shadow-inset); }
         .step-icon { margin-right: 12px; width: 20px; text-align: center; font-size: 1.1em; }
         .step-title { flex: 1; font-size: 1em; }
@@ -1422,176 +1670,62 @@ function generateHTML(reportData, trendData = null) {
         .step-hook { background-color: rgba(33,150,243,0.04); border-left: 3px solid var(--info-color) !important; } 
         .step-hook .step-title { font-style: italic; color: var(--info-color)}
         .nested-steps { margin-top: 12px; }
-
         .attachments-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--light-gray-color); }
         .attachments-section h4 { margin-top: 0; margin-bottom: 20px; font-size: 1.1em; color: var(--text-color); }
         .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
-        .attachment-item {
-          border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #fff;
-          box-shadow: var(--box-shadow-light); overflow: hidden; display: flex; flex-direction: column;
-          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-        }
+        .attachment-item { border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #fff; box-shadow: var(--box-shadow-light); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
         .attachment-item:hover { transform: translateY(-4px); box-shadow: var(--box-shadow); }
-        .attachment-item img {
-          width: 100%; height: 180px; object-fit: cover; display: block;
-          border-bottom: 1px solid var(--border-color); transition: opacity 0.3s ease;
-        }
+        .attachment-item img, .attachment-item video { width: 100%; height: 180px; object-fit: cover; display: block; background-color: #eee; border-bottom: 1px solid var(--border-color); transition: opacity 0.3s ease; }
+        .attachment-info { padding: 12px; margin-top: auto; background-color: #fafafa;}
         .attachment-item a:hover img { opacity: 0.85; }
-        .attachment-caption {
-          padding: 12px 15px; font-size: 0.9em; text-align: center;
-          color: var(--text-color-secondary); word-break: break-word; background-color: var(--light-gray-color);
-        }
+        .attachment-caption { padding: 12px 15px; font-size: 0.9em; text-align: center; color: var(--text-color-secondary); word-break: break-word; background-color: var(--light-gray-color); }
         .video-item a, .trace-item a { display: block; margin-bottom: 8px; color: var(--primary-color); text-decoration: none; font-weight: 500; }
         .video-item a:hover, .trace-item a:hover { text-decoration: underline; }
         .code-section pre { background-color: #2d2d2d; color: #f0f0f0; padding: 20px; border-radius: 6px; overflow-x: auto; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 0.95em; line-height:1.6;}
-
         .trend-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 28px; margin-bottom: 35px; }
-        /* Removed D3 specific .chart-axis, .main-chart-title, .chart-line.* rules */
-        /* Highcharts styles its elements with classes like .highcharts-axis, .highcharts-title etc. */
-        
         .test-history-container h2.tab-main-title { font-size: 1.6em; margin-bottom: 18px; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 12px;}
         .test-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 22px; margin-top: 22px; }
-        .test-history-card {
-            background: var(--card-background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius);
-            padding: 22px; box-shadow: var(--box-shadow-light); display: flex; flex-direction: column;
-        }
+        .test-history-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 22px; box-shadow: var(--box-shadow-light); display: flex; flex-direction: column; }
         .test-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--light-gray-color); }
-        .test-history-header h3 { margin: 0; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .test-history-header p { font-weight: 500 }
+        .test-history-header h3 { margin: 0; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* This was h3, changed to p for consistency with user file */
+        .test-history-header p { font-weight: 500 } /* Added this */
         .test-history-trend { margin-bottom: 20px; min-height: 110px; }
-        .test-history-trend div[id^="testHistoryChart-"] { /* Highcharts container for history */
-            display: block; margin: 0 auto; max-width:100%; height: 100px; width: 320px; /* Match JS config */
-        }
-        /* .test-history-trend .small-axis text {font-size: 11px;} Removed D3 specific */
+        .test-history-trend div[id^="testHistoryChart-"] { display: block; margin: 0 auto; max-width:100%; height: 100px; width: 320px; }
         .test-history-details-collapsible summary { cursor: pointer; font-size: 1em; color: var(--primary-color); margin-bottom: 10px; font-weight:500; }
         .test-history-details-collapsible summary:hover {text-decoration: underline;}
         .test-history-details table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
         .test-history-details th, .test-history-details td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--light-gray-color); }
         .test-history-details th { background-color: var(--light-gray-color); font-weight: 600; }
-        .status-badge-small { 
-            padding: 3px 7px; border-radius: 4px; font-size: 0.8em; font-weight: 600; 
-            color: white; text-transform: uppercase; display: inline-block;
-        }
+        .status-badge-small { padding: 3px 7px; border-radius: 4px; font-size: 0.8em; font-weight: 600; color: white; text-transform: uppercase; display: inline-block; }
         .status-badge-small.status-passed { background-color: var(--success-color); }
         .status-badge-small.status-failed { background-color: var(--danger-color); }
         .status-badge-small.status-skipped { background-color: var(--warning-color); }
         .status-badge-small.status-unknown { background-color: var(--dark-gray-color); }
-
-        .no-data, .no-tests, .no-steps, .no-data-chart { 
-          padding: 28px; text-align: center; color: var(--dark-gray-color); font-style: italic; font-size:1.1em;
-          background-color: var(--light-gray-color); border-radius: var(--border-radius); margin: 18px 0;
-          border: 1px dashed var(--medium-gray-color);
-        }
+        .no-data, .no-tests, .no-steps, .no-data-chart { padding: 28px; text-align: center; color: var(--dark-gray-color); font-style: italic; font-size:1.1em; background-color: var(--light-gray-color); border-radius: var(--border-radius); margin: 18px 0; border: 1px dashed var(--medium-gray-color); }
         .no-data-chart {font-size: 0.95em; padding: 18px;}
-        
         #test-ai iframe { border: 1px solid var(--border-color); width: 100%; height: 85vh; border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); }
         #test-ai p {margin-bottom: 18px; font-size: 1em; color: var(--text-color-secondary);}
-        pre .stdout-log { background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2; }
-        pre .stderr-log { background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2; }
-        
-        .trace-preview {
-  padding: 1rem;
-  text-align: center;
-  background: #f5f5f5;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.trace-icon {
-  font-size: 2rem;
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.trace-name {
-  word-break: break-word;
-  font-size: 0.9rem;
-}
-
-.trace-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.trace-actions a {
-  flex: 1;
-  text-align: center;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.85rem;
-  border-radius: 4px;
-  text-decoration: none;
-}
-
-.view-trace {
-  background: #3182ce;
-  color: white;
-}
-
-.view-trace:hover {
-  background: #2c5282;
-}
-
-.download-trace {
-  background: #e2e8f0;
-  color: #2d3748;
-}
-
-.download-trace:hover {
-  background: #cbd5e0;
-}
-
-.filters button.clear-filters-btn {
-    background-color: var(--medium-gray-color); /* Or any other suitable color */
-    color: var(--text-color);
-    /* Add other styling as per your .filters button style if needed */
-}
-
-.filters button.clear-filters-btn:hover {
-    background-color: var(--dark-gray-color); /* Darker on hover */
-    color: #fff;
-}
-        @media (max-width: 1200px) {
-            .trend-charts-row { grid-template-columns: 1fr; } 
-        }
-        @media (max-width: 992px) { 
-            .dashboard-bottom-row { grid-template-columns: 1fr; }
-            .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; }
-            .filters input { min-width: 180px; }
-            .filters select { min-width: 150px; }
-        }
-        @media (max-width: 768px) { 
-          body { font-size: 15px; }
-          .container { margin: 10px; padding: 20px; } 
-          .header { flex-direction: column; align-items: flex-start; gap: 15px; }
-          .header h1 { font-size: 1.6em; }
-          .run-info { text-align: left; font-size:0.9em; }
-          .tabs { margin-bottom: 25px;}
-          .tab-button { padding: 12px 20px; font-size: 1.05em;}
-          .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;}
-          .summary-card .value {font-size: 2em;}
-          .summary-card h3 {font-size: 0.95em;}
-          .filters { flex-direction: column; padding: 18px; gap: 12px;}
-          .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} 
-          .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
-          .test-case-summary {gap: 10px;}
-          .test-case-title {font-size: 1.05em;}
-          .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;}
-          .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;}
-          .test-history-grid {grid-template-columns: 1fr;}
-          .pie-chart-wrapper {min-height: auto;} 
-        }
-        @media (max-width: 480px) { 
-            body {font-size: 14px;}
-            .container {padding: 15px;}
-            .header h1 {font-size: 1.4em;}
-            #report-logo { height: 35px; width: 35px; }
-            .tab-button {padding: 10px 15px; font-size: 1em;}
-            .summary-card .value {font-size: 1.8em;}
-            .attachments-grid {grid-template-columns: 1fr;}
-            .step-item {padding-left: calc(var(--depth, 0) * 18px);} 
-            .test-case-content, .step-details {padding: 15px;}
-            .trend-charts-row {gap: 20px;}
-            .trend-chart {padding: 20px;}
-        }
+        .trace-preview { padding: 1rem; text-align: center; background: #f5f5f5; border-bottom: 1px solid #e1e1e1; }
+        .trace-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
+        .trace-name { word-break: break-word; font-size: 0.9rem; }
+        .trace-actions { display: flex; gap: 0.5rem; }
+        .trace-actions a { flex: 1; text-align: center; padding: 0.25rem 0.5rem; font-size: 0.85rem; border-radius: 4px; text-decoration: none; background: cornflowerblue; color: aliceblue; }
+        .view-trace { background: #3182ce; color: white; }
+        .view-trace:hover { background: #2c5282; }
+        .download-trace { background: #e2e8f0; color: #2d3748; }
+        .download-trace:hover { background: #cbd5e0; }
+        .filters button.clear-filters-btn { background-color: var(--medium-gray-color); color: var(--text-color); }
+        .filters button.clear-filters-btn:hover { background-color: var(--dark-gray-color); color: #fff; }
+        @media (max-width: 1200px) { .trend-charts-row { grid-template-columns: 1fr; } }
+        @media (max-width: 992px) { .dashboard-bottom-row { grid-template-columns: 1fr; } .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; } .filters input { min-width: 180px; } .filters select { min-width: 150px; } }
+        @media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} }
+        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 35px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
+        .trace-actions a { text-decoration: none; color: var(--primary-color); font-weight: 500; font-size: 0.9em; }
+        .generic-attachment { text-align: center; padding: 1rem; justify-content: center; align-items: center; }
+        .attachment-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
+        .attachment-caption { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; }
+        .attachment-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+        .attachment-type { font-size: 0.8rem; color: var(--text-color-secondary); }
     </style>
 </head>
 <body>
@@ -1601,113 +1735,89 @@ function generateHTML(reportData, trendData = null) {
                 <img id="report-logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMNCA3bDggNSA4LTUtOC01eiIgZmlsbD0iIzNmNTFiNSIvPjxwYXRoIGQ9Ik0xMiA2TDQgMTFsOCA1IDgtNS04LTV6IiBmaWxsPSIjNDI4NWY0Ii8+PHBhdGggZD0iTTEyIDEwbC04IDUgOCA1IDgtNS04LTV6IiBmaWxsPSIjM2Q1NWI0Ii8+PC9zdmc+" alt="Report Logo">
                 <h1>Playwright Pulse Report</h1>
             </div>
-            <div class="run-info">
-                <strong>Run Date:</strong> ${formatDate(
-                  runSummary.timestamp
-                )}<br>
-                <strong>Total Duration:</strong> ${formatDuration(
-                  runSummary.duration
-                )}
-            </div>
+            <div class="run-info"><strong>Run Date:</strong> ${formatDate(
+              runSummary.timestamp
+            )}<br><strong>Total Duration:</strong> ${formatDuration(
+    runSummary.duration
+  )}</div>
         </header>
-        
         <div class="tabs">
             <button class="tab-button active" data-tab="dashboard">Dashboard</button>
             <button class="tab-button" data-tab="test-runs">Test Run Summary</button>
             <button class="tab-button" data-tab="test-history">Test History</button>
             <button class="tab-button" data-tab="test-ai">AI Analysis</button>
         </div>
-        
         <div id="dashboard" class="tab-content active">
             <div class="dashboard-grid">
-                <div class="summary-card">
-                    <h3>Total Tests</h3><div class="value">${
-                      runSummary.totalTests
-                    }</div>
-                </div>
-                <div class="summary-card status-passed">
-                    <h3>Passed</h3><div class="value">${runSummary.passed}</div>
-                    <div class="trend-percentage">${passPercentage}%</div>
-                </div>
-                <div class="summary-card status-failed">
-                    <h3>Failed</h3><div class="value">${runSummary.failed}</div>
-                    <div class="trend-percentage">${failPercentage}%</div>
-                </div>
-                <div class="summary-card status-skipped">
-                    <h3>Skipped</h3><div class="value">${
-                      runSummary.skipped || 0
-                    }</div>
-                    <div class="trend-percentage">${skipPercentage}%</div>
-                </div>
-                <div class="summary-card">
-                    <h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</div>
-                </div>
-                 <div class="summary-card">
-                    <h3>Run Duration</h3><div class="value">${formatDuration(
-                      runSummary.duration
-                    )}</div>
-                </div>
+                <div class="summary-card"><h3>Total Tests</h3><div class="value">${
+                  runSummary.totalTests
+                }</div></div>
+                <div class="summary-card status-passed"><h3>Passed</h3><div class="value">${
+                  runSummary.passed
+                }</div><div class="trend-percentage">${passPercentage}%</div></div>
+                <div class="summary-card status-failed"><h3>Failed</h3><div class="value">${
+                  runSummary.failed
+                }</div><div class="trend-percentage">${failPercentage}%</div></div>
+                <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${
+                  runSummary.skipped || 0
+                }</div><div class="trend-percentage">${skipPercentage}%</div></div>
+                <div class="summary-card"><h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</div></div>
+                <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
+                  runSummary.duration
+                )}</div></div>
             </div>
             <div class="dashboard-bottom-row">
+              <div style="display: grid; gap: 20px">
                 ${generatePieChart(
-                  // Changed from generatePieChartD3
                   [
                     { label: "Passed", value: runSummary.passed },
                     { label: "Failed", value: runSummary.failed },
                     { label: "Skipped", value: runSummary.skipped || 0 },
                   ],
-                  400, // Default width
-                  390 // Default height (adjusted for legend + title)
+                  400,
+                  390
                 )} 
+                ${
+                  runSummary.environment &&
+                  Object.keys(runSummary.environment).length > 0
+                    ? generateEnvironmentDashboard(runSummary.environment)
+                    : '<div class="no-data">Environment data not available.</div>'
+                }
+              </div> 
                 ${generateSuitesWidget(suitesData)}
             </div>
         </div>
-        
         <div id="test-runs" class="tab-content">
             <div class="filters">
-    <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
-    <select id="filter-status">
-        <option value="">All Statuses</option>
-        <option value="passed">Passed</option>
-        <option value="failed">Failed</option>
-        <option value="skipped">Skipped</option>
-    </select>
-    <select id="filter-browser">
-        <option value="">All Browsers</option>
-        {/* Dynamically generated options will be here */}
-        ${Array.from(
-          new Set((results || []).map((test) => test.browser || "unknown"))
-        )
-          .map(
-            (browser) =>
-              `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
-                browser
-              )}</option>`
-          )
-          .join("")}
-    </select>
-    <button id="expand-all-tests">Expand All</button>
-    <button id="collapse-all-tests">Collapse All</button>
-    <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
-</div>
-            <div class="test-cases-list">
-                ${generateTestCasesHTML()}
+                <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
+                <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="skipped">Skipped</option></select>
+                <select id="filter-browser"><option value="">All Browsers</option>${Array.from(
+                  new Set(
+                    (results || []).map((test) => test.browser || "unknown")
+                  )
+                )
+                  .map(
+                    (browser) =>
+                      `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
+                        browser
+                      )}</option>`
+                  )
+                  .join("")}</select>
+                <button id="expand-all-tests">Expand All</button> <button id="collapse-all-tests">Collapse All</button> <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
             </div>
+            <div class="test-cases-list">${generateTestCasesHTML()}</div>
         </div>
-
         <div id="test-history" class="tab-content">
           <h2 class="tab-main-title">Execution Trends</h2>
           <div class="trend-charts-row">
-            <div class="trend-chart">
-              <h3 class="chart-title-header">Test Volume & Outcome Trends</h3>
+            <div class="trend-chart"><h3 class="chart-title-header">Test Volume & Outcome Trends</h3>
               ${
                 trendData && trendData.overall && trendData.overall.length > 0
                   ? generateTestTrendsChart(trendData)
                   : '<div class="no-data">Overall trend data not available for test counts.</div>'
               }
             </div>
-            <div class="trend-chart">
-              <h3 class="chart-title-header">Execution Duration Trends</h3>
+            <div class="trend-chart"><h3 class="chart-title-header">Execution Duration Trends</h3>
               ${
                 trendData && trendData.overall && trendData.overall.length > 0
                   ? generateDurationTrendChart(trendData)
@@ -1724,69 +1834,26 @@ function generateHTML(reportData, trendData = null) {
               : '<div class="no-data">Individual test history data not available.</div>'
           }
         </div>
-
         <div id="test-ai" class="tab-content">
-             <iframe 
-            src="https://ai-test-analyser.netlify.app/" 
-            width="100%" 
-            height="100%"
-            frameborder="0"
-            allowfullscreen 
-            style="border: none; height: 100vh;">
-          </iframe>
+             <iframe data-src="https://ai-test-analyser.netlify.app/" width="100%" height="100%" frameborder="0" allowfullscreen class="lazy-load-iframe" title="AI Test Analyser" style="border: none; height: 100vh;"></iframe>
         </div>
-        <footer style="
-  padding: 0.5rem;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
-  text-align: center;
-  font-family: 'Segoe UI', system-ui, sans-serif;
-">
-  <div style="
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: #333;
-    font-size: 0.9rem;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-  ">
-    <img width="48" height="48" src="https://img.icons8.com/emoji/48/index-pointing-at-the-viewer-light-skin-tone-emoji.png" alt="index-pointing-at-the-viewer-light-skin-tone-emoji"/>
-    <span>Created by</span>
-    <a href="https://github.com/Arghajit47"
-       target="_blank"
-       rel="noopener noreferrer"
-       style="
-         color: #7737BF;
-         font-weight: 700;
-         font-style: italic;
-         text-decoration: none;
-         transition: all 0.2s ease;
-       "
-       onmouseover="this.style.color='#BF5C37'"
-       onmouseout="this.style.color='#7737BF'">
-      Arghajit Singha
-    </a>
-  </div>
-  <div style="
-    margin-top: 0.5rem;
-    font-size: 0.75rem;
-    color: #666;
-  ">
-    Crafted with precision
-  </div>
-</footer>
+        <footer style="padding: 0.5rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); text-align: center; font-family: 'Segoe UI', system-ui, sans-serif;">
+            <div style="display: inline-flex; align-items: center; gap: 0.5rem; color: #333; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;">
+                <img width="48" height="48" src="https://img.icons8.com/emoji/48/index-pointing-at-the-viewer-light-skin-tone-emoji.png" alt="index-pointing-at-the-viewer-light-skin-tone-emoji"/>
+                <span>Created by</span>
+                <a href="https://github.com/Arghajit47" target="_blank" rel="noopener noreferrer" style="color: #7737BF; font-weight: 700; font-style: italic; text-decoration: none; transition: all 0.2s ease;" onmouseover="this.style.color='#BF5C37'" onmouseout="this.style.color='#7737BF'">Arghajit Singha</a>
+            </div>
+            <div style="margin-top: 0.5rem; font-size: 0.75rem; color: #666;">Crafted with precision</div>
+        </footer>
     </div>
-    
-    
     <script>
     // Ensure formatDuration is globally available
-    if (typeof formatDuration === 'undefined') {
-        function formatDuration(ms) {
-            if (ms === undefined || ms === null || ms < 0) return "0.0s";
-            return (ms / 1000).toFixed(1) + "s";
+    if (typeof formatDuration === 'undefined') { 
+        function formatDuration(ms) { 
+            if (ms === undefined || ms === null || ms < 0) return "0.0s"; 
+            return (ms / 1000).toFixed(1) + "s"; 
         }
     }
-
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
@@ -1797,82 +1864,64 @@ function generateHTML(reportData, trendData = null) {
                 button.classList.add('active');
                 const tabId = button.getAttribute('data-tab');
                 const activeContent = document.getElementById(tabId);
-                if (activeContent) activeContent.classList.add('active');
+                if (activeContent) {
+                    activeContent.classList.add('active');
+                    // Check if IntersectionObserver is already handling elements in this tab
+                    // For simplicity, we assume if an element is observed, it will be handled when it becomes visible.
+                    // If IntersectionObserver is not supported, already-visible elements would have been loaded by fallback.
+                }
             });
         });
-
         // --- Test Run Summary Filters ---
         const nameFilter = document.getElementById('filter-name');
         const statusFilter = document.getElementById('filter-status');
         const browserFilter = document.getElementById('filter-browser');
-        const clearRunSummaryFiltersBtn = document.getElementById('clear-run-summary-filters'); // Get the new button
-
-        function filterTestCases() {
+        const clearRunSummaryFiltersBtn = document.getElementById('clear-run-summary-filters'); 
+        function filterTestCases() { 
             const nameValue = nameFilter ? nameFilter.value.toLowerCase() : "";
             const statusValue = statusFilter ? statusFilter.value : "";
             const browserValue = browserFilter ? browserFilter.value : "";
-            
             document.querySelectorAll('#test-runs .test-case').forEach(testCaseElement => {
                 const titleElement = testCaseElement.querySelector('.test-case-title');
                 const fullTestName = titleElement ? titleElement.getAttribute('title').toLowerCase() : "";
                 const status = testCaseElement.getAttribute('data-status');
                 const browser = testCaseElement.getAttribute('data-browser');
-                
                 const nameMatch = fullTestName.includes(nameValue);
                 const statusMatch = !statusValue || status === statusValue;
                 const browserMatch = !browserValue || browser === browserValue;
-                
                 testCaseElement.style.display = (nameMatch && statusMatch && browserMatch) ? '' : 'none';
             });
         }
         if(nameFilter) nameFilter.addEventListener('input', filterTestCases);
         if(statusFilter) statusFilter.addEventListener('change', filterTestCases);
         if(browserFilter) browserFilter.addEventListener('change', filterTestCases);
-
-        // Event listener for clearing Test Run Summary filters
-        if (clearRunSummaryFiltersBtn) {
-            clearRunSummaryFiltersBtn.addEventListener('click', () => {
-                if (nameFilter) nameFilter.value = '';
-                if (statusFilter) statusFilter.value = '';
-                if (browserFilter) browserFilter.value = '';
-                filterTestCases(); // Re-apply filters (which will show all)
-            });
-        }
-
+        if(clearRunSummaryFiltersBtn) clearRunSummaryFiltersBtn.addEventListener('click', () => {
+            if(nameFilter) nameFilter.value = ''; if(statusFilter) statusFilter.value = ''; if(browserFilter) browserFilter.value = '';
+            filterTestCases();
+        });
         // --- Test History Filters ---
         const historyNameFilter = document.getElementById('history-filter-name');
         const historyStatusFilter = document.getElementById('history-filter-status');
-        const clearHistoryFiltersBtn = document.getElementById('clear-history-filters'); // Get the new button
-
-
-        function filterTestHistoryCards() {
+        const clearHistoryFiltersBtn = document.getElementById('clear-history-filters'); 
+        function filterTestHistoryCards() { 
             const nameValue = historyNameFilter ? historyNameFilter.value.toLowerCase() : "";
             const statusValue = historyStatusFilter ? historyStatusFilter.value : "";
-
             document.querySelectorAll('.test-history-card').forEach(card => {
                 const testTitle = card.getAttribute('data-test-name').toLowerCase(); 
                 const latestStatus = card.getAttribute('data-latest-status');
-
                 const nameMatch = testTitle.includes(nameValue);
                 const statusMatch = !statusValue || latestStatus === statusValue;
-
                 card.style.display = (nameMatch && statusMatch) ? '' : 'none';
             });
         }
         if(historyNameFilter) historyNameFilter.addEventListener('input', filterTestHistoryCards);
         if(historyStatusFilter) historyStatusFilter.addEventListener('change', filterTestHistoryCards);
-
-        // Event listener for clearing Test History filters
-        if (clearHistoryFiltersBtn) {
-            clearHistoryFiltersBtn.addEventListener('click', () => {
-                if (historyNameFilter) historyNameFilter.value = '';
-                if (historyStatusFilter) historyStatusFilter.value = '';
-                filterTestHistoryCards(); // Re-apply filters (which will show all)
-            });
-        }
-
-        // --- Expand/Collapse and Toggle Details Logic (remains the same) ---
-        function toggleElementDetails(headerElement, contentSelector) {
+        if(clearHistoryFiltersBtn) clearHistoryFiltersBtn.addEventListener('click', () => {
+            if(historyNameFilter) historyNameFilter.value = ''; if(historyStatusFilter) historyStatusFilter.value = '';
+            filterTestHistoryCards();
+        });
+        // --- Expand/Collapse and Toggle Details Logic ---
+        function toggleElementDetails(headerElement, contentSelector) { 
             let contentElement;
             if (headerElement.classList.contains('test-case-header')) {
                 contentElement = headerElement.parentElement.querySelector('.test-case-content');
@@ -1882,41 +1931,145 @@ function generateHTML(reportData, trendData = null) {
                      contentElement = null;
                 }
             }
-
             if (contentElement) {
                  const isExpanded = contentElement.style.display === 'block';
                  contentElement.style.display = isExpanded ? 'none' : 'block';
                  headerElement.setAttribute('aria-expanded', String(!isExpanded));
             }
         }
-        
         document.querySelectorAll('#test-runs .test-case-header').forEach(header => {
             header.addEventListener('click', () => toggleElementDetails(header)); 
         });
         document.querySelectorAll('#test-runs .step-header').forEach(header => {
             header.addEventListener('click', () => toggleElementDetails(header, '.step-details'));
         });
-
         const expandAllBtn = document.getElementById('expand-all-tests');
         const collapseAllBtn = document.getElementById('collapse-all-tests');
-
         function setAllTestRunDetailsVisibility(displayMode, ariaState) {
             document.querySelectorAll('#test-runs .test-case-content').forEach(el => el.style.display = displayMode);
             document.querySelectorAll('#test-runs .step-details').forEach(el => el.style.display = displayMode);
             document.querySelectorAll('#test-runs .test-case-header[aria-expanded]').forEach(el => el.setAttribute('aria-expanded', ariaState));
             document.querySelectorAll('#test-runs .step-header[aria-expanded]').forEach(el => el.setAttribute('aria-expanded', ariaState));
         }
-        
         if (expandAllBtn) expandAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('block', 'true'));
         if (collapseAllBtn) collapseAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('none', 'false'));
+        // --- Intersection Observer for Lazy Loading ---
+        const lazyLoadElements = document.querySelectorAll('.lazy-load-chart, .lazy-load-iframe, .lazy-load-image, .lazy-load-video, .lazy-load-attachment');
+        if ('IntersectionObserver' in window) {
+            let lazyObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const element = entry.target;
+                        if (element.classList.contains('lazy-load-image')) {
+                            if (element.dataset.src) {
+                                element.src = element.dataset.src;
+                                element.removeAttribute('data-src');
+                            }
+                        } else if (element.classList.contains('lazy-load-video')) {
+                            const source = element.querySelector('source');
+                            if (source && source.dataset.src) {
+                                source.src = source.dataset.src;
+                                source.removeAttribute('data-src');
+                                element.load();
+                            }
+                        } else if (element.classList.contains('lazy-load-attachment')) {
+                            if (element.dataset.href) {
+                                element.href = element.dataset.href;
+                                element.removeAttribute('data-href');
+                            }
+                        } else if (element.classList.contains('lazy-load-iframe')) {
+                            if (element.dataset.src) {
+                                element.src = element.dataset.src;
+                                element.removeAttribute('data-src');
+                            }
+                        } else if (element.classList.contains('lazy-load-chart')) {
+                            const renderFunctionName = element.dataset.renderFunctionName;
+                            if (renderFunctionName && typeof window[renderFunctionName] === 'function') {
+                                window[renderFunctionName]();
+                            }
+                        }
+                        observer.unobserve(element);
+                    }
+                });
+            }, { rootMargin: "0px 0px 200px 0px" });
+            lazyLoadElements.forEach(el => lazyObserver.observe(el));
+        } else { // Fallback for browsers without IntersectionObserver
+            lazyLoadElements.forEach(element => {
+                if (element.classList.contains('lazy-load-image') && element.dataset.src) element.src = element.dataset.src;
+                else if (element.classList.contains('lazy-load-video')) { const source = element.querySelector('source'); if (source && source.dataset.src) { source.src = source.dataset.src; element.load(); } }
+                else if (element.classList.contains('lazy-load-attachment') && element.dataset.href) element.href = element.dataset.href;
+                else if (element.classList.contains('lazy-load-iframe') && element.dataset.src) element.src = element.dataset.src;
+                else if (element.classList.contains('lazy-load-chart')) { const renderFn = element.dataset.renderFunctionName; if(renderFn && window[renderFn]) window[renderFn](); }
+            });
+        }
     }
     document.addEventListener('DOMContentLoaded', initializeReportInteractivity);
+
+    function copyErrorToClipboard(button) {
+  // 1. Find the main error container, which should always be present.
+  const errorContainer = button.closest('.step-error');
+  if (!errorContainer) {
+    console.error("Could not find '.step-error' container. The report's HTML structure might have changed.");
+    return;
+  }
+
+  let errorText;
+
+  // 2. First, try to find the preferred .stack-trace element (the "happy path").
+  const stackTraceElement = errorContainer.querySelector('.stack-trace');
+
+  if (stackTraceElement) {
+    // If it exists, use its text content. This handles standard assertion errors.
+    errorText = stackTraceElement.textContent;
+  } else {
+    // 3. FALLBACK: If .stack-trace doesn't exist, this is likely an unstructured error.
+    // We clone the container to avoid manipulating the live DOM or copying the button's own text.
+    const clonedContainer = errorContainer.cloneNode(true);
+    
+    // Remove the button from our clone before extracting the text.
+    const buttonInClone = clonedContainer.querySelector('button');
+    if (buttonInClone) {
+      buttonInClone.remove();
+    }
+    
+    // Use the text content of the cleaned container as the fallback.
+    errorText = clonedContainer.textContent;
+  }
+
+  // 4. Proceed with the clipboard logic, ensuring text is not null and is trimmed.
+  if (!errorText) {
+    console.error('Could not extract error text.');
+    button.textContent = 'Nothing to copy';
+    setTimeout(() => { button.textContent = 'Copy Error'; }, 2000);
+    return;
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = errorText.trim(); // Trim whitespace for a cleaner copy.
+  textarea.style.position = 'fixed'; // Prevent screen scroll
+  textarea.style.top = '-9999px';
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    const successful = document.execCommand('copy');
+    const originalText = button.textContent;
+    button.textContent = successful ? 'Copied!' : 'Failed';
+    setTimeout(() => {
+      button.textContent = originalText;
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+    button.textContent = 'Failed';
+  }  
+
+  document.body.removeChild(textarea);
+}
 </script>
 </body>
 </html>
   `;
 }
-
 async function runScript(scriptPath) {
   return new Promise((resolve, reject) => {
     console.log(chalk.blue(`Executing script: ${scriptPath}...`));
@@ -1941,7 +2094,6 @@ async function runScript(scriptPath) {
     });
   });
 }
-
 async function main() {
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -1976,11 +2128,10 @@ async function main() {
       ),
       error
     );
-    // You might decide to proceed or exit depending on the importance of historical data
   }
 
   // Step 2: Load current run's data (for non-trend sections of the report)
-  let currentRunReportData; // Data for the run being reported
+  let currentRunReportData;
   try {
     const jsonData = await fs.readFile(reportJsonPath, "utf-8");
     currentRunReportData = JSON.parse(jsonData);
@@ -2007,13 +2158,13 @@ async function main() {
         `Critical Error: Could not read or parse main report JSON at ${reportJsonPath}: ${error.message}`
       )
     );
-    process.exit(1); // Exit if the main report for the current run is missing/invalid
+    process.exit(1);
   }
 
   // Step 3: Load historical data for trends
-  let historicalRuns = []; // Array of past PlaywrightPulseReport objects
+  let historicalRuns = [];
   try {
-    await fs.access(historyDir); // Check if history directory exists
+    await fs.access(historyDir);
     const allHistoryFiles = await fs.readdir(historyDir);
 
     const jsonHistoryFiles = allHistoryFiles
@@ -2031,7 +2182,7 @@ async function main() {
         };
       })
       .filter((file) => !isNaN(file.timestamp))
-      .sort((a, b) => b.timestamp - a.timestamp); // Sort newest first to easily pick the latest N
+      .sort((a, b) => b.timestamp - a.timestamp);
 
     const filesToLoadForTrend = jsonHistoryFiles.slice(
       0,
@@ -2041,7 +2192,7 @@ async function main() {
     for (const fileMeta of filesToLoadForTrend) {
       try {
         const fileContent = await fs.readFile(fileMeta.path, "utf-8");
-        const runJsonData = JSON.parse(fileContent); // Each file IS a PlaywrightPulseReport
+        const runJsonData = JSON.parse(fileContent);
         historicalRuns.push(runJsonData);
       } catch (fileReadError) {
         console.warn(
@@ -2051,8 +2202,7 @@ async function main() {
         );
       }
     }
-    // Reverse to have oldest first for chart data series (if charts expect chronological)
-    historicalRuns.reverse();
+    historicalRuns.reverse(); // Oldest first for charts
     console.log(
       chalk.green(
         `Loaded ${historicalRuns.length} historical run(s) for trend analysis.`
@@ -2074,20 +2224,18 @@ async function main() {
     }
   }
 
-  // Step 4: Prepare trendData object in the format expected by chart functions
+  // Step 4: Prepare trendData object
   const trendData = {
-    overall: [], // For overall run summaries (passed, failed, skipped, duration over time)
-    testRuns: {}, // For individual test history (key: "test run <run_timestamp_ms>", value: array of test result summaries)
+    overall: [],
+    testRuns: {},
   };
 
   if (historicalRuns.length > 0) {
     historicalRuns.forEach((histRunReport) => {
-      // histRunReport is a full PlaywrightPulseReport object from a past run
       if (histRunReport.run) {
-        // Ensure timestamp is a Date object for correct sorting/comparison later if needed by charts
         const runTimestamp = new Date(histRunReport.run.timestamp);
         trendData.overall.push({
-          runId: runTimestamp.getTime(), // Use timestamp as a unique ID for this context
+          runId: runTimestamp.getTime(),
           timestamp: runTimestamp,
           duration: histRunReport.run.duration,
           totalTests: histRunReport.run.totalTests,
@@ -2096,21 +2244,19 @@ async function main() {
           skipped: histRunReport.run.skipped || 0,
         });
 
-        // For generateTestHistoryContent
         if (histRunReport.results && Array.isArray(histRunReport.results)) {
-          const runKeyForTestHistory = `test run ${runTimestamp.getTime()}`; // Use timestamp to key test runs
+          const runKeyForTestHistory = `test run ${runTimestamp.getTime()}`;
           trendData.testRuns[runKeyForTestHistory] = histRunReport.results.map(
             (test) => ({
-              testName: test.name, // Full test name path
+              testName: test.name,
               duration: test.duration,
               status: test.status,
-              timestamp: new Date(test.startTime), // Assuming test.startTime exists and is what you need
+              timestamp: new Date(test.startTime),
             })
           );
         }
       }
     });
-    // Ensure trendData.overall is sorted by timestamp if not already
     trendData.overall.sort(
       (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
     );
@@ -2118,8 +2264,6 @@ async function main() {
 
   // Step 5: Generate and write HTML
   try {
-    // currentRunReportData is for the main content (test list, summary cards of *this* run)
-    // trendData is for the historical charts and test history section
     const htmlContent = generateHTML(currentRunReportData, trendData);
     await fs.writeFile(reportHtmlPath, htmlContent, "utf-8");
     console.log(
@@ -2130,12 +2274,10 @@ async function main() {
     console.log(chalk.gray(`(You can open this file in your browser)`));
   } catch (error) {
     console.error(chalk.red(`Error generating HTML report: ${error.message}`));
-    console.error(chalk.red(error.stack)); // Log full stack for HTML generation errors
+    console.error(chalk.red(error.stack));
     process.exit(1);
   }
 }
-
-// Make sure main() is called at the end of your script
 main().catch((err) => {
   console.error(
     chalk.red.bold(`Unhandled error during script execution: ${err.message}`)