feat(webapp,core,cli): shared webhook endpoints, waiters and an endpoints dashboard

Hosted webhooks now use shared endpoints: declare an endpoint once,
register its one URL with the provider, and subscribe tasks, agents and
waiting runs to it, each with its own filter. Runs can also wait for a
specific webhook.

```ts
import { task, webhook, webhooks } from "@trigger.dev/sdk";

export const stripe = webhooks.endpoint.define({ id: "stripe", source: webhooks.stripe() });

export const fulfillOrder = webhook({
  id: "fulfill-order",
  endpoint: stripe,
  filter: "event.type == 'checkout.session.completed'",
  onEvent: async ({ event }) => {
    // runs once per matching delivery
  },
});

export const checkout = task({
  id: "checkout",
  run: async ({ orderId }: { orderId: string }) => {
    const waiter = await webhooks.waiter.create(stripe, {
      match: { "event.data.object.metadata.orderId": orderId },
      timeout: "1h",
    });

    await createPaymentIntent(orderId); // makes Stripe send the webhook

    const { event } = await webhooks.waiter.wait(waiter).unwrap();
    return event.data.object.id;
  },
});
```

A delivery fans out to every subscriber whose filter passes and records
a result per subscriber. A waiter matches event fields, headers or
endpoint fields, resumes on the first matching delivery after it was
created, and times out otherwise (24 hours by default, up to 90 days);
one delivery can resume up to 10,000 waiting runs. Webhook processing is
scheduled fairly across environments, and waiter and concurrency limits
can be set per organization.

The Webhooks dashboard lists your endpoints with their URL, secret state
and activity, and each endpoint's page shows its subscribers,
deliveries, live waiters and a test console. A webhook-triggered run
links to its delivery. Endpoints can produce an AI setup prompt, and the
MCP server can read endpoints, set secrets, and list, inspect and replay
deliveries.

Mono-RevId: 338e92daa8d9b5b1b8999380cc18123c33ee02f1

Author: ericallam

apps/webapp/app/components/admin/backOffice/WebhookLimitsSection.server.ts

@@ -0,0 +1,59 @@
+import { Prisma } from "@trigger.dev/database";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { logger } from "~/services/logger.server";
+import { WEBHOOK_LIMITS_INTENT } from "./WebhookLimitsSection";
+
+const OptionalLimit = z.preprocess(
+  (value) => (value === "" || value === null ? undefined : value),
+  z.coerce.number().int().min(1).max(2_147_483_647).optional()
+);
+
+const SetWebhookLimitsSchema = z.object({
+  intent: z.literal(WEBHOOK_LIMITS_INTENT),
+  maxWaitersPerEnvironment: OptionalLimit,
+  maxWaitersPerEndpoint: OptionalLimit,
+  concurrency: OptionalLimit,
+});
+
+export type WebhookLimitsActionResult =
+  | { ok: true }
+  | { ok: false; errors: Record<string, string[] | undefined> };
+
+export async function handleWebhookLimitsAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string
+): Promise<WebhookLimitsActionResult> {
+  const submission = SetWebhookLimitsSchema.safeParse(Object.fromEntries(formData));
+  if (!submission.success) {
+    return { ok: false, errors: submission.error.flatten().fieldErrors };
+  }
+
+  const existing = await prisma.organization.findFirst({
+    where: { id: orgId },
+    select: { webhookLimitsConfig: true },
+  });
+  if (!existing) {
+    throw new Response(null, { status: 404 });
+  }
+
+  const { intent: _intent, ...values } = submission.data;
+  const next = Object.fromEntries(
+    Object.entries(values).filter(([, value]) => value !== undefined)
+  );
+
+  await prisma.organization.update({
+    where: { id: orgId },
+    data: { webhookLimitsConfig: Object.keys(next).length > 0 ? next : Prisma.DbNull },
+  });
+
+  logger.info("admin.backOffice.webhookLimits", {
+    adminUserId,
+    orgId,
+    previous: existing.webhookLimitsConfig,
+    next,
+  });
+
+  return { ok: true };
+}

apps/webapp/app/components/admin/backOffice/WebhookLimitsSection.tsx

@@ -0,0 +1,141 @@
+import { Form } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { Button } from "~/components/primitives/Buttons";
+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 { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+import type { WebhookLimits, WebhookLimitsConfig } from "~/v3/webhookLimits";
+
+export const WEBHOOK_LIMITS_INTENT = "set-webhook-limits";
+export const WEBHOOK_LIMITS_SAVED_VALUE = "webhook-limits";
+
+type FieldErrors = Record<string, string[] | undefined> | null;
+
+const FIELDS: Array<{ key: keyof WebhookLimits; label: string; hint: string }> = [
+  {
+    key: "maxWaitersPerEnvironment",
+    label: "Waiters per environment",
+    hint: "Live webhook waiters one environment can hold across all its endpoints.",
+  },
+  {
+    key: "maxWaitersPerEndpoint",
+    label: "Waiters per endpoint",
+    hint: "Live waiters on one endpoint, which is also the most one delivery can resume.",
+  },
+  {
+    key: "concurrency",
+    label: "Processing concurrency",
+    hint: "Webhook jobs one environment can have in flight at once.",
+  },
+];
+
+type Props = {
+  limits: WebhookLimits;
+  overrides: WebhookLimitsConfig;
+  errors: FieldErrors;
+  savedJustNow: boolean;
+  isSubmitting: boolean;
+};
+
+export function WebhookLimitsSection({
+  limits,
+  overrides,
+  errors,
+  savedJustNow,
+  isSubmitting,
+}: Props) {
+  const hasFieldErrors = !!errors && Object.keys(errors).length > 0;
+  const fieldError = (field: string) =>
+    errors && field in errors ? errors[field]?.[0] : undefined;
+
+  const [isEditing, setIsEditing] = useState(hasFieldErrors);
+
+  useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    if (hasFieldErrors) setIsEditing(true);
+  }, [hasFieldErrors]);
+
+  useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- This effect intentionally synchronizes local state after an external or lifecycle change.
+    if (savedJustNow && !hasFieldErrors) setIsEditing(false);
+  }, [savedJustNow, hasFieldErrors]);
+
+  return (
+    <section className="flex flex-col gap-3 rounded-md border border-grid-bright bg-background-bright p-4">
+      <div className="flex items-center justify-between">
+        <Header2>Webhook limits</Header2>
+        {!isEditing && (
+          <Button
+            variant="tertiary/small"
+            onClick={() => setIsEditing(true)}
+            disabled={isSubmitting}
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+      <Paragraph variant="small" className="text-text-dimmed">
+        Set by the org's plan. A blank field uses the system default.
+      </Paragraph>
+
+      {savedJustNow && (
+        <div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
+          <Paragraph variant="small" className="text-green-500">
+            Saved.
+          </Paragraph>
+        </div>
+      )}
+
+      {!isEditing ? (
+        <Property.Table>
+          {FIELDS.map((field) => (
+            <Property.Item key={field.key}>
+              <Property.Label>{field.label}</Property.Label>
+              <Property.Value>
+                {limits[field.key].toLocaleString()}
+                <span className="text-text-dimmed">
+                  {overrides[field.key] !== undefined ? " (org)" : " (default)"}
+                </span>
+              </Property.Value>
+            </Property.Item>
+          ))}
+        </Property.Table>
+      ) : (
+        <Form method="post" className="flex flex-col gap-3 pt-2">
+          <input type="hidden" name="intent" value={WEBHOOK_LIMITS_INTENT} />
+          {FIELDS.map((field) => (
+            <div key={field.key} className="flex flex-col gap-1">
+              <Label>{field.label}</Label>
+              <Input
+                name={field.key}
+                type="number"
+                min={1}
+                defaultValue={overrides[field.key]?.toString() ?? ""}
+                placeholder={`Default: ${limits[field.key].toLocaleString()}`}
+              />
+              <Hint>{field.hint}</Hint>
+              <FormError>{fieldError(field.key)}</FormError>
+            </div>
+          ))}
+          <div className="flex items-center gap-2">
+            <Button type="submit" variant="primary/medium" disabled={isSubmitting}>
+              Save
+            </Button>
+            <Button
+              type="button"
+              variant="tertiary/medium"
+              onClick={() => setIsEditing(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+          </div>
+        </Form>
+      )}
+    </section>
+  );
+}

apps/webapp/app/components/metrics/ActivityBarChart.tsx

@@ -80,3 +80,22 @@ function ActivityPeakLabel({ tooltip, children }: { tooltip?: ReactNode; childre
   if (!tooltip) return label;
   return <SimpleTooltip asChild button={label} content={tooltip} />;
 }
+
+// SVG line matches recharts' y=0 ReferenceLine anti-aliasing; a CSS border looks too crisp.
+export function ActivityBarChartBlankState({ width = ACTIVITY_CHART_WIDTH }: { width?: number }) {
+  return (
+    <div className="flex items-start gap-1.5">
+      <svg width={width} height={ACTIVITY_CHART_HEIGHT} className="rounded-sm">
+        <line
+          x1={0}
+          y1={ACTIVITY_CHART_HEIGHT}
+          x2={width}
+          y2={ACTIVITY_CHART_HEIGHT}
+          stroke="var(--color-border-bright)"
+          strokeWidth={1}
+        />
+      </svg>
+      <span className={ACTIVITY_CHART_PEAK_CLASS}>0</span>
+    </div>
+  );
+}

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

@@ -217,7 +217,7 @@ const ENV_PAGE_META: Record<string, PageMeta> = {
   "": { icon: "tasks", name: "Tasks", singular: "Task" },
   runs: { icon: "runs", name: "Runs", singular: "Run" },
   sessions: { icon: "sessions", name: "Sessions", singular: "Session" },
-  webhooks: { icon: "webhooks", name: "Webhook deliveries" },
+  webhooks: { icon: "webhooks", name: "Webhooks" },
   prompts: { icon: "prompts", name: "Prompts", singular: "Prompt" },
   models: { icon: "models", name: "Models", singular: "Model" },
   logs: { icon: "logs", name: "Logs" },

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

@@ -9,6 +9,7 @@ import {
   WrenchIcon,
 } from "@heroicons/react/24/outline";
 import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
+import { WebhookIcon } from "~/assets/icons/WebhookIcon";
 import { InfoIcon } from "~/assets/icons/InfoIcon";
 import {
   AnthropicIcon,
@@ -84,6 +85,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
       return <CubeSparkleIcon className={cn(className, "text-agents")} />;
     case "scheduled":
       return <ClockIcon className={cn(className, "text-schedules")} />;
+    case "webhook":
+      return <WebhookIcon className={cn(className, "text-webhooks")} />;
     case "attempt":
       return (
         <AttemptIcon

apps/webapp/app/components/webhookConsole/WebhookComposer.tsx

@@ -5,7 +5,7 @@ import { CodeBlock } from "~/components/code/CodeBlock";
 import { JSONEditor } from "~/components/code/JSONEditor";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
-import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { CopyableText } from "~/components/primitives/CopyableText";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
@@ -21,11 +21,10 @@ import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { cn } from "~/utils/cn";
 import type { WebhookHandshakeConfig } from "@trigger.dev/core/v3";
 import type { WebhookSendResult } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.endpoints.$endpointParam.send";
-import { AIPayloadTabContent } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent";
 import { ReplaySourcePicker } from "./ReplaySourcePicker";
 import { SampleSourcePicker } from "./SampleSourcePicker";
 
-type SourceTab = "body" | "sample" | "replay" | "ai";
+type SourceTab = "body" | "sample" | "replay";
 
 type WebhookComposerEndpoint = {
   friendlyId: string;
@@ -188,13 +187,6 @@ export function WebhookComposer({
                 >
                   Replay
                 </TabButton>
-                <TabButton
-                  isActive={sourceTab === "ai"}
-                  layoutId="webhook-composer-source"
-                  onClick={() => setSourceTab("ai")}
-                >
-                  AI
-                </TabButton>
               </TabContainer>
             </div>
             <div className="relative flex-1 overflow-hidden">
@@ -230,18 +222,6 @@ export function WebhookComposer({
                   <ReplaySourcePicker replaySourcePath={replaySourcePath} onLoad={applyPayload} />
                 </div>
               ) : null}
-              {sourceTab === "ai" ? (
-                <div className="absolute inset-0 overflow-y-auto bg-charcoal-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                  <AIPayloadTabContent
-                    onPayloadGenerated={(payload) => applyPayload(payload, {})}
-                    taskIdentifier={endpoint?.source ?? "webhook"}
-                    payloadKind="webhook"
-                    providerSource={endpoint?.source}
-                    generateButtonLabel="Generate event"
-                    placeholder="e.g. a payment succeeded event with a $42.00 charge"
-                  />
-                </div>
-              ) : null}
             </div>
             {result ? (
               <div className="max-h-72 shrink-0 overflow-y-auto border-t border-grid-dimmed bg-background-dimmed p-3">
@@ -339,16 +319,16 @@ export function WebhookComposer({
             {endpoint ? (
               <InputGroup>
                 <Label variant="small">Webhook URL</Label>
-                <ClipboardField
-                  value={endpoint.ingressUrl}
-                  variant="secondary/small"
-                  className="font-mono"
-                  icon={
-                    <span className="pl-1 font-mono text-xxs font-semibold uppercase text-text-dimmed">
-                      POST
-                    </span>
-                  }
-                />
+                <span className="flex min-w-0 items-center gap-1.5">
+                  <span className="font-mono text-xxs font-semibold uppercase text-text-dimmed">
+                    POST
+                  </span>
+                  <CopyableText
+                    value={endpoint.ingressUrl}
+                    className="min-w-0 font-mono text-xs"
+                    truncate
+                  />
+                </span>
                 <Hint>
                   The public URL providers POST to. Test sends run the same pipeline in-process.
                 </Hint>