add icon for scripted actions (#3274)

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 = {

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" />

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,
           };
         });
 

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" />