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>
Critical fix: modal processes image and returns blob, but AIOnboarding
was not actually using that blob. Now properly calls setExtractedImageBlob()
so confirmSingleItem sends the processed image to backend.
Before: Backend received original image, applied original AI crop/rotation
After: Backend receives processed image (already cropped/rotated by user)
Now the saved image matches exactly what user sees after adjusting.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Critical fixes:
1. Modal now applies rotation and crop to image, returns processed blob
2. Frontend sends processed image to backend (not original)
3. Zoom slider min/max now calculated based on image size
4. Initial zoom shows entire image in canvas
5. Zoom constraints prevent over-zooming or under-zooming
User experience improved:
- Sees full item at start (auto-fit zoom)
- Can adjust rotation/crop smoothly
- Adjusted image is what gets saved (not original)
- Zoom slider works correctly for any image size
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Fixes issue where image was too small to see full item in modal canvas.
Changes:
- Calculate initial zoom to fit entire image in 800x600 canvas
- Don't zoom in (only zoom out to fit), preserving image clarity
- Reset button also resets to fit zoom instead of always 1.0
This ensures users can see the full item from the start and understand
what they're adjusting.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Fixed two critical issues:
1. Adjustments now properly override image_processing values
2. State updates explicitly ensure extractedItems are modified before confirm
Changes:
- handleImageAdjustmentConfirm now updates extractedItems state
- Adjustments properly stored in image_processing (rotation_degrees, crop_bounds)
- user_adjusted flag added to mark user-modified values
- Backend will use adjusted values instead of AI detection
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Added user-controlled image adjustment modal that displays after item
confirmation, allowing users to adjust rotation/crop before final save.
Changes:
- AIOnboarding: wrapper confirmSingleItem to show modal post-selection
- State: showImageAdjustment, adjustingItemIndex, pendingItemData
- Handlers: confirm/cancel for applying or discarding adjustments
- Flow: item save → modal display → adjustments applied → DB commit
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Shows original image after item save
- Rotation slider + gesture rotation
- Zoom control (scroll/pinch)
- Pan support (drag on desktop/mobile)
- Preset aspect ratios for crop
- Touch support for mobile (pinch zoom, drag pan)
- Checkbox to confirm/reject image use (default ON)
- Compresses image if adjusted before saving
- Shows which edge is Top, Bottom, Left, Right on crop rectangle
- Removes ambiguity about crop box orientation
- Green labels on all four edges for clear visual reference
- Add drag-to-move functionality for entire crop box
- Add resize handles at corners (drag to resize)
- Show adjusted bounds separately from AI bounds in log
- Add Reset button to revert to original crop bounds
- Allows visual verification of AI crop detection accuracy
- Add TOP/BTM labels to rotated box showing which edge is which after rotation
- Allows user to visually see rotation direction without calculating degrees
- Fix allowedDevOrigins to include common private IP ranges (192.168.*, 10.*, 172.16.*)
- Resolves CORS warning when accessing from local network IPs
- Display UP/DOWN/LEFT/RIGHT labels at canvas edges
- Shows which direction is which in the original image
- Helps verify rotation correctness visually
- Removed black overlay that was hiding the image
- Draw crop box directly on full-brightness image with drop shadow
- Item under crop area now fully visible
- Improved visibility of both crop bounds (green) and rotation (orange)
- Clear logs between rotation updates (no more expanding text)
- Increase canvas size from 600x450 to 900x600 for better visibility
- Reorganize layout: left controls, right canvas + single-line log
- Make crop box much larger and easier to see
- Save original image before crop/rotation with '_debug_original' variant
- Store original_photo_path in labels_data.image_processing for debug access
- Update DebugRotationPanel to display original image instead of processed
- Update ItemDetailModal to pass original image path to debug panel
- Enables accurate crop/rotation visualization with true original image
Layout changes:
- Reduced padding and margins throughout
- Changed from 3-column to 2-column layout
- Canvas + logs on right side (side-by-side)
- Smaller fonts and spacing
- Sticky header that stays in view
- Max-height with scrolling for modal
- Removed footer text to save space
- More efficient use of screen real estate
Now fits on most screen sizes even with large rotation angles.
Much better UX for identifying correct rotation:
- Shows ORIGINAL image scaled to fit the modal
- Draws GREEN bounding box showing the crop area
- Draws ORANGE rotated rectangle showing rotation effect
- Darkens everything outside the crop area (visual focus)
- Rotation slider updates the overlay in real-time
- Quick preset buttons for common angles
- Detailed debug logs showing all calculations
- Better styling: dark theme for readability
User can now visually see what will be extracted with the current
rotation angle. Report the angle that makes the label readable.
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
- Update photo save checkbox to match app design (border-slate-600, htmlFor label)
- Remove success popup overlay - modal closes immediately after save
- Simplify confirmSingleItem to remove setTimeout logic
- Toast notification used for user feedback instead
- Add savingIndex state to track saving operation
- Display success overlay with saved image for 1.5 seconds
- Show item name in confirmation message
- Prevents modal from closing immediately after save
Fixes user complaint about image disappearing too quickly without confirmation
- Add rotation_degrees parameter to ImageProcessor.process_photo()
- Pass rotation through _auto_save_photo_from_extraction() to processor
- Allow no-crop fallback when crop_bounds is None
- Add buildPhotoUrl() helper to resolve backend URLs correctly
- Update frontend components to use backend URL for image sources
- Replace Use/Skip Photo buttons with checkbox in AI extraction UI
- Add images/ to .gitignore to prevent accidental commits
Addresses: rotation never applied, image 404s (relative to Next.js not backend), preview blank in edit form
Users now see the extracted photo during item editing and can choose to:
- 'Use Photo': Auto-save the image with the item
- 'Skip Photo': Create item without saving the photo
Changes:
1. frontend/components/AIOnboarding.tsx: Added image preview panel in edit form
- Shows extracted image to user
- Buttons to accept/reject photo
- Visual feedback when photo is skipped
2. frontend/hooks/useAIExtraction.ts: Updated confirmSingleItem and confirmAllItems
- Respect user's photo decision (_skipPhoto flag)
- Only pass extractedImageBlob if user approved it
- Prevents unwanted auto-photo-save
This gives users full control over which extracted photos are auto-saved.
The extracted image blob from AI extraction was not being sent to the backend
because Blob objects cannot be JSON serialized. Fixed by:
1. Converting Blob to base64 before sending to API
2. Renaming fields: extractedImageBlob → extracted_image_bytes, imageProcessing → image_processing
3. Removing Blob from local DB (keep original data structure for IndexedDB)
4. Applying same fix to both single item and batch update flows
This ensures the auto-photo-save feature receives the image data it needs.
toast.warning is not a valid method in react-hot-toast API. Changed to
toast.success since the item was successfully created even if photo upload failed.
The backend returns photo_path, photo_thumbnail_path, and photo_upload_date
from the AI auto-save feature, but the frontend Item interface was missing
these fields, causing images not to display in ItemDetailModal and InventoryTable.
Updated:
- frontend/lib/db.ts: Added missing photo fields to Item interface
- frontend/components/ItemDetailModal.tsx: Use photo_path first, fallback to image_url
- frontend/components/InventoryTable.tsx: Use photo_path first, fallback to image_url
This ensures the UI can now display photos saved by the auto-photo-save feature.
- Updated confirmSingleItem() to include extractedImageBlob and imageProcessing
- Updated confirmAllItems() to pass image data for bulk item creation
- Each extracted item now carries its own image_processing metadata
- All items in bulk creation share the same extracted image blob
- Added 12 comprehensive tests verifying data is passed correctly
- All 465 frontend tests passing, zero regressions
The username input was conditionally hidden when it had a value, causing
the field to disappear and focus to jump to password when typing. Fixed by:
1. Always rendering the username input (removed conditional)
2. Using controlled input with value prop
3. Only auto-focus password when username is already entered
This fixes the focus-jumping bug that made it impossible to enter usernames.
When accessing from VPN/Tailscale (e.g., 100.78.182.28), frontend was trying
to reach backend on that same IP, but backend listens on SERVER_IP instead.
Now uses SERVER_IP from network.json config, ensuring remote clients connect
to the correct server address regardless of their access network.
- Next.js allowedDevOrigins now loaded from ALLOWED_DEV_ORIGINS env var
- start_server.sh generates ALLOWED_DEV_ORIGINS from EXTRA_ALLOWED_ORIGINS
- Subnet notation (10.0.0.0/24) auto-converts to wildcard patterns (10.0.0.*)
- Individual IPs convert to subnet patterns (192.168.1.100 -> 192.168.1.*)
- Zero hardcoded IPs in source code - all from inventory.env
- Simplify backend CORS middleware to use standard FastAPI implementation
- Keep subnet validation function for future use in route-level checks
- Add Tailscale subnet pattern to Next.js allowedDevOrigins config
- Both individual IPs and subnet configurations now work correctly
- Add ipaddress module for subnet parsing (10.0.0.0/24 format)
- Implement subnet validation in CORS middleware
- Separate individual IPs from subnet definitions in EXTRA_ALLOWED_ORIGINS
- Custom SubnetAwareCORSMiddleware for dynamic origin validation
- Support both exact IP matches and subnet ranges
- Backward compatible with existing ALLOWED_ORIGINS list
- Add ItemDetailModal component for viewing item details and replacing photos
- Add photo replacement/deletion endpoints to API layer (PUT/DELETE /items/{id}/photo)
- Update InventoryTable to open detail modal on item click
- Show current photo thumbnail with Replace/Delete buttons
- Support uploading new photo with ItemPhotoUpload component
- Delete old photo on backend when replacing (no orphaned files)
- Full test coverage: 18 tests for ItemDetailModal component
- All 393 tests passing, zero TypeScript errors
- Build verified successfully
- Create frontend/app/items/create.tsx with multi-step item creation workflow (Details → Photo Upload → Preview → Confirm)
- Create frontend/hooks/useItemCreate.ts custom hook managing form state, step navigation, and photo upload
- Add integration tests for item creation workflow with photo upload support
- Photo upload step supports manual crop UI with crop bounds submission
- ManualCropUI visible by default with toggle to use full photo
- Photo uploaded before item confirmation, ensuring photo is attached
- Works with mobile camera capture via ItemPhotoUpload component
- All 374 tests passing
Fixed 3 critical code quality issues:
1. Act() warnings in tests (9 tests):
- Wrapped all async state updates in act() blocks in usePhotoUpload.test.ts
- Tests using waitFor() now properly await state updates within act()
- All 21 tests pass with zero act() warnings
2. Missing toast cleanup on unmount:
- Added toastIdRef to track pending toast IDs
- Added cleanup useEffect that dismisses toasts on component unmount
- Prevents memory leaks and orphaned toast notifications
3. Dual error reporting channels (lines 23-28):
- Removed useEffect that synced hook error to local state AND called onError callback
- Now syncs hook error to local state only (for display)
- Parent components rely on hook error state, reducing dual-path confusion
- Toast error calls are explicit in catch block
Test Results:
- Frontend: 312/312 tests passing (includes 21 photo upload tests)
- Act() warnings: Eliminated
- No regressions introduced
