feat(download): enhance download progress ui with transfer stats

static/css/components/loading.css

@@ -103,6 +103,23 @@
     opacity: 0.7;
 }
 
+.download-transfer-stats {
+    margin-top: var(--space-2);
+    font-size: 0.85rem;
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.download-transfer-stats .download-transfer-bytes,
+.download-transfer-stats .download-transfer-speed {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    white-space: nowrap;
+}
+
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
@@ -114,4 +131,4 @@
     .current-item-bar {
         transition: none;
     }
-}
+}

static/js/managers/DownloadManager.js

@@ -453,7 +453,13 @@ export class DownloadManager {
                 }
                 
                 if (data.status === 'progress' && data.download_id === downloadId) {
-                    updateProgress(data.progress, 0, this.currentVersion.name);
+                    const metrics = {
+                        bytesDownloaded: data.bytes_downloaded,
+                        totalBytes: data.total_bytes,
+                        bytesPerSecond: data.bytes_per_second
+                    };
+
+                    updateProgress(data.progress, 0, this.currentVersion.name, metrics);
                     
                     if (data.progress < 3) {
                         this.loadingManager.setStatus(translate('modals.download.status.preparing'));

static/js/managers/LoadingManager.js

@@ -1,3 +1,6 @@
+import { translate } from '../utils/i18nHelpers.js';
+import { formatFileSize } from '../utils/formatters.js';
+
 // Loading management
 export class LoadingManager {
     constructor() {
@@ -65,7 +68,7 @@ export class LoadingManager {
     
     // Show enhanced progress for downloads
     showDownloadProgress(totalItems = 1) {
-        this.show('Preparing download...', 0);
+        this.show(translate('modals.download.status.preparing', {}, 'Preparing download...'), 0);
         
         // Create details container
         const detailsContainer = this.createDetailsContainer();
@@ -76,7 +79,7 @@ export class LoadingManager {
         
         const currentItemLabel = document.createElement('div');
         currentItemLabel.className = 'current-item-label';
-        currentItemLabel.textContent = 'Current file:';
+        currentItemLabel.textContent = translate('modals.download.progress.currentFile', {}, 'Current file:');
         
         const currentItemBar = document.createElement('div');
         currentItemBar.className = 'current-item-bar-container';
@@ -105,16 +108,96 @@ export class LoadingManager {
         
         // Add current item progress to container
         detailsContainer.appendChild(currentItemContainer);
+
+        // Create transfer stats container
+        const transferStats = document.createElement('div');
+        transferStats.className = 'download-transfer-stats';
+
+        const bytesDetail = document.createElement('div');
+        bytesDetail.className = 'download-transfer-bytes';
+        bytesDetail.textContent = translate(
+            'modals.download.progress.transferredUnknown',
+            {},
+            'Transferred: --'
+        );
+
+        const speedDetail = document.createElement('div');
+        speedDetail.className = 'download-transfer-speed';
+        speedDetail.textContent = translate(
+            'modals.download.progress.speed',
+            { speed: '--' },
+            'Speed: --'
+        );
+
+        transferStats.appendChild(bytesDetail);
+        transferStats.appendChild(speedDetail);
+        detailsContainer.appendChild(transferStats);
+
+        const formatMetricSize = (value) => {
+            if (value === undefined || value === null || isNaN(value)) {
+                return '--';
+            }
+            if (value < 1) {
+                return '0 B';
+            }
+            return formatFileSize(value);
+        };
+
+        const updateTransferStats = (metrics = {}) => {
+            const { bytesDownloaded, totalBytes, bytesPerSecond } = metrics;
+
+            if (bytesDetail) {
+                const formattedDownloaded = formatMetricSize(bytesDownloaded);
+                const formattedTotal = formatMetricSize(totalBytes);
+
+                if (formattedDownloaded === '--' && formattedTotal === '--') {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferredUnknown',
+                        {},
+                        'Transferred: --'
+                    );
+                } else if (formattedTotal === '--') {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferredSimple',
+                        { downloaded: formattedDownloaded },
+                        `Transferred: ${formattedDownloaded}`
+                    );
+                } else {
+                    bytesDetail.textContent = translate(
+                        'modals.download.progress.transferred',
+                        { downloaded: formattedDownloaded, total: formattedTotal },
+                        `Transferred: ${formattedDownloaded} / ${formattedTotal}`
+                    );
+                }
+            }
+
+            if (speedDetail) {
+                const formattedSpeed = formatMetricSize(bytesPerSecond);
+                const displaySpeed = formattedSpeed === '--' ? '--' : `${formattedSpeed}/s`;
+                speedDetail.textContent = translate(
+                    'modals.download.progress.speed',
+                    { speed: displaySpeed },
+                    `Speed: ${displaySpeed}`
+                );
+            }
+        };
+
+        // Initialize transfer stats with empty data
+        updateTransferStats();
         
         // Return update function
-        return (currentProgress, currentIndex = 0, currentName = '') => {
+        return (currentProgress, currentIndex = 0, currentName = '', metrics = {}) => {
             // Update current item progress
             currentItemProgress.style.width = `${currentProgress}%`;
             currentItemPercent.textContent = `${Math.floor(currentProgress)}%`;
             
             // Update current item label if name provided
             if (currentName) {
-                currentItemLabel.textContent = `Downloading: ${currentName}`;
+                currentItemLabel.textContent = translate(
+                    'modals.download.progress.downloading',
+                    { name: currentName },
+                    `Downloading: ${currentName}`
+                );
             }
             
             // Update overall label if multiple items
@@ -128,6 +211,8 @@ export class LoadingManager {
                 // Single item, just update main progress
                 this.setProgress(currentProgress);
             }
+
+            updateTransferStats(metrics);
         };
     }
 
@@ -176,4 +261,4 @@ export class LoadingManager {
     restoreProgressBar() {
         this.progressBar.style.display = 'block';
     }
-}
+}

static/js/managers/import/DownloadManager.js

@@ -164,7 +164,13 @@ export class DownloadManager {
                 const loraName = currentLora ? currentLora.name : '';
                 
                 // Update progress display
-                updateProgress(currentLoraProgress, completedDownloads, loraName);
+                const metrics = {
+                    bytesDownloaded: data.bytes_downloaded,
+                    totalBytes: data.total_bytes,
+                    bytesPerSecond: data.bytes_per_second
+                };
+
+                updateProgress(currentLoraProgress, completedDownloads, loraName, metrics);
                 
                 // Add more detailed status messages based on progress
                 if (currentLoraProgress < 3) {