refactor(web): replace console statements with logger and fix lint issues

- Remove unused Alert import from RepositoryAlgorithmsPanel
- Replace console.log/warn with proper logger in use-field-fetch and useCameraPersistence
- Fix ref naming conventions (add Ref suffix) in NetworkProvider and PerformanceDashboard

Author: Mearman

apps/web/src/components/algorithms/RepositoryAlgorithmsPanel.tsx

@@ -7,7 +7,6 @@
 
 import {
   Accordion,
-  Alert,
   Badge,
   Box,
   Button,

apps/web/src/components/ui/NetworkProvider.tsx

@@ -167,10 +167,10 @@ export const NetworkProvider = ({
   const [showOfflineModal, setShowOfflineModal] = useState<boolean>(false);
 
   // Refs for performance tracking
-  const responseTimes = useRef<number[]>([]);
-  const totalRequests = useRef<number>(0);
-  const successfulRequests = useRef<number>(0);
-  const retryTimeouts = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const responseTimesRef = useRef<number[]>([]);
+  const totalRequestsRef = useRef<number>(0);
+  const successfulRequestsRef = useRef<number>(0);
+  const retryTimeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
 
   // Network monitoring
   const checkNetworkStatus = useCallback(async () => {
@@ -185,12 +185,12 @@ export const NetworkProvider = ({
       const responseTime = endTime - startTime;
 
       if (response.ok) {
-        responseTimes.current.push(responseTime);
-        if (responseTimes.current.length > 10) {
-          responseTimes.current = responseTimes.current.slice(-10);
+        responseTimesRef.current.push(responseTime);
+        if (responseTimesRef.current.length > 10) {
+          responseTimesRef.current = responseTimesRef.current.slice(-10);
         }
 
-        const avgTime = responseTimes.current.reduce((a, b) => a + b, 0) / responseTimes.current.length;
+        const avgTime = responseTimesRef.current.reduce((a, b) => a + b, 0) / responseTimesRef.current.length;
         setAverageResponseTime(avgTime);
 
         // Update status based on connection speed
@@ -224,16 +224,16 @@ export const NetworkProvider = ({
       setQueue(prev => prev.slice(1));
 
       // Clear retry timeout
-      const timeout = retryTimeouts.current.get(request.id);
+      const timeout = retryTimeoutsRef.current.get(request.id);
       if (timeout) {
         clearTimeout(timeout);
-        retryTimeouts.current.delete(request.id);
+        retryTimeoutsRef.current.delete(request.id);
       }
 
       // Update stats
       setConsecutiveFailures(0);
       setLastSuccessfulRequest(Date.now());
-      successfulRequests.current++;
+      successfulRequestsRef.current++;
 
       // Resolve request
       request.resolve(response);
@@ -249,7 +249,7 @@ export const NetworkProvider = ({
           processQueue();
         }, delay);
 
-        retryTimeouts.current.set(request.id, timeout);
+        retryTimeoutsRef.current.set(request.id, timeout);
 
         // Move to end of queue
         setQueue(prev => [...prev.slice(1), request]);
@@ -258,10 +258,10 @@ export const NetworkProvider = ({
         setQueue(prev => prev.slice(1));
         setFailedRequests(prev => prev + 1);
 
-        const timeout = retryTimeouts.current.get(request.id);
+        const timeout = retryTimeoutsRef.current.get(request.id);
         if (timeout) {
           clearTimeout(timeout);
-          retryTimeouts.current.delete(request.id);
+          retryTimeoutsRef.current.delete(request.id);
         }
 
         request.reject(error as Error);
@@ -303,14 +303,14 @@ export const NetworkProvider = ({
   // Clear all queued requests
   const clearQueue = useCallback(() => {
     queue.forEach(request => {
-      const timeout = retryTimeouts.current.get(request.id);
+      const timeout = retryTimeoutsRef.current.get(request.id);
       if (timeout) {
         clearTimeout(timeout);
       }
       request.reject(new Error('Queue cleared'));
     });
 
-    retryTimeouts.current.clear();
+    retryTimeoutsRef.current.clear();
     setQueue([]);
   }, [queue]);
 
@@ -329,8 +329,8 @@ export const NetworkProvider = ({
 
   // Get network statistics
   const getNetworkStats = useCallback(() => ({
-    totalRequests: totalRequests.current,
-    successfulRequests: successfulRequests.current,
+    totalRequests: totalRequestsRef.current,
+    successfulRequests: successfulRequestsRef.current,
     failedRequests: failedRequests,
     averageResponseTime
   }), [failedRequests, averageResponseTime]);

apps/web/src/components/ui/PerformanceDashboard.tsx

@@ -140,10 +140,10 @@ export const PerformanceDashboard = ({
   const [alerts, setAlerts] = useState<Array<{ level: AlertLevel; message: string }>>([]);
 
   // Refs for performance tracking
-  const frameCount = useRef(0);
-  const lastFrameTime = useRef(performance.now());
-  const fpsHistory = useRef<number[]>([]);
-  const animationFrameId = useRef<number | undefined>(undefined);
+  const frameCountRef = useRef(0);
+  const lastFrameTimeRef = useRef(performance.now());
+  const fpsHistoryRef = useRef<number[]>([]);
+  const animationFrameIdRef = useRef<number | undefined>(undefined);
 
   // Get performance level
   const getPerformanceLevel = useCallback((metric: number, thresholds: typeof PERFORMANCE_THRESHOLDS.fps | typeof PERFORMANCE_THRESHOLDS.frameTime): PerformanceLevel => {
@@ -190,19 +190,19 @@ export const PerformanceDashboard = ({
   // Performance monitoring loop
   const measurePerformance = useCallback(() => {
     const currentTime = performance.now();
-    const deltaTime = currentTime - lastFrameTime.current;
+    const deltaTime = currentTime - lastFrameTimeRef.current;
 
-    frameCount.current++;
-    fpsHistory.current.push(1000 / deltaTime);
+    frameCountRef.current++;
+    fpsHistoryRef.current.push(1000 / deltaTime);
 
-    if (fpsHistory.current.length > 60) {
-      fpsHistory.current = fpsHistory.current.slice(-60);
+    if (fpsHistoryRef.current.length > 60) {
+      fpsHistoryRef.current = fpsHistoryRef.current.slice(-60);
     }
 
     // Calculate FPS
     const currentFPS = Math.round(1000 / deltaTime);
     const averageFPS = Math.round(
-      fpsHistory.current.reduce((sum, fps) => sum + fps, 0) / fpsHistory.current.length
+      fpsHistoryRef.current.reduce((sum, fps) => sum + fps, 0) / fpsHistoryRef.current.length
     );
 
     // Get memory usage
@@ -213,7 +213,7 @@ export const PerformanceDashboard = ({
       currentFPS,
       averageFPS,
       frameTimeMs: Math.round(deltaTime),
-      droppedFrames: Math.max(0, frameCount.current - averageFPS),
+      droppedFrames: Math.max(0, frameCountRef.current - averageFPS),
       memoryUsedMB: memUsage.used,
       memoryLimitMB: memUsage.limit,
       memoryPressure: memUsage.pressure,
@@ -230,31 +230,31 @@ export const PerformanceDashboard = ({
     };
 
     setMetrics(newMetrics);
-    lastFrameTime.current = currentTime;
-    animationFrameId.current = requestAnimationFrame(measurePerformance);
+    lastFrameTimeRef.current = currentTime;
+    animationFrameIdRef.current = requestAnimationFrame(measurePerformance);
   }, [calculateMemoryUsage, maxHistoryPoints]);
 
   // Start/stop monitoring
   const toggleMonitoring = useCallback(() => {
     if (isMonitoring) {
-      if (animationFrameId.current) {
-        cancelAnimationFrame(animationFrameId.current);
+      if (animationFrameIdRef.current) {
+        cancelAnimationFrame(animationFrameIdRef.current);
       }
       setIsMonitoring(false);
     } else {
-      frameCount.current = 0;
-      fpsHistory.current = [];
-      lastFrameTime.current = performance.now();
-      animationFrameId.current = requestAnimationFrame(measurePerformance);
+      frameCountRef.current = 0;
+      fpsHistoryRef.current = [];
+      lastFrameTimeRef.current = performance.now();
+      animationFrameIdRef.current = requestAnimationFrame(measurePerformance);
       setIsMonitoring(true);
     }
   }, [isMonitoring, measurePerformance]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      if (animationFrameId.current) {
-        cancelAnimationFrame(animationFrameId.current);
+      if (animationFrameIdRef.current) {
+        cancelAnimationFrame(animationFrameIdRef.current);
       }
     };
   }, []);

apps/web/src/hooks/use-field-fetch.ts

@@ -26,7 +26,6 @@ export const useFieldFetch = ({
 
   const fetchField = useCallback(
     async (fieldName: string) => {
-      console.log('[useFieldFetch] fetchField called', { fieldName, entityId, entityType });
       setIsFetching(true);
       setError(null);
 
@@ -46,7 +45,6 @@ export const useFieldFetch = ({
           },
         });
 
-        console.log('[useFieldFetch] API call successful', { fieldName, result });
         logger.debug("api", "Successfully fetched field", {
           entityId,
           entityType,
@@ -55,14 +53,12 @@ export const useFieldFetch = ({
         });
 
         if (result && onSuccess) {
-          console.log('[useFieldFetch] Calling onSuccess callback', { result });
           onSuccess(result);
         }
 
         return result;
       } catch (err) {
         const error = err instanceof Error ? err : new Error("Failed to fetch field");
-        console.error('[useFieldFetch] API call failed', { fieldName, error });
         logger.error("api", "Failed to fetch field", {
           entityId,
           entityType,

apps/web/src/hooks/useCameraPersistence.ts

@@ -5,6 +5,7 @@
  * using localStorage for cross-session persistence.
  */
 
+import { logger } from "@bibgraph/utils";
 import { useCallback, useEffect, useRef,useState } from 'react';
 
 export interface CameraState {
@@ -139,7 +140,7 @@ export const useCameraPersistence = (options: UseCameraPersistenceOptions = {}):
         latestStateRef.current = parsed;
       }
     } catch (error) {
-      console.warn('Failed to load camera state:', error);
+      logger.warn("camera", "Failed to load camera state", { error });
     }
     setIsLoaded(true);
   }, [storageKey, enabled]);
@@ -151,7 +152,7 @@ export const useCameraPersistence = (options: UseCameraPersistenceOptions = {}):
     try {
       localStorage.setItem(storageKey, JSON.stringify(state));
     } catch (error) {
-      console.warn('Failed to save camera state:', error);
+      logger.warn("camera", "Failed to save camera state", { error });
     }
   }, [storageKey, enabled]);