feat(webapp): add helpers for runs list live reload

Extract mapRunToLiveFields for patching list rows from poll responses.
Add loadProjectEnvironmentFromRequest for runs/* resource loaders.
Extend useInterval with pauseWhenHidden for background tabs.

Author: Ekaterina Bulatova

apps/webapp/app/hooks/useInterval.ts

@@ -6,6 +6,8 @@ type UseIntervalOptions = {
   onLoad?: boolean;
   onFocus?: boolean;
   disabled?: boolean;
+  /** Skip interval ticks while the document tab is hidden */
+  pauseWhenHidden?: boolean;
   callback: () => void;
 };
 
@@ -14,6 +16,7 @@ export function useInterval({
   onLoad = true,
   onFocus = true,
   disabled = false,
+  pauseWhenHidden = false,
   callback,
 }: UseIntervalOptions) {
   // Always keep the latest callback in a ref so the effects below
@@ -28,11 +31,14 @@ export function useInterval({
     if (!interval || interval <= 0 || disabled) return;
 
     const intervalId = setInterval(() => {
+      if (pauseWhenHidden && document.visibilityState !== "visible") {
+        return;
+      }
       latestCallback.current();
     }, interval);
 
     return () => clearInterval(intervalId);
-  }, [interval, disabled]);
+  }, [interval, disabled, pauseWhenHidden]);
 
   // On focus
   useEffect(() => {

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

@@ -0,0 +1,33 @@
+import { type TaskRunStatus } from "@trigger.dev/database";
+import { isCancellableRunStatus, isFinalRunStatus, isPendingRunStatus } from "~/v3/taskStatus";
+
+type LiveRunRow = {
+  friendlyId: string;
+  status: TaskRunStatus;
+  updatedAt: Date;
+  startedAt: Date | null;
+  lockedAt: Date | null;
+  completedAt: Date | null;
+  usageDurationMs: bigint | number;
+  costInCents: number;
+  baseCostInCents: number;
+};
+
+export function mapRunToLiveFields(run: LiveRunRow) {
+  const hasFinished = isFinalRunStatus(run.status);
+  const startedAt = run.startedAt ?? run.lockedAt;
+
+  return {
+    friendlyId: run.friendlyId,
+    status: run.status,
+    updatedAt: run.updatedAt.toISOString(),
+    startedAt: startedAt?.toISOString(),
+    finishedAt: hasFinished ? run.completedAt?.toISOString() ?? run.updatedAt.toISOString() : undefined,
+    hasFinished,
+    isCancellable: isCancellableRunStatus(run.status),
+    isPending: isPendingRunStatus(run.status),
+    usageDurationMs: Number(run.usageDurationMs),
+    costInCents: run.costInCents,
+    baseCostInCents: run.baseCostInCents,
+  };
+}

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

@@ -0,0 +1,25 @@
+import { type Params } from "@remix-run/react";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+
+export async function loadProjectEnvironmentFromRequest(
+  request: Request,
+  params: Params<string>
+) {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response(undefined, { status: 404, statusText: "Project not found" });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response(undefined, { status: 404, statusText: "Environment not found" });
+  }
+
+  return { userId, project, environment };
+}