feat(vscode): @ file mention with dropdown and file chips by iscekic · Pull Request #397 · Kilo-Org/kilo

iscekic · 2026-02-17T20:35:04Z

Summary

Closes #289 — @ file tagging with dropdown menu for the VS Code extension.

What's new

Type @ in the chat input to trigger a fuzzy file search dropdown
Keyboard navigation: ↑↓ to move, Enter/Tab to select, Escape to dismiss
Selected files appear as removable chips below the textarea (click × to remove)
Chips are sent as FileAttachment[] with the message on submit
Dropdown and chips use FileIcon from @kilocode/kilo-ui/file-icon for VS Code–themed file type icons

Implementation

http-client.ts: findFiles(query, dir) → GET /find/file?query=...&dirs=false&limit=10
messages.ts: RequestFileSearchMessage (webview→ext) and FileSearchResultMessage (ext→webview)
KiloProvider.ts: handles requestFileSearch, calls findFiles, posts result back
PromptInput.tsx: @ detection, debounced search, dropdown with keyboard nav, file chips
esbuild.js: custom svgSpritePlugin injects the file-icon SVG sprite into document.body to avoid VS Code webview cross-origin <use href="data:..."> errors
chat.css: dropdown item layout [icon] filename parent/dir and chip layout [icon] filename ×

Add findFiles() to HttpClient, add RequestFileSearchMessage/FileSearchResultMessage message types, and handle requestFileSearch in KiloProvider.

- Detect @<query> pattern in textarea and show fuzzy file search dropdown - Keyboard navigation (arrows, Enter/Tab to select, Escape to close) - Selected files appear as removable chips below the textarea - Chips are sent as FileAttachment[] with the message on submit

…chips - Add .svg dataurl loader to esbuild for webview and agent-manager builds - Replace hardcoded SVG with FileIcon from @kilocode/kilo-ui/file-icon - Dropdown shows: [icon] filename parent/path (name bold, dir muted right-aligned) - Chips show: [icon] filename

Use a custom esbuild plugin to inject sprite.svg into document.body as a hidden element instead of using the dataurl loader. This avoids VS Code webview's cross-origin block on <use href="data:..."> references.

packages/kilo-vscode/src/KiloProvider.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

kiloconnect · 2026-02-17T20:37:22Z

Code Review Summary

Status: No Issues Found | Recommendation: Merge

All previously identified issues from earlier review rounds have been addressed across the 28 commits in this PR. The implementation is clean and well-structured:

Error handling: findFiles promise has .catch() with fallback empty response; null httpClient case sends empty result
Race conditions: Debounce counter logic is correct — only the last debounced request fires, and stale responses are rejected
Regex safety: AT_PATTERN requires word boundary before @, no multiline flag, $ anchors to end-of-string
URL construction: Uses new URL("file://") with proper pathname assignment, handles Windows backslash normalization
UX: Enter/Tab fall through when mention results are empty, ghost text suppressed during mention, scroll sync on input

Files Reviewed (7 files)

packages/kilo-vscode/esbuild.js — SVG sprite inline plugin for webview cross-origin compatibility
packages/kilo-vscode/src/KiloProvider.ts — requestFileSearch message handler with error handling
packages/kilo-vscode/src/services/cli-backend/http-client.ts — findFiles() API method
packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx — @ mention UI with highlight overlay
packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts — Extracted mention hook with debounced search
packages/kilo-vscode/webview-ui/src/styles/chat.css — Dropdown and highlight overlay styles
packages/kilo-vscode/webview-ui/src/types/messages.ts — New message type definitions

Copilot

Pull request overview

This PR implements @ file mention functionality for the VS Code extension's chat interface, allowing users to tag and attach files to their messages through a fuzzy search dropdown.

Changes:

Added file search API endpoint integration (/find/file) with debounced search
Implemented keyboard-navigable dropdown with fuzzy file search triggered by @ symbol
Added removable file chips to display attached files before sending
Extended message handling to include FileAttachment[] in chat messages

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
`packages/kilo-vscode/webview-ui/src/types/messages.ts`	Added `RequestFileSearchMessage` and `FileSearchResultMessage` types for file search communication
`packages/kilo-vscode/webview-ui/src/styles/chat.css`	Added CSS for file mention dropdown and attached file chips with VS Code theme integration
`packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx`	Implemented @ detection, file search, dropdown with keyboard navigation, and file chip UI
`packages/kilo-vscode/src/services/cli-backend/http-client.ts`	Added `findFiles` method to query backend `/find/file` endpoint
`packages/kilo-vscode/src/KiloProvider.ts`	Added message handler for `requestFileSearch` to call backend and return results
`packages/kilo-vscode/esbuild.js`	Added `svgSpritePlugin` to inject FileIcon SVG sprite into webview DOM to avoid CSP issues

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/kilo-vscode/src/KiloProvider.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

- Add .catch() to findFiles promise, posting paths:[] on failure so the webview doesn't hang (KiloProvider.ts) - Fix AT_PATTERN to require word boundary before @ to avoid false triggers on email addresses and mid-word @ symbols - Increment fileSearchCounter before setTimeout to prevent duplicate requestIds when multiple keystrokes fire before the debounce fires

- Replace inline SVG send/stop icons with Icon name="arrow-up"/"stop" - Replace hand-rolled chip remove button with IconButton icon="close-small" - Remove .file-chip-remove CSS ruleset (no longer needed)

Move all @ mention logic into a dedicated hook: - Signals: attachedFiles, mentionQuery, mentionResults, mentionIndex - onInput(val, cursor): boolean — AT_PATTERN detection, returns true if consumed - onKeyDown(e, textarea): boolean — dropdown navigation, returns true if consumed - selectFile, removeFile, closeMention, buildFileAttachments, clearAttachedFiles PromptInput retains only text/ghostText state, autocomplete, and JSX.

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

…vigation

…ile search

- Add multiline support: regex now matches @ after newlines (m flag) - Show dropdown on bare @: trigger search with empty query to show all/recent files - Add empty state: display 'No files found' when search returns 0 results

… createEffect The createEffect approach didn't work because dropdownRef is inside a <Show> block — the ref is undefined when the effect is first created and is not reactive, so the effect never runs. Move scroll logic to handleKeyDown where dropdownRef is guaranteed to exist when the dropdown is visible, using queueMicrotask to defer until after Solid updates DOM.

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

packages/kilo-vscode/src/KiloProvider.ts

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

…chips

…own is open

…rkspace dir

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 13 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/kilo-vscode/webview-ui/src/styles/chat.css

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/esbuild.js

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/esbuild.js

- send empty fileSearchResult when httpClient is null so dropdown closes instead of hanging - remove m flag from AT_PATTERN so $ anchors to end-of-string not end-of-line - don't swallow Enter when mention dropdown is open but results are empty - remove unused pos variable in buildHighlightSegments

# Conflicts: # packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

packages/kilo-vscode/webview-ui/src/styles/chat.css

iscekic added 4 commits February 17, 2026 20:41

feat(vscode): add file search API plumbing for @ mention feature

6fd3227

Add findFiles() to HttpClient, add RequestFileSearchMessage/FileSearchResultMessage message types, and handle requestFileSearch in KiloProvider.

fix(vscode): inline SVG sprite to avoid cross-origin webview error

ba5a16d

Use a custom esbuild plugin to inject sprite.svg into document.body as a hidden element instead of using the dataurl loader. This avoids VS Code webview's cross-origin block on <use href="data:..."> references.

iscekic self-assigned this Feb 17, 2026

iscekic requested a review from Copilot February 17, 2026 20:35

github-actions bot added the contributor label Feb 17, 2026

Copilot started reviewing on behalf of iscekic February 17, 2026 20:35 View session

kiloconnect bot reviewed Feb 17, 2026

View reviewed changes

packages/kilo-vscode/src/KiloProvider.ts Outdated Show resolved Hide resolved

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx Outdated Show resolved Hide resolved

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx Outdated Show resolved Hide resolved

Copilot AI reviewed Feb 17, 2026

View reviewed changes

iscekic added 3 commits February 17, 2026 21:56

refactor(vscode): use kilo-ui Icon and IconButton in PromptInput

69a3eb4

- Replace inline SVG send/stop icons with Icon name="arrow-up"/"stop" - Replace hand-rolled chip remove button with IconButton icon="close-small" - Remove .file-chip-remove CSS ruleset (no longer needed)

kiloconnect bot reviewed Feb 17, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts Show resolved Hide resolved

iscekic added 6 commits February 17, 2026 22:16

fix(vscode): prevent race condition in file search debounce counter

b6ba06b

fix(vscode): sync text signal when file mention replaces @query

4c492f6

fix(vscode): remove unused onInput return value

9d9b1e3

fix(vscode): scroll active file mention item into view on keyboard na…

9805982

…vigation

fix(vscode): require at least 1 character after @ before triggering f…

a0aae38

…ile search

fix(vscode): improve @ file mention UX

7f869a4

- Add multiline support: regex now matches @ after newlines (m flag) - Show dropdown on bare @: trigger search with empty query to show all/recent files - Add empty state: display 'No files found' when search returns 0 results

iscekic force-pushed the feature/vscode-at-file-mention branch from adfd2c1 to 7f869a4 Compare February 17, 2026 21:26

iscekic added 6 commits February 17, 2026 22:27

fix(vscode): use querySelectorAll for dropdown scroll into view

79aef43

debug(vscode): add logging to diagnose dropdown scroll issue

ae2a510

debug(vscode): add logging to scrollToActiveItem

e38ac99

debug(vscode): add logging to handleKeyDown

143f222

debug(vscode): add component render log

ac20f76

kiloconnect bot reviewed Feb 17, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts Outdated Show resolved Hide resolved

packages/kilo-vscode/src/KiloProvider.ts Show resolved Hide resolved

chore(vscode): remove debug logging from PromptInput

22006f6

kiloconnect bot reviewed Feb 17, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts Show resolved Hide resolved

Merge branch 'dev' into feature/vscode-at-file-mention

e2caa75

kiloconnect bot reviewed Feb 18, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx Outdated Show resolved Hide resolved

iscekic added 6 commits February 18, 2026 11:32

feat(vscode): inline @file mention with highlight overlay instead of …

aa287f2

…chips

fix(vscode): position file mention dropdown absolutely above input

d4e0c4d

fix(vscode): suppress ghost text and autocomplete while mention dropd…

5ebec98

…own is open

fix(vscode): adjust textarea height after file mention selection

05522f4

fix(vscode): invalidate in-flight autocomplete request on send

e714e5f

fix(vscode): construct valid file:// URL from relative paths using wo…

315c0fa

…rkspace dir

kiloconnect bot reviewed Feb 18, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx Outdated Show resolved Hide resolved

iscekic requested a review from Copilot February 18, 2026 11:40

Copilot started reviewing on behalf of iscekic February 18, 2026 11:40 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

iscekic added 2 commits February 18, 2026 12:56

Merge branch 'dev' into feature/vscode-at-file-mention

847367b

# Conflicts: # packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

iscekic requested review from chrarnoldus and markijbema February 18, 2026 12:16

markijbema reviewed Feb 18, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx Outdated Show resolved Hide resolved

markijbema reviewed Feb 18, 2026

View reviewed changes

packages/kilo-vscode/webview-ui/src/styles/chat.css Show resolved Hide resolved

markijbema approved these changes Feb 18, 2026

View reviewed changes

fix(vscode): normalize Windows paths in file mention URL construction

7ee51be

iscekic enabled auto-merge February 18, 2026 13:46

iscekic merged commit b3a470a into dev Feb 18, 2026
7 checks passed

iscekic deleted the feature/vscode-at-file-mention branch February 18, 2026 13:51

Conversation

iscekic commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's new

Implementation

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kiloconnect bot commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

iscekic commented Feb 17, 2026 •

edited

Loading

kiloconnect bot commented Feb 17, 2026 •

edited

Loading