Skyvern Evaluation New Endpoint - general /runs (#2374)

skyvern-frontend/src/components/SwitchBar.tsx

@@ -6,21 +6,27 @@ type Option = {
 };
 
 type Props = {
+  className?: string;
   options: Option[];
   value: string;
   onChange: (value: string) => void;
 };
 
-function SwitchBar({ options, value, onChange }: Props) {
+function SwitchBar({ className, options, value, onChange }: Props) {
   return (
-    <div className="flex w-fit gap-1 rounded-sm border border-slate-700 p-2">
+    <div
+      className={cn(
+        "flex w-fit gap-1 rounded-sm border border-slate-700 p-2",
+        className,
+      )}
+    >
       {options.map((option) => {
         const selected = option.value === value;
         return (
           <div
             key={option.value}
             className={cn(
-              "cursor-pointer whitespace-nowrap rounded-sm px-3 py-2 text-xs hover:bg-slate-700",
+              "flex cursor-pointer items-center whitespace-nowrap rounded-sm px-3 py-2 text-xs hover:bg-slate-700",
               {
                 "bg-slate-700": selected,
               },

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

@@ -0,0 +1,30 @@
+type Props = {
+  className?: string;
+};
+
+function SearchIcon({ 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="m0 0h24v24h-24z" fill="none" />
+      <path
+        d={`m15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 
+          3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 
+          4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 
+          4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z`}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { SearchIcon };

skyvern-frontend/src/components/ui/button-variants.ts

@@ -9,6 +9,8 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow hover:bg-primary/90 font-bold",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        disabled:
+          "hover:bg-accent hover:text-accent-foreground opacity-50 pointer-events-none",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:

skyvern-frontend/src/components/ui/grid-form.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo, useId } from "react";
+
+type Breakpoints = Record<number, number>; // { columns: minWidth }
+
+type GridFormProps = {
+  breakpoints: Breakpoints;
+  className?: string;
+  children: React.ReactNode;
+};
+
+/**
+ * GridForm is a layout component that wraps its children in a CSS grid.
+ * Pass the breakpoints prop as an object mapping columns to min viewport width.
+ *
+ * Example usage:
+ * <GridForm breakpoints={{ 1: 600, 2: 900 }}>
+ *   <Item1 />
+ *   <Item2 />
+ * </GridForm>
+ */
+export const GridForm: React.FC<GridFormProps> = ({
+  breakpoints,
+  className = "",
+  children,
+}) => {
+  // Generate a unique className for this instance
+  const uniqueClass = `grid-form-${useId().replace(/:/g, "-")}`;
+
+  // Generate CSS for breakpoints
+  const styleTag = useMemo(() => {
+    // Sort breakpoints by minWidth ascending
+    const sorted = Object.entries(breakpoints)
+      .map(
+        ([cols, minWidth]) =>
+          [parseInt(cols, 10), minWidth] as [number, number],
+      )
+      .sort((a, b) => a[1] - b[1]);
+    let css = `.${uniqueClass} { display: grid; gap: 1rem; }\n`;
+    for (const [cols, minWidth] of sorted) {
+      css += `@media (min-width: ${minWidth}px) { .${uniqueClass} { grid-template-columns: repeat(${cols}, minmax(0, 1fr)); } }\n`;
+    }
+    // Default to the smallest breakpoint (first one)
+    if (sorted.length > 0 && sorted[0]) {
+      const [firstCols, firstMinWidth] = sorted[0];
+      css += `@media (max-width: ${firstMinWidth}px) { .${uniqueClass} { grid-template-columns: repeat(${firstCols}, minmax(0, 1fr)); } }\n`;
+    }
+    return <style>{css}</style>;
+  }, [breakpoints, uniqueClass]);
+
+  return (
+    <>
+      {styleTag}
+      <div className={`${uniqueClass} ${className}`}>{children}</div>
+    </>
+  );
+};
+
+GridForm.displayName = "GridForm";
+
+export default GridForm;

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

@@ -41,12 +41,14 @@ PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
   isActive?: boolean;
+  isDisabled?: boolean;
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">;
 
 const PaginationLink = ({
   className,
   isActive,
+  isDisabled,
   size = "icon",
   ...props
 }: PaginationLinkProps) => (
@@ -54,10 +56,11 @@ const PaginationLink = ({
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isDisabled ? "disabled" : isActive ? "outline" : "ghost",
         size,
       }),
       className,
+      "cursor-pointer select-none",
     )}
     {...props}
   />

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Input } from "./input";
+import { SearchIcon } from "../icons/SearchIcon";
+import { cn } from "@/util/utils";
+
+interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  className?: string;
+  label?: string;
+}
+
+export const Search = React.forwardRef<HTMLInputElement, SearchProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = "Search...",
+      className,
+      label = "Search",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className={cn("min-w-6rem relative flex items-center", className)}>
+        <label htmlFor={props.id} className="sr-only">
+          {label}
+        </label>
+        <span className="pointer-events-none absolute left-3 text-muted-foreground">
+          <SearchIcon className="h-4 w-4" />
+        </span>
+        <Input
+          ref={ref}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className={cn(
+            "h-full rounded-sm py-3.5 pl-10",
+            props.disabled && "opacity-50",
+          )}
+          aria-label={label}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Search.displayName = "Search";
+
+export default Search;