Expose all run options in the test run page

apps/webapp/app/components/primitives/DurationPicker.tsx

@@ -0,0 +1,177 @@
+import { Input } from "~/components/primitives/Input";
+import { cn } from "~/utils/cn";
+import React, { useRef, useState, useEffect } from "react";
+import { Button } from "./Buttons";
+
+export interface DurationPickerProps {
+  id?: string; // used for the hidden input for form submission
+  name?: string; // used for the hidden input for form submission
+  defaultValueSeconds?: number;
+  onChange?: (totalSeconds: number) => void;
+  variant?: "small" | "medium";
+  showClearButton?: boolean;
+}
+
+export function DurationPicker({
+  name,
+  defaultValueSeconds: defaultValue = 0,
+  onChange,
+  variant = "small",
+  showClearButton = true,
+}: DurationPickerProps) {
+  const defaultHours = Math.floor(defaultValue / 3600);
+  const defaultMinutes = Math.floor((defaultValue % 3600) / 60);
+  const defaultSeconds = defaultValue % 60;
+
+  const [hours, setHours] = useState<number>(defaultHours);
+  const [minutes, setMinutes] = useState<number>(defaultMinutes);
+  const [seconds, setSeconds] = useState<number>(defaultSeconds);
+
+  const minuteRef = useRef<HTMLInputElement>(null);
+  const hourRef = useRef<HTMLInputElement>(null);
+  const secondRef = useRef<HTMLInputElement>(null);
+
+  const totalSeconds = hours * 3600 + minutes * 60 + seconds;
+
+  const isEmpty = hours === 0 && minutes === 0 && seconds === 0;
+
+  useEffect(() => {
+    onChange?.(totalSeconds);
+  }, [totalSeconds, onChange]);
+
+  const handleHoursChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    setHours(Math.max(0, value));
+  };
+
+  const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    if (value >= 60) {
+      setHours((prev) => prev + Math.floor(value / 60));
+      setMinutes(value % 60);
+      return;
+    }
+
+    setMinutes(Math.max(0, Math.min(59, value)));
+  };
+
+  const handleSecondsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || 0;
+    if (value >= 60) {
+      setMinutes((prev) => {
+        const newMinutes = prev + Math.floor(value / 60);
+        if (newMinutes >= 60) {
+          setHours((prevHours) => prevHours + Math.floor(newMinutes / 60));
+          return newMinutes % 60;
+        }
+        return newMinutes;
+      });
+      setSeconds(value % 60);
+      return;
+    }
+
+    setSeconds(Math.max(0, Math.min(59, value)));
+  };
+
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    nextRef?: React.RefObject<HTMLInputElement>,
+    prevRef?: React.RefObject<HTMLInputElement>
+  ) => {
+    if (e.key === "Tab") {
+      return;
+    }
+
+    if (e.key === "ArrowRight" && nextRef) {
+      e.preventDefault();
+      nextRef.current?.focus();
+      nextRef.current?.select();
+      return;
+    }
+
+    if (e.key === "ArrowLeft" && prevRef) {
+      e.preventDefault();
+      prevRef.current?.focus();
+      prevRef.current?.select();
+      return;
+    }
+  };
+
+  const clearDuration = () => {
+    setHours(0);
+    setMinutes(0);
+    setSeconds(0);
+    hourRef.current?.focus();
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <input type="hidden" name={name} value={totalSeconds} />
+
+      <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={hourRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={hours.toString()}
+            onChange={handleHoursChange}
+            onKeyDown={(e) => handleKeyDown(e, minuteRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">h</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={minuteRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={minutes.toString()}
+            onChange={handleMinutesChange}
+            onKeyDown={(e) => handleKeyDown(e, secondRef, hourRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            max={59}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">m</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Input
+            variant={variant}
+            ref={secondRef}
+            className={cn(
+              "w-10 text-center font-mono tabular-nums caret-transparent [&::-webkit-inner-spin-button]:appearance-none",
+              isEmpty && "text-text-dimmed"
+            )}
+            value={seconds.toString()}
+            onChange={handleSecondsChange}
+            onKeyDown={(e) => handleKeyDown(e, undefined, minuteRef)}
+            onFocus={(e) => e.target.select()}
+            type="number"
+            min={0}
+            max={59}
+            inputMode="numeric"
+          />
+          <span className="text-sm text-text-dimmed">s</span>
+        </div>
+      </div>
+
+      {showClearButton && (
+        <Button type="button" variant={`tertiary/${variant}`} onClick={clearDuration}>
+          Clear
+        </Button>
+      )}
+    </div>
+  );
+}

apps/webapp/app/components/runs/v3/RunTag.tsx

@@ -3,11 +3,21 @@ import tagLeftPath from "./tag-left.svg";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { Link } from "@remix-run/react";
 import { cn } from "~/utils/cn";
-import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { ClipboardCheckIcon, ClipboardIcon, XIcon } from "lucide-react";
 
 type Tag = string | { key: string; value: string };
 
-export function RunTag({ tag, to, tooltip }: { tag: string; to?: string; tooltip?: string }) {
+export function RunTag({
+  tag,
+  to,
+  tooltip,
+  action = { type: "copy" },
+}: {
+  tag: string;
+  action?: { type: "copy" } | { type: "delete"; onDelete: (tag: string) => void };
+  to?: string;
+  tooltip?: string;
+}) {
   const tagResult = useMemo(() => splitTag(tag), [tag]);
   const [isHovered, setIsHovered] = useState(false);
 
@@ -57,7 +67,11 @@ export function RunTag({ tag, to, tooltip }: { tag: string; to?: string; tooltip
   return (
     <div className="group relative inline-flex shrink-0" onMouseLeave={() => setIsHovered(false)}>
       {tagContent}
-      <CopyButton textToCopy={tag} isHovered={isHovered} />
+      {action.type === "delete" ? (
+        <DeleteButton tag={tag} onDelete={action.onDelete} isHovered={isHovered} />
+      ) : (
+        <CopyButton textToCopy={tag} isHovered={isHovered} />
+      )}
     </div>
   );
 }
@@ -105,6 +119,45 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
   );
 }
 
+function DeleteButton({
+  tag,
+  onDelete,
+  isHovered,
+}: {
+  tag: string;
+  onDelete: (tag: string) => void;
+  isHovered: boolean;
+}) {
+  const handleDelete = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDelete(tag);
+    },
+    [tag, onDelete]
+  );
+
+  return (
+    <SimpleTooltip
+      button={
+        <span
+          onClick={handleDelete}
+          onMouseDown={(e) => e.stopPropagation()}
+          className={cn(
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            isHovered ? "flex" : "hidden",
+            "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-rose-400"
+          )}
+        >
+          <XIcon className="size-3.5" />
+        </span>
+      }
+      content="Remove tag"
+      disableHoverableContent
+    />
+  );
+}
+
 /** Takes a string and turns it into a tag
  *
  * If the string has 12 or fewer alpha characters followed by an underscore or colon then we return an object with a key and value

apps/webapp/app/components/runs/v3/RunTagInput.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useState, type KeyboardEvent } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Input } from "~/components/primitives/Input";
+import { RunTag } from "./RunTag";
+
+interface TagInputProps {
+  id?: string; // used for the hidden input for form submission
+  name?: string; // used for the hidden input for form submission
+  defaultTags?: string[];
+  placeholder?: string;
+  variant?: "small" | "medium";
+  onTagsChange?: (tags: string[]) => void;
+}
+
+export function RunTagInput({
+  id,
+  name,
+  defaultTags = [],
+  placeholder = "Type and press Enter to add tags",
+  variant = "small",
+  onTagsChange,
+}: TagInputProps) {
+  const [tags, setTags] = useState<string[]>(defaultTags);
+  const [inputValue, setInputValue] = useState("");
+
+  const addTag = useCallback(
+    (tagText: string) => {
+      const trimmedTag = tagText.trim();
+      if (trimmedTag && !tags.includes(trimmedTag)) {
+        const newTags = [...tags, trimmedTag];
+        setTags(newTags);
+        onTagsChange?.(newTags);
+      }
+      setInputValue("");
+    },
+    [tags, onTagsChange]
+  );
+
+  const removeTag = useCallback(
+    (tagToRemove: string) => {
+      const newTags = tags.filter((tag) => tag !== tagToRemove);
+      setTags(newTags);
+      onTagsChange?.(newTags);
+    },
+    [tags, onTagsChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addTag(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+        removeTag(tags[tags.length - 1]);
+      }
+    },
+    [inputValue, addTag, removeTag, tags]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input type="hidden" name={name} id={id} value={tags.join(",")} />
+
+      <Input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        variant={variant}
+      />
+
+      {tags.length > 0 && (
+        <div className="mt-1 flex flex-wrap items-center gap-1 text-xs">
+          <AnimatePresence mode="popLayout">
+            {tags.map((tag, i) => (
+              <motion.div
+                key={tag}
+                initial={{
+                  opacity: 0,
+                  scale: 0.8,
+                }}
+                animate={{
+                  opacity: 1,
+                  scale: 1,
+                }}
+                exit={{
+                  opacity: 0,
+                  scale: 0.7,
+                  y: -10,
+                  transition: {
+                    duration: 0.15,
+                    ease: "easeOut",
+                  },
+                }}
+                transition={{
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 25,
+                  duration: 0.15,
+                }}
+              >
+                <RunTag tag={tag} action={{ type: "delete", onDelete: removeTag }} />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </div>
+      )}
+    </div>
+  );
+}