From 617134969e129746b4b5f34c5a6ac07a74829fad Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Wed, 9 Jul 2025 13:58:46 +0200
Subject: [PATCH 1/5] Switch to sexy scrollbars in the options pane

---
 .../route.tsx                                              | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

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 0541957143..4eec8bf567 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
@@ -19,7 +19,6 @@ import { Label } from "~/components/primitives/Label";
 import { DurationPicker } from "~/components/primitives/DurationPicker";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -412,8 +411,8 @@ function StandardTaskForm({
           </div>
         </ResizablePanel>
         <ResizableHandle id="test-task-handle" />
-        <ResizablePanel id="test-task-options" min="285px" default="285px" max="360px">
-          <div className="h-full overflow-y-scroll">
+        <ResizablePanel id="test-task-options" min="300px" default="300px" max="360px">
+          <div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <Fieldset className="px-3 py-3">
               <InputGroup>
                 <Label variant="small">Delay</Label>
@@ -1120,7 +1119,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
           Recent runs
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="min-w-[279px] p-0" align="end" sideOffset={6}>
+      <PopoverContent className="min-w-[294px] p-0" align="end" sideOffset={6}>
         <div className="max-h-80 overflow-y-auto">
           <div className="p-1">
             {runs.map((run) => (

From 864dfb5b5213dfabdf4f18795261d99e9973bcb6 Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Wed, 9 Jul 2025 14:24:36 +0200
Subject: [PATCH 2/5] Add missing field descriptions

---
 .../route.tsx                                 | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

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 4eec8bf567..95102b189b 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
@@ -417,6 +417,7 @@ function StandardTaskForm({
               <InputGroup>
                 <Label variant="small">Delay</Label>
                 <DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
+                <Hint>The run will be delayed by the specified duration.</Hint>
                 <FormError id={delaySeconds.errorId}>{delaySeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -446,6 +447,7 @@ function StandardTaskForm({
                     name={queue.name}
                     id={queue.id}
                     placeholder="Select queue"
+                    heading="Filter queues"
                     variant="tertiary/small"
                     dropdownIcon
                     items={queueItems}
@@ -480,6 +482,7 @@ function StandardTaskForm({
                     }
                   </Select>
                 )}
+                <Hint>The run will be assigned to the selected queue.</Hint>
                 <FormError id={queue.errorId}>{queue.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -522,6 +525,7 @@ function StandardTaskForm({
                     }
                   }}
                 />
+                <Hint>Failed runs will be retried up to the specified number of attempts.</Hint>
                 <FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -532,6 +536,7 @@ function StandardTaskForm({
                   value={maxDurationValue}
                   onChange={setMaxDurationValue}
                 />
+                <Hint>Override the maximum compute time limit for the run.</Hint>
                 <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -551,7 +556,7 @@ function StandardTaskForm({
                   name={idempotencyKeyTTLSeconds.name}
                   id={idempotencyKeyTTLSeconds.id}
                 />
-                <Hint>By default, idempotency keys expire after 30 days.</Hint>
+                <Hint>Keys expire after 30 days by default.</Hint>
                 <FormError id={idempotencyKeyTTLSeconds.errorId}>
                   {idempotencyKeyTTLSeconds.error}
                 </FormError>
@@ -567,7 +572,7 @@ function StandardTaskForm({
                   onChange={(e) => setConcurrencyKeyValue(e.target.value)}
                 />
                 <Hint>
-                  Concurrency keys enable you limit concurrency by creating a separate queue for
+                  Concurrency keys enable you to limit concurrency by creating a separate queue for
                   each value of the key.
                 </Hint>
                 <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
@@ -595,7 +600,7 @@ function StandardTaskForm({
                     </SelectItem>
                   ))}
                 </Select>
-                <Hint>This lets you override the machine preset specified in the task.</Hint>
+                <Hint>Override the machine preset specified in the task.</Hint>
                 <FormError id={machine.errorId}>{machine.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -616,8 +621,10 @@ function StandardTaskForm({
                     </SelectItem>
                   ))}
                 </Select>
-                {disableVersionSelection && (
+                {disableVersionSelection ? (
                   <Hint>Only the latest version is available in the development environment.</Hint>
+                ) : (
+                  <Hint>Select a specific version of the task.</Hint>
                 )}
                 <FormError id={version.errorId}>{version.error}</FormError>
               </InputGroup>
@@ -868,7 +875,7 @@ function ScheduledTaskForm({
             </Hint>
             <FormError id={externalId.errorId}>{externalId.error}</FormError>
           </InputGroup>
-          <div className="w-full border-b border-grid-bright"></div>
+          <div className="w-full border-b border-grid-bright" />
           <InputGroup>
             <Label htmlFor={ttlSeconds.id} variant="small">
               TTL
@@ -898,6 +905,7 @@ function ScheduledTaskForm({
                 name={queue.name}
                 id={queue.id}
                 placeholder="Select queue"
+                heading="Filter queues"
                 variant="tertiary/small"
                 dropdownIcon
                 items={queueItems}
@@ -932,6 +940,7 @@ function ScheduledTaskForm({
                 }
               </Select>
             )}
+            <Hint>The run will be assigned to the selected queue.</Hint>
             <FormError id={queue.errorId}>{queue.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -974,6 +983,7 @@ function ScheduledTaskForm({
                 }
               }}
             />
+            <Hint>Failed runs will be retried up to the specified number of attempts.</Hint>
             <FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -986,6 +996,7 @@ function ScheduledTaskForm({
               value={maxDurationValue}
               onChange={setMaxDurationValue}
             />
+            <Hint>Override the maximum compute time limit for the run.</Hint>
             <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1004,7 +1015,7 @@ function ScheduledTaskForm({
               Idempotency key TTL
             </Label>
             <DurationPicker name={idempotencyKeyTTLSeconds.name} id={idempotencyKeyTTLSeconds.id} />
-            <Hint>By default, idempotency keys expire after 30 days.</Hint>
+            <Hint>Keys expire after 30 days by default.</Hint>
             <FormError id={idempotencyKeyTTLSeconds.errorId}>
               {idempotencyKeyTTLSeconds.error}
             </FormError>
@@ -1020,7 +1031,7 @@ function ScheduledTaskForm({
               onChange={(e) => setConcurrencyKeyValue(e.target.value)}
             />
             <Hint>
-              Concurrency keys enable you limit concurrency by creating a separate queue for each
+              Concurrency keys enable you to limit concurrency by creating a separate queue for each
               value of the key.
             </Hint>
             <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
@@ -1048,7 +1059,7 @@ function ScheduledTaskForm({
                 </SelectItem>
               ))}
             </Select>
-            <Hint>This lets you override the machine preset specified in the task.</Hint>
+            <Hint>Override the machine preset specified in the task.</Hint>
             <FormError id={machine.errorId}>{machine.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1069,8 +1080,10 @@ function ScheduledTaskForm({
                 </SelectItem>
               ))}
             </Select>
-            {disableVersionSelection && (
+            {disableVersionSelection ? (
               <Hint>Only the latest version is available in the development environment.</Hint>
+            ) : (
+              <Hint>Select a specific version of the task.</Hint>
             )}
             <FormError id={version.errorId}>{version.error}</FormError>
           </InputGroup>

From 294db529a0f19239b138b3fb7cf5206cda9bc19b Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Wed, 9 Jul 2025 14:30:09 +0200
Subject: [PATCH 3/5] Add a run options link to the docs

---
 .../route.tsx                                             | 8 ++++++++
 1 file changed, 8 insertions(+)

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 95102b189b..92fe8d944b 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
@@ -414,6 +414,10 @@ function StandardTaskForm({
         <ResizablePanel id="test-task-options" min="300px" default="300px" max="360px">
           <div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <Fieldset className="px-3 py-3">
+              <Hint>
+                <TextLink to={docsPath("triggering#options")}>Run options</TextLink> enable you to
+                control the execution behavior of your task.
+              </Hint>
               <InputGroup>
                 <Label variant="small">Delay</Label>
                 <DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
@@ -876,6 +880,10 @@ function ScheduledTaskForm({
             <FormError id={externalId.errorId}>{externalId.error}</FormError>
           </InputGroup>
           <div className="w-full border-b border-grid-bright" />
+          <Hint>
+            <TextLink to={docsPath("triggering#options")}>Run options</TextLink> enable you to
+            control the execution behavior of your task.
+          </Hint>
           <InputGroup>
             <Label htmlFor={ttlSeconds.id} variant="small">
               TTL

From d2114b2ef3648ecc464566e7db065153a82bfee7 Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Wed, 9 Jul 2025 15:31:32 +0200
Subject: [PATCH 4/5] Make the copy for the field descriptions more concise

---
 .../route.tsx                                 | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

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 92fe8d944b..5246bd08fa 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
@@ -59,6 +59,7 @@ import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
 import { MachinePresetName } from "@trigger.dev/core/v3";
 import { TaskTriggerSourceIcon } from "~/components/runs/v3/TaskTriggerSource";
+import { Callout } from "~/components/primitives/Callout";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -415,13 +416,13 @@ function StandardTaskForm({
           <div className="h-full overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <Fieldset className="px-3 py-3">
               <Hint>
-                <TextLink to={docsPath("triggering#options")}>Run options</TextLink> enable you to
-                control the execution behavior of your task.
+                Options enable you to control the execution behavior of your task.{" "}
+                <TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
               </Hint>
               <InputGroup>
                 <Label variant="small">Delay</Label>
                 <DurationPicker name={delaySeconds.name} id={delaySeconds.id} />
-                <Hint>The run will be delayed by the specified duration.</Hint>
+                <Hint>Delays run by a specific duration.</Hint>
                 <FormError id={delaySeconds.errorId}>{delaySeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -432,7 +433,7 @@ function StandardTaskForm({
                   value={ttlValue}
                   onChange={setTtlValue}
                 />
-                <Hint>The run will expire if it hasn't started within the TTL (time to live).</Hint>
+                <Hint>Expires the run if it hasn't started within the TTL.</Hint>
                 <FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -486,7 +487,7 @@ function StandardTaskForm({
                     }
                   </Select>
                 )}
-                <Hint>The run will be assigned to the selected queue.</Hint>
+                <Hint>Assign run to a specific queue.</Hint>
                 <FormError id={queue.errorId}>{queue.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -500,7 +501,7 @@ function StandardTaskForm({
                   tags={tagsValue}
                   onTagsChange={setTagsValue}
                 />
-                <Hint>Tags enable you to easily filter runs.</Hint>
+                <Hint>Add tags to easily filter runs.</Hint>
                 <FormError id={tags.errorId}>{tags.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -529,7 +530,7 @@ function StandardTaskForm({
                     }
                   }}
                 />
-                <Hint>Failed runs will be retried up to the specified number of attempts.</Hint>
+                <Hint>Retries failed runs up to the specified number of attempts.</Hint>
                 <FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -540,7 +541,7 @@ function StandardTaskForm({
                   value={maxDurationValue}
                   onChange={setMaxDurationValue}
                 />
-                <Hint>Override the maximum compute time limit for the run.</Hint>
+                <Hint>Overrides the maximum compute time limit for the run.</Hint>
                 <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -576,8 +577,7 @@ function StandardTaskForm({
                   onChange={(e) => setConcurrencyKeyValue(e.target.value)}
                 />
                 <Hint>
-                  Concurrency keys enable you to limit concurrency by creating a separate queue for
-                  each value of the key.
+                  Limits concurrency by creating a separate queue for each value of the key.
                 </Hint>
                 <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
               </InputGroup>
@@ -604,7 +604,7 @@ function StandardTaskForm({
                     </SelectItem>
                   ))}
                 </Select>
-                <Hint>Override the machine preset specified in the task.</Hint>
+                <Hint>Overrides the machine preset.</Hint>
                 <FormError id={machine.errorId}>{machine.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -628,7 +628,7 @@ function StandardTaskForm({
                 {disableVersionSelection ? (
                   <Hint>Only the latest version is available in the development environment.</Hint>
                 ) : (
-                  <Hint>Select a specific version of the task.</Hint>
+                  <Hint>Runs task on a specific version.</Hint>
                 )}
                 <FormError id={version.errorId}>{version.error}</FormError>
               </InputGroup>
@@ -881,8 +881,8 @@ function ScheduledTaskForm({
           </InputGroup>
           <div className="w-full border-b border-grid-bright" />
           <Hint>
-            <TextLink to={docsPath("triggering#options")}>Run options</TextLink> enable you to
-            control the execution behavior of your task.
+            Options enable you to control the execution behavior of your task.{" "}
+            <TextLink to={docsPath("triggering#options")}>Read the docs.</TextLink>
           </Hint>
           <InputGroup>
             <Label htmlFor={ttlSeconds.id} variant="small">
@@ -894,7 +894,7 @@ function ScheduledTaskForm({
               value={ttlValue}
               onChange={setTtlValue}
             />
-            <Hint>The run will expire if it hasn't started within the TTL (time to live).</Hint>
+            <Hint>Expires the run if it hasn't started within the TTL.</Hint>
             <FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -948,7 +948,7 @@ function ScheduledTaskForm({
                 }
               </Select>
             )}
-            <Hint>The run will be assigned to the selected queue.</Hint>
+            <Hint>Assign run to a specific queue.</Hint>
             <FormError id={queue.errorId}>{queue.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -962,7 +962,7 @@ function ScheduledTaskForm({
               tags={tagsValue}
               onTagsChange={setTagsValue}
             />
-            <Hint>Tags enable you to easily filter runs.</Hint>
+            <Hint>Add tags to easily filter runs.</Hint>
             <FormError id={tags.errorId}>{tags.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -991,7 +991,7 @@ function ScheduledTaskForm({
                 }
               }}
             />
-            <Hint>Failed runs will be retried up to the specified number of attempts.</Hint>
+            <Hint>Retries failed runs up to the specified number of attempts.</Hint>
             <FormError id={maxAttempts.errorId}>{maxAttempts.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1004,7 +1004,7 @@ function ScheduledTaskForm({
               value={maxDurationValue}
               onChange={setMaxDurationValue}
             />
-            <Hint>Override the maximum compute time limit for the run.</Hint>
+            <Hint>Overrides the maximum compute time limit for the run.</Hint>
             <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1038,10 +1038,7 @@ function ScheduledTaskForm({
               value={concurrencyKeyValue ?? ""}
               onChange={(e) => setConcurrencyKeyValue(e.target.value)}
             />
-            <Hint>
-              Concurrency keys enable you to limit concurrency by creating a separate queue for each
-              value of the key.
-            </Hint>
+            <Hint>Limits concurrency by creating a separate queue for each value of the key.</Hint>
             <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1067,7 +1064,7 @@ function ScheduledTaskForm({
                 </SelectItem>
               ))}
             </Select>
-            <Hint>Override the machine preset specified in the task.</Hint>
+            <Hint>Overrides the machine preset.</Hint>
             <FormError id={machine.errorId}>{machine.error}</FormError>
           </InputGroup>
           <InputGroup>
@@ -1091,7 +1088,7 @@ function ScheduledTaskForm({
             {disableVersionSelection ? (
               <Hint>Only the latest version is available in the development environment.</Hint>
             ) : (
-              <Hint>Select a specific version of the task.</Hint>
+              <Hint>Runs task on a specific version.</Hint>
             )}
             <FormError id={version.errorId}>{version.error}</FormError>
           </InputGroup>
@@ -1154,7 +1151,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
                 className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900	"
               >
                 <div className="flex flex-col items-start">
-                  <Paragraph variant="small">
+                  <Paragraph variant="small/bright">
                     <DateTime date={run.createdAt} showTooltip={false} />
                   </Paragraph>
                   <div className="flex items-center gap-2 text-xs text-text-dimmed">

From 2a9346f8f0ef91dc11dfe34349f89c2bdc3d9fa2 Mon Sep 17 00:00:00 2001
From: myftija <saadi.myftija@gmail.com>
Date: Wed, 9 Jul 2025 15:32:14 +0200
Subject: [PATCH 5/5] Fix tooltip issue in the Select component

---
 apps/webapp/app/components/primitives/Select.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 75c6adeed8..fa8a63603b 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -199,7 +199,6 @@ export function Select<TValue extends string | string[], TItem>({
         text={text}
         placeholder={placeholder}
         shortcut={shortcut}
-        tooltipTitle={heading}
         disabled={disabled}
         dropdownIcon={dropdownIcon}
         {...props}