Reintroduce artifacts UI (#419)

skyvern-frontend/src/router.tsx

@@ -11,6 +11,7 @@ import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPa
 import { TaskActions } from "./routes/tasks/detail/TaskActions";
 import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
 import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
+import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
 
 const router = createBrowserRouter([
   {
@@ -49,6 +50,10 @@ const router = createBrowserRouter([
                 path: "parameters",
                 element: <TaskParameters />,
               },
+              {
+                path: "artifacts",
+                element: <StepArtifactsLayout />,
+              },
             ],
           },
         ],

skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx

@@ -37,7 +37,7 @@ function StepArtifactsLayout() {
   const activeStep = steps[activeIndex];
 
   return (
-    <div className="px-4 flex">
+    <div className="flex">
       <aside className="w-64 shrink-0">
         <StepNavigation
           activeIndex={activeIndex}

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -121,6 +121,19 @@ function TaskDetails() {
           >
             Parameters
           </NavLink>
+          <NavLink
+            to="artifacts"
+            className={({ isActive }) => {
+              return cn(
+                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                {
+                  "bg-primary-foreground text-foreground": isActive,
+                },
+              );
+            }}
+          >
+            Artifacts
+          </NavLink>
         </div>
       </div>
       <Outlet />