debug: add comprehensive logging for image adjustment flow

Added detailed console logging across entire image adjustment pipeline:

1. ImageAdjustmentModal.handleConfirm():
   - Original image dimensions
   - User inputs (rotation, zoom, pan, crop)
   - Canvas processing steps
   - Final blob size

2. AIOnboarding.handleImageAdjustmentConfirm():
   - Adjustments received from modal
   - Item being updated
   - extractedImageBlob status before/after

3. useAIExtraction.confirmSingleItem():
   - newItem being built
   - extractedImageBlob attached
   - imageProcessing attached

This will help identify where values are lost or incorrect in the flow.

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

frontend/components/AIOnboarding.tsx

@@ -67,6 +67,12 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
 
     const { index } = pendingItemData;
 
+    console.log('=== AIONBOARDING ADJUSTMENT CONFIRM ===');
+    console.log('[Input] Adjustments from modal:', adjustments);
+    console.log('[Input] Current item index:', index);
+    console.log('[Input] Current extractedItems[index]:', extractedItems[index]);
+    console.log('[Current] extractedImageBlob before:', extractedImageBlob?.size || 'null', 'bytes');
+
     if (adjustments && extractedItems[index]) {
       const updatedItems = [...extractedItems];
       updatedItems[index] = {
@@ -83,17 +89,22 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           user_adjusted: true
         }
       };
+      console.log('[Update] Updated item_processing:', updatedItems[index].image_processing);
       setExtractedItems(updatedItems);
 
       // If modal processed and returned image blob, update the hook's state
       // so confirmSingleItem uses the processed blob instead of original
       if (adjustments.imageBlob) {
+        console.log('[Update] Setting extractedImageBlob to processed blob:', adjustments.imageBlob.size, 'bytes');
         setExtractedImageBlob(adjustments.imageBlob);
       }
     }
 
     // Always call confirm, even without adjustments
+    console.log('[Action] Calling hookConfirmSingleItem with index:', index);
     hookConfirmSingleItem(index);
+    console.log('=== END CONFIRM DEBUG ===');
+
     setShowImageAdjustment(false);
     setAdjustingItemIndex(null);
     setPendingItemData(null);

frontend/components/ImageAdjustmentModal.tsx

@@ -120,17 +120,33 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
 
   const handleConfirm = async () => {
     if (!useImage || !cropBounds || !imageRef.current) {
+      console.log('[Modal] User clicked confirm - no image/crop/useImage flag');
       onConfirm(null);
       return;
     }
 
+    console.log('=== IMAGE ADJUSTMENT MODAL DEBUG ===');
+    console.log('[Original] Image dimensions:', imageDimensions);
+    console.log('[Original] Image URL:', imageRef.current?.src?.substring(0, 50) + '...');
+    console.log('[User] Rotation:', rotation, '°');
+    console.log('[User] Zoom level:', zoom);
+    console.log('[User] Pan X/Y:', panX, '/', panY);
+    console.log('[User] Crop bounds:', cropBounds);
+    console.log('[User] Use image flag:', useImage);
+
     // Process image: apply rotation and crop
     const processCanvas = document.createElement('canvas');
     const ctx = processCanvas.getContext('2d');
-    if (!ctx) return;
+    if (!ctx) {
+      console.log('[ERROR] Could not get canvas context');
+      return;
+    }
 
     const { x, y, width, height } = cropBounds;
 
+    console.log('[Processing] Canvas dimensions will be:', width, 'x', height);
+    console.log('[Processing] Crop region from original:', { x, y, width, height });
+
     // Set canvas to crop dimensions
     processCanvas.width = width;
     processCanvas.height = height;
@@ -140,14 +156,22 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
     ctx.translate(width / 2, height / 2);
     ctx.rotate((rotation * Math.PI) / 180);
     ctx.translate(-imageDimensions.width / 2 + x, -imageDimensions.height / 2 + y);
+
+    console.log('[Processing] Drawing image to canvas with transforms applied');
     ctx.drawImage(imageRef.current, 0, 0);
     ctx.restore();
 
+    console.log('[Processing] Canvas draw complete');
+
     // Convert to blob
     processCanvas.toBlob((blob) => {
       if (blob) {
+        console.log('[Result] Processed image blob size:', blob.size, 'bytes');
+        console.log('[Result] Blob type:', blob.type);
+        console.log('=== END DEBUG ===');
         onConfirm({ rotation, cropBounds, imageBlob: blob });
       } else {
+        console.log('[ERROR] Failed to convert canvas to blob');
         onConfirm({ rotation, cropBounds });
       }
     }, 'image/jpeg', 0.95);

frontend/hooks/useAIExtraction.ts

@@ -135,6 +135,13 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
     const data = extractedItems[index];
     const skipPhoto = data._skipPhoto === true; // User explicitly rejected the photo
 
+    console.log('=== CONFIRM SINGLE ITEM (Hook) ===');
+    console.log('[Input] Item index:', index);
+    console.log('[Input] Item data:', data);
+    console.log('[Input] Skip photo flag:', skipPhoto);
+    console.log('[Input] extractedImageBlob size:', extractedImageBlob?.size || 'null', 'bytes');
+    console.log('[Input] image_processing from data:', data.image_processing);
+
     const newItem = {
       name: String(data.Item || data.name || "New AI Item"),
       category: String(data.Category || data.category || "Uncategorized"),
@@ -158,6 +165,11 @@ export function useAIExtraction(inventory: Item[], onComplete: (itemData: any) =
       })
     };
 
+    console.log('[Output] newItem being sent to onComplete:', newItem);
+    console.log('[Output] extractedImageBlob attached:', !!newItem.extractedImageBlob);
+    console.log('[Output] imageProcessing attached:', !!newItem.imageProcessing);
+    console.log('=== END HOOK DEBUG ===');
+
     onComplete(newItem);
 
     if (extractedItems.length > 1) {