@arghajit/dummy 0.3.28 → 0.3.33

package/dist/pulse.js

@@ -1,5 +1,8 @@
-import { test } from "@playwright/test";
-export const pulse = {
+"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')
@@ -13,7 +16,7 @@ export const pulse = {
         // 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.info().annotations.push({
+        test_1.test.info().annotations.push({
             type: "pulse_severity",
             description: selectedLevel,
         });

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

@@ -42,6 +42,7 @@ const path = __importStar(require("path"));
 const crypto_1 = require("crypto");
 const ua_parser_js_1 = __importDefault(require("ua-parser-js"));
 const os = __importStar(require("os"));
+const compression_utils_1 = require("../utils/compression-utils");
 const convertStatus = (status, testCase) => {
     if ((testCase === null || testCase === void 0 ? void 0 : testCase.expectedStatus) === "failed") {
         return "failed";
@@ -325,7 +326,10 @@ class PlaywrightPulseReporter {
                 const relativeDestPath = path.join(ATTACHMENTS_SUBDIR, testSubfolder, uniqueFileName);
                 const absoluteDestPath = path.join(this.outputDir, relativeDestPath);
                 await this._ensureDirExists(path.dirname(absoluteDestPath));
+                // Copy file first
                 await fs.copyFile(attachment.path, absoluteDestPath);
+                // Compress in-place (preserves path/name)
+                await (0, compression_utils_1.compressAttachment)(absoluteDestPath, attachment.contentType);
                 if (attachment.contentType.startsWith("image/")) {
                     (_m = pulseResult.screenshots) === null || _m === void 0 ? void 0 : _m.push(relativeDestPath);
                 }
@@ -362,7 +366,10 @@ class PlaywrightPulseReporter {
             attempts.sort((a, b) => a.retries - b.retries);
             const firstAttempt = attempts[0];
             const retryAttempts = attempts.slice(1);
-            if (retryAttempts.length > 0) {
+            // Only populate retryHistory if there were actual failures that triggered retries
+            // If all attempts passed, we don't need to show retry history
+            const hasActualRetries = retryAttempts.length > 0 && retryAttempts.some(attempt => attempt.status === 'failed' || attempt.status === 'flaky' || firstAttempt.status === 'failed' || firstAttempt.status === 'flaky');
+            if (hasActualRetries) {
                 firstAttempt.retryHistory = retryAttempts;
                 // Calculate final status and outcome from the last attempt if retries exist
                 const lastAttempt = attempts[attempts.length - 1];
@@ -374,8 +381,9 @@ class PlaywrightPulseReporter {
                 }
             }
             else {
-                // If no retries, ensure final_status is undefined (as requested)
+                // If no actual retries (all attempts passed), ensure final_status and retryHistory are removed
                 delete firstAttempt.final_status;
+                delete firstAttempt.retryHistory;
             }
             finalResults.push(firstAttempt);
         }

package/dist/utils/compression-utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Compression utilities for images
+ * Uses sharp for image compression (works cross-platform with no external dependencies)
+ */
+/**
+ * Compress an image file in-place
+ * @param filePath - Absolute path to the image file
+ * @param options - Compression options
+ */
+export declare function compressImage(filePath: string, options?: {
+    quality?: number;
+}): Promise<void>;
+/**
+ * Compress an attachment file (auto-detects type)
+ * Note: Only compresses images. Videos are already compressed by Playwright.
+ * @param filePath - Absolute path to the file
+ * @param contentType - MIME content type
+ */
+export declare function compressAttachment(filePath: string, contentType: string): Promise<void>;

package/dist/utils/compression-utils.js

@@ -0,0 +1,108 @@
+"use strict";
+// src/utils/compression-utils.ts
+/**
+ * Compression utilities for images
+ * Uses sharp for image compression (works cross-platform with no external dependencies)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compressImage = compressImage;
+exports.compressAttachment = compressAttachment;
+const fs = __importStar(require("fs/promises"));
+const path = __importStar(require("path"));
+/**
+ * Compress an image file in-place
+ * @param filePath - Absolute path to the image file
+ * @param options - Compression options
+ */
+async function compressImage(filePath, options = {}) {
+    try {
+        const sharp = require('sharp');
+        const quality = options.quality || 75;
+        const ext = path.extname(filePath).toLowerCase();
+        // Read original file
+        const imageBuffer = await fs.readFile(filePath);
+        let compressedBuffer;
+        if (ext === '.png') {
+            // Compress PNG
+            compressedBuffer = await sharp(imageBuffer)
+                .png({ quality, compressionLevel: 9 })
+                .toBuffer();
+        }
+        else if (ext === '.jpg' || ext === '.jpeg') {
+            // Compress JPEG
+            compressedBuffer = await sharp(imageBuffer)
+                .jpeg({ quality, mozjpeg: true })
+                .toBuffer();
+        }
+        else if (ext === '.webp') {
+            // Compress WebP
+            compressedBuffer = await sharp(imageBuffer)
+                .webp({ quality })
+                .toBuffer();
+        }
+        else {
+            // Unsupported format, skip compression
+            console.log(`Compression skipped for unsupported format: ${ext}`);
+            return;
+        }
+        // Only overwrite if compression actually reduced size
+        if (compressedBuffer.length < imageBuffer.length) {
+            await fs.writeFile(filePath, compressedBuffer);
+            const savedBytes = imageBuffer.length - compressedBuffer.length;
+            const savedPercent = ((savedBytes / imageBuffer.length) * 100).toFixed(1);
+            console.log(`Compressed ${path.basename(filePath)}: ${savedPercent}% smaller`);
+        }
+        else {
+            console.log(`Skipped ${path.basename(filePath)}: compression didn't reduce size`);
+        }
+    }
+    catch (error) {
+        console.warn(`Failed to compress image ${filePath}:`, error.message);
+        // File remains unchanged
+    }
+}
+/**
+ * Compress an attachment file (auto-detects type)
+ * Note: Only compresses images. Videos are already compressed by Playwright.
+ * @param filePath - Absolute path to the file
+ * @param contentType - MIME content type
+ */
+async function compressAttachment(filePath, contentType) {
+    if (contentType.startsWith('image/')) {
+        await compressImage(filePath, { quality: 75 });
+    }
+    // Videos are skipped - already compressed by Playwright as WebM
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.28",
+  "version": "0.3.33",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://arghajit47.github.io/playwright-pulse/",
   "repository": {
@@ -73,6 +73,7 @@
     "node-fetch": "^3.3.2",
     "nodemailer": "^7.0.3",
     "patch-package": "^8.0.0",
+    "sharp": "^0.33.5",
     "ua-parser-js": "^1.0.41",
     "zod": "^3.24.2"
   },

package/scripts/generate-email-report.mjs

@@ -160,6 +160,8 @@ function getStatusClass(status) {
       return "status-failed";
     case "skipped":
       return "status-skipped";
+    case "flaky":
+      return "status-flaky";
     default:
       return "status-unknown";
   }
@@ -172,6 +174,8 @@ function getStatusIcon(status) {
       return "❌";
     case "skipped":
       return "⏭️";
+    case "flaky":
+      return "⚠";
     default:
       return "❓";
   }
@@ -243,13 +247,16 @@ function generateMinifiedHTML(reportData) {
         )}; font-size: 0.8em; font-weight: 600; padding: 3px 8px; border-radius: 4px; color: #fff; margin-left: 10px; white-space: nowrap;">${severity}</span>`;
 
         // --- NEW: Retry Count Badge ---
-        const retryCountBadge = (test.retryHistory && test.retryHistory.length > 0)
+        const unsuccessfulRetries = (test.retryHistory || []).filter(attempt => 
+          attempt.status === 'failed' || attempt.status === 'timedout' || attempt.status === 'flaky'
+        );
+        const retryCountBadge = (unsuccessfulRetries.length > 0)
           ? `<span style="background-color: #f59e0b; border: 1px solid #d97706; font-size: 0.8em; font-weight: 700; padding: 4px 10px; border-radius: 50px; color: #fff; margin-left: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;">
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle;">
                 <path d="M1 4v6h6"/>
                 <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
               </svg>
-              Retry Count: ${test.retryHistory.length}
+              Retry Count: ${unsuccessfulRetries.length}
             </span>`
           : '';
 
@@ -310,6 +317,7 @@ function generateMinifiedHTML(reportData) {
             --light-gray-color: #ecf0f1; /* Light Grey */
             --medium-gray-color: #bdc3c7; /* Medium Grey */
             --dark-gray-color: #7f8c8d; /* Dark Grey */
+            --flaky-color: #00ccd3; /* Cyan/Teal for Flaky */
             --text-color: #34495e; /* Dark Grey/Blue for text */
             --background-color: #f8f9fa;
             --card-background-color: #ffffff;
@@ -400,6 +408,8 @@ function generateMinifiedHTML(reportData) {
         .stat-card.failed .value { color: var(--danger-color); }
         .stat-card.skipped { border-left-color: var(--warning-color); }
         .stat-card.skipped .value { color: var(--warning-color); }
+        .stat-card.flaky { border-left-color: var(--flaky-color); }
+        .stat-card.flaky .value { color: var(--flaky-color); }
 
         .section-title {
             font-size: 1.5em;
@@ -494,6 +504,7 @@ function generateMinifiedHTML(reportData) {
         .test-item.status-passed .test-status-label { background-color: var(--success-color); }
         .test-item.status-failed .test-status-label { background-color: var(--danger-color); }
         .test-item.status-skipped .test-status-label { background-color: var(--warning-color); }
+        .test-item.status-flaky .test-status-label { background-color: var(--flaky-color); }
         .test-item.status-unknown .test-status-label { background-color: var(--dark-gray-color); }
         
         .no-tests {
@@ -570,6 +581,10 @@ function generateMinifiedHTML(reportData) {
                     <h3>Skipped</h3>
                     <div class="value">${runSummary.skipped || 0}</div>
                 </div>
+                <div class="stat-card flaky">
+                    <h3>Flaky</h3>
+                    <div class="value">${runSummary.flaky || 0}</div>
+                </div>
             </div>
         </section>
 
@@ -599,7 +614,7 @@ function generateMinifiedHTML(reportData) {
                     <option value="passed">✅ Passed</option>
                     <option value="failed">❌ Failed</option>
                     <option value="skipped">⏭️ Skipped</option>
-                    <option value="unknown">❓ Unknown</option>
+                    <option value="flaky">⚠ Flaky</option>
                 </select>
                 <select id="filter-min-browser">
                     <option value="">All Browsers</option>

package/scripts/generate-report.mjs

@@ -298,7 +298,7 @@ function generateTestTrendsChart(trendData) {
     {
       name: "Flaky",
       data: runs.map((r) => r.flaky || 0),
-      color: "var(--neutral-500)",
+      color: "#00ccd3",
       marker: { symbol: "circle" },
     },
   ];
@@ -600,7 +600,7 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
               color = "var(--danger-color)";
               break;
             case "Flaky":
-              color = "var(--neutral-500)";
+              color = "#00ccd3";
               break;
             case "Skipped":
               color = "var(--warning-color)";
@@ -1234,7 +1234,7 @@ function generateWorkerDistributionChart(results) {
   const seriesString = JSON.stringify([
     { name: "Passed", data: passedData, color: "var(--success-color)" },
     { name: "Failed", data: failedData, color: "var(--danger-color)" },
-    { name: "Flaky", data: flakyData, color: "var(--neutral-500)" },
+    { name: "Flaky", data: flakyData, color: "#00ccd3" },
     { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
   ]);
 
@@ -1327,7 +1327,7 @@ function generateWorkerDistributionChart(results) {
                 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)';
-                else if (test.status === 'flaky') color = 'var(--neutral-500)';
+                else if (test.status === 'flaky') color = '#00ccd3';
 
                 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>\`;
@@ -2120,7 +2120,7 @@ function generateSeverityDistributionChart(results) {
   const seriesData = [
     { name: "Passed", data: data.passed, color: "var(--success-color)" },
     { name: "Failed", data: data.failed, color: "var(--danger-color)" },
-    { name: "Flaky", data: data.flaky, color: "var(--neutral-500)" },
+    { name: "Flaky", data: data.flaky, color: "#00ccd3" },
     { name: "Skipped", data: data.skipped, color: "var(--warning-color)" },
   ];
 
@@ -2243,9 +2243,18 @@ function generateHTML(reportData, trendData = null) {
   const flakyCount = (results || []).filter(r => r.outcome === 'flaky').length;
 
   // Calculate retry statistics
+  let retriedTestsCount = 0;
   const totalRetried = (results || []).reduce((acc, test) => {
     if (test.retryHistory && test.retryHistory.length > 0) {
-      return acc + test.retryHistory.length;
+      // Filter out any "passed" or "skipped" entries in the history
+      // We only count attempts that actually failed or timed out, triggering a retry.
+      const unsuccessfulRetries = test.retryHistory.filter(attempt => 
+        attempt.status === 'failed' || attempt.status === 'timedout' || attempt.status === 'flaky'
+      );
+      if (unsuccessfulRetries.length > 0) {
+        retriedTestsCount++;
+      }
+      return acc + unsuccessfulRetries.length;
     }
     return acc;
   }, 0);
@@ -2331,8 +2340,8 @@ function generateHTML(reportData, trendData = null) {
         const severityBadge = `<span class="severity-badge" data-severity="${severity.toLowerCase()}">${severity}</span>`;
         
         // --- Retry Count Badge (only show if retries occurred) ---
-        const retryCount = test.retryHistory ? test.retryHistory.length : 0;
-        const retryBadge = retryCount > 0 ? `<span class="retry-badge">Retry Count: ${retryCount}</span>` : '';
+        const retryCount = (test.retryHistory && test.retryHistory.length > 0) ? test.retryHistory.length : 0;
+        const retryBadge = (test.retryHistory && test.retryHistory.length > 0) ? `<span class="retry-badge">Retry Count: ${retryCount}</span>` : '';
         const generateStepsHTML = (steps, depth = 0) => {
           if (!steps || steps.length === 0)
             return "<div class='no-steps'>No steps recorded for this test.</div>";
@@ -2428,6 +2437,7 @@ function generateHTML(reportData, trendData = null) {
             if(s === 'passed') colorVar = 'var(--success-color)';
             else if(s === 'failed') colorVar = 'var(--danger-color)';
             else if(s === 'skipped') colorVar = 'var(--warning-color)';
+            else if(s === 'flaky') colorVar = '#00ccd3';
             
             return `<span style="
                 display: inline-block; 
@@ -2794,7 +2804,8 @@ function generateHTML(reportData, trendData = null) {
           --success-color: #10b981; --success-dark: #059669; --success-light: #34d399;
           --danger-color: #ef4444; --danger-dark: #dc2626; --danger-light: #f87171;
           --warning-color: #f59e0b; --warning-dark: #d97706; --warning-light: #fbbf24;
-          --info-color: #3b82f6; 
+          --info-color: #3b82f6;
+          --flaky-color: #00ccd3; 
           --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4;
           --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040;
           --neutral-800: #262626; --neutral-900: #171717;
@@ -3472,19 +3483,19 @@ function generateHTML(reportData, trendData = null) {
           box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
         }
         .summary-card.status-failed .value { color: #ef4444; }
-        .summary-card.status-flaky::before { background: var(--neutral-500); }
+        .summary-card.status-flaky::before { background: #00ccd3; }
         .summary-card.status-skipped { background: rgba(245, 158, 11, 0.02); }
         .summary-card.status-skipped:hover { 
           background: rgba(245, 158, 11, 0.15); 
           box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
         }
         .summary-card.status-skipped .value { color: #f59e0b; }
-        .summary-card.flaky-status { background: rgba(156, 163, 175, 0.05); }
+        .summary-card.flaky-status { background: rgba(0, 204, 211, 0.05); }
         .summary-card.flaky-status:hover { 
-          background: rgba(156, 163, 175, 0.15); 
-          box-shadow: 0 4px 12px rgba(156, 163, 175, 0.2);
+          background: rgba(0, 204, 211, 0.15); 
+          box-shadow: 0 4px 12px rgba(0, 204, 211, 0.2);
         }
-        .summary-card.flaky-status .value { color: #64748b; }
+        .summary-card.flaky-status .value { color: #00ccd3; }
         .summary-card:not([class*='status-']) .value { color: #0f172a; }
         .dashboard-bottom-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 28px; align-items: start; }
         .dashboard-column { 
@@ -3584,7 +3595,7 @@ function generateHTML(reportData, trendData = null) {
         }
         .suite-card.status-passed::before { background: var(--success-color); }
         .suite-card.status-failed::before { background: var(--danger-color); }
-        .suite-card.status-flaky::before { background: var(--neutral-500); }
+        .suite-card.status-flaky::before { background: #00ccd3; }
         .suite-card.status-skipped::before { background: var(--warning-color); }
         
         /* Outcome Badge */
@@ -3600,8 +3611,8 @@ function generateHTML(reportData, trendData = null) {
             letter-spacing: 0.5px;
         }
         .outcome-badge.flaky {
-            background-color: #eab308; /* Yellow-500 */
-            color: #000;
+            background-color: #00ccd3;
+            color: #fff;
         }
 
         .suite-card-header {
@@ -3630,9 +3641,9 @@ function generateHTML(reportData, trendData = null) {
         }
         .status-indicator-dot.status-passed { background-color: var(--success-color); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
         .status-indicator-dot.status-failed { background-color: var(--danger-color); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
-        .status-indicator-dot.status-flaky { background-color: var(--neutral-500); box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.15); }
+        .status-indicator-dot.status-flaky { background-color: #00ccd3; box-shadow: 0 0 0 4px rgba(0, 204, 211, 0.15); }
         .status-indicator-dot.status-skipped { background-color: rgba(245, 158, 11, 0.1); color: var(--warning-dark); border: 1px solid rgba(245, 158, 11, 0.2); }
-        .status-flaky { background-color: #C0C0C0; color: #000000; border: 1px solid #A0A0A0; }
+        .status-flaky { background-color: rgba(0, 204, 211, 0.1); color: #00ccd3; border: 1px solid #00ccd3; }
 
         .browser-tag {
           font-size: 0.8em;
@@ -3684,7 +3695,7 @@ function generateHTML(reportData, trendData = null) {
         .stat-pill svg { width: 14px; height: 14px; }
         .stat-pill.passed { color: var(--success-dark); }
         .stat-pill.failed { color: var(--danger-dark); }
-        .stat-pill.flaky { color: #4b5563; }
+        .stat-pill.flaky { color: #00ccd3; }
         .stat-pill.skipped { color: var(--warning-dark); }
         .filters {
           display: flex;
@@ -3849,7 +3860,7 @@ function generateHTML(reportData, trendData = null) {
           border-radius: 0;
           font-size: 0.7em;
           font-weight: 800;
-          color: white;
+          color: black;
           text-transform: uppercase;
           min-width: 100px;
           text-align: center;
@@ -4560,13 +4571,14 @@ function generateHTML(reportData, trendData = null) {
                 }</div><div class="trend-percentage">${skipPercentage}%</div></div>
                 <div class="summary-card flaky-status"><h3>Flaky</h3><div class="value">${runSummary.flaky || 0}</div>
                 <div class="trend-percentage">${flakyPercentage}%</div></div>
-                <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
-                  runSummary.duration,
-                )}</div></div>
-                <div class="summary-card">
-                  <h3>Total Retry Count</h3>
-                  <div class="value">${totalRetried}</div>
-                </div>
+                 <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
+                   runSummary.duration,
+                 )}</div><div class="trend-percentage">Avg. Test Duration ${avgTestDuration}</div></div>
+                 <div class="summary-card">
+                   <h3>Total Retry Count</h3>
+                   <div class="value">${totalRetried}</div>
+                   <div class="trend-percentage">Test Retried ${retriedTestsCount}</div>
+                 </div>
                 <div class="summary-card">
                   <h3>🌐 Browser Distribution <span style="font-size: 0.7em; color: var(--text-color-secondary); font-weight: 400;">(${browserBreakdown.length} total)</span></h3>
                   <div class="browser-breakdown" style="max-height: 200px; overflow-y: auto; padding-right: 4px;">

package/scripts/generate-static-report.mjs

@@ -342,7 +342,7 @@ function generateTestTrendsChart(trendData) {
     {
       name: "Flaky",
       data: runs.map((r) => r.flaky || 0),
-      color: "var(--neutral-500)",
+      color: "#00ccd3",
       marker: { symbol: "circle" },
     },
   ];
@@ -668,7 +668,7 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
               color = "var(--danger-color)";
               break;
             case "Flaky":
-              color = "var(--neutral-500)";
+              color = "#00ccd3";
               break;
             case "Skipped":
               color = "var(--warning-color)";
@@ -1395,7 +1395,7 @@ function generateWorkerDistributionChart(results) {
     { name: "Passed", data: passedData, color: "var(--success-color)" },
     { name: "Failed", data: failedData, color: "var(--danger-color)" },
     { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
-    { name: "Flaky", data: flakyData, color: "var(--neutral-500)" },
+    { name: "Flaky", data: flakyData, color: "#00ccd3" },
   ]);
 
   // The HTML now includes the chart container, the modal, and styles for the modal
@@ -2315,7 +2315,7 @@ function generateSeverityDistributionChart(results) {
   const seriesData = [
     { name: "Passed", data: data.passed, color: "var(--success-color)" },
     { name: "Failed", data: data.failed, color: "var(--danger-color)" },
-    { name: "Flaky", data: data.flaky, color: "var(--neutral-500)" },
+    { name: "Flaky", data: data.flaky, color: "#00ccd3" },
     { name: "Skipped", data: data.skipped, color: "var(--warning-color)" },
   ];
 
@@ -2468,9 +2468,18 @@ function generateHTML(reportData, trendData = null) {
   const flakyCount = (results || []).filter(r => r.outcome === 'flaky').length;
 
   // Calculate retry statistics
+  let retriedTestsCount = 0;
   const totalRetried = (results || []).reduce((acc, test) => {
     if (test.retryHistory && test.retryHistory.length > 0) {
-      return acc + test.retryHistory.length;
+      // Filter out any "passed" or "skipped" entries in the history
+      // We only count attempts that actually failed or timed out, triggering a retry.
+      const unsuccessfulRetries = test.retryHistory.filter(attempt => 
+        attempt.status === 'failed' || attempt.status === 'timedout' || attempt.status === 'flaky'
+      );
+      if (unsuccessfulRetries.length > 0) {
+        retriedTestsCount++;
+      }
+      return acc + unsuccessfulRetries.length;
     }
     return acc;
   }, 0);
@@ -2570,8 +2579,8 @@ function generateHTML(reportData, trendData = null) {
         const severityBadge = `<span class="severity-badge" data-severity="${severity.toLowerCase()}">${severity}</span>`;
 
         // --- Retry Count Badge (only show if retries occurred) ---
-        const retryCount = test.retryHistory ? test.retryHistory.length : 0;
-        const retryBadge = retryCount > 0 ? `<span class="retry-badge">Retry Count: ${retryCount}</span>` : '';
+        const retryCount = (test.retryHistory && test.retryHistory.length > 0) ? test.retryHistory.length : 0;
+        const retryBadge = (test.retryHistory && test.retryHistory.length > 0) ? `<span class="retry-badge">Retry Count: ${retryCount}</span>` : '';
 
         // --- Step Generation ---
         const generateStepsHTML = (steps, depth = 0) => {
@@ -2649,6 +2658,7 @@ function generateHTML(reportData, trendData = null) {
             if(s === 'passed') colorVar = 'var(--success-color)';
             else if(s === 'failed') colorVar = 'var(--danger-color)';
             else if(s === 'skipped') colorVar = 'var(--warning-color)';
+            else if(s === 'flaky') colorVar = '#00ccd3';
             
             return `<span style="
                 display: inline-block; 
@@ -3017,7 +3027,8 @@ function generateHTML(reportData, trendData = null) {
   --success-color: #34d399; --success-dark: #10b981; --success-light: #6ee7b7;
   --danger-color: #f87171; --danger-dark: #ef4444; --danger-light: #fca5a5;
   --warning-color: #fbbf24; --warning-dark: #f59e0b; --warning-light: #fcd34d;
-  --info-color: #9ca3af; 
+  --info-color: #9ca3af;
+  --flaky-color: #00ccd3; 
   --text-primary: #f9fafb; --text-secondary: #e5e7eb; --text-tertiary: #d1d5db;
   --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #050505;
   --bg-card: #0d0d0d; --bg-card-hover: #121212;
@@ -3471,14 +3482,14 @@ function generateHTML(reportData, trendData = null) {
           color: #f59e0b; 
         }
         .summary-card.flaky-status { 
-          background: rgba(156, 163, 175, 0.08); 
+          background: rgba(0, 204, 211, 0.05); 
         }
         .summary-card.flaky-status:hover { 
-          background: rgba(156, 163, 175, 0.15); 
-          box-shadow: 0 4px 12px rgba(156, 163, 175, 0.2);
+          background: rgba(0, 204, 211, 0.15); 
+          box-shadow: 0 4px 12px rgba(0, 204, 211, 0.2);
         }
         .summary-card.flaky-status .value { 
-          color: #9ca3af; 
+          color: #00ccd3; 
         }
         .summary-card:not([class*='status-']) .value { 
           color: #f9fafb; 
@@ -3602,7 +3613,7 @@ function generateHTML(reportData, trendData = null) {
         }
         .suite-card.status-passed::before { background: var(--success-color); }
         .suite-card.status-failed::before { background: var(--danger-color); }
-        .suite-card.status-flaky::before { background: var(--neutral-500); }
+        .suite-card.status-flaky::before { background: #00ccd3; }
         .suite-card.status-skipped::before { background: var(--warning-color); }
         
         .suite-card.status-skipped::before { background: var(--warning-color); }
@@ -3620,8 +3631,8 @@ function generateHTML(reportData, trendData = null) {
             letter-spacing: 0.5px;
         }
         .outcome-badge.flaky {
-            background-color: #eab308; /* Yellow-500 */
-            color: #000;
+            background-color: #00ccd3;
+            color: #fff;
         }
         
         .suite-card-header {
@@ -3705,7 +3716,7 @@ function generateHTML(reportData, trendData = null) {
         .stat-pill svg { width: 14px; height: 14px; }
         .stat-pill.passed { color: var(--success-dark); }
         .stat-pill.failed { color: var(--danger-dark); }
-        .stat-pill.flaky { color: #4b5563; }
+        .stat-pill.flaky { color: #00ccd3; }
         .stat-pill.skipped { color: var(--warning-dark); }
           color: #93c5fd;
           padding: 6px 12px;
@@ -3901,9 +3912,8 @@ function generateHTML(reportData, trendData = null) {
           background: var(--warning-color);
         }
         .status-badge.status-flaky {
-          background-color: #C0C0C0; 
-          color: #000000; 
-          border: 1px solid #A0A0A0;
+          background-color: #00ccd3; 
+          color: #fff; 
         }
         .status-badge.status-unknown {
           background: var(--dark-gray-color);
@@ -4539,8 +4549,8 @@ function generateHTML(reportData, trendData = null) {
           background-color: #f59e0b; 
         }
         .status-badge-small.status-flaky { 
-          background-color: #C0C0C0; 
-          color: #000000;
+          background-color: #00ccd3; 
+          color: #fff;
         }
         .status-badge-small.status-unknown { 
           background-color: var(--dark-gray-color); 
@@ -6246,10 +6256,11 @@ function generateHTML(reportData, trendData = null) {
                 <div class="trend-percentage">${flakyPercentage}%</div></div>
                 <div class="summary-card"><h3>Run Duration</h3><div class="value">${formatDuration(
                   runSummary.duration,
-                )}</div></div>
+                )}</div><div class="trend-percentage">Avg. Test Duration ${avgTestDuration}</div></div>
                 <div class="summary-card">
                   <h3>Total Retry Count</h3>
                   <div class="value">${totalRetried}</div>
+                  <div class="trend-percentage">Test Retried ${retriedTestsCount}</div>
                 </div>
                 <div class="summary-card">
                   <h3>🌐 Browser Distribution <span style="font-size: 0.7em; color: var(--text-color-secondary); font-weight: 400;">(${browserBreakdown.length} total)</span></h3>

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-import { PlaywrightPulseReporter } from "./playwright-pulse-reporter";
-export default PlaywrightPulseReporter;
-export { PlaywrightPulseReporter };
-export * from "../types";
-export * from "../lib/report-types";