feat: Cancel specific run from dashboard

packages/dashboard/src/components/run-cancel-action.tsx

@@ -0,0 +1,111 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { cancelWorkflowRunServerFn } from "@/lib/api";
+import { isRunCancelableStatus } from "@/lib/status";
+import type { WorkflowRunStatus } from "openworkflow/internal";
+import { useState } from "react";
+
+interface RunCancelActionProps {
+  runId: string;
+  status: WorkflowRunStatus;
+  onCanceled?: (() => Promise<void>) | (() => void);
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  return "Unable to cancel workflow run";
+}
+
+export function RunCancelAction({
+  runId,
+  status,
+  onCanceled,
+}: RunCancelActionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCanceling, setIsCanceling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!isRunCancelableStatus(status)) {
+    return null;
+  }
+
+  async function cancelRun() {
+    setIsCanceling(true);
+    setError(null);
+
+    try {
+      await cancelWorkflowRunServerFn({
+        data: {
+          workflowRunId: runId,
+        },
+      });
+      await onCanceled?.();
+      setIsOpen(false);
+    } catch (caughtError) {
+      setError(getErrorMessage(caughtError));
+    } finally {
+      setIsCanceling(false);
+    }
+  }
+
+  return (
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={(nextOpen) => {
+        setIsOpen(nextOpen);
+        if (!nextOpen) {
+          setError(null);
+        }
+      }}
+    >
+      <Button
+        type="button"
+        variant="destructive"
+        onClick={() => {
+          setIsOpen(true);
+        }}
+        disabled={isCanceling}
+      >
+        Cancel Run
+      </Button>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Cancel this run?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will stop any future progress for this workflow run.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {error && <p className="text-destructive text-xs">{error}</p>}
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isCanceling}>
+            Keep Running
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            onClick={() => {
+              void cancelRun();
+            }}
+            disabled={isCanceling}
+          >
+            {isCanceling ? "Canceling..." : "Cancel Run"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

packages/dashboard/src/lib/api.ts

@@ -69,6 +69,16 @@ export const getWorkflowRunServerFn = createServerFn({ method: "GET" })
     return run;
   });
 
+/**
+ * Cancel a workflow run by ID.
+ */
+export const cancelWorkflowRunServerFn = createServerFn({ method: "POST" })
+  .inputValidator(z.object({ workflowRunId: z.string() }))
+  .handler(async ({ data }): Promise<WorkflowRun> => {
+    const backend = await getBackend();
+    return backend.cancelWorkflowRun({ workflowRunId: data.workflowRunId });
+  });
+
 /**
  * List step attempts for a workflow run.
  */

packages/dashboard/src/lib/status.ts

@@ -95,6 +95,13 @@ export const TERMINAL_RUN_STATUSES: ReadonlySet<WorkflowRunStatus> = new Set([
   "canceled",
 ]);
 
+/** Run statuses that can be canceled from the dashboard. */
+const CANCELABLE_RUN_STATUSES: ReadonlySet<WorkflowRunStatus> = new Set([
+  "pending",
+  "running",
+  "sleeping",
+]);
+
 const fallbackStatusColor = "text-warning";
 const fallbackStatusBadgeClass = "bg-warning/10 border-warning/20 text-warning";
 
@@ -113,3 +120,7 @@ export function getStatusColor(status: string): string {
 export function getStatusBadgeClass(status: string): string {
   return getStatusConfig(status)?.badgeClass ?? fallbackStatusBadgeClass;
 }
+
+export function isRunCancelableStatus(status: string): boolean {
+  return CANCELABLE_RUN_STATUSES.has(status as WorkflowRunStatus);
+}

packages/dashboard/src/routes/runs/$runId.tsx

@@ -1,4 +1,5 @@
 import { AppLayout } from "@/components/app-layout";
+import { RunCancelAction } from "@/components/run-cancel-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -17,7 +18,7 @@ import {
   CaretDownIcon,
   ListDashesIcon,
 } from "@phosphor-icons/react";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import type { StepAttempt } from "openworkflow/internal";
 import { useState } from "react";
 
@@ -34,6 +35,7 @@ export const Route = createFileRoute("/runs/$runId")({
 
 function RunDetailsPage() {
   const { run, steps } = Route.useLoaderData();
+  const router = useRouter();
   const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
   usePolling({
     enabled: !!run && !TERMINAL_RUN_STATUSES.has(run.status),
@@ -76,7 +78,7 @@ function RunDetailsPage() {
   return (
     <AppLayout>
       <div className="space-y-6">
-        <div className="flex items-center gap-4">
+        <div className="flex flex-wrap items-start gap-4">
           <Link to="/">
             <Button variant="ghost" size="icon">
               <ArrowLeftIcon className="size-5" />
@@ -104,6 +106,13 @@ function RunDetailsPage() {
               Run ID: <span className="font-mono">{run.id}</span>
             </p>
           </div>
+          <RunCancelAction
+            runId={run.id}
+            status={run.status}
+            onCanceled={async () => {
+              await router.invalidate();
+            }}
+          />
         </div>
 
         <div className="flex gap-6">