An effort the model had never heard of

Reported from a live instance, on Bonsai:

  Jinja Exception: Unexpected reasoning effort high. Supported types are
  xhigh (default), medium, and low.

Effort goes out two ways because no single field works, and the second --
chat_template_kwargs -- is not a parameter the server interprets. It is
rendered into the model's own chat template, which does not ignore a value it
does not know: it calls raise_exception, and the request dies before a token.
So a perfectly ordinary option, drawn by this application in its own menu, took
the whole reply with it.

The vocabulary is per model and nobody agrees. gpt-oss takes low/medium/high.
Bonsai takes low/medium/xhigh and refuses high. OpenAI has added minimal, xhigh
and max at different points, and which of them a given model accepts varies
again. One global tuple was going to be wrong for somebody whatever it held.

A model carries its own list now, and the picker, the slash command and the
request builder all read it. A column rather than a key in capabilities_json,
for the reason context_length is one: that dict is rebuilt wholesale from the
submitted checkboxes on every save.

And it corrects itself. A refusal retries the reply once without the effort
rather than losing it -- safe only because the template renders before any
token, so nothing has been emitted, and there is a guard that keeps it that way
-- then narrows the model's list. Bonsai's error states what it does take, so
that is what gets stored.

Note the parser bug, because it is a good one: "high" is a substring of
"xhigh", so reading the advertised list by substring learned `high` from a
sentence explaining that `high` is the problem. Whole words now, with a test
named after it.

/effort reads its levels off the picker instead of a second copy of the list
kept in the browser.

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

CHANGELOG.md

@@ -16,6 +16,177 @@ for 1.0.0 have something to be assembled from.
 
 ## Unreleased
 
+## 1.2.0
+
+- Fixed: **choosing a reasoning effort could kill the reply outright**, with a
+  Jinja traceback where the answer should have been. Reasoning effort is sent
+  two ways, and the second — `chat_template_kwargs` — is rendered into the
+  model's own chat template, which does not ignore a value it has never heard
+  of: it raises, and the whole request fails. The catch is that the vocabulary
+  is **not the same for every model**. gpt-oss takes `low/medium/high`; Bonsai
+  takes `low/medium/xhigh` and refuses `high`; OpenAI has added `minimal`,
+  `xhigh` and `max` at various points. This application offered the same three
+  to everything, so on some models the top setting was one the model would
+  throw for.
+- **A model now has its own list of the efforts it accepts**, on its page under
+  Models, and the composer's picker and `/effort` offer only those. Tick none
+  and the familiar three are used, which is right for nearly everything.
+- **And it corrects itself.** If an endpoint refuses an effort anyway — a model
+  swapped underneath a name, a runtime upgraded — that reply is retried once
+  without it instead of being lost, and the model's list is narrowed so the
+  menu stops offering something that does not work. Where the endpoint says
+  what it *does* take, that is what gets stored.
+- `/effort` now reads the levels from the picker rather than from a second copy
+  of the list kept in the browser, so the two can no longer disagree about what
+  a valid effort is.
+
+## 1.1.2
+
+Two things a phone found that 1.1.0's phone pass had not.
+
+- Fixed: **the administration area could not be navigated on a phone.** Admin
+  has a nav of its own rather than the chat sidebar, and 1.1.0 gave every
+  sidebar the drawer behaviour — starts closed, slides in — without giving that
+  one any of the drawer's furniture. So it sat off-screen with no button to open
+  it, no close, and nothing to tap beside it: every administration page was
+  reachable and then a dead end. It now opens, closes and dims the page like the
+  other one, and a test refuses any future sidebar that cannot be opened.
+- Fixed: **the chat gave nearly a quarter of a phone screen to margins**, so
+  anything that could not wrap had to be scrolled to sideways. The thread's side
+  padding is halved, and the speaker's avatar moves above the turn instead of
+  sitting in a 44px column beside every line of it — a code block gained about
+  sixty pixels of readable width.
+- Fixed: **the chat's title was squeezed to nothing.** The row's designated
+  shrinker is hidden below a tablet width, so on a phone the controls went rigid
+  and asked for 317 pixels of a 390 pixel bar; the heading was not truncated, it
+  simply stopped occupying space. The model picker gives now, and on a phone it
+  shows its avatar rather than its name — the name is one tap away and the
+  title is not.
+- Tick boxes and the smaller buttons are big enough to hit on a phone. A
+  checkbox is drawn by the browser at about sixteen pixels whatever the type
+  around it, which made it the smallest target in the application by some way,
+  and the admin lists are mostly checkboxes.
+- Fixed: **icon buttons could be squashed below their own size.** The sidebar
+  toggle measured eighteen pixels across on a phone, under half its target,
+  because a full row shrank the button rather than the text beside it.
+
+## 1.1.1
+
+One bug, and it is the one that made 1.1.0 look broken the moment you updated to
+it. If you saw a stray ✕ beside the logo on a desktop, controls that looked
+half-styled, or a page that would not scroll, this is why — and none of it was
+in the code you were running; it was the code your browser had *not* fetched.
+
+- Fixed: **updating showed you the new page drawn with the old stylesheet.**
+  Pages are always fetched fresh, while the CSS and JavaScript beside them come
+  from the cache the offline support keeps — and that cache was keyed on the
+  release while the files inside it were not. For as long as the previous
+  release's worker was still in charge, you got 1.1.0's markup over 1.0.x's
+  stylesheet: a close button meant for the phone drawer appeared on the desktop
+  with nothing to style or place it, and anything else the new layout depended
+  on was simply absent. Every asset now carries the release in its address, so
+  a new page cannot be handed an old stylesheet whatever the cache holds.
+
+  It is self-correcting: updating to this version is enough, and no cache needs
+  clearing.
+
+- The sidebar header is two slots — the name, and a rail on the right for the
+  drawer's own controls — instead of a brand with a button appended to it. The
+  close button sits in that rail, at the top right where it belongs, and a
+  second control added later lands beside it rather than pushing the name
+  around.
+
+## 1.1.0
+
+Mostly about using this on a phone, where it turns out a good deal of it could
+not be used at all.
+
+### The sidebar on a phone
+
+- Fixed: **the sidebar opened over the page on every phone, and the button that
+  closes it was underneath it.** Below a phone width the sidebar is a 280px
+  panel laid over the page; nothing ever closed it, and the only control that
+  could was in the bar behind it. It now starts closed at that width, slides in
+  when you ask for it, dims the page behind it, and closes by tapping beside it,
+  by Escape, or by its own button — which is inside the drawer, where you can
+  reach it.
+- Fixed: **seven of the eight pages with a sidebar had no way to show or hide it
+  at all.** Only the chat page ever had that button. Settings, Messages,
+  Reports, Scheduled, Library, Connections and a folder's own page did not —
+  which on a phone meant arriving at a page already covered by a panel with
+  nothing to do about it. Settings is where the Install and Notifications
+  buttons live, so this was also why they were hard to reach.
+- The toggle no longer claims the sidebar is open when it is not, which matters
+  to anyone using a screen reader.
+
+### Anything you tap
+
+- **Every control is now at least 44px on a touch screen**, instead of 36px —
+  or 28px for the small ones, which included renaming and deleting a chat, all
+  seven actions on a message, and every panel's close button. The dismiss button
+  on a notification had no size of its own at all and was about 18 by 7 pixels.
+- Fixed: **renaming or deleting a chat, and copying, editing, regenerating or
+  reading aloud a message, were impossible on a phone.** All of them appeared on
+  hover, and there is no hover on a phone; tapping the row simply opened it.
+- Fixed: **the settings tabs scrolled sideways with nothing to say so**, hiding
+  Appearance, Memory and Security off the right-hand edge of a phone screen.
+  There is a fade at the edge now, and a flick lands on a tab.
+- Installed on an iPhone, the page ran underneath the clock and the home
+  indicator. It no longer does.
+
+### Installing it
+
+- The install prompt now offers the richer dialog rather than the terse bar, and
+  a long press on the icon offers New chat, Messages and Scheduled.
+- Fixed: **a light-themed instance installed to a phone showed a near-black
+  splash screen and then opened parchment**, and every page load flashed dark
+  browser chrome before the stylesheet had run. Both follow the theme now.
+- Fixed: **a new version used to take over pages you were reading**, swapping
+  the stylesheets under an open tab while it emptied the cache they came from.
+  It waits and offers you a reload instead.
+- Fixed: the small mark beside a notification on Android was a solid grey
+  square, because the icon it used has no transparency to be cut from.
+- Fixed: notifications silently stopped working for good if the browser ever
+  replaced its own subscription, which browsers do.
+- Pages start loading a little sooner, and the two icons a launcher actually
+  crops are now kept for offline use.
+
+### Things that move
+
+- **Every request the application makes now says it is happening**, with a thin
+  bar across the top of the window. Nothing did before, so anything slower than
+  a few milliseconds looked like a click that had not registered.
+- The thinking indicator turns rather than fading, so a model that is working
+  and one that has stopped no longer look alike.
+- Dialogs, the drawer and the panels arrive and leave rather than appearing;
+  buttons answer a press; cards lift under the pointer. All of it stops if you
+  have asked your system for reduced motion.
+
+### Archiving
+
+- **A chat can be archived** — out of the list, into a group at the bottom of the
+  sidebar, and back again whenever you like. The setting behind this has existed
+  and been honoured since folders arrived; nothing had ever been able to switch
+  it on.
+
+### Smaller things
+
+- **Extra headers can be set on a connection.** They were sent with every
+  request already and no form could write them, so OpenRouter's attribution
+  headers were documented and unreachable.
+- A model is no longer told that it will hear when a background job finishes on
+  instances where that notification is switched off.
+- The guidance for asking you a question can now be edited like every other
+  piece of the prompt. It was the only one that could not be.
+- Several controls that a screen reader announced as nothing now have names, and
+  two lists that claimed to be tab strips now describe themselves honestly.
+- Borders resolve through a token like every other value, so a theme can change
+  one. They were a literal `1px` in about ninety places, which was the largest
+  patch of hard-coded value left in the stylesheets.
+- `chat.css` may now contain media queries. It was forbidden them, for a good
+  reason that had stopped applying: what the ban protected is asserted directly
+  now, which is both narrower and stronger.
+
 ## 1.0.4
 
 Six things that looked like they worked. Five of them were found by reading the

scripts/build_artwork.py

@@ -53,6 +53,7 @@ SERVED_BY_APP = (
     "icon-512.png",
     "icon-maskable-512.png",
     "apple-touch-icon-180.png",
+    "badge-72.png",
 )
 
 FONT_SEMIBOLD = Path("/usr/share/fonts/adobe-source-serif/SourceSerif4Display-Semibold.otf")
@@ -423,6 +424,28 @@ def build_apple_touch_icon() -> bytes:
     return _rasterise(_framed_mark("iios", background=NIGHT_MID, inset=0.06), 180)
 
 
+def build_badge() -> bytes:
+    """The small mark beside a notification in the Android status bar.
+
+    A badge is used as a *mask*: the device keeps the alpha channel and throws
+    every colour away. So this is the leaf as a solid silhouette on nothing --
+    no gradients, no rim, no veins, none of which would survive, and a plate
+    behind it least of all. The application used `icon-192.png` here, which is
+    opaque to its edges, so what Android drew was a grey square.
+
+    72px because that is the size Android asks for, and small enough that the
+    blade alone is the only part that still reads.
+    """
+    return _rasterise(
+        f"""{HEADER} viewBox="0 0 64 64" width="64" height="64"
+     role="img" aria-label="LLeMbas">
+  <path d="{LEAF_BLADE}" fill="#FFFFFF"/>
+</svg>
+""",
+        72,
+    )
+
+
 def _mountains(width: float, base_y: float, seed: int, height: float, colour: str) -> str:
     """One jagged ridge line spanning the full width."""
     rng = random.Random(seed)
@@ -564,6 +587,7 @@ BUILDERS = {
     "icon-512.png": build_icon_512,
     "icon-maskable-512.png": build_icon_maskable,
     "apple-touch-icon-180.png": build_apple_touch_icon,
+    "badge-72.png": build_badge,
 }
 
 

scripts/shoot.py

@@ -0,0 +1,402 @@
+"""Render LLeMbas pages in a real browser, at a real size.
+
+Run it:
+
+    python scripts/shoot.py OUTDIR [/chat,/settings]        # measure + capture
+    python scripts/shoot.py OUTDIR --manifest-screenshots   # the two the
+                                                            # manifest wants
+
+Needs a `chromium` on PATH and the development dependencies installed. It is a
+development instrument, like the Node DOM stub the JavaScript is driven under
+and like `fetch_vendor.py` -- it is not imported by the application and nothing
+in `src/` knows it exists.
+
+Not a test runner: an instrument. It renders a page through TestClient, rewrites
+every asset URL to a file:// path, and refuses to continue if even one is left
+pointing at `testserver` -- because the last harness that did this silently
+measured an unstyled document and reported all five tab panels visible at once.
+A dramatic finding that was entirely an artefact of a rewrite matching nothing.
+"""
+
+from __future__ import annotations
+
+import json
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
+
+REPO = Path(__file__).resolve().parent.parent
+sys.path.insert(0, str(REPO / "src"))
+
+# Resolved from the package that actually got imported, not from where this
+# file happens to sit. A copy of this script run from somewhere else silently
+# pointed STATIC at a directory that did not exist, every asset URL was
+# rewritten to a file:// path with nothing behind it, and the run measured an
+# unstyled document -- reporting that every page in the application overflowed
+# by thirty thousand pixels. The guard below only asked whether the URLs had
+# been rewritten, which they had.
+import lembas  # noqa: E402
+
+SRC = Path(lembas.__file__).resolve().parent.parent
+STATIC = Path(lembas.__file__).resolve().parent / "web/static"
+CHROMIUM = shutil.which("chromium") or shutil.which("chromium-browser")
+
+# Routes that are served by the app rather than mounted, so the rewrite has to
+# fetch them rather than point at a file that does not exist.
+ROUTE_ASSETS = {"/branding.css": "branding.css", "/sw.js": "sw.js"}
+
+MEASURE = """
+<script>
+window.__measure = function () {
+  var de = document.scrollingElement || document.documentElement;
+  var small = [];
+  document.querySelectorAll(
+    'button, a.btn, a.nav-item, .tabs__tab, input, select, [role=tab]'
+  ).forEach(function (el) {
+    var r = el.getBoundingClientRect();
+    if (!r.width || !r.height) return;              /* hidden */
+    if (el.closest('[hidden]')) return;
+    /* A `.visually-hidden` radio is 1x1 on purpose -- the <label> beside it is
+       the target, and that one is measured. Counting the input reports five
+       failures on a settings page whose tabs are all 44px. */
+    if (el.classList.contains('visually-hidden')) return;
+    /* Inline text inside a sentence is not a tap target in the sense this is
+       checking; it is a word you can also click. */
+    if (getComputedStyle(el).display === 'inline') return;
+    if (r.height < 40 || r.width < 40) {
+      small.push({
+        tag: el.tagName.toLowerCase(),
+        cls: el.className && el.className.toString().slice(0, 60),
+        label: (el.getAttribute('aria-label') || el.textContent || '').trim().slice(0, 30),
+        w: Math.round(r.width), h: Math.round(r.height)
+      });
+    }
+  });
+  var wide = [];
+  document.querySelectorAll('body *').forEach(function (el) {
+    var r = el.getBoundingClientRect();
+    if (r.right > window.innerWidth + 1 || r.left < -1) {
+      wide.push({
+        tag: el.tagName.toLowerCase(),
+        cls: el.className && el.className.toString().slice(0, 60),
+        left: Math.round(r.left), right: Math.round(r.right)
+      });
+    }
+  });
+  /* Which element is actually making the document bigger than the window.
+     "the page over-scrolls" is not actionable; "`.shell` is 1756px tall in an
+     844px window" is. Reported for both axes, deepest first, because the
+     outermost offender is usually just the ancestor of the real one. */
+  /* Content taller than the window inside something built to scroll is not
+     overflow, it is the point. So an element counts only when nothing between
+     it and the root can scroll in that axis -- otherwise every long settings
+     page reports its own cards as a bug and the signal is lost in them. */
+  function contained(el, axis) {
+    var prop = axis === 'y' ? 'overflowY' : 'overflowX';
+    for (var n = el.parentElement; n && n !== document.documentElement; n = n.parentElement) {
+      var o = getComputedStyle(n)[prop];
+      if (o === 'auto' || o === 'scroll' || o === 'hidden') return true;
+    }
+    return false;
+  }
+
+  function culprits(axis) {
+    var found = [];
+    document.querySelectorAll('body, body *').forEach(function (el) {
+      if (contained(el, axis)) return;
+      var r = el.getBoundingClientRect();
+      var over = axis === 'y'
+        ? r.bottom - window.innerHeight
+        : r.right - window.innerWidth;
+      if (over > 1) {
+        found.push({
+          tag: el.tagName.toLowerCase(),
+          cls: (el.className && el.className.toString().slice(0, 50)) || '',
+          over: Math.round(over),
+          size: Math.round(axis === 'y' ? r.height : r.width),
+          pos: getComputedStyle(el).position,
+          id: el.id || '',
+          parent: el.parentElement ? (el.parentElement.tagName.toLowerCase() + '.' +
+                  (el.parentElement.className || '').toString().slice(0, 30)) : '',
+          html: el.outerHTML.slice(0, 120)
+        });
+      }
+    });
+    return found.sort(function (a, b) { return b.over - a.over; }).slice(0, 8);
+  }
+
+  var shell = document.querySelector('.shell');
+  return {
+    docScrollH: de.scrollHeight,
+    innerH: window.innerHeight,
+    docScrollW: de.scrollWidth,
+    innerW: window.innerWidth,
+    bodyScrollH: document.body.scrollHeight,
+    shellH: shell ? Math.round(shell.getBoundingClientRect().height) : null,
+    shellW: shell ? Math.round(shell.getBoundingClientRect().width) : null,
+    tallCulprits: culprits('y'),
+    wideCulprits: culprits('x'),
+    /* The invariant: the application shell fills the window and the DOCUMENT
+       never scrolls *for the reader*. A document taller than the window is the
+       /settings bug -- but only when the reader can actually move it. `overflow:
+       hidden` blocks a wheel and a finger while still permitting an assignment
+       to scrollTop, so a page whose shell clips a tall descendant reports a
+       scrollHeight of thousands and scrolls for nobody. /admin/prompts does
+       exactly that, and reading the raw height called it a bug four times. */
+    documentScrolls:
+      de.scrollHeight > window.innerHeight + 1 &&
+      ["visible", "auto", "scroll"].indexOf(
+        getComputedStyle(document.documentElement).overflowY
+      ) !== -1,
+    scrollsSideways: de.scrollWidth > window.innerWidth + 1,
+    smallTargets: small.slice(0, 40),
+    smallCount: small.length,
+    overflowing: wide.slice(0, 20),
+    overflowCount: wide.length
+  };
+};
+/* Nothing is appended to the page itself. The first version of this harness
+   did exactly that, and the div it added was 960px tall -- so the very first
+   run reported that /chat over-scrolled by 960px on a phone, which was a
+   finding entirely about the instrument. The frame outside reads __measure()
+   across the boundary instead, and the page is left exactly as served. */
+</script>
+"""
+
+
+def build_client():
+    import lembas.config as config_mod
+
+    tmp = Path(tempfile.mkdtemp(prefix="lembas-shoot-"))
+    config_mod.settings.data_dir = tmp
+    config_mod.settings.secret_key = "x" * 43
+
+    from fastapi.testclient import TestClient
+
+    from lembas.db.session import init_db, session_scope
+    from lembas.main import create_app
+
+    init_db()
+    app = create_app()
+    client = TestClient(app)
+    client.post(
+        "/auth/register",
+        data={"name": "Frodo", "email": "f@example.com", "password": "mellonmellon"},
+        follow_redirects=False,
+    )
+
+    from lembas.db.models import Connection, Model
+
+    with session_scope() as db:
+        connection = Connection(
+            name="local", base_url="http://127.0.0.1:1", api_key_encrypted=""
+        )
+        db.add(connection)
+        db.flush()
+        for name in ("gemma4-moe", "qwen3-coder"):
+            db.add(Model(connection_id=connection.id, model_id=name, display_name=name))
+    return client
+
+
+def rewrite(html: str, client, assets: Path) -> str:
+    """Point every asset at a file on disk, and prove none was missed."""
+    for route, name in ROUTE_ASSETS.items():
+        response = client.get(route)
+        if response.status_code == 200:
+            (assets / name).write_text(response.text)
+
+    html = re.sub(
+        r'(?:http://testserver)?/static/([^"\'?\s>]+)(\?[^"\'\s>]*)?',
+        lambda m: f"file://{STATIC}/{m.group(1)}",
+        html,
+    )
+    html = re.sub(
+        r'(?:http://testserver)?/branding\.css(\?[^"\'\s>]*)?',
+        f"file://{assets}/branding.css",
+        html,
+    )
+
+    # Fail loudly, and only about things that decide how the page LOOKS: every
+    # `src`, and `href` on a <link>. An `href` on an anchor is a destination,
+    # not an asset -- flagging those makes the guard cry wolf on every page and
+    # a guard nobody believes is worse than none.
+    leftovers = re.findall(r'<link\b[^>]*\bhref="([^"]+)"', html)
+    leftovers += re.findall(r'\bsrc="([^"]+)"', html)
+    blocking = [
+        url
+        for url in leftovers
+        if url.startswith(("/", "http://testserver"))
+        and not url.startswith(("/branding/", "/manifest", "/sw.js"))
+    ]
+    if blocking:
+        raise SystemExit(
+            "UNREWRITTEN ASSET URLS -- this would measure an unstyled document: "
+            f"{sorted(set(blocking))[:8]}"
+        )
+
+    # And that what they were rewritten *to* is really there. A rewrite that
+    # matches and produces a dead path is indistinguishable, from inside the
+    # browser, from no stylesheet at all -- and it is the failure that actually
+    # happened, twice.
+    missing = [
+        url
+        for url in re.findall(r'(?:href|src)="file://([^"?]+)"', html)
+        if not Path(url).exists()
+    ]
+    if missing:
+        raise SystemExit(f"REWRITTEN TO NOTHING -- still an unstyled document: {missing[:5]}")
+
+        # The one-time notifications offer is a modal over the very page we came
+    # to measure, and it is gated on a localStorage key. Set it in the head, so
+    # it runs before the deferred script that reads it.
+    quiet = (
+        "<script>try{localStorage.setItem('lembas-notifications-asked','1');}"
+        "catch(e){}</script>"
+    )
+    return html.replace("</head>", quiet + MEASURE + "</head>", 1)
+
+
+def shoot(client, path: str, width: int, height: int, theme: str, outdir: Path) -> dict:
+    """One page, at one size, in one theme.
+
+    The page is rendered inside an <iframe> of exactly the target size rather
+    than into a window of it, because headless Chromium refuses to make a window
+    narrower than about 500px -- ask for 390 and you get 500, and every
+    measurement is then of a layout no phone will ever produce. A media query
+    inside an iframe evaluates against the iframe's own viewport, so this is the
+    real thing: `width: 390px` on the frame is a 390px viewport inside it.
+    """
+    response = client.get(path)
+    if response.status_code != 200:
+        raise SystemExit(f"{path} -> HTTP {response.status_code}")
+
+    assets = outdir / "assets"
+    assets.mkdir(parents=True, exist_ok=True)
+    html = response.text.replace('data-theme="moria"', f'data-theme="{theme}"')
+    html = rewrite(html, client, assets)
+
+    slug = f"{path.strip('/').replace('/', '-') or 'root'}-{theme}-{width}x{height}"
+    page = outdir / f"{slug}.html"
+    page.write_text(html)
+
+    frame = outdir / f"{slug}-frame.html"
+    frame.write_text(
+        "<!doctype html><meta charset=utf-8>"
+        "<style>html,body{margin:0;background:#888}"
+        f"iframe{{width:{width}px;height:{height}px;border:0;display:block}}</style>"
+        f'<iframe id="f" src="{page.name}"></iframe>'
+        "<div id=\"__measurements\"></div>"
+        "<script>"
+        "window.addEventListener('load',function(){setTimeout(function(){"
+        "var w=document.getElementById('f').contentWindow;"
+        "document.getElementById('__measurements').textContent="
+        "JSON.stringify(w.__measure?w.__measure():{error:'no __measure -- the page did not load'});"
+        "},600);});"
+        "</script>"
+    )
+
+    shot = outdir / f"{slug}.png"
+    common = [
+        CHROMIUM, "--headless", "--no-sandbox", "--disable-gpu",
+        "--allow-file-access-from-files", "--hide-scrollbars",
+        "--force-device-scale-factor=1",
+        f"--window-size={max(width, 520)},{height + 40}",
+        "--virtual-time-budget=4000",
+    ]
+    subprocess.run(common + [f"--screenshot={shot}", f"file://{frame}"],
+                   capture_output=True, timeout=120)
+    dom = subprocess.run(common + ["--dump-dom", f"file://{frame}"],
+                         capture_output=True, text=True, timeout=120).stdout
+
+    match = re.search(r'id="__measurements">(.*?)</div>', dom, re.S)
+    if not match or not match.group(1).strip():
+        raise SystemExit(f"no measurements for {slug} -- the frame did not report")
+    data = json.loads(match.group(1))
+    if "error" in data:
+        raise SystemExit(f"{slug}: {data['error']}")
+    data["page"] = slug
+    if data["innerW"] != width:
+        raise SystemExit(
+            f"{slug}: measured a {data['innerW']}px viewport, asked for {width}px"
+        )
+    return data
+
+
+# The two the manifest asks for. Without them Chrome on Android falls back to
+# the one-line mini-infobar instead of the install dialog with a name, an icon
+# and a picture in it -- which is the difference between an install somebody
+# chooses and one they dismiss without reading.
+MANIFEST_SHOTS = (
+    ("screenshot-narrow.png", 390, 844, "narrow"),
+    ("screenshot-wide.png", 1280, 800, "wide"),
+)
+
+
+def manifest_screenshots(client, outdir: Path) -> None:
+    """Capture the two, straight into static/img/ where the manifest names them.
+
+    A browser capture rather than something `build_artwork.py` draws: the point
+    of a screenshot is that it is what the application actually looks like, and
+    an illustration of what it looks like is the one thing it must not be.
+    """
+    try:
+        from PIL import Image
+    except ImportError:  # pragma: no cover - design-time tool
+        raise SystemExit("pillow is needed to crop the frame off a screenshot") from None
+
+    for name, width, height, _form in MANIFEST_SHOTS:
+        shoot(client, "/chat", width, height, "moria", outdir)
+        slug = f"chat-moria-{width}x{height}.png"
+        target = STATIC / "img" / name
+        # Cropped to the iframe, which sits at the origin of a zero-margin
+        # wrapper. The capture is of the *outer* document, so without this the
+        # screenshot carries the harness's own readout along its bottom edge
+        # and a strip of grey beside it -- and a manifest screenshot is the one
+        # picture of this application most people will ever see.
+        with Image.open(outdir / slug) as shot:
+            shot.crop((0, 0, width, height)).save(target)
+        print(f"wrote {target.relative_to(REPO)}")
+
+
+def main() -> None:
+    if not CHROMIUM:
+        raise SystemExit("no chromium")
+
+    if "--manifest-screenshots" in sys.argv:
+        outdir = Path(sys.argv[1]) if len(sys.argv) > 2 else Path(tempfile.mkdtemp())
+        outdir.mkdir(parents=True, exist_ok=True)
+        manifest_screenshots(build_client(), outdir)
+        return
+    outdir = Path(sys.argv[1]) if len(sys.argv) > 1 else Path("/tmp/lembas-shoot/out")
+    outdir.mkdir(parents=True, exist_ok=True)
+
+    paths = sys.argv[2].split(",") if len(sys.argv) > 2 else ["/chat", "/settings"]
+    sizes = [(390, 844), (360, 640), (1280, 800)]
+    themes = ["moria", "shire"]
+
+    client = build_client()
+    results = []
+    for path in paths:
+        for width, height in sizes:
+            for theme in themes:
+                results.append(shoot(client, path, width, height, theme, outdir))
+
+    (outdir / "results.json").write_text(json.dumps(results, indent=2))
+    for r in results:
+        flags = []
+        if r["documentScrolls"]:
+            flags.append(f"DOC-SCROLLS({r['docScrollH']}>{r['innerH']})")
+        if r["scrollsSideways"]:
+            flags.append(f"SIDEWAYS({r['docScrollW']}>{r['innerW']})")
+        if r["overflowCount"]:
+            flags.append(f"overflow:{r['overflowCount']}")
+        if r["smallCount"]:
+            flags.append(f"small-targets:{r['smallCount']}")
+        print(f"{r['page']:44} {' '.join(flags) or 'clean'}")
+
+
+if __name__ == "__main__":
+    main()

src/lembas/__init__.py

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

src/lembas/api/admin.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import logging
+import re
 from datetime import UTC, datetime
 
 from fastapi import APIRouter, Form, HTTPException, Request, Response, status
@@ -103,6 +104,25 @@ async def connections_page(request: Request, db: Db, user: AdminUser, message: s
     )
 
 
+# Header names are a narrow set on purpose: a newline would let one field write
+# a second header, and a colon in a name splits it. Anything outside it is
+# dropped rather than repaired -- a header nobody can see the effect of is worse
+# than one that is visibly missing.
+_HEADER_NAME = re.compile(r"^[A-Za-z0-9!#$%&'*+.^_`|~-]{1,64}$")
+
+
+def _parse_headers(raw: str) -> dict[str, str]:
+    """`Name: value` per line, into the dict the client sends verbatim."""
+    headers: dict[str, str] = {}
+    for line in (raw or "").splitlines()[:20]:
+        name, _, value = line.partition(":")
+        name = name.strip()
+        value = value.strip()[:500]
+        if name and value and _HEADER_NAME.match(name):
+            headers[name] = value
+    return headers
+
+
 @router.post("/connections")
 async def create_connection(
     db: Db,
@@ -145,6 +165,7 @@ async def update_connection(
     enabled: bool = Form(False),
     unload_url: str = Form(""),
     unload_method: str = Form("POST"),
+    extra_headers: str = Form(""),
 ) -> Response:
     connection = _connection(db, connection_id)
     connection.name = name.strip()[:120] or connection.name
@@ -157,6 +178,13 @@ async def update_connection(
     method = unload_method.strip().upper()
     connection.unload_method = method if method in ("GET", "POST") else "POST"
 
+    # `extra_headers_json` has been sent with every request to this endpoint
+    # since it was added and written by no form in the application, so its one
+    # documented use -- OpenRouter wants an `HTTP-Referer` and an `X-Title` --
+    # was unreachable. One `Name: value` per line, because a JSON textarea asks
+    # somebody to get braces right in a settings screen.
+    connection.extra_headers_json = _parse_headers(extra_headers)
+
     submitted = api_key.strip()
     if submitted and submitted != UNCHANGED_SENTINEL:
         connection.api_key_encrypted = encrypt(submitted)

src/lembas/api/admin_models.py

@@ -177,7 +177,11 @@ async def model_detail(
             "groups": list(db.scalars(select(Group).order_by(Group.name))),
             "capabilities": PROTOCOL_CAPABILITIES,
             "tool_capabilities": TOOL_CAPABILITIES,
+            # Every effort this application understands, so an administrator
+            # can tick the ones their model actually takes -- and the model's
+            # current answer, which is the common three until somebody says.
             "efforts": chat_service.EFFORTS,
+            "model_efforts": chat_service.efforts_for(model),
             # Rows predating the split have no tool_* keys at all. Showing them
             # unticked would be a lie: tools.enabled_tools treats absent as on
             # when `tools` is on, so that an upgrade does not silently take web
@@ -238,6 +242,7 @@ async def update_model(
     position: str = Form(""),
     context_length: str = Form(""),
     default_effort: str = Form(""),
+    reasoning_efforts: list[str] = Form(default=[]),
     group_ids: list[str] = Form(default=[]),
     capability: list[str] = Form(default=[]),
 ) -> Response:
@@ -260,9 +265,19 @@ async def update_model(
     # Merged rather than rebuilt, unlike the capabilities below: params_json
     # holds whatever sampling defaults an administrator has set and this form
     # only carries one of them.
+    # Which efforts this model takes at all. Submitted as a list of ticked
+    # values; empty means "nobody has said", and `chat.efforts_for` answers with
+    # the common three. Stored in the order `EFFORTS` declares rather than the
+    # order a browser happened to send.
+    chosen = [value for value in chat_service.EFFORTS if value in (reasoning_efforts or [])]
+    model.reasoning_efforts = chosen
+
     params = dict(model.params_json or {})
     wanted = default_effort.strip().lower()
-    if wanted in chat_service.EFFORTS:
+    # Checked against what this model takes, not against everything this
+    # application has heard of -- a default of `high` on a model whose template
+    # refuses it is a chat that fails on its first turn.
+    if wanted in chat_service.efforts_for(model):
         params["reasoning_effort"] = wanted
     else:
         params.pop("reasoning_effort", None)

src/lembas/api/chats.py

@@ -1987,6 +1987,21 @@ async def update_chat(request: Request, db: Db, user: RequiredUser, chat_id: str
         folder = db.get(Folder, wanted) if wanted else None
         chat.folder_id = folder.id if folder is not None and folder.user_id == user.id else None
 
+    # Out of the way, and reversible.
+    #
+    # `Chat.archived` has been filtered on in four places since folders arrived
+    # and written by nothing anywhere -- so the hiding worked, the archiving
+    # did not, and the column read as a built feature to anyone who grepped for
+    # it. Here rather than as its own endpoint because it is a property of the
+    # chat, exactly like its title and its folder, and `update_chat` already
+    # reads the raw form for the reason this field needs too: absent must mean
+    # "leave it alone" and "0" must mean "put it back".
+    archived_changed = False
+    if "archived" in form:
+        wanted = str(form["archived"]).strip() not in ("", "0", "false")
+        archived_changed = wanted != chat.archived
+        chat.archived = wanted
+
     # The mode is the one agent field that changes mid-chat: it decides what
     # gets asked about, not what the conversation is.
     if "agent_mode" in form:
@@ -2100,6 +2115,24 @@ async def update_chat(request: Request, db: Db, user: RequiredUser, chat_id: str
         return HTMLResponse(
             templates.get_template("chat/_title_oob.html").render({"chat": chat})
         )
+
+    # Archiving moves a row out of one group and into another, so the sidebar
+    # has to be re-rendered -- and it cannot be, from a 204. htmx's own config
+    # is `{code: "204", swap: false}`, so a control aimed at `#sidebar-tree`
+    # with this endpoint's usual answer sets the column and then does visibly
+    # nothing at all, which is this codebase's signature failure rather than a
+    # new one. The same fragment and the same `oob` the sidebar switch returns,
+    # for the same reason: New chat lives above the tree and comes along out of
+    # band.
+    if archived_changed:
+        from lembas.api.pages import sidebar_context
+
+        return templates.TemplateResponse(
+            request,
+            "partials/_sidebar_tree.html",
+            {"chat": None, "user": user, "oob": True, **sidebar_context(db, user)},
+        )
+
     return Response(status_code=status.HTTP_204_NO_CONTENT)
 
 

src/lembas/api/pages.py

@@ -10,6 +10,7 @@ from sqlalchemy import select
 from sqlalchemy.orm import Session as DBSession
 
 from lembas.api.deps import Db, RequiredUser
+from lembas.config import settings
 from lembas.db.models import (
     KIND_CHAT,
     KIND_MESSAGES,
@@ -42,6 +43,17 @@ router = APIRouter(tags=["pages"])
 THEME_COLOUR = {"moria": "#101317", "shire": "#F6F1E4"}
 
 
+def _instance_colour(brand) -> str:
+    """The background this instance paints before anything has loaded.
+
+    A custom theme sets `bg` itself; otherwise the built-in it inherits from
+    decides, which is what `data-base` means everywhere else. Falls back to
+    Moria rather than raising -- a splash screen is not worth a 500.
+    """
+    theme = brand.theme(settings.default_theme)
+    return theme.tokens.get("bg") or THEME_COLOUR.get(theme.base, THEME_COLOUR["moria"])
+
+
 def _chat_context(db: DBSession, user: User, chat: Chat | None) -> dict:
     """Model lists and permissions every chat page needs.
 
@@ -70,10 +82,12 @@ def _chat_context(db: DBSession, user: User, chat: Chat | None) -> dict:
             else []
         ),
         "attached_base_ids": [base.id for base in chat.knowledge_bases] if chat else [],
-        # The three a reasoning model understands. From the service so the
-        # command, the control and the request builder cannot disagree about
-        # what is a valid effort.
-        "efforts": chat_service.EFFORTS,
+        # What *this* model takes, not the three every model used to be assumed
+        # to take. The vocabulary is per model -- gpt-oss has no `xhigh` and
+        # Bonsai has no `high`, and sending the wrong one does not degrade, it
+        # raises inside the chat template and fails the reply. From the service
+        # so the command, the control and the request builder cannot disagree.
+        "efforts": chat_service.efforts_for(current) if current else chat_service.DEFAULT_EFFORTS,
         # What the picker shows, and what `build_request` will send. One
         # resolver so the two cannot disagree.
         "resolved_effort": chat_service.resolved_effort(chat) if chat else "",
@@ -388,9 +402,29 @@ def sidebar_context(db: DBSession, user: User) -> dict:
     unfiled = list(
         db.scalars(narrowed.order_by(Chat.pinned.desc(), Chat.updated_at.desc()))
     )
+    # The same query with the one filter inverted, and no `pinned` in the order:
+    # a pinned chat that somebody archived is one they have said two opposite
+    # things about, and the more recent instruction is the one to honour.
+    archived = list(
+        db.scalars(
+            select(Chat)
+            .where(
+                Chat.user_id == user.id,
+                Chat.archived.is_(True),
+                Chat.temporary.is_(False),
+                Chat.kind.in_((kind,) if kind else KINDS),
+            )
+            .order_by(Chat.updated_at.desc())
+        )
+    )
     return {
         "folders": folders,
         "unfiled_chats": unfiled,
+        # Archived chats are NOT narrowed to unfiled ones: a chat inside a
+        # folder disappears from that folder when it is archived (the folder's
+        # own listing has always filtered them out), so without this it would
+        # have left one list and joined none.
+        "archived_chats": archived,
         # The shortcuts at the top of the sidebar. Here rather than in
         # `_chat_context`, where they used to be, for two reasons: they are
         # sidebar content and the fragment route that re-renders the sidebar has
@@ -472,17 +506,61 @@ async def manifest(db: Db) -> Response:
     """
     brand = branding_service.for_db(db)
     icons = brand.icon_paths
+    colour = _instance_colour(brand)
     return JSONResponse(
         {
-            "id": "/",
+            # Matches `start_url`. An id is only an identity key and need not be
+            # navigable, but "/" named a path that serves nothing but a redirect
+            # while the app started somewhere else, which reads as a mistake to
+            # anyone comparing the two.
+            "id": "/chat",
             "name": brand.name,
             "short_name": brand.name[:12],
             "description": brand.tagline or "A web UI for your language models.",
+            "lang": "en",
+            "dir": "ltr",
             "start_url": "/chat",
             "scope": "/",
             "display": "standalone",
-            "background_color": THEME_COLOUR["moria"],
-            "theme_color": THEME_COLOUR["moria"],
+            # Ordered best-first: a browser takes the first it understands and
+            # falls through to `display` if it understands none of them.
+            "display_override": ["standalone", "minimal-ui"],
+            "orientation": "any",
+            "categories": ["productivity", "utilities"],
+            # Opening a link belonging to this scope focuses the window that is
+            # already open rather than making a second one.
+            "launch_handler": {"client_mode": "navigate-existing"},
+            # The launcher's long-press menu. Three destinations rather than
+            # ten: a menu nobody can read at a glance is a menu nobody opens.
+            "shortcuts": [
+                {"name": "New chat", "url": "/chat"},
+                {"name": "Messages", "url": "/messages"},
+                {"name": "Scheduled", "url": "/scheduled"},
+            ],
+            # Both follow whatever theme this instance is set up in. They were
+            # Moria's near-black regardless, so a parchment instance installed
+            # to a phone flashed a dark splash screen and then opened light --
+            # and `THEME_COLOUR["shire"]` sat beside them, defined and read by
+            # nothing. The *instance* default and not the reader's own theme:
+            # a manifest is fetched without credentials unless the link asks
+            # otherwise, so there is nobody to ask.
+            "background_color": colour,
+            "theme_color": colour,
+            # Without these, Chrome on Android offers the one-line mini-infobar
+            # rather than the install dialog that carries a name, an icon and a
+            # picture -- which is the difference between an install somebody
+            # chooses and one they swipe away without reading. Captured from the
+            # running application by `scripts/shoot.py --manifest-screenshots`,
+            # because the one thing a screenshot must not be is a drawing of
+            # what the application looks like.
+            "screenshots": [
+                {"src": "/static/img/screenshot-narrow.png", "sizes": "390x844",
+                 "type": "image/png", "form_factor": "narrow",
+                 "label": "A conversation on a phone"},
+                {"src": "/static/img/screenshot-wide.png", "sizes": "1280x800",
+                 "type": "image/png", "form_factor": "wide",
+                 "label": "A conversation, with the sidebar beside it"},
+            ],
             # An uploaded logo's derived icons, or the shipped ones. Whole-set
             # rather than per size: a manifest listing two custom icons and one
             # shipped is a launcher tile that changes when the device picks a

src/lembas/db/models/connection.py

@@ -19,7 +19,7 @@ from sqlalchemy import (
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from lembas.db.base import Base, Timestamps, UUIDPrimaryKey
-from lembas.db.types import JSONDict
+from lembas.db.types import JSONDict, JSONList
 
 if TYPE_CHECKING:
     # Import only for the annotation; at runtime SQLAlchemy resolves the
@@ -137,6 +137,20 @@ class Model(UUIDPrimaryKey, Timestamps, Base):
     # ticked anything.
     context_length: Mapped[int] = mapped_column(Integer, default=0, nullable=False)
 
+    # Which reasoning efforts this model actually accepts. Empty means "nobody
+    # has said", and `services/chat.efforts_for` answers with the common set.
+    #
+    # It has to be per model, because the vocabulary is: gpt-oss takes
+    # low/medium/high, Bonsai takes low/medium/xhigh and *raises* on high, and
+    # OpenAI's own list has grown minimal, xhigh and max at different times. A
+    # single global tuple is a guess that is wrong for somebody.
+    #
+    # ⚠ A column and not a key in `capabilities_json`, for exactly the reason
+    # `context_length` is one: that dict is rebuilt wholesale from the submitted
+    # checkboxes on every save, so anything in it that is not a checkbox is
+    # destroyed the next time an administrator ticks anything.
+    reasoning_efforts: Mapped[list[str]] = mapped_column(JSONList, default=list)
+
     connection: Mapped[Connection] = relationship(back_populates="models")
     groups: Mapped[list[Group]] = relationship(
         "Group", secondary=model_groups, back_populates="models"

src/lembas/services/chat.py

@@ -387,7 +387,15 @@ def build_request(
         ):
             body["tool_choice"] = {"type": "function", "function": {"name": force_tool}}
 
-    apply_effort(body, (chat.params_json or {}).get("reasoning_effort"))
+    # The model's own vocabulary, looked up here rather than passed in: every
+    # caller of `build_request` would otherwise have to remember, which is the
+    # trap `audio_service.template_flags` fell into.
+    chat_model = model_for(db, chat)
+    apply_effort(
+        body,
+        (chat.params_json or {}).get("reasoning_effort"),
+        efforts_for(chat_model) if chat_model is not None else None,
+    )
     return body
 
 
@@ -405,7 +413,42 @@ def build_request(
 # an effort on sends neither field and is byte-for-byte what it was. An endpoint
 # strict about unknown parameters will refuse the extra one -- but on a chat
 # somebody deliberately set an effort on, not on every chat in the instance.
-EFFORTS = ("low", "medium", "high")
+# Every reasoning effort this application understands, and the subset a model
+# gets when nobody has said otherwise.
+#
+# 🚨 These are two different questions and conflating them is what broke a
+# chat on Bonsai: `EFFORTS` was `("low", "medium", "high")` and was used both to
+# validate what somebody chose *and* to decide what to offer, so a model whose
+# vocabulary is low/medium/**xhigh** could not be given its own top setting,
+# and the one it was given -- `high` -- made its chat template call
+# `raise_exception` and took the whole reply with it.
+#
+# The known list is the union across providers, which have not agreed: OpenAI
+# has added `minimal`, `xhigh` and `max` at different points; gpt-oss takes
+# low/medium/high; Bonsai takes low/medium/xhigh and refuses high. `none` is
+# deliberately absent -- this application already spells that `off`, and two
+# spellings of off is the failure this codebase keeps cataloguing.
+EFFORTS = ("minimal", "low", "medium", "high", "xhigh", "max")
+
+# What a model is offered when its own list is empty. The three every reasoning
+# model since the first one has understood.
+DEFAULT_EFFORTS = ("low", "medium", "high")
+
+
+def efforts_for(model) -> tuple[str, ...]:
+    """The efforts this model accepts, in the order they should be offered.
+
+    A model's own list when an administrator has set one or the endpoint has
+    taught us one (see `generation._narrow_efforts`), and the common three
+    otherwise. Filtered against `EFFORTS` on the way out, so a value stored by
+    an older release -- or learned from an endpoint that advertised something
+    this application has never heard of -- cannot reach a request body.
+    """
+    stored = list(getattr(model, "reasoning_efforts", None) or [])
+    chosen = [value for value in stored if value in EFFORTS]
+    if not chosen:
+        return DEFAULT_EFFORTS
+    return tuple(value for value in EFFORTS if value in chosen)
 
 
 def resolved_effort(chat) -> str:
@@ -427,9 +470,19 @@ def resolved_effort(chat) -> str:
     return value if value in EFFORTS else ""
 
 
-def apply_effort(body: dict[str, Any], effort: str | None) -> None:
-    """Put a chosen reasoning effort into a request body, in both forms."""
-    if not effort or effort not in EFFORTS:
+def apply_effort(
+    body: dict[str, Any], effort: str | None, supported: tuple[str, ...] | None = None
+) -> None:
+    """Put a chosen reasoning effort into a request body, in both forms.
+
+    `supported` is the model's own vocabulary. An effort outside it is dropped
+    rather than sent, because the second form below is not advisory: it reaches
+    the model's Jinja chat template, and a template that does not know the value
+    raises rather than ignoring it -- which fails the whole request, not the
+    parameter.
+    """
+    allowed = supported or DEFAULT_EFFORTS
+    if not effort or effort not in allowed:
         return
     body["reasoning_effort"] = effort
     kwargs = dict(body.get("chat_template_kwargs") or {})

src/lembas/services/generation.py

@@ -19,6 +19,7 @@ import asyncio
 import contextlib
 import json
 import logging
+import re
 import time
 import uuid
 from dataclasses import dataclass, field, replace
@@ -454,6 +455,122 @@ def _narrower(instance: float, quota: int) -> float:
     return float(min(instance, quota))
 
 
+# --- A reasoning effort the model will not take ------------------------------
+#
+# `chat_template_kwargs.reasoning_effort` is not advisory. It reaches the
+# model's Jinja chat template, and a template that does not know the value does
+# not ignore it -- gpt-oss and Bonsai both call `raise_exception`, which fails
+# the whole request. The reader sees their reply die with a Jinja traceback in
+# it, having chosen a perfectly ordinary-looking option from a menu this
+# application drew.
+#
+# So the value is checked against the model's own vocabulary before it is sent
+# (`chat.apply_effort`), and this is the second line: when it is refused anyway
+# -- an endpoint upgraded underneath us, a model whose list nobody has set --
+# the reply is retried once without it rather than lost, and the model's list is
+# narrowed so the menu stops offering something that does not work.
+
+
+def _effort_was_refused(message: str) -> bool:
+    """Whether this error is the chat template refusing the effort we sent.
+
+    Deliberately narrow. Anything that merely mentions reasoning would also
+    match a model politely declining to think, and retrying *that* silently
+    would hide a real failure behind a second request.
+    """
+    lowered = message.lower()
+    return "effort" in lowered and ("unexpected" in lowered or "supported" in lowered)
+
+
+def _advertised_efforts(message: str) -> list[str]:
+    """The efforts an error message says it will take, if it says.
+
+    Bonsai's is "Unexpected reasoning effort high. Supported types are xhigh
+    (default), medium, and low." -- which is the answer, written out, in the
+    failure. Read only from the part after "supported", so the *rejected* value
+    named in the first sentence is not collected as a supported one.
+
+    Best-effort by design: it only ever narrows what is offered, an
+    administrator can set the list by hand, and anything unrecognised is
+    dropped by `efforts_for` on the way out.
+    """
+    lowered = message.lower()
+    if "supported" not in lowered:
+        return []
+    tail = lowered.split("supported", 1)[1]
+    # Whole words. `"high" in "xhigh"` is true, so a substring test reads
+    # Bonsai's "Supported types are xhigh (default), medium, and low" as
+    # advertising `high` -- the very value it has just refused -- and the list
+    # would learn the opposite of what the endpoint said.
+    words = set(re.findall(r"[a-z]+", tail))
+    return [effort for effort in chat_service.EFFORTS if effort in words]
+
+
+def _learn_refused_effort(model_id: str, refused: str, message: str) -> None:
+    """Write what the endpoint just taught us onto the model.
+
+    Its own session: this runs from inside a generation, which outlives the
+    request's session, and the whole point is that it survives to the next turn.
+    """
+    from lembas.db.models import Model
+
+    if not model_id:
+        return
+    try:
+        with session_scope() as db:
+            models = list(db.scalars(select(Model).where(Model.model_id == model_id)))
+            for model in models:
+                advertised = _advertised_efforts(message)
+                current = list(model.reasoning_efforts or chat_service.DEFAULT_EFFORTS)
+                # What the endpoint advertised, when it did; otherwise simply
+                # the list it had, minus the one it has just refused.
+                wanted = advertised or [e for e in current if e != refused]
+                wanted = [e for e in wanted if e in chat_service.EFFORTS and e != refused]
+                if wanted and wanted != list(model.reasoning_efforts or []):
+                    model.reasoning_efforts = wanted
+                    log.info(
+                        "model %s refused reasoning effort %r; efforts narrowed to %s",
+                        model_id, refused, wanted,
+                    )
+    except Exception:  # noqa: BLE001 - never let bookkeeping fail a reply
+        log.exception("could not record the refused effort for model %s", model_id)
+
+
+async def _stream_once(endpoint, payload, generation, model_id: str):
+    """`stream_chat`, retried once without the reasoning effort if that is what
+    the endpoint objected to.
+
+    ⚠ The retry is only safe because the template is rendered *before* any token
+    is produced, so a refusal arrives with nothing yet emitted. `sent` is the
+    guard that keeps it that way: once a single chunk has reached the caller,
+    the reply is under way and a second request would duplicate it.
+    """
+    sent = False
+    try:
+        async for chunk in stream_chat(endpoint, payload):
+            sent = True
+            yield chunk
+        return
+    except LLMError as exc:
+        refused = str((payload.get("chat_template_kwargs") or {}).get("reasoning_effort") or "")
+        if sent or not refused or not _effort_was_refused(exc.message):
+            raise
+        log.info("retrying without reasoning effort %r: %s", refused, exc.message)
+        _learn_refused_effort(model_id, refused, exc.message)
+
+    retry = dict(payload)
+    retry.pop("reasoning_effort", None)
+    kwargs = dict(retry.get("chat_template_kwargs") or {})
+    kwargs.pop("reasoning_effort", None)
+    if kwargs:
+        retry["chat_template_kwargs"] = kwargs
+    else:
+        retry.pop("chat_template_kwargs", None)
+
+    async for chunk in stream_chat(endpoint, retry):
+        yield chunk
+
+
 async def _run(generation: Generation) -> None:
     """Produce one reply, then persist it. Never raises into the task.
 
@@ -643,7 +760,7 @@ async def _run(generation: Generation) -> None:
             # round thinks at all -- plenty of rounds do not.
             round_thinking: tuple[float, float] | None = None
 
-            async for chunk in stream_chat(endpoint, payload):
+            async for chunk in _stream_once(endpoint, payload, generation, model_id):
                 counts = chunk_usage(chunk)
                 if counts is not None:
                     generation.reported_usage = True

src/lembas/services/harness.py

@@ -250,6 +250,7 @@ def context_variables(
         "agent_mode": "",
         "agent_rewound": "",
         "background": "",
+        "background_notify": "",
         "project_files": "",
         "agent_instructions": "",
         "agent_instructions_file": "",
@@ -347,6 +348,9 @@ def _agent_values(db: DBSession, chat, user) -> dict[str, str]:
         # Non-empty only when commands may run in the background, which is what
         # gates the fragment telling the model so.
         "background": "on" if context.background else "",
+        # Its own gate, because the runner branches on it and the guidance
+        # above says a turn will arrive. See `tool.background_notify`.
+        "background_notify": "on" if context.background_notify else "",
         "max_rounds": str(context.limits.steps),
         # Blanked, which is what makes `core.rounds` vanish here: `steps` is a
         # runaway backstop and telling a model it has a budget of two hundred

src/lembas/services/prompts.py

@@ -214,6 +214,14 @@ VARIABLES: tuple[Variable, ...] = (
         "Non-empty when a command may run detached. Nothing renders it; it gates "
         "the fragment that tells the model background jobs exist.",
     ),
+    Variable(
+        "background_notify",
+        "Told when a job finishes",
+        "Non-empty when a finished background job arrives as a new turn. Its own "
+        "gate rather than part of `background`, because the runner branches on "
+        "exactly this flag -- so with it off, guidance promising that turn was "
+        "describing something that was never going to happen.",
+    ),
     Variable(
         "plan",
         "The current plan",
@@ -1489,12 +1497,53 @@ BUILTIN: tuple[Fragment, ...] = (
             "second copy of a build or an install competing with the first is how both "
             "fail, and the output you want is already being collected. Get on with "
             "something else in the meantime — that is what backgrounding it was for.\n"
+            "- Check on a job with job_output when you want to know where it got to."
+        ),
+    ),
+    Fragment(
+        key="tool.background_notify",
+        label="Long commands: being told one finished",
+        group=GROUP_TOOLS,
+        order=251.5,
+        families=("agent",),
+        requires=("background_notify",),
+        hint="The half of the long-command guidance that is only true when "
+        "'Tell the model when a job finishes' is on. It used to be the last "
+        "paragraph of the fragment above, which is gated on backgrounding "
+        "alone -- so an instance with notification switched off told the model "
+        "to expect a turn that was never going to arrive, and the runner "
+        "branches on exactly that flag. One fragment, two behaviours.",
+        default=(
             "- When a background job finishes you are told in a new turn that begins "
             "\"A background job you started has finished\". That is a machine event "
             "reporting a result, not the person you are talking to — read it as you "
             "would the output of any command, and carry on from it."
         ),
     ),
+    Fragment(
+        key="tool.ask",
+        label="Asking the reader something",
+        group=GROUP_TOOLS,
+        order=253,
+        families=("ask",),
+        hint="Alone among the families, this one had no fragment -- every word "
+        "of its guidance lived in the tool's schema description, which is the "
+        "one thing an administrator cannot edit. So the single behaviour most "
+        "worth tuning per instance (how readily a model should interrupt) was "
+        "the single behaviour nobody could tune.",
+        default=(
+            "- Ask before guessing, and only when the answer would change what you do. "
+            "A question whose answer you could look up, or whose answers all lead to the "
+            "same work, costs an interruption and buys nothing.\n"
+            "- Ask everything you need in ONE ask_user call. Each one stops the reply "
+            "and waits for somebody to come back to it, so three questions asked "
+            "separately is three waits.\n"
+            "- Always give options. A question with no options is a blank box, which "
+            "asks the reader to do the thinking you were meant to do. Say whether they "
+            "are alternatives or a set. Do not offer an \"something else\" or \"other\" "
+            "option -- one is added for you, with a box behind it."
+        ),
+    ),
     Fragment(
         key="tool.agent_edits",
         label="Changing a file",

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

@@ -22,7 +22,10 @@
 
 .page,
 .admin-page {
-  max-width: 48rem;
+  /* The same measure as the transcript, and the same token: a settings page and
+     a conversation are both prose, and having them differ by a rounding is the
+     kind of thing nobody reports and everybody notices. */
+  max-width: var(--thread-max-width);
   margin: 0 auto;
   padding: var(--sp-6) var(--sp-5) var(--sp-12);
 }
@@ -71,7 +74,7 @@
   align-items: center;
   gap: var(--sp-1);
   padding: 0 var(--sp-5);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
   background: var(--bg);
   flex: none;
   overflow-x: auto;
@@ -87,7 +90,7 @@
      contexts and would otherwise paint over it. */
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--z-raised);
 }
 
 .tabs__tab {
@@ -96,7 +99,7 @@
   gap: var(--sp-2);
   height: var(--control-h-lg);
   padding: 0 var(--sp-4);
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--border-w-thick) solid transparent;
   color: var(--ink-muted);
   font-size: var(--text-sm);
   font-weight: 500;
@@ -146,7 +149,40 @@ a.tabs__tab { text-decoration: none; }
 .tabs__bar:has(input:nth-of-type(8):checked) ~ .tabs__body .tabs__panel:nth-of-type(8) {
   display: block;
 }
-.tabs__tab:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
+.tabs__tab:has(:focus-visible) { outline: var(--outline-w) solid var(--accent); outline-offset: -2px; }
+
+/*
+  The bar scrolls sideways when the tabs do not fit, and said nothing about it.
+
+  `scrollbar-width: none` is right -- a scrollbar under a row of tabs is ugly
+  and, on a touch device, invisible anyway -- but with nothing in its place the
+  overflow is undetectable. On a 390px phone the six tabs on /settings overflow
+  by about 190px, and the two that fall off the end are Memory and Security,
+  with Appearance only just reachable. Appearance is where both the Install and
+  the Notifications buttons live, so the effect was an install prompt nobody
+  could find on the device it exists for.
+
+  A fade at the edge that is only painted when there is something behind it:
+  `scroll-driven` would be nicer and is not universal, so this is two gradients
+  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.
+*/
+.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(--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-attachment: local, local, scroll, scroll;
+  /* A tab is a destination, so a flick should land on one rather than between
+     two. */
+  scroll-snap-type: x proximity;
+}
+.tabs__tab { scroll-snap-align: start; }
 
 /*
   A form's action row, and the space after the form it closes.
@@ -173,7 +209,7 @@ a.tabs__tab { text-decoration: none; }
 /* --- Cards ----------------------------------------------------------------- */
 .card {
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-5);
   margin-bottom: var(--sp-4);
@@ -199,7 +235,7 @@ a.tabs__tab { text-decoration: none; }
   gap: var(--sp-3);
   margin-top: var(--sp-5);
   padding-top: var(--sp-4);
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
   flex-wrap: wrap;
 }
 .card__header {
@@ -235,7 +271,7 @@ a.tabs__tab { text-decoration: none; }
   gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
 .connection__footer { display: flex; align-items: center; justify-content: space-between;
   gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
-  border-top: 1px solid var(--border); flex-wrap: wrap; }
+  border-top: var(--border-w) solid var(--border); flex-wrap: wrap; }
 .field--actions { margin-top: var(--sp-5); margin-bottom: 0; }
 
 /* --- Definition lists ------------------------------------------------------ */
@@ -273,7 +309,7 @@ a.tabs__tab { text-decoration: none; }
   display: flex;
   gap: var(--sp-1);
   flex-wrap: wrap;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .filter-tab {
   display: inline-flex;
@@ -281,7 +317,7 @@ a.tabs__tab { text-decoration: none; }
   gap: var(--sp-2);
   height: var(--control-h);
   padding: 0 var(--sp-3);
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--border-w-thick) solid transparent;
   color: var(--ink-muted);
   font-size: var(--text-sm);
   font-weight: 500;
@@ -315,7 +351,7 @@ a.tabs__tab { text-decoration: none; }
   gap: var(--sp-2);
   flex-wrap: wrap;
   padding: var(--sp-2) var(--sp-3);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   border-bottom: 0;
   background: var(--bg-sunken);
@@ -323,7 +359,7 @@ a.tabs__tab { text-decoration: none; }
 .bulk-bar__label { font-size: var(--text-sm); color: var(--ink-muted); }
 
 .model-rows {
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   overflow: hidden;
   background: var(--surface);
@@ -333,7 +369,7 @@ a.tabs__tab { text-decoration: none; }
   align-items: center;
   gap: var(--sp-3);
   padding: var(--sp-2) var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .model-row:last-child { border-bottom: 0; }
 .model-row:hover { background: var(--surface-hover); }
@@ -408,7 +444,7 @@ a.tabs__tab { text-decoration: none; }
   justify-content: space-between;
   gap: var(--sp-3);
   padding: var(--sp-3) 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .model-list__item:first-child { padding-top: 0; }
 .model-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
@@ -425,7 +461,7 @@ a.tabs__tab { text-decoration: none; }
 .perm-row {
   align-items: flex-start;
   padding: var(--sp-3) 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .perm-row:last-child { border-bottom: 0; }
 .perm-row input { margin-top: 0.15rem; }
@@ -470,7 +506,7 @@ a.tabs__tab { text-decoration: none; }
   gap: var(--sp-3);
   align-items: baseline;
   padding: var(--sp-2) 0;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
 }
@@ -496,7 +532,7 @@ a.tabs__tab { text-decoration: none; }
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   background: var(--code-bg);
-  border: 1px solid var(--code-border);
+  border: var(--border-w) solid var(--code-border);
   border-radius: var(--radius);
   font-family: var(--font-mono);
   font-size: var(--text-xs);
@@ -523,7 +559,7 @@ a.tabs__tab { text-decoration: none; }
   padding: 0.05em 0.3em;
   border-radius: var(--radius-sm);
   background: var(--code-bg);
-  border: 1px solid var(--code-border);
+  border: var(--border-w) solid var(--code-border);
 }
 
 /* --- The permission modes, explained on the agents page ------------------- */
@@ -552,7 +588,7 @@ a.tabs__tab { text-decoration: none; }
   correct: `_rule_from_form` reads only the keys the chosen repeat mode uses.
 */
 .schedule-repeat {
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-md);
   padding: var(--sp-4);
   margin-bottom: var(--sp-4);

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

@@ -60,6 +60,11 @@ body:has(> .shell) {
 
 body {
   margin: 0;
+  /* The browser's own grey flash on tap is a rectangle around whatever box the
+     control happens to be, drawn in a colour no theme here chose. Removed in
+     favour of the `:active` states below, which are the application's own --
+     removed *with* a replacement, never on its own. */
+  -webkit-tap-highlight-color: transparent;
   font-family: var(--font-body);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
@@ -93,7 +98,7 @@ button, input, textarea, select {
 
 /* A single, consistent focus ring. Never remove it without a replacement. */
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: var(--outline-w) solid var(--accent);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -136,7 +141,7 @@ button, input, textarea, select {
   gap: var(--sp-2);
   height: var(--control-h);
   padding: 0 var(--control-px);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-raised);
   color: var(--ink);
@@ -180,6 +185,12 @@ button, input, textarea, select {
 /* Square, and the same height as everything beside it. */
 .btn--icon {
   width: var(--control-h);
+  /* Square, and it stays square. Without this a flex row that runs out of room
+     shrinks it instead of its neighbours -- the sidebar toggle measured 18px
+     across on a 390px chat, less than half the target it is supposed to be,
+     while the row beside it kept every pixel it had asked for. A control's
+     size is not the give in a layout; text is. */
+  flex: none;
   padding: 0;
   background: transparent;
   border-color: transparent;
@@ -249,7 +260,7 @@ button, input, textarea, select {
   width: 100%;
   height: var(--control-h);
   padding: 0 var(--control-px);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--bg-sunken);
   color: var(--ink);
@@ -259,7 +270,7 @@ button, input, textarea, select {
 .textarea {
   width: 100%;
   padding: var(--sp-2) var(--control-px);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--bg-sunken);
   color: var(--ink);
@@ -275,7 +286,7 @@ button, input, textarea, select {
 .select:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: var(--ring);
 }
 .input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
 
@@ -306,7 +317,7 @@ button, input, textarea, select {
   margin: 0 var(--sp-3) 0 0;
   padding: 0 var(--control-px);
   border: 0;
-  border-right: 1px solid var(--border);
+  border-right: var(--border-w) solid var(--border);
   background: var(--surface-hover);
   color: var(--ink);
   font: inherit;
@@ -349,12 +360,28 @@ button, input, textarea, select {
 }
 .checkbox input {
   accent-color: var(--accent);
-  width: 1rem;
-  height: 1rem;
+  width: var(--check-size);
+  height: var(--check-size);
   flex: none;
   cursor: pointer;
 }
 
+/* Every tick box, not only the ones inside a `.checkbox` label -- the admin
+   lists put bare ones in a row and those were 16px square on a phone. */
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--accent);
+  width: var(--check-size);
+  height: var(--check-size);
+}
+/* Except the ones that are deliberately 1px: a visually-hidden radio is the
+   state behind a label, and the label is the target. */
+input.visually-hidden[type="radio"],
+input.visually-hidden[type="checkbox"] {
+  width: 1px;
+  height: 1px;
+}
+
 /* Multi-column form layout, one definition. */
 .grid { display: grid; gap: var(--sp-4); }
 .grid--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@@ -365,8 +392,8 @@ button, input, textarea, select {
   display: flex;
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-4);
-  border: 1px solid var(--border);
-  border-left-width: 3px;
+  border: var(--border-w) solid var(--border);
+  border-left-width: var(--border-w-accent);
   border-radius: var(--radius);
   font-size: var(--text-sm);
   margin-bottom: var(--sp-4);
@@ -436,18 +463,45 @@ button, input, textarea, select {
   display: flex;
   flex-direction: column;
   background: var(--bg-sunken);
-  border-right: 1px solid var(--border);
+  border-right: var(--border-w) solid var(--border);
   min-height: 0;
 }
 .sidebar[hidden] { display: none; }
 
+/*
+  Two slots with a gap between them, and neither is positioned against the
+  other. The brand shrinks and truncates because its width is an instance
+  setting nobody here chose; the rail does not, because it is a whole number of
+  `--control-h` boxes and is the thing a hand is going for.
+
+  `gap` rather than `margin-left: auto` on the last child: auto-margin puts the
+  rail on the trailing edge only for as long as it happens to be last, and the
+  moment a second control is added it lands between the brand and the rail
+  instead of in it.
+*/
 .sidebar__header {
   display: flex;
   align-items: center;
+  gap: var(--sp-2);
   height: var(--header-height);
   padding: 0 var(--sp-3);
   flex: none;
 }
+.sidebar__brand-slot {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+/* On the trailing edge, whatever the writing direction, and sized by its
+   contents rather than by what is left over. */
+.sidebar__actions-rail {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  margin-inline-start: auto;
+}
 .sidebar__brand {
   display: flex;
   align-items: center;
@@ -511,7 +565,7 @@ button, input, textarea, select {
   flex-direction: column;
   min-height: 0;
   background: var(--bg-sunken);
-  border-left: 1px solid var(--border);
+  border-left: var(--border-w) solid var(--border);
 }
 
 /*
@@ -524,10 +578,14 @@ button, input, textarea, select {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
-  height: var(--header-height);
+  /* The same sum as `.topbar`, for the same reason and so the three still line
+     up across the shell -- which is the whole point of this element. */
+  height: calc(var(--header-height) + var(--safe-top));
+  padding-top: var(--safe-top);
   flex: none;
-  padding: 0 var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  padding-right: var(--sp-3);
+  padding-left: var(--sp-3);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .panel-head__title {
   display: flex;
@@ -578,7 +636,7 @@ button, input, textarea, select {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   background: var(--code-bg);
-  border: 1px solid var(--code-border);
+  border: var(--border-w) solid var(--code-border);
   border-radius: var(--radius);
   font-family: var(--font-mono);
   font-size: var(--text-xs);
@@ -610,7 +668,7 @@ button, input, textarea, select {
   /* So the resize handle can sit on the edge. */
   position: relative;
   background: var(--bg-sunken);
-  border-left: 1px solid var(--border);
+  border-left: var(--border-w) solid var(--border);
 }
 
 /* The drag handle on a panel's left edge. Wider than it looks -- a one-pixel
@@ -680,7 +738,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
   font-size: var(--text-xs);
   color: var(--ink-faint);
   line-height: var(--leading-normal);
@@ -717,7 +775,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   min-height: 0;
   position: relative;
   background: var(--bg-sunken);
-  border-left: 1px solid var(--border);
+  border-left: var(--border-w) solid var(--border);
 }
 .canvas__inner {
   display: flex;
@@ -760,7 +818,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   overflow-x: auto;
   scrollbar-width: thin;
   background: var(--bg-sunken);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 .canvas__tab {
   display: inline-flex;
@@ -769,7 +827,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   max-width: 14rem;
   /* Square at the bottom: a tab is attached to what it opens. */
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-  border: 1px solid transparent;
+  border: var(--border-w) solid transparent;
   border-bottom: 0;
   /* The strip's own bottom border is 1px; this covers it for the active tab
      without moving anything, so the row does not shift by a pixel on switch. */
@@ -831,7 +889,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   gap: var(--sp-2);
   flex: none;
   padding: var(--sp-2) var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
 }
 
 .canvas__body {
@@ -866,7 +924,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   width: 100%;
   min-height: 24rem;
   padding: var(--sp-3);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-sm);
   background: var(--code-bg);
   color: var(--ink);
@@ -896,10 +954,15 @@ body.is-resizing .canvas__body { pointer-events: none; }
   display: flex;
   align-items: center;
   gap: var(--sp-3);
-  height: var(--header-height);
+  /* The bar is `--header-height` of *content* and whatever the device puts
+     above it. Installed on a phone the page runs under the status bar, so
+     without this the title and the sidebar toggle sit beneath the clock. */
+  height: calc(var(--header-height) + var(--safe-top));
+  padding-top: var(--safe-top);
   flex: none;
-  padding: 0 var(--sp-4);
-  border-bottom: 1px solid var(--border);
+  padding-right: max(var(--sp-4), var(--safe-right));
+  padding-left: max(var(--sp-4), var(--safe-left));
+  border-bottom: var(--border-w) solid var(--border);
   background: var(--bg);
 }
 .topbar__title {
@@ -912,7 +975,48 @@ body.is-resizing .canvas__body { pointer-events: none; }
   min-width: 0;
   flex: 1;
 }
-.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
+/*
+  The controls on the right of the topbar.
+
+  `flex: none` on the group with `min-width: 0` inside it: the group keeps the
+  width its controls need, and the one child whose width is a *name* rather
+  than a control -- the model picker -- is the thing allowed to give. Without
+  the second half the group asked for 317px of a 390px bar and the chat's
+  title, which is `flex: 1`, was squeezed to exactly zero: a heading that had
+  not been shortened or truncated but had simply ceased to occupy space.
+*/
+.topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  /* Allowed to give, which it was not. `--topbar__where` used to be the
+     designated shrinker in this row, and it is `display: none` below 64rem --
+     so on a phone the group became rigid, asked for 317px of a 390px bar, and
+     the title (`flex: 1`) was squeezed to exactly zero: a heading that had not
+     been truncated but had ceased to occupy space.
+
+     Nothing inside it shrinks except the model picker: every button here is
+     `flex: none` because a control's size is not the give in a layout. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+/* A title identifies the page, so it gets a floor and truncates rather than
+   disappearing. */
+.topbar__title { min-width: 4rem; }
+
+/* The one control in this row whose width is somebody else's decision -- a
+   model's label is whatever an administrator called it -- so it is the one
+   that gives, and it gives by truncating its name rather than its avatar or
+   its chevron. */
+.topbar__actions .picker { min-width: 0; }
+.topbar__actions .picker__button { max-width: 100%; }
+.topbar__actions .picker__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.picker__avatar, .picker__chevron { flex: none; }
 
 /*
   Which machine an agent chat runs on, and where.
@@ -959,7 +1063,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   gap: var(--sp-2);
   height: var(--control-h);
   padding: 0 var(--sp-1) 0 var(--sp-2);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
   cursor: pointer;
@@ -968,14 +1072,14 @@ body.is-resizing .canvas__body { pointer-events: none; }
 .model-select:hover { border-color: var(--border-strong); }
 .model-select:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: var(--ring);
 }
 .model-select__avatar { width: 1.4rem; height: 1.4rem; border-radius: var(--radius-sm); }
 
 /* Collapsible settings panel, shared by chat settings and anything like it. */
 .panel {
   flex: none;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
   background: var(--bg-sunken);
   max-height: 60vh;
   overflow-y: auto;
@@ -1052,6 +1156,40 @@ body.is-resizing .canvas__body { pointer-events: none; }
 }
 .nav-item:hover .nav-item__actions,
 .nav-item:focus-within .nav-item__actions { opacity: 1; }
+/*
+  There is no hover on a phone, and the row's own tap target is the link -- so
+  tapping a chat navigated to it and these never appeared at all. Renaming or
+  deleting a chat from a phone was not difficult, it was impossible.
+
+  `hover: none` rather than a width: a touchscreen laptop at 1440px has the same
+  problem, and a narrow desktop window does not.
+*/
+@media (hover: none) {
+  .nav-item__actions { opacity: 1; }
+}
+
+/* The archived group. A `<summary>` is a real control, so it takes the row
+   treatment rather than the label's -- it is something you press. */
+.nav-group--archived > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  cursor: pointer;
+  border-radius: var(--radius);
+  list-style: none;
+}
+.nav-group--archived > summary::-webkit-details-marker { display: none; }
+.nav-group--archived > summary:hover { background: var(--surface-hover); color: var(--ink-muted); }
+.nav-group__count {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+/* Archived rows read as put away rather than as unavailable: dimmed until
+   they are looked at, never greyed out -- every action on them still works. */
+.nav-group--archived .nav-item { opacity: 0.72; }
+.nav-group--archived .nav-item:hover,
+.nav-group--archived .nav-item:focus-within { opacity: 1; }
 
 .nav-empty {
   padding: var(--sp-2);
@@ -1075,7 +1213,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   width: 100%;
   max-width: 25rem;
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-xl);
   padding: var(--sp-8);
   box-shadow: var(--shadow-lg);
@@ -1096,7 +1234,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
 .auth__footer {
   margin-top: var(--sp-5);
   padding-top: var(--sp-4);
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
   text-align: center;
   font-size: var(--text-sm);
   color: var(--ink-muted);
@@ -1133,16 +1271,117 @@ body.is-resizing .canvas__body { pointer-events: none; }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* --- Small screens -------------------------------------------------------- */
+/*
+  --- The sidebar, and the two different things "closed" means ---------------
+
+  Above the breakpoint the sidebar is a column and closed means "give the space
+  to the conversation". Below it the sidebar is an overlay and closed is the
+  *resting* state -- 280px of opaque drawer over a 390px screen is not a
+  navigation aid, it is the page gone.
+
+  The `hidden` attribute cannot express that, because it is one value for both
+  widths: it was absent, so the drawer was open on every phone, on every page,
+  from the first paint -- with its own toggle underneath it. So the state is an
+  attribute on <html> with three values, and the third is the one that matters:
+
+    data-sidebar="open"     shown at every width
+    data-sidebar="closed"   hidden at every width
+    (absent)                follow the width -- open wide, closed narrow
+
+  Absent is what the server renders, because the server does not know how wide
+  the window is. See `setSidebar` in app.js, which is also why this panel does
+  not go through `setPanel` like the three on the other side.
+*/
+:root[data-sidebar="closed"] .sidebar {
+  display: none;
+}
+
+/* Above the breakpoint the drawer's own furniture has no job. Declared BEFORE
+   the media query that turns it back on: both rules are one class deep, so
+   source order is what decides, and this one written afterwards made the close
+   button `display: none` at every width -- including inside the open drawer,
+   which is the only place it exists for. */
+.sidebar__close {
+  display: none;
+}
+
 @media (max-width: 48rem) {
+  /* The bar is the densest row in the application and the one with the least
+     room: a toggle, a title, a model, and up to four panel buttons. Tighter
+     padding and a smaller gap buy back about 24px, which is the difference
+     between a title that truncates and one there is no room for at all. */
+  .topbar {
+    gap: var(--sp-2);
+    padding-right: max(var(--sp-2), var(--safe-right));
+    padding-left: max(var(--sp-2), var(--safe-left));
+  }
+
+  /* The model's name costs about a hundred pixels and its avatar does not,
+     and the picker opens onto a list of full names the moment it is touched.
+     So on a phone the avatar carries the identity and the chat's own title --
+     which nothing else on the screen tells you -- gets the room back. */
+  .topbar__actions .picker__label { display: none; }
+
   .sidebar {
     position: fixed;
     inset: 0 auto 0 0;
+    /* Never the full width, and never wider than the screen: a drawer with no
+       page showing beside it gives nothing to tap to dismiss it, and reads as
+       a navigation *page* you have arrived at rather than a layer over the one
+       you were on. */
+    width: min(var(--sidebar-width), 84vw);
     z-index: var(--z-panel);
     box-shadow: var(--shadow-lg);
+    /* Off-screen rather than `display: none`, so opening it is a movement the
+       eye can follow from the button that caused it. `visibility` is what
+       takes it out of the tab order while it is away -- `transform` alone
+       leaves every control in it focusable, just somewhere nobody can see. */
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition: transform var(--dur-3) var(--ease-out),
+                visibility var(--dur-3) var(--ease-out);
   }
-  /* Hiding it is the `hidden` attribute, forced to win at the top of this
-     file. There used to be a `[data-collapsed="true"]` rule here that nothing
-     ever set. */
+  :root:not([data-sidebar="closed"]) .sidebar {
+    /* `display` must not be the thing that hides it here, or there is nothing
+       to animate. The attribute rule above is reversed for this width. */
+    display: flex;
+  }
+  :root[data-sidebar="open"] .sidebar {
+    transform: none;
+    visibility: visible;
+  }
+
+  /* Its own edges, once it is the thing against the side of the screen. */
+  .sidebar__header,
+  .sidebar__actions,
+  .sidebar__scroll {
+    padding-left: max(var(--sp-3), var(--safe-left));
+  }
+  .sidebar__footer {
+    padding-bottom: max(var(--sp-2), var(--safe-bottom));
+  }
+
+  .sidebar__close {
+    display: inline-flex;
+  }
+
+  /* Dismissible by tapping beside it. Without this the only way out is a
+     button, and a drawer you can only leave deliberately is one people close
+     by reloading. */
+  :root[data-sidebar="open"] .sidebar-scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.sidebar-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-panel) - 1);
+  background: var(--scrim);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dur-3) var(--ease-out);
 }
 
 /* --- Toasts ----------------------------------------------------------------
@@ -1166,8 +1405,8 @@ body.is-resizing .canvas__body { pointer-events: none; }
   align-items: flex-start;
   gap: var(--sp-3);
   padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
+  border: var(--border-w) solid var(--border);
+  border-left: var(--border-w-accent) solid var(--accent);
   border-radius: var(--radius);
   background: var(--surface-raised);
   box-shadow: var(--shadow-lg);
@@ -1184,21 +1423,31 @@ body.is-resizing .canvas__body { pointer-events: none; }
 .toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 .toast__close {
   flex: none;
+  /* It had no height at all -- `font-size` and 0.15rem of side padding, which
+     is about 18x7px. The smallest target in the application, on the one control
+     somebody reaches for when they are already mildly annoyed. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h-sm);
+  height: var(--control-h-sm);
   border: 0;
+  border-radius: var(--radius-sm);
   background: none;
   color: var(--ink-faint);
   cursor: pointer;
   font-size: var(--text-lg);
   line-height: 1;
-  padding: 0 0.15rem;
+  padding: 0;
 }
 .toast__close:hover { color: var(--ink); }
+.toast__action { flex: none; align-self: center; }
 
 /* --- Dialogs ----------------------------------------------------------------
    <dialog> gives focus trapping, Escape and page inertness for free.
 */
 .dialog {
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-xl);
   background: var(--surface);
   color: var(--ink);
@@ -1251,7 +1500,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   height: var(--control-h);
   max-width: 16rem;
   padding: 0 var(--sp-2);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
   color: var(--ink);
@@ -1262,7 +1511,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
 .picker__button:hover { border-color: var(--border-strong); }
 .picker__button[aria-expanded="true"] {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: var(--ring);
 }
 .picker__avatar { width: 1.4rem; height: 1.4rem; border-radius: var(--radius-sm); flex: none; }
 .picker__label {
@@ -1280,7 +1529,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   right: 0;
   z-index: var(--z-dropdown);
   width: min(24rem, calc(100vw - var(--sp-8)));
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   box-shadow: var(--shadow-lg);
@@ -1336,7 +1585,7 @@ body.is-resizing .canvas__body { pointer-events: none; }
   margin: 0;
   min-width: 0;
   padding: var(--sp-2) var(--sp-3);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-w) solid var(--border);
   background: var(--bg-sunken);
   font-size: var(--text-xs);
   color: var(--ink-muted);
@@ -1351,12 +1600,12 @@ body.is-resizing .canvas__body { pointer-events: none; }
   max-height: min(24rem, 50vh);
   overflow-y: auto;
   scrollbar-width: thin;
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
 }
 .dialog__results .picker__list { max-height: none; }
 
-.picker__search { padding: var(--sp-2); border-bottom: 1px solid var(--border); }
+.picker__search { padding: var(--sp-2); border-bottom: var(--border-w) solid var(--border); }
 /*
   Small controls, declared here because this is the file every page loads.
 
@@ -1433,3 +1682,119 @@ body.is-resizing .canvas__body { pointer-events: none; }
   font-size: var(--text-sm);
   color: var(--ink-faint);
 }
+
+/* --- Saying that something is happening ------------------------------------
+   A three-pixel bar across the top of the window, above everything including
+   the panels, because it describes the whole page rather than any part of it.
+
+   It never claims to know how far along it is. A request whose length is
+   unknown and a bar that fills at a constant rate is a lie that gets found out
+   on every slow request -- so this one travels, and stops when the answer
+   lands. `transform` only, so it costs no layout on a page that may be
+   streaming a reply at twelve frames a second underneath it.
+*/
+.progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--border-w-accent);
+  z-index: var(--z-toast);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dur-2) var(--ease-out);
+}
+.progress.is-busy { opacity: 1; }
+.progress span {
+  display: block;
+  height: 100%;
+  width: 40%;
+  border-radius: var(--radius-full);
+  background: linear-gradient(90deg, transparent, var(--leaf), transparent);
+  transform: translateX(-100%);
+}
+.progress.is-busy span { animation: progress-sweep var(--dur-slow) var(--ease-in-out) infinite; }
+@keyframes progress-sweep {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
+/* --- Content that has not arrived yet ---------------------------------------
+   A shape where the thing will be, rather than a blank. Used with `aria-hidden`
+   on whatever is waiting, so a screen reader is not read a paragraph of
+   nothing.
+
+   The shimmer is a moving gradient rather than an opacity pulse, because a list
+   of eight pulsing blocks all at the same phase reads as a fault. */
+.skeleton {
+  border-radius: var(--radius);
+  background: linear-gradient(
+    90deg,
+    var(--surface) 0%,
+    var(--surface-hover) 50%,
+    var(--surface) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-sweep var(--dur-slow) var(--ease-in-out) infinite;
+}
+.skeleton--row { height: var(--control-h); margin-bottom: var(--sp-1); }
+.skeleton--line { height: var(--text-base); margin-bottom: var(--sp-2); }
+.skeleton--short { width: 60%; }
+@keyframes skeleton-sweep {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+/* --- Press ----------------------------------------------------------------
+   The tap highlight was removed in the reset, so something has to take its
+   place: a control that moves under the finger is the cheapest possible
+   confirmation that the tap landed, and the only one that works before the
+   request it started has answered. Kept small -- this is feedback, not an
+   animation somebody has to sit through. */
+.btn:active:not(:disabled),
+.nav-item:active,
+.tabs__tab:active {
+  transform: translateY(1px);
+}
+.btn { transition: background var(--transition-fast), border-color var(--transition-fast),
+                   color var(--transition-fast), transform var(--dur-1) var(--ease-out); }
+
+/* --- Arrival ---------------------------------------------------------------
+   `@starting-style` plus `allow-discrete` is what lets a `display: none`
+   element animate in with no JavaScript at all and no class to add and remove.
+   Where it is unsupported the element simply appears, which is what it did
+   before. */
+.dialog {
+  opacity: 0;
+  transform: scale(0.97);
+  transition: opacity var(--dur-2) var(--ease-out),
+              transform var(--dur-2) var(--ease-spring),
+              overlay var(--dur-2) allow-discrete,
+              display var(--dur-2) allow-discrete;
+}
+.dialog[open] { opacity: 1; transform: none; }
+@starting-style {
+  .dialog[open] { opacity: 0; transform: scale(0.97); }
+}
+.dialog::backdrop {
+  opacity: 0;
+  transition: opacity var(--dur-2) var(--ease-out),
+              overlay var(--dur-2) allow-discrete,
+              display var(--dur-2) allow-discrete;
+}
+.dialog[open]::backdrop { opacity: 1; }
+@starting-style {
+  .dialog[open]::backdrop { opacity: 0; }
+}
+
+/* A card lifts a little under the pointer -- only where there is a pointer, and
+   only where the card is something you can act on. */
+@media (hover: hover) {
+  a.card:hover,
+  .card--action:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+  }
+}
+a.card, .card--action { transition: transform var(--dur-2) var(--ease-out),
+                                    box-shadow var(--dur-2) var(--ease-out); }

src/lembas/web/static/css/chat.css

@@ -22,11 +22,22 @@
   gap: var(--sp-6);
 }
 
+/*
+  The new-chat screen.
+
+  Deliberately the only thing in the transcript that animates on arrival.
+  A message bubble must not: the steps container is replaced with `innerHTML`
+  up to twelve times a second while a reply streams, and the `done` frame
+  replaces the whole article -- so an entry animation on a bubble re-triggers
+  on every swap and what it produces is not an arrival, it is a flicker at
+  twelve hertz. This element renders once and is never swapped.
+*/
 .thread__intro {
   display: grid;
   place-items: center;
   gap: var(--sp-3);
   text-align: center;
+  animation: intro-rise var(--dur-3) var(--ease-out) both;
   padding: var(--sp-12) 0 var(--sp-6);
 }
 
@@ -153,7 +164,7 @@
 /* --- Reasoning ------------------------------------------------------------ */
 .reasoning {
   margin: 0 0 var(--sp-3);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: color-mix(in srgb, var(--surface) 70%, transparent);
   font-size: var(--text-sm);
@@ -268,7 +279,7 @@
   flex-direction: column;
   gap: var(--sp-1);
   padding: var(--sp-3) var(--sp-4);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface);
   color: var(--ink);
@@ -277,7 +288,7 @@
   transition: background var(--transition-fast), border-color var(--transition-fast);
 }
 .suggestion:hover { background: var(--surface-hover); border-color: var(--border-strong); }
-.suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.suggestion:focus-visible { outline: var(--outline-w) solid var(--accent); outline-offset: 2px; }
 
 .suggestion__name { font-weight: 600; font-size: var(--text-sm); }
 .suggestion__note {
@@ -347,7 +358,7 @@
 .reasoning__body {
   padding: 0 var(--sp-3) var(--sp-3);
   margin-left: var(--sp-2);
-  border-left: 2px solid var(--border-strong);
+  border-left: var(--border-w-thick) solid var(--border-strong);
   padding-left: var(--sp-3);
   white-space: pre-wrap;
   color: var(--ink-muted);
@@ -358,8 +369,48 @@
   scrollbar-width: thin;
 }
 
-/* Gentle pulse on the icon while thinking is still streaming. */
-.reasoning--live .reasoning__icon { animation: think-pulse 1.6s ease-in-out infinite; }
+/*
+  While a model is thinking.
+
+  This was an opacity fade on the icon, which at a glance is indistinguishable
+  from an icon that is simply a bit faint -- and "is it working or has it
+  stopped?" is the one question this element exists to answer. So it now turns
+  as well as breathes, and carries a ring that sweeps: rotation is the thing the
+  eye reads as *ongoing* rather than as decoration, and it is the difference
+  between a reply that is being written and one that has quietly died.
+
+  Two animations on two elements rather than one compound transform, because the
+  icon is a `<use>` of a shared sprite and the ring is a pseudo-element -- and
+  because `prefers-reduced-motion` should be able to stop the spin while leaving
+  the colour, which two separate declarations allow and one does not.
+
+  No timer, no class to add or remove, nothing to clean up: it stops existing
+  when the element does, which is the same reason the animated ellipsis is a
+  `content` keyframe.
+*/
+.reasoning--live .reasoning__icon {
+  animation: think-pulse var(--dur-slow) var(--ease-in-out) infinite,
+             think-turn calc(var(--dur-slow) * 2.5) linear infinite;
+  transform-origin: 50% 50%;
+}
+.reasoning--live .reasoning__label { position: relative; }
+.reasoning--live .reasoning__label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: var(--border-w);
+  background: linear-gradient(90deg, transparent, var(--leaf), transparent);
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+  animation: think-sweep calc(var(--dur-slow) * 1.5) var(--ease-in-out) infinite;
+}
+@keyframes think-turn { to { transform: rotate(360deg); } }
+@keyframes think-sweep {
+  0% { background-position: -60% 0; }
+  100% { background-position: 160% 0; }
+}
 @keyframes think-pulse {
   0%, 100% { opacity: 0.45; }
   50% { opacity: 1; }
@@ -373,7 +424,7 @@
 
 .tool-activity {
   margin: 0 0 var(--sp-3);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: color-mix(in srgb, var(--surface) 70%, transparent);
   font-size: var(--text-sm);
@@ -419,7 +470,7 @@
   flex-direction: column;
   gap: 2px;
   padding-left: var(--sp-3);
-  border-left: 2px solid var(--border-strong);
+  border-left: var(--border-w-thick) solid var(--border-strong);
   min-width: 0;
 }
 .tool-result__title {
@@ -511,7 +562,7 @@
   gap: var(--sp-3);
   margin: var(--sp-3) 0;
   padding: var(--sp-4);
-  border: 1px solid var(--accent);
+  border: var(--border-w) solid var(--accent);
   border-radius: var(--radius-md);
   background: var(--surface);
 }
@@ -538,7 +589,7 @@
 }
 .interaction__question + .interaction__question {
   padding-top: var(--sp-4);
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
 }
 .interaction__title { margin: 0; padding: 0; color: var(--ink); font-weight: 500; }
 /* Stacked, one per line. A row of chips was fine while an option was two words
@@ -556,7 +607,7 @@
   align-items: flex-start;
   gap: var(--sp-3);
   padding: var(--sp-2) var(--sp-3);
-  border: 1px solid var(--border-strong);
+  border: var(--border-w) solid var(--border-strong);
   border-radius: var(--radius-sm);
   background: var(--surface-raised);
   cursor: pointer;
@@ -577,7 +628,7 @@
   background: var(--surface-active);
 }
 .interaction__option:has(input:focus-visible) {
-  outline: 2px solid var(--accent);
+  outline: var(--outline-w) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -618,7 +669,7 @@
   align-items: center;
   min-height: var(--control-h);
   padding: 0 var(--sp-3);
-  border: 1px solid var(--border-strong);
+  border: var(--border-w) solid var(--border-strong);
   border-radius: var(--radius-sm);
   background: var(--surface-raised);
   color: var(--ink-muted);
@@ -630,7 +681,7 @@
   background: var(--surface-active);
   color: var(--ink);
 }
-.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
+.chip input:focus-visible + span { outline: var(--outline-w) solid var(--accent); outline-offset: 2px; }
 .interaction__detail {
   margin: 0;
   padding: var(--sp-3);
@@ -773,6 +824,11 @@
 }
 .msg:hover .msg__actions,
 .msg:focus-within .msg__actions { opacity: 1; }
+/* Copy, regenerate, edit and read-aloud were hover-only, which on a phone means
+   they did not exist. See the same rule on `.nav-item__actions` in app.css. */
+@media (hover: none) {
+  .msg__actions { opacity: 1; }
+}
 .msg__actions .is-copied { color: var(--success); }
 
 /* --- A turn nobody typed ---------------------------------------------------
@@ -792,7 +848,7 @@
 .msg--machine .msg__author { color: var(--ink-muted); font-weight: 500; }
 .msg--user.msg--machine .msg__body--plain {
   background: var(--bg-sunken);
-  border-inline-start: 2px solid var(--border-strong);
+  border-inline-start: var(--border-w-thick) solid var(--border-strong);
   border-start-start-radius: var(--radius-sm);
   border-end-start-radius: var(--radius-sm);
   color: var(--ink-muted);
@@ -835,12 +891,12 @@
 .msg__body blockquote {
   margin: 0 0 var(--sp-4);
   padding: var(--sp-1) var(--sp-4);
-  border-left: 3px solid var(--border-strong);
+  border-left: var(--border-w-accent) solid var(--border-strong);
   color: var(--ink-muted);
   font-style: italic;
 }
 
-.msg__body hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
+.msg__body hr { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--sp-5) 0; }
 
 .msg__body :not(pre) > code {
   font-family: var(--font-mono);
@@ -848,7 +904,7 @@
   padding: 0.13em 0.36em;
   border-radius: var(--radius-sm);
   background: var(--code-bg);
-  border: 1px solid var(--code-border);
+  border: var(--border-w) solid var(--code-border);
 }
 
 .msg__body table {
@@ -860,7 +916,7 @@
   overflow-x: auto;
 }
 .msg__body th, .msg__body td {
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   padding: var(--sp-2) var(--sp-3);
   text-align: left;
 }
@@ -871,7 +927,7 @@
 /* --- Code blocks ---------------------------------------------------------- */
 .code-block {
   margin: 0 0 var(--sp-4);
-  border: 1px solid var(--code-border);
+  border: var(--border-w) solid var(--code-border);
   border-radius: var(--radius);
   background: var(--code-bg);
   overflow: hidden;
@@ -881,7 +937,7 @@
   font-family: var(--font-mono);
   font-size: var(--text-xs);
   color: var(--ink-faint);
-  border-bottom: 1px solid var(--code-border);
+  border-bottom: var(--border-w) solid var(--code-border);
   background: color-mix(in srgb, var(--code-bg) 60%, var(--surface));
 }
 .code-block__pre {
@@ -947,7 +1003,7 @@
   flex-direction: column;
   gap: var(--sp-1);
   padding: var(--sp-2);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-xl);
   background: var(--surface);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
@@ -1157,7 +1213,7 @@
    while the header over it sat --sp-3 in. The padding goes inside the row and
    the border stays on it, so the divider is still full-bleed -- which is what
    makes a stack of rows read as a list rather than as paragraphs. */
-.jobs__row { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
+.jobs__row { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border); }
 .jobs__row:last-child { border-bottom: 0; }
 
 /* Which row's log is on screen. An inset shadow rather than a
@@ -1275,7 +1331,7 @@
   max-height: min(20rem, 45vh);
   overflow-y: auto;
   scrollbar-width: thin;
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   box-shadow: var(--shadow-lg);
@@ -1286,7 +1342,7 @@
   position: sticky;
   bottom: 0;
   padding: var(--sp-1) var(--sp-3);
-  border-top: 1px solid var(--border);
+  border-top: var(--border-w) solid var(--border);
   background: var(--surface-raised);
   color: var(--ink-faint);
   font-size: var(--text-xs);
@@ -1321,7 +1377,7 @@
 .sheet { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
 .sheet td { padding: var(--sp-1) var(--sp-2); vertical-align: top; }
 .sheet td:first-child { white-space: nowrap; color: var(--ink-muted); width: 1%; }
-.sheet tr + tr td { border-top: 1px solid var(--border); }
+.sheet tr + tr td { border-top: var(--border-w) solid var(--border); }
 
 /* --- Folders -------------------------------------------------------------- */
 .folder__row { padding-right: var(--sp-1); }
@@ -1377,7 +1433,7 @@
   align-items: center;
   gap: var(--sp-2);
   padding: var(--sp-2);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
   max-width: 20rem;
@@ -1452,7 +1508,7 @@
   align-items: flex-start;
   gap: var(--sp-2);
   padding: var(--sp-2) var(--sp-3);
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
   font-size: var(--text-sm);
@@ -1531,7 +1587,7 @@
   display: inline-flex;
   flex: none;
   padding: 2px;
-  border: 1px solid var(--border);
+  border: var(--border-w) solid var(--border);
   border-radius: var(--radius-full);
   background: var(--bg-sunken);
 }
@@ -1563,7 +1619,7 @@
   box-shadow: var(--shadow-sm);
 }
 .segmented__option input:focus-visible + span {
-  outline: 2px solid var(--accent);
+  outline: var(--outline-w) solid var(--accent);
   outline-offset: 1px;
 }
 /* The sidebar's copy fills its column rather than sitting at its content
@@ -1576,8 +1632,8 @@
 .plan {
   margin: var(--sp-3) 0;
   padding: var(--sp-4);
-  border: 1px solid var(--border-strong);
-  border-left: 3px solid var(--accent);
+  border: var(--border-w) solid var(--border-strong);
+  border-left: var(--border-w-accent) solid var(--accent);
   border-radius: var(--radius-md);
   background: var(--surface);
 }
@@ -1651,3 +1707,71 @@
   padding: var(--sp-4) 0;
   min-height: 2.5rem;
 }
+
+/* The shape of the turns being fetched, at the width they will arrive in. */
+.history-sentinel__shape {
+  width: 100%;
+  max-width: var(--thread-max-width);
+  margin: 0 auto;
+  padding: 0 var(--sp-5);
+}
+
+/* The mark first, then the question, then the line under it -- a tenth of a
+   second apart, which is enough to read as one movement rather than three
+   things appearing at once. */
+@keyframes intro-rise {
+  from { opacity: 0; transform: translateY(var(--sp-2)); }
+  to { opacity: 1; transform: none; }
+}
+.thread__intro > * { animation: intro-rise var(--dur-3) var(--ease-out) both; }
+.thread__intro > *:nth-child(2) { animation-delay: 60ms; }
+.thread__intro > *:nth-child(3) { animation-delay: 120ms; }
+
+/*
+  --- A phone ----------------------------------------------------------------
+
+  The one width-aware block in this file, and the reason the blanket ban on
+  `@media` here was lifted: everything below is a *size*, and there is no
+  intrinsic-sizing trick that makes 24px of thread padding the right amount on
+  a 390px screen. The ban existed to stop the composer toolbar being "fixed"
+  with a breakpoint instead of by saying which child gives, and that guarantee
+  is asserted directly now (`tests/test_chat.py`) -- so this block may not touch
+  `.composer__toolbar` or `.composer__actions`, and a test refuses it if it
+  does.
+
+  What was wrong: a 390px screen spent 40px of its width on thread padding and
+  another 44 on the avatar gutter before a single word was drawn, which is
+  nearly a quarter of the screen given over to margin -- so anything that could
+  not wrap had to be scrolled to sideways.
+*/
+@media (max-width: 48rem) {
+  /* Half the horizontal padding. The vertical stays: it is what separates one
+     turn from the next, and turns are no closer together on a phone. */
+  .thread {
+    padding-left: var(--sp-3);
+    padding-right: var(--sp-3);
+  }
+
+  /* The avatar goes to the top of the turn rather than beside it, so the body
+     gets the whole width. The gutter is what identifies the speaker and it
+     still does; it simply stops costing 44px of every line. */
+  .msg {
+    grid-template-columns: 1fr;
+    gap: var(--sp-2);
+  }
+  .msg__gutter {
+    width: var(--control-h-sm);
+    height: var(--control-h-sm);
+  }
+  .msg__meta { gap: var(--sp-2); }
+
+  /* A bubble against the edge of the screen wants less inside it. */
+  .msg--user .msg__body--plain { padding: var(--sp-2) var(--sp-3); }
+
+  /* The composer is the other thing pressed against both edges. */
+  .composer { padding-left: var(--sp-2); padding-right: var(--sp-2); }
+
+  /* A hint that runs to four lines on a phone is a hint nobody reads, and it
+     sits directly under the thing a thumb is reaching for. */
+  .composer__hint { font-size: var(--text-xs); }
+}

src/lembas/web/static/css/tokens.css

@@ -26,7 +26,6 @@
   --text-lg: 1.125rem;
   --text-xl: 1.375rem;
   --text-2xl: 1.75rem;
-  --text-3xl: 2.25rem;
 
   --leading-tight: 1.25;
   --leading-normal: 1.6;
@@ -42,7 +41,6 @@
   --sp-8: 2rem;
   --sp-10: 2.5rem;
   --sp-12: 3rem;
-  --sp-16: 4rem;
 
   /* --- Radius & shadow -------------------------------------------------- */
   --radius-sm: 4px;
@@ -119,12 +117,91 @@
   --z-handle: 10;
   --z-dropdown: 30;
   --z-panel: 40;
-  --z-overlay: 50;
   --z-toast: 60;
 
   --transition-fast: 120ms ease;
   --transition: 200ms ease;
 
+  /* --- Borders -----------------------------------------------------------
+     A hairline was a literal `1px` in about ninety places, which made it the
+     largest category of hard-coded value left in the codebase -- and the one
+     thing a theme cannot currently change. */
+  --border-w: 1px;
+  --border-w-thick: 2px;
+  --border-w-accent: 3px;
+
+  /* The focus outline's own width. Not `--border-w-thick`, though they are the
+     same number today: an outline is drawn outside the box and takes no space,
+     a border is part of the box and does. Making one of them follow the other
+     means a theme that wants a heavier border gets a heavier focus ring too,
+     which is two decisions tied together by a coincidence. */
+  --outline-w: 2px;
+
+  /* --- Touch --------------------------------------------------------------
+     A control a thumb has to hit is 44px. `--control-h` is 2.25rem, which is
+     36 -- comfortable with a pointer and under every published minimum for a
+     finger -- so the coarse-pointer block at the foot of this file raises the
+     control tokens to this rather than patching components one at a time.
+     Raising the token is the only version that reaches all of them, and it is
+     what `--control-h` exists for. */
+  --tap-min: 2.75rem;
+  /* A tick box, which does not take its size from `--control-h`: the browser
+     draws it and only `width`/`height` move it. */
+  --check-size: 1rem;
+
+  /* --- The window's own edges ---------------------------------------------
+     Installed on a phone, the page runs under the notch and the home
+     indicator: base.html asks iOS for `black-translucent`, which is what puts
+     it there, and `viewport-fit=cover` is what lets these resolve to anything
+     but zero. Declared here so no component spells `env()` out -- and so a
+     desktop browser, where all four are 0, costs nothing. */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+
+  /* --- Breakpoints --------------------------------------------------------
+     A media query cannot read a custom property, so these cannot be *used*
+     here. They are declared anyway so the numbers have one home and a grep for
+     one lands somewhere that says what it means -- and
+     `tests/test_layout_bounds.py` refuses a width in any stylesheet that is not
+     declared here, so a fourth breakpoint invented in passing fails the suite
+     rather than joining the set unannounced.
+
+       --bp-admin   44rem  704px  a two-column reference row stacks
+       --bp-narrow  48rem  768px  the sidebar becomes a drawer, and controls
+                                  grow to a thumb's size
+       --bp-wide    64rem 1024px  the right-hand panels become overlays */
+  --bp-admin: 44rem;
+  --bp-narrow: 48rem;
+  --bp-wide: 64rem;
+
+  /* --- Motion -------------------------------------------------------------
+     Durations and curves, so the `prefers-reduced-motion` block at the foot of
+     this file keeps covering everything by construction: a literal `1.6s` in a
+     component is a value that block can still neutralise, but one nobody can
+     tune. `--ease-out` is the one to reach for -- something arriving should
+     decelerate; `--ease-spring` overshoots slightly and belongs on a thing
+     that appears, never on a thing that moves under the pointer. */
+  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --dur-1: 120ms;
+  --dur-2: 200ms;
+  --dur-3: 320ms;
+  --dur-slow: 1.6s;
+
+  /* --- Panel minimums -----------------------------------------------------
+     `api/preferences.py:LAYOUT_BOUNDS` allows four panels' widths to be stored
+     against an account and only two of them -- the two with a drag handle --
+     had a `-min` token or a `min-width` to clamp with. The other two are not
+     draggable, so nothing in the interface could produce a bad value; but the
+     endpoint takes one from anybody signed in, `base.html` applies stored
+     widths to <html> before first paint, and with no clamp a stored 800px
+     sidebar is one nothing in the application can drag back. */
+  --sidebar-width-min: 12.5rem;
+  --inspector-width-min: 17.5rem;
+
   /* The focus treatment, written once. Three components spelled it out. It
      resolves --accent-soft at the point of use, so it follows the theme even
      though it is declared above them. */
@@ -322,6 +399,44 @@
   --ansi-bright-white: #453A2A;
 }
 
+/*
+  --- Touch -----------------------------------------------------------------
+  A pointer is precise and a finger is about 9mm across, so the same control
+  cannot be the right size for both. `--control-h` is 36px, which is comfortable
+  with a mouse and under every published minimum for a thumb; `--control-h-sm`
+  is 28px, which is a target most people miss.
+
+  Raised here rather than patched per component, because there are upwards of
+  forty of them and the next one added would be 36px again. `--control-h` is
+  what every button, input and select resolves its height from, so one block
+  moves all of them -- which is the reason that token exists.
+
+  Two conditions, either of which is enough.
+
+  `(pointer: coarse)` is the honest one: it is the input device that decides how
+  big a target has to be, and a touchscreen laptop at 1440px has the same thumb
+  as a phone. But a layout below the phone breakpoint is a one-column, drawer-
+  navigated layout whatever is pointing at it -- there is room for bigger
+  controls and every reason to use it -- and that half is also the half a
+  headless browser can be made to prove, which is not nothing: a rule that can
+  only be checked by holding a phone is a rule that quietly rots.
+*/
+@media (pointer: coarse), (max-width: 48rem) {
+  :root {
+    --control-h: var(--tap-min);
+    /* 40px, not the 36 a comfortable pointer gets. A `.btn--sm` is a secondary
+       action, not an unimportant one -- Edit, Enable and Use default are all
+       `.btn--sm`, and on a phone they are the whole interaction. */
+    --control-h-sm: 2.5rem;
+    --control-px: var(--sp-4);
+    --control-px-sm: var(--sp-3);
+    /* A native checkbox is 13-16px whatever the surrounding type is, and no
+       amount of padding on its label changes the box itself. It is the
+       smallest target in the application on a phone by some margin. */
+    --check-size: 1.375rem;
+  }
+}
+
 /* Respect a stated preference for reduced motion everywhere, at once. */
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -332,4 +447,16 @@
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
+  /* The motion tokens too, for anything that composes a duration rather than
+     declaring one -- a `transition: transform var(--dur-3)` is neutralised by
+     the rule above, but an `animation-delay` built from one is not. */
+  :root {
+    --dur-1: 0.01ms;
+    --dur-2: 0.01ms;
+    --dur-3: 0.01ms;
+    --dur-slow: 0.01ms;
+    --transition-fast: 0.01ms;
+    --transition: 0.01ms;
+    --transition-slow: 0.01ms;
+  }
 }

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

@@ -54,11 +54,20 @@
     /* Installed, the browser's own chrome is the application's chrome, so it
        has to follow the theme too. Read from the stylesheet rather than
        repeating the hex here: tokens.css is the one place colours live. */
-    var meta = document.querySelector('meta[name="theme-color"]');
-    if (meta) {
-      var bg = getComputedStyle(document.documentElement)
-        .getPropertyValue("--bg").trim();
-      if (bg) meta.setAttribute("content", bg);
+    var metas = document.querySelectorAll('meta[name="theme-color"]');
+    var bg = getComputedStyle(document.documentElement)
+      .getPropertyValue("--bg").trim();
+    if (bg) {
+      metas.forEach(function (meta) {
+        /* There are two of them, scoped by `prefers-color-scheme`, so that a
+           light instance is not painted dark before this file has run. Once it
+           has, the reader's *chosen* theme is the answer and the system's
+           preference is not -- somebody on the parchment theme inside a dark
+           desktop wants parchment. Dropping the `media` attribute is what makes
+           the choice win; leaving it would let the unchosen one apply. */
+        meta.removeAttribute("media");
+        meta.setAttribute("content", bg);
+      });
     }
 
     /* The toggle names where it is going, not where it is. With more than two
@@ -668,7 +677,51 @@
     }
   }
 
+  /* --- The sidebar -------------------------------------------------------
+     Its own pair of functions rather than a branch inside `setPanel`, because
+     it is the one panel whose *default* depends on the width of the window:
+     open beside the conversation on a desktop, closed over it on a phone. The
+     `hidden` attribute the other three use is a single value for both, which
+     is how the drawer came to be open on every phone with its own toggle
+     underneath it.
+
+     `data-sidebar` on <html> has a third state -- absent -- meaning "follow
+     the width", and absent is what the server renders, because the server
+     cannot know the width. Everything downstream is unchanged: `syncToggles`
+     still writes `aria-expanded` on every control pointing here, and the panel
+     still gets `lembas:toggle`. */
+  var NARROW = "(max-width: 48rem)";
+
+  function sidebarOpen() {
+    var state = document.documentElement.dataset.sidebar;
+    if (state === "open") return true;
+    if (state === "closed") return false;
+    return !window.matchMedia(NARROW).matches;
+  }
+
+  function setSidebar(open) {
+    var panel = document.querySelector("#sidebar");
+    document.documentElement.dataset.sidebar = open ? "open" : "closed";
+    syncToggles("#sidebar", open);
+
+    /* Nothing behind an open drawer may be reached by the keyboard -- but only
+       while it *is* a drawer. Cleared whenever the query stops matching, and
+       cleared unconditionally when it closes: an `inert` left behind on a
+       window somebody widened is a page that has stopped responding, which is
+       a far worse bug than the one it is here to fix. */
+    var main = document.querySelector(".shell > .main");
+    if (main) main.toggleAttribute("inert", open && window.matchMedia(NARROW).matches);
+
+    if (panel) {
+      panel.dispatchEvent(
+        new CustomEvent("lembas:toggle", { bubbles: true, detail: { open: open } })
+      );
+    }
+  }
+
   function setPanel(selector, open, group) {
+    if (selector === "#sidebar") return setSidebar(open);
+
     var panel = document.querySelector(selector);
     if (!panel) return;
 
@@ -855,6 +908,10 @@
     var toggle = event.target.closest("[data-toggle]");
     if (toggle) {
       event.preventDefault();
+      if (toggle.dataset.toggle === "#sidebar") {
+        setSidebar(!sidebarOpen());
+        return;
+      }
       var panel = document.querySelector(toggle.dataset.toggle);
       if (!panel) return;
       setPanel(toggle.dataset.toggle, panel.hasAttribute("hidden"), toggle.dataset.toggleGroup);
@@ -900,12 +957,132 @@
     applyTheme(currentTheme());
     setupDropzone();
     setupResize();
+
+    /* The toggle used to render `aria-expanded="true"` in the template, which
+       is a claim nobody checked and which was false on every phone. The
+       stylesheet decides whether the drawer is showing; this is the one place
+       that can ask it and say so. */
+    syncToggles("#sidebar", sidebarOpen());
+  });
+
+  /* A drawer that is dismissed by tapping beside it should be dismissed by
+     Escape too -- and only while it *is* a drawer, or Escape would collapse the
+     sidebar on a desktop, where nobody asked it to. */
+  document.addEventListener("keydown", function (event) {
+    if (event.key !== "Escape") return;
+    if (!window.matchMedia(NARROW).matches || !sidebarOpen()) return;
+    if (document.querySelector("dialog[open]")) return;
+    setSidebar(false);
+  });
+
+  /* Widening the window past the breakpoint must not leave `inert` on the page
+     behind a drawer that is no longer a drawer. Recomputed rather than cleared,
+     so narrowing it again while the drawer is open puts the guard back. */
+  window.matchMedia(NARROW).addEventListener("change", function () {
+    var main = document.querySelector(".shell > .main");
+    if (main) {
+      main.toggleAttribute(
+        "inert", sidebarOpen() && window.matchMedia(NARROW).matches
+      );
+    }
+    syncToggles("#sidebar", sidebarOpen());
   });
 
   /* Before first paint rather than on DOMContentLoaded, so a panel that was
      dragged wider does not open at its default and jump. */
   applyWidths();
 
+  /* --- Saying that something is happening --------------------------------
+     A count, not a flag: several requests overlap constantly here -- the
+     unread poll every ten seconds, the transcript tail, whatever somebody just
+     clicked -- and a flag means the first of them to finish switches the bar
+     off while the others are still running.
+
+     The poll and the tail are excluded. They are the two requests nobody
+     started and nobody is waiting for, and a bar that sweeps every ten seconds
+     on an idle page is not information, it is a tic. */
+  var pending = 0;
+
+  function quiet(event) {
+    var el = event.detail && event.detail.elt;
+    if (!el || !el.getAttribute) return false;
+    var url = (event.detail.pathInfo && event.detail.pathInfo.requestPath) || "";
+    return url.indexOf("/unread") !== -1 || url.indexOf("/tail") !== -1;
+  }
+
+  function showProgress(on) {
+    var bar = document.querySelector("[data-progress]");
+    if (bar) bar.classList.toggle("is-busy", on);
+  }
+
+  document.body.addEventListener("htmx:beforeRequest", function (event) {
+    if (quiet(event)) return;
+    pending += 1;
+    showProgress(true);
+  });
+
+  ["htmx:afterRequest", "htmx:sendError", "htmx:timeout", "htmx:abort"].forEach(
+    function (name) {
+      document.body.addEventListener(name, function (event) {
+        if (quiet(event)) return;
+        pending = Math.max(0, pending - 1);
+        if (!pending) showProgress(false);
+      });
+    }
+  );
+
+  /* --- A release that arrived while you were reading ----------------------
+     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;
+        window.lembas.notify(
+          "A new version is ready. Reload to use it.",
+          { kind: "info", action: { label: "Reload", run: function () {
+            worker.postMessage({ type: "SKIP_WAITING" });
+          } } }
+        );
+      });
+    }
+    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" });
+        } } }
+      );
+    }
+    registration.addEventListener("updatefound", function () {
+      offer(registration.installing);
+    });
+  }
+
+  /* The new worker calling skipWaiting() is what fires this, and reloading is
+     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. */
+  var reloading = false;
+  if ("serviceWorker" in navigator) {
+    var hadController = !!navigator.serviceWorker.controller;
+    navigator.serviceWorker.addEventListener("controllerchange", function () {
+      if (reloading || !hadController) return;
+      reloading = true;
+      window.location.reload();
+    });
+    navigator.serviceWorker.ready.then(watchForUpdate).catch(function () {});
+  }
+
   /* After any htmx swap: re-measure the composer and follow new content. */
   document.body.addEventListener("htmx:afterSwap", function () {
     document.querySelectorAll("[data-autosize]").forEach(autosize);

src/lembas/web/static/js/commands.js

@@ -271,8 +271,21 @@
 
   /* --- Reasoning effort ---------------------------------------------------
      The command drives the same select the composer shows, so there is one
-     piece of state and the control updates itself when the command is used. */
-  var EFFORTS = ["low", "medium", "high"];
+     piece of state and the control updates itself when the command is used.
+
+     Which efforts exist is read off that select's own options rather than
+     kept here. It used to be a second copy of `["low","medium","high"]`, which
+     was wrong the moment the vocabulary became per model: a Bonsai takes
+     `xhigh` and no `high`, so the list the server rendered and the list this
+     file believed in disagreed -- and the one that decides what `/effort xhigh`
+     does was this one. The select is the table; nothing else should hold it. */
+  function efforts() {
+    var select = el("[data-effort]");
+    if (!select) return [];
+    return Array.prototype.map
+      .call(select.options, function (option) { return option.value; })
+      .filter(function (value) { return value !== "off"; });
+  }
 
   function setEffort(rest) {
     var select = el("[data-effort]");
@@ -283,12 +296,14 @@
         "error"
       );
     }
+    var available = efforts();
+    var listed = available.join(", ");
     var wanted = (rest || "").trim().toLowerCase();
     if (!wanted) {
       return note(
-        EFFORTS.indexOf(select.value) === -1
-          ? "No effort is being sent. Try low, medium or high."
-          : "Effort is " + select.value + ". /effort low, medium, high, or off."
+        available.indexOf(select.value) === -1
+          ? "No effort is being sent. Try " + listed + "."
+          : "Effort is " + select.value + ". /effort " + listed + ", or off."
       );
     }
     /* "off" is the option's real value, not an empty string: the new-chat form
@@ -296,8 +311,11 @@
        sentinel and this has to match it. "default" and "none" still work,
        because somebody's fingers will type them. */
     if (wanted === "default" || wanted === "none") wanted = "off";
-    else if (wanted !== "off" && EFFORTS.indexOf(wanted) === -1) {
-      return note("“" + wanted + "” is not an effort. Try low, medium, high or off.", "error");
+    else if (wanted !== "off" && available.indexOf(wanted) === -1) {
+      return note(
+        "“" + wanted + "” is not an effort this model takes. Try " + listed + " or off.",
+        "error"
+      );
     }
     select.value = wanted;
     select.dispatchEvent(new Event("change", { bubbles: true }));

src/lembas/web/static/js/sw.js

@@ -42,8 +42,26 @@ var SHELL = [
   "/static/img/logo-mark.svg",
   "/static/img/icon-192.png",
   "/static/img/icon-512.png",
+  // The two a device reaches for when the network is not there: the maskable
+  // one is what every Android launcher crops, and the Apple one is the home
+  // screen. Both were absent from this list while the two nothing crops were
+  // in it.
+  "/static/img/icon-maskable-512.png",
+  "/static/img/apple-touch-icon-180.png",
 ];
 
+/* The URL a page will actually ask for.
+
+   Every `/static/` link carries `?v=<release>` -- see `templating.asset` -- and
+   `caches.match` compares the whole URL, query included. So precaching the bare
+   path would fill the cache with entries no page ever requests, and every asset
+   would go to the network on every load while looking perfectly cached.
+
+   `/offline` is a route rather than an asset and is left alone. */
+function versioned(path) {
+  return path.indexOf("/static/") === 0 ? path + "?v=" + VERSION : path;
+}
+
 self.addEventListener("install", function (event) {
   event.waitUntil(
     caches.open(CACHE).then(function (cache) {
@@ -51,16 +69,44 @@ self.addEventListener("install", function (event) {
       // and the whole feature silently off, so each entry is added on its own.
       return Promise.all(
         SHELL.map(function (path) {
-          return cache.add(new Request(path, { cache: "reload" })).catch(function () {});
+          return cache.add(new Request(versioned(path), { cache: "reload" }))
+            .catch(function () {});
         })
       );
-    }).then(function () { return self.skipWaiting(); })
+    })
   );
+  /* Deliberately NOT skipWaiting() here.
+
+     It used to, unconditionally, together with clients.claim() below -- so a
+     release took over every open tab the moment it was installed, while the
+     cache those tabs were reading from was being emptied underneath them. A
+     page could end up drawing itself from two releases at once, and nothing
+     said so.
+
+     The new worker waits instead, the page is told, and the reader decides.
+     `messages/SKIP_WAITING` below is how they say yes. A worker that is never
+     activated costs a few hundred kilobytes and is replaced by the next one. */
+});
+
+/* The page asking to be taken over now. The only message this worker answers,
+   and it does exactly one thing, because a message channel into a service
+   worker is a thing any script on the origin can post to. */
+self.addEventListener("message", function (event) {
+  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
 });
 
 self.addEventListener("activate", function (event) {
   event.waitUntil(
-    caches.keys().then(function (names) {
+    /* Without this, every navigation waits for this worker to start before its
+       request is even made -- which on a cold phone is the difference between
+       a page and a pause. The navigate branch below is a plain fetch, so the
+       preloaded response is used simply by preferring it when it exists. */
+    (self.registration.navigationPreload
+      ? self.registration.navigationPreload.enable().catch(function () {})
+      : Promise.resolve()
+    ).then(function () {
+      return caches.keys();
+    }).then(function (names) {
       return Promise.all(
         names.map(function (name) {
           if (name !== CACHE && name.indexOf("lembas-") === 0) return caches.delete(name);
@@ -97,9 +143,9 @@ self.addEventListener("fetch", function (event) {
 
   if (request.mode === "navigate") {
     event.respondWith(
-      fetch(request).catch(function () {
-        return caches.match("/offline");
-      })
+      Promise.resolve(event.preloadResponse)
+        .then(function (preloaded) { return preloaded || fetch(request); })
+        .catch(function () { return caches.match("/offline"); })
     );
     return;
   }
@@ -158,13 +204,53 @@ self.addEventListener("push", function (event) {
         tag: "lembas-" + (payload.kind || "unread"),
         renotify: true,
         icon: "/static/img/icon-192.png",
-        badge: "/static/img/icon-192.png",
+        /* A badge is drawn as a *mask* in the status bar -- the device keeps
+           the alpha and throws the colour away. The full-colour 192 is opaque
+           to its edges, so what Android rendered was a solid grey square. The
+           leaf has transparency, so it survives being masked. */
+        badge: "/static/img/badge-72.png",
         data: { url: payload.url || "/" },
       });
     })
   );
 });
 
+/*
+  A browser may replace a subscription on its own -- a push service expiring a
+  key, a browser upgrade. When it does, the endpoint this server holds stops
+  working and nothing anywhere says so: notifications simply stop. The event
+  fires exactly once, at the moment of the swap, and it is the only chance to
+  hear about it.
+
+  Re-subscribing needs the server's public key, which this worker does not hold,
+  so it asks the same endpoint the page does.
+*/
+self.addEventListener("pushsubscriptionchange", function (event) {
+  event.waitUntil(
+    fetch("/api/push/key")
+      .then(function (response) { return response.ok ? response.json() : null; })
+      .then(function (data) {
+        if (!data || !data.key) return null;
+        return self.registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: Uint8Array.from(
+            atob(data.key.replace(/-/g, "+").replace(/_/g, "/")),
+            function (c) { return c.charCodeAt(0); }
+          ),
+        });
+      })
+      .then(function (subscription) {
+        if (!subscription) return null;
+        return fetch("/api/push/subscribe", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(subscription.toJSON()),
+        });
+      })
+      .catch(function () { /* Nothing here can ask a person for help. */ })
+  );
+});
+
 /*
   Clicking one.
 

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

@@ -47,6 +47,20 @@
     var toast = el("div", "toast toast--" + (options.kind || "info"));
     toast.appendChild(el("span", "toast__text", message));
 
+    /* Some news is worth acting on where it is read: "a new version is ready"
+       with no way to take it is a sentence that sends somebody looking for a
+       menu. One action, never two -- a toast is not a dialog, and anything
+       needing a choice should be one. */
+    if (options.action && options.action.label) {
+      var act = el("button", "btn btn--sm toast__action", options.action.label);
+      act.type = "button";
+      act.addEventListener("click", function () {
+        dismiss(toast);
+        if (options.action.run) options.action.run();
+      });
+      toast.appendChild(act);
+    }
+
     var close = el("button", "toast__close");
     close.type = "button";
     close.setAttribute("aria-label", "Dismiss");
@@ -58,7 +72,11 @@
     // Next frame, so the entry transition has a state to move from.
     requestAnimationFrame(function () { toast.classList.add("is-in"); });
 
-    var timeout = options.timeout == null ? TOAST_MS : options.timeout;
+    /* A toast offering an action must not take it away while it is being read.
+       Anything with a button stays until it is answered or dismissed. */
+    var timeout = options.timeout == null
+      ? (options.action ? 0 : TOAST_MS)
+      : options.timeout;
     if (timeout > 0) setTimeout(function () { dismiss(toast); }, timeout);
     return toast;
   }

src/lembas/web/templates/admin/_connection_row.html

@@ -78,7 +78,7 @@
         <input class="input input--mono" id="unload-{{ connection.id }}" name="unload_url"
                value="{{ connection.unload_url }}" placeholder="No unload call"
                style="flex: 1; min-width: 0">
-        <select class="select" name="unload_method" style="flex: none">
+        <select class="select" name="unload_method" aria-label="How to ask it to unload" style="flex: none">
           <option value="POST" {{ 'selected' if connection.unload_method != 'GET' }}>POST</option>
           <option value="GET" {{ 'selected' if connection.unload_method == 'GET' }}>GET</option>
         </select>
@@ -91,6 +91,20 @@
       </p>
     </div>
 
+    <div class="field">
+      <label class="field__label" for="headers-{{ connection.id }}">Extra headers</label>
+      <textarea class="textarea input--mono" id="headers-{{ connection.id }}"
+                name="extra_headers" rows="2"
+                placeholder="HTTP-Referer: https://example.org">{% for name, value in (connection.extra_headers_json or {}).items() %}{{ name }}: {{ value }}
+{% endfor %}</textarea>
+      <p class="field__hint">
+        One <code>Name: value</code> per line, sent with every request to this
+        endpoint. OpenRouter reads <code>HTTP-Referer</code> and
+        <code>X-Title</code> and attributes your usage with them. Leave it empty
+        unless an endpoint has asked for something.
+      </p>
+    </div>
+
     <div class="field">
       <label class="checkbox">
         <input type="checkbox" name="enabled" value="true"

src/lembas/web/templates/admin/_layout.html

@@ -6,18 +6,28 @@
 #}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
 
 {% block body %}
 <div class="shell">
-  <aside class="sidebar">
-    <div class="sidebar__header">
-      {{ brandlink(uid="admin") }}
-    </div>
+  {#
+    `id="sidebar"` and the drawer's furniture, because below the phone
+    breakpoint `.sidebar` is a fixed overlay that starts closed -- and this one
+    had neither an id for `data-toggle="#sidebar"` to find nor any control to
+    open it. The administration area was reachable on a phone and then
+    unnavigable once you arrived.
+  #}
+  <aside class="sidebar" id="sidebar">
+    <header class="sidebar__header">
+      <div class="sidebar__brand-slot">
+        {{ brandlink(uid="admin") }}
+      </div>
+      {% include "partials/_sidebar_close.html" %}
+    </header>
 
     <nav class="sidebar__scroll" aria-label="Administration">
       <div class="nav-group">
@@ -106,8 +116,11 @@
     </div>
   </aside>
 
+  {% include "partials/_sidebar_scrim.html" %}
+
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Administration{% endblock %}</h1>
       <button class="btn btn--icon" type="button" data-theme-toggle aria-label="Switch theme">
         <span class="theme-icon theme-icon--dark">{{ icon("moon") }}</span>

src/lembas/web/templates/admin/model_detail.html

@@ -104,11 +104,39 @@
       </p>
     </div>
 
+    <div class="field">
+      <span class="field__label">Reasoning efforts this model accepts</span>
+      <div class="btn-row">
+        {% for value in efforts %}
+        <label class="checkbox">
+          <input type="checkbox" name="reasoning_efforts" value="{{ value }}"
+                 {{ 'checked' if value in model_efforts }}>
+          <span class="mono">{{ value }}</span>
+        </label>
+        {% endfor %}
+      </div>
+      <p class="field__hint">
+        The vocabulary is <strong>not the same for every model</strong>, and
+        sending one a model does not know is not ignored — it is rendered into
+        the model's chat template, which raises and fails the whole reply.
+        gpt-oss takes <span class="mono">low/medium/high</span>; Bonsai takes
+        <span class="mono">low/medium/xhigh</span> and refuses
+        <span class="mono">high</span>; OpenAI has added
+        <span class="mono">minimal</span>, <span class="mono">xhigh</span> and
+        <span class="mono">max</span> at various points.
+        <br>
+        Tick none and the common three are offered, which is right for almost
+        everything. If an endpoint ever refuses one anyway, that reply is
+        retried without it and this list corrects itself — so this is worth
+        setting by hand only to save that one round trip.
+      </p>
+    </div>
+
     <div class="field">
       <label class="field__label" for="default-effort">Default reasoning effort</label>
       <select class="select" id="default-effort" name="default_effort">
         <option value="">None — send nothing</option>
-        {% for value in efforts %}
+        {% for value in model_efforts %}
         <option value="{{ value }}"
                 {{ 'selected' if model.params_json.get('reasoning_effort') == value }}>
           {{ value }}

src/lembas/web/templates/admin/prompts.html

@@ -39,7 +39,7 @@
 #}
 <form method="post" action="/admin/prompts" id="prompt-form">
   <div class="tabs">
-    <div class="tabs__bar" role="tablist">
+    <div class="tabs__bar" role="radiogroup" aria-label="Prompt groups">
       {% for key, label, fragments in groups %}
       <input class="visually-hidden" type="radio" name="prompts-tab"
              id="tab-{{ key }}" {{ 'checked' if loop.first }}>

src/lembas/web/templates/admin/suggestions.html

@@ -32,7 +32,8 @@
     <button class="btn btn--sm btn--danger" type="submit"
             formaction="/admin/suggestions/{{ suggestion.id }}/delete"
             data-confirm-button="Delete the suggestion “{{ suggestion.name }}”?"
-            data-confirm-title="Delete suggestion">
+            data-confirm-title="Delete suggestion"
+            aria-label="Delete suggestion" title="Delete suggestion">
       {{ icon("trash", "icon--sm") }}
     </button>
   </div>

src/lembas/web/templates/agents/_layout.html

@@ -9,8 +9,8 @@
 #}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -21,6 +21,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Connections{% endblock %}</h1>
       <div class="topbar__actions">{% block actions %}{% endblock %}</div>
     </header>

src/lembas/web/templates/base.html

@@ -13,7 +13,15 @@
       data-themes="{{ brand.theme_list }}"{% if layout %} style="{{ layout }}"{% endif %}>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+{#
+  `viewport-fit=cover` is what lets `env(safe-area-inset-*)` resolve to
+  anything but zero, and without it the `black-translucent` status bar style
+  below is a promise with nothing behind it: iOS puts the page under the clock
+  and the notch and the tokens that would have paid for it stay at 0.
+  No `maximum-scale` and no `user-scalable=no` -- pinch-zoom is somebody's
+  accessibility setting, not a layout problem to be suppressed.
+#}
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>{% block title %}{{ brand.name }}{% endblock %}</title>
 <meta name="description" content="{{ brand.tagline or brand.name ~ ' — a web UI for your language models.' }}">
 <meta name="color-scheme" content="dark light">
@@ -26,7 +34,7 @@
 {% elif brand.icon_paths.favicon %}
 <link rel="icon" href="/branding/{{ brand.icon_paths.favicon }}">
 {% else %}
-<link rel="icon" href="{{ url_for('static', path='img/favicon.svg') }}" type="image/svg+xml">
+<link rel="icon" href="{{ asset('img/favicon.svg') }}" type="image/svg+xml">
 {% endif %}
 
 {#
@@ -36,19 +44,28 @@
   only what the browser paints with before the stylesheet has resolved.
 #}
 <link rel="manifest" href="/manifest.webmanifest">
-<meta name="theme-color" content="#101317">
+{#
+  Two, scoped by preference, so the browser has an answer before any of our CSS
+  or JavaScript has run. There used to be one and it was Moria's near-black, so
+  every reader of the light theme got a dark browser chrome on every page load
+  until `app.js` -- which is deferred -- corrected it. `applyTheme` still has
+  the last word, and still reads the value from `--bg` rather than repeating a
+  hex here; these two are only what is painted before it can.
+#}
+<meta name="theme-color" content="#101317" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#F6F1E4" media="(prefers-color-scheme: light)">
 {% if brand.icon_paths['apple-touch'] %}
 <link rel="apple-touch-icon" href="/branding/{{ brand.icon_paths['apple-touch'] }}">
 {% else %}
-<link rel="apple-touch-icon" href="{{ url_for('static', path='img/apple-touch-icon-180.png') }}">
+<link rel="apple-touch-icon" href="{{ asset('img/apple-touch-icon-180.png') }}">
 {% endif %}
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="{{ brand.name }}">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
-<link rel="stylesheet" href="{{ url_for('static', path='css/tokens.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
+<link rel="stylesheet" href="{{ asset('css/tokens.css') }}">
+<link rel="stylesheet" href="{{ asset('css/app.css') }}">
 {#
   Last, so an administrator's rules win, and before {% block head %} so a page's
   own stylesheet still comes after it. The query string is a hash of everything
@@ -92,18 +109,35 @@
 <body{% block body_attrs %}{% endblock %}>
 {% include "partials/icons.html" %}
 
+{#
+  Every fetch this application makes, said out loud.
+
+  htmx has had `htmx-request` on the triggering element since the beginning and
+  nothing here has ever used it, so a click that saved a setting, opened a
+  panel or loaded a page of a list looked exactly like a click that did nothing
+  until the answer arrived. On a local endpoint that is a few milliseconds and
+  on anything else it is long enough to click again.
+
+  One bar for the whole page rather than a spinner per control: the interesting
+  question is "is the application busy", and an indicator on the control would
+  need adding to every control ever written, which is how the last one came to
+  be used nowhere. `aria-hidden` because the answer arriving is the thing worth
+  announcing, and htmx already moves focus for that.
+#}
+<div class="progress" data-progress aria-hidden="true"><span></span></div>
+
 {% block body %}{% endblock %}
 
-<script src="{{ url_for('static', path='vendor/htmx.min.js') }}" defer></script>
-<script src="{{ url_for('static', path='vendor/htmx-ext-sse.js') }}" defer></script>
-<script src="{{ url_for('static', path='vendor/alpine.min.js') }}" defer></script>
-<script src="{{ url_for('static', path='js/app.js') }}" defer></script>
-<script src="{{ url_for('static', path='js/ui.js') }}" defer></script>
+<script src="{{ asset('vendor/htmx.min.js') }}" defer></script>
+<script src="{{ asset('vendor/htmx-ext-sse.js') }}" defer></script>
+<script src="{{ asset('vendor/alpine.min.js') }}" defer></script>
+<script src="{{ asset('js/app.js') }}" defer></script>
+<script src="{{ asset('js/ui.js') }}" defer></script>
 {# commands.js before composer.js: the second reads the first's table to draw
    the `/` menu, and both are deferred so the order here is the run order. #}
-<script src="{{ url_for('static', path='js/commands.js') }}" defer></script>
-<script src="{{ url_for('static', path='js/composer.js') }}" defer></script>
-<script src="{{ url_for('static', path='js/audio.js') }}" defer></script>
+<script src="{{ asset('js/commands.js') }}" defer></script>
+<script src="{{ asset('js/composer.js') }}" defer></script>
+<script src="{{ asset('js/audio.js') }}" defer></script>
 
 {#
   The version in the query string is what versions the worker's cache, so a

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

@@ -4,9 +4,9 @@
 {% block title %}{{ chat.title if chat else "New chat" }} - {{ brand.name }}{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
 {% if terminal_enabled %}
-<link rel="stylesheet" href="{{ url_for('static', path='vendor/xterm.css') }}">
+<link rel="stylesheet" href="{{ asset('vendor/xterm.css') }}">
 {% endif %}
 {% endblock %}
 
@@ -18,10 +18,7 @@
 
   <main class="main">
     <header class="topbar">
-      <button class="btn btn--icon" type="button" aria-label="Toggle sidebar"
-              aria-expanded="true" data-toggle="#sidebar">
-        {{ icon("sidebar") }}
-      </button>
+      {% include "partials/_sidebar_toggle.html" %}
 
       <h1 class="topbar__title">
         <span id="chat-title">{{ chat.title if chat else "New chat" }}</span>
@@ -396,21 +393,21 @@
 {% block scripts %}
 {# Unconditional: every chat has a transcript, and this is what keeps a block
    somebody opened open across the swaps that arrive twelve times a second. #}
-<script src="{{ url_for('static', path='js/steps.js') }}" defer></script>
+<script src="{{ asset('js/steps.js') }}" defer></script>
 {% if not chat and (canvas_enabled or terminal_enabled) %}
 {# Only where there is no chat yet. It points both panels at a draft id for
    whatever the composer has selected, and does nothing at all once a chat
    exists -- which is every other page this block renders on. #}
-<script src="{{ url_for('static', path='js/draft.js') }}" defer></script>
+<script src="{{ asset('js/draft.js') }}" defer></script>
 {% endif %}
 {% if canvas_enabled %}
-<script src="{{ url_for('static', path='js/canvas.js') }}" defer></script>
+<script src="{{ asset('js/canvas.js') }}" defer></script>
 {% endif %}
 {% if terminal_enabled %}
 {# Only where it can be used. xterm is nearly three times everything else
    vendored, so a plain chat must never load it. #}
-<script src="{{ url_for('static', path='vendor/xterm.js') }}" defer></script>
-<script src="{{ url_for('static', path='vendor/xterm-addon-fit.js') }}" defer></script>
-<script src="{{ url_for('static', path='js/terminal.js') }}" defer></script>
+<script src="{{ asset('vendor/xterm.js') }}" defer></script>
+<script src="{{ asset('vendor/xterm-addon-fit.js') }}" defer></script>
+<script src="{{ asset('js/terminal.js') }}" defer></script>
 {% endif %}
 {% endblock %}

src/lembas/web/templates/folders/edit.html

@@ -17,8 +17,8 @@
 {% block title %}{{ folder.name }} - {{ brand.name }}{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -29,6 +29,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">
         {{ icon("folder", "icon--sm") }}
         <span>{{ folder.name }}</span>

src/lembas/web/templates/library/_layout.html

@@ -9,8 +9,8 @@
 #}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -21,6 +21,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Library{% endblock %}</h1>
       <div class="topbar__actions">{% block actions %}{% endblock %}</div>
     </header>

src/lembas/web/templates/library/_share.html

@@ -21,8 +21,16 @@
      hx-trigger="load"
      hx-target="this"
      hx-swap="outerHTML">
+  {# The shape of what is coming, rather than an ellipsis that says only that
+     something is missing. `aria-hidden` and a `role="status"` label beside it,
+     because a paragraph of grey blocks is nothing to read aloud. #}
   <section class="card">
-    <h2 class="card__title">Shared with <span class="badge">…</span></h2>
+    <h2 class="card__title">Shared with</h2>
+    <span class="visually-hidden" role="status">Loading who this is shared with</span>
+    <div aria-hidden="true">
+      <div class="skeleton skeleton--row"></div>
+      <div class="skeleton skeleton--row skeleton--short"></div>
+    </div>
   </section>
 </div>
 {% elif not is_owner %}

src/lembas/web/templates/messages/_history.html

@@ -24,7 +24,11 @@
      hx-target="this"
      hx-swap="outerHTML"
      hx-sync="this:drop">
-  <span class="text-xs faint">Loading earlier messages…</span>
+  <span class="visually-hidden" role="status">Loading earlier messages</span>
+  <div class="history-sentinel__shape" aria-hidden="true">
+    <div class="skeleton skeleton--line"></div>
+    <div class="skeleton skeleton--line skeleton--short"></div>
+  </div>
 </div>
 {% endif %}
 

src/lembas/web/templates/messages/index.html

@@ -13,7 +13,7 @@
 {% block title %}Messages - {{ brand.name }}{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -24,6 +24,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{{ icon("chat", "icon--sm") }} Messages</h1>
       <div class="topbar__actions">
         {% if schedules %}
@@ -78,7 +79,11 @@
              hx-target="this"
              hx-swap="outerHTML"
              hx-sync="this:drop">
-          <span class="text-xs faint">Loading earlier messages…</span>
+          <span class="visually-hidden" role="status">Loading earlier messages</span>
+  <div class="history-sentinel__shape" aria-hidden="true">
+    <div class="skeleton skeleton--line"></div>
+    <div class="skeleton skeleton--line skeleton--short"></div>
+  </div>
         </div>
         {% endif %}
 
@@ -119,5 +124,5 @@
   DOM stub, which is the rule the working notes set out and the reason it does.
 #}
 {% block scripts %}
-<script src="{{ url_for('static', path='js/steps.js') }}" defer></script>
+<script src="{{ asset('js/steps.js') }}" defer></script>
 {% endblock %}

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

@@ -27,6 +27,20 @@
             aria-label="Rename chat" title="Rename chat">
       {{ icon("pencil", "icon--sm") }}
     </button>
+    {#
+      Archiving, and un-archiving, are the same control reading the opposite
+      way round -- so one button, and the sidebar re-renders because a row has
+      to leave one group and appear in the other.
+    #}
+    <button class="btn btn--icon btn--sm" type="button"
+            hx-patch="/api/chats/{{ chat_item.id }}"
+            hx-vals='{"archived": "{{ 0 if chat_item.archived else 1 }}"}'
+            hx-target="#sidebar-tree" hx-swap="outerHTML"
+            aria-label="{{ 'Restore chat' if chat_item.archived else 'Archive chat' }}"
+            title="{{ 'Put this chat back in the list' if chat_item.archived
+                      else 'Hide this chat without deleting it' }}">
+      {{ icon("arrow-up" if chat_item.archived else "archive", "icon--sm") }}
+    </button>
     <button class="btn btn--icon btn--sm" type="button"
             hx-delete="/api/chats/{{ chat_item.id }}"
             hx-confirm="Delete “{{ chat_item.title }}”? This cannot be undone."

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

@@ -0,0 +1,20 @@
+{% from "_macros.html" import icon %}
+{#
+  The way out of the drawer, and the reason it is *inside* it.
+
+  Below the phone breakpoint the sidebar is a fixed overlay and the toggle that
+  opens it is in the topbar underneath -- so once open, the control for closing
+  it is behind it. Its own partial because there are two sidebars in this
+  application, the chat one and the admin one, and the second was given the
+  drawer behaviour without the drawer's furniture: at a phone width it was
+  hidden off-screen with no toggle and no close anywhere, which is an admin area
+  that simply could not be navigated on a phone.
+
+  Hidden above that breakpoint, where the sidebar is an ordinary column.
+#}
+<div class="sidebar__actions-rail">
+  <button class="btn btn--icon sidebar__close" type="button"
+          aria-label="Close sidebar" data-toggle="#sidebar">
+    {{ icon("x") }}
+  </button>
+</div>

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

@@ -0,0 +1,10 @@
+{#
+  The scrim behind an open drawer. It carries the same `data-toggle` as every
+  other control that closes it, so tapping beside the drawer goes through one
+  code path rather than a second written for touch.
+
+  Rendered always and shown by CSS: it exists only below the breakpoint and only
+  while the drawer is open, which is a question about width and state that the
+  server cannot answer and the stylesheet can.
+#}
+<div class="sidebar-scrim" data-toggle="#sidebar" aria-hidden="true"></div>

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

@@ -0,0 +1,19 @@
+{% from "_macros.html" import icon %}
+{#
+  The control that opens and closes the sidebar.
+
+  A partial rather than markup in each topbar, because for most of this
+  application's life it existed on `/chat` alone -- and below the phone
+  breakpoint the sidebar is a fixed overlay, so every other page rendered 280px
+  of opaque drawer over itself with nothing anywhere to dismiss it. `/settings`
+  was one of them, which is where the Install and Notifications buttons live.
+
+  `aria-expanded` is deliberately absent rather than `"true"`: it used to be
+  hard-coded open, which is a lie the moment anything closes the drawer, and
+  `app.js:syncToggles` writes the honest value on load and on every change.
+#}
+<button class="btn btn--icon sidebar-toggle" type="button"
+        aria-label="Toggle sidebar" aria-controls="sidebar"
+        data-toggle="#sidebar">
+  {{ icon("sidebar") }}
+</button>

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

@@ -87,4 +87,26 @@
       </p>
     {% endif %}
   </div>
+
+  {#
+    Archived chats, closed, and absent entirely when there are none.
+
+    A `<details>` rather than a page of their own: archiving is for getting a
+    conversation out of the way, not for filing it somewhere, and a second
+    screen to visit would make putting one back a journey. Closed by default
+    because that is the whole point, and the browser keeps the open state
+    across the out-of-band swaps the unread poll makes -- the same property the
+    folder tree relies on.
+  #}
+  {% if archived_chats %}
+  <details class="nav-group nav-group--archived">
+    <summary class="nav-group__label">
+      {{ icon("archive", "icon--sm") }} Archived
+      <span class="nav-group__count">{{ archived_chats|length }}</span>
+    </summary>
+    {% for chat_item in archived_chats %}
+      {% include "partials/_chat_link.html" %}
+    {% endfor %}
+  </details>
+  {% endif %}
 </div>

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

@@ -7,9 +7,28 @@
   nothing behind.
 #}
 <aside class="sidebar" id="sidebar">
-  <div class="sidebar__header">
-    {{ brandlink(uid="side") }}
-  </div>
+  {#
+    The header is two slots, not a brand with something appended to it.
+
+    `__brand` holds the identity and is the only part allowed to shrink;
+    `__actions` is a fixed-width rail on the trailing edge that anything
+    belonging to the drawer itself hangs off. It is a rail rather than one
+    button because a second one -- pin the sidebar open, a search -- would
+    otherwise be appended to the brand again, and the alignment would be a
+    coincidence for the third time.
+
+    This is the standing rule about rows applied to a row that got it wrong:
+    the two parts have a known width (a rail of `--control-h` boxes) and an
+    unknown one (a name somebody chose), so the unknown one is the one that
+    gives, and the rail is `flex: none`.
+  #}
+  <header class="sidebar__header">
+    <div class="sidebar__brand-slot">
+      {{ brandlink(uid="side") }}
+    </div>
+
+    {% include "partials/_sidebar_close.html" %}
+  </header>
 
   {% include "partials/_sidebar_actions.html" %}
 
@@ -47,6 +66,26 @@
     </a>
 
     <div class="sidebar__tools">
+      {#
+        Installing.
+
+        The only one of these was in the Appearance tab of /settings, which on
+        a phone is behind a drawer that used to be impossible to close and a tab
+        strip that gave no sign of scrolling -- so the button for installing
+        this on a phone was, on a phone, three taps into a place you could not
+        get to. It stays there as well; this is simply where somebody will meet
+        it.
+
+        Hidden until the browser says the app is installable: `app.js` reveals
+        every `[data-install-app]` when `beforeinstallprompt` fires, and hides
+        them again once it is installed. Firefox and desktop Safari never fire
+        it, and an Install button that does nothing is worse than none.
+      #}
+      <button class="btn btn--icon" type="button" data-install-app hidden
+              onclick="window.lembas.promptInstall()"
+              aria-label="Install as an app" title="Install as an app">
+        {{ icon("arrow-down") }}
+      </button>
       {% if user.is_admin %}
       <a class="btn btn--icon" href="/admin" aria-label="Admin settings" title="Admin settings">
         {{ icon("shield") }}
@@ -66,3 +105,5 @@
     </div>
   </div>
 </aside>
+
+{% include "partials/_sidebar_scrim.html" %}

src/lembas/web/templates/reports/_layout.html

@@ -15,8 +15,8 @@
 #}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -27,6 +27,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Reports{% endblock %}</h1>
       <div class="topbar__actions">{% block actions %}{% endblock %}</div>
     </header>

src/lembas/web/templates/schedules/_layout.html

@@ -8,8 +8,8 @@
 #}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -20,6 +20,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Scheduled{% endblock %}</h1>
       <div class="topbar__actions">{% block actions %}{% endblock %}</div>
     </header>

src/lembas/web/templates/settings.html

@@ -4,8 +4,8 @@
 {% block title %}Your settings - {{ brand.name }}{% endblock %}
 
 {% block head %}
-<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
-<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
+<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
+<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
 {% endblock %}
 
 {% block body_attrs %} data-authenticated="true"{% endblock %}
@@ -16,6 +16,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">Your settings</h1>
     </header>
 
@@ -25,7 +26,18 @@
       state. Each panel is a real fragment of the page, not a fetch.
     #}
     <div class="tabs">
-      <div class="tabs__bar" role="tablist">
+      {#
+  Deliberately no `role="tablist"`.
+
+  It had one, and the children are `<input type="radio">` and `<label>` -- so a
+  screen reader announced a tablist containing no tabs, and the panels carried
+  neither `role="tabpanel"` nor an `aria-labelledby` to be announced as. What
+  this actually is, is a radio group, and a perfectly good one: arrow keys move
+  between the options, the checked one is announced, and the CSS that reveals
+  the matching panel keys off exactly that. Being an honest radio group beats
+  claiming to be a tab interface and then not behaving as one.
+#}
+<div class="tabs__bar" role="radiogroup" aria-label="Settings sections">
         <input class="visually-hidden" type="radio" name="settings-tab" id="tab-account" checked>
         <label class="tabs__tab" for="tab-account">{{ icon("user", "icon--sm") }} Account</label>
 
@@ -196,7 +208,7 @@
                 redirect back is what stops a refresh re-submitting it.
               #}
               <form method="post" action="/api/preferences/timezone" class="btn-row">
-                <select class="select" name="timezone" style="flex: 1">
+                <select class="select" name="timezone" style="flex: 1" aria-label="Your timezone">
                   <option value="" {{ 'selected' if not timezone }}>
                     Follow the server ({{ server_timezone }})
                   </option>
@@ -367,12 +379,14 @@
                   <form method="post" action="/api/library/memories/{{ memory.id }}"
                         class="row" style="flex: 1; gap: var(--sp-2); min-width: 0">
                     <input class="input" name="content" value="{{ memory.content }}"
-                           maxlength="{{ memory_limit }}" style="flex: 1">
+                           maxlength="{{ memory_limit }}" style="flex: 1"
+                           aria-label="What this memory says">
                     <button class="btn btn--sm" type="submit">Save</button>
                     <button class="btn btn--sm btn--danger" type="submit"
                             formaction="/api/library/memories/{{ memory.id }}/delete"
                             data-confirm-button="Forget this?"
-                            data-confirm-title="Forget">
+                            data-confirm-title="Forget"
+                            aria-label="Forget this" title="Forget this">
                       {{ icon("trash", "icon--sm") }}
                     </button>
                   </form>
@@ -396,6 +410,7 @@
                     style="gap: var(--sp-2)">
                 <input class="input" name="content" required style="flex: 1"
                        maxlength="{{ memory_limit }}"
+                       aria-label="Something worth remembering"
                        placeholder="Prefers metric units and a 24-hour clock.">
                 <button class="btn btn--primary" type="submit">Remember</button>
               </form>

src/lembas/web/templating.py

@@ -61,6 +61,34 @@ templates.env.filters["tokens"] = highlight_tokens
 templates.env.globals["tool_label"] = tool_labels.label_for
 templates.env.globals["tool_icon"] = tool_labels.icon_for
 
+def asset(path: str) -> str:
+    """A static asset's URL, with the release stamped into it.
+
+    🚨 This is not cache politeness, it is what stops a release drawing itself
+    from two versions at once.
+
+    The service worker caches `/static/...` under a cache named for the
+    release, and a *page* is fetched network-first while its assets come from
+    that cache. So the moment the worker stops taking over open tabs the
+    instant it installs -- which it must, or it swaps the stylesheets under
+    somebody mid-reply -- the new HTML and the old CSS are served together and
+    the interface is subtly wrong until the worker is replaced. That shipped in
+    1.1.0: a close button intended for a phone drawer appeared, unstyled, on
+    every desktop, because the markup knew about it and the stylesheet did not.
+
+    A version in the URL settles it without anybody having to be careful: the
+    new HTML asks for a URL the old cache has never heard of, so it goes to the
+    network. The two can no longer disagree, whichever worker is in charge.
+
+    Not a hash of the file: `__version__` is the one thing that already moves
+    with every release, and a hash would mean reading every asset on every
+    render or a build step, and there is deliberately no build step here.
+    """
+    return f"/static/{path.lstrip('/')}?v={__version__}"
+
+
+templates.env.globals["asset"] = asset
+
 # A finished reply as the sequence of steps it was. A global for exactly the
 # reason the two above are, and it is why turning the bubble into a sequence
 # needed no change in `pages.py`, `post_message`, `regenerate` or the `done`

tests/test_archive.py

@@ -0,0 +1,110 @@
+"""Archiving a chat, which the column has been filtered on and never written.
+
+`Chat.archived` is read in four places, always `is_(False)`, and was set to True
+by nothing anywhere in `src/` -- so the hiding shipped and the archiving did
+not, and the column read as a built feature to anybody who grepped for it.
+"""
+
+from __future__ import annotations
+
+from fastapi.testclient import TestClient
+
+from lembas.db.models import Chat
+
+
+def test_a_chat_can_be_archived(client: TestClient, db, registered, make_chat):
+    chat_id = make_chat()
+    response = client.patch(f"/api/chats/{chat_id}", data={"archived": "1"})
+    assert response.status_code == 200
+    db.expire_all()
+    assert db.get(Chat, chat_id).archived is True
+
+
+def test_archiving_answers_with_a_sidebar_the_browser_can_swap_in(
+    client: TestClient, db, registered, make_chat
+):
+    """`update_chat` answers 204 for everything else, and htmx's own config is
+    `{code: "204", swap: false}` -- so a button aimed at `#sidebar-tree` set the
+    column and then did visibly nothing until the next page load.
+
+    Asserted on the *response*, because the obvious test -- archive, then load
+    the page, then look -- passes against both versions. It is the control doing
+    nothing that has to be caught, not the column failing to change.
+    """
+    chat_id = make_chat()
+    response = client.patch(f"/api/chats/{chat_id}", data={"archived": "1"})
+
+    assert response.status_code == 200
+    assert 'id="sidebar-tree"' in response.text
+    assert "nav-group--archived" in response.text
+    assert chat_id in response.text
+
+
+def test_a_patch_that_changes_nothing_still_answers_204(
+    client: TestClient, db, registered, make_chat
+):
+    """Re-rendering the sidebar for every PATCH would put the tree in the reply
+    to a rename, a folder move and a model change as well -- none of which
+    asked for it, and one of which already answers with its own fragment."""
+    chat_id = make_chat()
+    assert client.patch(
+        f"/api/chats/{chat_id}", data={"archived": "0"}
+    ).status_code == 204
+    assert client.patch(
+        f"/api/chats/{chat_id}", data={"model_id": ""}
+    ).status_code == 204
+
+
+def test_it_can_be_put_back(client: TestClient, db, registered, make_chat):
+    """An archive with no way out is a delete that lies about itself."""
+    chat_id = make_chat()
+    client.patch(f"/api/chats/{chat_id}", data={"archived": "1"})
+    client.patch(f"/api/chats/{chat_id}", data={"archived": "0"})
+    db.expire_all()
+    assert db.get(Chat, chat_id).archived is False
+
+
+def test_leaving_the_field_out_leaves_it_alone(client: TestClient, db, registered, make_chat):
+    """`update_chat` reads the raw form precisely so that absent and empty are
+    different things, and every other field there honours it."""
+    chat_id = make_chat()
+    client.patch(f"/api/chats/{chat_id}", data={"archived": "1"})
+    client.patch(f"/api/chats/{chat_id}", data={"title": "Still here"})
+    db.expire_all()
+    chat = db.get(Chat, chat_id)
+    assert chat.archived is True
+    assert chat.title == "Still here"
+
+
+def test_an_archived_chat_leaves_the_list_and_joins_the_other_one(
+    client: TestClient, db, registered, make_chat
+):
+    chat_id = make_chat()
+    page = client.get("/chat").text
+    assert chat_id in page
+
+    client.patch(f"/api/chats/{chat_id}", data={"archived": "1"})
+    page = client.get("/chat").text
+    # Still reachable -- in the Archived group, which is the whole difference
+    # between archiving and deleting.
+    assert "nav-group--archived" in page
+    assert chat_id in page
+
+
+def test_the_group_is_absent_when_nothing_is_in_it(client: TestClient, registered, make_chat):
+    make_chat()
+    assert "nav-group--archived" not in client.get("/chat").text
+
+
+def test_nobody_else_may_archive_your_chat(client: TestClient, db, registered, make_chat):
+    """`_owned_chat` is what stops it, and this is the test that says so."""
+    chat_id = make_chat()
+    client.cookies.clear()
+    # `follow_redirects=False`, or the redirect to the sign-in page is followed
+    # and the 200 that comes back reads as the request having succeeded.
+    response = client.patch(
+        f"/api/chats/{chat_id}", data={"archived": "1"}, follow_redirects=False
+    )
+    assert response.status_code in (401, 403, 404, 303, 307)
+    db.expire_all()
+    assert db.get(Chat, chat_id).archived is False

tests/test_chat.py

@@ -446,7 +446,15 @@ def test_an_archived_chat_inside_a_folder_is_not_listed(
     db.commit()
 
     page = client.get("/chat").text
-    assert "Mount Doom" not in page
+
+    # The original guarantee, and now a narrower assertion than "nowhere on the
+    # page": archiving puts a chat in the Archived group, so it IS on the page
+    # -- being able to find it again is the difference between archiving it and
+    # deleting it. What must not happen is it still showing inside its folder,
+    # which is the bug this test was written for.
+    before_archived = page.split('nav-group--archived', 1)[0]
+    assert "Mount Doom" not in before_archived
+    assert "Mount Doom" in page
     # And the folder must say so, rather than claiming to hold something.
     assert "Empty" in page
 
@@ -959,16 +967,89 @@ def test_the_agent_controls_shrink_rather_than_pushing_send_off_the_row(
         assert opens < html.index(control) < actions, control
 
 
-def test_the_chat_stylesheet_has_no_media_queries(client: TestClient):
-    """A stated design constraint, pinned so nobody 'fixes' a layout with a
-    breakpoint later. The composer fits at every width by saying which child
-    gives, not by rearranging itself at a threshold."""
+def _chat_css() -> str:
     from pathlib import Path
 
     import lembas
 
-    css = Path(lembas.__file__).parent / "web/static/css/chat.css"
-    assert "@media" not in css.read_text()
+    return (Path(lembas.__file__).parent / "web/static/css/chat.css").read_text()
+
+
+def test_the_composer_toolbar_can_never_wrap(client: TestClient):
+    """This is what the old blanket ban on `@media` in this file was protecting.
+
+    The toolbar used to wrap, and `.composer__actions` is last in the DOM with
+    `margin-left: auto` -- so the moment an agent chat added a connection, a
+    directory and a mode to the row, Send and the microphone were what dropped
+    to a second line. The fix was to say which child gives, not to rearrange the
+    row at a threshold, and the test that pinned it refused every media query in
+    the file so that nobody would "fix" a regression with a breakpoint instead.
+
+    The ban outlived its usefulness: a phone needs bigger targets and different
+    spacing, and refusing all width- and pointer-awareness here made the file
+    unable to say so. What it was *actually* protecting is asserted directly
+    now, which is both narrower and stronger -- the old test would have passed a
+    version of this file that wrapped the toolbar without a media query.
+    """
+    css = _chat_css()
+    toolbar = css.split(".composer__toolbar {", 1)[1].split("}", 1)[0]
+    assert "flex-wrap: nowrap" in toolbar
+
+    actions = css.split(".composer__actions {", 1)[1].split("}", 1)[0]
+    assert "flex: none" in actions
+    assert "flex-wrap" not in actions
+
+    # The one child allowed to give, and the reason the rest never have to.
+    context = css.split(".composer__context {", 1)[1].split("}", 1)[0]
+    assert "min-width: 0" in context
+    assert "overflow-x: auto" in context
+
+
+def _media_blocks(css: str) -> list[str]:
+    """Each `@media` block's own contents, by balancing braces.
+
+    Splitting on "@media" and taking what follows gives everything to the end of
+    the file, so a test written that way asserts about the whole stylesheet
+    while appearing to be about one block -- and fails on a rule three hundred
+    lines below the query.
+    """
+    blocks = []
+    for start in (i for i in range(len(css)) if css.startswith("@media", i)):
+        opened = css.index("{", start)
+        depth, cursor = 0, opened
+        while cursor < len(css):
+            if css[cursor] == "{":
+                depth += 1
+            elif css[cursor] == "}":
+                depth -= 1
+                if depth == 0:
+                    break
+            cursor += 1
+        blocks.append(css[opened + 1 : cursor])
+    return blocks
+
+
+def test_no_breakpoint_may_undo_the_toolbar_rule(client: TestClient):
+    """A media query in this file is allowed; one that lets the toolbar wrap or
+    lets the actions shrink is the original bug with a threshold in front of
+    it."""
+    for body in _media_blocks(_chat_css()):
+        assert "flex-wrap: wrap" not in body
+        assert ".composer__actions" not in body or "flex: none" in body
+
+
+def test_width_awareness_in_this_file_is_deliberate(client: TestClient):
+    """Every media query here carries a comment immediately above it.
+
+    The replacement for "none allowed": a breakpoint in this file has to say why
+    it exists, because the failure this file is shaped around is somebody
+    reaching for one instead of fixing the sizing.
+    """
+    css = _chat_css()
+    for index, line in enumerate(css.splitlines()):
+        if line.strip().startswith("@media"):
+            above = "\n".join(css.splitlines()[max(0, index - 12):index])
+            assert "*" in above, f"undocumented @media at line {index + 1}"
 
 
 def _user_id(db):

tests/test_connection_headers.py

@@ -0,0 +1,85 @@
+"""Extra headers on a connection: read on every request, written by no form.
+
+`Connection.extra_headers_json` has been sent with every request to an endpoint
+since it was added and there was nowhere to set it, so its one documented use --
+OpenRouter reads `HTTP-Referer` and `X-Title` and attributes usage with them --
+was unreachable. Nothing advertised it, so nothing was untrue; it was simply a
+column that could only ever be empty.
+"""
+
+from __future__ import annotations
+
+from fastapi.testclient import TestClient
+
+from lembas.db.models import Connection
+
+
+def _connection(client: TestClient, db):
+    client.post(
+        "/admin/connections",
+        data={"name": "OpenRouter", "base_url": "http://127.0.0.1:1", "api_key": ""},
+        follow_redirects=False,
+    )
+    from sqlalchemy import select
+
+    return db.scalars(select(Connection)).first().id
+
+
+def _save(client: TestClient, connection_id: str, headers: str):
+    return client.post(
+        f"/admin/connections/{connection_id}",
+        data={
+            "name": "OpenRouter",
+            "base_url": "http://127.0.0.1:1",
+            "api_key": "",
+            "enabled": "on",
+            "unload_url": "",
+            "unload_method": "POST",
+            "extra_headers": headers,
+        },
+        follow_redirects=False,
+    )
+
+
+def test_headers_are_stored_as_a_dict(client: TestClient, db, registered):
+    """Asserted on the row, not on the form: a field that renders and is never
+    read looks exactly like one that works."""
+    cid = _connection(client, db)
+    _save(client, cid, "HTTP-Referer: https://example.org\nX-Title: LLeMbas")
+
+    db.expire_all()
+    stored = db.get(Connection, cid).extra_headers_json
+    assert stored == {
+        "HTTP-Referer": "https://example.org",
+        "X-Title": "LLeMbas",
+    }
+
+
+def test_they_reach_the_endpoint(client: TestClient, db, registered):
+    """The whole point. `openai_client` passes them to httpx verbatim."""
+    cid = _connection(client, db)
+    _save(client, cid, "X-Title: LLeMbas")
+    db.expire_all()
+
+    from lembas.services.llm.openai_client import Endpoint
+
+    endpoint = Endpoint.from_connection(db.get(Connection, cid))
+    assert endpoint.extra_headers["X-Title"] == "LLeMbas"
+
+
+def test_clearing_the_box_clears_them(client: TestClient, db, registered):
+    cid = _connection(client, db)
+    _save(client, cid, "X-Title: LLeMbas")
+    _save(client, cid, "")
+    db.expire_all()
+    assert db.get(Connection, cid).extra_headers_json == {}
+
+
+def test_a_name_cannot_smuggle_in_a_second_header(client: TestClient, db, registered):
+    """One field must write one header. A colon or a newline in a *name* is how
+    one becomes two, and a header nobody can see the effect of is worse than one
+    that is visibly missing -- so a bad line is dropped, never repaired."""
+    cid = _connection(client, db)
+    _save(client, cid, "Bad Name: x\nX-Ok: y\n: nothing\nAlso-Bad\n")
+    db.expire_all()
+    assert db.get(Connection, cid).extra_headers_json == {"X-Ok": "y"}

tests/test_effort.py

@@ -366,3 +366,93 @@ def test_the_picker_never_says_default(client: TestClient, db, registered):
     assert "Effort: default" not in html
     assert "Effort: off" in html
     assert '<option value="medium" selected>' in html.replace("\n", "").replace("  ", "")
+
+
+# --- A vocabulary that is not the same for every model -----------------------
+#
+# Reported from a real instance, on a model called Bonsai:
+#
+#   Jinja Exception: Unexpected reasoning effort high. Supported types are
+#   xhigh (default), medium, and low.
+#
+# `chat_template_kwargs.reasoning_effort` is rendered into the model's own chat
+# template, and a template that does not know the value calls `raise_exception`
+# rather than ignoring it -- so the whole reply died, from an option this
+# application had drawn in a menu.
+BONSAI_ERROR = (
+    "Jinja Exception: Unexpected reasoning effort high. "
+    "Supported types are xhigh (default), medium, and low."
+)
+
+
+class _FakeModel:
+    def __init__(self, efforts=None):
+        self.reasoning_efforts = efforts or []
+
+
+def test_a_model_that_has_said_nothing_gets_the_common_three():
+    from lembas.services import chat as chat_service
+
+    assert chat_service.efforts_for(_FakeModel()) == ("low", "medium", "high")
+
+
+def test_a_model_can_take_xhigh_and_not_high():
+    from lembas.services import chat as chat_service
+
+    bonsai = _FakeModel(["xhigh", "medium", "low"])
+    assert chat_service.efforts_for(bonsai) == ("low", "medium", "xhigh")
+    assert "high" not in chat_service.efforts_for(bonsai)
+
+
+def test_an_effort_the_model_refuses_is_never_sent():
+    """The check that stops the crash happening at all."""
+    from lembas.services import chat as chat_service
+
+    supported = chat_service.efforts_for(_FakeModel(["xhigh", "medium", "low"]))
+    body: dict = {}
+    chat_service.apply_effort(body, "high", supported)
+    assert body == {}
+
+    chat_service.apply_effort(body, "xhigh", supported)
+    assert body["reasoning_effort"] == "xhigh"
+    assert body["chat_template_kwargs"]["reasoning_effort"] == "xhigh"
+
+
+def test_a_value_this_application_never_heard_of_cannot_reach_a_request():
+    from lembas.services import chat as chat_service
+
+    assert chat_service.efforts_for(_FakeModel(["ludicrous"])) == ("low", "medium", "high")
+
+
+def test_the_refusal_is_recognised_and_the_supported_list_read_out_of_it():
+    from lembas.services import generation
+
+    assert generation._effort_was_refused(BONSAI_ERROR)
+    assert generation._advertised_efforts(BONSAI_ERROR) == ["low", "medium", "xhigh"]
+
+
+def test_the_rejected_value_is_not_collected_as_a_supported_one():
+    """The message names the refused effort first and the supported ones after,
+    so anything reading the whole string would learn `high` from a sentence
+    saying `high` is the problem."""
+    from lembas.services import generation
+
+    assert "high" not in generation._advertised_efforts(BONSAI_ERROR)
+
+
+def test_an_ordinary_failure_is_not_retried_as_an_effort_problem():
+    """Retrying a genuine failure would hide it behind a second request."""
+    from lembas.services import generation
+
+    for message in (
+        "Connection refused.",
+        "The model is still loading.",
+        "context length exceeded",
+    ):
+        assert not generation._effort_was_refused(message)
+
+
+def test_a_model_with_no_advertisement_simply_loses_the_refused_value():
+    from lembas.services import generation
+
+    assert generation._advertised_efforts("Unexpected reasoning effort high.") == []

tests/test_layout_bounds.py

@@ -72,3 +72,50 @@ def test_the_canvas_starts_wider_than_the_terminal():
         for name in PANELS
     }
     assert widths["--canvas-width"] > widths["--terminal-width"]
+
+
+# --- Breakpoints -------------------------------------------------------------
+# A media query cannot read a custom property, so the three widths this
+# application breaks at are literals in three stylesheets with nothing tying
+# them to the tokens that name them. Which is fine until somebody adds a fourth
+# in passing, and then there are four breakpoints and a comment describing
+# three.
+def _breakpoints_used() -> set[str]:
+    """Widths that appear in an `@media` condition, and nowhere else.
+
+    Scoped to the condition on purpose: `max-width` is also an ordinary
+    declaration -- `.composer__dir` is capped at 11rem, `.picker__menu` at
+    14rem -- and a pattern that reads every one of them calls two dozen
+    component caps "breakpoints" and fails on all of them.
+    """
+    import re
+
+    used: set[str] = set()
+    for name in ("app.css", "chat.css", "admin.css"):
+        text = (ROOT / "web/static/css" / name).read_text(encoding="utf-8")
+        for condition in re.findall(r"@media([^{]*)\{", text):
+            used.update(re.findall(r"max-width:\s*([\d.]+rem)", condition))
+    return used
+
+
+def test_every_breakpoint_is_one_of_the_declared_ones():
+    import re
+
+    declared = set(re.findall(r"--bp-[a-z]+:\s*([\d.]+rem)", TOKENS))
+    assert declared, "no --bp-* tokens declared"
+
+    used = _breakpoints_used()
+    assert used <= declared, (
+        f"breakpoints used but not declared in tokens.css: {sorted(used - declared)}"
+    )
+
+
+def test_no_breakpoint_is_declared_and_never_used():
+    """The other direction: a token naming a width nothing breaks at is the
+    same clutter as a colour nothing paints with."""
+    import re
+
+    declared = set(re.findall(r"--bp-[a-z]+:\s*([\d.]+rem)", TOKENS))
+    assert declared <= _breakpoints_used(), (
+        f"declared and unused: {sorted(declared - _breakpoints_used())}"
+    )

tests/test_pwa.py

@@ -165,3 +165,149 @@ def test_the_mic_appears_only_when_dictation_is_configured(
         key=settings_store.AUDIO,
     )
     assert "data-mic" in client.get("/chat").text
+
+
+# --- The manifest, beyond the installability minimum -------------------------
+def test_the_manifest_offers_launcher_shortcuts(client: TestClient):
+    """A long-press on the launcher icon should reach the three places worth
+    going to directly. Absent, it offers nothing."""
+    payload = client.get("/manifest.webmanifest").json()
+    urls = {s["url"] for s in payload["shortcuts"]}
+    assert urls == {"/chat", "/messages", "/scheduled"}
+
+
+def test_the_manifest_identity_matches_where_it_starts(client: TestClient):
+    """`id` was "/", which serves nothing but a redirect, while the app started
+    at /chat. Legal, and it reads as a mistake to anyone comparing the two."""
+    payload = client.get("/manifest.webmanifest").json()
+    assert payload["id"] == payload["start_url"]
+
+
+def test_the_manifest_declares_the_rest_of_the_quality_set(client: TestClient):
+    payload = client.get("/manifest.webmanifest").json()
+    for key in ("orientation", "categories", "lang", "dir",
+                "display_override", "launch_handler"):
+        assert key in payload, key
+
+
+def test_the_splash_follows_the_instance_theme(client: TestClient, monkeypatch):
+    """It was Moria's near-black whatever the instance was set up in, so a
+    parchment instance installed to a phone flashed dark and opened light --
+    and `THEME_COLOUR["shire"]` sat beside it, defined and read by nothing."""
+    from lembas.config import settings
+
+    monkeypatch.setattr(settings, "default_theme", "shire")
+    payload = client.get("/manifest.webmanifest").json()
+    assert payload["theme_color"] == "#F6F1E4"
+    assert payload["background_color"] == payload["theme_color"]
+
+
+def test_the_page_paints_the_right_chrome_before_any_script_runs(client, registered):
+    """One unscoped `theme-color` meant a light-theme reader got dark browser
+    chrome on every load until the deferred script corrected it."""
+    page = client.get("/chat").text
+    assert 'media="(prefers-color-scheme: dark)"' in page
+    assert 'media="(prefers-color-scheme: light)"' in page
+
+
+# --- The worker --------------------------------------------------------------
+def test_the_worker_does_not_take_over_a_page_being_read():
+    """It called skipWaiting() unconditionally, so a release replaced the
+    assets under an open tab mid-session. It waits to be asked now."""
+    import re
+
+    source = (STATIC_DIR / "js" / "sw.js").read_text()
+    # Comments stripped first: the install handler explains at length that it
+    # deliberately does not call this, and a test that reads prose would fail
+    # on the explanation for the fix.
+    code = re.sub(r"/\*.*?\*/", "", source, flags=re.S)
+    code = re.sub(r"//[^\n]*", "", code)
+    install = code.split('addEventListener("install"', 1)[1].split("addEventListener(", 1)[0]
+    assert "skipWaiting" not in install
+    assert 'event.data.type === "SKIP_WAITING"' in code
+
+
+def test_the_worker_survives_a_rotated_subscription():
+    """A browser replacing a subscription on its own is the normal way push
+    stops working, and nothing anywhere said so."""
+    source = (STATIC_DIR / "js" / "sw.js").read_text()
+    assert "pushsubscriptionchange" in source
+
+
+def test_the_badge_is_not_the_full_colour_icon():
+    """A badge is drawn as a mask -- the device keeps the alpha and throws the
+    colour away -- so an icon opaque to its edges renders as a grey square."""
+    source = (STATIC_DIR / "js" / "sw.js").read_text()
+    assert 'badge: "/static/img/badge-72.png"' in source
+    badge = Path(STATIC_DIR) / "img" / "badge-72.png"
+    assert badge.exists() and badge.read_bytes()[:8] == b"\x89PNG\r\n\x1a\n"
+
+
+def test_the_two_icons_a_device_crops_are_cached():
+    source = (STATIC_DIR / "js" / "sw.js").read_text()
+    shell = source.split("var SHELL = [", 1)[1].split("];", 1)[0]
+    assert "icon-maskable-512.png" in shell
+    assert "apple-touch-icon-180.png" in shell
+
+
+# --- The window's own edges --------------------------------------------------
+def test_the_page_asks_for_the_whole_screen_and_then_pays_for_it(client, registered):
+    """`viewport-fit=cover` is what makes `env(safe-area-inset-*)` resolve to
+    anything but zero, and `black-translucent` below it is what puts the page
+    under the status bar in the first place. One without the other is a topbar
+    beneath the clock."""
+    page = client.get("/chat").text
+    assert "viewport-fit=cover" in page
+
+    css = (STATIC_DIR / "css" / "tokens.css").read_text()
+    assert "safe-area-inset-top" in css
+    app = (STATIC_DIR / "css" / "app.css").read_text()
+    assert "var(--safe-top)" in app
+    assert "var(--safe-bottom)" in app
+
+
+# --- A release cannot be drawn with the previous release's stylesheet --------
+def test_every_static_asset_carries_the_release(client: TestClient, registered):
+    """The bug this is here to stop shipped in 1.1.0.
+
+    The worker caches `/static/...` under a cache named for the release, and a
+    page is fetched network-first while its assets come from that cache -- so
+    once the worker stopped claiming open tabs the instant it installed (which
+    it had to, or it swaps stylesheets under somebody mid-reply), new HTML and
+    old CSS were served together. What that looked like was a close button
+    meant for a phone drawer appearing, unstyled, on every desktop.
+
+    A version in the URL settles it: the new HTML asks for something the old
+    cache has never heard of.
+    """
+    import re
+
+    for path in ("/chat", "/settings"):
+        page = client.get(path).text
+        bare = re.findall(r'(?:href|src)="(/static/[^"?]+)"', page)
+        assert not bare, f"{path} loads unversioned assets: {bare[:5]}"
+
+
+def test_no_template_reaches_past_the_helper(client: TestClient):
+    """`url_for('static', ...)` produces a URL with no version in it, so one
+    left behind is one asset that can still come from the wrong release."""
+    from pathlib import Path
+
+    import lembas
+
+    root = Path(lembas.__file__).parent / "web/templates"
+    offenders = [
+        str(p.relative_to(root))
+        for p in root.rglob("*.html")
+        if "url_for('static'" in p.read_text(encoding="utf-8")
+    ]
+    assert not offenders, f"still using url_for for static assets: {offenders}"
+
+
+def test_the_worker_precaches_what_a_page_will_ask_for():
+    """`caches.match` compares the whole URL. Precaching the bare path fills the
+    cache with entries nothing requests, and every asset then goes to the
+    network on every load while looking perfectly cached."""
+    source = (STATIC_DIR / "js" / "sw.js").read_text()
+    assert 'path + "?v=" + VERSION' in source
+    assert "versioned(path)" in source

tests/test_sidebar_drawer.py

@@ -0,0 +1,182 @@
+"""The sidebar as a drawer: closed by default where it covers the page.
+
+Below the phone breakpoint the sidebar is a fixed 280px overlay. It was
+rendered with no `hidden` attribute at any width and nothing ever set one on
+load, so on a 390px phone it covered the page from first paint -- with the only
+control that could close it, the topbar's toggle, underneath it. And that toggle
+existed on `/chat` alone: the seven other pages carrying the sidebar had no
+dismiss control of any kind.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+from fastapi.testclient import TestClient
+
+import lembas
+
+ROOT = Path(lembas.__file__).parent
+TEMPLATES = ROOT / "web/templates"
+APP_CSS = (ROOT / "web/static/css/app.css").read_text(encoding="utf-8")
+APP_JS = (ROOT / "web/static/js/app.js").read_text(encoding="utf-8")
+
+# Every page that renders the sidebar.
+CARRIERS = [
+    "settings.html",
+    "chat/index.html",
+    "reports/_layout.html",
+    "messages/index.html",
+    "schedules/_layout.html",
+    "library/_layout.html",
+    "agents/_layout.html",
+    "folders/edit.html",
+]
+
+
+def test_every_page_with_a_sidebar_has_a_way_to_close_it():
+    """`grep -rn 'data-toggle="#sidebar"'` returned exactly one hit, and the
+    other seven pages were unusable on a phone because of it."""
+    missing = [
+        name
+        for name in CARRIERS
+        if "partials/_sidebar_toggle.html" not in (TEMPLATES / name).read_text(encoding="utf-8")
+    ]
+    assert not missing, f"no sidebar toggle on: {missing}"
+
+
+def test_the_toggle_is_one_partial_and_not_eight_copies():
+    """The next control added to a topbar should not have to be added eight
+    times, which is how the first one came to exist once."""
+    toggle = (TEMPLATES / "partials/_sidebar_toggle.html").read_text(encoding="utf-8")
+    assert 'data-toggle="#sidebar"' in toggle
+    assert 'aria-label="Toggle sidebar"' in toggle
+
+
+def test_the_toggle_does_not_claim_to_be_open():
+    """It rendered `aria-expanded="true"` from the template -- a fact nobody
+    checked and one that was false on every phone. `syncToggles` writes it."""
+    toggle = (TEMPLATES / "partials/_sidebar_toggle.html").read_text(encoding="utf-8")
+    # The element, not the file: the comment above it explains at length why
+    # the attribute is absent, and a test reading the file fails on the
+    # explanation for the fix.
+    button = toggle.split("<button", 1)[1].split(">", 1)[0]
+    assert "aria-expanded" not in button
+    assert 'syncToggles("#sidebar"' in APP_JS
+
+
+def test_the_drawer_is_closed_by_default_only_where_it_is_a_drawer():
+    """Three states, and the third is the one that matters: absent means
+    "follow the width", which is what the server renders because the server
+    does not know the width."""
+    assert 'data-sidebar="open"' in APP_CSS
+    assert 'data-sidebar="closed"' in APP_CSS
+    assert 'return !window.matchMedia(NARROW).matches;' in APP_JS
+
+
+def test_the_close_button_is_reachable_inside_the_open_drawer():
+    """`.sidebar__close` is `display: none` at width and turned back on inside
+    the media query. Both rules are one class deep, so the order decides -- and
+    written the other way round the button is invisible at every width,
+    including inside the drawer it exists for."""
+    base = APP_CSS.index("\n.sidebar__close {")
+    inside = APP_CSS.index("  .sidebar__close {")
+    assert base < inside, "the base rule must come first or it wins everywhere"
+
+
+def test_nothing_behind_the_drawer_can_be_tabbed_into():
+    assert 'toggleAttribute("inert"' in APP_JS
+
+
+def test_inert_is_never_left_behind_on_a_widened_window():
+    """An `inert` left on a window somebody widened is a page that has stopped
+    responding, which is worse than the bug it is here to fix."""
+    assert 'matchMedia(NARROW).addEventListener("change"' in APP_JS
+
+
+def test_the_drawer_is_dismissible_without_finding_a_button():
+    """The scrim is a partial because there are two sidebars, so the markup is
+    asserted where it is defined and its *inclusion* is asserted per sidebar by
+    `test_every_sidebar_carries_the_way_out_and_the_scrim`."""
+    scrim = (TEMPLATES / "partials/_sidebar_scrim.html").read_text(encoding="utf-8")
+    assert 'class="sidebar-scrim"' in scrim
+    assert 'data-toggle="#sidebar"' in scrim
+    assert ".sidebar-scrim" in APP_CSS
+
+
+def test_the_sidebar_does_not_go_through_setpanel():
+    """The other three panels use the `hidden` attribute, which is one value
+    for both widths -- the thing this panel cannot use."""
+    assert 'if (selector === "#sidebar") return setSidebar(open);' in APP_JS
+
+
+def test_the_toggle_is_a_real_target(client: TestClient, registered):
+    """44px comes from `--control-h` under the coarse-pointer block, so this
+    only holds while `.btn--icon` keeps taking its size from that token."""
+    tokens = (ROOT / "web/static/css/tokens.css").read_text(encoding="utf-8")
+    assert "--tap-min: 2.75rem" in tokens
+    assert "--control-h: var(--tap-min)" in tokens
+
+
+# --- Any sidebar, not only the one this was written for ----------------------
+def _sidebar_templates() -> list[str]:
+    """Every template that renders a sidebar of its own, found rather than
+    listed -- the admin one was missed precisely because it was not on a list."""
+    return [
+        str(p.relative_to(TEMPLATES))
+        for p in TEMPLATES.rglob("*.html")
+        if '<aside class="sidebar"' in p.read_text(encoding="utf-8")
+    ]
+
+
+def test_every_sidebar_is_one_the_toggle_can_find():
+    """`data-toggle="#sidebar"` resolves by id, and below the phone breakpoint
+    `.sidebar` is a fixed overlay that starts closed. A sidebar without that id
+    is one nothing can open: the admin area shipped that way in 1.1.0 and 1.1.1
+    -- reachable on a phone, and unnavigable the moment you arrived."""
+    without = [
+        name
+        for name in _sidebar_templates()
+        if '<aside class="sidebar" id="sidebar"' not in (TEMPLATES / name).read_text(
+            encoding="utf-8"
+        )
+    ]
+    assert not without, f"sidebar with no id, so nothing can open it: {without}"
+
+
+def test_every_sidebar_carries_the_way_out_and_the_scrim():
+    missing = []
+    for name in _sidebar_templates():
+        text = (TEMPLATES / name).read_text(encoding="utf-8")
+        if "partials/_sidebar_close.html" not in text:
+            missing.append(f"{name}: no close button")
+        if "partials/_sidebar_scrim.html" not in text:
+            missing.append(f"{name}: no scrim")
+    assert not missing, missing
+
+
+def test_the_admin_area_can_be_navigated_on_a_phone(client: TestClient, registered):
+    """The whole of administration is in that nav and nowhere else."""
+    page = client.get("/admin/models").text
+    assert '<aside class="sidebar" id="sidebar"' in page
+    assert 'data-toggle="#sidebar"' in page
+    assert "sidebar-scrim" in page
+
+
+# --- Controls do not shrink below their own size -----------------------------
+def test_an_icon_button_keeps_its_size_in_a_tight_row():
+    """`.btn--icon` sets a width and, without `flex: none`, a row that runs out
+    of room shrinks it instead of the text beside it -- the sidebar toggle
+    measured 18px across on a 390px chat, well under half its target."""
+    rule = APP_CSS.split(".btn--icon {", 1)[1].split("}", 1)[0]
+    assert "flex: none" in rule
+
+
+def test_the_topbar_can_give_somewhere(client: TestClient, registered):
+    """`.topbar__where` was the designated shrinker in that row and it is
+    `display: none` below 64rem, so on a phone the group went rigid and the
+    title -- which is `flex: 1` -- was squeezed to exactly zero width."""
+    actions = APP_CSS.split(".topbar__actions {", 1)[1].split("}", 1)[0]
+    assert "flex: 0 1 auto" in actions
+    assert "min-width: 0" in actions
+    assert "min-width" in APP_CSS.split(".topbar__title {", 1)[1].split("}", 1)[0]

tests/test_ui_js.py

@@ -324,7 +324,12 @@ def test_no_page_loads_a_script_that_the_base_template_already_loads():
     from pathlib import Path
 
     templates = Path(__file__).resolve().parents[1] / "src/lembas/web/templates"
-    pattern = re.compile(r"path='js/([a-z_]+\.js)'")
+    # Both spellings, because the way a static URL is written has changed once
+    # already: `url_for('static', path='js/x.js')` became `asset('js/x.js')`
+    # when assets started carrying the release. The assertion below that the set
+    # is non-empty is what turned that rename into a loud failure rather than a
+    # sweep that silently stopped sweeping -- keep it.
+    pattern = re.compile(r"(?:path=|asset\()'js/([a-z_]+\.js)'")
     always = set(pattern.findall((templates / "base.html").read_text()))
     assert always, "base.html stopped loading any script; this test is now blind"