From 564692727b90bdb087e3c115f86c67bd68d98827 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 2 Jan 2025 09:33:50 -0800
Subject: [PATCH] Add workflow run cost (#1467)

---
 skyvern-frontend/src/api/types.ts             |  2 ++
 .../workflowRun/WorkflowRunOverview.tsx       | 29 +++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index 74e7d745..c67bb49d 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -211,6 +211,8 @@ export type WorkflowRunStatusApiResponse = {
   outputs: Record<string, unknown> | null;
   failure_reason: string | null;
   downloaded_file_urls: Array<string> | null;
+  total_steps: number | null;
+  total_cost: number | null;
 };
 
 export type TaskGenerationApiResponse = {
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
index 143c9838..36923f8f 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
@@ -12,6 +12,7 @@ import {
   isActionItem,
   isBlockItem,
   isObserverThought,
+  isTaskVariantBlockItem,
   isThoughtItem,
   isWorkflowRunBlock,
   ObserverThought,
@@ -25,6 +26,11 @@ import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { WorkflowRunBlockScreenshot } from "./WorkflowRunBlockScreenshot";
 
+const formatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
 export type ActionItem = {
   block: WorkflowRunBlock;
   action: ActionsApiResponse;
@@ -92,6 +98,13 @@ function WorkflowRunOverview() {
 
   const selection = getActiveSelection();
 
+  const numberOfActions = workflowRunTimeline.reduce((total, current) => {
+    if (isTaskVariantBlockItem(current)) {
+      return total + current.block!.actions!.length;
+    }
+    return total + 0;
+  }, 0);
+
   return (
     <div className="flex h-[42rem] gap-6">
       <div className="w-2/3 space-y-4">
@@ -117,11 +130,21 @@ function WorkflowRunOverview() {
 
         <WorkflowRunTimelineItemInfoSection activeItem={selection} />
       </div>
-      <div className="w-1/3 min-w-0 rounded bg-slate-elevation1 p-4">
+      <div className="w-1/3 min-w-0 space-y-4 rounded bg-slate-elevation1 p-4">
+        <div className="grid grid-cols-3 gap-2">
+          <div className="flex items-center justify-center rounded bg-slate-elevation3 px-4 py-3 text-xs">
+            Actions: {numberOfActions}
+          </div>
+          <div className="flex items-center justify-center rounded bg-slate-elevation3 px-4 py-3 text-xs">
+            Steps: {workflowRun.total_steps ?? 0}
+          </div>
+          <div className="flex items-center justify-center rounded bg-slate-elevation3 px-4 py-3 text-xs">
+            Cost: {formatter.format(workflowRun.total_cost ?? 0)}
+          </div>
+        </div>
         <ScrollArea>
-          <ScrollAreaViewport className="max-h-[40rem]">
+          <ScrollAreaViewport className="max-h-[37rem]">
             <div className="space-y-4">
-              <div className="gap-2"></div>
               {workflowRunIsNotFinalized && (
                 <div
                   key="stream"