fix: BrowserPanel deterministic child webview sync without relying on transitionend

src/components/BrowserPanel.tsx

@@ -15,111 +15,158 @@ const bookmarks = [
   { name: 'Line of Action', icon: '🏃', url: 'https://line-of-action.com' },
 ];
 
-// Pre-initialize browser on app start (background, no UI)
 let browserInitPromise: Promise<any> | null = null;
 function ensureBrowserInit() {
   if (!browserInitPromise) {
-    browserInitPromise = invoke<any>('browser_init', { layout: { x: 0, y: 0, width: 1, height: 1 } }).catch(() => null);
+    browserInitPromise = invoke<any>('browser_init', { layout: { x: 0, y: 0, width: 1, height: 1 } }).catch((err) => {
+      console.error('[BrowserPanel] browser_init failed', err);
+      browserInitPromise = null;
+      return null;
+    });
   }
   return browserInitPromise;
 }
-// Start pre-init immediately on module load
-ensureBrowserInit();
 
 export const BrowserPanel = () => {
-  const { isBrowserOpen, setIsBrowserOpen, pan, zoom, setImages, isWhisperBrowser } = useAppStore();
+  const { isBrowserOpen, setIsBrowserOpen, isWhisperBrowser } = useAppStore();
   const [url, setUrl] = useState('https://unsplash.com');
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
   const [activeTabId, setActiveTabId] = useState<string | null>(null);
   const [webviewVisible, setWebviewVisible] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [isBrowserReady, setIsBrowserReady] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+  const syncTimerRef = useRef<number | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
   const hideWebview = useCallback(() => {
+    if (syncTimerRef.current) {
+      window.clearTimeout(syncTimerRef.current);
+      syncTimerRef.current = null;
+    }
     invoke('browser_set_visible', { visible: false, layout: { x: 0, y: 0, width: 1, height: 1 } }).catch(() => {});
     setWebviewVisible(false);
   }, []);
 
-  const showWebview = useCallback(() => {
+  const computeLayout = useCallback(() => {
     const el = contentRef.current;
-    if (!el) return;
+    if (!el) return null;
     const rect = el.getBoundingClientRect();
-    if (rect.width > 50 && rect.height > 50) {
-      invoke('browser_set_visible', { visible: true, layout: { x: Math.round(rect.left), y: Math.round(rect.top), width: Math.round(rect.width), height: Math.round(rect.height) } }).catch(() => {});
+    if (rect.width < 80 || rect.height < 80) return null;
+    // Child webviews are positioned in window-client CSS/logical pixels.
+    return {
+      x: Math.round(rect.left),
+      y: Math.round(rect.top),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+    };
+  }, []);
+
+  const syncWebviewNow = useCallback(async () => {
+    if (!isBrowserOpen) return;
+    const layout = computeLayout();
+    if (!layout) return;
+    await ensureBrowserInit();
+    try {
+      await invoke('browser_set_visible', { visible: true, layout });
       setWebviewVisible(true);
+    } catch (err) {
+      console.error('[BrowserPanel] browser_set_visible(true) failed', err);
     }
-  }, []);
+  }, [isBrowserOpen, computeLayout]);
 
-  // Get tab ID from pre-init
+  const scheduleSync = useCallback((delay = 0) => {
+    if (syncTimerRef.current) window.clearTimeout(syncTimerRef.current);
+    syncTimerRef.current = window.setTimeout(() => {
+      // Two RAFs let CSS transform/width/layout settle before measuring.
+      requestAnimationFrame(() => requestAnimationFrame(() => syncWebviewNow()));
+    }, delay);
+  }, [syncWebviewNow]);
+
+  // Pre-init once after component mount, not at module import time.
   useEffect(() => {
-    ensureBrowserInit().then(snap => {
+    ensureBrowserInit().then((snap) => {
       if (snap?.active) setActiveTabId(snap.active);
+      setIsBrowserReady(true);
     });
   }, []);
 
-  // CRITICAL: Hide webview IMMEDIATELY when panel closes
-  // Show webview ONLY after the slide-in CSS transition completes
+  // Open/close lifecycle. Do not rely on transitionend: it is unreliable when width/fullscreen changes.
   useEffect(() => {
     if (!isBrowserOpen) {
-      // Panel closing — hide webview RIGHT NOW, don't wait for animation
       hideWebview();
+      return;
     }
-    // When opening: we wait for onTransitionEnd to show the webview
-  }, [isBrowserOpen, hideWebview]);
+    // Hide while panel is sliding, then show after normal transition duration.
+    hideWebview();
+    scheduleSync(380);
+    // Robust retries for slow WebView2 / layout / DPI edge cases.
+    const t1 = window.setTimeout(() => scheduleSync(0), 650);
+    const t2 = window.setTimeout(() => scheduleSync(0), 1200);
+    return () => { window.clearTimeout(t1); window.clearTimeout(t2); };
+  }, [isBrowserOpen, hideWebview, scheduleSync]);
 
-  // Also hide during fullscreen toggle (panel resizes)
+  // Fullscreen/whisper width changes do not necessarily fire transitionend. Force resync.
   useEffect(() => {
-    if (isBrowserOpen) hideWebview();
-    // showWebview will be called by onTransitionEnd
-  }, [isFullscreen]);
-
-  // After CSS transition ends, if panel is open, position and show the webview
-  const handleTransitionEnd = useCallback(() => {
-    if (isBrowserOpen) {
-      // Small delay to ensure layout is settled
-      requestAnimationFrame(() => { requestAnimationFrame(() => { showWebview(); }); });
-    }
-  }, [isBrowserOpen, showWebview]);
+    if (!isBrowserOpen) return;
+    hideWebview();
+    scheduleSync(120);
+    const t = window.setTimeout(() => scheduleSync(0), 400);
+    return () => window.clearTimeout(t);
+  }, [isFullscreen, isWhisperBrowser, isBrowserOpen, hideWebview, scheduleSync]);
+
+  // ResizeObserver catches panel/content size changes and keeps child webview glued to panel.
+  useEffect(() => {
+    if (!contentRef.current) return;
+    resizeObserverRef.current?.disconnect();
+    resizeObserverRef.current = new ResizeObserver(() => {
+      if (isBrowserOpen) scheduleSync(20);
+    });
+    resizeObserverRef.current.observe(contentRef.current);
+    return () => resizeObserverRef.current?.disconnect();
+  }, [isBrowserOpen, scheduleSync]);
 
-  // Resize sync — reposition webview when window resizes
   useEffect(() => {
-    if (!isBrowserOpen || !webviewVisible) return;
-    const onResize = () => showWebview();
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [isBrowserOpen, webviewVisible, showWebview]);
+    const onResizeOrScroll = () => { if (isBrowserOpen) scheduleSync(20); };
+    window.addEventListener('resize', onResizeOrScroll);
+    window.addEventListener('scroll', onResizeOrScroll, true);
+    return () => {
+      window.removeEventListener('resize', onResizeOrScroll);
+      window.removeEventListener('scroll', onResizeOrScroll, true);
+    };
+  }, [isBrowserOpen, scheduleSync]);
 
-  // Listen for tab state updates from Rust
   useEffect(() => {
     const unlisten = listen<any>('browser://tabs', (event) => {
       const snap = event.payload;
       const active = snap.tabs?.find((t: any) => t.id === snap.active);
       if (active) {
         setUrl(active.url || '');
-        setCanGoBack(active.can_go_back || false);
-        setCanGoForward(active.can_go_forward || false);
-        setActiveTabId(snap.active);
+        setCanGoBack(Boolean(active.can_go_back));
+        setCanGoForward(Boolean(active.can_go_forward));
+        setActiveTabId(snap.active || null);
       }
     });
     return () => { unlisten.then(fn => fn()); };
   }, []);
 
-  const navigate = (targetUrl: string) => { if (activeTabId) invoke('tab_navigate', { tabId: activeTabId, url: targetUrl }).catch(() => {}); };
+  const navigate = async (targetUrl: string) => {
+    const snap = await ensureBrowserInit();
+    const tabId = activeTabId || snap?.active;
+    if (tabId) invoke('tab_navigate', { tabId, url: targetUrl }).catch(console.error);
+  };
   const goBack = () => { if (activeTabId) invoke('tab_back', { tabId: activeTabId }).catch(() => {}); };
   const goForward = () => { if (activeTabId) invoke('tab_forward', { tabId: activeTabId }).catch(() => {}); };
   const reload = () => { if (activeTabId) invoke('tab_reload', { tabId: activeTabId }).catch(() => {}); };
   const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); navigate(url); };
 
-  // Panel width classes
   const widthClass = isFullscreen ? 'w-[100vw]' : isWhisperBrowser ? 'w-[320px] min-w-[280px]' : 'w-[50vw] min-w-[400px] max-w-[700px]';
 
   return (
     <div
-      onTransitionEnd={handleTransitionEnd}
       className={`absolute right-0 top-0 h-full bg-[#1C1C1E] shadow-2xl flex flex-col z-[60] transform transition-transform duration-[350ms] ease-[cubic-bezier(0.16,1,0.3,1)] ${isBrowserOpen ? 'translate-x-0' : 'translate-x-full'} ${widthClass}`}
     >
-      {/* Browser Chrome - URL bar + nav + bookmarks */}
       {!isWhisperBrowser ? (
         <div className="flex flex-col bg-[#1C1C1E] z-10 px-4 pt-4 pb-2 shrink-0">
           <div className="flex items-center gap-2 mb-3">
@@ -130,25 +177,24 @@ export const BrowserPanel = () => {
             </div>
             <form onSubmit={handleSubmit} className="flex-1 relative flex items-center bg-black/40 rounded-lg border border-white/5 focus-within:border-[#0A84FF]/40 transition-colors">
               <div className="absolute left-3 flex items-center gap-1.5 pointer-events-none"><ShieldCheck size={13} className="text-emerald-500" /><Lock size={12} className="text-[#808080]" /></div>
-              <input ref={inputRef} type="text" value={url} onChange={e => setUrl(e.target.value)} className="w-full bg-transparent text-[#E0E0E0] pl-14 pr-8 py-2 text-[13px] outline-none" spellCheck={false} />
-              {url && <button type="button" onClick={() => { setUrl(''); inputRef.current?.focus(); }} className="absolute right-2.5 text-[#808080] hover:text-white"><X size={14} /></button>}
+              <input type="text" value={url} onChange={e => setUrl(e.target.value)} className="w-full bg-transparent text-[#E0E0E0] pl-14 pr-8 py-2 text-[13px] outline-none" spellCheck={false} />
+              {url && <button type="button" onClick={() => setUrl('')} className="absolute right-2.5 text-[#808080] hover:text-white"><X size={14} /></button>}
             </form>
             <div className="flex items-center gap-0.5 ml-1">
               <button onClick={() => setIsFullscreen(!isFullscreen)} className="w-8 h-8 flex items-center justify-center text-[#A0A0A0] hover:text-white rounded-md hover:bg-white/5">{isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}</button>
               <button onClick={() => setIsBrowserOpen(false)} className="w-8 h-8 flex items-center justify-center text-[#A0A0A0] hover:text-white rounded-md hover:bg-white/5"><X size={18} /></button>
             </div>
           </div>
-          {/* Bookmarks strip */}
           <div className="flex items-center gap-2 overflow-x-auto pb-2 hide-scrollbar">
             {bookmarks.map((bm, i) => (
               <button key={i} onClick={() => navigate(bm.url)} className="flex items-center gap-1.5 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/5 rounded-md text-[11px] font-medium text-white whitespace-nowrap transition-colors">
                 <span>{bm.icon}</span><span>{bm.name}</span>
               </button>
             ))}
+            <button className="flex items-center justify-center w-7 h-7 rounded-md bg-white/5 hover:bg-white/10 text-[#808080]"><Plus size={14} /></button>
           </div>
         </div>
       ) : (
-        /* Whisper mode - minimal chrome */
         <div className="flex items-center gap-1 p-2 bg-[#1C1C1E] shrink-0 border-b border-[#3A3A3E]">
           <button onClick={goBack} disabled={!canGoBack} className={`w-6 h-6 flex items-center justify-center rounded ${canGoBack ? 'text-[#A0A0A0] hover:text-white' : 'text-[#404040]'}`}><ArrowLeft size={12} /></button>
           <form onSubmit={handleSubmit} className="flex-1 relative">
@@ -158,14 +204,12 @@ export const BrowserPanel = () => {
         </div>
       )}
 
-      {/* Content area — the native Tauri child webview is positioned exactly over this div */}
-      <div ref={contentRef} className="flex-1 bg-[#0A0A0B] relative">
-        {/* Placeholder shown while webview is loading/transitioning */}
+      <div ref={contentRef} className="flex-1 bg-[#0A0A0B] relative overflow-hidden">
         {!webviewVisible && (
           <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
             <div className="text-center text-[#404040]">
               <Globe size={28} className="mx-auto mb-2 opacity-30 animate-pulse" />
-              <p className="text-[11px]">Loading browser...</p>
+              <p className="text-[11px]">{isBrowserReady ? 'Positioning browser...' : 'Starting browser...'}</p>
             </div>
           </div>
         )}