feat(ui): show version count in group-by-model cards, add versions_count sort, no-reload VLM

- group_by_model dedup now counts versions per group and attaches
  version_count; respects update_flag_strategy (same_base) by
  sub-grouping on base_model
- Card footer shows clickable 'x versions' link instead of version
  name when grouped (hides HIGH/LOW badges); clicking triggers
  View Local Versions without page reload
- Added 'Local Versions' sort option (versions_count), auto-hidden
  when group_by_model is off
- Sort preference is saved/restored separately for normal and
  grouped modes
- VLM flow (triggerVlmView, clearCustomFilter) uses resetAndReload()
  via API instead of window.location.reload()
- Fixed cache mutation bug: version_count is now set on a shallow
  copy, not the cached dict, preventing stale version_count leaking
  into VLM responses
- i18n: all 9 locale files translated

static/js/components/ContextMenu/GlobalContextMenu.js

@@ -108,6 +108,11 @@ export class GlobalContextMenu extends BaseContextMenu {
         const newValue = !state.global.settings.group_by_model;
         state.global.settings.group_by_model = newValue;
 
+        // Save/restore sort preference when toggling group_by_model
+        if (window.pageControls?.onGroupByModelToggled) {
+            window.pageControls.onGroupByModelToggled(newValue);
+        }
+
         sm.saveSetting('group_by_model', newValue).catch((error) => {
             console.error('Failed to save group_by_model setting:', error);
             // Revert state on failure

static/js/components/controls/CheckpointsControls.js

@@ -102,7 +102,12 @@ export class CheckpointsControls extends PageControls {
             removeSessionItem('vlm_model_name');
             removeSessionItem('vlm_base_model');
             removeSessionItem('vlm_page_type');
-            window.location.reload();
+            // Hide the indicator
+            const indicator = document.getElementById('customFilterIndicator');
+            if (indicator) {
+                indicator.classList.add('hidden');
+            }
+            await resetAndReload();
             return;
         }
 

static/js/components/controls/LorasControls.js

@@ -119,7 +119,11 @@ export class LorasControls extends PageControls {
             removeSessionItem('vlm_model_name');
             removeSessionItem('vlm_base_model');
             removeSessionItem('vlm_page_type');
-            window.location.reload();
+            const indicator = document.getElementById('customFilterIndicator');
+            if (indicator) {
+                indicator.classList.add('hidden');
+            }
+            await resetAndReload();
             return;
         }
 

static/js/components/controls/PageControls.js

@@ -1,6 +1,6 @@
 // PageControls.js - Manages controls for both LoRAs and Checkpoints pages
 import { state, getCurrentPageState, setCurrentPageType } from '../../state/index.js';
-import { getStorageItem, setStorageItem, getSessionItem, setSessionItem, removeSessionItem } from '../../utils/storageHelpers.js';
+import { getStorageItem, setStorageItem, removeStorageItem, getSessionItem, setSessionItem, removeSessionItem } from '../../utils/storageHelpers.js';
 import { showToast, openCivitaiByMetadata } from '../../utils/uiHelpers.js';
 import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
 import { sidebarManager } from '../SidebarManager.js';
@@ -465,6 +465,68 @@ export class PageControls {
     /**
      * Clear custom filter
      */
+    /**
+     * Trigger View Local Versions without page reload
+     * Sets sessionStorage and reloads data via the API.
+     */
+    triggerVlmView(modelId, modelName, baseModel, pageType) {
+        const targetPageType = pageType || this.pageType;
+        setSessionItem('vlm_model_id', String(modelId));
+        setSessionItem('vlm_model_name', modelName || String(modelId));
+        setSessionItem('vlm_page_type', targetPageType);
+        if (baseModel) {
+            setSessionItem('vlm_base_model', baseModel);
+        } else {
+            removeSessionItem('vlm_base_model');
+        }
+        // Reload data via API (no page reload)
+        this.resetAndReload(true).then(() => {
+            // Show the VLM indicator after data loads
+            this.checkVlmFilter();
+        });
+    }
+
+    /**
+     * Called when group_by_model is toggled.
+     * Saves current sort when entering grouped mode, restores normal sort
+     * when leaving — prevents "Most versions first" persisting after exit.
+     */
+    onGroupByModelToggled(isEnabled) {
+        const normalKey = `${this.pageType}_sort_normal`;
+        const groupedKey = `${this.pageType}_sort_grouped`;
+
+        if (isEnabled) {
+            // Entering group mode: save current sort for later restoration
+            setStorageItem(normalKey, this.pageState.sortBy);
+            // Restore previously saved grouped sort, if any
+            const savedGroupedSort = getStorageItem(groupedKey);
+            if (savedGroupedSort) {
+                this.pageState.sortBy = savedGroupedSort;
+                this.saveSortPreference(savedGroupedSort);
+                const sortSelect = document.getElementById('sortSelect');
+                if (sortSelect) {
+                    sortSelect.value = savedGroupedSort;
+                }
+            }
+        } else {
+            // Leaving group mode: save current grouped sort aside, restore normal
+            const currentSort = this.pageState.sortBy;
+            if (currentSort && currentSort.startsWith('versions_count')) {
+                setStorageItem(groupedKey, currentSort);
+            }
+            const savedNormalSort = getStorageItem(normalKey);
+            if (savedNormalSort) {
+                removeStorageItem(normalKey);
+                this.pageState.sortBy = savedNormalSort;
+                this.saveSortPreference(savedNormalSort);
+                const sortSelect = document.getElementById('sortSelect');
+                if (sortSelect) {
+                    sortSelect.value = savedNormalSort;
+                }
+            }
+        }
+    }
+
     /**
      * Check for View Local Versions filter in sessionStorage (page-type-scoped)
      */
@@ -515,8 +577,14 @@ export class PageControls {
             removeSessionItem('vlm_base_model');
             removeSessionItem('vlm_page_type');
 
-            // Full page reload to restore initial state (mirrors the "set" action)
-            window.location.reload();
+            // Hide the indicator
+            const indicator = document.getElementById('customFilterIndicator');
+            if (indicator) {
+                indicator.classList.add('hidden');
+            }
+
+            // Reload data via API (no page reload)
+            await this.resetAndReload(true);
             return;
         }
 

static/js/components/shared/ModelCard.js

@@ -100,6 +100,12 @@ function handleModelCardEvent_internal(event, modelType) {
         return true; // Stop propagation
     }
 
+    if (event.target.closest('.version-count-link')) {
+        event.stopPropagation();
+        handleViewLocalVersionsFromCard(card, modelType);
+        return true;
+    }
+
     // If no specific element was clicked, handle the card click (show modal or toggle selection)
     handleCardClick(card, modelType);
     return false; // Continue with other handlers (e.g., bulk selection)
@@ -265,6 +271,22 @@ async function handleExampleImagesAccess(card, modelType) {
     }
 }
 
+function handleViewLocalVersionsFromCard(card, modelType) {
+    const modelId = card.dataset.modelId;
+    const modelName = card.dataset.name;
+    if (!modelId) return;
+    // Respect update_flag_strategy: only filter by base model when the strategy says so
+    const strategy = state.global?.settings?.update_flag_strategy;
+    const shouldFilterByBase = strategy === 'same_base';
+    const baseModel = shouldFilterByBase && card.dataset.base_model !== 'Unknown'
+        ? card.dataset.base_model
+        : undefined;
+    // Use the no-reload VLM flow via PageControls
+    if (window.pageControls && typeof window.pageControls.triggerVlmView === 'function') {
+        window.pageControls.triggerVlmView(modelId, modelName, baseModel, modelType);
+    }
+}
+
 function handleCardClick(card, modelType) {
     const pageState = getCurrentPageState();
 
@@ -448,6 +470,10 @@ export function createModelCard(model, modelType) {
     const hasUpdateAvailable = Boolean(model.update_available);
     card.dataset.update_available = hasUpdateAvailable ? 'true' : 'false';
     card.dataset.skip_metadata_refresh = model.skip_metadata_refresh ? 'true' : 'false';
+    // Store version_count for group-by-model display
+    if (model.version_count !== undefined) {
+        card.dataset.version_count = model.version_count;
+    }
 
     // To only show usage_count when sorting by usage. 
     const pageState = getCurrentPageState();
@@ -659,16 +685,28 @@ export function createModelCard(model, modelType) {
                             const autoTags = model.auto_tags || [];
                             const hlTags = autoTags.filter(t => t === 'HIGH' || t === 'LOW');
                             const hasVersionName = model.civitai?.name;
-                            if (!hlTags.length && !hasVersionName) return '';
+                            // When group_by_model is active and model has multiple versions,
+                            // show clickable version count instead of version name (and hide badges)
+                            const isGroupByModel = state.global.settings.group_by_model;
+                            const versionCount = model.version_count;
+                            const showVersionCount = isGroupByModel && versionCount > 1;
+                            if (!hlTags.length && !hasVersionName && !showVersionCount) return '';
                             const density = state.global.settings.display_density || 'default';
                             const shortLabels = density === 'medium' || density === 'compact';
-                            const badges = hlTags.map(t => {
+                            // Don't show HIGH/LOW badges when showing version count (confusing in grouped mode)
+                            const badges = !showVersionCount ? hlTags.map(t => {
                                 const cls = t === 'HIGH' ? 'hl-badge hl-badge--high' : 'hl-badge hl-badge--low';
                                 const label = shortLabels ? (t === 'HIGH' ? 'H' : 'L') : t;
                                 const titleAttr = shortLabels ? ` title="${t}"` : '';
                                 return `<span class="${cls}"${titleAttr}>${label}</span>`;
-                            }).join('');
-                            const versionHtml = hasVersionName ? `<span class="version-name civitai-version">${model.civitai.name}</span>` : '';
+                            }).join('') : '';
+                            let versionHtml = '';
+                            if (showVersionCount) {
+                                const countLabel = translate('modelCard.footer.versionCount', { count: versionCount }, `${versionCount} versions`);
+                                versionHtml = `<span class="version-count-link" title="${translate('modelCard.footer.viewAllVersions', {}, 'View all local versions')}">${countLabel}</span>`;
+                            } else if (hasVersionName) {
+                                versionHtml = `<span class="version-name civitai-version">${model.civitai.name}</span>`;
+                            }
                             return `<span class="badge-version-unit">${badges}${versionHtml}</span>`;
                         })()}
                         ${hasUsageCount ? `<span class="version-name" title="${translate('modelCard.usage.timesUsed', {}, 'Times used')}">${model.usage_count}×</span>` : ''}

static/js/components/shared/ModelVersionsTab.js

@@ -1042,9 +1042,16 @@ export function initVersionsTab({
             removeSessionItem('vlm_base_model');
         }
 
-        // Close the modal and reload the page to show filtered cards
+        // Close the modal and navigate via no-reload VLM flow
         modalManager.closeModal(modalId);
-        window.location.reload();
+        if (window.pageControls && typeof window.pageControls.triggerVlmView === 'function') {
+            window.pageControls.triggerVlmView(
+                modelId,
+                modelName || String(modelId),
+                isFilteringActive ? baseModelInfo.raw : undefined,
+                modelType
+            );
+        }
     }
 
     async function handleToggleVersionIgnore(button, versionId) {