About This Tool
Purpose
Advanced search interface for Claude Code JSONL transcripts featuring fuzzy matching, score-based ranking, and D3.js-powered result visualization. Enables developers to quickly find relevant conversations, code snippets, and tool usage patterns across coding sessions.
Features
- Fuzzy Search Algorithm: Tolerates typos and approximate matches using Levenshtein distance
- D3.js Data Binding: Dynamic result rendering with smooth enter/exit transitions
- Linear Scale Visualization: Score bars showing match relevance from 0-100%
- Multi-Facet Filtering: Filter by role, date range, tools, and minimum score threshold
- Context Highlighting: Matching terms highlighted in result snippets
- Score-Based Ranking: Results sorted by relevance with visual indicators
- Keyboard Navigation: Power-user shortcuts for efficient searching
- Real-Time Statistics: Live result count, average score, and search performance metrics
Web Research Integration
Source: D3.js Getting Started Guide
Techniques Applied:
- D3 Data Joining & Selection: Using selectAll().data().join() pattern for efficient DOM updates when search results change
- Linear Scale Functions: Implemented d3.scaleLinear() to map relevance scores (0-100) to visual bar widths, creating intuitive score visualization
- Smooth Transitions: Applied D3 transition() with duration and delay for staggered result animations, creating polished user experience
Usage
- Type your search query in the search box (fuzzy matching automatically enabled)
- Optionally apply filters for role, date range, tools, or minimum score
- Press Enter or click Search to execute
- Results appear with relevance scores shown as visual bars
- Matching terms are highlighted in context snippets
- Use keyboard shortcuts for faster workflow: Ctrl+K to focus, Esc to clear
Sample Data
This tool includes realistic sample transcript data demonstrating various Claude Code interactions including file operations, git commands, web research, and code generation. In production, load your actual JSONL transcript files.
D3.js Integration Details
Why D3.js for Search Results?
Traditional DOM manipulation creates jerky, unnatural result updates. D3's data-binding approach enables:
- Declarative Updates: Define what should exist based on data, D3 handles the transitions
- Enter/Exit Patterns: Smooth animations when results appear or disappear
- Scale Functions: Automatic mapping of data ranges to visual properties
- Performance: Efficient DOM updates only where data changed
Fuzzy Search Algorithm
Implements simplified Levenshtein distance calculation for typo tolerance. Scores based on:
- Character-by-character matching (case-insensitive)
- Sequence matching bonuses
- Position weighting (earlier matches score higher)
- Normalized to 0-100 scale for consistency