Improve latest ss, add queued tasks view (#215)

pyproject.toml

@@ -51,6 +51,7 @@ httpx = "^0.27.0"
 filetype = "^1.2.0"
 redis = "^5.0.3"
 onnxruntime = "<1.17"
+supabase = "^2.4.3"
 
 [tool.poetry.group.dev.dependencies]
 isort = "^5.12.0"

skyvern-frontend/src/api/types.ts

@@ -17,6 +17,7 @@ export const Status = {
   Failed: "failed",
   Terminated: "terminated",
   Completed: "completed",
+  Queued: "queued",
 } as const;
 
 export type Status = (typeof Status)[keyof typeof Status];

skyvern-frontend/src/routes/tasks/list/TaskList.tsx

@@ -24,6 +24,7 @@ import { cn } from "@/util/utils";
 import { PAGE_SIZE } from "../constants";
 import { StatusBadge } from "@/components/StatusBadge";
 import { basicTimeFormat } from "@/util/timeFormat";
+import { QueuedTasks } from "../running/QueuedTasks";
 
 function TaskList() {
   const navigate = useNavigate();
@@ -76,6 +77,8 @@ function TaskList() {
       <div className="grid grid-cols-4 gap-4">
         <RunningTasks />
       </div>
+      <h1 className="text-2xl py-2 border-b-2">Queued Tasks</h1>
+      <QueuedTasks />
       <h1 className="text-2xl py-2 border-b-2">Task History</h1>
       <Table>
         <TableHeader>

skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx

@@ -5,19 +5,19 @@ import {
   StepApiResponse,
 } from "@/api/types";
 import { Skeleton } from "@/components/ui/skeleton";
-import { artifactApiBaseUrl } from "@/util/env";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getImageURL } from "../detail/artifactUtils";
 
 type Props = {
   id: string;
 };
 
 function LatestScreenshot({ id }: Props) {
   const {
-    data: screenshotUri,
+    data: artifact,
     isFetching,
     isError,
-  } = useQuery<string | undefined>({
+  } = useQuery<ArtifactApiResponse | undefined>({
     queryKey: ["task", id, "latestScreenshot"],
     queryFn: async () => {
       const steps: StepApiResponse[] = await client
@@ -38,43 +38,39 @@ function LatestScreenshot({ id }: Props) {
         .get(`/tasks/${id}/steps/${latestStep.step_id}/artifacts`)
         .then((response) => response.data);
 
-      const actionScreenshotUris = artifacts
-        ?.filter(
-          (artifact) =>
-            artifact.artifact_type === ArtifactType.ActionScreenshot,
-        )
-        .map((artifact) => artifact.uri);
+      const actionScreenshots = artifacts?.filter(
+        (artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
+      );
 
-      if (actionScreenshotUris.length > 0) {
-        return actionScreenshotUris[0];
+      if (actionScreenshots.length > 0) {
+        return actionScreenshots[0];
       }
 
-      const llmScreenshotUris = artifacts
-        ?.filter(
-          (artifact) => artifact.artifact_type === ArtifactType.LLMScreenshot,
-        )
-        .map((artifact) => artifact.uri);
+      const llmScreenshots = artifacts?.filter(
+        (artifact) => artifact.artifact_type === ArtifactType.LLMScreenshot,
+      );
 
-      if (llmScreenshotUris.length > 0) {
-        return llmScreenshotUris[0];
+      if (llmScreenshots.length > 0) {
+        return llmScreenshots[0];
       }
 
       return Promise.reject("No screenshots found");
     },
     refetchInterval: 2000,
+    placeholderData: keepPreviousData,
   });
 
-  if (isFetching) {
+  if (isFetching && !artifact) {
     return <Skeleton className="w-full h-full" />;
   }
 
-  if (isError || !screenshotUri || typeof screenshotUri !== "string") {
+  if (isError || !artifact) {
     return null;
   }
 
   return (
     <img
-      src={`${artifactApiBaseUrl}/artifact/image?path=${screenshotUri.slice(7)}`}
+      src={getImageURL(artifact)}
       className="w-full h-full object-contain"
       alt="Latest screenshot"
     />