feat(webapp): progressive loading and live tail for child run pages

Child run pages now read only the child's part of the trace, and load progressively with a live tail when progressive trace loading is enabled.

Mono-RevId: b4ad15459382223eeec11b5445b0454e5fc5c865

Author: Mariefay

.server-changes/progressive-run-trace-loading.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Large run traces now load in chunks and update live without reloading the page, on child run pages as well as root runs.

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

@@ -1,7 +1,6 @@
 import { millisecondsToNanoseconds, RunAnnotations } from "@trigger.dev/core/v3";
 import { prisma, type PrismaClient } from "~/db.server";
 import { logger } from "~/services/logger.server";
-import { stripAdminOnlyEventRows } from "~/utils/timelineSpanEvents";
 import { getUsername } from "~/utils/username";
 import type { SpanSummary } from "~/v3/eventRepository/eventRepository.types";
 import { getTaskEventStoreTableForRun } from "~/v3/taskEventStore.server";
@@ -10,8 +9,8 @@ import { env } from "~/env.server";
 import { FEATURE_FLAG } from "~/v3/featureFlags";
 import { makeFlag } from "~/v3/featureFlags.server";
 import { getEventRepositoryForStore } from "~/v3/eventRepository/index.server";
-import { canLiveTail, hasWriteTimes } from "./liveTailGate";
-import { TraceChunkAssembler } from "~/v3/eventRepository/traceChunkAssembler";
+import { canLiveTail } from "./liveTailGate";
+import { assembleFirstTraceChunk, type TraceReadScope } from "./traceFirstChunk.server";
 import { applyAncestorOverrides, buildTraceView } from "~/v3/eventRepository/traceViewBuilder";
 import { runStore } from "~/v3/runStore.server";
 import { controlPlaneResolver } from "~/v3/runOpsMigration/controlPlaneResolver.server";
@@ -104,14 +103,12 @@ export class RunPresenter {
             select: {
               friendlyId: true,
               spanId: true,
-              createdAt: true,
             },
           },
           parentTaskRun: {
             select: {
               friendlyId: true,
               spanId: true,
-              createdAt: true,
             },
           },
           runtimeEnvironmentId: true,
@@ -194,8 +191,9 @@ export class RunPresenter {
       environment.organizationId
     );
 
+    // A child view only reads its own lifetime, not the root's.
     const traceTimeBounds = {
-      startCreatedAt: run.rootTaskRun?.createdAt ?? run.createdAt,
+      startCreatedAt: run.createdAt,
       endCreatedAt: run.completedAt ?? undefined,
     };
 
@@ -207,8 +205,6 @@ export class RunPresenter {
       ? millisecondsToNanoseconds(run.startedAt.getTime() - triggeredAt.getTime())
       : undefined;
 
-    const isRootRunView = !run.rootTaskRun || run.rootTaskRun.spanId === run.spanId;
-
     const orgFeatureFlags =
       (authorizedProject.organization?.featureFlags as Record<string, unknown>) ?? {};
 
@@ -222,9 +218,7 @@ export class RunPresenter {
     });
 
     const firstChunkPromise = progressivePromise.then((progressiveEnabled) =>
-      isRootRunView &&
-      progressiveEnabled &&
-      canLiveTail(run.taskEventStore, env.TRACE_VIEW_EMERGENCY_SPAN_CAP)
+      progressiveEnabled && canLiveTail(run.taskEventStore, env.TRACE_VIEW_EMERGENCY_SPAN_CAP)
         ? repository.getTraceChunk(
             getTaskEventStoreTableForRun(run),
             environment.id,
@@ -252,98 +246,106 @@ export class RunPresenter {
       isAdmin: user?.admin ?? false,
     };
 
-    if (firstChunk && hasWriteTimes(firstChunk.events)) {
-      const firstEvents = stripAdminOnlyEventRows(firstChunk.events, buildOptions.isAdmin);
+    const traceScope: TraceReadScope = {
+      storeTable: getTaskEventStoreTableForRun(run),
+      environmentId: environment.id,
+      traceId: run.traceId,
+      startCreatedAt: traceTimeBounds.startCreatedAt,
+      endCreatedAt: traceTimeBounds.endCreatedAt,
+    };
 
-      const assembler = new TraceChunkAssembler();
-      assembler.mergeChunk(firstEvents);
+    const first = firstChunk
+      ? await assembleFirstTraceChunk({
+          repository,
+          scope: traceScope,
+          firstChunk,
+          anchorSpanId: run.spanId,
+          selectedSpanId,
+          showDebug,
+          isAdmin: buildOptions.isAdmin,
+        })
+      : undefined;
 
-      if (assembler.hasSpan(run.spanId)) {
-        let supplementaryFirstEvents: typeof firstChunk.events | undefined;
+    if (first?.kind === "progressive") {
+      const { spans, overridesBySpanId } = applyAncestorOverrides(first.assembler.spans);
+      const view = buildTraceView(spans, buildOptions);
 
-        if (selectedSpanId && selectedSpanId !== run.spanId && !assembler.hasSpan(selectedSpanId)) {
-          const selectedEvents = await repository.getTraceSpanWithAncestors(
-            getTaskEventStoreTableForRun(run),
-            environment.id,
-            run.traceId,
-            traceTimeBounds.startCreatedAt,
-            traceTimeBounds.endCreatedAt,
-            selectedSpanId,
-            { includeDebugLogs: showDebug }
-          );
-          if (selectedEvents && selectedEvents.length > 0) {
-            const visibleSelected = stripAdminOnlyEventRows(selectedEvents, buildOptions.isAdmin);
-            assembler.mergeChunk(visibleSelected, { source: "deeplink" });
-            supplementaryFirstEvents = visibleSelected;
-          }
-        }
-
-        const { spans, overridesBySpanId } = applyAncestorOverrides(assembler.spans);
-        const view = buildTraceView(spans, buildOptions);
-
-        return {
-          run: runData,
-          trace: {
-            events: view.events,
-            duration: view.duration,
-            rootStartedAt: view.rootStartedAt,
-            rootSpanStatus: view.rootSpanStatus,
-            startedAt: run.startedAt,
-            queuedDuration,
-            overridesBySpanId,
-            linkedRunIdBySpanId: view.linkedRunIdBySpanId,
-            isTruncated: false,
-            missingAnchor: false,
-            progressive: {
-              firstEvents,
-              supplementaryFirstEvents,
-              nextCursor: firstChunk.nextCursor,
-              hasMore: firstChunk.hasMore,
-              buildOptions,
-              showDebug,
-              maxSpans: repository.maximumTraceViewCount,
-              liveTailEnabled: true,
-              firstChunkReadAt,
-            },
+      return {
+        run: runData,
+        trace: {
+          events: view.events,
+          duration: view.duration,
+          rootStartedAt: view.rootStartedAt,
+          rootSpanStatus: view.rootSpanStatus,
+          startedAt: run.startedAt,
+          queuedDuration,
+          overridesBySpanId,
+          linkedRunIdBySpanId: view.linkedRunIdBySpanId,
+          isTruncated: false,
+          missingAnchor: false,
+          progressive: {
+            firstEvents: first.firstEvents,
+            supplementaryFirstEvents: first.supplementaryFirstEvents,
+            nextCursor: first.nextCursor,
+            hasMore: first.hasMore,
+            buildOptions,
+            showDebug,
+            maxSpans: repository.maximumTraceViewCount,
+            liveTailEnabled: true,
+            firstChunkReadAt,
           },
-          maximumLiveReloadingSetting: repository.maximumLiveReloadingSetting,
-        };
-      }
+        },
+        maximumLiveReloadingSetting: repository.maximumLiveReloadingSetting,
+      };
     }
 
-    // Fast path: full trace summary. Slow path: subtree fetch when the anchor
-    // span fell past the row cap (large traces ordered by start_time ASC).
-    let traceSummary = await repository.getTraceSummary(
-      getTaskEventStoreTableForRun(run),
-      environment.id,
-      run.traceId,
-      traceTimeBounds.startCreatedAt,
-      traceTimeBounds.endCreatedAt,
-      { includeDebugLogs: showDebug }
-    );
-
-    let isTruncated = traceSummary?.isTruncated ?? false;
-    const hasAnchorSpan = traceSummary?.spans.some((span) => span.id === run.spanId) ?? false;
+    // An empty first chunk, or an anchor the span-id lookup didn't find, means the
+    // summary and subtree reads would search the same window for nothing.
+    const anchorMissing = first?.kind === "fallback" && first.reason === "anchorMissing";
+    const skipSummary = first?.kind === "empty" || anchorMissing;
 
-    if (traceSummary && !hasAnchorSpan) {
-      logger.warn("Trace summary missing anchor span, falling back to subtree fetch", {
+    if (anchorMissing) {
+      logger.warn("Trace first chunk missing anchor span", {
         runId: run.friendlyId,
         spanId: run.spanId,
         traceId: run.traceId,
-        spanCount: traceSummary.spans.length,
       });
+    }
+
+    // Fast path: summary rooted at the viewed run. Slow path: subtree fetch when the
+    // anchor fell past the row cap (large traces ordered by start_time ASC).
+    let traceSummary = skipSummary
+      ? undefined
+      : await repository.getTraceSummary(
+          getTaskEventStoreTableForRun(run),
+          environment.id,
+          run.traceId,
+          traceTimeBounds.startCreatedAt,
+          traceTimeBounds.endCreatedAt,
+          { includeDebugLogs: showDebug, anchorSpanId: run.spanId }
+        );
+
+    let isTruncated = traceSummary?.isTruncated ?? false;
 
+    if (!traceSummary && !skipSummary) {
       const subtreeSummary = await repository.getTraceSubtreeSummary(
         getTaskEventStoreTableForRun(run),
         environment.id,
         run.traceId,
         run.spanId,
         traceTimeBounds.startCreatedAt,
         traceTimeBounds.endCreatedAt,
-        { includeDebugLogs: showDebug }
+        // The anchor is the viewed run: a root has no ancestors, a child doesn't need them.
+        { includeDebugLogs: showDebug, includeAncestors: false }
       );
 
       if (subtreeSummary) {
+        // Only an anchor past the row cap lands here; an empty trace finds nothing.
+        logger.warn("Trace summary missing anchor span, used subtree fetch", {
+          runId: run.friendlyId,
+          spanId: run.spanId,
+          traceId: run.traceId,
+        });
         traceSummary = subtreeSummary;
         isTruncated = subtreeSummary.isTruncated ?? false;
       }

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

@@ -50,11 +50,6 @@ export class TraceChunkPresenter {
           completedAt: true,
           logsDeletedAt: true,
           runtimeEnvironmentId: true,
-          rootTaskRun: {
-            select: {
-              createdAt: true,
-            },
-          },
         },
       }
     );
@@ -94,7 +89,8 @@ export class TraceChunkPresenter {
     );
 
     const storeTable = getTaskEventStoreTableForRun(run);
-    const startCreatedAt = run.rootTaskRun?.createdAt ?? run.createdAt;
+    // A child view only reads its own lifetime, not the root's.
+    const startCreatedAt = run.createdAt;
     const endCreatedAt = run.completedAt ?? undefined;
 
     if (filter === "errors") {

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

@@ -0,0 +1,111 @@
+import { stripAdminOnlyEventRows } from "~/utils/timelineSpanEvents";
+import type {
+  IEventRepository,
+  TraceChunk,
+  TraceChunkCursor,
+  TraceChunkEvent,
+} from "~/v3/eventRepository/eventRepository.types";
+import { TraceChunkAssembler } from "~/v3/eventRepository/traceChunkAssembler";
+import type { TaskEventStoreTable } from "~/v3/taskEventStore.server";
+import { hasWriteTimes } from "./liveTailGate";
+
+export type TraceReadScope = {
+  storeTable: TaskEventStoreTable;
+  environmentId: string;
+  traceId: string;
+  startCreatedAt: Date;
+  endCreatedAt: Date | undefined;
+};
+
+export type FirstTraceChunk =
+  | {
+      kind: "progressive";
+      assembler: TraceChunkAssembler;
+      firstEvents: TraceChunkEvent[];
+      supplementaryFirstEvents: TraceChunkEvent[] | undefined;
+      nextCursor: TraceChunkCursor | null;
+      hasMore: boolean;
+    }
+  | { kind: "empty" }
+  | { kind: "fallback"; reason: "noWriteTimes" | "anchorMissing" };
+
+export async function assembleFirstTraceChunk({
+  repository,
+  scope,
+  firstChunk,
+  anchorSpanId,
+  selectedSpanId,
+  showDebug,
+  isAdmin,
+}: {
+  repository: Pick<IEventRepository, "getTraceSpanWithAncestors">;
+  scope: TraceReadScope;
+  firstChunk: TraceChunk;
+  anchorSpanId: string;
+  selectedSpanId: string | undefined;
+  showDebug: boolean;
+  isAdmin: boolean;
+}): Promise<FirstTraceChunk> {
+  if (firstChunk.events.length === 0) {
+    return { kind: "empty" };
+  }
+
+  if (!hasWriteTimes(firstChunk.events)) {
+    return { kind: "fallback", reason: "noWriteTimes" };
+  }
+
+  const firstEvents = stripAdminOnlyEventRows(firstChunk.events, isAdmin);
+  const assembler = new TraceChunkAssembler();
+  assembler.mergeChunk(firstEvents);
+
+  // Each walk returns every row of each span it visits, and both walks can visit the
+  // same ancestors, so take a span's rows from the first walk that returns it.
+  const supplementary: TraceChunkEvent[] = [];
+  const supplementarySpanIds = new Set<string>();
+  const hasSpan = (spanId: string) => assembler.hasSpan(spanId) || supplementarySpanIds.has(spanId);
+
+  const fetchMissingSpan = async (spanId: string) => {
+    const events = await repository.getTraceSpanWithAncestors(
+      scope.storeTable,
+      scope.environmentId,
+      scope.traceId,
+      scope.startCreatedAt,
+      scope.endCreatedAt,
+      spanId,
+      { includeDebugLogs: showDebug }
+    );
+    const visible = stripAdminOnlyEventRows(events ?? [], isAdmin).filter(
+      (event) => !supplementarySpanIds.has(event.spanId)
+    );
+    supplementary.push(...visible);
+    for (const event of visible) {
+      supplementarySpanIds.add(event.spanId);
+    }
+  };
+
+  // The selected span's walk usually reaches the viewed run's span too, so look it up
+  // first. Earlier siblings can fill the first chunk before either span.
+  if (selectedSpanId && selectedSpanId !== anchorSpanId && !hasSpan(selectedSpanId)) {
+    await fetchMissingSpan(selectedSpanId);
+  }
+  if (!hasSpan(anchorSpanId)) {
+    await fetchMissingSpan(anchorSpanId);
+  }
+
+  if (supplementary.length > 0) {
+    assembler.mergeChunk(supplementary, { source: "deeplink" });
+  }
+
+  if (!assembler.hasSpan(anchorSpanId)) {
+    return { kind: "fallback", reason: "anchorMissing" };
+  }
+
+  return {
+    kind: "progressive",
+    assembler,
+    firstEvents,
+    supplementaryFirstEvents: supplementary.length > 0 ? supplementary : undefined,
+    nextCursor: firstChunk.nextCursor,
+    hasMore: firstChunk.hasMore,
+  };
+}