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
Replace font-bold, font-black, and font-semibold with font-normal throughout:
- 26 component files
- 1 CSS utility file (globals.css)
- 291 total occurrences
Text hierarchy now maintained through font-size differences only.
All tests passing (291/291).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Increase base font sizes proportionally (not aggressively):
* text-xs: 12px → 13px
* text-sm: 14px → 15px
* text-base: 16px → 18px
* text-lg: 18px → 20px
* text-xl: 20px → 22px
* text-2xl: 24px → 26px
* text-3xl: 30px → 32px
- No responsive breakpoint classes (prevents oversizing)
- Improves readability on MacBook Pro 14" without making fonts too large
- Build verified: 6 routes, zero errors
- Changed AI endpoints from /admin/db/settings/ai to /admin/ai/settings
- Changed AI prompt endpoints from /admin/db/settings/prompt to /admin/ai/settings/prompt
- Changed AI keys endpoint from /admin/db/settings/ai-keys to /admin/ai/settings/keys
- Changed AI test endpoint from /admin/db/settings/test-ai-key to /admin/ai/settings/test-key
- DB endpoints remain unchanged under /admin/db/...
- Frontend tests: 291/291 passing
- Backend tests: 41/41 passing
