fix(site/src/pages/AgentsPage): preserve right panel tab state across switches (#23737)

site/src/pages/AgentsPage/components/Sidebar/SidebarTabView.tsx

@@ -133,7 +133,18 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 					? "desktop"
 					: null;
 
-	const activeTab = tabs.find((t) => t.id === effectiveTabId) ?? null;
+	// Unified list of panels for rendering. Includes the desktop
+	// tab when available so we don't need to special-case it.
+	const allPanels: { id: string; content: ReactNode }[] = tabs.map((t) => ({
+		id: t.id,
+		content: t.content,
+	}));
+	if (desktopChatId) {
+		allPanels.push({
+			id: "desktop",
+			content: <DesktopPanel chatId={desktopChatId} />,
+		});
+	}
 
 	const {
 		ref: tabScrollRef,
@@ -313,20 +324,21 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 					{isExpanded ? <MinimizeIcon /> : <MaximizeIcon />}
 				</Button>
 			</div>
-			{/* Tab content */}
-			<div
-				role="tabpanel"
-				aria-labelledby={
-					effectiveTabId ? `${tabIdPrefix}-tab-${effectiveTabId}` : undefined
-				}
-				className="min-h-0 flex-1"
-			>
-				{effectiveTabId === "desktop" && desktopChatId ? (
-					<DesktopPanel chatId={desktopChatId} />
-				) : (
-					activeTab?.content
-				)}
-			</div>
+			{/* Tab panels – all stay mounted, only the active one visible. */}
+			{allPanels.map((panel) => {
+				const isActive = effectiveTabId === panel.id;
+				return (
+					<div
+						key={panel.id}
+						role="tabpanel"
+						aria-labelledby={`${tabIdPrefix}-tab-${panel.id}`}
+						className={cn("min-h-0 flex-1", !isActive && "hidden")}
+						inert={!isActive}
+					>
+						{panel.content}
+					</div>
+				);
+			})}
 		</div>
 	);
 };