Model picker: group models by provider

Rebased on current main. Integrates with the new Recent/Favorites
system — provider groups appear below Recent and Favorites in browse
mode for large catalogs (>12 models).

Changes:
- Models grouped by canonical provider with collapsible sections
- Chevron animation consistent with sidebar sections
- Domino cascade on expand (only on just-opened group)
- Provider display names (deepseek-ai -> DeepSeek, meta -> Llama, etc.)
- Alias merging (meta + meta-llama -> one Llama group)
- Search includes provider display names for filtering
- Collapsed state persists in localStorage
- No screenshot binary committed

Co-authored-by: danielxb <5981902+danielxb@users.noreply.github.com>

static/js/modelPicker.js

@@ -209,6 +209,54 @@ function _initModelPickerDropdown() {
     return sortModelObjects(result);
   }
 
+  // ── Provider display names and grouping ──
+  const _PROVIDER_NAMES = {
+    '01-ai': 'Yi', 'abacusai': 'Abacus AI', 'adept': 'Adept',
+    'ai21': 'AI21 Labs', 'ai21labs': 'AI21 Labs', 'aion-labs': 'Aion Labs',
+    'aisingapore': 'AI Singapore', 'allenai': 'Allen AI', 'amazon': 'Amazon',
+    'anthracite-org': 'Anthracite', 'anthropic': 'Anthropic', 'arcee-ai': 'Arcee AI',
+    'baai': 'BAAI', 'baidu': 'Baidu', 'bigcode': 'BigCode',
+    'black-forest-labs': 'Black Forest Labs', 'bytedance': 'ByteDance',
+    'bytedance-seed': 'ByteDance', 'cognitivecomputations': 'Cognitive Computations',
+    'cohere': 'Cohere', 'databricks': 'Databricks', 'deepcogito': 'DeepCogito',
+    'deepseek': 'DeepSeek', 'deepseek-ai': 'DeepSeek', 'essentialai': 'Essential AI',
+    'google': 'Google', 'gryphe': 'Gryphe', 'ibm': 'IBM',
+    'ibm-granite': 'IBM Granite', 'inception': 'Inception',
+    'inclusionai': 'Inclusion AI', 'inflection': 'Inflection',
+    'kwaipilot': 'KwaiPilot', 'liquid': 'Liquid AI', 'mancer': 'Mancer',
+    'meta': 'Llama', 'meta-llama': 'Llama', 'microsoft': 'Microsoft',
+    'minimax': 'MiniMax', 'minimaxai': 'MiniMax', 'mistralai': 'Mistral',
+    'moonshotai': 'Moonshot', 'morph': 'Morph', 'nex-agi': 'Nex AGI',
+    'nousresearch': 'Nous Research', 'nv-mistralai': 'NVIDIA x Mistral',
+    'nvidia': 'NVIDIA', 'openai': 'OpenAI', 'openrouter': 'OpenRouter',
+    'perceptron': 'Perceptron', 'perplexity': 'Perplexity', 'poolside': 'Poolside',
+    'prime-intellect': 'Prime Intellect', 'qwen': 'Qwen', 'rekaai': 'Reka',
+    'relace': 'Relace', 'sao10k': 'Sao10k', 'sarvamai': 'Sarvam AI',
+    'snowflake': 'Snowflake', 'stepfun': 'StepFun', 'stepfun-ai': 'StepFun',
+    'stockmark': 'Stockmark', 'switchpoint': 'SwitchPoint', 'tencent': 'Tencent',
+    'thedrummer': 'TheDrummer', 'undi95': 'Undi95', 'upstage': 'Upstage',
+    'writer': 'Writer', 'x-ai': 'xAI', 'xiaomi': 'Xiaomi',
+    'z-ai': 'Zhipu', 'zyphra': 'Zyphra',
+    '~anthropic': 'Anthropic', '~google': 'Google',
+    '~moonshotai': 'Moonshot', '~openai': 'OpenAI',
+  };
+  const _PROVIDER_ALIAS = {
+    'meta-llama': 'meta', 'deepseek': 'deepseek-ai', 'minimaxai': 'minimax',
+    'stepfun-ai': 'stepfun', 'ai21labs': 'ai21', 'ibm-granite': 'ibm',
+    'bytedance-seed': 'bytedance', '~anthropic': 'anthropic',
+    '~google': 'google', '~moonshotai': 'moonshotai', '~openai': 'openai',
+  };
+  function _providerDisplayName(slug) {
+    return _PROVIDER_NAMES[slug] || slug.charAt(0).toUpperCase() + slug.slice(1).replace(/-/g, ' ');
+  }
+  function _providerSlug(mid) {
+    const slash = mid.indexOf('/');
+    let slug = slash > 0 ? mid.substring(0, slash) : 'other';
+    return _PROVIDER_ALIAS[slug] || slug;
+  }
+  const _collapsedProviders = new Set(_loadList('odysseus-model-collapsed'));
+  let _justExpandedProvider = null;
+
   function _populate(filter) {
     listEl.innerHTML = '';
     const all = _getAllModels();
@@ -319,13 +367,11 @@ function _initModelPickerDropdown() {
 
     // ── Search mode: flat, filtered results across the whole catalog ──
     if (q) {
-      const matches = all.filter(m =>
+      const matches = all.filter(m => {
-        [
+        const provName = _providerDisplayName(_providerSlug(m.mid)).toLowerCase();
-          m.mid,
+        return [m.mid, m.display, m.epName, m.providerText, provName]
-          m.display,
+          .filter(Boolean).join(' ').toLowerCase().includes(q);
-          m.epName,
+      });
-          m.providerText,
-        ].filter(Boolean).join(' ').toLowerCase().includes(q));
       if (matches.length === 0) _addEmpty('No matching models');
       else matches.forEach(_addRow);
       return;
@@ -355,14 +401,54 @@ function _initModelPickerDropdown() {
         if (shown.size) _addSection('All models');
         rest.forEach(_addRow);
       }
-    } else if (!recentModels.length && !favModels.length) {
+    } else {
-      // Large catalog, nothing pinned yet — point them at the search box.
+      // Large catalog: show provider groups with collapsible sections.
-      const hint = document.createElement('div');
+      const rest = all.filter(m => !shown.has(m.mid));
-      hint.className = 'model-switch-empty mp-empty-hint';
+      const groups = new Map();
-      hint.innerHTML =
+      rest.forEach(m => {
-        '<span class="mp-empty-title">Search ' + all.length + ' models</span>'
+        const slug = _providerSlug(m.mid);
-        + '<span class="mp-empty-sub">Picks land in Recent · tap the dot to favorite</span>';
+        if (!groups.has(slug)) groups.set(slug, []);
-      listEl.appendChild(hint);
+        groups.get(slug).push(m);
+      });
+      const sorted = [...groups.keys()].sort((a, b) =>
+        _providerDisplayName(a).localeCompare(_providerDisplayName(b)));
+
+      sorted.forEach(provider => {
+        const models = groups.get(provider);
+        const isCollapsed = _collapsedProviders.has(provider);
+        const header = document.createElement('div');
+        header.className = 'mp-provider-header';
+        header.innerHTML =
+          `<svg class="mp-provider-chevron${isCollapsed ? ' collapsed' : ''}" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`
+          + `<span class="mp-provider-name">${_providerDisplayName(provider)}</span>`
+          + `<span class="mp-provider-count">${models.length}</span>`;
+        header.addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (_collapsedProviders.has(provider)) {
+            _collapsedProviders.delete(provider);
+            _justExpandedProvider = provider;
+          } else {
+            _collapsedProviders.add(provider);
+            _justExpandedProvider = null;
+          }
+          _saveList('odysseus-model-collapsed', [..._collapsedProviders]);
+          const st = listEl.scrollTop;
+          _populate('');
+          listEl.scrollTop = st;
+        });
+        listEl.appendChild(header);
+        if (!isCollapsed) {
+          const group = document.createElement('div');
+          group.className = 'mp-provider-group' + (_justExpandedProvider === provider ? ' mp-just-expanded' : '');
+          models.forEach(m => {
+            _addRow(m);
+            // Move the just-appended row into the group container
+            group.appendChild(listEl.lastElementChild);
+          });
+          listEl.appendChild(group);
+          if (_justExpandedProvider === provider) _justExpandedProvider = null;
+        }
+      });
     }
   }
 

static/style.css

@@ -2803,6 +2803,55 @@ body.bg-pattern-sparkles {
       font-size: 0.92em;
       opacity: 0.7;
     }
+    /* Provider group headers */
+    .model-picker-list .mp-provider-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 8px;
+      cursor: pointer;
+      font-size: 0.78em;
+      font-weight: 500;
+      color: var(--fg);
+      border-radius: 4px;
+      user-select: none;
+    }
+    .model-picker-list .mp-provider-header:hover {
+      background: color-mix(in srgb, var(--fg) 6%, transparent);
+    }
+    .model-picker-list .mp-provider-chevron {
+      display: inline-flex;
+      opacity: 0.4;
+      transition: transform 0.2s, opacity 0.15s;
+      flex-shrink: 0;
+    }
+    .model-picker-list .mp-provider-header:hover .mp-provider-chevron {
+      opacity: 0.7;
+    }
+    .model-picker-list .mp-provider-chevron.collapsed {
+      transform: rotate(-90deg);
+    }
+    .model-picker-list .mp-provider-name { flex: 1; }
+    .model-picker-list .mp-provider-count { font-size: 0.85em; opacity: 0.4; }
+    /* Domino expand (15% faster than sidebar) */
+    .mp-provider-group.mp-just-expanded .model-switch-item {
+      animation: mp-domino-in 0.31s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
+    }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(1)  { animation-delay: 0.035s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(2)  { animation-delay: 0.07s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(3)  { animation-delay: 0.105s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(4)  { animation-delay: 0.14s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(5)  { animation-delay: 0.175s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(6)  { animation-delay: 0.21s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(7)  { animation-delay: 0.245s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(8)  { animation-delay: 0.28s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(9)  { animation-delay: 0.315s; }
+    .mp-provider-group.mp-just-expanded .model-switch-item:nth-child(10) { animation-delay: 0.35s; }
+    @keyframes mp-domino-in {
+      0%   { opacity: 0; transform: translateY(6px) scale(0.94); }
+      60%  { opacity: 1; }
+      100% { opacity: 1; transform: translateY(0) scale(1); }
+    }
     /* Comfortable touch targets on phones / narrow screens. */
     @media (hover: none) and (pointer: coarse), (max-width: 768px) {
       .model-picker-list .model-switch-item {