feat(ui): add global, bulk and per-recipe rematch actions

static/js/api/recipeApi.js

@@ -16,6 +16,8 @@ const RECIPE_ENDPOINTS = {
     moveBulk: '/api/lm/recipes/move-bulk',
     bulkDelete: '/api/lm/recipes/bulk-delete',
     repairBulk: '/api/lm/recipes/repair-bulk',
+    rematchBulk: '/api/lm/recipes/rematch-bulk',
+    rematchSingle: '/api/lm/recipe/{recipe_id}/rematch',
 };
 
 const RECIPE_SIDEBAR_CONFIG = {
@@ -586,6 +588,38 @@ export class RecipeSidebarApiClient {
         return result;
     }
 
+    async rematchBulkModels(filePaths) {
+        if (!filePaths || filePaths.length === 0) {
+            throw new Error('No file paths provided');
+        }
+
+        const recipeIds = filePaths
+            .map((path) => extractRecipeId(path))
+            .filter((id) => !!id);
+
+        if (recipeIds.length === 0) {
+            throw new Error('No recipe IDs could be derived from file paths');
+        }
+
+        const response = await fetch(this.apiConfig.endpoints.rematchBulk, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                recipe_ids: recipeIds,
+            }),
+        });
+
+        const result = await response.json();
+
+        if (!response.ok || !result.success) {
+            throw new Error(result.error || 'Failed to rematch recipes');
+        }
+
+        return result;
+    }
+
     async bulkDeleteModels(filePaths) {
         if (!filePaths || filePaths.length === 0) {
             throw new Error('No file paths provided');

static/js/components/ContextMenu/BulkContextMenu.js

@@ -43,6 +43,7 @@ export class BulkContextMenu extends BaseContextMenu {
         const downloadMissingLorasItem = this.menu.querySelector('[data-action="download-missing-loras"]');
         const repairMetadataItem = this.menu.querySelector('[data-action="repair-metadata"]');
         const reimportMetadataItem = this.menu.querySelector('[data-action="reimport-metadata"]');
+        const rematchMetadataItem = this.menu.querySelector('[data-action="rematch-metadata"]');
 
         if (repairMetadataItem) {
             repairMetadataItem.style.display = config.repairMetadata ? 'flex' : 'none';
@@ -50,6 +51,9 @@ export class BulkContextMenu extends BaseContextMenu {
         if (reimportMetadataItem) {
             reimportMetadataItem.style.display = config.reimportMetadata ? 'flex' : 'none';
         }
+        if (rematchMetadataItem) {
+            rematchMetadataItem.style.display = config.rematchMetadata ? 'flex' : 'none';
+        }
 
         const isEmbeddings = currentModelType === 'embeddings';
         if (sendToWorkflowAppendItem) {
@@ -282,6 +286,9 @@ export class BulkContextMenu extends BaseContextMenu {
             case 'repair-metadata':
                 bulkManager.repairSelectedRecipes();
                 break;
+            case 'rematch-metadata':
+                bulkManager.rematchSelectedRecipes();
+                break;
             case 'reimport-metadata':
                 bulkManager.reimportSelectedRecipes();
                 break;

static/js/components/ContextMenu/GlobalContextMenu.js

@@ -24,6 +24,7 @@ export class GlobalContextMenu extends BaseContextMenu {
         const cleanupExamplesItem = this.menu.querySelector('[data-action="cleanup-example-images-folders"]');
         const excludedModelsItem = this.menu.querySelector('[data-action="manage-excluded-models"]');
         const repairRecipesItem = this.menu.querySelector('[data-action="repair-recipes"]');
+        const rematchRecipesItem = this.menu.querySelector('[data-action="rematch-recipes"]');
         const groupByModelItem = this.menu.querySelector('[data-action="toggle-group-by-model"]');
         const groupByModelCheck = groupByModelItem?.querySelector('.check-indicator');
 
@@ -41,6 +42,7 @@ export class GlobalContextMenu extends BaseContextMenu {
             excludedModelsItem?.classList.add('hidden');
             groupByModelItem?.classList.add('hidden');
             repairRecipesItem?.classList.remove('hidden');
+            rematchRecipesItem?.classList.remove('hidden');
         } else {
             modelUpdateItem?.classList.remove('hidden');
             licenseRefreshItem?.classList.remove('hidden');
@@ -49,6 +51,7 @@ export class GlobalContextMenu extends BaseContextMenu {
             excludedModelsItem?.classList.remove('hidden');
             groupByModelItem?.classList.remove('hidden');
             repairRecipesItem?.classList.add('hidden');
+            rematchRecipesItem?.classList.add('hidden');
         }
 
         super.showMenu(x, y, contextOrigin);
@@ -81,6 +84,11 @@ export class GlobalContextMenu extends BaseContextMenu {
                     console.error('Failed to repair recipes:', error);
                 });
                 break;
+            case 'rematch-recipes':
+                this.rematchRecipes(menuItem).catch((error) => {
+                    console.error('Failed to rematch recipes:', error);
+                });
+                break;
             case 'manage-excluded-models':
                 this.manageExcludedModels();
                 break;
@@ -439,4 +447,97 @@ export class GlobalContextMenu extends BaseContextMenu {
             console.error('Failed to cancel recipe repair:', error);
         }
     }
+
+    async rematchRecipes(menuItem) {
+        if (this._rematchInProgress) {
+            return;
+        }
+
+        this._rematchInProgress = true;
+        menuItem?.classList.add('disabled');
+
+        const loadingMessage = translate(
+            'globalContextMenu.rematchRecipes.loading',
+            {},
+            'Rematching recipes to local models...'
+        );
+
+        const progressUI = state.loadingManager?.showEnhancedProgress(loadingMessage);
+        progressUI?.showCancelButton(() => this.cancelRematch());
+
+        try {
+            const response = await fetch('/api/lm/recipes/rematch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+            });
+
+            const result = await response.json();
+            if (!response.ok || !result.success) {
+                throw new Error(result.error || 'Failed to start rematch');
+            }
+
+            // Poll for progress (mirrors the repair flow; the backend reports `rematched` counts)
+            let isComplete = false;
+            while (!isComplete && this._rematchInProgress) {
+                const progressResponse = await fetch('/api/lm/recipes/rematch-progress');
+                if (progressResponse.ok) {
+                    const progressResult = await progressResponse.json();
+                    if (progressResult.success && progressResult.progress) {
+                        const p = progressResult.progress;
+                        if (p.status === 'processing') {
+                            const percent = (p.current / p.total) * 100;
+                            progressUI?.updateProgress(percent, p.recipe_name, `${loadingMessage} (${p.current}/${p.total})`);
+                        } else if (p.status === 'completed') {
+                            isComplete = true;
+                            progressUI?.complete(translate(
+                                'globalContextMenu.rematchRecipes.success',
+                                { count: p.rematched },
+                                `Rematched ${p.rematched} recipes.`
+                            ));
+                            showToast('globalContextMenu.rematchRecipes.success', { count: p.rematched }, 'success');
+                            // Refresh recipes page if active
+                            if (window.recipesPage) {
+                                window.recipesPage.refresh();
+                            }
+                        } else if (p.status === 'error') {
+                            throw new Error(p.error || 'Rematch failed');
+                        } else if (p.status === 'cancelled') {
+                            isComplete = true;
+                            progressUI?.complete(translate(
+                                'globalContextMenu.rematchRecipes.cancelled',
+                                { count: p.rematched },
+                                `Rematch cancelled. ${p.rematched} recipes were rematched.`
+                            ));
+                            showToast('globalContextMenu.rematchRecipes.cancelled', { count: p.rematched }, 'info');
+                        }
+                    } else if (progressResponse.status === 404) {
+                        // Progress might have finished quickly and been cleaned up
+                        isComplete = true;
+                        progressUI?.complete();
+                    }
+                }
+
+                if (!isComplete) {
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                }
+            }
+        } catch (error) {
+            console.error('Recipe rematch failed:', error);
+            progressUI?.complete(translate('globalContextMenu.rematchRecipes.error', { message: error.message }, 'Rematch failed: {message}'));
+            showToast('globalContextMenu.rematchRecipes.error', { message: error.message }, 'error');
+        } finally {
+            this._rematchInProgress = false;
+            menuItem?.classList.remove('disabled');
+        }
+    }
+
+    async cancelRematch() {
+        try {
+            await fetch('/api/lm/recipes/cancel-rematch', {
+                method: 'POST',
+            });
+        } catch (error) {
+            console.error('Failed to cancel recipe rematch:', error);
+        }
+    }
 }

static/js/components/ContextMenu/RecipeContextMenu.js

@@ -97,6 +97,10 @@ export class RecipeContextMenu extends BaseContextMenu {
                 // Repair recipe metadata
                 this.repairRecipe(recipeId);
                 break;
+            case 'rematch':
+                // Rematch recipe resources to local models
+                this.rematchRecipe(recipeId);
+                break;
             case 'reimport':
                 this.reimportRecipe(recipeId);
                 break;
@@ -330,6 +334,50 @@ export class RecipeContextMenu extends BaseContextMenu {
         }
     }
 
+    async rematchRecipe(recipeId) {
+        if (!recipeId) {
+            showToast('toast.recipes.rematchFailed', { message: 'Missing recipe ID' }, 'error');
+            return;
+        }
+
+        // Capture before any await: the menu's click handler nulls currentCard
+        const filePath = this.currentCard?.dataset?.filepath;
+
+        try {
+            showToast('Rematching recipe to local models...', {}, 'info');
+
+            const response = await fetch(`/api/lm/recipe/${recipeId}/rematch`, {
+                method: 'POST'
+            });
+            const result = await response.json();
+
+            if (result.success) {
+                // The rematch backend reports `rematched` (not `repaired`)
+                if (result.rematched > 0) {
+                    showToast(
+                        'toast.recipes.rematchComplete',
+                        { rematched: result.rematched, skipped: result.skipped || 0, total: 1 },
+                        'success'
+                    );
+                    const detailResponse = await fetch(`/api/lm/recipe/${recipeId}`);
+                    if (detailResponse.ok) {
+                        const updatedRecipe = await detailResponse.json();
+                        if (filePath && state.virtualScroller) {
+                            state.virtualScroller.updateSingleItem(filePath, updatedRecipe);
+                        }
+                    }
+                } else {
+                    showToast('toast.recipes.rematchSkipped', { total: 1 }, 'info');
+                }
+            } else {
+                throw new Error(result.error || 'Rematch failed');
+            }
+        } catch (error) {
+            console.error('Error rematching recipe:', error);
+            showToast('toast.recipes.rematchFailed', { message: error.message }, 'error');
+        }
+    }
+
     async reimportRecipe(recipeId) {
         if (!recipeId) {
             showToast('recipes.contextMenu.reimport.missingId', {}, 'error');

static/js/managers/BulkManager.js

@@ -95,7 +95,8 @@ export class BulkManager {
                 setFavorite: true,
                 unfavorite: true,
                 repairMetadata: true,
-                reimportMetadata: true
+                reimportMetadata: true,
+                rematchMetadata: true
             }
         };
 
@@ -871,6 +872,77 @@ export class BulkManager {
         }
     }
 
+    async rematchSelectedRecipes() {
+        if (state.selectedModels.size === 0) {
+            showToast('toast.recipes.noRecipesSelected', {}, 'warning');
+            return;
+        }
+
+        if (state.currentPageType !== 'recipes') {
+            showToast('This operation is only available for recipes', {}, 'warning');
+            return;
+        }
+
+        try {
+            const apiClient = this.getActiveApiClient();
+            const filePaths = Array.from(state.selectedModels);
+
+            if (typeof apiClient.rematchBulkModels !== 'function') {
+                showToast('Bulk rematch is not supported for this model type', {}, 'error');
+                return;
+            }
+
+            state.loadingManager.showSimpleLoading('Rematching recipes to local models...');
+
+            const result = await apiClient.rematchBulkModels(filePaths);
+
+            if (result.success) {
+                const total = result.total || filePaths.length;
+                // The rematch backend reports `rematched` (not `repaired`)
+                const rematched = result.rematched || 0;
+                const skipped = result.skipped || 0;
+
+                const recipes = result.recipes || [];
+                for (const recipe of recipes) {
+                    if (recipe.file_path) {
+                        state.virtualScroller.updateSingleItem(
+                            recipe.file_path,
+                            recipe
+                        );
+                    }
+                }
+
+                if (rematched > 0) {
+                    showToast(
+                        'toast.recipes.rematchComplete',
+                        { rematched, skipped, total },
+                        'success'
+                    );
+                } else {
+                    showToast(
+                        'toast.recipes.rematchSkipped',
+                        { total },
+                        'info'
+                    );
+                }
+
+                if (state.bulkMode) this.toggleBulkMode();
+            } else {
+                throw new Error(result.error || 'Bulk rematch failed');
+            }
+        } catch (error) {
+            console.error('Error during bulk recipe rematch:', error);
+            showToast('toast.recipes.rematchFailed', { message: error.message }, 'error');
+        } finally {
+            if (state.loadingManager?.hide) {
+                state.loadingManager.hide();
+            }
+            if (typeof state.loadingManager?.restoreProgressBar === 'function') {
+                state.loadingManager.restoreProgressBar();
+            }
+        }
+    }
+
     async refreshAllMetadata() {
         if (state.selectedModels.size === 0) {
             showToast('toast.models.noModelsSelected', {}, 'warning');