fix task checks on list change

mafredri · mafredri · commit cba48d654a97 · 2025-11-25T12:09:23.000Z
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -63,19 +63,22 @@ const TasksPage: FC = () => {
 	const displayedTasks =
 		tab.value === "waiting-for-input" ? idleTasks : tasksQuery.data;
 
-	const [checkedTasks, setCheckedTasks] = useState<Task[]>([]);
+	const [checkedTaskIds, setCheckedTaskIds] = useState<Set<string>>(new Set());
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
+	const checkedTasks =
+		displayedTasks?.filter((t) => checkedTaskIds.has(t.id)) ?? [];
+
 	const batchActions = useBatchTaskActions({
 		onSuccess: async () => {
 			await tasksQuery.refetch();
-			setCheckedTasks([]);
+			setCheckedTaskIds(new Set());
 			setIsDeleteDialogOpen(false);
 		},
 	});
 
-	const handleCheckChange = (checked: typeof displayedTasks) => {
-		setCheckedTasks(Array.from(checked ?? []));
+	const handleCheckChange = (newIds: Set<string>) => {
+		setCheckedTaskIds(newIds);
 	};
 
 	const handleBatchDelete = () => {
@@ -104,7 +107,7 @@ const TasksPage: FC = () => {
 	// where selected tasks might no longer be visible.
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Reset on tab/filter changes.
 	useEffect(() => {
-		setCheckedTasks([]);
+		setCheckedTaskIds(new Set());
 	}, [tab.value, ownerFilter.value]);
 
 	return (
@@ -222,7 +225,7 @@ const TasksPage: FC = () => {
 									tasks={displayedTasks}
 									error={tasksQuery.error}
 									onRetry={tasksQuery.refetch}
-									checkedTasks={checkedTasks}
+									checkedTaskIds={checkedTaskIds}
 									onCheckChange={handleCheckChange}
 									canCheckTasks={canCheckTasks}
 								/>
diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
@@ -37,16 +37,16 @@ type TasksTableProps = {
 	tasks: readonly Task[] | undefined;
 	error: unknown;
 	onRetry: () => void;
-	checkedTasks?: readonly Task[];
-	onCheckChange?: (checkedTasks: readonly Task[]) => void;
+	checkedTaskIds?: Set<string>;
+	onCheckChange?: (checkedTaskIds: Set<string>) => void;
 	canCheckTasks?: boolean;
 };
 
 export const TasksTable: FC<TasksTableProps> = ({
 	tasks,
 	error,
 	onRetry,
-	checkedTasks = [],
+	checkedTaskIds = new Set(),
 	onCheckChange,
 	canCheckTasks = false,
 }) => {
@@ -60,19 +60,21 @@ export const TasksTable: FC<TasksTableProps> = ({
 		body = <TasksEmpty />;
 	} else {
 		body = tasks.map((task) => {
-			const checked = checkedTasks.some((t) => t.id === task.id);
+			const checked = checkedTaskIds.has(task.id);
 			return (
 				<TaskRow
 					key={task.id}
 					task={task}
 					checked={checked}
-					onCheckChange={(task, checked) => {
+					onCheckChange={(taskId, checked) => {
 						if (!onCheckChange) return;
+						const newIds = new Set(checkedTaskIds);
 						if (checked) {
-							onCheckChange([...checkedTasks, task]);
+							newIds.add(taskId);
 						} else {
-							onCheckChange(checkedTasks.filter((t) => t.id !== task.id));
+							newIds.delete(taskId);
 						}
+						onCheckChange(newIds);
 					}}
 					canCheck={canCheckTasks}
 				/>
@@ -93,7 +95,7 @@ export const TasksTable: FC<TasksTableProps> = ({
 									checked={
 										tasks &&
 										tasks.length > 0 &&
-										checkedTasks.length === tasks.length
+										checkedTaskIds.size === tasks.length
 									}
 									size="xsmall"
 									onChange={(_, checked) => {
@@ -102,9 +104,9 @@ export const TasksTable: FC<TasksTableProps> = ({
 										}
 
 										if (!checked) {
-											onCheckChange([]);
+											onCheckChange(new Set());
 										} else {
-											onCheckChange(tasks);
+											onCheckChange(new Set(tasks.map((t) => t.id)));
 										}
 									}}
 									aria-label="Select all tasks"
@@ -173,7 +175,7 @@ const TasksEmpty: FC = () => {
 type TaskRowProps = {
 	task: Task;
 	checked: boolean;
-	onCheckChange: (task: Task, checked: boolean) => void;
+	onCheckChange: (taskId: string, checked: boolean) => void;
 	canCheck: boolean;
 };
 
@@ -212,7 +214,7 @@ const TaskRow: FC<TaskRowProps> = ({
 									e.stopPropagation();
 								}}
 								onChange={(e) => {
-									onCheckChange(task, e.currentTarget.checked);
+									onCheckChange(task.id, e.currentTarget.checked);
 								}}
 								aria-label={`Select task ${task.initial_prompt}`}
 							/>
