From 614a67dfd3923a1cedfb23021e14642bd84fbcb7 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 1 Apr 2026 12:16:10 -0700
Subject: [PATCH] fix: caption init race condition, auto-save, and panel
 auto-open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove store reset from useEffect cleanup — was wiping state on dep changes
  and breaking auto-save subscription
- Move panel auto-open into useEffect instead of during render
- Add fallback 500ms poll alongside postMessage listener for initial load

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/studio/src/App.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 7880f08600..8326e5fa12 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -139,21 +139,24 @@ export function StudioApp() {
     };
 
     window.addEventListener("message", handleMessage);
-    // Also try immediately in case compositions are already loaded
+    // Try immediately in case compositions are already loaded
     tryActivateCaptions();
+    // Fallback poll — runtime messages can fire before listener is attached on first load
+    const pollId = setInterval(tryActivateCaptions, 500);
 
     return () => {
       window.removeEventListener("message", handleMessage);
-      if (useCaptionStore.getState().isEditMode) useCaptionStore.getState().reset();
+      clearInterval(pollId);
     };
   }, [activeCompPath, projectId]);
 
   // Auto-expand right panel when a caption word is selected
-  const prevCaptionHasSelection = useRef(false);
-  if (captionEditMode && captionHasSelection && !prevCaptionHasSelection.current && rightCollapsed) {
-    setRightCollapsed(false);
-  }
-  prevCaptionHasSelection.current = captionHasSelection;
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (captionEditMode && captionHasSelection) {
+      setRightCollapsed(false);
+    }
+  }, [captionHasSelection, captionEditMode]);
   const [globalDragOver, setGlobalDragOver] = useState(false);
   const [uploadToast, setUploadToast] = useState<string | null>(null);
   const [timelineVisible, setTimelineVisible] = useState(false);