public/index.html

@@ -102,14 +102,24 @@
                             </div>
                         </div>
                     </div>
-                    <button class="refresh-btn" id="refresh-cluster-btn">
+                    <div class="cluster-header-right">
-                        <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        <button class="deploy-btn" id="deploy-firmware-btn" title="Deploy firmware to visible nodes">
-                            stroke-width="2">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px;">
-                            <path d="M1 4v6h6M23 20v-6h-6" />
+                                <path d="M12 16V4"/>
-                            <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" />
+                                <path d="M8 8l4-4 4 4"/>
-                        </svg>
+                                <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
-                        Refresh
+                            </svg>
-                    </button>
+                            Deploy
+                        </button>
+                        <button class="refresh-btn" id="refresh-cluster-btn">
+                            <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <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>
+                            Refresh
+                        </button>
+                    </div>
                 </div>
 
                 <div id="cluster-members-container">
@@ -253,7 +263,9 @@
     <script src="./scripts/components/PrimaryNodeComponent.js"></script>
     <script src="./scripts/components/NodeDetailsComponent.js"></script>
     <script src="./scripts/components/ClusterMembersComponent.js"></script>
+    <script src="./scripts/components/OverlayDialogComponent.js"></script>
     <script src="./scripts/components/FirmwareComponent.js"></script>
+    <script src="./scripts/components/FirmwareUploadComponent.js"></script>
     <!-- Container/view components after their deps -->
     <script src="./scripts/components/FirmwareViewComponent.js"></script>
     <script src="./scripts/components/ClusterViewComponent.js"></script>

public/scripts/app.js

@@ -14,9 +14,10 @@ document.addEventListener('DOMContentLoaded', async function() {
     logger.debug('App: Creating view models...');
     const clusterViewModel = new ClusterViewModel();
     const firmwareViewModel = new FirmwareViewModel();
+    const clusterFirmwareViewModel = new ClusterFirmwareViewModel();
     const topologyViewModel = new TopologyViewModel();
     const monitoringViewModel = new MonitoringViewModel();
-    logger.debug('App: View models created:', { clusterViewModel, firmwareViewModel, topologyViewModel, monitoringViewModel });
+    logger.debug('App: View models created:', { clusterViewModel, firmwareViewModel, clusterFirmwareViewModel, topologyViewModel, monitoringViewModel });
     
     // Connect firmware view model to cluster data
     clusterViewModel.subscribe('members', (members) => {
@@ -36,6 +37,28 @@ document.addEventListener('DOMContentLoaded', async function() {
         }
     });
     
+    // Connect cluster firmware view model to cluster data
+    // Note: This subscription is disabled because target nodes should be set explicitly
+    // when opening the firmware deploy drawer, not automatically updated
+    /*
+    clusterViewModel.subscribe('members', (members) => {
+        logger.debug('App: Members subscription triggered for cluster firmware:', members);
+        if (members && members.length > 0) {
+            // Extract node information for cluster firmware view
+            const nodes = members.map(member => ({
+                ip: member.ip,
+                hostname: member.hostname || member.ip,
+                labels: member.labels || {}
+            }));
+            clusterFirmwareViewModel.setTargetNodes(nodes);
+            logger.debug('App: Updated cluster firmware view model with nodes:', nodes);
+        } else {
+            clusterFirmwareViewModel.setTargetNodes([]);
+            logger.debug('App: Cleared cluster firmware view model nodes');
+        }
+    });
+    */
+    
     // Register routes with their view models
     logger.debug('App: Registering routes...');
     app.registerRoute('cluster', ClusterViewComponent, 'cluster-view', clusterViewModel);

public/scripts/components/ClusterMembersComponent.js

@@ -95,6 +95,11 @@ class ClusterMembersComponent extends Component {
 		});
 	}
 
+	// Get currently filtered members (public method for external access)
+	getFilteredMembers() {
+		return this.filterMembers(this.allMembers);
+	}
+
 	// Update filter dropdowns with current label data
 	updateFilterDropdowns() {
 		// Get currently filtered members to determine available options

public/scripts/components/ClusterViewComponent.js

@@ -33,6 +33,9 @@ class ClusterViewComponent extends Component {
         
         // Track if we've already loaded data to prevent unnecessary reloads
         this.dataLoaded = false;
+        
+        // Initialize overlay dialog
+        this.overlayDialog = null;
     }
 
     mount() {
@@ -47,6 +50,12 @@ class ClusterViewComponent extends Component {
         // Set up refresh button event listener (since it's in the cluster header, not in the members container)
         this.setupRefreshButton();
         
+        // Set up deploy button event listener
+        this.setupDeployButton();
+        
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Only load data if we haven't already or if the view model is empty
         const members = this.viewModel.get('members');
         const shouldLoadData = true; // always perform initial refresh quickly
@@ -86,6 +95,166 @@ class ClusterViewComponent extends Component {
         }
     }
     
+    setupDeployButton() {
+        logger.debug('ClusterViewComponent: Setting up deploy button...');
+        
+        const deployBtn = this.findElement('#deploy-firmware-btn');
+        logger.debug('ClusterViewComponent: Found deploy button:', !!deployBtn, deployBtn);
+        
+        if (deployBtn) {
+            logger.debug('ClusterViewComponent: Adding click event listener to deploy button');
+            this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
+            logger.debug('ClusterViewComponent: Event listener added successfully');
+        } else {
+            logger.error('ClusterViewComponent: Deploy button not found!');
+            logger.debug('ClusterViewComponent: Container HTML:', this.container.innerHTML);
+            logger.debug('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button'));
+        }
+    }
+    
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('cluster-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'cluster-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+    
+    async handleDeploy() {
+        logger.debug('ClusterViewComponent: Deploy button clicked, opening firmware upload drawer...');
+        
+        // Get current filtered members from cluster members component
+        const filteredMembers = this.clusterMembersComponent ? this.clusterMembersComponent.getFilteredMembers() : [];
+        
+        if (!filteredMembers || filteredMembers.length === 0) {
+            this.showConfirmationDialog({
+                title: 'No Nodes Available',
+                message: 'No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
+            return;
+        }
+        
+        // Open drawer with firmware upload interface
+        this.openFirmwareUploadDrawer(filteredMembers);
+    }
+    
+    openFirmwareUploadDrawer(targetNodes) {
+        logger.debug('ClusterViewComponent: Opening firmware upload drawer for', targetNodes.length, 'nodes');
+        
+        // Get display name for drawer title
+        const nodeCount = targetNodes.length;
+        const displayName = `Firmware Deployment - ${nodeCount} node${nodeCount !== 1 ? 's' : ''}`;
+        
+        // Open drawer with content callback (hide terminal button for firmware upload)
+        this.clusterMembersComponent.drawer.openDrawer(displayName, (contentContainer, setActiveComponent) => {
+            // Create firmware upload view model and component
+            const firmwareUploadVM = new ClusterFirmwareViewModel();
+            firmwareUploadVM.setTargetNodes(targetNodes);
+            
+            // Create HTML for firmware upload interface
+            contentContainer.innerHTML = `
+                <div class="firmware-upload-drawer">
+                    <div class="firmware-upload-section">
+                        <!--div class="firmware-upload-header">
+                            <h3>
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
+                                    <path d="M4 7l8-4 8 4v10l-8 4-8-4z"/>
+                                    <path d="M12 8v8"/>
+                                </svg>
+                                Firmware Upload
+                            </h3>
+                        </div-->
+                        
+                        <div class="firmware-upload-controls">
+                            <div class="file-input-wrapper">
+                                <div class="file-input-left">
+                                    <input type="file" id="firmware-file" accept=".bin,.hex" style="display: none;">
+                                    <button class="upload-btn-compact" onclick="document.getElementById('firmware-file').click()">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
+                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                            <path d="M14 2v6h6"/>
+                                        </svg>
+                                        Choose File
+                                    </button>
+                                    <span class="file-info" id="file-info">No file selected</span>
+                                </div>
+                                <button class="deploy-btn-compact" id="deploy-btn" disabled>
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
+                                        <path d="M12 16V4"/>
+                                        <path d="M8 8l4-4 4 4"/>
+                                        <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
+                                    </svg>
+                                    Deploy
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="target-nodes-section">
+                            <h3>
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
+                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                                    <circle cx="9" cy="7" r="4"/>
+                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                                </svg>
+                                Target Nodes (${targetNodes.length})
+                            </h3>
+                            <div class="target-nodes-list">
+                                ${targetNodes.map(node => `
+                                    <div class="target-node-item" data-node-ip="${node.ip}">
+                                        <div class="node-info">
+                                            <span class="node-name">${node.hostname || node.ip}</span>
+                                            <span class="node-ip">${node.ip}</span>
+                                        </div>
+                                        <div class="node-status">
+                                            <span class="status-indicator ready">Ready</span>
+                                        </div>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        </div>
+                        
+                        
+                        <div id="firmware-progress-container">
+                            <!-- Progress will be shown here during upload -->
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Create and mount firmware upload component
+            const firmwareUploadComponent = new FirmwareUploadComponent(contentContainer, firmwareUploadVM, this.eventBus);
+            setActiveComponent(firmwareUploadComponent);
+            firmwareUploadComponent.mount();
+            
+        }, null, () => {
+            // Close callback - clear any upload state
+            logger.debug('ClusterViewComponent: Firmware upload drawer closed');
+        }, true); // Hide terminal button for firmware upload
+    }
+    
     async handleRefresh() {
         logger.debug('ClusterViewComponent: Refresh button clicked, performing full refresh...');
         

public/scripts/components/DrawerComponent.js

@@ -91,7 +91,7 @@ class DrawerComponent {
         });
     }
 
-    openDrawer(title, contentCallback, errorCallback, onCloseCallback) {
+    openDrawer(title, contentCallback, errorCallback, onCloseCallback, hideTerminalButton = false) {
         this.ensureDrawer();
         this.onCloseCallback = onCloseCallback;
 
@@ -101,6 +101,12 @@ class DrawerComponent {
             titleEl.textContent = title;
         }
 
+        // Show/hide terminal button based on parameter
+        const terminalBtn = this.detailsDrawer.querySelector('.drawer-terminal-btn');
+        if (terminalBtn) {
+            terminalBtn.style.display = hideTerminalButton ? 'none' : 'block';
+        }
+
         // Clear previous component if any
         if (this.activeDrawerComponent && typeof this.activeDrawerComponent.unmount === 'function') {
             try { 

public/scripts/components/FirmwareComponent.js

@@ -7,6 +7,9 @@ class FirmwareComponent extends Component {
         logger.debug('FirmwareComponent: Container:', container);
         logger.debug('FirmwareComponent: Container ID:', container?.id);
         
+        // Initialize overlay dialog
+        this.overlayDialog = null;
+        
         // Check if the dropdown exists in the container
         if (container) {
             const dropdown = container.querySelector('#specific-node-select');
@@ -105,6 +108,9 @@ class FirmwareComponent extends Component {
         
         logger.debug('FirmwareComponent: Mounting...');
         
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Check if the dropdown exists when mounted
         const dropdown = this.findElement('#specific-node-select');
         logger.debug('FirmwareComponent: Mount - dropdown found:', !!dropdown);
@@ -131,6 +137,24 @@ class FirmwareComponent extends Component {
         this.updateDeployButton();
     }
 
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('firmware-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'firmware-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
     handleFileSelect(event) {
         const file = event.target.files[0];
         this.viewModel.setSelectedFile(file);
@@ -160,15 +184,69 @@ class FirmwareComponent extends Component {
         const specificNode = this.viewModel.get('specificNode');
         
         if (!file) {
-            alert('Please select a firmware file first.');
+            this.showConfirmationDialog({
+                title: 'No File Selected',
+                message: 'Please select a firmware file first.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
         if (targetType === 'specific' && !specificNode) {
-            alert('Please select a specific node to update.');
+            this.showConfirmationDialog({
+                title: 'No Node Selected',
+                message: 'Please select a specific node to update.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }
         
+        // Show confirmation dialog for deployment
+        this.showDeploymentConfirmation(file, targetType, specificNode);
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+
+    showDeploymentConfirmation(file, targetType, specificNode) {
+        let title, message;
+        
+        if (targetType === 'all') {
+            const nodes = this.viewModel.get('availableNodes') || [];
+            title = 'Deploy to All Nodes';
+            message = `Upload firmware "${file.name}" to all ${nodes.length} nodes?<br><br>This will update:<br>${nodes.map(n => `• ${n.hostname || n.ip}`).join('<br>')}`;
+        } else if (targetType === 'specific') {
+            title = 'Deploy to Specific Node';
+            message = `Upload firmware "${file.name}" to node ${specificNode}?`;
+        } else if (targetType === 'labels') {
+            const nodes = this.viewModel.getAffectedNodesByLabels();
+            const labels = this.viewModel.get('selectedLabels') || [];
+            title = 'Deploy to Labeled Nodes';
+            message = `Upload firmware "${file.name}" to ${nodes.length} node(s) matching labels (${labels.join(', ')})?<br><br>This will update:<br>${nodes.map(n => `• ${n.hostname || n.ip}`).join('<br>')}`;
+        }
+        
+        this.showConfirmationDialog({
+            title: title,
+            message: message,
+            confirmText: 'Deploy',
+            cancelText: 'Cancel',
+            onConfirm: () => this.performDeployment(file, targetType, specificNode),
+            onCancel: () => {}
+        });
+    }
+
+    async performDeployment(file, targetType, specificNode) {
         try {
             this.viewModel.startUpload();
             
@@ -185,7 +263,14 @@ class FirmwareComponent extends Component {
             
         } catch (error) {
             logger.error('Firmware deployment failed:', error);
-            alert(`Deployment failed: ${error.message}`);
+            this.showConfirmationDialog({
+                title: 'Deployment Failed',
+                message: `Deployment failed: ${error.message}`,
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
         } finally {
             this.viewModel.completeUpload();
         }
@@ -198,13 +283,17 @@ class FirmwareComponent extends Component {
             const nodes = response.members || [];
             
             if (nodes.length === 0) {
-                alert('No nodes available for firmware update.');
+                this.showConfirmationDialog({
+                    title: 'No Nodes Available',
+                    message: 'No nodes available for firmware update.',
+                    confirmText: 'OK',
+                    cancelText: null,
+                    onConfirm: () => {},
+                    onCancel: null
+                });
                 return;
             }
             
-            const confirmed = confirm(`Upload firmware to all ${nodes.length} nodes? This will update: ${nodes.map(n => n.hostname || n.ip).join(', ')}`);
-            if (!confirmed) return;
-            
             // Show upload progress area
             this.showUploadProgress(file, nodes);
             
@@ -222,9 +311,6 @@ class FirmwareComponent extends Component {
 
     async uploadToSpecificNode(file, nodeIp) {
         try {
-            const confirmed = confirm(`Upload firmware to node ${nodeIp}?`);
-            if (!confirmed) return;
-            
             // Show upload progress area
             this.showUploadProgress(file, [{ ip: nodeIp, hostname: nodeIp }]);
             
@@ -266,12 +352,16 @@ class FirmwareComponent extends Component {
         try {
             const nodes = this.viewModel.getAffectedNodesByLabels();
             if (!nodes || nodes.length === 0) {
-                alert('No nodes match the selected labels.');
+                this.showConfirmationDialog({
+                    title: 'No Matching Nodes',
+                    message: 'No nodes match the selected labels.',
+                    confirmText: 'OK',
+                    cancelText: null,
+                    onConfirm: () => {},
+                    onCancel: null
+                });
                 return;
             }
-            const labels = this.viewModel.get('selectedLabels') || [];
-            const confirmed = confirm(`Upload firmware to ${nodes.length} node(s) matching labels (${labels.join(', ')})?`);
-            if (!confirmed) return;
             
             // Show upload progress area
             this.showUploadProgress(file, nodes);

public/scripts/components/FirmwareUploadComponent.js

@@ -0,0 +1,604 @@
+// Reusable Firmware Upload Component
+class FirmwareUploadComponent extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+        
+        logger.debug('FirmwareUploadComponent: Constructor called');
+        logger.debug('FirmwareUploadComponent: Container:', container);
+        logger.debug('FirmwareUploadComponent: Container ID:', container?.id);
+        
+        // Initialize overlay dialog
+        this.overlayDialog = null;
+    }
+
+    setupEventListeners() {
+        // Setup firmware file input
+        const firmwareFile = this.findElement('#firmware-file');
+        if (firmwareFile) {
+            this.addEventListener(firmwareFile, 'change', this.handleFileSelect.bind(this));
+        }
+        
+        // Setup deploy button
+        const deployBtn = this.findElement('#deploy-btn');
+        if (deployBtn) {
+            this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
+        }
+    }
+
+    setupViewModelListeners() {
+        this.subscribeToProperty('selectedFile', () => {
+            this.updateFileInfo();
+            this.updateDeployButton();
+        });
+        this.subscribeToProperty('isUploading', this.updateUploadState.bind(this));
+        this.subscribeToProperty('uploadProgress', this.updateUploadProgress.bind(this));
+        this.subscribeToProperty('uploadResults', this.updateUploadResults.bind(this));
+    }
+
+    mount() {
+        super.mount();
+        
+        logger.debug('FirmwareUploadComponent: Mounting...');
+        
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
+        // Initialize UI state
+        this.updateFileInfo();
+        this.updateDeployButton();
+        
+        logger.debug('FirmwareUploadComponent: Mounted successfully');
+    }
+
+    render() {
+        // Initial render is handled by the HTML template
+        this.updateDeployButton();
+    }
+
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('firmware-upload-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'firmware-upload-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+
+    handleFileSelect(event) {
+        const file = event.target.files[0];
+        this.viewModel.setSelectedFile(file);
+    }
+
+    async handleDeploy() {
+        const file = this.viewModel.get('selectedFile');
+        const targetNodes = this.viewModel.get('targetNodes');
+        
+        if (!file) {
+            this.showConfirmationDialog({
+                title: 'No File Selected',
+                message: 'Please select a firmware file first.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
+            return;
+        }
+        
+        if (!targetNodes || targetNodes.length === 0) {
+            this.showConfirmationDialog({
+                title: 'No Target Nodes',
+                message: 'No target nodes available for firmware update.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
+            return;
+        }
+        
+        // Show confirmation dialog for deployment
+        this.showDeploymentConfirmation(file, targetNodes);
+    }
+
+    showDeploymentConfirmation(file, targetNodes) {
+        const title = 'Deploy Firmware';
+        const message = `Upload firmware "${file.name}" to ${targetNodes.length} node(s)?<br><br>Target nodes:<br>${targetNodes.map(n => `• ${n.hostname || n.ip} (${n.ip})`).join('<br>')}<br><br>This will update the firmware on all selected nodes.`;
+        
+        this.showConfirmationDialog({
+            title: title,
+            message: message,
+            confirmText: 'Deploy',
+            cancelText: 'Cancel',
+            onConfirm: () => this.performDeployment(file, targetNodes),
+            onCancel: () => {}
+        });
+    }
+
+    async performDeployment(file, targetNodes) {
+        try {
+            this.viewModel.startUpload();
+            
+            // Show progress overlay to block UI interactions
+            this.showProgressOverlay();
+            
+            // Show upload progress area
+            this.showUploadProgress(file, targetNodes);
+            
+            // Start batch upload
+            const results = await this.performBatchUpload(file, targetNodes);
+            
+            // Display results
+            this.displayUploadResults(results);
+            
+            // Reset interface after successful upload
+            this.viewModel.resetUploadState();
+            
+        } catch (error) {
+            logger.error('Firmware deployment failed:', error);
+            this.showConfirmationDialog({
+                title: 'Deployment Failed',
+                message: `Deployment failed: ${error.message}`,
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
+        } finally {
+            this.viewModel.completeUpload();
+            this.hideProgressOverlay();
+        }
+    }
+
+    async performBatchUpload(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
+                this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Uploading...');
+                
+                // Upload to this node
+                const result = await this.performSingleUpload(file, nodeIp);
+                results.push(result);
+                successfulUploads++;
+                
+                // Update progress
+                this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Completed');
+                this.updateOverallProgress(successfulUploads, totalNodes);
+                
+            } catch (error) {
+                logger.error(`Failed to upload to node ${nodeIp}:`, error);
+                const errorResult = {
+                    nodeIp: nodeIp,
+                    hostname: node.hostname || nodeIp,
+                    success: false,
+                    error: error.message,
+                    timestamp: new Date().toISOString()
+                };
+                results.push(errorResult);
+                
+                // Update progress
+                this.updateNodeProgress(i + 1, totalNodes, nodeIp, 'Failed');
+                this.updateOverallProgress(successfulUploads, totalNodes);
+            }
+            
+            // Small delay between uploads
+            if (i < nodes.length - 1) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+            }
+        }
+        
+        return results;
+    }
+
+    async performSingleUpload(file, nodeIp) {
+        try {
+            const result = await window.apiClient.uploadFirmware(file, nodeIp);
+            
+            return {
+                nodeIp: nodeIp,
+                hostname: nodeIp,
+                success: true,
+                result: result,
+                timestamp: new Date().toISOString()
+            };
+            
+        } catch (error) {
+            throw new Error(`Upload to ${nodeIp} failed: ${error.message}`);
+        }
+    }
+
+    showUploadProgress(file, nodes) {
+        // Update the target nodes section header to show upload progress
+        const targetNodesSection = this.findElement('.target-nodes-section');
+        if (targetNodesSection) {
+            const h3 = targetNodesSection.querySelector('h3');
+            if (h3) {
+                h3.innerHTML = `
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
+                        <path d="M12 16V4"/>
+                        <path d="M8 8l4-4 4 4"/>
+                        <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
+                    </svg>
+                    Firmware Upload Progress (${nodes.length} nodes)
+                `;
+            }
+        }
+        
+        // Add progress info to the firmware-progress-container
+        const container = this.findElement('#firmware-progress-container');
+        if (container) {
+            const progressHTML = `
+                <div class="upload-progress-info">
+                    <div class="overall-progress">
+                        <div class="progress-bar-container">
+                            <div class="progress-bar" id="overall-progress-bar" style="width: 0%; background-color: #fbbf24;"></div>
+                        </div>
+                        <span class="progress-text">0/${nodes.length} Successful (0%)</span>
+                    </div>
+                    <div class="progress-summary" id="progress-summary">
+                        <span>Status: Preparing upload...</span>
+                    </div>
+                </div>
+            `;
+            container.innerHTML = progressHTML;
+        }
+        
+        // Update existing target nodes to show upload status
+        this.updateTargetNodesForUpload(nodes);
+    }
+
+    updateTargetNodesForUpload(nodes) {
+        const targetNodesList = this.findElement('.target-nodes-list');
+        if (!targetNodesList) return;
+        
+        // Update each target node item to show upload status
+        targetNodesList.innerHTML = nodes.map(node => `
+            <div class="target-node-item" data-node-ip="${node.ip}">
+                <div class="node-info">
+                    <span class="node-name">${node.hostname || node.ip}</span>
+                    <span class="node-ip">${node.ip}</span>
+                </div>
+                <div class="node-status">
+                    <span class="status-indicator pending">Pending...</span>
+                </div>
+            </div>
+        `).join('');
+    }
+
+    updateNodeProgress(current, total, nodeIp, status) {
+        const targetNodeItem = this.findElement(`[data-node-ip="${nodeIp}"]`);
+        if (targetNodeItem) {
+            const statusElement = targetNodeItem.querySelector('.status-indicator');
+            
+            if (statusElement) {
+                statusElement.textContent = status;
+                
+                // Update status-specific styling
+                statusElement.className = 'status-indicator';
+                if (status === 'Completed') {
+                    statusElement.classList.add('success');
+                } else if (status === 'Failed') {
+                    statusElement.classList.add('error');
+                } else if (status === 'Uploading...') {
+                    statusElement.classList.add('uploading');
+                } else if (status === 'Pending...') {
+                    statusElement.classList.add('pending');
+                }
+            }
+        }
+    }
+
+    updateOverallProgress(successfulUploads, totalNodes) {
+        const progressBar = this.findElement('#overall-progress-bar');
+        const progressText = this.findElement('.progress-text');
+        
+        if (progressBar && progressText) {
+            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 (successPercentage === 100) {
+                progressBar.style.backgroundColor = '#4ade80';
+            } else if (successPercentage > 50) {
+                progressBar.style.backgroundColor = '#60a5fa';
+            } else {
+                progressBar.style.backgroundColor = '#fbbf24';
+            }
+            
+            // Update progress summary for single-node uploads
+            const progressSummary = this.findElement('#progress-summary');
+            if (progressSummary && totalNodes === 1) {
+                if (successfulUploads === 1) {
+                    progressSummary.innerHTML = '<span>Status: Upload completed successfully</span>';
+                } else if (successfulUploads === 0) {
+                    progressSummary.innerHTML = '<span>Status: Upload failed</span>';
+                }
+            }
+        }
+    }
+
+    displayUploadResults(results) {
+        const progressHeader = this.findElement('.progress-header h3');
+        const progressSummary = this.findElement('#progress-summary');
+        
+        if (progressHeader && progressSummary) {
+            const successCount = results.filter(r => r.success).length;
+            const totalCount = results.length;
+            const successRate = Math.round((successCount / totalCount) * 100);
+            
+            if (totalCount === 1) {
+                // Single node upload
+                if (successCount === 1) {
+                    progressHeader.textContent = `Firmware Upload Complete`;
+                    progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} completed successfully at ${new Date().toLocaleTimeString()}</span>`;
+                } else {
+                    progressHeader.textContent = `Firmware Upload Failed`;
+                    progressSummary.innerHTML = `<span>${window.icon('error', { width: 14, height: 14 })} Upload to ${results[0].hostname || results[0].nodeIp} failed at ${new Date().toLocaleTimeString()}</span>`;
+                }
+            } else if (successCount === totalCount) {
+                // Multi-node upload - all successful
+                progressHeader.textContent = `Firmware Upload Complete (${successCount}/${totalCount} Successful)`;
+                progressSummary.innerHTML = `<span>${window.icon('success', { width: 14, height: 14 })} All uploads completed successfully at ${new Date().toLocaleTimeString()}</span>`;
+            } else {
+                // Multi-node upload - some failed
+                progressHeader.textContent = `Firmware Upload Results (${successCount}/${totalCount} Successful)`;
+                progressSummary.innerHTML = `<span>${window.icon('warning', { width: 14, height: 14 })} Upload completed with ${totalCount - successCount} failure(s) at ${new Date().toLocaleTimeString()}</span>`;
+            }
+        }
+    }
+
+    updateFileInfo() {
+        const file = this.viewModel.get('selectedFile');
+        const fileInfo = this.findElement('#file-info');
+        
+        if (file) {
+            fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)}KB)`;
+            fileInfo.classList.add('has-file');
+        } else {
+            fileInfo.textContent = 'No file selected';
+            fileInfo.classList.remove('has-file');
+        }
+        
+        this.updateDeployButton();
+    }
+
+    updateDeployButton() {
+        const deployBtn = this.findElement('#deploy-btn');
+        if (deployBtn) {
+            const file = this.viewModel.get('selectedFile');
+            const targetNodes = this.viewModel.get('targetNodes');
+            const isUploading = this.viewModel.get('isUploading');
+            
+            deployBtn.disabled = !file || !targetNodes || targetNodes.length === 0 || isUploading;
+        }
+    }
+
+    updateUploadState() {
+        const isUploading = this.viewModel.get('isUploading');
+        const deployBtn = this.findElement('#deploy-btn');
+        
+        if (deployBtn) {
+            deployBtn.disabled = isUploading;
+            if (isUploading) {
+                deployBtn.classList.add('loading');
+                // Update button text while keeping the SVG icon
+                const iconSvg = deployBtn.querySelector('svg');
+                deployBtn.innerHTML = '';
+                if (iconSvg) {
+                    deployBtn.appendChild(iconSvg);
+                }
+                deployBtn.appendChild(document.createTextNode(' Deploying...'));
+            } else {
+                deployBtn.classList.remove('loading');
+                // Restore original button content with SVG icon
+                deployBtn.innerHTML = `
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
+                        <path d="M12 16V4"/>
+                        <path d="M8 8l4-4 4 4"/>
+                        <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
+                    </svg>
+                    Deploy
+                `;
+            }
+        }
+        
+        this.updateDeployButton();
+    }
+
+    updateUploadProgress() {
+        // This will be implemented when we add upload progress tracking
+    }
+
+    updateUploadResults() {
+        // This will be implemented when we add upload results display
+    }
+
+    showProgressOverlay() {
+        // Create overlay element that only covers the left side (main content area)
+        const overlay = document.createElement('div');
+        overlay.id = 'firmware-upload-overlay';
+        overlay.className = 'firmware-upload-overlay';
+        overlay.innerHTML = `
+            <div class="overlay-content">
+                <div class="overlay-spinner">
+                    <svg class="spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/>
+                        <path d="M12 2a10 10 0 0 1 10 10"/>
+                    </svg>
+                </div>
+                <div class="overlay-text">Firmware upload in progress...</div>
+                <div class="overlay-subtext">Check the drawer for detailed progress</div>
+            </div>
+        `;
+        
+        // Add to body
+        document.body.appendChild(overlay);
+        
+        // Check if drawer is open and adjust overlay accordingly
+        const drawer = document.querySelector('.details-drawer');
+        if (drawer && drawer.classList.contains('open')) {
+            overlay.classList.add('drawer-open');
+        }
+        
+        // Block ESC key during upload
+        this.blockEscapeKey();
+        
+        // Block drawer close button during upload
+        this.blockDrawerCloseButton();
+        
+        // Block choose file button during upload
+        this.blockChooseFileButton();
+        
+        
+        // Store reference for cleanup
+        this.progressOverlay = overlay;
+    }
+
+    blockDrawerCloseButton() {
+        // Find the drawer close button
+        const closeButton = document.querySelector('.drawer-close');
+        if (closeButton) {
+            // Store original state
+            this.originalCloseButtonDisabled = closeButton.disabled;
+            this.originalCloseButtonStyle = closeButton.style.cssText;
+            
+            // Disable the close button
+            closeButton.disabled = true;
+            closeButton.style.opacity = '0.5';
+            closeButton.style.cursor = 'not-allowed';
+            closeButton.style.pointerEvents = 'none';
+            
+            // Add visual indicator that it's disabled
+            closeButton.title = 'Cannot close during firmware upload';
+        }
+    }
+
+    unblockDrawerCloseButton() {
+        // Restore the drawer close button
+        const closeButton = document.querySelector('.drawer-close');
+        if (closeButton) {
+            // Restore original state
+            closeButton.disabled = this.originalCloseButtonDisabled || false;
+            closeButton.style.cssText = this.originalCloseButtonStyle || '';
+            closeButton.title = 'Close';
+        }
+    }
+
+    blockChooseFileButton() {
+        // Find the choose file button
+        const chooseFileButton = document.querySelector('.upload-btn-compact');
+        if (chooseFileButton) {
+            // Store original state
+            this.originalChooseFileButtonDisabled = chooseFileButton.disabled;
+            this.originalChooseFileButtonStyle = chooseFileButton.style.cssText;
+            
+            // Disable the choose file button
+            chooseFileButton.disabled = true;
+            chooseFileButton.style.opacity = '0.5';
+            chooseFileButton.style.cursor = 'not-allowed';
+            chooseFileButton.style.pointerEvents = 'none';
+            
+            // Add visual indicator that it's disabled
+            chooseFileButton.title = 'Cannot change file during upload';
+        }
+    }
+
+    unblockChooseFileButton() {
+        // Restore the choose file button
+        const chooseFileButton = document.querySelector('.upload-btn-compact');
+        if (chooseFileButton) {
+            // Restore original state
+            chooseFileButton.disabled = this.originalChooseFileButtonDisabled || false;
+            chooseFileButton.style.cssText = this.originalChooseFileButtonStyle || '';
+            chooseFileButton.title = 'Choose File';
+        }
+    }
+
+    hideTargetNodesSection() {
+        // Find the target nodes section
+        const targetNodesSection = document.querySelector('.target-nodes-section');
+        if (targetNodesSection) {
+            // Store original state
+            this.originalTargetNodesSectionDisplay = targetNodesSection.style.display;
+            
+            // Hide the target nodes section
+            targetNodesSection.style.display = 'none';
+        }
+    }
+
+    showTargetNodesSection() {
+        // Restore the target nodes section
+        const targetNodesSection = document.querySelector('.target-nodes-section');
+        if (targetNodesSection) {
+            // Restore original state
+            targetNodesSection.style.display = this.originalTargetNodesSectionDisplay || '';
+        }
+    }
+
+    blockEscapeKey() {
+        // Create a keydown event listener that prevents ESC from closing the drawer
+        this.escapeKeyHandler = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                return false;
+            }
+        };
+        
+        // Add the event listener with capture=true to intercept before drawer's handler
+        document.addEventListener('keydown', this.escapeKeyHandler, true);
+    }
+
+    unblockEscapeKey() {
+        // Remove the ESC key blocker
+        if (this.escapeKeyHandler) {
+            document.removeEventListener('keydown', this.escapeKeyHandler, true);
+            this.escapeKeyHandler = null;
+        }
+    }
+
+    hideProgressOverlay() {
+        if (this.progressOverlay) {
+            this.progressOverlay.remove();
+            this.progressOverlay = null;
+        }
+        
+        // Unblock ESC key
+        this.unblockEscapeKey();
+        
+        // Unblock drawer close button
+        this.unblockDrawerCloseButton();
+        
+        // Unblock choose file button
+        this.unblockChooseFileButton();
+        
+    }
+}
+
+window.FirmwareUploadComponent = FirmwareUploadComponent;

public/scripts/components/OverlayDialogComponent.js

@@ -0,0 +1,126 @@
+// Overlay Dialog Component - Reusable confirmation dialog
+class OverlayDialogComponent extends Component {
+    constructor(container, viewModel, eventBus) {
+        super(container, viewModel, eventBus);
+        this.isVisible = false;
+        this.onConfirm = null;
+        this.onCancel = null;
+        this.title = '';
+        this.message = '';
+        this.confirmText = 'Yes';
+        this.cancelText = 'No';
+    }
+
+    mount() {
+        super.mount();
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Close overlay when clicking outside or pressing escape
+        this.addEventListener(this.container, 'click', (e) => {
+            if (!this.isVisible) return;
+            if (e.target === this.container) {
+                this.hide();
+            }
+        });
+
+        this.addEventListener(document, 'keydown', (e) => {
+            if (e.key === 'Escape' && this.isVisible) {
+                this.hide();
+            }
+        });
+    }
+
+    show(options = {}) {
+        const {
+            title = 'Confirm Action',
+            message = 'Are you sure you want to proceed?',
+            confirmText = 'Yes',
+            cancelText = 'No',
+            onConfirm = null,
+            onCancel = null
+        } = options;
+
+        this.title = title;
+        this.message = message;
+        this.confirmText = confirmText;
+        this.cancelText = cancelText;
+        this.onConfirm = onConfirm;
+        this.onCancel = onCancel;
+
+        this.render();
+        this.container.classList.add('visible');
+        this.isVisible = true;
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+        this.isVisible = false;
+        
+        // Call cancel callback if provided
+        if (this.onCancel) {
+            this.onCancel();
+        }
+    }
+
+    handleConfirm() {
+        this.hide();
+        
+        // Call confirm callback if provided
+        if (this.onConfirm) {
+            this.onConfirm();
+        }
+    }
+
+    render() {
+        this.container.innerHTML = `
+            <div class="overlay-dialog-content">
+                <div class="overlay-dialog-header">
+                    <h3 class="overlay-dialog-title">${this.title}</h3>
+                    <button class="overlay-dialog-close" type="button">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
+                            <path d="M18 6L6 18M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+                <div class="overlay-dialog-body">
+                    <div class="overlay-dialog-message">${this.message}</div>
+                </div>
+                <div class="overlay-dialog-footer">
+                    <button class="overlay-dialog-btn overlay-dialog-btn-cancel" type="button">
+                        ${this.cancelText}
+                    </button>
+                    <button class="overlay-dialog-btn overlay-dialog-btn-confirm" type="button">
+                        ${this.confirmText}
+                    </button>
+                </div>
+            </div>
+        `;
+
+        // Add event listeners to buttons
+        const closeBtn = this.container.querySelector('.overlay-dialog-close');
+        const cancelBtn = this.container.querySelector('.overlay-dialog-btn-cancel');
+        const confirmBtn = this.container.querySelector('.overlay-dialog-btn-confirm');
+
+        if (closeBtn) {
+            this.addEventListener(closeBtn, 'click', () => this.hide());
+        }
+
+        if (cancelBtn) {
+            this.addEventListener(cancelBtn, 'click', () => this.hide());
+        }
+
+        if (confirmBtn) {
+            this.addEventListener(confirmBtn, 'click', () => this.handleConfirm());
+        }
+    }
+
+    unmount() {
+        // Clean up event listeners
+        this.removeAllEventListeners();
+        
+        // Call parent unmount
+        super.unmount();
+    }
+}

public/scripts/view-models.js

@@ -959,3 +959,76 @@ class MonitoringViewModel extends ViewModel {
         await this.loadClusterData();
     }
 }
+
+// Cluster Firmware Upload View Model
+class ClusterFirmwareViewModel extends ViewModel {
+    constructor() {
+        super();
+        this.setMultiple({
+            selectedFile: null,
+            targetNodes: [],
+            uploadProgress: null,
+            uploadResults: [],
+            isUploading: false
+        });
+    }
+
+    // Set selected file
+    setSelectedFile(file) {
+        this.set('selectedFile', file);
+    }
+
+    // Set target nodes (filtered from cluster view)
+    setTargetNodes(nodes) {
+        this.set('targetNodes', nodes);
+    }
+
+    // Start upload
+    startUpload() {
+        this.set('isUploading', true);
+        this.set('uploadProgress', {
+            current: 0,
+            total: 0,
+            status: 'Preparing...'
+        });
+        this.set('uploadResults', []);
+    }
+
+    // Update upload progress
+    updateUploadProgress(current, total, status) {
+        this.set('uploadProgress', {
+            current,
+            total,
+            status
+        });
+    }
+
+    // Add upload result
+    addUploadResult(result) {
+        const results = this.get('uploadResults');
+        results.push(result);
+        this.set('uploadResults', results);
+    }
+
+    // Complete upload
+    completeUpload() {
+        this.set('isUploading', false);
+    }
+
+    // Reset upload state
+    resetUploadState() {
+        this.set('selectedFile', null);
+        this.set('uploadProgress', null);
+        this.set('uploadResults', []);
+        this.set('isUploading', false);
+    }
+
+    // Check if deploy is enabled
+    isDeployEnabled() {
+        const file = this.get('selectedFile');
+        const targetNodes = this.get('targetNodes');
+        const isUploading = this.get('isUploading');
+        
+        return file && targetNodes && targetNodes.length > 0 && !isUploading;
+    }
+} 

public/styles/main.css

@@ -401,6 +401,52 @@ p {
     }
 }
 
+/* Deploy Button */
+.deploy-btn {
+    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+    color: var(--accent-primary);
+    padding: 0.75rem 1.25rem;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.deploy-btn:hover {
+    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(74, 222, 128, 0.15) 100%);
+    border-color: rgba(74, 222, 128, 0.4);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.2);
+}
+
+.deploy-btn:active {
+    transform: translateY(0);
+}
+
+.deploy-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.deploy-btn.loading {
+    opacity: 0.8;
+    cursor: not-allowed;
+}
+
+/* Cluster Header Right */
+.cluster-header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
 .members-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -3588,9 +3634,609 @@ select.param-input:focus {
     overflow: auto;
 }
 
+/* Firmware Upload Drawer Styles */
+.firmware-upload-drawer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.firmware-upload-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.firmware-upload-header h3 {
+    display: flex;
+    align-items: center;
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.firmware-upload-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-secondary);
+}
+
+.file-input-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.file-input-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.upload-btn-compact {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border: 1px solid var(--border-secondary);
+    color: var(--text-secondary);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.upload-btn-compact: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.15);
+}
+
+/* Compact Deploy Button */
+.deploy-btn-compact {
+    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+    color: var(--accent-primary);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.deploy-btn-compact:hover {
+    background: linear-gradient(135deg, rgba(74, 222, 128, 0.3) 0%, rgba(74, 222, 128, 0.15) 100%);
+    border-color: rgba(74, 222, 128, 0.4);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
+}
+
+.deploy-btn-compact:active {
+    transform: translateY(0);
+}
+
+.deploy-btn-compact:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.deploy-btn-compact.loading {
+    opacity: 0.8;
+    cursor: not-allowed;
+}
+
+.file-info {
+    font-size: 0.9rem;
+    color: var(--text-tertiary);
+    font-style: italic;
+}
+
+.file-info.has-file {
+    color: var(--text-secondary);
+    font-style: normal;
+    font-weight: 500;
+}
+
+.target-nodes-section {
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-secondary);
+}
+
+.target-nodes-section h3 {
+    margin: 0 0 1.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.target-nodes-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.target-node-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0.7rem;
+    background: var(--bg-primary);
+    border-radius: 12px;
+    border: 1px solid var(--border-primary);
+    gap: 1.5rem;
+}
+
+.target-node-item .node-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.target-node-item .node-info .node-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 1rem;
+    line-height: 1.2;
+}
+
+.target-node-item .node-info .node-ip {
+    font-size: 0.85rem;
+    color: var(--text-tertiary);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    line-height: 1.2;
+}
+
+.target-node-item .node-status {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5rem;
+    min-width: 140px;
+    text-align: right;
+}
+
+.status-indicator {
+    padding: 0.5rem 0.75rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    min-width: 100px;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-indicator.ready {
+    background: rgba(76, 175, 80, 0.2);
+    color: var(--accent-success);
+    border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.status-indicator.pending {
+    background: rgba(255, 152, 0, 0.2);
+    color: #ff9800;
+    border: 1px solid rgba(255, 152, 0, 0.3);
+}
+
+.status-indicator.uploading {
+    background: rgba(33, 150, 243, 0.2);
+    color: #2196f3;
+    border: 1px solid rgba(33, 150, 243, 0.3);
+}
+
+.status-indicator.success {
+    background: rgba(76, 175, 80, 0.2);
+    color: var(--accent-success);
+    border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.status-indicator.error {
+    background: rgba(244, 67, 54, 0.2);
+    color: #f44336;
+    border: 1px solid rgba(244, 67, 54, 0.3);
+}
+
+/* Ultra-compact layout for upload progress */
+.upload-progress-info ~ .target-nodes-section .target-node-item {
+    padding: 0.375rem 0.5rem;
+    gap: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 0.125rem;
+}
+
+.upload-progress-info ~ .target-nodes-section .target-node-item .node-info {
+    gap: 0.0625rem;
+}
+
+.upload-progress-info ~ .target-nodes-section .target-node-item .node-info .node-name {
+    font-size: 0.8rem;
+    line-height: 1.0;
+}
+
+.upload-progress-info ~ .target-nodes-section .target-node-item .node-info .node-ip {
+    font-size: 0.7rem;
+    line-height: 1.0;
+}
+
+.upload-progress-info ~ .target-nodes-section .target-node-item .node-status {
+    min-width: 70px;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.upload-progress-info ~ .target-nodes-section .status-indicator {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.65rem;
+    min-width: 70px;
+    border-radius: 3px;
+}
+
+.upload-progress-info ~ .target-nodes-section .target-nodes-list {
+    gap: 0.125rem;
+}
+
+.target-node-item .progress-time {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    font-style: italic;
+    line-height: 1.2;
+    margin-top: 0.25rem;
+}
+
+/* Responsive design for target nodes */
+@media (max-width: 768px) {
+    .target-node-item {
+        padding: 0.75rem 1rem;
+        gap: 1rem;
+    }
+    
+    .target-node-item .node-status {
+        min-width: 120px;
+    }
+    
+    .status-indicator {
+        padding: 0.4rem 0.6rem;
+        font-size: 0.75rem;
+        min-width: 80px;
+    }
+    
+    .target-node-item .node-info .node-name {
+        font-size: 0.9rem;
+    }
+    
+    .target-node-item .node-info .node-ip {
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .target-node-item {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+    
+    .target-node-item .node-status {
+        align-items: flex-start;
+        min-width: auto;
+        text-align: left;
+    }
+    
+    .status-indicator {
+        min-width: auto;
+        width: fit-content;
+    }
+}
+
+/* Upload progress info styles */
+.upload-progress-info {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-secondary);
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+.upload-progress-info .overall-progress {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.upload-progress-info .progress-bar-container {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-primary);
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid var(--border-primary);
+}
+
+.upload-progress-info .progress-bar {
+    height: 100%;
+    transition: width 0.3s ease;
+}
+
+.upload-progress-info .progress-text {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    min-width: 120px;
+    text-align: right;
+}
+
+.upload-progress-info .progress-summary {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-style: italic;
+}
+
+.target-node-item .node-ip {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.85rem;
+    color: var(--text-tertiary);
+}
+
+#firmware-progress-container {
+    flex: 1;
+    min-height: 200px;
+}
+
+/* Firmware Upload Progress Styles */
+.firmware-upload-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.progress-header {
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-secondary);
+}
+
+.progress-header h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.progress-info {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.overall-progress {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.progress-bar-container {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-primary);
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid var(--border-primary);
+}
+
+.progress-bar {
+    height: 100%;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+.progress-text {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    min-width: 120px;
+}
+
+.progress-summary {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.progress-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.progress-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-secondary);
+}
+
+.progress-node-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.progress-node-info .node-name {
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.progress-node-info .node-ip {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+}
+
+.progress-status {
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+}
+
+.progress-status.success {
+    background: rgba(74, 222, 128, 0.2);
+    color: var(--accent-primary);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+}
+
+.progress-status.error {
+    background: rgba(248, 113, 113, 0.2);
+    color: var(--accent-error);
+    border: 1px solid rgba(248, 113, 113, 0.3);
+}
+
+.progress-status.uploading {
+    background: rgba(251, 191, 36, 0.2);
+    color: var(--accent-warning);
+    border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+.progress-time {
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+/* Firmware Upload Progress Overlay */
+.firmware-upload-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    z-index: 9998; /* Lower than drawer (1000) but higher than main content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s ease; /* Smooth transition when drawer opens/closes */
+}
+
+/* When drawer is open, adjust overlay to only cover left side */
+.firmware-upload-overlay.drawer-open {
+    width: calc(100% - clamp(33.333vw, 650px, 90vw));
+    justify-content: center;
+    align-items: center;
+    padding-left: 0;
+}
+
+.overlay-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 2rem;
+    background: var(--bg-primary);
+    border-radius: 16px;
+    border: 1px solid var(--border-primary);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    max-width: 400px;
+    text-align: center;
+}
+
+.overlay-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-spinner .spinner {
+    width: 48px;
+    height: 48px;
+    color: var(--accent-primary);
+    animation: spin 1s linear infinite;
+}
+
+.overlay-text {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    text-align: center;
+}
+
+.overlay-subtext {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    text-align: center;
+    opacity: 0.8;
+}
+
 /* Only enable drawer on wider screens; on small keep inline cards */
 @media (max-width: 1023px) {
     .details-drawer { display: none; }
+    
+    /* On mobile, overlay covers full screen since drawer is not used */
+    .firmware-upload-overlay.drawer-open {
+        width: 100%;
+        justify-content: center;
+        padding-left: 0;
+    }
+}
+
+/* Responsive adjustments for firmware upload controls */
+@media (max-width: 768px) {
+    .file-input-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+    }
+    
+    .file-input-left {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
+    }
+    
+    .upload-btn-compact,
+    .deploy-btn-compact {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .file-info {
+        text-align: center;
+        order: -1; /* Show file info first on mobile */
+    }
 }
 
 /* Terminal Panel - bottom-centered modal style */
@@ -4854,9 +5500,9 @@ html {
     margin-right: 0.25rem;
 }
 
-.node-status {
+
-    margin-bottom: 0.75rem;
+
-}
+
 
 .node-labels {
     margin-bottom: 0.75rem;
@@ -5454,3 +6100,131 @@ html {
         justify-content: center;
     }
 }
+
+/* Overlay Dialog Styles */
+.overlay-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.overlay-dialog.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.overlay-dialog-content {
+    background: linear-gradient(135deg, #1c2a38 0%, #283746 50%, #1a252f 100%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    max-height: 90vh;
+    overflow: hidden;
+    transform: scale(0.9) translateY(20px);
+    transition: all 0.3s ease;
+}
+
+.overlay-dialog.visible .overlay-dialog-content {
+    transform: scale(1) translateY(0);
+}
+
+.overlay-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 24px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.overlay-dialog-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #ecf0f1;
+    margin: 0;
+}
+
+.overlay-dialog-close {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ecf0f1;
+}
+
+.overlay-dialog-body {
+    padding: 16px 24px;
+}
+
+.overlay-dialog-message {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0;
+    white-space: normal;
+}
+
+.overlay-dialog-footer {
+    display: flex;
+    gap: 12px;
+    padding: 16px 24px 24px;
+    justify-content: flex-end;
+}
+
+.overlay-dialog-btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    min-width: 80px;
+}
+
+.overlay-dialog-btn-cancel {
+    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.2);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.overlay-dialog-btn-cancel: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.3);
+    color: #ecf0f1;
+    transform: translateY(-1px);
+}
+
+.overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+.overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}

public/styles/theme.css

@@ -1095,6 +1095,61 @@
     }
 }
 
+/* Overlay Dialog Light Theme Styles */
+[data-theme="light"] .overlay-dialog-content {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
+}
+
+[data-theme="light"] .overlay-dialog-header {
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="light"] .overlay-dialog-title {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+}
+
+[data-theme="light"] .overlay-dialog-close {
+    color: var(--text-tertiary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-message {
+    color: var(--text-secondary) !important;
+    white-space: normal;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.05) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: var(--text-secondary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel:hover {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.08) 100%);
+    border-color: rgba(148, 163, 184, 0.3);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
 /* Ultra-specific mobile navigation override for light theme */
 @media (max-width: 768px) {
     html[data-theme="light"] .main-navigation.mobile-open .nav-left {
@@ -1246,3 +1301,58 @@
         box-shadow: 0 6px 20px rgba(148, 163, 184, 0.15) !important;
     }
 }
+
+/* Overlay Dialog Light Theme Styles */
+[data-theme="light"] .overlay-dialog-content {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
+    backdrop-filter: blur(24px);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
+}
+
+[data-theme="light"] .overlay-dialog-header {
+    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="light"] .overlay-dialog-title {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+}
+
+[data-theme="light"] .overlay-dialog-close {
+    color: var(--text-tertiary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-close:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-message {
+    color: var(--text-secondary) !important;
+    white-space: normal;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.05) 100%);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    color: var(--text-secondary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-cancel:hover {
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.08) 100%);
+    border-color: rgba(148, 163, 184, 0.3);
+    color: var(--text-primary) !important;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: 1px solid #3b82f6;
+    color: white;
+}
+
+[data-theme="light"] .overlay-dialog-btn-confirm:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    border-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}