feat: standardize logging across UI components

- Replaced console.log and console.error statements with logger methods from @automaker/utils in various UI components, ensuring consistent log formatting and improved readability.
- Enhanced error handling by utilizing logger methods to provide clearer context for issues encountered during operations.
- Updated multiple views and hooks to integrate the new logging system, improving maintainability and debugging capabilities.

This update significantly enhances the observability of UI components, facilitating easier troubleshooting and monitoring.

apps/ui/src/components/dialogs/board-background-modal.tsx

@@ -1,5 +1,8 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import { ImageIcon, Upload, Loader2, Trash2 } from 'lucide-react';
+
+const logger = createLogger('BoardBackgroundModal');
 import {
   Sheet,
   SheetContent,
@@ -113,7 +116,7 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
           setPreviewImage(null);
         }
       } catch (error) {
-        console.error('Failed to process image:', error);
+        logger.error('Failed to process image:', error);
         toast.error('Failed to process image');
         setPreviewImage(null);
       } finally {
@@ -185,7 +188,7 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
         toast.error(result.error || 'Failed to clear background image');
       }
     } catch (error) {
-      console.error('Failed to clear background:', error);
+      logger.error('Failed to clear background:', error);
       toast.error('Failed to clear background');
     } finally {
       setIsProcessing(false);

apps/ui/src/components/dialogs/new-project-modal.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import {
   Dialog,
   DialogContent,
@@ -29,6 +30,8 @@ import { cn } from '@/lib/utils';
 import { useFileBrowser } from '@/contexts/file-browser-context';
 import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
 
+const logger = createLogger('NewProjectModal');
+
 interface ValidationErrors {
   projectName?: boolean;
   workspaceDir?: boolean;
@@ -78,7 +81,7 @@ export function NewProjectModal({
           }
         })
         .catch((error) => {
-          console.error('Failed to get default workspace directory:', error);
+          logger.error('Failed to get default workspace directory:', error);
         })
         .finally(() => {
           setIsLoadingWorkspace(false);

apps/ui/src/components/dialogs/sandbox-rejection-screen.tsx

@@ -6,7 +6,10 @@
  */
 
 import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import { ShieldX, RefreshCw, Container, Copy, Check } from 'lucide-react';
+
+const logger = createLogger('SandboxRejectionScreen');
 import { Button } from '@/components/ui/button';
 
 const DOCKER_COMMAND = 'npm run dev:docker';
@@ -26,7 +29,7 @@ export function SandboxRejectionScreen() {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy:', err);
+      logger.error('Failed to copy:', err);
     }
   };
 

apps/ui/src/components/dialogs/sandbox-risk-dialog.tsx

@@ -6,7 +6,10 @@
  */
 
 import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import { ShieldAlert, Copy, Check } from 'lucide-react';
+
+const logger = createLogger('SandboxRiskDialog');
 import {
   Dialog,
   DialogContent,
@@ -43,7 +46,7 @@ export function SandboxRiskDialog({ open, onConfirm, onDeny }: SandboxRiskDialog
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy:', err);
+      logger.error('Failed to copy:', err);
     }
   };