fix(webapp): review fixes for mollifier dashboard parity

Address review findings on PR #3757:

- replay: guard `synthetic.traceId` / `spanId` before adapting a
  buffered snapshot into the TaskRun shape ReplayTaskRunService expects.
  Without the guard, an older snapshot missing those fields produces
  `00-undefined-undefined-01` as the W3C traceparent, which OTel
  silently drops — severing the replayed run's trace linkage. Extract
  the adapter into `buildSyntheticReplayTaskRun` so the guard is unit
  tested.
- run-detail: reflect the buffered snapshot's CANCELED state into the
  NavBar status + Cancel-button gate. Previously `tryMollifiedRunFallback`
  hardcoded `status: PENDING` / `isFinished: false` regardless of
  `buffered.status` / `cancelledAt`, so cancelling a buffered run left
  the NavBar showing Pending with a Cancel button until the drainer
  materialised the row. Extract the mapping into `buildSyntheticRunHeader`
  and unit test PENDING vs CANCELED.
- admin runs redirect (@.runs.$runParam): preselect the root span on
  the buffered redirect via `v3RunSpanPath`, matching the sibling
  redirect routes. Without this the trace tree opened with nothing
  selected for buffered runs reached via the admin impersonate path.
- RunStreamPresenter: switch from `deserialiseSnapshot` (redis-worker)
  to the webapp wrapper `deserialiseMollifierSnapshot` so both read-side
  modules share one deserialisation path, per the contract comment in
  `syntheticRedirectInfo.server.ts`.
- cancel route: collapse the `mutateSnapshot` "not_found" branch into
  the same retry message as "busy". Both indicate the drainer raced the
  mutation between `getEntry` and `mutateSnapshot`; the run is in PG by
  then and a retry hits the regular cancel path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: d-cs

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

@@ -4,7 +4,7 @@ import { singleton } from "~/utils/singleton";
 import { ABORT_REASON_SEND_ERROR, createSSELoader, SendFunction } from "~/utils/sse";
 import { throttle } from "~/utils/throttle";
 import { getMollifierBuffer } from "~/v3/mollifier/mollifierBuffer.server";
-import { deserialiseSnapshot } from "@trigger.dev/redis-worker";
+import { deserialiseMollifierSnapshot } from "~/v3/mollifier/mollifierSnapshot.server";
 import { tracePubSub } from "~/v3/services/tracePubSub.server";
 
 const PING_INTERVAL = 5_000;
@@ -52,7 +52,10 @@ export class RunStreamPresenter {
             try {
               const entry = await buffer.getEntry(runFriendlyId);
               if (entry) {
-                const snapshot = deserialiseSnapshot<{ traceId?: string }>(entry.payload);
+                // Go through the webapp wrapper so this read-side module
+                // shares a single deserialisation path with readFallback —
+                // see the contract comment in syntheticRedirectInfo.server.ts.
+                const snapshot = deserialiseMollifierSnapshot(entry.payload);
                 if (typeof snapshot.traceId === "string") {
                   traceId = snapshot.traceId;
                 }

apps/webapp/app/routes/@.runs.$runParam.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { prisma } from "~/db.server";
 import { redirectWithErrorMessage } from "~/models/message.server";
 import { requireUser } from "~/services/session.server";
-import { impersonate, rootPath, v3RunPath } from "~/utils/pathBuilder";
+import { impersonate, rootPath, v3RunPath, v3RunSpanPath } from "~/utils/pathBuilder";
 import { findBufferedRunRedirectInfo } from "~/v3/mollifier/syntheticRedirectInfo.server";
 
 const ParamsSchema = z.object({
@@ -33,6 +33,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
       friendlyId: runParam,
     },
     select: {
+      spanId: true,
       runtimeEnvironment: {
         select: {
           slug: true,
@@ -61,27 +62,36 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
       skipOrgMembershipCheck: true,
     });
     if (buffered) {
-      return redirect(
-        impersonate(
-          v3RunPath(
+      // Preselect the root span so the run-detail trace tree opens with
+      // the buffered run's span highlighted, matching the sibling
+      // redirect routes (runs.$runParam.ts, projects.v3.$projectRef…).
+      const path = buffered.spanId
+        ? v3RunSpanPath(
             { slug: buffered.organizationSlug },
             { slug: buffered.projectSlug },
             { slug: buffered.environmentSlug },
-            { friendlyId: runParam }
+            { friendlyId: runParam },
+            { spanId: buffered.spanId }
           )
-        )
-      );
+        : v3RunPath(
+            { slug: buffered.organizationSlug },
+            { slug: buffered.projectSlug },
+            { slug: buffered.environmentSlug },
+            { friendlyId: runParam }
+          );
+      return redirect(impersonate(path));
     }
     return redirectWithErrorMessage(rootPath(), request, "Run doesn't exist", {
       ephemeral: false,
     });
   }
 
-  const path = v3RunPath(
+  const path = v3RunSpanPath(
     { slug: run.project.organization.slug },
     { slug: run.project.slug },
     { slug: run.runtimeEnvironment.slug },
-    { friendlyId: runParam }
+    { friendlyId: runParam },
+    { spanId: run.spanId }
   );
 
   return redirect(impersonate(path));

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -94,6 +94,7 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { NextRunListPresenter } from "~/presenters/v3/NextRunListPresenter.server";
 import { RunEnvironmentMismatchError, RunPresenter } from "~/presenters/v3/RunPresenter.server";
 import { findRunByIdWithMollifierFallback } from "~/v3/mollifier/readFallback.server";
+import { buildSyntheticRunHeader } from "~/v3/mollifier/syntheticRunHeader.server";
 import { buildSyntheticTraceForBufferedRun } from "~/v3/mollifier/syntheticTrace.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { getImpersonationId } from "~/services/impersonation.server";
@@ -353,28 +354,15 @@ async function tryMollifiedRunFallback(args: {
   if (!buffered) return null;
 
   return {
-    run: {
-      id: buffered.friendlyId,
-      number: 1,
-      friendlyId: buffered.friendlyId,
-      traceId: buffered.traceId ?? "",
-      spanId: buffered.spanId ?? "",
-      status: "PENDING" as const,
-      isFinished: false,
-      startedAt: null,
-      completedAt: null,
-      logsDeletedAt: null,
-      rootTaskRun: null,
-      parentTaskRun: null,
+    run: buildSyntheticRunHeader({
+      run: buffered,
       environment: {
         id: environment.id,
         organizationId: project.organizationId,
         type: environment.type,
         slug: environment.slug,
-        userId: undefined,
-        userName: undefined,
       },
-    },
+    }),
     trace: buildSyntheticTraceForBufferedRun(buffered),
   };
 }

apps/webapp/app/routes/resources.taskruns.$runParam.cancel.ts

@@ -82,12 +82,12 @@ export const action: ActionFunction = async ({ request, params }) => {
     if (result === "applied_to_snapshot") {
       return redirectWithSuccessMessage(submission.value.redirectUrl, request, `Canceled run`);
     }
-    if (result === "not_found") {
-      submission.error = { runParam: ["Run not found"] };
-      return json(submission);
-    }
-    // "busy" — drainer is materialising. Customer can retry; by then the
-    // PG row exists and the regular cancel path takes over.
+    // "not_found" or "busy" — both indicate the drainer raced us between
+    // the getEntry check above and mutateSnapshot. On "not_found" the
+    // entry was just popped and the PG row is in flight; on "busy" the
+    // drainer is mid-materialisation. Either way the customer should
+    // retry — by then the PG row exists and the regular cancel path at
+    // the top of this action takes over.
     return redirectWithErrorMessage(
       submission.value.redirectUrl,
       request,

apps/webapp/app/routes/resources.taskruns.$runParam.replay.ts

@@ -13,7 +13,10 @@ import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { ReplayTaskRunService } from "~/v3/services/replayTaskRun.server";
 import { getMollifierBuffer } from "~/v3/mollifier/mollifierBuffer.server";
 import { findRunByIdWithMollifierFallback } from "~/v3/mollifier/readFallback.server";
-import type { TaskRun } from "@trigger.dev/database";
+import {
+  buildSyntheticReplayTaskRun,
+  type SyntheticReplayTaskRun,
+} from "~/v3/mollifier/syntheticReplayTaskRun.server";
 import parseDuration from "parse-duration";
 import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
 import { queueTypeFromType } from "~/presenters/v3/QueueRetrievePresenter.server";
@@ -268,12 +271,7 @@ export const action: ActionFunction = async ({ request, params }) => {
     // SyntheticRun carries every field ReplayTaskRunService reads. We
     // also need projectSlug + orgSlug + envSlug for the redirect path,
     // so look those up via the snapshot's runtimeEnvironmentId.
-    let taskRun:
-      | (TaskRun & {
-          project: { slug: string; organization: { slug: string } };
-          runtimeEnvironment: { slug: string };
-        })
-      | null = pgRun ?? null;
+    let taskRun: SyntheticReplayTaskRun | null = pgRun ?? null;
     if (!taskRun) {
       const buffer = getMollifierBuffer();
       const entry = buffer ? await buffer.getEntry(runParam) : null;
@@ -292,11 +290,7 @@ export const action: ActionFunction = async ({ request, params }) => {
             },
           });
           if (envRow) {
-            taskRun = {
-              ...(synthetic as unknown as TaskRun),
-              project: { slug: envRow.project.slug, organization: { slug: envRow.project.organization.slug } },
-              runtimeEnvironment: { slug: envRow.slug },
-            };
+            taskRun = buildSyntheticReplayTaskRun({ synthetic, envRow });
           }
         }
       }

apps/webapp/app/v3/mollifier/syntheticReplayTaskRun.server.ts

@@ -0,0 +1,38 @@
+import type { TaskRun } from "@trigger.dev/database";
+import type { SyntheticRun } from "./readFallback.server";
+
+export type SyntheticReplayTaskRun = TaskRun & {
+  project: { slug: string; organization: { slug: string } };
+  runtimeEnvironment: { slug: string };
+};
+
+// Adapt a buffered-run snapshot into the TaskRun-shaped input that
+// `ReplayTaskRunService.call` expects. ReplayTaskRunService builds the
+// new run's traceparent as `00-${existingTaskRun.traceId}-${existingTaskRun.spanId}-01`
+// without guarding for undefined, so a synthetic with missing traceId
+// or spanId (older snapshots — both fields are documented optional on
+// `SyntheticRun`) would produce `00-undefined-undefined-01`, an invalid
+// W3C traceparent that OTel silently drops, severing the replay's trace
+// link to the original run.
+//
+// Returns null when those fields are missing — the caller surfaces this
+// as "Run not found" so the customer retries once the drainer has
+// materialised the PG row, where traceId/spanId are guaranteed present.
+export function buildSyntheticReplayTaskRun(args: {
+  synthetic: SyntheticRun;
+  envRow: {
+    slug: string;
+    project: { slug: string; organization: { slug: string } };
+  };
+}): SyntheticReplayTaskRun | null {
+  const { synthetic, envRow } = args;
+  if (!synthetic.traceId || !synthetic.spanId) return null;
+  return {
+    ...(synthetic as unknown as TaskRun),
+    project: {
+      slug: envRow.project.slug,
+      organization: { slug: envRow.project.organization.slug },
+    },
+    runtimeEnvironment: { slug: envRow.slug },
+  };
+}

apps/webapp/app/v3/mollifier/syntheticRunHeader.server.ts

@@ -0,0 +1,49 @@
+import type { SyntheticRun } from "./readFallback.server";
+
+// Synthesise the run-detail page's `run` header shape (the NavBar +
+// status badge + Cancel-button gate) from a buffered run snapshot. The
+// shape matches `RunPresenter.getRun`'s `runData` — keep this in sync
+// when fields are added there.
+//
+// CANCELED state is reflected back from `SyntheticRun.cancelledAt` /
+// `status` so that after a buffered-cancel the NavBar shows the run as
+// CANCELED + isFinished:true (which collapses the Cancel button) before
+// the drainer materialises the PG row. This mirrors what
+// `buildSyntheticSpanRun` does for the right-side details panel — the
+// SyntheticRun.cancelledAt contract comment in readFallback.server.ts
+// names this exact UI surface.
+export function buildSyntheticRunHeader(args: {
+  run: SyntheticRun;
+  environment: {
+    id: string;
+    organizationId: string;
+    type: "PRODUCTION" | "DEVELOPMENT" | "STAGING" | "PREVIEW";
+    slug: string;
+  };
+}) {
+  const { run, environment } = args;
+  const isCancelled = run.status === "CANCELED";
+
+  return {
+    id: run.friendlyId,
+    number: 1,
+    friendlyId: run.friendlyId,
+    traceId: run.traceId ?? "",
+    spanId: run.spanId ?? "",
+    status: isCancelled ? ("CANCELED" as const) : ("PENDING" as const),
+    isFinished: isCancelled,
+    startedAt: null,
+    completedAt: run.cancelledAt ?? null,
+    logsDeletedAt: null,
+    rootTaskRun: null,
+    parentTaskRun: null,
+    environment: {
+      id: environment.id,
+      organizationId: environment.organizationId,
+      type: environment.type,
+      slug: environment.slug,
+      userId: undefined,
+      userName: undefined,
+    },
+  };
+}

apps/webapp/test/mollifierSyntheticReplayTaskRun.test.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("~/db.server", () => ({ prisma: {}, $replica: {} }));
+
+import { buildSyntheticReplayTaskRun } from "~/v3/mollifier/syntheticReplayTaskRun.server";
+import type { SyntheticRun } from "~/v3/mollifier/readFallback.server";
+
+const NOW = new Date("2026-05-21T10:00:00Z");
+
+function makeSyntheticRun(overrides: Partial<SyntheticRun> = {}): SyntheticRun {
+  return {
+    id: "run_internal_1",
+    friendlyId: "run_friendly_1",
+    status: "QUEUED",
+    cancelledAt: undefined,
+    cancelReason: undefined,
+    delayUntil: undefined,
+    taskIdentifier: "hello-world",
+    createdAt: NOW,
+    payload: { message: "hi" },
+    payloadType: "application/json",
+    metadata: undefined,
+    metadataType: undefined,
+    seedMetadata: undefined,
+    seedMetadataType: undefined,
+    idempotencyKey: undefined,
+    idempotencyKeyOptions: undefined,
+    isTest: false,
+    depth: 0,
+    ttl: "10m",
+    tags: [],
+    runTags: [],
+    lockedToVersion: undefined,
+    resumeParentOnCompletion: false,
+    parentTaskRunId: undefined,
+    traceId: "trace_1",
+    spanId: "span_1",
+    parentSpanId: undefined,
+    runtimeEnvironmentId: "env_a",
+    engine: "V2",
+    workerQueue: "worker-queue-1",
+    queue: "task/hello-world",
+    concurrencyKey: undefined,
+    machinePreset: "small-1x",
+    realtimeStreamsVersion: "v1",
+    maxAttempts: 3,
+    maxDurationInSeconds: 3600,
+    replayedFromTaskRunFriendlyId: undefined,
+    annotations: undefined,
+    traceContext: undefined,
+    scheduleId: undefined,
+    batchId: undefined,
+    parentTaskRunFriendlyId: undefined,
+    rootTaskRunFriendlyId: undefined,
+    ...overrides,
+  };
+}
+
+const ENV_ROW = {
+  slug: "dev",
+  project: { slug: "hello-world", organization: { slug: "references" } },
+};
+
+describe("buildSyntheticReplayTaskRun", () => {
+  it("returns the adapted TaskRun shape when traceId and spanId are present", () => {
+    const taskRun = buildSyntheticReplayTaskRun({
+      synthetic: makeSyntheticRun(),
+      envRow: ENV_ROW,
+    });
+    expect(taskRun).not.toBeNull();
+    expect(taskRun!.traceId).toBe("trace_1");
+    expect(taskRun!.spanId).toBe("span_1");
+    expect(taskRun!.project.slug).toBe("hello-world");
+    expect(taskRun!.project.organization.slug).toBe("references");
+    expect(taskRun!.runtimeEnvironment.slug).toBe("dev");
+  });
+
+  it("returns null when the snapshot has no traceId", () => {
+    // ReplayTaskRunService builds `00-${traceId}-${spanId}-01` without
+    // guarding for undefined. Falling through with a missing traceId
+    // would emit `00-undefined-...-01`, an invalid W3C traceparent that
+    // OTel silently drops, breaking the replayed run's trace linkage to
+    // the original. The helper must refuse rather than degrade silently.
+    const taskRun = buildSyntheticReplayTaskRun({
+      synthetic: makeSyntheticRun({ traceId: undefined }),
+      envRow: ENV_ROW,
+    });
+    expect(taskRun).toBeNull();
+  });
+
+  it("returns null when the snapshot has no spanId", () => {
+    const taskRun = buildSyntheticReplayTaskRun({
+      synthetic: makeSyntheticRun({ spanId: undefined }),
+      envRow: ENV_ROW,
+    });
+    expect(taskRun).toBeNull();
+  });
+
+  it("returns null when both traceId and spanId are missing", () => {
+    const taskRun = buildSyntheticReplayTaskRun({
+      synthetic: makeSyntheticRun({ traceId: undefined, spanId: undefined }),
+      envRow: ENV_ROW,
+    });
+    expect(taskRun).toBeNull();
+  });
+});