Frontend: unified /runs URL (#3912)

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

@@ -2,16 +2,17 @@ import { StepNavigation } from "./StepNavigation";
 import { StepArtifacts } from "./StepArtifacts";
 import { useQuery } from "@tanstack/react-query";
 import { StepApiResponse } from "@/api/types";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { apiPathPrefix } from "@/util/env";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function StepArtifactsLayout() {
   const [searchParams, setSearchParams] = useSearchParams();
   const step = Number(searchParams.get("step")) || 0;
   const credentialGetter = useCredentialGetter();
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
 
   const {
     data: steps,

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

@@ -2,11 +2,12 @@ import { getClient } from "@/api/AxiosClient";
 import { StepApiResponse } from "@/api/types";
 import { cn } from "@/util/utils";
 import { useQuery } from "@tanstack/react-query";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import { PAGE_SIZE } from "../constants";
 import { CheckboxIcon, CrossCircledIcon } from "@radix-ui/react-icons";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { apiPathPrefix } from "@/util/env";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 type Props = {
   activeIndex: number;
@@ -14,7 +15,7 @@ type Props = {
 };
 
 function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const [searchParams] = useSearchParams();
   const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
   const credentialGetter = useCredentialGetter();

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

@@ -12,7 +12,6 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
 import {
   statusIsFinalized,
   statusIsNotFinalized,
@@ -21,6 +20,7 @@ import {
 import { ActionScreenshot } from "./ActionScreenshot";
 import { useActions } from "./hooks/useActions";
 import { ScrollableActionList } from "./ScrollableActionList";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 const formatter = Intl.NumberFormat("en-US", {
   style: "currency",
@@ -38,7 +38,7 @@ let socket: WebSocket | null = null;
 const wssBaseUrl = import.meta.env.VITE_WSS_BASE_URL;
 
 function TaskActions() {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const credentialGetter = useCredentialGetter();
   const [streamImgSrc, setStreamImgSrc] = useState<string>("");
   const [selectedAction, setSelectedAction] = useState<
@@ -157,7 +157,7 @@ function TaskActions() {
   });
 
   const { data: actions, isLoading: actionsIsLoading } = useActions({
-    id: taskId,
+    id: taskId ?? undefined,
   });
 
   if (taskIsLoading || actionsIsLoading || stepsIsLoading) {

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

@@ -1,3 +1,4 @@
+import { AxiosError } from "axios";
 import { getClient } from "@/api/AxiosClient";
 import { useState } from "react";
 import {
@@ -6,6 +7,7 @@ import {
   TaskApiResponse,
   WorkflowRunStatusApiResponse,
 } from "@/api/types";
+import { Status404 } from "@/components/Status404";
 import { StatusBadge } from "@/components/StatusBadge";
 import { SwitchBarNavigation } from "@/components/SwitchBarNavigation";
 import { Button } from "@/components/ui/button";
@@ -33,10 +35,11 @@ import { type ApiCommandOptions } from "@/util/apiCommands";
 import { buildTaskRunPayload } from "@/util/taskRunPayload";
 import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Link, Outlet, useParams } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
 import { statusIsFinalized } from "../types";
 import { MAX_STEPS_DEFAULT } from "../constants";
 import { useTaskQuery } from "./hooks/useTaskQuery";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function createTaskRequestObject(values: TaskApiResponse) {
   return {
@@ -52,7 +55,7 @@ function createTaskRequestObject(values: TaskApiResponse) {
 }
 
 function TaskDetails() {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
   const apiCredential = useApiCredential();
@@ -62,7 +65,7 @@ function TaskDetails() {
     isLoading: taskIsLoading,
     isError: taskIsError,
     error: taskError,
-  } = useTaskQuery({ id: taskId });
+  } = useTaskQuery({ id: taskId ?? undefined });
 
   const { data: workflowRun, isLoading: workflowRunIsLoading } =
     useQuery<WorkflowRunStatusApiResponse>({
@@ -132,6 +135,12 @@ function TaskDetails() {
   const [replayOpen, setReplayOpen] = useState(false);
 
   if (taskIsError) {
+    const status = (taskError as AxiosError | undefined)?.response?.status;
+
+    if (status === 404) {
+      return <Status404 />;
+    }
+
     return <div>Error: {taskError?.message}</div>;
   }
 
@@ -293,9 +302,7 @@ function TaskDetails() {
           ) : (
             workflow &&
             workflowRun && (
-              <Link
-                to={`/workflows/${workflow.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`}
-              >
+              <Link to={`/runs/${workflowRun.workflow_run_id}`}>
                 {workflow.title}
               </Link>
             )

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

@@ -9,10 +9,10 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "@/routes/workflows/editor/nodes/Taskv2Node/types";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function TaskParameters() {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const credentialGetter = useCredentialGetter();
   const {
     data: task,

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

@@ -2,12 +2,12 @@ import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { getRecordingURL } from "./artifactUtils";
-import { useParams } from "react-router-dom";
 import { Skeleton } from "@/components/ui/skeleton";
 import { TaskApiResponse } from "@/api/types";
+import { useFirstParam } from "@/hooks/useFirstParam";
 
 function TaskRecording() {
-  const { taskId } = useParams();
+  const taskId = useFirstParam("taskId", "runId");
   const credentialGetter = useCredentialGetter();
 
   const {