fix: harden model download pipeline and progress UI

gabrielste1n · gabrielste1n · commit fcf146f4fc71 · 2026-02-12T11:02:08.000-08:00
Inline redirect handling in downloadUtils (eliminates separate HEAD
resolve step), defer write stream creation until response type is known,
and add expectedSize fallback for servers omitting Content-Length.

Add indeterminate progress bar state for downloads with unknown total
size, validate all 4 required Parakeet ONNX files after extraction, and
fix progress bar rendering empty container when no speed/eta data.
diff --git a/src/components/ui/DownloadProgressBar.tsx b/src/components/ui/DownloadProgressBar.tsx
@@ -5,34 +5,46 @@ interface DownloadProgressBarProps {
   isInstalling?: boolean;
 }
 
+function formatBytes(bytes: number): string {
+  if (bytes < 1_000_000) return `${Math.round(bytes / 1000)}KB`;
+  if (bytes < 1_000_000_000) return `${(bytes / 1_000_000).toFixed(1)}MB`;
+  return `${(bytes / 1_000_000_000).toFixed(2)}GB`;
+}
+
 export function DownloadProgressBar({
   modelName,
   progress,
   isInstalling,
 }: DownloadProgressBarProps) {
-  const { percentage, speed, eta } = progress;
+  const { percentage, downloadedBytes, totalBytes, speed, eta } = progress;
   const pct = Math.round(percentage);
   const speedText = speed ? `${speed.toFixed(1)} MB/s` : "";
   const etaText = eta ? formatETA(eta) : "";
+  const indeterminate = !isInstalling && totalBytes === 0 && downloadedBytes > 0;
 
   return (
     <div className="px-2.5 py-2 border-b border-white/5 dark:border-border-subtle">
       <div className="flex items-center gap-2 mb-2">
         {/* Compact percentage with LED glow */}
         <div className="relative flex items-center justify-center w-6 h-6">
           <div
-            className={`absolute inset-0 rounded-md bg-primary/15 ${isInstalling ? "animate-pulse" : ""}`}
+            className={`absolute inset-0 rounded-md bg-primary/15 ${isInstalling || indeterminate ? "animate-pulse" : ""}`}
           />
           <span className="relative text-[10px] font-bold text-primary tabular-nums">
-            {isInstalling ? "..." : `${pct}%`}
+            {isInstalling ? "..." : indeterminate ? "···" : `${pct}%`}
           </span>
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-xs font-medium text-foreground truncate">
             {isInstalling ? `Installing ${modelName}` : `Downloading ${modelName}`}
           </p>
-          {!isInstalling && (speedText || etaText) && (
+          {!isInstalling && (indeterminate || speedText || etaText) && (
             <div className="flex items-center gap-1.5 mt-0.5">
+              {indeterminate && (
+                <span className="text-[10px] text-muted-foreground/70 tabular-nums">
+                  {formatBytes(downloadedBytes)}
+                </span>
+              )}
               {speedText && (
                 <span className="text-[10px] text-muted-foreground/70 tabular-nums">
                   {speedText}
@@ -51,20 +63,24 @@ export function DownloadProgressBar({
         </div>
       </div>
 
-      {/* Progress bar - thinner, premium */}
+      {/* Progress bar */}
       <div
         className="w-full rounded-full overflow-hidden bg-white/5 dark:bg-white/3"
         style={{ height: 4 }}
       >
-        <div
-          className={`${isInstalling ? "animate-pulse" : ""} bg-primary shadow-[0_0_8px_oklch(0.62_0.22_260/0.4)]`}
-          style={{
-            height: "100%",
-            width: `${isInstalling ? 100 : Math.min(percentage, 100)}%`,
-            borderRadius: 9999,
-            transition: "width 300ms ease-out",
-          }}
-        />
+        {indeterminate ? (
+          <div className="h-full w-1/3 rounded-full bg-primary shadow-[0_0_8px_oklch(0.62_0.22_260/0.4)] animate-[indeterminate_1.5s_ease-in-out_infinite]" />
+        ) : (
+          <div
+            className={`${isInstalling ? "animate-pulse" : ""} bg-primary shadow-[0_0_8px_oklch(0.62_0.22_260/0.4)]`}
+            style={{
+              height: "100%",
+              width: `${isInstalling ? 100 : Math.min(percentage, 100)}%`,
+              borderRadius: 9999,
+              transition: "width 300ms ease-out",
+            }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/helpers/downloadUtils.js b/src/helpers/downloadUtils.js
@@ -39,83 +39,39 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-function resolveRedirects(url, timeout) {
-  return new Promise((resolve, reject) => {
-    let redirectCount = 0;
-
-    const follow = (currentUrl) => {
-      if (redirectCount > MAX_REDIRECTS) {
-        reject(Object.assign(new Error("Too many redirects"), { isHttpError: true }));
-        return;
-      }
-
-      const client = currentUrl.startsWith("https") ? https : http;
-      const parsed = new URL(currentUrl);
-      const req = client.request({
-        method: "HEAD",
-        hostname: parsed.hostname,
-        port: parsed.port,
-        path: parsed.pathname + parsed.search,
-        timeout,
-        headers: { "User-Agent": USER_AGENT },
-      });
-
-      req.on("response", (res) => {
-        res.resume();
-        if (
-          res.statusCode === 301 ||
-          res.statusCode === 302 ||
-          res.statusCode === 303 ||
-          res.statusCode === 307 ||
-          res.statusCode === 308
-        ) {
-          const location = res.headers.location;
-          if (!location) {
-            reject(
-              Object.assign(new Error("Redirect without location header"), { isHttpError: true })
-            );
-            return;
-          }
-          redirectCount++;
-          follow(location);
-          return;
-        }
-        resolve({ finalUrl: currentUrl, statusCode: res.statusCode });
-      });
-
-      req.on("error", reject);
-      req.on("timeout", () => {
-        req.destroy();
-        reject(Object.assign(new Error("Timeout resolving redirects"), { code: "ETIMEDOUT" }));
-      });
-
-      req.end();
-    };
-
-    follow(url);
-  });
-}
+function downloadAttempt(url, tempPath, options) {
+  const {
+    timeout,
+    onProgress,
+    signal,
+    startOffset = 0,
+    expectedSize = 0,
+    _redirects = 0,
+  } = options;
 
-function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffset }) {
   return new Promise((resolve, reject) => {
     if (signal?.aborted) {
       reject(Object.assign(new Error("Download cancelled"), { isAbort: true }));
       return;
     }
 
+    if (_redirects > MAX_REDIRECTS) {
+      reject(Object.assign(new Error("Too many redirects"), { isHttpError: true }));
+      return;
+    }
+
     const headers = { "User-Agent": USER_AGENT };
     if (startOffset > 0) {
       headers["Range"] = `bytes=${startOffset}-`;
     }
 
     const client = url.startsWith("https") ? https : http;
-    let activeFile = fs.createWriteStream(tempPath, { flags: startOffset > 0 ? "a" : "w" });
-
+    let request = null;
+    let activeFile = null;
+    let stallTimer = null;
     let downloadedSize = startOffset;
     let totalSize = 0;
     let lastProgressUpdate = 0;
-    let request = null;
-    let stallTimer = null;
 
     const cleanup = () => {
       if (stallTimer) {
@@ -126,7 +82,10 @@ function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffs
         request.destroy();
         request = null;
       }
-      activeFile.destroy();
+      if (activeFile) {
+        activeFile.destroy();
+        activeFile = null;
+      }
     };
 
     const onAbort = () => {
@@ -140,20 +99,44 @@ function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffs
 
     request = client.get(url, { headers, timeout }, (response) => {
       if (signal?.aborted) {
+        response.resume();
         cleanup();
         reject(Object.assign(new Error("Download cancelled"), { isAbort: true }));
         return;
       }
 
       const statusCode = response.statusCode;
 
+      // Follow redirects inline — no separate HEAD resolve step needed
+      if (statusCode >= 300 && statusCode < 400) {
+        response.resume();
+        if (signal) signal.onAbort = null;
+        if (request) {
+          request.destroy();
+          request = null;
+        }
+        const location = response.headers.location;
+        if (!location) {
+          reject(
+            Object.assign(new Error("Redirect without location header"), { isHttpError: true })
+          );
+          return;
+        }
+        downloadAttempt(location, tempPath, { ...options, _redirects: _redirects + 1 }).then(
+          resolve,
+          reject
+        );
+        return;
+      }
+
+      // Content response — create write stream
       if (statusCode === 200 && startOffset > 0) {
         // Server doesn't support Range — restart from beginning
         downloadedSize = 0;
-        activeFile.destroy();
         activeFile = fs.createWriteStream(tempPath, { flags: "w" });
         totalSize = parseInt(response.headers["content-length"], 10) || 0;
       } else if (statusCode === 206) {
+        activeFile = fs.createWriteStream(tempPath, { flags: "a" });
         const contentRange = response.headers["content-range"];
         if (contentRange) {
           const match = contentRange.match(/\/(\d+)$/);
@@ -164,8 +147,10 @@ function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffs
           totalSize = startOffset + contentLength;
         }
       } else if (statusCode === 200) {
+        activeFile = fs.createWriteStream(tempPath, { flags: "w" });
         totalSize = parseInt(response.headers["content-length"], 10) || 0;
       } else {
+        response.resume();
         cleanup();
         const err = new Error(`HTTP ${statusCode}`);
         err.isHttpError = true;
@@ -174,6 +159,11 @@ function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffs
         return;
       }
 
+      // Fall back to caller-provided expected size when Content-Length is missing
+      if (totalSize <= 0 && expectedSize > 0) {
+        totalSize = expectedSize;
+      }
+
       const resetStallTimer = () => {
         if (stallTimer) clearTimeout(stallTimer);
         stallTimer = setTimeout(() => {
@@ -240,9 +230,12 @@ function downloadAttempt(url, tempPath, { timeout, onProgress, signal, startOffs
     });
 
     function emitProgress() {
-      if (!onProgress || totalSize <= 0) return;
+      if (!onProgress) return;
       const now = Date.now();
-      if (now - lastProgressUpdate >= PROGRESS_THROTTLE_MS || downloadedSize >= totalSize) {
+      if (
+        now - lastProgressUpdate >= PROGRESS_THROTTLE_MS ||
+        (totalSize > 0 && downloadedSize >= totalSize)
+      ) {
         lastProgressUpdate = now;
         onProgress(downloadedSize, totalSize);
       }
@@ -256,6 +249,7 @@ async function downloadFile(url, destPath, options = {}) {
     timeout = DEFAULT_TIMEOUT,
     maxRetries = DEFAULT_MAX_RETRIES,
     signal,
+    expectedSize = 0,
   } = options;
 
   const tempPath = `${destPath}.tmp`;
@@ -273,8 +267,6 @@ async function downloadFile(url, destPath, options = {}) {
     // No existing temp file
   }
 
-  const { finalUrl } = await resolveRedirects(url, timeout);
-
   let lastError = null;
 
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
@@ -297,7 +289,13 @@ async function downloadFile(url, destPath, options = {}) {
     }
 
     try {
-      await downloadAttempt(finalUrl, tempPath, { timeout, onProgress, signal, startOffset });
+      await downloadAttempt(url, tempPath, {
+        timeout,
+        onProgress,
+        signal,
+        startOffset,
+        expectedSize,
+      });
 
       // Atomic move to final path
       try {
diff --git a/src/helpers/parakeet.js b/src/helpers/parakeet.js
@@ -299,6 +299,7 @@ class ParakeetManager {
         await downloadFile(modelConfig.url, archivePath, {
           timeout: 600000,
           signal,
+          expectedSize: modelConfig.size,
           onProgress: (downloadedBytes, totalBytes) => {
             if (progressCallback) {
               progressCallback({
@@ -411,9 +412,15 @@ class ParakeetManager {
         }
       }
 
-      const encoderPath = path.join(targetDir, "encoder.int8.onnx");
-      if (!fs.existsSync(encoderPath)) {
-        throw new Error("Extracted model is missing required files (encoder.int8.onnx)");
+      const requiredFiles = [
+        "encoder.int8.onnx",
+        "decoder.int8.onnx",
+        "joiner.int8.onnx",
+        "tokens.txt",
+      ];
+      const missing = requiredFiles.filter((f) => !fs.existsSync(path.join(targetDir, f)));
+      if (missing.length > 0) {
+        throw new Error(`Extracted model is missing required files: ${missing.join(", ")}`);
       }
 
       await fsPromises.rm(extractDir, { recursive: true, force: true });
diff --git a/src/helpers/whisper.js b/src/helpers/whisper.js
@@ -405,6 +405,7 @@ class WhisperManager {
       await downloadFile(modelConfig.url, modelPath, {
         timeout: 600000,
         signal,
+        expectedSize: modelConfig.size,
         onProgress: (downloadedBytes, totalBytes) => {
           if (progressCallback) {
             progressCallback({
diff --git a/src/index.css b/src/index.css
@@ -421,6 +421,16 @@ a:hover {
   }
 }
 
+/* Indeterminate progress bar sweep */
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
