feat: add workspace build status to task page

code-asher · code-asher · commit cb7a768ef71b · 2025-06-24T09:52:28.000-08:00
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, spyOn, within } from "@storybook/test";
+import { API } from "api/api";
 import type {
 	Workspace,
 	WorkspaceApp,
@@ -9,14 +10,16 @@ import {
 	MockFailedWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
+	MockTemplate,
 	MockWorkspace,
 	MockWorkspaceAgent,
 	MockWorkspaceApp,
 	MockWorkspaceAppStatus,
+	MockWorkspaceBuildLogs,
 	MockWorkspaceResource,
 	mockApiError,
 } from "testHelpers/entities";
-import { withProxyProvider } from "testHelpers/storybook";
+import { withProxyProvider, withWebSocket } from "testHelpers/storybook";
 import TaskPage, { data, WorkspaceDoesNotHaveAITaskError } from "./TaskPage";
 
 const meta: Meta<typeof TaskPage> = {
@@ -59,6 +62,33 @@ export const WaitingOnBuild: Story = {
 	},
 };
 
+export const WaitingOnBuildWithTemplate: Story = {
+	beforeEach: () => {
+		spyOn(API, "getTemplate").mockResolvedValue(MockTemplate);
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: MockStartingWorkspace,
+		});
+	},
+};
+
+export const WaitingOnBuildWithLogs: Story = {
+	parameters: {
+		decorators: [withWebSocket],
+		webSocket: MockWorkspaceBuildLogs.map((log) => ({
+			event: "message",
+			data: JSON.stringify(log),
+		})),
+	},
+	beforeEach: () => {
+		spyOn(API, "getTemplate").mockResolvedValue(MockTemplate);
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: MockStartingWorkspace,
+		});
+	},
+};
+
 export const WaitingOnStatus: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockResolvedValue({
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -1,10 +1,12 @@
 import { API } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
+import { template as templateQueryOptions } from "api/queries/templates";
 import type { Workspace, WorkspaceStatus } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { Spinner } from "components/Spinner/Spinner";
+import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
 import { ArrowLeftIcon, RotateCcwIcon } from "lucide-react";
 import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import type { ReactNode } from "react";
@@ -14,6 +16,10 @@ import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { ellipsizeText } from "utils/ellipsizeText";
 import { pageTitle } from "utils/page";
+import {
+	ActiveTransition,
+	WorkspaceBuildProgress,
+} from "../WorkspacePage/WorkspaceBuildProgress";
 import { TaskApps } from "./TaskApps";
 import { TaskSidebar } from "./TaskSidebar";
 
@@ -32,6 +38,19 @@ const TaskPage = () => {
 		refetchInterval: 5_000,
 	});
 
+	const { data: template } = useQuery({
+		...templateQueryOptions(task?.workspace.template_id ?? ""),
+		enabled: Boolean(task),
+	});
+
+	const waitingStatuses: WorkspaceStatus[] = ["starting", "pending"];
+	const shouldStreamBuildLogs =
+		task && waitingStatuses.includes(task.workspace.latest_build.status);
+	const buildLogs = useWorkspaceBuildLogs(
+		task?.workspace.latest_build.id ?? "",
+		shouldStreamBuildLogs,
+	);
+
 	if (error) {
 		return (
 			<>
@@ -77,7 +96,6 @@ const TaskPage = () => {
 	}
 
 	let content: ReactNode = null;
-	const waitingStatuses: WorkspaceStatus[] = ["starting", "pending"];
 	const terminatedStatuses: WorkspaceStatus[] = [
 		"canceled",
 		"canceling",
@@ -88,17 +106,27 @@ const TaskPage = () => {
 	];
 
 	if (waitingStatuses.includes(task.workspace.latest_build.status)) {
+		// If no template yet, use null values for an indeterminate progress bar.
+		const transition = (template &&
+			ActiveTransition(template, task.workspace)) || { P50: null, P95: null };
+		const lastStage = buildLogs?.[buildLogs.length - 1]?.stage;
 		content = (
-			<div className="w-full min-h-80 flex items-center justify-center">
+			<div className="w-full min-h-80 flex flex-col items-center justify-center gap-2">
 				<div className="flex flex-col items-center">
-					<Spinner loading className="mb-4" />
 					<h3 className="m-0 font-medium text-content-primary text-base">
 						Starting your workspace
 					</h3>
 					<span className="text-content-secondary text-sm">
 						This should take a few minutes
 					</span>
 				</div>
+				{lastStage && (
+					<div className="text-content-secondary text-sm">{lastStage}</div>
+				)}
+				<WorkspaceBuildProgress
+					workspace={task.workspace}
+					transitionStats={transition}
+				/>
 			</div>
 		);
 	} else if (task.workspace.latest_build.status === "failed") {
