Implement progress panel for test execution tracking

- Added a progress panel to display real-time test execution status, including current test, progress percentage, and elapsed time.
- Introduced styles for the progress panel and its components to enhance visibility and user experience.
- Implemented JavaScript functions to manage progress tracking, including starting and stopping timers, and updating the panel with test results.
- Ensured the progress panel is responsive to test selections and updates dynamically during test execution.

Author: jelveh

src/puter-js/test/run.html

@@ -117,6 +117,11 @@
             font-weight: bold;
         }
 
+        /* Adjust sticky headings when progress panel is visible */
+        #progress-panel.show ~ #tests h2 {
+            top: 158px; /* 78px + 80px to account for progress panel */
+        }
+        
         /* Style for h2 checkboxes */
         #tests h2 input[type="checkbox"] {
             margin-right: 18px;
@@ -136,10 +141,193 @@
             margin-right: 10px; 
             font-size: 20px;
         }
+        
+        /* Progress panel styles */
+        #progress-panel {
+            position: fixed;
+            top: 78px;
+            left: 0;
+            right: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 20px;
+            z-index: 999;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            transform: translateY(-100%);
+            transition: transform 0.3s ease-in-out;
+            border-bottom: 3px solid #4c84af;
+        }
+        
+        #progress-panel.show {
+            transform: translateY(0);
+        }
+        
+        #progress-panel.show ~ #tests {
+            padding-top: 120px !important;
+        }
+        
+        .progress-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .progress-left {
+            flex: 1;
+        }
+        
+        .progress-right {
+            display: flex;
+            gap: 30px;
+            align-items: center;
+        }
+        
+        .progress-stats {
+            display: flex;
+            gap: 20px;
+            margin-top: 8px;
+        }
+        
+        .progress-stat {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-width: 80px;
+        }
+        
+        .progress-stat-number {
+            font-size: 24px;
+            font-weight: bold;
+            line-height: 1;
+        }
+        
+        .progress-stat-label {
+            font-size: 11px;
+            opacity: 0.9;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .current-test {
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 5px;
+        }
+        
+        .progress-bar-container {
+            background: rgba(255,255,255,0.2);
+            border-radius: 10px;
+            height: 8px;
+            overflow: hidden;
+            margin-top: 10px;
+        }
+        
+        .progress-bar {
+            background: linear-gradient(90deg, #00c851 0%, #00ff88 100%);
+            height: 100%;
+            border-radius: 10px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        
+        .progress-percentage {
+            font-size: 28px;
+            font-weight: bold;
+            color: #fff;
+        }
+        
+        .stat-passed {
+            color: #00ff88;
+        }
+        
+        .stat-failed {
+            color: #ff6b6b;
+        }
+        
+        .stat-total {
+            color: #fff;
+        }
+        
+        .elapsed-time {
+            font-size: 12px;
+            opacity: 0.8;
+            margin-top: 2px;
+        }
     </style>
     <script>
     document.addEventListener("DOMContentLoaded", () => {
 
+        // Progress tracking variables
+        let testProgress = {
+            total: 0,
+            completed: 0,
+            passed: 0,
+            failed: 0,
+            startTime: null,
+            currentTest: '',
+            timerInterval: null
+        };
+
+        // Progress panel functions
+        function showProgressPanel() {
+            $('#progress-panel').addClass('show');
+            $('#run-tests').prop('disabled', true).text('Running Tests...');
+            startProgressTimer();
+        }
+
+        function hideProgressPanel() {
+            $('#progress-panel').removeClass('show');
+            $('#run-tests').prop('disabled', false).text('Run Tests');
+            stopProgressTimer();
+        }
+
+        function updateProgressPanel() {
+            const { total, completed, passed, failed, currentTest } = testProgress;
+            const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+            
+            $('#current-test').text(currentTest || 'Preparing tests...');
+            $('#progress-bar').css('width', percentage + '%');
+            $('#progress-percentage').text(percentage + '%');
+            $('#passed-count').text(passed);
+            $('#failed-count').text(failed);
+            $('#total-count').text(total);
+        }
+
+        function startProgressTimer() {
+            testProgress.startTime = Date.now();
+            testProgress.timerInterval = setInterval(() => {
+                const elapsed = Math.floor((Date.now() - testProgress.startTime) / 1000);
+                $('#elapsed-time').text(`Elapsed: ${elapsed}s`);
+            }, 1000);
+        }
+
+        function stopProgressTimer() {
+            if (testProgress.timerInterval) {
+                clearInterval(testProgress.timerInterval);
+                testProgress.timerInterval = null;
+            }
+        }
+
+        function resetProgress() {
+            testProgress.total = 0;
+            testProgress.completed = 0;
+            testProgress.passed = 0;
+            testProgress.failed = 0;
+            testProgress.currentTest = '';
+            testProgress.startTime = null;
+        }
+
+        function getSelectedTestsCount() {
+            return $('.test-checkbox:checked').length;
+        }
+
+        // Small delay to make progress visible
+        function delay(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
         window.pass = function(msg) {
             // $('#tests').append(`<p style="color:green;">${msg}</p>`);
         }
@@ -341,16 +529,31 @@
         window.runSingleTest = runSingleTest;
 
         async function runTests() {
+            // Reset and initialize progress tracking
+            resetProgress();
+            testProgress.total = getSelectedTestsCount();
+            
+            // Show progress panel
+            showProgressPanel();
+            updateProgressPanel();
+            
+            // Clear previous test results
+            $('.test-container').css('background-color', '');
+            $('.test-container pre').remove();
+            
             // go through fsTests and run each test
             for (let i = 0; i < fsTests.length; i++) {
                 if (document.getElementById(`fsTests${i}`).checked) {
+                    const testInfo = getTestInfo(fsTests[i]);
+                    testProgress.currentTest = `FileSystem: ${testInfo.name}`;
+                    updateProgressPanel();
+                    
                     try{
                         await executeTest(fsTests[i]);
                         // make this test's container green
                         $(`#fsTests-container-${i}`).css('background-color', '#85e085');
-
+                        testProgress.passed++;
                     } catch (e) {
-                        const testInfo = getTestInfo(fsTests[i]);
                         console.error('FS Test failed:', testInfo.name, e);
                         // make this test's container red
                         $(`#fsTests-container-${i}`).css('background-color', '#ffbfbf');
@@ -360,19 +563,29 @@
                             errorMessage += '\n\nOriginal Error:\n' + JSON.stringify(e.originalError, null, 2);
                         }
                         $(`#fsTests-container-${i}`).append(`<pre style="color:#c00000; white-space: pre-wrap; font-size: 12px; margin: 5px 0; padding: 10px; background-color: #f8f8f8; border-radius: 3px;">${errorMessage}</pre>`);
+                        testProgress.failed++;
                     }
+                    
+                    testProgress.completed++;
+                    updateProgressPanel();
+                    
+                    // Small delay to make progress visible
+                    await delay(100);
                 }
             }
 
             for (let i = 0; i < kvTests.length; i++) {
                 if (document.getElementById(`kvTests${i}`).checked) {
+                    const testInfo = getTestInfo(kvTests[i]);
+                    testProgress.currentTest = `Key-Value Store: ${testInfo.name}`;
+                    updateProgressPanel();
+                    
                     try{
                         await executeTest(kvTests[i]);
                         // make this test's container green
                         $(`#kvTests-container-${i}`).css('background-color', '#85e085');
-
+                        testProgress.passed++;
                     } catch (e) {
-                        const testInfo = getTestInfo(kvTests[i]);
                         console.error('KV Test failed:', testInfo.name, e);
                         // make this test's container red
                         $(`#kvTests-container-${i}`).css('background-color', '#ff8484');
@@ -382,19 +595,29 @@
                             errorMessage += '\n\nOriginal Error:\n' + JSON.stringify(e.originalError, null, 2);
                         }
                         $(`#kvTests-container-${i}`).append(`<pre style="color:red; white-space: pre-wrap; font-size: 12px; margin: 5px 0; padding: 10px; background-color: #f8f8f8; border-radius: 3px;">${errorMessage}</pre>`);
+                        testProgress.failed++;
                     }
+                    
+                    testProgress.completed++;
+                    updateProgressPanel();
+                    
+                    // Small delay to make progress visible
+                    await delay(100);
                 }
             }
 
             for (let i = 0; i < aiTests.length; i++) {
                 if (document.getElementById(`aiTests${i}`).checked) {
+                    const testInfo = getTestInfo(aiTests[i]);
+                    testProgress.currentTest = `AI: ${testInfo.name}`;
+                    updateProgressPanel();
+                    
                     try{
                         await executeTest(aiTests[i]);
                         // make this test's container green
                         $(`#aiTests-container-${i}`).css('background-color', '#85e085');
-
+                        testProgress.passed++;
                     } catch (e) {
-                        const testInfo = getTestInfo(aiTests[i]);
                         console.error('AI Test failed:', testInfo.name, e);
                         // make this test's container red
                         $(`#aiTests-container-${i}`).css('background-color', '#ff8484');
@@ -404,9 +627,26 @@
                             errorMessage += '\n\nOriginal Error:\n' + JSON.stringify(e.originalError, null, 2);
                         }
                         $(`#aiTests-container-${i}`).append(`<pre style="color:red; white-space: pre-wrap; font-size: 12px; margin: 5px 0; padding: 10px; background-color: #f8f8f8; border-radius: 3px;">${errorMessage}</pre>`);
+                        testProgress.failed++;
                     }
+                    
+                    testProgress.completed++;
+                    updateProgressPanel();
+                    
+                    // Small delay to make progress visible
+                    await delay(100);
                 }
             }
+            
+            // Show completion message
+            testProgress.currentTest = `Complete! ${testProgress.passed} passed, ${testProgress.failed} failed`;
+            updateProgressPanel();
+            
+            // Stop the elapsed timer but keep panel visible
+            stopProgressTimer();
+            
+            // Re-enable the run tests button
+            $('#run-tests').prop('disabled', false).text('Run Tests');
         }
 
         $('#run-tests').click(() => {
@@ -467,6 +707,36 @@
             <button id="run-tests" style="margin-right: 30px;">Run Tests</button>
         </div>
     </nav>
+    
+    <div id="progress-panel">
+        <div class="progress-content">
+            <div class="progress-left">
+                <div class="current-test" id="current-test">Preparing tests...</div>
+                <div class="progress-bar-container">
+                    <div class="progress-bar" id="progress-bar"></div>
+                </div>
+                <div class="elapsed-time" id="elapsed-time">Elapsed: 0s</div>
+            </div>
+            <div class="progress-right">
+                <div class="progress-stats">
+                    <div class="progress-stat">
+                        <div class="progress-stat-number stat-passed" id="passed-count">0</div>
+                        <div class="progress-stat-label">Passed</div>
+                    </div>
+                    <div class="progress-stat">
+                        <div class="progress-stat-number stat-failed" id="failed-count">0</div>
+                        <div class="progress-stat-label">Failed</div>
+                    </div>
+                    <div class="progress-stat">
+                        <div class="progress-stat-number stat-total" id="total-count">0</div>
+                        <div class="progress-stat-label">Total</div>
+                    </div>
+                </div>
+                <div class="progress-percentage" id="progress-percentage">0%</div>
+            </div>
+        </div>
+    </div>
+    
     <div id="tests"></div>
 </body>
 </html>