fix: bugs in general

static/js/box.js

@@ -13,6 +13,7 @@ const toast = document.querySelector("#toast");
 const zipOnly = boxPanel && boxPanel.dataset.zipOnly === "true";
 
 let contextFile = null;
+let lastStatusSignature = "";
 
 function htmlEscape(value) {
     return String(value || "")
@@ -149,7 +150,7 @@ async function previewFile(item) {
             const response = await fetch(url);
             if (!response.ok) throw new Error("Preview failed");
             const text = await response.text();
-            openPopup(`${data.name} preview`, `<code class="code-block preview-frame is-text">${htmlEscape(text.slice(0, 120000))}</code>`, { preview: true });
+            openPopup(`${data.name} preview`, `<pre class="code-block preview-frame is-text"><code>${htmlEscape(text.slice(0, 120000))}</code></pre>`, { preview: true });
         } catch (_) {
             showToast("The browser could not load a text preview.", "error");
         }
@@ -214,9 +215,13 @@ async function refreshBoxStatus() {
 
     const boxID = boxPanel.dataset.boxId;
     const response = await fetch(`/box/${boxID}/status`);
-    if (!response.ok) return true;
+    if (!response.ok) return { changed: false, hasLoadingFiles: true };
 
     const result = await response.json();
+    const signature = statusSignature(result);
+    const changed = signature !== lastStatusSignature;
+    lastStatusSignature = signature;
+
     if (boxExpiryMeta && typeof result.expires_at === "string") {
         boxExpiryMeta.dataset.expiresAt = result.expires_at;
         updateExpiryCountdown();
@@ -228,11 +233,73 @@ async function refreshBoxStatus() {
         boxStatus.textContent = `${completeCount}/${result.files.length} ready`;
     }
 
-    return result.files.some((file) => {
+    const hasLoadingFiles = result.files.some((file) => {
         const isUploading = file.status === "pending" || file.status === "uploading";
         const isWaitingForThumbnail = file.status === "complete" && !file.thumbnail_status && !file.thumbnail_path;
         return isUploading || isWaitingForThumbnail || file.thumbnail_status === "processing";
     });
+
+    return { changed, hasLoadingFiles };
+}
+
+function statusSignature(result) {
+    const files = Array.isArray(result.files) ? result.files : [];
+    return JSON.stringify({
+        expiresAt: result.expires_at || "",
+        files: files.map((file) => ({
+            id: file.id,
+            status: file.status,
+            size: file.size,
+            thumbnailPath: file.thumbnail_path || "",
+            thumbnailStatus: file.thumbnail_status || "",
+            downloadPath: file.download_path || "",
+        })),
+    });
+}
+
+function pollingStages(baseMS) {
+    return [
+        { interval: baseMS, attempts: 10 },
+        { interval: baseMS * 2, attempts: 20 },
+        { interval: baseMS * 10, attempts: 100 },
+    ];
+}
+
+function startStagedPolling(baseMS) {
+    const stages = pollingStages(baseMS);
+    let stageIndex = 0;
+    let attemptsInStage = 0;
+    let stopped = false;
+
+    const tick = async () => {
+        if (stopped) return;
+        const stage = stages[stageIndex];
+        try {
+            const result = await refreshBoxStatus();
+            if (result.changed) {
+                stageIndex = 0;
+                attemptsInStage = 0;
+            } else {
+                attemptsInStage += 1;
+                if (attemptsInStage >= stage.attempts) {
+                    stageIndex += 1;
+                    attemptsInStage = 0;
+                    if (stageIndex >= stages.length) {
+                        stopped = true;
+                        return;
+                    }
+                }
+            }
+        } catch (_) {
+            attemptsInStage += 1;
+        }
+
+        if (!stopped) {
+            window.setTimeout(tick, stages[stageIndex].interval);
+        }
+    };
+
+    window.setTimeout(tick, stages[0].interval);
 }
 
 document.addEventListener("click", (event) => {
@@ -296,12 +363,5 @@ setInterval(updateExpiryCountdown, 1000);
 
 if (boxPanel) {
     const pollMS = Number.parseInt(boxPanel.dataset.pollMs, 10) || 5000;
-    const timer = setInterval(async () => {
-        try {
-            const hasLoadingFiles = await refreshBoxStatus();
-            if (!hasLoadingFiles) clearInterval(timer);
-        } catch (_) {
-            // Keep polling through temporary network/server hiccups.
-        }
-    }, pollMS);
+    startStagedPolling(pollMS);
 }