feat: Implement recipe repair cancellation with UI support and refactor LoadingManager to a singleton.

static/js/components/ContextMenu/GlobalContextMenu.js

@@ -279,6 +279,7 @@ export class GlobalContextMenu extends BaseContextMenu {
         );
 
         const progressUI = state.loadingManager?.showEnhancedProgress(loadingMessage);
+        progressUI?.showCancelButton(() => this.cancelRepair());
 
         try {
             const response = await fetch('/api/lm/recipes/repair', {
@@ -316,6 +317,14 @@ export class GlobalContextMenu extends BaseContextMenu {
                             }
                         } else if (p.status === 'error') {
                             throw new Error(p.error || 'Repair failed');
+                        } else if (p.status === 'cancelled') {
+                            isComplete = true;
+                            progressUI?.complete(translate(
+                                'globalContextMenu.repairRecipes.cancelled',
+                                { count: p.repaired },
+                                `Repair cancelled. ${p.repaired} recipes were repaired.`
+                            ));
+                            showToast('globalContextMenu.repairRecipes.cancelled', { count: p.repaired }, 'info');
                         }
                     } else if (progressResponse.status === 404) {
                         // Progress might have finished quickly and been cleaned up
@@ -337,4 +346,14 @@ export class GlobalContextMenu extends BaseContextMenu {
             menuItem?.classList.remove('disabled');
         }
     }
+
+    async cancelRepair() {
+        try {
+            await fetch('/api/lm/recipes/cancel-repair', {
+                method: 'POST',
+            });
+        } catch (error) {
+            console.error('Failed to cancel recipe repair:', error);
+        }
+    }
 }

static/js/managers/LoadingManager.js

@@ -4,6 +4,10 @@ import { formatFileSize } from '../utils/formatters.js';
 // Loading management
 export class LoadingManager {
     constructor() {
+        if (LoadingManager.instance) {
+            return LoadingManager.instance;
+        }
+
         this.overlay = document.getElementById('loading-overlay');
 
         if (!this.overlay) {
@@ -59,6 +63,8 @@ export class LoadingManager {
         };
 
         this.detailsContainer = null; // Will be created when needed
+
+        LoadingManager.instance = this;
     }
 
     show(message = 'Loading...', progress = 0) {