Update index.html

index.html

@@ -1087,6 +1087,7 @@ let   isStreaming = false;
 let   thinkTokens = 0;
 let   genTokens   = 0;
 let   promptTokens = 0;
+let   currentBubbleEl = null; // tracks the live assistant bubble (ids repeat across turns, so we can't rely on getElementById)
 
 // ── DECORATIVE TICK RING (signature gauge marks) ──────────────────────────
 (function drawTicks() {
@@ -1271,18 +1272,19 @@ function addAssistantMsg() {
   div.className = 'msg msg-assistant';
   div.innerHTML = `
     <div class="msg-label">MiniCoder-1</div>
-    <div class="msg-bubble" id="current-bubble">
+    <div class="msg-bubble">
       <span class="cursor"></span>
     </div>
   `;
   document.getElementById('chat-area').appendChild(div);
+  currentBubbleEl = div.querySelector('.msg-bubble'); // point future updates at THIS turn's bubble
   scrollBottom();
   return div;
 }
 
 // ── UPDATE ASSISTANT BUBBLE ───────────────────────────────────────────────
 function updateBubble(raw, streaming) {
-  const bubble = document.getElementById('current-bubble');
+  const bubble = currentBubbleEl;
   if (!bubble) return;
 
   const { thinkContent, answerContent, thinkTokEst } = parseResponse(raw);
@@ -1413,7 +1415,7 @@ async function sendMessage() {
       }
     }
   } catch (e) {
-    const bubble = document.getElementById('current-bubble');
+    const bubble = currentBubbleEl;
     if (bubble) bubble.innerHTML = `<span style="color:var(--danger)">Error: ${e.message}</span>`;
     updateStatus('Error', null, null, null, 0);
   }
@@ -1427,7 +1429,7 @@ async function sendMessage() {
 async function stopGen() {
   await fetch('/stop', { method: 'POST' });
   updateStatus('Stopped', null, null, null, thinkTokens);
-  const bubble = document.getElementById('current-bubble');
+  const bubble = currentBubbleEl;
   if (bubble) {
     bubble.querySelectorAll('.cursor').forEach(c => c.remove());
   }