diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index 929fa9427aa0..21cf071a03de 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -176,6 +176,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	const textAreaRef = useRef<HTMLTextAreaElement>(null)
 	const [sendingDisabled, setSendingDisabled] = useState(false)
 	const [selectedImages, setSelectedImages] = useState<string[]>([])
+	const [isCancelPending, setIsCancelPending] = useState(false)
 
 	// we need to hold on to the ask because useEffect > lastMessage will always let us know when an ask comes in and handle it, but by the time handleMessage is called, the last message might not be the ask anymore (it could be a say that followed)
 	const [clineAsk, setClineAsk] = useState<ClineAsk | undefined>(undefined)
@@ -514,6 +515,32 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		prevExpandedRowsRef.current = expandedRows // Store current state for next comparison
 	}, [expandedRows])
 
+	// Helper function to check if an API request is actively in progress
+	const checkApiRequestInProgress = useCallback((messages: ClineMessage[]) => {
+		const isLastMessagePartial = messages.at(-1)?.partial === true
+
+		if (isLastMessagePartial) {
+			return true
+		}
+
+		const lastApiReqStarted = findLast(messages, (message: ClineMessage) => message.say === "api_req_started")
+
+		if (
+			lastApiReqStarted &&
+			lastApiReqStarted.text !== null &&
+			lastApiReqStarted.text !== undefined &&
+			lastApiReqStarted.say === "api_req_started"
+		) {
+			const cost = JSON.parse(lastApiReqStarted.text).cost
+
+			if (cost === undefined) {
+				return true // API request has not finished yet.
+			}
+		}
+
+		return false
+	}, [])
+
 	const isStreaming = useMemo(() => {
 		// Checking clineAsk isn't enough since messages effect may be called
 		// again for a tool for example, set clineAsk to its value, and if the
@@ -531,32 +558,15 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			return false
 		}
 
-		const isLastMessagePartial = modifiedMessages.at(-1)?.partial === true
+		return checkApiRequestInProgress(modifiedMessages)
+	}, [modifiedMessages, clineAsk, enableButtons, primaryButtonText, checkApiRequestInProgress])
 
-		if (isLastMessagePartial) {
-			return true
-		} else {
-			const lastApiReqStarted = findLast(
-				modifiedMessages,
-				(message: ClineMessage) => message.say === "api_req_started",
-			)
-
-			if (
-				lastApiReqStarted &&
-				lastApiReqStarted.text !== null &&
-				lastApiReqStarted.text !== undefined &&
-				lastApiReqStarted.say === "api_req_started"
-			) {
-				const cost = JSON.parse(lastApiReqStarted.text).cost
-
-				if (cost === undefined) {
-					return true // API request has not finished yet.
-				}
-			}
-		}
-
-		return false
-	}, [modifiedMessages, clineAsk, enableButtons, primaryButtonText])
+	// Track the actual streaming state for the cancel button separately.
+	// This ensures the cancel button remains enabled during API requests,
+	// even when there's a tool approval dialog.
+	const isApiRequestInProgress = useMemo(() => {
+		return checkApiRequestInProgress(modifiedMessages)
+	}, [modifiedMessages, checkApiRequestInProgress])
 
 	const markFollowUpAsAnswered = useCallback(() => {
 		const lastFollowUpMessage = messagesRef.current.findLast((msg: ClineMessage) => msg.ask === "followup")
@@ -733,9 +743,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 			const trimmedInput = text?.trim()
 
-			if (isStreaming) {
+			if ((isStreaming || isApiRequestInProgress) && !isCancelPending) {
+				// Prevent rapid clicks by setting pending state
+				setIsCancelPending(true)
 				vscode.postMessage({ type: "cancelTask" })
 				setDidClickCancel(true)
+				// Reset pending state after a short delay
+				setTimeout(() => setIsCancelPending(false), 1000)
 				return
 			}
 
@@ -773,7 +787,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			setClineAsk(undefined)
 			setEnableButtons(false)
 		},
-		[clineAsk, startNewTask, isStreaming],
+		[clineAsk, startNewTask, isStreaming, isApiRequestInProgress, isCancelPending],
 	)
 
 	const { info: model } = useSelectedModel(apiConfiguration)
@@ -1763,7 +1777,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		vscode.postMessage({ type: "condenseTaskContextRequest", text: taskId })
 	}
 
-	const areButtonsVisible = showScrollToBottom || primaryButtonText || secondaryButtonText || isStreaming
+	const areButtonsVisible =
+		showScrollToBottom || primaryButtonText || secondaryButtonText || isStreaming || isApiRequestInProgress
 
 	return (
 		<div
@@ -1887,7 +1902,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							className={`flex h-9 items-center mb-1 px-[15px] ${
 								showScrollToBottom
 									? "opacity-100"
-									: enableButtons || (isStreaming && !didClickCancel)
+									: enableButtons || ((isStreaming || isApiRequestInProgress) && !didClickCancel)
 										? "opacity-100"
 										: "opacity-50"
 							}`}>
@@ -1937,10 +1952,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 											</VSCodeButton>
 										</StandardTooltip>
 									)}
-									{(secondaryButtonText || isStreaming) && (
+									{(secondaryButtonText || isStreaming || isApiRequestInProgress) && (
 										<StandardTooltip
 											content={
-												isStreaming
+												isStreaming || isApiRequestInProgress
 													? t("chat:cancel.tooltip")
 													: secondaryButtonText === t("chat:startNewTask.title")
 														? t("chat:startNewTask.tooltip")
@@ -1952,10 +1967,18 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 											}>
 											<VSCodeButton
 												appearance="secondary"
-												disabled={!enableButtons && !(isStreaming && !didClickCancel)}
-												className={isStreaming ? "flex-[2] ml-0" : "flex-1 ml-[6px]"}
+												disabled={
+													!enableButtons && !(isApiRequestInProgress && !didClickCancel)
+												}
+												className={
+													isStreaming || isApiRequestInProgress
+														? "flex-[2] ml-0"
+														: "flex-1 ml-[6px]"
+												}
 												onClick={() => handleSecondaryButtonClick(inputValue, selectedImages)}>
-												{isStreaming ? t("chat:cancel.title") : secondaryButtonText}
+												{isStreaming || isApiRequestInProgress
+													? t("chat:cancel.title")
+													: secondaryButtonText}
 											</VSCodeButton>
 										</StandardTooltip>
 									)}