From b42584db488a1288d52be506cec280a6c6713832 Mon Sep 17 00:00:00 2001
From: localai-org-maint-bot
 <306269227+localai-org-maint-bot@users.noreply.github.com>
Date: Wed, 26 Aug 2026 18:04:20 +0000
Subject: [PATCH] fix(agent-ui): keep chat open for status

Agent Status replaced the chat route and unmounted its EventSource. Any response still in flight could then disappear from the conversation.\n\nOpen status in a separate tab so the chat keeps its live connection until the response completes.\n\nAssisted-by: Codex:gpt-5 [eslint]
---
 core/http/react-ui/e2e/agents.spec.js      |  9 +++++++++
 core/http/react-ui/src/pages/AgentChat.jsx | 13 +++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/core/http/react-ui/e2e/agents.spec.js b/core/http/react-ui/e2e/agents.spec.js
index 1935413bf6f2..d4d65d9e5d58 100644
--- a/core/http/react-ui/e2e/agents.spec.js
+++ b/core/http/react-ui/e2e/agents.spec.js
@@ -38,4 +38,13 @@ test.describe('Agents page', () => {
     // when the render won, swinging total UI coverage ~1pp run-to-run.
     await expect(page.getByRole('heading', { name: 'Create Agent' })).toBeVisible()
   })
+
+  test('opens agent status without leaving an active chat', async ({ page }) => {
+    await page.goto('/app/agents/demo/chat?user_id=test-user')
+
+    const status = page.getByRole('link', { name: 'Status' })
+    await expect(status).toHaveAttribute('href', '/app/agents/demo/status?user_id=test-user')
+    await expect(status).toHaveAttribute('target', '_blank')
+    await expect(page).toHaveURL(/\/app\/agents\/demo\/chat\?user_id=test-user$/)
+  })
 })
diff --git a/core/http/react-ui/src/pages/AgentChat.jsx b/core/http/react-ui/src/pages/AgentChat.jsx
index 34ccb5b6f5fe..f4020fe2e64e 100644
--- a/core/http/react-ui/src/pages/AgentChat.jsx
+++ b/core/http/react-ui/src/pages/AgentChat.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { useParams, useNavigate, useOutletContext, useSearchParams } from 'react-router-dom'
+import { useParams, useOutletContext, useSearchParams } from 'react-router-dom'
 import { agentsApi } from '../utils/api'
 import { apiUrl } from '../utils/basePath'
 import { renderMarkdown, highlightAll, enhanceCodeBlocks } from '../utils/markdown'
@@ -72,7 +72,6 @@ function AgentActivityGroup({ items }) {
 
 export default function AgentChat() {
   const { name } = useParams()
-  const navigate = useNavigate()
   const { addToast } = useOutletContext()
   const [searchParams] = useSearchParams()
   const userId = searchParams.get('user_id') || undefined
@@ -600,9 +599,15 @@ export default function AgentChat() {
               <i className="fas fa-layer-group" /> {artifacts.length}
             </button>
           )}
-          <button className="btn btn-secondary btn-sm" onClick={() => navigate(`/app/agents/${encodeURIComponent(name)}/status${userId ? `?user_id=${encodeURIComponent(userId)}` : ''}`)} title="View status & observables">
+          <a
+            className="btn btn-secondary btn-sm"
+            href={`/app/agents/${encodeURIComponent(name)}/status${userId ? `?user_id=${encodeURIComponent(userId)}` : ''}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="View status & observables in a new tab"
+          >
             <i className="fas fa-chart-bar" /> Status
-          </button>
+          </a>
           <button className="btn btn-secondary btn-sm" onClick={() => clearMessages()} disabled={messages.length === 0} title="Clear chat history">
             <i className="fas fa-eraser" /> Clear
           </button>