@arghajit/dummy 0.3.27 → 0.3.31

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

@@ -362,19 +362,24 @@ 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];
                 firstAttempt.final_status = lastAttempt.status;
                 // If the last attempt was flaky, ensure outcome is set on the main result
-                if (lastAttempt.outcome === 'flaky') {
+                if (lastAttempt.outcome === 'flaky' || lastAttempt.status === 'flaky') {
                     firstAttempt.outcome = 'flaky';
+                    firstAttempt.status = 'flaky';
                 }
             }
             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);
         }
@@ -438,6 +443,7 @@ class PlaywrightPulseReporter {
         finalRunData.passed = finalResultsList.filter((r) => r.status === "passed").length;
         finalRunData.failed = finalResultsList.filter((r) => r.status === "failed").length;
         finalRunData.skipped = finalResultsList.filter((r) => r.status === "skipped").length;
+        finalRunData.flaky = finalResultsList.filter((r) => r.status === "flaky").length;
         finalRunData.totalTests = finalResultsList.length;
         const reviveDates = (key, value) => {
             const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?Z$/;
@@ -498,6 +504,7 @@ class PlaywrightPulseReporter {
             passed: finalResults.filter((r) => r.status === "passed").length,
             failed: finalResults.filter((r) => r.status === "failed").length,
             skipped: finalResults.filter((r) => r.status === "skipped").length,
+            flaky: finalResults.filter((r) => r.status === "flaky").length,
             duration,
             environment: environmentDetails,
         };

package/dist/types/index.d.ts

@@ -70,6 +70,7 @@ export interface TestRun {
     passed: number;
     failed: number;
     skipped: number;
+    flaky?: number;
     duration: number;
     environment?: EnvDetails | EnvDetails[];
 }
@@ -78,6 +79,7 @@ export interface TrendDataPoint {
     passed: number;
     failed: number;
     skipped: number;
+    flaky?: number;
 }
 export interface SummaryMetric {
     label: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arghajit/dummy",
   "author": "Arghajit Singha",
-  "version": "0.3.27",
+  "version": "0.3.31",
   "description": "A Playwright reporter and dashboard for visualizing test results.",
   "homepage": "https://arghajit47.github.io/playwright-pulse/",
   "repository": {

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

@@ -295,6 +295,12 @@ function generateTestTrendsChart(trendData) {
       color: "var(--warning-color)",
       marker: { symbol: "circle" },
     },
+    {
+      name: "Flaky",
+      data: runs.map((r) => r.flaky || 0),
+      color: "#00ccd3",
+      marker: { symbol: "circle" },
+    },
   ];
   const runsForTooltip = runs.map((r) => ({
     runId: r.runId,
@@ -481,6 +487,9 @@ function generateTestHistoryChart(history) {
       case "skipped":
         color = "var(--warning-color)";
         break;
+      case "flaky":
+        color = "var(--neutral-500)";
+        break;
       default:
         color = "var(--dark-gray-color)";
     }
@@ -590,6 +599,9 @@ function generatePieChart(data, chartWidth = 300, chartHeight = 300) {
             case "Failed":
               color = "var(--danger-color)";
               break;
+            case "Flaky":
+              color = "#00ccd3";
+              break;
             case "Skipped":
               color = "var(--warning-color)";
               break;
@@ -828,7 +840,9 @@ function generateEnvironmentSection(environmentData) {
 }
 
 function generateEnvironmentDashboard(environment, hideHeader = false) {
-  const cpuInfo = `model: ${environment.cpu.model}, cores: ${environment.cpu.cores}`;
+  const cpuModel = environment.cpu && environment.cpu.model ? environment.cpu.model : "N/A";
+  const cpuCores = environment.cpu && environment.cpu.cores ? environment.cpu.cores : "N/A";
+  const cpuInfo = `model: ${cpuModel}, cores: ${cpuCores}`;
   const osInfo = environment.os || "N/A";
   const nodeInfo = environment.node || "N/A";
   const v8Info = environment.v8 || "N/A";
@@ -1140,7 +1154,7 @@ function generateEnvironmentDashboard(environment, hideHeader = false) {
             </div>
             <div class="env-item-content">
               <p class="env-item-label">Working Dir</p>
-              <div class="env-item-value" title="${environment.cwd}">${environment.cwd.length > 30 ? "..." + environment.cwd.slice(-27) : environment.cwd}</div>
+              <div class="env-item-value" title="${cwdInfo}">${cwdInfo.length > 30 ? "..." + cwdInfo.slice(-27) : cwdInfo}</div>
             </div>
           </div>
         </div>
@@ -1164,11 +1178,11 @@ function generateWorkerDistributionChart(results) {
     const workerId =
       typeof test.workerId !== "undefined" ? test.workerId : "N/A";
     if (!acc[workerId]) {
-      acc[workerId] = { passed: 0, failed: 0, skipped: 0, tests: [] };
+      acc[workerId] = { passed: 0, failed: 0, skipped: 0, flaky: 0, tests: [] };
     }
 
     const status = String(test.status).toLowerCase();
-    if (status === "passed" || status === "failed" || status === "skipped") {
+    if (status === "passed" || status === "failed" || status === "skipped" || status === "flaky") {
       acc[workerId][status]++;
     }
 
@@ -1213,12 +1227,14 @@ function generateWorkerDistributionChart(results) {
   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 flakyData = workerIds.map((id) => workerData[id].flaky);
 
   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: "Flaky", data: flakyData, color: "#00ccd3" },
     { name: "Skipped", data: skippedData, color: "var(--warning-color)" },
   ]);
 
@@ -1311,6 +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 = '#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>\`;
@@ -1476,6 +1493,7 @@ function generateTestHistoryContent(trendData) {
         <option value="">All Statuses</option>
         <option value="passed">Passed</option>
         <option value="failed">Failed</option>
+        <option value="flaky">Flaky</option>
         <option value="skipped">Skipped</option>
     </select>
     <button id="clear-history-filters" class="clear-filters-btn">Clear Filters</button>
@@ -1594,6 +1612,7 @@ function getSuitesData(results) {
         browser: browser,
         passed: 0,
         failed: 0,
+        flaky: 0,
         skipped: 0,
         count: 0,
         statusOverall: "passed",
@@ -1601,12 +1620,15 @@ function getSuitesData(results) {
     }
     const suite = suitesMap.get(key);
     suite.count++;
-    const currentStatus = String(test.status).toLowerCase();
+    let currentStatus = String(test.status).toLowerCase();
+    if (test.outcome === 'flaky') currentStatus = 'flaky';
     if (currentStatus && suite[currentStatus] !== undefined) {
       suite[currentStatus]++;
     }
     if (currentStatus === "failed") suite.statusOverall = "failed";
-    else if (currentStatus === "skipped" && suite.statusOverall !== "failed")
+    else if (currentStatus === "flaky" && suite.statusOverall !== "failed")
+        suite.statusOverall = "flaky";
+    else if (currentStatus === "skipped" && suite.statusOverall !== "failed" && suite.statusOverall !== "flaky")
       suite.statusOverall = "skipped";
   });
   return Array.from(suitesMap.values());
@@ -1656,6 +1678,10 @@ function generateSuitesWidget(suitesData) {
                 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>
                 ${suite.failed}
               </span>
+              <span class="stat-pill flaky" title="Flaky">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>
+                  ${suite.flaky || 0}
+              </span>
               <span class="stat-pill skipped" title="Skipped">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>
                  ${suite.skipped}
@@ -2060,6 +2086,7 @@ function generateSeverityDistributionChart(results) {
   const data = {
     passed: [0, 0, 0, 0, 0],
     failed: [0, 0, 0, 0, 0],
+    flaky: [0, 0, 0, 0, 0],
     skipped: [0, 0, 0, 0, 0],
   };
 
@@ -2078,6 +2105,8 @@ function generateSeverityDistributionChart(results) {
       status === "interrupted"
     ) {
       data.failed[index]++;
+    } else if (status === "flaky") {
+        data.flaky[index]++;
     } else {
       data.skipped[index]++;
     }
@@ -2091,6 +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: "#00ccd3" },
     { name: "Skipped", data: data.skipped, color: "var(--warning-color)" },
   ];
 
@@ -2204,21 +2234,27 @@ function generateHTML(reportData, trendData = null) {
     return p.replace(new RegExp(`^${DEFAULT_OUTPUT_DIR}[\\\\/]`), "");
   };
 
-  const totalTestsOr1 = runSummary.totalTests || 1;
-  const passPercentage = Math.round((runSummary.passed / totalTestsOr1) * 100);
-  const failPercentage = Math.round((runSummary.failed / totalTestsOr1) * 100);
-  const skipPercentage = Math.round(
-    ((runSummary.skipped || 0) / totalTestsOr1) * 100,
-  );
+
   const avgTestDuration =
     runSummary.totalTests > 0
       ? formatDuration(runSummary.duration / runSummary.totalTests)
       : "0.0s";
 
+  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);
@@ -2227,19 +2263,30 @@ function generateHTML(reportData, trendData = null) {
   let calculatedPassed = 0;
   let calculatedFailed = 0;
   let calculatedSkipped = 0;
+  let calculatedFlaky = 0;
   let calculatedTotal = 0;
 
   (results || []).forEach(test => {
       calculatedTotal++;
-      // If retries exist and final_status is present, use it. Otherwise use test.status.
-      const statusToUse = (test.retryHistory && test.retryHistory.length > 0 && test.final_status) 
-          ? test.final_status 
-          : test.status;
+      // New Logic: If outcome is 'flaky', it overrides everything.
+      let statusToUse = test.status;
+      if (test.outcome === 'flaky') {
+        statusToUse = 'flaky';
+      } else if (test.status === 'flaky') { 
+         // Just in case outcome wasn't set but status was (unlikely with new reporter)
+         statusToUse = 'flaky';
+      } else if (test.retryHistory && test.retryHistory.length > 0 && test.final_status) {
+        statusToUse = test.final_status;
+      }
+      
+      // Update test status in place for charts
+      test.status = statusToUse;
       
       const s = String(statusToUse).toLowerCase();
       if (s === 'passed') calculatedPassed++;
       else if (s === 'skipped') calculatedSkipped++;
-      else calculatedFailed++; // Treat everything else as failed for simplicity, or add specific checks
+      else if (s === 'flaky') calculatedFlaky++;
+      else calculatedFailed++; // failed, timedout, interrupted
   });
 
   // Override runSummary counts with our calculated ones if results exist
@@ -2247,9 +2294,18 @@ function generateHTML(reportData, trendData = null) {
       runSummary.passed = calculatedPassed;
       runSummary.failed = calculatedFailed;
       runSummary.skipped = calculatedSkipped;
+      runSummary.flaky = calculatedFlaky;
       runSummary.totalTests = calculatedTotal;
   }
 
+  const totalTestsOr1 = runSummary.totalTests || 1;
+  const passPercentage = Math.round((runSummary.passed / totalTestsOr1) * 100);
+  const failPercentage = Math.round((runSummary.failed / totalTestsOr1) * 100);
+  const skipPercentage = Math.round(
+    ((runSummary.skipped || 0) / totalTestsOr1) * 100,
+  );
+  const flakyPercentage = Math.round(((runSummary.flaky || 0) / totalTestsOr1) * 100);
+
 
   // Calculate browser distribution
   const browserStats = (results || []).reduce((acc, test) => {
@@ -2284,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>";
@@ -2381,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; 
@@ -2654,7 +2711,7 @@ function generateHTML(reportData, trendData = null) {
           ? test.final_status 
           : test.status;
 
-       const outcomeBadge = (test.outcome) 
+       const outcomeBadge = (test.outcome && test.outcome !== 'flaky') 
           ? `<span class="outcome-badge ${test.outcome}">${test.outcome}</span>` 
           : '';
 
@@ -2747,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;
@@ -2970,12 +3028,17 @@ function generateHTML(reportData, trendData = null) {
           }
         }
         
+        
+        .stat-pill.flaky { color: #4b5563; }
+
         .dashboard-grid { 
           display: grid; 
           grid-template-columns: repeat(4, 1fr); 
           gap: 0;
           margin: 0 0 40px 0;
         }
+        .stats-pill.failed { color: var(--danger-dark); }
+        .stats-pill.flaky { color: #4b5563; }
         .browser-breakdown {
           display: flex;
           flex-direction: column;
@@ -3420,12 +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: #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(0, 204, 211, 0.05); }
+        .summary-card.flaky-status:hover { 
+          background: rgba(0, 204, 211, 0.15); 
+          box-shadow: 0 4px 12px rgba(0, 204, 211, 0.2);
+        }
+        .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 { 
@@ -3525,6 +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: #00ccd3; }
         .suite-card.status-skipped::before { background: var(--warning-color); }
         
         /* Outcome Badge */
@@ -3540,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 {
@@ -3570,8 +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: #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: rgba(234, 179, 8, 0.1); color: var(--warning-dark); border: 1px solid rgba(234, 179, 8, 0.2); }
+        .status-flaky { background-color: rgba(0, 204, 211, 0.1); color: #00ccd3; border: 1px solid #00ccd3; }
 
         .browser-tag {
           font-size: 0.8em;
@@ -3623,6 +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: #00ccd3; }
         .stat-pill.skipped { color: var(--warning-dark); }
         .filters {
           display: flex;
@@ -3787,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;
@@ -4496,14 +4569,16 @@ function generateHTML(reportData, trendData = null) {
                 <div class="summary-card status-skipped"><h3>Skipped</h3><div class="value">${
                   runSummary.skipped || 0
                 }</div><div class="trend-percentage">${skipPercentage}%</div></div>
-                <div class="summary-card"><h3>Avg. Test Time</h3><div class="value">${avgTestDuration}</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 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 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;">
@@ -4533,6 +4608,7 @@ function generateHTML(reportData, trendData = null) {
                   [
                     { label: "Passed", value: runSummary.passed },
                     { label: "Failed", value: runSummary.failed },
+                    { label: "Flaky", value: runSummary.flaky || 0 },
                     { label: "Skipped", value: runSummary.skipped || 0 },
                   ],
                   400,
@@ -4550,7 +4626,7 @@ function generateHTML(reportData, trendData = null) {
         <div id="test-runs" class="tab-content">
             <div class="filters">
                 <input type="text" id="filter-name" placeholder="Filter by test name/path..." style="border-color: black; border-style: outset;">
-                <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="skipped">Skipped</option></select>
+                <select id="filter-status"><option value="">All Statuses</option><option value="passed">Passed</option><option value="failed">Failed</option><option value="flaky">Flaky</option><option value="skipped">Skipped</option></select>
                 <select id="filter-browser"><option value="">All Browsers</option>${Array.from(
                   new Set(
                     (results || []).map((test) => test.browser || "unknown"),
@@ -5308,6 +5384,7 @@ async function main() {
           passed: histRunReport.run.passed,
           failed: histRunReport.run.failed,
           skipped: histRunReport.run.skipped || 0,
+          flaky: histRunReport.run.flaky || (histRunReport.results ? histRunReport.results.filter(r => r.status === 'flaky' || r.outcome === 'flaky').length : 0),
         });
 
         if (histRunReport.results && Array.isArray(histRunReport.results)) {