feat: add RAG/Agent mode tag to chat messages

Each assistant response now shows a compact mode label at the top:
"✦ Agent · 4 steps · model-name" — for agentic responses
"◎ RAG · hybrid · model-name" — for RAG responses

Uses msg.phase as the reliable mode signal (phase=null → agent,
phase=string → RAG, set at message creation in App.jsx). Visible
immediately when streaming starts so the user always knows the mode.
Makes long chat histories scannable without having to decode avatars
or look for pipeline bars.

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

ui/src/components/Message.jsx

@@ -357,6 +357,38 @@ 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 && (
+              <div className="msg-mode-tag">
+                {msg.phase === null ? (
+                  // Agent mode: phase is explicitly null (set before any tools run)
+                  <>
+                    <span className="msg-mode-icon">✦</span>
+                    <span className="msg-mode-label">Agent</span>
+                    {msg.iterations > 0 && (
+                      <span className="msg-mode-detail">· {msg.iterations} step{msg.iterations !== 1 ? "s" : ""}</span>
+                    )}
+                  </>
+                ) : (
+                  // RAG mode: phase = "searching" → "generating" → done
+                  <>
+                    <span className="msg-mode-icon">◎</span>
+                    <span className="msg-mode-label">RAG</span>
+                    {msg.queryType && (
+                      <span className="msg-mode-detail">· {msg.queryType}</span>
+                    )}
+                  </>
+                )}
+                {msg.model && (
+                  <span className="msg-mode-model" title={`Model: ${msg.model}`}>
+                    · {msg.model.split("/").pop()}
+                  </span>
+                )}
+              </div>
+            )}
+
             {/* Agent reasoning trace */}
             {msg.toolCalls && msg.toolCalls.length > 0 && (
               <ToolCallTrace steps={msg.toolCalls} streaming={msg.streaming} iterations={msg.iterations} model={msg.model} />

ui/src/index.css

@@ -684,6 +684,40 @@ textarea:focus-visible {
   min-width: 0;
 }
 
+/* ── Mode tag (RAG / Agent label) ─────────────────────────── */
+/* Compact label above each assistant response — makes chat history scannable.
+   "✦ Agent · 4 steps" vs "◎ RAG · hybrid" at a glance. */
+.msg-mode-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+  user-select: none;
+}
+
+.msg-mode-icon {
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+.msg-mode-label {
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--text-2);
+  text-transform: uppercase;
+  font-size: 10px;
+}
+
+.msg-mode-detail {
+  color: var(--muted);
+}
+
+.msg-mode-model {
+  color: var(--faint);
+  font-style: italic;
+}
+
 /* ── Avatar ───────────────────────────────────────────────── */
 .message-avatar {
   width: 32px;