fix: resolve childAgents selector infinite loop in AgentScreenContent

The useShallow wrapper was not preventing infinite loops because the
selector created new object references on every store update. Fixed by:
1. Selecting the agents Map directly (stable reference)
2. Deriving childAgents array in useMemo with proper dependencies

The Map only changes when agents are added/removed, preventing
unnecessary re-renders that were causing the infinite loop.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/app/src/app/agent/[serverId]/[agentId].tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useRef, useCallback, useState } from "react";
-import { useShallow } from "zustand/shallow";
 import {
   View,
   Text,
@@ -154,22 +153,21 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
     resolvedAgentId ? state.sessions[serverId]?.agents?.get(resolvedAgentId) : undefined
   );
 
-  // Select child agents (agents where parentAgentId === current agentId)
-  // Use useShallow to avoid creating new array references on every render
-  const childAgents = useSessionStore(
-    useShallow((state) => {
-      if (!resolvedAgentId) return [];
-      const agents = state.sessions[serverId]?.agents;
-      if (!agents) return [];
-      const children: Array<{ id: string; title: string | null }> = [];
-      for (const [id, a] of agents) {
-        if (a.parentAgentId === resolvedAgentId) {
-          children.push({ id, title: a.title });
-        }
+  // Select the agents Map directly - this is a stable reference that only changes when agents are added/removed
+  const allAgents = useSessionStore((state) => state.sessions[serverId]?.agents);
+
+  // Derive child agents in useMemo to avoid creating new references on every store update
+  // This prevents infinite loops caused by useShallow not doing deep equality on object arrays
+  const childAgents = useMemo(() => {
+    if (!resolvedAgentId || !allAgents) return [];
+    const children: Array<{ id: string; title: string | null }> = [];
+    for (const [id, a] of allAgents) {
+      if (a.parentAgentId === resolvedAgentId) {
+        children.push({ id, title: a.title });
       }
-      return children;
-    })
-  );
+    }
+    return children;
+  }, [allAgents, resolvedAgentId]);
 
   // Select only the specific stream state - use stable empty array to avoid infinite loop
   const streamItemsRaw = useSessionStore((state) =>