UI for workflow templates (#1715)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/components/icons/CompassIcon.tsx

@@ -0,0 +1,33 @@
+type Props = {
+  className?: string;
+};
+
+function CompassIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.24 7.76L14.12 14.12L7.76 16.24L9.88 9.88L16.24 7.76Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CompassIcon };

skyvern-frontend/src/hooks/useRunsQuery.ts

@@ -0,0 +1,35 @@
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { Status, TaskApiResponse, WorkflowRunApiResponse } from "@/api/types";
+
+type QueryReturnType = Array<TaskApiResponse | WorkflowRunApiResponse>;
+type UseQueryOptions = Omit<
+  Parameters<typeof useQuery<QueryReturnType>>[0],
+  "queryKey" | "queryFn"
+>;
+
+type Props = {
+  page?: number;
+  statusFilters?: Array<Status>;
+} & UseQueryOptions;
+
+function useRunsQuery({ page = 1, statusFilters }: Props) {
+  const credentialGetter = useCredentialGetter();
+  return useQuery<Array<TaskApiResponse | WorkflowRunApiResponse>>({
+    queryKey: ["runs", { statusFilters }, page],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(page));
+      if (statusFilters) {
+        statusFilters.forEach((status) => {
+          params.append("status", status);
+        });
+      }
+      return client.get("/runs", { params }).then((res) => res.data);
+    },
+  });
+}
+
+export { useRunsQuery };

skyvern-frontend/src/router.tsx

@@ -21,6 +21,10 @@ import { WorkflowRunOutput } from "./routes/workflows/workflowRun/WorkflowRunOut
 import { WorkflowPostRunParameters } from "./routes/workflows/workflowRun/WorkflowPostRunParameters";
 import { WorkflowRunRecording } from "./routes/workflows/workflowRun/WorkflowRunRecording";
 import { WorkflowRunOverview } from "./routes/workflows/workflowRun/WorkflowRunOverview";
+import { DiscoverPageLayout } from "./routes/discover/DiscoverPageLayout";
+import { DiscoverPage } from "./routes/discover/DiscoverPage";
+import { HistoryPageLayout } from "./routes/history/HistoryPageLayout";
+import { HistoryPage } from "./routes/history/HistoryPage";
 
 const router = createBrowserRouter([
   {
@@ -29,7 +33,7 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <Navigate to="/tasks" />,
+        element: <Navigate to="/discover" />,
       },
       {
         path: "tasks",
@@ -144,6 +148,26 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "discover",
+        element: <DiscoverPageLayout />,
+        children: [
+          {
+            index: true,
+            element: <DiscoverPage />,
+          },
+        ],
+      },
+      {
+        path: "history",
+        element: <HistoryPageLayout />,
+        children: [
+          {
+            index: true,
+            element: <HistoryPage />,
+          },
+        ],
+      },
       {
         path: "settings",
         element: <SettingsPageLayout />,

skyvern-frontend/src/routes/discover/DiscoverPage.tsx

@@ -0,0 +1,13 @@
+import { PromptBox } from "../tasks/create/PromptBox";
+import { WorkflowTemplates } from "./WorkflowTemplates";
+
+function DiscoverPage() {
+  return (
+    <div className="space-y-10">
+      <PromptBox />
+      <WorkflowTemplates />
+    </div>
+  );
+}
+
+export { DiscoverPage };

skyvern-frontend/src/routes/discover/DiscoverPageLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+
+function DiscoverPageLayout() {
+  return (
+    <div className="container mx-auto">
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export { DiscoverPageLayout };

skyvern-frontend/src/routes/discover/TemporaryTemplateImages.ts

@@ -0,0 +1,6 @@
+import jobApplicationImage from "@/assets/job-application.png";
+
+export const TEMPORARY_TEMPLATE_IMAGES: Record<string, string> = {
+  wpid_353862309074493424: jobApplicationImage,
+  wpid_351487857063054716: jobApplicationImage,
+};

skyvern-frontend/src/routes/discover/WorkflowTemplateCard.tsx

@@ -0,0 +1,30 @@
+type Props = {
+  title: string;
+  image: string;
+  onClick: () => void;
+};
+
+function WorkflowTemplateCard({ title, image, onClick }: Props) {
+  return (
+    <div className="h-48 w-56 cursor-pointer rounded-xl" onClick={onClick}>
+      <div className="h-28 bg-slate-elevation1 px-6 pt-6">
+        <img
+          src={image}
+          alt={title}
+          className="h-full w-full rounded-t-xl object-cover"
+        />
+      </div>
+      <div className="h-20 space-y-1 rounded-b-xl bg-slate-elevation2 p-3">
+        <h1
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          title={title}
+        >
+          {title}
+        </h1>
+        <p className="text-sm text-slate-400">Template</p>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowTemplateCard };

skyvern-frontend/src/routes/discover/WorkflowTemplates.tsx

@@ -0,0 +1,50 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { useGlobalWorkflowsQuery } from "../workflows/hooks/useGlobalWorkflowsQuery";
+import { useNavigate } from "react-router-dom";
+import { WorkflowTemplateCard } from "./WorkflowTemplateCard";
+import testImg from "@/assets/promptBoxBg.png";
+import { TEMPORARY_TEMPLATE_IMAGES } from "./TemporaryTemplateImages";
+
+function WorkflowTemplates() {
+  const { data: workflowTemplates, isLoading } = useGlobalWorkflowsQuery();
+  const navigate = useNavigate();
+
+  if (isLoading) {
+    return (
+      <div className="flex gap-6">
+        <Skeleton className="h-48 w-56 rounded-xl" />
+        <Skeleton className="h-48 w-56 rounded-xl" />
+        <Skeleton className="h-48 w-56 rounded-xl" />
+      </div>
+    );
+  }
+
+  if (!workflowTemplates) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-5">
+      <h1 className="text-xl">Start Simple</h1>
+      <div className="flex gap-6">
+        {workflowTemplates.map((workflow) => {
+          return (
+            <WorkflowTemplateCard
+              key={workflow.workflow_permanent_id}
+              title={workflow.title}
+              image={
+                TEMPORARY_TEMPLATE_IMAGES[workflow.workflow_permanent_id] ??
+                testImg
+              }
+              onClick={() => {
+                navigate(`/workflows/${workflow.workflow_permanent_id}/edit`);
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowTemplates };

skyvern-frontend/src/routes/history/HistoryPage.tsx

@@ -0,0 +1,11 @@
+import { RunHistory } from "./RunHistory";
+
+function HistoryPage() {
+  return (
+    <div className="space-y-6">
+      <RunHistory />
+    </div>
+  );
+}
+
+export { HistoryPage };

skyvern-frontend/src/routes/history/HistoryPageLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+
+function HistoryPageLayout() {
+  return (
+    <div className="container mx-auto">
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export { HistoryPageLayout };

skyvern-frontend/src/routes/history/RunHistory.tsx

@@ -0,0 +1,170 @@
+import { Status, TaskApiResponse, WorkflowRunApiResponse } from "@/api/types";
+import { StatusBadge } from "@/components/StatusBadge";
+import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useRunsQuery } from "@/hooks/useRunsQuery";
+import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
+import { cn } from "@/util/utils";
+import { useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+
+function isTaskApiResponse(
+  run: TaskApiResponse | WorkflowRunApiResponse,
+): run is TaskApiResponse {
+  return "task_id" in run;
+}
+
+function RunHistory() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
+  const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
+  const { data: runs, isFetching } = useRunsQuery({ page, statusFilters });
+  const navigate = useNavigate();
+
+  function handleNavigate(event: React.MouseEvent, path: string) {
+    if (event.ctrlKey || event.metaKey) {
+      window.open(
+        window.location.origin + path,
+        "_blank",
+        "noopener,noreferrer",
+      );
+    } else {
+      navigate(path);
+    }
+  }
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between">
+        <h1 className="text-2xl">Run History</h1>
+        <StatusFilterDropdown
+          values={statusFilters}
+          onChange={setStatusFilters}
+        />
+      </div>
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader className="rounded-t-lg bg-slate-elevation2">
+            <TableRow>
+              <TableHead className="w-1/4 rounded-tl-lg text-slate-400">
+                Type
+              </TableHead>
+              <TableHead className="w-1/4 text-slate-400">Run ID</TableHead>
+              <TableHead className="w-1/4 text-slate-400">Status</TableHead>
+              <TableHead className="w-1/4 rounded-tr-lg text-slate-400">
+                Created At
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isFetching
+              ? Array.from({ length: 10 }).map((_, index) => (
+                  <TableRow key={index}>
+                    <TableCell colSpan={4}>
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              : null}
+            {!isFetching && runs?.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={4}>
+                  <div className="text-center">No runs found</div>
+                </TableCell>
+              </TableRow>
+            ) : null}
+            {runs?.map((run) => {
+              if (isTaskApiResponse(run)) {
+                return (
+                  <TableRow
+                    key={run.task_id}
+                    className="cursor-pointer"
+                    onClick={(event) => {
+                      handleNavigate(event, `/tasks/${run.task_id}/actions`);
+                    }}
+                  >
+                    <TableCell>Task</TableCell>
+                    <TableCell>{run.task_id}</TableCell>
+                    <TableCell>
+                      <StatusBadge status={run.status} />
+                    </TableCell>
+                    <TableCell title={basicTimeFormat(run.created_at)}>
+                      {basicLocalTimeFormat(run.created_at)}
+                    </TableCell>
+                  </TableRow>
+                );
+              }
+              return (
+                <TableRow
+                  key={run.workflow_run_id}
+                  className="cursor-pointer"
+                  onClick={(event) => {
+                    handleNavigate(
+                      event,
+                      `/workflows/${run.workflow_permanent_id}/${run.workflow_run_id}/overview`,
+                    );
+                  }}
+                >
+                  <TableCell>Workflow</TableCell>
+                  <TableCell>{run.workflow_run_id}</TableCell>
+                  <TableCell>
+                    <StatusBadge status={run.status} />
+                  </TableCell>
+                  <TableCell title={basicTimeFormat(run.created_at)}>
+                    {basicLocalTimeFormat(run.created_at)}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+        <Pagination className="pt-2">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                className={cn({ "cursor-not-allowed": page === 1 })}
+                onClick={() => {
+                  if (page === 1) {
+                    return;
+                  }
+                  const params = new URLSearchParams();
+                  params.set("page", String(Math.max(1, page - 1)));
+                  setSearchParams(params, { replace: true });
+                }}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink>{page}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                onClick={() => {
+                  const params = new URLSearchParams();
+                  params.set("page", String(page + 1));
+                  setSearchParams(params, { replace: true });
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </div>
+  );
+}
+
+export { RunHistory };

skyvern-frontend/src/routes/root/SideNav.tsx

@@ -1,8 +1,12 @@
-import { RobotIcon } from "@/components/icons/RobotIcon";
+import { CompassIcon } from "@/components/icons/CompassIcon";
 import { NavLinkGroup } from "@/components/NavLinkGroup";
 import { useSidebarStore } from "@/store/SidebarStore";
 import { cn } from "@/util/utils";
-import { GearIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import {
+  CounterClockwiseClockIcon,
+  GearIcon,
+  LightningBoltIcon,
+} from "@radix-ui/react-icons";
 
 function SideNav() {
   const { collapsed } = useSidebarStore();
@@ -14,18 +18,23 @@ function SideNav() {
       })}
     >
       <NavLinkGroup
-        title={"Build"}
+        title="Build"
         links={[
           {
-            label: "Tasks",
-            to: "/tasks",
-            icon: <RobotIcon className="size-6" />,
+            label: "Discover",
+            to: "/discover",
+            icon: <CompassIcon className="size-6" />,
           },
           {
             label: "Workflows",
             to: "/workflows",
             icon: <LightningBoltIcon className="size-6" />,
           },
+          {
+            label: "History",
+            to: "/history",
+            icon: <CounterClockwiseClockIcon className="size-6" />,
+          },
         ]}
       />
       <NavLinkGroup

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -30,7 +30,6 @@ import {
   GearIcon,
   PaperPlaneIcon,
   Pencil1Icon,
-  PlusIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -392,15 +391,6 @@ function PromptBox() {
         </div>
       </div>
       <div className="flex flex-wrap justify-center gap-4 rounded-sm bg-slate-elevation1 p-4">
-        <div
-          className="flex cursor-pointer gap-2 whitespace-normal rounded-sm border-2 border-dashed bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5 lg:whitespace-nowrap"
-          onClick={() => {
-            navigate("/tasks/create/blank");
-          }}
-        >
-          <PlusIcon className="size-6" />
-          Build Your Own
-        </div>
         {exampleCases.map((example) => {
           return (
             <ExampleCasePill

skyvern-frontend/src/routes/workflows/WorkflowActions.tsx

@@ -31,11 +31,10 @@ import {
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
-import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
 import { convert } from "./editor/workflowEditorUtils";
+import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
 import { WorkflowApiResponse } from "./types/workflowTypes";
-import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
 
 type Props = {
   workflow: WorkflowApiResponse;
@@ -61,7 +60,6 @@ function downloadFile(fileName: string, contents: string) {
 function WorkflowActions({ workflow, onSuccessfullyDeleted }: Props) {
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
 
   function handleExport(type: "json" | "yaml") {
     if (!workflow) {
@@ -75,27 +73,7 @@ function WorkflowActions({ workflow, onSuccessfullyDeleted }: Props) {
     downloadFile(fileName, contents);
   }
 
-  const createWorkflowMutation = useMutation({
-    mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
-      const client = await getClient(credentialGetter);
-      const yaml = convertToYAML(workflow);
-      return client.post<string, { data: WorkflowApiResponse }>(
-        "/workflows",
-        yaml,
-        {
-          headers: {
-            "Content-Type": "text/plain",
-          },
-        },
-      );
-    },
-    onSuccess: (response) => {
-      queryClient.invalidateQueries({
-        queryKey: ["workflows"],
-      });
-      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
-    },
-  });
+  const createWorkflowMutation = useCreateWorkflowMutation();
 
   const deleteWorkflowMutation = useMutation({
     mutationFn: async (id: string) => {

skyvern-frontend/src/routes/workflows/Workflows.tsx

@@ -1,7 +1,6 @@
 import { getClient } from "@/api/AxiosClient";
-import { Status, WorkflowRunApiResponse } from "@/api/types";
-import { StatusBadge } from "@/components/StatusBadge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Pagination,
   PaginationContent,
@@ -25,46 +24,51 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { downloadBlob } from "@/util/downloadBlob";
 import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import {
-  DownloadIcon,
+  LightningBoltIcon,
   MagnifyingGlassIcon,
   Pencil2Icon,
   PlayIcon,
+  PlusIcon,
+  ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { WorkflowApiResponse } from "./types/workflowTypes";
-import { WorkflowActions } from "./WorkflowActions";
-import { WorkflowsPageBanner } from "./WorkflowsPageBanner";
-import { WorkflowTitle } from "./WorkflowTitle";
 import { useState } from "react";
-import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useDebounce } from "use-debounce";
-import { Input } from "@/components/ui/input";
+import { NarrativeCard } from "./components/header/NarrativeCard";
+import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
+import { ImportWorkflowButton } from "./ImportWorkflowButton";
+import { WorkflowApiResponse } from "./types/workflowTypes";
+import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
+import { WorkflowActions } from "./WorkflowActions";
+
+const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
+  title: "New Workflow",
+  description: "",
+  workflow_definition: {
+    blocks: [],
+    parameters: [],
+  },
+};
 
 function Workflows() {
   const credentialGetter = useCredentialGetter();
   const navigate = useNavigate();
+  const createWorkflowMutation = useCreateWorkflowMutation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebounce(search, 500);
-  const workflowsPage = searchParams.get("workflowsPage")
-    ? Number(searchParams.get("workflowsPage"))
-    : 1;
-  const workflowRunsPage = searchParams.get("workflowRunsPage")
-    ? Number(searchParams.get("workflowRunsPage"))
-    : 1;
+  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
 
   const { data: workflows, isLoading } = useQuery<Array<WorkflowApiResponse>>({
-    queryKey: ["workflows", debouncedSearch, workflowsPage],
+    queryKey: ["workflows", debouncedSearch, page],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       const params = new URLSearchParams();
-      params.append("page", String(workflowsPage));
+      params.append("page", String(page));
       params.append("only_workflows", "true");
       params.append("title", debouncedSearch);
       return client
@@ -75,52 +79,6 @@ function Workflows() {
     },
   });
 
-  const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
-    Array<WorkflowRunApiResponse>
-  >({
-    queryKey: ["workflowRuns", { statusFilters }, workflowRunsPage],
-    queryFn: async () => {
-      const client = await getClient(credentialGetter);
-      const params = new URLSearchParams();
-      params.append("page", String(workflowRunsPage));
-      statusFilters.forEach((status) => {
-        params.append("status", status);
-      });
-      return client
-        .get("/workflows/runs", {
-          params,
-        })
-        .then((response) => response.data);
-    },
-    refetchOnMount: "always",
-  });
-
-  function handleExport() {
-    if (!workflowRuns) {
-      return; // should never happen
-    }
-    const data = ["workflow_run_id,workflow_id,status,created,failure_reason"];
-    workflowRuns.forEach((workflowRun) => {
-      const row = [
-        workflowRun.workflow_run_id,
-        workflowRun.workflow_permanent_id,
-        workflowRun.status,
-        workflowRun.created_at,
-        workflowRun.failure_reason ?? "",
-      ];
-      data.push(
-        row
-          .map(String) // convert every value to String
-          .map((v) => v.replace(new RegExp('"', "g"), '""')) // escape double quotes
-          .map((v) => `"${v}"`) // quote it
-          .join(","), // comma-separated
-      );
-    });
-    const contents = data.join("\r\n");
-
-    downloadBlob(contents, "export.csv", "data:text/csv;charset=utf-8;");
-  }
-
   function handleRowClick(
     event: React.MouseEvent<HTMLTableCellElement>,
     workflowPermanentId: string,
@@ -152,11 +110,38 @@ function Workflows() {
   }
 
   return (
-    <div className="space-y-8">
-      <WorkflowsPageBanner />
+    <div className="space-y-10">
+      <div className="flex h-32 justify-between gap-6">
+        <div className="space-y-5">
+          <div className="flex items-center gap-2">
+            <LightningBoltIcon className="size-6" />
+            <h1 className="text-2xl">Workflows</h1>
+          </div>
+          <p className="text-slate-300">
+            Create your own complex workflows by connecting web agents together.
+            Define a series of actions, set it, and forget it.
+          </p>
+        </div>
+        <div className="flex gap-5">
+          <NarrativeCard
+            index={1}
+            description="Save browser sessions and reuse them in subsequent runs"
+          />
+          <NarrativeCard
+            index={2}
+            description="Connect multiple agents together to carry out complex objectives"
+          />
+          <NarrativeCard
+            index={3}
+            description="Execute non-browser tasks such as sending emails"
+          />
+        </div>
+      </div>
       <div className="space-y-4">
-        <header className="flex justify-between">
-          <h1 className="text-2xl font-semibold">Workflows</h1>
+        <header>
+          <h1 className="text-xl">My Flows</h1>
+        </header>
+        <div className="flex justify-between">
           <div className="relative">
             <div className="absolute left-0 top-0 flex size-9 items-center justify-center">
               <MagnifyingGlassIcon className="size-6" />
@@ -170,15 +155,35 @@ function Workflows() {
               className="w-48 pl-9 lg:w-72"
             />
           </div>
-        </header>
-        <div className="rounded-md border">
+          <div className="flex gap-4">
+            <ImportWorkflowButton />
+            <Button
+              disabled={createWorkflowMutation.isPending}
+              onClick={() => {
+                createWorkflowMutation.mutate(emptyWorkflowRequest);
+              }}
+            >
+              {createWorkflowMutation.isPending ? (
+                <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <PlusIcon className="mr-2 h-4 w-4" />
+              )}
+              Create
+            </Button>
+          </div>
+        </div>
+        <div className="rounded-lg border">
           <Table>
-            <TableHeader>
+            <TableHeader className="rounded-t-lg bg-slate-elevation2">
               <TableRow>
-                <TableHead className="w-1/3">ID</TableHead>
-                <TableHead className="w-1/3">Title</TableHead>
-                <TableHead className="w-1/3">Created At</TableHead>
-                <TableHead></TableHead>
+                <TableHead className="w-1/3 rounded-tl-lg text-slate-400">
+                  ID
+                </TableHead>
+                <TableHead className="w-1/3 text-slate-400">Title</TableHead>
+                <TableHead className="w-1/3 text-slate-400">
+                  Created At
+                </TableHead>
+                <TableHead className="rounded-tr-lg"></TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -272,152 +277,25 @@ function Workflows() {
             <PaginationContent>
               <PaginationItem>
                 <PaginationPrevious
-                  className={cn({ "cursor-not-allowed": workflowsPage === 1 })}
+                  className={cn({ "cursor-not-allowed": page === 1 })}
                   onClick={() => {
-                    if (workflowsPage === 1) {
+                    if (page === 1) {
                       return;
                     }
                     const params = new URLSearchParams();
-                    params.set(
-                      "workflowsPage",
-                      String(Math.max(1, workflowsPage - 1)),
-                    );
+                    params.set("page", String(Math.max(1, page - 1)));
                     setSearchParams(params, { replace: true });
                   }}
                 />
               </PaginationItem>
               <PaginationItem>
-                <PaginationLink>{workflowsPage}</PaginationLink>
+                <PaginationLink>{page}</PaginationLink>
               </PaginationItem>
               <PaginationItem>
                 <PaginationNext
                   onClick={() => {
                     const params = new URLSearchParams();
-                    params.set("workflowsPage", String(workflowsPage + 1));
-                    setSearchParams(params, { replace: true });
-                  }}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-      </div>
-      <div className="space-y-4">
-        <header>
-          <div className="flex justify-between">
-            <h1 className="text-2xl font-semibold">Workflow Runs</h1>
-            <div className="flex gap-2">
-              <StatusFilterDropdown
-                values={statusFilters}
-                onChange={setStatusFilters}
-              />
-              <Button variant="secondary" onClick={handleExport}>
-                <DownloadIcon className="mr-2" />
-                Export CSV
-              </Button>
-            </div>
-          </div>
-        </header>
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-1/5">Workflow Run ID</TableHead>
-                <TableHead className="w-1/5">Workflow ID</TableHead>
-                <TableHead className="w-1/5">Workflow Title</TableHead>
-                <TableHead className="w-1/5">Status</TableHead>
-                <TableHead className="w-1/5">Created At</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {workflowRunsIsLoading ? (
-                <TableRow>
-                  <TableCell colSpan={5}>Loading...</TableCell>
-                </TableRow>
-              ) : workflowRuns?.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={5}>No workflow runs found</TableCell>
-                </TableRow>
-              ) : (
-                workflowRuns?.map((workflowRun) => {
-                  return (
-                    <TableRow
-                      key={workflowRun.workflow_run_id}
-                      onClick={(event) => {
-                        if (event.ctrlKey || event.metaKey) {
-                          window.open(
-                            window.location.origin +
-                              `/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`,
-                            "_blank",
-                            "noopener,noreferrer",
-                          );
-                          return;
-                        }
-                        navigate(
-                          `/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`,
-                        );
-                      }}
-                      className="cursor-pointer"
-                    >
-                      <TableCell className="w-1/5">
-                        {workflowRun.workflow_run_id}
-                      </TableCell>
-                      <TableCell className="w-1/5">
-                        {workflowRun.workflow_permanent_id}
-                      </TableCell>
-                      <TableCell className="w-1/5">
-                        <WorkflowTitle
-                          workflowPermanentId={
-                            workflowRun.workflow_permanent_id
-                          }
-                        />
-                      </TableCell>
-                      <TableCell className="w-1/5">
-                        <StatusBadge status={workflowRun.status} />
-                      </TableCell>
-                      <TableCell
-                        className="w-1/5"
-                        title={basicTimeFormat(workflowRun.created_at)}
-                      >
-                        {basicLocalTimeFormat(workflowRun.created_at)}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              )}
-            </TableBody>
-          </Table>
-          <Pagination className="pt-2">
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  className={cn({
-                    "cursor-not-allowed": workflowRunsPage === 1,
-                  })}
-                  onClick={() => {
-                    if (workflowRunsPage === 1) {
-                      return;
-                    }
-                    const params = new URLSearchParams();
-                    params.set(
-                      "workflowRunsPage",
-                      String(Math.max(1, workflowRunsPage - 1)),
-                    );
-                    setSearchParams(params, { replace: true });
-                  }}
-                />
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationLink>{workflowRunsPage}</PaginationLink>
-              </PaginationItem>
-              <PaginationItem>
-                <PaginationNext
-                  onClick={() => {
-                    const params = new URLSearchParams();
-                    params.set(
-                      "workflowRunsPage",
-                      String(workflowRunsPage + 1),
-                    );
+                    params.set("page", String(page + 1));
                     setSearchParams(params, { replace: true });
                   }}
                 />

skyvern-frontend/src/routes/workflows/WorkflowsPageBanner.tsx

@@ -1,13 +1,8 @@
 import { Button } from "@/components/ui/button";
-import { ImportWorkflowButton } from "./ImportWorkflowButton";
-import { useNavigate } from "react-router-dom";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getClient } from "@/api/AxiosClient";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
-import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
-import { stringify as convertToYAML } from "yaml";
-import { WorkflowApiResponse } from "./types/workflowTypes";
 import { PlusIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
+import { ImportWorkflowButton } from "./ImportWorkflowButton";
+import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
 
 const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
   title: "New Workflow",
@@ -19,30 +14,7 @@ const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
 };
 
 function WorkflowsPageBanner() {
-  const navigate = useNavigate();
-  const credentialGetter = useCredentialGetter();
-  const queryClient = useQueryClient();
-
-  const createNewWorkflowMutation = useMutation({
-    mutationFn: async () => {
-      const client = await getClient(credentialGetter);
-      const yaml = convertToYAML(emptyWorkflowRequest);
-      return client.post<
-        typeof emptyWorkflowRequest,
-        { data: WorkflowApiResponse }
-      >("/workflows", yaml, {
-        headers: {
-          "Content-Type": "text/plain",
-        },
-      });
-    },
-    onSuccess: (response) => {
-      queryClient.invalidateQueries({
-        queryKey: ["workflows"],
-      });
-      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
-    },
-  });
+  const createNewWorkflowMutation = useCreateWorkflowMutation();
 
   return (
     <div className="space-y-8 bg-slate-elevation1 p-12">
@@ -54,7 +26,7 @@ function WorkflowsPageBanner() {
         <Button
           disabled={createNewWorkflowMutation.isPending}
           onClick={() => {
-            createNewWorkflowMutation.mutate();
+            createNewWorkflowMutation.mutate(emptyWorkflowRequest);
           }}
         >
           {createNewWorkflowMutation.isPending ? (

skyvern-frontend/src/routes/workflows/components/header/NarrativeCard.tsx

@@ -0,0 +1,17 @@
+type Props = {
+  index: number;
+  description: string;
+};
+
+function NarrativeCard({ index, description }: Props) {
+  return (
+    <div className="flex h-32 w-52 flex-col gap-3 rounded-xl bg-slate-elevation1 p-4">
+      <div className="flex size-6 items-center justify-center rounded-full bg-slate-400 text-slate-950">
+        {index}
+      </div>
+      <div className="text-sm text-slate-300">{description}</div>
+    </div>
+  );
+}
+
+export { NarrativeCard };

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

@@ -393,7 +393,14 @@ function FlowRenderer({
       const startNodeId = nanoid();
       const adderNodeId = nanoid();
       newNodes.push(
-        startNode(startNodeId, { withWorkflowSettings: false }, id),
+        startNode(
+          startNodeId,
+          {
+            withWorkflowSettings: false,
+            editable: true,
+          },
+          id,
+        ),
       );
       newNodes.push(nodeAdderNode(adderNodeId, id));
       newEdges.push(defaultEdge(startNodeId, adderNodeId));

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

@@ -13,6 +13,7 @@ import {
   WorkflowParameterTypes,
   WorkflowSettings,
 } from "../types/workflowTypes";
+import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
 
 function WorkflowEditor() {
   const { workflowPermanentId } = useParams();
@@ -27,12 +28,15 @@ function WorkflowEditor() {
     workflowPermanentId,
   });
 
+  const { data: globalWorkflows, isLoading: isGlobalWorkflowsLoading } =
+    useGlobalWorkflowsQuery();
+
   useMountEffect(() => {
     setCollapsed(true);
     setHasChanges(false);
   });
 
-  if (isLoading) {
+  if (isLoading || isGlobalWorkflowsLoading) {
     return (
       <div className="flex h-screen w-full items-center justify-center">
         <LogoMinimized />
@@ -44,13 +48,22 @@ function WorkflowEditor() {
     return null;
   }
 
+  const isGlobalWorkflow = globalWorkflows?.some(
+    (globalWorkflow) =>
+      globalWorkflow.workflow_permanent_id === workflowPermanentId,
+  );
+
   const settings: WorkflowSettings = {
     persistBrowserSession: workflow.persist_browser_session,
     proxyLocation: workflow.proxy_location,
     webhookCallbackUrl: workflow.webhook_callback_url,
   };
 
-  const elements = getElements(workflow.workflow_definition.blocks, settings);
+  const elements = getElements(
+    workflow.workflow_definition.blocks,
+    settings,
+    !isGlobalWorkflow,
+  );
 
   return (
     <div className="h-screen w-full">

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

@@ -9,11 +9,15 @@ import {
 import {
   ChevronDownIcon,
   ChevronUpIcon,
+  CopyIcon,
   PlayIcon,
+  ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
 import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
+import { useCreateWorkflowMutation } from "../hooks/useCreateWorkflowMutation";
+import { convert } from "./workflowEditorUtils";
 
 type Props = {
   title: string;
@@ -33,6 +37,7 @@ function WorkflowHeader({
   const { workflowPermanentId } = useParams();
   const { data: globalWorkflows } = useGlobalWorkflowsQuery();
   const navigate = useNavigate();
+  const createWorkflowMutation = useCreateWorkflowMutation();
 
   if (!globalWorkflows) {
     return null; // this should be loaded already by some other components
@@ -54,41 +59,67 @@ function WorkflowHeader({
         />
       </div>
       <div className="flex h-full items-center justify-end gap-4">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                size="icon"
-                variant="tertiary"
-                className="size-10"
-                disabled={isGlobalWorkflow}
-                onClick={() => {
-                  onSave();
-                }}
-              >
-                <SaveIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Save</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <Button variant="tertiary" size="lg" onClick={onParametersClick}>
-          <span className="mr-2">Parameters</span>
-          {parametersPanelOpen ? (
-            <ChevronUpIcon className="h-6 w-6" />
-          ) : (
-            <ChevronDownIcon className="h-6 w-6" />
-          )}
-        </Button>
-        <Button
-          size="lg"
-          onClick={() => {
-            navigate(`/workflows/${workflowPermanentId}/run`);
-          }}
-        >
-          <PlayIcon className="mr-2 h-6 w-6" />
-          Run
-        </Button>
+        {isGlobalWorkflow ? (
+          <Button
+            size="lg"
+            onClick={() => {
+              const workflow = globalWorkflows.find(
+                (workflow) =>
+                  workflow.workflow_permanent_id === workflowPermanentId,
+              );
+              if (!workflow) {
+                return; // makes no sense
+              }
+              const clone = convert(workflow);
+              createWorkflowMutation.mutate(clone);
+            }}
+          >
+            {createWorkflowMutation.isPending ? (
+              <ReloadIcon className="mr-3 h-6 w-6 animate-spin" />
+            ) : (
+              <CopyIcon className="mr-3 h-6 w-6" />
+            )}
+            Make a Copy to Edit
+          </Button>
+        ) : (
+          <>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="tertiary"
+                    className="size-10"
+                    disabled={isGlobalWorkflow}
+                    onClick={() => {
+                      onSave();
+                    }}
+                  >
+                    <SaveIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Save</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <Button variant="tertiary" size="lg" onClick={onParametersClick}>
+              <span className="mr-2">Parameters</span>
+              {parametersPanelOpen ? (
+                <ChevronUpIcon className="h-6 w-6" />
+              ) : (
+                <ChevronDownIcon className="h-6 w-6" />
+              )}
+            </Button>
+            <Button
+              size="lg"
+              onClick={() => {
+                navigate(`/workflows/${workflowPermanentId}/run`);
+              }}
+            >
+              <PlayIcon className="mr-2 h-6 w-6" />
+              Run
+            </Button>
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -55,6 +55,14 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
     (furthestDownChild?.position.y ?? 0) +
     24;
 
+  function handleChange(key: string, value: unknown) {
+    if (!data.editable) {
+      return;
+    }
+    setInputs({ ...inputs, [key]: value });
+    updateNodeData(id, { [key]: value });
+  }
+
   return (
     <div>
       <Handle
@@ -118,11 +126,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
                 nodeId={id}
                 value={inputs.loopVariableReference}
                 onChange={(value) => {
-                  setInputs({
-                    ...inputs,
-                    loopVariableReference: value,
-                  });
-                  updateNodeData(id, { loopVariableReference: value });
+                  handleChange("loopVariableReference", value);
                 }}
               />
             </div>
@@ -139,9 +143,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
                     checked={data.completeIfEmpty}
                     disabled={!data.editable}
                     onCheckedChange={(checked) => {
-                      updateNodeData(id, {
-                        completeIfEmpty: checked,
-                      });
+                      handleChange("completeIfEmpty", checked);
                     }}
                   />
                 </div>

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

@@ -30,6 +30,9 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
   });
 
   function handleChange(key: string, value: unknown) {
+    if (!data.editable) {
+      return;
+    }
     setInputs({ ...inputs, [key]: value });
     updateNodeData(id, { [key]: value });
   }

skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/types.ts

@@ -7,10 +7,12 @@ export type WorkflowStartNodeData = {
   webhookCallbackUrl: string;
   proxyLocation: ProxyLocation;
   persistBrowserSession: boolean;
+  editable: boolean;
 };
 
 export type OtherStartNodeData = {
   withWorkflowSettings: false;
+  editable: boolean;
 };
 
 export type StartNodeData = WorkflowStartNodeData | OtherStartNodeData;

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -172,6 +172,7 @@ function layout(
 function convertToNode(
   identifiers: { id: string; parentId?: string },
   block: WorkflowBlock,
+  editable: boolean,
 ): AppNode {
   const common = {
     draggable: false,
@@ -181,7 +182,7 @@ function convertToNode(
   const commonData: NodeBaseData = {
     label: block.label,
     continueOnFailure: block.continue_on_failure,
-    editable: true,
+    editable,
   };
   switch (block.block_type) {
     case "task": {
@@ -590,6 +591,7 @@ export function nodeAdderNode(id: string, parentId?: string): NodeAdderNode {
 function getElements(
   blocks: Array<WorkflowBlock>,
   settings: WorkflowSettings,
+  editable: boolean,
 ): {
   nodes: Array<AppNode>;
   edges: Array<Edge>;
@@ -605,6 +607,7 @@ function getElements(
       persistBrowserSession: settings.persistBrowserSession,
       proxyLocation: settings.proxyLocation ?? ProxyLocation.Residential,
       webhookCallbackUrl: settings.webhookCallbackUrl ?? "",
+      editable,
     }),
   );
 
@@ -615,6 +618,7 @@ function getElements(
         parentId: d.parentId ?? undefined,
       },
       d.block,
+      editable,
     );
     nodes.push(node);
     if (d.previous) {
@@ -633,6 +637,7 @@ function getElements(
         startNodeId,
         {
           withWorkflowSettings: false,
+          editable,
         },
         block.id,
       ),

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

@@ -0,0 +1,37 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
+import { WorkflowCreateYAMLRequest } from "../types/workflowYamlTypes";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+import { useNavigate } from "react-router-dom";
+import { stringify as convertToYAML } from "yaml";
+import { WorkflowApiResponse } from "../types/workflowTypes";
+
+function useCreateWorkflowMutation() {
+  const queryClient = useQueryClient();
+  const credentialGetter = useCredentialGetter();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
+      const client = await getClient(credentialGetter);
+      const yaml = convertToYAML(workflow);
+      return client.post<string, { data: WorkflowApiResponse }>(
+        "/workflows",
+        yaml,
+        {
+          headers: {
+            "Content-Type": "text/plain",
+          },
+        },
+      );
+    },
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+      navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
+    },
+  });
+}
+
+export { useCreateWorkflowMutation };

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

@@ -3,6 +3,7 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { WorkflowApiResponse } from "../types/workflowTypes";
 import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
+
 type Props = {
   workflowPermanentId?: string;
 };