fix(webapp): apply active filters to the new-deliveries live count

The "N new deliveries" badge queried the live count with only the endpoint and
time window, dropping the status, webhook, delivery-id and test filters the list
was showing, so on a filtered list it announced deliveries the list would never
display. The count now runs through the same filter resolution as the list
(WebhookDeliveriesListPresenter.countNewDeliveries), and the live-reload hook
forwards the active filter params, so the badge only counts rows the list shows.

Author: ericallam

apps/webapp/app/components/webhookDeliveries/v1/useDeliveriesLiveReload.ts

@@ -195,8 +195,15 @@ export function useDeliveriesLiveReload({
       if (checkForNewDeliveries) {
         searchParams.set("includeNewDeliveries", "true");
         searchParams.set("since", String(knownNewestDeliveryMs));
-        const to = new URLSearchParams(location.search).get("to");
+        const current = new URLSearchParams(location.search);
+        const to = current.get("to");
         if (to) searchParams.set("to", to);
+        for (const status of current.getAll("statuses")) searchParams.append("statuses", status);
+        for (const webhook of current.getAll("webhooks")) searchParams.append("webhooks", webhook);
+        for (const key of ["deliveryId", "runId", "test"] as const) {
+          const value = current.get(key);
+          if (value) searchParams.set(key, value);
+        }
       }
 
       deliveriesPollFetcher.load(`${deliveriesResourcesBasePath}/live?${searchParams.toString()}`);

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

@@ -62,32 +62,11 @@ export class WebhookDeliveriesListPresenter {
   }): Promise<WebhookDeliveriesListResult> {
     const periodMs = period ? (parseDuration(period) ?? undefined) : undefined;
 
-    // Resolve the handler-slug webhook filter to endpoint ids. A non-empty webhook
-    // filter that matches no endpoints must return nothing, so fall back to a
-    // sentinel id that can never match rather than dropping the filter entirely.
-    let webhookEndpointIds: string[] | undefined;
-    if (webhooks && webhooks.length > 0) {
-      const endpoints = await webhookReplica.webhookEndpoint.findMany({
-        where: {
-          runtimeEnvironmentId: environmentId,
-          handlerWebhookId: { in: boundedIn(webhooks) },
-        },
-        select: { id: true },
-      });
-      webhookEndpointIds = endpoints.length > 0 ? endpoints.map((e) => e.id) : ["__none__"];
-    }
-
-    // The runId param is a FRIENDLY run id; the deliveries store the INTERNAL id.
-    // Resolve it, and force empty results when no run matches.
-    let internalRunId: string | undefined;
-    if (runId) {
-      const run = await runStore.findRun(
-        { friendlyId: runId },
-        { select: { id: true } },
-        this.replica
-      );
-      internalRunId = run?.id ?? "__none__";
-    }
+    const { webhookEndpointIds, internalRunId } = await this.#resolveFilterScope(
+      environmentId,
+      webhooks,
+      runId
+    );
 
     // Built per request (factory, NOT a singleton), matching every RunsRepository consumer.
     const repository = webhookDeliveriesRepository({
@@ -157,4 +136,101 @@ export class WebhookDeliveriesListPresenter {
       },
     };
   }
+
+  /**
+   * Count deliveries newer than `since` that match the same filters the list is showing, for the
+   * live "N new deliveries" badge. Applies the same filter resolution as {@link call} so the badge
+   * never counts events the filtered list would exclude. `webhookEndpointId` scopes to a single
+   * endpoint (the per-webhook page); `webhooks` is the cross-endpoint handler filter.
+   */
+  async countNewDeliveries({
+    organizationId,
+    projectId,
+    environmentId,
+    webhookEndpointId,
+    webhooks,
+    statuses,
+    deliveryId,
+    runId,
+    isTest,
+    since,
+    to,
+  }: {
+    organizationId: string;
+    projectId: string;
+    environmentId: string;
+    webhookEndpointId?: string;
+    webhooks?: string[];
+    statuses?: WebhookDeliveryStatus[];
+    deliveryId?: string;
+    runId?: string;
+    isTest?: boolean;
+    since: number;
+    to?: number;
+  }): Promise<number> {
+    if (to !== undefined && to <= since) return 0;
+
+    const { webhookEndpointIds, internalRunId } = await this.#resolveFilterScope(
+      environmentId,
+      webhooks,
+      runId
+    );
+
+    const repository = webhookDeliveriesRepository({
+      clickhouse: this.clickhouse,
+      prisma: webhookReplica,
+    });
+
+    const { deliveryIds } = await repository.listDeliveryIds({
+      organizationId,
+      projectId,
+      environmentId,
+      webhookEndpointId,
+      webhookEndpointIds,
+      deliveryId,
+      runId: internalRunId,
+      statuses,
+      isTest,
+      from: since + 1,
+      to,
+      page: { size: 100 },
+    });
+
+    return deliveryIds.length;
+  }
+
+  /**
+   * Resolve the handler-slug webhook filter to endpoint ids and the friendly runId to the internal
+   * id. A non-empty filter that matches nothing resolves to a sentinel that can never match, so the
+   * filter returns nothing rather than being dropped.
+   */
+  async #resolveFilterScope(
+    environmentId: string,
+    webhooks?: string[],
+    runId?: string
+  ): Promise<{ webhookEndpointIds?: string[]; internalRunId?: string }> {
+    let webhookEndpointIds: string[] | undefined;
+    if (webhooks && webhooks.length > 0) {
+      const endpoints = await webhookReplica.webhookEndpoint.findMany({
+        where: {
+          runtimeEnvironmentId: environmentId,
+          handlerWebhookId: { in: boundedIn(webhooks) },
+        },
+        select: { id: true },
+      });
+      webhookEndpointIds = endpoints.length > 0 ? endpoints.map((e) => e.id) : ["__none__"];
+    }
+
+    let internalRunId: string | undefined;
+    if (runId) {
+      const run = await runStore.findRun(
+        { friendlyId: runId },
+        { select: { id: true } },
+        this.replica
+      );
+      internalRunId = run?.id ?? "__none__";
+    }
+
+    return { webhookEndpointIds, internalRunId };
+  }
 }

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.deliveries.live.ts

@@ -1,7 +1,9 @@
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { z } from "zod";
+import { type WebhookDeliveryStatus } from "@trigger.dev/database";
 import { $replica, webhookReplica } from "~/db.server";
+import { WebhookDeliveriesListPresenter } from "~/presenters/v3/WebhookDeliveriesListPresenter.server";
 import { resolveDeliveryRunTargets } from "~/presenters/v3/WebhookDetailPresenter.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { loadProjectEnvironmentFromRequest } from "~/services/loadProjectEnvironmentFromRequest.server";
@@ -36,6 +38,38 @@ const SearchParamsSchema = z.object({
   to: z.coerce.number().optional(),
 });
 
+const KNOWN_DELIVERY_STATUSES: readonly WebhookDeliveryStatus[] = [
+  "PENDING",
+  "PROCESSING",
+  "SUCCEEDED",
+  "FAILED",
+  "FILTERED",
+];
+
+/**
+ * Parse the deliveries-list filters so the new-deliveries count applies the same ones the list is
+ * showing (its badge must never count events the filtered list would exclude). Mirrors the top-level
+ * list's param parsing: repeated or CSV `statuses`, repeated `webhooks`, `deliveryId`, `runId`, `test`.
+ */
+function parseListFilters(searchParams: URLSearchParams) {
+  const statusValues = searchParams
+    .getAll("statuses")
+    .flatMap((value) => value.split(","))
+    .map((value) => value.trim())
+    .filter((value): value is WebhookDeliveryStatus =>
+      KNOWN_DELIVERY_STATUSES.includes(value as WebhookDeliveryStatus)
+    );
+  const webhooks = searchParams.getAll("webhooks").filter((value) => value.length > 0);
+  const testParam = searchParams.get("test");
+  return {
+    statuses: statusValues.length > 0 ? statusValues : undefined,
+    webhooks: webhooks.length > 0 ? webhooks : undefined,
+    deliveryId: searchParams.get("deliveryId") ?? undefined,
+    runId: searchParams.get("runId") ?? undefined,
+    isTest: testParam === "only" ? true : testParam === "hide" ? false : undefined,
+  };
+}
+
 export type LiveDeliveryFields = {
   friendlyId: string;
   status: ListedWebhookDelivery["status"];
@@ -114,19 +148,20 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       : Promise.resolve([]),
     newDeliveriesSince !== undefined
       ? (async () => {
-          if (to !== undefined && to <= newDeliveriesSince) {
-            return { count: 0, since: newDeliveriesSince };
-          }
-          const { deliveryIds: newIds } = await repository.listDeliveryIds({
+          const filters = parseListFilters(url.searchParams);
+          const count = await new WebhookDeliveriesListPresenter(
+            $replica,
+            clickhouse
+          ).countNewDeliveries({
             organizationId: project.organizationId,
             projectId: project.id,
             environmentId: environment.id,
             webhookEndpointId,
-            from: newDeliveriesSince + 1,
+            ...filters,
+            since: newDeliveriesSince,
             to,
-            page: { size: 100 },
           });
-          return { count: newIds.length, since: newDeliveriesSince };
+          return { count, since: newDeliveriesSince };
         })()
       : Promise.resolve(undefined),
   ]);