A phone, and how much of this could not be used on one

The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

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

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_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,102 @@ 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

tests/test_sidebar_drawer.py

@@ -0,0 +1,115 @@
+"""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():
+    sidebar = (TEMPLATES / "partials/sidebar.html").read_text(encoding="utf-8")
+    assert 'class="sidebar-scrim"' in sidebar
+    assert 'data-toggle="#sidebar"' in sidebar
+    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