@arghajit/playwright-pulse-report 0.2.5 → 0.2.8

package/scripts/generate-static-report.mjs

@@ -6,7 +6,11 @@ import path from "path";
 import { fork } from "child_process";
 import { fileURLToPath } from "url";
 
-// Use dynamic import for chalk as it's ESM only
+/**
+ * Dynamically imports the 'chalk' library for terminal string styling.
+ * This is necessary because chalk is an ESM-only module.
+ * If the import fails, a fallback object with plain console log functions is used.
+ */
 let chalk;
 try {
   chalk = (await import("chalk")).default;
@@ -22,12 +26,30 @@ try {
   };
 }
 
-// Default configuration
+/**
+ * @constant {string} DEFAULT_OUTPUT_DIR
+ * The default directory where the report will be generated.
+ */
 const DEFAULT_OUTPUT_DIR = "pulse-report";
+
+/**
+ * @constant {string} DEFAULT_JSON_FILE
+ * The default name for the JSON file containing the test data.
+ */
 const DEFAULT_JSON_FILE = "playwright-pulse-report.json";
+
+/**
+ * @constant {string} DEFAULT_HTML_FILE
+ * The default name for the generated HTML report file.
+ */
 const DEFAULT_HTML_FILE = "playwright-pulse-static-report.html";
 
 // Helper functions
+/**
+ * Converts a string with ANSI escape codes to an HTML string with inline styles.
+ * @param {string} text The text with ANSI codes.
+ * @returns {string} The converted HTML string.
+ */
 export function ansiToHtml(text) {
   if (!text) {
     return "";
@@ -141,6 +163,11 @@ export function ansiToHtml(text) {
   }
   return html;
 }
+/**
+ * Sanitizes an HTML string by replacing special characters with their corresponding HTML entities.
+ * @param {string} str The HTML string to sanitize.
+ * @returns {string} The sanitized HTML string.
+ */
 function sanitizeHTML(str) {
   if (str === null || str === undefined) return "";
   return String(str).replace(
@@ -149,32 +176,52 @@ function sanitizeHTML(str) {
       ({ "&": "&", "<": "<", ">": ">", '"': '"', "'": "'" }[match] || match)
   );
 }
+/**
+ * Capitalizes the first letter of a string and converts the rest to lowercase.
+ * @param {string} str The string to capitalize.
+ * @returns {string} The capitalized string.
+ */
 function capitalize(str) {
   if (!str) return "";
   return str[0].toUpperCase() + str.slice(1).toLowerCase();
 }
+/**
+ * Formats a Playwright error object or message into an HTML string.
+ * @param {Error|string} error The error object or message string.
+ * @returns {string} The formatted HTML error string.
+ */
 function formatPlaywrightError(error) {
   const commandOutput = ansiToHtml(error || error.message);
   return convertPlaywrightErrorToHTML(commandOutput);
 }
+/**
+ * Converts a string containing Playwright-style error formatting to HTML.
+ * @param {string} str The error string.
+ * @returns {string} The HTML-formatted error string.
+ */
 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>")
-  );
+  if (!str) return "";
+  return str
+    .replace(/^(\s+)/gm, (match) =>
+      match.replace(/ /g, " ").replace(/\t/g, "  ")
+    )
+    .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;">')
+    .replace(/<\/color>/g, "</span>")
+    .replace(/<\/intensity>/g, "</span>")
+    .replace(/\n/g, "<br>");
 }
+/**
+ * Formats a duration in milliseconds into a human-readable string (e.g., '1h 2m 3s', '4.5s').
+ * @param {number} ms The duration in milliseconds.
+ * @param {object} [options={}] Formatting options.
+ * @param {number} [options.precision=1] The number of decimal places for seconds.
+ * @param {string} [options.invalidInputReturn="N/A"] The string to return for invalid input.
+ * @param {string|null} [options.defaultForNullUndefinedNegative=null] The value for null, undefined, or negative inputs.
+ * @returns {string} The formatted duration string.
+ */
 function formatDuration(ms, options = {}) {
   const {
     precision = 1,
@@ -214,19 +261,12 @@ function formatDuration(ms, options = {}) {
 
   const totalRawSeconds = numMs / MS_PER_SECOND;
 
-  // 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;
 
@@ -238,26 +278,26 @@ function formatDuration(ms, options = {}) {
     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 s = Math.floor(remainingMs / MS_PER_SECOND);
 
     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(" ");
   }
 }
+/**
+ * Generates HTML and JavaScript for a Highcharts line chart to display test result trends over multiple runs.
+ * @param {object} trendData The trend data.
+ * @param {Array<object>} trendData.overall An array of run objects with test statistics.
+ * @returns {string} The HTML string for the test trends chart.
+ */
 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>';
@@ -353,6 +393,12 @@ function generateTestTrendsChart(trendData) {
       </script>
   `;
 }
+/**
+ * Generates HTML and JavaScript for a Highcharts area chart to display test duration trends.
+ * @param {object} trendData Data for duration trends.
+ * @param {Array<object>} trendData.overall Array of objects, each representing a test run with a duration.
+ * @returns {string} The HTML string for the duration trend chart.
+ */
 function generateDurationTrendChart(trendData) {
   if (!trendData || !trendData.overall || trendData.overall.length === 0) {
     return '<div class="no-data">No overall trend data available for durations.</div>';
@@ -437,6 +483,11 @@ function generateDurationTrendChart(trendData) {
       </script>
   `;
 }
+/**
+ * Formats a date string or Date object into a more readable format (e.g., "MM/DD/YY HH:MM").
+ * @param {string|Date} dateStrOrDate The date string or Date object to format.
+ * @returns {string} The formatted date string, or "N/A" for invalid dates.
+ */
 function formatDate(dateStrOrDate) {
   if (!dateStrOrDate) return "N/A";
   try {
@@ -455,6 +506,12 @@ function formatDate(dateStrOrDate) {
     return "Invalid Date Format";
   }
 }
+/**
+ * Generates a small area chart showing the duration history of a single test across multiple runs.
+ * The status of each run is indicated by the color of the marker.
+ * @param {Array<object>} history An array of run objects, each with status and duration.
+ * @returns {string} The HTML string for the test history chart.
+ */
 function generateTestHistoryChart(history) {
   if (!history || history.length === 0)
     return '<div class="no-data-chart">No data for chart</div>';
@@ -565,6 +622,13 @@ function generateTestHistoryChart(history) {
       </script>
   `;
 }
+/**
+ * Generates a Highcharts pie chart to visualize the distribution of test statuses.
+ * @param {Array<object>} data The data for the pie chart, with each object having a 'label' and 'value'.
+ * @param {number} [chartWidth=300] The width of the chart.
+ * @param {number} [chartHeight=300] The height of the chart.
+ * @returns {string} The HTML string for the pie chart.
+ */
 function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   const total = data.reduce((sum, d) => sum + d.value, 0);
   if (total === 0) {
@@ -694,6 +758,12 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       </div>
   `;
 }
+/**
+ * Generates an HTML dashboard to display environment details.
+ * @param {object} environment The environment information.
+ * @param {number} [dashboardHeight=600] The height of the dashboard.
+ * @returns {string} The HTML string for the environment dashboard.
+ */
 function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
   // Format memory for display
   const formattedMemory = environment.memory.replace(/(\d+\.\d{2})GB/, "$1 GB");
@@ -709,176 +779,176 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
   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 *,
+.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);
-        }
+.environment-dashboard-wrapper {
+--primary-color: #4a9eff;
+--primary-light-color: #1a2332;
+--secondary-color: #9ca3af;
+--success-color: #34d399;
+--success-light-color: #1a2e23;
+--warning-color: #fbbf24;
+--warning-light-color: #2d2a1a;
+--danger-color: #f87171;
+
+--background-color: #1f2937;
+--card-background-color: #374151;
+--text-color: #f9fafb;
+--text-color-secondary: #d1d5db;
+--border-color: #4b5563;
+--border-light-color: #374151;
+--icon-color: #d1d5db;
+--chip-background: #4b5563;
+--chip-text: #f9fafb;
+--shadow-color: rgba(0, 0, 0, 0.3);
+
+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-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>
+.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(255,255,255,0.2);
+}
+
+.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>
@@ -1023,125 +1093,420 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
     </div>
   `;
 }
-function generateTestHistoryContent(trendData) {
-  if (
-    !trendData ||
-    !trendData.testRuns ||
-    Object.keys(trendData.testRuns).length === 0
-  ) {
-    return '<div class="no-data">No historical test data available.</div>';
+/**
+ * Generates a Highcharts bar chart to visualize the distribution of test results across different workers.
+ * @param {Array<object>} results The test results data.
+ * @returns {string} The HTML string for the worker distribution chart and its associated modal.
+ */
+function generateWorkerDistributionChart(results) {
+  if (!results || results.length === 0) {
+    return '<div class="no-data">No test results data available to display worker distribution.</div>';
   }
 
-  const allTestNamesAndPaths = new Map();
-  Object.values(trendData.testRuns).forEach((run) => {
-    if (Array.isArray(run)) {
-      run.forEach((test) => {
-        if (test && test.testName && !allTestNamesAndPaths.has(test.testName)) {
-          const parts = test.testName.split(" > ");
-          const title = parts[parts.length - 1];
-          allTestNamesAndPaths.set(test.testName, title);
-        }
-      });
+  // 1. Sort results by startTime to ensure chronological order
+  const sortedResults = [...results].sort((a, b) => {
+    const timeA = a.startTime ? new Date(a.startTime).getTime() : 0;
+    const timeB = b.startTime ? new Date(b.startTime).getTime() : 0;
+    return timeA - timeB;
+  });
+
+  const workerData = sortedResults.reduce((acc, test) => {
+    const workerId =
+      typeof test.workerId !== "undefined" ? test.workerId : "N/A";
+    if (!acc[workerId]) {
+      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
+    }
+
+    const status = String(test.status).toLowerCase();
+    if (status === "passed" || status === "failed" || status === "skipped") {
+      acc[workerId][status]++;
     }
+
+    const testTitleParts = test.name.split(" > ");
+    const testTitle =
+      testTitleParts[testTitleParts.length - 1] || "Unnamed Test";
+    // Store both name and status for each test
+    acc[workerId].tests.push({ name: testTitle, status: status });
+
+    return acc;
+  }, {});
+
+  const workerIds = Object.keys(workerData).sort((a, b) => {
+    if (a === "N/A") return 1;
+    if (b === "N/A") return -1;
+    return parseInt(a, 10) - parseInt(b, 10);
   });
 
-  if (allTestNamesAndPaths.size === 0) {
-    return '<div class="no-data">No historical test data found after processing.</div>';
+  if (workerIds.length === 0) {
+    return '<div class="no-data">Could not determine worker distribution from test data.</div>';
   }
 
-  const testHistory = Array.from(allTestNamesAndPaths.entries())
-    .map(([fullTestName, testTitle]) => {
-      const history = [];
-      (trendData.overall || []).forEach((overallRun, index) => {
-        const runKey = overallRun.runId
-          ? `test run ${overallRun.runId}`
-          : `test run ${index + 1}`;
-        const testRunForThisOverallRun = trendData.testRuns[runKey]?.find(
-          (t) => t && t.testName === fullTestName
-        );
-        if (testRunForThisOverallRun) {
-          history.push({
-            runId: overallRun.runId || index + 1,
-            status: testRunForThisOverallRun.status || "unknown",
-            duration: testRunForThisOverallRun.duration || 0,
-            timestamp:
-              testRunForThisOverallRun.timestamp ||
-              overallRun.timestamp ||
-              new Date(),
-          });
-        }
-      });
-      return { fullTestName, testTitle, history };
-    })
-    .filter((item) => item.history.length > 0);
+  const chartId = `workerDistChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderWorkerDistChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
+  const modalJsNamespace = `modal_funcs_${chartId.replace(/-/g, "_")}`;
+
+  // The categories now just need the name for the axis labels
+  const categories = workerIds.map((id) => `Worker ${id}`);
+
+  // We pass the full data separately to the script
+  const fullWorkerData = workerIds.map((id) => ({
+    id: id,
+    name: `Worker ${id}`,
+    tests: workerData[id].tests,
+  }));
+
+  const passedData = workerIds.map((id) => workerData[id].passed);
+  const failedData = workerIds.map((id) => workerData[id].failed);
+  const skippedData = workerIds.map((id) => workerData[id].skipped);
+
+  const categoriesString = JSON.stringify(categories);
+  const fullDataString = JSON.stringify(fullWorkerData);
+  const seriesString = JSON.stringify([
+    { name: "Passed", data: passedData, color: "var(--success-color)" },
+    { name: "Failed", data: failedData, color: "var(--danger-color)" },
+    { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
+  ]);
 
+  // The HTML now includes the chart container, the modal, and styles for the modal
   return `
-    <div class="test-history-container">
-      <div class="filters" style="border-color: black; border-style: groove;">
-    <input type="text" id="history-filter-name" placeholder="Search by test title..." style="border-color: black; border-style: outset;">
-    <select id="history-filter-status">
-        <option value="">All Statuses</option>
-        <option value="passed">Passed</option>
-        <option value="failed">Failed</option>
-        <option value="skipped">Skipped</option>
-    </select>
-    <button id="clear-history-filters" class="clear-filters-btn">Clear Filters</button>
-</div>
-      
-      <div class="test-history-grid">
-        ${testHistory
-          .map((test) => {
-            const latestRun =
-              test.history.length > 0
-                ? test.history[test.history.length - 1]
-                : { status: "unknown" };
-            return `
-            <div class="test-history-card" data-test-name="${sanitizeHTML(
-              test.testTitle.toLowerCase()
-            )}" data-latest-status="${latestRun.status}">
-              <div class="test-history-header">
-                <p title="${sanitizeHTML(test.testTitle)}">${capitalize(
-              sanitizeHTML(test.testTitle)
-            )}</p>
-                <span class="status-badge ${getStatusClass(latestRun.status)}">
-                  ${String(latestRun.status).toUpperCase()}
-                </span>
-              </div>
-              <div class="test-history-trend">
-                ${generateTestHistoryChart(test.history)} 
-              </div>
-              <details class="test-history-details-collapsible">
-                <summary>Show Run Details (${test.history.length})</summary>
-                <div class="test-history-details">
-                  <table>
-                    <thead><tr><th>Run</th><th>Status</th><th>Duration</th><th>Date</th></tr></thead>
-                    <tbody>
-                      ${test.history
-                        .slice()
-                        .reverse()
-                        .map(
-                          (run) => `
-                        <tr>
-                          <td>${run.runId}</td>
-                          <td><span class="status-badge-small ${getStatusClass(
-                            run.status
-                          )}">${String(run.status).toUpperCase()}</span></td>
-                          <td>${formatDuration(run.duration)}</td>
-                          <td>${formatDate(run.timestamp)}</td>
-                        </tr>`
-                        )
-                        .join("")}
-                    </tbody>
-                  </table>
-                </div>
-              </details>
-            </div>`;
-          })
-          .join("")}
-      </div>
-    </div>
+<style>
+.worker-modal-overlay {
+position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;
+overflow: auto; background-color: rgba(0,0,0,0.8);
+display: none; align-items: center; justify-content: center;
+}
+.worker-modal-content {
+background-color: #1f2937;
+color: #f9fafb;
+margin: auto; padding: 20px; border: 1px solid #4b5563;
+width: 80%; max-width: 700px; border-radius: 8px;
+position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.7);
+}
+.worker-modal-close {
+position: absolute; top: 10px; right: 20px;
+font-size: 28px; font-weight: bold; cursor: pointer;
+line-height: 1; color: #d1d5db;
+}
+.worker-modal-close:hover, .worker-modal-close:focus {
+color: #f9fafb;
+}
+#worker-modal-body-${chartId} ul {
+list-style-type: none; padding-left: 0; margin-top: 15px; max-height: 45vh; overflow-y: auto;
+}
+#worker-modal-body-${chartId} li {
+padding: 8px 5px; border-bottom: 1px solid #4b5563;
+font-size: 0.9em; color: #f9fafb;
+}
+#worker-modal-body-${chartId} li:last-child {
+border-bottom: none;
+}
+#worker-modal-body-${chartId} li > span {
+display: inline-block;
+width: 70px;
+font-weight: bold;
+text-align: right;
+margin-right: 10px;
+color: #d1d5db;
+}
+</style>
+
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}" style="min-height: 350px;">
+      <div class="no-data">Loading Worker Distribution Chart...</div>
+    </div>
+
+    <div id="worker-modal-${chartId}" class="worker-modal-overlay">
+      <div class="worker-modal-content">
+        <span class="worker-modal-close">×</span>
+        <h3 id="worker-modal-title-${chartId}" style="text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.25em; font-weight: 600; color: #fff"></h3>
+        <div id="worker-modal-body-${chartId}"></div>
+      </div>
+    </div>
+
+    <script>
+      // Namespace for modal functions to avoid global scope pollution
+      window.${modalJsNamespace} = {};
+
+      window.${renderFunctionName} = function() {
+        const chartContainer = document.getElementById('${chartId}');
+        if (!chartContainer) { console.error("Chart container ${chartId} not found."); return; }
+
+        // --- Modal Setup ---
+        const modal = document.getElementById('worker-modal-${chartId}');
+        const modalTitle = document.getElementById('worker-modal-title-${chartId}');
+        const modalBody = document.getElementById('worker-modal-body-${chartId}');
+        const closeModalBtn = modal.querySelector('.worker-modal-close');
+        if (modal && modal.parentElement !== document.body) {
+          document.body.appendChild(modal);
+        }
+
+        // Lightweight HTML escaper for client-side use
+        function __escHtml(s){return String(s==null?'':s).replace(/[&<>\"]/g,function(ch){return ch==='&'?'&amp;':ch==='<'?'&lt;':ch==='>'?'&gt;':'&quot;';});}
+
+        window.${modalJsNamespace}.open = function(worker) {
+          if (!worker) return;
+          try {
+            modalTitle.textContent = 'Test Details for ' + worker.name;
+
+            let testListHtml = '<ul>';
+            if (worker.tests && worker.tests.length > 0) {
+              worker.tests.forEach(test => {
+                  let color = 'inherit';
+                  if (test.status === 'passed') color = 'var(--success-color)';
+                  else if (test.status === 'failed') color = 'var(--danger-color)';
+                  else if (test.status === 'skipped') color = 'var(--warning-color)';
+
+                  const safeName = __escHtml(test.name);
+                  testListHtml += '<li style="color: ' + color + ';"><span style="color: ' + color + '">[' + String(test.status).toUpperCase() + ']</span> ' + safeName + '</li>';
+              });
+            } else {
+              testListHtml += '<li>No detailed test data available for this worker.</li>';
+            }
+            testListHtml += '</ul>';
+
+            modalBody.innerHTML = testListHtml;
+            if (typeof openModal === 'function') openModal(); else modal.style.display = 'flex';
+          } catch (err) {
+            console.error('Failed to open worker modal:', err);
+          }
+        };
+
+        const closeModal = function() {
+          modal.style.display = 'none';
+          try { document.body.style.overflow = ''; } catch (_) {}
+        };
+
+        const openModal = function() {
+          modal.style.display = 'flex';
+          try { document.body.style.overflow = 'hidden'; } catch (_) {}
+        };
+
+        if (closeModalBtn) closeModalBtn.onclick = closeModal;
+        modal.addEventListener('click', function(event) {
+          if (event.target === modal) {
+            closeModal();
+          }
+        });
+
+        document.addEventListener('keydown', function escHandler(e) {
+          if (modal.style.display === 'flex' && (e.key === 'Escape' || e.key === 'Esc')) {
+            closeModal();
+          }
+        });
+
+
+        // --- Highcharts Setup ---
+        if (typeof Highcharts !== 'undefined') {
+          try {
+            chartContainer.innerHTML = '';
+            const fullData = ${fullDataString};
+
+            const chartOptions = {
+              chart: { type: 'bar', height: 350, backgroundColor: 'transparent' },
+              title: { text: null },
+              xAxis: {
+                categories: ${categoriesString},
+                title: { text: 'Worker ID' },
+                labels: { style: { color: 'var(--text-color-secondary)' }}
+              },
+              yAxis: {
+                min: 0,
+                title: { text: 'Number of Tests' },
+                labels: { style: { color: 'var(--text-color-secondary)' }},
+                stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'var(--text-color)' } }
+              },
+              legend: { reversed: true, itemStyle: { fontSize: "12px", color: 'var(--text-color)' } },
+              plotOptions: {
+                series: {
+                  stacking: 'normal',
+                  cursor: 'pointer',
+                  point: {
+                    events: {
+                      click: function () {
+                        // 'this.x' is the index of the category
+                        const workerData = fullData[this.x];
+                        window.${modalJsNamespace}.open(workerData);
+                      }
+                    }
+                  }
+                }
+              },
+              tooltip: {
+                shared: true,
+                headerFormat: '<b>{point.key}</b> (Click for details)<br/>',
+                pointFormat: '<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
+                footerFormat: 'Total: <b>{point.total}</b>'
+              },
+              series: ${seriesString},
+              credits: { enabled: false }
+            };
+            Highcharts.chart('${chartId}', chartOptions);
+          } catch (e) {
+            console.error("Error rendering chart ${chartId}:", e);
+            chartContainer.innerHTML = '<div class="no-data">Error rendering worker distribution chart.</div>';
+          }
+        } else {
+          chartContainer.innerHTML = '<div class="no-data">Charting library not available for worker distribution.</div>';
+        }
+      };
+    </script>
+  `;
+}
+/**
+ * A tooltip providing information about why worker -1 is special in Playwright.
+ * @type {string}
+ */
+const infoTooltip = `
+  <span class="info-tooltip" style="display: inline-block; margin-left: 8px;">
+    <span class="info-icon" 
+          style="cursor: pointer; font-size: 1.25rem;"
+          onclick="window.workerInfoPrompt()">ℹ️</span>
+  </span>
+  <script>
+    window.workerInfoPrompt = function() {
+      const message = 'Why is worker -1 special?\\n\\n' +
+                     'Playwright assigns skipped tests to worker -1 because:\\n' +
+                     '1. They don\\'t require browser execution\\n' +
+                     '2. This keeps real workers focused on actual tests\\n' +
+                     '3. Maintains clean reporting\\n\\n' +
+                     'This is an intentional optimization by Playwright.';
+      alert(message);
+    }
+  </script>
+`;
+/**
+ * Generates the HTML content for the test history section.
+ * @param {object} trendData - The historical trend data.
+ * @returns {string} The HTML string for the test history content.
+ */
+function generateTestHistoryContent(trendData) {
+  if (
+    !trendData ||
+    !trendData.testRuns ||
+    Object.keys(trendData.testRuns).length === 0
+  ) {
+    return '<div class="no-data">No historical test data available.</div>';
+  }
+
+  const allTestNamesAndPaths = new Map();
+  Object.values(trendData.testRuns).forEach((run) => {
+    if (Array.isArray(run)) {
+      run.forEach((test) => {
+        if (test && test.testName && !allTestNamesAndPaths.has(test.testName)) {
+          const parts = test.testName.split(" > ");
+          const title = parts[parts.length - 1];
+          allTestNamesAndPaths.set(test.testName, title);
+        }
+      });
+    }
+  });
+
+  if (allTestNamesAndPaths.size === 0) {
+    return '<div class="no-data">No historical test data found after processing.</div>';
+  }
+
+  const testHistory = Array.from(allTestNamesAndPaths.entries())
+    .map(([fullTestName, testTitle]) => {
+      const history = [];
+      (trendData.overall || []).forEach((overallRun, index) => {
+        const runKey = overallRun.runId
+          ? `test run ${overallRun.runId}`
+          : `test run ${index + 1}`;
+        const testRunForThisOverallRun = trendData.testRuns[runKey]?.find(
+          (t) => t && t.testName === fullTestName
+        );
+        if (testRunForThisOverallRun) {
+          history.push({
+            runId: overallRun.runId || index + 1,
+            status: testRunForThisOverallRun.status || "unknown",
+            duration: testRunForThisOverallRun.duration || 0,
+            timestamp:
+              testRunForThisOverallRun.timestamp ||
+              overallRun.timestamp ||
+              new Date(),
+          });
+        }
+      });
+      return { fullTestName, testTitle, history };
+    })
+    .filter((item) => item.history.length > 0);
+
+  return `
+    <div class="test-history-container">
+      <div class="filters" style="border-color: black; border-style: groove;">
+    <input type="text" id="history-filter-name" placeholder="Search by test title..." style="border-color: black; border-style: outset;">
+    <select id="history-filter-status">
+        <option value="">All Statuses</option>
+        <option value="passed">Passed</option>
+        <option value="failed">Failed</option>
+        <option value="skipped">Skipped</option>
+    </select>
+    <button id="clear-history-filters" class="clear-filters-btn">Clear Filters</button>
+</div>
+      
+      <div class="test-history-grid">
+        ${testHistory
+          .map((test) => {
+            const latestRun =
+              test.history.length > 0
+                ? test.history[test.history.length - 1]
+                : { status: "unknown" };
+            return `
+            <div class="test-history-card" data-test-name="${sanitizeHTML(
+              test.testTitle.toLowerCase()
+            )}" data-latest-status="${latestRun.status}">
+              <div class="test-history-header">
+                <p title="${sanitizeHTML(test.testTitle)}">${capitalize(
+              sanitizeHTML(test.testTitle)
+            )}</p>
+                <span class="status-badge ${getStatusClass(latestRun.status)}">
+                  ${String(latestRun.status).toUpperCase()}
+                </span>
+              </div>
+              <div class="test-history-trend">
+                ${generateTestHistoryChart(test.history)} 
+              </div>
+              <details class="test-history-details-collapsible">
+                <summary>Show Run Details (${test.history.length})</summary>
+                <div class="test-history-details">
+                  <table>
+                    <thead><tr><th>Run</th><th>Status</th><th>Duration</th><th>Date</th></tr></thead>
+                    <tbody>
+                      ${test.history
+                        .slice()
+                        .reverse()
+                        .map(
+                          (run) => `
+                        <tr>
+                          <td>${run.runId}</td>
+                          <td><span class="status-badge-small ${getStatusClass(
+                            run.status
+                          )}">${String(run.status).toUpperCase()}</span></td>
+                          <td>${formatDuration(run.duration)}</td>
+                          <td>${formatDate(run.timestamp)}</td>
+                        </tr>`
+                        )
+                        .join("")}
+                    </tbody>
+                  </table>
+                </div>
+              </details>
+            </div>`;
+          })
+          .join("")}
+      </div>
+    </div>
   `;
 }
+/**
+ * Gets the CSS class for a given test status.
+ * @param {string} status - The test status.
+ * @returns {string} The CSS class for the status.
+ */
 function getStatusClass(status) {
   switch (String(status).toLowerCase()) {
     case "passed":
@@ -1154,6 +1519,11 @@ function getStatusClass(status) {
       return "status-unknown";
   }
 }
+/**
+ * Gets the icon for a given test status.
+ * @param {string} status - The test status.
+ * @returns {string} The icon for the status.
+ */
 function getStatusIcon(status) {
   switch (String(status).toLowerCase()) {
     case "passed":
@@ -1166,6 +1536,11 @@ function getStatusIcon(status) {
       return "❓";
   }
 }
+/**
+ * Processes test results to extract suite data.
+ * @param {Array<object>} results - The test results.
+ * @returns {Array<object>} An array of suite data objects.
+ */
 function getSuitesData(results) {
   const suitesMap = new Map();
   if (!results || results.length === 0) return [];
@@ -1214,6 +1589,16 @@ function getSuitesData(results) {
   });
   return Array.from(suitesMap.values());
 }
+/**
+ * Returns an icon for a given content type.
+ * @param {string} contentType - The content type of the file.
+ * @returns {string} The icon for the content type.
+ */
+/**
+ * Returns an icon for a given content type.
+ * @param {string} contentType - The content type of the file.
+ * @returns {string} The icon for the content type.
+ */
 function getAttachmentIcon(contentType) {
   if (!contentType) return "📎"; // Handle undefined/null
 
@@ -1227,6 +1612,16 @@ function getAttachmentIcon(contentType) {
   if (normalizedType.startsWith("text/")) return "📝";
   return "📎";
 }
+/**
+ * Generates the HTML for the suites widget.
+ * @param {Array} suitesData - The data for the suites.
+ * @returns {string} The HTML for the suites widget.
+ */
+/**
+ * Generates the HTML for the suites widget.
+ * @param {Array} suitesData - The data for the suites.
+ * @returns {string} The HTML for the suites widget.
+ */
 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>`;
@@ -1270,273 +1665,122 @@ function generateSuitesWidget(suitesData) {
                 ? `<span class="stat-failed" title="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg> ${suite.failed}</span>`
                 : ""
             }
-            ${
-              suite.skipped > 0
-                ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
-                : ""
-            }
-        </div>
-      </div>
-    </div>`
-      )
-      .join("")}
-  </div>
-</div>`;
-}
-function generateWorkerDistributionChart(results) {
-  if (!results || results.length === 0) {
-    return '<div class="no-data">No test results data available to display worker distribution.</div>';
-  }
-
-  // 1. Sort results by startTime to ensure chronological order
-  const sortedResults = [...results].sort((a, b) => {
-    const timeA = a.startTime ? new Date(a.startTime).getTime() : 0;
-    const timeB = b.startTime ? new Date(b.startTime).getTime() : 0;
-    return timeA - timeB;
-  });
-
-  const workerData = sortedResults.reduce((acc, test) => {
-    const workerId =
-      typeof test.workerId !== "undefined" ? test.workerId : "N/A";
-    if (!acc[workerId]) {
-      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
-    }
-
-    const status = String(test.status).toLowerCase();
-    if (status === "passed" || status === "failed" || status === "skipped") {
-      acc[workerId][status]++;
-    }
-
-    const testTitleParts = test.name.split(" > ");
-    const testTitle =
-      testTitleParts[testTitleParts.length - 1] || "Unnamed Test";
-    // Store both name and status for each test
-    acc[workerId].tests.push({ name: testTitle, status: status });
-
-    return acc;
-  }, {});
-
-  const workerIds = Object.keys(workerData).sort((a, b) => {
-    if (a === "N/A") return 1;
-    if (b === "N/A") return -1;
-    return parseInt(a, 10) - parseInt(b, 10);
-  });
-
-  if (workerIds.length === 0) {
-    return '<div class="no-data">Could not determine worker distribution from test data.</div>';
-  }
-
-  const chartId = `workerDistChart-${Date.now()}-${Math.random()
-    .toString(36)
-    .substring(2, 7)}`;
-  const renderFunctionName = `renderWorkerDistChart_${chartId.replace(
-    /-/g,
-    "_"
-  )}`;
-  const modalJsNamespace = `modal_funcs_${chartId.replace(/-/g, "_")}`;
-
-  // The categories now just need the name for the axis labels
-  const categories = workerIds.map((id) => `Worker ${id}`);
-
-  // We pass the full data separately to the script
-  const fullWorkerData = workerIds.map((id) => ({
-    id: id,
-    name: `Worker ${id}`,
-    tests: workerData[id].tests,
-  }));
+            ${
+              suite.skipped > 0
+                ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
+                : ""
+            }
+        </div>
+      </div>
+    </div>`
+      )
+      .join("")}
+  </div>
+</div>`;
+}
+/**
+ * Generates the HTML for the AI failure analyzer tab.
+ * @param {Array} results - The results of the test run.
+ * @returns {string} The HTML for the AI failure analyzer tab.
+ */
+function generateAIFailureAnalyzerTab(results) {
+  const failedTests = (results || []).filter(
+    (test) => test.status === "failed"
+  );
 
-  const passedData = workerIds.map((id) => workerData[id].passed);
-  const failedData = workerIds.map((id) => workerData[id].failed);
-  const skippedData = workerIds.map((id) => workerData[id].skipped);
+  if (failedTests.length === 0) {
+    return `
+      <h2 class="tab-main-title">AI Failure Analysis</h2>
+      <div class="no-data">Congratulations! No failed tests in this run.</div>
+    `;
+  }
 
-  const categoriesString = JSON.stringify(categories);
-  const fullDataString = JSON.stringify(fullWorkerData);
-  const seriesString = JSON.stringify([
-    { name: "Passed", data: passedData, color: "var(--success-color)" },
-    { name: "Failed", data: failedData, color: "var(--danger-color)" },
-    { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
-  ]);
+  // btoa is not available in Node.js environment, so we define a simple polyfill for it.
+  const btoa = (str) => Buffer.from(str).toString("base64");
 
-  // The HTML now includes the chart container, the modal, and styles for the modal
   return `
-    <style>
-      .worker-modal-overlay {
-        position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
-        overflow: auto; background-color: rgba(0,0,0,0.6);
-        display: none; align-items: center; justify-content: center;
-      }
-      .worker-modal-content {
-        background-color: #3d4043;
-        color: var(--card-background-color);
-        margin: auto; padding: 20px; border: 1px solid var(--border-color, #888);
-        width: 80%; max-width: 700px; border-radius: 8px;
-        position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-      }
-      .worker-modal-close {
-        position: absolute; top: 10px; right: 20px;
-        font-size: 28px; font-weight: bold; cursor: pointer;
-        line-height: 1;
-      }
-      .worker-modal-close:hover, .worker-modal-close:focus {
-        color: var(--text-color, #000);
-      }
-      #worker-modal-body-${chartId} ul {
-        list-style-type: none; padding-left: 0; margin-top: 15px; max-height: 45vh; overflow-y: auto;
-      }
-       #worker-modal-body-${chartId} li {
-         padding: 8px 5px; border-bottom: 1px solid var(--border-color, #eee);
-         font-size: 0.9em;
-      }
-       #worker-modal-body-${chartId} li:last-child {
-         border-bottom: none;
-      }
-       #worker-modal-body-${chartId} li > span {
-         display: inline-block;
-         width: 70px;
-         font-weight: bold;
-         text-align: right;
-         margin-right: 10px;
-      }
-    </style>
-
-    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}" style="min-height: 350px;">
-      <div class="no-data">Loading Worker Distribution Chart...</div>
+    <h2 class="tab-main-title">AI Failure Analysis</h2>
+    <div class="ai-analyzer-stats">
+        <div class="stat-item">
+            <span class="stat-number">${failedTests.length}</span>
+            <span class="stat-label">Failed Tests</span>
+        </div>
+        <div class="stat-item">
+            <span class="stat-number">${
+              new Set(failedTests.map((t) => t.browser)).size
+            }</span>
+            <span class="stat-label">Browsers</span>
+        </div>
+        <div class="stat-item">
+            <span class="stat-number">${Math.round(
+              failedTests.reduce((sum, test) => sum + (test.duration || 0), 0) /
+                1000
+            )}s</span>
+            <span class="stat-label">Total Duration</span>
+        </div>
     </div>
-
-    <div id="worker-modal-${chartId}" class="worker-modal-overlay">
-      <div class="worker-modal-content">
-        <span class="worker-modal-close">×</span>
-        <h3 id="worker-modal-title-${chartId}" style="text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.25em; font-weight: 600; color: #fff"></h3>
-        <div id="worker-modal-body-${chartId}"></div>
-      </div>
+    <p class="ai-analyzer-description">
+        Analyze failed tests using AI to get suggestions and potential fixes. Click the AI Fix button for specific failed test.
+    </p>
+    
+    <div class="compact-failure-list">
+      ${failedTests
+        .map((test) => {
+          const testTitle = test.name.split(" > ").pop() || "Unnamed Test";
+          const testJson = btoa(JSON.stringify(test)); // Base64 encode the test object
+          const truncatedError =
+            (test.errorMessage || "No error message").slice(0, 150) +
+            (test.errorMessage && test.errorMessage.length > 150 ? "..." : "");
+
+          return `
+        <div class="compact-failure-item">
+            <div class="failure-header">
+                <div class="failure-main-info">
+                    <h3 class="failure-title" title="${sanitizeHTML(
+                      test.name
+                    )}">${sanitizeHTML(testTitle)}</h3>
+                    <div class="failure-meta">
+                        <span class="browser-indicator">${sanitizeHTML(
+                          test.browser || "unknown"
+                        )}</span>
+                        <span class="duration-indicator">${formatDuration(
+                          test.duration
+                        )}</span>
+                    </div>
+                </div>
+                <button class="compact-ai-btn" onclick="getAIFix(this)" data-test-json="${testJson}">
+                    <span class="ai-text">AI Fix</span>
+                </button>
+            </div>
+            <div class="failure-error-preview">
+                <div class="error-snippet">${formatPlaywrightError(
+                  truncatedError
+                )}</div>
+                <button class="expand-error-btn" onclick="toggleErrorDetails(this)">
+                    <span class="expand-text">Show Full Error</span>
+                    <span class="expand-icon">▼</span>
+                </button>
+            </div>
+            <div class="full-error-details" style="display: none;">
+                <div class="full-error-content">
+                    ${formatPlaywrightError(
+                      test.errorMessage || "No detailed error message available"
+                    )}
+                </div>
+            </div>
+        </div>
+        `;
+        })
+        .join("")}
     </div>
-
-    <script>
-      // Namespace for modal functions to avoid global scope pollution
-      window.${modalJsNamespace} = {};
-
-      window.${renderFunctionName} = function() {
-        const chartContainer = document.getElementById('${chartId}');
-        if (!chartContainer) { console.error("Chart container ${chartId} not found."); return; }
-
-        // --- Modal Setup ---
-        const modal = document.getElementById('worker-modal-${chartId}');
-        const modalTitle = document.getElementById('worker-modal-title-${chartId}');
-        const modalBody = document.getElementById('worker-modal-body-${chartId}');
-        const closeModalBtn = modal.querySelector('.worker-modal-close');
-
-        window.${modalJsNamespace}.open = function(worker) {
-          if (!worker) return;
-          modalTitle.textContent = 'Test Details for ' + worker.name;
-
-          let testListHtml = '<ul>';
-          if (worker.tests && worker.tests.length > 0) {
-            worker.tests.forEach(test => {
-                let color = 'inherit';
-                if (test.status === 'passed') color = 'var(--success-color)';
-                else if (test.status === 'failed') color = 'var(--danger-color)';
-                else if (test.status === 'skipped') color = 'var(--warning-color)';
-
-                const escapedName = test.name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
-                testListHtml += \`<li style="color: \${color};"><span style="color: \${color}">[\${test.status.toUpperCase()}]</span> \${escapedName}</li>\`;
-            });
-          } else {
-            testListHtml += '<li>No detailed test data available for this worker.</li>';
-          }
-          testListHtml += '</ul>';
-
-          modalBody.innerHTML = testListHtml;
-          modal.style.display = 'flex';
-        };
-
-        const closeModal = function() {
-          modal.style.display = 'none';
-        };
-
-        closeModalBtn.onclick = closeModal;
-        modal.onclick = function(event) {
-          // Close if clicked on the dark overlay background
-          if (event.target == modal) {
-            closeModal();
-          }
-        };
-
-
-        // --- Highcharts Setup ---
-        if (typeof Highcharts !== 'undefined') {
-          try {
-            chartContainer.innerHTML = '';
-            const fullData = ${fullDataString};
-
-            const chartOptions = {
-              chart: { type: 'bar', height: 350, backgroundColor: 'transparent' },
-              title: { text: null },
-              xAxis: {
-                categories: ${categoriesString},
-                title: { text: 'Worker ID' },
-                labels: { style: { color: 'var(--text-color-secondary)' }}
-              },
-              yAxis: {
-                min: 0,
-                title: { text: 'Number of Tests' },
-                labels: { style: { color: 'var(--text-color-secondary)' }},
-                stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'var(--text-color)' } }
-              },
-              legend: { reversed: true, itemStyle: { fontSize: "12px", color: 'var(--text-color)' } },
-              plotOptions: {
-                series: {
-                  stacking: 'normal',
-                  cursor: 'pointer',
-                  point: {
-                    events: {
-                      click: function () {
-                        // 'this.x' is the index of the category
-                        const workerData = fullData[this.x];
-                        window.${modalJsNamespace}.open(workerData);
-                      }
-                    }
-                  }
-                }
-              },
-              tooltip: {
-                shared: true,
-                headerFormat: '<b>{point.key}</b> (Click for details)<br/>',
-                pointFormat: '<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
-                footerFormat: 'Total: <b>{point.total}</b>'
-              },
-              series: ${seriesString},
-              credits: { enabled: false }
-            };
-            Highcharts.chart('${chartId}', chartOptions);
-          } catch (e) {
-            console.error("Error rendering chart ${chartId}:", e);
-            chartContainer.innerHTML = '<div class="no-data">Error rendering worker distribution chart.</div>';
-          }
-        } else {
-          chartContainer.innerHTML = '<div class="no-data">Charting library not available for worker distribution.</div>';
-        }
-      };
-    </script>
   `;
 }
-const infoTooltip = `
-  <span class="info-tooltip" style="display: inline-block; margin-left: 8px;">
-    <span class="info-icon" 
-          style="cursor: pointer; font-size: 1.25rem;"
-          onclick="window.workerInfoPrompt()">ℹ️</span>
-  </span>
-  <script>
-    window.workerInfoPrompt = function() {
-      const message = 'Why is worker -1 special?\\n\\n' +
-                     'Playwright assigns skipped tests to worker -1 because:\\n' +
-                     '1. They don\\'t require browser execution\\n' +
-                     '2. This keeps real workers focused on actual tests\\n' +
-                     '3. Maintains clean reporting\\n\\n' +
-                     'This is an intentional optimization by Playwright.';
-      alert(message);
-    }
-  </script>
-`;
+/**
+ * Generates the HTML report.
+ * @param {object} reportData - The data for the report.
+ * @param {object} trendData - The data for the trend chart.
+ * @returns {string} The HTML report.
+ */
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -1559,11 +1803,16 @@ function generateHTML(reportData, trendData = null) {
       ? formatDuration(runSummary.duration / runSummary.totalTests)
       : "0.0s";
 
-  function generateTestCasesHTML() {
+  /**
+   * Generates the HTML for the test cases.
+   * @returns {string} The HTML for the test cases.
+   */
+  function generateTestCasesHTML(subset = results, baseIndex = 0) {
     if (!results || results.length === 0)
       return '<div class="no-tests">No test results found in this run.</div>';
-    return results
-      .map((test) => {
+    return subset
+      .map((test, i) => {
+        const testIndex = baseIndex + i;
         const browser = test.browser || "unknown";
         const testFileParts = test.name.split(" > ");
         const testTitle =
@@ -1601,6 +1850,42 @@ function generateHTML(reportData, trendData = null) {
                         : ""
                     }<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
                   : ""
+              }${
+                (() => {
+                  if (!step.attachments || step.attachments.length === 0) return "";
+                  return `<div class="attachments-section"><h4>Step Attachments</h4><div class="attachments-grid">${step.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="view-full lazy-load-attachment" target="_blank">View</a>
+                                      <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>`;
+                })()
               }${
                 hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
@@ -1618,7 +1903,7 @@ function generateHTML(reportData, trendData = null) {
           test.tags || []
         )
           .join(",")
-          .toLowerCase()}">
+          .toLowerCase()}" data-test-id="${sanitizeHTML(String(test.id || testIndex))}">
                     <div class="test-case-header" role="button" aria-expanded="false"><div class="test-case-summary"><span class="status-badge ${getStatusClass(
                       test.status
                     )}">${String(
@@ -1654,6 +1939,13 @@ function generateHTML(reportData, trendData = null) {
                               )}<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
                             : ""
                         }
+                        ${
+                          test.snippet
+                            ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
+                                test.snippet
+                              )}</code></pre></div>`
+                            : ""
+                        }
                         <h4>Steps</h4><div class="steps-list">${generateStepsHTML(
                           test.steps
                         )}</div>
@@ -1677,9 +1969,12 @@ function generateHTML(reportData, trendData = null) {
                         })()}
                         ${
                           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>`
+                            ? (() => {
+                                const logId = `stderr-log-${test.id || testIndex}`;
+                                return `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre id="${logId}" class="console-log stderr-log">${test.stderr
+                                  .map((line) => sanitizeHTML(line))
+                                  .join("\\n")}</pre></div>`;
+                              })()
                             : ""
                         }
                         
@@ -1704,7 +1999,7 @@ function generateHTML(reportData, trendData = null) {
                                   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>`;
+                                }" class="lazy-load-image"><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="data:image/png;base64,${base64ImageData}" class="lazy-load-attachment" 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
@@ -1745,7 +2040,7 @@ function generateHTML(reportData, trendData = null) {
                                     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>`;
+                                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="#" data-href="${videoDataUri}" class="lazy-load-attachment" 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
@@ -1821,8 +2116,8 @@ function generateHTML(reportData, trendData = null) {
                                           </div>
                                           <div class="attachment-info">
                                             <div class="trace-actions">
-                                              <a href="${attachmentDataUri}" target="_blank" class="view-full">View</a>
-                                              <a href="${attachmentDataUri}" download="${sanitizeHTML(
+                                              <a href="#" data-href="${attachmentDataUri}" class="view-full lazy-load-attachment" target="_blank">View</a>
+                                              <a href="#" data-href="${attachmentDataUri}" class="lazy-load-attachment" download="${sanitizeHTML(
                                   attachment.name
                                 )}">Download</a>
                                             </div>
@@ -1862,172 +2157,241 @@ function generateHTML(reportData, trendData = null) {
     <link rel="icon" type="image/png" href="https://i.postimg.cc/v817w4sg/logo.png">
     <link rel="apple-touch-icon" href="https://i.postimg.cc/v817w4sg/logo.png">
     <script src="https://code.highcharts.com/highcharts.js" defer></script>
-    <title>Playwright Pulse Report</title>
-    <style>
-        :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 { 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: 55px; }
-        .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: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; }
-        .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; }
-        .summary-card .trend-percentage { font-size: 1em; color: var(--dark-gray-color); }
-        .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-"] { 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: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); }
-        .suite-card.status-skipped { border-left-color: var(--warning-color); }
-        .suite-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
-        .suite-name { font-weight: 600; font-size: 1.05em; color: var(--text-color); margin-right: 10px; word-break: break-word;}
-        .browser-tag { font-size: 0.8em; background-color: var(--medium-gray-color); color: var(--text-color-secondary); padding: 3px 8px; border-radius: 4px; white-space: nowrap;}
-        .suite-card-body .test-count { font-size: 0.95em; color: var(--text-color-secondary); display: block; margin-bottom: 10px; }
-        .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 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-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.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: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; }
-        .step-duration { color: var(--dark-gray-color); font-size: 0.9em; }
-        .step-details { display: none; padding: 14px; margin-top: 8px; background: #fdfdfd; border-radius: 6px; font-size: 0.95em; border: 1px solid var(--light-gray-color); }
-        .step-info { margin-bottom: 8px; }
-        .test-error-summary { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(244,67,54,0.05); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
-        .test-error-summary pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
-        .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:hover { transform: translateY(-4px); box-shadow: var(--box-shadow); }
-        .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); }
-        .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; }
-        .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-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; } /* 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-"] { 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.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-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);}
-        .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; }
-        .copy-btn {color: var(--primary-color); background: #fefefe; border-radius: 8px; cursor: pointer; border-color: var(--primary-color); font-size: 1em; margin-left: 93%; font-weight: 600;}
-        @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: 45px; } .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; }
-        .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>
+    <title>Playwright Pulse Report (Static Report)</title>
+    
+<style>
+:root {
+--primary-color: #60a5fa; --secondary-color: #f472b6; --accent-color: #a78bfa; --accent-color-alt: #fb923c;
+--success-color: #34d399; --danger-color: #f87171; --warning-color: #fbbf24; --info-color: #60a5fa;
+--light-gray-color: #374151; --medium-gray-color: #4b5563; --dark-gray-color: #9ca3af;
+--text-color: #f9fafb; --text-color-secondary: #d1d5db; --border-color: #4b5563; --background-color: #111827;
+--card-background-color: #1f2937; --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.3); --box-shadow-light: 0 3px 8px rgba(0,0,0,0.2); --box-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.3);
+}
+.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); }
+.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(31,41,55,0.95) !important; border-color: rgba(31,41,55,0.95) !important; color: #f9fafb !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 { padding: 30px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); background: repeating-linear-gradient(#1f2937, #374151, #1f2937); }
+.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: 55px; }
+.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: var(--text-color); 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; }
+.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; }
+.summary-card .trend-percentage { font-size: 1em; color: var(--dark-gray-color); }
+.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-"] { 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: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); }
+.suite-card.status-skipped { border-left-color: var(--warning-color); }
+.suite-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
+.suite-name { font-weight: 600; font-size: 1.05em; color: var(--text-color); margin-right: 10px; word-break: break-word;}
+.browser-tag { font-size: 0.8em; background-color: var(--medium-gray-color); color: var(--text-color-secondary); padding: 3px 8px; border-radius: 4px; white-space: nowrap;}
+.suite-card-body .test-count { font-size: 0.95em; color: var(--text-color-secondary); display: block; margin-bottom: 10px; }
+.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: 1px solid var(--border-color); }
+.filters input, .filters select, .filters button { padding: 11px 15px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1em; background-color: var(--card-background-color); color: var(--text-color); }
+.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.3);}
+.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: var(--card-background-color); 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: var(--light-gray-color); }
+.test-case-header[aria-expanded="true"] { border-bottom-color: var(--border-color); background-color: var(--light-gray-color); }
+.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.3); }
+.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(#4b5563, #1f2937, #111827); color: #f9fafb; 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: var(--light-gray-color); }
+.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(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); 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; }
+@supports (content-visibility: auto) {
+.tab-content,
+#test-runs .test-case,
+.attachments-section,
+.test-history-card,
+.trend-chart,
+.suite-card {
+content-visibility: auto;
+contain-intrinsic-size: 1px 600px;
+}
+}
+.test-case,
+.test-history-card,
+.suite-card,
+.attachments-section {
+contain: content;
+}
+.attachments-grid .attachment-item img.lazy-load-image {
+width: 100%;
+aspect-ratio: 4 / 3;
+object-fit: cover;
+}
+.attachments-grid .attachment-item.video-item {
+aspect-ratio: 16 / 9;
+}
+
+.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: var(--card-background-color); 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: var(--light-gray-color); 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; }
+.step-duration { color: var(--dark-gray-color); font-size: 0.9em; }
+.step-details { display: none; padding: 14px; margin-top: 8px; background: var(--light-gray-color); border-radius: 6px; font-size: 0.95em; border: 1px solid var(--light-gray-color); }
+.step-info { margin-bottom: 8px; }
+.test-error-summary { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(248,113,113,0.1); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
+.test-error-summary pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.2); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
+.step-hook { background-color: rgba(96,165,250,0.1); 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: var(--card-background-color); box-shadow: var(--box-shadow-light); 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, .attachment-item video { width: 100%; height: 180px; object-fit: cover; display: block; background-color: var(--medium-gray-color); border-bottom: 1px solid var(--border-color); transition: opacity 0.3s ease; }
+.attachment-info { padding: 12px; margin-top: auto; background-color: var(--light-gray-color);}
+.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); }
+.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: #111827; color: #f9fafb; 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; }
+.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-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-trend { margin-bottom: 20px; min-height: 110px; }
+.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.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-chart {font-size: 0.95em; padding: 18px;}
+.ai-failure-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 22px; }
+.ai-failure-card { background: var(--card-background-color); border: 1px solid var(--border-color); border-left: 5px solid var(--danger-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); display: flex; flex-direction: column; }
+.ai-failure-card-header { padding: 15px 20px; border-bottom: 1px solid var(--light-gray-color); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
+.ai-failure-card-header h3 { margin: 0; font-size: 1.1em; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ai-failure-card-body { padding: 20px; }
+.ai-fix-btn { background-color: var(--primary-color); color: white; border: none; padding: 10px 18px; font-size: 1em; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }
+.ai-fix-btn:hover { background-color: var(--accent-color); transform: translateY(-2px); }
+.ai-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1050; animation: fadeIn 0.3s; }
+.ai-modal-content { background-color: var(--card-background-color); color: var(--text-color); border-radius: var(--border-radius); width: 90%; max-width: 800px; max-height: 90vh; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; }
+.ai-modal-header { padding: 18px 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
+.ai-modal-header h3 { margin: 0; font-size: 1.25em; }
+.ai-modal-close { font-size: 2rem; font-weight: 300; cursor: pointer; color: var(--dark-gray-color); line-height: 1; transition: color 0.2s; }
+.ai-modal-close:hover { color: var(--danger-color); }
+.ai-modal-body { padding: 25px; overflow-y: auto; }
+.ai-modal-body h4 { margin-top: 18px; margin-bottom: 10px; font-size: 1.1em; color: var(--primary-color); }
+.ai-modal-body p { margin-bottom: 15px; }
+.ai-loader { margin: 40px auto; border: 5px solid var(--medium-gray-color); border-top: 5px solid var(--primary-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+.trace-preview { padding: 1rem; text-align: center; background: var(--light-gray-color); border-bottom: 1px solid var(--border-color); }
+.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: var(--primary-color); color: white; }
+.view-trace { background: var(--primary-color); color: white; }
+.view-trace:hover { background: var(--accent-color); }
+.download-trace { background: var(--medium-gray-color); color: var(--text-color); }
+.download-trace:hover { background: var(--dark-gray-color); }
+.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; }
+.copy-btn {color: var(--primary-color); background: var(--card-background-color); border-radius: 8px; cursor: pointer; border-color: var(--primary-color); font-size: 1em; margin-left: 93%; font-weight: 600;}
+.ai-analyzer-stats { display: flex; gap: 20px; margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-radius: var(--border-radius); justify-content: center; }
+.stat-item { text-align: center; color: white; }
+.stat-number { display: block; font-size: 2em; font-weight: 700; line-height: 1;}
+.stat-label { font-size: 0.9em; opacity: 0.9; font-weight: 500;}
+.ai-analyzer-description { margin-bottom: 25px; font-size: 1em; color: var(--text-color-secondary); text-align: center; max-width: 600px; margin-left: auto; margin-right: auto;}
+.compact-failure-list { display: flex; flex-direction: column; gap: 15px; }
+.compact-failure-item { background: var(--card-background-color); border: 1px solid var(--border-color); border-left: 4px solid var(--danger-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-light); transition: transform 0.2s ease, box-shadow 0.2s ease;}
+.compact-failure-item:hover { transform: translateY(-2px); box-shadow: var(--box-shadow); }
+.failure-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; gap: 15px;}
+.failure-main-info { flex: 1; min-width: 0; }
+.failure-title { margin: 0 0 8px 0; font-size: 1.1em; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.failure-meta { display: flex; gap: 12px; align-items: center;}
+.browser-indicator, .duration-indicator { font-size: 0.85em; padding: 3px 8px; border-radius: 12px; font-weight: 500;}
+.browser-indicator { background: var(--info-color); color: white; }
+#load-more-tests { font-size: 16px; padding: 4px; background-color: var(--light-gray-color); border-radius: 4px; color: var(--text-color); }
+.duration-indicator { background: var(--medium-gray-color); color: var(--text-color); }
+.compact-ai-btn { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: white; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; white-space: nowrap;}
+.compact-ai-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(55, 65, 81, 0.4); }
+.ai-text { font-size: 0.95em; }
+.failure-error-preview { padding: 0 20px 18px 20px; border-top: 1px solid var(--light-gray-color);}
+.error-snippet { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 6px; padding: 12px; margin-bottom: 12px; font-family: monospace; font-size: 0.9em; color: var(--danger-color); line-height: 1.4;}
+.expand-error-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color-secondary); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85em; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease;}
+.expand-error-btn:hover { background: var(--light-gray-color); border-color: var(--medium-gray-color); }
+.expand-icon { transition: transform 0.2s ease; font-size: 0.8em;}
+.expand-error-btn.expanded .expand-icon { transform: rotate(180deg); }
+.full-error-details { padding: 0 20px 20px 20px; border-top: 1px solid var(--light-gray-color); margin-top: 0;}
+.full-error-content { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 6px; padding: 15px; font-family: monospace; font-size: 0.9em; color: var(--danger-color); line-height: 1.4; max-height: 300px; overflow-y: auto;}
+@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;} .ai-failure-cards-grid { grid-template-columns: 1fr; } .ai-analyzer-stats { flex-direction: column; gap: 15px; text-align: center; } .failure-header { flex-direction: column; align-items: stretch; gap: 15px; } .failure-main-info { text-align: center; } .failure-meta { justify-content: center; } .compact-ai-btn { justify-content: center; padding: 12px 20px; } }
+@media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 45px; } .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;} .stat-item .stat-number { font-size: 1.5em; } .failure-header { padding: 15px; } .failure-error-preview, .full-error-details { padding-left: 15px; padding-right: 15px; } }
+.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; }
+.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); }
+.footer-text { color: white }
+</style>
 </head>
 <body>
     <div class="container">
@@ -2046,7 +2410,7 @@ function generateHTML(reportData, trendData = null) {
             <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>
+            <button class="tab-button" data-tab="ai-failure-analyzer">AI Failure Analyzer</button>
         </div>
         <div id="dashboard" class="tab-content active">
             <div class="dashboard-grid">
@@ -2106,7 +2470,18 @@ function generateHTML(reportData, trendData = null) {
                   .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 class="test-cases-list">${generateTestCasesHTML(
+              results.slice(0, 50),
+              0
+            )}</div>
+            ${
+              results.length > 50
+                ? `<div class="load-more-wrapper"><button id="load-more-tests">Load more</button></div><script type="application/json" id="remaining-tests-b64">${Buffer.from(
+                    generateTestCasesHTML(results.slice(50), 50),
+                    "utf8"
+                  ).toString("base64")}</script>`
+                : ``
+            }
         </div>
         <div id="test-history" class="tab-content">
           <h2 class="tab-main-title">Execution Trends</h2>
@@ -2141,12 +2516,12 @@ 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 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 id="ai-failure-analyzer" class="tab-content">
+            ${generateAIFailureAnalyzerTab(results)}
         </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;">
-                <span>Created by</span>
+                <span class="footer-text">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>
@@ -2174,7 +2549,129 @@ function generateHTML(reportData, trendData = null) {
             button.textContent = 'Failed';
              setTimeout(() => { button.textContent = 'Copy'; }, 2000);
         });
-    } 
+    }
+
+    function getAIFix(button) {
+        const modal = document.getElementById('ai-fix-modal');
+        const modalContent = document.getElementById('ai-fix-modal-content');
+        const modalTitle = document.getElementById('ai-fix-modal-title');
+        
+        modal.style.display = 'flex';
+        document.body.style.setProperty('overflow', 'hidden', 'important');
+        modalTitle.textContent = 'Analyzing...';
+        modalContent.innerHTML = '<div class="ai-loader"></div>';
+
+        try {
+            const testJson = button.dataset.testJson;
+            const test = JSON.parse(atob(testJson));
+
+            const testName = test.name || 'Unknown Test';
+            const failureLogsAndErrors = [
+                'Error Message:',
+                test.errorMessage || 'Not available.',
+                '\\n\\n--- stdout ---',
+                (test.stdout && test.stdout.length > 0) ? test.stdout.join('\\n') : 'Not available.',
+                '\\n\\n--- stderr ---',
+                (test.stderr && test.stderr.length > 0) ? test.stderr.join('\\n') : 'Not available.'
+            ].join('\\n');
+            const codeSnippet = test.snippet || '';
+
+            const shortTestName = testName.split(' > ').pop();
+            modalTitle.textContent = \`Analysis for: \${shortTestName}\`;
+            
+            const apiUrl = 'https://ai-test-analyser.netlify.app/api/analyze';
+            fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    testName: testName,
+                    failureLogsAndErrors: failureLogsAndErrors,
+                    codeSnippet: codeSnippet,
+                }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.text().then(text => { 
+                        throw new Error(\`API request failed with status \${response.status}: \${text || response.statusText}\`);
+                    });
+                }
+                return response.text();
+            })
+            .then(text => {
+                if (!text) {
+                    throw new Error("The AI analyzer returned an empty response. This might happen during high load or if the request was blocked. Please try again in a moment.");
+                }
+                try {
+                    return JSON.parse(text);
+                } catch (e) {
+                    console.error("Failed to parse JSON:", text);
+                    throw new Error(\`The AI analyzer returned an invalid response. \${e.message}\`);
+                }
+            })
+            .then(data => {
+                const escapeHtml = (unsafe) => {
+                    if (typeof unsafe !== 'string') return '';
+                    return unsafe
+                        .replace(/&/g, "&amp;")
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")
+                        .replace(/"/g, "&quot;")
+                        .replace(/'/g, "&#039;");
+                };
+
+                const analysisHtml = \`<h4>Analysis</h4><p>\${escapeHtml(data.rootCause) || 'No analysis provided.'}</p>\`;
+                
+                let suggestionsHtml = '<h4>Suggestions</h4>';
+                if (data.suggestedFixes && data.suggestedFixes.length > 0) {
+                    suggestionsHtml += '<div class="suggestions-list" style="margin-top: 15px;">';
+                    data.suggestedFixes.forEach(fix => {
+                        suggestionsHtml += \`
+                            <div class="suggestion-item" style="margin-bottom: 22px; border-left: 3px solid var(--accent-color-alt); padding-left: 15px;">
+                                <p style="margin: 0 0 8px 0; font-weight: 500;">\${escapeHtml(fix.description)}</p>
+                                \${fix.codeSnippet ? \`<div class="code-section"><pre><code>\${escapeHtml(fix.codeSnippet)}</code></pre></div>\` : ''}
+                            </div>
+                        \`;
+                    });
+                    suggestionsHtml += '</div>';
+                } else {
+                    suggestionsHtml += \`<div class="code-section"><pre><code>No suggestion provided.</code></pre></div>\`;
+                }
+                
+                modalContent.innerHTML = analysisHtml + suggestionsHtml;
+            })
+            .catch(err => {
+                console.error('AI Fix Error:', err);
+                modalContent.innerHTML = \`<div class="test-error-summary"><strong>Error:</strong> Failed to get AI analysis. Please check the console for details. <br><br> \${err.message}</div>\`;
+            });
+
+        } catch (e) {
+            console.error('Error processing test data for AI Fix:', e);
+            modalTitle.textContent = 'Error';
+            modalContent.innerHTML = \`<div class="test-error-summary">Could not process test data. Is it formatted correctly?</div>\`;
+        }
+    }
+
+    function closeAiModal() {
+        const modal = document.getElementById('ai-fix-modal');
+        if(modal) modal.style.display = 'none';
+        document.body.style.setProperty('overflow', '', 'important');
+    }
+
+    function toggleErrorDetails(button) {
+        const errorDetails = button.closest('.compact-failure-item').querySelector('.full-error-details');
+        const expandText = button.querySelector('.expand-text');
+        
+        if (errorDetails.style.display === 'none' || !errorDetails.style.display) {
+            errorDetails.style.display = 'block';
+            expandText.textContent = 'Hide Full Error';
+            button.classList.add('expanded');
+        } else {
+            errorDetails.style.display = 'none';
+            expandText.textContent = 'Show Full Error';
+            button.classList.remove('expanded');
+        }
+    }
+     
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
@@ -2187,18 +2684,51 @@ function generateHTML(reportData, trendData = null) {
                 const activeContent = document.getElementById(tabId);
                 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');
+        function ensureAllTestsAppended() {
+            const node = document.getElementById('remaining-tests-b64');
+            const loadMoreBtn = document.getElementById('load-more-tests');
+            if (!node) return;
+            const b64 = (node.textContent || '').trim();
+            function b64ToUtf8(b64Str) {
+                try { return decodeURIComponent(escape(window.atob(b64Str))); }
+                catch (e) { return window.atob(b64Str); }
+            }
+            const html = b64ToUtf8(b64);
+            const container = document.querySelector('#test-runs .test-cases-list');
+            if (container) container.insertAdjacentHTML('beforeend', html);
+            if (loadMoreBtn) loadMoreBtn.remove();
+            node.remove();
+        }
+        const loadMoreBtn = document.getElementById('load-more-tests');
+        if (loadMoreBtn) {
+            loadMoreBtn.addEventListener('click', () => {
+                const node = document.getElementById('remaining-tests-b64');
+                if (!node) return;
+                const b64 = (node.textContent || '').trim();
+                function b64ToUtf8(b64Str) {
+                    try { return decodeURIComponent(escape(window.atob(b64Str))); }
+                    catch (e) { return window.atob(b64Str); }
+                }
+                const html = b64ToUtf8(b64);
+                const container = document.querySelector('#test-runs .test-cases-list');
+                if (container) container.insertAdjacentHTML('beforeend', html);
+                loadMoreBtn.remove();
+                node.remove();
+            });
+        }
+
+
+
         const statusFilter = document.getElementById('filter-status');
         const browserFilter = document.getElementById('filter-browser');
         const clearRunSummaryFiltersBtn = document.getElementById('clear-run-summary-filters'); 
         function filterTestCases() { 
+            ensureAllTestsAppended();
             const nameValue = nameFilter ? nameFilter.value.toLowerCase() : "";
             const statusValue = statusFilter ? statusFilter.value : "";
             const browserValue = browserFilter ? browserFilter.value : "";
@@ -2217,7 +2747,10 @@ function generateHTML(reportData, trendData = null) {
         if(statusFilter) statusFilter.addEventListener('change', filterTestCases);
         if(browserFilter) browserFilter.addEventListener('change', filterTestCases);
         if(clearRunSummaryFiltersBtn) clearRunSummaryFiltersBtn.addEventListener('click', () => {
-            if(nameFilter) nameFilter.value = ''; if(statusFilter) statusFilter.value = ''; if(browserFilter) browserFilter.value = '';
+            ensureAllTestsAppended();
+            if(nameFilter) nameFilter.value = '';
+            if(statusFilter) statusFilter.value = '';
+            if(browserFilter) browserFilter.value = '';
             filterTestCases();
         });
         // --- Test History Filters ---
@@ -2258,12 +2791,6 @@ function generateHTML(reportData, trendData = null) {
                  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) {
@@ -2274,31 +2801,89 @@ function generateHTML(reportData, trendData = null) {
         }
         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');
+        document.addEventListener('click', (e) => {
+            const inHighcharts = e.target && e.target.closest && e.target.closest('.highcharts-container');
+            if (inHighcharts) {
+                return;
+            }
+            const header = e.target.closest('#test-runs .test-case-header');
+            if (header) {
+                let contentElement = header.parentElement.querySelector('.test-case-content');
+                if (contentElement) {
+                    const isExpanded = contentElement.style.display === 'block';
+                    contentElement.style.display = isExpanded ? 'none' : 'block';
+                    header.setAttribute('aria-expanded', String(!isExpanded));
+                }
+                return;
+            }
+            const stepHeader = e.target.closest('#test-runs .step-header');
+            if (stepHeader) {
+                let details = stepHeader.nextElementSibling;
+                if (details && details.matches('.step-details')) {
+                    const isExpanded = details.style.display === 'block';
+                    details.style.display = isExpanded ? 'none' : 'block';
+                    stepHeader.setAttribute('aria-expanded', String(!isExpanded));
+                }
+                return;
+            }
+            const img = e.target.closest('img.lazy-load-image');
+            if (img && img.dataset && img.dataset.src) {
+                if (e.preventDefault) e.preventDefault();
+                img.src = img.dataset.src;
+                img.removeAttribute('data-src');
+                const parentLink = img.closest('a.lazy-load-attachment');
+                if (parentLink && parentLink.dataset && parentLink.dataset.href) {
+                    parentLink.href = parentLink.dataset.href;
+                    parentLink.removeAttribute('data-href');
+                }
+                return;
+            }
+            const video = e.target.closest('video.lazy-load-video');
+            if (video) {
+                if (e.preventDefault) e.preventDefault();
+                const s = video.querySelector('source');
+                if (s && s.dataset && s.dataset.src && !s.src) {
+                    s.src = s.dataset.src;
+                    s.removeAttribute('data-src');
+                    video.load();
+                } else if (video.dataset && video.dataset.src && !video.src) {
+                    video.src = video.dataset.src;
+                    video.removeAttribute('data-src');
+                    video.load();
+                }
+                return;
+            }
+            const a = e.target.closest('a.lazy-load-attachment');
+            if (a && a.dataset && a.dataset.href) {
+                e.preventDefault();
+                a.href = a.dataset.href;
+                a.removeAttribute('data-href');
+                a.click();
+                return;
+            }
+        });
+        document.addEventListener('play', (e) => {
+            const video = e.target && e.target.closest ? e.target.closest('video.lazy-load-video') : null;
+            if (video) {
+                const s = video.querySelector('source');
+                if (s && s.dataset && s.dataset.src && !s.src) {
+                    s.src = s.dataset.src;
+                    s.removeAttribute('data-src');
+                    video.load();
+                } else if (video.dataset && video.dataset.src && !video.src) {
+                    video.src = video.dataset.src;
+                    video.removeAttribute('data-src');
+                    video.load();
+                }
+            }
+        }, true);
+        const lazyLoadElements = document.querySelectorAll('.lazy-load-chart, .lazy-load-iframe');
         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.classList.contains('lazy-load-iframe')) {
                             if (element.dataset.src) {
                                 element.src = element.dataset.src;
                                 element.removeAttribute('data-src');
@@ -2314,79 +2899,61 @@ function generateHTML(reportData, trendData = null) {
                 });
             }, { rootMargin: "0px 0px 200px 0px" });
             lazyLoadElements.forEach(el => lazyObserver.observe(el));
-        } else { // Fallback for browsers without IntersectionObserver
+        } else {
             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](); }
+                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('.test-error-summary');
-  if (!errorContainer) {
-    console.error("Could not find '.test-error-summary' 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');
+      const errorContainer = button.closest('.test-error-summary');
+      if (!errorContainer) {
+        console.error("Could not find '.test-error-summary' container.");
+        return;
+      }
+      let errorText;
+      const stackTraceElement = errorContainer.querySelector('.stack-trace');
+      if (stackTraceElement) {
+        errorText = stackTraceElement.textContent;
+      } else {
+        const clonedContainer = errorContainer.cloneNode(true);
+        const buttonInClone = clonedContainer.querySelector('button');
+        if (buttonInClone) buttonInClone.remove();
+        errorText = clonedContainer.textContent;
+      }
 
-  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();
+      if (!errorText) {
+        button.textContent = 'Nothing to copy';
+        setTimeout(() => { button.textContent = 'Copy Error'; }, 2000);
+        return;
+      }
+      navigator.clipboard.writeText(errorText.trim()).then(() => {
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        setTimeout(() => { button.textContent = originalText; }, 2000);
+      }).catch(err => {
+        console.error('Failed to copy: ', err);
+        button.textContent = 'Failed';
+      });
     }
-    
-    // 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;
-  }
+</script>
 
-  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();
+<!-- AI Fix Modal -->
+<div id="ai-fix-modal" class="ai-modal-overlay" onclick="closeAiModal()">
+  <div class="ai-modal-content" onclick="event.stopPropagation()">
+    <div class="ai-modal-header">
+        <h3 id="ai-fix-modal-title">AI Analysis</h3>
+        <span class="ai-modal-close" onclick="closeAiModal()">×</span>
+    </div>
+    <div class="ai-modal-body" id="ai-fix-modal-content">
+        <!-- Content will be injected by JavaScript -->
+    </div>
+  </div>
+</div>
 
-  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>
   `;
@@ -2415,6 +2982,11 @@ async function runScript(scriptPath) {
     });
   });
 }
+/**
+ * The main function that orchestrates the generation of the static HTML report.
+ * It reads the latest test run data, loads historical data for trend analysis,
+ * prepares the data, and then generates and writes the final HTML report file.
+ */
 async function main() {
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -2605,4 +3177,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});