feat: support batch history deletion (RooCodeInc#2918)

* feat: support batch history deletion

Single history item deletion is too small and "Delete All History" is
too large on granuality.

For long term Cline users and Cline devs/testers it would be convenient
to batch deletion these history items.

On `HistoryView` page, this commit add:

1. `CheckBox` for every history item
2. `Select All` & `Deselect All` buttons (work with search filter)
3. `Delete Selected` button for batch deletion (only appears when
   item(s) is/are selected)

History task's `onclick` is pointed to `showTaskWithId` for quick
showing this task.

* fix failed ellipsis checking

* HistoryView: remove unused import

* fix: style improvement

1. Selection buttons moved up to align with 'Done' button
2. Delete All History button hidden when any items are selected
3. Checkboxes moved below and align with message text

* restore unnecessary changes

* Improve styles and Delete selected button

* changeset

---------

Co-authored-by: frostbournesb <[email protected]>

Author: danix800

.changeset/warm-gorillas-beam.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Batch selection and deletion of tasks in history

src/core/controller/index.ts

@@ -335,8 +335,8 @@ export class Controller {
 			case "showTaskWithId":
 				this.showTaskWithId(message.text!)
 				break
-			case "deleteTaskWithId":
-				this.deleteTaskWithId(message.text!)
+			case "deleteTasksWithIds":
+				this.deleteTasksWithIds(message.text!)
 				break
 			case "exportTaskWithId":
 				this.exportTaskWithId(message.text!)
@@ -1712,6 +1712,12 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont
 		this.refreshTotalTasksSize()
 	}
 
+	async deleteTasksWithIds(ids: string) {
+		for (const id of JSON.parse(ids) as string[]) {
+			await this.deleteTaskWithId(id)
+		}
+	}
+
 	async deleteTaskFromState(id: string) {
 		// Remove the task from history
 		const taskHistory = ((await getGlobalState(this.context, "taskHistory")) as HistoryItem[] | undefined) || []

src/shared/WebviewMessage.ts

@@ -18,7 +18,7 @@ export interface WebviewMessage {
 		| "selectImages"
 		| "exportCurrentTask"
 		| "showTaskWithId"
-		| "deleteTaskWithId"
+		| "deleteTasksWithIds"
 		| "exportTaskWithId"
 		| "resetState"
 		| "requestOllamaModels"

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

@@ -669,7 +669,7 @@ const DeleteButton: React.FC<{
 }> = ({ taskSize, taskId }) => (
 	<VSCodeButton
 		appearance="icon"
-		onClick={() => vscode.postMessage({ type: "deleteTaskWithId", text: taskId })}
+		onClick={() => vscode.postMessage({ type: "deleteTasksWithIds", text: JSON.stringify([taskId]) })}
 		style={{ padding: "0px 0px" }}>
 		<div
 			style={{

webview-ui/src/components/history/HistoryView.tsx

@@ -1,4 +1,4 @@
-import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeTextField, VSCodeRadioGroup, VSCodeRadio, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { vscode } from "@/utils/vscode"
 import { Virtuoso } from "react-virtuoso"
@@ -22,6 +22,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	const [sortOption, setSortOption] = useState<SortOption>("newest")
 	const [lastNonRelevantSort, setLastNonRelevantSort] = useState<SortOption | null>("newest")
 	const [deleteAllDisabled, setDeleteAllDisabled] = useState(false)
+	const [selectedItems, setSelectedItems] = useState<string[]>([])
 
 	const handleMessage = useCallback((event: MessageEvent<ExtensionMessage>) => {
 		if (event.data.type === "relinquishControl") {
@@ -45,12 +46,29 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		}
 	}, [searchQuery, sortOption, lastNonRelevantSort])
 
-	const handleHistorySelect = useCallback((id: string) => {
+	const handleShowTaskWithId = useCallback((id: string) => {
 		vscode.postMessage({ type: "showTaskWithId", text: id })
 	}, [])
 
+	const handleHistorySelect = useCallback((itemId: string, checked: boolean) => {
+		setSelectedItems((prev) => {
+			if (checked) {
+				return [...prev, itemId]
+			} else {
+				return prev.filter((id) => id !== itemId)
+			}
+		})
+	}, [])
+
 	const handleDeleteHistoryItem = useCallback((id: string) => {
-		vscode.postMessage({ type: "deleteTaskWithId", text: id })
+		vscode.postMessage({ type: "deleteTasksWithIds", text: JSON.stringify([id]) })
+	}, [])
+
+	const handleDeleteSelectedHistoryItems = useCallback((ids: string[]) => {
+		if (ids.length > 0) {
+			vscode.postMessage({ type: "deleteTasksWithIds", text: JSON.stringify(ids) })
+			setSelectedItems([])
+		}
 	}, [])
 
 	const formatDate = useCallback((timestamp: number) => {
@@ -113,6 +131,24 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		return results
 	}, [presentableTasks, searchQuery, fuse, sortOption])
 
+	// Calculate total size of selected items
+	const selectedItemsSize = useMemo(() => {
+		if (selectedItems.length === 0) return 0
+
+		return taskHistory.filter((item) => selectedItems.includes(item.id)).reduce((total, item) => total + (item.size || 0), 0)
+	}, [selectedItems, taskHistory])
+
+	const handleBatchHistorySelect = useCallback(
+		(selectAll: boolean) => {
+			if (selectAll) {
+				setSelectedItems(taskHistorySearchResults.map((item) => item.id))
+			} else {
+				setSelectedItems([])
+			}
+		},
+		[taskHistorySearchResults],
+	)
+
 	return (
 		<>
 			<style>
@@ -216,6 +252,20 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								Most Relevant
 							</VSCodeRadio>
 						</VSCodeRadioGroup>
+						<div style={{ display: "flex", justifyContent: "flex-end", gap: "10px" }}>
+							<VSCodeButton
+								onClick={() => {
+									handleBatchHistorySelect(true)
+								}}>
+								Select All
+							</VSCodeButton>
+							<VSCodeButton
+								onClick={() => {
+									handleBatchHistorySelect(false)
+								}}>
+								Select None
+							</VSCodeButton>
+						</div>
 					</div>
 				</div>
 				<div style={{ flexGrow: 1, overflowY: "auto", margin: 0 }}>
@@ -249,16 +299,28 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 									cursor: "pointer",
 									borderBottom:
 										index < taskHistory.length - 1 ? "1px solid var(--vscode-panel-border)" : "none",
-								}}
-								onClick={() => handleHistorySelect(item.id)}>
+									display: "flex",
+								}}>
+								<VSCodeCheckbox
+									className="pl-3 pr-1 py-auto"
+									checked={selectedItems.includes(item.id)}
+									onClick={(e) => {
+										const checked = (e.target as HTMLInputElement).checked
+										handleHistorySelect(item.id, checked)
+										e.stopPropagation()
+									}}
+								/>
 								<div
 									style={{
 										display: "flex",
 										flexDirection: "column",
 										gap: "8px",
 										padding: "12px 20px",
+										paddingLeft: "16px",
 										position: "relative",
-									}}>
+										flexGrow: 1,
+									}}
+									onClick={() => handleShowTaskWithId(item.id)}>
 									<div
 										style={{
 											display: "flex",
@@ -468,15 +530,26 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						padding: "10px 10px",
 						borderTop: "1px solid var(--vscode-panel-border)",
 					}}>
-					<DangerButton
-						style={{ width: "100%" }}
-						disabled={deleteAllDisabled || taskHistory.length === 0}
-						onClick={() => {
-							setDeleteAllDisabled(true)
-							vscode.postMessage({ type: "clearAllTaskHistory" })
-						}}>
-						Delete All History{totalTasksSize !== null ? ` (${formatSize(totalTasksSize)})` : ""}
-					</DangerButton>
+					{selectedItems.length > 0 ? (
+						<DangerButton
+							style={{ width: "100%" }}
+							onClick={() => {
+								handleDeleteSelectedHistoryItems(selectedItems)
+							}}>
+							Delete {selectedItems.length > 1 ? selectedItems.length : ""} Selected
+							{selectedItemsSize > 0 ? ` (${formatSize(selectedItemsSize)})` : ""}
+						</DangerButton>
+					) : (
+						<DangerButton
+							style={{ width: "100%" }}
+							disabled={deleteAllDisabled || taskHistory.length === 0}
+							onClick={() => {
+								setDeleteAllDisabled(true)
+								vscode.postMessage({ type: "clearAllTaskHistory" })
+							}}>
+							Delete All History{totalTasksSize !== null ? ` (${formatSize(totalTasksSize)})` : ""}
+						</DangerButton>
+					)}
 				</div>
 			</div>
 		</>