A tab bar's edge fade that stays hidden until something is off the edge

The local-attached covers were as wide as the scroll shadows and solid for
only 40% of that, so most of each shadow showed at rest -- invisible on Moria,
a grey sliver at both ends of every tab bar on Shire. The covers are now twice
the shadow's width and solid across all of it.

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

CHANGELOG.md

@@ -16,6 +16,126 @@ for 1.0.0 have something to be assembled from.
 
 ## Unreleased
 
+## 1.8.5
+
+- **No more grey slivers at the ends of the tab bars.** Tab bars fade at an edge
+  to show there are more tabs to scroll to. The fade was only partly hidden
+  when there was nothing to scroll, so a shadow always showed at both ends. It
+  was invisible on the dark theme and a grey sliver on Shire, on Administration
+  → Prompts, Settings and every other tabbed page. The fade now appears only
+  on the side where tabs are actually hidden.
+
+## 1.8.4
+
+Two things that kept showing up after they should have gone away.
+
+- **"A new version is ready" no longer appears on a page that is already the
+  new version.** After an update the toast showed up on every page, even one just
+  fetched with Ctrl+Shift+R, and reloading never made it go away. It fired
+  whenever a new service worker was waiting. But a page loaded after the update
+  already *is* the update: pages always come from the server, and every
+  stylesheet and script they name carries the release in its address. The
+  worker that waits is nearly always the one from the previous release, still
+  holding the tab, because a reload opens the new page before the old one goes
+  away. The toast now compares the waiting worker's release with the page's
+  own, so it only appears in a tab that was opened before the update. For the
+  same reason, pressing Reload in one tab no longer reloads the other tabs that
+  are already up to date. That matters when one of them has a reply streaming
+  into it.
+
+- **Switching tabs on Administration → Prompts no longer lifts the page.**
+  Choosing any tab but the first pushed the whole window up by the height of
+  the title bar and left a blank strip along the bottom, under the sidebar too.
+  The prompt cards' hidden labels were positioned against the page instead of
+  the panel. That made the page 6,771px tall behind a window that cannot scroll
+  by hand, and the tab switch then scrolled it anyway. Every scrolling area now
+  contains what is inside it, and a tab switch moves only the panel that
+  scrolls. Administration → General on a small phone had the same leak and is
+  fixed with it.
+
+## 1.8.3
+
+The model picker on a phone, which could not be read once a chat was open.
+
+- **The model menu no longer runs off the left of the screen.** Inside a chat
+  the picker sits in the middle of the top bar, with the panel buttons to its
+  right, and its menu opened from the picker's right edge — so on a phone most
+  of it was off the screen and every model's name was cut off. On a narrow
+  screen the menu now hangs from the bar itself, edge to edge, and every name is
+  whole. Wider screens are unchanged.
+
+- **Opening it on a touchscreen no longer raises the keyboard.** With more than
+  eight models the menu has a filter box, and it took the focus on opening — so
+  the keyboard came up and covered half the list you had opened it to choose
+  from. On a touchscreen the chosen model takes the focus instead; the filter is
+  one tap away. With a mouse, typing straight into the filter works as before.
+
+## 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
+instance rather than by testing: two models, one round, a question that asked for
+something to be *made*.
+
+- **A member no longer answers the question again.** Asked to pick a language and
+  write an example, the main model wrote Python; the second model gave a genuinely
+  useful critique of it — and then answered the original question itself, in a
+  different language. Nothing in its instruction said not to. It now says so:
+  *respond to what is above you; do not answer the person's original request again
+  yourself.* A member that produces a rival answer is not a second opinion, it is
+  a second first opinion, and it is what takes a round off the question.
+
+- **The model that opened the round no longer capitulates.** Told to write the
+  final answer and take what the others got right, it abandoned its own perfectly
+  good answer, wrote *"I agree that Rust is the superior choice"* with no argument
+  anywhere for why, and rewrote everything in the newcomer's language. Both
+  closing instructions now carry: *your own answer is not automatically the worse
+  one for having been written first; change your position where somebody gave you
+  a reason, and say what the reason was.*
+
+  This mattered more than it reads. All three answers were compiled: the original
+  Python was fine, the critic's Rust compiled and ran — and **the merged answer
+  that was actually delivered did not compile at all**. A crowd that ends by
+  agreeing with whoever spoke last can be worse than the model that started it.
+
+- **The bubble that opens a round now says `1 of 3` like every other one.** It was
+  the single contribution with no chip, because the crowd does not start it — the
+  composer does, and a round only begins when it finishes. So a two-model round
+  read as an ordinary reply followed by one labelled `2 of 2`, with no 1 anywhere.
+  It is stamped when the round begins, and that stamp is deliberately invisible to
+  everything that decides what happens next: fed to the scheduler it would inherit
+  the round's clock, so regenerating the opening an hour later would end the round
+  with "out of time" before anybody spoke.
+
+- Fixed: **the crowd chip was never translated.** `1 of 3`, `on the way back`,
+  `closing`, `no rounds left` and the rest were English on a Slovak instance.
+
+**Worth knowing, and not a bug:** with **two** models there is no backward pass at
+all. The way back would contain only the model that opened the round, whose turn
+*is* the close — so `crowd.disagree` never fires. You need at least three models
+before a single "do you disagree" bubble can exist.
+
 ## 1.8.0
 
 - **The crowd is where you would look for it.** In 1.6.0 the only way to add a

src/lembas/__init__.py

@@ -1,3 +1,3 @@
 """LLeMbas - a Middle-earth themed web UI for OpenAI-compatible LLM endpoints."""
 
-__version__ = "1.8.0"
+__version__ = "1.8.5"

src/lembas/services/chat.py

@@ -588,7 +588,10 @@ def build_request(
     if crowd_turn is None and upto is not None:
         from lembas.services import crowd as crowd_service
 
-        crowd_turn = crowd_service.state_of(upto)
+        # `scheduling_state`: the opening reply carries a stamp for the chip's
+        # sake, and regenerating it must still build an ordinary first answer --
+        # not one told that "the answers above are quoted, yours comes next".
+        crowd_turn = crowd_service.scheduling_state(upto)
     # Images are only sent to a model an administrator has marked as having
     # vision. Sending them to one that has not is not a graceful degradation:
     # most endpoints reject the whole request.

src/lembas/services/crowd.py

@@ -134,6 +134,41 @@ def state_of(message: Message | None) -> Turn | None:
         return None
 
 
+def is_opening(state: Turn | None) -> bool:
+    """Whether this state is the main model's opening reply.
+
+    `phase=out, index=0` is **display state and never scheduling state**. The
+    opening reply is not started by the crowd -- the composer starts it, exactly
+    as it starts every other reply, and a round only begins when it *finishes*.
+    Stamping it afterwards is what lets the transcript say `1 of 3` on the bubble
+    that opened the round; before that it was the one contribution with no chip,
+    so a two-model round read as an ordinary reply followed by a crowd.
+
+    Everything that asks "is a round already in progress?" has to skip it, or the
+    stamp changes behaviour it was never meant to touch -- see `scheduling_state`.
+    """
+    return state is not None and state.phase == PHASE_OUT and state.index == 0
+
+
+def scheduling_state(message: Message | None) -> Turn | None:
+    """The round state the scheduler should act on: `state_of`, minus the opening.
+
+    Two things would break if the opening stamp were fed to `next_turn` as real
+    state, and both are silent:
+
+    * **`started_at` would be inherited on a regenerate.** Regenerating the
+      opening reply an hour later would hand `next_turn` an hour-old clock and the
+      round would stop with "out of time" before anybody spoke.
+    * **The once-per-turn gates key off "no state at all"** -- compaction, the
+      title, the unread push. A stamped opening reads as a later speaker, and each
+      of them would be skipped for the turn that is supposed to have them.
+
+    So the stamp is written where the transcript reads it and nowhere else.
+    """
+    state = state_of(message)
+    return None if is_opening(state) else state
+
+
 def now_stamp() -> str:
     return datetime.now(UTC).isoformat()
 
@@ -374,9 +409,11 @@ __all__ = [
     "Turn",
     "elapsed",
     "is_newest",
+    "is_opening",
     "member_speakers",
     "next_turn",
     "now_stamp",
+    "scheduling_state",
     "state_of",
     "tool_defs",
     "unreachable_members",

src/lembas/services/generation.py

@@ -661,7 +661,10 @@ async def _run(generation: Generation) -> None:
             # once, here, and used for three decisions: which tools it may have,
             # which instruction closes its request, and whether it may ask for
             # another round.
-            crowd_state = crowd_service.state_of(message)
+            # `scheduling_state` for the reason `build_request` gives: the
+            # opening reply's stamp is for the transcript, and regenerating it
+            # must not hand it a member's tools or a member's instruction.
+            crowd_state = crowd_service.scheduling_state(message)
             crowd_settings = settings_store.crowd(db)
             may_ask_again = bool(
                 crowd_state is not None
@@ -2232,7 +2235,11 @@ def _advance_crowd(generation: Generation) -> bool:
             speakers = crowd_service.member_speakers(db, chat, owner_user)
             speakers = speakers[: int(settings["max_models"]) + 1]
 
-            state = crowd_service.state_of(message)
+            # `scheduling_state` and not `state_of`: the opening reply carries a
+            # stamp for the transcript's sake (so it can say `1 of 3`), and that
+            # stamp must not read as "a round is already running" -- it would
+            # inherit the old clock on a regenerate. See `crowd.is_opening`.
+            state = crowd_service.scheduling_state(message)
             # The turn a round belongs to: the user message this all answers.
             turn_id = state.turn if state is not None else _turn_anchor(db, message)
             following = crowd_service.next_turn(
@@ -2254,6 +2261,22 @@ def _advance_crowd(generation: Generation) -> bool:
                 db.commit()
                 return False
 
+            if state is None:
+                # The round begins here, so stamp the reply that opened it. It is
+                # the only contribution that is not started by the crowd, and
+                # before this it was the only one with no chip -- which made a
+                # two-model round read as an ordinary reply followed by a crowd,
+                # and left the reader counting "2 of 2" with no 1 in sight. Same
+                # turn and same `started_at`, so the bubbles group.
+                message.crowd_json = crowd_service.Turn(
+                    turn=following.turn,
+                    round=following.round,
+                    phase=crowd_service.PHASE_OUT,
+                    index=0,
+                    of=following.of,
+                    started_at=following.started_at,
+                ).as_json()
+
             speaker = speakers[following.index]
             placeholder = chat_service.create_message(
                 db,
@@ -2281,10 +2304,14 @@ def _opens_the_turn(message: Message) -> bool:
     """Whether this reply is the first one answering a question.
 
     True for every ordinary reply, and for a crowd only for the main model's
-    opening turn -- which is the one with no crowd state on it at all, because a
-    round begins when that reply *finishes*.
+    opening turn. That reply has no crowd state while it is being written -- a
+    round begins when it *finishes* -- and once the round has begun it carries the
+    opening stamp, which `is_opening` reads as "still the one that opens the
+    turn". Both are the same answer to this question, and missing the second means
+    a reply that has already been compacted-for and titled gets it again on the
+    next look.
     """
-    return crowd_service.state_of(message) is None
+    return crowd_service.scheduling_state(message) is None
 
 
 def _opens_the_turn_id(generation: Generation) -> bool:

src/lembas/services/prompts.py

@@ -2023,17 +2023,28 @@ BUILTIN: tuple[Fragment, ...] = (
         group=GROUP_TASKS,
         order=451,
         hint="Added as the last turn when a member speaks on the forward pass. "
-        "The failure to word against is a member that repeats what has already "
-        "been said in different words, which is what makes a crowd feel like an "
-        "echo rather than a second opinion.",
+        "Two failures to word against. One is a member that repeats what has "
+        "already been said in different words, which makes a crowd an echo "
+        "rather than a second opinion. The other only shows up on a request that "
+        "asks for something to be *made* -- write this, pick one, draft that -- "
+        "where a member reads the original instruction as addressed to it too "
+        "and produces a rival answer beside its critique. That is not a second "
+        "opinion either; it is two first opinions, and it is what sends a round "
+        "off the question.",
         default=(
             "You are one of several models answering this. The answers above are "
             "quoted with the name of whoever wrote them; yours comes next.\n"
             "\n"
+            "Respond to what is above you. Do not answer the person's original "
+            "request again yourself — that has been done, and your turn is about "
+            "what was done with it.\n"
+            "\n"
             "Add what is missing, correct what is wrong, and say what you would "
-            "have done differently. Do not restate what has already been said to "
-            "show that you agree with it — if you have nothing to add, say so in "
-            "one line and stop. Be brief: somebody is reading all of these."
+            "have done differently and why. Where you would have made a different "
+            "choice, say what it would buy — naming an alternative is not the same "
+            "as giving a reason to prefer it. Do not restate what has already been "
+            "said to show that you agree with it — if you have nothing to add, say "
+            "so in one line and stop. Be brief: somebody is reading all of these."
         ),
     ),
     Fragment(
@@ -2066,11 +2077,23 @@ BUILTIN: tuple[Fragment, ...] = (
         "round. Its own fragment rather than a sentence inside the one below, "
         "because inviting a choice a model cannot express is worse than not "
         "offering it: on a model without the tools capability there is no "
-        "crowd_again to call, and that is the case the next fragment covers.",
+        "crowd_again to call, and that is the case the next fragment covers.\n"
+        "\n"
+        "The failure to word against is capitulation: the model that opened the "
+        "round abandoning its own answer because somebody spoke after it. A "
+        "closing turn told only to synthesise will follow the last speaker, "
+        "which is how a crowd ends up less accurate than the model that started "
+        "it.",
         default=(
             "You opened this and you are closing it. The others have answered and "
             "have had the chance to disagree.\n"
             "\n"
+            "Your own answer is not automatically the worse one for having been "
+            "written first. Change your position where somebody gave you a reason, "
+            "and say what the reason was; agreement with no argument behind it is "
+            "not a reason, and neither is a member having moved on to something "
+            "else.\n"
+            "\n"
             "Write the answer the person actually asked for. Take what the others "
             "got right, say where you disagree with them and why, and name "
             "anything still unresolved rather than papering over it. Attribute "
@@ -2091,11 +2114,18 @@ BUILTIN: tuple[Fragment, ...] = (
         "is reached, or this model has no tools and so cannot ask. It says the "
         "answer has to be final rather than inviting a choice that would be "
         "ignored, which is the difference between a feature and a feature that "
-        "looks like one.",
+        "looks like one. It carries the same guard against capitulation as the "
+        "fragment above, and for the same reason.",
         default=(
             "You opened this and you are closing it, and this is the last turn: "
             "there will be no further round.\n"
             "\n"
+            "Your own answer is not automatically the worse one for having been "
+            "written first. Change your position where somebody gave you a reason, "
+            "and say what the reason was; agreement with no argument behind it is "
+            "not a reason, and neither is a member having moved on to something "
+            "else.\n"
+            "\n"
             "Write the answer the person actually asked for. Take what the others "
             "got right, say where you disagree with them and why, and attribute "
             "what you took from whom. Where the disagreement is unresolved, say so "

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",
@@ -1085,6 +1087,13 @@ MESSAGES.update(
         "%(models)s models answer each turn, over up to %(rounds)s rounds.": (
             "Na každý ťah odpovedá %(models)s modelov, a to najviac v %(rounds)s kolách."
         ),
+        "%(n)s of %(total)s": "%(n)s z %(total)s",
+        "on the way back": "na ceste späť",
+        "closing": "uzatvára",
+        "round %(n)s": "kolo %(n)s",
+        "no rounds left": "už žiadne kolá",
+        "out of time": "vypršal čas",
+        "two endpoints failed": "dva endpointy zlyhali",
         "Check for due work every": "Kontrolovať splatnú prácu každých",
         "How often it looks": "Ako často sa pozerá",
         "Nothing may repeat faster than": "Nič sa nesmie opakovať častejšie než",

src/lembas/web/static/css/admin.css

@@ -167,16 +167,24 @@ a.tabs__tab { text-decoration: none; }
   pinned to the scrollport with `background-attachment: local`, which is the old
   trick and works everywhere -- the `local` layers scroll with the content and
   cover the `scroll` ones exactly when there is nothing more to see.
+
+  ⚠ "Cover" has to mean all of it. The covers used to be as wide as the
+  shadows and solid for only 40% of that width, so the other 60% of every
+  shadow always showed through, with nothing to scroll to. On Moria that is
+  near-black on near-black and nobody saw it. On Shire it was a grey sliver at
+  both ends of every tab bar. Each cover is now twice the shadow's width and
+  solid across the first half, which is the whole shadow. It fades only past
+  the shadow's end, so once content is scrolled the shadow shows as before.
 */
 .tabs__bar {
   background-image:
-    linear-gradient(to right, var(--bg) 40%, transparent),
-    linear-gradient(to left, var(--bg) 40%, transparent),
+    linear-gradient(to right, var(--bg) 50%, transparent),
+    linear-gradient(to left, var(--bg) 50%, transparent),
     linear-gradient(to right, var(--scrim), transparent 1.5rem),
     linear-gradient(to left, var(--scrim), transparent 1.5rem);
   background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
-  background-size: 1.5rem 100%;
+  background-size: 3rem 100%, 3rem 100%, 1.5rem 100%, 1.5rem 100%;
   background-attachment: local, local, scroll, scroll;
   /* A tab is a destination, so a flick should land on one rather than between
      two. */
@@ -451,6 +459,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;

src/lembas/web/static/css/app.css

@@ -452,7 +452,17 @@ input.visually-hidden[type="checkbox"] {
    child will not shrink below its content without it, so a scroller missing it
    grows its parent instead of scrolling inside it. `.thread-scroll` relied on a
    scroll container's automatic minimum size to get away with omitting it, which
-   is true and is not something the next person should have to know. */
+   is true and is not something the next person should have to know.
+
+   `position: relative` makes each scroller the containing block for what is in
+   it, and without it a `.visually-hidden` label is not in it at all. That class
+   is `position: absolute`, so with no positioned ancestor it is placed against
+   the *page*, at its static position -- six thousand pixels down the Tools
+   panel on /admin/prompts -- and the document grew to 6771px behind a root
+   that is `overflow: hidden`. Nobody can scroll that by hand, but
+   `scrollIntoView()` and `focus()` scroll every ancestor that can scroll,
+   and the root can. Switching a tab there lifted the whole shell 56px: the
+   topbar gone off the top and a strip of bare background under everything. */
 .scroll-region,
 .sidebar__scroll,
 .inspector__body,
@@ -460,6 +470,7 @@ input.visually-hidden[type="checkbox"] {
 .thread-scroll,
 .admin-scroll,
 .main > .tabs > .tabs__body {
+  position: relative;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -1377,6 +1388,23 @@ body.is-resizing .canvas__body { pointer-events: none; }
      which nothing else on the screen tells you -- gets the room back. */
   .topbar__actions .picker__label { display: none; }
 
+  /* And the menu is the bar's, not the picker's. Anchored to the picker it
+     opens `right: 0` of a button that sits mid-bar with the panel buttons to
+     its right, so a 24rem menu ran off the left edge of a 390px phone and cut
+     every name in half. Taking `position` off the picker makes the bar the
+     containing block: the menu spans the bar under it, whatever sits where --
+     up to its usual 24rem, held at the bar's right edge by the auto margin. */
+  .topbar { position: relative; }
+  .topbar__actions .picker { position: static; }
+  .topbar__actions .picker__menu {
+    left: max(var(--sp-2), var(--safe-left));
+    right: max(var(--sp-2), var(--safe-right));
+    width: auto;
+    max-width: 24rem;
+    margin-left: auto;
+  }
+  .topbar__actions .picker__list { max-height: min(22rem, 60dvh); }
+
   .sidebar {
     position: fixed;
     inset: 0 auto 0 0;
@@ -1730,6 +1758,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;

src/lembas/web/static/js/app.js

@@ -1099,27 +1099,59 @@
      The worker no longer takes over open pages on its own -- see sw.js -- so
      something has to say that one is waiting, and the reader decides. A toast
      rather than a reload: an application with a reply streaming into it must
-     not be navigated out from under somebody. */
-  function watchForUpdate(registration) {
-    function offer(worker) {
-      if (!worker || !navigator.serviceWorker.controller) return;
-      worker.addEventListener("statechange", function () {
-        if (worker.state !== "installed") return;
+     not be navigated out from under somebody.
+
+     🚨 "A worker is waiting" is not the same as "this page is out of date",
+     and the toast used to treat them as one. After a release it offered a
+     reload on every page, including one just fetched with Ctrl+Shift+R, and
+     reloading could not make it stop. A page is always fetched from the network
+     and every asset it names carries `?v=<release>`, so a page loaded after
+     the update IS the update, whichever worker happens to control it. And the
+     worker that controls it is nearly always the previous one: a reload
+     creates the new page before the old one goes away, so the old worker
+     never runs out of pages and the new one never stops waiting.
+
+     So the question is asked of the page. The worker's release is in its own
+     script URL (`/sw.js?v=`), and the page's is `window.lembasRelease` from
+     base.html. When the two match there is nothing newer to reload into, and
+     the worker is left to take over once the old tabs are closed. */
+  var PAGE_RELEASE = window.lembasRelease || "";
+
+  function releaseOf(worker) {
+    try {
+      return new URL(worker.scriptURL).searchParams.get("v") || "";
+    } catch (error) {
+      return "";
+    }
+  }
+
+  /* Unknown on either side counts as newer: better an extra offer than a
+     release nobody is told about. */
+  function isNewerThanThisPage(worker) {
+    var release = releaseOf(worker);
+    return !PAGE_RELEASE || !release || release !== PAGE_RELEASE;
+  }
+
+  function offerReload(worker) {
     window.lembas.notify(
       "A new version is ready. Reload to use it.",
       { kind: "info", action: { label: "Reload", run: function () {
         worker.postMessage({ type: "SKIP_WAITING" });
       } } }
     );
+  }
+
+  function watchForUpdate(registration) {
+    function offer(worker) {
+      if (!worker || !navigator.serviceWorker.controller) return;
+      worker.addEventListener("statechange", function () {
+        if (worker.state !== "installed") return;
+        if (isNewerThanThisPage(worker)) offerReload(worker);
       });
     }
-    if (registration.waiting && navigator.serviceWorker.controller) {
-      window.lembas.notify(
-        "A new version is ready. Reload to use it.",
-        { kind: "info", action: { label: "Reload", run: function () {
-          registration.waiting.postMessage({ type: "SKIP_WAITING" });
-        } } }
-      );
+    if (registration.waiting && navigator.serviceWorker.controller &&
+        isNewerThanThisPage(registration.waiting)) {
+      offerReload(registration.waiting);
     }
     registration.addEventListener("updatefound", function () {
       offer(registration.installing);
@@ -1130,17 +1162,24 @@
      the right answer to it -- the page is now being served by a worker whose
      cache it did not start from.
 
-     Two guards, and the second is the one that is easy to miss. A flag, because
-     `controllerchange` can fire more than once. And `hadController`, because on
-     a *first* visit there is no worker at all: the one that installs then calls
-     `clients.claim()`, which fires this event for the first time -- so without
-     it, the very first page anybody loads reloads itself in front of them for
-     no reason they could possibly work out. */
+     Three guards, and the second is the one that is easy to miss. A flag,
+     because `controllerchange` can fire more than once. And `hadController`,
+     because on a *first* visit there is no worker at all: the one that
+     installs then calls `clients.claim()`, which fires this event for the
+     first time -- so without it, the very first page anybody loads reloads
+     itself in front of them for no reason they could possibly work out.
+
+     The third is the same question as the toast's. Somebody pressing Reload in
+     one tab activates the worker for all of them, and a tab that was already
+     rendered by that release has nothing to gain from a reload -- and may have
+     a reply streaming into it. */
   var reloading = false;
   if ("serviceWorker" in navigator) {
     var hadController = !!navigator.serviceWorker.controller;
     navigator.serviceWorker.addEventListener("controllerchange", function () {
       if (reloading || !hadController) return;
+      var controller = navigator.serviceWorker.controller;
+      if (controller && !isNewerThanThisPage(controller)) return;
       reloading = true;
       window.location.reload();
     });

src/lembas/web/static/js/ui.js

@@ -320,6 +320,11 @@
     if (filter) {
       filter.value = "";
       applyFilter(menu, "");
+    }
+    // Not on a touchscreen: focusing a text field there raises the keyboard,
+    // which covers half the list the finger came to choose from. The filter
+    // is one tap away for whoever wants it.
+    if (filter && !window.matchMedia("(hover: none)").matches) {
       filter.focus();
     } else {
       var selected = menu.querySelector(".picker__option.is-selected") ||
@@ -1128,7 +1133,19 @@ document.addEventListener("lembas:notify", function (event) {
        shrinks the document and scrollTop is clamped to the new maximum, which
        for a short panel is somewhere below everything. */
     var outer = scroller(bar);
-    if (outer && outer !== body) bar.scrollIntoView({ block: "start" });
+    if (!outer || outer === body) return;
+    /* Moved by hand, and only `outer`. `scrollIntoView` scrolls *every*
+       ancestor that can scroll, the document included -- and the document
+       could, by the height of whatever leaked out of the scroller, so a tab
+       switch lifted the whole shell and left a strip of background under it.
+       The containing block in app.css stops the leak; this stops a leak
+       anyone adds later from being turned into a visible one.
+
+       Measured from `.tabs`, not the bar: the bar is sticky, so once the page
+       is scrolled past the lede it reports the scroller's own top and the
+       sum below would come out as nothing to do. */
+    var tabs = bar.parentElement;
+    outer.scrollTop += tabs.getBoundingClientRect().top - outer.getBoundingClientRect().top;
   });
 })();
 

src/lembas/web/templates/base.html

@@ -152,6 +152,9 @@
   what `app.js` turns into a sentence on the settings page.
 #}
 <script>
+  /* The release this page was rendered by, for `app.js` to hold a waiting
+     worker up against -- see "A release that arrived while you were reading". */
+  window.lembasRelease = {{ version | tojson }};
   window.lembasWorker = { state: "unsupported" };
   if (!window.isSecureContext) {
     /* Reported separately from an outright failure: the fix is different. */

src/lembas/web/templates/chat/_message.html

@@ -88,24 +88,24 @@
          replies: a round produces more bubbles than it has models in it. #}
       <span class="badge">
         {% if crowd.get("phase") == "out" %}
-          {{ crowd.get("index", 0) + 1 }} of {{ crowd.get("of", 1) }}
+          {{ t("%(n)s of %(total)s", n=crowd.get("index", 0) + 1, total=crowd.get("of", 1)) }}
         {% elif crowd.get("phase") == "back" %}
-          on the way back
+          {{ t("on the way back") }}
         {% else %}
-          closing
+          {{ t("closing") }}
         {% endif %}
-        {% if crowd.get("round", 1) > 1 %} · round {{ crowd.get("round") }}{% endif %}
+        {% if crowd.get("round", 1) > 1 %} · {{ t("round %(n)s", n=crowd.get("round")) }}{% endif %}
       </span>
       {% if crowd.get("stopped") %}
       {# Why a round ended, where it ended. Without this a crowd that ran out of
          rounds or time simply stops, which reads as the feature failing. #}
       <span class="badge badge--warning" title="{{ t('The round ended here') }}">
         {% if crowd.get("stopped") == "rounds" %}
-          no rounds left
+          {{ t("no rounds left") }}
         {% elif crowd.get("stopped") == "time" %}
-          out of time
+          {{ t("out of time") }}
         {% else %}
-          two endpoints failed
+          {{ t("two endpoints failed") }}
         {% endif %}
       </span>
       {% endif %}

src/lembas/web/templates/chat/_model_picker.html

@@ -3,9 +3,16 @@
   Model picker.
 
   A real dropdown rather than a <select>, because a <select> cannot show an
-  image, a description or capability badges -- browsers render only text in an
-  <option>. The hidden input is what actually carries the value, so the control
-  still behaves like a form field.
+  image or an icon -- browsers render only text in an <option>. The hidden
+  input is what actually carries the value, so the control still behaves like
+  a form field.
+
+  Each option is name, context window and an eye for vision, and nothing else.
+  It listed every capability switch as a tag until 1.8.2, which is twenty
+  `tool_*` tags per model in a menu whose one job is choosing; the full list is
+  on /settings. The options share the list's column tracks (subgrid), so the
+  context sizes and the eyes line up whatever a name's length -- and every
+  option emits every slot, empty or not, or its row shifts.
 
   Inside a chat it PATCHes the chat; on /chat it navigates, because there is no
   chat row to patch yet.
@@ -31,7 +38,7 @@
     </div>
     {% endif %}
 
-    <div class="picker__list">
+    <div class="picker__list picker__list--models">
       {% for model in models %}
       <button class="picker__option {{ 'is-selected' if current_model and model.model_id == current_model.model_id }}"
               type="button" role="option"
@@ -39,23 +46,22 @@
               data-picker-value="{{ model.model_id }}"
               data-picker-search="{{ model.label|lower }} {{ model.model_id|lower }}">
         {{ model_avatar(model, cls="picker__avatar") }}
-        <span class="picker__option-body">
         <span class="picker__option-name">
-            {{ model.label }}
+          <span class="truncate">{{ model.label }}</span>
           {% if model.pinned %}{{ icon("pin", "icon--sm picker__pin") }}{% endif %}
         </span>
-          {% if model.description %}
-          <span class="picker__option-desc">{{ model.description }}</span>
-          {% endif %}
-          <span class="picker__option-tags">
-            {% for name, on in (model.capabilities_json or {}).items() %}
-              {% if on %}<span class="tag">{{ name }}</span>{% endif %}
-            {% endfor %}
+        <span class="model-ctx mono"
+              {% if model.context_length %}title="{{ t('Context window') }}: {{ model.context_length }}"{% endif %}>
+          {%- if model.context_length %}CTX {{ model.context_length|context_size }}{% endif -%}
         </span>
+        <span class="model-vision">
+          {%- if (model.capabilities_json or {}).get("vision") -%}
+            {{ icon("eye", "icon--sm") }}<span class="visually-hidden">{{ t("Sees images") }}</span>
+          {%- endif -%}
         </span>
-        {% if current_model and model.model_id == current_model.model_id %}
-          {{ icon("check", "icon--sm picker__tick") }}
-        {% endif %}
+        {# Always rendered and shown by `.is-selected`, so it follows ui.js's
+           in-place choice rather than staying on the model the page loaded with. #}
+        <span class="picker__tick">{{ icon("check", "icon--sm") }}</span>
       </button>
       {% endfor %}
     </div>

src/lembas/web/templates/partials/icons.html

@@ -135,6 +135,10 @@
     <circle cx="9" cy="10" r="1.6"/>
     <path d="m4.5 17 4.2-4.2a1.5 1.5 0 0 1 2.1 0l3 3 1.9-1.9a1.5 1.5 0 0 1 2.1 0l2 2"/>
   </symbol>
+  <symbol id="i-eye" viewBox="0 0 24 24">
+    <path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/>
+    <circle cx="12" cy="12" r="3"/>
+  </symbol>
   <symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 19V6M6 12l6-6 6 6"/></symbol>
   <symbol id="i-arrow-down" viewBox="0 0 24 24"><path d="M12 5v13M6 12l6 6 6-6"/></symbol>
   <symbol id="i-star" viewBox="0 0 24 24">

src/lembas/web/templates/settings.html

@@ -145,23 +145,35 @@
             <div class="card">
               <h2 class="card__title">{{ t("Available to you") }}</h2>
               <p class="card__lede">{{ t("In the order an administrator arranged them.") }}</p>
-              <ul class="model-list">
+              {# Name, context window and vision on one line, on the list's
+                 column tracks so they line up down the card; the capability
+                 switches wrap underneath at the full width. They sat beside
+                 the name until 1.8.2 and, twenty tags long, squeezed it to a
+                 word per line and ran over it. #}
+              <ul class="model-list model-list--models">
                 {% for model in models %}
                 <li class="model-list__item">
-                  <div class="row" style="gap: var(--sp-2); min-width: 0">
                   {{ model_avatar(model, cls="nav-item__avatar") }}
-                    <div style="min-width: 0">
-                      <strong>{{ model.label }}</strong>
-                      {% if model.description %}
-                      <div class="text-xs faint">{{ model.description }}</div>
-                      {% endif %}
-                    </div>
-                  </div>
-                  <div class="btn-row">
-                    {% for name, on in (model.capabilities_json or {}).items() %}
-                      {% if on %}<span class="badge badge--leaf">{{ name }}</span>{% endif %}
-                    {% endfor %}
+                  <strong class="model-list__name">
+                    <span>{{ model.label }}</span>
                     {% if model.pinned %}<span class="badge">{{ t("pinned") }}</span>{% endif %}
+                  </strong>
+                  <span class="model-ctx mono"
+                        {% if model.context_length %}title="{{ t('Context window') }}: {{ model.context_length }}"{% endif %}>
+                    {%- if model.context_length %}CTX {{ model.context_length|context_size }}{% endif -%}
+                  </span>
+                  <span class="model-vision">
+                    {%- if (model.capabilities_json or {}).get("vision") -%}
+                      {{ icon("eye", "icon--sm") }}<span class="visually-hidden">{{ t("Sees images") }}</span>
+                    {%- endif -%}
+                  </span>
+                  {% if model.description %}
+                  <div class="model-list__more text-xs faint">{{ model.description }}</div>
+                  {% endif %}
+                  <div class="model-list__more model-list__tags">
+                    {%- for name, on in (model.capabilities_json or {}).items() -%}
+                      {%- if on %}<span class="tag">{{ name }}</span>{% endif -%}
+                    {%- endfor -%}
                   </div>
                 </li>
                 {% endfor %}

src/lembas/web/templating.py

@@ -63,6 +63,26 @@ def stable_hue(value: str) -> int:
 
 templates.env.filters["stable_hue"] = stable_hue
 
+
+def context_size(tokens: int | None) -> str:
+    """A context window as a model list shows it: 131072 -> "131K".
+
+    Decimal thousands, because that is how the number is quoted everywhere a
+    person reads it, and a picker that said "128K" for a 131072-token model
+    would disagree with the admin page's own figure. Empty for an unknown size,
+    so the column slot is still emitted and the next row does not shift.
+    """
+    if not tokens or tokens <= 0:
+        return ""
+    if tokens < 1000:
+        return str(tokens)
+    if tokens < 1_000_000:
+        return f"{round(tokens / 1000)}K"
+    return f"{tokens / 1_000_000:.1f}".removesuffix(".0") + "M"
+
+
+templates.env.filters["context_size"] = context_size
+
 # A user's own message: escaped here and marked up, so `@mentions` read as
 # references rather than as punctuation. A filter rather than a context value
 # because the message templates are included from four different handlers and

tests/test_crowd_chain.py

@@ -177,6 +177,73 @@ def test_the_round_is_recorded_on_every_row(db, started):
     assert len(anchors) == 1
 
 
+def test_the_reply_that_opened_the_round_is_stamped_too(db, started):
+    """The opening bubble says `1 of 3` like every other one.
+
+    It is the one contribution the crowd does not start -- the composer does --
+    so until the round begins there is nothing to stamp it with. Before this, a
+    two-model round rendered as an unmarked reply followed by one saying `2 of 2`,
+    with no 1 anywhere.
+    """
+    chat = _crowd_chat(db)
+    opening = _opening_reply(db, chat)
+    assert crowd_service.state_of(opening) is None, "nothing to say before it finishes"
+
+    assert _advance(db, chat, opening)
+    db.expire_all()
+
+    state = crowd_service.state_of(opening)
+    assert state is not None
+    assert (state.phase, state.index) == (crowd_service.PHASE_OUT, 0)
+    assert state.of == 3
+
+
+def test_the_opening_stamp_belongs_to_the_same_round(db, started):
+    chat = _crowd_chat(db)
+    opening = _opening_reply(db, chat)
+    order = []
+    assert _advance(db, chat, opening)
+    db.expire_all()
+    order = _incomplete(db, chat)
+
+    opened = crowd_service.state_of(opening)
+    first = crowd_service.state_of(order[0])
+    # Same question, same clock -- or the chips group two bubbles of one round
+    # under two different rounds.
+    assert opened.turn == first.turn
+    assert opened.started_at == first.started_at
+    assert opened.round == first.round == 1
+
+
+def test_the_opening_stamp_is_not_scheduling_state(db, started):
+    """It must read as "no round yet" everywhere that decides what happens next.
+
+    Fed to the scheduler it would be a member at index 0, which inherits the old
+    `started_at` -- so regenerating the opening an hour later would end the round
+    with "out of time" before anybody spoke -- and it would hand that reply a
+    member's tools and a member's instruction instead of an ordinary first answer.
+    """
+    chat = _crowd_chat(db)
+    opening = _opening_reply(db, chat)
+    assert _advance(db, chat, opening)
+    db.expire_all()
+
+    assert crowd_service.state_of(opening) is not None
+    assert crowd_service.scheduling_state(opening) is None
+    assert crowd_service.is_opening(crowd_service.state_of(opening))
+    assert generation_service._opens_the_turn(opening)
+
+
+def test_a_later_speaker_is_not_mistaken_for_the_opening(db, started):
+    chat = _crowd_chat(db)
+    order = _run_round(db, chat, started)
+    for message in order:
+        state = crowd_service.state_of(message)
+        assert not crowd_service.is_opening(state)
+        # `==` and not `is`: `state_of` builds a fresh Turn on every call.
+        assert crowd_service.scheduling_state(message) == state
+
+
 def test_each_speaker_carries_its_own_connection(db, started):
     """So `speaker_for` resolves the pair rather than guessing at the id."""
     chat = _crowd_chat(db)

tests/test_crowd_ui.py

@@ -281,6 +281,31 @@ def test_a_bubble_on_the_way_out_says_which_speaker_it_is(db):
     assert "2 of 3" in html
 
 
+def test_the_bubble_that_opened_the_round_says_it_is_first(db):
+    """The opening reply is stamped once the round begins, so it says `1 of 3`.
+
+    Before that it was the one contribution with no chip at all, which made a
+    two-model round read as an ordinary answer followed by one labelled `2 of 2`.
+    """
+    chat = _chat(db)
+    html = _bubble(db, chat, phase=crowd_service.PHASE_OUT, index=0, of=3)
+    assert "1 of 3" in html
+
+
+def test_the_chip_is_translated(db):
+    """It is prose a person reads, and it was English on a Slovak instance."""
+    from lembas.web import i18n
+
+    chat = _chat(db)
+    i18n.activate("sk")
+    try:
+        html = _bubble(db, chat, phase=crowd_service.PHASE_BACK, index=1, of=3)
+    finally:
+        i18n.activate("en")
+    assert "na ceste späť" in html
+    assert "on the way back" not in html
+
+
 def test_a_bubble_on_the_way_back_says_so_and_is_quieter(db):
     chat = _chat(db)
     html = _bubble(db, chat, phase=crowd_service.PHASE_BACK)

tests/test_layout_bounds.py

@@ -208,3 +208,19 @@ def test_the_desktop_minimum_is_still_declared():
     for token in ("--terminal-width-min", "--canvas-width-min"):
         assert f"{token}:" in TOKENS
         assert f"var({token})" in APP_CSS
+
+
+def test_the_topbar_model_menu_belongs_to_the_bar_on_a_phone():
+    """1.8.3. Anchored to the picker, the menu opened `right: 0` of a button that
+    sits mid-bar with the panel buttons to its right, so on a 390px phone a 24rem
+    menu started 132px left of the screen and every model's name was cut off.
+
+    Below the phone breakpoint the picker gives up `position`, which makes the bar
+    the containing block, and the menu is pinned between the bar's two edges."""
+    body = _media_body(APP_CSS, "48rem")
+    assert re.search(r"\.topbar\s*\{\s*position:\s*relative", body)
+    assert re.search(r"\.topbar__actions \.picker\s*\{\s*position:\s*static", body)
+    menu = re.search(r"\.topbar__actions \.picker__menu\s*\{([^}]*)\}", body)
+    assert menu, "the topbar's menu is not placed on a phone"
+    for declaration in ("left:", "right:", "width: auto"):
+        assert declaration in menu.group(1), f"{declaration} missing from the phone menu"

tests/test_model_lists.py

@@ -0,0 +1,132 @@
+"""The two places a person reads the list of models: the chat's picker and /settings.
+
+Until 1.8.2 both printed every capability switch as a tag -- twenty `tool_*`
+entries per model -- and in /settings the tags sat beside the name and squeezed
+it to a word per line underneath them. The picker is now name, context window
+and an eye for vision; /settings keeps the tags, underneath.
+
+The layout is by construction (the rows share the list's column tracks), and
+that only holds while every row emits every slot, so a model with no context
+length and no vision is asserted to still have both cells.
+"""
+
+from __future__ import annotations
+
+import re
+
+import pytest
+
+from lembas.db.models import Connection, Model
+from lembas.services.crypto import encrypt
+from lembas.web.templating import context_size
+
+
+@pytest.mark.parametrize(
+    ("tokens", "shown"),
+    [
+        (None, ""),
+        (0, ""),
+        (512, "512"),
+        (4096, "4K"),
+        (32768, "33K"),
+        (131072, "131K"),
+        (262144, "262K"),
+        (1_000_000, "1M"),
+        (1_048_576, "1M"),
+        (2_000_000, "2M"),
+        (1_500_000, "1.5M"),
+    ],
+)
+def test_a_context_window_is_shortened_the_way_it_is_quoted(tokens, shown):
+    assert context_size(tokens) == shown
+
+
+@pytest.fixture
+def models(db, registered):
+    connection = Connection(
+        name="Test", base_url="http://127.0.0.1:1", api_key_encrypted=encrypt("")
+    )
+    db.add(connection)
+    db.commit()
+    db.add_all(
+        [
+            Model(
+                connection_id=connection.id,
+                model_id="sees",
+                display_name="Sees",
+                position=0,
+                context_length=131072,
+                capabilities_json={"vision": True, "tools": True, "tool_fetch": True},
+            ),
+            Model(
+                connection_id=connection.id,
+                model_id="blind",
+                display_name="Blind",
+                position=1,
+                capabilities_json={"tools": True, "tool_fetch": True},
+            ),
+        ]
+    )
+    db.commit()
+
+
+def _options(html: str) -> dict[str, str]:
+    """The model picker's options by model id -- not the @-mention menu's."""
+    found = {}
+    for body in re.findall(r'<button class="picker__option\b.*?</button>', html, re.S):
+        value = re.search(r'data-picker-value="([^"]+)"', body)
+        if value:
+            found[value.group(1)] = body
+    return found
+
+
+def test_the_picker_shows_name_context_and_vision_and_no_tags(client, models):
+    html = client.get("/chat?model=sees").text
+    options = _options(html)
+    assert set(options) == {"sees", "blind"}
+
+    sees = options["sees"]
+    assert "Sees" in sees
+    assert "CTX 131K" in sees
+    assert "#i-eye" in sees
+    assert 'class="tag"' not in sees
+    assert "tool_fetch" not in sees
+
+
+def test_every_picker_row_emits_every_slot(client, models):
+    blind = _options(client.get("/chat?model=sees").text)["blind"]
+    assert "#i-eye" not in blind
+    assert "CTX" not in blind
+    slots = ("picker__avatar", "picker__option-name", "model-ctx", "model-vision", "picker__tick")
+    for slot in slots:
+        assert slot in blind, slot
+
+
+def test_settings_lists_the_models_with_their_tags_below_the_name(client, models):
+    html = client.get("/settings").text
+    listing = html[html.index('class="model-list model-list--models"'):]
+    listing = listing[: listing.index("</ul>")]
+    assert listing.count('class="model-list__item"') == 2
+    assert "CTX 131K" in listing
+    assert listing.count("#i-eye") == 1
+    assert listing.count('class="model-list__more model-list__tags"') == 2
+    assert "tool_fetch" in listing
+
+
+def test_opening_the_picker_on_a_touchscreen_does_not_raise_the_keyboard():
+    """1.8.3. With more than eight models the menu has a filter, and `open()`
+    focused it -- which on a phone raises the keyboard over half the list the
+    finger came to choose from. The focus is gated on `(hover: none)`, the same
+    query the stylesheet uses for touch."""
+    from pathlib import Path
+
+    import lembas
+
+    js = (Path(lembas.__file__).parent / "web/static/js/ui.js").read_text(encoding="utf-8")
+    start = js.index("function open(picker)")
+    body = js[start : js.index("function applyFilter", start)]
+    assert "filter.focus()" in body, "the filter is no longer focused anywhere -- test is blind"
+    gated = r'if \(filter && !window\.matchMedia\("\(hover: none\)"\)\.matches\)\s*\{'
+    assert re.search(gated + r"\s*filter\.focus\(\)", body), (
+        "the filter is focused on open without asking whether this is a touchscreen"
+    )

tests/test_pwa.py

@@ -311,3 +311,33 @@ def test_the_worker_precaches_what_a_page_will_ask_for():
     source = (STATIC_DIR / "js" / "sw.js").read_text()
     assert 'path + "?v=" + VERSION' in source
     assert "versioned(path)" in source
+
+
+def test_the_update_offer_asks_whether_this_page_is_older(client: TestClient, registered):
+    """After a release the toast offered a reload on every page, including one
+    just fetched with Ctrl+Shift+R, and reloading never made it go away. It
+    fired whenever a worker was waiting. But a page loaded after the update
+    already IS the update: it comes from the network, and every asset it names
+    carries `?v=`. The worker that waits is nearly always the previous one,
+    still holding the tab, because a reload never lets it run out of pages.
+
+    So the offer, and the automatic reload when another tab accepts it, compare
+    the worker's release with the page's own. Driven under Node against stubs
+    before committing: 1.8.3 offered a reload to a current page and to a page
+    that another tab's Reload had just made current. This does neither, and
+    still offers it to a page from an older release.
+    """
+    import re
+
+    import lembas
+
+    page = client.get("/chat").text
+    assert f"window.lembasRelease = \"{lembas.__version__}\";" in page
+
+    source = (STATIC_DIR / "js" / "app.js").read_text()
+    code = re.sub(r"/\*.*?\*/", "", source, flags=re.S)
+    start = code.index("function watchForUpdate")
+    block = code[start : code.index("navigator.serviceWorker.ready.then(watchForUpdate)")]
+    # Both ways a waiting worker is found, and the controllerchange reload.
+    assert block.count("isNewerThanThisPage(") == 3
+    assert 'searchParams.get("v")' in code

tests/test_ui_js.py

@@ -177,6 +177,48 @@ def test_the_tab_reset_finds_the_container_that_actually_scrolls():
     assert "scrollHeight > " in SOURCE
 
 
+def test_a_tab_switch_moves_only_the_container_that_scrolls():
+    """Switching a tab on /admin/prompts lifted the whole shell 56px, with the
+    topbar gone off the top and a strip of bare background under everything.
+
+    Two halves, and either one alone is enough to bring it back. The prompt
+    cards' `.visually-hidden` labels are `position: absolute`. With no
+    positioned ancestor they were placed against the page and stretched the
+    document to 6771px behind an `overflow: hidden` root. And the handler used
+    `scrollIntoView`, which scrolls every ancestor that can scroll, the root
+    included. Measured in headless Chromium at 1640x930 before and after.
+    """
+    app = (ROOT / "web/static/css/app.css").read_text(encoding="utf-8")
+    start = app.index(".scroll-region,")
+    rule = app[start : app.index("}", start)]
+    assert ".admin-scroll" in rule
+    assert "position: relative" in rule
+
+    code = re.sub(r"/\*.*?\*/", "", SOURCE, flags=re.S)
+    start = code.index('closest(".tabs__bar")')
+    handler = code[start : code.index("})();", start)]
+    assert "scrollIntoView" not in handler
+    assert "outer.scrollTop" in handler
+
+
+def test_the_tab_bar_edge_fade_is_covered_when_nothing_overflows():
+    """The covers were as wide as the shadows and solid for only 40% of that,
+    so 60% of each shadow showed through with nothing to scroll to. On Shire
+    that was a grey sliver at both ends of every tab bar. A cover has to be
+    solid across the whole shadow. Measured in headless Chromium on
+    /admin/prompts and /settings in both themes before and after.
+    """
+    admin = (ROOT / "web/static/css/admin.css").read_text(encoding="utf-8")
+    start = admin.index("background-attachment: local, local, scroll, scroll")
+    block = admin[admin.rindex(".tabs__bar {", 0, start) : start]
+    cover = re.search(r"linear-gradient\(to right, var\(--bg\) (\d+)%, transparent\)", block)
+    shadow = re.search(r"var\(--scrim\), transparent ([\d.]+)rem", block)
+    sizes = re.search(r"background-size: ([\d.]+)rem 100%, [\d.]+rem 100%, ([\d.]+)rem 100%", block)
+    assert cover and shadow and sizes, "the edge-fade rule changed shape; re-check it by eye"
+    solid = float(sizes.group(1)) * int(cover.group(1)) / 100
+    assert solid >= float(shadow.group(1)) == float(sizes.group(2))
+
+
 def test_the_two_ends_of_the_shell_stay_level():
     """The sidebar footer and the composer sit either side of the same vertical
     edge and are both content-sized, so without a common floor they end at