From 6076d3b12cffa124a40507f2386ed7602abed1cb Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Fri, 8 May 2026 11:56:37 +0000
Subject: [PATCH] feat: add red styling to denied commands in settings UI

Denied command tags in the Auto Approve settings now use red font
color and a subtle red background tint (bg-red-500/20 text-red-500)
to visually distinguish them from allowed commands. This matches the
existing red styling pattern used in CommandPatternSelector.

Addresses feedback from Issue #12292.
---
 .../settings/AutoApproveSettings.tsx          |  3 +-
 .../settings/__tests__/SettingsView.spec.tsx  | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/webview-ui/src/components/settings/AutoApproveSettings.tsx b/webview-ui/src/components/settings/AutoApproveSettings.tsx
index 40e1658f5fd..6f97db53a30 100644
--- a/webview-ui/src/components/settings/AutoApproveSettings.tsx
+++ b/webview-ui/src/components/settings/AutoApproveSettings.tsx
@@ -372,6 +372,7 @@ export const AutoApproveSettings = ({
 								<Button
 									key={index}
 									variant="secondary"
+									className="bg-red-500/20 text-red-500 hover:bg-red-500/30"
 									data-testid={`remove-denied-command-${index}`}
 									onClick={() => {
 										const newCommands = (deniedCommands ?? []).filter((_, i) => i !== index)
@@ -384,7 +385,7 @@ export const AutoApproveSettings = ({
 									}}>
 									<div className="flex flex-row items-center gap-1">
 										<div>{cmd}</div>
-										<X className="text-foreground scale-75" />
+										<X className="text-red-500 scale-75" />
 									</div>
 								</Button>
 							))}
diff --git a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
index 6fa34ebe815..a87dd39b3d2 100644
--- a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
+++ b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
@@ -714,3 +714,65 @@ describe("SettingsView - Duplicate Commands", () => {
 		)
 	})
 })
+
+describe("SettingsView - Denied Commands", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("renders denied commands with red styling", () => {
+		const { activateTab, getSettingsContent } = renderSettingsView()
+
+		// Activate the autoApprove tab
+		activateTab("autoApprove")
+
+		const content = getSettingsContent()
+		// Enable always allow execute to show command sections
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
+		fireEvent.click(executeCheckbox)
+
+		// Add a denied command
+		const deniedInput = within(content).getByTestId("denied-command-input")
+		fireEvent.change(deniedInput, { target: { value: "rm -rf" } })
+		const addDeniedButton = within(content).getByTestId("add-denied-command-button")
+		fireEvent.click(addDeniedButton)
+
+		// Verify the denied command button has red styling classes
+		const deniedButton = within(content).getByTestId("remove-denied-command-0")
+		expect(deniedButton).toHaveClass("bg-red-500/20", "text-red-500")
+	})
+
+	it("adds and removes denied commands", () => {
+		const { activateTab, getSettingsContent } = renderSettingsView()
+
+		activateTab("autoApprove")
+
+		const content = getSettingsContent()
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
+		fireEvent.click(executeCheckbox)
+
+		// Add a denied command
+		const deniedInput = within(content).getByTestId("denied-command-input")
+		fireEvent.change(deniedInput, { target: { value: "rm" } })
+		const addDeniedButton = within(content).getByTestId("add-denied-command-button")
+		fireEvent.click(addDeniedButton)
+
+		// Verify command was added
+		expect(within(content).getByText("rm")).toBeInTheDocument()
+
+		// Verify VSCode message was sent
+		expect(vscode.postMessage).toHaveBeenCalledWith({
+			type: "updateSettings",
+			updatedSettings: {
+				deniedCommands: ["rm"],
+			},
+		})
+
+		// Remove the denied command
+		const removeButton = within(content).getByTestId("remove-denied-command-0")
+		fireEvent.click(removeButton)
+
+		// Verify command was removed
+		expect(within(content).queryByTestId("remove-denied-command-0")).not.toBeInTheDocument()
+	})
+})