Changes frozen to waiting (#1551)

* Offset the tooltip in more

* The Select component’s shortcut has a better hover state

* “Frozen” changed to “Waiting”

Author: samejr

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

@@ -482,7 +482,11 @@ export function SelectItem({
         <div className="grow truncate">{props.children || props.value}</div>
         {checkIcon}
         {shortcut && (
-          <ShortcutKey className={cn("size-4 flex-none")} shortcut={shortcut} variant={"small"} />
+          <ShortcutKey
+            className={cn("size-4 flex-none transition duration-0 group-hover:border-charcoal-600")}
+            shortcut={shortcut}
+            variant={"small"}
+          />
         )}
       </div>
     </Ariakit.SelectItem>

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

@@ -356,7 +356,7 @@ function StatusDropdown({
                   <TooltipTrigger className="group flex w-full flex-col py-0">
                     <TaskRunStatusCombo status={item.value} iconClassName="animate-none" />
                   </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={9}>
+                  <TooltipContent side="right" sideOffset={50}>
                     <Paragraph variant="extra-small">
                       {descriptionForTaskRunStatus(item.value)}
                     </Paragraph>

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

@@ -2,15 +2,14 @@ import {
   CheckCircleIcon,
   ClockIcon,
   NoSymbolIcon,
-  PauseCircleIcon,
   RectangleStackIcon,
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import type { TaskRunAttemptStatus as TaskRunAttemptStatusType } from "@trigger.dev/database";
-import { TaskRunAttemptStatus } from "~/database-types";
 import assertNever from "assert-never";
-import { SnowflakeIcon } from "lucide-react";
+import { HourglassIcon, SnowflakeIcon } from "lucide-react";
 import { Spinner } from "~/components/primitives/Spinner";
+import { TaskRunAttemptStatus } from "~/database-types";
 import { cn } from "~/utils/cn";
 
 export const allTaskRunAttemptStatuses = Object.values(
@@ -65,7 +64,7 @@ export function TaskRunAttemptStatusIcon({
     case "EXECUTING":
       return <Spinner className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "PAUSED":
-      return <SnowflakeIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
+      return <HourglassIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "FAILED":
       return <XCircleIcon className={cn(runAttemptStatusClassNameColor(status), className)} />;
     case "CANCELED":
@@ -91,7 +90,7 @@ export function runAttemptStatusClassNameColor(status: ExtendedTaskAttemptStatus
     case "EXECUTING":
       return "text-pending";
     case "PAUSED":
-      return "text-sky-300";
+      return "text-charcoal-500";
     case "FAILED":
       return "text-error";
     case "CANCELED":
@@ -117,7 +116,7 @@ export function runAttemptStatusTitle(status: ExtendedTaskAttemptStatus | null):
     case "EXECUTING":
       return "Executing";
     case "PAUSED":
-      return "Frozen";
+      return "Waiting";
     case "FAILED":
       return "Failed";
     case "CANCELED":

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

@@ -8,13 +8,12 @@ import {
   NoSymbolIcon,
   PauseCircleIcon,
   RectangleStackIcon,
-  StopIcon,
   TrashIcon,
   XCircleIcon,
 } from "@heroicons/react/20/solid";
 import { TaskRunStatus } from "@trigger.dev/database";
 import assertNever from "assert-never";
-import { SnowflakeIcon } from "lucide-react";
+import { HourglassIcon } from "lucide-react";
 import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
 import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
@@ -41,9 +40,9 @@ export const filterableTaskRunStatuses = [
   "WAITING_FOR_DEPLOY",
   "DELAYED",
   "PENDING",
+  "WAITING_TO_RESUME",
   "EXECUTING",
   "RETRYING_AFTER_FAILURE",
-  "WAITING_TO_RESUME",
   "COMPLETED_SUCCESSFULLY",
   "CANCELED",
   "COMPLETED_WITH_ERRORS",
@@ -55,21 +54,21 @@ export const filterableTaskRunStatuses = [
 ] as const satisfies Readonly<Array<TaskRunStatus>>;
 
 const taskRunStatusDescriptions: Record<TaskRunStatus, string> = {
-  DELAYED: "Task has been delayed and is waiting to be executed",
-  PENDING: "Task is waiting to be executed",
-  WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing",
-  EXECUTING: "Task is currently being executed",
-  RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure",
-  WAITING_TO_RESUME: "Task has been frozen and is waiting to be resumed",
-  COMPLETED_SUCCESSFULLY: "Task has been successfully completed",
-  CANCELED: "Task has been canceled",
-  COMPLETED_WITH_ERRORS: "Task has failed with errors",
-  INTERRUPTED: "Task has failed because it was interrupted",
-  SYSTEM_FAILURE: "Task has failed due to a system failure",
-  PAUSED: "Task has been paused by the user",
-  CRASHED: "Task has crashed and won't be retried",
-  EXPIRED: "Task has surpassed its ttl and won't be executed",
-  TIMED_OUT: "Task has failed because it exceeded its maxDuration",
+  DELAYED: "Task has been delayed and is waiting to be executed.",
+  PENDING: "Task is waiting to be executed.",
+  WAITING_FOR_DEPLOY: "Task needs to be deployed first to start executing.",
+  EXECUTING: "Task is currently being executed.",
+  RETRYING_AFTER_FAILURE: "Task is being reattempted after a failure.",
+  WAITING_TO_RESUME: `You have used a "wait" function. When the wait is complete, the task will resume execution.`,
+  COMPLETED_SUCCESSFULLY: "Task has been successfully completed.",
+  CANCELED: "Task has been canceled.",
+  COMPLETED_WITH_ERRORS: "Task has failed with errors.",
+  INTERRUPTED: "Task has failed because it was interrupted.",
+  SYSTEM_FAILURE: "Task has failed due to a system failure.",
+  PAUSED: "Task has been paused by the user.",
+  CRASHED: "Task has crashed and won't be retried.",
+  EXPIRED: "Task has surpassed its ttl and won't be executed.",
+  TIMED_OUT: "Task has failed because it exceeded its maxDuration.",
 };
 
 export const QUEUED_STATUSES = [
@@ -126,7 +125,7 @@ export function TaskRunStatusIcon({
     case "EXECUTING":
       return <Spinner className={cn(runStatusClassNameColor(status), className)} />;
     case "WAITING_TO_RESUME":
-      return <SnowflakeIcon className={cn(runStatusClassNameColor(status), className)} />;
+      return <HourglassIcon className={cn(runStatusClassNameColor(status), className)} />;
     case "RETRYING_AFTER_FAILURE":
       return <ArrowPathIcon className={cn(runStatusClassNameColor(status), className)} />;
     case "PAUSED":
@@ -165,7 +164,7 @@ export function runStatusClassNameColor(status: TaskRunStatus): string {
     case "RETRYING_AFTER_FAILURE":
       return "text-pending";
     case "WAITING_TO_RESUME":
-      return "text-sky-300";
+      return "text-charcoal-500";
     case "PAUSED":
       return "text-amber-300";
     case "CANCELED":
@@ -200,7 +199,7 @@ export function runStatusTitle(status: TaskRunStatus): string {
     case "EXECUTING":
       return "Executing";
     case "WAITING_TO_RESUME":
-      return "Frozen";
+      return "Waiting";
     case "RETRYING_AFTER_FAILURE":
       return "Reattempting";
     case "PAUSED":

docs/runs.mdx

@@ -42,8 +42,8 @@ currently running.
 <Icon icon="arrows-rotate" iconType="solid" color="#3B82F6" size={17} /> **Reattempting**: The task has
 failed and is being retried.
 
-<Icon icon="snowflake" iconType="solid" color="#68BAF2" size={17} /> **Frozen**: Task has been frozen
-and is waiting to be resumed.
+<Icon icon="hourglass" iconType="solid" color="#878C99" size={17} /> **Waiting**: You have used a
+[triggerAndWait()](/triggering#yourtask-triggerandwait), [batchTriggerAndWait()](/triggering#yourtask-batchtriggerandwait) or a [wait function](/wait). When the wait is complete, the task will resume execution.
 
 ### Final States