debug: add comprehensive logging for image preview issue

Added detailed logging at every step of the image conversion and preview:

ImageMagick Service:
- Log input and output sizes
- Log applied quality settings
- Verify result is not empty before creating blob
- Log created blob size and MIME type
- Fail early if conversion produces empty result

Preview Component:
- Log blob details (size, type, URL)
- Add onError handler to img tag with detailed error info
- Add onLoad handler to confirm successful loading
- Console logs will help identify:
  - Is the blob empty?
  - Is the MIME type correct?
  - Is the object URL valid?
  - What error occurs when loading?

TypeScript Fix:
- Changed result type to `Uint8Array | undefined`
- Allows proper checking before blob creation

This will help diagnose why the preview image appears broken
despite successful conversion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

lib/converters/imagemagickService.ts

@@ -36,7 +36,7 @@ export async function convertWithImageMagick(
     if (onProgress) onProgress(50);
 
     // Convert image using ImageMagick
-    let result: Uint8Array;
+    let result: Uint8Array | undefined;
 
     await ImageMagick.read(inputData, (image) => {
       // Apply quality setting if specified
@@ -73,8 +73,26 @@ export async function convertWithImageMagick(
       if (onProgress) onProgress(90);
     });
 
+    // Verify we have a result
+    if (!result || result.length === 0) {
+      throw new Error('ImageMagick conversion produced empty result');
+    }
+
+    console.log('[ImageMagick] Conversion complete:', {
+      inputSize: inputData.length,
+      outputSize: result.length,
+      format: outputFormat,
+      quality: options.imageQuality,
+    });
+
     // Create blob from result
-    const blob = new Blob([result! as BlobPart], { type: getMimeType(outputFormat) });
+    const mimeType = getMimeType(outputFormat);
+    const blob = new Blob([result as BlobPart], { type: mimeType });
+
+    console.log('[ImageMagick] Created blob:', {
+      size: blob.size,
+      type: blob.type,
+    });
 
     if (onProgress) onProgress(100);