Implement comprehensive cleanup for pointer events and overlays in AgentList2 and NewAgentSheet components

- Added cleanup effects to reset pointer events, cursor, and overflow styles when components unmount.
- Enhanced the handling of overlays and portals to ensure proper cleanup and prevent interaction issues.
- Introduced delays in cleanup processes to ensure UI responsiveness and consistency.

Author: iandjx

webapp/src/components/AgentList2.tsx

@@ -137,6 +137,15 @@ export default function AgentList2({ agents, fetchAgents }) {
 		);
 	}, [searchTerm]);
 
+	// Cleanup effect to reset pointer events when component unmounts
+	useEffect(() => {
+		return () => {
+			document.body.style.pointerEvents = 'auto';
+			document.body.style.cursor = 'auto';
+			document.body.style.overflow = 'visible';
+		};
+	}, []);
+
 	async function deleteAgent(agentId) {
 		if (!agentId) return;
 
@@ -326,6 +335,36 @@ export default function AgentList2({ agents, fetchAgents }) {
 						} else {
 							setOpenNewAgentSheet(open);
 						}
+
+						// Additional check for pointer events with comprehensive cleanup
+						setTimeout(() => {
+							if (document.body.style.pointerEvents === 'none') {
+								document.body.style.pointerEvents = 'auto';
+							}
+
+							// Additional cleanup
+							document.body.style.cursor = 'auto';
+							document.body.style.overflow = 'visible';
+
+							// Clean up any remaining overlays
+							const overlays = document.querySelectorAll('[data-radix-dialog-overlay]');
+							overlays.forEach(overlay => {
+								if (overlay instanceof HTMLElement) {
+									overlay.style.pointerEvents = 'none';
+								}
+							});
+
+							// Clean up any remaining portals
+							const portals = document.querySelectorAll('[data-radix-portal]');
+							portals.forEach(portal => {
+								if (
+									portal instanceof HTMLElement &&
+									!portal.querySelector('[data-radix-dialog-content]')
+								) {
+									portal.remove();
+								}
+							});
+						}, 50);
 					}}
 					editing={!!selectedAgent}
 					agentId={selectedAgent?._id}

webapp/src/components/agents/NewAgentSheet.tsx

@@ -477,6 +477,15 @@ export const AgentSheet = ({
 		}
 	}, []);
 
+	// Cleanup effect to reset pointer events when component unmounts
+	useEffect(() => {
+		return () => {
+			document.body.style.pointerEvents = 'auto';
+			document.body.style.cursor = 'auto';
+			document.body.style.overflow = 'visible';
+		};
+	}, []);
+
 	function showPreview(e: React.ChangeEvent<HTMLInputElement>) {
 		const file = e.target.files?.[0];
 		if (file) {
@@ -496,6 +505,7 @@ export const AgentSheet = ({
 			open={openEditSheet}
 			onOpenChange={open => {
 				setOpenEditSheet(open);
+
 				// Reset form state when sheet closes
 				if (!open) {
 					setToolState(null);
@@ -506,6 +516,30 @@ export const AgentSheet = ({
 					setIcon(null);
 					setAllowDelegation(false);
 					setVerbose(false);
+
+					// Force reset pointer events and cursor with delay
+					setTimeout(() => {
+						// Force reset pointer events if they're blocked
+						if (document.body.style.pointerEvents === 'none') {
+							document.body.style.pointerEvents = 'auto';
+						}
+
+						// Force reset overflow if it's hidden
+						if (document.body.style.overflow === 'hidden') {
+							document.body.style.overflow = 'visible';
+						}
+
+						// Additional cleanup for cursor
+						document.body.style.cursor = 'auto';
+
+						// Force cleanup of any remaining overlays
+						const overlays = document.querySelectorAll('[data-radix-dialog-overlay]');
+						overlays.forEach(overlay => {
+							if (overlay instanceof HTMLElement) {
+								overlay.style.pointerEvents = 'none';
+							}
+						});
+					}, 100);
 				}
 			}}>
 			{modal}
@@ -527,7 +561,19 @@ export const AgentSheet = ({
 				</SheetTrigger>
 			)}
 
-			<SheetContent size='md' className='text-foreground overflow-y-auto'>
+			<SheetContent
+				size='md'
+				className='text-foreground overflow-y-auto'
+				style={{
+					pointerEvents: 'auto',
+					overflow: 'visible'
+				}}
+				onPointerDownOutside={() => {
+					document.body.style.pointerEvents = 'auto';
+				}}
+				onEscapeKeyDown={() => {
+					document.body.style.pointerEvents = 'auto';
+				}}>
 				<SheetHeader>
 					<SheetTitle>
 						<div className='flex items-center gap-2'>