feat: make upload stuff more compact

public/index.html

@@ -82,30 +82,43 @@
                         
                         <div class="firmware-actions">
                             <div class="action-group">
-                                <h3>📁 Upload New Firmware</h3>
-                                <div class="upload-area-large">
+                                <h3>🚀 Firmware Update</h3>
+                                <div class="firmware-upload-compact">
+                                    <div class="upload-target-row">
+                                        <div class="upload-section">
+                                            <div class="file-input-wrapper">
                                                 <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
-                                    <button class="upload-btn-large" onclick="document.getElementById('global-firmware-file').click()">
-                                        📁 Choose Firmware File
+                                                <button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()">
+                                                    📁 Choose File
                                                 </button>
-                                    <div class="upload-info-large">Select a .bin or .hex file to upload to all nodes</div>
+                                                <span class="file-info" id="file-info">No file selected</span>
                                             </div>
                                         </div>
                                         
-                            <div class="action-group">
-                                <h3>🎯 Target Selection</h3>
-                                <div class="target-selection">
-                                    <label>
-                                        <input type="radio" name="target-type" value="all" checked> All Nodes
+                                        <div class="target-section">
+                                            <div class="target-options">
+                                                <label class="target-option">
+                                                    <input type="radio" name="target-type" value="all" checked>
+                                                    <span class="radio-custom"></span>
+                                                    <span class="target-label">All Nodes</span>
                                                 </label>
-                                    <label>
-                                        <input type="radio" name="target-type" value="specific"> Specific Node
+                                                <label class="target-option">
+                                                    <input type="radio" name="target-type" value="specific">
+                                                    <span class="radio-custom"></span>
+                                                    <span class="target-label">Specific Node</span>
                                                 </label>
-                                    <select id="specific-node-select" style="display: none;">
+                                            </div>
+                                            <select id="specific-node-select" class="node-select" style="display: none;">
                                                 <option value="">Select a node...</option>
                                             </select>
                                         </div>
                                     </div>
+                                    
+                                    <button class="deploy-btn" id="deploy-btn" disabled>
+                                        🚀 Deploy Firmware
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     

public/script.js

@@ -705,7 +705,7 @@ function setupFirmwareView() {
     // Setup global firmware file input
     const globalFirmwareFile = document.getElementById('global-firmware-file');
     if (globalFirmwareFile) {
-        globalFirmwareFile.addEventListener('change', handleGlobalFirmwareUpload);
+        globalFirmwareFile.addEventListener('change', handleGlobalFirmwareFileSelect);
     }
     
     // Setup target selection
@@ -720,36 +720,105 @@ function setupFirmwareView() {
             } else {
                 specificNodeSelect.style.display = 'none';
             }
+            updateDeployButton();
         });
     });
+    
+    // Setup specific node select change handler
+    if (specificNodeSelect) {
+        specificNodeSelect.addEventListener('change', updateDeployButton);
     }
     
-// Handle global firmware upload
-async function handleGlobalFirmwareUpload(event) {
-    const file = event.target.files[0];
-    if (!file) return;
+    // Setup deploy button
+    const deployBtn = document.getElementById('deploy-btn');
+    if (deployBtn) {
+        deployBtn.addEventListener('click', handleDeployFirmware);
+    }
     
+    // Initial button state
+    updateDeployButton();
+}
+
+// Handle file selection for the compact interface
+function handleGlobalFirmwareFileSelect(event) {
+    const file = event.target.files[0];
+    const fileInfo = document.getElementById('file-info');
+    const deployBtn = document.getElementById('deploy-btn');
+    
+    if (file) {
+        fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
+        fileInfo.classList.add('has-file');
+        deployBtn.disabled = false;
+    } else {
+        fileInfo.textContent = 'No file selected';
+        fileInfo.classList.remove('has-file');
+        deployBtn.disabled = true;
+    }
+}
+
+// Update deploy button state
+function updateDeployButton() {
+    const deployBtn = document.getElementById('deploy-btn');
+    const fileInput = document.getElementById('global-firmware-file');
+    const targetType = document.querySelector('input[name="target-type"]:checked');
+    const specificNodeSelect = document.getElementById('specific-node-select');
+    
+    if (!deployBtn || !fileInput) return;
+    
+    const hasFile = fileInput.files && fileInput.files.length > 0;
+    const isValidTarget = targetType.value === 'all' || 
+                         (targetType.value === 'specific' && specificNodeSelect.value);
+    
+    deployBtn.disabled = !hasFile || !isValidTarget;
+}
+
+// Handle deploy firmware button click
+async function handleDeployFirmware() {
+    const fileInput = document.getElementById('global-firmware-file');
     const targetType = document.querySelector('input[name="target-type"]:checked').value;
     const specificNode = document.getElementById('specific-node-select').value;
     
+    if (!fileInput.files || !fileInput.files[0]) {
+        alert('Please select a firmware file first.');
+        return;
+    }
+    
+    const file = fileInput.files[0];
+    
     if (targetType === 'specific' && !specificNode) {
         alert('Please select a specific node to update.');
         return;
     }
     
     try {
+        // Disable deploy button during upload
+        const deployBtn = document.getElementById('deploy-btn');
+        deployBtn.disabled = true;
+        deployBtn.classList.add('loading');
+        deployBtn.textContent = '⏳ Deploying...';
+        
         if (targetType === 'all') {
             await uploadFirmwareToAllNodes(file);
         } else {
             await uploadFirmwareToSpecificNode(file, specificNode);
         }
-    } catch (error) {
-        console.error('Global firmware upload failed:', error);
-        alert(`Upload failed: ${error.message}`);
-    }
         
-    // Clear file input
-    event.target.value = '';
+        // Reset interface after successful upload
+        fileInput.value = '';
+        document.getElementById('file-info').textContent = 'No file selected';
+        document.getElementById('file-info').classList.remove('has-file');
+        
+    } catch (error) {
+        console.error('Firmware deployment failed:', error);
+        alert(`Deployment failed: ${error.message}`);
+    } finally {
+        // Re-enable deploy button
+        const deployBtn = document.getElementById('deploy-btn');
+        deployBtn.disabled = false;
+        deployBtn.classList.remove('loading');
+        deployBtn.textContent = '🚀 Deploy Firmware';
+        updateDeployButton();
+    }
 }
 
 // Upload firmware to all nodes
@@ -791,8 +860,8 @@ async function uploadFirmwareToSpecificNode(file, nodeIp) {
         // Show upload progress area
         showFirmwareUploadProgress(file, [{ ip: nodeIp, hostname: nodeIp }]);
         
-        // Perform single node upload
-        const result = await performSingleFirmwareUpload(file, nodeIp);
+        // Perform single node upload with progress tracking
+        const result = await performSingleFirmwareUploadWithProgress(file, nodeIp);
         
         // Display results
         displayFirmwareUploadResults([result]);
@@ -807,21 +876,24 @@ async function uploadFirmwareToSpecificNode(file, nodeIp) {
 async function performBatchFirmwareUpload(file, nodes) {
     const results = [];
     const totalNodes = nodes.length;
+    let successfulUploads = 0;
     
     for (let i = 0; i < nodes.length; i++) {
         const node = nodes[i];
         const nodeIp = node.ip;
         
         try {
-            // Update progress
+            // Update progress - show current node being processed
             updateFirmwareUploadProgress(i + 1, totalNodes, nodeIp, 'Uploading...');
             
             // Upload to this node
             const result = await performSingleFirmwareUpload(file, nodeIp);
             results.push(result);
+            successfulUploads++;
             
-            // Update progress
+            // Update progress - show completion and update progress bar with actual success rate
             updateFirmwareUploadProgress(i + 1, totalNodes, nodeIp, 'Completed');
+            updateMultiNodeProgress(successfulUploads, totalNodes);
             
         } catch (error) {
             console.error(`Failed to upload to node ${nodeIp}:`, error);
@@ -834,8 +906,9 @@ async function performBatchFirmwareUpload(file, nodes) {
             };
             results.push(errorResult);
             
-            // Update progress
+            // Update progress - show failure and update progress bar with actual success rate
             updateFirmwareUploadProgress(i + 1, totalNodes, nodeIp, 'Failed');
+            updateMultiNodeProgress(successfulUploads, totalNodes);
         }
         
         // Small delay between uploads to avoid overwhelming the network
@@ -844,6 +917,9 @@ async function performBatchFirmwareUpload(file, nodes) {
         }
     }
     
+    // Update final progress based on successful uploads
+    updateFinalProgress(successfulUploads, totalNodes);
+    
     return results;
 }
 
@@ -880,6 +956,102 @@ async function performSingleFirmwareUpload(file, nodeIp) {
     }
 }
 
+// Perform single firmware upload to a specific node with progress tracking
+async function performSingleFirmwareUploadWithProgress(file, nodeIp) {
+    try {
+        // Simulate upload progress for single node
+        await simulateUploadProgress(nodeIp);
+        
+        // Create FormData for the upload
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        // Upload to backend
+        const response = await fetch(`/api/node/update?ip=${encodeURIComponent(nodeIp)}`, {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        return {
+            nodeIp: nodeIp,
+            hostname: nodeIp, // Will be updated if we have more info
+            success: true,
+            result: result,
+            timestamp: new Date().toISOString()
+        };
+        
+    } catch (error) {
+        throw new Error(`Upload to ${nodeIp} failed: ${error.message}`);
+    }
+}
+
+// Simulate upload progress for single node uploads
+async function simulateUploadProgress(nodeIp) {
+    const progressSteps = [10, 25, 50, 75, 90, 100];
+    const totalSteps = progressSteps.length;
+    
+    for (let i = 0; i < totalSteps; i++) {
+        const progress = progressSteps[i];
+        updateSingleNodeProgress(progress, nodeIp);
+        
+        // Wait a bit between progress updates (simulating actual upload time)
+        if (i < totalSteps - 1) {
+            await new Promise(resolve => setTimeout(resolve, 300));
+        }
+    }
+}
+
+// Update progress for single node uploads
+function updateSingleNodeProgress(percentage, nodeIp) {
+    const progressBar = document.getElementById('overall-progress-bar');
+    const progressText = document.querySelector('.progress-text');
+    
+    if (progressBar && progressText) {
+        progressBar.style.width = `${percentage}%`;
+        progressText.textContent = `${percentage}% Complete`;
+        
+        // Update progress bar color based on completion
+        if (percentage === 100) {
+            progressBar.style.backgroundColor = '#4ade80';
+        } else if (percentage > 50) {
+            progressBar.style.backgroundColor = '#60a5fa';
+        } else {
+            progressBar.style.backgroundColor = '#fbbf24';
+        }
+    }
+}
+
+// Update final progress based on successful vs total uploads
+function updateFinalProgress(successfulUploads, totalNodes) {
+    const progressBar = document.getElementById('overall-progress-bar');
+    const progressText = document.querySelector('.progress-text');
+    const progressHeader = document.querySelector('.progress-header h3');
+    
+    if (progressBar && progressText) {
+        const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
+        progressBar.style.width = `${successPercentage}%`;
+        
+        if (successfulUploads === totalNodes) {
+            progressText.textContent = '100% Complete';
+            progressBar.style.backgroundColor = '#4ade80';
+        } else {
+            progressText.textContent = `${successfulUploads}/${totalNodes} Successful`;
+            progressBar.style.backgroundColor = '#f87171';
+        }
+    }
+    
+    if (progressHeader) {
+        progressHeader.textContent = `📤 Firmware Upload Results (${successfulUploads}/${totalNodes} Successful)`;
+    }
+}
+
 // Show firmware upload progress area
 function showFirmwareUploadProgress(file, nodes) {
     const container = document.getElementById('firmware-nodes-list');
@@ -895,9 +1067,12 @@ function showFirmwareUploadProgress(file, nodes) {
                 </div>
                 <div class="overall-progress">
                     <div class="progress-bar-container">
-                        <div class="progress-bar" id="overall-progress-bar"></div>
+                        <div class="progress-bar" id="overall-progress-bar" style="width: 0%; background-color: #fbbf24;"></div>
                     </div>
-                    <span class="progress-text">0% Complete</span>
+                    <span class="progress-text">0/0 Successful (0%)</span>
+                </div>
+                <div class="progress-summary" id="progress-summary">
+                    <span>Status: Preparing upload...</span>
                 </div>
             </div>
             <div class="progress-list" id="progress-list">
@@ -949,24 +1124,58 @@ function updateFirmwareUploadProgress(current, total, nodeIp, status) {
         }
     }
     
-    // Update overall progress
+    // Update progress header to show current node being processed
     const progressHeader = document.querySelector('.progress-header h3');
-    const progressBar = document.getElementById('overall-progress-bar');
-    const progressText = document.querySelector('.progress-text');
-    
     if (progressHeader) {
         progressHeader.textContent = `📤 Firmware Upload Progress (${current}/${total})`;
     }
     
+    // Update progress summary
+    const progressSummary = document.getElementById('progress-summary');
+    if (progressSummary) {
+        if (status === 'Uploading...') {
+            progressSummary.innerHTML = `<span>Status: Uploading to ${nodeIp} (${current}/${total})</span>`;
+        } else if (status === 'Completed') {
+            // For multi-node uploads, show success rate
+            if (total > 1) {
+                const successfulNodes = document.querySelectorAll('.progress-status.success').length;
+                const totalNodes = total;
+                const successRate = Math.round((successfulNodes / totalNodes) * 100);
+                progressSummary.innerHTML = `<span>Status: Completed upload to ${nodeIp}. Overall: ${successfulNodes}/${totalNodes} successful (${successRate}%)</span>`;
+            } else {
+                progressSummary.innerHTML = `<span>Status: Completed upload to ${nodeIp} (${current}/${total})</span>`;
+            }
+        } else if (status === 'Failed') {
+            // For multi-node uploads, show success rate
+            if (total > 1) {
+                const successfulNodes = document.querySelectorAll('.progress-status.success').length;
+                const totalNodes = total;
+                const successRate = Math.round((successfulNodes / totalNodes) * 100);
+                progressSummary.innerHTML = `<span>Status: Failed upload to ${nodeIp}. Overall: ${successfulNodes}/${totalNodes} successful (${successRate}%)</span>`;
+            } else {
+                progressSummary.innerHTML = `<span>Status: Failed upload to ${nodeIp} (${current}/${total})</span>`;
+            }
+        }
+    }
+    
+    // IMPORTANT: Do NOT update the progress bar here - let updateMultiNodeProgress handle it
+    // The progress bar should only reflect actual successful uploads, not nodes processed
+}
+
+// Update progress for multi-node uploads based on actual success rate
+function updateMultiNodeProgress(successfulUploads, totalNodes) {
+    const progressBar = document.getElementById('overall-progress-bar');
+    const progressText = document.querySelector('.progress-text');
+    
     if (progressBar && progressText) {
-        const percentage = Math.round((current / total) * 100);
-        progressBar.style.width = `${percentage}%`;
-        progressText.textContent = `${percentage}% Complete`;
+        const successPercentage = Math.round((successfulUploads / totalNodes) * 100);
+        progressBar.style.width = `${successPercentage}%`;
+        progressText.textContent = `${successfulUploads}/${totalNodes} Successful (${successPercentage}%)`;
         
         // Update progress bar color based on completion
-        if (percentage === 100) {
+        if (successPercentage === 100) {
             progressBar.style.backgroundColor = '#4ade80';
-        } else if (percentage > 50) {
+        } else if (successPercentage > 50) {
             progressBar.style.backgroundColor = '#60a5fa';
         } else {
             progressBar.style.backgroundColor = '#fbbf24';
@@ -976,48 +1185,24 @@ function updateFirmwareUploadProgress(current, total, nodeIp, status) {
 
 // Display firmware upload results
 function displayFirmwareUploadResults(results) {
-    const container = document.getElementById('firmware-nodes-list');
+    // No need to display separate results widget - the progress area already shows all the information
+    // Just update the progress area to show final status
+    const progressHeader = document.querySelector('.progress-header h3');
+    const progressSummary = document.getElementById('progress-summary');
     
+    if (progressHeader && progressSummary) {
         const successCount = results.filter(r => r.success).length;
-    const failureCount = results.filter(r => !r.success).length;
+        const totalCount = results.length;
+        const successRate = Math.round((successCount / totalCount) * 100);
         
-    const resultsHTML = `
-        <div class="firmware-upload-results" id="firmware-upload-results">
-            <div class="results-header">
-                <h3>📊 Upload Results</h3>
-                <div class="results-summary">
-                    <span class="success-count">✅ ${successCount} Successful</span>
-                    <span class="failure-count">❌ ${failureCount} Failed</span>
-                    <span class="total-count">📊 ${results.length} Total</span>
-                </div>
-            </div>
-            <div class="results-list">
-                ${results.map(result => `
-                    <div class="result-item ${result.success ? 'success' : 'error'}">
-                        <div class="result-node-info">
-                            <span class="node-name">${result.hostname || result.nodeIp}</span>
-                            <span class="node-ip">${result.nodeIp}</span>
-                        </div>
-                        <div class="result-status">
-                            ${result.success ? '✅ Success' : '❌ Failed'}
-                        </div>
-                        <div class="result-details">
-                            ${result.success ? 
-                                `Uploaded successfully at ${new Date(result.timestamp).toLocaleTimeString()}` :
-                                `Error: ${result.error}`
+        if (successCount === totalCount) {
+            progressHeader.textContent = `📤 Firmware Upload Complete (${successCount}/${totalCount} Successful)`;
+            progressSummary.innerHTML = `<span>✅ All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
+        } else {
+            progressHeader.textContent = `📤 Firmware Upload Results (${successCount}/${totalCount} Successful)`;
+            progressSummary.innerHTML = `<span>⚠️ Upload completed with ${totalCount - successCount} failure(s) at ${new Date().toLocaleTimeString()}</span>`;
+        }
     }
-                        </div>
-                    </div>
-                `).join('')}
-            </div>
-            <div class="results-actions">
-                <button onclick="clearFirmwareResults()" class="clear-btn">Clear Results</button>
-                <button onclick="refreshFirmwareView()" class="refresh-btn">Refresh View</button>
-            </div>
-        </div>
-    `;
-    
-    container.innerHTML = resultsHTML;
 }
 
 // Clear firmware upload results
@@ -1026,6 +1211,26 @@ function clearFirmwareResults() {
     container.innerHTML = '';
 }
 
+// Add refresh button to progress area
+function addRefreshButtonToProgress() {
+    const progressHeader = document.querySelector('.progress-header');
+    if (progressHeader && !progressHeader.querySelector('.progress-refresh-btn')) {
+        const refreshBtn = document.createElement('button');
+        refreshBtn.className = 'progress-refresh-btn';
+        refreshBtn.innerHTML = `
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                <path d="M1 4v6h6M23 20v-6h-6"/>
+                <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
+            </svg>
+        `;
+        refreshBtn.title = 'Refresh firmware view';
+        refreshBtn.onclick = refreshFirmwareView;
+        
+        // Add the refresh button to the header
+        progressHeader.appendChild(refreshBtn);
+    }
+}
+
 // Populate node select dropdown
 function populateNodeSelect() {
     const select = document.getElementById('specific-node-select');
@@ -1053,6 +1258,7 @@ function populateNodeSelect() {
 function refreshFirmwareView() {
     updateFirmwareStats();
     populateNodeSelect();
+    addRefreshButtonToProgress(); // Add refresh button after populating nodes
 }
 
 // Update firmware statistics

public/styles.css

@@ -791,15 +791,15 @@ p {
 /* Firmware Actions */
 .firmware-actions {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2.5rem;
-    margin-bottom: 3rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    margin-bottom: 2.5rem;
 }
 
 .action-group {
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 20px;
-    padding: 2rem;
+    border-radius: 16px;
+    padding: 1.5rem;
     border: 1px solid rgba(255, 255, 255, 0.06);
     position: relative;
     overflow: hidden;
@@ -817,42 +817,261 @@ p {
 
 .action-group h3 {
     color: #ffffff;
-    margin-bottom: 1.5rem;
-    font-size: 1.2rem;
+    margin-bottom: 1.25rem;
+    font-size: 1.1rem;
     font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-.upload-area-large {
-    text-align: center;
-    padding: 2.5rem;
-    border: 2px dashed rgba(255, 255, 255, 0.15);
-    border-radius: 16px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+/* Compact Firmware Upload Interface */
+.firmware-upload-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.upload-target-row {
+    display: flex;
+    gap: 1.5rem;
+    align-items: stretch;
+    position: relative;
+}
+
+.upload-target-row::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1px;
+    height: 60%;
+    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    pointer-events: none;
+}
+
+.upload-section {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
     transition: all 0.3s ease;
+    min-height: 100px;
 }
 
-.upload-area-large:hover {
-    border-color: rgba(255, 255, 255, 0.25);
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+.upload-section:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.15);
 }
 
-.upload-btn-large {
+.target-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    transition: all 0.3s ease;
+    min-height: 100px;
+    justify-content: center;
+}
+
+.target-section:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.file-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+}
+
+.upload-btn-compact {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #ffffff;
-    padding: 1.25rem 2.5rem;
-    border-radius: 12px;
+    padding: 0.6rem 1.25rem;
+    border-radius: 8px;
     cursor: pointer;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+}
+
+.upload-btn-compact:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.file-info {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.85rem;
+    font-style: italic;
+    transition: all 0.3s ease;
+    padding: 0.4rem 0.6rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    border: 1px solid transparent;
+}
+
+.file-info.has-file {
+    color: #4ade80;
+    background: rgba(74, 222, 128, 0.1);
+    border-color: rgba(74, 222, 128, 0.2);
+    font-weight: 500;
+    font-style: normal;
+}
+
+.target-options {
+    display: flex;
+    gap: 1.25rem;
+}
+
+.target-option {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    cursor: pointer;
+    padding: 0.4rem;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.target-option:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.target-option input[type="radio"] {
+    display: none;
+}
+
+.radio-custom {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    position: relative;
+    transition: all 0.2s ease;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.target-option input[type="radio"]:checked + .radio-custom {
+    border-color: #667eea;
+    background: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+.target-option input[type="radio"]:checked + .radio-custom::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 6px;
+    height: 6px;
+    background: white;
+    border-radius: 50%;
+    animation: radioPop 0.2s ease-out;
+}
+
+@keyframes radioPop {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+}
+
+.target-label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.node-select {
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: #ffffff;
+    padding: 0.6rem 0.9rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    min-width: 180px;
+    font-weight: 500;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.node-select:hover {
+    border-color: rgba(255, 255, 255, 0.4);
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
+}
+
+.node-select:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 100%);
+}
+
+/* Style the dropdown options */
+.node-select option {
+    background: #1a202c;
+    color: #ffffff;
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border: none;
+}
+
+.node-select option:hover {
+    background: #2d3748;
+}
+
+.node-select option:checked {
+    background: #667eea;
+    color: #ffffff;
+    font-weight: 600;
+}
+
+/* Ensure the select field text is always visible */
+.node-select:invalid {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.node-select:valid {
+    color: #ffffff;
+}
+
+.deploy-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: #ffffff;
+    padding: 0.875rem 1.75rem;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 0.95rem;
     font-weight: 600;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    margin-bottom: 1.5rem;
+    align-self: center;
+    min-width: 180px;
     position: relative;
     overflow: hidden;
 }
 
-.upload-btn-large::before {
+.deploy-btn::before {
     content: '';
     position: absolute;
     top: 0;
@@ -863,245 +1082,148 @@ p {
     transition: left 0.5s ease;
 }
 
-.upload-btn-large:hover {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
-    transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.upload-btn-large:hover::before {
+.deploy-btn:hover:not(:disabled)::before {
     left: 100%;
 }
 
-.upload-info-large {
-    font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.7);
-    line-height: 1.5;
+.deploy-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
-/* Target Selection */
-.target-selection {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+.deploy-btn:disabled {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    color: rgba(255, 255, 255, 0.4);
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
 }
 
-.target-selection label {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: rgba(255, 255, 255, 0.9);
-    cursor: pointer;
-    padding: 0.75rem;
-    border-radius: 10px;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
+.deploy-btn.loading {
+    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+    color: #1f2937;
+    cursor: not-allowed;
 }
 
-.target-selection label:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.1);
-}
-
-.target-selection input[type="radio"] {
-    margin: 0;
-    width: 18px;
-    height: 18px;
-    accent-color: #667eea;
-}
-
-.target-selection select {
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-    padding: 0.75rem 1rem;
-    border-radius: 10px;
-    margin-top: 0.75rem;
-    font-size: 0.95rem;
-    transition: all 0.2s ease;
-    cursor: pointer;
-    font-weight: 500;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.target-selection select:hover {
-    border-color: rgba(255, 255, 255, 0.3);
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
-}
-
-.target-selection select:focus {
-    outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
-}
-
-/* Style the dropdown options */
-.target-selection select option {
-    background: #2c3e50;
-    color: #ffffff;
-    padding: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.target-selection select option:hover {
-    background: #34495e;
-}
-
-.target-selection select option:checked {
-    background: #667eea;
-    color: #ffffff;
-}
-
-/* Ensure the select field text is always visible */
-.target-selection select:invalid {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.target-selection select:valid {
-    color: #ffffff;
-}
-
-/* Text shadow already added to main select rule above */
-
 /* Responsive design for smaller screens */
 @media (max-width: 768px) {
-    .header {
-        flex-direction: column;
-        gap: 1rem;
-        text-align: center;
-    }
-    
-    h1 {
-        font-size: 2rem;
-    }
-    
-    .status {
-        padding: 0.5rem 1rem;
-        font-size: 0.9rem;
-    }
-    
-    /* Mobile navigation */
-    .main-navigation {
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
-    }
-    
-    .nav-left {
-        flex-direction: column;
-        gap: 0.25rem;
-    }
-    
-    .nav-tab {
-        padding: 0.75rem 1rem;
-        font-size: 0.9rem;
-        border-radius: 10px;
-        text-align: center;
-    }
-    
-    .cluster-status {
-        padding: 0.5rem 1rem;
-        font-size: 0.85rem;
-    }
-    
-    /* Mobile firmware stats */
-    .firmware-stats {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-    
-    .stat-card {
-        padding: 1.5rem 1rem;
-    }
-    
-    .stat-value {
-        font-size: 2rem;
-    }
-    
     .firmware-actions {
-        grid-template-columns: 1fr;
-        gap: 2rem;
+        gap: 1rem;
     }
     
     .action-group {
-        padding: 1.5rem;
+        padding: 1rem;
     }
     
-    .upload-area-large {
-        padding: 2rem 1.5rem;
+    .upload-target-row {
+        flex-direction: column;
+        gap: 1rem;
     }
     
-    .upload-btn-large {
-        padding: 1rem 2rem;
+    .upload-target-row::after {
+        display: none;
+    }
+    
+    .upload-section {
+        flex: none;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+        padding: 1rem;
+        min-height: auto;
+    }
+    
+    .file-input-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+    }
+    
+    .upload-btn-compact {
+        width: 100%;
+        padding: 0.75rem;
+        font-size: 0.9rem;
+    }
+    
+    .target-section {
+        flex: none;
+        padding: 1rem;
+        min-height: auto;
+    }
+    
+    .target-options {
+        justify-content: center;
+        gap: 0.75rem;
+    }
+    
+    .node-select {
+        min-width: auto;
+        width: 100%;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.9rem;
+    }
+    
+    .deploy-btn {
+        min-width: auto;
+        width: 100%;
+        padding: 1rem 1.5rem;
         font-size: 1rem;
     }
     
-    /* Mobile tab responsiveness */
-    .tabs-header {
-        flex-wrap: wrap;
-        gap: 0.25rem;
-        padding-bottom: 0.5rem;
+    .file-info {
+        text-align: center;
+        padding: 0.5rem;
+        font-size: 0.85rem;
     }
     
-    .tab-button {
-        flex: 1 1 auto;
-        min-width: 0;
-        padding: 0.4rem 0.75rem;
-        font-size: 0.8rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .target-label {
+        font-size: 0.9rem;
     }
     
-    .tabs-container {
-        padding: 0.25rem;
-        margin-top: 0.75rem;
-    }
-    
-    .tab-content {
-        padding: 0.75rem 0;
-    }
-    
-    /* Mobile member card improvements */
-    .member-card {
-        padding: 1rem;
-        margin-bottom: 0.75rem;
-    }
-    
-    .member-info {
-        gap: 0.25rem;
-    }
-    
-    .member-name {
-        font-size: 1.1rem;
-    }
-    
-    .member-ip {
-        font-size: 0.8rem;
-    }
-    
-    .member-latency {
-        margin-top: 0.4rem;
-        font-size: 0.8rem;
+    .radio-custom {
+        width: 16px;
+        height: 16px;
     }
 } 
 
 /* Extra small screens */
 @media (max-width: 480px) {
-    .tabs-header {
-        gap: 0.2rem;
+    .action-group {
+        padding: 0.75rem;
     }
     
-    .tab-button {
-        padding: 0.35rem 0.6rem;
-        font-size: 0.75rem;
-        border-radius: 6px 6px 0 0;
+    .upload-section,
+    .target-section {
+        padding: 0.75rem;
     }
     
-    .tabs-container {
-        padding: 0.2rem;
-        margin-top: 0.5rem;
+    .upload-btn-compact {
+        padding: 0.6rem;
+        font-size: 0.85rem;
+    }
+    
+    .deploy-btn {
+        padding: 0.75rem 1.25rem;
+        font-size: 0.95rem;
+    }
+    
+    .file-info {
+        padding: 0.4rem;
+        font-size: 0.8rem;
+    }
+    
+    .target-label {
+        font-size: 0.85rem;
+    }
+    
+    .radio-custom {
+        width: 14px;
+        height: 14px;
+    }
+    
+    .node-select {
+        padding: 0.4rem 0.6rem;
+        font-size: 0.85rem;
     }
 } 
 
@@ -1132,6 +1254,37 @@ p {
     font-weight: 600;
 }
 
+.progress-header {
+    position: relative;
+}
+
+.progress-refresh-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 0.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progress-refresh-btn:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.25);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.progress-refresh-btn:active {
+    transform: translateY(0);
+}
+
 .progress-info,
 .results-summary {
     display: flex;
@@ -1180,6 +1333,20 @@ p {
     text-align: right;
 }
 
+.progress-summary {
+    margin-top: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.progress-summary span {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+}
+
 .success-count {
     color: #4ade80 !important;
     border-color: rgba(74, 222, 128, 0.3) !important;