fix: allow new tasks to bypass queued messages and add clear all button

- Modified ChatView to detect and allow new tasks even when messages are queued
- Added "Clear All" button to QueuedMessages component for bulk deletion
- Implemented clearAll() method in MessageQueueService
- Added webview message handler for clearQueuedMessages
- Updated WebviewMessage type definitions

Fixes #9015

Author: roomote

src/core/message-queue/MessageQueueService.ts

@@ -91,6 +91,11 @@ export class MessageQueueService extends EventEmitter<QueueEvents> {
 		return this._messages.length === 0
 	}
 
+	public clearAll(): void {
+		this._messages = []
+		this.emit("stateChanged", this._messages)
+	}
+
 	public dispose(): void {
 		this._messages = []
 		this.removeAllListeners()

src/core/webview/webviewMessageHandler.ts

@@ -3155,6 +3155,10 @@ export const webviewMessageHandler = async (
 			provider.getCurrentTask()?.messageQueueService.removeMessage(message.text ?? "")
 			break
 		}
+		case "clearQueuedMessages": {
+			provider.getCurrentTask()?.messageQueueService.clearAll()
+			break
+		}
 		case "editQueuedMessage": {
 			if (message.payload) {
 				const { id, text, images } = message.payload as EditQueuedMessagePayload

src/shared/WebviewMessage.ts

@@ -230,6 +230,7 @@ export interface WebviewMessage {
 		| "openRouterImageGenerationSelectedModel"
 		| "queueMessage"
 		| "removeQueuedMessage"
+		| "clearQueuedMessages"
 		| "editQueuedMessage"
 		| "dismissUpsell"
 		| "getDismissedUpsells"

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

@@ -608,11 +608,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			text = text.trim()
 
 			if (text || images.length > 0) {
-				// Queue message if:
-				// - Task is busy (sendingDisabled)
-				// - API request in progress (isStreaming)
-				// - Queue has items (preserve message order during drain)
-				if (sendingDisabled || isStreaming || messageQueue.length > 0) {
+				// Check if this is a new task request (no existing messages)
+				const isNewTask = messagesRef.current.length === 0
+
+				// Allow starting new tasks even if queue has items
+				if (!isNewTask && (sendingDisabled || isStreaming || messageQueue.length > 0)) {
 					try {
 						console.log("queueMessage", text, images)
 						vscode.postMessage({ type: "queueMessage", text, images })

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 import { QueuedMessage } from "@roo-code/types"
 
 import { Button } from "@src/components/ui"
+import { vscode } from "@src/utils/vscode"
 
 import Thumbnails from "../common/Thumbnails"
 
@@ -41,7 +42,21 @@ export const QueuedMessages = ({ queue, onRemove, onUpdate }: QueuedMessagesProp
 
 	return (
 		<div className="px-[15px] py-[10px] pr-[6px]" data-testid="queued-messages">
-			<div className="text-vscode-descriptionForeground text-md mb-2">{t("queuedMessages.title")}</div>
+			<div className="flex justify-between items-center mb-2">
+				<div className="text-vscode-descriptionForeground text-md">{t("queuedMessages.title")}</div>
+				{queue.length > 0 && (
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={() => {
+							// Clear all messages via backend
+							vscode.postMessage({ type: "clearQueuedMessages" })
+						}}
+						className="text-xs">
+						{t("queuedMessages.clearAll", "Clear All")}
+					</Button>
+				)}
+			</div>
 			<div className="flex flex-col gap-2 max-h-[300px] overflow-y-auto pr-2">
 				{queue.map((message, index) => {
 					const editState = getEditState(message.id, message.text)