feat&fix: add score display banner and update task status with animation

monitor/static/index.css

@@ -66,6 +66,65 @@ h2 { color: #0056b3; margin-top: 32px; font-size: 1.6em; }
 .stat-card:nth-child(2):hover { background: linear-gradient(135deg, #e6f9ea, #d4f7db); }
 .stat-card:nth-child(3) i { color: #dc3545; } /* Error - Red */
 .stat-card:nth-child(3):hover { background: linear-gradient(135deg, #feeaec, #fcd8db); }
+.stat-card:nth-child(4) i { color: #007bff; } /* Total - Blue */
+.stat-card:nth-child(4):hover { background: linear-gradient(135deg, #f0f7ff, #e6f0fb); }
+
+/* Score Banner Styles */
+.score-banner {
+    border-radius: 10px;
+    margin: 20px 0 30px;
+    padding: 5px;
+    /* border: 2px solid rgba(255, 193, 7, 0.5); */
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    /* animation: scoreBannerGlow 3s infinite alternate; */
+}
+
+.score-banner:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+.score-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+}
+
+.score-banner i {
+    font-size: 2.2em;
+    color: #ffc107;
+    margin-right: 15px;
+    /* animation: rotateIcon 6s linear infinite; */
+    transform-origin: center;
+}
+
+.score-label {
+    font-size: 1.3em;
+    font-weight: 600;
+    color: #b28704;
+    margin-right: 15px;
+}
+
+.score-value {
+    font-size: 2em;
+    font-weight: 700;
+    background: linear-gradient(90deg, #ff8f00, #ffc107);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
 
 .stat-card span {
     font-size: 2em;

monitor/static/index.js

@@ -42,6 +42,15 @@ function fetchTasksForRefresh() {
 
 // New function: only update task status, do not re-render the entire list
 function updateTaskStatus(data) {
+    // Add pulse animation to score banner when refreshing
+    const scoreBanner = document.querySelector('.score-banner');
+    if (scoreBanner) {
+        scoreBanner.classList.add('refreshing');
+        setTimeout(() => {
+            scoreBanner.classList.remove('refreshing');
+        }, 1000);
+    }
+    
     // Update the status display of each task
     Object.entries(data).forEach(([taskType, tasks]) => {
         tasks.forEach(task => {
@@ -167,6 +176,7 @@ function updateStatistics(data) {
     let activeTasks = 0;
     let completedTasks = 0;
     let errorTasks = 0;
+    let totalScore = 0;
     
     Object.entries(data).forEach(([taskType, tasks]) => {
         totalTasks += tasks.length;
@@ -175,6 +185,17 @@ function updateStatistics(data) {
                 activeTasks++;
             } else if (task.status.status === 'Done' || task.status.status === 'Done (Message Exit)' || task.status.status === 'Done (Max Steps)') {
                 completedTasks++;
+                // Calculate score if task is completed
+                if (task.status.result) {
+                    try {
+                        const score = parseFloat(task.status.result);
+                        if (!isNaN(score) && score >= 0 && score <= 1) {
+                            totalScore += score;
+                        }
+                    } catch (e) {
+                        console.log(`Could not parse score for task: ${task.id}`);
+                    }
+                }
             } else if (task.status.status === 'Error') {
                 errorTasks++;
             }
@@ -186,6 +207,15 @@ function updateStatistics(data) {
     document.getElementById('completed-tasks').textContent = completedTasks;
     document.getElementById('error-tasks').textContent = errorTasks;
     
+    // Update score display with formatted score
+    const scoreDisplay = document.getElementById('score-display');
+    if (completedTasks > 0) {
+        const scoreFormatted = totalScore.toFixed(2);
+        scoreDisplay.innerHTML = `<span>${scoreFormatted}</span> / <span>${completedTasks}</span>`;
+    } else {
+        scoreDisplay.innerHTML = '<span>0.00</span> / <span>0</span>';
+    }
+    
     // Highlight the currently selected statistics card
     document.querySelectorAll('.stat-card').forEach(card => card.classList.remove('selected'));
     if (currentFilter === 'all') {

monitor/templates/index.html

@@ -14,6 +14,16 @@
 <body>
     <div class="main-container">
         <h1>OSWorld Monitor <span class="system-status online">System Online</span></h1>
+        
+        <!-- Score Display Banner -->
+        <div class="score-banner">
+            <div class="score-content">
+                <i class="fas fa-star"></i>
+                <span class="score-label">Score:</span>
+                <span id="score-display" class="score-value">Loading...</span>
+            </div>
+        </div>
+        
         <div class="dashboard-stats">
             <div class="stat-card">
                 <i class="fas fa-running"></i>