feat: B4 - progressbar

webui/html/app.js

@@ -381,6 +381,59 @@ function selectedItemCountLabel(totalItems) {
   return `${totalItems} selected item${totalItems === 1 ? "" : "s"}`;
 }
 
+function archiveTaskStatusLabel(status) {
+  switch (status) {
+    case "requested":
+      return "Requested";
+    case "preparing":
+      return "Preparing";
+    case "ready":
+      return "Ready";
+    case "failed":
+      return "Failed";
+    case "cancelled":
+      return "Cancelled";
+    default:
+      return "Preparing";
+  }
+}
+
+function archiveTaskCountText(task) {
+  if (typeof task.done_items === "number" && typeof task.total_items === "number") {
+    return `${task.done_items}/${task.total_items} top-level items`;
+  }
+  if (typeof task.total_items === "number") {
+    return `0/${task.total_items} top-level items`;
+  }
+  if (task.status === "requested") {
+    return "Waiting for archive worker";
+  }
+  return "Preparing archive";
+}
+
+function archiveTaskCurrentItemText(task) {
+  if (task.current_item) {
+    return `Current: ${task.current_item}`;
+  }
+  if (task.status === "requested") {
+    return `Selection: ${selectedItemCountLabel(downloadProgressState.totalItems)}`;
+  }
+  if (task.status === "ready") {
+    return `Prepared ${selectedItemCountLabel(downloadProgressState.totalItems)}`;
+  }
+  return `Selection: ${selectedItemCountLabel(downloadProgressState.totalItems)}`;
+}
+
+function archiveTaskProgressPercent(task) {
+  if (task.status === "ready") {
+    return 100;
+  }
+  if (typeof task.done_items === "number" && typeof task.total_items === "number" && task.total_items > 0) {
+    return Math.max(0, Math.min(100, Math.round((task.done_items / task.total_items) * 100)));
+  }
+  return 0;
+}
+
 function isDownloadModalOpen() {
   return !downloadModalElements().overlay.classList.contains("hidden");
 }
@@ -420,29 +473,14 @@ function openZipDownloadModal(selectedItems) {
   setDownloadModalVisible(true);
   updateDownloadModalDisplay({
     active: true,
-    targetText: "Preparing download...",
+    targetText: "Archive download requested",
     currentFileText: `Selection: ${selectedItemCountLabel(selectedItems.length)}`,
-    countText: "Preparing zip download",
-    statusText: "Preparing download...",
-    percent: 20,
+    countText: "Waiting for archive task",
+    statusText: "Requested",
+    percent: 0,
     cancelVisible: true,
     cancelDisabled: true,
   });
-  requestAnimationFrame(() => {
-    if (!downloadProgressState.active) {
-      return;
-    }
-    updateDownloadModalDisplay({
-      active: true,
-      targetText: "Preparing download...",
-      currentFileText: `Packaging ${selectedItemCountLabel(downloadProgressState.totalItems)}`,
-      countText: "Zip preflight and packaging",
-      statusText: "Preparing download...",
-      percent: 55,
-      cancelVisible: true,
-      cancelDisabled: !downloadProgressState.taskId || downloadProgressState.cancelRequested,
-    });
-  });
 }
 
 function markZipDownloadReady(fileName) {
@@ -451,10 +489,10 @@ function markZipDownloadReady(fileName) {
   downloadProgressState.archiveLabel = fileName || "ZIP archive";
   updateDownloadModalDisplay({
     active: false,
-    targetText: `Download started: ${downloadProgressState.archiveLabel}`,
+    targetText: `Archive ready: ${downloadProgressState.archiveLabel}`,
     currentFileText: `Prepared ${selectedItemCountLabel(downloadProgressState.totalItems)}`,
-    countText: "Browser download started",
-    statusText: "Download started",
+    countText: "Browser download requested",
+    statusText: "Ready",
     percent: 100,
     cancelVisible: false,
   });
@@ -466,10 +504,10 @@ function markZipDownloadFailed(err) {
   downloadProgressState.cancelRequested = false;
   updateDownloadModalDisplay({
     active: false,
-    targetText: "Preparing download...",
+    targetText: "Archive prepare failed",
     currentFileText: `Selection: ${selectedItemCountLabel(downloadProgressState.totalItems)}`,
-    countText: "Zip download failed",
-    statusText: err.message || "Download failed",
+    countText: "Archive task failed",
+    statusText: `Failed: ${err.message || "Archive download failed"}`,
     percent: 0,
     cancelVisible: false,
   });
@@ -480,10 +518,10 @@ function markZipDownloadCancelled() {
   downloadProgressState.cancelRequested = false;
   updateDownloadModalDisplay({
     active: false,
-    targetText: "Download cancelled",
+    targetText: "Archive prepare cancelled",
     currentFileText: `Selection: ${selectedItemCountLabel(downloadProgressState.totalItems)}`,
-    countText: "Zip download cancelled",
-    statusText: "Download cancelled",
+    countText: "Archive task cancelled",
+    statusText: "Cancelled",
     percent: 0,
     cancelVisible: false,
   });
@@ -495,11 +533,11 @@ function updateZipDownloadTaskProgress(task) {
   }
   updateDownloadModalDisplay({
     active: true,
-    targetText: "Preparing download...",
-    currentFileText: task.current_item ? `Current: ${task.current_item}` : `Selection: ${selectedItemCountLabel(downloadProgressState.totalItems)}`,
-    countText: task.total_items ? `${task.done_items || 0}/${task.total_items} top-level items` : "Preparing zip download",
-    statusText: downloadProgressState.cancelRequested ? "Cancelling download..." : task.status === "ready" ? "Download started" : "Preparing download...",
-    percent: task.status === "ready" ? 100 : 55,
+    targetText: "Archive download task",
+    currentFileText: archiveTaskCurrentItemText(task),
+    countText: archiveTaskCountText(task),
+    statusText: downloadProgressState.cancelRequested ? "Cancelling download..." : archiveTaskStatusLabel(task.status),
+    percent: archiveTaskProgressPercent(task),
     cancelVisible: true,
     cancelDisabled: !downloadProgressState.taskId || downloadProgressState.cancelRequested,
   });
@@ -720,7 +758,7 @@ async function startDownloadSelected() {
       const created = await createArchiveDownloadTask(selectedPaths);
       downloadProgressState.taskId = created.task_id;
       updateZipDownloadTaskProgress({
-        status: "preparing",
+        status: created.status || "requested",
         current_item: null,
         done_items: 0,
         total_items: selectedItems.length,