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)

image/app/static/style.css

@@ -13,7 +13,6 @@
 }
 
 * { box-sizing: border-box; }
-
 html, body { margin: 0; padding: 0; }
 
 body {
@@ -64,38 +63,91 @@ main {
 }
 .banner em { font-style: normal; background: rgba(245, 158, 11, 0.15); padding: 2px 6px; border-radius: 4px; }
 
+/* ===== Swap panel ===== */
+
 .swap-panel {
   background: var(--surface);
   border: 1px solid var(--info);
   border-radius: var(--radius);
-  padding: 14px 16px;
+  padding: 16px 18px;
   margin-bottom: 20px;
 }
-.swap-header { display: flex; align-items: center; gap: 10px; }
+.swap-header { display: flex; align-items: center; gap: 12px; }
 .swap-header #swap-title { font-weight: 600; color: var(--info); }
+.timer {
+  font: 14px/1 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  padding: 5px 10px;
+  border-radius: 6px;
+  color: var(--text);
+  letter-spacing: 0.04em;
+}
 .spinner {
   width: 14px; height: 14px;
   border: 2px solid var(--info);
   border-right-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
+.phase-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-top: 14px;
+}
+.phase {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text);
+}
+.phase-detail { font-size: 13px; }
+
+.phase-track {
+  margin-top: 10px;
+  height: 6px;
+  background: var(--surface-2);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.phase-fill {
+  height: 100%;
+  width: 2%;
+  background: linear-gradient(90deg, var(--info), var(--accent));
+  border-radius: 3px;
+  transition: width 0.5s ease-out;
+}
+
+#swap-log-details {
+  margin-top: 14px;
+}
+#swap-log-details summary {
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 0;
+}
+#swap-log-details summary:hover { color: var(--text); }
+#swap-log-details[open] summary { margin-bottom: 8px; }
+
 .log {
   background: #08080b;
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 10px 12px;
-  margin: 10px 0 0;
+  margin: 0;
   font: 12px/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   color: #c7c7d1;
-  max-height: 280px;
+  max-height: 260px;
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
+/* ===== Cards ===== */
+
 .cards {
   display: grid;
   gap: 14px;
@@ -118,6 +170,7 @@ main {
 }
 .card .name { font-weight: 600; font-size: 15px; }
 .card .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
+.card .repo { word-break: break-all; }
 .tag {
   background: var(--surface-2);
   border: 1px solid var(--border);