Update stats to show real metrics

- Changed 'Jobs Processed Today' to 'Jobs Queued' (tracks session jobs)
- Changed 'Avg Response Time' to 'Results Received' (tracks SSE results)
- Added client-side counters that increment on actual events
- Removed fake random number generation
- Stats now show meaningful, real-time data

index.html

@@ -55,12 +55,12 @@
 
         <div class="stats-live">
             <div class="stat-item">
-                <span class="stat-label">Jobs Processed Today:</span>
-                <span class="stat-value" id="jobs-today">Loading...</span>
+                <span class="stat-label">Jobs Queued:</span>
+                <span class="stat-value" id="jobs-queued">0</span>
             </div>
             <div class="stat-item">
-                <span class="stat-label">Avg Response Time:</span>
-                <span class="stat-value">~1.2s</span>
+                <span class="stat-label">Results Received:</span>
+                <span class="stat-value" id="results-received">0</span>
             </div>
         </div>
     </div>

script.js

@@ -3,6 +3,8 @@ const SSE_URL = 'https://maxtheweb.com/events';
 
 let eventSource = null;
 let currentJobId = null;
+let jobsQueued = 0;
+let resultsReceived = 0;
 
 // Initialize SSE connection
 function initSSE() {
@@ -65,6 +67,10 @@ function displayResult(data) {
         noResults.remove();
     }
 
+    // Increment results received counter
+    resultsReceived++;
+    document.getElementById('results-received').textContent = resultsReceived;
+
     const resultDiv = document.createElement('div');
     resultDiv.className = 'result-item ' + (data.status || 'ok');
 
@@ -143,6 +149,10 @@ document.getElementById('queue-form').addEventListener('submit', async (e) => {
             const jobId = jobIdMatch ? jobIdMatch[1] : 'Processing';
             currentJobId = jobId;
 
+            // Increment jobs queued counter
+            jobsQueued++;
+            document.getElementById('jobs-queued').textContent = jobsQueued;
+
             responseDiv.className = 'response-box success';
             responseDiv.innerHTML = `
                 <div class="success-icon">✓</div>
@@ -152,9 +162,6 @@ document.getElementById('queue-form').addEventListener('submit', async (e) => {
                     Results will appear below in real-time...
                 </div>
             `;
-
-            // Update jobs counter
-            updateJobsCount();
         } else {
             throw new Error(`Server responded with ${response.status}`);
         }
@@ -175,18 +182,6 @@ document.getElementById('queue-form').addEventListener('submit', async (e) => {
     }
 });
 
-// Update jobs count
-async function updateJobsCount() {
-    try {
-        // For now, simulate with random number
-        // In production, this would hit your /stats endpoint
-        const count = Math.floor(Math.random() * 100) + 200;
-        document.getElementById('jobs-today').textContent = count.toLocaleString();
-    } catch (error) {
-        document.getElementById('jobs-today').textContent = '247';
-    }
-}
-
 // Initialize on load
 window.addEventListener('load', () => {
     // Pre-fill with a demo example
@@ -195,10 +190,6 @@ window.addEventListener('load', () => {
 
     // Start SSE connection
     initSSE();
-
-    // Update jobs count
-    updateJobsCount();
-    setInterval(updateJobsCount, 30000); // Update every 30 seconds
 });
 
 // Cleanup on page unload