not reload when visible

Signed-off-by: ale <ale@manalejandro.com>

public/main.js

@@ -234,7 +234,7 @@ class LogTailMonitor {
     /**
      * Start tailing a specific file
      */
-    async startTailing(filename) {
+    async startTailing(filename, isReconnect = false) {
         this.showLoading('Connecting to ' + filename + '...');
         
         // Stop current connection
@@ -254,17 +254,28 @@ class LogTailMonitor {
             }
         });
         
-        // Clear existing logs
-        this.clearLogs();
+        // Clear existing logs only if it's not a reconnection
+        if (!isReconnect) {
+            this.clearLogs();
+        } else {
+            // Add a reconnection indicator to the existing logs
+            this.addReconnectionMessage();
+        }
         
         try {
-            // Start SSE connection
-            this.eventSource = new EventSource(`api/files/${encodeURIComponent(filename)}`);
+            // Start SSE connection with reconnect parameter if needed
+            const url = `api/files/${encodeURIComponent(filename)}${isReconnect ? '?reconnect=true' : ''}`;
+            this.eventSource = new EventSource(url);
             
             this.eventSource.onopen = () => {
                 this.hideLoading();
                 this.setConnectionStatus(true);
                 console.log('SSE connection established');
+                
+                // If this is a reconnection, add a success message
+                if (isReconnect) {
+                    this.addReconnectionSuccessMessage();
+                }
             };
             
             this.eventSource.onmessage = (event) => {
@@ -283,11 +294,11 @@ class LogTailMonitor {
                     console.log('SSE connection closed');
                 }
                 
-                // Auto-reconnect after delay
+                // Auto-reconnect after delay, but don't clear logs
                 setTimeout(() => {
                     if (this.currentFile && this.eventSource.readyState === EventSource.CLOSED) {
                         console.log('Attempting to reconnect...');
-                        this.startTailing(this.currentFile);
+                        this.startTailing(this.currentFile, true); // true = isReconnect
                     }
                 }, 5000);
             };
@@ -568,6 +579,36 @@ class LogTailMonitor {
         this.elements.loadingOverlay.classList.remove('visible');
     }
     
+    /**
+     * Add a reconnection message to the log
+     */
+    addReconnectionMessage() {
+        const reconnectLine = document.createElement('div');
+        reconnectLine.className = 'log-line reconnect-message';
+        reconnectLine.innerHTML = '<i class="fas fa-plug"></i> Reconnecting to log stream...';
+        
+        this.elements.logOutput.appendChild(reconnectLine);
+        
+        if (this.autoScroll) {
+            this.scrollToBottom();
+        }
+    }
+
+    /**
+     * Add a successful reconnection message to the log
+     */
+    addReconnectionSuccessMessage() {
+        const successLine = document.createElement('div');
+        successLine.className = 'log-line reconnect-success';
+        successLine.innerHTML = '<i class="fas fa-check-circle"></i> Successfully reconnected - continuing log stream...';
+        
+        this.elements.logOutput.appendChild(successLine);
+        
+        if (this.autoScroll) {
+            this.scrollToBottom();
+        }
+    }
+
     /**
      * Escape HTML to prevent XSS
      */
@@ -580,15 +621,18 @@ class LogTailMonitor {
 
 // Initialize the application when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
-    new LogTailMonitor();
+    window.logMonitor = new LogTailMonitor();
 });
 
-// Handle page visibility changes
+// Handle page visibility changes - attempt reconnection instead of reload
 document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-        // Refresh connection when page becomes visible
-        setTimeout(() => {
-            window.location.reload();
-        }, 1000);
+    if (document.visibilityState === 'visible' && window.logMonitor) {
+        // Try to reconnect to current file if connection was lost
+        if (window.logMonitor.currentFile && (!window.logMonitor.eventSource || window.logMonitor.eventSource.readyState === EventSource.CLOSED)) {
+            console.log('Page became visible, attempting to reconnect...');
+            setTimeout(() => {
+                window.logMonitor.startTailing(window.logMonitor.currentFile, true);
+            }, 1000);
+        }
     }
 });