Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClickableTableRow } from "hooks";
 import { RotateCcwIcon, TrashIcon } from "lucide-react";
 import { TaskDeleteDialog } from "modules/tasks/TaskDeleteDialog/TaskDeleteDialog";
 import { TaskStatus } from "modules/tasks/TaskStatus/TaskStatus";
 import { type FC, type ReactNode, useState } from "react";
 import {Link as RouterLink } from "react-router";
 import {useNavigate } from "react-router";
 import { relativeTime } from "utils/time";

 type TasksTableProps = {
 const TaskRow: FC<TaskRowProps> = ({ task }) => {
 const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 const templateDisplayName = task.template_display_name ?? task.template_name;
 const navigate = useNavigate();

 const taskPageLink = `/tasks/${task.owner_name}/${task.id}`;
 // Discard role, breaks Chromatic.
 const { role, ...clickableRowProps } = useClickableTableRow({
 onClick: () => navigate(taskPageLink),
 });

 return (
 <>
 <TableRow className="relative" hover>
 <TableRow
 key={task.id}
 data-testid={`task-${task.id}`}
 {...clickableRowProps}
 >
 <TableCell>
 <AvatarData
 title={
 <>
 <span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
 {task.initial_prompt}
 </span>
 <RouterLink
 to={`/tasks/${task.owner_name}/${task.id}`}
 className="absolute inset-0"
 >
 <span className="sr-only">Access task</span>
 </RouterLink>
 </>
 <span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
 {task.initial_prompt}
 </span>
 }
 subtitle={templateDisplayName}
 avatar={
 <Button
 size="icon"
 variant="outline"
 className="relative z-50"
 onClick={() => setIsDeleteDialogOpen(true)}
 onClick={(e) => {
 e.stopPropagation();
 setIsDeleteDialogOpen(true);
 }}
 >
 <span className="sr-only">Delete task</span>
 <TrashIcon />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,11 +23,12 @@ import {
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { useClickableTableRow } from "hooks";
		import { RotateCcwIcon, TrashIcon } from "lucide-react";
		import { TaskDeleteDialog } from "modules/tasks/TaskDeleteDialog/TaskDeleteDialog";
		import { TaskStatus } from "modules/tasks/TaskStatus/TaskStatus";
		import { type FC, type ReactNode, useState } from "react";
		import {Link as RouterLink } from "react-router";
		import {useNavigate } from "react-router";
		import { relativeTime } from "utils/time";

		type TasksTableProps = {
Expand DownExpand Up		@@ -116,24 +117,27 @@ type TaskRowProps = { task: Task };
		const TaskRow: FC<TaskRowProps> = ({ task }) => {
		const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
		const templateDisplayName = task.template_display_name ?? task.template_name;
		const navigate = useNavigate();

		const taskPageLink = `/tasks/${task.owner_name}/${task.id}`;
		// Discard role, breaks Chromatic.
		const { role, ...clickableRowProps } = useClickableTableRow({
		onClick: () => navigate(taskPageLink),
		});

		return (
		<>
		<TableRow className="relative" hover>
		<TableRow
		key={task.id}
		data-testid={`task-${task.id}`}
		{...clickableRowProps}
		>
		<TableCell>
		<AvatarData
		title={
		<>
		<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
		{task.initial_prompt}
		</span>
		<RouterLink
		to={`/tasks/${task.owner_name}/${task.id}`}
		className="absolute inset-0"
		>
		<span className="sr-only">Access task</span>
		</RouterLink>
		</>
		<span className="block max-w-[520px] overflow-hidden text-ellipsis whitespace-nowrap">
		{task.initial_prompt}
		</span>
		}
		subtitle={templateDisplayName}
		avatar={
Expand DownExpand Up		@@ -171,8 +175,10 @@ const TaskRow: FC<TaskRowProps> = ({ task }) => {
		<Button
		size="icon"
		variant="outline"
		className="relative z-50"
		onClick={() => setIsDeleteDialogOpen(true)}
		onClick={(e) => {
		e.stopPropagation();
		setIsDeleteDialogOpen(true);
		}}
		>
		<span className="sr-only">Delete task</span>
		<TrashIcon />
Expand Down