From 6509fb25745f0f20f8900968699940909c789285 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Sun, 8 Mar 2026 18:31:22 +0000
Subject: [PATCH] fix(site): use declarative title elements in AgentsPage
 (#22806)

---
 site/src/pages/AgentsPage/AgentDetail.tsx | 17 ++++++++---------
 site/src/pages/AgentsPage/AgentsPage.tsx  |  5 +----
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentDetail.tsx b/site/src/pages/AgentsPage/AgentDetail.tsx
index 39e10dcd7d..98e1a23467 100644
--- a/site/src/pages/AgentsPage/AgentDetail.tsx
+++ b/site/src/pages/AgentsPage/AgentDetail.tsx
@@ -908,15 +908,11 @@ const AgentDetail: FC = () => {
 
 	const chatTitle = chatQuery.data?.chat?.title;
 
-	// Update the browser tab title when navigating to / between agents.
-	useEffect(() => {
-		document.title = chatTitle
-			? pageTitle(chatTitle, "Agents")
-			: pageTitle("Agents");
-		return () => {
-			document.title = pageTitle("Agents");
-		};
-	}, [chatTitle]);
+	const titleElement = (
+		<title>
+			{chatTitle ? pageTitle(chatTitle, "Agents") : pageTitle("Agents")}
+		</title>
+	);
 
 	const parentChatID = getParentChatID(chatQuery.data?.chat);
 	const parentChat = parentChatID
@@ -1008,6 +1004,7 @@ const AgentDetail: FC = () => {
 	if (chatQuery.isLoading) {
 		return (
 			<div className="relative flex h-full min-h-0 min-w-0 flex-1 flex-col">
+				{titleElement}
 				<AgentDetailTopBar
 					diff={{
 						hasDiffStatus: false,
@@ -1086,6 +1083,7 @@ const AgentDetail: FC = () => {
 	if (!chatQuery.data || !agentId) {
 		return (
 			<div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
+				{titleElement}
 				<AgentDetailTopBar
 					diff={{
 						hasDiffStatus: false,
@@ -1126,6 +1124,7 @@ const AgentDetail: FC = () => {
 				shouldShowSidebar && !visualExpanded && "flex-row",
 			)}
 		>
+			{titleElement}
 			<div
 				className={cn(
 					"relative flex min-h-0 min-w-0 flex-1 flex-col",
diff --git a/site/src/pages/AgentsPage/AgentsPage.tsx b/site/src/pages/AgentsPage/AgentsPage.tsx
index dc1df7ec6f..c07b4038e3 100644
--- a/site/src/pages/AgentsPage/AgentsPage.tsx
+++ b/site/src/pages/AgentsPage/AgentsPage.tsx
@@ -514,16 +514,13 @@ const AgentsPage: FC = () => {
 		});
 	}, [queryClient]);
 
-	useEffect(() => {
-		document.title = pageTitle("Agents");
-	}, []);
-
 	useAgentsPageKeybindings({
 		onNewAgent: handleNewAgent,
 	});
 
 	return (
 		<div className="flex h-full min-h-0 flex-col overflow-hidden bg-surface-primary md:flex-row">
+			<title>{pageTitle("Agents")}</title>
 			<div
 				className={cn(
 					"md:h-full md:w-[320px] md:min-h-0 md:border-b-0",