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>
Changed homepage badge from 'Powered by Meilisearch' to 'Powered by Navisearch'
to reflect custom branding for the NaviDocs search engine.
🤖 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>
- Added explicit z-index stacking order:
- Text layer: z-index 2 (top, for selectable text)
- Image overlays: z-index 1 (below text layer)
- Image overlays on hover: z-index 20 (brings to front)
- Enhanced text layer CSS with cross-browser support:
- Added -webkit-user-select, -moz-user-select, -ms-user-select
- Added pointer-events: auto to text layer spans
- Ensures text is selectable on all browsers
- Fixed image overlay z-index from 10 to 1
- Prevents blocking text selection
- Images still clickable, but text layer takes precedence
- Added user-select: auto to body and #app in main.css
- Ensures text selection is enabled globally
This fixes the issue where text was not selectable in the PDF viewer,
especially for digitized/text-based PDFs. The PDF.js text layer now
properly overlays the canvas and allows text selection while keeping
image overlays interactive.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created useToast composable with success/error/warning/info methods
- Added ToastContainer component with animations and colors
- Integrated toast notifications throughout the app:
* Upload success/failure feedback
* OCR completion/failure notifications
* Replaced alert() with toast messages
- Fixed HTML validation warning (div inside p tag)
- Added automatic toast notifications on job status changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed incorrect router navigation causing "No match found" error when
clicking on documents from the home page.
Issue:
- HomeView was navigating to /documents/{id} (plural)
- Router configured as /document/:id (singular)
- Result: Vue Router warning and blank page
Fix:
- Updated both document click handlers in HomeView.vue
- Changed @click routes from /documents/ to /document/
- Lines 230 and 256
Testing:
Clicking documents from home page now correctly navigates to DocumentView
at http://172.29.75.55:8083🤖 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>
This commit implements comprehensive image extraction display for PDF documents:
1. Created useDocumentImages.js composable:
- fetchPageImages() function to retrieve images for specific page
- getImageUrl() helper to generate full image URLs
- Proper loading states and error handling
2. Created ImageOverlay.vue component:
- Positioned absolutely over PDF canvas at correct coordinates
- Semi-transparent border to indicate image location
- Hover tooltip displaying extracted OCR text with confidence level
- Click handler to open full-size image modal
- Accessibility support (keyboard navigation, ARIA labels)
- Responsive positioning with smooth hover effects
3. Modified DocumentView.vue:
- Imported and integrated useDocumentImages composable
- Added ImageOverlay components for each extracted image
- Integrated FigureZoom modal for full-size image viewing
- Automatically fetches images when page changes
- Displays image count in header
- Tracks canvas dimensions for proper image positioning
Features:
- Images overlay at exact PDF coordinates using scale conversion
- OCR text displayed in tooltip on hover
- Full-size image view on click with zoom/pan controls
- Reduced motion and high contrast mode support
- Seamless integration with existing PDF viewer
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>
