Implement workflows tab, workflow runs view, ability to run workflows from UI (#582)

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

skyvern-frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-aspect-ratio": "^1.0.3",
+        "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
@@ -918,6 +919,206 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz",
+      "integrity": "sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",

skyvern-frontend/package.json

@@ -19,6 +19,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

skyvern-frontend/src/api/types.ts

@@ -112,9 +112,21 @@ export type ApiKeyApiResponse = {
   valid: boolean;
 };
 
+export const WorkflowParameterType = {
+  String: "string",
+  Integer: "integer",
+  Float: "float",
+  Boolean: "boolean",
+  JSON: "json",
+  FileURL: "file_url",
+} as const;
+
+export type WorkflowParameterType =
+  (typeof WorkflowParameterType)[keyof typeof WorkflowParameterType];
+
 export type WorkflowParameter = {
   workflow_parameter_id: string;
-  workflow_parameter_type?: string;
+  workflow_parameter_type: WorkflowParameterType;
   key: string;
   description: string | null;
   workflow_id: string;
@@ -144,6 +156,7 @@ export type WorkflowBlock = {
 export type WorkflowApiResponse = {
   workflow_id: string;
   organization_id: string;
+  is_saved_task: boolean;
   title: string;
   workflow_permanent_id: string;
   version: number;
@@ -204,3 +217,28 @@ export type Action = {
   stepId: string;
   index: number;
 };
+
+export type WorkflowRunApiResponse = {
+  workflow_permanent_id: string;
+  workflow_run_id: string;
+  workflow_id: string;
+  status: Status;
+  proxy_location: string;
+  webhook_callback_url: string;
+  created_at: string;
+  modified_at: string;
+};
+
+export type WorkflowRunStatusApiResponse = {
+  workflow_id: string;
+  workflow_run_id: string;
+  status: Status;
+  proxy_location: string;
+  webhook_callback_url: string | null;
+  created_at: string;
+  modified_at: string;
+  parameters: Record<string, unknown>;
+  screenshot_urls: Array<string> | null;
+  recording_url: string | null;
+  outputs: Record<string, unknown> | null;
+};

skyvern-frontend/src/components/FileUpload.tsx

@@ -0,0 +1,203 @@
+import { getClient } from "@/api/AxiosClient";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { cn } from "@/util/utils";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useMutation } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { toast } from "./ui/use-toast";
+
+export type FileInputValue =
+  | {
+      s3uri: string;
+      presignedUrl: string;
+    }
+  | string
+  | null;
+
+type Props = {
+  value: FileInputValue;
+  onChange: (value: FileInputValue) => void;
+};
+
+const FILE_SIZE_LIMIT_IN_BYTES = 10 * 1024 * 1024; // 10 MB
+
+function showFileSizeError() {
+  toast({
+    variant: "destructive",
+    title: "File size limit exceeded",
+    description:
+      "The file you are trying to upload exceeds the 10MB limit, please try again with a different file",
+  });
+}
+
+function FileUpload({ value, onChange }: Props) {
+  const credentialGetter = useCredentialGetter();
+  const [file, setFile] = useState<File | null>(null);
+  const [fileUrl, setFileUrl] = useState<string>("");
+  const [highlight, setHighlight] = useState(false);
+  const inputId = useId();
+
+  const uploadFileMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const client = await getClient(credentialGetter);
+      const formData = new FormData();
+      formData.append("file", file);
+      return client.post<
+        FormData,
+        {
+          data: {
+            s3_uri: string;
+            presigned_url: string;
+          };
+        }
+      >("/upload_file", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+    },
+    onSuccess: (response) => {
+      onChange({
+        s3uri: response.data.s3_uri,
+        presignedUrl: response.data.presigned_url,
+      });
+    },
+    onError: (error) => {
+      setFile(null);
+      toast({
+        variant: "destructive",
+        title: "Failed to upload file",
+        description: `An error occurred while uploading the file: ${error.message}`,
+      });
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0] as File;
+      if (file.size > FILE_SIZE_LIMIT_IN_BYTES) {
+        showFileSizeError();
+        return;
+      }
+      setFile(file);
+      uploadFileMutation.mutate(file);
+    }
+  };
+
+  function reset() {
+    setFile(null);
+    onChange(null);
+  }
+
+  if (value === null) {
+    return (
+      <div className="flex gap-4">
+        <div className="w-1/2">
+          <Label
+            htmlFor={inputId}
+            className={cn(
+              "flex w-full cursor-pointer border border-dashed items-center justify-center py-8",
+              {
+                "border-slate-500": highlight,
+              },
+            )}
+            onDragEnter={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setHighlight(true);
+            }}
+            onDragOver={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setHighlight(true);
+            }}
+            onDragLeave={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setHighlight(false);
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setHighlight(false);
+              if (
+                event.dataTransfer.files &&
+                event.dataTransfer.files.length > 0
+              ) {
+                const file = event.dataTransfer.files[0] as File;
+                if (file.size > FILE_SIZE_LIMIT_IN_BYTES) {
+                  showFileSizeError();
+                  return;
+                }
+                setFile(file);
+                uploadFileMutation.mutate(file);
+              }
+            }}
+          >
+            <input
+              id={inputId}
+              type="file"
+              onChange={handleFileChange}
+              accept=".csv"
+              className="hidden"
+            />
+            <div className="max-w-full truncate flex gap-2">
+              {uploadFileMutation.isPending && (
+                <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              <span>
+                {file
+                  ? file.name
+                  : "Drag and drop file here or click to select (Max 10MB)"}
+              </span>
+            </div>
+          </Label>
+        </div>
+        <div className="flex flex-col items-center justify-center before:flex before:content-[''] before:bg-slate-600">
+          OR
+        </div>
+        <div className="w-1/2">
+          <Label>File URL</Label>
+          <div className="flex gap-2">
+            <Input
+              value={fileUrl}
+              onChange={(e) => setFileUrl(e.target.value)}
+            />
+            <Button
+              onClick={() => {
+                onChange(fileUrl);
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (typeof value === "string") {
+    return (
+      <div className="flex gap-4 items-center">
+        <span>{value}</span>
+        <Button onClick={() => reset()}>Change</Button>
+      </div>
+    );
+  }
+
+  if (typeof value === "object" && file && "s3uri" in value) {
+    return (
+      <div className="flex gap-4 items-center">
+        <a href={value.presignedUrl} className="underline">
+          <span>{file.name}</span>
+        </a>
+        <Button onClick={() => reset()}>Change</Button>
+      </div>
+    );
+  }
+}
+
+export { FileUpload };

skyvern-frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/util/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

skyvern-frontend/src/router.tsx

@@ -1,4 +1,4 @@
-import { Navigate, createBrowserRouter } from "react-router-dom";
+import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
 import { RootLayout } from "./routes/root/RootLayout";
 import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
 import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
@@ -13,6 +13,10 @@ import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
 import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
 import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
 import { CreateNewTaskFromPrompt } from "./routes/tasks/create/CreateNewTaskFromPrompt";
+import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
+import { Workflows } from "./routes/workflows/Workflows";
+import { WorkflowPage } from "./routes/workflows/WorkflowPage";
+import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
 
 const router = createBrowserRouter([
   {
@@ -77,6 +81,30 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "workflows",
+        element: <WorkflowsPageLayout />,
+        children: [
+          {
+            index: true,
+            element: <Workflows />,
+          },
+          {
+            path: ":workflowPermanentId",
+            element: <Outlet />,
+            children: [
+              {
+                index: true,
+                element: <WorkflowPage />,
+              },
+              {
+                path: "run",
+                element: <WorkflowRunParameters />,
+              },
+            ],
+          },
+        ],
+      },
       {
         path: "settings",
         element: <SettingsPageLayout />,

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

@@ -1,6 +1,7 @@
 import { cn } from "@/util/utils";
 import {
   GearIcon,
+  LightningBoltIcon,
   ListBulletIcon,
   PlusCircledIcon,
 } from "@radix-ui/react-icons";
@@ -18,7 +19,7 @@ function SideNav() {
         }}
       >
         <PlusCircledIcon className="mr-4 w-6 h-6" />
-        <span className="text-lg">New Task</span>
+        <span className="text-lg">Create</span>
       </NavLink>
       <NavLink
         to="tasks"
@@ -29,7 +30,18 @@ function SideNav() {
         }}
       >
         <ListBulletIcon className="mr-4 w-6 h-6" />
-        <span className="text-lg">Task History</span>
+        <span className="text-lg">Tasks</span>
+      </NavLink>
+      <NavLink
+        to="workflows"
+        className={({ isActive }) => {
+          return cn("flex items-center px-5 py-3 hover:bg-muted rounded-2xl", {
+            "bg-muted": isActive,
+          });
+        }}
+      >
+        <LightningBoltIcon className="mr-4 w-6 h-6" />
+        <span className="text-lg">Workflows (Beta)</span>
       </NavLink>
       <NavLink
         to="settings"

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

@@ -13,7 +13,7 @@ function CreateNewTaskFormPage() {
   const credentialGetter = useCredentialGetter();
 
   const { data, isFetching } = useQuery({
-    queryKey: ["workflows", template],
+    queryKey: ["savedTask", template],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client

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

@@ -51,7 +51,7 @@ function SavedTasks() {
   const navigate = useNavigate();
 
   const { data } = useQuery<Array<WorkflowApiResponse>>({
-    queryKey: ["workflows"],
+    queryKey: ["savedTasks"],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
       return client

skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx

@@ -92,7 +92,7 @@ function TaskHistory() {
               <TaskListSkeletonRows />
             ) : tasks?.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={3}>No tasks found</TableCell>
+                <TableCell colSpan={5}>No tasks found</TableCell>
               </TableRow>
             ) : (
               tasks?.map((task) => {

skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx

@@ -58,7 +58,7 @@ function QueuedTasks() {
         <TableBody>
           {tasks?.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={3}>No queued tasks</TableCell>
+              <TableCell colSpan={4}>No queued tasks</TableCell>
             </TableRow>
           ) : (
             tasks?.map((task) => {

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

@@ -0,0 +1,154 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowParameter } from "@/api/types";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import { WorkflowParameterInput } from "./WorkflowParameterInput";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { ReloadIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  workflowParameters: Array<WorkflowParameter>;
+  initialValues: Record<string, unknown>;
+};
+
+function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
+  const { workflowPermanentId } = useParams();
+  const credentialGetter = useCredentialGetter();
+  const queryClient = useQueryClient();
+  const form = useForm({
+    defaultValues: initialValues,
+  });
+
+  const runWorkflowMutation = useMutation({
+    mutationFn: async (values: Record<string, unknown>) => {
+      const client = await getClient(credentialGetter);
+      return client
+        .post(`/workflows/${workflowPermanentId}/run`, {
+          data: values,
+        })
+        .then((response) => response.data);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workflowRuns"],
+      });
+      toast({
+        variant: "success",
+        title: "Workflow run started",
+        description: "The workflow run has been started successfully",
+      });
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: "Failed to start workflow run",
+        description: error.message,
+      });
+    },
+  });
+
+  function onSubmit(values: Record<string, unknown>) {
+    const parsedValues = Object.fromEntries(
+      Object.entries(values).map(([key, value]) => {
+        const parameter = workflowParameters?.find(
+          (parameter) => parameter.key === key,
+        );
+        if (parameter?.workflow_parameter_type === "json") {
+          try {
+            return [key, JSON.parse(value as string)];
+          } catch {
+            console.error("Invalid JSON"); // this should never happen, it should fall to form error
+            return [key, value];
+          }
+        }
+        // can improve this via the type system maybe
+        if (
+          parameter?.workflow_parameter_type === "file_url" &&
+          value !== null &&
+          typeof value === "object" &&
+          "s3uri" in value
+        ) {
+          return [key, value.s3uri];
+        }
+        return [key, value];
+      }),
+    );
+    runWorkflowMutation.mutate(parsedValues);
+  }
+
+  return (
+    <div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          {workflowParameters?.map((parameter) => {
+            return (
+              <FormField
+                key={parameter.key}
+                control={form.control}
+                name={parameter.key}
+                rules={{
+                  validate: (value) => {
+                    if (
+                      parameter.workflow_parameter_type === "json" &&
+                      typeof value === "string"
+                    ) {
+                      try {
+                        JSON.parse(value);
+                        return true;
+                      } catch (e) {
+                        return "Invalid JSON";
+                      }
+                    }
+                  },
+                }}
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>{parameter.key}</FormLabel>
+                      <FormControl>
+                        <WorkflowParameterInput
+                          type={parameter.workflow_parameter_type}
+                          value={field.value}
+                          onChange={field.onChange}
+                        />
+                      </FormControl>
+                      {parameter.description && (
+                        <FormDescription>
+                          {parameter.description}
+                        </FormDescription>
+                      )}
+                      {form.formState.errors[parameter.key] && (
+                        <div className="text-destructive">
+                          {form.formState.errors[parameter.key]?.message}
+                        </div>
+                      )}
+                    </FormItem>
+                  );
+                }}
+              />
+            );
+          })}
+          <Button type="submit" disabled={runWorkflowMutation.isPending}>
+            {runWorkflowMutation.isPending && (
+              <ReloadIcon className="mr-2 w-4 h-4 animate-spin" />
+            )}
+            Run workflow
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export { RunWorkflowForm };

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

@@ -0,0 +1,140 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowRunApiResponse } from "@/api/types";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Button } from "@/components/ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { cn } from "@/util/utils";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Link,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+
+function WorkflowPage() {
+  const credentialGetter = useCredentialGetter();
+  const { workflowPermanentId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
+  const navigate = useNavigate();
+
+  const { data: workflowRuns, isLoading } = useQuery<
+    Array<WorkflowRunApiResponse>
+  >({
+    queryKey: ["workflowRuns", workflowPermanentId, page],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(page));
+      return client
+        .get(`/workflows/${workflowPermanentId}/runs`, {
+          params,
+        })
+        .then((response) => response.data);
+    },
+  });
+
+  if (!workflowPermanentId) {
+    return null; // this should never happen
+  }
+
+  return (
+    <div className="space-y-8">
+      <header className="flex justify-between">
+        <h1 className="text-lg font-semibold">{workflowPermanentId}</h1>
+        <Button asChild>
+          <Link to="run">Create New Run</Link>
+        </Button>
+      </header>
+      <div>
+        <header>
+          <h1 className="text-lg font-semibold">Past Runs</h1>
+        </header>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-1/2">ID</TableHead>
+              <TableHead className="w-1/2">Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={2}>Loading...</TableCell>
+              </TableRow>
+            ) : workflowRuns?.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={2}>No workflow runs found</TableCell>
+              </TableRow>
+            ) : (
+              workflowRuns?.map((workflowRun) => (
+                <TableRow
+                  key={workflowRun.workflow_run_id}
+                  onClick={() => {
+                    navigate(`${workflowRun.workflow_run_id}`);
+                  }}
+                  className="cursor-pointer"
+                >
+                  <TableCell>{workflowRun.workflow_run_id}</TableCell>
+                  <TableCell>
+                    <StatusBadge status={workflowRun.status} />
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+        <Pagination className="pt-2">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                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);
+                }}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">{page}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={() => {
+                  const params = new URLSearchParams();
+                  params.set("page", String(page + 1));
+                  setSearchParams(params);
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowPage };

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

@@ -0,0 +1,65 @@
+import { WorkflowParameterType } from "@/api/types";
+import { FileInputValue, FileUpload } from "@/components/FileUpload";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+type Props = {
+  type: WorkflowParameterType;
+  value: unknown;
+  onChange: (value: unknown) => void;
+};
+
+function WorkflowParameterInput({ type, value, onChange }: Props) {
+  if (type === "json" || type === "string") {
+    return (
+      <Textarea
+        value={value as string}
+        onChange={(e) => onChange(e.target.value)}
+        rows={5}
+      />
+    );
+  }
+
+  if (type === "integer") {
+    return (
+      <Input
+        value={value as number}
+        onChange={(e) => onChange(parseInt(e.target.value))}
+        type="number"
+      />
+    );
+  }
+
+  if (type === "float") {
+    return (
+      <Input
+        value={value as number}
+        onChange={(e) => onChange(parseFloat(e.target.value))}
+        type="number"
+        step="any"
+      />
+    );
+  }
+
+  if (type === "boolean") {
+    return (
+      <Checkbox
+        checked={value as boolean}
+        onCheckedChange={(checked) => onChange(checked)}
+        className="block"
+      />
+    );
+  }
+
+  if (type === "file_url") {
+    return (
+      <FileUpload
+        value={value as FileInputValue}
+        onChange={(value) => onChange(value)}
+      />
+    );
+  }
+}
+
+export { WorkflowParameterInput };

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

@@ -0,0 +1,157 @@
+import { getClient } from "@/api/AxiosClient";
+import { TaskApiResponse, WorkflowRunStatusApiResponse } from "@/api/types";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import { TaskListSkeletonRows } from "../tasks/list/TaskListSkeletonRows";
+import { basicTimeFormat } from "@/util/timeFormat";
+import { TaskActions } from "../tasks/list/TaskActions";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+function WorkflowRun() {
+  const { workflowRunId, workflowPermanentId } = useParams();
+  const credentialGetter = useCredentialGetter();
+  const navigate = useNavigate();
+  const { data: workflowRun, isLoading: workflowRunIsLoading } =
+    useQuery<WorkflowRunStatusApiResponse>({
+      queryKey: ["workflowRun", workflowPermanentId, workflowRunId],
+      queryFn: async () => {
+        const client = await getClient(credentialGetter);
+        return client
+          .get(`/workflows/${workflowPermanentId}/runs/${workflowRunId}`)
+          .then((response) => response.data);
+      },
+    });
+
+  const { data: workflowTasks, isLoading: workflowTasksIsLoading } = useQuery<
+    Array<TaskApiResponse>
+  >({
+    queryKey: ["workflowTasks", workflowRunId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/tasks?workflow_run_id=${workflowRunId}`)
+        .then((response) => response.data);
+    },
+  });
+
+  function handleNavigate(event: React.MouseEvent, id: string) {
+    if (event.ctrlKey || event.metaKey) {
+      window.open(
+        window.location.origin + `/tasks/${id}/actions`,
+        "_blank",
+        "noopener,noreferrer",
+      );
+    } else {
+      navigate(`${id}/actions`);
+    }
+  }
+
+  const parameters = workflowRun?.parameters ?? {};
+
+  return (
+    <div className="space-y-8">
+      <header className="flex gap-2">
+        <h1 className="text-lg font-semibold">{workflowRunId}</h1>
+        {workflowRunIsLoading ? (
+          <Skeleton className="w-28 h-8" />
+        ) : workflowRun ? (
+          <StatusBadge status={workflowRun?.status} />
+        ) : null}
+      </header>
+      <div className="space-y-4">
+        <header>
+          <h2 className="text-lg font-semibold">Tasks</h2>
+        </header>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-1/4">ID</TableHead>
+                <TableHead className="w-1/4">URL</TableHead>
+                <TableHead className="w-1/6">Status</TableHead>
+                <TableHead className="w-1/4">Created At</TableHead>
+                <TableHead className="w-1/12" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {workflowTasksIsLoading ? (
+                <TaskListSkeletonRows />
+              ) : workflowTasks?.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    This workflow run does not have any tasks
+                  </TableCell>
+                </TableRow>
+              ) : (
+                workflowTasks?.map((task) => {
+                  return (
+                    <TableRow key={task.task_id}>
+                      <TableCell
+                        className="w-1/4 cursor-pointer"
+                        onClick={(event) => handleNavigate(event, task.task_id)}
+                      >
+                        {task.task_id}
+                      </TableCell>
+                      <TableCell
+                        className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
+                        onClick={(event) => handleNavigate(event, task.task_id)}
+                      >
+                        {task.request.url}
+                      </TableCell>
+                      <TableCell
+                        className="w-1/6 cursor-pointer"
+                        onClick={(event) => handleNavigate(event, task.task_id)}
+                      >
+                        <StatusBadge status={task.status} />
+                      </TableCell>
+                      <TableCell
+                        className="w-1/4 cursor-pointer"
+                        onClick={(event) => handleNavigate(event, task.task_id)}
+                      >
+                        {basicTimeFormat(task.created_at)}
+                      </TableCell>
+                      <TableCell className="w-1/12">
+                        <TaskActions task={task} />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <header>
+          <h2 className="text-lg font-semibold">Parameters</h2>
+        </header>
+        {Object.entries(parameters).map(([key, value]) => {
+          return (
+            <div key={key} className="flex flex-col gap-2">
+              <Label>{key}</Label>
+              {typeof value === "string" ? (
+                <Input value={value} readOnly />
+              ) : (
+                <Input value={JSON.stringify(value)} readOnly />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowRun };

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

@@ -0,0 +1,90 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowApiResponse, WorkflowParameterType } from "@/api/types";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { RunWorkflowForm } from "./RunWorkflowForm";
+
+function defaultValue(type: WorkflowParameterType) {
+  switch (type) {
+    case "string":
+      return "";
+    case "integer":
+      return 0;
+    case "float":
+      return 0.0;
+    case "boolean":
+      return false;
+    case "json":
+      return null;
+    case "file_url":
+      return null;
+  }
+}
+
+function WorkflowRunParameters() {
+  const credentialGetter = useCredentialGetter();
+  const { workflowPermanentId } = useParams();
+
+  const { data: workflow, isFetching } = useQuery<WorkflowApiResponse>({
+    queryKey: ["workflow", workflowPermanentId],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/workflows/${workflowPermanentId}`)
+        .then((response) => response.data);
+    },
+  });
+
+  const workflowParameters = workflow?.workflow_definition.parameters.filter(
+    (parameter) => parameter.parameter_type === "workflow",
+  );
+
+  const initialValues = workflowParameters?.reduce(
+    (acc, curr) => {
+      if (curr.workflow_parameter_type === "file_url") {
+        acc[curr.key] = null;
+        return acc;
+      }
+      if (curr.workflow_parameter_type === "json") {
+        if (typeof curr.default_value === "string") {
+          acc[curr.key] = curr.default_value;
+          return acc;
+        }
+        if (curr.default_value) {
+          acc[curr.key] = JSON.stringify(curr.default_value, null, 2);
+          return acc;
+        }
+      }
+      if (curr.default_value) {
+        acc[curr.key] = curr.default_value;
+        return acc;
+      }
+      acc[curr.key] = defaultValue(curr.workflow_parameter_type);
+      return acc;
+    },
+    {} as Record<string, unknown>,
+  );
+
+  if (isFetching) {
+    return <div>Getting workflow parameters...</div>;
+  }
+
+  if (!workflow || !workflowParameters || !initialValues) {
+    return <div>Workflow not found</div>;
+  }
+
+  return (
+    <div className="space-y-8">
+      <header>
+        <h1 className="text-2xl font-semibold">Workflow Run Parameters</h1>
+      </header>
+      <RunWorkflowForm
+        initialValues={initialValues}
+        workflowParameters={workflowParameters}
+      />
+    </div>
+  );
+}
+
+export { WorkflowRunParameters };

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

@@ -0,0 +1,236 @@
+import { getClient } from "@/api/AxiosClient";
+import { WorkflowApiResponse, WorkflowRunApiResponse } from "@/api/types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { WorkflowsBetaAlertCard } from "./WorkflowsBetaAlertCard";
+import { StatusBadge } from "@/components/StatusBadge";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { cn } from "@/util/utils";
+
+function Workflows() {
+  const credentialGetter = useCredentialGetter();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const workflowsPage = searchParams.get("workflowsPage")
+    ? Number(searchParams.get("workflowsPage"))
+    : 1;
+  const workflowRunsPage = searchParams.get("workflowRunsPage")
+    ? Number(searchParams.get("workflowRunsPage"))
+    : 1;
+
+  const { data: workflows, isLoading } = useQuery<Array<WorkflowApiResponse>>({
+    queryKey: ["workflows", workflowsPage],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(workflowsPage));
+      params.append("only_workflows", "true");
+      return client
+        .get(`/workflows`, {
+          params,
+        })
+        .then((response) => response.data);
+    },
+  });
+
+  const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
+    Array<WorkflowRunApiResponse>
+  >({
+    queryKey: ["workflowRuns", workflowRunsPage],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      const params = new URLSearchParams();
+      params.append("page", String(workflowRunsPage));
+      return client
+        .get("/workflows/runs", {
+          params,
+        })
+        .then((response) => response.data);
+    },
+  });
+
+  if (workflows?.length === 0 && workflowsPage === 1) {
+    return <WorkflowsBetaAlertCard />;
+  }
+
+  return (
+    <div className="space-y-8">
+      <header>
+        <h1 className="text-2xl font-semibold">Workflows</h1>
+      </header>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-1/2">ID</TableHead>
+              <TableHead className="w-1/2">Title</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={2}>Loading...</TableCell>
+              </TableRow>
+            ) : workflows?.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={2}>No workflows found</TableCell>
+              </TableRow>
+            ) : (
+              workflows?.map((workflow) => {
+                return (
+                  <TableRow
+                    key={workflow.workflow_permanent_id}
+                    onClick={() => {
+                      navigate(`${workflow.workflow_permanent_id}`);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <TableCell className="w-1/2">
+                      {workflow.workflow_permanent_id}
+                    </TableCell>
+                    <TableCell className="w-1/2">{workflow.title}</TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+        <Pagination className="pt-2">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                className={cn({ "cursor-not-allowed": workflowsPage === 1 })}
+                onClick={() => {
+                  if (workflowsPage === 1) {
+                    return;
+                  }
+                  const params = new URLSearchParams();
+                  params.set(
+                    "workflowsPage",
+                    String(Math.max(1, workflowsPage - 1)),
+                  );
+                  setSearchParams(params);
+                }}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">{workflowsPage}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={() => {
+                  const params = new URLSearchParams();
+                  params.set("workflowsPage", String(workflowsPage + 1));
+                  setSearchParams(params);
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+      <header>
+        <h1 className="text-2xl font-semibold">Workflow Runs</h1>
+      </header>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-1/3">Workflow ID</TableHead>
+              <TableHead className="w-1/3">Workflow Run ID</TableHead>
+              <TableHead className="w-1/3">Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {workflowRunsIsLoading ? (
+              <TableRow>
+                <TableCell colSpan={3}>Loading...</TableCell>
+              </TableRow>
+            ) : workflowRuns?.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={3}>No workflow runs found</TableCell>
+              </TableRow>
+            ) : (
+              workflowRuns?.map((workflowRun) => {
+                return (
+                  <TableRow
+                    key={workflowRun.workflow_run_id}
+                    onClick={() => {
+                      navigate(
+                        `/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}`,
+                      );
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <TableCell className="w-1/3">
+                      {workflowRun.workflow_permanent_id}
+                    </TableCell>
+                    <TableCell className="w-1/3">
+                      {workflowRun.workflow_run_id}
+                    </TableCell>
+                    <TableCell className="w-1/3">
+                      <StatusBadge status={workflowRun.status} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+        <Pagination className="pt-2">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                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);
+                }}
+              />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">{workflowRunsPage}</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={() => {
+                  const params = new URLSearchParams();
+                  params.set("workflowRunsPage", String(workflowRunsPage + 1));
+                  setSearchParams(params);
+                }}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+    </div>
+  );
+}
+
+export { Workflows };

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

@@ -0,0 +1,37 @@
+import { Button } from "@/components/ui/button";
+
+function WorkflowsBetaAlertCard() {
+  return (
+    <div className="shadow rounded-lg bg-slate-900 flex flex-col items-center p-4">
+      <header>
+        <h1 className="text-3xl py-4">Workflows (Beta)</h1>
+      </header>
+      <div>Workflows through UI are currently under construction.</div>
+      <div>
+        Today, you can create and run workflows through the Skyvern API.
+      </div>
+      <div className="flex gap-4 py-4">
+        <Button asChild>
+          <a
+            href="https://docs.skyvern.com/workflows/creating-workflows"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            See the workflow docs
+          </a>
+        </Button>
+        <Button asChild>
+          <a
+            href="https://meetings.hubspot.com/suchintan"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Book a demo
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowsBetaAlertCard };

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

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