@arghajit/dummy 0.1.0-beta-14 → 0.1.0-beta-15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.1.0-beta-14",
+  "version": "0.1.0-beta-15",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "keywords": [
     "playwright",
@@ -67,7 +67,6 @@
     "@types/node": "^20",
     "@types/ua-parser-js": "^0.7.39",
     "eslint": "9.25.1",
-    "pretty-ansi": "^3.0.0",
     "typescript": "^5"
   },
   "engines": {

package/scripts/generate-email-report.mjs

@@ -177,9 +177,11 @@ function generateMinifiedHTML(reportData) {
   };
 
   const testsByBrowser = new Map();
+  const allBrowsers = new Set();
   if (results && results.length > 0) {
     results.forEach((test) => {
       const browser = test.browser || "unknown";
+      allBrowsers.add(browser);
       if (!testsByBrowser.has(browser)) {
         testsByBrowser.set(browser, []);
       }
@@ -195,7 +197,9 @@ function generateMinifiedHTML(reportData) {
     let html = "";
     testsByBrowser.forEach((tests, browser) => {
       html += `
-        <div class="browser-section">
+        <div class="browser-section" data-browser-group="${sanitizeHTML(
+          browser.toLowerCase()
+        )}">
           <h2 class="browser-title">${sanitizeHTML(capitalize(browser))}</h2>
           <ul class="test-list">
       `;
@@ -204,7 +208,12 @@ function generateMinifiedHTML(reportData) {
         const testTitle =
           testFileParts[testFileParts.length - 1] || "Unnamed Test";
         html += `
-            <li class="test-item ${getStatusClass(test.status)}">
+            <li class="test-item ${getStatusClass(test.status)}" 
+                data-test-name-min="${sanitizeHTML(testTitle.toLowerCase())}" 
+                data-status-min="${sanitizeHTML(
+                  String(test.status).toLowerCase()
+                )}"
+                data-browser-min="${sanitizeHTML(browser.toLowerCase())}">
               <span class="test-status-icon">${getStatusIcon(
                 test.status
               )}</span>
@@ -343,6 +352,43 @@ function generateMinifiedHTML(reportData) {
             padding-bottom: 10px;
             border-bottom: 2px solid var(--secondary-color);
         }
+        
+        /* Filters Section */
+        .filters-section {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 20px;
+            padding: 15px;
+            background-color: var(--light-gray-color);
+            border-radius: var(--border-radius);
+            border: 1px solid var(--border-color);
+        }
+        .filters-section input[type="text"],
+        .filters-section select {
+            padding: 8px 12px;
+            border: 1px solid var(--medium-gray-color);
+            border-radius: 4px;
+            font-size: 0.95em;
+            flex-grow: 1;
+        }
+        .filters-section select {
+            min-width: 150px;
+        }
+        .filters-section button {
+            padding: 8px 15px;
+            font-size: 0.95em;
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+        .filters-section button:hover {
+            background-color: var(--primary-color);
+        }
+
         .browser-section {
             margin-bottom: 25px;
         }
@@ -365,7 +411,7 @@ function generateMinifiedHTML(reportData) {
             border: 1px solid var(--border-color);
             border-radius: var(--border-radius);
             background-color: #fff;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, display 0.3s ease-out;
         }
         .test-item:hover {
             background-color: var(--light-gray-color);
@@ -424,10 +470,11 @@ function generateMinifiedHTML(reportData) {
             .report-header { flex-direction: column; align-items: flex-start; gap: 10px; }
             .report-header h1 { font-size: 1.5em; }
             .run-info { text-align: left; }
-            .summary-stats { grid-template-columns: 1fr 1fr; } /* Two cards per row on smaller screens */
+            .summary-stats { grid-template-columns: 1fr 1fr; }
+            .filters-section { flex-direction: column; }
         }
         @media (max-width: 480px) {
-            .summary-stats { grid-template-columns: 1fr; } /* One card per row on very small screens */
+            .summary-stats { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -471,6 +518,30 @@ function generateMinifiedHTML(reportData) {
 
         <section class="test-results-section">
             <h1 class="section-title">Test Case Summary</h1>
+            
+            <div class="filters-section">
+                <input type="text" id="filter-min-name" placeholder="Search by test name...">
+                <select id="filter-min-status">
+                    <option value="">All Statuses</option>
+                    <option value="passed">Passed</option>
+                    <option value="failed">Failed</option>
+                    <option value="skipped">Skipped</option>
+                    <option value="unknown">Unknown</option>
+                </select>
+                <select id="filter-min-browser">
+                    <option value="">All Browsers</option>
+                    ${Array.from(allBrowsers)
+                      .map(
+                        (browser) =>
+                          `<option value="${sanitizeHTML(
+                            browser.toLowerCase()
+                          )}">${sanitizeHTML(capitalize(browser))}</option>`
+                      )
+                      .join("")}
+                </select>
+                <button id="clear-min-filters">Clear Filters</button>
+            </div>
+
             ${generateTestListHTML()}
         </section>
         
@@ -485,16 +556,83 @@ function generateMinifiedHTML(reportData) {
         </footer>
     </div>
     <script>
-        // Global helper functions needed by the template (if any complex ones were used)
-        // For this minified version, formatDuration and formatDate are primarily used during HTML generation server-side.
-        // No client-side interactivity scripts are needed for this simple report.
+        document.addEventListener('DOMContentLoaded', function() {
+            const nameFilterMin = document.getElementById('filter-min-name');
+            const statusFilterMin = document.getElementById('filter-min-status');
+            const browserFilterMin = document.getElementById('filter-min-browser');
+            const clearMinFiltersBtn = document.getElementById('clear-min-filters');
+            const testItemsMin = document.querySelectorAll('.test-results-section .test-item');
+            const browserSections = document.querySelectorAll('.test-results-section .browser-section');
+
+            function filterMinifiedTests() {
+                const nameValue = nameFilterMin.value.toLowerCase();
+                const statusValue = statusFilterMin.value;
+                const browserValue = browserFilterMin.value;
+                let anyBrowserSectionVisible = false;
+
+                browserSections.forEach(section => {
+                    let sectionHasVisibleTests = false;
+                    const testsInThisSection = section.querySelectorAll('.test-item');
+                    
+                    testsInThisSection.forEach(testItem => {
+                        const testName = testItem.getAttribute('data-test-name-min');
+                        const testStatus = testItem.getAttribute('data-status-min');
+                        const testBrowser = testItem.getAttribute('data-browser-min');
+
+                        const nameMatch = testName.includes(nameValue);
+                        const statusMatch = !statusValue || testStatus === statusValue;
+                        const browserMatch = !browserValue || testBrowser === browserValue;
+
+                        if (nameMatch && statusMatch && browserMatch) {
+                            testItem.style.display = 'flex';
+                            sectionHasVisibleTests = true;
+                            anyBrowserSectionVisible = true;
+                        } else {
+                            testItem.style.display = 'none';
+                        }
+                    });
+                    // Hide browser section if no tests match OR if a specific browser is selected and it's not this one
+                     if (!sectionHasVisibleTests || (browserValue && section.getAttribute('data-browser-group') !== browserValue)) {
+                        section.style.display = 'none';
+                    } else {
+                        section.style.display = '';
+                    }
+                });
+                
+                // Show "no tests" message if all sections are hidden
+                const noTestsMessage = document.querySelector('.test-results-section .no-tests');
+                if (noTestsMessage) {
+                    noTestsMessage.style.display = anyBrowserSectionVisible ? 'none' : 'block';
+                }
+
+            }
+
+            if (nameFilterMin) nameFilterMin.addEventListener('input', filterMinifiedTests);
+            if (statusFilterMin) statusFilterMin.addEventListener('change', filterMinifiedTests);
+            if (browserFilterMin) browserFilterMin.addEventListener('change', filterMinifiedTests);
+            
+            if (clearMinFiltersBtn) {
+                clearMinFiltersBtn.addEventListener('click', () => {
+                    nameFilterMin.value = '';
+                    statusFilterMin.value = '';
+                    browserFilterMin.value = '';
+                    filterMinifiedTests();
+                });
+            }
+            // Initial filter call in case of pre-filled values (though unlikely here)
+             if (testItemsMin.length > 0) { // Only filter if there are items
+                filterMinifiedTests();
+            }
+        });
+
+        // Fallback helper functions (though ideally not needed client-side for this minified report)
         if (typeof formatDuration === 'undefined') {
-             function formatDuration(ms) { // Fallback, though should be pre-rendered
+             function formatDuration(ms) { 
                 if (ms === undefined || ms === null || ms < 0) return "0.0s";
                 return (ms / 1000).toFixed(1) + "s";
             }
         }
-         if (typeof formatDate === 'undefined') { // Fallback
+         if (typeof formatDate === 'undefined') {
             function formatDate(dateStrOrDate) {
                 if (!dateStrOrDate) return "N/A";
                 try {

package/scripts/generate-static-report.mjs

@@ -5,7 +5,6 @@ import { readFileSync, existsSync as fsExistsSync } from "fs"; // ADD THIS LINE
 import path from "path";
 import { fork } from "child_process"; // Add this
 import { fileURLToPath } from "url"; // Add this for resolving path in ESM
-import prettyAnsi from "pretty-ansi";
 
 // Use dynamic import for chalk as it's ESM only
 let chalk;
@@ -27,6 +26,129 @@ const DEFAULT_OUTPUT_DIR = "pulse-report";
 const DEFAULT_JSON_FILE = "playwright-pulse-report.json";
 const DEFAULT_HTML_FILE = "playwright-pulse-static-report.html";
 // Helper functions
+export function ansiToHtml(text) {
+  if (!text) {
+    return "";
+  }
+
+  const codes = {
+    0: "color:inherit;font-weight:normal;font-style:normal;text-decoration:none;opacity:1;background-color:inherit;",
+    1: "font-weight:bold",
+    2: "opacity:0.6",
+    3: "font-style:italic",
+    4: "text-decoration:underline",
+    30: "color:#000", // black
+    31: "color:#d00", // red
+    32: "color:#0a0", // green
+    33: "color:#aa0", // yellow
+    34: "color:#00d", // blue
+    35: "color:#a0a", // magenta
+    36: "color:#0aa", // cyan
+    37: "color:#aaa", // light grey
+    39: "color:inherit", // default foreground color
+    40: "background-color:#000", // black background
+    41: "background-color:#d00", // red background
+    42: "background-color:#0a0", // green background
+    43: "background-color:#aa0", // yellow background
+    44: "background-color:#00d", // blue background
+    45: "background-color:#a0a", // magenta background
+    46: "background-color:#0aa", // cyan background
+    47: "background-color:#aaa", // light grey background
+    49: "background-color:inherit", // default background color
+    90: "color:#555", // dark grey
+    91: "color:#f55", // light red
+    92: "color:#5f5", // light green
+    93: "color:#ff5", // light yellow
+    94: "color:#55f", // light blue
+    95: "color:#f5f", // light magenta
+    96: "color:#5ff", // light cyan
+    97: "color:#fff", // white
+  };
+
+  let currentStylesArray = [];
+  let html = "";
+  let openSpan = false;
+
+  const applyStyles = () => {
+    if (openSpan) {
+      html += "</span>";
+      openSpan = false;
+    }
+    if (currentStylesArray.length > 0) {
+      const styleString = currentStylesArray.filter((s) => s).join(";");
+      if (styleString) {
+        html += `<span style="${styleString}">`;
+        openSpan = true;
+      }
+    }
+  };
+
+  const resetAndApplyNewCodes = (newCodesStr) => {
+    const newCodes = newCodesStr.split(";");
+
+    if (newCodes.includes("0")) {
+      currentStylesArray = [];
+      if (codes["0"]) currentStylesArray.push(codes["0"]);
+    }
+
+    for (const code of newCodes) {
+      if (code === "0") continue;
+
+      if (codes[code]) {
+        if (code === "39") {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith("color:")
+          );
+          currentStylesArray.push("color:inherit");
+        } else if (code === "49") {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith("background-color:")
+          );
+          currentStylesArray.push("background-color:inherit");
+        } else {
+          currentStylesArray.push(codes[code]);
+        }
+      } else if (code.startsWith("38;2;") || code.startsWith("48;2;")) {
+        const parts = code.split(";");
+        const type = parts[0] === "38" ? "color" : "background-color";
+        if (parts.length === 5) {
+          currentStylesArray = currentStylesArray.filter(
+            (s) => !s.startsWith(type + ":")
+          );
+          currentStylesArray.push(
+            `${type}:rgb(${parts[2]},${parts[3]},${parts[4]})`
+          );
+        }
+      }
+    }
+    applyStyles();
+  };
+
+  const segments = text.split(/(\x1b\[[0-9;]*m)/g);
+
+  for (const segment of segments) {
+    if (!segment) continue;
+
+    if (segment.startsWith("\x1b[") && segment.endsWith("m")) {
+      const command = segment.slice(2, -1);
+      resetAndApplyNewCodes(command);
+    } else {
+      const escapedContent = segment
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+      html += escapedContent;
+    }
+  }
+
+  if (openSpan) {
+    html += "</span>";
+  }
+
+  return html;
+}
 function sanitizeHTML(str) {
   if (str === null || str === undefined) return "";
   return String(str).replace(/[&<>"']/g, (match) => {
@@ -45,7 +167,7 @@ function capitalize(str) {
   return str[0].toUpperCase() + str.slice(1).toLowerCase();
 }
 function formatPlaywrightError(error) {
-  const commandOutput = prettyAnsi(error || error.message);
+  const commandOutput = ansiToHtml(error || error.message);
   return convertPlaywrightErrorToHTML(commandOutput);
 }
 function convertPlaywrightErrorToHTML(str) {
@@ -585,6 +707,335 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
       </div>
   `;
 }
+function generateEnvironmentDashboard(environment, dashboardHeight = 600) {
+  // Format memory for display
+  const formattedMemory = environment.memory.replace(/(\d+\.\d{2})GB/, "$1 GB");
+
+  // Generate a unique ID for the dashboard
+  const dashboardId = `envDashboard-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+
+  const cardHeight = Math.floor(dashboardHeight * 0.44);
+  const cardContentPadding = 16; // px
+
+  return `
+    <div class="environment-dashboard-wrapper" id="${dashboardId}">
+      <style>
+        .environment-dashboard-wrapper *,
+        .environment-dashboard-wrapper *::before,
+        .environment-dashboard-wrapper *::after {
+          box-sizing: border-box;
+        }
+
+        .environment-dashboard-wrapper {
+          --primary-color: #007bff;
+          --primary-light-color: #e6f2ff;
+          --secondary-color: #6c757d;
+          --success-color: #28a745;
+          --success-light-color: #eaf6ec;
+          --warning-color: #ffc107;
+          --warning-light-color: #fff9e6;
+          --danger-color: #dc3545;
+          
+          --background-color: #ffffff; 
+          --card-background-color: #ffffff; 
+          --text-color: #212529; 
+          --text-color-secondary: #6c757d; 
+          --border-color: #dee2e6; 
+          --border-light-color: #f1f3f5;
+          --icon-color: #495057;
+          --chip-background: #e9ecef;
+          --chip-text: #495057;
+          --shadow-color: rgba(0, 0, 0, 0.075);
+
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+          background-color: var(--background-color);
+          border-radius: 12px; 
+          box-shadow: 0 6px 12px var(--shadow-color);
+          padding: 24px; 
+          color: var(--text-color);
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: auto 1fr; 
+          gap: 20px; 
+          font-size: 14px; 
+        }
+        
+        .env-dashboard-header {
+          grid-column: 1 / -1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid var(--border-color);
+          padding-bottom: 16px; 
+          margin-bottom: 8px; 
+        }
+        
+        .env-dashboard-title {
+          font-size: 1.5rem; 
+          font-weight: 600;
+          color: var(--text-color); 
+          margin: 0;
+        }
+        
+        .env-dashboard-subtitle {
+          font-size: 0.875rem; 
+          color: var(--text-color-secondary);
+          margin-top: 4px;
+        }
+        
+        .env-card {
+          background-color: var(--card-background-color);
+          border-radius: 8px;
+          padding: ${cardContentPadding}px;
+          box-shadow: 0 3px 6px var(--shadow-color);
+          height: ${cardHeight}px;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden; 
+        }
+        
+        .env-card-header {
+          font-weight: 600;
+          font-size: 1rem; 
+          margin-bottom: 12px;
+          color: var(--text-color);
+          display: flex;
+          align-items: center;
+          padding-bottom: 8px;
+          border-bottom: 1px solid var(--border-light-color);
+        }
+        
+        .env-card-header svg {
+          margin-right: 10px; 
+          width: 18px; 
+          height: 18px;
+          fill: var(--icon-color);
+        }
+
+        .env-card-content {
+          flex-grow: 1; 
+          overflow-y: auto; 
+          padding-right: 5px; 
+        }
+        
+        .env-detail-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center; 
+          padding: 10px 0; 
+          border-bottom: 1px solid var(--border-light-color);
+          font-size: 0.875rem;
+        }
+        
+        .env-detail-row:last-child {
+          border-bottom: none;
+        }
+        
+        .env-detail-label {
+          color: var(--text-color-secondary);
+          font-weight: 500;
+          margin-right: 10px; 
+        }
+        
+        .env-detail-value {
+          color: var(--text-color);
+          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+          text-align: right;
+          word-break: break-all; 
+        }
+        
+        .env-chip {
+          display: inline-block;
+          padding: 4px 10px; 
+          border-radius: 16px; 
+          font-size: 0.75rem; 
+          font-weight: 500;
+          line-height: 1.2;
+          background-color: var(--chip-background);
+          color: var(--chip-text);
+        }
+        
+        .env-chip-primary {
+          background-color: var(--primary-light-color);
+          color: var(--primary-color);
+        }
+        
+        .env-chip-success {
+          background-color: var(--success-light-color);
+          color: var(--success-color);
+        }
+        
+        .env-chip-warning {
+          background-color: var(--warning-light-color);
+          color: var(--warning-color);
+        }
+        
+        .env-cpu-cores {
+          display: flex;
+          align-items: center;
+          gap: 6px; 
+        }
+        
+        .env-core-indicator {
+          width: 12px; 
+          height: 12px;
+          border-radius: 50%;
+          background-color: var(--success-color);
+          border: 1px solid rgba(0,0,0,0.1); 
+        }
+        
+        .env-core-indicator.inactive {
+          background-color: var(--border-light-color);
+          opacity: 0.7; 
+          border-color: var(--border-color);
+        }
+      </style>
+      
+      <div class="env-dashboard-header">
+        <div>
+          <h3 class="env-dashboard-title">System Environment</h3>
+          <p class="env-dashboard-subtitle">Snapshot of the execution environment</p>
+        </div>
+        <span class="env-chip env-chip-primary">${environment.host}</span>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M4 6h16V4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-2v10H4V6zm18-2h-4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2H6a2 2 0 0 0-2 2v2h20V6a2 2 0 0 0-2-2zM8 12h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>
+          Hardware
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">CPU Model</span>
+            <span class="env-detail-value">${environment.cpu.model}</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">CPU Cores</span>
+            <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("")}
+                <span>${environment.cpu.cores || "N/A"} cores</span>
+              </div>
+            </span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Memory</span>
+            <span class="env-detail-value">${formattedMemory}</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-0.01 18c-2.76 0-5.26-1.12-7.07-2.93A7.973 7.973 0 0 1 4 12c0-2.21.9-4.21 2.36-5.64A7.994 7.994 0 0 1 11.99 4c4.41 0 8 3.59 8 8 0 2.76-1.12 5.26-2.93 7.07A7.973 7.973 0 0 1 11.99 20zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
+          Operating System
+        </div>
+        <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"
+                ? "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>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Hostname</span>
+            <span class="env-detail-value" title="${environment.host}">${
+    environment.host
+  }</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
+          Node.js Runtime
+        </div>
+        <div class="env-card-content">
+          <div class="env-detail-row">
+            <span class="env-detail-label">Node Version</span>
+            <span class="env-detail-value">${environment.node}</span>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">V8 Engine</span>
+            <span class="env-detail-value">${environment.v8}</span>
+          </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
+      ? "..." + environment.cwd.slice(-22)
+      : environment.cwd
+  }</span>
+          </div>
+        </div>
+      </div>
+      
+      <div class="env-card">
+        <div class="env-card-header">
+          <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 8.69 9.48 7 12 7c2.76 0 5 2.24 5 5v1h2c1.66 0 3 1.34 3 3s-1.34 3-3 3z"/></svg>
+          System Summary
+        </div>
+        <div class="env-card-content">
+          <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>
+            </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>
+          </div>
+          <div class="env-detail-row">
+            <span class="env-detail-label">Run Context</span>
+            <span class="env-detail-value">CI/Local Test</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
 function generateTestHistoryContent(trendData) {
   if (
     !trendData ||
@@ -1197,7 +1648,7 @@ function generateHTML(reportData, trendData = null) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
     <link rel="apple-touch-icon" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
-    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/highcharts.js" defer></script>
     <title>Playwright Pulse Report</title>
     <style>
         :root { 
@@ -1397,6 +1848,7 @@ function generateHTML(reportData, trendData = null) {
                 )}</div></div>
             </div>
             <div class="dashboard-bottom-row">
+              <div style="display: grid; gap: 20px">
                 ${generatePieChart(
                   [
                     { label: "Passed", value: runSummary.passed },
@@ -1406,6 +1858,13 @@ function generateHTML(reportData, trendData = null) {
                   400,
                   390
                 )} 
+                ${
+                  runSummary.environment &&
+                  Object.keys(runSummary.environment).length > 0
+                    ? generateEnvironmentDashboard(runSummary.environment)
+                    : '<div class="no-data">Environment data not available.</div>'
+                }
+              </div> 
                 ${generateSuitesWidget(suitesData)}
             </div>
         </div>

package/scripts/merge-pulse-report.js

@@ -39,6 +39,7 @@ function mergeReports(files) {
     combinedRun.failed += run.failed || 0;
     combinedRun.skipped += run.skipped || 0;
     combinedRun.duration += run.duration || 0;
+    combinedRun.environment = run.environment;
 
     if (json.results) {
       combinedResults.push(...json.results);