From 30ca144231c36a6c63911f20adc225d38fb15a2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Vedovelli?= <vedovelli@gmail.com>
Date: Mon, 11 Aug 2025 09:42:31 -0300
Subject: [PATCH] feat: Add task id to task details UI (#1100)

* Display current task ID on task details page

* Changeset

* Implement CodeRabbit review suggestion.

* chore: fix CI errors

---------

Co-authored-by: Ralph Khreish <35776126+Crunchyman-ralph@users.noreply.github.com>
---
 .changeset/light-crabs-warn.md                   |  5 +++++
 .../extension/src/components/TaskDetailsView.tsx | 16 +++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/light-crabs-warn.md

diff --git a/.changeset/light-crabs-warn.md b/.changeset/light-crabs-warn.md
new file mode 100644
index 00000000..65db3287
--- /dev/null
+++ b/.changeset/light-crabs-warn.md
@@ -0,0 +1,5 @@
+---
+"extension": minor
+---
+
+Display current task ID on task details page
diff --git a/apps/extension/src/components/TaskDetailsView.tsx b/apps/extension/src/components/TaskDetailsView.tsx
index 5fc72325..8cdb4b56 100644
--- a/apps/extension/src/components/TaskDetailsView.tsx
+++ b/apps/extension/src/components/TaskDetailsView.tsx
@@ -53,6 +53,11 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 		refreshComplexityAfterAI
 	} = useTaskDetails({ taskId, sendMessage, tasks: allTasks });
 
+	const displayId =
+		isSubtask && parentTask
+			? `${parentTask.id}.${currentTask?.id}`
+			: currentTask?.id;
+
 	const handleStatusChange = async (newStatus: TaskMasterTask['status']) => {
 		if (!currentTask) return;
 
@@ -60,10 +65,7 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 			await sendMessage({
 				type: 'updateTaskStatus',
 				data: {
-					taskId:
-						isSubtask && parentTask
-							? `${parentTask.id}.${currentTask.id}`
-							: currentTask.id,
+					taskId: displayId,
 					newStatus: newStatus
 				}
 			});
@@ -135,7 +137,7 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 								<BreadcrumbSeparator />
 								<BreadcrumbItem>
 									<span className="text-vscode-foreground">
-										{currentTask.title}
+										#{displayId} {currentTask.title}
 									</span>
 								</BreadcrumbItem>
 							</BreadcrumbList>
@@ -152,9 +154,9 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 						</button>
 					</div>
 
-					{/* Task title */}
+					{/* Task ID and title */}
 					<h1 className="text-2xl font-bold tracking-tight text-vscode-foreground">
-						{currentTask.title}
+						#{displayId} {currentTask.title}
 					</h1>
 
 					{/* Description */}