@arghajit/dummy 0.3.9 → 0.3.11

package/dist/pulse.d.ts

@@ -0,0 +1,12 @@
+export type PulseSeverityLevel = "Minor" | "Low" | "Medium" | "High" | "Critical";
+export declare const pulse: {
+    /**
+     * Sets the severity level for the current test.
+     * * @param level - The severity level ('Minor' | 'Low' | 'Medium' | 'High' | 'Critical')
+     * @example
+     * test('Login', async () => {
+     * pulse.severity('Critical');
+     * });
+     */
+    severity: (level: PulseSeverityLevel) => void;
+};

package/dist/pulse.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pulse = void 0;
+const test_1 = require("@playwright/test");
+exports.pulse = {
+    /**
+     * Sets the severity level for the current test.
+     * * @param level - The severity level ('Minor' | 'Low' | 'Medium' | 'High' | 'Critical')
+     * @example
+     * test('Login', async () => {
+     * pulse.severity('Critical');
+     * });
+     */
+    severity: (level) => {
+        const validLevels = ["Minor", "Low", "Medium", "High", "Critical"];
+        // Default to "Medium" if an invalid string is passed
+        const selectedLevel = validLevels.includes(level) ? level : "Medium";
+        // Add the annotation to Playwright's test info
+        test_1.test.info().annotations.push({
+            type: "pulse_severity",
+            description: selectedLevel,
+        });
+    },
+};

package/dist/reporter/index.d.ts

@@ -3,3 +3,5 @@ export default PlaywrightPulseReporter;
 export { PlaywrightPulseReporter };
 export type { PlaywrightPulseReport } from "../lib/report-types";
 export type { TestResult, TestRun, TestStep, TestStatus } from "../types";
+export { pulse } from "../pulse";
+export type { PulseSeverityLevel } from "../pulse";

package/dist/reporter/index.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaywrightPulseReporter = void 0;
+exports.pulse = exports.PlaywrightPulseReporter = void 0;
 // src/reporter/index.ts
 const playwright_pulse_reporter_1 = require("./playwright-pulse-reporter");
 Object.defineProperty(exports, "PlaywrightPulseReporter", { enumerable: true, get: function () { return playwright_pulse_reporter_1.PlaywrightPulseReporter; } });
 // Export the reporter class as the default export for CommonJS compatibility
 // and also as a named export for potential ES module consumers.
 exports.default = playwright_pulse_reporter_1.PlaywrightPulseReporter;
+// --- NEW: Export the pulse helper ---
+// This allows: import { pulse } from '@arghajit/playwright-pulse-report';
+var pulse_1 = require("../pulse"); // Adjust path based on where you placed pulse.ts
+Object.defineProperty(exports, "pulse", { enumerable: true, get: function () { return pulse_1.pulse; } });

package/dist/reporter/playwright-pulse-reporter.d.ts

@@ -16,6 +16,7 @@ export declare class PlaywrightPulseReporter implements Reporter {
     printsToStdio(): boolean;
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase): void;
+    private _getSeverity;
     private getBrowserDetails;
     private processStep;
     onTestEnd(test: TestCase, result: PwTestResult): Promise<void>;

package/dist/reporter/playwright-pulse-reporter.js

@@ -109,6 +109,10 @@ class PlaywrightPulseReporter {
     onTestBegin(test) {
         console.log(`Starting test: ${test.title}`);
     }
+    _getSeverity(annotations) {
+        const severityAnnotation = annotations.find((a) => a.type === "pulse_severity");
+        return (severityAnnotation === null || severityAnnotation === void 0 ? void 0 : severityAnnotation.description) || "Medium";
+    }
     getBrowserDetails(test) {
         var _a, _b, _c, _d;
         const project = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project();
@@ -267,6 +271,7 @@ class PlaywrightPulseReporter {
             snippet: (_l = result.error) === null || _l === void 0 ? void 0 : _l.snippet,
             codeSnippet: codeSnippet,
             tags: test.tags.map((tag) => tag.startsWith("@") ? tag.substring(1) : tag),
+            severity: this._getSeverity(test.annotations),
             screenshots: [],
             videoPath: [],
             tracePath: undefined,

package/dist/types/index.d.ts

@@ -31,6 +31,7 @@ export interface TestResult {
     snippet?: string;
     codeSnippet?: string;
     tags?: string[];
+    severity?: "Minor" | "Low" | "Medium" | "High" | "Critical";
     suiteName?: string;
     runId: string;
     browser: string;

package/package.json

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

package/scripts/generate-email-report.mjs

@@ -217,6 +217,40 @@ function generateMinifiedHTML(reportData) {
         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";
+          }
+        };
+        // We use inline styles here to ensure they render correctly in emails
+        const severityBadge = `<span style="background-color: ${getSeverityColor(
+          severity
+        )}; font-size: 0.8em; font-weight: 600; padding: 3px 8px; border-radius: 4px; color: #fff; margin-left: 10px; white-space: nowrap;">${severity}</span>`;
+
+        // --- NEW: Tags Logic ---
+        const tagsBadges = (test.tags || [])
+          .map(
+            (tag) =>
+              `<span style="background-color: #7f8c8d; font-size: 0.8em; font-weight: 600; padding: 3px 8px; border-radius: 4px; color: #fff; margin-left: 5px; white-space: nowrap;">${sanitizeHTML(
+                tag
+              )}</span>`
+          )
+          .join("");
+
         html += `
             <li class="test-item ${getStatusClass(test.status)}" 
                 data-test-name-min="${sanitizeHTML(testTitle.toLowerCase())}" 
@@ -230,9 +264,9 @@ function generateMinifiedHTML(reportData) {
               <span class="test-title-text" title="${sanitizeHTML(
                 test.name
               )}">${sanitizeHTML(testTitle)}</span>
-              <span class="test-status-label">${String(
-                test.status
-              ).toUpperCase()}</span>
+              
+              ${severityBadge}
+              ${tagsBadges}
             </li>
         `;
       });
@@ -250,9 +284,9 @@ function generateMinifiedHTML(reportData) {
 <head>
     <meta http-equiv="Content-Type" content="text/html; 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">
-    <title>Playwright Pulse Summary Report</title>
+    <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>Pulse Summary Report</title>
     <style>
         :root {
             --primary-color: #2c3e50; /* Dark Blue/Grey */
@@ -492,8 +526,8 @@ function generateMinifiedHTML(reportData) {
     <div class="container">
         <header class="report-header">
             <div class="report-header-title">
-                <img id="report-logo" src="https://i.postimg.cc/v817w4sg/logo.png" alt="Report Logo">
-                <h1>Playwright Pulse Summary</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 Summary Report</h1>
             </div>
             <div class="run-info">
                 <strong>Run Date:</strong> ${formatDate(
@@ -527,8 +561,24 @@ function generateMinifiedHTML(reportData) {
         </section>
 
         <section class="test-results-section">
-            <h1 class="section-title">Test Case Summary</h1>
-            
+            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 30px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--secondary-color);">
+                <h1 style="margin: 0; font-size: 1.5em; color: var(--primary-color);">Test Case Summary</h1>
+                <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.75em;">
+                    <span style="font-weight: 600; color: var(--dark-gray-color);">Legend:</span>
+                    
+                    <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: #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: #64158A; color: #fff; padding: 2px 6px; border-radius: 3px;">Critical</span>
+                    
+                    <span style="border-left: 1px solid #ccc; height: 14px; margin: 0 4px;"></span>
+                    
+                    <span style="background-color: #7f8c8d; color: #fff; padding: 2px 6px; border-radius: 3px;">Tags</span>
+                </div>
+            </div>
             <div class="filters-section">
                 <input type="text" id="filter-min-name" placeholder="Search by test name...">
                 <select id="filter-min-status">

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>`;
 }
@@ -1748,7 +1778,7 @@ function generateSpecDurationChart(results) {
  */
 function generateDescribeDurationChart(results) {
   if (!results || results.length === 0)
-    return '<div class="no-data">No results available.</div>';
+    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;
@@ -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 = '<b>' + this.x + '</b><br/>';
+                                    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.
@@ -1918,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>";
@@ -2011,6 +2197,7 @@ function generateHTML(reportData, trendData = null) {
             <span class="test-case-browser">(${sanitizeHTML(browser)})</span>
           </div>
           <div class="test-case-meta">
+            ${severityBadge}
             ${
               test.tags && test.tags.length > 0
                 ? test.tags
@@ -2286,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;
@@ -2330,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; }
@@ -2433,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; }
@@ -2716,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
@@ -2751,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 },
@@ -2768,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>
@@ -1885,7 +1904,7 @@ function generateSpecDurationChart(results) {
  */
 function generateDescribeDurationChart(results) {
   if (!results || results.length === 0)
-    return '<div class="no-data">No results available.</div>';
+    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;
@@ -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 = '<b>' + this.x + '</b><br/>';
+                                    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.
@@ -2054,6 +2207,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>";
@@ -2163,13 +2338,16 @@ function generateHTML(reportData, trendData = null) {
           testTitle
         )}</span><span class="test-case-browser">(${sanitizeHTML(
           browser
-        )})</span></div><div class="test-case-meta">${
+        )})</span></div><div class="test-case-meta">
+        ${severityBadge}
+        ${
           test.tags && test.tags.length > 0
             ? test.tags
                 .map((t) => `<span class="tag">${sanitizeHTML(t)}</span>`)
                 .join(" ")
             : ""
-        }<span class="test-duration">${formatDuration(
+        }
+        <span class="test-duration">${formatDuration(
           test.duration
         )}</span></div></div>
                     <div class="test-case-content" style="display: none;">
@@ -2453,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 {
@@ -2498,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; }
@@ -2620,6 +2798,7 @@ aspect-ratio: 16 / 9;
 .status-badge-small.status-failed { background-color: var(--danger-color); }
 .status-badge-small.status-skipped { background-color: var(--warning-color); }
 .status-badge-small.status-unknown { background-color: var(--dark-gray-color); }
+.badge-severity { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; color: white; text-transform: uppercase; margin-right: 8px; vertical-align: middle; }
 .no-data, .no-tests, .no-steps, .no-data-chart { padding: 28px; text-align: center; color: var(--dark-gray-color); font-style: italic; font-size:1.1em; background-color: var(--light-gray-color); border-radius: var(--border-radius); margin: 18px 0; border: 1px dashed var(--medium-gray-color); }
 .no-data-chart {font-size: 0.95em; padding: 18px;}
 .ai-failure-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 22px; }
@@ -2701,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
@@ -2753,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">
@@ -3634,4 +3816,4 @@ main().catch((err) => {
   );
   console.error(err.stack);
   process.exit(1);
-});
+});