Scheduled tasks

.changeset/dry-walls-check.md

@@ -0,0 +1,6 @@
+---
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Add option to print console logs in the dev CLI locally (issue #1014)

.changeset/khaki-poems-lay.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Export queue from the SDK

.changeset/rotten-dryers-exercise.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Adding task with a triggerSource of schedule

.changeset/tricky-bulldogs-heal.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+"@trigger.dev/core": patch
+---
+
+Added a new global - Task Catalog - to better handle task metadata

apps/webapp/app/assets/icons/AISparkleIcon.tsx

@@ -0,0 +1,53 @@
+export function AISparkleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.9806 0.803884C14.8871 0.33646 14.4767 0 14 0C13.5233 0 13.1129 0.33646 13.0194 0.803884L12.7809 1.99644C12.7017 2.3923 12.3923 2.70174 11.9964 2.78091L10.8039 3.01942C10.3365 3.1129 10 3.52332 10 4C10 4.47668 10.3365 4.8871 10.8039 4.98058L11.9964 5.21909C12.3923 5.29826 12.7017 5.6077 12.7809 6.00356L13.0194 7.19612C13.1129 7.66354 13.5233 8 14 8C14.4767 8 14.8871 7.66354 14.9806 7.19612L15.2191 6.00356C15.2983 5.6077 15.6077 5.29826 16.0036 5.21909L17.1961 4.98058C17.6635 4.8871 18 4.47668 18 4C18 3.52332 17.6635 3.1129 17.1961 3.01942L16.0036 2.78091C15.6077 2.70174 15.2983 2.3923 15.2191 1.99644L14.9806 0.803884Z"
+        fill="url(#paint0_linear_11402_36656)"
+      />
+      <path
+        d="M5.94868 4.68377C5.81257 4.27543 5.43043 4 5 4C4.56957 4 4.18743 4.27543 4.05132 4.68377L3.36754 6.73509C3.26801 7.03369 3.03369 7.26801 2.73509 7.36754L0.683772 8.05132C0.27543 8.18743 0 8.56957 0 9C0 9.43043 0.27543 9.81257 0.683772 9.94868L2.73509 10.6325C3.03369 10.732 3.26801 10.9663 3.36754 11.2649L4.05132 13.3162C4.18743 13.7246 4.56957 14 5 14C5.43043 14 5.81257 13.7246 5.94868 13.3162L6.63246 11.2649C6.73199 10.9663 6.96631 10.732 7.26491 10.6325L9.31623 9.94868C9.72457 9.81257 10 9.43043 10 9C10 8.56957 9.72457 8.18743 9.31623 8.05132L7.26491 7.36754C6.96631 7.26801 6.73199 7.03369 6.63246 6.73509L5.94868 4.68377Z"
+        fill="url(#paint1_linear_11402_36656)"
+      />
+      <path
+        d="M12.9487 12.6838C12.8126 12.2754 12.4304 12 12 12C11.5696 12 11.1874 12.2754 11.0513 12.6838L10.8675 13.2351C10.768 13.5337 10.5337 13.768 10.2351 13.8675L9.68377 14.0513C9.27543 14.1874 9 14.5696 9 15C9 15.4304 9.27543 15.8126 9.68377 15.9487L10.2351 16.1325C10.5337 16.232 10.768 16.4663 10.8675 16.7649L11.0513 17.3162C11.1874 17.7246 11.5696 18 12 18C12.4304 18 12.8126 17.7246 12.9487 17.3162L13.1325 16.7649C13.232 16.4663 13.4663 16.232 13.7649 16.1325L14.3162 15.9487C14.7246 15.8126 15 15.4304 15 15C15 14.5696 14.7246 14.1874 14.3162 14.0513L13.7649 13.8675C13.4663 13.768 13.232 13.5337 13.1325 13.2351L12.9487 12.6838Z"
+        fill="url(#paint2_linear_11402_36656)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_11402_36656"
+          x1="9"
+          y1="0"
+          x2="9"
+          y2="18"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#E543FF" />
+          <stop offset="1" stopColor="#286399" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -4,6 +4,7 @@ import {
   ArrowRightOnRectangleIcon,
   BeakerIcon,
   ChartBarIcon,
+  ClockIcon,
   CursorArrowRaysIcon,
   IdentificationIcon,
   KeyIcon,
@@ -47,6 +48,7 @@ import {
   v3ProjectPath,
   v3ProjectSettingsPath,
   v3RunsPath,
+  v3SchedulesPath,
   v3TestPath,
 } from "~/utils/pathBuilder";
 import { Feedback } from "../Feedback";
@@ -571,6 +573,13 @@ function V3ProjectSideMenu({
         to={v3TestPath(organization, project)}
         data-action="test"
       />
+      <SideMenuItem
+        name="Schedules"
+        icon={ClockIcon}
+        iconColor="text-sun-500"
+        to={v3SchedulesPath(organization, project)}
+        data-action="schedules"
+      />
       <SideMenuItem
         name="API keys"
         icon={KeyIcon}

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

@@ -286,15 +286,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
 type LinkPropsType = Pick<
   LinkProps,
   "to" | "target" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "download"
-> &
-  React.ComponentProps<typeof ButtonContent>;
+> & { disabled?: boolean } & React.ComponentProps<typeof ButtonContent>;
 export const LinkButton = ({
   to,
   onClick,
   onMouseDown,
   onMouseEnter,
   onMouseLeave,
   download,
+  disabled = false,
   ...props
 }: LinkPropsType) => {
   const innerRef = useRef<HTMLAnchorElement>(null);
@@ -309,6 +309,19 @@ export const LinkButton = ({
     });
   }
 
+  if (disabled) {
+    return (
+      <div
+        className={cn(
+          "group pointer-events-none cursor-default opacity-40 outline-none",
+          props.fullWidth ? "w-full" : ""
+        )}
+      >
+        <ButtonContent {...props} />
+      </div>
+    );
+  }
+
   if (to.toString().startsWith("http") || to.toString().startsWith("/resources")) {
     return (
       <ExtLink

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

@@ -23,7 +23,7 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
@@ -32,7 +32,7 @@ const variants = {
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -57,7 +57,7 @@ export type CheckboxProps = Omit<
   name?: string;
   value?: string;
   variant?: keyof typeof variants;
-  label?: string;
+  label?: React.ReactNode;
   description?: string;
   badges?: string[];
   className?: string;
@@ -137,7 +137,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-700 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
           )}
           id={id}
           ref={ref}

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

@@ -1,15 +1,30 @@
+import { BellAlertIcon } from "@heroicons/react/20/solid";
 import { CalendarDateTime, createCalendar } from "@internationalized/date";
 import { useDateField, useDateSegment } from "@react-aria/datepicker";
 import type { DateFieldState, DateSegment } from "@react-stately/datepicker";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { Granularity } from "@react-types/datepicker";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
-import { useLocales } from "./LocaleProvider";
 import { Button } from "./Buttons";
 
+const variants = {
+  small: {
+    fieldStyles: "h-5 text-sm rounded-sm px-0.5",
+    nowButtonVariant: "tertiary/small" as const,
+    clearButtonVariant: "minimal/small" as const,
+  },
+  medium: {
+    fieldStyles: "h-7 text-base rounded px-1",
+    nowButtonVariant: "tertiary/medium" as const,
+    clearButtonVariant: "minimal/medium" as const,
+  },
+};
+
+type Variant = keyof typeof variants;
+
 type DateFieldProps = {
-  label?: string;
+  label: string;
   defaultValue?: Date;
   minValue?: Date;
   maxValue?: Date;
@@ -20,6 +35,7 @@ type DateFieldProps = {
   showNowButton?: boolean;
   showClearButton?: boolean;
   onValueChange?: (value: Date | undefined) => void;
+  variant?: Variant;
 };
 
 export function DateField({
@@ -34,6 +50,7 @@ export function DateField({
   showGuide = false,
   showNowButton = false,
   showClearButton = false,
+  variant = "small",
 }: DateFieldProps) {
   const [value, setValue] = useState<undefined | CalendarDateTime>(
     utcDateToCalendarDate(defaultValue)
@@ -90,48 +107,50 @@ export function DateField({
 
   return (
     <div className={`flex flex-col items-start ${className || ""}`}>
-      <span {...labelProps} className="mb-1 ml-0.5 text-xs text-charcoal-300">
-        {label}
-      </span>
-      <div className="flex flex-row items-center gap-1">
+      <div className="flex flex-row items-center gap-1" aria-label={label}>
         <div
           {...fieldProps}
           ref={ref}
           className={cn(
-            "flex rounded-sm border border-charcoal-800 bg-charcoal-750 p-0.5 px-1.5 transition-colors focus-within:border-charcoal-500 hover:border-charcoal-700 focus-within:hover:border-charcoal-500",
+            "flex rounded-sm border bg-charcoal-700 p-0.5 transition focus-within:border-charcoal-600 hover:border-charcoal-600",
             fieldClassName
           )}
         >
-          <DateSegment segment={yearSegment} state={state} />
-          <DateSegment segment={literalSegment("/")} state={state} />
-          <DateSegment segment={monthSegment} state={state} />
-          <DateSegment segment={literalSegment("/")} state={state} />
-          <DateSegment segment={daySegment} state={state} />
-          <DateSegment segment={literalSegment(", ")} state={state} />
-          <DateSegment segment={hourSegment} state={state} />
-          <DateSegment segment={literalSegment(":")} state={state} />
-          <DateSegment segment={minuteSegment} state={state} />
-          <DateSegment segment={literalSegment(":")} state={state} />
-          <DateSegment segment={secondSegment} state={state} />
-          <DateSegment segment={literalSegment(" ")} state={state} />
-          <DateSegment segment={dayPeriodSegment} state={state} />
+          <DateSegment segment={yearSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment("/")} state={state} variant={variant} />
+          <DateSegment segment={monthSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment("/")} state={state} variant={variant} />
+          <DateSegment segment={daySegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(", ")} state={state} variant={variant} />
+          <DateSegment segment={hourSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(":")} state={state} variant={variant} />
+          <DateSegment segment={minuteSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(":")} state={state} variant={variant} />
+          <DateSegment segment={secondSegment} state={state} variant={variant} />
+          <DateSegment segment={literalSegment(" ")} state={state} variant={variant} />
+          <DateSegment segment={dayPeriodSegment} state={state} variant={variant} />
         </div>
         {showNowButton && (
           <Button
-            variant="tertiary/small"
+            type="button"
+            variant={variants[variant].nowButtonVariant}
+            LeadingIcon={BellAlertIcon}
+            leadingIconClassName="text-text-dimmed group-hover:text-text-bright"
             onClick={() => {
               const now = new Date();
               setValue(utcDateToCalendarDate(new Date()));
               onValueChange?.(now);
             }}
           >
-            Now
+            <span className="text-text-dimmed transition group-hover:text-text-bright">Now</span>
           </Button>
         )}
         {showClearButton && (
           <Button
-            variant="tertiary/small"
+            type="button"
+            variant={variants[variant].clearButtonVariant}
             LeadingIcon={"close"}
+            leadingIconClassName="-mr-2"
             onClick={() => {
               setValue(undefined);
               onValueChange?.(undefined);
@@ -142,7 +161,9 @@ export function DateField({
               state.clearSegment("minute");
               state.clearSegment("second");
             }}
-          />
+          >
+            Clear
+          </Button>
         )}
       </div>
       {showGuide && (
@@ -172,11 +193,13 @@ function utcDateToCalendarDate(date?: Date) {
 type DateSegmentProps = {
   segment: DateSegment;
   state: DateFieldState;
+  variant: Variant;
 };
 
-function DateSegment({ segment, state }: DateSegmentProps) {
+function DateSegment({ segment, state, variant }: DateSegmentProps) {
   const ref = useRef<null | HTMLDivElement>(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
+  const sizeVariant = variants[variant];
 
   return (
     <div
@@ -186,23 +209,27 @@ function DateSegment({ segment, state }: DateSegmentProps) {
         ...segmentProps.style,
         minWidth: minWidthForSegment(segment),
       }}
-      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none focus:bg-indigo-500 focus:text-white ${
+      className={cn(
+        "group box-content text-center tabular-nums outline-none focus:bg-charcoal-600 focus:text-text-bright",
+        sizeVariant.fieldStyles,
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
-      }`}
+      )}
     >
       {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
       <span
         aria-hidden="true"
-        className="block text-center italic text-charcoal-500 group-focus:text-white"
+        className="flex h-full items-center justify-center text-center text-charcoal-500 group-focus:text-text-bright"
         style={{
           visibility: segment.isPlaceholder ? undefined : "hidden",
-          height: segment.isPlaceholder ? "" : 0,
+          height: segment.isPlaceholder ? undefined : 0,
           pointerEvents: "none",
         }}
       >
         {segment.placeholder}
       </span>
-      {segment.isPlaceholder ? "" : segment.text}
+      <span className="flex h-full items-center justify-center">
+        {segment.isPlaceholder ? "" : segment.text}
+      </span>
     </div>
   );
 }
@@ -231,7 +258,7 @@ function DateSegmentGuide({ segment }: { segment: DateSegment }) {
       style={{
         minWidth: minWidthForSegment(segment),
       }}
-      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none ${
+      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums text-rose-500 outline-none ${
         !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       }`}
     >