feat: add 'Add and Run' button for allowed commands (#5290) #5322

hannesrudolph · 2025-07-01T22:12:36Z

Description

This PR implements the "Add and Run" button feature that allows users to quickly add commands from code blocks to their allowed commands list.

⚠️ Draft Status - UI Improvements Needed

This PR is currently in draft because I believe the UI implementation could be improved. While the functionality works as specified, I have concerns about:

Button placement: The button appears on hover over code blocks, which might not be the most intuitive UX
Visual design: The button styling could be better integrated with the existing UI
User flow: Automatically switching to the Settings view might be jarring for users

I would appreciate feedback on these UI/UX aspects before finalizing the implementation.

Changes Made

Added new "Add and Run" button that appears when hovering over code blocks containing commands
Implemented command extraction logic to parse commands from code blocks
Added automatic navigation to Settings view after adding commands
Created comprehensive test coverage for the new functionality
Updated all locale files with new translation keys
Added utility function extractCommandPatterns to handle command parsing

Testing

All existing tests pass
Added new test file ChatView.addAndRun.spec.tsx for the button functionality
Added new test file SettingsView.allowedCommands.spec.tsx for settings integration
Added tests for the command extraction utility
Manual testing completed:
- Button appears on hover over code blocks
- Commands are correctly extracted and added
- Settings view updates properly
- Multiple commands can be added at once

Verification of Acceptance Criteria

"Add and Run" button appears when hovering over code blocks with commands
Button extracts commands from the code block content
Commands are added to the allowed commands list
User is automatically navigated to Settings view
Settings view shows the newly added commands
Feature works with multiple commands in a single code block

Screenshots/Demo

(Note: Screenshots would be added here showing the button in action, but as this is a draft, I'm focusing on getting feedback first)

Checklist

Code follows project style guidelines
Self-review completed
Comments added for complex logic
Documentation updated (if needed)
No breaking changes
All tests passing
UI/UX review needed (reason for draft status)

Next Steps

I'm looking for feedback on:

Better UI placement for the "Add and Run" button
Whether automatic navigation to Settings is the right approach
Any other UX improvements that would make this feature more intuitive

Once we agree on the UI approach, I'll update the implementation accordingly.

Important

Adds 'Add and Run' button for commands in code blocks, enabling users to add commands to an allowed list and execute them, with comprehensive testing and UI updates.

Behavior:
- Adds 'Add and Run' button to code blocks for commands, allowing users to add commands to allowed list and execute them.
- Automatically navigates to Settings view after adding commands.
Command Extraction:
- Implements extractCommandPattern and getPatternDescription in extract-command-pattern.ts for parsing command patterns.
Testing:
- Adds tests in extract-command-pattern.spec.ts for command pattern extraction and description.
- Adds UI tests in ChatView.addAndRun.spec.tsx and SettingsView.allowedCommands.spec.tsx for button functionality and settings integration.
UI/UX:
- Button appears on hover over code blocks.
- Updates locale files with new translation keys for the button.

^{This description was created by}^{for f8f49dd. You can customize this summary. It will automatically update as commits are pushed.}

delve-auditor · 2025-07-01T22:14:06Z

✅ No security or compliance issues detected. Reviewed everything up to 3e5cc31.

Security Overview

🔎 Scanned files: 29 changed file(s)

Detected Code Changes

The diff is too large to display a summary of code changes.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

Copilot

Pull Request Overview

This PR adds an "Add and Run" button to chat command blocks, enabling users to whitelist and execute commands in one step.

Introduces extractCommandPattern utility to generalize commands for whitelisting
Adds a tertiary button in ChatView for the new feature and updates handling logic
Extends settings and message handler to sync allowed commands and add i18n entries

Reviewed Changes

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

File	Description
webview-ui/src/utils/extract-command-pattern.ts	New utility to extract patterns from commands
webview-ui/src/components/chat/ChatView.tsx	UI and logic for three-button "Add & Run" mode
webview-ui/src/components/settings/SettingsView.tsx	Sync external updates to allowed commands in settings
src/core/webview/webviewMessageHandler.ts	Handle `allowedCommands` messages and post state

Copilot · 2025-07-01T22:51:07Z

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

+							setTertiaryButtonText(undefined)
+							setTertiaryButtonText(undefined)
+							setTertiaryButtonText(undefined)


Duplicate calls to setTertiaryButtonText(undefined) can be consolidated into a single statement to reduce redundancy.

Suggested change

setTertiaryButtonText(undefined)

setTertiaryButtonText(undefined)

setTertiaryButtonText(undefined)

Copilot · 2025-07-01T22:51:07Z

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

+						// Three button mode - this shouldn't be called
+						console.warn("Secondary button clicked in three-button command mode")


In three-button command mode, the secondary button (Reject) logs a warning and does not send the noButtonClicked message. Replace this warning with logic to send the reject response so the button actually works.

Suggested change

// Three button mode - this shouldn't be called

console.warn("Secondary button clicked in three-button command mode")

// Three button mode - send reject response

vscode.postMessage({ type: "askResponse", askResponse: "reject" })

setInputValue("")

setSelectedImages([])

Copilot · 2025-07-01T22:51:08Z

webview-ui/src/components/settings/SettingsView.tsx

+	// Update cached state when allowedCommands changes from external sources (e.g., "Add & Run")
+	useEffect(() => {
+		// Only update if the allowedCommands have actually changed
+		if (JSON.stringify(cachedState.allowedCommands) !== JSON.stringify(extensionState.allowedCommands)) {


Using JSON.stringify for deep comparison on every state update may be inefficient for larger command lists. Consider using a dedicated deep-equality check or memoized comparison to improve performance.

daniel-lxs · 2025-07-02T00:08:55Z

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

+												appearance="secondary"
+												disabled={!enableButtons}
+												className="flex-1"
+												onClick={() => handleTertiaryButtonClick(inputValue, selectedImages)}>


I noticed the button click handlers appear to be swapped. The "Add & Run" button (which displays secondaryButtonText) is calling handleTertiaryButtonClick, while the "Reject" button (displaying tertiaryButtonText) calls handleSecondaryButtonClick.

This mismatch is likely the root cause of why the Reject button only logs a warning instead of working properly. Should these handlers be aligned with their button labels for clarity?

Makes sense.

daniel-lxs · 2025-07-02T00:09:05Z

src/core/assistant-message/presentAssistantMessage.ts

+									.update("allowedCommands", updatedCommands, vscode.ConfigurationTarget.Global)
+
+								// Post state update to webview
+								await provider.postStateToWebview()


The PR description mentions "automatic navigation to Settings view after adding commands," but I don't see any navigation logic here - only state updates via postStateToWebview(). Was the automatic navigation feature intentionally removed, or should it be implemented?

If navigation is desired, you might need to send a specific message to trigger the Settings view.

daniel-lxs · 2025-07-02T00:09:25Z

webview-ui/src/utils/extract-command-pattern.ts

+		// This might be an environment variable like NODE_ENV=production
+		const envMatch = baseCommand.match(/^([A-Z_]+)=/)
+		if (envMatch) {
+			// Don't include the value, just the variable name pattern


The current depth limit of 3 for chained commands might be too restrictive for legitimate use cases. For example, a common pattern like cat file.txt | grep pattern | sort | uniq | head -10 would exceed this limit.

While I understand the security concern about overly complex patterns, would it make sense to:

Increase the limit to 5 or 6?

Make it configurable?

Show a warning instead of truncating?

This could improve the user experience for developers who commonly use longer command pipelines.

Maybe the LLM could be coaxed to make more optimal commands with less chaining? When I handwrite oneliners like that I write it the same way, but the more optimal version takes only 3 chained commands grep pattern file.txt | sort -u | head -10

daniel-lxs · 2025-07-02T00:09:37Z

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

+												const pattern = extractCommandPattern(commandText)
+												const description = getPatternDescription(pattern)
+												return pattern
+													? `${t("chat:addAndRunCommand.tooltip")} Will whitelist: "${pattern}" (${description})`


The tooltip for complex command patterns could become quite long and difficult to read. For example: "Add command pattern to whitelist and run" Will whitelist: "npm run build:prod && npm run test:* && npm run deploy:*" (Runs npm build:prod, then any test script, then any deploy script)

Consider:

Truncating long patterns with ellipsis (e.g., show first 50 chars)

Using a multi-line tooltip format

Showing just the pattern without the description in the tooltip

Adding a "Show details" link that expands the full pattern

This would improve readability, especially on smaller screens.

The description is quite inane in most cases I tried, for instance with ls

(also I think the 'Will whitelist' part should be in the internationalized tooltip?)

markijbema · 2025-07-02T07:32:48Z

webview-ui/src/utils/extract-command-pattern.ts

+ * - "npm run build" -> "npm run"
+ * - "git commit -m 'message'" -> "git commit"
+ * - "echo 'hello world'" -> "echo"
+ * - "python script.py --arg value" -> "python"


I think this is dangerous; That I want to allow script a.py typically does not mean I want to execute b.py; to me that's if I allow one executable I allow all of them

markijbema · 2025-07-02T07:34:34Z

webview-ui/src/utils/extract-command-pattern.ts

+ * - "echo 'hello world'" -> "echo"
+ * - "python script.py --arg value" -> "python"
+ * - "./scripts/deploy.sh production" -> "./scripts/deploy.sh"
+ * - "cd /path/to/dir && npm install" -> "cd * && npm install"


I think this is dangerous, as it would also allow cd ../; I would propose something like cd ./* only, or maybe combined with Kilo-Org/kilocode#770

markijbema · 2025-07-02T07:35:00Z

webview-ui/src/utils/extract-command-pattern.ts

+ * - "python script.py --arg value" -> "python"
+ * - "./scripts/deploy.sh production" -> "./scripts/deploy.sh"
+ * - "cd /path/to/dir && npm install" -> "cd * && npm install"
+ * - "rm -rf node_modules" -> "rm"


I think in this specific example I'd prefer the exact rm command; I would never fully whitelist rm

mrubens · 2025-07-02T11:17:53Z

Converted this one to draft while we discuss

markijbema · 2025-07-02T14:18:08Z

ok, some thoughts:

I still think a tooltip is to obscure, what you add should be on the screen
I think the interface draws very much towards the normal execution, and new button feels quite muted, personally I'd give it more focus (but this might also be a philosophy difference between Roo & Kilo)
Should there be a ban-list for commands; or should certain commands have a safer stripping? When I run ruby -v it adds ruby but that means it can now run arbitrary ruby code using ruby -e .
I think the placement of the button is potentially risky. If the grey button to the right is always reject except for commands people might accidentally use it

But my most burning question is why you decided to switch away from the LLM approach

- Added new 'Add and Run' button in ChatView that appears when hovering over code blocks containing allowed commands - Button extracts commands from code blocks and adds them to allowed commands list - Automatically switches to Settings view after adding commands - Added comprehensive test coverage for the new functionality - Updated all locale files with new translation keys - Added utility function to extract command patterns from code blocks This implementation allows users to quickly add commands from AI responses to their allowed commands list with a single click.

- Fix npm/yarn/pnpm commands with additional arguments to avoid overly broad wildcards - Improve handling of chained commands with proper quote-aware parsing - Add security limits for deeply nested command chains - Enhance detection of command injection patterns - Update tests to reflect more secure pattern extraction behavior This addresses the critical security issue where commands like 'npm run build:prod -- --env=production' were creating patterns that were too permissive.

- Remove three-button layout (Run, Add & Run, Reject) - Implement two-row design with Run Command/Reject buttons on top - Add pattern display and 'Always allow' button on bottom row - 'Always allow' only whitelists the pattern without running it - Remove addAndRunButtonClicked handling from backend - Add new addToWhitelist message type and handler - Update translations for new UI elements - Remove obsolete tests for old Add & Run functionality

- Modified addToWhitelist handler to trigger command execution after whitelisting - Fixes issue where chat was stuck after clicking 'Always allow' - Command now gets whitelisted AND executed in one action

…4398) (#5404) * fix: add embedder validation to prevent misleading status indicators (#4398) * fix: address PR feedback and fix critical issues - Fixed settings-save flow to save before validation - Fixed Error constructor usage in scanner.ts - Fixed segment identification in file-watcher.ts - Added missing translation keys for embedder validation errors * fix: add missing Ollama translation keys - Added missing ollama.title, description, and settings keys - Fixed translation check failure in CI/CD pipeline - Synchronized all 17 non-English locale files * feat: add proactive embedder validation on provider switch - Validate embedder connection when switching providers - Prevent misleading 'Indexed' status when embedder is unavailable - Show immediate error feedback for invalid configurations - Add comprehensive test coverage for validation flow This ensures users get immediate feedback when configuring embedders, preventing confusion when providers like Ollama are not accessible. * fix: improve error handling and validation in code indexing process * refactor: extract common embedder validation and error handling logic - Created shared/validation-helpers.ts with centralized error handling utilities - Refactored OpenAI, OpenAI-Compatible, and Ollama embedders to use shared helpers - Eliminated duplicate error handling code across embedders - Improved maintainability and consistency of error handling - Fixed test compatibility in manager.spec.ts - All 2721 tests passing * refactor: simplify validation helpers by removing unnecessary wrapper functions - Removed getErrorMessageForConnectionError and inlined logic into handleValidationError - Removed isRateLimitError, logRateLimitRetry, and logEmbeddingError wrapper functions - Updated openai.ts and openai-compatible.ts to inline rate limit checking and logging - Reduced code complexity while maintaining all functionality - All 311 tests continue to pass * fix: add missing invalidResponse i18n key and fix French translation - Added missing 'invalidResponse' key to all locale files - Fixed French translation: changed 'and accessible' to 'et accessible' - Ensures proper error messages are displayed when embedder returns invalid responses * fix: restore removed score settings in webviewMessageHandler - Restored codebaseIndexSearchMaxResults and codebaseIndexSearchMinScore settings that were unintentionally removed - Keep embedder validation related changes * fix: revert unintended changes to file-watcher and scanner - Reverted point ID generation back to using line numbers instead of segmentHash - Restored { cause: deleteError } parameter in scanner error handling - These changes were unrelated to the embedder validation feature --------- Co-authored-by: Daniel Riccio <[email protected]>

….com/RooCodeInc/Roo-Code into feat/issue-5290-add-and-run-commands

- Remove 'Always Allow' button from initial command approval dialog - Add integrated whitelist functionality to CommandExecution component - Implement collapsible 'Add to Allowed Auto-Execute Commands' section - Support granular command patterns for npm and other commands - Handle chained commands with individual checkboxes - Update extractCommandPattern to avoid wildcards for better control - Add comprehensive tests for command pattern extraction

hannesrudolph · 2025-07-08T22:24:32Z

Closing this draft in favour of a new implementation outlined in #5480

hannesrudolph · 2025-07-08T22:25:04Z

@markijbema going with the LLM approach

github-project-automation bot moved this to New in Roo Code Roadmap Jul 1, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Jul 1, 2025

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Jul 1, 2025

hannesrudolph mentioned this pull request Jul 1, 2025

Add 'Add & Run' button to command approval UI for streamlined whitelisting #5290

Closed

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jul 1, 2025

hannesrudolph force-pushed the feat/issue-5290-add-and-run-commands branch from 19417f9 to f8f49dd Compare July 1, 2025 22:48

hannesrudolph marked this pull request as ready for review July 1, 2025 22:49

Copilot AI review requested due to automatic review settings July 1, 2025 22:49

hannesrudolph requested review from cte, jr and mrubens as code owners July 1, 2025 22:49

dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Jul 1, 2025

hannesrudolph moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Jul 1, 2025

dosubot bot added enhancement New feature or request UI/UX UI/UX related or focused labels Jul 1, 2025

Copilot AI reviewed Jul 1, 2025

View reviewed changes

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Jul 1, 2025

daniel-lxs reviewed Jul 2, 2025

View reviewed changes

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Changes Requested] in Roo Code Roadmap Jul 2, 2025

hannesrudolph added PR - Changes Requested and removed PR - Needs Preliminary Review labels Jul 2, 2025

markijbema reviewed Jul 2, 2025

View reviewed changes

markijbema mentioned this pull request Jul 2, 2025

add option to auto approve command from now on Kilo-Org/kilocode#940

Closed

mrubens marked this pull request as draft July 2, 2025 11:17

daniel-lxs moved this from PR [Changes Requested] to PR [Draft / In Progress] in Roo Code Roadmap Jul 2, 2025

hannesrudolph added PR - Draft / In Progress and removed PR - Changes Requested labels Jul 2, 2025

hannesrudolph added 2 commits July 7, 2025 12:54

hannesrudolph force-pushed the feat/issue-5290-add-and-run-commands branch from f8f49dd to d2a0390 Compare July 7, 2025 18:54

hannesrudolph added 6 commits July 7, 2025 13:04

fix: add missing vscode.window mock to fix test failures

53bb163

feat: add translations for alwaysAllow button

c58268b

fix: execute command after whitelisting with 'Always allow' button

c43927b

- Modified addToWhitelist handler to trigger command execution after whitelisting - Fixes issue where chat was stuck after clicking 'Always allow' - Command now gets whitelisted AND executed in one action

fix: remove extra margin causing spacing issue in command approval UI

40b4175

fix: add bottom padding to button container for proper spacing

961b409

hannesrudolph self-assigned this Jul 7, 2025

hannesrudolph and others added 8 commits July 7, 2025 18:46

Remove warning about writing not being allowed (#5461)

08a0c89

fix typescript compiler watch path inconsistency (#5155)

edce187

Make the prompts editable now (#5359)

a9a87c2

Remove modifier checks from prompt history navigation (#5467)

6ab57fa

Add a hint about using todos for complicated tasks (#5473)

32ce45d

Merge branch 'feat/issue-5290-add-and-run-commands' of https://github…

69ac7ec

….com/RooCodeInc/Roo-Code into feat/issue-5290-add-and-run-commands

hannesrudolph closed this Jul 8, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Jul 8, 2025

github-project-automation bot moved this from PR [Draft / In Progress] to Done in Roo Code Roadmap Jul 8, 2025

Triquetra mentioned this pull request Jul 10, 2025

Ability to turn on/off MCP servers per mode Kilo-Org/kilocode#1227

Closed

	setTertiaryButtonText(undefined)
	setTertiaryButtonText(undefined)
	setTertiaryButtonText(undefined)

		// Three button mode - this shouldn't be called
		console.warn("Secondary button clicked in three-button command mode")

-						// Three button mode - this shouldn't be called
-						console.warn("Secondary button clicked in three-button command mode")
+						// Three button mode - send reject response
+						vscode.postMessage({ type: "askResponse", askResponse: "reject" })
+						setInputValue("")
+						setSelectedImages([])

feat: add 'Add and Run' button for allowed commands (#5290) #5322

feat: add 'Add and Run' button for allowed commands (#5290) #5322

Uh oh!

Conversation

hannesrudolph commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

⚠️ Draft Status - UI Improvements Needed

Changes Made

Testing

Verification of Acceptance Criteria

Screenshots/Demo

Checklist

Next Steps

Uh oh!

delve-auditor bot commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mrubens commented Jul 2, 2025

Uh oh!

markijbema commented Jul 2, 2025

Uh oh!

hannesrudolph commented Jul 8, 2025

Uh oh!

hannesrudolph commented Jul 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hannesrudolph commented Jul 1, 2025 •

edited

Loading

delve-auditor bot commented Jul 1, 2025 •

edited

Loading