mirror of
https://github.com/Skyvern-AI/skyvern.git
synced 2025-09-11 16:04:36 +00:00
Redesign task view (#407)
This commit is contained in:
Kerem Yilmaz
GitHub
parent
05dbea8384
commit
1333e89c12
14 changed files with 647 additions and 180 deletions
|
|
@ -3,7 +3,7 @@ import { QueryClient } from "@tanstack/react-query";
|
|||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 0,
|
||||
staleTime: Infinity,
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,6 +37,13 @@ export type ArtifactApiResponse = {
|
|||
organization_id: string;
|
||||
};
|
||||
|
||||
export type ActionAndResultApiResponse = [
|
||||
ActionApiResponse,
|
||||
{
|
||||
success: boolean;
|
||||
},
|
||||
];
|
||||
|
||||
export type StepApiResponse = {
|
||||
step_id: string;
|
||||
task_id: string;
|
||||
|
|
@ -47,8 +54,7 @@ export type StepApiResponse = {
|
|||
order: number;
|
||||
organization_id: string;
|
||||
output: {
|
||||
action_results: unknown[];
|
||||
actions_and_results: unknown[];
|
||||
actions_and_results: ActionAndResultApiResponse[];
|
||||
errors: unknown[];
|
||||
};
|
||||
retry_index: number;
|
||||
|
|
@ -149,3 +155,39 @@ export type WorkflowApiResponse = {
|
|||
modified_at: string;
|
||||
deleted_at: string | null;
|
||||
};
|
||||
|
||||
// TODO complete this
|
||||
export const ActionTypes = {
|
||||
InputText: "input_text",
|
||||
Click: "click",
|
||||
SelectOption: "select_option",
|
||||
UploadFile: "upload_file",
|
||||
complete: "complete",
|
||||
} as const;
|
||||
|
||||
export type ActionType = (typeof ActionTypes)[keyof typeof ActionTypes];
|
||||
|
||||
export type Option = {
|
||||
label: string;
|
||||
index: number;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export type ActionApiResponse = {
|
||||
reasoning: string;
|
||||
confidence_float: number;
|
||||
action_type: ActionType;
|
||||
text: string | null;
|
||||
option: Option | null;
|
||||
file_url: string | null;
|
||||
};
|
||||
|
||||
export type Action = {
|
||||
reasoning: string;
|
||||
confidence: number;
|
||||
type: ActionType;
|
||||
input: string;
|
||||
success: boolean;
|
||||
stepId: string;
|
||||
index: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,7 +21,11 @@ function StatusBadge({ status }: Props) {
|
|||
|
||||
const statusText = status === "timed_out" ? "timed out" : status;
|
||||
|
||||
return <Badge variant={variant}>{statusText}</Badge>;
|
||||
return (
|
||||
<Badge className="h-fit" variant={variant}>
|
||||
{statusText}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
export { StatusBadge };
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ function ZoomableImage(props: HTMLImageElementProps) {
|
|||
<img
|
||||
{...props}
|
||||
onClick={openModal}
|
||||
className={clsx("cursor-pointer", props.className)}
|
||||
className={clsx("cursor-pointer object-contain", props.className)}
|
||||
/>
|
||||
{modalOpen && (
|
||||
<div
|
||||
|
|
|
|||
37
skyvern-frontend/src/routes/tasks/detail/ActionCard.tsx
Normal file
37
skyvern-frontend/src/routes/tasks/detail/ActionCard.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { cn } from "@/util/utils";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
description: string;
|
||||
onClick: React.DOMAttributes<HTMLDivElement>["onClick"];
|
||||
selected: boolean;
|
||||
onMouseEnter: React.DOMAttributes<HTMLDivElement>["onMouseEnter"];
|
||||
};
|
||||
|
||||
function ActionCard({
|
||||
title,
|
||||
description,
|
||||
selected,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
}: Props) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
|
||||
{
|
||||
"bg-muted": selected,
|
||||
},
|
||||
)}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm">{title}</div>
|
||||
<div className="text-sm">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { ActionCard };
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { getClient } from "@/api/AxiosClient";
|
||||
import { ArtifactApiResponse, ArtifactType } from "@/api/types";
|
||||
import { ZoomableImage } from "@/components/ZoomableImage";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { getImageURL } from "./artifactUtils";
|
||||
import { ReloadIcon } from "@radix-ui/react-icons";
|
||||
|
||||
type Props = {
|
||||
stepId: string;
|
||||
index: number;
|
||||
};
|
||||
|
||||
function ActionScreenshot({ stepId, index }: Props) {
|
||||
const { taskId } = useParams();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
|
||||
const { data: artifacts, isFetching } = useQuery<Array<ArtifactApiResponse>>({
|
||||
queryKey: ["task", taskId, "steps", stepId, "artifacts"],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.get(`/tasks/${taskId}/steps/${stepId}/artifacts`)
|
||||
.then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
const actionScreenshots = artifacts?.filter(
|
||||
(artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
|
||||
);
|
||||
|
||||
const screenshot = actionScreenshots?.[index];
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<div className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
|
||||
<ReloadIcon className="animate-spin h-6 w-6" />
|
||||
<div>Loading screenshot...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return screenshot ? (
|
||||
<figure className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
|
||||
<ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
|
||||
</figure>
|
||||
) : (
|
||||
<div>Screenshot not found</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { ActionScreenshot };
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
type Props = {
|
||||
input: string;
|
||||
reasoning: string;
|
||||
confidence: number;
|
||||
};
|
||||
|
||||
function InputReasoningCard({ input, reasoning, confidence }: Props) {
|
||||
return (
|
||||
<div className="flex p-4 gap-2 rounded-md shadow-md border items-start">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm">
|
||||
<span className="font-bold">Agent Input:</span> {input}
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<span className="font-bold">Agent Reasoning:</span> {reasoning}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center border p-2 rounded-lg bg-muted">
|
||||
<span>Confidence: {confidence}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { InputReasoningCard };
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { Action } from "@/api/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { getClient } from "@/api/AxiosClient";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { cn } from "@/util/utils";
|
||||
|
||||
type Props = {
|
||||
data: Array<Action | null>;
|
||||
onNext: () => void;
|
||||
onPrevious: () => void;
|
||||
onActiveIndexChange: (index: number) => void;
|
||||
activeIndex: number;
|
||||
};
|
||||
|
||||
function ScrollableActionList({
|
||||
data,
|
||||
onNext,
|
||||
onPrevious,
|
||||
activeIndex,
|
||||
onActiveIndexChange,
|
||||
}: Props) {
|
||||
const { taskId } = useParams();
|
||||
const queryClient = useQueryClient();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const refs = useRef<Array<HTMLDivElement | null>>(
|
||||
Array.from({ length: data.length }),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (refs.current[activeIndex]) {
|
||||
refs.current[activeIndex]?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
}, [activeIndex]);
|
||||
|
||||
return (
|
||||
<div className="w-1/4 flex flex-col items-center border rounded h-[40rem]">
|
||||
<div className="flex items-center text-sm p-2 gap-2">
|
||||
<Button
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
onPrevious();
|
||||
}}
|
||||
>
|
||||
<ArrowLeftIcon />
|
||||
</Button>
|
||||
{activeIndex + 1} of {data.length} total actions
|
||||
<Button size="icon" onClick={() => onNext()}>
|
||||
<ArrowRightIcon />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="overflow-y-scroll w-full p-4 space-y-4">
|
||||
{data.map((action, index) => {
|
||||
if (!action) {
|
||||
return null;
|
||||
}
|
||||
const selected = activeIndex === index;
|
||||
return (
|
||||
<div
|
||||
ref={(element) => {
|
||||
refs.current[index] = element;
|
||||
}}
|
||||
className={cn(
|
||||
"flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
|
||||
{
|
||||
"bg-muted": selected,
|
||||
},
|
||||
)}
|
||||
onClick={() => onActiveIndexChange(index)}
|
||||
onMouseEnter={() => {
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: [
|
||||
"task",
|
||||
taskId,
|
||||
"steps",
|
||||
action.stepId,
|
||||
"artifacts",
|
||||
],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client
|
||||
.get(`/tasks/${taskId}/steps/${action.stepId}/artifacts`)
|
||||
.then((response) => response.data);
|
||||
},
|
||||
staleTime: Infinity,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm">{`Action ${index + 1}`}</div>
|
||||
<div className="text-sm">{action.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { ScrollableActionList };
|
||||
60
skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
Normal file
60
skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { ActionScreenshot } from "./ActionScreenshot";
|
||||
import { InputReasoningCard } from "./InputReasoningCard";
|
||||
import { ScrollableActionList } from "./ScrollableActionList";
|
||||
import { useActions } from "./useActions";
|
||||
|
||||
function TaskActions() {
|
||||
const { taskId } = useParams();
|
||||
|
||||
const { data, isFetching } = useActions(taskId!);
|
||||
const [selectedActionIndex, setSelectedAction] = useState(0);
|
||||
|
||||
const activeAction = data?.[selectedActionIndex];
|
||||
|
||||
if (isFetching || !data) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (!activeAction) {
|
||||
return <div>No action</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3/4 h-[40rem] border rounded">
|
||||
<div className="p-4">
|
||||
<InputReasoningCard
|
||||
input={activeAction.input}
|
||||
reasoning={activeAction.reasoning}
|
||||
confidence={activeAction.confidence}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="p-4">
|
||||
<ActionScreenshot
|
||||
stepId={activeAction.stepId}
|
||||
index={activeAction.index}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollableActionList
|
||||
activeIndex={selectedActionIndex}
|
||||
data={data}
|
||||
onActiveIndexChange={setSelectedAction}
|
||||
onNext={() =>
|
||||
setSelectedAction((prev) =>
|
||||
prev === data.length - 1 ? prev : prev + 1,
|
||||
)
|
||||
}
|
||||
onPrevious={() =>
|
||||
setSelectedAction((prev) => (prev === 0 ? prev : prev - 1))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { TaskActions };
|
||||
|
|
@ -1,26 +1,14 @@
|
|||
import { getClient } from "@/api/AxiosClient";
|
||||
import { Status, TaskApiResponse } from "@/api/types";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { StatusBadge } from "@/components/StatusBadge";
|
||||
import { basicTimeFormat } from "@/util/timeFormat";
|
||||
import { StepArtifactsLayout } from "./StepArtifactsLayout";
|
||||
import { getRecordingURL, getScreenshotURL } from "./artifactUtils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ZoomableImage } from "@/components/ZoomableImage";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { cn } from "@/util/utils";
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import { NavLink, Outlet, useParams } from "react-router-dom";
|
||||
|
||||
function TaskDetails() {
|
||||
const { taskId } = useParams();
|
||||
|
|
@ -28,8 +16,8 @@ function TaskDetails() {
|
|||
|
||||
const {
|
||||
data: task,
|
||||
isFetching: isTaskFetching,
|
||||
isError: isTaskError,
|
||||
isFetching: taskIsFetching,
|
||||
isError: taskIsError,
|
||||
error: taskError,
|
||||
} = useQuery<TaskApiResponse>({
|
||||
queryKey: ["task", taskId, "details"],
|
||||
|
|
@ -49,27 +37,26 @@ function TaskDetails() {
|
|||
placeholderData: keepPreviousData,
|
||||
});
|
||||
|
||||
if (isTaskError) {
|
||||
if (taskIsError) {
|
||||
return <div>Error: {taskError?.message}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex items-center">
|
||||
<Label className="w-32 shrink-0 text-lg">Task ID</Label>
|
||||
<Input value={taskId} readOnly />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Label className="w-32 text-lg">Status</Label>
|
||||
{isTaskFetching ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<Input value={taskId} className="w-52" readOnly />
|
||||
{taskIsFetching ? (
|
||||
<Skeleton className="w-32 h-8" />
|
||||
) : task ? (
|
||||
<StatusBadge status={task?.status} />
|
||||
) : null}
|
||||
</div>
|
||||
<div>
|
||||
{task?.status === Status.Completed ? (
|
||||
<div className="flex items-center">
|
||||
<Label className="w-32 shrink-0 text-lg">Extracted Information</Label>
|
||||
<Label className="w-32 shrink-0 text-lg">
|
||||
Extracted Information
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={JSON.stringify(task.extracted_information, null, 2)}
|
||||
|
|
@ -77,9 +64,10 @@ function TaskDetails() {
|
|||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{task?.status === Status.Failed || task?.status === Status.Terminated ? (
|
||||
{task?.status === Status.Failed ||
|
||||
task?.status === Status.Terminated ? (
|
||||
<div className="flex items-center">
|
||||
<Label className="w-32 shrink-0 text-lg">Failure Reason</Label>
|
||||
<Label>Failure Reason</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={JSON.stringify(task.failure_reason)}
|
||||
|
|
@ -87,133 +75,51 @@ function TaskDetails() {
|
|||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{task ? (
|
||||
<Card>
|
||||
<CardHeader className="border-b-2">
|
||||
<CardTitle className="text-xl">Task Artifacts</CardTitle>
|
||||
<CardDescription>
|
||||
Recording and final screenshot of the task
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="recording">
|
||||
<TabsList>
|
||||
<TabsTrigger value="recording">Recording</TabsTrigger>
|
||||
<TabsTrigger value="final-screenshot">
|
||||
Final Screenshot
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="recording">
|
||||
{task.recording_url ? (
|
||||
<video
|
||||
width={800}
|
||||
height={450}
|
||||
src={getRecordingURL(task)}
|
||||
controls
|
||||
/>
|
||||
) : (
|
||||
<div>No recording available</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="final-screenshot">
|
||||
{task ? (
|
||||
<div className="h-[450px] w-[800px] overflow-hidden">
|
||||
{task.screenshot_url ? (
|
||||
<ZoomableImage
|
||||
src={getScreenshotURL(task)}
|
||||
alt="screenshot"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
) : (
|
||||
<p>No screenshot available</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
<Card>
|
||||
<CardHeader className="border-b-2">
|
||||
<CardTitle className="text-lg">Steps</CardTitle>
|
||||
<CardDescription>Task Steps and Step Artifacts</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="min-h-96">
|
||||
<StepArtifactsLayout />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="border-b-2">
|
||||
<CardTitle className="text-xl">Parameters</CardTitle>
|
||||
<CardDescription>Task URL and Input Parameters</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="py-8">
|
||||
{task ? (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">URL</Label>
|
||||
<Input value={task.request.url} readOnly />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Created at</Label>
|
||||
<Input value={basicTimeFormat(task.created_at)} readOnly />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Navigation Goal</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={task.request.navigation_goal ?? ""}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Navigation Payload</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={
|
||||
typeof task.request.navigation_payload === "object"
|
||||
? JSON.stringify(task.request.navigation_payload, null, 2)
|
||||
: task.request.navigation_payload
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Data Extraction Goal</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={task.request.data_extraction_goal ?? ""}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">
|
||||
Extracted Information Schema
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={
|
||||
typeof task.request.extracted_information_schema ===
|
||||
"object"
|
||||
? JSON.stringify(
|
||||
task.request.extracted_information_schema,
|
||||
null,
|
||||
2,
|
||||
)
|
||||
: task.request.extracted_information_schema
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="inline-flex border rounded bg-muted p-1">
|
||||
<NavLink
|
||||
to="actions"
|
||||
className={({ isActive }) => {
|
||||
return cn(
|
||||
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
|
||||
{
|
||||
"bg-primary-foreground text-foreground": isActive,
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
Actions
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="recording"
|
||||
className={({ isActive }) => {
|
||||
return cn(
|
||||
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
|
||||
{
|
||||
"bg-primary-foreground text-foreground": isActive,
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
Recording
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="parameters"
|
||||
className={({ isActive }) => {
|
||||
return cn(
|
||||
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
|
||||
{
|
||||
"bg-primary-foreground text-foreground": isActive,
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
Parameters
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
113
skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx
Normal file
113
skyvern-frontend/src/routes/tasks/detail/TaskParameters.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { getClient } from "@/api/AxiosClient";
|
||||
import { TaskApiResponse } from "@/api/types";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { basicTimeFormat } from "@/util/timeFormat";
|
||||
import { Label, Separator } from "@radix-ui/react-dropdown-menu";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
function TaskParameters() {
|
||||
const { taskId } = useParams();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const {
|
||||
data: task,
|
||||
isFetching: taskIsFetching,
|
||||
isError: taskIsError,
|
||||
} = useQuery<TaskApiResponse>({
|
||||
queryKey: ["task", taskId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client.get(`/tasks/${taskId}`).then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
if (taskIsFetching) {
|
||||
return <div>Loading parameters...</div>;
|
||||
}
|
||||
|
||||
if (taskIsError || !task) {
|
||||
return <div>Error loading parameters</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="border-b-2">
|
||||
<CardTitle className="text-xl">Parameters</CardTitle>
|
||||
<CardDescription>Task URL and Input Parameters</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="py-8">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">URL</Label>
|
||||
<Input value={task.request.url} readOnly />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Created at</Label>
|
||||
<Input value={basicTimeFormat(task.created_at)} readOnly />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Navigation Goal</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={task.request.navigation_goal ?? ""}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Navigation Payload</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={
|
||||
typeof task.request.navigation_payload === "object"
|
||||
? JSON.stringify(task.request.navigation_payload, null, 2)
|
||||
: task.request.navigation_payload
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">Data Extraction Goal</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={task.request.data_extraction_goal ?? ""}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Label className="w-40 shrink-0">
|
||||
Extracted Information Schema
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={
|
||||
typeof task.request.extracted_information_schema === "object"
|
||||
? JSON.stringify(
|
||||
task.request.extracted_information_schema,
|
||||
null,
|
||||
2,
|
||||
)
|
||||
: task.request.extracted_information_schema
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export { TaskParameters };
|
||||
45
skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
Normal file
45
skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { getClient } from "@/api/AxiosClient";
|
||||
import { TaskApiResponse } from "@/api/types";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getRecordingURL } from "./artifactUtils";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
function TaskRecording() {
|
||||
const { taskId } = useParams();
|
||||
const credentialGetter = useCredentialGetter();
|
||||
|
||||
const {
|
||||
data: task,
|
||||
isFetching: taskIsFetching,
|
||||
isError: taskIsError,
|
||||
} = useQuery<TaskApiResponse>({
|
||||
queryKey: ["task", taskId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client.get(`/tasks/${taskId}`).then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
if (taskIsFetching) {
|
||||
return <div>Loading recording...</div>;
|
||||
}
|
||||
|
||||
if (taskIsError || !task) {
|
||||
return <div>Error loading recording</div>;
|
||||
}
|
||||
|
||||
console.log(task);
|
||||
|
||||
return (
|
||||
<div className="flex mx-auto">
|
||||
{task.recording_url ? (
|
||||
<video width={800} height={450} src={getRecordingURL(task)} controls />
|
||||
) : (
|
||||
<div>No recording available</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { TaskRecording };
|
||||
76
skyvern-frontend/src/routes/tasks/detail/useActions.tsx
Normal file
76
skyvern-frontend/src/routes/tasks/detail/useActions.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { getClient } from "@/api/AxiosClient";
|
||||
import {
|
||||
Action,
|
||||
ActionApiResponse,
|
||||
ActionTypes,
|
||||
Status,
|
||||
StepApiResponse,
|
||||
TaskApiResponse,
|
||||
} from "@/api/types";
|
||||
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
function getActionInput(action: ActionApiResponse) {
|
||||
let input = "";
|
||||
if (action.action_type === ActionTypes.InputText && action.text) {
|
||||
input = action.text;
|
||||
} else if (action.action_type === ActionTypes.Click) {
|
||||
input = "Click";
|
||||
} else if (action.action_type === ActionTypes.SelectOption && action.option) {
|
||||
input = action.option.label;
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
function useActions(
|
||||
taskId: string,
|
||||
): ReturnType<typeof useQuery<Array<Action | null>>> {
|
||||
const credentialGetter = useCredentialGetter();
|
||||
const { data: task } = useQuery<TaskApiResponse>({
|
||||
queryKey: ["task", taskId],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
return client.get(`/tasks/${taskId}`).then((response) => response.data);
|
||||
},
|
||||
});
|
||||
|
||||
const taskIsRunningOrQueued =
|
||||
task?.status === Status.Running || task?.status === Status.Queued;
|
||||
|
||||
const useQueryReturn = useQuery<Array<Action | null>>({
|
||||
queryKey: ["task", taskId, "actions"],
|
||||
queryFn: async () => {
|
||||
const client = await getClient(credentialGetter);
|
||||
const steps = (await client
|
||||
.get(`/tasks/${taskId}/steps`)
|
||||
.then((response) => response.data)) as Array<StepApiResponse>;
|
||||
|
||||
const actions = steps.map((step) => {
|
||||
const actionsAndResults = step.output.actions_and_results;
|
||||
|
||||
const actions = actionsAndResults.map((actionAndResult, index) => {
|
||||
const action: Action = {
|
||||
reasoning: actionAndResult[0].reasoning,
|
||||
confidence: actionAndResult[0].confidence_float,
|
||||
input: getActionInput(actionAndResult[0]),
|
||||
type: actionAndResult[0].action_type,
|
||||
success: actionAndResult[1].success,
|
||||
stepId: step.step_id,
|
||||
index,
|
||||
};
|
||||
return action;
|
||||
});
|
||||
return actions;
|
||||
});
|
||||
|
||||
return actions.flat();
|
||||
},
|
||||
enabled: !!task,
|
||||
staleTime: taskIsRunningOrQueued ? 30 : Infinity,
|
||||
refetchOnWindowFocus: taskIsRunningOrQueued,
|
||||
});
|
||||
|
||||
return useQueryReturn;
|
||||
}
|
||||
|
||||
export { useActions };
|
||||
|
|
@ -970,7 +970,6 @@ class WorkflowService:
|
|||
max_steps_per_run=block_yaml.max_steps_per_run,
|
||||
max_retries=block_yaml.max_retries,
|
||||
complete_on_download=block_yaml.complete_on_download,
|
||||
continue_on_failure=block_yaml.continue_on_failure,
|
||||
)
|
||||
elif block_yaml.block_type == BlockType.FOR_LOOP:
|
||||
loop_blocks = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue