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

skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimeline.tsx

@@ -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}
+                    <WorkflowRunTimelineBlockItem
-                    block={timelineItem.block}
+                      subItems={timelineItem.children}
-                    onActionClick={onActionItemSelected}
+                      activeItem={activeItem}
-                    onBlockItemClick={onBlockItemSelected}
+                      block={timelineItem.block}
-                    onThoughtCardClick={onObserverThoughtCardSelected}
+                      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) &&
+                    <ThoughtCard
-                      activeItem.thought_id === timelineItem.thought.thought_id
+                      active={
-                    }
+                        isObserverThought(activeItem) &&
-                    onClick={onObserverThoughtCardSelected}
+                        activeItem.thought_id ===
-                    thought={timelineItem.thought}
+                          timelineItem.thought.thought_id
-                  />
+                      }
+                      onClick={onObserverThoughtCardSelected}
+                      thought={timelineItem.thought}
+                    />
+                  </div>
                 );
               }
             })}

skyvern-frontend/src/routes/workflows/debugger/DebuggerRunTimelineMinimal.tsx

@@ -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}
+                    className={cn({
-                    block={timelineItem.block}
+                      "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>
                 );
               }
             })}

skyvern-frontend/src/routes/workflows/editor/workspace-styles.css

@@ -1,3 +1,14 @@
+.vertical-line-gradient-soft {
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(51, 65, 85, 0.1) 20%,
+    rgba(51, 65, 85, 0.5) 50%,
+    rgba(51, 65, 85, 0.1) 80%,
+    transparent 100%
+  );
+}
+
 .vertical-line-gradient {
   background: linear-gradient(
     to bottom,

skyvern-frontend/src/routes/workflows/workflowRun/ThoughtCard.tsx

@@ -38,16 +38,19 @@ function ThoughtCard({ thought, onClick, active }: Props) {
       <div className="flex justify-between">
         <div className="flex gap-3">
           <BrainIcon className="size-6" />
-          <span>Thought</span>
+          {(thought.answer || thought.thought) && <span>Thought</span>}
+          {!thought.answer && !thought.thought && <span>Thinking</span>}
         </div>
         <div className="flex items-center gap-1 rounded-sm bg-slate-elevation5 px-2 py-1">
           <QuestionMarkIcon className="size-4" />
           <span className="text-xs">Decision</span>
         </div>
       </div>
-      <div className="text-xs text-slate-400">
+      {(thought.answer || thought.thought) && (
-        {thought.answer || thought.thought}
+        <div className="text-xs text-slate-400">
-      </div>
+          {thought.answer || thought.thought}
+        </div>
+      )}
     </div>
   );
 }

skyvern-frontend/src/routes/workflows/workflowRun/ThoughtCardMinimal.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 function ThoughtCardMinimal({ thought }: Props) {
   return (
-    <Tip content={thought.answer || thought.thought || null}>
+    <Tip asChild={false} content={thought.answer || thought.thought || null}>
       <BrainIcon className="size-6" />
     </Tip>
   );

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItemMinimal.tsx

@@ -11,6 +11,7 @@ import { ActionCardMinimal } from "./ActionCardMinimal";
 import { Status } from "@/api/types";
 import { ThoughtCardMinimal } from "./ThoughtCardMinimal";
 import { ItemStatusIndicator } from "./ItemStatusIndicator";
+import { cn } from "@/util/utils";
 
 type Props = {
   block: WorkflowRunBlock;
@@ -30,7 +31,11 @@ function WorkflowRunTimelineBlockItemMinimal({ block, subItems }: Props) {
       block.status === Status.Canceled);
 
   return (
-    <div className="flex flex-col items-center justify-center gap-2">
+    <div
+      className={cn("flex flex-col items-center justify-center gap-2", {
+        "rounded-lg bg-slate-elevation4 pl-2 pr-3 pt-4": actions.length > 0,
+      })}
+    >
       <Tip
         content={workflowBlockTitle[block.block_type] ?? null}
         asChild={false}