From da43bc14596827d7920be6fc76ff9e29f43c6b3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaroslav=20Bene=C5=A1?= Date: Sat, 26 Sep 2026 22:54:31 +0000 Subject: [PATCH] Model lists you can read The chat's model picker shows name, context window (CTX 131K) and an eye for vision, on shared column tracks; the capability tags are gone from it. Settings -> Models gives the name its own row and wraps the tags beneath. The picker's tick now follows an in-place choice. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 22 ++++ src/lembas/__init__.py | 2 +- src/lembas/web/i18n/sk.py | 2 + src/lembas/web/static/css/admin.css | 29 +++++ src/lembas/web/static/css/app.css | 26 ++++ .../web/templates/chat/_model_picker.html | 46 +++---- src/lembas/web/templates/partials/icons.html | 4 + src/lembas/web/templates/settings.html | 40 ++++--- src/lembas/web/templating.py | 20 ++++ tests/test_model_lists.py | 113 ++++++++++++++++++ 10 files changed, 269 insertions(+), 35 deletions(-) create mode 100644 tests/test_model_lists.py diff --git a/CHANGELOG.md b/CHANGELOG.md index f84a8f1..c7a0024 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,28 @@ for 1.0.0 have something to be assembled from. ## Unreleased +## 1.8.2 + +The model lists, made readable. Both printed every capability switch as a tag — +reasoning, vision, tools and then seventeen `tool_*` names — for every model. + +- **The model picker in a chat is name, context window and an eye.** One line per + model: its name, its context window shortened the way it is quoted (`CTX 131K`, + `CTX 1M`), and an eye if it can see images — nothing if it cannot. The tags and + the description are gone from it; a menu whose one job is choosing does not + need twenty badges per row. The context sizes and the eyes line up as columns + whatever a name's length, and a model with no context length set shows nothing + rather than `CTX 0`. + +- **The tick follows the model you picked.** It stayed on the model the page was + loaded with until the next reload, while the highlight moved. + +- **Settings → Models no longer runs the tags over the names.** The tags sat + beside the name, squeezed it to a word per line on a phone and drew over it at + every width. The name now has the row to itself, with the same context size and + eye as the picker, and the capability tags wrap underneath at the card's full + width. A long name wraps rather than being cut off. + ## 1.8.1 Three fixes to how a crowd behaves, found by reading one real round on the live diff --git a/src/lembas/__init__.py b/src/lembas/__init__.py index b974ff1..56e1ade 100644 --- a/src/lembas/__init__.py +++ b/src/lembas/__init__.py @@ -1,3 +1,3 @@ """LLeMbas - a Middle-earth themed web UI for OpenAI-compatible LLM endpoints.""" -__version__ = "1.8.1" +__version__ = "1.8.2" diff --git a/src/lembas/web/i18n/sk.py b/src/lembas/web/i18n/sk.py index f792b88..9757ab1 100644 --- a/src/lembas/web/i18n/sk.py +++ b/src/lembas/web/i18n/sk.py @@ -679,6 +679,8 @@ MESSAGES.update( "Add a connection": "Pridať spojenie", "Models": "Modely", "Model": "Model", + "Context window": "Kontextové okno", + "Sees images": "Vidí obrázky", "Groups": "Skupiny", "Members": "Členovia", "Account": "Účet", diff --git a/src/lembas/web/static/css/admin.css b/src/lembas/web/static/css/admin.css index 024d472..b1f6715 100644 --- a/src/lembas/web/static/css/admin.css +++ b/src/lembas/web/static/css/admin.css @@ -451,6 +451,35 @@ a.tabs__tab { text-decoration: none; } .model-list__item:first-child { padding-top: 0; } .model-list__item:last-child { border-bottom: 0; padding-bottom: 0; } +/* The models card in /settings. Every row shares the list's column tracks, so + the context sizes and the eyes line up; the description and the capability + tags take the rest of the row underneath, never the space beside the name. */ +.model-list--models { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto auto; + column-gap: var(--sp-3); +} +.model-list--models .model-list__item { + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + align-items: center; + row-gap: var(--sp-1); +} +/* Wraps rather than truncates: there is room below, and a name cut to + "Gemma 4 E…" on a phone is a different model's name. */ +.model-list__name { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--sp-1) var(--sp-2); + min-width: 0; + overflow-wrap: anywhere; +} +.model-list__more { grid-column: 2 / -1; min-width: 0; } +.model-list__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); } +.model-list__tags:empty { display: none; } + /* --- Permission grids ------------------------------------------------------ */ .checkbox-row { display: flex; diff --git a/src/lembas/web/static/css/app.css b/src/lembas/web/static/css/app.css index 0c9695a..5bc32ca 100644 --- a/src/lembas/web/static/css/app.css +++ b/src/lembas/web/static/css/app.css @@ -1730,6 +1730,32 @@ body.is-resizing .canvas__body { pointer-events: none; } color: var(--leaf); } .picker__tick { color: var(--accent); flex: none; margin-top: 0.35rem; } + +/* The model picker: one row per model on the list's own column tracks, so the + context sizes and the eyes form columns whatever a name's length. Scoped to + the modifier because `.picker__list` is also the @-mention menu's list. */ +.picker__list--models { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto auto auto; + column-gap: var(--sp-3); +} +.picker__list--models .picker__option { + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + align-items: center; + gap: inherit; +} +.picker__list--models .picker__option .picker__avatar { margin-top: 0; } +.picker__list--models .picker__option-name { min-width: 0; } +.model-ctx { + font-size: var(--text-xs); + color: var(--ink-faint); + white-space: nowrap; +} +.model-vision { display: flex; color: var(--ink-faint); min-width: 1rem; } +.picker__list--models .picker__tick { display: flex; margin-top: 0; min-width: 1rem; visibility: hidden; } +.picker__list--models .picker__option.is-selected .picker__tick { visibility: visible; } .picker__empty { padding: var(--sp-4); margin: 0; diff --git a/src/lembas/web/templates/chat/_model_picker.html b/src/lembas/web/templates/chat/_model_picker.html index 70586bb..2a159f5 100644 --- a/src/lembas/web/templates/chat/_model_picker.html +++ b/src/lembas/web/templates/chat/_model_picker.html @@ -3,9 +3,16 @@ Model picker. A real dropdown rather than a cannot show an - image, a description or capability badges -- browsers render only text in an -