From 18809c6f0a188b2f12bd91b3cdb748bed927eece Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Wed, 24 Sep 2025 15:28:04 -0400
Subject: [PATCH] make the example pills on discover page invoke a v2 task w
 debugger (#3519)

---
 .../routes/tasks/create/ExampleCasePill.tsx   | 72 ++-----------------
 .../src/routes/tasks/create/PromptBox.tsx     |  6 +-
 2 files changed, 7 insertions(+), 71 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/ExampleCasePill.tsx b/skyvern-frontend/src/routes/tasks/create/ExampleCasePill.tsx
index e6b4cdf4..eacad780 100644
--- a/skyvern-frontend/src/routes/tasks/create/ExampleCasePill.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/ExampleCasePill.tsx
@@ -1,80 +1,16 @@
-import { getClient } from "@/api/AxiosClient";
-import { TaskV2 } from "@/api/types";
-import { toast } from "@/components/ui/use-toast";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { ReloadIcon } from "@radix-ui/react-icons";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
-import { useNavigate } from "react-router-dom";
-
 type Props = {
-  exampleId: string;
-  version: "v1" | "v2";
   icon: React.ReactNode;
   label: string;
-  prompt: string;
+  onClick: () => void;
 };
 
-function ExampleCasePill({ exampleId, version, icon, label, prompt }: Props) {
-  const credentialGetter = useCredentialGetter();
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-
-  const startObserverCruiseMutation = useMutation({
-    mutationFn: async (prompt: string) => {
-      const client = await getClient(credentialGetter, "v2");
-      return client.post<{ user_prompt: string }, { data: TaskV2 }>("/tasks", {
-        user_prompt: prompt,
-      });
-    },
-    onSuccess: (response) => {
-      toast({
-        variant: "success",
-        title: "Workflow Run Created",
-        description: `Workflow run created successfully.`,
-      });
-
-      queryClient.invalidateQueries({
-        queryKey: ["workflowRuns"],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["workflows"],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["runs"],
-      });
-
-      navigate(
-        `/workflows/${response.data.workflow_permanent_id}/${response.data.workflow_run_id}`,
-      );
-    },
-    onError: (error: AxiosError) => {
-      toast({
-        variant: "destructive",
-        title: "Error creating workflow run from prompt",
-        description: error.message,
-      });
-    },
-  });
-
+function ExampleCasePill({ icon, label, onClick }: Props) {
   return (
     <div
       className="flex cursor-pointer gap-2 whitespace-normal rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5 lg:whitespace-nowrap"
-      onClick={() => {
-        if (version === "v2") {
-          startObserverCruiseMutation.mutate(prompt);
-        } else {
-          navigate(`/tasks/create/${exampleId}`);
-        }
-      }}
+      onClick={onClick}
     >
-      <div>
-        {startObserverCruiseMutation.isPending ? (
-          <ReloadIcon className="size-6 animate-spin" />
-        ) : (
-          icon
-        )}
-      </div>
+      <div>{icon}</div>
       <div>{label}</div>
     </div>
   );
diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
index 5b2aafba..5a284971 100644
--- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
@@ -472,11 +472,11 @@ function PromptBox() {
           return (
             <ExampleCasePill
               key={example.key}
-              exampleId={example.key}
               icon={example.icon}
               label={example.label}
-              prompt={example.prompt}
-              version={selectValue}
+              onClick={() => {
+                generateWorkflowMutation.mutate(example.prompt);
+              }}
             />
           );
         })}