new ui 7

apps/ui/templates/device.html

@@ -301,9 +301,6 @@
         let deviceState = {};
         let roomName = '';
 
-        // SSE connection
-        let eventSource = null;
-
         // Device type icons
         const deviceIcons = {
             'light': '💡',

apps/ui/templates/room.html

@@ -227,9 +227,6 @@
         // Device states
         const deviceStates = {};
 
-        // SSE connection
-        let eventSource = null;
-
         async function loadRoom() {
             const loading = document.getElementById('loading');
             const grid = document.getElementById('devices-grid');
@@ -411,43 +408,27 @@
 
         function connectRealtime() {
             try {
-                eventSource = new EventSource(window.apiClient.api('/realtime'));
-
-                eventSource.onmessage = (event) => {
-                    try {
-                        const data = JSON.parse(event.data);
+                // Use API client's connectRealtime method
+                window.apiClient.connectRealtime((event) => {
+                    // Update device state
+                    if (event.device_id && event.state) {
+                        deviceStates[event.device_id] = event.state;
                         
-                        // Update device state
-                        if (data.device_id && data.payload) {
-                            deviceStates[data.device_id] = data.payload;
-                            
-                            // Update card if visible
-                            const card = document.querySelector(`[data-device-id="${data.device_id}"]`);
-                            if (card) {
-                                const stateDiv = card.querySelector('.device-state');
-                                window.apiClient.getDevices().then(devices => {
-                                    const device = window.apiClient.findDevice(devices, data.device_id);
-                                    if (device) {
-                                        updateDeviceCardState(stateDiv, device);
-                                    }
-                                });
-                            }
+                        // Update card if visible
+                        const card = document.querySelector(`[data-device-id="${event.device_id}"]`);
+                        if (card) {
+                            const stateDiv = card.querySelector('.device-state');
+                            window.apiClient.getDevices().then(devices => {
+                                const device = window.apiClient.findDevice(devices, event.device_id);
+                                if (device) {
+                                    updateDeviceCardState(stateDiv, device);
+                                }
+                            });
                         }
-                    } catch (e) {
-                        console.warn('Failed to parse SSE event:', e);
                     }
-                };
-
-                eventSource.onerror = (error) => {
+                }, (error) => {
                     console.error('SSE connection error:', error);
-                    // Auto-reconnect after 5 seconds
-                    setTimeout(() => {
-                        if (eventSource) {
-                            eventSource.close();
-                            connectRealtime();
-                        }
-                    }, 5000);
-                };
+                });
 
             } catch (error) {
                 console.error('Failed to connect to realtime events:', error);