feat: Add terminal command permissions UI to chat interface (#5480)

[hannesrudolph]

Related GitHub Issue

Closes: #5480

Roo Code Task Context (Optional)

N/A

Description

This PR implements an interactive UI component for managing terminal command permissions directly from the chat interface. The implementation includes:

Key Implementation Details:

• Created CommandPatternSelector component that displays command patterns with allow/deny toggle buttons
• Integrated pattern extraction using the shell-quote library to handle complex shell syntax (pipes, chains, redirects)
• Added pattern extraction logic that generates human-readable descriptions for common command patterns
• Implemented state synchronization between UI and VSCode extension state for persistence
• Added comprehensive test coverage (61 tests) for all new components and utilities

Design Choices:

• Used collapsible UI section to avoid cluttering the command execution display
• Implemented mutual exclusivity between allow/deny lists to prevent conflicts
• Prioritized AI-suggested patterns when available, falling back to programmatic extraction
• Used VSCode theme variables for consistent appearance across different themes

Translation Updates:

• Added new translation keys to all 17 supported languages for the command permissions UI
• All translations follow the project's localization guidelines

Areas for Review Focus:

• Pattern extraction logic in commandPatterns.ts - ensures proper handling of complex shell commands
• State management integration in CommandExecution.tsx - verifies proper synchronization
• UI/UX of the CommandPatternSelector component - accessibility and usability

Test Procedure

Unit Tests Added:

• commandPatterns.spec.ts (32 tests) - Tests pattern extraction, AI suggestion parsing, and edge cases
• CommandPatternSelector.spec.tsx (13 tests) - Tests UI interactions, state management, and accessibility
• CommandExecution.spec.tsx (16 tests) - Tests integration and message posting

Manual Testing Steps:

1. Open Roo Code in VSCode
2. Execute a terminal command in the chat (e.g., npm install express)
3. Click "Manage Command Permissions" in the command execution block
4. Verify patterns are extracted correctly (e.g., npm, npm install)
5. Click ✓ to add a pattern to the allowed list
6. Click ✗ to add a pattern to the denied list
7. Toggle patterns between states and verify visual feedback
8. Check that changes persist across sessions
9. Verify integration with existing settings UI

Test Results:

• All 61 unit tests pass
• Manual testing verified all acceptance criteria
• Minor lint warnings found but don't affect functionality

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

[Screenshots to be added showing the command permissions UI in action]

Documentation Updates

• No documentation updates are required.
• Yes, documentation updates are required. (Please describe what needs to be updated or link to a PR in the docs repository).

Additional Notes

This feature enhances the user experience by providing a more intuitive way to manage command permissions without navigating to settings. The implementation follows all existing patterns in the codebase and maintains backward compatibility with the existing permission system.

Get in Touch

[Your Discord username]

---

Important

Adds a UI component for managing terminal command permissions in the chat interface with pattern extraction and state synchronization.

• Behavior:
  • Adds CommandPatternSelector component in CommandExecution.tsx for managing command permissions with allow/deny toggles.
  • Implements pattern extraction using shell-quote in command-parser.ts to handle complex shell syntax.
  • Synchronizes state between UI and VSCode extension for persistence.
• Tests:
  • Adds 61 tests across commandPatterns.spec.ts, CommandPatternSelector.spec.tsx, and CommandExecution.spec.tsx.
• Translations:
  • Updates translation keys in 17 languages for command permissions UI.
• Misc:
  • Adds extractPatternsFromCommand() function in command-parser.ts for pattern extraction.
  • Minor UI/UX improvements in CommandPatternSelector.tsx.

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

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to 47259df.

Security Overview

• 🔎 Scanned files: 24 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.

[daniel-lxs]

@roomote-agent Use the switch_mode tool to switch to pr-fixer and address the reviews on this PR, commit the changes to this PR, do not create a new one

[daniel-lxs]

@roomote-agent Use the switch_mode tool to switch to pr-fixer and address the reviews on this PR, commit the changes to this PR, do not create a new one

[daniel-lxs]

LGTM