From f449045dc8d170c804258241ce8ad224ed5acae1 Mon Sep 17 00:00:00 2001
From: Susana Cardoso Ferreira <susana@coder.com>
Date: Tue, 25 Nov 2025 13:11:21 +0000
Subject: [PATCH] feat(site): use display name field for tasks

---
 .../TasksSidebar/TasksSidebar.stories.tsx     | 18 ++++++-
 .../tasks/TasksSidebar/TasksSidebar.tsx       |  4 +-
 .../src/pages/TasksPage/TasksPage.stories.tsx | 16 ++++++
 site/src/pages/TasksPage/TasksTable.tsx       |  4 +-
 site/src/testHelpers/entities.ts              | 53 ++++++++++++++++---
 5 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.stories.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.stories.tsx
index 7af5fa6b471c0..de99f37e5f09b 100644
--- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.stories.tsx
+++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.stories.tsx
@@ -1,4 +1,9 @@
-import { MockTasks, MockUserOwner, mockApiError } from "testHelpers/entities";
+import {
+	MockDisplayNameTasks,
+	MockTasks,
+	MockUserOwner,
+	mockApiError,
+} from "testHelpers/entities";
 import { withAuthProvider } from "testHelpers/storybook";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { API } from "api/api";
@@ -64,6 +69,17 @@ export const Loaded: Story = {
 	},
 };
 
+export const DisplayName: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["tasks", { owner: MockUserOwner.username }],
+				data: MockDisplayNameTasks,
+			},
+		],
+	},
+};
+
 export const Empty: Story = {
 	beforeEach: () => {
 		spyOn(API.experimental, "getTasks").mockResolvedValue([]);
diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
index eddbfa6f3f55e..793864f2622c9 100644
--- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
+++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
@@ -203,7 +203,9 @@ const TaskSidebarMenuItem: FC<TaskSidebarMenuItemProps> = ({ task }) => {
 					}}
 				>
 					<TaskSidebarMenuItemStatus task={task} />
-					<span className="truncate">{task.name}</span>
+					<span className="block max-w-[220px] truncate">
+						{task.display_name}
+					</span>
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
index 248ea8bae17d4..baff3bd2aa15b 100644
--- a/site/src/pages/TasksPage/TasksPage.stories.tsx
+++ b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -1,4 +1,5 @@
 import {
+	MockDisplayNameTasks,
 	MockInitializingTasks,
 	MockTasks,
 	MockTemplate,
@@ -122,6 +123,21 @@ export const LoadedTasks: Story = {
 	},
 };
 
+export const DisplayName: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["tasks", { owner: MockUserOwner.username }],
+				data: MockDisplayNameTasks,
+			},
+			{
+				key: getTemplatesQueryKey({ q: "has-ai-task:true" }),
+				data: [MockTemplate],
+			},
+		],
+	},
+};
+
 export const LoadedTasksWaitingForInputTab: Story = {
 	beforeEach: () => {
 		const [firstTask, ...otherTasks] = MockTasks;
diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
index 028386d243e38..5ea40bea710eb 100644
--- a/site/src/pages/TasksPage/TasksTable.tsx
+++ b/site/src/pages/TasksPage/TasksTable.tsx
@@ -135,8 +135,8 @@ const TaskRow: FC<TaskRowProps> = ({ task }) => {
 				<TableCell>
 					<AvatarData
 						title={
-							<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
-								{task.initial_prompt}
+							<span className="block max-w-[520px] truncate">
+								{task.display_name}
 							</span>
 						}
 						subtitle={templateDisplayName}
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index c1516ba3bb88b..f8213847f9874 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -4996,8 +4996,8 @@ export const MockAIPromptPresets: TypesGen.Preset[] = [
 
 export const MockTask = {
 	id: "test-task",
-	name: "task-wild-test-123",
-	display_name: "Task wild test 123",
+	name: "wild-test-123",
+	display_name: "Task wild test",
 	organization_id: MockOrganization.id,
 	owner_id: MockUserOwner.id,
 	owner_name: MockUserOwner.username,
@@ -5038,6 +5038,7 @@ export const MockTasks = [
 		...MockTask,
 		id: "task-2",
 		name: "fix-avatar-size",
+		display_name: "Fix avatar size",
 		current_state: {
 			...MockTask.current_state,
 			message: "Avatar size fixed!",
@@ -5048,6 +5049,7 @@ export const MockTasks = [
 		...MockTask,
 		id: "task-3",
 		name: "fix-accessibility-issues",
+		display_name: "Fix accessibility issues",
 		current_state: {
 			...MockTask.current_state,
 			message: "Accessibility issues fixed!",
@@ -5060,7 +5062,8 @@ export const MockInitializingTasks = [
 	{
 		...MockTask,
 		id: "task-1",
-		name: "task-workspace-pending",
+		name: "workspace-pending",
+		display_name: "Workspace pending",
 		initial_prompt: "Task Workspace Pending",
 		status: "initializing",
 		current_state: {
@@ -5073,7 +5076,8 @@ export const MockInitializingTasks = [
 	{
 		...MockTask,
 		id: "task-2",
-		name: "task-workspace-starting",
+		name: "workspace-starting",
+		display_name: "Workspace starting",
 		initial_prompt: "Task Workspace Starting",
 		status: "initializing",
 		current_state: {
@@ -5086,7 +5090,8 @@ export const MockInitializingTasks = [
 	{
 		...MockTask,
 		id: "task-3",
-		name: "task-agent-connecting",
+		name: "agent-connecting",
+		display_name: "Agent connecting",
 		initial_prompt: "Task Agent Connecting",
 		status: "initializing",
 		current_state: {
@@ -5099,7 +5104,8 @@ export const MockInitializingTasks = [
 	{
 		...MockTask,
 		id: "task-4",
-		name: "task-agent-starting",
+		name: "agent-starting",
+		display_name: "Agent Starting",
 		initial_prompt: "Task Agent Starting",
 		status: "initializing",
 		current_state: {
@@ -5112,7 +5118,8 @@ export const MockInitializingTasks = [
 	{
 		...MockTask,
 		id: "task-5",
-		name: "task-app-initializing",
+		name: "app-initializing",
+		display_name: "App Initializing",
 		initial_prompt: "Task App Initializing",
 		status: "initializing",
 		current_state: {
@@ -5124,6 +5131,38 @@ export const MockInitializingTasks = [
 	},
 ] satisfies TypesGen.Task[];
 
+export const MockDisplayNameTasks = [
+	{
+		...MockTask,
+	},
+	{
+		...MockTask,
+		id: "task-4",
+		name: "validate-email-regex",
+		// Display name with 64 characters with ellipsis
+		display_name:
+			"Write a function to validate email addresses using regular expr…",
+		current_state: {
+			...MockTask.current_state,
+			message: "Email validation complete!",
+			state: "complete",
+		},
+	},
+	{
+		...MockTask,
+		id: "payment-api-tests",
+		name: "payment-api-tests",
+		// Display name with 81 characters
+		display_name:
+			"Create a comprehensive test suite for the new payment processing microservice API",
+		current_state: {
+			...MockTask.current_state,
+			message: "Test suite created!",
+			state: "complete",
+		},
+	},
+] satisfies TypesGen.Task[];
+
 export const MockInterception: TypesGen.AIBridgeInterception = {
 	id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
 	initiator: {