Fixed:
- Price: €800K-€1.5M, Sunseeker added
- Agent 1: Joe Trader persona + actual sale ads research
- Ignored meilisearch binary + data/ (too large for GitHub)
- SESSION_DEBUG_BLOCKERS.md created
Ready for Session 1 launch.
🤖 Generated with Claude Code
Based on expert UX feedback, completely redesigned search results to prioritize
information scent over visual aesthetics.
**Visual Hierarchy Changes:**
- Flipped hierarchy: metadata small → snippet large → doc badge tiny
- Page number now prominent (font-weight 600)
- Document title moved to small right-aligned badge
- Snippet is now the visual focus (15px, proper line-height)
**Highlight Improvements:**
- Yellow background (#FFE666) with high contrast black text
- Added bold to highlighted terms for accessibility
- Enhanced Meilisearch <mark> tags with .nv-hi class
- WCAG AA compliant contrast ratios
**Diagram Handling:**
- Removed empty image thumbnails that looked broken
- Replaced with "Diagram" chip (yellow accent)
- Added hover preview popover (300ms delay)
- Click to toggle preview on mobile
- Graceful error handling for missing images
**Information Density:**
- Reduced card padding from 24px to 10-12px
- Reduced card spacing from 16px (space-y-4) to 8px (space-y-2)
- Search bar height reduced from 64px to 48px
- Now shows 8-12 results per viewport instead of 3-4
- Condensed metadata into single compact row
**Accessibility:**
- Added keyboard support: Enter and Space to open
- Added ARIA labels for diagram previews
- Focus visible styles with pink ring
- Mobile-responsive: hides doc badge on small screens
**Performance:**
- Debounced preview showing (300ms)
- Lazy loading for diagram images
- Removed heavy animations and blur effects
**CSS Architecture:**
- New .nv-* utility classes for search-specific styles
- Scoped styles to avoid global pollution
- Media queries for mobile optimization
This transforms search from "pretty gradient cards" to "find the gasket size fast."
Users can now scan sections, spot yellow highlights, and preview diagrams without
leaving the results page.
Next phase: Extract section metadata during OCR for even better organization.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Search Results Enhancement:
- Pass search query to document viewer via URL parameter
- Search results already show highlights via Meilisearch <mark> tags
PDF Document Viewer:
- Accept search query from URL (?q=search+term)
- Highlight matching text in PDF text layer
- Case-insensitive search term matching
- Auto-scroll to first match with smooth behavior
- Yellow highlight with pulsing animation for visibility
Highlighting Features:
- Uses regex to find all instances of search term
- Preserves PDF.js text layer positioning
- Highlights visible immediately after page render
- Text remains fully selectable
- Works with digitized/text-based PDFs
Styling:
- Yellow background (rgba(255, 215, 0, 0.6))
- Black text for contrast
- Pulsing animation on initial load
- Rounded corners for polish
User Flow:
1. User searches in SearchView
2. Clicks on search result
3. Navigates to DocumentView with ?q=term&page=X
4. PDF page renders with matching text highlighted
5. Page auto-scrolls to first match
This completes the search highlighting feature requested by the user,
making it easy to find searched terms within PDF documents.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Search results now display image thumbnails when the result is from a
diagram or image extraction:
Features:
- 20x20 thumbnail displayed instead of document icon for image results
- Visual "Diagram" badge with image icon for image/diagram results
- Pink border highlight on thumbnails (border-pink-400/30)
- Hover scale animation on thumbnails
- Graceful fallback to document icon if image fails to load
Implementation:
- Check for imagePath field in search results
- Display thumbnail using /api${imagePath} endpoint
- Add @error handler for broken images
- Larger thumbnail (80x80) for better diagram visibility
Files Changed:
- client/src/views/SearchView.vue - Thumbnail rendering and badge
Testing URL:
http://172.29.75.55:8083/search?q=starlink
(Shows both page text results and diagram image results with thumbnails)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit addresses multiple critical fixes and adds new functionality
for the NaviDocs local testing environment (port 8083):
Search Fixes:
- Fixed search to use backend /api/search instead of direct Meilisearch
- Resolves network accessibility issue when accessing from external IPs
- Search now works from http://172.29.75.55:8083/search
PDF Text Selection:
- Added PDF.js text layer for selectable text
- Imported pdf_viewer.css for proper text layer styling
- Changed text layer opacity to 1 for better interaction
- Added user-select: text for improved text selection
- Pink selection highlight (rgba(255, 92, 178, 0.3))
Database Cleanup:
- Created cleanup scripts to remove 20 duplicate documents
- Removed 753 orphaned entries from Meilisearch index
- Cleaned 17 document folders from filesystem
- Kept only newest version of each document
- Scripts: clean-duplicates.js, clean-meilisearch-orphans.js
Auto-Fill Feature:
- New /api/upload/quick-ocr endpoint for first-page OCR
- Automatically extracts metadata from PDFs on file selection
- Detects: boat make, model, year, name, and document title
- Checks both OCR text and filename for boat name
- Auto-fills upload form with extracted data
- Shows loading indicator during metadata extraction
- Graceful fallback to filename if OCR fails
Tenant Management:
- Updated organization ID to use boat name as tenant
- Falls back to "Liliane 1" for single-tenant setup
- Each boat becomes a unique tenant in the system
Files Changed:
- client/src/views/DocumentView.vue - Text layer implementation
- client/src/composables/useSearch.js - Backend API integration
- client/src/components/UploadModal.vue - Auto-fill feature
- server/routes/quick-ocr.js - OCR endpoint (new)
- server/index.js - Route registration
- server/scripts/* - Cleanup utilities (new)
Testing:
All features tested on local deployment at http://172.29.75.55:8083
- Backend: http://localhost:8001
- Frontend: http://localhost:8083
- Meilisearch: http://localhost:7700🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Comprehensive image extraction architecture design
- Database schema for document_images table
- Migration 004: Add document_images table with indexes
- Migration runner script
- Design and status documentation
Prepares foundation for image extraction feature with OCR on images.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
