Show block parameters when an action is active (#1437)

skyvern-frontend/src/routes/workflows/types/workflowRunTypes.ts

@@ -1,5 +1,6 @@
 import { ActionsApiResponse, Status } from "@/api/types";
 import { isTaskVariantBlock, WorkflowBlockType } from "./workflowTypes";
+import { ActionItem } from "../workflowRun/WorkflowRunOverview";
 
 export const WorkflowRunTimelineItemTypes = {
   Thought: "thought",
@@ -123,6 +124,17 @@ export function isAction(item: unknown): item is ActionsApiResponse {
   return typeof item === "object" && item !== null && "action_id" in item;
 }
 
+export function isActionItem(item: unknown): item is ActionItem {
+  return (
+    typeof item === "object" &&
+    item !== null &&
+    "block" in item &&
+    isWorkflowRunBlock(item.block) &&
+    "action" in item &&
+    isAction(item.action)
+  );
+}
+
 export function hasExtractedInformation(
   item: unknown,
 ): item is { extracted_information: unknown } {

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx

@@ -9,7 +9,7 @@ import { ActionScreenshot } from "@/routes/tasks/detail/ActionScreenshot";
 import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem";
 import { ThoughtCard } from "./ThoughtCard";
 import {
-  isAction,
+  isActionItem,
   isBlockItem,
   isObserverThought,
   isThoughtItem,
@@ -24,8 +24,13 @@ import { WorkflowRunTimelineItemInfoSection } from "./WorkflowRunTimelineItemInf
 import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
+export type ActionItem = {
+  block: WorkflowRunBlock;
+  action: ActionsApiResponse;
+};
+
 export type WorkflowRunOverviewActiveElement =
-  | ActionsApiResponse
+  | ActionItem
   | ObserverThought
   | WorkflowRunBlock
   | "stream"
@@ -68,9 +73,11 @@ function WorkflowRunOverview() {
             timelineItem.block.actions.length > 0
           ) {
             const last = timelineItem.block.actions.length - 1;
-            return timelineItem.block.actions[
-              last
-            ] as WorkflowRunOverviewActiveElement;
+            const actionItem: ActionItem = {
+              block: timelineItem.block,
+              action: timelineItem.block.actions[last]!,
+            };
+            return actionItem;
           }
           return timelineItem.block;
         }
@@ -89,10 +96,10 @@ function WorkflowRunOverview() {
       <div className="w-2/3 space-y-4">
         <AspectRatio ratio={16 / 9} className="overflow-y-hidden">
           {selection === "stream" && <WorkflowRunStream />}
-          {selection !== "stream" && isAction(selection) && (
+          {selection !== "stream" && isActionItem(selection) && (
             <ActionScreenshot
-              index={selection.action_order ?? 0}
-              stepId={selection.step_id ?? ""}
+              index={selection.action.action_order ?? 0}
+              stepId={selection.action.step_id ?? ""}
             />
           )}
           {isWorkflowRunBlock(selection) && (
@@ -107,7 +114,7 @@ function WorkflowRunOverview() {
           )}
         </AspectRatio>
 
-        <WorkflowRunTimelineItemInfoSection item={selection} />
+        <WorkflowRunTimelineItemInfoSection activeItem={selection} />
       </div>
       <div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4">
         <ScrollArea>

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem.tsx

@@ -1,19 +1,21 @@
-import { ActionsApiResponse } from "@/api/types";
 import {
-  isAction,
+  isActionItem,
   isWorkflowRunBlock,
   WorkflowRunBlock,
 } from "../types/workflowRunTypes";
 import { ActionCard } from "./ActionCard";
 import { BlockCard } from "./BlockCard";
-import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview";
+import {
+  ActionItem,
+  WorkflowRunOverviewActiveElement,
+} from "./WorkflowRunOverview";
 
 type Props = {
   activeItem: WorkflowRunOverviewActiveElement;
   block: WorkflowRunBlock;
   subBlocks: Array<WorkflowRunBlock>;
   onBlockItemClick: (block: WorkflowRunBlock) => void;
-  onActionClick: (action: ActionsApiResponse) => void;
+  onActionClick: (action: ActionItem) => void;
 };
 
 function WorkflowRunTimelineBlockItem({
@@ -33,11 +35,16 @@ function WorkflowRunTimelineBlockItem({
             key={action.action_id}
             action={action}
             active={
-              isAction(activeItem) && activeItem.action_id === action.action_id
+              isActionItem(activeItem) &&
+              activeItem.action.action_id === action.action_id
             }
             index={actions.length - index}
             onClick={() => {
-              onActionClick(action);
+              const actionItem: ActionItem = {
+                block,
+                action,
+              };
+              onActionClick(actionItem);
             }}
           />
         );

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineItemInfoSection.tsx

@@ -1,11 +1,10 @@
-import { ActionsApiResponse, Status } from "@/api/types";
+import { Status } from "@/api/types";
 import {
   hasExtractedInformation,
   isAction,
+  isActionItem,
   isObserverThought,
   isWorkflowRunBlock,
-  ObserverThought,
-  WorkflowRunBlock,
 } from "../types/workflowRunTypes";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { CodeEditor } from "../components/CodeEditor";
@@ -13,17 +12,15 @@ import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResi
 import { WorkflowBlockTypes } from "../types/workflowTypes";
 import { statusIsAFailureType } from "@/routes/tasks/types";
 import { SendEmailBlockInfo } from "./blockInfo/SendEmailBlockInfo";
+import { WorkflowRunOverviewActiveElement } from "./WorkflowRunOverview";
 
 type Props = {
-  item:
-    | ActionsApiResponse
-    | ObserverThought
-    | WorkflowRunBlock
-    | "stream"
-    | null;
+  activeItem: WorkflowRunOverviewActiveElement;
 };
 
-function WorkflowRunTimelineItemInfoSection({ item }: Props) {
+function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
+  const item = isActionItem(activeItem) ? activeItem.block : activeItem;
+
   if (!item) {
     return null;
   }