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

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

@@ -6,13 +6,21 @@ import { CommandExecutionStatus, commandExecutionStatusSchema } from "@roo-code/
 
 import { ExtensionMessage } from "@roo/ExtensionMessage"
 import { safeJsonParse } from "@roo/safeJsonParse"
+
 import { COMMAND_OUTPUT_STRING } from "@roo/combineCommandSequences"
 
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { cn } from "@src/lib/utils"
 import { Button } from "@src/components/ui"
 import CodeBlock from "../common/CodeBlock"
+import { CommandPatternSelector } from "./CommandPatternSelector"
+import { extractPatternsFromCommand } from "../../utils/command-parser"
+
+interface CommandPattern {
+	pattern: string
+	description?: string
+}
 
 interface CommandExecutionProps {
 	executionId: string
@@ -22,7 +30,13 @@ interface CommandExecutionProps {
 }
 
 export const CommandExecution = ({ executionId, text, icon, title }: CommandExecutionProps) => {
-	const { terminalShellIntegrationDisabled = false } = useExtensionState()
+	const {
+		terminalShellIntegrationDisabled = false,
+		allowedCommands = [],
+		deniedCommands = [],
+		setAllowedCommands,
+		setDeniedCommands,
+	} = useExtensionState()
 
 	const { command, output: parsedOutput } = useMemo(() => parseCommandAndOutput(text), [text])
 
@@ -37,6 +51,37 @@ export const CommandExecution = ({ executionId, text, icon, title }: CommandExec
 	// streaming output (this is the case for running commands).
 	const output = streamingOutput || parsedOutput
 
+	// Extract command patterns from the actual command that was executed
+	const commandPatterns = useMemo<CommandPattern[]>(() => {
+		const extractedPatterns = extractPatternsFromCommand(command)
+		return extractedPatterns.map((pattern) => ({
+			pattern,
+		}))
+	}, [command])
+
+	// Handle pattern changes
+	const handleAllowPatternChange = (pattern: string) => {
+		const isAllowed = allowedCommands.includes(pattern)
+		const newAllowed = isAllowed ? allowedCommands.filter((p) => p !== pattern) : [...allowedCommands, pattern]
+		const newDenied = deniedCommands.filter((p) => p !== pattern)
+
+		setAllowedCommands(newAllowed)
+		setDeniedCommands(newDenied)
+		vscode.postMessage({ type: "allowedCommands", commands: newAllowed })
+		vscode.postMessage({ type: "deniedCommands", commands: newDenied })
+	}
+
+	const handleDenyPatternChange = (pattern: string) => {
+		const isDenied = deniedCommands.includes(pattern)
+		const newDenied = isDenied ? deniedCommands.filter((p) => p !== pattern) : [...deniedCommands, pattern]
+		const newAllowed = allowedCommands.filter((p) => p !== pattern)
+
+		setAllowedCommands(newAllowed)
+		setDeniedCommands(newDenied)
+		vscode.postMessage({ type: "allowedCommands", commands: newAllowed })
+		vscode.postMessage({ type: "deniedCommands", commands: newDenied })
+	}
+
 	const onMessage = useCallback(
 		(event: MessageEvent) => {
 			const message: ExtensionMessage = event.data
@@ -121,9 +166,21 @@ export const CommandExecution = ({ executionId, text, icon, title }: CommandExec
 				</div>
 			</div>
 
-			<div className="w-full bg-vscode-editor-background border border-vscode-border rounded-xs p-2">
-				<CodeBlock source={command} language="shell" />
-				<OutputContainer isExpanded={isExpanded} output={output} />
+			<div className="w-full bg-vscode-editor-background border border-vscode-border rounded-xs">
+				<div className="p-2">
+					<CodeBlock source={command} language="shell" />
+					<OutputContainer isExpanded={isExpanded} output={output} />
+				</div>
+				{command && command.trim() && (
+					<CommandPatternSelector
+						command={command}
+						patterns={commandPatterns}
+						allowedCommands={allowedCommands}
+						deniedCommands={deniedCommands}
+						onAllowPatternChange={handleAllowPatternChange}
+						onDenyPatternChange={handleDenyPatternChange}
+					/>
+				)}
 			</div>
 		</>
 	)

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

@@ -0,0 +1,183 @@
+import React, { useState, useMemo } from "react"
+import { Check, ChevronDown, Info, X } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { useTranslation, Trans } from "react-i18next"
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { StandardTooltip } from "../ui/standard-tooltip"
+
+interface CommandPattern {
+	pattern: string
+	description?: string
+}
+
+interface CommandPatternSelectorProps {
+	command: string
+	patterns: CommandPattern[]
+	allowedCommands: string[]
+	deniedCommands: string[]
+	onAllowPatternChange: (pattern: string) => void
+	onDenyPatternChange: (pattern: string) => void
+}
+
+export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
+	command,
+	patterns,
+	allowedCommands,
+	deniedCommands,
+	onAllowPatternChange,
+	onDenyPatternChange,
+}) => {
+	const { t } = useTranslation()
+	const [isExpanded, setIsExpanded] = useState(false)
+	const [editingStates, setEditingStates] = useState<Record<string, { isEditing: boolean; value: string }>>({})
+
+	// Create a combined list with full command first, then patterns
+	const allPatterns = useMemo(() => {
+		const fullCommandPattern: CommandPattern = { pattern: command }
+
+		// Create a set to track unique patterns we've already seen
+		const seenPatterns = new Set<string>()
+		seenPatterns.add(command) // Add the full command first
+
+		// Filter out any patterns that are duplicates or are the same as the full command
+		const uniquePatterns = patterns.filter((p) => {
+			if (seenPatterns.has(p.pattern)) {
+				return false
+			}
+			seenPatterns.add(p.pattern)
+			return true
+		})
+
+		return [fullCommandPattern, ...uniquePatterns]
+	}, [command, patterns])
+
+	const getPatternStatus = (pattern: string): "allowed" | "denied" | "none" => {
+		if (allowedCommands.includes(pattern)) return "allowed"
+		if (deniedCommands.includes(pattern)) return "denied"
+		return "none"
+	}
+
+	const getEditState = (pattern: string) => {
+		return editingStates[pattern] || { isEditing: false, value: pattern }
+	}
+
+	const setEditState = (pattern: string, isEditing: boolean, value?: string) => {
+		setEditingStates((prev) => ({
+			...prev,
+			[pattern]: { isEditing, value: value ?? pattern },
+		}))
+	}
+
+	return (
+		<div className="border-t border-vscode-panel-border bg-vscode-sideBar-background/30">
+			<button
+				onClick={() => setIsExpanded(!isExpanded)}
+				className="w-full px-3 py-2 flex items-center justify-between hover:bg-vscode-list-hoverBackground transition-colors">
+				<div className="flex items-center gap-2">
+					<ChevronDown
+						className={cn("size-4 transition-transform", {
+							"-rotate-90": !isExpanded,
+						})}
+					/>
+					<span className="text-sm font-medium">{t("chat:commandExecution.manageCommands")}</span>
+					<StandardTooltip
+						content={
+							<div className="max-w-xs">
+								<Trans
+									i18nKey="chat:commandExecution.commandManagementDescription"
+									components={{
+										settingsLink: (
+											<VSCodeLink
+												href="command:workbench.action.openSettings?%5B%22roo-code%22%5D"
+												className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground"
+											/>
+										),
+									}}
+								/>
+							</div>
+						}>
+						<Info className="size-3.5 text-vscode-descriptionForeground" />
+					</StandardTooltip>
+				</div>
+			</button>
+
+			{isExpanded && (
+				<div className="px-3 pb-3 space-y-2">
+					{allPatterns.map((item) => {
+						const editState = getEditState(item.pattern)
+						const status = getPatternStatus(editState.value)
+
+						return (
+							<div key={item.pattern} className="ml-5 flex items-center gap-2">
+								<div className="flex-1">
+									{editState.isEditing ? (
+										<input
+											type="text"
+											value={editState.value}
+											onChange={(e) => setEditState(item.pattern, true, e.target.value)}
+											onBlur={() => setEditState(item.pattern, false)}
+											onKeyDown={(e) => {
+												if (e.key === "Enter") {
+													setEditState(item.pattern, false)
+												}
+												if (e.key === "Escape") {
+													setEditState(item.pattern, false, item.pattern)
+												}
+											}}
+											className="font-mono text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-2 py-1.5 w-full focus:outline-0 focus:ring-1 focus:ring-vscode-focusBorder"
+											placeholder={item.pattern}
+											autoFocus
+										/>
+									) : (
+										<div
+											onClick={() => setEditState(item.pattern, true)}
+											className="font-mono text-xs text-vscode-foreground cursor-pointer hover:bg-vscode-list-hoverBackground px-2 py-1.5 rounded transition-colors border border-transparent"
+											title="Click to edit pattern">
+											<span>{editState.value}</span>
+											{item.description && (
+												<span className="text-vscode-descriptionForeground ml-2">
+													- {item.description}
+												</span>
+											)}
+										</div>
+									)}
+								</div>
+								<div className="flex items-center gap-1">
+									<button
+										className={cn("p-1 rounded transition-all", {
+											"bg-green-500/20 text-green-500 hover:bg-green-500/30":
+												status === "allowed",
+											"text-vscode-descriptionForeground hover:text-green-500 hover:bg-green-500/10":
+												status !== "allowed",
+										})}
+										onClick={() => onAllowPatternChange(editState.value)}
+										aria-label={t(
+											status === "allowed"
+												? "chat:commandExecution.removeFromAllowed"
+												: "chat:commandExecution.addToAllowed",
+										)}>
+										<Check className="size-3.5" />
+									</button>
+									<button
+										className={cn("p-1 rounded transition-all", {
+											"bg-red-500/20 text-red-500 hover:bg-red-500/30": status === "denied",
+											"text-vscode-descriptionForeground hover:text-red-500 hover:bg-red-500/10":
+												status !== "denied",
+										})}
+										onClick={() => onDenyPatternChange(editState.value)}
+										aria-label={t(
+											status === "denied"
+												? "chat:commandExecution.removeFromDenied"
+												: "chat:commandExecution.addToDenied",
+										)}>
+										<X className="size-3.5" />
+									</button>
+								</div>
+							</div>
+						)
+					})}
+				</div>
+			)}
+		</div>
+	)
+}