fix(webapp): accept all valid run and batch IDs in dashboard filters

The Run ID and Batch ID filter inputs on the runs list, batches list, and
logs view hard-coded the exact friendly-id lengths. Run and batch IDs in
the current format are two characters longer, so they were rejected with a
"wrong length" error and the Apply button stayed disabled, making it
impossible to filter by a recently created run or batch ID from the UI.

These filters now validate IDs with the shared id-shape classifier instead
of hard-coded lengths, so they accept every valid ID and will not drift if
the format changes again. The waitpoint ID filter gets the same fix
pre-emptively.

Author: d-cs

.server-changes/fix-ksuid-id-filters.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+The Run ID and Batch ID filters on the runs, batches, and logs pages now accept all valid run and batch IDs, fixing a case where recently created IDs were incorrectly rejected.

apps/webapp/app/components/logs/LogsRunIdFilter.tsx

@@ -1,5 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 import { FingerPrintIcon } from "@heroicons/react/20/solid";
+import { isClassifiable } from "@trigger.dev/core/v3/isomorphic";
 import { useCallback, useState } from "react";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { Button } from "~/components/primitives/Buttons";
@@ -72,8 +73,8 @@ function RunIdDropdown({
   if (runId) {
     if (!runId.startsWith("run_")) {
       error = "Run IDs start with 'run_'";
-    } else if (runId.length !== 25 && runId.length !== 29) {
-      error = "Run IDs are 25 or 29 characters long";
+    } else if (!isClassifiable(runId)) {
+      error = "That doesn't look like a valid run ID";
     }
   }
 

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

@@ -1,6 +1,7 @@
 import * as Ariakit from "@ariakit/react";
 import { Squares2X2Icon, XMarkIcon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
+import { isClassifiable } from "@trigger.dev/core/v3/isomorphic";
 import type { BatchTaskRunStatus } from "@trigger.dev/database";
 import { type ReactNode, useRef } from "react";
 import { z } from "zod";
@@ -227,7 +228,7 @@ function PermanentStatusFilter() {
 
 function validateBatchId(value: string): string | undefined {
   if (!value.startsWith("batch_")) return "Batch IDs start with 'batch_'";
-  if (value.length !== 27 && value.length !== 31) return "Batch IDs are 27 or 31 characters long";
+  if (!isClassifiable(value)) return "That doesn't look like a valid batch ID";
 }
 
 function BatchIdDropdown(

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

@@ -13,6 +13,7 @@ import {
 import { Form, useFetcher } from "@remix-run/react";
 import { IconRotateClockwise2, IconToggleLeft } from "@tabler/icons-react";
 import { MachinePresetName } from "@trigger.dev/core/v3";
+import { isClassifiable } from "@trigger.dev/core/v3/isomorphic";
 import type { BulkActionType, TaskRunStatus, TaskTriggerSource } from "@trigger.dev/database";
 import { matchSorter } from "match-sorter";
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
@@ -1715,7 +1716,7 @@ function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
 
 function validateRunId(value: string): string | undefined {
   if (!value.startsWith("run_")) return "Run IDs start with 'run_'";
-  if (value.length !== 25 && value.length !== 29) return "Run IDs are 25 or 29 characters long";
+  if (!isClassifiable(value)) return "That doesn't look like a valid run ID";
 }
 
 function RunIdDropdown(
@@ -1770,7 +1771,7 @@ function AppliedRunIdFilter() {
 
 function validateBatchId(value: string): string | undefined {
   if (!value.startsWith("batch_")) return "Batch IDs start with 'batch_'";
-  if (value.length !== 27 && value.length !== 31) return "Batch IDs are 27 or 31 characters long";
+  if (!isClassifiable(value)) return "That doesn't look like a valid batch ID";
 }
 
 function BatchIdDropdown(

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

@@ -2,6 +2,7 @@ import * as Ariakit from "@ariakit/react";
 import { FingerPrintIcon, TagIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { Form, useFetcher } from "@remix-run/react";
 import { WaitpointTokenStatus, waitpointTokenStatuses } from "@trigger.dev/core/v3";
+import { isClassifiable } from "@trigger.dev/core/v3/isomorphic";
 import { ListChecks } from "lucide-react";
 import { matchSorter } from "match-sorter";
 import { type ReactNode, useEffect, useMemo, useRef } from "react";
@@ -409,7 +410,7 @@ function WaitpointIdDropdown(
       paramKey="id"
       validate={(v) => {
         if (!v.startsWith("waitpoint_")) return "Waitpoint IDs start with 'waitpoint_'";
-        if (v.length !== 35) return "Waitpoint IDs are 35 characters long";
+        if (!isClassifiable(v)) return "That doesn't look like a valid waitpoint ID";
         return undefined;
       }}
     />