Use search params for diagnostics step and artifact (#1047)

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

@@ -7,7 +7,7 @@ import {
 import { StatusBadge } from "@/components/StatusBadge";
 import { Label } from "@/components/ui/label";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ZoomableImage } from "@/components/ZoomableImage";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -23,6 +23,8 @@ type Props = {
 };
 
 function StepArtifacts({ id, stepProps }: Props) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const artifact = searchParams.get("artifact") ?? "info";
   const { taskId } = useParams();
   const credentialGetter = useCredentialGetter();
   const {
@@ -78,7 +80,22 @@ function StepArtifacts({ id, stepProps }: Props) {
   );
 
   return (
-    <Tabs defaultValue="info" className="w-full">
+    <Tabs
+      value={artifact}
+      onValueChange={(value) => {
+        setSearchParams(
+          (params) => {
+            const newParams = new URLSearchParams(params);
+            newParams.set("artifact", value);
+            return newParams;
+          },
+          {
+            replace: true,
+          },
+        );
+      }}
+      className="w-full"
+    >
       <TabsList className="grid h-16 w-full grid-cols-5">
         <TabsTrigger value="info">Info</TabsTrigger>
         <TabsTrigger value="screenshot_llm">Annotated Screenshots</TabsTrigger>

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

@@ -1,14 +1,14 @@
-import { useState } from "react";
 import { StepNavigation } from "./StepNavigation";
 import { StepArtifacts } from "./StepArtifacts";
 import { useQuery } from "@tanstack/react-query";
 import { StepApiResponse } from "@/api/types";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 
 function StepArtifactsLayout() {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const step = Number(searchParams.get("step")) || 0;
   const credentialGetter = useCredentialGetter();
   const { taskId } = useParams();
 
@@ -30,14 +30,25 @@ function StepArtifactsLayout() {
     return <div>Error: {error?.message}</div>;
   }
 
-  const activeStep = steps?.[activeIndex];
+  const activeStep = steps?.[step];
 
   return (
     <div className="flex">
       <aside className="w-64 shrink-0">
         <StepNavigation
-          activeIndex={activeIndex}
-          onActiveIndexChange={setActiveIndex}
+          activeIndex={step}
+          onActiveIndexChange={(index) => {
+            setSearchParams(
+              (params) => {
+                const newParams = new URLSearchParams(params);
+                newParams.set("step", String(index));
+                return newParams;
+              },
+              {
+                replace: true,
+              },
+            );
+          }}
         />
       </aside>
       <main className="w-full px-4">