diff --git a/webview-ui/src/components/chat/task-dashboard/TaskDashboard.tsx b/webview-ui/src/components/chat/task-dashboard/TaskDashboard.tsx
new file mode 100644
index 00000000000..b06f21cbbee
--- /dev/null
+++ b/webview-ui/src/components/chat/task-dashboard/TaskDashboard.tsx
@@ -0,0 +1,213 @@
+import { memo, useState, useCallback, useMemo } from "react"
+import { ChevronDown, ChevronRight, GitBranch } from "lucide-react"
+
+import type { ModeConfig } from "@roo-code/types"
+
+import { getAllModes } from "@roo/modes"
+
+import { cn } from "@src/lib/utils"
+import { vscode } from "@src/utils/vscode"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
+
+import type { TaskTreeNode } from "./useTaskTree"
+import { useTaskTree } from "./useTaskTree"
+
+/**
+ * Status badge colors for task states.
+ */
+const statusConfig: Record
= {
+ active: { label: "Active", className: "bg-vscode-charts-green text-white" },
+ delegated: { label: "Delegated", className: "bg-vscode-charts-blue text-white" },
+ completed: {
+ label: "Completed",
+ className: "bg-vscode-descriptionForeground/30 text-vscode-descriptionForeground",
+ },
+}
+
+interface TaskNodeRowProps {
+ node: TaskTreeNode
+ depth: number
+ currentTaskId?: string
+ modeMap: Map
+}
+
+/**
+ * A single row in the task tree, showing mode name, status badge,
+ * and active indicator. Supports click-to-navigate.
+ */
+const TaskNodeRow = memo(({ node, depth, currentTaskId, modeMap }: TaskNodeRowProps) => {
+ const { item, children } = node
+ const hasChildren = children.length > 0
+ const [isNodeExpanded, setIsNodeExpanded] = useState(true)
+ const isCurrentTask = item.id === currentTaskId
+ const modeConfig = item.mode ? modeMap.get(item.mode) : undefined
+ const modeName = modeConfig?.name ?? item.mode ?? "Unknown"
+ const status = item.status ?? "active"
+ const statusInfo = statusConfig[status] ?? statusConfig.active
+
+ const handleClick = useCallback(() => {
+ vscode.postMessage({ type: "showTaskWithId", text: item.id })
+ }, [item.id])
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault()
+ handleClick()
+ }
+ },
+ [handleClick],
+ )
+
+ const toggleNodeExpanded = useCallback((e: React.MouseEvent) => {
+ e.stopPropagation()
+ setIsNodeExpanded((prev) => !prev)
+ }, [])
+
+ // Truncate task description for display
+ const taskSummary = item.task.length > 60 ? item.task.slice(0, 57) + "..." : item.task
+
+ return (
+
+
+ {/* Expand/collapse toggle for nodes with children */}
+ {hasChildren ? (
+
+ ) : (
+
+ )}
+
+ {/* Mode icon/indicator */}
+
+
+ {/* Mode name */}
+
+ {modeName}
+
+
+ {/* Status badge */}
+
+ {statusInfo.label}
+
+
+ {/* Task summary (truncated) */}
+
+ {taskSummary}
+
+
+
+ {/* Render children (collapsible) */}
+ {hasChildren && isNodeExpanded && (
+
+ {children.map((child) => (
+
+ ))}
+
+ )}
+
+ {/* Header */}
+
+
+ {/* Tree content */}
+ {isExpanded && (
+
+
+
+ )}
+