From 6519fc1cf7b6d14e2472eddd1713a19095d1653a Mon Sep 17 00:00:00 2001
From: Claus Lohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 22 Jul 2026 05:19:13 +0000
Subject: [PATCH] fix: use permanent DOM elements for progress instead of
 innerHTML reset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

innerHTML reset in startSession was destroying #phase-label and
#progress-fill elements, then recreating them with same IDs. XHR
progress events fired asynchronously but getElementById might
return stale references or fail during the DOM update window.

Now #phase-label, #progress-fill, and #session-error are permanent
elements in the static HTML. startSession clears them via
textContent/style instead of innerHTML — no DOM destruction.
showError appends to #session-error instead of #session-status.
---
 frontend/templates/index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/templates/index.html b/frontend/templates/index.html
index ede9020..d91b2f9 100644
--- a/frontend/templates/index.html
+++ b/frontend/templates/index.html
@@ -49,6 +49,7 @@
     <div class="progress-bar">
       <div class="progress-fill" id="progress-fill" style="width:0%">0%</div>
     </div>
+    <div id="session-error"></div>
   </div>
 </div>
 
@@ -75,8 +76,8 @@ function setPhase(label, pct, isSpinner) {
 }
 
 function showError(msg) {
-  const status = document.getElementById('session-status');
-  if (status) status.innerHTML += '<div class="error" style="margin-top:0.5rem;">' + msg + '</div>';
+  const el = document.getElementById('session-error');
+  if (el) el.innerHTML += '<div class="error" style="margin-top:0.5rem;">' + msg + '</div>';
 }
 
 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
@@ -91,12 +92,11 @@ async function startSession(e) {
   btn.disabled = true;
   analysis.innerHTML = '';
   polling.innerHTML = '';
-  status.innerHTML = `
-    <div id="phase-label" style="margin-bottom:0.5rem;"></div>
-    <div class="progress-bar">
-      <div class="progress-fill" id="progress-fill" style="width:0%">0%</div>
-    </div>
-  `;
+  // Reset permanent elements (no innerHTML — keeps DOM references alive)
+  document.getElementById('phase-label').textContent = '';
+  var pf = document.getElementById('progress-fill');
+  pf.style.width = '0%'; pf.textContent = '0%';
+  document.getElementById('session-error').textContent = '';
   status.classList.remove('hidden');
 
   const vmid = document.getElementById('vmid').value;