From a42a50ed1b0dacc18885713aa228b29953e40b7d Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Wed, 8 Oct 2025 08:40:36 +0000
Subject: [PATCH] fix: ensure checkpoint restore popover works when portal
 container is not immediately available

- Updated useRooPortal hook to use MutationObserver to watch for portal element
- Added fallback to undefined when portal container is null in CheckpointMenu
- Fixes issue where clicking on checkpoints does nothing

Fixes #8563
---
 .../chat/checkpoints/CheckpointMenu.tsx       |  2 +-
 .../src/components/ui/hooks/useRooPortal.ts   | 34 ++++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
index d2fb860668..a86fa5a6e3 100644
--- a/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
+++ b/webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx
@@ -86,7 +86,7 @@ export const CheckpointMenu = ({
 						</Button>
 					</PopoverTrigger>
 				</StandardTooltip>
-				<PopoverContent align="end" container={portalContainer}>
+				<PopoverContent align="end" container={portalContainer || undefined}>
 					<div className="flex flex-col gap-2">
 						{!isCurrent && (
 							<div className="flex flex-col gap-1 group hover:text-foreground">
diff --git a/webview-ui/src/components/ui/hooks/useRooPortal.ts b/webview-ui/src/components/ui/hooks/useRooPortal.ts
index 25ef139e64..2583d88366 100644
--- a/webview-ui/src/components/ui/hooks/useRooPortal.ts
+++ b/webview-ui/src/components/ui/hooks/useRooPortal.ts
@@ -1,10 +1,36 @@
-import { useState } from "react"
-import { useMount } from "react-use"
+import { useState, useEffect } from "react"
 
 export const useRooPortal = (id: string) => {
-	const [container, setContainer] = useState<HTMLElement>()
+	const [container, setContainer] = useState<HTMLElement | null>(null)
 
-	useMount(() => setContainer(document.getElementById(id) ?? undefined))
+	useEffect(() => {
+		// Try to find the element immediately
+		const element = document.getElementById(id)
+		if (element) {
+			setContainer(element)
+			return
+		}
+
+		// If not found, set up a MutationObserver to watch for it
+		const observer = new MutationObserver(() => {
+			const element = document.getElementById(id)
+			if (element) {
+				setContainer(element)
+				observer.disconnect()
+			}
+		})
+
+		// Start observing the document body for changes
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		})
+
+		// Cleanup
+		return () => {
+			observer.disconnect()
+		}
+	}, [id])
 
 	return container
 }