feat: zmigrowano panel webowy na WebSockets w czasie rzeczywistym

static/app.js

@@ -9,6 +9,10 @@ let localElapsed = 0;
 let totalDuration = 0;
 let isPlaying = false;
 
+// WebSocket Variables
+let ws = null;
+let wsConnectedOnce = false;
+
 // DOM Elements
 const statusDot = document.getElementById('status-dot');
 const statusText = document.getElementById('status-text');
@@ -45,18 +49,58 @@ const timeElapsed = document.getElementById('time-elapsed');
 const timeTotal = document.getElementById('time-total');
 const progressBarFill = document.getElementById('progress-bar-fill');
 
+// Connect to WebSocket server for real-time events
+function connectWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws`;
+    
+    console.log(`Próba połączenia z WebSocket: ${wsUrl}`);
+    ws = new WebSocket(wsUrl);
+    
+    ws.onopen = () => {
+        console.log('Połączono z WebSocket');
+        if (wsConnectedOnce) {
+            showToast('Połączenie przywrócone!', 'success');
+        } else {
+            showToast('Połączono w czasie rzeczywistym!', 'success');
+            wsConnectedOnce = true;
+        }
+    };
+    
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            
+            // Only update UI if we are not currently dragging queue items
+            if (!isDragging) {
+                currentStatus = data;
+                updateUI(data);
+            }
+        } catch (err) {
+            console.error('Błąd parsowania danych z WS:', err);
+        }
+    };
+    
+    ws.onclose = () => {
+        console.log('Połączenie WebSocket zamknięte. Próba ponownego połączenia...');
+        statusDot.className = 'status-indicator offline';
+        statusText.textContent = 'Rozłączono (brak połączenia z WS)';
+        
+        // Reconnect after 3 seconds
+        setTimeout(connectWebSocket, 3000);
+    };
+    
+    ws.onerror = (err) => {
+        console.error('Błąd WebSocket:', err);
+        ws.close();
+    };
+}
+
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
-    // Initial fetch
-    fetchStatus();
+    // Connect to WebSocket instead of polling
+    connectWebSocket();
     
-    // Start Poller (every 1 second)
-    setInterval(() => {
-        if (!isDragging) {
-            fetchStatus();
-        }
-    }, 1000);
-
     // Start Smooth Progress Tracker (every 100ms)
     setInterval(() => {
         if (isPlaying && currentStatus && currentStatus.current) {