# pdftract-5ec94: Hover tooltips, JSON-tree click navigation, search filter UI

## Summary

All three required features were already implemented in the frontend code:

### 1. Hover tooltips (50 ms requirement)
- **Implementation:** `setupTooltips()` in `app.js` (lines 594-671)
- **CSS:** `transition:opacity 0s` in `style.css` line 45 - instant appearance, no delay
- **Content displayed:** Text, Font (name + size), Confidence, BBox, Block ref, MCID, Reading idx
- **Data source:** `data-*` attributes populated server-side in SVG rendering

### 2. JSON-tree click navigation
- **Span click handler:** `handleSpanClick()` (lines 344-371)
- **Setup:** `setupJsonNavigation()` (lines 335-342)
- **Behavior:**
  - Clicking a span scrolls the JSON panel to the matching entry
  - Adds `.highlighted` class (yellow background) for 2 seconds
  - Opens parent `<details>` elements to reveal the entry
  - Smooth scroll animation

### 3. Search filter UI
- **Setup:** `setupSearch()` (lines 469-482)
- **Filtering:** `performSearch()` (lines 484-518) - case-insensitive substring match
- **Cycling:** `cycleMatch()` (lines 520-537) - Enter cycles forward, Shift+Enter cycles backward
- **Clearing:** `clearSearch()` (lines 556-561) - Escape key clears filter
- **Visual feedback:**
  - `.search-match` class adds bright orange outline (2px solid #ff9800)
  - Active match gets double outline (3px solid #ff6f00)
  - Match count displayed (e.g., "3 of 7 matches")

## Acceptance Criteria

| Criterion | Status | Notes |
|-----------|--------|-------|
| Hover tooltip appears within 50 ms | ✅ PASS | CSS `transition:opacity 0s` - instant |
| Click span -> JSON tree scrolls + highlights | ✅ PASS | `handleSpanClick()` with smooth scroll + 2s highlight |
| Search filter narrows visible spans | ✅ PASS | `.search-match` class with bright outline |
| Enter cycles through matches | ✅ PASS | `cycleMatch(1)` on Enter, `cycleMatch(-1)` on Shift+Enter |
| Escape clears search | ✅ PASS | Keyboard handler + `clearSearch()` |
| Tooltip content matches plan | ✅ PASS | Text, Font, Confidence, Bbox, Block, MCID, Reading idx |

## Files Verified

- `crates/pdftract-cli/src/inspect/frontend/index.html` - HTML structure with tooltip div, search input, match count span
- `crates/pdftract-cli/src/inspect/frontend/app.js` - All JS handlers for hover, click, search
- `crates/pdftract-cli/src/inspect/frontend/style.css` - CSS for tooltip (0s transition), search-match outline, highlighted animation

## Conclusion

Bead requirements were already satisfied by existing code. No new implementation needed.