diff --git a/client/src/components/Nav/Favorites/FavoritesList.tsx b/client/src/components/Nav/Favorites/FavoritesList.tsx index 32fe680dbc..d9d33ec6ce 100644 --- a/client/src/components/Nav/Favorites/FavoritesList.tsx +++ b/client/src/components/Nav/Favorites/FavoritesList.tsx @@ -141,7 +141,10 @@ export default function FavoritesList({ } }, [navigate, isSmallScreen, toggleNav]); - const agentIds = favorites.map((f) => f.agentId).filter(Boolean) as string[]; + // Ensure favorites is always an array (could be corrupted in localStorage) + const safeFavorites = useMemo(() => (Array.isArray(favorites) ? favorites : []), [favorites]); + + const agentIds = safeFavorites.map((f) => f.agentId).filter(Boolean) as string[]; const agentQueries = useQueries({ queries: agentIds.map((agentId) => ({ @@ -192,7 +195,7 @@ export default function FavoritesList({ return map; }, [agentQueries, queryClient]); - const draggedFavoritesRef = useRef(favorites); + const draggedFavoritesRef = useRef(safeFavorites); const moveItem = useCallback( (dragIndex: number, hoverIndex: number) => { @@ -212,14 +215,14 @@ export default function FavoritesList({ // Keep ref in sync when favorites change from external sources useEffect(() => { - draggedFavoritesRef.current = favorites; - }, [favorites]); + draggedFavoritesRef.current = safeFavorites; + }, [safeFavorites]); if (search.query) { return null; } - if (!isFavoritesLoading && favorites.length === 0 && !showAgentMarketplace) { + if (!isFavoritesLoading && safeFavorites.length === 0 && !showAgentMarketplace) { return null; } @@ -243,7 +246,7 @@ export default function FavoritesList({ {/* Marketplace skeleton */} {showAgentMarketplace && } {/* Favorite items skeletons */} - {favorites.map((_, index) => ( + {safeFavorites.map((_, index) => ( ))} @@ -264,7 +267,7 @@ export default function FavoritesList({ )} - {favorites.map((fav, index) => { + {safeFavorites.map((fav, index) => { if (fav.agentId) { const agent = agentsMap[fav.agentId]; if (!agent) { diff --git a/client/src/hooks/useFavorites.ts b/client/src/hooks/useFavorites.ts index 18ee25f429..c32570f783 100644 --- a/client/src/hooks/useFavorites.ts +++ b/client/src/hooks/useFavorites.ts @@ -22,8 +22,11 @@ import { logger } from '~/utils'; /** * Cleans favorites array to only include canonical shapes (agentId or model+endpoint). */ -const cleanFavorites = (favorites: Favorite[]): Favorite[] => - favorites.map((f) => { +const cleanFavorites = (favorites: Favorite[]): Favorite[] => { + if (!Array.isArray(favorites)) { + return []; + } + return favorites.map((f) => { if (f.agentId) { return { agentId: f.agentId }; } @@ -32,6 +35,7 @@ const cleanFavorites = (favorites: Favorite[]): Favorite[] => } return f; }); +}; export default function useFavorites() { const localize = useLocalize();