From b79767c5dfc98827d734ca41714b0d669964c04f Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Tue, 5 Nov 2024 09:25:16 -0800
Subject: [PATCH] Add radius and change bg color for current task (#1138)

---
 skyvern-frontend/src/api/utils.ts                   | 13 +++++++++++++
 .../src/routes/workflows/WorkflowRun.tsx            |  8 ++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 skyvern-frontend/src/api/utils.ts

diff --git a/skyvern-frontend/src/api/utils.ts b/skyvern-frontend/src/api/utils.ts
new file mode 100644
index 00000000..dfa9fe53
--- /dev/null
+++ b/skyvern-frontend/src/api/utils.ts
@@ -0,0 +1,13 @@
+import { Status, TaskApiResponse } from "./types";
+
+const finalTaskStates: Array<Status> = [
+  Status.Canceled,
+  Status.Completed,
+  Status.Terminated,
+  Status.TimedOut,
+  Status.Failed,
+];
+
+export function taskIsFinalized(task: TaskApiResponse) {
+  return finalTaskStates.includes(task.status);
+}
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 5781c86e..454d6202 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -346,23 +346,23 @@ function WorkflowRun() {
               <div>Waiting for a task to start...</div>
             ) : (
               <div className="flex h-full flex-col gap-2">
-                <div className="flex gap-2 bg-slate-elevation2 p-2">
+                <div className="flex gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">ID</Label>
                   <span className="text-sm">{currentRunningTask.task_id}</span>
                 </div>
-                <div className="flex gap-2 bg-slate-elevation2 p-2">
+                <div className="flex gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">URL</Label>
                   <span className="text-sm">
                     {currentRunningTask.request.url}
                   </span>
                 </div>
-                <div className="flex items-center gap-2 bg-slate-elevation2 p-2">
+                <div className="flex items-center gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">Status</Label>
                   <span className="text-sm">
                     <StatusBadge status={currentRunningTask.status} />
                   </span>
                 </div>
-                <div className="flex gap-2 bg-slate-elevation2 p-2">
+                <div className="flex gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">Created</Label>
                   <span className="text-sm">
                     {currentRunningTask &&