@arghajit/playwright-pulse-report 0.3.2 → 0.3.4

package/scripts/generate-report.mjs

@@ -6,6 +6,7 @@ import path from "path";
 import { fork } from "child_process";
 import { fileURLToPath } from "url";
 import { getOutputDir } from "./config-reader.mjs";
+import { animate } from "./terminal-logo.mjs";
 
 // Use dynamic import for chalk as it's ESM only
 let chalk;
@@ -98,12 +99,12 @@ export function ansiToHtml(text) {
       if (codes[code]) {
         if (code === "39") {
           currentStylesArray = currentStylesArray.filter(
-            (s) => !s.startsWith("color:")
+            (s) => !s.startsWith("color:"),
           );
           currentStylesArray.push("color:inherit");
         } else if (code === "49") {
           currentStylesArray = currentStylesArray.filter(
-            (s) => !s.startsWith("background-color:")
+            (s) => !s.startsWith("background-color:"),
           );
           currentStylesArray.push("background-color:inherit");
         } else {
@@ -114,10 +115,10 @@ export function ansiToHtml(text) {
         const type = parts[0] === "38" ? "color" : "background-color";
         if (parts.length === 5) {
           currentStylesArray = currentStylesArray.filter(
-            (s) => !s.startsWith(type + ":")
+            (s) => !s.startsWith(type + ":"),
           );
           currentStylesArray.push(
-            `${type}:rgb(${parts[2]},${parts[3]},${parts[4]})`
+            `${type}:rgb(${parts[2]},${parts[3]},${parts[4]})`,
           );
         }
       }
@@ -175,7 +176,7 @@ function convertPlaywrightErrorToHTML(str) {
   if (!str) return "";
   return str
     .replace(/^(\s+)/gm, (match) =>
-      match.replace(/ /g, " ").replace(/\t/g, "  ")
+      match.replace(/ /g, " ").replace(/\t/g, "  "),
     )
     .replace(/<red>/g, '<span style="color: red;">')
     .replace(/<green>/g, '<span style="color: green;">')
@@ -265,7 +266,7 @@ function generateTestTrendsChart(trendData) {
     .substring(2, 7)}`;
   const renderFunctionName = `renderTestTrendsChart_${chartId.replace(
     /-/g,
-    "_"
+    "_",
   )}`;
   const runs = trendData.overall;
 
@@ -294,6 +295,12 @@ function generateTestTrendsChart(trendData) {
       color: "var(--warning-color)",
       marker: { symbol: "circle" },
     },
+    {
+      name: "Flaky",
+      data: runs.map((r) => r.flaky || 0),
+      color: "#00ccd3",
+      marker: { symbol: "circle" },
+    },
   ];
   const runsForTooltip = runs.map((r) => ({
     runId: r.runId,
@@ -360,7 +367,7 @@ function generateDurationTrendChart(trendData) {
     .substring(2, 7)}`;
   const renderFunctionName = `renderDurationTrendChart_${chartId.replace(
     /-/g,
-    "_"
+    "_",
   )}`;
   const runs = trendData.overall;
 
@@ -455,7 +462,7 @@ function generateTestHistoryChart(history) {
   if (!history || history.length === 0)
     return '<div class="no-data-chart">No data for chart</div>';
   const validHistory = history.filter(
-    (h) => h && typeof h.duration === "number" && h.duration >= 0
+    (h) => h && typeof h.duration === "number" && h.duration >= 0,
   );
   if (validHistory.length === 0)
     return '<div class="no-data-chart">No valid data for chart</div>';
@@ -465,7 +472,7 @@ function generateTestHistoryChart(history) {
     .substring(2, 7)}`;
   const renderFunctionName = `renderTestHistoryChart_${chartId.replace(
     /-/g,
-    "_"
+    "_",
   )}`;
 
   const seriesDataPoints = validHistory.map((run) => {
@@ -480,6 +487,9 @@ function generateTestHistoryChart(history) {
       case "skipped":
         color = "var(--warning-color)";
         break;
+      case "flaky":
+        color = "var(--neutral-500)";
+        break;
       default:
         color = "var(--dark-gray-color)";
     }
@@ -499,12 +509,12 @@ function generateTestHistoryChart(history) {
   const accentColorRGB = "103, 58, 183"; // Assuming var(--accent-color) is Deep Purple #673ab7
 
   const categoriesString = JSON.stringify(
-    validHistory.map((_, i) => `R${i + 1}`)
+    validHistory.map((_, i) => `R${i + 1}`),
   );
   const seriesDataPointsString = JSON.stringify(seriesDataPoints);
 
   return `
-      <div id="${chartId}" style="width: 320px; height: 100px;" class="lazy-load-chart" data-render-function-name="${renderFunctionName}">
+      <div id="${chartId}" style="width: 100%; max-width: 320px; height: 100px;" class="lazy-load-chart" data-render-function-name="${renderFunctionName}">
           <div class="no-data-chart">Loading History...</div>
       </div>
       <script>
@@ -568,7 +578,7 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   }
   const passedEntry = data.find((d) => d.label === "Passed");
   const passedPercentage = Math.round(
-    ((passedEntry ? passedEntry.value : 0) / total) * 100
+    ((passedEntry ? passedEntry.value : 0) / total) * 100,
   );
 
   const chartId = `pieChart-${Date.now()}-${Math.random()
@@ -589,6 +599,9 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
             case "Failed":
               color = "var(--danger-color)";
               break;
+            case "Flaky":
+              color = "#00ccd3";
+              break;
             case "Skipped":
               color = "var(--warning-color)";
               break;
@@ -614,13 +627,11 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   {
       chart: {
           type: 'pie',
-          width: ${chartWidth},
-          height: ${
-            chartHeight - 40
-          }, // Adjusted height to make space for legend if chartHeight is for the whole wrapper
+          width: null,
+          height: ${chartHeight - 40},
           backgroundColor: 'transparent',
           plotShadow: false,
-          spacingBottom: 40 // Ensure space for legend
+          spacingBottom: 40
       },
       title: {
           text: '${passedPercentage}%',
@@ -670,8 +681,8 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       <div class="pie-chart-wrapper" style="align-items: center; max-height: 450px">
           <div style="display: flex; align-items: start; width: 100%;"><h3>Test Distribution</h3></div>
           <div id="${chartId}" style="width: ${chartWidth}px; height: ${
-    chartHeight - 40
-  }px;"></div>
+            chartHeight - 40
+          }px;"></div>
           <script>
               document.addEventListener('DOMContentLoaded', function() {
                   if (typeof Highcharts !== 'undefined') {
@@ -690,24 +701,175 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       </div>
   `;
 }
-function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
-  // Format memory for display
-  const formattedMemory = environment.memory.replace(/(\d+\.\d{2})GB/, "$1 GB");
-
-  // Generate a unique ID for the dashboard
-  const dashboardId = `envDashboard-${Date.now()}-${Math.random()
-    .toString(36)
-    .substring(2, 7)}`;
-
-  const cardHeight = Math.floor(dashboardHeight * 0.44);
-  const cardContentPadding = 16; // px
+function generateEnvironmentSection(environmentData) {
+  if (!environmentData) {
+    return '<div class="no-data">Environment data not available.</div>';
+  }
+  
+  if (Array.isArray(environmentData)) {
+    return `
+      <div class="sharded-env-section">
+        <div class="sharded-env-header">
+          <div class="sharded-env-title-row">
+            <div>
+              <div class="sharded-env-title">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
+                  <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
+                  <line x1="6" x2="6.01" y1="6" y2="6"></line>
+                  <line x1="6" x2="6.01" y1="18" y2="18"></line>
+                </svg>
+                System Information
+              </div>
+              <div class="sharded-env-subtitle">Test execution environment details - ${environmentData.length} shard${environmentData.length > 1 ? "s" : ""}</div>
+            </div>
+            <div class="env-icon-badge">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div class="sharded-environments-container">
+          <div class="sharded-environments-wrapper">
+            ${environmentData
+              .map(
+                (env, index) => `
+              <div class="env-card-wrapper">
+                <div class="env-card-badge">Shard ${index + 1}</div>
+                ${generateEnvironmentDashboard(env, true)}
+              </div>
+            `,
+              )
+              .join("")}
+          </div>
+        </div>
+      </div>
+      <style>
+        .sharded-env-section {
+          border: 1px solid #e2e8f0;
+          border-radius: 12px;
+          background: #fafbfc;
+          overflow: hidden;
+        }
+        .sharded-env-header {
+          position: sticky;
+          top: 0;
+          z-index: 20;
+          background: linear-gradient(to bottom right, #ffffff 0%, #fafafa 100%);
+          border-bottom: 1px solid #e2e8f0;
+          padding: 24px 24px 16px;
+        }
+        .sharded-env-title-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .sharded-env-title {
+          display: flex;
+          align-items: center;
+          font-size: 18px;
+          font-weight: 600;
+          color: #0f172a;
+        }
+        .sharded-env-title svg {
+          width: 18px;
+          height: 18px;
+          margin-right: 8px;
+          stroke: currentColor;
+          fill: none;
+        }
+        .sharded-env-subtitle {
+          font-size: 13px;
+          color: #64748b;
+          margin-top: 4px;
+        }
+        .sharded-environments-container {
+          max-height: 520px;
+          overflow-y: auto;
+          overflow-x: hidden;
+          padding: 16px;
+        }
+        .sharded-environments-container::-webkit-scrollbar {
+          width: 8px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 4px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-thumb {
+          background: #cbd5e0;
+          border-radius: 4px;
+        }
+        .sharded-environments-container::-webkit-scrollbar-thumb:hover {
+          background: #a0aec0;
+        }
+        .sharded-environments-wrapper {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+          gap: 24px;
+        }
+        @media (max-width: 768px) {
+          .sharded-environments-wrapper {
+            grid-template-columns: 1fr;
+          }
+        }
+        .env-card-wrapper {
+          position: relative;
+        }
+        .env-card-badge {
+          position: absolute;
+          top: -10px;
+          right: 16px;
+          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+          color: white;
+          padding: 6px 14px;
+          border-radius: 20px;
+          font-size: 0.75em;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          z-index: 10;
+          box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
+        }
+      </style>
+    `;
+  }
+  
+  return generateEnvironmentDashboard(environmentData);
+}
 
-  // Logic for Run Context
+function generateEnvironmentDashboard(environment, hideHeader = false) {
+  const cpuModel = environment.cpu && environment.cpu.model ? environment.cpu.model : "N/A";
+  const cpuCores = environment.cpu && environment.cpu.cores ? environment.cpu.cores : "N/A";
+  const cpuInfo = `model: ${cpuModel}, cores: ${cpuCores}`;
+  const osInfo = environment.os || "N/A";
+  const nodeInfo = environment.node || "N/A";
+  const v8Info = environment.v8 || "N/A";
+  const cwdInfo = environment.cwd || "N/A";
+  const formattedMemory = environment.memory || "N/A";
   const runContext = process.env.CI ? "CI" : "Local Test";
 
   return `
-    <div class="environment-dashboard-wrapper" id="${dashboardId}">
+    <div class="env-modern-card${hideHeader ? " no-header" : ""}">
       <style>
+        .env-modern-card {
+          background: linear-gradient(to bottom right, #ffffff 0%, #fafafa 100%);
+          border: 0;
+          border-radius: 12px;
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+          margin-top: 24px;
+          transition: all 0.3s ease;
+          font-family: var(--font-family);
+          overflow: hidden;
+        }
+        .env-modern-card:hover {
+          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .env-modern-card {
+          margin-bottom: 0;
+        }
+
         .environment-dashboard-wrapper *,
         .environment-dashboard-wrapper *::before,
         .environment-dashboard-wrapper *::after {
@@ -715,326 +877,285 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
         }
 
         .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;
+          --primary-color: #6366f1;
+          --success-color: #10b981;
+          --warning-color: #f59e0b;
           
-          --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);
+          background-color: white;
+          padding: 48px; 
+          border-bottom: 1px solid #e2e8f0;
+          font-family: var(--font-family);
+          color: #0f172a;
           display: grid;
-          grid-template-columns: 1fr 1fr;
-          grid-template-rows: auto 1fr; 
-          gap: 20px; 
-          font-size: 14px; 
+          grid-template-columns: repeat(2, 1fr);
+          gap: 32px;
+          font-size: 15px;
+          transform: translateZ(0);
         }
 
-        /* Mobile Responsiveness */
-        @media (max-width: 768px) {
-            .environment-dashboard-wrapper {
-                grid-template-columns: 1fr; /* Stack columns on mobile */
-                grid-template-rows: auto;
-                padding: 16px;
-                height: auto !important; /* Allow height to grow */
-            }
-            .env-card {
-                height: auto !important; /* Allow cards to grow based on content */
-                min-height: 200px;
-            }
+        .env-card-header {
+          display: flex;
+          flex-direction: column;
+          padding: 24px 24px 12px;
         }
-        
-        .env-dashboard-header {
-          grid-column: 1 / -1;
+        .env-modern-card.no-header .env-card-header {
+          display: none;
+        }
+        .env-modern-card.no-header {
+          margin-top: 0;
+        }
+        .env-modern-card.no-header .env-card-content {
+          padding-top: 24px;
+        }
+        .env-card-title-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          border-bottom: 1px solid var(--border-color);
-          padding-bottom: 16px; 
-          margin-bottom: 8px; 
-          flex-wrap: wrap; /* Allow wrapping header items */
-          gap: 10px;
         }
-        
-        .env-dashboard-title {
-          font-size: 1.5rem; 
+        .env-card-title {
+          display: flex;
+          align-items: center;
+          font-size: 16px;
           font-weight: 600;
-          color: var(--text-color); 
-          margin: 0;
+          color: #0f172a;
+          transition: color 0.3s;
         }
-        
-        .env-dashboard-subtitle {
-          font-size: 0.875rem; 
-          color: var(--text-color-secondary);
-          margin-top: 4px;
+        .env-modern-card:hover .env-card-title {
+          color: #6366f1;
         }
-        
-        .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-title svg {
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+          stroke: currentColor;
+          fill: none;
         }
-        
-        .env-card-header {
-          font-weight: 600;
-          font-size: 1rem; 
-          margin-bottom: 12px;
-          color: var(--text-color);
+        .env-card-subtitle {
+          font-size: 12px;
+          color: #64748b;
+          margin-top: 4px;
+        }
+        .env-icon-badge {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
           display: flex;
           align-items: center;
-          padding-bottom: 8px;
-          border-bottom: 1px solid var(--border-light-color);
+          justify-content: center;
         }
-        
-        .env-card-header svg {
-          margin-right: 10px; 
-          width: 18px; 
-          height: 18px;
-          fill: var(--icon-color);
+        .env-icon-badge svg {
+          width: 16px;
+          height: 16px;
+          stroke: #6366f1;
+          fill: none;
         }
-
         .env-card-content {
-          flex-grow: 1; 
-          overflow-y: auto; 
-          padding-right: 5px; 
+          padding: 0 24px 24px;
         }
-        
-        .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;
-          flex-wrap: wrap; /* Allow details to wrap on very small screens */
-          gap: 8px;
-        }
-        
-        .env-detail-row:last-child {
-          border-bottom: none;
-        }
-        
-        .env-detail-label {
-          color: var(--text-color-secondary);
-          font-weight: 500;
-          margin-right: 10px; 
+        .env-items-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 10px;
         }
-        
-        .env-detail-value {
-          color: var(--text-color);
-          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-          text-align: right;
-          word-break: break-all; 
-          margin-left: auto; /* Push to right */
+        @media (min-width: 768px) {
+          .env-items-grid {
+            grid-template-columns: repeat(4, 1fr);
+          }
         }
-        
-        .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-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          padding: 8px;
+          border-radius: 8px;
+          transition: background-color 0.2s;
+          min-height: 48px;
         }
-        
-        .env-chip-primary {
-          background-color: var(--primary-light-color);
-          color: var(--primary-color);
+        .env-item:hover {
+          background-color: rgba(100, 116, 139, 0.05);
         }
-        
-        .env-chip-success {
-          background-color: var(--success-light-color);
-          color: var(--success-color);
+        .env-item-icon {
+          flex-shrink: 0;
         }
-        
-        .env-chip-warning {
-          background-color: var(--warning-light-color);
-          color: var(--warning-color);
+        .env-item-icon svg {
+          width: 16px;
+          height: 16px;
+          stroke: #6366f1;
+          fill: none;
         }
-        
-        .env-cpu-cores {
-          display: flex;
-          align-items: center;
-          gap: 6px; 
+        .env-item-content {
+          flex-grow: 1;
+          min-width: 0;
         }
-        
-        .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-item-label {
+          font-size: 12px;
+          font-weight: 500;
+          color: #64748b;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
-        
-        .env-core-indicator.inactive {
-          background-color: var(--border-light-color);
-          opacity: 0.7; 
-          border-color: var(--border-color);
+        .env-item-value {
+          font-size: 12px;
+          font-weight: 600;
+          color: #0f172a;
+          word-wrap: break-word;
+          overflow-wrap: break-word;
+          line-height: 1.4;
         }
       </style>
       
-      <div class="env-dashboard-header">
-        <div>
-          <h3 class="env-dashboard-title">System Environment</h3>
-          <p class="env-dashboard-subtitle">Snapshot of the execution environment</p>
-        </div>
-        <span class="env-chip env-chip-primary">${environment.host}</span>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M4 6h16V4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-2v10H4V6zm18-2h-4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2H6a2 2 0 0 0-2 2v2h20V6a2 2 0 0 0-2-2zM8 12h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>
-          Hardware
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">CPU Model</span>
-            <span class="env-detail-value">${environment.cpu.model}</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">CPU Cores</span>
-            <span class="env-detail-value">
-              <div class="env-cpu-cores">
-                ${Array.from(
-                  { length: Math.max(0, environment.cpu.cores || 0) },
-                  (_, i) =>
-                    `<div class="env-core-indicator ${
-                      i >=
-                      (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
-                        ? "inactive"
-                        : ""
-                    }" title="Core ${i + 1}"></div>`
-                ).join("")}
-                <span>${environment.cpu.cores || "N/A"} cores</span>
-              </div>
-            </span>
+      <div class="env-card-header">
+        <div class="env-card-title-row">
+          <div>
+            <div class="env-card-title">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
+                <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
+                <line x1="6" x2="6.01" y1="6" y2="6"></line>
+                <line x1="6" x2="6.01" y1="18" y2="18"></line>
+              </svg>
+              System Information
+            </div>
+            <div class="env-card-subtitle">Test execution environment details</div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Memory</span>
-            <span class="env-detail-value">${formattedMemory}</span>
+          <div class="env-icon-badge">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+            </svg>
           </div>
         </div>
       </div>
       
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-0.01 18c-2.76 0-5.26-1.12-7.07-2.93A7.973 7.973 0 0 1 4 12c0-2.21.9-4.21 2.36-5.64A7.994 7.994 0 0 1 11.99 4c4.41 0 8 3.59 8 8 0 2.76-1.12 5.26-2.93 7.07A7.973 7.973 0 0 1 11.99 20zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
-          Operating System
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">OS Type</span>
-            <span class="env-detail-value">${
-              environment.os.split(" ")[0] === "darwin"
-                ? "darwin (macOS)"
-                : environment.os.split(" ")[0] || "Unknown"
-            }</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">OS Version</span>
-            <span class="env-detail-value">${
-              environment.os.split(" ")[1] || "N/A"
-            }</span>
-          </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Hostname</span>
-            <span class="env-detail-value" title="${environment.host}">${
-    environment.host
-  }</span>
+      <div class="env-card-content">
+        <div class="env-items-grid">
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Host</p>
+              <div class="env-item-value" title="${environment.host}">${environment.host}</div>
+            </div>
           </div>
-        </div>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-          Node.js Runtime
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">Node Version</span>
-            <span class="env-detail-value">${environment.node}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Os</p>
+              <div class="env-item-value" title="${environment.os}">${environment.os}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">V8 Engine</span>
-            <span class="env-detail-value">${environment.v8}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="16" height="16" x="4" y="4" rx="2"></rect>
+                <rect width="6" height="6" x="9" y="9" rx="1"></rect>
+                <path d="M15 2v2"></path>
+                <path d="M15 20v2"></path>
+                <path d="M2 15h2"></path>
+                <path d="M2 9h2"></path>
+                <path d="M20 15h2"></path>
+                <path d="M20 9h2"></path>
+                <path d="M9 2v2"></path>
+                <path d="M9 20v2"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Cpu</p>
+              <div class="env-item-value" title='${JSON.stringify(environment.cpu)}'>${cpuInfo}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Working Dir</span>
-            <span class="env-detail-value" title="${environment.cwd}">${
-    environment.cwd.length > 25
-      ? "..." + environment.cwd.slice(-22)
-      : environment.cwd
-  }</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M6 19v-3"></path>
+                <path d="M10 19v-3"></path>
+                <path d="M14 19v-3"></path>
+                <path d="M18 19v-3"></path>
+                <path d="M8 11V9"></path>
+                <path d="M16 11V9"></path>
+                <path d="M12 11V9"></path>
+                <path d="M2 15h20"></path>
+                <path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Memory</p>
+              <div class="env-item-value" title="${environment.memory}">${environment.memory}</div>
+            </div>
           </div>
-        </div>
-      </div>
-      
-      <div class="env-card">
-        <div class="env-card-header">
-          <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 8.69 9.48 7 12 7c2.76 0 5 2.24 5 5v1h2c1.66 0 3 1.34 3 3s-1.34 3-3 3z"/></svg>
-          System Summary
-        </div>
-        <div class="env-card-content">
-          <div class="env-detail-row">
-            <span class="env-detail-label">Platform Arch</span>
-            <span class="env-detail-value">
-              <span class="env-chip ${
-                environment.os.includes("darwin") &&
-                environment.cpu.model.toLowerCase().includes("apple")
-                  ? "env-chip-success"
-                  : "env-chip-warning"
-              }">
-                ${
-                  environment.os.includes("darwin") &&
-                  environment.cpu.model.toLowerCase().includes("apple")
-                    ? "Apple Silicon"
-                    : environment.cpu.model.toLowerCase().includes("arm") ||
-                      environment.cpu.model.toLowerCase().includes("aarch64")
-                    ? "ARM-based"
-                    : "x86/Other"
-                }
-              </span>
-            </span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
+                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
+                <path d="M12 2v2"></path>
+                <path d="M12 22v-2"></path>
+                <path d="m17 20.66-1-1.73"></path>
+                <path d="M11 10.27 7 3.34"></path>
+                <path d="m20.66 17-1.73-1"></path>
+                <path d="m3.34 7 1.73 1"></path>
+                <path d="M14 12h8"></path>
+                <path d="M2 12h2"></path>
+                <path d="m20.66 7-1.73 1"></path>
+                <path d="m3.34 17 1.73-1"></path>
+                <path d="m17 3.34-1 1.73"></path>
+                <path d="m11 13.73-4 6.93"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Node</p>
+              <div class="env-item-value" title="${environment.node}">${environment.node}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Memory per Core</span>
-            <span class="env-detail-value">${
-              environment.cpu.cores > 0
-                ? (
-                    parseFloat(environment.memory) / environment.cpu.cores
-                  ).toFixed(2) + " GB"
-                : "N/A"
-            }</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
+                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
+                <path d="M12 2v2"></path>
+                <path d="M12 22v-2"></path>
+                <path d="m17 20.66-1-1.73"></path>
+                <path d="M11 10.27 7 3.34"></path>
+                <path d="m20.66 17-1.73-1"></path>
+                <path d="m3.34 7 1.73 1"></path>
+                <path d="M14 12h8"></path>
+                <path d="M2 12h2"></path>
+                <path d="m20.66 7-1.73 1"></path>
+                <path d="m3.34 17 1.73-1"></path>
+                <path d="m17 3.34-1 1.73"></path>
+                <path d="m11 13.73-4 6.93"></path>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">V8</p>
+              <div class="env-item-value" title="${environment.v8}">${environment.v8}</div>
+            </div>
           </div>
-          <div class="env-detail-row">
-            <span class="env-detail-label">Run Context</span>
-            <span class="env-detail-value">${runContext}</span>
+          
+          <div class="env-item">
+            <div class="env-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                <polyline points="9 22 9 12 15 12 15 22"></polyline>
+              </svg>
+            </div>
+            <div class="env-item-content">
+              <p class="env-item-label">Working Dir</p>
+              <div class="env-item-value" title="${cwdInfo}">${cwdInfo.length > 30 ? "..." + cwdInfo.slice(-27) : cwdInfo}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -1057,11 +1178,11 @@ function generateWorkerDistributionChart(results) {
     const workerId =
       typeof test.workerId !== "undefined" ? test.workerId : "N/A";
     if (!acc[workerId]) {
-      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
+      acc[workerId] = { passed: 0, failed: 0, skipped: 0, flaky: 0, tests: [] };
     }
 
     const status = String(test.status).toLowerCase();
-    if (status === "passed" || status === "failed" || status === "skipped") {
+    if (status === "passed" || status === "failed" || status === "skipped" || status === "flaky") {
       acc[workerId][status]++;
     }
 
@@ -1089,7 +1210,7 @@ function generateWorkerDistributionChart(results) {
     .substring(2, 7)}`;
   const renderFunctionName = `renderWorkerDistChart_${chartId.replace(
     /-/g,
-    "_"
+    "_",
   )}`;
   const modalJsNamespace = `modal_funcs_${chartId.replace(/-/g, "_")}`;
 
@@ -1106,12 +1227,14 @@ function generateWorkerDistributionChart(results) {
   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 flakyData = workerIds.map((id) => workerData[id].flaky);
 
   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: "Flaky", data: flakyData, color: "#00ccd3" },
     { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
   ]);
 
@@ -1131,12 +1254,22 @@ function generateWorkerDistributionChart(results) {
         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;
+        position: absolute; 
+        top: 15px; 
+        right: 25px;
+        font-size: 32px; 
+        font-weight: bold; 
+        cursor: pointer;
         line-height: 1;
+        z-index: 10;
+        color: #fff;
+        transition: color 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
       }
       .worker-modal-close:hover, .worker-modal-close:focus {
-        color: var(--text-color, #000);
+        color: #ef4444;
+        transform: scale(1.1);
       }
       #worker-modal-body-${chartId} ul {
         list-style-type: none; padding-left: 0; margin-top: 15px; max-height: 45vh; overflow-y: auto;
@@ -1163,7 +1296,7 @@ function generateWorkerDistributionChart(results) {
 
     <div id="worker-modal-${chartId}" class="worker-modal-overlay">
       <div class="worker-modal-content">
-        <span class="worker-modal-close">×</span>
+        <span class="worker-modal-close" onclick="window.${modalJsNamespace}.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>
@@ -1194,6 +1327,7 @@ function generateWorkerDistributionChart(results) {
                 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)';
+                else if (test.status === 'flaky') color = '#00ccd3';
 
                 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>\`;
@@ -1210,10 +1344,14 @@ function generateWorkerDistributionChart(results) {
         const closeModal = function() {
           modal.style.display = 'none';
         };
+        
+        window.${modalJsNamespace}.close = closeModal;
 
-        closeModalBtn.onclick = closeModal;
+        if (closeModalBtn) {
+          closeModalBtn.onclick = closeModal;
+        }
+        
         modal.onclick = function(event) {
-          // Close if clicked on the dark overlay background
           if (event.target == modal) {
             closeModal();
           }
@@ -1329,7 +1467,7 @@ function generateTestHistoryContent(trendData) {
           ? `test run ${overallRun.runId}`
           : `test run ${index + 1}`;
         const testRunForThisOverallRun = trendData.testRuns[runKey]?.find(
-          (t) => t && t.testName === fullTestName
+          (t) => t && t.testName === fullTestName,
         );
         if (testRunForThisOverallRun) {
           history.push({
@@ -1355,6 +1493,7 @@ function generateTestHistoryContent(trendData) {
         <option value="">All Statuses</option>
         <option value="passed">Passed</option>
         <option value="failed">Failed</option>
+        <option value="flaky">Flaky</option>
         <option value="skipped">Skipped</option>
     </select>
     <button id="clear-history-filters" class="clear-filters-btn">Clear Filters</button>
@@ -1369,12 +1508,12 @@ function generateTestHistoryContent(trendData) {
                 : { status: "unknown" };
             return `
             <div class="test-history-card" data-test-name="${sanitizeHTML(
-              test.testTitle.toLowerCase()
+              test.testTitle.toLowerCase(),
             )}" data-latest-status="${latestRun.status}">
               <div class="test-history-header">
                 <p title="${sanitizeHTML(test.testTitle)}">${capitalize(
-              sanitizeHTML(test.testTitle)
-            )}</p>
+                  sanitizeHTML(test.testTitle),
+                )}</p>
                 <span class="status-badge ${getStatusClass(latestRun.status)}">
                   ${String(latestRun.status).toUpperCase()}
                 </span>
@@ -1396,11 +1535,11 @@ function generateTestHistoryContent(trendData) {
                         <tr>
                           <td>${run.runId}</td>
                           <td><span class="status-badge-small ${getStatusClass(
-                            run.status
+                            run.status,
                           )}">${String(run.status).toUpperCase()}</span></td>
                           <td>${formatDuration(run.duration)}</td>
                           <td>${formatDate(run.timestamp)}</td>
-                        </tr>`
+                        </tr>`,
                         )
                         .join("")}
                     </tbody>
@@ -1422,6 +1561,8 @@ function getStatusClass(status) {
       return "status-failed";
     case "skipped":
       return "status-skipped";
+    case "flaky":
+      return "status-flaky";
     default:
       return "status-unknown";
   }
@@ -1434,6 +1575,8 @@ function getStatusIcon(status) {
       return "❌";
     case "skipped":
       return "⏭️";
+    case "flaky":
+      return "⚠️";
     default:
       return "❓";
   }
@@ -1469,6 +1612,7 @@ function getSuitesData(results) {
         browser: browser,
         passed: 0,
         failed: 0,
+        flaky: 0,
         skipped: 0,
         count: 0,
         statusOverall: "passed",
@@ -1476,12 +1620,15 @@ function getSuitesData(results) {
     }
     const suite = suitesMap.get(key);
     suite.count++;
-    const currentStatus = String(test.status).toLowerCase();
+    let currentStatus = String(test.status).toLowerCase();
+    if (test.outcome === 'flaky') currentStatus = 'flaky';
     if (currentStatus && suite[currentStatus] !== undefined) {
       suite[currentStatus]++;
     }
     if (currentStatus === "failed") suite.statusOverall = "failed";
-    else if (currentStatus === "skipped" && suite.statusOverall !== "failed")
+    else if (currentStatus === "flaky" && suite.statusOverall !== "failed")
+        suite.statusOverall = "flaky";
+    else if (currentStatus === "skipped" && suite.statusOverall !== "failed" && suite.statusOverall !== "flaky")
       suite.statusOverall = "skipped";
   });
   return Array.from(suitesMap.values());
@@ -1492,58 +1639,56 @@ function generateSuitesWidget(suitesData) {
     return `<div class="suites-widget" style="height: 450px;"><div class="suites-header"><h2>Test Suites</h2></div><div class="no-data">No suite data available.</div></div>`;
   }
 
-  // Added inline styles for height consistency with Pie Chart (approx 450px) and scrolling
+  // Uses CSS classes for responsiveness instead of inline styles
   return `
-<div class="suites-widget" style="height: 450px; display: flex; flex-direction: column;">
-  <div class="suites-header" style="flex-shrink: 0;">
+<div class="suites-widget fixed-height-widget">
+  <div class="suites-header">
     <h2>Test Suites</h2>
     <span class="summary-badge">${
       suitesData.length
     } suites • ${suitesData.reduce(
-    (sum, suite) => sum + suite.count,
-    0
-  )} tests</span>
+      (sum, suite) => sum + suite.count,
+      0,
+    )} tests</span>
   </div>
   
-  <div class="suites-grid-container" style="flex-grow: 1; overflow-y: auto; padding-right: 5px;">
+  <div class="suites-grid-container">
       <div class="suites-grid">
         ${suitesData
           .map(
             (suite) => `
         <div class="suite-card status-${suite.statusOverall}">
           <div class="suite-card-header">
-            <h3 class="suite-name" title="${sanitizeHTML(
-              suite.name
-            )} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(
-              suite.name
-            )}</h3>
+            <h3 class="suite-name" title="${sanitizeHTML(suite.name)} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(suite.name)}</h3>
+            <div class="status-indicator-dot status-${suite.statusOverall}" title="${suite.statusOverall.charAt(0).toUpperCase() + suite.statusOverall.slice(1)}"></div>
+          </div>
+          
+          <div class="browser-tag" title="🌐Browser: ${sanitizeHTML(suite.browser)}">
+            <span style="font-size: 1.1em;">🌐</span> ${sanitizeHTML(suite.browser)}
           </div>
-          <div>🖥️ <span class="browser-tag">${sanitizeHTML(
-            suite.browser
-          )}</span></div>
+          
           <div class="suite-card-body">
-            <span class="test-count">${suite.count} test${
-              suite.count !== 1 ? "s" : ""
-            }</span>
+            <span class="test-count-label">${suite.count} Test${suite.count !== 1 ? "s" : ""}</span>
             <div class="suite-stats">
-                ${
-                  suite.passed > 0
-                    ? `<span class="stat-passed" title="Passed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg> ${suite.passed}</span>`
-                    : ""
-                }
-                ${
-                  suite.failed > 0
-                    ? `<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>`
-                    : ""
-                }
+              <span class="stat-pill passed" title="Passed">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>
+                ${suite.passed}
+              </span>
+              <span class="stat-pill failed" title="Failed">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>
+              <span class="stat-pill flaky" title="Flaky">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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.flaky || 0}
+              </span>
+              <span class="stat-pill skipped" title="Skipped">
+                 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>`
+        </div>`,
           )
           .join("")}
       </div>
@@ -1565,12 +1710,11 @@ function getAttachmentIcon(contentType) {
 }
 function generateAIFailureAnalyzerTab(results) {
   const failedTests = (results || []).filter(
-    (test) => test.status === "failed"
+    (test) => test.status === "failed",
   );
 
   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>
     `;
   }
@@ -1579,7 +1723,6 @@ function generateAIFailureAnalyzerTab(results) {
   const btoa = (str) => Buffer.from(str).toString("base64");
 
   return `
-    <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>
@@ -1594,7 +1737,7 @@ function generateAIFailureAnalyzerTab(results) {
         <div class="stat-item">
             <span class="stat-number">${Math.round(
               failedTests.reduce((sum, test) => sum + (test.duration || 0), 0) /
-                1000
+                1000,
             )}s</span>
             <span class="stat-label">Total Duration</span>
         </div>
@@ -1617,14 +1760,14 @@ function generateAIFailureAnalyzerTab(results) {
             <div class="failure-header">
                 <div class="failure-main-info">
                     <h3 class="failure-title" title="${sanitizeHTML(
-                      test.name
+                      test.name,
                     )}">${sanitizeHTML(testTitle)}</h3>
                     <div class="failure-meta">
                         <span class="browser-indicator">${sanitizeHTML(
-                          test.browser || "unknown"
+                          test.browser || "unknown",
                         )}</span>
                         <span class="duration-indicator">${formatDuration(
-                          test.duration
+                          test.duration,
                         )}</span>
                     </div>
                 </div>
@@ -1639,7 +1782,7 @@ function generateAIFailureAnalyzerTab(results) {
             </div>
             <div class="failure-error-preview">
                 <div class="error-snippet">${formatPlaywrightError(
-                  truncatedError
+                  truncatedError,
                 )}</div>
                 <button class="expand-error-btn" onclick="toggleErrorDetails(this)">
                     <span class="expand-text">Show Full Error</span>
@@ -1649,10 +1792,16 @@ function generateAIFailureAnalyzerTab(results) {
             <div class="full-error-details" style="display: none;">
                 <div class="full-error-content">
                     ${formatPlaywrightError(
-                      test.errorMessage || "No detailed error message available"
+                      test.errorMessage ||
+                        "No detailed error message available",
                     )}
                 </div>
             </div>
+            <div class="ai-suggestion-container" style="display: none;">
+                <div class="ai-suggestion-content">
+                    <!-- AI suggestion will be injected here -->
+                </div>
+            </div>
         </div>
         `;
         })
@@ -1895,7 +2044,25 @@ function generateDescribeDurationChart(results) {
                         series: [{
                             name: 'Duration',
                             data: ${dataStr},
-                            color: 'var(--accent-color-alt)', 
+                            colorByPoint: true,
+                            colors: [
+                                '#9333ea',
+                                '#6366f1',
+                                '#0ea5e9',
+                                '#10b981',
+                                '#84cc16',
+                                '#eab308',
+                                '#f97316',
+                                '#ef4444',
+                                '#ec4899',
+                                '#8b5cf6',
+                                '#06b6d4',
+                                '#14b8a6',
+                                '#a3e635',
+                                '#fbbf24',
+                                '#fb923c',
+                                '#f87171'
+                            ],
                         }],
                         credits: { enabled: false }
                     });
@@ -1919,6 +2086,7 @@ function generateSeverityDistributionChart(results) {
   const data = {
     passed: [0, 0, 0, 0, 0],
     failed: [0, 0, 0, 0, 0],
+    flaky: [0, 0, 0, 0, 0],
     skipped: [0, 0, 0, 0, 0],
   };
 
@@ -1937,6 +2105,8 @@ function generateSeverityDistributionChart(results) {
       status === "interrupted"
     ) {
       data.failed[index]++;
+    } else if (status === "flaky") {
+        data.flaky[index]++;
     } else {
       data.skipped[index]++;
     }
@@ -1950,6 +2120,7 @@ function generateSeverityDistributionChart(results) {
   const seriesData = [
     { name: "Passed", data: data.passed, color: "var(--success-color)" },
     { name: "Failed", data: data.failed, color: "var(--danger-color)" },
+    { name: "Flaky", data: data.flaky, color: "#00ccd3" },
     { name: "Skipped", data: data.skipped, color: "var(--warning-color)" },
   ];
 
@@ -2063,16 +2234,98 @@ function generateHTML(reportData, trendData = null) {
     return p.replace(new RegExp(`^${DEFAULT_OUTPUT_DIR}[\\\\/]`), "");
   };
 
+
+  const avgTestDuration =
+    runSummary.totalTests > 0
+      ? formatDuration(runSummary.duration / runSummary.totalTests)
+      : "0.0s";
+
+  const flakyCount = (results || []).filter(r => r.outcome === 'flaky').length;
+
+  // Calculate retry statistics
+  let retriedTestsCount = 0;
+  const totalRetried = (results || []).reduce((acc, test) => {
+    if (test.retryHistory && test.retryHistory.length > 0) {
+      // Filter out any "passed" or "skipped" entries in the history
+      // We only count attempts that actually failed or timed out, triggering a retry.
+      const unsuccessfulRetries = test.retryHistory.filter(attempt => 
+        attempt.status === 'failed' || attempt.status === 'timedout' || attempt.status === 'flaky'
+      );
+      if (unsuccessfulRetries.length > 0) {
+        retriedTestsCount++;
+      }
+      return acc + unsuccessfulRetries.length;
+    }
+    return acc;
+  }, 0);
+
+  // --- RECALCULATE KPI METRICS BASED ON FINAL_STATUS ---
+  let calculatedPassed = 0;
+  let calculatedFailed = 0;
+  let calculatedSkipped = 0;
+  let calculatedFlaky = 0;
+  let calculatedTotal = 0;
+
+  (results || []).forEach(test => {
+      calculatedTotal++;
+      // New Logic: If outcome is 'flaky', it overrides everything.
+      let statusToUse = test.status;
+      if (test.outcome === 'flaky') {
+        statusToUse = 'flaky';
+      } else if (test.status === 'flaky') { 
+         // Just in case outcome wasn't set but status was (unlikely with new reporter)
+         statusToUse = 'flaky';
+      } else if (test.retryHistory && test.retryHistory.length > 0 && test.final_status) {
+        statusToUse = test.final_status;
+      }
+      
+      // Update test status in place for charts
+      test.status = statusToUse;
+      
+      const s = String(statusToUse).toLowerCase();
+      if (s === 'passed') calculatedPassed++;
+      else if (s === 'skipped') calculatedSkipped++;
+      else if (s === 'flaky') calculatedFlaky++;
+      else calculatedFailed++; // failed, timedout, interrupted
+  });
+
+  // Override runSummary counts with our calculated ones if results exist
+  if (results && results.length > 0) {
+      runSummary.passed = calculatedPassed;
+      runSummary.failed = calculatedFailed;
+      runSummary.skipped = calculatedSkipped;
+      runSummary.flaky = calculatedFlaky;
+      runSummary.totalTests = calculatedTotal;
+  }
+
   const totalTestsOr1 = runSummary.totalTests || 1;
   const passPercentage = Math.round((runSummary.passed / totalTestsOr1) * 100);
   const failPercentage = Math.round((runSummary.failed / totalTestsOr1) * 100);
   const skipPercentage = Math.round(
-    ((runSummary.skipped || 0) / totalTestsOr1) * 100
+    ((runSummary.skipped || 0) / totalTestsOr1) * 100,
   );
-  const avgTestDuration =
-    runSummary.totalTests > 0
-      ? formatDuration(runSummary.duration / runSummary.totalTests)
-      : "0.0s";
+  const flakyPercentage = Math.round(((runSummary.flaky || 0) / totalTestsOr1) * 100);
+
+
+  // Calculate browser distribution
+  const browserStats = (results || []).reduce((acc, test) => {
+    let browserName = "unknown";
+    if (test.browser) {
+      // Use full browser name
+      browserName = test.browser;
+    }
+    acc[browserName] = (acc[browserName] || 0) + 1;
+    return acc;
+  }, {});
+
+  const totalTests = runSummary.totalTests || 1;
+  const browserBreakdown = Object.entries(browserStats)
+    .map(([browser, count]) => ({
+      browser,
+      count,
+      percentage: Math.round((count / totalTests) * 100),
+    }))
+    .sort((a, b) => b.count - a.count);
   function generateTestCasesHTML() {
     if (!results || results.length === 0)
       return '<div class="no-tests">No test results found in this run.</div>';
@@ -2082,28 +2335,13 @@ function generateHTML(reportData, trendData = null) {
         const testFileParts = test.name.split(" > ");
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
-        // --- NEW: Severity Logic ---
+        // --- Simplified Severity Badge ---
         const severity = test.severity || "Medium";
-        const getSeverityColor = (level) => {
-          switch (level) {
-            case "Minor":
-              return "#006064";
-            case "Low":
-              return "#FFA07A";
-            case "Medium":
-              return "#577A11";
-            case "High":
-              return "#B71C1C";
-            case "Critical":
-              return "#64158A";
-            default:
-              return "#577A11";
-          }
-        };
-        const severityColor = getSeverityColor(severity);
-        // We reuse 'status-badge' class for size/font consistency, but override background color
-        const severityBadge = `<span class="status-badge" style="background-color: ${severityColor}; margin-right: 8px;">${severity}</span>`;
-        // ---------------------------
+        const severityBadge = `<span class="severity-badge" data-severity="${severity.toLowerCase()}">${severity}</span>`;
+        
+        // --- Retry Count Badge (only show if retries occurred) ---
+        const retryCount = (test.retryHistory && test.retryHistory.length > 0) ? test.retryHistory.length : 0;
+        const retryBadge = (test.retryHistory && test.retryHistory.length > 0) ? `<span class="retry-badge">Retry Count: ${retryCount}</span>` : '';
         const generateStepsHTML = (steps, depth = 0) => {
           if (!steps || steps.length === 0)
             return "<div class='no-steps'>No steps recorded for this test.</div>";
@@ -2111,36 +2349,46 @@ function generateHTML(reportData, trendData = null) {
             .map((step) => {
               const hasNestedSteps = step.steps && step.steps.length > 0;
               const isHook = step.hookType;
+              const isFailedStep = step.isFailedStep === true;
               const stepClass = isHook
                 ? `step-hook step-hook-${step.hookType}`
                 : "";
+              const failedStepClass = isFailedStep ? " failed-step-highlight" : "";
               const hookIndicator = isHook ? ` (${step.hookType} hook)` : "";
+              const failedStepIndicator = isFailedStep ? ` <span class="failed-step-marker">⚠️ Failed at this step</span>` : "";
               return `
-          <div class="step-item" style="--depth: ${depth};">
+          <div class="step-item${failedStepClass}" style="--depth: ${depth};">
             <div class="step-header ${stepClass}" role="button" aria-expanded="false">
               <span class="step-icon">${getStatusIcon(step.status)}</span>
               <span class="step-title">${sanitizeHTML(
-                step.title
-              )}${hookIndicator}</span>
+                step.title,
+              )}${hookIndicator}${failedStepIndicator}</span>
               <span class="step-duration">${formatDuration(
-                step.duration
+                step.duration,
               )}</span>
             </div>
             <div class="step-details" style="display: none;">
               ${
                 step.codeLocation
                   ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
-                      step.codeLocation
+                      step.codeLocation,
                     )}</div>`
                   : ""
               }
+              ${
+                step.codeSnippet
+                  ? `<div class="code-snippet-section"><pre class="code-snippet">${sanitizeHTML(
+                      step.codeSnippet,
+                    )}</pre></div>`
+                  : ""
+              }
               ${
                 step.errorMessage
                   ? `<div class="test-error-summary">
                       ${
                         step.stackTrace
                           ? `<div class="stack-trace">${formatPlaywrightError(
-                              step.stackTrace
+                              step.stackTrace,
                             )}</div>`
                           : ""
                       }
@@ -2149,7 +2397,7 @@ function generateHTML(reportData, trendData = null) {
                         onclick="copyErrorToClipboard(this)"
                         style="
                           margin-top: 8px;
-                          padding: 4px 8px;
+                          padding: 6px 12px;
                           background: #f0f0f0;
                           border: 2px solid #ccc;
                           border-radius: 4px;
@@ -2157,6 +2405,8 @@ function generateHTML(reportData, trendData = null) {
                           font-size: 12px;
                           border-color: #8B0000;
                           color: #8B0000;
+                          align-self: flex-end;
+                          width: auto;
                           "
                             onmouseover="this.style.background='#e0e0e0'"
                             onmouseout="this.style.background='#f0f0f0'"
@@ -2170,7 +2420,7 @@ function generateHTML(reportData, trendData = null) {
                 hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
                       step.steps,
-                      depth + 1
+                      depth + 1,
                     )}</div>`
                   : ""
               }
@@ -2180,41 +2430,36 @@ function generateHTML(reportData, trendData = null) {
             .join("");
         };
 
-        return `
-      <div class="test-case" data-status="${
-        test.status
-      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
-          .join(",")
-          .toLowerCase()}">
-        <div class="test-case-header" role="button" aria-expanded="false">
-          <div class="test-case-summary">
-            <span class="status-badge ${getStatusClass(test.status)}">${String(
-          test.status
-        ).toUpperCase()}</span>
-            <span class="test-case-title" title="${sanitizeHTML(
-              test.name
-            )}">${sanitizeHTML(testTitle)}</span>
-            <span class="test-case-browser">(${sanitizeHTML(browser)})</span>
-          </div>
-          <div class="test-case-meta">
-            ${severityBadge}
-            ${
-              test.tags && test.tags.length > 0
-                ? test.tags
-                    .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
-                    .join(" ")
-                : ""
-            }
-            <span class="test-duration">${formatDuration(test.duration)}</span>
-          </div>
-        </div>
-        <div class="test-case-content" style="display: none;">
-          <p><strong>Full Path:</strong> ${sanitizeHTML(test.name)}</p>
+        // Helper for Tab Badges
+        const getSmallStatusBadge = (status) => {
+            const s = String(status).toLowerCase();
+            let colorVar = 'var(--text-tertiary)';
+            if(s === 'passed') colorVar = 'var(--success-color)';
+            else if(s === 'failed') colorVar = 'var(--danger-color)';
+            else if(s === 'skipped') colorVar = 'var(--warning-color)';
+            else if(s === 'flaky') colorVar = '#00ccd3';
+            
+            return `<span style="
+                display: inline-block; 
+                width: 8px; 
+                height: 8px; 
+                border-radius: 50%; 
+                background-color: ${colorVar}; 
+                margin-left: 6px;
+                vertical-align: middle;
+            " title="${s}"></span>`;
+        };
+        
+        // Function to generate test content HTML (used for base run and retry tabs)
+        const getTestContentHTML = (testData, runSuffix) => {
+          const logId = `stdout-log-${test.id || index}-${runSuffix}`;
+          return `
+          <p><strong>Full Path:</strong> ${sanitizeHTML(testData.name)}</p>
           ${
-            test.annotations && test.annotations.length > 0
+            testData.annotations && testData.annotations.length > 0
               ? `<div class="annotations-section" style="margin: 12px 0; padding: 12px; background-color: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-left: 4px solid #8b5cf6; border-radius: 4px;">
                   <h4 style="margin-top: 0; margin-bottom: 10px; color: #8b5cf6; font-size: 1.1em;">📌 Annotations</h4>
-                  ${test.annotations
+                  ${testData.annotations
                     .map((annotation, idx) => {
                       const isIssueOrBug =
                         annotation.type === "issue" ||
@@ -2222,22 +2467,22 @@ function generateHTML(reportData, trendData = null) {
                       const descriptionText = annotation.description || "";
                       const typeLabel = sanitizeHTML(annotation.type);
                       const descriptionHtml =
-                        isIssueOrBug && descriptionText.match(/^[A-Z]+-\d+$/)
+                        isIssueOrBug && descriptionText.match(/^[A-Z]+-\\d+$/)
                           ? `<a href="#" class="annotation-link" data-annotation="${sanitizeHTML(
-                              descriptionText
+                              descriptionText,
                             )}" style="color: #3b82f6; text-decoration: underline; cursor: pointer;">${sanitizeHTML(
-                              descriptionText
+                              descriptionText,
                             )}</a>`
                           : sanitizeHTML(descriptionText);
                       const locationText = annotation.location
                         ? `<div style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">Location: ${sanitizeHTML(
-                            annotation.location.file
+                            annotation.location.file,
                           )}:${annotation.location.line}:${
                             annotation.location.column
                           }</div>`
                         : "";
                       return `<div style="margin-bottom: ${
-                        idx < test.annotations.length - 1 ? "10px" : "0"
+                        idx < testData.annotations.length - 1 ? "10px" : "0"
                       };">
                       <strong style="color: #8b5cf6;">Type:</strong> <span style="background-color: rgba(139, 92, 246, 0.2); padding: 2px 8px; border-radius: 4px; font-size: 0.9em;">${typeLabel}</span>
                       ${
@@ -2253,21 +2498,21 @@ function generateHTML(reportData, trendData = null) {
               : ""
           }
           <p><strong>Test run Worker ID:</strong> ${sanitizeHTML(
-            test.workerId
+            testData.workerId,
           )} [<strong>Total No. of Workers:</strong> ${sanitizeHTML(
-          test.totalWorkers
-        )}]</p>
+            testData.totalWorkers,
+          )}]</p>
           ${
-            test.errorMessage
-              ? `<div class="test-error-summary">${formatPlaywrightError(
-                  test.errorMessage
-                )}
+            testData.errorMessage
+              ? `<div class="test-error-summary"><div class="stack-trace">${formatPlaywrightError(
+                  testData.errorMessage,
+                )}</div>
                 <button 
                         class="copy-error-btn" 
                         onclick="copyErrorToClipboard(this)"
                         style="
                           margin-top: 8px;
-                          padding: 4px 8px;
+                          padding: 6px 12px;
                           background: #f0f0f0;
                           border: 2px solid #ccc;
                           border-radius: 4px;
@@ -2275,6 +2520,8 @@ function generateHTML(reportData, trendData = null) {
                           font-size: 12px;
                           border-color: #8B0000;
                           color: #8B0000;
+                          align-self: flex-end;
+                          width: auto;
                           "
                             onmouseover="this.style.background='#e0e0e0'"
                             onmouseout="this.style.background='#f0f0f0'"
@@ -2285,61 +2532,61 @@ function generateHTML(reportData, trendData = null) {
               : ""
           }
           ${
-            test.snippet
+            testData.snippet
               ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
-                  test.snippet
+                  testData.snippet,
                 )}</code></pre></div>`
               : ""
           }
           <h4>Steps</h4>
-          <div class="steps-list">${generateStepsHTML(test.steps)}</div>
+          <div class="steps-list">${generateStepsHTML(testData.steps)}</div>
           ${(() => {
-            if (!test.stdout || test.stdout.length === 0) return "";
-            // Create a unique ID for the <pre> element to target it for copying
-            const logId = `stdout-log-${test.id || index}`;
+            if (!testData.stdout || testData.stdout.length === 0) return "";
             return `<div class="console-output-section">
                           <h4>Console Output (stdout)
-                          <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</button>
+                          <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy</ button>
                           </h4>
                           <div class="log-wrapper">
                               <pre id="${logId}" class="console-log stdout-log" style="background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
-              test.stdout.map((line) => sanitizeHTML(line)).join("\n")
-            )}</pre>
+                                testData.stdout
+                                  .map((line) => sanitizeHTML(line))
+                                  .join("\\n"),
+                              )}</pre>
                           </div>
                       </div>`;
           })()}
           ${
-            test.stderr && test.stderr.length > 0
+            testData.stderr && testData.stderr.length > 0
               ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
-                  test.stderr.map((line) => sanitizeHTML(line)).join("\n")
+                  testData.stderr.map((line) => sanitizeHTML(line)).join("\\n"),
                 )}</pre></div>`
               : ""
           }
           ${
-            test.screenshots && test.screenshots.length > 0
+            testData.screenshots && testData.screenshots.length > 0
               ? `
             <div class="attachments-section">
                 <h4>Screenshots</h4>
                 <div class="attachments-grid">
-                ${test.screenshots
+                ${testData.screenshots
                   .map(
-                    (screenshot, index) => `
+                    (screenshot, screenshotIndex) => `
                     <div class="attachment-item">
                     <img src="${fixPath(screenshot)}" alt="Screenshot ${
-                      index + 1
+                      screenshotIndex + 1
                     }">
                     <div class="attachment-info">
                         <div class="trace-actions">
                         <a href="${fixPath(
-                          screenshot
+                          screenshot,
                         )}" target="_blank" class="view-full">View Full Image</a>
                         <a href="${fixPath(
-                          screenshot
-                        )}" target="_blank" download="screenshot-${Date.now()}-${index}.png">Download</a>
+                          screenshot,
+                        )}" target="_blank" download="screenshot-${Date.now()}-${screenshotIndex}.png">Download</a>
                         </div>
                     </div>
                     </div>
-                `
+                `,
                   )
                   .join("")}
                 </div>
@@ -2348,9 +2595,9 @@ function generateHTML(reportData, trendData = null) {
               : ""
           }
           ${
-            test.videoPath && test.videoPath.length > 0
-              ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
-                  .map((videoUrl, index) => {
+            testData.videoPath && testData.videoPath.length > 0
+              ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${testData.videoPath
+                  .map((videoUrl, videoIndex) => {
                     const fixedVideoUrl = fixPath(videoUrl);
                     const fileExtension = String(fixedVideoUrl)
                       .split(".")
@@ -2366,18 +2613,18 @@ function generateHTML(reportData, trendData = null) {
                       }[fileExtension] || "video/mp4";
                     return `<div class="attachment-item video-item">
                             <video controls width="100%" height="auto" title="Video ${
-                              index + 1
+                              videoIndex + 1
                             }">
                                 <source src="${sanitizeHTML(
-                                  fixedVideoUrl
+                                  fixedVideoUrl,
                                 )}" type="${mimeType}">
                                 Your browser does not support the video tag.
                             </video>
                             <div class="attachment-info">
                                 <div class="trace-actions">
                                 <a href="${sanitizeHTML(
-                                  fixedVideoUrl
-                                )}" target="_blank" download="video-${Date.now()}-${index}.${fileExtension}">Download</a>
+                                  fixedVideoUrl,
+                                )}" target="_blank" download="video-${Date.now()}-${videoIndex}.${fileExtension}">Download</a>
                                 </div>
                             </div>
                         </div>`;
@@ -2386,7 +2633,7 @@ function generateHTML(reportData, trendData = null) {
               : ""
           }
           ${
-            test.tracePath
+            testData.tracePath
               ? `
             <div class="attachments-section">
                 <h4>Trace Files</h4>
@@ -2395,16 +2642,16 @@ function generateHTML(reportData, trendData = null) {
                         <div class="trace-preview">
                         <span class="trace-icon">📄</span>
                         <span class="trace-name">${sanitizeHTML(
-                          path.basename(test.tracePath)
+                          path.basename(testData.tracePath),
                         )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                             <a href="${sanitizeHTML(
-                              fixPath(test.tracePath)
+                              fixPath(testData.tracePath),
                             )}" target="_blank" download="${sanitizeHTML(
-                  path.basename(test.tracePath)
-                )}" class="download-trace">Download Trace</a>
+                              path.basename(testData.tracePath),
+                            )}" class="download-trace">Download Trace</a>
                         </div>
                         </div>
                     </div>
@@ -2414,40 +2661,40 @@ function generateHTML(reportData, trendData = null) {
               : ""
           }
           ${
-            test.attachments && test.attachments.length > 0
+            testData.attachments && testData.attachments.length > 0
               ? `
             <div class="attachments-section">
                 <h4>Other Attachments</h4>
                 <div class="attachments-grid">
-                ${test.attachments
+                ${testData.attachments
                   .map(
                     (attachment) => `
                     <div class="attachment-item generic-attachment">
                         <div class="attachment-icon">${getAttachmentIcon(
-                          attachment.contentType
+                          attachment.contentType,
                         )}</div>
                         <div class="attachment-caption">
                         <span class="attachment-name" title="${sanitizeHTML(
-                          attachment.name
+                          attachment.name,
                         )}">${sanitizeHTML(attachment.name)}</span>
                         <span class="attachment-type">${sanitizeHTML(
-                          attachment.contentType
+                          attachment.contentType,
                         )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                         <a href="${sanitizeHTML(
-                          fixPath(attachment.path)
+                          fixPath(attachment.path),
                         )}" target="_blank" class="view-full">View</a>
                             <a href="${sanitizeHTML(
-                              fixPath(attachment.path)
+                              fixPath(attachment.path),
                             )}" target="_blank" download="${sanitizeHTML(
-                      attachment.name
-                    )}" class="download-trace">Download</a>
+                              attachment.name,
+                            )}" class="download-trace">Download</a>
                         </div>
                         </div>
                     </div>
-                `
+                `,
                   )
                   .join("")}
                 </div>
@@ -2455,13 +2702,76 @@ function generateHTML(reportData, trendData = null) {
             `
               : ""
           }
-          ${
-            test.codeSnippet
-              ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
-                  sanitizeHTML(test.codeSnippet)
-                )}</code></pre></div>`
-              : ""
-          }
+          
+        `;
+        };
+
+       // Determine header status: use final_status if retried, else normal status
+       const headerStatus = (test.retryHistory && test.retryHistory.length > 0 && test.final_status) 
+          ? test.final_status 
+          : test.status;
+
+       const outcomeBadge = (test.outcome && test.outcome !== 'flaky') 
+          ? `<span class="outcome-badge ${test.outcome}">${test.outcome}</span>` 
+          : '';
+
+        return `
+      <div class="test-case" data-status="${
+        headerStatus
+      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
+        .join(",")
+        .toLowerCase()}">
+        <div class="test-case-header" role="button" aria-expanded="false">
+          <div class="test-case-summary">
+            <span class="test-case-title" title="${sanitizeHTML(
+              test.name,
+            )}">${sanitizeHTML(testTitle)}</span>
+            <span class="test-case-browser">(${sanitizeHTML(browser)})</span>
+          </div>
+          <div class="test-case-meta">
+            ${severityBadge}
+            ${retryBadge}
+            ${outcomeBadge}
+            ${
+              test.tags && test.tags.length > 0
+                ? test.tags
+                    .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
+                    .join(" ")
+                : ""
+            }
+          </div>
+          <div class="test-case-status-duration">
+            <span class="status-badge ${getStatusClass(headerStatus)}">${String(
+              headerStatus,
+            ).toUpperCase()}</span>
+            <span class="test-duration">${formatDuration(test.duration)}</span>
+          </div>
+        </div>
+        <div class="test-case-content" style="display: none;">
+          ${test.retryHistory && test.retryHistory.length > 0 ? `
+            <div class="retry-tabs-container">
+              <div class="retry-tabs-header">
+                <button class="retry-tab active" onclick="switchRetryTab(event, 'base-run-${test.id}')">
+                   Base Run ${getSmallStatusBadge(test.final_status || test.status)}
+                </button>
+                ${test.retryHistory.map((retry, idx) => `
+                  <button class="retry-tab" onclick="switchRetryTab(event, 'retry-${idx + 1}-${test.id}')">
+                    Retry ${idx + 1} ${getSmallStatusBadge(retry.final_status || retry.status)}
+                  </button>
+                `).join('')}
+              </div>
+              
+              <div id="base-run-${test.id}" class="retry-tab-content active">
+                ${getTestContentHTML(test, 'base')}
+              </div>
+              
+              ${test.retryHistory.map((retry, idx) => `
+                <div id="retry-${idx + 1}-${test.id}" class="retry-tab-content" style="display: none;">
+                  ${getTestContentHTML(retry, `retry-${idx + 1}`)}
+                </div>
+              `).join('')}
+            </div>
+          ` : getTestContentHTML(test, 'single')}
         </div>
       </div>`;
       })
@@ -2475,17 +2785,54 @@ function generateHTML(reportData, trendData = null) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
     <link rel="apple-touch-icon" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
+    <!-- Preconnect to external domains -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://code.highcharts.com">
+    
+    <!-- Preload critical font -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap"></noscript>
+    
     <script src="https://code.highcharts.com/highcharts.js" defer></script>
     <title>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);
-        }
+          --primary-color: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8;
+          --secondary-color: #8b5cf6; --secondary-dark: #7c3aed; --secondary-light: #a78bfa;
+          --accent-color: #ec4899; --accent-alt: #06b6d4;
+          --success-color: #10b981; --success-dark: #059669; --success-light: #34d399;
+          --danger-color: #ef4444; --danger-dark: #dc2626; --danger-light: #f87171;
+          --warning-color: #f59e0b; --warning-dark: #d97706; --warning-light: #fbbf24;
+          --info-color: #3b82f6;
+          --flaky-color: #00ccd3; 
+          --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4;
+          --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040;
+          --neutral-800: #262626; --neutral-900: #171717;
+          --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8;
+          --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9;
+          --border-light: #e2e8f0; --border-medium: #cbd5e1; --border-dark: #94a3b8;
+          --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+          --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px;
+          --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+          --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+          --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+          --glow-primary: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.2);
+          --glow-success: 0 0 20px rgba(16, 185, 129, 0.4), 0 0 40px rgba(16, 185, 129, 0.2);
+          --glow-danger: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2);
+          --bg-card: #ffffff; --bg-card-hover: #f8fafc;
+          --gradient-card: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
+          --border-medium: #cbd5e1;
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        ::selection { background: var(--primary-color); color: white; }
+        ::-webkit-scrollbar { width: 0; height: 0; display: none; }
+        ::-webkit-scrollbar-track { display: none; }
+        ::-webkit-scrollbar-thumb { display: none; }
+        ::-webkit-scrollbar-thumb:hover { display: none; }
+        * { scrollbar-width: none; -ms-overflow-style: none; }
         .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; }
@@ -2493,79 +2840,1187 @@ function generateHTML(reportData, trendData = null) {
         .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; }
+        html {
+          overflow-x: hidden;
+        }
+        body {
+          font-family: var(--font-family);
+          margin: 0;
+          background: #fafbfc;
+          color: var(--text-primary);
+          line-height: 1.6;
+          font-size: 15px;
+          min-height: 100vh;
+          overflow-x: hidden;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          text-rendering: optimizeLegibility;
+        }
+        * {
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          will-change: transform, opacity;
+        }
+        *:not(input):not(select):not(textarea):not(button) {
+          transition-duration: 0.15s;
+        }
+        .container {
+          padding: 0;
+          margin: 0;
+          max-width: 100%;
+          overflow-x: hidden;
+        }
+        .header { 
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 32px 40px 28px 40px;
+          border-bottom: 1px solid #e2e8f0;
+          background: rgba(255, 255, 255, 0.95);
+        }
+        .header-title { 
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+        .header h1 { 
+          margin: 0; 
+          font-size: 2.5em; 
+          font-weight: 900; 
+          color: #0f172a;
+          line-height: 1;
+          letter-spacing: -0.03em;
+        }
+        #report-logo { 
+          height: 60px; 
+        }
+        .run-info { 
+          display: flex;
+          gap: 16px;
+          align-items: stretch;
+          background: transparent;
+          border-radius: 12px;
+          padding: 0;
+          box-shadow: var(--shadow-md); /* Inherited from base static style */
+          overflow: hidden; /* Inherited */
+        }
+        .run-info-item {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          padding: 16px 28px;
+          position: relative;
+          flex: 1;
+          min-width: fit-content;
+        }
+
+        .run-info-item:first-child {
+          background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 50%, rgba(217, 119, 6, 0.1) 100%);
+          border: 1px solid rgba(251, 191, 36, 0.3);
+          border-radius: var(--radius-md);
+          box-shadow: 0 4px 16px rgba(251, 191, 36, 0.2), inset 0 1px 0 rgba(251, 191, 36, 0.25), 0 0 40px rgba(251, 191, 36, 0.08);
+        }
+        .run-info-item:first-child:hover {
+          background: linear-gradient(135deg, rgba(251, 191, 36, 0.28) 0%, rgba(245, 158, 11, 0.22) 50%, rgba(217, 119, 6, 0.15) 100%);
+          border-color: rgba(251, 191, 36, 0.4);
+          box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(251, 191, 36, 0.35), 0 0 50px rgba(251, 191, 36, 0.15);
+        }
+        .run-info-item:last-child {
+          background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.12) 50%, rgba(109, 40, 217, 0.08) 100%);
+          border: 1px solid rgba(139, 92, 246, 0.3);
+          border-radius: var(--radius-md);
+          box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(139, 92, 246, 0.25), 0 0 40px rgba(139, 92, 246, 0.08);
+        }
+        .run-info-item:last-child:hover {
+          background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(124, 58, 237, 0.18) 50%, rgba(109, 40, 217, 0.12) 100%);
+          border-color: rgba(139, 92, 246, 0.4);
+          box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(139, 92, 246, 0.35), 0 0 50px rgba(139, 92, 246, 0.15);
+        }
+        .run-info strong { 
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 0.7em;
+          text-transform: uppercase;
+          letter-spacing: 1.2px;
+          color: #9ca3af;
+          margin: 0;
+          font-weight: 700;
+        }
+        .run-info strong::before {
+          content: '';
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background: currentColor;
+          opacity: 0.7;
+          box-shadow: 0 0 8px currentColor;
+        }
+        .run-info-item:first-child strong {
+          color: var(--warning-light);
+        }
+        .run-info-item:last-child strong {
+          color: var(--secondary-light);
+        }
+        .run-info span {
+          font-size: 1.5em;
+          font-weight: 800;
+          color: #0f172a; /* Adjusted for light theme consistency, static uses #f9fafb */
+          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+          letter-spacing: -0.02em;
+          line-height: 1.2;
+          white-space: nowrap;
+        }
+        .tabs {
+          display: flex;
+          background: #0f172a;
+          padding: 0;
+          margin: 0;
+          position: sticky;
+          top: 0;
+          z-index: 100;
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+          max-width: 100vw;
+          width: 100%;
+        }
+        .tab-button {
+          flex: 1 1 auto;
+          padding: 24px 20px;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          font-size: 0.85em;
+          font-weight: 700;
+          color: #64748b;
+          transition: all 0.2s ease;
+          white-space: nowrap;
+          text-transform: uppercase;
+          letter-spacing: 1.2px;
+          border-right: 1px solid #1e293b;
+          min-width: 0;
+        }
+        .tab-button:last-child { border-right: none; }
+        .tab-button:hover { 
+          background: #1e293b;
+          color: #ffffff; 
+        }
+        .tab-button.active { 
+          background: #6366f1;
+          color: #ffffff;
+        }
+        .tab-content {
+          display: none;
+          animation: fadeIn 0.4s ease-out;
+          overflow-x: hidden;
+          max-width: 100%;
+        }
+        .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); }
+        
+        @media (max-width: 1200px) {
+          .trend-charts-row { 
+            grid-template-columns: 1fr; 
+          }
+          .dashboard-bottom-row { 
+            grid-template-columns: 1fr; 
+          }
+        }
+        
+        
+        .stat-pill.flaky { color: #4b5563; }
+
+        .dashboard-grid { 
+          display: grid; 
+          grid-template-columns: repeat(4, 1fr); 
+          gap: 0;
+          margin: 0 0 40px 0;
+        }
+        .stats-pill.failed { color: var(--danger-dark); }
+        .stats-pill.flaky { color: #4b5563; }
+        .browser-breakdown {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          margin-top: 6px;
+          max-height: 150px;
+          overflow-y: auto;
+          padding-right: 4px;
+          scrollbar-width: thin;
+          scrollbar-color: #cbd5e1 #f1f5f9;
+        }
+        .browser-breakdown::-webkit-scrollbar {
+          width: 6px;
+          display: block;
+        }
+        .browser-breakdown::-webkit-scrollbar-track {
+          background: #f1f5f9;
+          border-radius: 3px;
+          display: block;
+        }
+        .browser-breakdown::-webkit-scrollbar-thumb {
+          background: #cbd5e1;
+          border-radius: 3px;
+          display: block;
+        }
+        .browser-breakdown::-webkit-scrollbar-thumb:hover {
+          background: #94a3b8;
+          display: block;
+        }
+        .browser-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 0.95em;
+        }
+        .browser-name {
+          font-weight: 700;
+          color: #0f172a;
+          text-transform: capitalize;
+          font-size: 1.05em;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          min-width: 0;
+          margin-right: 8px;
+        }
+        .browser-stats {
+          color: #64748b;
+          white-space: nowrap;
+          flex-shrink: 0;
+          font-weight: 700;
+          font-size: 0.95em;
+        }
+        .summary-card { 
+          padding: 36px 32px; 
+          text-align: left;
+          background: rgba(255, 255, 255, 0.95);
+          border: 1px solid #e2e8f0;
+          transition: background 0.2s ease;
+          border-right: 1px solid #e2e8f0;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .summary-card:nth-child(4n) { border-right: none; }
+        .summary-card h3 { 
+          margin: 0 0 12px; 
+          font-size: 0.7em; 
+          font-weight: 700; 
+          color: #94a3b8;
+          text-transform: uppercase;
+          letter-spacing: 1.2px;
+        }
+        .summary-card .value { 
+          font-size: 2.8em; 
+          font-weight: 900; 
+          margin: 0;
+          line-height: 1;
+          letter-spacing: -0.03em;
+        }
+        .summary-card .trend-percentage {
+          font-size: 0.9em;
+          color: #64748b;
+          margin-top: 8px;
+          font-weight: 600;
+        }
+        
+        @media (max-width: 1024px) {
+          .header { 
+            padding: 32px 24px;
+            flex-direction: column;
+            gap: 24px;
+            align-items: flex-start;
+          }
+          .run-info { 
+            flex-direction: column;
+            gap: 0;
+            width: 100%;
+            border-radius: 14px;
+            overflow: hidden;
+          }
+          .dashboard-grid { 
+            grid-template-columns: repeat(2, 1fr);
+          }
+          .summary-card:nth-child(2n) { border-right: none; }
+          .summary-card:nth-child(n+7) { border-bottom: none; }
+          .filters { 
+            padding: 24px;
+            flex-wrap: wrap;
+            gap: 12px;
+          }
+          .filters input { 
+            flex: 1 1 auto;
+            min-width: 0; 
+            width: auto;
+          }
+          .filters select { 
+            flex: 0 0 auto;
+            min-width: 0;
+            width: auto; 
+          }
+          .filters button { 
+            width: auto;
+            flex: 0 0 auto;
+          }
+          .copy-btn {
+            font-size: 0.75em;
+            padding: 8px 16px;
+            margin-left: 0;
+          }
+          .console-output-section h4 {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+          }
+          .log-wrapper {
+            max-height: 300px;
+          }
+          .tabs {
+            overflow-x: auto;
+          }
+          .tab-button {
+            padding: 20px 24px;
+            font-size: 0.75em;
+            white-space: nowrap;
+          }
+          .tag {
+            font-size: 0.65em;
+            padding: 4px 10px;
+            margin-right: 4px;
+            margin-bottom: 4px;
+            letter-spacing: 0.3px;
+          }
+          .test-case-header {
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto;
+            gap: 12px;
+            padding: 16px 20px;
+          }
+          .test-case-summary {
+            grid-column: 1;
+            grid-row: 1;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+          }
+          .test-case-title {
+            width: 100%;
+            max-width: 100%;
+          }
+          .test-case-browser {
+            width: 100%;
+            max-width: 100%;
+            white-space: normal;
+          }
+          .test-case-meta {
+            grid-column: 1;
+            grid-row: 2;
+            width: 100%;
+            gap: 6px;
+          }
+          .test-case-status-duration {
+            grid-column: 1;
+            grid-row: 3;
+            align-items: flex-start;
+          }
+          .test-case {
+            margin: 0 0 12px 0;
+            border-radius: 8px;
+          }
+          .test-case-content {
+            padding: 20px;
+          }
+          .pie-chart-wrapper, .suites-widget, .trend-chart {
+            padding: 32px 24px;
+          }
+          .test-history-grid {
+            grid-template-columns: 1fr;
+          }
+          .ai-failure-cards-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+        
+        @media (max-width: 768px) {
+          .header h1 { font-size: 1.8em; }
+          #report-logo { height: 48px; }
+          .tabs {
+            flex-wrap: nowrap;
+            gap: 0;
+            overflow-x: auto;
+          }
+          .tab-button {
+            padding: 16px 20px;
+            font-size: 0.7em;
+            flex: 1 1 auto;
+            min-width: 100px;
+          }
+          .dashboard-grid { 
+            grid-template-columns: 1fr;
+          }
+          .summary-card { 
+            padding: 32px 24px !important;
+            border-right: none !important;
+          }
+          .summary-card .value { font-size: 2.5em !important; }
+          .dashboard-bottom-row { 
+            grid-template-columns: 1fr;
+            gap: 0;
+          }
+          .dashboard-column { 
+            gap: 0; 
+          }
+          .pie-chart-wrapper, .suites-widget, .trend-chart { 
+            padding: 28px 20px;
+          }
+          .pie-chart-wrapper h3, .suites-header h2, .trend-chart h3, .chart-title-header { 
+            font-size: 1.2em;
+            margin-bottom: 20px;
+          }
+          .pie-chart-wrapper div[id^="pieChart-"] { 
+            width: 100% !important;
+            max-width: 100% !important;
+            min-height: 280px;
+            overflow: visible !important;
+          }
+          .pie-chart-wrapper {
+            overflow: visible !important;
+          }
+          .trend-chart-container { 
+            min-height: 280px;
+          }
+          .suites-grid { 
+            grid-template-columns: 1fr;
+          }
+          .test-case-summary {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+          }
+          .test-case-title {
+            width: 100%;
+          }
+          .test-case-browser {
+            width: 100%;
+          }
+          .test-case-meta {
+            flex-wrap: wrap;
+            gap: 6px;
+            width: 100%;
+          }
+          .test-history-trend-section {
+            padding: 0px 20px !important;
+          }
+          .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;
+          }
+          .ai-buttons-group {
+            flex-direction: column;
+            width: 100%;
+          }
+          .compact-ai-btn, .copy-prompt-btn {
+            justify-content: center;
+            padding: 12px 20px;
+            width: 100%;
+          }
+        }
+        
+        @media (max-width: 480px) {
+          .header { padding: 24px 16px; }
+          .header h1 { font-size: 1.5em; }
+          #report-logo { height: 42px; }
+          .run-info { 
+            flex-direction: column;
+            gap: 12px;
+            width: 100%;
+          }
+          .run-info-item {
+            padding: 14px 20px;
+          }
+          .run-info-item:not(:last-child)::after {
+            display: none;
+          }
+          .run-info-item:not(:last-child) {
+            border-bottom: 1px solid var(--border-medium);
+          }
+          .run-info strong { 
+            font-size: 0.65em; 
+          }
+          .run-info span { 
+            font-size: 1.1em; 
+          }
+          .tabs {
+            flex-wrap: wrap;
+            gap: 4px;
+            padding: 8px;
+          }
+          .tab-button {
+            padding: 14px 10px;
+            font-size: 0.6em;
+            letter-spacing: 0.3px;
+            flex: 1 1 calc(50% - 4px);
+            min-width: 0;
+            text-align: center;
+          }
+          .dashboard-grid { gap: 0; }
+          .summary-card { padding: 28px 16px !important; }
+          .summary-card h3 { font-size: 0.65em; }
+          .summary-card .value { font-size: 2em !important; }
+          .dashboard-bottom-row { gap: 0; }
+          .dashboard-column { 
+            gap: 0; 
+          }
+          .pie-chart-wrapper, .suites-widget, .trend-chart { 
+            padding: 20px 16px;
+          }
+          .pie-chart-wrapper h3, .suites-header h2, .trend-chart h3, .chart-title-header { 
+            font-size: 1em;
+            margin-bottom: 16px;
+            font-weight: 800;
+          }
+          .env-dashboard-title { 
+            font-size: 1em;
+            margin-bottom: 6px;
+          }
+          .env-dashboard-subtitle { 
+            font-size: 0.85em;
+          }
+          .env-card-header { 
+            font-size: 0.85em;
+          }
+          .pie-chart-wrapper div[id^="pieChart-"] { 
+            width: 100% !important;
+            max-width: 100% !important;
+            min-height: 250px;
+            overflow: visible !important;
+          }
+          .pie-chart-wrapper {
+            overflow: visible !important;
+            padding: 20px 12px;
+          }
+          .trend-chart-container { 
+            min-height: 250px;
+          }
+          .suites-grid { 
+            grid-template-columns: 1fr;
+            gap: 16px;
+          }
+          .suite-card { 
+            padding: 16px;
+          }
+          .filters {
+            padding: 16px;
+            gap: 8px;
+          }
+          .test-history-trend-section {
+            padding: 0px 16px !important;
+          }
+          .test-case {
+            margin: 0 0 10px 0;
+            border-radius: 6px;
+          }
+          .test-case-header { 
+            padding: 14px 16px; 
+          }
+          .test-case-content {
+            padding: 16px;
+          }
+          .stat-item .stat-number {
+            font-size: 1.5em;
+          }
+          .failure-header {
+            padding: 15px;
+          }
+          .failure-error-preview, .full-error-details {
+            padding-left: 15px;
+            padding-right: 15px;
+          }
+          .header h1 {
+            word-break: break-word;
+            overflow-wrap: break-word;
+          }
+          h2, h3, h4 {
+            word-break: break-word;
+            overflow-wrap: break-word;
+          }
+          .environment-dashboard-wrapper {
+            padding: 24px 16px;
+            gap: 24px;
+          }
+          .env-card {
+            padding: 20px;
+          }
+        }
+        .summary-card.status-passed { background: rgba(16, 185, 129, 0.02); }
+        .summary-card.status-passed:hover { 
+          background: rgba(16, 185, 129, 0.15); 
+          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
+        }
+        .summary-card.status-passed .value { color: #10b981; }
+        .summary-card.status-failed { background: rgba(239, 68, 68, 0.02); }
+        .summary-card.status-failed:hover { 
+          background: rgba(239, 68, 68, 0.15); 
+          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
+        }
+        .summary-card.status-failed .value { color: #ef4444; }
+        .summary-card.status-flaky::before { background: #00ccd3; }
+        .summary-card.status-skipped { background: rgba(245, 158, 11, 0.02); }
+        .summary-card.status-skipped:hover { 
+          background: rgba(245, 158, 11, 0.15); 
+          box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
+        }
+        .summary-card.status-skipped .value { color: #f59e0b; }
+        .summary-card.flaky-status { background: rgba(0, 204, 211, 0.05); }
+        .summary-card.flaky-status:hover { 
+          background: rgba(0, 204, 211, 0.15); 
+          box-shadow: 0 4px 12px rgba(0, 204, 211, 0.2);
+        }
+        .summary-card.flaky-status .value { color: #00ccd3; }
+        .summary-card:not([class*='status-']) .value { color: #0f172a; }
         .dashboard-bottom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 28px; align-items: start; }
-        .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; }
+        .dashboard-column { 
+          display: flex; 
+          flex-direction: column; 
+          gap: 28px; 
+        }
+        .pie-chart-wrapper, .suites-widget, .trend-chart { 
+          background: rgba(255, 255, 255, 0.95);
+          padding: 48px; 
+          border: 1px solid #e2e8f0;
+          border-radius: 16px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+          display: flex; 
+          flex-direction: column;
+          overflow: visible;
+          margin-bottom: 24px;
+        }
+        .pie-chart-wrapper {
+          position: relative;
+        }
+        .pie-chart-wrapper h3, .suites-header h2, .trend-chart h3, .chart-title-header { 
+          text-align: left; 
+          margin: 0 0 40px 0; 
+          font-size: 1.8em; 
+          font-weight: 900; 
+          color: #0f172a;
+          letter-spacing: -0.02em;
+        }
+        .trend-chart-container, .pie-chart-wrapper div[id^="pieChart-"] { 
+          flex-grow: 1; 
+          min-height: 250px; 
+          width: 100%;
+          overflow: visible;
+        }
         .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; }
+        .suites-header {
+            flex-shrink: 0;
+            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; }
+        .suites-widget {
+          display: flex;
+          flex-direction: column;
+        }
+        .fixed-height-widget {
+          height: 450px;
+        }
+        .suites-grid-container {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding-right: 5px;
+        }
+        
+        @media (max-width: 768px) {
+            .fixed-height-widget {
+                height: auto;
+                max-height: 600px;
+            }
+        }
+        .suite-card {
+          background: #ffffff;
+          border: 1px solid var(--border-light);
+          border-radius: 16px;
+          padding: 24px;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+        }
+        .suite-card:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+          border-color: var(--primary-light);
+        }
+        .suite-card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          background: var(--neutral-200);
+          opacity: 0.8;
+          transition: background 0.3s ease;
+        }
+        .suite-card.status-passed::before { background: var(--success-color); }
+        .suite-card.status-failed::before { background: var(--danger-color); }
+        .suite-card.status-flaky::before { background: #00ccd3; }
+        .suite-card.status-skipped::before { background: var(--warning-color); }
+        
+        /* Outcome Badge */
+        .outcome-badge {
+            background-color: var(--secondary-color); 
+            color: #fff;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.75em;
+            font-weight: 700;
+            text-transform: uppercase;
+            margin-right: 8px;
+            letter-spacing: 0.5px;
+        }
+        .outcome-badge.flaky {
+            background-color: #00ccd3;
+            color: #fff;
+        }
+
+        .suite-card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 16px;
+        }
+        .suite-name {
+          font-size: 1.15em;
+          font-weight: 700;
+          color: var(--text-primary);
+          line-height: 1.4;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          margin-right: 12px;
+        }
+        .status-indicator-dot {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          flex-shrink: 0;
+          margin-top: 6px;
+        }
+        .status-indicator-dot.status-passed { background-color: var(--success-color); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
+        .status-indicator-dot.status-failed { background-color: var(--danger-color); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
+        .status-indicator-dot.status-flaky { background-color: #00ccd3; box-shadow: 0 0 0 4px rgba(0, 204, 211, 0.15); }
+        .status-indicator-dot.status-skipped { background-color: rgba(245, 158, 11, 0.1); color: var(--warning-dark); border: 1px solid rgba(245, 158, 11, 0.2); }
+        .status-flaky { background-color: rgba(0, 204, 211, 0.1); color: #00ccd3; border: 1px solid #00ccd3; }
+
+        .browser-tag {
+          font-size: 0.8em;
+          font-weight: 600;
+          background: var(--bg-secondary);
+          color: var(--text-secondary);
+          padding: 4px 10px;
+          border-radius: 20px;
+          border: 1px solid var(--border-light);
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          margin-bottom: 20px;
+          align-self: flex-start;
+          box-shadow: none;
+          text-shadow: none;
+        }
+        
+        .suite-card-body {
+          margin-top: auto;
+        }
+        
+        .test-count-label {
+          font-size: 0.85em;
+          font-weight: 600;
+          color: var(--text-tertiary);
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          margin-bottom: 8px;
+          display: block;
+        }
+
+        .suite-stats {
+          display: flex;
+          gap: 8px;
+          background: var(--bg-secondary);
+          padding: 10px 14px;
+          border-radius: 10px;
+          justify-content: space-between;
+        }
+        
+        .stat-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 0.9em;
+          font-weight: 600;
+        }
+        .stat-pill svg { width: 14px; height: 14px; }
+        .stat-pill.passed { color: var(--success-dark); }
+        .stat-pill.failed { color: var(--danger-dark); }
+        .stat-pill.flaky { color: #00ccd3; }
+        .stat-pill.skipped { color: var(--warning-dark); }
+        .filters {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          margin: 0;
+          padding: 24px 32px;
+          background: #f8fafc;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .filters input, .filters select, .filters button { 
+          padding: 14px 18px; 
+          border: 2px solid #e2e8f0; 
+          font-size: 0.9em;
+          font-family: var(--font-family);
+          font-weight: 600;
+          transition: all 0.15s ease;
+        }
+        .filters input { 
+          flex: 1 1 300px;
+          min-width: 0;
+          background: white;
+        }
+        .filters input:focus { 
+          outline: none;
+          border-color: #6366f1;
+        }
+        .filters select { 
+          flex: 0 0 auto;
+          min-width: 180px;
+          background: white;
+          cursor: pointer;
+          width: 100%;
+        }
+        .filters select:focus { 
+          outline: none;
+          border-color: #6366f1;
+        }
+        .filters button { 
+          background: #0f172a; 
+          color: white; 
+          cursor: pointer; 
+          border: none;
+          font-weight: 700;
+          padding: 14px 32px;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          font-size: 0.8em;
+          flex: 0 0 auto;
+        }
+        .filters button:hover { 
+          background: #1e293b;
+          color: white;
+        }
+        .test-case { 
+          margin: 0 0 16px 0;
+          padding: 0;
+          border: 1px solid #e2e8f0;
+          border-radius: 12px;
+          background: rgba(255, 255, 255, 0.95);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+          transition: transform 0.2s ease;
+          overflow: hidden;
+        }
+        .test-case:hover {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          transform: translateY(-2px);
+          border-color: #cbd5e1;
+        }
+        .test-case:last-child {
+          margin-bottom: 0;
+        }
+        .test-case-header { 
+          padding: 20px 24px; 
+          background: linear-gradient(to right, #ffffff 0%, #f8fafc 100%);
+          cursor: pointer; 
+          display: grid;
+          grid-template-columns: 1fr auto;
+          grid-template-rows: auto auto;
+          gap: 12px 20px; 
+          transition: all 0.2s ease;
+          border-bottom: 2px solid #f1f5f9;
+          position: relative;
+        }
+        .test-case-header::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background: transparent;
+          transition: background 0.2s ease;
+        }
+        .test-case-header:hover::before {
+          background: linear-gradient(to bottom, #6366f1 0%, #8b5cf6 100%);
+        }
+        .test-case-header[aria-expanded="true"] { 
+          background: linear-gradient(to right, #f8fafc 0%, #f1f5f9 100%);
+          border-bottom-color: #e2e8f0;
+        }
+        .test-case-header[aria-expanded="true"]::before {
+          background: linear-gradient(to bottom, #6366f1 0%, #8b5cf6 100%);
+        }
+        .test-case-summary { 
+          display: flex; 
+          align-items: center;
+          gap: 14px; 
+          flex-wrap: wrap;
+          min-width: 0;
+          grid-column: 1;
+          grid-row: 1;
+        }
+        .test-case-title {
+          font-weight: 600;
+          color: var(--text-color);
+          font-size: 1em;
+          word-break: break-word;
+          overflow-wrap: break-word;
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+        .test-case-browser {
+          font-size: 0.9em;
+          color: var(--text-color-secondary);
+          word-break: break-word;
+          overflow-wrap: break-word;
+          max-width: 100%;
+        }
+        .test-case-meta { 
+          display: flex; 
+          align-items: center; 
+          gap: 8px; 
+          font-size: 0.9em; 
+          color: var(--text-color-secondary); 
+          flex-wrap: wrap;
+          min-width: 0;
+          grid-column: 1;
+          grid-row: 2;
+        }
+        .test-case-status-duration {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          gap: 8px;
+          grid-column: 2;
+          grid-row: 1 / 3;
+          align-self: center;
+        }
+        .test-duration { 
+          background-color: var(--light-gray-color); 
+          padding: 6px 12px; 
+          border-radius: 8px; 
+          font-size: 0.9em;
+          white-space: nowrap;
+          flex-shrink: 0;
+          font-weight: 700;
+          color: #0f172a;
+        }
+        .status-badge {
+          padding: 8px 20px;
+          border-radius: 0;
+          font-size: 0.7em;
+          font-weight: 800;
+          color: black;
+          text-transform: uppercase;
+          min-width: 100px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
+        .status-badge.status-passed { background: #10b981; }
+        .status-badge.status-failed { background: #ef4444; }
+        .status-badge.status-skipped { background: #f59e0b; }
+        .status-badge.status-unknown { background: #64748b; }
+
+        /* --- NEON GLASS SEVERITY BADGES --- */
+        .severity-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 5px 12px;
+          border-radius: 99px;
+          font-size: 0.75em;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          border: 1px solid;
+          backdrop-filter: blur(4px);
+          -webkit-backdrop-filter: blur(4px);
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .severity-badge::before {
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background-color: currentColor;
+          box-shadow: 0 0 6px currentColor;
+        }
+        /* Auto-map colors based on data-severity attribute */
+        .severity-badge[data-severity="critical"] {
+          color: #ff4d4d;
+          background-color: rgba(255, 77, 77, 0.1);
+          border-color: rgba(255, 77, 77, 0.25);
+        }
+        .severity-badge[data-severity="high"] {
+          color: #fb923c;
+          background-color: rgba(251, 146, 60, 0.1);
+          border-color: rgba(251, 146, 60, 0.25);
+        }
+        .severity-badge[data-severity="medium"] {
+          color: #facc15;
+          background-color: rgba(250, 204, 21, 0.1);
+          border-color: rgba(250, 204, 21, 0.25);
+        }
+        .severity-badge[data-severity="low"] {
+          color: #4ade80;
+          background-color: rgba(74, 222, 128, 0.1);
+          border-color: rgba(74, 222, 128, 0.25);
+        }
+        .severity-badge[data-severity="minor"] {
+          color: #94a3b8;
+          background-color: rgba(148, 163, 184, 0.1);
+          border-color: rgba(148, 163, 184, 0.25);
+        }
+
+        /* --- RETRY COUNT BADGE --- */
+        .retry-badge {
+          display: inline-flex;
+          align-items: center;
+          padding: 5px 12px;
+          border-radius: 12px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          background: rgba(147, 51, 234, 0.15);
+          color: #a855f7;
+          border: 1px solid rgba(147, 51, 234, 0.3);
+          margin-left: 8px;
+        }
+
+        /* --- RETRY TABS --- */
+        .retry-tabs-container {
+          margin-top: 16px;
+        }
+
+        .retry-tabs-header {
+          display: flex;
+          gap: 8px;
+          border-bottom: 2px solid var(--border-medium);
+          margin-bottom: 20px;
+          flex-wrap: wrap;
+        }
+
+        .retry-tab {
+          padding: 10px 20px;
+          background: transparent;
+          border: none;
+          border-bottom: 3px solid transparent;
+          cursor: pointer;
+          font-size: 0.95rem;
+          font-weight: 600;
+          color: var(--text-color-secondary);
+          transition: all 0.2s ease;
+        }
+
+        .retry-tab:hover {
+          color: var(--primary-color);
+          background: rgba(147, 51, 234, 0.05);
+        }
+
+        .retry-tab.active {
+          color: #a855f7;
+          border-bottom-color: #a855f7;
+          background: rgba(147, 51, 234, 0.1);
+        }
+
+        .retry-tab-content {
+          animation: fadeIn 0.3s ease-in;
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        .tag { 
+          display: inline-flex;
+          align-items: center;
+          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+          color: #ffffff;
+          padding: 6px 14px;
+          border-radius: 6px;
+          font-size: 0.8em;
+          margin-right: 8px;
+          margin-bottom: 4px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
+          transition: all 0.2s ease;
+          flex-shrink: 0;
+          white-space: nowrap;
+        }
+        .tag:hover {
+          box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
+          transform: translateY(-1px);
+        }
+        .test-case-content { 
+          display: none; 
+          padding: 24px; 
+          background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
+          border-top: 1px solid #e2e8f0;
+        }
         .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 { 
+          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; 
+          display: flex;
+          flex-direction: column;
+        }
         .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; }
@@ -2577,10 +4032,15 @@ function generateHTML(reportData, trendData = null) {
         .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; }
+        .code-snippet-section { margin: 12px 0; }
+        .code-snippet { background-color: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 12px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 0.9em; line-height: 1.5; overflow-x: auto; color: #24292e; margin: 0; white-space: pre; }
         .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)}
+        .failed-step-highlight { border-left: 4px solid var(--danger-color) !important; background-color: rgba(244,67,54,0.03); }
+        .failed-step-highlight .step-header { background-color: rgba(244,67,54,0.05); border-color: rgba(244,67,54,0.3); }
+        .failed-step-marker { display: inline-block; margin-left: 10px; padding: 2px 8px; background-color: var(--danger-color); color: white; border-radius: 4px; font-size: 0.85em; font-weight: 600; }
         .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); }
@@ -2609,10 +4069,24 @@ function generateHTML(reportData, trendData = null) {
         .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-section {
+          padding: 0px 48px !important;
+        }
+        .test-history-trend-section .chart-title-header {
+          margin: 0 0 20px 0 !important;
+        }
         .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 {
+          overflow-x: auto;
+          max-width: 100%;
+        }
+        .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; }
@@ -2630,13 +4104,57 @@ function generateHTML(reportData, trendData = null) {
         .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.65); 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.2); 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-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 #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@@ -2650,9 +4168,69 @@ function generateHTML(reportData, trendData = null) {
         .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;}
+        .filters button.clear-filters-btn { 
+          background-color: var(--medium-gray-color); 
+          color: var(--text-color); 
+          pointer-events: auto;
+          cursor: pointer;
+          width: 100%;
+        }
+        .filters button.clear-filters-btn:active,
+        .filters button.clear-filters-btn:focus {
+          background-color: var(--medium-gray-color);
+          color: var(--text-color);
+          transform: none;
+          box-shadow: none;
+          outline: none;
+        }
+        .copy-btn {
+          color: #ffffff;
+          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 0.85em;
+          font-weight: 600;
+          padding: 10px 20px;
+          transition: all 0.2s ease;
+          box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          margin-left: auto;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+        }
+        .copy-btn:hover {
+          background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+          box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+          transform: translateY(-1px);
+        }
+        .copy-btn:active {
+          transform: translateY(0);
+          box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
+        }
+        .log-wrapper {
+          max-width: 100%;
+          overflow-x: auto;
+          overflow-y: auto;
+          max-height: 400px;
+          border-radius: 8px;
+          background: #2d2d2d;
+        }
+        .log-wrapper pre {
+          margin: 0;
+          white-space: pre;
+          word-wrap: normal;
+          overflow-wrap: normal;
+        }
+        .console-output-section h4 {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          margin-bottom: 12px;
+        }
         /* Compact AI Failure Analyzer Styles */
         .ai-analyzer-stats { 
             display: flex; 
@@ -2852,6 +4430,62 @@ function generateHTML(reportData, trendData = null) {
             max-height: 300px; 
             overflow-y: auto;
         }
+        .ai-suggestion-container {
+            margin-top: 15px;
+            border-top: 2px solid #e2e8f0;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            animation: slideDown 0.3s ease-out;
+        }
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                max-height: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                max-height: 1000px;
+                transform: translateY(0);
+            }
+        }
+        .ai-suggestion-content {
+            padding: 20px;
+        }
+        .ai-suggestion-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #6366f1;
+        }
+        .ai-suggestion-header h4 {
+            margin: 0;
+            color: #6366f1;
+            font-size: 1.1em;
+            font-weight: 700;
+        }
+        .ai-suggestion-body {
+            color: #0f172a;
+            line-height: 1.6;
+        }
+        .ai-suggestion-body h4 {
+            color: #6366f1;
+            margin-top: 15px;
+            margin-bottom: 8px;
+            font-size: 1em;
+        }
+        .ai-suggestion-body p {
+            margin-bottom: 10px;
+        }
+        .ai-suggestion-body pre {
+            background: #1e293b;
+            color: #e2e8f0;
+            padding: 12px;
+            border-radius: 6px;
+            overflow-x: auto;
+            font-size: 0.9em;
+        }
         
         /* Responsive adjustments for compact design */
         @media (max-width: 768px) {
@@ -2894,10 +4528,7 @@ function generateHTML(reportData, trendData = null) {
             }
         }
 
-        @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; } }
-        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 50px; } .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;} }
+
     </style>
 </head>
 <body>
@@ -2907,11 +4538,16 @@ function generateHTML(reportData, trendData = null) {
                 <img id="report-logo" src="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png" alt="Report Logo">
                 <h1>Pulse Report</h1>
             </div>
-            <div class="run-info"><strong>Run Date:</strong> ${formatDate(
-              runSummary.timestamp
-            )}<br><strong>Total Duration:</strong> ${formatDuration(
-    runSummary.duration
-  )}</div>
+            <div class="run-info">
+                <div class="run-info-item">
+                    <strong>Run Date</strong>
+                    <span>${formatDate(runSummary.timestamp)}</span>
+                </div>
+                <div class="run-info-item">
+                    <strong>Total Duration</strong>
+                    <span>${formatDuration(runSummary.duration)}</span>
+                </div>
+            </div>
         </header>
         <div class="tabs">
             <button class="tab-button active" data-tab="dashboard">Dashboard</button>
@@ -2933,31 +4569,55 @@ function generateHTML(reportData, trendData = null) {
                 <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${
                   runSummary.skipped || 0
                 }</div><div class="trend-percentage">${skipPercentage}%</div></div>
-                <div class="summary-card"><h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</div></div>
-                <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
-                  runSummary.duration
-                )}</div></div>
+                <div class="summary-card flaky-status"><h3>Flaky</h3><div class="value">${runSummary.flaky || 0}</div>
+                <div class="trend-percentage">${flakyPercentage}%</div></div>
+                 <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
+                   runSummary.duration,
+                 )}</div><div class="trend-percentage">Avg. Test Duration ${avgTestDuration}</div></div>
+                 <div class="summary-card">
+                   <h3>Total Retry Count</h3>
+                   <div class="value">${totalRetried}</div>
+                   <div class="trend-percentage">Test Retried ${retriedTestsCount}</div>
+                 </div>
+                <div class="summary-card">
+                  <h3>🌐 Browser Distribution <span style="font-size: 0.7em; color: var(--text-color-secondary); font-weight: 400;">(${browserBreakdown.length} total)</span></h3>
+                  <div class="browser-breakdown" style="max-height: 200px; overflow-y: auto; padding-right: 4px;">
+                    ${browserBreakdown
+                      .slice(0, 3)
+                      .map(
+                        (b) =>
+                          `<div class="browser-item">
+                        <span class="browser-name" title="${sanitizeHTML(b.browser)}">${sanitizeHTML(b.browser)}</span>
+                        <span class="browser-stats">${b.percentage}% (${b.count})</span>
+                      </div>`,
+                      )
+                      .join("")}
+                    ${
+                      browserBreakdown.length > 3
+                        ? `<div class="browser-item" style="opacity: 0.6; font-style: italic; justify-content: center; border-top: 1px solid #e2e8f0; margin-top: 8px; padding-top: 8px;">
+                      <span>+${browserBreakdown.length - 3} more browsers</span>
+                    </div>`
+                        : ""
+                    }
+                  </div>
+                </div>
             </div>
             <div class="dashboard-bottom-row">
-              <div style="display: flex; flex-direction: column; gap: 28px;">
+              <div class="dashboard-column">
                 ${generatePieChart(
                   [
                     { label: "Passed", value: runSummary.passed },
                     { label: "Failed", value: runSummary.failed },
+                    { label: "Flaky", value: runSummary.flaky || 0 },
                     { label: "Skipped", value: runSummary.skipped || 0 },
                   ],
                   400,
-                  390
+                  390,
                 )} 
-                ${
-                  runSummary.environment &&
-                  Object.keys(runSummary.environment).length > 0
-                    ? generateEnvironmentDashboard(runSummary.environment)
-                    : '<div class="no-data">Environment data not available.</div>'
-                }
+                ${generateEnvironmentSection(runSummary.environment)}
               </div> 
               
-              <div style="display: flex; flex-direction: column; gap: 28px;">
+              <div class="dashboard-column">
                 ${generateSuitesWidget(suitesData)}
                 ${generateSeverityDistributionChart(results)}
               </div>
@@ -2966,25 +4626,24 @@ function generateHTML(reportData, trendData = null) {
         <div id="test-runs" class="tab-content">
             <div class="filters">
                 <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
-                <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="skipped">Skipped</option></select>
+                <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="flaky">Flaky</option><option value="skipped">Skipped</option></select>
                 <select id="filter-browser"><option value="">All Browsers</option>${Array.from(
                   new Set(
-                    (results || []).map((test) => test.browser || "unknown")
-                  )
+                    (results || []).map((test) => test.browser || "unknown"),
+                  ),
                 )
                   .map(
                     (browser) =>
                       `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
-                        browser
-                      )}</option>`
+                        browser,
+                      )}</option>`,
                   )
                   .join("")}</select>
-                <button id="expand-all-tests">Expand All</button> <button id="collapse-all-tests">Collapse All</button> <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
+                <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
             </div>
             <div class="test-cases-list">${generateTestCasesHTML()}</div>
         </div>
         <div id="test-history" class="tab-content">
-          <h2 class="tab-main-title">Execution Trends</h2>
           <div class="trend-charts-row">
             <div class="trend-chart"><h3 class="chart-title-header">Test Volume & Outcome Trends</h3>
               ${
@@ -3011,13 +4670,15 @@ function generateHTML(reportData, trendData = null) {
                 ${generateDescribeDurationChart(results)}
             </div>
           </div>
-          <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
           <div class="trend-charts-row">
              <div class="trend-chart">
+                <h3 class="chart-title-header">Test Distribution by Worker ${infoTooltip}</h3>
                 ${generateWorkerDistributionChart(results)}
              </div>
           </div>
-          <h2 class="tab-main-title">Individual Test History</h2>
+          <div class="trend-chart test-history-trend-section" style="border-bottom: none;">
+             <h3 class="chart-title-header">Individual Test History</h3>
+          </div>
           ${
             trendData &&
             trendData.testRuns &&
@@ -3032,7 +4693,7 @@ function generateHTML(reportData, trendData = null) {
         <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>
-                <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>
+                <a href="https://www.npmjs.com/package/@arghajit/playwright-pulse-report" 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'">Pulse Report</a>
             </div>
             <div style="margin-top: 0.5rem; font-size: 0.75rem; color: #666;">Crafted with precision</div>
         </footer>
@@ -3051,25 +4712,62 @@ function generateHTML(reportData, trendData = null) {
             console.error('Could not find log element with ID:', elementId);
             return;
         }
+        const originalText = button.textContent;
         navigator.clipboard.writeText(logElement.innerText).then(() => {
             button.textContent = 'Copied!';
-            setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+            setTimeout(() => { button.textContent = originalText; }, 2000);
         }).catch(err => {
             console.error('Failed to copy log content:', err);
             button.textContent = 'Failed';
-             setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+             setTimeout(() => { button.textContent = originalText; }, 2000);
         });
     }
     
+    // --- Retry Tab Switching Function ---
+    function switchRetryTab(event, tabId) {
+      const tabButton = event.currentTarget;
+      const tabsContainer = tabButton.closest('.retry-tabs-container');
+      
+      // Hide all tab contents in this container
+      const allTabContents = tabsContainer.querySelectorAll('.retry-tab-content');
+      allTabContents.forEach(content => {
+        content.style.display = 'none';
+        content.classList.remove('active');
+      });
+      
+      // Remove active class from all tabs
+      const allTabs = tabsContainer.querySelectorAll('.retry-tab');
+      allTabs.forEach(tab => tab.classList.remove('active'));
+      
+      // Show selected tab content
+      const selectedContent = document.getElementById(tabId);
+      if (selectedContent) {
+        selectedContent.style.display = 'block';
+        selectedContent.classList.add('active');
+      }
+      
+      // Add active class to clicked tab
+      tabButton.classList.add('active');
+    }
+    
     // --- AI Failure Analyzer Functions ---
 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');
+    const failureItem = button.closest('.compact-failure-item');
+    const aiContainer = failureItem.querySelector('.ai-suggestion-container');
+    const aiContent = failureItem.querySelector('.ai-suggestion-content');
+    
+    // Toggle if already visible
+    if (aiContainer.style.display === 'block') {
+        aiContainer.style.display = 'none';
+        button.querySelector('.ai-text').textContent = 'AI Fix';
+        return;
+    }
     
-    modal.style.display = 'flex';
-    modalTitle.textContent = 'Analyzing...';
-    modalContent.innerHTML = '<div class="ai-loader"></div>';
+    // Show loading state
+    aiContainer.style.display = 'block';
+    aiContent.innerHTML = '<div class="ai-loader" style="margin: 40px auto;"></div>';
+    button.querySelector('.ai-text').textContent = 'Loading...';
+    button.disabled = true;
 
     try {
         const testJson = button.dataset.testJson;
@@ -3087,7 +4785,6 @@ function getAIFix(button) {
         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, {
@@ -3151,18 +4848,31 @@ function getAIFix(button) {
                 suggestionsHtml += \`<div class="code-section"><pre><code>No suggestion provided.</code></pre></div>\`;
             }
             
-            // Combine both parts and set the modal content
-            modalContent.innerHTML = analysisHtml + suggestionsHtml;
+            // Combine both parts and display inline
+            button.querySelector('.ai-text').textContent = 'Hide AI Fix';
+            button.disabled = false;
+            aiContent.innerHTML = \`
+                <div class="ai-suggestion-header">
+                    <h4>🤖 AI Analysis Result</h4>
+                </div>
+                <div class="ai-suggestion-body">
+                    \${analysisHtml}
+                    \${suggestionsHtml}
+                </div>
+            \`;
         })
         .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>\`;
+            button.disabled = false;
+            button.querySelector('.ai-text').textContent = 'AI Fix';
+            aiContent.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>\`;
+        button.disabled = false;
+        button.querySelector('.ai-text').textContent = 'AI Fix';
+        aiContent.innerHTML = \`<div class="test-error-summary">Could not process test data. Is it formatted correctly?</div>\`;
     }
 }
 
@@ -3245,6 +4955,7 @@ Code Snippet:
     function closeAiModal() {
         const modal = document.getElementById('ai-fix-modal');
         if(modal) modal.style.display = 'none';
+        document.body.style.setProperty('overflow', '', 'important');
     }
 
     function toggleErrorDetails(button) {
@@ -3352,16 +5063,7 @@ Code Snippet:
         document.querySelectorAll('#test-runs .step-header').forEach(header => {
             header.addEventListener('click', () => toggleElementDetails(header, '.step-details'));
         });
-        const expandAllBtn = document.getElementById('expand-all-tests');
-        const collapseAllBtn = document.getElementById('collapse-all-tests');
-        function setAllTestRunDetailsVisibility(displayMode, ariaState) {
-            document.querySelectorAll('#test-runs .test-case-content').forEach(el => el.style.display = displayMode);
-            document.querySelectorAll('#test-runs .step-details').forEach(el => el.style.display = displayMode);
-            document.querySelectorAll('#test-runs .test-case-header[aria-expanded]').forEach(el => el.setAttribute('aria-expanded', ariaState));
-            document.querySelectorAll('#test-runs .step-header[aria-expanded]').forEach(el => el.setAttribute('aria-expanded', ariaState));
-        }
-        if (expandAllBtn) expandAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('block', 'true'));
-        if (collapseAllBtn) collapseAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('none', 'false'));
+
         // --- Annotation Link Handler ---
         document.querySelectorAll('a.annotation-link').forEach(link => {
             link.addEventListener('click', (e) => {
@@ -3515,6 +5217,8 @@ async function runScript(scriptPath, args = []) {
   });
 }
 async function main() {
+  await animate();
+  
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
 
@@ -3530,7 +5234,7 @@ async function main() {
   // Script to archive current run to JSON history (this is your modified "generate-trend.mjs")
   const archiveRunScriptPath = path.resolve(
     __dirname,
-    "generate-trend.mjs" // Keeping the filename as per your request
+    "generate-trend.mjs", // Keeping the filename as per your request
   );
 
   const outputDir = await getOutputDir(customOutputDir);
@@ -3547,7 +5251,7 @@ async function main() {
     console.log(chalk.gray(`  (from CLI argument)`));
   } else {
     console.log(
-      chalk.gray(`  (auto-detected from playwright.config or using default)`)
+      chalk.gray(`  (auto-detected from playwright.config or using default)`),
     );
   }
 
@@ -3556,14 +5260,14 @@ async function main() {
     const archiveArgs = customOutputDir ? ["--outputDir", customOutputDir] : [];
     await runScript(archiveRunScriptPath, archiveArgs);
     console.log(
-      chalk.green("Current run data archiving to history completed.")
+      chalk.green("Current run data archiving to history completed."),
     );
   } catch (error) {
     console.error(
       chalk.red(
-        "Failed to archive current run data. Report might use stale or incomplete historical trends."
+        "Failed to archive current run data. Report might use stale or incomplete historical trends.",
       ),
-      error
+      error,
     );
   }
 
@@ -3578,22 +5282,22 @@ async function main() {
       !currentRunReportData.results
     ) {
       throw new Error(
-        "Invalid report JSON structure. 'results' field is missing or invalid."
+        "Invalid report JSON structure. 'results' field is missing or invalid.",
       );
     }
     if (!Array.isArray(currentRunReportData.results)) {
       currentRunReportData.results = [];
       console.warn(
         chalk.yellow(
-          "Warning: 'results' field in current run JSON was not an array. Treated as empty."
-        )
+          "Warning: 'results' field in current run JSON was not an array. Treated as empty.",
+        ),
       );
     }
   } catch (error) {
     console.error(
       chalk.red(
-        `Critical Error: Could not read or parse main report JSON at ${reportJsonPath}: ${error.message}`
-      )
+        `Critical Error: Could not read or parse main report JSON at ${reportJsonPath}: ${error.message}`,
+      ),
     );
     process.exit(1);
   }
@@ -3606,7 +5310,8 @@ async function main() {
 
     const jsonHistoryFiles = allHistoryFiles
       .filter(
-        (file) => file.startsWith(HISTORY_FILE_PREFIX) && file.endsWith(".json")
+        (file) =>
+          file.startsWith(HISTORY_FILE_PREFIX) && file.endsWith(".json"),
       )
       .map((file) => {
         const timestampPart = file
@@ -3623,7 +5328,7 @@ async function main() {
 
     const filesToLoadForTrend = jsonHistoryFiles.slice(
       0,
-      MAX_HISTORY_FILES_TO_LOAD_FOR_REPORT
+      MAX_HISTORY_FILES_TO_LOAD_FOR_REPORT,
     );
 
     for (const fileMeta of filesToLoadForTrend) {
@@ -3634,29 +5339,29 @@ async function main() {
       } catch (fileReadError) {
         console.warn(
           chalk.yellow(
-            `Could not read/parse history file ${fileMeta.name}: ${fileReadError.message}`
-          )
+            `Could not read/parse history file ${fileMeta.name}: ${fileReadError.message}`,
+          ),
         );
       }
     }
     historicalRuns.reverse(); // Oldest first for charts
     console.log(
       chalk.green(
-        `Loaded ${historicalRuns.length} historical run(s) for trend analysis.`
-      )
+        `Loaded ${historicalRuns.length} historical run(s) for trend analysis.`,
+      ),
     );
   } catch (error) {
     if (error.code === "ENOENT") {
       console.warn(
         chalk.yellow(
-          `History directory '${historyDir}' not found. No historical trends will be displayed.`
-        )
+          `History directory '${historyDir}' not found. No historical trends will be displayed.`,
+        ),
       );
     } else {
       console.warn(
         chalk.yellow(
-          `Error loading historical data from '${historyDir}': ${error.message}`
-        )
+          `Error loading historical data from '${historyDir}': ${error.message}`,
+        ),
       );
     }
   }
@@ -3679,6 +5384,7 @@ async function main() {
           passed: histRunReport.run.passed,
           failed: histRunReport.run.failed,
           skipped: histRunReport.run.skipped || 0,
+          flaky: histRunReport.run.flaky || (histRunReport.results ? histRunReport.results.filter(r => r.status === 'flaky' || r.outcome === 'flaky').length : 0),
         });
 
         if (histRunReport.results && Array.isArray(histRunReport.results)) {
@@ -3687,15 +5393,15 @@ async function main() {
             (test) => ({
               testName: test.name,
               duration: test.duration,
-              status: test.status,
+              status: test.final_status || test.status,
               timestamp: new Date(test.startTime),
-            })
+            }),
           );
         }
       }
     });
     trendData.overall.sort(
-      (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
     );
   }
 
@@ -3705,8 +5411,8 @@ async function main() {
     await fs.writeFile(reportHtmlPath, htmlContent, "utf-8");
     console.log(
       chalk.green.bold(
-        `🎉 Pulse report generated successfully at: ${reportHtmlPath}`
-      )
+        `Pulse report generated successfully at: ${reportHtmlPath}`,
+      ),
     );
     console.log(chalk.gray(`(You can open this file in your browser)`));
   } catch (error) {
@@ -3717,7 +5423,7 @@ async function main() {
 }
 main().catch((err) => {
   console.error(
-    chalk.red.bold(`Unhandled error during script execution: ${err.message}`)
+    chalk.red.bold(`Unhandled error during script execution: ${err.message}`),
   );
   console.error(err.stack);
   process.exit(1);