Skip to content

feat(site): allow modifying task prompts for starting tasks #20812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DanielleMaywood merged 8 commits into from
Dec 11, 2025
+495 −5
Merged

feat(site): allow modifying task prompts for starting tasks #20812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2fece8e
feat(site): allow modifying task prompt prior to start
DanielleMaywood Nov 17, 2025
400066c
chore: a few changes
DanielleMaywood Dec 10, 2025
843109d
chore: few more changes + merge main into branch
DanielleMaywood Dec 10, 2025
a128a2b
chore: appease linter
DanielleMaywood Dec 10, 2025
27d18e2
test: fix tests
DanielleMaywood Dec 10, 2025
3e637bd
chore: only cancel job if not completed
DanielleMaywood Dec 10, 2025
599f43d
fix: tests
DanielleMaywood Dec 10, 2025
6a12051
chore: make "Edit prompt" an outline instead
DanielleMaywood Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2716,6 +2716,16 @@ class ApiMethods {
await this.axios.delete(`/api/v2/tasks/${user}/${id}`);
};

updateTaskInput = async (
user: string,
id: string,
input: string,
): Promise<void> => {
await this.axios.patch(`/api/v2/tasks/${user}/${id}/input`, {
input,
} satisfies TypesGen.UpdateTaskInputRequest);
Copy link
Member

@aslilac aslilac Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

god I love the satisfies keyword. thank you for actually knowing how to use it correctly. 💕

};

createTaskFeedback = async (
_taskId: string,
_req: CreateTaskFeedbackRequest,
Expand Down
280 changes: 280 additions & 0 deletions site/src/pages/TaskPage/ModifyPromptDialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
import {
MockTask,
MockTaskWorkspace,
mockApiError,
} from "testHelpers/entities";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { API } from "api/api";
import { workspaceBuildParametersKey } from "api/queries/workspaceBuilds";
import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
import { expect, spyOn, userEvent, waitFor, within } from "storybook/test";
import { ModifyPromptDialog } from "./ModifyPromptDialog";

const mockTaskWorkspaceStarting: Workspace = {
...MockTaskWorkspace,
latest_build: {
...MockTaskWorkspace.latest_build,
status: "starting",
},
};

const mockBuildParameters: WorkspaceBuildParameter[] = [
{
name: "region",
value: "us-east-1",
},
];

const meta: Meta<typeof ModifyPromptDialog> = {
title: "pages/TaskPage/ModifyPromptDialog",
component: ModifyPromptDialog,
args: {
task: MockTask,
workspace: mockTaskWorkspaceStarting,
open: true,
onOpenChange: () => {},
},
parameters: {
queries: [
{
key: workspaceBuildParametersKey(MockTaskWorkspace.latest_build.id),
data: mockBuildParameters,
},
],
},
};

export default meta;
type Story = StoryObj<typeof ModifyPromptDialog>;

export const WithModifiedPrompt: Story = {
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
const promptTextarea = body.getByLabelText("Prompt");

// Given: The user modifies the prompt
await userEvent.clear(promptTextarea);
await userEvent.type(promptTextarea, "Build a web server in Go");

// Then: We expect the submit button to not be disabled
const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
expect(submitButton).not.toBeDisabled();
},
};

export const EmptyPrompt: Story = {
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
const promptTextarea = body.getByLabelText("Prompt");

// Given: The prompt is empty
await userEvent.clear(promptTextarea);

// Then: We expect the submit button to be disabled
const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
expect(submitButton).toBeDisabled();
},
};

export const UnchangedPrompt: Story = {
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);

// Given: The prompt is unchanged

// Then: We expect the submit button to be disabled
const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
expect(submitButton).toBeDisabled();
},
};

export const Submitting: Story = {
beforeEach: async () => {
spyOn(API, "getWorkspaceBuildByNumber").mockResolvedValue({
...MockTaskWorkspace.latest_build,
status: "canceled",
job: {
...MockTaskWorkspace.latest_build.job,
completed_at: undefined,
},
});
spyOn(API, "cancelWorkspaceBuild").mockResolvedValue({
message: "Workspace build canceled",
});
spyOn(API, "waitForBuild").mockResolvedValue(undefined);
spyOn(API, "stopWorkspace").mockResolvedValue(
MockTaskWorkspace.latest_build,
);
spyOn(API, "updateTaskInput").mockImplementation(() => {
return new Promise(() => {});
});
spyOn(API, "startWorkspace").mockResolvedValue(
MockTaskWorkspace.latest_build,
);
},
play: async ({ canvasElement, step }) => {
const body = within(canvasElement.ownerDocument.body);

await step("Modify and submit the form", async () => {
const promptTextarea = body.getByLabelText("Prompt");
await userEvent.clear(promptTextarea);
await userEvent.type(promptTextarea, "Create a REST API");

const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
await userEvent.click(submitButton);
});

await step("Shows loading state with spinner", async () => {
const spinner = await body.findByTitle("Loading spinner");
expect(spinner).toBeInTheDocument();

const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
expect(submitButton).toBeDisabled();
});
},
};

export const Success: Story = {
beforeEach: async () => {
spyOn(API, "getWorkspaceBuildByNumber").mockResolvedValue({
...MockTaskWorkspace.latest_build,
status: "canceled",
job: {
...MockTaskWorkspace.latest_build.job,
completed_at: undefined,
},
});
spyOn(API, "cancelWorkspaceBuild").mockResolvedValue({
message: "Workspace build canceled",
});
spyOn(API, "waitForBuild").mockResolvedValue(undefined);
spyOn(API, "stopWorkspace").mockResolvedValue(
MockTaskWorkspace.latest_build,
);
spyOn(API, "updateTaskInput").mockResolvedValue();
spyOn(API, "startWorkspace").mockResolvedValue(
MockTaskWorkspace.latest_build,
);
},
play: async ({ canvasElement, step }) => {
const body = within(canvasElement.ownerDocument.body);

await step("Modify and submit the form", async () => {
const promptTextarea = body.getByLabelText("Prompt");
await userEvent.clear(promptTextarea);
await userEvent.type(promptTextarea, "Create a REST API in Python");

const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
await userEvent.click(submitButton);
});

await step("API calls are made", async () => {
await waitFor(() => {
expect(API.cancelWorkspaceBuild).toHaveBeenCalledWith(
mockTaskWorkspaceStarting.latest_build.id,
);
expect(API.stopWorkspace).toHaveBeenCalledWith(
mockTaskWorkspaceStarting.id,
);
expect(API.updateTaskInput).toHaveBeenCalledWith(
MockTask.owner_name,
MockTask.id,
"Create a REST API in Python",
);
expect(API.startWorkspace).toHaveBeenCalledWith(
mockTaskWorkspaceStarting.id,
MockTask.template_version_id,
undefined,
[
{
name: "region",
value: "us-east-1",
},
],
);
});
});
},
};

export const Failure: Story = {
beforeEach: async () => {
spyOn(API, "getWorkspaceBuildByNumber").mockResolvedValue({
...MockTaskWorkspace.latest_build,
status: "canceled",
job: {
...MockTaskWorkspace.latest_build.job,
completed_at: undefined,
},
});
spyOn(API, "cancelWorkspaceBuild").mockResolvedValue({
message: "Workspace build canceled",
});
spyOn(API, "waitForBuild").mockResolvedValue(undefined);
spyOn(API, "stopWorkspace").mockResolvedValue(
MockTaskWorkspace.latest_build,
);
spyOn(API, "updateTaskInput").mockRejectedValue(
mockApiError({
message: "Failed to update task prompt",
detail: "Build is not in a valid state for modification",
}),
);
},
play: async ({ canvasElement, step }) => {
const body = within(canvasElement.ownerDocument.body);

await step("Modify and submit the form", async () => {
const promptTextarea = body.getByLabelText("Prompt");
await userEvent.clear(promptTextarea);
await userEvent.type(promptTextarea, "Create a REST API");

const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
await userEvent.click(submitButton);
});

await step("Shows error message", async () => {
await body.findByText(/Failed to update task prompt/i);
});
},
};

export const RunningBuild: Story = {
args: {
workspace: {
...MockTaskWorkspace,
latest_build: {
...MockTaskWorkspace.latest_build,
status: "running",
},
},
},
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);

// Verify error message is displayed
expect(
body.getByText(/Cannot modify the prompt of a running task/i),
).toBeInTheDocument();

// Verify submit button is disabled
const submitButton = body.getByRole("button", {
name: /update and restart build/i,
});
expect(submitButton).toBeDisabled();
},
};
Loading
Loading