feat(history-ui): delegation status badges in history list

Author: edelauna

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

@@ -1,6 +1,14 @@
 import { memo, useRef, useState, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { ChevronUp, ChevronDown, HardDriveDownload, HardDriveUpload, ListChevronsDownUp, ArrowLeft } from "lucide-react"
+import {
+	ChevronUp,
+	ChevronDown,
+	HardDriveDownload,
+	HardDriveUpload,
+	ListChevronsDownUp,
+	ArrowLeft,
+	ArrowRight,
+} from "lucide-react"
 import prettyBytes from "pretty-bytes"
 
 import type { ClineMessage } from "@roo-code/types"
@@ -15,7 +23,6 @@ import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
 import { vscode } from "@src/utils/vscode"
 
 import Thumbnails from "../common/Thumbnails"
-
 import { TaskActions } from "./TaskActions"
 import { ContextWindowProgress } from "./ContextWindowProgress"
 import { Mention } from "./Mention"
@@ -99,6 +106,15 @@ const TaskHeader = ({
 		}
 	}
 
+	// Is this task itself a delegated parent still waiting on a subtask? See #559.
+	const awaitingChildId = currentTaskItem?.status === "delegated" ? currentTaskItem.awaitingChildId : undefined
+
+	const handleGoToSubtask = () => {
+		if (awaitingChildId) {
+			vscode.postMessage({ type: "showTaskWithId", text: awaitingChildId })
+		}
+	}
+
 	return (
 		<div className="group pt-2 pb-0 px-3">
 			{isSubtask && (
@@ -113,6 +129,19 @@ const TaskHeader = ({
 					</Button>
 				</div>
 			)}
+			{awaitingChildId && (
+				<div className="mb-2" onClick={(e) => e.stopPropagation()}>
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={handleGoToSubtask}
+						className="flex items-center gap-1.5 text-xs text-vscode-descriptionForeground hover:text-vscode-foreground">
+						<span className="codicon codicon-sync text-[11px]" />
+						{t("chat:task.waitingOnSubtask")}
+						<ArrowRight className="size-3" />
+					</Button>
+				</div>
+			)}
 			<div
 				className={cn(
 					"px-3 pt-2.5 pb-2 flex flex-col gap-1.5 relative z-1 cursor-pointer",

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

@@ -40,6 +40,7 @@ const mockExtensionState: {
 	apiConfiguration: ProviderSettings
 	currentTaskItem: { id: string } | null
 	clineMessages: any[]
+	taskHistory: any[]
 } = {
 	apiConfiguration: {
 		apiProvider: "anthropic",
@@ -48,6 +49,7 @@ const mockExtensionState: {
 	} as ProviderSettings,
 	currentTaskItem: { id: "test-task-id" },
 	clineMessages: [],
+	taskHistory: [],
 }
 
 // Mock the ExtensionStateContext
@@ -223,6 +225,58 @@ describe("TaskHeader", () => {
 		})
 	})
 
+	describe("Delegated parent waiting-on-subtask banner", () => {
+		beforeEach(() => {
+			mockPostMessage.mockClear()
+		})
+
+		afterEach(() => {
+			mockExtensionState.currentTaskItem = { id: "test-task-id" }
+			mockExtensionState.taskHistory = []
+		})
+
+		it("does not show the banner when currentTaskItem is not delegated", () => {
+			mockExtensionState.currentTaskItem = { id: "test-task-id", status: "active" } as any
+			renderTaskHeader()
+			expect(screen.queryByText("chat:task.waitingOnSubtask")).not.toBeInTheDocument()
+		})
+
+		it("shows the banner when currentTaskItem is delegated with an awaitingChildId", () => {
+			mockExtensionState.currentTaskItem = {
+				id: "parent-1",
+				status: "delegated",
+				awaitingChildId: "child-1",
+			} as any
+			renderTaskHeader()
+			expect(screen.getByText("chat:task.waitingOnSubtask")).toBeInTheDocument()
+		})
+
+		it("navigates to the awaited child when the banner is clicked", () => {
+			mockExtensionState.currentTaskItem = {
+				id: "parent-1",
+				status: "delegated",
+				awaitingChildId: "child-1",
+			} as any
+			renderTaskHeader()
+
+			fireEvent.click(screen.getByText("chat:task.waitingOnSubtask"))
+
+			expect(mockPostMessage).toHaveBeenCalledWith({ type: "showTaskWithId", text: "child-1" })
+		})
+
+		it("does not show an Abandon button (removed: implicit sever on re-delegation)", () => {
+			mockExtensionState.currentTaskItem = {
+				id: "parent-1",
+				status: "delegated",
+				awaitingChildId: "child-1",
+			} as any
+			renderTaskHeader()
+
+			expect(screen.getByText("chat:task.waitingOnSubtask")).toBeInTheDocument()
+			expect(screen.queryByText("history:abandonSubtask")).not.toBeInTheDocument()
+		})
+	})
+
 	describe("Context window percentage calculation", () => {
 		// The percentage should be calculated as:
 		// contextTokens / (contextWindow - reservedForOutput) * 100

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

@@ -6,6 +6,7 @@ import type { SubtaskTreeNode } from "./types"
 import { countAllSubtasks } from "./types"
 import { StandardTooltip } from "../ui"
 import SubtaskCollapsibleRow from "./SubtaskCollapsibleRow"
+import { TaskStatusBadge } from "./TaskStatusBadge"
 
 interface SubtaskRowProps {
 	/** The subtask tree node to display */
@@ -52,6 +53,9 @@ const SubtaskRow = ({ node, depth, onToggleExpand, className }: SubtaskRowProps)
 				<StandardTooltip content={item.task} delay={600}>
 					<span className="text-sm line-clamp-1">{item.task}</span>
 				</StandardTooltip>
+				{(item.status === "delegated" || item.status === "interrupted") && (
+					<TaskStatusBadge status={item.status} className="text-xs shrink-0" />
+				)}
 				<ArrowRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
 			</div>
 

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

@@ -7,6 +7,7 @@ import { DeleteButton } from "./DeleteButton"
 import { StandardTooltip } from "../ui/standard-tooltip"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Split } from "lucide-react"
+import { TaskStatusBadge } from "./TaskStatusBadge"
 
 export interface TaskItemFooterProps {
 	item: HistoryItem
@@ -36,6 +37,13 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({
 						<span>·</span>
 					</>
 				)}
+				{/* Delegation status (delegated parent waiting on a child, or interrupted child) */}
+				{(item.status === "delegated" || item.status === "interrupted") && (
+					<>
+						<TaskStatusBadge status={item.status} />
+						<span>·</span>
+					</>
+				)}
 				{/* Datetime with time-ago format */}
 				<StandardTooltip content={new Date(item.ts).toLocaleString()}>
 					<span className="first-letter:uppercase">{formatTimeAgo(item.ts)}</span>

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

@@ -0,0 +1,36 @@
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { cn } from "@/lib/utils"
+import { StandardTooltip } from "../ui"
+
+interface TaskStatusBadgeProps {
+	status: "delegated" | "interrupted"
+	className?: string
+}
+
+/**
+ * Small inline badge for a task's delegation status: a parent "delegated" and
+ * waiting on a subtask, or a child that was "interrupted" mid-execution and
+ * can be resumed rather than silently detached. See #559.
+ */
+export const TaskStatusBadge = ({ status, className }: TaskStatusBadgeProps) => {
+	const { t } = useAppTranslation()
+
+	const isInterrupted = status === "interrupted"
+	const icon = isInterrupted ? "codicon-warning" : "codicon-sync"
+	const label = isInterrupted ? t("history:interruptedTag") : t("history:delegatedTag")
+
+	return (
+		<StandardTooltip content={label}>
+			<span
+				data-testid={`task-status-badge-${status}`}
+				className={cn(
+					"inline-flex items-center gap-1",
+					isInterrupted ? "text-vscode-editorWarning-foreground" : "text-vscode-descriptionForeground/60",
+					className,
+				)}>
+				<span className={cn("codicon", icon, "text-[11px]")} />
+				<span>{label}</span>
+			</span>
+		</StandardTooltip>
+	)
+}

webview-ui/src/components/history/__tests__/TaskItemFooter.spec.tsx

@@ -94,4 +94,24 @@ describe("TaskItemFooter", () => {
 
 		expect(screen.queryByText("history:subtaskTag")).not.toBeInTheDocument()
 	})
+
+	it("shows a delegated status badge when status is delegated", () => {
+		render(
+			<TaskItemFooter item={{ ...mockItem, status: "delegated", awaitingChildId: "child-1" }} variant="full" />,
+		)
+
+		expect(screen.getByTestId("task-status-badge-delegated")).toBeInTheDocument()
+	})
+
+	it("shows an interrupted status badge when status is interrupted", () => {
+		render(<TaskItemFooter item={{ ...mockItem, status: "interrupted" }} variant="full" />)
+
+		expect(screen.getByTestId("task-status-badge-interrupted")).toBeInTheDocument()
+	})
+
+	it("does not show a status badge for a completed task", () => {
+		render(<TaskItemFooter item={{ ...mockItem, status: "completed" }} variant="full" />)
+
+		expect(screen.queryByTestId(/task-status-badge-/)).not.toBeInTheDocument()
+	})
 })

webview-ui/src/i18n/locales/en/chat.json

@@ -17,7 +17,9 @@
 		"delete": "Delete Task (Shift + Click to skip confirmation)",
 		"openApiHistory": "Open API History",
 		"openUiHistory": "Open UI History",
-		"backToParentTask": "Parent task"
+		"backToParentTask": "Parent task",
+		"waitingOnSubtask": "Waiting on subtask",
+		"goToSubtask": "Go to subtask"
 	},
 	"unpin": "Unpin",
 	"pin": "Pin",

webview-ui/src/i18n/locales/en/history.json

@@ -47,5 +47,7 @@
 	"subtaskTag": "Subtask",
 	"deleteWithSubtasks": "This will also delete {{count}} subtask(s). Are you sure?",
 	"expandSubtasks": "Expand subtasks",
-	"collapseSubtasks": "Collapse subtasks"
+	"collapseSubtasks": "Collapse subtasks",
+	"delegatedTag": "Waiting on subtask",
+	"interruptedTag": "Interrupted"
 }