Merge pull request #10239 from gadfort/web-disconnect

web: add notification when socket is gone

Author: maliberty

src/web/src/main.js

@@ -21,16 +21,38 @@ import './theme.js';
 // ─── Status Indicator ───────────────────────────────────────────────────────
 
 const statusDiv = document.getElementById('websocket-status');
+let disconnectTimeout = null;
+const DISCONNECT_DELAY_MS = 2000; // Show banner after 2 seconds of disconnection
 
 function updateStatus() {
-    const n = app.websocketManager ? app.websocketManager.pending.size : 0;
-    if (n === 0) {
-        statusDiv.textContent = '';
-        statusDiv.style.display = 'none';
+    const isConnected = app.websocketManager && app.websocketManager.isConnected;
+    const pendingCount = app.websocketManager ? app.websocketManager.pending.size : 0;
+    
+    if (!isConnected) {
+        // Only show banner after a delay to avoid flashing on page load
+        if (!disconnectTimeout) {
+            disconnectTimeout = setTimeout(() => {
+                if (!app.websocketManager?.isConnected) {
+                    statusDiv.innerHTML = '<div class="disconnected-banner">⚠ OpenROAD disconnected</div>';
+                    statusDiv.style.display = 'block';
+                }
+            }, DISCONNECT_DELAY_MS);
+        }
     } else {
-        statusDiv.textContent = `pending: ${n}`;
-        statusDiv.style.display = '';
-        statusDiv.style.color = n > 20 ? 'var(--error)' : 'var(--fg-bright)';
+        // Connected - clear timeout and show pending indicator if needed
+        if (disconnectTimeout) {
+            clearTimeout(disconnectTimeout);
+            disconnectTimeout = null;
+        }
+        
+        if (pendingCount === 0) {
+            statusDiv.style.display = 'none';
+        } else {
+            statusDiv.innerHTML = `<div class="pending-indicator">pending: ${pendingCount}</div>`;
+            statusDiv.style.display = 'block';
+            const color = pendingCount > 20 ? 'var(--error)' : 'var(--fg-bright)';
+            statusDiv.querySelector('.pending-indicator').style.color = color;
+        }
     }
 }
 
@@ -558,6 +580,9 @@ if (staticCache) {
     app.websocketManager = new WebSocketManager(websocketUrl, updateStatus);
 }
 
+// Check initial connection status
+updateStatus();
+
 // Restore saved layout or use default
 const savedLayout = localStorage.getItem('gl-layout');
 const savedVersion = parseInt(localStorage.getItem('gl-layout-version'), 10);

src/web/src/style.css

@@ -425,17 +425,61 @@ html, body {
 
 /* Status overlay */
 #websocket-status {
+    position: fixed;
+    pointer-events: none;
+    z-index: 10005;
+    display: none;
+}
+
+#websocket-status .disconnected-banner {
+    position: fixed;
+    top: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(135deg, var(--error) 0%, #cc3333 100%);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    animation: slideDown 0.3s ease-out, pulse 2s ease-in-out infinite 0.5s;
+    letter-spacing: 0.5px;
+}
+
+#websocket-status .pending-indicator {
     position: fixed;
     top: 8px;
     right: 8px;
-    z-index: 10000;
     background: var(--bg-status);
     color: var(--fg-secondary);
     padding: 4px 10px;
     font: 12px monospace;
     border-radius: 4px;
-    pointer-events: none;
-    display: none;
+    display: inline-block;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    }
+    50% {
+        opacity: 0.8;
+        box-shadow: 0 12px 32px rgba(255, 100, 100, 0.5);
+    }
 }
 
 /* Coordinate readout (bottom-left of layout viewer) */

src/web/src/websocket-manager.js

@@ -17,9 +17,14 @@ export class WebSocketManager {
         this.onStatusChange = onStatusChange || (() => {});
         this.onPush = null; // callback for server-push notifications
         this._cache = null;
+        this._isConnected = false;
         this.connect();
     }
 
+    get isConnected() {
+        return this._isConnected || (this.socket && this.socket.readyState === WebSocket.OPEN);
+    }
+
     // Create a cache-backed instance (no WebSocket connection).
     static fromCache(cache, onStatusChange) {
         const mgr = Object.create(WebSocketManager.prototype);
@@ -31,6 +36,7 @@ export class WebSocketManager {
         mgr.onStatusChange = onStatusChange || (() => {});
         mgr.onPush = null;
         mgr._cache = cache;
+        mgr._isConnected = true; // cache is always "connected"
         mgr.readyPromise = Promise.resolve();
         mgr.readyResolve = null;
         return mgr;
@@ -50,8 +56,10 @@ export class WebSocketManager {
 
         this.socket.onopen = () => {
             console.log('WebSocket connected');
+            this._isConnected = true;
             this.reconnectDelay = 1000;
             this.readyResolve();
+            this.onStatusChange();
         };
 
         this.socket.onmessage = (event) => {
@@ -60,6 +68,8 @@ export class WebSocketManager {
 
         this.socket.onclose = () => {
             console.log('WebSocket closed, reconnecting...');
+            this._isConnected = false;
+            this.onStatusChange();
             for (const [id, handler] of this.pending) {
                 handler.reject(new Error('WebSocket closed'));
             }

src/web/test/BUILD

@@ -127,6 +127,13 @@ js_test(
     no_copy_to_bin = JS_FILES,
 )
 
+js_test(
+    name = "status_indicator_test",
+    data = DOM_TEST_DATA,
+    entry_point = "js/test-status-indicator.js",
+    no_copy_to_bin = JS_FILES,
+)
+
 cc_test(
     name = "clock_tree_report_test",
     srcs = ["cpp/TestClockTreeReport.cpp"],