diff --git a/static/style.css b/static/style.css index c08141d1..6a9c70d0 100644 --- a/static/style.css +++ b/static/style.css @@ -1420,7 +1420,7 @@ .model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;} .model-dropdown.open{display:block;} .model-scope-note{position:sticky;top:0;z-index:2;padding:9px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px;font-weight:650;line-height:1.4;background:color-mix(in srgb,var(--surface) 82%,var(--accent-bg));box-shadow:0 1px 0 rgba(0,0,0,.12);} -.model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;} +.model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;border-top:1px solid var(--border2);margin-top:2px;} .model-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:3px;align-items:flex-start;} .model-opt:hover{background:rgba(255,255,255,.07);} .model-opt.active{background:var(--accent-bg);} @@ -1430,6 +1430,7 @@ .model-opt-badge--primary{background:rgba(50,184,198,.16);border-color:rgba(50,184,198,.32);color:#8fe7ef;} .model-opt-badge--fallback{background:rgba(255,184,77,.14);border-color:rgba(255,184,77,.28);color:#ffd18a;} .model-opt-id{display:block;font-size:10px;color:var(--muted);line-height:1.3;opacity:.72;word-break:break-word;} +.model-opt-provider{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.03em;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--border2);margin-left:auto;white-space:nowrap;flex-shrink:0;} .model-custom-sep{padding-top:4px;border-top:1px solid var(--border);margin-top:4px;} .model-custom-row{display:flex;align-items:center;gap:6px;padding:6px 10px 8px;} .model-custom-input{flex:1;background:var(--code-bg);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;font-family:inherit;min-width:0;} diff --git a/static/ui.js b/static/ui.js index 4b93eb29..ac60bbaa 100644 --- a/static/ui.js +++ b/static/ui.js @@ -872,19 +872,28 @@ function renderModelDropdown(){ } // Add remaining models matching filter let _lastGroup=null; + // Count models per group for heading labels (#1425) + const _groupCounts={}; + for(const m of _modelData){ + if(configuredIds.has(m.value)) continue; + if(m.group) _groupCounts[m.group]=(_groupCounts[m.group]||0)+1; + } for(const m of _modelData){ if(configuredIds.has(m.value)||!matches(m)) continue; if(m.group&&m.group!==_lastGroup){ const heading=document.createElement('div'); heading.className='model-group'; - heading.textContent=m.group; + const count=_groupCounts[m.group]||0; + heading.textContent=count>1?`${m.group} (${count})`:m.group; dd.appendChild(heading); _lastGroup=m.group; } const row=document.createElement('div'); row.className='model-opt'+(m.value===sel.value?' active':''); const badgeHtml=m.badge?`${esc(m.badge.label||'Configured')}`:''; - row.innerHTML=`