Waitpoint token callback URLs

.changeset/curvy-dogs-share.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Added wait.createHttpCallback() to allow offloading work to 3rd party APIs

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

@@ -0,0 +1,22 @@
+export function HttpCallbackIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M21 12a9 9 0 1 0 -9 9" />
+      <path d="M3.6 9h16.8" />
+      <path d="M3.6 15h8.4" />
+      <path d="M11.578 3a17 17 0 0 0 0 18" />
+      <path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9" />
+      <path d="M18 21v-7m3 3l-3 -3l-3 3" />
+    </svg>
+  );
+}

apps/webapp/app/components/BlankStatePanels.tsx

@@ -36,6 +36,7 @@ import { TextLink } from "./primitives/TextLink";
 import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
 import { StepContentContainer } from "./StepContentContainer";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
 
 export function HasNoTasksDev() {
   return (
@@ -431,6 +432,33 @@ export function NoWaitpointTokens() {
   );
 }
 
+export function NoHttpCallbacks() {
+  return (
+    <InfoPanel
+      title="You don't have any HTTP callbacks"
+      icon={HttpCallbackIcon}
+      iconClassName="text-teal-500"
+      panelClassName="max-w-md"
+      accessory={
+        <LinkButton
+          to={docsPath("wait-for-http-callback")}
+          variant="docs/small"
+          LeadingIcon={BookOpenIcon}
+        >
+          Waitpoint docs
+        </LinkButton>
+      }
+    >
+      <Paragraph spacing variant="small">
+        HTTP callbacks are used to pause runs until an HTTP request is made to a provided URL.
+      </Paragraph>
+      <Paragraph spacing variant="small">
+        They are useful when using APIs that provide a callback URL. You can send the URL to them
+        and when they callback your run will continue.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
 function SwitcherPanel() {
   const organization = useOrganization();
   const project = useProject();

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

@@ -54,6 +54,7 @@ import {
   v3SchedulesPath,
   v3TestPath,
   v3UsagePath,
+  v3WaitpointHttpCallbacksPath,
   v3WaitpointTokensPath,
 } from "~/utils/pathBuilder";
 import { useKapaWidget } from "../../hooks/useKapaWidget";
@@ -80,6 +81,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -245,6 +247,12 @@ export function SideMenu({
               activeIconColor="text-sky-500"
               to={v3WaitpointTokensPath(organization, project, environment)}
             />
+            <SideMenuItem
+              name="HTTP callbacks"
+              icon={HttpCallbackIcon}
+              activeIconColor="text-teal-500"
+              to={v3WaitpointHttpCallbacksPath(organization, project, environment)}
+            />
           </SideMenuSection>
 
           <SideMenuSection title="Manage">

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

@@ -19,6 +19,8 @@ import { FunctionIcon } from "~/assets/icons/FunctionIcon";
 import { TriggerIcon } from "~/assets/icons/TriggerIcon";
 import { PythonLogoIcon } from "~/assets/icons/PythonLogoIcon";
 import { TraceIcon } from "~/assets/icons/TraceIcon";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 
 type TaskIconProps = {
   name: string | undefined;
@@ -75,6 +77,12 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
       return <TriggerIcon className={cn(className, "text-orange-500")} />;
     case "python":
       return <PythonLogoIcon className={className} />;
+    case "wait-http-callback":
+      return <HttpCallbackIcon className={cn(className, "text-teal-500")} />;
+    case "wait-token":
+      return <WaitpointTokenIcon className={cn(className, "text-sky-500")} />;
+    case "function":
+      return <FunctionIcon className={cn(className, "text-text-dimmed")} />;
     //log levels
     case "debug":
     case "log":

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

@@ -7,10 +7,19 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { type WaitpointDetail } from "~/presenters/v3/WaitpointPresenter.server";
 import { ForceTimeout } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
-import { v3WaitpointTokenPath, v3WaitpointTokensPath } from "~/utils/pathBuilder";
+import {
+  v3WaitpointHttpCallbackPath,
+  v3WaitpointTokenPath,
+  v3WaitpointTokensPath,
+} from "~/utils/pathBuilder";
 import { PacketDisplay } from "./PacketDisplay";
 import { WaitpointStatusCombo } from "./WaitpointStatus";
 import { RunTag } from "./RunTag";
+import { CopyableText } from "~/components/primitives/CopyableText";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { WaitpointResolver } from "@trigger.dev/database";
+import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { HttpCallbackIcon } from "~/assets/icons/HttpCallbackIcon";
 
 export function WaitpointDetailTable({
   waitpoint,
@@ -39,9 +48,15 @@ export function WaitpointDetailTable({
         <Property.Value className="whitespace-pre-wrap">
           {linkToList ? (
             <TextLink
-              to={v3WaitpointTokenPath(organization, project, environment, waitpoint, {
-                id: waitpoint.id,
-              })}
+              to={
+                waitpoint.resolver === "TOKEN"
+                  ? v3WaitpointTokenPath(organization, project, environment, waitpoint, {
+                      id: waitpoint.id,
+                    })
+                  : v3WaitpointHttpCallbackPath(organization, project, environment, waitpoint, {
+                      id: waitpoint.id,
+                    })
+              }
             >
               {waitpoint.id}
             </TextLink>
@@ -50,6 +65,20 @@ export function WaitpointDetailTable({
           )}
         </Property.Value>
       </Property.Item>
+      <Property.Item>
+        <Property.Label>Type</Property.Label>
+        <Property.Value>
+          <WaitpointResolverCombo resolver={waitpoint.resolver} />
+        </Property.Value>
+      </Property.Item>
+      {waitpoint.callbackUrl && (
+        <Property.Item>
+          <Property.Label>Callback URL</Property.Label>
+          <Property.Value className="my-1">
+            <ClipboardField value={waitpoint.callbackUrl} variant={"secondary/small"} />
+          </Property.Value>
+        </Property.Item>
+      )}
       <Property.Item>
         <Property.Label>Idempotency key</Property.Label>
         <Property.Value>
@@ -128,3 +157,22 @@ export function WaitpointDetailTable({
     </Property.Table>
   );
 }
+
+export function WaitpointResolverCombo({ resolver }: { resolver: WaitpointResolver }) {
+  switch (resolver) {
+    case "TOKEN":
+      return (
+        <div className="flex items-center gap-1">
+          <WaitpointTokenIcon className="size-4" />
+          <span>Token</span>
+        </div>
+      );
+    case "HTTP_CALLBACK":
+      return (
+        <div className="flex items-center gap-1">
+          <HttpCallbackIcon className="size-4" />
+          <span>HTTP Callback</span>
+        </div>
+      );
+  }
+}

apps/webapp/app/presenters/v3/ApiWaitpointTokenListPresenter.server.ts → apps/webapp/app/presenters/v3/ApiWaitpointListPresenter.server.ts

@@ -1,16 +1,12 @@
-import { RuntimeEnvironmentType, WaitpointTokenStatus } from "@trigger.dev/core/v3";
+import { type RuntimeEnvironmentType, WaitpointTokenStatus } from "@trigger.dev/core/v3";
+import { type RunEngineVersion, type WaitpointResolver } from "@trigger.dev/database";
 import { z } from "zod";
-import { BasePresenter } from "./basePresenter.server";
 import { CoercedDate } from "~/utils/zod";
-import { AuthenticatedEnvironment } from "@internal/run-engine";
-import {
-  WaitpointTokenListOptions,
-  WaitpointTokenListPresenter,
-} from "./WaitpointTokenListPresenter.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
-import { RunEngineVersion } from "@trigger.dev/database";
+import { BasePresenter } from "./basePresenter.server";
+import { type WaitpointListOptions, WaitpointListPresenter } from "./WaitpointListPresenter.server";
 
-export const ApiWaitpointTokenListSearchParams = z.object({
+export const ApiWaitpointListSearchParams = z.object({
   "page[size]": z.coerce.number().int().positive().min(1).max(100).optional(),
   "page[after]": z.string().optional(),
   "page[before]": z.string().optional(),
@@ -61,9 +57,9 @@ export const ApiWaitpointTokenListSearchParams = z.object({
   "filter[createdAt][to]": CoercedDate,
 });
 
-type ApiWaitpointTokenListSearchParams = z.infer<typeof ApiWaitpointTokenListSearchParams>;
+type ApiWaitpointListSearchParams = z.infer<typeof ApiWaitpointListSearchParams>;
 
-export class ApiWaitpointTokenListPresenter extends BasePresenter {
+export class ApiWaitpointListPresenter extends BasePresenter {
   public async call(
     environment: {
       id: string;
@@ -72,12 +68,15 @@ export class ApiWaitpointTokenListPresenter extends BasePresenter {
         id: string;
         engine: RunEngineVersion;
       };
+      apiKey: string;
     },
-    searchParams: ApiWaitpointTokenListSearchParams
+    resolver: WaitpointResolver,
+    searchParams: ApiWaitpointListSearchParams
   ) {
     return this.trace("call", async (span) => {
-      const options: WaitpointTokenListOptions = {
+      const options: WaitpointListOptions = {
         environment,
+        resolver,
       };
 
       if (searchParams["page[size]"]) {
@@ -118,7 +117,7 @@ export class ApiWaitpointTokenListPresenter extends BasePresenter {
         options.to = searchParams["filter[createdAt][to]"].getTime();
       }
 
-      const presenter = new WaitpointTokenListPresenter();
+      const presenter = new WaitpointListPresenter();
       const result = await presenter.call(options);
 
       if (!result.success) {

apps/webapp/app/presenters/v3/ApiWaitpointPresenter.server.ts

@@ -3,7 +3,7 @@ import { type RunEngineVersion } from "@trigger.dev/database";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { BasePresenter } from "./basePresenter.server";
 import { WaitpointPresenter } from "./WaitpointPresenter.server";
-import { waitpointStatusToApiStatus } from "./WaitpointTokenListPresenter.server";
+import { waitpointStatusToApiStatus } from "./WaitpointListPresenter.server";
 
 export class ApiWaitpointPresenter extends BasePresenter {
   public async call(

apps/webapp/app/presenters/v3/WaitpointTokenListPresenter.server.ts → apps/webapp/app/presenters/v3/WaitpointListPresenter.server.ts

@@ -1,6 +1,7 @@
 import parse from "parse-duration";
 import {
   Prisma,
+  type WaitpointResolver,
   type RunEngineVersion,
   type RuntimeEnvironmentType,
   type WaitpointStatus,
@@ -11,18 +12,21 @@ import { BasePresenter } from "./basePresenter.server";
 import { type WaitpointSearchParams } from "~/components/runs/v3/WaitpointTokenFilters";
 import { determineEngineVersion } from "~/v3/engineVersion.server";
 import { type WaitpointTokenStatus, type WaitpointTokenItem } from "@trigger.dev/core/v3";
+import { generateHttpCallbackUrl } from "~/services/httpCallback.server";
 
 const DEFAULT_PAGE_SIZE = 25;
 
-export type WaitpointTokenListOptions = {
+export type WaitpointListOptions = {
   environment: {
     id: string;
     type: RuntimeEnvironmentType;
     project: {
       id: string;
       engine: RunEngineVersion;
     };
+    apiKey: string;
   };
+  resolver: WaitpointResolver;
   // filters
   id?: string;
   statuses?: WaitpointTokenStatus[];
@@ -40,7 +44,7 @@ export type WaitpointTokenListOptions = {
 type Result =
   | {
       success: true;
-      tokens: WaitpointTokenItem[];
+      tokens: (WaitpointTokenItem & { callbackUrl: string })[];
       pagination: {
         next: string | undefined;
         previous: string | undefined;
@@ -63,9 +67,10 @@ type Result =
       filters: undefined;
     };
 
-export class WaitpointTokenListPresenter extends BasePresenter {
+export class WaitpointListPresenter extends BasePresenter {
   public async call({
     environment,
+    resolver,
     id,
     statuses,
     idempotencyKey,
@@ -76,7 +81,7 @@ export class WaitpointTokenListPresenter extends BasePresenter {
     direction = "forward",
     cursor,
     pageSize = DEFAULT_PAGE_SIZE,
-  }: WaitpointTokenListOptions): Promise<Result> {
+  }: WaitpointListOptions): Promise<Result> {
     const engineVersion = await determineEngineVersion({ environment });
     if (engineVersion === "V1") {
       return {
@@ -165,7 +170,7 @@ export class WaitpointTokenListPresenter extends BasePresenter {
       ${sqlDatabaseSchema}."Waitpoint" w
     WHERE
       w."environmentId" = ${environment.id}
-      AND w.type = 'MANUAL'
+      AND w.resolver = ${resolver}::"WaitpointResolver"
       -- cursor
       ${
         cursor
@@ -250,7 +255,7 @@ export class WaitpointTokenListPresenter extends BasePresenter {
       const firstToken = await this._replica.waitpoint.findFirst({
         where: {
           environmentId: environment.id,
-          type: "MANUAL",
+          resolver,
         },
       });
 
@@ -263,6 +268,7 @@ export class WaitpointTokenListPresenter extends BasePresenter {
       success: true,
       tokens: tokensToReturn.map((token) => ({
         id: token.friendlyId,
+        callbackUrl: generateHttpCallbackUrl(token.id, environment.apiKey),
         status: waitpointStatusToApiStatus(token.status, token.outputIsError),
         completedAt: token.completedAt ?? undefined,
         timeoutAt: token.completedAfter ?? undefined,