coder · BrunoQuaresma · May 27, 2025 · May 22, 2025 · May 23, 2025 · May 24, 2025
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -3346,6 +3346,7 @@ const (
 	ExperimentDynamicParameters  Experiment = "dynamic-parameters"   // Enables dynamic parameters when creating a workspace.
 	ExperimentWorkspacePrebuilds Experiment = "workspace-prebuilds"  // Enables the new workspace prebuilds feature.
 	ExperimentAgenticChat        Experiment = "agentic-chat"         // Enables the new agentic AI chat feature.
+	ExperimentAITasks            Experiment = "ai-tasks"             // Enables the new AI tasks feature.
 )
 
 // ExperimentsSafe should include all experiments that are safe for

diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -1,13 +1,16 @@
 import { API } from "api/api";
+import { experiments } from "api/queries/experiments";
 import type * as TypesGen from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import type { ProxyContextValue } from "contexts/ProxyContext";
 import { useAgenticChat } from "contexts/useAgenticChat";
 import { useWebpushNotifications } from "contexts/useWebpushNotifications";
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
 import type { FC } from "react";
+import { useQuery } from "react-query";
 import { NavLink, useLocation } from "react-router-dom";
 import { cn } from "utils/cn";
 import { DeploymentDropdown } from "./DeploymentDropdown";
@@ -141,6 +144,8 @@ interface NavItemsProps {
 const NavItems: FC<NavItemsProps> = ({ className }) => {
 	const location = useLocation();
 	const agenticChat = useAgenticChat();
+	const { metadata } = useEmbeddedMetadata();
+	const experimentsQuery = useQuery(experiments(metadata.experiments));
 
 	return (
 		<nav className={cn("flex items-center gap-4 h-full", className)}>
@@ -163,7 +168,7 @@ const NavItems: FC<NavItemsProps> = ({ className }) => {
 			>
 				Templates
 			</NavLink>
-			{agenticChat.enabled ? (
+			{agenticChat.enabled && (
 				<NavLink
 					className={({ isActive }) => {
 						return cn(linkStyles.default, isActive ? linkStyles.active : "");
@@ -172,7 +177,17 @@ const NavItems: FC<NavItemsProps> = ({ className }) => {
 				>
 					Chat
 				</NavLink>
-			) : null}
+			)}
+			{experimentsQuery.data?.includes("ai-tasks") && (
+				<NavLink
+					className={({ isActive }) => {
+						return cn(linkStyles.default, isActive ? linkStyles.active : "");
+					}}
+					to="/tasks"
+				>
+					Tasks
+				</NavLink>
+			)}
 		</nav>
 	);
 };
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, spyOn, userEvent, within } from "@storybook/test";
+import {
+	MockTemplate,
+	MockUserOwner,
+	MockWorkspace,
+	MockWorkspaceAppStatus,
+	mockApiError,
+} from "testHelpers/entities";
+import {
+	withAuthProvider,
+	withGlobalSnackbar,
+	withProxyProvider,
+} from "testHelpers/storybook";
+import TasksPage, { data } from "./TasksPage";
+
+const meta: Meta<typeof TasksPage> = {
+	title: "pages/TasksPage",
+	component: TasksPage,
+	decorators: [withAuthProvider],
+	parameters: {
+		user: MockUserOwner,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof TasksPage>;
+
+export const LoadingAITemplates: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockImplementation(
+			() => new Promise((res) => 1000 * 60 * 60),
+		);
+	},
+};
+
+export const LoadingAITemplatesError: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockRejectedValue(
+			mockApiError({
+				message: "Failed to load AI templates",
+				detail: "You don't have permission to access this resource.",
+			}),
+		);
+	},
+};
+
+export const EmptyAITemplates: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([]);
+	},
+};
+
+export const LoadingTasks: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockImplementation(
+			() => new Promise((res) => 1000 * 60 * 60),
+		);
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("Select the first AI template", async () => {
+			const combobox = await canvas.findByRole("combobox");
+			expect(combobox).toHaveTextContent(MockTemplate.display_name);
+		});
+	},
+};
+
+export const LoadingTasksError: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockRejectedValue(
+			mockApiError({
+				message: "Failed to load tasks",
+			}),
+		);
+	},
+};
+
+export const EmptyTasks: Story = {
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockResolvedValue([]);
+	},
+};
+
+export const LoadedTasks: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
+	},
+};
+
+export const CreateTaskSuccessfully: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
+		spyOn(data, "createTask").mockImplementation((prompt: string) => {
+			return Promise.resolve({
+				prompt,
+				workspace: {
+					...MockWorkspace,
+					latest_app_status: {
+						...MockWorkspaceAppStatus,
+						message: "Task created successfully!",
+					},
+				},
+			});
+		});
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("Run task", async () => {
+			const prompt = await canvas.findByLabelText(/prompt/i);
+			await userEvent.type(prompt, "Create a new task");
+			const submitButton = canvas.getByRole("button", { name: /run task/i });
+			await userEvent.click(submitButton);
+		});
+
+		await step("Verify task in the table", async () => {
+			await canvas.findByRole("row", {
+				name: /create a new task/i,
+			});
+		});
+	},
+};
+
+export const CreateTaskError: Story = {
+	decorators: [withProxyProvider(), withGlobalSnackbar],
+	beforeEach: () => {
+		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
+		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
+		spyOn(data, "createTask").mockRejectedValue(
+			mockApiError({
+				message: "Failed to create task",
+				detail: "You don't have permission to create tasks.",
+			}),
+		);
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("Run task", async () => {
+			const prompt = await canvas.findByLabelText(/prompt/i);
+			await userEvent.type(prompt, "Create a new task");
+			const submitButton = canvas.getByRole("button", { name: /run task/i });
+			await userEvent.click(submitButton);
+		});
+
+		await step("Verify error", async () => {
+			await canvas.findByText(/failed to create task/i);
+		});
+	},
+};
+
+const MockTasks = [
+	{
+		workspace: {
+			...MockWorkspace,
+			latest_app_status: MockWorkspaceAppStatus,
+		},
+		prompt: "Create competitors page",
+	},
+	{
+		workspace: {
+			...MockWorkspace,
+			id: "workspace-2",
+			latest_app_status: {
+				...MockWorkspaceAppStatus,
+				message: "Avatar size fixed!",
+			},
+		},
+		prompt: "Fix user avatar size",
+	},
+	{
+		workspace: {
+			...MockWorkspace,
+			id: "workspace-3",
+			latest_app_status: {
+				...MockWorkspaceAppStatus,
+				message: "Accessibility issues fixed!",
+			},
+		},
+		prompt: "Fix accessibility issues",
+	},
+];