v0.2.1 - Model download with %% progress

Backend:
- download.py module: drives ./hf-download.sh <repo> [-c --copy-parallel] over SSH, parses tqdm output (regex matches '8%|...| 2.06G/25.1G [03:20<18:35, 20.6MB/s]') into percent + bytes done/total + elapsed + ETA + rate
- DownloadManager: in-memory job tracking with asyncio.Lock (one download at a time)
- POST /api/download, GET /api/download/{id}, SSE /api/download/{id}/stream
- Phase detection: Connecting / Fetching N files / Downloading / Copying to peer Sparks / Done

Frontend:
- '+ Download a new model' button next to LLM swap section title
- Inline form: HF repo text field + solo/cluster radio + Cancel/Start
- Progress UI: spinner, elapsed timer, phase label, percent fill, stats line (bytes/rate/ETA), collapsible raw logs

Package: bump 0.2.1:0

image/app/static/app.js

@@ -496,8 +496,145 @@ function appendLog(line) {
   log.scrollTop = log.scrollHeight;
 }
 
+// ===================== model downloads =====================
+
+const dlState = {
+  job_id: null,
+  eventsource: null,
+  started_at: null,
+  timer_handle: null,
+};
+
+function openDownloadForm() {
+  el('#download-panel').classList.remove('hidden');
+  el('#download-form').classList.remove('hidden');
+  el('#download-progress').classList.add('hidden');
+  el('#dl-repo').focus();
+}
+
+function closeDownloadPanel() {
+  el('#download-panel').classList.add('hidden');
+  el('#download-form').classList.remove('hidden');
+  el('#download-progress').classList.add('hidden');
+  el('#dl-repo').value = '';
+}
+
+function dlTimerStart(startedAt) {
+  dlState.started_at = startedAt;
+  if (dlState.timer_handle) clearInterval(dlState.timer_handle);
+  const tick = () => {
+    if (!dlState.started_at) return;
+    const sec = Math.max(0, Math.floor((Date.now() - dlState.started_at) / 1000));
+    const m = Math.floor(sec / 60);
+    const s = sec % 60;
+    el('#dl-elapsed').textContent = `${m}:${s.toString().padStart(2, '0')}`;
+  };
+  tick();
+  dlState.timer_handle = setInterval(tick, 500);
+}
+
+function dlTimerStop() {
+  if (dlState.timer_handle) { clearInterval(dlState.timer_handle); dlState.timer_handle = null; }
+}
+
+async function startDownload() {
+  const repo = el('#dl-repo').value.trim();
+  const mode = document.querySelector('input[name="dl-mode"]:checked').value;
+  if (!repo || !repo.includes('/')) {
+    alert('Enter a HuggingFace repo in the form "org/name", e.g. RedHatAI/Qwen3.6-35B-A3B-NVFP4');
+    return;
+  }
+  try {
+    const r = await fetchJSON('/api/download', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ repo, mode }),
+    });
+    attachToDownload(r.job_id);
+  } catch (e) {
+    alert('Failed to start download: ' + e.message);
+  }
+}
+
+function renderDownloadProgress(p) {
+  el('#dl-phase').textContent = p.phase || 'Working…';
+  const statsParts = [];
+  if (p.downloaded && p.total) statsParts.push(`${p.downloaded} / ${p.total}`);
+  if (p.rate) statsParts.push(p.rate);
+  if (p.eta) statsParts.push(`ETA ${p.eta}`);
+  el('#dl-stats').textContent = statsParts.join('  ·  ');
+  const pct = Math.max(2, Math.min(100, p.percent || 2));
+  el('#dl-progress-fill').style.width = `${pct}%`;
+  el('#dl-phase-detail').textContent = p.percent > 0 ? `${p.percent.toFixed(1)}%` : '';
+}
+
+function dlAppendLog(line) {
+  const log = el('#dl-log');
+  log.textContent += line + '\n';
+  log.scrollTop = log.scrollHeight;
+}
+
+async function attachToDownload(jobId) {
+  if (dlState.eventsource) { dlState.eventsource.close(); dlState.eventsource = null; }
+  dlState.job_id = jobId;
+  el('#download-form').classList.add('hidden');
+  el('#download-progress').classList.remove('hidden');
+  el('#dl-log').textContent = '';
+  el('#dl-title').textContent = 'Downloading…';
+
+  try {
+    const snap = await fetchJSON(`/api/download/${jobId}`);
+    dlTimerStart(Date.parse(snap.started_at));
+    for (const line of snap.lines || []) dlAppendLog(line);
+    renderDownloadProgress(snap.progress);
+    if (snap.returncode !== null && snap.returncode !== undefined) {
+      handleDownloadDone(snap);
+      return;
+    }
+  } catch (e) {
+    console.warn('download backfill failed', e);
+    dlTimerStart(Date.now());
+  }
+
+  const es = new EventSource(`/api/download/${jobId}/stream`);
+  dlState.eventsource = es;
+  es.onmessage = (ev) => {
+    try {
+      const d = JSON.parse(ev.data);
+      if (d.line !== undefined) dlAppendLog(d.line);
+    } catch {}
+  };
+  es.addEventListener('progress', (ev) => {
+    try { renderDownloadProgress(JSON.parse(ev.data)); } catch {}
+  });
+  es.addEventListener('done', (ev) => {
+    let d = {};
+    try { d = JSON.parse(ev.data); } catch {}
+    handleDownloadDone(d);
+  });
+  es.onerror = () => { es.close(); dlState.eventsource = null; };
+}
+
+function handleDownloadDone(d) {
+  if (dlState.eventsource) { dlState.eventsource.close(); dlState.eventsource = null; }
+  dlTimerStop();
+  if (d.state === 'failed') {
+    el('#dl-title').textContent = `Failed (rc=${d.returncode})`;
+    el('#dl-phase').textContent = 'Failed';
+  } else {
+    el('#dl-title').textContent = 'Done';
+    el('#dl-phase').textContent = 'Done ✓ — you can now add this model to the catalog and swap to it.';
+    el('#dl-progress-fill').style.width = '100%';
+  }
+  dlState.job_id = null;
+}
+
 async function init() {
   setupCopyButtons();
+  el('#open-download').addEventListener('click', openDownloadForm);
+  el('#dl-cancel').addEventListener('click', closeDownloadPanel);
+  el('#dl-start').addEventListener('click', startDownload);
+  el('#dl-repo').addEventListener('keydown', (e) => { if (e.key === 'Enter') startDownload(); });
   await loadModels();
   await pollStatus();
   await renderServices();