ext: resolve merge conflict in use-tab-tracking-data by standardizing on callWithTimeout and removing Promise.allSettled path

Author: ImBIOS

apps/ext/.env.example

@@ -1,2 +1,2 @@
-SUPABASE_URL=
-SUPABASE_ANON_KEY=
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=

apps/ext/src/entrypoints/background.ts

@@ -83,7 +83,7 @@ class TabTracker {
       await this.performDataCleanupIfNeeded();
       logger.initializationStep('performDataCleanupIfNeeded', true, { component: 'TabTracker' });
 
-      // Initialize sync service
+      // Initialize sync service (safe if not configured)
       await syncService.initialize();
       logger.initializationStep('syncService.initialize', true, { component: 'TabTracker' });
 
@@ -121,7 +121,7 @@ class TabTracker {
     } catch (error) {
       logger.timeEnd('TabTracker Initialization');
       logger.fatal('Failed to initialize TabTracker', error as Error, { component: 'TabTracker' });
-      throw error;
+      // Do not rethrow; keep background alive for message handling
     }
   }
 
@@ -764,7 +764,9 @@ class TabTracker {
 export default defineBackground(() => {
   const tracker = new TabTracker();
 
-  // Initialize tracker
+  logger.info('Background service worker boot', { component: 'Background' });
+
+  // Initialize tracker in a fire-and-forget fashion
   tracker.initialize();
 
   // Tab event listeners

apps/ext/src/entrypoints/popup/main.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './app.tsx';
 import './style.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // StrictMode triggers double effects in dev, causing flicker and duplicate timers
+  // Remove it in extension popup to stabilize UX.
+  <App />
 );

apps/ext/src/hooks/use-tab-tracking-data.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { logger } from '../lib/logger';
 
 type TabSession = {
@@ -42,107 +42,88 @@ export function useTabTrackingData(): UseTabTrackingDataReturn {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const isLoadingRef = useRef(false);
+  const hasLoadedOnceRef = useRef(false);
+  const intervalRef = useRef<number | null>(null);
+
+  // Wrapper that times out a message call and logs a per-call warning without throwing
+  const callWithTimeout = useCallback(
+    async <T>(action: string, timeoutMs = 3000): Promise<T | null> => {
+      try {
+        const responsePromise = browser.runtime.sendMessage({ action }) as Promise<T>;
+        const timeoutPromise = new Promise<null>((resolve) => {
+          setTimeout(() => resolve(null), timeoutMs);
+        });
+        const result = (await Promise.race([responsePromise, timeoutPromise])) as T | null;
+        if (result === null) {
+          logger.warn(
+            `Popup data: failed to load ${action.toLowerCase().replace('get_', '').replace(/_/g, ' ')}`,
+            {
+              component: 'useTabTrackingData',
+              reason: `Timed out: ${action}`,
+            }
+          );
+          return null;
+        }
+        return result;
+      } catch (err) {
+        logger.warn(
+          `Popup data: failed to load ${action.toLowerCase().replace('get_', '').replace(/_/g, ' ')}`,
+          {
+            component: 'useTabTrackingData',
+            reason: err instanceof Error ? err.message : 'Unknown error',
+          }
+        );
+        return null;
+      }
+    },
+    []
+  );
+
   const loadData = useCallback(async () => {
+    if (isLoadingRef.current) {
+      // Prevent overlapping loads which caused duplicate timers and flicker
+      return;
+    }
+    isLoadingRef.current = true;
+
+    // Only time when not already timing this logical load
     logger.debug('Loading popup data', { component: 'useTabTrackingData' });
     logger.time('TabTrackingData Load');
-
-    const withTimeout = <T>(promise: Promise<T>, ms: number, label: string): Promise<T> => {
-      return new Promise<T>((resolve, reject) => {
-        const timer = setTimeout(() => {
-          reject(new Error(`Timed out: ${label}`));
-        }, ms);
-        promise.then(
-          (value) => {
-            clearTimeout(timer);
-            resolve(value);
-          },
-          (reason) => {
-            clearTimeout(timer);
-            reject(reason);
-          }
-        );
-      });
-    };
+  
 
     try {
-      setIsLoading(true);
+      setIsLoading(!hasLoadedOnceRef.current);
       setError(null);
 
-      const results = await Promise.allSettled([
-        withTimeout(
-          browser.runtime.sendMessage({ action: 'GET_DAILY_STATS' }) as Promise<DailyStats | null>,
-          3000,
-          'GET_DAILY_STATS'
-        ),
-        withTimeout(
-          browser.runtime.sendMessage({
-            action: 'GET_CURRENT_SESSION',
-          }) as Promise<TabSession | null>,
-          3000,
-          'GET_CURRENT_SESSION'
-        ),
-        withTimeout(
-          browser.runtime.sendMessage({ action: 'GET_TRACKING_STATUS' }) as Promise<boolean>,
-          3000,
-          'GET_TRACKING_STATUS'
-        ),
-        withTimeout(
-          browser.runtime.sendMessage({ action: 'GET_SYNC_STATUS' }) as Promise<SyncStatus>,
-          3000,
-          'GET_SYNC_STATUS'
-        ),
+      const [statsResponse, sessionResponse, trackingResponse, syncResponse] = await Promise.all([
+        callWithTimeout<DailyStats | null>('GET_DAILY_STATS'),
+        callWithTimeout<TabSession | null>('GET_CURRENT_SESSION'),
+        callWithTimeout<boolean>('GET_TRACKING_STATUS'),
+        callWithTimeout<SyncStatus>('GET_SYNC_STATUS'),
       ]);
 
-      const [statsRes, sessionRes, trackingRes, syncRes] = results;
-
-      if (statsRes.status === 'fulfilled') {
-        setDailyStats(statsRes.value);
-      } else {
-        logger.warn('Popup data: failed to load daily stats', {
-          component: 'useTabTrackingData',
-          reason: (statsRes.reason as Error)?.message,
-        });
+      if (statsResponse !== null) {
+        setDailyStats(statsResponse);
       }
-
-      if (sessionRes.status === 'fulfilled') {
-        setCurrentSession(sessionRes.value);
-      } else {
-        logger.warn('Popup data: failed to load current session', {
-          component: 'useTabTrackingData',
-          reason: (sessionRes.reason as Error)?.message,
-        });
+      if (sessionResponse !== null) {
+        setCurrentSession(sessionResponse);
       }
-
-      if (trackingRes.status === 'fulfilled') {
-        setIsTrackingEnabled(trackingRes.value);
-      } else {
-        logger.warn('Popup data: failed to load tracking status', {
-          component: 'useTabTrackingData',
-          reason: (trackingRes.reason as Error)?.message,
-        });
+      if (typeof trackingResponse === 'boolean') {
+        setIsTrackingEnabled(trackingResponse);
       }
-
-      if (syncRes.status === 'fulfilled') {
-        setSyncStatus(syncRes.value);
-      } else {
-        logger.warn('Popup data: failed to load sync status', {
-          component: 'useTabTrackingData',
-          reason: (syncRes.reason as Error)?.message,
-        });
+      if (syncResponse !== null) {
+        setSyncStatus(syncResponse);
       }
 
       logger.timeEnd('TabTrackingData Load');
       logger.info('Tab tracking data loaded (partial ok)', {
         component: 'useTabTrackingData',
-        hasStats: statsRes.status === 'fulfilled' && !!statsRes.value,
-        hasSession: sessionRes.status === 'fulfilled' && !!sessionRes.value,
-        trackingEnabled:
-          trackingRes.status === 'fulfilled' ? Boolean(trackingRes.value) : undefined,
+        hasStats: !!statsResponse,
+        hasSession: !!sessionResponse,
+        trackingEnabled: (trackingResponse as unknown as boolean) ?? undefined,
       });
 
-      if (results.some((r) => r.status === 'rejected')) {
-        setError('Some data failed to load. Try again.');
-      }
     } catch (err) {
       logger.timeEnd('TabTrackingData Load');
       logger.error('Failed to load tab tracking data', err as Error, {
@@ -151,18 +132,31 @@ export function useTabTrackingData(): UseTabTrackingDataReturn {
       setError('Failed to load tracking data');
     } finally {
       setIsLoading(false);
+      isLoadingRef.current = false;
+      hasLoadedOnceRef.current = true;
     }
-  }, []);
+  }, [callWithTimeout]);
 
   useEffect(() => {
     loadData();
 
-    const interval = setInterval(() => {
+    // Clear existing interval if any (hot-reloads/StrictMode)
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    intervalRef.current = setInterval(() => {
       logger.trace('Auto-refreshing tab tracking data', { component: 'useTabTrackingData' });
       loadData();
-    }, 5000);
+    }, 5000) as unknown as number;
 
-    return () => clearInterval(interval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
   }, [loadData]);
 
   return {

apps/ext/src/lib/supabase.ts

@@ -1,36 +1,41 @@
-import { createClient } from '@supabase/supabase-js';
+import { createClient, type SupabaseClient } from '@supabase/supabase-js';
+import { logger } from './logger';
 import type { Database } from './types';
 
-// These will need to be set in the extension's environment
-const supabaseUrl = process.env.SUPABASE_URL;
-const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;
+// Read from Vite/WXT env (exposed at build-time). Prefix must be VITE_.
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string | undefined;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string | undefined;
 
-if (!supabaseUrl) {
-  throw new Error('SUPABASE_URL is not set');
-}
-
-if (!supabaseAnonKey) {
-  throw new Error('SUPABASE_ANON_KEY is not set');
-}
+let client: SupabaseClient<Database> | null = null;
 
-export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
-  auth: {
-    persistSession: true,
-    autoRefreshToken: true,
-    detectSessionInUrl: false,
-    storage: {
-      getItem: async (key: string) => {
-        const result = await browser.storage.local.get(key);
-        return result[key] || null;
-      },
-      setItem: async (key: string, value: string) => {
-        await browser.storage.local.set({ [key]: value });
-      },
-      removeItem: async (key: string) => {
-        await browser.storage.local.remove(key);
+if (supabaseUrl && supabaseAnonKey) {
+  client = createClient<Database>(supabaseUrl, supabaseAnonKey, {
+    auth: {
+      persistSession: true,
+      autoRefreshToken: true,
+      detectSessionInUrl: false,
+      storage: {
+        getItem: async (key: string) => {
+          const result = await browser.storage.local.get(key);
+          return result[key] || null;
+        },
+        setItem: async (key: string, value: string) => {
+          await browser.storage.local.set({ [key]: value });
+        },
+        removeItem: async (key: string) => {
+          await browser.storage.local.remove(key);
+        },
       },
     },
-  },
-});
+  });
+} else if (import.meta.env.DEV) {
+  logger.info(
+    'Supabase not configured (VITE_SUPABASE_URL/VITE_SUPABASE_ANON_KEY missing). Cloud sync disabled in extension dev.',
+    {
+      component: 'supabase',
+    }
+  );
+}
 
+export const supabase = client;
 export type { Database } from './types';