feat(site): restyle agents sidebar New Agent button (#22555)

Removes the search input and restyles the New Agent button in the agents
sidebar:

- Removed the search input box
- Replaced the outlined button with a subtle, left-aligned button
featuring a `SquarePenIcon`
- Button icon and text alignment matches the tree node items in the
sidebar

<img width="769" height="337" alt="image"
src="https://github.com/user-attachments/assets/2284c8c0-6294-4823-9ce0-5cc72b0d0054"
/>

site/src/pages/AgentsPage/AgentsSidebar.stories.tsx

@@ -75,31 +75,6 @@ const meta: Meta<typeof AgentsSidebar> = {
 export default meta;
 type Story = StoryObj<typeof AgentsSidebar>;
 
-export const SearchFiltering: Story = {
-	args: {
-		chats: [
-			buildChat({ id: "parent-1", title: "Parent planner" }),
-			buildChat({
-				id: "child-1",
-				title: "Child executor",
-				parent_chat_id: "parent-1",
-				root_chat_id: "parent-1",
-			}),
-		],
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await userEvent.type(
-			canvas.getByPlaceholderText("Search agents..."),
-			"child",
-		);
-		await waitFor(() => {
-			expect(canvas.getByText("Parent planner")).toBeInTheDocument();
-			expect(canvas.getByText("Child executor")).toBeInTheDocument();
-		});
-	},
-};
-
 export const RunningDelegatedChat: Story = {
 	args: {
 		chats: [

site/src/pages/AgentsPage/AgentsSidebar.tsx

@@ -20,7 +20,6 @@ import {
 } from "components/DropdownMenu/DropdownMenu";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
-import { Input } from "components/Input/Input";
 import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Skeleton } from "components/Skeleton/Skeleton";
 import {
@@ -33,7 +32,7 @@ import {
 	Loader2Icon,
 	PanelLeftCloseIcon,
 	PauseIcon,
-	SearchIcon,
+	SquarePenIcon,
 	Trash2Icon,
 } from "lucide-react";
 import {
@@ -539,8 +538,7 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 		chatId?: string;
 	}>();
 	const activeChatId = agentId ?? chatId;
-	const [search, setSearch] = useState("");
-	const normalizedSearch = search.trim().toLowerCase();
+	const normalizedSearch = "";
 	const [expandedById, setExpandedById] = useState<Record<string, boolean>>({});
 	const [isArchivedExpanded, setIsArchivedExpanded] = useState(false);
 
@@ -555,7 +553,7 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 				search: normalizedSearch,
 				tree: chatTree,
 			}),
-		[chats, normalizedSearch, chatTree],
+		[chats, chatTree],
 	);
 	const visibleRootIDs = useMemo(
 		() => chatTree.rootIds.filter((chatID) => visibleChatIDs.has(chatID)),
@@ -628,7 +626,6 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 			chatTree,
 			chatById,
 			visibleChatIDs,
-			normalizedSearch,
 			expandedById,
 			modelOptions,
 			modelConfigs,
@@ -664,31 +661,16 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 						</Button>
 					)}
 				</div>
-				<div className="flex flex-col gap-2.5">
-					<div className="relative">
-						<label className="sr-only" htmlFor="agents-sidebar-search">
-							Search agents...
-						</label>
-						<SearchIcon className="pointer-events-none absolute left-3 top-1/2 size-icon-xs -translate-y-1/2 text-content-secondary" />
-						<Input
-							id="agents-sidebar-search"
-							type="search"
-							placeholder="Search agents..."
-							value={search}
-							onChange={(event) => setSearch(event.target.value)}
-							className="h-9 rounded-lg border-border-default bg-surface-primary pl-8 text-[13px] shadow-none"
-						/>
-					</div>
-					<Button
-						size="sm"
-						variant="outline"
-						onClick={onNewAgent}
-						disabled={isCreating}
-						className="w-full justify-center rounded-lg py-4 text-[13px] text-content-secondary hover:bg-surface-tertiary"
-					>
-						New Agent
-					</Button>
-				</div>
+				<Button
+					size="sm"
+					variant="subtle"
+					onClick={onNewAgent}
+					disabled={isCreating}
+					className="-mx-1 w-[calc(100%+0.5rem)] justify-start gap-1.5 rounded-md py-1 pl-1 pr-2 text-sm text-content-secondary hover:bg-surface-tertiary/50 md:-mx-1.5 md:w-[calc(100%+0.75rem)]"
+				>
+					<SquarePenIcon className="!h-[18px] !w-[18px] shrink-0" />
+					New Agent
+				</Button>
 			</div>
 
 			<ScrollArea