@arghajit/playwright-pulse-report 0.2.10 → 0.3.1

package/scripts/generate-static-report.mjs

@@ -5,6 +5,7 @@ import { readFileSync, existsSync as fsExistsSync } from "fs";
 import path from "path";
 import { fork } from "child_process";
 import { fileURLToPath } from "url";
+import { getOutputDir } from "./config-reader.mjs";
 
 /**
  * Dynamically imports the 'chalk' library for terminal string styling.
@@ -393,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.
@@ -412,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) => ({
@@ -776,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>
@@ -819,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;
@@ -827,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 {
@@ -1086,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>
@@ -1720,7 +1739,7 @@ function generateAIFailureAnalyzerTab(results) {
         </div>
     </div>
     <p class="ai-analyzer-description">
-        Analyze failed tests using AI to get suggestions and potential fixes. Click the AI Fix button for specific failed test.
+        Analyze failed tests using AI to get suggestions and potential fixes. Click the AI Fix button for instant analysis or use Copy AI Prompt to analyze with your preferred AI tool.
     </p>
     
     <div class="compact-failure-list">
@@ -1748,9 +1767,14 @@ function generateAIFailureAnalyzerTab(results) {
                         )}</span>
                     </div>
                 </div>
-                <button class="compact-ai-btn" onclick="getAIFix(this)" data-test-json="${testJson}">
-                    <span class="ai-text">AI Fix</span>
-                </button>
+                <div class="ai-buttons-group">
+                    <button class="compact-ai-btn" onclick="getAIFix(this)" data-test-json="${testJson}">
+                        <span class="ai-text">AI Fix</span>
+                    </button>
+                    <button class="copy-prompt-btn" onclick="copyAIPrompt(this)" data-test-json="${testJson}" title="Copy AI Prompt">
+                        <span class="copy-prompt-text">Copy AI Prompt</span>
+                    </button>
+                </div>
             </div>
             <div class="failure-error-preview">
                 <div class="error-snippet">${formatPlaywrightError(
@@ -1775,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.
@@ -1807,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>";
@@ -1828,323 +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>`;
-                        }
-                        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>`;
+                  ? `<div class="test-error-summary">
+                      ${
+                        step.stackTrace
+                          ? `<div class="stack-trace">${formatPlaywrightError(
+                              step.stackTrace
+                            )}</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>
-                        <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("");
   }
@@ -2154,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 {
@@ -2199,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; }
@@ -2321,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; }
@@ -2369,9 +2771,14 @@ aspect-ratio: 16 / 9;
 .browser-indicator { background: var(--info-color); color: white; }
 #load-more-tests { font-size: 16px; padding: 4px; background-color: var(--light-gray-color); border-radius: 4px; color: var(--text-color); }
 .duration-indicator { background: var(--medium-gray-color); color: var(--text-color); }
+.ai-buttons-group { display: flex; gap: 10px; flex-wrap: wrap; }
 .compact-ai-btn { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); color: white; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; white-space: nowrap;}
 .compact-ai-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(55, 65, 81, 0.4); }
 .ai-text { font-size: 0.95em; }
+.copy-prompt-btn { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: none; padding: 12px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; white-space: nowrap;}
+.copy-prompt-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); }
+.copy-prompt-btn.copied { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+.copy-prompt-text { font-size: 0.95em; }
 .failure-error-preview { padding: 0 20px 18px 20px; border-top: 1px solid var(--light-gray-color);}
 .error-snippet { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 6px; padding: 12px; margin-bottom: 12px; font-family: monospace; font-size: 0.9em; color: var(--danger-color); line-height: 1.4;}
 .expand-error-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color-secondary); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85em; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease;}
@@ -2382,7 +2789,7 @@ aspect-ratio: 16 / 9;
 .full-error-content { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 6px; padding: 15px; font-family: monospace; font-size: 0.9em; color: var(--danger-color); line-height: 1.4; max-height: 300px; overflow-y: auto;}
 @media (max-width: 1200px) { .trend-charts-row { grid-template-columns: 1fr; } }
 @media (max-width: 992px) { .dashboard-bottom-row { grid-template-columns: 1fr; } .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; } .filters input { min-width: 180px; } .filters select { min-width: 150px; } }
-@media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} .ai-failure-cards-grid { grid-template-columns: 1fr; } .ai-analyzer-stats { flex-direction: column; gap: 15px; text-align: center; } .failure-header { flex-direction: column; align-items: stretch; gap: 15px; } .failure-main-info { text-align: center; } .failure-meta { justify-content: center; } .compact-ai-btn { justify-content: center; padding: 12px 20px; } }
+@media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} .ai-failure-cards-grid { grid-template-columns: 1fr; } .ai-analyzer-stats { flex-direction: column; gap: 15px; text-align: center; } .failure-header { flex-direction: column; align-items: stretch; gap: 15px; } .failure-main-info { text-align: center; } .failure-meta { justify-content: center; } .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) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 45px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} .stat-item .stat-number { font-size: 1.5em; } .failure-header { padding: 15px; } .failure-error-preview, .full-error-details { padding-left: 15px; padding-right: 15px; } }
 .trace-actions a { text-decoration: none; font-weight: 500; font-size: 0.9em; }
 .generic-attachment { text-align: center; padding: 1rem; justify-content: center; }
@@ -2397,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
@@ -2449,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">
@@ -2501,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">
@@ -2651,6 +3071,81 @@ aspect-ratio: 16 / 9;
         }
     }
 
+    function copyAIPrompt(button) {
+        try {
+            const testJson = button.dataset.testJson;
+            const test = JSON.parse(atob(testJson));
+
+            const testName = test.name || 'Unknown Test';
+            const failureLogsAndErrors = [
+                'Error Message:',
+                test.errorMessage || 'Not available.',
+                '\\n\\n--- stdout ---',
+                (test.stdout && test.stdout.length > 0) ? test.stdout.join('\\n') : 'Not available.',
+                '\\n\\n--- stderr ---',
+                (test.stderr && test.stderr.length > 0) ? test.stderr.join('\\n') : 'Not available.'
+            ].join('\\n');
+            const codeSnippet = test.snippet || '';
+
+            const aiPrompt = \`You are an expert Playwright test automation engineer specializing in debugging test failures.
+
+INSTRUCTIONS:
+1. Analyze the test failure carefully
+2. Provide a brief root cause analysis
+3. Provide EXACTLY 5 specific, actionable fixes
+4. Each fix MUST include a code snippet (codeSnippet field)
+5. Return ONLY valid JSON, no markdown or extra text
+
+REQUIRED JSON FORMAT:
+{
+  "rootCause": "Brief explanation of why the test failed",
+  "suggestedFixes": [
+    {
+      "description": "Clear explanation of the fix",
+      "codeSnippet": "await page.waitForSelector('.button', { timeout: 5000 });"
+    }
+  ],
+  "affectedTests": ["test1", "test2"]
+}
+
+IMPORTANT:
+- Always return valid JSON only
+- Always provide exactly 5 fixes in suggestedFixes array
+- Each fix must have both description and codeSnippet fields
+- Make code snippets practical and Playwright-specific
+
+---
+
+Test Name: \${testName}
+
+Failure Logs and Errors:
+\${failureLogsAndErrors}
+
+Code Snippet:
+\${codeSnippet}\`;
+
+            navigator.clipboard.writeText(aiPrompt).then(() => {
+                const originalText = button.querySelector('.copy-prompt-text').textContent;
+                button.querySelector('.copy-prompt-text').textContent = 'Copied!';
+                button.classList.add('copied');
+                
+                const shortTestName = testName.split(' > ').pop() || testName;
+                alert(\`AI prompt to generate a suggested fix for "\${shortTestName}" has been copied to your clipboard.\`);
+                
+                setTimeout(() => {
+                    button.querySelector('.copy-prompt-text').textContent = originalText;
+                    button.classList.remove('copied');
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy AI prompt:', err);
+                alert('Failed to copy AI prompt to clipboard. Please try again.');
+            });
+        } catch (e) {
+            console.error('Error processing test data for AI Prompt copy:', e);
+            alert('Could not process test data. Please try again.');
+        }
+    }
+
     function closeAiModal() {
         const modal = document.getElementById('ai-fix-modal');
         if(modal) modal.style.display = 'none';
@@ -2671,6 +3166,41 @@ aspect-ratio: 16 / 9;
             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');
@@ -2775,10 +3305,25 @@ aspect-ratio: 16 / 9;
             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')) {
@@ -2826,6 +3371,18 @@ aspect-ratio: 16 / 9;
                 }
                 return;
             }
+            const annotationLink = e.target.closest('a.annotation-link');
+            if (annotationLink) {
+                e.preventDefault();
+                const annotationId = annotationLink.dataset.annotation;
+                if (annotationId) {
+                    const jiraUrl = prompt('Enter your JIRA/Ticket system base URL (e.g., https://your-company.atlassian.net/browse/):', 'https://your-company.atlassian.net/browse/');
+                    if (jiraUrl) {
+                        window.open(jiraUrl + annotationId, '_blank');
+                    }
+                }
+                return;
+            }
             const img = e.target.closest('img.lazy-load-image');
             if (img && img.dataset && img.dataset.src) {
                 if (e.preventDefault) e.preventDefault();
@@ -2994,10 +3551,10 @@ aspect-ratio: 16 / 9;
 </html>
   `;
 }
-async function runScript(scriptPath) {
+async function runScript(scriptPath, args = []) {
   return new Promise((resolve, reject) => {
     console.log(chalk.blue(`Executing script: ${scriptPath}...`));
-    const process = fork(scriptPath, [], {
+    const process = fork(scriptPath, args, {
       stdio: "inherit",
     });
 
@@ -3027,13 +3584,22 @@ async function main() {
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
 
+  const args = process.argv.slice(2);
+  let customOutputDir = null;
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--outputDir" || args[i] === "-o") {
+      customOutputDir = args[i + 1];
+      break;
+    }
+  }
+
   // 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
   );
 
-  const outputDir = path.resolve(process.cwd(), DEFAULT_OUTPUT_DIR);
+  const outputDir = await getOutputDir(customOutputDir);
   const reportJsonPath = path.resolve(outputDir, DEFAULT_JSON_FILE); // Current run's main JSON
   const reportHtmlPath = path.resolve(outputDir, DEFAULT_HTML_FILE);
 
@@ -3043,10 +3609,21 @@ async function main() {
 
   console.log(chalk.blue(`Starting static HTML report generation...`));
   console.log(chalk.blue(`Output directory set to: ${outputDir}`));
+  if (customOutputDir) {
+    console.log(chalk.gray(`  (from CLI argument)`));
+  } else {
+    const { exists } = await import("./config-reader.mjs").then((m) => ({
+      exists: true,
+    }));
+    console.log(
+      chalk.gray(`  (auto-detected from playwright.config or using default)`)
+    );
+  }
 
   // Step 1: Ensure current run data is archived to the history folder
   try {
-    await runScript(archiveRunScriptPath); // This script now handles JSON history
+    const archiveArgs = customOutputDir ? ["--outputDir", customOutputDir] : [];
+    await runScript(archiveRunScriptPath, archiveArgs);
     console.log(
       chalk.green("Current run data archiving to history completed.")
     );
@@ -3213,4 +3790,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});