From 9c09f32dca8dbd8eeb9b33e1cdb400b38315e7b7 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Sun, 4 Jan 2026 10:22:00 +0700 Subject: [PATCH] perf(agent-list): limit sidebar to 15 agents for fast rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Agents requiring attention are sorted to the top before slicing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- packages/app/src/components/agent-list.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/app/src/components/agent-list.tsx b/packages/app/src/components/agent-list.tsx index f0035d8d8..89eff0711 100644 --- a/packages/app/src/components/agent-list.tsx +++ b/packages/app/src/components/agent-list.tsx @@ -20,14 +20,16 @@ export function AgentList({ agents, isRefreshing = false, onRefresh, selectedAge const pathname = usePathname(); const [actionAgent, setActionAgent] = useState(null); - // Sort agents with requires attention at the top + // Sort agents with requires attention at the top, limit to 15 for fast rendering const sortedAgents = useMemo(() => { - return [...agents].sort((a, b) => { - // Requires attention first - if (a.requiresAttention && !b.requiresAttention) return -1; - if (!a.requiresAttention && b.requiresAttention) return 1; - return 0; - }); + return [...agents] + .sort((a, b) => { + // Requires attention first + if (a.requiresAttention && !b.requiresAttention) return -1; + if (!a.requiresAttention && b.requiresAttention) return 1; + return 0; + }) + .slice(0, 15); }, [agents]); // Get the methods for the specific server