chore(site): add storybook stories for task initialization states (#20760)

Adds a Storybook story to visualize the task initialization states
(workspace pending/starting, agent connecting/starting) that were
recently added.

<img width="2310" height="1600" alt="Screenshot 2025-11-17 at 18 58 55"
src="https://github.com/user-attachments/assets/16471dcf-2f7d-41d2-beba-2cf0c84c9bf0"
/>

Follow-up from PR: https://github.com/coder/coder/pull/20692

site/src/api/queries/templates.ts

@@ -35,7 +35,7 @@ export const templateByName = (organization: string, name: string) => {
 	} satisfies QueryOptions<Template>;
 };
 
-const getTemplatesQueryKey = (
+export const getTemplatesQueryKey = (
 	options?: GetTemplatesOptions | GetTemplatesQuery,
 ) => ["templates", options];
 

site/src/pages/TasksPage/TasksPage.stories.tsx

@@ -1,4 +1,5 @@
 import {
+	MockInitializingTasks,
 	MockTasks,
 	MockTemplate,
 	MockUserOwner,
@@ -9,6 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { API } from "api/api";
 import { MockUsers } from "pages/UsersPage/storybookData/users";
 import { expect, spyOn, userEvent, within } from "storybook/test";
+import { getTemplatesQueryKey } from "../../api/queries/templates";
 import TasksPage from "./TasksPage";
 
 const meta: Meta<typeof TasksPage> = {
@@ -167,3 +169,18 @@ export const OpenDeleteDialog: Story = {
 		await userEvent.click(deleteButtons[0]);
 	},
 };
+
+export const InitializingTasks: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["tasks", { owner: MockUserOwner.username }],
+				data: MockInitializingTasks,
+			},
+			{
+				key: getTemplatesQueryKey({ q: "has-ai-task:true" }),
+				data: [MockTemplate],
+			},
+		],
+	},
+};

site/src/testHelpers/entities.ts

@@ -5055,6 +5055,74 @@ export const MockTasks = [
 	},
 ] satisfies TypesGen.Task[];
 
+export const MockInitializingTasks = [
+	{
+		...MockTask,
+		id: "task-1",
+		name: "task-workspace-pending",
+		initial_prompt: "Task Workspace Pending",
+		status: "initializing",
+		current_state: {
+			timestamp: new Date().toISOString(),
+			state: "working",
+			message: "Workspace is pending",
+			uri: "",
+		},
+	},
+	{
+		...MockTask,
+		id: "task-2",
+		name: "task-workspace-starting",
+		initial_prompt: "Task Workspace Starting",
+		status: "initializing",
+		current_state: {
+			timestamp: new Date().toISOString(),
+			state: "working",
+			message: "Workspace is starting",
+			uri: "",
+		},
+	},
+	{
+		...MockTask,
+		id: "task-3",
+		name: "task-agent-connecting",
+		initial_prompt: "Task Agent Connecting",
+		status: "initializing",
+		current_state: {
+			timestamp: new Date().toISOString(),
+			state: "working",
+			message: "Agent is connecting",
+			uri: "",
+		},
+	},
+	{
+		...MockTask,
+		id: "task-4",
+		name: "task-agent-starting",
+		initial_prompt: "Task Agent Starting",
+		status: "initializing",
+		current_state: {
+			timestamp: new Date().toISOString(),
+			state: "working",
+			message: "Agent is starting",
+			uri: "",
+		},
+	},
+	{
+		...MockTask,
+		id: "task-5",
+		name: "task-app-initializing",
+		initial_prompt: "Task App Initializing",
+		status: "initializing",
+		current_state: {
+			timestamp: new Date().toISOString(),
+			state: "working",
+			message: "App is initializing",
+			uri: "",
+		},
+	},
+] satisfies TypesGen.Task[];
+
 export const MockInterception: TypesGen.AIBridgeInterception = {
 	id: "5c1da48a-9eb0-440e-9c82-5bc5692a603d",
 	initiator: {