Add collapsible for workflow run tasks table (#1219)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
         "@radix-ui/react-checkbox": "^1.1.1",
+        "@radix-ui/react-collapsible": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
@@ -1125,6 +1126,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
@@ -1372,25 +1403,24 @@
       }
     },
     "node_modules/@radix-ui/react-collapsible": {
-      "version": "1.0.3",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
-      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
-        "@radix-ui/react-use-layout-effect": "1.0.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -1401,6 +1431,163 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",

skyvern-frontend/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

skyvern-frontend/src/api/types.ts

@@ -277,6 +277,7 @@ export type WorkflowRunStatusApiResponse = {
   screenshot_urls: Array<string> | null;
   recording_url: string | null;
   outputs: Record<string, unknown> | null;
+  failure_reason: string | null;
 };
 
 export type TaskGenerationApiResponse = {

skyvern-frontend/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

skyvern-frontend/src/routes/workflows/WorkflowBlockCollapsibleContent.tsx

@@ -0,0 +1,188 @@
+import { Status, TaskApiResponse } from "@/api/types";
+import { StatusBadge } from "@/components/StatusBadge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { TableCell, TableRow } from "@/components/ui/table";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
+import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { cn } from "@/util/utils";
+import { CodeEditor } from "./components/CodeEditor";
+import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
+
+type Props = {
+  task: TaskApiResponse;
+  onNavigate: (event: React.MouseEvent, id: string) => void;
+};
+
+function WorkflowBlockCollapsibleContent({ task, onNavigate }: Props) {
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState(0);
+
+  const showExtractedInformation = task?.status === Status.Completed;
+  const extractedInformation = showExtractedInformation ? (
+    <CodeEditor
+      language="json"
+      value={JSON.stringify(task.extracted_information, null, 2)}
+      readOnly
+      minHeight={"96px"}
+      maxHeight={"500px"}
+      className="w-full"
+    />
+  ) : null;
+
+  const showFailureReason =
+    task?.status === Status.Failed ||
+    task?.status === Status.Terminated ||
+    task?.status === Status.TimedOut;
+  const failureReason = showFailureReason ? (
+    <CodeEditor
+      language="json"
+      value={JSON.stringify(task.failure_reason, null, 2)}
+      readOnly
+      minHeight={"96px"}
+      maxHeight={"500px"}
+      className="w-full"
+    />
+  ) : null;
+
+  return (
+    <Collapsible key={task.task_id} asChild open={open} onOpenChange={setOpen}>
+      <>
+        <TableRow
+          className={cn("hover:bg-slate-elevation2", {
+            "border-b-0 bg-slate-elevation2": open,
+          })}
+        >
+          <TableCell>
+            <CollapsibleTrigger asChild>
+              <div className="w-fit cursor-pointer rounded-full p-2 hover:bg-muted">
+                {open ? (
+                  <ChevronDownIcon className="size-6" />
+                ) : (
+                  <ChevronRightIcon className="size-6" />
+                )}
+              </div>
+            </CollapsibleTrigger>
+          </TableCell>
+          <TableCell className="w-1/4 cursor-pointer">
+            {task.request.title}
+          </TableCell>
+          <TableCell
+            className="w-1/4 cursor-pointer"
+            onClick={(event) => {
+              onNavigate(event, task.task_id);
+            }}
+          >
+            {task.task_id}
+          </TableCell>
+          <TableCell
+            className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
+            onClick={(event) => onNavigate(event, task.task_id)}
+          >
+            {task.request.url}
+          </TableCell>
+          <TableCell
+            className="w-1/6 cursor-pointer"
+            onClick={(event) => onNavigate(event, task.task_id)}
+          >
+            <StatusBadge status={task.status} />
+          </TableCell>
+          <TableCell
+            className="w-1/4 cursor-pointer whitespace-nowrap"
+            onClick={(event) => onNavigate(event, task.task_id)}
+            title={basicTimeFormat(task.created_at)}
+          >
+            {basicLocalTimeFormat(task.created_at)}
+          </TableCell>
+        </TableRow>
+        <CollapsibleContent asChild>
+          <TableRow className="bg-slate-elevation2 hover:bg-slate-elevation2">
+            <TableCell colSpan={6} className="border-b">
+              <div className="space-y-2 px-6">
+                <div className="flex gap-1">
+                  <div
+                    className={cn(
+                      "cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700",
+                      {
+                        "bg-slate-700 text-foreground": activeTab === 0,
+                      },
+                    )}
+                    onClick={() => {
+                      setActiveTab(0);
+                    }}
+                  >
+                    {showExtractedInformation
+                      ? "Extracted Information"
+                      : showFailureReason
+                        ? "Failure Reason"
+                        : ""}
+                  </div>
+                  <div
+                    className={cn(
+                      "cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700 hover:text-foreground",
+                      {
+                        "bg-slate-700 text-foreground": activeTab === 1,
+                      },
+                    )}
+                    onClick={() => {
+                      setActiveTab(1);
+                    }}
+                  >
+                    Navigation Goal
+                  </div>
+                  <div
+                    className={cn(
+                      "cursor-pointer rounded-sm px-3 py-2 text-slate-400 hover:bg-slate-700 hover:text-foreground",
+                      {
+                        "bg-slate-700 text-foreground": activeTab === 2,
+                      },
+                    )}
+                    onClick={() => {
+                      setActiveTab(2);
+                    }}
+                  >
+                    Parameters
+                  </div>
+                </div>
+                <div>
+                  {activeTab === 0 &&
+                    (showExtractedInformation
+                      ? extractedInformation
+                      : showFailureReason
+                        ? failureReason
+                        : null)}
+                  {activeTab === 1 && (
+                    <AutoResizingTextarea
+                      value={task.request.navigation_goal ?? ""}
+                      readOnly
+                    />
+                  )}
+                  {activeTab === 2 && (
+                    <CodeEditor
+                      language="json"
+                      value={JSON.stringify(
+                        task.request.navigation_payload,
+                        null,
+                        2,
+                      )}
+                      minHeight={"96px"}
+                      maxHeight={"500px"}
+                      className="w-full"
+                      readOnly
+                    />
+                  )}
+                </div>
+              </div>
+            </TableCell>
+          </TableRow>
+        </CollapsibleContent>
+      </>
+    </Collapsible>
+  );
+}
+
+export { WorkflowBlockCollapsibleContent };

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -8,6 +8,16 @@ import { StatusBadge } from "@/components/StatusBadge";
 import { ZoomableImage } from "@/components/ZoomableImage";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -33,8 +43,6 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { copyText } from "@/util/copyText";
 import { apiBaseUrl, envCredential } from "@/util/env";
 import {
-  basicLocalTimeFormat,
-  basicTimeFormat,
   localTimeFormatWithShortDate,
   timeFormatWithShortDate,
 } from "@/util/timeFormat";
@@ -60,25 +68,15 @@ import {
   useParams,
   useSearchParams,
 } from "react-router-dom";
-import { TaskActions } from "../tasks/list/TaskActions";
 import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
 import {
   statusIsFinalized,
   statusIsNotFinalized,
   statusIsRunningOrQueued,
 } from "../tasks/types";
+import { WorkflowBlockCollapsibleContent } from "./WorkflowBlockCollapsibleContent";
 import { CodeEditor } from "./components/CodeEditor";
 import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 
 type StreamMessage = {
   task_id: string;
@@ -199,6 +197,8 @@ function WorkflowRun() {
 
   const workflowRunIsFinalized = workflowRun && statusIsFinalized(workflowRun);
 
+  const showStream = workflowRun && statusIsNotFinalized(workflowRun);
+
   useEffect(() => {
     if (!workflowRunIsRunningOrQueued) {
       return;
@@ -336,25 +336,37 @@ function WorkflowRun() {
 
   const parameters = workflowRun?.parameters ?? {};
 
+  const title = workflowIsLoading ? (
+    <Skeleton className="h-9 w-48" />
+  ) : (
+    <h1 className="text-3xl">{workflow?.title}</h1>
+  );
+
+  const workflowFailureReason = workflowRun?.failure_reason ? (
+    <div
+      className="space-y-2 rounded-md border border-red-600 p-4"
+      style={{
+        backgroundColor: "rgba(220, 38, 38, 0.10)",
+      }}
+    >
+      <div className="font-bold">Workflow Failure Reason</div>
+      <div className="text-sm">{workflowRun.failure_reason}</div>
+    </div>
+  ) : null;
+
   return (
     <div className="space-y-8">
       <header className="flex justify-between">
         <div className="space-y-3">
           <div className="flex items-center gap-5">
-            <h1 className="text-3xl">{workflowRunId}</h1>
+            {title}
             {workflowRunIsLoading ? (
               <Skeleton className="h-8 w-28" />
             ) : workflowRun ? (
               <StatusBadge status={workflowRun?.status} />
             ) : null}
           </div>
-          <h2 className="text-2xl text-slate-400">
+          <h2 className="text-2xl text-slate-400">{workflowRunId}</h2>
-            {workflowIsLoading ? (
-              <Skeleton className="h-8 w-48" />
-            ) : (
-              workflow?.title
-            )}
-          </h2>
         </div>
 
         <div className="flex gap-2">
@@ -442,7 +454,8 @@ function WorkflowRun() {
           )}
         </div>
       </header>
-      {workflowRun && statusIsNotFinalized(workflowRun) && (
+      {workflowFailureReason}
+      {showStream && (
         <div className="flex gap-5">
           <div className="w-3/4 shrink-0">
             <AspectRatio ratio={16 / 9}>{getStream()}</AspectRatio>
@@ -507,17 +520,18 @@ function WorkflowRun() {
         </header>
         <div className="rounded-md border">
           <Table>
-            <TableHeader className="rounded-t-md bg-slate-elevation1">
+            <TableHeader className="rounded-t-md bg-slate-elevation2">
               <TableRow>
-                <TableHead className="w-1/4 rounded-tl-md text-slate-400">
+                <TableHead className="rounded-tl-md"></TableHead>
-                  ID
+                <TableHead className="w-1/4 text-slate-400">
+                  Task Title
                 </TableHead>
+                <TableHead className="w-1/4 text-slate-400">ID</TableHead>
                 <TableHead className="w-1/4 text-slate-400">URL</TableHead>
                 <TableHead className="w-1/6 text-slate-400">Status</TableHead>
-                <TableHead className="w-1/4 text-slate-400">
+                <TableHead className="w-1/4 rounded-tr-md text-slate-400">
                   Created At
                 </TableHead>
-                <TableHead className="w-1/12 rounded-tr-md" />
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -525,7 +539,7 @@ function WorkflowRun() {
                 <TaskListSkeletonRows />
               ) : workflowTasks?.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={5}>No tasks</TableCell>
+                  <TableCell colSpan={6}>Could not find any tasks</TableCell>
                 </TableRow>
               ) : (
                 workflowTasks
@@ -534,44 +548,11 @@ function WorkflowRun() {
                   )
                   .map((task) => {
                     return (
-                      <TableRow key={task.task_id}>
+                      <WorkflowBlockCollapsibleContent
-                        <TableCell
+                        key={task.task_id}
-                          className="w-1/4 cursor-pointer"
+                        task={task}
-                          onClick={(event) =>
+                        onNavigate={handleNavigate}
-                            handleNavigate(event, task.task_id)
+                      />
-                          }
-                        >
-                          {task.task_id}
-                        </TableCell>
-                        <TableCell
-                          className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
-                          onClick={(event) =>
-                            handleNavigate(event, task.task_id)
-                          }
-                        >
-                          {task.request.url}
-                        </TableCell>
-                        <TableCell
-                          className="w-1/6 cursor-pointer"
-                          onClick={(event) =>
-                            handleNavigate(event, task.task_id)
-                          }
-                        >
-                          <StatusBadge status={task.status} />
-                        </TableCell>
-                        <TableCell
-                          className="w-1/4 cursor-pointer"
-                          onClick={(event) =>
-                            handleNavigate(event, task.task_id)
-                          }
-                          title={basicTimeFormat(task.created_at)}
-                        >
-                          {basicLocalTimeFormat(task.created_at)}
-                        </TableCell>
-                        <TableCell className="w-1/12">
-                          <TaskActions task={task} />
-                        </TableCell>
-                      </TableRow>
                     );
                   })
               )}
@@ -620,8 +601,10 @@ function WorkflowRun() {
             return (
               <div key={key} className="flex flex-col gap-2">
                 <Label>{key}</Label>
-                {typeof value === "string" ? (
+                {typeof value === "string" ||
-                  <Input value={value} readOnly />
+                typeof value === "number" ||
+                typeof value === "boolean" ? (
+                  <Input value={String(value)} readOnly />
                 ) : (
                   <CodeEditor
                     value={JSON.stringify(value, null, 2)}

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -555,6 +555,7 @@ function getWorkflowBlock(node: WorkflowBlockNode): BlockYAML {
         ...base,
         block_type: "task",
         url: node.data.url,
+        title: node.data.label,
         navigation_goal: node.data.navigationGoal,
         data_extraction_goal: node.data.dataExtractionGoal,
         data_schema: JSONParseSafe(node.data.dataSchema),