From 7e50e49d457d429be5fec6bd02c71a09942bca0d Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 20 Mar 2025 13:11:43 -0700
Subject: [PATCH] show outputs in workflow main page (#1982)

---
 .../src/routes/workflows/WorkflowRun.tsx      | 45 ++++++++++++++++++-
 .../workflowRun/WorkflowRunOutput.tsx         | 15 +------
 .../workflows/workflowRun/workflowRunUtils.ts | 15 +++++++
 3 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 skyvern-frontend/src/routes/workflows/workflowRun/workflowRunUtils.ts

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 716a63ea..8e9da664 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -1,5 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
-import { ProxyLocation } from "@/api/types";
+import { ProxyLocation, Status } from "@/api/types";
 import { StatusBadge } from "@/components/StatusBadge";
 import { SwitchBarNavigation } from "@/components/SwitchBarNavigation";
 import { Button } from "@/components/ui/button";
@@ -21,6 +21,7 @@ import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
 import {
   CopyIcon,
+  FileIcon,
   Pencil2Icon,
   PlayIcon,
   ReloadIcon,
@@ -34,6 +35,9 @@ import { useWorkflowRunQuery } from "./hooks/useWorkflowRunQuery";
 import { WorkflowRunTimeline } from "./workflowRun/WorkflowRunTimeline";
 import { useWorkflowRunTimelineQuery } from "./hooks/useWorkflowRunTimelineQuery";
 import { findActiveItem } from "./workflowRun/workflowTimelineUtils";
+import { getAggregatedExtractedInformation } from "./workflowRun/workflowRunUtils";
+import { Label } from "@/components/ui/label";
+import { CodeEditor } from "./components/CodeEditor";
 
 function WorkflowRun() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -128,6 +132,13 @@ function WorkflowRun() {
 
   const isTaskv2Run = workflowRun && workflowRun.task_v2 !== null;
 
+  const outputs = workflowRun?.outputs;
+  const aggregatedExtractedInformation = getAggregatedExtractedInformation(
+    outputs ?? {},
+  );
+
+  const fileUrls = workflowRun?.downloaded_file_urls ?? [];
+
   return (
     <div className="space-y-8">
       <header className="flex justify-between">
@@ -229,6 +240,38 @@ function WorkflowRun() {
           )}
         </div>
       </header>
+      {workflowRunIsFinalized && workflowRun.status === Status.Completed && (
+        <div className="grid grid-cols-2 gap-4 rounded-lg bg-slate-elevation1 p-4">
+          <div className="space-y-4">
+            <Label>Extracted Information</Label>
+            <CodeEditor
+              language="json"
+              value={JSON.stringify(aggregatedExtractedInformation, null, 2)}
+              readOnly
+              maxHeight="250px"
+            />
+          </div>
+          <div className="space-y-4">
+            <Label>Downloaded Files</Label>
+            <div className="space-y-2">
+              {fileUrls.length > 0 ? (
+                fileUrls.map((url, index) => {
+                  return (
+                    <div key={url} title={url} className="flex gap-2">
+                      <FileIcon className="size-6" />
+                      <a href={url} className="underline underline-offset-4">
+                        <span>{`File ${index + 1}`}</span>
+                      </a>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="text-sm">No files downloaded</div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
       {workflowFailureReason}
       <SwitchBarNavigation
         options={[
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx
index 3121431e..3a0d6266 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx
@@ -12,20 +12,7 @@ import { useWorkflowRunTimelineQuery } from "../hooks/useWorkflowRunTimelineQuer
 import { Status } from "@/api/types";
 import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { isTaskVariantBlock } from "../types/workflowTypes";
-
-function getAggregatedExtractedInformation(outputs: Record<string, unknown>) {
-  const extractedInformation: Record<string, unknown> = {};
-  Object.entries(outputs).forEach(([id, output]) => {
-    if (
-      typeof output === "object" &&
-      output !== null &&
-      "extracted_information" in output
-    ) {
-      extractedInformation[id] = output.extracted_information;
-    }
-  });
-  return extractedInformation;
-}
+import { getAggregatedExtractedInformation } from "./workflowRunUtils";
 
 function formatExtractedInformation(outputs: Record<string, unknown>) {
   const aggregateExtractedInformation =
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/workflowRunUtils.ts b/skyvern-frontend/src/routes/workflows/workflowRun/workflowRunUtils.ts
new file mode 100644
index 00000000..b6020222
--- /dev/null
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/workflowRunUtils.ts
@@ -0,0 +1,15 @@
+export function getAggregatedExtractedInformation(
+  outputs: Record<string, unknown>,
+) {
+  const extractedInformation: Record<string, unknown> = {};
+  Object.entries(outputs).forEach(([id, output]) => {
+    if (
+      typeof output === "object" &&
+      output !== null &&
+      "extracted_information" in output
+    ) {
+      extractedInformation[id] = output.extracted_information;
+    }
+  });
+  return extractedInformation;
+}