feat(cancel-button): improve UX with loading spinner and success state

web/src/components/runs/cancel-run-button.tsx

@@ -1,7 +1,18 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from '@/components/ui/alert-dialog.js';
 import { Button } from '@/components/ui/button.js';
 import { trpc, trpcClient } from '@/lib/trpc.js';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Square } from 'lucide-react';
+import { CheckCircle, Loader2, Square } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface CancelRunButtonProps {
 	runId: string;
@@ -11,49 +22,97 @@ interface CancelRunButtonProps {
 
 export function CancelRunButton({ runId, status }: CancelRunButtonProps) {
 	const queryClient = useQueryClient();
+	const [showDialog, setShowDialog] = useState(false);
+	const [showSuccess, setShowSuccess] = useState(false);
 
 	const cancelMutation = useMutation({
 		mutationFn: () => trpcClient.runs.cancel.mutate({ runId }),
 		onSuccess: () => {
+			setShowSuccess(true);
 			queryClient.invalidateQueries({ queryKey: trpc.runs.list.queryOptions({}).queryKey });
 			queryClient.invalidateQueries({
 				queryKey: trpc.runs.getById.queryOptions({ id: runId }).queryKey,
 			});
 		},
 	});
 
+	// Auto-dismiss success indicator after 2 seconds
+	useEffect(() => {
+		if (showSuccess) {
+			const timer = setTimeout(() => {
+				setShowSuccess(false);
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	}, [showSuccess]);
+
 	if (status !== 'running') {
 		return null;
 	}
 
 	return (
-		<span className="inline-flex items-center gap-1">
-			<Button
-				variant="outline"
-				size="sm"
-				onClick={(e) => {
-					e.preventDefault();
-					e.stopPropagation();
-					if (window.confirm('Cancel this run?')) {
-						cancelMutation.mutate();
-					}
-				}}
-				disabled={cancelMutation.isPending}
-				title="Cancel run"
-				className="text-destructive hover:text-destructive"
-			>
-				<Square className="h-4 w-4" />
-			</Button>
-			{cancelMutation.isError && (
-				<span
-					className="text-xs text-destructive"
-					title={
-						cancelMutation.error instanceof Error ? cancelMutation.error.message : 'Cancel failed'
-					}
-				>
-					Failed
+		<>
+			<AlertDialog open={showDialog} onOpenChange={setShowDialog}>
+				<span className="inline-flex items-center gap-1">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							setShowDialog(true);
+						}}
+						disabled={cancelMutation.isPending || showSuccess}
+						title="Cancel run"
+						className="text-destructive hover:text-destructive"
+					>
+						{cancelMutation.isPending ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : showSuccess ? (
+							<CheckCircle className="h-4 w-4" />
+						) : (
+							<Square className="h-4 w-4" />
+						)}
+					</Button>
+					{showSuccess && !cancelMutation.isPending && (
+						<span className="text-xs text-green-600 dark:text-green-400">Cancelled</span>
+					)}
+					{cancelMutation.isError && !showSuccess && (
+						<span
+							className="text-xs text-destructive"
+							title={
+								cancelMutation.error instanceof Error
+									? cancelMutation.error.message
+									: 'Cancel failed'
+							}
+						>
+							{cancelMutation.error instanceof Error
+								? `Error: ${cancelMutation.error.message}`
+								: 'Failed'}
+						</span>
+					)}
 				</span>
-			)}
-		</span>
+
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Cancel Run</AlertDialogTitle>
+						<AlertDialogDescription>
+							This will terminate the worker container. Are you sure?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								cancelMutation.mutate();
+							}}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Terminate
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	);
 }