+>(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+};
diff --git a/skyvern-frontend/src/components/ui/textarea.tsx b/skyvern-frontend/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..568256b3
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/util/utils";
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes {}
+
+const Textarea = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/skyvern-frontend/src/components/ui/toast.tsx b/skyvern-frontend/src/components/ui/toast.tsx
new file mode 100644
index 00000000..372b8cf2
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/util/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+ {
+ variants: {
+ variant: {
+ default: "border bg-background text-foreground",
+ destructive:
+ "destructive group border-destructive bg-destructive text-destructive-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+const Toast = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+
+ );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef;
+
+type ToastActionElement = React.ReactElement;
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+};
diff --git a/skyvern-frontend/src/components/ui/toaster.tsx b/skyvern-frontend/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..5ff57090
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
+
+export function Toaster() {
+ const { toasts } = useToast();
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ {title && {title}}
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/skyvern-frontend/src/components/ui/tooltip.tsx b/skyvern-frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..dd030d7f
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/util/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/skyvern-frontend/src/components/ui/use-form-field.ts b/skyvern-frontend/src/components/ui/use-form-field.ts
new file mode 100644
index 00000000..76f31e33
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/use-form-field.ts
@@ -0,0 +1,46 @@
+import React from "react";
+import { FieldPath, FieldValues, useFormContext } from "react-hook-form";
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+> = {
+ name: TName;
+};
+
+export const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue,
+);
+
+type FormItemContextValue = {
+ id: string;
+};
+
+export const FormItemContext = React.createContext(
+ {} as FormItemContextValue,
+);
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
+
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ");
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+export { useFormField };
diff --git a/skyvern-frontend/src/components/ui/use-toast.ts b/skyvern-frontend/src/components/ui/use-toast.ts
new file mode 100644
index 00000000..5a03b78a
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+ id: string;
+ title?: React.ReactNode;
+ description?: React.ReactNode;
+ action?: ToastActionElement;
+};
+
+const actionTypes = {
+ ADD_TOAST: "ADD_TOAST",
+ UPDATE_TOAST: "UPDATE_TOAST",
+ DISMISS_TOAST: "DISMISS_TOAST",
+ REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+ count = (count + 1) % Number.MAX_SAFE_INTEGER;
+ return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+ | {
+ type: ActionType["ADD_TOAST"];
+ toast: ToasterToast;
+ }
+ | {
+ type: ActionType["UPDATE_TOAST"];
+ toast: Partial;
+ }
+ | {
+ type: ActionType["DISMISS_TOAST"];
+ toastId?: ToasterToast["id"];
+ }
+ | {
+ type: ActionType["REMOVE_TOAST"];
+ toastId?: ToasterToast["id"];
+ };
+
+interface State {
+ toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map>();
+
+const addToRemoveQueue = (toastId: string) => {
+ if (toastTimeouts.has(toastId)) {
+ return;
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId);
+ dispatch({
+ type: "REMOVE_TOAST",
+ toastId: toastId,
+ });
+ }, TOAST_REMOVE_DELAY);
+
+ toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case "ADD_TOAST":
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ };
+
+ case "UPDATE_TOAST":
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === action.toast.id ? { ...t, ...action.toast } : t,
+ ),
+ };
+
+ case "DISMISS_TOAST": {
+ const { toastId } = action;
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId);
+ } else {
+ state.toasts.forEach((toast) => {
+ addToRemoveQueue(toast.id);
+ });
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t,
+ ),
+ };
+ }
+ case "REMOVE_TOAST":
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ };
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ };
+ }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+ memoryState = reducer(memoryState, action);
+ listeners.forEach((listener) => {
+ listener(memoryState);
+ });
+}
+
+type Toast = Omit;
+
+function toast({ ...props }: Toast) {
+ const id = genId();
+
+ const update = (props: ToasterToast) =>
+ dispatch({
+ type: "UPDATE_TOAST",
+ toast: { ...props, id },
+ });
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss();
+ },
+ },
+ });
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ };
+}
+
+function useToast() {
+ const [state, setState] = React.useState(memoryState);
+
+ React.useEffect(() => {
+ listeners.push(setState);
+ return () => {
+ const index = listeners.indexOf(setState);
+ if (index > -1) {
+ listeners.splice(index, 1);
+ }
+ };
+ }, [state]);
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ };
+}
+
+export { useToast, toast };
diff --git a/skyvern-frontend/src/index.css b/skyvern-frontend/src/index.css
index 8abdb15c..b16ead87 100644
--- a/skyvern-frontend/src/index.css
+++ b/skyvern-frontend/src/index.css
@@ -74,3 +74,8 @@
@apply bg-background text-foreground;
}
}
+
+body,
+#root {
+ min-height: 100vh;
+}
diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx
new file mode 100644
index 00000000..9a2419ee
--- /dev/null
+++ b/skyvern-frontend/src/router.tsx
@@ -0,0 +1,51 @@
+import { Navigate, createBrowserRouter } from "react-router-dom";
+import { RootLayout } from "./routes/root/RootLayout";
+import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
+import { CreateNewTask } from "./routes/tasks/create/CreateNewTask";
+import { TaskList } from "./routes/tasks/list/TaskList";
+import { Settings } from "./routes/settings/Settings";
+import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
+import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ {
+ path: "tasks",
+ element: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ {
+ path: ":taskId",
+ element: ,
+ },
+ ],
+ },
+ {
+ path: "create",
+ element: ,
+ },
+ {
+ path: "settings",
+ element: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ ],
+ },
+ ],
+ },
+]);
+
+export { router };
diff --git a/skyvern-frontend/src/routes/root/RootLayout.tsx b/skyvern-frontend/src/routes/root/RootLayout.tsx
new file mode 100644
index 00000000..9f053a12
--- /dev/null
+++ b/skyvern-frontend/src/routes/root/RootLayout.tsx
@@ -0,0 +1,49 @@
+import { Link, Outlet } from "react-router-dom";
+import { Toaster } from "@/components/ui/toaster";
+import { SideNav } from "./SideNav";
+import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
+
+function RootLayout() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export { SettingsPageLayout };
diff --git a/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx b/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
new file mode 100644
index 00000000..ddd21d15
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+
+function TasksPageLayout() {
+ return (
+
+
+
+
+
+ );
+}
+
+export { TasksPageLayout };
diff --git a/skyvern-frontend/src/routes/tasks/constants.ts b/skyvern-frontend/src/routes/tasks/constants.ts
new file mode 100644
index 00000000..5ef99a2b
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/constants.ts
@@ -0,0 +1 @@
+export const PAGE_SIZE = 15;
diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx
new file mode 100644
index 00000000..5651c7be
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx
@@ -0,0 +1,49 @@
+import { useId, useState } from "react";
+import { CreateNewTaskForm } from "./CreateNewTaskForm";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { SampleCase } from "../types";
+import { getSampleForInitialFormValues } from "../data/sampleTaskData";
+import { Label } from "@/components/ui/label";
+
+function CreateNewTask() {
+ const [selectedCase, setSelectedCase] = useState("geico");
+ const caseInputId = useId();
+
+ return (
+
+
+
+
+
+
+ Error: {error?.message} ;
+ }
+
+ if (!steps) {
+ return No steps found ;
+ }
+
+ return (
+ <>
+
+
+
+ Order
+ Status
+ Created At
+
+
+
+ {steps.length === 0 ? (
+
+ No tasks found
+
+ ) : (
+ steps.map((step) => {
+ return (
+
+ {step.order}
+
+
+
+
+ {basicTimeFormat(step.created_at)}
+
+
+ );
+ })
+ )}
+
+
+
+
+
+ {
+ const params = new URLSearchParams();
+ params.set("page", String(Math.max(1, page - 1)));
+ setSearchParams(params);
+ }}
+ />
+
+
+ {page}
+
+
+ {
+ const params = new URLSearchParams();
+ params.set("page", String(page + 1));
+ setSearchParams(params);
+ }}
+ />
+
+
+
+
+ );
+}
+
+export { StepList };
diff --git a/skyvern-frontend/src/routes/tasks/detail/StepListSkeleton.tsx b/skyvern-frontend/src/routes/tasks/detail/StepListSkeleton.tsx
new file mode 100644
index 00000000..2b3a9f55
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/detail/StepListSkeleton.tsx
@@ -0,0 +1,46 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+
+const pageSizeArray = new Array(15).fill(null); // doesn't matter the value
+
+function StepListSkeleton() {
+ return (
+
+
+
+
+ Order
+ Status
+ Created At
+
+
+
+ {pageSizeArray.map((_, index) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ Error: {taskError?.message} ;
+ }
+
+ if (isTaskFetching) {
+ return Loading... ; // TODO: skeleton
+ }
+
+ if (!task) {
+ return Task not found ;
+ }
+
+ return (
+
+
+
+ {task.recording_url ? (
+
+
+
+
+ ) : null}
+
+
+
+
+ {task.status === Status.Completed ? (
+
+
+
+
+ ) : null}
+ {task.status === Status.Failed || task.status === Status.Terminated ? (
+
+
+
+
+ ) : null}
+
+
+
+
+ Task Parameters
+
+
+
+ Task ID: {taskId}
+ URL: {task.request.url}
+ {basicTimeFormat(task.created_at)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Task Steps
+
+
+ Error: {error?.message} ;
+ }
+
+ if (!tasks) {
+ return null;
+ }
+
+ const resolvedTasks = tasks.filter(
+ (task) =>
+ task.status === "completed" ||
+ task.status === "failed" ||
+ task.status === "terminated",
+ );
+
+ return (
+
+ Running Tasks
+
+
+
+ Task History
+
+
+
+ URL
+ Status
+ Created At
+
+
+
+ {tasks.length === 0 ? (
+
+ No tasks found
+
+ ) : (
+ resolvedTasks.map((task) => {
+ return (
+ {
+ navigate(task.task_id);
+ }}
+ >
+ {task.request.url}
+
+
+
+
+ {basicTimeFormat(task.created_at)}
+
+
+ );
+ })
+ )}
+
+
+
+
+
+ {
+ if (page === 1) {
+ return;
+ }
+ const params = new URLSearchParams();
+ params.set("page", String(Math.max(1, page - 1)));
+ setSearchParams(params);
+ }}
+ />
+
+
+ {page}
+
+
+ {
+ const params = new URLSearchParams();
+ params.set("page", String(page + 1));
+ setSearchParams(params);
+ }}
+ />
+
+
+
+
+
+
+
+ URL
+ Status
+ Created At
+
+
+
+ {pageSizeArray.map((_, index) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ Error: {error?.message} ;
+ }
+
+ if (!tasks) {
+ return null;
+ }
+
+ const runningTasks = tasks.filter((task) => task.status === Status.Running);
+
+ if (runningTasks.length === 0) {
+ return No running tasks ;
+ }
+
+ return runningTasks.map((task) => {
+ return (
+ {
+ navigate(`/tasks/${task.task_id}`);
+ }}
+ >
+
+ {task.request.url}
+
+
+ Goal: {task.request.navigation_goal}
+ Created: {basicTimeFormat(task.created_at)}
+
+ );
+ });
+}
+
+export { RunningTasks };
diff --git a/skyvern-frontend/src/routes/tasks/types.ts b/skyvern-frontend/src/routes/tasks/types.ts
new file mode 100644
index 00000000..7c737a0e
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/types.ts
@@ -0,0 +1,5 @@
+export type SampleCase =
+ | "geico"
+ | "finditparts"
+ | "california_edd"
+ | "bci_seguros";
diff --git a/skyvern-frontend/src/store/SettingsStore.ts b/skyvern-frontend/src/store/SettingsStore.ts
new file mode 100644
index 00000000..b8050b59
--- /dev/null
+++ b/skyvern-frontend/src/store/SettingsStore.ts
@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+type SettingsStore = {
+ environment: string;
+ organization: string;
+ setEnvironment: (environment: string) => void;
+ setOrganization: (organization: string) => void;
+};
+
+const useSettingsStore = create((set) => {
+ return {
+ environment: "local",
+ organization: "skyvern",
+ setEnvironment: (environment: string) => set({ environment }),
+ setOrganization: (organization: string) => set({ organization }),
+ };
+});
+
+export { useSettingsStore };
diff --git a/skyvern-frontend/src/util/env.ts b/skyvern-frontend/src/util/env.ts
new file mode 100644
index 00000000..d91660b4
--- /dev/null
+++ b/skyvern-frontend/src/util/env.ts
@@ -0,0 +1,25 @@
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL as string;
+
+if (!apiBaseUrl) {
+ console.error("apiBaseUrl environment variable was not set");
+}
+
+const environment = import.meta.env.VITE_ENVIRONMENT as string;
+
+if (!environment) {
+ console.error("environment environment variable was not set");
+}
+
+const credential = import.meta.env.VITE_API_CREDENTIAL as string;
+
+if (!credential) {
+ console.error("credential environment variable was not set");
+}
+
+const artifactApiBaseUrl = import.meta.env.VITE_ARTIFACT_API_BASE_URL as string;
+
+if (!artifactApiBaseUrl) {
+ console.error("artifactApiBaseUrl environment variable was not set");
+}
+
+export { apiBaseUrl, environment, credential, artifactApiBaseUrl };
diff --git a/skyvern-frontend/src/util/timeFormat.ts b/skyvern-frontend/src/util/timeFormat.ts
new file mode 100644
index 00000000..d140cafc
--- /dev/null
+++ b/skyvern-frontend/src/util/timeFormat.ts
@@ -0,0 +1,13 @@
+function basicTimeFormat(time: string): string {
+ const date = new Date(time);
+ const dateString = date.toLocaleDateString("en-us", {
+ weekday: "long",
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+ const timeString = date.toLocaleTimeString("en-us");
+ return `${dateString} at ${timeString}`;
+}
+
+export { basicTimeFormat };
diff --git a/skyvern-frontend/vite.config.ts b/skyvern-frontend/vite.config.ts
index 72d95969..030e6b9c 100644
--- a/skyvern-frontend/vite.config.ts
+++ b/skyvern-frontend/vite.config.ts
@@ -5,6 +5,12 @@ import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ server: {
+ port: 8080,
+ },
+ preview: {
+ port: 8080,
+ },
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
|