From 86d8b6daeef565eda731ec742fb2abf72683705e Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Mon, 23 Mar 2026 17:22:08 +0000
Subject: [PATCH] fix(site/src/pages/AgentsPage): add collapse button to
 settings sidebar panel (#23438)

---
 .../AgentsPage/AgentsPageView.stories.tsx     |  7 +++-
 .../components/Sidebar/AgentsSidebar.tsx      | 41 +++++++++++++++----
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentsPageView.stories.tsx b/site/src/pages/AgentsPage/AgentsPageView.stories.tsx
index de646c40f2..56019b5de1 100644
--- a/site/src/pages/AgentsPage/AgentsPageView.stories.tsx
+++ b/site/src/pages/AgentsPage/AgentsPageView.stories.tsx
@@ -493,7 +493,10 @@ const openAnalyticsView = async (canvasElement: HTMLElement) => {
 
 const openSettingsView = async (canvasElement: HTMLElement) => {
 	const canvas = within(canvasElement);
-	await userEvent.click(canvas.getByRole("link", { name: "Settings" }));
+	const link = await waitFor(() =>
+		canvas.getByRole("link", { name: "Settings" }),
+	);
+	await userEvent.click(link);
 };
 
 export const OpensAnalyticsForAdmins: Story = {
@@ -597,7 +600,7 @@ export const SettingsViewResets: Story = {
 		});
 
 		// Go back to chats
-		const backButton = screen.getByLabelText("Back to chats from Settings");
+		const backButton = screen.getByLabelText("Back to chats");
 		await userEvent.click(backButton);
 
 		// Re-open settings, should reset to Behavior
diff --git a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
index 3a99a8e196..2ea4d48ac5 100644
--- a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
+++ b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
@@ -930,15 +930,38 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 				inert={sidebarView.panel !== "settings" ? true : undefined}
 			>
 				{/* Back header */}
-				<div className="hidden border-b border-border-default px-3 py-2.5 md:block">
-					<Link
-						to={(location.state as { from?: string })?.from || "/agents"}
-						className="flex items-center gap-1.5 rounded-md bg-transparent px-0 py-1 text-sm font-medium text-content-secondary no-underline cursor-pointer hover:text-content-primary transition-colors"
-						aria-label={`Back to chats from ${subNavTitle}`}
-					>
-						<ChevronLeftIcon className="h-4 w-4 shrink-0" />
-						{subNavTitle}
-					</Link>
+				<div className="hidden border-b border-border-default px-2 py-2 md:block">
+					<div className="flex items-center justify-between">
+						<Button
+							asChild
+							variant="subtle"
+							size="icon"
+							aria-label="Back to chats"
+							className="h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary"
+						>
+							<Link
+								to={(location.state as { from?: string })?.from || "/agents"}
+							>
+								<ChevronLeftIcon />
+							</Link>
+						</Button>
+						<span className="text-sm font-medium text-content-primary">
+							{subNavTitle}
+						</span>
+						<div className="flex items-center gap-0.5 -mr-1.5">
+							{onCollapse && (
+								<Button
+									variant="subtle"
+									size="icon"
+									onClick={onCollapse}
+									aria-label="Collapse sidebar"
+									className="h-7 w-7 min-w-0 text-content-secondary hover:text-content-primary"
+								>
+									<PanelLeftCloseIcon />
+								</Button>
+							)}
+						</div>
+					</div>
 				</div>
 				{/* Sub-navigation items */}
 				{sidebarView.panel === "settings" && (