diff --git a/apps/webapp/app/components/primitives/DurationPicker.tsx b/apps/webapp/app/components/primitives/DurationPicker.tsx
new file mode 100644
index 0000000000..bf405dee36
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index c7aab7cb09..14baeca1a3 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/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
diff --git a/apps/webapp/app/components/runs/v3/RunTagInput.tsx b/apps/webapp/app/components/runs/v3/RunTagInput.tsx
new file mode 100644
index 0000000000..e6fb96c323
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index c9d59a126b..f73bfb6b0f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -1,17 +1,17 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { BeakerIcon } from "@heroicons/react/20/solid";
-import { Form, useActionData, useSubmit } from "@remix-run/react";
+import { RectangleStackIcon } from "@heroicons/react/20/solid";
+import { Form, useActionData, useSubmit, useFetcher } from "@remix-run/react";
 import { type ActionFunction, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
-import { type TaskRunStatus } from "@trigger.dev/database";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { JSONEditor } from "~/components/code/JSONEditor";
-import { EnvironmentCombo, EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
+import { Badge } from "~/components/primitives/Badge";
 import { Button } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
 import { DateField } from "~/components/primitives/DateField";
-import { DateTime } from "~/components/primitives/DateTime";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormError } from "~/components/primitives/FormError";
 import { Header2 } from "~/components/primitives/Headers";
@@ -19,17 +19,16 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
+import { DurationPicker } from "~/components/primitives/DurationPicker";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { RadioButtonCircle } from "~/components/primitives/RadioButton";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
-import { Select } from "~/components/primitives/Select";
+import { Select, SelectItem } from "~/components/primitives/Select";
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextLink } from "~/components/primitives/TextLink";
-import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import { TimezoneList } from "~/components/scheduled/timezones";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useSearchParams } from "~/hooks/useSearchParam";
@@ -53,7 +52,7 @@ import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils
 import { TestTaskService } from "~/v3/services/testTask.server";
 import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
 import { TestTaskData } from "~/v3/testTask";
-
+import { RunTagInput } from "~/components/runs/v3/RunTagInput";
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const { projectParam, organizationSlug, envParam, taskParam } = v3TaskParamsSchema.parse(params);
@@ -189,7 +188,6 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
   const tab = value("tab");
 
   //form submission
-  const submit = useSubmit();
   const lastSubmission = useActionData();
 
   //recent runs
@@ -216,43 +214,62 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
 
   const currentMetadataJson = useRef<string>(defaultMetadataJson);
 
-  const submitForm = useCallback(
-    (e: React.FormEvent<HTMLFormElement>) => {
-      submit(
-        {
-          triggerSource: "STANDARD",
-          payload: currentPayloadJson.current,
-          metadata: currentMetadataJson.current,
-          taskIdentifier: task.taskIdentifier,
-          environmentId: environment.id,
-        },
-        {
-          action: "",
-          method: "post",
-        }
-      );
-      e.preventDefault();
+  const fetcher = useFetcher();
+  const [
+    form,
+    {
+      environmentId,
+      payload,
+      metadata,
+      taskIdentifier,
+      delaySeconds,
+      ttlSeconds,
+      idempotencyKey,
+      idempotencyKeyTTLSeconds,
+      queue,
+      concurrencyKey,
+      maxAttempts,
+      maxDurationSeconds,
+      triggerSource,
+      tags,
+      version,
     },
-    [currentPayloadJson, currentMetadataJson, task]
-  );
-
-  const [form, { environmentId, payload }] = useForm({
+  ] = useForm({
     id: "test-task",
     // TODO: type this
     lastSubmission: lastSubmission as any,
+    onSubmit(event, { formData }) {
+      event.preventDefault();
+
+      formData.set(payload.name, currentPayloadJson.current);
+      formData.set(metadata.name, currentMetadataJson.current);
+
+      fetcher.submit(formData, { method: "POST" });
+    },
     onValidate({ formData }) {
       return parse(formData, { schema: TestTaskData });
     },
   });
 
+  // fetch them in the loader
+  const dummyQueues = [
+    { value: "default", label: "default", type: "task" as const, disabled: false },
+    { value: "high-priority", label: "high-priority", type: "custom" as const, disabled: false },
+    { value: "background", label: "background", type: "custom" as const, disabled: false },
+    { value: "paused-queue", label: "paused-queue", type: "task" as const, disabled: true },
+    {
+      value: "email-processing",
+      label: "email-processing",
+      type: "custom" as const,
+      disabled: false,
+    },
+  ];
+
   return (
-    <Form
-      className="grid h-full max-h-full grid-rows-[1fr_auto]"
-      method="post"
-      {...form.props}
-      onSubmit={(e) => submitForm(e)}
-    >
-      <input type="hidden" name="triggerSource" value={"STANDARD"} />
+    <Form className="grid h-full max-h-full grid-rows-[1fr_auto]" method="post" {...form.props}>
+      <input {...conform.input(taskIdentifier, { type: "hidden" })} value={task.taskIdentifier} />
+      <input {...conform.input(environmentId, { type: "hidden" })} value={environment.id} />
+      <input {...conform.input(triggerSource, { type: "hidden" })} value={"STANDARD"} />
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel id="test-task-main" min="100px" default="60%">
           <div className="flex h-full flex-col overflow-hidden bg-charcoal-900">
@@ -321,18 +338,118 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
           </div>
         </ResizablePanel>
         <ResizableHandle id="test-task-handle" />
-        <ResizablePanel id="test-task-inspector" min="100px">
-          <RecentPayloads
-            runs={runs}
-            selectedId={selectedCodeSampleId}
-            onSelected={(id) => {
-              const run = runs.find((r) => r.id === id);
-              if (!run) return;
-              setPayload(run.payload);
-              run.seedMetadata && setMetadata(run.seedMetadata);
-              setSelectedCodeSampleId(id);
-            }}
-          />
+        <ResizablePanel id="test-task-options" min="200px">
+          <div className="flex h-full flex-col gap-2">
+            <div className="flex min-h-[39px] items-center border-b border-grid-dimmed px-3">
+              <Header2>Options</Header2>
+            </div>
+            <Fieldset className="grow overflow-y-scroll px-3 pb-4 pt-1">
+              <InputGroup>
+                <Label>Delay</Label>
+                <DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
+                <FormError id={delaySeconds.errorId}>{delaySeconds.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label>TTL</Label>
+                <DurationPicker name={ttlSeconds.name} id={ttlSeconds.id} />
+                <FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={idempotencyKey.id}>Idempotency key</Label>
+                <Input {...conform.input(idempotencyKey, { type: "text" })} variant="small" />
+                <FormError id={idempotencyKey.errorId}>{idempotencyKey.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label>Idempotency key TTL</Label>
+                <DurationPicker
+                  name={idempotencyKeyTTLSeconds.name}
+                  id={idempotencyKeyTTLSeconds.id}
+                />
+                <FormError id={idempotencyKeyTTLSeconds.errorId}>
+                  {idempotencyKeyTTLSeconds.error}
+                </FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={queue.id}>Queue</Label>
+                <Select
+                  //   {...conform.select(queue)}
+                  placeholder="Select queue"
+                  variant="tertiary/small"
+                  dropdownIcon
+                  items={dummyQueues}
+                  filter={{ keys: ["label"] }}
+                >
+                  {(matches) =>
+                    matches.map((queue) => (
+                      <SelectItem
+                        key={queue.value}
+                        value={queue.value}
+                        disabled={queue.disabled}
+                        icon={
+                          queue.type === "task" ? (
+                            <TaskIcon className="size-4 text-blue-500" />
+                          ) : (
+                            <RectangleStackIcon className="size-4 text-purple-500" />
+                          )
+                        }
+                      >
+                        <div className="flex w-full items-center justify-between">
+                          <span className={queue.disabled ? "opacity-50" : undefined}>
+                            {queue.label}
+                          </span>
+                          {queue.disabled && (
+                            <Badge variant="extra-small" className="ml-1 text-warning">
+                              Paused
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))
+                  }
+                </Select>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={concurrencyKey.id}>Concurrency key</Label>
+                <Input {...conform.input(concurrencyKey, { type: "text" })} variant="small" />
+                <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={maxAttempts.id}>Max attempts</Label>
+                <Input
+                  {...conform.input(maxAttempts, { type: "number" })}
+                  className="[&::-webkit-inner-spin-button]:appearance-none"
+                  variant="small"
+                  min={0}
+                />
+              </InputGroup>
+              <InputGroup>
+                <Label>Max duration</Label>
+                <DurationPicker name={maxDurationSeconds.name} id={maxDurationSeconds.id} />
+                <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={tags.id}>Tags</Label>
+                <RunTagInput name={tags.name} id={tags.id} variant="small" />
+                <FormError id={tags.errorId}>{tags.error}</FormError>
+              </InputGroup>
+              <InputGroup>
+                <Label htmlFor={version.id}>Version</Label>
+                <Select
+                  {...conform.select(version)}
+                  defaultValue="latest"
+                  variant="tertiary/small"
+                  placeholder="Select version"
+                  dropdownIcon
+                >
+                  <SelectItem key="latest" value="latest">
+                    latest
+                  </SelectItem>
+                </Select>
+                <FormError id={version.errorId}>{version.error}</FormError>
+              </InputGroup>
+              <FormError>{form.error}</FormError>
+            </Fieldset>
+          </div>
         </ResizablePanel>
       </ResizablePanelGroup>
       <div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
@@ -423,118 +540,98 @@ function ScheduledTaskForm({
         {...conform.input(environmentId, { type: "hidden" })}
         value={environment.id}
       />
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel id="test-task-main" min="100px" default="70%">
-          <div className="p-3">
-            <Fieldset>
-              <InputGroup>
-                <Label htmlFor={timestamp.id}>Timestamp UTC</Label>
-                <input
-                  type="hidden"
-                  {...conform.input(timestamp, { type: "hidden" })}
-                  value={timestampValue?.toISOString() ?? ""}
-                />
-                <DateField
-                  label="Timestamp UTC"
-                  defaultValue={timestampValue}
-                  onValueChange={(val) => setTimestampValue(val)}
-                  granularity="second"
-                  showNowButton
-                  variant="medium"
-                  utc
-                />
-                <Hint>
-                  This is the timestamp of the CRON, it will come through to your run in the
-                  payload.
-                </Hint>
-                <FormError id={timestamp.errorId}>{timestamp.error}</FormError>
-              </InputGroup>
-              <InputGroup>
-                <Label htmlFor={lastTimestamp.id} required={false}>
-                  Last timestamp UTC
-                </Label>
-                <input
-                  type="hidden"
-                  {...conform.input(lastTimestamp, { type: "hidden" })}
-                  value={lastTimestampValue?.toISOString() ?? ""}
-                />
-                <DateField
-                  label="Last timestamp UTC"
-                  defaultValue={lastTimestampValue}
-                  onValueChange={(val) => setLastTimestampValue(val)}
-                  granularity="second"
-                  showNowButton
-                  showClearButton
-                  variant="medium"
-                  utc
-                />
-                <Hint>
-                  This is the timestamp of the previous run. You can use this in your code to find
-                  new data since the previous run. This can be undefined if there hasn't been a
-                  previous run.
-                </Hint>
-                <FormError id={lastTimestamp.errorId}>{lastTimestamp.error}</FormError>
-              </InputGroup>
-              <InputGroup>
-                <Label htmlFor={timezone.id}>Timezone</Label>
-                <Select
-                  {...conform.select(timezone)}
-                  placeholder="Select a timezone"
-                  defaultValue={timezoneValue}
-                  value={timezoneValue}
-                  setValue={(e) => {
-                    if (Array.isArray(e)) return;
-                    setTimezoneValue(e);
-                  }}
-                  items={possibleTimezones}
-                  filter={{ keys: [(item) => item.replace(/\//g, " ").replace(/_/g, " ")] }}
-                  dropdownIcon
-                  variant="tertiary/medium"
-                >
-                  {(matches) => <TimezoneList timezones={matches} />}
-                </Select>
-                <Hint>
-                  The Timestamp and Last timestamp are in UTC so this just changes the timezone
-                  string that comes through in the payload.
-                </Hint>
-                <FormError id={timezone.errorId}>{timezone.error}</FormError>
-              </InputGroup>
-              <InputGroup>
-                <Label required={false} htmlFor={externalId.id}>
-                  External ID
-                </Label>
-                <Input
-                  {...conform.input(externalId, { type: "text" })}
-                  placeholder="Optionally specify your own ID, e.g. user id"
-                  value={externalIdValue ?? ""}
-                  onChange={(e) => setExternalIdValue(e.target.value)}
-                />
-                <Hint>
-                  Optionally, you can specify your own IDs (like a user ID) and then use it inside
-                  the run function of your task. This allows you to have per-user CRON tasks.{" "}
-                  <TextLink to={docsPath("v3/tasks-scheduled")}>Read the docs.</TextLink>
-                </Hint>
-                <FormError id={externalId.errorId}>{externalId.error}</FormError>
-              </InputGroup>
-            </Fieldset>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle id="test-task-handle" />
-        <ResizablePanel id="test-task-inspector" min="100px">
-          <RecentPayloads
-            runs={runs}
-            selectedId={selectedCodeSampleId}
-            onSelected={(id) => {
-              const run = runs.find((r) => r.id === id);
-              if (!run) return;
-              setSelectedCodeSampleId(id);
-              setTimestampValue(run.payload.timestamp);
-              setLastTimestampValue(run.payload.lastTimestamp);
-              setExternalIdValue(run.payload.externalId);
-            }}
-          />
-        </ResizablePanel>
-      </ResizablePanelGroup>
+      <div className="p-3">
+        <Fieldset>
+          <InputGroup>
+            <Label htmlFor={timestamp.id}>Timestamp UTC</Label>
+            <input
+              type="hidden"
+              {...conform.input(timestamp, { type: "hidden" })}
+              value={timestampValue?.toISOString() ?? ""}
+            />
+            <DateField
+              label="Timestamp UTC"
+              defaultValue={timestampValue}
+              onValueChange={(val) => setTimestampValue(val)}
+              granularity="second"
+              showNowButton
+              variant="medium"
+              utc
+            />
+            <Hint>
+              This is the timestamp of the CRON, it will come through to your run in the payload.
+            </Hint>
+            <FormError id={timestamp.errorId}>{timestamp.error}</FormError>
+          </InputGroup>
+          <InputGroup>
+            <Label htmlFor={lastTimestamp.id} required={false}>
+              Last timestamp UTC
+            </Label>
+            <input
+              type="hidden"
+              {...conform.input(lastTimestamp, { type: "hidden" })}
+              value={lastTimestampValue?.toISOString() ?? ""}
+            />
+            <DateField
+              label="Last timestamp UTC"
+              defaultValue={lastTimestampValue}
+              onValueChange={(val) => setLastTimestampValue(val)}
+              granularity="second"
+              showNowButton
+              showClearButton
+              variant="medium"
+              utc
+            />
+            <Hint>
+              This is the timestamp of the previous run. You can use this in your code to find new
+              data since the previous run. This can be undefined if there hasn't been a previous
+              run.
+            </Hint>
+            <FormError id={lastTimestamp.errorId}>{lastTimestamp.error}</FormError>
+          </InputGroup>
+          <InputGroup>
+            <Label htmlFor={timezone.id}>Timezone</Label>
+            <Select
+              {...conform.select(timezone)}
+              placeholder="Select a timezone"
+              defaultValue={timezoneValue}
+              value={timezoneValue}
+              setValue={(e) => {
+                if (Array.isArray(e)) return;
+                setTimezoneValue(e);
+              }}
+              items={possibleTimezones}
+              filter={{ keys: [(item) => item.replace(/\//g, " ").replace(/_/g, " ")] }}
+              dropdownIcon
+              variant="tertiary/medium"
+            >
+              {(matches) => <TimezoneList timezones={matches} />}
+            </Select>
+            <Hint>
+              The Timestamp and Last timestamp are in UTC so this just changes the timezone string
+              that comes through in the payload.
+            </Hint>
+            <FormError id={timezone.errorId}>{timezone.error}</FormError>
+          </InputGroup>
+          <InputGroup>
+            <Label required={false} htmlFor={externalId.id}>
+              External ID
+            </Label>
+            <Input
+              {...conform.input(externalId, { type: "text" })}
+              placeholder="Optionally specify your own ID, e.g. user id"
+              value={externalIdValue ?? ""}
+              onChange={(e) => setExternalIdValue(e.target.value)}
+            />
+            <Hint>
+              Optionally, you can specify your own IDs (like a user ID) and then use it inside the
+              run function of your task. This allows you to have per-user CRON tasks.{" "}
+              <TextLink to={docsPath("v3/tasks-scheduled")}>Read the docs.</TextLink>
+            </Hint>
+            <FormError id={externalId.errorId}>{externalId.error}</FormError>
+          </InputGroup>
+        </Fieldset>
+      </div>
       <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed p-2">
         <div className="flex items-center gap-1">
           <Paragraph variant="small" className="whitespace-nowrap">
@@ -554,55 +651,3 @@ function ScheduledTaskForm({
     </Form>
   );
 }
-
-function RecentPayloads({
-  runs,
-  selectedId,
-  onSelected,
-}: {
-  runs: {
-    id: string;
-    createdAt: Date;
-    number: number;
-    status: TaskRunStatus;
-  }[];
-  selectedId?: string;
-  onSelected: (id: string) => void;
-}) {
-  return (
-    <div className="flex flex-col gap-2 px-3">
-      <div className="flex h-10 items-center border-b border-grid-dimmed">
-        <Header2>Recent payloads</Header2>
-      </div>
-      {runs.length === 0 ? (
-        <Callout variant="info">
-          Recent payloads will show here once you've completed a Run.
-        </Callout>
-      ) : (
-        <div className="flex flex-col divide-y divide-charcoal-850">
-          {runs.map((run) => (
-            <button
-              key={run.id}
-              type="button"
-              onClick={(e) => {
-                onSelected(run.id);
-              }}
-              className="flex items-center gap-2 px-2 py-2"
-            >
-              <RadioButtonCircle checked={run.id === selectedId} />
-              <div className="flex flex-col items-start">
-                <Paragraph variant="small">
-                  <DateTime date={run.createdAt} />
-                </Paragraph>
-                <div className="flex items-center gap-1 text-xs text-text-dimmed">
-                  <div>Run #{run.number}</div>
-                  <TaskRunStatusCombo status={run.status} />
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/webapp/app/v3/services/testTask.server.ts b/apps/webapp/app/v3/services/testTask.server.ts
index 740f64156e..f799acc2d4 100644
--- a/apps/webapp/app/v3/services/testTask.server.ts
+++ b/apps/webapp/app/v3/services/testTask.server.ts
@@ -1,6 +1,6 @@
 import { stringifyIO } from "@trigger.dev/core/v3";
-import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
-import { TestTaskData } from "../testTask";
+import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { type TestTaskData } from "../testTask";
 import { BaseService } from "./baseService.server";
 import { TriggerTaskService } from "./triggerTask.server";
 
@@ -15,6 +15,17 @@ export class TestTaskService extends BaseService {
           options: {
             test: true,
             metadata: data.metadata,
+            delay: data.delaySeconds ? new Date(Date.now() + data.delaySeconds * 1000) : undefined,
+            ttl: data.ttlSeconds,
+            idempotencyKey: data.idempotencyKey,
+            idempotencyKeyTTL: data.idempotencyKeyTTLSeconds
+              ? `${data.idempotencyKeyTTLSeconds}s`
+              : undefined,
+            queue: data.queue ? { name: data.queue } : undefined,
+            concurrencyKey: data.concurrencyKey,
+            maxAttempts: data.maxAttempts,
+            maxDuration: data.maxDurationSeconds,
+            tags: data.tags,
           },
         });
 
diff --git a/apps/webapp/app/v3/testTask.ts b/apps/webapp/app/v3/testTask.ts
index 764f6b09f7..81e838ea43 100644
--- a/apps/webapp/app/v3/testTask.ts
+++ b/apps/webapp/app/v3/testTask.ts
@@ -56,6 +56,43 @@ export const TestTaskData = z
     z.object({
       taskIdentifier: z.string(),
       environmentId: z.string(),
+      delaySeconds: z
+        .number()
+        .min(0)
+        .optional()
+        .transform((val) => (val === 0 ? undefined : val)),
+      ttlSeconds: z
+        .number()
+        .min(0)
+        .optional()
+        .transform((val) => (val === 0 ? undefined : val)),
+      idempotencyKey: z.string().optional(),
+      idempotencyKeyTTLSeconds: z
+        .number()
+        .min(0)
+        .optional()
+        .transform((val) => (val === 0 ? undefined : val)),
+      queue: z.string().optional(),
+      concurrencyKey: z.string().optional(),
+      maxAttempts: z.number().min(1).optional(),
+      maxDurationSeconds: z
+        .number()
+        .min(0)
+        .optional()
+        .transform((val) => (val === 0 ? undefined : val)),
+      tags: z
+        .string()
+        .optional()
+        .transform((val) => {
+          if (!val || val.trim() === "") {
+            return undefined;
+          }
+          return val
+            .split(",")
+            .map((tag) => tag.trim())
+            .filter((tag) => tag.length > 0);
+        }),
+      version: z.string().optional(),
     })
   );