feat: implement Phase 6b Tab/Panel Switching for background tasks

Add a dedicated BackgroundTaskView as a full tab in the webview, with a
new tab bar icon entry point. Users can navigate between BackgroundTasksList
(showing all subtasks with status badges, mode, and timestamps) and
BackgroundTaskReplayView (from Phase 6a) without disrupting the foreground
task state.

Changes:
- Add backgroundTasksButtonClicked command type and registration
- Add BackgroundTaskView container component with list/replay sub-views
- Add BackgroundTasksList component showing subtasks from task history
- Add bgTask tab type to App.tsx routing
- Register command in package.json with sidebar and editor menu entries
- 30 tests across 5 test files (all passing)

Issue #12330 Phase 6b

Author: roomote

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

@@ -105,6 +105,7 @@ export interface ExtensionMessage {
 		| "chatButtonClicked"
 		| "settingsButtonClicked"
 		| "historyButtonClicked"
+		| "backgroundTasksButtonClicked"
 		| "didBecomeVisible"
 		| "focusInput"
 		| "switchTab"
@@ -529,7 +530,7 @@ export interface WebviewMessage {
 	text?: string
 	taskId?: string
 	editedMessageContent?: string
-	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "bgTaskReplay"
+	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "bgTaskReplay" | "bgTask"
 	disabled?: boolean
 	context?: string
 	dataUri?: string

packages/types/src/vscode.ts

@@ -45,6 +45,7 @@ export const commandIds = [
 	"acceptInput",
 	"focusPanel",
 	"toggleAutoApprove",
+	"backgroundTasksButtonClicked",
 ] as const
 
 export type CommandId = (typeof commandIds)[number]

src/activate/registerCommands.ts

@@ -108,6 +108,15 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 
 		visibleProvider.postMessageToWebview({ type: "action", action: "historyButtonClicked" })
 	},
+	backgroundTasksButtonClicked: () => {
+		const visibleProvider = getVisibleProviderOrLog(outputChannel)
+
+		if (!visibleProvider) {
+			return
+		}
+
+		visibleProvider.postMessageToWebview({ type: "action", action: "backgroundTasksButtonClicked" })
+	},
 	newTask: handleNewTask,
 	setCustomStoragePath: async () => {
 		const { promptForCustomStoragePath } = await import("../utils/storage")

src/package.json

@@ -159,6 +159,11 @@
 				"command": "roo-cline.toggleAutoApprove",
 				"title": "%command.toggleAutoApprove.title%",
 				"category": "%configuration.title%"
+			},
+			{
+				"command": "roo-cline.backgroundTasksButtonClicked",
+				"title": "Background Tasks",
+				"icon": "$(server-process)"
 			}
 		],
 		"menus": {
@@ -219,9 +224,14 @@
 					"when": "view == roo-cline.SidebarProvider"
 				},
 				{
-					"command": "roo-cline.popoutButtonClicked",
+					"command": "roo-cline.backgroundTasksButtonClicked",
 					"group": "overflow@2",
 					"when": "view == roo-cline.SidebarProvider"
+				},
+				{
+					"command": "roo-cline.popoutButtonClicked",
+					"group": "overflow@3",
+					"when": "view == roo-cline.SidebarProvider"
 				}
 			],
 			"editor/title": [
@@ -241,9 +251,14 @@
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				},
 				{
-					"command": "roo-cline.popoutButtonClicked",
+					"command": "roo-cline.backgroundTasksButtonClicked",
 					"group": "overflow@2",
 					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
+				},
+				{
+					"command": "roo-cline.popoutButtonClicked",
+					"group": "overflow@3",
+					"when": "activeWebviewPanelId == roo-cline.TabPanelProvider"
 				}
 			]
 		},

webview-ui/src/App.tsx

@@ -13,14 +13,15 @@ import HistoryView from "./components/history/HistoryView"
 import SettingsView, { SettingsViewRef } from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeViewProvider"
 import BackgroundTaskReplayView from "./components/chat/BackgroundTaskReplayView"
+import BackgroundTaskView from "./components/chat/BackgroundTaskView"
 import { CheckpointRestoreDialog } from "./components/chat/CheckpointRestoreDialog"
 import { DeleteMessageDialog, EditMessageDialog } from "./components/chat/MessageModificationConfirmationDialog"
 import ErrorBoundary from "./components/ErrorBoundary"
 import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
 import { TooltipProvider } from "./components/ui/tooltip"
 import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
 
-type Tab = "settings" | "history" | "chat" | "bgTaskReplay"
+type Tab = "settings" | "history" | "chat" | "bgTaskReplay" | "bgTask"
 
 interface DeleteMessageDialogState {
 	isOpen: boolean
@@ -44,6 +45,7 @@ const tabsByMessageAction: Partial<Record<NonNullable<ExtensionMessage["action"]
 	chatButtonClicked: "chat",
 	settingsButtonClicked: "settings",
 	historyButtonClicked: "history",
+	backgroundTasksButtonClicked: "bgTask",
 }
 
 const App = () => {
@@ -189,6 +191,7 @@ const App = () => {
 					}}
 				/>
 			)}
+			{tab === "bgTask" && <BackgroundTaskView onClose={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
 			{tab === "settings" && (
 				<SettingsView ref={settingsRef} onDone={() => setTab("chat")} targetSection={currentSection} />

webview-ui/src/__tests__/App.spec.tsx

@@ -40,6 +40,24 @@ vi.mock("@src/components/history/HistoryView", () => ({
 	},
 }))
 
+vi.mock("@src/components/chat/BackgroundTaskView", () => ({
+	__esModule: true,
+	default: function BackgroundTaskView({ onClose }: { onClose: () => void }) {
+		return (
+			<div data-testid="background-task-view" onClick={onClose}>
+				Background Task View
+			</div>
+		)
+	},
+}))
+
+vi.mock("@src/components/chat/BackgroundTaskReplayView", () => ({
+	__esModule: true,
+	default: function BackgroundTaskReplayView() {
+		return <div data-testid="background-task-replay-view">Background Task Replay View</div>
+	},
+}))
+
 vi.mock("@src/components/mcp/McpView", () => ({
 	__esModule: true,
 	default: function McpView() {
@@ -206,6 +224,38 @@ describe("App", () => {
 		expect(screen.queryByTestId("settings-view")).not.toBeInTheDocument()
 	})
 
+	it("switches to background tasks view when receiving backgroundTasksButtonClicked action", async () => {
+		render(<AppWithProviders />)
+
+		act(() => {
+			triggerMessage("backgroundTasksButtonClicked")
+		})
+
+		const bgTaskView = await screen.findByTestId("background-task-view")
+		expect(bgTaskView).toBeInTheDocument()
+
+		const chatView = screen.getByTestId("chat-view")
+		expect(chatView.getAttribute("data-hidden")).toBe("true")
+	})
+
+	it("returns to chat view when clicking done in background tasks view", async () => {
+		render(<AppWithProviders />)
+
+		act(() => {
+			triggerMessage("backgroundTasksButtonClicked")
+		})
+
+		const bgTaskView = await screen.findByTestId("background-task-view")
+
+		act(() => {
+			bgTaskView.click()
+		})
+
+		const chatView = screen.getByTestId("chat-view")
+		expect(chatView.getAttribute("data-hidden")).toBe("false")
+		expect(screen.queryByTestId("background-task-view")).not.toBeInTheDocument()
+	})
+
 	it.each(["history"])("returns to chat view when clicking done in %s view", async (view) => {
 		render(<AppWithProviders />)
 

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

@@ -0,0 +1,67 @@
+import { memo, useCallback, useState } from "react"
+import { ArrowLeft } from "lucide-react"
+
+import BackgroundTasksList from "./BackgroundTasksList"
+import BackgroundTaskReplayView from "./BackgroundTaskReplayView"
+
+type BackgroundTaskSubView = "list" | "replay"
+
+export interface BackgroundTaskViewProps {
+	onClose: () => void
+}
+
+/**
+ * Full-tab container for the background tasks feature (Phase 6b).
+ * Manages navigation between BackgroundTasksList and BackgroundTaskReplayView.
+ * Later, BackgroundTaskLiveView (Phase 6c) will be added as another sub-view.
+ */
+const BackgroundTaskView = memo(({ onClose }: BackgroundTaskViewProps) => {
+	const [subView, setSubView] = useState<BackgroundTaskSubView>("list")
+	const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
+
+	const handleSelectTask = useCallback((taskId: string) => {
+		setSelectedTaskId(taskId)
+		setSubView("replay")
+	}, [])
+
+	const handleBackToList = useCallback(() => {
+		setSelectedTaskId(null)
+		setSubView("list")
+	}, [])
+
+	return (
+		<div className="flex flex-col h-full" data-testid="background-task-view">
+			{/* Top header bar -- only shown in list view since replay has its own header */}
+			{subView === "list" && (
+				<div
+					className="flex items-center gap-2 px-4 py-2 border-b"
+					style={{
+						borderColor: "var(--vscode-panel-border)",
+						backgroundColor: "var(--vscode-sideBar-background)",
+					}}
+					data-testid="background-task-view-header">
+					<button
+						onClick={onClose}
+						className="flex items-center gap-1 text-vscode-textLink-foreground hover:underline cursor-pointer bg-transparent border-none p-0"
+						data-testid="background-task-view-back">
+						<ArrowLeft size={16} />
+						<span>Back to chat</span>
+					</button>
+					<span className="text-vscode-descriptionForeground text-sm ml-2 font-medium">Background Tasks</span>
+				</div>
+			)}
+
+			{/* Sub-view content */}
+			<div className="flex-1 overflow-hidden">
+				{subView === "list" && <BackgroundTasksList onSelectTask={handleSelectTask} />}
+				{subView === "replay" && selectedTaskId && (
+					<BackgroundTaskReplayView taskId={selectedTaskId} onClose={handleBackToList} />
+				)}
+			</div>
+		</div>
+	)
+})
+
+BackgroundTaskView.displayName = "BackgroundTaskView"
+
+export default BackgroundTaskView