feat: Phase 5 - Background Tasks Panel UI for parallel task visibility

Adds a collapsible Background Tasks Panel to the chat sidebar that shows
active and recently completed background tasks. This builds on the Phase 4
BackgroundTaskRunner to give users visibility into background work.

Key changes:
- BackgroundTaskStatusInfo type for exposing task status to the webview
- BackgroundTaskRunner tracks completed tasks with result summaries
- BackgroundTaskRunner.getTasksStatus() returns combined active + completed
- BackgroundTaskRunner.onStateChanged callback for UI refresh
- backgroundTasks field added to ExtensionState and getStateToPostToWebview
- cancelBackgroundTask webview message handler
- postBackgroundTasksToWebview() for lightweight status-only updates
- BackgroundTasksPanel React component with collapsible panel, cancel
  buttons, active count badge, and result summaries
- 31 backend tests (BackgroundTaskRunner) + 7 UI tests (panel component)

Author: roomote

packages/types/src/vscode-extension-host.ts

@@ -337,6 +337,9 @@ export type ExtensionState = Pick<
 	openAiCodexIsAuthenticated?: boolean
 	debug?: boolean
 
+	/** Background tasks status for the UI panel */
+	backgroundTasks?: BackgroundTaskStatusInfo[]
+
 	/**
 	 * Monotonically increasing sequence number for clineMessages state pushes.
 	 * When present, the frontend should only apply clineMessages from a state push
@@ -346,6 +349,21 @@ export type ExtensionState = Pick<
 	clineMessagesSeq?: number
 }
 
+/**
+ * Status of a background task as exposed to the webview UI.
+ */
+export interface BackgroundTaskStatusInfo {
+	taskId: string
+	parentTaskId: string
+	status: "running" | "completed" | "cancelled" | "timed_out" | "error"
+	startedAt: number
+	completedAt?: number
+	/** Short summary of the result (from attempt_completion) */
+	resultSummary?: string
+	/** The mode slug the background task was running in */
+	mode?: string
+}
+
 export interface Command {
 	name: string
 	source: "global" | "project" | "built-in"
@@ -514,6 +532,8 @@ export interface WebviewMessage {
 		| "createWorktreeInclude"
 		| "checkoutBranch"
 		| "browseForWorktreePath"
+		// Background task messages
+		| "cancelBackgroundTask"
 		// Skills messages
 		| "requestSkills"
 		| "createSkill"

src/core/task/BackgroundTaskRunner.ts

@@ -10,6 +10,8 @@
  * This is Phase 4 of the parallel execution roadmap: Background Read-Only Concurrency.
  */
 
+import { BackgroundTaskStatusInfo } from "@roo-code/types"
+
 import { Task, TaskOptions } from "./Task"
 
 /** Read-only tools that background tasks are allowed to use. */
@@ -46,11 +48,27 @@ export interface BackgroundTaskRunnerCallbacks {
 	onTaskError?: (taskId: string, parentTaskId: string, error: Error) => void
 }
 
+/** Maximum number of recently completed tasks to keep for UI display. */
+const MAX_COMPLETED_TASKS = 10
+
+export interface CompletedBackgroundTaskInfo {
+	taskId: string
+	parentTaskId: string
+	status: "completed" | "cancelled" | "timed_out" | "error"
+	startedAt: number
+	completedAt: number
+	resultSummary?: string
+	mode?: string
+}
+
 export class BackgroundTaskRunner {
 	private backgroundTasks: Map<string, BackgroundTaskInfo> = new Map()
+	private completedTasks: CompletedBackgroundTaskInfo[] = []
 	private maxConcurrentTasks: number
 	private taskTimeoutMs: number
 	private callbacks: BackgroundTaskRunnerCallbacks
+	/** Called whenever the set of active/completed tasks changes, so the UI can be refreshed. */
+	public onStateChanged?: () => void
 
 	constructor(
 		maxConcurrentTasks: number = DEFAULT_MAX_BACKGROUND_TASKS,
@@ -108,12 +126,14 @@ export class BackgroundTaskRunner {
 			`[BackgroundTaskRunner] Registered background task ${task.taskId} ` +
 				`(parent: ${parentTaskId}, active: ${this.backgroundTasks.size}/${this.maxConcurrentTasks})`,
 		)
+
+		this.notifyStateChanged()
 	}
 
 	/**
 	 * Called when a background task completes. Cleans up tracking state.
 	 */
-	onTaskCompleted(taskId: string): BackgroundTaskInfo | undefined {
+	onTaskCompleted(taskId: string, resultSummary?: string): BackgroundTaskInfo | undefined {
 		const info = this.backgroundTasks.get(taskId)
 
 		if (!info) {
@@ -123,11 +143,22 @@ export class BackgroundTaskRunner {
 		clearTimeout(info.timeoutHandle)
 		this.backgroundTasks.delete(taskId)
 
+		this.addCompletedTask({
+			taskId,
+			parentTaskId: info.parentTaskId,
+			status: "completed",
+			startedAt: info.startedAt,
+			completedAt: Date.now(),
+			resultSummary,
+		})
+
 		console.log(
 			`[BackgroundTaskRunner] Background task ${taskId} completed ` +
 				`(active: ${this.backgroundTasks.size}/${this.maxConcurrentTasks})`,
 		)
 
+		this.notifyStateChanged()
+
 		return info
 	}
 
@@ -174,9 +205,12 @@ export class BackgroundTaskRunner {
 
 		clearTimeout(info.timeoutHandle)
 
+		let status: CompletedBackgroundTaskInfo["status"] = "cancelled"
+
 		try {
 			await info.task.abortTask(true)
 		} catch (error) {
+			status = "error"
 			const err = error instanceof Error ? error : new Error(String(error))
 			console.error(`[BackgroundTaskRunner] Error aborting background task ${taskId}: ${err.message}`)
 			try {
@@ -188,10 +222,20 @@ export class BackgroundTaskRunner {
 
 		this.backgroundTasks.delete(taskId)
 
+		this.addCompletedTask({
+			taskId,
+			parentTaskId: info.parentTaskId,
+			status,
+			startedAt: info.startedAt,
+			completedAt: Date.now(),
+		})
+
 		console.log(
 			`[BackgroundTaskRunner] Cancelled background task ${taskId} ` +
 				`(active: ${this.backgroundTasks.size}/${this.maxConcurrentTasks})`,
 		)
+
+		this.notifyStateChanged()
 	}
 
 	/**
@@ -205,12 +249,79 @@ export class BackgroundTaskRunner {
 		}
 	}
 
+	/**
+	 * Returns the combined status of all active and recently completed background tasks
+	 * for display in the webview UI.
+	 */
+	getTasksStatus(): BackgroundTaskStatusInfo[] {
+		const activeTasks: BackgroundTaskStatusInfo[] = []
+
+		for (const [taskId, info] of this.backgroundTasks) {
+			activeTasks.push({
+				taskId,
+				parentTaskId: info.parentTaskId,
+				status: "running",
+				startedAt: info.startedAt,
+			})
+		}
+
+		const completedStatuses: BackgroundTaskStatusInfo[] = this.completedTasks.map((ct) => ({
+			taskId: ct.taskId,
+			parentTaskId: ct.parentTaskId,
+			status: ct.status,
+			startedAt: ct.startedAt,
+			completedAt: ct.completedAt,
+			resultSummary: ct.resultSummary,
+			mode: ct.mode,
+		}))
+
+		return [...activeTasks, ...completedStatuses]
+	}
+
+	/**
+	 * Returns the list of recently completed tasks (for testing and direct access).
+	 */
+	getCompletedTasks(): readonly CompletedBackgroundTaskInfo[] {
+		return this.completedTasks
+	}
+
+	/**
+	 * Clears completed tasks from the buffer.
+	 */
+	clearCompletedTasks(): void {
+		this.completedTasks = []
+		this.notifyStateChanged()
+	}
+
+	/**
+	 * Add a completed task to the buffer, evicting the oldest if at capacity.
+	 */
+	private addCompletedTask(info: CompletedBackgroundTaskInfo): void {
+		this.completedTasks.push(info)
+
+		if (this.completedTasks.length > MAX_COMPLETED_TASKS) {
+			this.completedTasks = this.completedTasks.slice(-MAX_COMPLETED_TASKS)
+		}
+	}
+
+	/**
+	 * Notify the owner that background task state has changed.
+	 */
+	private notifyStateChanged(): void {
+		try {
+			this.onStateChanged?.()
+		} catch {
+			// Callback errors must not break internal logic.
+		}
+	}
+
 	/**
 	 * Handle timeout of a background task.
 	 */
 	private async timeoutTask(taskId: string): Promise<void> {
 		const info = this.backgroundTasks.get(taskId)
 		const parentTaskId = info?.parentTaskId ?? "unknown"
+		const startedAt = info?.startedAt ?? Date.now()
 
 		console.warn(`[BackgroundTaskRunner] Background task ${taskId} timed out after ${this.taskTimeoutMs}ms`)
 
@@ -220,6 +331,28 @@ export class BackgroundTaskRunner {
 			// Callback errors must not break cleanup.
 		}
 
-		await this.cancelTask(taskId)
+		// Record as timed_out before cancelling (cancelTask will record as cancelled otherwise)
+		clearTimeout(info?.timeoutHandle)
+		if (info) {
+			try {
+				await info.task.abortTask(true)
+			} catch (error) {
+				const err = error instanceof Error ? error : new Error(String(error))
+				console.error(`[BackgroundTaskRunner] Error aborting timed-out task ${taskId}: ${err.message}`)
+			}
+			this.backgroundTasks.delete(taskId)
+
+			this.addCompletedTask({
+				taskId,
+				parentTaskId,
+				status: "timed_out",
+				startedAt,
+				completedAt: Date.now(),
+			})
+
+			this.notifyStateChanged()
+		} else {
+			await this.cancelTask(taskId)
+		}
 	}
 }