@arghajit/playwright-pulse-report 0.3.0 → 0.3.1

package/scripts/generate-static-report.mjs

@@ -394,6 +394,7 @@ function generateTestTrendsChart(trendData) {
       </script>
   `;
 }
+const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
 /**
  * Generates HTML and JavaScript for a Highcharts area chart to display test duration trends.
  * @param {object} trendData Data for duration trends.
@@ -413,8 +414,6 @@ function generateDurationTrendChart(trendData) {
   )}`;
   const runs = trendData.overall;
 
-  const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
-
   const chartDataString = JSON.stringify(runs.map((run) => run.duration));
   const categoriesString = JSON.stringify(runs.map((run, i) => `Run ${i + 1}`));
   const runsForTooltip = runs.map((r) => ({
@@ -777,6 +776,9 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
   const cardHeight = Math.floor(dashboardHeight * 0.44);
   const cardContentPadding = 16; // px
 
+  // Logic for Run Context
+  const runContext = process.env.CI ? "CI" : "Local Test";
+
   return `
     <div class="environment-dashboard-wrapper" id="${dashboardId}">
       <style>
@@ -820,6 +822,20 @@ gap: 20px;
 font-size: 14px;
 }
 
+/* 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-dashboard-header {
 grid-column: 1 / -1;
 display: flex;
@@ -828,6 +844,8 @@ 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 {
@@ -1087,7 +1105,7 @@ border-color: var(--border-color);
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Run Context</span>
-            <span class="env-detail-value">CI/Local Test</span>
+            <span class="env-detail-value">${runContext}</span>
           </div>
         </div>
       </div>
@@ -1781,6 +1799,409 @@ function generateAIFailureAnalyzerTab(results) {
     </div>
   `;
 }
+/**
+ * Generates a area chart showing the total duration per spec file.
+ * The chart is lazy-loaded and rendered with Highcharts when scrolled into view.
+ *
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
+function generateSpecDurationChart(results) {
+  if (!results || results.length === 0)
+    return '<div class="no-data">No results available.</div>';
+
+  const specDurations = {};
+  results.forEach((test) => {
+    // Use the dedicated 'spec_file' key
+    const fileName = test.spec_file || "Unknown File";
+
+    if (!specDurations[fileName]) specDurations[fileName] = 0;
+    specDurations[fileName] += test.duration;
+  });
+
+  const categories = Object.keys(specDurations);
+  // We map 'name' here, which we will use in the tooltip later
+  const data = categories.map((cat) => ({
+    y: specDurations[cat],
+    name: cat,
+  }));
+
+  if (categories.length === 0)
+    return '<div class="no-data">No spec data found.</div>';
+
+  const chartId = `specDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderSpecDurChart_${chartId.replace(/-/g, "_")}`;
+
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Spec Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { type: 'area', height: 350, backgroundColor: 'transparent' },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            visible: false, // 1. HIDE THE X-AXIS
+                            title: { text: null },
+                            crosshair: true
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemStyle: { fontSize: '12px', color: 'var(--text-color)' }},
+                          plotOptions: { area: { lineWidth: 2.5, states: { hover: { lineWidthPlus: 0 } }, threshold: null }},
+                        tooltip: {
+                            shared: true,
+                            useHTML: true,
+                            backgroundColor: 'rgba(10,10,10,0.92)',
+                            borderColor: 'rgba(10,10,10,0.92)',
+                            style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                const point = this.points ? this.points[0].point : this.point;
+                                const color = point.color || point.series.color;
+                                
+                                // 2. FIX: Use 'point.name' instead of 'this.x' to get the actual filename
+                                return '<span style="color:' + color + '">●</span> <b>File: ' + point.name + '</b><br/>' + 
+                                       'Duration: <b>' + formatDuration(this.y) + '</b>';
+                            }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)',
+                            type: 'area',
+                            marker: { symbol: 'circle', enabled: true, radius: 4, states: { hover: { radius: 6, lineWidthPlus: 0 } } },
+                            fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, 'rgba(${accentColorAltRGB}, 0.4)'], [1, 'rgba(${accentColorAltRGB}, 0.05)']] },
+                            lineWidth: 2.5
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering spec chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+/**
+ * Generates a vertical bar chart showing the total duration of each test describe block.
+ * Tests without a describe block or with "n/a" / empty describe names are ignored.
+ * @param {Array<object>} results - Array of test result objects.
+ * @returns {string} HTML string containing the chart container and lazy-loading script.
+ */
+function generateDescribeDurationChart(results) {
+  if (!results || results.length === 0)
+    return '<div class="no-data">Seems like there is test describe block available in the executed test suite.</div>';
+
+  const describeMap = new Map();
+  let foundAnyDescribe = false;
+
+  results.forEach((test) => {
+    if (test.describe) {
+      const describeName = test.describe;
+      // Filter out invalid describe blocks
+      if (
+        !describeName ||
+        describeName.trim().toLowerCase() === "n/a" ||
+        describeName.trim() === ""
+      ) {
+        return;
+      }
+
+      foundAnyDescribe = true;
+      const fileName = test.spec_file || "Unknown File";
+      const key = fileName + "::" + describeName;
+
+      if (!describeMap.has(key)) {
+        describeMap.set(key, {
+          duration: 0,
+          file: fileName,
+          describe: describeName,
+        });
+      }
+      describeMap.get(key).duration += test.duration;
+    }
+  });
+
+  if (!foundAnyDescribe) {
+    return '<div class="no-data">No valid test describe blocks found.</div>';
+  }
+
+  const categories = [];
+  const data = [];
+
+  for (const [key, val] of describeMap.entries()) {
+    categories.push(val.describe);
+    data.push({
+      y: val.duration,
+      name: val.describe,
+      custom: {
+        fileName: val.file,
+        describeName: val.describe,
+      },
+    });
+  }
+
+  const chartId = `descDurChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderDescDurChart_${chartId.replace(/-/g, "_")}`;
+
+  const categoriesStr = JSON.stringify(categories);
+  const dataStr = JSON.stringify(data);
+
+  return `
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}">
+        <div class="no-data">Loading Describe Duration Chart...</div>
+    </div>
+    <script>
+        window.${renderFunctionName} = function() {
+            const chartContainer = document.getElementById('${chartId}');
+            if (!chartContainer) return;
+            if (typeof Highcharts !== 'undefined' && typeof formatDuration !== 'undefined') {
+                try {
+                    chartContainer.innerHTML = '';
+                    Highcharts.chart('${chartId}', {
+                        chart: { 
+                            type: 'column', // 1. CHANGED: 'bar' -> 'column' for vertical bars
+                            height: 400,    // 2. CHANGED: Fixed height works better for vertical charts
+                            backgroundColor: 'transparent' 
+                        },
+                        title: { text: null },
+                        xAxis: { 
+                            categories: ${categoriesStr}, 
+                            visible: false, // Hidden as requested
+                            title: { text: null },
+                            crosshair: true
+                        },
+                        yAxis: { 
+                            min: 0, 
+                            title: { text: 'Total Duration', style: { color: 'var(--text-color)' } },
+                            labels: { formatter: function() { return formatDuration(this.value); }, style: { color: 'var(--text-color-secondary)' } }
+                        },
+                        legend: { enabled: false },
+                        plotOptions: { 
+                            series: { 
+                                borderRadius: 4, 
+                                borderWidth: 0,
+                                states: { hover: { brightness: 0.1 }} 
+                            },
+                            column: { pointPadding: 0.2, groupPadding: 0.1 } // Adjust spacing for columns
+                        },
+                        tooltip: {
+                            shared: true, 
+                            useHTML: true, 
+                            backgroundColor: 'rgba(10,10,10,0.92)', 
+                            borderColor: 'rgba(10,10,10,0.92)', 
+                            style: { color: '#f5f5f5' },
+                            formatter: function() {
+                                const point = this.points ? this.points[0].point : this.point;
+                                const file = (point.custom && point.custom.fileName) ? point.custom.fileName : 'Unknown';
+                                const desc = point.name || 'Unknown'; 
+                                const color = point.color || point.series.color;
+                                
+                                return '<span style="color:' + color + '">●</span> <b>Describe: ' + desc + '</b><br/>' +
+                                  '<span style="opacity: 0.8; font-size: 0.9em; color: #ddd;">File: ' + file + '</span><br/>' +
+                                  'Duration: <b>' + formatDuration(point.y) + '</b>';
+                            }
+                        },
+                        series: [{
+                            name: 'Duration',
+                            data: ${dataStr},
+                            color: 'var(--accent-color-alt)', 
+                        }],
+                        credits: { enabled: false }
+                    });
+                } catch (e) { console.error("Error rendering describe chart:", e); }
+            }
+        };
+    </script>
+  `;
+}
+/**
+ * Generates a stacked column chart showing test results distributed by severity.
+ * Matches dimensions of the System Environment section (~600px).
+ * Lazy-loaded for performance.
+ */
+function generateSeverityDistributionChart(results) {
+  if (!results || results.length === 0) {
+    return '<div class="trend-chart" style="height: 600px;"><div class="no-data">No results available for severity distribution.</div></div>';
+  }
+
+  const severityLevels = ["Critical", "High", "Medium", "Low", "Minor"];
+  const data = {
+    passed: [0, 0, 0, 0, 0],
+    failed: [0, 0, 0, 0, 0],
+    skipped: [0, 0, 0, 0, 0],
+  };
+
+  results.forEach((test) => {
+    const sev = test.severity || "Medium";
+    const status = String(test.status).toLowerCase();
+
+    let index = severityLevels.indexOf(sev);
+    if (index === -1) index = 2; // Default to Medium
+
+    if (status === "passed") {
+      data.passed[index]++;
+    } else if (
+      status === "failed" ||
+      status === "timedout" ||
+      status === "interrupted"
+    ) {
+      data.failed[index]++;
+    } else {
+      data.skipped[index]++;
+    }
+  });
+
+  const chartId = `sevDistChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderSevDistChart_${chartId.replace(/-/g, "_")}`;
+
+  const seriesData = [
+    { name: "Passed", data: data.passed, color: "var(--success-color)" },
+    { name: "Failed", data: data.failed, color: "var(--danger-color)" },
+    { name: "Skipped", data: data.skipped, color: "var(--warning-color)" },
+  ];
+
+  const seriesDataStr = JSON.stringify(seriesData);
+  const categoriesStr = JSON.stringify(severityLevels);
+
+  return `
+    <div class="trend-chart" style="height: 600px; padding: 28px; box-sizing: border-box;">
+        <h3 class="chart-title-header">Severity Distribution</h3>
+        <div id="${chartId}" class="lazy-load-chart" data-render-function-name="${renderFunctionName}" style="width: 100%; height: 100%;">
+             <div class="no-data">Loading Severity Chart...</div>
+        </div>
+        <script>
+            window.${renderFunctionName} = function() {
+                const chartContainer = document.getElementById('${chartId}');
+                if (!chartContainer) return;
+
+                if (typeof Highcharts !== 'undefined') {
+                    try {
+                        chartContainer.innerHTML = '';
+                        Highcharts.chart('${chartId}', {
+                            chart: { type: 'column', backgroundColor: 'transparent' },
+                            title: { text: null },
+                            xAxis: {
+                                categories: ${categoriesStr},
+                                crosshair: true,
+                                labels: { style: { color: 'var(--text-color-secondary)' } }
+                            },
+                            yAxis: {
+                                min: 0,
+                                title: { text: 'Test Count', style: { color: 'var(--text-color)' } },
+                                stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'var(--text-color)' } },
+                                labels: { style: { color: 'var(--text-color-secondary)' } }
+                            },
+                            legend: {
+                                 itemStyle: { color: 'var(--text-color)' }
+                            },
+                            tooltip: {
+                                shared: true,
+                                useHTML: true,
+                                backgroundColor: 'rgba(10,10,10,0.92)',
+                                style: { color: '#f5f5f5' },
+                                formatter: function() {
+                                    // Custom formatter to HIDE 0 values
+                                    let tooltip = '';
+                                    let hasItems = false;
+                                    
+                                    this.points.forEach(point => {
+                                        if (point.y > 0) { // ONLY show if count > 0
+                                            tooltip += '<span style="color:' + point.series.color + '">●</span> ' + 
+                                                      point.series.name + ': <b>' + point.y + '</b><br/>';
+                                            hasItems = true;
+                                        }
+                                    });
+                                    
+                                    if (!hasItems) return false; // Hide tooltip entirely if no data
+                                    
+                                    // Calculate total from visible points to ensure accuracy or use stackTotal
+                                    tooltip += 'Total: ' + this.points[0].total;
+                                    return tooltip;
+                                }
+                            },
+                            plotOptions: {
+                                column: {
+                                    stacking: 'normal',
+                                    dataLabels: { 
+                                        enabled: true, 
+                                        color: '#fff', 
+                                        style: { textOutline: 'none' },
+                                        formatter: function() {
+                                            return (this.y > 0) ? this.y : null; // Hide 0 labels on chart bars
+                                        }
+                                    },
+                                    borderRadius: 3
+                                }
+                            },
+                            series: ${seriesDataStr},
+                            credits: { enabled: false }
+                        });
+                    } catch(e) {
+                         console.error("Error rendering severity chart:", e);
+                         chartContainer.innerHTML = '<div class="no-data">Error rendering chart.</div>';
+                    }
+                }
+            };
+        </script>
+    </div>
+  `;
+}
+/**
+ * Helper to generate Lazy Media HTML using the Script Tag pattern.
+ * This prevents the browser from parsing massive Base64 strings on page load.
+ */
+function createLazyMedia(base64Data, mimeType, type, index, filename) {
+  const uniqueId = `media-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  const dataUri = `data:${mimeType};base64,${base64Data}`;
+  // Store heavy data in a non-rendering script tag
+  const storage = `<script type="text/plain" id="data-${uniqueId}">${dataUri}</script>`;
+  
+  let mediaTag = '';
+  let btnText = '';
+  let icon = '';
+
+  if (type === 'video') {
+      mediaTag = `<video id="${uniqueId}" controls style="display:none; width: 100%; aspect-ratio: 16/9; margin-bottom: 10px;"></video>`;
+      btnText = '▶ Load Video';
+  } else {
+      mediaTag = `<img id="${uniqueId}" alt="Screenshot ${index}" style="display:none; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: 1px solid var(--border-color);" />`;
+      btnText = '📷 Load Image';
+  }
+
+  return `
+  <div class="attachment-item ${type === 'video' ? 'video-item' : ''}">
+      ${storage}
+      <div class="lazy-placeholder" style="padding: 2rem; text-align: center; background: var(--light-gray-color); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 180px;">
+          <button class="ai-fix-btn" onclick="loadMedia('${uniqueId}', '${type}')" style="margin: 0 auto; font-size: 0.9rem;">${btnText}</button>
+          <span style="font-size: 0.8rem; color: var(--text-color-secondary); margin-top: 8px;">(Click to view)</span>
+      </div>
+      ${mediaTag}
+      <div class="attachment-info">
+          <div class="trace-actions">
+              <a href="#" onclick="event.preventDefault(); downloadMedia('${uniqueId}', '${filename}')" class="download-trace" style="width:100%; text-align:center;">Download</a>
+          </div>
+      </div>
+  </div>`;
+}
 /**
  * Generates the HTML report.
  * @param {object} reportData - The data for the report.
@@ -1813,16 +2234,46 @@ function generateHTML(reportData, trendData = null) {
    * Generates the HTML for the test cases.
    * @returns {string} The HTML for the test cases.
    */
-  function generateTestCasesHTML(subset = results, baseIndex = 0) {
-    if (!results || results.length === 0)
+  // MODIFIED: Accepts 'subset' (chunk of tests) and 'offset' (start index)
+  function generateTestCasesHTML(subset, offset = 0) {
+    // Use the subset if provided, otherwise fallback to all results (legacy compatibility)
+    const data = subset || results;
+
+    if (!data || data.length === 0)
       return '<div class="no-tests">No test results found in this run.</div>';
-    return subset
+
+    return data
       .map((test, i) => {
-        const testIndex = baseIndex + i;
+        // Calculate the global index (essential for unique IDs across chunks)
+        const testIndex = offset + i;
+
         const browser = test.browser || "unknown";
         const testFileParts = test.name.split(" > ");
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
+
+        // --- Severity Logic ---
+        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);
+        const severityBadge = `<span class="status-badge" style="background-color: ${severityColor}; margin-right: 8px;">${severity}</span>`;
+
+        // --- Step Generation ---
         const generateStepsHTML = (steps, depth = 0) => {
           if (!steps || steps.length === 0)
             return "<div class='no-steps'>No steps recorded for this test.</div>";
@@ -1834,385 +2285,267 @@ function generateHTML(reportData, trendData = null) {
                 ? `step-hook step-hook-${step.hookType}`
                 : "";
               const hookIndicator = isHook ? ` (${step.hookType} hook)` : "";
-              return `<div class="step-item" style="--depth: ${depth};"><div class="step-header ${stepClass}" role="button" aria-expanded="false"><span class="step-icon">${getStatusIcon(
-                step.status
-              )}</span><span class="step-title">${sanitizeHTML(
+              return `
+          <div class="step-item" style="--depth: ${depth};">
+            <div class="step-header ${stepClass}" role="button" aria-expanded="false">
+              <span class="step-icon">${getStatusIcon(step.status)}</span>
+              <span class="step-title">${sanitizeHTML(
                 step.title
-              )}${hookIndicator}</span><span class="step-duration">${formatDuration(
+              )}${hookIndicator}</span>
+              <span class="step-duration">${formatDuration(
                 step.duration
-              )}</span></div><div class="step-details" style="display: none;">${
+              )}</span>
+            </div>
+            <div class="step-details" style="display: none;">
+              ${
                 step.codeLocation
                   ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
                       step.codeLocation
                     )}</div>`
                   : ""
-              }${
+              }
+              ${
                 step.errorMessage
-                  ? `<div class="test-error-summary">${
-                      step.stackTrace
-                        ? `<div class="stack-trace">${formatPlaywrightError(
-                            step.stackTrace
-                          )}</div>`
-                        : ""
-                    }<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
-                  : ""
-              }${(() => {
-                if (!step.attachments || step.attachments.length === 0)
-                  return "";
-                return `<div class="attachments-section"><h4>Step Attachments</h4><div class="attachments-grid">${step.attachments
-                  .map((attachment) => {
-                    try {
-                      const attachmentPath = path.resolve(
-                        DEFAULT_OUTPUT_DIR,
-                        attachment.path
-                      );
-                      if (!fsExistsSync(attachmentPath)) {
-                        return `<div class="attachment-item error">Attachment not found: ${sanitizeHTML(
-                          attachment.name
-                        )}</div>`;
+                  ? `<div class="test-error-summary">
+                      ${
+                        step.stackTrace
+                          ? `<div class="stack-trace">${formatPlaywrightError(
+                              step.stackTrace
+                            )}</div>`
+                          : ""
                       }
-                      const attachmentBase64 =
-                        readFileSync(attachmentPath).toString("base64");
-                      const attachmentDataUri = `data:${attachment.contentType};base64,${attachmentBase64}`;
-                      return `<div class="attachment-item generic-attachment">
-                                  <div class="attachment-icon">${getAttachmentIcon(
-                                    attachment.contentType
-                                  )}</div>
-                                  <div class="attachment-caption">
-                                    <span class="attachment-name" title="${sanitizeHTML(
-                                      attachment.name
-                                    )}">${sanitizeHTML(attachment.name)}</span>
-                                    <span class="attachment-type">${sanitizeHTML(
-                                      attachment.contentType
-                                    )}</span>
-                                  </div>
-                                  <div class="attachment-info">
-                                    <div class="trace-actions">
-                                      <a href="#" data-href="${attachmentDataUri}" class="view-full lazy-load-attachment" target="_blank">View</a>
-                                      <a href="#" data-href="${attachmentDataUri}" class="lazy-load-attachment" download="${sanitizeHTML(
-                        attachment.name
-                      )}">Download</a>
-                                    </div>
-                                  </div>
-                                </div>`;
-                    } catch (e) {
-                      return `<div class="attachment-item error">Failed to load attachment: ${sanitizeHTML(
-                        attachment.name
-                      )}</div>`;
-                    }
-                  })
-                  .join("")}</div></div>`;
-              })()}${
+                      <button class="copy-error-btn" onclick="copyErrorToClipboard(this)" style="margin-top: 8px; padding: 4px 8px; background: #f0f0f0; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; border-color: #8B0000; color: #8B0000;" onmouseover="this.style.background='#e0e0e0'" onmouseout="this.style.background='#f0f0f0'">Copy Error Prompt</button>
+                    </div>`
+                  : ""
+              }
+              ${
                 hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
                       step.steps,
                       depth + 1
                     )}</div>`
                   : ""
-              }</div></div>`;
+              }
+            </div>
+          </div>`;
             })
             .join("");
         };
-        return `<div class="test-case" data-status="${
-          test.status
-        }" data-browser="${sanitizeHTML(browser)}" data-tags="${(
-          test.tags || []
-        )
+
+        return `
+      <div class="test-case" data-status="${
+        test.status
+      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
           .join(",")
-          .toLowerCase()}" data-test-id="${sanitizeHTML(
-          String(test.id || testIndex)
-        )}">
-                    <div class="test-case-header" role="button" aria-expanded="false"><div class="test-case-summary"><span class="status-badge ${getStatusClass(
-                      test.status
-                    )}">${String(
+          .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">${
-          test.tags && test.tags.length > 0
-            ? test.tags
-                .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
-                .join(" ")
-            : ""
-        }<span class="test-duration">${formatDuration(
-          test.duration
-        )}</span></div></div>
-                    <div class="test-case-content" style="display: none;">
-                        <p><strong>Full Path:</strong> ${sanitizeHTML(
-                          test.name
-                        )}</p>
-                        ${
-                          test.annotations && test.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
-                                  .map((annotation, idx) => {
-                                    const isIssueOrBug =
-                                      annotation.type === "issue" ||
-                                      annotation.type === "bug";
-                                    const descriptionText =
-                                      annotation.description || "";
-                                    const typeLabel = sanitizeHTML(
-                                      annotation.type
-                                    );
-                                    const descriptionHtml =
-                                      isIssueOrBug &&
-                                      descriptionText.match(/^[A-Z]+-\d+$/)
-                                        ? `<a href="#" class="annotation-link" data-annotation="${sanitizeHTML(
-                                            descriptionText
-                                          )}" style="color: #3b82f6; text-decoration: underline; cursor: pointer;">${sanitizeHTML(
-                                            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.line}:${
-                                          annotation.location.column
-                                        }</div>`
-                                      : "";
-                                    return `<div style="margin-bottom: ${
-                                      idx < test.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>
-                                    ${
-                                      descriptionText
-                                        ? `<br><strong style="color: #8b5cf6;">Description:</strong> ${descriptionHtml}`
-                                        : ""
-                                    }
-                                    ${locationText}
-                                  </div>`;
-                                  })
-                                  .join("")}
-                              </div>`
-                            : ""
-                        }
-                        <p><strong>Test run Worker ID:</strong> ${sanitizeHTML(
-                          test.workerId
-                        )} [<strong>Total No. of Workers:</strong> ${sanitizeHTML(
+        ).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>
+          ${
+            test.annotations && test.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
+                    .map((annotation, idx) => {
+                      const isIssueOrBug =
+                        annotation.type === "issue" ||
+                        annotation.type === "bug";
+                      const descriptionText = annotation.description || "";
+                      const typeLabel = sanitizeHTML(annotation.type);
+                      const descriptionHtml =
+                        isIssueOrBug && descriptionText.match(/^[A-Z]+-\d+$/)
+                          ? `<a href="#" class="annotation-link" data-annotation="${sanitizeHTML(
+                              descriptionText
+                            )}" style="color: #3b82f6; text-decoration: underline; cursor: pointer;">${sanitizeHTML(
+                              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.line}:${
+                            annotation.location.column
+                          }</div>`
+                        : "";
+                      return `<div style="margin-bottom: ${
+                        idx < test.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>${
+                        descriptionText
+                          ? `<br><strong style="color: #8b5cf6;">Description:</strong> ${descriptionHtml}`
+                          : ""
+                      }${locationText}</div>`;
+                    })
+                    .join("")}
+                </div>`
+              : ""
+          }
+          <p><strong>Test run Worker ID:</strong> ${sanitizeHTML(
+            test.workerId
+          )} [<strong>Total No. of Workers:</strong> ${sanitizeHTML(
           test.totalWorkers
         )}]</p>
-                            ${
-                              test.errorMessage
-                                ? `<div class="test-error-summary">${formatPlaywrightError(
-                                    test.errorMessage
-                                  )}<button class="copy-error-btn" onclick="copyErrorToClipboard(this)">Copy Error Prompt</button></div>`
-                                : ""
-                            }
-                        ${
-                          test.snippet
-                            ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
-                                test.snippet
-                              )}</code></pre></div>`
-                            : ""
-                        }
-                        <h4>Steps</h4><div class="steps-list">${generateStepsHTML(
-                          test.steps
-                        )}</div>
-                        ${(() => {
-                          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 || testIndex}`;
-                          return `<div class="console-output-section">
-                                        <h4>Console Output (stdout)
-                                        <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</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>
-                                        </div>
-                                    </div>`;
-                        })()}
-                        ${
-                          test.stderr && test.stderr.length > 0
-                            ? (() => {
-                                const logId = `stderr-log-${
-                                  test.id || testIndex
-                                }`;
-                                return `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre id="${logId}" class="console-log stderr-log">${test.stderr
-                                  .map((line) => sanitizeHTML(line))
-                                  .join("\\n")}</pre></div>`;
-                              })()
-                            : ""
-                        }
-                        
-                        ${(() => {
-                          if (
-                            !test.screenshots ||
-                            test.screenshots.length === 0
-                          )
-                            return "";
-                          return `<div class="attachments-section"><h4>Screenshots</h4><div class="attachments-grid">${test.screenshots
-                            .map((screenshotPath, index) => {
-                              try {
-                                const imagePath = path.resolve(
-                                  DEFAULT_OUTPUT_DIR,
-                                  screenshotPath
-                                );
-                                if (!fsExistsSync(imagePath))
-                                  return `<div class="attachment-item error">Screenshot not found: ${sanitizeHTML(
-                                    screenshotPath
-                                  )}</div>`;
-                                const base64ImageData =
-                                  readFileSync(imagePath).toString("base64");
-                                return `<div class="attachment-item"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="data:image/png;base64,${base64ImageData}" alt="Screenshot ${
-                                  index + 1
-                                }" class="lazy-load-image"><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="data:image/png;base64,${base64ImageData}" class="lazy-load-attachment" target="_blank" download="screenshot-${index}.png">Download</a></div></div></div>`;
-                              } catch (e) {
-                                return `<div class="attachment-item error">Failed to load screenshot: ${sanitizeHTML(
-                                  screenshotPath
-                                )}</div>`;
-                              }
-                            })
-                            .join("")}</div></div>`;
-                        })()}
-
-                        ${(() => {
-                          if (!test.videoPath || test.videoPath.length === 0)
-                            return "";
-                          return `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
-                            .map((videoPath, index) => {
-                              try {
-                                const videoFilePath = path.resolve(
-                                  DEFAULT_OUTPUT_DIR,
-                                  videoPath
-                                );
-                                if (!fsExistsSync(videoFilePath))
-                                  return `<div class="attachment-item error">Video not found: ${sanitizeHTML(
-                                    videoPath
-                                  )}</div>`;
-                                const videoBase64 =
-                                  readFileSync(videoFilePath).toString(
-                                    "base64"
-                                  );
-                                const fileExtension = path
-                                  .extname(videoPath)
-                                  .slice(1)
-                                  .toLowerCase();
-                                const mimeType =
-                                  {
-                                    mp4: "video/mp4",
-                                    webm: "video/webm",
-                                    ogg: "video/ogg",
-                                    mov: "video/quicktime",
-                                    avi: "video/x-msvideo",
-                                  }[fileExtension] || "video/mp4";
-                                const videoDataUri = `data:${mimeType};base64,${videoBase64}`;
-                                return `<div class="attachment-item video-item"><video controls preload="none" class="lazy-load-video"><source data-src="${videoDataUri}" type="${mimeType}"></video><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="${videoDataUri}" class="lazy-load-attachment" target="_blank" download="video-${index}.${fileExtension}">Download</a></div></div></div>`;
-                              } catch (e) {
-                                return `<div class="attachment-item error">Failed to load video: ${sanitizeHTML(
-                                  videoPath
-                                )}</div>`;
-                              }
-                            })
-                            .join("")}</div></div>`;
-                        })()}
-
-                        ${(() => {
-                          if (!test.tracePath) return "";
-                          try {
-                            const traceFilePath = path.resolve(
-                              DEFAULT_OUTPUT_DIR,
-                              test.tracePath
-                            );
-                            if (!fsExistsSync(traceFilePath))
-                              return `<div class="attachments-section"><h4>Trace File</h4><div class="attachment-item error">Trace file not found: ${sanitizeHTML(
-                                test.tracePath
-                              )}</div></div>`;
-                            const traceBase64 =
-                              readFileSync(traceFilePath).toString("base64");
-                            const traceDataUri = `data:application/zip;base64,${traceBase64}`;
-                            return `<div class="attachments-section"><h4>Trace File</h4><div class="attachments-grid"><div class="attachment-item generic-attachment"><div class="attachment-icon">📄</div><div class="attachment-caption"><span class="attachment-name">trace.zip</span></div><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="${traceDataUri}" class="lazy-load-attachment" download="trace.zip">Download Trace</a></div></div></div></div></div>`;
-                          } catch (e) {
-                            return `<div class="attachments-section"><h4>Trace File</h4><div class="attachment-item error">Failed to load trace file.</div></div>`;
-                          }
-                        })()}
-                        
-                        ${(() => {
-                          if (
-                            !test.attachments ||
-                            test.attachments.length === 0
-                          )
-                            return "";
-
-                          return `<div class="attachments-section"><h4>Other Attachments</h4><div class="attachments-grid">${test.attachments
-                            .map((attachment) => {
-                              try {
-                                const attachmentPath = path.resolve(
-                                  DEFAULT_OUTPUT_DIR,
-                                  attachment.path
-                                );
-
-                                if (!fsExistsSync(attachmentPath)) {
-                                  console.warn(
-                                    `Attachment not found at: ${attachmentPath}`
-                                  );
-                                  return `<div class="attachment-item error">Attachment not found: ${sanitizeHTML(
-                                    attachment.name
-                                  )}</div>`;
-                                }
+          ${
+            test.errorMessage
+              ? `<div class="test-error-summary">${formatPlaywrightError(
+                  test.errorMessage
+                )}<button class="copy-error-btn" onclick="copyErrorToClipboard(this)" style="margin-top: 8px; padding: 4px 8px; background: #f0f0f0; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; border-color: #8B0000; color: #8B0000;" onmouseover="this.style.background='#e0e0e0'" onmouseout="this.style.background='#f0f0f0'">Copy Error Prompt</button></div>`
+              : ""
+          }
+          ${
+            test.snippet
+              ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
+                  test.snippet
+                )}</code></pre></div>`
+              : ""
+          }
+          <h4>Steps</h4>
+          <div class="steps-list">${generateStepsHTML(test.steps)}</div>
+          
+          ${(() => {
+            if (!test.stdout || test.stdout.length === 0) return "";
+            // FIXED: Now using 'testIndex' which is guaranteed to be defined
+            const logId = `stdout-log-${test.id || testIndex}`;
+            return `<div class="console-output-section"><h4>Console Output (stdout) <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</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></div></div>`;
+          })()}
+          
+          ${(() => {
+            if (!test.stderr || test.stderr.length === 0) return "";
+            // FIXED: Using 'testIndex'
+            const logId = `stderr-log-${test.id || testIndex}`;
+            return `<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")
+            )}</pre></div>`;
+          })()}
+
+          ${(() => {
+            if (!test.screenshots || test.screenshots.length === 0) return "";
+            const screenshotsHTML = test.screenshots
+              .map((screenshotPath, sIndex) => {
+                try {
+                  const imagePath = path.resolve(
+                    DEFAULT_OUTPUT_DIR,
+                    screenshotPath
+                  );
+                  if (!fsExistsSync(imagePath))
+                    return `<div class="attachment-item error">Screenshot not found</div>`;
+                  const base64ImageData =
+                    readFileSync(imagePath).toString("base64");
+                  // LAZY LOAD: Using helper with unique ID
+                  return createLazyMedia(
+                    base64ImageData,
+                    "image/png",
+                    "image",
+                    sIndex + 1,
+                    `screenshot-${testIndex}-${sIndex}.png`
+                  );
+                } catch (e) {
+                  return `<div class="attachment-item error">Error loading screenshot</div>`;
+                }
+              })
+              .join("");
+            return `<div class="attachments-section"><h4>Screenshots</h4><div class="attachments-grid">${screenshotsHTML}</div></div>`;
+          })()}
+
+          ${(() => {
+            if (!test.videoPath || test.videoPath.length === 0) return "";
+            const videosHTML = test.videoPath
+              .map((videoPath, vIndex) => {
+                try {
+                  const videoFilePath = path.resolve(
+                    DEFAULT_OUTPUT_DIR,
+                    videoPath
+                  );
+                  if (!fsExistsSync(videoFilePath))
+                    return `<div class="attachment-item error">Video not found</div>`;
+                  const videoBase64 =
+                    readFileSync(videoFilePath).toString("base64");
+                  const ext = path.extname(videoPath).slice(1).toLowerCase();
+                  const mime =
+                    { mp4: "video/mp4", webm: "video/webm" }[ext] ||
+                    "video/mp4";
+                  // LAZY LOAD: Using helper with unique ID
+                  return createLazyMedia(
+                    videoBase64,
+                    mime,
+                    "video",
+                    vIndex + 1,
+                    `video-${testIndex}-${vIndex}.${ext}`
+                  );
+                } catch (e) {
+                  return `<div class="attachment-item error">Error loading video</div>`;
+                }
+              })
+              .join("");
+            return `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${videosHTML}</div></div>`;
+          })()}
 
-                                const attachmentBase64 =
-                                  readFileSync(attachmentPath).toString(
-                                    "base64"
-                                  );
-                                const attachmentDataUri = `data:${attachment.contentType};base64,${attachmentBase64}`;
-
-                                return `<div class="attachment-item generic-attachment">
-                                          <div class="attachment-icon">${getAttachmentIcon(
-                                            attachment.contentType
-                                          )}</div>
-                                          <div class="attachment-caption">
-                                            <span class="attachment-name" title="${sanitizeHTML(
-                                              attachment.name
-                                            )}">${sanitizeHTML(
-                                  attachment.name
-                                )}</span>
-                                            <span class="attachment-type">${sanitizeHTML(
-                                              attachment.contentType
-                                            )}</span>
-                                          </div>
-                                          <div class="attachment-info">
-                                            <div class="trace-actions">
-                                              <a href="#" data-href="${attachmentDataUri}" class="view-full lazy-load-attachment" target="_blank">View</a>
-                                              <a href="#" data-href="${attachmentDataUri}" class="lazy-load-attachment" download="${sanitizeHTML(
-                                  attachment.name
-                                )}">Download</a>
-                                            </div>
-                                          </div>
-                                        </div>`;
-                              } catch (e) {
-                                console.error(
-                                  `Failed to process attachment "${attachment.name}":`,
-                                  e
-                                );
-                                return `<div class="attachment-item error">Failed to load attachment: ${sanitizeHTML(
-                                  attachment.name
-                                )}</div>`;
-                              }
-                            })
-                            .join("")}</div></div>`;
-                        })()}
-                        
-                        ${
-                          test.codeSnippet
-                            ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${sanitizeHTML(
-                                test.codeSnippet
-                              )}</code></pre></div>`
-                            : ""
-                        }
-                    </div>
-                </div>`;
+          ${
+            test.tracePath
+              ? `<div class="attachments-section"><h4>Trace Files</h4><div class="attachments-grid"><div class="attachment-item trace-item"><div class="trace-preview"><span class="trace-icon">📄</span><span class="trace-name">${sanitizeHTML(
+                  path.basename(test.tracePath)
+                )}</span></div><div class="attachment-info"><div class="trace-actions"><a href="${sanitizeHTML(
+                  test.tracePath
+                )}" target="_blank" download="${sanitizeHTML(
+                  path.basename(test.tracePath)
+                )}" class="download-trace">Download Trace</a></div></div></div></div></div>`
+              : ""
+          }
+          ${
+            test.attachments && test.attachments.length > 0
+              ? `<div class="attachments-section"><h4>Other Attachments</h4><div class="attachments-grid">${test.attachments
+                  .map(
+                    (attachment) =>
+                      `<div class="attachment-item generic-attachment"><div class="attachment-icon">${getAttachmentIcon(
+                        attachment.contentType
+                      )}</div><div class="attachment-caption"><span class="attachment-name" title="${sanitizeHTML(
+                        attachment.name
+                      )}">${sanitizeHTML(
+                        attachment.name
+                      )}</span><span class="attachment-type">${sanitizeHTML(
+                        attachment.contentType
+                      )}</span></div><div class="attachment-info"><div class="trace-actions"><a href="${sanitizeHTML(
+                        attachment.path
+                      )}" target="_blank" class="view-full">View</a><a href="${sanitizeHTML(
+                        attachment.path
+                      )}" target="_blank" download="${sanitizeHTML(
+                        attachment.name
+                      )}" class="download-trace">Download</a></div></div></div>`
+                  )
+                  .join("")}</div></div>`
+              : ""
+          }
+          ${
+            test.codeSnippet
+              ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
+                  sanitizeHTML(test.codeSnippet)
+                )}</code></pre></div>`
+              : ""
+          }
+        </div>
+      </div>`;
       })
       .join("");
   }
@@ -2222,10 +2555,10 @@ function generateHTML(reportData, trendData = null) {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" href="https://i.postimg.cc/v817w4sg/logo.png">
-    <link rel="apple-touch-icon" href="https://i.postimg.cc/v817w4sg/logo.png">
+    <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">
     <script src="https://code.highcharts.com/highcharts.js" defer></script>
-    <title>Playwright Pulse Report (Static Report)</title>
+    <title>Pulse Static Report</title>
     
 <style>
 :root {
@@ -2267,7 +2600,7 @@ body { font-family: var(--font-family); margin: 0; background-color: var(--backg
 .status-passed .value, .stat-passed svg { color: var(--success-color); }
 .status-failed .value, .stat-failed svg { color: var(--danger-color); }
 .status-skipped .value, .stat-skipped svg { color: var(--warning-color); }
-.dashboard-bottom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 28px; align-items: stretch; }
+.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; }
@@ -2389,6 +2722,7 @@ aspect-ratio: 16 / 9;
 .status-badge-small.status-failed { background-color: var(--danger-color); }
 .status-badge-small.status-skipped { background-color: var(--warning-color); }
 .status-badge-small.status-unknown { background-color: var(--dark-gray-color); }
+.badge-severity { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; margin-right: 8px; vertical-align: middle; }
 .no-data, .no-tests, .no-steps, .no-data-chart { padding: 28px; text-align: center; color: var(--dark-gray-color); font-style: italic; font-size:1.1em; background-color: var(--light-gray-color); border-radius: var(--border-radius); margin: 18px 0; border: 1px dashed var(--medium-gray-color); }
 .no-data-chart {font-size: 0.95em; padding: 18px;}
 .ai-failure-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 22px; }
@@ -2470,8 +2804,8 @@ aspect-ratio: 16 / 9;
     <div class="container">
         <header class="header">
             <div class="header-title">
-                <img id="report-logo" src="https://i.postimg.cc/v817w4sg/logo.png" alt="Report Logo">
-                <h1>Playwright Pulse Report</h1>
+                <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 Static Report</h1>
             </div>
             <div class="run-info"><strong>Run Date:</strong> ${formatDate(
               runSummary.timestamp
@@ -2522,7 +2856,10 @@ aspect-ratio: 16 / 9;
                     : '<div class="no-data">Environment data not available.</div>'
                 }
               </div> 
-                ${generateSuitesWidget(suitesData)}
+                <div style="display: flex; flex-direction: column; gap: 28px;">
+                  ${generateSuitesWidget(suitesData)}
+                  ${generateSeverityDistributionChart(results)}
+              </div>
             </div>
         </div>
         <div id="test-runs" class="tab-content">
@@ -2574,6 +2911,16 @@ aspect-ratio: 16 / 9;
               }
               </div>
           </div>
+          <div class="trend-charts-row">
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Spec files</h3>
+                ${generateSpecDurationChart(results)}
+            </div>
+            <div class="trend-chart">
+                <h3 class="chart-title-header">Duration by Test Describe</h3>
+                ${generateDescribeDurationChart(results)}
+            </div>
+          </div>
           <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
           <div class="trend-charts-row">
              <div class="trend-chart">
@@ -2819,6 +3166,41 @@ Code Snippet:
             button.classList.remove('expanded');
         }
     }
+
+    // --- LAZY MEDIA HANDLERS ---
+    window.loadMedia = function(id, type) {
+        const storage = document.getElementById('data-' + id);
+        const element = document.getElementById(id);
+        const placeholder = element.previousElementSibling; 
+        
+        if (storage && element) {
+            const data = storage.textContent;
+            element.src = data;
+            element.style.display = 'block';
+            if (placeholder) placeholder.style.display = 'none';
+            
+            if (type === 'video') {
+                element.play().catch(e => console.log('Autoplay prevented', e));
+            }
+        }
+    };
+
+    window.downloadMedia = function(id, filename) {
+        const storage = document.getElementById('data-' + id);
+        if (storage) {
+            const data = storage.textContent;
+            const link = document.createElement('a');
+            link.href = data;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        } else {
+            alert("Media data not found.");
+        }
+    };
+
+    // Ensure formatDuration is globally available... (existing code follows)
      
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
@@ -2923,10 +3305,25 @@ Code Snippet:
             filterTestHistoryCards();
         });
         // --- Expand/Collapse and Toggle Details Logic ---
+        // --- Expand/Collapse and Toggle Details Logic ---
         function toggleElementDetails(headerElement, contentSelector) { 
             let contentElement;
             if (headerElement.classList.contains('test-case-header')) {
+                // Find the content sibling
                 contentElement = headerElement.parentElement.querySelector('.test-case-content');
+                
+                // --- ALLURE-STYLE LAZY RENDERING ---
+                // If content is empty/not loaded, load it from the template script
+                if (contentElement && !contentElement.getAttribute('data-loaded')) {
+                    const testCaseId = contentElement.id.replace('details-', '');
+                    const template = document.getElementById('tmpl-' + testCaseId);
+                    if (template) {
+                        contentElement.innerHTML = template.textContent; // Hydrate HTML
+                        contentElement.setAttribute('data-loaded', 'true');
+                    }
+                }
+                // -----------------------------------
+
             } else if (headerElement.classList.contains('step-header')) {
                 contentElement = headerElement.nextElementSibling;
                 if (!contentElement || !contentElement.matches(contentSelector || '.step-details')) {
@@ -3393,4 +3790,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});