Improve Provider List

Author: hydropix

src/core/llm/providers/poe.py

@@ -252,12 +252,18 @@ async def get_available_models(self) -> List[Dict[str, Any]]:
                     if request_price > 0.10:
                         continue
 
+                    # Skip free models (no pricing = free tier, often lower quality/rate limited)
+                    if prompt_price == 0 and completion_price == 0 and request_price == 0:
+                        continue
+
                     # Build display name with context info
                     description = m.get("description", "")
+                    # Use display name from API if available, otherwise use model_id
+                    display_name = m.get("name") or model_id
 
                     model_info = {
                         "id": model_id,
-                        "name": model_id,
+                        "name": display_name,
                         "description": description[:100] if description else "",
                         "owned_by": m.get("owned_by", ""),
                         "context_length": self._get_context_limit_for_model(model_id),

src/web/static/img/providers/deepseek.png

@@ -219,29 +219,65 @@ function populateModelSelect(models, defaultModel = null, provider = 'ollama') {
             }
             modelSelect.appendChild(option);
         });
-    } else if (provider === 'openrouter') {
+    } else if (provider === 'openrouter' || provider === 'poe') {
+        // OpenRouter and Poe share the same pricing display format
+        // Poe additionally supports grouping by owned_by and request-based pricing
+        let currentGroup = null;
+        let optgroup = null;
+
         models.forEach(model => {
+            // For Poe: group by owned_by or fallback group
+            if (provider === 'poe') {
+                const groupKey = model.group || model.owned_by;
+                if (groupKey && groupKey !== currentGroup) {
+                    currentGroup = groupKey;
+                    optgroup = document.createElement('optgroup');
+                    optgroup.label = currentGroup;
+                    modelSelect.appendChild(optgroup);
+                }
+            }
+
             const option = document.createElement('option');
-            // Handle both API response format (id) and fallback format (value)
             const modelId = model.id || model.value;
             option.value = modelId;
 
             // Format label with pricing info if available
-            if (model.pricing && model.pricing.prompt_per_million !== undefined) {
-                const inputPrice = formatPrice(model.pricing.prompt_per_million);
-                const outputPrice = formatPrice(model.pricing.completion_per_million);
-                option.textContent = `${model.name || modelId} (In: ${inputPrice}/M, Out: ${outputPrice}/M)`;
-                option.title = `Context: ${model.context_length || 'N/A'} tokens`;
+            if (model.pricing && (model.pricing.prompt_per_million !== undefined || model.pricing.request)) {
+                if (model.pricing.request && model.pricing.request > 0) {
+                    // Request-based pricing (Poe specific)
+                    option.textContent = `${model.name || modelId} ($${model.pricing.request.toFixed(4)}/req)`;
+                } else {
+                    // Token-based pricing (shared format)
+                    const inputPrice = formatPrice(model.pricing.prompt_per_million);
+                    const outputPrice = formatPrice(model.pricing.completion_per_million);
+                    option.textContent = `${model.name || modelId} (In: ${inputPrice}/M, Out: ${outputPrice}/M)`;
+                }
             } else {
-                // Fallback format
+                // Fallback format (no pricing)
                 option.textContent = model.label || model.name || modelId;
             }
 
+            // Build tooltip
+            let tooltip = [];
+            if (model.context_length) {
+                tooltip.push(`Context: ${model.context_length} tokens`);
+            }
+            if (model.description) {
+                tooltip.push(model.description);
+            }
+            option.title = tooltip.length > 0 ? tooltip.join(' | ') : '';
+
             if (modelId === defaultModel) {
                 option.selected = true;
                 defaultModelFound = true;
             }
-            modelSelect.appendChild(option);
+
+            // Add to optgroup if exists (Poe), otherwise to select
+            if (optgroup) {
+                optgroup.appendChild(option);
+            } else {
+                modelSelect.appendChild(option);
+            }
         });
     } else if (provider === 'mistral') {
         models.forEach(model => {
@@ -271,73 +307,6 @@ function populateModelSelect(models, defaultModel = null, provider = 'ollama') {
             }
             modelSelect.appendChild(option);
         });
-    } else if (provider === 'poe') {
-        // Poe models - support groups for fallback, pricing for API response
-        let currentGroup = null;
-        let optgroup = null;
-
-        models.forEach(model => {
-            // Create optgroup if group changed (for fallback models with groups)
-            if (model.group && model.group !== currentGroup) {
-                currentGroup = model.group;
-                optgroup = document.createElement('optgroup');
-                optgroup.label = currentGroup;
-                modelSelect.appendChild(optgroup);
-            }
-
-            // For API response models, group by owned_by
-            if (!model.group && model.owned_by && model.owned_by !== currentGroup) {
-                currentGroup = model.owned_by;
-                optgroup = document.createElement('optgroup');
-                optgroup.label = currentGroup;
-                modelSelect.appendChild(optgroup);
-            }
-
-            const option = document.createElement('option');
-            const modelId = model.value || model.id;
-            option.value = modelId;
-
-            // Format label with pricing info if available (from API)
-            if (model.pricing && (model.pricing.prompt_per_million !== undefined || model.pricing.request)) {
-                if (model.pricing.request) {
-                    // Request-based pricing
-                    const requestPrice = model.pricing.request;
-                    option.textContent = `${model.label || model.name || modelId} ($${requestPrice.toFixed(4)}/req)`;
-                } else {
-                    // Token-based pricing
-                    const inputPrice = formatPrice(model.pricing.prompt_per_million);
-                    const outputPrice = formatPrice(model.pricing.completion_per_million);
-                    option.textContent = `${model.label || model.name || modelId} (In: ${inputPrice}/M, Out: ${outputPrice}/M)`;
-                }
-            } else {
-                // Fallback format (no pricing)
-                option.textContent = model.label || model.name || modelId;
-            }
-
-            // Build tooltip with context and description
-            let tooltip = [];
-            if (model.context_length) {
-                tooltip.push(`Context: ${model.context_length} tokens`);
-            }
-            if (model.description) {
-                tooltip.push(model.description);
-            }
-            if (tooltip.length > 0) {
-                option.title = tooltip.join(' | ');
-            }
-
-            if (modelId === defaultModel) {
-                option.selected = true;
-                defaultModelFound = true;
-            }
-
-            // Add to optgroup if exists, otherwise to select
-            if (optgroup) {
-                optgroup.appendChild(option);
-            } else {
-                modelSelect.appendChild(option);
-            }
-        });
     } else {
         // Ollama - models are strings
         models.forEach(modelName => {
@@ -1035,20 +1004,14 @@ export const ProviderManager = {
             if (data.models && data.models.length > 0) {
                 MessageLogger.showMessage('', '');
 
-                // Format models for the dropdown
-                const formattedModels = data.models.map(m => ({
-                    value: m.id,
-                    label: m.name || m.id,
-                    context_length: m.context_length
-                }));
-
-                populateModelSelect(formattedModels, data.default, 'poe');
-                MessageLogger.addLog(`${data.count} Poe model(s) loaded`);
+                // Pass models directly (same format as OpenRouter)
+                populateModelSelect(data.models, data.default, 'poe');
+                MessageLogger.addLog(`${data.count} Poe model(s) loaded (sorted by provider)`);
 
                 SettingsManager.applyPendingModelSelection();
                 ModelDetector.checkAndShowRecommendation();
 
-                StateManager.setState('models.availableModels', formattedModels.map(m => m.value));
+                StateManager.setState('models.availableModels', data.models.map(m => m.id));
                 StatusManager.setConnected('poe', data.count);
             } else {
                 // Use fallback list

src/web/static/img/providers/gemini.png

@@ -300,8 +300,10 @@ export class SearchableSelect {
                     : '<span class="option-check"></span>';
                 li.innerHTML = `
                     ${checkmark}
-                    <span class="option-label">${DomHelpers.escapeHtml(opt.label)}</span>
-                    ${opt.description ? `<span class="option-description">${DomHelpers.escapeHtml(opt.description)}</span>` : ''}
+                    <span class="option-content">
+                        <span class="option-label">${DomHelpers.escapeHtml(opt.label)}</span>
+                        ${opt.description ? `<span class="option-description">${DomHelpers.escapeHtml(opt.description)}</span>` : ''}
+                    </span>
                 `;
             }
 

src/web/static/img/providers/mistral.png

@@ -1741,10 +1741,20 @@ html.dark .file-info {
     justify-content: center;
 }
 
-.searchable-select-option .option-label {
+.searchable-select-option .option-content {
     flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.searchable-select-option .option-label {
     font-size: 0.875rem;
     color: var(--text-dark);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .searchable-select-option.selected .option-label {
@@ -1755,27 +1765,28 @@ html.dark .file-info {
 .searchable-select-option .option-description {
     font-size: 0.75rem;
     color: var(--text-muted-light);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-/* Group headers */
+/* Group headers - sticky with opaque background */
 .searchable-select-group {
     padding: 0.625rem 1rem 0.375rem;
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--primary-light);
-    background: rgba(54, 118, 216, 0.05);
-    border-top: 1px solid var(--border-light);
-    margin-top: 0.25rem;
+    background: #f8f9fc;
+    border-bottom: 1px solid var(--border-light);
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 10;
 }
 
 .searchable-select-group:first-child {
     border-top: none;
-    margin-top: 0;
 }
 
 /* No results */
@@ -1851,7 +1862,7 @@ html.dark .searchable-select-option.selected {
 }
 
 html.dark .searchable-select-group {
-    background: rgba(90, 142, 232, 0.08);
+    background: #2a2a2a;
     border-color: #444444;
 }