feat: add debug rotation panel for real-time testing

New DebugRotationPanel component allows testing different rotation angles
with live preview and detailed debug logs showing:
- Current rotation angle (slider + quick presets)
- Crop bounds and calculations
- Image dimensions at each step
- Final processed image preview
- Confidence score

Integrated into ItemDetailModal via wrench icon in header (only visible
when item has a photo). Helps identify correct rotation values for images
at any angle.

Debug panel shows:
- Original image info
- Crop bounds and resulting size
- Rotation angle and final canvas size
- Step-by-step processing logs
- Live canvas preview of result

frontend/components/ItemDetailModal.tsx

@@ -4,7 +4,8 @@ import React, { useState, useRef } from 'react';
 import { Item } from '@/lib/db';
 import { inventoryApi, buildPhotoUrl } from '@/lib/api';
 import ItemPhotoUpload from '@/components/ItemPhotoUpload';
-import { X, Camera, Trash2 } from 'lucide-react';
+import { DebugRotationPanel } from '@/components/DebugRotationPanel';
+import { X, Camera, Trash2, Wrench } from 'lucide-react';
 import { toast } from 'react-hot-toast';
 
 interface ItemDetailModalProps {
@@ -23,6 +24,7 @@ export default function ItemDetailModal({
   backendUrl = '',
 }: ItemDetailModalProps) {
   const [showPhotoUpload, setShowPhotoUpload] = useState(false);
+  const [showDebugPanel, setShowDebugPanel] = useState(false);
   const [currentPhoto, setCurrentPhoto] = useState<{ thumbnail_url: string; full_url: string } | null>(
     item.photo_path && item.photo_thumbnail_path
       ? { thumbnail_url: item.photo_thumbnail_path, full_url: item.photo_path }
@@ -71,13 +73,25 @@ export default function ItemDetailModal({
         {/* Header */}
         <div className="sticky top-0 bg-surface border-b border-slate-800/50 p-4 md:p-6 flex items-center justify-between">
           <h2 className="text-xl md:text-2xl font-normal text-white truncate">{item.name}</h2>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-white transition-colors"
-            aria-label="Close modal"
-          >
-            <X size={20} />
-          </button>
+          <div className="flex items-center gap-2">
+            {currentPhoto && (
+              <button
+                onClick={() => setShowDebugPanel(true)}
+                className="p-2 hover:bg-yellow-900/50 rounded-full text-yellow-400 hover:text-yellow-300 transition-colors"
+                title="Debug rotation & crop"
+                aria-label="Debug panel"
+              >
+                <Wrench size={20} />
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-white transition-colors"
+              aria-label="Close modal"
+            >
+              <X size={20} />
+            </button>
+          </div>
         </div>
 
         {/* Content */}
@@ -178,6 +192,17 @@ export default function ItemDetailModal({
           </div>
         </div>
       </div>
+
+      {/* Debug Rotation Panel */}
+      {showDebugPanel && currentPhoto && (
+        <DebugRotationPanel
+          item={item}
+          imageUrl={buildPhotoUrl(backendUrl, currentPhoto.full_url)}
+          originalCropBounds={item.labels_data ? JSON.parse(item.labels_data).image_processing?.crop_bounds : undefined}
+          originalRotation={item.labels_data ? JSON.parse(item.labels_data).image_processing?.rotation_degrees : undefined}
+          imageProcessing={item.labels_data ? JSON.parse(item.labels_data).image_processing : undefined}
+        />
+      )}
     </div>
   );
 }