@arghajit/dummy 0.3.10 → 0.3.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://playwright-pulse-report.netlify.app/",
   "keywords": [

package/scripts/generate-email-report.mjs

@@ -225,15 +225,15 @@ function generateMinifiedHTML(reportData) {
             case "Minor":
               return "#006064";
             case "Low":
-              return "#E65100";
-            case "Medium":
               return "#FFA07A";
+            case "Medium":
+              return "#577A11";
             case "High":
               return "#B71C1C";
             case "Critical":
-              return "#3E0000";
+              return "#64158A";
             default:
-              return "#FFA07A";
+              return "#577A11";
           }
         };
         // We use inline styles here to ensure they render correctly in emails
@@ -286,7 +286,7 @@ function generateMinifiedHTML(reportData) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
     <link rel="apple-touch-icon" href="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png">
-    <title>Playwright Pulse Summary Report</title>
+    <title>Pulse Summary Report</title>
     <style>
         :root {
             --primary-color: #2c3e50; /* Dark Blue/Grey */
@@ -527,7 +527,7 @@ function generateMinifiedHTML(reportData) {
         <header class="report-header">
             <div class="report-header-title">
                 <img id="report-logo" src="https://ocpaxmghzmfbuhxzxzae.supabase.co/storage/v1/object/public/images/pulse-report/playwright_pulse_icon.png" alt="Report Logo">
-                <h1>Playwright Pulse Summary</h1>
+                <h1>Pulse Summary Report</h1>
             </div>
             <div class="run-info">
                 <strong>Run Date:</strong> ${formatDate(
@@ -569,10 +569,10 @@ function generateMinifiedHTML(reportData) {
                     <span style="margin-left: 4px; font-weight: 600; color: var(--text-color);">Severity:</span>
                     
                     <span style="background-color: #006064; color: #fff; padding: 2px 6px; border-radius: 3px;">Minor</span>
-                    <span style="background-color: #E65100; color: #fff; padding: 2px 6px; border-radius: 3px;">Low</span>
-                    <span style="background-color: #FFA07A; color: #fff; padding: 2px 6px; border-radius: 3px;">Medium</span>
+                    <span style="background-color: #FFA07A; color: #fff; padding: 2px 6px; border-radius: 3px;">Low</span>
+                    <span style="background-color: #577A11; color: #fff; padding: 2px 6px; border-radius: 3px;">Medium</span>
                     <span style="background-color: #B71C1C; color: #fff; padding: 2px 6px; border-radius: 3px;">High</span>
-                    <span style="background-color: #3E0000; color: #fff; padding: 2px 6px; border-radius: 3px;">Critical</span>
+                    <span style="background-color: #64158A; color: #fff; padding: 2px 6px; border-radius: 3px;">Critical</span>
                     
                     <span style="border-left: 1px solid #ccc; height: 14px; margin: 0 4px;"></span>
                     

package/scripts/generate-report.mjs

@@ -702,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>
@@ -744,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;
@@ -753,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 {
@@ -810,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 {
@@ -827,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 {
@@ -1012,7 +1034,7 @@ function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
           </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>
@@ -1466,11 +1488,14 @@ 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
@@ -1479,44 +1504,49 @@ function generateSuitesWidget(suitesData) {
     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>`;
 }
@@ -1875,6 +1905,140 @@ function generateDescribeDurationChart(results) {
     </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.
@@ -1923,15 +2087,17 @@ function generateHTML(reportData, trendData = null) {
         const getSeverityColor = (level) => {
           switch (level) {
             case "Minor":
-              return "#006064"; // contrast ~7.35:1 vs white
+              return "#006064";
             case "Low":
-              return "#E65100"; // contrast ~4.9:1 vs white
+              return "#FFA07A";
+            case "Medium":
+              return "#577A11";
             case "High":
-              return "#B71C1C"; // contrast ~6.57:1 vs white
+              return "#B71C1C";
             case "Critical":
-              return "#3E0000"; // contrast ~17.4:1 vs white
+              return "#64158A";
             default:
-              return "#BF360C"; // Medium, contrast ~5.6:1 vs white
+              return "#577A11";
           }
         };
         const severityColor = getSeverityColor(severity);
@@ -2307,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;
@@ -2351,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; }
@@ -2738,8 +2904,8 @@ 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
@@ -2773,7 +2939,7 @@ function generateHTML(reportData, trendData = null) {
                 )}</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 },
@@ -2790,9 +2956,13 @@ function generateHTML(reportData, trendData = null) {
                     : '<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;">

package/scripts/generate-static-report.mjs

@@ -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>
@@ -2012,6 +2031,140 @@ function generateDescribeDurationChart(results) {
     </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 report.
  * @param {object} reportData - The data for the report.
@@ -2059,15 +2212,17 @@ function generateHTML(reportData, trendData = null) {
         const getSeverityColor = (level) => {
           switch (level) {
             case "Minor":
-              return "#006064"; // contrast ~7.35:1 vs white
+              return "#006064";
             case "Low":
-              return "#E65100"; // contrast ~4.9:1 vs white
+              return "#FFA07A";
+            case "Medium":
+              return "#577A11";
             case "High":
-              return "#B71C1C"; // contrast ~6.57:1 vs white
+              return "#B71C1C";
             case "Critical":
-              return "#3E0000"; // contrast ~17.4:1 vs white
+              return "#64158A";
             default:
-              return "#BF360C"; // Medium, contrast ~5.6:1 vs white
+              return "#577A11";
           }
         };
         const severityColor = getSeverityColor(severity);
@@ -2476,10 +2631,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 {
@@ -2521,7 +2676,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; }
@@ -2725,8 +2880,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
@@ -2777,7 +2932,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">
@@ -3658,4 +3816,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});