Change task UI layout (#435)

skyvern-frontend/src/api/types.ts

@@ -39,9 +39,11 @@ export type ArtifactApiResponse = {
 
 export type ActionAndResultApiResponse = [
   ActionApiResponse,
-  {
-    success: boolean;
-  },
+  [
+    {
+      success: boolean;
+    },
+  ],
 ];
 
 export type StepApiResponse = {
@@ -167,6 +169,16 @@ export const ActionTypes = {
 
 export type ActionType = (typeof ActionTypes)[keyof typeof ActionTypes];
 
+export const ReadableActionTypes: {
+  [key in ActionType]: string;
+} = {
+  input_text: "Input Text",
+  click: "Click",
+  select_option: "Select Option",
+  upload_file: "Upload File",
+  complete: "Complete",
+};
+
 export type Option = {
   label: string;
   index: number;

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

@@ -1,12 +1,19 @@
-import { Action } from "@/api/types";
+import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
 import { Button } from "@/components/ui/button";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  Cross1Icon,
+} 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";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
 
 type Props = {
   data: Array<Action | null>;
@@ -40,8 +47,8 @@ function ScrollableActionList({
   }, [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">
+    <div className="w-1/3 flex flex-col items-center border rounded h-[40rem]">
+      <div className="flex items-center text-sm p-4 gap-2">
         <Button
           size="icon"
           onClick={() => {
@@ -55,7 +62,7 @@ function ScrollableActionList({
           <ArrowRightIcon />
         </Button>
       </div>
-      <div className="overflow-y-scroll w-full p-4 space-y-4">
+      <div className="overflow-y-scroll w-full px-4 pb-4 space-y-4">
         {data.map((action, index) => {
           if (!action) {
             return null;
@@ -92,9 +99,26 @@ function ScrollableActionList({
                 });
               }}
             >
-              <div className="flex-1">
-                <div className="text-sm">{`Action ${index + 1}`}</div>
-                <div className="text-sm">{action.type}</div>
+              <div className="flex-1 p-2 pt-0 space-y-2">
+                <div className="flex gap-2 items-center">
+                  <span>#{index + 1}</span>
+                  <Badge>{ReadableActionTypes[action.type]}</Badge>
+                  <div>{action.confidence}</div>
+                </div>
+                <div className="text-sm">{action.reasoning}</div>
+                {action.type === ActionTypes.InputText && (
+                  <>
+                    <Separator className="bg-slate-50 block" />
+                    <div className="text-sm">Input: {action.input}</div>
+                  </>
+                )}
+              </div>
+              <div>
+                {action.success ? (
+                  <CheckIcon className="w-4 h-4 text-success" />
+                ) : (
+                  <Cross1Icon className="w-4 h-4 text-destructive" />
+                )}
               </div>
             </div>
           );

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

@@ -1,7 +1,6 @@
 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";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -33,14 +32,7 @@ function TaskActions() {
 
   return (
     <div className="flex gap-2">
-      <div className="w-3/4 border rounded">
-        <div className="p-4">
-          <InputReasoningCard
-            input={activeAction.input}
-            reasoning={activeAction.reasoning}
-            confidence={activeAction.confidence}
-          />
-        </div>
+      <div className="w-2/3 border rounded">
         <div className="p-4">
           <ActionScreenshot
             stepId={activeAction.stepId}

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

@@ -54,7 +54,7 @@ function useActions(
             confidence: actionAndResult[0].confidence_float,
             input: getActionInput(actionAndResult[0]),
             type: actionAndResult[0].action_type,
-            success: actionAndResult[1].success,
+            success: actionAndResult[1][0].success,
             stepId: step.step_id,
             index,
           };