@arghajit/playwright-pulse-report 0.2.10 → 0.3.1

package/scripts/generate-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";
 
 // Use dynamic import for chalk as it's ESM only
 let chalk;
@@ -349,6 +350,7 @@ function generateTestTrendsChart(trendData) {
       </script>
   `;
 }
+const accentColorAltRGB = "255, 152, 0"; // Assuming var(--accent-color-alt) is Orange #FF9800
 function generateDurationTrendChart(trendData) {
   if (!trendData || !trendData.overall || trendData.overall.length === 0) {
     return '<div class="no-data">No overall trend data available for durations.</div>';
@@ -362,8 +364,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) => ({
@@ -615,8 +615,9 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       chart: {
           type: 'pie',
           width: ${chartWidth},
-          height: ${chartHeight - 40
-    }, // Adjusted height to make space for legend if chartHeight is for the whole wrapper
+          height: ${
+            chartHeight - 40
+          }, // Adjusted height to make space for legend if chartHeight is for the whole wrapper
           backgroundColor: 'transparent',
           plotShadow: false,
           spacingBottom: 40 // Ensure space for legend
@@ -668,8 +669,9 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
   return `
       <div class="pie-chart-wrapper" style="align-items: center; max-height: 450px">
           <div style="display: flex; align-items: start; width: 100%;"><h3>Test Distribution</h3></div>
-          <div id="${chartId}" style="width: ${chartWidth}px; height: ${chartHeight - 40
-    }px;"></div>
+          <div id="${chartId}" style="width: ${chartWidth}px; height: ${
+    chartHeight - 40
+  }px;"></div>
           <script>
               document.addEventListener('DOMContentLoaded', function() {
                   if (typeof Highcharts !== 'undefined') {
@@ -700,6 +702,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>
@@ -742,6 +747,20 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           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;
@@ -751,6 +770,8 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           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 {
@@ -808,6 +829,8 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           padding: 10px 0; 
           border-bottom: 1px solid var(--border-light-color);
           font-size: 0.875rem;
+          flex-wrap: wrap; /* Allow details to wrap on very small screens */
+          gap: 8px;
         }
         
         .env-detail-row:last-child {
@@ -825,6 +848,7 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
           text-align: right;
           word-break: break-all; 
+          margin-left: auto; /* Push to right */
         }
         
         .env-chip {
@@ -897,14 +921,15 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
             <span class="env-detail-value">
               <div class="env-cpu-cores">
                 ${Array.from(
-    { length: Math.max(0, environment.cpu.cores || 0) },
-    (_, i) =>
-      `<div class="env-core-indicator ${i >=
-        (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
-        ? "inactive"
-        : ""
-      }" title="Core ${i + 1}"></div>`
-  ).join("")}
+                  { length: Math.max(0, environment.cpu.cores || 0) },
+                  (_, i) =>
+                    `<div class="env-core-indicator ${
+                      i >=
+                      (environment.cpu.cores >= 8 ? 8 : environment.cpu.cores)
+                        ? "inactive"
+                        : ""
+                    }" title="Core ${i + 1}"></div>`
+                ).join("")}
                 <span>${environment.cpu.cores || "N/A"} cores</span>
               </div>
             </span>
@@ -924,20 +949,23 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
         <div class="env-card-content">
           <div class="env-detail-row">
             <span class="env-detail-label">OS Type</span>
-            <span class="env-detail-value">${environment.os.split(" ")[0] === "darwin"
-      ? "darwin (macOS)"
-      : environment.os.split(" ")[0] || "Unknown"
-    }</span>
+            <span class="env-detail-value">${
+              environment.os.split(" ")[0] === "darwin"
+                ? "darwin (macOS)"
+                : environment.os.split(" ")[0] || "Unknown"
+            }</span>
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">OS Version</span>
-            <span class="env-detail-value">${environment.os.split(" ")[1] || "N/A"
-    }</span>
+            <span class="env-detail-value">${
+              environment.os.split(" ")[1] || "N/A"
+            }</span>
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Hostname</span>
-            <span class="env-detail-value" title="${environment.host}">${environment.host
-    }</span>
+            <span class="env-detail-value" title="${environment.host}">${
+    environment.host
+  }</span>
           </div>
         </div>
       </div>
@@ -958,10 +986,11 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Working Dir</span>
-            <span class="env-detail-value" title="${environment.cwd}">${environment.cwd.length > 25
+            <span class="env-detail-value" title="${environment.cwd}">${
+    environment.cwd.length > 25
       ? "..." + environment.cwd.slice(-22)
       : environment.cwd
-    }</span>
+  }</span>
           </div>
         </div>
       </div>
@@ -975,34 +1004,37 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           <div class="env-detail-row">
             <span class="env-detail-label">Platform Arch</span>
             <span class="env-detail-value">
-              <span class="env-chip ${environment.os.includes("darwin") &&
-      environment.cpu.model.toLowerCase().includes("apple")
-      ? "env-chip-success"
-      : "env-chip-warning"
-    }">
-                ${environment.os.includes("darwin") &&
-      environment.cpu.model.toLowerCase().includes("apple")
-      ? "Apple Silicon"
-      : environment.cpu.model.toLowerCase().includes("arm") ||
-        environment.cpu.model.toLowerCase().includes("aarch64")
-        ? "ARM-based"
-        : "x86/Other"
-    }
+              <span class="env-chip ${
+                environment.os.includes("darwin") &&
+                environment.cpu.model.toLowerCase().includes("apple")
+                  ? "env-chip-success"
+                  : "env-chip-warning"
+              }">
+                ${
+                  environment.os.includes("darwin") &&
+                  environment.cpu.model.toLowerCase().includes("apple")
+                    ? "Apple Silicon"
+                    : environment.cpu.model.toLowerCase().includes("arm") ||
+                      environment.cpu.model.toLowerCase().includes("aarch64")
+                    ? "ARM-based"
+                    : "x86/Other"
+                }
               </span>
             </span>
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Memory per Core</span>
-            <span class="env-detail-value">${environment.cpu.cores > 0
-      ? (
-        parseFloat(environment.memory) / environment.cpu.cores
-      ).toFixed(2) + " GB"
-      : "N/A"
-    }</span>
+            <span class="env-detail-value">${
+              environment.cpu.cores > 0
+                ? (
+                    parseFloat(environment.memory) / environment.cpu.cores
+                  ).toFixed(2) + " GB"
+                : "N/A"
+            }</span>
           </div>
           <div class="env-detail-row">
             <span class="env-detail-label">Run Context</span>
-            <span class="env-detail-value">CI/Local Test</span>
+            <span class="env-detail-value">${runContext}</span>
           </div>
         </div>
       </div>
@@ -1330,19 +1362,19 @@ function generateTestHistoryContent(trendData) {
       
       <div class="test-history-grid">
         ${testHistory
-      .map((test) => {
-        const latestRun =
-          test.history.length > 0
-            ? test.history[test.history.length - 1]
-            : { status: "unknown" };
-        return `
+          .map((test) => {
+            const latestRun =
+              test.history.length > 0
+                ? test.history[test.history.length - 1]
+                : { status: "unknown" };
+            return `
             <div class="test-history-card" data-test-name="${sanitizeHTML(
-          test.testTitle.toLowerCase()
-        )}" data-latest-status="${latestRun.status}">
+              test.testTitle.toLowerCase()
+            )}" data-latest-status="${latestRun.status}">
               <div class="test-history-header">
                 <p title="${sanitizeHTML(test.testTitle)}">${capitalize(
-          sanitizeHTML(test.testTitle)
-        )}</p>
+              sanitizeHTML(test.testTitle)
+            )}</p>
                 <span class="status-badge ${getStatusClass(latestRun.status)}">
                   ${String(latestRun.status).toUpperCase()}
                 </span>
@@ -1357,27 +1389,27 @@ function generateTestHistoryContent(trendData) {
                     <thead><tr><th>Run</th><th>Status</th><th>Duration</th><th>Date</th></tr></thead>
                     <tbody>
                       ${test.history
-            .slice()
-            .reverse()
-            .map(
-              (run) => `
+                        .slice()
+                        .reverse()
+                        .map(
+                          (run) => `
                         <tr>
                           <td>${run.runId}</td>
                           <td><span class="status-badge-small ${getStatusClass(
-                run.status
-              )}">${String(run.status).toUpperCase()}</span></td>
+                            run.status
+                          )}">${String(run.status).toUpperCase()}</span></td>
                           <td>${formatDuration(run.duration)}</td>
                           <td>${formatDate(run.timestamp)}</td>
                         </tr>`
-            )
-            .join("")}
+                        )
+                        .join("")}
                     </tbody>
                   </table>
                 </div>
               </details>
             </div>`;
-      })
-      .join("")}
+          })
+          .join("")}
       </div>
     </div>
   `;
@@ -1456,52 +1488,65 @@ function getSuitesData(results) {
 }
 function generateSuitesWidget(suitesData) {
   if (!suitesData || suitesData.length === 0) {
-    return `<div class="suites-widget"><div class="suites-header"><h2>Test Suites</h2></div><div class="no-data">No suite data available.</div></div>`;
+    // Maintain height consistency even if empty
+    return `<div class="suites-widget" style="height: 450px;"><div class="suites-header"><h2>Test Suites</h2></div><div class="no-data">No suite data available.</div></div>`;
   }
+
+  // Added inline styles for height consistency with Pie Chart (approx 450px) and scrolling
   return `
-<div class="suites-widget">
-  <div class="suites-header">
+<div class="suites-widget" style="height: 450px; display: flex; flex-direction: column;">
+  <div class="suites-header" style="flex-shrink: 0;">
     <h2>Test Suites</h2>
-    <span class="summary-badge">${suitesData.length
+    <span class="summary-badge">${
+      suitesData.length
     } suites • ${suitesData.reduce(
-      (sum, suite) => sum + suite.count,
-      0
-    )} tests</span>
+    (sum, suite) => sum + suite.count,
+    0
+  )} tests</span>
   </div>
-  <div class="suites-grid">
-    ${suitesData
-      .map(
-        (suite) => `
-    <div class="suite-card status-${suite.statusOverall}">
-      <div class="suite-card-header">
-        <h3 class="suite-name" title="${sanitizeHTML(
-          suite.name
-        )} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(suite.name)}</h3>
-      </div>
-      <div>🖥️ <span class="browser-tag">${sanitizeHTML(
-          suite.browser
-        )}</span></div>
-      <div class="suite-card-body">
-        <span class="test-count">${suite.count} test${suite.count !== 1 ? "s" : ""
-          }</span>
-        <div class="suite-stats">
-            ${suite.passed > 0
-            ? `<span class="stat-passed" title="Passed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg> ${suite.passed}</span>`
-            : ""
-          }
-            ${suite.failed > 0
-            ? `<span class="stat-failed" title="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg> ${suite.failed}</span>`
-            : ""
-          }
-            ${suite.skipped > 0
-            ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
-            : ""
-          }
-        </div>
+  
+  <div class="suites-grid-container" style="flex-grow: 1; overflow-y: auto; padding-right: 5px;">
+      <div class="suites-grid">
+        ${suitesData
+          .map(
+            (suite) => `
+        <div class="suite-card status-${suite.statusOverall}">
+          <div class="suite-card-header">
+            <h3 class="suite-name" title="${sanitizeHTML(
+              suite.name
+            )} (${sanitizeHTML(suite.browser)})">${sanitizeHTML(
+              suite.name
+            )}</h3>
+          </div>
+          <div>🖥️ <span class="browser-tag">${sanitizeHTML(
+            suite.browser
+          )}</span></div>
+          <div class="suite-card-body">
+            <span class="test-count">${suite.count} test${
+              suite.count !== 1 ? "s" : ""
+            }</span>
+            <div class="suite-stats">
+                ${
+                  suite.passed > 0
+                    ? `<span class="stat-passed" title="Passed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg> ${suite.passed}</span>`
+                    : ""
+                }
+                ${
+                  suite.failed > 0
+                    ? `<span class="stat-failed" title="Failed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg> ${suite.failed}</span>`
+                    : ""
+                }
+                ${
+                  suite.skipped > 0
+                    ? `<span class="stat-skipped" title="Skipped"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg> ${suite.skipped}</span>`
+                    : ""
+                }
+            </div>
+          </div>
+        </div>`
+          )
+          .join("")}
       </div>
-    </div>`
-      )
-      .join("")}
   </div>
 </div>`;
 }
@@ -1519,7 +1564,9 @@ function getAttachmentIcon(contentType) {
   return "📎";
 }
 function generateAIFailureAnalyzerTab(results) {
-  const failedTests = (results || []).filter(test => test.status === 'failed');
+  const failedTests = (results || []).filter(
+    (test) => test.status === "failed"
+  );
 
   if (failedTests.length === 0) {
     return `
@@ -1529,7 +1576,7 @@ function generateAIFailureAnalyzerTab(results) {
   }
 
   // btoa is not available in Node.js environment, so we define a simple polyfill for it.
-  const btoa = (str) => Buffer.from(str).toString('base64');
+  const btoa = (str) => Buffer.from(str).toString("base64");
 
   return `
     <h2 class="tab-main-title">AI Failure Analysis</h2>
@@ -1539,41 +1586,61 @@ function generateAIFailureAnalyzerTab(results) {
             <span class="stat-label">Failed Tests</span>
         </div>
         <div class="stat-item">
-            <span class="stat-number">${new Set(failedTests.map(t => t.browser)).size}</span>
+            <span class="stat-number">${
+              new Set(failedTests.map((t) => t.browser)).size
+            }</span>
             <span class="stat-label">Browsers</span>
         </div>
         <div class="stat-item">
-            <span class="stat-number">${(Math.round(failedTests.reduce((sum, test) => sum + (test.duration || 0), 0) / 1000))}s</span>
+            <span class="stat-number">${Math.round(
+              failedTests.reduce((sum, test) => sum + (test.duration || 0), 0) /
+                1000
+            )}s</span>
             <span class="stat-label">Total Duration</span>
         </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">
-      ${failedTests.map(test => {
-    const testTitle = test.name.split(" > ").pop() || "Unnamed Test";
-    const testJson = btoa(JSON.stringify(test)); // Base64 encode the test object
-    const truncatedError = (test.errorMessage || "No error message").slice(0, 150) +
-      (test.errorMessage && test.errorMessage.length > 150 ? "..." : "");
-
-    return `
+      ${failedTests
+        .map((test) => {
+          const testTitle = test.name.split(" > ").pop() || "Unnamed Test";
+          const testJson = btoa(JSON.stringify(test)); // Base64 encode the test object
+          const truncatedError =
+            (test.errorMessage || "No error message").slice(0, 150) +
+            (test.errorMessage && test.errorMessage.length > 150 ? "..." : "");
+
+          return `
         <div class="compact-failure-item">
             <div class="failure-header">
                 <div class="failure-main-info">
-                    <h3 class="failure-title" title="${sanitizeHTML(test.name)}">${sanitizeHTML(testTitle)}</h3>
+                    <h3 class="failure-title" title="${sanitizeHTML(
+                      test.name
+                    )}">${sanitizeHTML(testTitle)}</h3>
                     <div class="failure-meta">
-                        <span class="browser-indicator">${sanitizeHTML(test.browser || 'unknown')}</span>
-                        <span class="duration-indicator">${formatDuration(test.duration)}</span>
+                        <span class="browser-indicator">${sanitizeHTML(
+                          test.browser || "unknown"
+                        )}</span>
+                        <span class="duration-indicator">${formatDuration(
+                          test.duration
+                        )}</span>
                     </div>
                 </div>
-                <button class="compact-ai-btn" onclick="getAIFix(this)" data-test-json="${testJson}">
-                    <span class="ai-text">AI Fix</span>
-                </button>
+                <div 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(truncatedError)}</div>
+                <div class="error-snippet">${formatPlaywrightError(
+                  truncatedError
+                )}</div>
                 <button class="expand-error-btn" onclick="toggleErrorDetails(this)">
                     <span class="expand-text">Show Full Error</span>
                     <span class="expand-icon">▼</span>
@@ -1581,12 +1648,15 @@ function generateAIFailureAnalyzerTab(results) {
             </div>
             <div class="full-error-details" style="display: none;">
                 <div class="full-error-content">
-                    ${formatPlaywrightError(test.errorMessage || "No detailed error message available")}
+                    ${formatPlaywrightError(
+                      test.errorMessage || "No detailed error message available"
+                    )}
                 </div>
             </div>
         </div>
-        `
-  }).join('')}
+        `;
+        })
+        .join("")}
     </div>
 
     <!-- AI Fix Modal -->
@@ -1603,6 +1673,378 @@ 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>
+  `;
+}
+/**
+ * Generates the HTML content for the report.
+ * @param {object} reportData - The report data object containing run and results.
+ * @param {object} trendData - Optional trend data object for additional trends.
+ * @returns {string} HTML string for the report.
+ */
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -1618,7 +2060,7 @@ function generateHTML(reportData, trendData = null) {
   const fixPath = (p) => {
     if (!p) return "";
     // This regex handles both forward slashes and backslashes
-    return p.replace(new RegExp(`^${DEFAULT_OUTPUT_DIR}[\\\\/]`), '');
+    return p.replace(new RegExp(`^${DEFAULT_OUTPUT_DIR}[\\\\/]`), "");
   };
 
   const totalTestsOr1 = runSummary.totalTests || 1;
@@ -1640,6 +2082,28 @@ function generateHTML(reportData, trendData = null) {
         const testFileParts = test.name.split(" > ");
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
+        // --- NEW: 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);
+        // We reuse 'status-badge' class for size/font consistency, but override background color
+        const severityBadge = `<span class="status-badge" style="background-color: ${severityColor}; margin-right: 8px;">${severity}</span>`;
+        // ---------------------------
         const generateStepsHTML = (steps, depth = 0) => {
           if (!steps || steps.length === 0)
             return "<div class='no-steps'>No steps recorded for this test.</div>";
@@ -1663,20 +2127,23 @@ function generateHTML(reportData, trendData = null) {
               )}</span>
             </div>
             <div class="step-details" style="display: none;">
-              ${step.codeLocation
+              ${
+                step.codeLocation
                   ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
-                    step.codeLocation
-                  )}</div>`
+                      step.codeLocation
+                    )}</div>`
                   : ""
-                }
-              ${step.errorMessage
+              }
+              ${
+                step.errorMessage
                   ? `<div class="test-error-summary">
-                      ${step.stackTrace
-                    ? `<div class="stack-trace">${formatPlaywrightError(
-                      step.stackTrace
-                    )}</div>`
-                    : ""
-                  }
+                      ${
+                        step.stackTrace
+                          ? `<div class="stack-trace">${formatPlaywrightError(
+                              step.stackTrace
+                            )}</div>`
+                          : ""
+                      }
                       <button 
                         class="copy-error-btn" 
                         onclick="copyErrorToClipboard(this)"
@@ -1698,14 +2165,15 @@ function generateHTML(reportData, trendData = null) {
                       </button>
                     </div>`
                   : ""
-                }
-              ${hasNestedSteps
+              }
+              ${
+                hasNestedSteps
                   ? `<div class="nested-steps">${generateStepsHTML(
-                    step.steps,
-                    depth + 1
-                  )}</div>`
+                      step.steps,
+                      depth + 1
+                    )}</div>`
                   : ""
-                }
+              }
             </div>
           </div>`;
             })
@@ -1713,41 +2181,87 @@ function generateHTML(reportData, trendData = null) {
         };
 
         return `
-      <div class="test-case" data-status="${test.status
-          }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
-            .join(",")
-            .toLowerCase()}">
+      <div class="test-case" data-status="${
+        test.status
+      }" data-browser="${sanitizeHTML(browser)}" data-tags="${(test.tags || [])
+          .join(",")
+          .toLowerCase()}">
         <div class="test-case-header" role="button" aria-expanded="false">
           <div class="test-case-summary">
             <span class="status-badge ${getStatusClass(test.status)}">${String(
-              test.status
-            ).toUpperCase()}</span>
+          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(" ")
-            : ""
-          }
+            ${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
-            )}
+          test.totalWorkers
+        )}]</p>
+          ${
+            test.errorMessage
+              ? `<div class="test-error-summary">${formatPlaywrightError(
+                  test.errorMessage
+                )}
                 <button 
                         class="copy-error-btn" 
                         onclick="copyErrorToClipboard(this)"
@@ -1768,13 +2282,14 @@ function generateHTML(reportData, trendData = null) {
                         Copy Error Prompt
                       </button>
                 </div>`
-            : ""
+              : ""
           }
-          ${test.snippet
-            ? `<div class="code-section"><h4>Error Snippet</h4><pre><code>${formatPlaywrightError(
-              test.snippet
-            )}</code></pre></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>
@@ -1793,75 +2308,86 @@ function generateHTML(reportData, trendData = null) {
                           </div>
                       </div>`;
           })()}
-          ${test.stderr && test.stderr.length > 0
-            ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
-              test.stderr.map((line) => sanitizeHTML(line)).join("\n")
-            )}</pre></div>`
-            : ""
+          ${
+            test.stderr && test.stderr.length > 0
+              ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log" style="background-color: #2d2d2d; color: indianred; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
+                  test.stderr.map((line) => sanitizeHTML(line)).join("\n")
+                )}</pre></div>`
+              : ""
           }
-          ${test.screenshots && test.screenshots.length > 0
-            ? `
+          ${
+            test.screenshots && test.screenshots.length > 0
+              ? `
             <div class="attachments-section">
                 <h4>Screenshots</h4>
                 <div class="attachments-grid">
                 ${test.screenshots
-              .map(
-                (screenshot, index) => `
+                  .map(
+                    (screenshot, index) => `
                     <div class="attachment-item">
-                    <img src="${fixPath(screenshot)}" alt="Screenshot ${index + 1}">
+                    <img src="${fixPath(screenshot)}" alt="Screenshot ${
+                      index + 1
+                    }">
                     <div class="attachment-info">
                         <div class="trace-actions">
-                        <a href="${fixPath(screenshot)}" target="_blank" class="view-full">View Full Image</a>
-                        <a href="${fixPath(screenshot)}" target="_blank" download="screenshot-${Date.now()}-${index}.png">Download</a>
+                        <a href="${fixPath(
+                          screenshot
+                        )}" target="_blank" class="view-full">View Full Image</a>
+                        <a href="${fixPath(
+                          screenshot
+                        )}" target="_blank" download="screenshot-${Date.now()}-${index}.png">Download</a>
                         </div>
                     </div>
                     </div>
                 `
-              )
-              .join("")}
+                  )
+                  .join("")}
                 </div>
             </div>
             `
-            : ""
+              : ""
           }
-          ${test.videoPath && test.videoPath.length > 0
-            ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
-              .map((videoUrl, index) => {
-                const fixedVideoUrl = fixPath(videoUrl);
-                const fileExtension = String(fixedVideoUrl)
-                  .split(".")
-                  .pop()
-                  .toLowerCase();
-                const mimeType =
-                  {
-                    mp4: "video/mp4",
-                    webm: "video/webm",
-                    ogg: "video/ogg",
-                    mov: "video/quicktime",
-                    avi: "video/x-msvideo",
-                  }[fileExtension] || "video/mp4";
-                return `<div class="attachment-item video-item">
-                            <video controls width="100%" height="auto" title="Video ${index + 1
-                  }">
+          ${
+            test.videoPath && test.videoPath.length > 0
+              ? `<div class="attachments-section"><h4>Videos</h4><div class="attachments-grid">${test.videoPath
+                  .map((videoUrl, index) => {
+                    const fixedVideoUrl = fixPath(videoUrl);
+                    const fileExtension = String(fixedVideoUrl)
+                      .split(".")
+                      .pop()
+                      .toLowerCase();
+                    const mimeType =
+                      {
+                        mp4: "video/mp4",
+                        webm: "video/webm",
+                        ogg: "video/ogg",
+                        mov: "video/quicktime",
+                        avi: "video/x-msvideo",
+                      }[fileExtension] || "video/mp4";
+                    return `<div class="attachment-item video-item">
+                            <video controls width="100%" height="auto" title="Video ${
+                              index + 1
+                            }">
                                 <source src="${sanitizeHTML(
-                    fixedVideoUrl
-                  )}" type="${mimeType}">
+                                  fixedVideoUrl
+                                )}" type="${mimeType}">
                                 Your browser does not support the video tag.
                             </video>
                             <div class="attachment-info">
                                 <div class="trace-actions">
                                 <a href="${sanitizeHTML(
-                    fixedVideoUrl
-                  )}" target="_blank" download="video-${Date.now()}-${index}.${fileExtension}">Download</a>
+                                  fixedVideoUrl
+                                )}" target="_blank" download="video-${Date.now()}-${index}.${fileExtension}">Download</a>
                                 </div>
                             </div>
                         </div>`;
-              })
-              .join("")}</div></div>`
-            : ""
+                  })
+                  .join("")}</div></div>`
+              : ""
           }
-          ${test.tracePath
-            ? `
+          ${
+            test.tracePath
+              ? `
             <div class="attachments-section">
                 <h4>Trace Files</h4>
                 <div class="attachments-grid">
@@ -1869,70 +2395,72 @@ function generateHTML(reportData, trendData = null) {
                         <div class="trace-preview">
                         <span class="trace-icon">📄</span>
                         <span class="trace-name">${sanitizeHTML(
-              path.basename(test.tracePath)
-            )}</span>
+                          path.basename(test.tracePath)
+                        )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                             <a href="${sanitizeHTML(
-              fixPath(test.tracePath)
-            )}" target="_blank" download="${sanitizeHTML(
-              path.basename(test.tracePath)
-            )}" class="download-trace">Download Trace</a>
+                              fixPath(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
-            ? `
+          ${
+            test.attachments && test.attachments.length > 0
+              ? `
             <div class="attachments-section">
                 <h4>Other Attachments</h4>
                 <div class="attachments-grid">
                 ${test.attachments
-              .map(
-                (attachment) => `
+                  .map(
+                    (attachment) => `
                     <div class="attachment-item generic-attachment">
                         <div class="attachment-icon">${getAttachmentIcon(
-                  attachment.contentType
-                )}</div>
+                          attachment.contentType
+                        )}</div>
                         <div class="attachment-caption">
                         <span class="attachment-name" title="${sanitizeHTML(
-                  attachment.name
-                )}">${sanitizeHTML(attachment.name)}</span>
+                          attachment.name
+                        )}">${sanitizeHTML(attachment.name)}</span>
                         <span class="attachment-type">${sanitizeHTML(
-                  attachment.contentType
-                )}</span>
+                          attachment.contentType
+                        )}</span>
                         </div>
                         <div class="attachment-info">
                         <div class="trace-actions">
                         <a href="${sanitizeHTML(
-                  fixPath(attachment.path)
-                )}" target="_blank" class="view-full">View</a>
+                          fixPath(attachment.path)
+                        )}" target="_blank" class="view-full">View</a>
                             <a href="${sanitizeHTML(
-                  fixPath(attachment.path)
-                )}" target="_blank" download="${sanitizeHTML(
-                  attachment.name
-                )}" class="download-trace">Download</a>
+                              fixPath(attachment.path)
+                            )}" target="_blank" download="${sanitizeHTML(
+                      attachment.name
+                    )}" class="download-trace">Download</a>
                         </div>
                         </div>
                     </div>
                 `
-              )
-              .join("")}
+                  )
+                  .join("")}
                 </div>
             </div>
             `
-            : ""
+              : ""
           }
-          ${test.codeSnippet
-            ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
-              sanitizeHTML(test.codeSnippet)
-            )}</code></pre></div>`
-            : ""
+          ${
+            test.codeSnippet
+              ? `<div class="code-section"><h4>Code Snippet</h4><pre><code>${formatPlaywrightError(
+                  sanitizeHTML(test.codeSnippet)
+                )}</code></pre></div>`
+              : ""
           }
         </div>
       </div>`;
@@ -1945,10 +2473,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</title>
+    <title>Pulse Report</title>
     <style>
         :root { 
           --primary-color: #3f51b5; --secondary-color: #ff4081; --accent-color: #673ab7; --accent-color-alt: #FF9800;
@@ -1989,7 +2517,7 @@ function generateHTML(reportData, trendData = null) {
         .status-passed .value, .stat-passed svg { color: var(--success-color); }
         .status-failed .value, .stat-failed svg { color: var(--danger-color); }
         .status-skipped .value, .stat-skipped svg { color: var(--warning-color); }
-        .dashboard-bottom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 28px; align-items: stretch; }
+        .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; }
@@ -2092,6 +2620,7 @@ function generateHTML(reportData, trendData = null) {
         .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; }
@@ -2238,6 +2767,35 @@ function generateHTML(reportData, trendData = null) {
         .ai-text { 
             font-size: 0.95em; 
         }
+        .ai-buttons-group { 
+            display: flex; 
+            gap: 10px; 
+            flex-wrap: wrap; 
+        }
+        .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);
@@ -2313,9 +2871,14 @@ function generateHTML(reportData, trendData = null) {
             .failure-meta { 
                 justify-content: center; 
             }
-            .compact-ai-btn { 
+            .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) {
@@ -2341,12 +2904,12 @@ function generateHTML(reportData, trendData = null) {
     <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 Report</h1>
             </div>
             <div class="run-info"><strong>Run Date:</strong> ${formatDate(
-    runSummary.timestamp
-  )}<br><strong>Total Duration:</strong> ${formatDuration(
+              runSummary.timestamp
+            )}<br><strong>Total Duration:</strong> ${formatDuration(
     runSummary.duration
   )}</div>
         </header>
@@ -2358,55 +2921,64 @@ function generateHTML(reportData, trendData = null) {
         </div>
         <div id="dashboard" class="tab-content active">
             <div class="dashboard-grid">
-                <div class="summary-card"><h3>Total Tests</h3><div class="value">${runSummary.totalTests
-    }</div></div>
-                <div class="summary-card status-passed"><h3>Passed</h3><div class="value">${runSummary.passed
-    }</div><div class="trend-percentage">${passPercentage}%</div></div>
-                <div class="summary-card status-failed"><h3>Failed</h3><div class="value">${runSummary.failed
-    }</div><div class="trend-percentage">${failPercentage}%</div></div>
-                <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${runSummary.skipped || 0
-    }</div><div class="trend-percentage">${skipPercentage}%</div></div>
+                <div class="summary-card"><h3>Total Tests</h3><div class="value">${
+                  runSummary.totalTests
+                }</div></div>
+                <div class="summary-card status-passed"><h3>Passed</h3><div class="value">${
+                  runSummary.passed
+                }</div><div class="trend-percentage">${passPercentage}%</div></div>
+                <div class="summary-card status-failed"><h3>Failed</h3><div class="value">${
+                  runSummary.failed
+                }</div><div class="trend-percentage">${failPercentage}%</div></div>
+                <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${
+                  runSummary.skipped || 0
+                }</div><div class="trend-percentage">${skipPercentage}%</div></div>
                 <div class="summary-card"><h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</div></div>
                 <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
-      runSummary.duration
-    )}</div></div>
+                  runSummary.duration
+                )}</div></div>
             </div>
             <div class="dashboard-bottom-row">
-              <div style="display: grid; gap: 20px">
+              <div style="display: flex; flex-direction: column; gap: 28px;">
                 ${generatePieChart(
-      [
-        { label: "Passed", value: runSummary.passed },
-        { label: "Failed", value: runSummary.failed },
-        { label: "Skipped", value: runSummary.skipped || 0 },
-      ],
-      400,
-      390
-    )} 
-                ${runSummary.environment &&
-      Object.keys(runSummary.environment).length > 0
-      ? generateEnvironmentDashboard(runSummary.environment)
-      : '<div class="no-data">Environment data not available.</div>'
-    }
+                  [
+                    { label: "Passed", value: runSummary.passed },
+                    { label: "Failed", value: runSummary.failed },
+                    { label: "Skipped", value: runSummary.skipped || 0 },
+                  ],
+                  400,
+                  390
+                )} 
+                ${
+                  runSummary.environment &&
+                  Object.keys(runSummary.environment).length > 0
+                    ? generateEnvironmentDashboard(runSummary.environment)
+                    : '<div class="no-data">Environment data not available.</div>'
+                }
               </div> 
+              
+              <div style="display: flex; flex-direction: column; gap: 28px;">
                 ${generateSuitesWidget(suitesData)}
+                ${generateSeverityDistributionChart(results)}
+              </div>
             </div>
-        </div>
+          </div>
         <div id="test-runs" class="tab-content">
             <div class="filters">
                 <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
                 <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="skipped">Skipped</option></select>
                 <select id="filter-browser"><option value="">All Browsers</option>${Array.from(
-      new Set(
-        (results || []).map((test) => test.browser || "unknown")
-      )
-    )
-      .map(
-        (browser) =>
-          `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
-            browser
-          )}</option>`
-      )
-      .join("")}</select>
+                  new Set(
+                    (results || []).map((test) => test.browser || "unknown")
+                  )
+                )
+                  .map(
+                    (browser) =>
+                      `<option value="${sanitizeHTML(browser)}">${sanitizeHTML(
+                        browser
+                      )}</option>`
+                  )
+                  .join("")}</select>
                 <button id="expand-all-tests">Expand All</button> <button id="collapse-all-tests">Collapse All</button> <button id="clear-run-summary-filters" class="clear-filters-btn">Clear Filters</button>
             </div>
             <div class="test-cases-list">${generateTestCasesHTML()}</div>
@@ -2415,16 +2987,28 @@ function generateHTML(reportData, trendData = null) {
           <h2 class="tab-main-title">Execution Trends</h2>
           <div class="trend-charts-row">
             <div class="trend-chart"><h3 class="chart-title-header">Test Volume & Outcome Trends</h3>
-              ${trendData && trendData.overall && trendData.overall.length > 0
-      ? generateTestTrendsChart(trendData)
-      : '<div class="no-data">Overall trend data not available for test counts.</div>'
-    }
+              ${
+                trendData && trendData.overall && trendData.overall.length > 0
+                  ? generateTestTrendsChart(trendData)
+                  : '<div class="no-data">Overall trend data not available for test counts.</div>'
+              }
             </div>
             <div class="trend-chart"><h3 class="chart-title-header">Execution Duration Trends</h3>
-              ${trendData && trendData.overall && trendData.overall.length > 0
-      ? generateDurationTrendChart(trendData)
-      : '<div class="no-data">Overall trend data not available for durations.</div>'
-    }
+              ${
+                trendData && trendData.overall && trendData.overall.length > 0
+                  ? generateDurationTrendChart(trendData)
+                  : '<div class="no-data">Overall trend data not available for durations.</div>'
+              }
+            </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>
@@ -2434,12 +3018,13 @@ function generateHTML(reportData, trendData = null) {
              </div>
           </div>
           <h2 class="tab-main-title">Individual Test History</h2>
-          ${trendData &&
-      trendData.testRuns &&
-      Object.keys(trendData.testRuns).length > 0
-      ? generateTestHistoryContent(trendData)
-      : '<div class="no-data">Individual test history data not available.</div>'
-    }
+          ${
+            trendData &&
+            trendData.testRuns &&
+            Object.keys(trendData.testRuns).length > 0
+              ? generateTestHistoryContent(trendData)
+              : '<div class="no-data">Individual test history data not available.</div>'
+          }
         </div>
         <div id="ai-failure-analyzer" class="tab-content">
             ${generateAIFailureAnalyzerTab(results)}
@@ -2582,6 +3167,81 @@ function getAIFix(button) {
 }
 
 
+    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';
@@ -2702,6 +3362,19 @@ function getAIFix(button) {
         }
         if (expandAllBtn) expandAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('block', 'true'));
         if (collapseAllBtn) collapseAllBtn.addEventListener('click', () => setAllTestRunDetailsVisibility('none', 'false'));
+        // --- Annotation Link Handler ---
+        document.querySelectorAll('a.annotation-link').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const annotationId = link.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');
+                    }
+                }
+            });
+        });
         // --- Intersection Observer for Lazy Loading ---
         const lazyLoadElements = document.querySelectorAll('.lazy-load-chart');
         if ('IntersectionObserver' in window) {
@@ -2817,10 +3490,10 @@ function copyErrorToClipboard(button) {
 </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",
     });
 
@@ -2845,13 +3518,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);
 
@@ -2861,10 +3543,18 @@ 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 {
+    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.")
     );
@@ -3031,4 +3721,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});