fix: Update summary chart to reflect test results

Author: ludovicianul

src/main/resources/scripts.js

@@ -48,7 +48,7 @@ function initializeChart() {
         data: {
             labels: ['Success', 'Warnings', 'Errors'],
             datasets: [{
-                data: [266, 8, 2],
+                data: [totalScs, totalWrn, totalErr],
                 backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                 borderWidth: 0,
                 cutout: '70%'
@@ -250,6 +250,29 @@ function copyReplayCommand(event) {
     });
 }
 
+// ==========================================
+// SUCCESS RATE STYLING
+// ==========================================
+
+/**
+ * Update success rate styling based on percentage value
+ */
+function updateSuccessRateStyles() {
+    document.querySelectorAll('.success-rate-compact').forEach(element => {
+        const percentage = parseFloat(element.getAttribute('data-percentage'));
+        
+        // Remove all existing state classes
+        element.classList.remove('warning', 'error');
+        
+        // Add appropriate class based on percentage
+        if (percentage < 50) {
+            element.classList.add('error');
+        } else if (percentage < 95) {
+            element.classList.add('warning');
+        }
+    });
+}
+
 // ==========================================
 // INITIALIZATION
 // ==========================================
@@ -258,8 +281,11 @@ function copyReplayCommand(event) {
  * Initialize all functionality when DOM is loaded
  */
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize theme
+    // Initialize theme on page load
     initializeTheme();
+
+    // Initialize success rate styling
+    updateSuccessRateStyles();
 
     // Initialize chart (landing page only)
     initializeChart();

src/main/resources/styles.css

@@ -245,23 +245,53 @@ body.dark-theme .stat-item.primary .stat-value { color: #BC8CFF; }
     align-items: center;
     text-align: center;
     padding: 0.5rem 1rem;
-    background: rgba(16, 185, 129, 0.1);
     border-radius: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+/* Success state (green) - above 75% */
+.success-rate-compact {
+    background: rgba(16, 185, 129, 0.1);
     border: 1px solid rgba(16, 185, 129, 0.2);
 }
 
+.success-rate-compact .rate-value,
+.success-rate-compact .rate-label {
+    color: var(--success);
+}
+
+/* Warning state (orange) - between 50% and 75% */
+.success-rate-compact.warning {
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.success-rate-compact.warning .rate-value,
+.success-rate-compact.warning .rate-label {
+    color: #f59e0b;
+}
+
+/* Error state (red) - below 50% */
+.success-rate-compact.error {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.success-rate-compact.error .rate-value,
+.success-rate-compact.error .rate-label {
+    color: #ef4444;
+}
+
 .success-rate-compact .rate-value {
     font-size: 1.25rem;
     font-weight: 700;
-    color: var(--success);
     font-family: 'JetBrains Mono', monospace;
     line-height: 1;
 }
 
 .success-rate-compact .rate-label {
     font-size: 0.75rem;
     font-weight: 500;
-    color: var(--success);
     margin-top: 0.25rem;
 }
 

src/main/resources/summary.mustache

@@ -59,7 +59,7 @@
                         <span class="stat-label">Failed</span>
                     </div>
                     <div class="stat-divider"></div>
-                    <div class="success-rate-compact">
+                    <div class="success-rate-compact" data-success="{{SUCCESS_PERCENTAGE}}" data-percentage="{{SUCCESS_PERCENTAGE}}">
                         <span class="rate-value">{{SUCCESS_PERCENTAGE}}%</span>
                         <span class="rate-label">Success</span>
                     </div>