fix(setup): animate the progress bar at 0% so a slow download start isn't read as frozen

NCBI can take a while to begin streaming the 419 MB ClinVar file. The bar sat at
a static 0% during that connect/first-bytes window, looking stuck. Treat pct<=0
(not just <0) as indeterminate and drop the inline width so the animated CSS
actually shows. Applied to both the /setup page and the Settings download button.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: dimas-amendes

templates/settings.html

@@ -223,10 +223,13 @@ <h3 class="card-title"><i class="ti ti-trash" style="color:var(--red)"></i> {{ t
       fetch('/api/setup/status').then(r => r.json()).then(s => {
         const it = s.items[key];
         if (it && fill) {
-          const indet = it.pct < 0 && !it.done;
+          // Animate at 0% too (connecting / first bytes), so a slow start
+          // doesn't look frozen.
+          const indet = !it.done && it.pct <= 0;
           const width = it.done ? 100 : (it.pct < 0 ? 0 : it.pct);
           fill.classList.toggle('indet', indet);
-          fill.style.width = width + '%';
+          // Clear inline width when indeterminate so the .indet CSS (40% + slide) animates.
+          fill.style.width = indet ? '' : (width + '%');
           if (pct) {
             const ph = it.done ? '' : (PHASE_LABELS[it.phase] ? PHASE_LABELS[it.phase] + ' ' : '');
             pct.textContent = it.done ? '100%' : (indet ? '…' : ph + width + '%');

templates/setup.html

@@ -193,14 +193,16 @@ <h1 class="page-title">{{ t.setup_title }}</h1>
   const wrap = document.getElementById('progress-wrap');
   let html = '';
   for (const [name, it] of Object.entries(items)) {
-    const indet = it.pct < 0 && !it.done;               // only when no percent
+    // Animate at 0% too (connecting / first bytes / queued): a static 0% bar
+    // reads as "frozen" while NCBI is slow to start the 419 MB transfer.
+    const indet = !it.done && it.pct <= 0;
     const pct = it.done ? 100 : (it.pct < 0 ? 0 : it.pct);
     const phase = it.done ? '' : (PHASE_LABELS[it.phase] ? ' · ' + PHASE_LABELS[it.phase] : '');
     html += '<div class="prog-row">'
       + '<div class="prog-label"><span>' + (LABELS[name] || name) + phase + '</span>'
       + '<span>' + (it.done ? '100%' : (indet ? '…' : pct + '%')) + '</span></div>'
       + '<div class="prog-bar"><div class="prog-fill ' + (indet ? 'indeterminate' : '')
-      + '" style="width:' + pct + '%"></div></div></div>';
+      + '"' + (indet ? '' : ' style="width:' + pct + '%"') + '></div></div></div>';
   }
   wrap.innerHTML = html;
 }