Redesign task view (#407)

skyvern-frontend/src/api/QueryClient.ts

@@ -3,7 +3,7 @@ import { QueryClient } from "@tanstack/react-query";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 0,
+      staleTime: Infinity,
       retry: false,
     },
   },

skyvern-frontend/src/api/types.ts

@@ -37,6 +37,13 @@ export type ArtifactApiResponse = {
   organization_id: string;
 };
 
+export type ActionAndResultApiResponse = [
+  ActionApiResponse,
+  {
+    success: boolean;
+  },
+];
+
 export type StepApiResponse = {
   step_id: string;
   task_id: string;
@@ -47,8 +54,7 @@ export type StepApiResponse = {
   order: number;
   organization_id: string;
   output: {
-    action_results: unknown[];
+    actions_and_results: ActionAndResultApiResponse[];
-    actions_and_results: unknown[];
     errors: unknown[];
   };
   retry_index: number;
@@ -149,3 +155,39 @@ export type WorkflowApiResponse = {
   modified_at: string;
   deleted_at: string | null;
 };
+
+// TODO complete this
+export const ActionTypes = {
+  InputText: "input_text",
+  Click: "click",
+  SelectOption: "select_option",
+  UploadFile: "upload_file",
+  complete: "complete",
+} as const;
+
+export type ActionType = (typeof ActionTypes)[keyof typeof ActionTypes];
+
+export type Option = {
+  label: string;
+  index: number;
+  value: string;
+};
+
+export type ActionApiResponse = {
+  reasoning: string;
+  confidence_float: number;
+  action_type: ActionType;
+  text: string | null;
+  option: Option | null;
+  file_url: string | null;
+};
+
+export type Action = {
+  reasoning: string;
+  confidence: number;
+  type: ActionType;
+  input: string;
+  success: boolean;
+  stepId: string;
+  index: number;
+};

skyvern-frontend/src/components/StatusBadge.tsx

@@ -21,7 +21,11 @@ function StatusBadge({ status }: Props) {
 
   const statusText = status === "timed_out" ? "timed out" : status;
 
-  return <Badge variant={variant}>{statusText}</Badge>;
+  return (
+    <Badge className="h-fit" variant={variant}>
+      {statusText}
+    </Badge>
+  );
 }
 
 export { StatusBadge };

skyvern-frontend/src/components/ZoomableImage.tsx

@@ -33,7 +33,7 @@ function ZoomableImage(props: HTMLImageElementProps) {
       <img
         {...props}
         onClick={openModal}
-        className={clsx("cursor-pointer", props.className)}
+        className={clsx("cursor-pointer object-contain", props.className)}
       />
       {modalOpen && (
         <div

skyvern-frontend/src/routes/tasks/detail/ActionCard.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/util/utils";
+
+type Props = {
+  title: string;
+  description: string;
+  onClick: React.DOMAttributes<HTMLDivElement>["onClick"];
+  selected: boolean;
+  onMouseEnter: React.DOMAttributes<HTMLDivElement>["onMouseEnter"];
+};
+
+function ActionCard({
+  title,
+  description,
+  selected,
+  onClick,
+  onMouseEnter,
+}: Props) {
+  return (
+    <div
+      className={cn(
+        "flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
+        {
+          "bg-muted": selected,
+        },
+      )}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+    >
+      <div className="flex-1">
+        <div className="text-sm">{title}</div>
+        <div className="text-sm">{description}</div>
+      </div>
+    </div>
+  );
+}
+
+export { ActionCard };

skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx

@@ -0,0 +1,53 @@
+import { getClient } from "@/api/AxiosClient";
+import { ArtifactApiResponse, ArtifactType } from "@/api/types";
+import { ZoomableImage } from "@/components/ZoomableImage";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { getImageURL } from "./artifactUtils";
+import { ReloadIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  stepId: string;
+  index: number;
+};
+
+function ActionScreenshot({ stepId, index }: Props) {
+  const { taskId } = useParams();
+  const credentialGetter = useCredentialGetter();
+
+  const { data: artifacts, isFetching } = useQuery<Array<ArtifactApiResponse>>({
+    queryKey: ["task", taskId, "steps", stepId, "artifacts"],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/tasks/${taskId}/steps/${stepId}/artifacts`)
+        .then((response) => response.data);
+    },
+  });
+
+  const actionScreenshots = artifacts?.filter(
+    (artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
+  );
+
+  const screenshot = actionScreenshots?.[index];
+
+  if (isFetching) {
+    return (
+      <div className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
+        <ReloadIcon className="animate-spin h-6 w-6" />
+        <div>Loading screenshot...</div>
+      </div>
+    );
+  }
+
+  return screenshot ? (
+    <figure className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
+      <ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
+    </figure>
+  ) : (
+    <div>Screenshot not found</div>
+  );
+}
+
+export { ActionScreenshot };

skyvern-frontend/src/routes/tasks/detail/InputReasoningCard.tsx

@@ -0,0 +1,25 @@
+type Props = {
+  input: string;
+  reasoning: string;
+  confidence: number;
+};
+
+function InputReasoningCard({ input, reasoning, confidence }: Props) {
+  return (
+    <div className="flex p-4 gap-2 rounded-md shadow-md border items-start">
+      <div className="flex-1">
+        <div className="text-sm">
+          <span className="font-bold">Agent Input:</span> {input}
+        </div>
+        <div className="text-sm">
+          <span className="font-bold">Agent Reasoning:</span> {reasoning}
+        </div>
+      </div>
+      <div className="flex items-center justify-center border p-2 rounded-lg bg-muted">
+        <span>Confidence: {confidence}</span>
+      </div>
+    </div>
+  );
+}
+
+export { InputReasoningCard };

skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx

@@ -0,0 +1,107 @@
+import { Action } from "@/api/types";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+import { useEffect, useRef } from "react";
+import { cn } from "@/util/utils";
+
+type Props = {
+  data: Array<Action | null>;
+  onNext: () => void;
+  onPrevious: () => void;
+  onActiveIndexChange: (index: number) => void;
+  activeIndex: number;
+};
+
+function ScrollableActionList({
+  data,
+  onNext,
+  onPrevious,
+  activeIndex,
+  onActiveIndexChange,
+}: Props) {
+  const { taskId } = useParams();
+  const queryClient = useQueryClient();
+  const credentialGetter = useCredentialGetter();
+  const refs = useRef<Array<HTMLDivElement | null>>(
+    Array.from({ length: data.length }),
+  );
+
+  useEffect(() => {
+    if (refs.current[activeIndex]) {
+      refs.current[activeIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [activeIndex]);
+
+  return (
+    <div className="w-1/4 flex flex-col items-center border rounded h-[40rem]">
+      <div className="flex items-center text-sm p-2 gap-2">
+        <Button
+          size="icon"
+          onClick={() => {
+            onPrevious();
+          }}
+        >
+          <ArrowLeftIcon />
+        </Button>
+        {activeIndex + 1} of {data.length} total actions
+        <Button size="icon" onClick={() => onNext()}>
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="overflow-y-scroll w-full p-4 space-y-4">
+        {data.map((action, index) => {
+          if (!action) {
+            return null;
+          }
+          const selected = activeIndex === index;
+          return (
+            <div
+              ref={(element) => {
+                refs.current[index] = element;
+              }}
+              className={cn(
+                "flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
+                {
+                  "bg-muted": selected,
+                },
+              )}
+              onClick={() => onActiveIndexChange(index)}
+              onMouseEnter={() => {
+                queryClient.prefetchQuery({
+                  queryKey: [
+                    "task",
+                    taskId,
+                    "steps",
+                    action.stepId,
+                    "artifacts",
+                  ],
+                  queryFn: async () => {
+                    const client = await getClient(credentialGetter);
+                    return client
+                      .get(`/tasks/${taskId}/steps/${action.stepId}/artifacts`)
+                      .then((response) => response.data);
+                  },
+                  staleTime: Infinity,
+                });
+              }}
+            >
+              <div className="flex-1">
+                <div className="text-sm">{`Action ${index + 1}`}</div>
+                <div className="text-sm">{action.type}</div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { ScrollableActionList };

skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { ActionScreenshot } from "./ActionScreenshot";
+import { InputReasoningCard } from "./InputReasoningCard";
+import { ScrollableActionList } from "./ScrollableActionList";
+import { useActions } from "./useActions";
+
+function TaskActions() {
+  const { taskId } = useParams();
+
+  const { data, isFetching } = useActions(taskId!);
+  const [selectedActionIndex, setSelectedAction] = useState(0);
+
+  const activeAction = data?.[selectedActionIndex];
+
+  if (isFetching || !data) {
+    return <div>Loading...</div>;
+  }
+
+  if (!activeAction) {
+    return <div>No action</div>;
+  }
+
+  return (
+    <div className="flex gap-2">
+      <div className="w-3/4 h-[40rem] border rounded">
+        <div className="p-4">
+          <InputReasoningCard
+            input={activeAction.input}
+            reasoning={activeAction.reasoning}
+            confidence={activeAction.confidence}
+          />
+        </div>
+        <div className="p-4">
+          <div className="p-4">
+            <ActionScreenshot
+              stepId={activeAction.stepId}
+              index={activeAction.index}
+            />
+          </div>
+        </div>
+      </div>
+      <ScrollableActionList
+        activeIndex={selectedActionIndex}
+        data={data}
+        onActiveIndexChange={setSelectedAction}
+        onNext={() =>
+          setSelectedAction((prev) =>
+            prev === data.length - 1 ? prev : prev + 1,
+          )
+        }
+        onPrevious={() =>
+          setSelectedAction((prev) => (prev === 0 ? prev : prev - 1))
+        }
+      />
+    </div>
+  );
+}
+
+export { TaskActions };

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -1,26 +1,14 @@
 import { getClient } from "@/api/AxiosClient";
 import { Status, TaskApiResponse } from "@/api/types";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
 import { StatusBadge } from "@/components/StatusBadge";
-import { basicTimeFormat } from "@/util/timeFormat";
-import { StepArtifactsLayout } from "./StepArtifactsLayout";
-import { getRecordingURL, getScreenshotURL } from "./artifactUtils";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Input } from "@/components/ui/input";
-import { ZoomableImage } from "@/components/ZoomableImage";
+import { Label } from "@/components/ui/label";
-import {
+import { Skeleton } from "@/components/ui/skeleton";
-  Card,
+import { Textarea } from "@/components/ui/textarea";
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Separator } from "@/components/ui/separator";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { cn } from "@/util/utils";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { NavLink, Outlet, useParams } from "react-router-dom";
 
 function TaskDetails() {
   const { taskId } = useParams();
@@ -28,8 +16,8 @@ function TaskDetails() {
 
   const {
     data: task,
-    isFetching: isTaskFetching,
+    isFetching: taskIsFetching,
-    isError: isTaskError,
+    isError: taskIsError,
     error: taskError,
   } = useQuery<TaskApiResponse>({
     queryKey: ["task", taskId, "details"],
@@ -49,171 +37,89 @@ function TaskDetails() {
     placeholderData: keepPreviousData,
   });
 
-  if (isTaskError) {
+  if (taskIsError) {
     return <div>Error: {taskError?.message}</div>;
   }
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex items-center">
+      <div className="flex items-center gap-4">
-        <Label className="w-32 shrink-0 text-lg">Task ID</Label>
+        <Input value={taskId} className="w-52" readOnly />
-        <Input value={taskId} readOnly />
+        {taskIsFetching ? (
-      </div>
-      <div className="flex items-center">
-        <Label className="w-32 text-lg">Status</Label>
-        {isTaskFetching ? (
           <Skeleton className="w-32 h-8" />
         ) : task ? (
           <StatusBadge status={task?.status} />
         ) : null}
       </div>
-      {task?.status === Status.Completed ? (
+      <div>
-        <div className="flex items-center">
+        {task?.status === Status.Completed ? (
-          <Label className="w-32 shrink-0 text-lg">Extracted Information</Label>
+          <div className="flex items-center">
-          <Textarea
+            <Label className="w-32 shrink-0 text-lg">
-            rows={5}
+              Extracted Information
-            value={JSON.stringify(task.extracted_information, null, 2)}
+            </Label>
-            readOnly
+            <Textarea
-          />
+              rows={5}
+              value={JSON.stringify(task.extracted_information, null, 2)}
+              readOnly
+            />
+          </div>
+        ) : null}
+        {task?.status === Status.Failed ||
+        task?.status === Status.Terminated ? (
+          <div className="flex items-center">
+            <Label>Failure Reason</Label>
+            <Textarea
+              rows={5}
+              value={JSON.stringify(task.failure_reason)}
+              readOnly
+            />
+          </div>
+        ) : null}
+      </div>
+      <div className="flex justify-center items-center">
+        <div className="inline-flex border rounded bg-muted p-1">
+          <NavLink
+            to="actions"
+            className={({ isActive }) => {
+              return cn(
+                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                {
+                  "bg-primary-foreground text-foreground": isActive,
+                },
+              );
+            }}
+          >
+            Actions
+          </NavLink>
+          <NavLink
+            to="recording"
+            className={({ isActive }) => {
+              return cn(
+                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                {
+                  "bg-primary-foreground text-foreground": isActive,
+                },
+              );
+            }}
+          >
+            Recording
+          </NavLink>
+          <NavLink
+            to="parameters"
+            className={({ isActive }) => {
+              return cn(
+                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                {
+                  "bg-primary-foreground text-foreground": isActive,
+                },
+              );
+            }}
+          >
+            Parameters
+          </NavLink>
         </div>
-      ) : null}
+      </div>
-      {task?.status === Status.Failed || task?.status === Status.Terminated ? (
+      <Outlet />
-        <div className="flex items-center">
-          <Label className="w-32 shrink-0 text-lg">Failure Reason</Label>
-          <Textarea
-            rows={5}
-            value={JSON.stringify(task.failure_reason)}
-            readOnly
-          />
-        </div>
-      ) : null}
-      {task ? (
-        <Card>
-          <CardHeader className="border-b-2">
-            <CardTitle className="text-xl">Task Artifacts</CardTitle>
-            <CardDescription>
-              Recording and final screenshot of the task
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Tabs defaultValue="recording">
-              <TabsList>
-                <TabsTrigger value="recording">Recording</TabsTrigger>
-                <TabsTrigger value="final-screenshot">
-                  Final Screenshot
-                </TabsTrigger>
-              </TabsList>
-              <TabsContent value="recording">
-                {task.recording_url ? (
-                  <video
-                    width={800}
-                    height={450}
-                    src={getRecordingURL(task)}
-                    controls
-                  />
-                ) : (
-                  <div>No recording available</div>
-                )}
-              </TabsContent>
-              <TabsContent value="final-screenshot">
-                {task ? (
-                  <div className="h-[450px] w-[800px] overflow-hidden">
-                    {task.screenshot_url ? (
-                      <ZoomableImage
-                        src={getScreenshotURL(task)}
-                        alt="screenshot"
-                        className="object-cover w-full h-full"
-                      />
-                    ) : (
-                      <p>No screenshot available</p>
-                    )}
-                  </div>
-                ) : null}
-              </TabsContent>
-            </Tabs>
-          </CardContent>
-        </Card>
-      ) : null}
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-lg">Steps</CardTitle>
-          <CardDescription>Task Steps and Step Artifacts</CardDescription>
-        </CardHeader>
-        <CardContent className="min-h-96">
-          <StepArtifactsLayout />
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-xl">Parameters</CardTitle>
-          <CardDescription>Task URL and Input Parameters</CardDescription>
-        </CardHeader>
-        <CardContent className="py-8">
-          {task ? (
-            <div className="flex flex-col gap-8">
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">URL</Label>
-                <Input value={task.request.url} readOnly />
-              </div>
-              <Separator />
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">Created at</Label>
-                <Input value={basicTimeFormat(task.created_at)} readOnly />
-              </div>
-              <Separator />
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">Navigation Goal</Label>
-                <Textarea
-                  rows={5}
-                  value={task.request.navigation_goal ?? ""}
-                  readOnly
-                />
-              </div>
-              <Separator />
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">Navigation Payload</Label>
-                <Textarea
-                  rows={5}
-                  value={
-                    typeof task.request.navigation_payload === "object"
-                      ? JSON.stringify(task.request.navigation_payload, null, 2)
-                      : task.request.navigation_payload
-                  }
-                  readOnly
-                />
-              </div>
-              <Separator />
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">Data Extraction Goal</Label>
-                <Textarea
-                  rows={5}
-                  value={task.request.data_extraction_goal ?? ""}
-                  readOnly
-                />
-              </div>
-              <div className="flex items-center">
-                <Label className="w-40 shrink-0">
-                  Extracted Information Schema
-                </Label>
-                <Textarea
-                  rows={5}
-                  value={
-                    typeof task.request.extracted_information_schema ===
-                    "object"
-                      ? JSON.stringify(
-                          task.request.extracted_information_schema,
-                          null,
-                          2,
-                        )
-                      : task.request.extracted_information_schema
-                  }
-                  readOnly
-                />
-              </div>
-            </div>
-          ) : null}
-        </CardContent>
-      </Card>
     </div>
   );
 }

skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx

@@ -0,0 +1,113 @@
+import { getClient } from "@/api/AxiosClient";
+import { TaskApiResponse } from "@/api/types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { basicTimeFormat } from "@/util/timeFormat";
+import { Label, Separator } from "@radix-ui/react-dropdown-menu";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+
+function TaskParameters() {
+  const { taskId } = useParams();
+  const credentialGetter = useCredentialGetter();
+  const {
+    data: task,
+    isFetching: taskIsFetching,
+    isError: taskIsError,
+  } = useQuery<TaskApiResponse>({
+    queryKey: ["task", taskId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client.get(`/tasks/${taskId}`).then((response) => response.data);
+    },
+  });
+
+  if (taskIsFetching) {
+    return <div>Loading parameters...</div>;
+  }
+
+  if (taskIsError || !task) {
+    return <div>Error loading parameters</div>;
+  }
+
+  return (
+    <Card>
+      <CardHeader className="border-b-2">
+        <CardTitle className="text-xl">Parameters</CardTitle>
+        <CardDescription>Task URL and Input Parameters</CardDescription>
+      </CardHeader>
+      <CardContent className="py-8">
+        <div className="flex flex-col gap-8">
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">URL</Label>
+            <Input value={task.request.url} readOnly />
+          </div>
+          <Separator />
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">Created at</Label>
+            <Input value={basicTimeFormat(task.created_at)} readOnly />
+          </div>
+          <Separator />
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">Navigation Goal</Label>
+            <Textarea
+              rows={5}
+              value={task.request.navigation_goal ?? ""}
+              readOnly
+            />
+          </div>
+          <Separator />
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">Navigation Payload</Label>
+            <Textarea
+              rows={5}
+              value={
+                typeof task.request.navigation_payload === "object"
+                  ? JSON.stringify(task.request.navigation_payload, null, 2)
+                  : task.request.navigation_payload
+              }
+              readOnly
+            />
+          </div>
+          <Separator />
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">Data Extraction Goal</Label>
+            <Textarea
+              rows={5}
+              value={task.request.data_extraction_goal ?? ""}
+              readOnly
+            />
+          </div>
+          <div className="flex items-center">
+            <Label className="w-40 shrink-0">
+              Extracted Information Schema
+            </Label>
+            <Textarea
+              rows={5}
+              value={
+                typeof task.request.extracted_information_schema === "object"
+                  ? JSON.stringify(
+                      task.request.extracted_information_schema,
+                      null,
+                      2,
+                    )
+                  : task.request.extracted_information_schema
+              }
+              readOnly
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export { TaskParameters };

skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx

@@ -0,0 +1,45 @@
+import { getClient } from "@/api/AxiosClient";
+import { TaskApiResponse } from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { getRecordingURL } from "./artifactUtils";
+import { useParams } from "react-router-dom";
+
+function TaskRecording() {
+  const { taskId } = useParams();
+  const credentialGetter = useCredentialGetter();
+
+  const {
+    data: task,
+    isFetching: taskIsFetching,
+    isError: taskIsError,
+  } = useQuery<TaskApiResponse>({
+    queryKey: ["task", taskId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client.get(`/tasks/${taskId}`).then((response) => response.data);
+    },
+  });
+
+  if (taskIsFetching) {
+    return <div>Loading recording...</div>;
+  }
+
+  if (taskIsError || !task) {
+    return <div>Error loading recording</div>;
+  }
+
+  console.log(task);
+
+  return (
+    <div className="flex mx-auto">
+      {task.recording_url ? (
+        <video width={800} height={450} src={getRecordingURL(task)} controls />
+      ) : (
+        <div>No recording available</div>
+      )}
+    </div>
+  );
+}
+
+export { TaskRecording };

skyvern-frontend/src/routes/tasks/detail/useActions.tsx

@@ -0,0 +1,76 @@
+import { getClient } from "@/api/AxiosClient";
+import {
+  Action,
+  ActionApiResponse,
+  ActionTypes,
+  Status,
+  StepApiResponse,
+  TaskApiResponse,
+} from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+
+function getActionInput(action: ActionApiResponse) {
+  let input = "";
+  if (action.action_type === ActionTypes.InputText && action.text) {
+    input = action.text;
+  } else if (action.action_type === ActionTypes.Click) {
+    input = "Click";
+  } else if (action.action_type === ActionTypes.SelectOption && action.option) {
+    input = action.option.label;
+  }
+  return input;
+}
+
+function useActions(
+  taskId: string,
+): ReturnType<typeof useQuery<Array<Action | null>>> {
+  const credentialGetter = useCredentialGetter();
+  const { data: task } = useQuery<TaskApiResponse>({
+    queryKey: ["task", taskId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client.get(`/tasks/${taskId}`).then((response) => response.data);
+    },
+  });
+
+  const taskIsRunningOrQueued =
+    task?.status === Status.Running || task?.status === Status.Queued;
+
+  const useQueryReturn = useQuery<Array<Action | null>>({
+    queryKey: ["task", taskId, "actions"],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const steps = (await client
+        .get(`/tasks/${taskId}/steps`)
+        .then((response) => response.data)) as Array<StepApiResponse>;
+
+      const actions = steps.map((step) => {
+        const actionsAndResults = step.output.actions_and_results;
+
+        const actions = actionsAndResults.map((actionAndResult, index) => {
+          const action: Action = {
+            reasoning: actionAndResult[0].reasoning,
+            confidence: actionAndResult[0].confidence_float,
+            input: getActionInput(actionAndResult[0]),
+            type: actionAndResult[0].action_type,
+            success: actionAndResult[1].success,
+            stepId: step.step_id,
+            index,
+          };
+          return action;
+        });
+        return actions;
+      });
+
+      return actions.flat();
+    },
+    enabled: !!task,
+    staleTime: taskIsRunningOrQueued ? 30 : Infinity,
+    refetchOnWindowFocus: taskIsRunningOrQueued,
+  });
+
+  return useQueryReturn;
+}
+
+export { useActions };

skyvern/forge/sdk/workflow/service.py

@@ -970,7 +970,6 @@ class WorkflowService:
                 max_steps_per_run=block_yaml.max_steps_per_run,
                 max_retries=block_yaml.max_retries,
                 complete_on_download=block_yaml.complete_on_download,
-                continue_on_failure=block_yaml.continue_on_failure,
             )
         elif block_yaml.block_type == BlockType.FOR_LOOP:
             loop_blocks = [