Phase 9: Design Color System Enforcement
This commit creates mandatory design rules to prevent future hardcoded colors:
1. DESIGN_COLOR_RULES.md - MANDATORY REFERENCE FOR ALL FUTURE UI/UX WORK
- Establishes that NO arbitrary Tailwind colors are allowed
- Defines semantic color mapping (success, error, warning, info)
- Provides quick reference guide for color selection
- Includes enforcement rules for AI agents and developers
- Maps 20+ hardcoded colors to DESIGN.md equivalents
2. dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md - DETAILED IMPLEMENTATION GUIDE
- Comprehensive fix plan with line-by-line changes for 20 files
- 44+ color corrections identified and documented
- Step-by-step instructions for each file modification
- Includes before/after code snippets
- Implementation checklist for tracking progress
3. CLAUDE.md - UPDATED WITH MANDATORY COLOR RULES
- Added reference to DESIGN_COLOR_RULES.md as required reading
- Added critical color rule section at top
- Semantic color mapping quick reference for AI agents
- Linked related documentation
COLOR MAPPING ENFORCED:
- Success/Healthy: tertiary (#00e639)
- Error/Destructive: error (#ffb4ab)
- Warning/Caution: primary (#ffb781)
- Info/Secondary: secondary (#c8c6c5)
- Muted/Disabled: muted (#474746)
HARDCODED COLORS IDENTIFIED (44+ instances):
- Indigo (3 instances) → primary/secondary
- Green (12 instances) → tertiary
- Red/Rose (20 instances) → error
- Amber/Sky (9 instances) → primary/secondary
All future UI/UX work MUST follow DESIGN_COLOR_RULES.md.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Updated SESSION_STATE to reflect completion of design system audit and
implementation. CSS Tailwind conflicts resolved, all components updated,
frontend builds cleanly. Ready for visual testing phase.
- Created 5-PLAN-01-SUMMARY.md with full implementation report
- Updated SESSION_STATE.md with Session 38 completion details
- Phase 5 Plan 01 status: COMPLETED (5/5 tasks, all tests written)
- Ready for inventory page integration and Phase 5 Plan 02 execution
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>
- Document AI non-determinism finding (critical discovery)
- Record ImageAdjustmentModal completion
- Detail integration checklist for next session
- Explain new user-controlled image adjustment workflow
- All commits and features documented for continuity
Documented the complete image pipeline feature:
- v1.14.1: Type system fix (photo_path fields)
- v1.14.2: Serialization fix (Blob to base64)
- v1.14.3: User control (image confirmation buttons)
Users now have full control over whether extracted photos are auto-saved
through the 'Use Photo' / 'Skip Photo' buttons in the editing form.
Documented the complete image pipeline bugfix:
- Part 1 (v1.14.1): Type system mismatch for photo_path fields
- Part 2 (v1.14.2): Blob serialization issue - image not reaching backend
The extracted image blob is now converted to base64 before sending to the API,
ensuring it's JSON-safe and matches the backend's ItemCreate schema.
Documented the image display issue, root cause (type system mismatch),
and the fix applied in v1.14.1. Images now correctly display from
the auto-photo-save feature in both ItemDetailModal and InventoryTable.
