From 0973b842a2bb85cdd61a1b3839e2f3cb4df6a23b Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Mon, 23 Mar 2026 10:44:03 +0700
Subject: [PATCH] fix(ui): resolve nested button error and stale agentId in
 chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Provider list: change outer <button> to <div role="button"> to fix
  invalid nested <button> HTML (delete button inside row button)
- Chat page: derive agentId via useMemo from URL session key instead of
  useState initializer that only runs once (stale on session switch)
- Agent change no longer creates ghost sessions — navigates to /chat
  and lets handleSend create session on first message
- Clear messages when navigating away from session (empty key only);
  session-to-session switch still replaces atomically via loadHistory
- Split ROUTES.CHAT into CHAT (nav) + CHAT_PATTERN (route definition)

Closes #349
---
 ui/web/src/lib/constants.ts                   |  3 ++-
 ui/web/src/pages/chat/chat-page.tsx           | 26 +++++++++++--------
 .../src/pages/chat/hooks/use-chat-messages.ts |  5 ++++
 .../src/pages/providers/provider-list-row.tsx |  8 +++---
 ui/web/src/routes.tsx                         |  2 +-
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/ui/web/src/lib/constants.ts b/ui/web/src/lib/constants.ts
index 625e3d1f..e8c02198 100644
--- a/ui/web/src/lib/constants.ts
+++ b/ui/web/src/lib/constants.ts
@@ -1,7 +1,8 @@
 export const ROUTES = {
   LOGIN: "/login",
   OVERVIEW: "/overview",
-  CHAT: "/chat/:sessionKey?",
+  CHAT: "/chat",
+  CHAT_PATTERN: "/chat/:sessionKey?",
   AGENTS: "/agents",
   AGENT_DETAIL: "/agents/:id",
   SESSIONS: "/sessions",
diff --git a/ui/web/src/pages/chat/chat-page.tsx b/ui/web/src/pages/chat/chat-page.tsx
index 82582ce6..59d7f166 100644
--- a/ui/web/src/pages/chat/chat-page.tsx
+++ b/ui/web/src/pages/chat/chat-page.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams, useNavigate } from "react-router";
 import { Eye, PanelLeftOpen } from "lucide-react";
@@ -29,13 +29,17 @@ export function ChatPage() {
   // sessionKey derived from URL — single source of truth, no separate state
   const sessionKey = urlSessionKey ?? "";
 
-  const [agentId, setAgentId] = useState(() => {
+  // Fallback agent ID used only when URL has no session key
+  const [agentIdFallback, setAgentIdFallback] = useState("default");
+
+  // Derive agentId from URL (source of truth), fallback to state when no session
+  const agentId = useMemo(() => {
     if (urlSessionKey) {
       const { agentId: parsed } = parseSessionKey(urlSessionKey);
       if (parsed) return parsed;
     }
-    return "default";
-  });
+    return agentIdFallback;
+  }, [urlSessionKey, agentIdFallback]);
 
   const {
     sessions,
@@ -91,12 +95,10 @@ export function ChatPage() {
   const handleSessionSelect = useCallback(
     (key: string) => {
       const { agentId: parsed } = parseSessionKey(key);
-      if (parsed && parsed !== agentId) {
-        setAgentId(parsed);
-      }
+      if (parsed) setAgentIdFallback(parsed);
       navigate(`/chat/${encodeURIComponent(key)}`);
     },
-    [navigate, agentId],
+    [navigate],
   );
 
   const handleDeleteSession = useCallback(async (key: string) => {
@@ -113,10 +115,12 @@ export function ChatPage() {
 
   const handleAgentChange = useCallback(
     (newAgentId: string) => {
-      setAgentId(newAgentId);
-      navigate(`/chat/${encodeURIComponent(`agent:${newAgentId}:ws:direct:${crypto.randomUUID()}`)}`);
+      setAgentIdFallback(newAgentId);
+      if (sessionKey) {
+        navigate("/chat");
+      }
     },
-    [navigate],
+    [navigate, sessionKey],
   );
 
   const handleSend = useCallback(
diff --git a/ui/web/src/pages/chat/hooks/use-chat-messages.ts b/ui/web/src/pages/chat/hooks/use-chat-messages.ts
index 58453784..bb3f36a1 100644
--- a/ui/web/src/pages/chat/hooks/use-chat-messages.ts
+++ b/ui/web/src/pages/chat/hooks/use-chat-messages.ts
@@ -61,6 +61,11 @@ export function useChatMessages(sessionKey: string, agentId: string) {
     blockRepliesRef.current = [];
     cancelAnimationFrame(rafHandleRef.current);
     rafPendingRef.current = false;
+    // Clear messages when navigating away from a session (empty key).
+    // When switching to another session, loadHistory() will replace them.
+    if (!sessionKey) {
+      setMessages([]);
+    }
   }, [sessionKey]);
 
   // Load history (no loading spinner — the empty state placeholder is shown instead)
diff --git a/ui/web/src/pages/providers/provider-list-row.tsx b/ui/web/src/pages/providers/provider-list-row.tsx
index 52c9144d..683fa5e2 100644
--- a/ui/web/src/pages/providers/provider-list-row.tsx
+++ b/ui/web/src/pages/providers/provider-list-row.tsx
@@ -17,9 +17,11 @@ export function ProviderListRow({ provider, onClick, onDelete }: ProviderListRow
   const tb = PROVIDER_TYPE_BADGE[provider.provider_type] ?? { label: provider.provider_type, variant: "outline" as const };
 
   return (
-    <button
-      type="button"
+    <div
+      role="button"
+      tabIndex={0}
       onClick={onClick}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}
       className="flex w-full cursor-pointer items-center gap-3 rounded-lg border bg-card px-4 py-3 text-left transition-all hover:border-primary/30 hover:shadow-sm"
     >
       {/* Icon */}
@@ -64,6 +66,6 @@ export function ProviderListRow({ provider, onClick, onDelete }: ProviderListRow
           <Trash2 className="h-3.5 w-3.5" />
         </Button>
       )}
-    </button>
+    </div>
   );
 }
diff --git a/ui/web/src/routes.tsx b/ui/web/src/routes.tsx
index bdde235c..af7afa1e 100644
--- a/ui/web/src/routes.tsx
+++ b/ui/web/src/routes.tsx
@@ -146,7 +146,7 @@ export function AppRoutes() {
         >
           <Route index element={<Navigate to={ROUTES.OVERVIEW} replace />} />
           <Route path={ROUTES.OVERVIEW} element={<OverviewPage />} />
-          <Route path={ROUTES.CHAT} element={<ChatPage />} />
+          <Route path={ROUTES.CHAT_PATTERN} element={<ChatPage />} />
           <Route path={ROUTES.AGENTS} element={<AgentsPage key="list" />} />
           <Route path={ROUTES.AGENT_DETAIL} element={<AgentsPage key="detail" />} />
           <Route path={ROUTES.TEAMS} element={<TeamsPage key="list" />} />