fix(store): semver-aware update badge and add missing gap-1.5 utility

- Replace naive version !== comparison with isNewerVersion() that does
  semver greater-than check, preventing false "Update" badges on
  same-version or downgrade scenarios
- Add missing .gap-1.5 CSS utility used by category pills and tag lists

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web_interface/static/v3/app.css

@@ -144,6 +144,7 @@ body {
 
 .rounded-lg { border-radius: 0.5rem; }
 .rounded-md { border-radius: 0.375rem; }
+.rounded-full { border-radius: 9999px; }
 .rounded { border-radius: 0.25rem; }
 
 .shadow { box-shadow: var(--shadow); }
@@ -155,6 +156,7 @@ body {
 .p-4 { padding: 1rem; }
 .p-2 { padding: 0.5rem; }
 .px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
 .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
 .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
 .pb-4 { padding-bottom: 1rem; }
@@ -202,6 +204,7 @@ body {
 .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.gap-1\.5 { gap: 0.375rem; }
 .gap-2 { gap: 0.5rem; }
 .gap-3 { gap: 0.75rem; }
 .gap-4 { gap: 1rem; }
@@ -667,35 +670,27 @@ button.bg-white {
 }
 
 /* Filter Pill Toggle States */
-.filter-pill {
+.filter-pill,
-    cursor: pointer;
-    user-select: none;
-    transition: all 0.15s ease;
-}
-
-.filter-pill[data-active="true"] {
-    background-color: var(--color-info-bg);
-    border-color: var(--color-info);
-    color: var(--color-info);
-    font-weight: 600;
-}
-
-.filter-pill[data-active="true"]:hover {
-    opacity: 0.85;
-}
-
-/* Category Filter Pills */
 .category-filter-pill {
     cursor: pointer;
     user-select: none;
-    transition: all 0.15s ease;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
 }
 
+.filter-pill[data-active="true"],
 .category-filter-pill[data-active="true"] {
     background-color: var(--color-info-bg);
     border-color: var(--color-info);
     color: var(--color-info);
     font-weight: 600;
+}
+
+.filter-pill[data-active="true"]:hover,
+.category-filter-pill[data-active="true"]:hover {
+    opacity: 0.85;
+}
+
+.category-filter-pill[data-active="true"] {
     box-shadow: 0 0 0 1px var(--color-info);
 }
 

web_interface/static/v3/plugins_manager.js

@@ -5278,10 +5278,11 @@ function setupStoreFilterListeners() {
     }
 }
 
-function applyStoreFiltersAndSort() {
+function applyStoreFiltersAndSort(basePlugins) {
-    if (!pluginStoreCache) return;
+    const source = basePlugins || pluginStoreCache;
+    if (!source) return;
 
-    let plugins = [...pluginStoreCache];
+    let plugins = [...source];
     const installedIds = new Set(
         (window.installedPlugins || []).map(p => p.id)
     );
@@ -5342,7 +5343,7 @@ function applyStoreFiltersAndSort() {
     // Update result count
     const countEl = document.getElementById('store-count');
     if (countEl) {
-        const total = pluginStoreCache.length;
+        const total = source.length;
         const shown = plugins.length;
         countEl.innerHTML = shown < total
             ? `${shown} of ${total} shown`
@@ -5481,20 +5482,9 @@ function searchPluginStore(fetchCommitInfo = true) {
                     return;
                 }
 
-                // Route through filter/sort pipeline if cache is available, otherwise render directly
+                // Route through filter/sort pipeline — pass fresh plugins
-                if (pluginStoreCache) {
+                // so server-filtered results (query/category) aren't ignored
-                    applyStoreFiltersAndSort();
+                applyStoreFiltersAndSort(plugins);
-                } else {
-                    renderPluginStore(plugins);
-                    try {
-                        const countEl = document.getElementById('store-count');
-                        if (countEl) {
-                            countEl.innerHTML = `${plugins.length} available`;
-                        }
-                    } catch (e) {
-                        console.warn('Could not update store count:', e);
-                    }
-                }
                 
                 // Ensure GitHub token collapse handler is attached after store is rendered
                 // The button might not exist until the store content is loaded
@@ -5603,7 +5593,7 @@ function renderPluginStore(plugins) {
     container.innerHTML = plugins.map(plugin => {
         const isInstalled = installedMap.has(plugin.id);
         const installedVersion = installedMap.get(plugin.id);
-        const hasUpdate = isInstalled && plugin.version && installedVersion && plugin.version !== installedVersion;
+        const hasUpdate = isInstalled && plugin.version && installedVersion && isNewerVersion(plugin.version, installedVersion);
         return `
         <div class="plugin-card">
             <div class="flex items-start justify-between mb-4">
@@ -5611,7 +5601,7 @@ function renderPluginStore(plugins) {
                     <div class="flex items-center flex-wrap gap-2 mb-2">
                         <h4 class="font-semibold text-gray-900 text-base">${escapeHtml(plugin.name || plugin.id)}</h4>
                         ${plugin.verified ? '<span class="badge badge-success"><i class="fas fa-check-circle mr-1"></i>Verified</span>' : ''}
-                        ${isNewPlugin(plugin.last_updated) ? '<span class="badge badge-info"><i class="fas fa-sparkles mr-1"></i>New</span>' : ''}
+                        ${isNewPlugin(plugin.last_updated) ? '<span class="badge badge-info"><i class="fas fa-star mr-1"></i>New</span>' : ''}
                         ${isInstalled ? '<span class="badge badge-success"><i class="fas fa-check mr-1"></i>Installed</span>' : ''}
                         ${hasUpdate ? '<span class="badge badge-warning"><i class="fas fa-arrow-up mr-1"></i>Update</span>' : ''}
                         ${plugin._source === 'custom_repository' ? `<span class="badge badge-accent" title="From: ${escapeHtml(plugin._repository_name || plugin._repository_url || 'Custom Repository')}"><i class="fas fa-bookmark mr-1"></i>Custom</span>` : ''}
@@ -6364,6 +6354,20 @@ function formatCommit(commit, branch) {
     return 'Latest';
 }
 
+// Check if storeVersion is strictly newer than installedVersion (semver-aware)
+function isNewerVersion(storeVersion, installedVersion) {
+    const parse = (v) => (v || '').replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0);
+    const a = parse(storeVersion);
+    const b = parse(installedVersion);
+    const len = Math.max(a.length, b.length);
+    for (let i = 0; i < len; i++) {
+        const diff = (a[i] || 0) - (b[i] || 0);
+        if (diff > 0) return true;
+        if (diff < 0) return false;
+    }
+    return false;
+}
+
 // Check if plugin is new (updated within last 7 days)
 function isNewPlugin(lastUpdated) {
     if (!lastUpdated) return false;

web_interface/templates/v3/partials/plugins.html

@@ -204,7 +204,7 @@
                             <i class="fas fa-check-circle mr-1"></i>Verified
                         </button>
                         <button id="filter-new" type="button" class="filter-pill text-xs px-3 py-1.5 rounded-full border border-gray-300 bg-white hover:bg-gray-50 transition-colors" data-active="false">
-                            <i class="fas fa-sparkles mr-1"></i>New
+                            <i class="fas fa-star mr-1"></i>New
                         </button>
                         <button id="filter-installed" type="button" class="filter-pill text-xs px-3 py-1.5 rounded-full border border-gray-300 bg-white hover:bg-gray-50 transition-colors" data-active="false">
                             <i class="fas fa-download mr-1"></i><span>All</span>