From a87a255b7bde9f53924a7077e0d28aeb0363c4a0 Mon Sep 17 00:00:00 2001
From: Marc Kelechava <marc.kelechava@gmail.com>
Date: Thu, 30 Oct 2025 01:26:45 -0700
Subject: [PATCH] Update `Copy to cURL` buttons to reference the new Runs API
 spec (#3765)

Co-authored-by: Shuchang Zheng <wintonzheng0325@gmail.com>
---
 .../routes/tasks/create/CreateNewTaskForm.tsx | 36 ++++++---
 .../src/routes/tasks/create/SavedTaskForm.tsx | 48 +++++++----
 .../src/routes/tasks/detail/TaskDetails.tsx   | 29 +++++--
 .../src/routes/workflows/RunWorkflowForm.tsx  | 41 ++++++++--
 .../src/routes/workflows/WorkflowRun.tsx      | 42 ++++++----
 skyvern-frontend/src/util/env.ts              | 14 ++++
 .../src/util/taskRunPayload.test.ts           | 74 +++++++++++++++++
 skyvern-frontend/src/util/taskRunPayload.ts   | 79 +++++++++++++++++++
 8 files changed, 310 insertions(+), 53 deletions(-)
 create mode 100644 skyvern-frontend/src/util/taskRunPayload.test.ts
 create mode 100644 skyvern-frontend/src/util/taskRunPayload.ts

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index 534ed802..293c2af7 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -21,9 +21,10 @@ import { KeyValueInput } from "@/components/KeyValueInput";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
-import { apiBaseUrl } from "@/util/env";
+import { runsApiBaseUrl } from "@/util/env";
 import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 import { type ApiCommandOptions } from "@/util/apiCommands";
+import { buildTaskRunPayload } from "@/util/taskRunPayload";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { ToastAction } from "@radix-ui/react-toast";
@@ -754,17 +755,30 @@ function CreateNewTaskForm({ initialValues }: Props) {
 
         <div className="flex justify-end gap-3">
           <CopyApiCommandDropdown
-            getOptions={() =>
-              ({
+            getOptions={() => {
+              const formValues = form.getValues();
+              const includeOverrideHeader =
+                formValues.maxStepsOverride !== null &&
+                formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
+
+              const headers: Record<string, string> = {
+                "Content-Type": "application/json",
+                "x-api-key": apiCredential ?? "<your-api-key>",
+              };
+
+              if (includeOverrideHeader) {
+                headers["x-max-steps-override"] = String(
+                  formValues.maxStepsOverride,
+                );
+              }
+
+              return {
                 method: "POST",
-                url: `${apiBaseUrl}/tasks`,
-                body: createTaskRequestObject(form.getValues()),
-                headers: {
-                  "Content-Type": "application/json",
-                  "x-api-key": apiCredential ?? "<your-api-key>",
-                },
-              }) satisfies ApiCommandOptions
-            }
+                url: `${runsApiBaseUrl}/run/tasks`,
+                body: buildTaskRunPayload(createTaskRequestObject(formValues)),
+                headers,
+              } satisfies ApiCommandOptions;
+            }}
           />
           <Button type="submit" disabled={mutation.isPending}>
             {mutation.isPending && (
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 43c99381..a4b37ac9 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -16,9 +16,10 @@ import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { SubmitEvent } from "@/types";
-import { apiBaseUrl } from "@/util/env";
+import { runsApiBaseUrl } from "@/util/env";
 import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 import { type ApiCommandOptions } from "@/util/apiCommands";
+import { buildTaskRunPayload } from "@/util/taskRunPayload";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { ToastAction } from "@radix-ui/react-toast";
@@ -31,7 +32,11 @@ import { stringify as convertToYAML } from "yaml";
 import { MAX_STEPS_DEFAULT } from "../constants";
 import { TaskFormSection } from "./TaskFormSection";
 import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
-import { OrganizationApiResponse, ProxyLocation } from "@/api/types";
+import {
+  CreateTaskRequest,
+  OrganizationApiResponse,
+  ProxyLocation,
+} from "@/api/types";
 import { ProxySelector } from "@/components/ProxySelector";
 import { TestWebhookDialog } from "@/components/TestWebhookDialog";
 
@@ -39,11 +44,13 @@ type Props = {
   initialValues: SavedTaskFormValues;
 };
 
-function transform(value: unknown) {
+function transform<T>(value: T): T | null {
   return value === "" ? null : value;
 }
 
-function createTaskRequestObject(formValues: SavedTaskFormValues) {
+function createTaskRequestObject(
+  formValues: SavedTaskFormValues,
+): CreateTaskRequest {
   return {
     title: formValues.title,
     url: formValues.url,
@@ -759,17 +766,30 @@ function SavedTaskForm({ initialValues }: Props) {
 
         <div className="flex justify-end gap-3">
           <CopyApiCommandDropdown
-            getOptions={() =>
-              ({
+            getOptions={() => {
+              const formValues = form.getValues();
+              const includeOverrideHeader =
+                formValues.maxStepsOverride !== null &&
+                formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
+
+              const headers: Record<string, string> = {
+                "Content-Type": "application/json",
+                "x-api-key": apiCredential ?? "<your-api-key>",
+              };
+
+              if (includeOverrideHeader) {
+                headers["x-max-steps-override"] = String(
+                  formValues.maxStepsOverride,
+                );
+              }
+
+              return {
                 method: "POST",
-                url: `${apiBaseUrl}/tasks`,
-                body: createTaskRequestObject(form.getValues()),
-                headers: {
-                  "Content-Type": "application/json",
-                  "x-api-key": apiCredential ?? "<your-api-key>",
-                },
-              }) satisfies ApiCommandOptions
-            }
+                url: `${runsApiBaseUrl}/run/tasks`,
+                body: buildTaskRunPayload(createTaskRequestObject(formValues)),
+                headers,
+              } satisfies ApiCommandOptions;
+            }}
           />
           <Button
             type="submit"
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index f8667175..cd5eb789 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -25,14 +25,16 @@ import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { WorkflowApiResponse } from "@/routes/workflows/types/workflowTypes";
-import { apiBaseUrl } from "@/util/env";
+import { runsApiBaseUrl } from "@/util/env";
 import { ApiWebhookActionsMenu } from "@/components/ApiWebhookActionsMenu";
 import { WebhookReplayDialog } from "@/components/WebhookReplayDialog";
 import { type ApiCommandOptions } from "@/util/apiCommands";
+import { buildTaskRunPayload } from "@/util/taskRunPayload";
 import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, Outlet, useParams } from "react-router-dom";
 import { statusIsFinalized } from "../types";
+import { MAX_STEPS_DEFAULT } from "../constants";
 import { useTaskQuery } from "./hooks/useTaskQuery";
 
 function createTaskRequestObject(values: TaskApiResponse) {
@@ -206,14 +208,27 @@ function TaskDetails() {
                     },
                   } satisfies ApiCommandOptions;
                 }
+
+                const includeOverrideHeader =
+                  task.max_steps_per_run !== null &&
+                  task.max_steps_per_run !== MAX_STEPS_DEFAULT;
+
+                const headers: Record<string, string> = {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                };
+
+                if (includeOverrideHeader) {
+                  headers["x-max-steps-override"] = String(
+                    task.max_steps_per_run,
+                  );
+                }
+
                 return {
                   method: "POST",
-                  url: `${apiBaseUrl}/tasks`,
-                  body: createTaskRequestObject(task),
-                  headers: {
-                    "Content-Type": "application/json",
-                    "x-api-key": apiCredential ?? "<your-api-key>",
-                  },
+                  url: `${runsApiBaseUrl}/run/tasks`,
+                  body: buildTaskRunPayload(createTaskRequestObject(task)),
+                  headers,
                 } satisfies ApiCommandOptions;
               }}
               webhookDisabled={taskIsLoading || !taskHasTerminalState}
diff --git a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
index 1f92a49c..0ee81d5f 100644
--- a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
+++ b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
@@ -42,7 +42,7 @@ import { useBlockScriptsQuery } from "@/routes/workflows/hooks/useBlockScriptsQu
 import { constructCacheKeyValueFromParameters } from "@/routes/workflows/editor/utils";
 import { useWorkflowQuery } from "@/routes/workflows/hooks/useWorkflowQuery";
 import { type ApiCommandOptions } from "@/util/apiCommands";
-import { apiBaseUrl } from "@/util/env";
+import { runsApiBaseUrl } from "@/util/env";
 
 import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "./editor/nodes/Taskv2Node/types";
 import { getLabelForWorkflowParameterType } from "./editor/workflowEditorUtils";
@@ -167,6 +167,25 @@ function getRunWorkflowRequestBody(
   return body;
 }
 
+// Transform RunWorkflowRequestBody to match WorkflowRunRequest schema for Runs API v2
+function transformToWorkflowRunRequest(
+  body: RunWorkflowRequestBody,
+  workflowId: string,
+) {
+  const { data, webhook_callback_url, ...rest } = body;
+  const transformed: Record<string, unknown> = {
+    workflow_id: workflowId,
+    parameters: data,
+    ...rest,
+  };
+
+  if (webhook_callback_url) {
+    transformed.webhook_url = webhook_callback_url;
+  }
+
+  return transformed;
+}
+
 type RunWorkflowFormType = Record<string, unknown> & {
   webhookCallbackUrl: string;
   proxyLocation: ProxyLocation;
@@ -807,14 +826,22 @@ function RunWorkflowForm({
                 values,
                 workflowParameters,
               );
+              const transformedBody = transformToWorkflowRunRequest(
+                body,
+                workflowPermanentId,
+              );
+
+              // Build headers - x-max-steps-override is optional and can be added manually if needed
+              const headers: Record<string, string> = {
+                "Content-Type": "application/json",
+                "x-api-key": apiCredential ?? "<your-api-key>",
+              };
+
               return {
                 method: "POST",
-                url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-                body,
-                headers: {
-                  "Content-Type": "application/json",
-                  "x-api-key": apiCredential ?? "<your-api-key>",
-                },
+                url: `${runsApiBaseUrl}/run/workflows`,
+                body: transformedBody,
+                headers,
               } satisfies ApiCommandOptions;
             }}
           />
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index d89c35e2..19398b0d 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -21,7 +21,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { apiBaseUrl } from "@/util/env";
+import { runsApiBaseUrl } from "@/util/env";
 import {
   CodeIcon,
   FileIcon,
@@ -312,20 +312,34 @@ function WorkflowRun() {
 
           <div className="flex gap-2">
             <ApiWebhookActionsMenu
-              getOptions={() =>
-                ({
+              getOptions={() => {
+                // Build headers - x-max-steps-override is optional and can be added manually if needed
+                const headers: Record<string, string> = {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                };
+
+                const body: Record<string, unknown> = {
+                  workflow_id: workflowPermanentId,
+                  parameters: workflowRun?.parameters,
+                  proxy_location: proxyLocation,
+                };
+
+                if (maxScreenshotScrolls !== null) {
+                  body.max_screenshot_scrolls = maxScreenshotScrolls;
+                }
+
+                if (workflowRun?.webhook_callback_url) {
+                  body.webhook_url = workflowRun.webhook_callback_url;
+                }
+
+                return {
                   method: "POST",
-                  url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-                  body: {
-                    data: workflowRun?.parameters,
-                    proxy_location: "RESIDENTIAL",
-                  },
-                  headers: {
-                    "Content-Type": "application/json",
-                    "x-api-key": apiCredential ?? "<your-api-key>",
-                  },
-                }) satisfies ApiCommandOptions
-              }
+                  url: `${runsApiBaseUrl}/run/workflows`,
+                  body,
+                  headers,
+                } satisfies ApiCommandOptions;
+              }}
               webhookDisabled={workflowRunIsLoading || !workflowRunIsFinalized}
               onTestWebhook={() => setReplayOpen(true)}
             />
diff --git a/skyvern-frontend/src/util/env.ts b/skyvern-frontend/src/util/env.ts
index 9c5441b9..a18b21ca 100644
--- a/skyvern-frontend/src/util/env.ts
+++ b/skyvern-frontend/src/util/env.ts
@@ -43,6 +43,19 @@ try {
   newWssBaseUrl = wssBaseUrl.replace("/api", "");
 }
 
+// Base URL for the Runs API (strip a leading `/api` segment: /api/v1 -> /v1)
+const runsApiBaseUrl = (() => {
+  try {
+    const url = new URL(apiBaseUrl);
+    if (url.pathname.startsWith("/api")) {
+      url.pathname = url.pathname.replace(/^\/api/, "");
+    }
+    return `${url.origin}${url.pathname}`;
+  } catch (e) {
+    return apiBaseUrl.replace("/api", "");
+  }
+})();
+
 let runtimeApiKey: string | null | undefined;
 
 function readPersistedApiKey(): string | null {
@@ -83,6 +96,7 @@ function clearRuntimeApiKey(): void {
 
 export {
   apiBaseUrl,
+  runsApiBaseUrl,
   environment,
   artifactApiBaseUrl,
   apiPathPrefix,
diff --git a/skyvern-frontend/src/util/taskRunPayload.test.ts b/skyvern-frontend/src/util/taskRunPayload.test.ts
new file mode 100644
index 00000000..153edd5e
--- /dev/null
+++ b/skyvern-frontend/src/util/taskRunPayload.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import type { CreateTaskRequest } from "../api/types";
+import { buildTaskRunPayload } from "./taskRunPayload";
+
+describe("buildTaskRunPayload", () => {
+  it("maps v1 task fields into the Runs API payload shape", () => {
+    const request: CreateTaskRequest = {
+      title: "  Test Task ",
+      url: " https://example.com/task ",
+      navigation_goal: "Navigate somewhere",
+      data_extraction_goal: "Collect some data",
+      webhook_callback_url: " https://callback.example.com ",
+      proxy_location: "RESIDENTIAL",
+      extracted_information_schema: { foo: "bar" },
+      error_code_mapping: { ERR42: "Meaningful message" },
+      extra_http_headers: { "X-Trace-Id": "abc123" },
+      totp_identifier: "  identifier  ",
+      browser_address: "  chrome:1234  ",
+      include_action_history_in_verification: true,
+      max_screenshot_scrolls: 7,
+    };
+
+    const payload = buildTaskRunPayload(request);
+
+    expect(payload).toEqual({
+      prompt: "Navigate somewhere\n\nCollect some data",
+      url: "https://example.com/task",
+      proxy_location: "RESIDENTIAL",
+      data_extraction_schema: { foo: "bar" },
+      error_code_mapping: { ERR42: "Meaningful message" },
+      extra_http_headers: { "X-Trace-Id": "abc123" },
+      webhook_url: "https://callback.example.com",
+      totp_identifier: "identifier",
+      browser_address: "chrome:1234",
+      include_action_history_in_verification: true,
+      max_screenshot_scrolls: 7,
+      title: "Test Task",
+    });
+  });
+
+  it("applies prompt fallbacks and drops invalid optional objects", () => {
+    const request: CreateTaskRequest = {
+      title: "   ",
+      url: "  https://fallback.example.com ",
+      navigation_goal: "",
+      data_extraction_goal: null,
+      webhook_callback_url: "  ",
+      proxy_location: null,
+      extracted_information_schema: null,
+      extra_http_headers: "not an object" as unknown as Record<string, string>,
+      error_code_mapping: [] as unknown as Record<string, string>,
+      totp_identifier: null,
+      browser_address: " ",
+      include_action_history_in_verification: null,
+    };
+
+    const payload = buildTaskRunPayload(request);
+
+    expect(payload).toEqual({
+      prompt: "https://fallback.example.com",
+      url: "https://fallback.example.com",
+      proxy_location: null,
+      data_extraction_schema: null,
+      webhook_url: undefined,
+      totp_identifier: undefined,
+      browser_address: undefined,
+      include_action_history_in_verification: null,
+      max_screenshot_scrolls: undefined,
+      title: undefined,
+      extra_http_headers: undefined,
+      error_code_mapping: undefined,
+    });
+  });
+});
diff --git a/skyvern-frontend/src/util/taskRunPayload.ts b/skyvern-frontend/src/util/taskRunPayload.ts
new file mode 100644
index 00000000..c5e6b761
--- /dev/null
+++ b/skyvern-frontend/src/util/taskRunPayload.ts
@@ -0,0 +1,79 @@
+import type { CreateTaskRequest, ProxyLocation } from "@/api/types";
+
+type TaskRunPayload = {
+  prompt: string;
+  url?: string | null;
+  proxy_location?: ProxyLocation | null;
+  data_extraction_schema?: CreateTaskRequest["extracted_information_schema"];
+  error_code_mapping?: Record<string, string> | null;
+  extra_http_headers?: Record<string, string> | null;
+  webhook_url?: string | null;
+  totp_identifier?: string | null;
+  browser_address?: string | null;
+  include_action_history_in_verification?: boolean | null;
+  max_screenshot_scrolls?: number | null;
+  title?: string | null;
+};
+
+// Helper to trim and check for empty strings
+const trim = (s: string | null | undefined): string | undefined => {
+  const t = s?.trim();
+  return t && t.length > 0 ? t : undefined;
+};
+
+// Build prompt from navigation_goal + data_extraction_goal
+function buildPrompt(request: CreateTaskRequest): string {
+  const nav = trim(request.navigation_goal);
+  const extract = trim(request.data_extraction_goal);
+
+  const parts = [nav, extract].filter(Boolean);
+  if (parts.length > 0) return parts.join("\n\n");
+
+  // Fallback chain: try title, then goals again, then url, then default
+  return (
+    trim(request.title) ??
+    nav ??
+    extract ??
+    trim(request.url) ??
+    "Task run triggered from Skyvern UI"
+  );
+}
+
+function isValidRecord(val: unknown): val is Record<string, string> {
+  return val != null && typeof val === "object" && !Array.isArray(val);
+}
+
+/**
+ * Transforms a CreateTaskRequest (old schema) to TaskRunPayload (Runs API v2 schema).
+ *
+ * Key transformations:
+ * - navigation_goal + data_extraction_goal → prompt (combined)
+ * - extracted_information_schema → data_extraction_schema
+ * - webhook_callback_url → webhook_url
+ *
+ * Note: max_steps is optional and can be added manually to the cURL if needed.
+ */
+function buildTaskRunPayload(request: CreateTaskRequest): TaskRunPayload {
+  return {
+    prompt: buildPrompt(request),
+    url: trim(request.url) ?? null,
+    proxy_location: request.proxy_location ?? null,
+    data_extraction_schema: request.extracted_information_schema,
+    webhook_url: trim(request.webhook_callback_url),
+    totp_identifier: trim(request.totp_identifier),
+    browser_address: trim(request.browser_address),
+    include_action_history_in_verification:
+      request.include_action_history_in_verification,
+    max_screenshot_scrolls: request.max_screenshot_scrolls,
+    title: trim(request.title),
+    extra_http_headers: isValidRecord(request.extra_http_headers)
+      ? request.extra_http_headers
+      : undefined,
+    error_code_mapping: isValidRecord(request.error_code_mapping)
+      ? request.error_code_mapping
+      : undefined,
+  };
+}
+
+export type { TaskRunPayload };
+export { buildTaskRunPayload };