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

Debugger: improve timeline UX while waiting for first item, and while waiting for current item (#3668)

Browse Source
This commit is contained in:
Jonathan Dobson
2025-10-09 13:53:46 -04:00
committed by GitHub
parent 1421bc10c6
commit adc8634ae1
6 changed files with 100 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,7 @@ import {
WorkflowRunOverviewActiveElement,
} from "@/routes/workflows/workflowRun/WorkflowRunOverview";
import { WorkflowRunTimelineBlockItem } from "@/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem";
import { cn } from "@/util/utils";
type Props = {
activeItem: WorkflowRunOverviewActiveElement;
@@ -54,8 +55,15 @@ function DebuggerRunTimeline({
return total + 0;
}, 0);
const firstActionOrThoughtIsPending =
!workflowRunIsFinalized && workflowRunTimeline.length === 0;
return (
<div className="w-full min-w-0 space-y-4 rounded p-4">
<div
className={cn("w-full min-w-0 space-y-4 rounded p-4", {
"animate-pulse": firstActionOrThoughtIsPending,
})}
>
<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,40 +72,55 @@ function DebuggerRunTimeline({
Steps: {workflowRun.total_steps ?? 0}
</div>
</div>
{!workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<Skeleton className="h-full w-full" />
)}
<ScrollArea>
<ScrollAreaViewport className="h-full w-full">
<div className="w-full space-y-4">
{workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<div>Workflow timeline is empty</div>
)}
{workflowRunTimeline?.map((timelineItem) => {
{!workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<div className="flex h-full w-full items-center justify-center">
Formulating actions...
</div>
)}
{workflowRunTimeline?.map((timelineItem, i) => {
if (isBlockItem(timelineItem)) {
return (
<WorkflowRunTimelineBlockItem
<div
className={cn({
"animate-pulse": !workflowRunIsFinalized && i === 0,
})}
key={timelineItem.block.workflow_run_block_id}
subItems={timelineItem.children}
activeItem={activeItem}
block={timelineItem.block}
onActionClick={onActionItemSelected}
onBlockItemClick={onBlockItemSelected}
onThoughtCardClick={onObserverThoughtCardSelected}
/>
>
<WorkflowRunTimelineBlockItem
subItems={timelineItem.children}
activeItem={activeItem}
block={timelineItem.block}
onActionClick={onActionItemSelected}
onBlockItemClick={onBlockItemSelected}
onThoughtCardClick={onObserverThoughtCardSelected}
/>
</div>
);
}
if (isThoughtItem(timelineItem)) {
return (
<ThoughtCard
<div
className={cn({
"animate-pulse": !workflowRunIsFinalized && i === 0,
})}
key={timelineItem.thought.thought_id}
active={
isObserverThought(activeItem) &&
activeItem.thought_id === timelineItem.thought.thought_id
}
onClick={onObserverThoughtCardSelected}
thought={timelineItem.thought}
/>
>
<ThoughtCard
active={
isObserverThought(activeItem) &&
activeItem.thought_id ===
timelineItem.thought.thought_id
}
onClick={onObserverThoughtCardSelected}
thought={timelineItem.thought}
/>
</div>
);
}
})}

40
skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimelineMinimal.tsx
View File

@@ -6,6 +6,7 @@ import { useWorkflowRunTimelineQuery } from "../hooks/useWorkflowRunTimelineQuer
import { isBlockItem, isThoughtItem } from "../types/workflowRunTypes";
import { ThoughtCardMinimal } from "@/routes/workflows/workflowRun/ThoughtCardMinimal";
import { WorkflowRunTimelineBlockItemMinimal } from "@/routes/workflows/workflowRun/WorkflowRunTimelineBlockItemMinimal";
import { cn } from "@/util/utils";
function DebuggerRunTimelineMinimal() {
const { data: workflowRun, isLoading: workflowRunIsLoading } =
@@ -27,7 +28,15 @@ function DebuggerRunTimelineMinimal() {
return (
<div className="h-full w-full">
{!workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<Skeleton className="h-full w-full" />
<Skeleton className="vertical-line-gradient-soft flex h-full min-h-[30rem] w-full items-center justify-center overflow-visible">
{/* rotate this by 90 degrees */}
<div
className="flex h-full w-full items-center justify-center overflow-visible opacity-50"
style={{ writingMode: "vertical-rl" }}
>
formulating actions...
</div>
</Skeleton>
)}
<ScrollArea className="h-full w-full">
<ScrollAreaViewport className="h-full w-full">
@@ -35,22 +44,35 @@ function DebuggerRunTimelineMinimal() {
{workflowRunIsFinalized && workflowRunTimeline.length === 0 && (
<div>-</div>
)}
{workflowRunTimeline?.map((timelineItem) => {
{workflowRunTimeline?.map((timelineItem, i) => {
if (isBlockItem(timelineItem)) {
return (
<WorkflowRunTimelineBlockItemMinimal
<div
key={timelineItem.block.workflow_run_block_id}
subItems={timelineItem.children}
block={timelineItem.block}
/>
className={cn({
"animate-pulse": !workflowRunIsFinalized && i === 0,
})}
>
<WorkflowRunTimelineBlockItemMinimal
subItems={timelineItem.children}
block={timelineItem.block}
/>
</div>
);
}
if (isThoughtItem(timelineItem)) {
return (
<ThoughtCardMinimal
<div
key={timelineItem.thought.thought_id}
thought={timelineItem.thought}
/>
className={cn({
"animate-pulse": !workflowRunIsFinalized && i === 0,
})}
>
<ThoughtCardMinimal
key={timelineItem.thought.thought_id}
thought={timelineItem.thought}
/>
</div>
);
}
})}