feat: Implement hierarchical task history with completion status

Implement hierarchical display for tasks in the history view,
allowing parent tasks to be expanded to show child tasks.

- Add `parent_task_id` to `HistoryItem` schema to establish
  parent-child relationships.
- Update frontend to render tasks hierarchically, with child tasks
  indented and collapsible under their parents.

Introduce a `completed` status for tasks:
- Add `completed` boolean flag to `HistoryItem` schema.
- Backend logic in `Task.ts` now sets `completed: true` when an
  `attempt_completion` is processed (e.g., `ask: "completion_result"`
  or `say: "completion_result"` messages) and `completed: false` if
  new messages are added to a completed task.
- Frontend history view now displays completed tasks with a distinct
  text color (`var(--vscode-testing-iconPassed)`).

Enhance UI for child tasks in history:
- Child task entries are now more compact, with reduced padding.
- Token and cost information is omitted for child tasks to save space.

Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

src/core/config/__tests__/ContextProxy.test.ts

@@ -128,6 +128,7 @@ describe("ContextProxy", () => {
 					tokensIn: 1,
 					tokensOut: 1,
 					totalCost: 1,
+					completed: false,
 				},
 			]
 
@@ -160,6 +161,7 @@ describe("ContextProxy", () => {
 					tokensIn: 1,
 					tokensOut: 1,
 					totalCost: 1,
+					completed: false,
 				},
 			]
 

src/core/task-persistence/taskMetadata.ts

@@ -18,6 +18,8 @@ export type TaskMetadataOptions = {
 	globalStoragePath: string
 	workspace: string
 	parentTaskId?: string
+	setCompleted?: boolean
+	unsetCompleted?: boolean
 }
 
 export async function taskMetadata({
@@ -27,6 +29,8 @@ export async function taskMetadata({
 	globalStoragePath,
 	workspace,
 	parentTaskId,
+	setCompleted,
+	unsetCompleted,
 }: TaskMetadataOptions) {
 	const taskDir = await getTaskDirectoryPath(globalStoragePath, taskId)
 	const taskMessage = messages[0] // First message is always the task say.
@@ -47,6 +51,13 @@ export async function taskMetadata({
 
 	const tokenUsage = getApiMetrics(combineApiRequests(combineCommandSequences(messages.slice(1))))
 
+	let completedValue = false // Default to schema's default
+	if (setCompleted === true) {
+		completedValue = true
+	} else if (unsetCompleted === true) {
+		completedValue = false
+	}
+
 	const historyItem: HistoryItem = {
 		id: taskId,
 		number: taskNumber,
@@ -60,6 +71,7 @@ export async function taskMetadata({
 		size: taskDirSize,
 		workspace,
 		parent_task_id: parentTaskId,
+		completed: completedValue,
 	}
 
 	return { historyItem, tokenUsage }

src/core/task/Task.ts

@@ -124,6 +124,7 @@ export class Task extends EventEmitter<ClineEvents> {
 	providerRef: WeakRef<ClineProvider>
 	private readonly globalStoragePath: string
 	abort: boolean = false
+	private isCompleted: boolean = false
 	didFinishAbortingStream = false
 	abandoned = false
 	isInitialized = false
@@ -209,6 +210,7 @@ export class Task extends EventEmitter<ClineEvents> {
 		}
 
 		this.taskId = historyItem ? historyItem.id : crypto.randomUUID()
+		this.isCompleted = historyItem?.completed ?? false
 		// normal use-case is usually retry similar history task with new workspace
 		this.workspacePath = parentTask
 			? parentTask.workspacePath
@@ -342,14 +344,22 @@ export class Task extends EventEmitter<ClineEvents> {
 				globalStoragePath: this.globalStoragePath,
 			})
 
-			const { historyItem, tokenUsage } = await taskMetadata({
+			const metadataOptions: Parameters<typeof taskMetadata>[0] = {
 				messages: this.clineMessages,
 				taskId: this.taskId,
 				taskNumber: this.taskNumber,
 				globalStoragePath: this.globalStoragePath,
 				workspace: this.cwd,
 				parentTaskId: this.parentTaskId,
-			})
+			}
+
+			if (this.isCompleted) {
+				metadataOptions.setCompleted = true
+			} else {
+				metadataOptions.unsetCompleted = true
+			}
+
+			const { historyItem, tokenUsage } = await taskMetadata(metadataOptions)
 
 			this.emit("taskTokenUsageUpdated", this.taskId, tokenUsage)
 
@@ -454,6 +464,12 @@ export class Task extends EventEmitter<ClineEvents> {
 			await this.addToClineMessages({ ts: askTs, type: "ask", ask: type, text })
 		}
 
+		// If the AI is asking for a completion_result, it means it has attempted completion.
+		// Mark as completed now. It will be persisted by saveClineMessages called within addToClineMessages or by the save below.
+		if (type === "completion_result") {
+			this.isCompleted = true
+		}
+
 		await pWaitFor(() => this.askResponse !== undefined || this.lastMessageTs !== askTs, { interval: 100 })
 
 		if (this.lastMessageTs !== askTs) {
@@ -464,6 +480,16 @@ export class Task extends EventEmitter<ClineEvents> {
 		}
 
 		const result = { response: this.askResponse!, text: this.askResponseText, images: this.askResponseImages }
+
+		// If the task was marked as completed due to a "completion_result" ask,
+		// but the user did not confirm with "yesButtonClicked" (e.g., they clicked "No" or provided new input),
+		// then the task is no longer considered completed.
+		if (type === "completion_result" && result.response !== "yesButtonClicked") {
+			this.isCompleted = false
+			// This change will be persisted by the next call to saveClineMessages,
+			// for example, when user feedback is added as a new message.
+		}
+
 		this.askResponse = undefined
 		this.askResponseText = undefined
 		this.askResponseImages = undefined
@@ -472,6 +498,13 @@ export class Task extends EventEmitter<ClineEvents> {
 	}
 
 	async handleWebviewAskResponse(askResponse: ClineAskResponse, text?: string, images?: string[]) {
+		const lastAskMessage = this.clineMessages
+			.slice()
+			.reverse()
+			.find((m) => m.type === "ask")
+		if (this.isCompleted && askResponse === "messageResponse" && lastAskMessage?.ask !== "completion_result") {
+			this.isCompleted = false
+		}
 		this.askResponse = askResponse
 		this.askResponseText = text
 		this.askResponseImages = images
@@ -501,8 +534,8 @@ export class Task extends EventEmitter<ClineEvents> {
 		}
 
 		if (partial !== undefined) {
+			// Handles partial messages
 			const lastMessage = this.clineMessages.at(-1)
-
 			const isUpdatingPreviousPartial =
 				lastMessage && lastMessage.partial && lastMessage.type === "say" && lastMessage.say === type
 
@@ -521,7 +554,7 @@ export class Task extends EventEmitter<ClineEvents> {
 					if (!options.isNonInteractive) {
 						this.lastMessageTs = sayTs
 					}
-
+					// For a new partial message, completion is set only when it's finalized.
 					await this.addToClineMessages({ ts: sayTs, type: "say", say: type, text, images, partial })
 				}
 			} else {
@@ -532,6 +565,10 @@ export class Task extends EventEmitter<ClineEvents> {
 					if (!options.isNonInteractive) {
 						this.lastMessageTs = lastMessage.ts
 					}
+					// If this is the final part of a "completion_result" message, mark as completed.
+					if (type === "completion_result") {
+						this.isCompleted = true
+					}
 
 					lastMessage.text = text
 					lastMessage.images = images
@@ -551,7 +588,11 @@ export class Task extends EventEmitter<ClineEvents> {
 					if (!options.isNonInteractive) {
 						this.lastMessageTs = sayTs
 					}
-
+					// If this is a new, complete "completion_result" message (being added as partial initially but immediately finalized), mark as completed.
+					// This case might be rare if "completion_result" is always non-partial or ask.
+					if (type === "completion_result") {
+						this.isCompleted = true
+					}
 					await this.addToClineMessages({ ts: sayTs, type: "say", say: type, text, images })
 				}
 			}
@@ -566,7 +607,10 @@ export class Task extends EventEmitter<ClineEvents> {
 			if (!options.isNonInteractive) {
 				this.lastMessageTs = sayTs
 			}
-
+			// If this is a new, non-partial "completion_result" message, mark as completed.
+			if (type === "completion_result") {
+				this.isCompleted = true
+			}
 			await this.addToClineMessages({ ts: sayTs, type: "say", say: type, text, images, checkpoint })
 		}
 	}
@@ -584,6 +628,9 @@ export class Task extends EventEmitter<ClineEvents> {
 	// Start / Abort / Resume
 
 	private async startTask(task?: string, images?: string[]): Promise<void> {
+		if (this.isCompleted && (task || (images && images.length > 0))) {
+			this.isCompleted = false
+		}
 		// `conversationHistory` (for API) and `clineMessages` (for webview)
 		// need to be in sync.
 		// If the extension process were killed, then on restart the
@@ -691,6 +738,9 @@ export class Task extends EventEmitter<ClineEvents> {
 		let responseImages: string[] | undefined
 		if (response === "messageResponse") {
 			await this.say("user_feedback", text, images)
+			if (this.isCompleted) {
+				this.isCompleted = false
+			}
 			responseText = text
 			responseImages = images
 		}

src/exports/roo-code.d.ts

@@ -55,6 +55,7 @@ type GlobalSettings = {
 				size?: number | undefined
 				workspace?: string | undefined
 				parent_task_id?: string | undefined
+				completed?: boolean | undefined
 		  }[]
 		| undefined
 	autoApprovalEnabled?: boolean | undefined
@@ -769,6 +770,7 @@ type IpcMessage =
 											size?: number | undefined
 											workspace?: string | undefined
 											parent_task_id?: string | undefined
+											completed?: boolean | undefined
 									  }[]
 									| undefined
 								autoApprovalEnabled?: boolean | undefined
@@ -1233,6 +1235,7 @@ type TaskCommand =
 								size?: number | undefined
 								workspace?: string | undefined
 								parent_task_id?: string | undefined
+								completed?: boolean | undefined
 						  }[]
 						| undefined
 					autoApprovalEnabled?: boolean | undefined

src/exports/types.ts

@@ -55,6 +55,7 @@ type GlobalSettings = {
 				size?: number | undefined
 				workspace?: string | undefined
 				parent_task_id?: string | undefined
+				completed?: boolean | undefined
 		  }[]
 		| undefined
 	autoApprovalEnabled?: boolean | undefined
@@ -783,6 +784,7 @@ type IpcMessage =
 											size?: number | undefined
 											workspace?: string | undefined
 											parent_task_id?: string | undefined
+											completed?: boolean | undefined
 									  }[]
 									| undefined
 								autoApprovalEnabled?: boolean | undefined
@@ -1249,6 +1251,7 @@ type TaskCommand =
 								size?: number | undefined
 								workspace?: string | undefined
 								parent_task_id?: string | undefined
+								completed?: boolean | undefined
 						  }[]
 						| undefined
 					autoApprovalEnabled?: boolean | undefined

src/schemas/index.ts

@@ -151,6 +151,7 @@ export const historyItemSchema = z.object({
 	size: z.number().optional(),
 	workspace: z.string().optional(),
 	parent_task_id: z.string().optional(),
+	completed: z.boolean().optional(),
 })
 
 export type HistoryItem = z.infer<typeof historyItemSchema>

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

@@ -2,9 +2,7 @@ import { memo } from "react"
 
 import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
-import { cn } from "@/lib/utils" // Added for cn utility
-import { useExtensionState } from "@/context/ExtensionStateContext" // Added for completion status
-import { ClineMessage } from "@roo/shared/ExtensionMessage" // Added for ClineMessage type
+import { useExtensionState } from "@/context/ExtensionStateContext"
 
 import { CopyButton } from "./CopyButton"
 import { useTaskSearch, HierarchicalHistoryItem } from "./useTaskSearch" // Updated import
@@ -13,29 +11,20 @@ import { Coins, ChevronRight } from "lucide-react" // Added ChevronRight for chi
 
 const HistoryPreview = () => {
 	const { tasks, showAllWorkspaces } = useTaskSearch()
-	const { clineMessages, currentTaskItem } = useExtensionState()
+	useExtensionState()
 
 	return (
 		<>
 			<div className="flex flex-col gap-3">
 				{tasks.length !== 0 && (
 					<>
 						{tasks.slice(0, 3).map((item: HierarchicalHistoryItem) => {
-							let isCompleted = false
-							if (item.id === currentTaskItem?.id && clineMessages) {
-								isCompleted = clineMessages.some(
-									(msg: ClineMessage) =>
-										(msg.type === "ask" && msg.ask === "completion_result") ||
-										(msg.type === "say" && msg.say === "completion_result"),
-								)
-							}
+							// Use the completed flag directly from the item
+							const isTaskMarkedCompleted = item.completed ?? false
 							return (
 								<div
 									key={item.id}
-									className={cn(
-										"bg-vscode-editor-background rounded relative overflow-hidden cursor-pointer border border-vscode-toolbar-hoverBackground/30 hover:border-vscode-toolbar-hoverBackground/60",
-										{ "bg-green-100/10 dark:bg-green-900/20": isCompleted }, // Adjusted green styling for preview
-									)}
+									className="bg-vscode-editor-background rounded relative overflow-hidden cursor-pointer border border-vscode-toolbar-hoverBackground/30 hover:border-vscode-toolbar-hoverBackground/60"
 									onClick={() => vscode.postMessage({ type: "showTaskWithId", text: item.id })}>
 									<div className="flex flex-col gap-2 p-3 pt-1">
 										<div className="flex justify-between items-center">
@@ -50,8 +39,11 @@ const HistoryPreview = () => {
 											<CopyButton itemTask={item.task} />
 										</div>
 										<div
-											className="text-vscode-foreground overflow-hidden whitespace-pre-wrap"
+											className="overflow-hidden whitespace-pre-wrap"
 											style={{
+												color: isTaskMarkedCompleted
+													? "var(--vscode-testing-iconPassed)"
+													: "var(--vscode-foreground)",
 												display: "-webkit-box",
 												WebkitLineClamp: 2,
 												WebkitBoxOrient: "vertical",