From d3bc4389833a258da19c967277d24c2fb6c772d1 Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Mon, 25 Aug 2025 11:46:56 -0400
Subject: [PATCH] Action UI Update (#3296)

---
 .../tasks/detail/ScrollableActionList.tsx     | 20 +++---------------
 .../workflows/workflowRun/ActionCard.tsx      | 21 ++++---------------
 2 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
index d656c4cc..5819106c 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
@@ -4,12 +4,7 @@ import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { cn } from "@/util/utils";
-import {
-  CheckCircledIcon,
-  CrossCircledIcon,
-  DotFilledIcon,
-  LightningBoltIcon,
-} from "@radix-ui/react-icons";
+import { DotFilledIcon, CodeIcon } from "@radix-ui/react-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { ReactNode, useRef } from "react";
 import { ActionTypePill } from "./ActionTypePill";
@@ -75,7 +70,7 @@ function ScrollableActionList({
           }}
         >
           <div className="flex-1 space-y-2 p-4 pl-5">
-            <div className="flex justify-between">
+            <div className="flex justify-start gap-2">
               <div className="flex items-center gap-2">
                 <span>#{i + 1}</span>
               </div>
@@ -83,16 +78,7 @@ function ScrollableActionList({
                 <ActionTypePill actionType={action.type} />
                 {action.created_by === "script" && (
                   <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                    <LightningBoltIcon className="h-4 w-4 text-[gold]" />
-                  </div>
-                )}
-                {action.success ? (
-                  <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                    <CheckCircledIcon className="h-4 w-4 text-success" />
-                  </div>
-                ) : (
-                  <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                    <CrossCircledIcon className="h-4 w-4 text-destructive" />
+                    <CodeIcon className="h-4 w-4" />
                   </div>
                 )}
               </div>
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
index 4d62b8e4..b9a5c630 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
@@ -2,11 +2,7 @@ import { ActionsApiResponse, ActionTypes, Status } from "@/api/types";
 import { Separator } from "@/components/ui/separator";
 import { ActionTypePill } from "@/routes/tasks/detail/ActionTypePill";
 import { cn } from "@/util/utils";
-import {
-  CheckCircledIcon,
-  CrossCircledIcon,
-  LightningBoltIcon,
-} from "@radix-ui/react-icons";
+import { CodeIcon } from "@radix-ui/react-icons";
 import { useCallback } from "react";
 
 type Props = {
@@ -45,24 +41,15 @@ function ActionCard({ action, onClick, active, index }: Props) {
       ref={refCallback}
     >
       <div className="flex-1 space-y-2 p-4 pl-5">
-        <div className="flex justify-between">
+        <div className="flex justify-start gap-2">
           <div className="flex items-center gap-2">
             <span>#{index}</span>
           </div>
           <div className="flex items-center gap-2">
             <ActionTypePill actionType={action.action_type} />
-            {action.created_by === "script" && (
+            {action.created_by !== "script" && (
               <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                <LightningBoltIcon className="h-4 w-4 text-[gold]" />
-              </div>
-            )}
-            {success ? (
-              <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                <CheckCircledIcon className="h-4 w-4 text-success" />
-              </div>
-            ) : (
-              <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
-                <CrossCircledIcon className="h-4 w-4 text-destructive" />
+                <CodeIcon className="h-4 w-4" />
               </div>
             )}
           </div>