@jmruthers/pace-core 0.5.135 → 0.5.136

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -193,7 +193,7 @@
 
 import * as React from "react";
 import { Menu, ChevronDown } from "lucide-react";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/core/cn";
 import { NavigationMenuProps, NavigationItem } from "./types";
 import { Button } from "../Button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select";
@@ -202,6 +202,7 @@ import { useRBAC } from "../../rbac/hooks/useRBAC";
 import { useResolvedScope } from "../../rbac/hooks";
 import { usePermissions } from "../../rbac/hooks/usePermissions";
 import type { Permission, AccessLevel as RBACAccessLevel } from "../../rbac/types";
+import { logger } from "../../utils/core/logger";
 
 /**
  * Unified NavigationMenu component that supports both dropdown and hierarchical navigation modes.
@@ -424,7 +425,7 @@ export const NavigationMenu = React.forwardRef<
     authContext = useUnifiedAuth();
   } catch (error) {
     // NavigationMenu is being used outside of UnifiedAuthProvider
-    console.warn('[NavigationMenu] useUnifiedAuth not available, running in unauthenticated mode');
+    logger.warn('NavigationMenu', 'useUnifiedAuth not available, running in unauthenticated mode');
   }
 
   // Get RBAC context for permission and role checks
@@ -433,7 +434,7 @@ export const NavigationMenu = React.forwardRef<
     rbacContext = useRBAC();
   } catch (error) {
     // RBAC not available - permission filtering will be disabled
-    console.warn('[NavigationMenu] useRBAC not available, permission filtering disabled');
+    logger.warn('NavigationMenu', 'useRBAC not available, permission filtering disabled');
   }
 
   // Get resolved scope for permission checks
@@ -524,7 +525,7 @@ export const NavigationMenu = React.forwardRef<
       // If there's an error or empty permission map after loading, show nothing
       // Security: Better to show nothing than risk showing unauthorized items
       if (permissionsError || !permissionMap || Object.keys(permissionMap).length === 0) {
-        console.warn('[NavigationMenu] Permission map is empty or has error - showing no items for security', {
+        logger.warn('NavigationMenu', 'Permission map is empty or has error - showing no items for security', {
           permissionsError: permissionsError?.message,
           permissionMapSize: permissionMap ? Object.keys(permissionMap).length : 0
         });
@@ -643,7 +644,7 @@ export const NavigationMenu = React.forwardRef<
           
           if (!finalHasPermission) {
             if (auditLog) {
-              console.log(`[NavigationMenu] Filtering out navigation item "${item.label}" - no page permission:`, {
+              logger.debug('NavigationMenu', `Filtering out navigation item "${item.label}" - no page permission:`, {
                 itemId: item.id,
                 href: item.href,
                 pageId,
@@ -716,7 +717,7 @@ export const NavigationMenu = React.forwardRef<
   // Log navigation access attempts for debugging
   React.useEffect(() => {
     if (auditLog && authContext) {
-      console.log('[NavigationMenu] Navigation access attempt:', {
+      logger.debug('NavigationMenu', 'Navigation access attempt:', {
         itemId: 'navigation-menu',
         label: 'Navigation Menu',
         href: currentPath,
@@ -766,7 +767,7 @@ export const NavigationMenu = React.forwardRef<
     // NEW: Phase 2 - Enhanced Security Features
     // Log navigation access attempt for audit
     if (auditLog) {
-      console.log(`[NavigationMenu] Navigation access attempt:`, {
+      logger.debug('NavigationMenu', 'Navigation access attempt:', {
         itemId: item.id,
         label: item.label,
         href: item.href,
@@ -842,7 +843,7 @@ export const NavigationMenu = React.forwardRef<
       }
       
       if (strictMode) {
-        console.error(`[NavigationMenu] STRICT MODE VIOLATION: User attempted to access protected navigation item without permission`, {
+        logger.error('NavigationMenu', 'STRICT MODE VIOLATION: User attempted to access protected navigation item without permission', {
           itemId: item.id,
           label: item.label,
           href: item.href,

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -61,6 +61,7 @@ import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { RefreshCw, AlertCircle, Building2, Shield } from 'lucide-react';
 import { useOrganisations } from '../../providers/OrganisationProvider';
 import type { Organisation } from '../../types/organisation';
+import { logger } from '../../utils/core/logger';
 
 export interface OrganisationSelectorProps {
   /** Placeholder text for the dropdown */
@@ -137,9 +138,9 @@ export function OrganisationSelector({
         onOrganisationChange(newOrganisation);
       }
       
-      console.log("[OrganisationSelector] Successfully switched to organisation:", orgId);
+      logger.debug('OrganisationSelector', 'Successfully switched to organisation:', orgId);
     } catch (error) {
-      console.error("[OrganisationSelector] Failed to switch organisation:", error);
+      logger.error('OrganisationSelector', 'Failed to switch organisation:', error);
       setSwitchError(error instanceof Error ? error.message : 'Failed to switch organisation');
     } finally {
       setIsLoading(false);
@@ -159,7 +160,7 @@ export function OrganisationSelector({
     try {
       await refreshOrganisations();
     } catch (error) {
-      console.error("[OrganisationSelector] Failed to refresh organisations:", error);
+      logger.error('OrganisationSelector', 'Failed to refresh organisations:', error);
       setSwitchError('Failed to refresh organisations');
     } finally {
       setIsLoading(false);

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -105,8 +105,9 @@ import { useEvents } from '../../hooks/useEvents';
 import { useEventTheme } from '../../hooks/useEventTheme';
 import { useCan, useResolvedScope } from '../../rbac/hooks';
 import { createScopeFromEvent } from '../../rbac/utils/eventContext';
-import { getCurrentAppName } from '../../utils/appNameResolver';
+import { getCurrentAppName } from '../../utils/app/appNameResolver';
 import { isSuperAdmin } from '../../rbac/api';
+import { logger } from '../../utils/core/logger';
 import type { Permission, Scope } from '../../rbac/types';
 
 // Stable empty objects to prevent infinite loops
@@ -465,7 +466,7 @@ export function PaceAppLayout({
         const superAdminStatus = await isSuperAdmin(user.id);
         setIsSuperAdminUser(superAdminStatus);
       } catch (error) {
-        console.error('[PaceAppLayout] Error checking super admin status:', error);
+        logger.error('PaceAppLayout', 'Error checking super admin status', { userId: user?.id, error });
         setIsSuperAdminUser(false);
       } finally {
         setIsCheckingSuperAdmin(false);
@@ -506,7 +507,7 @@ export function PaceAppLayout({
     // NEW: Phase 1 - Enhanced Security Features
     // Handle strict mode violations - skip for super admins
     if (strictMode && !isSuperAdminUser && !can) {
-      console.error(`[PaceAppLayout] STRICT MODE VIOLATION: User attempted to access protected page without permission`, {
+      logger.error('PaceAppLayout', 'STRICT MODE VIOLATION: User attempted to access protected page without permission', {
         pageName: currentPageId,
         operation: currentRoutePermission,
         userId: user?.id,
@@ -626,7 +627,7 @@ export function PaceAppLayout({
       } catch (error) {
         // On error, fall back to showing all items (graceful degradation)
         // This prevents navigation from being empty if permission checks fail
-        console.error('[PaceAppLayout] Failed to load permission map for navigation filtering:', error);
+        logger.error('PaceAppLayout', 'Failed to load permission map for navigation filtering', { userId: user?.id, error });
         if (isMounted) {
           setFilteredMenuItems(baseMenuItems);
         }
@@ -654,7 +655,7 @@ export function PaceAppLayout({
       if (!currentRoute) {
         // Route not found in configuration
         if (strictMode) {
-          console.error(`[PaceAppLayout] STRICT MODE VIOLATION: Route not found in configuration`, {
+          logger.error('PaceAppLayout', 'STRICT MODE VIOLATION: Route not found in configuration', {
             route: currentPath,
             userId: user?.id,
             timestamp: new Date().toISOString()
@@ -685,7 +686,7 @@ export function PaceAppLayout({
           if (!isMounted) return;
           hasAccess = hasPagePermission;
         } catch (error) {
-          console.error('[PaceAppLayout] Failed to check page permission:', error);
+          logger.error('PaceAppLayout', 'Failed to check page permission', { route: currentPath, pageId: currentRoute.pageId, error });
           if (!isMounted) return;
           hasAccess = false;
         }
@@ -709,7 +710,7 @@ export function PaceAppLayout({
         }
         
         if (strictMode) {
-          console.error(`[PaceAppLayout] STRICT MODE VIOLATION: User attempted to access protected route without permission`, {
+          logger.error('PaceAppLayout', 'STRICT MODE VIOLATION: User attempted to access protected route without permission', {
             route: currentPath,
             userId: user?.id,
             permissions: currentRoute.permissions,
@@ -745,15 +746,16 @@ export function PaceAppLayout({
     const result = await updatePassword(newPassword);
     if (result?.error) {
       // The form will display the error message
-      console.error('Failed to change password:', result.error.message);
+      logger.error('PaceAppLayout', 'Failed to change password', { error: result.error.message });
     }
     // The form will handle closing the modal on success
     return result || { error: null };
   };
 
   // Show loading state while checking permissions or super admin status
-  // But don't show loading if we already have a permission error (prioritize error display)
-  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission) && !permissionError) {
+  // Keep loading active until BOTH checks complete to prevent exposing protected content
+  // This ensures we don't render the main layout when permission check failed but super admin check is pending
+  if (enforcePermissions && (isCheckingSuperAdmin || isCheckingPermission)) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
@@ -764,9 +766,9 @@ export function PaceAppLayout({
     );
   }
 
-  // Show permission error (check this after loading state, but only if super admin check is complete)
+  // Show permission error (only after BOTH checks are complete)
   // Super admins bypass all permission checks, so don't show errors for them
-  if (enforcePermissions && permissionError && !isCheckingSuperAdmin && !isSuperAdminUser) {
+  if (enforcePermissions && permissionError && !isSuperAdminUser) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.integration.test.tsx

@@ -102,14 +102,6 @@ const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
 
 vi.mock('../../../rbac/api', () => ({
   isPermitted: vi.fn().mockImplementation((input) => {
-    console.log('[PaceAppLayout] Page access attempt:', {
-      pageName: input.pageId || 'unknown',
-      operation: input.permission,
-      userId: input.userId,
-      allowed: true,
-      strictMode: true,
-      timestamp: new Date().toISOString()
-    });
     return Promise.resolve(true);
   }),
   getPermissionMap: vi.fn().mockResolvedValue({}),
@@ -288,14 +280,6 @@ describe('PaceAppLayout Integration', () => {
     
     // Reset mockIsPermitted to default implementation
     mockIsPermitted.mockImplementation((input) => {
-      console.log('[PaceAppLayout] Page access attempt:', {
-        pageName: input.pageId || 'unknown',
-        operation: input.permission,
-        userId: input.userId,
-        allowed: true,
-        strictMode: true,
-        timestamp: new Date().toISOString()
-      });
       return Promise.resolve(true);
     });
     

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.security.test.tsx

@@ -655,7 +655,6 @@ describe('PaceAppLayout Security', () => {
         // Simulate a component that might try to execute malicious code
         React.useEffect(() => {
           // This would be dangerous in a real scenario
-          console.log('Component mounted');
         }, []);
         
         return <div data-testid="malicious-component">Malicious Component</div>;

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.unit.test.tsx

@@ -99,14 +99,6 @@ vi.mock('../../../hooks/useEventTheme', () => ({
 
 // Mock the new RBAC system
 const mockIsPermitted = vi.fn().mockImplementation((input) => {
-  console.log('[PaceAppLayout] Page access attempt:', {
-    pageName: input.pageId || 'unknown',
-    operation: input.permission,
-    userId: input.userId,
-    allowed: true,
-    strictMode: true,
-    timestamp: new Date().toISOString()
-  });
   return Promise.resolve(true);
 });
 
@@ -902,7 +894,6 @@ describe('PaceAppLayout Component', () => {
     it('filters navigation when filterNavigationByPermissions is true', async () => {
       // Mock checkPermission to return false for some items
       mockIsPermitted.mockImplementation((input) => {
-        console.log('[TEST] mockIsPermitted called with:', input);
         if (input.pageId === 'dashboard') return Promise.resolve(false);
         return Promise.resolve(true);
       });

package/src/components/PaceLoginPage/PaceLoginPage.test.tsx

@@ -9,6 +9,7 @@ import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { PaceLoginPage } from './PaceLoginPage';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import { Logger, LogLevel } from '../../utils/core/logger';
 
 // Mock React Router
 const mockNavigate = vi.fn();
@@ -83,9 +84,29 @@ import { isSuperAdmin } from '../../rbac/api';
 const originalConsoleError = console.error;
 
 describe('PaceLoginPage Component', () => {
-    afterEach(() => {
+  let originalMode: string | undefined;
+
+  beforeEach(() => {
+    // Ensure logger is enabled by setting MODE to development
+    originalMode = import.meta.env.MODE;
+    (import.meta.env as any).MODE = 'development';
+    
+    // Configure logger to ensure it logs in test environment
+    Logger.configure({
+      level: LogLevel.DEBUG,
+      includeTimestamp: false,
+      includeComponent: true,
+    });
+  });
+
+  afterEach(() => {
     // Restore console methods
     console.error = originalConsoleError;
+    
+    // Restore original mode
+    if (originalMode !== undefined) {
+      (import.meta.env as any).MODE = originalMode;
+    }
   });
 
   // Basic rendering tests
@@ -330,7 +351,11 @@ describe('PaceLoginPage Component', () => {
       await user.click(submitButton);
       
       await waitFor(() => {
-        expect(console.error).toHaveBeenCalledWith('Navigation error after sign-in:', expect.any(Error));
+        // Logger.error formats the message with component name and log level
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringContaining('[PaceLoginPage] Navigation error after sign-in:'),
+          expect.any(Error)
+        );
       });
     });
 
@@ -387,6 +412,9 @@ describe('PaceLoginPage Component', () => {
       const user = userEvent.setup();
       mockAuthContext.signIn.mockRejectedValue(new Error('Network error'));
       
+      // Mock console.error to catch the error
+      console.error = vi.fn();
+      
       renderWithProviders(<PaceLoginPage appName="Test App" />);
       
       const emailInput = screen.getByLabelText('Email');
@@ -398,7 +426,11 @@ describe('PaceLoginPage Component', () => {
       await user.click(submitButton);
       
       await waitFor(() => {
-        expect(console.error).toHaveBeenCalledWith('Login error:', expect.any(Error));
+        // Logger.error formats the message with component name and log level
+        expect(console.error).toHaveBeenCalledWith(
+          expect.stringContaining('[PaceLoginPage] Login error:'),
+          expect.any(Error)
+        );
       });
     });
   });

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -129,6 +129,7 @@ import { LoginForm } from '../LoginForm';
 import { Button, Input, Label } from '..';
 import { clearPalette } from '../../theming/runtime';
 import { EventServiceContext } from '../../providers/services/EventServiceProvider';
+import { logger } from '../../utils/core/logger';
 
 export interface PaceLoginPageProps {
   /** The name of the application to be displayed on the login form. */
@@ -207,7 +208,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
       } catch (error) {
         // Service may not be available yet or events not loaded - that's okay
-        console.debug('[PaceLoginPage] Could not restore persisted event (service may not be ready):', error);
+        logger.debug('PaceLoginPage', 'Could not restore persisted event (service may not be ready):', error);
       }
     };
     
@@ -231,13 +232,13 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
 
       try {
         const userId = user.id;
-        console.log('[PaceLoginPage] Checking app access using RBAC:', { appName, userId });
+        logger.debug('PaceLoginPage', 'Checking app access using RBAC:', { appName, userId });
 
         // Step 1: Check if user is super admin (they have unrestricted access)
         const superAdminCheck = await isSuperAdmin(userId);
         
         if (superAdminCheck) {
-          console.log('[PaceLoginPage] User is super admin, granting access');
+          logger.debug('PaceLoginPage', 'User is super admin, granting access');
           setIsCheckingAccess(false);
           navigate(onSuccessRedirectPath, { replace: true });
           return;
@@ -252,7 +253,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           .single();
 
         if (appError || !appData) {
-          console.error('[PaceLoginPage] App not found:', appName, appError);
+          logger.error('PaceLoginPage', 'App not found:', { appName, error: appError });
           setAccessError(`Application "${appName}" is not configured. Please contact your administrator.`);
           setIsCheckingAccess(false);
           return;
@@ -265,7 +266,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           .eq('app_id', appData.id);
 
         if (pagesError || !pagesData || pagesData.length === 0) {
-          console.log('[PaceLoginPage] No pages configured for app:', appName);
+          logger.debug('PaceLoginPage', 'No pages configured for app:', appName);
           setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
           setIsCheckingAccess(false);
           return;
@@ -282,7 +283,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           .single();
 
         if (!orgData) {
-          console.log('[PaceLoginPage] User has no organisation access');
+          logger.debug('PaceLoginPage', 'User has no organisation access');
           setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
           setIsCheckingAccess(false);
           return;
@@ -302,7 +303,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
               p_page_id: page.page_name // Page name to resolve to UUID
             });
 
-          console.log('[PaceLoginPage] Permission check for page:', page.page_name, { hasPermission, error: permError });
+          logger.debug('PaceLoginPage', 'Permission check for page:', { pageName: page.page_name, hasPermission, error: permError });
 
           if (!permError && hasPermission === true) {
             hasAnyAccess = true;
@@ -311,18 +312,18 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         }
 
         if (hasAnyAccess) {
-          console.log('[PaceLoginPage] User has access to app');
+          logger.debug('PaceLoginPage', 'User has access to app');
           setIsCheckingAccess(false);
           navigate(onSuccessRedirectPath, { replace: true });
           return;
         }
 
         // No access - deny
-        console.log('[PaceLoginPage] Access denied - no permissions');
+        logger.debug('PaceLoginPage', 'Access denied - no permissions');
         setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
         setIsCheckingAccess(false);
       } catch (error) {
-        console.error('[PaceLoginPage] Error checking app access:', error);
+        logger.error('PaceLoginPage', 'Error checking app access:', error);
         setAccessError('An error occurred while checking your permissions. Please try again or contact support.');
         setIsCheckingAccess(false);
       }
@@ -349,7 +350,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
         try {
           navigate(onSuccessRedirectPath, { replace: true });
         } catch (navError) {
-          console.error('Navigation error after sign-in:', navError);
+          logger.error('PaceLoginPage', 'Navigation error after sign-in:', navError);
         }
       }
     } finally {
@@ -371,7 +372,7 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
           isLoading={isSigningIn}
           onError={(error) => {
             // LoginForm will handle display of the error
-            console.error('Login error:', error);
+            logger.error('PaceLoginPage', 'Login error:', error);
           }}
         />
         {(() => {

package/src/components/PasswordReset/PasswordChangeForm.tsx

@@ -101,7 +101,7 @@ import React, { useState } from 'react';
 import { Button } from '../Button/Button';
 import { Input } from '../Input/Input';
 import { Label } from '../Label';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 export interface PasswordChangeFormValues {
   newPassword: string;

package/src/components/PasswordReset/index.ts

@@ -1,4 +1,2 @@
-export { PasswordResetForm } from './PasswordResetForm';
-export type { PasswordResetFormProps } from './PasswordResetForm';
 export { PasswordChangeForm } from './PasswordChangeForm';
 export type { PasswordChangeFormProps, PasswordChangeFormValues } from './PasswordChangeForm';

package/src/components/Progress/Progress.tsx

@@ -62,7 +62,7 @@
 
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 /**
  * Props for the Progress component

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -98,7 +98,21 @@ describe('ProtectedRoute Component', () => {
     isLoading: false,
   };
 
+  let originalMode: string | undefined;
+
   beforeEach(() => {
+    // Ensure logger is enabled by setting MODE to development
+    originalMode = import.meta.env.MODE;
+    (import.meta.env as any).MODE = 'development';
+    
+    import('../../utils/core/logger').then(({ Logger, LogLevel }) => {
+      Logger.configure({
+        level: LogLevel.DEBUG,
+        includeTimestamp: false,
+        includeComponent: true,
+      });
+    });
+    
     vi.clearAllMocks();
     console.debug = vi.fn();
     console.warn = vi.fn();
@@ -112,6 +126,11 @@ describe('ProtectedRoute Component', () => {
   afterEach(() => {
     console.debug = originalConsoleDebug;
     console.warn = originalConsoleWarn;
+    
+    // Restore original mode
+    if (originalMode !== undefined) {
+      (import.meta.env as any).MODE = originalMode;
+    }
   });
 
   describe('Rendering', () => {
@@ -124,6 +143,8 @@ describe('ProtectedRoute Component', () => {
     });
 
     it('renders outlet when events exist but none selected (allows event selector visibility)', () => {
+      const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
+      
       mockUseEvents.mockReturnValue({
         selectedEvent: null,
         events: [{ id: 'event-1', name: 'Test Event' }],
@@ -133,8 +154,8 @@ describe('ProtectedRoute Component', () => {
       renderWithProviders(<ProtectedRoute />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(console.debug).toHaveBeenCalledWith(
-        '[ProtectedRoute] Events available but none selected - allowing render so selector is visible'
+      expect(consoleDebugSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
       );
     });
 
@@ -222,6 +243,8 @@ describe('ProtectedRoute Component', () => {
     });
 
     it('warns when redirecting due to session restoration timeout', () => {
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      
       mockUseUnifiedAuth.mockReturnValue({
         isAuthenticated: false,
         authLoading: false,
@@ -236,8 +259,8 @@ describe('ProtectedRoute Component', () => {
 
       renderWithProviders(<ProtectedRoute />);
 
-      expect(console.warn).toHaveBeenCalledWith(
-        '[ProtectedRoute] Session restoration failed, redirecting to login',
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[WARN] [ProtectedRoute] Session restoration failed, redirecting to login'),
         expect.objectContaining({
           timedOut: true,
         })
@@ -259,10 +282,12 @@ describe('ProtectedRoute Component', () => {
         hasTimedOut: false,
       });
 
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
       renderWithProviders(<ProtectedRoute />);
 
-      expect(console.warn).toHaveBeenCalledWith(
-        '[ProtectedRoute] Session restoration failed, redirecting to login',
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[WARN] [ProtectedRoute] Session restoration failed, redirecting to login'),
         expect.objectContaining({
           error: 'Session restoration failed',
           timedOut: false,
@@ -408,11 +433,13 @@ describe('ProtectedRoute Component', () => {
         isLoading: false,
       });
 
+      const consoleDebugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
+
       renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(console.debug).toHaveBeenCalledWith(
-        '[ProtectedRoute] Events available but none selected - allowing render so selector is visible'
+      expect(consoleDebugSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
       );
     });
 

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -76,6 +76,7 @@ import { useEvents } from '../../hooks/useEvents';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { SessionRestorationLoader } from '../SessionRestorationLoader';
 import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
+import { logger } from '../../utils/core/logger';
 
 export interface ProtectedRouteProps {
   /**
@@ -175,7 +176,7 @@ export function ProtectedRoute({
   // Redirect to login if not authenticated
   if (!isAuthenticated) {
     if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
-      console.warn('[ProtectedRoute] Session restoration failed, redirecting to login', {
+      logger.warn('ProtectedRoute', 'Session restoration failed, redirecting to login', {
         timedOut: sessionRestoration.hasTimedOut,
         error: sessionRestoration.restorationError?.message
       });
@@ -217,7 +218,7 @@ export function ProtectedRoute({
   // The event selector will be visible and user can select, or auto-selection will kick in
   if (!selectedEvent) {
     // Log for debugging - this is expected behavior, not an error
-    console.debug('[ProtectedRoute] Events available but none selected - allowing render so selector is visible');
+    logger.debug('ProtectedRoute', 'Events available but none selected - allowing render so selector is visible');
     return <Outlet />;
   }
 

package/src/components/PublicLayout/PublicErrorBoundary.tsx

@@ -40,7 +40,7 @@
  */
 
 import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 export interface PublicErrorBoundaryProps {
   /** Child components to wrap */

package/src/components/PublicLayout/PublicLoadingSpinner.tsx

@@ -37,7 +37,7 @@
  */
 
 import React from 'react';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 export interface PublicLoadingSpinnerProps {
   /** Loading message to display */