Format observer outputs (#1560)

skyvern-frontend/src/api/types.ts

@@ -252,4 +252,6 @@ export type ObserverCruise = {
   url: string | null;
   created_at: string;
   modified_at: string;
+  output: Record<string, unknown> | null;
+  summary: string | null;
 };

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx

@@ -13,6 +13,29 @@ 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;
+}
+
+function formatExtractedInformation(outputs: Record<string, unknown>) {
+  const aggregateExtractedInformation =
+    getAggregatedExtractedInformation(outputs);
+  return {
+    extracted_information: aggregateExtractedInformation,
+    ...outputs,
+  };
+}
+
 function WorkflowRunOutput() {
   const { data: workflowRunTimeline, isLoading: workflowRunTimelineIsLoading } =
     useWorkflowRunTimelineQuery();
@@ -50,7 +73,11 @@ function WorkflowRunOutput() {
     activeBlock.status === Status.Completed;
 
   const outputs = workflowRun?.outputs;
+  const formattedOutputs = outputs
+    ? formatExtractedInformation(outputs)
+    : outputs;
   const fileUrls = workflowRun?.downloaded_file_urls ?? [];
+  const observerOutput = workflowRun?.observer_cruise?.output;
 
   return (
     <div className="space-y-5">
@@ -107,15 +134,27 @@ function WorkflowRunOutput() {
           </div>
         </div>
       ) : null}
+      {observerOutput ? (
+        <div className="rounded bg-slate-elevation2 p-6">
+          <div className="space-y-4">
+            <h1 className="text-lg font-bold">Observer Output</h1>
+            <CodeEditor
+              language="json"
+              value={JSON.stringify(observerOutput, null, 2)}
+              readOnly
+              minHeight="96px"
+              maxHeight="200px"
+            />
+          </div>
+        </div>
+      ) : null}
       <div className="rounded bg-slate-elevation2 p-6">
         <div className="space-y-4">
           <h1 className="text-lg font-bold">Workflow Run Outputs</h1>
           <CodeEditor
             language="json"
             value={
-              outputs
+              formattedOutputs ? JSON.stringify(formattedOutputs, null, 2) : ""
-                ? JSON.stringify(outputs, null, 2)
-                : "Waiting for outputs.."
             }
             readOnly
             minHeight="96px"

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx

@@ -14,7 +14,7 @@ import {
   WorkflowRunOverviewActiveElement,
 } from "./WorkflowRunOverview";
 import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
-import { statusIsNotFinalized } from "@/routes/tasks/types";
+import { statusIsFinalized, statusIsNotFinalized } from "@/routes/tasks/types";
 import { cn } from "@/util/utils";
 import { ThoughtCard } from "./ThoughtCard";
 import { WorkflowRunTimelineBlockItem } from "./WorkflowRunTimelineBlockItem";
@@ -54,7 +54,9 @@ function WorkflowRunTimeline({
     return null;
   }
 
+  // bit redundant but better read
   const workflowRunIsNotFinalized = statusIsNotFinalized(workflowRun);
+  const workflowRunIsFinalized = statusIsFinalized(workflowRun);
 
   const numberOfActions = workflowRunTimeline.reduce((total, current) => {
     if (isTaskVariantBlockItem(current)) {
@@ -96,7 +98,7 @@ function WorkflowRunTimeline({
                 </div>
               </div>
             )}
-            {workflowRunTimeline.length === 0 && (
+            {workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
               <div>Workflow timeline is empty</div>
             )}
             {workflowRunTimeline?.map((timelineItem) => {