Sep 24, 2025 · Sep 22, 2025
diff --git a/site/src/pages/TasksPage/TaskPrompt.tsx b/site/src/pages/TasksPage/TaskPrompt.tsx
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Link } from "components/Link/Link";
 import {
 Select,
 import { AI_PROMPT_PARAMETER_NAME } from "modules/tasks/tasks";
 import { type FC, useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router";
 import TextareaAutosize from "react-textarea-autosize";
 import { docs } from "utils/docs";

 error,
 onRetry,
 }) => {
 const navigate = useNavigate();

 if (error) {
 return <TaskPromptLoadingError error={error} onRetry={onRetry} />;
 }
 return (
 <CreateTaskForm
 templates={templates}
 onSuccess={(task) => {
 navigate(`/tasks/${task.owner_name}/${task.name}`);
 onSuccess={() => {
 displaySuccess("Task created successfully");
 }}
 />
 );
 template_version_preset_id: selectedPresetId,
 }),
 onSuccess: async (task) => {
 await queryClient.invalidateQueries({
 queryKey: ["tasks"],
 });
 await queryClient.invalidateQueries({ queryKey: ["tasks"] });
 onSuccess(task);
 },
 });
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
 };

 export const CreateTaskSuccessfully: Story = {
 decorators: [withGlobalSnackbar],
 parameters: {
 reactRouter: reactRouterParameters({
 location: {
 await userEvent.click(submitButton);
 });

 await step("Redirects to the task page", async () => {
 await canvas.findByText(/task page/i);
 await step("Displays success message", async () => {
 const body = within(canvasElement.ownerDocument.body);
 const successMessage = await body.findByText(/task created/i);
 expect(successMessage).toBeInTheDocument();
 });

 await step("Find task in the table", async () => {
 const table = canvasElement.querySelector("table");
 await waitFor(() => {
 expect(table).toHaveTextContent(MockNewTaskData.prompt);
 });
 });
 },
 };
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
 queryKey: ["tasks", filter],
 queryFn: () => API.experimental.getTasks(filter),
 refetchInterval: 10_000,
 // TODO: Switch to sorting by latest_status_app.created_at once it’s reliable.
 // Currently, it doesn’t always update fast enough for a good UX, so we’re
 // temporarily sorting by workspace.created_at instead.
 select: (tasks) =>
 tasks.toSorted(
 (a, b) =>
 new Date(b.workspace.created_at).getTime() -
 new Date(a.workspace.created_at).getTime(),
 ),
 });
 const idleTasks = tasksQuery.data?.filter(
 (task) => task.workspace.latest_app_status?.state === "idle",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ import type {
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { Button } from "components/Button/Button";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { displayError } from "components/GlobalSnackbar/utils";
		import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
		import { Link } from "components/Link/Link";
		import {
		Select,
Expand All		@@ -33,7 +33,6 @@ import { RedoIcon, RotateCcwIcon, SendIcon } from "lucide-react";
		import { AI_PROMPT_PARAMETER_NAME } from "modules/tasks/tasks";
		import { type FC, useEffect, useState } from "react";
		import { useMutation, useQuery, useQueryClient } from "react-query";
		import { useNavigate } from "react-router";
		import TextareaAutosize from "react-textarea-autosize";
		import { docs } from "utils/docs";

Expand All		@@ -50,8 +49,6 @@ export const TaskPrompt: FC<TaskPromptProps> = ({
		error,
		onRetry,
		}) => {
		const navigate = useNavigate();

		if (error) {
		return <TaskPromptLoadingError error={error} onRetry={onRetry} />;
		}
Expand All		@@ -64,8 +61,8 @@ export const TaskPrompt: FC<TaskPromptProps> = ({
		return (
		<CreateTaskForm
		templates={templates}
		onSuccess={(task) => {
		navigate(`/tasks/${task.owner_name}/${task.name}`);
		onSuccess={() => {
		displaySuccess("Task created successfully");
		}}
		/>
		);
Expand DownExpand Up		@@ -195,9 +192,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
		template_version_preset_id: selectedPresetId,
		}),
		onSuccess: async (task) => {
		await queryClient.invalidateQueries({
		queryKey: ["tasks"],
		});
		await queryClient.invalidateQueries({ queryKey: ["tasks"] });
		onSuccess(task);
		},
		});
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -226,6 +226,7 @@ export const LoadedTasksWaitingForInputTab: Story = {
		};

		export const CreateTaskSuccessfully: Story = {
		decorators: [withGlobalSnackbar],
		parameters: {
		reactRouter: reactRouterParameters({
		location: {
Expand DownExpand Up		@@ -261,8 +262,17 @@ export const CreateTaskSuccessfully: Story = {
		await userEvent.click(submitButton);
		});

		await step("Redirects to the task page", async () => {
		await canvas.findByText(/task page/i);
		await step("Displays success message", async () => {
		const body = within(canvasElement.ownerDocument.body);
		const successMessage = await body.findByText(/task created/i);
		expect(successMessage).toBeInTheDocument();
		});

		await step("Find task in the table", async () => {
		const table = canvasElement.querySelector("table");
		await waitFor(() => {
		expect(table).toHaveTextContent(MockNewTaskData.prompt);
		});
		});
		},
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -43,6 +43,15 @@ const TasksPage: FC = () => {
		queryKey: ["tasks", filter],
		queryFn: () => API.experimental.getTasks(filter),
		refetchInterval: 10_000,
		// TODO: Switch to sorting by latest_status_app.created_at once it’s reliable.
		// Currently, it doesn’t always update fast enough for a good UX, so we’re
		// temporarily sorting by workspace.created_at instead.
		select: (tasks) =>
		tasks.toSorted(
		(a, b) =>
		new Date(b.workspace.created_at).getTime() -
		new Date(a.workspace.created_at).getTime(),
		),
		});
		const idleTasks = tasksQuery.data?.filter(
		(task) => task.workspace.latest_app_status?.state === "idle",
Expand Down