Track cancelled deployments separately.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/app/dashboard/admin/apps/page.tsx

@@ -17,6 +17,7 @@ const statusColors: Record<string, string> = {
   deploying: 'badge-blue',
   failed: 'badge-red',
   build_failed: 'badge-red',
+  cancelled: 'badge-gray',
   stopped: 'badge-gray',
 };
 

frontend/src/app/dashboard/apps/[id]/page.tsx

@@ -22,6 +22,7 @@ const statusColors: Record<string, string> = {
   failed: 'badge-red',
   build_failed: 'badge-red',
   stopped: 'badge-gray',
+  cancelled: 'badge-gray',
 };
 
 /**

frontend/src/app/dashboard/apps/page.tsx

@@ -15,6 +15,7 @@ const statusColors: Record<string, string> = {
   deploying: 'badge-blue',
   failed: 'badge-red',
   build_failed: 'badge-red',
+  cancelled: 'badge-gray',
   stopped: 'badge-gray',
 };
 

frontend/src/app/dashboard/page.tsx

@@ -16,6 +16,7 @@ const statusColors: Record<string, string> = {
   deploying: 'bg-blue-100 text-blue-700',
   failed: 'bg-red-100 text-red-700',
   build_failed: 'bg-red-100 text-red-700',
+  cancelled: 'bg-gray-100 text-gray-600',
   stopped: 'bg-gray-100 text-gray-600',
 };
 
@@ -26,6 +27,7 @@ const statusIcons: Record<string, ReactNode> = {
   deploying: <Circle className="w-3 h-3 fill-blue-500 text-blue-500" />,
   failed: <Circle className="w-3 h-3 fill-red-500 text-red-500" />,
   build_failed: <Circle className="w-3 h-3 fill-red-500 text-red-500" />,
+  cancelled: <Circle className="w-3 h-3 fill-gray-400 text-gray-400" />,
   stopped: <Circle className="w-3 h-3 fill-gray-400 text-gray-400" />,
 };
 

frontend/src/components/build-progress-modal.tsx

@@ -7,7 +7,7 @@ import { Loader2, Upload, Hammer, Rocket, CheckCircle, XCircle, X } from 'lucide
 import { toast } from 'react-toastify';
 
 export interface BuildProgress {
-  phase: 'uploading' | 'building' | 'deploying' | 'done' | 'failed';
+  phase: 'uploading' | 'building' | 'deploying' | 'done' | 'failed' | 'cancelled';
   percent: number;
   bytesUploaded?: number;
   totalBytes?: number;
@@ -26,6 +26,7 @@ const phaseConfig = {
   deploying: { label: 'Deploying to Kubernetes', icon: Rocket, bg: 'bg-purple-500' },
   done: { label: 'Deployment complete', icon: CheckCircle, bg: 'bg-green-500' },
   failed: { label: 'Deployment failed', icon: XCircle, bg: 'bg-red-500' },
+  cancelled: { label: 'Deployment cancelled', icon: XCircle, bg: 'bg-gray-500' },
 };
 
 export function BuildProgressModal({ appId, enabled }: { appId: string; enabled: boolean }) {
@@ -60,7 +61,7 @@ export function BuildProgressModal({ appId, enabled }: { appId: string; enabled:
 
   const cfg = phaseConfig[progress.phase];
   const PhaseIcon = cfg.icon;
-  const isActive = progress.phase !== 'failed';
+  const isActive = progress.phase !== 'failed' && progress.phase !== 'cancelled';
   const showBytes = progress.phase === 'uploading' && progress.totalBytes;
   const isCancelling = cancelMutation.isPending;
 
@@ -70,7 +71,7 @@ export function BuildProgressModal({ appId, enabled }: { appId: string; enabled:
           <button
             type="button"
             onClick={() => cancelMutation.mutate()}
-            disabled={isCancelling || progress.phase === 'failed'}
+            disabled={isCancelling || progress.phase === 'failed' || progress.phase === 'cancelled'}
             className="absolute top-4 right-4 p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors disabled:opacity-50"
             aria-label="Cancel and close"
             title="Cancel deployment"
@@ -82,7 +83,7 @@ export function BuildProgressModal({ appId, enabled }: { appId: string; enabled:
             {isActive ? (
               <Loader2 className="w-12 h-12 text-primary-600 mx-auto mb-3 animate-spin" />
             ) : (
-              <PhaseIcon className="w-12 h-12 text-red-500 mx-auto mb-3" />
+              <PhaseIcon className={`w-12 h-12 ${progress.phase === 'cancelled' ? 'text-gray-500' : 'text-red-500'} mx-auto mb-3`} />
             )}
             <h3 className="text-lg font-semibold text-gray-900">{cfg.label}</h3>
             {progress.message && (
@@ -114,6 +115,10 @@ export function BuildProgressModal({ appId, enabled }: { appId: string; enabled:
             <p className="text-sm text-red-600 text-center">{progress.message}</p>
           )}
 
+          {progress.phase === 'cancelled' && progress.message && (
+            <p className="text-sm text-gray-600 text-center">{progress.message}</p>
+          )}
+
           {isActive && (
             <p className="text-xs text-gray-400 text-center">
               Click the close button to cancel and remove cluster build resources.

frontend/src/types/index.ts

@@ -139,6 +139,7 @@ export type DeploymentStatus =
   | 'deploying'
   | 'running'
   | 'failed'
+  | 'cancelled'
   | 'stopped'
   | 'deleting';