add context bar with button to remove files, @ menu option to add all… #2880

nickchomey · 2025-10-09T16:22:14Z

… open files/editors

Context

This adds a context bar above the chat, in the style of Github Copilot and Augment Code. Files get a "pill" with an X button to remove it. It works for @ Add File/Folder/Commit, multiple file shift+drag-and-drop, as well as a new @ menu option All Open Editors which adds all currently-open files/editors to the context.

Implementation

Uploading Code_5r58SV28iJ.mp4

I dont even have a clue - pure vibe coded/debugged as I dont know typescript etc... Should be self-explanatory from the diffs.

I had issues with full vs workspace-relative path being shown in the tooltip and, especially with being included in the actual api request. In the end, i seemed to get it all working by ensuring that it had the format @/workspace/relative/path/to/file.js. The leading / was necessary for Kilo to actually attach the file rather than just provide the file name/path.

This is the extent of my capabilities here - if anything needs to be further tested/changed, i'll have to leave it up to more knowledgeable people.

Screenshots

Code_5r58SV28iJ.mp4

How to Test

Try the various methods for adding files to context:

@ Add Files/Folders
@ All Open Editors
Shift + Drag-and-drop multiple files

Get in Touch

Here, or in discord with the same username

changeset-bot · 2025-10-09T16:22:18Z

⚠️ No Changeset found

Latest commit: b60c305

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull Request Overview

This PR adds a context bar UI feature that displays attached files as removable "pills" above the chat input, similar to GitHub Copilot and Augment Code. The key changes include:

Added a new context pills bar component for displaying and removing attached files
Enhanced file attachment methods: @ Add File/Folder, Shift+drag-and-drop, and a new "All Open Editors" menu option
Modified message handling to inject context mentions into chat messages

Reviewed Changes

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

Show a summary per file

File	Description
webview-ui/src/utils/context-mentions.ts	Added AllOpenEditors context menu option type and filtering logic
webview-ui/src/index.css	Added CSS styles for context pills bar and individual pill components
webview-ui/src/components/chat/tests/ContextPillsBar.spec.tsx	Added comprehensive unit tests for the ContextPillsBar component
webview-ui/src/components/chat/tests/ChatTextArea.spec.tsx	Added tests for new Shift+drag-and-drop context attachment behavior
webview-ui/src/components/chat/ContextPillsBar.tsx	New component for rendering context pills with remove functionality
webview-ui/src/components/chat/ContextMenu.tsx	Added UI elements for AllOpenEditors menu option
webview-ui/src/components/chat/ChatView.tsx	Integrated context pills state management and message injection logic
webview-ui/src/components/chat/ChatTextArea.tsx	Enhanced with context pill support and improved drag-and-drop handling
src/package.json	Version bump to 4.102.0

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

webview-ui/src/components/chat/ChatTextArea.tsx

webview-ui/src/components/chat/ChatView.tsx

webview-ui/src/components/chat/ChatTextArea.tsx

nickchomey · 2025-10-09T16:29:04Z

Looks like some good feedback from copilot! I changed to Draft while I address it all

… open files/editors

Copilot

Pull Request Overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

webview-ui/src/components/chat/ChatTextArea.tsx

webview-ui/src/components/chat/ChatView.tsx

Co-authored-by: Copilot <[email protected]>

nickchomey · 2025-10-09T17:56:09Z

here's another screen recording showing how it is responsive.

I'm still working to resolve some failed tests - though i think they mostly have nothing to do with the PR...

Code_O8CnXuh4Qe.mp4

Copilot

Pull Request Overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

webview-ui/src/components/chat/ChatView.tsx

webview-ui/src/components/chat/ChatTextArea.tsx

Copilot

Pull Request Overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

webview-ui/src/components/chat/ChatTextArea.tsx

webview-ui/src/components/chat/ChatView.tsx

webview-ui/src/components/chat/ChatTextArea.tsx

Co-authored-by: Copilot <[email protected]>

Copilot

Pull Request Overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2025-10-09T18:44:36Z

webview-ui/src/components/chat/ChatView.tsx

+// Utility function to validate mentions
+const isValidMention = (mention: string): boolean => {
+	const trimmed = mention?.trim() || "";
+	return !!trimmed && trimmed !== "@" && trimmed !== "@/";
+};


This new utility function should be marked with a kilocode_change comment since it doesn't exist in the upstream Roo codebase.

Copilot · 2025-10-09T18:44:36Z

webview-ui/src/components/chat/ChatView.tsx

 	const textAreaRef = useRef<HTMLTextAreaElement>(null)
 	const [sendingDisabled, setSendingDisabled] = useState(false)
 	const [selectedImages, setSelectedImages] = useState<string[]>([])
+	const [contextMentions, setContextMentions] = useState<string[]>([])


This new state variable should be marked with a kilocode_change comment since it's a new addition to the existing component.

Copilot · 2025-10-09T18:44:36Z

webview-ui/src/components/chat/ChatView.tsx

+	const handleAddMention = useCallback((mention: string) => {
+		// Validate mention before adding - skip empty or invalid mentions
+		if (!isValidMention(mention)) {
+			return; // kilocode_change: return early if mention is invalid
+		}
+		// Check for duplicates before adding
+		setContextMentions((prev) => {
+			if (prev.includes(mention)) {
+				return prev;
+			}
+			return [...prev, mention];
+		});
+	}, []);


This new callback function should be wrapped with kilocode_change start/end comments since it's a completely new function.

Copilot · 2025-10-09T18:44:37Z

webview-ui/src/components/chat/ChatView.tsx

+	const handleRemoveMention = useCallback((mention: string) => {
+		setContextMentions((prev) => prev.filter((m) => m !== mention));
+	}, [])


This new callback function should be wrapped with kilocode_change start/end comments since it's a completely new function.

Copilot · 2025-10-09T18:44:37Z

webview-ui/src/components/chat/ChatView.tsx

+			// Inject context mentions into the text
+			// Use isValidMention to filter out invalid mentions and ensure proper formatting
+			const validMentions = contextMentions
+								.filter(isValidMention)
+								.map((m) => m.trim())
+								.map((m) => m.startsWith("@") ? m : `@${m}`);
+
+			const mentionsText = validMentions.join(" ");
+			const fullText = mentionsText ? `${mentionsText} ${text}` : text;


This context mentions injection logic should be wrapped with kilocode_change start/end comments as it's new functionality.

Copilot · 2025-10-09T18:44:37Z

webview-ui/src/components/chat/ChatTextArea.tsx

+		// The visual highlight overlay for mentions within the textarea was removed.
+		// Previously, mentions were visually highlighted directly in the textarea as users typed.
+		// This functionality was removed to simplify the input UI and improve maintainability.
+		// Mentions are now visually represented in the ContextPillsBar component above the textarea,
+		// providing a clearer and more accessible way to view and manage mentions in the message.
+		// If visual highlighting in the textarea is needed in the future, refer to previous implementations
+		// prior to this change for guidance.


This comment block explaining the removal of highlight functionality should be marked with kilocode_change start/end comments since it's documenting a significant change.

Copilot · 2025-10-09T18:44:37Z

webview-ui/src/components/chat/ChatTextArea.tsx

+				if (type === ContextMenuOptionType.AllOpenEditors) {
+					// Add all open files as context pills
+					if (openedTabs && openedTabs.length > 0) {
+						for (const tab of openedTabs) {
+							// Skip tabs with invalid paths
+							const trimmedPath = tab.path ? tab.path.trim() : "";
+							if (!tab.path || trimmedPath === "" || trimmedPath === "/") {
+								continue;
+							}
+
+							// tab.path is already a relative path (e.g., "src/file.ts")
+							// Format it directly as a mention path with @/ prefix
+							// Escape spaces in the path if present
+							const pathWithEscapedSpaces = tab.path.includes(" ") ? escapeSpaces(tab.path) : tab.path;
+							const mentionPath = `@/${pathWithEscapedSpaces}`;
+
+							if (onMentionAdd) {
+								onMentionAdd(mentionPath);
+							}
+						}
+					}
+					setShowContextMenu(false);
+					setSelectedType(null);
+				} else if (


This new AllOpenEditors handling logic should be wrapped with kilocode_change start/end comments as it's new functionality.

Copilot · 2025-10-09T18:44:38Z

webview-ui/src/components/chat/ChatTextArea.tsx

+				// If onMentionAdd callback is provided, use it (new behavior - add to pills)
+				if (onMentionAdd) {
+					// Remove the @ character from textarea
+					if (textAreaRef.current) {
+						const beforeCursor = textAreaRef.current.value.slice(0, cursorPosition);
+						const afterCursor = textAreaRef.current.value.slice(cursorPosition);
+						const lastAtIndex = beforeCursor.lastIndexOf("@");

-					setInputValue(newValue)
-					const newCursorPosition = newValue.indexOf(" ", mentionIndex + insertValue.length) + 1
-					setCursorPosition(newCursorPosition)
-					setIntendedCursorPosition(newCursorPosition)
+						if (lastAtIndex !== -1) {
+							const newValue = beforeCursor.slice(0, lastAtIndex) + afterCursor;
+							setInputValue(newValue);
+							setCursorPosition(lastAtIndex);
+							setIntendedCursorPosition(lastAtIndex);
+						}
+					}

-					// Scroll to cursor.
+					// Add to context pills
+					onMentionAdd(insertValue);
+
+					// Focus textarea
 					setTimeout(() => {
 						if (textAreaRef.current) {
-							textAreaRef.current.blur()
-							textAreaRef.current.focus()
+							textAreaRef.current.focus();
 						}
-					}, 0)
+					}, 0);
+				} else {


This new mention handling behavior (adding to pills vs textarea) should be wrapped with kilocode_change start/end comments as it's new functionality that changes how mentions are handled.

nickchomey · 2025-10-09T18:46:44Z

ok, i suppose this is ready for review. I have no idea what all of the should be wrapped with kilocode_change start/end comments as it's new functionality that changes how mentions are handled. copilot code review comments are about...

I also reiterate that I have very little idea of what's going on in this PR, and no idea if the tests that the agent implemented are at all appropriate. I'm not even particularly inclined to investigate further...

But, it does all seem to work as-expected.

nickchomey · 2025-10-09T19:20:32Z

moved the x close button to the left so you can rapidly remove files - it was a mess on the right side since all pills were of different width

Code_jS97QQ7hsf.mp4

I'm going to look into adding a right click context menu option to add selected files to context

…elect

Copilot

Pull Request Overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

webview-ui/src/components/chat/ContextPillsBar.tsx

Copilot · 2025-10-09T22:22:17Z

webview-ui/src/components/chat/ChatView.tsx

+	const handleAddMention = useCallback((mention: string) => {
+		// Validate mention before adding - skip empty or invalid mentions
+		if (!isValidMention(mention)) {
+			return; // kilocode_change: return early if mention is invalid


This change should be marked with kilocode_change comments according to the project's merge guidelines.

webview-ui/src/components/chat/ChatTextArea.tsx

Copilot · 2025-10-09T22:22:17Z

webview-ui/src/components/chat/ChatTextArea.tsx

+		// The visual highlight overlay for mentions within the textarea was removed.
+		// Previously, mentions were visually highlighted directly in the textarea as users typed.
+		// This functionality was removed to simplify the input UI and improve maintainability.
+		// Mentions are now visually represented in the ContextPillsBar component above the textarea,
+		// providing a clearer and more accessible way to view and manage mentions in the message.
+		// If visual highlighting in the textarea is needed in the future, refer to previous implementations
+		// prior to this change for guidance.


This comment block should be marked with kilocode_change comments since it documents a significant change from the original Roo codebase.

Suggested change

// The visual highlight overlay for mentions within the textarea was removed.

// Previously, mentions were visually highlighted directly in the textarea as users typed.

// This functionality was removed to simplify the input UI and improve maintainability.

// Mentions are now visually represented in the ContextPillsBar component above the textarea,

// providing a clearer and more accessible way to view and manage mentions in the message.

// If visual highlighting in the textarea is needed in the future, refer to previous implementations

// prior to this change for guidance.

// kilocode_change start: The visual highlight overlay for mentions within the textarea was removed.

// Previously, mentions were visually highlighted directly in the textarea as users typed.

// This functionality was removed to simplify the input UI and improve maintainability.

// Mentions are now visually represented in the ContextPillsBar component above the textarea,

// providing a clearer and more accessible way to view and manage mentions in the message.

// If visual highlighting in the textarea is needed in the future, refer to previous implementations

// prior to this change for guidance.

// kilocode_change end

Copilot · 2025-10-09T22:22:18Z

src/extension.ts

+			try {
+				await BridgeOrchestrator.disconnect()
+			} catch (error) {
+				cloudLogger(
+					`[authStateChangedHandler] BridgeOrchestrator.disconnect() failed: ${error instanceof Error ? error.message : String(error)}`,
+				)
+			}


This code block appears to be unrelated to the PR's purpose and should be marked with kilocode_change comments according to the project's merge guidelines.

Copilot · 2025-10-09T22:22:18Z

packages/build/src/__tests__/index.test.ts

 						command: "roo-code-nightly.plusButtonClicked",
 						title: "%command.newTask.title%",
-						icon: "$(edit)",
+						icon: "$(add)",


This icon change from 'edit' to 'add' appears unrelated to the PR's context functionality and should be marked with kilocode_change comments.

nickchomey · 2025-10-09T22:25:06Z

I'm done with this - ive wasted far too much time fighting blindly with all of this and it isnt at all worth me investing time to learn the intricacies of vs code extension and kilocode.

Right click in explorer context menu works now. But i couldnt get a multiselect working for editor tabs. I just left it as-is.

NaccOll · 2025-10-09T23:51:59Z

If I try to plan a task, I need to enter it twice: once to reference the file, and again to instruct LLM on the order in which to read the file.

Is it possible to still keep the file reference in the text box? Don't remove it from chat text box

nickchomey · 2025-10-10T00:52:22Z

I hadn't considered anything like that. Copilot and Augment Code just behave like I have implemented here.

I absolutely loathe having the filenames in the text area, at least when they're just a jumbled mess at the top, as would happen if you drag and drop many, or Add Open Editors. Especially when it is a full filepath.

Though I can somewhat see it being more palatable if the files are interspersed through the prompt, presumably associated with some specific text.

I cant see how it would be anything but very problematic to have the file in both the bar AND the text area. So, might the following be a sufficient compromise?

For single file/folder additions with @ just add it to the text area, as normal.

For multiple files dragged in or added with Add Open Editors, add them as pills in the bar and don't put the name/path in the text area?

Yet, does it really matter to the LLM where the filename is in the message? Can you share an example of a prompt where you find that to be important?

NaccOll · 2025-10-10T01:01:59Z

When I use an agent, I usually specify which files are reference files and which are working files. This allows the LLM to more accurately understand which files are allowed to be edited.

If I delete the file name from the chat text box when referencing a file, I need to enter it again, which results in extra work.

I looked up upstream and found a similar implementation, but it will take a long time to be merged. See RooCodeInc/Roo-Code#8192

nickchomey · 2025-10-10T01:07:33Z

Ugh, annoying that there's already an implementation (that is probably better than what I've done)...

I like the way that looks/works, but my concerns still stand regarding bulk attaching files.

I'm happy to let that more talented and motivated person push this through. Perhaps I'll comment there about what I've done here and see if we can find a mutually agreeable implementation for it all.

What do you think?

NaccOll · 2025-10-10T01:23:53Z

I'm used to the current reference method, although it's a bit cumbersome to delete and the path is a bit long. I commented on your PR mainly because it disrupts my workflow. The upstream implementation has stronger compatibility.

But waiting for it to be merged upstream will take a lot of time, maybe you can implement this feature in Kilo first. See if you have the extra time to make it work.

nickchomey · 2025-10-10T11:03:55Z

to make it work

Again, I'm quite open to feedback as to how to do this in a way that satisfies everyone's goals. Do you have any thoughts about what I said above, or other ideas?

Copilot AI review requested due to automatic review settings October 9, 2025 16:22

Copilot AI reviewed Oct 9, 2025

View reviewed changes

nickchomey marked this pull request as draft October 9, 2025 16:28

add context bar with button to remove files, @ menu option to add all…

1364316

… open files/editors

nickchomey force-pushed the contextBar-AllOpenFiles branch from 62f65d9 to 1364316 Compare October 9, 2025 16:41

nickchomey marked this pull request as ready for review October 9, 2025 16:42

nickchomey requested a review from Copilot October 9, 2025 16:44

Copilot AI reviewed Oct 9, 2025

View reviewed changes

webview-ui/src/components/chat/ChatTextArea.tsx Show resolved Hide resolved

webview-ui/src/components/chat/ChatTextArea.tsx Outdated Show resolved Hide resolved

webview-ui/src/components/chat/ChatView.tsx Outdated Show resolved Hide resolved

nickchomey and others added 2 commits October 9, 2025 10:47

Update webview-ui/src/components/chat/ChatTextArea.tsx

d1f0ef2

Co-authored-by: Copilot <[email protected]>

create isValidMention utility function

926f2cf

Co-authored-by: Copilot <[email protected]>

fix test

ad71869

nickchomey force-pushed the contextBar-AllOpenFiles branch from 340fd27 to 5c2cff7 Compare October 9, 2025 18:25

nickchomey requested a review from Copilot October 9, 2025 18:25

Copilot AI reviewed Oct 9, 2025

View reviewed changes

webview-ui/src/components/chat/ChatView.tsx Show resolved Hide resolved

webview-ui/src/components/chat/ChatTextArea.tsx Show resolved Hide resolved

nickchomey added 2 commits October 9, 2025 18:33

fix other tests

01d63fa

fix missing early return

c473e40

nickchomey force-pushed the contextBar-AllOpenFiles branch from 5c2cff7 to c473e40 Compare October 9, 2025 18:33

nickchomey requested a review from Copilot October 9, 2025 18:34

Copilot AI reviewed Oct 9, 2025

View reviewed changes

nickchomey and others added 4 commits October 9, 2025 12:38

dont call trim twice

18e3f4d

Co-authored-by: Copilot <[email protected]>

dont call trim twice

5de9c8b

Co-authored-by: Copilot <[email protected]>

dont call trim twice

a1cef81

Co-authored-by: Copilot <[email protected]>

extract isvalidmention from component

3bd1a63

nickchomey requested a review from Copilot October 9, 2025 18:43

Copilot AI reviewed Oct 9, 2025

View reviewed changes

move close x button to left side so can more rapidly remove pills

2a874e1

nickchomey force-pushed the contextBar-AllOpenFiles branch from 163b2c3 to 2a874e1 Compare October 9, 2025 19:16

add right click to add to context from file explore - supports multis…

b60c305

…elect

nickchomey requested a review from Copilot October 9, 2025 22:21

Copilot AI reviewed Oct 9, 2025

View reviewed changes

add context bar with button to remove files, @ menu option to add all… #2880

Are you sure you want to change the base?

add context bar with button to remove files, @ menu option to add all… #2880

Uh oh!

Conversation

nickchomey commented Oct 9, 2025

Context

Implementation

Screenshots

How to Test

Get in Touch

Uh oh!

changeset-bot bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

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!

nickchomey commented Oct 9, 2025

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!

nickchomey commented Oct 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

changeset-bot bot commented Oct 9, 2025 •

edited

Loading

nickchomey commented Oct 9, 2025 •

edited

Loading

nickchomey commented Oct 10, 2025 •

edited

Loading