@arghajit/dummy 0.1.0-beta-24 → 0.1.0-beta-26

package/scripts/generate-static-report.mjs

@@ -141,7 +141,6 @@ export function ansiToHtml(text) {
   }
   return html;
 }
-
 function sanitizeHTML(str) {
   if (str === null || str === undefined) return "";
   return String(str).replace(
@@ -150,7 +149,6 @@ function sanitizeHTML(str) {
       ({ "&": "&", "<": "<", ">": ">", '"': '"', "'": "'" }[match] || match)
   );
 }
-
 function capitalize(str) {
   if (!str) return "";
   return str[0].toUpperCase() + str.slice(1).toLowerCase();
@@ -1216,6 +1214,19 @@ function getSuitesData(results) {
   });
   return Array.from(suitesMap.values());
 }
+function getAttachmentIcon(contentType) {
+  if (!contentType) return "📎"; // Handle undefined/null
+
+  const normalizedType = contentType.toLowerCase();
+
+  if (normalizedType.includes("pdf")) return "📄";
+  if (normalizedType.includes("json")) return "{ }";
+  if (/html/.test(normalizedType)) return "🌐"; // Fixed: regex for any HTML type
+  if (normalizedType.includes("xml")) return "<>";
+  if (normalizedType.includes("csv")) return "📊";
+  if (normalizedType.startsWith("text/")) return "📝";
+  return "📎";
+}
 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>`;
@@ -1272,6 +1283,260 @@ function generateSuitesWidget(suitesData) {
   </div>
 </div>`;
 }
+function generateWorkerDistributionChart(results) {
+  if (!results || results.length === 0) {
+    return '<div class="no-data">No test results data available to display worker distribution.</div>';
+  }
+
+  // 1. Sort results by startTime to ensure chronological order
+  const sortedResults = [...results].sort((a, b) => {
+    const timeA = a.startTime ? new Date(a.startTime).getTime() : 0;
+    const timeB = b.startTime ? new Date(b.startTime).getTime() : 0;
+    return timeA - timeB;
+  });
+
+  const workerData = sortedResults.reduce((acc, test) => {
+    const workerId =
+      typeof test.workerId !== "undefined" ? test.workerId : "N/A";
+    if (!acc[workerId]) {
+      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
+    }
+
+    const status = String(test.status).toLowerCase();
+    if (status === "passed" || status === "failed" || status === "skipped") {
+      acc[workerId][status]++;
+    }
+
+    const testTitleParts = test.name.split(" > ");
+    const testTitle =
+      testTitleParts[testTitleParts.length - 1] || "Unnamed Test";
+    // Store both name and status for each test
+    acc[workerId].tests.push({ name: testTitle, status: status });
+
+    return acc;
+  }, {});
+
+  const workerIds = Object.keys(workerData).sort((a, b) => {
+    if (a === "N/A") return 1;
+    if (b === "N/A") return -1;
+    return parseInt(a, 10) - parseInt(b, 10);
+  });
+
+  if (workerIds.length === 0) {
+    return '<div class="no-data">Could not determine worker distribution from test data.</div>';
+  }
+
+  const chartId = `workerDistChart-${Date.now()}-${Math.random()
+    .toString(36)
+    .substring(2, 7)}`;
+  const renderFunctionName = `renderWorkerDistChart_${chartId.replace(
+    /-/g,
+    "_"
+  )}`;
+  const modalJsNamespace = `modal_funcs_${chartId.replace(/-/g, "_")}`;
+
+  // The categories now just need the name for the axis labels
+  const categories = workerIds.map((id) => `Worker ${id}`);
+
+  // We pass the full data separately to the script
+  const fullWorkerData = workerIds.map((id) => ({
+    id: id,
+    name: `Worker ${id}`,
+    tests: workerData[id].tests,
+  }));
+
+  const passedData = workerIds.map((id) => workerData[id].passed);
+  const failedData = workerIds.map((id) => workerData[id].failed);
+  const skippedData = workerIds.map((id) => workerData[id].skipped);
+
+  const categoriesString = JSON.stringify(categories);
+  const fullDataString = JSON.stringify(fullWorkerData);
+  const seriesString = JSON.stringify([
+    { name: "Passed", data: passedData, color: "var(--success-color)" },
+    { name: "Failed", data: failedData, color: "var(--danger-color)" },
+    { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
+  ]);
+
+  // The HTML now includes the chart container, the modal, and styles for the modal
+  return `
+    <style>
+      .worker-modal-overlay {
+        position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
+        overflow: auto; background-color: rgba(0,0,0,0.6);
+        display: none; align-items: center; justify-content: center;
+      }
+      .worker-modal-content {
+        background-color: #3d4043;
+        color: var(--card-background-color);
+        margin: auto; padding: 20px; border: 1px solid var(--border-color, #888);
+        width: 80%; max-width: 700px; border-radius: 8px;
+        position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+      }
+      .worker-modal-close {
+        position: absolute; top: 10px; right: 20px;
+        font-size: 28px; font-weight: bold; cursor: pointer;
+        line-height: 1;
+      }
+      .worker-modal-close:hover, .worker-modal-close:focus {
+        color: var(--text-color, #000);
+      }
+      #worker-modal-body-${chartId} ul {
+        list-style-type: none; padding-left: 0; margin-top: 15px; max-height: 45vh; overflow-y: auto;
+      }
+       #worker-modal-body-${chartId} li {
+         padding: 8px 5px; border-bottom: 1px solid var(--border-color, #eee);
+         font-size: 0.9em;
+      }
+       #worker-modal-body-${chartId} li:last-child {
+         border-bottom: none;
+      }
+       #worker-modal-body-${chartId} li > span {
+         display: inline-block;
+         width: 70px;
+         font-weight: bold;
+         text-align: right;
+         margin-right: 10px;
+      }
+    </style>
+
+    <div id="${chartId}" class="trend-chart-container lazy-load-chart" data-render-function-name="${renderFunctionName}" style="min-height: 350px;">
+      <div class="no-data">Loading Worker Distribution Chart...</div>
+    </div>
+
+    <div id="worker-modal-${chartId}" class="worker-modal-overlay">
+      <div class="worker-modal-content">
+        <span class="worker-modal-close">×</span>
+        <h3 id="worker-modal-title-${chartId}" style="text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.25em; font-weight: 600; color: #fff"></h3>
+        <div id="worker-modal-body-${chartId}"></div>
+      </div>
+    </div>
+
+    <script>
+      // Namespace for modal functions to avoid global scope pollution
+      window.${modalJsNamespace} = {};
+
+      window.${renderFunctionName} = function() {
+        const chartContainer = document.getElementById('${chartId}');
+        if (!chartContainer) { console.error("Chart container ${chartId} not found."); return; }
+
+        // --- Modal Setup ---
+        const modal = document.getElementById('worker-modal-${chartId}');
+        const modalTitle = document.getElementById('worker-modal-title-${chartId}');
+        const modalBody = document.getElementById('worker-modal-body-${chartId}');
+        const closeModalBtn = modal.querySelector('.worker-modal-close');
+
+        window.${modalJsNamespace}.open = function(worker) {
+          if (!worker) return;
+          modalTitle.textContent = 'Test Details for ' + worker.name;
+
+          let testListHtml = '<ul>';
+          if (worker.tests && worker.tests.length > 0) {
+            worker.tests.forEach(test => {
+                let color = 'inherit';
+                if (test.status === 'passed') color = 'var(--success-color)';
+                else if (test.status === 'failed') color = 'var(--danger-color)';
+                else if (test.status === 'skipped') color = 'var(--warning-color)';
+
+                const escapedName = test.name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+                testListHtml += \`<li style="color: \${color};"><span style="color: \${color}">[\${test.status.toUpperCase()}]</span> \${escapedName}</li>\`;
+            });
+          } else {
+            testListHtml += '<li>No detailed test data available for this worker.</li>';
+          }
+          testListHtml += '</ul>';
+
+          modalBody.innerHTML = testListHtml;
+          modal.style.display = 'flex';
+        };
+
+        const closeModal = function() {
+          modal.style.display = 'none';
+        };
+
+        closeModalBtn.onclick = closeModal;
+        modal.onclick = function(event) {
+          // Close if clicked on the dark overlay background
+          if (event.target == modal) {
+            closeModal();
+          }
+        };
+
+
+        // --- Highcharts Setup ---
+        if (typeof Highcharts !== 'undefined') {
+          try {
+            chartContainer.innerHTML = '';
+            const fullData = ${fullDataString};
+
+            const chartOptions = {
+              chart: { type: 'bar', height: 350, backgroundColor: 'transparent' },
+              title: { text: null },
+              xAxis: {
+                categories: ${categoriesString},
+                title: { text: 'Worker ID' },
+                labels: { style: { color: 'var(--text-color-secondary)' }}
+              },
+              yAxis: {
+                min: 0,
+                title: { text: 'Number of Tests' },
+                labels: { style: { color: 'var(--text-color-secondary)' }},
+                stackLabels: { enabled: true, style: { fontWeight: 'bold', color: 'var(--text-color)' } }
+              },
+              legend: { reversed: true, itemStyle: { fontSize: "12px", color: 'var(--text-color)' } },
+              plotOptions: {
+                series: {
+                  stacking: 'normal',
+                  cursor: 'pointer',
+                  point: {
+                    events: {
+                      click: function () {
+                        // 'this.x' is the index of the category
+                        const workerData = fullData[this.x];
+                        window.${modalJsNamespace}.open(workerData);
+                      }
+                    }
+                  }
+                }
+              },
+              tooltip: {
+                shared: true,
+                headerFormat: '<b>{point.key}</b> (Click for details)<br/>',
+                pointFormat: '<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>',
+                footerFormat: 'Total: <b>{point.total}</b>'
+              },
+              series: ${seriesString},
+              credits: { enabled: false }
+            };
+            Highcharts.chart('${chartId}', chartOptions);
+          } catch (e) {
+            console.error("Error rendering chart ${chartId}:", e);
+            chartContainer.innerHTML = '<div class="no-data">Error rendering worker distribution chart.</div>';
+          }
+        } else {
+          chartContainer.innerHTML = '<div class="no-data">Charting library not available for worker distribution.</div>';
+        }
+      };
+    </script>
+  `;
+}
+const infoTooltip = `
+  <span class="info-tooltip" style="display: inline-block; margin-left: 8px;">
+    <span class="info-icon" 
+          style="cursor: pointer; font-size: 1.25rem;"
+          onclick="window.workerInfoPrompt()">ℹ️</span>
+  </span>
+  <script>
+    window.workerInfoPrompt = function() {
+      const message = 'Why is worker -1 special?\\n\\n' +
+                     'Playwright assigns skipped tests to worker -1 because:\\n' +
+                     '1. They don\\'t require browser execution\\n' +
+                     '2. This keeps real workers focused on actual tests\\n' +
+                     '3. Maintains clean reporting\\n\\n' +
+                     'This is an intentional optimization by Playwright.';
+      alert(message);
+    }
+  </script>
+`;
 function generateHTML(reportData, trendData = null) {
   const { run, results } = reportData;
   const suitesData = getSuitesData(reportData.results || []);
@@ -1322,13 +1587,13 @@ function generateHTML(reportData, trendData = null) {
                 step.duration
               )}</span></div><div class="step-details" style="display: none;">${
                 step.codeLocation
-                  ? `<div class="step-info"><strong>Location:</strong> ${sanitizeHTML(
+                  ? `<div class="step-info code-section"><strong>Location:</strong> ${sanitizeHTML(
                       step.codeLocation
                     )}</div>`
                   : ""
               }${
                 step.errorMessage
-                  ? `<div class="step-error">${
+                  ? `<div class="test-error-summary">${
                       step.stackTrace
                         ? `<div class="stack-trace">${formatPlaywrightError(
                             step.stackTrace
@@ -1392,13 +1657,24 @@ function generateHTML(reportData, trendData = null) {
                         <h4>Steps</h4><div class="steps-list">${generateStepsHTML(
                           test.steps
                         )}</div>
-                        ${
-                          test.stdout && test.stdout.length > 0
-                            ? `<div class="console-output-section"><h4>Console Output (stdout)</h4><pre class="console-log stdout-log">${formatPlaywrightError(
-                                test.stdout.join("\\n")
-                              )}</pre></div>`
-                            : ""
-                        }
+                        ${(() => {
+                          if (!test.stdout || test.stdout.length === 0)
+                            return "";
+                          // Create a unique ID for the <pre> element to target it for copying
+                          const logId = `stdout-log-${test.id || testIndex}`;
+                          return `<div class="console-output-section">
+                                        <h4>Console Output (stdout)
+                                        <button class="copy-btn" onclick="copyLogContent('${logId}', this)">Copy Console</button>
+                                        </h4>
+                                        <div class="log-wrapper">
+                                            <pre id="${logId}" class="console-log stdout-log" style="background-color: #2d2d2d; color: wheat; padding: 1.25em; border-radius: 0.85em; line-height: 1.2;">${formatPlaywrightError(
+                            test.stdout
+                              .map((line) => sanitizeHTML(line))
+                              .join("\n")
+                          )}</pre>
+                                        </div>
+                                    </div>`;
+                        })()}
                         ${
                           test.stderr && test.stderr.length > 0
                             ? `<div class="console-output-section"><h4>Console Output (stderr)</h4><pre class="console-log stderr-log">${test.stderr
@@ -1505,6 +1781,7 @@ function generateHTML(reportData, trendData = null) {
                             test.attachments.length === 0
                           )
                             return "";
+
                           return `<div class="attachments-section"><h4>Other Attachments</h4><div class="attachments-grid">${test.attachments
                             .map((attachment) => {
                               try {
@@ -1512,27 +1789,50 @@ function generateHTML(reportData, trendData = null) {
                                   DEFAULT_OUTPUT_DIR,
                                   attachment.path
                                 );
-                                if (!fsExistsSync(attachmentPath))
+
+                                if (!fsExistsSync(attachmentPath)) {
+                                  console.warn(
+                                    `Attachment not found at: ${attachmentPath}`
+                                  );
                                   return `<div class="attachment-item error">Attachment not found: ${sanitizeHTML(
                                     attachment.name
                                   )}</div>`;
+                                }
+
                                 const attachmentBase64 =
                                   readFileSync(attachmentPath).toString(
                                     "base64"
                                   );
                                 const attachmentDataUri = `data:${attachment.contentType};base64,${attachmentBase64}`;
-                                return `<div class="attachment-item generic-attachment"><div class="attachment-icon">${getAttachmentIcon(
-                                  attachment.contentType
-                                )}</div><div class="attachment-caption"><span class="attachment-name" title="${sanitizeHTML(
-                                  attachment.name
-                                )}">${sanitizeHTML(
+
+                                return `<div class="attachment-item generic-attachment">
+                                          <div class="attachment-icon">${getAttachmentIcon(
+                                            attachment.contentType
+                                          )}</div>
+                                          <div class="attachment-caption">
+                                            <span class="attachment-name" title="${sanitizeHTML(
+                                              attachment.name
+                                            )}">${sanitizeHTML(
                                   attachment.name
-                                )}</span><span class="attachment-type">${sanitizeHTML(
-                                  attachment.contentType
-                                )}</span></div><div class="attachment-info"><div class="trace-actions"><a href="#" data-href="${attachmentDataUri}" class="lazy-load-attachment" download="${sanitizeHTML(
+                                )}</span>
+                                            <span class="attachment-type">${sanitizeHTML(
+                                              attachment.contentType
+                                            )}</span>
+                                          </div>
+                                          <div class="attachment-info">
+                                            <div class="trace-actions">
+                                              <a href="${attachmentDataUri}" target="_blank" class="view-full">View</a>
+                                              <a href="${attachmentDataUri}" download="${sanitizeHTML(
                                   attachment.name
-                                )}">Download</a></div></div></div>`;
+                                )}">Download</a>
+                                            </div>
+                                          </div>
+                                        </div>`;
                               } catch (e) {
+                                console.error(
+                                  `Failed to process attachment "${attachment.name}":`,
+                                  e
+                                );
                                 return `<div class="attachment-item error">Failed to load attachment: ${sanitizeHTML(
                                   attachment.name
                                 )}</div>`;
@@ -1559,8 +1859,8 @@ 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/XqVn1NhF/pulse.png">
-    <link rel="apple-touch-icon" href="https://i.postimg.cc/XqVn1NhF/pulse.png">
+    <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">
     <script src="https://code.highcharts.com/highcharts.js" defer></script>
     <title>Playwright Pulse Report</title>
     <style>
@@ -1586,7 +1886,7 @@ function generateHTML(reportData, trendData = null) {
         .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
         .header-title { display: flex; align-items: center; gap: 15px; }
         .header h1 { margin: 0; font-size: 1.85em; font-weight: 600; color: var(--primary-color); }
-        #report-logo { height: 40px; width: 40px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
+        #report-logo { height: 40px; width: 55px; }
         .run-info { font-size: 0.9em; text-align: right; color: var(--text-color-secondary); line-height:1.5;}
         .run-info strong { color: var(--text-color); }
         .tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 30px; overflow-x: auto; }
@@ -1665,8 +1965,8 @@ function generateHTML(reportData, trendData = null) {
         .step-duration { color: var(--dark-gray-color); font-size: 0.9em; }
         .step-details { display: none; padding: 14px; margin-top: 8px; background: #fdfdfd; border-radius: 6px; font-size: 0.95em; border: 1px solid var(--light-gray-color); }
         .step-info { margin-bottom: 8px; }
-        .step-error { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(244,67,54,0.05); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
-        .step-error pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
+        .test-error-summary { color: var(--danger-color); margin-top: 12px; padding: 14px; background: rgba(244,67,54,0.05); border-radius: 4px; font-size: 0.95em; border-left: 3px solid var(--danger-color); }
+        .test-error-summary pre.stack-trace { margin-top: 10px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 4px; font-size:0.9em; max-height: 280px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
         .step-hook { background-color: rgba(33,150,243,0.04); border-left: 3px solid var(--info-color) !important; } 
         .step-hook .step-title { font-style: italic; color: var(--info-color)}
         .nested-steps { margin-top: 12px; }
@@ -1716,12 +2016,13 @@ function generateHTML(reportData, trendData = null) {
         .download-trace:hover { background: #cbd5e0; }
         .filters button.clear-filters-btn { background-color: var(--medium-gray-color); color: var(--text-color); }
         .filters button.clear-filters-btn:hover { background-color: var(--dark-gray-color); color: #fff; }
+        .copy-btn {color: var(--primary-color); background: #fefefe; border-radius: 8px; cursor: pointer; border-color: var(--primary-color); font-size: 1em; margin-left: 93%; font-weight: 600;}
         @media (max-width: 1200px) { .trend-charts-row { grid-template-columns: 1fr; } }
         @media (max-width: 992px) { .dashboard-bottom-row { grid-template-columns: 1fr; } .pie-chart-wrapper div[id^="pieChart-"] { max-width: 350px; margin: 0 auto; } .filters input { min-width: 180px; } .filters select { min-width: 150px; } }
         @media (max-width: 768px) { body { font-size: 15px; } .container { margin: 10px; padding: 20px; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header h1 { font-size: 1.6em; } .run-info { text-align: left; font-size:0.9em; } .tabs { margin-bottom: 25px;} .tab-button { padding: 12px 20px; font-size: 1.05em;} .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;} .summary-card .value {font-size: 2em;} .summary-card h3 {font-size: 0.95em;} .filters { flex-direction: column; padding: 18px; gap: 12px;} .filters input, .filters select, .filters button {width: 100%; box-sizing: border-box;} .test-case-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .test-case-summary {gap: 10px;} .test-case-title {font-size: 1.05em;} .test-case-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 8px;} .attachments-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px;} .test-history-grid {grid-template-columns: 1fr;} .pie-chart-wrapper {min-height: auto;} }
-        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 35px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
+        @media (max-width: 480px) { body {font-size: 14px;} .container {padding: 15px;} .header h1 {font-size: 1.4em;} #report-logo { height: 35px; width: 45px; } .tab-button {padding: 10px 15px; font-size: 1em;} .summary-card .value {font-size: 1.8em;} .attachments-grid {grid-template-columns: 1fr;} .step-item {padding-left: calc(var(--depth, 0) * 18px);} .test-case-content, .step-details {padding: 15px;} .trend-charts-row {gap: 20px;} .trend-chart {padding: 20px;} }
         .trace-actions a { text-decoration: none; color: var(--primary-color); font-weight: 500; font-size: 0.9em; }
-        .generic-attachment { text-align: center; padding: 1rem; justify-content: center; align-items: center; }
+        .generic-attachment { text-align: center; padding: 1rem; justify-content: center; }
         .attachment-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
         .attachment-caption { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; }
         .attachment-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@@ -1732,7 +2033,7 @@ function generateHTML(reportData, trendData = null) {
     <div class="container">
         <header class="header">
             <div class="header-title">
-                <img id="report-logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMNCA3bDggNSA4LTUtOC01eiIgZmlsbD0iIzNmNTFiNSIvPjxwYXRoIGQ9Ik0xMiA2TDQgMTFsOCA1IDgtNS04LTV6IiBmaWxsPSIjNDI4NWY0Ii8+PHBhdGggZD0iTTEyIDEwbC04IDUgOCA1IDgtNS04LTV6IiBmaWxsPSIjM2Q1NWI0Ii8+PC9zdmc+" alt="Report Logo">
+                <img id="report-logo" src="https://i.postimg.cc/v817w4sg/logo.png" alt="Report Logo">
                 <h1>Playwright Pulse Report</h1>
             </div>
             <div class="run-info"><strong>Run Date:</strong> ${formatDate(
@@ -1823,6 +2124,12 @@ function generateHTML(reportData, trendData = null) {
                   ? generateDurationTrendChart(trendData)
                   : '<div class="no-data">Overall trend data not available for durations.</div>'
               }
+              </div>
+          </div>
+          <h2 class="tab-main-title">Test Distribution by Worker ${infoTooltip}</h2>
+          <div class="trend-charts-row">
+             <div class="trend-chart">
+                ${generateWorkerDistributionChart(results)}
             </div>
           </div>
           <h2 class="tab-main-title">Individual Test History</h2>
@@ -1839,7 +2146,6 @@ function generateHTML(reportData, trendData = null) {
         </div>
         <footer style="padding: 0.5rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); text-align: center; font-family: 'Segoe UI', system-ui, sans-serif;">
             <div style="display: inline-flex; align-items: center; gap: 0.5rem; color: #333; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px;">
-                <img width="48" height="48" src="https://img.icons8.com/emoji/48/index-pointing-at-the-viewer-light-skin-tone-emoji.png" alt="index-pointing-at-the-viewer-light-skin-tone-emoji"/>
                 <span>Created by</span>
                 <a href="https://github.com/Arghajit47" target="_blank" rel="noopener noreferrer" style="color: #7737BF; font-weight: 700; font-style: italic; text-decoration: none; transition: all 0.2s ease;" onmouseover="this.style.color='#BF5C37'" onmouseout="this.style.color='#7737BF'">Arghajit Singha</a>
             </div>
@@ -1854,6 +2160,21 @@ function generateHTML(reportData, trendData = null) {
             return (ms / 1000).toFixed(1) + "s"; 
         }
     }
+    function copyLogContent(elementId, button) {
+        const logElement = document.getElementById(elementId);
+        if (!logElement) {
+            console.error('Could not find log element with ID:', elementId);
+            return;
+        }
+        navigator.clipboard.writeText(logElement.innerText).then(() => {
+            button.textContent = 'Copied!';
+            setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+        }).catch(err => {
+            console.error('Failed to copy log content:', err);
+            button.textContent = 'Failed';
+             setTimeout(() => { button.textContent = 'Copy'; }, 2000);
+        });
+    } 
     function initializeReportInteractivity() {
         const tabButtons = document.querySelectorAll('.tab-button');
         const tabContents = document.querySelectorAll('.tab-content');
@@ -2007,9 +2328,9 @@ function generateHTML(reportData, trendData = null) {
 
     function copyErrorToClipboard(button) {
   // 1. Find the main error container, which should always be present.
-  const errorContainer = button.closest('.step-error');
+  const errorContainer = button.closest('.test-error-summary');
   if (!errorContainer) {
-    console.error("Could not find '.step-error' container. The report's HTML structure might have changed.");
+    console.error("Could not find '.test-error-summary' container. The report's HTML structure might have changed.");
     return;
   }