feat(site): allow starting task workspace from task page

DanielleMaywood · DanielleMaywood · commit f9fb834b2480 · 2025-09-12T09:44:16.000Z
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -19,7 +19,7 @@ import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { type FC, type ReactNode, useLayoutEffect, useRef } from "react";
 import { Helmet } from "react-helmet-async";
-import { useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Link as RouterLink, useParams } from "react-router";
 import type { FixedSizeList } from "react-window";
@@ -31,6 +31,7 @@ import {
 import { TaskApps } from "./TaskApps";
 import { TaskSidebar } from "./TaskSidebar";
 import { TaskTopbar } from "./TaskTopbar";
+import { startWorkspace } from "api/queries/workspaces";
 
 const TaskPage = () => {
 	const { workspace: workspaceName, username } = useParams() as {
@@ -119,27 +120,7 @@ const TaskPage = () => {
 			</div>
 		);
 	} else if (task.workspace.latest_build.status !== "running") {
-		content = (
-			<Margins>
-				<div className="w-full min-h-80 flex items-center justify-center">
-					<div className="flex flex-col items-center">
-						<h3 className="m-0 font-medium text-content-primary text-base">
-							Workspace is not running
-						</h3>
-						<span className="text-content-secondary text-sm">
-							Apps and previous statuses are not available
-						</span>
-						<Button size="sm" className="mt-4" asChild>
-							<RouterLink
-								to={`/@${task.workspace.owner_name}/${task.workspace.name}`}
-							>
-								View workspace
-							</RouterLink>
-						</Button>
-					</div>
-				</div>
-			</Margins>
-		);
+		content = <WorkspaceNotRunning task={task} />;
 	} else if (agent && ["created", "starting"].includes(agent.lifecycle_state)) {
 		content = <TaskStartingAgent agent={agent} />;
 	} else {
@@ -174,6 +155,50 @@ const TaskPage = () => {
 
 export default TaskPage;
 
+type WorkspaceNotRunningProps = {
+	task: Task;
+};
+
+const WorkspaceNotRunning: FC<WorkspaceNotRunningProps> = ({ task }) => {
+	const queryClient = useQueryClient();
+
+	const mutateStartWorkspace = useMutation({
+		...startWorkspace(task?.workspace, queryClient),
+	});
+
+	return (
+		<Margins>
+			<div className="w-full min-h-80 flex items-center justify-center">
+				<div className="flex flex-col items-center">
+					<h3 className="m-0 font-medium text-content-primary text-base">
+						Workspace is not running
+					</h3>
+					<span className="text-content-secondary text-sm">
+						Apps and previous statuses are not available
+					</span>
+					<div className="flex flex-row mt-4 gap-4">
+						<Button
+							size="sm"
+							onClick={() => {
+								mutateStartWorkspace?.mutate({});
+							}}
+						>
+							Start workspace
+						</Button>
+						<Button size="sm" asChild>
+							<RouterLink
+								to={`/@${task.workspace.owner_name}/${task.workspace.name}`}
+							>
+								View workspace
+							</RouterLink>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</Margins>
+	);
+};
+
 type TaskBuildingWorkspaceProps = { task: Task };
 
 const TaskBuildingWorkspace: FC<TaskBuildingWorkspaceProps> = ({ task }) => {
