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.

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>
 							))}

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()
+	})
+})