From 8dced3d5ed19ae98a3fe8bc4e7fdf8ab967a08e3 Mon Sep 17 00:00:00 2001
From: Vorflux AI <noreply@vorflux.com>
Date: Fri, 27 Mar 2026 06:51:49 +0000
Subject: [PATCH] Fix slideshow interval reset on container resize

Use refs for containerSize and onSlideshowNodeChange inside the
slideshow useEffect to avoid resetting the 3.5s interval when the
container is resized. The interval now only resets when
isSlideshowActive or nodes.length changes.
---
 .../src/components/memory-graph.tsx           | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index b238b4c7..301236e6 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -396,10 +396,15 @@ export function MemoryGraph({
 		return () => window.removeEventListener("keydown", handler)
 	}, [navigateUp, navigateDown, navigateNext, navigatePrev])
 
-	// Slideshow — use a ref for nodes to avoid re-creating the interval on every render
+	// Slideshow — use refs to avoid re-creating the interval on resize or node updates
 	const nodesRef = useRef(nodes)
 	nodesRef.current = nodes
+	const containerSizeRef = useRef(containerSize)
+	containerSizeRef.current = containerSize
+	const onSlideshowNodeChangeRef = useRef(onSlideshowNodeChange)
+	onSlideshowNodeChangeRef.current = onSlideshowNodeChange
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: reads from refs to avoid resetting interval on resize/node changes
 	useEffect(() => {
 		if (!isSlideshowActive || nodes.length === 0) {
 			if (!isSlideshowActive) {
@@ -424,27 +429,17 @@ export function MemoryGraph({
 			lastIdx = idx
 			const n = currentNodes[idx]!
 			setSelectedNode(n.id)
-			viewportRef.current?.centerOn(
-				n.x,
-				n.y,
-				containerSize.width,
-				containerSize.height,
-			)
+			const sz = containerSizeRef.current
+			viewportRef.current?.centerOn(n.x, n.y, sz.width, sz.height)
 			simulationRef.current?.reheat()
-			onSlideshowNodeChange?.(n.id)
+			onSlideshowNodeChangeRef.current?.(n.id)
 			setTimeout(() => simulationRef.current?.coolDown(), 1000)
 		}
 
 		pick()
 		const interval = setInterval(pick, 3500)
 		return () => clearInterval(interval)
-	}, [
-		isSlideshowActive,
-		nodes.length,
-		containerSize.width,
-		containerSize.height,
-		onSlideshowNodeChange,
-	])
+	}, [isSlideshowActive, nodes.length])
 
 	// Active node: selected takes priority, then hovered
 	const activeNodeId = selectedNode ?? hoveredNode