debugger block runs dez i (incremental improvements towards figma design(s)) (#3757)

skyvern-frontend/src/components/StatusBadge.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/util/utils";
 
 type Props = {
   className?: string;
-  status: Status;
+  status: Status | "pending";
 };
 
 function StatusBadge({ className, status }: Props) {
@@ -24,7 +24,9 @@ function StatusBadge({ className, status }: Props) {
           status === Status.Canceled ||
           status === Status.TimedOut,
         "bg-yellow-900 text-yellow-50 hover:bg-yellow-900/80":
-          status === Status.Running || status === Status.Queued,
+          status === Status.Running ||
+          status === Status.Queued ||
+          status === "pending",
       })}
     >
       {statusText}

skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeHeader.tsx

@@ -6,7 +6,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { getClient } from "@/api/AxiosClient";
 import { ProxyLocation, Status } from "@/api/types";
-import { Timer } from "@/components/Timer";
+import { StatusBadge } from "@/components/StatusBadge";
 import { toast } from "@/components/ui/use-toast";
 import { useLogging } from "@/hooks/useLogging";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
@@ -34,7 +34,7 @@ import {
   useWorkflowSettingsStore,
   type WorkflowSettingsState,
 } from "@/store/WorkflowSettingsStore";
-import { cn } from "@/util/utils";
+import { cn, formatDate, toDate } from "@/util/utils";
 import {
   statusIsAFailureType,
   statusIsFinalized,
@@ -188,13 +188,6 @@ function NodeHeader({
   const thisBlockIsTargetted =
     urlBlockLabel !== undefined && urlBlockLabel === blockLabel;
 
-  const timerDurationOverride =
-    workflowRun && workflowRun.finished_at
-      ? new Date(workflowRun.finished_at).getTime() -
-        new Date(workflowRun.created_at).getTime() +
-        3500
-      : null;
-
   const [workflowRunStatus, setWorkflowRunStatus] = useState(
     workflowRun?.status,
   );
@@ -475,16 +468,30 @@ function NodeHeader({
     cancelBlock.mutate();
   };
 
+  const isRunning = workflowRun ? statusIsRunningOrQueued(workflowRun) : false;
+  const createdAt = toDate(workflowRun?.created_at ?? "", null);
+  const finishedAt = toDate(workflowRun?.finished_at ?? "", null);
+  const dt = finishedAt
+    ? formatDate(finishedAt)
+    : createdAt
+      ? formatDate(createdAt)
+      : null;
+
   return (
     <>
-      {thisBlockIsTargetted && (
+      {thisBlockIsTargetted ? (
-        <div className="flex w-full animate-[auto-height_1s_ease-in-out_forwards] items-center justify-between overflow-hidden">
+        <div className="flex w-full animate-[auto-height_1s_ease-in-out_forwards] items-center justify-between overflow-hidden pb-4 pt-1">
-          <div className="pb-4">
+          {isRunning ? (
-            <Timer override={timerDurationOverride ?? undefined} />
+            <div>
+              <ReloadIcon className="animate-spin" />
+            </div>
+          ) : null}
+          {dt ? <div className="text-sm opacity-70">{dt}</div> : <span />}
+          <div>
+            <StatusBadge status={workflowRun?.status ?? "pending"} />
           </div>
-          <div className="pb-4">{workflowRun?.status ?? "pending"}</div>
         </div>
-      )}
+      ) : null}
 
       <header className="!mt-0 flex h-[2.75rem] justify-between gap-2">
         <div

skyvern-frontend/src/util/utils.ts

@@ -55,3 +55,15 @@ export function toDate(
 
   return date;
 }
+
+/** Returns a date in the format 'July 14th at 4:52pm' */
+export function formatDate(date: Date): string {
+  const options: Intl.DateTimeFormatOptions = {
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  };
+  return date.toLocaleString("en-US", options);
+}