Fix reconnecting dialog refreshing page repeatedly

ui/src/components/EnhancedWebSocketStatus.tsx

@@ -60,16 +60,17 @@ export default function EnhancedWebSocketStatus({
   useEffect(() => {
     if (reconnectAttempts > 0 && !isConnected) {
       const delay = getReconnectDelay(reconnectAttempts - 1);
-      setCountdown(delay);
+      let remainingTime = delay;
+      setCountdown(remainingTime);
 
       const interval = setInterval(() => {
-        setCountdown((prev) => {
-          if (prev === null || prev <= 1) {
-            clearInterval(interval);
-            return null;
-          }
-          return prev - 1;
-        });
+        remainingTime -= 1;
+        if (remainingTime <= 0) {
+          clearInterval(interval);
+          setCountdown(null);
+        } else {
+          setCountdown(remainingTime);
+        }
       }, 1000);
 
       return () => clearInterval(interval);

ui/src/components/EnterpriseWebSocketProvider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode, useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect, useState, useRef } from 'react';
 import { Snackbar, Alert } from '@mui/material';
-import { useState } from 'react';
 import {
   useEnterpriseWebSocket,
   WebSocketMessage,
@@ -69,7 +68,8 @@ export default function EnterpriseWebSocketProvider({
   enableNotifications = true,
 }: EnterpriseWebSocketProviderProps) {
   const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [reconnectDismissed, setReconnectDismissed] = useState(false); // Track if reconnect banner was dismissed
+  const reconnectDismissedRef = useRef(false); // Use ref to persist across reconnection attempts
+  const [showReconnectBanner, setShowReconnectBanner] = useState(false);
 
   const addNotification = useCallback((message: string, severity: Notification['severity']) => {
     const id = `${Date.now()}-${Math.random()}`;
@@ -164,28 +164,36 @@ export default function EnterpriseWebSocketProvider({
     onMessage: handleMessage,
     onError: (error) => {
       console.error('[EnterpriseWebSocket] Error:', error);
-      if (enableNotifications) {
+      if (enableNotifications && !reconnectDismissedRef.current) {
         addNotification('Real-time updates disconnected', 'error');
       }
     },
     onClose: () => {
       // console.log('[EnterpriseWebSocket] Connection closed');
-      if (enableNotifications && reconnectAttempts > 0) {
-        addNotification('Reconnecting to real-time updates...', 'info');
-      }
+      // Don't show notification if banner was already dismissed
     },
     autoReconnect: true,
     reconnectInterval: 3000,
     maxReconnectAttempts: 10,
   });
 
-  // Show connection status indicator
+  // Show connection status indicator and manage banner visibility
   useEffect(() => {
     if (isConnected && reconnectAttempts > 0) {
-      addNotification('Real-time updates reconnected', 'success');
+      if (!reconnectDismissedRef.current) {
+        addNotification('Real-time updates reconnected', 'success');
+      }
+      setShowReconnectBanner(false);
+    } else if (!isConnected && reconnectAttempts > 0 && !reconnectDismissedRef.current) {
+      setShowReconnectBanner(true);
     }
   }, [isConnected, reconnectAttempts, addNotification]);
 
+  const handleDismissReconnectBanner = useCallback(() => {
+    reconnectDismissedRef.current = true;
+    setShowReconnectBanner(false);
+  }, []);
+
   return (
     <>
       {children}
@@ -214,16 +222,16 @@ export default function EnterpriseWebSocketProvider({
       ))}
 
       {/* Connection status indicator (optional) */}
-      {!isConnected && reconnectAttempts > 0 && !reconnectDismissed && (
+      {showReconnectBanner && (
         <Snackbar
           open={true}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          onClose={() => setReconnectDismissed(true)}
+          onClose={handleDismissReconnectBanner}
         >
           <Alert
             severity="info"
             variant="outlined"
-            onClose={() => setReconnectDismissed(true)}
+            onClose={handleDismissReconnectBanner}
             sx={{
               backgroundColor: 'background.paper',
               boxShadow: 1,

ui/src/hooks/useWebSocket.ts

@@ -38,6 +38,7 @@ export function useWebSocket({
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const shouldReconnectRef = useRef(true);
+  const reconnectAttemptsRef = useRef(0);
 
   const connect = useCallback(() => {
     try {
@@ -47,6 +48,7 @@ export function useWebSocket({
         // console.log(`WebSocket connected: ${url}`);
         setIsConnected(true);
         setReconnectAttempts(0);
+        reconnectAttemptsRef.current = 0;
         onOpen?.();
       };
 
@@ -70,15 +72,17 @@ export function useWebSocket({
         onClose?.();
 
         // Attempt reconnection with exponential backoff
-        if (shouldReconnectRef.current && reconnectAttempts < maxReconnectAttempts) {
-          const delay = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts), 30000);
-          // console.log(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts + 1}/${maxReconnectAttempts})`);
+        const currentAttempts = reconnectAttemptsRef.current;
+        if (shouldReconnectRef.current && currentAttempts < maxReconnectAttempts) {
+          const delay = Math.min(reconnectInterval * Math.pow(1.5, currentAttempts), 30000);
+          // console.log(`Reconnecting in ${delay}ms (attempt ${currentAttempts + 1}/${maxReconnectAttempts})`);
 
           reconnectTimeoutRef.current = setTimeout(() => {
+            reconnectAttemptsRef.current += 1;
             setReconnectAttempts((prev) => prev + 1);
             connect();
           }, delay);
-        } else if (reconnectAttempts >= maxReconnectAttempts) {
+        } else if (currentAttempts >= maxReconnectAttempts) {
           console.error(`Max reconnection attempts (${maxReconnectAttempts}) reached for ${url}`);
         }
       };
@@ -87,7 +91,7 @@ export function useWebSocket({
     } catch (error) {
       console.error('Failed to create WebSocket connection:', error);
     }
-  }, [url, onMessage, onError, onOpen, onClose, reconnectInterval, maxReconnectAttempts, reconnectAttempts]);
+  }, [url, onMessage, onError, onOpen, onClose, reconnectInterval, maxReconnectAttempts]);
 
   const sendMessage = useCallback((message: any) => {
     if (wsRef.current?.readyState === WebSocket.OPEN) {