Skip to content

feat: replace project dropdown with filtering typeahead - #52

Merged
wesm merged 13 commits into
kenn-io:mainfrom
mariusvniekerk:feat/project-typeahead-filter
Feb 26, 2026
Merged

feat: replace project dropdown with filtering typeahead#52
wesm merged 13 commits into
kenn-io:mainfrom
mariusvniekerk:feat/project-typeahead-filter

Conversation

@mariusvniekerk

@mariusvniekerk mariusvniekerk commented Feb 26, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Replace the native <select> dropdown for project filtering with a custom typeahead component that filters as you type
  • Supports keyboard navigation (arrow keys, Enter, Escape), substring match highlighting, and responsive dropdown height (50vh)
  • Applied to both the header and the insights page project filter
  • Handles hundreds of projects gracefully

Test plan

  • Open AgentsView with multiple projects and verify the typeahead appears in the header
  • Type to filter projects and confirm substring highlighting works
  • Verify keyboard navigation (arrows, Enter, Escape) works
  • Check the insights page also uses the typeahead for project filtering
  • Test in both light and dark mode for highlight visibility
  • Verify dropdown height scales with viewport

🤖 Generated with Claude Code

@roborev-ci

roborev-ci Bot commented Feb 26, 2026

Copy link
Copy Markdown

roborev: Combined Review (767efc3)

Verdict: The implementation is secure and structurally sound, but introduces a medium-severity usability issue in the new dropdown component.

Medium

Blur handling can close the dropdown during in-dropdown
interactions

File: ProjectTypeahead.svelte:84
handleBlur closes when relatedTarget is null. That commonly happens when clicking non-focusable parts (including the scrollbar/track), meaning long result lists can close unexpectedly while the user is trying to scroll.
Suggested fix: Use outside-click detection (pointerdown on document + containerEl.contains(target)) or prevent blur
-close when pointer interaction starts inside the dropdown.


Synthesized from 4 reviews (agents: codex, gemini | types: default, security)

mariusvniekerk and others added 10 commits February 26, 2026 06:17
The simple <select> dropdown doesn't scale when there are hundreds of
projects. Replace it with a custom typeahead component that filters
as you type, supports keyboard navigation (arrow keys, enter, escape),
and shows a dropdown with highlighted matches.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the plain <select> dropdown for project filtering on the
insights page with the same typeahead component used in the header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Uses min(400px, 50vh) so it scales on smaller screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When filtering, the matched portion of each project name is highlighted
with a blue background, similar to VS Code's file matching.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase background opacity, make matched text blue and bold.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Update sessions-page page object to interact with the new
ProjectTypeahead component instead of the removed <select> element.
Fix dropdown closing when clicking the scrollbar by tracking pointer
state inside the container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@wesm
wesm force-pushed the feat/project-typeahead-filter branch from 767efc3 to f79013b Compare February 26, 2026 12:29
@roborev-ci

roborev-ci Bot commented Feb 26, 2026

Copy link
Copy Markdown

roborev: Combined Review (f79013b)

Summary Verdict: The code changes securely implement the new ProjectTypeahead component,
but introduce a medium-severity bug regarding dropdown state management.

Medium

  • Dropdown can remain stuck open after scrollbar/non-focusable click
    • Files: [ProjectTypeahead.svelte:89](/home/roborev/.roborev/clones/wesm/agentsview/
      frontend/src/lib/components/layout/ProjectTypeahead.svelte:89), [ProjectTypeahead.svelte:104](/home/roborev/.roborev/clones/wesm/agentsview/frontend/src/lib/components/layout/ProjectTypeahead.svelte:10
  • Description: handleBlur skips closing when pointerInsideContainer is true. After clicking the scrollbar (or other non-focusable area), the input blurs, the dropdown stays open, and subsequent outside clicks may not close it because blur no longer fires from the input.

Suggested fix:** Keep focus on input during list interactions (onmousedown|preventDefault on list container/options), or add an explicit outside-pointer handler to close when open.


Synthesized from 4 reviews (agents: codex, gemini | types: default, security)

wesm and others added 3 commits February 26, 2026 06:39
Replace pointerInsideContainer tracking with preventDefault on the
list's mousedown. This keeps focus on the input during scrollbar and
option interactions, so blur fires correctly for outside clicks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Prevent substring collisions when project names overlap by matching
the option text with ^project \( instead of plain hasText.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@roborev-ci

roborev-ci Bot commented Feb 26, 2026

Copy link
Copy Markdown

roborev: Combined Review (d179ee1)

Summary Verdict: All agents agree the code is clean and no medium, high, or critical issues were found.


Synthesized from 4 reviews (agents: codex, gemini | types: default, security)

@wesm
wesm merged commit ff63eab into kenn-io:main Feb 26, 2026
6 checks passed
cursor Bot pushed a commit to diazMelgarejo/periscope that referenced this pull request Jun 1, 2026
## Summary
- Replace the native `<select>` dropdown for project filtering with a
custom typeahead component that filters as you type
- Supports keyboard navigation (arrow keys, Enter, Escape), substring
match highlighting, and responsive dropdown height (50vh)
- Applied to both the header and the insights page project filter
- Handles hundreds of projects gracefully

## Test plan
- [x] Open AgentsView with multiple projects and verify the typeahead
appears in the header
- [x] Type to filter projects and confirm substring highlighting works
- [x] Verify keyboard navigation (arrows, Enter, Escape) works
- [x] Check the insights page also uses the typeahead for project
filtering
- [x] Test in both light and dark mode for highlight visibility
- [x] Verify dropdown height scales with viewport

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Wes McKinney <wesmckinn+git@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants