From 22f72c16ec22fe69ad541bdce4b3a2a355a0d083 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 2 Jan 2025 05:37:23 -0800
Subject: [PATCH] Fix wrongly ordered action screenshots (#1464)

---
 skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx  | 3 ++-
 .../workflowRun/WorkflowRunTimelineItemInfoSection.tsx         | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
index dcdaa739..f35c1b84 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
@@ -44,7 +44,8 @@ function ActionScreenshot({ stepId, index, taskStatus }: Props) {
     (artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
   );
 
-  const screenshot = actionScreenshots?.[index];
+  // action screenshots are reverse ordered w.r.t action order
+  const screenshot = actionScreenshots?.[actionScreenshots.length - index - 1];
 
   if (isLoading) {
     return (
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineItemInfoSection.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineItemInfoSection.tsx
index 16056a25..73f88401 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineItemInfoSection.tsx
+++ b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineItemInfoSection.tsx
@@ -72,7 +72,7 @@ function WorkflowRunTimelineItemInfoSection({ activeItem }: Props) {
     ) {
       return (
         <div className="rounded bg-slate-elevation1 p-4">
-          <Tabs key={item.block_type} defaultValue={defaultTab}>
+          <Tabs key={item.task_id ?? item.block_type} defaultValue={defaultTab}>
             <TabsList>
               {item.status === Status.Completed && (
                 <TabsTrigger value="extracted_information">