From e7aa74287a38d03244e6b045c152c9df44ab6da4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 12 Oct 2025 23:57:23 +0000
Subject: [PATCH] feat: Add diagnostic logging for tab focus issue

---
 .../moderation/useModerationQueueManager.ts   | 47 +++++++++++++++----
 src/hooks/useAuth.tsx                         | 14 ++++--
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/hooks/moderation/useModerationQueueManager.ts b/src/hooks/moderation/useModerationQueueManager.ts
index 78024997..2536fa22 100644
--- a/src/hooks/moderation/useModerationQueueManager.ts
+++ b/src/hooks/moderation/useModerationQueueManager.ts
@@ -157,10 +157,22 @@ export function useModerationQueueManager(
    */
   const fetchItems = useCallback(async (silent = false) => {
     if (!user) return;
+
+    // Get caller info
+    const callerStack = new Error().stack;
+    const callerLine = callerStack?.split('\n')[2]?.trim();
     
-    // Check if tab is hidden
-    if (pauseFetchingRef.current || document.hidden) {
-      console.log('⏸️ Fetch paused (tab hidden)');
+    console.log('🔄 [FETCH ITEMS] Called', {
+      silent,
+      pauseFetchingRef: pauseFetchingRef.current,
+      documentHidden: document.hidden,
+      caller: callerLine,
+      timestamp: new Date().toISOString()
+    });
+
+    // Check if fetching is paused (controlled by visibility handler if enabled)
+    if (pauseFetchingRef.current) {
+      console.log('⏸️ Fetch paused by pauseFetchingRef');
       return;
     }
     
@@ -794,15 +806,26 @@ export function useModerationQueueManager(
   
   // Visibility change handler
   useEffect(() => {
-    console.log('🔍 Visibility effect running - refreshOnTabVisible:', settings.refreshOnTabVisible);
+    console.log('🔍 [VISIBILITY EFFECT] Running', {
+      settingsObject: settings,
+      refreshOnTabVisible: settings.refreshOnTabVisible,
+      typeOf: typeof settings.refreshOnTabVisible,
+      rawValue: JSON.stringify(settings.refreshOnTabVisible),
+      stringValue: String(settings.refreshOnTabVisible),
+      boolValue: Boolean(settings.refreshOnTabVisible),
+      timestamp: new Date().toISOString()
+    });
     
     // Early return if feature is disabled
     if (!settings.refreshOnTabVisible) {
-      console.log('⚙️ refreshOnTabVisible is DISABLED - no listener attached');
+      console.log('   ✅ Setting is FALSE - NO listener will be attached');
+      console.log('   ✅ Tab focus will NOT trigger refreshes');
       return;
     }
     
-    console.log('✅ refreshOnTabVisible is ENABLED - attaching listener');
+    console.error('   ❌ Setting is TRUE - listener WILL be attached');
+    console.error('   ❌ THIS MEANS TAB FOCUS **WILL** TRIGGER REFRESHES');
+    console.error('   ⚠️  If you disabled this setting, it is NOT working properly');
     
     const handleVisibilityChange = () => {
       // Double-check setting before doing anything (defensive check)
@@ -812,17 +835,21 @@ export function useModerationQueueManager(
       }
       
       if (document.hidden) {
-        console.log('📴 Tab hidden - pausing queue updates');
+        console.log('👁️ [VISIBILITY HANDLER] Tab hidden - pausing fetches');
         pauseFetchingRef.current = true;
       } else {
-        console.log('📱 Tab visible - resuming queue updates');
+        console.error('👁️ [VISIBILITY HANDLER] Tab visible - THIS IS WHERE THE REFRESH HAPPENS');
+        console.error('   🔴 TAB FOCUS REFRESH TRIGGERED HERE');
+        console.error('   📍 Stack trace below:');
+        console.trace();
+        
         pauseFetchingRef.current = false;
         
         if (initialFetchCompleteRef.current && !isMountingRef.current && fetchItemsRef.current) {
-          console.log('🔄 Tab became visible - triggering refresh (setting enabled)');
+          console.error('   ➡️  Calling fetchItems(true) NOW');
           fetchItemsRef.current(true);
         } else {
-          console.log('⏭️ Tab became visible - skipping refresh (initial fetch not complete or mounting)');
+          console.log('   ⏭️ Skipping refresh (initial fetch not complete or mounting)');
         }
       }
     };
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index c6e48897..0f4fa2c2 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -335,16 +335,24 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
 
     // Handle page visibility changes - only verify if inactive for >5 minutes
     const handleVisibilityChange = () => {
+      const timeSinceLastCheck = Date.now() - lastVisibilityVerificationRef.current;
+      const FIVE_MINUTES = 5 * 60 * 1000;
+      
+      console.log('🔐 [AUTH] Visibility changed', {
+        state: document.visibilityState,
+        timeSinceLastCheck: Math.round(timeSinceLastCheck / 1000) + 's',
+        willVerifySession: document.visibilityState === 'visible' && timeSinceLastCheck > FIVE_MINUTES
+      });
+      
       if (document.visibilityState === 'visible') {
-        const timeSinceLastCheck = Date.now() - lastVisibilityVerificationRef.current;
-        const FIVE_MINUTES = 5 * 60 * 1000;
-        
         if (timeSinceLastCheck > FIVE_MINUTES) {
           authLog('[Auth] Tab visible after 5+ minutes, verifying session');
+          console.log('   ⚠️  Verifying session - this may cause component re-renders');
           lastVisibilityVerificationRef.current = Date.now();
           verifySession();
         } else {
           authLog('[Auth] Tab visible, session recently verified, skipping');
+          console.log('   ✅ Session recently verified, skipping verification');
         }
       }
     };