feat(webapp): dashboard parity for mollifier-buffered runs

Dashboard run detail, span detail, streams view, realtime
subscription, redirect routes, replay/cancel/idempotency-reset
action routes, the logs download route, and the cancel dialog all
handle buffered runs by falling back to the mollifier snapshot.

Stacked on the mutations PR.

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

Author: d-cs

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

@@ -1,6 +1,7 @@
 import { NoSymbolIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
+import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -10,14 +11,35 @@ import { SpinnerWhite } from "~/components/primitives/Spinner";
 type CancelRunDialogProps = {
   runFriendlyId: string;
   redirectPath: string;
+  // Optional: when provided, close the dialog as soon as the cancel
+  // action transitions to "loading" (the redirect is in flight). Lets
+  // the caller control the open state without interfering with the
+  // form's submit name=value pair the way `<DialogClose asChild>`
+  // around the submit button does.
+  onCancelSubmitted?: () => void;
 };
 
-export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialogProps) {
+export function CancelRunDialog({
+  runFriendlyId,
+  redirectPath,
+  onCancelSubmitted,
+}: CancelRunDialogProps) {
   const navigation = useNavigation();
 
   const formAction = `/resources/taskruns/${runFriendlyId}/cancel`;
   const isLoading = navigation.formAction === formAction;
 
+  const wasSubmitting = useRef(false);
+  useEffect(() => {
+    if (!onCancelSubmitted) return;
+    if (navigation.state === "submitting" && navigation.formAction === formAction) {
+      wasSubmitting.current = true;
+    } else if (wasSubmitting.current && navigation.state !== "submitting") {
+      wasSubmitting.current = false;
+      onCancelSubmitted();
+    }
+  }, [navigation.state, navigation.formAction, formAction, onCancelSubmitted]);
+
   return (
     <DialogContent key="cancel">
       <DialogHeader>Cancel this run?</DialogHeader>

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

@@ -3,6 +3,8 @@ import { logger } from "~/services/logger.server";
 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 { tracePubSub } from "~/v3/services/tracePubSub.server";
 
 const PING_INTERVAL = 5_000;
@@ -37,17 +39,45 @@ export class RunStreamPresenter {
           },
         });
 
-        if (!run) {
+        // Fall back to the mollifier buffer when the run isn't in PG yet.
+        // The buffered run has no execution events to stream, but we still
+        // attach a trace-pubsub subscription using the snapshot's traceId
+        // so that the moment the drainer materialises the row and execution
+        // begins, those events flow to this open SSE connection. Closing
+        // with 404 would force the dashboard to keep retrying.
+        let traceId: string | null = run?.traceId ?? null;
+        if (!traceId) {
+          const buffer = getMollifierBuffer();
+          if (buffer) {
+            try {
+              const entry = await buffer.getEntry(runFriendlyId);
+              if (entry) {
+                const snapshot = deserialiseSnapshot<{ traceId?: string }>(entry.payload);
+                if (typeof snapshot.traceId === "string") {
+                  traceId = snapshot.traceId;
+                }
+              }
+            } catch (err) {
+              logger.warn("RunStreamPresenter buffer fallback failed", {
+                runFriendlyId,
+                err: err instanceof Error ? err.message : String(err),
+              });
+            }
+          }
+        }
+
+        if (!traceId) {
           throw new Response("Not found", { status: 404 });
         }
+        const resolvedRun = { traceId };
 
         logger.info("RunStreamPresenter.start", {
           runFriendlyId,
-          traceId: run.traceId,
+          traceId: resolvedRun.traceId,
         });
 
         // Subscribe to trace updates
-        const { unsubscribe, eventEmitter } = await tracePubSub.subscribeToTrace(run.traceId);
+        const { unsubscribe, eventEmitter } = await tracePubSub.subscribeToTrace(resolvedRun.traceId);
 
         // Only send max every 1 second
         const throttledSend = throttle(
@@ -105,7 +135,7 @@ export class RunStreamPresenter {
           cleanup: () => {
             logger.info("RunStreamPresenter.cleanup", {
               runFriendlyId,
-              traceId: run.traceId,
+              traceId: resolvedRun.traceId,
             });
 
             // Remove message listener
@@ -119,13 +149,13 @@ export class RunStreamPresenter {
               .then(() => {
                 logger.info("RunStreamPresenter.cleanup.unsubscribe succeeded", {
                   runFriendlyId,
-                  traceId: run.traceId,
+                  traceId: resolvedRun.traceId,
                 });
               })
               .catch((error) => {
                 logger.error("RunStreamPresenter.cleanup.unsubscribe failed", {
                   runFriendlyId,
-                  traceId: run.traceId,
+                  traceId: resolvedRun.traceId,
                   error: {
                     name: error.name,
                     message: error.message,

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

@@ -4,6 +4,7 @@ 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 { findBufferedRunRedirectInfo } from "~/v3/mollifier/syntheticRedirectInfo.server";
 
 const ParamsSchema = z.object({
   runParam: z.string(),
@@ -51,6 +52,26 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   });
 
   if (!run) {
+    // Admin impersonation route — bypass org membership so admins can
+    // open any buffered run by friendlyId, mirroring the existing PG
+    // behaviour above (no membership filter on the find).
+    const buffered = await findBufferedRunRedirectInfo({
+      runFriendlyId: runParam,
+      userId: user.id,
+      skipOrgMembershipCheck: true,
+    });
+    if (buffered) {
+      return redirect(
+        impersonate(
+          v3RunPath(
+            { slug: buffered.organizationSlug },
+            { slug: buffered.projectSlug },
+            { slug: buffered.environmentSlug },
+            { friendlyId: runParam }
+          )
+        )
+      );
+    }
     return redirectWithErrorMessage(rootPath(), request, "Run doesn't exist", {
       ephemeral: false,
     });

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

@@ -88,10 +88,13 @@ import { useReplaceSearchParams } from "~/hooks/useReplaceSearchParams";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { type Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useHasAdminAccess } from "~/hooks/useUser";
+import { env } from "~/env.server";
 import { findProjectBySlug } from "~/models/project.server";
 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 { buildSyntheticTraceForBufferedRun } from "~/v3/mollifier/syntheticTrace.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { logger } from "~/services/logger.server";
@@ -277,6 +280,31 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       );
     }
 
+    // PG miss → try the mollifier buffer. When the gate diverts a trigger
+    // the run sits in Redis until the drainer materialises it; without
+    // this fallback the run-detail page 404s for the brief buffered window
+    // even though the API has accepted the trigger and returned an id.
+    const buffered = await tryMollifiedRunFallback({
+      runFriendlyId: runParam,
+      organizationSlug,
+      projectSlug: projectParam,
+      envSlug: envParam,
+      userId,
+    });
+
+    if (buffered) {
+      const parent = await getResizableSnapshot(request, resizableSettings.parent.autosaveId);
+      const tree = await getResizableSnapshot(request, resizableSettings.tree.autosaveId);
+
+      return json({
+        run: buffered.run,
+        trace: buffered.trace,
+        maximumLiveReloadingSetting: env.MAXIMUM_LIVE_RELOADING_EVENTS,
+        resizable: { parent, tree },
+        runsList: null,
+      });
+    }
+
     throw error;
   }
 
@@ -305,6 +333,52 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
+async function tryMollifiedRunFallback(args: {
+  runFriendlyId: string;
+  organizationSlug: string;
+  projectSlug: string;
+  envSlug: string;
+  userId: string;
+}) {
+  const project = await findProjectBySlug(args.organizationSlug, args.projectSlug, args.userId);
+  if (!project) return null;
+  const environment = await findEnvironmentBySlug(project.id, args.envSlug, args.userId);
+  if (!environment) return null;
+
+  const buffered = await findRunByIdWithMollifierFallback({
+    runId: args.runFriendlyId,
+    environmentId: environment.id,
+    organizationId: project.organizationId,
+  });
+  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,
+      environment: {
+        id: environment.id,
+        organizationId: project.organizationId,
+        type: environment.type,
+        slug: environment.slug,
+        userId: undefined,
+        userName: undefined,
+      },
+    },
+    trace: buildSyntheticTraceForBufferedRun(buffered),
+  };
+}
+
 type LoaderData = SerializeFrom<typeof loader>;
 
 export default function Page() {
@@ -407,23 +481,17 @@ export default function Page() {
             />
           </Dialog>
           {run.isFinished ? null : (
-            <Dialog key={`cancel-${run.friendlyId}`}>
-              <DialogTrigger asChild>
-                <Button variant="danger/small" LeadingIcon={StopCircleIcon} shortcut={{ key: "C" }}>
-                  Cancel run…
-                </Button>
-              </DialogTrigger>
-              <CancelRunDialog
-                runFriendlyId={run.friendlyId}
-                redirectPath={v3RunSpanPath(
-                  organization,
-                  project,
-                  environment,
-                  { friendlyId: run.friendlyId },
-                  { spanId: run.spanId }
-                )}
-              />
-            </Dialog>
+            <ControlledCancelRunDialog
+              key={`cancel-${run.friendlyId}`}
+              runFriendlyId={run.friendlyId}
+              redirectPath={v3RunSpanPath(
+                organization,
+                project,
+                environment,
+                { friendlyId: run.friendlyId },
+                { spanId: run.spanId }
+              )}
+            />
           )}
         </PageAccessories>
       </NavBar>
@@ -587,6 +655,35 @@ function TraceView({
   );
 }
 
+// Controlled wrapper around the cancel dialog. Owns the Radix open state
+// so the dialog closes itself once the cancel action transitions through
+// submission. We can't `<DialogClose asChild>`-wrap the submit button
+// because Radix's onClick handler swallows the button's name=value pair
+// that the form action depends on for `redirectUrl`.
+function ControlledCancelRunDialog({
+  runFriendlyId,
+  redirectPath,
+}: {
+  runFriendlyId: string;
+  redirectPath: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="danger/small" LeadingIcon={StopCircleIcon} shortcut={{ key: "C" }}>
+          Cancel run…
+        </Button>
+      </DialogTrigger>
+      <CancelRunDialog
+        runFriendlyId={runFriendlyId}
+        redirectPath={redirectPath}
+        onCancelSubmitted={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+}
+
 function NoLogsView({ run, resizable }: Pick<LoaderData, "run" | "resizable">) {
   const plan = useCurrentPlan();
   const organization = useOrganization();
@@ -616,9 +713,13 @@ function NoLogsView({ run, resizable }: Pick<LoaderData, "run" | "resizable">) {
         >
           <div className="grid h-full place-items-center">
             {daysSinceCompleted === undefined ? (
-              <InfoPanel variant="info" icon={InformationCircleIcon} title="We delete old logs">
+              <InfoPanel
+                variant="info"
+                icon={InformationCircleIcon}
+                title="Waiting to start"
+              >
                 <Paragraph variant="small">
-                  We tidy up older logs to keep things running smoothly.
+                  This run is queued. Logs will appear here once it begins executing.
                 </Paragraph>
               </InfoPanel>
             ) : isWithinLogRetention ? (

apps/webapp/app/routes/projects.v3.$projectRef.runs.$runParam.ts

@@ -2,7 +2,8 @@ import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { prisma } from "~/db.server";
 import { requireUserId } from "~/services/session.server";
-import { v3RunSpanPath } from "~/utils/pathBuilder";
+import { v3RunPath, v3RunSpanPath } from "~/utils/pathBuilder";
+import { findBufferedRunRedirectInfo } from "~/v3/mollifier/syntheticRedirectInfo.server";
 
 const ParamsSchema = z.object({
   projectRef: z.string(),
@@ -44,6 +45,28 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   });
 
   if (!run) {
+    // Fall back to the mollifier buffer so a /projects/v3/{ref}/runs/{id}
+    // share link works during the buffered window.
+    const buffered = await findBufferedRunRedirectInfo({
+      runFriendlyId: validatedParams.runParam,
+      userId,
+    });
+    if (buffered) {
+      const url = new URL(request.url);
+      const searchParams = url.searchParams;
+      if (!searchParams.has("span") && buffered.spanId) {
+        searchParams.set("span", buffered.spanId);
+      }
+      return redirect(
+        v3RunPath(
+          { slug: buffered.organizationSlug },
+          { slug: buffered.projectSlug },
+          { slug: buffered.environmentSlug },
+          { friendlyId: validatedParams.runParam },
+          searchParams
+        )
+      );
+    }
     throw new Response("Not found", { status: 404 });
   }