OpenClaw Bot
0092b318c2
- Add search result highlighting with match positions - Implement advanced filters (type, status, date range) - Add relevance scoring algorithm with recency/status boosts - Add search history with localStorage persistence - Create useSearch and useSearchHistory hooks - Add filter UI with popover component - Improve visual feedback and status icons Task: 56ae2be4-fcf1-403a-87fb-ea9de966f456
149 lines
4.3 KiB
Markdown
149 lines
4.3 KiB
Markdown
# Mission Control Search Enhancement
|
|
|
|
## Summary
|
|
|
|
Enhanced Mission Control's search functionality with the following improvements:
|
|
|
|
## Changes Made
|
|
|
|
### 1. Enhanced Search API (`/app/api/search/route.ts`)
|
|
|
|
#### New Features:
|
|
- **Search Result Highlighting**: Added `SearchResultHighlight` interface with match positions for highlighting matching terms in titles and snippets
|
|
- **Advanced Filters**: Added support for filtering by:
|
|
- Type (task, project, document, sprint)
|
|
- Status (open, in-progress, done, etc.)
|
|
- Date ranges (from/to)
|
|
- **Relevance Scoring**: Implemented `calculateRelevanceScore` function that considers:
|
|
- Exact title matches (+100)
|
|
- Title starts with query (+80)
|
|
- Title contains query (+60)
|
|
- Content matches (+10 per match, max 40)
|
|
- Recency boost (+10 for items updated < 7 days, +5 for < 30 days)
|
|
- Active status boost (+5 for in-progress/open/active items)
|
|
- **Performance Metrics**: Added `executionTimeMs` to track search performance
|
|
- **Improved Snippets**: Added `createHighlightedSnippet` function for better context around matches
|
|
|
|
#### Response Structure:
|
|
```typescript
|
|
interface SearchResponse {
|
|
results: SearchableResult[];
|
|
total: number;
|
|
query: string;
|
|
filters?: SearchFilters;
|
|
executionTimeMs?: number;
|
|
}
|
|
```
|
|
|
|
### 2. Enhanced Quick Search Component (`/components/layout/quick-search.tsx`)
|
|
|
|
#### New Features:
|
|
- **Search Filters UI**: Added Popover-based filter panel with:
|
|
- Type filters (Tasks, Projects, Documents, Sprints)
|
|
- Status filters (Open, In Progress, Done, etc.)
|
|
- Active filter count badge
|
|
- Clear all filters button
|
|
- **Search History**: Added localStorage-based search history with:
|
|
- Last 10 searches stored
|
|
- 30-day expiration
|
|
- History display when search is empty
|
|
- Individual history item removal
|
|
- Clear all history option
|
|
- Result count tracking
|
|
- **Highlighted Results**: Added `HighlightedText` component that shows matching terms with yellow background
|
|
- **Improved UI**: Better grouping, status icons, and visual hierarchy
|
|
|
|
### 3. New Search Hook (`/hooks/useSearch.ts`)
|
|
|
|
#### Features:
|
|
- **`useSearch` hook**: Comprehensive search state management with:
|
|
- Debounced search (configurable, default 150ms)
|
|
- Request cancellation support
|
|
- Error handling
|
|
- Filter management
|
|
- Callbacks for results and errors
|
|
|
|
- **`useSearchHistory` hook**: Reusable history management with:
|
|
- Automatic localStorage sync
|
|
- Duplicate prevention
|
|
- Max item limit (10)
|
|
- 30-day automatic cleanup
|
|
|
|
- **Utilities**:
|
|
- `createHighlightedText`: Helper for text highlighting
|
|
|
|
## API Usage Examples
|
|
|
|
### Basic Search
|
|
```
|
|
GET /api/search?q=mission
|
|
```
|
|
|
|
### Search with Filters
|
|
```
|
|
GET /api/search?q=mission&types=task,project&status=open,in-progress
|
|
```
|
|
|
|
### Search with Date Range
|
|
```
|
|
GET /api/search?q=mission&dateFrom=2026-01-01&dateTo=2026-12-31
|
|
```
|
|
|
|
## UI Components
|
|
|
|
### QuickSearch
|
|
The QuickSearch component now provides:
|
|
- ⌘K keyboard shortcut
|
|
- Filter button with active count
|
|
- Search history (recent searches)
|
|
- Highlighted matching terms
|
|
- Status icons
|
|
- Color indicators for projects
|
|
|
|
### Filter Popover
|
|
- Type filter buttons
|
|
- Status filter buttons
|
|
- Clear all option
|
|
- Visual active state
|
|
|
|
## Technical Improvements
|
|
|
|
1. **Performance**:
|
|
- Debounced API calls (150ms)
|
|
- Request cancellation
|
|
- Limited to 50 results
|
|
- Execution time tracking
|
|
|
|
2. **User Experience**:
|
|
- Visual feedback during loading
|
|
- No results message with filter reset
|
|
- Keyboard navigation support
|
|
- Persistent search history
|
|
|
|
3. **Code Quality**:
|
|
- TypeScript interfaces for all types
|
|
- Reusable hooks
|
|
- Clean separation of concerns
|
|
- Proper error handling
|
|
|
|
## Files Modified
|
|
|
|
1. `/app/api/search/route.ts` - Enhanced API with highlighting and filters
|
|
2. `/components/layout/quick-search.tsx` - Enhanced UI with filters and history
|
|
3. `/hooks/useSearch.ts` - New search hook
|
|
4. `/components/ui/popover.tsx` - New shadcn component (auto-installed)
|
|
|
|
## Testing
|
|
|
|
The build completes successfully with these changes. The search functionality is backwards compatible - existing search functionality continues to work while new features are opt-in.
|
|
|
|
## Future Enhancements (Optional)
|
|
|
|
Potential additional improvements:
|
|
1. Fuzzy search with Levenshtein distance
|
|
2. Search analytics/tracking
|
|
3. Saved searches
|
|
4. Advanced date range picker
|
|
5. Search result pagination
|
|
6. Full-text search with PostgreSQL
|