From 2903291dc4a989812580e3369bc9b9da9d3a364f Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Fri, 22 Aug 2025 10:30:49 -0400
Subject: [PATCH] add icon for scripted actions (#3274)

---
 skyvern-frontend/src/api/types.ts                     |  3 +++
 .../src/routes/tasks/detail/ScrollableActionList.tsx  |  6 ++++++
 .../src/routes/tasks/detail/hooks/useActions.ts       |  2 ++
 .../src/routes/workflows/workflowRun/ActionCard.tsx   | 11 ++++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index 8f775630..5ef17777 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -252,6 +252,7 @@ export type ActionApiResponse = {
   text: string | null;
   option: Option | null;
   file_url: string | null;
+  created_by: string | null;
 };
 
 export type Action = {
@@ -262,6 +263,7 @@ export type Action = {
   success: boolean;
   stepId: string;
   index: number;
+  created_by: string | null;
 };
 
 export type EvalKind = "workflow" | "task";
@@ -357,6 +359,7 @@ export type ActionsApiResponse = {
   reasoning: string | null;
   intention: string | null;
   response: string | null;
+  created_by: string | null;
 };
 
 export type TaskV2 = {
diff --git a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
index e1f3f266..d656c4cc 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
@@ -8,6 +8,7 @@ import {
   CheckCircledIcon,
   CrossCircledIcon,
   DotFilledIcon,
+  LightningBoltIcon,
 } from "@radix-ui/react-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { ReactNode, useRef } from "react";
@@ -80,6 +81,11 @@ function ScrollableActionList({
               </div>
               <div className="flex items-center gap-2">
                 <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" />
diff --git a/skyvern-frontend/src/routes/tasks/detail/hooks/useActions.ts b/skyvern-frontend/src/routes/tasks/detail/hooks/useActions.ts
index 22b5f247..40cbb0e7 100644
--- a/skyvern-frontend/src/routes/tasks/detail/hooks/useActions.ts
+++ b/skyvern-frontend/src/routes/tasks/detail/hooks/useActions.ts
@@ -107,6 +107,7 @@ function useActions({ id }: Props): {
                 success: actionResult?.[0]?.success ?? false,
                 stepId: step.step_id,
                 index,
+                created_by: action.created_by,
               };
             });
             return actions;
@@ -123,6 +124,7 @@ function useActions({ id }: Props): {
               action.status === Status.Skipped,
             stepId: action.step_id ?? "",
             index: action.action_order ?? 0,
+            created_by: action.created_by,
           };
         });
 
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
index 6ac8cac6..4d62b8e4 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/ActionCard.tsx
@@ -2,7 +2,11 @@ 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 } from "@radix-ui/react-icons";
+import {
+  CheckCircledIcon,
+  CrossCircledIcon,
+  LightningBoltIcon,
+} from "@radix-ui/react-icons";
 import { useCallback } from "react";
 
 type Props = {
@@ -47,6 +51,11 @@ function ActionCard({ action, onClick, active, index }: Props) {
           </div>
           <div className="flex items-center gap-2">
             <ActionTypePill actionType={action.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>
+            )}
             {success ? (
               <div className="flex gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
                 <CheckCircledIcon className="h-4 w-4 text-success" />