fix(webapp): dismiss cancel dialog on submit; reflect cancelled state in synthetic SpanRun

The cancel dialog stayed open after a successful submit because it was
uncontrolled Radix state and the action redirects to the same URL —
revalidation didn't trigger a re-mount. Wrap the submit button in
DialogClose so the click closes the dialog at the same time the form
posts.

The SyntheticRun synthesised for the run-detail page hardcoded status
PENDING regardless of whether the buffer snapshot had cancelledAt set.
Customers cancelling a buffered run saw their run still labelled Queued
until the drainer materialised it. Surface cancelledAt + cancelReason
on SyntheticRun, switch the synthesised SpanRun status to CANCELED, and
mirror the cancelled flag onto the single-span trace so the timeline
matches PG behaviour.

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

Author: d-cs

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

@@ -28,17 +28,19 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog
         <FormButtons
           confirmButton={
             <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
-              <Button
-                type="submit"
-                name="redirectUrl"
-                value={redirectPath}
-                variant="danger/medium"
-                LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
-                disabled={isLoading}
-                shortcut={{ modifiers: ["mod"], key: "enter" }}
-              >
-                {isLoading ? "Canceling..." : "Cancel run"}
-              </Button>
+              <DialogClose asChild>
+                <Button
+                  type="submit"
+                  name="redirectUrl"
+                  value={redirectPath}
+                  variant="danger/medium"
+                  LeadingIcon={isLoading ? SpinnerWhite : NoSymbolIcon}
+                  disabled={isLoading}
+                  shortcut={{ modifiers: ["mod"], key: "enter" }}
+                >
+                  {isLoading ? "Canceling..." : "Cancel run"}
+                </Button>
+              </DialogClose>
             </Form>
           }
           cancelButton={

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

@@ -16,7 +16,15 @@ export type SyntheticRun = {
   // expected (cast). Derived deterministically from `friendlyId`.
   id: string;
   friendlyId: string;
-  status: "QUEUED" | "FAILED";
+  status: "QUEUED" | "FAILED" | "CANCELED";
+  // Set when the customer cancelled the run via the dashboard or API
+  // while it was buffered. The drainer's cancel bifurcation reads this
+  // on next pop and writes a CANCELED PG row directly (skipping
+  // materialisation). Reflected back into the UI by the synthesised
+  // SpanRun so the run-detail page shows the cancelled state even before
+  // the drainer materialises it.
+  cancelledAt: Date | undefined;
+  cancelReason: string | undefined;
   taskIdentifier: string | undefined;
   createdAt: Date;
 
@@ -122,10 +130,21 @@ export async function findRunByIdWithMollifierFallback(
         ? (snapshot.environment as Record<string, unknown>)
         : undefined;
 
+    const cancelledAtRaw = asString(snapshot.cancelledAt);
+    const cancelledAt = cancelledAtRaw ? new Date(cancelledAtRaw) : undefined;
+    const cancelReason = asString(snapshot.cancelReason);
+    const status: SyntheticRun["status"] = cancelledAt
+      ? "CANCELED"
+      : entry.status === "FAILED"
+      ? "FAILED"
+      : "QUEUED";
+
     return {
       id: RunId.fromFriendlyId(entry.runId),
       friendlyId: entry.runId,
-      status: entry.status === "FAILED" ? "FAILED" : "QUEUED",
+      status,
+      cancelledAt,
+      cancelReason,
       taskIdentifier: asString(snapshot.taskIdentifier),
       createdAt: entry.createdAt,
 

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

@@ -52,18 +52,19 @@ export async function buildSyntheticSpanRun(args: {
   const isAgentRun = taskKind === "AGENT";
 
   const queueName = run.queue ?? "task/";
+  const isCancelled = run.status === "CANCELED";
   return {
     id: run.id,
     friendlyId: run.friendlyId,
-    status: "PENDING",
-    statusReason: undefined,
+    status: isCancelled ? "CANCELED" : "PENDING",
+    statusReason: isCancelled ? run.cancelReason ?? undefined : undefined,
     createdAt: run.createdAt,
     startedAt: null,
     executedAt: null,
-    updatedAt: run.createdAt,
+    updatedAt: run.cancelledAt ?? run.createdAt,
     delayUntil: null,
     expiredAt: null,
-    completedAt: null,
+    completedAt: run.cancelledAt ?? null,
     logsDeletedAt: null,
     ttl: run.ttl ?? null,
     taskIdentifier: run.taskIdentifier ?? "",

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

@@ -12,6 +12,7 @@ import type { SyntheticRun } from "./readFallback.server";
 // emitted any events yet.
 export function buildSyntheticTraceForBufferedRun(run: SyntheticRun) {
   const spanId = run.spanId ?? "";
+  const isCancelled = run.status === "CANCELED";
   const span: SpanSummary = {
     id: spanId,
     parentId: run.parentSpanId,
@@ -23,8 +24,8 @@ export function buildSyntheticTraceForBufferedRun(run: SyntheticRun) {
       startTime: run.createdAt,
       duration: 0,
       isError: false,
-      isPartial: true,
-      isCancelled: false,
+      isPartial: !isCancelled,
+      isCancelled,
       isDebug: false,
       level: "TRACE",
     },
@@ -53,7 +54,7 @@ export function buildSyntheticTraceForBufferedRun(run: SyntheticRun) {
     : [];
 
   return {
-    rootSpanStatus: "executing" as const,
+    rootSpanStatus: (isCancelled ? "completed" : "executing") as "executing" | "completed" | "failed",
     events,
     duration: totalDuration,
     rootStartedAt: tree?.data.startTime,