diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
index 705e7321..5daa2389 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/ObserverThoughtScreenshot.tsx
@@ -61,7 +61,7 @@ function ObserverThoughtScreenshot({ observerThoughtId, taskStatus }: Props) {
if (!screenshot) {
return (
- No screenshot found for this action.
+ No screenshot found for this thought.
);
}
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx
new file mode 100644
index 00000000..4ac6bb6b
--- /dev/null
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunBlockScreenshot.tsx
@@ -0,0 +1,66 @@
+import { getClient } from "@/api/AxiosClient";
+import { ArtifactApiResponse, ArtifactType } from "@/api/types";
+import { ZoomableImage } from "@/components/ZoomableImage";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { getImageURL } from "@/routes/tasks/detail/artifactUtils";
+
+type Props = {
+ workflowRunBlockId: string;
+};
+
+function WorkflowRunBlockScreenshot({ workflowRunBlockId }: Props) {
+ const credentialGetter = useCredentialGetter();
+
+ const { data: artifacts, isLoading } = useQuery>({
+ queryKey: ["workflowRunBlock", workflowRunBlockId, "artifacts"],
+ queryFn: async () => {
+ const client = await getClient(credentialGetter);
+ return client
+ .get(`/workflow_run_block/${workflowRunBlockId}/artifacts`)
+ .then((response) => response.data);
+ },
+ refetchInterval: (query) => {
+ const data = query.state.data;
+ const screenshot = data?.filter(
+ (artifact) => artifact.artifact_type === ArtifactType.LLMScreenshot,
+ )?.[0];
+ if (!screenshot) {
+ return 5000;
+ }
+ return false;
+ },
+ });
+
+ const llmScreenshots = artifacts?.filter(
+ (artifact) => artifact.artifact_type === ArtifactType.LLMScreenshot,
+ );
+
+ const screenshot = llmScreenshots?.[0];
+
+ if (isLoading) {
+ return (
+
+
+
Loading screenshot...
+
+ );
+ }
+
+ if (!screenshot) {
+ return (
+
+ No screenshot found for this workflow run block.
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export { WorkflowRunBlockScreenshot };
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
index bfa655b2..143c9838 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOverview.tsx
@@ -23,6 +23,7 @@ import { DotFilledIcon } from "@radix-ui/react-icons";
import { WorkflowRunTimelineItemInfoSection } from "./WorkflowRunTimelineItemInfoSection";
import { ObserverThoughtScreenshot } from "./ObserverThoughtScreenshot";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
+import { WorkflowRunBlockScreenshot } from "./WorkflowRunBlockScreenshot";
export type ActionItem = {
block: WorkflowRunBlock;
@@ -103,9 +104,9 @@ function WorkflowRunOverview() {
/>
)}
{isWorkflowRunBlock(selection) && (
-
- No screenshot found for this block
-
+
)}
{isObserverThought(selection) && (