From 92befc034075396acb4f6283c715253c52557e5a Mon Sep 17 00:00:00 2001
From: Susana Ferreira <susana@coder.com>
Date: Thu, 27 Nov 2025 15:57:35 +0000
Subject: [PATCH] fix: show task display name in task topbar (#20957)

## Description

Update task topbar in task page to show display name, instead of task
name.

Follow-up PR: https://github.com/coder/coder/pull/20918
Related to internal slack thread:
https://codercom.slack.com/archives/C0992H8HGCS/p1764086497375829

(cherry picked from commit 21efebeadcf4bb3dba4335c0f51fb8ffb4840094)
---
 site/src/pages/TaskPage/TaskPage.stories.tsx | 33 ++++++++++++++++++++
 site/src/pages/TaskPage/TaskTopbar.tsx       |  6 ++--
 site/src/testHelpers/entities.ts             |  4 +--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
index b0e191805c5d0..cfe4c90a65e00 100644
--- a/site/src/pages/TaskPage/TaskPage.stories.tsx
+++ b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -1,5 +1,6 @@
 import {
 	MockDeletedWorkspace,
+	MockDisplayNameTasks,
 	MockFailedWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
@@ -561,6 +562,38 @@ export const WorkspaceStartFailureWithDialog: Story = {
 	},
 };
 
+const longDisplayName =
+	"Implement comprehensive authentication and authorization system with role-based access control";
+export const LongDisplayName: Story = {
+	parameters: {
+		queries: [
+			{
+				// Sidebar: uses getTasks() which returns an array
+				key: ["tasks", { owner: MockTask.owner_name }],
+				data: [
+					{ ...MockDisplayNameTasks[0], display_name: longDisplayName },
+					...MockDisplayNameTasks.slice(1),
+				],
+			},
+			{
+				// TaskTopbar: uses getTask() which returns a single task
+				key: ["tasks", MockTask.owner_name, MockTask.id],
+				data: { ...MockDisplayNameTasks[0], display_name: longDisplayName },
+			},
+			{
+				// Workspace data for the task
+				key: [
+					"workspace",
+					MockTask.owner_name,
+					MockTask.workspace_name,
+					"settings",
+				],
+				data: MockWorkspace,
+			},
+		],
+	},
+};
+
 function mockTaskWithWorkspace(
 	sidebarApp: WorkspaceApp,
 	activeApp: WorkspaceApp,
diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx
index b5affcbfffe0b..41f4d7c0f7b71 100644
--- a/site/src/pages/TaskPage/TaskTopbar.tsx
+++ b/site/src/pages/TaskPage/TaskTopbar.tsx
@@ -23,7 +23,7 @@ type TaskTopbarProps = { task: Task; workspace: Workspace };
 
 export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 	return (
-		<header className="flex flex-shrink-0 items-center p-3 border-solid border-border border-0 border-b">
+		<header className="flex flex-shrink-0 items-center gap-2 p-3 border-solid border-border border-0 border-b">
 			<TooltipProvider>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -38,7 +38,9 @@ export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 				</Tooltip>
 			</TooltipProvider>
 
-			<h1 className="m-0 pl-2 text-base font-medium truncate">{task.name}</h1>
+			<h1 className="m-0 pl-2 text-base font-medium max-w-[520px] truncate">
+				{task.display_name}
+			</h1>
 
 			{task.current_state?.uri && (
 				<div className="flex items-center gap-2 flex-wrap ml-4">
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 6c89deb873023..4c1087c7b328d 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -4971,8 +4971,8 @@ export const MockAIPromptPresets: TypesGen.Preset[] = [
 
 export const MockTask = {
 	id: "test-task",
-	name: "wild-test-123",
-	display_name: "Task wild test",
+	name: "perform-some-task-123",
+	display_name: "Perform some task",
 	organization_id: MockOrganization.id,
 	owner_id: MockUserOwner.id,
 	owner_name: MockUserOwner.username,