fix: preserve UI state after refresh

public/script.js

@@ -70,6 +70,22 @@ const client = new FrontendApiClient();
 async function refreshClusterMembers() {
     const container = document.getElementById('cluster-members-container');
     
+    // Store the currently expanded cards BEFORE showing loading state
+    const expandedCards = new Map();
+    const existingCards = container.querySelectorAll('.member-card');
+    existingCards.forEach(card => {
+        if (card.classList.contains('expanded')) {
+            const memberIp = card.dataset.memberIp;
+            const memberDetails = card.querySelector('.member-details');
+            if (memberDetails) {
+                expandedCards.set(memberIp, memberDetails.innerHTML);
+                console.log(`Storing expanded state for ${memberIp}`);
+            }
+        }
+    });
+    
+    console.log(`Stored ${expandedCards.size} expanded cards for restoration`);
+    
     // Show loading state
     container.innerHTML = `
         <div class="loading">
@@ -80,7 +96,7 @@ async function refreshClusterMembers() {
     try {
         const response = await client.getClusterMembers();
         console.log(response);
-        displayClusterMembers(response.members);
+        displayClusterMembers(response.members, expandedCards);
     } catch (error) {
         console.error('Failed to fetch cluster members:', error);
         container.innerHTML = `
@@ -282,7 +298,7 @@ async function loadTasksData(container, nodeStatus) {
 }
 
 // Function to display cluster members
-function displayClusterMembers(members) {
+function displayClusterMembers(members, expandedCards = new Map()) {
     const container = document.getElementById('cluster-members-container');
     
     if (!members || members.length === 0) {
@@ -340,6 +356,22 @@ function displayClusterMembers(members) {
             
             console.log(`Setting up card ${index} with IP: ${memberIp}`);
 
+            // Restore expanded state if this card was expanded before refresh
+            if (expandedCards.has(memberIp)) {
+                console.log(`Restoring expanded state for ${memberIp}`);
+                const restoredContent = expandedCards.get(memberIp);
+                console.log(`Restored content length: ${restoredContent.length} characters`);
+                memberDetails.innerHTML = restoredContent;
+                card.classList.add('expanded');
+                expandIcon.classList.add('expanded');
+                
+                // Re-setup tabs for restored content
+                setupTabs(memberDetails);
+                console.log(`Successfully restored expanded state for ${memberIp}`);
+            } else {
+                console.log(`No expanded state to restore for ${memberIp}`);
+            }
+
             // Make the entire card clickable
             card.addEventListener('click', async (e) => {
                 // Don't trigger if clicking on the expand icon (to avoid double-triggering)
@@ -409,4 +441,5 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // Auto-refresh every 30 seconds
-setInterval(refreshClusterMembers, 30000); 
+// FIXME not working properly: scroll position is not preserved, if there is an upload happening, this mus also be handled
+//setInterval(refreshClusterMembers, 30000);