fix: use useShallow for childAgents selector to prevent infinite loop

The childAgents selector in the agent screen was creating a new array
on every render, causing an infinite loop when combined with zustand's
store subscription. Added useShallow wrapper to perform shallow
comparison and prevent unnecessary re-renders.

Also updated plan.md with test results:
- PARTIAL PASS: Fixed infinite loop, agent screen loads correctly
- Sub-Agents menu section displays properly
- Parent/child MCP creation works but parentAgentId not auto-injected
- Added fix task for auto-injecting parentAgentId in MCP server

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-12-21 17:30:34 +00:00
co-authored by Claude Opus 4.5
parent cdc17006da
commit 99338d3b34
2 changed files with 34 additions and 12 deletions
@@ -1,4 +1,5 @@
import { useEffect, useMemo, useRef, useCallback, useState } from "react";
import { useShallow } from "zustand/shallow";
import {
View,
Text,
@@ -154,18 +155,21 @@ function AgentScreenContent({ serverId, agentId, onBack }: AgentScreenContentPro
);
// Select child agents (agents where parentAgentId === current agentId)
const childAgents = useSessionStore((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 });
// 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 });
}
}
}
return children;
});
return children;
})
);
// Select only the specific stream state - use stable empty array to avoid infinite loop
const streamItemsRaw = useSessionStore((state) =>