fix(cli): prevent infinite re-render loop by adding dependency arrays to useEffect hooks in useFlickerDetector and useSessionResume (#23752)

packages/cli/src/ui/hooks/useFlickerDetector.test.ts

@@ -106,14 +106,16 @@ describe('useFlickerDetector', () => {
   it('should re-evaluate on re-render', async () => {
     // Start with a valid height
     mockMeasureElement.mockReturnValue({ width: 80, height: 20 });
-    const { rerender } = await renderHook(() =>
-      useFlickerDetector(mockRef, 25),
+    const { rerender } = await renderHook(
+      ({ height }) => useFlickerDetector(mockRef, height),
+      { initialProps: { height: 25 } },
     );
     expect(mockRecordFlickerFrame).not.toHaveBeenCalled();
 
     // Now, simulate a re-render where the height is too great
     mockMeasureElement.mockReturnValue({ width: 80, height: 30 });
-    rerender();
+    // Trigger a change in terminalHeight dependency to force effect to run
+    rerender({ height: 24 });
 
     expect(mockRecordFlickerFrame).toHaveBeenCalledTimes(1);
     expect(mockAppEventsEmit).toHaveBeenCalledTimes(1);

packages/cli/src/ui/hooks/useFlickerDetector.ts

@@ -39,5 +39,5 @@ export function useFlickerDetector(
         appEvents.emit(AppEvent.Flicker);
       }
     }
-  });
+  }, [rootUiRef, terminalHeight, config, constrainHeight]);
 }

packages/cli/src/ui/hooks/useSessionResume.ts

@@ -49,7 +49,7 @@ export function useSessionResume({
   useEffect(() => {
     historyManagerRef.current = historyManager;
     refreshStaticRef.current = refreshStatic;
-  });
+  }, [historyManager, refreshStatic]);
 
   const loadHistoryForResume = useCallback(
     async (