fix: mode tag correctly shows RAG/Agent, fix streaming ID collision

Bug: mode tag showed "✦ AGENT" on RAG responses.
Root cause 1: assistantId = Date.now() — if rate-limit auto-retry fires and
handleSubmit runs at the exact same millisecond, the new message gets the
same ID as the old one. The stale RAG onSources callback then writes queryType
onto the new agent message (same ID), while phase=null stays agent. Result:
AGENT tag + RAG pipeline bar on the same message.

Root cause 2: mode was inferred from msg.phase (null=agent, string=RAG), which
is mutable — any async callback could flip it.

Fix 1: Replace Date.now() with a monotonic msgIdCounter.current (++counter),
guaranteeing unique IDs regardless of timing.
Fix 2: Stop the old stream before auto-retrying, preventing stale callbacks
from firing on the new message at all.
Fix 3: Add explicit msg.mode = "agent"|"rag" set at creation, never mutated.
Message.jsx reads msg.mode instead of inferring from phase.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/App.jsx

@@ -47,6 +47,7 @@ export default function App() {
   const streamingRef   = useRef(false);      // always-fresh streaming flag for event handlers
   const countdownTimer = useRef(null);       // setInterval handle for rate-limit auto-retry
   const handleSubmitRef = useRef(null);      // stable ref so closures can call handleSubmit
+  const msgIdCounter    = useRef(0);         // monotonic counter for message IDs — avoids Date.now() collisions
   const rateLimitRetries = useRef(0);        // consecutive rate-limit count — resets on success
 
   // ── Multi-session persistence (localStorage, up to 10 sessions per repo) ───
@@ -329,9 +330,15 @@ export default function App() {
     // On auto-retry (retryQuestion set), skip the user message — it's already in the chat
     // from the first attempt. Adding it again causes duplicate question bubbles.
     const userMsg = { role: "user", content: question };
-    const assistantId = Date.now();
+    // Use a unique counter (not Date.now()) so auto-retry can never create a
+    // new message with the same ID as the old one — preventing a stale onSources
+    // callback from the old RAG stream polluting the new message's state.
+    const assistantId = ++msgIdCounter.current;
     const assistantMsg = {
       id: assistantId, role: "assistant",
+      // Store mode explicitly so Message.jsx never has to infer it from mutable state.
+      // phase, queryType, etc. can all be overwritten by async callbacks; mode cannot.
+      mode: agentMode ? "agent" : "rag",
       content: "", sources: [], queryType: null, streaming: true,
       phase: agentMode ? null : "searching",
       sourceCount: null,
@@ -405,6 +412,10 @@ export default function App() {
           if (secsLeft <= 0) {
             clearInterval(countdownTimer.current);
             countdownTimer.current = null;
+            // Stop the old stream before retrying — prevents stale onSources/onToken
+            // callbacks from the previous attempt firing on the new message.
+            stopStream.current?.();
+            stopStream.current = null;
             setMessages(prev => prev.filter(m => m.id !== assistantId));
             handleSubmitRef.current?.(question);
           } else {

ui/src/components/Message.jsx

@@ -358,12 +358,11 @@ const Message = forwardRef(function Message({ msg, onDiagramThis, onRetry, showR
           {/* All assistant content in a column wrapper */}
           <div className="message-content">
             {/* Mode tag — always shown on assistant responses so chat history is scannable.
-                "phase" is the reliable mode signal: null = agent, string = RAG (set at message
-                creation in App.jsx). Compact label: "✦ Agent · 4 steps" or "◎ RAG · hybrid". */}
-            {"phase" in msg && (
+                Uses msg.mode (set explicitly at creation, never mutated) so async callbacks
+                updating queryType/phase/model can never flip the label to the wrong mode. */}
+            {msg.mode && (
               <div className="msg-mode-tag">
-                {msg.phase === null ? (
-                  // Agent mode: phase is explicitly null (set before any tools run)
+                {msg.mode === "agent" ? (
                   <>
                     <span className="msg-mode-icon">✦</span>
                     <span className="msg-mode-label">Agent</span>
@@ -372,7 +371,6 @@ const Message = forwardRef(function Message({ msg, onDiagramThis, onRetry, showR
                     )}
                   </>
                 ) : (
-                  // RAG mode: phase = "searching" → "generating" → done
                   <>
                     <span className="msg-mode-icon">◎</span>
                     <span className="msg-mode-label">RAG</span>