auto approve UX improvements

Author: navedmerchant

packages/types/src/message.ts

@@ -272,6 +272,7 @@ export const clineMessageSchema = z.object({
 	isProtected: z.boolean().optional(),
 	apiProtocol: z.union([z.literal("openai"), z.literal("anthropic")]).optional(),
 	isAnswered: z.boolean().optional(),
+	autoApprovalDecision: z.union([z.literal("approve"), z.literal("deny")]).optional(),
 })
 
 export type ClineMessage = z.infer<typeof clineMessageSchema>

src/core/task/Task.ts

@@ -1185,6 +1185,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 		const state = provider ? await provider.getState() : undefined
 		const approval = await checkAutoApproval({ state, ask: type, text, isProtected })
 		const isAutoAnswered = approval.decision === "approve" || approval.decision === "deny"
+		const autoApprovalDecision = isAutoAnswered ? approval.decision : undefined
 
 		if (partial !== undefined) {
 			const lastMessage = this.clineMessages.at(-1)
@@ -1248,6 +1249,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 					lastMessage.isProtected = isProtected
 					if (isAutoAnswered) {
 						lastMessage.isAnswered = true
+						lastMessage.autoApprovalDecision = autoApprovalDecision
 					}
 					await this.saveClineMessages()
 					// Fire-and-forget: see updateClineMessage call above for the
@@ -1269,6 +1271,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 						text,
 						isProtected,
 						isAnswered: isAutoAnswered || undefined,
+						autoApprovalDecision,
 					})
 				}
 			}
@@ -1286,6 +1289,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 				text,
 				isProtected,
 				isAnswered: isAutoAnswered || undefined,
+				autoApprovalDecision,
 			})
 		}
 

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

@@ -72,6 +72,7 @@ import {
 	Split,
 	ArrowRight,
 	Check,
+	OctagonX,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PathTooltip } from "../ui/PathTooltip"
@@ -290,6 +291,14 @@ export const ChatRowContent = ({
 			case "mistake_limit_reached":
 				return [null, null] // These will be handled by ErrorRow component
 			case "command":
+				if (message.autoApprovalDecision === "deny") {
+					return [
+						<OctagonX className="size-4 text-vscode-errorForeground" aria-label="Denied command icon" />,
+						<span className="font-bold text-vscode-errorForeground">
+							{t("chat:commandExecution.denied")}
+						</span>,
+					]
+				}
 				return [
 					isCommandExecuting ? (
 						<ProgressIndicator />
@@ -1603,6 +1612,7 @@ export const ChatRowContent = ({
 							text={message.text}
 							icon={icon}
 							title={title}
+							isDenied={message.autoApprovalDecision === "deny"}
 						/>
 					)
 				case "use_mcp_server":

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

@@ -36,11 +36,13 @@ interface CommandExecutionProps {
 	text?: string
 	icon?: JSX.Element | null
 	title?: JSX.Element | null
+	isDenied?: boolean
 }
 
-export const CommandExecution = ({ executionId, text, icon, title }: CommandExecutionProps) => {
+export const CommandExecution = ({ executionId, text, icon, title, isDenied = false }: CommandExecutionProps) => {
 	const {
 		terminalShellIntegrationDisabled = false,
+		alwaysAllowCommandsExceptDenied = false,
 		allowedCommands = [],
 		deniedCommands = [],
 		setAllowedCommands,
@@ -245,7 +247,7 @@ export const CommandExecution = ({ executionId, text, icon, title }: CommandExec
 					<CodeBlock source={command} language="shell" />
 					<OutputContainer isExpanded={isExpanded} output={output} />
 				</div>
-				{command && command.trim() && (
+				{command && command.trim() && !alwaysAllowCommandsExceptDenied && !isDenied && (
 					<CommandPatternSelector
 						patterns={commandPatterns}
 						allowedCommands={allowedCommands}

webview-ui/src/components/chat/__tests__/ChatRow.command-denied.spec.tsx

@@ -0,0 +1,70 @@
+import React from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import { render, screen } from "@/utils/test-utils"
+import { ExtensionStateContextProvider } from "@src/context/ExtensionStateContext"
+
+import { ChatRowContent } from "../ChatRow"
+
+vi.mock("react-i18next", () => ({
+	useTranslation: () => ({ t: (key: string) => key }),
+	Trans: ({ i18nKey, children }: { i18nKey: string; children?: React.ReactNode }) => <>{children || i18nKey}</>,
+	initReactI18next: { type: "3rdParty", init: () => {} },
+}))
+
+vi.mock("../CommandExecution", () => ({
+	CommandExecution: ({ text, title, isDenied }: { text?: string; title?: React.ReactNode; isDenied?: boolean }) => (
+		<div data-testid="command-execution" data-denied={isDenied ? "true" : "false"}>
+			{title}
+			{text}
+		</div>
+	),
+}))
+
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeBadge: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
+}))
+
+const renderCommand = (autoApprovalDecision?: "approve" | "deny") => {
+	const queryClient = new QueryClient()
+
+	return render(
+		<ExtensionStateContextProvider>
+			<QueryClientProvider client={queryClient}>
+				<ChatRowContent
+					message={{
+						type: "ask",
+						ask: "command",
+						ts: 1,
+						text: "rm -rf /tmp/example",
+						autoApprovalDecision,
+					}}
+					isExpanded={false}
+					isLast={false}
+					isStreaming={false}
+					onToggleExpand={vi.fn()}
+					onSuggestionClick={vi.fn()}
+					onBatchFileResponse={vi.fn()}
+					onFollowUpUnmount={vi.fn()}
+					isFollowUpAnswered={false}
+				/>
+			</QueryClientProvider>
+		</ExtensionStateContextProvider>,
+	)
+}
+
+describe("ChatRow - denied commands", () => {
+	it("shows a denied status for a command rejected by auto-approval", () => {
+		renderCommand("deny")
+
+		expect(screen.getByText("chat:commandExecution.denied")).toBeInTheDocument()
+		expect(screen.getByTestId("command-execution")).toHaveAttribute("data-denied", "true")
+	})
+
+	it("does not show a denied status for an approved command", () => {
+		renderCommand("approve")
+
+		expect(screen.queryByText("chat:commandExecution.denied")).not.toBeInTheDocument()
+		expect(screen.getByTestId("command-execution")).toHaveAttribute("data-denied", "false")
+	})
+})

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

@@ -110,6 +110,32 @@ describe("CommandExecution", () => {
 		expect(selector).toHaveTextContent("npm install express")
 	})
 
+	it("should hide the command pattern selector when all commands are auto-approved except denied commands", () => {
+		const state = {
+			...mockExtensionState,
+			alwaysAllowCommandsExceptDenied: true,
+		}
+
+		render(
+			<ExtensionStateContext.Provider value={state as any}>
+				<CommandExecution executionId="test-1" text="npm install express" />
+			</ExtensionStateContext.Provider>,
+		)
+
+		expect(screen.queryByTestId("command-pattern-selector")).not.toBeInTheDocument()
+	})
+
+	it("should hide the command pattern selector for a denied command", () => {
+		render(
+			<ExtensionStateWrapper>
+				<CommandExecution executionId="test-1" text="rm -rf /tmp/example" isDenied />
+			</ExtensionStateWrapper>,
+		)
+
+		expect(screen.getByTestId("code-block")).toHaveTextContent("rm -rf /tmp/example")
+		expect(screen.queryByTestId("command-pattern-selector")).not.toBeInTheDocument()
+	})
+
 	it("should handle allow command change", () => {
 		render(
 			<ExtensionStateWrapper>

webview-ui/src/i18n/locales/ca/chat.json

@@ -276,6 +276,7 @@
 		"exitStatus": "Exited with status {{exitCode}}",
 		"malformedCommand": "Malformed command: shell syntax error",
 		"manageCommands": "Auto-approved commands",
+		"denied": "Command denied",
 		"addToAllowed": "Add to allowed list",
 		"removeFromAllowed": "Remove from allowed list",
 		"addToDenied": "Add to denied list",