Latest lockfile

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

apps/webapp/app/components/billing/FreePlanUsage.tsx

@@ -13,8 +13,15 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
     ["#22C55E", "#22C55E", "#F59E0B", "#F43F5E", "#F43F5E"]
   );
 
+  const hasHitLimit = cappedPercentage >= 1;
+
   return (
-    <div className="rounded border border-slate-900 bg-[#101722] p-2.5">
+    <div
+      className={cn(
+        "rounded border border-slate-900 bg-[#101722] p-2.5",
+        hasHitLimit && "border-rose-800/60"
+      )}
+    >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-1">
           <ArrowUpCircleIcon className="h-5 w-5 text-dimmed" />

apps/webapp/app/components/billing/UpgradePrompt.tsx

@@ -5,6 +5,7 @@ import { formatNumberCompact } from "~/utils/numberFormatter";
 import { plansPath } from "~/utils/pathBuilder";
 import { LinkButton } from "../primitives/Buttons";
 import { Paragraph } from "../primitives/Paragraph";
+import { Callout } from "../primitives/Callout";
 
 type UpgradePromptProps = {
   organization: MatchedOrganization;
@@ -18,19 +19,25 @@ export function UpgradePrompt({ organization }: UpgradePromptProps) {
   }
 
   return (
-    <div className="flex h-full w-full items-center gap-4 bg-gradient-to-r from-transparent to-indigo-900/50 pr-1.5">
-      <Paragraph variant="extra-small" className="text-rose-500">
-        You have exceeded the monthly {formatNumberCompact(currentPlan.usage.runCountCap)} runs
-        limit
-      </Paragraph>
-      <LinkButton
-        variant={"primary/small"}
-        LeadingIcon={ArrowUpCircleIcon}
-        leadingIconClassName="px-0"
-        to={plansPath(organization)}
-      >
-        Upgrade
-      </LinkButton>
-    </div>
+    <Callout variant="error" className="flex h-full items-center rounded-none px-1 py-0">
+      <div className="flex items-center justify-between gap-3">
+        <Paragraph variant="extra-small" className="text-white">
+          {organization.runsEnabled
+            ? `You have exceeded the monthly ${formatNumberCompact(
+                currentPlan.usage.runCountCap
+              )} runs
+          limit`
+            : `No runs are executing because you have exceeded the free limit`}
+        </Paragraph>
+        <LinkButton
+          variant={"primary/small"}
+          LeadingIcon={ArrowUpCircleIcon}
+          leadingIconClassName="px-0"
+          to={plansPath(organization)}
+        >
+          Upgrade
+        </LinkButton>
+      </div>
+    </Callout>
   );
 }

apps/webapp/app/components/event/EventDetail.tsx

@@ -0,0 +1,45 @@
+import { CodeBlock } from "../code/CodeBlock";
+import { DateTime } from "../primitives/DateTime";
+import { Header3 } from "../primitives/Headers";
+import {
+  RunPanel,
+  RunPanelBody,
+  RunPanelDivider,
+  RunPanelIconProperty,
+  RunPanelIconSection,
+} from "~/components/run/RunCard";
+import { Event } from "~/presenters/EventPresenter.server";
+
+export function EventDetail({ event }: { event: Event }) {
+  const { id, name, payload, context, timestamp, deliveredAt } = event;
+
+  return (
+    <RunPanel selected={false}>
+      <RunPanelBody>
+        <RunPanelIconSection>
+          <RunPanelIconProperty
+            icon="calendar"
+            label="Created"
+            value={<DateTime date={timestamp} />}
+          />
+          {deliveredAt && (
+            <RunPanelIconProperty
+              icon="flag"
+              label="Delivered"
+              value={<DateTime date={deliveredAt} />}
+            />
+          )}
+          <RunPanelIconProperty icon="id" label="Event name" value={name} />
+          <RunPanelIconProperty icon="account" label="Event ID" value={id} />
+        </RunPanelIconSection>
+        <RunPanelDivider />
+        <div className="mt-4 flex flex-col gap-2">
+          <Header3>Payload</Header3>
+          <CodeBlock code={payload} />
+          <Header3>Context</Header3>
+          <CodeBlock code={context} />
+        </div>
+      </RunPanelBody>
+    </RunPanel>
+  );
+}

apps/webapp/app/components/events/EventStatuses.tsx

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { DirectionSchema, FilterableEnvironment } from "~/components/runs/RunStatuses";
+
+export const EventListSearchSchema = z.object({
+  cursor: z.string().optional(),
+  direction: DirectionSchema.optional(),
+  environment: FilterableEnvironment.optional(),
+  from: z
+    .string()
+    .transform((value) => parseInt(value))
+    .optional(),
+  to: z
+    .string()
+    .transform((value) => parseInt(value))
+    .optional(),
+});

apps/webapp/app/components/events/EventsFilters.tsx

@@ -0,0 +1,104 @@
+import { useNavigate } from "@remix-run/react";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { Paragraph } from "../primitives/Paragraph";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/Select";
+import { EventListSearchSchema } from "./EventStatuses";
+import { environmentKeys, FilterableEnvironment } from "~/components/runs/RunStatuses";
+import { TimeFrameFilter } from "../runs/TimeFrameFilter";
+import { useCallback } from "react";
+import { Button } from "../primitives/Buttons";
+
+export function EventsFilters() {
+  const navigate = useNavigate();
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const { environment, from, to } = EventListSearchSchema.parse(
+    Object.fromEntries(searchParams.entries())
+  );
+
+  const handleFilterChange = useCallback((filterType: string, value: string | undefined) => {
+    if (value) {
+      searchParams.set(filterType, value);
+    } else {
+      searchParams.delete(filterType);
+    }
+    searchParams.delete("cursor");
+    searchParams.delete("direction");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  const handleTimeFrameChange = useCallback((range: { from?: number; to?: number }) => {
+    if (range.from) {
+      searchParams.set("from", range.from.toString());
+    } else {
+      searchParams.delete("from");
+    }
+
+    if (range.to) {
+      searchParams.set("to", range.to.toString());
+    } else {
+      searchParams.delete("to");
+    }
+
+    searchParams.delete("cursor");
+    searchParams.delete("direction");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  const handleEnvironmentChange = (value: FilterableEnvironment | "ALL") => {
+    handleFilterChange("environment", value === "ALL" ? undefined : value);
+  };
+
+  const clearFilters = useCallback(() => {
+    searchParams.delete("status");
+    searchParams.delete("environment");
+    searchParams.delete("from");
+    searchParams.delete("to");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  return (
+    <div className="flex flex-row justify-between gap-x-2">
+      <SelectGroup>
+        <Select
+          name="environment"
+          value={environment ?? "ALL"}
+          onValueChange={handleEnvironmentChange}
+        >
+          <SelectTrigger size="secondary/small" width="full">
+            <SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph variant="extra-small" className="pl-0.5">
+                All environments
+              </Paragraph>
+            </SelectItem>
+            {environmentKeys.map((env) => (
+              <SelectItem key={env} value={env}>
+                <div className="flex items-center gap-x-2">
+                  <EnvironmentLabel environment={{ type: env }} />
+                  <Paragraph variant="extra-small">environment</Paragraph>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
+      <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
+
+      <Button variant="tertiary/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
+        Clear
+      </Button>
+    </div>
+  );
+}

apps/webapp/app/components/events/EventsTable.tsx

@@ -0,0 +1,134 @@
+import { StopIcon } from "@heroicons/react/24/outline";
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { RuntimeEnvironmentType, User } from "@trigger.dev/database";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { DateTime } from "../primitives/DateTime";
+import { Paragraph } from "../primitives/Paragraph";
+import { Spinner } from "../primitives/Spinner";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableCellChevron,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "../primitives/Table";
+
+type EventTableItem = {
+  id: string;
+  name: string | null;
+  environment: {
+    type: RuntimeEnvironmentType;
+    userId?: string;
+    userName?: string;
+  };
+  createdAt: Date | null;
+  isTest: boolean;
+  deliverAt: Date | null;
+  deliveredAt: Date | null;
+  cancelledAt: Date | null;
+  runs: number;
+};
+
+type EventsTableProps = {
+  total: number;
+  hasFilters: boolean;
+  events: EventTableItem[];
+  isLoading?: boolean;
+  eventsParentPath: string;
+  currentUser: User;
+};
+
+export function EventsTable({
+  total,
+  hasFilters,
+  events,
+  isLoading = false,
+  eventsParentPath,
+  currentUser,
+}: EventsTableProps) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Event</TableHeaderCell>
+          <TableHeaderCell>Env</TableHeaderCell>
+          <TableHeaderCell>Received Time</TableHeaderCell>
+          <TableHeaderCell>Delivery Time</TableHeaderCell>
+          <TableHeaderCell>Delivered</TableHeaderCell>
+          <TableHeaderCell>Canceled Time</TableHeaderCell>
+          <TableHeaderCell>Test</TableHeaderCell>
+          <TableHeaderCell>Runs</TableHeaderCell>
+          <TableHeaderCell>
+            <span className="sr-only">Go to page</span>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {total === 0 && !hasFilters ? (
+          <TableBlankRow colSpan={9}>
+            <NoEvents title="No events found" />
+          </TableBlankRow>
+        ) : events.length === 0 ? (
+          <TableBlankRow colSpan={9}>
+            <NoEvents title="No events match your filters" />
+          </TableBlankRow>
+        ) : (
+          events.map((event) => {
+            const path = `${eventsParentPath}/events/${event.id}`;
+            const usernameForEnv =
+              currentUser.id !== event.environment.userId ? event.environment.userName : undefined;
+
+            return (
+              <TableRow key={event.id}>
+                <TableCell to={path}>{typeof event.name === "string" ? event.name : "-"}</TableCell>
+                <TableCell to={path}>
+                  <EnvironmentLabel environment={event.environment} userName={usernameForEnv} />
+                </TableCell>
+                <TableCell to={path}>
+                  {event.createdAt ? <DateTime date={event.createdAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.deliverAt ? <DateTime date={event.deliverAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.deliveredAt ? <DateTime date={event.deliveredAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.cancelledAt ? <DateTime date={event.cancelledAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.isTest ? (
+                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                  ) : (
+                    <StopIcon className="h-4 w-4 text-slate-850" />
+                  )}
+                </TableCell>
+                <TableCell to={path}>{event.runs}</TableCell>
+                <TableCellChevron to={path} isSticky />
+              </TableRow>
+            );
+          })
+        )}
+        {isLoading && (
+          <TableBlankRow
+            colSpan={8}
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+          >
+            <Spinner /> <span className="text-dimmed">Loading…</span>
+          </TableBlankRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+
+function NoEvents({ title }: { title: string }) {
+  return (
+    <div className="flex items-center justify-center">
+      <Paragraph className="w-auto">{title}</Paragraph>
+    </div>
+  );
+}

apps/webapp/app/components/jobs/JobsTable.tsx

@@ -49,13 +49,13 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul
               <TableRow key={job.id} className="group">
                 <TableCell to={path}>
                   <span className="flex items-center gap-2">
-                    <NamedIcon name={job.event.icon} className="h-8 w-8" />
+                    <NamedIcon name={job.event.icon} className="w-8 h-8" />
                     <LabelValueStack
                       label={job.title}
                       value={
                         job.dynamic ? (
                           <span className="flex items-center gap-0.5">
-                            <NamedIcon name="dynamic" className="h-4 w-4" />{" "}
+                            <NamedIcon name="dynamic" className="w-4 h-4" />{" "}
                             <span className="uppercase">Dynamic:</span> {job.event.title}
                           </span>
                         ) : (
@@ -75,9 +75,9 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul
                       key={integration.key}
                       button={
                         <div className="relative">
-                          <NamedIcon name={integration.icon} className="h-6 w-6" />
+                          <NamedIcon name={integration.icon} className="w-6 h-6" />
                           {integration.setupStatus === "MISSING_FIELDS" && (
-                            <NamedIcon name="error" className="absolute -left-1 -top-1 h-4 w-4" />
+                            <NamedIcon name="error" className="absolute w-4 h-4 -left-1 -top-1" />
                           )}
                         </div>
                       }
@@ -99,7 +99,7 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul
                   {job.properties && (
                     <SimpleTooltip
                       button={
-                        <div className="flex max-w-[200px] items-start justify-start gap-5 truncate">
+                        <div className="flex max-w-[300px] items-start justify-start gap-5 truncate">
                           {job.properties.map((property, index) => (
                             <LabelValueStack
                               key={index}

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

@@ -0,0 +1,104 @@
+import { Link } from "@remix-run/react";
+import { User } from "@trigger.dev/database";
+import { cn } from "~/utils/cn";
+import { accountPath, personalAccessTokensPath, rootPath } from "~/utils/pathBuilder";
+import { Header3 } from "../primitives/Headers";
+import { ArrowLeftIcon, ChevronLeftIcon } from "@heroicons/react/24/solid";
+import { SideMenuHeader } from "./SideMenuHeader";
+import { SideMenuItem } from "./SideMenuItem";
+import { DiscordIcon } from "@trigger.dev/companyicons";
+import { Feedback } from "../Feedback";
+import { Button, LinkButton } from "../primitives/Buttons";
+import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { useV3Enabled } from "~/root";
+
+export function AccountSideMenu({ user }: { user: User }) {
+  const v3Enabled = useV3Enabled();
+
+  return (
+    <div
+      className={cn(
+        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-ui-border transition"
+      )}
+    >
+      <div className="flex h-full flex-col">
+        <div
+          className={cn("flex items-center justify-between border-b bg-background p-px transition")}
+        >
+          <LinkButton
+            variant="tertiary/medium"
+            LeadingIcon={ArrowLeftIcon}
+            to={rootPath()}
+            fullWidth
+            textAlignLeft
+          >
+            Account
+          </LinkButton>
+        </div>
+        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="mb-6 flex flex-col gap-1 px-1">
+            <SideMenuHeader title={user.name ?? user.displayName ?? user.email} />
+
+            <SideMenuItem
+              name="Your profile"
+              icon="account"
+              iconColor="text-indigo-500"
+              to={accountPath()}
+              data-action="account"
+            />
+          </div>
+          {v3Enabled && (
+            <div className="mb-1 flex flex-col gap-1 px-1">
+              <SideMenuHeader title="Security" />
+              <SideMenuItem
+                name="Personal Access Tokens"
+                icon={ShieldCheckIcon}
+                iconColor="text-emerald-500"
+                to={personalAccessTokensPath()}
+                data-action="tokens"
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col gap-1 border-t border-border p-1">
+          <SideMenuItem
+            name="Join our Discord"
+            icon={DiscordIcon}
+            to="https://trigger.dev/discord"
+            data-action="join our discord"
+            target="_blank"
+          />
+
+          <SideMenuItem
+            name="Documentation"
+            icon="docs"
+            to="https://trigger.dev/docs"
+            data-action="documentation"
+            target="_blank"
+          />
+          <SideMenuItem
+            name="Changelog"
+            icon="star"
+            to="https://trigger.dev/changelog"
+            data-action="changelog"
+            target="_blank"
+          />
+
+          <Feedback
+            button={
+              <Button
+                variant="small-menu-item"
+                LeadingIcon="log"
+                data-action="help & feedback"
+                fullWidth
+                textAlignLeft
+              >
+                Help & Feedback
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -3,16 +3,16 @@ import {
   ArrowRightIcon,
   ArrowRightOnRectangleIcon,
   ChartBarIcon,
+  CursorArrowRaysIcon,
   EllipsisHorizontalIcon,
+  ShieldCheckIcon,
 } from "@heroicons/react/20/solid";
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
-import { IconExclamationCircle } from "@tabler/icons-react";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
-import { AnchorHTMLAttributes, Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { useFeatures } from "~/hooks/useFeatures";
 import { MatchedOrganization } from "~/hooks/useOrganizations";
-import { usePathName } from "~/hooks/usePathName";
 import { MatchedProject } from "~/hooks/useProject";
 import { User } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
@@ -27,7 +27,9 @@ import {
   organizationIntegrationsPath,
   organizationPath,
   organizationTeamPath,
+  personalAccessTokensPath,
   projectEnvironmentsPath,
+  projectEventsPath,
   projectHttpEndpointsPath,
   projectPath,
   projectRunsPath,
@@ -40,11 +42,10 @@ import { LogoIcon } from "../LogoIcon";
 import { StepContentContainer } from "../StepContentContainer";
 import { UserProfilePhoto } from "../UserProfilePhoto";
 import { FreePlanUsage } from "../billing/FreePlanUsage";
-import { Button, LinkButton } from "../primitives/Buttons";
+import { Button } from "../primitives/Buttons";
 import { ClipboardField } from "../primitives/ClipboardField";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
 import { Icon } from "../primitives/Icon";
-import { type IconNames } from "../primitives/NamedIcon";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
@@ -55,7 +56,9 @@ import {
   PopoverSectionHeader,
 } from "../primitives/Popover";
 import { StepNumber } from "../primitives/StepNumber";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { MenuCount, SideMenuItem } from "./SideMenuItem";
+import { SideMenuHeader } from "./SideMenuHeader";
+import { useV3Enabled } from "~/root";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 type SideMenuProject = Pick<
@@ -144,6 +147,12 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               data-action="triggers"
               hasWarning={project.hasInactiveExternalTriggers}
             />
+            <SideMenuItem
+              name="Events"
+              icon={CursorArrowRaysIcon}
+              iconColor="text-sky-500"
+              to={projectEventsPath(organization, project)}
+            />
             <SideMenuItem
               name="HTTP endpoints"
               icon="http-endpoint"
@@ -372,6 +381,7 @@ function ProjectSelector({
 function UserMenu({ user }: { user: SideMenuUser }) {
   const [isProfileMenuOpen, setProfileMenuOpen] = useState(false);
   const navigation = useNavigation();
+  const v3Enabled = useV3Enabled();
 
   useEffect(() => {
     setProfileMenuOpen(false);
@@ -409,6 +419,14 @@ function UserMenu({ user }: { user: SideMenuUser }) {
               icon={UserProfilePhoto}
               leadingIconClassName="text-indigo-500"
             />
+            {v3Enabled && (
+              <PopoverMenuItem
+                to={personalAccessTokensPath()}
+                title="Personal Access Tokens"
+                icon={ShieldCheckIcon}
+                leadingIconClassName="text-emerald-500"
+              />
+            )}
             <PopoverMenuItem
               to={logoutPath()}
               title="Log out"
@@ -421,99 +439,3 @@ function UserMenu({ user }: { user: SideMenuUser }) {
     </Popover>
   );
 }
-
-function SideMenuHeader({ title, children }: { title: string; children: React.ReactNode }) {
-  const [isHeaderMenuOpen, setHeaderMenuOpen] = useState(false);
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    setHeaderMenuOpen(false);
-  }, [navigation.location?.pathname]);
-
-  return (
-    <div className="group flex items-center justify-between pl-1.5">
-      <Paragraph
-        variant="extra-extra-small/caps"
-        className="cursor-default truncate text-slate-500"
-      >
-        {title}
-      </Paragraph>
-      <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
-        <PopoverCustomTrigger className="p-1">
-          <EllipsisHorizontalIcon className="h-4 w-4 text-slate-500 transition group-hover:text-bright" />
-        </PopoverCustomTrigger>
-        <PopoverContent
-          className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
-          align="start"
-        >
-          <div className="flex flex-col gap-1 p-1">{children}</div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
-
-function SideMenuItem({
-  icon,
-  iconColor,
-  name,
-  to,
-  hasWarning,
-  count,
-  target,
-  subItem = false,
-}: {
-  icon?: IconNames | React.ComponentType<any>;
-  iconColor?: string;
-  name: string;
-  to: string;
-  hasWarning?: string | boolean;
-  count?: number;
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-  subItem?: boolean;
-}) {
-  const pathName = usePathName();
-  const isActive = pathName === to;
-
-  return (
-    <LinkButton
-      variant={subItem ? "small-menu-sub-item" : "small-menu-item"}
-      fullWidth
-      textAlignLeft
-      LeadingIcon={icon}
-      leadingIconClassName={isActive ? iconColor : "text-dimmed"}
-      to={to}
-      target={target}
-      className={cn(
-        "text-bright group-hover:bg-slate-850",
-        subItem ? "text-dimmed" : "",
-        isActive ? "bg-slate-850 text-bright" : "group-hover:text-bright"
-      )}
-    >
-      <div className="flex w-full items-center justify-between">
-        {name}
-        <div className="flex items-center gap-1">
-          {count !== undefined && count > 0 && <MenuCount count={count} />}
-          {typeof hasWarning === "string" ? (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" />
-                </TooltipTrigger>
-                <TooltipContent className="flex items-center gap-1 border border-rose-500 bg-rose-500/20 backdrop-blur-xl">
-                  {hasWarning}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ) : (
-            hasWarning && <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" />
-          )}
-        </div>
-      </div>
-    </LinkButton>
-  );
-}
-
-function MenuCount({ count }: { count: number | string }) {
-  return <div className="rounded-full bg-slate-900 px-2 py-1 text-xxs text-dimmed">{count}</div>;
-}

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

@@ -0,0 +1,38 @@
+import { useNavigation } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { Paragraph } from "../primitives/Paragraph";
+import { Popover, PopoverContent, PopoverCustomTrigger } from "../primitives/Popover";
+import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
+
+export function SideMenuHeader({ title, children }: { title: string; children?: React.ReactNode }) {
+  const [isHeaderMenuOpen, setHeaderMenuOpen] = useState(false);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    setHeaderMenuOpen(false);
+  }, [navigation.location?.pathname]);
+
+  return (
+    <div className="group flex items-center justify-between pl-1.5">
+      <Paragraph
+        variant="extra-extra-small/caps"
+        className="cursor-default truncate text-slate-500"
+      >
+        {title}
+      </Paragraph>
+      {children !== undefined ? (
+        <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
+          <PopoverCustomTrigger className="p-1">
+            <EllipsisHorizontalIcon className="h-4 w-4 text-slate-500 transition group-hover:text-bright" />
+          </PopoverCustomTrigger>
+          <PopoverContent
+            className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+            align="start"
+          >
+            <div className="flex flex-col gap-1 p-1">{children}</div>
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { AnchorHTMLAttributes } from "react";
+import { usePathName } from "~/hooks/usePathName";
+import { cn } from "~/utils/cn";
+import { LinkButton } from "../primitives/Buttons";
+import { IconNames } from "../primitives/NamedIcon";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { Icon } from "../primitives/Icon";
+import { IconExclamationCircle } from "@tabler/icons-react";
+
+export function SideMenuItem({
+  icon,
+  iconColor,
+  name,
+  to,
+  hasWarning,
+  count,
+  target,
+  subItem = false,
+}: {
+  icon?: IconNames | React.ComponentType<any>;
+  iconColor?: string;
+  name: string;
+  to: string;
+  hasWarning?: string | boolean;
+  count?: number;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+  subItem?: boolean;
+}) {
+  const pathName = usePathName();
+  const isActive = pathName === to;
+
+  return (
+    <LinkButton
+      variant={subItem ? "small-menu-sub-item" : "small-menu-item"}
+      fullWidth
+      textAlignLeft
+      LeadingIcon={icon}
+      leadingIconClassName={isActive ? iconColor : "text-dimmed"}
+      to={to}
+      target={target}
+      className={cn(
+        "text-bright group-hover:bg-slate-850",
+        subItem ? "text-dimmed" : "",
+        isActive ? "bg-slate-850 text-bright" : "group-hover:text-bright"
+      )}
+    >
+      <div className="flex w-full items-center justify-between">
+        {name}
+        <div className="flex items-center gap-1">
+          {count !== undefined && count > 0 && <MenuCount count={count} />}
+          {typeof hasWarning === "string" ? (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" />
+                </TooltipTrigger>
+                <TooltipContent className="flex items-center gap-1 border border-rose-500 bg-rose-500/20 backdrop-blur-xl">
+                  {hasWarning}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : (
+            hasWarning && <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" />
+          )}
+        </div>
+      </div>
+    </LinkButton>
+  );
+}
+
+export function MenuCount({ count }: { count: number | string }) {
+  return <div className="rounded-full bg-slate-900 px-2 py-1 text-xxs text-dimmed">{count}</div>;
+}

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "~/utils/cn";
+import { motion } from "framer-motion";
 
 const ClientTabs = TabsPrimitive.Root;
 
@@ -48,4 +49,47 @@ const ClientTabsContent = React.forwardRef<
 ));
 ClientTabsContent.displayName = TabsPrimitive.Content.displayName;
 
+export type TabsProps = {
+  tabs: {
+    label: string;
+    value: string;
+  }[];
+  currentValue: string;
+  className?: string;
+  layoutId: string;
+};
+
+export function ClientTabsWithUnderline({ className, tabs, currentValue, layoutId }: TabsProps) {
+  return (
+    <TabsPrimitive.List
+      className={cn(`flex flex-row gap-x-6 border-b border-slate-700`, className)}
+    >
+      {tabs.map((tab, index) => {
+        const isActive = currentValue === tab.value;
+        return (
+          <TabsPrimitive.Trigger
+            key={tab.value}
+            value={tab.value}
+            className={cn(`group flex flex-col items-center`, className)}
+          >
+            <span
+              className={cn(
+                "text-sm transition duration-200",
+                isActive ? "text-indigo-500" : "text-slate-200"
+              )}
+            >
+              {tab.label}
+            </span>
+            {isActive ? (
+              <motion.div layoutId={layoutId} className="mt-1 h-0.5 w-full bg-indigo-500" />
+            ) : (
+              <div className="mt-1 h-0.5 w-full bg-slate-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+            )}
+          </TabsPrimitive.Trigger>
+        );
+      })}
+    </TabsPrimitive.List>
+  );
+}
+
 export { ClientTabs, ClientTabsList, ClientTabsTrigger, ClientTabsContent };

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

@@ -0,0 +1,243 @@
+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";
+
+type DateFieldProps = {
+  label?: string;
+  defaultValue?: Date;
+  minValue?: Date;
+  maxValue?: Date;
+  className?: string;
+  fieldClassName?: string;
+  granularity: Granularity;
+  showGuide?: boolean;
+  showNowButton?: boolean;
+  showClearButton?: boolean;
+  onValueChange?: (value: Date | undefined) => void;
+};
+
+export function DateField({
+  label,
+  defaultValue,
+  onValueChange,
+  minValue,
+  maxValue,
+  granularity,
+  className,
+  fieldClassName,
+  showGuide = false,
+  showNowButton = false,
+  showClearButton = false,
+}: DateFieldProps) {
+  const [value, setValue] = useState<undefined | CalendarDateTime>(
+    utcDateToCalendarDate(defaultValue)
+  );
+
+  const state = useDateFieldState({
+    value: value,
+    onChange: (value) => {
+      if (value) {
+        setValue(value);
+        onValueChange?.(value.toDate("utc"));
+      }
+    },
+    minValue: utcDateToCalendarDate(minValue),
+    maxValue: utcDateToCalendarDate(maxValue),
+    shouldForceLeadingZeros: true,
+    granularity,
+    locale: "en-US",
+    createCalendar: (name: string) => {
+      return createCalendar(name);
+    },
+  });
+
+  //if the passed in value changes, we should update the date
+  useEffect(() => {
+    if (state.value === undefined && defaultValue === undefined) return;
+
+    const calendarDate = utcDateToCalendarDate(defaultValue);
+    //unchanged
+    if (state.value?.toDate("utc").getTime() === defaultValue?.getTime()) {
+      return;
+    }
+
+    setValue(calendarDate);
+  }, [defaultValue]);
+
+  const ref = useRef<null | HTMLDivElement>(null);
+  const { labelProps, fieldProps } = useDateField(
+    {
+      label,
+    },
+    state,
+    ref
+  );
+
+  //render if reverse date order
+  const yearSegment = state.segments.find((s) => s.type === "year")!;
+  const monthSegment = state.segments.find((s) => s.type === "month")!;
+  const daySegment = state.segments.find((s) => s.type === "day")!;
+  const hourSegment = state.segments.find((s) => s.type === "hour")!;
+  const minuteSegment = state.segments.find((s) => s.type === "minute")!;
+  const secondSegment = state.segments.find((s) => s.type === "second")!;
+  const dayPeriodSegment = state.segments.find((s) => s.type === "dayPeriod")!;
+
+  return (
+    <div className={`flex flex-col items-start ${className || ""}`}>
+      <span {...labelProps} className="mb-1 ml-0.5 text-xs text-slate-300">
+        {label}
+      </span>
+      <div className="flex flex-row items-center gap-1">
+        <div
+          {...fieldProps}
+          ref={ref}
+          className={cn(
+            "flex rounded-sm border border-slate-800 bg-midnight-900 p-0.5 px-1.5 transition-colors focus-within:border-slate-500 hover:border-slate-700 focus-within:hover:border-slate-500",
+            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} />
+        </div>
+        {showNowButton && (
+          <Button
+            variant="secondary/small"
+            onClick={() => {
+              const now = new Date();
+              setValue(utcDateToCalendarDate(new Date()));
+              onValueChange?.(now);
+            }}
+          >
+            Now
+          </Button>
+        )}
+        {showClearButton && (
+          <Button
+            variant="secondary/small"
+            LeadingIcon={"close"}
+            onClick={() => {
+              setValue(undefined);
+              onValueChange?.(undefined);
+              state.clearSegment("year");
+              state.clearSegment("month");
+              state.clearSegment("day");
+              state.clearSegment("hour");
+              state.clearSegment("minute");
+              state.clearSegment("second");
+            }}
+          />
+        )}
+      </div>
+      {showGuide && (
+        <div className="mt-1 flex px-2">
+          {state.segments.map((segment, i) => (
+            <DateSegmentGuide key={i} segment={segment} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function utcDateToCalendarDate(date?: Date) {
+  return date
+    ? new CalendarDateTime(
+        date.getUTCFullYear(),
+        date.getUTCMonth(),
+        date.getUTCDate(),
+        date.getUTCHours(),
+        date.getUTCMinutes(),
+        date.getUTCSeconds()
+      )
+    : undefined;
+}
+
+type DateSegmentProps = {
+  segment: DateSegment;
+  state: DateFieldState;
+};
+
+function DateSegment({ segment, state }: DateSegmentProps) {
+  const ref = useRef<null | HTMLDivElement>(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  return (
+    <div
+      {...segmentProps}
+      ref={ref}
+      style={{
+        ...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 ${
+        !segment.isEditable ? "text-slate-500" : "text-bright"
+      }`}
+    >
+      {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
+      <span
+        aria-hidden="true"
+        className="block text-center italic text-slate-500 group-focus:text-white"
+        style={{
+          visibility: segment.isPlaceholder ? undefined : "hidden",
+          height: segment.isPlaceholder ? "" : 0,
+          pointerEvents: "none",
+        }}
+      >
+        {segment.placeholder}
+      </span>
+      {segment.isPlaceholder ? "" : segment.text}
+    </div>
+  );
+}
+
+function literalSegment(text: string): DateSegment {
+  return {
+    type: "literal",
+    text,
+    isPlaceholder: false,
+    isEditable: false,
+    placeholder: "",
+  };
+}
+
+function minWidthForSegment(segment: DateSegment) {
+  if (segment.type === "literal") {
+    return undefined;
+  }
+
+  return String(`${segment.maxValue}`).length + "ch";
+}
+
+function DateSegmentGuide({ segment }: { segment: DateSegment }) {
+  return (
+    <div
+      style={{
+        minWidth: minWidthForSegment(segment),
+      }}
+      className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none ${
+        !segment.isEditable ? "text-slate-500" : "text-bright"
+      }`}
+    >
+      <span className="block text-center italic text-slate-500">
+        {segment.type !== "literal" ? segment.placeholder : segment.text}
+      </span>
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { cn } from "~/utils/cn";
 import type { IconNamesOrString } from "./NamedIcon";
 import { NamedIcon } from "./NamedIcon";
+import { Icon, RenderIcon } from "./Icon";
 
 const variants = {
   large: {
@@ -44,7 +45,7 @@ const variants = {
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   variant?: keyof typeof variants;
-  icon?: IconNamesOrString;
+  icon?: RenderIcon;
   shortcut?: string;
   fullWidth?: boolean;
 };
@@ -59,7 +60,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <div className={cn("relative", fullWidth ? "w-full" : "max-w-max")}>
         {icon && (
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center">
-            <NamedIcon name={icon} className={cn(iconClassName, "text-dimmed")} />
+            <Icon icon={icon} className={cn(iconClassName, "text-dimmed")} />
           </div>
         )}
         <input

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

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       avoidCollisions={true}
       className={cn(
-        "z-50 min-w-max rounded-md border bg-midnight-850 p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-max rounded-md border border-slate-700 bg-midnight-850 p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       style={{

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

@@ -56,7 +56,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-max overflow-hidden rounded-md bg-popover text-bright shadow-md animate-in fade-in-40",
+        "relative z-50 min-w-max overflow-hidden rounded-md border border-slate-700 bg-popover text-bright shadow-md animate-in fade-in-40",
         position === "popper" && "translate-y-1",
         className
       )}
@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
     >
       <SelectPrimitive.Viewport
         className={cn(
-          "border border-slate-800 px-1 py-0",
+          "px-1 py-0",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}

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

@@ -122,10 +122,26 @@ type TableCellProps = TableCellBasicProps & {
   to?: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   hasAction?: boolean;
+  isSticky?: boolean;
 };
 
+const stickyStyles =
+  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover:before:to-slate-900";
+
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ className, alignment = "left", children, colSpan, to, onClick, hasAction = false }, ref) => {
+  (
+    {
+      className,
+      alignment = "left",
+      children,
+      colSpan,
+      to,
+      onClick,
+      hasAction = false,
+      isSticky = false,
+    },
+    ref
+  ) => {
     let alignmentClassName = "text-left";
     switch (alignment) {
       case "center":
@@ -154,6 +170,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             ? "cursor-pointer group-hover:bg-slate-900"
             : "px-4 py-3 align-middle",
           !to && !onClick && alignmentClassName,
+          isSticky && stickyStyles,
           className
         )}
         colSpan={colSpan}
@@ -174,9 +191,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   }
 );
 
-const stickyStyles =
-  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover:before:to-slate-900";
-
 export const TableCellChevron = forwardRef<
   HTMLTableCellElement,
   {
@@ -189,7 +203,8 @@ export const TableCellChevron = forwardRef<
 >(({ className, to, children, isSticky, onClick }, ref) => {
   return (
     <TableCell
-      className={cn(isSticky && stickyStyles, className)}
+      className={className}
+      isSticky={isSticky}
       to={to}
       onClick={onClick}
       ref={ref}
@@ -213,7 +228,8 @@ export const TableCellMenu = forwardRef<
   const [isOpen, setIsOpen] = useState(false);
   return (
     <TableCell
-      className={cn(isSticky && stickyStyles, className)}
+      className={className}
+      isSticky={isSticky}
       onClick={onClick}
       ref={ref}
       alignment="right"

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

@@ -0,0 +1,230 @@
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  ExclamationTriangleIcon,
+  NoSymbolIcon,
+  PauseCircleIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/20/solid";
+import { useNavigate } from "@remix-run/react";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { cn } from "~/utils/cn";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { Paragraph } from "../primitives/Paragraph";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/Select";
+import { Spinner } from "../primitives/Spinner";
+import {
+  FilterableEnvironment,
+  FilterableStatus,
+  RunListSearchSchema,
+  environmentKeys,
+  statusKeys,
+} from "./RunStatuses";
+import { TimeFrameFilter } from "./TimeFrameFilter";
+import { Button } from "../primitives/Buttons";
+import { useCallback } from "react";
+
+export function RunsFilters() {
+  const navigate = useNavigate();
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const { environment, status, from, to } = RunListSearchSchema.parse(
+    Object.fromEntries(searchParams.entries())
+  );
+
+  const handleFilterChange = useCallback((filterType: string, value: string | undefined) => {
+    if (value) {
+      searchParams.set(filterType, value);
+    } else {
+      searchParams.delete(filterType);
+    }
+    searchParams.delete("cursor");
+    searchParams.delete("direction");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  const handleStatusChange = useCallback((value: FilterableStatus | "ALL") => {
+    handleFilterChange("status", value === "ALL" ? undefined : value);
+  }, []);
+
+  const handleEnvironmentChange = useCallback((value: FilterableEnvironment | "ALL") => {
+    handleFilterChange("environment", value === "ALL" ? undefined : value);
+  }, []);
+
+  const handleTimeFrameChange = useCallback((range: { from?: number; to?: number }) => {
+    if (range.from) {
+      searchParams.set("from", range.from.toString());
+    } else {
+      searchParams.delete("from");
+    }
+
+    if (range.to) {
+      searchParams.set("to", range.to.toString());
+    } else {
+      searchParams.delete("to");
+    }
+
+    searchParams.delete("cursor");
+    searchParams.delete("direction");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    searchParams.delete("status");
+    searchParams.delete("environment");
+    searchParams.delete("from");
+    searchParams.delete("to");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  }, []);
+
+  return (
+    <div className="flex flex-row justify-between gap-x-2">
+      <SelectGroup>
+        <Select
+          name="environment"
+          value={environment ?? "ALL"}
+          onValueChange={handleEnvironmentChange}
+        >
+          <SelectTrigger size="secondary/small" width="full">
+            <SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph variant="extra-small" className="pl-0.5">
+                All environments
+              </Paragraph>
+            </SelectItem>
+            {environmentKeys.map((env) => (
+              <SelectItem key={env} value={env}>
+                <div className="flex items-center gap-x-2">
+                  <EnvironmentLabel environment={{ type: env }} />
+                  <Paragraph variant="extra-small">environment</Paragraph>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
+      <SelectGroup>
+        <Select name="status" value={status ?? "ALL"} onValueChange={handleStatusChange}>
+          <SelectTrigger size="secondary/small" width="full">
+            <SelectValue placeholder="Select status" className="ml-2 p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph variant="extra-small" className="pl-0.5">
+                All statuses
+              </Paragraph>
+            </SelectItem>
+            {statusKeys.map((status) => (
+              <SelectItem key={status} value={status}>
+                {
+                  <span className="flex items-center gap-1 text-xs">
+                    <FilterStatusIcon status={status} className="h-4 w-4" />
+                    <FilterStatusLabel status={status} />
+                  </span>
+                }
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+
+      <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
+
+      <Button variant="tertiary/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
+        Clear
+      </Button>
+    </div>
+  );
+}
+
+export function FilterStatusLabel({ status }: { status: FilterableStatus }) {
+  return <span className={filterStatusClassNameColor(status)}>{filterStatusTitle(status)}</span>;
+}
+
+export function FilterStatusIcon({
+  status,
+  className,
+}: {
+  status: FilterableStatus;
+  className: string;
+}) {
+  switch (status) {
+    case "COMPLETED":
+      return <CheckCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "WAITING":
+      return <ClockIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "QUEUED":
+      return <PauseCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "IN_PROGRESS":
+      return <Spinner className={cn(filterStatusClassNameColor(status), className)} />;
+    case "TIMEDOUT":
+      return (
+        <ExclamationTriangleIcon className={cn(filterStatusClassNameColor(status), className)} />
+      );
+    case "CANCELED":
+      return <NoSymbolIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    case "FAILED":
+      return <XCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}
+
+export function filterStatusTitle(status: FilterableStatus): string {
+  switch (status) {
+    case "QUEUED":
+      return "Queued";
+    case "IN_PROGRESS":
+      return "In progress";
+    case "WAITING":
+      return "Waiting";
+    case "COMPLETED":
+      return "Completed";
+    case "FAILED":
+      return "Failed";
+    case "CANCELED":
+      return "Canceled";
+    case "TIMEDOUT":
+      return "Timed out";
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}
+
+export function filterStatusClassNameColor(status: FilterableStatus): string {
+  switch (status) {
+    case "QUEUED":
+      return "text-slate-500";
+    case "IN_PROGRESS":
+      return "text-blue-500";
+    case "WAITING":
+      return "text-blue-500";
+    case "COMPLETED":
+      return "text-green-500";
+    case "FAILED":
+      return "text-rose-500";
+    case "CANCELED":
+      return "text-slate-500";
+    case "TIMEDOUT":
+      return "text-amber-300";
+    default: {
+      const _exhaustiveCheck: never = status;
+      throw new Error(`Non-exhaustive match for value: ${status}`);
+    }
+  }
+}

apps/webapp/app/components/runs/RunStatuses.tsx

@@ -10,6 +10,7 @@ import {
 import type { JobRunStatus } from "@trigger.dev/database";
 import { cn } from "~/utils/cn";
 import { Spinner } from "../primitives/Spinner";
+import { z } from "zod";
 
 export function RunStatus({ status }: { status: JobRunStatus }) {
   return (
@@ -127,3 +128,52 @@ export function runStatusClassNameColor(status: JobRunStatus): string {
     }
   }
 }
+
+export const DirectionSchema = z.union([z.literal("forward"), z.literal("backward")]);
+export type Direction = z.infer<typeof DirectionSchema>;
+
+export const FilterableStatus = z.union([
+  z.literal("QUEUED"),
+  z.literal("IN_PROGRESS"),
+  z.literal("WAITING"),
+  z.literal("COMPLETED"),
+  z.literal("FAILED"),
+  z.literal("TIMEDOUT"),
+  z.literal("CANCELED"),
+]);
+export type FilterableStatus = z.infer<typeof FilterableStatus>;
+
+export const FilterableEnvironment = z.union([
+  z.literal("DEVELOPMENT"),
+  z.literal("STAGING"),
+  z.literal("PRODUCTION"),
+]);
+export type FilterableEnvironment = z.infer<typeof FilterableEnvironment>;
+export const environmentKeys: FilterableEnvironment[] = ["DEVELOPMENT", "STAGING", "PRODUCTION"];
+
+export const RunListSearchSchema = z.object({
+  cursor: z.string().optional(),
+  direction: DirectionSchema.optional(),
+  status: FilterableStatus.optional(),
+  environment: FilterableEnvironment.optional(),
+  from: z
+    .string()
+    .transform((value) => parseInt(value))
+    .optional(),
+  to: z
+    .string()
+    .transform((value) => parseInt(value))
+    .optional(),
+});
+
+export const filterableStatuses: Record<FilterableStatus, JobRunStatus[]> = {
+  QUEUED: ["QUEUED", "WAITING_TO_EXECUTE", "PENDING", "WAITING_ON_CONNECTIONS"],
+  IN_PROGRESS: ["STARTED", "EXECUTING", "PREPROCESSING"],
+  WAITING: ["WAITING_TO_CONTINUE"],
+  COMPLETED: ["SUCCESS"],
+  FAILED: ["FAILURE", "UNRESOLVED_AUTH", "INVALID_PAYLOAD", "ABORTED"],
+  TIMEDOUT: ["TIMED_OUT"],
+  CANCELED: ["CANCELED"],
+};
+
+export const statusKeys: FilterableStatus[] = Object.keys(filterableStatuses) as FilterableStatus[];

apps/webapp/app/components/runs/TimeFrameFilter.tsx

@@ -0,0 +1,243 @@
+import { ChevronDownIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+import {
+  Calendar,
+  CalendarDateTime,
+  DateValue,
+  getLocalTimeZone,
+  today,
+} from "@internationalized/date";
+import { cn } from "~/utils/cn";
+import { Button } from "../primitives/Buttons";
+import { ClientTabs, ClientTabsContent, ClientTabsWithUnderline } from "../primitives/ClientTabs";
+import { formatDateTime } from "../primitives/DateTime";
+import { Paragraph } from "../primitives/Paragraph";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
+import { DateField } from "../primitives/DateField";
+import { useLocales } from "../primitives/LocaleProvider";
+import { createCalendar } from "@internationalized/date";
+
+type RunTimeFrameFilterProps = {
+  from?: number;
+  to?: number;
+  onRangeChanged: (range: { from?: number; to?: number }) => void;
+};
+
+type Mode = "absolute" | "relative";
+
+export function TimeFrameFilter({ from, to, onRangeChanged }: RunTimeFrameFilterProps) {
+  const [activeTab, setActiveTab] = useState<Mode>("absolute");
+  const [isOpen, setIsOpen] = useState(false);
+  const [relativeTimeSeconds, setRelativeTimeSeconds] = useState<number | undefined>();
+
+  const fromDate = from ? new Date(from) : undefined;
+  const toDate = to ? new Date(to) : undefined;
+
+  const relativeTimeFrameChanged = useCallback((value: number) => {
+    const to = new Date().getTime();
+    const from = to - value;
+    onRangeChanged({ from, to });
+    setRelativeTimeSeconds(value);
+  }, []);
+
+  const absoluteTimeFrameChanged = useCallback(({ from, to }: { from?: Date; to?: Date }) => {
+    setRelativeTimeSeconds(undefined);
+    const fromTime = from?.getTime();
+    const toTime = to?.getTime();
+    onRangeChanged({ from: fromTime, to: toTime });
+  }, []);
+
+  return (
+    <Popover onOpenChange={(open) => setIsOpen(open)} open={isOpen} modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="secondary/small"
+          className="bg-slate-800 group-hover:bg-tertiary-foreground"
+        >
+          <Paragraph variant="extra-small" className="mr-2">
+            {title(from, to, relativeTimeSeconds)}
+          </Paragraph>
+          <ChevronDownIcon className="h-4 w-4 text-bright" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="start" className="bg-popover p-2">
+        <ClientTabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as Mode)}
+          className="p-1"
+        >
+          <ClientTabsWithUnderline
+            tabs={[
+              { label: "Absolute", value: "absolute" },
+              { label: "Relative", value: "relative" },
+            ]}
+            currentValue={activeTab}
+            layoutId={"time-tabs"}
+          />
+          <ClientTabsContent value={"absolute"}>
+            <AbsoluteTimeFrame
+              from={fromDate}
+              to={toDate}
+              onValueChange={absoluteTimeFrameChanged}
+            />
+          </ClientTabsContent>
+          <ClientTabsContent value={"relative"}>
+            <RelativeTimeFrame
+              value={relativeTimeSeconds}
+              onValueChange={relativeTimeFrameChanged}
+            />
+          </ClientTabsContent>
+        </ClientTabs>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function title(
+  from: number | undefined,
+  to: number | undefined,
+  relativeTimeSeconds: number | undefined
+): string {
+  if (!from && !to) {
+    return "All time periods";
+  }
+
+  if (relativeTimeSeconds !== undefined) {
+    return timeFrameValues.find((t) => t.value === relativeTimeSeconds)?.label ?? "Timeframe";
+  }
+
+  let fromString = from ? formatDateTime(new Date(from), "UTC", ["en-US"], false, true) : undefined;
+  let toString = to ? formatDateTime(new Date(to), "UTC", ["en-US"], false, true) : undefined;
+  if (from && !to) {
+    return `From ${fromString} (UTC)`;
+  }
+
+  if (!from && to) {
+    return `To ${toString} (UTC)`;
+  }
+
+  return `${fromString} - ${toString} (UTC)`;
+}
+
+function RelativeTimeFrame({
+  value,
+  onValueChange,
+}: {
+  value?: number;
+  onValueChange: (value: number) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-1 pt-2">
+      {timeFrameValues.map((timeframe) => (
+        <Button
+          key={timeframe.value}
+          variant={value === timeframe.value ? "primary/small" : "tertiary/small"}
+          className={cn(
+            "w-full",
+            value !== timeframe.value && "border border-slate-700 group-hover:bg-slate-700"
+          )}
+          onClick={() => {
+            onValueChange(timeframe.value);
+          }}
+        >
+          <Paragraph variant="extra-small">{timeframe.label}</Paragraph>
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+const timeFrameValues = [
+  {
+    label: "5 mins",
+    value: 5 * 60 * 1000,
+  },
+  {
+    label: "15 mins",
+    value: 15 * 60 * 1000,
+  },
+  {
+    label: "30 mins",
+    value: 30 * 60 * 1000,
+  },
+  {
+    label: "1 hour",
+    value: 60 * 60 * 1000,
+  },
+  {
+    label: "3 hours",
+    value: 3 * 60 * 60 * 1000,
+  },
+  {
+    label: "6 hours",
+    value: 6 * 60 * 60 * 1000,
+  },
+  {
+    label: "1 day",
+    value: 24 * 60 * 60 * 1000,
+  },
+  {
+    label: "3 days",
+    value: 3 * 24 * 60 * 60 * 1000,
+  },
+  {
+    label: "7 days",
+    value: 7 * 24 * 60 * 60 * 1000,
+  },
+  {
+    label: "10 days",
+    value: 10 * 24 * 60 * 60 * 1000,
+  },
+  {
+    label: "14 days",
+    value: 14 * 24 * 60 * 60 * 1000,
+  },
+  {
+    label: "30 days",
+    value: 30 * 24 * 60 * 60 * 1000,
+  },
+];
+
+export type RelativeTimeFrameItem = (typeof timeFrameValues)[number];
+
+function AbsoluteTimeFrame({
+  from,
+  to,
+  onValueChange,
+}: {
+  from?: Date;
+  to?: Date;
+  onValueChange: (value: { from?: Date; to?: Date }) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-2 pt-2">
+      <div className="flex flex-col justify-start gap-2">
+        <div className="flex flex-row items-center gap-1">
+          <DateField
+            label="From (UTC)"
+            defaultValue={from}
+            onValueChange={(value) => {
+              onValueChange({ from: value, to: to });
+            }}
+            granularity="second"
+            showNowButton
+            showClearButton
+          />
+        </div>
+        <div className="flex flex-row items-center gap-1">
+          <DateField
+            label="To (UTC)"
+            defaultValue={to}
+            onValueChange={(value) => {
+              onValueChange({ from: from, to: value });
+            }}
+            granularity="second"
+            showNowButton
+            showClearButton
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/webapp/app/components/stories/FreePlanUsage.stories.tsx

@@ -22,6 +22,7 @@ const mockOrganization: MatchedOrganization = {
   ],
   hasUnconfiguredIntegrations: false,
   memberCount: 1,
+  runsEnabled: true,
 };
 
 export const ProgressBar: Story = {

apps/webapp/app/env.server.ts

@@ -67,6 +67,9 @@ const EnvironmentSchema = z.object({
 
   TUNNEL_HOST: z.string().optional(),
   TUNNEL_SECRET_KEY: z.string().optional(),
+
+  //v3
+  V3_ENABLED: z.string().default("false"),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/hooks/useOptimisticLocation.ts

@@ -0,0 +1,12 @@
+import { useLocation, useNavigation } from "@remix-run/react";
+
+export function useOptimisticLocation() {
+  const navigation = useNavigation();
+  const location = useLocation();
+
+  if (navigation.state === "idle" || !navigation.location) {
+    return location;
+  }
+
+  return navigation.location;
+}

apps/webapp/app/presenters/EventListPresenter.server.ts

@@ -0,0 +1,174 @@
+import { PrismaClient, prisma } from "~/db.server";
+import { Direction, FilterableEnvironment } from "~/components/runs/RunStatuses";
+import { getUsername } from "~/utils/username";
+
+type EventListOptions = {
+  userId: string;
+  organizationSlug: string;
+  projectSlug: string;
+  direction?: Direction;
+  filterEnvironment?: FilterableEnvironment;
+  cursor?: string;
+  pageSize?: number;
+  from?: number;
+  to?: number;
+};
+
+const DEFAULT_PAGE_SIZE = 20;
+
+export type EventList = Awaited<ReturnType<EventListPresenter["call"]>>;
+
+export class EventListPresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({
+    userId,
+    organizationSlug,
+    projectSlug,
+    filterEnvironment,
+    direction = "forward",
+    cursor,
+    pageSize = DEFAULT_PAGE_SIZE,
+    from,
+    to,
+  }: EventListOptions) {
+    const directionMultiplier = direction === "forward" ? 1 : -1;
+
+    // Find the organization that the user is a member of
+    const organization = await this.#prismaClient.organization.findFirstOrThrow({
+      where: {
+        slug: organizationSlug,
+        members: { some: { userId } },
+      },
+    });
+
+    // Find the project scoped to the organization
+    const project = await this.#prismaClient.project.findFirstOrThrow({
+      where: {
+        slug: projectSlug,
+        organizationId: organization.id,
+      },
+    });
+
+    // Find all runtimeEnvironments that the user has access to
+    const environments = await this.#prismaClient.runtimeEnvironment.findMany({
+      where: {
+        projectId: project.id,
+      },
+    });
+
+    const events = await this.#prismaClient.eventRecord.findMany({
+      select: {
+        id: true,
+        name: true,
+        deliverAt: true,
+        deliveredAt: true,
+        isTest: true,
+        createdAt: true,
+        cancelledAt: true,
+        environment: {
+          select: {
+            type: true,
+            slug: true,
+            orgMember: {
+              select: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    displayName: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+        runs: {
+          select: {
+            id: true,
+          },
+        },
+      },
+      where: {
+        internal: false,
+        name: {
+          notIn: ["trigger.scheduled", "dev.trigger.scheduled"],
+        },
+        projectId: project.id,
+        organizationId: organization.id,
+        environmentId: {
+          in: environments.map((environment) => environment.id),
+        },
+        environment: filterEnvironment ? { type: filterEnvironment } : undefined,
+        createdAt: {
+          gte: from ? new Date(from).toISOString() : undefined,
+          lte: to ? new Date(to).toISOString() : undefined,
+        },
+      },
+      orderBy: [{ id: "desc" }],
+      //take an extra record to tell if there are more
+      take: directionMultiplier * (pageSize + 1),
+      //skip the cursor if there is one
+      skip: cursor ? 1 : 0,
+      cursor: cursor
+        ? {
+            id: cursor,
+          }
+        : undefined,
+    });
+
+    const hasMore = events.length > pageSize;
+
+    //get cursors for next and previous pages
+    let next: string | undefined;
+    let previous: string | undefined;
+    switch (direction) {
+      case "forward":
+        previous = cursor ? events.at(0)?.id : undefined;
+        if (hasMore) {
+          next = events[pageSize - 1]?.id;
+        }
+        break;
+      case "backward":
+        if (hasMore) {
+          previous = events[1]?.id;
+          next = events[pageSize]?.id;
+        } else {
+          next = events[pageSize - 1]?.id;
+        }
+        break;
+    }
+
+    const eventsToReturn =
+      direction === "backward" && hasMore
+        ? events.slice(1, pageSize + 1)
+        : events.slice(0, pageSize);
+
+    return {
+      events: eventsToReturn.map((event) => ({
+        id: event.id,
+        name: event.name,
+        deliverAt: event.deliverAt,
+        deliveredAt: event.deliveredAt,
+        createdAt: event.createdAt,
+        cancelledAt: event.cancelledAt,
+        isTest: event.isTest,
+        environment: {
+          type: event.environment.type,
+          slug: event.environment.slug,
+          userId: event.environment.orgMember?.user.id,
+          userName: getUsername(event.environment.orgMember?.user),
+        },
+        runs: event.runs.length,
+      })),
+      pagination: {
+        next,
+        previous,
+      },
+    };
+  }
+}

apps/webapp/app/presenters/EventPresenter.server.ts

@@ -0,0 +1,68 @@
+import { PrismaClient, prisma } from "~/db.server";
+
+export type Event = NonNullable<Awaited<ReturnType<EventPresenter["call"]>>>;
+
+export class EventPresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({
+    userId,
+    projectSlug,
+    organizationSlug,
+    eventId,
+  }: {
+    userId: string;
+    projectSlug: string;
+    organizationSlug: string;
+    eventId: string;
+  }) {
+    // Find the organization that the user is a member of
+    const organization = await this.#prismaClient.organization.findFirstOrThrow({
+      where: {
+        slug: organizationSlug,
+        members: { some: { userId } },
+      },
+    });
+
+    // Find the project scoped to the organization
+    const project = await this.#prismaClient.project.findFirstOrThrow({
+      where: {
+        slug: projectSlug,
+        organizationId: organization.id,
+      },
+    });
+
+    const event = await this.#prismaClient.eventRecord.findFirst({
+      select: {
+        id: true,
+        name: true,
+        payload: true,
+        context: true,
+        timestamp: true,
+        deliveredAt: true,
+      },
+      where: {
+        id: eventId,
+        projectId: project.id,
+        organizationId: organization.id,
+      },
+    });
+
+    if (!event) {
+      throw new Error("Could not find Event");
+    }
+
+    return {
+      id: event.id,
+      name: event.name,
+      timestamp: event.timestamp,
+      payload: JSON.stringify(event.payload, null, 2),
+      context: JSON.stringify(event.context, null, 2),
+      deliveredAt: event.deliveredAt,
+    };
+  }
+}

apps/webapp/app/presenters/OrganizationsPresenter.server.ts

@@ -94,6 +94,7 @@ export class OrganizationsPresenter {
         })),
         hasUnconfiguredIntegrations: org._count.integrations > 0,
         memberCount: org._count.members,
+        runsEnabled: org.runsEnabled,
       };
     });
   }

apps/webapp/app/presenters/RunListPresenter.server.ts

@@ -1,21 +1,26 @@
-import { JobRunStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
 import { z } from "zod";
+import {
+  Direction,
+  FilterableEnvironment,
+  FilterableStatus,
+  filterableStatuses,
+} from "~/components/runs/RunStatuses";
 import { PrismaClient, prisma } from "~/db.server";
-import { DirectionSchema } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
 import { getUsername } from "~/utils/username";
 
-export type Direction = z.infer<typeof DirectionSchema>;
-
 type RunListOptions = {
   userId: string;
+  eventId?: string;
   jobSlug?: string;
   organizationSlug: string;
   projectSlug: string;
   direction?: Direction;
-  filterStatus?: JobRunStatus[];
-  filterEnvironment?: RuntimeEnvironmentType;
+  filterStatus?: FilterableStatus;
+  filterEnvironment?: FilterableEnvironment;
   cursor?: string;
   pageSize?: number;
+  from?: number;
+  to?: number;
 };
 
 const DEFAULT_PAGE_SIZE = 20;
@@ -31,6 +36,7 @@ export class RunListPresenter {
 
   public async call({
     userId,
+    eventId,
     jobSlug,
     organizationSlug,
     projectSlug,
@@ -39,7 +45,11 @@ export class RunListPresenter {
     direction = "forward",
     cursor,
     pageSize = DEFAULT_PAGE_SIZE,
+    from,
+    to,
   }: RunListOptions) {
+    const filterStatuses = filterStatus ? filterableStatuses[filterStatus] : undefined;
+
     const directionMultiplier = direction === "forward" ? 1 : -1;
 
     // Find the organization that the user is a member of
@@ -74,6 +84,10 @@ export class RunListPresenter {
         })
       : undefined;
 
+    const event = eventId
+      ? await this.#prismaClient.eventRecord.findUnique({ where: { id: eventId } })
+      : undefined;
+
     const runs = await this.#prismaClient.jobRun.findMany({
       select: {
         id: true,
@@ -114,14 +128,19 @@ export class RunListPresenter {
         },
       },
       where: {
+        eventId: event?.id,
         jobId: job?.id,
         projectId: project.id,
         organizationId: organization.id,
         environmentId: {
           in: environments.map((environment) => environment.id),
         },
-        status: filterStatus ? { in: filterStatus } : undefined,
+        status: filterStatuses ? { in: filterStatuses } : undefined,
         environment: filterEnvironment ? { type: filterEnvironment } : undefined,
+        startedAt: {
+          gte: from ? new Date(from).toISOString() : undefined,
+          lte: to ? new Date(to).toISOString() : undefined,
+        },
       },
       orderBy: [{ id: "desc" }],
       //take an extra record to tell if there are more

apps/webapp/app/presenters/TriggerSourcePresenter.server.ts

@@ -2,7 +2,8 @@ import { TriggerSource, User } from "@trigger.dev/database";
 import { PrismaClient, prisma } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
-import { Direction, RunList, RunListPresenter } from "./RunListPresenter.server";
+import { RunList, RunListPresenter } from "./RunListPresenter.server";
+import { Direction } from "~/components/runs/RunStatuses";
 
 export class TriggerSourcePresenter {
   #prismaClient: PrismaClient;

apps/webapp/app/presenters/WebhookDeliveryListPresenter.server.ts

@@ -1,5 +1,5 @@
+import { Direction } from "~/components/runs/RunStatuses";
 import { PrismaClient, prisma } from "~/db.server";
-import { Direction } from "./RunListPresenter.server";
 
 type RunListOptions = {
   userId: string;

apps/webapp/app/presenters/WebhookDeliveryPresenter.server.ts

@@ -2,9 +2,9 @@ import { User, Webhook } from "@trigger.dev/database";
 import { PrismaClient, prisma } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
-import { Direction } from "./RunListPresenter.server";
 import { organizationPath, projectPath } from "~/utils/pathBuilder";
 import { WebhookDeliveryListPresenter } from "./WebhookDeliveryListPresenter.server";
+import { Direction } from "~/components/runs/RunStatuses";
 
 export class WebhookDeliveryPresenter {
   #prismaClient: PrismaClient;

apps/webapp/app/presenters/WebhookSourcePresenter.server.ts

@@ -2,8 +2,9 @@ import { User, Webhook } from "@trigger.dev/database";
 import { PrismaClient, prisma } from "~/db.server";
 import { Organization } from "~/models/organization.server";
 import { Project } from "~/models/project.server";
-import { Direction, RunListPresenter } from "./RunListPresenter.server";
+import { RunListPresenter } from "./RunListPresenter.server";
 import { organizationPath, projectPath } from "~/utils/pathBuilder";
+import { Direction } from "~/components/runs/RunStatuses";
 
 export class WebhookSourcePresenter {
   #prismaClient: PrismaClient;

apps/webapp/app/root.tsx

@@ -1,7 +1,15 @@
 import { ErrorBoundary as HighlightErrorBoundary } from "@highlight-run/react";
 import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useMatches,
+} from "@remix-run/react";
 import { metaV1 } from "@remix-run/v1-meta";
 import { TypedMetaFunction, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExternalScripts } from "remix-utils/external-scripts";
@@ -16,6 +24,7 @@ import { env } from "./env.server";
 import { featuresForRequest } from "./features.server";
 import { useHighlight } from "./hooks/useHighlight";
 import { usePostHog } from "./hooks/usePostHog";
+import { useTypedMatchesData } from "./hooks/useTypedMatchData";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
 
@@ -28,14 +37,24 @@ export const meta: TypedMetaFunction<typeof loader> = (args) => {
     title: `Trigger.dev${appEnvTitleTag(args.data?.appEnv)}`,
     charset: "utf-8",
     viewport: "width=1024, initial-scale=1",
+    robots: args.data.features.isManagedCloud ? "index, follow" : "noindex, nofollow",
   });
 };
 
+export function useV3Enabled() {
+  const routeMatch = useTypedMatchesData<typeof loader>({
+    id: "root",
+  });
+
+  return routeMatch?.v3Enabled ?? false;
+}
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const session = await getSession(request.headers.get("cookie"));
   const toastMessage = session.get("toastMessage") as ToastMessage;
   const posthogProjectKey = env.POSTHOG_PROJECT_KEY;
   const highlightProjectId = env.HIGHLIGHT_PROJECT_ID;
+  const v3Enabled = env.V3_ENABLED === "true";
   const features = featuresForRequest(request);
 
   return typedjson(
@@ -47,6 +66,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       features,
       appEnv: env.APP_ENV,
       appOrigin: env.APP_ORIGIN,
+      v3Enabled,
     },
     { headers: { "Set-Cookie": await commitSession(session) } }
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx

@@ -96,7 +96,7 @@ export default function Page() {
         <div className="flex flex-col gap-5 rounded border border-border p-6">
           {hitsRunLimit && (
             <Callout
-              variant={"pricing"}
+              variant={"error"}
               cta={
                 <LinkButton
                   variant="primary/small"
@@ -108,7 +108,7 @@ export default function Page() {
                 </LinkButton>
               }
             >
-              <Paragraph variant="small">
+              <Paragraph variant="small" className="text-white">
                 You have exceeded the monthly{" "}
                 {formatNumberCompact(currentPlan?.subscription?.limits.runs ?? 0)} runs limit.
                 Upgrade to a paid plan before{" "}

apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx

@@ -65,7 +65,7 @@ export default function Page() {
         </Callout>
       )}
       {hitRunLimit && (
-        <Callout variant={"pricing"}>
+        <Callout variant={"error"}>
           {`You have exceeded the monthly
           ${formatNumberCompact(currentPlan!.subscription!.limits.runs!)} runs limit. Upgrade so you
           can continue to perform runs.`}

apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations/route.tsx

@@ -99,7 +99,7 @@ export default function Integrations() {
       </PageHeader>
 
       <PageBody scrollable={false}>
-        <div className="grid h-full max-w-full grid-cols-[2fr_3fr] gap-4 divide-x divide-slate-900 overflow-hidden">
+        <div className="grid h-full max-w-full grid-cols-[2fr_3fr] divide-x divide-slate-900 overflow-hidden">
           <PossibleIntegrationsList
             options={options}
             organizationId={organization.id}
@@ -142,7 +142,7 @@ function PossibleIntegrationsList({
 
   return (
     <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-      <div className="py-4 pl-4">
+      <div className="p-4">
         <div className="flex items-center justify-between">
           <Header2 className="mb-2">Connect an API</Header2>
           <Switch

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events.$eventParam/route.tsx

@@ -0,0 +1,131 @@
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { requireUserId } from "~/services/session.server";
+import { EventParamSchema, projectEventsPath, projectPath } from "~/utils/pathBuilder";
+import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { Handle } from "~/utils/handle";
+import { EventDetail } from "~/components/event/EventDetail";
+import { EventPresenter } from "~/presenters/EventPresenter.server";
+import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { Fragment } from "react";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
+import { RunListPresenter } from "~/presenters/RunListPresenter.server";
+import { RunsTable } from "~/components/runs/RunsTable";
+import { RunsFilters } from "~/components/runs/RunFilters";
+import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
+import { useUser } from "~/hooks/useUser";
+import { useNavigation } from "@remix-run/react";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { eventParam, projectParam, organizationSlug } = EventParamSchema.parse(params);
+
+  const url = new URL(request.url);
+  const s = Object.fromEntries(url.searchParams.entries());
+  const searchParams = RunListSearchSchema.parse(s);
+
+  const presenter = new EventPresenter();
+  try {
+    const event = await presenter.call({
+      userId,
+      projectSlug: projectParam,
+      organizationSlug,
+      eventId: eventParam,
+    });
+
+    if (!event) {
+      throw new Response("Not Found", { status: 404 });
+    }
+
+    const runsPresenter = new RunListPresenter();
+
+    const list = await runsPresenter.call({
+      userId,
+      filterEnvironment: searchParams.environment,
+      filterStatus: searchParams.status,
+      eventId: event.id,
+      projectSlug: projectParam,
+      organizationSlug,
+      direction: searchParams.direction,
+      cursor: searchParams.cursor,
+      from: searchParams.from,
+      to: searchParams.to,
+    });
+
+    return typedjson({ event, list });
+  } catch (e) {
+    console.log(e);
+    throw new Response(e instanceof Error ? e.message : JSON.stringify(e), { status: 404 });
+  }
+};
+
+export const handle: Handle = {
+  breadcrumb: (match) => {
+    const eventData = useTypedMatchData<typeof loader>(match);
+
+    return (
+      <Fragment>
+        {eventData && eventData.event && (
+          <BreadcrumbLink to={match.pathname} title={eventData.event.name} />
+        )}
+      </Fragment>
+    );
+  },
+};
+
+export default function Page() {
+  const { event, list } = useTypedLoaderData<typeof loader>();
+  const navigation = useNavigation();
+  const isLoading = navigation.state !== "idle";
+  const organization = useOrganization();
+  const project = useProject();
+  const user = useUser();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitleRow>
+          <PageTitle
+            title={event.name}
+            backButton={{
+              to: projectEventsPath(organization, project),
+              text: "Events",
+            }}
+          />
+        </PageTitleRow>
+      </PageHeader>
+
+      <PageBody scrollable={false}>
+        <div className="grid h-full grid-cols-2">
+          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+            <EventDetail event={event} />
+          </div>
+
+          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+            <div className="mb-2 flex items-center justify-between gap-x-2">
+              <RunsFilters />
+              <div className="flex items-center justify-end gap-x-2">
+                <ListPagination list={list} />
+              </div>
+            </div>
+
+            <RunsTable
+              total={list.runs.length}
+              hasFilters={false}
+              runs={list.runs}
+              isLoading={isLoading}
+              showJob={true}
+              runsParentPath={projectPath(organization, project)}
+              currentUser={user}
+            />
+            <ListPagination list={list} className="mt-2 justify-end" />
+          </div>
+        </div>
+      </PageBody>
+    </PageContainer>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events._index/route.tsx

@@ -0,0 +1,95 @@
+import { useNavigation } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import {
+  PageButtons,
+  PageDescription,
+  PageHeader,
+  PageTitle,
+  PageTitleRow,
+} from "~/components/primitives/PageHeader";
+import { EventsTable } from "~/components/events/EventsTable";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { EventListPresenter } from "~/presenters/EventListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { ProjectParamSchema, docsPath, projectPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
+import { EventListSearchSchema } from "~/components/events/EventStatuses";
+import { useUser } from "~/hooks/useUser";
+import { EventsFilters } from "~/components/events/EventsFilters";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { projectParam, organizationSlug } = ProjectParamSchema.parse(params);
+
+  const url = new URL(request.url);
+  const s = Object.fromEntries(url.searchParams.entries());
+  const searchParams = EventListSearchSchema.parse(s);
+
+  const presenter = new EventListPresenter();
+  const list = await presenter.call({
+    userId,
+    filterEnvironment: searchParams.environment,
+    projectSlug: projectParam,
+    organizationSlug,
+    direction: searchParams.direction,
+    cursor: searchParams.cursor,
+    from: searchParams.from,
+    to: searchParams.to,
+    pageSize: 25,
+  });
+
+  return typedjson({
+    list,
+  });
+};
+
+export default function Page() {
+  const { list } = useTypedLoaderData<typeof loader>();
+  const navigation = useNavigation();
+  const isLoading = navigation.state !== "idle";
+  const organization = useOrganization();
+  const project = useProject();
+  const user = useUser();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitleRow>
+          <PageTitle title={`${project.name} events`} />
+          <PageButtons>
+            <LinkButton
+              LeadingIcon={"docs"}
+              to={docsPath("documentation/concepts/triggers/events")}
+              variant="secondary/small"
+            >
+              Event documentation
+            </LinkButton>
+          </PageButtons>
+        </PageTitleRow>
+        <PageDescription>All events in this project</PageDescription>
+      </PageHeader>
+
+      <PageBody scrollable={false}>
+        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="mb-2 flex items-center justify-between gap-x-2">
+            <EventsFilters />
+            <ListPagination list={list} />
+          </div>
+          <EventsTable
+            total={list.events.length}
+            hasFilters={false}
+            events={list.events}
+            isLoading={isLoading}
+            eventsParentPath={projectPath(organization, project)}
+            currentUser={user}
+          />
+          <ListPagination list={list} className="mt-2 justify-end" />
+        </div>
+      </PageBody>
+    </PageContainer>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events/route.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "@remix-run/react";
+import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { Handle } from "~/utils/handle";
+
+export const handle: Handle = {
+  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Events" />,
+};
+
+export default function Page() {
+  return <Outlet />;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination.tsx

@@ -1,16 +1,16 @@
 import { useLocation } from "@remix-run/react";
 import { LinkButton } from "~/components/primitives/Buttons";
-import { Direction, RunList } from "~/presenters/RunListPresenter.server";
-import { WebhookDeliveryList } from "~/presenters/WebhookDeliveryListPresenter.server";
+import { Direction } from "~/components/runs/RunStatuses";
 import { cn } from "~/utils/cn";
 
-export function ListPagination({
-  list,
-  className,
-}: {
-  list: RunList | WebhookDeliveryList;
-  className?: string;
-}) {
+type List = {
+  pagination: {
+    next: string | undefined;
+    previous: string | undefined;
+  };
+};
+
+export function ListPagination({ list, className }: { list: List; className?: string }) {
   return (
     <div className={cn("flex items-center gap-1", className)}>
       <PreviousButton cursor={list.pagination.previous} />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route.tsx

@@ -20,13 +20,8 @@ import {
   organizationIntegrationsPath,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "./ListPagination";
-
-export const DirectionSchema = z.union([z.literal("forward"), z.literal("backward")]);
-
-export const RunListSearchSchema = z.object({
-  cursor: z.string().optional(),
-  direction: DirectionSchema.optional(),
-});
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
+import { RunsFilters } from "~/components/runs/RunFilters";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -39,11 +34,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const presenter = new RunListPresenter();
   const list = await presenter.call({
     userId,
+    filterEnvironment: searchParams.environment,
+    filterStatus: searchParams.status,
     jobSlug: jobParam,
     projectSlug: projectParam,
     organizationSlug,
     direction: searchParams.direction,
     cursor: searchParams.cursor,
+    from: searchParams.from,
+    to: searchParams.to,
   });
 
   return typedjson({
@@ -73,10 +72,14 @@ export default function Page() {
         {(open) => (
           <div className={cn("grid h-fit gap-4", open ? "grid-cols-2" : "grid-cols-1")}>
             <div>
-              <div className="mb-2 flex items-center justify-end gap-x-2">
-                <HelpTrigger title="How do I run my Job?" />
-                <ListPagination list={list} />
+              <div className="mb-2 flex items-center justify-between gap-x-2">
+                <RunsFilters />
+                <div className="flex items-center justify-end gap-x-2">
+                  <HelpTrigger title="How do I run my Job?" />
+                  <ListPagination list={list} />
+                </div>
               </div>
+
               <RunsTable
                 total={list.runs.length}
                 hasFilters={false}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.runs/route.tsx

@@ -18,67 +18,8 @@ import { RunListPresenter } from "~/presenters/RunListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { ProjectParamSchema, docsPath, projectPath } from "~/utils/pathBuilder";
 import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
-import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/primitives/Select";
-import { JobRunStatus, RuntimeEnvironmentType } from "@trigger.dev/database";
-import {
-  CheckCircleIcon,
-  ClockIcon,
-  ExclamationTriangleIcon,
-  PauseCircleIcon,
-  XCircleIcon,
-} from "@heroicons/react/24/solid";
-import { ChartBarIcon } from "@heroicons/react/20/solid";
-import { cn } from "~/utils/cn";
-import { Spinner } from "~/components/primitives/Spinner";
-import { NoSymbolIcon } from "@heroicons/react/20/solid";
-
-// Filter -> status types
-const ExtendedJobRunStatus = {
-  ALL: "ALL" as const,
-  ...JobRunStatus,
-} as const;
-type ExtendedJobRunStatusKey = keyof typeof ExtendedJobRunStatus;
-
-type FilterableStatus =
-  | "ALL"
-  | "QUEUED"
-  | "IN_PROGRESS"
-  | "WAITING"
-  | "COMPLETED"
-  | "FAILED"
-  | "CANCELED"
-  | "TIMEDOUT";
-
-const filterableStatuses: Record<FilterableStatus, ExtendedJobRunStatusKey[]> = {
-  ALL: ["ALL"],
-  QUEUED: ["QUEUED", "WAITING_TO_EXECUTE", "PENDING", "WAITING_ON_CONNECTIONS"],
-  IN_PROGRESS: ["STARTED", "EXECUTING", "PREPROCESSING"],
-  WAITING: ["WAITING_TO_CONTINUE"],
-  COMPLETED: ["SUCCESS"],
-  FAILED: ["FAILURE", "UNRESOLVED_AUTH", "INVALID_PAYLOAD", "ABORTED"],
-  TIMEDOUT: ["TIMED_OUT"],
-  CANCELED: ["CANCELED"],
-};
-
-const statusKeys: FilterableStatus[] = Object.keys(filterableStatuses) as FilterableStatus[];
-
-// Filter -> Environment types
-const ExtendedRuntimeEnvironment = {
-  ALL: "ALL" as const,
-  ...RuntimeEnvironmentType,
-} as const;
-type ExtendedRuntimeEnvironmentType = keyof typeof ExtendedRuntimeEnvironment;
-const environmentKeys: ExtendedRuntimeEnvironmentType[] = Object.keys(
-  ExtendedRuntimeEnvironment
-) as ExtendedRuntimeEnvironmentType[];
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
+import { RunsFilters } from "~/components/runs/RunFilters";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -88,34 +29,19 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const s = Object.fromEntries(url.searchParams.entries());
   const searchParams = RunListSearchSchema.parse(s);
 
-  const status = url.searchParams.get("status");
-  const environment = url.searchParams.get("environment");
-
-  let filterStatus: JobRunStatus[] | undefined;
-  if (status && status !== "ALL") {
-    if (filterableStatuses.hasOwnProperty(status)) {
-      filterStatus = filterableStatuses[status as FilterableStatus] as JobRunStatus[];
-    }
-  }
-
-  let filterEnvironment: RuntimeEnvironmentType | undefined;
-  if (environment && environment !== "ALL") {
-    if (environmentKeys.includes(environment)) {
-      filterEnvironment = environment as RuntimeEnvironmentType;
-    }
-  }
-
   const presenter = new RunListPresenter();
 
   const list = await presenter.call({
     userId,
-    filterEnvironment: filterEnvironment,
-    filterStatus: filterStatus,
+    filterEnvironment: searchParams.environment,
+    filterStatus: searchParams.status,
     projectSlug: projectParam,
     organizationSlug,
     direction: searchParams.direction,
     cursor: searchParams.cursor,
     pageSize: 25,
+    from: searchParams.from,
+    to: searchParams.to,
   });
 
   return typedjson({
@@ -130,27 +56,6 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const user = useUser();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const url = new URLSearchParams(location.search);
-
-  const selectedEnvironment = url.get("environment") || ExtendedRuntimeEnvironment.ALL;
-  const selectedStatus = url.get("status") || ExtendedJobRunStatus.ALL;
-
-  const handleFilterChange = (filterType: string, value: string) => {
-    url.set(filterType, value);
-    url.delete("cursor");
-    url.delete("direction");
-    navigate(`${location.pathname}?${url.toString()}`);
-  };
-
-  const handleStatusChange = (value: FilterableStatus) => {
-    handleFilterChange("status", value);
-  };
-
-  const handleEnvironmentChange = (value: string) => {
-    handleFilterChange("environment", value);
-  };
 
   return (
     <PageContainer>
@@ -173,67 +78,7 @@ export default function Page() {
       <PageBody scrollable={false}>
         <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
           <div className="mb-2 flex items-center justify-between gap-x-2">
-            <div className="flex flex-row justify-between gap-x-2">
-              {/* environment filter */}
-              <SelectGroup>
-                <Select
-                  name="environment"
-                  value={selectedEnvironment}
-                  onValueChange={handleEnvironmentChange}
-                >
-                  <SelectTrigger size="secondary/small" width="full">
-                    <SelectValue placeholder="Select environment" className="ml-2 p-0" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {environmentKeys.map((env) => (
-                      <SelectItem key={env} value={env}>
-                        <div className="flex gap-x-2">
-                          {env !== "ALL" && (
-                            <span
-                              className={cn(
-                                "inline-flex h-4 items-center justify-center rounded-[2px] px-1 text-xxs font-medium uppercase tracking-wider text-midnight-900",
-                                filterEnvironmentColorClassName(env)
-                              )}
-                            >
-                              {filterEnvironmentTitle(env)}
-                            </span>
-                          )}
-                          <span
-                            className={cn(
-                              "inline-flex h-4 items-center justify-center pl-1 text-xxs font-medium uppercase tracking-wider text-dimmed"
-                            )}
-                          >
-                            {env === "ALL" ? env + " Environments" : env}
-                          </span>
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </SelectGroup>
-
-              {/* status filter */}
-              <SelectGroup>
-                <Select name="status" value={selectedStatus} onValueChange={handleStatusChange}>
-                  <SelectTrigger size="secondary/small" width="full">
-                    <SelectValue placeholder="Select environment" className="ml-2 p-0" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {statusKeys.map((status) => (
-                      <SelectItem key={status} value={status}>
-                        {
-                          <span className="flex items-center gap-1 text-xxs font-medium uppercase tracking-wider">
-                            <FilterStatusIcon status={status} className="h-4 w-4" />
-                            <FilterStatusLabel status={status} />
-                          </span>
-                        }
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </SelectGroup>
-            </div>
-
+            <RunsFilters />
             <ListPagination list={list} />
           </div>
           <RunsTable
@@ -251,120 +96,3 @@ export default function Page() {
     </PageContainer>
   );
 }
-
-function filterEnvironmentTitle(environment: ExtendedRuntimeEnvironmentType) {
-  switch (environment) {
-    case "ALL":
-      return "All";
-    case "PRODUCTION":
-      return "Prod";
-    case "STAGING":
-      return "Staging";
-    case "DEVELOPMENT":
-      return "Dev";
-    case "PREVIEW":
-      return "Preview";
-  }
-}
-
-function filterEnvironmentColorClassName(environment: ExtendedRuntimeEnvironmentType) {
-  switch (environment) {
-    case "ALL":
-      return "bg-indigo-500";
-    case "PRODUCTION":
-      return "bg-green-500";
-    case "STAGING":
-      return "bg-amber-500";
-    case "DEVELOPMENT":
-      return "bg-pink-500";
-    case "PREVIEW":
-      return "bg-yellow-500";
-  }
-}
-
-export function FilterStatusLabel({ status }: { status: FilterableStatus }) {
-  return <span className={filterStatusClassNameColor(status)}>{filterStatusTitle(status)}</span>;
-}
-
-export function FilterStatusIcon({
-  status,
-  className,
-}: {
-  status: FilterableStatus;
-  className: string;
-}) {
-  switch (status) {
-    case "ALL":
-      return <span className="w-[0.0625rem]"></span>;
-    case "COMPLETED":
-      return <CheckCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
-    case "WAITING":
-      return <ClockIcon className={cn(filterStatusClassNameColor(status), className)} />;
-    case "QUEUED":
-      return <PauseCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
-    case "IN_PROGRESS":
-      return <Spinner className={cn(filterStatusClassNameColor(status), className)} />;
-    case "TIMEDOUT":
-      return (
-        <ExclamationTriangleIcon className={cn(filterStatusClassNameColor(status), className)} />
-      );
-    case "CANCELED":
-      return <NoSymbolIcon className={cn(filterStatusClassNameColor(status), className)} />;
-    case "FAILED":
-      return <XCircleIcon className={cn(filterStatusClassNameColor(status), className)} />;
-    default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
-    }
-  }
-}
-
-export function filterStatusTitle(status: FilterableStatus): string {
-  switch (status) {
-    case "ALL":
-      return "All Status";
-    case "QUEUED":
-      return "Queued";
-    case "IN_PROGRESS":
-      return "In progress";
-    case "WAITING":
-      return "Waiting";
-    case "COMPLETED":
-      return "Completed";
-    case "FAILED":
-      return "Failed";
-    case "CANCELED":
-      return "Canceled";
-    case "TIMEDOUT":
-      return "Timed out";
-    default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
-    }
-  }
-}
-
-export function filterStatusClassNameColor(status: FilterableStatus): string {
-  switch (status) {
-    case "ALL":
-      return "text-dimmed";
-    case "QUEUED":
-      return "text-slate-500";
-    case "IN_PROGRESS":
-      return "text-blue-500";
-    case "WAITING":
-      return "text-blue-500";
-    case "COMPLETED":
-      return "text-green-500";
-    case "FAILED":
-      return "text-rose-500";
-    case "CANCELED":
-      return "text-slate-500";
-    case "TIMEDOUT":
-      return "text-amber-300";
-    default: {
-      const _exhaustiveCheck: never = status;
-      throw new Error(`Non-exhaustive match for value: ${status}`);
-    }
-  }
-}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx

@@ -1,11 +1,16 @@
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
 import { json } from "@remix-run/node";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { Fragment } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
+import { Button } from "~/components/primitives/Buttons";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
 import { Header2 } from "~/components/primitives/Headers";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
@@ -18,33 +23,26 @@ import {
   PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useUser } from "~/hooks/useUser";
+import { redirectWithSuccessMessage } from "~/models/message.server";
 import { TriggerSourcePresenter } from "~/presenters/TriggerSourcePresenter.server";
 import { requireUser, requireUserId } from "~/services/session.server";
+import { ActivateSourceService } from "~/services/sources/activateSource.server";
+import { cn } from "~/utils/cn";
 import { Handle } from "~/utils/handle";
 import {
   TriggerSourceParamSchema,
-  rootPath,
-  projectTriggersPath,
   externalTriggerPath,
   externalTriggerRunsParentPath,
+  projectTriggersPath,
   trimTrailingSlash,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
-import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
-import { Button } from "~/components/primitives/Buttons";
-import { Form, useActionData, useNavigation } from "@remix-run/react";
-import { cn } from "~/utils/cn";
-import { conform, useForm } from "@conform-to/react";
-import { parse } from "@conform-to/zod";
-import { z } from "zod";
-import { ActivateSourceService } from "~/services/sources/activateSource.server";
-import { redirectWithSuccessMessage } from "~/models/message.server";
-import { nanoid } from "nanoid";
-import { useUser } from "~/hooks/useUser";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx

@@ -1,37 +1,32 @@
-import { json } from "@remix-run/node";
-import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { Fragment } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
 import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useUser } from "~/hooks/useUser";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
-import { requireUser, requireUserId } from "~/services/session.server";
+import { useUser } from "~/hooks/useUser";
+import { WebhookSourcePresenter } from "~/presenters/WebhookSourcePresenter.server";
+import { requireUser } from "~/services/session.server";
+import { cn } from "~/utils/cn";
 import { Handle } from "~/utils/handle";
 import {
   TriggerSourceParamSchema,
   projectTriggersPath,
-  externalTriggerPath,
+  projectWebhookTriggersPath,
   trimTrailingSlash,
   webhookTriggerRunsParentPath,
-  projectWebhookTriggersPath,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
-import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
-import { Button } from "~/components/primitives/Buttons";
-import { Form, useActionData, useNavigation } from "@remix-run/react";
-import { cn } from "~/utils/cn";
-import { conform, useForm } from "@conform-to/react";
-import { parse } from "@conform-to/zod";
-import { z } from "zod";
-import { ActivateSourceService } from "~/services/sources/activateSource.server";
-import { redirectWithSuccessMessage } from "~/models/message.server";
-import { WebhookSourcePresenter } from "~/presenters/WebhookSourcePresenter.server";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam.delivery/route.tsx

@@ -5,9 +5,12 @@ import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { Callout } from "~/components/primitives/Callout";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
+import { WebhookDeliveryRunsTable } from "~/components/runs/WebhookDeliveryRunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { WebhookDeliveryPresenter } from "~/presenters/WebhookDeliveryPresenter.server";
 import { requireUser } from "~/services/session.server";
 import { Handle } from "~/utils/handle";
 import {
@@ -19,9 +22,6 @@ import {
   webhookTriggerPath,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/ListPagination";
-import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
-import { WebhookDeliveryPresenter } from "~/presenters/WebhookDeliveryPresenter.server";
-import { WebhookDeliveryRunsTable } from "~/components/runs/WebhookDeliveryRunsTable";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam/route.tsx

@@ -2,7 +2,6 @@ import { Outlet } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { NamedIcon } from "~/components/primitives/NamedIcon";
 import {
   PageHeader,
   PageInfoGroup,
@@ -12,8 +11,10 @@ import {
   PageTitle,
   PageTitleRow,
 } from "~/components/primitives/PageHeader";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { WebhookSourcePresenter } from "~/presenters/WebhookSourcePresenter.server";
 import { requireUser } from "~/services/session.server";
 import {
   TriggerSourceParamSchema,
@@ -21,8 +22,6 @@ import {
   webhookDeliveryPath,
   webhookTriggerPath,
 } from "~/utils/pathBuilder";
-import { RunListSearchSchema } from "../_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route";
-import { WebhookSourcePresenter } from "~/presenters/WebhookSourcePresenter.server";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
@@ -77,11 +76,7 @@ export default function Page() {
               value={trigger.integration.slug}
               to={trigger.integrationLink}
             />
-            <PageInfoProperty
-              icon="webhook"
-              label="HTTP Endpoint"
-              to={trigger.httpEndpointLink}
-            />
+            <PageInfoProperty icon="webhook" label="HTTP Endpoint" to={trigger.httpEndpointLink} />
           </PageInfoGroup>
         </PageInfoRow>
         <PageTabs

apps/webapp/app/routes/account._index/route.tsx

@@ -0,0 +1,193 @@
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { Form, useActionData } from "@remix-run/react";
+import { ActionFunction, json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { UserProfilePhoto } from "~/components/UserProfilePhoto";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { Button } from "~/components/primitives/Buttons";
+import { Checkbox } from "~/components/primitives/Checkbox";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormError } from "~/components/primitives/FormError";
+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 { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { prisma } from "~/db.server";
+import { useUser } from "~/hooks/useUser";
+import { redirectWithSuccessMessage } from "~/models/message.server";
+import { updateUser } from "~/models/user.server";
+import { requireUserId } from "~/services/session.server";
+import { Handle } from "~/utils/handle";
+import { accountPath } from "~/utils/pathBuilder";
+
+function createSchema(
+  constraints: {
+    isEmailUnique?: (email: string) => Promise<boolean>;
+  } = {}
+) {
+  return z.object({
+    name: z
+      .string({ required_error: "You must enter a name" })
+      .min(2, "Your name must be at least 2 characters long")
+      .max(50),
+    email: z
+      .string()
+      .email()
+      .superRefine((email, ctx) => {
+        if (constraints.isEmailUnique === undefined) {
+          //client-side validation skips this
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: conform.VALIDATION_UNDEFINED,
+          });
+        } else {
+          // Tell zod this is an async validation by returning the promise
+          return constraints.isEmailUnique(email).then((isUnique) => {
+            if (isUnique) {
+              return;
+            }
+
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: "Email is already being used by a different account",
+            });
+          });
+        }
+      }),
+    marketingEmails: z.preprocess((value) => value === "on", z.boolean()),
+  });
+}
+
+export const action: ActionFunction = async ({ request }) => {
+  const userId = await requireUserId(request);
+
+  const formData = await request.formData();
+
+  const formSchema = createSchema({
+    isEmailUnique: async (email) => {
+      const existingUser = await prisma.user.findFirst({
+        where: {
+          email,
+        },
+      });
+
+      if (!existingUser) {
+        return true;
+      }
+
+      if (existingUser.id === userId) {
+        return true;
+      }
+
+      return false;
+    },
+  });
+
+  const submission = await parse(formData, { schema: formSchema, async: true });
+
+  if (!submission.value || submission.intent !== "submit") {
+    return json(submission);
+  }
+
+  try {
+    const user = await updateUser({
+      id: userId,
+      name: submission.value.name,
+      email: submission.value.email,
+      marketingEmails: submission.value.marketingEmails,
+    });
+
+    return redirectWithSuccessMessage(
+      accountPath(),
+      request,
+      "Your account profile has been updated."
+    );
+  } catch (error: any) {
+    return json({ errors: { body: error.message } }, { status: 400 });
+  }
+};
+
+export const handle: Handle = {
+  breadcrumb: (match) => {
+    return <BreadcrumbLink to={match.pathname} title={"Profile"} />;
+  },
+};
+
+export default function Page() {
+  const user = useUser();
+  const lastSubmission = useActionData();
+
+  const [form, { name, email, marketingEmails }] = useForm({
+    id: "account",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: createSchema() });
+    },
+  });
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitleRow>
+          <PageTitle title="Your profile" />
+        </PageTitleRow>
+      </PageHeader>
+
+      <PageBody>
+        <Form method="post" {...form.props} className="max-w-md">
+          <InputGroup className="mb-4">
+            <Label htmlFor={name.id}>Profile picture</Label>
+            <UserProfilePhoto className="h-24 w-24" />
+          </InputGroup>
+          <Fieldset>
+            <InputGroup>
+              <Label htmlFor={name.id}>Full name</Label>
+              <Input
+                {...conform.input(name, { type: "text" })}
+                placeholder="Your full name"
+                defaultValue={user?.name ?? ""}
+                icon="account"
+              />
+              <Hint>Your teammates will see this</Hint>
+              <FormError id={name.errorId}>{name.error}</FormError>
+            </InputGroup>
+            <InputGroup>
+              <Label htmlFor={email.id}>Email address</Label>
+              <Input
+                {...conform.input(email, { type: "text" })}
+                placeholder="Your email"
+                defaultValue={user?.email ?? ""}
+                icon="envelope"
+              />
+              <FormError id={email.errorId}>{email.error}</FormError>
+            </InputGroup>
+            <InputGroup>
+              <Label>Notifications</Label>
+              <Checkbox
+                id="marketingEmails"
+                {...conform.input(marketingEmails, { type: "checkbox" })}
+                label="Receive product updates"
+                variant="simple/small"
+                defaultChecked={user.marketingEmails}
+              />
+              <FormError id={marketingEmails.errorId}>{marketingEmails.error}</FormError>
+            </InputGroup>
+
+            <FormButtons
+              confirmButton={
+                <Button type="submit" variant={"primary/small"}>
+                  Update
+                </Button>
+              }
+            />
+          </Fieldset>
+        </Form>
+      </PageBody>
+    </PageContainer>
+  );
+}

apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx

@@ -0,0 +1,93 @@
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { title } from "process";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
+import { ErrorIcon } from "~/assets/icons/ErrorIcon";
+import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
+import { Header1 } from "~/components/primitives/Headers";
+import { Icon } from "~/components/primitives/Icon";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { logger } from "~/services/logger.server";
+import { createPersonalAccessTokenFromAuthorizationCode } from "~/services/personalAccessToken.server";
+import { requireUserId } from "~/services/session.server";
+import { rootPath } from "~/utils/pathBuilder";
+
+const ParamsSchema = z.object({
+  authorizationCode: z.string(),
+});
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+
+  const parsedParams = ParamsSchema.safeParse(params);
+
+  if (!parsedParams.success) {
+    logger.info("Invalid params", { params });
+    throw new Response(undefined, {
+      status: 400,
+      statusText: "Invalid params",
+    });
+  }
+
+  try {
+    const personalAccessToken = await createPersonalAccessTokenFromAuthorizationCode(
+      parsedParams.data.authorizationCode,
+      userId
+    );
+    return typedjson({
+      success: true as const,
+    });
+  } catch (error) {
+    if (error instanceof Response) {
+      throw error;
+    }
+
+    if (error instanceof Error) {
+      return typedjson({
+        success: false as const,
+        error: error.message,
+      });
+    }
+
+    logger.error(JSON.stringify(error));
+    throw new Response(undefined, {
+      status: 400,
+      statusText: "Something went wrong, if this problem persists please contact support.",
+    });
+  }
+};
+
+export default function Page() {
+  const result = useTypedLoaderData<typeof loader>();
+
+  return (
+    <AppContainer>
+      <MainCenteredContainer className="max-w-[22rem]">
+        <div className="flex flex-col items-center space-y-4">
+          {result.success ? (
+            <div>
+              <Header1 className="mb-2 flex items-center gap-1">
+                <Icon icon={CheckCircleIcon} className="h-6 w-6 text-emerald-500" /> Successfully
+                authenticated
+              </Header1>
+              <Paragraph>Return to your terminal to continue.</Paragraph>
+            </div>
+          ) : (
+            <div>
+              <Header1 className="mb-2">Authentication failed</Header1>
+              <Callout variant="error" className="my-2">
+                {result.error}
+              </Callout>
+              <Paragraph spacing>
+                There was a problem authenticating you, please try logging in with your CLI again.
+              </Paragraph>
+            </div>
+          )}
+        </div>
+      </MainCenteredContainer>
+    </AppContainer>
+  );
+}

apps/webapp/app/routes/account.tokens/route.tsx

@@ -0,0 +1,312 @@
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
+import { Form, useActionData, useFetcher } from "@remix-run/react";
+import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { Button } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
+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 {
+  PageButtons,
+  PageDescription,
+  PageHeader,
+  PageTitle,
+  PageTitleRow,
+} from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableCellMenu,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "~/components/primitives/Table";
+import { redirectWithSuccessMessage } from "~/models/message.server";
+import {
+  CreatedPersonalAccessToken,
+  ObfuscatedPersonalAccessToken,
+  createPersonalAccessToken,
+  getValidPersonalAccessTokens,
+  revokePersonalAccessToken,
+} from "~/services/personalAccessToken.server";
+import { requireUserId } from "~/services/session.server";
+import { Handle } from "~/utils/handle";
+import { personalAccessTokensPath } from "~/utils/pathBuilder";
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+
+  try {
+    const personalAccessTokens = await getValidPersonalAccessTokens(userId);
+
+    return typedjson({
+      personalAccessTokens,
+    });
+  } catch (error) {
+    if (error instanceof Response) {
+      throw error;
+    }
+
+    console.error(error);
+    throw new Response(undefined, {
+      status: 400,
+      statusText: "Something went wrong, if this problem persists please contact support.",
+    });
+  }
+};
+
+const CreateTokenSchema = z.discriminatedUnion("action", [
+  z.object({
+    action: z.literal("create"),
+    tokenName: z
+      .string({ required_error: "You must enter a name" })
+      .min(2, "Your name must be at least 2 characters long")
+      .max(50),
+  }),
+  z.object({
+    action: z.literal("revoke"),
+    tokenId: z.string(),
+  }),
+]);
+
+export const action: ActionFunction = async ({ request }) => {
+  const userId = await requireUserId(request);
+  const formData = await request.formData();
+  const submission = parse(formData, { schema: CreateTokenSchema });
+
+  if (!submission.value) {
+    return json(submission);
+  }
+
+  switch (submission.value.action) {
+    case "create": {
+      try {
+        const tokenResult = await createPersonalAccessToken({
+          name: submission.value.tokenName,
+          userId,
+        });
+
+        return json({ ...submission, payload: { token: tokenResult } });
+      } catch (error: any) {
+        return json({ errors: { body: error.message } }, { status: 400 });
+      }
+    }
+    case "revoke": {
+      try {
+        await revokePersonalAccessToken(submission.value.tokenId);
+
+        return redirectWithSuccessMessage(
+          personalAccessTokensPath(),
+          request,
+          "Personal Access Token revoked"
+        );
+      } catch (error: any) {
+        return json({ errors: { body: error.message } }, { status: 400 });
+      }
+    }
+    default: {
+      return json({ errors: { body: "Invalid action" } }, { status: 400 });
+    }
+  }
+};
+
+export const handle: Handle = {
+  breadcrumb: (match) => {
+    return <BreadcrumbLink to={match.pathname} title={"Personal Access Tokens"} />;
+  },
+};
+
+export default function Page() {
+  const { personalAccessTokens } = useTypedLoaderData<typeof loader>();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitleRow>
+          <PageTitle title="Personal Access Tokens" />
+          <PageButtons>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="primary/small">Create new token</Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-md">
+                <DialogHeader>Create a Personal Access Token</DialogHeader>
+                <CreatePersonalAccessToken />
+              </DialogContent>
+            </Dialog>
+          </PageButtons>
+        </PageTitleRow>
+        <PageDescription>Personal Access Tokens can be used with our CLI and API.</PageDescription>
+      </PageHeader>
+
+      <PageBody>
+        <div className="flex flex-col gap-3">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Name</TableHeaderCell>
+                <TableHeaderCell>Token</TableHeaderCell>
+                <TableHeaderCell>Created</TableHeaderCell>
+                <TableHeaderCell>Last accessed</TableHeaderCell>
+                <TableHeaderCell hiddenLabel>Delete</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {personalAccessTokens.length > 0 ? (
+                personalAccessTokens.map((personalAccessToken) => {
+                  return (
+                    <TableRow key={personalAccessToken.id} className="group">
+                      <TableCell>{personalAccessToken.name}</TableCell>
+                      <TableCell>{personalAccessToken.obfuscatedToken}</TableCell>
+                      <TableCell>
+                        <DateTime date={personalAccessToken.createdAt} />
+                      </TableCell>
+                      <TableCell>
+                        {personalAccessToken.lastAccessedAt ? (
+                          <DateTime date={personalAccessToken.lastAccessedAt} />
+                        ) : (
+                          "Never"
+                        )}
+                      </TableCell>
+                      <TableCell alignment="right">
+                        <RevokePersonalAccessToken token={personalAccessToken} />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              ) : (
+                <TableBlankRow colSpan={5}>
+                  <Paragraph variant="small" className="flex items-center justify-center">
+                    You have no Personal Access Tokens (that haven't been revoked).
+                  </Paragraph>
+                </TableBlankRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </PageBody>
+    </PageContainer>
+  );
+}
+
+function CreatePersonalAccessToken() {
+  const fetcher = useFetcher<typeof action>();
+  const lastSubmission = fetcher.data as any;
+
+  const [form, { tokenName }] = useForm({
+    id: "create-personal-access-token",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: CreateTokenSchema });
+    },
+  });
+
+  const token = lastSubmission?.payload?.token
+    ? (lastSubmission?.payload?.token as CreatedPersonalAccessToken)
+    : undefined;
+
+  return (
+    <div className="max-w-full overflow-x-hidden">
+      {token ? (
+        <div className="flex flex-col gap-2 p-2">
+          <Header2>Successfully generated a new token</Header2>
+          <Callout variant="success">
+            Copy this access token and store it in a secure place - you will not be able to see it
+            again.
+          </Callout>
+          <ClipboardField
+            secure
+            value={token.token}
+            variant={"secondary/medium"}
+            icon={<ShieldExclamationIcon className="h-5 w-5 text-emerald-500" />}
+          />
+        </div>
+      ) : (
+        <fetcher.Form method="post" {...form.props}>
+          <input type="hidden" name="action" value="create" />
+          <Fieldset>
+            <InputGroup>
+              <Label htmlFor={tokenName.id}>Name</Label>
+              <Input
+                {...conform.input(tokenName, { type: "text" })}
+                placeholder="The name of your Personal Access Token"
+                defaultValue=""
+                icon={ShieldCheckIcon}
+                autoComplete="off"
+                data-1p-ignore
+              />
+              <Hint>
+                This will help you to identify your token. Tokens called "cli" are automatically
+                generated when you login with our CLI.
+              </Hint>
+              <FormError id={tokenName.errorId}>{tokenName.error}</FormError>
+            </InputGroup>
+
+            <FormButtons
+              confirmButton={
+                <Button type="submit" variant={"primary/small"}>
+                  Update
+                </Button>
+              }
+            />
+          </Fieldset>
+        </fetcher.Form>
+      )}
+    </div>
+  );
+}
+
+function RevokePersonalAccessToken({ token }: { token: ObfuscatedPersonalAccessToken }) {
+  const lastSubmission = useActionData();
+
+  const [form, { tokenId }] = useForm({
+    id: "revoke-personal-access-token",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: CreateTokenSchema });
+    },
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="small-menu-item" LeadingIcon="trash-can" className="text-xs" />
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>Revoke Personal Access Token</DialogHeader>
+        <div className="flex flex-col gap-3 pt-3">
+          <Paragraph>
+            Are you sure you want to revoke "{token.name}"? This can't be reversed.
+          </Paragraph>
+          <Form method="post" {...form.props}>
+            <input type="hidden" name="action" value="revoke" />
+            <input type="hidden" name="tokenId" value={token.id} />
+            <Button type="submit" variant="danger/medium" fullWidth>
+              Revoke token
+            </Button>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/webapp/app/routes/account/route.tsx

@@ -1,185 +1,35 @@
-import { Form, useActionData } from "@remix-run/react";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { Fieldset } from "~/components/primitives/Fieldset";
-import { FormButtons } from "~/components/primitives/FormButtons";
-import { FormError } from "~/components/primitives/FormError";
-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 { Outlet } from "@remix-run/react";
+import { AppContainer } from "~/components/layout/AppLayout";
+import { AccountSideMenu } from "~/components/navigation/AccountSideMenu";
+import { Breadcrumb, BreadcrumbLink } from "~/components/navigation/Breadcrumb";
+import { PageNavigationIndicator } from "~/components/navigation/PageNavigationIndicator";
 import { useUser } from "~/hooks/useUser";
-import { z } from "zod";
-import { ActionFunction, json, redirect } from "@remix-run/server-runtime";
-import { requireUserId } from "~/services/session.server";
-import { parse } from "@conform-to/zod";
-import { accountPath, rootPath } from "~/utils/pathBuilder";
-import { conform, useForm } from "@conform-to/react";
-import { UserProfilePhoto } from "~/components/UserProfilePhoto";
-import { Checkbox } from "~/components/primitives/Checkbox";
-import { updateUser } from "~/models/user.server";
-import { redirectWithSuccessMessage } from "~/models/message.server";
-import { prisma } from "~/db.server";
-import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
-import { FormTitle } from "~/components/primitives/FormTitle";
+import { Handle } from "~/utils/handle";
 
-function createSchema(
-  constraints: {
-    isEmailUnique?: (email: string) => Promise<boolean>;
-  } = {}
-) {
-  return z.object({
-    name: z
-      .string({ required_error: "You must enter a name" })
-      .min(2, "Your name must be at least 2 characters long")
-      .max(50),
-    email: z
-      .string()
-      .email()
-      .superRefine((email, ctx) => {
-        if (constraints.isEmailUnique === undefined) {
-          //client-side validation skips this
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: conform.VALIDATION_UNDEFINED,
-          });
-        } else {
-          // Tell zod this is an async validation by returning the promise
-          return constraints.isEmailUnique(email).then((isUnique) => {
-            if (isUnique) {
-              return;
-            }
-
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: "Email is already being used by a different account",
-            });
-          });
-        }
-      }),
-    marketingEmails: z.preprocess((value) => value === "on", z.boolean()),
-  });
-}
-
-export const action: ActionFunction = async ({ request }) => {
-  const userId = await requireUserId(request);
-
-  const formData = await request.formData();
-
-  const formSchema = createSchema({
-    isEmailUnique: async (email) => {
-      const existingUser = await prisma.user.findFirst({
-        where: {
-          email,
-        },
-      });
-
-      if (!existingUser) {
-        return true;
-      }
-
-      if (existingUser.id === userId) {
-        return true;
-      }
-
-      return false;
-    },
-  });
-
-  const submission = await parse(formData, { schema: formSchema, async: true });
-
-  if (!submission.value || submission.intent !== "submit") {
-    return json(submission);
-  }
-
-  try {
-    const user = await updateUser({
-      id: userId,
-      name: submission.value.name,
-      email: submission.value.email,
-      marketingEmails: submission.value.marketingEmails,
-    });
-
-    return redirectWithSuccessMessage(
-      accountPath(),
-      request,
-      "Your account profile has been updated."
-    );
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
-  }
+export const handle: Handle = {
+  breadcrumb: (match) => {
+    return <BreadcrumbLink to={match.pathname} title={"Account"} />;
+  },
 };
 
 export default function Page() {
   const user = useUser();
-  const lastSubmission = useActionData();
-
-  const [form, { name, email, marketingEmails }] = useForm({
-    id: "account",
-    // TODO: type this
-    lastSubmission: lastSubmission as any,
-    onValidate({ formData }) {
-      return parse(formData, { schema: createSchema() });
-    },
-  });
 
   return (
     <AppContainer>
-      <MainCenteredContainer>
-        <FormTitle LeadingIcon="user" title="Profile" />
-        <Form method="post" {...form.props} className="max-w-md">
-          <InputGroup className="mb-4">
-            <Label htmlFor={name.id}>Profile picture</Label>
-            <UserProfilePhoto className="h-24 w-24" />
-          </InputGroup>
-          <Fieldset>
-            <InputGroup>
-              <Label htmlFor={name.id}>Full name</Label>
-              <Input
-                {...conform.input(name, { type: "text" })}
-                placeholder="Your full name"
-                defaultValue={user?.name ?? ""}
-                icon="account"
-              />
-              <Hint>Your teammates will see this</Hint>
-              <FormError id={name.errorId}>{name.error}</FormError>
-            </InputGroup>
-            <InputGroup>
-              <Label htmlFor={email.id}>Email address</Label>
-              <Input
-                {...conform.input(email, { type: "text" })}
-                placeholder="Your email"
-                defaultValue={user?.email ?? ""}
-                icon="envelope"
-              />
-              <FormError id={email.errorId}>{email.error}</FormError>
-            </InputGroup>
-            <InputGroup>
-              <Label>Notifications</Label>
-              <Checkbox
-                id="marketingEmails"
-                {...conform.input(marketingEmails, { type: "checkbox" })}
-                label="Receive product updates"
-                variant="simple/small"
-                defaultChecked={user.marketingEmails}
-              />
-              <FormError id={marketingEmails.errorId}>{marketingEmails.error}</FormError>
-            </InputGroup>
+      <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
+        <AccountSideMenu user={user} />
 
-            <FormButtons
-              confirmButton={
-                <Button type="submit" variant={"primary/small"}>
-                  Update
-                </Button>
-              }
-              cancelButton={
-                <LinkButton to={rootPath()} variant={"secondary/small"}>
-                  Cancel
-                </LinkButton>
-              }
-            />
-          </Fieldset>
-        </Form>
-      </MainCenteredContainer>
+        <div className="grid grid-rows-[2.25rem_1fr] overflow-hidden">
+          <div className="flex w-full items-center justify-between border-b border-ui-border">
+            <Breadcrumb />
+            <div className="flex h-full items-center gap-4">
+              <PageNavigationIndicator className="mr-2" />
+            </div>
+          </div>
+          <Outlet />
+        </div>
+      </div>
     </AppContainer>
   );
 }

apps/webapp/app/routes/api.v1.authorization-code.ts

@@ -0,0 +1,40 @@
+import type { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { CreateAuthorizationCodeResponse } from "@trigger.dev/core";
+import { env } from "~/env.server";
+import { logger } from "~/services/logger.server";
+import { createAuthorizationCode } from "~/services/personalAccessToken.server";
+
+/** Used to create an AuthorizationCode, that can then be used to obtain a Personal Access Token by logging in with the provided URL */
+export async function action({ request }: ActionFunctionArgs) {
+  logger.info("Creating AuthorizationCode", { url: request.url });
+
+  // Ensure this is a POST request
+  if (request.method.toUpperCase() !== "POST") {
+    return { status: 405, body: "Method Not Allowed" };
+  }
+
+  //there is no authentication on this endpoint, anyone can create an AuthorizationCode.
+  //they're only used to allow a user to login, when they'll then receive a Personal Access Token
+
+  try {
+    const authorizationCode = await createAuthorizationCode();
+    const responseJson: CreateAuthorizationCodeResponse = {
+      authorizationCode: authorizationCode.code,
+      url: `${env.APP_ORIGIN}/account/authorization-code/${authorizationCode.code}`,
+    };
+
+    return json(responseJson);
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.error("Error creating AuthorizationCode", {
+        url: request.url,
+        error: error.message,
+      });
+
+      return json({ error: error.message }, { status: 400 });
+    }
+
+    return json({ error: "Something went wrong" }, { status: 500 });
+  }
+}

apps/webapp/app/routes/api.v1.jobs.$jobSlug.invoke.ts

@@ -72,7 +72,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
     );
 
     if (!run) {
-      return json({ error: "Job count not be invoked" }, { status: 500 });
+      return json({ error: "Job could not be invoked" }, { status: 500 });
     }
 
     return json({ id: run.id });

apps/webapp/app/routes/api.v1.token.ts

@@ -0,0 +1,50 @@
+import type { ActionFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import {
+  GetPersonalAccessTokenRequestSchema,
+  GetPersonalAccessTokenResponse,
+} from "@trigger.dev/core";
+import { generateErrorMessage } from "zod-error";
+import { logger } from "~/services/logger.server";
+import { getPersonalAccessTokenFromAuthorizationCode } from "~/services/personalAccessToken.server";
+
+export async function action({ request }: ActionFunctionArgs) {
+  logger.info("Getting PersonalAccessToken from AuthorizationCode", { url: request.url });
+
+  // Ensure this is a POST request
+  if (request.method.toUpperCase() !== "POST") {
+    return { status: 405, body: "Method Not Allowed" };
+  }
+
+  //There is no authentication on this endpoint, anyone can create an AuthorizationCode.
+  //But only a logged in user can create a PersonalAccessToken, so for a user who can't login to the app this will always fail.
+
+  // Now parse the request body
+  const anyBody = await request.json();
+  const body = GetPersonalAccessTokenRequestSchema.safeParse(anyBody);
+  if (!body.success) {
+    return json({ message: generateErrorMessage(body.error.issues) }, { status: 422 });
+  }
+
+  try {
+    const personalAccessToken = await getPersonalAccessTokenFromAuthorizationCode(
+      body.data.authorizationCode
+    );
+
+    const responseJson: GetPersonalAccessTokenResponse = {
+      token: personalAccessToken.token,
+    };
+    return json(responseJson);
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.error("Error getting PersonalAccessToken from AuthorizationCode", {
+        url: request.url,
+        error: error.message,
+      });
+
+      return json({ error: error.message }, { status: 400 });
+    }
+
+    return json({ error: "Something went wrong" }, { status: 500 });
+  }
+}

apps/webapp/app/routes/api.v2.whoami.ts

@@ -0,0 +1,34 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { WhoAmIResponse } from "@trigger.dev/core";
+import { prisma } from "~/db.server";
+import { logger } from "~/services/logger.server";
+import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  logger.info("whoami v2", { url: request.url });
+
+  const authenticationResult = await authenticateApiRequestWithPersonalAccessToken(request);
+  if (!authenticationResult) {
+    return json({ error: "Invalid or Missing Access Token" }, { status: 401 });
+  }
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+    },
+    where: {
+      id: authenticationResult.userId,
+    },
+  });
+
+  if (!user) {
+    return json({ error: "User not found" }, { status: 404 });
+  }
+
+  const result: WhoAmIResponse = {
+    userId: authenticationResult.userId,
+    email: user.email,
+  };
+  return json(result);
+}

apps/webapp/app/services/personalAccessToken.server.ts

@@ -0,0 +1,322 @@
+import { customAlphabet, nanoid } from "nanoid";
+import nodeCrypto from "node:crypto";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { logger } from "./logger.server";
+import { PersonalAccessToken } from "@trigger.dev/database";
+
+const tokenValueLength = 40;
+//lowercase only, removed 0 and l to avoid confusion
+const tokenGenerator = customAlphabet("123456789abcdefghijkmnopqrstuvwxyz", tokenValueLength);
+
+type CreatePersonalAccessTokenOptions = {
+  name: string;
+  userId: string;
+};
+
+/** Returns obfuscated access tokens that aren't revoked */
+export async function getValidPersonalAccessTokens(userId: string) {
+  const personalAccessTokens = await prisma.personalAccessToken.findMany({
+    select: {
+      id: true,
+      name: true,
+      obfuscatedToken: true,
+      createdAt: true,
+      lastAccessedAt: true,
+    },
+    where: {
+      userId,
+      revokedAt: null,
+    },
+  });
+
+  return personalAccessTokens.map((pat) => ({
+    id: pat.id,
+    name: pat.name,
+    obfuscatedToken: pat.obfuscatedToken,
+    createdAt: pat.createdAt,
+    lastAccessedAt: pat.lastAccessedAt,
+  }));
+}
+
+export type ObfuscatedPersonalAccessToken = Awaited<
+  ReturnType<typeof getValidPersonalAccessTokens>
+>[number];
+
+/** Gets a PersonalAccessToken from an Auth Code, this only works within 10 mins of the auth code being created */
+export async function getPersonalAccessTokenFromAuthorizationCode(authorizationCode: string) {
+  //only allow authorization codes that were created less than 10 mins ago
+  const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
+  const code = await prisma.authorizationCode.findUnique({
+    select: {
+      personalAccessToken: true,
+    },
+    where: {
+      code: authorizationCode,
+
+      createdAt: {
+        gte: tenMinutesAgo,
+      },
+    },
+  });
+  if (!code) {
+    throw new Error("Invalid authorization code, or code expired");
+  }
+
+  //there's no PersonalAccessToken associated with this code
+  if (!code.personalAccessToken) {
+    return {
+      token: null,
+    };
+  }
+
+  const decryptedToken = decryptPersonalAccessToken(code.personalAccessToken);
+  return {
+    token: {
+      token: decryptedToken,
+      obfuscatedToken: code.personalAccessToken.obfuscatedToken,
+    },
+  };
+}
+
+export async function revokePersonalAccessToken(tokenId: string) {
+  await prisma.personalAccessToken.update({
+    where: {
+      id: tokenId,
+    },
+    data: {
+      revokedAt: new Date(),
+    },
+  });
+}
+
+type PersonalAccessTokenAuthenticationResult = {
+  userId: string;
+};
+
+const EncryptedSecretValueSchema = z.object({
+  nonce: z.string(),
+  ciphertext: z.string(),
+  tag: z.string(),
+});
+
+const AuthorizationHeaderSchema = z.string().regex(/^Bearer .+$/);
+
+export async function authenticateApiRequestWithPersonalAccessToken(
+  request: Request
+): Promise<PersonalAccessTokenAuthenticationResult | undefined> {
+  const token = getPersonalAccessTokenFromRequest(request);
+  if (!token) {
+    return;
+  }
+
+  return authenticatePersonalAccessToken(token);
+}
+
+function getPersonalAccessTokenFromRequest(request: Request) {
+  const rawAuthorization = request.headers.get("Authorization");
+
+  const authorization = AuthorizationHeaderSchema.safeParse(rawAuthorization);
+  if (!authorization.success) {
+    return;
+  }
+
+  const personalAccessToken = authorization.data.replace(/^Bearer /, "");
+  return personalAccessToken;
+}
+
+export async function authenticatePersonalAccessToken(
+  token: string
+): Promise<PersonalAccessTokenAuthenticationResult | undefined> {
+  if (!token.startsWith(tokenPrefix)) {
+    return;
+  }
+
+  const hashedToken = hashToken(token);
+
+  const personalAccessToken = await prisma.personalAccessToken.update({
+    where: {
+      hashedToken,
+      revokedAt: null,
+    },
+    data: {
+      lastAccessedAt: new Date(),
+    },
+  });
+
+  if (!personalAccessToken) {
+    return;
+  }
+
+  const decryptedToken = decryptPersonalAccessToken(personalAccessToken);
+
+  if (decryptedToken !== token) {
+    logger.error(
+      `PersonalAccessToken with id: ${personalAccessToken.id} was found in the database with hash ${hashedToken}, but the decrypted token did not match the provided token.`
+    );
+    return;
+  }
+
+  return {
+    userId: personalAccessToken.userId,
+  };
+}
+
+export function createAuthorizationCode() {
+  return prisma.authorizationCode.create({
+    data: {
+      code: nanoid(64),
+    },
+  });
+}
+
+/** Creates a PersonalAccessToken from an Auth Code, and return the token. We only ever return the unencrypted token once. */
+export async function createPersonalAccessTokenFromAuthorizationCode(
+  authorizationCode: string,
+  userId: string
+) {
+  //only allow authorization codes that were created less than 10 mins ago
+  const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
+  const code = await prisma.authorizationCode.findUnique({
+    where: {
+      code: authorizationCode,
+      personalAccessTokenId: null,
+      createdAt: {
+        gte: tenMinutesAgo,
+      },
+    },
+  });
+
+  if (!code) {
+    throw new Error("Invalid authorization code, code already used, or code expired");
+  }
+
+  const existingCliPersonalAccessToken = await prisma.personalAccessToken.findFirst({
+    where: {
+      userId,
+      name: "cli",
+    },
+  });
+
+  //we only allow you to have one CLI PAT at a time
+  if (existingCliPersonalAccessToken) {
+    await prisma.personalAccessToken.delete({
+      where: {
+        id: existingCliPersonalAccessToken.id,
+      },
+    });
+  }
+
+  const token = await createPersonalAccessToken({
+    name: "cli",
+    userId,
+  });
+
+  await prisma.authorizationCode.update({
+    where: {
+      code: authorizationCode,
+    },
+    data: {
+      personalAccessTokenId: token.id,
+    },
+  });
+
+  return token;
+}
+
+/** Created a new PersonalAccessToken, and return the token. We only ever return the unencrypted token once. */
+export async function createPersonalAccessToken({
+  name,
+  userId,
+}: CreatePersonalAccessTokenOptions) {
+  const token = createToken();
+  const encryptedToken = encryptToken(token);
+
+  const personalAccessToken = await prisma.personalAccessToken.create({
+    data: {
+      name,
+      userId,
+      encryptedToken,
+      obfuscatedToken: obfuscateToken(token),
+      hashedToken: hashToken(token),
+    },
+  });
+
+  return {
+    id: personalAccessToken.id,
+    name,
+    userId,
+    token,
+    obfuscatedToken: personalAccessToken.obfuscatedToken,
+  };
+}
+
+export type CreatedPersonalAccessToken = Awaited<ReturnType<typeof createPersonalAccessToken>>;
+
+const tokenPrefix = "tr_pat_";
+
+/** Creates a PersonalAccessToken that starts with tr_pat_  */
+function createToken() {
+  return `${tokenPrefix}${tokenGenerator()}`;
+}
+
+/** Obfuscates all but the first and last 4 characters of the token, so it looks like tr_pat_bhbd•••••••••••••••••••fd4a */
+function obfuscateToken(token: string) {
+  const withoutPrefix = token.replace(tokenPrefix, "");
+  const obfuscated = `${withoutPrefix.slice(0, 4)}${"•".repeat(18)}${withoutPrefix.slice(-4)}`;
+  return `${tokenPrefix}${obfuscated}`;
+}
+
+function encryptToken(value: string) {
+  const nonce = nodeCrypto.randomBytes(12);
+  const cipher = nodeCrypto.createCipheriv("aes-256-gcm", env.ENCRYPTION_KEY, nonce);
+
+  let encrypted = cipher.update(value, "utf8", "hex");
+  encrypted += cipher.final("hex");
+
+  const tag = cipher.getAuthTag().toString("hex");
+
+  return {
+    nonce: nonce.toString("hex"),
+    ciphertext: encrypted,
+    tag,
+  };
+}
+
+function decryptPersonalAccessToken(personalAccessToken: PersonalAccessToken) {
+  const encryptedData = EncryptedSecretValueSchema.safeParse(personalAccessToken.encryptedToken);
+  if (!encryptedData.success) {
+    throw new Error(
+      `Unable to parse encrypted PersonalAccessToken with id: ${personalAccessToken.id}: ${encryptedData.error.message}`
+    );
+  }
+
+  const decryptedToken = decryptToken(
+    encryptedData.data.nonce,
+    encryptedData.data.ciphertext,
+    encryptedData.data.tag
+  );
+  return decryptedToken;
+}
+
+function decryptToken(nonce: string, ciphertext: string, tag: string): string {
+  const decipher = nodeCrypto.createDecipheriv(
+    "aes-256-gcm",
+    env.ENCRYPTION_KEY,
+    Buffer.from(nonce, "hex")
+  );
+
+  decipher.setAuthTag(Buffer.from(tag, "hex"));
+
+  let decrypted = decipher.update(ciphertext, "hex", "utf8");
+  decrypted += decipher.final("utf8");
+
+  return decrypted;
+}
+
+function hashToken(token: string): string {
+  const hash = nodeCrypto.createHash("sha256");
+  hash.update(token);
+  return hash.digest("hex");
+}

apps/webapp/app/services/runs/createRun.server.ts

@@ -3,6 +3,7 @@ import { $transaction, PrismaClientOrTransaction } from "~/db.server";
 import { prisma } from "~/db.server";
 import { workerQueue } from "~/services/worker.server";
 import type { AuthenticatedEnvironment } from "../apiAuth.server";
+import { logger } from "../logger.server";
 
 export class CreateRunService {
   #prismaClient: PrismaClientOrTransaction;
@@ -25,6 +26,11 @@ export class CreateRunService {
     },
     options: { callbackUrl?: string } = {}
   ) {
+    if (!environment.organization.runsEnabled) {
+      logger.debug("Runs are disabled for this organization", environment);
+      return;
+    }
+
     const endpoint = await this.#prismaClient.endpoint.findUniqueOrThrow({
       where: {
         id: version.endpointId,

apps/webapp/app/services/schedules/registerScheduleSource.server.ts

@@ -103,11 +103,11 @@ function validateSchedule(schedule: ScheduleMetadata): ScheduleMetadata {
 }
 
 function validateInterval(schedule: IntervalMetadata): ScheduleMetadata {
-  if (schedule.options.seconds < 60) {
+  if (schedule.options.seconds < 20) {
     return {
       type: "interval",
       options: {
-        seconds: 60,
+        seconds: 20,
       },
     };
   }

apps/webapp/app/utils/pathBuilder.ts

@@ -1,4 +1,5 @@
 import type {
+  EventRecord,
   Integration,
   TriggerHttpEndpoint,
   TriggerSource,
@@ -15,6 +16,7 @@ export type JobForPath = Pick<Job, "slug">;
 export type RunForPath = Pick<Job, "id">;
 export type IntegrationForPath = Pick<Integration, "slug">;
 export type TriggerForPath = Pick<TriggerSource, "id">;
+export type EventForPath = Pick<EventRecord, "id">;
 export type WebhookForPath = Pick<Webhook, "id">;
 export type HttpEndpointForPath = Pick<TriggerHttpEndpoint, "key">;
 
@@ -46,6 +48,10 @@ export const TriggerSourceParamSchema = ProjectParamSchema.extend({
   triggerParam: z.string(),
 });
 
+export const EventParamSchema = ProjectParamSchema.extend({
+  eventParam: z.string(),
+});
+
 export const TriggerSourceRunParamsSchema = TriggerSourceParamSchema.extend({
   runParam: z.string(),
 });
@@ -76,6 +82,10 @@ export function accountPath() {
   return `/account`;
 }
 
+export function personalAccessTokensPath() {
+  return `/account/tokens`;
+}
+
 export function invitesPath() {
   return `/invites`;
 }
@@ -202,6 +212,18 @@ export function projectTriggersPath(organization: OrgForPath, project: ProjectFo
   return `${projectPath(organization, project)}/triggers`;
 }
 
+export function projectEventsPath(organization: OrgForPath, project: ProjectForPath) {
+  return `${projectPath(organization, project)}/events`;
+}
+
+export function projectEventPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  event: EventForPath
+) {
+  return `${projectEventsPath(organization, project)}/${event.id}`;
+}
+
 export function projectHttpEndpointsPath(organization: OrgForPath, project: ProjectForPath) {
   return `${projectPath(organization, project)}/http-endpoints`;
 }

apps/webapp/package.json

@@ -46,6 +46,7 @@
     "@heroicons/react": "^2.0.12",
     "@highlight-run/node": "^3.1.0",
     "@highlight-run/react": "^3.2.0",
+    "@internationalized/date": "^3.5.1",
     "@lezer/highlight": "^1.1.6",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.3",
@@ -57,6 +58,9 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@react-aria/datepicker": "^3.9.1",
+    "@react-stately/datepicker": "^3.9.1",
+    "@react-types/datepicker": "^3.7.1",
     "@remix-run/express": "2.1.0",
     "@remix-run/node": "2.1.0",
     "@remix-run/react": "2.1.0",
@@ -66,8 +70,8 @@
     "@tabler/icons-react": "^2.39.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@team-plain/typescript-sdk": "^3.5.0",
-    "@trigger.dev/companyicons": "^1.5.35",
     "@trigger.dev/billing": "^1.0.10",
+    "@trigger.dev/companyicons": "^1.5.35",
     "@trigger.dev/core": "workspace:*",
     "@trigger.dev/core-backend": "workspace:*",
     "@trigger.dev/database": "workspace:*",
@@ -105,8 +109,10 @@
     "prismjs": "^1.29.0",
     "random-words": "^2.0.0",
     "react": "^18.2.0",
+    "react-aria": "^3.31.1",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.4.1",
+    "react-stately": "^3.29.1",
     "react-use": "^17.4.0",
     "recharts": "^2.8.0",
     "remix-auth": "^3.6.0",
@@ -172,6 +178,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "autoprefixer": "^10.4.13",
+    "datepicker": "link:@types/@react-aria/datepicker",
     "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
@@ -193,4 +200,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

docs/documentation/guides/deployment-automatic.mdx

@@ -34,7 +34,7 @@ You can add a step to the GitHub Action that deploys your app.
 ```yaml .github/workflows/release.yml
 - name: 🚀 Refresh Trigger.dev Jobs
    env:
-      DEPLOY_TEST_HOOK: ${{ secrets.TRIGGER_ENDPOINT_HOOK }}
+      TRIGGER_ENDPOINT_HOOK: ${{ secrets.TRIGGER_ENDPOINT_HOOK }}
    run: |
       curl -X POST $TRIGGER_ENDPOINT_HOOK
 ```

docs/documentation/guides/jobs/managing.mdx

@@ -64,7 +64,7 @@ client.defineJob({
   name: "Example Job",
   version: "0.1.0",
   trigger: eventTrigger({ name: "example.event" }),
-  enabled: process.env.TRIGGER_JOBS_DISABLED === "true",
+  enabled: process.env.TRIGGER_JOBS_DISABLED !== "true",
   run: async (payload, io, ctx) => {
     // your Job code here
   },

docs/documentation/guides/self-hosting/kubernetes.mdx

@@ -1,10 +1,13 @@
 ---
 title: "Deploy to Kubernetes"
-description: "Deploy self hosted version of [Trigger.dev](https://trigger.dev) to your kubernetes cluster using our helm chart"
+description: "Deploy [Trigger.dev](https://trigger.dev) to your kubernetes cluster using our helm chart"
 ---
+
+<Warning>WARNING: Kubernetes deploys are not officially supported yet, please only use these instructions as a general guide and starting point.</Warning>
+
 **Prerequisites**
-- You have understanding of [Kubernetes](https://kubernetes.io/)
-- Installed [Helm package manager](https://helm.sh/) version v3.11.3 or greater
+- You have an understanding of [Kubernetes](https://kubernetes.io/)
+- You have [Helm](https://helm.sh/) version v3.11.3 or greater installed
 - You have [kubectl](https://kubernetes.io/docs/reference/kubectl/kubectl/) installed and connected to your kubernetes cluster
 
 By deploying Trigger.dev on Kubernetes, you can take advantage of its features to ensure that the application is fault-tolerant, highly available, and scalable.
@@ -13,76 +16,85 @@ To make the installation process easier and more streamlined, we have created a
 Helm is a package manager for Kubernetes that simplifies the installation and management of Kubernetes applications. 
 With our Helm chart, you can easily install Trigger.dev on Kubernetes, configure it to your liking, and scale it up or down as needed. 
 
-## Install Trigger.dev Helm repository 
+## Get our Helm chart
+
+As our charts aren't published for official use yet, you'll need a copy of the `helm-charts` dir:
 
 ```bash
-TODO: Add helm repo to artifact hub or cloudsmith
+git clone https://github.com/triggerdotdev/trigger.dev
+cd trigger.dev/helm-charts
 ```
 
-## Add Helm values 
+## Add Helm values
 
-Create a values.yaml file to configure various installation settings, such as the docker image tags and environment variables. To explore all configurable properties for your values file, [visit this page](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts/).
+Create a `my-values.yaml` file to configure various installation settings, such as the docker image tags and environment variables. To explore all configurable parameters for your values file visit our [readme](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts#parameters).
 
-#### Set image tags
+### Set image tags
 
 By default, the application will use the latest tag to retrieve the required Docker images, which may be appropriate for most cases. 
 However, we recommend that you use a specific version of the Docker image to avoid unexpected changes to the application.
 
 <Tip>
-  To find the latest version number of Trigger.dev, follow the link below 
-  - [Trigger.dev image on github packaes](https://github.com/triggerdotdev/trigger.dev/pkgs/container/trigger.dev) 
+  You can find valid image tags on [GitHub Packages](https://github.com/triggerdotdev/trigger.dev/pkgs/container/trigger.dev).
 </Tip>
 
-```yaml simple-values-example.yaml 
+```yaml my-values.yaml 
 trigger:
   name: trigger
   replicaCount: 2
   image:
     repository: ghcr.io/triggerdotdev/trigger.dev
-    tag: "latest" # <--- frontend version 
+    tag: "latest" # <--- image tag 
     pullPolicy: Always
 ```
 
-#### Configure environment variables
+### Configure environment variables
 
-You can configure environment variables for trigger in your Helm values file under the property `envVars`. View configurable [environment variables](../configuration/envars).
+You can configure environment variables for trigger in your Helm values file under the property `trigger.env`. See examples for some of these values [here](https://github.com/triggerdotdev/trigger.dev/blob/main/.env.example).
 
-Infisical requires the following backend environment variables to be defined: _`MAGIC_LINK_SECRET`_, _`SESSION_SECRET`_, _`ENCRYPTION_KEY`_, _`DIRECT_URL`_, and _`DATABASE_URL`_ . 
+At a bare minimum, Trigger.dev requires the following environment variables to be defined:
+- `MAGIC_LINK_SECRET`
+- `SESSION_SECRET`
+- `ENCRYPTION_KEY`
+- `DIRECT_URL`
+- `DATABASE_URL`
 
-However, when the above environment variables are not defined, the Helm chart 
-will automatically generate these environment variables for you. The generated environment variables will be saved to a Kubernetes secret and will be preserved between upgrades or uninstalls. 
+When the above environment variables are not defined, the Helm chart will automatically generate values for you. It will persist them in a secret which is preserved between upgrades or uninstalls. It is however strongly recommended to define your own values!
 
-```yaml simple-values-example.yaml 
-...
-envVars:
-  ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
-  MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
+```yaml my-values.yaml
+trigger:
   ...
+  env:
+    ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
+    MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
+    ...
 ```
-#### Routing external traffic
-By default, Trigger.dev takes all traffic coming to your external load balancer's IP address and routes them Trigger.dev's services. 
-Infisical uses Nginx to route external traffic. You can install Nginx along with Trigger by setting `ingress.enabled` to `true` in the Helm values file. View all [properties for ingress](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts/).
 
-```yaml simple-values-example.yaml 
+### Routing external traffic
+By default, Trigger.dev takes all traffic coming to your external load balancer's IP address and routes them Trigger.dev's services. 
+Trigger.dev uses Nginx to route external traffic. You can install Nginx along with Trigger by setting `ingress.enabled` to `true` in the Helm values file. View all [parameters for ingress](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts#ingress-parameters).
+
+```yaml my-values.yaml
 ...
 ingress:
   nginx:
-    enabled: true #<-- if you would like to install nginx along with Trigger.dev
+    enabled: true # <-- if you would like to install nginx along with Trigger.dev
 ```
 
-#### Database 
-Trigger.dev uses a SQL database as its persistence layer. With this Helm chart, you spin up a PostgreSQL instance powered by Bitnami along side other Trigger.dev services in your cluster. 
-When persistence is enabled, the data will be stored as Kubernetes Persistence Volume. View all [properties for postgresql](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts/).
+### Database 
+With this Helm chart, you spin up a PostgreSQL instance powered by Bitnami alongside other Trigger.dev services in your cluster. 
+When persistence is enabled, the data will be stored as a Kubernetes Persistence Volume. View all [parameters for postgres](https://github.com/triggerdotdev/trigger.dev/tree/main/helm-charts#postgres-parameters).
 
-```yaml simple-values-example.yaml 
+```yaml my-values.yaml
 postgresql:
   enabled: true
   persistence:
     enabled: true
 ```
 
-#### Example helm values
-```yaml simple-values-example.yaml 
+### Example values
+
+```yaml my-values.yaml
 trigger:
   name: trigger
   replicaCount: 2
@@ -90,19 +102,17 @@ trigger:
     repository: ghcr.io/triggerdotdev/trigger.dev
     tag: "latest" 
     pullPolicy: Always
-
-envVars:
-  ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
-  MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
+  env:
+    ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
+    MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
 
 ingress:
   nginx:
-    enabled: true #<-- if you would like to install nginx along with Infisical
-
+    enabled: true # <-- if you would like to install nginx along with Trigger.dev
 ```
 
 <Accordion title="Full helm values example">
-  ```yaml values.yaml 
+  ```yaml my-values.yaml
   ingress:
     nginx:
       enabled: true
@@ -122,13 +132,9 @@ ingress:
       annotations: {}
       type: ClusterIP
       nodePort: ""
-  
-  # View all environment variables TODO: Docs for all env vars
-  envVars:
-    DATABASE_URL: <>
-    DIRECT_URL: <>
-    ENCRYPTION_KEY: <>
-    
+    env:
+      ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
+      MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
 
   ## Postgresql DB persistence 
   postgresql:
@@ -140,7 +146,7 @@ ingress:
     enabled: true
     annotations:
       cert-manager.io/cluster-issuer: "letsencrypt-prod" # <-- if you are setting up HTTPS
-    hostName: app.yourdomain.com ## <- Replace with your own domain
+    hostName: app.yourdomain.com ## <-- replace with your own domain
     trigger:
       path: /
       pathType: Prefix
@@ -148,24 +154,48 @@ ingress:
       - secretName: echo-tls
         hosts:
           - app.yourdomain.com
-
   ```
 </Accordion>
 
-## Install the Helm chart 
+## Install the Helm chart
 
-By default, the helm chart will be installed on your default namespace. If you wish to install the Chart on a different namespace, you may specify
-that by adding the `--namespace <namespace-to-install-to>` to your `helm install` command.
+The following command will install our chart into the `trigger` namespace:
 
 ```bash
-## Installs to default namespace
-TODO: not published
+# with custom values read from my-values.yaml
+helm upgrade --install --atomic --namespace trigger --create-namespace trigger . --values my-values.yaml
+
+# with default values
+helm upgrade --install --atomic --namespace trigger --create-namespace trigger .
+
+# with inlined values
+helm upgrade --install --atomic --namespace trigger --create-namespace trigger . --set trigger.replicaCount=3
+```
+
+To watch the pods coming up, simply run this from another terminal:
+
+```bash
+kubectl --namespace trigger get pods -w
 ```
 
 ## Access Trigger.dev
-Allow 3-5 minutes for the deployment to complete. Once done, you should now be able to access Trigger.dev on the IP address exposed via Ingress on your load balancer. If you are not sure what the IP address is run `kubectl get ingress` to view the external IP address exposing Trigger.dev.
-  
+
+Once the deployment is ready, you should be able to access Trigger.dev on the IP address exposed via Ingress on your load balancer. If you are not sure what the IP address is run `kubectl get ingress` to view the external IP address exposing Trigger.dev.
+
 <Info>
 Once installation is complete, you will have to create the first account. No default account is provided.
 </Info>
 
+### Local access
+
+Forward a local port to access the webapp directly from your device:
+
+```bash
+kubectl --namespace trigger port-forward svc/trigger 2024:3000
+```
+
+Log in via email at `http://localhost:2024` then check your logs for the magic link:
+
+```bash
+kubectl --namespace trigger logs deployments/trigger
+```

docs/integrations/apis/resend-tasks.mdx

@@ -26,13 +26,22 @@ Send an email to a recipient with a text payload. [Official Resend Docs](https:/
 
 ## Tasks
 
-| Function Name   | Description                      |
-| --------------- | -------------------------------- |
-| `emails.send`   | Send an email                    |
-| `emails.create` | Create an email                  |
-| `emails.get`    | Get an email                     |
-| `batch.send`    | Send a batch of emails at once   |
-| `batch.create`  | Create a batch of emails at once |
+| Function Name      | Description                      |
+| ------------------ | -------------------------------- |
+| `emails.send`      | Send an email                    |
+| `emails.create`    | Create an email                  |
+| `emails.get`       | Get an email                     |
+| `batch.send`       | Send a batch of emails at once   |
+| `batch.create`     | Create a batch of emails at once |
+| `audiences.create` | Create an audience               |
+| `audiences.get`    | Get an audience                  |
+| `audiences.remove` | Remove an audience               |
+| `audiences.list`   | List audiences                   |
+| `contacts.create`  | Create a contact                 |
+| `contacts.get`     | Get a contact                    |
+| `contacts.update`  | Update a contact                 |
+| `contacts.remove`  | Remove a contact                 |
+| `contacts.list`    | List contacts                    |
 
 ## Example
 

docs/mint.json

@@ -436,7 +436,7 @@
   },
   "analytics": {
     "posthog": {
-      "apiKey": "phc_hwYmedO564b3Ik8nhA4Csrb5SueY0EwFJWCbseGwWW"
+      "apiKey": "phc_9aSDbJCaDUMdZdHxxMPTvcj7A9fsl3mCgM1RBPmPsl7"
     }
   }
 }

docs/sdk/intervaltrigger.mdx

@@ -12,7 +12,7 @@ description: "`intervalTrigger()` is set as a [Job's trigger](/sdk/job) to trigg
 Intervals are set with a number of seconds. There are some important considerations:
 
 - The Job will first run the specified number of seconds after it has first connected to an [Environment](/documentation/concepts/environments-endpoints). This will happen when you first [deploy](/documentation/guides/deployment) that Job.
-- The minimum interval is 60 seconds (any input less than this it will default to 60).
+- The minimum interval is 20 seconds (any input less than this it will default to 20).
 - The maximum interval is 2_592_000 seconds (30 days), if you pass more than this it will trigger every 30 days.
 
 If you wish to Run a Job at an exact time or less frequently than once pr day you should use a [cronTrigger()](/sdk/crontrigger) instead.

docs/sdk/io/logger.mdx

@@ -1,6 +1,6 @@
 ---
 title: "logger"
-description: "Used to send log messages to the [Run log](/documentation/guides/viewing-runs)."
+description: "Used to send log messages to the [Run log](/docs/documentation/guides/viewing-runs)."
 ---
 
 There are 5 levels, that you can use to log messages.

docs/sdk/io/runtask.mdx

@@ -207,7 +207,7 @@ client.defineJob({
         }
       },
       { name: "On Error" },
-      onError: (error, task) => {
+      (error, task) => {
         //retry the task in 5 minutes
         return {
           retryAt: new Date(Date.now() + 5 * 60 * 1000),

helm-charts/.helmignore

@@ -21,3 +21,4 @@
 .idea/
 *.tmproj
 .vscode/
+node_modules/

helm-charts/README.md

@@ -0,0 +1,119 @@
+# Trigger.dev Helm Chart
+
+> WARNING: Kubernetes deploys are not officially supported yet, please only use these instructions as a general guide and starting point.
+
+## Installation
+
+As our charts aren't published for official use yet, you'll need a copy of the `helm-charts` dir and run the following commands within it:
+
+```bash
+# with access to your cluster, e.g. KUBECONFIG correctly set
+helm upgrade --install --atomic --namespace trigger --create-namespace trigger .
+
+# watch the deployment
+kubectl --namespace trigger get deployments -w
+```
+
+## Parameters
+
+### Common parameters
+
+| Name               | Description               | Value |
+| ------------------ | ------------------------- | ----- |
+| `nameOverride`     | Override release name     | `""`  |
+| `fullnameOverride` | Override release fullname | `""`  |
+
+### Trigger.dev parameters
+
+| Name                              | Description                                                                                                     | Value                               |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `trigger.name`                    |                                                                                                                 | `trigger`                           |
+| `trigger.fullnameOverride`        | trigger fullnameOverride                                                                                        | `""`                                |
+| `trigger.podAnnotations`          | trigger pod annotations                                                                                         | `{}`                                |
+| `trigger.deploymentAnnotations`   | trigger deployment annotations                                                                                  | `{}`                                |
+| `trigger.replicaCount`            | trigger replica count                                                                                           | `2`                                 |
+| `trigger.image.repository`        | trigger image repository                                                                                        | `ghcr.io/triggerdotdev/trigger.dev` |
+| `trigger.image.tag`               | trigger image tag                                                                                               | `latest`                            |
+| `trigger.image.pullPolicy`        | trigger image pullPolicy                                                                                        | `Always`                            |
+| `trigger.resources.limits.memory` | container memory limit [(docs)](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/) | `800Mi`                             |
+| `trigger.resources.requests.cpu`  | container CPU requests [(docs)](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/) | `250m`                              |
+| `trigger.affinity`                | Backend pod affinity                                                                                            | `{}`                                |
+| `trigger.kubeSecretRef`           | trigger secret resource reference name                                                                          | `""`                                |
+| `trigger.service.annotations`     | trigger service annotations                                                                                     | `{}`                                |
+| `trigger.service.type`            | trigger service type                                                                                            | `ClusterIP`                         |
+| `trigger.service.nodePort`        | trigger service nodePort (used if above type is `NodePort`)                                                     | `""`                                |
+
+### Postgres parameters
+
+| Name                                                                  | Description                                                                                                                                                                                      | Value                      |
+| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
+| `postgresql.enabled`                                                  | Enable Postgres                                                                                                                                                                                  | `true`                     |
+| `postgresql.name`                                                     | Name used to build variables (deprecated)                                                                                                                                                        | `postgresql`               |
+| `postgresql.nameOverride`                                             | Name override                                                                                                                                                                                    | `postgresql`               |
+| `postgresql.fullnameOverride`                                         | Fullname override                                                                                                                                                                                | `postgresql`               |
+| `postgresql.global.postgresql.auth.postgresPassword`                  | Password for the "postgres" admin user (overrides `auth.postgresPassword`)                                                                                                                       | `password`                 |
+| `postgresql.global.postgresql.auth.username`                          | Name for a custom user to create (overrides `auth.username`)                                                                                                                                     | `postgres`                 |
+| `postgresql.global.postgresql.auth.password`                          | Password for the custom user to create (overrides `auth.password`)                                                                                                                               | `password`                 |
+| `postgresql.global.postgresql.auth.database`                          | Name for a custom database to create (overrides `auth.database`)                                                                                                                                 | `trigger`                  |
+| `postgresql.global.postgresql.auth.existingSecret`                    | Name of existing secret to use for PostgreSQL credentials (overrides `auth.existingSecret`).                                                                                                     | `""`                       |
+| `postgresql.global.postgresql.auth.secretKeys.adminPasswordKey`       | Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.adminPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set.       | `""`                       |
+| `postgresql.global.postgresql.auth.secretKeys.userPasswordKey`        | Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.userPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set.        | `""`                       |
+| `postgresql.global.postgresql.auth.secretKeys.replicationPasswordKey` | Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.replicationPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set. | `""`                       |
+| `postgresql.global.postgresql.service.ports.postgresql`               | PostgreSQL service port (overrides `service.ports.postgresql`)                                                                                                                                   | `5432`                     |
+| `postgresql.image.registry`                                           | PostgreSQL image registry                                                                                                                                                                        | `docker.io`                |
+| `postgresql.image.repository`                                         | PostgreSQL image repository                                                                                                                                                                      | `bitnami/postgresql`       |
+| `postgresql.image.tag`                                                | PostgreSQL image tag (immutable tags are recommended)                                                                                                                                            | `14.10.0-debian-11-r21`    |
+| `postgresql.image.digest`                                             | PostgreSQL image digest in the way sha256:aa.... Please note this parameter, if set, will override the tag                                                                                       | `""`                       |
+| `postgresql.image.pullPolicy`                                         | PostgreSQL image pull policy                                                                                                                                                                     | `IfNotPresent`             |
+| `postgresql.image.pullSecrets`                                        | Specify image pull secrets                                                                                                                                                                       | `[]`                       |
+| `postgresql.image.debug`                                              | Specify if debug values should be set                                                                                                                                                            | `false`                    |
+| `postgresql.architecture`                                             | PostgreSQL architecture (`standalone` or `replication`)                                                                                                                                          | `standalone`               |
+| `postgresql.containerPorts.postgresql`                                | PostgreSQL container port                                                                                                                                                                        | `5432`                     |
+| `postgresql.postgresqlDataDir`                                        | PostgreSQL data dir                                                                                                                                                                              | `/bitnami/postgresql/data` |
+| `postgresql.postgresqlSharedPreloadLibraries`                         | Shared preload libraries (comma-separated list)                                                                                                                                                  | `pgaudit`                  |
+
+### PostgreSQL Primary parameters
+
+| Name                                                    | Description                                            | Value               |
+| ------------------------------------------------------- | ------------------------------------------------------ | ------------------- |
+| `postgresql.primary.livenessProbe.enabled`              | Enable livenessProbe on PostgreSQL Primary containers  | `true`              |
+| `postgresql.primary.livenessProbe.initialDelaySeconds`  | Initial delay seconds for livenessProbe                | `30`                |
+| `postgresql.primary.livenessProbe.periodSeconds`        | Period seconds for livenessProbe                       | `10`                |
+| `postgresql.primary.livenessProbe.timeoutSeconds`       | Timeout seconds for livenessProbe                      | `5`                 |
+| `postgresql.primary.livenessProbe.failureThreshold`     | Failure threshold for livenessProbe                    | `6`                 |
+| `postgresql.primary.livenessProbe.successThreshold`     | Success threshold for livenessProbe                    | `1`                 |
+| `postgresql.primary.readinessProbe.enabled`             | Enable readinessProbe on PostgreSQL Primary containers | `true`              |
+| `postgresql.primary.readinessProbe.initialDelaySeconds` | Initial delay seconds for readinessProbe               | `5`                 |
+| `postgresql.primary.readinessProbe.periodSeconds`       | Period seconds for readinessProbe                      | `10`                |
+| `postgresql.primary.readinessProbe.timeoutSeconds`      | Timeout seconds for readinessProbe                     | `5`                 |
+| `postgresql.primary.readinessProbe.failureThreshold`    | Failure threshold for readinessProbe                   | `6`                 |
+| `postgresql.primary.readinessProbe.successThreshold`    | Success threshold for readinessProbe                   | `1`                 |
+| `postgresql.primary.startupProbe.enabled`               | Enable startupProbe on PostgreSQL Primary containers   | `false`             |
+| `postgresql.primary.startupProbe.initialDelaySeconds`   | Initial delay seconds for startupProbe                 | `30`                |
+| `postgresql.primary.startupProbe.periodSeconds`         | Period seconds for startupProbe                        | `10`                |
+| `postgresql.primary.startupProbe.timeoutSeconds`        | Timeout seconds for startupProbe                       | `1`                 |
+| `postgresql.primary.startupProbe.failureThreshold`      | Failure threshold for startupProbe                     | `15`                |
+| `postgresql.primary.startupProbe.successThreshold`      | Success threshold for startupProbe                     | `1`                 |
+| `postgresql.primary.persistence.enabled`                | Enable PostgreSQL Primary data persistence using PVC   | `true`              |
+| `postgresql.primary.persistence.existingClaim`          | Name of an existing PVC to use                         | `""`                |
+| `postgresql.primary.persistence.accessModes`            | PVC Access Mode for PostgreSQL volume                  | `["ReadWriteOnce"]` |
+| `postgresql.primary.persistence.size`                   | PVC Storage Request for PostgreSQL volume              | `8Gi`               |
+
+### Ingress parameters
+
+| Name                       | Description                                                              | Value    |
+| -------------------------- | ------------------------------------------------------------------------ | -------- |
+| `ingress.enabled`          | Enable ingress                                                           | `true`   |
+| `ingress.ingressClassName` | Ingress class name                                                       | `nginx`  |
+| `ingress.nginx.enabled`    | Ingress controller                                                       | `false`  |
+| `ingress.annotations`      | Ingress annotations                                                      | `{}`     |
+| `ingress.hostName`         | Ingress hostname (your custom domain name, e.g. `infisical.example.org`) | `""`     |
+| `ingress.tls`              | Ingress TLS hosts (matching above hostName)                              | `[]`     |
+| `ingress.trigger.path`     | Trigger.dev ingress path                                                 | `/`      |
+| `ingress.trigger.pathType` | Trigger.dev ingress path type                                            | `Prefix` |
+
+## Generating docs
+
+This chart aims to be compliant with the [Readme Generator For Helm](https://github.com/bitnami/readme-generator-for-helm) to easily create and maintain the parameters tables above.
+
+To update the docs, just run: `pnpm generate-docs`

helm-charts/my-values.yml

@@ -0,0 +1,14 @@
+trigger:
+  name: trigger
+  replicaCount: 2
+  image:
+    repository: ghcr.io/triggerdotdev/trigger.dev
+    tag: "latest" 
+    pullPolicy: Always
+  env:
+    ENCRYPTION_KEY: "b1ebe43a6a6e24b2aa8fa0707d3890e3"
+    MAGIC_LINK_SECRET: "842727396bcee22da68518f959c5730b"
+
+ingress:
+  nginx:
+    enabled: false #<-- if you would like to install nginx along with Trigger.dev

helm-charts/package-lock.json

@@ -0,0 +1,203 @@
+{
+  "name": "helm-charts",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "helm-charts",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@bitnami/readme-generator-for-helm": "^2.6.0"
+      }
+    },
+    "node_modules/@bitnami/readme-generator-for-helm": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@bitnami/readme-generator-for-helm/-/readme-generator-for-helm-2.6.0.tgz",
+      "integrity": "sha512-LcByNCryaC2OJExL9rnhyFJ18+vrZu1gVoN2Z7j/HI42EjV4kLgT4G1KEPNnrKbls9HvozBqMG+sKZIDh0McFg==",
+      "dependencies": {
+        "commander": "^7.1.0",
+        "dot-object": "^2.1.4",
+        "lodash": "^4.17.21",
+        "markdown-table": "^2.0.0",
+        "yaml": "^2.0.0-3"
+      },
+      "bin": {
+        "readme-generator": "bin/index.js"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/dot-object": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-2.1.4.tgz",
+      "integrity": "sha512-7FXnyyCLFawNYJ+NhkqyP9Wd2yzuo+7n9pGiYpkmXCTYa8Ci2U0eUNDVg5OuO5Pm6aFXI2SWN8/N/w7SJWu1WA==",
+      "dependencies": {
+        "commander": "^4.0.0",
+        "glob": "^7.1.5"
+      },
+      "bin": {
+        "dot-object": "bin/dot-object"
+      }
+    },
+    "node_modules/dot-object/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/markdown-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
+      "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
+      "dependencies": {
+        "repeat-string": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/yaml": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "readme-generator-for-helm": {
+      "version": "2.6.1",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "commander": "^7.1.0",
+        "dot-object": "^2.1.4",
+        "lodash": "^4.17.21",
+        "markdown-table": "^2.0.0",
+        "yaml": "^2.0.0-3"
+      },
+      "bin": {
+        "readme-generator": "bin/index.js"
+      },
+      "devDependencies": {
+        "eslint": "^7.24.0",
+        "eslint-config-airbnb-base": "^14.2.1",
+        "eslint-plugin-import": "^2.22.1",
+        "jest": "^29.2.1",
+        "temp": "^0.9.4"
+      }
+    }
+  }
+}

helm-charts/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "helm-charts",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "generate-docs": "readme-generator --readme README.md --values values.yaml"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@bitnami/readme-generator-for-helm": "^2.6.0"
+  }
+}

helm-charts/templates/trigger.yaml

@@ -89,7 +89,7 @@ stringData:
                             "DATABASE_URL" (include "trigger.postgresql.connectionString" .) }}
   {{- $secretObj := (lookup "v1" "Secret" .Release.Namespace (include "trigger.name" .)) | default dict }}
   {{- $secretData := (get $secretObj "data") | default dict }}
-  {{ range $key, $value := .Values.envVars }}
+  {{ range $key, $value := .Values.trigger.env }}
     {{- $default := get $requiredVars $key -}}
     {{- $current := get $secretData $key | b64dec -}}
     {{- $v := $value | default ($current | default $default) -}}

helm-charts/values.yaml

@@ -10,7 +10,7 @@ nameOverride: ""
 ##
 fullnameOverride: ""
 
-## @section trigger -- main app
+## @section Trigger.dev parameters
 ##
 trigger:
   ## @param trigger.name
@@ -39,8 +39,8 @@ trigger:
     ## @param trigger.image.pullPolicy trigger image pullPolicy
     ##
     pullPolicy: Always
-  ## @param trigger.resources.limits.memory container memory limit [check the offical kubernetes documentations](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/)
-  ## @param trigger.resources.requests.cpu container CPU request [check the offical kubernetes documentations](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/)
+  ## @param trigger.resources.limits.memory container memory limit [(docs)](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/)
+  ## @param trigger.resources.requests.cpu container CPU requests [(docs)](https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/)
   ##
   resources:
     limits:
@@ -65,27 +65,27 @@ trigger:
     ## @param trigger.service.nodePort trigger service nodePort (used if above type is `NodePort`)
     ##
     nodePort: ""
+  ## @skip trigger.env
+  ##
+  env:
+    ENCRYPTION_KEY: ""
+    MAGIC_LINK_SECRET: ""
+    SESSION_SECRET: ""
+    LOGIN_ORIGIN: ""
+    APP_ORIGIN: ""
+    DIRECT_URL: ""
+    DATABASE_URL: ""
+    FROM_EMAIL: ""
+    REPLY_TO_EMAIL: ""
+    RESEND_API_KEY: ""
+    AUTH_GITHUB_CLIENT_ID: ""
+    AUTH_GITHUB_CLIENT_SECRET: ""
 
-## trigger environment variables configuration
-envVars:
-  ENCRYPTION_KEY: ""
-  MAGIC_LINK_SECRET: ""
-  SESSION_SECRET: ""
-  LOGIN_ORIGIN: ""
-  APP_ORIGIN: ""
-  DIRECT_URL: ""
-  DATABASE_URL: ""
-  FROM_EMAIL: ""
-  REPLY_TO_EMAIL: ""
-  RESEND_API_KEY: ""
-  AUTH_GITHUB_CLIENT_ID: ""
-  AUTH_GITHUB_CLIENT_SECRET: ""
-
-## @section Postgresql(®) parameters
-## Documentation : https://github.com/bitnami/charts/tree/main/bitnami/postgresql-ha
+## @section Postgres parameters
+## Documentation: https://github.com/bitnami/charts/tree/main/bitnami/postgresql-ha
 ##
 postgresql:
-  ## @param postgresql.enabled Enable Postgresql(®)
+  ## @param postgresql.enabled Enable Postgres
   ##
   enabled: true
   ## @param postgresql.name Name used to build variables (deprecated)
@@ -94,27 +94,32 @@ postgresql:
   ## @param postgresql.nameOverride Name override
   ##
   nameOverride: "postgresql"
-  ## @param fullnameOverride String to fully override common.names.fullname template
+  ## @param postgresql.fullnameOverride Fullname override
   ##
   fullnameOverride: "postgresql"
 
   global:
     postgresql:
-      ## @param global.postgresql.auth.postgresPassword Password for the "postgres" admin user (overrides `auth.postgresPassword`)
-      ## @param global.postgresql.auth.username Name for a custom user to create (overrides `auth.username`)
-      ## @param global.postgresql.auth.password Password for the custom user to create (overrides `auth.password`)
-      ## @param global.postgresql.auth.database Name for a custom database to create (overrides `auth.database`)
-      ## @param global.postgresql.auth.existingSecret Name of existing secret to use for PostgreSQL credentials (overrides `auth.existingSecret`).
-      ## @param global.postgresql.auth.secretKeys.adminPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.adminPasswordKey`). Only used when `global.postgresql.auth.existingSecret` is set.
-      ## @param global.postgresql.auth.secretKeys.userPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.userPasswordKey`). Only used when `global.postgresql.auth.existingSecret` is set.
-      ## @param global.postgresql.auth.secretKeys.replicationPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.replicationPasswordKey`). Only used when `global.postgresql.auth.existingSecret` is set.
+      ## @param postgresql.global.postgresql.auth.postgresPassword Password for the "postgres" admin user (overrides `auth.postgresPassword`)
+      ## @param postgresql.global.postgresql.auth.username Name for a custom user to create (overrides `auth.username`)
+      ## @param postgresql.global.postgresql.auth.password Password for the custom user to create (overrides `auth.password`)
+      ## @param postgresql.global.postgresql.auth.database Name for a custom database to create (overrides `auth.database`)
+      ## @param postgresql.global.postgresql.auth.existingSecret Name of existing secret to use for PostgreSQL credentials (overrides `auth.existingSecret`).
+      ## @param postgresql.global.postgresql.auth.secretKeys.adminPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.adminPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set.
+      ## @param postgresql.global.postgresql.auth.secretKeys.userPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.userPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set.
+      ## @param postgresql.global.postgresql.auth.secretKeys.replicationPasswordKey Name of key in existing secret to use for PostgreSQL credentials (overrides `auth.secretKeys.replicationPasswordKey`). Only used when `postgresql.global.postgresql.auth.existingSecret` is set.
       ##
       auth:
         postgresPassword: "password"
         username: "postgres"
         password: "password"
         database: "trigger"
-      ## @param global.postgresql.service.ports.postgresql PostgreSQL service port (overrides `service.ports.postgresql`)
+        existingSecret: ""
+        secretKeys:
+          adminPasswordKey: ""
+          userPasswordKey: ""
+          replicationPasswordKey: ""
+      ## @param postgresql.global.postgresql.service.ports.postgresql PostgreSQL service port (overrides `service.ports.postgresql`)
       ##
       service:
         ports:
@@ -122,30 +127,51 @@ postgresql:
 
   ## Bitnami PostgreSQL image version
   ## ref: https://hub.docker.com/r/bitnami/postgresql/tags/
-  ## @param image.registry PostgreSQL image registry
-  ## @param image.repository PostgreSQL image repository
-  ## @param image.tag PostgreSQL image tag (immutable tags are recommended)
-  ## @param image.digest PostgreSQL image digest in the way sha256:aa.... Please note this parameter, if set, will override the tag
-  ## @param image.pullPolicy PostgreSQL image pull policy
-  ## @param image.pullSecrets Specify image pull secrets
-  ## @param image.debug Specify if debug values should be set
+  ## @param postgresql.image.registry PostgreSQL image registry
+  ## @param postgresql.image.repository PostgreSQL image repository
+  ## @param postgresql.image.tag PostgreSQL image tag (immutable tags are recommended)
+  ## @param postgresql.image.digest PostgreSQL image digest in the way sha256:aa.... Please note this parameter, if set, will override the tag
+  ## @param postgresql.image.pullPolicy PostgreSQL image pull policy
+  ## @param postgresql.image.pullSecrets Specify image pull secrets
+  ## @param postgresql.image.debug Specify if debug values should be set
   ##
   image:
     registry: docker.io
     repository: bitnami/postgresql
-    tag: 16.0.0-debian-11-r13
+    tag: 14.10.0-debian-11-r21
+    digest: ""
+    ## Specify a imagePullPolicy
+    ## Defaults to 'Always' if image tag is 'latest', else set to 'IfNotPresent'
+    ## ref: https://kubernetes.io/docs/user-guide/images/#pre-pulling-images
+    ##
+    pullPolicy: IfNotPresent
+    ## Optionally specify an array of imagePullSecrets.
+    ## Secrets must be manually created in the namespace.
+    ## ref: https://kubernetes.io/docs/tasks/configure-pod-container/pull-image-private-registry/
+    ## Example:
+    ## pullSecrets:
+    ##   - myRegistryKeySecretName
+    ##
+    pullSecrets: []
+    ## Set to true if you would like to see extra information on logs
+    ##
+    debug: false
 
+  ## @param postgresql.architecture PostgreSQL architecture (`standalone` or `replication`)
+  ##
   architecture: standalone
   ## Replication configuration
-  ## Ignored if `architecture` is `standalone`
+  ## Ignored if `postgresql.architecture` is `standalone`
   ##
-  ## @param containerPorts.postgresql PostgreSQL container port
+  ## @param postgresql.containerPorts.postgresql PostgreSQL container port
   ##
   containerPorts:
     postgresql: 5432
 
+  ## @param postgresql.postgresqlDataDir PostgreSQL data dir
+  ##
   postgresqlDataDir: /bitnami/postgresql/data
-  ## @param postgresqlSharedPreloadLibraries Shared preload libraries (comma-separated list)
+  ## @param postgresql.postgresqlSharedPreloadLibraries Shared preload libraries (comma-separated list)
   ##
   postgresqlSharedPreloadLibraries: "pgaudit"
   ## @section PostgreSQL Primary parameters
@@ -153,12 +179,12 @@ postgresql:
   primary:
     ## Configure extra options for PostgreSQL Primary containers' liveness, readiness and startup probes
     ## ref: https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/#configure-probes
-    ## @param primary.livenessProbe.enabled Enable livenessProbe on PostgreSQL Primary containers
-    ## @param primary.livenessProbe.initialDelaySeconds Initial delay seconds for livenessProbe
-    ## @param primary.livenessProbe.periodSeconds Period seconds for livenessProbe
-    ## @param primary.livenessProbe.timeoutSeconds Timeout seconds for livenessProbe
-    ## @param primary.livenessProbe.failureThreshold Failure threshold for livenessProbe
-    ## @param primary.livenessProbe.successThreshold Success threshold for livenessProbe
+    ## @param postgresql.primary.livenessProbe.enabled Enable livenessProbe on PostgreSQL Primary containers
+    ## @param postgresql.primary.livenessProbe.initialDelaySeconds Initial delay seconds for livenessProbe
+    ## @param postgresql.primary.livenessProbe.periodSeconds Period seconds for livenessProbe
+    ## @param postgresql.primary.livenessProbe.timeoutSeconds Timeout seconds for livenessProbe
+    ## @param postgresql.primary.livenessProbe.failureThreshold Failure threshold for livenessProbe
+    ## @param postgresql.primary.livenessProbe.successThreshold Success threshold for livenessProbe
     ##
     livenessProbe:
       enabled: true
@@ -167,12 +193,12 @@ postgresql:
       timeoutSeconds: 5
       failureThreshold: 6
       successThreshold: 1
-    ## @param primary.readinessProbe.enabled Enable readinessProbe on PostgreSQL Primary containers
-    ## @param primary.readinessProbe.initialDelaySeconds Initial delay seconds for readinessProbe
-    ## @param primary.readinessProbe.periodSeconds Period seconds for readinessProbe
-    ## @param primary.readinessProbe.timeoutSeconds Timeout seconds for readinessProbe
-    ## @param primary.readinessProbe.failureThreshold Failure threshold for readinessProbe
-    ## @param primary.readinessProbe.successThreshold Success threshold for readinessProbe
+    ## @param postgresql.primary.readinessProbe.enabled Enable readinessProbe on PostgreSQL Primary containers
+    ## @param postgresql.primary.readinessProbe.initialDelaySeconds Initial delay seconds for readinessProbe
+    ## @param postgresql.primary.readinessProbe.periodSeconds Period seconds for readinessProbe
+    ## @param postgresql.primary.readinessProbe.timeoutSeconds Timeout seconds for readinessProbe
+    ## @param postgresql.primary.readinessProbe.failureThreshold Failure threshold for readinessProbe
+    ## @param postgresql.primary.readinessProbe.successThreshold Success threshold for readinessProbe
     ##
     readinessProbe:
       enabled: true
@@ -181,12 +207,12 @@ postgresql:
       timeoutSeconds: 5
       failureThreshold: 6
       successThreshold: 1
-    ## @param primary.startupProbe.enabled Enable startupProbe on PostgreSQL Primary containers
-    ## @param primary.startupProbe.initialDelaySeconds Initial delay seconds for startupProbe
-    ## @param primary.startupProbe.periodSeconds Period seconds for startupProbe
-    ## @param primary.startupProbe.timeoutSeconds Timeout seconds for startupProbe
-    ## @param primary.startupProbe.failureThreshold Failure threshold for startupProbe
-    ## @param primary.startupProbe.successThreshold Success threshold for startupProbe
+    ## @param postgresql.primary.startupProbe.enabled Enable startupProbe on PostgreSQL Primary containers
+    ## @param postgresql.primary.startupProbe.initialDelaySeconds Initial delay seconds for startupProbe
+    ## @param postgresql.primary.startupProbe.periodSeconds Period seconds for startupProbe
+    ## @param postgresql.primary.startupProbe.timeoutSeconds Timeout seconds for startupProbe
+    ## @param postgresql.primary.startupProbe.failureThreshold Failure threshold for startupProbe
+    ## @param postgresql.primary.startupProbe.successThreshold Success threshold for startupProbe
     ##
     startupProbe:
       enabled: false
@@ -196,21 +222,22 @@ postgresql:
       failureThreshold: 15
       successThreshold: 1
     persistence:
-      ## @param primary.persistence.enabled Enable PostgreSQL Primary data persistence using PVC
+      ## @param postgresql.primary.persistence.enabled Enable PostgreSQL Primary data persistence using PVC
       ##
       enabled: true
-      ## @param primary.persistence.existingClaim Name of an existing PVC to use
+      ## @param postgresql.primary.persistence.existingClaim Name of an existing PVC to use
       ##
       existingClaim: ""
-      ## @param primary.persistence.accessModes PVC Access Mode for PostgreSQL volume
+      ## @param postgresql.primary.persistence.accessModes PVC Access Mode for PostgreSQL volume
       ##
       accessModes:
         - ReadWriteOnce
-      ## @param primary.persistence.size PVC Storage Request for PostgreSQL volume
+      ## @param postgresql.primary.persistence.size PVC Storage Request for PostgreSQL volume
       ##
       size: 8Gi
 
 ## @section Ingress parameters
+## Documentation: https://kubernetes.io/docs/concepts/services-networking/ingress/
 ##
 ingress:
   ## @param ingress.enabled Enable ingress
@@ -233,11 +260,6 @@ ingress:
   ## Replace with your own domain
   ##
   hostName: ""
-  ## @skip ingress.frontend
-  ##
-  trigger:
-    path: /
-    pathType: Prefix
   ## @param ingress.tls Ingress TLS hosts (matching above hostName)
   ## Replace with your own domain
   ##
@@ -246,3 +268,9 @@ ingress:
     # - secretName: letsencrypt-nginx
     #   hosts:
     #     - infisical.local
+  ## @param ingress.trigger.path Trigger.dev ingress path
+  ## @param ingress.trigger.pathType Trigger.dev ingress path type
+  ##
+  trigger:
+    path: /
+    pathType: Prefix

integrations/airtable/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/airtable
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/airtable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/airtable",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for airtable",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "airtable": "^0.12.1",
     "zod": "3.22.3"
   },

integrations/github/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/github
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/github/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/github",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "The official GitHub integration for Trigger.dev",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,8 +30,8 @@
     "@octokit/request-error": "^5.0.1",
     "@octokit/webhooks": "^12.0.10",
     "octokit": "^3.1.2",
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "zod": "3.22.3"
   },
   "engines": {

integrations/linear/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/linear
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/linear/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/linear",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for @linear/sdk",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@linear/sdk": "^8.0.0",
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "zod": "3.22.3"
   },
   "engines": {

integrations/openai/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/slack
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/openai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/openai",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "The official OpenAI integration for Trigger.dev",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,8 +42,8 @@
   },
   "dependencies": {
     "openai": "^4.16.1",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
-    "@trigger.dev/integration-kit": "workspace:^2.3.9"
+    "@trigger.dev/sdk": "workspace:^2.3.16",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16"
   },
   "engines": {
     "node": ">=18.0.0"

integrations/plain/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/plain
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/plain/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/plain",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "The official Plain.com integration for Trigger.dev",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,8 +24,8 @@
     "build:tsup": "tsup"
   },
   "dependencies": {
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "@team-plain/typescript-sdk": "^2.7.0"
   },
   "engines": {

integrations/replicate/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/replicate
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/replicate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/replicate",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for replicate",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "replicate": "^0.18.1",
     "zod": "3.22.3"
   },

integrations/resend/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @trigger.dev/resend
 
+## 2.3.16
+
+### Patch Changes
+
+- da90ee13: Fix resend integration example comment
+  - @trigger.dev/integration-kit@2.3.16
+  - @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- 4dd6cf18: Add support for the new Resend audience API endpoints
+  - @trigger.dev/integration-kit@2.3.14
+  - @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/resend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/resend",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "The official Resend.com integration for Trigger.dev",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,9 +24,9 @@
     "build:tsup": "tsup"
   },
   "dependencies": {
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
-    "resend": "^2.0.0"
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
+    "resend": "^2.1.0"
   },
   "engines": {
     "node": ">=18.0.0"

integrations/resend/src/audiences.ts

@@ -0,0 +1,134 @@
+import { IntegrationTaskKey, retry } from "@trigger.dev/sdk";
+import type { ResendRunTask } from "./index";
+import { Resend } from "resend";
+import { handleResendError } from "./utils";
+
+type CreateAudienceResult = NonNullable<Awaited<ReturnType<Resend["audiences"]["create"]>>["data"]>;
+type GetAudienceResult = NonNullable<Awaited<ReturnType<Resend["audiences"]["get"]>>["data"]>;
+type DeleteAudienceResult = NonNullable<Awaited<ReturnType<Resend["audiences"]["remove"]>>["data"]>;
+type ListAudiencesResult = NonNullable<Awaited<ReturnType<Resend["audiences"]["list"]>>["data"]>;
+
+export class Audiences {
+  constructor(private runTask: ResendRunTask) {}
+
+  create(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["audiences"]["create"]>[0],
+    options?: Parameters<Resend["audiences"]["create"]>[1]
+  ): Promise<CreateAudienceResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.audiences.create(payload, options);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Create Audience",
+        params: payload,
+        properties: [
+          {
+            label: "Name",
+            text: payload.name,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  get(key: IntegrationTaskKey, payload: string): Promise<GetAudienceResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.audiences.get(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Get Audience",
+        params: payload,
+        properties: [
+          {
+            label: "ID",
+            text: payload,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  remove(key: IntegrationTaskKey, payload: string): Promise<DeleteAudienceResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.audiences.remove(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Remove Audience",
+        params: payload,
+        properties: [
+          {
+            label: "ID",
+            text: payload,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  list(key: IntegrationTaskKey): Promise<ListAudiencesResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.audiences.list();
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "List Audiences",
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+}

integrations/resend/src/contacts.ts

@@ -0,0 +1,188 @@
+import { IntegrationTaskKey, retry } from "@trigger.dev/sdk";
+import type { ResendRunTask } from "./index";
+import { Resend } from "resend";
+import { handleResendError } from "./utils";
+
+type CreateContactResult = NonNullable<Awaited<ReturnType<Resend["contacts"]["create"]>>["data"]>;
+type GetContactResult = NonNullable<Awaited<ReturnType<Resend["contacts"]["get"]>>["data"]>;
+type UpdateContactResult = NonNullable<Awaited<ReturnType<Resend["contacts"]["update"]>>["data"]>;
+type DeleteContactResult = NonNullable<Awaited<ReturnType<Resend["contacts"]["remove"]>>["data"]>;
+type ListContactsResult = NonNullable<Awaited<ReturnType<Resend["contacts"]["list"]>>["data"]>;
+
+export class Contacts {
+  constructor(private runTask: ResendRunTask) {}
+
+  create(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["contacts"]["create"]>[0],
+    options?: Parameters<Resend["contacts"]["create"]>[1]
+  ): Promise<CreateContactResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.contacts.create(payload, options);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Create Contact",
+        params: payload,
+        properties: [
+          {
+            label: "Email",
+            text: payload.email,
+          },
+          ...(payload.first_name && payload.last_name
+            ? [{ label: "Name", text: payload.first_name + " " + payload.last_name }]
+            : []),
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  get(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["contacts"]["get"]>[0]
+  ): Promise<GetContactResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.contacts.get(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Get Contact",
+        params: payload,
+        properties: [
+          {
+            label: "Id",
+            text: payload.id,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  update(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["contacts"]["update"]>[0]
+  ): Promise<UpdateContactResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.contacts.update(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Update Contact",
+        params: payload,
+        properties: [
+          {
+            label: "Id",
+            text: payload.id,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  remove(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["contacts"]["remove"]>[0]
+  ): Promise<DeleteContactResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.contacts.remove(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "Remove Contact",
+        params: payload,
+        properties: [
+          {
+            label: "Id",
+            text: payload.id,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+
+  list(
+    key: IntegrationTaskKey,
+    payload: Parameters<Resend["contacts"]["list"]>[0]
+  ): Promise<ListContactsResult> {
+    return this.runTask(
+      key,
+      async (client, task) => {
+        const { error, data } = await client.contacts.list(payload);
+
+        if (error) {
+          throw error;
+        }
+
+        if (!data) {
+          throw new Error("No data returned from Resend");
+        }
+
+        return data;
+      },
+      {
+        name: "List Contacts",
+        params: payload,
+        properties: [
+          {
+            label: "Audience Id",
+            text: payload.audience_id,
+          },
+        ],
+        retry: retry.standardBackoff,
+      },
+      handleResendError
+    );
+  }
+}

integrations/resend/src/emails.ts

@@ -3,9 +3,11 @@ import type { ResendRunTask } from "./index";
 import { Resend } from "resend";
 import { handleResendError } from "./utils";
 
-type SendEmailResult = NonNullable<Awaited<ReturnType<Resend["emails"]["send"]>>["data"]>;
-type CreateEmailResult = NonNullable<Awaited<ReturnType<Resend["emails"]["create"]>>["data"]>;
-type GetEmailResult = NonNullable<Awaited<ReturnType<Resend["emails"]["get"]>>["data"]>;
+export type SendEmailResult = NonNullable<Awaited<ReturnType<Resend["emails"]["send"]>>["data"]>;
+export type CreateEmailResult = NonNullable<
+  Awaited<ReturnType<Resend["emails"]["create"]>>["data"]
+>;
+export type GetEmailResult = NonNullable<Awaited<ReturnType<Resend["emails"]["get"]>>["data"]>;
 
 export class Emails {
   constructor(private runTask: ResendRunTask) {}

integrations/resend/src/index.ts

@@ -9,8 +9,10 @@ import {
   type TriggerIntegration,
 } from "@trigger.dev/sdk";
 import { Resend as ResendClient } from "resend";
-import { Emails } from "./emails";
+import { Emails, SendEmailResult } from "./emails";
 import { Batch } from "./batch";
+import { Contacts } from "./contacts";
+import { Audiences } from "./audiences";
 
 type ErrorResponse = {
   statusCode: number;
@@ -154,7 +156,39 @@ export class Resend implements TriggerIntegration {
   /**
    * @deprecated Please use resend.emails.send instead
    */
-  async sendEmail(...args: Parameters<typeof this.emails.send>) {
+  async sendEmail(...args: Parameters<typeof this.emails.send>): Promise<SendEmailResult> {
     return this.emails.send(...args);
   }
+
+  /**
+   * Access the Resend Audiences API
+   * @example
+   * ```ts
+   * const response = await io.resend.audiences.create("📧", {
+   *  name: payload.name
+   * });
+   * ```
+   */
+
+  get audiences() {
+    return new Audiences(this.runTask.bind(this));
+  }
+
+  /**
+   * Access the Resend Contacts API
+   * @example
+   * ```ts
+   * const response = await io.resend.contacts.create("📧", {
+   *  email: payload.email,
+   *  first_name: payload.first_name,
+   *  last_name: payload.last_name,
+   *  unsubscribed: payload.unsubscribed,
+   *  audience_id: payload.audience_id
+   * });
+   * ```
+   */
+
+  get contacts() {
+    return new Contacts(this.runTask.bind(this));
+  }
 }

integrations/sendgrid/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/sendgrid
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/sendgrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/sendgrid",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for @sendgrid/mail",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@sendgrid/mail": "^7.7.0",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
-    "@trigger.dev/integration-kit": "workspace:^2.3.9"
+    "@trigger.dev/sdk": "workspace:^2.3.16",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16"
   },
   "engines": {
     "node": ">=16.8.0"

integrations/shopify/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @trigger.dev/shopify
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.11
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/shopify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/shopify",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for @shopify/shopify-api",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@shopify/shopify-api": "^8.0.2",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
     "zod": "3.22.3"
   },
   "engines": {

integrations/slack/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @trigger.dev/slack
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/slack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/slack",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "The official Slack integration for Trigger.dev",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@slack/web-api": "^6.8.1",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "zod": "3.22.3"
   },
   "engines": {

integrations/stripe/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @trigger.dev/stripe
 
+## 2.3.16
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.16
+- @trigger.dev/sdk@2.3.16
+
+## 2.3.15
+
+### Patch Changes
+
+- Updated dependencies [6c4047cf]
+  - @trigger.dev/sdk@2.3.15
+  - @trigger.dev/integration-kit@2.3.15
+
+## 2.3.14
+
+### Patch Changes
+
+- @trigger.dev/integration-kit@2.3.14
+- @trigger.dev/sdk@2.3.14
+
+## 2.3.13
+
+### Patch Changes
+
+- Updated dependencies [a93b554f]
+- Updated dependencies [0f342cd1]
+  - @trigger.dev/sdk@2.3.13
+  - @trigger.dev/integration-kit@2.3.13
+
+## 2.3.12
+
+### Patch Changes
+
+- Updated dependencies [129f023d]
+- Updated dependencies [38f5a903]
+- Updated dependencies [ff4ff869]
+  - @trigger.dev/sdk@2.3.12
+  - @trigger.dev/integration-kit@2.3.12
+
+## 2.3.11
+
+### Patch Changes
+
+- 5af20035: Fix SubtleCryptoProvider webhook validation
+  - @trigger.dev/integration-kit@2.3.11
+  - @trigger.dev/sdk@2.3.11
+
+## 2.3.10
+
+### Patch Changes
+
+- Updated dependencies [8277f4d2]
+- Updated dependencies [73cb8839]
+  - @trigger.dev/sdk@2.3.10
+  - @trigger.dev/integration-kit@2.3.10
+
 ## 2.3.9
 
 ### Patch Changes

integrations/stripe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trigger.dev/stripe",
-  "version": "2.3.9",
+  "version": "2.3.16",
   "description": "Trigger.dev integration for stripe",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@trigger.dev/integration-kit": "workspace:^2.3.9",
-    "@trigger.dev/sdk": "workspace:^2.3.9",
+    "@trigger.dev/integration-kit": "workspace:^2.3.16",
+    "@trigger.dev/sdk": "workspace:^2.3.16",
     "stripe": "^12.14.0",
     "zod": "3.22.3"
   },

integrations/stripe/src/index.ts

@@ -1151,7 +1151,7 @@ async function webhookHandler(event: HandlerEvent<"HTTP">, logger: Logger) {
     const stripeClient = new StripeClient("", { apiVersion: "2022-11-15" });
 
     try {
-      const event = stripeClient.webhooks.constructEvent(rawBody, signature, source.secret);
+      const event = await stripeClient.webhooks.constructEventAsync(rawBody, signature, source.secret);
 
       return {
         events: [