Enhance Nova API state management in frontend

- Introduced a new state tracking mechanism for the Nova API to minimize unnecessary UI updates.
- Updated connection handling to only refresh UI elements when there are changes in the Nova API state.
- Improved error detection and notification for Nova connection issues, providing clearer feedback to users.
- Refactored badge visibility and controller indicators to reflect the current Nova API state more accurately.
- Enhanced mode text updates based on connection status, ensuring users receive timely information about the system's state.

frontend/index.html

@@ -1118,6 +1118,14 @@
         let currentHomePose = null;  // Store home pose from env data
         let currentJointPositions = null;  // Store latest joint positions from state stream
         let prevNovaConnected = null;  // Track previous Nova connection state for error detection
+        // Track previous Nova API state to avoid unnecessary UI updates
+        let prevNovaState = {
+            available: null,
+            enabled: null,
+            connected: null,
+            state_streaming: null,
+            ik: null
+        };
         function updateConnectionLabel(text) {
             if (connStatusText) {
                 connStatusText.innerText = text;
@@ -1510,15 +1518,25 @@
                             fetch('/nova-sim/api/v1/env')
                                 .then(r => r.json())
                                 .then(envData => {
+                                    envCache = envData;
                                     has_gripper = envData.has_gripper || false;
                                     control_mode = envData.control_mode || 'ik';
                                     if (envData.home_pose) {
                                         currentHomePose = envData.home_pose;
                                     }
+                                    // Update overlay tiles when robot changes
+                                    refreshOverlayTiles();
                                 });
                         }
                         if (data.scene && data.scene !== currentScene) {
                             currentScene = data.scene;
+                            // Update overlay tiles when scene changes (may have different camera feeds)
+                            fetch('/nova-sim/api/v1/env')
+                                .then(r => r.json())
+                                .then(envData => {
+                                    envCache = envData;
+                                    refreshOverlayTiles();
+                                });
                         }
 
                         // Handle both new and legacy client status formats
@@ -1622,84 +1640,119 @@
                                 }
                             }
 
-                            // Update Nova API controller status
+                            // Update Nova API controller status (only when values change)
                             if (data.nova_api) {
-                                const stateController = document.getElementById('nova_state_controller');
-                                const ikController = document.getElementById('nova_ik_controller');
-                                const badge = document.getElementById('nova_connection_badge');
-                                const badgeTitle = document.getElementById('nova_badge_title');
-                                const modeText = document.getElementById('nova_mode_text');
-                                setNovaToggleState(data.nova_api.available, data.nova_api.enabled);
-
-                                // Track Nova state streaming status
-                                novaStateStreaming = data.nova_api.state_streaming || false;
-
-                                // Detect Nova connection errors and show toast notifications
-                                const currentNovaConnected = data.nova_api.connected;
-                                if (prevNovaConnected !== null && prevNovaConnected !== currentNovaConnected) {
-                                    if (!currentNovaConnected && data.nova_api.enabled) {
-                                        // Connection was lost or failed to connect while Nova is enabled
-                                        showClientNotification({
-                                            message: 'Nova API connection lost. Check that Nova is running and accessible.',
-                                            status: 'error'
-                                        });
-                                    } else if (currentNovaConnected && data.nova_api.enabled) {
-                                        // Connection was restored
+                                const novaApi = data.nova_api;
+
+                                // Check if any Nova API state has changed
+                                const novaStateChanged =
+                                    prevNovaState.available !== novaApi.available ||
+                                    prevNovaState.enabled !== novaApi.enabled ||
+                                    prevNovaState.connected !== novaApi.connected ||
+                                    prevNovaState.state_streaming !== novaApi.state_streaming ||
+                                    prevNovaState.ik !== novaApi.ik;
+
+                                if (novaStateChanged) {
+                                    const stateController = document.getElementById('nova_state_controller');
+                                    const ikController = document.getElementById('nova_ik_controller');
+                                    const badge = document.getElementById('nova_connection_badge');
+                                    const badgeTitle = document.getElementById('nova_badge_title');
+                                    const modeText = document.getElementById('nova_mode_text');
+
+                                    // Only update toggle state if available or enabled changed
+                                    if (prevNovaState.available !== novaApi.available || prevNovaState.enabled !== novaApi.enabled) {
+                                        setNovaToggleState(novaApi.available, novaApi.enabled);
+                                    }
+
+                                    // Track Nova state streaming status
+                                    novaStateStreaming = novaApi.state_streaming || false;
+
+                                    // Detect Nova connection errors and show toast notifications
+                                    const currentNovaConnected = novaApi.connected;
+                                    if (prevNovaConnected !== null && prevNovaConnected !== currentNovaConnected) {
+                                        if (!currentNovaConnected && novaApi.enabled) {
+                                            // Connection was lost or failed to connect while Nova is enabled
+                                            showClientNotification({
+                                                message: 'Nova API connection lost. Check that Nova is running and accessible.',
+                                                status: 'error'
+                                            });
+                                        } else if (currentNovaConnected && novaApi.enabled) {
+                                            // Connection was restored
+                                            showClientNotification({
+                                                message: 'Nova API connection established.',
+                                                status: 'info'
+                                            });
+                                        }
+                                    }
+                                    // Also check for enabled but not connected state (initial error)
+                                    if (prevNovaConnected === null && novaApi.enabled && !currentNovaConnected) {
                                         showClientNotification({
-                                            message: 'Nova API connection established.',
-                                            status: 'info'
+                                            message: 'Nova API is enabled but not connected. Waiting for Nova to be ready...',
+                                            status: 'warning'
                                         });
                                     }
-                                }
-                                // Also check for enabled but not connected state (initial error)
-                                if (prevNovaConnected === null && data.nova_api.enabled && !currentNovaConnected) {
-                                    showClientNotification({
-                                        message: 'Nova API is enabled but not connected. Waiting for Nova to be ready...',
-                                        status: 'warning'
-                                    });
-                                }
-                                prevNovaConnected = currentNovaConnected;
+                                    prevNovaConnected = currentNovaConnected;
 
-                                if (data.nova_api.available) {
-                                    badge.style.display = 'block';
-                                } else {
-                                    badge.style.display = 'none';
-                                }
-                                badge.classList.toggle('connected', data.nova_api.enabled);
-                                badge.classList.toggle('disconnected', !data.nova_api.enabled);
+                                    // Update badge visibility and classes
+                                    if (badge) {
+                                        if (prevNovaState.available !== novaApi.available) {
+                                            badge.style.display = novaApi.available ? 'block' : 'none';
+                                        }
+                                        if (prevNovaState.enabled !== novaApi.enabled) {
+                                            badge.classList.toggle('connected', novaApi.enabled);
+                                            badge.classList.toggle('disconnected', !novaApi.enabled);
+                                        }
+                                    }
 
-                                const connectedColor = data.nova_api.connected ? 'var(--wb-success)' : 'var(--wb-highlight)';
-                                if (stateController) {
-                                    stateController.innerText = data.nova_api.state_streaming ? 'Nova API' : 'Internal';
-                                    stateController.style.color = connectedColor;
-                                }
-                                if (ikController) {
-                                    ikController.innerText = data.nova_api.ik ? 'Nova API' : 'Internal';
-                                    ikController.style.color = data.nova_api.ik ? 'var(--wb-success)' : 'var(--wb-highlight)';
-                                }
+                                    // Update controller indicators
+                                    const connectedColor = novaApi.connected ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                                    if (stateController && (prevNovaState.state_streaming !== novaApi.state_streaming || prevNovaState.connected !== novaApi.connected)) {
+                                        stateController.innerText = novaApi.state_streaming ? 'Nova API' : 'Internal';
+                                        stateController.style.color = connectedColor;
+                                    }
+                                    if (ikController && (prevNovaState.ik !== novaApi.ik)) {
+                                        ikController.innerText = novaApi.ik ? 'Nova API' : 'Internal';
+                                        ikController.style.color = novaApi.ik ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                                    }
 
-                                if (badgeTitle) {
-                                    if (data.nova_api.enabled) {
-                                        badgeTitle.innerText = data.nova_api.connected ? '🌐 Nova Connected' : '🌐 Nova Powering Up';
-                                    } else {
-                                        badgeTitle.innerText = '🌐 Nova Disabled';
+                                    // Update badge title
+                                    if (badgeTitle && (prevNovaState.enabled !== novaApi.enabled || prevNovaState.connected !== novaApi.connected)) {
+                                        if (novaApi.enabled) {
+                                            badgeTitle.innerText = novaApi.connected ? '🌐 Nova Connected' : '🌐 Nova Powering Up';
+                                        } else {
+                                            badgeTitle.innerText = '🌐 Nova Disabled';
+                                        }
                                     }
-                                }
 
-                                if (modeText) {
-                                    if (data.nova_api.connected) {
-                                        if (data.nova_api.state_streaming && data.nova_api.ik) {
-                                            modeText.innerText = 'Hybrid Mode';
-                                        } else if (data.nova_api.state_streaming) {
-                                            modeText.innerText = 'Digital Twin Mode';
-                                        } else if (data.nova_api.ik) {
-                                            modeText.innerText = 'Nova IK Mode';
+                                    // Update mode text
+                                    if (modeText) {
+                                        let newModeText = '';
+                                        if (novaApi.connected) {
+                                            if (novaApi.state_streaming && novaApi.ik) {
+                                                newModeText = 'Hybrid Mode';
+                                            } else if (novaApi.state_streaming) {
+                                                newModeText = 'Digital Twin Mode';
+                                            } else if (novaApi.ik) {
+                                                newModeText = 'Nova IK Mode';
+                                            }
+                                        } else if (novaApi.enabled) {
+                                            newModeText = 'Awaiting connection';
+                                        } else {
+                                            newModeText = 'Internal control';
+                                        }
+                                        if (modeText.innerText !== newModeText) {
+                                            modeText.innerText = newModeText;
                                         }
-                                    } else if (data.nova_api.enabled) {
-                                        modeText.innerText = 'Awaiting connection';
-                                    } else {
-                                        modeText.innerText = 'Internal control';
                                     }
+
+                                    // Store current state for next comparison
+                                    prevNovaState = {
+                                        available: novaApi.available,
+                                        enabled: novaApi.enabled,
+                                        connected: novaApi.connected,
+                                        state_streaming: novaApi.state_streaming,
+                                        ik: novaApi.ik
+                                    };
                                 }
                             }