Integrate v2 task api (#1566)

skyvern-frontend/src/api/AxiosClient.ts

@@ -1,8 +1,19 @@
 import { apiBaseUrl, artifactApiBaseUrl, envCredential } from "@/util/env";
 import axios from "axios";
 
+const apiV1BaseUrl = apiBaseUrl;
+const apiV2BaseUrl = apiBaseUrl.replace("v1", "v2");
+
 const client = axios.create({
-  baseURL: apiBaseUrl,
+  baseURL: apiV1BaseUrl,
+  headers: {
+    "Content-Type": "application/json",
+    "x-api-key": envCredential,
+  },
+});
+
+const v2Client = axios.create({
+  baseURL: apiV2BaseUrl,
   headers: {
     "Content-Type": "application/json",
     "x-api-key": envCredential,
@@ -15,35 +26,44 @@ const artifactApiClient = axios.create({
 
 export function setAuthorizationHeader(token: string) {
   client.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+  v2Client.defaults.headers.common["Authorization"] = `Bearer ${token}`;
 }
 
 export function removeAuthorizationHeader() {
   if (client.defaults.headers.common["Authorization"]) {
     delete client.defaults.headers.common["Authorization"];
+    delete v2Client.defaults.headers.common["Authorization"];
   }
 }
 
 export function setApiKeyHeader(apiKey: string) {
   client.defaults.headers.common["X-API-Key"] = apiKey;
+  v2Client.defaults.headers.common["X-API-Key"] = apiKey;
 }
 
 export function removeApiKeyHeader() {
   if (client.defaults.headers.common["X-API-Key"]) {
     delete client.defaults.headers.common["X-API-Key"];
   }
+  if (v2Client.defaults.headers.common["X-API-Key"]) {
+    delete v2Client.defaults.headers.common["X-API-Key"];
+  }
 }
 
-async function getClient(credentialGetter: CredentialGetter | null) {
+async function getClient(
+  credentialGetter: CredentialGetter | null,
+  version: string = "v1",
+) {
   if (credentialGetter) {
     removeApiKeyHeader();
     const credential = await credentialGetter();
     if (!credential) {
       console.warn("No credential found");
-      return client;
+      return version === "v1" ? client : v2Client;
     }
     setAuthorizationHeader(credential);
   }
-  return client;
+  return version === "v1" ? client : v2Client;
 }
 
 export type CredentialGetter = () => Promise<string | null>;

skyvern-frontend/src/api/types.ts

@@ -215,7 +215,7 @@ export type WorkflowRunStatusApiResponse = {
   downloaded_file_urls: Array<string> | null;
   total_steps: number | null;
   total_cost: number | null;
-  observer_cruise: ObserverCruise | null;
+  observer_task: ObserverTask | null;
 };
 
 export type TaskGenerationApiResponse = {
@@ -242,8 +242,8 @@ export type ActionsApiResponse = {
   response: string | null;
 };
 
-export type ObserverCruise = {
+export type ObserverTask = {
-  observer_cruise_id: string;
+  task_id: string;
   status: Status;
   workflow_run_id: string | null;
   workflow_id: string | null;

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -1,5 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
-import { ObserverCruise, TaskGenerationApiResponse } from "@/api/types";
+import { ObserverTask, TaskGenerationApiResponse } from "@/api/types";
 import img from "@/assets/promptBoxBg.png";
 import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { CartIcon } from "@/components/icons/CartIcon";
@@ -128,9 +128,9 @@ function PromptBox() {
 
   const startObserverCruiseMutation = useMutation({
     mutationFn: async (prompt: string) => {
-      const client = await getClient(credentialGetter);
+      const client = await getClient(credentialGetter, "v2");
-      return client.post<{ user_prompt: string }, { data: ObserverCruise }>(
+      return client.post<{ user_prompt: string }, { data: ObserverTask }>(
-        "/cruise",
+        "/tasks",
         { user_prompt: prompt },
       );
     },

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -265,7 +265,7 @@ function WorkflowRun() {
               handleSetActiveItem("stream");
             }}
             onObserverThoughtCardSelected={(item) => {
-              handleSetActiveItem(item.observer_thought_id);
+              handleSetActiveItem(item.thought_id);
             }}
           />
         </div>

skyvern-frontend/src/routes/workflows/types/workflowRunTypes.ts

@@ -11,7 +11,7 @@ export type WorkflowRunTimelineItemType =
   (typeof WorkflowRunTimelineItemTypes)[keyof typeof WorkflowRunTimelineItemTypes];
 
 export type ObserverThought = {
-  observer_thought_id: string;
+  thought_id: string;
   user_input: string | null;
   observation: string | null;
   thought: string | null;
@@ -123,7 +123,7 @@ export function isObserverThought(item: unknown): item is ObserverThought {
   return (
     typeof item === "object" &&
     item !== null &&
-    "observer_thought_id" in item &&
+    "thought_id" in item &&
     "thought" in item
   );
 }

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowPostRunParameters.tsx

@@ -140,7 +140,7 @@ function WorkflowPostRunParameters() {
           </div>
         </div>
       </div>
-      {workflowRun.observer_cruise ? (
+      {workflowRun.observer_task ? (
         <div className="rounded bg-slate-elevation2 p-6">
           <div className="space-y-4">
             <h1 className="text-lg font-bold">Observer Parameters</h1>
@@ -152,7 +152,7 @@ function WorkflowPostRunParameters() {
                 </h2>
               </div>
               <AutoResizingTextarea
-                value={workflowRun.observer_cruise.prompt ?? ""}
+                value={workflowRun.observer_task.prompt ?? ""}
                 readOnly
               />
             </div>

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx

@@ -77,7 +77,7 @@ function WorkflowRunOutput() {
     ? formatExtractedInformation(outputs)
     : outputs;
   const fileUrls = workflowRun?.downloaded_file_urls ?? [];
-  const observerOutput = workflowRun?.observer_cruise?.output;
+  const observerOutput = workflowRun?.observer_task?.output;
 
   return (
     <div className="space-y-5">

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx

@@ -77,9 +77,7 @@ function WorkflowRunOverview() {
         />
       )}
       {isObserverThought(selection) && (
-        <ObserverThoughtScreenshot
+        <ObserverThoughtScreenshot observerThoughtId={selection.thought_id} />
-          observerThoughtId={selection.observer_thought_id}
-        />
       )}
     </AspectRatio>
   );

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx

@@ -119,11 +119,10 @@ function WorkflowRunTimeline({
               if (isThoughtItem(timelineItem)) {
                 return (
                   <ThoughtCard
-                    key={timelineItem.thought.observer_thought_id}
+                    key={timelineItem.thought.thought_id}
                     active={
                       isObserverThought(activeItem) &&
-                      activeItem.observer_thought_id ===
+                      activeItem.thought_id === timelineItem.thought.thought_id
-                        timelineItem.thought.observer_thought_id
                     }
                     onClick={onObserverThoughtCardSelected}
                     thought={timelineItem.thought}

skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts

@@ -64,10 +64,7 @@ function findActiveItem(
     ) {
       return current.block;
     }
-    if (
+    if (current.type === "thought" && current.thought.thought_id === target) {
-      current.type === "thought" &&
-      current.thought.observer_thought_id === target
-    ) {
       return current.thought;
     }
     if (current.type === "block") {