Pre-convo UI (#3376)

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -98,7 +98,7 @@ function Workspace({
   const { blockLabel, workflowPermanentId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const cacheKeyValueParam = searchParams.get("cache-key-value");
-  const [timelineMode, setTimelineMode] = useState("narrow");
+  const [timelineMode, setTimelineMode] = useState("wide");
   const [cacheKeyValueFilter, setCacheKeyValueFilter] = useState<string | null>(
     null,
   );

skyvern-frontend/src/routes/workflows/editor/nodes/Taskv2Node/Taskv2Node.tsx

@@ -17,6 +17,7 @@ import { MAX_STEPS_DEFAULT, type Taskv2Node } from "./types";
 import { ModelSelector } from "@/components/ModelSelector";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
+import { NodeFooter } from "../components/NodeFooter";
 import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
@@ -195,6 +196,7 @@ function Taskv2Node({ id, data, type }: NodeProps<Taskv2Node>) {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
+        <NodeFooter blockLabel={label} />
       </div>
     </div>
   );

skyvern-frontend/src/routes/workflows/editor/nodes/components/NodeHeader.tsx

@@ -11,6 +11,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useLogging } from "@/hooks/useLogging";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useOnChange } from "@/hooks/useOnChange";
+import { useAutoplayStore } from "@/store/useAutoplayStore";
 
 import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
@@ -186,6 +187,28 @@ function NodeHeader({
   const [workflowRunStatus, setWorkflowRunStatus] = useState(
     workflowRun?.status,
   );
+  const { getAutoplay, setAutoplay } = useAutoplayStore();
+
+  useEffect(() => {
+    if (!debugSession) {
+      return;
+    }
+
+    const details = getAutoplay();
+
+    if (
+      workflowPermanentId === details.wpid &&
+      blockLabel === details.blockLabel
+    ) {
+      setAutoplay(null, null);
+      setTimeout(() => {
+        runBlock.mutateAsync();
+      }, 100);
+    }
+
+    // on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debugSession]);
 
   useEffect(() => {
     setWorkflowRunStatus(workflowRun?.status);
@@ -496,8 +519,10 @@ function NodeHeader({
               ) : (
                 <PlayIcon
                   className={cn("size-6", {
-                    "fill-gray-500 text-gray-500":
-                      workflowRunIsRunningOrQueued || !workflowPermanentId,
+                    "pointer-events-none fill-gray-500 text-gray-500":
+                      workflowRunIsRunningOrQueued ||
+                      !workflowPermanentId ||
+                      debugSession === undefined,
                   })}
                   onClick={() => {
                     handleOnPlay();

skyvern-frontend/src/routes/workflows/hooks/useCacheKeyValuesQuery.ts

@@ -56,7 +56,7 @@ function useCacheKeyValuesQuery({
 
       return result;
     },
-    enabled: !!workflowPermanentId,
+    enabled: !!workflowPermanentId && !!cacheKey && cacheKey.length > 0,
     placeholderData: keepPreviousData,
     staleTime: 5 * 60 * 1000,
   });