diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts index fe9190e61..3d0dcd519 100644 --- a/skyvern-frontend/src/api/types.ts +++ b/skyvern-frontend/src/api/types.ts @@ -577,6 +577,7 @@ export type WorkflowRunStatusApiResponse = { parameters: Record; screenshot_urls: Array | null; recording_url: string | null; + recording_urls: Array | null; outputs: Record | null; failure_reason: string | null; failure_category: Array | null; @@ -608,6 +609,7 @@ export type WorkflowRunStatusApiResponseWithWorkflow = { parameters: Record; screenshot_urls: Array | null; recording_url: string | null; + recording_urls: Array | null; outputs: Record | null; failure_reason: string | null; failure_category: Array | null; diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunRecording.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunRecording.tsx index aa5eb45f1..ad8ba6be6 100644 --- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunRecording.tsx +++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunRecording.tsx @@ -2,33 +2,72 @@ import { usePostHog } from "posthog-js/react"; import { useWorkflowRunWithWorkflowQuery } from "../hooks/useWorkflowRunWithWorkflowQuery"; import { artifactApiBaseUrl } from "@/util/env"; +function resolveUrl(url: string): string { + if (url.startsWith("file://")) { + return `${artifactApiBaseUrl}/artifact/recording?path=${url.slice(7)}`; + } + return url; +} + function WorkflowRunRecording() { const postHog = usePostHog(); const { data: workflowRun } = useWorkflowRunWithWorkflowQuery(); - let recordingURL = workflowRun?.recording_url; - if (recordingURL?.startsWith("file://")) { - recordingURL = `${artifactApiBaseUrl}/artifact/recording?path=${recordingURL.slice(7)}`; + + const rawUrls = + workflowRun?.recording_urls && workflowRun.recording_urls.length > 0 + ? workflowRun.recording_urls + : workflowRun?.recording_url + ? [workflowRun.recording_url] + : []; + const recordingUrls = rawUrls.map(resolveUrl); + + if (!workflowRun || recordingUrls.length === 0) { + return
No recording available for this workflow
; } - function handlePlay() { - if (!workflowRun) { - return; - } + const run = workflowRun; + + function handlePlay(index: number) { postHog.capture("run.recording.viewed", { - org_id: workflowRun.workflow.organization_id, - run_id: workflowRun.workflow_run_id, + org_id: run.workflow.organization_id, + run_id: run.workflow_run_id, + recording_index: index, + recording_count: recordingUrls.length, }); } - return recordingURL ? ( -