Add friendly swap UI: timer + phase indicator + progress bar + collapsible logs

- Elapsed timer (mm:ss) in top-right of swap panel
- Phase display: Stopping / Starting / Loading weights (N/M shards) / Compiling / Warming up / Ready
- Progress bar with smooth fill mapped from phase
- Raw vLLM logs hidden behind <details> 'Show technical logs'
- Detection from log content (safetensors %, torch.compile, Application startup, Ray cluster join)
- Backfill from /api/swap/{id} on reattach (mid-swap reload works)
This commit is contained in:
Grant
2026-05-12 10:11:14 -05:00
parent 34bdbb7aba
commit c0aebfc98b
3 changed files with 294 additions and 90 deletions
+13 -3
View File
@@ -27,11 +27,21 @@
<section id="swap-panel" class="swap-panel hidden">
<div class="swap-header">
<span class="spinner"></span>
<span id="swap-title">Swapping…</span>
<span id="swap-title">Swap in progress</span>
<span class="spacer"></span>
<span class="muted small" id="swap-state"></span>
<span class="timer" id="swap-elapsed">0:00</span>
</div>
<pre id="swap-log" class="log"></pre>
<div class="phase-row">
<div class="phase" id="swap-phase">Starting…</div>
<div class="phase-detail muted small" id="swap-phase-detail"></div>
</div>
<div class="phase-track">
<div class="phase-fill" id="swap-phase-fill"></div>
</div>
<details id="swap-log-details">
<summary class="muted small">Show technical logs</summary>
<pre id="swap-log" class="log"></pre>
</details>
</section>
<section id="cards" class="cards"></section>