Enable console debugging and add debug statements

- Enable console logging in vite.config.ts:
  - Set drop_console to false
  - Disabled pure_funcs stripping for console.log
  - Changed esbuild to only drop debugger, keep console

- Add debug logging to auth-gate.ts:
  - Log setAuthInitialized calls

- Add debug logging to useSavedStations.ts:
  - Log hook invocations
  - Log query function execution and results
  - Added retry configuration

- Add debug logging to StationsPage.tsx:
  - Log component renders
  - Log useSavedStations result state

These logs will show us what's happening with auth initialization and
query state transitions that are causing the React DOM removeChild error.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/core/auth/auth-gate.ts

@@ -38,10 +38,11 @@ export const waitForAuthInit = (): Promise<void> => {
 };
 
 export const setAuthInitialized = (initialized: boolean) => {
+  console.log('[DEBUG] setAuthInitialized called with:', initialized, '(was:', authInitialized, ')');
   authInitialized = initialized;
 
   if (initialized) {
-    console.log('[Auth Gate] Authentication fully initialized');
+    console.log('[DEBUG Auth Gate] Authentication fully initialized');
 
     // Resolve the auth promise
     if (resolveAuthInit) {
@@ -108,16 +109,19 @@ const processRequestQueue = async () => {
  * Returns true once auth is fully initialized with token
  */
 export const useIsAuthInitialized = () => {
-  const [initialized, setInitialized] = useState(authInitialized);
+  const [initialized, setInitialized] = useState(isAuthInitialized());
 
   useEffect(() => {
-    if (authInitialized) {
+    // If already initialized, ensure state reflects that
+    if (isAuthInitialized()) {
       setInitialized(true);
       return;
     }
 
-    // Wait for auth to initialize
+    // Otherwise wait for initialization
+    console.log('[useIsAuthInitialized] Waiting for auth...');
     waitForAuthInit().then(() => {
+      console.log('[useIsAuthInitialized] Auth initialized!');
       setInitialized(true);
     });
   }, []);

frontend/src/features/stations/hooks/useSavedStations.ts

@@ -36,13 +36,22 @@ interface UseSavedStationsOptions {
 export function useSavedStations(options?: UseSavedStationsOptions) {
   const isAuthInitialized = useIsAuthInitialized();
 
+  console.log('[DEBUG useSavedStations] Hook called, isAuthInitialized:', isAuthInitialized);
+
   return useQuery({
     queryKey: SAVED_STATIONS_QUERY_KEY,
-    queryFn: () => stationsApi.getSavedStations(),
+    queryFn: async () => {
+      console.log('[DEBUG useSavedStations] Query function executing');
+      const result = await stationsApi.getSavedStations();
+      console.log('[DEBUG useSavedStations] Query result:', result);
+      return result;
+    },
     staleTime: options?.staleTime ?? 5 * 60 * 1000, // 5 minutes default
     refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true,
     refetchOnMount: true,
-    enabled: isAuthInitialized // Only fetch once auth is initialized
+    enabled: isAuthInitialized, // Only fetch once auth is initialized
+    retry: 1,
+    retryDelay: 1000
   });
 }
 

frontend/src/features/stations/pages/StationsPage.tsx

@@ -52,6 +52,8 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
  * Mobile: Stacks vertically
  */
 export const StationsPage: React.FC = () => {
+  console.log('[DEBUG StationsPage] Rendering');
+
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
@@ -64,7 +66,9 @@ export const StationsPage: React.FC = () => {
 
   // Queries and mutations
   const { mutate: search, isPending: isSearching, error: searchError } = useStationsSearch();
-  const { data: savedStations = [] } = useSavedStations();
+  const { data: savedStations = [], isLoading: isSavedLoading, error: savedError } = useSavedStations();
+  console.log('[DEBUG StationsPage] useSavedStations result:', { data: savedStations, isLoading: isSavedLoading, error: savedError });
+
   const { mutate: saveStation } = useSaveStation();
   const { mutate: deleteStation } = useDeleteStation();
 

frontend/vite.config.ts

@@ -57,9 +57,9 @@ export default defineConfig({
     minify: 'terser',
     terserOptions: {
       compress: {
-        drop_console: true, // Remove console logs in production
+        drop_console: false, // DEBUGGING: Keep console logs enabled
         drop_debugger: true,
-        pure_funcs: ['console.log', 'console.info', 'console.debug'],
+        // pure_funcs: ['console.log', 'console.info', 'console.debug'], // DEBUGGING: Disabled for console output
       },
       mangle: {
         safari10: true, // Ensure Safari 10 compatibility
@@ -71,6 +71,6 @@ export default defineConfig({
   },
   // Production optimizations
   esbuild: {
-    drop: ['console', 'debugger'], // Additional cleanup
+    drop: ['debugger'], // DEBUGGING: Keep console, only drop debugger
   },
 });