From ef227dc9ff076ac7aa7a93b06b069f130779832c Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Wed, 24 Apr 2024 18:14:20 +0300
Subject: [PATCH] Change step artifact headers (#227)

---
 .../src/routes/tasks/detail/StepArtifacts.tsx | 46 ++++---------------
 .../src/routes/tasks/detail/TaskDetails.tsx   | 20 ++++----
 2 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx b/skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx
index 88574493..4d7b0db6 100644
--- a/skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx
@@ -50,10 +50,6 @@ function StepArtifacts({ id, stepProps }: Props) {
     (artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
   );
 
-  const visibleElementsTree = artifacts?.find(
-    (artifact) => artifact.artifact_type === ArtifactType.VisibleElementsTree,
-  );
-
   const visibleElementsTreeTrimmed = artifacts?.find(
     (artifact) =>
       artifact.artifact_type === ArtifactType.VisibleElementsTreeTrimmed,
@@ -63,14 +59,6 @@ function StepArtifacts({ id, stepProps }: Props) {
     (artifact) => artifact.artifact_type === ArtifactType.LLMPrompt,
   );
 
-  const llmRequest = artifacts?.find(
-    (artifact) => artifact.artifact_type === ArtifactType.LLMRequest,
-  );
-
-  const llmResponseRaw = artifacts?.find(
-    (artifact) => artifact.artifact_type === ArtifactType.LLMResponseRaw,
-  );
-
   const llmResponseParsed = artifacts?.find(
     (artifact) => artifact.artifact_type === ArtifactType.LLMResponseParsed,
   );
@@ -81,26 +69,19 @@ function StepArtifacts({ id, stepProps }: Props) {
 
   return (
     <Tabs defaultValue="info" className="w-full">
-      <TabsList className="grid w-full h-16 grid-cols-5">
+      <TabsList className="grid w-full h-16 grid-cols-4">
         <TabsTrigger value="info">Info</TabsTrigger>
-        <TabsTrigger value="screenshot_llm">Page Screenshots</TabsTrigger>
+        <TabsTrigger value="screenshot_llm">Annotated Screenshots</TabsTrigger>
         <TabsTrigger value="screenshot_action">Action Screenshots</TabsTrigger>
-        <TabsTrigger value="element_tree">Element Tree</TabsTrigger>
-        <TabsTrigger value="element_tree_trimmed">
-          Element Tree (Trimmed)
-        </TabsTrigger>
-        <TabsTrigger value="llm_prompt">LLM Prompt</TabsTrigger>
-        <TabsTrigger value="llm_request">LLM Request</TabsTrigger>
-        <TabsTrigger value="llm_response_raw">LLM Response (Raw)</TabsTrigger>
-        <TabsTrigger value="llm_response_parsed">
-          LLM Response (Parsed)
-        </TabsTrigger>
+        <TabsTrigger value="element_tree_trimmed">Element Tree</TabsTrigger>
+        <TabsTrigger value="llm_prompt">Prompt</TabsTrigger>
+        <TabsTrigger value="llm_response_parsed">Action List</TabsTrigger>
         <TabsTrigger value="html_raw">HTML (Raw)</TabsTrigger>
       </TabsList>
       <TabsContent value="info">
         <div className="flex flex-col gap-6 p-4">
           <div className="flex items-center">
-            <Label className="w-32 shrink-0 text-xl">Step ID</Label>
+            <Label className="w-32 shrink-0">Step ID</Label>
             {isFetching ? (
               <Skeleton className="h-4 w-40" />
             ) : (
@@ -108,7 +89,7 @@ function StepArtifacts({ id, stepProps }: Props) {
             )}
           </div>
           <div className="flex items-center">
-            <Label className="w-32 shrink-0 text-xl">Status</Label>
+            <Label className="w-32 shrink-0">Status</Label>
             {isFetching ? (
               <Skeleton className="h-4 w-40" />
             ) : stepProps ? (
@@ -116,7 +97,7 @@ function StepArtifacts({ id, stepProps }: Props) {
             ) : null}
           </div>
           <div className="flex items-center">
-            <Label className="w-32 shrink-0 text-xl">Created At</Label>
+            <Label className="w-32 shrink-0">Created At</Label>
             {isFetching ? (
               <Skeleton className="h-4 w-40" />
             ) : stepProps ? (
@@ -169,11 +150,6 @@ function StepArtifacts({ id, stepProps }: Props) {
           <div>No screenshots found</div>
         )}
       </TabsContent>
-      <TabsContent value="element_tree">
-        {visibleElementsTree ? (
-          <JSONArtifact artifact={visibleElementsTree} />
-        ) : null}
-      </TabsContent>
       <TabsContent value="element_tree_trimmed">
         {visibleElementsTreeTrimmed ? (
           <JSONArtifact artifact={visibleElementsTreeTrimmed} />
@@ -182,12 +158,6 @@ function StepArtifacts({ id, stepProps }: Props) {
       <TabsContent value="llm_prompt">
         {llmPrompt ? <TextArtifact artifact={llmPrompt} /> : null}
       </TabsContent>
-      <TabsContent value="llm_request">
-        {llmRequest ? <JSONArtifact artifact={llmRequest} /> : null}
-      </TabsContent>
-      <TabsContent value="llm_response_raw">
-        {llmResponseRaw ? <JSONArtifact artifact={llmResponseRaw} /> : null}
-      </TabsContent>
       <TabsContent value="llm_response_parsed">
         {llmResponseParsed ? (
           <JSONArtifact artifact={llmResponseParsed} />
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index 5c94bd0e..283de853 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -51,7 +51,7 @@ function TaskDetails() {
   }
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-8 max-w-5xl mx-auto">
       <div className="flex items-center">
         <Label className="w-32 shrink-0 text-lg">Task ID</Label>
         <Input value={taskId} readOnly />
@@ -131,6 +131,15 @@ function TaskDetails() {
           </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>
@@ -179,15 +188,6 @@ function TaskDetails() {
           ) : null}
         </CardContent>
       </Card>
-      <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>
     </div>
   );
 }