From 16ea23bc0ce9c86c532f6d44b2ebd5034f39123d Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Mon, 3 Jun 2024 21:22:18 +0300
Subject: [PATCH] Improve screenshot experience in new task ui (#408)

---
 skyvern-frontend/src/router.tsx               | 21 +++++++++++++++++++
 .../routes/tasks/detail/ActionScreenshot.tsx  |  2 +-
 .../src/routes/tasks/detail/TaskActions.tsx   | 12 +++++------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx
index 35bbb231..f94b4ac2 100644
--- a/skyvern-frontend/src/router.tsx
+++ b/skyvern-frontend/src/router.tsx
@@ -8,6 +8,9 @@ import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
 import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
 import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
 import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
+import { TaskActions } from "./routes/tasks/detail/TaskActions";
+import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
+import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
 
 const router = createBrowserRouter([
   {
@@ -29,6 +32,24 @@ const router = createBrowserRouter([
           {
             path: ":taskId",
             element: <TaskDetails />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="actions" />,
+              },
+              {
+                path: "actions",
+                element: <TaskActions />,
+              },
+              {
+                path: "recording",
+                element: <TaskRecording />,
+              },
+              {
+                path: "parameters",
+                element: <TaskParameters />,
+              },
+            ],
           },
         ],
       },
diff --git a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
index 4f522b86..da11f795 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
@@ -42,7 +42,7 @@ function ActionScreenshot({ stepId, index }: Props) {
   }
 
   return screenshot ? (
-    <figure className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
+    <figure className="max-w-full flex flex-col mx-auto items-center gap-2 overflow-hidden">
       <ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
     </figure>
   ) : (
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
index 54fd4b0f..5aebbb92 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
@@ -23,7 +23,7 @@ function TaskActions() {
 
   return (
     <div className="flex gap-2">
-      <div className="w-3/4 h-[40rem] border rounded">
+      <div className="w-3/4 border rounded">
         <div className="p-4">
           <InputReasoningCard
             input={activeAction.input}
@@ -32,12 +32,10 @@ function TaskActions() {
           />
         </div>
         <div className="p-4">
-          <div className="p-4">
-            <ActionScreenshot
-              stepId={activeAction.stepId}
-              index={activeAction.index}
-            />
-          </div>
+          <ActionScreenshot
+            stepId={activeAction.stepId}
+            index={activeAction.index}
+          />
         </div>
       </div>
       <ScrollableActionList