vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Jon/debugger layout (#3340)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-09-02 10:07:08 -04:00
committed by GitHub
parent aee181c307
commit 41b341f3d8
16 changed files with 604 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
skyvern-frontend/src/routes/workflows/debugger/DebuggerRun.tsx
View File

@@ -6,7 +6,7 @@ function DebuggerRun() {
const workflowFailureReason = workflowRun?.failure_reason ? (
<div
className="align-self-start h-[8rem] w-full overflow-y-auto rounded-md border border-red-600 p-4"
className="align-self-start h-[8rem] min-h-[8rem] w-full overflow-y-auto rounded-md border border-red-600 p-4"
style={{
backgroundColor: "rgba(220, 38, 38, 0.10)",
width: "calc(100% - 2rem)",

27
skyvern-frontend/src/routes/workflows/debugger/DebuggerRunMinimal.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { CrossCircledIcon } from "@radix-ui/react-icons";
import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
import { DebuggerRunTimelineMinimal } from "./DebuggerRunTimelineMinimal";
import { Tip } from "@/components/Tip";
function DebuggerRunMinimal() {
const { data: workflowRun } = useWorkflowRunQuery();
const workflowFailureReason = workflowRun?.failure_reason ? (
<Tip content={workflowRun.failure_reason}>
<div className="items-center-justify-center flex text-destructive">
<CrossCircledIcon />
</div>
</Tip>
) : null;
return (
<div className="relative flex h-full w-full flex-col items-center justify-start gap-4 overflow-hidden overflow-y-auto pb-12 pt-4">
{workflowFailureReason}
<div className="flex h-full w-full items-start justify-center">
<DebuggerRunTimelineMinimal />
</div>
</div>
);
}
export { DebuggerRunMinimal };

81
skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimeline.tsx
View File

@@ -1,4 +1,3 @@
import { useParams } from "react-router-dom";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import { statusIsFinalized } from "@/routes/tasks/types";
@@ -18,7 +17,6 @@ import {
WorkflowRunOverviewActiveElement,
} from "@/routes/workflows/workflowRun/WorkflowRunOverview";
import { WorkflowRunTimelineBlockItem } from "@/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem";
import { useWorkflowQuery } from "../hooks/useWorkflowQuery";
type Props = {
activeItem: WorkflowRunOverviewActiveElement;
@@ -27,28 +25,12 @@ type Props = {
onBlockItemSelected: (item: WorkflowRunBlock) => void;
};
function Step({ n, children }: { n: number; children: React.ReactNode }) {
return (
<div className="relative flex items-center justify-center gap-2 rounded-lg border border-slate-600 p-4">
<div className="absolute right-[-1.22rem] top-[-1.22rem] flex h-[3rem] w-[3rem] items-center justify-center rounded-full border border-slate-600 bg-slate-elevation3 px-4 py-3 text-xl font-bold">
{n}
</div>
<div className="absolute right-[-1.25rem] top-[-1.25rem] flex h-[3rem] w-[3rem] items-center justify-center rounded-full bg-slate-elevation3 px-4 py-3 text-xl font-bold text-slate-100">
{n}
</div>
<div className="flex-1">{children}</div>
</div>
);
}
function DebuggerRunTimeline({
activeItem,
onObserverThoughtCardSelected,
onActionItemSelected,
onBlockItemSelected,
}: Props) {
const { workflowPermanentId } = useParams();
const { data: workflow } = useWorkflowQuery({ workflowPermanentId }!);
const { data: workflowRun, isLoading: workflowRunIsLoading } =
useWorkflowRunQuery();
@@ -59,67 +41,8 @@ function DebuggerRunTimeline({
return <Skeleton className="h-full w-full" />;
}
const blocks = workflow?.workflow_definition.blocks ?? [];
const getStarted =
blocks.length === 0 ? (
<div>
Hi! 👋 To get started, add a block to your workflow. You can do that by
clicking the round plus button beneath the Start block, on the left
</div>
) : null;
const runABlock = (
<div>
To run a single block, click the play button on that block. Skyvern will
run the block in the browser, live!
</div>
);
const adjustBrowser = (
<div>
Need to adjust the browser to test your block again? You can click around
in the browser to bring Skyvern to any page (manually!)
</div>
);
const parameters = (
<div>
Want Skyvern to do different things based on your inputs? Use Parameters
to specify them and reference them using <code>{"{{ }}"}</code> syntax!
</div>
);
const addBlocks = (
<div>
Not finished? Add a block to your workflow by clicking the round plus
button before or after any other block.
</div>
);
const steps = [
getStarted,
runABlock,
adjustBrowser,
getStarted === null ? parameters : null,
getStarted === null ? addBlocks : null,
].filter((step) => step);
if (!workflowRun || !workflowRunTimeline) {
return (
<div className="flex h-full w-full flex-col items-center justify-center overflow-y-auto rounded-xl bg-[#020817] p-8 text-slate-300">
<div className="flex h-full w-full flex-col items-center justify-around gap-4">
<div className="text-center text-xl">
Build & Debug Complex Browser Automations
</div>
{steps.map((step, index) => (
<Step key={index} n={index + 1}>
{step}
</Step>
))}
</div>
</div>
);
return null;
}
const workflowRunIsFinalized = statusIsFinalized(workflowRun);
@@ -132,7 +55,7 @@ function DebuggerRunTimeline({
}, 0);
return (
<div className="w-full min-w-0 space-y-4 rounded bg-slate-elevation1 p-4">
<div className="w-full min-w-0 space-y-4 rounded p-4">
<div className="grid w-full grid-cols-2 gap-2">
<div className="flex items-center justify-center rounded bg-slate-elevation3 px-4 py-3 text-xs">
Actions: {numberOfActions}

64
skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimelineMinimal.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import { statusIsFinalized } from "@/routes/tasks/types";
import { useWorkflowRunQuery } from "../hooks/useWorkflowRunQuery";
import { useWorkflowRunTimelineQuery } from "../hooks/useWorkflowRunTimelineQuery";
import { isBlockItem, isThoughtItem } from "../types/workflowRunTypes";
import { ThoughtCardMinimal } from "@/routes/workflows/workflowRun/ThoughtCardMinimal";
import { WorkflowRunTimelineBlockItemMinimal } from "@/routes/workflows/workflowRun/WorkflowRunTimelineBlockItemMinimal";
function DebuggerRunTimelineMinimal() {
const { data: workflowRun, isLoading: workflowRunIsLoading } =
useWorkflowRunQuery();
const { data: workflowRunTimeline, isLoading: workflowRunTimelineIsLoading } =
useWorkflowRunTimelineQuery();
if (workflowRunIsLoading || workflowRunTimelineIsLoading) {
return <Skeleton className="h-full w-full" />;
}
if (!workflowRun || !workflowRunTimeline) {
return null;
}
const workflowRunIsFinalized = statusIsFinalized(workflowRun);
return (
<div className="h-full w-full">
{!workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<Skeleton className="h-full w-full" />
)}
<ScrollArea className="h-full w-full">
<ScrollAreaViewport className="h-full w-full">
<div className="flex w-full flex-col items-center justify-center gap-4 pt-2">
{workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<div>-</div>
)}
{workflowRunTimeline?.map((timelineItem) => {
if (isBlockItem(timelineItem)) {
return (
<WorkflowRunTimelineBlockItemMinimal
key={timelineItem.block.workflow_run_block_id}
subItems={timelineItem.children}
block={timelineItem.block}
/>
);
}
if (isThoughtItem(timelineItem)) {
return (
<ThoughtCardMinimal
key={timelineItem.thought.thought_id}
thought={timelineItem.thought}
/>
);
}
})}
</div>
</ScrollAreaViewport>
</ScrollArea>
</div>
);
}
export { DebuggerRunTimelineMinimal };