feat(history): render nested subtasks as recursive tree

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

@@ -38,6 +38,7 @@ const HistoryPreview = () => {
 							group={group}
 							variant="compact"
 							onToggleExpand={() => toggleExpand(group.parent.id)}
+							onToggleSubtaskExpand={toggleExpand}
 						/>
 					))}
 				</>

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

@@ -21,6 +21,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import { useTaskSearch } from "./useTaskSearch"
 import { useGroupedTasks } from "./useGroupedTasks"
+import { countAllSubtasks } from "./types"
 import TaskItem from "./TaskItem"
 import TaskGroupItem from "./TaskGroupItem"
 
@@ -52,11 +53,11 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([])
 	const [showBatchDeleteDialog, setShowBatchDeleteDialog] = useState<boolean>(false)
 
-	// Get subtask count for a task
+	// Get subtask count for a task (recursive total)
 	const getSubtaskCount = useMemo(() => {
 		const countMap = new Map<string, number>()
 		for (const group of groups) {
-			countMap.set(group.parent.id, group.subtasks.length)
+			countMap.set(group.parent.id, countAllSubtasks(group.subtasks))
 		}
 		return (taskId: string) => countMap.get(taskId) || 0
 	}, [groups])
@@ -300,6 +301,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								onToggleSelection={toggleTaskSelection}
 								onDelete={handleDelete}
 								onToggleExpand={() => toggleExpand(group.parent.id)}
+								onToggleSubtaskExpand={toggleExpand}
 								className="m-2"
 							/>
 						)}

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

@@ -2,46 +2,87 @@ import { memo } from "react"
 import { ArrowRight } from "lucide-react"
 import { vscode } from "@/utils/vscode"
 import { cn } from "@/lib/utils"
-import type { DisplayHistoryItem } from "./types"
+import type { SubtaskTreeNode } from "./types"
+import { countAllSubtasks } from "./types"
 import { StandardTooltip } from "../ui"
+import SubtaskCollapsibleRow from "./SubtaskCollapsibleRow"
 
 interface SubtaskRowProps {
-	/** The subtask to display */
-	item: DisplayHistoryItem
+	/** The subtask tree node to display */
+	node: SubtaskTreeNode
+	/** Nesting depth (1 = direct child of parent group) */
+	depth: number
+	/** Callback when expand/collapse is toggled for a node */
+	onToggleExpand: (taskId: string) => void
 	/** Optional className for styling */
 	className?: string
 }
 
 /**
- * Displays an individual subtask row when the parent's subtask list is expanded.
- * Shows the task name and token/cost info in an indented format.
+ * Displays a subtask row with recursive nesting support.
+ * Leaf nodes render just the task row. Nodes with children show
+ * a collapsible section that can be expanded to reveal nested subtasks.
  */
-const SubtaskRow = ({ item, className }: SubtaskRowProps) => {
+const SubtaskRow = ({ node, depth, onToggleExpand, className }: SubtaskRowProps) => {
+	const { item, children, isExpanded } = node
+	const hasChildren = children.length > 0
+
 	const handleClick = () => {
 		vscode.postMessage({ type: "showTaskWithId", text: item.id })
 	}
 
 	return (
-		<div
-			data-testid={`subtask-row-${item.id}`}
-			className={cn(
-				"group flex items-center justify-between gap-2 pl-1 pr-4 py-1 ml-6 cursor-pointer",
-				"text-vscode-foreground/60 hover:text-vscode-foreground transition-colors",
-				className,
+		<div data-testid={`subtask-row-${item.id}`} className={className}>
+			{/* Task row with depth indentation */}
+			<div
+				className={cn(
+					"group flex items-center justify-between gap-2 pr-4 py-1 cursor-pointer",
+					"text-vscode-foreground/60 hover:text-vscode-foreground transition-colors",
+				)}
+				style={{ paddingLeft: `${depth * 16}px` }}
+				onClick={handleClick}
+				role="button"
+				tabIndex={0}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault()
+						handleClick()
+					}
+				}}>
+				<StandardTooltip content={item.task} delay={600}>
+					<span className="text-sm line-clamp-1">{item.task}</span>
+				</StandardTooltip>
+				<ArrowRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+			</div>
+
+			{/* Nested subtask collapsible section */}
+			{hasChildren && (
+				<div style={{ paddingLeft: `${depth * 16}px` }}>
+					<SubtaskCollapsibleRow
+						count={countAllSubtasks(children)}
+						isExpanded={isExpanded}
+						onToggle={() => onToggleExpand(item.id)}
+					/>
+				</div>
+			)}
+
+			{/* Expanded nested subtasks */}
+			{hasChildren && (
+				<div
+					className={cn(
+						"overflow-clip transition-all duration-300",
+						isExpanded ? "max-h-[2000px]" : "max-h-0",
+					)}>
+					{children.map((child) => (
+						<SubtaskRow
+							key={child.item.id}
+							node={child}
+							depth={depth + 1}
+							onToggleExpand={onToggleExpand}
+						/>
+					))}
+				</div>
 			)}
-			onClick={handleClick}
-			role="button"
-			tabIndex={0}
-			onKeyDown={(e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault()
-					handleClick()
-				}
-			}}>
-			<StandardTooltip content={item.task} delay={600}>
-				<span className="text-sm line-clamp-1">{item.task}</span>
-			</StandardTooltip>
-			<ArrowRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
 		</div>
 	)
 }

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

@@ -1,6 +1,7 @@
 import { memo } from "react"
 import { cn } from "@/lib/utils"
 import type { TaskGroup } from "./types"
+import { countAllSubtasks } from "./types"
 import TaskItem from "./TaskItem"
 import SubtaskCollapsibleRow from "./SubtaskCollapsibleRow"
 import SubtaskRow from "./SubtaskRow"
@@ -20,15 +21,17 @@ interface TaskGroupItemProps {
 	onToggleSelection?: (taskId: string, isSelected: boolean) => void
 	/** Callback when delete is requested */
 	onDelete?: (taskId: string) => void
-	/** Callback when expand/collapse is toggled */
+	/** Callback when the parent group expand/collapse is toggled */
 	onToggleExpand: () => void
+	/** Callback when a nested subtask node expand/collapse is toggled */
+	onToggleSubtaskExpand: (taskId: string) => void
 	/** Optional className for styling */
 	className?: string
 }
 
 /**
- * Renders a task group consisting of a parent task and its collapsible subtask list.
- * When expanded, shows individual subtask rows.
+ * Renders a task group consisting of a parent task and its collapsible subtask tree.
+ * When expanded, shows recursively nested subtask rows.
  */
 const TaskGroupItem = ({
 	group,
@@ -39,10 +42,12 @@ const TaskGroupItem = ({
 	onToggleSelection,
 	onDelete,
 	onToggleExpand,
+	onToggleSubtaskExpand,
 	className,
 }: TaskGroupItemProps) => {
 	const { parent, subtasks, isExpanded } = group
 	const hasSubtasks = subtasks.length > 0
+	const totalSubtaskCount = hasSubtasks ? countAllSubtasks(subtasks) : 0
 
 	return (
 		<div
@@ -63,21 +68,21 @@ const TaskGroupItem = ({
 				hasSubtasks={hasSubtasks}
 			/>
 
-			{/* Subtask collapsible row */}
+			{/* Subtask collapsible row — shows total recursive count */}
 			{hasSubtasks && (
-				<SubtaskCollapsibleRow count={subtasks.length} isExpanded={isExpanded} onToggle={onToggleExpand} />
+				<SubtaskCollapsibleRow count={totalSubtaskCount} isExpanded={isExpanded} onToggle={onToggleExpand} />
 			)}
 
-			{/* Expanded subtasks */}
+			{/* Expanded subtask tree */}
 			{hasSubtasks && (
 				<div
 					data-testid="subtask-list"
 					className={cn(
 						"overflow-clip transition-all duration-500",
-						isExpanded ? "max-h-100 pb-2" : "max-h-0",
+						isExpanded ? "max-h-[2000px] pb-2" : "max-h-0",
 					)}>
-					{subtasks.map((subtask) => (
-						<SubtaskRow key={subtask.id} item={subtask} />
+					{subtasks.map((node) => (
+						<SubtaskRow key={node.item.id} node={node} depth={1} onToggleExpand={onToggleSubtaskExpand} />
 					))}
 				</div>
 			)}