Add countdown timer for pause between patterns

- Display remaining pause time in player preview modal
- Show countdown with MM:SS format when pausing between patterns
- Auto-hide countdown when not pausing
- Backend already tracks pause_time_remaining via WebSocket
- Countdown updates every second during pattern playlist execution

static/js/base.js

@@ -871,7 +871,22 @@ function syncModalControls(status) {
             modalNextPattern.textContent = 'None';
         }
     }
-    
+
+    // Pause countdown timer
+    const modalPauseCountdown = document.getElementById('modal-pause-countdown');
+    const modalPauseTime = document.getElementById('modal-pause-time');
+    if (modalPauseCountdown && modalPauseTime) {
+        // Show countdown if we're pausing between patterns (pause_time_remaining > 0)
+        if (status.pause_time_remaining && status.pause_time_remaining > 0) {
+            const minutes = Math.floor(status.pause_time_remaining / 60);
+            const seconds = Math.floor(status.pause_time_remaining % 60);
+            modalPauseTime.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+            modalPauseCountdown.classList.remove('hidden');
+        } else {
+            modalPauseCountdown.classList.add('hidden');
+        }
+    }
+
     // Pause button
     const modalPauseBtn = document.getElementById('modal-pause-button');
     if (modalPauseBtn) {

templates/base.html

@@ -453,8 +453,14 @@
                     </div>
                     <div class="flex items-center justify-between">
                         <div class="text-base text-gray-500">
-                            Next:
-                            <span class="text-gray-700 font-medium" id="modal-next-pattern">None</span>
+                            <div id="modal-pause-countdown" class="hidden mb-1">
+                                <span class="material-icons text-sm align-middle mr-1">schedule</span>
+                                Pause: <span class="text-blue-600 dark:text-blue-400 font-semibold" id="modal-pause-time">--</span>
+                            </div>
+                            <div id="modal-next-container">
+                                Next:
+                                <span class="text-gray-700 font-medium" id="modal-next-pattern">None</span>
+                            </div>
                         </div>
                         <div class="flex items-center gap-3 text-sm">
                             <span class="text-gray-500">Speed:</span>