feat: update task workspace name format and prevent title overflow (#18315)

hugodutka · web-flow · commit c95d972d4eb8 · 2025-06-12T10:05:17.000+02:00
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -12,6 +12,7 @@ import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
+import { ellipsizeText } from "utils/ellipsizeText";
 import { pageTitle } from "utils/page";
 import { TaskApps } from "./TaskApps";
 import { TaskSidebar } from "./TaskSidebar";
@@ -163,7 +164,7 @@ const TaskPage = () => {
 	return (
 		<>
 			<Helmet>
-				<title>{pageTitle(task.prompt)}</title>
+				<title>{pageTitle(ellipsizeText(task.prompt, 64)!)}</title>
 			</Helmet>
 
 			<div className="h-full flex justify-stretch">
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
@@ -97,7 +97,9 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
 					</DropdownMenu>
 				</div>
 
-				<h1 className="m-0 mt-1 text-base font-medium">{task.prompt}</h1>
+				<h1 className="m-0 mt-1 text-base font-medium truncate">
+					{task.prompt}
+				</h1>
 
 				{task.workspace.latest_app_status?.uri && (
 					<div className="flex items-center gap-2 mt-2 flex-wrap">
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -32,6 +32,7 @@ import { useAuthenticated } from "hooks";
 import { ExternalLinkIcon, RotateCcwIcon, SendIcon } from "lucide-react";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus";
+import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
 import { type FC, type ReactNode, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -489,7 +490,7 @@ export const data = {
 		templateId: string,
 	): Promise<Task> {
 		const workspace = await API.createWorkspace(userId, {
-			name: `task-${new Date().getTime()}`,
+			name: `task-${generateWorkspaceName()}`,
 			template_id: templateId,
 			rich_parameter_values: [
 				{ name: AI_PROMPT_PARAMETER_NAME, value: prompt },
